使用useEffect与useCallback是否冗余？React自定义Hook优化咨询

1. 写法是否存在冗余？ #

是的，这段代码存在冗余。useCallback在这里属于多余的包裹：它的作用是缓存函数引用以避免不必要的重渲染，但当前场景下，handleBackPress仅在useEffect内部使用，完全可以把函数定义直接放到useEffect里，通过useEffect的依赖数组直接监听onBackEvent的变化，不需要额外通过useCallback做一层中转。

2. 如何简化代码？ #

可以直接将handleBackPress函数定义移入useEffect内部，同时把onBackEvent作为useEffect的依赖项，这样既保留了对onBackEvent变化的响应逻辑，又去掉了冗余的useCallback。另外建议给Hook起一个语义化的名字（比如useBackNavigation），符合React自定义Hook的命名规范。

简化后的代码如下：

export default function useBackNavigation(onBackEvent?: () => void) {
  useEffect(() => {
    const handleBackPress = (e: PopStateEvent) => {
      e.preventDefault();
      window.history.pushState(null, '', window.location.pathname);
      onBackEvent?.();
    };

    window.history.pushState(null, '', window.location.pathname);
    window.addEventListener('popstate', handleBackPress);

    return () => {
      window.removeEventListener('popstate', handleBackPress);
    };
  }, [onBackEvent]);
}

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