React Rendering Experiment
This experiment demonstrates how React re-renders child components when parent state changes.
Experiment 1: Base case
Count: 0
Check console to see that both parent and child re-render on increment.
App render
Child render
Experiment 2: Memoization
Count: 0
Check console to see that only parent re-render on increment because of Memoization.
App render
Experiment 3: Memoization with Props
Count: 0
Check console to see that both parent and child re-render on increment because props break Memoization.
App render
Child render
Experiment 4: useCallback Hook and memo
Count: 0
Check console to see only parent re-render on increment.
App render
React.memo → prevents re-render
useCallback → stabilizes function props
Experiment 5: useCallback and useMemo Hooks
Count: 0
Theme: dark
Check console to see only parent re-render on increment.
App render
React.memo → prevents re-render
useCallback → stabilizes function props
useMemo → Stabilizes object/value references