React防抖概念实现问题：输入框输入后无法更新

先看你提供的代码：

import React,{useState} from 'react';

const app = () =>{
    const [inputValue,setInputValue] = useState();    

    const handleChange = (e)=>{
        setInputValue(e.target.value);
        console.log(inputValue);
    }

    const debounce =function (fn , d) {
        let timer;
        return function(){
            let context = this,
                args=arguments;
        clearTimeout(timer);
          timer = setTimeout(() =>{
              fn.apply(context,args)
          },d)      
        }
    }
    
    const betterFunction = debounce(handleChange, 300);
    
    return (
    <>
        <input type='text' value={inputValue} onChange={betterFunction}/>
        <div>{inputValue}</div>
    </>
    )
    
}

export default app;

问题出在两个核心点：

• React合成事件池化导致事件对象失效
  React为了性能优化，会复用合成事件对象。当你输入触发betterFunction后，debounce会延迟300ms才调用handleChange，这时候原事件对象已经被React回收，e.target变成了null，setInputValue拿到的是undefined，受控输入框的value变成undefined，自然没法再输入。

• 受控组件状态更新延迟，输入内容无法同步
  你的输入框是受控组件，value严格绑定inputValue。输入时，debounce延迟了状态更新，这期间输入框显示的还是旧的inputValue，用户输入的新内容无法实时同步到状态里，看起来就像输入停滞。加上事件对象失效后最终把状态设为undefined，直接导致输入框内容清空，彻底无法操作。

解决办法可以参考这两个方向：

1. 在debounce的回调里先保存输入值，再传递给handleChange：

const betterFunction = debounce((e) => {
  const value = e.target.value;
  handleChange({ target: { value } });
}, 300);

或者直接在debounce内部处理值的保存，避免依赖原事件对象。

2. 调用e.persist()来保留事件对象（不过官方不推荐，因为会影响性能）：

const handleChange = (e)=>{
    e.persist();
    setInputValue(e.target.value);
    console.log(inputValue);
}

另外，建议把debounce函数用useCallback包裹，避免组件每次渲染都重新创建debounce实例，不过这不是导致当前问题的核心原因。

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