Before removing force update

packages/demo-react/src/App.tsx

@@ -2,11 +2,14 @@ import type { FunctionComponent } from "react";
 import React from "react";
 import { Layout } from "./Layout";
 import { BrowserSolidLdoProvider } from "@ldo/solid-react";
+import { MainContainerProvider } from "./MainContainerProvider";
 
 const ProfileApp: FunctionComponent = () => {
   return (
     <BrowserSolidLdoProvider>
+      <MainContainerProvider>
         <Layout />
+      </MainContainerProvider>
     </BrowserSolidLdoProvider>
   );
 };

packages/demo-react/src/Layout.tsx

@@ -3,14 +3,13 @@ import React from "react";
 import type { FunctionComponent } from "react";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import { Dashboard } from "./dashboard/Dashboard";
-import { BuildMainContainer } from "./dashboard/BuildMainContainer";
 import { MediaPage } from "./media/MediaPage";
 import { Header } from "./Header";
 
 const router = createBrowserRouter([
   {
     path: "/",
-    element: <BuildMainContainer child={Dashboard} />,
+    element: <Dashboard />,
   },
   {
     path: "/media/:uri",

packages/demo-react/src/MainContainerProvider.tsx

@@ -1,16 +1,15 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, createContext } from "react";
-import type { FunctionComponent } from "react";
+import type { FunctionComponent, PropsWithChildren } from "react";
-import type { Container, ContainerUri, LeafUri } from "@ldo/solid";
+import type { Container, LeafUri } from "@ldo/solid";
 import { useSolidAuth, useLdo } from "@ldo/solid-react";
 
-export interface BuildMainContainerChildProps {
+export const MainContainerContext = createContext<Container | undefined>(
-  mainContainerUri: ContainerUri;
+  undefined,
-}
+);
 
-export const BuildMainContainer: FunctionComponent<{
+export const MainContainerProvider: FunctionComponent<PropsWithChildren> = ({
-  child: FunctionComponent<BuildMainContainerChildProps>;
+  children,
-}> = ({ child }) => {
+}) => {
-  const Child = child;
   const [mainContainer, setMainContainer] = useState<Container | undefined>();
   const { session } = useSolidAuth();
   const { getResource } = useLdo();
@@ -49,10 +48,9 @@ export const BuildMainContainer: FunctionComponent<{
     }
   }, [session.webId]);
 
-  if (!session.webId || !mainContainer) {
+  return (
-    // Return blank screen
+    <MainContainerContext.Provider value={mainContainer}>
-    return <p>Loading</p>;
+      {children}
-  }
+    </MainContainerContext.Provider>
-
+  );
-  return <Child mainContainerUri={mainContainer.uri} />;
 };

packages/demo-react/src/dashboard/Dashboard.tsx

@@ -1,18 +1,20 @@
-import React, { Fragment } from "react";
+import React, { Fragment, useContext } from "react";
 import type { FunctionComponent } from "react";
-import type { BuildMainContainerChildProps } from "./BuildMainContainer";
+import { MainContainerContext } from "../MainContainerProvider";
-import { useResource } from "@ldo/solid-react";
 import { MediaPost } from "../media/MediaPost";
 import { UploadButton } from "./UploadButton";
 
-export const Dashboard: FunctionComponent<BuildMainContainerChildProps> = ({
+export const Dashboard: FunctionComponent = () => {
-  mainContainerUri,
+  const mainContainer = useContext(MainContainerContext);
-}) => {
+  if (mainContainer === undefined) {
-  const mainContainer = useResource(mainContainerUri);
+    return <p>Loading...</p>;
+  }
   if (mainContainer.isDoingInitialFetch()) {
     return <p>Loading Main Container</p>;
   }
 
+  console.log(mainContainer.children());
+
   return (
     <div>
       <div>