remove Warning: useLayoutEffect does nothing on the server, because … warnings on SSR (#3937)

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

* Update .changeset/flat-beers-help.md

Author: dimaMachina

.changeset/flat-beers-help.md

@@ -0,0 +1,6 @@
+---
+'@graphiql/react': patch
+'graphiql': patch
+---
+
+remove `Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format` warnings on SSR

packages/graphiql-react/src/theme.ts

@@ -1,4 +1,4 @@
-import { useLayoutEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useStorageContext } from './storage';
 
 /**
@@ -30,11 +30,7 @@ export function useTheme(defaultTheme: Theme = null) {
     }
   });
 
-  useLayoutEffect(() => {
-    if (typeof window === 'undefined') {
-      return;
-    }
-
+  useEffect(() => {
     document.body.classList.remove('graphiql-light', 'graphiql-dark');
     if (theme) {
       document.body.classList.add(`graphiql-${theme}`);

packages/graphiql-react/src/utility/resize.ts

@@ -1,4 +1,4 @@
-import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useStorageContext } from '../storage';
 import { debounce } from './debounce';
 
@@ -45,7 +45,7 @@ type UseDragResizeArgs = {
 };
 
 export function useDragResize({
-  defaultSizeRelation = DEFAULT_FLEX,
+  defaultSizeRelation = 1,
   direction,
   initiallyHidden,
   onHiddenElementChange,
@@ -91,7 +91,7 @@ export function useDragResize({
   /**
    * Set initial flex values
    */
-  useLayoutEffect(() => {
+  useEffect(() => {
     const storedValue =
       (storageKey && storage?.get(storageKey)) || defaultFlexRef.current;
 
@@ -114,9 +114,9 @@ export function useDragResize({
   }, [direction, storage, storageKey]);
 
   /**
-   * Hide and show items when state changes
+   * Hide and show items when the state changes
    */
-  useLayoutEffect(() => {
+  useEffect(() => {
     const hide = (resizableElement: ResizableElement) => {
       const element =
         resizableElement === 'first' ? firstRef.current : secondRef.current;
@@ -285,6 +285,5 @@ export function useDragResize({
   };
 }
 
-const DEFAULT_FLEX = 1;
 const HIDE_FIRST = 'hide-first';
 const HIDE_SECOND = 'hide-second';