What is Forward Ref
ForwardRef()
is a utility function in react that let you expose a child components DOM to a parent component with a ref
Usually the parent component passes the props and data to the child component.
But in some instances like when working with input or where components need to respond with user interactions.
The parent components needs direct access to the child components DOM, to achieve this you can use forward refs
I will explain forward ref in more details along with examples below
const CoolComponent = forwardRef(render);
Let us take an example of a form component
Dead Simple Chat allows you to add chat in your React Applications using powerful JavaScript Chat API and SDK. With Dead Simple Chat you can add chat to your application in minutes.
Create a new project and Exposing a DOM node to the parent component
create a new react js project in your computer and follow along
In your app.js file write the below code
here we are importing useRef
and creating a default functional component form
in the form create a const ref and initialize the useref
with null
Now create a new file named CoolInput.js
In CoolInput.js
write the below code there
here we are importing the forwardref
from react then we are wrapping the CoolInput
function in the forwardref
the ref
is attached to the input elements ref attribute
Coming back to our app.js
file add some additional code to it and it should look like this
Here we are adding a form and then we are passing the ref to the input.
Additionally we have created a button and attached its onClick
to a handleClick
function that focuses the on the text input when it is clicked.
Dead Simple Chat allows you to add chat in your React Applications using powerful JavaScript Chat API and SDK. With Dead Simple Chat you can add chat to your application in minutes.
Testing the application
Here is what the application looks like
when you click on the edit button the input area comes into focus
The form component passes a ref to the CoolInput
. CoolInput
component then forwards that ref to the browsers input tag
As a result the form component can now control the browsers input tag and call input functions on it like focus
Forwarding refs through multiple components
You can forward the refs
through multiple components as well. Let us take our example from above and refactor it to pass the refs
through multiple components
Let us create a file call middle.js
and there create a component called middle component
In the middle component file paste the below code
Here we are importing react and importing CoolInput
then we are wrapping our function middle inside of forwardref
Inside of our function middle we have CoolInput
and we are passing our ref there to the CoolInput
Component which in turns passes it to the browsers input
Let us open our App.js
file and edit it and write the below code there
In the app.js
we are referencing the Middle component and not the CoolInput
component and thus we are passing the ref
from the Form Component to the Middle component to the CoolInput
Component and from the CoolInput
Component to the browsers input element
this is how you can pass the refs
through multiple components
Exposing an imperative handle instead of a DOM node
Sometimes you do not want to explore the whole DOM node / element to a component you just want to expose some function or api to the component
In our example above we just need the focus function of the browsers element in our parent component.
We do not need other functions the input element has like input.text
etc
We can expose only the needed functions of the DOM element using an imperative handle
Let us learn more about imperative handle using an example
Let us refactor our above example to include just expose focus nad scrollInView functions of the input elements instead of the complete element
write the below code in the input.js file
We are importing forwardRef
, useRef and useImperitiveHandle
from react
we are initializing the useRef
with null and assigning it to a inputRef
const
then we are wrapping the CoolInput
in the forwardRef
function then we are calling the useImperitiveHandle
function with ref as the prop and returning the focus
and scrollIntoView
functions
we also return the input ref with the input element
useImperitiveHandle
is used to customize what value is passed using the ref to the parent component
The empty array is also passed as the third argument so that the custom api is only created once in a components lifecycle
Dead Simple Chat allows you to add chat in your React Applications using powerful JavaScript Chat API and SDK. With Dead Simple Chat you can add chat to your application in minutes.
Common Pitfalls
a. Over-using refs
You should only use refs for situations where you cannot achieve the desired results using props
If you can use props instead of a ref, you should use the props
using refs increases app complexities
b. slowdown in performance
using refs causes increased re rendering of the components and slows down the application and hence they should only be used when necessary
c. Incompatibility with older versions of react
the refs are incompatible with older versions of react and hence cannot be used in older applications
d. maintenance of code and readability of code
refs cause readability and maintenance problems because they strech to multple files and you need to follow the tread and trace where this is leading
e. Should not be used in higher order components
Higher order components should not use refs because it increase complexity and may cause hard to debug errors
refs should only be used in lower order components such as an input tag or an scroll view and should be designed to achieve a specific objective
Dead Simple Chat allows you to add chat in your React Applications using powerful JavaScript Chat API and SDK. With Dead Simple Chat you can add chat to your application in minutes.
Forward Refs using Examples
Here are a few more examples of uising refs
WriteText.js
file
import React from 'react';
const WriteText = React.forwardRef((props, ref) => {
return <input ref={ref} type="text" {...props} />;
});
export default WriteText;
App.js
Here the WriteText
components forwards the input element directly to the parent
Dead Simple Chat allows you to add chat in your React Applications using powerful JavaScript Chat API and SDK. With Dead Simple Chat you can add chat to your application in minutes.
Example 2 : forwarding refs to an instance of a child component
Here we are going to expose a method of the child component to the parent component
The parent component can then call the function inside of the child component
This is the calculator.js
the child component file.
next we look at the App.js
file
In the app.js
we can cal the Calculator ref function Add()
to add number to the count.
Thus in this way we can access the child components method from the parent component
ForwardRef Reference
forwardRef(render): You can call forwardRef(render)
to let your component receive a ref and forward it to a child component
Parameters
render
the render funtion for your component. The react calls this render function with props and refs that the component received from its parent
The JSX will be return from your component. A component recieved from forwardRef
can also recieve a ref prop
Return
forwardRef
Returns a component that you can render in JSX
Caveats
In strict mode the react will call the render function twice. But if your render function is pure as it should be this should not affect the output of your component.
Conclusion
In this article we have leant what are react refs, how to use them
I hope you liked the article
Thanks for reading