I think the last section of `useIsomorphicLayoutEffect` only avoids the warning but does not actually fix the problem, because the rendering and hydration process of a server side rendered or static generated page would go like this:
The HTML/CSS content is downloaded and displayed with normal opacity
The JS is then downloaded and parsed, and React would kick in and start the hydration, which would run the layout effect to set the opacity to 0
And then lastly the animation of opacity from 0 to 1 would run, but only after the content already showed and blinked
In conclusion, `useLayoutEffect` would only avoid the "blink" for subsequent rendering when React is hydrated, but not when the content is from the rendered/generated HTML before the React hydration.
(Sometimes people could think this works because the whole process happens very quickly, but in my opinion it's a real problem.)