通过挂钩传递时，setState函数是否应该是使用效率的依赖性

Question

因此，我偶然发现了这种奇怪的情况：

我有一个全局反应上下文提供商，提供了一个全局状态，例如So

const Context = createContext();

const ContextProvider = ({children}) => {
  const [state, setState] = useState('');
  return <Context.Provider value={{state, setState}}>{children}</Context.Provider>
}

const useMyState = () => {
  const {state, setState} = useContext(Context);

  return {
   state,
   setState
  }
}

const Component = () => {
  const {setState} = useMyState();

  useEffect(() => {
   elementRef.addEventListener('click', () => {
    setState('someState');
   });

   return () => {
    elementRef.removeEventListener('click', () => null); 
   }
  },[])

return <>
 // ...
</>
}

eSlint建议将我的setState添加到useffect的依赖项数组，

useEffect(() => {
   elementRef.addEventListener('click', () => {
    setState('someState');
   });
  },[setState])

我猜这可能与usemystate.ts.ts文件的上下文的破坏有关，

但感觉有些奇怪和非- 直觉...

我的问题是setState在依赖项数组中确实需要吗？如果是这样，为什么？

Answer 1

我的问题是setstate在依赖项数组中确实需要吗？

不，不是，但是Eslint不知道，因为它无法知道您使用的上下文对象的setState成员是稳定的。 您知道（因为设置器可以通过usestate确保稳定，并且您正在通过上下文和usemystate hook逐字传递它） ，但是Eslint不知道。

您可以将其添加为使Eslint感到高兴的依赖性（如果您已经提供了一个数组，那将不会有任何区别，因为Setter永远不会更改；如果您不是，请参见下面数组），或者您可以发表评论来告诉ESLINT跳过检查该代码，也可以关闭规则（但是非常易于错过依赖项，所以请小心，如果您这样做） 。

（如果您不提供数组[因为您希望在每个渲染后运行效果]，则在其中添加一个带有设置器的数组将停止发生这种情况，因此您需要选择禁用ESLINT的选项 错误的解决方案，例如在其中使用带有越来越多的数字值的Ref。

---

对于这种情况，有 它反复将新事件的听众添加到元素中，而无需删除它们，因为使用 no 依赖项数组，useffect cownback每次compents渲染时都会调用，并且您正在创建创建每次都有一个新的活动处理程序功能，因此它们会堆叠。

因此，您需要将elementRef.current作为依赖关系，并且需要一个清理回调：

const Component = () => {
    const {setState} = useMyState();
  
    useEffect(() => {
        const handler = () => {
            setState("someState");
        };
        const element = elementRef.current;
        // Note −−−−−−−−−−−−−−−−−−^^^^^^^^
        element.addEventListener("click", handler);
        return () => {
            element.removeEventListener("click", handler);
        };
    }, [elementRef.current]); // <== Optionally add `setState` to this

    return <>
        // ...
    </>;
};