search

Zaid-Ajaj / Feliz

A fresh retake of the React API in Fable and a collection of high-quality components to build React applications in F#, optimized for happiness
https://zaid-ajaj.github.io/Feliz/
MIT License
534 stars 78 forks source link

Question: useEffect instead of useLayoutEffect in useCallbackRef? (aka improve server side rendering compat) #273

Open gaku-sei opened 3 years ago

gaku-sei commented 3 years ago

Hello @Zaid-Ajaj 😄

It seems the useCallbackRef hook uses useLayoutEffect under the hood:

https://github.com/Zaid-Ajaj/Feliz/blob/4ec506747ca6baf155fed1d8c45d930e817887df/Feliz/React.fs#L393

But this leads to some issues with (Node.js based) server side rendering (you can see here for more details: https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85).

As per this comment:

https://github.com/Zaid-Ajaj/Feliz/blob/4ec506747ca6baf155fed1d8c45d930e817887df/Feliz/React.fs#L394

it seems the hook could be safely replaced by useEffect?

Zaid-Ajaj commented 3 years ago

Hi there @gaku-sei,

To be honest, I haven't played with Feliz yet in the context of server-side rendering but I believe we can replace useLayoutEffect by just useEffect. @Shmew Any concern about this?

Shmew commented 3 years ago

Using useEffect over useLayoutEffect causes issues, I explicitly remember testing the two out. I can't remember what exactly the issue was that occurs when you swap them out though; I wish the FSSF slack had more history in times like these 😩.

It might be possible to emulate useLayoutEffect via just useEffect by doing some raf shenanigans.