React中直接传useState setter与封装函数传递的性能差异疑问

这两种写法确实存在细微的性能差异，但绝大多数业务场景下完全可以忽略不计，具体差异如下：

核心差异点 #

1. 函数引用的稳定性 #

useState生成的setter函数（比如示例中的setName）是稳定引用——组件每次重新渲染时，它的地址都不会改变。而写法二中的handleName是父组件每次渲染时重新创建的新函数，引用会随父组件渲染频繁变化。

2. 子组件重渲染的触发 #

如果子组件Child使用React.memo包裹做了纯组件优化：

• 写法一传递稳定的setName，不会触发子组件不必要的重渲染；
• 写法二每次传递新的handleName，会被React.memo判定为props变化，导致子组件额外重渲染。

如果子组件没有用React.memo，两种写法都会随父组件渲染而重渲染，此时性能差异可以忽略。

3. 额外的函数调用开销 #

写法二中的handleName相当于多了一层函数调用：点击按钮时先执行handleName，再在其内部调用setName。这层额外调用会带来极其微小的性能损耗，普通场景下完全感知不到，但在高频触发场景（比如连续输入、频繁点击）中，累计损耗可能有可忽略的差异。

优化建议 #

如果需要保留封装函数的灵活性（比如后续要添加参数校验、日志等额外逻辑），同时避免性能问题，可以用useCallback包裹handleName，让它的引用保持稳定：

const Parent = () => {
    const [name, setName] = useState(null);
    const handleName = useCallback((input) => {
        setName(input)
    }, []);
    
    return <Child onSelect={handleName}/>;
};

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