Memo в React

[DmitryKoterov]

Ну все правильно. Теперь дело за «малым» - как-то на уровне статической проверки и линта все это заэнфорсить.

[MaZaAa]

Берешь MobX в связку к реакту и все оптимизировано из коробки, танцы с бубнами не нужны.

[inoyakaigor]

Мобикс решает проблему под названием «Редакс», а мемоизация это побочный эффект. К тому же тащить в Мобикс локальный стейт компонента это добавление ему лишней зависимости

[MaZaAa]

Мобикс решает проблему под названием «Редакс»

Ещё ещё он решает проблему под названием useState, this.setState

а мемоизация это побочный эффект

Бесплатный для разработчика, позволяющий забыть о неоптимальных рендерах.

К тому же тащить в Мобикс локальный стейт компонента это добавление ему лишней зависимости

Шта? Как локальный стейт компонентов, так и глобальный стейт нужно только с помощью MobX'a и менеджерить.

[inoyakaigor]

То есть вы считаете, что состояние для чекбокса (нажат/не нажат/не определён) нужно хранить во внешнем сторе вместо локального стейта компонента?

[markelov69]

То есть вы считаете, что состояние для чекбокса (нажат/не нажат/не определён) нужно хранить во внешнем сторе вместо локального стейта компонента?

В зависимости от ситуации, можно локально, можно не локально, MobX тут никак не ограничивает, вы получаете бонусы что так, что эдак.

const MyComonent = observer(() => {
    const checkbox = useBoolean();
    return (
        <div onClick={checkbox.toggle}>
            Checked: {checkbox.value + ''}
        </div>
    )
});

или например

export class SomeState {
    showErrorModal = new WithBooleanFlag();

    fetchSomeData = async () => {
        try {
            // ...
        } catch (e) {
            this.showErrorModal.setTrue();
        } finally {
            //...
        }
    }
}

Где WithBooleanFlag и useBoolean

export class WithBooleanFlag {
    @observable value = false;

    constructor(initialFlag = false) {
        this.value = initialFlag;
    }

    setTrue = () => {
        this.value = true;
    };

    setFalse = () => {
        this.value = false;
    };

    toggle = () => {
        this.value = !this.value;
}

export function useBoolean(initialFlag = false) {
    const [flag] = useState(() => new WithBooleanFlag());
    return flag;
}