Unnecessary mutations

I’m studying Overmind and everything seems so carefully planned that one thing surprised me: mutating the same part of the state with the same value does trigger a new mutation.

I’ll show it with an example:

// store.js
const overmind = new Overmind({
  onInitialize: ({ value }) => {
    value.addMutationListener(mutation => console.log(mutation));
  },
  state: {
    name: 'John'
  },
  actions: {
    changeName: ({ state }) => {
      state.name = 'Peter';
    }
  }
});

// Name.js
function Name() {
  const { state } = useOvermind();
  console.log('<Name /> rendered');
  return <h1>Hello {state.name}</h1>;
}

// App.js
function App() {
  const { actions } = useOvermind();
  return (
    <div className="App">
      <Name />
      <button onClick={actions.changeName}>Change name to Peter</button>
    </div>
  );
}

Clicking on the <button> triggers a new mutation and a new (unnecessary) re-render of the <Name /> component.

Logs are:

Object {method: "set", path: "name", args: ["Peter"]}
<Name /> rendered
Object {method: "set", path: "name", args: ["Peter"]}
<Name /> rendered
Object {method: "set", path: "name", args: ["Peter"]}
<Name /> rendered
...

codesandbox: https://codesandbox.io/s/7wjj165ynq

I saw the same behaviour in ProxyStateTree: https://codesandbox.io/s/3846ww49qq (I modified the toggleItemCompleted action)

I’m used to Mobx, which doesn’t trigger mutations if the value doesn’t change, not matter what you do.

How’s this going to work in Overmind/ProxyStateTree? Have you already thought about the overhead of comparing those scalar values vs the performance gains derived from avoiding those unnecessary re-renders?

[christianalfoni]

Cool, will look into this for next release 😃

[luisherranz]

Does that make sense?

Yes, it makes perfect sense 😃

This information can also be used to tell the devtools that the old and new value is the same

I’d even show previous and current value for each mutation. I remember that in Redux Devtools and it was very useful for debugging:

When proxy-state-tree “flushes” out changes it will ignore mutations where the old and new value is the same

The last doubt I have is, can proxy-state-tree traverse the state object to check for changes in scalar values or would it work like an immutable store, where the whole object is thrown away when the reference changes?

This is what I mean:

const state = { user: { firstName: 'Jon', lastName: 'Snow' } }

const changeUser = ({ state }, user) => {
  state.user = user
}

// trigger mutation:
changeUser({ firstName: 'Jon', lastName: 'Targaryen' })

// current mutation:
{ method: "set", path: "user", args: [{ firstName: 'Jon', lastName: 'Targaryen' } }]

// ideal (minimal) mutation:
{ method: "set", path: "user.lastName", args: ['Targaryen'] }

I’m not sure yet how the internals of proxy-state-tree work and how difficult would be to do this type of minimal mutation but, what are your thoughts about this?