Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BUG] Compatibility with React v19 #602

Open
CHE1RON opened this issue May 30, 2024 · 8 comments
Open

[BUG] Compatibility with React v19 #602

CHE1RON opened this issue May 30, 2024 · 8 comments
Labels
bug Something isn't working

Comments

@CHE1RON
Copy link

CHE1RON commented May 30, 2024

Describe the bug

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

image

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

@CHE1RON CHE1RON added the bug Something isn't working label May 30, 2024
@fstaffa
Copy link

fstaffa commented Jun 6, 2024

@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
Copy link
Author

CHE1RON commented Jun 7, 2024

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

@aaronmw
Copy link

aaronmw commented Jul 16, 2024

Same problem here. Had to cast :(

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

@CHE1RON
Copy link
Author

CHE1RON commented Oct 28, 2024

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

@rshackleton
Copy link

rshackleton commented Dec 2, 2024

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
Copy link

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

@thany
Copy link

thany commented Dec 20, 2024

Same happens for useOnClickOutside.

@iwan-uschka
Copy link

iwan-uschka commented Dec 23, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

7 participants