Provide only allowed node environments to run logs

Author: dolfbarr

src/index.test.tsx

@@ -3,16 +3,21 @@ import { act, renderHook } from '@testing-library/react'
 import { useEffect, useState } from 'react'
 
 describe('useLog', () => {
+  const OLD_ENV = process.env
   const consoleLog = jest.spyOn(console, 'log').mockImplementation(() => {})
   const consoleGroup = jest.spyOn(console, 'group').mockImplementation(() => {})
 
   beforeEach(() => {
     jest.useFakeTimers()
+    jest.resetModules()
+    process.env = { ...OLD_ENV }
+    process.env.NODE_ENV = 'dev'
   })
 
   afterEach(() => {
     jest.runOnlyPendingTimers()
     jest.useRealTimers()
+    process.env = OLD_ENV
   })
 
   it('exists', () => {
@@ -163,4 +168,12 @@ describe('useLog', () => {
     expect(consoleLog).toBeCalledTimes(11)
     expect(consoleGroup).toBeCalledTimes(6)
   })
+
+  it('does not render anything in production', () => {
+    process.env.NODE_ENV = 'production'
+
+    const { result } = renderHook(useLog)
+    renderHook(() => result.current.log('Test'))
+    expect(consoleLog).not.toBeCalled()
+  })
 })

src/index.tsx

@@ -4,6 +4,8 @@ const CSS_COMPONENT = 'color: DodgerBlue'
 const CSS_CHANGE = 'color: green; font-weight: bold;'
 const CSS_SUB_VALUE = 'color: SlateGray; font-weight: thin;'
 
+const ALLOWED_NODE_ENVS = ['dev', 'development']
+
 export interface UseLogReturn {
   log: <T>(value: T) => void
 }
@@ -72,44 +74,46 @@ export function useLog(): UseLogReturn {
     const clonedValue = JSON.parse(JSON.stringify(value))
     const prevValueRef = useRef<T>()
 
-    return (() => {
-      const isUnmounting = useRef(false)
-      useEffect(() => {
-        return () => {
-          isUnmounting.current = true
-        }
-      }, [])
+    if (ALLOWED_NODE_ENVS.includes(process.env.NODE_ENV ?? '')) {
+      return (() => {
+        const isUnmounting = useRef(false)
+        useEffect(() => {
+          return () => {
+            isUnmounting.current = true
+          }
+        }, [])
 
-      useEffect(() => {
-        print({
-          label: 'On mount',
-          value: clonedValue,
-          type: PrintTypes.Mount,
-        })
+        useEffect(() => {
+          print({
+            label: 'On mount',
+            value: clonedValue,
+            type: PrintTypes.Mount,
+          })
 
-        prevValueRef.current = value
+          prevValueRef.current = value
 
-        return () => {
+          return () => {
+            print({
+              label: 'On unmount',
+              value: clonedValue,
+              type: PrintTypes.Unmount,
+              prevValue: prevValueRef.current,
+            })
+          }
+        }, [])
+
+        useEffect(() => {
           print({
-            label: 'On unmount',
+            label: 'On change',
             value: clonedValue,
-            type: PrintTypes.Unmount,
+            type: PrintTypes.Change,
             prevValue: prevValueRef.current,
           })
-        }
-      }, [])
-
-      useEffect(() => {
-        print({
-          label: 'On change',
-          value: clonedValue,
-          type: PrintTypes.Change,
-          prevValue: prevValueRef.current,
-        })
-
-        prevValueRef.current = value
-      }, [value])
-    })()
+
+          prevValueRef.current = value
+        }, [value])
+      })()
+    }
   }
 
   return { log }