react hook 初次渲染时不执行useEffect方法

React hook 初次渲染时不执行useEffect

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

function MyComponent() {
  const [inputValue, setInputValue] = useState('');
  const isInitialRender = useRef(true); // 用于标记是否是首次渲染

  useEffect(() => {
    if (isInitialRender.current) {
      isInitialRender.current = false;
      return;
    }

    // 模拟接口请求获取新的数据
    setTimeout(() => {
      const newData = 'New Data';
      // 判断当前输入框是否被用户修改过
      if (!inputValue) {
        setInputValue(newData); // 只在输入框未被修改过时更新值
      }
    }, 1000);
  }, [inputValue]);

  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };

  return (
    <input type="text" value={inputValue} onChange={handleInputChange} />
  );
}