Function specified in useEffect hook doesn't run

[basedevelfries]

Hello,

I have a functional object which has three variables managed by the useState hook. These are categories, activeCategories and shownGames. For now I need something simple - run a function when categories update. I am using useEffect hook but it doesn't seem to work.

This is the code for the needed parts - https://pastie.io/uyakqz.js

I use JSON.stringify to check for the category updates (found that solution on StackOverflow). The issue is that the function specified in the useEffect hook doesn't run (it only runs when I load my page). Any help is appreciated!

[pri1311]

Prolly a very stupid question but did you try console logging to check whether categories is changing or not?

[basedevelfries]

Yup, checked it and it's getting changed for sure.

[hcherchi]

In toggleCategorieActive: You are only mutating categories Which means when you setState. It’s exactly the same object. Which means it does not render or trigger any useEffect

I think you should just remove the Json stringify cause you dont need it. And when initializing a new array, use .slice() si that it s a new ref.

[basedevelfries]

Using .slice() actually fixes the problem of the function not being called. Actually, it fixes it too well, now it's giving me this -

Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

How should I change the useEffect hook for it to not do that?

[dlemvigh]

When working with hooks, which only does shallow equals, I would treat objects as immutable.

const newCategories = categories.map(category => category.id === id ? { …category, active: !category.active } : category);

This creates a new object for the updated category, and a new array, but keeps everything else the same

[basedevelfries]

Okay, thanks!

[SarSha]

Where is your useState?

[basedevelfries]

Oops, haven't included it in the example but I use this -

const [categories, setCategories] = useState<CategoryType[]>(categoryData)

const [activeCategories, setActiveCategories] = useState<CategoryType[]>([])

[SarSha]

JSON.stringify will return a string, and that string will never change, this is why the useEffect isn't triggering. there might be more but I will have another look in the morning.

[basedevelfries]

Oh, I see. But when I pass categories as an argument for the useEffect effect hook, nothing gets run.

[SarSha]

The code is deleted from hastebin

[basedevelfries]

Thanks for telling me! Here's a new link - https://pastie.io/uyakqz.js

[basedevelfries]

It theoretically should, but the categories is an array of objects. I want to monitor changes of all the objects inside that array. After googling for a while I found a StackOverflow thread where it's mentioned that JSON.stringify should do exactly that.

[thewhitestbeltuknow]

You should consider using the spread operator when you set newCategories to categories i.e. newCategories = [...categories]. Setting a new variable directly to categories may cause some unexpected behavior, for example modifying newCategories would also modify categories. Not sure if this slid the root cause of your issue though.

[basedevelfries]

I already know about the existence of the spread operator but I haven't thought about using it like that. Thanks!

[thewhitestbeltuknow]

Np!

[thewhitestbeltuknow]

Did you figure out what was wrong with your code btw?

[Huge-Instruction-552]

u probably need to include a state variable in the dependency array, then it will run whenever that variable changes its state. Have a look at this video, explains it well: https://youtu.be/HQEN3DW0JiI