Mobx Invalidating render even though observable object has not changed( only applies to versions < 5.0), the same works with Maps though.

I have a dynamic Keyed Observable object and I use the set and get Object API(s). Please have a look at my code

const{observable,autorun,get,set,observe}=mobx
const{observer}=mobxReact

const store=observable({
  mapping:{}
})

const Test = observer((props)=>{
  console.log(`Rendering ${props.item}`)
  mobx.trace()
 return <li>{get(store.mapping,`${props.item}`)&&get(store.mapping,`${props.item}`).value}</li>
})

ReactDOM.render(<div>{[1,2,3,4,5].map(item=><Test item={item} key={item}/>)}</div>,document.getElementById("app"))

Console output for MobX 5

"Rendering 1"
"[mobx.trace] '_class#3.render()' tracing enabled"
"Rendering 2"
"[mobx.trace] '_class#4.render()' tracing enabled"
"Rendering 3"
"[mobx.trace] '_class#5.render()' tracing enabled"
"Rendering 4"
"[mobx.trace] '_class#6.render()' tracing enabled"
"Rendering 5"
"[mobx.trace] '_class#7.render()' tracing enabled"
set(store.mapping,"5",{["value"]:89})
"[mobx.trace] '_class#7.render()' is invalidated due to a change in: '[e-mail].5?'"
"Rendering 5"
undefined
set(store.mapping,"2",{["value"]:89})
"[mobx.trace] '_class#4.render()' is invalidated due to a change in: '[e-mail].2?'"
"Rendering 2"
undefined

In Mobx 5 when new keys are added it re-renders only those elements which have subscribed to that key ie… 5 and 2 in my case.

Now take a look at Mobx 4.5.2 output for the same code

"Rendering 1"
"[mobx.trace] '_class#3.render()' tracing enabled"
"Rendering 2"
"[mobx.trace] '_class#4.render()' tracing enabled"
"Rendering 3"
"[mobx.trace] '_class#5.render()' tracing enabled"
"Rendering 4"
"[mobx.trace] '_class#6.render()' tracing enabled"
"Rendering 5"
"[mobx.trace] '_class#7.render()' tracing enabled"
set(store.mapping,"2",{["value"]:89})
"[mobx.trace] '_class#7.render()' is invalidated due to a change in: 'keys([e-mail])'"
"[mobx.trace] '_class#6.render()' is invalidated due to a change in: 'keys([e-mail])'"
"[mobx.trace] '_class#5.render()' is invalidated due to a change in: 'keys([e-mail])'"
"[mobx.trace] '_class#4.render()' is invalidated due to a change in: 'keys([e-mail])'"
"[mobx.trace] '_class#3.render()' is invalidated due to a change in: 'keys([e-mail])'"
"Rendering 1"
"Rendering 2"
"Rendering 3"
"Rendering 4"
"Rendering 5"
undefined
set(store.mapping,"5",{["value"]:89})
"[mobx.trace] '_class#7.render()' is invalidated due to a change in: 'keys([e-mail])'"
"[mobx.trace] '_class#6.render()' is invalidated due to a change in: 'keys([e-mail])'"
"[mobx.trace] '_class#5.render()' is invalidated due to a change in: 'keys([e-mail])'"
"[mobx.trace] '_class#4.render()' is invalidated due to a change in: 'keys([e-mail])'"
"[mobx.trace] '_class#3.render()' is invalidated due to a change in: 'keys([e-mail])'"
"Rendering 1"
"Rendering 2"
"Rendering 3"
"Rendering 4"
"Rendering 5"
undefined

Mobx re-renders all the elements wether or not they are subscribed to it and also the message printed by trace is different for both Versions.

Is this a limitation of mobx versions below 5.0.0 due to lack of proxying or is this intended behaviour

BTW i’m setting the store directly in my console window on JSBin

Thank you

[mayorovp]

Bug (?) lives here:

function has$1(obj, key) {
    if (isObservableObject(obj)) {
        // return keys(obj).indexOf(key) >= 0
        var adm = getAdministration(obj);
        adm.getKeys(); // make sure we get notified of key changes, but for performance, use the values map to look up existence
        return !!adm.values[key];
    }

function get(obj, key) {
    if (!has$1(obj, key)) 
        return undefined;

[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.