Как обновить react компонент после изменения в объекте?

Question

[Neuro]

Добрый день, не могу понять как обновить react компонент после изменения одного из свойств объекта

factorModel

export default function SensorFactorEditComponent ({ factor, id, fullWidth, showMessage }) {
    const factorModel = new FactorModel();
    const [isChanged, setIsChanged] = useState(false);

    useEffect(() => {
        factorModel.on('change:factor', () => {
            //Обновляю состояние компонента после изменения свойства объекта что бы компонент обновился
            setIsChanged(!isChanged);
        })
    });

    const updatedFactor = () => {
        //После изменения состояния компонент обновляется но всё время выдаёт старое значение
        return <div>{factorModel.getFactor()}</div>;
    }

    return (
    <>
                <Form model={factorModel}>
                    <Input
                        type='number'
                        name='factor'
                        value={factorModel.getFactor()}
                        fullWidth={fullWidth}
                    />
                </Form>
                {updatedFactor()}
    </>
    );
}

Возможно кто то сталкивался с такой ситуацией и знает как исправить?

Answer 1

[twolegs]

Во-первых, у вас каждый рендер будет создаваться новый экземпляр объекта FactorModel(). Т.е. каждую итерацию рендера у вас заново инициализированный объект.
Чтобы этого избежать, надо либо мемоизировать этот инстанс (хук useMemo), либо инстанцировать объект вне компонента (если это возможно).
Во-вторых, эффект также вызывается каждый рендер, и на событие каждый раз подписывается новая функция (память течет). Чтобы этого избежать, нужно указать второй параметр в useEffect: useEffect(..., []) - такой эффект выполнится только при монтировании компонента.