search

rmolinamir / hero-slider

A hero slider component. Includes autoplay, touch swiping, multiple navs, event callbacks, and more.
https://rmolinamir.github.io/hero-slider/?path=/story/example-hero-slider--basic
102 stars 23 forks source link

useLayoutEffect warning on nextjs project #5

Closed aimarjs closed 2 years ago

aimarjs commented 3 years ago

Hey!

Great job with the slider - very much like it!. One issue is still bugging me though. The fact that useLayoutEffect is used in hero-slider/src/components/Slider/index.tsx file causes a lot of console log warnings.

Warning: useLayoutEffect does nothing on the server because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.

There's a workaround for this, maybe you could implement this in? Thanks!

https://medium.com/@alexandereardon/uselayouteffect-and-ssr-192986cdcf7a

rmolinamir commented 2 years ago

Thank you. I decided to replace useLayoutEffect with useEffect instead of implementing the hacky workaround. This should be fixed with the release of v3.0.2.