Code Re-execution

Everything Runs Again

When React renders your component, it runs the entire function body from top to bottom. Every variable declaration, every calculation, every function definition — all of it.

function Profile({ user }) {
  // ALL of this runs on EVERY render:
  const fullName = user.first + " " + user.last;
  const initials = fullName.split(" ").map(n => n[0]).join("");
  const now = Date.now();
  console.log("rendered at", now);

  const [bio, setBio] = useState("");

  // Typing in bio → re-render → ALL the above re-runs
  return (
    <div>
      <span>{initials}</span>
      <input value={bio} onChange={e => setBio(e.target.value)} />
    </div>
  );
}

Watch It Happen

Type in the input below. Each keystroke triggers a re-render. Watch the console panel — every render produces a different Date.now() and Math.random() because the entire function re-executes.

Why This Matters

Most of the time, re-running code is fast and harmless. But it becomes a problem when:

This is exactly why hooks like useMemo and useCallback exist — they let you tell React "skip this on re-render if the inputs haven't changed."