Fix the render count for a memoized child
Your task
A teammate wrapped a heavy child component in React.memo to stop it re-rendering, but it still renders every time the parent does. The parent passes it onSelect={(id) => doThing(id)}, a new function on every render. React.memo skips a render only when every prop is the same as last time, compared by reference. The team wants a function that predicts how often the child renders.
An assistant wrote child_render_count(prop_kinds, parent_renders). It is in the editor. It has a bug. Find it and fix it.
Input and output:
prop_kinds: one string per prop the child receives, saying how the parent makes that prop. It can be empty.parent_renders: how many times the parent renders, counting the first render. It can be 0 or negative.- Return the number of times the child renders, as an integer.
Rules the tests check:
- Exactly four kinds are stable:
"primitive-stable","string-literal","usecallback-stable"and"usememo-stable". Matching is exact and case sensitive. - Every other kind is unstable, including a kind you do not recognize.
- If
parent_rendersis 0 or less, return 0. The child never mounted. - If every prop is stable, or there are no props, return 1. The child renders once on mount and the memo skips every later render.
- If at least one prop is unstable, the child renders on every parent render. Return
parent_renders.
Examples
child_render_count(prop_kinds: list[str], parent_renders: int) -> intExample 1
Input
child_render_count(["inline-function"], 5)Output
5Example 2
Input
child_render_count(["usecallback-stable"], 5)Output
1Example 3
Input
child_render_count([], 5)Output
1