Forget about ref forwarding in React

We love react, and why not? It’s a great library for building user interfaces. It’s easy to learn, and it’s easy to get started. I mean i do love the idea of reusability and component driven development, as good it may sound, it does the jon pretty well. But I can’t deny that I’ve got myself enough headaches with the weird inner workings of useState and useEffect. But that’s not what we are here to talk about, we are here to talk about ref forwarding.

What is ref forwarding?

For those who don’t know (so jealous of you urgh..) First we need to understand the useRef hook. useRef is a hook that allows you to create a mutable object that persists for the lifetime of the component. It’s like a global variable that you can use to store data that you want to persist between renders. It’s a great tool for storing data that you don’t want to be part of the state. But it’s not the only thing that useRef can do, it can also be used to store a reference to a DOM element. This is where ref forwarding comes in. Ref forwarding allows you to pass a ref from a parent component to a child component. This is useful when you want to access a DOM element in a child component from a parent component. Let’s look at an example.

export const VeryBasicInputComponent = () => {
    const inputRef = useRef<ElementRef<"input">>(null);

    useEffect(() => {
        inputRef.current?.focus();
    }, []);

    return <input type="text" ref={inputRef} />;
};

Above you see is a small React (with TS) component that renders an input element and focuses it when the component is mounted. This is a very basic example, but it shows how you can use ref forwarding to access a DOM element in a child component from a parent component. useRef can be pretty useful in accessing DOM elements especially the fact that it’s a mutable object that persists for the lifetime of the component. That means it does not cause any rerenders, yes, No side effects at all (No pun intended, useEffect)

Back to ref forwarding

When you create your custom components, you sometimes need to decouple your components into smaller components. And in such situations you may want the parent component to access the DOM element of the child component. But you can’t send your ref to the child component from parent component to child component through props. This is where ref forwarding comes in. Ref forwarding allows you to pass a ref from a parent component to a child component. This is useful when you want to access a DOM element in a child component from a parent component. Let’s look at an example.

// Parent Component
export const ParentComponent = () => {
    const inputRef = useRef<ElementRef<"input">>(null);

    useEffect(() => {
        inputRef.current?.focus();
    }, []);

    return <ChildComponent ref={inputRef} />;
};

// Child Component
export const ChildComponent = forwardRef((props, ref) => {
    return <input type="text" ref={ref} />;
});

As you can see here, we didn’t do any maginc here but just used a proprty from react called forwardRef, and as it suggests, it just exists to make your life easy to pass props from parent to child.

Why you should not use it?

Firstly, I love the idea, but see, as a junior developer, I thought that React.js would not have such caviats around passing props, I mean we’ve been passing states through props all the f## time right? Why such big deal about this piece of code? Well, it’s not a big deal, but it kinda shackles you to use it in a certain way, and that’s not what React is about. React is about freedom, and ref forwarding is not something I would want to use.

What’s the alternative?

Okay so its gonna sound vary stupid and once u hear it you will have one of those gotcha moments, but the alternative is to just name the prop anything else other than ref, call it inputRef or vueRef, or useEffectAsyncExternalStoreRef just anything. And it will work just fine.

Show me then I’ll believe you

Okay, so here’s the code, which follows the forwardRef pattern, and it works just fine.

import { ElementRef, forwardRef, useEffect, useRef } from "react";
import "./styles.css";

export default function App() {
    return (
        <div className="App">
            <h1>Hello CodeSandbox (My readers)</h1>
            <h2>Example with forwardRef!</h2>
            <ParentComponentOfBasicChild />
        </div>
    );
}

const ParentComponentOfBasicChild = () => {
const ref = useRef<HTMLInputElement>(null);

useEffect(() => {
ref.current?.focus();
}, []);

return (

<div>
    <h2>Parent Component</h2>
    <ChildComponentOfBigParent ref={ref} />
</div>
); };

const ChildComponentOfBigParent = forwardRef<HTMLInputElement>(({}, ref) => {
return (

<input
    ref={ref}
    placeholder="Hi im child"
    style={{
        fontSize: "2rem"
    }}
/>
); });

Now here’s the code that does not follow the forwardRef pattern, and it works just fine.

import { ElementRef, forwardRef, useEffect, useRef } from "react";
import "./styles.css";

export default function App() {
    return (
        <div className="App">
            <h1>Hello CodeSandbox (My readers)</h1>
            <h2>Example with forwardRef!</h2>
            <ParentComponentOfBasicChild />
        </div>
    );
}

const ParentComponentOfBasicChild = () => {
const ref = useRef<HTMLInputElement>(null);

useEffect(() => {
ref.current?.focus();
}, []);

return (

<div>
    <h2>Parent Component</h2>
    <ChildComponentOfBigParent justSameRefWithDiffPropName={ref} />
</div>
); };

const ChildComponentOfBigParent = ({
justSameRefWithDiffPropName,
}: {
justSameRefWithDiffPropName: React.RefObject<HTMLInputElement>;
}) => {
return (

<input
    ref={justSameRefWithDiffPropName}
    placeholder="Hi im child"
    style={{
        fontSize: "2rem"
    }}
/>
); };

Do you believe me now? I hope you do, and I hope you don’t use ref forwarding anymore. It’s not a bad thing, but it’s not a good practice either. It’s just a thing that you can do, but you don’t have to do. I hope you enjoyed this article, and I hope you learned something new. If you have any questions or comments, please text me on any of my socials or you could just mail me you know. I will try to answer them as soon as possible. Thank you for reading this article, and I hope to see you in the next one. Bye!

Happy Holidays and Happy New Year 🎆