reaction with previous value

Welcome to MobX. Please provide as much relevant information as possible!

I have a:

1. Idea:

• What problem would it solve for you?
• Do you think others will benefit from this change as well and it should in core package (see also mobx-utils)?
• Are you willing to (attempt) a PR yourself?

const noPreviousValue = Symbol()
reaction(() => ..., (newValue, previousValue /* noPreviousValue if no previous value*/) => {
})

sometimes the previous value is useful to make decisions on how to react to the change right now we have to do workarounds like

let oldValue = undefined;
reaction(() => ..., (newValue) => {
  // do something comparing new with old if needed
  oldValue = newValue
})

but it would be cool if it was built-in as part of reaction

if performance/garbage collection is an issue for some reason there could be an option such as { trackPreviousValue: boolean} // defaults to false but since in theory the previous value would be garbage collected as soon as the reaction is done running I don’t see why it would be at first

[Ciantic]

I use this handy helper for reactions:

import { reaction } from "mobx";
import { isEqual } from "lodash";

export const reactionWithOldValue = <T>(
    expression: () => T,
    effect: (newValue: T, oldValue?: T) => void
) => {
    let oldValue: T;
    return reaction(expression, v => {
        if (!isEqual(v, oldValue)) {
            effect(v, oldValue);
            oldValue = v;
        }
    });
};

Note Implementation perhaps leaks memory, since the oldValue is not cleaned.

Usage:

let client = observable("");
reactionWithOldValue(
    () => client,
    (newValue, oldValue) => console.log(newValue, oldValue) // do something with old and new value
);

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs or questions.