How to prevent component re-rendering in Mobx's action method

16 views Asked by At
import {action, makeObservable, observable, runInAction, toJS} from "mobx";

class DesignerStore {
    constructor() {
        makeObservable(this, {
            layerConfigs: observable,
            updateLayout: action,
        });
    }

    layerConfigs: { [key: string]: ILayerItem } = {};

    updateLayout = (items: ILayerItem[], reRender: boolean = true) => {
        for (const item of items) {
            let oldItem = this.layerConfigs[item.id + ""];
            if (!isEqual(oldItem, item))
                this.layerConfigs[item.id + ""] = reRender ? {...ObjectUtil.merge(oldItem, item)} : ObjectUtil.merge(oldItem, item);
        }
    };

}

This is a store I built using mobx, where one of the properties layerConfigs is observable and the corresponding updateLayout is action labeled. Normally, I execute the updateLayout method and the react component that uses to layerConfigs is re-rendered. Now I want to prevent the re-rendering of the react component when reRender is false. How can this be achieved?

I want to be able to manually control whether the component is re-rendered or not in the updateLayout method

0

There are 0 answers