React Best Practices

Chapter 1 of 8 · 5 practices · 4 min · 3-question quiz

Components and purity

How to shape components so React can render, re-render and optimize them safely. Purity is the rule everything else depends on.

Start: Keep components pure during render

5 practices in this chapter

  1. 1Keep components pure during renderReact may render a component more than once, pause a render, or throw one away. If your render body has side effects, they run at unpredictable times, which is why purity is the rule everything else…
  2. 2Never define a component inside another componentDeclaring a component function inside another component creates a brand new component type on every render. React unmounts the old one and mounts the new one, which: throws away its state and resets…
  3. 3Give list items stable, unique keys from your dataKeys tell React which item is which between renders. Get them wrong and state and input values jump to the wrong row, and animations glitch.
  4. 4Split components by responsibility, not by line countA good component has one reason to change. A page that fetches data, holds form state, formats dates and renders a table is hard to read and hard to test.
  5. 5Pass ref as a normal prop in React 19Since React 19, function components receive ref as a regular prop, so new code does not need forwardRef. Accept ref in your props; Pass it to the DOM element you want to expose; Type it with…

Check yourself on this chapter

3 questions, right here once you are signed in. Your progress is saved as you read.

Sign up for the quiz