移除useEffect内外无用Hook后useEffect失效，原因何在？

你遇到的问题核心是React Router的hooks（useLocation、useNavigate）会让组件订阅路由变化。当组件里用了这些hooks，路由切换（包括同路由的哈希变化）时，组件会重新渲染，进而触发没有依赖数组的useEffect（因为组件每次渲染都会执行无依赖的useEffect）。但一旦移除这些hooks，组件不再订阅路由变化，路由变动时组件不会重新渲染，useEffect自然也就不会执行了。

示例1：路由切换时滚动到顶部 #

原代码里，pathname没在useEffect里直接用，但useLocation让组件订阅了pathname的变化，路由切换时组件重新渲染，无依赖的useEffect就会执行。这种写法属于隐式依赖，正确的做法是显式把pathname作为useEffect的依赖，逻辑更清晰，也不需要依赖未使用的hooks：

import React, { useEffect } from 'react'
import { useLocation } from 'react-router-dom'

const Scroll2Top = () => {
    const { pathname } = useLocation();

    useEffect(() => {
      window.scrollTo(0, 0);
    }, [pathname]); // 显式依赖pathname，路由切换时触发

    return null;
}

export default Scroll2Top

修改后，路由切换导致pathname变化时，useEffect会自动执行，完全不需要依赖“未使用的hooks”这种投机行为。

示例2：哈希变化时切换输入框状态 #

原代码里的useNavigate是多余的，但它刚好让组件订阅了路由变化，哈希改变时组件重新渲染，useEffect才会执行。正确的做法有两种：

方法1：用useLocation的hash作为依赖 #

通过useLocation获取当前哈希，把它作为useEffect的依赖，哈希变化时自动触发逻辑：

import React, { useEffect } from 'react'
import { useLocation } from 'react-router-dom'

const YourComponent = () => {
    const { hash } = useLocation();

    useEffect(() => {
      const termsInput = document.querySelector("#terms > input");
      const claimInput = document.querySelector("#claim > input");

      if (!termsInput || !claimInput) return; // 避免DOM元素未找到报错

      switch(hash) {
        case '#terms':
          termsInput.checked = true;
          claimInput.checked = false;
          break;
        case '#privacy':
          termsInput.checked = false;
          claimInput.checked = false;
          break;
        case '#claim':
          claimInput.checked = true;
          termsInput.checked = false;
          break;
        default:
          // 处理其他哈希情况
          break;
      }
    }, [hash]); // 哈希变化时触发

    // 组件其他代码...
}

export default YourComponent

方法2：监听浏览器hashchange事件 #

如果不想用React Router的hooks，也可以直接监听浏览器原生的哈希变化事件：

import React, { useEffect } from 'react'

const YourComponent = () => {
    useEffect(() => {
      const handleHashChange = () => {
        const termsInput = document.querySelector("#terms > input");
        const claimInput = document.querySelector("#claim > input");

        if (!termsInput || !claimInput) return;

        if (window.location.hash === "#terms") {
          termsInput.checked = true;
          claimInput.checked = false;
        } else if(window.location.hash === "#privacy") {
          termsInput.checked = false;
          claimInput.checked = false;
        } else if (window.location.hash === "#claim") {
          claimInput.checked = true;
          termsInput.checked = false;
        }
      };

      // 组件挂载时先执行一次，处理初始哈希
      handleHashChange();
      // 监听哈希变化
      window.addEventListener('hashchange', handleHashChange);

      // 组件卸载时移除监听，避免内存泄漏
      return () => window.removeEventListener('hashchange', handleHashChange);
    }, []); // 空依赖，仅在挂载/卸载时执行

    // 组件其他代码...
}

export default YourComponent

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