Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

useLayoutEffect does nothing on the server

See original GitHub issue

windmill-react-ui version: 0.1.0-alpha.8

Relevant code or config:

import React from 'react'
import '../css/tailwind.css'
import { Windmill } from 'windmill-react-ui'

function MyApp({ Component, pageProps }) {
  return (
    <Windmill>
      <Component {...pageProps} />
    </Windmill>
  )
}

export default MyApp

What you did:

Rendered Windmill component with NextJS

What happened:

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://fb.me/react-uselayouteffect-ssr for common fixes.

Reproduction:

Docs repo of this project (not available yet)

Issue Analytics

State:
Created 3 years ago
Reactions:4
Comments:7 (2 by maintainers)

Top GitHub Comments

4reactions

cassuscommented, Mar 11, 2021

The RenderWhere workaround re-renders the whole page after hydration. Form element loose their state in this case so this is not ideal.

@estevanmaito would you consider using useBrowserLayoutEffect ?

It avoids the warning for SSR:

const useBrowserLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : () => {}

Example usage: https://github.com/dhovart/next10-intl/blob/4638d3dc91eee4a7f35b8d056c74fdf126ea9f85/src/context/Next10IntlProvider.tsx Similar use in Redux: https://github.com/reduxjs/react-redux/blob/d16262582b2eeb62c05313fca3eb59dc0b395955/src/components/connectAdvanced.js#L40

4reactions

mattgicommented, Jan 10, 2021

This was a workaround to get things going on nextjs

components/render-where.tsx

import React, { useEffect, useState } from "react";

export const RenderWhere: React.FC<{ client?: boolean; server?: boolean }> = (props) => {
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => setIsMounted(true), []);

  if (!isMounted && props.client) {
    return null;
  }

  if (isMounted && props.server) {
    return null;
  }

  return props.children as React.ReactElement;
};

pages/_app.tsx

import "../styles/tailwind.css";

import { Windmill } from "@windmill/react-ui";
import { AppProps } from "next/app";
import Head from "next/head";
import * as React from "react";

import { RenderWhere } from "../components/render-where";

export default function App({ Component, pageProps }: AppProps): JSX.Element {
  return (
    <>
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>App</title>
      </Head>
      <RenderWhere server>
        <Component {...pageProps} />
      </RenderWhere>
      <RenderWhere client>
        <Windmill>
          <Component {...pageProps} />
        </Windmill>
      </RenderWhere>
    </>
  );
}