Skip to content

findDOMNode is deprecated in StrictMode warning #200

@josebui

Description

@josebui

Describe the bug
Using Strict mode, I am getting this waring message:

      Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node
          at div
          at Paper ((Project folder)/node_modules/@material-ui/core/Paper/Paper.js:55:23)
          at WithStyles ((Project folder)/node_modules/@material-ui/styles/withStyles/withStyles.js:67:31)
          at Transition ((Project folder)/node_modules/react-transition-group/cjs/Transition.js:135:30)
          at Grow ((Project folder)/node_modules/@material-ui/core/Grow/Grow.js:51:24)
          at Unstable_TrapFocus ((Project folder)/node_modules/@material-ui/core/Unstable_TrapFocus/Unstable_TrapFocus.js:30:24)
          at div
          at Portal ((Project folder)/node_modules/@material-ui/core/Portal/Portal.js:39:24)
          at Modal ((Project folder)/node_modules/@material-ui/core/Modal/Modal.js:94:36)
          at Popover ((Project folder)/node_modules/@material-ui/core/Popover/Popover.js:118:22)
          at WithStyles ((Project folder)/node_modules/@material-ui/styles/withStyles/withStyles.js:67:31)
          at div
          at StylesProvider ((Project folder)/node_modules/@material-ui/styles/StylesProvider/StylesProvider.js:57:24)
          at qe ((Project folder)/node_modules/src/components/ColorPicker.jsx:53:22)

To Reproduce
Steps to reproduce the behavior:

  1. Add React.StrictMode
  2. Add ColorPicker code as defined in the Additional context
  3. Click on the color picker component
  4. See error

Expected behavior
ColorPicker should be able to work with strict mode

Desktop (please complete the following information):

  • OS: iOS 11.6.1
  • Browser: Chrome
  • Version: 105.0.5195.102

Additional context

Code using color picker:

       <ColorPicker
          hideTextfield
          value={color}
          onChange={({ hex }) => setColor(`#${hex}`)}
        />

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions