feat: 🎸 Major update

BREAKING CHANGE: 🧨 structure and hooks names changes

Author: prc5

src/hooks/index.ts

@@ -0,0 +1,9 @@
+export * from "./use-deps-change";
+export * from "./use-did-mount";
+export * from "./use-did-update";
+export * from "./use-force-update";
+export * from "./use-is-mounted";
+export * from "./use-layout-mount";
+export * from "./use-layout-update";
+export * from "./use-will-mount";
+export * from "./use-will-unmount";

src/hooks/use-deps-change/index.ts

@@ -0,0 +1 @@
+export * from "./use-deps-change.hook";

src/hooks/use-did-change.hook.ts renamed to src/hooks/use-deps-change/use-deps-change.hook.ts

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from "react";
 
-export const useDidChange = <T extends unknown[]>(
-  callback: (previousDependencies: T | null) => void,
+export const useDepsChange = <T extends any[]>(
+  callback: VoidFunction | ((previousDependencies: T | null) => VoidFunction),
   dependencies: T,
   useOnMount = false,
 ) => {

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

@@ -0,0 +1 @@
+export * from "./use-did-mount.hook";

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

@@ -0,0 +1,13 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { useEffect, useRef } from "react";
+
+export const useDidMount = (callback: VoidFunction | (() => VoidFunction)) => {
+  const mounted = useRef(false);
+
+  useEffect(() => {
+    if (!mounted.current) {
+      mounted.current = true;
+      return callback();
+    }
+  }, []);
+};

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

@@ -0,0 +1 @@
+export * from "./use-did-update.hook";

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

@@ -2,8 +2,9 @@
 import { useEffect, useRef } from "react";
 
 export const useDidUpdate = (
-  callback: () => void,
-  dependencies: readonly unknown[],
+  callback: VoidFunction | (() => VoidFunction),
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  dependencies: any[],
   useOnMount = false,
 ) => {
   const mountRef = useRef(useOnMount);

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

@@ -0,0 +1 @@
+export * from "./use-force-update.hook";

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

@@ -0,0 +1,9 @@
+import { useCallback, useState } from "react";
+
+export const useForceUpdate = () => {
+  const [, rerender] = useState(0);
+
+  return useCallback(() => {
+    rerender((prev) => prev + 1);
+  }, []);
+};

src/hooks/use-force-update/index.ts

@@ -0,0 +1 @@
+export * from "./use-is-mounted.hook";

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

@@ -8,5 +8,5 @@ export const useIsMounted = () => {
       componentIsMounted.current = false;
     };
   }, []);
-  return componentIsMounted.current;
+  return componentIsMounted;
 };

src/hooks/use-is-mounted/index.ts

@@ -0,0 +1 @@
+export * from "./use-layout-mount.hook";

src/hooks/use-is-mounted.hook.ts renamed to src/hooks/use-is-mounted/use-is-mounted.hook.ts

@@ -0,0 +1,13 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { useLayoutEffect, useRef } from "react";
+
+export const useLayoutMount = (callback: VoidFunction | (() => VoidFunction)) => {
+  const mounted = useRef(false);
+
+  useLayoutEffect(() => {
+    if (!mounted.current) {
+      mounted.current = true;
+      return callback();
+    }
+  }, []);
+};

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

@@ -0,0 +1 @@
+export * from "./use-layout-update.hook";

src/hooks/use-layout-mount/index.ts

@@ -0,0 +1,20 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { useLayoutEffect, useRef } from "react";
+
+export const useLayoutUpdate = (
+  callback: VoidFunction | (() => VoidFunction),
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  dependencies: any[],
+  useOnMount = false,
+) => {
+  const mountRef = useRef(useOnMount);
+
+  useLayoutEffect(() => {
+    if (!mountRef.current) {
+      mountRef.current = true;
+      return;
+    }
+
+    return callback();
+  }, dependencies);
+};

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

@@ -0,0 +1 @@
+export * from "./use-will-mount.hook";

src/hooks/use-layout-update/index.ts

@@ -0,0 +1,11 @@
+import { useRef } from "react";
+
+export const useWillMount = (callback: VoidFunction) => {
+  const willMount = useRef(true);
+
+  if (willMount.current) {
+    callback();
+  }
+
+  willMount.current = false;
+};

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

@@ -0,0 +1 @@
+export * from "./use-will-unmount.hook";

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

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

src/hooks/use-will-mount/index.ts

@@ -1,10 +1 @@
-// export * from "./lib" // export library entry point
-
-export * from "./hooks/use-force-update.hook";
-export * from "./hooks/use-will-mount.hook";
-export * from "./hooks/use-did-mount.hook";
-export * from "./hooks/use-did-change.hook";
-export * from "./hooks/use-did-update.hook";
-export * from "./hooks/use-will-unmount.hook";
-export * from "./hooks/use-is-mounted.hook";
-export * from "./hooks/use-isomorphic-effect.hook";
+export * from "./hooks";