[Compiler Bug]: useRef<HTMLFormElement | null> - Error: This value cannot be modified

[tresorama]

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://playground.react.dev/#N4Igzg9grgTgxgUxALhASwLYAcIwC4AEwBUYCAYrhgMoIwBudASgmFADaEC+BAZjBAwEAOiAB0AelIIAtLyoyyDOjJisOeUQG5hAOz0IAHjnwE8ATywICAVTKUYGAPJY8aCLrAEAvET0ECNV4AUXYHDGQCFgBDODwxFl4nACMAKwQ4gB4ACQAVAFkAGXDQhAwEXUIAHwJdDnYAPh1dLmaDY1xCXihdOPddEnsqAApgf0CEELCqABo9Lki7CioXNw8wTNyALQgAE2o4AAsy6IaASj8Bgjh1wgBtJUYYFjZOGYIyPFplZ-VOAF0fINlo5vk8XhphmdmgFxjdPIQIE8AO4wNB4EEYABq0XYUFYQOG8kcOLxrAu3galwCATQvAIwwAhEFQuExHBYGpKhc1HhYLoYTT4WBCAhpo4gSzxRh2ZyKng2lcAsSGcLCABrBDmAhoAbE7G4-FgC5jJU0ukMzXa3UEMXhE3jGk0u1UO5W-5ieiG6y+fWko1urX-QVOriOghhq6tPQxq68-nUmmPZh-PBzM2fMEp15p8NIuio9GY-2sdMBaMtEAzEDw3hoADmKHQ2E6Zks1mIAAU8fXdat+l4ePxBAQAOTJaLJMUyLA93WqBCxPAyG7YNDsOgSXZoEWjxWjcYSCSrrDr6JrXT5PYISKiXHsUTzD7nnd1gndqC93T99bQqvgQ4IGRABJSo6F0XEwBQPAYHxLggA

Repro steps

Look the playground

NOTE: even if the error is triggered for line 18 (body of the overrideFormValues) , removing line 10 make the compiler happy. It's weird for me.

---

Code

import { useFormServerResult } from "./use-form-server-result";

export type UseFormOptions = {
  refElForm: React.RefObject<HTMLFormElement | null>;
};

export function useForm({
  refElForm,
}: UseFormOptions<TZodSchema>) {
  const [serverResult, setServerResult] = useFormServerResult();
  
  const overwriteFormValues = (formValues) => {
    if (!refElForm.current) return;
    const elForm = refElForm.current;

    for (const key in formValues) {
      if (key in elForm) {
        elForm[key].value = formValues[key];
      }
    }
  };


  return {
    serverResult,
    setServerResult,
    overwriteFormValues,
  };
}

Error

Found 1 error:

Error: This value cannot be modified

Modifying component props or hook arguments is not allowed. Consider using a local variable instead.

  16 |     for (const key in formValues) {
  17 |       if (key in elForm) {
> 18 |         elForm[key].value = formValues[key];
     |         ^^^^^^^^^^^ `refElForm` cannot be modified
  19 |       }
  20 |     }
  21 |   };

---

How often does this bug happen?

Every time

What version of React are you using?

19.2.3

What version of React Compiler are you using?

?

[Agaba-Ed]

My Guess: If a function does not return JSX and does not call any hooks, the compiler often treats it as a "Plain JavaScript Function" and skips validation. However, the moment you add const [...] = useFormServerResult(), the compiler recognizes the function as a Hook (by the use naming convention + the call to another hook).
Once it is identified as a Hook, the compiler applies "Static Analysis" to ensure it follows the Rules of React. It builds a "Reactive Scope" for the hook. Within that scope, it sees you are mutating refElForm, which is a Hook Argument.

[josephsavona]

React Compiler doesn’t know that this value is a ref, so it throws an error that you’re trying to mutate a value that isn’t safe to mutate.

The compiler treats variables named ref or -Ref as refs, so for example this works as expected:

https://playground.react.dev/#N4Igzg9grgTgxgUxALhASwLYAcIwC4AEwBUYCAYrhgMoIwBudASgmFADaEC+BAZjBAwEAOiAB0AelIIAtLyoyyDOjJisOeUQG5hAOz0IAHjnwE8ATywICAVTKUYGAPJY8aCLrAEAvET0E+KhZeZAIWAEM4PDFgpwAjACsEKIAeAAkAFQBZABkHDABRdgQMBF1CAB8CXQ52AD4dXS5Gg2NcQl4oXSj3XRJ7KgAKYH9Ax2CAGj0uULsKKhc3DzAUjIAtCAATajgACxLwuoBKPz6COGXCAG0lRhgWNk4JgjI8WmV79U4AXR9++cc7zuDw0gyOjQCowunkIEDuAHcYGg8ACMAA1cLsKCsP6DeSODFY1gnbx1U4BAJoXgEQYAQnxGGCYjgsDU5ROajwsF0EIp0LAhAQ7HyfwZTJZMDZeBaZwC+Jp-MIAGsEOYCGg+gzCdiwCcRrKKVSaSq1RqCEL8nrRhSKRaqFcTd8xPRMdjRVRtawHarvrybVxrQQA2dmnow2dOdzyRTbswvngpgbXkC448E4G4XREcjUZ6wImAqGmiAJiBobw0ABzFDobDtMyWazEAAKWMrGsWvS8PH4ggIAHI4uE4kKZFg2xrVAhIngZBdsGhijAJJs0AL+zLhqMJBJ51hF+ElroslsEKFRJj2KJpi9D2uKzjW1B27pO8twSXwLsIPCAJLlOhdExMAUDwGBsS4IA

[tresorama]

The compiler treats variables named ref or -Ref as refs, so for example this works as expected:

Great! Tried and works!
Is this in the docs?

Recognized:

• ref as full var name. ie: ref
• Ref as suffix. ie: elFormRef

Not recognized:

• ref as prefix. ie: refElForm

Could the prefix version be included in the future?

[josephsavona]

I think we might need to add this to the docs, good catch!