当依赖项更改时，React useEffect hook 不会触发

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:

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