How to fix the "Warning: useLayoutEffect does nothing on the server"?

adding

import React from "react" 
React.useLayoutEffect = React.useEffect 

to my frontend/src/setupTests.js test file is a way to suppress the jest warning. Ultimately, this looks to be an issue with Material-UI components having issues with Jest.

you should check if the useLayoutEffect can be used this way:

import React, {useEffect, useLayoutEffect} from 'react';

const canUseDOM = typeof window !== 'undefined';
const useIsomorphicLayoutEffect = canUseDOM ? useLayoutEffect : useEffect;

then instead of the useLayoutEffect use a useIsomorphicLayoutEffect

A bit cleaner solution might be to use jest mock like so:

jest.mock('react', () => ({
  ...jest.requireActual('react'),
  useLayoutEffect: jest.requireActual('react').useEffect,
}));

You can fix this by adding the following if statement to the beginning of your startup file (e.g. index.js):

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

This will ensure that the SSR uses React.useEffect instead of React.useLayoutEffect because document is undefined on the server-side.