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) => {