How do I stop memoized cards from re-rendering?
Pass stable prop references. Inline objects and functions create new references on every render, causing memoized cards to re-render. Hoist stable references or use useMemo and useCallback to keep them stable.
Verify This Answer
Cross-check this information using these trusted sources:
More FAQs in Optimizing a Long Video List Render in React
Likely because of missing stable keys, loading all thumbnails at once, re-rendering all cards on every update, or rendering the entire list without windowing. Profile with the React DevTools Profiler to find the real bottleneck.
Use stable unique keys, lazy-load thumbnails, memoize cards with React.memo, paginate or window for very long lists, avoid inline objects as props so memoized cards do not re-render unnecessarily, and profile first to fix the real bottleneck.
Because they let React track which cards changed and update only those. Without stable keys, React cannot match old cards to new ones efficiently, causing many unnecessary re-renders.
Still have questions?
Browse all our FAQs or reach out to our support team