React ref union types cause false errors

[just-boris]

Search Terms

react ref union type

Suggestion

Currently React refs do not work when you applying it to different elements depending on some condition. I'd like to not have Typescript errors for this case

Use Cases

Sometimes we need to conditionally render different elements and attach refs to them:

function Button({ href }: { href: string }) {
    const ref = React.useRef<HTMLAnchorElement | HTMLButtonElement>()
    if (href) {
        return <a ref={ref}></a>
//               Type 'RefObject<HTMLAnchorElement | HTMLButtonElement>' is not assignable
//               to type 'RefObject<HTMLAnchorElement>'.
    }
    return <button ref={ref}></button>

}

This code is valid Javascript, but reports an error in Typescript.

Playground example

I think, this is also related to the general covariance issue: #10717 (comment)
But I am wondering if there could be a more simple solution to this particular case

[nmain100]

#21759 could solve this, as when passing a ref object to React.createElement, only the write side is consumed.

[typescript-bot]

This issue has been marked as a 'Duplicate' and has seen no recent activity. It has been automatically closed for house-keeping purposes.

[just-boris]

Solved my issue via React.useImperativeHandle hook:

function Button({ href }: { href: string }, ref: React.Ref<{focus(): void}>) {
    const ref = React.useRef<any>()
    React.useImperativeHandle(ref, () => ({focus: () => ref.current && ref.current.focus}))
    if (href) {
        return <a ref={ref}></a>
    }
    return <button ref={ref}></button>

}

This way I am able to give component consumers type-safe API for refs