CODEWITHSUNDEEP
reactjs
dns_nx
dns_nx

Reputation: 3953

React Hooks - Why is useEffect not being fired, when property changes

I've got an issue with my Reactjs app. It's hard to explain the whole story, so I will try to concentrate me on the issue itself.

I have a component (ProductSetup), which shows different setups based on a given type. Therefore I created plain javascript classes (in this case GoodsSetupWizard), because I needed to be able to call different functions within this class. Also in this class there is a property step. A class looks like this:

import React from 'react';
import ProductName from '../components/productName.component';
import { updateProduct } from '../../../../../../factories/productSetup.factory';
import { isNullOrUndefined } from '../../../../../../utils/utils';

class GoodsSetupWizardController {
    constructor(props) {
        this.product = props.product;
        this._step = props.step;


        Object.defineProperty(this, 'step', {
            get() { return this._step; },
            set(newValue) { this._step = newValue; },
        });
    }

    getComponent(step) {
        ...
    }

    isNextButtonDisabled(step) {
        ...
    }

    needsNextStepToBeSkipped(direction) {
        ...
    }

    increaseDecreaseStep(direction) {
        switch (direction) {
            case '+':
                this.step = this.step + 1;
                break;
            case '-':
                this.step = this._step - 1;
                break;
            default:
                throw new Error();
        }
    }
}

export default GoodsSetupWizardController;

As I said, there is a property step in this class. At some point I increase the value within the class as you can see in the method increaseDecreaseStep().

In my ProductSetup component, I'm using useEffect to watch this property.

useEffect(() => {
    ... //some code here
},[productSetupWizard?.step]);

But when I increase the value within the class, the useEffect will not recognize it. Why? Any solutions to this?

Update

productSetupWizard is an instance of GoodsSetupWizardController

Upvotes: 1

Views: 1373

Answers (2)

darthgoldstein
darthgoldstein

Reputation: 112

Let's think for a moment about the purpose of the useEffect hook. It allows you to describe an effect that you want occur as a result of changing state. "What is considered state?", you kindly ask. Props and hook state (useState, useMemo, etc.) of course! In this example, the useEffect callback will never get called since the fields of productSetupWizard are not stateful and do trigger re-render.

tldr; If it won't trigger a re-render then it won't trigger the useEffect either.

Upvotes: 1

Mina
Mina

Reputation: 17594

useEffect just update with stateful dependencies, As I understood, the productSetupWizard is an instance of GoodsSetupWizardController class, but it is not stateful.

What I mean by stateful, is the value generated by reacting hooks, like useState and useMemo

Upvotes: 1

Related Questions