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.

Introduction to performance in React

Introduction to performance in React

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

Introduction to performance in React

“

This session provides an introduction to performance optimization in React. You will learn how to identify unnecessary re-renders, a common cause of performance issues in React applications. We'll build a simple parent-child component structure and use console logs to visualize re-renders, demonstrating how props and state changes affect performance. Let's start with a basic React component. Let's create the components folder inside src and add parent.jsx and child.jsx. Moving to child.jsx. Now I am creating a basic functional component called Child. It takes name and count as props. This component will serve as our child component to demonstrate re-rendering. I am adding a Console.log inside the child component. This will log RenderingChild followed by the child name to the console every time the child component renders. This is a useful technique to visually track when and how often a component re-renders. Let's display the name and count props within the child component. This…

Contents