feat: Split string

src/hooks/index.ts

@@ -0,0 +1,4 @@
+export {default as useDebounce} from "./useDebounce";
+export {default as useTimeout} from "./useTimeout";
+export {default as usePrevious} from "./usePrevious";
+export {default as useUpdateEffect} from "./useUpdateEffect";

src/hooks/useDebounce.ts

@@ -0,0 +1,38 @@
+import {useCallback, useEffect, useRef} from "react";
+import _ from "lodash";
+
+/**
+ * Debounce hook.
+ * @param {T} callback
+ * @param {number} delay
+ * @returns {T}
+ */
+function useDebounce<T extends (...args: never[]) => void>(
+  callback: T,
+  delay: number,
+): T {
+  const callbackRef = useRef<T>(callback);
+
+  // Update the current callback each time it changes.
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+
+  const debouncedFn = useCallback(
+    _.debounce((...args: never[]) => {
+      callbackRef.current(...args);
+    }, delay),
+    [delay],
+  );
+
+  useEffect(() => {
+    // Cleanup function to cancel any pending debounced calls
+    return () => {
+      debouncedFn.cancel();
+    };
+  }, [debouncedFn]);
+
+  return debouncedFn as unknown as T;
+}
+
+export default useDebounce;

src/hooks/usePrevious.ts

@@ -0,0 +1,19 @@
+import { useEffect, useRef } from "react";
+
+/**
+ * The usePrevious function is a custom hook that returns the previous value of a variable.
+ * It takes in a value as a parameter and returns the previous value.
+ */
+function usePrevious<T>(value: T): T | undefined {
+  const ref = useRef<T | undefined>();
+
+  // Store current value in ref
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+
+  // Return previous value (happens before update in useEffect above)
+  return ref.current;
+}
+
+export default usePrevious;

src/hooks/useTimeout.ts

@@ -0,0 +1,30 @@
+import { useEffect, useRef } from "react";
+
+/**
+ * The useTimeout function is a custom hook that sets a timeout for a given callback function.
+ * It takes in a callback function and a delay time in milliseconds as parameters.
+ * It returns nothing.
+ */
+function useTimeout(callback: () => void, delay: number) {
+  const callbackRef = useRef(callback);
+
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+
+  useEffect(() => {
+    let timer: NodeJS.Timeout | undefined;
+
+    if (delay !== null && callback && typeof callback === "function") {
+      timer = setTimeout(callbackRef.current, delay);
+    }
+
+    return () => {
+      if (timer) {
+        clearTimeout(timer);
+      }
+    };
+  }, [callback, delay]);
+}
+
+export default useTimeout;

src/hooks/useUpdateEffect.ts

@@ -0,0 +1,19 @@
+import { DependencyList, EffectCallback, useEffect, useRef } from "react";
+
+/**
+ * The useUpdateEffect function is a custom hook that behaves like useEffect, but only runs on updates and not on initial mount.
+ * It takes in an effect function and an optional dependency list as parameters.
+ * It returns nothing.
+ */
+const useUpdateEffect = (effect: EffectCallback, deps?: DependencyList) => {
+  const isInitialMount = useRef(true);
+
+  useEffect(() => {
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+    }
+    return effect();
+  }, deps);
+};
+
+export default useUpdateEffect;