如何避免使用React useEffect()？替代方案与正确用法探讨

首先明确：“避免使用useEffect”的说法本质是避免滥用，而非完全禁用。useEffect是React处理副作用的核心API，但很多场景下可以通过更贴合React设计模式的方式替代，下面针对你的场景逐一说明：

1. 组件加载时从服务器获取数据 #

替代方案： #

• 使用数据请求库（如React Query/SWR）：这类库封装了数据请求、缓存、重新请求等逻辑，无需手动写useEffect。
  示例：

  import { useQuery } from '@tanstack/react-query';
  
  const fetchData = async () => {
    const res = await fetch('/api/data');
    return res.json();
  };
  
  function MyComponent() {
    const { data, isLoading } = useQuery({
      queryKey: ['myData'],
      queryFn: fetchData,
    });
  
    if (isLoading) return <div>Loading...</div>;
    return <div>{data.content}</div>;
  }
  

• 服务器组件（Server Components）：如果用Next.js等支持的框架，直接在服务器组件中发起请求，数据在服务端获取后再渲染组件，完全不需要客户端副作用。
• 自定义Hook封装请求：如果不想用第三方库，可将请求逻辑封装到自定义Hook中，内部合理使用useEffect（这属于正确用法，而非滥用）：

  function useFetchData(url) {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);
  
    useEffect(() => {
      const fetchData = async () => {
        try {
          const res = await fetch(url);
          const result = await res.json();
          setData(result);
        } catch (err) {
          console.error(err);
        } finally {
          setLoading(false);
        }
      };
      fetchData();
    }, [url]);
  
    return { data, loading };
  }
  
  // 组件中使用
  function MyComponent() {
    const { data, loading } = useFetchData('/api/data');
    // ...渲染逻辑
  }
  

2. 状态变更时执行操作 #

分场景处理：

• 同步操作（状态变更后立即执行）：直接在触发状态更新的代码块中执行，无需useEffect。
  示例：

  function MyComponent() {
    const [count, setCount] = useState(0);
  
    const handleClick = () => {
      setCount(prev => prev + 1);
      // 状态变更后立即执行的操作
      console.log('count updated to', count + 1);
      updateAnalytics('count_incremented');
    };
  
    return <button onClick={handleClick}>Increment</button>;
  }
  

• 依赖状态的副作用（如DOM操作、外部API调用）：合理使用useEffect，明确依赖数组：

  function MyComponent() {
    const [width, setWidth] = useState(window.innerWidth);
  
    useEffect(() => {
      // 当width变更时，更新页面标题
      document.title = `Window Width: ${width}`;
    }, [width]);
  
    // ...其他逻辑
  }
  

• 衍生状态计算：用useMemo替代useEffect，避免不必要的副作用：

  function MyComponent() {
    const [list, setList] = useState([]);
    // 用useMemo计算筛选后的列表，而非useEffect更新状态
    const filteredList = useMemo(() => {
      return list.filter(item => item.isActive);
    }, [list]);
  
    return <ul>{filteredList.map(item => <li key={item.id}>{item.name}</li>)}</ul>;
  }
  

3. 全局状态变更时Body组件执行操作 #

基于React生态的常见方案：

• Context + useEffect：在Body组件中通过useContext获取全局状态，依赖该状态执行操作：

  // 全局Context
  const AppContext = createContext();
  
  // Header组件中更新全局状态
  function Header() {
    const { setSelectedValue } = useContext(AppContext);
    return (
      <select onChange={(e) => setSelectedValue(e.target.value)}>
        <option value="a">Option A</option>
        <option value="b">Option B</option>
      </select>
    );
  }
  
  // Body组件中监听状态变更
  function Body() {
    const { selectedValue } = useContext(AppContext);
  
    useEffect(() => {
      // 当selectedValue变更时执行操作
      fetch(`/api/data?filter=${selectedValue}`).then(res => res.json()).then(data => {
        // 处理数据
      });
    }, [selectedValue]);
  
    return <div>Body Content</div>;
  }
  

• Redux等状态管理库：用useSelector监听状态，配合useEffect执行操作：

  function Body() {
    const selectedValue = useSelector(state => state.app.selectedValue);
  
    useEffect(() => {
      // 执行对应操作
      console.log('Selected value changed to', selectedValue);
    }, [selectedValue]);
  
    // ...渲染逻辑
  }
  

如何正确使用useEffect？ #

记住几个核心原则：

• 区分渲染逻辑与副作用：能在渲染阶段完成的计算（如衍生状态、DOM渲染）绝对不要放到useEffect里。
• 只处理“渲染后必须执行”的逻辑：比如DOM操作、数据请求、外部事件订阅、第三方库初始化等。
• 明确依赖数组：不要随意留空依赖，避免闭包陷阱；用useCallback/useMemo优化依赖，或者用函数式更新解决 stale state 问题。
• 清理副作用：订阅事件、定时器、网络请求等必须在useEffect的清理函数中取消，防止内存泄漏。
• 避免重复触发：如果副作用不需要每次渲染都执行，一定要指定正确的依赖项。

内容的提问来源于stack exchange，提问作者Jamshaid Tariq