React Native中useEffect内调用useTimer出现Invalid hook call错误如何解决

问题根源 #

你遇到的报错是违反了React Hook的核心调用规则：所有Hook必须在函数组件/自定义Hook的顶层作用域调用，不能嵌套在useEffect、条件判断、循环等逻辑块内。

解决方案 #

react-use-precision-timer提供的useTimer会返回计时器控制器，你只需要将useTimer提到useBreath自定义Hook的顶层调用，关闭自动启动，再在useEffect内手动触发计时器启动即可。

import React from "react";
import { View, Text } from "react-native";
import { useTimer } from "react-use-precision-timer";

const stateTransistions = {
  in: 'out',
  out: 'in'
}

export const useBreath = () => {
  const [breathState, setBreathState] = React.useState(stateTransistions.in)
  // 将useTimer移到Hook顶层调用
  const breathTimer = useTimer({
    startImmediately: false, // 关闭自动启动，手动控制启动时机
    runOnce: true,
    delay: 1000,
    // 用函数式更新避免闭包问题，不需要依赖breathState
    callback: () => {
      setBreathState(prevState => stateTransistions[prevState])
    },
  });

  React.useEffect(() => {
    // 每次呼吸状态变化后启动计时器
    breathTimer.start()
    // 组件卸载/状态更新前清理计时器，避免内存泄漏
    return () => breathTimer.stop()
  }, [breathState, breathTimer]);

  return {
    breathState,
  };
};

export default function TabOneScreen() {
  const { breathState } = useBreath()
  return (
    <View>
      <Text>{breathState}</Text>
    </View>
  );
}

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