React hooks依赖数组:一个让我加班到凌晨3点的男人

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

function InfiniteLoop() {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetchData().then(result => setData(result));
  }, [data]); // 这里会导致无限循环
}

useEffect(() => {
  fetchData().then(result => setData(result));
}, []); // ✅ 空依赖表示只在挂载时执行

function Counter() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    const interval = setInterval(() => {
      console.log(count); // ❌ 总是打印初始值0
      setCount(count + 1);
    }, 1000);
    return () => clearInterval(interval);
  }, []); // 🔴 count没有被声明为依赖
}

// 方案1：添加所有依赖
useEffect(() => {
  const interval = setInterval(() => {
    console.log(count);
    setCount(count + 1);
  }, 1000);
  return () => clearInterval(interval);
}, [count]); // ✅ count是依赖
// 方案2：使用函数式更新（推荐）
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是必要依赖
);

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：将函数移入effect内（如果不需要复用）
useEffect(() => { 
function createOptions() {...}
const options = createOptions();
}, [roomId]); 
//方案2：使用useCallback缓存函数(推荐)
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整体变化会触发不必要的effect执行 

//解构出真正需要的值作为依赖项 
const{profile:{theme}}=user;
useEffect(()=>{
updateTheme(theme); 
},[theme]);

setCount(c=>c+1)优于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"
}
}