From c0b8639485529015421399e5ff7963d6592a8b98 Mon Sep 17 00:00:00 2001 From: Jiachi Liu Date: Mon, 20 Dec 2021 16:06:02 +0100 Subject: [PATCH 1/4] perf: fallback to module level registry in browser --- src/style.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/style.js b/src/style.js index db78742f..405498ff 100644 --- a/src/style.js +++ b/src/style.js @@ -1,19 +1,22 @@ import React from 'react' -import { useStyleRegistry } from './stylesheet-registry' +import { useStyleRegistry, createStyleRegistry } from './stylesheet-registry' import { computeId } from './lib/hash' // Opt-into the new `useInsertionEffect` API in React 18, fallback to `useLayoutEffect`. // https://github.com/reactwg/react-18/discussions/110 const useInsertionEffect = React.useInsertionEffect || React.useLayoutEffect + +const isBrowser = typeof window !== 'undefined' +const defaultRegistry = createStyleRegistry() export default function JSXStyle(props) { - const registry = useStyleRegistry() + const registry = isBrowser ? defaultRegistry : useStyleRegistry() // If `registry` does not exist, we do nothing here. if (!registry) { return null } - if (typeof window === 'undefined') { + if (!isBrowser) { registry.add(props) return null } From f584ee5f4f302cc10fdb596986ea796b46824ee5 Mon Sep 17 00:00:00 2001 From: Jiachi Liu Date: Mon, 20 Dec 2021 16:12:42 +0100 Subject: [PATCH 2/4] preeval registry at top level --- src/style.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/style.js b/src/style.js index 405498ff..1e37ac26 100644 --- a/src/style.js +++ b/src/style.js @@ -7,9 +7,10 @@ import { computeId } from './lib/hash' const useInsertionEffect = React.useInsertionEffect || React.useLayoutEffect const isBrowser = typeof window !== 'undefined' -const defaultRegistry = createStyleRegistry() +const defaultRegistry = + typeof window !== 'undefined' ? createStyleRegistry() : undefined export default function JSXStyle(props) { - const registry = isBrowser ? defaultRegistry : useStyleRegistry() + const registry = defaultRegistry ? defaultRegistry : useStyleRegistry() // If `registry` does not exist, we do nothing here. if (!registry) { From 2bd917a7b11c8302e3f18a735e116fee163b3c0d Mon Sep 17 00:00:00 2001 From: Jiachi Liu Date: Mon, 20 Dec 2021 16:22:40 +0100 Subject: [PATCH 3/4] simplify cond --- src/style.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/style.js b/src/style.js index 1e37ac26..867088cb 100644 --- a/src/style.js +++ b/src/style.js @@ -7,8 +7,7 @@ import { computeId } from './lib/hash' const useInsertionEffect = React.useInsertionEffect || React.useLayoutEffect const isBrowser = typeof window !== 'undefined' -const defaultRegistry = - typeof window !== 'undefined' ? createStyleRegistry() : undefined +const defaultRegistry = isBrowser ? createStyleRegistry() : undefined export default function JSXStyle(props) { const registry = defaultRegistry ? defaultRegistry : useStyleRegistry() From aa0703eb7d047283b515a161e15f530abbdddad9 Mon Sep 17 00:00:00 2001 From: Jiachi Liu Date: Mon, 20 Dec 2021 17:01:59 +0100 Subject: [PATCH 4/4] use typeof for conditions --- src/style.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/style.js b/src/style.js index 867088cb..13eb139f 100644 --- a/src/style.js +++ b/src/style.js @@ -6,8 +6,8 @@ import { computeId } from './lib/hash' // https://github.com/reactwg/react-18/discussions/110 const useInsertionEffect = React.useInsertionEffect || React.useLayoutEffect -const isBrowser = typeof window !== 'undefined' -const defaultRegistry = isBrowser ? createStyleRegistry() : undefined +const defaultRegistry = + typeof window !== 'undefined' ? createStyleRegistry() : undefined export default function JSXStyle(props) { const registry = defaultRegistry ? defaultRegistry : useStyleRegistry() @@ -16,7 +16,7 @@ export default function JSXStyle(props) { return null } - if (!isBrowser) { + if (typeof window === 'undefined') { registry.add(props) return null }