Forwarding Refs In React

This article was originally published on my blog.

 

In this article, we will be discussing another concept about Refs called Forwarding Refs. But before understanding Forwarding Refs we have to first understand what ref is, why we have to use it and how to create it. In my previous article, I have already discussed what the heck  Refs are and what are the different ways to create refs in React. If you don't know about refs then you can read my article here. 

• Different Ways to Create Refs in React

While writing React apps,  in some situations we have to pass a ref from the parent component to its child component to get access to DOM element of the child component. We know that in React data flows from top to bottom with the help of props. So if we have to change the behavior of child component then we can pass props from parent to its child.

 

According to the React documentation,

 

Ref forwarding is a technique for automatically passing a ref through a component to one of its children. This is typically not necessary for most components in the application. However, it can be useful for some kinds of components, especially in reusable component libraries. 

 

TL;DR

• Source code

Forwarding Ref with React.forwardRef()

 

As you pass data using props to the child components, we can pass ref in the same way. So first we will create two components as below:

import React, { Component } from "react";
import Input from "./Input";

export default function CreateRefApiExample() {
  return (
    <div style={{ border: "1px solid red", width: "400px" }}>
      <b>Parent Component</b>
      <br />
      <br />
      <Input />
      <button style={{ margin: "8px" }}>Click!</button>
    </div>
  );
}

CreateRefApiExample is our parent component.

import React from "react";

export default function Input() {
  return (
    <div style={{ border: "1px solid green", width:"300px", margin:"16px" }}>
      Child Component
      <br />
      Name: <input type="text" style={{ margin: "32px 0 32px 0" }} />
    </div>
  );
}

Input is the child component. So after running code, it looks like as below,

 

Input component is the child component to the CreateRefApiExample. So now what we want is when we click on the button in CreateRefApiExample; i.e parent component, then input field in Input component should be focused. So to achieve this we have to create a ref in parent component and pass it to the child component and when a user clicks on the button then we have to makethe input focused.

 

Let's first create a ref in parent component using React.createRef() api. 

let inputRef = React.createRef();

and pass it down to the child component.

import React, { Component } from "react";
import Input from "./Input";

export default function CreateRefApiExample() {
  let inputRef = React.createRef();

  return (
    <div style={{ border: "1px solid red", width: "400px" }}>
      <b>Parent Component</b>
      <br />
      <br />
      <Input ref={inputRef} />
      <button style={{ margin: "8px" }}>Click!</button>
    </div>
  );
}

The next step is how to receive this ref in our Input component and assign it to the input tag. This can be done using React.forwardRef() API. First, wrap our Input component with React.forwardRef function which will now give us access to the ref that we have passed to this component.

import React from "react";

export default React.forwardRef(function Input(props, ref) {
  return (
    <div style={{ border: "1px solid green", width:"300px", }}>
      Child Component
      <br />
      Name: <input
              type="text"
              ref={ref}
              style={{ margin: "32px 0 32px 0" }} />
    </div>
  );
})

Observe that ref is not part of props; it will be passed as a separate parameter along with props due to React.forwardRef() API.

 

At this point, we have created a new ref; i.e inputRef, and forwarded it to the Input component. Now the next step is we have to access the ref in parent component and trigger its focus event when a user clicks on the button.

 

Create a onClick handler function as below

const handleClick = () => {
   inputRef.current.focus();
 };

and bind it to the button onClick event.

import React, { Component } from "react";
import Input from "./Input";

export default function CreateRefApiExample() {
  let inputRef = React.createRef();

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div style={{ border: "1px solid red", width: "400px" }}>
      <b>Parent Component</b>
      <br />
      <br />
      <Input ref={inputRef} />
      <button style={{ margin: "8px" }} onClick={handleClick}>
        Click!
      </button>
    </div>
  );
}

Run the application and see the output,

 

You can do this same thing using useRef() hook as well. If you want to try with hooks then just create ref using useRef() instead of React.createRef() API and other code remains the same.  

import React, { useRef } from "react";
import Input from "./Input";

export default function CreateRefApiExample() {
  //let inputRef = React.createRef();

  let inputRef = useRef(null);

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div style={{ border: "1px solid red", width: "400px" }}>
      <b>Parent Component</b>
      <br />
      <br />
      <Input ref={inputRef} />
      <button style={{ margin: "8px" }} onClick={handleClick}>
        Click!
      </button>
    </div>
  );
}

Conclusion

 

In this article, I have explained about Forwarding Refs in React JS and also created simple examples using ref.

 

I really hope that you enjoyed this article, and please do not hesitate to send me your thoughts or comments about what could I have done better.

 

You can follow me on twitter @sumitkharche01

 

Happy Coding!