Pass observable data through props in MobX
This lesson explains how you can build larger trees of react component and how they are managed efficiently by MobX. You will learn how to pass observable data structures around in props and how the Devtools can be used to analyze the performance of your UI.
After the separation - why wasn't the observer on the first function enough to trigger the a view change when a temperature was clicked? Is the first function now observes only added/removed temperatures and the second one observes actual temperature changes? What will happen if a change needs to re-render both a parent component and a child component? Thanks :)
observer only observers data that is used in its own render function, but not data that is used in child components. So the first function reacts to any change that happens to the temperature collection because it loops it. Not just addition / removal but also if an element is replaced at a certain index. And the second indeed reacts to changes to the rendered attributes of the temperature object. If both the collection and a temperature are changed by the same action, both components will re-rendered. Other Temperature components with an unchanged temperature object won't re-render though.
Question: seeing this: @observer class TView extends React.Component {...}. Does that means that If I'm using a third party library I'd have to create a wrapping component in order to add the "@observer" keyword?
Feels to me that If write components and prefix them with @observer then I'm going to be tied to MobX. Thoughts? Thank you!
Hi! Just wondering why onTemperatureClick in the TView component needs to be decorated with @action. Removing the decorator seems to (superficially at least) produce the same result.
After the separation - why wasn't the observer on the first function enough to trigger the a view change when a temperature was clicked? Is the first function now observes only added/removed temperatures and the second one observes actual temperature changes? What will happen if a change needs to re-render both a parent component and a child component? Thanks :)
It is because you are using mobX props in the child component. If you use setState and use state props then the component will render itself without adding @objserver.