useLayoutEffect and server rendering

If you use server rendering, keep in mind that neither useLayoutEffect nor useEffect can run until the JavaScript is downloaded.

You might see a warning if you try to useLayoutEffect on the server. Here's two common ways to fix it.

Option 1: Convert to useEffect

If this effect isn't important for first render (i.e. if the UI still looks valid before it runs), then useEffect instead.

function MyComponent() {
  useEffect(() => {
    // ...
  });
}

Like useLayoutEffect, it won't run on the server, but it also won't warn.

Option 2: Lazily show component with useLayoutEffect

If UI looks broken with useEffect but gets fixed by useLayoutEffect, it means that this component doesn't look right until the effect runs. However, that means the server-rendered HTML version of it won't look right until JavaScript loads anyway. So server-rendering it brings no benefit and shows a confusing UI.

To fix this, you can delay showing that component until after the client side JS loads and hydrates the component. To exclude a Child that needs layout effects from the server-rendered HTML, you can render it conditionally:

function Parent() {
  const [showChild, setShowChild] = useState(false);
  
  // Wait until after client-side hydration to show
  useEffect(() => {
    setShowChild(true);
  }, []);
  
  if (!showChild) {
    // You can show some kind of placeholder UI here
    return null;
  }

  return <Child {...props} />;
}

function Child(props) {
  useLayoutEffect(() => {
    // This is where your layout effect logic can be
  });
}

For example, this is handy for jQuery plugins which can be initialized later.

If you have some use case that isn't covered, please report a complete minimal code example here and we'll try to help.

import { useLayoutEffect } from "react"; import tenoxui from "tenoxui"; import property from "@tenoxui/property"; const App = () => { useLayoutEffect(() => { // add tenoxui tenoxui(property); // use default property }, []); return <h1 className="tc-red">Hello World!</h1>; }; export default App;

import { useLayoutEffect } from "react"; import tenoxui, { makeStyles, use } from "tenoxui"; import property from "@tenoxui/property"; export function styler() { useLayoutEffect(() => { use(property, { c: "color" }); makeStyles({ body: "bg-#0d0d0d", main: "p-2rem mh-auto w-mx-1440px", ".c-primary": "tc-$primary", ".flex-center": "d-flex flex-parent-center" }); tenoxui(); }, []); }

import React from "react"; import { styler } from "@/utils/styler"; const Main = () => { styler(); return ( <main> <h1 className="c-primary">It works!</h1> <div className="box-100px bg-$primary flex-center br-4px"> <p className="tx-#0d0d0d fw-500">It works!</p> </div> </main> ); }; export default Main;

import Head from "next/head"; import dynamic from "next/dynamic"; const Main = dynamic(() => import("@/components/Main"), { ssr: false }); export default function Home() { return ( <> <Head> <title>Docs page</title> <meta name="description" content="Generated by create next app" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="icon" href="/favicon.ico" /> </Head> <Main /> </> ); }

gaearon/uselayouteffect-ssr.md

Option 1: Convert to useEffect

Option 2: Lazily show component with useLayoutEffect

sisyl commented May 16, 2024 •

edited

Loading

gaearon/uselayouteffect-ssr.md

Option 1: Convert to useEffect

Option 2: Lazily show component with useLayoutEffect

sisyl commented May 16, 2024 • edited Loading

sisyl commented May 16, 2024 •

edited

Loading