Issue Description
The SearchBox component in our application is re-rendering every second due to a timer in its parent component (Playground), even when the search state hasn't changed. This may lead to performance issues, especially with larger datasets or more complex rendering logic.
Current Behavior
- The
usePlayground hook in Playground sets up a timer that updates timeLeft every second.
- This causes
Playground to re-render every second.
- Consequently,
SearchBox re-renders every second, despite its props (search and setSearch) not changing.
Expected Behavior
SearchBox should only re-render when its props (search or setSearch) actually change, not on every tick of the parent component's timer.
Issue Description
The
SearchBoxcomponent in our application is re-rendering every second due to a timer in its parent component (Playground), even when the search state hasn't changed. This may lead to performance issues, especially with larger datasets or more complex rendering logic.Current Behavior
usePlaygroundhook inPlaygroundsets up a timer that updatestimeLeftevery second.Playgroundto re-render every second.SearchBoxre-renders every second, despite its props (searchandsetSearch) not changing.Expected Behavior
SearchBoxshould only re-render when its props (searchorsetSearch) actually change, not on every tick of the parent component's timer.