load import source in effect

docs/source/about/changelog.rst

@@ -16,20 +16,15 @@ scheme for the project adheres to `Semantic Versioning <https://semver.org/>`__.
 Unreleased
 ----------
 
-While this release doesn't warrant a minor version bump, the last release should have
-been. Thus, to make up for that, this release will be a minor bump. It includes misc
-bug fixes, and several feature adds, the most important of which is the addition of the
-``use_context`` hook.
-
 Added:
 
 - Support for keys in HTML fragments - :issue:`682`
+- Use Context Hook - :pull:`585`
 
-**Merged Pull Requests**
+Fixed:
 
-- reset schedule_render_later flag after triggering - :pull:`688`
-- support keys in HTML fragments - :pull:`683`
-- Add Use Context Hook - :pull:`585`
+- React warning about set state in unmounted component - :issue:`690`
+- Missing reset of schedule_render_later flag - :pull:`688`
 
 ----
 

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

@@ -3,17 +3,15 @@ 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 { LayoutContext } from "./contexts.js";
+
 import {
   createElementAttributes,
   createElementChildren,
 } from "./element-utils.js";
 
 const html = htm.bind(React.createElement);
-export const LayoutContext = React.createContext({
-  sendEvent: undefined,
-  loadImportSource: undefined,
-});
 
 export function Layout({ saveUpdateHook, sendEvent, loadImportSource }) {
   const [model, patchModel] = useJsonPatchCallback({});
@@ -101,14 +99,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/contexts.js

@@ -0,0 +1,6 @@
+import React from "react";
+
+export const LayoutContext = React.createContext({
+  sendEvent: undefined,
+  loadImportSource: undefined,
+});

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

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

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

@@ -1,3 +1,4 @@
 export * from "./mount.js";
+export * from "./contexts";
 export * from "./components.js";
 export * from "./server.js";