[Compiler Bug]: Moving an unreachable early return changes child rendering

What kind of issue is this?

• React Compiler core (the JS output is incorrect, or your app works incorrectly after optimization)
• babel-plugin-react-compiler (build issue installing or using the Babel plugin)
• eslint-plugin-react-hooks (build issue installing or using the eslint plugin)
• react-compiler-healthcheck (build issue installing or using the healthcheck script)

Link to repro

https://github.com/tsotneguti/bug-demo.git

Repro steps

Environment

• Next.js 16.0.6
• React 19.2.0
• React DOM 19.2.0
• React Hook Form 7.68.0
• @hookform/resolvers 5.2.2
• React Compiler enabled

Description

I found a case where changing only the order of an unreachable early return and a useEffect changes whether a child component renders when React Hook Form's formState.isValid changes.

canAddMinors is always true, so the early return is never actually taken. So this example should not be regarded as violation of Rules of React IMHO.

Case 1 — useEffect BEFORE the early return

useEffect(() => {
  console.log("Parent effect");
}, [form.formState.isValid]);

if (!canAddMinors) {
  return <div>Error</div>;
}

When typing into the input changes:

isValid: false → true

Step2 renders again, but MinorForm is not invoked.

Case 2 — early return BEFORE useEffect

if (!canAddMinors) {
  return <div>Error</div>;
}

useEffect(() => {
  console.log("Parent effect");
}, [form.formState.isValid]);

With the same isValid change, Step2 renders again and MinorForm is invoked.

use no memo test

Adding:

"use no memo";

to Step2 makes both versions behave identically (MinorForm invoked).

This makes me suspect that the React Compiler optimization of the parent component is involved.

Additional finding

Replacing the computed canAddMinors value with a hardcoded value:

const canAddMinors = true;

also changes the behavior.

With canAddMinors hardcoded to true, MinorForm does not render when isValid changes, regardless of whether the early return is positioned before or after the useEffect.

Minimal reproduction

"use client";

import React, { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";

const schema = z.object({
  firstName: z.string().min(1, "Required"),
});

type FormValues = z.infer<typeof schema>;

function MinorForm({
  form,
  isValid,
  tick,
}: {
  form: ReturnType<typeof useForm<FormValues>>;
  isValid: boolean;
  tick: number;
}) {
  console.log("MinorForm function");

  useEffect(() => {
    console.log("MinorForm committed");
  });

  return (
    <div style={{ border: "1px solid green", padding: 8 }}>
      <h4>MinorForm</h4>

      <input {...form.register("firstName")} placeholder="First Name" />

      <button disabled={!isValid}>Save</button>
    </div>
  );
}

export default function Step2() {
  // "use no memo";

  const form = useForm<FormValues>({
    resolver: zodResolver(schema),
    mode: "onChange",
  });

  const [showForm] = useState(true);
  const [tick, setTick] = useState(0);

  const applicantBirthDate = "2005-01-01";

  const canAddMinors = (() => {
    if (!applicantBirthDate) {
      return false;
    }

    const birth = new Date(applicantBirthDate);
    const now = new Date();

    const age = (now.getTime() - birth.getTime()) / (1000 * 60 * 60 * 24 * 365);

    return age >= 18;
  })();

  // Move this useEffect above/below the early return
  // to reproduce the difference.
  if (!canAddMinors) {
    return <div>Error</div>;
  }

  useEffect(() => {
    console.log("Parent useEffect: isValid changed");
  }, [form.formState.isValid]);

  console.log("Parent render", canAddMinors);

  return (
    <div style={{ padding: 16 }}>
      {showForm && <MinorForm tick={tick} isValid={form.formState.isValid} form={form} />}

      <button onClick={() => setTick((t) => t + 1)}>Force parent re-render ({tick})</button>
    </div>
  );
}

Expected behavior

Changing the position of an unreachable early return should not change whether MinorForm is invoked when formState.isValid changes by typing into the input or clearing it.

Actual behavior

The two source orderings produce different child-rendering behavior.

Adding:

"use no memo";

to Step2 removes the difference.

How often does this bug happen?

Every time

What version of React are you using?

19.2.0

What version of React Compiler are you using?

1.0.0