useCallback Basics in React

Implement useCallback in a Counter Component

Create a counter component that increments a count using a memoized increment function with useCallback.

Expected output: A counter that increments correctly without recreating the increment function on each render.

Hint: Wrap the increment function with useCallback and provide an empty dependency array.

useCallback prevents unnecessary function re-creations on each render, helping optimize performance especially when passing callbacks to child components that depend on reference equality.

Use useCallback when you pass functions to memoized child components or when function identity affects performance. Avoid using it indiscriminately.

Omitting dependencies can cause the memoized function to use stale values from previous renders, leading to bugs.