The answer
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.
Optimizing a Long Video List Render in React
How do I stop memoized cards from re-rendering?
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
Want to upskill yourself?
Your learning library
Small steps. Big possibilities.
Find your next course. Build something great.