Child component without observer tracking state updates

[hyvip-ai]

I am new to MOBX and according to documentation while using it with react, if a Child component is not wrapped in observer, it won't track any changes in state, even though the Parent is wrapped in Observer.

But the child component is tracking updates even if, it is not wrapped and the parent is wrapped.

Code:
App.jsx -

import { store } from "./store";
import { observer } from "mobx-react";

function App() {
return (
<>
<input onChange={(e) => store.setNewTodo(e.target.value)} />

</>
);
}
function Comp({ data }) {
return (
<>

parent wrapped in observer:{data.newTodo}

</>
);
}

const CompObserver = observer(Comp);

function Child({ data }) {
console.log(JSON.stringify(data));
return

child not wrapped in observer:{data.newTodo}

;
}

Store:
import { makeAutoObservable } from "mobx";

class Store {
todos = [];
newTodo = "";
constructor() {
makeAutoObservable(this);
}

setNewTodo(data) {
this.newTodo = data;
}
}

export const store = new Store();

Expected Output:
parent wrapped in observer: something
child not wrapped in observer:

Actual output:
parent wrapped in observer: something
child not wrapped in observer: something

export default App;

codesandbox link: https://codesandbox.io/s/mobx-vq9g28?file=/src/store.js:0-228

[mweststrate]

Parent will track this change as per https://mobx.js.org/understanding-reactivity.html, child doesn't track the change, it simple re-renders because it renders whenever the parent re-renders, which is the default behavior of React unless you throw a memo in the mix. It would still rerender even if you didn't pass it any data at all.

[hyvip-ai]

@mweststrate
I understand the re-render part, as the parent is re-rendering, child will also that but then what is the point behind

So if observable objects / arrays / maps are passed to child components, those have to be wrapped with observer as well.

it is written in the docs !!!
link: https://mobx.js.org/react-integration.html#dont-pass-observables-into-components-that-arent-observer

[mattruby]

The docs are dealing with the more common issue of people wondering why their child components are NOT updating with mobx.

On Sat, Dec 24, 2022 at 8:08 AM Rajat Mondal ***@***.***> wrote: @mweststrate <https://github.com/mweststrate> I understand the re-render part, as the parent is re-rendering, child will also that but then what is the point behind it is written in the docs !!! — Reply to this email directly, view it on GitHub <#3592 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AABCW4TRE3ZTJDKU3RZNKMLWO37VTANCNFSM6AAAAAATILURMA> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

-- -Matt Ruby- ***@***.***

[mweststrate]

The general point of MobX is that in the typical case, you *don't* want the re-render e.g. if you have 1000 items, and 1 changes, you want only that specific item to re-enter, not the parent, not the 999 other ones, and that is what observer gets you. I recommend to watch any of the talks or tutorials available, that is typically where they start.

…

On Sat, 24 Dec 2022, 15:08 Rajat Mondal, ***@***.***> wrote: @mweststrate <https://github.com/mweststrate> I understand the re-render part, as the parent is re-rendering, child will also that but then what is the point behind it is written in the docs !!! — Reply to this email directly, view it on GitHub <#3592 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBDUU5MDVQ24GO5ZIETWO37VPANCNFSM6AAAAAATILURMA> . You are receiving this because you were mentioned.Message ID: ***@***.***>