React

Rendering optimization deep dive - Wanneer re-rendert React?

Understanding re-renders = sneller debuggen.

Home/Categorieën/React/Rendering optimization deep dive - Wanneer re-rendert React?

Re-render triggers:

Parent re-renders = children re-render (always) Componen own state changes Received props change Context consumer value changes

Optimization strategies

React.memo wraps component, skips if props equal memo only compare shallow equality Need useCallback for function props Need useMemo for object/array props Use Profiler DevTools to find bottlenecks

Code Voorbeelden

JAVASCRIPTRe-render optimization
// Without optimization, List re-renders needles
function App() {
  const [search, setSearch] = useState('');
  
  return (
    <>
      <input onChange={(e) => setSearch(e.target.value)} />
      <List items={items} /> {/* Re-renders on every keystroke! */}
    </>
  );
}

// Solution 1: React.memo
const ListMemo = React.memo(List);

// Solution 2: Memoize deps
function App() {
  const [search, setSearch] = useState('');
  const memoItems = useMemo(() => items, [items]);
  
  return (
    <>
      <input onChange={(e) => setSearch(e.target.value)} />
      <ListMemo items={memoItems} />
    </>
  );
}

Relevante trefwoorden

renderingoptimizationperformance
← Terug naar ReactAlle categorieën →