What is the difference between findDOMNode and ref?
Answer
findDOMNode(componentInstance) is a legacy React API that returns the underlying DOM node of a class component instance. It is deprecated because it creates a coupling between a component and its DOM output that should not exist — it breaks encapsulation and is incompatible with React's concurrent rendering. Refs are the correct, modern way to access DOM nodes. With function components: const ref = useRef(); <input ref={ref} /> — ref.current is the input DOM node. With class components: this.myRef = React.createRef(); <input ref={this.myRef} />. Forwarding refs: when a parent needs a ref to a child component's DOM node, use React.forwardRef: const Input = React.forwardRef((props, ref) => <input ref={ref} {...props} />);. Refs should be used sparingly — only for imperative operations that cannot be done declaratively (focus management, scroll control, animations, integration with non-React libraries). Most UI can and should be built declaratively.
Previous
What is the difference between defaultProps and default parameter values?
Next
What are custom hooks in React?