DOM processing in ahooks

  
 
 

   
  
  
const createEffectWithTarget = (useEffectType: typeof useEffect | typeof useLayoutEffect) => {/**
   
  
  
* @param effect
   
  
  
* @param deps
   
  
  
* @param target target should compare ref.current vs ref.current, dom vs dom, ()=>dom vs ()=>dom
   
  
  
*/
   
  
  
const useEffectWithTarget = (
   
  
  
effect: EffectCallback,
   
  
  
deps: DependencyList,
   
  
  
target: BasicTarget| BasicTarget[],
   
  
  
) => {
   
  
  
const hasInitRef = useRef(false);
   
  
  
const lastElementRef = useRef<(Element | null)[]>([]);
   
  
  
const lastDepsRef = useRef([]);
   
  
  
const unLoadRef = useRef();
   
  
  
// useEffect  perhaps  useLayoutEffect
   
  
  
useEffectType(() => {
   
  
  
//  Handle  DOM  Target element 
   
  
  
const targets = Array.isArray(target) ? target : [target];
   
  
  
const els = targets.map((item) => getTargetElement(item));
   
  
  
// init run
   
  
  
//  Execute at the first initialization 
   
  
  
if (!hasInitRef.current) {
   
  
  
hasInitRef.current = true;
   
  
  
lastElementRef.current = els;
   
  
  
lastDepsRef.current = deps;
   
  
  
//  Execute... In the callback  effect  function 
   
  
  
unLoadRef.current = effect();
   
  
  
return;
   
  
  
}
   
  
  
//  Logic not executed for the first time 
   
  
  
if (
   
  
  
//  The target element or dependency changes 
   
  
  
els.length !== lastElementRef.current.length ||
   
  
  
!depsAreSame(els, lastElementRef.current) ||
   
  
  
!depsAreSame(deps, lastDepsRef.current)
   
  
  
) {
   
  
  
//  Execute the last returned result 
   
  
  
unLoadRef.current?.();
   
  
  
//  to update 
   
  
  
lastElementRef.current = els;
   
  
  
lastDepsRef.current = deps;
   
  
  
unLoadRef.current = effect();
   
  
  
}
   
  
  
});
   
  
  
useUnmount(() => {
   
  
  
//  uninstall 
   
  
  
unLoadRef.current?.();
   
  
  
// for react-refresh
   
  
  
hasInitRef.current = false;
   
  
  
});
   
  
  
};
   
  
  
return useEffectWithTarget;
   
  
  
};