Understanding forwardRef in React: A Beginner's Guide

What is forwardRef ?

forwardRef in react is a higher order component that allow us to pass a reference (ref) from parent component to child component’s DOM element.

Let's assume you have a parent component named Parent.jsx and a child component named Child.jsx. Inside the parent component, there is a button, and inside the child component, there is a div. You can change the background color of the div inside the child component by clicking the button in the parent component using forwardRef. Additionally, you can perform other DOM manipulation operations as well.

Why use forwardRef ?

Example :

//Parent.jsx

import React, { useRef } from 'react'
import Child from './Child'

function Parent() {

    const childRef = useRef()

    const handleClick = () => {
        childRef.current.style.backgroundColor = "red"
        childRef.current.style.color = "black"
    }

    return (
        <div>
            <button onClick={handleClick}>Click</button>
            <Child ref={childRef} />
        </div>
    )
}

export default Parent

//Child.jsx

import React, { forwardRef } from 'react'

function Child(props, receivedRef) {
    return (
        <div>
            <div style={{ width: '100px', height: '100px', marginTop: '30px' }} ref={receivedRef}>
                div
            </div>
        </div>
    )
}

export default forwardRef(Child)