Questions tagged [eslint-plugin-react-hooks]
27 questions
12
votes
1 answer
Can I have react-hooks/exhaustive-deps for a custom hook?
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 =…
Brandon
- 1,735
- 2
- 22
- 37
9
votes
3 answers
How to prevent useCallback from triggering when using with useEffect (and comply with eslint-plugin-react-hooks)?
I have a use-case where a page have to call the same fetch function on first render and on button click.
The code is similar to the below (ref: https://stackblitz.com/edit/stackoverflow-question-bink-62951987?file=index.tsx):
import React, {…
binkpitch
- 677
- 1
- 8
- 18
9
votes
2 answers
Custom hooks with dependency lists and eslint-plugin-react-hooks
I have a question regarding eslint-plugin-react-hooks.
I wanted to reduce the boilerplate code of doing a API call and storing the result into state so I created a custom hook:
export const loading = Symbol('Api Loading');
export const responseError…
ParkourGrip
- 333
- 3
- 11
7
votes
1 answer
React Hooks Exhaustive-deps async infinite Loop
I have the following component:
import React, { useState, useEffect } from "react";
const App = () => {
const [data, setData] = useState(null);
const [checked, setChecked] = useState(false);
const [loading, setLoading] =…
hedgecox
- 73
- 1
- 3
7
votes
1 answer
Why does `react-hooks/exhaustive-deps` lint rule trigger on nested object properties?
I'm trying to use React hooks for memoizing a callback. This callback specifically uses a function that's defined on an object.
const setValue = useCallback((value) => {
field.setValue(key, value);
}, [field.setValue, key]);
This triggers…
Matt Huggins
- 81,398
- 36
- 149
- 218
5
votes
0 answers
How to let eslint react-hooks/exhaustive-deps rule know that the return value of a custom hook is invariant?
When you call one of the "builtin" hook, the react-hooks/exhaustive-deps rule is smart enough to recognize that some return values are guaranteed by React to be invariant. This is the case for state updaters and dispatchers returned by useState and…
sarfata
- 4,625
- 4
- 28
- 36
3
votes
3 answers
Can I utilize eslint-disable-line to disable react-hooks/exhaustive-deps, but exempt particular props from being disabled not all of them?
I can turn that rule of for entire array:
useEffect(() => {
if (id) {
stableCallback(id);
dynamicCallback(id);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [id, dynamicCallback]);
But my preference would be…
Deykun
- 1,298
- 9
- 13
3
votes
0 answers
Inconsistent linter warnings with useCallback
In this screenshot we can see two warnings from react-hooks/exhaustive-deps:
React Hook useCallback has an unnecessary dependency: 'b'. Either exclude it or remove the dependency array.
React Hook useCallback received a function whose…
customcommander
- 17,580
- 5
- 58
- 84
3
votes
0 answers
How to install an NPM plugin using react-scripts
I am trying to install and use the eslint-plugin-react-hooks plugin in a project. Usually I'd simply run npm install or yarn add but the directions say to use react-scripts because I'm using create-react-app. How do I do that? Do I add a script and…
Selino
- 111
- 3
- 12
3
votes
0 answers
ESLint react-hooks - 'exhaustive-deps' rule - is there really no better way?
There is quite a lot of information about this rule, but I really think that there should be made some better way to handle the componentDidMount-alternative.
It looks that it confuses also a lot of developers and it is quite difficult to write…
bukso
- 1,108
- 12
- 23
3
votes
1 answer
React hooks a functional update causes the eslint no-shadow error
I'm using React useEffect to update a state. Eslint warns I'm making no-shadow error. I think this is related to some eslint or eslint plugin settings because CRA doesn't cause the same error. How to fix it?
function Sample(props) {
const { flag }…
Sung.P
- 373
- 2
- 9
2
votes
2 answers
React useEffect is complaining about missing dependency even after destructuring
Before you mark this as a duplicate - please understand that I have tried following most of the articles here on SO but none of them seem to help me out, perhaps I am overlooking something or I am having a brain fart today. So please excuse me for…
Gagan
- 5,416
- 13
- 58
- 86
2
votes
0 answers
useEffect warning when adding dependencies using spread operator
On passing the dependencies from array to the 2nd parameter of useEffect, eslint throws the following error
// inputs need to go as part of effects dependency
export function useEffectAsync(effect, inputs) {
useEffect(() => {
…
Akshay Gundewar
- 864
- 11
- 30
2
votes
1 answer
Warning for 'exhaustive-deps' keeps asking for the full 'props' object instead of allowing single 'props' methods as dependencies
This question is related to the eslint-plugin-react-hooks
When I'm in CodeSanbox using a React Sandbox I can use single properties of the props object as dependencies for the useEffect hook:
Example 1:
useEffect(()=>{
console.log('Running…
cbdeveloper
- 27,898
- 37
- 155
- 336
1
vote
1 answer
React async and hooks
the problem is that iam trying to use prop as initialstate for useState, which
comes asynchronously from store and after page refresh iam getting , that this prop is undefined, how can i load props before call, check my code below.
logic: prop in…
Aw KingOftheworld
- 131
- 7