React切换桌面/移动端组件时触发useEffect报钩子数量不符错误

我没有使用媒体查询，而是根据屏幕宽度状态渲染不同的桌面端和移动端组件。其中HomeSection组件用于展示实时年龄，包含一个每秒调用的useEffect钩子来更新年龄。移除该钩子后，组件切换正常；但保留时，切换后钩子触发会出现“Rendered fewer hooks than expected”错误，若将timer改为10000，应用会在10秒后崩溃。

代码如下：

function HomeSection() {
  const timer = 1000;
  const [myAge, setAge] = useState();

  //this useEffect hook gets called every second to update my age on the page if i remove 
  //this hook the switch from desktop to mobile works without giving any errors. but when 
  //i have this in i get "Rendered fewer hooks than expected" when i have switched from desktop to mobile and this hook is called
  useEffect(() => {
    const interval = setInterval(() => {
      setAge(getAge("2000/01/01"));
      console.log(" hello world");
    }, timer);
    return () => clearInterval(interval);
  }, []);
  ....
  //function to calculate age
  function getAge(date) {
    let months = " month ";
    let days = " day ";
    let hours = " hour ";
    let minutes = " minute ";
    let seconds = " second ";

    var today = new Date();
    var birthDate = new Date(date);
    var YearDiff = today.getYear() - birthDate.getYear();
    var monthDiff = today.getMonth() - birthDate.getMonth();
    if (monthDiff > 1) {
      months = " months ";
    }
    var myDay = new Date(today.getFullYear(), today.getMonth() + 1, 0).getDate();
    var testing = myDay + today.getDate();
    var daysDiff = testing - birthDate.getDate();
    if (daysDiff > 1) {
      days = " days ";
    }
    var hoursDiff = today.getHours() - birthDate.getHours();
    if (hoursDiff > 1) {
      hours = " hours ";
    }
    var minDiff = today.getMinutes() - birthDate.getMinutes();
    if (minDiff > 1) {
      minutes = " minutes ";
    }
    var secDiff = today.getSeconds() - birthDate.getSeconds();
    if (secDiff > 1) {
      seconds = " seconds ";
    }

    var Age =
      YearDiff +
      " years " +
      monthDiff +
      months +
      daysDiff +
      days +
      hoursDiff +
      hours +
      minDiff +
      minutes +
      secDiff +
      seconds;
    return Age;
  }

  return (
    <div className="Section" id="homePage">
      <h1 className="helloworld">Hello World</h1>

      <h2> i am {myAge}</h2>
    </div>
  );
}

问题原因 #

这个错误的核心是Hook调用顺序被破坏。React要求组件每次渲染时，Hook的调用顺序必须完全一致。当切换桌面/移动端组件时，HomeSection可能在某次渲染中未被渲染（比如移动端不加载该组件），但之前设置的定时器仍在运行，触发setAge时会尝试更新已卸载或不再渲染的组件状态，导致后续渲染中Hook数量和顺序不匹配，进而抛出错误。

解决办法 #

1. 完善定时器清理逻辑，避免卸载后更新状态
   在useEffect中添加组件挂载状态判断，确保只有组件挂载时才更新状态，同时将timer加入依赖数组（保证依赖变化时重新创建定时器）：

   useEffect(() => {
     let isMounted = true;
     const interval = setInterval(() => {
       if (isMounted) {
         setAge(getAge("2000/01/01"));
         console.log(" hello world");
       }
     }, timer);
     return () => {
       isMounted = false;
       clearInterval(interval);
     };
   }, [timer]);
   

2. 保证组件切换时Hook调用的一致性
   检查桌面/移动端组件的渲染逻辑，确保HomeSection要么始终渲染，要么完全卸载，避免条件渲染导致Hook调用数量或顺序混乱。例如，若移动端不需要该组件，切换时要确保它被彻底卸载，而非部分渲染。

3. 修正年龄计算逻辑（可选）
   原getAge函数存在日期计算错误（如废弃的getYear()、天数计算逻辑错误），可修正为更准确的实现：

   function getAge(date) {
     let months = " month ";
     let days = " day ";
     let hours = " hour ";
     let minutes = " minute ";
     let seconds = " second ";
   
     const today = new Date();
     const birthDate = new Date(date);
     let yearDiff = today.getFullYear() - birthDate.getFullYear();
     let monthDiff = today.getMonth() - birthDate.getMonth();
     let dayDiff = today.getDate() - birthDate.getDate();
     let hourDiff = today.getHours() - birthDate.getHours();
     let minDiff = today.getMinutes() - birthDate.getMinutes();
     let secDiff = today.getSeconds() - birthDate.getSeconds();
   
     // 处理时间差为负数的情况
     if (secDiff < 0) {
       secDiff += 60;
       minDiff--;
     }
     if (minDiff < 0) {
       minDiff += 60;
       hourDiff--;
     }
     if (hourDiff < 0) {
       hourDiff += 24;
       dayDiff--;
     }
     if (dayDiff < 0) {
       const lastMonthDays = new Date(today.getFullYear(), today.getMonth(), 0).getDate();
       dayDiff += lastMonthDays;
       monthDiff--;
     }
     if (monthDiff < 0) {
       monthDiff += 12;
       yearDiff--;
     }
   
     // 调整单复数
     if (monthDiff !== 1) months = " months ";
     if (dayDiff !== 1) days = " days ";
     if (hourDiff !== 1) hours = " hours ";
     if (minDiff !== 1) minutes = " minutes ";
     if (secDiff !== 1) seconds = " seconds ";
   
     return `${yearDiff} years ${monthDiff}${months}${dayDiff}${days}${hourDiff}${hours}${minDiff}${minutes}${secDiff}${seconds}`;
   }
   

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