Dev Practises - forward ref

[origami-z]

Always forward ref to root element of a component, which expose DOM element to parent.

export const Component = forwardRef(
    function Component(props, ref) {
        return (
            <div {...props} ref={ref} >...</div>
        )
    }
)

For components that requires exposing additional DOM element for ease of use, e.g. Input's nested input, add additional ref prop with name matching underlying DOM element. E.g. inputRef in Input, textAreaRef in MultilineInput.

export const Component = forwardRef(
    function Component({elementRef, ...restProps}, ref) {
        return (
            <div {...restProps} ref={ref} ><element ref={elementRef} />...</div>
        )
    }
)

If the component needs additional ref to control element internally, create a ref and use useForkRef to connect it with ref passed in

import { useForkRef } from "../utils";
export const Component = forwardRef(
    function Component(props, ref) {
        const internalRef = useRef();
        // Use `internalRef` where needed
        return (
            <div {...props} ref={useForkRef(internalRef, ref)} >...</div>
        )
    }
)

This also means we are not encouraging imperative handlers. If there is a requirement, consider using additional props instead.

[mark-tate]

Closing due to in-activity,

Note: React 19 will allow us to pass refs as props, we will publish a blog on our React 19 plans, shortly