diff --git a/docs/source/about/changelog.rst b/docs/source/about/changelog.rst
index 6df2b732a..8d1b55346 100644
--- a/docs/source/about/changelog.rst
+++ b/docs/source/about/changelog.rst
@@ -16,20 +16,15 @@ scheme for the project adheres to `Semantic Versioning `__.
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`
----
diff --git a/src/client/packages/idom-client-react/src/components.js b/src/client/packages/idom-client-react/src/components.js
index 54a3c1685..3397d95f1 100644
--- a/src/client/packages/idom-client-react/src/components.js
+++ b/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`
`;
diff --git a/src/client/packages/idom-client-react/src/import-source.js b/src/client/packages/idom-client-react/src/import-source.js
index de6ebdda6..21df390ac 100644
--- a/src/client/packages/idom-client-react/src/import-source.js
+++ b/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(modelImportSource) {
+ const layoutContext = React.useContext(LayoutContext);
+ const [importSource, setImportSource] = React.useState(null);
+
+ 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) => {