Solutions and Best Practices for findDOMNode Deprecation Warning in React StrictMode

Problem Background and Warning Analysis

In React application development, when components are wrapped in StrictMode, developers often encounter the findDOMNode deprecation warning. The warning clearly states: 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. The core issue is that the findDOMNode method has been deprecated, and React recommends using refs directly to reference DOM elements.

Code Problem Diagnosis

In the provided Todo component code, there is a critical state management issue. In the handleChange method:

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

This directly sets the title property instead of updating the title within the editTodo object. This incorrect state update approach may cause internal component reference confusion, subsequently triggering findDOMNode-related warnings.

Core Solution

According to best practices, the corrected handleChange method should use functional setState to properly update nested objects:

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

This approach ensures immutable state updates, avoids direct state object modification, and aligns with React's design principles. Additionally, in the Modal's Form.Control, the value property should be bound to this.state.editTodo.title, not an independent title state.

Alternative Solutions Comparison

Beyond fixing state management, other solutions have emerged in the community:

Disabling Animations Solution: For scenarios using react-bootstrap components, warnings can be eliminated by setting animation={false} to disable Modal animations:

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

While this approach removes warnings, it sacrifices user experience and has been fixed in newer versions of react-bootstrap.

Removing StrictMode Solution: Another straightforward method is to remove the React.StrictMode wrapper entirely:

// Before modification
<React.StrictMode>
  <App />
</React.StrictMode>

// After modification
<App />

However, this approach is not recommended because StrictMode provides crucial development-time checks, including identifying unsafe lifecycles, warning about legacy string ref API usage, detecting unexpected side effects, and more.

Root Causes and Best Practices

The fundamental reason for findDOMNode deprecation is that this method breaks React's abstraction layers, and direct DOM node access can lead to performance issues and maintenance difficulties. React officially recommends using ref to directly reference required elements.

This issue is particularly common in third-party libraries like react-transition-group. As mentioned in the reference article, CSSTransition and SwitchTransition components trigger this warning in StrictMode. The solution involves using the nodeRef property:

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

For libraries like Semantic UI React, this is a known issue being addressed through migration to React.forwardRef.

Preventive Measures and Conclusion

To avoid findDOMNode-related warnings, developers should:

1. Always use proper state management techniques, especially for nested objects

2. Prefer React refs over direct DOM manipulation

3. Keep third-party libraries updated to their latest versions

4. Use modern APIs like nodeRef when necessary

By following these best practices, developers can not only eliminate warnings but also write more robust and maintainable React code. Proper state management and reference usage form the foundation of React application performance and security.