There are times when we want to exert control over a specific HTML element in a React component from its parent. This is where the **`forwardRef`** function comes in handy, granting us the ability to directly pass a ref to a child component. It's worth mentioning that **`forwardRef`** is a helper tool for passing refs to components. Therefore, to use it properly in our app, we should follow the rules and patterns applicable to refs. In this article, we'll primarily cover refs in React before proceeding to **`forwardRef`**. Hope you enjoy the article. ## Prerequisite * Node and npm installed on your machine * Fundamental knowledge of ReactJS * Typescript ( good to know ) Although I will use TypeScript in the project, it is not essential to learn it for this article. I'll also be using Tailwind CSS for styling. While it's not mandatory to learn it beforehand, I highly suggest you do so. ## Table of content * [TL;DR](#tldr-section) * [What is ref?](#what-is-ref-section) * [useRef hook](#use-ref-section) * [Using ref to store HTML elements reference](#ref-store-element-section) * [How to change focus state of an input with ref?](#input-get-focused-section) * [Ref rethink: Avoiding overuse refs for better performance](#overuse-section) * [forwardRef](#forward-ref-section) * [Creating a custom input element](#create-custom-input-section) * [Use forwardRef to accept ref as a prop in our CustomInput](#use-forward-ref-section) * [Pass ref to our CustomInput component](#passing-ref-section) * [Summary](#summary-section)

## TL;DR To pass a ref to a child component, we can utilize the forwardRef utility function by passing the child component to it, as demonstrated below: ```typescript export const ChildComponent = forwardRef((props, ref) => { return (

); }); ```

## What is ref? As its name suggests, a ref is indeed a reference. The React documentation explains it best on this [this page](https://react.dev/learn/referencing-values-with-refs), as shown below: > When you want a component to “remember” some information, but you don’t want that information to trigger new renders, you can use a ref. In fact, refs help us store, update, and retrieve specific data without using state and triggering re-renders. One of the most useful uses of refs is storing references to HTML elements, similar to using IDs in vanilla JavaScript. ### useRef hook To utilize refs in our components, we employ a React hook called useRef. By invoking it at the top level of our component and assigning its value to a variable, we effectively create a space to store the desired data. Although we can allocate an initial value to this space. ```typescript import { useRef } from "react"; function App() { // Create a ref, name it buttonData, define its type as string or null, set its initial value to null const buttonData = useRef(null); // Access ref value with current property of the ref const printRef = () => { console.log(buttonData.current); }; // Access ref value with current property of the ref and set it to Sample data const assignValueToRef = () => { buttonData.current = "Sample data"; }; // Access ref value with current property of the ref and set it to null const resetRefValue = () => { buttonData.current = null; }; return (

); } export default App; ``` You can see the result in the screenshot bellow: 1. I clicked on the Print button 2. I clicked on the Assign button 3. I clicked on the Print button 4. I clicked on the Reset button 5. I clicked on the Print button again ![useRef hook in action](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dincd2csapx2ixjxoejj.png) ### Using ref to store HTML elements reference First, why do we need to store references to elements? With the reference at our fingertips, we can perform various actions on the desired element, such as focusing on an input or scrolling it to the view. Also third party libraries sometimes want a reference to an element to use them, take React DnD as an example. This library helps you to have drag and drop functionality in your app. This library needs to pass a ref as a prop to the component you want to assign as drop zone. According to This ref the library will take action when you drop something onto a div for example. ### How to change focus state of an input with ref? To accomplish this, we could simply create a ref and then pass it to the element we want to focus on (an input, in our case) as a prop. ```typescript import { useRef } from "react"; function App() { // Create a ref to store element reference and define its type as HTMLInputElement const inputRef = useRef(null); // Focus on the input element const focusOnInput = () => { inputRef?.current?.focus(); }; return (

{/* Passing ref as prop to input element, notice that we pass the ref itself and not the current */}

); } export default App; ``` ![Input getting focused by clicking a button using React ref](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wiwdrep1pchn82ngtsv2.gif) ### Ref rethink: Avoiding overuse refs for better performance By reading the article up to this point, you might be wondering, "Why don't I use refs instead of state? What restricts me here?" Using refs instead of state does offer advantages in certain situations, particularly when direct manipulation of DOM elements is necessary. However, there are scenarios in which you shouldn't use refs. With refs, we store data between renders and across different parts of a component's lifecycle. It's beneficial to have this capability to address certain issues. However, it's essential to respect React's reactivity and the underlying structures to achieve this behavior. When using refs and updating the value of a ref, we mutate stored data with relatively few limitations. This can potentially lead to inconsistencies in our application data. React insists, do not write or read ref.current during rendering: > **Do not write or read `ref.current` during rendering.** > > > React expects that the body of your component behaves like a pure function: > > - If the inputs (props, state, and context) are the same, it should return exactly the same JSX. > - Calling it in a different order or with different arguments should not affect the results of other calls. > > Reading or writing a ref **during rendering** breaks these expectations. > Accessing a ref during the render process violates React's purity rule, as it introduces side effects into what should be a deterministic rendering process. Let's break down how this violation occurs: 1. **Impure Functionality**: When React renders a component, it expects that the component's render function behaves like a pure function. A pure function always produces the same output for the same input and has no side effects. If a component accesses a ref during rendering, it introduces side effects because the value of the ref can change independently of the component's inputs (props, state, context). 2. **Non-deterministic Behavior**: Reading or writing to a ref during render introduces non-deterministic behavior into the component. This means that the component's output can vary depending on the current state of the ref, even if the props, state, and context remain the same. Non-deterministic behavior makes it difficult to reason about how a component will behave and can lead to bugs and inconsistencies in your application. 3. **Unpredictable Rendering**: React relies on the purity of component functions to optimize rendering performance. If a component's render function is impure due to reading or writing to a ref, React cannot guarantee that the component's output will remain consistent between renders. This can lead to unnecessary re-renders and performance issues in your application. To elaborate further on the third point, React utilizes memoization techniques to optimize rendering by caching the result of a component's render function and reusing it if the component's inputs haven't changed. However, if a component accesses a ref during rendering, React cannot accurately determine if the component's output has changed. This uncertainty results in unnecessary re-renders, even when the component's inputs remain the same. ##forwardRef## Consider a scenario where you've written a custom input component with a label. You import it like other components and modules in your file and place it somewhere in the return value of a functional component. Now, you want to focus on the input element inside that component. Based on what we've learned, we should pass a ref to the input element and call the **`focus()`** method of the current property of the ref when clicking the button. However, the input element is inside that child custom component we imported, and we don’t have direct access to it. Our solution lies in the hands of **`forwardRef`**. As its name suggests, **`forwardRef`** forwards the ref to a component from its direct parent. Essentially, it adds the possibility for a child component to access the ref. Let's see **`forwardRef`** in action. ### Creating a custom input element Let's start by creating a custom input component that consists of a label and a simple HTML input element. We'll then place it below a button in our App component. ```typescript // CustomInput.tsx import { InputHTMLAttributes } from "react"; // Define type of receiving props, our props should be input element attributes and a custom label prop. type CustomInputProps = InputHTMLAttributes & { label?: string; }; export default function CustomInput({ label, ...rest }: CustomInputProps) { const { id } = rest; return (

