feat: 🎸 Major update

Author: prc5

README.md

@@ -59,6 +59,28 @@ yarn add @better-hooks/performance
 
 ## Examples
 
+#### useDeepEffect
+
+This hook deeply compares the dependencies optimizing rerendering effects
+
+```tsx
+import React from "react";
+import { useDebounce } from "@better-hooks/performance";
+
+const MyComponent: React.FC = () => {
+  const {debounce, reset, active} = useDeepEffect(() => {
+    // do something
+  }, [{a: 123}]) // <--- we will check if the deps are equal between rerenders
+
+  return (
+    // ...
+  )
+}
+
+```
+
+---
+
 #### useDebounce
 
 This hook allows debouncing of the given function. Function will be called after some amount of time

package.json

@@ -122,5 +122,8 @@
     "useThrottle",
     "useThrottleState",
     "useThrottleEffect"
-  ]
+  ],
+  "dependencies": {
+    "@better-hooks/lifecycle": "^1.1.2"
+  }
 }

src/constants/browser.ts

@@ -0,0 +1,5 @@
+export const isBrowser = !!(
+  typeof window !== "undefined" &&
+  typeof window.document !== "undefined" &&
+  typeof window.document.createElement !== "undefined"
+);

src/hooks/index.ts

@@ -1,6 +1,10 @@
 export * from "./use-debounce";
-export * from "./use-debounce-state";
 export * from "./use-debounce-effect";
+export * from "./use-debounce-state";
+export * from "./use-deep-effect";
+export * from "./use-interval";
 export * from "./use-throttle";
-export * from "./use-throttle-state";
 export * from "./use-throttle-effect";
+export * from "./use-throttle-state";
+export * from "./use-timeout";
+export * from "./use-isomorphic-effect";

src/hooks/use-debounce-effect/use-debounce-effect.hook.ts

@@ -1,9 +1,9 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import { useEffect } from "react";
 
-import { useDebounce } from "hooks/use-debounce/use-debounce.hook";
-import { UseDebounceProps } from "hooks/use-debounce/use-debounce.types";
+import { useDebounce, UseDebounceProps } from "hooks";
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const useDebounceEffect = (
   callback: () => void,
   props: UseDebounceProps,

src/hooks/use-debounce-state/use-debounce-state.hook.ts

@@ -1,10 +1,12 @@
 import { useState } from "react";
 
-import { useDebounce } from "hooks/use-debounce/use-debounce.hook";
-import { UseDebounceProps } from "hooks/use-debounce/use-debounce.types";
+import { useDebounce, UseDebounceProps } from "hooks";
 
 export const useDebounceState = <T>(initialValue: T, props?: UseDebounceProps) => {
   const { debounce } = useDebounce(props);
   const [value, setValue] = useState(initialValue);
-  return [value, (newValue: Parameters<typeof setValue>[0]) => debounce(() => setValue(newValue))];
+  return [
+    value,
+    (newValue: Parameters<typeof setValue>[0]) => debounce(() => setValue(newValue)),
+  ] as const;
 };

src/hooks/use-debounce/use-debounce.hook.ts

@@ -1,38 +1,36 @@
-import { useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef } from "react";
+import { useForceUpdate } from "@better-hooks/lifecycle";
 
-import {
-  DebounceType,
-  UseDebounceProps,
-  DebounceFunctionType,
-  UseDebounceReturnType,
-} from "./use-debounce.types";
-import { useForceUpdate } from "hooks/use-force-update";
+import { DebounceType, UseDebounceProps, DebounceFunctionType, UseDebounceReturnType } from "hooks";
 
 export const useDebounce = (props?: UseDebounceProps): UseDebounceReturnType => {
   const { delay = 400 } = props || {};
   const shouldRerenderActive = useRef(false);
   const timer = useRef<DebounceType>(null);
   const forceUpdate = useForceUpdate();
 
-  const rerenderActive = () => {
+  const rerenderActive = useCallback(() => {
     if (shouldRerenderActive.current) forceUpdate();
-  };
+  }, [forceUpdate]);
 
   const reset = () => {
     if (timer.current !== null) clearTimeout(timer.current);
     timer.current = null;
   };
 
-  const debounce: DebounceFunctionType = (callback, dynamicDelay) => {
-    const time = dynamicDelay ?? delay;
-    reset();
-    timer.current = setTimeout(() => {
-      timer.current = null;
-      callback();
+  const debounce: DebounceFunctionType = useCallback(
+    (callback, dynamicDelay) => {
+      const time = dynamicDelay ?? delay;
+      reset();
+      timer.current = setTimeout(() => {
+        timer.current = null;
+        callback();
+        rerenderActive();
+      }, time);
       rerenderActive();
-    }, time);
-    rerenderActive();
-  };
+    },
+    [delay, rerenderActive],
+  );
 
   useEffect(() => {
     return reset;

src/hooks/use-debounce/use-debounce.types.ts

@@ -1,9 +1,6 @@
 export type DebounceType = ReturnType<typeof setTimeout> | null;
 
-export type DebounceFunctionType = (
-  callback: () => void | Promise<void>,
-  dynamicDelay?: number,
-) => void;
+export type DebounceFunctionType = (callback: () => void | Promise<void>, dynamicDelay?: number) => void;
 
 export type UseDebounceReturnType = {
   debounce: DebounceFunctionType;

src/hooks/use-deep-effect/index.ts

@@ -0,0 +1 @@
+export * from "./use-deep-effect.hook";

src/hooks/use-deep-effect/use-deep-effect.hook.ts

@@ -0,0 +1,24 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+/* eslint-disable react-hooks/exhaustive-deps */
+import { useEffect, useMemo, useRef } from "react";
+
+import { isEqual } from "./use-deep-effect.utils";
+
+const memo = (value: any) => {
+  const ref = useRef(value);
+  const changed = useRef<number>(0);
+
+  if (!isEqual(value, ref.current)) {
+    ref.current = value;
+    changed.current += 1;
+  }
+
+  return useMemo(() => ref.current, [changed.current]);
+};
+
+export const useDeepEffect = (
+  callback: VoidFunction | (() => VoidFunction),
+  dependencies: any[],
+) => {
+  return useEffect(callback, memo(dependencies));
+};