Keywords: React | refs | DOM manipulation
Abstract: This article explores the evolution of refs APIs in React, from traditional string refs to callback refs, and the introduction of createRef in React 16.3 and useRef in Hooks. By analyzing code examples from Q&A data, it explains how to correctly retrieve input values and compares the pros and cons of different methods. The article emphasizes the importance of avoiding deprecated string refs and provides best practices for modern React development, including implementations for both class and function components.
Introduction
In React development, refs are a crucial mechanism for accessing DOM nodes or React element instances. However, as React versions have evolved, the refs API has undergone significant changes. Based on Q&A data, this article systematically reviews the evolution of refs and offers best practices for modern React.
Legacy Issues with String Refs
In early React versions, developers commonly used string refs to reference elements, as shown in the Q&A with ref="googleInput". This approach accessed elements via this.refs.googleInput, but it had several issues: string refs could incur performance overhead during component updates and were not conducive to static type checking. React has marked them as a legacy API and plans to remove them in future releases. Therefore, modern development should avoid this pattern.
Callback Refs as a Transitional Solution
As an alternative to string refs, callback refs were introduced. The basic syntax is ref={(element) => { this.googleInput = element; }}. This method assigns the element directly to a component instance property, such as this.googleInput. In the Q&A example, input values are retrieved via this.googleInput._getText(). Callback refs offer more flexibility but can lead to verbose code and require attention to memory management.
The createRef API in React 16.3
React 16.3 introduced the React.createRef() API, simplifying ref creation and management. In class components, refs are created in the constructor: this.googleInput = React.createRef();. They are then attached to elements in the render method: <input ref={this.googleInput} />. Values are accessed via this.googleInput.current.value. This approach aligns better with React's declarative philosophy and supports improved type inference.
useRef in Hooks
For function components, React Hooks provide the useRef Hook. It is used as: const exampleInput = useRef();, then applied to elements with ref={exampleInput}. Values are accessed via exampleInput.current.value. useRef is not only for DOM references but can also store mutable values to avoid re-renders. The Q&A examples demonstrate how to handle refs in form submissions.
Alternative Approach: Controlled Components
Beyond refs, React recommends using controlled components for form input handling. This involves managing input values with state, such as this.state.googleInput, and updating via onChange events. This method gives React full control over component state, facilitating validation and testing. Answer 5 in the Q&A provides a state-based example, though note that code complexity may increase.
Practical Recommendations and Conclusion
In modern React development, prioritize using createRef or useRef and avoid string refs. For simple forms, controlled components may be a better choice; for direct DOM manipulation, refs are more suitable. Always refer to official documentation for the latest best practices.