11. customize hooks

1. Only when the component is initialized Hook.

import {
     useEffect } from 'react';
import {
     isFunction } from '@src/utils/type';

export default function useMount(func) {
    
  if (process.env.NODE_ENV === 'development') {
    
    if (!isFunction(func)) {
    
      console.error(`useMount: parameter \`fn\` expected to be a function, but got "${
      typeof func}".`);
    }
  }

  useEffect(() => {
    
    func?.();
  }, []);
}

2. Returns the current latest value Hook, Closure problems can be avoided .

import {
     useRef } from 'react';

function useLatest(value) {
    
  const ref = useRef(value);
  ref.current = value;
  return ref;
}

export default useLatest;

3. throttle hook

import {
     throttle } from 'lodash';
import {
     useMemo } from 'react';
import {
     isFunction } from '@src/utils/type';
import useLatest from '../useLatest';
import useUnmount from '../useUnMount';

function useThrottleFn(fn, options) {
    
  if (process.env.NODE_ENV === 'development') {
    
    if (!isFunction(fn)) {
    
      console.error(`useThrottleFn expected parameter is a function, got ${
      typeof fn}`);
    }
  }
  const fnRef = useLatest(fn);

  const wait = options?.wait ?? 1000;

  const debounced = useMemo(
    () =>
      throttle(
        (...args) => {
    
          fnRef.current(...args);
        },
        wait,
        options,
      ),
    [],
  );

  useUnmount(() => {
    
    debounced.cancel();
  });

  return {
    
    run: debounced,
    cancel: debounced.cancel,
    flush: debounced.flush,
  };
}
export default useThrottleFn;

4. Shake proof hook

import {
     debounce } from 'lodash';
import {
     useMemo } from 'react';

import {
     isFunction } from '@src/utils';
import useLatest from '../useLatest';
import useUnmount from '../useUnMount';

/** * @description:  Used to handle anti shake hook * @param {Function} fn:  Functions that require anti shake execution  * @param {Object} options:  Configure anti shake behavior  * wait:  Waiting time  * maxWait:  Maximum waiting time  * @return {Object} * run:  Trigger execution  fn, Function arguments will be passed to  fn * cancel:  Remove Anti shake  * flush:  Immediately call the current anti shake function  */
function useDebounceFn(fn, options) {
    
  if (process.env.NODE_ENV === 'development') {
    
    if (!isFunction(fn)) {
    
      console.error(`useDebounceFn expected parameter is a function, got ${
      typeof fn}`);
    }
  }

  const fnRef = useLatest(fn);

  const wait = options?.wait ?? 1000;

  const debounced = useMemo(
    () =>
      debounce(
        (...args) => {
    
          fnRef.current(...args);
        },
        wait,
        options,
      ),
    [],
  );

  useUnmount(() => {
    
    debounced.cancel();
  });

  return {
    
    run: debounced,
    cancel: debounced.cancel,
    flush: debounced.flush,
  };
}

export default useDebounceFn;

5. It can be done to effect Array dependent for deep comparison hook

import {
     useEffect, useRef } from 'react';
import {
     isEqual } from 'lodash';

const depsEqual = (aDeps, bDeps) => isEqual(aDeps, bDeps);

function createDeepCompareEffect(hook) {
    
  return (effect, deps) => {
    
    const ref = useRef();
    const signalRef = useRef(0);

    if (deps === undefined || !depsEqual(deps, ref.current)) {
    
      ref.current = deps;
      signalRef.current += 1;
    }
    hook(effect, [signalRef.current]);
  };
}

export default createDeepCompareEffect(useEffect);