Component with Props

React Unforget can trace statements that will mutate a variable.

Input Code

import { useState } from "react";

function InnerComponentWithProps({ count, text }) {
  return (
    <div>
      <span>Count: {count}</span> {text}
    </div>
  );
}

export default function CounterWithInnerComponents() {
  const [state, setState] = useState(0);

  let text = "The number is: ";

  if (state % 2 === 0) {
    text += "even";
  } else {
    text += "odd";
  }

  return (
    <div>
      <button onClick={() => setState(state + 1)}>Increment</button>
      <InnerComponentWithProps count={state} text={text} />
    </div>
  );
}

Open Sandbox

React Unforget Result


export default function App() {
  return <div>Compiling...</div>;
}

Read-only

Open Sandbox

Click here to view the dependency graph

Component with Early Return Counter with Mutated Dependency