What is the difference between findDOMNode and ref?
Why Interviewers Ask This
This question tests conceptual clarity. Interviewers want to hear a precise, confident definition before moving to more complex React.js topics. It also reveals how well you can explain technical ideas to non-experts.
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.
Pro Tip
Demonstrate both theoretical understanding and practical experience. Say what it is, then give an example of how you actually used it in a React.js codebase.
Previous
What is the difference between defaultProps and default parameter values?
Next
What are custom hooks in React?