{label}

); } ``` Let's import the CustomInput component into the App component and pass any necessary props: ```typescript // App.tsx import CustomInput from "./components/CustomInput"; function App() { return (

); } export default App; ``` ### Use forwardRef to accept ref as a prop in our CustomInput If you were to pass a ref to our CustomInput component in its current state, you would immediately encounter the following error in your console: ![Error of giving ref to a functional component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c1c6twej3xet9s5mivfp.png) To enable the component to receive the ref object, we need to modify our CustomInput to create this possibility in our component to get the ref object: ```typescript // CustomInput.tsx import { InputHTMLAttributes, forwardRef } from "react"; type CustomInputProps = InputHTMLAttributes & { label?: string; }; // Define ref type the component accepts type Ref = HTMLInputElement; // Give previous input component to the forwardRef utility function as parameter export const CustomInput = forwardRef( ({ label, ...rest }, ref) => { const { id } = rest; return (

{label} {/* Pass ref as prop to the input */}

); } ); // Export return value of the forwardRef function as default export export default CustomInput; ``` React forwardRef function accepts a render function, as you can see we pass it as an arrow function. The render function itself has the following structure: **Parameters:** * props * ref **Returns:** Based on React documentation: > `forwardRef` returns a React component that you can render in JSX. Unlike React components defined as plain functions, the component returned by `forwardRef` is able to take a `ref` prop. **Typescript note:** to define your component type, you should follow this structure: ``` const Component = forwardRef(props,ref)``` **Ref:** type of the ref we want to pass to the component **PropsType:** Type of the props the component accepts ### Pass ref to our CustomInput component Now that our component is capable of accepting a ref, we should pass our desired ref to it: ```typescript // App.tsx import { useRef } from "react"; import CustomInput from "./components/CustomInput"; function App() { // Define the ref with the desired type const inputRef = useRef(null); // Declare a function to focus on the input element const focusOnInput = () => { inputRef.current?.focus(); }; return (

{/* Pass the ref to the component */}

); } export default App; ``` As you can see, I also declared a function to focus on the input element and passed it as an onClick handler to the button. Here is the result: ![Input element get focused by clicking on a button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q0u7njkm714gj47bs4hr.gif) ## Summary In this article, we explored the concept of refs in React, one of its amazing and useful features. Refs are references to data similar to states, but unlike states, we can mutate them. They allow us to store references to HTML elements and access them to perform actions like focusing on or scrolling them into view. Third-party libraries often require access to an element, necessitating the passing of refs to them. Refs act similarly to regular HTML id attribute. To use refs properly and maintain our application's performance, we should adhere to certain patterns, as discussed in the article. When we need to pass a ref to a component, we utilize a React utility function called **`forwardRef`**. The return value of this function is JSX that we can use in our app, allowing us to pass our desired ref as a prop. Thank you for reading, and I hope you found this article helpful.

borzoomv

What is forwardRef in React and how to use it properly?

Join Our Newsletter. No Spam, Only the good stuff.