Getting a warning about a missing dependency in useEffect

[Chenerywoman]

Describe the bug In Selection.js, need to update the state for 'difficulty' and 'category' to 'easy' and 'general knowledge', so it matches the default selected options. The code works, but gives the warnings "React Hook has a missing dependency". I have tried various ways other to fix it:

• putting 'selected' on the option I want as defaul: got a warning to use 'defaultValue'
• using defaultValue (tried defaultValue = '9' on the select & defaultValue on the individual option: this keeps the previous selection - doesn't change it.
• using useCallback - doesn't remove warning & creates others
• adding the function to the dependency list: it then won't you change to other categories.
• trying various alternatives way of changing the state inside useEffect - still get warnings

To Reproduce Steps to reproduce the behavior:

1. Go to 'http://localhost:3000/selection'
2. Choose a new difficulty and category
3. click generate quiz. -takes you to the quiz
4. click back (can do via navbar) to selection
5. open console on developer tools
6. click generate quiz without selecting any options
7. warning should be on the console.

Expected behavior Update the state with no warnings

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: MacOs
• Browser Chrome
• Chrome Version 87.0.4280.141 (Official Build) (x86_64)

Additional context Add any other context about the problem here.

[rockettown1]

Hi @Chenerywoman,

This is a bit of a design flaw with the React team and i think they may be working on it. Within a useEffect hook, it expected you to list any state values or functions as dependencies, if you use them inside the useEffect hook.

This warning is saying you are using updateCategory inside the useEffect, but haven't actually listed it as a dependency inside the dependency array.

useEffect( ( ) => {
     //your effect code
    }, [ updatedCategory, anyOtherThingsYourEffectDependsOn ] )

[Chenerywoman]

Hi Dan

I tried that (don't think I put that in my list of things I've tried), but when I do this:

useEffect(() => {

    const setCategoryToGeneraKnowledge = () => updateCategory("9");
    setCategoryToGeneraKnowledge();

},[updateCategory]);

useEffect(() => {

    const setLevelToEasy = () => updateDifficulty("easy");
    setLevelToEasy();

},[updateDifficulty]);

it just resets it every single time, i.e. even if you select 'music' and 'medium', it resets to 'General Knowledge' and 'easy', so I took it out again!

Thanks

Rachel

---

From: Dan Krishnan notifications@github.com Sent: 18 January 2021 11:33 To: Kat-Archer/cn-project-quiz-mern cn-project-quiz-mern@noreply.github.com Cc: Chenerywoman rachelmchenery@hotmail.com; Mention mention@noreply.github.com Subject: Re: [Kat-Archer/cn-project-quiz-mern] Getting a warning about a missing dependency in useEffect (#25)

Hi @Chenerywomanhttps://github.com/Chenerywoman,

This is a bit of a design flaw with the React team and i think they may be working on it. Within a useEffect hook, it expected you to list any state values or functions as dependencies, if you use them inside the useEffect hook.

This warning is saying you are using updateCategory inside the useEffect, but haven't actually listed it as a dependency inside the dependency array.

`useEffect( ( ) => {

}, [ updatedCategory, anyOtherThingsYourEffectDependsOn ] ) `

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/Kat-Archer/cn-project-quiz-mern/issues/25#issuecomment-762190448, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AFR5AUHAOUKP7GCJBCZ5SYTS2QMBFANCNFSM4WHE5OYA.

[rockettown1]

Hi Rachel, just so i'm on the same page can you explain what the following code is doing?

useEffect(() => {

        const setCategoryToGeneraKnowledge = () => updateCategory("9");
        setCategoryToGeneraKnowledge();

    },[]);

I'm unsure whether useEffect is needed here, but will have a better idea after your explanation about what you're trying to achieve.

Currently, it runs on first render. and only then... is that what you intended?

[Chenerywoman]

I managed to solve this by changing the code to using useCallback with updateCategory and updateDifficulty, and adding updateCategory and updateDifficulty to the dependency array of useEffect.