调用未使用的useHook是否影响性能？以useSnackbar为例

当confirmClickEnabled为false时，每个Button实例调用useSnackbar确实会带来可感知的性能开销，尤其是在10000个实例的场景下，原因如下：

为什么会有开销？ #

useSnackbar本质是基于React Context实现的Hook，每个调用它的组件都会订阅SnackbarProvider的Context状态。哪怕你没有实际调用enqueueSnackbar，这个订阅关系依然存在：

• 每个Button实例都会持有一份Context订阅的引用，增加内存占用；
• 当任意地方触发Snackbar状态更新（比如其他组件显示了一个提示），所有10000个Button都会被触发重新渲染检查，哪怕它们根本不需要处理这个更新。

优化方案 #

最直接的解决办法是拆分组件，把需要确认逻辑的按钮和普通按钮分开，只有需要确认功能的组件才调用useSnackbar：

import { useSnackbar } from 'notistack';
import ButtonBase from '@mui/material/ButtonBase';

// 普通按钮，无确认逻辑
const PlainButton = ({ onClick }) => {
  return <ButtonBase onClick={onClick}>Button</ButtonBase>;
};

// 带确认逻辑的按钮，仅在这里调用useSnackbar
const ConfirmButton = ({ onClick }) => {
  const { enqueueSnackbar } = useSnackbar();

  const handleClick = () => {
    enqueueSnackbar({ variant: 'Confirmation', onYes: onClick });
  };

  return <ButtonBase onClick={handleClick}>Button</ButtonBase>;
};

// 对外暴露的统一Button组件
const Button = ({ onClick, confirmClickEnabled = false }) => {
  return confirmClickEnabled 
    ? <ConfirmButton onClick={onClick} /> 
    : <PlainButton onClick={onClick} />;
};

export default Button;

这样改造后，只有启用了确认功能的按钮才会订阅Snackbar的Context，10000个普通按钮完全不会有额外的性能开销，同时也保持了对外API的一致性。

另外需要注意：React不允许在条件语句中调用Hook，所以不能直接在if(confirmClickEnabled)里调用useSnackbar，拆分组件是符合Hook规则的最优解。

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