React State & Rendering
A live look at when and why components re-render.
Independent state
Each counter owns its own state. Clicking one only re-renders that component — watch the render counts and the highlight flash.
Counter ARenders: 0
0
Counter BRenders: 0
0
Lifted state & React.memo
Re-rendering the parent re-renders every child by default — unless that child is wrapped in React.memoand its props haven't changed.
Parent count:0
Plain childRenders: 0
No props changed, but I still re-render with my parent.
React.memo childRenders: 0
Wrapped in React.memo — I skip re-rendering since my props didn't change.