fix: 🐛 use useIsomorphicLayoutEffect everywhere

src/createGlobalState.ts

@@ -1,6 +1,7 @@
 /* eslint-disable */
-import { useLayoutEffect, useState } from 'react';
+import { useState } from 'react';
 import useEffectOnce from './useEffectOnce';
+import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect';
 
 export function createGlobalState<S = any>(initialState?: S) {
  const store: { state: S | undefined; setState: (state: S) => void; setters: any[] } = {
@@ -19,7 +20,7 @@ export function createGlobalState<S = any>(initialState?: S) {
  store.setters = store.setters.filter(setter => setter !== stateSetter);
  });
 
- useLayoutEffect(() => {
+ useIsomorphicLayoutEffect(() => {
  if (!store.setters.includes(stateSetter)) {
  store.setters.push(stateSetter);
  }

src/useCss.ts

@@ -2,7 +2,8 @@ import { create, NanoRenderer } from 'nano-css';
 import { addon as addonCSSOM, CSSOMAddon } from 'nano-css/addon/cssom';
 import { addon as addonVCSSOM, VCSSOMAddon } from 'nano-css/addon/vcssom';
 import { cssToTree } from 'nano-css/addon/vcssom/cssToTree';
-import { useLayoutEffect, useMemo } from 'react';
+import { useMemo } from 'react';
+import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect';
 
 type Nano = NanoRenderer & CSSOMAddon & VCSSOMAddon;
 const nano = create() as Nano;
@@ -15,7 +16,7 @@ const useCss = (css: object): string => {
  const className = useMemo(() => 'react-use-css-' + (counter++).toString(36), []);
  const sheet = useMemo(() => new nano.VSheet(), []);
 
- useLayoutEffect(() => {
+ useIsomorphicLayoutEffect(() => {
  const tree = {};
  cssToTree(tree, css, '.' + className, '');
  sheet.diff(tree);

src/useFullscreen.ts

@@ -1,6 +1,7 @@
 /* eslint-disable */
-import { RefObject, useLayoutEffect, useState } from 'react';
+import { RefObject, useState } from 'react';
 import screenfull from 'screenfull';
+import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect';
 
 export interface FullScreenOptions {
  video?: RefObject<HTMLVideoElement>;
@@ -13,7 +14,7 @@ const useFullscreen = (ref: RefObject<Element>, on: boolean, options: FullScreen
  const { video, onClose = noop } = options;
  const [isFullscreen, setIsFullscreen] = useState(on);
 
- useLayoutEffect(() => {
+ useIsomorphicLayoutEffect(() => {
  if (!on) {
  return;
  }

src/useRaf.ts

@@ -1,9 +1,10 @@
-import { useLayoutEffect, useState } from 'react';
+import { useState } from 'react';
+import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect';
 
 const useRaf = (ms: number = 1e12, delay: number = 0): number => {
  const [elapsed, set] = useState<number>(0);
 
- useLayoutEffect(() => {
+ useIsomorphicLayoutEffect(() => {
  let raf;
  let timerStop;
  let start;

src/useStartTyping.ts

@@ -1,5 +1,5 @@
 /* eslint-disable */
-import { useLayoutEffect } from 'react';
+import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect';
 
 const isFocusedElementEditable = () => {
  const { activeElement, body } = document;
@@ -41,7 +41,7 @@ const isTypedCharGood = ({ keyCode, metaKey, ctrlKey, altKey }: KeyboardEvent) =
 };
 
 const useStartTyping = (onStartTyping: (event: KeyboardEvent) => void) => {
- useLayoutEffect(() => {
+ useIsomorphicLayoutEffect(() => {
  const keydown = event => {
  !isFocusedElementEditable() && isTypedCharGood(event) && onStartTyping(event);
  };