Why do inline style objects cause re-renders?
Because style={{ color: 'red' }} creates a new object on every render, and children that compare props by reference re-render even though the style is the same. Hoist constant style objects outside the component to avoid this.
Verify This Answer
Cross-check this information using these trusted sources:
More FAQs in Common React Performance Mistakes That Slow Down Your App
Because memoization itself costs something. Wrapping everything in useMemo and useCallback without measuring adds overhead without benefit. Measure first, then memoize only where there is a real performance issue.
Because you are passing new object or function references on every render. Children compare props by reference, so new references cause re-renders even when the values are the same. Stabilize references with useMemo and useCallback where it matters.
Virtualize it. Rendering thousands of items at once is slow. Use a virtualization library like react-window to render only the visible items, which dramatically improves performance.
Still have questions?
Browse all our FAQs or reach out to our support team