load import source in effect

Author: rmorshea

src/client/packages/idom-client-react/src/components.js

@@ -3,7 +3,7 @@ import ReactDOM from "react-dom";
 import htm from "htm";
 
 import { useJsonPatchCallback } from "./json-patch.js";
-import { loadModelImportSource } from "./import-source.js";
+import { useImportSource } from "./import-source.js";
 import {
   createElementAttributes,
   createElementChildren,
@@ -101,14 +101,9 @@ function ImportedElement({ model }) {
   const layoutContext = React.useContext(LayoutContext);
 
   const importSourceFallback = model.importSource.fallback;
-  const [importSource, setImportSource] = React.useState(null);
+  const importSource = useImportSource(model.importSource);
 
   if (!importSource) {
-    // load the import source in the background
-    loadModelImportSource(layoutContext, model.importSource).then(
-      setImportSource
-    );
-
     // display a fallback if one was given
     if (!importSourceFallback) {
       return html`<div />`;

src/client/packages/idom-client-react/src/import-source.js

@@ -1,9 +1,32 @@
+import React from "react";
+
 import {
   createElementAttributes,
   createElementChildren,
 } from "./element-utils.js";
 
-export function loadModelImportSource(layoutContext, importSource) {
+export function useImportSource(importSource) {
+  const layoutContext = React.useContext(LayoutContext);
+  const [importSource, setImportSource] = React.useState(null);
+
+  useEffect(() => {
+    let unmounted = false;
+
+    loadModelImportSource(layoutContext, model.importSource).then((src) => {
+      if (!unmounted) {
+        setImportSource(src);
+      }
+    });
+
+    return () => {
+      unmounted = true;
+    };
+  }, [layoutContext, model.importSource, setImportSource]);
+
+  return importSource;
+}
+
+function loadModelImportSource(layoutContext, importSource) {
   return layoutContext
     .loadImportSource(importSource.source, importSource.sourceType)
     .then((module) => {