React useEffect使用疑问：mounted变量避免重复请求是否合理？

你的这个实现思路是有效的，但存在可以优化的地方：用useState维护mounted状态会额外触发一次组件重渲染（因为setMounted(true)会更新状态），其实我们可以用useRef来标记初始化状态——因为这个标记不需要引发组件重绘，性能更优。

另外，把数据请求和表单验证这两个逻辑拆分成独立的useEffect会更合理，避免不同职责的副作用耦合在一起，代码可读性和维护性也会更好。

优化后的实现示例 #

import { useState, useEffect, useRef, useCallback } from 'react';

// ...其他状态定义

// 用useRef标记组件是否完成初始化数据加载
const isLoaded = useRef(false);

// 专门处理初始化数据请求：仅在组件挂载且有params.id时执行一次
useEffect(() => {
  if (params.id) {
    const fetchData = async () => {
      await fetchFaqs();
      // 标记数据加载完成，不需要触发重渲染
      isLoaded.current = true;
      // 加载完成后执行一次验证，确保表单状态正确
      checkIfFormIsValid();
    };
    fetchData();
  }
}, [params.id, checkIfFormIsValid]);

// 用useCallback包裹验证函数，避免每次组件重渲染时重新创建函数
const checkIfFormIsValid = useCallback(() => {
  // 你的表单验证逻辑
  // 比如检查answer、question等字段是否符合规则
}, [answer, question, section, sort]);

// 专门处理表单字段变化后的验证：仅监听表单状态变化
useEffect(() => {
  // 仅在数据加载完成后，才执行表单字段变更后的验证
  if (isLoaded.current) {
    checkIfFormIsValid();
  }
}, [answer, question, section, sort, checkIfFormIsValid]);

优化点说明 #

• 拆分副作用逻辑：数据请求和表单验证是两个独立的职责，分开后代码逻辑更清晰，也避免了因验证字段变化导致重复请求的问题。
• 使用useRef替代useState：isLoaded只是一个标记，不需要触发组件重渲染，用useRef更合适，减少不必要的重绘。
• useCallback缓存验证函数：避免每次组件重渲染时重新创建checkIfFormIsValid，减少useEffect的不必要触发。

如果你不需要在数据加载完成后立即执行验证，也可以去掉第一个useEffect里的checkIfFormIsValid()调用，只在表单字段变化时执行验证。

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