WIP: Experimenting how to make the layout more scalable

[dgdavid]

This is an incomplete idea to make the layout more scalable, mounting it only once instead of every time a new component/screen is displayed.

It is highly inspired by https://gregberge.com/blog/react-scalable-layout but using the technique explained in https://www.sabinthedev.com/blog/using-a-react-components-function-from-its-parent instead of React Portals.

In a React application, composition must always be preferred.
The layout is no exception.

At the time of creating this draft PR, only for sharing the idea, there are some issues and questions around:

• Only the SectionTitle has been adapted to use the "slot technique". Enough for discussing the topic.
• React documentation says that
  • useRef doesn’t notify you when its content changes, which I don't know now if it is a problem for this use case.
  • useImperativeHandle should be avoided in most cases, but maybe this is a valid use case for it. Each slot placeholder is exposing its setContent to the component in charge of transfer the content for it. Not exactly a parent component, but it works nicely, at least in the few manual tests done.

[dgdavid]

An interesting blog post released today talking about useRef and usePrevious:

https://www.developerway.com/posts/implementing-advanced-use-previous-hook

[dgdavid]

Finally we have re-evaluated reac-teleporter (recently updated) and used it. Check #216.