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

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

Issue: In your implementation, it is coming up from somewhere like below :

mount = createMount({strict: true});

Fix: It should be as below:

mount = createMount(); // by default, it is false

Check on it, that the mount is done properly.

Answer 3

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 4

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.

Answer 5

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.

Answer 6

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.