Menu
I wrote this hook (there could be bugs, I haven't used it yet):
import { useCallback, useEffect } from 'react';
import _throttle from 'lodash/throttle';
export function useThrottledCallback(cb, delay, ...deps) {
const callback = useCallback(_throttle(cb, delay), deps);
useEffect(() => {
const lastCallback = callback;
return () => lastCallback.cancel();
}, [callback]);
return callback;
}
Is there a way I can make the exhaustive-deps rule lint usages of this hook?
useThrottledCallback(() => (a + b + c)}, 100, [])
In this usage, I'd like to be notified that a, b, and c need to be in the dependency array.
958
The "react-hooks/exhaustive-deps" rule warns us when we have a missing dependency in an effect hook. To get rid of the warning, move the function or variable declaration inside of the useEffect hook, memoize arrays and objects that change on every render or disable the rule.
No. Custom Hooks are a mechanism to reuse stateful logic (such as setting up a subscription and remembering the current value), but every time you use a custom Hook, all state and effects inside of it are fully isolated.
Hooks are reusable functions. When you have component logic that needs to be used by multiple components, we can extract that logic to a custom Hook. Custom Hooks start with "use".
Create the useContextInside of this custom hook, we'll be using the useContext hook, that allows us to access both the theme and the setTheme function outside of this file. If useContext fails to create a context, it'll return undefined because we forgot the wrap our App or component in a ThemeProvider.
Similarly, you can write custom Hooks to handle various use cases, such as form handling, animation, timers, and many others. The main advantage of React Hooks is the reusability of stateful logic. In addition, custom Hooks can be easily shared with other components without changing the component hierarchy.
Just like in a component, make sure to only call other Hooks unconditionally at the top level of your custom Hook. Unlike a React component, a custom Hook doesn’t need to have a specific signature. We can decide what it takes as arguments, and what, if anything, it should return.
As we learned earlier, we can use multiple State or Effect Hooks in a single component: So how does React know which state corresponds to which useState call? The answer is that React relies on the order in which Hooks are called. Our example works because the order of the Hook calls is the same on every render:
No. Custom Hooks are a mechanism to reuse stateful logic (such as setting up a subscription and remembering the current value), but every time you use a custom Hook, all state and effects inside of it are fully isolated.
It should be pretty easy. The documentation says:
exhaustive-depscan be configured to validate dependencies of custom Hooks with the additionalHooks option. This option accepts a regex to match the names of custom Hooks that have dependencies.
So you'd want something like:
{
"rules": {
// ...
"react-hooks/exhaustive-deps": ["warn", {
"additionalHooks": "useThrottledCallback"
}]
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
