> Enter the functional core, imperative shell approach where you can do as much work as possible in a functional way, and isolate impure interactions on a thin, outer layer.
> The most prominent example of this approach is ReactJS where:
> - All components can be seen as pure functions that take props, state, and context as an input and return a React element as an output.
> - All “outside world interactions” take place on the ReactDOM render/hydrate function.
If you try and put all your state at the top and make the rendering a function of it, you end up with excessive re-renders. So you end up co-locating state at your leaf components - hidden state everywhere.