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';

Poltergeist

reactjs.org/docs/hooks-reference.html#usereducer – Capability

Answer 1

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.

Fijian

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. – Tyeshatyg

Answer 2

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']);

Abert

Thank you. Came looking for this answer, because of useSearchParams(). – Decreasing

Answer 3

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.

Nunuance

Thanks, what is the benefit (if any) of moving the const value outside of the component? – Poltergeist

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. – Fijian

@Fijian the practical difference is irrelevant. – Nunuance

@ThomasFox I think it´s just organizational. – Nunuance

Answer 4

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

Namaqualand

Answer 5

You can use useMemo instead of const[state] = useState('some state') like const state = useMemo(() => 'some state', []) in case you need the init value of a state to be saved.

Antepast

Answer 6

TLDR; I would have used a simple constant.

const state = 'some state';

In general, I use this rules:

1. If you'll need both value and setter, then useState hook is fine.

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

2. If you won't need to use setter, then use a constant instead. It will be recalculated in every render.

const state = 'Initial value';

3. If you have a constant but initialisation is expensive, then consider using useMemo(...) hook. Dependencies array will allow you to have some control on when your calculations will be executed. Leave the array empty for a single calculation.

const state = useMemo(() => expensiveCalculations(), [deps]);

Don't abuse useMemo(...). Use it for optimisation when it makes sense.

The case in the question is (for me) a good example of when useMemo(...) is might not be the best choice. Mind that useMemo(...) is not a "cost 0" operation and the optimisation mechanics could make the whole thing more expensive at the end. It depends on the context.

Overdye

Answer 7

I tried to use a const instead of useState(), and it did not trigger the dependency change I wanted. So this worked, and no console warning about "setLanguage declared but not used..."

const [language] = useState(i18n.language);


useEffect(() => {
  if (i18n.language === language) {
    dispatch({type: myFunction});
  }
}, [language]);

Enow