Unnecessary Re-renders in SearchBox Component

[pawansoni007]

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

1. The usePlayground hook in Playground sets up a timer that updates timeLeft every second.
2. This causes Playground to re-render every second.
3. 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.

[pawansoni007]

#54

[sahadat-sk]

Hey @pawansoni007 can i work on this issue?

[pawansoni007]

@sahadat-sk no, it's already an ongoing change from my end.

[lucifercr07]

@pawansoni007 can you please check once if this has been fixed in latest build?

[pawansoni007]

Sure I'll check and raise another PR with requested changes.

[progmatic-99]

@lucifercr07 can i take this up?