mediumFrontend

How do you prevent unnecessary re-renders in functional components?

Q: How do you prevent unnecessary re-renders in functional components?

**Core concept (TL;DR).** Stop a render before it starts, or stop it from cascading. Wrap pure children in React.memo and feed them **stable props** ( useCallback / useMemo ); **colocate** state so changes touch a small subtree; pass slow subtrees as children ; and **split or memoize Context** so consumers don't all re-render. Don't over-optimize cheap components. Four levers against needless renders <text x="77" y="63" fill="curre

706 views

Understand the problem

This question focuses on performance optimization techniques specific to functional components.

performanceoptimizationreact.memohooks

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Stable callback lets memo skip the child

import { memo, useState, useCallback } from "react";

const Row = memo(function Row({ onSelect, label }) {
  console.log("Row rendered:", label);
  return <button onClick={() => onSelect(label)}>{label}</button>;
});

export default function App() {
  const [count, setCount] = useState(0);
  const onSelect = useCallback((l) => console.log("selected", l), []); // stable
  return (
    <div style={{ padding: 24, fontFamily: "system-ui" }}>
      <button onClick={() => setCount((c) => c + 1)}>count {count}</button>
      <Row onSelect={onSelect} label="A" />   {/* skipped on count change */}
      <Row onSelect={onSelect} label="B" />
    </div>
  );
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

How do you handle memory leaks in React?

How do you handle forms in React?