{
  "id": 8041285,
  "title": "React Performance Patterns I Use Every Day",
  "url": "https://urgent.news/2026/09/17/react-performance-patterns-i-use-every-day",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-09-17T14:30:00.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/letusai15/react-performance-patterns-i-use-every-day-4jma"
  },
  "original_language": "en",
  "account": "Here are some common performance pitfalls in React, along with strategies to optimize:\n\n1. Keep state as close as possible to where it's used. Placing state too high in the component tree causes unnecessary re-renders of the entire tree whenever it updates. Move state to the lowest level component that needs it access. For example, store hover state locally inside the component that uses it, rather than at the top-level App component. This local state change only re-renders that subtree, not the whole component tree.\n\n2. Use refs for values that don't affect the UI. Refs provide mutable containers for values that don't need to trigger re-renders. Don't use state for things that change frequently but don't need to cause a component to re-render. Animating values like mouse positions, for instance, can be stored in refs instead of state. This avoids React scheduling a render for every single state change.\n\n3. Memoize expensive components, not individual props. It's more efficient to wrap entire component subtrees in React.memo instead of trying to useMemo each individual prop. Wrapping the whole subtree ensures all its children components are memoized as well. But for a given subtree to memoize effectively, its props must be stable across renders. Only then will useMemo and useCallback have the intended effect of memoizing values.\n\n4. Virtualize long lists. Rendering thousands of DOM nodes can be very costly. For lists of 100+ rows, virtualize the list using libraries like tanstack/virtual. This drops the DOM node count to a small constant (~20) regardless of the list size. Virtualization only renders the visible portion of the list at any given time, dramatically improving performance for long lists.\n\nKey takeaways: colocate state to local components, use refs for non-UI values, memoize whole subtrees, and virtualize lengthy lists. Measure performance first with React DevTools Profiler before optimizing - and avoid premature use of useMemo.",
  "summary": "After profiling dozens of React apps, the same culprits appear again and again. Here are the patterns I reach for first — and the ones that look smart but actually hurt. Performance optimization in React is one of those areas where intuition frequently leads you astray. Developers reach for useMemo everywhere, wrap every function in useCallback , and then wonder why their app is slower . Let me…",
  "key_points": [],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}