How do I avoid unused setState functions? Can React useState be created without a setter?

Question

I'm currently reducing / removing npm warnings on a React site.

A large number of these warnings are caused by the setState function as seen below, being 'unused'.

const [state, setState] = useState('some state');

Which of the following would be a better way to remove these warnings? Or is there a better way to approach the issue?

1.

const[state] = useState('some state');

const state = 'some state';

https://reactjs.org/docs/hooks-reference.html#usereducer – Yevhen Horbunkov Jan 14 '21 at 16:20 — Yevhen Horbunkov, Jan 14 '21 at 16:20

score 29 · Accepted Answer · answered Jan 14 '21 at 16:20

29

If setState isn't being used at all, then it's a value that never changes so can be a constant (2.). You could probably move it out of the component as well.

answered Jan 14 '21 at 16:20

ljbc1994

2,044
11
13

5

you might want to initialize state with some value from props, and then ignore future values of that props, in that case moving the state outside component wouldn't work. – Giorgi Moniava Nov 25 '22 at 10:44

score 13 · Answer 2 · answered Jan 14 '21 at 16:22

13

If the setter of state is unused, you can avoid it the useState. You can keep the value in a const (in the body of the component), or move outside of the component.

setState is used when it's needed to be aware of the changes in the value stored in state. This way the component knows when to re-render.

answered Jan 14 '21 at 16:22

Tulio Faria

874
7
16

Thanks, what is the benefit (if any) of moving the const value outside of the component? – Thomas Fox Jan 14 '21 at 16:24
3

Whenever the component re-renders it doesn't have to initialise the variable again, whereas outside the component, it needs to initialize once and when the component re-renders it just retrieves the value. – ljbc1994 Jan 14 '21 at 16:29
@ljbc1994 the practical difference is irrelevant. – Tulio Faria Jan 15 '21 at 16:41
@ThomasFox I think it´s just organizational. – Tulio Faria Jan 15 '21 at 16:41

score 7 · Answer 3 · answered Feb 10 '23 at 10:35

You may be struggling with this (it's how I came to this question):

const [cookies, setCookies] = useCookies(['cookiename']);

Throwing a warning: 'setCookies' is assigned a value but never used [no-unused-vars]

If you would write cookies = useCookies... it would NOT work.

The solution is:

const [cookies,] = useCookies(['cookiename']);

score 2 · Answer 4 · answered Apr 05 '22 at 21:15

2

I also encountered this need. In addition to other suggestions, useRef could be used

For details: https://reactjs.org/docs/hooks-faq.html#is-there-something-like-instance-variables

answered Apr 05 '22 at 21:15

sinan

570
5
24

How do I avoid unused setState functions? Can React useState be created without a setter?

4 Answers4

Linked