Merge pull request #187 from pierpo/fix/ssr-warning

fix: fix SSR warning for useLayoutEffect

Author: pierpo

src/ArcherElement/ArcherElement.tsx

@@ -1,4 +1,5 @@
-import React, { useCallback, useContext, useLayoutEffect, useMemo, useRef } from 'react';
+import React, { useCallback, useContext, useMemo, useRef } from 'react';
+import { useIsomorphicLayoutEffect } from '../utils/useIsomorphicLayoutEffect';
 import { ArcherContainerContext } from '../ArcherContainer/ArcherContainer.context';
 import { RelationType } from '../types';
 import { encodeId } from '../utils/encodeId';
@@ -53,7 +54,7 @@ const ArcherElement = ({ id, relations = [], children }: ArcherElementProps) =>
     context.unregisterChild(encodedId);
   }, [context, encodedId]);
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     registerChild(ref.current);
 
     return () => unregisterChild();

src/utils/useIsomorphicLayoutEffect.ts

@@ -0,0 +1,9 @@
+import { useLayoutEffect, useEffect } from 'react';
+
+/**
+ * Ignores useLayoutEffect for server-side rendering. It's fine, since the
+ * server can't draw the arrows.
+ * https://medium.com/@alexandereardon/uselayouteffect-and-ssr-192986cdcf7a
+ */
+export const useIsomorphicLayoutEffect =
+  typeof window !== 'undefined' ? useLayoutEffect : useEffect;