Fix the render count for a memoized child

Review the AI's codeEasy10 min

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_renders is 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) -> int
Example 1
Inputchild_render_count(["inline-function"], 5)
Output5
Example 2
Inputchild_render_count(["usecallback-stable"], 5)
Output1
Example 3
Inputchild_render_count([], 5)
Output1