I used this structure in multiple projects and had a blast using it which is why I want to share it. It automatically propagates state changes to all dependent states and does not require additional state managing packages such as redux or mobx.
It enables architectures where e.g. the navbar is at the same level as all other components while still receiving updates about e.g. current user: If in this example the Index View logs the user in, there will also be a re-render in the navbar as its state has changed. This construction removes the state-silos of each component. Using useState instead of useReflectedState still enables the usage of component-specific state.
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Navbar from "./views/Navbar";
import Index from "./views/Index";