function Example() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]); // count就是被追蹤的依賴(lài)
}

function InfiniteLoop() {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetchData().then(result => setData(result));
  }, [data]); // 這里會(huì)導(dǎo)致無(wú)限循環(huán)
}

useEffect(() => {
  fetchData().then(result => setData(result));
}, []); // ? 空依賴(lài)表示只在掛載時(shí)執(zhí)行

function Counter() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    const interval = setInterval(() => {
      console.log(count); // ? 總是打印初始值0
      setCount(count + 1);
    }, 1000);
    return () => clearInterval(interval);
  }, []); // ?? count沒(méi)有被聲明為依賴(lài)
}

// 方案1：添加所有依賴(lài)
useEffect(() => {
  const interval = setInterval(() => {
    console.log(count);
    setCount(count + 1);
  }, 1000);
  return () => clearInterval(interval);
}, [count]); // ? count是依賴(lài)
// 方案2：使用函數(shù)式更新（推薦）
useEffect(() => {
  const interval = setInterval(() => {
    console.log(count);
    setCount(c => c + 1); // ? c總是最新值
  }, 1000);
}, []); // ? effect不需要讀取外部作用域的count

function ProductList({ products }) {
const filterProducts = useCallback(
() => products.filter(p => p.price >100),
[] // ? missing products dependency 
);
return <ExpensiveComponent filterProducts={filterProducts} />
}

const filterProducts = useCallback(
() => products.filter(p => p.price >100),
[products] // ? products是必要依賴(lài)
);

function ChatRoom({ roomId }) {
const [message, setMessage] = useState('');
function createOptions() { 
return { 
roomId,
serverUrl: 'https://localhost:1234'
};
}
useEffect(() => { 
const options = createOptions();
// connect to server...
}, [createOptions]); // ?? createOptions在每次渲染都不同
}

//方案1：將函數(shù)移入effect內(nèi)（如果不需要復(fù)用）
useEffect(() => { 
function createOptions() {...}
const options = createOptions();
}, [roomId]); 
//方案2：使用useCallback緩存函數(shù)(推薦)
const createOptions = useCallback(()=>{
return { roomId,... }
},[roomId]);
useEffect(()=>{
const options=createOptions();
},[createOptions]);

const user={
id:1,
name:'Alice',
profile:{avatar:'...',theme:'dark'},
preferences:{...}
};
useEffect(()=>{
updateTheme(user.profile.theme); 
},[user]); // ?? user整體變化會(huì)觸發(fā)不必要的effect執(zhí)行 

//解構(gòu)出真正需要的值作為依賴(lài)項(xiàng) 
const{profile:{theme}}=user;
useEffect(()=>{
updateTheme(theme); 
},[theme]);

setCount(c=>c+1)優(yōu)于setCount(count+1)

//不好的做法:
useEffect(()=>{A();B();},[x,y,z]);
//好的做法:
useEffect(A,[x,y]);
useEffect(B,[z]);

{
"plugins":["react-hooks"],
"rules":{
"react-hooks/rules-of-hooks":"error",
"react-hooks/exhaustive-deps":"warn"
}
}