[BUG] Compatibility with React v19

[CHE1RON]

Describe the bug

Currently, when using React v19 (currently RC), it gives an error regarding ref objects being passed to hooks, see here:

To Reproduce

Simply follow the upgrade guide and install React v19 RC, then try to build the project using usehooks-ts.

Expected behavior

build step succeeds

Additional context

No response

[fstaffa]

@CHE1RON I was trying to replicate the problem but I was unable to. Can you confirm it is not caused by https://react.dev/blog/2024/04/25/react-19-upgrade-guide#ref-cleanup-required ?

[CHE1RON]

thanks for letting me know, I'll confirm that and get back to you!

[aaronmw]

Same problem here. Had to cast :(

const containerElementRef = useRef<HTMLDivElement>(null)
const isHovering = useHover(containerElementRef as RefObject<HTMLDivElement>)
//                                              ^ 😭 

[CHE1RON]

Yeah, me too, casting always feels like you were given typesafety candy and then having to give it back ..

[rshackleton]

Same problem here. Had to cast :(

const containerElementRef = useRef<HTMLDivElement>(null)
const isHovering = useHover(containerElementRef as RefObject<HTMLDivElement>)
//                                              ^ 😭 

I'd sooner annotate with @ts-expect-error so the cast can be removed once the type error is resolved.

const containerElementRef = useRef<HTMLDivElement>(null)
// @ts-expect-error React 19 type compatibility, nullable ref can be ignored.
const isHovering = useHover(containerElementRef)

[rtrembecky]

encountered the same problem with useResizeObserver. also outlined e.g. here: ZeeCoder/use-resize-observer#108

[thany]

Same happens for useOnClickOutside.

[iwan-uschka]

I created a PR: #665. Probably solves #650, too.

[juliencrn]

I’m closing this issue as usehooks now supports React 19. Feel free to reopen it if any issues persist or new ones arise.
Apologies for the delay!

[mzizka]

The nullable ref type problem is not the same thing as React 19 compatibility (#650), although it is specific to React 19. The issue persists with the latest version of the package, and you have to work around it by casting or ignoring the error, as outined above.

[iwan-uschka]

👆 #665 (comment)

[lachieh]

Yeah, sorry @juliencrn. Could you re-open this? This is one that is going to have to be resolved with a major version bump.