How do useCallback and useMemo work in React?

Can you explain the difference between useCallback and useMemo in React?

Sure! useCallback is used to memoize functions, while useMemo is used to memoize values. This helps optimize performance.

When should I use useCallback?

You should use useCallback when passing a callback to a child component to prevent unnecessary re-renders.

And what about useMemo? When is it beneficial?

useMemo is beneficial when you have expensive calculations that you want to avoid re-running on every render.

Can you give me an example of both in code?

Absolutely! Here's a simple example:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => { doSomething(a, b); }, [a, b]);