Nesting Fixture #19531

gaearon · 2020-08-05T01:43:44Z

This is a fixture that demonstrates a build and runtime setup for using two copies of React on the same page.

Note: this is usually a really bad idea. But in large legacy apps, sometimes the only alternative is to stop upgrading React altogether. This fixture is meant to demonstrate an alternative solution — partial (e.g. per-route) upgrades/holdouts.

Hooks are working: People often struggle setting this up (Hooks + multiple instances of React #13991). In particular, the constraint is that the version of react seen by a component needs to be the same version of react that is seen by react-dom that rendered this component.
No bundler config tweaks: This is intentionally using an unejected CRA. I wanted to show an approach that should work regardless of your bundler (as long as it respects the Node resolution mechanism). Also works with both Yarn and npm.
Context bridge: This demo includes passing context through a cross-React bridge. This is vital in real apps. Without it, you can't use anything — even a router — in practice. This example includes React Router to show that. (It relies on a private API, but I'll add a scary comment, and I got an okay from @mjackson for this particular use case).
Code splitting: You pretty much never want to load two Reacts if it's avoidable. So ideally it would only be used for lazy-loaded code, e.g. a legacy popup dialog or a legacy route. To encourage this, I made a lazyLegacyRoot(() => import(...)) wrapper that is similar in spirit to lazy(). You use <Suspense> to show the loading state.
Code sharing: When you split code between legacy and modern folders, there will be a bunch of React code you want to share. But since we rely on Node resolution, we can't have the same files having different meaning of the react import depending on whether they were imported from src/modern or src/legacy. As a workaround, I added src/shared folder that is being watched. Every change in it gets replicated by a watcher into src/modern/shared and src/legacy/shared which are ignored in source control. This is pretty low-tech and the part I like about this setup the least. But it seems like that's also the part you can replace on your own if you're ready to fiddle with the configs. Note that this does mean this code gets duplicated between the two bundles. I don't have a good solution to that.
Third-party libraries: We have three package.json: one at the root for build tooling, one in src/modern/package.json and one in src/legacy/package.json. Reacts are defined in the nested ones. This is where you put third-party libraries that depend on React. The nested package.jsons may use different libraries or even different versions. Note that src/shared has no package.json, but files there can use third-party libs (else we wouldn't be able to share Hooks and Components). Again, this works because src/shared/* gets copied into shared subdirectories of both modern and legacy.

As an exercise and to verify this setup works, I converted a simple (but not trivial) app to this setup locally, extracting one of the component subtrees into legacy. The most frustrating part of this process was figuring out which code needs to be shared and which parts are not, and then changing a bunch of relative paths. The rest went fairly smoothly and the end result worked as soon as I bridged all contexts. So overall I think this works but maybe it could be more ergonomic. However, I still think requiring fiddling with config would make this example a lot less versatile and useful.

This repo in particular demonstrates a legacy app nested into a modern one. But we could swap folders and do the opposite. There's nothing in particular that enforces the direction.

Note: In React repo I notice an issue where npm start shows a bunch of ESLint warnings, but a second npm start works. I couldn't reproduce it outside of our repo so this seems like a CRA quirk that's unrelated to this demo.

codesandbox-ci · 2020-08-05T01:45:59Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 6b95f87:

Sandbox	Source
React	Configuration

sizebot · 2020-08-05T01:50:56Z

No significant bundle size changes to report.

Size changes (stable)

Generated by 🚫 dangerJS against 6b95f87

sizebot · 2020-08-05T01:50:58Z

No significant bundle size changes to report.

Size changes (experimental)

Generated by 🚫 dangerJS against 6b95f87

gaearon · 2020-08-05T01:51:10Z

fixtures/nesting/.eslintignore

@@ -0,0 +1 @@
+src/*/node_modules


This is awkward. I wish it just worked in CRA, but it doesn't.

gaearon · 2020-08-05T01:51:31Z

fixtures/nesting/.gitignore

+
+# copies of shared
+src/*/shared
+src/*/node_modules


This is the new part compared to vanilla CRA.

gaearon · 2020-08-05T01:52:03Z

fixtures/nesting/src/modern/AboutPage.js

+import ThemeContext from './shared/ThemeContext';
+import withLegacyRoot from './withLegacyRoot';
+
+const Greeting = withLegacyRoot(() => import('../legacy/Greeting'));


This is the API.

(If you build in prod mode, webpack puts the second React in a chunk, as expected.)

gaearon · 2020-08-05T01:54:59Z

fixtures/nesting/src/modern/withLegacyRoot.js

+      }
+    );
+  }
+  throw record.promise;


So.. This is Suspense. I wanted to use lazy but that doesn't work because the component is going to be rendered by the other React but we want this React to wait. And we can't suspend in the commit phase.

I don't know if this is bad. It seems like it's part of the contract anyway and there are fairly major libs relying on it. Including Loadable Components. So we might as well use it in an example?

The benefit is that I think this pretty strongly encourages you to code-split the other React.

We could also tuck it into a library but seems nice to have a full view of the setup for customization.

gaearon · 2020-08-05T01:55:18Z

fixtures/nesting/src/shared/useTime.js

+import {useState, useEffect} from 'react';
+
+export default function useTimer() {
+  const [value, setValue] = useState(() => new Date());


This is just to show that Hooks work in "shared" code.

gaearon · 2020-08-05T01:55:41Z

fixtures/nesting/src/modern/withLegacyRoot.js

+
+    const theme = useContext(ThemeContext);
+    const router = useContext(__RouterContext);
+    const context = useMemo(


Context collected to be bridged.

fixtures/nesting/src/legacy/createLegacyRoot.js

gaearon · 2020-08-05T02:31:40Z

fixtures/nesting/src/legacy/createLegacyRoot.js

+  );
+}
+
+export default function createLegacyRoot(container) {


This intentionally mirrors createRoot so it's easier to transition a file like this to it when it exists — for people bridging in the reverse direction.

bvaughn · 2020-08-05T13:48:51Z

Nice! This mostly even works with DevTools. (The "inspect" button doesn't work for the inner React but that's probably fine.

mjackson · 2020-08-05T21:33:30Z

Just a quick note here (already spoke with @gaearon about this on Twitter DM): This won't work with React Router v6+ because we don't expose context at all in the react-router package. The reason we did it in v5 was because changes in the context API required us to maintain a reference to the context object. But v6 uses hooks to access things on context instead of exposing the object itself.

rickhanlonii

LGTM, this is a nice way to brute force it to work generically.

There's gotta be a way to do this without copying the shared files so you can hook it up in place, but that would probably require a deeper integration into the build system or environment.

Also, I added a README 🚀

fixtures/nesting/src/modern/lazyLegacyRoot.js

fixtures/nesting/package.json

rickhanlonii · 2020-08-06T05:36:31Z

How do you expect the nested root to unmount?

The more I toggle the about page, the more roots are created:

sebmarkbage · 2020-08-06T15:45:31Z

Where do I put a Flux store that is used by both legacy and modern? It's only ok if it doesn't any have dependencies on React.

gaearon · 2020-08-06T15:52:33Z

You'd put it above. (But yes, that presumes no dependency on React.) Why would a Flux store depend on React?

fixtures/nesting/src/modern/AboutPage.js

sebmarkbage · 2020-08-06T15:55:19Z

Maybe we should add a Flux store to demonstrate that? Seems non-obvious since it seems like you could put it in shared but that won't work.

gaearon · 2020-08-06T15:56:58Z

Does Redux count as Flux? :-)

sebmarkbage · 2020-08-06T16:37:28Z

Does Redux count as Flux? :-)

Yes. A wolf in sheep's clothing is still a wolf.

sebmarkbage · 2020-08-06T16:38:36Z

It might be good to try this with a build of React that renames all the internal fields and symbols to make sure it actually works with a different implementation.

Co-authored-by: Ricky <rickhanlonii@gmail.com>

gaearon · 2020-08-06T17:06:09Z

The more I toggle the about page, the more roots are created:

Yeah I messed it up. Should be fixed.

gaearon · 2020-08-06T21:26:29Z

Added Redux to the example. Tested with a version that has different Symbols and internal Fiber field names.

facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Aug 5, 2020

gaearon requested a review from sebmarkbage August 5, 2020 01:44

gaearon commented Aug 5, 2020

View reviewed changes

gaearon force-pushed the nesting branch from 13317b6 to b2de7cf Compare August 5, 2020 02:22

Nesting Fixture

df63d68

gaearon force-pushed the nesting branch from b2de7cf to df63d68 Compare August 5, 2020 02:27

gaearon commented Aug 5, 2020

View reviewed changes

Add README to nesting fixture

ebfeb86

rickhanlonii approved these changes Aug 6, 2020

View reviewed changes

fixtures/nesting/src/modern/lazyLegacyRoot.js Outdated Show resolved Hide resolved

fixtures/nesting/src/modern/lazyLegacyRoot.js Outdated Show resolved Hide resolved

fixtures/nesting/src/modern/lazyLegacyRoot.js Show resolved Hide resolved

fixtures/nesting/package.json Show resolved Hide resolved

sebmarkbage reviewed Aug 6, 2020

View reviewed changes

fixtures/nesting/src/modern/AboutPage.js Outdated Show resolved Hide resolved

gaearon and others added 2 commits August 6, 2020 17:39

Apply suggestions from code review

c269b0e

Co-authored-by: Ricky <rickhanlonii@gmail.com>

Fixes

a415b98

gaearon force-pushed the nesting branch 2 times, most recently from 35c4791 to aaac26f Compare August 6, 2020 21:22

gaearon force-pushed the nesting branch from aaac26f to 65317d0 Compare August 6, 2020 21:27

Add Redux

b2b8c06

gaearon force-pushed the nesting branch from 65317d0 to b2b8c06 Compare August 6, 2020 21:50

gaearon and others added 6 commits August 6, 2020 23:52

Use different versions

5e82544

Use Consumer API

2c89368

Rename helper

f95a5b5

Write docs

f0f0e29

Update README.md

b6f0805

Update README.md

6b95f87

gaearon merged commit 3367298 into facebook:master Aug 7, 2020

gaearon deleted the nesting branch August 7, 2020 01:18

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Nesting Fixture #19531

Nesting Fixture #19531

gaearon commented Aug 5, 2020 •

edited

Loading

codesandbox-ci bot commented Aug 5, 2020 •

edited

Loading

sizebot commented Aug 5, 2020 •

edited

Loading

sizebot commented Aug 5, 2020 •

edited

Loading

gaearon Aug 5, 2020

gaearon Aug 5, 2020

gaearon Aug 5, 2020

gaearon Aug 5, 2020

gaearon Aug 5, 2020

gaearon Aug 5, 2020

gaearon Aug 5, 2020

gaearon Aug 5, 2020

gaearon Aug 5, 2020

bvaughn commented Aug 5, 2020

mjackson commented Aug 5, 2020

rickhanlonii left a comment

rickhanlonii commented Aug 6, 2020

sebmarkbage commented Aug 6, 2020

gaearon commented Aug 6, 2020

sebmarkbage commented Aug 6, 2020

gaearon commented Aug 6, 2020

sebmarkbage commented Aug 6, 2020

sebmarkbage commented Aug 6, 2020

gaearon commented Aug 6, 2020

gaearon commented Aug 6, 2020

		@@ -0,0 +1 @@
		src/*/node_modules

Nesting Fixture #19531

Nesting Fixture #19531

Conversation

gaearon commented Aug 5, 2020 • edited Loading

codesandbox-ci bot commented Aug 5, 2020 • edited Loading

sizebot commented Aug 5, 2020 • edited Loading

Size changes (stable)

sizebot commented Aug 5, 2020 • edited Loading

Size changes (experimental)

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bvaughn commented Aug 5, 2020

mjackson commented Aug 5, 2020

rickhanlonii left a comment

Choose a reason for hiding this comment

rickhanlonii commented Aug 6, 2020

sebmarkbage commented Aug 6, 2020

gaearon commented Aug 6, 2020

sebmarkbage commented Aug 6, 2020

gaearon commented Aug 6, 2020

sebmarkbage commented Aug 6, 2020

sebmarkbage commented Aug 6, 2020

gaearon commented Aug 6, 2020

gaearon commented Aug 6, 2020

gaearon commented Aug 5, 2020 •

edited

Loading

codesandbox-ci bot commented Aug 5, 2020 •

edited

Loading

sizebot commented Aug 5, 2020 •

edited

Loading

sizebot commented Aug 5, 2020 •

edited

Loading