Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode

Question

I am trying to use a function as a prop inside a component and this component is a child of another component. But the function is not working.? Can I know why. This is the warning i am receiving in the console.

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

This is my code

class Todo extends Component {
  state = {
    show: false,
    editTodo: {
      id: "",
      title: "",
      isCompleted: false
    }
  }
  handleClose = () => {
    this.setState({ show: false })
  }
  handleShow = () => {
    this.setState({ show: true })
  }
  getStyle () {
    return {
      background: '#f4f4f4',
      padding: '10px',
      borderBottom: '1px #ccc dotted',
      textDecoration: this.props.todo.isCompleted ? 'line-through'
        : 'none'
    }
  }
  //this method checks for changes in the edit field
  handleChange = (event) => {
    this.setState({ title: event.target.value })
    console.log(this.state.editTodo.title);
  }

  render () {
    //destructuring
    const { id, title } = this.props.todo;
    return (
      <div style={this.getStyle()}>
        <p>
          <input type='checkbox' style={{ margin: "0px 20px" }} onChange={this.props.markComplete.bind(this, id)} /> {''}
          {title}
          <Button style={{ float: "right", margin: "0px 10px" }} variant="warning" size={"sm"} onClick={this.handleShow}>Edit</Button>{' '}
          <Button style={{ float: "right" }} variant="danger" size={"sm"} onClick={this.props.DelItem.bind(this, id)}>Delete</Button>
        </p>
        <Modal show={this.state.show} onHide={this.handleClose}>
          <Modal.Header closeButton>
            <Modal.Title>Edit your Task!</Modal.Title>
          </Modal.Header>
          <Modal.Body >
            <FormGroup >
              <Form.Control
                type="text"
                value={this.state.editTodo.title}
                onChange={this.handleChange}
              />
            </FormGroup>
          </Modal.Body>
          <Modal.Footer>
            <Button variant="secondary" onClick={this.handleClose}>
              Close
                          </Button>
            <Button variant="primary" onClick={this.handleClose}>
              Save Changes
                          </Button>
          </Modal.Footer>
        </Modal>
      </div>
    )

  }
}

Answer 1

The setState call looks like it's being written to the wrong place. Make sure it's on the editTodo object:

    handleChange = (event) => {
        this.setState(state => ({
          editTodo: {
            ...state.editTodo,
            title: event.target.value,
          },
        }));
    }

Answer 2

If you're using a Modal or Carousel from react-bootstrap a workaround is disabling the animations. Turning them off makes the warning disappear.

For Modals:

<Modal animation={false}>
    <Modal.Header closeButton>
        <Modal.Title>Title</Modal.Title>
    </Modal.Header>
    <Modal.Body>
        Content
    </Modal.Body>
</Modal>

For Carousels:

<Carousel slide={false} fade={false}>
    <Carousel.Item>
      Scene 1
    </Carousel.Item>
    <Carousel.Item>
      Scene 2
    </Carousel.Item>
</Carousel>

I know it'd fit better as a comment once it doesn't answer the OP question, but I don't have a reputation enough to do so and maybe it helps someone.

EDIT: This was fixed on v2 alpha

Answer 3

Based on @kernel-james comment to OP his solution worked for react-transition-group library.

const parentDivRef = React.useRef<HTMLDivElement>(null);

<Transition nodeRef={parentDivRef} >
<div ref={parentDivRef}> {/* content that needs animation */} </div>
</Transition>

Answer 4

The response of @Ross Allen is not related to the basic problem (the warning), it resolved a syntax problem in the code.

The response of @Ali Rehman is more related to the warning, but also it's not resolving correctly the problem, it only hides it so that the warning does not appear no more. Why not, if we don't care about deprecations !!

Yes, the problem is coming from the React.StrictMode:

<React.StrictMode>
 <App />
</React.StrictMode>

StrictMode is a tool for highlighting potential problems in an application. It activates additional checks and warnings for its descendants, such as:

• Identifying components with unsafe lifecycles
• Warning about legacy string ref API usage
• Warning about deprecated findDOMNode usage
• Detecting unexpected side effects
• Detecting legacy context API

As the error backtrace is not fully given in the question, I guess the problem is related to a Warning about deprecated findDOMNode usage, because of referencing to elements in the render methods:

