We advise against it because string refs have some issues, are considered legacy, and are likely to be removed in one of the future releases. If you worked with React before, you might be familiar with an older API where the ref attribute is a string, like 'textInput', and the DOM node is accessed as. As a result, this.inputElement in Parent will be set to the DOM node corresponding to the element in the CustomTextInput. In the example above, Parent passes its ref callback as an inputRef prop to the CustomTextInput, and the CustomTextInput passes the same function as a special ref attribute to the. Refs are commonly assigned to an instance property when a component is constructed so they can be referenced throughout the component.Ĭlass CustomTextInput extends React. Refs are created using React.createRef() and attached to React elements via the ref attribute. If you are using an earlier release of React, we recommend using callback refs instead. The examples below have been updated to use the React.createRef() API introduced in React 16.3. See the Lifting State Up guide for examples of this.

Often, it becomes clear that the proper place to “own” that state is at a higher level in the hierarchy.

If this is the case, take a moment and think more critically about where state should be owned in the component hierarchy. Your first inclination may be to use refs to “make things happen” in your app. Integrating with third-party DOM libraries.Īvoid using refs for anything that can be done declaratively.įor example, instead of exposing open() and close() methods on a Dialog component, pass an isOpen prop to it.Managing focus, text selection, or media playback.For both of these cases, React provides an escape hatch. The child to be modified could be an instance of a React component, or it could be a DOM element. However, there are a few cases where you need to imperatively modify a child outside of the typical dataflow. To modify a child, you re-render it with new props. In the typical React dataflow, props are the only way that parent components interact with their children. Refs provide a way to access DOM nodes or React elements created in the render method.

How to use react router dom