React中useState更新不及时，不用useEffect如何实现数组清空后导航？

已知useState的set方法不会立即更新状态，想要实现：在React Native应用中点击按钮删除数组元素，当数组为空时跳转到另一个页面。

初始代码因为状态更新异步，导致跳转逻辑无法触发；改用useEffect监听array状态虽然可行，但array在应用中被多处使用，作为依赖会触发不必要的组件渲染，因此需要更优的解决方案。

方案一：在setState的函数式更新中直接判断跳转 #

利用函数式更新可以获取当前最新状态的特性，在更新状态的同时计算新数组，直接判断是否为空并执行跳转逻辑，完全不需要依赖useEffect，也不会触发额外渲染。

修改后的Home组件代码：

import React, { useState } from "react";
import { View, Button } from "react-native";

function Home({ navigation }) {
  const [array, setArray] = useState(["X"]);

  const removeValue = () => {
    setArray((current) => {
      // 基于当前最新的状态计算新数组
      const newArray = current.filter((item) => item !== current[0]);
      // 直接判断新数组是否为空，为空则跳转
      if (newArray.length === 0) {
        navigation.navigate("About");
      }
      return newArray;
    });
  };

  return (
    <View>
      <Button title="删除并跳转" onPress={removeValue} />
    </View>
  );
}

export default Home;

说明：这里用current[0]代替原代码中的array[0]，避免了闭包捕获旧状态的问题，确保删除的是当前数组的第一个元素；同时在状态更新的逻辑内部完成跳转判断，逻辑更紧凑，也不会因为array的其他变化触发额外操作。

方案二：使用useRef跟踪数组长度变化（可选） #

如果不想把跳转逻辑放在setState内部，可以用useRef保存数组的历史长度，在useEffect中只监听“数组从非空变为空”的场景，减少不必要的渲染触发。

修改后的Home组件代码：

import React, { useState, useRef, useEffect } from "react";
import { View, Button } from "react-native";

function Home({ navigation }) {
  const [array, setArray] = useState(["X"]);
  // 用useRef保存上一次的数组长度
  const prevArrayLength = useRef(array.length);

  useEffect(() => {
    // 只有当数组从非空变为空时才执行跳转
    if (array.length === 0 && prevArrayLength.current !== 0) {
      navigation.navigate("About");
    }
    // 更新历史长度
    prevArrayLength.current = array.length;
  }, [navigation]); // 仅依赖navigation，避免array变化触发额外渲染

  const removeValue = () => {
    setArray((current) => current.filter((item) => item !== current[0]));
  };

  return (
    <View>
      <Button title="删除并跳转" onPress={removeValue} />
    </View>
  );
}

export default Home;

说明：useRef的值变化不会触发组件渲染，因此可以用来跟踪数组长度的变化；useEffect的依赖只有navigation（路由传递的navigation通常是稳定引用），不会因为array的其他修改触发不必要的useEffect执行，也不会导致组件额外渲染。

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