Understanding useMemo and useCallback in React: Memoization Explained

Memoize an Expensive Calculation

Create a React component that calculates the nth Fibonacci number. Use useMemo to memoize the calculation so it only recalculates when the input changes.

Expected output: The component efficiently calculates and displays the Fibonacci number without recalculating on unrelated state changes.

Hint: Use a recursive or iterative Fibonacci function and wrap it with useMemo with the input as dependency.

Optimize Child Component Rendering

Create a parent and child React component where the child receives a callback prop. Use useCallback to memoize the callback and React.memo to prevent unnecessary child renders.

Expected output: The child component only re-renders when relevant props change, not on every parent render.

Hint: Wrap the child component with React.memo and memoize the callback in the parent with useCallback.

useMemo memoizes the result of a function (a value), while useCallback memoizes the function itself to keep the same function reference between renders.

Use useCallback when you want to memoize a function, especially when passing it as a prop to child components to prevent unnecessary re-renders.

Omitting dependencies can cause the memoized value or function to become stale or cause unnecessary recomputations, leading to bugs or performance issues.