From the course: Master React 19 and Next.js 16 with Hands-On Projects and Real-World Applications

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

useCallback — memoizing functions

useCallback — memoizing functions

From the course: Master React 19 and Next.js 16 with Hands-On Projects and Real-World Applications

Start my 1-month free trial Buy for my team

useCallback — memoizing functions

“

In this session, you'll learn how to use useCallback in React to memoize functions, preventing unnecessary re-renders of child components. We'll build a simple parent-child component structure to demonstrate the concept and its benefits. Let's start with a basic React app. Let's create the components folder inside src and add parent.jsx and child.jsx. Moving to child.jsx Let's create a functional component called child that accepts a name prop. Here I am adding a console.log inside the child component to track when it re-renders. The message logged will be Rendering Child followed by the value of the name prop. Now you will see me add some JSX to our child component. It now returns a div with some styling, margin, padding, and a red border. Inside the div, I'm displaying the name prop within an H3 tag. In order to prepare our child component for memoization, I am wrapping it with react.memo. This tells React to only re-render the child if its props have changed. Moving to parent.jsx…

Contents