fix ssr warning about useLayoutEffect

src/hooks/index.js

@@ -6,3 +6,4 @@ export * from './use-custom-tabs'
 export * from './use-validators'
 export * from './use-deep-effect'
 export * from './use-deep-memo'
+export * from './use-isomorphic-effect'

src/hooks/use-isomorphic-effect.js

@@ -0,0 +1,16 @@
+import { useEffect, useLayoutEffect } from 'react'
+
+const isReactNative =
+  typeof global !== 'undefined' &&
+  global.navigator &&
+  global.navigator.product === 'ReactNative'
+
+const isDOM = typeof document !== 'undefined'
+
+/**
+ * Is `useLayoutEffect` in a DOM or React Native environment, otherwise resolves to useEffect
+ * Only useful to avoid the console warning.
+ *
+ * PREFER `useEffect` UNLESS YOU KNOW WHAT YOU ARE DOING.
+ */
+export const useIsomorphicEffect = isDOM || isReactNative ? useLayoutEffect : useEffect

src/index.js

@@ -1,5 +1,6 @@
-import React, { useLayoutEffect, forwardRef } from 'react'
+import React, { forwardRef } from 'react'
 import { lazy, Suspense } from '@uploadcare/client-suspense'
+import { useIsomorphicEffect } from './hooks'
 
 const Uploader = lazy(() =>
   import(/* webpackChunkName: "ucare-widget-chunk" */ './uploader')
@@ -10,13 +11,13 @@ const Dialog = lazy(() =>
 )
 
 const Config = ({ locale, localeTranslations, localePluralize }) => {
-  useLayoutEffect(() => {
+  useIsomorphicEffect(() => {
     window.UPLOADCARE_LIVE = false
     window.UPLOADCARE_MANUAL_START = true
   }, [])
 
   // configurate translations
-  useLayoutEffect(() => {
+  useIsomorphicEffect(() => {
     window.UPLOADCARE_LOCALE = window.UPLOADCARE_LOCALE || locale
     window.UPLOADCARE_LOCALE_TRANSLATIONS =
       window.UPLOADCARE_LOCALE_TRANSLATIONS || localeTranslations