React <Show> Demo

Hypothesis

If a child component is passed as JSX to <Show when=>, does its function body still execute?

🔴 hidden

Parent component area

Parent renders: 1

Verdict

  • Module-level code — always runs once on import, regardless of when.
  • Component function body — only runs when the element is actually returned into the React tree (i.e. when=true).
  • useEffect / useState — only run when the component is mounted by React.
  • JSX expressions like <SpyChild /> are evaluated to React.createElement calls during the parent's render, but the child's function body is not invoked until the element is actually rendered.