[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.