[useMeasure] ref has wrong type

[axelboc]

What is the current behavior?

The code below errors:

const [ref] = useMeasure();
return <div ref={ref} />

Type 'UseMeasureRef<HTMLElement>' is not assignable to type 'string | ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined'.
  Type 'UseMeasureRef<HTMLElement>' is not assignable to type '(instance: HTMLDivElement | null) => void'.
    Types of parameters 'element' and 'instance' are incompatible.
      Type 'HTMLDivElement | null' is not assignable to type 'HTMLElement'.
        Type 'null' is not assignable to type 'HTMLElement'.  TS2322

Reproduced in: https://codesandbox.io/s/purple-bash-btzpp?file=/src/App.tsx

What is the expected behavior?

Type UseMeasureRef<E> should be (instance: E | null) => void, though React's built-in RefCallback<T> type could probably be used as well.

A little about versions:

• React: 16.13.1
• @types/react: 16.9.35
• react-use: 15.1.1
• Did this work in the previous package version? Yes, for sure in 13.27.1

[jas0ncn]

Same issue, is there any progress? 🤔

[wdfinch]

Any updates on this?

[Dreamacro]

You can override the default generics (<E extends HTMLElement = HTMLElement>).

const [ref] = useMeasure<HTMLDivElement>()

[axelboc]

If I'm not mistaken, you'd have to use const [ref] = useMeasure<HTMLDivElement | null>(), which is exactly the problem. The generic is meant to narrow down the type of the element that will receive the ref function. You shouldn't have to specify null, and useMeasure() should, by default, return a ref function with a type that React agrees with.

[axelboc]

Happy New Year! 🎉

I still can't upgrade react-use because of this issue. Bypassing the error with a cast is not trivial and super ugly, and const [ref] = useMeasure<HTMLDivElement | null>() doesn't actually work because HTMLDivElement | null doesn't extend HTMLElement, as per the definition of the generic.

I've just rebased the PR on master: #1267.

[axelboc]

Hi @robinvw1, I notice you've recently broaden the type of useMesaure's generic from HTMLElement to Element to support SVG elements. Would you have time to take a look at this issue as well, by any chance? I've rebased the PR, so we just need someone to review it and merge it: #1267

[JoeDuncko]

Hi all! @react-hookz/web, the new library by one of react-use's former maintainers (background here and here) has a new implementation of useMeasure that I think solves this problem.

For those interested, there's an official migration guide for migrating from react-use to @react-hookz/web.

Hope this helps!

[DerekLoop]

@JoeDuncko Thanks for the tip! Either of these solutions worked for me when using @react-hookz/web.

First, this StackOverflow answer:

import { useMeasure } from "@react-hookz/web/esm"

function ComponentName() {
  const [measurements, ref] = useMeasure()

  return <div ref={ref as React.RefObject<HTMLDivElement>}>{" "}</div>
}

Or, second, paying more attention to the useMeasure docs:

import { useMeasure } from "@react-hookz/web/esm"

function ComponentName() {
  const [measurements, ref] = useMeasure<HTMLDivElement>()

  return (<div ref={ref}>{" "}</div>)
}