如何在isConnected首次确定值时仅执行一次useEffect？代码优化咨询

你的代码实现是完全正确的，逻辑精准匹配需求：只有当isConnected从初始的null首次切换为true或false时，才会执行functionOne()和functionTwo()，后续的网络状态变更不会再触发这两个函数。

简化优化方案 #

可以从语义清晰度和代码简洁性两方面优化：

• 将记录连接状态的wasConnectedRef改为标记初始化完成的hasInitialized，语义更直观——我们只需要判断是否已经处理过首次状态变化，无需保存具体的连接值
• 合并嵌套条件，简化逻辑判断

优化后的代码示例：

const App = () => {
    const { isConnected } = useNetInfo();
    const hasInitialized = useRef(false);

    useEffect(() => {
        if (isConnected !== null && !hasInitialized.current) {
            isConnected && (functionOne(), functionTwo());
            hasInitialized.current = true;
        }
    }, [isConnected]);

    // ...其他组件逻辑
}

额外注意点 #

如果functionOne和functionTwo是组件内部定义的函数，记得将它们添加到useEffect的依赖数组中，或者用useCallback包裹这两个函数，避免因函数引用变化导致的不必要渲染。

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