What are Refs in React Native?

by

React refs are useful features that allow you to access DOM elements or component’s instance directly within React. It comes handy in situations where you want to change the child of a component without using props or re-rendering the whole component.

In React Native, refs provide a way to access a component instance or DOM element created by a React component. They are primarily used to interact with the underlying DOM or native views directly. Refs are commonly used in scenarios such as managing focus, triggering imperative animations, integrating with third-party DOM libraries, or accessing child components.

In React Native, you can create refs using the React.createRef() method or by using callback refs. Here’s a brief explanation of both:

  1. React.createRef(): This method allows you to create a ref and attach it to a React element. You typically create a ref in the constructor of a class component and then attach it to a DOM element or a React component instance by passing it to the ref attribute.
    javascript
    class MyComponent extends React.Component {
    constructor(props) {
    super(props);
    this.myRef = React.createRef();
    }

    render() {
    return <div ref={this.myRef} />;
    }
    }

  2. Callback Refs: Alternatively, you can use callback refs, where you define a function that receives the underlying DOM element or component instance as an argument and save it to an instance variable.
    javascript
    class MyComponent extends React.Component {
    constructor(props) {
    super(props);
    this.myRef = null;
    this.setRef = element => {
    this.myRef = element;
    };
    }

    render() {
    return <div ref={this.setRef} />;
    }
    }

In both cases, once you have a reference to the component or DOM element, you can manipulate it programmatically. However, it’s important to use refs sparingly and prefer React’s declarative programming style whenever possible. Misusing refs can lead to code that is harder to understand and maintain.