React Rendering

Foundational

Every hook interacts with the render cycle. Understand rendering first, and hooks will make perfect sense.

💡 Every React hook depends on the render cycle. Understanding rendering is the foundation everything else builds on.

What is Rendering?

The foundation — what rendering means, what causes it, and how React updates the screen. Start here.

Variables Reset

Why regular variables don't work for state — they reset to their initial value on every render.

Code Re-execution

Every line in your component function runs on every render. There are no skip zones.

Render Cascade

When a parent renders, all children render too — even if their props didn't change.

Expensive Work

Expensive calculations re-run every render. This is why useMemo exists.

Reference Trap

Inline objects and functions create new references every render, breaking memoization.

These are the patterns that trip up developers most often. Switch between Wrong and Fixed to compare the code side by side.

New object/array references on every render

Defining objects inline in the component body creates new references each render

Don't do this

parent.tsx

function Parent() {
  // New object created every render — child always re-renders
  const style = { color: "red", fontSize: 16 };
  return <MemoizedChild style={style} />;
}

Objects and arrays are compared by reference, not by content. Even if the values are identical, {} !== {} in JavaScript. This means inline objects passed as props always look 'new' to React.memo children, defeating memoization. Use useMemo for objects and useCallback for functions that are passed as props.

Assuming children only re-render when props change

Not realizing that parent state changes cascade to all children by default

Don't do this

app.tsx

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

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>+</button>
      <p>Count: {count}</p>
      {/* ExpensiveList re-renders even though items didn't change */}
      <ExpensiveList items={items} />
    </div>
  );
}

When a parent re-renders (due to its own state change), ALL children re-render by default — even if the props passed to them are identical. React doesn't check props automatically. Wrap expensive children in React.memo to skip re-renders when props haven't changed.

Expensive computations in the render path

Running heavy calculations directly in the component body on every render

Don't do this

search.tsx

function SearchResults({ items, query }) {
  // Filters 10,000 items on EVERY render, even if nothing changed
  const filtered = items.filter(item =>
    item.name.toLowerCase().includes(query.toLowerCase())
  );

  return filtered.map(item => <div key={item.id}>{item.name}</div>);
}

Every line in your component function runs on every render — there are no skip zones. Expensive operations like filtering, sorting, or computing large datasets will cause visible lag. Wrap them in useMemo with appropriate dependencies so they only re-run when inputs change.

function Parent() { const [count, setCount] = useState(0); return ( <div> <button onClick={() => setCount(c => c + 1)}>+</button> <p>Count: {count}</p> {/* ExpensiveList re-renders even though items didn't change */} <ExpensiveList items={items} /> </div> ); }

function SearchResults({ items, query }) { // Filters 10,000 items on EVERY render, even if nothing changed const filtered = items.filter(item => item.name.toLowerCase().includes(query.toLowerCase()) ); return filtered.map(item => <div key={item.id}>{item.name}</div>); }

React Rendering

Common Mistakes

React Rendering

Common Mistakes