feat: 🎸 Added state and effect hooks

Author: prc5

README.md

@@ -26,9 +26,10 @@
     <img src="https://custom-icon-badges.demolab.com/npm/dm/@better-hooks/performance?logoColor=fff&logo=trending-up" />
   </a>
 </p>
+
 ## About
 
-Debounce and throttle your functions to gain performance boost!
+Debounce and throttle your functions, state and effects to gain performance boost!
 
 ## Key Features
 
@@ -38,6 +39,10 @@ Debounce and throttle your functions to gain performance boost!
 
 ✨ **Debounce and Throttle**
 
+🎊 **Lifecycle debounce and throttle**
+
+📡 **State debounce and throttle**
+
 ## Installation
 
 ```bash
@@ -56,14 +61,15 @@ yarn add @better-hooks/performance
 
 #### useDebounce
 
-This hook allows debouncing of the given function.
+This hook allows debouncing of the given function. Function will be called after some amount of time
+from the last execution. We can adjust debounce time with additional props.
 
 ```tsx
 import React from "react";
 import { useDebounce } from "@better-hooks/performance";
 
-const MyComponent: React.FC = ({ delay }) => {
-  const {debounce, reset, active} = useDebounce(delay)
+const MyComponent: React.FC = () => {
+  const {debounce, reset, active} = useDebounce({ delay: 600 })
 
   // Standard usage
   const onTyping = () => {
@@ -76,7 +82,7 @@ const MyComponent: React.FC = ({ delay }) => {
   const onTypingDynamic = (value: string, customDelay: number) => {
     debounce(() => {
       // debounced logic
-    }, customDelay)
+    }, { delay: customDelay })
   }
 
   return (
@@ -86,6 +92,57 @@ const MyComponent: React.FC = ({ delay }) => {
 
 ```
 
+---
+
+#### useDebounceState
+
+This hook allows debouncing of state. Value will be saved after some amount of time from the last
+execution of set function. We can adjust debounce time with additional props.
+
+```tsx
+import React from "react";
+import { useWindowEvent } from "@better-hooks/window";
+import { useDebounceState } from "@better-hooks/performance";
+
+const MyComponent: React.FC = () => {
+  const [value, setValue] = useDebounceState("20px")
+
+  useWindowEvent("scroll", (e) => {
+    setValue(e.scrollY + "px");
+  })
+
+  return (
+    // ...
+  )
+}
+
+```
+
+---
+
+#### useDebounceEffect
+
+This hook allows debouncing of lifecycle effect.
+
+```tsx
+import React from "react";
+import { useDebounceEffect } from "@better-hooks/performance";
+
+const MyComponent: React.FC = (props) => {
+
+  useDebounceEffect(() => {
+    // Do something
+  }, { delay: 200 }, [props])
+
+  return (
+    // ...
+  )
+}
+
+```
+
+---
+
 #### useThrottle
 
 This hook allows debouncing of the given function.
@@ -117,3 +174,74 @@ const MyComponent: React.FC = ({ delay }) => {
 }
 
 ```
+
+---
+
+#### useThrottleState
+
+This hook allows throttling of state. We can adjust execution interval time and execution timeout
+time with additional props.
+
+```tsx
+import React from "react";
+import { useWindowEvent } from "@better-hooks/window";
+import { useThrottleState } from "@better-hooks/performance";
+
+const MyComponent: React.FC = () => {
+  const [value, setValue] =  useThrottleState("20px")
+
+  useWindowEvent("scroll", (e) => {
+    setValue(e.scrollY + "px");
+  })
+
+  return (
+    // ...
+  )
+}
+
+```
+
+```tsx
+import React from "react";
+import { useWindowEvent } from "@better-hooks/window";
+import { useThrottleState } from "@better-hooks/performance";
+
+const MyComponent: React.FC = () => {
+  const [value, setValue] =  useThrottleState("20px", {
+    executionInterval: 200, // We will save values at least once per 200ms
+    executionTimeout: 400 // Last set state action will get triggered after 400ms, we can also disable it
+  })
+
+  useWindowEvent("scroll", (e) => {
+    setValue(e.scrollY + "px");
+  })
+
+  return (
+    // ...
+  )
+}
+
+```
+
+---
+
+#### useThrottleEffect
+
+This hook allows debouncing of lifecycle effect.
+
+```tsx
+import React from "react";
+import { useThrottleEffect } from "@better-hooks/performance";
+
+const MyComponent: React.FC = (props) => {
+
+   useThrottleEffect(() => {
+    // Do something
+  }, { executionInterval: 200, executionTimeout: false }, [props])
+
+  return (
+    // ...
+  )
+}
+
+```

package.json

@@ -114,20 +114,14 @@
   "keywords": [
     "react",
     "hooks",
-    "lifecycle",
-    "use",
-    "did",
-    "mount",
-    "update",
-    "unmount",
-    "render",
-    "hook",
-    "useDidMount",
-    "useDidUnmount",
-    "useDidRender",
-    "useWillUnmount"
-  ],
-  "dependencies": {
-    "@better-typed/react-lifecycle-hooks": "^1.0.5"
-  }
+    "performance",
+    "throttle",
+    "debounce",
+    "useDebounce",
+    "useDebounceState",
+    "useDebounceEffect",
+    "useThrottle",
+    "useThrottleState",
+    "useThrottleEffect"
+  ]
 }

src/hooks/index.ts

@@ -1,2 +1,6 @@
 export * from "./use-debounce";
+export * from "./use-debounce-state";
+export * from "./use-debounce-effect";
 export * from "./use-throttle";
+export * from "./use-throttle-state";
+export * from "./use-throttle-effect";

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

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

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

@@ -0,0 +1,16 @@
+/* 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";
+
+export const useDebounceEffect = (
+  callback: () => void,
+  props: UseDebounceProps,
+  dependencies: any[],
+) => {
+  const { debounce } = useDebounce(props);
+  useEffect(() => {
+    debounce(callback);
+  }, dependencies);
+};

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

@@ -0,0 +1 @@
+export * from "./use-debounce-state.hook";

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

@@ -0,0 +1,10 @@
+import { useState } from "react";
+
+import { useDebounce } from "hooks/use-debounce/use-debounce.hook";
+import { UseDebounceProps } from "hooks/use-debounce/use-debounce.types";
+
+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))];
+};

src/hooks/use-debounce/index.ts

@@ -0,0 +1,2 @@
+export * from "./use-debounce.hook";
+export * from "./use-debounce.types";

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

@@ -1,23 +1,15 @@
-import { useRef } from "react";
-import { useWillUnmount, useForceUpdate } from "@better-typed/react-lifecycle-hooks";
+import { useEffect, useRef } from "react";
 
-type DebounceType = ReturnType<typeof setTimeout> | null;
-export type DebounceFunctionType = (
-  callback: () => void | Promise<void>,
-  dynamicDelay?: number,
-) => void;
-export type UseDebounceReturnType = {
-  debounce: DebounceFunctionType;
-  reset: VoidFunction;
-  active: boolean;
-};
+import {
+  DebounceType,
+  UseDebounceProps,
+  DebounceFunctionType,
+  UseDebounceReturnType,
+} from "./use-debounce.types";
+import { useForceUpdate } from "hooks/use-force-update";
 
-/**
- * @param delay
- * @internal
- * @returns
- */
-export const useDebounce = (delay = 400): UseDebounceReturnType => {
+export const useDebounce = (props?: UseDebounceProps): UseDebounceReturnType => {
+  const { delay = 400 } = props || {};
   const shouldRerenderActive = useRef(false);
   const timer = useRef<DebounceType>(null);
   const forceUpdate = useForceUpdate();
@@ -42,7 +34,9 @@ export const useDebounce = (delay = 400): UseDebounceReturnType => {
     rerenderActive();
   };
 
-  useWillUnmount(reset);
+  useEffect(() => {
+    return reset;
+  }, []);
 
   return {
     get active() {

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

@@ -0,0 +1,16 @@
+export type DebounceType = ReturnType<typeof setTimeout> | null;
+
+export type DebounceFunctionType = (
+  callback: () => void | Promise<void>,
+  dynamicDelay?: number,
+) => void;
+
+export type UseDebounceReturnType = {
+  debounce: DebounceFunctionType;
+  reset: VoidFunction;
+  active: boolean;
+};
+
+export type UseDebounceProps = {
+  delay?: number;
+};