Automatically divide components into smaller ones for optimization?

[omerfaran]

Hello everyone,

I was just wondering while reading through the Optimizing React component rendering if there is a way that Mobx could theoretically split a component into smaller ones, and attaching observers to them so that only smaller parts would be re-rendered? Of course maybe it's not possible but if it is I would really love to help with that

Thanks in advance

[kubk]

You may try : https://mobx.js.org/react-integration.html#callback-components-might-require-observer

[urugator]

Depends on what you mean by re-render. If you mean preveting parts of your (not react's) rendering logic from re-running, then you can split the rendering logic into multiple const el1 = useComputed(() => <div>observable.a<div>) similary as you can do with const el1 = useMemo(() => <div>a<div>, [a]).
(Note we do not provide anything like useComputed, because it can become a footgun quite easily)
You can't do this automatically at runtime, however in principle you can do this at compile time and react developers are actually working on that: https://reactjs.org/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.html#react-compiler
(Since it's about memoization, it won't be compatible with mobx mutable observables)

If you mean to actually "physically" split the component into smaller ones, then it's not possible. But there is an interesting PoC project that makes individual elements/attributes reactive instead of the whole components:
https://github.com/ryansolid/mobx-jsx

[omerfaran]

Thanks a lot for your answers guys, I see, I'll look into your links and try to learn it