CreateRef

createRef is a function in React that returns a ref object used to access DOM nodes or component instances directly. The object has a mutable current property, which is null initially and is updated by React when the ref is attached to a element or component.

In class components, you typically create a ref in the constructor, then attach it to a React element with the ref attribute. For example, this.myRef = React.createRef(); and <input ref={this.myRef} />. After the component mounts, this.myRef.current points to the corresponding DOM node (for native elements) or to the class instance (for class components). You can perform imperative actions such as focusing an input with this.myRef.current.focus().

In functional components, the recommended approach for persistent values is useRef, not createRef, because createRef would create a new ref on every render if used inside the function body. However, createRef can still be used in specific class-like scenarios or when a ref needs to be created once in certain patterns; in general, useRef is preferred for functional components. When a ref is attached to a functional component that does not forward refs, current will be null.

Compared with callback refs, createRef provides a stable object with a current property that updates when the element is attached or detached. Callback refs offer more control and can re-run logic on changes, but require more manual handling.

Limitations include that refs do not participate in the component’s declarative data flow, and accessing a ref should be limited to imperative tasks such as focusing, measuring, or integrating with third-party libraries. For components that need to expose methods to parent, forwardRef and related patterns are used in conjunction with refs.