Working with Data Fetching and Memoization in React - How Do the useCallback Hook and React.memo Work?

JavaScript
1

Tell us what’s happening:

At the very end of the lesson the useCallback hook is used to prevent the child component from re-rendering when the parent component re-renders but doesn’t the dependency on count defeat this very purpose?

const handleClick = useCallback(() => {
  setCount((prevCount) => prevCount + 1);
}, [count]);

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36

Challenge Information:

Working with Data Fetching and Memoization in React - How Do the useCallback Hook and React.memo Work?

2

Actually that’s not what useCallback does.
https://react.dev/reference/react/useCallback

useCallback just gives us back a memoized version of the function we provided as an argument. That’s all it does. (until the dependencies change, which would cause the function reference to be refreshed)

Edit: in this case the component will re-render every second, not just for changes to count. This reduces the extra runs of useEffect every second (unrelated to count). That is assuming you are referring to the example with the timer+count states. If you are not, then it would be good to clarify that and share the full code from the example you are currently reading.