Typescript react: Type inference is not working for callback refs

Question

My react component needs a callback ref only. I'm using useState for a callback ref.

const [refElement, setReference] = useState(null);

Inside render:

<div
// this ref is throwing ts error
   ref={setArrowElement}
   style={styles.arrow}
   id="arrow"
/>

Typescript error : On tsc

- error TS2322: Type 'Dispatch<SetStateAction<null>>' is not assignable to type 'string | ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined'.
  Type 'Dispatch<SetStateAction<null>>' is not assignable to type '(instance: HTMLDivElement | null) => void'.
    Types of parameters 'value' and 'instance' are incompatible.
      Type 'HTMLDivElement | null' is not assignable to type 'SetStateAction<null>'.
        Type 'HTMLDivElement' is not assignable to type 'SetStateAction<null>'.
          Type 'HTMLDivElement' provides no match for the signature '(prevState: null): null'.

216                         ref={setReference}
                            ~~~

  ../../node_modules/@types/react/index.d.ts:145:9
    145         ref?: LegacyRef<T>;
                ~~~
    The expected type comes from property 'ref' which is declared here on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'


Found 1 error.

ref should be an HTML element, and you're assigning it a setState function — Roberto Zvjerković
– Roberto Zvjerković, Commented Aug 7, 2020 at 9:34
Cause I need a call back as reference thats why. useRef does not provide a callback — nitte93
– nitte93, Commented Aug 7, 2020 at 9:39

Nathan · Accepted Answer · 2021-04-28 18:50:33Z

27

You can fix this by typing your useState function:

const [refElement, setReference] = useState<HTMLDivElement | null>(null);

...

<div ref={setReference} />

answered Apr 28, 2021 at 18:50

Nathan

1,3911 gold badge19 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

TrueWill Over a year ago

You can make this more flexible by using HTMLElement instead of HTMLDivElement - that way it will work with any element.

Collectives™ on Stack Overflow

Typescript react: Type inference is not working for callback refs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related