react解决 Hooks 闭包陷阱的问题

import { useState } from 'react';
export default function Demo() {
  const [count, setCount] = useState(0);
  const handleClick = () => {
    setTimeout(() => {
      console.log(count); // 永远打印点击时的 count
    }, 3000);
  };
  return (
    <>
      <button onClick={() => setCount(count + 1)}>
        +1
      </button>
      <button onClick={handleClick}>
        延迟打印
      </button>
    </>
  );
}

setCount(count + 1);
setCount(count + 1);
console.log(count); // +1

setCount(prev => prev + 1);
setCount(prev => prev + 1);
console.log(count); // +2

setInterval(() => {
   setCount(prev => prev + 1);
},1000);

setCount(count + 1); // count 永远旧 

import { useRef, useState, useEffect } from 'react';
export default function Demo() {
  const [count, setCount] = useState(0);
  const countRef = useRef(count);
  useEffect(() => {
    countRef.current = count;
  }, [count]);
  const handleClick = () => {
    setTimeout(() => {
      console.log(countRef.current);
    }, 3000);
  };
  return (
      <>
          <button onClick={() => setCount(count+1)}>
             +1
          </button>
          <button onClick={handleClick}>
             打印
          </button>
      </>
  );
}

useEffect(() => {
   getData(id);
}, []);

useEffect(() => {
   getData(id);
}, [id]);

react-hooks/exhaustive-deps 

// eslint-disable-next-line 

const getUser = useCallback(() => {
    console.log(id);
}, []);

const getUser = useCallback(() => {
    console.log(id);
}, [id]);

useEffect(() => {
   const timer=setInterval(()=>{
      fetchData(page);
   },1000)
   return ()=>clearInterval(timer)
},[])

function useLatest(value){
   const ref=useRef(value);
   useEffect(()=>{
      ref.current=value;
   },[value])
   return ref;
}

const pageRef = useLatest(page);
useEffect(() => {
   const timer = setInterval(() => {
      fetchData(pageRef.current);
   },1000);
   return ()=>clearInterval(timer);
},[])

const onVisit = useEffectEvent(() => {
   console.log(count);
});
useEffect(()=>{
   window.addEventListener('click',onVisit)
   return ()=>{
      window.removeEventListener('click',onVisit)
   }
},[])