nextjs warning

[Th0rgal]

Describe the bug I noticed this warning when using the app in local:

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 Navbar (webpack-internal:///./components/UI/navbar.tsx:53:74)
    at ThemeProvider (/Users/thomas/starknetid/app.starknet.id/node_modules/@mui/private-theming/node/ThemeProvider/ThemeProvider.js:39:5)
    at ThemeProvider (/Users/thomas/starknetid/app.starknet.id/node_modules/@mui/system/ThemeProvider/ThemeProvider.js:50:5)
    at ThemeProvider (/Users/thomas/starknetid/app.starknet.id/node_modules/@mui/material/node/styles/ThemeProvider.js:21:14)
    at StarknetIdJsProvider (webpack-internal:///./context/StarknetIdJsProvider.tsx:24:33)
    at TransactionManagerProvider (/Users/thomas/starknetid/app.starknet.id/node_modules/@starknet-react/core/dist/providers/transaction.js:56:39)
    at QueryClientProvider (/Users/thomas/starknetid/app.starknet.id/node_modules/@tanstack/react-query/build/lib/QueryClientProvider.js:65:3)
    at StarknetProvider (/Users/thomas/starknetid/app.starknet.id/node_modules/@starknet-react/core/dist/providers/starknet.js:149:29)
    at StarknetConfig (/Users/thomas/starknetid/app.starknet.id/node_modules/@starknet-react/core/dist/providers/index.js:24:27)
    at MyApp (webpack-internal:///./pages/_app.tsx:63:18)
    at StyleRegistry (/Users/thomas/starknetid/app.starknet.id/node_modules/styled-jsx/dist/index/index.js:449:36)
    at PathnameContextProviderAdapter (/Users/thomas/starknetid/app.starknet.id/node_modules/next/dist/shared/lib/router/adapters.js:78:11)
    at AppContainer (/Users/thomas/starknetid/app.starknet.id/node_modules/next/dist/server/render.js:346:29)
    at AppContainerWithIsomorphicFiberStructure (/Users/thomas/starknetid/app.starknet.id/node_modules/next/dist/server/render.js:382:57)
    at div
    at Body (/Users/thomas/starknetid/app.starknet.id/node_modules/next/dist/server/render.js:682:21)

[sstefdev]

The warning message you're encountering is related to the use of useLayoutEffect in a component that renders both on the server and the client in a Next.js application. useLayoutEffect is intended for side effects that require synchronous execution before the browser repaints, but it can cause issues during server-side rendering (SSR) since it runs on both the server and the client.

• Replace useLayoutEffect with useEffect: If the side effects you're handling with useLayoutEffect are not critical to layout and don't require synchronous execution, you can switch to using the useEffect hook. useEffect is safe to use in both SSR and client-side rendering scenarios.

• Conditional Rendering: If you're using useLayoutEffect for certain client-only behavior that doesn't impact SSR, you can conditionally render the component only on the client using the useEffect hook with an empty dependency array:

  useEffect(() => {
  // Client-only side effect
  }, []);
  

• Consider Using useEffect with isServer Check: You can check whether the code is running on the server or the client using a boolean flag like isServer, which is often available in Next.js environments:

  
  useEffect(() => {
  if (!isServer) {
  // Client-only side effect
  }
  }, []);

- Use useEffect for Both Server and Client: If the side effect isn't dependent on synchronous layout updates, and you want to maintain consistent behavior between server and client rendering, you can use useEffect everywhere and ensure the behavior is the same in both contexts.

[Th0rgal]

Thank you very much, I will look into this!