React Native Academy · Lesson

useCallback and useMemo for Performance

Memoize callback functions with useCallback to prevent unnecessary child re-renders, and cache expensive computed values with useMemo.

The Re-Render Problem

Every time a component re-renders in React, all values created inside the function body are recreated. This includes objects, arrays, and most importantly — functions. If a recreated function or value is passed as a prop to a child component, the child sees a new reference and re-renders, even when the logical value has not changed.

What is useCallback?

useCallback(fn, deps) returns a memoized version of the callback function that only changes if one of the dependencies has changed. Wrapping a callback in useCallback preserves the same function reference across renders, preventing unnecessary re-renders in child components that receive it as a prop.

import { useCallback } from 'react';

function Parent() {
  const [count, setCount] = useState(0);

  // handlePress is the SAME function reference between renders
  // as long as count does not change
  const handlePress = useCallback(() => {
    console.log('Pressed, count is:', count);
  }, [count]);

  return <Child onPress={handlePress} />;
}

All lessons in this course

← Back to React Native Academy