English 中文(简体)
如何创建稳定功能, 由ESlint 规则反应- hooks/ Explicate- deps 的 ESlint 规则在有受扶养人的钩子阵列中不需要
原标题：How to create a stable function that is not required in dependency arrays of hooks by the ESlint rule react-hooks/exhaustive-deps
In React + TypeScript, I am trying to create a custom hook which returns stable updater function with referential types and stable signature such as those provenients from useState or useDispatch so that is not required in dependency arrays of hooks by the ESlint rule hooks/exhaustive-deps Here is an example: import { useRef, useState, useEffect, useCallback } from react ; export type SetStateWithCallback = (newState: React.SetStateAction, callback?: Function) => void; export function useStateWithCallback(initState: T): [T, SetStateWithCallback] { const [state, setState] = useState(initState); const callbackRef = useRef(null); const setStateWithCallback = useCallback((newState: React.SetStateAction, callback?: Function) => { callbackRef.current = typeof callback === function ? callback : null; setState(newState); }, []); useEffect(() => { if (callbackRef.current) { callbackRef.current?.(state); callbackRef.current = null; } }, [state]); return [state, setStateWithCallback]; } But when using this custom hook, the eslint rule hooks/exhaustive-deps still requires the setStateWithCallback to be included as a dependency, differently from what it does with the built-in setState for example: function MyTestComponent() { const [state, setState] = useState({}); const [customState, setCustomState] = useStateWithCallback({}); const test = useCallback(() => setState({}), []); // Fine. No required dependency const testCustom = useCallback(() => setCustomState({}), []); // Warning: React Hook useCallback has a missing dependency: setCustomState . Either include it or remove the dependency array. eslint(hooks/exhaustive-deps) return null; } How can I change setCustomState to accomplish the same as setState?
问题回答
This is a design choice in React. It s not practical to force custom functions to behave the same way as built-in hooks in terms of dependency handling. React has deep, internal knowledge of how its built-in hooks operate, allowing the React team to optimize these hooks to prevent unnecessary re-renders or re-executions. This optimization is tailored for the common usage patterns of these hooks. However, custom functions are different. They can be redefined on every render, especially if they re declared within a component. This redefinition can occur because custom functions often close over the component s state or props. When a function is redefined, its identity changes. If you omit such a function from the dependency list of a hook like useEffect or useCallback, React may not re-run the effect or recalculate values when necessary, leading to potential bugs or inconsistent behavior. Including custom functions in the dependency array ensures that the effect or memoized value updates correctly whenever the function or its dependent data changes.
时间：2024-07-25 14:00:06


上一篇：
下一篇：


相关问题
How to use one react app into another react app?

I have two react apps, parent app and child app. and child app have an hash router. I have build the child app using npm run build, It creates build folder. That build folder moved into inside the ...

时间：2023-05-23 02:59:11 回答：0 展示：1
how to get selected value in Ant Design

I want to print the selected value, and below is my option list: const vesselName = [ { value: 0 , label: ALBIDDA , }, { value: 1 , label: ALRUMEILA , }, { value: 2 ,...

时间：2023-04-26 01:27:57 回答：1 展示：1
How to add a <br> tag in reactjs between two strings?

I am using react. I want to add a line break <br> between strings No results and Please try another search term. . I have tried No results.<br>Please try another search term. but ...

时间：2017-08-29 09:42:14 回答：13 展示：1
热门标签

友情链接

Allggapp Alljchome-教程家园 mvfinale.com-影视剧情大结局大全