feat: 🎸 Added useDidChange hook

Author: prc5

README.md

@@ -17,10 +17,13 @@
     <img src="https://custom-icon-badges.demolab.com/badge/typescript-%23007ACC.svg?logo=typescript&logoColor=white" />
   </a>
   <a href="https://www.npmjs.com/package/@better-hooks/lifecycle">
-    <img src="https://custom-icon-badges.demolab.com/bundlephobia/min/@better-hooks/lifecycle?color=64BC4B&logo=package" />
+    <img src="https://custom-icon-badges.demolab.com/npm/v/@better-hooks/lifecycle.svg?logo=npm&color=E10098" />
   </a>
   <a href="https://www.npmjs.com/package/@better-hooks/lifecycle">
-    <img src="https://custom-icon-badges.demolab.com/npm/v/@better-hooks/lifecycle.svg?logo=npm&color=E10098" />
+    <img src="https://custom-icon-badges.demolab.com/bundlephobia/minzip/@better-hooks/lifecycle?color=blueviolet&logo=package" />
+  </a>
+  <a href="https://www.npmjs.com/package/@better-hooks/lifecycle">
+    <img src="https://custom-icon-badges.demolab.com/npm/dm/@better-hooks/lifecycle?logoColor=fff&logo=trending-up" />
   </a>
 </p>
 
@@ -36,6 +39,8 @@ React lifecycle turned into dev friendly and readable hooks
 
 💎 **No external dependencies**
 
+🪄 **Increases code readability**
+
 ## Installation
 
 ```bash
@@ -54,9 +59,17 @@ yarn add @better-hooks/lifecycle
 
 ```tsx
 import React from "react";
-import { useDidMount, useDidRender, useDidUpdate, useWillUnmount,useIsMounted, useWillMount } from "@better-hooks/lifecycle";
-
-const MyComponent: React.FC = () => {
+import {
+  useDidMount,
+  useDidUpdate,
+  useWillUnmount,
+  useIsMounted,
+  useWillMount,
+  useForceUpdate,
+  useDidChange
+} from "@better-hooks/lifecycle";
+
+const MyComponent: React.FC = (props) => {
   const [isOpen, setIsOpen] = React.useState(false)
 
   // returns ref with the mounted boolean state
@@ -75,11 +88,6 @@ const MyComponent: React.FC = () => {
     // ...
   })
 
-  // Called second, when initial DOM changes are triggered
-  useDidRender(() => {
-    // ...
-  })
-
   // Called when isOpen change
   useDidUpdate(() => {
     // ...
@@ -90,6 +98,13 @@ const MyComponent: React.FC = () => {
     // ...
   }, [isOpen], true)
 
+  // Called when dependencies change, we can inspect previous dependencies
+  useDidChange((prevProps) => {
+    if(prevProps.value !== props.value) {
+      // ...
+    }
+  }, [props], true)
+
   // Called last
   useWillUnmount(() => {
     // ...

src/hooks/use-did-change.hook.ts

@@ -0,0 +1,23 @@
+import { useEffect, useRef } from "react";
+
+export const useDidChange = <T extends any[]>(
+  callback: VoidFunction | ((previousDependencies: T | null) => VoidFunction),
+  dependencies: T,
+  useOnMount = false,
+) => {
+  const prev = useRef<T | null>(null);
+  const mountRef = useRef(useOnMount);
+
+  useEffect(() => {
+    if (!mountRef.current) {
+      mountRef.current = true;
+      return;
+    }
+
+    return () => {
+      callback(prev.current);
+      prev.current = dependencies;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, dependencies);
+};

src/hooks/use-did-mount.hook.ts

@@ -1,4 +1,6 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import { useEffect } from "react";
 
-export const useDidMount = (callback: VoidFunction | (() => VoidFunction)) =>
+export const useDidMount = (callback: VoidFunction | (() => VoidFunction)) => {
   useEffect(callback, []);
+};

src/hooks/use-did-render.hook.ts

@@ -1,15 +1,16 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import { useEffect, useRef } from "react";
 
 export const useDidUpdate = (
   callback: VoidFunction | (() => VoidFunction),
   dependencies: any[],
   useOnMount = false,
 ) => {
-  const didMountRef = useRef(useOnMount);
+  const mountRef = useRef(useOnMount);
 
   useEffect(() => {
-    if (!didMountRef.current) {
-      didMountRef.current = true;
+    if (!mountRef.current) {
+      mountRef.current = true;
       return;
     }
 

src/hooks/use-did-update.hook.ts

@@ -1,3 +1,6 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import { useEffect } from "react";
 
-export const useWillUnmount = (callback: VoidFunction) => useEffect(() => callback, []);
+export const useWillUnmount = (callback: VoidFunction) => {
+  useEffect(() => callback, []);
+};