• Overview: Discusses the issue of using useLayoutEffect in server-side rendering and the prevalence of "isomorphic layout effect" libraries.
• useLayoutEffect in Server-Side Rendering: React shows a warning when using useLayoutEffect on the server as its effect can't be encoded. useLayoutEffect is for reading from the DOM to modify component layout and is executed before the browser paints DOM updates. When server-side rendering a component with a layout effect, it's rendered twice before the DOM is painted, but on the server, there is no DOM, so layout effects don't execute and the UI is incorrect until hydrated on the client.
• "Isomorphic Layout Effect" Libraries: Many popular libraries have "isomorphic layout effect" implementations that run useLayoutEffect on the client and useEffect on the server. React ProseMirror also has a similar implementation.
• Origin of the Quirk: React Redux's v7 made an arbitrary decision to use useEffect instead of useLayoutEffect on the server to get around the warning. This decision was copied by other libraries, and a Medium post about it became widely read.
• Problems with the Approach: The descriptions of these "isomorphic layout effect" hooks are often inaccurate or lack context. Users may misunderstand how to use them effectively, leading to incorrect usage like in React-Select.
• Importance of Understanding: It's important to understand why code does what it does to avoid building up incomplete understandings that can shift intuition over time. React ProseMirror no longer triggers the layout effect warning during server-side rendering.