ArrayInput has different behaviour in dev and in build

[PedroPerpetua]

The ArrayInput component has a breaking different behaviour in the dev environment and when you actually build the project; an empty ArrayInput (that has not been interacted with) will:

• Return an empty array in dev
• Return undefined in the build

Note: interacting with it in the build version (adding an entry) but still leaving it empty (removing all entries before submitting) will return an empty array too, as expected.

What you were expecting:

Both environments should behave the same way, preferably returning an empty array in both.

What happened instead:

Inside the build, a not-interacted ArrayInput returns undefined.

Steps to reproduce:

• Have a Create Page with an ArrayInput
• Create a new record with said page, without adding any entries to the ArrayInput
• Submit the creation

Related code:

Since this issue requires a build, instead of a sandbox I provide a minimal reproduction example repo: https://github.com/PedroPerpetua/ra-array-input-bug

This was bootstrapped with react-admin, and replaced the dataProvider with a very simple one that will just alert information about the type received from the ArrayInput, alongside a CreatePage that features an ArrayInput.

The dev server can be started with yarn dev and the build created with yarn build, as per usual.

Other information:

Environment

• React-admin version: 4.16.7 (the minimal repo uses the version included in the bootstrap, but I have verified the issue with this one too)
• React version: 18.2.0
• Browser: Chrome

[slax57]

Nice catch!
I could reproduce with a fresh project created with create-react-admin.

I suspect something linked to React 18 and Strict Mode which is probably enabled in dev mode but not in the production build.

[PedroPerpetua]

I belive (could be wrong) that the only change Strict Mode makes that actually could change behaviour is that it will run useEffect twice for components... maybe there's something that doesn't get initialized correctly the first time, but on the second run it finally does?

Edit: correction - not just useEffect, but all lifecycles. Relevant: https://react.dev/reference/react/StrictMode