CODEWITHSUNDEEP
reactjs
Roland
Roland

Reputation: 965

React useEffect hook doesn't trigger when a dependency changes

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,...]);

enter image description here

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: enter image description here State after: enter image description here

Reducer action: enter image description here

Upvotes: 0

Views: 92

Answers (1)

Henry Le
Henry Le

Reputation: 461

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

Upvotes: 1

Related Questions