hardFrontend

How do you optimize React component rendering?

Q: How do you optimize React component rendering?

**Core concept (TL;DR).** Reduce both **how often** a component renders and **how much** each render costs. Skip needless renders with React.memo + stable props, **move state down** so updates touch a small subtree, **lift slow content into children **, memoize expensive calculations with useMemo , keep **stable keys**, and avoid creating new objects/functions inline. Render less often · render less work <text x="135" y="64" fill="#06b6d4" font-size="10.5" font

929 views

Understand the problem

Demonstrates an understanding of performance best practices.

performanceoptimizationmemoizationreact.memo

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

Move state down so siblings don't re-render

import { useState } from "react";

// ✅ state lives inside SearchBox, so typing doesn't re-render <ExpensiveList/>
function SearchBox() {
  const [q, setQ] = useState("");
  return <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="search" />;
}
function ExpensiveList() {
  console.log("list rendered");        // not re-rendered on each keystroke
  return <ul><li>item</li></ul>;
}

export default function App() {
  return (
    <div style={{ padding: 24, fontFamily: "system-ui" }}>
      <SearchBox />
      <ExpensiveList />
    </div>
  );
}

Join the discussion

Discussion (0)

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

What problem does `useSyncExternalStore` solve?

How do you avoid re-renders with composition instead of memoization?