React Refs advanced usage: normalization, cloning and linking

React Ref is considered to be an escape hatch in official docs. In this article, I will review advanced ways of using React Mutable Ref Object such as normalization, linking and cloning.

Normalization and cloning

Normalization means making something more regular. In the React case, it means having consistent and accessible ref in the Component wrapped with forwardRef. How to do something with a ref parameter inside the component?

const Component = forwardRef<HTMLDivElement, unknown>((props, ref) => {
    // 🚫 will not work!
    useEffect(() => {
        ref.current.focus()
    }, []);
    return <div ref={ref}>Hello, world!</div>;
});

Component.displayName = 'ComponentName';

This snippet is not possible for two reasons:

• ref parameter may be undefined, when not provided by the developer.

• We don't know what type of reference we are getting, it may be not just a Mutable Ref Object, but also a function (callback ref). Which doesn't have current property.

Here is a React hook which fixes the issue. It takes all possible user provided refs and always emits a Mutable Ref Object, thus providing us required consistency.

import type {ForwardedRef, MutableRefObject} from 'react';
import {useImperativeHandle, useRef} from 'react';

// generic type will be resolved by the compiler
const useNormalizeRef = <TElement>(
    externalRef: ForwardedRef<TElement>
): MutableRefObject<TElement | null> => {
    // create a Mutable Ref Object for internal use
    const internalRef = useRef<TElement | null>(null);

    // this hook connects internal and external references
    useImperativeHandle<TElement | null, TElement | null>(
        externalRef,
        () => internalRef.current,
        []
    );

    return internalRef;
};

Here is how to use this hook

const Component = forwardRef<HTMLDivElement, unknown>((props, ref) => {
    // create an internal clone of the prop with a consistent type
    const internalRef = useNormalizeRef(ref);

    useEffect(() => {
        // access Mutable Ref Object normally
        internalRef.current!.focus();
    }, [internalRef]);

    return <div ref={ref}>Hello, world!</div>;
});

Component.displayName = 'Component';

Linking

Sometimes we need to link two existing references instead of creating a new one. Here is how to implement it.

import type {ForwardedRef, MutableRefObject} from 'react';
import {useImperativeHandle} from 'react';

export const useLinkRefs = <TElement>(
    externalRef: ForwardedRef<TElement>,
    internalRef: MutableRefObject<TElement | null>
) => {
    useImperativeHandle<TElement | null, TElement | null>(externalRef, () => internalRef.current, [
        internalRef,
    ]);
};

Happy coding!