Don't trace hooks during server-side rendering

Author: Oblosys

packages/react-hook-tracer/src/hooks/useCallback.ts

@@ -15,7 +15,11 @@ export function useCallback<F extends Function>(
   deps: React.DependencyList,
   traceOptions?: UseCallbackTraceOptions,
 ): F {
-  if (!util.isProductionBuild && componentRegistry.isCurrentComponentTraced()) {
+  if (
+    !util.isProductionBuild &&
+    !util.isServerRendered &&
+    componentRegistry.isCurrentComponentTraced()
+  ) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     return useCallbackTraced(
       callback as unknown as (...args: never[]) => unknown, // Convert untyped Function to explicit function type.

packages/react-hook-tracer/src/hooks/useContext.ts

@@ -12,7 +12,11 @@ export interface UseContextTraceOptions<T> {
 }
 
 export function useContext<T>(context: Context<T>, traceOptions?: UseContextTraceOptions<T>): T {
-  if (!util.isProductionBuild && componentRegistry.isCurrentComponentTraced()) {
+  if (
+    !util.isProductionBuild &&
+    !util.isServerRendered &&
+    componentRegistry.isCurrentComponentTraced()
+  ) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     return useContextTraced(context, traceOptions)
   } else {

packages/react-hook-tracer/src/hooks/useEffect.ts

@@ -15,7 +15,9 @@ export function useEffect(
   traceOptions?: UseEffectTraceOptions,
 ): void {
   const hook =
-    !util.isProductionBuild && componentRegistry.isCurrentComponentTraced()
+    !util.isProductionBuild &&
+    !util.isServerRendered &&
+    componentRegistry.isCurrentComponentTraced()
       ? useEffectTraced
       : React.useEffect
   return hook(effect, deps, traceOptions)

packages/react-hook-tracer/src/hooks/useInsertionEffect.ts

@@ -15,7 +15,9 @@ export function useInsertionEffect(
   traceOptions?: UseInsertionEffectTraceOptions,
 ): void {
   const hook =
-    !util.isProductionBuild && componentRegistry.isCurrentComponentTraced()
+    !util.isProductionBuild &&
+    !util.isServerRendered &&
+    componentRegistry.isCurrentComponentTraced()
       ? useInsertionEffectTraced
       : React.useEffect
   return hook(effect, deps, traceOptions)

packages/react-hook-tracer/src/hooks/useLayoutEffect.ts

@@ -16,7 +16,9 @@ export function useLayoutEffect(
   traceOptions?: UseLayoutEffectTraceOptions,
 ): void {
   const hook =
-    !util.isProductionBuild && componentRegistry.isCurrentComponentTraced()
+    !util.isProductionBuild &&
+    !util.isServerRendered &&
+    componentRegistry.isCurrentComponentTraced()
       ? useLayoutEffectTraced
       : React.useEffect
   return hook(effect, deps, traceOptions)

packages/react-hook-tracer/src/hooks/useMemo.ts

@@ -14,7 +14,11 @@ export function useMemo<T>(
   deps: React.DependencyList | undefined,
   traceOptions?: UseMemoTraceOptions<T>,
 ): T {
-  if (!util.isProductionBuild && componentRegistry.isCurrentComponentTraced()) {
+  if (
+    !util.isProductionBuild &&
+    !util.isServerRendered &&
+    componentRegistry.isCurrentComponentTraced()
+  ) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     return useMemoTraced(factory, deps, traceOptions)
   } else {

packages/react-hook-tracer/src/hooks/useReducer.ts

@@ -76,7 +76,11 @@ export function useReducer<I, S, A>(
   initializer?: (arg: I) => S,
   traceOptions?: UseReducerTraceOptions<S, A>,
 ): [S, Dispatch<A>] {
-  if (!util.isProductionBuild && componentRegistry.isCurrentComponentTraced()) {
+  if (
+    !util.isProductionBuild &&
+    !util.isServerRendered &&
+    componentRegistry.isCurrentComponentTraced()
+  ) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     return useReducerTraced(reducer, initialArg, initializer, traceOptions)
   } else {

packages/react-hook-tracer/src/hooks/useRef.ts

@@ -29,7 +29,11 @@ export function useRef<T>(
   initialValue?: T,
   traceOptions?: UseRefTraceOptions<T>,
 ): MutableRefObject<T | undefined> | RefObject<T | undefined> {
-  if (!util.isProductionBuild && componentRegistry.isCurrentComponentTraced()) {
+  if (
+    !util.isProductionBuild &&
+    !util.isServerRendered &&
+    componentRegistry.isCurrentComponentTraced()
+  ) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     return useRefTraced(initialValue, traceOptions)
   } else {

packages/react-hook-tracer/src/hooks/useState.ts

@@ -24,7 +24,11 @@ export function useState<S = undefined>(
   initialState?: S | (() => S),
   traceOptions?: UseStateTraceOptions<S>,
 ): [S | undefined, Dispatch<SetStateAction<S | undefined>>] {
-  if (!util.isProductionBuild && componentRegistry.isCurrentComponentTraced()) {
+  if (
+    !util.isProductionBuild &&
+    !util.isServerRendered &&
+    componentRegistry.isCurrentComponentTraced()
+  ) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     return useStateTraced(initialState, traceOptions)
   } else {

packages/react-hook-tracer/src/util.ts

@@ -2,6 +2,8 @@ import * as types from './types'
 
 export const isProductionBuild = process.env.NODE_ENV === 'production'
 
+export const isServerRendered = typeof window === 'undefined'
+
 export const includes = <T>(xs: readonly T[], x: T): boolean => xs.indexOf(x) >= 0
 
 export const flatMap = <T, S>(xs: readonly T[], f: (x: T) => readonly S[]): S[] =>