Performance Basics

Relax. We'll talk through this in plain words — no textbook voice.

React performance isn't about making your code complicated with optimizations from the very start. Begin with clean component structure, keep state where it's actually needed, use correct list keys, and only measure and fix unnecessary renders afterward.

jsx

import { memo, useState } from 'react';

const LessonItem = memo(function LessonItem({ title }) {
  console.log('render lesson:', title);
  return <li>{title}</li>;
});

function App() {
  const [count, setCount] = useState(0);
  const lessons = ['JSX', 'Props', 'State'];

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Clicked {count}</button>
      <ul>
        {lessons.map(lesson => (
          <LessonItem key={lesson} title={lesson} />
        ))}
      </ul>
    </div>
  );
}

`memo` helps skip re-rendering a child component when its props haven't changed. In this example, `LessonItem` avoids re-rendering when its title stays the same.

You should see

The button count can go up, and the list items are shown as a memoized component.

Info

Before optimizing for performance, it's best to check with React DevTools Profiler first. Optimizing by guesswork usually just makes the code bulkier without much payoff.

Easy traps

You don't need to slap `memo` on every component. On a component whose props change constantly, memo can actually hurt more than it helps.