EffectWithState() — react Function Reference

Architecture documentation for the EffectWithState() function in right.js from the react codebase.

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ EffectWithState() — react Function Reference

Dependency Diagram

graph TD
  2aa9852d_d1ed_c28b_b245_a5f7b9049622["EffectWithState()"]
  195fdf06_dc9f_fedb_0194_c0dae73878c0["right.js"]
  2aa9852d_d1ed_c28b_b245_a5f7b9049622 -->|defined in| 195fdf06_dc9f_fedb_0194_c0dae73878c0
  style 2aa9852d_d1ed_c28b_b245_a5f7b9049622 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shell/src/multi/right.js lines 20–38

function EffectWithState() {
  const [didMount, setDidMount] = useState(0);

  const renderCountRef = useRef(0);
  renderCountRef.current++;

  useLayoutEffect(() => {
    if (!didMount) {
      setDidMount(true);
    }
  }, [didMount]);

  return (
    <ul>
      <li>Rendered {renderCountRef.current} times</li>
      {didMount && <li>Mounted!</li>}
    </ul>
  );
}