<Modal show={this.state.show} onHide={this.handleClose}>
      <Modal.Header closeButton>
        <Modal.Title>Edit your Task!</Modal.Title>
      </Modal.Header>
      <Modal.Body >
        <FormGroup >
          <Form.Control
            type="text"
            value={this.state.editTodo.title}
            onChange={this.handleChange}
          />
        </FormGroup>
      </Modal.Body>
      <Modal.Footer>
        <Button variant="secondary" onClick={this.handleClose}>
          Close
                      </Button>
        <Button variant="primary" onClick={this.handleClose}>
          Save Changes
                      </Button>
      </Modal.Footer>
    </Modal>

When the component is rendered, so the modal has been also rendered, and we try to change states of the component, the component (and so the modal) will re-render, and in this stage the modal can not have access to the states.

The solution to resolve the warning is by using React refs. Refs helps to access DOM nodes or React elements created in the render method.

Answer 5

In Semantic UI React, this is a known issue, most of their components are still using findDOMNode(). This is being fixed in the Semantic UI React v3 PR #4233 where all these components will be updated to use React.forwardRef().

At first I thought I was doing something wrong and spent quite some time investigating, only to find it was a known issue.

One interesting edge case for PR #4233 which might be helpful here was that all components could be converted to function components except for the <Dropdown> component. For this they wrap the component with a function component using forwardRef and then pass an innerRef prop to the class component (via PR commit diff):

const Dropdown = React.forwardRef((props, ref) => {
  return <DropdownInner {...props} innerRef={ref} />
})

class DropdownInner extends Component {
  searchRef = createRef()
  sizerRef = createRef()
  ref = createRef()
  ...
}

Answer 6

I'm not sure if it's helping when using the material-ui library but in many cases this can help:

const nodeRef = React.useRef(null);
return <div>
  <CSSTransition ... nodeRef={nodeRef}>
    <div ref={nodeRef}> ... </div>
  </CSSTransition>
</div>

Answer 7

This is an issue of MaterialUI library, and there's a temporary solution here before the new MaterialUI v5 is officially released

Answer 8

A similar issue: Below solved the problem:

In the ReactDOM.render() function, change

from

  <React.StrictMode>
    <SnackbarProvider>
          <App/>
    </SnackbarProvider>
  </React.StrictMode>

to

  <SnackbarProvider>
    <React.StrictMode>
          <App/>
    </React.StrictMode>
  </SnackbarProvider>

NOTE: SnackbarProvider & React.StrictMode tags are reversed.

Answer 9

I have seen this error before ,when i used react-bootstrap and react-router-dom along side each other . i replaced

<Link to="/foo">sth</Link>

with

 <LinkContainer to="/foo/bar">
  <Button>Foo</Button>
</LinkContainer>

and there is no need to use Link for NavLink

Answer 10

Try using Ref

For example, with the React Draggable library:

const MyComponent = props => { const nodeRef = React.useRef(null); return ( Example Target ); }

Answer 11

To fix this issue just remove React.StrictMode from index.js where you access the dom root id, that will fix it.

Instead of this:

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Use this line:

ReactDOM.render(<App />,document.getElementById('root'));

Answer 12

I think this issue is not an error, but is a deprecation warning. the library component still works, but uses a feature that will no longer be available in future releases. so the library must be updated to use another function to replace the old one.

Answer 13

The simplest solution to this type of scenario is to wrap your component with a DOM element that you can actually attach a ref to it. For example:

import React, { createRef, Component } from "react";
import ChildComponent from "./child-component";

class MyComponent extends Component {

 componentDidMount() {
  const node = this.wrapper.current;
  /* Uses DOM node  */ 
}

wrapper = createRef();

render () {
return (
  <div ref={this.wrapper}>
    <ChildComponent>{this.props.children}</ChildComponent>
  </div>
 );
 }
}

export default MyComponent;`

Answer 14

In index.js change <React.StrictMode><App /><React.StrictMode> to <App /> and you will not see this warning. Please note that strict mode helps you with

• Identifying components with unsafe lifecycles
• Warning about legacy string ref API usage
• Warning about deprecated findDOMNode usage
• Detecting unexpected side effects
• Detecting legacy context API

Please refer to https://reactjs.org/docs/strict-mode.html before removing it.