How component render is triggered?

[roeycohen]

Hi!

Going briefly over mobx react code, I wasn't able to understand how an observer component is getting rerendered on observable change.

I thought that since state updating already triggers rendering, mobx is using this mechanism, but couldn't find anything related to that..

Can anyone give me a brief explanation to that matter?

10q! 🙏

[mweststrate]

https://mobx.js.org/understanding-reactivity.html

…

On Fri, Dec 11, 2020 at 3:06 PM Roey ***@***.***> wrote: Hi! Going briefly over mobx react code, I wasn't able to understand how an observer component is getting rerendered on observable change. I thought that since state updating already triggers rendering, mobx is using this mechanism, but couldn't find anything related to that.. Can anyone give me a brief explanation to that matter? 10q! 🙏 — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#2675>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBBFOWBDHXCWNODKR7TSUIYORANCNFSM4UWYIXKA> .

[roeycohen]

Hi @mweststrate, I'm looking for a more under the hood answer..
Let's say the observer code gets notified about a change of data, how does it triggers the render function?
🙏

[mweststrate]

It increments a counter that is stored in state / useState

…

On Sat, 12 Dec 2020, 07:52 Roey, ***@***.***> wrote: Hi @mweststrate <https://github.com/mweststrate>, I'm looking for a more under the hood answer.. Let's say the observer code gets notified about a change of data, how does it triggers the render function? 🙏 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2675 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBEO6U24UQIE6ILUT7LSUMOLTANCNFSM4UWYIXKA> .

[roeycohen]

Thank you @mweststrate,
I was looking for such code but wasn't able to detect it.
If not to hard, Could you please attach a link to the code itself?

P.s.
Thanks for replying! It's not obvious!

[danielkcz]

It's hidden inside useObserver internal hook within mobx-react-lite package.

[mweststrate]

search for useState. check out the sources locally if you need

…

On Sat, 12 Dec 2020, 08:10 Roey, ***@***.***> wrote: Thank you @mweststrate <https://github.com/mweststrate>, I was looking for such code but wasn't able to detect it. If not to hard, Could you please attach a link to the code itself? P.s. Thanks for replying! It's not obvious! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2675 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBDXR6UVRDVQMELBNKDSUMQOXANCNFSM4UWYIXKA> .

[roeycohen]

Ok, looking at the code of mobx-react-lite,
I can see that the original component is wrapped (observer.ts) with useObserver (useObserver.ts) which calls forceUpdate when a change occur.

One more thing @mweststrate, the link here is no longer valid: mobxjs/mobx-react-lite@fc17d20
is that mean that mobx 4 and 5 will no longer get update and everyone should update asap?

10x again.

[danielkcz]

That is right, MobX V4 / V5 is no longer supported and won't receive any updates unless something critical (like security issue) occurs.

But there is an automated tool called "undecorate" that makes migration very easy. See https://michel.codes/blogs/mobx6

[roeycohen]

I work with mobx 6 on another project.. it's really weird working without decorators specially if not all variables in the store are observables :)