From ce37a57954ff51785ef694db55c11aae3d105869 Mon Sep 17 00:00:00 2001 From: Yann Pringault Date: Fri, 6 Nov 2020 10:59:30 +0100 Subject: [PATCH] fix: useEffect when SSR --- src/useTweaks.ts | 5 +++-- src/utils.ts | 4 ++++ 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/useTweaks.ts b/src/useTweaks.ts index 74461c2..85bbf53 100644 --- a/src/useTweaks.ts +++ b/src/useTweaks.ts @@ -1,8 +1,9 @@ -import { useState, useLayoutEffect, useRef } from 'react' +import { useState, useRef } from 'react' import Tweakpane from 'tweakpane' import { getData, buildPane } from './data' import { Schema, Settings, UseTweaksValues } from './types' +import { useIsomorphicLayoutEffect } from './utils' let ROOTPANE: Tweakpane | undefined @@ -18,7 +19,7 @@ export function useTweaks( const [data, set] = useState(() => getData(_schema.current, _rootKey)) - useLayoutEffect(() => { + useIsomorphicLayoutEffect(() => { ROOTPANE = ROOTPANE || new Tweakpane({ ..._settings, container: _settings.current?.container?.current! }) const isRoot = _name === undefined const _pane = _name ? ROOTPANE.addFolder({ title: _name }) : ROOTPANE diff --git a/src/utils.ts b/src/utils.ts index 8617082..944bc09 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -1,3 +1,7 @@ +import { useEffect, useLayoutEffect } from 'react' + export function uuid(): string { return `${Math.floor((new Date().getTime() * Math.random()) / 1000)}` } + +export const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect