|
| 1 | +# Nested React Demo |
| 2 | + |
| 3 | +This is a demo of how you can configure a build system to serve **two different versions of React** side by side in the same app. This is not optimal, and should only be used as a compromise to prevent your app from getting stuck on an old version of React. |
| 4 | + |
| 5 | +## You Probably Don't Need This |
| 6 | + |
| 7 | +Note that **this approach is meant to be an escape hatch, not the norm**. |
| 8 | + |
| 9 | +Normally, we encourage you to use a single version of React across your whole app. When you need to upgrade React, it is better to try to upgrade it all at once. We try to keep breaking changes between versions to the minimum, and often there are automatic scripts ("codemods") that can assist you with migration. You can always find the migration information for any release on [our blog](https://reactjs.org/blog/). |
| 10 | + |
| 11 | +Using a single version of React removes a lot of complexity. It is also essential to ensure the best experience for your users who don't have to download the code twice. Always prefer using one React. |
| 12 | + |
| 13 | +## What Is This For? |
| 14 | + |
| 15 | +However, for some apps that have been in production for many years, upgrading all screens at once may be prohibitively difficult. For example, React components written in 2014 may still rely on [the unofficial legacy context API](https://reactjs.org/docs/legacy-context.html) (not to be confused with the modern one), and are not always maintained. |
| 16 | + |
| 17 | +Traditionally, this meant that if a legacy API is deprecated, you would be stuck on the old version of React forever. That prevents your whole app from receiving improvements and bugfixes. This repository demonstrates a hybrid approach. It shows how you can use a newer version of React for some parts of your app, while **lazy-loading an older version of React** for the parts that haven't been migrated yet. |
| 18 | + |
| 19 | +This approach is inherently more complex, and should be used as a last resort when you can't upgrade. |
| 20 | + |
| 21 | +## Version Requirements |
| 22 | + |
| 23 | +This demo uses two different versions of React: React 17 for "modern" components (in `src/modern`), and React 16.8 for "legacy" components (in `src/legacy`). |
| 24 | + |
| 25 | +**We still recommend upgrading your whole app to React 17 in one piece.** The React 17 release intentionally has minimal breaking changes so that it's easier to upgrade to. In particular, React 17 solves some problems with nesting related to event propagation that earlier versions of React did not handle well. We expect that this nesting demo may not be as useful today as during a future migration from React 17 to the future major versions where some of the long-deprecated APIs may be removed. |
| 26 | + |
| 27 | +However, if you're already stuck on an old version of React, you may found this approach useful today. If you remove a Hook call from `src/shared/Clock.js`, you can downgrade the legacy React all the way down to React 16.3. If you then remove Context API usage from `src/legacy/createLegacyRoot.js`, you can further downgrade the legacy React version, but keep in mind that the usage of third-party libraries included in this demo (React Router and React Redux) may need to be adjusted or removed. |
| 28 | + |
| 29 | +## Installation |
| 30 | + |
| 31 | +To run this demo, open its folder in Terminal and execute: |
| 32 | + |
| 33 | +```sh |
| 34 | +npm install |
| 35 | +npm start |
| 36 | +``` |
| 37 | + |
| 38 | +If you want to test the production build, you can run instead: |
| 39 | + |
| 40 | +``` |
| 41 | +npm install |
| 42 | +npm run build |
| 43 | +npx serve -s build |
| 44 | +``` |
| 45 | + |
| 46 | +This sample app uses client-side routing and consists of two routes: |
| 47 | + |
| 48 | +- `/` renders a page which uses a newer version of React. (In the production build, you can verify that only one version of React is being loaded when this route is rendered.) |
| 49 | +- `/about` renders a page which uses an older version of React for a part of its tree. (In the production build, you can verify that both versions of React are loaded from different chunks.) |
| 50 | + |
| 51 | +**The purpose of this demo is to show some nuances of such setup:** |
| 52 | + |
| 53 | +- How to install two versions of React in a single app with npm side by side. |
| 54 | +- How to avoid the ["invalid Hook call" error](https://github.com/facebook/react/issues/13991) while nesting React trees. |
| 55 | +- How to pass context between different versions of React. |
| 56 | +- How to lazy-load the second React bundle so it's only loaded on the screens that use it. |
| 57 | +- How to do all of this without a special bundler configuration. |
| 58 | + |
| 59 | +## How It Works |
| 60 | + |
| 61 | +File structure is extremely important in this demo. It has a direct effect on which code is going to use which version of React. This particular demo is using Create React App without ejecting, so **it doesn't rely on any bundler plugins or configuration**. The principle of this demo is portable to other setups. |
| 62 | + |
| 63 | +### Dependencies |
| 64 | + |
| 65 | +We will use three different `package.json`s: one for non-React code at the root, and two in the respective `src/legacy` and `src/modern` folders that specify the React dependencies: |
| 66 | + |
| 67 | +- **`package.json`**: The root `package.json` is a place for build dependencies (such as `react-scripts`) and any React-agnostic libraries (for example, `lodash`, `immer`, or `redux`). We do **not** include React or any React-related libraries in this file. |
| 68 | +- **`src/legacy/package.json`**: This is where we declare the `react` and `react-dom` dependencies for the "legacy" trees. In this demo, we're using React 16.8 (although, as noted above, we could downgrade it further below). This is **also** where we specify any third-party libraries that use React. For example, we include `react-router` and `react-redux` in this example. |
| 69 | +- **`src/modern/package.json`**: This is where we declare the `react` and `react-dom` dependencies for the "modern" trees. In this demo, we're using React 17. Here, we also specify third-party dependencies that use React and are used from the modern part of our app. This is why we *also* have `react-router` and `react-redux` in this file. (Their versions don't strictly have to match their `legacy` counterparts, but features that rely on context may require workarounds if they differ.) |
| 70 | + |
| 71 | +The `scripts` in the root `package.json` are set up so that when you run `npm install` in it, it also runs `npm intall` in both `src/legacy` and `src/modern` folders. |
| 72 | + |
| 73 | +**Note:** This demo is set up to use a few third-party dependencies (React Router and Redux). These are not essential, and you can remove them from the demo. They are included so we can show how to make them work with this approach. |
| 74 | + |
| 75 | +### Folders |
| 76 | + |
| 77 | +There are a few key folders in this example: |
| 78 | + |
| 79 | +- **`src`**: Root of the source tree. At this level (or below it, except for the special folders noted below), you can put any logic that's agnostic of React. For example, in this demo we have `src/index.js` which is the app's entry point, and `src/store.js` which exports a Redux store. These regular modules only execute once, and are **not** duplicated between the bundles. |
| 80 | +- **`src/legacy`**: This is where all the code using the older version of React should go. This includes React components and Hooks, and general product code that is **only** used by the legacy trees. |
| 81 | +- **`src/modern`**: This is where all the code using the newer version of React should go. This includes React components and Hooks, and general product code that is **only** used by the modern trees. |
| 82 | +- **`src/shared`**: You may have some components or Hooks that you wish to use from both modern and legacy subtrees. The build process is set up so that **everything inside `src/shared` gets copied by a file watcher** into both `src/legacy/shared` and `src/modern/shared` on every change. This lets you write a component or a Hook once, but reuse it in both places. |
| 83 | + |
| 84 | +### Lazy Loading |
| 85 | + |
| 86 | +Loading two Reacts on the same page is bad for the user experience, so you should strive to push this as far as possible from the critical path of your app. For example, if there is a dialog that is less commonly used, or a route that is rarely visited, those are better candidates for staying on an older version of React than parts of your homepage. |
| 87 | + |
| 88 | +To encourage only loading the older React when necessary, this demo includes a helper that works similarly to `React.lazy`. For example, `src/modern/AboutPage.js`, simplified, looks like this: |
| 89 | + |
| 90 | +```js |
| 91 | +import lazyLegacyRoot from './lazyLegacyRoot'; |
| 92 | + |
| 93 | +// Lazy-load a component from the bundle using legacy React. |
| 94 | +const Greeting = lazyLegacyRoot(() => import('../legacy/Greeting')); |
| 95 | + |
| 96 | +function AboutPage() { |
| 97 | + return ( |
| 98 | + <> |
| 99 | + <h3>This component is rendered by React ({React.version}).</h3> |
| 100 | + <Greeting /> |
| 101 | + </> |
| 102 | + ); |
| 103 | +} |
| 104 | +``` |
| 105 | + |
| 106 | +As a result, only if the `AboutPage` (and as a result, `<Greeting />`) gets rendered, we will load the bundle containing the legacy React and the legacy `Greeting` component. Like with `React.lazy()`, we wrap it in `<Suspense>` to specify the loading indicator: |
| 107 | + |
| 108 | +```js |
| 109 | +<Suspense fallback={<Spinner />}> |
| 110 | + <AboutPage /> |
| 111 | +</Suspense> |
| 112 | +``` |
| 113 | + |
| 114 | +If the legacy component is only rendered conditionally, we won't load the second React until it's shown: |
| 115 | + |
| 116 | +```js |
| 117 | +<> |
| 118 | + <button onClick={() => setShowGreeting(true)}> |
| 119 | + Say hi |
| 120 | + </button> |
| 121 | + {showGreeting && ( |
| 122 | + <Suspense fallback={<Spinner />}> |
| 123 | + <Greeting /> |
| 124 | + </Suspense> |
| 125 | + )} |
| 126 | +</> |
| 127 | +``` |
| 128 | + |
| 129 | + |
| 130 | +The implementation of the `src/modern/lazyLegacyRoot.js` helper is included so you can tweak it and customize it to your needs. Remember to test lazy loading with the production builds because the bundler may not optimize it in development. |
| 131 | + |
| 132 | +### Context |
| 133 | + |
| 134 | +If you have nested trees managed by different versions of React, the inner tree won't "see" the outer tree's Context. |
| 135 | + |
| 136 | +This breaks third-party libraries like React Redux or React Router, as well as any of your own usage of Context (for example, for theming). |
| 137 | + |
| 138 | +To solve this problem, we read all the Contexts we care about in the outer tree, pass them to the inner tree, and then wrap the inner tree in the corresponding Providers. You can see this in action in two files: |
| 139 | + |
| 140 | +* `src/modern/lazyLegacyRoot.js`: Look for `useContext` calls, and how their results are combined into a single object that is passed through. **You can read more Contexts there** if your app requires them. |
| 141 | +* `src/legacy/createLegacyRoot.js`: Look for the `Bridge` component which receives that object and wraps its children with the appropriate Context Providers. **You can wrap them with more Providers there** if your app requires them. |
| 142 | + |
| 143 | +Note that, generally saying, this approach is somewhat fragile, especially because some libraries may not expose their Contexts officially or consider their structure private. You may be able to expose private Contexts by using a tool like [patch-package](https://www.npmjs.com/package/patch-package), but remember to keep all the versions pinned because even a patch release of a third-party library may change the behavior. |
| 144 | + |
| 145 | +### Nesting Direction |
| 146 | + |
| 147 | +In this demo, we use an older React inside an app managed by the newer React. However, we could rename the folders and apply the same approach in the other direction. |
| 148 | + |
| 149 | +### Event Propagation |
| 150 | + |
| 151 | +Note that before React 17, `event.stopPropagation()` in the inner React tree does not prevent the event propagation to the outer React tree. This may cause unexpected behavior when extracting a UI tree like a dialog to use a separate React. This is because prior to React 17, both Reacts would attach the event listener at the `document` level. React 17 fixes this by attaching handlers to the roots. We strongly recommend upgrading to React 17 before considering the nesting strategy for future upgrades. |
| 152 | + |
| 153 | +### Gotchas |
| 154 | + |
| 155 | +This setup is unusual, so it has a few gotchas. |
| 156 | + |
| 157 | +* Don't add `package.json` to the `src/shared` folder. For example, if you want to use an npm React component inside `src/shared`, you should add it to both `src/modern/package.json` and `src/legacy/package.json` instead. You can use different versions of it but make sure your code works with both of them — and that it works with both Reacts! |
| 158 | +* Don't use React outside of the `src/modern`, `src/legacy`, or `src/shared`. Don't add React-related libraries outside of `src/modern/package.json` or `src/legacy/package.json`. |
| 159 | +* Remember that `src/shared` is where you write shared components, but the files you write there are automatically copied into `src/modern/shared` and `src/legacy/shared`, **from which you should import them**. Both of the target directories are in `.gitignore`. Importing directly from `src/shared` **will not work** because it is ambiguous what `react` refers to in that folder. |
| 160 | +* Keep in mind that any code in `src/shared` gets duplicated between the legacy and the modern bundles. Code that should not be duplicated needs to be anywhere else in `src` (but you can't use React there since the version is ambiguous). |
| 161 | +* You'll want to exclude `src/*/node_modules` from your linter's configuration, as this demo does in `.eslintignorerc`. |
| 162 | + |
| 163 | +This setup is complicated, and we don't recommend it for most apps. However, we believe it is important to offer it as an option for apps that would otherwise get left behind. There might be ways to simplify it with a layer of tooling, but this example is intentionally showing the low-level mechanism that other tools may build on. |
0 commit comments