Simple Counter App

React Unforget automatically finds any variables referenced in the JSX and allocates a space form them in the cache. Then adds proper code in place to use and update the cache and minimizes the re-renders.

Input Code
import { useState } from "react";

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

  return (
    <div>
      <button onClick={() => setState(state + 1)}>Increment</button>
      <div>
        <span>Count: {state}</span>
      </div>
    </div>
  );
}
Open on CodeSandboxOpen Sandbox
React Unforget Result

export default function App() {
  return <div>Compiling...</div>;
}
Read-only
Open on CodeSandboxOpen Sandbox
Click here to view the dependency graph
Counter with Mutated DependencySimple JSX