CODEWITHSUNDEEP
reactjsmaterial-uiuse-effect
Bishonen_PL
Bishonen_PL

Reputation: 1571

The final argument passed to useEffect changed size between renders. The order and size of this array must remain constant. [Material-UI]

Trying to use a Tooltip from Material UI results in the following error:

Warning: The final argument passed to useEffect changed size between renders. The order and size of this array must remain constant.

Previous: []
Incoming: [, function () {
      if (isControlled !== (controlled !== undefined)) {
        console.error(["Material-UI: a component is changing the ".concat(isControlled ? '' : 'un', "controlled ").concat(state, " state of ").concat(name, " to be ").concat(isControlled ? 'un' : '', "controlled."), 'Elements should not switch from uncontrolled to controlled (or vice versa).', "Decide between using a controlled or uncontrolled ".concat(name, " ") + 'element for the lifetime of the component.', "The nature of the state is determined during the first render, it's considered controlled if the value is not `undefined`.";
      }
    }, 0]

The Tooltip is wrapped over an SVG icon loaded with 'react-svg-loader':

      <Tooltip title={'Filters'}>
        <div>
          <Filter className={classes.topIcon}
            onClick={()=> {console.log('Hello');}}/>
        </div>
      </Tooltip>

I already wrapped it in a div, as recommended in this thread: Material UI tooltip doesn't display on custom component, despite spreading props to that component

Whilst this makes the tooltip work, it still returns the error every time the mouse hover over the icon and clutters the console.

Any idea how to get rid of it?

Thanks!

EDIT:

even when using an icon from 'material-ui/icons', the same error appears.

EDIT2:

as a last resort, tried surrounding a plain div within a Tooltip. Same result - big, red warning when hovered over:

    <FormGroup className={classes.percRoot}>
      <Tooltip title={'lol'}>
        <div>hello</div>
      </Tooltip>
    </FormGroup>

Upvotes: 2

Views: 1534

Answers (1)

Bishonen_PL
Bishonen_PL

Reputation: 1571

As per: https://www.npmjs.com/package/react-hot-loader

or import 'react-hot-loader' in your main file (before React)

Oddly enough, everything with hot-reloader was working perfectly until this point. It is only when using the Tooltip, that the issue surfaced.

Upvotes: 1

Related Questions