CODEWITHSUNDEEP
reactjsreact-hooksstatereact-context
Justin Oberle
Justin Oberle

Reputation: 570

How to avoid "setState never used" when using useContext hook

I know that if you have something like this...

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

and you are getting the warning for setState is never used, you should simply not useState, and instead, a normal variable.

My question is, what if this is useContext instead of useState as shown below? I have this structure for other components but some components do not need to setState for this context. How can I handle this warning? Is eslint my only option here?

const [state, setState] = useContext(myContext);

I have another component that uses the setState but not the state. How would I handle this?

Upvotes: 0

Views: 182

Answers (1)

Xiduzo
Xiduzo

Reputation: 1311

Simply don't destructure it if you are not going to use it:

const [state] = useContext(myContext);

Your useContext (and useState) is returning an array. Just destructure the things which are in these positions:

const useState = () => ["hi", "mom"];

const [position_0, position_1] = useState();


console.log(postition_0) // "hi"
console.log(postition_1) // "mom"

If you like to skip a variable, you could use a throwaway variable like:

const [, position_1] = useState();

More detail in this post.

If you are in control of the context, however, my personal preferred option would be to return an object instead of an array, like so:

const context = () => {
 ...your context here...

 return {
   state,
   setState,
   ...even more...
 }
)

This way, you could simply destructure only the things you need:

const { state } = useContext(context); // just state
const { setState } = useContext(context); // just setState
const { state, setState } = useContext(context); // both

Upvotes: 2

Related Questions