From b2c66dfd6fbfa875403f6884b460adfef2433496 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Thu, 7 Aug 2025 15:51:44 +0200 Subject: [PATCH] docs/adrs/15: add note on using any component loaders with React.lazy Signed-off-by: Patrik Oldsberg --- .../architecture-decisions/adr015-jsx-loader-structure.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/docs/architecture-decisions/adr015-jsx-loader-structure.md b/docs/architecture-decisions/adr015-jsx-loader-structure.md index 0a9a5e6c55..b50ccb90e4 100644 --- a/docs/architecture-decisions/adr015-jsx-loader-structure.md +++ b/docs/architecture-decisions/adr015-jsx-loader-structure.md @@ -62,6 +62,14 @@ This option is used in the same cases as the async component loader, but when th } ``` +Note that when consuming this loader we'll need to unconditionally wrap it with `React.lazy`. This is because you can't delay the call to `React.lazy` until rendering, because you're not allowed to call it within a render function. This means that we can't first call the loader to check whether the returned value is a promise or not, and we must instead unconditionally wrap it with `React.lazy`. Therefore the implementation of accepting one of these loaders as an option needs to look something like this: + +```tsx +const LazyComponent = React.lazy(() => + Promise.resolve(options.loader()).then(loaded => ({ default: loaded })), +); +``` + ## Consequences We will update all APIs for the new frontend system in the `@backstage/frontend-*` packages.