Warning with React Hooks order

[ecarl65]

Prerequisites

• [X] I have searched the existing issues
• [X] I understand that providing a SSCCE example is tremendously useful to the maintainers.
• [X] I have read the documentation
• [ ] Ideally, I'm providing a sample JSFiddle or a shared playground link demonstrating the issue.

What theme are you using?

material-ui

Version

4.2.2

Current Behavior

Running a pared down version of the schema-dependencies example from the playground in my own instance with material-ui v5 I'm getting the following react error when I click Add Item.

Warning: React has detected a change in the order of Hooks called by DefaultNormalArrayFieldTemplate. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://reactjs.org/link/rules-of-hooks

   Previous render            Next render
   ------------------------------------------------------
1. useContext                 useContext
2. undefined                  useContext
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

DefaultNormalArrayFieldTemplate@http://localhost:3001/static/js/bundle.js:34177:27
ArrayFieldTemplate@http://localhost:3001/static/js/bundle.js:34045:16
ArrayField@http://localhost:3001/static/js/bundle.js:30029:24
div
./node_modules/@emotion/react/dist/emotion-element-cbed451f.browser.esm.js/withEmotionCache/<@http://localhost:3001/static/js/bundle.js:660:66
FormControl@http://localhost:3001/static/js/bundle.js:8974:82
WrapIfAdditional@http://localhost:3001/static/js/bundle.js:34290:18
FieldTemplate@http://localhost:3001/static/js/bundle.js:34360:12
SchemaField@http://localhost:3001/static/js/bundle.js:31786:29
div
./node_modules/@emotion/react/dist/emotion-element-cbed451f.browser.esm.js/withEmotionCache/<@http://localhost:3001/static/js/bundle.js:660:66
Grid@http://localhost:3001/static/js/bundle.js:10809:87
div
./node_modules/@emotion/react/dist/emotion-element-cbed451f.browser.esm.js/withEmotionCache/<@http://localhost:3001/static/js/bundle.js:660:66
Grid@http://localhost:3001/static/js/bundle.js:10809:87
ObjectFieldTemplate@http://localhost:3001/static/js/bundle.js:34423:26
ObjectField@http://localhost:3001/static/js/bundle.js:31154:29
div
./node_modules/@emotion/react/dist/emotion-element-cbed451f.browser.esm.js/withEmotionCache/<@http://localhost:3001/static/js/bundle.js:660:66
FormControl@http://localhost:3001/static/js/bundle.js:8974:82
WrapIfAdditional@http://localhost:3001/static/js/bundle.js:34290:18
FieldTemplate@http://localhost:3001/static/js/bundle.js:34360:12
SchemaField@http://localhost:3001/static/js/bundle.js:31786:29
form
Mui5TagName@http://localhost:3001/static/js/bundle.js:35249:18
Form@http://localhost:3001/static/js/bundle.js:33129:24
./node_modules/@rjsf/core/dist/core.esm.js/withTheme/<@http://localhost:3001/static/js/bundle.js:33655:18 react-dom.development.js:86

And here is the minimal example index.js:

import './index.css';
import React from 'react';
import ReactDOM from 'react-dom';

import Form from '@rjsf/material-ui/v5';

const schema = {
  "title": "Schema dependencies",
  "description": "These samples are best viewed without live validation.",
  "type": "object",
  "properties": {
    "arrayOfConditionals": {
      "title": "Array of conditionals",
      "type": "array",
      "items": {
        "$ref": "#/definitions/person"
      }
    },
  },
  "definitions": {
    "person": {
      "title": "Person",
      "type": "object",
      "properties": {
        "Do you have any pets?": {
          "type": "string",
          "enum": [
            "No",
            "Yes: One",
            "Yes: More than one"
          ],
          "default": "No"
        }
      },
      "required": [
        "Do you have any pets?"
      ],
    }
  }
};

ReactDOM.render(<Form schema={schema} />,
        document.getElementById("root"));

Expected Behavior

I wouldn't expect to get the React error that I got.

Steps To Reproduce

1. I used create-react-app to create an app.
2. Install the dependencies and packages required for rjsf and rjsf material-ui
3. Copy the above code to src/index.js
4. Have the public/index.html contain a <div id="root"></div>

Environment

- OS: Red Hat Enterprise Linux release 8.5 (Ootpa)
- Node: v18.6.0
- npm: 8.13.2

Anything else?

I think it may work with other themes, might be a material UI v5 issue. But I'm on an isolated network and don't have access to other themes that work. I can't get it to replicate on the shared playground version though, so I'm not sure what to make of that.

[ecarl65]

I had done a search, but unfortunately the related ticket had a screenshot of the error, so a search didn't show it up. I think that if this patch is accepted it should address the issue. Although, being new to this world, I don't see that file in my rjsf package and so I'm not sure how to test it myself.

https://github.com/rjsf-team/react-jsonschema-form/pull/2912

[cerpins]

Looks like the same issue. Not aware of other theme, file I reported issues on is part of MUI5 wrapper for RJSF, so it is related specifically to PR for MUI5 support.

[heath-freenome]

In the upcoming rjsf v5 release, this issue will be moot as the hooks used to make the v4 and v5 releases co-exist will be gone. Instead, the @rjsf/material-ui release will be only used for v4 and a new @rjsj/mui release will be provided for v5. Look for an alpha (or beta) release in early august. NOTE, this release will have breaking changes

[leonbloy]

Same here with 4.2.2, and mui 5.

react-dom.development.js:67 Warning: React has detected a change in the order of Hooks called by DefaultNormalArrayFieldTemplate2. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://reactjs.org/link/rules-of-hooks

   Previous render            Next render
   ------------------------------------------------------
1. useContext                 useContext
2. undefined                  useContext
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

    at DefaultNormalArrayFieldTemplate2 (http://localhost:3000/node_modules/.vite/deps/@rjsf_material-ui.js?v=79f739e8:426:27)
    at ArrayFieldTemplate2 (http://localhost:3000/node_modules/.vite/deps/@rjsf_material-ui.js?v=79f739e8:320:22)
    at ArrayField2 (http://localhost:3000/node_modules/.vite/deps/chunk-2JCHE24J.js?v=f6525661:11143:24)

[heath-freenome]

Fixed in v5 beta via new @rjsf/mui theme, see https://react-jsonschema-form.readthedocs.io/en/latest/5.x%20upgrade%20guide/