js-dojo

8 render detection

What this module drills

A render is one call of your component function by React. This module trains both failure directions: redraws that buy nothing, and the redraw that should happen and never does, leaving a stale HUD. Every koan counts the same way — a module-level tally bumped at the top of each component body. Count renders, never guess at them.

Why it bites

"Its props changed" is not one of React's reasons to re-run a component: the list is own state, parent re-rendered, context changed. Past that, Object.is decides. Mutate a Map held in state, hand it back to setState, and React sees no change: the render is skipped and the HUD keeps what it drew last. Write a prop object inline in JSX and memo() never skips once.

Order

01 and 02 are the two directions — too many renders, then the missing one. 03 is the memo() identity trap. Leave 04 and 05 for last: context punching straight through a memo(), and a store rebuilt every pass, taking its subscribers and its memo()'d skill nodes with it. These koans run with pnpm koan, not Node.