React Re-rendering Causing Performance Issues - Slow Interactions

1. Parent component re-rendering, causing all children to re-render unnecessarily
2. Heavy computations happening during render
3. State updates too frequently or on every keystroke without debounce
4. Missing useMemo or useCallback, causing child components to re-render
5. Large lists rendering all items instead of virtualizing

Use React DevTools Profiler to identify slow components

Memoize expensive computations: useMemo(() => expensiveCalc(data), [data])

Memoize callbacks: useCallback(fn, deps) to prevent child re-renders

Use React.memo for components that receive same props

Debounce input: useDebounce(value, 300) for search/filters

Virtualize long lists: react-window or react-virtualized