[Bug] Todo - Move First to End - Warning: Cannot update a component (`ForwardRef`) while rendering a different component (`Field`)

[awhitford]

Steps to Reproduce

1. Run the React Playground
2. Open the Chrome Developer Tools to see the JavaScript Console
3. Choose the Todos tab
4. Click Move first to end

Check the JavaScript Console and you will see an error like:

react-dom_client.js?v=d064dc83:521 Warning: Cannot update a component (`ForwardRef`) while rendering a different component (`Field`). To locate the bad setState() call inside `Field`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
    at Field (http://localhost:5173/@fs/Users/anthony/github/awhitford/modular-forms/packages/react/dist/index.mjs:91:27)
    at div
    at div
    at div
    at div
    at FieldArray (http://localhost:5173/@fs/Users/anthony/github/awhitford/modular-forms/packages/react/dist/index.mjs:92:32)
    at div
    at form
    at Form
    at TodosPage (http://localhost:5173/src/routes/todos.tsx:35:8)
    at RenderedRoute (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=d064dc83:3265:5)
    at Routes (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=d064dc83:3718:5)
    at main
    at Router (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=d064dc83:3665:15)
    at BrowserRouter (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=d064dc83:4132:5)
    at App

[fabian-hiller]

Thank you for creating this issue! Do you know how to fix it?

[awhitford]

I can't quite figure it out. Looks like the Field: (props) => Field({ ...props, of: form }), line:

function useForm(options) {
  const form = useFormStore(options);
  return useMemo(
    () => [
      form,
      {
        Form: (props) => Form({ ...props, of: form }),
        Field: (props) => Field({ ...props, of: form }),
        FieldArray: (props) => FieldArray({ ...props, of: form })
      }
    ],
    [form]
  );
}

And they reference this Bug: too hard to fix "Cannot update a component from inside the function body of a different component.". I tried upgrading to the latest dependencies thinking that maybe it would solve it or perhaps give a better error message, but doesn't change the issue.

[fabian-hiller]

I am currently focused on Valibot and also plan to rewrite Modular Forms later this year. That's why I'm not spending that much time on the current code of the library. Sorry for that.

[JuicyBenjamin]

Any updates on this? I'm trying out modular forms in a react project that uses shadcn components and am getting the same error. Off the top of my head I don't really know how to target this.

I will say this, maybe it can be fixed by react 19 as forwardRef should be removed there and you should be able to pass refs to all components, if I have understood it correctly.

[fabian-hiller]

Unfortunately there is no update as I am still mainly focused on Valibot. If you try it with React 19, please let me know if it is fixed.