diff --git a/src/useDeepCompareEffect.ts b/src/useDeepCompareEffect.ts index 14c08c4ff0..710b8c6d09 100644 --- a/src/useDeepCompareEffect.ts +++ b/src/useDeepCompareEffect.ts @@ -1,20 +1,23 @@ -import { DependencyList, EffectCallback } from 'react'; -import useCustomCompareEffect from './useCustomCompareEffect'; -import isDeepEqual from './misc/isDeepEqual'; +import { DependencyList, EffectCallback } from "react"; +import useCustomCompareEffect from "./useCustomCompareEffect"; +import isDeepEqual from "./misc/isDeepEqual"; const isPrimitive = (val: any) => val !== Object(val); const useDeepCompareEffect = (effect: EffectCallback, deps: DependencyList) => { - if (process.env.NODE_ENV !== 'production') { + if (process.env.NODE_ENV !== "production") { if (!(deps instanceof Array) || !deps.length) { console.warn( - '`useDeepCompareEffect` should not be used with no dependencies. Use React.useEffect instead.' + "`useDeepCompareEffect` should not be used with no dependencies. Use React.useEffect instead." ); } - if (deps.every(isPrimitive)) { + const allPrimitive = deps.every(isPrimitive); + const hasSingleDep = deps.length === 1; + + if (allPrimitive && !hasSingleDep) { console.warn( - '`useDeepCompareEffect` should not be used with dependencies that are all primitive values. Use React.useEffect instead.' + "`useDeepCompareEffect` should not be used with dependencies that are all primitive values. Use React.useEffect instead." ); } } diff --git a/tests/useDeepCompareEffect.test.ts b/tests/useDeepCompareEffect.test.ts index d76897772a..5366938c21 100644 --- a/tests/useDeepCompareEffect.test.ts +++ b/tests/useDeepCompareEffect.test.ts @@ -1,6 +1,6 @@ -import { renderHook } from '@testing-library/react-hooks'; -import { useDeepCompareEffect } from '../src'; -import { useEffect } from 'react'; +import { renderHook } from "@testing-library/react-hooks"; +import { useDeepCompareEffect } from "../src"; +import { useEffect } from "react"; let options = { max: 10 }; const mockEffectNormal = jest.fn(); @@ -8,7 +8,7 @@ const mockEffectDeep = jest.fn(); const mockEffectCleanup = jest.fn(); const mockEffectCallback = jest.fn().mockReturnValue(mockEffectCleanup); -it('should run provided object once', () => { +it("should run provided object once", () => { const { rerender: rerenderNormal } = renderHook(() => useEffect(mockEffectNormal, [options])); const { rerender: rerenderDeep } = renderHook(() => useDeepCompareEffect(mockEffectDeep, [options]) @@ -32,10 +32,24 @@ it('should run provided object once', () => { expect(mockEffectDeep).toHaveBeenCalledTimes(1); }); -it('should run clean-up provided on unmount', () => { +it("should run clean-up provided on unmount", () => { const { unmount } = renderHook(() => useDeepCompareEffect(mockEffectCallback, [options])); expect(mockEffectCleanup).not.toHaveBeenCalled(); unmount(); expect(mockEffectCleanup).toHaveBeenCalledTimes(1); }); + +it("does not warn when a single primitive dependency is used", () => { + const warnSpy = jest.spyOn(console, "warn").mockImplementation(() => {}); + + const effect = jest.fn(); + + renderHook(() => useDeepCompareEffect(effect, [undefined])); + + expect(warnSpy).not.toHaveBeenCalledWith( + "`useDeepCompareEffect` should not be used with dependencies that are all primitive values. Use React.useEffect instead." + ); + + warnSpy.mockRestore(); +});