search

fkhadra / react-toastify

React notification made easy 🚀 !
https://fkhadra.github.io/react-toastify/introduction
MIT License
12.33k stars 676 forks source link

fix: replace useLayoutEffect into useIsomorphicLayoutEffect for server side rendering #1044

Closed khsily closed 5 months ago

khsily commented 5 months ago

This PR will fix the following issue when running on server side.

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.

The useIsomorphicLayoutEffect hook fixes this problem by switching between useEffect and useLayoutEffect following the execution environment.

coveralls commented 5 months ago

Coverage Status

coverage: 89.093% (-0.08%) from 89.176% when pulling cc2a20d245200206fafb944f31ad8f72cf1b0c78 on khsily:fix/server-side-effect into 5759b3f86c563b3913cdcf4737ad518d99ad8b3f on fkhadra:main.

Grren99 commented 5 months ago

oh good.. khsily !