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

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.


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 not resolving correctly the problem, it only hides the problem so that the warning does not appear no more.. Why not if we don't care about deprecations !!

Yes, the problem is comming 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.


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.