React useEffect hook doesn't trigger when a dependency changes

Question

I have this useEffect hook

useEffect(() => {
    console.log('mark useEffect', compatibleProducts);
    if (Object.keys(compatibleProducts.rims).length === 0
            && Object.keys(compatibleProducts.tires).length === 0) return;

}, [compatibleProducts,...]);

As you can see in the picture the state with the (COMPATIBLE_PRODUCTS) changes at the last line. In the state I check, indeed values are added, but the useEffect hook doesn't trigger again.

Any reason why it does this ?

State before: State after:

Reducer action:

Is this redux? Can you show us the reducer where you mutate the state? The fact that you see the action running does not mean that you are returning a new state (mutating the current state is wrong). — keul
– keul, Commented Feb 18, 2021 at 8:49
the object identity of your array 'compatibleProducts' stays the same. you can either copy the contents compatibleProducts: [...action.compatibleProducts] or spread it into the deps array useEffect(() => {}, [...compatibleProducts] — Martin
– Martin, Commented Feb 18, 2021 at 9:08
@Martin good answer but don't you mean the following: useEffect(() => {}, [{...compatibleProducts}] Because useEffect(() => {}, [...compatibleProducts] Gives me the error Type 'CompatibleProductsInterface' must have a '[Symbol.iterator]()' method that returns an iterator.. Even so, it still doesn't work — Roland
– Roland, Commented Feb 18, 2021 at 9:12

Henry Le · Accepted Answer · 2021-02-18 09:11:26Z

1

You should try in reducer

case TYPE.COMPATIBLE_PRODUCTS.SUCCESS:
            return {
                ...state,
                compatibleProducts: {
                    ...state.compatibleProducts,
                    ...action.compatibleProducts,
                    timespan: + new Date()
                }
            }

in your component

useEffect(() => {
    ...
}, [compatibleProducts.timespan]);

answered Feb 18, 2021 at 9:11

Henry Le

4613 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React useEffect hook doesn't trigger when a dependency changes

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related