@orca-fe/hooks/es/utils/createEffectWithTarget.js

React Hooks Collections

// Copy from ahooks

import { useEffect, useRef } from 'react';
import depsAreSame from "./depsAreSame";
import { getTargetElement } from "./domTarget";
var createEffectWithTarget = useEffectType => {
  /**
   *
   * @param effect
   * @param deps
   * @param target target should compare ref.current vs ref.current, dom vs dom, ()=>dom vs ()=>dom
   */
  var useEffectWithTarget = (effect, deps, target) => {
    var hasInitRef = useRef(false);
    var lastElementRef = useRef([]);
    var lastDepsRef = useRef([]);
    var unLoadRef = useRef();
    useEffectType(() => {
      var targets = Array.isArray(target) ? target : [target];
      var els = targets.map(item => getTargetElement(item));

      // init run
      if (!hasInitRef.current) {
        hasInitRef.current = true;
        lastElementRef.current = els;
        lastDepsRef.current = deps;
        unLoadRef.current = effect();
        return;
      }
      if (els.length !== lastElementRef.current.length || !depsAreSame(els, lastElementRef.current) || !depsAreSame(deps, lastDepsRef.current)) {
        var _unLoadRef$current;
        (_unLoadRef$current = unLoadRef.current) === null || _unLoadRef$current === void 0 || _unLoadRef$current.call(unLoadRef);
        lastElementRef.current = els;
        lastDepsRef.current = deps;
        unLoadRef.current = effect();
      }
    });
    useEffect(() => () => {
      var _unLoadRef$current2;
      (_unLoadRef$current2 = unLoadRef.current) === null || _unLoadRef$current2 === void 0 || _unLoadRef$current2.call(unLoadRef);
      // for react-refresh
      hasInitRef.current = false;
    }, []);
  };
  return useEffectWithTarget;
};
export default createEffectWithTarget;