Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format

[the-simian]

Describe the bug

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.

Serverside rendering in Expo 50 results in verbose logging related to useLayoutEffect. This can be suppressed by including

if (typeof document === 'undefined') {
  React.useLayoutEffect = React.useEffect;
}

In the codebase that uses the component.

Steps to reproduce

1. create a new project using expo go
2. load any page with the react-native-toast-message

Expected behavior useLayoutEffect would not be used on the server, but would be shimmed to use useEffect.

Something like this export const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect

Screenshots

Code sample A minimal code sample should repro the issue

import Toast from 'react-native-toast-message';

export function App(props) {
  return (
    <>
      {/* ... */}
      <Toast />
    </>
  );
}

...

import Toast from 'react-native-toast-message';
import { Button } from 'react-native'

export function Foo(props) {
  const showToast = () => {
    Toast.show({
      type: 'success',
      text1: 'Hello',
      text2: 'This is some something 👋'
    });
  }

  return (
    <Button
      title='Show toast'
      onPress={showToast}
    />
  )
}

Environment (please complete the following information): Platform Information:

Expo version	~50.0.5
React version	18.2.0
react-native-toast-message version	~2.2.0
Device	Web output
Platform	WSL on Windows 11

Additional context There is currently a verbose log output that refers to useLayoutEffect on the web export. Here is the full logs:

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format.

Here is the exact line of the error:

https://github.com/calintamas/react-native-toast-message/blob/c9f6e08667d37f7d3f8a873226a1d670fb842554/src/components/AnimatedContainer.tsx#L121

See the full Expo Logs Output:

Starting Metro Bundler
warning: Bundler cache is empty, rebuilding (this may take a minute)
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
█ ▄▄▄▄▄ █   █▄▄▀▄██ ▄▄▄▄▄ █
█ █   █ █ ▀▄ █▀▄▄▄█ █   █ █
█ █▄▄▄█ █▀██▀▀█▀▄██ █▄▄▄█ █
█▄▄▄▄▄▄▄█▄▀▄█ █▄█▄█▄▄▄▄▄▄▄█
█▄▄▀▀  ▄▀▀▀▀▄▀█▄ ███ ▀▄▄ ▄█
██ ██▄▀▄ ██▀ ▄██ ▀▀ █▄  ▀██
█▀▀ ▄ ▀▄▀▄█▄█▄▀▄▀▄▀▄▀▀▄ ▀██
███▄▀▀█▄▄▀  █▀██▄▄▄█▄▀ ▀███
█▄▄▄▄█▄▄▄  █▄▀█▄▄ ▄▄▄ ▀ ▄▄█
█ ▄▄▄▄▄ █▀█  ▄██▀ █▄█ ▀▀█▀█
█ █   █ █▄▀▀█▄▀▄█▄▄ ▄▄▀   █
█ █▄▄▄█ █▀▀▀█▀█▀▄██▄▀█▀▀ ██
█▄▄▄▄▄▄▄█▄██▄▄▄▄████▄▄▄▄▄▄█
› Metro waiting on exp://192.168.1.83:8081
› Scan the QR code above with Expo Go (Android) or the Camera app (iOS)
› Web is waiting on http://localhost:8081
› Using Expo Go
› Press s │ switch to development build
› Press a │ open Android
› Press w │ open web
› Press j │ open debugger
› Press r │ reload app
› Press m │ toggle menu
› Press o │ open project code in your editor
› Press ? │ show all commands
Logs for your project will appear below. Press Ctrl+C to exit.
Server Bundling complete 53ms (node_modules/expo-router/node/render.js)
Web Bundling complete 182ms (node_modules/expo-router/entry.js)
"shadow*" style props are deprecated. Use "boxShadow".
props.pointerEvents is deprecated. Use style.pointerEvents
nativeID is deprecated. Use id.
accessibilityRole is deprecated. Use role.
accessibilityLabel is deprecated. Use aria-label.
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.
at AnimatedContainer (http://localhost:8081/node_modules/expo-router/node/render.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node:153010:25)
at ToastUI (http://localhost:8081/node_modules/expo-router/node/render.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node:152935:27)
at http://localhost:8081/node_modules/expo-router/node/render.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node:152693:24
at LoggerProvider (http://localhost:8081/node_modules/expo-router/node/render.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node:152831:25)
at Toast (http://localhost:8081/node_modules/expo-router/node/render.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node:152741:35)
at ToastProvider (http://localhost:8081/node_modules/expo-router/node/render.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node:181799:68)
at ThemeProvider (http://localhost:8081/node_modules/expo-router/node/render.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node:214384:22)
at div
at http://localhost:8081/node_modules/expo-router/node/render.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node:46307:27
at GestureHandlerRootView
at RootLayoutNav (http://localhost:8081/node_modules/expo-router/node/render.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node:174861:59)
at RootLayout (http://localhost:8081/node_modules/expo-router/node/render.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node:174819:58)
at Try (http://localhost:8081/node_modules/expo-router/node/render.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node:77757:7)
at Suspense
at Route (http://localhost:8081/node_modules/expo-router/node/render.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node:75215:25)
at http://localhost:8081/node_modules/expo-router/node/render.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node:75544:25
at div
at http://localhost:8081/node_modules/expo-router/node/render.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node:46307:27
at NativeSafeAreaProvider (http://localhost:8081/node_modules/expo-router/node/render.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node:232801:25)
at SafeAreaProvider (http://localhost:8081/node_modules/expo-router/node/render.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node:232645:25)
at div
at body
at html
at Html (http://localhost:8081/node_modules/expo-router/node/render.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node:231609:25)
at wrapper (http://localhost:8081/node_modules/expo-router/node/render.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node:182189:35)
at wrapper (http://localhost:8081/node_modules/expo-router/node/render.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node:83780:28)
at EnsureSingleNavigator (http://localhost:8081/node_modules/expo-router/node/render.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node:208840:25)
at BaseNavigationContainer (http://localhost:8081/node_modules/expo-router/node/render.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node:207227:29)
at ThemeProvider (http://localhost:8081/node_modules/expo-router/node/render.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node:214384:22)
at NavigationContainerInner (http://localhost:8081/node_modules/expo-router/node/render.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node:214227:27)
at ContextNavigator (http://localhost:8081/node_modules/expo-router/node/render.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node:83799:25)
at ExpoRoot (http://localhost:8081/node_modules/expo-router/node/render.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node:83771:29)
at AppContainer (http://localhost:8081/node_modules/expo-router/node/render.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node:60287:25)
at ServerContainer (http://localhost:8081/node_modules/expo-router/node/render.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node:215330:25)
at e (http://localhost:8081/node_modules/expo-router/node/render.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node:360662:23)