diff --git a/.circleci/config.yml b/.circleci/config.yml
deleted file mode 100644
index 028250472..000000000
--- a/.circleci/config.yml
+++ /dev/null
@@ -1,20 +0,0 @@
-version: 2
-jobs:
-  build:
-    docker:
-      - image: circleci/node:12
-    steps:
-      - checkout
-      - restore_cache:
-          keys:
-            - dependencies-{{ checksum "yarn.lock" }}
-      - run:
-          name: Install
-          command: yarn install --pure-lockfile
-      - save_cache:
-          paths:
-            - node_modules
-          key: dependencies-{{ checksum "yarn.lock" }}
-      - run:
-          name: Check Prettier, ESLint, Flow
-          command: yarn ci-check
diff --git a/.eslintignore b/.eslintignore
index 942541715..ee6604687 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,5 +1,8 @@
 node_modules/*
 
+# Skip beta
+beta/*
+
 # Ignore markdown files and examples
 content/*
 
diff --git a/.flowconfig b/.flowconfig
index 836f6ec1e..baf4b0255 100644
--- a/.flowconfig
+++ b/.flowconfig
@@ -1,5 +1,6 @@
 [ignore]
 
+<PROJECT_ROOT>/beta/.*
 <PROJECT_ROOT>/content/.*
 <PROJECT_ROOT>/node_modules/.*
 <PROJECT_ROOT>/public/.*
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index 66be15553..e34dda4af 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -4,7 +4,7 @@ Thank you for the PR! Contributors like you keep React awesome!
 
 Please see the Contribution Guide for guidelines:
 
-https://github.com/reactjs/reactjs.org/blob/master/CONTRIBUTING.md
+https://github.com/reactjs/reactjs.org/blob/main/CONTRIBUTING.md
 
 If your PR references an existing issue, please add the issue number below
 
diff --git a/.github/labeler.yml b/.github/labeler.yml
new file mode 100644
index 000000000..7768da2ba
--- /dev/null
+++ b/.github/labeler.yml
@@ -0,0 +1,2 @@
+beta:
+- beta/**/*
diff --git a/.github/workflows/analyze.yml b/.github/workflows/analyze.yml
new file mode 100644
index 000000000..ea9f6b573
--- /dev/null
+++ b/.github/workflows/analyze.yml
@@ -0,0 +1,96 @@
+name: Analyze Bundle
+
+on:
+  pull_request:
+  push:
+    branches:
+      - main # change this if your default branch is named differently
+  workflow_dispatch:
+
+jobs:
+  analyze:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Set up node
+        uses: actions/setup-node@v1
+        with:
+          node-version: "14.x"
+
+      - name: Install dependencies
+        uses: bahmutov/npm-install@v1.7.10
+        with:
+          working-directory: 'beta'
+
+      - name: Restore next build
+        uses: actions/cache@v2
+        id: restore-build-cache
+        env:
+          cache-name: cache-next-build
+        with:
+          path: beta/.next/cache
+          # change this if you prefer a more strict cache
+          key: ${{ runner.os }}-build-${{ env.cache-name }}
+
+      - name: Build next.js app
+        # change this if your site requires a custom build command
+        run: ./node_modules/.bin/next build
+        working-directory: beta
+
+      # Here's the first place where next-bundle-analysis' own script is used
+      # This step pulls the raw bundle stats for the current bundle
+      - name: Analyze bundle
+        run: npx -p nextjs-bundle-analysis report
+        working-directory: beta
+
+      - name: Upload bundle
+        uses: actions/upload-artifact@v2
+        with:
+          path: beta/.next/analyze/__bundle_analysis.json
+          name: bundle_analysis.json
+
+      - name: Download base branch bundle stats
+        uses: dawidd6/action-download-artifact@v2
+        if: success() && github.event.number
+        with:
+          workflow: analyze.yml
+          branch: ${{ github.event.pull_request.base.ref }}
+          name: bundle_analysis.json
+          path: beta/.next/analyze/base/bundle
+
+      # And here's the second place - this runs after we have both the current and
+      # base branch bundle stats, and will compare them to determine what changed.
+      # There are two configurable arguments that come from package.json:
+      #
+      # - budget: optional, set a budget (bytes) against which size changes are measured
+      #           it's set to 350kb here by default, as informed by the following piece:
+      #           https://infrequently.org/2021/03/the-performance-inequality-gap/
+      #
+      # - red-status-percentage: sets the percent size increase where you get a red
+      #                          status indicator, defaults to 20%
+      #
+      # Either of these arguments can be changed or removed by editing the `nextBundleAnalysis`
+      # entry in your package.json file.
+      - name: Compare with base branch bundle
+        if: success() && github.event.number
+        run: ls -laR .next/analyze/base && npx -p nextjs-bundle-analysis compare
+        working-directory: beta
+
+      - name: Upload analysis comment
+        uses: actions/upload-artifact@v2
+        with:
+          name: analysis_comment.txt
+          path: beta/.next/analyze/__bundle_analysis_comment.txt
+
+      - name: Save PR number
+        run: echo ${{ github.event.number }} > ./pr_number
+
+      - name: Upload PR number
+        uses: actions/upload-artifact@v2
+        with:
+          name: pr_number
+          path: ./pr_number
+
+      # The actual commenting happens in the other action, matching the guidance in
+      # https://securitylab.github.com/research/github-actions-preventing-pwn-requests/
diff --git a/.github/workflows/analyze_comment.yml b/.github/workflows/analyze_comment.yml
new file mode 100644
index 000000000..8166089fd
--- /dev/null
+++ b/.github/workflows/analyze_comment.yml
@@ -0,0 +1,72 @@
+name: Analyze Bundle (Comment)
+
+on:
+  workflow_run:
+    workflows: ["Analyze Bundle"]
+    types:
+      - completed
+
+jobs:
+  comment:
+    runs-on: ubuntu-latest
+    if: >
+      ${{ github.event.workflow_run.event == 'pull_request' &&
+      github.event.workflow_run.conclusion == 'success' }}
+    steps:
+      - name: Download base branch bundle stats
+        uses: dawidd6/action-download-artifact@v2
+        with:
+          workflow: analyze.yml
+          run_id: ${{ github.event.workflow_run.id }}
+          name: analysis_comment.txt
+          path: analysis_comment.txt
+
+      - name: Download PR number
+        uses: dawidd6/action-download-artifact@v2
+        with:
+          workflow: analyze.yml
+          run_id: ${{ github.event.workflow_run.id }}
+          name: pr_number
+          path: pr_number
+
+      - name: Get comment body
+        id: get-comment-body
+        if: success()
+        run: |
+          pr_number=$(cat pr_number/pr_number)
+          body=$(cat analysis_comment.txt/__bundle_analysis_comment.txt)
+          body="## Size Changes
+          <details>
+
+          ${body}
+          
+          </details>"
+          body="${body//'%'/'%25'}"
+          body="${body//$'\n'/'%0A'}"
+          body="${body//$'\r'/'%0D'}"
+          echo ::set-output name=body::$body
+          echo ::set-output name=pr-number::$pr_number
+
+      - name: Find Comment
+        uses: peter-evans/find-comment@v1
+        if: success()
+        id: fc
+        with:
+          issue-number: ${{ steps.get-comment-body.outputs.pr-number }}
+          body-includes: "<!-- __NEXTJS_BUNDLE -->"
+
+      - name: Create Comment
+        uses: peter-evans/create-or-update-comment@v1.4.4
+        if: success() && steps.fc.outputs.comment-id == 0
+        with:
+          issue-number: ${{ steps.get-comment-body.outputs.pr-number }}
+          body: ${{ steps.get-comment-body.outputs.body }}
+
+      - name: Update Comment
+        uses: peter-evans/create-or-update-comment@v1.4.4
+        if: success() && steps.fc.outputs.comment-id != 0
+        with:
+          issue-number: ${{ steps.get-comment-body.outputs.pr-number }}
+          body: ${{ steps.get-comment-body.outputs.body }}
+          comment-id: ${{ steps.fc.outputs.comment-id }}
+          edit-mode: replace
\ No newline at end of file
diff --git a/.github/workflows/beta_site_lint.yml b/.github/workflows/beta_site_lint.yml
new file mode 100644
index 000000000..a9cacd7f0
--- /dev/null
+++ b/.github/workflows/beta_site_lint.yml
@@ -0,0 +1,30 @@
+name: Beta Site Lint / Heading ID check
+
+on:
+  push:
+    branches:
+      - main # change this if your default branch is named differently
+  pull_request:
+    types: [opened, synchronize, reopened]
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+
+    name: Lint on node 12.x and ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v1
+      - name: Use Node.js 12.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12.x
+
+      - name: Install deps and build (with cache)
+        uses: bahmutov/npm-install@v1.7.10
+        with:
+          working-directory: 'beta'
+
+
+      - name: Lint codebase
+        run: cd beta && yarn ci-check
diff --git a/.github/workflows/label.yml b/.github/workflows/label.yml
new file mode 100644
index 000000000..90a961d4c
--- /dev/null
+++ b/.github/workflows/label.yml
@@ -0,0 +1,22 @@
+# This workflow will triage pull requests and apply a label based on the
+# paths that are modified in the pull request.
+#
+# To use this workflow, you will need to set up a .github/labeler.yml
+# file with configuration.  For more information, see:
+# https://github.com/actions/labeler
+
+name: Labeler
+on: [pull_request_target]
+
+jobs:
+  label:
+
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pull-requests: write
+
+    steps:
+    - uses: actions/labeler@v2
+      with:
+        repo-token: "${{ secrets.GITHUB_TOKEN }}"
diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml
new file mode 100644
index 000000000..eed7b3d94
--- /dev/null
+++ b/.github/workflows/nodejs.yml
@@ -0,0 +1,27 @@
+name: Lint / Flow check
+
+on:
+  push:
+    branches:
+      - main # change this if your default branch is named differently
+  pull_request:
+    types: [opened, synchronize, reopened]
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+
+    name: Lint on node 12.x and ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v1
+      - name: Use Node.js 12.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12.x
+
+      - name: Install deps and build (with cache)
+        uses: bahmutov/npm-install@v1.7.10
+
+      - name: Lint codebase
+        run: yarn ci-check
diff --git a/.gitignore b/.gitignore
index d1bde99ce..e81f1af62 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,5 +2,5 @@
 .DS_STORE
 .idea
 node_modules
-public
+/public
 yarn-error.log
\ No newline at end of file
diff --git a/.nvmrc b/.nvmrc
index 66df3b7ab..898e643b0 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-12.16.1
+12.22.0
diff --git a/README.md b/README.md
index 5d6618963..0b91c9aa6 100644
--- a/README.md
+++ b/README.md
@@ -8,7 +8,7 @@ This repo contains the source code and documentation powering [reactjs.org](http
 
 1. Git
 1. Node: any 12.x version starting with v12.0.0 or greater
-1. Yarn: See [Yarn website for installation instructions](https://yarnpkg.com/lang/en/docs/install/)
+1. Yarn v1: See [Yarn website for installation instructions](https://yarnpkg.com/lang/en/docs/install/)
 1. A fork of the repo (for any contributions)
 1. A clone of the [reactjs.org repo](https://github.com/reactjs/reactjs.org) on your local machine
 
@@ -26,12 +26,12 @@ This repo contains the source code and documentation powering [reactjs.org](http
 
 ### Guidelines
 
-The documentation is divided into several sections with a different tone and purpose. If you plan to write more than a few sentences, you might find it helpful to get familiar with the [contributing guidelines](https://github.com/reactjs/reactjs.org/blob/master/CONTRIBUTING.md#guidelines-for-text) for the appropriate sections.
+The documentation is divided into several sections with a different tone and purpose. If you plan to write more than a few sentences, you might find it helpful to get familiar with the [contributing guidelines](https://github.com/reactjs/reactjs.org/blob/main/CONTRIBUTING.md#guidelines-for-text) for the appropriate sections.
 
 ### Create a branch
 
-1. `git checkout master` from any folder in your local `reactjs.org` repository
-1. `git pull origin master` to ensure you have the latest main code
+1. `git checkout main` from any folder in your local `reactjs.org` repository
+1. `git pull origin main` to ensure you have the latest main code
 1. `git checkout -b the-name-of-my-branch` (replacing `the-name-of-my-branch` with a suitable name) to create a branch
 
 ### Make the change
@@ -53,11 +53,11 @@ The documentation is divided into several sections with a different tone and pur
 1. `git push my-fork-name the-name-of-my-branch`
 1. Go to the [reactjs.org repo](https://github.com/reactjs/reactjs.org) and you should see recently pushed branches.
 1. Follow GitHub's instructions.
-1. If possible, include screenshots of visual changes. A [Netlify](https://www.netlify.com/) build will also be automatically created once you make your PR so other people can see your change.
+1. If possible, include screenshots of visual changes. A preview build is triggered after your changes are pushed to GitHub.
 
 ## Translation
 
-If you are interested in translating `reactjs.org`, please see the current translation efforts at [isreacttranslatedyet.com](https://www.isreacttranslatedyet.com/).
+If you are interested in translating `reactjs.org`, please see the current translation efforts at [translations.reactjs.org](https://translations.reactjs.org/).
 
 
 If your language does not have a translation and you would like to create one, please follow the instructions at [reactjs.org Translations](https://github.com/reactjs/reactjs.org-translation#translating-reactjsorg).
@@ -67,4 +67,4 @@ If your language does not have a translation and you would like to create one, p
 - `yarn reset` to clear the local cache
 
 ## License
-Content submitted to [reactjs.org](https://reactjs.org/) is CC-BY-4.0 licensed, as found in the [LICENSE-DOCS.md](https://github.com/open-source-explorer/reactjs.org/blob/master/LICENSE-DOCS.md) file.
+Content submitted to [reactjs.org](https://reactjs.org/) is CC-BY-4.0 licensed, as found in the [LICENSE-DOCS.md](LICENSE-DOCS.md) file.
diff --git a/beta/.env.development b/beta/.env.development
new file mode 100644
index 000000000..a692f21c7
--- /dev/null
+++ b/beta/.env.development
@@ -0,0 +1 @@
+SANDPACK_BARE_COMPONENTS=true 
\ No newline at end of file
diff --git a/beta/.env.production b/beta/.env.production
new file mode 100644
index 000000000..445c9c4d0
--- /dev/null
+++ b/beta/.env.production
@@ -0,0 +1,2 @@
+NEXT_PUBLIC_GA_TRACKING_ID = 'UA-41298772-4'
+SANDPACK_BARE_COMPONENTS=true 
\ No newline at end of file
diff --git a/beta/.eslintignore b/beta/.eslintignore
new file mode 100644
index 000000000..4738cb697
--- /dev/null
+++ b/beta/.eslintignore
@@ -0,0 +1,3 @@
+scripts
+plugins
+next.config.js
diff --git a/beta/.eslintrc b/beta/.eslintrc
new file mode 100644
index 000000000..147e54607
--- /dev/null
+++ b/beta/.eslintrc
@@ -0,0 +1,16 @@
+{
+  "root": true,
+  "extends": "next/core-web-vitals",
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"],
+  "rules": {
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": "warn"
+  },
+  "env": {
+    "node": true,
+    "commonjs": true,
+    "browser": true,
+    "es6": true
+  }
+}
diff --git a/beta/.gitignore b/beta/.gitignore
new file mode 100644
index 000000000..c842b12a3
--- /dev/null
+++ b/beta/.gitignore
@@ -0,0 +1,40 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+tsconfig.tsbuildinfo
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+# external fonts
+public/fonts/Optimistic_Display_W_Lt.woff2
+public/fonts/Optimistic_Display_W_Md.woff2
+public/fonts/Optimistic_Display_W_Bd.woff2
diff --git a/beta/.husky/pre-commit b/beta/.husky/pre-commit
new file mode 100755
index 000000000..bbf64071e
--- /dev/null
+++ b/beta/.husky/pre-commit
@@ -0,0 +1,5 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+cd beta
+yarn lint-staged
\ No newline at end of file
diff --git a/beta/.prettierignore b/beta/.prettierignore
new file mode 100644
index 000000000..96f1f96d2
--- /dev/null
+++ b/beta/.prettierignore
@@ -0,0 +1 @@
+src/content/**/*.md
diff --git a/beta/.prettierrc b/beta/.prettierrc
new file mode 100644
index 000000000..19b54ad05
--- /dev/null
+++ b/beta/.prettierrc
@@ -0,0 +1,21 @@
+{
+  "bracketSpacing": false,
+  "singleQuote": true,
+  "bracketSameLine": true,
+  "trailingComma": "es5",
+  "printWidth": 80,
+  "overrides": [
+    {
+      "files": "*.css",
+      "options": {
+        "parser": "css"
+      }
+    },
+    {
+      "files": "*.md",
+      "options": {
+        "parser": "mdx"
+      }
+    }
+  ]
+}
diff --git a/beta/CONTRIBUTING.md b/beta/CONTRIBUTING.md
new file mode 100644
index 000000000..dd81c8546
--- /dev/null
+++ b/beta/CONTRIBUTING.md
@@ -0,0 +1,135 @@
+# Contributing
+
+Thank you for your interest in contributing to the React Docs!
+
+## Code of Conduct
+
+Facebook has adopted a Code of Conduct that we expect project
+participants to adhere to. Please [read the full text](https://code.facebook.com/codeofconduct)
+so that you can understand what actions will and will not be tolerated.
+
+## Technical Writing Tips
+
+This is a [good summary](https://medium.com/@kvosswinkel/coding-like-a-journalist-ee52360a16bc) for things to keep in mind when writing technical docs.
+
+## Guidelines for Text
+
+**Different sections intentionally have different styles.**
+
+The documentation is divided into sections to cater to different learning styles and use cases. When editing an article, try to match the surrounding text in tone and style. When creating a new article, try to match the tone of the other articles in the same section. Learn about the motivation behind each section below.
+
+**[Learn React](https://beta.reactjs.org/learn)** is designed to introduce fundamental concepts in a step-by-step way. Each individual article in Learn React builds on the knowledge from the previous ones, so make sure not to add any "cyclical dependencies" between them. It is important that the reader can start with the first article and work their way to the last Learn React article without ever having to "look ahead" for a definition. This explains some ordering choices (e.g. that state is explained before events, or that "thinking in React" doesn't use refs). Learn React also serves as a reference manual for React concepts, so it is important to be very strict about their definitions and relationships between them.
+
+**[API Reference](https://reactjs.org/apis/react)** is organized by APIs rather than concepts. It is intended to be exhaustive. Any corner cases or recommendations that were skipped for brevity in Learn React should be mentioned in the reference documentation for the corresponding APIs.
+
+**Try to follow your own instructions.**
+
+When writing step-by-step instructions (e.g. how to install something), try to forget everything you know about the topic, and actually follow the instructions you wrote, a single step at time. Often you will discover that there is implicit knowledge that you forgot to mention, or that there are missing or out-of-order steps in the instructions. Bonus points for getting *somebody else* to follow the steps and watching what they struggle with. Often it would be something very simple that you have not anticipated.
+
+## Guidelines for Code Examples
+
+### Syntax
+
+#### Prefer JSX to `createElement`.
+
+Ignore this if you're specifically describing `createElement`.
+
+#### Use `const` where possible, otherwise `let`. Don't use `var`.
+
+Ignore this if you're specifically writing about ES5.
+
+#### Don't use ES6 features when equivalent ES5 features have no downsides.
+
+Remember that ES6 is still new to a lot of people. While we use it in many places (`const` / `let`, classes, arrow functions), if the equivalent ES5 code is just as straightforward and readable, consider using it.
+
+In particular, you should prefer named `function` declarations over `const myFunction = () => ...` arrows for top-level functions. However, you *should* use arrow functions where they provide a tangible improvement (such as preserving `this` context inside a component). Consider both sides of the tradeoff when deciding whether to use a new feature.
+
+#### Don't use features that aren't standardized yet.
+
+For example, **don't** write this:
+
+```js
+class MyComponent extends React.Component {
+  state = {value: ''};
+  handleChange = (e) => {
+    this.setState({value: e.target.value});
+  };
+}
+```
+
+Instead, **do** write this:
+
+```js
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleChange = this.handleChange.bind(this);
+    this.state = {value: ''};
+  }
+  handleChange(e) {
+    this.setState({value: e.target.value});
+  }
+}
+```
+
+Ignore this rule if you're specifically describing an experimental proposal. Make sure to mention its experimental nature in the code and in the surrounding text.
+
+### Style
+
+- Use semicolons.
+- No space between function names and parens (`method() {}` not `method () {}`).
+- When in doubt, use the default style favored by [Prettier](https://prettier.io/playground/).
+
+### Highlighting
+
+Use `js` as the highlighting language in Markdown code blocks:
+
+````
+```js
+// code
+```
+````
+
+Sometimes you'll see blocks with numbers.  
+They tell the website to highlight specific lines.
+
+You can highlight a single line:
+
+````
+```js {2}
+function hello() {
+  // this line will get highlighted
+}
+```
+````
+
+A range of lines:
+
+````
+```js {2-4}
+function hello() {
+  // these lines
+  // will get
+  // highlighted
+}
+```
+````
+
+Or even multiple ranges:
+
+````
+```js {2-4,6}
+function hello() {
+  // these lines
+  // will get
+  // highlighted
+  console.log('hello');
+  // also this one
+  console.log('there');
+}
+```
+````
+
+Be mindful that if you move some code in an example with highlighting, you also need to update the highlighting.
+
+Don't be afraid to often use highlighting! It is very valuable when you need to focus the reader's attention on a particular detail that's easy to miss.
diff --git a/beta/README.md b/beta/README.md
new file mode 100644
index 000000000..8208938ee
--- /dev/null
+++ b/beta/README.md
@@ -0,0 +1,73 @@
+# reactjs.org
+
+This repo contains the source code and documentation powering [beta.reactjs.org](https://beta.reactjs.org/).
+
+
+## Getting started
+
+### Prerequisites
+
+1. Git
+1. Node: any 12.x version starting with v12.0.0 or greater
+1. Yarn: See [Yarn website for installation instructions](https://yarnpkg.com/lang/en/docs/install/)
+1. A fork of the repo (for any contributions)
+1. A clone of the [reactjs.org repo](https://github.com/reactjs/reactjs.org) on your local machine
+
+### Installation
+
+1. `cd reactjs.org` to go into the project root
+1. `cd beta` to open the beta website
+3. `yarn` to install the website's npm dependencies
+
+### Running locally
+
+1. Make sure you're in the `beta` folder
+1. `yarn dev` to start the development server (powered by [Next.js](https://nextjs.org/))
+1. `open http://localhost:3000` to open the site in your favorite browser
+
+## Contributing
+
+### Guidelines
+
+The documentation is divided into several sections with a different tone and purpose. If you plan to write more than a few sentences, you might find it helpful to get familiar with the [contributing guidelines](https://github.com/reactjs/reactjs.org/blob/main/CONTRIBUTING.md#guidelines-for-text) for the appropriate sections.
+
+### Create a branch
+
+1. `git checkout main` from any folder in your local `reactjs.org` repository
+1. `git pull origin main` to ensure you have the latest main code
+1. `git checkout -b the-name-of-my-branch` (replacing `the-name-of-my-branch` with a suitable name) to create a branch
+
+### Make the change
+
+1. Follow the ["Running locally"](#running-locally) instructions
+1. Save the files and check in the browser
+  1. Changes to React components in `src` will hot-reload
+  1. Changes to markdown files in `content` will hot-reload
+  1. If working with plugins, you may need to remove the `.cache` directory and restart the server
+
+### Test the change
+
+1. If possible, test any visual changes in all latest versions of common browsers, on both desktop and mobile.
+2. Run `yarn check-all` from the `beta` folder. (This will run Prettier, ESLint and validate types.)
+
+### Push it
+
+1. `git add -A && git commit -m "My message"` (replacing `My message` with a commit message, such as `Fix header logo on Android`) to stage and commit your changes
+1. `git push my-fork-name the-name-of-my-branch`
+1. Go to the [reactjs.org repo](https://github.com/reactjs/reactjs.org) and you should see recently pushed branches.
+1. Follow GitHub's instructions.
+1. If possible, include screenshots of visual changes. A preview build is triggered after your changes are pushed to GitHub.
+
+## Translation
+
+If you are interested in translating `reactjs.org`, please see the current translation efforts at [translations.reactjs.org](https://translations.reactjs.org/).
+
+
+If your language does not have a translation and you would like to create one, please follow the instructions at [reactjs.org Translations](https://github.com/reactjs/reactjs.org-translation#translating-reactjsorg).
+
+## Troubleshooting
+
+- `yarn reset` to clear the local cache
+
+## License
+Content submitted to [reactjs.org](https://reactjs.org/) is CC-BY-4.0 licensed, as found in the [LICENSE-DOCS.md](https://github.com/open-source-explorer/reactjs.org/blob/master/LICENSE-DOCS.md) file.
diff --git a/beta/colors.js b/beta/colors.js
new file mode 100644
index 000000000..bac74d41e
--- /dev/null
+++ b/beta/colors.js
@@ -0,0 +1,89 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+module.exports = {
+  // Text colors
+  primary: '#23272F', // gray-90
+  'primary-dark': '#F6F7F9', // gray-5
+  secondary: '#404756', // gray-70
+  'secondary-dark': '#EBECF0', // gray-10
+  link: '#087EA4', // blue-50
+  'link-dark': '#149ECA', // blue-40
+  syntax: '#EBECF0', // gray-10
+  wash: '#FFFFFF',
+  'wash-dark': '#23272F', // gray-90
+  card: '#F6F7F9', // gray-05
+  'card-dark': '#343A46', // gray-80
+  highlight: '#E6F7FF', // blue-10
+  'highlight-dark': 'rgba(88,175,223,.1)',
+  border: '#EBECF0', // gray-10
+  'border-dark': '#343A46', // gray-80
+  'secondary-button': '#EBECF0', // gray-10
+  'secondary-button-dark': '#404756', // gray-70
+
+  // Gray
+  'gray-95': '#16181D',
+  'gray-90': '#23272F',
+  'gray-80': '#343A46',
+  'gray-70': '#404756',
+  'gray-60': '#4E5769',
+  'gray-50': '#5E687E', // unused
+  'gray-40': '#78839B',
+  'gray-30': '#99A1B3',
+  'gray-20': '#BCC1CD',
+  'gray-10': '#EBECF0',
+  'gray-5': '#F6F7F9',
+
+  // Blue
+  'blue-60': '#045975',
+  'blue-50': '#087EA4',
+  'blue-40': '#149ECA', // Brand Blue
+  'blue-30': '#58C4DC', // unused
+  'blue-20': '#ABE2ED',
+  'blue-10': '#E6F7FF', // todo: doesn't match illustrations
+  'blue-5': '#E6F6FA',
+
+  // Yellow
+  'yellow-60': '#B65700',
+  'yellow-50': '#C76A15',
+  'yellow-40': '#DB7D27', // unused
+  'yellow-30': '#FABD62', // unused
+  'yellow-20': '#FCDEB0', // unused
+  'yellow-10': '#FDE7C7',
+  'yellow-5': '#FEF5E7',
+
+  // Purple
+  'purple-60': '#2B3491', // unused
+  'purple-50': '#575FB7',
+  'purple-40': '#6B75DB',
+  'purple-30': '#8891EC',
+  'purple-20': '#C3C8F5', // unused
+  'purple-10': '#E7E9FB',
+  'purple-5': '#F3F4FD',
+
+  // Green
+  'green-60': '#2B6E62',
+  'green-50': '#388F7F',
+  'green-40': '#44AC99',
+  'green-30': '#7FCCBF',
+  'green-20': '#ABDED5',
+  'green-10': '#E5F5F2',
+  'green-5': '#F4FBF9',
+
+  // RED
+  'red-60': '#712D28',
+  'red-50': '#A6423A', // unused
+  'red-40': '#C1554D',
+  'red-30': '#D07D77',
+  'red-20': '#E5B7B3', // unused
+  'red-10': '#F2DBD9', // unused
+  'red-5': '#FAF1F0',
+
+  // MISC
+  'code-block': '#99a1b30f', // gray-30 @ 6%
+  'gradient-blue': '#58C4DC', // Only used for the landing gradient for now.
+  github: {
+    highlight: '#fffbdd',
+  },
+};
diff --git a/beta/next-env.d.ts b/beta/next-env.d.ts
new file mode 100644
index 000000000..4f11a03dc
--- /dev/null
+++ b/beta/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/beta/next.config.js b/beta/next.config.js
new file mode 100644
index 000000000..208895f9a
--- /dev/null
+++ b/beta/next.config.js
@@ -0,0 +1,85 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+const redirects = require('./src/redirects.json');
+
+/**
+ * @type {import('next').NextConfig}
+ **/
+const nextConfig = {
+  pageExtensions: ['jsx', 'js', 'ts', 'tsx', 'mdx', 'md'],
+  reactStrictMode: true,
+  experimental: {
+    plugins: true,
+    scrollRestoration: true,
+    legacyBrowsers: false,
+    browsersListForSwc: true,
+  },
+  env: {
+    SANDPACK_BARE_COMPONENTS: process.env.SANDPACK_BARE_COMPONENTS,
+  },
+  async redirects() {
+    return redirects.redirects;
+  },
+  // TODO: this causes extra router.replace() on every page.
+  // Let's disable until we figure out what's going on.
+  // rewrites() {
+  //   return [
+  //     {
+  //       source: '/feed.xml',
+  //       destination: '/_next/static/feed.xml',
+  //     },
+  //   ];
+  // },
+  webpack: (config, {dev, isServer, ...options}) => {
+    if (process.env.ANALYZE) {
+      const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');
+      config.plugins.push(
+        new BundleAnalyzerPlugin({
+          analyzerMode: 'static',
+          reportFilename: options.isServer
+            ? '../analyze/server.html'
+            : './analyze/client.html',
+        })
+      );
+    }
+
+    // Don't bundle the shim unnecessarily.
+    config.resolve.alias['use-sync-external-store/shim'] = 'react';
+
+    const {IgnorePlugin, NormalModuleReplacementPlugin} = require('webpack');
+    config.plugins.push(
+      new NormalModuleReplacementPlugin(
+        /^@stitches\/core$/,
+        require.resolve('./src/utils/emptyShim.js')
+      ),
+      new NormalModuleReplacementPlugin(
+        /^raf$/,
+        require.resolve('./src/utils/rafShim.js')
+      ),
+      new NormalModuleReplacementPlugin(
+        /^process$/,
+        require.resolve('./src/utils/processShim.js')
+      ),
+      new IgnorePlugin({
+        checkResource(resource, context) {
+          if (
+            /\/eslint\/lib\/rules$/.test(context) &&
+            /\.\/[\w-]+(\.js)?$/.test(resource)
+          ) {
+            // Skips imports of built-in rules that ESLint
+            // tries to carry into the bundle by default.
+            // We only want the engine and the React rules.
+            return true;
+          }
+          return false;
+        },
+      })
+    );
+
+    return config;
+  },
+};
+
+module.exports = nextConfig;
diff --git a/beta/package.json b/beta/package.json
new file mode 100644
index 000000000..6e2d373a6
--- /dev/null
+++ b/beta/package.json
@@ -0,0 +1,112 @@
+{
+  "name": "react-website",
+  "version": "1.0.0",
+  "private": true,
+  "license": "CC",
+  "scripts": {
+    "analyze": "ANALYZE=true next build",
+    "dev": "next-remote-watch ./src/content",
+    "build": "next build && node ./scripts/generateRSS.js && node ./scripts/generateRedirects.js && node ./scripts/downloadFonts.js",
+    "lint": "next lint",
+    "lint:fix": "next lint --fix",
+    "format:source": "prettier --config .prettierrc --write \"{plugins,src}/**/*.{js,ts,jsx,tsx,css}\"",
+    "nit:source": "prettier --config .prettierrc --list-different \"{plugins,src}/**/*.{js,ts,jsx,tsx,css}\"",
+    "prettier": "yarn format:source",
+    "prettier:diff": "yarn nit:source",
+    "lint-heading-ids": "node scripts/headingIdLinter.js",
+    "fix-headings": "node scripts/headingIdLinter.js --fix",
+    "ci-check": "npm-run-all prettier:diff --parallel lint tsc lint-heading-ids",
+    "tsc": "tsc --noEmit",
+    "start": "next start",
+    "postinstall": "patch-package && (is-ci || (cd .. && husky install beta/.husky))",
+    "check-all": "npm-run-all prettier lint:fix tsc"
+  },
+  "dependencies": {
+    "@codesandbox/sandpack-react": "1.15.5",
+    "@docsearch/css": "3.0.0-alpha.41",
+    "@docsearch/react": "3.0.0-alpha.41",
+    "@headlessui/react": "^1.7.0",
+    "body-scroll-lock": "^3.1.3",
+    "classnames": "^2.2.6",
+    "date-fns": "^2.16.1",
+    "debounce": "^1.2.1",
+    "ga-lite": "^2.1.4",
+    "github-slugger": "^1.3.0",
+    "next": "12.3.2-canary.7",
+    "next-remote-watch": "^1.0.0",
+    "parse-numeric-range": "^1.2.0",
+    "react": "0.0.0-experimental-cb5084d1c-20220924",
+    "react-collapsed": "npm:@gaearon/react-collapsed@3.1.0-forked.1",
+    "react-dom": "0.0.0-experimental-cb5084d1c-20220924",
+    "remark-frontmatter": "^4.0.1",
+    "remark-gfm": "^3.0.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.9",
+    "@babel/plugin-transform-modules-commonjs": "^7.18.6",
+    "@babel/preset-react": "^7.18.6",
+    "@mdx-js/mdx": "^2.1.3",
+    "@types/body-scroll-lock": "^2.6.1",
+    "@types/classnames": "^2.2.10",
+    "@types/debounce": "^1.2.1",
+    "@types/github-slugger": "^1.3.0",
+    "@types/mdx-js__react": "^1.5.2",
+    "@types/node": "^14.6.4",
+    "@types/parse-numeric-range": "^0.0.1",
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.5",
+    "@typescript-eslint/eslint-plugin": "^5.36.2",
+    "@typescript-eslint/parser": "^5.36.2",
+    "asyncro": "^3.0.0",
+    "autoprefixer": "^10.4.2",
+    "babel-eslint": "10.x",
+    "eslint": "7.x",
+    "eslint-config-next": "12.0.3",
+    "eslint-config-react-app": "^5.2.1",
+    "eslint-plugin-flowtype": "4.x",
+    "eslint-plugin-import": "2.x",
+    "eslint-plugin-jsx-a11y": "6.x",
+    "eslint-plugin-react": "7.x",
+    "eslint-plugin-react-hooks": "^0.0.0-experimental-fabef7a6b-20221215",
+    "fs-extra": "^9.0.1",
+    "globby": "^11.0.1",
+    "gray-matter": "^4.0.2",
+    "husky": "^7.0.4",
+    "is-ci": "^3.0.1",
+    "lint-staged": ">=10",
+    "mdast-util-to-string": "^1.1.0",
+    "metro-cache": "0.72.2",
+    "npm-run-all": "^4.1.5",
+    "patch-package": "^6.2.2",
+    "postcss": "^8.4.5",
+    "postcss-flexbugs-fixes": "4.2.1",
+    "postcss-preset-env": "^6.7.0",
+    "prettier": "^2.5.1",
+    "reading-time": "^1.2.0",
+    "remark": "^12.0.1",
+    "remark-external-links": "^7.0.0",
+    "remark-html": "^12.0.0",
+    "remark-images": "^2.0.0",
+    "remark-slug": "^7.0.0",
+    "remark-unwrap-images": "^2.0.0",
+    "retext": "^7.0.1",
+    "retext-smartypants": "^4.0.0",
+    "rss": "^1.2.2",
+    "tailwindcss": "^3.0.22",
+    "typescript": "^4.0.2",
+    "unist-util-visit": "^2.0.3",
+    "webpack-bundle-analyzer": "^4.5.0"
+  },
+  "engines": {
+    "node": ">=12.x"
+  },
+  "nextBundleAnalysis": {
+    "budget": null,
+    "budgetPercentIncreaseRed": 10,
+    "showDetails": true
+  },
+  "lint-staged": {
+    "*.{js,ts,jsx,tsx,css}": "yarn prettier",
+    "src/**/*.md": "yarn fix-headings"
+  }
+}
diff --git a/beta/patches/@codemirror+lang-javascript+0.19.6.patch b/beta/patches/@codemirror+lang-javascript+0.19.6.patch
new file mode 100644
index 000000000..3436b8e37
--- /dev/null
+++ b/beta/patches/@codemirror+lang-javascript+0.19.6.patch
@@ -0,0 +1,30 @@
+diff --git a/node_modules/@codemirror/lang-javascript/dist/index.cjs b/node_modules/@codemirror/lang-javascript/dist/index.cjs
+index 4475e4f..e1255c9 100644
+--- a/node_modules/@codemirror/lang-javascript/dist/index.cjs
++++ b/node_modules/@codemirror/lang-javascript/dist/index.cjs
+@@ -135,7 +135,9 @@ const javascriptLanguage = language.LRLanguage.define({
+                 JSXText: highlight.tags.content,
+                 "JSXStartTag JSXStartCloseTag JSXSelfCloseEndTag JSXEndTag": highlight.tags.angleBracket,
+                 "JSXIdentifier JSXNameSpacedName": highlight.tags.tagName,
+-                "JSXAttribute/JSXIdentifier JSXAttribute/JSXNameSpacedName": highlight.tags.attributeName
++                "JSXAttribute/JSXIdentifier JSXAttribute/JSXNameSpacedName": highlight.tags.attributeName,
++                "JSXAttribute/JSXLowerIdentifier JSXAttribute/JSXNameSpacedName": highlight.tags.attributeName,
++                "JSXBuiltin/JSXIdentifier": highlight.tags.standard(highlight.tags.tagName)
+             })
+         ]
+     }),
+diff --git a/node_modules/@codemirror/lang-javascript/dist/index.js b/node_modules/@codemirror/lang-javascript/dist/index.js
+index d089f6b..db09ea6 100644
+--- a/node_modules/@codemirror/lang-javascript/dist/index.js
++++ b/node_modules/@codemirror/lang-javascript/dist/index.js
+@@ -131,7 +131,9 @@ const javascriptLanguage = /*@__PURE__*/LRLanguage.define({
+                 JSXText: tags.content,
+                 "JSXStartTag JSXStartCloseTag JSXSelfCloseEndTag JSXEndTag": tags.angleBracket,
+                 "JSXIdentifier JSXNameSpacedName": tags.tagName,
+-                "JSXAttribute/JSXIdentifier JSXAttribute/JSXNameSpacedName": tags.attributeName
++                "JSXAttribute/JSXIdentifier JSXAttribute/JSXNameSpacedName": tags.attributeName,
++                "JSXAttribute/JSXLowerIdentifier JSXAttribute/JSXNameSpacedName": tags.attributeName,
++                "JSXBuiltin/JSXIdentifier": tags.standard(tags.tagName),
+             })
+         ]
+     }),
diff --git a/beta/patches/@codesandbox+sandpack-react+1.15.5.patch b/beta/patches/@codesandbox+sandpack-react+1.15.5.patch
new file mode 100644
index 000000000..6a9a438dc
--- /dev/null
+++ b/beta/patches/@codesandbox+sandpack-react+1.15.5.patch
@@ -0,0 +1,26 @@
+diff --git a/node_modules/@codesandbox/sandpack-react/dist/cjs/index.js b/node_modules/@codesandbox/sandpack-react/dist/cjs/index.js
+index 6b8518e..86dd663 100644
+--- a/node_modules/@codesandbox/sandpack-react/dist/cjs/index.js
++++ b/node_modules/@codesandbox/sandpack-react/dist/cjs/index.js
+@@ -395,7 +395,7 @@ createApp(App).mount('#app')
+     <!-- built files will be auto injected -->
+   </body>
+ </html>
+-`},"/package.json":{code:JSON.stringify({dependencies:{"core-js":"^3.6.5",vue:"^3.0.0-0","@vue/cli-plugin-babel":"4.5.0"},main:"/src/main.js"})}},main:"/src/App.vue",environment:"vue-cli"};var We={react:wt,"react-ts":Ft,vue:Ht,vanilla:Ot,"vanilla-ts":Dt,vue3:Bt,angular:Lt,svelte:Pt,solid:At,"test-ts":It};var pt=e=>{var c,p,d,h,y,S;let t=(0,Ee.normalizePath)(e.files),o=bn({template:e.template,customSetup:e.customSetup,files:t}),s=(0,Ee.normalizePath)((p=(c=e.options)==null?void 0:c.visibleFiles)!=null?p:[]),r=((d=e.options)==null?void 0:d.activeFile)?Is((h=e.options)==null?void 0:h.activeFile,t||{}):void 0;s.length===0&&t&&Object.keys(t).forEach(v=>{let g=t[v];if(typeof g=="string"){s.push(v);return}!r&&g.active&&(r=v,g.hidden===!0&&s.push(v)),g.hidden||s.push(v)}),s.length===0&&(s=[o.main]),o.files[o.entry]||(o.entry=Is(o.entry,o.files)),!r&&o.main&&(r=o.main),(!r||!o.files[r])&&(r=s[0]),s.includes(r)||s.push(r);let n=(0,Ee.addPackageJSONIfNeeded)(o.files,(y=o.dependencies)!=null?y:{},(S=o.devDependencies)!=null?S:{},o.entry);return{visibleFiles:s.filter(v=>n[v]),activeFile:r,files:n,environment:o.environment}},Is=(e,t)=>{let o=(0,Ee.normalizePath)(t),s=(0,Ee.normalizePath)(e);if(s in o)return s;if(!e)return null;let r=null,n=0,a=[".js",".jsx",".ts",".tsx"];for(;!r&&n<a.length;){let p=`${s.split(".")[0]}${a[n]}`;o[p]!==void 0&&(r=p),n++}return r},bn=({files:e,template:t,customSetup:o})=>{if(!t){if(!o)return We.vanilla;if(!e||Object.keys(e).length===0)throw new Error("[sandpack-react]: without a template, you must pass at least one file");return M(u({},o),{files:_t(e)})}let s=We[t];if(!s)throw new Error(`[sandpack-react]: invalid template "${t}" provided`);return!o&&!e?s:{files:_t(u(u({},s.files),e)),dependencies:u(u({},s.dependencies),o==null?void 0:o.dependencies),devDependencies:u(u({},s.devDependencies),o==null?void 0:o.devDependencies),entry:(0,Ee.normalizePath)((o==null?void 0:o.entry)||s.entry),main:s.main,environment:(o==null?void 0:o.environment)||s.environment}},_t=e=>e?Object.keys(e).reduce((t,o)=>(typeof e[o]=="string"?t[o]={code:e[o]}:t[o]=e[o],t),{}):{};var mt=re.createContext(null),yn=3e4,$o=class extends re.PureComponent{constructor(t){super(t);this.timeoutHook=null;this.initializeSandpackIframeHook=null;this.handleMessage=t=>{this.timeoutHook&&clearTimeout(this.timeoutHook),t.type==="state"?this.setState({bundlerState:t.state}):t.type==="done"&&!t.compilatonError?this.setState({error:null}):t.type==="action"&&t.action==="show-error"?this.setState({error:(0,Ge.extractErrorDetails)(t)}):t.type==="action"&&t.action==="notification"&&t.notificationType==="error"&&this.setState({error:{message:t.title}})};this.registerReactDevTools=t=>{this.setState({reactDevTools:t})};this.updateCurrentFile=t=>{this.updateFile(this.state.activeFile,t)};this.updateFile=(t,o)=>{var r;let s=this.state.files;if(typeof t=="string"&&o){if(o===((r=this.state.files[t])==null?void 0:r.code))return;s=M(u({},s),{[t]:{code:o}})}else typeof t=="object"&&(s=u(u({},s),_t(t)));this.setState({files:(0,Ge.normalizePath)(s)},this.updateClients)};this.updateClients=()=>{var n,a,c,p;let{files:t,sandpackStatus:o}=this.state,s=(a=(n=this.props.options)==null?void 0:n.recompileMode)!=null?a:"delayed",r=(p=(c=this.props.options)==null?void 0:c.recompileDelay)!=null?p:500;o==="running"&&(s==="immediate"&&Object.values(this.clients).forEach(d=>{d.updatePreview({files:t})}),s==="delayed"&&(window.clearTimeout(this.debounceHook),this.debounceHook=window.setTimeout(()=>{Object.values(this.clients).forEach(d=>{d.updatePreview({files:this.state.files})})},r)))};this.createClient=(t,o)=>{var n,a,c,p,d,h,y,S,v;let s=new Ge.SandpackClient(t,{files:this.state.files,template:this.state.environment},{externalResources:(n=this.props.options)==null?void 0:n.externalResources,bundlerURL:(a=this.props.options)==null?void 0:a.bundlerURL,startRoute:(c=this.props.options)==null?void 0:c.startRoute,fileResolver:(p=this.props.options)==null?void 0:p.fileResolver,skipEval:(h=(d=this.props.options)==null?void 0:d.skipEval)!=null?h:!1,logLevel:(y=this.props.options)==null?void 0:y.logLevel,showOpenInCodeSandbox:!this.openInCSBRegistered.current,showErrorScreen:!this.errorScreenRegistered.current,showLoadingScreen:!this.loadingScreenRegistered.current,reactDevTools:this.state.reactDevTools,customNpmRegistries:(v=(S=this.props.customSetup)==null?void 0:S.npmRegistries)==null?void 0:v.map(g=>{var k;return(k=M(u({},g),{proxyEnabled:!1}))!=null?k:[]})});return typeof this.unsubscribe!="function"&&(this.unsubscribe=s.listen(this.handleMessage),this.timeoutHook=setTimeout(()=>{this.setState({sandpackStatus:"timeout"})},yn)),this.unsubscribeClientListeners[o]=this.unsubscribeClientListeners[o]||{},this.queuedListeners[o]&&(Object.keys(this.queuedListeners[o]).forEach(g=>{let k=this.queuedListeners[o][g],$=s.listen(k);this.unsubscribeClientListeners[o][g]=$}),this.queuedListeners[o]={}),Object.entries(this.queuedListeners.global).forEach(([g,k])=>{let $=s.listen(k);this.unsubscribeClientListeners[o][g]=$}),s};this.runSandpack=()=>{Object.keys(this.preregisteredIframes).forEach(t=>{let o=this.preregisteredIframes[t];this.clients[t]=this.createClient(o,t)}),this.setState({sandpackStatus:"running"})};this.registerBundler=(t,o)=>{this.state.sandpackStatus==="running"?this.clients[o]=this.createClient(t,o):this.preregisteredIframes[o]=t};this.unregisterBundler=t=>{var r;let o=this.clients[t];o?(o.cleanup(),(r=o.iframe.contentWindow)==null||r.location.replace("about:blank"),delete this.clients[t]):delete this.preregisteredIframes[t],this.timeoutHook&&clearTimeout(this.timeoutHook),Object.values(this.unsubscribeClientListeners).forEach(n=>{Object.values(n).forEach(c=>c())}),this.setState({sandpackStatus:"idle"})};this.unregisterAllClients=()=>{Object.keys(this.clients).map(this.unregisterBundler),typeof this.unsubscribe=="function"&&(this.unsubscribe(),this.unsubscribe=void 0)};this.setActiveFile=t=>{this.setState({activeFile:t})};this.openFile=t=>{this.setState(({visibleFiles:o})=>{let s=o.includes(t)?o:[...o,t];return{activeFile:t,visibleFiles:s}})};this.closeFile=t=>{this.state.visibleFiles.length!==1&&this.setState(({visibleFiles:o,activeFile:s})=>{let r=o.indexOf(t),n=o.filter(a=>a!==t);return{activeFile:t===s?r===0?o[1]:o[r-1]:s,visibleFiles:n}})};this.deleteFile=t=>{this.setState(({visibleFiles:o,files:s})=>{let r=u({},s);return delete r[t],{visibleFiles:o.filter(n=>n!==t),files:r}},this.updateClients)};this.addFile=this.updateFile;this.dispatchMessage=(t,o)=>{if(this.state.sandpackStatus!=="running"){console.warn("[sandpack-react]: dispatch cannot be called while in idle mode");return}o?this.clients[o].dispatch(t):Object.values(this.clients).forEach(s=>{s.dispatch(t)})};this.addListener=(t,o)=>{if(o){if(this.clients[o])return this.clients[o].listen(t);{let s=it();return this.queuedListeners[o]=this.queuedListeners[o]||{},this.unsubscribeClientListeners[o]=this.unsubscribeClientListeners[o]||{},this.queuedListeners[o][s]=t,()=>{this.queuedListeners[o][s]?delete this.queuedListeners[o][s]:this.unsubscribeClientListeners[o][s]&&(this.unsubscribeClientListeners[o][s](),delete this.unsubscribeClientListeners[o][s])}}}else{let s=it();this.queuedListeners.global[s]=t;let n=Object.values(this.clients).map(c=>c.listen(t));return()=>{n.forEach(c=>c())}}};this.resetFile=t=>{let{files:o}=pt({template:this.props.template,files:this.props.files,customSetup:this.props.customSetup,options:this.props.options});this.setState(s=>({files:M(u({},s.files),{[t]:o[t]})}),this.updateClients)};this.resetAllFiles=()=>{let{files:t}=pt({template:this.props.template,files:this.props.files,customSetup:this.props.customSetup,options:this.props.options});this.setState({files:t},this.updateClients)};this._getSandpackState=()=>{let{files:t,activeFile:o,visibleFiles:s,visibleFilesFromProps:r,startRoute:n,bundlerState:a,editorState:c,error:p,sandpackStatus:d,environment:h,initMode:y}=this.state;return{files:t,environment:h,visibleFiles:s,visibleFilesFromProps:r,activeFile:o,startRoute:n,error:p,bundlerState:a,status:d,editorState:c,initMode:y,clients:this.clients,dispatch:this.dispatchMessage,errorScreenRegisteredRef:this.errorScreenRegistered,lazyAnchorRef:this.lazyAnchorRef,listen:this.addListener,loadingScreenRegisteredRef:this.loadingScreenRegistered,openInCSBRegisteredRef:this.openInCSBRegistered,registerBundler:this.registerBundler,runSandpack:this.runSandpack,unregisterBundler:this.unregisterBundler,registerReactDevTools:this.registerReactDevTools,openFile:this.openFile,resetFile:this.resetFile,resetAllFiles:this.resetAllFiles,setActiveFile:this.setActiveFile,updateCurrentFile:this.updateCurrentFile,updateFile:this.updateFile,addFile:this.addFile,closeFile:this.closeFile,deleteFile:this.deleteFile}};var a,c,p,d;let{activeFile:o,visibleFiles:s,files:r,environment:n}=pt({template:t.template,files:t.files,customSetup:t.customSetup,options:t.options});this.state={files:r,environment:n,visibleFiles:s,visibleFilesFromProps:s,activeFile:o,startRoute:(a=this.props.options)==null?void 0:a.startRoute,bundlerState:void 0,error:null,sandpackStatus:((p=(c=this.props.options)==null?void 0:c.autorun)!=null?p:!0)?"initial":"idle",editorState:"pristine",initMode:((d=this.props.options)==null?void 0:d.initMode)||"lazy",reactDevTools:void 0},this.queuedListeners={global:{}},this.unsubscribeClientListeners={},this.preregisteredIframes={},this.clients={},this.lazyAnchorRef=re.createRef(),this.errorScreenRegistered=re.createRef(),this.openInCSBRegistered=re.createRef(),this.loadingScreenRegistered=re.createRef()}initializeSandpackIframe(){var s,r,n,a,c;if(!((r=(s=this.props.options)==null?void 0:s.autorun)!=null?r:!0))return;let o=(a=(n=this.props.options)==null?void 0:n.initModeObserverOptions)!=null?a:{rootMargin:"1000px 0px"};this.intersectionObserver&&this.lazyAnchorRef.current&&((c=this.intersectionObserver)==null||c.unobserve(this.lazyAnchorRef.current)),this.lazyAnchorRef.current&&this.state.initMode==="lazy"?(this.intersectionObserver=new IntersectionObserver(p=>{var d;p.some(h=>h.isIntersecting)&&(this.initializeSandpackIframeHook=setTimeout(()=>{this.runSandpack()},50),this.lazyAnchorRef.current&&((d=this.intersectionObserver)==null||d.unobserve(this.lazyAnchorRef.current)))},o),this.intersectionObserver.observe(this.lazyAnchorRef.current)):this.lazyAnchorRef.current&&this.state.initMode==="user-visible"?(this.intersectionObserver=new IntersectionObserver(p=>{p.some(d=>d.isIntersecting)?this.initializeSandpackIframeHook=setTimeout(()=>{this.runSandpack()},50):(this.initializeSandpackIframeHook&&clearTimeout(this.initializeSandpackIframeHook),Object.keys(this.clients).map(this.unregisterBundler),this.unregisterAllClients())},o),this.intersectionObserver.observe(this.lazyAnchorRef.current)):this.initializeSandpackIframeHook=setTimeout(()=>this.runSandpack(),50)}componentDidMount(){this.initializeSandpackIframe()}componentDidUpdate(t){var c,p,d,h;((c=t.options)==null?void 0:c.initMode)!==((p=this.props.options)==null?void 0:p.initMode)&&((d=this.props.options)==null?void 0:d.initMode)&&this.setState({initMode:(h=this.props.options)==null?void 0:h.initMode},this.initializeSandpackIframe);let{activeFile:o,visibleFiles:s,files:r,environment:n}=pt({template:this.props.template,files:this.props.files,customSetup:this.props.customSetup,options:this.props.options});if(t.template!==this.props.template||!(0,dt.default)(t.options,this.props.options)||!(0,dt.default)(t.customSetup,this.props.customSetup)||!(0,dt.default)(t.files,this.props.files)){if(this.setState({activeFile:o,visibleFiles:s,visibleFilesFromProps:s,files:r,environment:n}),this.state.sandpackStatus!=="running")return;Object.values(this.clients).forEach(y=>y.updatePreview({files:r,template:n}))}let a=(0,dt.default)(r,this.state.files)?"pristine":"dirty";a!==this.state.editorState&&this.setState({editorState:a})}componentWillUnmount(){typeof this.unsubscribe=="function"&&this.unsubscribe(),this.timeoutHook&&clearTimeout(this.timeoutHook),this.debounceHook&&clearTimeout(this.debounceHook),this.initializeSandpackIframeHook&&clearTimeout(this.initializeSandpackIframeHook),this.intersectionObserver&&this.intersectionObserver.disconnect()}render(){var n;let{children:t,theme:o,className:s,style:r}=this.props;return re.createElement(mt.Provider,{value:this._getSandpackState()},re.createElement(Os.ClasserProvider,{classes:(n=this.props.options)==null?void 0:n.classes},re.createElement(No,{className:s,style:r,theme:o},t)))}},Mo=$o,Sn=mt.Consumer;function T(){let e=Ds.useContext(mt);if(e===null)throw new Error('[sandpack-react]: "useSandpack" must be wrapped by a "SandpackProvider"');let r=e,{dispatch:t,listen:o}=r,s=N(r,["dispatch","listen"]);return{sandpack:u({},s),dispatch:t,listen:o}}var ut=()=>{var t,o,s;let{sandpack:e}=T();return{code:(t=e.files[e.activeFile])==null?void 0:t.code,readOnly:(s=(o=e.files[e.activeFile])==null?void 0:o.readOnly)!=null?s:!1,updateCode:e.updateCurrentFile}};var Bs=f(require("@code-hike/classer")),Ye=f(require("react"));var me=m({svg:{margin:"auto"}}),F=m({appearance:"none",border:"0",outline:"none",display:"flex",alignItems:"center",fontSize:"inherit",fontFamily:"inherit",backgroundColor:"transparent",transition:"color $default, background $default",cursor:"pointer",color:"$colors$clickable","&:disabled":{color:"$colors$disabled"},"&:hover:not(:disabled,[data-active='true'])":{color:"$colors$hover"},'&[data-active="true"]':{color:"$colors$accent"},svg:{minWidth:"$space$4",width:"$space$4",height:"$space$4"},[`&.${me}`]:{padding:"$space$1",width:"$space$7",height:"$space$7",display:"flex"}}),te=m({backgroundColor:"$colors$surface2",borderRadius:"99999px",'&[data-active="true"]':{color:"$colors$surface1",background:"$colors$accent"},"&:hover:not(:disabled,[data-active='true'])":{backgroundColor:"$colors$surface3"}}),Hs=m({padding:0}),vn=Mt({"0%":{opacity:0,transform:"translateY(4px)"},"100%":{opacity:1,transform:"translateY(0)"}}),ft=m({position:"absolute",bottom:"0",left:"0",right:"0",top:"0",margin:"0",overflow:"auto",height:"100%",zIndex:"$top"}),jt=m({padding:"$space$4",whiteSpace:"pre-wrap",fontFamily:"$font$mono",backgroundColor:"$colors$errorSurface"}),Ze=m({animation:`${vn} 150ms ease`,color:"$colors$error"});var kn=m({borderBottom:"1px solid $colors$surface2",background:"$colors$surface1"}),Cn=m({padding:"0 $space$2",overflow:"auto",display:"flex",flexWrap:"nowrap",alignItems:"stretch",minHeight:"40px",marginBottom:"-1px"}),_s=m({padding:"0 $space$1 0 $space$1",borderRadius:"$border$radius",marginLeft:"$space$1",width:"$space$5",visibility:"hidden",svg:{width:"$space$3",height:"$space$3",display:"block",position:"relative",top:1}}),js=m({padding:"0 $space$2",height:"$layout$headerHeight",whiteSpace:"nowrap","&:focus":{outline:"none"},[`&:hover > .${_s}`]:{visibility:"unset"}}),ht=s=>{var r=s,{closableTabs:e,className:t}=r,o=N(r,["closableTabs","className"]);let{sandpack:n}=T(),a=(0,Bs.useClasser)(b),{activeFile:c,visibleFiles:p,setActiveFile:d}=n,h=S=>{S.stopPropagation();let v=S.target.closest("[data-active]"),g=v==null?void 0:v.getAttribute("title");!g||n.closeFile(g)},y=S=>{let v=Xe(S),g=p.reduce((k,$)=>($===S||Xe($)===v&&k.push($),k),[]);return g.length===0?v:Es(S,g)};return Ye.createElement("div",u({className:l(a("tabs"),kn,t),translate:"no"},o),Ye.createElement("div",{"aria-label":"Select active file",className:l(a("tabs-scrollable-container"),Cn),role:"tablist"},p.map(S=>Ye.createElement("button",{key:S,"aria-selected":S===c,className:l(a("tab-button"),F,js),"data-active":S===c,onClick:()=>d(S),role:"tab",title:S,type:"button"},y(S),e&&p.length>1&&Ye.createElement("span",{className:l(a("close-button"),_s),onClick:h},Ye.createElement(Ro,null))))))};var Us=f(require("@code-hike/classer")),Lo=f(require("react"));var xn=m({position:"absolute",bottom:"$space$2",right:"$space$2",paddingRight:"$space$3"}),gt=s=>{var r=s,{className:e,onClick:t}=r,o=N(r,["className","onClick"]);let n=(0,Us.useClasser)(b),{sandpack:a}=T();return Lo.createElement("button",u({className:l(n("button"),F,te,xn,e),onClick:c=>{a.runSandpack(),t==null||t(c)},type:"button"},o),Lo.createElement(rt,null),"Run")};var zs=f(require("@code-hike/classer")),Vs=f(require("react"));var Te=m({display:"flex",flexDirection:"column",width:"100%",position:"relative",backgroundColor:"$colors$surface1",transition:"flex $transitions$default",gap:1,[`&:has(.${b}-stack)`]:{backgroundColor:"$colors$surface2"}}),ne=o=>{var s=o,{className:e}=s,t=N(s,["className"]);let r=(0,zs.useClasser)(b);return Vs.createElement("div",u({className:l(r("stack"),Te,e)},t))};var ir=f(require("@code-hike/classer")),Xt=f(require("@codemirror/closebrackets")),Ne=f(require("@codemirror/commands")),cr=f(require("@codemirror/comment")),lr=f(require("@codemirror/gutter")),pr=f(require("@codemirror/highlight")),Wt=f(require("@codemirror/history")),dr=f(require("@codemirror/matchbrackets")),$e=f(require("@codemirror/state")),Io=f(require("@codemirror/state")),fe=f(require("@codemirror/view")),mr=f(require("@react-hook/intersection-observer")),L=f(require("react"));var Xs=f(require("react"));var Oe=()=>{let{theme:e,id:t,mode:o}=Xs.useContext(lt);return{theme:e,themeId:t,themeMode:o}};var wo=(e,t)=>{if(e.length!==t.length)return!1;let o=!0;for(let s=0;s<e.length;s++)if(e[s]!==t[s]){o=!1;break}return o};var De=f(require("@codemirror/view"));var P=f(require("@codemirror/highlight")),Ws=f(require("@codemirror/lang-css")),Gs=f(require("@codemirror/lang-html")),Fo=f(require("@codemirror/lang-javascript")),Zs=f(require("@codemirror/view")),Ys=f(require("react"));var bt=(e,{line:t,column:o})=>e.line(t).from+(o!=null?o:0)-1,Js=()=>Zs.EditorView.theme({"&":{backgroundColor:`var(--${b}-colors-surface1)`,color:`var(--${b}-syntax-color-plain)`,height:"100%"},".cm-matchingBracket, .cm-nonmatchingBracket, &.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket":{color:"inherit",backgroundColor:"rgba(128,128,128,.25)",backgroundBlendMode:"difference"},"&.cm-editor.cm-focused":{outline:"none"},".cm-activeLine":{backgroundColor:`var(--${b}-colors-surface3)`,borderRadius:`var(--${b}-border-radius)`},".cm-errorLine":{backgroundColor:`var(--${b}-colors-errorSurface)`,borderRadius:`var(--${b}-border-radius)`},".cm-content":{caretColor:`var(--${b}-colors-accent)`,padding:`0 var(--${b}-space-4)`},".cm-scroller":{fontFamily:`var(--${b}-font-mono)`,lineHeight:`var(--${b}-font-lineHeight)`},".cm-gutters":{backgroundColor:`var(--${b}-colors-surface1)`,color:`var(--${b}-colors-disabled)`,border:"none",paddingLeft:`var(--${b}-space-1)`},".cm-gutter.cm-lineNumbers":{fontSize:".6em"},".cm-lineNumbers .cm-gutterElement":{lineHeight:`var(--${b}-font-lineHeight)`,minWidth:`var(--${b}-space-5)`},".cm-content .cm-line":{paddingLeft:`var(--${b}-space-1)`},".cm-content.cm-readonly .cm-line":{paddingLeft:0}}),ue=e=>`${b}-syntax-${e}`,qs=()=>["string","plain","comment","keyword","definition","punctuation","property","tag","static"].reduce((t,o)=>M(u({},t),{[`.${ue(o)}`]:{color:`$syntax$color$${o}`,fontStyle:`$syntax$fontStyle$${o}`}}),{}),Ks=e=>P.HighlightStyle.define([{tag:P.tags.link,textDecoration:"underline"},{tag:P.tags.emphasis,fontStyle:"italic"},{tag:P.tags.strong,fontWeight:"bold"},{tag:P.tags.keyword,class:ue("keyword")},{tag:[P.tags.atom,P.tags.number,P.tags.bool],class:ue("static")},{tag:P.tags.tagName,class:ue("tag")},{tag:P.tags.variableName,class:ue("plain")},{tag:P.tags.function(P.tags.variableName),class:ue("definition")},{tag:P.tags.definition(P.tags.function(P.tags.variableName)),class:ue("definition")},{tag:P.tags.propertyName,class:ue("property")},{tag:[P.tags.literal,P.tags.inserted],class:ue(e.syntax.string?"string":"static")},{tag:P.tags.punctuation,class:ue("punctuation")},{tag:[P.tags.comment,P.tags.quote],class:ue("comment")}]),Qs=(e,t,o)=>{if(!e&&!t)return"javascript";let s=t;if(!s&&e){let r=e.lastIndexOf(".");s=e.slice(r+1)}for(let r of o)if(s===r.name||r.extensions.includes(s||""))return r.name;switch(s){case"ts":case"tsx":return"typescript";case"html":case"svelte":case"vue":return"html";case"css":case"less":case"scss":return"css";case"js":case"jsx":case"json":default:return"javascript"}},er=(e,t)=>{let o={javascript:(0,Fo.javascript)({jsx:!0,typescript:!1}),typescript:(0,Fo.javascript)({jsx:!0,typescript:!0}),html:(0,Gs.html)(),css:(0,Ws.css)()};for(let s of t)if(e===s.name)return s.language;return o[e]},Ut=(...e)=>Ys.useCallback(t=>e.forEach(o=>{if(!!o){if(typeof o=="function")return o(t);o.current=t}}),e);function tr(e){return De.ViewPlugin.fromClass(class{constructor(t){this.decorations=this.getDecoration(t)}update(t){}getDecoration(t){if(!e)return De.Decoration.none;let o=e.map(s=>{var c,p,d;let r=De.Decoration.line({attributes:{class:(c=s.className)!=null?c:""}}),n=De.Decoration.mark({class:(p=s.className)!=null?p:"",attributes:(d=s.elementAttributes)!=null?d:void 0}),a=bt(t.state.doc,{line:s.line,column:s.startColumn})+1;if(s.startColumn&&s.endColumn){let h=bt(t.state.doc,{line:s.line,column:s.endColumn})+1;return n.range(a,h)}return r.range(a)});return De.Decoration.set(o)}},{decorations:t=>t.decorations})}var He=f(require("@codemirror/view"));function or(){return En}var Rn=He.Decoration.line({attributes:{class:"cm-errorLine"}}),En=He.ViewPlugin.fromClass(class{constructor(){this.decorations=He.Decoration.none}update(e){e.transactions.forEach(t=>{let o=t.annotation("show-error");if(o!==void 0){let s=bt(e.view.state.doc,{line:o})+1;this.decorations=He.Decoration.set([Rn.range(s)])}else t.annotation("remove-errors")&&(this.decorations=He.Decoration.none)})}},{decorations:e=>e.decorations});var zt=m({margin:"0",display:"block",fontFamily:"$font$mono",fontSize:"$font$size",color:"$syntax$color$plain",lineHeight:"$font$lineHeight"}),Ao=m(qs()),Vt=m({flex:1,position:"relative",overflow:"auto",background:"$colors$surface1",".cm-scroller":{padding:"$space$4 0"},[`.${zt}`]:{padding:"$space$4 0"}}),Po=m({margin:"0",outline:"none",height:"100%"}),sr=m({fontFamily:"$font$mono",fontSize:"0.8em",position:"absolute",right:"$space$2",bottom:"$space$2",zIndex:"$top",color:"$colors$clickable",backgroundColor:"$colors$surface2",borderRadius:"99999px",padding:"calc($space$1 / 2) $space$2",[`& + .${F}`]:{right:"calc($space$11 * 2)"}});var rr=f(require("@codemirror/highlight")),nr=f(require("react")),ar=({langSupport:e,highlightTheme:t,code:o=""})=>{let s=e.language.parser.parse(o),r=0,n=[],a=(c,p)=>{if(c>r){let d=o.slice(r,c);n.push(p?(0,nr.createElement)("span",{children:d,className:p,key:`${c}${r}`}):d),r=c}};return(0,rr.highlightTree)(s,t.match,(c,p,d)=>{a(c,""),a(p,d)}),r<o.length&&n.push(`
++`},"/package.json":{code:JSON.stringify({dependencies:{"core-js":"^3.6.5",vue:"^3.0.0-0","@vue/cli-plugin-babel":"4.5.0"},main:"/src/main.js"})}},main:"/src/App.vue",environment:"vue-cli"};var We={react:wt,"react-ts":Ft,vue:Ht,vanilla:Ot,"vanilla-ts":Dt,vue3:Bt,angular:Lt,svelte:Pt,solid:At,"test-ts":It};var pt=e=>{var c,p,d,h,y,S;let t=(0,Ee.normalizePath)(e.files),o=bn({template:e.template,customSetup:e.customSetup,files:t}),s=(0,Ee.normalizePath)((p=(c=e.options)==null?void 0:c.visibleFiles)!=null?p:[]),r=((d=e.options)==null?void 0:d.activeFile)?Is((h=e.options)==null?void 0:h.activeFile,t||{}):void 0;s.length===0&&t&&Object.keys(t).forEach(v=>{let g=t[v];if(typeof g=="string"){s.push(v);return}!r&&g.active&&(r=v,g.hidden===!0&&s.push(v)),g.hidden||s.push(v)}),s.length===0&&(s=[o.main]),o.files[o.entry]||(o.entry=Is(o.entry,o.files)),!r&&o.main&&(r=o.main),(!r||!o.files[r])&&(r=s[0]),s.includes(r)||s.push(r);let n=(0,Ee.addPackageJSONIfNeeded)(o.files,(y=o.dependencies)!=null?y:{},(S=o.devDependencies)!=null?S:{},o.entry);return{visibleFiles:s.filter(v=>n[v]),activeFile:r,files:n,environment:o.environment}},Is=(e,t)=>{let o=(0,Ee.normalizePath)(t),s=(0,Ee.normalizePath)(e);if(s in o)return s;if(!e)return null;let r=null,n=0,a=[".js",".jsx",".ts",".tsx"];for(;!r&&n<a.length;){let p=`${s.split(".")[0]}${a[n]}`;o[p]!==void 0&&(r=p),n++}return r},bn=({files:e,template:t,customSetup:o})=>{if(!t){if(!o)return We.vanilla;if(!e||Object.keys(e).length===0)throw new Error("[sandpack-react]: without a template, you must pass at least one file");return M(u({},o),{files:_t(e)})}let s=We[t];if(!s)throw new Error(`[sandpack-react]: invalid template "${t}" provided`);return!o&&!e?s:{files:_t(u(u({},s.files),e)),dependencies:u(u({},s.dependencies),o==null?void 0:o.dependencies),devDependencies:u(u({},s.devDependencies),o==null?void 0:o.devDependencies),entry:(0,Ee.normalizePath)((o==null?void 0:o.entry)||s.entry),main:s.main,environment:(o==null?void 0:o.environment)||s.environment}},_t=e=>e?Object.keys(e).reduce((t,o)=>(typeof e[o]=="string"?t[o]={code:e[o]}:t[o]=e[o],t),{}):{};var mt=re.createContext(null),yn=3e4,$o=class extends re.PureComponent{constructor(t){super(t);this.timeoutHook=null;this.initializeSandpackIframeHook=null;this.handleMessage=t=>{this.timeoutHook&&clearTimeout(this.timeoutHook),t.type==="state"?this.setState({bundlerState:t.state}):t.type==="done"&&!t.compilatonError?this.setState({error:null}):t.type==="action"&&t.action==="show-error"?this.setState({error:(0,Ge.extractErrorDetails)(t)}):t.type==="action"&&t.action==="notification"&&t.notificationType==="error"&&this.setState({error:{message:t.title}})};this.registerReactDevTools=t=>{this.setState({reactDevTools:t})};this.updateCurrentFile=t=>{this.updateFile(this.state.activeFile,t)};this.updateFile=(t,o)=>{var r;let s=this.state.files;if(typeof t=="string"&&o){if(o===((r=this.state.files[t])==null?void 0:r.code))return;s=M(u({},s),{[t]:{code:o}})}else typeof t=="object"&&(s=u(u({},s),_t(t)));this.setState({files:(0,Ge.normalizePath)(s)},this.updateClients)};this.updateClients=()=>{var n,a,c,p;let{files:t,sandpackStatus:o}=this.state,s=(a=(n=this.props.options)==null?void 0:n.recompileMode)!=null?a:"delayed",r=(p=(c=this.props.options)==null?void 0:c.recompileDelay)!=null?p:500;o==="running"&&(s==="immediate"&&Object.values(this.clients).forEach(d=>{d.updatePreview({files:t})}),s==="delayed"&&(window.clearTimeout(this.debounceHook),this.debounceHook=window.setTimeout(()=>{Object.values(this.clients).forEach(d=>{d.updatePreview({files:this.state.files})})},r)))};this.createClient=(t,o)=>{var n,a,c,p,d,h,y,S,v;let s=new Ge.SandpackClient(t,{files:this.state.files,template:this.state.environment},{externalResources:(n=this.props.options)==null?void 0:n.externalResources,bundlerURL:(a=this.props.options)==null?void 0:a.bundlerURL,startRoute:(c=this.props.options)==null?void 0:c.startRoute,fileResolver:(p=this.props.options)==null?void 0:p.fileResolver,skipEval:(h=(d=this.props.options)==null?void 0:d.skipEval)!=null?h:!1,logLevel:(y=this.props.options)==null?void 0:y.logLevel,showOpenInCodeSandbox:!this.openInCSBRegistered.current,showErrorScreen:!this.errorScreenRegistered.current,showLoadingScreen:!this.loadingScreenRegistered.current,reactDevTools:this.state.reactDevTools,customNpmRegistries:(v=(S=this.props.customSetup)==null?void 0:S.npmRegistries)==null?void 0:v.map(g=>{var k;return(k=M(u({},g),{proxyEnabled:!1}))!=null?k:[]})});return typeof this.unsubscribe!="function"&&(this.unsubscribe=s.listen(this.handleMessage),this.timeoutHook=setTimeout(()=>{this.setState({sandpackStatus:"timeout"})},yn)),this.unsubscribeClientListeners[o]=this.unsubscribeClientListeners[o]||{},this.queuedListeners[o]&&(Object.keys(this.queuedListeners[o]).forEach(g=>{let k=this.queuedListeners[o][g],$=s.listen(k);this.unsubscribeClientListeners[o][g]=$}),this.queuedListeners[o]={}),Object.entries(this.queuedListeners.global).forEach(([g,k])=>{let $=s.listen(k);this.unsubscribeClientListeners[o][g]=$}),s};this.runSandpack=()=>{Object.keys(this.preregisteredIframes).forEach(t=>{let o=this.preregisteredIframes[t];this.clients[t]=this.createClient(o,t)}),this.setState({sandpackStatus:"running"})};this.registerBundler=(t,o)=>{this.state.sandpackStatus==="running"?this.clients[o]=this.createClient(t,o):this.preregisteredIframes[o]=t};this.unregisterBundler=t=>{var r;let o=this.clients[t];o?(o.cleanup(),(r=o.iframe.contentWindow)==null||r.location.replace("about:blank"),delete this.clients[t]):delete this.preregisteredIframes[t],this.timeoutHook&&clearTimeout(this.timeoutHook),Object.values(this.unsubscribeClientListeners).forEach(n=>{Object.values(n).forEach(c=>c())}),this.setState({sandpackStatus:"idle"})};this.unregisterAllClients=()=>{Object.keys(this.clients).map(this.unregisterBundler),typeof this.unsubscribe=="function"&&(this.unsubscribe(),this.unsubscribe=void 0)};this.setActiveFile=t=>{this.setState({activeFile:t})};this.openFile=t=>{this.setState(({visibleFiles:o})=>{let s=o.includes(t)?o:[...o,t];return{activeFile:t,visibleFiles:s}})};this.closeFile=t=>{this.state.visibleFiles.length!==1&&this.setState(({visibleFiles:o,activeFile:s})=>{let r=o.indexOf(t),n=o.filter(a=>a!==t);return{activeFile:t===s?r===0?o[1]:o[r-1]:s,visibleFiles:n}})};this.deleteFile=t=>{this.setState(({visibleFiles:o,files:s})=>{let r=u({},s);return delete r[t],{visibleFiles:o.filter(n=>n!==t),files:r}},this.updateClients)};this.addFile=this.updateFile;this.dispatchMessage=(t,o)=>{if(this.state.sandpackStatus!=="running"){console.warn("[sandpack-react]: dispatch cannot be called while in idle mode");return}o?this.clients[o].dispatch(t):Object.values(this.clients).forEach(s=>{s.dispatch(t)})};this.addListener=(t,o)=>{if(o){if(this.clients[o])return this.clients[o].listen(t);{let s=it();return this.queuedListeners[o]=this.queuedListeners[o]||{},this.unsubscribeClientListeners[o]=this.unsubscribeClientListeners[o]||{},this.queuedListeners[o][s]=t,()=>{this.queuedListeners[o][s]?delete this.queuedListeners[o][s]:this.unsubscribeClientListeners[o][s]&&(this.unsubscribeClientListeners[o][s](),delete this.unsubscribeClientListeners[o][s])}}}else{let s=it();this.queuedListeners.global[s]=t;let n=Object.values(this.clients).map(c=>c.listen(t));return()=>{n.forEach(c=>c())}}};this.resetFile=t=>{let{files:o}=pt({template:this.props.template,files:this.props.files,customSetup:this.props.customSetup,options:this.props.options});this.setState(s=>({files:M(u({},s.files),{[t]:o[t]})}),this.updateClients)};this.resetAllFiles=()=>{let{files:t}=pt({template:this.props.template,files:this.props.files,customSetup:this.props.customSetup,options:this.props.options});this.setState({files:t},this.updateClients)};this._getSandpackState=()=>{let{files:t,activeFile:o,visibleFiles:s,visibleFilesFromProps:r,startRoute:n,bundlerState:a,editorState:c,error:p,sandpackStatus:d,environment:h,initMode:y}=this.state;return{files:t,environment:h,visibleFiles:s,visibleFilesFromProps:r,activeFile:o,startRoute:n,error:p,bundlerState:a,status:d,editorState:c,initMode:y,clients:this.clients,dispatch:this.dispatchMessage,errorScreenRegisteredRef:this.errorScreenRegistered,lazyAnchorRef:this.lazyAnchorRef,listen:this.addListener,loadingScreenRegisteredRef:this.loadingScreenRegistered,openInCSBRegisteredRef:this.openInCSBRegistered,registerBundler:this.registerBundler,runSandpack:this.runSandpack,unregisterBundler:this.unregisterBundler,registerReactDevTools:this.registerReactDevTools,openFile:this.openFile,resetFile:this.resetFile,resetAllFiles:this.resetAllFiles,setActiveFile:this.setActiveFile,updateCurrentFile:this.updateCurrentFile,updateFile:this.updateFile,addFile:this.addFile,closeFile:this.closeFile,deleteFile:this.deleteFile}};var a,c,p,d;let{activeFile:o,visibleFiles:s,files:r,environment:n}=pt({template:t.template,files:t.files,customSetup:t.customSetup,options:t.options});this.state={files:r,environment:n,visibleFiles:s,visibleFilesFromProps:s,activeFile:o,startRoute:(a=this.props.options)==null?void 0:a.startRoute,bundlerState:void 0,error:null,sandpackStatus:((p=(c=this.props.options)==null?void 0:c.autorun)!=null?p:!0)?"initial":"idle",editorState:"pristine",initMode:((d=this.props.options)==null?void 0:d.initMode)||"lazy",reactDevTools:void 0},this.queuedListeners={global:{}},this.unsubscribeClientListeners={},this.preregisteredIframes={},this.clients={},this.lazyAnchorRef=re.createRef(),this.errorScreenRegistered=re.createRef(),this.openInCSBRegistered=re.createRef(),this.loadingScreenRegistered=re.createRef()}initializeSandpackIframe(){var s,r,n,a,c;if(!((r=(s=this.props.options)==null?void 0:s.autorun)!=null?r:!0))return;let o=(a=(n=this.props.options)==null?void 0:n.initModeObserverOptions)!=null?a:{rootMargin:"1000px 0px"};this.intersectionObserver&&this.lazyAnchorRef.current&&((c=this.intersectionObserver)==null||c.unobserve(this.lazyAnchorRef.current)),this.lazyAnchorRef.current&&this.state.initMode==="lazy"?(this.intersectionObserver=new IntersectionObserver(p=>{var d;p.some(h=>h.isIntersecting)&&(this.initializeSandpackIframeHook=setTimeout(()=>{this.runSandpack()},50),this.lazyAnchorRef.current&&((d=this.intersectionObserver)==null||d.unobserve(this.lazyAnchorRef.current)))},o),this.intersectionObserver.observe(this.lazyAnchorRef.current)):this.lazyAnchorRef.current&&this.state.initMode==="user-visible"?(this.intersectionObserver=new IntersectionObserver(p=>{p.some(d=>d.isIntersecting)?this.initializeSandpackIframeHook=setTimeout(()=>{this.runSandpack()},50):(this.initializeSandpackIframeHook&&clearTimeout(this.initializeSandpackIframeHook),Object.keys(this.clients).map(this.unregisterBundler),this.unregisterAllClients())},o),this.intersectionObserver.observe(this.lazyAnchorRef.current)):this.initializeSandpackIframeHook=setTimeout(()=>this.runSandpack(),50)}componentDidMount(){this.initializeSandpackIframe()}componentDidUpdate(t){var c,p,d,h;((c=t.options)==null?void 0:c.initMode)!==((p=this.props.options)==null?void 0:p.initMode)&&((d=this.props.options)==null?void 0:d.initMode)&&this.setState({initMode:(h=this.props.options)==null?void 0:h.initMode},this.initializeSandpackIframe);let{activeFile:o,visibleFiles:s,files:r,environment:n}=pt({template:this.props.template,files:this.props.files,customSetup:this.props.customSetup,options:this.props.options});if(t.template!==this.props.template||!(0,dt.default)(t.options,this.props.options)||!(0,dt.default)(t.customSetup,this.props.customSetup)||!(0,dt.default)(t.files,this.props.files)){if(this.setState({activeFile:o,visibleFiles:s,visibleFilesFromProps:s,files:r,environment:n}),this.state.sandpackStatus!=="running")return;Object.values(this.clients).forEach(y=>y.updatePreview({files:r,template:n}))}let a=(0,dt.default)(r,this.state.files)?"pristine":"dirty";a!==this.state.editorState&&this.setState({editorState:a})}componentWillUnmount(){typeof this.unsubscribe=="function"&&this.unsubscribe(),this.timeoutHook&&clearTimeout(this.timeoutHook),this.debounceHook&&clearTimeout(this.debounceHook),this.initializeSandpackIframeHook&&clearTimeout(this.initializeSandpackIframeHook),this.intersectionObserver&&this.intersectionObserver.disconnect()}render(){var n;let{children:t,theme:o,className:s,style:r}=this.props;return re.createElement(mt.Provider,{value:this._getSandpackState()},re.createElement(Os.ClasserProvider,{classes:(n=this.props.options)==null?void 0:n.classes},re.createElement(No,{className:s,style:r,theme:o},t)))}},Mo=$o,Sn=mt.Consumer;function T(){let e=Ds.useContext(mt);if(e===null)throw new Error('[sandpack-react]: "useSandpack" must be wrapped by a "SandpackProvider"');let r=e,{dispatch:t,listen:o}=r,s=N(r,["dispatch","listen"]);return{sandpack:u({},s),dispatch:t,listen:o}}var ut=()=>{var t,o,s;let{sandpack:e}=T();return{code:(t=e.files[e.activeFile])==null?void 0:t.code,readOnly:(s=(o=e.files[e.activeFile])==null?void 0:o.readOnly)!=null?s:!1,updateCode:e.updateCurrentFile}};var Bs=f(require("@code-hike/classer")),Ye=f(require("react"));var me=m({svg:{margin:"auto"}}),F=m({appearance:"none",border:"0",outline:"none",display:"flex",alignItems:"center",fontSize:"inherit",fontFamily:"inherit",backgroundColor:"transparent",transition:"color $default, background $default",cursor:"pointer",color:"$colors$clickable","&:disabled":{color:"$colors$disabled"},"&:hover:not(:disabled,[data-active='true'])":{color:"$colors$hover"},'&[data-active="true"]':{color:"$colors$accent"},svg:{minWidth:"$space$4",width:"$space$4",height:"$space$4"},[`&.${me}`]:{padding:"$space$1",width:"$space$7",height:"$space$7",display:"flex"}}),te=m({backgroundColor:"$colors$surface2",borderRadius:"99999px",'&[data-active="true"]':{color:"$colors$surface1",background:"$colors$accent"},"&:hover:not(:disabled,[data-active='true'])":{backgroundColor:"$colors$surface3"}}),Hs=m({padding:0}),vn=Mt({"0%":{opacity:0,transform:"translateY(4px)"},"100%":{opacity:1,transform:"translateY(0)"}}),ft=m({position:"absolute",bottom:"0",left:"0",right:"0",top:"0",margin:"0",overflow:"auto",height:"100%",zIndex:"$top"}),jt=m({padding:"$space$4",whiteSpace:"pre-wrap",fontFamily:"$font$mono",backgroundColor:"$colors$errorSurface"}),Ze=m({animation:`${vn} 150ms ease`,color:"$colors$error"});var kn=m({borderBottom:"1px solid $colors$surface2",background:"$colors$surface1"}),Cn=m({padding:"0 $space$2",overflow:"auto",display:"flex",flexWrap:"nowrap",alignItems:"stretch",minHeight:"40px",marginBottom:"-1px"}),_s=m({padding:"0 $space$1 0 $space$1",borderRadius:"$border$radius",marginLeft:"$space$1",width:"$space$5",visibility:"hidden",svg:{width:"$space$3",height:"$space$3",display:"block",position:"relative",top:1}}),js=m({padding:"0 $space$2",height:"$layout$headerHeight",whiteSpace:"nowrap","&:focus":{outline:"none"},[`&:hover > .${_s}`]:{visibility:"unset"}}),ht=s=>{var r=s,{closableTabs:e,className:t}=r,o=N(r,["closableTabs","className"]);let{sandpack:n}=T(),a=(0,Bs.useClasser)(b),{activeFile:c,visibleFiles:p,setActiveFile:d}=n,h=S=>{S.stopPropagation();let v=S.target.closest("[data-active]"),g=v==null?void 0:v.getAttribute("title");!g||n.closeFile(g)},y=S=>{let v=Xe(S),g=p.reduce((k,$)=>($===S||Xe($)===v&&k.push($),k),[]);return g.length===0?v:Es(S,g)};return Ye.createElement("div",u({className:l(a("tabs"),kn,t),translate:"no"},o),Ye.createElement("div",{"aria-label":"Select active file",className:l(a("tabs-scrollable-container"),Cn),role:"tablist"},p.map(S=>Ye.createElement("button",{key:S,"aria-selected":S===c,className:l(a("tab-button"),F,js),"data-active":S===c,onClick:()=>d(S),role:"tab",title:S,type:"button"},y(S),e&&p.length>1&&Ye.createElement("span",{className:l(a("close-button"),_s),onClick:h},Ye.createElement(Ro,null))))))};var Us=f(require("@code-hike/classer")),Lo=f(require("react"));var xn=m({position:"absolute",bottom:"$space$2",right:"$space$2",paddingRight:"$space$3"}),gt=s=>{var r=s,{className:e,onClick:t}=r,o=N(r,["className","onClick"]);let n=(0,Us.useClasser)(b),{sandpack:a}=T();return Lo.createElement("button",u({className:l(n("button"),F,te,xn,e),onClick:c=>{a.runSandpack(),t==null||t(c)},type:"button"},o),Lo.createElement(rt,null),"Run")};var zs=f(require("@code-hike/classer")),Vs=f(require("react"));var Te=m({display:"flex",flexDirection:"column",width:"100%",position:"relative",backgroundColor:"$colors$surface1",transition:"flex $transitions$default",gap:1,[`&:has(.${b}-stack)`]:{backgroundColor:"$colors$surface2"}}),ne=o=>{var s=o,{className:e}=s,t=N(s,["className"]);let r=(0,zs.useClasser)(b);return Vs.createElement("div",u({className:l(r("stack"),Te,e)},t))};var ir=f(require("@code-hike/classer")),Xt=f(require("@codemirror/closebrackets")),Ne=f(require("@codemirror/commands")),cr=f(require("@codemirror/comment")),lr=f(require("@codemirror/gutter")),pr=f(require("@codemirror/highlight")),Wt=f(require("@codemirror/history")),dr=f(require("@codemirror/matchbrackets")),$e=f(require("@codemirror/state")),Io=f(require("@codemirror/state")),fe=f(require("@codemirror/view")),mr=f(require("@react-hook/intersection-observer")),L=f(require("react"));var Xs=f(require("react"));var Oe=()=>{let{theme:e,id:t,mode:o}=Xs.useContext(lt);return{theme:e,themeId:t,themeMode:o}};var wo=(e,t)=>{if(e.length!==t.length)return!1;let o=!0;for(let s=0;s<e.length;s++)if(e[s]!==t[s]){o=!1;break}return o};var De=f(require("@codemirror/view"));var P=f(require("@codemirror/highlight")),Ws=f(require("@codemirror/lang-css")),Gs=f(require("@codemirror/lang-html")),Fo=f(require("@codemirror/lang-javascript")),Zs=f(require("@codemirror/view")),Ys=f(require("react"));var bt=(e,{line:t,column:o})=>e.line(t).from+(o!=null?o:0)-1,Js=()=>Zs.EditorView.theme({"&":{backgroundColor:`var(--${b}-colors-surface1)`,color:`var(--${b}-syntax-color-plain)`,height:"100%"},".cm-matchingBracket, .cm-nonmatchingBracket, &.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket":{color:"inherit",backgroundColor:"rgba(128,128,128,.25)",backgroundBlendMode:"difference"},"&.cm-editor.cm-focused":{outline:"none"},".cm-activeLine":{backgroundColor:`var(--${b}-colors-surface3)`,borderRadius:`var(--${b}-border-radius)`},".cm-errorLine":{backgroundColor:`var(--${b}-colors-errorSurface)`,borderRadius:`var(--${b}-border-radius)`},".cm-content":{caretColor:`var(--${b}-colors-accent)`,padding:`0 var(--${b}-space-4)`},".cm-scroller":{fontFamily:`var(--${b}-font-mono)`,lineHeight:`var(--${b}-font-lineHeight)`},".cm-gutters":{backgroundColor:`var(--${b}-colors-surface1)`,color:`var(--${b}-colors-disabled)`,border:"none",paddingLeft:`var(--${b}-space-1)`},".cm-gutter.cm-lineNumbers":{fontSize:".6em"},".cm-lineNumbers .cm-gutterElement":{lineHeight:`var(--${b}-font-lineHeight)`,minWidth:`var(--${b}-space-5)`},".cm-content .cm-line":{paddingLeft:`var(--${b}-space-1)`},".cm-content.cm-readonly .cm-line":{paddingLeft:0}}),ue=e=>`${b}-syntax-${e}`,qs=()=>["string","plain","comment","keyword","definition","punctuation","property","tag","static"].reduce((t,o)=>M(u({},t),{[`.${ue(o)}`]:{color:`$syntax$color$${o}`,fontStyle:`$syntax$fontStyle$${o}`}}),{}),Ks=e=>P.HighlightStyle.define([{tag:P.tags.link,textDecoration:"underline"},{tag:P.tags.emphasis,fontStyle:"italic"},{tag:P.tags.strong,fontWeight:"bold"},{tag:P.tags.keyword,class:ue("keyword")},{tag:[P.tags.atom,P.tags.number,P.tags.bool],class:ue("static")},{tag:P.tags.standard(P.tags.tagName),class:ue("tag")},{tag:P.tags.variableName,class:ue("plain")},{tag:P.tags.function(P.tags.variableName),class:ue("definition")},{tag:[P.tags.definition(P.tags.function(P.tags.variableName)),P.tags.tagName],class:ue("definition")},{tag:P.tags.propertyName,class:ue("property")},{tag:[P.tags.literal,P.tags.inserted],class:ue(e.syntax.string?"string":"static")},{tag:P.tags.punctuation,class:ue("punctuation")},{tag:[P.tags.comment,P.tags.quote],class:ue("comment")}]),Qs=(e,t,o)=>{if(!e&&!t)return"javascript";let s=t;if(!s&&e){let r=e.lastIndexOf(".");s=e.slice(r+1)}for(let r of o)if(s===r.name||r.extensions.includes(s||""))return r.name;switch(s){case"ts":case"tsx":return"typescript";case"html":case"svelte":case"vue":return"html";case"css":case"less":case"scss":return"css";case"js":case"jsx":case"json":default:return"javascript"}},er=(e,t)=>{let o={javascript:(0,Fo.javascript)({jsx:!0,typescript:!1}),typescript:(0,Fo.javascript)({jsx:!0,typescript:!0}),html:(0,Gs.html)(),css:(0,Ws.css)()};for(let s of t)if(e===s.name)return s.language;return o[e]},Ut=(...e)=>Ys.useCallback(t=>e.forEach(o=>{if(!!o){if(typeof o=="function")return o(t);o.current=t}}),e);function tr(e){return De.ViewPlugin.fromClass(class{constructor(t){this.decorations=this.getDecoration(t)}update(t){}getDecoration(t){if(!e)return De.Decoration.none;let o=e.map(s=>{var c,p,d;let r=De.Decoration.line({attributes:{class:(c=s.className)!=null?c:""}}),n=De.Decoration.mark({class:(p=s.className)!=null?p:"",attributes:(d=s.elementAttributes)!=null?d:void 0}),a=bt(t.state.doc,{line:s.line,column:s.startColumn})+1;if(s.startColumn&&s.endColumn){let h=bt(t.state.doc,{line:s.line,column:s.endColumn})+1;return n.range(a,h)}return r.range(a)});return De.Decoration.set(o)}},{decorations:t=>t.decorations})}var He=f(require("@codemirror/view"));function or(){return En}var Rn=He.Decoration.line({attributes:{class:"cm-errorLine"}}),En=He.ViewPlugin.fromClass(class{constructor(){this.decorations=He.Decoration.none}update(e){e.transactions.forEach(t=>{let o=t.annotation("show-error");if(o!==void 0){let s=bt(e.view.state.doc,{line:o})+1;this.decorations=He.Decoration.set([Rn.range(s)])}else t.annotation("remove-errors")&&(this.decorations=He.Decoration.none)})}},{decorations:e=>e.decorations});var zt=m({margin:"0",display:"block",fontFamily:"$font$mono",fontSize:"$font$size",color:"$syntax$color$plain",lineHeight:"$font$lineHeight"}),Ao=m(qs()),Vt=m({flex:1,position:"relative",overflow:"auto",background:"$colors$surface1",".cm-scroller":{padding:"$space$4 0"},[`.${zt}`]:{padding:"$space$4 0"}}),Po=m({margin:"0",outline:"none",height:"100%"}),sr=m({fontFamily:"$font$mono",fontSize:"0.8em",position:"absolute",right:"$space$2",bottom:"$space$2",zIndex:"$top",color:"$colors$clickable",backgroundColor:"$colors$surface2",borderRadius:"99999px",padding:"calc($space$1 / 2) $space$2",[`& + .${F}`]:{right:"calc($space$11 * 2)"}});var rr=f(require("@codemirror/highlight")),nr=f(require("react")),ar=({langSupport:e,highlightTheme:t,code:o=""})=>{let s=e.language.parser.parse(o),r=0,n=[],a=(c,p)=>{if(c>r){let d=o.slice(r,c);n.push(p?(0,nr.createElement)("span",{children:d,className:p,key:`${c}${r}`}):d),r=c}};return(0,rr.highlightTree)(s,t.match,(c,p,d)=>{a(c,""),a(p,d)}),r<o.length&&n.push(`
+ 
+ `),n};var Be=L.forwardRef(({code:e,filePath:t,fileType:o,onCodeUpdate:s,showLineNumbers:r=!1,showInlineErrors:n=!1,wrapContent:a=!1,editorState:c="pristine",readOnly:p=!1,showReadOnly:d=!0,decorators:h,initMode:y="lazy",id:S,extensions:v=[],extensionsKeymap:g=[],additionalLanguages:k=[]},$)=>{let w=L.useRef(null),X=Ut(w,$),A=L.useRef(),{theme:ae,themeId:W}=Oe(),[Q,G]=L.useState(e),[q,C]=L.useState(y==="immediate"),O=(0,ir.useClasser)(b),{listen:be}=T(),x=L.useRef([]),R=L.useRef([]),{isIntersecting:z}=(0,mr.default)(w,{rootMargin:"600px 0px",threshold:.2});L.useImperativeHandle($,()=>({getCodemirror:()=>A.current})),L.useEffect(()=>{(y==="lazy"||y==="user-visible")&&z&&C(!0)},[y,z]);let D=Qs(t,o,k),V=er(D,k),le=Ks(ae),et=ar({langSupport:V,highlightTheme:le,code:e}),je=L.useMemo(()=>h&&h.sort((_,Z)=>_.line-Z.line),[h]);L.useEffect(()=>{if(!w.current||!q)return;let _=setTimeout(function(){let ee=[{key:"Tab",run:ie=>{var Ce;(0,Ne.indentMore)(ie);let pe=g.find(({key:Ae})=>Ae==="Tab");return(Ce=pe==null?void 0:pe.run(ie))!=null?Ce:!0}},{key:"Shift-Tab",run:({state:ie,dispatch:pe})=>{var Ae;(0,Ne.indentLess)({state:ie,dispatch:pe});let Ce=g.find(({key:Nt})=>Nt==="Shift-Tab");return(Ae=Ce==null?void 0:Ce.run(ye))!=null?Ae:!0}},{key:"Escape",run:()=>(p||w.current&&w.current.focus(),!0)},{key:"mod-Backspace",run:Ne.deleteGroupBackward}],j=[(0,fe.highlightSpecialChars)(),(0,Wt.history)(),(0,Xt.closeBrackets)(),...v,fe.keymap.of([...Xt.closeBracketsKeymap,...Ne.defaultKeymap,...Wt.historyKeymap,...cr.commentKeymap,...ee,...g]),V,pr.defaultHighlightStyle.fallback,Js(),le];p?(j.push($e.EditorState.readOnly.of(!0)),j.push(fe.EditorView.editable.of(!1))):(j.push((0,dr.bracketMatching)()),j.push((0,fe.highlightActiveLine)())),je&&j.push(tr(je)),a&&j.push(fe.EditorView.lineWrapping),r&&j.push((0,lr.lineNumbers)()),n&&j.push(or());let Ue=$e.EditorState.create({doc:e,extensions:j}),ze=w.current,ot=ze.querySelector(".sp-pre-placeholder");ot&&ze.removeChild(ot);let ye=new fe.EditorView({state:Ue,parent:ze,dispatch:ie=>{if(ye.update([ie]),ie.docChanged){let pe=ie.newDoc.sliceString(0,ie.newDoc.length);G(pe),s==null||s(pe)}}});ye.contentDOM.setAttribute("data-gramm","false"),ye.contentDOM.setAttribute("aria-label",t?`Code Editor for ${Xe(t)}`:"Code Editor"),p?ye.contentDOM.classList.add("cm-readonly"):ye.contentDOM.setAttribute("tabIndex","-1"),A.current=ye},0);return()=>{var Z;(Z=A.current)==null||Z.destroy(),clearTimeout(_)}},[q,r,a,W,je,p]),L.useEffect(function(){let Z=A.current,ee=!wo(v,x.current)||!wo(g,R.current);Z&&ee&&(Z.dispatch({effects:$e.StateEffect.appendConfig.of(v)}),Z.dispatch({effects:$e.StateEffect.appendConfig.of(fe.keymap.of([...g]))}),x.current=v,R.current=g)},[v,g]),L.useEffect(()=>{A.current&&c==="dirty"&&window.matchMedia("(min-width: 768px)").matches&&A.current.contentDOM.focus()},[]),L.useEffect(()=>{if(A.current&&e!==Q){let _=A.current,Z=_.state.selection.ranges.some(({to:j,from:Ue})=>j>e.length||Ue>e.length)?$e.EditorSelection.cursor(e.length):_.state.selection,ee={from:0,to:_.state.doc.length,insert:e};_.dispatch({changes:ee,selection:Z})}},[e]),L.useEffect(function(){if(!n)return;let Z=be(ee=>{let j=A.current;ee.type==="success"?j==null||j.dispatch({annotations:[new Io.Annotation("remove-errors",!0)]}):ee.type==="action"&&ee.action==="show-error"&&ee.line&&(j==null||j.dispatch({annotations:[new Io.Annotation("show-error",ee.line)]}))});return()=>Z()},[be,n]);let Tt=_=>{_.key==="Enter"&&A.current&&(_.preventDefault(),A.current.contentDOM.focus())},tt=()=>{let _=4;return r&&(_+=6),p||(_+=1),`var(--${b}-space-${_})`};return p?L.createElement(L.Fragment,null,L.createElement("pre",{ref:X,className:l(O("cm",c,D),Po,Ao),translate:"no"},L.createElement("code",{className:l(O("pre-placeholder"),zt),style:{marginLeft:tt()}},et)),p&&d&&L.createElement("span",u({className:l(O("read-only"),sr)},{}),"Read-only")):L.createElement("div",{ref:X,"aria-autocomplete":"list","aria-label":t?`Code Editor for ${Xe(t)}`:"Code Editor","aria-multiline":"true",className:l(O("cm",c,D),Po,Ao),onKeyDown:Tt,role:"textbox",tabIndex:0,translate:"no",suppressHydrationWarning:!0},L.createElement("pre",{className:l(O("pre-placeholder"),zt),style:{marginLeft:tt()}},et))});var Oo=Me.forwardRef(({style:e,showTabs:t,showLineNumbers:o=!1,showInlineErrors:s=!1,showRunButton:r=!0,wrapContent:n=!1,closableTabs:a=!1,initMode:c,extensions:p,extensionsKeymap:d,id:h,readOnly:y,showReadOnly:S,additionalLanguages:v},g)=>{let{sandpack:k}=T(),{code:$,updateCode:w,readOnly:X}=ut(),{activeFile:A,status:ae,editorState:W}=k,Q=t!=null?t:k.visibleFiles.length>1,G=(0,ur.useClasser)(b),q=C=>{w(C)};return Me.createElement(ne,{className:G("editor"),style:e},Q&&Me.createElement(ht,{closableTabs:a}),Me.createElement("div",{className:l(G("code-editor"),Vt)},Me.createElement(Be,{key:A,ref:g,additionalLanguages:v,code:$,editorState:W,extensions:p,extensionsKeymap:d,filePath:A,id:h,initMode:c||k.initMode,onCodeUpdate:q,readOnly:y||X,showInlineErrors:s,showLineNumbers:o,showReadOnly:S,wrapContent:n}),r&&ae==="idle"?Me.createElement(gt,null):null))});var fr=f(require("@code-hike/classer")),Le=f(require("react"));var Do=Le.forwardRef((p,c)=>{var d=p,{showTabs:e,showLineNumbers:t,decorators:o,code:s,initMode:r,wrapContent:n}=d,a=N(d,["showTabs","showLineNumbers","decorators","code","initMode","wrapContent"]);let{sandpack:h}=T(),{code:y}=ut(),S=(0,fr.useClasser)(b),v=e!=null?e:h.visibleFiles.length>1;return Le.createElement(ne,u({},a),v?Le.createElement(ht,null):null,Le.createElement("div",{className:l(S("code-editor"),Vt)},Le.createElement(Be,{ref:c,code:s!=null?s:y,decorators:o,filePath:h.activeFile,initMode:r||h.initMode,showLineNumbers:t,showReadOnly:!1,wrapContent:n,readOnly:!0})),h.status==="idle"?Le.createElement(gt,null):null)});var Ho=f(require("react"));var Yt=f(require("react"));var qe=f(require("react"));var hr=f(require("@code-hike/classer")),Je=f(require("react"));var Tn=m({borderRadius:"0",width:"100%",padding:0,marginBottom:"$space$2",span:{textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden"},svg:{marginRight:"$space$1"}}),Gt=({selectFile:e,path:t,active:o,onClick:s,depth:r,isDirOpen:n})=>{let a=(0,hr.useClasser)(b),c=h=>{e&&e(t),s==null||s(h)},p=t.split("/").filter(Boolean).pop(),d=()=>e?Je.createElement(xo,null):n?Je.createElement(ko,null):Je.createElement(Co,null);return Je.createElement("button",{className:l(a("button","explorer"),F,Tn),"data-active":o,onClick:c,style:{paddingLeft:18*r+"px"},title:p,type:"button"},d(),Je.createElement("span",null,p))};var gr=({prefixedPath:e,files:t,selectFile:o,activeFile:s,depth:r,autoHiddenFiles:n,visibleFiles:a})=>{let[c,p]=qe.useState(!0);return qe.createElement("div",{key:e},qe.createElement(Gt,{depth:r,isDirOpen:c,onClick:()=>p(h=>!h),path:e+"/"}),c&&qe.createElement(Zt,{activeFile:s,autoHiddenFiles:n,depth:r+1,files:t,prefixedPath:e,selectFile:o,visibleFiles:a}))};var br=({autoHiddenFiles:e,visibleFiles:t,files:o,prefixedPath:s})=>{let r=t.length>0,n=e&&!r,a=e&&!!r,c=Object.keys(o).filter(h=>{var S;let y=h.startsWith(s);return a?y&&t.includes(h):n?y&&!((S=o[h])==null?void 0:S.hidden):y}).map(h=>h.substring(s.length)),p=new Set(c.filter(h=>h.includes("/")).map(h=>`${s}${h.split("/")[0]}/`)),d=c.filter(h=>!h.includes("/")).map(h=>`${s}${h}`);return{directories:Array.from(p),modules:d}};var Zt=({depth:e=0,activeFile:t,selectFile:o,prefixedPath:s,files:r,autoHiddenFiles:n,visibleFiles:a})=>{let{directories:c,modules:p}=br({visibleFiles:a,autoHiddenFiles:n,prefixedPath:s,files:r});return Yt.createElement("div",null,c.map(d=>Yt.createElement(gr,{key:d,activeFile:t,autoHiddenFiles:n,depth:e,files:r,prefixedPath:d,selectFile:o,visibleFiles:a})),p.map(d=>Yt.createElement(Gt,{key:d,active:t===d,depth:e,path:d,selectFile:o})))};var Nn=m({padding:"$space$3",overflow:"auto",height:"100%"}),$n=s=>{var r=s,{className:e,autoHiddenFiles:t=!1}=r,o=N(r,["className","autoHiddenFiles"]);let{sandpack:n}=T();return Ho.createElement("div",u({className:l(Te,Nn,`${b}-file-explorer`,e)},o),Ho.createElement(Zt,{activeFile:n.activeFile,autoHiddenFiles:t,files:n.files,prefixedPath:"/",selectFile:n.openFile,visibleFiles:n.visibleFilesFromProps}))};var Sr=f(require("@code-hike/classer")),Y=f(require("react"));var yr=e=>{let t=e.match(/(https?:\/\/.*?)\//);return t&&t[1]?[t[1],e.replace(t[1],"")]:[e,"/"]};var Mn=m({display:"flex",alignItems:"center",height:"$layout$headerHeight",borderBottom:"1px solid $colors$surface2",padding:"$space$3 $space$2",background:"$colors$surface1"}),Ln=m({backgroundColor:"$colors$surface2",color:"$colors$clickable",padding:"$space$1 $space$3",borderRadius:"99999px",border:"1px solid $colors$surface2",height:"24px",lineHeight:"24px",fontSize:"inherit",outline:"none",flex:1,marginLeft:"$space$4",width:"0",transition:"background $transitions$default","&:hover":{backgroundColor:"$colors$surface3"},"&:focus":{backgroundColor:"$surface1",border:"1px solid $colors$accent",color:"$colors$base"}}),Bo=r=>{var n=r,{clientId:e,onURLChange:t,className:o}=n,s=N(n,["clientId","onURLChange","className"]);var q;let[a,c]=Y.useState(""),{sandpack:p,dispatch:d,listen:h}=T(),[y,S]=Y.useState((q=p.startRoute)!=null?q:"/"),[v,g]=Y.useState(!1),[k,$]=Y.useState(!1),w=(0,Sr.useClasser)(b);Y.useEffect(()=>{let C=h(O=>{if(O.type==="urlchange"){let{url:be,back:x,forward:R}=O,[z,D]=yr(be);c(z),S(D),g(x),$(R)}},e);return()=>C()},[]);let X=C=>{let O=C.target.value.startsWith("/")?C.target.value:`/${C.target.value}`;S(O)},A=C=>{C.code==="Enter"&&(C.preventDefault(),C.stopPropagation(),typeof t=="function"&&t(a+C.currentTarget.value))},ae=()=>{d({type:"refresh"})},W=()=>{d({type:"urlback"})},Q=()=>{d({type:"urlforward"})},G=l(w("button","icon"),F,Hs,m({minWidth:"$space$6",justifyContent:"center"}));return Y.createElement("div",u({className:l(w("navigator"),Mn,o)},s),Y.createElement("button",{"aria-label":"Go back one page",className:G,disabled:!v,onClick:W,type:"button"},Y.createElement(bo,null)),Y.createElement("button",{"aria-label":"Go forward one page",className:G,disabled:!k,onClick:Q,type:"button"},Y.createElement(yo,null)),Y.createElement("button",{"aria-label":"Refresh page",className:G,onClick:ae,type:"button"},Y.createElement(nt,null)),Y.createElement("input",{"aria-label":"Current Sandpack URL",className:l(w("input"),Ln),name:"Current Sandpack URL",onChange:X,onKeyDown:A,type:"text",value:y}))};var $r=f(require("@code-hike/classer")),U=f(require("react"));var vr=f(require("react"));var _o=()=>{var o;let{sandpack:e}=T(),{error:t}=e;return vr.useEffect(()=>{e.errorScreenRegisteredRef.current=!0},[]),(o=t==null?void 0:t.message)!=null?o:null};var yt=f(require("react"));var Jt=200,jo=(e,t)=>{let{sandpack:o,listen:s}=T(),[r,n]=yt.useState("LOADING");return yt.useEffect(()=>{o.loadingScreenRegisteredRef.current=!0;let a=s(c=>{c.type==="start"&&c.firstLoad===!0&&n("LOADING"),c.type==="done"&&n(p=>p==="LOADING"?"PRE_FADING":"HIDDEN")},e);return()=>{a()}},[e,o.status==="idle"]),yt.useEffect(()=>{let a;return r==="PRE_FADING"&&!t?n("FADING"):r==="FADING"&&(a=setTimeout(()=>n("HIDDEN"),Jt)),()=>{clearTimeout(a)}},[r,t]),o.status==="timeout"?"TIMEOUT":o.status!=="running"?"HIDDEN":r};var Uo=e=>{let{dispatch:t}=T();return{refresh:()=>t({type:"refresh"},e),back:()=>t({type:"urlback"},e),forward:()=>t({type:"urlforward"},e)}};function wn(e){var r,n;let{activeFile:t,bundlerState:o}=e;if(o==null)return null;let s=o.transpiledModules[t+":"];return(n=(r=s==null?void 0:s.source)==null?void 0:r.compiledCode)!=null?n:null}var zo=()=>{let{sandpack:e}=T();return e.status!=="running"?null:wn(e)};var St=f(require("react"));var vt=()=>{let{sandpack:e,listen:t,dispatch:o}=T(),s=St.useRef(null),r=St.useRef(it());return St.useEffect(()=>{let a=s.current,c=r.current;return a!==null&&e.registerBundler(a,c),()=>e.unregisterBundler(c)},[]),{sandpack:e,getClient:()=>e.clients[r.current]||null,clientId:r.current,iframe:s,listen:a=>t(a,r.current),dispatch:a=>o(a,r.current)}};var kr=f(require("@code-hike/classer")),Vo=f(require("react"));var kt=s=>{var r=s,{children:e,className:t}=r,o=N(r,["children","className"]);let n=_o(),a=(0,kr.useClasser)(b);return!n&&!e?null:Vo.createElement("div",u({className:l(a("overlay","error"),ft,jt,t),translate:"no"},o),Vo.createElement("div",{className:l(a("error-message"),Ze)},n||e))};var Tr=f(require("@code-hike/classer")),_e=f(require("react"));var Er=f(require("@code-hike/classer")),he=f(require("react"));var Rr=f(require("@code-hike/classer")),Xo=f(require("react"));var Cr=f(require("lz-string")),ce=f(require("react"));var Fn=e=>Cr.default.compressToBase64(JSON.stringify(e)).replace(/\+/g,"-").replace(/\//g,"_").replace(/=+$/,""),xr="https://codesandbox.io/api/v1/sandboxes/define",An=(e,t)=>{let o=Object.keys(e).reduce((s,r)=>{let n=r.replace("/",""),a={content:e[r].code,isBinary:!1};return M(u({},s),{[n]:a})},{});return Fn(u({files:o},t?{template:t}:null))},qt=o=>{var s=o,{children:e}=s,t=N(s,["children"]);var p,d,h;let{sandpack:r}=T(),n=ce.useRef(null),[a,c]=ce.useState();return ce.useEffect(function(){let S=setTimeout(()=>{let v=An(r.files,r.environment),g=new URLSearchParams({parameters:v,query:new URLSearchParams({file:r.activeFile,utm_medium:"sandpack"}).toString()});c(g)},600);return()=>{clearTimeout(S)}},[r.activeFile,r.environment,r.files]),ce.useEffect(function(){r.openInCSBRegisteredRef.current=!0},[]),((h=(d=(p=a==null?void 0:a.get)==null?void 0:p.call(a,"parameters"))==null?void 0:d.length)!=null?h:0)>1500?ce.createElement("button",u({onClick:()=>{var y;return(y=n.current)==null?void 0:y.submit()},title:"Open in CodeSandbox"},t),ce.createElement("form",{ref:n,action:xr,method:"POST",style:{visibility:"hidden"},target:"_blank"},Array.from(a,([y,S])=>ce.createElement("input",{key:y,name:y,type:"hidden",value:S}))),e):ce.createElement("a",u({href:`${xr}?${a==null?void 0:a.toString()}`,rel:"noreferrer noopener",target:"_blank",title:"Open in CodeSandbox"},t),e)};var Ke=()=>{let e=(0,Rr.useClasser)(b);return Xo.createElement(qt,{className:l(e("button","icon-standalone"),F,me,te)},Xo.createElement(vo,null))};var Wo=m({transform:"translate(-4px, 9px) scale(0.13, 0.13)","*":{position:"absolute",width:"96px",height:"96px"}}),Pn=m({position:"absolute",right:"$space$2",bottom:"$space$2",zIndex:"$top",width:"32px",height:"32px",borderRadius:"$border$radius",[`.${Wo}`]:{display:"flex"},[`.${F}`]:{display:"none"},[`&:hover .${F}`]:{display:"flex"},[`&:hover .${Wo}`]:{display:"none"}}),In=Mt({"0%":{transform:"rotateX(-25.5deg) rotateY(45deg)"},"100%":{transform:"rotateX(-25.5deg) rotateY(405deg)"}}),On=m({animation:`${In} 1s linear infinite`,animationFillMode:"forwards",transformStyle:"preserve-3d",transform:"rotateX(-25.5deg) rotateY(45deg)","*":{border:"10px solid $colors$clickable",borderRadius:"8px",background:"$colors$surface1"},".top":{transform:"rotateX(90deg) translateZ(44px)",transformOrigin:"50% 50%"},".bottom":{transform:"rotateX(-90deg) translateZ(44px)",transformOrigin:"50% 50%"},".front":{transform:"rotateY(0deg) translateZ(44px)",transformOrigin:"50% 50%"},".back":{transform:"rotateY(-180deg) translateZ(44px)",transformOrigin:"50% 50%"},".left":{transform:"rotateY(-90deg) translateZ(44px)",transformOrigin:"50% 50%"},".right":{transform:"rotateY(90deg) translateZ(44px)",transformOrigin:"50% 50%"}}),Kt=s=>{var r=s,{className:e,showOpenInCodeSandbox:t}=r,o=N(r,["className","showOpenInCodeSandbox"]);let n=(0,Er.useClasser)(b);return he.createElement("div",u({className:l(n("cube-wrapper"),Pn,e),title:"Open in CodeSandbox"},o),t&&he.createElement(Ke,null),he.createElement("div",{className:l(n("cube"),Wo)},he.createElement("div",{className:l(n("sides"),On)},he.createElement("div",{className:"top"}),he.createElement("div",{className:"right"}),he.createElement("div",{className:"bottom"}),he.createElement("div",{className:"left"}),he.createElement("div",{className:"front"}),he.createElement("div",{className:"back"}))))};var Dn=m({backgroundColor:"$colors$surface1"}),Ct=a=>{var c=a,{clientId:e,loading:t,className:o,style:s,showOpenInCodeSandbox:r}=c,n=N(c,["clientId","loading","className","style","showOpenInCodeSandbox"]);let p=jo(e,t),d=(0,Tr.useClasser)(b);if(p==="HIDDEN")return null;if(p==="TIMEOUT")return _e.createElement("div",u({className:l(d("overlay","error"),ft,jt,o)},n),_e.createElement("div",{className:l(d("error-message"),Ze)},"Unable to establish connection with the sandpack bundler. Make sure you are online or try again later. If the problem persists, please report it via"," ",_e.createElement("a",{className:l(d("error-message"),Ze),href:"mailto:hello@codesandbox.io?subject=Sandpack Timeout Error"},"email")," ","or submit an issue on"," ",_e.createElement("a",{className:l(d("error-message"),Ze),href:"https://github.com/codesandbox/sandpack/issues",rel:"noreferrer noopener",target:"_blank"},"GitHub.")));let h=p==="LOADING"||p==="PRE_FADING";return _e.createElement("div",u({className:l(d("overlay","loading"),ft,Dn,o),style:M(u({},s),{opacity:h?1:0,transition:`opacity ${Jt}ms ease-out`})},n),_e.createElement(Kt,{showOpenInCodeSandbox:r}))};var Nr=f(require("@code-hike/classer")),Go=f(require("react"));var Zo=({clientId:e})=>{let{refresh:t}=Uo(e),o=(0,Nr.useClasser)(b);return Go.createElement("button",{className:l(o("button","icon-standalone"),F,me,te),onClick:t,title:"Refresh Sandpack",type:"button"},Go.createElement(nt,null))};var Hn=m({flex:1,display:"flex",flexDirection:"column",background:"white",overflow:"auto",position:"relative"}),Bn=m({border:"0",outline:"0",width:"100%",height:"100%",minHeight:"160px",maxHeight:"2000px",flex:1}),_n=m({display:"flex",position:"absolute",bottom:"$space$2",right:"$space$2",zIndex:"$overlay","> *":{marginLeft:"$space$2"}}),Yo=U.forwardRef((d,p)=>{var h=d,{showNavigator:e=!1,showRefreshButton:t=!0,showOpenInCodeSandbox:o=!0,showSandpackErrorOverlay:s=!0,actionsChildren:r=U.createElement(U.Fragment,null),children:n,className:a}=h,c=N(h,["showNavigator","showRefreshButton","showOpenInCodeSandbox","showSandpackErrorOverlay","actionsChildren","children","className"]);let{sandpack:y,listen:S,iframe:v,getClient:g,clientId:k}=vt(),[$,w]=U.useState(null),{status:X,errorScreenRegisteredRef:A,openInCSBRegisteredRef:ae,loadingScreenRegisteredRef:W}=y,Q=(0,$r.useClasser)(b);ae.current=!0,A.current=!0,W.current=!0,U.useEffect(()=>S(C=>{C.type==="resize"&&w(C.height)}),[]),U.useImperativeHandle(p,()=>({clientId:k,getClient:g}),[g,k]);let G=q=>{!v.current||(v.current.src=q)};return U.createElement(ne,u({className:l(`${b}-preview`,a)},c),e&&U.createElement(Bo,{clientId:k,onURLChange:G}),U.createElement("div",{className:l(Q("preview-container"),Hn)},U.createElement("iframe",{ref:v,className:l(Q("preview-iframe"),Bn),style:{height:$||void 0},title:"Sandpack Preview"}),s&&U.createElement(kt,null),U.createElement("div",{className:l(Q("preview-actions"),_n)},r,!e&&t&&X==="running"&&U.createElement(Zo,{clientId:k}),o&&U.createElement(Ke,null)),U.createElement(Ct,{clientId:k,showOpenInCodeSandbox:o}),n))});var Mr=f(require("@code-hike/classer")),Se=f(require("react"));var jn=m({display:"flex",flexDirection:"column",width:"100%",position:"relative",overflow:"auto",minHeight:"160px",flex:1}),Un=o=>{var s=o,{className:e}=s,t=N(s,["className"]);let{sandpack:r}=T(),n=zo(),a=(0,Mr.useClasser)(b),c=Se.useRef(null);return Se.useEffect(()=>{let p=c.current;return p&&r.registerBundler(p,"hidden"),()=>{r.unregisterBundler("hidden")}},[]),Se.createElement("div",u({className:l(a("transpiled-code"),Te,jn,e)},t),Se.createElement(Do,u({code:n!=null?n:"",initMode:r.initMode},t)),Se.createElement("iframe",{ref:c,style:{display:"none"},title:"transpiled sandpack code"}),Se.createElement(kt,null),Se.createElement(Ct,{clientId:"hidden",showOpenInCodeSandbox:!1}))};var Lr=f(require("@code-hike/classer")),ge=f(require("react"));var zn=m({height:"$layout$height",width:"100%"}),Vn=r=>{var n=r,{clientId:e,theme:t,className:o}=n,s=N(n,["clientId","theme","className"]);let{listen:a,sandpack:c}=T(),{themeMode:p}=Oe(),d=(0,Lr.useClasser)(b),h=ge.useRef(),[y,S]=ge.useState(null);return ge.useEffect(()=>{import("react-devtools-inline/frontend").then(v=>{h.current=v})},[]),ge.useEffect(()=>a(g=>{var k;if(g.type==="activate-react-devtools"){let $=e?c.clients[e]:Object.values(c.clients)[0],w=(k=$==null?void 0:$.iframe)==null?void 0:k.contentWindow;h.current&&w&&S(h.current.initialize(w))}}),[h,e,a,c.clients]),ge.useEffect(()=>{c.registerReactDevTools("legacy")},[]),y?ge.createElement("div",u({className:l(d("devtools"),zn,o)},s),ge.createElement(y,{browserTheme:t!=null?t:p})):null};var H=f(require("react"));var wr=f(require("@code-hike/classer")),Qt=f(require("react"));var Fr=m({border:"1px solid $colors$surface2",display:"flex",flexWrap:"wrap",alignItems:"stretch",borderRadius:"$border$radius",overflow:"hidden",position:"relative",backgroundColor:"$colors$surface2",gap:1,[`> .${Te}`]:{flexGrow:1,flexShrink:1,flexBasis:"0",minWidth:"350px",height:"$layout$height","@media print":{height:"auto",display:"block"},"@media screen and (max-width: 768px)":{height:"auto",minWidth:"100% !important;"}},[`> .${b}-file-explorer`]:{flex:.2,minWidth:200}}),Jo=Qt.forwardRef((r,s)=>{var n=r,{children:e,className:t}=n,o=N(n,["children","className"]);let{sandpack:a}=T(),c=(0,wr.useClasser)(b),p=Ut(a.lazyAnchorRef,s);return Qt.createElement("div",u({ref:p,className:l(c("layout"),Fr,t)},o),e)});var Re=f(require("react"));var Xn=m({justifyContent:"space-between",borderBottom:"1px solid $colors$surface2",padding:"$space$3 $space$2",fontFamily:"$font$mono",maxHeight:"$layout$headerHeight",overflowX:"auto",whiteSpace:"nowrap"}),qo=m({display:"flex",flexDirection:"row",alignItems:"center",gap:"$space$2"}),Ar=({status:e,suiteOnly:t,setSuiteOnly:o,setVerbose:s,verbose:r,watchMode:n,setWatchMode:a,showSuitesOnly:c})=>{let p=l(F,te,m({padding:"$space$1 $space$3"}));return Re.createElement("div",{className:l(Xn,qo)},Re.createElement("div",{className:l(qo)},Re.createElement("p",{className:l(m({lineHeight:1,margin:0,color:"$colors$base",fontSize:"$font$size",display:"flex",alignItems:"center",gap:"$space$2"}))},Re.createElement(Pe,null),"Tests")),Re.createElement("div",{className:l(qo)},c&&Re.createElement("button",{className:p,"data-active":t,disabled:e==="initialising",onClick:o},"Suite only"),Re.createElement("button",{className:p,"data-active":r,disabled:e==="initialising",onClick:s},"Verbose"),Re.createElement("button",{className:p,"data-active":n,disabled:e==="initialising",onClick:a},"Watch")))};var Pr=f(require("@code-hike/classer")),Ko=f(require("react"));var Ir=({onClick:e})=>{let t=(0,Pr.useClasser)(b);return Ko.createElement("button",{className:l(t("button","icon-standalone"),F,me,te),onClick:e,title:"Run tests",type:"button"},Ko.createElement(rt,null))};var I=f(require("react"));var Fe=f(require("react"));var we=f(require("react"));var Or=e=>({"--test-pass":e?"#18df16":"#15c213","--test-fail":e?"#df162b":"#c21325","--test-skip":e?"#eace2b":"#c2a813","--test-run":e?"#eace2b":"#c2a813","--test-title":e?"#3fbabe":"#256c6f"}),eo=m({variants:{status:{pass:{color:"var(--test-pass)"},fail:{color:"var(--test-fail)"},skip:{color:"var(--test-skip)"},title:{color:"var(--test-title)"}}}}),ve=eo({status:"pass"}),J=eo({status:"fail"}),to=eo({status:"skip"}),Dr=eo({status:"title"}),Qo=m({variants:{status:{pass:{background:"var(--test-pass)",color:"$colors$surface1"},fail:{background:"var(--test-fail)",color:"$colors$surface1"},run:{background:"var(--test-run)",color:"$colors$surface1"}}}}),Hr=Qo({status:"run"}),Br=Qo({status:"pass"}),es=Qo({status:"fail"});var Wn=m({marginLeft:"$space$4"}),Gn=m({marginBottom:"$space$2",color:"$colors$clickable"}),Zn=m({marginBottom:"$space$2",color:"$colors$hover"}),Yn=m({marginLeft:"$space$2"}),ts=m({marginRight:"$space$2"}),oo=({tests:e,style:t})=>we.default.createElement("div",{className:l(Wn)},e.map(o=>we.default.createElement("div",{key:o.name,className:l(Gn)},o.status==="pass"&&we.default.createElement("span",{className:l(ve,ts)},"\u2713"),o.status==="fail"&&we.default.createElement("span",{className:l(J,ts)},"\u2715"),o.status==="idle"&&we.default.createElement("span",{className:l(to,ts)},"\u25CB"),we.default.createElement("span",{className:l(Zn)},o.name),o.duration!==void 0&&we.default.createElement("span",{className:l(Yn)},"(",o.duration," ms)"))));var _r=f(require("clean-set")),jr=e=>so(e).filter(t=>t.status==="fail"),so=e=>Object.values(e.tests).concat(...Object.values(e.describes).map(so)),Ur=e=>e.map(ro).reduce((t,o)=>({pass:t.pass+o.pass,fail:t.fail+o.fail,skip:t.skip+o.skip,total:t.total+o.total}),{pass:0,skip:0,fail:0,total:0}),ro=e=>so(e).reduce((t,o)=>({pass:o.status==="pass"?t.pass+1:t.pass,fail:o.status==="fail"?t.fail+1:t.fail,skip:o.status==="idle"||o.status==="running"?t.skip+1:t.skip,total:t.total+1}),{pass:0,fail:0,skip:0,total:0}),zr=e=>e.filter(t=>Object.values(t.describes).length>0||Object.values(t.tests).length>0).map(ro).reduce((t,o)=>({pass:t.pass+(o.fail===0?1:0),fail:t.fail+(o.fail>0?1:0),total:t.total+1}),{pass:0,fail:0,total:0}),Vr=e=>Qe(e,so).reduce((t,o)=>t+(o.duration||0),0),no=e=>Object.values(e.describes).length===0&&Object.values(e.tests).length===0,xt=e=>{let t=e.length-1,o=e.slice(0,t),s=e[t];return[o,s]},Qe=(e,t)=>e.map(t).reduce((o,s)=>o.concat(s),[]),ke=(e,t)=>o=>(0,_r.default)(o,e,t);var Jn=m({color:"$colors$hover",marginBottom:"$space$2"}),qn=m({marginLeft:"$space$4"}),os=({describes:e})=>Fe.createElement(Fe.Fragment,null,e.map(t=>{if(no(t))return null;let o=Object.values(t.tests),s=Object.values(t.describes);return Fe.createElement("div",{key:t.name,className:l(qn)},Fe.createElement("div",{className:l(Jn)},t.name),Fe.createElement(oo,{tests:o}),Fe.createElement(os,{describes:s}))}));var Xr=f(require("react"));var Kn=m({color:"$colors$hover",fontSize:"$font$size",padding:"$space$2",whiteSpace:"pre-wrap"}),ss=({error:e,path:t})=>Xr.createElement("div",{className:l(Kn),dangerouslySetInnerHTML:{__html:Qn(e,t)}}),ao=e=>e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#039;"),Qn=(e,t)=>{let o="";if(e.matcherResult?o=`<span>${ao(e.message).replace(/(expected)/m,`<span class="${ve}">$1</span>`).replace(/(received)/m,`<span class="${J}">$1</span>`).replace(/(Difference:)/m,"<span>$1</span>").replace(/(Expected:)(.*)/m,`<span>$1</span><span class="${ve}">$2</span>`).replace(/(Received:)(.*)/m,`<span>$1</span><span class="${J}">$2</span>`).replace(/^(-.*)/gm,`<span class="${J}">$1</span>`).replace(/^(\+.*)/gm,`<span class="${ve}">$1</span>`)}</span>`:o=ao(e.message),e.mappedErrors&&e.mappedErrors[0]&&e.mappedErrors[0].fileName.endsWith(t)&&e.mappedErrors[0]._originalScriptCode){let r=e.mappedErrors[0]._originalScriptCode||[],n=Math.max(...r.map(c=>(c.lineNumber+"").length))+2,a=Array.from({length:n}).map(()=>" ");o+="<br />",o+="<br />",o+="<div>",r.filter(c=>c.content.trim()).forEach(c=>{let p=(c.lineNumber+"").length,d=[...a];d.length-=p,c.highlight&&(d.length-=2);let h=c.content.indexOf(".to"),y=Array.from({length:a.length+h-(n-1)},()=>" "),S=ao(c.content).replace(/(describe|test|it)(\()(&#039;|&quot;|`)(.*)(&#039;|&quot;|`)/m,`<span>$1$2$3</span><span class="${Dr}">$4</span><span>$5</span>`).replace(/(expect\()(.*)(\)\..*)(to[\w\d]*)(\()(.*)(\))/m,`<span>$1</span><span class="${J}">$2</span><span>$3</span><span style="text-decoration: underline; font-weight: 900">$4</span><span>$5</span><span class="${ve}">$6</span><span>$7</span>`);o+=`<div ${c.highlight?'style="font-weight:200;"':""}>`+(c.highlight?`<span class="${J}">></span> `:"")+d.join("")+ao(""+c.lineNumber)+" | "+S+"</div>"+(c.highlight?"<div>"+a.join("")+" | "+y.join("")+`<span class="${J}">^</span></div>`:"")}),o+="</div>"}return o.replace(/(?:\r\n|\r|\n)/g,"<br />")};var ea=m({display:"flex",flexDirection:"row",alignItems:"center",marginBottom:"$space$2"}),rs=m({marginBottom:"$space$2"}),ta=m({fontWeight:"bold"}),io=m({borderRadius:"calc($border$radius / 2)"}),oa=m({padding:"$space$1 $space$2",fontFamily:"$font$mono",textTransform:"uppercase",marginRight:"$space$2"}),sa=m({fontFamily:"$font$mono",cursor:"pointer",display:"inline-block"}),ra=m({color:"$colors$clickable",textDecorationStyle:"dotted",textDecorationLine:"underline"}),na=m({color:"$colors$hover",fontWeight:"bold",textDecorationStyle:"dotted",textDecorationLine:"underline"}),Wr=({specs:e,openSpec:t,status:o,verbose:s})=>I.createElement(I.Fragment,null,e.map(r=>{if(r.error)return I.createElement("div",{key:r.name,className:l(rs)},I.createElement(co,{className:l(io,es)},"Error"),I.createElement(Gr,{onClick:()=>t(r.name),path:r.name}),I.createElement(ss,{error:r.error,path:r.name}));if(no(r))return null;let n=Object.values(r.tests),a=Object.values(r.describes),c=ro(r);return I.createElement("div",{key:r.name,className:l(rs)},I.createElement("div",{className:l(ea)},o==="complete"?c.fail>0?I.createElement(co,{className:l(io,es)},"Fail"):I.createElement(co,{className:l(io,Br)},"Pass"):I.createElement(co,{className:l(io,Hr)},"Run"),I.createElement(Gr,{onClick:()=>t(r.name),path:r.name})),s&&I.createElement(oo,{tests:n}),s&&I.createElement(os,{describes:a}),jr(r).map(p=>I.createElement("div",{key:`failing-${p.name}`,className:l(rs)},I.createElement("div",{className:l(ta,J)},"\u25CF ",p.blocks.join(" \u203A ")," \u203A ",p.name),p.errors.map(d=>I.createElement(ss,{key:`failing-${p.name}-error`,error:d,path:p.path})))))})),co=({children:e,className:t})=>I.createElement("span",{className:l(oa,t)},e),Gr=({onClick:e,path:t})=>{let o=t.split("/"),s=o.slice(0,o.length-1).join("/")+"/",r=o[o.length-1];return I.createElement("button",{className:l(F,sa),onClick:e},I.createElement("span",{className:l(ra)},s),I.createElement("span",{className:l(na)},r))};var oe=f(require("react"));var Zr=m({marginBottom:"$space$2"}),ns=m({fontWeight:"bold",color:"$colors$hover",whiteSpace:"pre-wrap"}),aa=m({fontWeight:"bold",color:"$colors$clickable"}),Yr=({suites:e,tests:t,duration:o})=>{let s="Test suites: ",r=n=>{let a=s.length-n.length,c=Array.from({length:a},()=>" ").join("");return n+c};return oe.createElement("div",{className:l(aa)},oe.createElement("div",{className:l(Zr)},oe.createElement("span",{className:l(ns)},s),e.fail>0&&oe.createElement("span",{className:l(J)},e.fail," failed,"," "),e.pass>0&&oe.createElement("span",{className:l(ve)},e.pass," passed,"," "),oe.createElement("span",null,e.total," total")),oe.createElement("div",{className:l(Zr)},oe.createElement("span",{className:l(ns)},r("Tests:")),t.fail>0&&oe.createElement("span",{className:l(J)},t.fail," failed,"," "),t.skip>0&&oe.createElement("span",{className:l(to)},t.skip," skipped,"," "),t.pass>0&&oe.createElement("span",{className:l(ve)},t.pass," passed,"," "),oe.createElement("span",null,t.total," total")),oe.createElement("div",{className:l(ns)},r("Time:"),o/1e3,"s"))};var ia=m({display:"flex",position:"absolute",bottom:"$space$2",right:"$space$2",zIndex:"$overlay","> *":{marginLeft:"$space$2"}}),ca={specs:{},status:"initialising",verbose:!1,watchMode:!0,suiteOnly:!1,specsCount:0},lo=c=>{var p=c,{verbose:e=!1,watchMode:t=!0,style:o,className:s,onComplete:r,actionsChildren:n}=p,a=N(p,["verbose","watchMode","style","className","onComplete","actionsChildren"]);let d=Oe(),{getClient:h,iframe:y,listen:S,sandpack:v}=vt(),[g,k]=H.useState(M(u({},ca),{verbose:e,watchMode:t}));H.useEffect(()=>{let C=[],O="";return S(x=>{if(!(g.suiteOnly&&("path"in x&&x.path!==v.activeFile||"test"in x&&"path"in x.test&&x.test.path!==v.activeFile))){if(x.type==="action"&&x.action==="clear-errors"&&x.source==="jest"){O=x.path;return}if(x.type==="test"){if(x.event==="initialize_tests")return C=[],O="",g.watchMode?$():k(R=>M(u({},R),{status:"idle",specs:{}}));if(x.event==="test_count")return k(R=>M(u({},R),{specsCount:x.count}));if(x.event==="total_test_start")return C=[],k(R=>M(u({},R),{status:"running"}));if(x.event==="total_test_end")return k(R=>(r!==void 0&&r(R.specs),M(u({},R),{status:"complete"})));if(x.event==="add_file")return k(ke(["specs",x.path],{describes:{},tests:{},name:x.path}));if(x.event==="remove_file")return k(R=>{let z=Object.entries(R.specs).reduce((D,[V,le])=>V===x.path?D:M(u({},D),{[V]:le}),{});return M(u({},R),{specs:z})});if(x.event==="file_error")return k(ke(["specs",x.path,"error"],x.error));if(x.event==="describe_start"){C.push(x.blockName);let[R,z]=xt(C),D=O;return z===void 0?void 0:k(ke(["specs",D,"describes",...Qe(R,V=>[V,"describes"]),z],{name:x.blockName,tests:{},describes:{}}))}if(x.event==="describe_end"){C.pop();return}if(x.event==="add_test"){let[R,z]=xt(C),D={status:"idle",errors:[],name:x.testName,blocks:[...C],path:x.path};return k(z===void 0?ke(["specs",x.path,"tests",x.testName],D):ke(["specs",x.path,"describes",...Qe(R,V=>[V,"describes"]),z,"tests",x.testName],D))}if(x.event==="test_start"){let{test:R}=x,[z,D]=xt(R.blocks),V={status:"running",name:R.name,blocks:R.blocks,path:R.path,errors:[]};return k(D===void 0?ke(["specs",R.path,"tests",R.name],V):ke(["specs",R.path,"describes",...Qe(z,le=>[le,"describes"]),D,"tests",R.name],V))}if(x.event==="test_end"){let{test:R}=x,[z,D]=xt(R.blocks),V={status:R.status,errors:R.errors,duration:R.duration,name:R.name,blocks:R.blocks,path:R.path};return k(D===void 0?ke(["specs",R.path,"tests",R.name],V):ke(["specs",R.path,"describes",...Qe(z,le=>[le,"describes"]),D,"tests",R.name],V))}}}})},[g.suiteOnly,g.watchMode,v.activeFile]);let $=()=>{k(O=>M(u({},O),{status:"running",specs:{}}));let C=h();C&&C.dispatch({type:"run-all-tests"})},w=()=>{k(O=>M(u({},O),{status:"running",specs:{}}));let C=h();C&&C.dispatch({type:"run-tests",path:v.activeFile})},X=/.*\.(test|spec)\.[tj]sx?$/,A=v.activeFile.match(X)!==null;H.useEffect(function(){return S(({type:be})=>{be==="done"&&g.watchMode&&(A?w():$())})},[w,$,g.watchMode,A]);let ae=C=>{v.setActiveFile(C)},W=Object.values(g.specs),Q=Vr(W),G=Ur(W),q=zr(W);return H.createElement(ne,u({className:l(`${b}-tests`,s),style:u(u({},Or(d.themeMode==="dark")),o)},a),H.createElement("iframe",{ref:y,style:{display:"none"},title:"Sandpack Tests"}),H.createElement(Ar,{setSuiteOnly:()=>k(C=>M(u({},C),{suiteOnly:!C.suiteOnly})),setVerbose:()=>k(C=>M(u({},C),{verbose:!C.verbose})),setWatchMode:()=>{k(C=>M(u({},C),{watchMode:!C.watchMode}))},showSuitesOnly:g.specsCount>1,status:g.status,suiteOnly:g.suiteOnly,verbose:g.verbose,watchMode:g.watchMode}),g.status==="running"||g.status==="initialising"?H.createElement(Kt,{showOpenInCodeSandbox:!1}):H.createElement("div",{className:ia.toString()},n,H.createElement(Ir,{onClick:g.suiteOnly?w:$})),H.createElement("div",{className:l(la)},W.length===0&&g.status==="complete"?H.createElement("div",{className:l(pa)},H.createElement("p",null,"No test files found."),H.createElement("p",null,"Test match:"," ",H.createElement("span",{className:l(J)},X.toString()))):H.createElement(H.Fragment,null,H.createElement(Wr,{openSpec:ae,specs:W,status:g.status,verbose:g.verbose}),g.status==="complete"&&G.total>0&&H.createElement(Yr,{duration:Q,suites:q,tests:G}))))},la=m({padding:"$space$4",height:"100%",overflow:"auto",display:"flex",flexDirection:"column",position:"relative",fontFamily:"$font$mono"}),pa=m({fontWeight:"bold",color:"$colors$base"});var se=f(require("react"));var Jr=f(require("@code-hike/classer")),as=f(require("react"));var qr=({onClick:e})=>{let t=(0,Jr.useClasser)("sp");return as.default.createElement("button",{className:l(t("button","icon-standalone"),F,me,te,m({position:"absolute",bottom:"$space$2",right:"$space$2"})),onClick:e},as.default.createElement(So,null))};var po=f(require("react"));var Kr=()=>po.default.createElement("div",{className:l(m({borderBottom:"1px solid $colors$surface2",padding:"$space$3 $space$2",height:"$layout$headerHeight"}))},po.default.createElement("p",{className:l(m({lineHeight:1,margin:0,color:"$colors$base",fontSize:"$font$size",display:"flex",alignItems:"center",gap:"$space$2"}))},po.default.createElement(Pe,null),"Console"));var uo=f(require("react"));var Qr=["SyntaxError: ","Error in sandbox:"],en={id:"random",method:"clear",data:["Console was cleared"]},is="@t",cs="@r",ls=1e4,ps=2,mo=400,ds=mo*2;var fo=e=>{var a,c;let[t,o]=uo.useState([]),{listen:s}=T(),r=(a=e==null?void 0:e.showSyntaxError)!=null?a:!1,n=(c=e==null?void 0:e.maxMessageCount)!=null?c:ds;return uo.useEffect(()=>s(d=>{if(d.type==="console"&&d.codesandbox){if(d.log.find(({method:y})=>y==="clear"))return o([en]);let h=r?d.log:d.log.filter(y=>y.data.filter(v=>typeof v!="string"?!0:Qr.filter(k=>v.startsWith(k)).length===0).length>0);if(!h)return;o(y=>{let S=[...y,...h].filter((v,g,k)=>g===k.findIndex($=>$.id===v.id));for(;S.length>ds;)S.shift();return S})}},e==null?void 0:e.clientId),[s,n,e,r]),{logs:t,reset:()=>o([])}};var ms=function(){return(0,eval)("this")}(),da=typeof ArrayBuffer=="function",ma=typeof Map=="function",ua=typeof Set=="function",Rt;(function(s){s[s.infinity=0]="infinity",s[s.minusInfinity=1]="minusInfinity",s[s.minusZero=2]="minusZero"})(Rt||(Rt={}));var tn={Arithmetic:e=>e===0?1/0:e===1?-1/0:e===2?-0:e,HTMLElement:e=>{let t=document.implementation.createHTMLDocument("sandbox");try{let o=t.createElement(e.tagName);o.innerHTML=e.innerHTML;for(let s of Object.keys(e.attributes))try{o.setAttribute(s,e.attributes[s])}catch(r){}return o}catch(o){return e}},Function:e=>{let t=()=>{};return Object.defineProperty(t,"toString",{value:()=>`function ${e.name}() {${e.body}}`}),t},"[[NaN]]":()=>NaN,"[[undefined]]":()=>{},"[[Date]]":e=>{let t=new Date;return t.setTime(e),t},"[[RegExp]]":e=>new RegExp(e.src,e.flags),"[[Error]]":e=>{let t=ms[e.name]||Error,o=new t(e.message);return o.stack=e.stack,o},"[[ArrayBuffer]]":e=>{if(da){let t=new ArrayBuffer(e.length);return new Int8Array(t).set(e),t}return e},"[[TypedArray]]":e=>typeof ms[e.ctorName]=="function"?new ms[e.ctorName](e.arr):e.arr,"[[Map]]":e=>{if(ma){let o=new Map;for(let s=0;s<e.length;s+=2)o.set(e[s],e[s+1]);return o}let t=[];for(let o=0;o<e.length;o+=2)t.push([e[i],e[i+1]]);return t},"[[Set]]":e=>{if(ua){let t=new Set;for(let o=0;o<e.length;o++)t.add(e[o]);return t}return e}};var on=e=>{if(typeof e=="string"||typeof e=="number"||e===null)return e;if(Array.isArray(e))return e.map(on);if(typeof e=="object"&&is in e){let t=e[is];return tn[t](e.data)}return e},fa=(e,t,o)=>`[${e.reduce((r,n,a)=>`${r}${a?", ":""}${Et(n,t,o)}`,"")}]`,ha=(e,t,o)=>{let s=e.constructor.name!=="Object"?`${e.constructor.name} `:"";if(o>ps)return s;let r=Object.entries(e),n=Object.entries(e).reduce((a,[c,p],d)=>{let h=d===0?"":", ",y=r.length>10?`
+   `:"",S=Et(p,t,o);return d===mo?a+y+"...":d>mo?a:a+`${h}${y}${c}: `+S},"");return`${s}{ ${n}${r.length>10?`
+diff --git a/node_modules/@codesandbox/sandpack-react/dist/esm/index.js b/node_modules/@codesandbox/sandpack-react/dist/esm/index.js
+index 985904c..eb4bfe9 100644
+--- a/node_modules/@codesandbox/sandpack-react/dist/esm/index.js
++++ b/node_modules/@codesandbox/sandpack-react/dist/esm/index.js
+@@ -395,7 +395,7 @@ createApp(App).mount('#app')
+     <!-- built files will be auto injected -->
+   </body>
+ </html>
+-`},"/package.json":{code:JSON.stringify({dependencies:{"core-js":"^3.6.5",vue:"^3.0.0-0","@vue/cli-plugin-babel":"4.5.0"},main:"/src/main.js"})}},main:"/src/App.vue",environment:"vue-cli"};var Ie={react:Dt,"react-ts":Ht,vue:Vt,vanilla:Ut,"vanilla-ts":zt,vue3:Xt,angular:Ot,svelte:_t,solid:Bt,"test-ts":jt};var De=e=>{var a,p,d,u,f,b;let t=Oe(e.files),o=Sr({template:e.template,customSetup:e.customSetup,files:t}),s=Oe((p=(a=e.options)==null?void 0:a.visibleFiles)!=null?p:[]),r=((d=e.options)==null?void 0:d.activeFile)?Yo((u=e.options)==null?void 0:u.activeFile,t||{}):void 0;s.length===0&&t&&Object.keys(t).forEach(g=>{let y=t[g];if(typeof y=="string"){s.push(g);return}!r&&y.active&&(r=g,y.hidden===!0&&s.push(g)),y.hidden||s.push(g)}),s.length===0&&(s=[o.main]),o.files[o.entry]||(o.entry=Yo(o.entry,o.files)),!r&&o.main&&(r=o.main),(!r||!o.files[r])&&(r=s[0]),s.includes(r)||s.push(r);let n=yr(o.files,(f=o.dependencies)!=null?f:{},(b=o.devDependencies)!=null?b:{},o.entry);return{visibleFiles:s.filter(g=>n[g]),activeFile:r,files:n,environment:o.environment}},Yo=(e,t)=>{let o=Oe(t),s=Oe(e);if(s in o)return s;if(!e)return null;let r=null,n=0,c=[".js",".jsx",".ts",".tsx"];for(;!r&&n<c.length;){let p=`${s.split(".")[0]}${c[n]}`;o[p]!==void 0&&(r=p),n++}return r},Sr=({files:e,template:t,customSetup:o})=>{if(!t){if(!o)return Ie.vanilla;if(!e||Object.keys(e).length===0)throw new Error("[sandpack-react]: without a template, you must pass at least one file");return{...o,files:st(e)}}let s=Ie[t];if(!s)throw new Error(`[sandpack-react]: invalid template "${t}" provided`);return!o&&!e?s:{files:st({...s.files,...e}),dependencies:{...s.dependencies,...o==null?void 0:o.dependencies},devDependencies:{...s.devDependencies,...o==null?void 0:o.devDependencies},entry:Oe((o==null?void 0:o.entry)||s.entry),main:s.main,environment:(o==null?void 0:o.environment)||s.environment}},st=e=>e?Object.keys(e).reduce((t,o)=>(typeof e[o]=="string"?t[o]={code:e[o]}:t[o]=e[o],t),{}):{};var nt=Er(null),Rr=3e4,Jo=class extends Tr{constructor(t){super(t);this.timeoutHook=null;this.initializeSandpackIframeHook=null;this.handleMessage=t=>{this.timeoutHook&&clearTimeout(this.timeoutHook),t.type==="state"?this.setState({bundlerState:t.state}):t.type==="done"&&!t.compilatonError?this.setState({error:null}):t.type==="action"&&t.action==="show-error"?this.setState({error:Cr(t)}):t.type==="action"&&t.action==="notification"&&t.notificationType==="error"&&this.setState({error:{message:t.title}})};this.registerReactDevTools=t=>{this.setState({reactDevTools:t})};this.updateCurrentFile=t=>{this.updateFile(this.state.activeFile,t)};this.updateFile=(t,o)=>{var r;let s=this.state.files;if(typeof t=="string"&&o){if(o===((r=this.state.files[t])==null?void 0:r.code))return;s={...s,[t]:{code:o}}}else typeof t=="object"&&(s={...s,...st(t)});this.setState({files:xr(s)},this.updateClients)};this.updateClients=()=>{var n,c,a,p;let{files:t,sandpackStatus:o}=this.state,s=(c=(n=this.props.options)==null?void 0:n.recompileMode)!=null?c:"delayed",r=(p=(a=this.props.options)==null?void 0:a.recompileDelay)!=null?p:500;o==="running"&&(s==="immediate"&&Object.values(this.clients).forEach(d=>{d.updatePreview({files:t})}),s==="delayed"&&(window.clearTimeout(this.debounceHook),this.debounceHook=window.setTimeout(()=>{Object.values(this.clients).forEach(d=>{d.updatePreview({files:this.state.files})})},r)))};this.createClient=(t,o)=>{var n,c,a,p,d,u,f,b,g;let s=new kr(t,{files:this.state.files,template:this.state.environment},{externalResources:(n=this.props.options)==null?void 0:n.externalResources,bundlerURL:(c=this.props.options)==null?void 0:c.bundlerURL,startRoute:(a=this.props.options)==null?void 0:a.startRoute,fileResolver:(p=this.props.options)==null?void 0:p.fileResolver,skipEval:(u=(d=this.props.options)==null?void 0:d.skipEval)!=null?u:!1,logLevel:(f=this.props.options)==null?void 0:f.logLevel,showOpenInCodeSandbox:!this.openInCSBRegistered.current,showErrorScreen:!this.errorScreenRegistered.current,showLoadingScreen:!this.loadingScreenRegistered.current,reactDevTools:this.state.reactDevTools,customNpmRegistries:(g=(b=this.props.customSetup)==null?void 0:b.npmRegistries)==null?void 0:g.map(y=>({...y,proxyEnabled:!1}))});return typeof this.unsubscribe!="function"&&(this.unsubscribe=s.listen(this.handleMessage),this.timeoutHook=setTimeout(()=>{this.setState({sandpackStatus:"timeout"})},Rr)),this.unsubscribeClientListeners[o]=this.unsubscribeClientListeners[o]||{},this.queuedListeners[o]&&(Object.keys(this.queuedListeners[o]).forEach(y=>{let R=this.queuedListeners[o][y],N=s.listen(R);this.unsubscribeClientListeners[o][y]=N}),this.queuedListeners[o]={}),Object.entries(this.queuedListeners.global).forEach(([y,R])=>{let N=s.listen(R);this.unsubscribeClientListeners[o][y]=N}),s};this.runSandpack=()=>{Object.keys(this.preregisteredIframes).forEach(t=>{let o=this.preregisteredIframes[t];this.clients[t]=this.createClient(o,t)}),this.setState({sandpackStatus:"running"})};this.registerBundler=(t,o)=>{this.state.sandpackStatus==="running"?this.clients[o]=this.createClient(t,o):this.preregisteredIframes[o]=t};this.unregisterBundler=t=>{var r;let o=this.clients[t];o?(o.cleanup(),(r=o.iframe.contentWindow)==null||r.location.replace("about:blank"),delete this.clients[t]):delete this.preregisteredIframes[t],this.timeoutHook&&clearTimeout(this.timeoutHook),Object.values(this.unsubscribeClientListeners).forEach(n=>{Object.values(n).forEach(a=>a())}),this.setState({sandpackStatus:"idle"})};this.unregisterAllClients=()=>{Object.keys(this.clients).map(this.unregisterBundler),typeof this.unsubscribe=="function"&&(this.unsubscribe(),this.unsubscribe=void 0)};this.setActiveFile=t=>{this.setState({activeFile:t})};this.openFile=t=>{this.setState(({visibleFiles:o})=>{let s=o.includes(t)?o:[...o,t];return{activeFile:t,visibleFiles:s}})};this.closeFile=t=>{this.state.visibleFiles.length!==1&&this.setState(({visibleFiles:o,activeFile:s})=>{let r=o.indexOf(t),n=o.filter(c=>c!==t);return{activeFile:t===s?r===0?o[1]:o[r-1]:s,visibleFiles:n}})};this.deleteFile=t=>{this.setState(({visibleFiles:o,files:s})=>{let r={...s};return delete r[t],{visibleFiles:o.filter(n=>n!==t),files:r}},this.updateClients)};this.addFile=this.updateFile;this.dispatchMessage=(t,o)=>{if(this.state.sandpackStatus!=="running"){console.warn("[sandpack-react]: dispatch cannot be called while in idle mode");return}o?this.clients[o].dispatch(t):Object.values(this.clients).forEach(s=>{s.dispatch(t)})};this.addListener=(t,o)=>{if(o){if(this.clients[o])return this.clients[o].listen(t);{let s=Ae();return this.queuedListeners[o]=this.queuedListeners[o]||{},this.unsubscribeClientListeners[o]=this.unsubscribeClientListeners[o]||{},this.queuedListeners[o][s]=t,()=>{this.queuedListeners[o][s]?delete this.queuedListeners[o][s]:this.unsubscribeClientListeners[o][s]&&(this.unsubscribeClientListeners[o][s](),delete this.unsubscribeClientListeners[o][s])}}}else{let s=Ae();this.queuedListeners.global[s]=t;let n=Object.values(this.clients).map(a=>a.listen(t));return()=>{n.forEach(a=>a())}}};this.resetFile=t=>{let{files:o}=De({template:this.props.template,files:this.props.files,customSetup:this.props.customSetup,options:this.props.options});this.setState(s=>({files:{...s.files,[t]:o[t]}}),this.updateClients)};this.resetAllFiles=()=>{let{files:t}=De({template:this.props.template,files:this.props.files,customSetup:this.props.customSetup,options:this.props.options});this.setState({files:t},this.updateClients)};this._getSandpackState=()=>{let{files:t,activeFile:o,visibleFiles:s,visibleFilesFromProps:r,startRoute:n,bundlerState:c,editorState:a,error:p,sandpackStatus:d,environment:u,initMode:f}=this.state;return{files:t,environment:u,visibleFiles:s,visibleFilesFromProps:r,activeFile:o,startRoute:n,error:p,bundlerState:c,status:d,editorState:a,initMode:f,clients:this.clients,dispatch:this.dispatchMessage,errorScreenRegisteredRef:this.errorScreenRegistered,lazyAnchorRef:this.lazyAnchorRef,listen:this.addListener,loadingScreenRegisteredRef:this.loadingScreenRegistered,openInCSBRegisteredRef:this.openInCSBRegistered,registerBundler:this.registerBundler,runSandpack:this.runSandpack,unregisterBundler:this.unregisterBundler,registerReactDevTools:this.registerReactDevTools,openFile:this.openFile,resetFile:this.resetFile,resetAllFiles:this.resetAllFiles,setActiveFile:this.setActiveFile,updateCurrentFile:this.updateCurrentFile,updateFile:this.updateFile,addFile:this.addFile,closeFile:this.closeFile,deleteFile:this.deleteFile}};var c,a,p,d;let{activeFile:o,visibleFiles:s,files:r,environment:n}=De({template:t.template,files:t.files,customSetup:t.customSetup,options:t.options});this.state={files:r,environment:n,visibleFiles:s,visibleFilesFromProps:s,activeFile:o,startRoute:(c=this.props.options)==null?void 0:c.startRoute,bundlerState:void 0,error:null,sandpackStatus:((p=(a=this.props.options)==null?void 0:a.autorun)!=null?p:!0)?"initial":"idle",editorState:"pristine",initMode:((d=this.props.options)==null?void 0:d.initMode)||"lazy",reactDevTools:void 0},this.queuedListeners={global:{}},this.unsubscribeClientListeners={},this.preregisteredIframes={},this.clients={},this.lazyAnchorRef=at(),this.errorScreenRegistered=at(),this.openInCSBRegistered=at(),this.loadingScreenRegistered=at()}initializeSandpackIframe(){var s,r,n,c,a;if(!((r=(s=this.props.options)==null?void 0:s.autorun)!=null?r:!0))return;let o=(c=(n=this.props.options)==null?void 0:n.initModeObserverOptions)!=null?c:{rootMargin:"1000px 0px"};this.intersectionObserver&&this.lazyAnchorRef.current&&((a=this.intersectionObserver)==null||a.unobserve(this.lazyAnchorRef.current)),this.lazyAnchorRef.current&&this.state.initMode==="lazy"?(this.intersectionObserver=new IntersectionObserver(p=>{var d;p.some(u=>u.isIntersecting)&&(this.initializeSandpackIframeHook=setTimeout(()=>{this.runSandpack()},50),this.lazyAnchorRef.current&&((d=this.intersectionObserver)==null||d.unobserve(this.lazyAnchorRef.current)))},o),this.intersectionObserver.observe(this.lazyAnchorRef.current)):this.lazyAnchorRef.current&&this.state.initMode==="user-visible"?(this.intersectionObserver=new IntersectionObserver(p=>{p.some(d=>d.isIntersecting)?this.initializeSandpackIframeHook=setTimeout(()=>{this.runSandpack()},50):(this.initializeSandpackIframeHook&&clearTimeout(this.initializeSandpackIframeHook),Object.keys(this.clients).map(this.unregisterBundler),this.unregisterAllClients())},o),this.intersectionObserver.observe(this.lazyAnchorRef.current)):this.initializeSandpackIframeHook=setTimeout(()=>this.runSandpack(),50)}componentDidMount(){this.initializeSandpackIframe()}componentDidUpdate(t){var a,p,d,u;((a=t.options)==null?void 0:a.initMode)!==((p=this.props.options)==null?void 0:p.initMode)&&((d=this.props.options)==null?void 0:d.initMode)&&this.setState({initMode:(u=this.props.options)==null?void 0:u.initMode},this.initializeSandpackIframe);let{activeFile:o,visibleFiles:s,files:r,environment:n}=De({template:this.props.template,files:this.props.files,customSetup:this.props.customSetup,options:this.props.options});if(t.template!==this.props.template||!rt(t.options,this.props.options)||!rt(t.customSetup,this.props.customSetup)||!rt(t.files,this.props.files)){if(this.setState({activeFile:o,visibleFiles:s,visibleFilesFromProps:s,files:r,environment:n}),this.state.sandpackStatus!=="running")return;Object.values(this.clients).forEach(f=>f.updatePreview({files:r,template:n}))}let c=rt(r,this.state.files)?"pristine":"dirty";c!==this.state.editorState&&this.setState({editorState:c})}componentWillUnmount(){typeof this.unsubscribe=="function"&&this.unsubscribe(),this.timeoutHook&&clearTimeout(this.timeoutHook),this.debounceHook&&clearTimeout(this.debounceHook),this.initializeSandpackIframeHook&&clearTimeout(this.initializeSandpackIframeHook),this.intersectionObserver&&this.intersectionObserver.disconnect()}render(){var n;let{children:t,theme:o,className:s,style:r}=this.props;return Wt(nt.Provider,{value:this._getSandpackState()},Wt(vr,{classes:(n=this.props.options)==null?void 0:n.classes},Wt(Go,{className:s,style:r,theme:o},t)))}},qo=Jo,dc=nt.Consumer;function x(){let e=Nr(nt);if(e===null)throw new Error('[sandpack-react]: "useSandpack" must be wrapped by a "SandpackProvider"');let{dispatch:t,listen:o,...s}=e;return{sandpack:{...s},dispatch:t,listen:o}}var it=()=>{var t,o,s;let{sandpack:e}=x();return{code:(t=e.files[e.activeFile])==null?void 0:t.code,readOnly:(s=(o=e.files[e.activeFile])==null?void 0:o.readOnly)!=null?s:!1,updateCode:e.updateCurrentFile}};import{useClasser as Mr}from"@code-hike/classer";import{createElement as Be}from"react";var ee=m({svg:{margin:"auto"}}),T=m({appearance:"none",border:"0",outline:"none",display:"flex",alignItems:"center",fontSize:"inherit",fontFamily:"inherit",backgroundColor:"transparent",transition:"color $default, background $default",cursor:"pointer",color:"$colors$clickable","&:disabled":{color:"$colors$disabled"},"&:hover:not(:disabled,[data-active='true'])":{color:"$colors$hover"},'&[data-active="true"]':{color:"$colors$accent"},svg:{minWidth:"$space$4",width:"$space$4",height:"$space$4"},[`&.${ee}`]:{padding:"$space$1",width:"$space$7",height:"$space$7",display:"flex"}}),z=m({backgroundColor:"$colors$surface2",borderRadius:"99999px",'&[data-active="true"]':{color:"$colors$surface1",background:"$colors$accent"},"&:hover:not(:disabled,[data-active='true'])":{backgroundColor:"$colors$surface3"}}),Ko=m({padding:0}),$r=tt({"0%":{opacity:0,transform:"translateY(4px)"},"100%":{opacity:1,transform:"translateY(0)"}}),He=m({position:"absolute",bottom:"0",left:"0",right:"0",top:"0",margin:"0",overflow:"auto",height:"100%",zIndex:"$top"}),ct=m({padding:"$space$4",whiteSpace:"pre-wrap",fontFamily:"$font$mono",backgroundColor:"$colors$errorSurface"}),ke=m({animation:`${$r} 150ms ease`,color:"$colors$error"});var Lr=m({borderBottom:"1px solid $colors$surface2",background:"$colors$surface1"}),wr=m({padding:"0 $space$2",overflow:"auto",display:"flex",flexWrap:"nowrap",alignItems:"stretch",minHeight:"40px",marginBottom:"-1px"}),Qo=m({padding:"0 $space$1 0 $space$1",borderRadius:"$border$radius",marginLeft:"$space$1",width:"$space$5",visibility:"hidden",svg:{width:"$space$3",height:"$space$3",display:"block",position:"relative",top:1}}),Fr=m({padding:"0 $space$2",height:"$layout$headerHeight",whiteSpace:"nowrap","&:focus":{outline:"none"},[`&:hover > .${Qo}`]:{visibility:"unset"}}),lt=({closableTabs:e,className:t,...o})=>{let{sandpack:s}=x(),r=Mr(h),{activeFile:n,visibleFiles:c,setActiveFile:a}=s,p=u=>{u.stopPropagation();let f=u.target.closest("[data-active]"),b=f==null?void 0:f.getAttribute("title");!b||s.closeFile(b)},d=u=>{let f=ve(u),b=c.reduce((g,y)=>(y===u||ve(y)===f&&g.push(y),g),[]);return b.length===0?f:_o(u,b)};return Be("div",{className:l(r("tabs"),Lr,t),translate:"no",...o},Be("div",{"aria-label":"Select active file",className:l(r("tabs-scrollable-container"),wr),role:"tablist"},c.map(u=>Be("button",{key:u,"aria-selected":u===n,className:l(r("tab-button"),T,Fr),"data-active":u===n,onClick:()=>a(u),role:"tab",title:u,type:"button"},d(u),e&&c.length>1&&Be("span",{className:l(r("close-button"),Qo),onClick:p},Be(Do,null))))))};import{useClasser as Ar}from"@code-hike/classer";import{createElement as es}from"react";var Pr=m({position:"absolute",bottom:"$space$2",right:"$space$2",paddingRight:"$space$3"}),pt=({className:e,onClick:t,...o})=>{let s=Ar(h),{sandpack:r}=x();return es("button",{className:l(s("button"),T,z,Pr,e),onClick:n=>{r.runSandpack(),t==null||t(n)},type:"button",...o},es(Ke,null),"Run")};import{useClasser as Ir}from"@code-hike/classer";import{createElement as Or}from"react";var me=m({display:"flex",flexDirection:"column",width:"100%",position:"relative",backgroundColor:"$colors$surface1",transition:"flex $transitions$default",gap:1,[`&:has(.${h}-stack)`]:{backgroundColor:"$colors$surface2"}}),Y=({className:e,...t})=>{let o=Ir(h);return Or("div",{className:l(o("stack"),me,e),...t})};import{useClasser as Yr}from"@code-hike/classer";import{closeBrackets as Jr,closeBracketsKeymap as qr}from"@codemirror/closebrackets";import{defaultKeymap as Kr,indentLess as Qr,indentMore as en,deleteGroupBackward as tn}from"@codemirror/commands";import{commentKeymap as on}from"@codemirror/comment";import{lineNumbers as sn}from"@codemirror/gutter";import{defaultHighlightStyle as rn}from"@codemirror/highlight";import{history as nn,historyKeymap as an}from"@codemirror/history";import{bracketMatching as cn}from"@codemirror/matchbrackets";import{EditorState as ds,EditorSelection as ln,StateEffect as ms}from"@codemirror/state";import{Annotation as us}from"@codemirror/state";import{highlightSpecialChars as pn,highlightActiveLine as dn,keymap as fs,EditorView as Jt}from"@codemirror/view";import mn from"@react-hook/intersection-observer";import{Fragment as gn,createElement as Ee,forwardRef as un,useEffect as Re,useImperativeHandle as fn,useMemo as hn,useRef as gt,useState as hs}from"react";import{useContext as Dr}from"react";var Ce=()=>{let{theme:e,id:t,mode:o}=Dr(ot);return{theme:e,themeId:t,themeMode:o}};var Gt=(e,t)=>{if(e.length!==t.length)return!1;let o=!0;for(let s=0;s<e.length;s++)if(e[s]!==t[s]){o=!1;break}return o};import{Decoration as mt,ViewPlugin as zr}from"@codemirror/view";import{HighlightStyle as Hr,tags as A}from"@codemirror/highlight";import{css as Br}from"@codemirror/lang-css";import{html as _r}from"@codemirror/lang-html";import{javascript as ts}from"@codemirror/lang-javascript";import{EditorView as jr}from"@codemirror/view";import{useCallback as Ur}from"react";var _e=(e,{line:t,column:o})=>e.line(t).from+(o!=null?o:0)-1,os=()=>jr.theme({"&":{backgroundColor:`var(--${h}-colors-surface1)`,color:`var(--${h}-syntax-color-plain)`,height:"100%"},".cm-matchingBracket, .cm-nonmatchingBracket, &.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket":{color:"inherit",backgroundColor:"rgba(128,128,128,.25)",backgroundBlendMode:"difference"},"&.cm-editor.cm-focused":{outline:"none"},".cm-activeLine":{backgroundColor:`var(--${h}-colors-surface3)`,borderRadius:`var(--${h}-border-radius)`},".cm-errorLine":{backgroundColor:`var(--${h}-colors-errorSurface)`,borderRadius:`var(--${h}-border-radius)`},".cm-content":{caretColor:`var(--${h}-colors-accent)`,padding:`0 var(--${h}-space-4)`},".cm-scroller":{fontFamily:`var(--${h}-font-mono)`,lineHeight:`var(--${h}-font-lineHeight)`},".cm-gutters":{backgroundColor:`var(--${h}-colors-surface1)`,color:`var(--${h}-colors-disabled)`,border:"none",paddingLeft:`var(--${h}-space-1)`},".cm-gutter.cm-lineNumbers":{fontSize:".6em"},".cm-lineNumbers .cm-gutterElement":{lineHeight:`var(--${h}-font-lineHeight)`,minWidth:`var(--${h}-space-5)`},".cm-content .cm-line":{paddingLeft:`var(--${h}-space-1)`},".cm-content.cm-readonly .cm-line":{paddingLeft:0}}),te=e=>`${h}-syntax-${e}`,ss=()=>["string","plain","comment","keyword","definition","punctuation","property","tag","static"].reduce((t,o)=>({...t,[`.${te(o)}`]:{color:`$syntax$color$${o}`,fontStyle:`$syntax$fontStyle$${o}`}}),{}),rs=e=>Hr.define([{tag:A.link,textDecoration:"underline"},{tag:A.emphasis,fontStyle:"italic"},{tag:A.strong,fontWeight:"bold"},{tag:A.keyword,class:te("keyword")},{tag:[A.atom,A.number,A.bool],class:te("static")},{tag:A.tagName,class:te("tag")},{tag:A.variableName,class:te("plain")},{tag:A.function(A.variableName),class:te("definition")},{tag:A.definition(A.function(A.variableName)),class:te("definition")},{tag:A.propertyName,class:te("property")},{tag:[A.literal,A.inserted],class:te(e.syntax.string?"string":"static")},{tag:A.punctuation,class:te("punctuation")},{tag:[A.comment,A.quote],class:te("comment")}]),ns=(e,t,o)=>{if(!e&&!t)return"javascript";let s=t;if(!s&&e){let r=e.lastIndexOf(".");s=e.slice(r+1)}for(let r of o)if(s===r.name||r.extensions.includes(s||""))return r.name;switch(s){case"ts":case"tsx":return"typescript";case"html":case"svelte":case"vue":return"html";case"css":case"less":case"scss":return"css";case"js":case"jsx":case"json":default:return"javascript"}},as=(e,t)=>{let o={javascript:ts({jsx:!0,typescript:!1}),typescript:ts({jsx:!0,typescript:!0}),html:_r(),css:Br()};for(let s of t)if(e===s.name)return s.language;return o[e]},dt=(...e)=>Ur(t=>e.forEach(o=>{if(!!o){if(typeof o=="function")return o(t);o.current=t}}),e);function is(e){return zr.fromClass(class{constructor(t){this.decorations=this.getDecoration(t)}update(t){}getDecoration(t){if(!e)return mt.none;let o=e.map(s=>{var a,p,d;let r=mt.line({attributes:{class:(a=s.className)!=null?a:""}}),n=mt.mark({class:(p=s.className)!=null?p:"",attributes:(d=s.elementAttributes)!=null?d:void 0}),c=_e(t.state.doc,{line:s.line,column:s.startColumn})+1;if(s.startColumn&&s.endColumn){let u=_e(t.state.doc,{line:s.line,column:s.endColumn})+1;return n.range(c,u)}return r.range(c)});return mt.set(o)}},{decorations:t=>t.decorations})}import{Decoration as ut,ViewPlugin as Vr}from"@codemirror/view";function cs(){return Wr}var Xr=ut.line({attributes:{class:"cm-errorLine"}}),Wr=Vr.fromClass(class{constructor(){this.decorations=ut.none}update(e){e.transactions.forEach(t=>{let o=t.annotation("show-error");if(o!==void 0){let s=_e(e.view.state.doc,{line:o})+1;this.decorations=ut.set([Xr.range(s)])}else t.annotation("remove-errors")&&(this.decorations=ut.none)})}},{decorations:e=>e.decorations});var ft=m({margin:"0",display:"block",fontFamily:"$font$mono",fontSize:"$font$size",color:"$syntax$color$plain",lineHeight:"$font$lineHeight"}),Zt=m(ss()),ht=m({flex:1,position:"relative",overflow:"auto",background:"$colors$surface1",".cm-scroller":{padding:"$space$4 0"},[`.${ft}`]:{padding:"$space$4 0"}}),Yt=m({margin:"0",outline:"none",height:"100%"}),ls=m({fontFamily:"$font$mono",fontSize:"0.8em",position:"absolute",right:"$space$2",bottom:"$space$2",zIndex:"$top",color:"$colors$clickable",backgroundColor:"$colors$surface2",borderRadius:"99999px",padding:"calc($space$1 / 2) $space$2",[`& + .${T}`]:{right:"calc($space$11 * 2)"}});import{highlightTree as Gr}from"@codemirror/highlight";import{createElement as Zr}from"react";var ps=({langSupport:e,highlightTheme:t,code:o=""})=>{let s=e.language.parser.parse(o),r=0,n=[],c=(a,p)=>{if(a>r){let d=o.slice(r,a);n.push(p?Zr("span",{children:d,className:p,key:`${a}${r}`}):d),r=a}};return Gr(s,t.match,(a,p,d)=>{c(a,""),c(p,d)}),r<o.length&&n.push(`
++`},"/package.json":{code:JSON.stringify({dependencies:{"core-js":"^3.6.5",vue:"^3.0.0-0","@vue/cli-plugin-babel":"4.5.0"},main:"/src/main.js"})}},main:"/src/App.vue",environment:"vue-cli"};var Ie={react:Dt,"react-ts":Ht,vue:Vt,vanilla:Ut,"vanilla-ts":zt,vue3:Xt,angular:Ot,svelte:_t,solid:Bt,"test-ts":jt};var De=e=>{var a,p,d,u,f,b;let t=Oe(e.files),o=Sr({template:e.template,customSetup:e.customSetup,files:t}),s=Oe((p=(a=e.options)==null?void 0:a.visibleFiles)!=null?p:[]),r=((d=e.options)==null?void 0:d.activeFile)?Yo((u=e.options)==null?void 0:u.activeFile,t||{}):void 0;s.length===0&&t&&Object.keys(t).forEach(g=>{let y=t[g];if(typeof y=="string"){s.push(g);return}!r&&y.active&&(r=g,y.hidden===!0&&s.push(g)),y.hidden||s.push(g)}),s.length===0&&(s=[o.main]),o.files[o.entry]||(o.entry=Yo(o.entry,o.files)),!r&&o.main&&(r=o.main),(!r||!o.files[r])&&(r=s[0]),s.includes(r)||s.push(r);let n=yr(o.files,(f=o.dependencies)!=null?f:{},(b=o.devDependencies)!=null?b:{},o.entry);return{visibleFiles:s.filter(g=>n[g]),activeFile:r,files:n,environment:o.environment}},Yo=(e,t)=>{let o=Oe(t),s=Oe(e);if(s in o)return s;if(!e)return null;let r=null,n=0,c=[".js",".jsx",".ts",".tsx"];for(;!r&&n<c.length;){let p=`${s.split(".")[0]}${c[n]}`;o[p]!==void 0&&(r=p),n++}return r},Sr=({files:e,template:t,customSetup:o})=>{if(!t){if(!o)return Ie.vanilla;if(!e||Object.keys(e).length===0)throw new Error("[sandpack-react]: without a template, you must pass at least one file");return{...o,files:st(e)}}let s=Ie[t];if(!s)throw new Error(`[sandpack-react]: invalid template "${t}" provided`);return!o&&!e?s:{files:st({...s.files,...e}),dependencies:{...s.dependencies,...o==null?void 0:o.dependencies},devDependencies:{...s.devDependencies,...o==null?void 0:o.devDependencies},entry:Oe((o==null?void 0:o.entry)||s.entry),main:s.main,environment:(o==null?void 0:o.environment)||s.environment}},st=e=>e?Object.keys(e).reduce((t,o)=>(typeof e[o]=="string"?t[o]={code:e[o]}:t[o]=e[o],t),{}):{};var nt=Er(null),Rr=3e4,Jo=class extends Tr{constructor(t){super(t);this.timeoutHook=null;this.initializeSandpackIframeHook=null;this.handleMessage=t=>{this.timeoutHook&&clearTimeout(this.timeoutHook),t.type==="state"?this.setState({bundlerState:t.state}):t.type==="done"&&!t.compilatonError?this.setState({error:null}):t.type==="action"&&t.action==="show-error"?this.setState({error:Cr(t)}):t.type==="action"&&t.action==="notification"&&t.notificationType==="error"&&this.setState({error:{message:t.title}})};this.registerReactDevTools=t=>{this.setState({reactDevTools:t})};this.updateCurrentFile=t=>{this.updateFile(this.state.activeFile,t)};this.updateFile=(t,o)=>{var r;let s=this.state.files;if(typeof t=="string"&&o){if(o===((r=this.state.files[t])==null?void 0:r.code))return;s={...s,[t]:{code:o}}}else typeof t=="object"&&(s={...s,...st(t)});this.setState({files:xr(s)},this.updateClients)};this.updateClients=()=>{var n,c,a,p;let{files:t,sandpackStatus:o}=this.state,s=(c=(n=this.props.options)==null?void 0:n.recompileMode)!=null?c:"delayed",r=(p=(a=this.props.options)==null?void 0:a.recompileDelay)!=null?p:500;o==="running"&&(s==="immediate"&&Object.values(this.clients).forEach(d=>{d.updatePreview({files:t})}),s==="delayed"&&(window.clearTimeout(this.debounceHook),this.debounceHook=window.setTimeout(()=>{Object.values(this.clients).forEach(d=>{d.updatePreview({files:this.state.files})})},r)))};this.createClient=(t,o)=>{var n,c,a,p,d,u,f,b,g;let s=new kr(t,{files:this.state.files,template:this.state.environment},{externalResources:(n=this.props.options)==null?void 0:n.externalResources,bundlerURL:(c=this.props.options)==null?void 0:c.bundlerURL,startRoute:(a=this.props.options)==null?void 0:a.startRoute,fileResolver:(p=this.props.options)==null?void 0:p.fileResolver,skipEval:(u=(d=this.props.options)==null?void 0:d.skipEval)!=null?u:!1,logLevel:(f=this.props.options)==null?void 0:f.logLevel,showOpenInCodeSandbox:!this.openInCSBRegistered.current,showErrorScreen:!this.errorScreenRegistered.current,showLoadingScreen:!this.loadingScreenRegistered.current,reactDevTools:this.state.reactDevTools,customNpmRegistries:(g=(b=this.props.customSetup)==null?void 0:b.npmRegistries)==null?void 0:g.map(y=>({...y,proxyEnabled:!1}))});return typeof this.unsubscribe!="function"&&(this.unsubscribe=s.listen(this.handleMessage),this.timeoutHook=setTimeout(()=>{this.setState({sandpackStatus:"timeout"})},Rr)),this.unsubscribeClientListeners[o]=this.unsubscribeClientListeners[o]||{},this.queuedListeners[o]&&(Object.keys(this.queuedListeners[o]).forEach(y=>{let R=this.queuedListeners[o][y],N=s.listen(R);this.unsubscribeClientListeners[o][y]=N}),this.queuedListeners[o]={}),Object.entries(this.queuedListeners.global).forEach(([y,R])=>{let N=s.listen(R);this.unsubscribeClientListeners[o][y]=N}),s};this.runSandpack=()=>{Object.keys(this.preregisteredIframes).forEach(t=>{let o=this.preregisteredIframes[t];this.clients[t]=this.createClient(o,t)}),this.setState({sandpackStatus:"running"})};this.registerBundler=(t,o)=>{this.state.sandpackStatus==="running"?this.clients[o]=this.createClient(t,o):this.preregisteredIframes[o]=t};this.unregisterBundler=t=>{var r;let o=this.clients[t];o?(o.cleanup(),(r=o.iframe.contentWindow)==null||r.location.replace("about:blank"),delete this.clients[t]):delete this.preregisteredIframes[t],this.timeoutHook&&clearTimeout(this.timeoutHook),Object.values(this.unsubscribeClientListeners).forEach(n=>{Object.values(n).forEach(a=>a())}),this.setState({sandpackStatus:"idle"})};this.unregisterAllClients=()=>{Object.keys(this.clients).map(this.unregisterBundler),typeof this.unsubscribe=="function"&&(this.unsubscribe(),this.unsubscribe=void 0)};this.setActiveFile=t=>{this.setState({activeFile:t})};this.openFile=t=>{this.setState(({visibleFiles:o})=>{let s=o.includes(t)?o:[...o,t];return{activeFile:t,visibleFiles:s}})};this.closeFile=t=>{this.state.visibleFiles.length!==1&&this.setState(({visibleFiles:o,activeFile:s})=>{let r=o.indexOf(t),n=o.filter(c=>c!==t);return{activeFile:t===s?r===0?o[1]:o[r-1]:s,visibleFiles:n}})};this.deleteFile=t=>{this.setState(({visibleFiles:o,files:s})=>{let r={...s};return delete r[t],{visibleFiles:o.filter(n=>n!==t),files:r}},this.updateClients)};this.addFile=this.updateFile;this.dispatchMessage=(t,o)=>{if(this.state.sandpackStatus!=="running"){console.warn("[sandpack-react]: dispatch cannot be called while in idle mode");return}o?this.clients[o].dispatch(t):Object.values(this.clients).forEach(s=>{s.dispatch(t)})};this.addListener=(t,o)=>{if(o){if(this.clients[o])return this.clients[o].listen(t);{let s=Ae();return this.queuedListeners[o]=this.queuedListeners[o]||{},this.unsubscribeClientListeners[o]=this.unsubscribeClientListeners[o]||{},this.queuedListeners[o][s]=t,()=>{this.queuedListeners[o][s]?delete this.queuedListeners[o][s]:this.unsubscribeClientListeners[o][s]&&(this.unsubscribeClientListeners[o][s](),delete this.unsubscribeClientListeners[o][s])}}}else{let s=Ae();this.queuedListeners.global[s]=t;let n=Object.values(this.clients).map(a=>a.listen(t));return()=>{n.forEach(a=>a())}}};this.resetFile=t=>{let{files:o}=De({template:this.props.template,files:this.props.files,customSetup:this.props.customSetup,options:this.props.options});this.setState(s=>({files:{...s.files,[t]:o[t]}}),this.updateClients)};this.resetAllFiles=()=>{let{files:t}=De({template:this.props.template,files:this.props.files,customSetup:this.props.customSetup,options:this.props.options});this.setState({files:t},this.updateClients)};this._getSandpackState=()=>{let{files:t,activeFile:o,visibleFiles:s,visibleFilesFromProps:r,startRoute:n,bundlerState:c,editorState:a,error:p,sandpackStatus:d,environment:u,initMode:f}=this.state;return{files:t,environment:u,visibleFiles:s,visibleFilesFromProps:r,activeFile:o,startRoute:n,error:p,bundlerState:c,status:d,editorState:a,initMode:f,clients:this.clients,dispatch:this.dispatchMessage,errorScreenRegisteredRef:this.errorScreenRegistered,lazyAnchorRef:this.lazyAnchorRef,listen:this.addListener,loadingScreenRegisteredRef:this.loadingScreenRegistered,openInCSBRegisteredRef:this.openInCSBRegistered,registerBundler:this.registerBundler,runSandpack:this.runSandpack,unregisterBundler:this.unregisterBundler,registerReactDevTools:this.registerReactDevTools,openFile:this.openFile,resetFile:this.resetFile,resetAllFiles:this.resetAllFiles,setActiveFile:this.setActiveFile,updateCurrentFile:this.updateCurrentFile,updateFile:this.updateFile,addFile:this.addFile,closeFile:this.closeFile,deleteFile:this.deleteFile}};var c,a,p,d;let{activeFile:o,visibleFiles:s,files:r,environment:n}=De({template:t.template,files:t.files,customSetup:t.customSetup,options:t.options});this.state={files:r,environment:n,visibleFiles:s,visibleFilesFromProps:s,activeFile:o,startRoute:(c=this.props.options)==null?void 0:c.startRoute,bundlerState:void 0,error:null,sandpackStatus:((p=(a=this.props.options)==null?void 0:a.autorun)!=null?p:!0)?"initial":"idle",editorState:"pristine",initMode:((d=this.props.options)==null?void 0:d.initMode)||"lazy",reactDevTools:void 0},this.queuedListeners={global:{}},this.unsubscribeClientListeners={},this.preregisteredIframes={},this.clients={},this.lazyAnchorRef=at(),this.errorScreenRegistered=at(),this.openInCSBRegistered=at(),this.loadingScreenRegistered=at()}initializeSandpackIframe(){var s,r,n,c,a;if(!((r=(s=this.props.options)==null?void 0:s.autorun)!=null?r:!0))return;let o=(c=(n=this.props.options)==null?void 0:n.initModeObserverOptions)!=null?c:{rootMargin:"1000px 0px"};this.intersectionObserver&&this.lazyAnchorRef.current&&((a=this.intersectionObserver)==null||a.unobserve(this.lazyAnchorRef.current)),this.lazyAnchorRef.current&&this.state.initMode==="lazy"?(this.intersectionObserver=new IntersectionObserver(p=>{var d;p.some(u=>u.isIntersecting)&&(this.initializeSandpackIframeHook=setTimeout(()=>{this.runSandpack()},50),this.lazyAnchorRef.current&&((d=this.intersectionObserver)==null||d.unobserve(this.lazyAnchorRef.current)))},o),this.intersectionObserver.observe(this.lazyAnchorRef.current)):this.lazyAnchorRef.current&&this.state.initMode==="user-visible"?(this.intersectionObserver=new IntersectionObserver(p=>{p.some(d=>d.isIntersecting)?this.initializeSandpackIframeHook=setTimeout(()=>{this.runSandpack()},50):(this.initializeSandpackIframeHook&&clearTimeout(this.initializeSandpackIframeHook),Object.keys(this.clients).map(this.unregisterBundler),this.unregisterAllClients())},o),this.intersectionObserver.observe(this.lazyAnchorRef.current)):this.initializeSandpackIframeHook=setTimeout(()=>this.runSandpack(),50)}componentDidMount(){this.initializeSandpackIframe()}componentDidUpdate(t){var a,p,d,u;((a=t.options)==null?void 0:a.initMode)!==((p=this.props.options)==null?void 0:p.initMode)&&((d=this.props.options)==null?void 0:d.initMode)&&this.setState({initMode:(u=this.props.options)==null?void 0:u.initMode},this.initializeSandpackIframe);let{activeFile:o,visibleFiles:s,files:r,environment:n}=De({template:this.props.template,files:this.props.files,customSetup:this.props.customSetup,options:this.props.options});if(t.template!==this.props.template||!rt(t.options,this.props.options)||!rt(t.customSetup,this.props.customSetup)||!rt(t.files,this.props.files)){if(this.setState({activeFile:o,visibleFiles:s,visibleFilesFromProps:s,files:r,environment:n}),this.state.sandpackStatus!=="running")return;Object.values(this.clients).forEach(f=>f.updatePreview({files:r,template:n}))}let c=rt(r,this.state.files)?"pristine":"dirty";c!==this.state.editorState&&this.setState({editorState:c})}componentWillUnmount(){typeof this.unsubscribe=="function"&&this.unsubscribe(),this.timeoutHook&&clearTimeout(this.timeoutHook),this.debounceHook&&clearTimeout(this.debounceHook),this.initializeSandpackIframeHook&&clearTimeout(this.initializeSandpackIframeHook),this.intersectionObserver&&this.intersectionObserver.disconnect()}render(){var n;let{children:t,theme:o,className:s,style:r}=this.props;return Wt(nt.Provider,{value:this._getSandpackState()},Wt(vr,{classes:(n=this.props.options)==null?void 0:n.classes},Wt(Go,{className:s,style:r,theme:o},t)))}},qo=Jo,dc=nt.Consumer;function x(){let e=Nr(nt);if(e===null)throw new Error('[sandpack-react]: "useSandpack" must be wrapped by a "SandpackProvider"');let{dispatch:t,listen:o,...s}=e;return{sandpack:{...s},dispatch:t,listen:o}}var it=()=>{var t,o,s;let{sandpack:e}=x();return{code:(t=e.files[e.activeFile])==null?void 0:t.code,readOnly:(s=(o=e.files[e.activeFile])==null?void 0:o.readOnly)!=null?s:!1,updateCode:e.updateCurrentFile}};import{useClasser as Mr}from"@code-hike/classer";import{createElement as Be}from"react";var ee=m({svg:{margin:"auto"}}),T=m({appearance:"none",border:"0",outline:"none",display:"flex",alignItems:"center",fontSize:"inherit",fontFamily:"inherit",backgroundColor:"transparent",transition:"color $default, background $default",cursor:"pointer",color:"$colors$clickable","&:disabled":{color:"$colors$disabled"},"&:hover:not(:disabled,[data-active='true'])":{color:"$colors$hover"},'&[data-active="true"]':{color:"$colors$accent"},svg:{minWidth:"$space$4",width:"$space$4",height:"$space$4"},[`&.${ee}`]:{padding:"$space$1",width:"$space$7",height:"$space$7",display:"flex"}}),z=m({backgroundColor:"$colors$surface2",borderRadius:"99999px",'&[data-active="true"]':{color:"$colors$surface1",background:"$colors$accent"},"&:hover:not(:disabled,[data-active='true'])":{backgroundColor:"$colors$surface3"}}),Ko=m({padding:0}),$r=tt({"0%":{opacity:0,transform:"translateY(4px)"},"100%":{opacity:1,transform:"translateY(0)"}}),He=m({position:"absolute",bottom:"0",left:"0",right:"0",top:"0",margin:"0",overflow:"auto",height:"100%",zIndex:"$top"}),ct=m({padding:"$space$4",whiteSpace:"pre-wrap",fontFamily:"$font$mono",backgroundColor:"$colors$errorSurface"}),ke=m({animation:`${$r} 150ms ease`,color:"$colors$error"});var Lr=m({borderBottom:"1px solid $colors$surface2",background:"$colors$surface1"}),wr=m({padding:"0 $space$2",overflow:"auto",display:"flex",flexWrap:"nowrap",alignItems:"stretch",minHeight:"40px",marginBottom:"-1px"}),Qo=m({padding:"0 $space$1 0 $space$1",borderRadius:"$border$radius",marginLeft:"$space$1",width:"$space$5",visibility:"hidden",svg:{width:"$space$3",height:"$space$3",display:"block",position:"relative",top:1}}),Fr=m({padding:"0 $space$2",height:"$layout$headerHeight",whiteSpace:"nowrap","&:focus":{outline:"none"},[`&:hover > .${Qo}`]:{visibility:"unset"}}),lt=({closableTabs:e,className:t,...o})=>{let{sandpack:s}=x(),r=Mr(h),{activeFile:n,visibleFiles:c,setActiveFile:a}=s,p=u=>{u.stopPropagation();let f=u.target.closest("[data-active]"),b=f==null?void 0:f.getAttribute("title");!b||s.closeFile(b)},d=u=>{let f=ve(u),b=c.reduce((g,y)=>(y===u||ve(y)===f&&g.push(y),g),[]);return b.length===0?f:_o(u,b)};return Be("div",{className:l(r("tabs"),Lr,t),translate:"no",...o},Be("div",{"aria-label":"Select active file",className:l(r("tabs-scrollable-container"),wr),role:"tablist"},c.map(u=>Be("button",{key:u,"aria-selected":u===n,className:l(r("tab-button"),T,Fr),"data-active":u===n,onClick:()=>a(u),role:"tab",title:u,type:"button"},d(u),e&&c.length>1&&Be("span",{className:l(r("close-button"),Qo),onClick:p},Be(Do,null))))))};import{useClasser as Ar}from"@code-hike/classer";import{createElement as es}from"react";var Pr=m({position:"absolute",bottom:"$space$2",right:"$space$2",paddingRight:"$space$3"}),pt=({className:e,onClick:t,...o})=>{let s=Ar(h),{sandpack:r}=x();return es("button",{className:l(s("button"),T,z,Pr,e),onClick:n=>{r.runSandpack(),t==null||t(n)},type:"button",...o},es(Ke,null),"Run")};import{useClasser as Ir}from"@code-hike/classer";import{createElement as Or}from"react";var me=m({display:"flex",flexDirection:"column",width:"100%",position:"relative",backgroundColor:"$colors$surface1",transition:"flex $transitions$default",gap:1,[`&:has(.${h}-stack)`]:{backgroundColor:"$colors$surface2"}}),Y=({className:e,...t})=>{let o=Ir(h);return Or("div",{className:l(o("stack"),me,e),...t})};import{useClasser as Yr}from"@code-hike/classer";import{closeBrackets as Jr,closeBracketsKeymap as qr}from"@codemirror/closebrackets";import{defaultKeymap as Kr,indentLess as Qr,indentMore as en,deleteGroupBackward as tn}from"@codemirror/commands";import{commentKeymap as on}from"@codemirror/comment";import{lineNumbers as sn}from"@codemirror/gutter";import{defaultHighlightStyle as rn}from"@codemirror/highlight";import{history as nn,historyKeymap as an}from"@codemirror/history";import{bracketMatching as cn}from"@codemirror/matchbrackets";import{EditorState as ds,EditorSelection as ln,StateEffect as ms}from"@codemirror/state";import{Annotation as us}from"@codemirror/state";import{highlightSpecialChars as pn,highlightActiveLine as dn,keymap as fs,EditorView as Jt}from"@codemirror/view";import mn from"@react-hook/intersection-observer";import{Fragment as gn,createElement as Ee,forwardRef as un,useEffect as Re,useImperativeHandle as fn,useMemo as hn,useRef as gt,useState as hs}from"react";import{useContext as Dr}from"react";var Ce=()=>{let{theme:e,id:t,mode:o}=Dr(ot);return{theme:e,themeId:t,themeMode:o}};var Gt=(e,t)=>{if(e.length!==t.length)return!1;let o=!0;for(let s=0;s<e.length;s++)if(e[s]!==t[s]){o=!1;break}return o};import{Decoration as mt,ViewPlugin as zr}from"@codemirror/view";import{HighlightStyle as Hr,tags as A}from"@codemirror/highlight";import{css as Br}from"@codemirror/lang-css";import{html as _r}from"@codemirror/lang-html";import{javascript as ts}from"@codemirror/lang-javascript";import{EditorView as jr}from"@codemirror/view";import{useCallback as Ur}from"react";var _e=(e,{line:t,column:o})=>e.line(t).from+(o!=null?o:0)-1,os=()=>jr.theme({"&":{backgroundColor:`var(--${h}-colors-surface1)`,color:`var(--${h}-syntax-color-plain)`,height:"100%"},".cm-matchingBracket, .cm-nonmatchingBracket, &.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket":{color:"inherit",backgroundColor:"rgba(128,128,128,.25)",backgroundBlendMode:"difference"},"&.cm-editor.cm-focused":{outline:"none"},".cm-activeLine":{backgroundColor:`var(--${h}-colors-surface3)`,borderRadius:`var(--${h}-border-radius)`},".cm-errorLine":{backgroundColor:`var(--${h}-colors-errorSurface)`,borderRadius:`var(--${h}-border-radius)`},".cm-content":{caretColor:`var(--${h}-colors-accent)`,padding:`0 var(--${h}-space-4)`},".cm-scroller":{fontFamily:`var(--${h}-font-mono)`,lineHeight:`var(--${h}-font-lineHeight)`},".cm-gutters":{backgroundColor:`var(--${h}-colors-surface1)`,color:`var(--${h}-colors-disabled)`,border:"none",paddingLeft:`var(--${h}-space-1)`},".cm-gutter.cm-lineNumbers":{fontSize:".6em"},".cm-lineNumbers .cm-gutterElement":{lineHeight:`var(--${h}-font-lineHeight)`,minWidth:`var(--${h}-space-5)`},".cm-content .cm-line":{paddingLeft:`var(--${h}-space-1)`},".cm-content.cm-readonly .cm-line":{paddingLeft:0}}),te=e=>`${h}-syntax-${e}`,ss=()=>["string","plain","comment","keyword","definition","punctuation","property","tag","static"].reduce((t,o)=>({...t,[`.${te(o)}`]:{color:`$syntax$color$${o}`,fontStyle:`$syntax$fontStyle$${o}`}}),{}),rs=e=>Hr.define([{tag:A.link,textDecoration:"underline"},{tag:A.emphasis,fontStyle:"italic"},{tag:A.strong,fontWeight:"bold"},{tag:A.keyword,class:te("keyword")},{tag:[A.atom,A.number,A.bool],class:te("static")},{tag:A.standard(A.tagName),class:te("tag")},{tag:A.variableName,class:te("plain")},{tag:A.function(A.variableName),class:te("definition")},{tag:[A.definition(A.function(A.variableName)),A.tagName],class:te("definition")},{tag:A.propertyName,class:te("property")},{tag:[A.literal,A.inserted],class:te(e.syntax.string?"string":"static")},{tag:A.punctuation,class:te("punctuation")},{tag:[A.comment,A.quote],class:te("comment")}]),ns=(e,t,o)=>{if(!e&&!t)return"javascript";let s=t;if(!s&&e){let r=e.lastIndexOf(".");s=e.slice(r+1)}for(let r of o)if(s===r.name||r.extensions.includes(s||""))return r.name;switch(s){case"ts":case"tsx":return"typescript";case"html":case"svelte":case"vue":return"html";case"css":case"less":case"scss":return"css";case"js":case"jsx":case"json":default:return"javascript"}},as=(e,t)=>{let o={javascript:ts({jsx:!0,typescript:!1}),typescript:ts({jsx:!0,typescript:!0}),html:_r(),css:Br()};for(let s of t)if(e===s.name)return s.language;return o[e]},dt=(...e)=>Ur(t=>e.forEach(o=>{if(!!o){if(typeof o=="function")return o(t);o.current=t}}),e);function is(e){return zr.fromClass(class{constructor(t){this.decorations=this.getDecoration(t)}update(t){}getDecoration(t){if(!e)return mt.none;let o=e.map(s=>{var a,p,d;let r=mt.line({attributes:{class:(a=s.className)!=null?a:""}}),n=mt.mark({class:(p=s.className)!=null?p:"",attributes:(d=s.elementAttributes)!=null?d:void 0}),c=_e(t.state.doc,{line:s.line,column:s.startColumn})+1;if(s.startColumn&&s.endColumn){let u=_e(t.state.doc,{line:s.line,column:s.endColumn})+1;return n.range(c,u)}return r.range(c)});return mt.set(o)}},{decorations:t=>t.decorations})}import{Decoration as ut,ViewPlugin as Vr}from"@codemirror/view";function cs(){return Wr}var Xr=ut.line({attributes:{class:"cm-errorLine"}}),Wr=Vr.fromClass(class{constructor(){this.decorations=ut.none}update(e){e.transactions.forEach(t=>{let o=t.annotation("show-error");if(o!==void 0){let s=_e(e.view.state.doc,{line:o})+1;this.decorations=ut.set([Xr.range(s)])}else t.annotation("remove-errors")&&(this.decorations=ut.none)})}},{decorations:e=>e.decorations});var ft=m({margin:"0",display:"block",fontFamily:"$font$mono",fontSize:"$font$size",color:"$syntax$color$plain",lineHeight:"$font$lineHeight"}),Zt=m(ss()),ht=m({flex:1,position:"relative",overflow:"auto",background:"$colors$surface1",".cm-scroller":{padding:"$space$4 0"},[`.${ft}`]:{padding:"$space$4 0"}}),Yt=m({margin:"0",outline:"none",height:"100%"}),ls=m({fontFamily:"$font$mono",fontSize:"0.8em",position:"absolute",right:"$space$2",bottom:"$space$2",zIndex:"$top",color:"$colors$clickable",backgroundColor:"$colors$surface2",borderRadius:"99999px",padding:"calc($space$1 / 2) $space$2",[`& + .${T}`]:{right:"calc($space$11 * 2)"}});import{highlightTree as Gr}from"@codemirror/highlight";import{createElement as Zr}from"react";var ps=({langSupport:e,highlightTheme:t,code:o=""})=>{let s=e.language.parser.parse(o),r=0,n=[],c=(a,p)=>{if(a>r){let d=o.slice(r,a);n.push(p?Zr("span",{children:d,className:p,key:`${a}${r}`}):d),r=a}};return Gr(s,t.match,(a,p,d)=>{c(a,""),c(p,d)}),r<o.length&&n.push(`
+ 
+ `),n};var xe=un(({code:e,filePath:t,fileType:o,onCodeUpdate:s,showLineNumbers:r=!1,showInlineErrors:n=!1,wrapContent:c=!1,editorState:a="pristine",readOnly:p=!1,showReadOnly:d=!0,decorators:u,initMode:f="lazy",id:b,extensions:g=[],extensionsKeymap:y=[],additionalLanguages:R=[]},N)=>{let F=gt(null),X=dt(F,N),E=gt(),{theme:_,themeId:B}=Ce(),[j,v]=hs(e),[$,q]=hs(f==="immediate"),S=Yr(h),{listen:k}=x(),I=gt([]),M=gt([]),{isIntersecting:O}=mn(F,{rootMargin:"600px 0px",threshold:.2});fn(N,()=>({getCodemirror:()=>E.current})),Re(()=>{(f==="lazy"||f==="user-visible")&&O&&q(!0)},[f,O]);let G=ns(t,o,R),$e=as(G,R),Me=rs(_),Le=ps({langSupport:$e,highlightTheme:Me,code:e}),he=hn(()=>u&&u.sort((L,D)=>L.line-D.line),[u]);Re(()=>{if(!F.current||!$)return;let L=setTimeout(function(){let U=[{key:"Tab",run:Z=>{var ie;en(Z);let K=y.find(({key:de})=>de==="Tab");return(ie=K==null?void 0:K.run(Z))!=null?ie:!0}},{key:"Shift-Tab",run:({state:Z,dispatch:K})=>{var de;Qr({state:Z,dispatch:K});let ie=y.find(({key:qe})=>qe==="Shift-Tab");return(de=ie==null?void 0:ie.run(oe))!=null?de:!0}},{key:"Escape",run:()=>(p||F.current&&F.current.focus(),!0)},{key:"mod-Backspace",run:tn}],w=[pn(),nn(),Jr(),...g,fs.of([...qr,...Kr,...an,...on,...U,...y]),$e,rn.fallback,os(),Me];p?(w.push(ds.readOnly.of(!0)),w.push(Jt.editable.of(!1))):(w.push(cn()),w.push(dn())),he&&w.push(is(he)),c&&w.push(Jt.lineWrapping),r&&w.push(sn()),n&&w.push(cs());let ge=ds.create({doc:e,extensions:w}),be=F.current,Fe=be.querySelector(".sp-pre-placeholder");Fe&&be.removeChild(Fe);let oe=new Jt({state:ge,parent:be,dispatch:Z=>{if(oe.update([Z]),Z.docChanged){let K=Z.newDoc.sliceString(0,Z.newDoc.length);v(K),s==null||s(K)}}});oe.contentDOM.setAttribute("data-gramm","false"),oe.contentDOM.setAttribute("aria-label",t?`Code Editor for ${ve(t)}`:"Code Editor"),p?oe.contentDOM.classList.add("cm-readonly"):oe.contentDOM.setAttribute("tabIndex","-1"),E.current=oe},0);return()=>{var D;(D=E.current)==null||D.destroy(),clearTimeout(L)}},[$,r,c,B,he,p]),Re(function(){let D=E.current,U=!Gt(g,I.current)||!Gt(y,M.current);D&&U&&(D.dispatch({effects:ms.appendConfig.of(g)}),D.dispatch({effects:ms.appendConfig.of(fs.of([...y]))}),I.current=g,M.current=y)},[g,y]),Re(()=>{E.current&&a==="dirty"&&window.matchMedia("(min-width: 768px)").matches&&E.current.contentDOM.focus()},[]),Re(()=>{if(E.current&&e!==j){let L=E.current,D=L.state.selection.ranges.some(({to:w,from:ge})=>w>e.length||ge>e.length)?ln.cursor(e.length):L.state.selection,U={from:0,to:L.state.doc.length,insert:e};L.dispatch({changes:U,selection:D})}},[e]),Re(function(){if(!n)return;let D=k(U=>{let w=E.current;U.type==="success"?w==null||w.dispatch({annotations:[new us("remove-errors",!0)]}):U.type==="action"&&U.action==="show-error"&&U.line&&(w==null||w.dispatch({annotations:[new us("show-error",U.line)]}))});return()=>D()},[k,n]);let Je=L=>{L.key==="Enter"&&E.current&&(L.preventDefault(),E.current.contentDOM.focus())},we=()=>{let L=4;return r&&(L+=6),p||(L+=1),`var(--${h}-space-${L})`};return p?Ee(gn,null,Ee("pre",{ref:X,className:l(S("cm",a,G),Yt,Zt),translate:"no"},Ee("code",{className:l(S("pre-placeholder"),ft),style:{marginLeft:we()}},Le)),p&&d&&Ee("span",{className:l(S("read-only"),ls),...{}},"Read-only")):Ee("div",{ref:X,"aria-autocomplete":"list","aria-label":t?`Code Editor for ${ve(t)}`:"Code Editor","aria-multiline":"true",className:l(S("cm",a,G),Yt,Zt),onKeyDown:Je,role:"textbox",tabIndex:0,translate:"no",suppressHydrationWarning:!0},Ee("pre",{className:l(S("pre-placeholder"),ft),style:{marginLeft:we()}},Le))});var gs=yn(({style:e,showTabs:t,showLineNumbers:o=!1,showInlineErrors:s=!1,showRunButton:r=!0,wrapContent:n=!1,closableTabs:c=!1,initMode:a,extensions:p,extensionsKeymap:d,id:u,readOnly:f,showReadOnly:b,additionalLanguages:g},y)=>{let{sandpack:R}=x(),{code:N,updateCode:F,readOnly:X}=it(),{activeFile:E,status:_,editorState:B}=R,j=t!=null?t:R.visibleFiles.length>1,v=bn(h),$=q=>{F(q)};return je(Y,{className:v("editor"),style:e},j&&je(lt,{closableTabs:c}),je("div",{className:l(v("code-editor"),ht)},je(xe,{key:E,ref:y,additionalLanguages:g,code:N,editorState:B,extensions:p,extensionsKeymap:d,filePath:E,id:u,initMode:a||R.initMode,onCodeUpdate:$,readOnly:f||X,showInlineErrors:s,showLineNumbers:o,showReadOnly:b,wrapContent:n}),r&&_==="idle"?je(pt,null):null))});import{useClasser as Sn}from"@code-hike/classer";import{createElement as Ue,forwardRef as vn}from"react";var bs=vn(({showTabs:e,showLineNumbers:t,decorators:o,code:s,initMode:r,wrapContent:n,...c},a)=>{let{sandpack:p}=x(),{code:d}=it(),u=Sn(h),f=e!=null?e:p.visibleFiles.length>1;return Ue(Y,{...c},f?Ue(lt,null):null,Ue("div",{className:l(u("code-editor"),ht)},Ue(xe,{ref:a,code:s!=null?s:d,decorators:o,filePath:p.activeFile,initMode:r||p.initMode,showLineNumbers:t,showReadOnly:!1,wrapContent:n,readOnly:!0})),p.status==="idle"?Ue(pt,null):null)});import{createElement as vs}from"react";import{createElement as Kt}from"react";import{createElement as qt,useState as xn}from"react";import{useClasser as kn}from"@code-hike/classer";import{createElement as ze}from"react";var Cn=m({borderRadius:"0",width:"100%",padding:0,marginBottom:"$space$2",span:{textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden"},svg:{marginRight:"$space$1"}}),bt=({selectFile:e,path:t,active:o,onClick:s,depth:r,isDirOpen:n})=>{let c=kn(h),a=u=>{e&&e(t),s==null||s(u)},p=t.split("/").filter(Boolean).pop(),d=()=>e?ze(Oo,null):n?ze(Po,null):ze(Io,null);return ze("button",{className:l(c("button","explorer"),T,Cn),"data-active":o,onClick:a,style:{paddingLeft:18*r+"px"},title:p,type:"button"},d(),ze("span",null,p))};var ys=({prefixedPath:e,files:t,selectFile:o,activeFile:s,depth:r,autoHiddenFiles:n,visibleFiles:c})=>{let[a,p]=xn(!0);return qt("div",{key:e},qt(bt,{depth:r,isDirOpen:a,onClick:()=>p(u=>!u),path:e+"/"}),a&&qt(yt,{activeFile:s,autoHiddenFiles:n,depth:r+1,files:t,prefixedPath:e,selectFile:o,visibleFiles:c}))};var Ss=({autoHiddenFiles:e,visibleFiles:t,files:o,prefixedPath:s})=>{let r=t.length>0,n=e&&!r,c=e&&!!r,a=Object.keys(o).filter(u=>{var b;let f=u.startsWith(s);return c?f&&t.includes(u):n?f&&!((b=o[u])==null?void 0:b.hidden):f}).map(u=>u.substring(s.length)),p=new Set(a.filter(u=>u.includes("/")).map(u=>`${s}${u.split("/")[0]}/`)),d=a.filter(u=>!u.includes("/")).map(u=>`${s}${u}`);return{directories:Array.from(p),modules:d}};var yt=({depth:e=0,activeFile:t,selectFile:o,prefixedPath:s,files:r,autoHiddenFiles:n,visibleFiles:c})=>{let{directories:a,modules:p}=Ss({visibleFiles:c,autoHiddenFiles:n,prefixedPath:s,files:r});return Kt("div",null,a.map(d=>Kt(ys,{key:d,activeFile:t,autoHiddenFiles:n,depth:e,files:r,prefixedPath:d,selectFile:o,visibleFiles:c})),p.map(d=>Kt(bt,{key:d,active:t===d,depth:e,path:d,selectFile:o})))};var Rn=m({padding:"$space$3",overflow:"auto",height:"100%"}),wp=({className:e,autoHiddenFiles:t=!1,...o})=>{let{sandpack:s}=x();return vs("div",{className:l(me,Rn,`${h}-file-explorer`,e),...o},vs(yt,{activeFile:s.activeFile,autoHiddenFiles:t,files:s.files,prefixedPath:"/",selectFile:s.openFile,visibleFiles:s.visibleFilesFromProps}))};import{useClasser as En}from"@code-hike/classer";import{createElement as le,useEffect as $n,useState as St}from"react";var ks=e=>{let t=e.match(/(https?:\/\/.*?)\//);return t&&t[1]?[t[1],e.replace(t[1],"")]:[e,"/"]};var Tn=m({display:"flex",alignItems:"center",height:"$layout$headerHeight",borderBottom:"1px solid $colors$surface2",padding:"$space$3 $space$2",background:"$colors$surface1"}),Nn=m({backgroundColor:"$colors$surface2",color:"$colors$clickable",padding:"$space$1 $space$3",borderRadius:"99999px",border:"1px solid $colors$surface2",height:"24px",lineHeight:"24px",fontSize:"inherit",outline:"none",flex:1,marginLeft:"$space$4",width:"0",transition:"background $transitions$default","&:hover":{backgroundColor:"$colors$surface3"},"&:focus":{backgroundColor:"$surface1",border:"1px solid $colors$accent",color:"$colors$base"}}),Cs=({clientId:e,onURLChange:t,className:o,...s})=>{var j;let[r,n]=St(""),{sandpack:c,dispatch:a,listen:p}=x(),[d,u]=St((j=c.startRoute)!=null?j:"/"),[f,b]=St(!1),[g,y]=St(!1),R=En(h);$n(()=>{let v=p($=>{if($.type==="urlchange"){let{url:q,back:S,forward:k}=$,[I,M]=ks(q);n(I),u(M),b(S),y(k)}},e);return()=>v()},[]);let N=v=>{let $=v.target.value.startsWith("/")?v.target.value:`/${v.target.value}`;u($)},F=v=>{v.code==="Enter"&&(v.preventDefault(),v.stopPropagation(),typeof t=="function"&&t(r+v.currentTarget.value))},X=()=>{a({type:"refresh"})},E=()=>{a({type:"urlback"})},_=()=>{a({type:"urlforward"})},B=l(R("button","icon"),T,Ko,m({minWidth:"$space$6",justifyContent:"center"}));return le("div",{className:l(R("navigator"),Tn,o),...s},le("button",{"aria-label":"Go back one page",className:B,disabled:!f,onClick:E,type:"button"},le(Lo,null)),le("button",{"aria-label":"Go forward one page",className:B,disabled:!g,onClick:_,type:"button"},le(wo,null)),le("button",{"aria-label":"Refresh page",className:B,onClick:X,type:"button"},le(Qe,null)),le("input",{"aria-label":"Current Sandpack URL",className:l(R("input"),Nn),name:"Current Sandpack URL",onChange:N,onKeyDown:F,type:"text",value:d}))};import{useClasser as Gn}from"@code-hike/classer";import{Fragment as Kn,createElement as re,forwardRef as qn,useEffect as ea,useImperativeHandle as ta,useState as Qn}from"react";import{useEffect as Mn}from"react";var xs=()=>{var o;let{sandpack:e}=x(),{error:t}=e;return Mn(()=>{e.errorScreenRegisteredRef.current=!0},[]),(o=t==null?void 0:t.message)!=null?o:null};import{useEffect as Es,useState as Ln}from"react";var Qt=200,Rs=(e,t)=>{let{sandpack:o,listen:s}=x(),[r,n]=Ln("LOADING");return Es(()=>{o.loadingScreenRegisteredRef.current=!0;let c=s(a=>{a.type==="start"&&a.firstLoad===!0&&n("LOADING"),a.type==="done"&&n(p=>p==="LOADING"?"PRE_FADING":"HIDDEN")},e);return()=>{c()}},[e,o.status==="idle"]),Es(()=>{let c;return r==="PRE_FADING"&&!t?n("FADING"):r==="FADING"&&(c=setTimeout(()=>n("HIDDEN"),Qt)),()=>{clearTimeout(c)}},[r,t]),o.status==="timeout"?"TIMEOUT":o.status!=="running"?"HIDDEN":r};var Ts=e=>{let{dispatch:t}=x();return{refresh:()=>t({type:"refresh"},e),back:()=>t({type:"urlback"},e),forward:()=>t({type:"urlforward"},e)}};function wn(e){var r,n;let{activeFile:t,bundlerState:o}=e;if(o==null)return null;let s=o.transpiledModules[t+":"];return(n=(r=s==null?void 0:s.source)==null?void 0:r.compiledCode)!=null?n:null}var Ns=()=>{let{sandpack:e}=x();return e.status!=="running"?null:wn(e)};import{useEffect as Fn,useRef as $s}from"react";var vt=()=>{let{sandpack:e,listen:t,dispatch:o}=x(),s=$s(null),r=$s(Ae());return Fn(()=>{let c=s.current,a=r.current;return c!==null&&e.registerBundler(c,a),()=>e.unregisterBundler(a)},[]),{sandpack:e,getClient:()=>e.clients[r.current]||null,clientId:r.current,iframe:s,listen:c=>t(c,r.current),dispatch:c=>o(c,r.current)}};import{useClasser as An}from"@code-hike/classer";import{createElement as Ms}from"react";var kt=({children:e,className:t,...o})=>{let s=xs(),r=An(h);return!s&&!e?null:Ms("div",{className:l(r("overlay","error"),He,ct,t),translate:"no",...o},Ms("div",{className:l(r("error-message"),ke)},s||e))};import{useClasser as Vn}from"@code-hike/classer";import{createElement as Te}from"react";import{useClasser as _n}from"@code-hike/classer";import{createElement as se}from"react";import{useClasser as Bn}from"@code-hike/classer";import{createElement as Fs}from"react";import Pn from"lz-string";import{createElement as Ct,useEffect as ws,useRef as Dn,useState as Hn}from"react";var In=e=>Pn.compressToBase64(JSON.stringify(e)).replace(/\+/g,"-").replace(/\//g,"_").replace(/=+$/,""),Ls="https://codesandbox.io/api/v1/sandboxes/define",On=(e,t)=>{let o=Object.keys(e).reduce((s,r)=>{let n=r.replace("/",""),c={content:e[r].code,isBinary:!1};return{...s,[n]:c}},{});return In({files:o,...t?{template:t}:null})},eo=({children:e,...t})=>{var c,a,p;let{sandpack:o}=x(),s=Dn(null),[r,n]=Hn();return ws(function(){let u=setTimeout(()=>{let f=On(o.files,o.environment),b=new URLSearchParams({parameters:f,query:new URLSearchParams({file:o.activeFile,utm_medium:"sandpack"}).toString()});n(b)},600);return()=>{clearTimeout(u)}},[o.activeFile,o.environment,o.files]),ws(function(){o.openInCSBRegisteredRef.current=!0},[]),((p=(a=(c=r==null?void 0:r.get)==null?void 0:c.call(r,"parameters"))==null?void 0:a.length)!=null?p:0)>1500?Ct("button",{onClick:()=>{var d;return(d=s.current)==null?void 0:d.submit()},title:"Open in CodeSandbox",...t},Ct("form",{ref:s,action:Ls,method:"POST",style:{visibility:"hidden"},target:"_blank"},Array.from(r,([d,u])=>Ct("input",{key:d,name:d,type:"hidden",value:u}))),e):Ct("a",{href:`${Ls}?${r==null?void 0:r.toString()}`,rel:"noreferrer noopener",target:"_blank",title:"Open in CodeSandbox",...t},e)};var Ve=()=>{let e=Bn(h);return Fs(eo,{className:l(e("button","icon-standalone"),T,ee,z)},Fs(Ao,null))};var to=m({transform:"translate(-4px, 9px) scale(0.13, 0.13)","*":{position:"absolute",width:"96px",height:"96px"}}),jn=m({position:"absolute",right:"$space$2",bottom:"$space$2",zIndex:"$top",width:"32px",height:"32px",borderRadius:"$border$radius",[`.${to}`]:{display:"flex"},[`.${T}`]:{display:"none"},[`&:hover .${T}`]:{display:"flex"},[`&:hover .${to}`]:{display:"none"}}),Un=tt({"0%":{transform:"rotateX(-25.5deg) rotateY(45deg)"},"100%":{transform:"rotateX(-25.5deg) rotateY(405deg)"}}),zn=m({animation:`${Un} 1s linear infinite`,animationFillMode:"forwards",transformStyle:"preserve-3d",transform:"rotateX(-25.5deg) rotateY(45deg)","*":{border:"10px solid $colors$clickable",borderRadius:"8px",background:"$colors$surface1"},".top":{transform:"rotateX(90deg) translateZ(44px)",transformOrigin:"50% 50%"},".bottom":{transform:"rotateX(-90deg) translateZ(44px)",transformOrigin:"50% 50%"},".front":{transform:"rotateY(0deg) translateZ(44px)",transformOrigin:"50% 50%"},".back":{transform:"rotateY(-180deg) translateZ(44px)",transformOrigin:"50% 50%"},".left":{transform:"rotateY(-90deg) translateZ(44px)",transformOrigin:"50% 50%"},".right":{transform:"rotateY(90deg) translateZ(44px)",transformOrigin:"50% 50%"}}),xt=({className:e,showOpenInCodeSandbox:t,...o})=>{let s=_n(h);return se("div",{className:l(s("cube-wrapper"),jn,e),title:"Open in CodeSandbox",...o},t&&se(Ve,null),se("div",{className:l(s("cube"),to)},se("div",{className:l(s("sides"),zn)},se("div",{className:"top"}),se("div",{className:"right"}),se("div",{className:"bottom"}),se("div",{className:"left"}),se("div",{className:"front"}),se("div",{className:"back"}))))};var Xn=m({backgroundColor:"$colors$surface1"}),Rt=({clientId:e,loading:t,className:o,style:s,showOpenInCodeSandbox:r,...n})=>{let c=Rs(e,t),a=Vn(h);if(c==="HIDDEN")return null;if(c==="TIMEOUT")return Te("div",{className:l(a("overlay","error"),He,ct,o),...n},Te("div",{className:l(a("error-message"),ke)},"Unable to establish connection with the sandpack bundler. Make sure you are online or try again later. If the problem persists, please report it via"," ",Te("a",{className:l(a("error-message"),ke),href:"mailto:hello@codesandbox.io?subject=Sandpack Timeout Error"},"email")," ","or submit an issue on"," ",Te("a",{className:l(a("error-message"),ke),href:"https://github.com/codesandbox/sandpack/issues",rel:"noreferrer noopener",target:"_blank"},"GitHub.")));let p=c==="LOADING"||c==="PRE_FADING";return Te("div",{className:l(a("overlay","loading"),He,Xn,o),style:{...s,opacity:p?1:0,transition:`opacity ${Qt}ms ease-out`},...n},Te(xt,{showOpenInCodeSandbox:r}))};import{useClasser as Wn}from"@code-hike/classer";import{createElement as Ps}from"react";var As=({clientId:e})=>{let{refresh:t}=Ts(e),o=Wn(h);return Ps("button",{className:l(o("button","icon-standalone"),T,ee,z),onClick:t,title:"Refresh Sandpack",type:"button"},Ps(Qe,null))};var Zn=m({flex:1,display:"flex",flexDirection:"column",background:"white",overflow:"auto",position:"relative"}),Yn=m({border:"0",outline:"0",width:"100%",height:"100%",minHeight:"160px",maxHeight:"2000px",flex:1}),Jn=m({display:"flex",position:"absolute",bottom:"$space$2",right:"$space$2",zIndex:"$overlay","> *":{marginLeft:"$space$2"}}),Is=qn(({showNavigator:e=!1,showRefreshButton:t=!0,showOpenInCodeSandbox:o=!0,showSandpackErrorOverlay:s=!0,actionsChildren:r=re(Kn,null),children:n,className:c,...a},p)=>{let{sandpack:d,listen:u,iframe:f,getClient:b,clientId:g}=vt(),[y,R]=Qn(null),{status:N,errorScreenRegisteredRef:F,openInCSBRegisteredRef:X,loadingScreenRegisteredRef:E}=d,_=Gn(h);X.current=!0,F.current=!0,E.current=!0,ea(()=>u(v=>{v.type==="resize"&&R(v.height)}),[]),ta(p,()=>({clientId:g,getClient:b}),[b,g]);let B=j=>{!f.current||(f.current.src=j)};return re(Y,{className:l(`${h}-preview`,c),...a},e&&re(Cs,{clientId:g,onURLChange:B}),re("div",{className:l(_("preview-container"),Zn)},re("iframe",{ref:f,className:l(_("preview-iframe"),Yn),style:{height:y||void 0},title:"Sandpack Preview"}),s&&re(kt,null),re("div",{className:l(_("preview-actions"),Jn)},r,!e&&t&&N==="running"&&re(As,{clientId:g}),o&&re(Ve,null)),re(Rt,{clientId:g,showOpenInCodeSandbox:o}),n))});import{useClasser as oa}from"@code-hike/classer";import{createElement as Xe,useEffect as na,useRef as ra}from"react";var sa=m({display:"flex",flexDirection:"column",width:"100%",position:"relative",overflow:"auto",minHeight:"160px",flex:1}),bm=({className:e,...t})=>{let{sandpack:o}=x(),s=Ns(),r=oa(h),n=ra(null);return na(()=>{let c=n.current;return c&&o.registerBundler(c,"hidden"),()=>{o.unregisterBundler("hidden")}},[]),Xe("div",{className:l(r("transpiled-code"),me,sa,e),...t},Xe(bs,{code:s!=null?s:"",initMode:o.initMode,...t}),Xe("iframe",{ref:n,style:{display:"none"},title:"transpiled sandpack code"}),Xe(kt,null),Xe(Rt,{clientId:"hidden",showOpenInCodeSandbox:!1}))};import{useClasser as aa}from"@code-hike/classer";import{createElement as Os,useEffect as oo,useRef as ca,useState as la}from"react";var ia=m({height:"$layout$height",width:"100%"}),Em=({clientId:e,theme:t,className:o,...s})=>{let{listen:r,sandpack:n}=x(),{themeMode:c}=Ce(),a=aa(h),p=ca(),[d,u]=la(null);return oo(()=>{import("react-devtools-inline/frontend").then(f=>{p.current=f})},[]),oo(()=>r(b=>{var g;if(b.type==="activate-react-devtools"){let y=e?n.clients[e]:Object.values(n.clients)[0],R=(g=y==null?void 0:y.iframe)==null?void 0:g.contentWindow;p.current&&R&&u(p.current.initialize(R))}}),[p,e,r,n.clients]),oo(()=>{n.registerReactDevTools("legacy")},[]),d?Os("div",{className:l(a("devtools"),ia,o),...s},Os(d,{browserTheme:t!=null?t:c})):null};import{Fragment as _a,createElement as V,useEffect as Qs,useState as Ba}from"react";import{useClasser as pa}from"@code-hike/classer";import{createElement as ua,forwardRef as ma}from"react";var da=m({border:"1px solid $colors$surface2",display:"flex",flexWrap:"wrap",alignItems:"stretch",borderRadius:"$border$radius",overflow:"hidden",position:"relative",backgroundColor:"$colors$surface2",gap:1,[`> .${me}`]:{flexGrow:1,flexShrink:1,flexBasis:"0",minWidth:"350px",height:"$layout$height","@media print":{height:"auto",display:"block"},"@media screen and (max-width: 768px)":{height:"auto",minWidth:"100% !important;"}},[`> .${h}-file-explorer`]:{flex:.2,minWidth:200}}),Ds=ma(({children:e,className:t,...o},s)=>{let{sandpack:r}=x(),n=pa(h),c=dt(r.lazyAnchorRef,s);return ua("div",{ref:c,className:l(n("layout"),da,t),...o},e)});import{createElement as pe}from"react";var fa=m({justifyContent:"space-between",borderBottom:"1px solid $colors$surface2",padding:"$space$3 $space$2",fontFamily:"$font$mono",maxHeight:"$layout$headerHeight",overflowX:"auto",whiteSpace:"nowrap"}),so=m({display:"flex",flexDirection:"row",alignItems:"center",gap:"$space$2"}),Hs=({status:e,suiteOnly:t,setSuiteOnly:o,setVerbose:s,verbose:r,watchMode:n,setWatchMode:c,showSuitesOnly:a})=>{let p=l(T,z,m({padding:"$space$1 $space$3"}));return pe("div",{className:l(fa,so)},pe("div",{className:l(so)},pe("p",{className:l(m({lineHeight:1,margin:0,color:"$colors$base",fontSize:"$font$size",display:"flex",alignItems:"center",gap:"$space$2"}))},pe(Se,null),"Tests")),pe("div",{className:l(so)},a&&pe("button",{className:p,"data-active":t,disabled:e==="initialising",onClick:o},"Suite only"),pe("button",{className:p,"data-active":r,disabled:e==="initialising",onClick:s},"Verbose"),pe("button",{className:p,"data-active":n,disabled:e==="initialising",onClick:c},"Watch")))};import{useClasser as ha}from"@code-hike/classer";import{createElement as _s}from"react";var Bs=({onClick:e})=>{let t=ha(h);return _s("button",{className:l(t("button","icon-standalone"),T,ee,z),onClick:e,title:"Run tests",type:"button"},_s(Ke,null))};import{Fragment as Aa,createElement as P}from"react";import{Fragment as xa,createElement as Ge}from"react";import ue from"react";var js=e=>({"--test-pass":e?"#18df16":"#15c213","--test-fail":e?"#df162b":"#c21325","--test-skip":e?"#eace2b":"#c2a813","--test-run":e?"#eace2b":"#c2a813","--test-title":e?"#3fbabe":"#256c6f"}),Et=m({variants:{status:{pass:{color:"var(--test-pass)"},fail:{color:"var(--test-fail)"},skip:{color:"var(--test-skip)"},title:{color:"var(--test-title)"}}}}),ne=Et({status:"pass"}),H=Et({status:"fail"}),Tt=Et({status:"skip"}),Us=Et({status:"title"}),ro=m({variants:{status:{pass:{background:"var(--test-pass)",color:"$colors$surface1"},fail:{background:"var(--test-fail)",color:"$colors$surface1"},run:{background:"var(--test-run)",color:"$colors$surface1"}}}}),zs=ro({status:"run"}),Vs=ro({status:"pass"}),no=ro({status:"fail"});var ga=m({marginLeft:"$space$4"}),ba=m({marginBottom:"$space$2",color:"$colors$clickable"}),ya=m({marginBottom:"$space$2",color:"$colors$hover"}),Sa=m({marginLeft:"$space$2"}),ao=m({marginRight:"$space$2"}),Nt=({tests:e,style:t})=>ue.createElement("div",{className:l(ga)},e.map(o=>ue.createElement("div",{key:o.name,className:l(ba)},o.status==="pass"&&ue.createElement("span",{className:l(ne,ao)},"\u2713"),o.status==="fail"&&ue.createElement("span",{className:l(H,ao)},"\u2715"),o.status==="idle"&&ue.createElement("span",{className:l(Tt,ao)},"\u25CB"),ue.createElement("span",{className:l(ya)},o.name),o.duration!==void 0&&ue.createElement("span",{className:l(Sa)},"(",o.duration," ms)"))));import va from"clean-set";var Xs=e=>$t(e).filter(t=>t.status==="fail"),$t=e=>Object.values(e.tests).concat(...Object.values(e.describes).map($t)),Ws=e=>e.map(Mt).reduce((t,o)=>({pass:t.pass+o.pass,fail:t.fail+o.fail,skip:t.skip+o.skip,total:t.total+o.total}),{pass:0,skip:0,fail:0,total:0}),Mt=e=>$t(e).reduce((t,o)=>({pass:o.status==="pass"?t.pass+1:t.pass,fail:o.status==="fail"?t.fail+1:t.fail,skip:o.status==="idle"||o.status==="running"?t.skip+1:t.skip,total:t.total+1}),{pass:0,fail:0,skip:0,total:0}),Gs=e=>e.filter(t=>Object.values(t.describes).length>0||Object.values(t.tests).length>0).map(Mt).reduce((t,o)=>({pass:t.pass+(o.fail===0?1:0),fail:t.fail+(o.fail>0?1:0),total:t.total+1}),{pass:0,fail:0,total:0}),Zs=e=>Ne(e,$t).reduce((t,o)=>t+(o.duration||0),0),Lt=e=>Object.values(e.describes).length===0&&Object.values(e.tests).length===0,We=e=>{let t=e.length-1,o=e.slice(0,t),s=e[t];return[o,s]},Ne=(e,t)=>e.map(t).reduce((o,s)=>o.concat(s),[]),ae=(e,t)=>o=>va(o,e,t);var ka=m({color:"$colors$hover",marginBottom:"$space$2"}),Ca=m({marginLeft:"$space$4"}),io=({describes:e})=>Ge(xa,null,e.map(t=>{if(Lt(t))return null;let o=Object.values(t.tests),s=Object.values(t.describes);return Ge("div",{key:t.name,className:l(Ca)},Ge("div",{className:l(ka)},t.name),Ge(Nt,{tests:o}),Ge(io,{describes:s}))}));import{createElement as Ta}from"react";var Ra=m({color:"$colors$hover",fontSize:"$font$size",padding:"$space$2",whiteSpace:"pre-wrap"}),co=({error:e,path:t})=>Ta("div",{className:l(Ra),dangerouslySetInnerHTML:{__html:Ea(e,t)}}),wt=e=>e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#039;"),Ea=(e,t)=>{let o="";if(e.matcherResult?o=`<span>${wt(e.message).replace(/(expected)/m,`<span class="${ne}">$1</span>`).replace(/(received)/m,`<span class="${H}">$1</span>`).replace(/(Difference:)/m,"<span>$1</span>").replace(/(Expected:)(.*)/m,`<span>$1</span><span class="${ne}">$2</span>`).replace(/(Received:)(.*)/m,`<span>$1</span><span class="${H}">$2</span>`).replace(/^(-.*)/gm,`<span class="${H}">$1</span>`).replace(/^(\+.*)/gm,`<span class="${ne}">$1</span>`)}</span>`:o=wt(e.message),e.mappedErrors&&e.mappedErrors[0]&&e.mappedErrors[0].fileName.endsWith(t)&&e.mappedErrors[0]._originalScriptCode){let r=e.mappedErrors[0]._originalScriptCode||[],n=Math.max(...r.map(a=>(a.lineNumber+"").length))+2,c=Array.from({length:n}).map(()=>" ");o+="<br />",o+="<br />",o+="<div>",r.filter(a=>a.content.trim()).forEach(a=>{let p=(a.lineNumber+"").length,d=[...c];d.length-=p,a.highlight&&(d.length-=2);let u=a.content.indexOf(".to"),f=Array.from({length:c.length+u-(n-1)},()=>" "),b=wt(a.content).replace(/(describe|test|it)(\()(&#039;|&quot;|`)(.*)(&#039;|&quot;|`)/m,`<span>$1$2$3</span><span class="${Us}">$4</span><span>$5</span>`).replace(/(expect\()(.*)(\)\..*)(to[\w\d]*)(\()(.*)(\))/m,`<span>$1</span><span class="${H}">$2</span><span>$3</span><span style="text-decoration: underline; font-weight: 900">$4</span><span>$5</span><span class="${ne}">$6</span><span>$7</span>`);o+=`<div ${a.highlight?'style="font-weight:200;"':""}>`+(a.highlight?`<span class="${H}">></span> `:"")+d.join("")+wt(""+a.lineNumber)+" | "+b+"</div>"+(a.highlight?"<div>"+c.join("")+" | "+f.join("")+`<span class="${H}">^</span></div>`:"")}),o+="</div>"}return o.replace(/(?:\r\n|\r|\n)/g,"<br />")};var Na=m({display:"flex",flexDirection:"row",alignItems:"center",marginBottom:"$space$2"}),lo=m({marginBottom:"$space$2"}),$a=m({fontWeight:"bold"}),Ft=m({borderRadius:"calc($border$radius / 2)"}),Ma=m({padding:"$space$1 $space$2",fontFamily:"$font$mono",textTransform:"uppercase",marginRight:"$space$2"}),La=m({fontFamily:"$font$mono",cursor:"pointer",display:"inline-block"}),wa=m({color:"$colors$clickable",textDecorationStyle:"dotted",textDecorationLine:"underline"}),Fa=m({color:"$colors$hover",fontWeight:"bold",textDecorationStyle:"dotted",textDecorationLine:"underline"}),Ys=({specs:e,openSpec:t,status:o,verbose:s})=>P(Aa,null,e.map(r=>{if(r.error)return P("div",{key:r.name,className:l(lo)},P(At,{className:l(Ft,no)},"Error"),P(Js,{onClick:()=>t(r.name),path:r.name}),P(co,{error:r.error,path:r.name}));if(Lt(r))return null;let n=Object.values(r.tests),c=Object.values(r.describes),a=Mt(r);return P("div",{key:r.name,className:l(lo)},P("div",{className:l(Na)},o==="complete"?a.fail>0?P(At,{className:l(Ft,no)},"Fail"):P(At,{className:l(Ft,Vs)},"Pass"):P(At,{className:l(Ft,zs)},"Run"),P(Js,{onClick:()=>t(r.name),path:r.name})),s&&P(Nt,{tests:n}),s&&P(io,{describes:c}),Xs(r).map(p=>P("div",{key:`failing-${p.name}`,className:l(lo)},P("div",{className:l($a,H)},"\u25CF ",p.blocks.join(" \u203A ")," \u203A ",p.name),p.errors.map(d=>P(co,{key:`failing-${p.name}-error`,error:d,path:p.path})))))})),At=({children:e,className:t})=>P("span",{className:l(Ma,t)},e),Js=({onClick:e,path:t})=>{let o=t.split("/"),s=o.slice(0,o.length-1).join("/")+"/",r=o[o.length-1];return P("button",{className:l(T,La),onClick:e},P("span",{className:l(wa)},s),P("span",{className:l(Fa)},r))};import{createElement as W}from"react";var qs=m({marginBottom:"$space$2"}),po=m({fontWeight:"bold",color:"$colors$hover",whiteSpace:"pre-wrap"}),Pa=m({fontWeight:"bold",color:"$colors$clickable"}),Ks=({suites:e,tests:t,duration:o})=>{let s="Test suites: ",r=n=>{let c=s.length-n.length,a=Array.from({length:c},()=>" ").join("");return n+a};return W("div",{className:l(Pa)},W("div",{className:l(qs)},W("span",{className:l(po)},s),e.fail>0&&W("span",{className:l(H)},e.fail," failed,"," "),e.pass>0&&W("span",{className:l(ne)},e.pass," passed,"," "),W("span",null,e.total," total")),W("div",{className:l(qs)},W("span",{className:l(po)},r("Tests:")),t.fail>0&&W("span",{className:l(H)},t.fail," failed,"," "),t.skip>0&&W("span",{className:l(Tt)},t.skip," skipped,"," "),t.pass>0&&W("span",{className:l(ne)},t.pass," passed,"," "),W("span",null,t.total," total")),W("div",{className:l(po)},r("Time:"),o/1e3,"s"))};var Ia=m({display:"flex",position:"absolute",bottom:"$space$2",right:"$space$2",zIndex:"$overlay","> *":{marginLeft:"$space$2"}}),Oa={specs:{},status:"initialising",verbose:!1,watchMode:!0,suiteOnly:!1,specsCount:0},mo=({verbose:e=!1,watchMode:t=!0,style:o,className:s,onComplete:r,actionsChildren:n,...c})=>{let a=Ce(),{getClient:p,iframe:d,listen:u,sandpack:f}=vt(),[b,g]=Ba({...Oa,verbose:e,watchMode:t});Qs(()=>{let v=[],$="";return u(S=>{if(!(b.suiteOnly&&("path"in S&&S.path!==f.activeFile||"test"in S&&"path"in S.test&&S.test.path!==f.activeFile))){if(S.type==="action"&&S.action==="clear-errors"&&S.source==="jest"){$=S.path;return}if(S.type==="test"){if(S.event==="initialize_tests")return v=[],$="",b.watchMode?y():g(k=>({...k,status:"idle",specs:{}}));if(S.event==="test_count")return g(k=>({...k,specsCount:S.count}));if(S.event==="total_test_start")return v=[],g(k=>({...k,status:"running"}));if(S.event==="total_test_end")return g(k=>(r!==void 0&&r(k.specs),{...k,status:"complete"}));if(S.event==="add_file")return g(ae(["specs",S.path],{describes:{},tests:{},name:S.path}));if(S.event==="remove_file")return g(k=>{let I=Object.entries(k.specs).reduce((M,[O,G])=>O===S.path?M:{...M,[O]:G},{});return{...k,specs:I}});if(S.event==="file_error")return g(ae(["specs",S.path,"error"],S.error));if(S.event==="describe_start"){v.push(S.blockName);let[k,I]=We(v),M=$;return I===void 0?void 0:g(ae(["specs",M,"describes",...Ne(k,O=>[O,"describes"]),I],{name:S.blockName,tests:{},describes:{}}))}if(S.event==="describe_end"){v.pop();return}if(S.event==="add_test"){let[k,I]=We(v),M={status:"idle",errors:[],name:S.testName,blocks:[...v],path:S.path};return g(I===void 0?ae(["specs",S.path,"tests",S.testName],M):ae(["specs",S.path,"describes",...Ne(k,O=>[O,"describes"]),I,"tests",S.testName],M))}if(S.event==="test_start"){let{test:k}=S,[I,M]=We(k.blocks),O={status:"running",name:k.name,blocks:k.blocks,path:k.path,errors:[]};return g(M===void 0?ae(["specs",k.path,"tests",k.name],O):ae(["specs",k.path,"describes",...Ne(I,G=>[G,"describes"]),M,"tests",k.name],O))}if(S.event==="test_end"){let{test:k}=S,[I,M]=We(k.blocks),O={status:k.status,errors:k.errors,duration:k.duration,name:k.name,blocks:k.blocks,path:k.path};return g(M===void 0?ae(["specs",k.path,"tests",k.name],O):ae(["specs",k.path,"describes",...Ne(I,G=>[G,"describes"]),M,"tests",k.name],O))}}}})},[b.suiteOnly,b.watchMode,f.activeFile]);let y=()=>{g($=>({...$,status:"running",specs:{}}));let v=p();v&&v.dispatch({type:"run-all-tests"})},R=()=>{g($=>({...$,status:"running",specs:{}}));let v=p();v&&v.dispatch({type:"run-tests",path:f.activeFile})},N=/.*\.(test|spec)\.[tj]sx?$/,F=f.activeFile.match(N)!==null;Qs(function(){return u(({type:q})=>{q==="done"&&b.watchMode&&(F?R():y())})},[R,y,b.watchMode,F]);let X=v=>{f.setActiveFile(v)},E=Object.values(b.specs),_=Zs(E),B=Ws(E),j=Gs(E);return V(Y,{className:l(`${h}-tests`,s),style:{...js(a.themeMode==="dark"),...o},...c},V("iframe",{ref:d,style:{display:"none"},title:"Sandpack Tests"}),V(Hs,{setSuiteOnly:()=>g(v=>({...v,suiteOnly:!v.suiteOnly})),setVerbose:()=>g(v=>({...v,verbose:!v.verbose})),setWatchMode:()=>{g(v=>({...v,watchMode:!v.watchMode}))},showSuitesOnly:b.specsCount>1,status:b.status,suiteOnly:b.suiteOnly,verbose:b.verbose,watchMode:b.watchMode}),b.status==="running"||b.status==="initialising"?V(xt,{showOpenInCodeSandbox:!1}):V("div",{className:Ia.toString()},n,V(Bs,{onClick:b.suiteOnly?R:y})),V("div",{className:l(Da)},E.length===0&&b.status==="complete"?V("div",{className:l(Ha)},V("p",null,"No test files found."),V("p",null,"Test match:"," ",V("span",{className:l(H)},N.toString()))):V(_a,null,V(Ys,{openSpec:X,specs:E,status:b.status,verbose:b.verbose}),b.status==="complete"&&B.total>0&&V(Ks,{duration:_,suites:j,tests:B}))))},Da=m({padding:"$space$4",height:"100%",overflow:"auto",display:"flex",flexDirection:"column",position:"relative",fontFamily:"$font$mono"}),Ha=m({fontWeight:"bold",color:"$colors$base"});import{Fragment as Ka,createElement as fe,useEffect as qa,useRef as Ja}from"react";import{useClasser as ja}from"@code-hike/classer";import er from"react";var tr=({onClick:e})=>{let t=ja("sp");return er.createElement("button",{className:l(t("button","icon-standalone"),T,ee,z,m({position:"absolute",bottom:"$space$2",right:"$space$2"})),onClick:e},er.createElement(Fo,null))};import uo from"react";var or=()=>uo.createElement("div",{className:l(m({borderBottom:"1px solid $colors$surface2",padding:"$space$3 $space$2",height:"$layout$headerHeight"}))},uo.createElement("p",{className:l(m({lineHeight:1,margin:0,color:"$colors$base",fontSize:"$font$size",display:"flex",alignItems:"center",gap:"$space$2"}))},uo.createElement(Se,null),"Console"));import{useEffect as za,useState as Ua}from"react";var sr=["SyntaxError: ","Error in sandbox:"],rr={id:"random",method:"clear",data:["Console was cleared"]},fo="@t",ho="@r",go=1e4,bo=2,Pt=400,yo=Pt*2;var So=e=>{var c,a;let[t,o]=Ua([]),{listen:s}=x(),r=(c=e==null?void 0:e.showSyntaxError)!=null?c:!1,n=(a=e==null?void 0:e.maxMessageCount)!=null?a:yo;return za(()=>s(d=>{if(d.type==="console"&&d.codesandbox){if(d.log.find(({method:f})=>f==="clear"))return o([rr]);let u=r?d.log:d.log.filter(f=>f.data.filter(g=>typeof g!="string"?!0:sr.filter(R=>g.startsWith(R)).length===0).length>0);if(!u)return;o(f=>{let b=[...f,...u].filter((g,y,R)=>y===R.findIndex(N=>N.id===g.id));for(;b.length>yo;)b.shift();return b})}},e==null?void 0:e.clientId),[s,n,e,r]),{logs:t,reset:()=>o([])}};var vo=function(){return(0,eval)("this")}(),Va=typeof ArrayBuffer=="function",Xa=typeof Map=="function",Wa=typeof Set=="function",Ze;(function(s){s[s.infinity=0]="infinity",s[s.minusInfinity=1]="minusInfinity",s[s.minusZero=2]="minusZero"})(Ze||(Ze={}));var nr={Arithmetic:e=>e===0?1/0:e===1?-1/0:e===2?-0:e,HTMLElement:e=>{let t=document.implementation.createHTMLDocument("sandbox");try{let o=t.createElement(e.tagName);o.innerHTML=e.innerHTML;for(let s of Object.keys(e.attributes))try{o.setAttribute(s,e.attributes[s])}catch{}return o}catch(o){return e}},Function:e=>{let t=()=>{};return Object.defineProperty(t,"toString",{value:()=>`function ${e.name}() {${e.body}}`}),t},"[[NaN]]":()=>NaN,"[[undefined]]":()=>{},"[[Date]]":e=>{let t=new Date;return t.setTime(e),t},"[[RegExp]]":e=>new RegExp(e.src,e.flags),"[[Error]]":e=>{let t=vo[e.name]||Error,o=new t(e.message);return o.stack=e.stack,o},"[[ArrayBuffer]]":e=>{if(Va){let t=new ArrayBuffer(e.length);return new Int8Array(t).set(e),t}return e},"[[TypedArray]]":e=>typeof vo[e.ctorName]=="function"?new vo[e.ctorName](e.arr):e.arr,"[[Map]]":e=>{if(Xa){let o=new Map;for(let s=0;s<e.length;s+=2)o.set(e[s],e[s+1]);return o}let t=[];for(let o=0;o<e.length;o+=2)t.push([e[i],e[i+1]]);return t},"[[Set]]":e=>{if(Wa){let t=new Set;for(let o=0;o<e.length;o++)t.add(e[o]);return t}return e}};var ar=e=>{if(typeof e=="string"||typeof e=="number"||e===null)return e;if(Array.isArray(e))return e.map(ar);if(typeof e=="object"&&fo in e){let t=e[fo];return nr[t](e.data)}return e},Ga=(e,t,o)=>`[${e.reduce((r,n,c)=>`${r}${c?", ":""}${Ye(n,t,o)}`,"")}]`,Za=(e,t,o)=>{let s=e.constructor.name!=="Object"?`${e.constructor.name} `:"";if(o>bo)return s;let r=Object.entries(e),n=Object.entries(e).reduce((c,[a,p],d)=>{let u=d===0?"":", ",f=r.length>10?`
+   `:"",b=Ye(p,t,o);return d===Pt?c+f+"...":d>Pt?c:c+`${u}${f}${a}: `+b},"");return`${s}{ ${n}${r.length>10?`
diff --git a/beta/patches/@lezer+javascript+0.15.2.patch b/beta/patches/@lezer+javascript+0.15.2.patch
new file mode 100644
index 000000000..c7ecd94c4
--- /dev/null
+++ b/beta/patches/@lezer+javascript+0.15.2.patch
@@ -0,0 +1,345 @@
+diff --git a/node_modules/@lezer/javascript/dist/index.cjs b/node_modules/@lezer/javascript/dist/index.cjs
+index 2d4ede8..622851f 100644
+--- a/node_modules/@lezer/javascript/dist/index.cjs
++++ b/node_modules/@lezer/javascript/dist/index.cjs
+@@ -6,16 +6,16 @@ var lr = require('@lezer/lr');
+ var common = require('@lezer/common');
+ 
+ // This file was generated by lezer-generator. You probably shouldn't edit it.
+-const noSemi = 275,
++const noSemi = 277,
+   incdec = 1,
+   incdecPrefix = 2,
+-  templateContent = 276,
+-  templateDollarBrace = 277,
+-  templateEnd = 278,
+-  insertSemi = 279,
++  templateContent = 278,
++  templateDollarBrace = 279,
++  templateEnd = 280,
++  insertSemi = 281,
+   TSExtends = 3,
+-  spaces = 281,
+-  newline = 282,
++  spaces = 283,
++  newline = 284,
+   LineComment = 4,
+   BlockComment = 5,
+   Dialect_ts = 1;
+@@ -95,31 +95,31 @@ function tsExtends(value, stack) {
+ }
+ 
+ // This file was generated by lezer-generator. You probably shouldn't edit it.
+-const spec_identifier = {__proto__:null,export:16, as:21, from:25, default:30, async:35, function:36, this:46, true:54, false:54, void:60, typeof:64, null:78, super:80, new:114, await:131, yield:133, delete:134, class:144, extends:146, public:189, private:189, protected:189, readonly:191, instanceof:212, in:214, const:216, import:248, keyof:299, unique:303, infer:309, is:343, abstract:363, implements:365, type:367, let:370, var:372, interface:379, enum:383, namespace:389, module:391, declare:395, global:399, for:420, of:429, while:432, with:436, do:440, if:444, else:446, switch:450, case:456, try:462, catch:464, finally:466, return:470, throw:474, break:478, continue:482, debugger:486};
+-const spec_word = {__proto__:null,async:101, get:103, set:105, public:153, private:153, protected:153, static:155, abstract:157, override:159, readonly:165, new:347};
++const spec_identifier = {__proto__:null,export:16, as:21, from:25, default:30, async:35, function:36, this:46, true:54, false:54, void:60, typeof:64, null:78, super:80, new:114, await:131, yield:133, delete:134, class:144, extends:146, public:189, private:189, protected:189, readonly:191, instanceof:212, in:214, const:216, import:248, keyof:303, unique:307, infer:313, is:347, abstract:367, implements:369, type:371, let:374, var:376, interface:383, enum:387, namespace:393, module:395, declare:399, global:403, for:424, of:433, while:436, with:440, do:444, if:448, else:450, switch:454, case:460, try:466, catch:468, finally:470, return:474, throw:478, break:482, continue:486, debugger:490};
++const spec_word = {__proto__:null,async:101, get:103, set:105, public:153, private:153, protected:153, static:155, abstract:157, override:159, readonly:165, new:351};
+ const spec_LessThan = {__proto__:null,"<":121};
+ const parser = lr.LRParser.deserialize({
+   version: 13,
+-  states: "$1WO`QYOOO'QQ!LdO'#CgO'XOSO'#DSO)dQYO'#DXO)tQYO'#DdO){QYO'#DnO-xQYO'#DtOOQO'#EX'#EXO.]QWO'#EWO.bQWO'#EWOOQ!LS'#Eb'#EbO0aQ!LdO'#IqO2wQ!LdO'#IrO3eQWO'#EvO3jQpO'#F]OOQ!LS'#FO'#FOO3rO!bO'#FOO4QQWO'#FdO5_QWO'#FcOOQ!LS'#Ir'#IrOOQ!LQ'#Iq'#IqOOQQ'#J['#J[O5dQWO'#HjO5iQ!LYO'#HkOOQQ'#Ic'#IcOOQQ'#Hl'#HlQ`QYOOO){QYO'#DfO5qQWO'#GWO5vQ#tO'#ClO6UQWO'#EVO6aQWO'#EcO6fQ#tO'#E}O7QQWO'#GWO7VQWO'#G[O7bQWO'#G[O7pQWO'#G_O7pQWO'#G`O7pQWO'#GbO5qQWO'#GeO8aQWO'#GhO9oQWO'#CcO:PQWO'#GuO:XQWO'#G{O:XQWO'#G}O`QYO'#HPO:XQWO'#HRO:XQWO'#HUO:^QWO'#H[O:cQ!LZO'#H`O){QYO'#HbO:nQ!LZO'#HdO:yQ!LZO'#HfO5iQ!LYO'#HhO){QYO'#IsOOOS'#Hn'#HnO;UOSO,59nOOQ!LS,59n,59nO=gQbO'#CgO=qQYO'#HoO>OQWO'#ItO?}QbO'#ItO'dQYO'#ItO@UQWO,59sO@lQ&jO'#D^OAeQWO'#EXOArQWO'#JPOA}QWO'#JOOBVQWO,5:uOB[QWO'#I}OBcQWO'#DuO5vQ#tO'#EVOBqQWO'#EVOB|Q`O'#E}OOQ!LS,5:O,5:OOCUQYO,5:OOESQ!LdO,5:YOEpQWO,5:`OFZQ!LYO'#I|O7VQWO'#I{OFbQWO'#I{OFjQWO,5:tOFoQWO'#I{OF}QYO,5:rOH}QWO'#ESOJXQWO,5:rOKhQWO'#DhOKoQYO'#DmOKyQ&jO,5:{O){QYO,5:{OOQQ'#En'#EnOOQQ'#Ep'#EpO){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}OOQQ'#Et'#EtOLRQYO,5;_OOQ!LS,5;d,5;dOOQ!LS,5;e,5;eONRQWO,5;eOOQ!LS,5;f,5;fO){QYO'#HyONWQ!LYO,5<PONrQWO,5:}O){QYO,5;bO! [QpO'#JTONyQpO'#JTO! cQpO'#JTO! tQpO,5;mOOOO,5;w,5;wO!!SQYO'#F_OOOO'#Hx'#HxO3rO!bO,5;jO!!ZQpO'#FaOOQ!LS,5;j,5;jO!!wQ,UO'#CqOOQ!LS'#Ct'#CtO!#[QWO'#CtO!#aOSO'#CxO!#}Q#tO,5;|O!$UQWO,5<OO!%bQWO'#FnO!%oQWO'#FoO!%tQWO'#FsO!&vQ&jO'#FwO!'iQ,UO'#IlOOQ!LS'#Il'#IlO!'sQWO'#IkO!(RQWO'#IjOOQ!LS'#Cr'#CrOOQ!LS'#Cy'#CyO!(ZQWO'#C{OJ^QWO'#FfOJ^QWO'#FhO!(`QWO'#FjO!(eQWO'#FkO!(jQWO'#FqOJ^QWO'#FvO!(oQWO'#EYO!)WQWO,5;}O`QYO,5>UOOQQ'#If'#IfOOQQ,5>V,5>VOOQQ-E;j-E;jO!+SQ!LdO,5:QOOQ!LQ'#Co'#CoO!+sQ#tO,5<rOOQO'#Ce'#CeO!,UQWO'#CpO!,^Q!LYO'#IgO5_QWO'#IgO:^QWO,59WO!,lQpO,59WO!,tQ#tO,59WO5vQ#tO,59WO!-PQWO,5:rO!-XQWO'#GtO!-dQWO'#J`O){QYO,5;gO!-lQ&jO,5;iO!-qQWO,5=_O!-vQWO,5=_O!-{QWO,5=_O5iQ!LYO,5=_O5qQWO,5<rO!.ZQWO'#EZO!.lQ&jO'#E[OOQ!LQ'#I}'#I}O!.}Q!LYO'#J]O5iQ!LYO,5<vO7pQWO,5<|OOQO'#Cq'#CqO!/YQpO,5<yO!/bQ#tO,5<zO!/mQWO,5<|O!/rQ`O,5=PO:^QWO'#GjO5qQWO'#GlO!/zQWO'#GlO5vQ#tO'#GoO!0PQWO'#GoOOQQ,5=S,5=SO!0UQWO'#GpO!0^QWO'#ClO!0cQWO,58}O!0mQWO,58}O!2oQYO,58}OOQQ,58},58}O!2|Q!LYO,58}O){QYO,58}O!3XQYO'#GwOOQQ'#Gx'#GxOOQQ'#Gy'#GyO`QYO,5=aO!3iQWO,5=aO){QYO'#DtO`QYO,5=gO`QYO,5=iO!3nQWO,5=kO`QYO,5=mO!3sQWO,5=pO!3xQYO,5=vOOQQ,5=z,5=zO){QYO,5=zO5iQ!LYO,5=|OOQQ,5>O,5>OO!7yQWO,5>OOOQQ,5>Q,5>QO!7yQWO,5>QOOQQ,5>S,5>SO!8OQ`O,5?_OOOS-E;l-E;lOOQ!LS1G/Y1G/YO!8TQbO,5>ZO){QYO,5>ZOOQO-E;m-E;mO!8_QWO,5?`O!8gQbO,5?`O!8nQWO,5?jOOQ!LS1G/_1G/_O!8vQpO'#DQOOQO'#Iv'#IvO){QYO'#IvO!9eQpO'#IvO!:SQpO'#D_O!:eQ&jO'#D_O!<pQYO'#D_O!<wQWO'#IuO!=PQWO,59xO!=UQWO'#E]O!=dQWO'#JQO!=lQWO,5:vO!>SQ&jO'#D_O){QYO,5?kO!>^QWO'#HtO!8nQWO,5?jOOQ!LQ1G0a1G0aO!?jQ&jO'#DxOOQ!LS,5:a,5:aO){QYO,5:aOH}QWO,5:aO!?qQWO,5:aO:^QWO,5:qO!,lQpO,5:qO!,tQ#tO,5:qO5vQ#tO,5:qOOQ!LS1G/j1G/jOOQ!LS1G/z1G/zOOQ!LQ'#ER'#ERO){QYO,5?hO!?|Q!LYO,5?hO!@_Q!LYO,5?hO!@fQWO,5?gO!@nQWO'#HvO!@fQWO,5?gOOQ!LQ1G0`1G0`O7VQWO,5?gOOQ!LS1G0^1G0^O!AYQ!LdO1G0^O!AyQ!LbO,5:nOOQ!LS'#Fm'#FmO!BgQ!LdO'#IlOF}QYO1G0^O!DfQ#tO'#IwO!DpQWO,5:SO!DuQbO'#IxO){QYO'#IxO!EPQWO,5:XOOQ!LS'#DQ'#DQOOQ!LS1G0g1G0gO!EUQWO1G0gO!GgQ!LdO1G0iO!GnQ!LdO1G0iO!JRQ!LdO1G0iO!JYQ!LdO1G0iO!LaQ!LdO1G0iO!LtQ!LdO1G0iO# eQ!LdO1G0iO# lQ!LdO1G0iO#$PQ!LdO1G0iO#$WQ!LdO1G0iO#%{Q!LdO1G0iO#(uQ7^O'#CgO#*pQ7^O1G0yO#,kQ7^O'#IrOOQ!LS1G1P1G1PO#-OQ!LdO,5>eOOQ!LQ-E;w-E;wO#-oQ!LdO1G0iOOQ!LS1G0i1G0iO#/qQ!LdO1G0|O#0bQpO,5;oO#0gQpO,5;pO#0lQpO'#FWO#1QQWO'#FVOOQO'#JU'#JUOOQO'#Hw'#HwO#1VQpO1G1XOOQ!LS1G1X1G1XOOOO1G1b1G1bO#1eQ7^O'#IqO#1oQWO,5;yOLRQYO,5;yOOOO-E;v-E;vOOQ!LS1G1U1G1UOOQ!LS,5;{,5;{O#1tQpO,5;{OOQ!LS,59`,59`OH}QWO'#InOOOS'#Hm'#HmO#1yOSO,59dOOQ!LS,59d,59dO){QYO1G1hO!(eQWO'#H{O#2UQWO,5<aOOQ!LS,5<^,5<^OOQO'#GR'#GROJ^QWO,5<lOOQO'#GT'#GTOJ^QWO,5<nOJ^QWO,5<pOOQO1G1j1G1jO#2aQ`O'#CoO#2tQ`O,5<YO#2{QWO'#JXO5qQWO'#JXO#3ZQWO,5<[OJ^QWO,5<ZO#3`Q`O'#FmO#3mQ`O'#JYO#3wQWO'#JYOH}QWO'#JYO#3|QWO,5<_OOQ!LQ'#Dc'#DcO#4RQWO'#FpO#4^QpO'#FxO!&qQ&jO'#FxO!&qQ&jO'#FzO#4oQWO'#F{O!(jQWO'#GOOOQO'#H}'#H}O#4tQ&jO,5<cOOQ!LS,5<c,5<cO#4{Q&jO'#FxO#5ZQ&jO'#FyO#5cQ&jO'#FyOOQ!LS,5<q,5<qOJ^QWO,5?VOJ^QWO,5?VO#5hQWO'#IOO#5sQWO,5?UOOQ!LS'#Cg'#CgO#6gQ#tO,59gOOQ!LS,59g,59gO#7YQ#tO,5<QO#7{Q#tO,5<SO#8VQWO,5<UOOQ!LS,5<V,5<VO#8[QWO,5<]O#8aQ#tO,5<bOF}QYO1G1iO#8qQWO1G1iOOQQ1G3p1G3pOOQ!LS1G/l1G/lONRQWO1G/lOOQQ1G2^1G2^OH}QWO1G2^O){QYO1G2^OH}QWO1G2^O#8vQWO1G2^O#9UQWO,59[O#:_QWO'#ESOOQ!LQ,5?R,5?RO#:iQ!LYO,5?ROOQQ1G.r1G.rO:^QWO1G.rO!,lQpO1G.rO!,tQ#tO1G.rO#:wQWO1G0^O#:|QWO'#CgO#;XQWO'#JaO#;aQWO,5=`O#;fQWO'#JaO#;kQWO'#JaO#;pQWO'#IWO#<OQWO,5?zO#<WQbO1G1ROOQ!LS1G1T1G1TO5qQWO1G2yO#<_QWO1G2yO#<dQWO1G2yO#<iQWO1G2yOOQQ1G2y1G2yO#<nQ#tO1G2^O7VQWO'#JOO7VQWO'#E]O7VQWO'#IQO#=PQ!LYO,5?wOOQQ1G2b1G2bO!/mQWO1G2hOH}QWO1G2eO#=[QWO1G2eOOQQ1G2f1G2fOH}QWO1G2fO#=aQWO1G2fO#=iQ&jO'#GdOOQQ1G2h1G2hO!&qQ&jO'#ISO!/rQ`O1G2kOOQQ1G2k1G2kOOQQ,5=U,5=UO#=qQ#tO,5=WO5qQWO,5=WO#4oQWO,5=ZO5_QWO,5=ZO!,lQpO,5=ZO!,tQ#tO,5=ZO5vQ#tO,5=ZO#>SQWO'#J_O#>_QWO,5=[OOQQ1G.i1G.iO#>dQ!LYO1G.iO#>oQWO1G.iO!(ZQWO1G.iO5iQ!LYO1G.iO#>tQbO,5?|O#?OQWO,5?|O#?ZQYO,5=cO#?bQWO,5=cO7VQWO,5?|OOQQ1G2{1G2{O`QYO1G2{OOQQ1G3R1G3ROOQQ1G3T1G3TO:XQWO1G3VO#?gQYO1G3XO#CbQYO'#HWOOQQ1G3[1G3[O:^QWO1G3bO#CoQWO1G3bO5iQ!LYO1G3fOOQQ1G3h1G3hOOQ!LQ'#Ft'#FtO5iQ!LYO1G3jO5iQ!LYO1G3lOOOS1G4y1G4yO#CwQ`O,5<PO#DPQbO1G3uO#DZQWO1G4zO#DcQWO1G5UO#DkQWO,5?bOLRQYO,5:wO7VQWO,5:wO:^QWO,59yOLRQYO,59yO!,lQpO,59yO#DpQ7^O,59yOOQO,5:w,5:wO#DzQ&jO'#HpO#EbQWO,5?aOOQ!LS1G/d1G/dO#EjQ&jO'#HuO#FOQWO,5?lOOQ!LQ1G0b1G0bO!:eQ&jO,59yO#FWQbO1G5VOOQO,5>`,5>`O7VQWO,5>`OOQO-E;r-E;rOOQ!LQ'#EO'#EOO#FbQ!LrO'#EPO!?bQ&jO'#DyOOQO'#Hs'#HsO#F|Q&jO,5:dOOQ!LS,5:d,5:dO#GTQ&jO'#DyO#GfQ&jO'#DyO#GmQ&jO'#EUO#GpQ&jO'#EPO#G}Q&jO'#EPO!?bQ&jO'#EPO#HbQWO1G/{O#HgQ`O1G/{OOQ!LS1G/{1G/{O){QYO1G/{OH}QWO1G/{OOQ!LS1G0]1G0]O:^QWO1G0]O!,lQpO1G0]O!,tQ#tO1G0]O#HnQ!LdO1G5SO){QYO1G5SO#IOQ!LYO1G5SO#IaQWO1G5RO7VQWO,5>bOOQO,5>b,5>bO#IiQWO,5>bOOQO-E;t-E;tO#IaQWO1G5RO#IwQ!LdO,59gO#KvQ!LdO,5<QO#MxQ!LdO,5<SO$ zQ!LdO,5<bOOQ!LS7+%x7+%xO$$SQ!LdO7+%xO$$sQWO'#HqO$$}QWO,5?cOOQ!LS1G/n1G/nO$%VQYO'#HrO$%dQWO,5?dO$%lQbO,5?dOOQ!LS1G/s1G/sOOQ!LS7+&R7+&RO$%vQ7^O,5:YO){QYO7+&eO$&QQ7^O,5:QOOQO1G1Z1G1ZOOQO1G1[1G1[O$&_QMhO,5;rOLRQYO,5;qOOQO-E;u-E;uOOQ!LS7+&s7+&sOOOO7+&|7+&|OOOO1G1e1G1eO$&jQWO1G1eOOQ!LS1G1g1G1gO$&oQ`O,5?YOOOS-E;k-E;kOOQ!LS1G/O1G/OO$&vQ!LdO7+'SOOQ!LS,5>g,5>gO$'gQWO,5>gOOQ!LS1G1{1G1{P$'lQWO'#H{POQ!LS-E;y-E;yO$(]Q#tO1G2WO$)OQ#tO1G2YO$)YQ#tO1G2[OOQ!LS1G1t1G1tO$)aQWO'#HzO$)oQWO,5?sO$)oQWO,5?sO$)wQWO,5?sO$*SQWO,5?sOOQO1G1v1G1vO$*bQ#tO1G1uO$*rQWO'#H|O$+SQWO,5?tOH}QWO,5?tO$+[Q`O,5?tOOQ!LS1G1y1G1yO5iQ!LYO,5<dO5iQ!LYO,5<eO$+fQWO,5<eO#4jQWO,5<eO!,lQpO,5<dO$+kQWO,5<fO5iQ!LYO,5<gO$+fQWO,5<jOOQO-E;{-E;{OOQ!LS1G1}1G1}O!&qQ&jO,5<dO$+sQWO,5<eO!&qQ&jO,5<fO!&qQ&jO,5<eO$,OQ#tO1G4qO$,YQ#tO1G4qOOQO,5>j,5>jOOQO-E;|-E;|O!-lQ&jO,59iO){QYO,59iO$,gQWO1G1pOJ^QWO1G1wO$,lQ!LdO7+'TOOQ!LS7+'T7+'TOF}QYO7+'TOOQ!LS7+%W7+%WO$-]Q`O'#JZO#HbQWO7+'xO$-gQWO7+'xO$-oQ`O7+'xOOQQ7+'x7+'xOH}QWO7+'xO){QYO7+'xOH}QWO7+'xOOQO1G.v1G.vO$-yQ!LbO'#CgO$.ZQ!LbO,5<hO$.xQWO,5<hOOQ!LQ1G4m1G4mOOQQ7+$^7+$^O:^QWO7+$^O!,lQpO7+$^OF}QYO7+%xO$.}QWO'#IVO$/]QWO,5?{OOQO1G2z1G2zO5qQWO,5?{O$/]QWO,5?{O$/eQWO,5?{OOQO,5>r,5>rOOQO-E<U-E<UOOQ!LS7+&m7+&mO$/jQWO7+(eO5iQ!LYO7+(eO5qQWO7+(eO$/oQWO7+(eO$/tQWO7+'xOOQ!LQ,5>l,5>lOOQ!LQ-E<O-E<OOOQQ7+(S7+(SO$0SQ!LbO7+(POH}QWO7+(PO$0^Q`O7+(QOOQQ7+(Q7+(QOH}QWO7+(QO$0eQWO'#J^O$0pQWO,5=OOOQO,5>n,5>nOOQO-E<Q-E<QOOQQ7+(V7+(VO$1jQ&jO'#GmOOQQ1G2r1G2rOH}QWO1G2rO){QYO1G2rOH}QWO1G2rO$1qQWO1G2rO$2PQ#tO1G2rO5iQ!LYO1G2uO#4oQWO1G2uO5_QWO1G2uO!,lQpO1G2uO!,tQ#tO1G2uO$2bQWO'#IUO$2mQWO,5?yO$2uQ&jO,5?yOOQ!LQ1G2v1G2vOOQQ7+$T7+$TO$2zQWO7+$TO5iQ!LYO7+$TO$3PQWO7+$TO){QYO1G5hO){QYO1G5iO$3UQYO1G2}O$3]QWO1G2}O$3bQYO1G2}O$3iQ!LYO1G5hOOQQ7+(g7+(gO5iQ!LYO7+(qO`QYO7+(sOOQQ'#Jd'#JdOOQQ'#IX'#IXO$3sQYO,5=rOOQQ,5=r,5=rO){QYO'#HXO$4QQWO'#HZOOQQ7+(|7+(|O$4VQYO7+(|O7VQWO7+(|OOQQ7+)Q7+)QOOQQ7+)U7+)UOOQQ7+)W7+)WOOQO1G4|1G4|O$8TQ7^O1G0cO$8_QWO1G0cOOQO1G/e1G/eO$8jQ7^O1G/eO:^QWO1G/eOLRQYO'#D_OOQO,5>[,5>[OOQO-E;n-E;nOOQO,5>a,5>aOOQO-E;s-E;sO!,lQpO1G/eOOQO1G3z1G3zO:^QWO,5:eOOQO,5:k,5:kO){QYO,5:kO$8tQ!LYO,5:kO$9PQ!LYO,5:kO!,lQpO,5:eOOQO-E;q-E;qOOQ!LS1G0O1G0OO!?bQ&jO,5:eO$9_Q&jO,5:eO$9pQ!LrO,5:kO$:[Q&jO,5:eO!?bQ&jO,5:kOOQO,5:p,5:pO$:cQ&jO,5:kO$:pQ!LYO,5:kOOQ!LS7+%g7+%gO#HbQWO7+%gO#HgQ`O7+%gOOQ!LS7+%w7+%wO:^QWO7+%wO!,lQpO7+%wO$;UQ!LdO7+*nO){QYO7+*nOOQO1G3|1G3|O7VQWO1G3|O$;fQWO7+*mO$;nQ!LdO1G2WO$=pQ!LdO1G2YO$?rQ!LdO1G1uO$AzQ#tO,5>]OOQO-E;o-E;oO$BUQbO,5>^O){QYO,5>^OOQO-E;p-E;pO$B`QWO1G5OO$BhQ7^O1G0^O$DoQ7^O1G0iO$DvQ7^O1G0iO$FwQ7^O1G0iO$GOQ7^O1G0iO$HsQ7^O1G0iO$IWQ7^O1G0iO$KeQ7^O1G0iO$KlQ7^O1G0iO$MmQ7^O1G0iO$MtQ7^O1G0iO% iQ7^O1G0iO% |Q!LdO<<JPO%!mQ7^O1G0iO%$]Q7^O'#IlO%&YQ7^O1G0|OLRQYO'#FYOOQO'#JV'#JVOOQO1G1^1G1^O%&gQWO1G1]O%&lQ7^O,5>eOOOO7+'P7+'POOOS1G4t1G4tOOQ!LS1G4R1G4ROJ^QWO7+'vO%&vQWO,5>fO5qQWO,5>fOOQO-E;x-E;xO%'UQWO1G5_O%'UQWO1G5_O%'^QWO1G5_O%'iQ`O,5>hO%'sQWO,5>hOH}QWO,5>hOOQO-E;z-E;zO%'xQ`O1G5`O%(SQWO1G5`OOQO1G2O1G2OOOQO1G2P1G2PO5iQ!LYO1G2PO$+fQWO1G2PO5iQ!LYO1G2OO%([QWO1G2QOH}QWO1G2QOOQO1G2R1G2RO5iQ!LYO1G2UO!,lQpO1G2OO#4jQWO1G2PO%(aQWO1G2QO%(iQWO1G2POJ^QWO7+*]OOQ!LS1G/T1G/TO%(tQWO1G/TOOQ!LS7+'[7+'[O%(yQ#tO7+'cO%)ZQ!LdO<<JoOOQ!LS<<Jo<<JoOH}QWO'#IPO%)zQWO,5?uOOQQ<<Kd<<KdOH}QWO<<KdO#HbQWO<<KdO%*SQWO<<KdO%*[Q`O<<KdOH}QWO1G2SOOQQ<<Gx<<GxO:^QWO<<GxO%*fQ!LdO<<IdOOQ!LS<<Id<<IdOOQO,5>q,5>qO%+VQWO,5>qO#;kQWO,5>qOOQO-E<T-E<TO%+[QWO1G5gO%+[QWO1G5gO5qQWO1G5gO%+dQWO<<LPOOQQ<<LP<<LPO%+iQWO<<LPO5iQ!LYO<<LPO){QYO<<KdOH}QWO<<KdOOQQ<<Kk<<KkO$0SQ!LbO<<KkOOQQ<<Kl<<KlO$0^Q`O<<KlO%+nQ&jO'#IRO%+yQWO,5?xOLRQYO,5?xOOQQ1G2j1G2jO#FbQ!LrO'#EPO!?bQ&jO'#GnOOQO'#IT'#ITO%,RQ&jO,5=XOOQQ,5=X,5=XO%,YQ&jO'#EPO%,eQ&jO'#EPO%,|Q&jO'#EPO%-WQ&jO'#GnO%-iQWO7+(^O%-nQWO7+(^O%-vQ`O7+(^OOQQ7+(^7+(^OH}QWO7+(^O){QYO7+(^OH}QWO7+(^O%.QQWO7+(^OOQQ7+(a7+(aO5iQ!LYO7+(aO#4oQWO7+(aO5_QWO7+(aO!,lQpO7+(aO%.`QWO,5>pOOQO-E<S-E<SOOQO'#Gq'#GqO%.kQWO1G5eO5iQ!LYO<<GoOOQQ<<Go<<GoO%.sQWO<<GoO%.xQWO7++SO%.}QWO7++TOOQQ7+(i7+(iO%/SQWO7+(iO%/XQYO7+(iO%/`QWO7+(iO){QYO7++SO){QYO7++TOOQQ<<L]<<L]OOQQ<<L_<<L_OOQQ-E<V-E<VOOQQ1G3^1G3^O%/eQWO,5=sOOQQ,5=u,5=uO:^QWO<<LhO%/jQWO<<LhOLRQYO7+%}OOQO7+%P7+%PO%/oQ7^O1G5VO:^QWO7+%POOQO1G0P1G0PO%/yQ!LdO1G0VOOQO1G0V1G0VO){QYO1G0VO%0TQ!LYO1G0VO:^QWO1G0PO!,lQpO1G0PO!?bQ&jO1G0PO%0`Q!LYO1G0VO%0nQ&jO1G0PO%1PQ!LYO1G0VO%1eQ!LrO1G0VO%1oQ&jO1G0PO!?bQ&jO1G0VOOQ!LS<<IR<<IROOQ!LS<<Ic<<IcO:^QWO<<IcO%1vQ!LdO<<NYOOQO7+)h7+)hO%2WQ!LdO7+'cO%4`QbO1G3xO%4jQ7^O7+%xO%4wQ7^O,59gO%6tQ7^O,5<QO%8qQ7^O,5<SO%:nQ7^O,5<bO%<^Q7^O7+'SO%<kQ7^O7+'TO%<xQWO,5;tOOQO7+&w7+&wO%<}Q#tO<<KbOOQO1G4Q1G4QO%=_QWO1G4QO%=jQWO1G4QO%=xQWO7+*yO%=xQWO7+*yOH}QWO1G4SO%>QQ`O1G4SO%>[QWO7+*zOOQO7+'k7+'kO5iQ!LYO7+'kOOQO7+'j7+'jO$+fQWO7+'lO%>dQ`O7+'lOOQO7+'p7+'pO5iQ!LYO7+'jO$+fQWO7+'kO%>kQWO7+'lOH}QWO7+'lO#4jQWO7+'kO%>pQ#tO<<MwOOQ!LS7+$o7+$oO%>zQ`O,5>kOOQO-E;}-E;}O#HbQWOANAOOOQQANAOANAOOH}QWOANAOO%?UQ!LbO7+'nOOQQAN=dAN=dO5qQWO1G4]OOQO1G4]1G4]O%?cQWO1G4]O%?hQWO7++RO%?hQWO7++RO5iQ!LYOANAkO%?pQWOANAkOOQQANAkANAkO%?uQWOANAOO%?}Q`OANAOOOQQANAVANAVOOQQANAWANAWO%@XQWO,5>mOOQO-E<P-E<PO%@dQ7^O1G5dO#4oQWO,5=YO5_QWO,5=YO!,lQpO,5=YOOQO-E<R-E<ROOQQ1G2s1G2sO$9pQ!LrO,5:kO!?bQ&jO,5=YO%@nQ&jO,5=YO%APQ&jO,5:kOOQQ<<Kx<<KxOH}QWO<<KxO%-iQWO<<KxO%AZQWO<<KxO%AcQ`O<<KxO){QYO<<KxOH}QWO<<KxOOQQ<<K{<<K{O5iQ!LYO<<K{O#4oQWO<<K{O5_QWO<<K{O%AmQ&jO1G4[O%ArQWO7++POOQQAN=ZAN=ZO5iQ!LYOAN=ZOOQQ<<Nn<<NnOOQQ<<No<<NoOOQQ<<LT<<LTO%AzQWO<<LTO%BPQYO<<LTO%BWQWO<<NnO%B]QWO<<NoOOQQ1G3_1G3_OOQQANBSANBSO:^QWOANBSO%BbQ7^O<<IiOOQO<<Hk<<HkOOQO7+%q7+%qO%/yQ!LdO7+%qO){QYO7+%qOOQO7+%k7+%kO:^QWO7+%kO!,lQpO7+%kO%BlQ!LYO7+%qO!?bQ&jO7+%kO%BwQ!LYO7+%qO%CVQ&jO7+%kO%ChQ!LYO7+%qOOQ!LSAN>}AN>}O%C|Q!LdO<<KbO%FUQ7^O<<JPO%FcQ7^O1G1uO%HRQ7^O1G2WO%JOQ7^O1G2YO%K{Q7^O<<JoO%LYQ7^O<<IdOOQO1G1`1G1`OOQO7+)l7+)lO%LgQWO7+)lO%LrQWO<<NeO%LzQ`O7+)nOOQO<<KV<<KVO5iQ!LYO<<KWO$+fQWO<<KWOOQO<<KU<<KUO5iQ!LYO<<KVO%MUQ`O<<KWO$+fQWO<<KVOOQQG26jG26jO#HbQWOG26jOOQO7+)w7+)wO5qQWO7+)wO%M]QWO<<NmOOQQG27VG27VO5iQ!LYOG27VOH}QWOG26jOLRQYO1G4XO%MeQWO7++OO5iQ!LYO1G2tO#4oQWO1G2tO5_QWO1G2tO!,lQpO1G2tO!?bQ&jO1G2tO%1eQ!LrO1G0VO%MmQ&jO1G2tO%-iQWOANAdOOQQANAdANAdOH}QWOANAdO%NOQWOANAdO%NWQ`OANAdOOQQANAgANAgO5iQ!LYOANAgO#4oQWOANAgOOQO'#Gr'#GrOOQO7+)v7+)vOOQQG22uG22uOOQQANAoANAoO%NbQWOANAoOOQQANDYANDYOOQQANDZANDZO%NgQYOG27nOOQO<<I]<<I]O%/yQ!LdO<<I]OOQO<<IV<<IVO:^QWO<<IVO){QYO<<I]O!,lQpO<<IVO&$eQ!LYO<<I]O!?bQ&jO<<IVO&$pQ!LYO<<I]O&%OQ7^O7+'cOOQO<<MW<<MWOOQOAN@rAN@rO5iQ!LYOAN@rOOQOAN@qAN@qO$+fQWOAN@rO5iQ!LYOAN@qOOQQLD,ULD,UOOQO<<Mc<<McOOQQLD,qLD,qO#HbQWOLD,UO&&nQ7^O7+)sOOQO7+(`7+(`O5iQ!LYO7+(`O#4oQWO7+(`O5_QWO7+(`O!,lQpO7+(`O!?bQ&jO7+(`OOQQG27OG27OO%-iQWOG27OOH}QWOG27OOOQQG27RG27RO5iQ!LYOG27ROOQQG27ZG27ZO:^QWOLD-YOOQOAN>wAN>wOOQOAN>qAN>qO%/yQ!LdOAN>wO:^QWOAN>qO){QYOAN>wO!,lQpOAN>qO&&xQ!LYOAN>wO&'TQ7^O<<KbOOQOG26^G26^O5iQ!LYOG26^OOQOG26]G26]OOQQ!$( p!$( pOOQO<<Kz<<KzO5iQ!LYO<<KzO#4oQWO<<KzO5_QWO<<KzO!,lQpO<<KzOOQQLD,jLD,jO%-iQWOLD,jOOQQLD,mLD,mOOQQ!$(!t!$(!tOOQOG24cG24cOOQOG24]G24]O%/yQ!LdOG24cO:^QWOG24]O){QYOG24cOOQOLD+xLD+xOOQOANAfANAfO5iQ!LYOANAfO#4oQWOANAfO5_QWOANAfOOQQ!$(!U!$(!UOOQOLD)}LD)}OOQOLD)wLD)wO%/yQ!LdOLD)}OOQOG27QG27QO5iQ!LYOG27QO#4oQWOG27QOOQO!$'Mi!$'MiOOQOLD,lLD,lO5iQ!LYOLD,lOOQO!$(!W!$(!WOLRQYO'#DnO&(sQbO'#IqOLRQYO'#DfO&(zQ!LdO'#CgO&)eQbO'#CgO&)uQYO,5:rOLRQYO,5:}OLRQYO,5:}OLRQYO,5:}OLRQYO,5:}OLRQYO,5:}OLRQYO,5:}OLRQYO,5:}OLRQYO,5:}OLRQYO,5:}OLRQYO,5:}OLRQYO,5:}OLRQYO'#HyO&+uQWO,5<PO&-XQWO,5:}OLRQYO,5;bO!(ZQWO'#C{O!(ZQWO'#C{OH}QWO'#FfO&+}QWO'#FfOH}QWO'#FhO&+}QWO'#FhOH}QWO'#FvO&+}QWO'#FvOLRQYO,5?kO&)uQYO1G0^O&-`Q7^O'#CgOLRQYO1G1hOH}QWO,5<lO&+}QWO,5<lOH}QWO,5<nO&+}QWO,5<nOH}QWO,5<ZO&+}QWO,5<ZO&)uQYO1G1iOLRQYO7+&eOH}QWO1G1wO&+}QWO1G1wO&)uQYO7+'TO&)uQYO7+%xOH}QWO7+'vO&+}QWO7+'vO&-jQWO'#EWO&-oQWO'#EWO&-wQWO'#EvO&-|QWO'#EcO&.RQWO'#JPO&.^QWO'#I}O&.iQWO,5:rO&.nQ#tO,5;|O&.uQWO'#FoO&.zQWO'#FoO&/PQWO,5;}O&/XQWO,5:rO&/aQ7^O1G0yO&/hQWO,5<]O&/mQWO,5<]O&/rQWO1G1iO&/wQWO1G0^O&/|Q#tO1G2[O&0TQ#tO1G2[O4QQWO'#FdO5_QWO'#FcOBqQWO'#EVOLRQYO,5;_O!(jQWO'#FqO!(jQWO'#FqOJ^QWO,5<pOJ^QWO,5<p",
+-  stateData: "&1Q~O'TOS'UOSSOSTOS~OPTOQTOWyO]cO^hOanObmOgcOiTOjcOkcOnTOpTOuROwcOxcOycO!PSO!ZkO!`UO!cTO!dTO!eTO!fTO!gTO!jlO#`sO#ppO#t^O${qO$}tO%PrO%QrO%TuO%VvO%YwO%ZwO%]xO%jzO%p{O%r|O%t}O%v!OO%y!PO&P!QO&T!RO&V!SO&X!TO&Z!UO&]!VO'WPO'aQO'mYO'zaO~OPZXYZX^ZXiZXrZXsZXuZX}ZX!]ZX!^ZX!`ZX!fZX!wZX#ScX#WZX#XZX#YZX#ZZX#[ZX#]ZX#^ZX#_ZX#aZX#cZX#eZX#fZX#kZX'RZX'aZX'nZX'uZX'vZX~O!X$hX~P$zO'O!XO'P!WO'Q!ZO~OPTOQTO]cOa!jOb!iOgcOiTOjcOkcOnTOpTOuROwcOxcOycO!P!bO!ZkO!`UO!cTO!dTO!eTO!fTO!gTO!j!hO#p!kO#t^O'W![O'aQO'mYO'zaO~O|!`O}!]Oz'hPz'rP~P'dO!O!lO~P`OPTOQTO]cOa!jOb!iOgcOiTOjcOkcOnTOpTOuROwcOxcOycO!P!bO!ZkO!`UO!cTO!dTO!eTO!fTO!gTO!j!hO#p!kO#t^O'W9VO'aQO'mYO'zaO~OPTOQTO]cOa!jOb!iOgcOiTOjcOkcOnTOpTOuROwcOxcOycO!P!bO!ZkO!`UO!cTO!dTO!eTO!fTO!gTO!j!hO#p!kO#t^O'aQO'mYO'zaO~O|!qO#Q!tO#R!qO'W9WO!_'oP~P+{O#S!uO~O!X!vO#S!uO~OP#]OY#cOi#QOr!zOs!zOu!{O}#aO!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO#c#VO#e#XO#f#YO'aQO'n#ZO'u!|O'v!}O~O^'eX'R'eX!_'eXz'eX!P'eX$|'eX!X'eX~P.jO!w#dO#k#dOP'fXY'fX^'fXi'fXr'fXs'fXu'fX}'fX!]'fX!^'fX!`'fX!f'fX#W'fX#X'fX#Y'fX#Z'fX#['fX#]'fX#^'fX#a'fX#c'fX#e'fX#f'fX'a'fX'n'fX'u'fX'v'fX~O#_'fX'R'fXz'fX!_'fX'c'fX!P'fX$|'fX!X'fX~P0zO!w#dO~O#v#eO#}#iO~O!P#jO#t^O$Q#kO$S#mO~O]#pOg#}Oi#qOj#pOk#pOn$OOp$POu#wO!P#xO!Z$UO!`#uO#R$VO#p$SO$Z$QO$]$RO$`$TO'W#oO'a#rO'['^P~O!`$WO~O!X$YO~O^$ZO'R$ZO~O'W$_O~O!`$WO'W$_O'X$aO']$bO~Ob$hO!`$WO'W$_O~O#_#SO~O]$qOr$mO!P$jO!`$lO$}$pO'W$_O'X$aO[(SP~O!j$rO~Ou$sO!P$tO'W$_O~Ou$sO!P$tO%V$xO'W$_O~O'W$yO~O#`sO$}tO%PrO%QrO%TuO%VvO%YwO%ZwO~Oa%SOb%RO!j%PO${%QO%_%OO~P7uOa%VObmO!P%UO!jlO#`sO${qO%PrO%QrO%TuO%VvO%YwO%ZwO%]xO~O_%YO!w%]O$}%WO'X$aO~P8tO!`%^O!c%bO~O!`%cO~O!PSO~O^$ZO&}%kO'R$ZO~O^$ZO&}%nO'R$ZO~O^$ZO&}%pO'R$ZO~O'O!XO'P!WO'Q%tO~OPZXYZXiZXrZXsZXuZX}ZX}cX!]ZX!^ZX!`ZX!fZX!wZX!wcX#ScX#WZX#XZX#YZX#ZZX#[ZX#]ZX#^ZX#_ZX#aZX#cZX#eZX#fZX#kZX'aZX'nZX'uZX'vZX~OzZXzcX~P;aO|%vOz&cX}&cX~P){O}!]Oz'hX~OP#]OY#cOi#QOr!zOs!zOu!{O}!]O!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO#c#VO#e#XO#f#YO'aQO'n#ZO'u!|O'v!}O~Oz'hX~P>WOz%{O~Ou&OO!S&YO!T&RO!U&RO'X$aO~O]&POj&PO|&SO'd%|O!O'iP!O'tP~P@ZOz'qX}'qX!X'qX!_'qX'n'qX~O!w'qX#S!{X!O'qX~PASO!w&ZOz'sX}'sX~O}&[Oz'rX~Oz&^O~O!w#dO~PASOR&bO!P&_O!k&aO'W$_O~Ob&gO!`$WO'W$_O~Or$mO!`$lO~O!O&hO~P`Or!zOs!zOu!{O!^!xO!`!yO'aQOP!baY!bai!ba}!ba!]!ba!f!ba#W!ba#X!ba#Y!ba#Z!ba#[!ba#]!ba#^!ba#_!ba#a!ba#c!ba#e!ba#f!ba'n!ba'u!ba'v!ba~O^!ba'R!baz!ba!_!ba'c!ba!P!ba$|!ba!X!ba~PC]O!_&iO~O!X!vO!w&kO'n&jO}'pX^'pX'R'pX~O!_'pX~PEuO}&oO!_'oX~O!_&qO~Ou$sO!P$tO#R&rO'W$_O~OPTOQTO]cOa!jOb!iOgcOiTOjcOkcOnTOpTOuROwcOxcOycO!PSO!ZkO!`UO!cTO!dTO!eTO!fTO!gTO!j!hO#p!kO#t^O'W9VO'aQO'mYO'zaO~O]#pOg#}Oi#qOj#pOk#pOn$OOp9iOu#wO!P#xO!Z:lO!`#uO#R9oO#p$SO$Z9kO$]9mO$`$TO'W&vO'a#rO~O#S&xO~O]#pOg#}Oi#qOj#pOk#pOn$OOp$POu#wO!P#xO!Z$UO!`#uO#R$VO#p$SO$Z$QO$]$RO$`$TO'W&vO'a#rO~O'['kP~PJ^O|&|O!_'lP~P){O'd'OO'mYO~OP9SOQ9SO]cOa:jOb!iOgcOi9SOjcOkcOn9SOp9SOuROwcOxcOycO!P!bO!Z9UO!`UO!c9SO!d9SO!e9SO!f9SO!g9SO!j!hO#p!kO#t^O'W'^O'aQO'mYO'z:hO~O!`!yO~O}#aO^$Xa'R$Xa!_$Xaz$Xa!P$Xa$|$Xa!X$Xa~O#`'eO~PH}O!X'gO!P'wX#s'wX#v'wX#}'wX~Or'hO~PNyOr'hO!P'wX#s'wX#v'wX#}'wX~O!P'jO#s'nO#v'iO#}'oO~O|'rO~PLRO#v#eO#}'uO~Or$aXu$aX!^$aX'n$aX'u$aX'v$aX~OReX}eX!weX'[eX'[$aX~P!!cOj'wO~O'O'yO'P'xO'Q'{O~Or'}Ou(OO'n#ZO'u(QO'v(SO~O'['|O~P!#lO'[(VO~O]#pOg#}Oi#qOj#pOk#pOn$OOp9iOu#wO!P#xO!Z:lO!`#uO#R9oO#p$SO$Z9kO$]9mO$`$TO'a#rO~O|(ZO'W(WO!_'{P~P!$ZO#S(]O~O|(aO'W(^Oz'|P~P!$ZO^(jOi(oOu(gO!S(mO!T(fO!U(fO!`(dO!t(nO$s(iO'X$aO'd(cO~O!O(lO~P!&RO!^!xOr'`Xu'`X'n'`X'u'`X'v'`X}'`X!w'`X~O'['`X#i'`X~P!&}OR(rO!w(qO}'_X'['_X~O}(sO'['^X~O'W(uO~O!`(zO~O'W&vO~O!`(dO~Ou$sO|!qO!P$tO#Q!tO#R!qO'W$_O!_'oP~O!X!vO#S)OO~OP#]OY#cOi#QOr!zOs!zOu!{O!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO#c#VO#e#XO#f#YO'aQO'n#ZO'u!|O'v!}O~O^!Ya}!Ya'R!Yaz!Ya!_!Ya'c!Ya!P!Ya$|!Ya!X!Ya~P!)`OR)WO!P&_O!k)VO$|)UO']$bO~O'W$yO'['^P~O!X)ZO!P'ZX^'ZX'R'ZX~O!`$WO']$bO~O!`$WO'W$_O']$bO~O!X!vO#S&xO~O$})gO'W)cO!O(TP~O})hO[(SX~O'd'OO~OY)lO~O[)mO~O!P$jO'W$_O'X$aO[(SP~Ou$sO|)rO!P$tO'W$_Oz'rP~O]&VOj&VO|)sO'd'OO!O'tP~O})tO^(PX'R(PX~O!w)xO']$bO~OR){O!P#xO']$bO~O!P)}O~Or*PO!PSO~O!j*UO~Ob*ZO~O'W(uO!O(RP~Ob$hO~O$}tO'W$yO~P8tOY*aO[*`O~OPTOQTO]cOanObmOgcOiTOjcOkcOnTOpTOuROwcOxcOycO!ZkO!`UO!cTO!dTO!eTO!fTO!gTO!jlO#t^O${qO'aQO'mYO'zaO~O!P!bO#p!kO'W9VO~P!0uO[*`O^$ZO'R$ZO~O^*eO#`*gO%P*gO%Q*gO~P){O!`%^O~O%p*lO~O!P*nO~O&Q*qO&R*pOP&OaQ&OaW&Oa]&Oa^&Oaa&Oab&Oag&Oai&Oaj&Oak&Oan&Oap&Oau&Oaw&Oax&Oay&Oa!P&Oa!Z&Oa!`&Oa!c&Oa!d&Oa!e&Oa!f&Oa!g&Oa!j&Oa#`&Oa#p&Oa#t&Oa${&Oa$}&Oa%P&Oa%Q&Oa%T&Oa%V&Oa%Y&Oa%Z&Oa%]&Oa%j&Oa%p&Oa%r&Oa%t&Oa%v&Oa%y&Oa&P&Oa&T&Oa&V&Oa&X&Oa&Z&Oa&]&Oa&|&Oa'W&Oa'a&Oa'm&Oa'z&Oa!O&Oa%w&Oa_&Oa%|&Oa~O'W*tO~O'c*wO~Oz&ca}&ca~P!)`O}!]Oz'ha~Oz'ha~P>WO}&[Oz'ra~O}tX}!VX!OtX!O!VX!XtX!X!VX!`!VX!wtX']!VX~O!X+OO!w*}O}#PX}'jX!O#PX!O'jX!X'jX!`'jX']'jX~O!X+QO!`$WO']$bO}!RX!O!RX~O]%}Oj%}Ou&OO'd(cO~OP9SOQ9SO]cOa:jOb!iOgcOi9SOjcOkcOn9SOp9SOuROwcOxcOycO!P!bO!Z9UO!`UO!c9SO!d9SO!e9SO!f9SO!g9SO!j!hO#p!kO#t^O'aQO'mYO'z:hO~O'W9sO~P!:sO}+UO!O'iX~O!O+WO~O!X+OO!w*}O}#PX!O#PX~O}+XO!O'tX~O!O+ZO~O]%}Oj%}Ou&OO'X$aO'd(cO~O!T+[O!U+[O~P!=qOu$sO|+_O!P$tO'W$_Oz&hX}&hX~O^+dO!S+gO!T+cO!U+cO!n+kO!o+iO!p+jO!q+hO!t+lO'X$aO'd(cO'm+aO~O!O+fO~P!>rOR+qO!P&_O!k+pO~O!w+wO}'pa!_'pa^'pa'R'pa~O!X!vO~P!?|O}&oO!_'oa~Ou$sO|+zO!P$tO#Q+|O#R+zO'W$_O}&jX!_&jX~O^!zi}!zi'R!ziz!zi!_!zi'c!zi!P!zi$|!zi!X!zi~P!)`O#S!va}!va!_!va!w!va!P!va^!va'R!vaz!va~P!#lO#S'`XP'`XY'`X^'`Xi'`Xs'`X!]'`X!`'`X!f'`X#W'`X#X'`X#Y'`X#Z'`X#['`X#]'`X#^'`X#_'`X#a'`X#c'`X#e'`X#f'`X'R'`X'a'`X!_'`Xz'`X!P'`X'c'`X$|'`X!X'`X~P!&}O},VO'['kX~P!#lO'[,XO~O},YO!_'lX~P!)`O!_,]O~Oz,^O~OP#]Or!zOs!zOu!{O!^!xO!`!yO!f#]O'aQOY#Vi^#Vii#Vi}#Vi!]#Vi#X#Vi#Y#Vi#Z#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi'R#Vi'n#Vi'u#Vi'v#Viz#Vi!_#Vi'c#Vi!P#Vi$|#Vi!X#Vi~O#W#Vi~P!EZO#W#OO~P!EZOP#]Or!zOs!zOu!{O!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO'aQOY#Vi^#Vi}#Vi!]#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi'R#Vi'n#Vi'u#Vi'v#Viz#Vi!_#Vi'c#Vi!P#Vi$|#Vi!X#Vi~Oi#Vi~P!GuOi#QO~P!GuOP#]Oi#QOr!zOs!zOu!{O!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO'aQO^#Vi}#Vi#a#Vi#c#Vi#e#Vi#f#Vi'R#Vi'n#Vi'u#Vi'v#Viz#Vi!_#Vi'c#Vi!P#Vi$|#Vi!X#Vi~OY#Vi!]#Vi#]#Vi#^#Vi#_#Vi~P!JaOY#cO!]#SO#]#SO#^#SO#_#SO~P!JaOP#]OY#cOi#QOr!zOs!zOu!{O!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO'aQO^#Vi}#Vi#c#Vi#e#Vi#f#Vi'R#Vi'n#Vi'v#Viz#Vi!_#Vi'c#Vi!P#Vi$|#Vi!X#Vi~O'u#Vi~P!MXO'u!|O~P!MXOP#]OY#cOi#QOr!zOs!zOu!{O!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO#c#VO'aQO'u!|O^#Vi}#Vi#e#Vi#f#Vi'R#Vi'n#Viz#Vi!_#Vi'c#Vi!P#Vi$|#Vi!X#Vi~O'v#Vi~P# sO'v!}O~P# sOP#]OY#cOi#QOr!zOs!zOu!{O!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO#c#VO#e#XO'aQO'u!|O'v!}O~O^#Vi}#Vi#f#Vi'R#Vi'n#Viz#Vi!_#Vi'c#Vi!P#Vi$|#Vi!X#Vi~P#$_OPZXYZXiZXrZXsZXuZX!]ZX!^ZX!`ZX!fZX!wZX#ScX#WZX#XZX#YZX#ZZX#[ZX#]ZX#^ZX#_ZX#aZX#cZX#eZX#fZX#kZX'aZX'nZX'uZX'vZX}ZX!OZX~O#iZX~P#&rOP#]OY9gOi9[Or!zOs!zOu!{O!]9^O!^!xO!`!yO!f#]O#W9YO#X9ZO#Y9ZO#Z9ZO#[9]O#]9^O#^9^O#_9^O#a9_O#c9aO#e9cO#f9dO'aQO'n#ZO'u!|O'v!}O~O#i,`O~P#(|OP'fXY'fXi'fXr'fXs'fXu'fX!]'fX!^'fX!`'fX!f'fX#W'fX#X'fX#Y'fX#Z'fX#['fX#]'fX#^'fX#a'fX#c'fX#e'fX#f'fX'a'fX'n'fX'u'fX'v'fX}'fX~O!w9hO#k9hO#_'fX#i'fX!O'fX~P#*wO^&ma}&ma'R&ma!_&ma'c&maz&ma!P&ma$|&ma!X&ma~P!)`OP#ViY#Vi^#Vii#Vis#Vi}#Vi!]#Vi!^#Vi!`#Vi!f#Vi#W#Vi#X#Vi#Y#Vi#Z#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi'R#Vi'a#Viz#Vi!_#Vi'c#Vi!P#Vi$|#Vi!X#Vi~P!#lO^#ji}#ji'R#jiz#ji!_#ji'c#ji!P#ji$|#ji!X#ji~P!)`O#v,bO~O#v,cO~O!X'gO!w,dO!P#zX#s#zX#v#zX#}#zX~O|,eO~O!P'jO#s,gO#v'iO#},hO~O}9eO!O'eX~P#(|O!O,iO~O#},kO~O'O'yO'P'xO'Q,nO~O],qOj,qOz,rO~O}cX!XcX!_cX!_$aX'ncX~P!!cO!_,xO~P!#lO},yO!X!vO'n&jO!_'{X~O!_-OO~Oz$aX}$aX!X$hX~P!!cO}-QOz'|X~P!#lO!X-SO~Oz-UO~O|(ZO'W$_O!_'{P~Oi-YO!X!vO!`$WO']$bO'n&jO~O!X)ZO~O!O-`O~P!&RO!T-aO!U-aO'X$aO'd(cO~Ou-cO'd(cO~O!t-dO~O'W$yO}&rX'[&rX~O}(sO'['^a~Or-iOs-iOu-jO'noa'uoa'voa}oa!woa~O'[oa#ioa~P#5{Or'}Ou(OO'n$Ya'u$Ya'v$Ya}$Ya!w$Ya~O'[$Ya#i$Ya~P#6qOr'}Ou(OO'n$[a'u$[a'v$[a}$[a!w$[a~O'[$[a#i$[a~P#7dO]-kO~O#S-lO~O'[$ja}$ja#i$ja!w$ja~P!#lO#S-oO~OR-xO!P&_O!k-wO$|-vO~O'[-yO~O]#pOi#qOj#pOk#pOn$OOp9iOu#wO!P#xO!Z:lO!`#uO#R9oO#p$SO$Z9kO$]9mO$`$TO'a#rO~Og-{O'W-zO~P#9ZO!X)ZO!P'Za^'Za'R'Za~O#S.RO~OYZX}cX!OcX~O}.SO!O(TX~O!O.UO~OY.VO~O'W)cO~O!P$jO'W$_O[&zX}&zX~O})hO[(Sa~O!_.[O~P!)`O].^O~OY._O~O[.`O~OR-xO!P&_O!k-wO$|-vO']$bO~O})tO^(Pa'R(Pa~O!w.fO~OR.iO!P#xO~O'd'OO!O(QP~OR.sO!P.oO!k.rO$|.qO']$bO~OY.}O}.{O!O(RX~O!O/OO~O[/QO^$ZO'R$ZO~O]/RO~O#_/TO%n/UO~P0zO!w#dO#_/TO%n/UO~O^/VO~P){O^/XO~O%w/]OP%uiQ%uiW%ui]%ui^%uia%uib%uig%uii%uij%uik%uin%uip%uiu%uiw%uix%uiy%ui!P%ui!Z%ui!`%ui!c%ui!d%ui!e%ui!f%ui!g%ui!j%ui#`%ui#p%ui#t%ui${%ui$}%ui%P%ui%Q%ui%T%ui%V%ui%Y%ui%Z%ui%]%ui%j%ui%p%ui%r%ui%t%ui%v%ui%y%ui&P%ui&T%ui&V%ui&X%ui&Z%ui&]%ui&|%ui'W%ui'a%ui'm%ui'z%ui!O%ui_%ui%|%ui~O_/cO!O/aO%|/bO~P`O!PSO!`/fO~O}#aO'c$Xa~Oz&ci}&ci~P!)`O}!]Oz'hi~O}&[Oz'ri~Oz/jO~O}!Ra!O!Ra~P#(|O]%}Oj%}O|/pO'd(cO}&dX!O&dX~P@ZO}+UO!O'ia~O]&VOj&VO|)sO'd'OO}&iX!O&iX~O}+XO!O'ta~Oz'si}'si~P!)`O^$ZO!X!vO!`$WO!f/{O!w/yO'R$ZO']$bO'n&jO~O!O0OO~P!>rO!T0PO!U0PO'X$aO'd(cO'm+aO~O!S0QO~P#GTO!PSO!S0QO!q0SO!t0TO~P#GTO!S0QO!o0VO!p0VO!q0SO!t0TO~P#GTO!P&_O~O!P&_O~P!#lO}'pi!_'pi^'pi'R'pi~P!)`O!w0`O}'pi!_'pi^'pi'R'pi~O}&oO!_'oi~Ou$sO!P$tO#R0bO'W$_O~O#SoaPoaYoa^oaioa!]oa!^oa!`oa!foa#Woa#Xoa#Yoa#Zoa#[oa#]oa#^oa#_oa#aoa#coa#eoa#foa'Roa'aoa!_oazoa!Poa'coa$|oa!Xoa~P#5{O#S$YaP$YaY$Ya^$Yai$Yas$Ya!]$Ya!^$Ya!`$Ya!f$Ya#W$Ya#X$Ya#Y$Ya#Z$Ya#[$Ya#]$Ya#^$Ya#_$Ya#a$Ya#c$Ya#e$Ya#f$Ya'R$Ya'a$Ya!_$Yaz$Ya!P$Ya'c$Ya$|$Ya!X$Ya~P#6qO#S$[aP$[aY$[a^$[ai$[as$[a!]$[a!^$[a!`$[a!f$[a#W$[a#X$[a#Y$[a#Z$[a#[$[a#]$[a#^$[a#_$[a#a$[a#c$[a#e$[a#f$[a'R$[a'a$[a!_$[az$[a!P$[a'c$[a$|$[a!X$[a~P#7dO#S$jaP$jaY$ja^$jai$jas$ja}$ja!]$ja!^$ja!`$ja!f$ja#W$ja#X$ja#Y$ja#Z$ja#[$ja#]$ja#^$ja#_$ja#a$ja#c$ja#e$ja#f$ja'R$ja'a$ja!_$jaz$ja!P$ja!w$ja'c$ja$|$ja!X$ja~P!#lO^!zq}!zq'R!zqz!zq!_!zq'c!zq!P!zq$|!zq!X!zq~P!)`O}&eX'[&eX~PJ^O},VO'['ka~O|0jO}&fX!_&fX~P){O},YO!_'la~O},YO!_'la~P!)`O#i!ba!O!ba~PC]O#i!Ya}!Ya!O!Ya~P#(|O!P0}O#t^O#{1OO~O!O1SO~O'c1TO~P!#lO^$Uq}$Uq'R$Uqz$Uq!_$Uq'c$Uq!P$Uq$|$Uq!X$Uq~P!)`Oz1UO~O],qOj,qO~Or'}Ou(OO'v(SO'n$ti'u$ti}$ti!w$ti~O'[$ti#i$ti~P$'tOr'}Ou(OO'n$vi'u$vi'v$vi}$vi!w$vi~O'[$vi#i$vi~P$(gO#i1VO~P!#lO|1XO'W$_O}&nX!_&nX~O},yO!_'{a~O},yO!X!vO!_'{a~O},yO!X!vO'n&jO!_'{a~O'[$ci}$ci#i$ci!w$ci~P!#lO|1`O'W(^Oz&pX}&pX~P!$ZO}-QOz'|a~O}-QOz'|a~P!#lO!X!vO~O!X!vO#_1jO~Oi1nO!X!vO'n&jO~O}'_i'['_i~P!#lO!w1qO}'_i'['_i~P!#lO!_1tO~O^$Vq}$Vq'R$Vqz$Vq!_$Vq'c$Vq!P$Vq$|$Vq!X$Vq~P!)`O}1xO!P'}X~P!#lO!P&_O$|1{O~O!P&_O$|1{O~P!#lO!P$aX$qZX^$aX'R$aX~P!!cO$q2POrfXufX!PfX'nfX'ufX'vfX^fX'RfX~O$q2PO~O$}2WO'W)cO}&yX!O&yX~O}.SO!O(Ta~OY2[O~O[2]O~O]2`O~OR2bO!P&_O!k2aO$|1{O~O^$ZO'R$ZO~P!#lO!P#xO~P!#lO}2gO!w2iO!O(QX~O!O2jO~Ou(gO!S2sO!T2lO!U2lO!n2rO!o2qO!p2qO!t2pO'X$aO'd(cO'm+aO~O!O2oO~P$0uOR2zO!P.oO!k2yO$|2xO~OR2zO!P.oO!k2yO$|2xO']$bO~O'W(uO}&xX!O&xX~O}.{O!O(Ra~O'd3TO~O]3VO~O[3XO~O!_3[O~P){O^3^O~O^3^O~P){O#_3`O%n3aO~PEuO_/cO!O3eO%|/bO~P`O!X3gO~O&R3hOP&OqQ&OqW&Oq]&Oq^&Oqa&Oqb&Oqg&Oqi&Oqj&Oqk&Oqn&Oqp&Oqu&Oqw&Oqx&Oqy&Oq!P&Oq!Z&Oq!`&Oq!c&Oq!d&Oq!e&Oq!f&Oq!g&Oq!j&Oq#`&Oq#p&Oq#t&Oq${&Oq$}&Oq%P&Oq%Q&Oq%T&Oq%V&Oq%Y&Oq%Z&Oq%]&Oq%j&Oq%p&Oq%r&Oq%t&Oq%v&Oq%y&Oq&P&Oq&T&Oq&V&Oq&X&Oq&Z&Oq&]&Oq&|&Oq'W&Oq'a&Oq'm&Oq'z&Oq!O&Oq%w&Oq_&Oq%|&Oq~O}#Pi!O#Pi~P#(|O!w3jO}#Pi!O#Pi~O}!Ri!O!Ri~P#(|O^$ZO!w3qO'R$ZO~O^$ZO!X!vO!w3qO'R$ZO~O!T3uO!U3uO'X$aO'd(cO'm+aO~O^$ZO!X!vO!`$WO!f3vO!w3qO'R$ZO']$bO'n&jO~O!S3wO~P$9_O!S3wO!q3zO!t3{O~P$9_O^$ZO!X!vO!f3vO!w3qO'R$ZO'n&jO~O}'pq!_'pq^'pq'R'pq~P!)`O}&oO!_'oq~O#S$tiP$tiY$ti^$tii$tis$ti!]$ti!^$ti!`$ti!f$ti#W$ti#X$ti#Y$ti#Z$ti#[$ti#]$ti#^$ti#_$ti#a$ti#c$ti#e$ti#f$ti'R$ti'a$ti!_$tiz$ti!P$ti'c$ti$|$ti!X$ti~P$'tO#S$viP$viY$vi^$vii$vis$vi!]$vi!^$vi!`$vi!f$vi#W$vi#X$vi#Y$vi#Z$vi#[$vi#]$vi#^$vi#_$vi#a$vi#c$vi#e$vi#f$vi'R$vi'a$vi!_$viz$vi!P$vi'c$vi$|$vi!X$vi~P$(gO#S$ciP$ciY$ci^$cii$cis$ci}$ci!]$ci!^$ci!`$ci!f$ci#W$ci#X$ci#Y$ci#Z$ci#[$ci#]$ci#^$ci#_$ci#a$ci#c$ci#e$ci#f$ci'R$ci'a$ci!_$ciz$ci!P$ci!w$ci'c$ci$|$ci!X$ci~P!#lO}&ea'[&ea~P!#lO}&fa!_&fa~P!)`O},YO!_'li~O#i!zi}!zi!O!zi~P#(|OP#]Or!zOs!zOu!{O!^!xO!`!yO!f#]O'aQOY#Vii#Vi!]#Vi#X#Vi#Y#Vi#Z#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi#i#Vi'n#Vi'u#Vi'v#Vi}#Vi!O#Vi~O#W#Vi~P$BuO#W9YO~P$BuOP#]Or!zOs!zOu!{O!^!xO!`!yO!f#]O#W9YO#X9ZO#Y9ZO#Z9ZO'aQOY#Vi!]#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi#i#Vi'n#Vi'u#Vi'v#Vi}#Vi!O#Vi~Oi#Vi~P$D}Oi9[O~P$D}OP#]Oi9[Or!zOs!zOu!{O!^!xO!`!yO!f#]O#W9YO#X9ZO#Y9ZO#Z9ZO#[9]O'aQO#a#Vi#c#Vi#e#Vi#f#Vi#i#Vi'n#Vi'u#Vi'v#Vi}#Vi!O#Vi~OY#Vi!]#Vi#]#Vi#^#Vi#_#Vi~P$GVOY9gO!]9^O#]9^O#^9^O#_9^O~P$GVOP#]OY9gOi9[Or!zOs!zOu!{O!]9^O!^!xO!`!yO!f#]O#W9YO#X9ZO#Y9ZO#Z9ZO#[9]O#]9^O#^9^O#_9^O#a9_O'aQO#c#Vi#e#Vi#f#Vi#i#Vi'n#Vi'v#Vi}#Vi!O#Vi~O'u#Vi~P$IkO'u!|O~P$IkOP#]OY9gOi9[Or!zOs!zOu!{O!]9^O!^!xO!`!yO!f#]O#W9YO#X9ZO#Y9ZO#Z9ZO#[9]O#]9^O#^9^O#_9^O#a9_O#c9aO'aQO'u!|O#e#Vi#f#Vi#i#Vi'n#Vi}#Vi!O#Vi~O'v#Vi~P$KsO'v!}O~P$KsOP#]OY9gOi9[Or!zOs!zOu!{O!]9^O!^!xO!`!yO!f#]O#W9YO#X9ZO#Y9ZO#Z9ZO#[9]O#]9^O#^9^O#_9^O#a9_O#c9aO#e9cO'aQO'u!|O'v!}O~O#f#Vi#i#Vi'n#Vi}#Vi!O#Vi~P$M{O^#gy}#gy'R#gyz#gy!_#gy'c#gy!P#gy$|#gy!X#gy~P!)`OP#ViY#Vii#Vis#Vi!]#Vi!^#Vi!`#Vi!f#Vi#W#Vi#X#Vi#Y#Vi#Z#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi#i#Vi'a#Vi}#Vi!O#Vi~P!#lO!^!xOP'`XY'`Xi'`Xr'`Xs'`Xu'`X!]'`X!`'`X!f'`X#W'`X#X'`X#Y'`X#Z'`X#['`X#]'`X#^'`X#_'`X#a'`X#c'`X#e'`X#f'`X#i'`X'a'`X'n'`X'u'`X'v'`X}'`X!O'`X~O#i#ji}#ji!O#ji~P#(|O!O4]O~O}&ma!O&ma~P#(|O!X!vO'n&jO}&na!_&na~O},yO!_'{i~O},yO!X!vO!_'{i~Oz&pa}&pa~P!#lO!X4dO~O}-QOz'|i~P!#lO}-QOz'|i~Oz4jO~O!X!vO#_4pO~Oi4qO!X!vO'n&jO~Oz4sO~O'[$eq}$eq#i$eq!w$eq~P!#lO^$Vy}$Vy'R$Vyz$Vy!_$Vy'c$Vy!P$Vy$|$Vy!X$Vy~P!)`O}1xO!P'}a~O!P&_O$|4xO~O!P&_O$|4xO~P!#lO^!zy}!zy'R!zyz!zy!_!zy'c!zy!P!zy$|!zy!X!zy~P!)`OY4{O~O}.SO!O(Ti~O]5QO~O[5RO~O'd'OO}&uX!O&uX~O}2gO!O(Qa~O!O5`O~P$0uOu-cO'd(cO'm+aO~O!S5cO!T5bO!U5bO!t0TO'X$aO'd(cO'm+aO~O!o5dO!p5dO~P%,eO!T5bO!U5bO'X$aO'd(cO'm+aO~O!P.oO~O!P.oO$|5fO~O!P.oO$|5fO~P!#lOR5kO!P.oO!k5jO$|5fO~OY5pO}&xa!O&xa~O}.{O!O(Ri~O]5sO~O!_5tO~O!_5uO~O!_5vO~O!_5vO~P){O^5xO~O!X5{O~O!_5}O~O}'si!O'si~P#(|O^$ZO'R$ZO~P!)`O^$ZO!w6SO'R$ZO~O^$ZO!X!vO!w6SO'R$ZO~O!T6XO!U6XO'X$aO'd(cO'm+aO~O^$ZO!X!vO!f6YO!w6SO'R$ZO'n&jO~O!`$WO']$bO~P%1PO!S6ZO~P%0nO}'py!_'py^'py'R'py~P!)`O#S$eqP$eqY$eq^$eqi$eqs$eq}$eq!]$eq!^$eq!`$eq!f$eq#W$eq#X$eq#Y$eq#Z$eq#[$eq#]$eq#^$eq#_$eq#a$eq#c$eq#e$eq#f$eq'R$eq'a$eq!_$eqz$eq!P$eq!w$eq'c$eq$|$eq!X$eq~P!#lO}&fi!_&fi~P!)`O#i!zq}!zq!O!zq~P#(|Or-iOs-iOu-jOPoaYoaioa!]oa!^oa!`oa!foa#Woa#Xoa#Yoa#Zoa#[oa#]oa#^oa#_oa#aoa#coa#eoa#foa#ioa'aoa'noa'uoa'voa}oa!Ooa~Or'}Ou(OOP$YaY$Yai$Yas$Ya!]$Ya!^$Ya!`$Ya!f$Ya#W$Ya#X$Ya#Y$Ya#Z$Ya#[$Ya#]$Ya#^$Ya#_$Ya#a$Ya#c$Ya#e$Ya#f$Ya#i$Ya'a$Ya'n$Ya'u$Ya'v$Ya}$Ya!O$Ya~Or'}Ou(OOP$[aY$[ai$[as$[a!]$[a!^$[a!`$[a!f$[a#W$[a#X$[a#Y$[a#Z$[a#[$[a#]$[a#^$[a#_$[a#a$[a#c$[a#e$[a#f$[a#i$[a'a$[a'n$[a'u$[a'v$[a}$[a!O$[a~OP$jaY$jai$jas$ja!]$ja!^$ja!`$ja!f$ja#W$ja#X$ja#Y$ja#Z$ja#[$ja#]$ja#^$ja#_$ja#a$ja#c$ja#e$ja#f$ja#i$ja'a$ja}$ja!O$ja~P!#lO#i$Uq}$Uq!O$Uq~P#(|O#i$Vq}$Vq!O$Vq~P#(|O!O6eO~O'[$xy}$xy#i$xy!w$xy~P!#lO!X!vO}&ni!_&ni~O!X!vO'n&jO}&ni!_&ni~O},yO!_'{q~Oz&pi}&pi~P!#lO}-QOz'|q~Oz6lO~P!#lOz6lO~O}'_y'['_y~P!#lO}&sa!P&sa~P!#lO!P$pq^$pq'R$pq~P!#lOY6tO~O}.SO!O(Tq~O]6wO~O!P&_O$|6xO~O!P&_O$|6xO~P!#lO!w6yO}&ua!O&ua~O}2gO!O(Qi~P#(|O!T7PO!U7PO'X$aO'd(cO'm+aO~O!S7RO!t3{O~P%@nO!P.oO$|7UO~O!P.oO$|7UO~P!#lO'd7[O~O}.{O!O(Rq~O!_7_O~O!_7_O~P){O!_7aO~O!_7bO~O}#Py!O#Py~P#(|O^$ZO!w7hO'R$ZO~O^$ZO!X!vO!w7hO'R$ZO~O!T7kO!U7kO'X$aO'd(cO'm+aO~O^$ZO!X!vO!f7lO!w7hO'R$ZO'n&jO~O#S$xyP$xyY$xy^$xyi$xys$xy}$xy!]$xy!^$xy!`$xy!f$xy#W$xy#X$xy#Y$xy#Z$xy#[$xy#]$xy#^$xy#_$xy#a$xy#c$xy#e$xy#f$xy'R$xy'a$xy!_$xyz$xy!P$xy!w$xy'c$xy$|$xy!X$xy~P!#lO#i#gy}#gy!O#gy~P#(|OP$ciY$cii$cis$ci!]$ci!^$ci!`$ci!f$ci#W$ci#X$ci#Y$ci#Z$ci#[$ci#]$ci#^$ci#_$ci#a$ci#c$ci#e$ci#f$ci#i$ci'a$ci}$ci!O$ci~P!#lOr'}Ou(OO'v(SOP$tiY$tii$tis$ti!]$ti!^$ti!`$ti!f$ti#W$ti#X$ti#Y$ti#Z$ti#[$ti#]$ti#^$ti#_$ti#a$ti#c$ti#e$ti#f$ti#i$ti'a$ti'n$ti'u$ti}$ti!O$ti~Or'}Ou(OOP$viY$vii$vis$vi!]$vi!^$vi!`$vi!f$vi#W$vi#X$vi#Y$vi#Z$vi#[$vi#]$vi#^$vi#_$vi#a$vi#c$vi#e$vi#f$vi#i$vi'a$vi'n$vi'u$vi'v$vi}$vi!O$vi~O#i$Vy}$Vy!O$Vy~P#(|O#i!zy}!zy!O!zy~P#(|O!X!vO}&nq!_&nq~O},yO!_'{y~Oz&pq}&pq~P!#lOz7rO~P!#lO}.SO!O(Ty~O}2gO!O(Qq~O!T8OO!U8OO'X$aO'd(cO'm+aO~O!P.oO$|8RO~O!P.oO$|8RO~P!#lO!_8UO~O&R8VOP&O!ZQ&O!ZW&O!Z]&O!Z^&O!Za&O!Zb&O!Zg&O!Zi&O!Zj&O!Zk&O!Zn&O!Zp&O!Zu&O!Zw&O!Zx&O!Zy&O!Z!P&O!Z!Z&O!Z!`&O!Z!c&O!Z!d&O!Z!e&O!Z!f&O!Z!g&O!Z!j&O!Z#`&O!Z#p&O!Z#t&O!Z${&O!Z$}&O!Z%P&O!Z%Q&O!Z%T&O!Z%V&O!Z%Y&O!Z%Z&O!Z%]&O!Z%j&O!Z%p&O!Z%r&O!Z%t&O!Z%v&O!Z%y&O!Z&P&O!Z&T&O!Z&V&O!Z&X&O!Z&Z&O!Z&]&O!Z&|&O!Z'W&O!Z'a&O!Z'm&O!Z'z&O!Z!O&O!Z%w&O!Z_&O!Z%|&O!Z~O^$ZO!w8[O'R$ZO~O^$ZO!X!vO!w8[O'R$ZO~OP$eqY$eqi$eqs$eq!]$eq!^$eq!`$eq!f$eq#W$eq#X$eq#Y$eq#Z$eq#[$eq#]$eq#^$eq#_$eq#a$eq#c$eq#e$eq#f$eq#i$eq'a$eq}$eq!O$eq~P!#lO}&uq!O&uq~P#(|O^$ZO!w8qO'R$ZO~OP$xyY$xyi$xys$xy!]$xy!^$xy!`$xy!f$xy#W$xy#X$xy#Y$xy#Z$xy#[$xy#]$xy#^$xy#_$xy#a$xy#c$xy#e$xy#f$xy#i$xy'a$xy}$xy!O$xy~P!#lO'c'eX~P.jO'cZXzZX!_ZX%nZX!PZX$|ZX!XZX~P$zO!XcX!_ZX!_cX'ncX~P;aOP9SOQ9SO]cOa:jOb!iOgcOi9SOjcOkcOn9SOp9SOuROwcOxcOycO!PSO!Z9UO!`UO!c9SO!d9SO!e9SO!f9SO!g9SO!j!hO#p!kO#t^O'W'^O'aQO'mYO'z:hO~O}9eO!O$Xa~O]#pOg#}Oi#qOj#pOk#pOn$OOp9jOu#wO!P#xO!Z:mO!`#uO#R9pO#p$SO$Z9lO$]9nO$`$TO'W&vO'a#rO~O#`'eO~P&+}O!OZX!OcX~P;aO#S9XO~O!X!vO#S9XO~O!w9hO~O#_9^O~O!w9qO}'sX!O'sX~O!w9hO}'qX!O'qX~O#S9rO~O'[9tO~P!#lO#S9yO~O#S9zO~O!X!vO#S9{O~O!X!vO#S9rO~O#i9|O~P#(|O#S9}O~O#S:OO~O#S:PO~O#S:QO~O#i:RO~P!#lO#i:SO~P!#lO#t~!^!n!p!q#Q#R'z$Z$]$`$q${$|$}%T%V%Y%Z%]%_~TS#t'z#Xy'T'U#v'T'W'd~",
+-  goto: "#Dk(XPPPPPPP(YP(jP*^PPPP-sPP.Y3j5^5qP5qPPP5q5qP5qP7_PP7dP7xPPPP<XPPPP<X>wPPP>}AYP<XPCsPPPPEk<XPPPPPGd<XPPJcK`PPPPKdL|PMUNVPK`<X<X!#^!&V!*v!*v!.TPPP!.[!1O<XPPPPPPPPPP!3sP!5UPP<X!6cP<XP<X<X<X<XP<X!8vPP!;mP!>`!>h!>l!>lP!;jP!>p!>pP!AcP!Ag<X<X!Am!D_5qP5qP5q5qP!Eb5q5q!GY5q!I[5q!J|5q5q!Kj!Md!Md!Mh!Md!MpP!MdP5q!Nl5q# v5q5q-sPPP##TPP##m##mP##mP#$S##mPP#$YP#$PP#$P#$lMQ#$P#%Z#%a#%d(Y#%g(YP#%n#%n#%nP(YP(YP(YP(YPP(YP#%t#%wP#%w(YPPP(YP(YP(YP(YP(YP(Y(Y#%{#&V#&]#&c#&q#&w#&}#'X#'_#'i#'o#'}#(T#(Z#(i#)O#*b#*p#*v#*|#+S#+Y#+d#+j#+p#+z#,^#,dPPPPPPPPP#,jPP#-^#1[PP#2r#2y#3RP#7_PP#7c#9v#?p#?t#?w#?z#@V#@YPP#@]#@a#AO#As#Aw#BZPP#B_#Be#BiP#Bl#Bp#Bs#Cc#Cy#DO#DR#DU#D[#D_#Dc#DgmhOSj}!m$Y%a%d%e%g*i*n/]/`Q$gmQ$npQ%XyS&R!b+UQ&f!iS(f#x(kQ)a$hQ)n$pQ*Y%RQ+[&YS+c&_+eQ+u&gQ-a(mQ.z*ZY0P+g+h+i+j+kS2l.o2nU3u0Q0S0VU5b2q2r2sS6X3w3zS7P5c5dQ7k6ZR8O7R$l[ORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#a#d$Y$l%Y%]%a%c%d%e%g%k%v&O&Z&a&k&x&|'|)O)V*e*i*n+p+w,Y,`-j-o-w.R.r/T/U/V/X/]/`/b/y0`0j2a2y3^3`3a3q5j5x6S7h8[8q!j'`#[#j&S'r*}+Q,e/p0}2i3j6y9S9U9X9Y9Z9[9]9^9_9`9a9b9c9d9e9h9q9r9t9{9|:P:Q:kQ(v$PQ)f$jQ*[%UQ*c%^Q,P9iQ-|)ZQ.X)gQ/S*aQ2V.SQ3R.{Q4U9jR4}2WpeOSjy}!m$Y%W%a%d%e%g*i*n/]/`R*^%Y&WVOSTjkn}!S!W!]!j!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#[#a#d#j$Y$l%Y%]%^%a%c%d%e%g%k%v&O&Z&a&k&x&|'r'|)O)V*e*i*n*}+Q+p+w,Y,`,e-j-o-w.R.r/T/U/V/X/]/`/b/p/y0`0j0}2a2i2y3^3`3a3j3q5j5x6S6y7h8[8q9S9U9X9Y9Z9[9]9^9_9`9a9b9c9d9e9h9q9r9t9{9|:P:Q:j:kW!cRU!`&SQ$`lQ$fmS$kp$pv$urs!q!t$W$s&[&o&r)r)s)t*g+O+_+z+|/f0bQ$}wQ&c!hQ&e!iS(Y#u(dS)`$g$hQ)d$jQ)q$rQ*T%PQ*X%RS+t&f&gQ,}(ZQ.Q)aQ.W)gQ.Y)hQ.])lQ.u*US.y*Y*ZQ0^+uQ1W,yQ2U.SQ2Y.VQ2_._Q3Q.zQ4a1XQ4|2WQ5P2[Q6s4{R7u6t!Y$dm!i$f$g$h&Q&e&f&g(e)`)a+R+b+t+u-Z.Q/u/|0R0^1m3t3y6V7i8]Q)X$`Q)y$zQ)|${Q*W%RQ.a)qQ.t*TU.x*X*Y*ZQ2{.uS3P.y.zQ5]2kQ5o3QS6}5^5aS7|7O7QQ8g7}R8v8hW#{a$b(s:hS$zt%WQ${uQ$|vR)w$x$V#za!v!x#c#u#w$Q$R$V&b'x(R(T(U(](a(q(r)U)W)Z)x){+q,V-Q-S-l-v-x.f.i.q.s1V1`1j1q1x1{2P2b2x2z4d4p4x5f5k6x7U8R9g9k9l9m9n9o9p9u9v9w9x9y9z9}:O:R:S:h:n:oV(w$P9i9jU&V!b$t+XQ'P!zQ)k$mQ.j)}Q1r-iR5X2g&YcORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#[#a#d#j$Y$l%Y%]%^%a%c%d%e%g%k%v&O&S&Z&a&k&x&|'r'|)O)V*e*i*n*}+Q+p+w,Y,`,e-j-o-w.R.r/T/U/V/X/]/`/b/p/y0`0j0}2a2i2y3^3`3a3j3q5j5x6S6y7h8[8q9S9U9X9Y9Z9[9]9^9_9`9a9b9c9d9e9h9q9r9t9{9|:P:Q:k$]#`Z!_!n$^%u%y&t&{'R'S'T'U'V'W'X'Y'Z'[']'_'b'f'p)j*y+S+]+v,U,[,_,a,o-m/k/n0_0i0m0n0o0p0q0r0s0t0u0v0w0x0y0|1R1v2S3l3o4P4S4T4Y4Z5Z6O6R6_6c6d7e7x8Y8o8z9T:a&ZcORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#[#a#d#j$Y$l%Y%]%^%a%c%d%e%g%k%v&O&S&Z&a&k&x&|'r'|)O)V*e*i*n*}+Q+p+w,Y,`,e-j-o-w.R.r/T/U/V/X/]/`/b/p/y0`0j0}2a2i2y3^3`3a3j3q5j5x6S6y7h8[8q9S9U9X9Y9Z9[9]9^9_9`9a9b9c9d9e9h9q9r9t9{9|:P:Q:kQ&T!bR/q+UY%}!b&R&Y+U+[S(e#x(kS+b&_+eS-Z(f(mQ-[(gQ-b(nQ.l*PU/|+c+g+hU0R+i+j+kS0W+l2pQ1m-aQ1o-cQ1p-dS2k.o2nU3t0P0Q0SQ3x0TQ3y0VS5^2l2sS5a2q2rU6V3u3w3zQ6[3{S7O5b5cQ7Q5dS7i6X6ZS7}7P7RQ8]7kR8h8OlhOSj}!m$Y%a%d%e%g*i*n/]/`Q%i!QS&s!u9XQ)^$eQ*R$}Q*S%OQ+r&dS,T&x9rS-n)O9{Q.O)_Q.n*QQ/d*pQ/e*qQ/m+PQ0U+iQ0[+sS1w-o:PQ2Q.PS2T.R:QQ3k/oQ3n/wQ3}0]Q4z2RQ5|3hQ6P3mQ6T3sQ6]4OQ7c5}Q7f6UQ8X7gQ8l8VQ8n8ZR8y8p$W#_Z!_!n%u%y&t&{'R'S'T'U'V'W'X'Y'Z'[']'_'b'f'p)j*y+S+]+v,U,[,_,o-m/k/n0_0i0m0n0o0p0q0r0s0t0u0v0w0x0y0|1R1v2S3l3o4P4S4T4Y4Z5Z6O6R6_6c6d7e7x8Y8o8z9T:aU(p#y&w0{T)S$^,a$W#^Z!_!n%u%y&t&{'R'S'T'U'V'W'X'Y'Z'[']'_'b'f'p)j*y+S+]+v,U,[,_,o-m/k/n0_0i0m0n0o0p0q0r0s0t0u0v0w0x0y0|1R1v2S3l3o4P4S4T4Y4Z5Z6O6R6_6c6d7e7x8Y8o8z9T:aQ'a#_S)R$^,aR-p)S&YcORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#[#a#d#j$Y$l%Y%]%^%a%c%d%e%g%k%v&O&S&Z&a&k&x&|'r'|)O)V*e*i*n*}+Q+p+w,Y,`,e-j-o-w.R.r/T/U/V/X/]/`/b/p/y0`0j0}2a2i2y3^3`3a3j3q5j5x6S6y7h8[8q9S9U9X9Y9Z9[9]9^9_9`9a9b9c9d9e9h9q9r9t9{9|:P:Q:kQ%d{Q%e|Q%g!OQ%h!PR/[*lQ&`!hQ)T$`Q+o&cS-u)X)qS0X+m+nW1z-r-s-t.aS3|0Y0ZU4w1|1}2OU6q4v5T5UQ7t6rR8c7wT+d&_+eS+b&_+eU/|+c+g+hU0R+i+j+kS0W+l2pS2k.o2nU3t0P0Q0SQ3x0TQ3y0VS5^2l2sS5a2q2rU6V3u3w3zQ6[3{S7O5b5cQ7Q5dS7i6X6ZS7}7P7RQ8]7kR8h8OS+d&_+eT2m.o2nS&m!p/YQ,|(YQ-X(eS/{+b2kQ1],}S1g-Y-bU3v0R0W5aQ4`1WS4n1n1pU6Y3x3y7QQ6g4aQ6p4qR7l6[Q!wXS&l!p/YQ)P$XQ)[$cQ)b$iQ+x&mQ,{(YQ-W(eQ-](hQ-})]Q.v*VS/z+b2kS1[,|,}S1f-X-bQ1i-[Q1l-^Q2}.wW3r/{0R0W5aQ4_1WQ4c1]S4h1g1pQ4o1oQ5m3OW6W3v3x3y7QS6f4`4aQ6k4jQ6n4nQ6{5[Q7Y5nS7j6Y6[Q7n6gQ7p6lQ7s6pQ7z6|Q8T7ZQ8^7lQ8a7rQ8e7{Q8t8fQ8|8uQ9Q8}Q:Z:UQ:d:_R:e:`$nWORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#a#d$Y$l%Y%]%^%a%c%d%e%g%k%v&O&Z&a&k&x&|'|)O)V*e*i*n+p+w,Y,`-j-o-w.R.r/T/U/V/X/]/`/b/y0`0j2a2y3^3`3a3q5j5x6S7h8[8qS!wn!j!j:T#[#j&S'r*}+Q,e/p0}2i3j6y9S9U9X9Y9Z9[9]9^9_9`9a9b9c9d9e9h9q9r9t9{9|:P:Q:kR:Z:j$nXORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#a#d$Y$l%Y%]%^%a%c%d%e%g%k%v&O&Z&a&k&x&|'|)O)V*e*i*n+p+w,Y,`-j-o-w.R.r/T/U/V/X/]/`/b/y0`0j2a2y3^3`3a3q5j5x6S7h8[8qQ$Xb!Y$cm!i$f$g$h&Q&e&f&g(e)`)a+R+b+t+u-Z.Q/u/|0R0^1m3t3y6V7i8]S$in!jQ)]$dQ*V%RW.w*W*X*Y*ZU3O.x.y.zQ5[2kS5n3P3QU6|5]5^5aQ7Z5oU7{6}7O7QS8f7|7}S8u8g8hQ8}8v!j:U#[#j&S'r*}+Q,e/p0}2i3j6y9S9U9X9Y9Z9[9]9^9_9`9a9b9c9d9e9h9q9r9t9{9|:P:Q:kQ:_:iR:`:j$f]OSTjk}!S!W!]!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#a#d$Y$l%Y%]%a%c%d%e%g%k%v&O&Z&a&k&x&|'|)O)V*e*i*n+p+w,Y,`-j-o-w.R.r/T/U/V/X/]/`/b/y0`0j2a2y3^3`3a3q5j5x6S7h8[8qU!gRU!`v$urs!q!t$W$s&[&o&r)r)s)t*g+O+_+z+|/f0bQ*d%^!h:V#[#j'r*}+Q,e/p0}2i3j6y9S9U9X9Y9Z9[9]9^9_9`9a9b9c9d9e9h9q9r9t9{9|:P:Q:kR:Y&SS&W!b$tR/s+X$l[ORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#a#d$Y$l%Y%]%a%c%d%e%g%k%v&O&Z&a&k&x&|'|)O)V*e*i*n+p+w,Y,`-j-o-w.R.r/T/U/V/X/]/`/b/y0`0j2a2y3^3`3a3q5j5x6S7h8[8q!j'`#[#j&S'r*}+Q,e/p0}2i3j6y9S9U9X9Y9Z9[9]9^9_9`9a9b9c9d9e9h9q9r9t9{9|:P:Q:kR*c%^$noORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#a#d$Y$l%Y%]%^%a%c%d%e%g%k%v&O&Z&a&k&x&|'|)O)V*e*i*n+p+w,Y,`-j-o-w.R.r/T/U/V/X/]/`/b/y0`0j2a2y3^3`3a3q5j5x6S7h8[8qQ'P!z!k:W#[#j&S'r*}+Q,e/p0}2i3j6y9S9U9X9Y9Z9[9]9^9_9`9a9b9c9d9e9h9q9r9t9{9|:P:Q:k!h#UZ!_$^%u%y&t&{'Y'Z'[']'b'f)j*y+]+v,U,[,o-m0_0i0y1v2S3o4P4S6R7e8Y8o8z9T!R9`'_'p+S,a/k/n0m0u0v0w0x0|1R3l4T4Y4Z5Z6O6_6c6d7x:a!d#WZ!_$^%u%y&t&{'[']'b'f)j*y+]+v,U,[,o-m0_0i0y1v2S3o4P4S6R7e8Y8o8z9T}9b'_'p+S,a/k/n0m0w0x0|1R3l4T4Y4Z5Z6O6_6c6d7x:a!`#[Z!_$^%u%y&t&{'b'f)j*y+]+v,U,[,o-m0_0i0y1v2S3o4P4S6R7e8Y8o8z9Tl(U#s&y(},w-P-e-f0g1u4^4r:[:f:gx:k'_'p+S,a/k/n0m0|1R3l4T4Y4Z5Z6O6_6c6d7x:a!`:n&u'd(X(_+n,S,l-T-q-t.e.g0Z0f1^1b2O2d2f2v4R4e4k4t4y5U5i6^6i6o7WZ:o0z4X6`7m8_&YcORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#[#a#d#j$Y$l%Y%]%^%a%c%d%e%g%k%v&O&S&Z&a&k&x&|'r'|)O)V*e*i*n*}+Q+p+w,Y,`,e-j-o-w.R.r/T/U/V/X/]/`/b/p/y0`0j0}2a2i2y3^3`3a3j3q5j5x6S6y7h8[8q9S9U9X9Y9Z9[9]9^9_9`9a9b9c9d9e9h9q9r9t9{9|:P:Q:kS#k`#lR1O,d&a_ORSTU`jk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#[#a#d#j#l$Y$l%Y%]%^%a%c%d%e%g%k%v&O&S&Z&a&k&x&|'r'|)O)V*e*i*n*}+Q+p+w,Y,`,d,e-j-o-w.R.r/T/U/V/X/]/`/b/p/y0`0j0}2a2i2y3^3`3a3j3q5j5x6S6y7h8[8q9S9U9X9Y9Z9[9]9^9_9`9a9b9c9d9e9h9q9r9t9{9|:P:Q:kS#f^#mT'i#h'mT#g^#mT'k#h'm&a`ORSTU`jk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#[#a#d#j#l$Y$l%Y%]%^%a%c%d%e%g%k%v&O&S&Z&a&k&x&|'r'|)O)V*e*i*n*}+Q+p+w,Y,`,d,e-j-o-w.R.r/T/U/V/X/]/`/b/p/y0`0j0}2a2i2y3^3`3a3j3q5j5x6S6y7h8[8q9S9U9X9Y9Z9[9]9^9_9`9a9b9c9d9e9h9q9r9t9{9|:P:Q:kT#k`#lQ#n`R't#l$nbORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#a#d$Y$l%Y%]%^%a%c%d%e%g%k%v&O&Z&a&k&x&|'|)O)V*e*i*n+p+w,Y,`-j-o-w.R.r/T/U/V/X/]/`/b/y0`0j2a2y3^3`3a3q5j5x6S7h8[8q!k:i#[#j&S'r*}+Q,e/p0}2i3j6y9S9U9X9Y9Z9[9]9^9_9`9a9b9c9d9e9h9q9r9t9{9|:P:Q:k#RdOSUj}!S!W!m!{#j$Y%Y%]%^%a%c%d%e%g%k&O&a'r)V*e*i*n+p,e-j-w.r/T/U/V/X/]/`/b0}2a2y3^3`3a5j5xt#ya!x$Q$R$V(R(T(U(](q(r,V-l1V1q:h:n:o!|&w!v#c#u#w&b'x(a)U)W)Z)x){+q-Q-S-v-x.f.i.q.s1`1j1x1{2P2b2x2z4d4p4x5f5k6x7U8R9k9m9o9u9w9y9}:RQ({$TQ,p'}c0{9g9l9n9p9v9x9z:O:St#va!x$Q$R$V(R(T(U(](q(r,V-l1V1q:h:n:oS(h#x(kQ(|$UQ-^(i!|:]!v#c#u#w&b'x(a)U)W)Z)x){+q-Q-S-v-x.f.i.q.s1`1j1x1{2P2b2x2z4d4p4x5f5k6x7U8R9k9m9o9u9w9y9}:Rb:^9g9l9n9p9v9x9z:O:SQ:b:lR:c:mt#ya!x$Q$R$V(R(T(U(](q(r,V-l1V1q:h:n:o!|&w!v#c#u#w&b'x(a)U)W)Z)x){+q-Q-S-v-x.f.i.q.s1`1j1x1{2P2b2x2z4d4p4x5f5k6x7U8R9k9m9o9u9w9y9}:Rc0{9g9l9n9p9v9x9z:O:SlfOSj}!m$Y%a%d%e%g*i*n/]/`Q(`#wQ*u%nQ*v%pR1_-Q$U#za!v!x#c#u#w$Q$R$V&b'x(R(T(U(](a(q(r)U)W)Z)x){+q,V-Q-S-l-v-x.f.i.q.s1V1`1j1q1x1{2P2b2x2z4d4p4x5f5k6x7U8R9g9k9l9m9n9o9p9u9v9w9x9y9z9}:O:R:S:h:n:oQ)z${Q.h)|Q2e.gR5W2fT(j#x(kS(j#x(kT2m.o2nQ)[$cQ-](hQ-})]Q.v*VQ2}.wQ5m3OQ6{5[Q7Y5nQ7z6|Q8T7ZQ8e7{Q8t8fQ8|8uR9Q8}l(R#s&y(},w-P-e-f0g1u4^4r:[:f:g!`9u&u'd(X(_+n,S,l-T-q-t.e.g0Z0f1^1b2O2d2f2v4R4e4k4t4y5U5i6^6i6o7WZ9v0z4X6`7m8_n(T#s&y(},u,w-P-e-f0g1u4^4r:[:f:g!b9w&u'd(X(_+n,S,l-T-q-t.e.g0Z0d0f1^1b2O2d2f2v4R4e4k4t4y5U5i6^6i6o7W]9x0z4X6`6a7m8_peOSjy}!m$Y%W%a%d%e%g*i*n/]/`Q%TxR*e%^peOSjy}!m$Y%W%a%d%e%g*i*n/]/`R%TxQ*O$|R.d)wqeOSjy}!m$Y%W%a%d%e%g*i*n/]/`Q.p*TS2w.t.uW5e2t2u2v2{U7T5g5h5iU8P7S7V7WQ8i8QR8w8jQ%[yR*_%WR3U.}R7]5pS$kp$pR.Y)hQ%azR*i%bR*o%hT/^*n/`QjOQ!mST$]j!mQ'z#rR,m'zQ!YQR%s!YQ!^RU%w!^%x*zQ%x!_R*z%yQ+V&TR/r+VQ,W&yR0h,WQ,Z&{S0k,Z0lR0l,[Q+e&_R/}+eQ&]!eQ*{%zT+`&]*{Q+Y&WR/t+YQ&p!rQ+y&nU+}&p+y0cR0c,OQ'm#hR,f'mQ#l`R's#lQ#bZU'c#b*x9fQ*x9TR9f'pQ,z(YW1Y,z1Z4b6hU1Z,{,|,}S4b1[1]R6h4c#q(P#s&u&y'd(X(_(x(y(}+n,Q,R,S,l,u,v,w-P-T-e-f-q-t.e.g0Z0d0e0f0g0z1^1b1u2O2d2f2v4R4V4W4X4^4e4k4r4t4y5U5i6^6`6a6b6i6o7W7m8_:[:f:gQ-R(_U1a-R1c4fQ1c-TR4f1bQ(k#xR-_(kQ(t#|R-h(tQ1y-qR4u1yQ)u$vR.c)uQ2h.jS5Y2h6zR6z5ZQ*Q$}R.m*QQ2n.oR5_2nQ.|*[S3S.|5qR5q3UQ.T)dW2X.T2Z5O6uQ2Z.WQ5O2YR6u5PQ)i$kR.Z)iQ/`*nR3d/`WiOSj!mQ%f}Q)Q$YQ*h%aQ*j%dQ*k%eQ*m%gQ/Z*iS/^*n/`R3c/]Q$[gQ%j!RQ%m!TQ%o!UQ%q!VQ)p$qQ)v$wQ*^%[Q*s%lS/P*_*bQ/g*rQ/h*uQ/i*vS/x+b2kQ1d-VQ1e-WQ1k-]Q2^.^Q2c.eQ2|.vQ3W/RQ3b/[Y3p/z/{0R0W5aQ4g1fQ4i1hQ4l1lQ5S2`Q5V2dQ5l2}Q5r3V[6Q3o3r3v3x3y7QQ6j4hQ6m4mQ6v5QQ7X5mQ7^5sW7d6R6W6Y6[Q7o6kQ7q6nQ7v6wQ7y6{Q8S7YU8W7e7j7lQ8`7pQ8b7sQ8d7zQ8k8TS8m8Y8^Q8r8aQ8s8eQ8x8oQ8{8tQ9O8zQ9P8|R9R9QQ$emQ&d!iU)_$f$g$hQ+P&QU+s&e&f&gQ-V(eS.P)`)aQ/o+RQ/w+bS0]+t+uQ1h-ZQ2R.QQ3m/uS3s/|0RQ4O0^Q4m1mS6U3t3yQ7g6VQ8Z7iR8p8]S#ta:hR)Y$bU#|a$b:hR-g(sQ#saS&u!v)ZQ&y!xQ'd#cQ(X#uQ(_#wQ(x$QQ(y$RQ(}$VQ+n&bQ,Q9kQ,R9mQ,S9oQ,l'xQ,u(RQ,v(TQ,w(UQ-P(]Q-T(aQ-e(qQ-f(rd-q)U-v.q1{2x4x5f6x7U8RQ-t)WQ.e)xQ.g){Q0Z+qQ0d9uQ0e9wQ0f9yQ0g,VQ0z9gQ1^-QQ1b-SQ1u-lQ2O-xQ2d.fQ2f.iQ2v.sQ4R9}Q4V9lQ4W9nQ4X9pQ4^1VQ4e1`Q4k1jQ4r1qQ4t1xQ4y2PQ5U2bQ5i2zQ6^:RQ6`9zQ6a9vQ6b9xQ6i4dQ6o4pQ7W5kQ7m:OQ8_:SQ:[:hQ:f:nR:g:oT'y#r'zlgOSj}!m$Y%a%d%e%g*i*n/]/`S!oU%cQ%l!SQ%r!WQ'Q!{Q'q#jS*b%Y%]Q*f%^Q*r%kQ*|&OQ+m&aQ,j'rQ-s)VQ/W*eQ0Y+pQ1Q,eQ1s-jQ1}-wQ2u.rQ3Y/TQ3Z/UQ3]/VQ3_/XQ3f/bQ4[0}Q5T2aQ5h2yQ5w3^Q5y3`Q5z3aQ7V5jR7`5x!vZOSUj}!S!m!{$Y%Y%]%^%a%c%d%e%g%k&O&a)V*e*i*n+p-j-w.r/T/U/V/X/]/`/b2a2y3^3`3a5j5xQ!_RQ!nTQ$^kQ%u!]Q%y!`Q&t!uQ&{!yQ'R#OQ'S#PQ'T#QQ'U#RQ'V#SQ'W#TQ'X#UQ'Y#VQ'Z#WQ'[#XQ']#YQ'_#[Q'b#aQ'f#dW'p#j'r,e0}Q)j$lQ*y%vS+S&S/pQ+]&ZQ+v&kQ,U&xQ,[&|Q,_9SQ,a9UQ,o'|Q-m)OQ/k*}Q/n+QQ0_+wQ0i,YQ0m9XQ0n9YQ0o9ZQ0p9[Q0q9]Q0r9^Q0s9_Q0t9`Q0u9aQ0v9bQ0w9cQ0x9dQ0y,`Q0|9hQ1R9eQ1v-oQ2S.RQ3l9qQ3o/yQ4P0`Q4S0jQ4T9rQ4Y9tQ4Z9{Q5Z2iQ6O3jQ6R3qQ6_9|Q6c:PQ6d:QQ7e6SQ7x6yQ8Y7hQ8o8[Q8z8qQ9T!WR:a:kT!XQ!YR!aRR&U!bS&Q!b+US+R&R&YR/u+[R&z!xR&}!yT!sU$WS!rU$WU$vrs*gS&n!q!tQ+{&oQ,O&rQ.b)tS0a+z+|R4Q0b[!dR!`$s&[)r+_h!pUrs!q!t$W&o&r)t+z+|0bQ/Y*gQ/l+OQ3i/fT:X&S)sT!fR$sS!eR$sS%z!`)rS+T&S)sQ+^&[R/v+_T&X!b$tQ#h^R'v#mT'l#h'mR1P,dT([#u(dR(b#wQ-r)UQ1|-vQ2t.qQ4v1{Q5g2xQ6r4xQ7S5fQ7w6xQ8Q7UR8j8RlhOSj}!m$Y%a%d%e%g*i*n/]/`Q%ZyR*^%WV$wrs*gR.k)}R*]%UQ$opR)o$pR)e$jT%_z%bT%`z%bT/_*n/`",
+-  nodeNames: "⚠ ArithOp ArithOp extends LineComment BlockComment Script ExportDeclaration export Star as VariableName from String ; default FunctionDeclaration async function VariableDefinition TypeParamList TypeDefinition ThisType this LiteralType ArithOp Number BooleanLiteral TemplateType VoidType void TypeofType typeof MemberExpression . ?. PropertyName [ TemplateString null super RegExp ] ArrayExpression Spread , } { ObjectExpression Property async get set PropertyDefinition Block : NewExpression new TypeArgList CompareOp < ) ( ArgList UnaryExpression await yield delete LogicOp BitOp ParenthesizedExpression ClassExpression class extends ClassBody MethodDeclaration Privacy static abstract override PrivatePropertyDefinition PropertyDeclaration readonly Optional TypeAnnotation Equals StaticBlock FunctionExpression ArrowFunction ParamList ParamList ArrayPattern ObjectPattern PatternProperty Privacy readonly Arrow MemberExpression PrivatePropertyName BinaryExpression ArithOp ArithOp ArithOp ArithOp BitOp CompareOp instanceof in const CompareOp BitOp BitOp BitOp LogicOp LogicOp ConditionalExpression LogicOp LogicOp AssignmentExpression UpdateOp PostfixExpression CallExpression TaggedTemplateExpression DynamicImport import ImportMeta JSXElement JSXSelfCloseEndTag JSXStartTag JSXSelfClosingTag JSXIdentifier JSXNamespacedName JSXMemberExpression JSXSpreadAttribute JSXAttribute JSXAttributeValue JSXEscape JSXEndTag JSXOpenTag JSXFragmentTag JSXText JSXEscape JSXStartCloseTag JSXCloseTag PrefixCast ArrowFunction TypeParamList SequenceExpression KeyofType keyof UniqueType unique ImportType InferredType infer TypeName ParenthesizedType FunctionSignature ParamList NewSignature IndexedType TupleType Label ArrayType ReadonlyType ObjectType MethodType PropertyType IndexSignature CallSignature TypePredicate is NewSignature new UnionType LogicOp IntersectionType LogicOp ConditionalType ParameterizedType ClassDeclaration abstract implements type VariableDeclaration let var TypeAliasDeclaration InterfaceDeclaration interface EnumDeclaration enum EnumBody NamespaceDeclaration namespace module AmbientDeclaration declare GlobalDeclaration global ClassDeclaration ClassBody MethodDeclaration AmbientFunctionDeclaration ExportGroup VariableName VariableName ImportDeclaration ImportGroup ForStatement for ForSpec ForInSpec ForOfSpec of WhileStatement while WithStatement with DoStatement do IfStatement if else SwitchStatement switch SwitchBody CaseLabel case DefaultLabel TryStatement try catch finally ReturnStatement return ThrowStatement throw BreakStatement break ContinueStatement continue DebuggerStatement debugger LabeledStatement ExpressionStatement",
+-  maxTerm: 330,
++  states: "$1dO`QYOOO'QQ!LdO'#CgO'XOSO'#DSO)dQYO'#DXO)tQYO'#DdO){QYO'#DnO-xQYO'#DtOOQO'#EX'#EXO.]QWO'#EWO.bQWO'#EWOOQ!LS'#Eb'#EbO0aQ!LdO'#IsO2wQ!LdO'#ItO3eQWO'#EvO3jQpO'#F_OOQ!LS'#FO'#FOO3uO!bO'#FOO4TQWO'#FfO5bQWO'#FeOOQ!LS'#It'#ItOOQ!LQ'#Is'#IsOOQQ'#J^'#J^O5gQWO'#HlO5lQ!LYO'#HmOOQQ'#Ie'#IeOOQQ'#Hn'#HnQ`QYOOO){QYO'#DfO5tQWO'#GYO5yQ#tO'#ClO6XQWO'#EVO6dQWO'#EcO6iQ#tO'#E}O7TQWO'#GYO7YQWO'#G^O7eQWO'#G^O7sQWO'#GaO7sQWO'#GbO7sQWO'#GdO5tQWO'#GgO8dQWO'#GjO9rQWO'#CcO:SQWO'#GwO:[QWO'#G}O:[QWO'#HPO`QYO'#HRO:[QWO'#HTO:[QWO'#HWO:aQWO'#H^O:fQ!LZO'#HbO){QYO'#HdO:qQ!LZO'#HfO:|Q!LZO'#HhO5lQ!LYO'#HjO){QYO'#IuOOOS'#Hp'#HpO;XOSO,59nOOQ!LS,59n,59nO=jQbO'#CgO=tQYO'#HqO>RQWO'#IvO@QQbO'#IvO'dQYO'#IvO@XQWO,59sO@oQ&jO'#D^OAhQWO'#EXOAuQWO'#JROBQQWO'#JQOBYQWO,5:uOB_QWO'#JPOBfQWO'#DuO5yQ#tO'#EVOBtQWO'#EVOCPQ`O'#E}OOQ!LS,5:O,5:OOCXQYO,5:OOEVQ!LdO,5:YOEsQWO,5:`OF^Q!LYO'#JOO7YQWO'#I}OFeQWO'#I}OFmQWO,5:tOFrQWO'#I}OGQQYO,5:rOIQQWO'#ESOJ[QWO,5:rOKkQWO'#DhOKrQYO'#DmOK|Q&jO,5:{O){QYO,5:{OOQQ'#En'#EnOOQQ'#Ep'#EpO){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}OOQQ'#Et'#EtOLUQYO,5;_OOQ!LS,5;d,5;dOOQ!LS,5;e,5;eONUQWO,5;eOOQ!LS,5;f,5;fO){QYO'#H{ONZQ!LYO,5<RONuQWO,5:}O){QYO,5;bON|QpO'#FTO! yQpO'#JVO! eQpO'#JVO!!QQpO'#JVOOQO'#JV'#JVO!!fQpO,5;mOOOO,5;y,5;yO!!wQYO'#FaOOOO'#Hz'#HzO3uO!bO,5;jO!#OQpO'#FcOOQ!LS,5;j,5;jO!#oQ,UO'#CqOOQ!LS'#Ct'#CtO!$SQWO'#CtO!$XOSO'#CxO!$uQ#tO,5<OO!$|QWO,5<QO!&YQWO'#FpO!&gQWO'#FqO!&lQWO'#FuO!'nQ&jO'#FyO!(aQ,UO'#InOOQ!LS'#In'#InO!(kQWO'#ImO!(yQWO'#IlOOQ!LS'#Cr'#CrOOQ!LS'#Cy'#CyO!)RQWO'#C{OJaQWO'#FhOJaQWO'#FjO!)WQWO'#FlO!)]QWO'#FmO!)bQWO'#FsOJaQWO'#FxO!)gQWO'#EYO!*OQWO,5<PO`QYO,5>WOOQQ'#Ih'#IhOOQQ,5>X,5>XOOQQ-E;l-E;lO!+zQ!LdO,5:QOOQ!LQ'#Co'#CoO!,kQ#tO,5<tOOQO'#Ce'#CeO!,|QWO'#CpO!-UQ!LYO'#IiO5bQWO'#IiO:aQWO,59WO!-dQpO,59WO!-lQ#tO,59WO5yQ#tO,59WO!-wQWO,5:rO!.PQWO'#GvO!.[QWO'#JbO){QYO,5;gO!.dQ&jO,5;iO!.iQWO,5=aO!.nQWO,5=aO!.sQWO,5=aO5lQ!LYO,5=aO5tQWO,5<tO!/RQWO'#EZO!/dQ&jO'#E[OOQ!LQ'#JP'#JPO!/uQ!LYO'#J_O5lQ!LYO,5<xO7sQWO,5=OOOQO'#Cq'#CqO!0QQpO,5<{O!0YQ#tO,5<|O!0eQWO,5=OO!0jQ`O,5=RO:aQWO'#GlO5tQWO'#GnO!0rQWO'#GnO5yQ#tO'#GqO!0wQWO'#GqOOQQ,5=U,5=UO!0|QWO'#GrO!1UQWO'#ClO!1ZQWO,58}O!1eQWO,58}O!3gQYO,58}OOQQ,58},58}O!3tQ!LYO,58}O){QYO,58}O!4PQYO'#GyOOQQ'#Gz'#GzOOQQ'#G{'#G{O`QYO,5=cO!4aQWO,5=cO){QYO'#DtO`QYO,5=iO`QYO,5=kO!4fQWO,5=mO`QYO,5=oO!4kQWO,5=rO!4pQYO,5=xOOQQ,5=|,5=|O){QYO,5=|O5lQ!LYO,5>OOOQQ,5>Q,5>QO!8qQWO,5>QOOQQ,5>S,5>SO!8qQWO,5>SOOQQ,5>U,5>UO!8vQ`O,5?aOOOS-E;n-E;nOOQ!LS1G/Y1G/YO!8{QbO,5>]O){QYO,5>]OOQO-E;o-E;oO!9VQWO,5?bO!9_QbO,5?bO!9fQWO,5?lOOQ!LS1G/_1G/_O!9nQpO'#DQOOQO'#Ix'#IxO){QYO'#IxO!:]QpO'#IxO!:zQpO'#D_O!;]Q&jO'#D_O!=hQYO'#D_O!=oQWO'#IwO!=wQWO,59xO!=|QWO'#E]O!>[QWO'#JSO!>dQWO,5:vO!>zQ&jO'#D_O){QYO,5?mO!?UQWO'#HvO!9fQWO,5?lOOQ!LQ1G0a1G0aO!@bQ&jO'#DxOOQ!LS,5:a,5:aO){QYO,5:aOIQQWO,5:aO!@iQWO,5:aO:aQWO,5:qO!-dQpO,5:qO!-lQ#tO,5:qO5yQ#tO,5:qOOQ!LS1G/j1G/jOOQ!LS1G/z1G/zOOQ!LQ'#ER'#ERO){QYO,5?jO!@tQ!LYO,5?jO!AVQ!LYO,5?jO!A^QWO,5?iO!AfQWO'#HxO!A^QWO,5?iOOQ!LQ1G0`1G0`O7YQWO,5?iOOQ!LS1G0^1G0^O!BQQ!LdO1G0^O!BqQ!LbO,5:nOOQ!LS'#Fo'#FoO!C_Q!LdO'#InOGQQYO1G0^O!E^Q#tO'#IyO!EhQWO,5:SO!EmQbO'#IzO){QYO'#IzO!EwQWO,5:XOOQ!LS'#DQ'#DQOOQ!LS1G0g1G0gO!E|QWO1G0gO!H_Q!LdO1G0iO!HfQ!LdO1G0iO!JyQ!LdO1G0iO!KQQ!LdO1G0iO!MXQ!LdO1G0iO!MlQ!LdO1G0iO#!]Q!LdO1G0iO#!dQ!LdO1G0iO#$wQ!LdO1G0iO#%OQ!LdO1G0iO#&sQ!LdO1G0iO#)mQ7^O'#CgO#+hQ7^O1G0yO#-cQ7^O'#ItOOQ!LS1G1P1G1PO#-vQ!LdO,5>gOOQ!LQ-E;y-E;yO#.gQ!LdO1G0iOOQ!LS1G0i1G0iO#0iQ!LdO1G0|O#1YQpO,5;qO#1bQpO,5;rO#1jQpO'#FYO#2RQWO'#FXOOQO'#JW'#JWOOQO'#Hy'#HyO#2WQpO1G1XOOQ!LS1G1X1G1XOOOO1G1d1G1dO#2iQ7^O'#IsO#2sQWO,5;{OLUQYO,5;{OOOO-E;x-E;xOOQ!LS1G1U1G1UOOQ!LS,5;},5;}O#2xQpO,5;}OOQ!LS,59`,59`OIQQWO'#IpOOOS'#Ho'#HoO#2}OSO,59dOOQ!LS,59d,59dO){QYO1G1jO!)]QWO'#H}O#3YQWO,5<cOOQ!LS,5<`,5<`OOQO'#GT'#GTOJaQWO,5<nOOQO'#GV'#GVOJaQWO,5<pOJaQWO,5<rOOQO1G1l1G1lO#3eQ`O'#CoO#3xQ`O,5<[O#4PQWO'#JZO5tQWO'#JZO#4_QWO,5<^OJaQWO,5<]O#4dQ`O'#FoO#4qQ`O'#J[O#4{QWO'#J[OIQQWO'#J[O#5QQWO,5<aOOQ!LQ'#Dc'#DcO#5VQWO'#FrO#5bQpO'#FzO!'iQ&jO'#FzO!'iQ&jO'#F|O#5sQWO'#F}O!)bQWO'#GQOOQO'#IP'#IPO#5xQ&jO,5<eOOQ!LS,5<e,5<eO#6PQ&jO'#FzO#6_Q&jO'#F{O#6gQ&jO'#F{OOQ!LS,5<s,5<sOJaQWO,5?XOJaQWO,5?XO#6lQWO'#IQO#6wQWO,5?WOOQ!LS'#Cg'#CgO#7kQ#tO,59gOOQ!LS,59g,59gO#8^Q#tO,5<SO#9PQ#tO,5<UO#9ZQWO,5<WOOQ!LS,5<X,5<XO#9`QWO,5<_O#9eQ#tO,5<dOGQQYO1G1kO#9uQWO1G1kOOQQ1G3r1G3rOOQ!LS1G/l1G/lONUQWO1G/lOOQQ1G2`1G2`OIQQWO1G2`O){QYO1G2`OIQQWO1G2`O#9zQWO1G2`O#:YQWO,59[O#;cQWO'#ESOOQ!LQ,5?T,5?TO#;mQ!LYO,5?TOOQQ1G.r1G.rO:aQWO1G.rO!-dQpO1G.rO!-lQ#tO1G.rO#;{QWO1G0^O#<QQWO'#CgO#<]QWO'#JcO#<eQWO,5=bO#<jQWO'#JcO#<oQWO'#JcO#<tQWO'#IYO#=SQWO,5?|O#=[QbO1G1ROOQ!LS1G1T1G1TO5tQWO1G2{O#=cQWO1G2{O#=hQWO1G2{O#=mQWO1G2{OOQQ1G2{1G2{O#=rQ#tO1G2`O7YQWO'#JQO7YQWO'#E]O7YQWO'#ISO#>TQ!LYO,5?yOOQQ1G2d1G2dO!0eQWO1G2jOIQQWO1G2gO#>`QWO1G2gOOQQ1G2h1G2hOIQQWO1G2hO#>eQWO1G2hO#>mQ&jO'#GfOOQQ1G2j1G2jO!'iQ&jO'#IUO!0jQ`O1G2mOOQQ1G2m1G2mOOQQ,5=W,5=WO#>uQ#tO,5=YO5tQWO,5=YO#5sQWO,5=]O5bQWO,5=]O!-dQpO,5=]O!-lQ#tO,5=]O5yQ#tO,5=]O#?WQWO'#JaO#?cQWO,5=^OOQQ1G.i1G.iO#?hQ!LYO1G.iO#?sQWO1G.iO!)RQWO1G.iO5lQ!LYO1G.iO#?xQbO,5@OO#@SQWO,5@OO#@_QYO,5=eO#@fQWO,5=eO7YQWO,5@OOOQQ1G2}1G2}O`QYO1G2}OOQQ1G3T1G3TOOQQ1G3V1G3VO:[QWO1G3XO#@kQYO1G3ZO#DfQYO'#HYOOQQ1G3^1G3^O:aQWO1G3dO#DsQWO1G3dO5lQ!LYO1G3hOOQQ1G3j1G3jOOQ!LQ'#Fv'#FvO5lQ!LYO1G3lO5lQ!LYO1G3nOOOS1G4{1G4{O#D{Q`O,5<RO#ETQbO1G3wO#E_QWO1G4|O#EgQWO1G5WO#EoQWO,5?dOLUQYO,5:wO7YQWO,5:wO:aQWO,59yOLUQYO,59yO!-dQpO,59yO#EtQ7^O,59yOOQO,5:w,5:wO#FOQ&jO'#HrO#FfQWO,5?cOOQ!LS1G/d1G/dO#FnQ&jO'#HwO#GSQWO,5?nOOQ!LQ1G0b1G0bO!;]Q&jO,59yO#G[QbO1G5XOOQO,5>b,5>bO7YQWO,5>bOOQO-E;t-E;tOOQ!LQ'#EO'#EOO#GfQ!LrO'#EPO!@YQ&jO'#DyOOQO'#Hu'#HuO#HQQ&jO,5:dOOQ!LS,5:d,5:dO#HXQ&jO'#DyO#HjQ&jO'#DyO#HqQ&jO'#EUO#HtQ&jO'#EPO#IRQ&jO'#EPO!@YQ&jO'#EPO#IfQWO1G/{O#IkQ`O1G/{OOQ!LS1G/{1G/{O){QYO1G/{OIQQWO1G/{OOQ!LS1G0]1G0]O:aQWO1G0]O!-dQpO1G0]O!-lQ#tO1G0]O#IrQ!LdO1G5UO){QYO1G5UO#JSQ!LYO1G5UO#JeQWO1G5TO7YQWO,5>dOOQO,5>d,5>dO#JmQWO,5>dOOQO-E;v-E;vO#JeQWO1G5TO#J{Q!LdO,59gO#LzQ!LdO,5<SO#N|Q!LdO,5<UO$#OQ!LdO,5<dOOQ!LS7+%x7+%xO$%WQ!LdO7+%xO$%wQWO'#HsO$&RQWO,5?eOOQ!LS1G/n1G/nO$&ZQYO'#HtO$&hQWO,5?fO$&pQbO,5?fOOQ!LS1G/s1G/sOOQ!LS7+&R7+&RO$&zQ7^O,5:YO){QYO7+&eO$'UQ7^O,5:QOOQO1G1]1G1]OOQO1G1^1G1^O$'cQMhO,5;tOLUQYO,5;sOOQO-E;w-E;wOOQ!LS7+&s7+&sOOOO7+'O7+'OOOOO1G1g1G1gO$'nQWO1G1gOOQ!LS1G1i1G1iO$'sQ`O,5?[OOOS-E;m-E;mOOQ!LS1G/O1G/OO$'zQ!LdO7+'UOOQ!LS,5>i,5>iO$(kQWO,5>iOOQ!LS1G1}1G1}P$(pQWO'#H}POQ!LS-E;{-E;{O$)aQ#tO1G2YO$*SQ#tO1G2[O$*^Q#tO1G2^OOQ!LS1G1v1G1vO$*eQWO'#H|O$*sQWO,5?uO$*sQWO,5?uO$*{QWO,5?uO$+WQWO,5?uOOQO1G1x1G1xO$+fQ#tO1G1wO$+vQWO'#IOO$,WQWO,5?vOIQQWO,5?vO$,`Q`O,5?vOOQ!LS1G1{1G1{O5lQ!LYO,5<fO5lQ!LYO,5<gO$,jQWO,5<gO#5nQWO,5<gO!-dQpO,5<fO$,oQWO,5<hO5lQ!LYO,5<iO$,jQWO,5<lOOQO-E;}-E;}OOQ!LS1G2P1G2PO!'iQ&jO,5<fO$,wQWO,5<gO!'iQ&jO,5<hO!'iQ&jO,5<gO$-SQ#tO1G4sO$-^Q#tO1G4sOOQO,5>l,5>lOOQO-E<O-E<OO!.dQ&jO,59iO){QYO,59iO$-kQWO1G1rOJaQWO1G1yO$-pQ!LdO7+'VOOQ!LS7+'V7+'VOGQQYO7+'VOOQ!LS7+%W7+%WO$.aQ`O'#J]O#IfQWO7+'zO$.kQWO7+'zO$.sQ`O7+'zOOQQ7+'z7+'zOIQQWO7+'zO){QYO7+'zOIQQWO7+'zOOQO1G.v1G.vO$.}Q!LbO'#CgO$/_Q!LbO,5<jO$/|QWO,5<jOOQ!LQ1G4o1G4oOOQQ7+$^7+$^O:aQWO7+$^O!-dQpO7+$^OGQQYO7+%xO$0RQWO'#IXO$0aQWO,5?}OOQO1G2|1G2|O5tQWO,5?}O$0aQWO,5?}O$0iQWO,5?}OOQO,5>t,5>tOOQO-E<W-E<WOOQ!LS7+&m7+&mO$0nQWO7+(gO5lQ!LYO7+(gO5tQWO7+(gO$0sQWO7+(gO$0xQWO7+'zOOQ!LQ,5>n,5>nOOQ!LQ-E<Q-E<QOOQQ7+(U7+(UO$1WQ!LbO7+(ROIQQWO7+(RO$1bQ`O7+(SOOQQ7+(S7+(SOIQQWO7+(SO$1iQWO'#J`O$1tQWO,5=QOOQO,5>p,5>pOOQO-E<S-E<SOOQQ7+(X7+(XO$2nQ&jO'#GoOOQQ1G2t1G2tOIQQWO1G2tO){QYO1G2tOIQQWO1G2tO$2uQWO1G2tO$3TQ#tO1G2tO5lQ!LYO1G2wO#5sQWO1G2wO5bQWO1G2wO!-dQpO1G2wO!-lQ#tO1G2wO$3fQWO'#IWO$3qQWO,5?{O$3yQ&jO,5?{OOQ!LQ1G2x1G2xOOQQ7+$T7+$TO$4OQWO7+$TO5lQ!LYO7+$TO$4TQWO7+$TO){QYO1G5jO){QYO1G5kO$4YQYO1G3PO$4aQWO1G3PO$4fQYO1G3PO$4mQ!LYO1G5jOOQQ7+(i7+(iO5lQ!LYO7+(sO`QYO7+(uOOQQ'#Jf'#JfOOQQ'#IZ'#IZO$4wQYO,5=tOOQQ,5=t,5=tO){QYO'#HZO$5UQWO'#H]OOQQ7+)O7+)OO$5ZQYO7+)OO7YQWO7+)OOOQQ7+)S7+)SOOQQ7+)W7+)WOOQQ7+)Y7+)YOOQO1G5O1G5OO$9XQ7^O1G0cO$9cQWO1G0cOOQO1G/e1G/eO$9nQ7^O1G/eO:aQWO1G/eOLUQYO'#D_OOQO,5>^,5>^OOQO-E;p-E;pOOQO,5>c,5>cOOQO-E;u-E;uO!-dQpO1G/eOOQO1G3|1G3|O:aQWO,5:eOOQO,5:k,5:kO){QYO,5:kO$9xQ!LYO,5:kO$:TQ!LYO,5:kO!-dQpO,5:eOOQO-E;s-E;sOOQ!LS1G0O1G0OO!@YQ&jO,5:eO$:cQ&jO,5:eO$:tQ!LrO,5:kO$;`Q&jO,5:eO!@YQ&jO,5:kOOQO,5:p,5:pO$;gQ&jO,5:kO$;tQ!LYO,5:kOOQ!LS7+%g7+%gO#IfQWO7+%gO#IkQ`O7+%gOOQ!LS7+%w7+%wO:aQWO7+%wO!-dQpO7+%wO$<YQ!LdO7+*pO){QYO7+*pOOQO1G4O1G4OO7YQWO1G4OO$<jQWO7+*oO$<rQ!LdO1G2YO$>tQ!LdO1G2[O$@vQ!LdO1G1wO$COQ#tO,5>_OOQO-E;q-E;qO$CYQbO,5>`O){QYO,5>`OOQO-E;r-E;rO$CdQWO1G5QO$ClQ7^O1G0^O$EsQ7^O1G0iO$EzQ7^O1G0iO$G{Q7^O1G0iO$HSQ7^O1G0iO$IwQ7^O1G0iO$J[Q7^O1G0iO$LiQ7^O1G0iO$LpQ7^O1G0iO$NqQ7^O1G0iO$NxQ7^O1G0iO%!mQ7^O1G0iO%#QQ!LdO<<JPO%#qQ7^O1G0iO%%aQ7^O'#InO%'^Q7^O1G0|OLUQYO'#F[OOQO'#JX'#JXOOQO1G1`1G1`O%'kQWO1G1_O%'pQ7^O,5>gOOOO7+'R7+'ROOOS1G4v1G4vOOQ!LS1G4T1G4TOJaQWO7+'xO%'zQWO,5>hO5tQWO,5>hOOQO-E;z-E;zO%(YQWO1G5aO%(YQWO1G5aO%(bQWO1G5aO%(mQ`O,5>jO%(wQWO,5>jOIQQWO,5>jOOQO-E;|-E;|O%(|Q`O1G5bO%)WQWO1G5bOOQO1G2Q1G2QOOQO1G2R1G2RO5lQ!LYO1G2RO$,jQWO1G2RO5lQ!LYO1G2QO%)`QWO1G2SOIQQWO1G2SOOQO1G2T1G2TO5lQ!LYO1G2WO!-dQpO1G2QO#5nQWO1G2RO%)eQWO1G2SO%)mQWO1G2ROJaQWO7+*_OOQ!LS1G/T1G/TO%)xQWO1G/TOOQ!LS7+'^7+'^O%)}Q#tO7+'eO%*_Q!LdO<<JqOOQ!LS<<Jq<<JqOIQQWO'#IRO%+OQWO,5?wOOQQ<<Kf<<KfOIQQWO<<KfO#IfQWO<<KfO%+WQWO<<KfO%+`Q`O<<KfOIQQWO1G2UOOQQ<<Gx<<GxO:aQWO<<GxO%+jQ!LdO<<IdOOQ!LS<<Id<<IdOOQO,5>s,5>sO%,ZQWO,5>sO#<oQWO,5>sOOQO-E<V-E<VO%,`QWO1G5iO%,`QWO1G5iO5tQWO1G5iO%,hQWO<<LROOQQ<<LR<<LRO%,mQWO<<LRO5lQ!LYO<<LRO){QYO<<KfOIQQWO<<KfOOQQ<<Km<<KmO$1WQ!LbO<<KmOOQQ<<Kn<<KnO$1bQ`O<<KnO%,rQ&jO'#ITO%,}QWO,5?zOLUQYO,5?zOOQQ1G2l1G2lO#GfQ!LrO'#EPO!@YQ&jO'#GpOOQO'#IV'#IVO%-VQ&jO,5=ZOOQQ,5=Z,5=ZO%-^Q&jO'#EPO%-iQ&jO'#EPO%.QQ&jO'#EPO%.[Q&jO'#GpO%.mQWO7+(`O%.rQWO7+(`O%.zQ`O7+(`OOQQ7+(`7+(`OIQQWO7+(`O){QYO7+(`OIQQWO7+(`O%/UQWO7+(`OOQQ7+(c7+(cO5lQ!LYO7+(cO#5sQWO7+(cO5bQWO7+(cO!-dQpO7+(cO%/dQWO,5>rOOQO-E<U-E<UOOQO'#Gs'#GsO%/oQWO1G5gO5lQ!LYO<<GoOOQQ<<Go<<GoO%/wQWO<<GoO%/|QWO7++UO%0RQWO7++VOOQQ7+(k7+(kO%0WQWO7+(kO%0]QYO7+(kO%0dQWO7+(kO){QYO7++UO){QYO7++VOOQQ<<L_<<L_OOQQ<<La<<LaOOQQ-E<X-E<XOOQQ1G3`1G3`O%0iQWO,5=uOOQQ,5=w,5=wO:aQWO<<LjO%0nQWO<<LjOLUQYO7+%}OOQO7+%P7+%PO%0sQ7^O1G5XO:aQWO7+%POOQO1G0P1G0PO%0}Q!LdO1G0VOOQO1G0V1G0VO){QYO1G0VO%1XQ!LYO1G0VO:aQWO1G0PO!-dQpO1G0PO!@YQ&jO1G0PO%1dQ!LYO1G0VO%1rQ&jO1G0PO%2TQ!LYO1G0VO%2iQ!LrO1G0VO%2sQ&jO1G0PO!@YQ&jO1G0VOOQ!LS<<IR<<IROOQ!LS<<Ic<<IcO:aQWO<<IcO%2zQ!LdO<<N[OOQO7+)j7+)jO%3[Q!LdO7+'eO%5dQbO1G3zO%5nQ7^O7+%xO%5{Q7^O,59gO%7xQ7^O,5<SO%9uQ7^O,5<UO%;rQ7^O,5<dO%=bQ7^O7+'UO%=oQ7^O7+'VO%=|QWO,5;vOOQO7+&y7+&yO%>RQ#tO<<KdOOQO1G4S1G4SO%>cQWO1G4SO%>nQWO1G4SO%>|QWO7+*{O%>|QWO7+*{OIQQWO1G4UO%?UQ`O1G4UO%?`QWO7+*|OOQO7+'m7+'mO5lQ!LYO7+'mOOQO7+'l7+'lO$,jQWO7+'nO%?hQ`O7+'nOOQO7+'r7+'rO5lQ!LYO7+'lO$,jQWO7+'mO%?oQWO7+'nOIQQWO7+'nO#5nQWO7+'mO%?tQ#tO<<MyOOQ!LS7+$o7+$oO%@OQ`O,5>mOOQO-E<P-E<PO#IfQWOANAQOOQQANAQANAQOIQQWOANAQO%@YQ!LbO7+'pOOQQAN=dAN=dO5tQWO1G4_OOQO1G4_1G4_O%@gQWO1G4_O%@lQWO7++TO%@lQWO7++TO5lQ!LYOANAmO%@tQWOANAmOOQQANAmANAmO%@yQWOANAQO%ARQ`OANAQOOQQANAXANAXOOQQANAYANAYO%A]QWO,5>oOOQO-E<R-E<RO%AhQ7^O1G5fO#5sQWO,5=[O5bQWO,5=[O!-dQpO,5=[OOQO-E<T-E<TOOQQ1G2u1G2uO$:tQ!LrO,5:kO!@YQ&jO,5=[O%ArQ&jO,5=[O%BTQ&jO,5:kOOQQ<<Kz<<KzOIQQWO<<KzO%.mQWO<<KzO%B_QWO<<KzO%BgQ`O<<KzO){QYO<<KzOIQQWO<<KzOOQQ<<K}<<K}O5lQ!LYO<<K}O#5sQWO<<K}O5bQWO<<K}O%BqQ&jO1G4^O%BvQWO7++ROOQQAN=ZAN=ZO5lQ!LYOAN=ZOOQQ<<Np<<NpOOQQ<<Nq<<NqOOQQ<<LV<<LVO%COQWO<<LVO%CTQYO<<LVO%C[QWO<<NpO%CaQWO<<NqOOQQ1G3a1G3aOOQQANBUANBUO:aQWOANBUO%CfQ7^O<<IiOOQO<<Hk<<HkOOQO7+%q7+%qO%0}Q!LdO7+%qO){QYO7+%qOOQO7+%k7+%kO:aQWO7+%kO!-dQpO7+%kO%CpQ!LYO7+%qO!@YQ&jO7+%kO%C{Q!LYO7+%qO%DZQ&jO7+%kO%DlQ!LYO7+%qOOQ!LSAN>}AN>}O%EQQ!LdO<<KdO%GYQ7^O<<JPO%GgQ7^O1G1wO%IVQ7^O1G2YO%KSQ7^O1G2[O%MPQ7^O<<JqO%M^Q7^O<<IdOOQO1G1b1G1bOOQO7+)n7+)nO%MkQWO7+)nO%MvQWO<<NgO%NOQ`O7+)pOOQO<<KX<<KXO5lQ!LYO<<KYO$,jQWO<<KYOOQO<<KW<<KWO5lQ!LYO<<KXO%NYQ`O<<KYO$,jQWO<<KXOOQQG26lG26lO#IfQWOG26lOOQO7+)y7+)yO5tQWO7+)yO%NaQWO<<NoOOQQG27XG27XO5lQ!LYOG27XOIQQWOG26lOLUQYO1G4ZO%NiQWO7++QO5lQ!LYO1G2vO#5sQWO1G2vO5bQWO1G2vO!-dQpO1G2vO!@YQ&jO1G2vO%2iQ!LrO1G0VO%NqQ&jO1G2vO%.mQWOANAfOOQQANAfANAfOIQQWOANAfO& SQWOANAfO& [Q`OANAfOOQQANAiANAiO5lQ!LYOANAiO#5sQWOANAiOOQO'#Gt'#GtOOQO7+)x7+)xOOQQG22uG22uOOQQANAqANAqO& fQWOANAqOOQQAND[AND[OOQQAND]AND]O& kQYOG27pOOQO<<I]<<I]O%0}Q!LdO<<I]OOQO<<IV<<IVO:aQWO<<IVO){QYO<<I]O!-dQpO<<IVO&%iQ!LYO<<I]O!@YQ&jO<<IVO&%tQ!LYO<<I]O&&SQ7^O7+'eOOQO<<MY<<MYOOQOAN@tAN@tO5lQ!LYOAN@tOOQOAN@sAN@sO$,jQWOAN@tO5lQ!LYOAN@sOOQQLD,WLD,WOOQO<<Me<<MeOOQQLD,sLD,sO#IfQWOLD,WO&'rQ7^O7+)uOOQO7+(b7+(bO5lQ!LYO7+(bO#5sQWO7+(bO5bQWO7+(bO!-dQpO7+(bO!@YQ&jO7+(bOOQQG27QG27QO%.mQWOG27QOIQQWOG27QOOQQG27TG27TO5lQ!LYOG27TOOQQG27]G27]O:aQWOLD-[OOQOAN>wAN>wOOQOAN>qAN>qO%0}Q!LdOAN>wO:aQWOAN>qO){QYOAN>wO!-dQpOAN>qO&'|Q!LYOAN>wO&(XQ7^O<<KdOOQOG26`G26`O5lQ!LYOG26`OOQOG26_G26_OOQQ!$( r!$( rOOQO<<K|<<K|O5lQ!LYO<<K|O#5sQWO<<K|O5bQWO<<K|O!-dQpO<<K|OOQQLD,lLD,lO%.mQWOLD,lOOQQLD,oLD,oOOQQ!$(!v!$(!vOOQOG24cG24cOOQOG24]G24]O%0}Q!LdOG24cO:aQWOG24]O){QYOG24cOOQOLD+zLD+zOOQOANAhANAhO5lQ!LYOANAhO#5sQWOANAhO5bQWOANAhOOQQ!$(!W!$(!WOOQOLD)}LD)}OOQOLD)wLD)wO%0}Q!LdOLD)}OOQOG27SG27SO5lQ!LYOG27SO#5sQWOG27SOOQO!$'Mi!$'MiOOQOLD,nLD,nO5lQ!LYOLD,nOOQO!$(!Y!$(!YOLUQYO'#DnO&)wQbO'#IsOLUQYO'#DfO&*OQ!LdO'#CgO&*iQbO'#CgO&*yQYO,5:rOLUQYO,5:}OLUQYO,5:}OLUQYO,5:}OLUQYO,5:}OLUQYO,5:}OLUQYO,5:}OLUQYO,5:}OLUQYO,5:}OLUQYO,5:}OLUQYO,5:}OLUQYO,5:}OLUQYO'#H{O&,yQWO,5<RO&.]QWO,5:}OLUQYO,5;bO!)RQWO'#C{O!)RQWO'#C{OIQQWO'#FhO&-RQWO'#FhOIQQWO'#FjO&-RQWO'#FjOIQQWO'#FxO&-RQWO'#FxOLUQYO,5?mO&*yQYO1G0^O&.dQ7^O'#CgOLUQYO1G1jOIQQWO,5<nO&-RQWO,5<nOIQQWO,5<pO&-RQWO,5<pOIQQWO,5<]O&-RQWO,5<]O&*yQYO1G1kOLUQYO7+&eOIQQWO1G1yO&-RQWO1G1yO&*yQYO7+'VO&*yQYO7+%xOIQQWO7+'xO&-RQWO7+'xO&.nQWO'#EWO&.sQWO'#EWO&.{QWO'#EvO&/QQWO'#EcO&/VQWO'#JRO&/bQWO'#JPO&/mQWO,5:rO&/rQ#tO,5<OO&/yQWO'#FqO&0OQWO'#FqO&0TQWO,5<PO&0]QWO,5:rO&0eQ7^O1G0yO&0lQWO,5<_O&0qQWO,5<_O&0vQWO1G1kO&0{QWO1G0^O&1QQ#tO1G2^O&1XQ#tO1G2^O4TQWO'#FfO5bQWO'#FeOBtQWO'#EVOLUQYO,5;_O!)bQWO'#FsO!)bQWO'#FsOJaQWO,5<rOJaQWO,5<r",
++  stateData: "&2W~O'VOS'WOSSOSTOS~OPTOQTOWyO]cO^hOanObmOgcOiTOjcOkcOnTOpTOuROwcOxcOycO!PSO!ZkO!`UO!cTO!dTO!eTO!fTO!gTO!jlO#`sO#ppO#t^O$}qO%PtO%RrO%SrO%VuO%XvO%[wO%]wO%_xO%lzO%r{O%t|O%v}O%x!OO%{!PO&R!QO&V!RO&X!SO&Z!TO&]!UO&_!VO'YPO'cQO'oYO'|aO~OPZXYZX^ZXiZXrZXsZXuZX}ZX!]ZX!^ZX!`ZX!fZX!wZX#ScX#WZX#XZX#YZX#ZZX#[ZX#]ZX#^ZX#_ZX#aZX#cZX#eZX#fZX#kZX'TZX'cZX'pZX'wZX'xZX~O!X$jX~P$zO'Q!XO'R!WO'S!ZO~OPTOQTO]cOa!jOb!iOgcOiTOjcOkcOnTOpTOuROwcOxcOycO!P!bO!ZkO!`UO!cTO!dTO!eTO!fTO!gTO!j!hO#p!kO#t^O'Y![O'cQO'oYO'|aO~O|!`O}!]Oz'jPz'tP~P'dO!O!lO~P`OPTOQTO]cOa!jOb!iOgcOiTOjcOkcOnTOpTOuROwcOxcOycO!P!bO!ZkO!`UO!cTO!dTO!eTO!fTO!gTO!j!hO#p!kO#t^O'Y9XO'cQO'oYO'|aO~OPTOQTO]cOa!jOb!iOgcOiTOjcOkcOnTOpTOuROwcOxcOycO!P!bO!ZkO!`UO!cTO!dTO!eTO!fTO!gTO!j!hO#p!kO#t^O'cQO'oYO'|aO~O|!qO#Q!tO#R!qO'Y9YO!_'qP~P+{O#S!uO~O!X!vO#S!uO~OP#]OY#cOi#QOr!zOs!zOu!{O}#aO!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO#c#VO#e#XO#f#YO'cQO'p#ZO'w!|O'x!}O~O^'gX'T'gX!_'gXz'gX!P'gX%O'gX!X'gX~P.jO!w#dO#k#dOP'hXY'hX^'hXi'hXr'hXs'hXu'hX}'hX!]'hX!^'hX!`'hX!f'hX#W'hX#X'hX#Y'hX#Z'hX#['hX#]'hX#^'hX#a'hX#c'hX#e'hX#f'hX'c'hX'p'hX'w'hX'x'hX~O#_'hX'T'hXz'hX!_'hX'e'hX!P'hX%O'hX!X'hX~P0zO!w#dO~O#v#fO#x#eO$P#kO~O!P#lO#t^O$S#mO$U#oO~O]#rOg$POi#sOj#rOk#rOn$QOp$ROu#yO!P#zO!Z$WO!`#wO#R$XO#p$UO$]$SO$_$TO$b$VO'Y#qO'c#tO'^'`P~O!`$YO~O!X$[O~O^$]O'T$]O~O'Y$aO~O!`$YO'Y$aO'Z$cO'_$dO~Ob$jO!`$YO'Y$aO~O#_#SO~O]$sOr$oO!P$lO!`$nO%P$rO'Y$aO'Z$cO[(UP~O!j$tO~Ou$uO!P$vO'Y$aO~Ou$uO!P$vO%X$zO'Y$aO~O'Y${O~O#`sO%PtO%RrO%SrO%VuO%XvO%[wO%]wO~Oa%UOb%TO!j%RO$}%SO%a%QO~P7xOa%XObmO!P%WO!jlO#`sO$}qO%RrO%SrO%VuO%XvO%[wO%]wO%_xO~O_%[O!w%_O%P%YO'Z$cO~P8wO!`%`O!c%dO~O!`%eO~O!PSO~O^$]O'P%mO'T$]O~O^$]O'P%pO'T$]O~O^$]O'P%rO'T$]O~O'Q!XO'R!WO'S%vO~OPZXYZXiZXrZXsZXuZX}ZX}cX!]ZX!^ZX!`ZX!fZX!wZX!wcX#ScX#WZX#XZX#YZX#ZZX#[ZX#]ZX#^ZX#_ZX#aZX#cZX#eZX#fZX#kZX'cZX'pZX'wZX'xZX~OzZXzcX~P;dO|%xOz&eX}&eX~P){O}!]Oz'jX~OP#]OY#cOi#QOr!zOs!zOu!{O}!]O!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO#c#VO#e#XO#f#YO'cQO'p#ZO'w!|O'x!}O~Oz'jX~P>ZOz%}O~Ou&QO!S&[O!T&TO!U&TO'Z$cO~O]&ROj&RO|&UO'f&OO!O'kP!O'vP~P@^Oz'sX}'sX!X'sX!_'sX'p'sX~O!w'sX#S!{X!O'sX~PAVO!w&]Oz'uX}'uX~O}&^Oz'tX~Oz&`O~O!w#dO~PAVOR&dO!P&aO!k&cO'Y$aO~Ob&iO!`$YO'Y$aO~Or$oO!`$nO~O!O&jO~P`Or!zOs!zOu!{O!^!xO!`!yO'cQOP!baY!bai!ba}!ba!]!ba!f!ba#W!ba#X!ba#Y!ba#Z!ba#[!ba#]!ba#^!ba#_!ba#a!ba#c!ba#e!ba#f!ba'p!ba'w!ba'x!ba~O^!ba'T!baz!ba!_!ba'e!ba!P!ba%O!ba!X!ba~PC`O!_&kO~O!X!vO!w&mO'p&lO}'rX^'rX'T'rX~O!_'rX~PExO}&qO!_'qX~O!_&sO~Ou$uO!P$vO#R&tO'Y$aO~OPTOQTO]cOa!jOb!iOgcOiTOjcOkcOnTOpTOuROwcOxcOycO!PSO!ZkO!`UO!cTO!dTO!eTO!fTO!gTO!j!hO#p!kO#t^O'Y9XO'cQO'oYO'|aO~O]#rOg$POi#sOj#rOk#rOn$QOp9kOu#yO!P#zO!Z:nO!`#wO#R9qO#p$UO$]9mO$_9oO$b$VO'Y&xO'c#tO~O#S&zO~O]#rOg$POi#sOj#rOk#rOn$QOp$ROu#yO!P#zO!Z$WO!`#wO#R$XO#p$UO$]$SO$_$TO$b$VO'Y&xO'c#tO~O'^'mP~PJaO|'OO!_'nP~P){O'f'QO'oYO~OP9UOQ9UO]cOa:lOb!iOgcOi9UOjcOkcOn9UOp9UOuROwcOxcOycO!P!bO!Z9WO!`UO!c9UO!d9UO!e9UO!f9UO!g9UO!j!hO#p!kO#t^O'Y'`O'cQO'oYO'|:jO~O!`!yO~O}#aO^$Za'T$Za!_$Zaz$Za!P$Za%O$Za!X$Za~O#`'gO~PIQOr'jO!X'iO!P#wX#s#wX#v#wX#x#wX$P#wX~O!X'iO!P'yX#s'yX#v'yX#x'yX$P'yX~Or'jO~P! eOr'jO!P'yX#s'yX#v'yX#x'yX$P'yX~O!P'lO#s'pO#v'kO#x'kO$P'qO~O|'tO~PLUO#v#fO#x#eO$P'wO~Or$cXu$cX!^$cX'p$cX'w$cX'x$cX~OReX}eX!weX'^eX'^$cX~P!#ZOj'yO~O'Q'{O'R'zO'S'}O~Or(POu(QO'p#ZO'w(SO'x(UO~O'^(OO~P!$dO'^(XO~O]#rOg$POi#sOj#rOk#rOn$QOp9kOu#yO!P#zO!Z:nO!`#wO#R9qO#p$UO$]9mO$_9oO$b$VO'c#tO~O|(]O'Y(YO!_'}P~P!%RO#S(_O~O|(cO'Y(`Oz(OP~P!%RO^(lOi(qOu(iO!S(oO!T(hO!U(hO!`(fO!t(pO$u(kO'Z$cO'f(eO~O!O(nO~P!&yO!^!xOr'bXu'bX'p'bX'w'bX'x'bX}'bX!w'bX~O'^'bX#i'bX~P!'uOR(tO!w(sO}'aX'^'aX~O}(uO'^'`X~O'Y(wO~O!`(|O~O'Y&xO~O!`(fO~Ou$uO|!qO!P$vO#Q!tO#R!qO'Y$aO!_'qP~O!X!vO#S)QO~OP#]OY#cOi#QOr!zOs!zOu!{O!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO#c#VO#e#XO#f#YO'cQO'p#ZO'w!|O'x!}O~O^!Ya}!Ya'T!Yaz!Ya!_!Ya'e!Ya!P!Ya%O!Ya!X!Ya~P!*WOR)YO!P&aO!k)XO%O)WO'_$dO~O'Y${O'^'`P~O!X)]O!P']X^']X'T']X~O!`$YO'_$dO~O!`$YO'Y$aO'_$dO~O!X!vO#S&zO~O%P)iO'Y)eO!O(VP~O})jO[(UX~O'f'QO~OY)nO~O[)oO~O!P$lO'Y$aO'Z$cO[(UP~Ou$uO|)tO!P$vO'Y$aOz'tP~O]&XOj&XO|)uO'f'QO!O'vP~O})vO^(RX'T(RX~O!w)zO'_$dO~OR)}O!P#zO'_$dO~O!P*PO~Or*RO!PSO~O!j*WO~Ob*]O~O'Y(wO!O(TP~Ob$jO~O%PtO'Y${O~P8wOY*cO[*bO~OPTOQTO]cOanObmOgcOiTOjcOkcOnTOpTOuROwcOxcOycO!ZkO!`UO!cTO!dTO!eTO!fTO!gTO!jlO#t^O$}qO'cQO'oYO'|aO~O!P!bO#p!kO'Y9XO~P!1mO[*bO^$]O'T$]O~O^*gO#`*iO%R*iO%S*iO~P){O!`%`O~O%r*nO~O!P*pO~O&S*sO&T*rOP&QaQ&QaW&Qa]&Qa^&Qaa&Qab&Qag&Qai&Qaj&Qak&Qan&Qap&Qau&Qaw&Qax&Qay&Qa!P&Qa!Z&Qa!`&Qa!c&Qa!d&Qa!e&Qa!f&Qa!g&Qa!j&Qa#`&Qa#p&Qa#t&Qa$}&Qa%P&Qa%R&Qa%S&Qa%V&Qa%X&Qa%[&Qa%]&Qa%_&Qa%l&Qa%r&Qa%t&Qa%v&Qa%x&Qa%{&Qa&R&Qa&V&Qa&X&Qa&Z&Qa&]&Qa&_&Qa'O&Qa'Y&Qa'c&Qa'o&Qa'|&Qa!O&Qa%y&Qa_&Qa&O&Qa~O'Y*vO~O'e*yO~Oz&ea}&ea~P!*WO}!]Oz'ja~Oz'ja~P>ZO}&^Oz'ta~O}tX}!VX!OtX!O!VX!XtX!X!VX!`!VX!wtX'_!VX~O!X+QO!w+PO}#PX}'lX!O#PX!O'lX!X'lX!`'lX'_'lX~O!X+SO!`$YO'_$dO}!RX!O!RX~O]&POj&POu&QO'f(eO~OP9UOQ9UO]cOa:lOb!iOgcOi9UOjcOkcOn9UOp9UOuROwcOxcOycO!P!bO!Z9WO!`UO!c9UO!d9UO!e9UO!f9UO!g9UO!j!hO#p!kO#t^O'cQO'oYO'|:jO~O'Y9uO~P!;kO}+WO!O'kX~O!O+YO~O!X+QO!w+PO}#PX!O#PX~O}+ZO!O'vX~O!O+]O~O]&POj&POu&QO'Z$cO'f(eO~O!T+^O!U+^O~P!>iOu$uO|+aO!P$vO'Y$aOz&jX}&jX~O^+fO!S+iO!T+eO!U+eO!n+mO!o+kO!p+lO!q+jO!t+nO'Z$cO'f(eO'o+cO~O!O+hO~P!?jOR+sO!P&aO!k+rO~O!w+yO}'ra!_'ra^'ra'T'ra~O!X!vO~P!@tO}&qO!_'qa~Ou$uO|+|O!P$vO#Q,OO#R+|O'Y$aO}&lX!_&lX~O^!zi}!zi'T!ziz!zi!_!zi'e!zi!P!zi%O!zi!X!zi~P!*WO#S!va}!va!_!va!w!va!P!va^!va'T!vaz!va~P!$dO#S'bXP'bXY'bX^'bXi'bXs'bX!]'bX!`'bX!f'bX#W'bX#X'bX#Y'bX#Z'bX#['bX#]'bX#^'bX#_'bX#a'bX#c'bX#e'bX#f'bX'T'bX'c'bX!_'bXz'bX!P'bX'e'bX%O'bX!X'bX~P!'uO},XO'^'mX~P!$dO'^,ZO~O},[O!_'nX~P!*WO!_,_O~Oz,`O~OP#]Or!zOs!zOu!{O!^!xO!`!yO!f#]O'cQOY#Vi^#Vii#Vi}#Vi!]#Vi#X#Vi#Y#Vi#Z#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi'T#Vi'p#Vi'w#Vi'x#Viz#Vi!_#Vi'e#Vi!P#Vi%O#Vi!X#Vi~O#W#Vi~P!FRO#W#OO~P!FROP#]Or!zOs!zOu!{O!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO'cQOY#Vi^#Vi}#Vi!]#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi'T#Vi'p#Vi'w#Vi'x#Viz#Vi!_#Vi'e#Vi!P#Vi%O#Vi!X#Vi~Oi#Vi~P!HmOi#QO~P!HmOP#]Oi#QOr!zOs!zOu!{O!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO'cQO^#Vi}#Vi#a#Vi#c#Vi#e#Vi#f#Vi'T#Vi'p#Vi'w#Vi'x#Viz#Vi!_#Vi'e#Vi!P#Vi%O#Vi!X#Vi~OY#Vi!]#Vi#]#Vi#^#Vi#_#Vi~P!KXOY#cO!]#SO#]#SO#^#SO#_#SO~P!KXOP#]OY#cOi#QOr!zOs!zOu!{O!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO'cQO^#Vi}#Vi#c#Vi#e#Vi#f#Vi'T#Vi'p#Vi'x#Viz#Vi!_#Vi'e#Vi!P#Vi%O#Vi!X#Vi~O'w#Vi~P!NPO'w!|O~P!NPOP#]OY#cOi#QOr!zOs!zOu!{O!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO#c#VO'cQO'w!|O^#Vi}#Vi#e#Vi#f#Vi'T#Vi'p#Viz#Vi!_#Vi'e#Vi!P#Vi%O#Vi!X#Vi~O'x#Vi~P#!kO'x!}O~P#!kOP#]OY#cOi#QOr!zOs!zOu!{O!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO#c#VO#e#XO'cQO'w!|O'x!}O~O^#Vi}#Vi#f#Vi'T#Vi'p#Viz#Vi!_#Vi'e#Vi!P#Vi%O#Vi!X#Vi~P#%VOPZXYZXiZXrZXsZXuZX!]ZX!^ZX!`ZX!fZX!wZX#ScX#WZX#XZX#YZX#ZZX#[ZX#]ZX#^ZX#_ZX#aZX#cZX#eZX#fZX#kZX'cZX'pZX'wZX'xZX}ZX!OZX~O#iZX~P#'jOP#]OY9iOi9^Or!zOs!zOu!{O!]9`O!^!xO!`!yO!f#]O#W9[O#X9]O#Y9]O#Z9]O#[9_O#]9`O#^9`O#_9`O#a9aO#c9cO#e9eO#f9fO'cQO'p#ZO'w!|O'x!}O~O#i,bO~P#)tOP'hXY'hXi'hXr'hXs'hXu'hX!]'hX!^'hX!`'hX!f'hX#W'hX#X'hX#Y'hX#Z'hX#['hX#]'hX#^'hX#a'hX#c'hX#e'hX#f'hX'c'hX'p'hX'w'hX'x'hX}'hX~O!w9jO#k9jO#_'hX#i'hX!O'hX~P#+oO^&oa}&oa'T&oa!_&oa'e&oaz&oa!P&oa%O&oa!X&oa~P!*WOP#ViY#Vi^#Vii#Vis#Vi}#Vi!]#Vi!^#Vi!`#Vi!f#Vi#W#Vi#X#Vi#Y#Vi#Z#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi'T#Vi'c#Viz#Vi!_#Vi'e#Vi!P#Vi%O#Vi!X#Vi~P!$dO^#ji}#ji'T#jiz#ji!_#ji'e#ji!P#ji%O#ji!X#ji~P!*WO#v,dO#x,dO~O#v,eO#x,eO~O!X'iO!w,fO!P#|X#s#|X#v#|X#x#|X$P#|X~O|,gO~O!P'lO#s,iO#v'kO#x'kO$P,jO~O}9gO!O'gX~P#)tO!O,kO~O$P,mO~O'Q'{O'R'zO'S,pO~O],sOj,sOz,tO~O}cX!XcX!_cX!_$cX'pcX~P!#ZO!_,zO~P!$dO},{O!X!vO'p&lO!_'}X~O!_-QO~Oz$cX}$cX!X$jX~P!#ZO}-SOz(OX~P!$dO!X-UO~Oz-WO~O|(]O'Y$aO!_'}P~Oi-[O!X!vO!`$YO'_$dO'p&lO~O!X)]O~O!O-bO~P!&yO!T-cO!U-cO'Z$cO'f(eO~Ou-eO'f(eO~O!t-fO~O'Y${O}&tX'^&tX~O}(uO'^'`a~Or-kOs-kOu-lO'poa'woa'xoa}oa!woa~O'^oa#ioa~P#7POr(POu(QO'p$[a'w$[a'x$[a}$[a!w$[a~O'^$[a#i$[a~P#7uOr(POu(QO'p$^a'w$^a'x$^a}$^a!w$^a~O'^$^a#i$^a~P#8hO]-mO~O#S-nO~O'^$la}$la#i$la!w$la~P!$dO#S-qO~OR-zO!P&aO!k-yO%O-xO~O'^-{O~O]#rOi#sOj#rOk#rOn$QOp9kOu#yO!P#zO!Z:nO!`#wO#R9qO#p$UO$]9mO$_9oO$b$VO'c#tO~Og-}O'Y-|O~P#:_O!X)]O!P']a^']a'T']a~O#S.TO~OYZX}cX!OcX~O}.UO!O(VX~O!O.WO~OY.XO~O'Y)eO~O!P$lO'Y$aO[&|X}&|X~O})jO[(Ua~O!_.^O~P!*WO].`O~OY.aO~O[.bO~OR-zO!P&aO!k-yO%O-xO'_$dO~O})vO^(Ra'T(Ra~O!w.hO~OR.kO!P#zO~O'f'QO!O(SP~OR.uO!P.qO!k.tO%O.sO'_$dO~OY/PO}.}O!O(TX~O!O/QO~O[/SO^$]O'T$]O~O]/TO~O#_/VO%p/WO~P0zO!w#dO#_/VO%p/WO~O^/XO~P){O^/ZO~O%y/_OP%wiQ%wiW%wi]%wi^%wia%wib%wig%wii%wij%wik%win%wip%wiu%wiw%wix%wiy%wi!P%wi!Z%wi!`%wi!c%wi!d%wi!e%wi!f%wi!g%wi!j%wi#`%wi#p%wi#t%wi$}%wi%P%wi%R%wi%S%wi%V%wi%X%wi%[%wi%]%wi%_%wi%l%wi%r%wi%t%wi%v%wi%x%wi%{%wi&R%wi&V%wi&X%wi&Z%wi&]%wi&_%wi'O%wi'Y%wi'c%wi'o%wi'|%wi!O%wi_%wi&O%wi~O_/eO!O/cO&O/dO~P`O!PSO!`/hO~O}#aO'e$Za~Oz&ei}&ei~P!*WO}!]Oz'ji~O}&^Oz'ti~Oz/lO~O}!Ra!O!Ra~P#)tO]&POj&PO|/rO'f(eO}&fX!O&fX~P@^O}+WO!O'ka~O]&XOj&XO|)uO'f'QO}&kX!O&kX~O}+ZO!O'va~Oz'ui}'ui~P!*WO^$]O!X!vO!`$YO!f/}O!w/{O'T$]O'_$dO'p&lO~O!O0QO~P!?jO!T0RO!U0RO'Z$cO'f(eO'o+cO~O!S0SO~P#HXO!PSO!S0SO!q0UO!t0VO~P#HXO!S0SO!o0XO!p0XO!q0UO!t0VO~P#HXO!P&aO~O!P&aO~P!$dO}'ri!_'ri^'ri'T'ri~P!*WO!w0bO}'ri!_'ri^'ri'T'ri~O}&qO!_'qi~Ou$uO!P$vO#R0dO'Y$aO~O#SoaPoaYoa^oaioa!]oa!^oa!`oa!foa#Woa#Xoa#Yoa#Zoa#[oa#]oa#^oa#_oa#aoa#coa#eoa#foa'Toa'coa!_oazoa!Poa'eoa%Ooa!Xoa~P#7PO#S$[aP$[aY$[a^$[ai$[as$[a!]$[a!^$[a!`$[a!f$[a#W$[a#X$[a#Y$[a#Z$[a#[$[a#]$[a#^$[a#_$[a#a$[a#c$[a#e$[a#f$[a'T$[a'c$[a!_$[az$[a!P$[a'e$[a%O$[a!X$[a~P#7uO#S$^aP$^aY$^a^$^ai$^as$^a!]$^a!^$^a!`$^a!f$^a#W$^a#X$^a#Y$^a#Z$^a#[$^a#]$^a#^$^a#_$^a#a$^a#c$^a#e$^a#f$^a'T$^a'c$^a!_$^az$^a!P$^a'e$^a%O$^a!X$^a~P#8hO#S$laP$laY$la^$lai$las$la}$la!]$la!^$la!`$la!f$la#W$la#X$la#Y$la#Z$la#[$la#]$la#^$la#_$la#a$la#c$la#e$la#f$la'T$la'c$la!_$laz$la!P$la!w$la'e$la%O$la!X$la~P!$dO^!zq}!zq'T!zqz!zq!_!zq'e!zq!P!zq%O!zq!X!zq~P!*WO}&gX'^&gX~PJaO},XO'^'ma~O|0lO}&hX!_&hX~P){O},[O!_'na~O},[O!_'na~P!*WO#i!ba!O!ba~PC`O#i!Ya}!Ya!O!Ya~P#)tO!P1PO#t^O#}1QO~O!O1UO~O'e1VO~P!$dO^$Wq}$Wq'T$Wqz$Wq!_$Wq'e$Wq!P$Wq%O$Wq!X$Wq~P!*WOz1WO~O],sOj,sO~Or(POu(QO'x(UO'p$vi'w$vi}$vi!w$vi~O'^$vi#i$vi~P$(xOr(POu(QO'p$xi'w$xi'x$xi}$xi!w$xi~O'^$xi#i$xi~P$)kO#i1XO~P!$dO|1ZO'Y$aO}&pX!_&pX~O},{O!_'}a~O},{O!X!vO!_'}a~O},{O!X!vO'p&lO!_'}a~O'^$ei}$ei#i$ei!w$ei~P!$dO|1bO'Y(`Oz&rX}&rX~P!%RO}-SOz(Oa~O}-SOz(Oa~P!$dO!X!vO~O!X!vO#_1lO~Oi1pO!X!vO'p&lO~O}'ai'^'ai~P!$dO!w1sO}'ai'^'ai~P!$dO!_1vO~O^$Xq}$Xq'T$Xqz$Xq!_$Xq'e$Xq!P$Xq%O$Xq!X$Xq~P!*WO}1zO!P(PX~P!$dO!P&aO%O1}O~O!P&aO%O1}O~P!$dO!P$cX$sZX^$cX'T$cX~P!#ZO$s2ROrfXufX!PfX'pfX'wfX'xfX^fX'TfX~O$s2RO~O%P2YO'Y)eO}&{X!O&{X~O}.UO!O(Va~OY2^O~O[2_O~O]2bO~OR2dO!P&aO!k2cO%O1}O~O^$]O'T$]O~P!$dO!P#zO~P!$dO}2iO!w2kO!O(SX~O!O2lO~Ou(iO!S2uO!T2nO!U2nO!n2tO!o2sO!p2sO!t2rO'Z$cO'f(eO'o+cO~O!O2qO~P$1yOR2|O!P.qO!k2{O%O2zO~OR2|O!P.qO!k2{O%O2zO'_$dO~O'Y(wO}&zX!O&zX~O}.}O!O(Ta~O'f3VO~O]3XO~O[3ZO~O!_3^O~P){O^3`O~O^3`O~P){O#_3bO%p3cO~PExO_/eO!O3gO&O/dO~P`O!X3iO~O&T3jOP&QqQ&QqW&Qq]&Qq^&Qqa&Qqb&Qqg&Qqi&Qqj&Qqk&Qqn&Qqp&Qqu&Qqw&Qqx&Qqy&Qq!P&Qq!Z&Qq!`&Qq!c&Qq!d&Qq!e&Qq!f&Qq!g&Qq!j&Qq#`&Qq#p&Qq#t&Qq$}&Qq%P&Qq%R&Qq%S&Qq%V&Qq%X&Qq%[&Qq%]&Qq%_&Qq%l&Qq%r&Qq%t&Qq%v&Qq%x&Qq%{&Qq&R&Qq&V&Qq&X&Qq&Z&Qq&]&Qq&_&Qq'O&Qq'Y&Qq'c&Qq'o&Qq'|&Qq!O&Qq%y&Qq_&Qq&O&Qq~O}#Pi!O#Pi~P#)tO!w3lO}#Pi!O#Pi~O}!Ri!O!Ri~P#)tO^$]O!w3sO'T$]O~O^$]O!X!vO!w3sO'T$]O~O!T3wO!U3wO'Z$cO'f(eO'o+cO~O^$]O!X!vO!`$YO!f3xO!w3sO'T$]O'_$dO'p&lO~O!S3yO~P$:cO!S3yO!q3|O!t3}O~P$:cO^$]O!X!vO!f3xO!w3sO'T$]O'p&lO~O}'rq!_'rq^'rq'T'rq~P!*WO}&qO!_'qq~O#S$viP$viY$vi^$vii$vis$vi!]$vi!^$vi!`$vi!f$vi#W$vi#X$vi#Y$vi#Z$vi#[$vi#]$vi#^$vi#_$vi#a$vi#c$vi#e$vi#f$vi'T$vi'c$vi!_$viz$vi!P$vi'e$vi%O$vi!X$vi~P$(xO#S$xiP$xiY$xi^$xii$xis$xi!]$xi!^$xi!`$xi!f$xi#W$xi#X$xi#Y$xi#Z$xi#[$xi#]$xi#^$xi#_$xi#a$xi#c$xi#e$xi#f$xi'T$xi'c$xi!_$xiz$xi!P$xi'e$xi%O$xi!X$xi~P$)kO#S$eiP$eiY$ei^$eii$eis$ei}$ei!]$ei!^$ei!`$ei!f$ei#W$ei#X$ei#Y$ei#Z$ei#[$ei#]$ei#^$ei#_$ei#a$ei#c$ei#e$ei#f$ei'T$ei'c$ei!_$eiz$ei!P$ei!w$ei'e$ei%O$ei!X$ei~P!$dO}&ga'^&ga~P!$dO}&ha!_&ha~P!*WO},[O!_'ni~O#i!zi}!zi!O!zi~P#)tOP#]Or!zOs!zOu!{O!^!xO!`!yO!f#]O'cQOY#Vii#Vi!]#Vi#X#Vi#Y#Vi#Z#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi#i#Vi'p#Vi'w#Vi'x#Vi}#Vi!O#Vi~O#W#Vi~P$CyO#W9[O~P$CyOP#]Or!zOs!zOu!{O!^!xO!`!yO!f#]O#W9[O#X9]O#Y9]O#Z9]O'cQOY#Vi!]#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi#i#Vi'p#Vi'w#Vi'x#Vi}#Vi!O#Vi~Oi#Vi~P$FROi9^O~P$FROP#]Oi9^Or!zOs!zOu!{O!^!xO!`!yO!f#]O#W9[O#X9]O#Y9]O#Z9]O#[9_O'cQO#a#Vi#c#Vi#e#Vi#f#Vi#i#Vi'p#Vi'w#Vi'x#Vi}#Vi!O#Vi~OY#Vi!]#Vi#]#Vi#^#Vi#_#Vi~P$HZOY9iO!]9`O#]9`O#^9`O#_9`O~P$HZOP#]OY9iOi9^Or!zOs!zOu!{O!]9`O!^!xO!`!yO!f#]O#W9[O#X9]O#Y9]O#Z9]O#[9_O#]9`O#^9`O#_9`O#a9aO'cQO#c#Vi#e#Vi#f#Vi#i#Vi'p#Vi'x#Vi}#Vi!O#Vi~O'w#Vi~P$JoO'w!|O~P$JoOP#]OY9iOi9^Or!zOs!zOu!{O!]9`O!^!xO!`!yO!f#]O#W9[O#X9]O#Y9]O#Z9]O#[9_O#]9`O#^9`O#_9`O#a9aO#c9cO'cQO'w!|O#e#Vi#f#Vi#i#Vi'p#Vi}#Vi!O#Vi~O'x#Vi~P$LwO'x!}O~P$LwOP#]OY9iOi9^Or!zOs!zOu!{O!]9`O!^!xO!`!yO!f#]O#W9[O#X9]O#Y9]O#Z9]O#[9_O#]9`O#^9`O#_9`O#a9aO#c9cO#e9eO'cQO'w!|O'x!}O~O#f#Vi#i#Vi'p#Vi}#Vi!O#Vi~P% PO^#gy}#gy'T#gyz#gy!_#gy'e#gy!P#gy%O#gy!X#gy~P!*WOP#ViY#Vii#Vis#Vi!]#Vi!^#Vi!`#Vi!f#Vi#W#Vi#X#Vi#Y#Vi#Z#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi#i#Vi'c#Vi}#Vi!O#Vi~P!$dO!^!xOP'bXY'bXi'bXr'bXs'bXu'bX!]'bX!`'bX!f'bX#W'bX#X'bX#Y'bX#Z'bX#['bX#]'bX#^'bX#_'bX#a'bX#c'bX#e'bX#f'bX#i'bX'c'bX'p'bX'w'bX'x'bX}'bX!O'bX~O#i#ji}#ji!O#ji~P#)tO!O4_O~O}&oa!O&oa~P#)tO!X!vO'p&lO}&pa!_&pa~O},{O!_'}i~O},{O!X!vO!_'}i~Oz&ra}&ra~P!$dO!X4fO~O}-SOz(Oi~P!$dO}-SOz(Oi~Oz4lO~O!X!vO#_4rO~Oi4sO!X!vO'p&lO~Oz4uO~O'^$gq}$gq#i$gq!w$gq~P!$dO^$Xy}$Xy'T$Xyz$Xy!_$Xy'e$Xy!P$Xy%O$Xy!X$Xy~P!*WO}1zO!P(Pa~O!P&aO%O4zO~O!P&aO%O4zO~P!$dO^!zy}!zy'T!zyz!zy!_!zy'e!zy!P!zy%O!zy!X!zy~P!*WOY4}O~O}.UO!O(Vi~O]5SO~O[5TO~O'f'QO}&wX!O&wX~O}2iO!O(Sa~O!O5bO~P$1yOu-eO'f(eO'o+cO~O!S5eO!T5dO!U5dO!t0VO'Z$cO'f(eO'o+cO~O!o5fO!p5fO~P%-iO!T5dO!U5dO'Z$cO'f(eO'o+cO~O!P.qO~O!P.qO%O5hO~O!P.qO%O5hO~P!$dOR5mO!P.qO!k5lO%O5hO~OY5rO}&za!O&za~O}.}O!O(Ti~O]5uO~O!_5vO~O!_5wO~O!_5xO~O!_5xO~P){O^5zO~O!X5}O~O!_6PO~O}'ui!O'ui~P#)tO^$]O'T$]O~P!*WO^$]O!w6UO'T$]O~O^$]O!X!vO!w6UO'T$]O~O!T6ZO!U6ZO'Z$cO'f(eO'o+cO~O^$]O!X!vO!f6[O!w6UO'T$]O'p&lO~O!`$YO'_$dO~P%2TO!S6]O~P%1rO}'ry!_'ry^'ry'T'ry~P!*WO#S$gqP$gqY$gq^$gqi$gqs$gq}$gq!]$gq!^$gq!`$gq!f$gq#W$gq#X$gq#Y$gq#Z$gq#[$gq#]$gq#^$gq#_$gq#a$gq#c$gq#e$gq#f$gq'T$gq'c$gq!_$gqz$gq!P$gq!w$gq'e$gq%O$gq!X$gq~P!$dO}&hi!_&hi~P!*WO#i!zq}!zq!O!zq~P#)tOr-kOs-kOu-lOPoaYoaioa!]oa!^oa!`oa!foa#Woa#Xoa#Yoa#Zoa#[oa#]oa#^oa#_oa#aoa#coa#eoa#foa#ioa'coa'poa'woa'xoa}oa!Ooa~Or(POu(QOP$[aY$[ai$[as$[a!]$[a!^$[a!`$[a!f$[a#W$[a#X$[a#Y$[a#Z$[a#[$[a#]$[a#^$[a#_$[a#a$[a#c$[a#e$[a#f$[a#i$[a'c$[a'p$[a'w$[a'x$[a}$[a!O$[a~Or(POu(QOP$^aY$^ai$^as$^a!]$^a!^$^a!`$^a!f$^a#W$^a#X$^a#Y$^a#Z$^a#[$^a#]$^a#^$^a#_$^a#a$^a#c$^a#e$^a#f$^a#i$^a'c$^a'p$^a'w$^a'x$^a}$^a!O$^a~OP$laY$lai$las$la!]$la!^$la!`$la!f$la#W$la#X$la#Y$la#Z$la#[$la#]$la#^$la#_$la#a$la#c$la#e$la#f$la#i$la'c$la}$la!O$la~P!$dO#i$Wq}$Wq!O$Wq~P#)tO#i$Xq}$Xq!O$Xq~P#)tO!O6gO~O'^$zy}$zy#i$zy!w$zy~P!$dO!X!vO}&pi!_&pi~O!X!vO'p&lO}&pi!_&pi~O},{O!_'}q~Oz&ri}&ri~P!$dO}-SOz(Oq~Oz6nO~P!$dOz6nO~O}'ay'^'ay~P!$dO}&ua!P&ua~P!$dO!P$rq^$rq'T$rq~P!$dOY6vO~O}.UO!O(Vq~O]6yO~O!P&aO%O6zO~O!P&aO%O6zO~P!$dO!w6{O}&wa!O&wa~O}2iO!O(Si~P#)tO!T7RO!U7RO'Z$cO'f(eO'o+cO~O!S7TO!t3}O~P%ArO!P.qO%O7WO~O!P.qO%O7WO~P!$dO'f7^O~O}.}O!O(Tq~O!_7aO~O!_7aO~P){O!_7cO~O!_7dO~O}#Py!O#Py~P#)tO^$]O!w7jO'T$]O~O^$]O!X!vO!w7jO'T$]O~O!T7mO!U7mO'Z$cO'f(eO'o+cO~O^$]O!X!vO!f7nO!w7jO'T$]O'p&lO~O#S$zyP$zyY$zy^$zyi$zys$zy}$zy!]$zy!^$zy!`$zy!f$zy#W$zy#X$zy#Y$zy#Z$zy#[$zy#]$zy#^$zy#_$zy#a$zy#c$zy#e$zy#f$zy'T$zy'c$zy!_$zyz$zy!P$zy!w$zy'e$zy%O$zy!X$zy~P!$dO#i#gy}#gy!O#gy~P#)tOP$eiY$eii$eis$ei!]$ei!^$ei!`$ei!f$ei#W$ei#X$ei#Y$ei#Z$ei#[$ei#]$ei#^$ei#_$ei#a$ei#c$ei#e$ei#f$ei#i$ei'c$ei}$ei!O$ei~P!$dOr(POu(QO'x(UOP$viY$vii$vis$vi!]$vi!^$vi!`$vi!f$vi#W$vi#X$vi#Y$vi#Z$vi#[$vi#]$vi#^$vi#_$vi#a$vi#c$vi#e$vi#f$vi#i$vi'c$vi'p$vi'w$vi}$vi!O$vi~Or(POu(QOP$xiY$xii$xis$xi!]$xi!^$xi!`$xi!f$xi#W$xi#X$xi#Y$xi#Z$xi#[$xi#]$xi#^$xi#_$xi#a$xi#c$xi#e$xi#f$xi#i$xi'c$xi'p$xi'w$xi'x$xi}$xi!O$xi~O#i$Xy}$Xy!O$Xy~P#)tO#i!zy}!zy!O!zy~P#)tO!X!vO}&pq!_&pq~O},{O!_'}y~Oz&rq}&rq~P!$dOz7tO~P!$dO}.UO!O(Vy~O}2iO!O(Sq~O!T8QO!U8QO'Z$cO'f(eO'o+cO~O!P.qO%O8TO~O!P.qO%O8TO~P!$dO!_8WO~O&T8XOP&Q!ZQ&Q!ZW&Q!Z]&Q!Z^&Q!Za&Q!Zb&Q!Zg&Q!Zi&Q!Zj&Q!Zk&Q!Zn&Q!Zp&Q!Zu&Q!Zw&Q!Zx&Q!Zy&Q!Z!P&Q!Z!Z&Q!Z!`&Q!Z!c&Q!Z!d&Q!Z!e&Q!Z!f&Q!Z!g&Q!Z!j&Q!Z#`&Q!Z#p&Q!Z#t&Q!Z$}&Q!Z%P&Q!Z%R&Q!Z%S&Q!Z%V&Q!Z%X&Q!Z%[&Q!Z%]&Q!Z%_&Q!Z%l&Q!Z%r&Q!Z%t&Q!Z%v&Q!Z%x&Q!Z%{&Q!Z&R&Q!Z&V&Q!Z&X&Q!Z&Z&Q!Z&]&Q!Z&_&Q!Z'O&Q!Z'Y&Q!Z'c&Q!Z'o&Q!Z'|&Q!Z!O&Q!Z%y&Q!Z_&Q!Z&O&Q!Z~O^$]O!w8^O'T$]O~O^$]O!X!vO!w8^O'T$]O~OP$gqY$gqi$gqs$gq!]$gq!^$gq!`$gq!f$gq#W$gq#X$gq#Y$gq#Z$gq#[$gq#]$gq#^$gq#_$gq#a$gq#c$gq#e$gq#f$gq#i$gq'c$gq}$gq!O$gq~P!$dO}&wq!O&wq~P#)tO^$]O!w8sO'T$]O~OP$zyY$zyi$zys$zy!]$zy!^$zy!`$zy!f$zy#W$zy#X$zy#Y$zy#Z$zy#[$zy#]$zy#^$zy#_$zy#a$zy#c$zy#e$zy#f$zy#i$zy'c$zy}$zy!O$zy~P!$dO'e'gX~P.jO'eZXzZX!_ZX%pZX!PZX%OZX!XZX~P$zO!XcX!_ZX!_cX'pcX~P;dOP9UOQ9UO]cOa:lOb!iOgcOi9UOjcOkcOn9UOp9UOuROwcOxcOycO!PSO!Z9WO!`UO!c9UO!d9UO!e9UO!f9UO!g9UO!j!hO#p!kO#t^O'Y'`O'cQO'oYO'|:jO~O}9gO!O$Za~O]#rOg$POi#sOj#rOk#rOn$QOp9lOu#yO!P#zO!Z:oO!`#wO#R9rO#p$UO$]9nO$_9pO$b$VO'Y&xO'c#tO~O#`'gO~P&-RO!OZX!OcX~P;dO#S9ZO~O!X!vO#S9ZO~O!w9jO~O#_9`O~O!w9sO}'uX!O'uX~O!w9jO}'sX!O'sX~O#S9tO~O'^9vO~P!$dO#S9{O~O#S9|O~O!X!vO#S9}O~O!X!vO#S9tO~O#i:OO~P#)tO#S:PO~O#S:QO~O#S:RO~O#S:SO~O#i:TO~P!$dO#i:UO~P!$dO#t~!^!n!p!q#Q#R'|$]$_$b$s$}%O%P%V%X%[%]%_%a~TS#t'|#Xy'V'W'f'W'Y#v#x#v~",
++  goto: "#Dq(ZPPPPPPP([P(lP*`PPPP-uPP.[3l5`5sP5sPPP5s5sP5sP7aPP7fP7zPPPP<ZPPPP<Z>yPPP?PA[P<ZPCuPPPPEm<ZPPPPPGf<ZPPJeKbPPPPKfMOPMWNXPKb<Z<Z!#`!&X!*x!*x!.VPPP!.^!1Q<ZPPPPPPPPPP!3uP!5WPP<Z!6eP<ZP<Z<Z<Z<ZP<Z!8xPP!;oP!>bP!>f!>n!>r!>rP!;lP!>v!>vP!AiP!Am<Z<Z!As!De5sP5sP5s5sP!Eh5s5s!G`5s!Ib5s!KS5s5s!Kp!Mj!Mj!Mn!Mj!MvP!MjP5s!Nr5s# |5s5s-uPPP##ZPP##s##sP##sP#$Y##sPP#$`P#$VP#$V#$rMS#$V#%a#%g#%j([#%m([P#%t#%t#%tP([P([P([P([PP([P#%z#%}P#%}([PPP([P([P([P([P([P([([#&R#&]#&c#&i#&w#&}#'T#'_#'e#'o#'u#(T#(Z#(a#(o#)U#*h#*v#*|#+S#+Y#+`#+j#+p#+v#,Q#,d#,jPPPPPPPPP#,pPP#-d#1bPP#2x#3P#3XP#7ePP#7i#9|#?v#?z#?}#@Q#@]#@`PP#@c#@g#AU#Ay#A}#BaPP#Be#Bk#BoP#Br#Bv#By#Ci#DP#DU#DX#D[#Db#De#Di#DmmhOSj}!m$[%c%f%g%i*k*p/_/bQ$imQ$ppQ%ZyS&T!b+WQ&h!iS(h#z(mQ)c$jQ)p$rQ*[%TQ+^&[S+e&a+gQ+w&iQ-c(oQ.|*]Y0R+i+j+k+l+mS2n.q2pU3w0S0U0XU5d2s2t2uS6Z3y3|S7R5e5fQ7m6]R8Q7T$l[ORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#a#d$[$n%[%_%c%e%f%g%i%m%x&Q&]&c&m&z'O(O)Q)X*g*k*p+r+y,[,b-l-q-y.T.t/V/W/X/Z/_/b/d/{0b0l2c2{3`3b3c3s5l5z6U7j8^8s!j'b#[#l&U't+P+S,g/r1P2k3l6{9U9W9Z9[9]9^9_9`9a9b9c9d9e9f9g9j9s9t9v9}:O:R:S:mQ(x$RQ)h$lQ*^%WQ*e%`Q,R9kQ.O)]Q.Z)iQ/U*cQ2X.UQ3T.}Q4W9lR5P2YpeOSjy}!m$[%Y%c%f%g%i*k*p/_/bR*`%[&WVOSTjkn}!S!W!]!j!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#[#a#d#l$[$n%[%_%`%c%e%f%g%i%m%x&Q&]&c&m&z'O't(O)Q)X*g*k*p+P+S+r+y,[,b,g-l-q-y.T.t/V/W/X/Z/_/b/d/r/{0b0l1P2c2k2{3`3b3c3l3s5l5z6U6{7j8^8s9U9W9Z9[9]9^9_9`9a9b9c9d9e9f9g9j9s9t9v9}:O:R:S:l:mW!cRU!`&UQ$blQ$hmS$mp$rv$wrs!q!t$Y$u&^&q&t)t)u)v*i+Q+a+|,O/h0dQ%PwQ&e!hQ&g!iS([#w(fS)b$i$jQ)f$lQ)s$tQ*V%RQ*Z%TS+v&h&iQ-P(]Q.S)cQ.Y)iQ.[)jQ._)nQ.w*WS.{*[*]Q0`+wQ1Y,{Q2W.UQ2[.XQ2a.aQ3S.|Q4c1ZQ5O2YQ5R2^Q6u4}R7w6v!Y$fm!i$h$i$j&S&g&h&i(g)b)c+T+d+v+w-].S/w0O0T0`1o3v3{6X7k8_Q)Z$bQ){$|Q*O$}Q*Y%TQ.c)sQ.v*VU.z*Z*[*]Q2}.wS3R.{.|Q5_2mQ5q3SS7P5`5cS8O7Q7SQ8i8PR8x8jW#}a$d(u:jS$|t%YQ$}uQ%OvR)y$z$V#|a!v!x#c#w#y$S$T$X&d'z(T(V(W(_(c(s(t)W)Y)])z)}+s,X-S-U-n-x-z.h.k.s.u1X1b1l1s1z1}2R2d2z2|4f4r4z5h5m6z7W8T9i9m9n9o9p9q9r9w9x9y9z9{9|:P:Q:T:U:j:p:qV(y$R9k9lU&X!b$v+ZQ'R!zQ)m$oQ.l*PQ1t-kR5Z2i&YcORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#[#a#d#l$[$n%[%_%`%c%e%f%g%i%m%x&Q&U&]&c&m&z'O't(O)Q)X*g*k*p+P+S+r+y,[,b,g-l-q-y.T.t/V/W/X/Z/_/b/d/r/{0b0l1P2c2k2{3`3b3c3l3s5l5z6U6{7j8^8s9U9W9Z9[9]9^9_9`9a9b9c9d9e9f9g9j9s9t9v9}:O:R:S:m$]#`Z!_!n$`%w%{&v&}'T'U'V'W'X'Y'Z'[']'^'_'a'd'h'r)l*{+U+_+x,W,^,a,c,q-o/m/p0a0k0o0p0q0r0s0t0u0v0w0x0y0z0{1O1T1x2U3n3q4R4U4V4[4]5]6Q6T6a6e6f7g7z8[8q8|9V:c&ZcORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#[#a#d#l$[$n%[%_%`%c%e%f%g%i%m%x&Q&U&]&c&m&z'O't(O)Q)X*g*k*p+P+S+r+y,[,b,g-l-q-y.T.t/V/W/X/Z/_/b/d/r/{0b0l1P2c2k2{3`3b3c3l3s5l5z6U6{7j8^8s9U9W9Z9[9]9^9_9`9a9b9c9d9e9f9g9j9s9t9v9}:O:R:S:mQ&V!bR/s+WY&P!b&T&[+W+^S(g#z(mS+d&a+gS-](h(oQ-^(iQ-d(pQ.n*RU0O+e+i+jU0T+k+l+mS0Y+n2rQ1o-cQ1q-eQ1r-fS2m.q2pU3v0R0S0UQ3z0VQ3{0XS5`2n2uS5c2s2tU6X3w3y3|Q6^3}S7Q5d5eQ7S5fS7k6Z6]S8P7R7TQ8_7mR8j8QlhOSj}!m$[%c%f%g%i*k*p/_/bQ%k!QS&u!u9ZQ)`$gQ*T%PQ*U%QQ+t&fS,V&z9tS-p)Q9}Q.Q)aQ.p*SQ/f*rQ/g*sQ/o+RQ0W+kQ0^+uS1y-q:RQ2S.RS2V.T:SQ3m/qQ3p/yQ4P0_Q4|2TQ6O3jQ6R3oQ6V3uQ6_4QQ7e6PQ7h6WQ8Z7iQ8n8XQ8p8]R8{8r$W#_Z!_!n%w%{&v&}'T'U'V'W'X'Y'Z'[']'^'_'a'd'h'r)l*{+U+_+x,W,^,a,q-o/m/p0a0k0o0p0q0r0s0t0u0v0w0x0y0z0{1O1T1x2U3n3q4R4U4V4[4]5]6Q6T6a6e6f7g7z8[8q8|9V:cU(r#{&y0}T)U$`,c$W#^Z!_!n%w%{&v&}'T'U'V'W'X'Y'Z'[']'^'_'a'd'h'r)l*{+U+_+x,W,^,a,q-o/m/p0a0k0o0p0q0r0s0t0u0v0w0x0y0z0{1O1T1x2U3n3q4R4U4V4[4]5]6Q6T6a6e6f7g7z8[8q8|9V:cQ'c#_S)T$`,cR-r)U&YcORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#[#a#d#l$[$n%[%_%`%c%e%f%g%i%m%x&Q&U&]&c&m&z'O't(O)Q)X*g*k*p+P+S+r+y,[,b,g-l-q-y.T.t/V/W/X/Z/_/b/d/r/{0b0l1P2c2k2{3`3b3c3l3s5l5z6U6{7j8^8s9U9W9Z9[9]9^9_9`9a9b9c9d9e9f9g9j9s9t9v9}:O:R:S:mQ%f{Q%g|Q%i!OQ%j!PR/^*nQ&b!hQ)V$bQ+q&eS-w)Z)sS0Z+o+pW1|-t-u-v.cS4O0[0]U4y2O2P2QU6s4x5V5WQ7v6tR8e7yT+f&a+gS+d&a+gU0O+e+i+jU0T+k+l+mS0Y+n2rS2m.q2pU3v0R0S0UQ3z0VQ3{0XS5`2n2uS5c2s2tU6X3w3y3|Q6^3}S7Q5d5eQ7S5fS7k6Z6]S8P7R7TQ8_7mR8j8QS+f&a+gT2o.q2pS&o!p/[Q-O([Q-Z(gS/}+d2mQ1_-PS1i-[-dU3x0T0Y5cQ4b1YS4p1p1rU6[3z3{7SQ6i4cQ6r4sR7n6^Q!wXS&n!p/[Q)R$ZQ)^$eQ)d$kQ+z&oQ,}([Q-Y(gQ-_(jQ.P)_Q.x*XS/|+d2mS1^-O-PS1h-Z-dQ1k-^Q1n-`Q3P.yW3t/}0T0Y5cQ4a1YQ4e1_S4j1i1rQ4q1qQ5o3QW6Y3x3z3{7SS6h4b4cQ6m4lQ6p4pQ6}5^Q7[5pS7l6[6^Q7p6iQ7r6nQ7u6rQ7|7OQ8V7]Q8`7nQ8c7tQ8g7}Q8v8hQ9O8wQ9S9PQ:]:WQ:f:aR:g:b$nWORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#a#d$[$n%[%_%`%c%e%f%g%i%m%x&Q&]&c&m&z'O(O)Q)X*g*k*p+r+y,[,b-l-q-y.T.t/V/W/X/Z/_/b/d/{0b0l2c2{3`3b3c3s5l5z6U7j8^8sS!wn!j!j:V#[#l&U't+P+S,g/r1P2k3l6{9U9W9Z9[9]9^9_9`9a9b9c9d9e9f9g9j9s9t9v9}:O:R:S:mR:]:l$nXORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#a#d$[$n%[%_%`%c%e%f%g%i%m%x&Q&]&c&m&z'O(O)Q)X*g*k*p+r+y,[,b-l-q-y.T.t/V/W/X/Z/_/b/d/{0b0l2c2{3`3b3c3s5l5z6U7j8^8sQ$Zb!Y$em!i$h$i$j&S&g&h&i(g)b)c+T+d+v+w-].S/w0O0T0`1o3v3{6X7k8_S$kn!jQ)_$fQ*X%TW.y*Y*Z*[*]U3Q.z.{.|Q5^2mS5p3R3SU7O5_5`5cQ7]5qU7}7P7Q7SS8h8O8PS8w8i8jQ9P8x!j:W#[#l&U't+P+S,g/r1P2k3l6{9U9W9Z9[9]9^9_9`9a9b9c9d9e9f9g9j9s9t9v9}:O:R:S:mQ:a:kR:b:l$f]OSTjk}!S!W!]!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#a#d$[$n%[%_%c%e%f%g%i%m%x&Q&]&c&m&z'O(O)Q)X*g*k*p+r+y,[,b-l-q-y.T.t/V/W/X/Z/_/b/d/{0b0l2c2{3`3b3c3s5l5z6U7j8^8sU!gRU!`v$wrs!q!t$Y$u&^&q&t)t)u)v*i+Q+a+|,O/h0dQ*f%`!h:X#[#l't+P+S,g/r1P2k3l6{9U9W9Z9[9]9^9_9`9a9b9c9d9e9f9g9j9s9t9v9}:O:R:S:mR:[&US&Y!b$vR/u+Z$l[ORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#a#d$[$n%[%_%c%e%f%g%i%m%x&Q&]&c&m&z'O(O)Q)X*g*k*p+r+y,[,b-l-q-y.T.t/V/W/X/Z/_/b/d/{0b0l2c2{3`3b3c3s5l5z6U7j8^8s!j'b#[#l&U't+P+S,g/r1P2k3l6{9U9W9Z9[9]9^9_9`9a9b9c9d9e9f9g9j9s9t9v9}:O:R:S:mR*e%`$noORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#a#d$[$n%[%_%`%c%e%f%g%i%m%x&Q&]&c&m&z'O(O)Q)X*g*k*p+r+y,[,b-l-q-y.T.t/V/W/X/Z/_/b/d/{0b0l2c2{3`3b3c3s5l5z6U7j8^8sQ'R!z!k:Y#[#l&U't+P+S,g/r1P2k3l6{9U9W9Z9[9]9^9_9`9a9b9c9d9e9f9g9j9s9t9v9}:O:R:S:m!h#UZ!_$`%w%{&v&}'[']'^'_'d'h)l*{+_+x,W,^,q-o0a0k0{1x2U3q4R4U6T7g8[8q8|9V!R9b'a'r+U,c/m/p0o0w0x0y0z1O1T3n4V4[4]5]6Q6a6e6f7z:c!d#WZ!_$`%w%{&v&}'^'_'d'h)l*{+_+x,W,^,q-o0a0k0{1x2U3q4R4U6T7g8[8q8|9V}9d'a'r+U,c/m/p0o0y0z1O1T3n4V4[4]5]6Q6a6e6f7z:c!`#[Z!_$`%w%{&v&}'d'h)l*{+_+x,W,^,q-o0a0k0{1x2U3q4R4U6T7g8[8q8|9Vl(W#u&{)P,y-R-g-h0i1w4`4t:^:h:ix:m'a'r+U,c/m/p0o1O1T3n4V4[4]5]6Q6a6e6f7z:c!`:p&w'f(Z(a+p,U,n-V-s-v.g.i0]0h1`1d2Q2f2h2x4T4g4m4v4{5W5k6`6k6q7YZ:q0|4Z6b7o8a&YcORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#[#a#d#l$[$n%[%_%`%c%e%f%g%i%m%x&Q&U&]&c&m&z'O't(O)Q)X*g*k*p+P+S+r+y,[,b,g-l-q-y.T.t/V/W/X/Z/_/b/d/r/{0b0l1P2c2k2{3`3b3c3l3s5l5z6U6{7j8^8s9U9W9Z9[9]9^9_9`9a9b9c9d9e9f9g9j9s9t9v9}:O:R:S:mS#m`#nR1Q,f&a_ORSTU`jk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#[#a#d#l#n$[$n%[%_%`%c%e%f%g%i%m%x&Q&U&]&c&m&z'O't(O)Q)X*g*k*p+P+S+r+y,[,b,f,g-l-q-y.T.t/V/W/X/Z/_/b/d/r/{0b0l1P2c2k2{3`3b3c3l3s5l5z6U6{7j8^8s9U9W9Z9[9]9^9_9`9a9b9c9d9e9f9g9j9s9t9v9}:O:R:S:mT#i^#oS#g^#oT'k#j'oT#h^#oT'm#j'o&a`ORSTU`jk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#[#a#d#l#n$[$n%[%_%`%c%e%f%g%i%m%x&Q&U&]&c&m&z'O't(O)Q)X*g*k*p+P+S+r+y,[,b,f,g-l-q-y.T.t/V/W/X/Z/_/b/d/r/{0b0l1P2c2k2{3`3b3c3l3s5l5z6U6{7j8^8s9U9W9Z9[9]9^9_9`9a9b9c9d9e9f9g9j9s9t9v9}:O:R:S:mT#m`#nQ#p`R'v#n$nbORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#a#d$[$n%[%_%`%c%e%f%g%i%m%x&Q&]&c&m&z'O(O)Q)X*g*k*p+r+y,[,b-l-q-y.T.t/V/W/X/Z/_/b/d/{0b0l2c2{3`3b3c3s5l5z6U7j8^8s!k:k#[#l&U't+P+S,g/r1P2k3l6{9U9W9Z9[9]9^9_9`9a9b9c9d9e9f9g9j9s9t9v9}:O:R:S:m#RdOSUj}!S!W!m!{#l$[%[%_%`%c%e%f%g%i%m&Q&c't)X*g*k*p+r,g-l-y.t/V/W/X/Z/_/b/d1P2c2{3`3b3c5l5zt#{a!x$S$T$X(T(V(W(_(s(t,X-n1X1s:j:p:q!|&y!v#c#w#y&d'z(c)W)Y)])z)}+s-S-U-x-z.h.k.s.u1b1l1z1}2R2d2z2|4f4r4z5h5m6z7W8T9m9o9q9w9y9{:P:TQ(}$VQ,r(Pc0}9i9n9p9r9x9z9|:Q:Ut#xa!x$S$T$X(T(V(W(_(s(t,X-n1X1s:j:p:qS(j#z(mQ)O$WQ-`(k!|:_!v#c#w#y&d'z(c)W)Y)])z)}+s-S-U-x-z.h.k.s.u1b1l1z1}2R2d2z2|4f4r4z5h5m6z7W8T9m9o9q9w9y9{:P:Tb:`9i9n9p9r9x9z9|:Q:UQ:d:nR:e:ot#{a!x$S$T$X(T(V(W(_(s(t,X-n1X1s:j:p:q!|&y!v#c#w#y&d'z(c)W)Y)])z)}+s-S-U-x-z.h.k.s.u1b1l1z1}2R2d2z2|4f4r4z5h5m6z7W8T9m9o9q9w9y9{:P:Tc0}9i9n9p9r9x9z9|:Q:UlfOSj}!m$[%c%f%g%i*k*p/_/bQ(b#yQ*w%pQ*x%rR1a-S$U#|a!v!x#c#w#y$S$T$X&d'z(T(V(W(_(c(s(t)W)Y)])z)}+s,X-S-U-n-x-z.h.k.s.u1X1b1l1s1z1}2R2d2z2|4f4r4z5h5m6z7W8T9i9m9n9o9p9q9r9w9x9y9z9{9|:P:Q:T:U:j:p:qQ)|$}Q.j*OQ2g.iR5Y2hT(l#z(mS(l#z(mT2o.q2pQ)^$eQ-_(jQ.P)_Q.x*XQ3P.yQ5o3QQ6}5^Q7[5pQ7|7OQ8V7]Q8g7}Q8v8hQ9O8wR9S9Pl(T#u&{)P,y-R-g-h0i1w4`4t:^:h:i!`9w&w'f(Z(a+p,U,n-V-s-v.g.i0]0h1`1d2Q2f2h2x4T4g4m4v4{5W5k6`6k6q7YZ9x0|4Z6b7o8an(V#u&{)P,w,y-R-g-h0i1w4`4t:^:h:i!b9y&w'f(Z(a+p,U,n-V-s-v.g.i0]0f0h1`1d2Q2f2h2x4T4g4m4v4{5W5k6`6k6q7Y]9z0|4Z6b6c7o8apeOSjy}!m$[%Y%c%f%g%i*k*p/_/bQ%VxR*g%`peOSjy}!m$[%Y%c%f%g%i*k*p/_/bR%VxQ*Q%OR.f)yqeOSjy}!m$[%Y%c%f%g%i*k*p/_/bQ.r*VS2y.v.wW5g2v2w2x2}U7V5i5j5kU8R7U7X7YQ8k8SR8y8lQ%^yR*a%YR3W/PR7_5rS$mp$rR.[)jQ%czR*k%dR*q%jT/`*p/bQjOQ!mST$_j!mQ'|#tR,o'|Q!YQR%u!YQ!^RU%y!^%z*|Q%z!_R*|%{Q+X&VR/t+XQ,Y&{R0j,YQ,]&}S0m,]0nR0n,^Q+g&aR0P+gQ&_!eQ*}%|T+b&_*}Q+[&YR/v+[Q&r!rQ+{&pU,P&r+{0eR0e,QQ'o#jR,h'oQ#n`R'u#nQ#bZU'e#b*z9hQ*z9VR9h'rQ,|([W1[,|1]4d6jU1],}-O-PS4d1^1_R6j4e#q(R#u&w&{'f(Z(a(z({)P+p,S,T,U,n,w,x,y-R-V-g-h-s-v.g.i0]0f0g0h0i0|1`1d1w2Q2f2h2x4T4X4Y4Z4`4g4m4t4v4{5W5k6`6b6c6d6k6q7Y7o8a:^:h:iQ-T(aU1c-T1e4hQ1e-VR4h1dQ(m#zR-a(mQ(v$OR-j(vQ1{-sR4w1{Q)w$xR.e)wQ2j.lS5[2j6|R6|5]Q*S%PR.o*SQ2p.qR5a2pQ/O*^S3U/O5sR5s3WQ.V)fW2Z.V2]5Q6wQ2].YQ5Q2[R6w5RQ)k$mR.])kQ/b*pR3f/bWiOSj!mQ%h}Q)S$[Q*j%cQ*l%fQ*m%gQ*o%iQ/]*kS/`*p/bR3e/_Q$^gQ%l!RQ%o!TQ%q!UQ%s!VQ)r$sQ)x$yQ*`%^Q*u%nS/R*a*dQ/i*tQ/j*wQ/k*xS/z+d2mQ1f-XQ1g-YQ1m-_Q2`.`Q2e.gQ3O.xQ3Y/TQ3d/^Y3r/|/}0T0Y5cQ4i1hQ4k1jQ4n1nQ5U2bQ5X2fQ5n3PQ5t3X[6S3q3t3x3z3{7SQ6l4jQ6o4oQ6x5SQ7Z5oQ7`5uW7f6T6Y6[6^Q7q6mQ7s6pQ7x6yQ7{6}Q8U7[U8Y7g7l7nQ8b7rQ8d7uQ8f7|Q8m8VS8o8[8`Q8t8cQ8u8gQ8z8qQ8}8vQ9Q8|Q9R9OR9T9SQ$gmQ&f!iU)a$h$i$jQ+R&SU+u&g&h&iQ-X(gS.R)b)cQ/q+TQ/y+dS0_+v+wQ1j-]Q2T.SQ3o/wS3u0O0TQ4Q0`Q4o1oS6W3v3{Q7i6XQ8]7kR8r8_S#va:jR)[$dU$Oa$d:jR-i(uQ#uaS&w!v)]Q&{!xQ'f#cQ(Z#wQ(a#yQ(z$SQ({$TQ)P$XQ+p&dQ,S9mQ,T9oQ,U9qQ,n'zQ,w(TQ,x(VQ,y(WQ-R(_Q-V(cQ-g(sQ-h(td-s)W-x.s1}2z4z5h6z7W8TQ-v)YQ.g)zQ.i)}Q0]+sQ0f9wQ0g9yQ0h9{Q0i,XQ0|9iQ1`-SQ1d-UQ1w-nQ2Q-zQ2f.hQ2h.kQ2x.uQ4T:PQ4X9nQ4Y9pQ4Z9rQ4`1XQ4g1bQ4m1lQ4t1sQ4v1zQ4{2RQ5W2dQ5k2|Q6`:TQ6b9|Q6c9xQ6d9zQ6k4fQ6q4rQ7Y5mQ7o:QQ8a:UQ:^:jQ:h:pR:i:qT'{#t'|lgOSj}!m$[%c%f%g%i*k*p/_/bS!oU%eQ%n!SQ%t!WQ'S!{Q's#lS*d%[%_Q*h%`Q*t%mQ+O&QQ+o&cQ,l'tQ-u)XQ/Y*gQ0[+rQ1S,gQ1u-lQ2P-yQ2w.tQ3[/VQ3]/WQ3_/XQ3a/ZQ3h/dQ4^1PQ5V2cQ5j2{Q5y3`Q5{3bQ5|3cQ7X5lR7b5z!vZOSUj}!S!m!{$[%[%_%`%c%e%f%g%i%m&Q&c)X*g*k*p+r-l-y.t/V/W/X/Z/_/b/d2c2{3`3b3c5l5zQ!_RQ!nTQ$`kQ%w!]Q%{!`Q&v!uQ&}!yQ'T#OQ'U#PQ'V#QQ'W#RQ'X#SQ'Y#TQ'Z#UQ'[#VQ']#WQ'^#XQ'_#YQ'a#[Q'd#aQ'h#dW'r#l't,g1PQ)l$nQ*{%xS+U&U/rQ+_&]Q+x&mQ,W&zQ,^'OQ,a9UQ,c9WQ,q(OQ-o)QQ/m+PQ/p+SQ0a+yQ0k,[Q0o9ZQ0p9[Q0q9]Q0r9^Q0s9_Q0t9`Q0u9aQ0v9bQ0w9cQ0x9dQ0y9eQ0z9fQ0{,bQ1O9jQ1T9gQ1x-qQ2U.TQ3n9sQ3q/{Q4R0bQ4U0lQ4V9tQ4[9vQ4]9}Q5]2kQ6Q3lQ6T3sQ6a:OQ6e:RQ6f:SQ7g6UQ7z6{Q8[7jQ8q8^Q8|8sQ9V!WR:c:mT!XQ!YR!aRR&W!bS&S!b+WS+T&T&[R/w+^R&|!xR'P!yT!sU$YS!rU$YU$xrs*iS&p!q!tQ+}&qQ,Q&tQ.d)vS0c+|,OR4S0d[!dR!`$u&^)t+ah!pUrs!q!t$Y&q&t)v+|,O0dQ/[*iQ/n+QQ3k/hT:Z&U)uT!fR$uS!eR$uS%|!`)tS+V&U)uQ+`&^R/x+aT&Z!b$vQ#j^R'x#oT'n#j'oR1R,fT(^#w(fR(d#yQ-t)WQ2O-xQ2v.sQ4x1}Q5i2zQ6t4zQ7U5hQ7y6zQ8S7WR8l8TlhOSj}!m$[%c%f%g%i*k*p/_/bQ%]yR*`%YV$yrs*iR.m*PR*_%WQ$qpR)q$rR)g$lT%az%dT%bz%dT/a*p/b",
++  nodeNames: "⚠ ArithOp ArithOp extends LineComment BlockComment Script ExportDeclaration export Star as VariableName from String ; default FunctionDeclaration async function VariableDefinition TypeParamList TypeDefinition ThisType this LiteralType ArithOp Number BooleanLiteral TemplateType VoidType void TypeofType typeof MemberExpression . ?. PropertyName [ TemplateString null super RegExp ] ArrayExpression Spread , } { ObjectExpression Property async get set PropertyDefinition Block : NewExpression new TypeArgList CompareOp < ) ( ArgList UnaryExpression await yield delete LogicOp BitOp ParenthesizedExpression ClassExpression class extends ClassBody MethodDeclaration Privacy static abstract override PrivatePropertyDefinition PropertyDeclaration readonly Optional TypeAnnotation Equals StaticBlock FunctionExpression ArrowFunction ParamList ParamList ArrayPattern ObjectPattern PatternProperty Privacy readonly Arrow MemberExpression PrivatePropertyName BinaryExpression ArithOp ArithOp ArithOp ArithOp BitOp CompareOp instanceof in const CompareOp BitOp BitOp BitOp LogicOp LogicOp ConditionalExpression LogicOp LogicOp AssignmentExpression UpdateOp PostfixExpression CallExpression TaggedTemplateExpression DynamicImport import ImportMeta JSXElement JSXSelfCloseEndTag JSXStartTag JSXSelfClosingTag JSXIdentifier JSXBuiltin JSXIdentifier JSXNamespacedName JSXMemberExpression JSXSpreadAttribute JSXAttribute JSXAttributeValue JSXEscape JSXEndTag JSXOpenTag JSXFragmentTag JSXText JSXEscape JSXStartCloseTag JSXCloseTag PrefixCast ArrowFunction TypeParamList SequenceExpression KeyofType keyof UniqueType unique ImportType InferredType infer TypeName ParenthesizedType FunctionSignature ParamList NewSignature IndexedType TupleType Label ArrayType ReadonlyType ObjectType MethodType PropertyType IndexSignature CallSignature TypePredicate is NewSignature new UnionType LogicOp IntersectionType LogicOp ConditionalType ParameterizedType ClassDeclaration abstract implements type VariableDeclaration let var TypeAliasDeclaration InterfaceDeclaration interface EnumDeclaration enum EnumBody NamespaceDeclaration namespace module AmbientDeclaration declare GlobalDeclaration global ClassDeclaration ClassBody MethodDeclaration AmbientFunctionDeclaration ExportGroup VariableName VariableName ImportDeclaration ImportGroup ForStatement for ForSpec ForInSpec ForOfSpec of WhileStatement while WithStatement with DoStatement do IfStatement if else SwitchStatement switch SwitchBody CaseLabel case DefaultLabel TryStatement try catch finally ReturnStatement return ThrowStatement throw BreakStatement break ContinueStatement continue DebuggerStatement debugger LabeledStatement ExpressionStatement",
++  maxTerm: 332,
+   context: trackNewline,
+   nodeProps: [
+-    [common.NodeProp.group, -26,7,14,16,54,180,184,187,188,190,193,196,207,209,215,217,219,221,224,230,234,236,238,240,242,244,245,"Statement",-30,11,13,23,26,27,38,39,40,41,43,48,56,64,70,71,87,88,97,99,115,118,120,121,122,123,125,126,144,145,147,"Expression",-22,22,24,28,29,31,148,150,152,153,155,156,157,159,160,161,163,164,165,174,176,178,179,"Type",-3,75,81,86,"ClassItem"],
+-    [common.NodeProp.closedBy, 37,"]",47,"}",62,")",128,"JSXSelfCloseEndTag JSXEndTag",142,"JSXEndTag"],
+-    [common.NodeProp.openedBy, 42,"[",46,"{",61,"(",127,"JSXStartTag",137,"JSXStartTag JSXStartCloseTag"]
++    [common.NodeProp.group, -26,7,14,16,54,182,186,189,190,192,195,198,209,211,217,219,221,223,226,232,236,238,240,242,244,246,247,"Statement",-30,11,13,23,26,27,38,39,40,41,43,48,56,64,70,71,87,88,97,99,115,118,120,121,122,123,125,126,146,147,149,"Expression",-22,22,24,28,29,31,150,152,154,155,157,158,159,161,162,163,165,166,167,176,178,180,181,"Type",-3,75,81,86,"ClassItem"],
++    [common.NodeProp.closedBy, 37,"]",47,"}",62,")",128,"JSXSelfCloseEndTag JSXEndTag",144,"JSXEndTag"],
++    [common.NodeProp.openedBy, 42,"[",46,"{",61,"(",127,"JSXStartTag",139,"JSXStartTag JSXStartCloseTag"]
+   ],
+   skippedNodes: [0,4,5],
+   repeatNodeCount: 28,
+-  tokenData: "!C}~R!`OX%TXY%cYZ'RZ[%c[]%T]^'R^p%Tpq%cqr'crs(kst0htu2`uv4pvw5ewx6cxy<yyz=Zz{=k{|>k|}?O}!O>k!O!P?`!P!QCl!Q!R!0[!R![!1q![!]!7s!]!^!8V!^!_!8g!_!`!9d!`!a!:[!a!b!<R!b!c%T!c!}2`!}#O!=d#O#P%T#P#Q!=t#Q#R!>U#R#S2`#S#T!>i#T#o2`#o#p!>y#p#q!?O#q#r!?f#r#s!?x#s$f%T$f$g%c$g#BY2`#BY#BZ!@Y#BZ$IS2`$IS$I_!@Y$I_$I|2`$I|$I}!Bq$I}$JO!Bq$JO$JT2`$JT$JU!@Y$JU$KV2`$KV$KW!@Y$KW&FU2`&FU&FV!@Y&FV?HT2`?HT?HU!@Y?HU~2`W%YR$QWO!^%T!_#o%T#p~%T,T%jg$QW'T+{OX%TXY%cYZ%TZ[%c[p%Tpq%cq!^%T!_#o%T#p$f%T$f$g%c$g#BY%T#BY#BZ%c#BZ$IS%T$IS$I_%c$I_$JT%T$JT$JU%c$JU$KV%T$KV$KW%c$KW&FU%T&FU&FV%c&FV?HT%T?HT?HU%c?HU~%T,T'YR$QW'U+{O!^%T!_#o%T#p~%T$T'jS$QW!f#{O!^%T!_!`'v!`#o%T#p~%T$O'}S#a#v$QWO!^%T!_!`(Z!`#o%T#p~%T$O(bR#a#v$QWO!^%T!_#o%T#p~%T'u(rZ$QW]!ROY(kYZ)eZr(krs*rs!^(k!^!_+U!_#O(k#O#P-b#P#o(k#o#p+U#p~(k&r)jV$QWOr)ers*Ps!^)e!^!_*a!_#o)e#o#p*a#p~)e&r*WR#{&j$QWO!^%T!_#o%T#p~%T&j*dROr*ars*ms~*a&j*rO#{&j'u*{R#{&j$QW]!RO!^%T!_#o%T#p~%T'm+ZV]!ROY+UYZ*aZr+Urs+ps#O+U#O#P+w#P~+U'm+wO#{&j]!R'm+zROr+Urs,Ts~+U'm,[U#{&j]!ROY,nZr,nrs-Vs#O,n#O#P-[#P~,n!R,sU]!ROY,nZr,nrs-Vs#O,n#O#P-[#P~,n!R-[O]!R!R-_PO~,n'u-gV$QWOr(krs-|s!^(k!^!_+U!_#o(k#o#p+U#p~(k'u.VZ#{&j$QW]!ROY.xYZ%TZr.xrs/rs!^.x!^!_,n!_#O.x#O#P0S#P#o.x#o#p,n#p~.x!Z/PZ$QW]!ROY.xYZ%TZr.xrs/rs!^.x!^!_,n!_#O.x#O#P0S#P#o.x#o#p,n#p~.x!Z/yR$QW]!RO!^%T!_#o%T#p~%T!Z0XT$QWO!^.x!^!_,n!_#o.x#o#p,n#p~.xy0mZ$QWOt%Ttu1`u!^%T!_!c%T!c!}1`!}#R%T#R#S1`#S#T%T#T#o1`#p$g%T$g~1`y1g]$QW'mqOt%Ttu1`u!Q%T!Q![1`![!^%T!_!c%T!c!}1`!}#R%T#R#S1`#S#T%T#T#o1`#p$g%T$g~1`&i2k_$QW#vS'W%k'dpOt%Ttu2`u}%T}!O3j!O!Q%T!Q![2`![!^%T!_!c%T!c!}2`!}#R%T#R#S2`#S#T%T#T#o2`#p$g%T$g~2`[3q_$QW#vSOt%Ttu3ju}%T}!O3j!O!Q%T!Q![3j![!^%T!_!c%T!c!}3j!}#R%T#R#S3j#S#T%T#T#o3j#p$g%T$g~3j$O4wS#Y#v$QWO!^%T!_!`5T!`#o%T#p~%T$O5[R$QW#k#vO!^%T!_#o%T#p~%T%r5lU'v%j$QWOv%Tvw6Ow!^%T!_!`5T!`#o%T#p~%T$O6VS$QW#e#vO!^%T!_!`5T!`#o%T#p~%T'u6jZ$QW]!ROY6cYZ7]Zw6cwx*rx!^6c!^!_8T!_#O6c#O#P:T#P#o6c#o#p8T#p~6c&r7bV$QWOw7]wx*Px!^7]!^!_7w!_#o7]#o#p7w#p~7]&j7zROw7wwx*mx~7w'm8YV]!ROY8TYZ7wZw8Twx+px#O8T#O#P8o#P~8T'm8rROw8Twx8{x~8T'm9SU#{&j]!ROY9fZw9fwx-Vx#O9f#O#P9}#P~9f!R9kU]!ROY9fZw9fwx-Vx#O9f#O#P9}#P~9f!R:QPO~9f'u:YV$QWOw6cwx:ox!^6c!^!_8T!_#o6c#o#p8T#p~6c'u:xZ#{&j$QW]!ROY;kYZ%TZw;kwx/rx!^;k!^!_9f!_#O;k#O#P<e#P#o;k#o#p9f#p~;k!Z;rZ$QW]!ROY;kYZ%TZw;kwx/rx!^;k!^!_9f!_#O;k#O#P<e#P#o;k#o#p9f#p~;k!Z<jT$QWO!^;k!^!_9f!_#o;k#o#p9f#p~;k%V=QR!`$}$QWO!^%T!_#o%T#p~%TZ=bR!_R$QWO!^%T!_#o%T#p~%T%R=tU'X!R#Z#v$QWOz%Tz{>W{!^%T!_!`5T!`#o%T#p~%T$O>_S#W#v$QWO!^%T!_!`5T!`#o%T#p~%T$u>rSi$m$QWO!^%T!_!`5T!`#o%T#p~%T&i?VR}&a$QWO!^%T!_#o%T#p~%T&i?gVr%n$QWO!O%T!O!P?|!P!Q%T!Q![@r![!^%T!_#o%T#p~%Ty@RT$QWO!O%T!O!P@b!P!^%T!_#o%T#p~%Ty@iR|q$QWO!^%T!_#o%T#p~%Ty@yZ$QWjqO!Q%T!Q![@r![!^%T!_!g%T!g!hAl!h#R%T#R#S@r#S#X%T#X#YAl#Y#o%T#p~%TyAqZ$QWO{%T{|Bd|}%T}!OBd!O!Q%T!Q![CO![!^%T!_#R%T#R#SCO#S#o%T#p~%TyBiV$QWO!Q%T!Q![CO![!^%T!_#R%T#R#SCO#S#o%T#p~%TyCVV$QWjqO!Q%T!Q![CO![!^%T!_#R%T#R#SCO#S#o%T#p~%T,TCs`$QW#X#vOYDuYZ%TZzDuz{Jl{!PDu!P!Q!-e!Q!^Du!^!_Fx!_!`!.^!`!a!/]!a!}Du!}#OHq#O#PJQ#P#oDu#o#pFx#p~DuXD|[$QWyPOYDuYZ%TZ!PDu!P!QEr!Q!^Du!^!_Fx!_!}Du!}#OHq#O#PJQ#P#oDu#o#pFx#p~DuXEy_$QWyPO!^%T!_#Z%T#Z#[Er#[#]%T#]#^Er#^#a%T#a#bEr#b#g%T#g#hEr#h#i%T#i#jEr#j#m%T#m#nEr#n#o%T#p~%TPF}VyPOYFxZ!PFx!P!QGd!Q!}Fx!}#OG{#O#PHh#P~FxPGiUyP#Z#[Gd#]#^Gd#a#bGd#g#hGd#i#jGd#m#nGdPHOTOYG{Z#OG{#O#PH_#P#QFx#Q~G{PHbQOYG{Z~G{PHkQOYFxZ~FxXHvY$QWOYHqYZ%TZ!^Hq!^!_G{!_#OHq#O#PIf#P#QDu#Q#oHq#o#pG{#p~HqXIkV$QWOYHqYZ%TZ!^Hq!^!_G{!_#oHq#o#pG{#p~HqXJVV$QWOYDuYZ%TZ!^Du!^!_Fx!_#oDu#o#pFx#p~Du,TJs^$QWyPOYJlYZKoZzJlz{NQ{!PJl!P!Q!,R!Q!^Jl!^!_!!]!_!}Jl!}#O!'|#O#P!+a#P#oJl#o#p!!]#p~Jl,TKtV$QWOzKoz{LZ{!^Ko!^!_M]!_#oKo#o#pM]#p~Ko,TL`X$QWOzKoz{LZ{!PKo!P!QL{!Q!^Ko!^!_M]!_#oKo#o#pM]#p~Ko,TMSR$QWT+{O!^%T!_#o%T#p~%T+{M`ROzM]z{Mi{~M]+{MlTOzM]z{Mi{!PM]!P!QM{!Q~M]+{NQOT+{,TNX^$QWyPOYJlYZKoZzJlz{NQ{!PJl!P!Q! T!Q!^Jl!^!_!!]!_!}Jl!}#O!'|#O#P!+a#P#oJl#o#p!!]#p~Jl,T! ^_$QWT+{yPO!^%T!_#Z%T#Z#[Er#[#]%T#]#^Er#^#a%T#a#bEr#b#g%T#g#hEr#h#i%T#i#jEr#j#m%T#m#nEr#n#o%T#p~%T+{!!bYyPOY!!]YZM]Zz!!]z{!#Q{!P!!]!P!Q!&x!Q!}!!]!}#O!$`#O#P!&f#P~!!]+{!#VYyPOY!!]YZM]Zz!!]z{!#Q{!P!!]!P!Q!#u!Q!}!!]!}#O!$`#O#P!&f#P~!!]+{!#|UT+{yP#Z#[Gd#]#^Gd#a#bGd#g#hGd#i#jGd#m#nGd+{!$cWOY!$`YZM]Zz!$`z{!${{#O!$`#O#P!&S#P#Q!!]#Q~!$`+{!%OYOY!$`YZM]Zz!$`z{!${{!P!$`!P!Q!%n!Q#O!$`#O#P!&S#P#Q!!]#Q~!$`+{!%sTT+{OYG{Z#OG{#O#PH_#P#QFx#Q~G{+{!&VTOY!$`YZM]Zz!$`z{!${{~!$`+{!&iTOY!!]YZM]Zz!!]z{!#Q{~!!]+{!&}_yPOzM]z{Mi{#ZM]#Z#[!&x#[#]M]#]#^!&x#^#aM]#a#b!&x#b#gM]#g#h!&x#h#iM]#i#j!&x#j#mM]#m#n!&x#n~M],T!(R[$QWOY!'|YZKoZz!'|z{!(w{!^!'|!^!_!$`!_#O!'|#O#P!*o#P#QJl#Q#o!'|#o#p!$`#p~!'|,T!(|^$QWOY!'|YZKoZz!'|z{!(w{!P!'|!P!Q!)x!Q!^!'|!^!_!$`!_#O!'|#O#P!*o#P#QJl#Q#o!'|#o#p!$`#p~!'|,T!*PY$QWT+{OYHqYZ%TZ!^Hq!^!_G{!_#OHq#O#PIf#P#QDu#Q#oHq#o#pG{#p~Hq,T!*tX$QWOY!'|YZKoZz!'|z{!(w{!^!'|!^!_!$`!_#o!'|#o#p!$`#p~!'|,T!+fX$QWOYJlYZKoZzJlz{NQ{!^Jl!^!_!!]!_#oJl#o#p!!]#p~Jl,T!,Yc$QWyPOzKoz{LZ{!^Ko!^!_M]!_#ZKo#Z#[!,R#[#]Ko#]#^!,R#^#aKo#a#b!,R#b#gKo#g#h!,R#h#iKo#i#j!,R#j#mKo#m#n!,R#n#oKo#o#pM]#p~Ko,T!-lV$QWS+{OY!-eYZ%TZ!^!-e!^!_!.R!_#o!-e#o#p!.R#p~!-e+{!.WQS+{OY!.RZ~!.R$P!.g[$QW#k#vyPOYDuYZ%TZ!PDu!P!QEr!Q!^Du!^!_Fx!_!}Du!}#OHq#O#PJQ#P#oDu#o#pFx#p~Du]!/f[#sS$QWyPOYDuYZ%TZ!PDu!P!QEr!Q!^Du!^!_Fx!_!}Du!}#OHq#O#PJQ#P#oDu#o#pFx#p~Duy!0cd$QWjqO!O%T!O!P@r!P!Q%T!Q![!1q![!^%T!_!g%T!g!hAl!h#R%T#R#S!1q#S#U%T#U#V!3X#V#X%T#X#YAl#Y#b%T#b#c!2w#c#d!4m#d#l%T#l#m!5{#m#o%T#p~%Ty!1x_$QWjqO!O%T!O!P@r!P!Q%T!Q![!1q![!^%T!_!g%T!g!hAl!h#R%T#R#S!1q#S#X%T#X#YAl#Y#b%T#b#c!2w#c#o%T#p~%Ty!3OR$QWjqO!^%T!_#o%T#p~%Ty!3^W$QWO!Q%T!Q!R!3v!R!S!3v!S!^%T!_#R%T#R#S!3v#S#o%T#p~%Ty!3}Y$QWjqO!Q%T!Q!R!3v!R!S!3v!S!^%T!_#R%T#R#S!3v#S#b%T#b#c!2w#c#o%T#p~%Ty!4rV$QWO!Q%T!Q!Y!5X!Y!^%T!_#R%T#R#S!5X#S#o%T#p~%Ty!5`X$QWjqO!Q%T!Q!Y!5X!Y!^%T!_#R%T#R#S!5X#S#b%T#b#c!2w#c#o%T#p~%Ty!6QZ$QWO!Q%T!Q![!6s![!^%T!_!c%T!c!i!6s!i#R%T#R#S!6s#S#T%T#T#Z!6s#Z#o%T#p~%Ty!6z]$QWjqO!Q%T!Q![!6s![!^%T!_!c%T!c!i!6s!i#R%T#R#S!6s#S#T%T#T#Z!6s#Z#b%T#b#c!2w#c#o%T#p~%T%w!7|R!XV$QW#i%hO!^%T!_#o%T#p~%T!P!8^R^w$QWO!^%T!_#o%T#p~%T+c!8rR']d!]%Y#t&s'zP!P!Q!8{!^!_!9Q!_!`!9_W!9QO$SW#v!9VP#[#v!_!`!9Y#v!9_O#k#v#v!9dO#]#v%w!9kT!w%o$QWO!^%T!_!`'v!`!a!9z!a#o%T#p~%T$P!:RR#S#w$QWO!^%T!_#o%T#p~%T%w!:gT'[!s#]#v#}S$QWO!^%T!_!`!:v!`!a!;W!a#o%T#p~%T$O!:}R#]#v$QWO!^%T!_#o%T#p~%T$O!;_T#[#v$QWO!^%T!_!`5T!`!a!;n!a#o%T#p~%T$O!;uS#[#v$QWO!^%T!_!`5T!`#o%T#p~%T%w!<YV'n%o$QWO!O%T!O!P!<o!P!^%T!_!a%T!a!b!=P!b#o%T#p~%T$`!<vRs$W$QWO!^%T!_#o%T#p~%T$O!=WS$QW#f#vO!^%T!_!`5T!`#o%T#p~%T&e!=kRu&]$QWO!^%T!_#o%T#p~%TZ!={RzR$QWO!^%T!_#o%T#p~%T$O!>]S#c#v$QWO!^%T!_!`5T!`#o%T#p~%T$P!>pR$QW'a#wO!^%T!_#o%T#p~%T~!?OO!P~%r!?VT'u%j$QWO!^%T!_!`5T!`#o%T#p#q!=P#q~%T$u!?oR!O$k$QW'cQO!^%T!_#o%T#p~%TX!@PR!gP$QWO!^%T!_#o%T#p~%T,T!@gr$QW'T+{#vS'W%k'dpOX%TXY%cYZ%TZ[%c[p%Tpq%cqt%Ttu2`u}%T}!O3j!O!Q%T!Q![2`![!^%T!_!c%T!c!}2`!}#R%T#R#S2`#S#T%T#T#o2`#p$f%T$f$g%c$g#BY2`#BY#BZ!@Y#BZ$IS2`$IS$I_!@Y$I_$JT2`$JT$JU!@Y$JU$KV2`$KV$KW!@Y$KW&FU2`&FU&FV!@Y&FV?HT2`?HT?HU!@Y?HU~2`,T!CO_$QW'U+{#vS'W%k'dpOt%Ttu2`u}%T}!O3j!O!Q%T!Q![2`![!^%T!_!c%T!c!}2`!}#R%T#R#S2`#S#T%T#T#o2`#p$g%T$g~2`",
++  tokenData: "!F_~R!`OX%TXY%cYZ'RZ[%c[]%T]^'R^p%Tpq%cqr'crs(kst0htu2`uv4pvw5ewx6cxy<yyz=Zz{=k{|>k|}?O}!O>k!O!P?`!P!QCl!Q!R!0[!R![!1q![!]!7s!]!^!8V!^!_!8g!_!`!9d!`!a!:[!a!b!<R!b!c%T!c!}2`!}#O!=d#O#P%T#P#Q!=t#Q#R!>U#R#S2`#S#T!>i#T#o!>y#o#p!AZ#p#q!A`#q#r!Av#r#s!BY#s$f%T$f$g%c$g#BY2`#BY#BZ!Bj#BZ$IS2`$IS$I_!Bj$I_$I|2`$I|$I}!ER$I}$JO!ER$JO$JT2`$JT$JU!Bj$JU$KV2`$KV$KW!Bj$KW&FU2`&FU&FV!Bj&FV?HT2`?HT?HU!Bj?HU~2`W%YR$SWO!^%T!_#o%T#p~%T,T%jg$SW'V+{OX%TXY%cYZ%TZ[%c[p%Tpq%cq!^%T!_#o%T#p$f%T$f$g%c$g#BY%T#BY#BZ%c#BZ$IS%T$IS$I_%c$I_$JT%T$JT$JU%c$JU$KV%T$KV$KW%c$KW&FU%T&FU&FV%c&FV?HT%T?HT?HU%c?HU~%T,T'YR$SW'W+{O!^%T!_#o%T#p~%T$T'jS$SW!f#{O!^%T!_!`'v!`#o%T#p~%T$O'}S#a#v$SWO!^%T!_!`(Z!`#o%T#p~%T$O(bR#a#v$SWO!^%T!_#o%T#p~%T'u(rZ$SW]!ROY(kYZ)eZr(krs*rs!^(k!^!_+U!_#O(k#O#P-b#P#o(k#o#p+U#p~(k&r)jV$SWOr)ers*Ps!^)e!^!_*a!_#o)e#o#p*a#p~)e&r*WR#}&j$SWO!^%T!_#o%T#p~%T&j*dROr*ars*ms~*a&j*rO#}&j'u*{R#}&j$SW]!RO!^%T!_#o%T#p~%T'm+ZV]!ROY+UYZ*aZr+Urs+ps#O+U#O#P+w#P~+U'm+wO#}&j]!R'm+zROr+Urs,Ts~+U'm,[U#}&j]!ROY,nZr,nrs-Vs#O,n#O#P-[#P~,n!R,sU]!ROY,nZr,nrs-Vs#O,n#O#P-[#P~,n!R-[O]!R!R-_PO~,n'u-gV$SWOr(krs-|s!^(k!^!_+U!_#o(k#o#p+U#p~(k'u.VZ#}&j$SW]!ROY.xYZ%TZr.xrs/rs!^.x!^!_,n!_#O.x#O#P0S#P#o.x#o#p,n#p~.x!Z/PZ$SW]!ROY.xYZ%TZr.xrs/rs!^.x!^!_,n!_#O.x#O#P0S#P#o.x#o#p,n#p~.x!Z/yR$SW]!RO!^%T!_#o%T#p~%T!Z0XT$SWO!^.x!^!_,n!_#o.x#o#p,n#p~.xy0mZ$SWOt%Ttu1`u!^%T!_!c%T!c!}1`!}#R%T#R#S1`#S#T%T#T#o1`#p$g%T$g~1`y1g]$SW'oqOt%Ttu1`u!Q%T!Q![1`![!^%T!_!c%T!c!}1`!}#R%T#R#S1`#S#T%T#T#o1`#p$g%T$g~1`&i2k_$SW'fp'Y%k#vSOt%Ttu2`u}%T}!O3j!O!Q%T!Q![2`![!^%T!_!c%T!c!}2`!}#R%T#R#S2`#S#T%T#T#o2`#p$g%T$g~2`[3q_$SW#vSOt%Ttu3ju}%T}!O3j!O!Q%T!Q![3j![!^%T!_!c%T!c!}3j!}#R%T#R#S3j#S#T%T#T#o3j#p$g%T$g~3j$O4wS#Y#v$SWO!^%T!_!`5T!`#o%T#p~%T$O5[R$SW#k#vO!^%T!_#o%T#p~%T%r5lU'x%j$SWOv%Tvw6Ow!^%T!_!`5T!`#o%T#p~%T$O6VS$SW#e#vO!^%T!_!`5T!`#o%T#p~%T'u6jZ$SW]!ROY6cYZ7]Zw6cwx*rx!^6c!^!_8T!_#O6c#O#P:T#P#o6c#o#p8T#p~6c&r7bV$SWOw7]wx*Px!^7]!^!_7w!_#o7]#o#p7w#p~7]&j7zROw7wwx*mx~7w'm8YV]!ROY8TYZ7wZw8Twx+px#O8T#O#P8o#P~8T'm8rROw8Twx8{x~8T'm9SU#}&j]!ROY9fZw9fwx-Vx#O9f#O#P9}#P~9f!R9kU]!ROY9fZw9fwx-Vx#O9f#O#P9}#P~9f!R:QPO~9f'u:YV$SWOw6cwx:ox!^6c!^!_8T!_#o6c#o#p8T#p~6c'u:xZ#}&j$SW]!ROY;kYZ%TZw;kwx/rx!^;k!^!_9f!_#O;k#O#P<e#P#o;k#o#p9f#p~;k!Z;rZ$SW]!ROY;kYZ%TZw;kwx/rx!^;k!^!_9f!_#O;k#O#P<e#P#o;k#o#p9f#p~;k!Z<jT$SWO!^;k!^!_9f!_#o;k#o#p9f#p~;k%V=QR!`$}$SWO!^%T!_#o%T#p~%TZ=bR!_R$SWO!^%T!_#o%T#p~%T%R=tU'Z!R#Z#v$SWOz%Tz{>W{!^%T!_!`5T!`#o%T#p~%T$O>_S#W#v$SWO!^%T!_!`5T!`#o%T#p~%T$u>rSi$m$SWO!^%T!_!`5T!`#o%T#p~%T&i?VR}&a$SWO!^%T!_#o%T#p~%T&i?gVr%n$SWO!O%T!O!P?|!P!Q%T!Q![@r![!^%T!_#o%T#p~%Ty@RT$SWO!O%T!O!P@b!P!^%T!_#o%T#p~%Ty@iR|q$SWO!^%T!_#o%T#p~%Ty@yZ$SWjqO!Q%T!Q![@r![!^%T!_!g%T!g!hAl!h#R%T#R#S@r#S#X%T#X#YAl#Y#o%T#p~%TyAqZ$SWO{%T{|Bd|}%T}!OBd!O!Q%T!Q![CO![!^%T!_#R%T#R#SCO#S#o%T#p~%TyBiV$SWO!Q%T!Q![CO![!^%T!_#R%T#R#SCO#S#o%T#p~%TyCVV$SWjqO!Q%T!Q![CO![!^%T!_#R%T#R#SCO#S#o%T#p~%T,TCs`$SW#X#vOYDuYZ%TZzDuz{Jl{!PDu!P!Q!-e!Q!^Du!^!_Fx!_!`!.^!`!a!/]!a!}Du!}#OHq#O#PJQ#P#oDu#o#pFx#p~DuXD|[$SWyPOYDuYZ%TZ!PDu!P!QEr!Q!^Du!^!_Fx!_!}Du!}#OHq#O#PJQ#P#oDu#o#pFx#p~DuXEy_$SWyPO!^%T!_#Z%T#Z#[Er#[#]%T#]#^Er#^#a%T#a#bEr#b#g%T#g#hEr#h#i%T#i#jEr#j#m%T#m#nEr#n#o%T#p~%TPF}VyPOYFxZ!PFx!P!QGd!Q!}Fx!}#OG{#O#PHh#P~FxPGiUyP#Z#[Gd#]#^Gd#a#bGd#g#hGd#i#jGd#m#nGdPHOTOYG{Z#OG{#O#PH_#P#QFx#Q~G{PHbQOYG{Z~G{PHkQOYFxZ~FxXHvY$SWOYHqYZ%TZ!^Hq!^!_G{!_#OHq#O#PIf#P#QDu#Q#oHq#o#pG{#p~HqXIkV$SWOYHqYZ%TZ!^Hq!^!_G{!_#oHq#o#pG{#p~HqXJVV$SWOYDuYZ%TZ!^Du!^!_Fx!_#oDu#o#pFx#p~Du,TJs^$SWyPOYJlYZKoZzJlz{NQ{!PJl!P!Q!,R!Q!^Jl!^!_!!]!_!}Jl!}#O!'|#O#P!+a#P#oJl#o#p!!]#p~Jl,TKtV$SWOzKoz{LZ{!^Ko!^!_M]!_#oKo#o#pM]#p~Ko,TL`X$SWOzKoz{LZ{!PKo!P!QL{!Q!^Ko!^!_M]!_#oKo#o#pM]#p~Ko,TMSR$SWT+{O!^%T!_#o%T#p~%T+{M`ROzM]z{Mi{~M]+{MlTOzM]z{Mi{!PM]!P!QM{!Q~M]+{NQOT+{,TNX^$SWyPOYJlYZKoZzJlz{NQ{!PJl!P!Q! T!Q!^Jl!^!_!!]!_!}Jl!}#O!'|#O#P!+a#P#oJl#o#p!!]#p~Jl,T! ^_$SWT+{yPO!^%T!_#Z%T#Z#[Er#[#]%T#]#^Er#^#a%T#a#bEr#b#g%T#g#hEr#h#i%T#i#jEr#j#m%T#m#nEr#n#o%T#p~%T+{!!bYyPOY!!]YZM]Zz!!]z{!#Q{!P!!]!P!Q!&x!Q!}!!]!}#O!$`#O#P!&f#P~!!]+{!#VYyPOY!!]YZM]Zz!!]z{!#Q{!P!!]!P!Q!#u!Q!}!!]!}#O!$`#O#P!&f#P~!!]+{!#|UT+{yP#Z#[Gd#]#^Gd#a#bGd#g#hGd#i#jGd#m#nGd+{!$cWOY!$`YZM]Zz!$`z{!${{#O!$`#O#P!&S#P#Q!!]#Q~!$`+{!%OYOY!$`YZM]Zz!$`z{!${{!P!$`!P!Q!%n!Q#O!$`#O#P!&S#P#Q!!]#Q~!$`+{!%sTT+{OYG{Z#OG{#O#PH_#P#QFx#Q~G{+{!&VTOY!$`YZM]Zz!$`z{!${{~!$`+{!&iTOY!!]YZM]Zz!!]z{!#Q{~!!]+{!&}_yPOzM]z{Mi{#ZM]#Z#[!&x#[#]M]#]#^!&x#^#aM]#a#b!&x#b#gM]#g#h!&x#h#iM]#i#j!&x#j#mM]#m#n!&x#n~M],T!(R[$SWOY!'|YZKoZz!'|z{!(w{!^!'|!^!_!$`!_#O!'|#O#P!*o#P#QJl#Q#o!'|#o#p!$`#p~!'|,T!(|^$SWOY!'|YZKoZz!'|z{!(w{!P!'|!P!Q!)x!Q!^!'|!^!_!$`!_#O!'|#O#P!*o#P#QJl#Q#o!'|#o#p!$`#p~!'|,T!*PY$SWT+{OYHqYZ%TZ!^Hq!^!_G{!_#OHq#O#PIf#P#QDu#Q#oHq#o#pG{#p~Hq,T!*tX$SWOY!'|YZKoZz!'|z{!(w{!^!'|!^!_!$`!_#o!'|#o#p!$`#p~!'|,T!+fX$SWOYJlYZKoZzJlz{NQ{!^Jl!^!_!!]!_#oJl#o#p!!]#p~Jl,T!,Yc$SWyPOzKoz{LZ{!^Ko!^!_M]!_#ZKo#Z#[!,R#[#]Ko#]#^!,R#^#aKo#a#b!,R#b#gKo#g#h!,R#h#iKo#i#j!,R#j#mKo#m#n!,R#n#oKo#o#pM]#p~Ko,T!-lV$SWS+{OY!-eYZ%TZ!^!-e!^!_!.R!_#o!-e#o#p!.R#p~!-e+{!.WQS+{OY!.RZ~!.R$P!.g[$SW#k#vyPOYDuYZ%TZ!PDu!P!QEr!Q!^Du!^!_Fx!_!}Du!}#OHq#O#PJQ#P#oDu#o#pFx#p~Du]!/f[#sS$SWyPOYDuYZ%TZ!PDu!P!QEr!Q!^Du!^!_Fx!_!}Du!}#OHq#O#PJQ#P#oDu#o#pFx#p~Duy!0cd$SWjqO!O%T!O!P@r!P!Q%T!Q![!1q![!^%T!_!g%T!g!hAl!h#R%T#R#S!1q#S#U%T#U#V!3X#V#X%T#X#YAl#Y#b%T#b#c!2w#c#d!4m#d#l%T#l#m!5{#m#o%T#p~%Ty!1x_$SWjqO!O%T!O!P@r!P!Q%T!Q![!1q![!^%T!_!g%T!g!hAl!h#R%T#R#S!1q#S#X%T#X#YAl#Y#b%T#b#c!2w#c#o%T#p~%Ty!3OR$SWjqO!^%T!_#o%T#p~%Ty!3^W$SWO!Q%T!Q!R!3v!R!S!3v!S!^%T!_#R%T#R#S!3v#S#o%T#p~%Ty!3}Y$SWjqO!Q%T!Q!R!3v!R!S!3v!S!^%T!_#R%T#R#S!3v#S#b%T#b#c!2w#c#o%T#p~%Ty!4rV$SWO!Q%T!Q!Y!5X!Y!^%T!_#R%T#R#S!5X#S#o%T#p~%Ty!5`X$SWjqO!Q%T!Q!Y!5X!Y!^%T!_#R%T#R#S!5X#S#b%T#b#c!2w#c#o%T#p~%Ty!6QZ$SWO!Q%T!Q![!6s![!^%T!_!c%T!c!i!6s!i#R%T#R#S!6s#S#T%T#T#Z!6s#Z#o%T#p~%Ty!6z]$SWjqO!Q%T!Q![!6s![!^%T!_!c%T!c!i!6s!i#R%T#R#S!6s#S#T%T#T#Z!6s#Z#b%T#b#c!2w#c#o%T#p~%T%w!7|R!XV$SW#i%hO!^%T!_#o%T#p~%T!P!8^R^w$SWO!^%T!_#o%T#p~%T+c!8rR'_d!]%Y#t&s'|P!P!Q!8{!^!_!9Q!_!`!9_W!9QO$UW#v!9VP#[#v!_!`!9Y#v!9_O#k#v#v!9dO#]#v%w!9kT!w%o$SWO!^%T!_!`'v!`!a!9z!a#o%T#p~%T$P!:RR#S#w$SWO!^%T!_#o%T#p~%T%w!:gT'^!s#]#v$PS$SWO!^%T!_!`!:v!`!a!;W!a#o%T#p~%T$O!:}R#]#v$SWO!^%T!_#o%T#p~%T$O!;_T#[#v$SWO!^%T!_!`5T!`!a!;n!a#o%T#p~%T$O!;uS#[#v$SWO!^%T!_!`5T!`#o%T#p~%T%w!<YV'p%o$SWO!O%T!O!P!<o!P!^%T!_!a%T!a!b!=P!b#o%T#p~%T$`!<vRs$W$SWO!^%T!_#o%T#p~%T$O!=WS$SW#f#vO!^%T!_!`5T!`#o%T#p~%T&e!=kRu&]$SWO!^%T!_#o%T#p~%TZ!={RzR$SWO!^%T!_#o%T#p~%T$O!>]S#c#v$SWO!^%T!_!`5T!`#o%T#p~%T$P!>pR$SW'c#wO!^%T!_#o%T#p~%T&i!?U_$SW'fp'Y%k#xSOt%Ttu!>yu}%T}!O!@T!O!Q%T!Q![!>y![!^%T!_!c%T!c!}!>y!}#R%T#R#S!>y#S#T%T#T#o!>y#p$g%T$g~!>y[!@[_$SW#xSOt%Ttu!@Tu}%T}!O!@T!O!Q%T!Q![!@T![!^%T!_!c%T!c!}!@T!}#R%T#R#S!@T#S#T%T#T#o!@T#p$g%T$g~!@T~!A`O!P~%r!AgT'w%j$SWO!^%T!_!`5T!`#o%T#p#q!=P#q~%T$u!BPR!O$k$SW'eQO!^%T!_#o%T#p~%TX!BaR!gP$SWO!^%T!_#o%T#p~%T,T!Bwr$SW'V+{'fp'Y%k#vSOX%TXY%cYZ%TZ[%c[p%Tpq%cqt%Ttu2`u}%T}!O3j!O!Q%T!Q![2`![!^%T!_!c%T!c!}2`!}#R%T#R#S2`#S#T%T#T#o2`#p$f%T$f$g%c$g#BY2`#BY#BZ!Bj#BZ$IS2`$IS$I_!Bj$I_$JT2`$JT$JU!Bj$JU$KV2`$KV$KW!Bj$KW&FU2`&FU&FV!Bj&FV?HT2`?HT?HU!Bj?HU~2`,T!E`_$SW'W+{'fp'Y%k#vSOt%Ttu2`u}%T}!O3j!O!Q%T!Q![2`![!^%T!_!c%T!c!}2`!}#R%T#R#S2`#S#T%T#T#o2`#p$g%T$g~2`",
+   tokenizers: [noSemicolon, incdecToken, template, 0, 1, 2, 3, 4, 5, 6, 7, 8, insertSemicolon],
+   topRules: {"Script":[0,6]},
+-  dialects: {jsx: 11282, ts: 11284},
+-  dynamicPrecedences: {"145":1,"172":1},
+-  specialized: [{term: 284, get: (value, stack) => (tsExtends(value, stack) << 1)},{term: 284, get: value => spec_identifier[value] || -1},{term: 296, get: value => spec_word[value] || -1},{term: 59, get: value => spec_LessThan[value] || -1}],
+-  tokenPrec: 11305
++  dialects: {jsx: 11332, ts: 11334},
++  dynamicPrecedences: {"147":1,"174":1},
++  specialized: [{term: 286, get: (value, stack) => (tsExtends(value, stack) << 1)},{term: 286, get: value => spec_identifier[value] || -1},{term: 298, get: value => spec_word[value] || -1},{term: 59, get: value => spec_LessThan[value] || -1}],
++  tokenPrec: 11355
+ });
+ 
+ exports.parser = parser;
+diff --git a/node_modules/@lezer/javascript/dist/index.es.js b/node_modules/@lezer/javascript/dist/index.es.js
+index 94d1df0..489e965 100644
+--- a/node_modules/@lezer/javascript/dist/index.es.js
++++ b/node_modules/@lezer/javascript/dist/index.es.js
+@@ -2,16 +2,16 @@ import { ContextTracker, ExternalTokenizer, LRParser } from '@lezer/lr';
+ import { NodeProp } from '@lezer/common';
+ 
+ // This file was generated by lezer-generator. You probably shouldn't edit it.
+-const noSemi = 275,
++const noSemi = 277,
+   incdec = 1,
+   incdecPrefix = 2,
+-  templateContent = 276,
+-  templateDollarBrace = 277,
+-  templateEnd = 278,
+-  insertSemi = 279,
++  templateContent = 278,
++  templateDollarBrace = 279,
++  templateEnd = 280,
++  insertSemi = 281,
+   TSExtends = 3,
+-  spaces = 281,
+-  newline = 282,
++  spaces = 283,
++  newline = 284,
+   LineComment = 4,
+   BlockComment = 5,
+   Dialect_ts = 1;
+@@ -91,31 +91,31 @@ function tsExtends(value, stack) {
+ }
+ 
+ // This file was generated by lezer-generator. You probably shouldn't edit it.
+-const spec_identifier = {__proto__:null,export:16, as:21, from:25, default:30, async:35, function:36, this:46, true:54, false:54, void:60, typeof:64, null:78, super:80, new:114, await:131, yield:133, delete:134, class:144, extends:146, public:189, private:189, protected:189, readonly:191, instanceof:212, in:214, const:216, import:248, keyof:299, unique:303, infer:309, is:343, abstract:363, implements:365, type:367, let:370, var:372, interface:379, enum:383, namespace:389, module:391, declare:395, global:399, for:420, of:429, while:432, with:436, do:440, if:444, else:446, switch:450, case:456, try:462, catch:464, finally:466, return:470, throw:474, break:478, continue:482, debugger:486};
+-const spec_word = {__proto__:null,async:101, get:103, set:105, public:153, private:153, protected:153, static:155, abstract:157, override:159, readonly:165, new:347};
++const spec_identifier = {__proto__:null,export:16, as:21, from:25, default:30, async:35, function:36, this:46, true:54, false:54, void:60, typeof:64, null:78, super:80, new:114, await:131, yield:133, delete:134, class:144, extends:146, public:189, private:189, protected:189, readonly:191, instanceof:212, in:214, const:216, import:248, keyof:303, unique:307, infer:313, is:347, abstract:367, implements:369, type:371, let:374, var:376, interface:383, enum:387, namespace:393, module:395, declare:399, global:403, for:424, of:433, while:436, with:440, do:444, if:448, else:450, switch:454, case:460, try:466, catch:468, finally:470, return:474, throw:478, break:482, continue:486, debugger:490};
++const spec_word = {__proto__:null,async:101, get:103, set:105, public:153, private:153, protected:153, static:155, abstract:157, override:159, readonly:165, new:351};
+ const spec_LessThan = {__proto__:null,"<":121};
+ const parser = LRParser.deserialize({
+   version: 13,
+-  states: "$1WO`QYOOO'QQ!LdO'#CgO'XOSO'#DSO)dQYO'#DXO)tQYO'#DdO){QYO'#DnO-xQYO'#DtOOQO'#EX'#EXO.]QWO'#EWO.bQWO'#EWOOQ!LS'#Eb'#EbO0aQ!LdO'#IqO2wQ!LdO'#IrO3eQWO'#EvO3jQpO'#F]OOQ!LS'#FO'#FOO3rO!bO'#FOO4QQWO'#FdO5_QWO'#FcOOQ!LS'#Ir'#IrOOQ!LQ'#Iq'#IqOOQQ'#J['#J[O5dQWO'#HjO5iQ!LYO'#HkOOQQ'#Ic'#IcOOQQ'#Hl'#HlQ`QYOOO){QYO'#DfO5qQWO'#GWO5vQ#tO'#ClO6UQWO'#EVO6aQWO'#EcO6fQ#tO'#E}O7QQWO'#GWO7VQWO'#G[O7bQWO'#G[O7pQWO'#G_O7pQWO'#G`O7pQWO'#GbO5qQWO'#GeO8aQWO'#GhO9oQWO'#CcO:PQWO'#GuO:XQWO'#G{O:XQWO'#G}O`QYO'#HPO:XQWO'#HRO:XQWO'#HUO:^QWO'#H[O:cQ!LZO'#H`O){QYO'#HbO:nQ!LZO'#HdO:yQ!LZO'#HfO5iQ!LYO'#HhO){QYO'#IsOOOS'#Hn'#HnO;UOSO,59nOOQ!LS,59n,59nO=gQbO'#CgO=qQYO'#HoO>OQWO'#ItO?}QbO'#ItO'dQYO'#ItO@UQWO,59sO@lQ&jO'#D^OAeQWO'#EXOArQWO'#JPOA}QWO'#JOOBVQWO,5:uOB[QWO'#I}OBcQWO'#DuO5vQ#tO'#EVOBqQWO'#EVOB|Q`O'#E}OOQ!LS,5:O,5:OOCUQYO,5:OOESQ!LdO,5:YOEpQWO,5:`OFZQ!LYO'#I|O7VQWO'#I{OFbQWO'#I{OFjQWO,5:tOFoQWO'#I{OF}QYO,5:rOH}QWO'#ESOJXQWO,5:rOKhQWO'#DhOKoQYO'#DmOKyQ&jO,5:{O){QYO,5:{OOQQ'#En'#EnOOQQ'#Ep'#EpO){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}OOQQ'#Et'#EtOLRQYO,5;_OOQ!LS,5;d,5;dOOQ!LS,5;e,5;eONRQWO,5;eOOQ!LS,5;f,5;fO){QYO'#HyONWQ!LYO,5<PONrQWO,5:}O){QYO,5;bO! [QpO'#JTONyQpO'#JTO! cQpO'#JTO! tQpO,5;mOOOO,5;w,5;wO!!SQYO'#F_OOOO'#Hx'#HxO3rO!bO,5;jO!!ZQpO'#FaOOQ!LS,5;j,5;jO!!wQ,UO'#CqOOQ!LS'#Ct'#CtO!#[QWO'#CtO!#aOSO'#CxO!#}Q#tO,5;|O!$UQWO,5<OO!%bQWO'#FnO!%oQWO'#FoO!%tQWO'#FsO!&vQ&jO'#FwO!'iQ,UO'#IlOOQ!LS'#Il'#IlO!'sQWO'#IkO!(RQWO'#IjOOQ!LS'#Cr'#CrOOQ!LS'#Cy'#CyO!(ZQWO'#C{OJ^QWO'#FfOJ^QWO'#FhO!(`QWO'#FjO!(eQWO'#FkO!(jQWO'#FqOJ^QWO'#FvO!(oQWO'#EYO!)WQWO,5;}O`QYO,5>UOOQQ'#If'#IfOOQQ,5>V,5>VOOQQ-E;j-E;jO!+SQ!LdO,5:QOOQ!LQ'#Co'#CoO!+sQ#tO,5<rOOQO'#Ce'#CeO!,UQWO'#CpO!,^Q!LYO'#IgO5_QWO'#IgO:^QWO,59WO!,lQpO,59WO!,tQ#tO,59WO5vQ#tO,59WO!-PQWO,5:rO!-XQWO'#GtO!-dQWO'#J`O){QYO,5;gO!-lQ&jO,5;iO!-qQWO,5=_O!-vQWO,5=_O!-{QWO,5=_O5iQ!LYO,5=_O5qQWO,5<rO!.ZQWO'#EZO!.lQ&jO'#E[OOQ!LQ'#I}'#I}O!.}Q!LYO'#J]O5iQ!LYO,5<vO7pQWO,5<|OOQO'#Cq'#CqO!/YQpO,5<yO!/bQ#tO,5<zO!/mQWO,5<|O!/rQ`O,5=PO:^QWO'#GjO5qQWO'#GlO!/zQWO'#GlO5vQ#tO'#GoO!0PQWO'#GoOOQQ,5=S,5=SO!0UQWO'#GpO!0^QWO'#ClO!0cQWO,58}O!0mQWO,58}O!2oQYO,58}OOQQ,58},58}O!2|Q!LYO,58}O){QYO,58}O!3XQYO'#GwOOQQ'#Gx'#GxOOQQ'#Gy'#GyO`QYO,5=aO!3iQWO,5=aO){QYO'#DtO`QYO,5=gO`QYO,5=iO!3nQWO,5=kO`QYO,5=mO!3sQWO,5=pO!3xQYO,5=vOOQQ,5=z,5=zO){QYO,5=zO5iQ!LYO,5=|OOQQ,5>O,5>OO!7yQWO,5>OOOQQ,5>Q,5>QO!7yQWO,5>QOOQQ,5>S,5>SO!8OQ`O,5?_OOOS-E;l-E;lOOQ!LS1G/Y1G/YO!8TQbO,5>ZO){QYO,5>ZOOQO-E;m-E;mO!8_QWO,5?`O!8gQbO,5?`O!8nQWO,5?jOOQ!LS1G/_1G/_O!8vQpO'#DQOOQO'#Iv'#IvO){QYO'#IvO!9eQpO'#IvO!:SQpO'#D_O!:eQ&jO'#D_O!<pQYO'#D_O!<wQWO'#IuO!=PQWO,59xO!=UQWO'#E]O!=dQWO'#JQO!=lQWO,5:vO!>SQ&jO'#D_O){QYO,5?kO!>^QWO'#HtO!8nQWO,5?jOOQ!LQ1G0a1G0aO!?jQ&jO'#DxOOQ!LS,5:a,5:aO){QYO,5:aOH}QWO,5:aO!?qQWO,5:aO:^QWO,5:qO!,lQpO,5:qO!,tQ#tO,5:qO5vQ#tO,5:qOOQ!LS1G/j1G/jOOQ!LS1G/z1G/zOOQ!LQ'#ER'#ERO){QYO,5?hO!?|Q!LYO,5?hO!@_Q!LYO,5?hO!@fQWO,5?gO!@nQWO'#HvO!@fQWO,5?gOOQ!LQ1G0`1G0`O7VQWO,5?gOOQ!LS1G0^1G0^O!AYQ!LdO1G0^O!AyQ!LbO,5:nOOQ!LS'#Fm'#FmO!BgQ!LdO'#IlOF}QYO1G0^O!DfQ#tO'#IwO!DpQWO,5:SO!DuQbO'#IxO){QYO'#IxO!EPQWO,5:XOOQ!LS'#DQ'#DQOOQ!LS1G0g1G0gO!EUQWO1G0gO!GgQ!LdO1G0iO!GnQ!LdO1G0iO!JRQ!LdO1G0iO!JYQ!LdO1G0iO!LaQ!LdO1G0iO!LtQ!LdO1G0iO# eQ!LdO1G0iO# lQ!LdO1G0iO#$PQ!LdO1G0iO#$WQ!LdO1G0iO#%{Q!LdO1G0iO#(uQ7^O'#CgO#*pQ7^O1G0yO#,kQ7^O'#IrOOQ!LS1G1P1G1PO#-OQ!LdO,5>eOOQ!LQ-E;w-E;wO#-oQ!LdO1G0iOOQ!LS1G0i1G0iO#/qQ!LdO1G0|O#0bQpO,5;oO#0gQpO,5;pO#0lQpO'#FWO#1QQWO'#FVOOQO'#JU'#JUOOQO'#Hw'#HwO#1VQpO1G1XOOQ!LS1G1X1G1XOOOO1G1b1G1bO#1eQ7^O'#IqO#1oQWO,5;yOLRQYO,5;yOOOO-E;v-E;vOOQ!LS1G1U1G1UOOQ!LS,5;{,5;{O#1tQpO,5;{OOQ!LS,59`,59`OH}QWO'#InOOOS'#Hm'#HmO#1yOSO,59dOOQ!LS,59d,59dO){QYO1G1hO!(eQWO'#H{O#2UQWO,5<aOOQ!LS,5<^,5<^OOQO'#GR'#GROJ^QWO,5<lOOQO'#GT'#GTOJ^QWO,5<nOJ^QWO,5<pOOQO1G1j1G1jO#2aQ`O'#CoO#2tQ`O,5<YO#2{QWO'#JXO5qQWO'#JXO#3ZQWO,5<[OJ^QWO,5<ZO#3`Q`O'#FmO#3mQ`O'#JYO#3wQWO'#JYOH}QWO'#JYO#3|QWO,5<_OOQ!LQ'#Dc'#DcO#4RQWO'#FpO#4^QpO'#FxO!&qQ&jO'#FxO!&qQ&jO'#FzO#4oQWO'#F{O!(jQWO'#GOOOQO'#H}'#H}O#4tQ&jO,5<cOOQ!LS,5<c,5<cO#4{Q&jO'#FxO#5ZQ&jO'#FyO#5cQ&jO'#FyOOQ!LS,5<q,5<qOJ^QWO,5?VOJ^QWO,5?VO#5hQWO'#IOO#5sQWO,5?UOOQ!LS'#Cg'#CgO#6gQ#tO,59gOOQ!LS,59g,59gO#7YQ#tO,5<QO#7{Q#tO,5<SO#8VQWO,5<UOOQ!LS,5<V,5<VO#8[QWO,5<]O#8aQ#tO,5<bOF}QYO1G1iO#8qQWO1G1iOOQQ1G3p1G3pOOQ!LS1G/l1G/lONRQWO1G/lOOQQ1G2^1G2^OH}QWO1G2^O){QYO1G2^OH}QWO1G2^O#8vQWO1G2^O#9UQWO,59[O#:_QWO'#ESOOQ!LQ,5?R,5?RO#:iQ!LYO,5?ROOQQ1G.r1G.rO:^QWO1G.rO!,lQpO1G.rO!,tQ#tO1G.rO#:wQWO1G0^O#:|QWO'#CgO#;XQWO'#JaO#;aQWO,5=`O#;fQWO'#JaO#;kQWO'#JaO#;pQWO'#IWO#<OQWO,5?zO#<WQbO1G1ROOQ!LS1G1T1G1TO5qQWO1G2yO#<_QWO1G2yO#<dQWO1G2yO#<iQWO1G2yOOQQ1G2y1G2yO#<nQ#tO1G2^O7VQWO'#JOO7VQWO'#E]O7VQWO'#IQO#=PQ!LYO,5?wOOQQ1G2b1G2bO!/mQWO1G2hOH}QWO1G2eO#=[QWO1G2eOOQQ1G2f1G2fOH}QWO1G2fO#=aQWO1G2fO#=iQ&jO'#GdOOQQ1G2h1G2hO!&qQ&jO'#ISO!/rQ`O1G2kOOQQ1G2k1G2kOOQQ,5=U,5=UO#=qQ#tO,5=WO5qQWO,5=WO#4oQWO,5=ZO5_QWO,5=ZO!,lQpO,5=ZO!,tQ#tO,5=ZO5vQ#tO,5=ZO#>SQWO'#J_O#>_QWO,5=[OOQQ1G.i1G.iO#>dQ!LYO1G.iO#>oQWO1G.iO!(ZQWO1G.iO5iQ!LYO1G.iO#>tQbO,5?|O#?OQWO,5?|O#?ZQYO,5=cO#?bQWO,5=cO7VQWO,5?|OOQQ1G2{1G2{O`QYO1G2{OOQQ1G3R1G3ROOQQ1G3T1G3TO:XQWO1G3VO#?gQYO1G3XO#CbQYO'#HWOOQQ1G3[1G3[O:^QWO1G3bO#CoQWO1G3bO5iQ!LYO1G3fOOQQ1G3h1G3hOOQ!LQ'#Ft'#FtO5iQ!LYO1G3jO5iQ!LYO1G3lOOOS1G4y1G4yO#CwQ`O,5<PO#DPQbO1G3uO#DZQWO1G4zO#DcQWO1G5UO#DkQWO,5?bOLRQYO,5:wO7VQWO,5:wO:^QWO,59yOLRQYO,59yO!,lQpO,59yO#DpQ7^O,59yOOQO,5:w,5:wO#DzQ&jO'#HpO#EbQWO,5?aOOQ!LS1G/d1G/dO#EjQ&jO'#HuO#FOQWO,5?lOOQ!LQ1G0b1G0bO!:eQ&jO,59yO#FWQbO1G5VOOQO,5>`,5>`O7VQWO,5>`OOQO-E;r-E;rOOQ!LQ'#EO'#EOO#FbQ!LrO'#EPO!?bQ&jO'#DyOOQO'#Hs'#HsO#F|Q&jO,5:dOOQ!LS,5:d,5:dO#GTQ&jO'#DyO#GfQ&jO'#DyO#GmQ&jO'#EUO#GpQ&jO'#EPO#G}Q&jO'#EPO!?bQ&jO'#EPO#HbQWO1G/{O#HgQ`O1G/{OOQ!LS1G/{1G/{O){QYO1G/{OH}QWO1G/{OOQ!LS1G0]1G0]O:^QWO1G0]O!,lQpO1G0]O!,tQ#tO1G0]O#HnQ!LdO1G5SO){QYO1G5SO#IOQ!LYO1G5SO#IaQWO1G5RO7VQWO,5>bOOQO,5>b,5>bO#IiQWO,5>bOOQO-E;t-E;tO#IaQWO1G5RO#IwQ!LdO,59gO#KvQ!LdO,5<QO#MxQ!LdO,5<SO$ zQ!LdO,5<bOOQ!LS7+%x7+%xO$$SQ!LdO7+%xO$$sQWO'#HqO$$}QWO,5?cOOQ!LS1G/n1G/nO$%VQYO'#HrO$%dQWO,5?dO$%lQbO,5?dOOQ!LS1G/s1G/sOOQ!LS7+&R7+&RO$%vQ7^O,5:YO){QYO7+&eO$&QQ7^O,5:QOOQO1G1Z1G1ZOOQO1G1[1G1[O$&_QMhO,5;rOLRQYO,5;qOOQO-E;u-E;uOOQ!LS7+&s7+&sOOOO7+&|7+&|OOOO1G1e1G1eO$&jQWO1G1eOOQ!LS1G1g1G1gO$&oQ`O,5?YOOOS-E;k-E;kOOQ!LS1G/O1G/OO$&vQ!LdO7+'SOOQ!LS,5>g,5>gO$'gQWO,5>gOOQ!LS1G1{1G1{P$'lQWO'#H{POQ!LS-E;y-E;yO$(]Q#tO1G2WO$)OQ#tO1G2YO$)YQ#tO1G2[OOQ!LS1G1t1G1tO$)aQWO'#HzO$)oQWO,5?sO$)oQWO,5?sO$)wQWO,5?sO$*SQWO,5?sOOQO1G1v1G1vO$*bQ#tO1G1uO$*rQWO'#H|O$+SQWO,5?tOH}QWO,5?tO$+[Q`O,5?tOOQ!LS1G1y1G1yO5iQ!LYO,5<dO5iQ!LYO,5<eO$+fQWO,5<eO#4jQWO,5<eO!,lQpO,5<dO$+kQWO,5<fO5iQ!LYO,5<gO$+fQWO,5<jOOQO-E;{-E;{OOQ!LS1G1}1G1}O!&qQ&jO,5<dO$+sQWO,5<eO!&qQ&jO,5<fO!&qQ&jO,5<eO$,OQ#tO1G4qO$,YQ#tO1G4qOOQO,5>j,5>jOOQO-E;|-E;|O!-lQ&jO,59iO){QYO,59iO$,gQWO1G1pOJ^QWO1G1wO$,lQ!LdO7+'TOOQ!LS7+'T7+'TOF}QYO7+'TOOQ!LS7+%W7+%WO$-]Q`O'#JZO#HbQWO7+'xO$-gQWO7+'xO$-oQ`O7+'xOOQQ7+'x7+'xOH}QWO7+'xO){QYO7+'xOH}QWO7+'xOOQO1G.v1G.vO$-yQ!LbO'#CgO$.ZQ!LbO,5<hO$.xQWO,5<hOOQ!LQ1G4m1G4mOOQQ7+$^7+$^O:^QWO7+$^O!,lQpO7+$^OF}QYO7+%xO$.}QWO'#IVO$/]QWO,5?{OOQO1G2z1G2zO5qQWO,5?{O$/]QWO,5?{O$/eQWO,5?{OOQO,5>r,5>rOOQO-E<U-E<UOOQ!LS7+&m7+&mO$/jQWO7+(eO5iQ!LYO7+(eO5qQWO7+(eO$/oQWO7+(eO$/tQWO7+'xOOQ!LQ,5>l,5>lOOQ!LQ-E<O-E<OOOQQ7+(S7+(SO$0SQ!LbO7+(POH}QWO7+(PO$0^Q`O7+(QOOQQ7+(Q7+(QOH}QWO7+(QO$0eQWO'#J^O$0pQWO,5=OOOQO,5>n,5>nOOQO-E<Q-E<QOOQQ7+(V7+(VO$1jQ&jO'#GmOOQQ1G2r1G2rOH}QWO1G2rO){QYO1G2rOH}QWO1G2rO$1qQWO1G2rO$2PQ#tO1G2rO5iQ!LYO1G2uO#4oQWO1G2uO5_QWO1G2uO!,lQpO1G2uO!,tQ#tO1G2uO$2bQWO'#IUO$2mQWO,5?yO$2uQ&jO,5?yOOQ!LQ1G2v1G2vOOQQ7+$T7+$TO$2zQWO7+$TO5iQ!LYO7+$TO$3PQWO7+$TO){QYO1G5hO){QYO1G5iO$3UQYO1G2}O$3]QWO1G2}O$3bQYO1G2}O$3iQ!LYO1G5hOOQQ7+(g7+(gO5iQ!LYO7+(qO`QYO7+(sOOQQ'#Jd'#JdOOQQ'#IX'#IXO$3sQYO,5=rOOQQ,5=r,5=rO){QYO'#HXO$4QQWO'#HZOOQQ7+(|7+(|O$4VQYO7+(|O7VQWO7+(|OOQQ7+)Q7+)QOOQQ7+)U7+)UOOQQ7+)W7+)WOOQO1G4|1G4|O$8TQ7^O1G0cO$8_QWO1G0cOOQO1G/e1G/eO$8jQ7^O1G/eO:^QWO1G/eOLRQYO'#D_OOQO,5>[,5>[OOQO-E;n-E;nOOQO,5>a,5>aOOQO-E;s-E;sO!,lQpO1G/eOOQO1G3z1G3zO:^QWO,5:eOOQO,5:k,5:kO){QYO,5:kO$8tQ!LYO,5:kO$9PQ!LYO,5:kO!,lQpO,5:eOOQO-E;q-E;qOOQ!LS1G0O1G0OO!?bQ&jO,5:eO$9_Q&jO,5:eO$9pQ!LrO,5:kO$:[Q&jO,5:eO!?bQ&jO,5:kOOQO,5:p,5:pO$:cQ&jO,5:kO$:pQ!LYO,5:kOOQ!LS7+%g7+%gO#HbQWO7+%gO#HgQ`O7+%gOOQ!LS7+%w7+%wO:^QWO7+%wO!,lQpO7+%wO$;UQ!LdO7+*nO){QYO7+*nOOQO1G3|1G3|O7VQWO1G3|O$;fQWO7+*mO$;nQ!LdO1G2WO$=pQ!LdO1G2YO$?rQ!LdO1G1uO$AzQ#tO,5>]OOQO-E;o-E;oO$BUQbO,5>^O){QYO,5>^OOQO-E;p-E;pO$B`QWO1G5OO$BhQ7^O1G0^O$DoQ7^O1G0iO$DvQ7^O1G0iO$FwQ7^O1G0iO$GOQ7^O1G0iO$HsQ7^O1G0iO$IWQ7^O1G0iO$KeQ7^O1G0iO$KlQ7^O1G0iO$MmQ7^O1G0iO$MtQ7^O1G0iO% iQ7^O1G0iO% |Q!LdO<<JPO%!mQ7^O1G0iO%$]Q7^O'#IlO%&YQ7^O1G0|OLRQYO'#FYOOQO'#JV'#JVOOQO1G1^1G1^O%&gQWO1G1]O%&lQ7^O,5>eOOOO7+'P7+'POOOS1G4t1G4tOOQ!LS1G4R1G4ROJ^QWO7+'vO%&vQWO,5>fO5qQWO,5>fOOQO-E;x-E;xO%'UQWO1G5_O%'UQWO1G5_O%'^QWO1G5_O%'iQ`O,5>hO%'sQWO,5>hOH}QWO,5>hOOQO-E;z-E;zO%'xQ`O1G5`O%(SQWO1G5`OOQO1G2O1G2OOOQO1G2P1G2PO5iQ!LYO1G2PO$+fQWO1G2PO5iQ!LYO1G2OO%([QWO1G2QOH}QWO1G2QOOQO1G2R1G2RO5iQ!LYO1G2UO!,lQpO1G2OO#4jQWO1G2PO%(aQWO1G2QO%(iQWO1G2POJ^QWO7+*]OOQ!LS1G/T1G/TO%(tQWO1G/TOOQ!LS7+'[7+'[O%(yQ#tO7+'cO%)ZQ!LdO<<JoOOQ!LS<<Jo<<JoOH}QWO'#IPO%)zQWO,5?uOOQQ<<Kd<<KdOH}QWO<<KdO#HbQWO<<KdO%*SQWO<<KdO%*[Q`O<<KdOH}QWO1G2SOOQQ<<Gx<<GxO:^QWO<<GxO%*fQ!LdO<<IdOOQ!LS<<Id<<IdOOQO,5>q,5>qO%+VQWO,5>qO#;kQWO,5>qOOQO-E<T-E<TO%+[QWO1G5gO%+[QWO1G5gO5qQWO1G5gO%+dQWO<<LPOOQQ<<LP<<LPO%+iQWO<<LPO5iQ!LYO<<LPO){QYO<<KdOH}QWO<<KdOOQQ<<Kk<<KkO$0SQ!LbO<<KkOOQQ<<Kl<<KlO$0^Q`O<<KlO%+nQ&jO'#IRO%+yQWO,5?xOLRQYO,5?xOOQQ1G2j1G2jO#FbQ!LrO'#EPO!?bQ&jO'#GnOOQO'#IT'#ITO%,RQ&jO,5=XOOQQ,5=X,5=XO%,YQ&jO'#EPO%,eQ&jO'#EPO%,|Q&jO'#EPO%-WQ&jO'#GnO%-iQWO7+(^O%-nQWO7+(^O%-vQ`O7+(^OOQQ7+(^7+(^OH}QWO7+(^O){QYO7+(^OH}QWO7+(^O%.QQWO7+(^OOQQ7+(a7+(aO5iQ!LYO7+(aO#4oQWO7+(aO5_QWO7+(aO!,lQpO7+(aO%.`QWO,5>pOOQO-E<S-E<SOOQO'#Gq'#GqO%.kQWO1G5eO5iQ!LYO<<GoOOQQ<<Go<<GoO%.sQWO<<GoO%.xQWO7++SO%.}QWO7++TOOQQ7+(i7+(iO%/SQWO7+(iO%/XQYO7+(iO%/`QWO7+(iO){QYO7++SO){QYO7++TOOQQ<<L]<<L]OOQQ<<L_<<L_OOQQ-E<V-E<VOOQQ1G3^1G3^O%/eQWO,5=sOOQQ,5=u,5=uO:^QWO<<LhO%/jQWO<<LhOLRQYO7+%}OOQO7+%P7+%PO%/oQ7^O1G5VO:^QWO7+%POOQO1G0P1G0PO%/yQ!LdO1G0VOOQO1G0V1G0VO){QYO1G0VO%0TQ!LYO1G0VO:^QWO1G0PO!,lQpO1G0PO!?bQ&jO1G0PO%0`Q!LYO1G0VO%0nQ&jO1G0PO%1PQ!LYO1G0VO%1eQ!LrO1G0VO%1oQ&jO1G0PO!?bQ&jO1G0VOOQ!LS<<IR<<IROOQ!LS<<Ic<<IcO:^QWO<<IcO%1vQ!LdO<<NYOOQO7+)h7+)hO%2WQ!LdO7+'cO%4`QbO1G3xO%4jQ7^O7+%xO%4wQ7^O,59gO%6tQ7^O,5<QO%8qQ7^O,5<SO%:nQ7^O,5<bO%<^Q7^O7+'SO%<kQ7^O7+'TO%<xQWO,5;tOOQO7+&w7+&wO%<}Q#tO<<KbOOQO1G4Q1G4QO%=_QWO1G4QO%=jQWO1G4QO%=xQWO7+*yO%=xQWO7+*yOH}QWO1G4SO%>QQ`O1G4SO%>[QWO7+*zOOQO7+'k7+'kO5iQ!LYO7+'kOOQO7+'j7+'jO$+fQWO7+'lO%>dQ`O7+'lOOQO7+'p7+'pO5iQ!LYO7+'jO$+fQWO7+'kO%>kQWO7+'lOH}QWO7+'lO#4jQWO7+'kO%>pQ#tO<<MwOOQ!LS7+$o7+$oO%>zQ`O,5>kOOQO-E;}-E;}O#HbQWOANAOOOQQANAOANAOOH}QWOANAOO%?UQ!LbO7+'nOOQQAN=dAN=dO5qQWO1G4]OOQO1G4]1G4]O%?cQWO1G4]O%?hQWO7++RO%?hQWO7++RO5iQ!LYOANAkO%?pQWOANAkOOQQANAkANAkO%?uQWOANAOO%?}Q`OANAOOOQQANAVANAVOOQQANAWANAWO%@XQWO,5>mOOQO-E<P-E<PO%@dQ7^O1G5dO#4oQWO,5=YO5_QWO,5=YO!,lQpO,5=YOOQO-E<R-E<ROOQQ1G2s1G2sO$9pQ!LrO,5:kO!?bQ&jO,5=YO%@nQ&jO,5=YO%APQ&jO,5:kOOQQ<<Kx<<KxOH}QWO<<KxO%-iQWO<<KxO%AZQWO<<KxO%AcQ`O<<KxO){QYO<<KxOH}QWO<<KxOOQQ<<K{<<K{O5iQ!LYO<<K{O#4oQWO<<K{O5_QWO<<K{O%AmQ&jO1G4[O%ArQWO7++POOQQAN=ZAN=ZO5iQ!LYOAN=ZOOQQ<<Nn<<NnOOQQ<<No<<NoOOQQ<<LT<<LTO%AzQWO<<LTO%BPQYO<<LTO%BWQWO<<NnO%B]QWO<<NoOOQQ1G3_1G3_OOQQANBSANBSO:^QWOANBSO%BbQ7^O<<IiOOQO<<Hk<<HkOOQO7+%q7+%qO%/yQ!LdO7+%qO){QYO7+%qOOQO7+%k7+%kO:^QWO7+%kO!,lQpO7+%kO%BlQ!LYO7+%qO!?bQ&jO7+%kO%BwQ!LYO7+%qO%CVQ&jO7+%kO%ChQ!LYO7+%qOOQ!LSAN>}AN>}O%C|Q!LdO<<KbO%FUQ7^O<<JPO%FcQ7^O1G1uO%HRQ7^O1G2WO%JOQ7^O1G2YO%K{Q7^O<<JoO%LYQ7^O<<IdOOQO1G1`1G1`OOQO7+)l7+)lO%LgQWO7+)lO%LrQWO<<NeO%LzQ`O7+)nOOQO<<KV<<KVO5iQ!LYO<<KWO$+fQWO<<KWOOQO<<KU<<KUO5iQ!LYO<<KVO%MUQ`O<<KWO$+fQWO<<KVOOQQG26jG26jO#HbQWOG26jOOQO7+)w7+)wO5qQWO7+)wO%M]QWO<<NmOOQQG27VG27VO5iQ!LYOG27VOH}QWOG26jOLRQYO1G4XO%MeQWO7++OO5iQ!LYO1G2tO#4oQWO1G2tO5_QWO1G2tO!,lQpO1G2tO!?bQ&jO1G2tO%1eQ!LrO1G0VO%MmQ&jO1G2tO%-iQWOANAdOOQQANAdANAdOH}QWOANAdO%NOQWOANAdO%NWQ`OANAdOOQQANAgANAgO5iQ!LYOANAgO#4oQWOANAgOOQO'#Gr'#GrOOQO7+)v7+)vOOQQG22uG22uOOQQANAoANAoO%NbQWOANAoOOQQANDYANDYOOQQANDZANDZO%NgQYOG27nOOQO<<I]<<I]O%/yQ!LdO<<I]OOQO<<IV<<IVO:^QWO<<IVO){QYO<<I]O!,lQpO<<IVO&$eQ!LYO<<I]O!?bQ&jO<<IVO&$pQ!LYO<<I]O&%OQ7^O7+'cOOQO<<MW<<MWOOQOAN@rAN@rO5iQ!LYOAN@rOOQOAN@qAN@qO$+fQWOAN@rO5iQ!LYOAN@qOOQQLD,ULD,UOOQO<<Mc<<McOOQQLD,qLD,qO#HbQWOLD,UO&&nQ7^O7+)sOOQO7+(`7+(`O5iQ!LYO7+(`O#4oQWO7+(`O5_QWO7+(`O!,lQpO7+(`O!?bQ&jO7+(`OOQQG27OG27OO%-iQWOG27OOH}QWOG27OOOQQG27RG27RO5iQ!LYOG27ROOQQG27ZG27ZO:^QWOLD-YOOQOAN>wAN>wOOQOAN>qAN>qO%/yQ!LdOAN>wO:^QWOAN>qO){QYOAN>wO!,lQpOAN>qO&&xQ!LYOAN>wO&'TQ7^O<<KbOOQOG26^G26^O5iQ!LYOG26^OOQOG26]G26]OOQQ!$( p!$( pOOQO<<Kz<<KzO5iQ!LYO<<KzO#4oQWO<<KzO5_QWO<<KzO!,lQpO<<KzOOQQLD,jLD,jO%-iQWOLD,jOOQQLD,mLD,mOOQQ!$(!t!$(!tOOQOG24cG24cOOQOG24]G24]O%/yQ!LdOG24cO:^QWOG24]O){QYOG24cOOQOLD+xLD+xOOQOANAfANAfO5iQ!LYOANAfO#4oQWOANAfO5_QWOANAfOOQQ!$(!U!$(!UOOQOLD)}LD)}OOQOLD)wLD)wO%/yQ!LdOLD)}OOQOG27QG27QO5iQ!LYOG27QO#4oQWOG27QOOQO!$'Mi!$'MiOOQOLD,lLD,lO5iQ!LYOLD,lOOQO!$(!W!$(!WOLRQYO'#DnO&(sQbO'#IqOLRQYO'#DfO&(zQ!LdO'#CgO&)eQbO'#CgO&)uQYO,5:rOLRQYO,5:}OLRQYO,5:}OLRQYO,5:}OLRQYO,5:}OLRQYO,5:}OLRQYO,5:}OLRQYO,5:}OLRQYO,5:}OLRQYO,5:}OLRQYO,5:}OLRQYO,5:}OLRQYO'#HyO&+uQWO,5<PO&-XQWO,5:}OLRQYO,5;bO!(ZQWO'#C{O!(ZQWO'#C{OH}QWO'#FfO&+}QWO'#FfOH}QWO'#FhO&+}QWO'#FhOH}QWO'#FvO&+}QWO'#FvOLRQYO,5?kO&)uQYO1G0^O&-`Q7^O'#CgOLRQYO1G1hOH}QWO,5<lO&+}QWO,5<lOH}QWO,5<nO&+}QWO,5<nOH}QWO,5<ZO&+}QWO,5<ZO&)uQYO1G1iOLRQYO7+&eOH}QWO1G1wO&+}QWO1G1wO&)uQYO7+'TO&)uQYO7+%xOH}QWO7+'vO&+}QWO7+'vO&-jQWO'#EWO&-oQWO'#EWO&-wQWO'#EvO&-|QWO'#EcO&.RQWO'#JPO&.^QWO'#I}O&.iQWO,5:rO&.nQ#tO,5;|O&.uQWO'#FoO&.zQWO'#FoO&/PQWO,5;}O&/XQWO,5:rO&/aQ7^O1G0yO&/hQWO,5<]O&/mQWO,5<]O&/rQWO1G1iO&/wQWO1G0^O&/|Q#tO1G2[O&0TQ#tO1G2[O4QQWO'#FdO5_QWO'#FcOBqQWO'#EVOLRQYO,5;_O!(jQWO'#FqO!(jQWO'#FqOJ^QWO,5<pOJ^QWO,5<p",
+-  stateData: "&1Q~O'TOS'UOSSOSTOS~OPTOQTOWyO]cO^hOanObmOgcOiTOjcOkcOnTOpTOuROwcOxcOycO!PSO!ZkO!`UO!cTO!dTO!eTO!fTO!gTO!jlO#`sO#ppO#t^O${qO$}tO%PrO%QrO%TuO%VvO%YwO%ZwO%]xO%jzO%p{O%r|O%t}O%v!OO%y!PO&P!QO&T!RO&V!SO&X!TO&Z!UO&]!VO'WPO'aQO'mYO'zaO~OPZXYZX^ZXiZXrZXsZXuZX}ZX!]ZX!^ZX!`ZX!fZX!wZX#ScX#WZX#XZX#YZX#ZZX#[ZX#]ZX#^ZX#_ZX#aZX#cZX#eZX#fZX#kZX'RZX'aZX'nZX'uZX'vZX~O!X$hX~P$zO'O!XO'P!WO'Q!ZO~OPTOQTO]cOa!jOb!iOgcOiTOjcOkcOnTOpTOuROwcOxcOycO!P!bO!ZkO!`UO!cTO!dTO!eTO!fTO!gTO!j!hO#p!kO#t^O'W![O'aQO'mYO'zaO~O|!`O}!]Oz'hPz'rP~P'dO!O!lO~P`OPTOQTO]cOa!jOb!iOgcOiTOjcOkcOnTOpTOuROwcOxcOycO!P!bO!ZkO!`UO!cTO!dTO!eTO!fTO!gTO!j!hO#p!kO#t^O'W9VO'aQO'mYO'zaO~OPTOQTO]cOa!jOb!iOgcOiTOjcOkcOnTOpTOuROwcOxcOycO!P!bO!ZkO!`UO!cTO!dTO!eTO!fTO!gTO!j!hO#p!kO#t^O'aQO'mYO'zaO~O|!qO#Q!tO#R!qO'W9WO!_'oP~P+{O#S!uO~O!X!vO#S!uO~OP#]OY#cOi#QOr!zOs!zOu!{O}#aO!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO#c#VO#e#XO#f#YO'aQO'n#ZO'u!|O'v!}O~O^'eX'R'eX!_'eXz'eX!P'eX$|'eX!X'eX~P.jO!w#dO#k#dOP'fXY'fX^'fXi'fXr'fXs'fXu'fX}'fX!]'fX!^'fX!`'fX!f'fX#W'fX#X'fX#Y'fX#Z'fX#['fX#]'fX#^'fX#a'fX#c'fX#e'fX#f'fX'a'fX'n'fX'u'fX'v'fX~O#_'fX'R'fXz'fX!_'fX'c'fX!P'fX$|'fX!X'fX~P0zO!w#dO~O#v#eO#}#iO~O!P#jO#t^O$Q#kO$S#mO~O]#pOg#}Oi#qOj#pOk#pOn$OOp$POu#wO!P#xO!Z$UO!`#uO#R$VO#p$SO$Z$QO$]$RO$`$TO'W#oO'a#rO'['^P~O!`$WO~O!X$YO~O^$ZO'R$ZO~O'W$_O~O!`$WO'W$_O'X$aO']$bO~Ob$hO!`$WO'W$_O~O#_#SO~O]$qOr$mO!P$jO!`$lO$}$pO'W$_O'X$aO[(SP~O!j$rO~Ou$sO!P$tO'W$_O~Ou$sO!P$tO%V$xO'W$_O~O'W$yO~O#`sO$}tO%PrO%QrO%TuO%VvO%YwO%ZwO~Oa%SOb%RO!j%PO${%QO%_%OO~P7uOa%VObmO!P%UO!jlO#`sO${qO%PrO%QrO%TuO%VvO%YwO%ZwO%]xO~O_%YO!w%]O$}%WO'X$aO~P8tO!`%^O!c%bO~O!`%cO~O!PSO~O^$ZO&}%kO'R$ZO~O^$ZO&}%nO'R$ZO~O^$ZO&}%pO'R$ZO~O'O!XO'P!WO'Q%tO~OPZXYZXiZXrZXsZXuZX}ZX}cX!]ZX!^ZX!`ZX!fZX!wZX!wcX#ScX#WZX#XZX#YZX#ZZX#[ZX#]ZX#^ZX#_ZX#aZX#cZX#eZX#fZX#kZX'aZX'nZX'uZX'vZX~OzZXzcX~P;aO|%vOz&cX}&cX~P){O}!]Oz'hX~OP#]OY#cOi#QOr!zOs!zOu!{O}!]O!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO#c#VO#e#XO#f#YO'aQO'n#ZO'u!|O'v!}O~Oz'hX~P>WOz%{O~Ou&OO!S&YO!T&RO!U&RO'X$aO~O]&POj&PO|&SO'd%|O!O'iP!O'tP~P@ZOz'qX}'qX!X'qX!_'qX'n'qX~O!w'qX#S!{X!O'qX~PASO!w&ZOz'sX}'sX~O}&[Oz'rX~Oz&^O~O!w#dO~PASOR&bO!P&_O!k&aO'W$_O~Ob&gO!`$WO'W$_O~Or$mO!`$lO~O!O&hO~P`Or!zOs!zOu!{O!^!xO!`!yO'aQOP!baY!bai!ba}!ba!]!ba!f!ba#W!ba#X!ba#Y!ba#Z!ba#[!ba#]!ba#^!ba#_!ba#a!ba#c!ba#e!ba#f!ba'n!ba'u!ba'v!ba~O^!ba'R!baz!ba!_!ba'c!ba!P!ba$|!ba!X!ba~PC]O!_&iO~O!X!vO!w&kO'n&jO}'pX^'pX'R'pX~O!_'pX~PEuO}&oO!_'oX~O!_&qO~Ou$sO!P$tO#R&rO'W$_O~OPTOQTO]cOa!jOb!iOgcOiTOjcOkcOnTOpTOuROwcOxcOycO!PSO!ZkO!`UO!cTO!dTO!eTO!fTO!gTO!j!hO#p!kO#t^O'W9VO'aQO'mYO'zaO~O]#pOg#}Oi#qOj#pOk#pOn$OOp9iOu#wO!P#xO!Z:lO!`#uO#R9oO#p$SO$Z9kO$]9mO$`$TO'W&vO'a#rO~O#S&xO~O]#pOg#}Oi#qOj#pOk#pOn$OOp$POu#wO!P#xO!Z$UO!`#uO#R$VO#p$SO$Z$QO$]$RO$`$TO'W&vO'a#rO~O'['kP~PJ^O|&|O!_'lP~P){O'd'OO'mYO~OP9SOQ9SO]cOa:jOb!iOgcOi9SOjcOkcOn9SOp9SOuROwcOxcOycO!P!bO!Z9UO!`UO!c9SO!d9SO!e9SO!f9SO!g9SO!j!hO#p!kO#t^O'W'^O'aQO'mYO'z:hO~O!`!yO~O}#aO^$Xa'R$Xa!_$Xaz$Xa!P$Xa$|$Xa!X$Xa~O#`'eO~PH}O!X'gO!P'wX#s'wX#v'wX#}'wX~Or'hO~PNyOr'hO!P'wX#s'wX#v'wX#}'wX~O!P'jO#s'nO#v'iO#}'oO~O|'rO~PLRO#v#eO#}'uO~Or$aXu$aX!^$aX'n$aX'u$aX'v$aX~OReX}eX!weX'[eX'[$aX~P!!cOj'wO~O'O'yO'P'xO'Q'{O~Or'}Ou(OO'n#ZO'u(QO'v(SO~O'['|O~P!#lO'[(VO~O]#pOg#}Oi#qOj#pOk#pOn$OOp9iOu#wO!P#xO!Z:lO!`#uO#R9oO#p$SO$Z9kO$]9mO$`$TO'a#rO~O|(ZO'W(WO!_'{P~P!$ZO#S(]O~O|(aO'W(^Oz'|P~P!$ZO^(jOi(oOu(gO!S(mO!T(fO!U(fO!`(dO!t(nO$s(iO'X$aO'd(cO~O!O(lO~P!&RO!^!xOr'`Xu'`X'n'`X'u'`X'v'`X}'`X!w'`X~O'['`X#i'`X~P!&}OR(rO!w(qO}'_X'['_X~O}(sO'['^X~O'W(uO~O!`(zO~O'W&vO~O!`(dO~Ou$sO|!qO!P$tO#Q!tO#R!qO'W$_O!_'oP~O!X!vO#S)OO~OP#]OY#cOi#QOr!zOs!zOu!{O!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO#c#VO#e#XO#f#YO'aQO'n#ZO'u!|O'v!}O~O^!Ya}!Ya'R!Yaz!Ya!_!Ya'c!Ya!P!Ya$|!Ya!X!Ya~P!)`OR)WO!P&_O!k)VO$|)UO']$bO~O'W$yO'['^P~O!X)ZO!P'ZX^'ZX'R'ZX~O!`$WO']$bO~O!`$WO'W$_O']$bO~O!X!vO#S&xO~O$})gO'W)cO!O(TP~O})hO[(SX~O'd'OO~OY)lO~O[)mO~O!P$jO'W$_O'X$aO[(SP~Ou$sO|)rO!P$tO'W$_Oz'rP~O]&VOj&VO|)sO'd'OO!O'tP~O})tO^(PX'R(PX~O!w)xO']$bO~OR){O!P#xO']$bO~O!P)}O~Or*PO!PSO~O!j*UO~Ob*ZO~O'W(uO!O(RP~Ob$hO~O$}tO'W$yO~P8tOY*aO[*`O~OPTOQTO]cOanObmOgcOiTOjcOkcOnTOpTOuROwcOxcOycO!ZkO!`UO!cTO!dTO!eTO!fTO!gTO!jlO#t^O${qO'aQO'mYO'zaO~O!P!bO#p!kO'W9VO~P!0uO[*`O^$ZO'R$ZO~O^*eO#`*gO%P*gO%Q*gO~P){O!`%^O~O%p*lO~O!P*nO~O&Q*qO&R*pOP&OaQ&OaW&Oa]&Oa^&Oaa&Oab&Oag&Oai&Oaj&Oak&Oan&Oap&Oau&Oaw&Oax&Oay&Oa!P&Oa!Z&Oa!`&Oa!c&Oa!d&Oa!e&Oa!f&Oa!g&Oa!j&Oa#`&Oa#p&Oa#t&Oa${&Oa$}&Oa%P&Oa%Q&Oa%T&Oa%V&Oa%Y&Oa%Z&Oa%]&Oa%j&Oa%p&Oa%r&Oa%t&Oa%v&Oa%y&Oa&P&Oa&T&Oa&V&Oa&X&Oa&Z&Oa&]&Oa&|&Oa'W&Oa'a&Oa'm&Oa'z&Oa!O&Oa%w&Oa_&Oa%|&Oa~O'W*tO~O'c*wO~Oz&ca}&ca~P!)`O}!]Oz'ha~Oz'ha~P>WO}&[Oz'ra~O}tX}!VX!OtX!O!VX!XtX!X!VX!`!VX!wtX']!VX~O!X+OO!w*}O}#PX}'jX!O#PX!O'jX!X'jX!`'jX']'jX~O!X+QO!`$WO']$bO}!RX!O!RX~O]%}Oj%}Ou&OO'd(cO~OP9SOQ9SO]cOa:jOb!iOgcOi9SOjcOkcOn9SOp9SOuROwcOxcOycO!P!bO!Z9UO!`UO!c9SO!d9SO!e9SO!f9SO!g9SO!j!hO#p!kO#t^O'aQO'mYO'z:hO~O'W9sO~P!:sO}+UO!O'iX~O!O+WO~O!X+OO!w*}O}#PX!O#PX~O}+XO!O'tX~O!O+ZO~O]%}Oj%}Ou&OO'X$aO'd(cO~O!T+[O!U+[O~P!=qOu$sO|+_O!P$tO'W$_Oz&hX}&hX~O^+dO!S+gO!T+cO!U+cO!n+kO!o+iO!p+jO!q+hO!t+lO'X$aO'd(cO'm+aO~O!O+fO~P!>rOR+qO!P&_O!k+pO~O!w+wO}'pa!_'pa^'pa'R'pa~O!X!vO~P!?|O}&oO!_'oa~Ou$sO|+zO!P$tO#Q+|O#R+zO'W$_O}&jX!_&jX~O^!zi}!zi'R!ziz!zi!_!zi'c!zi!P!zi$|!zi!X!zi~P!)`O#S!va}!va!_!va!w!va!P!va^!va'R!vaz!va~P!#lO#S'`XP'`XY'`X^'`Xi'`Xs'`X!]'`X!`'`X!f'`X#W'`X#X'`X#Y'`X#Z'`X#['`X#]'`X#^'`X#_'`X#a'`X#c'`X#e'`X#f'`X'R'`X'a'`X!_'`Xz'`X!P'`X'c'`X$|'`X!X'`X~P!&}O},VO'['kX~P!#lO'[,XO~O},YO!_'lX~P!)`O!_,]O~Oz,^O~OP#]Or!zOs!zOu!{O!^!xO!`!yO!f#]O'aQOY#Vi^#Vii#Vi}#Vi!]#Vi#X#Vi#Y#Vi#Z#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi'R#Vi'n#Vi'u#Vi'v#Viz#Vi!_#Vi'c#Vi!P#Vi$|#Vi!X#Vi~O#W#Vi~P!EZO#W#OO~P!EZOP#]Or!zOs!zOu!{O!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO'aQOY#Vi^#Vi}#Vi!]#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi'R#Vi'n#Vi'u#Vi'v#Viz#Vi!_#Vi'c#Vi!P#Vi$|#Vi!X#Vi~Oi#Vi~P!GuOi#QO~P!GuOP#]Oi#QOr!zOs!zOu!{O!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO'aQO^#Vi}#Vi#a#Vi#c#Vi#e#Vi#f#Vi'R#Vi'n#Vi'u#Vi'v#Viz#Vi!_#Vi'c#Vi!P#Vi$|#Vi!X#Vi~OY#Vi!]#Vi#]#Vi#^#Vi#_#Vi~P!JaOY#cO!]#SO#]#SO#^#SO#_#SO~P!JaOP#]OY#cOi#QOr!zOs!zOu!{O!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO'aQO^#Vi}#Vi#c#Vi#e#Vi#f#Vi'R#Vi'n#Vi'v#Viz#Vi!_#Vi'c#Vi!P#Vi$|#Vi!X#Vi~O'u#Vi~P!MXO'u!|O~P!MXOP#]OY#cOi#QOr!zOs!zOu!{O!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO#c#VO'aQO'u!|O^#Vi}#Vi#e#Vi#f#Vi'R#Vi'n#Viz#Vi!_#Vi'c#Vi!P#Vi$|#Vi!X#Vi~O'v#Vi~P# sO'v!}O~P# sOP#]OY#cOi#QOr!zOs!zOu!{O!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO#c#VO#e#XO'aQO'u!|O'v!}O~O^#Vi}#Vi#f#Vi'R#Vi'n#Viz#Vi!_#Vi'c#Vi!P#Vi$|#Vi!X#Vi~P#$_OPZXYZXiZXrZXsZXuZX!]ZX!^ZX!`ZX!fZX!wZX#ScX#WZX#XZX#YZX#ZZX#[ZX#]ZX#^ZX#_ZX#aZX#cZX#eZX#fZX#kZX'aZX'nZX'uZX'vZX}ZX!OZX~O#iZX~P#&rOP#]OY9gOi9[Or!zOs!zOu!{O!]9^O!^!xO!`!yO!f#]O#W9YO#X9ZO#Y9ZO#Z9ZO#[9]O#]9^O#^9^O#_9^O#a9_O#c9aO#e9cO#f9dO'aQO'n#ZO'u!|O'v!}O~O#i,`O~P#(|OP'fXY'fXi'fXr'fXs'fXu'fX!]'fX!^'fX!`'fX!f'fX#W'fX#X'fX#Y'fX#Z'fX#['fX#]'fX#^'fX#a'fX#c'fX#e'fX#f'fX'a'fX'n'fX'u'fX'v'fX}'fX~O!w9hO#k9hO#_'fX#i'fX!O'fX~P#*wO^&ma}&ma'R&ma!_&ma'c&maz&ma!P&ma$|&ma!X&ma~P!)`OP#ViY#Vi^#Vii#Vis#Vi}#Vi!]#Vi!^#Vi!`#Vi!f#Vi#W#Vi#X#Vi#Y#Vi#Z#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi'R#Vi'a#Viz#Vi!_#Vi'c#Vi!P#Vi$|#Vi!X#Vi~P!#lO^#ji}#ji'R#jiz#ji!_#ji'c#ji!P#ji$|#ji!X#ji~P!)`O#v,bO~O#v,cO~O!X'gO!w,dO!P#zX#s#zX#v#zX#}#zX~O|,eO~O!P'jO#s,gO#v'iO#},hO~O}9eO!O'eX~P#(|O!O,iO~O#},kO~O'O'yO'P'xO'Q,nO~O],qOj,qOz,rO~O}cX!XcX!_cX!_$aX'ncX~P!!cO!_,xO~P!#lO},yO!X!vO'n&jO!_'{X~O!_-OO~Oz$aX}$aX!X$hX~P!!cO}-QOz'|X~P!#lO!X-SO~Oz-UO~O|(ZO'W$_O!_'{P~Oi-YO!X!vO!`$WO']$bO'n&jO~O!X)ZO~O!O-`O~P!&RO!T-aO!U-aO'X$aO'd(cO~Ou-cO'd(cO~O!t-dO~O'W$yO}&rX'[&rX~O}(sO'['^a~Or-iOs-iOu-jO'noa'uoa'voa}oa!woa~O'[oa#ioa~P#5{Or'}Ou(OO'n$Ya'u$Ya'v$Ya}$Ya!w$Ya~O'[$Ya#i$Ya~P#6qOr'}Ou(OO'n$[a'u$[a'v$[a}$[a!w$[a~O'[$[a#i$[a~P#7dO]-kO~O#S-lO~O'[$ja}$ja#i$ja!w$ja~P!#lO#S-oO~OR-xO!P&_O!k-wO$|-vO~O'[-yO~O]#pOi#qOj#pOk#pOn$OOp9iOu#wO!P#xO!Z:lO!`#uO#R9oO#p$SO$Z9kO$]9mO$`$TO'a#rO~Og-{O'W-zO~P#9ZO!X)ZO!P'Za^'Za'R'Za~O#S.RO~OYZX}cX!OcX~O}.SO!O(TX~O!O.UO~OY.VO~O'W)cO~O!P$jO'W$_O[&zX}&zX~O})hO[(Sa~O!_.[O~P!)`O].^O~OY._O~O[.`O~OR-xO!P&_O!k-wO$|-vO']$bO~O})tO^(Pa'R(Pa~O!w.fO~OR.iO!P#xO~O'd'OO!O(QP~OR.sO!P.oO!k.rO$|.qO']$bO~OY.}O}.{O!O(RX~O!O/OO~O[/QO^$ZO'R$ZO~O]/RO~O#_/TO%n/UO~P0zO!w#dO#_/TO%n/UO~O^/VO~P){O^/XO~O%w/]OP%uiQ%uiW%ui]%ui^%uia%uib%uig%uii%uij%uik%uin%uip%uiu%uiw%uix%uiy%ui!P%ui!Z%ui!`%ui!c%ui!d%ui!e%ui!f%ui!g%ui!j%ui#`%ui#p%ui#t%ui${%ui$}%ui%P%ui%Q%ui%T%ui%V%ui%Y%ui%Z%ui%]%ui%j%ui%p%ui%r%ui%t%ui%v%ui%y%ui&P%ui&T%ui&V%ui&X%ui&Z%ui&]%ui&|%ui'W%ui'a%ui'm%ui'z%ui!O%ui_%ui%|%ui~O_/cO!O/aO%|/bO~P`O!PSO!`/fO~O}#aO'c$Xa~Oz&ci}&ci~P!)`O}!]Oz'hi~O}&[Oz'ri~Oz/jO~O}!Ra!O!Ra~P#(|O]%}Oj%}O|/pO'd(cO}&dX!O&dX~P@ZO}+UO!O'ia~O]&VOj&VO|)sO'd'OO}&iX!O&iX~O}+XO!O'ta~Oz'si}'si~P!)`O^$ZO!X!vO!`$WO!f/{O!w/yO'R$ZO']$bO'n&jO~O!O0OO~P!>rO!T0PO!U0PO'X$aO'd(cO'm+aO~O!S0QO~P#GTO!PSO!S0QO!q0SO!t0TO~P#GTO!S0QO!o0VO!p0VO!q0SO!t0TO~P#GTO!P&_O~O!P&_O~P!#lO}'pi!_'pi^'pi'R'pi~P!)`O!w0`O}'pi!_'pi^'pi'R'pi~O}&oO!_'oi~Ou$sO!P$tO#R0bO'W$_O~O#SoaPoaYoa^oaioa!]oa!^oa!`oa!foa#Woa#Xoa#Yoa#Zoa#[oa#]oa#^oa#_oa#aoa#coa#eoa#foa'Roa'aoa!_oazoa!Poa'coa$|oa!Xoa~P#5{O#S$YaP$YaY$Ya^$Yai$Yas$Ya!]$Ya!^$Ya!`$Ya!f$Ya#W$Ya#X$Ya#Y$Ya#Z$Ya#[$Ya#]$Ya#^$Ya#_$Ya#a$Ya#c$Ya#e$Ya#f$Ya'R$Ya'a$Ya!_$Yaz$Ya!P$Ya'c$Ya$|$Ya!X$Ya~P#6qO#S$[aP$[aY$[a^$[ai$[as$[a!]$[a!^$[a!`$[a!f$[a#W$[a#X$[a#Y$[a#Z$[a#[$[a#]$[a#^$[a#_$[a#a$[a#c$[a#e$[a#f$[a'R$[a'a$[a!_$[az$[a!P$[a'c$[a$|$[a!X$[a~P#7dO#S$jaP$jaY$ja^$jai$jas$ja}$ja!]$ja!^$ja!`$ja!f$ja#W$ja#X$ja#Y$ja#Z$ja#[$ja#]$ja#^$ja#_$ja#a$ja#c$ja#e$ja#f$ja'R$ja'a$ja!_$jaz$ja!P$ja!w$ja'c$ja$|$ja!X$ja~P!#lO^!zq}!zq'R!zqz!zq!_!zq'c!zq!P!zq$|!zq!X!zq~P!)`O}&eX'[&eX~PJ^O},VO'['ka~O|0jO}&fX!_&fX~P){O},YO!_'la~O},YO!_'la~P!)`O#i!ba!O!ba~PC]O#i!Ya}!Ya!O!Ya~P#(|O!P0}O#t^O#{1OO~O!O1SO~O'c1TO~P!#lO^$Uq}$Uq'R$Uqz$Uq!_$Uq'c$Uq!P$Uq$|$Uq!X$Uq~P!)`Oz1UO~O],qOj,qO~Or'}Ou(OO'v(SO'n$ti'u$ti}$ti!w$ti~O'[$ti#i$ti~P$'tOr'}Ou(OO'n$vi'u$vi'v$vi}$vi!w$vi~O'[$vi#i$vi~P$(gO#i1VO~P!#lO|1XO'W$_O}&nX!_&nX~O},yO!_'{a~O},yO!X!vO!_'{a~O},yO!X!vO'n&jO!_'{a~O'[$ci}$ci#i$ci!w$ci~P!#lO|1`O'W(^Oz&pX}&pX~P!$ZO}-QOz'|a~O}-QOz'|a~P!#lO!X!vO~O!X!vO#_1jO~Oi1nO!X!vO'n&jO~O}'_i'['_i~P!#lO!w1qO}'_i'['_i~P!#lO!_1tO~O^$Vq}$Vq'R$Vqz$Vq!_$Vq'c$Vq!P$Vq$|$Vq!X$Vq~P!)`O}1xO!P'}X~P!#lO!P&_O$|1{O~O!P&_O$|1{O~P!#lO!P$aX$qZX^$aX'R$aX~P!!cO$q2POrfXufX!PfX'nfX'ufX'vfX^fX'RfX~O$q2PO~O$}2WO'W)cO}&yX!O&yX~O}.SO!O(Ta~OY2[O~O[2]O~O]2`O~OR2bO!P&_O!k2aO$|1{O~O^$ZO'R$ZO~P!#lO!P#xO~P!#lO}2gO!w2iO!O(QX~O!O2jO~Ou(gO!S2sO!T2lO!U2lO!n2rO!o2qO!p2qO!t2pO'X$aO'd(cO'm+aO~O!O2oO~P$0uOR2zO!P.oO!k2yO$|2xO~OR2zO!P.oO!k2yO$|2xO']$bO~O'W(uO}&xX!O&xX~O}.{O!O(Ra~O'd3TO~O]3VO~O[3XO~O!_3[O~P){O^3^O~O^3^O~P){O#_3`O%n3aO~PEuO_/cO!O3eO%|/bO~P`O!X3gO~O&R3hOP&OqQ&OqW&Oq]&Oq^&Oqa&Oqb&Oqg&Oqi&Oqj&Oqk&Oqn&Oqp&Oqu&Oqw&Oqx&Oqy&Oq!P&Oq!Z&Oq!`&Oq!c&Oq!d&Oq!e&Oq!f&Oq!g&Oq!j&Oq#`&Oq#p&Oq#t&Oq${&Oq$}&Oq%P&Oq%Q&Oq%T&Oq%V&Oq%Y&Oq%Z&Oq%]&Oq%j&Oq%p&Oq%r&Oq%t&Oq%v&Oq%y&Oq&P&Oq&T&Oq&V&Oq&X&Oq&Z&Oq&]&Oq&|&Oq'W&Oq'a&Oq'm&Oq'z&Oq!O&Oq%w&Oq_&Oq%|&Oq~O}#Pi!O#Pi~P#(|O!w3jO}#Pi!O#Pi~O}!Ri!O!Ri~P#(|O^$ZO!w3qO'R$ZO~O^$ZO!X!vO!w3qO'R$ZO~O!T3uO!U3uO'X$aO'd(cO'm+aO~O^$ZO!X!vO!`$WO!f3vO!w3qO'R$ZO']$bO'n&jO~O!S3wO~P$9_O!S3wO!q3zO!t3{O~P$9_O^$ZO!X!vO!f3vO!w3qO'R$ZO'n&jO~O}'pq!_'pq^'pq'R'pq~P!)`O}&oO!_'oq~O#S$tiP$tiY$ti^$tii$tis$ti!]$ti!^$ti!`$ti!f$ti#W$ti#X$ti#Y$ti#Z$ti#[$ti#]$ti#^$ti#_$ti#a$ti#c$ti#e$ti#f$ti'R$ti'a$ti!_$tiz$ti!P$ti'c$ti$|$ti!X$ti~P$'tO#S$viP$viY$vi^$vii$vis$vi!]$vi!^$vi!`$vi!f$vi#W$vi#X$vi#Y$vi#Z$vi#[$vi#]$vi#^$vi#_$vi#a$vi#c$vi#e$vi#f$vi'R$vi'a$vi!_$viz$vi!P$vi'c$vi$|$vi!X$vi~P$(gO#S$ciP$ciY$ci^$cii$cis$ci}$ci!]$ci!^$ci!`$ci!f$ci#W$ci#X$ci#Y$ci#Z$ci#[$ci#]$ci#^$ci#_$ci#a$ci#c$ci#e$ci#f$ci'R$ci'a$ci!_$ciz$ci!P$ci!w$ci'c$ci$|$ci!X$ci~P!#lO}&ea'[&ea~P!#lO}&fa!_&fa~P!)`O},YO!_'li~O#i!zi}!zi!O!zi~P#(|OP#]Or!zOs!zOu!{O!^!xO!`!yO!f#]O'aQOY#Vii#Vi!]#Vi#X#Vi#Y#Vi#Z#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi#i#Vi'n#Vi'u#Vi'v#Vi}#Vi!O#Vi~O#W#Vi~P$BuO#W9YO~P$BuOP#]Or!zOs!zOu!{O!^!xO!`!yO!f#]O#W9YO#X9ZO#Y9ZO#Z9ZO'aQOY#Vi!]#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi#i#Vi'n#Vi'u#Vi'v#Vi}#Vi!O#Vi~Oi#Vi~P$D}Oi9[O~P$D}OP#]Oi9[Or!zOs!zOu!{O!^!xO!`!yO!f#]O#W9YO#X9ZO#Y9ZO#Z9ZO#[9]O'aQO#a#Vi#c#Vi#e#Vi#f#Vi#i#Vi'n#Vi'u#Vi'v#Vi}#Vi!O#Vi~OY#Vi!]#Vi#]#Vi#^#Vi#_#Vi~P$GVOY9gO!]9^O#]9^O#^9^O#_9^O~P$GVOP#]OY9gOi9[Or!zOs!zOu!{O!]9^O!^!xO!`!yO!f#]O#W9YO#X9ZO#Y9ZO#Z9ZO#[9]O#]9^O#^9^O#_9^O#a9_O'aQO#c#Vi#e#Vi#f#Vi#i#Vi'n#Vi'v#Vi}#Vi!O#Vi~O'u#Vi~P$IkO'u!|O~P$IkOP#]OY9gOi9[Or!zOs!zOu!{O!]9^O!^!xO!`!yO!f#]O#W9YO#X9ZO#Y9ZO#Z9ZO#[9]O#]9^O#^9^O#_9^O#a9_O#c9aO'aQO'u!|O#e#Vi#f#Vi#i#Vi'n#Vi}#Vi!O#Vi~O'v#Vi~P$KsO'v!}O~P$KsOP#]OY9gOi9[Or!zOs!zOu!{O!]9^O!^!xO!`!yO!f#]O#W9YO#X9ZO#Y9ZO#Z9ZO#[9]O#]9^O#^9^O#_9^O#a9_O#c9aO#e9cO'aQO'u!|O'v!}O~O#f#Vi#i#Vi'n#Vi}#Vi!O#Vi~P$M{O^#gy}#gy'R#gyz#gy!_#gy'c#gy!P#gy$|#gy!X#gy~P!)`OP#ViY#Vii#Vis#Vi!]#Vi!^#Vi!`#Vi!f#Vi#W#Vi#X#Vi#Y#Vi#Z#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi#i#Vi'a#Vi}#Vi!O#Vi~P!#lO!^!xOP'`XY'`Xi'`Xr'`Xs'`Xu'`X!]'`X!`'`X!f'`X#W'`X#X'`X#Y'`X#Z'`X#['`X#]'`X#^'`X#_'`X#a'`X#c'`X#e'`X#f'`X#i'`X'a'`X'n'`X'u'`X'v'`X}'`X!O'`X~O#i#ji}#ji!O#ji~P#(|O!O4]O~O}&ma!O&ma~P#(|O!X!vO'n&jO}&na!_&na~O},yO!_'{i~O},yO!X!vO!_'{i~Oz&pa}&pa~P!#lO!X4dO~O}-QOz'|i~P!#lO}-QOz'|i~Oz4jO~O!X!vO#_4pO~Oi4qO!X!vO'n&jO~Oz4sO~O'[$eq}$eq#i$eq!w$eq~P!#lO^$Vy}$Vy'R$Vyz$Vy!_$Vy'c$Vy!P$Vy$|$Vy!X$Vy~P!)`O}1xO!P'}a~O!P&_O$|4xO~O!P&_O$|4xO~P!#lO^!zy}!zy'R!zyz!zy!_!zy'c!zy!P!zy$|!zy!X!zy~P!)`OY4{O~O}.SO!O(Ti~O]5QO~O[5RO~O'd'OO}&uX!O&uX~O}2gO!O(Qa~O!O5`O~P$0uOu-cO'd(cO'm+aO~O!S5cO!T5bO!U5bO!t0TO'X$aO'd(cO'm+aO~O!o5dO!p5dO~P%,eO!T5bO!U5bO'X$aO'd(cO'm+aO~O!P.oO~O!P.oO$|5fO~O!P.oO$|5fO~P!#lOR5kO!P.oO!k5jO$|5fO~OY5pO}&xa!O&xa~O}.{O!O(Ri~O]5sO~O!_5tO~O!_5uO~O!_5vO~O!_5vO~P){O^5xO~O!X5{O~O!_5}O~O}'si!O'si~P#(|O^$ZO'R$ZO~P!)`O^$ZO!w6SO'R$ZO~O^$ZO!X!vO!w6SO'R$ZO~O!T6XO!U6XO'X$aO'd(cO'm+aO~O^$ZO!X!vO!f6YO!w6SO'R$ZO'n&jO~O!`$WO']$bO~P%1PO!S6ZO~P%0nO}'py!_'py^'py'R'py~P!)`O#S$eqP$eqY$eq^$eqi$eqs$eq}$eq!]$eq!^$eq!`$eq!f$eq#W$eq#X$eq#Y$eq#Z$eq#[$eq#]$eq#^$eq#_$eq#a$eq#c$eq#e$eq#f$eq'R$eq'a$eq!_$eqz$eq!P$eq!w$eq'c$eq$|$eq!X$eq~P!#lO}&fi!_&fi~P!)`O#i!zq}!zq!O!zq~P#(|Or-iOs-iOu-jOPoaYoaioa!]oa!^oa!`oa!foa#Woa#Xoa#Yoa#Zoa#[oa#]oa#^oa#_oa#aoa#coa#eoa#foa#ioa'aoa'noa'uoa'voa}oa!Ooa~Or'}Ou(OOP$YaY$Yai$Yas$Ya!]$Ya!^$Ya!`$Ya!f$Ya#W$Ya#X$Ya#Y$Ya#Z$Ya#[$Ya#]$Ya#^$Ya#_$Ya#a$Ya#c$Ya#e$Ya#f$Ya#i$Ya'a$Ya'n$Ya'u$Ya'v$Ya}$Ya!O$Ya~Or'}Ou(OOP$[aY$[ai$[as$[a!]$[a!^$[a!`$[a!f$[a#W$[a#X$[a#Y$[a#Z$[a#[$[a#]$[a#^$[a#_$[a#a$[a#c$[a#e$[a#f$[a#i$[a'a$[a'n$[a'u$[a'v$[a}$[a!O$[a~OP$jaY$jai$jas$ja!]$ja!^$ja!`$ja!f$ja#W$ja#X$ja#Y$ja#Z$ja#[$ja#]$ja#^$ja#_$ja#a$ja#c$ja#e$ja#f$ja#i$ja'a$ja}$ja!O$ja~P!#lO#i$Uq}$Uq!O$Uq~P#(|O#i$Vq}$Vq!O$Vq~P#(|O!O6eO~O'[$xy}$xy#i$xy!w$xy~P!#lO!X!vO}&ni!_&ni~O!X!vO'n&jO}&ni!_&ni~O},yO!_'{q~Oz&pi}&pi~P!#lO}-QOz'|q~Oz6lO~P!#lOz6lO~O}'_y'['_y~P!#lO}&sa!P&sa~P!#lO!P$pq^$pq'R$pq~P!#lOY6tO~O}.SO!O(Tq~O]6wO~O!P&_O$|6xO~O!P&_O$|6xO~P!#lO!w6yO}&ua!O&ua~O}2gO!O(Qi~P#(|O!T7PO!U7PO'X$aO'd(cO'm+aO~O!S7RO!t3{O~P%@nO!P.oO$|7UO~O!P.oO$|7UO~P!#lO'd7[O~O}.{O!O(Rq~O!_7_O~O!_7_O~P){O!_7aO~O!_7bO~O}#Py!O#Py~P#(|O^$ZO!w7hO'R$ZO~O^$ZO!X!vO!w7hO'R$ZO~O!T7kO!U7kO'X$aO'd(cO'm+aO~O^$ZO!X!vO!f7lO!w7hO'R$ZO'n&jO~O#S$xyP$xyY$xy^$xyi$xys$xy}$xy!]$xy!^$xy!`$xy!f$xy#W$xy#X$xy#Y$xy#Z$xy#[$xy#]$xy#^$xy#_$xy#a$xy#c$xy#e$xy#f$xy'R$xy'a$xy!_$xyz$xy!P$xy!w$xy'c$xy$|$xy!X$xy~P!#lO#i#gy}#gy!O#gy~P#(|OP$ciY$cii$cis$ci!]$ci!^$ci!`$ci!f$ci#W$ci#X$ci#Y$ci#Z$ci#[$ci#]$ci#^$ci#_$ci#a$ci#c$ci#e$ci#f$ci#i$ci'a$ci}$ci!O$ci~P!#lOr'}Ou(OO'v(SOP$tiY$tii$tis$ti!]$ti!^$ti!`$ti!f$ti#W$ti#X$ti#Y$ti#Z$ti#[$ti#]$ti#^$ti#_$ti#a$ti#c$ti#e$ti#f$ti#i$ti'a$ti'n$ti'u$ti}$ti!O$ti~Or'}Ou(OOP$viY$vii$vis$vi!]$vi!^$vi!`$vi!f$vi#W$vi#X$vi#Y$vi#Z$vi#[$vi#]$vi#^$vi#_$vi#a$vi#c$vi#e$vi#f$vi#i$vi'a$vi'n$vi'u$vi'v$vi}$vi!O$vi~O#i$Vy}$Vy!O$Vy~P#(|O#i!zy}!zy!O!zy~P#(|O!X!vO}&nq!_&nq~O},yO!_'{y~Oz&pq}&pq~P!#lOz7rO~P!#lO}.SO!O(Ty~O}2gO!O(Qq~O!T8OO!U8OO'X$aO'd(cO'm+aO~O!P.oO$|8RO~O!P.oO$|8RO~P!#lO!_8UO~O&R8VOP&O!ZQ&O!ZW&O!Z]&O!Z^&O!Za&O!Zb&O!Zg&O!Zi&O!Zj&O!Zk&O!Zn&O!Zp&O!Zu&O!Zw&O!Zx&O!Zy&O!Z!P&O!Z!Z&O!Z!`&O!Z!c&O!Z!d&O!Z!e&O!Z!f&O!Z!g&O!Z!j&O!Z#`&O!Z#p&O!Z#t&O!Z${&O!Z$}&O!Z%P&O!Z%Q&O!Z%T&O!Z%V&O!Z%Y&O!Z%Z&O!Z%]&O!Z%j&O!Z%p&O!Z%r&O!Z%t&O!Z%v&O!Z%y&O!Z&P&O!Z&T&O!Z&V&O!Z&X&O!Z&Z&O!Z&]&O!Z&|&O!Z'W&O!Z'a&O!Z'm&O!Z'z&O!Z!O&O!Z%w&O!Z_&O!Z%|&O!Z~O^$ZO!w8[O'R$ZO~O^$ZO!X!vO!w8[O'R$ZO~OP$eqY$eqi$eqs$eq!]$eq!^$eq!`$eq!f$eq#W$eq#X$eq#Y$eq#Z$eq#[$eq#]$eq#^$eq#_$eq#a$eq#c$eq#e$eq#f$eq#i$eq'a$eq}$eq!O$eq~P!#lO}&uq!O&uq~P#(|O^$ZO!w8qO'R$ZO~OP$xyY$xyi$xys$xy!]$xy!^$xy!`$xy!f$xy#W$xy#X$xy#Y$xy#Z$xy#[$xy#]$xy#^$xy#_$xy#a$xy#c$xy#e$xy#f$xy#i$xy'a$xy}$xy!O$xy~P!#lO'c'eX~P.jO'cZXzZX!_ZX%nZX!PZX$|ZX!XZX~P$zO!XcX!_ZX!_cX'ncX~P;aOP9SOQ9SO]cOa:jOb!iOgcOi9SOjcOkcOn9SOp9SOuROwcOxcOycO!PSO!Z9UO!`UO!c9SO!d9SO!e9SO!f9SO!g9SO!j!hO#p!kO#t^O'W'^O'aQO'mYO'z:hO~O}9eO!O$Xa~O]#pOg#}Oi#qOj#pOk#pOn$OOp9jOu#wO!P#xO!Z:mO!`#uO#R9pO#p$SO$Z9lO$]9nO$`$TO'W&vO'a#rO~O#`'eO~P&+}O!OZX!OcX~P;aO#S9XO~O!X!vO#S9XO~O!w9hO~O#_9^O~O!w9qO}'sX!O'sX~O!w9hO}'qX!O'qX~O#S9rO~O'[9tO~P!#lO#S9yO~O#S9zO~O!X!vO#S9{O~O!X!vO#S9rO~O#i9|O~P#(|O#S9}O~O#S:OO~O#S:PO~O#S:QO~O#i:RO~P!#lO#i:SO~P!#lO#t~!^!n!p!q#Q#R'z$Z$]$`$q${$|$}%T%V%Y%Z%]%_~TS#t'z#Xy'T'U#v'T'W'd~",
+-  goto: "#Dk(XPPPPPPP(YP(jP*^PPPP-sPP.Y3j5^5qP5qPPP5q5qP5qP7_PP7dP7xPPPP<XPPPP<X>wPPP>}AYP<XPCsPPPPEk<XPPPPPGd<XPPJcK`PPPPKdL|PMUNVPK`<X<X!#^!&V!*v!*v!.TPPP!.[!1O<XPPPPPPPPPP!3sP!5UPP<X!6cP<XP<X<X<X<XP<X!8vPP!;mP!>`!>h!>l!>lP!;jP!>p!>pP!AcP!Ag<X<X!Am!D_5qP5qP5q5qP!Eb5q5q!GY5q!I[5q!J|5q5q!Kj!Md!Md!Mh!Md!MpP!MdP5q!Nl5q# v5q5q-sPPP##TPP##m##mP##mP#$S##mPP#$YP#$PP#$P#$lMQ#$P#%Z#%a#%d(Y#%g(YP#%n#%n#%nP(YP(YP(YP(YPP(YP#%t#%wP#%w(YPPP(YP(YP(YP(YP(YP(Y(Y#%{#&V#&]#&c#&q#&w#&}#'X#'_#'i#'o#'}#(T#(Z#(i#)O#*b#*p#*v#*|#+S#+Y#+d#+j#+p#+z#,^#,dPPPPPPPPP#,jPP#-^#1[PP#2r#2y#3RP#7_PP#7c#9v#?p#?t#?w#?z#@V#@YPP#@]#@a#AO#As#Aw#BZPP#B_#Be#BiP#Bl#Bp#Bs#Cc#Cy#DO#DR#DU#D[#D_#Dc#DgmhOSj}!m$Y%a%d%e%g*i*n/]/`Q$gmQ$npQ%XyS&R!b+UQ&f!iS(f#x(kQ)a$hQ)n$pQ*Y%RQ+[&YS+c&_+eQ+u&gQ-a(mQ.z*ZY0P+g+h+i+j+kS2l.o2nU3u0Q0S0VU5b2q2r2sS6X3w3zS7P5c5dQ7k6ZR8O7R$l[ORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#a#d$Y$l%Y%]%a%c%d%e%g%k%v&O&Z&a&k&x&|'|)O)V*e*i*n+p+w,Y,`-j-o-w.R.r/T/U/V/X/]/`/b/y0`0j2a2y3^3`3a3q5j5x6S7h8[8q!j'`#[#j&S'r*}+Q,e/p0}2i3j6y9S9U9X9Y9Z9[9]9^9_9`9a9b9c9d9e9h9q9r9t9{9|:P:Q:kQ(v$PQ)f$jQ*[%UQ*c%^Q,P9iQ-|)ZQ.X)gQ/S*aQ2V.SQ3R.{Q4U9jR4}2WpeOSjy}!m$Y%W%a%d%e%g*i*n/]/`R*^%Y&WVOSTjkn}!S!W!]!j!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#[#a#d#j$Y$l%Y%]%^%a%c%d%e%g%k%v&O&Z&a&k&x&|'r'|)O)V*e*i*n*}+Q+p+w,Y,`,e-j-o-w.R.r/T/U/V/X/]/`/b/p/y0`0j0}2a2i2y3^3`3a3j3q5j5x6S6y7h8[8q9S9U9X9Y9Z9[9]9^9_9`9a9b9c9d9e9h9q9r9t9{9|:P:Q:j:kW!cRU!`&SQ$`lQ$fmS$kp$pv$urs!q!t$W$s&[&o&r)r)s)t*g+O+_+z+|/f0bQ$}wQ&c!hQ&e!iS(Y#u(dS)`$g$hQ)d$jQ)q$rQ*T%PQ*X%RS+t&f&gQ,}(ZQ.Q)aQ.W)gQ.Y)hQ.])lQ.u*US.y*Y*ZQ0^+uQ1W,yQ2U.SQ2Y.VQ2_._Q3Q.zQ4a1XQ4|2WQ5P2[Q6s4{R7u6t!Y$dm!i$f$g$h&Q&e&f&g(e)`)a+R+b+t+u-Z.Q/u/|0R0^1m3t3y6V7i8]Q)X$`Q)y$zQ)|${Q*W%RQ.a)qQ.t*TU.x*X*Y*ZQ2{.uS3P.y.zQ5]2kQ5o3QS6}5^5aS7|7O7QQ8g7}R8v8hW#{a$b(s:hS$zt%WQ${uQ$|vR)w$x$V#za!v!x#c#u#w$Q$R$V&b'x(R(T(U(](a(q(r)U)W)Z)x){+q,V-Q-S-l-v-x.f.i.q.s1V1`1j1q1x1{2P2b2x2z4d4p4x5f5k6x7U8R9g9k9l9m9n9o9p9u9v9w9x9y9z9}:O:R:S:h:n:oV(w$P9i9jU&V!b$t+XQ'P!zQ)k$mQ.j)}Q1r-iR5X2g&YcORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#[#a#d#j$Y$l%Y%]%^%a%c%d%e%g%k%v&O&S&Z&a&k&x&|'r'|)O)V*e*i*n*}+Q+p+w,Y,`,e-j-o-w.R.r/T/U/V/X/]/`/b/p/y0`0j0}2a2i2y3^3`3a3j3q5j5x6S6y7h8[8q9S9U9X9Y9Z9[9]9^9_9`9a9b9c9d9e9h9q9r9t9{9|:P:Q:k$]#`Z!_!n$^%u%y&t&{'R'S'T'U'V'W'X'Y'Z'[']'_'b'f'p)j*y+S+]+v,U,[,_,a,o-m/k/n0_0i0m0n0o0p0q0r0s0t0u0v0w0x0y0|1R1v2S3l3o4P4S4T4Y4Z5Z6O6R6_6c6d7e7x8Y8o8z9T:a&ZcORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#[#a#d#j$Y$l%Y%]%^%a%c%d%e%g%k%v&O&S&Z&a&k&x&|'r'|)O)V*e*i*n*}+Q+p+w,Y,`,e-j-o-w.R.r/T/U/V/X/]/`/b/p/y0`0j0}2a2i2y3^3`3a3j3q5j5x6S6y7h8[8q9S9U9X9Y9Z9[9]9^9_9`9a9b9c9d9e9h9q9r9t9{9|:P:Q:kQ&T!bR/q+UY%}!b&R&Y+U+[S(e#x(kS+b&_+eS-Z(f(mQ-[(gQ-b(nQ.l*PU/|+c+g+hU0R+i+j+kS0W+l2pQ1m-aQ1o-cQ1p-dS2k.o2nU3t0P0Q0SQ3x0TQ3y0VS5^2l2sS5a2q2rU6V3u3w3zQ6[3{S7O5b5cQ7Q5dS7i6X6ZS7}7P7RQ8]7kR8h8OlhOSj}!m$Y%a%d%e%g*i*n/]/`Q%i!QS&s!u9XQ)^$eQ*R$}Q*S%OQ+r&dS,T&x9rS-n)O9{Q.O)_Q.n*QQ/d*pQ/e*qQ/m+PQ0U+iQ0[+sS1w-o:PQ2Q.PS2T.R:QQ3k/oQ3n/wQ3}0]Q4z2RQ5|3hQ6P3mQ6T3sQ6]4OQ7c5}Q7f6UQ8X7gQ8l8VQ8n8ZR8y8p$W#_Z!_!n%u%y&t&{'R'S'T'U'V'W'X'Y'Z'[']'_'b'f'p)j*y+S+]+v,U,[,_,o-m/k/n0_0i0m0n0o0p0q0r0s0t0u0v0w0x0y0|1R1v2S3l3o4P4S4T4Y4Z5Z6O6R6_6c6d7e7x8Y8o8z9T:aU(p#y&w0{T)S$^,a$W#^Z!_!n%u%y&t&{'R'S'T'U'V'W'X'Y'Z'[']'_'b'f'p)j*y+S+]+v,U,[,_,o-m/k/n0_0i0m0n0o0p0q0r0s0t0u0v0w0x0y0|1R1v2S3l3o4P4S4T4Y4Z5Z6O6R6_6c6d7e7x8Y8o8z9T:aQ'a#_S)R$^,aR-p)S&YcORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#[#a#d#j$Y$l%Y%]%^%a%c%d%e%g%k%v&O&S&Z&a&k&x&|'r'|)O)V*e*i*n*}+Q+p+w,Y,`,e-j-o-w.R.r/T/U/V/X/]/`/b/p/y0`0j0}2a2i2y3^3`3a3j3q5j5x6S6y7h8[8q9S9U9X9Y9Z9[9]9^9_9`9a9b9c9d9e9h9q9r9t9{9|:P:Q:kQ%d{Q%e|Q%g!OQ%h!PR/[*lQ&`!hQ)T$`Q+o&cS-u)X)qS0X+m+nW1z-r-s-t.aS3|0Y0ZU4w1|1}2OU6q4v5T5UQ7t6rR8c7wT+d&_+eS+b&_+eU/|+c+g+hU0R+i+j+kS0W+l2pS2k.o2nU3t0P0Q0SQ3x0TQ3y0VS5^2l2sS5a2q2rU6V3u3w3zQ6[3{S7O5b5cQ7Q5dS7i6X6ZS7}7P7RQ8]7kR8h8OS+d&_+eT2m.o2nS&m!p/YQ,|(YQ-X(eS/{+b2kQ1],}S1g-Y-bU3v0R0W5aQ4`1WS4n1n1pU6Y3x3y7QQ6g4aQ6p4qR7l6[Q!wXS&l!p/YQ)P$XQ)[$cQ)b$iQ+x&mQ,{(YQ-W(eQ-](hQ-})]Q.v*VS/z+b2kS1[,|,}S1f-X-bQ1i-[Q1l-^Q2}.wW3r/{0R0W5aQ4_1WQ4c1]S4h1g1pQ4o1oQ5m3OW6W3v3x3y7QS6f4`4aQ6k4jQ6n4nQ6{5[Q7Y5nS7j6Y6[Q7n6gQ7p6lQ7s6pQ7z6|Q8T7ZQ8^7lQ8a7rQ8e7{Q8t8fQ8|8uQ9Q8}Q:Z:UQ:d:_R:e:`$nWORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#a#d$Y$l%Y%]%^%a%c%d%e%g%k%v&O&Z&a&k&x&|'|)O)V*e*i*n+p+w,Y,`-j-o-w.R.r/T/U/V/X/]/`/b/y0`0j2a2y3^3`3a3q5j5x6S7h8[8qS!wn!j!j:T#[#j&S'r*}+Q,e/p0}2i3j6y9S9U9X9Y9Z9[9]9^9_9`9a9b9c9d9e9h9q9r9t9{9|:P:Q:kR:Z:j$nXORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#a#d$Y$l%Y%]%^%a%c%d%e%g%k%v&O&Z&a&k&x&|'|)O)V*e*i*n+p+w,Y,`-j-o-w.R.r/T/U/V/X/]/`/b/y0`0j2a2y3^3`3a3q5j5x6S7h8[8qQ$Xb!Y$cm!i$f$g$h&Q&e&f&g(e)`)a+R+b+t+u-Z.Q/u/|0R0^1m3t3y6V7i8]S$in!jQ)]$dQ*V%RW.w*W*X*Y*ZU3O.x.y.zQ5[2kS5n3P3QU6|5]5^5aQ7Z5oU7{6}7O7QS8f7|7}S8u8g8hQ8}8v!j:U#[#j&S'r*}+Q,e/p0}2i3j6y9S9U9X9Y9Z9[9]9^9_9`9a9b9c9d9e9h9q9r9t9{9|:P:Q:kQ:_:iR:`:j$f]OSTjk}!S!W!]!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#a#d$Y$l%Y%]%a%c%d%e%g%k%v&O&Z&a&k&x&|'|)O)V*e*i*n+p+w,Y,`-j-o-w.R.r/T/U/V/X/]/`/b/y0`0j2a2y3^3`3a3q5j5x6S7h8[8qU!gRU!`v$urs!q!t$W$s&[&o&r)r)s)t*g+O+_+z+|/f0bQ*d%^!h:V#[#j'r*}+Q,e/p0}2i3j6y9S9U9X9Y9Z9[9]9^9_9`9a9b9c9d9e9h9q9r9t9{9|:P:Q:kR:Y&SS&W!b$tR/s+X$l[ORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#a#d$Y$l%Y%]%a%c%d%e%g%k%v&O&Z&a&k&x&|'|)O)V*e*i*n+p+w,Y,`-j-o-w.R.r/T/U/V/X/]/`/b/y0`0j2a2y3^3`3a3q5j5x6S7h8[8q!j'`#[#j&S'r*}+Q,e/p0}2i3j6y9S9U9X9Y9Z9[9]9^9_9`9a9b9c9d9e9h9q9r9t9{9|:P:Q:kR*c%^$noORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#a#d$Y$l%Y%]%^%a%c%d%e%g%k%v&O&Z&a&k&x&|'|)O)V*e*i*n+p+w,Y,`-j-o-w.R.r/T/U/V/X/]/`/b/y0`0j2a2y3^3`3a3q5j5x6S7h8[8qQ'P!z!k:W#[#j&S'r*}+Q,e/p0}2i3j6y9S9U9X9Y9Z9[9]9^9_9`9a9b9c9d9e9h9q9r9t9{9|:P:Q:k!h#UZ!_$^%u%y&t&{'Y'Z'[']'b'f)j*y+]+v,U,[,o-m0_0i0y1v2S3o4P4S6R7e8Y8o8z9T!R9`'_'p+S,a/k/n0m0u0v0w0x0|1R3l4T4Y4Z5Z6O6_6c6d7x:a!d#WZ!_$^%u%y&t&{'[']'b'f)j*y+]+v,U,[,o-m0_0i0y1v2S3o4P4S6R7e8Y8o8z9T}9b'_'p+S,a/k/n0m0w0x0|1R3l4T4Y4Z5Z6O6_6c6d7x:a!`#[Z!_$^%u%y&t&{'b'f)j*y+]+v,U,[,o-m0_0i0y1v2S3o4P4S6R7e8Y8o8z9Tl(U#s&y(},w-P-e-f0g1u4^4r:[:f:gx:k'_'p+S,a/k/n0m0|1R3l4T4Y4Z5Z6O6_6c6d7x:a!`:n&u'd(X(_+n,S,l-T-q-t.e.g0Z0f1^1b2O2d2f2v4R4e4k4t4y5U5i6^6i6o7WZ:o0z4X6`7m8_&YcORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#[#a#d#j$Y$l%Y%]%^%a%c%d%e%g%k%v&O&S&Z&a&k&x&|'r'|)O)V*e*i*n*}+Q+p+w,Y,`,e-j-o-w.R.r/T/U/V/X/]/`/b/p/y0`0j0}2a2i2y3^3`3a3j3q5j5x6S6y7h8[8q9S9U9X9Y9Z9[9]9^9_9`9a9b9c9d9e9h9q9r9t9{9|:P:Q:kS#k`#lR1O,d&a_ORSTU`jk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#[#a#d#j#l$Y$l%Y%]%^%a%c%d%e%g%k%v&O&S&Z&a&k&x&|'r'|)O)V*e*i*n*}+Q+p+w,Y,`,d,e-j-o-w.R.r/T/U/V/X/]/`/b/p/y0`0j0}2a2i2y3^3`3a3j3q5j5x6S6y7h8[8q9S9U9X9Y9Z9[9]9^9_9`9a9b9c9d9e9h9q9r9t9{9|:P:Q:kS#f^#mT'i#h'mT#g^#mT'k#h'm&a`ORSTU`jk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#[#a#d#j#l$Y$l%Y%]%^%a%c%d%e%g%k%v&O&S&Z&a&k&x&|'r'|)O)V*e*i*n*}+Q+p+w,Y,`,d,e-j-o-w.R.r/T/U/V/X/]/`/b/p/y0`0j0}2a2i2y3^3`3a3j3q5j5x6S6y7h8[8q9S9U9X9Y9Z9[9]9^9_9`9a9b9c9d9e9h9q9r9t9{9|:P:Q:kT#k`#lQ#n`R't#l$nbORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#a#d$Y$l%Y%]%^%a%c%d%e%g%k%v&O&Z&a&k&x&|'|)O)V*e*i*n+p+w,Y,`-j-o-w.R.r/T/U/V/X/]/`/b/y0`0j2a2y3^3`3a3q5j5x6S7h8[8q!k:i#[#j&S'r*}+Q,e/p0}2i3j6y9S9U9X9Y9Z9[9]9^9_9`9a9b9c9d9e9h9q9r9t9{9|:P:Q:k#RdOSUj}!S!W!m!{#j$Y%Y%]%^%a%c%d%e%g%k&O&a'r)V*e*i*n+p,e-j-w.r/T/U/V/X/]/`/b0}2a2y3^3`3a5j5xt#ya!x$Q$R$V(R(T(U(](q(r,V-l1V1q:h:n:o!|&w!v#c#u#w&b'x(a)U)W)Z)x){+q-Q-S-v-x.f.i.q.s1`1j1x1{2P2b2x2z4d4p4x5f5k6x7U8R9k9m9o9u9w9y9}:RQ({$TQ,p'}c0{9g9l9n9p9v9x9z:O:St#va!x$Q$R$V(R(T(U(](q(r,V-l1V1q:h:n:oS(h#x(kQ(|$UQ-^(i!|:]!v#c#u#w&b'x(a)U)W)Z)x){+q-Q-S-v-x.f.i.q.s1`1j1x1{2P2b2x2z4d4p4x5f5k6x7U8R9k9m9o9u9w9y9}:Rb:^9g9l9n9p9v9x9z:O:SQ:b:lR:c:mt#ya!x$Q$R$V(R(T(U(](q(r,V-l1V1q:h:n:o!|&w!v#c#u#w&b'x(a)U)W)Z)x){+q-Q-S-v-x.f.i.q.s1`1j1x1{2P2b2x2z4d4p4x5f5k6x7U8R9k9m9o9u9w9y9}:Rc0{9g9l9n9p9v9x9z:O:SlfOSj}!m$Y%a%d%e%g*i*n/]/`Q(`#wQ*u%nQ*v%pR1_-Q$U#za!v!x#c#u#w$Q$R$V&b'x(R(T(U(](a(q(r)U)W)Z)x){+q,V-Q-S-l-v-x.f.i.q.s1V1`1j1q1x1{2P2b2x2z4d4p4x5f5k6x7U8R9g9k9l9m9n9o9p9u9v9w9x9y9z9}:O:R:S:h:n:oQ)z${Q.h)|Q2e.gR5W2fT(j#x(kS(j#x(kT2m.o2nQ)[$cQ-](hQ-})]Q.v*VQ2}.wQ5m3OQ6{5[Q7Y5nQ7z6|Q8T7ZQ8e7{Q8t8fQ8|8uR9Q8}l(R#s&y(},w-P-e-f0g1u4^4r:[:f:g!`9u&u'd(X(_+n,S,l-T-q-t.e.g0Z0f1^1b2O2d2f2v4R4e4k4t4y5U5i6^6i6o7WZ9v0z4X6`7m8_n(T#s&y(},u,w-P-e-f0g1u4^4r:[:f:g!b9w&u'd(X(_+n,S,l-T-q-t.e.g0Z0d0f1^1b2O2d2f2v4R4e4k4t4y5U5i6^6i6o7W]9x0z4X6`6a7m8_peOSjy}!m$Y%W%a%d%e%g*i*n/]/`Q%TxR*e%^peOSjy}!m$Y%W%a%d%e%g*i*n/]/`R%TxQ*O$|R.d)wqeOSjy}!m$Y%W%a%d%e%g*i*n/]/`Q.p*TS2w.t.uW5e2t2u2v2{U7T5g5h5iU8P7S7V7WQ8i8QR8w8jQ%[yR*_%WR3U.}R7]5pS$kp$pR.Y)hQ%azR*i%bR*o%hT/^*n/`QjOQ!mST$]j!mQ'z#rR,m'zQ!YQR%s!YQ!^RU%w!^%x*zQ%x!_R*z%yQ+V&TR/r+VQ,W&yR0h,WQ,Z&{S0k,Z0lR0l,[Q+e&_R/}+eQ&]!eQ*{%zT+`&]*{Q+Y&WR/t+YQ&p!rQ+y&nU+}&p+y0cR0c,OQ'm#hR,f'mQ#l`R's#lQ#bZU'c#b*x9fQ*x9TR9f'pQ,z(YW1Y,z1Z4b6hU1Z,{,|,}S4b1[1]R6h4c#q(P#s&u&y'd(X(_(x(y(}+n,Q,R,S,l,u,v,w-P-T-e-f-q-t.e.g0Z0d0e0f0g0z1^1b1u2O2d2f2v4R4V4W4X4^4e4k4r4t4y5U5i6^6`6a6b6i6o7W7m8_:[:f:gQ-R(_U1a-R1c4fQ1c-TR4f1bQ(k#xR-_(kQ(t#|R-h(tQ1y-qR4u1yQ)u$vR.c)uQ2h.jS5Y2h6zR6z5ZQ*Q$}R.m*QQ2n.oR5_2nQ.|*[S3S.|5qR5q3UQ.T)dW2X.T2Z5O6uQ2Z.WQ5O2YR6u5PQ)i$kR.Z)iQ/`*nR3d/`WiOSj!mQ%f}Q)Q$YQ*h%aQ*j%dQ*k%eQ*m%gQ/Z*iS/^*n/`R3c/]Q$[gQ%j!RQ%m!TQ%o!UQ%q!VQ)p$qQ)v$wQ*^%[Q*s%lS/P*_*bQ/g*rQ/h*uQ/i*vS/x+b2kQ1d-VQ1e-WQ1k-]Q2^.^Q2c.eQ2|.vQ3W/RQ3b/[Y3p/z/{0R0W5aQ4g1fQ4i1hQ4l1lQ5S2`Q5V2dQ5l2}Q5r3V[6Q3o3r3v3x3y7QQ6j4hQ6m4mQ6v5QQ7X5mQ7^5sW7d6R6W6Y6[Q7o6kQ7q6nQ7v6wQ7y6{Q8S7YU8W7e7j7lQ8`7pQ8b7sQ8d7zQ8k8TS8m8Y8^Q8r8aQ8s8eQ8x8oQ8{8tQ9O8zQ9P8|R9R9QQ$emQ&d!iU)_$f$g$hQ+P&QU+s&e&f&gQ-V(eS.P)`)aQ/o+RQ/w+bS0]+t+uQ1h-ZQ2R.QQ3m/uS3s/|0RQ4O0^Q4m1mS6U3t3yQ7g6VQ8Z7iR8p8]S#ta:hR)Y$bU#|a$b:hR-g(sQ#saS&u!v)ZQ&y!xQ'd#cQ(X#uQ(_#wQ(x$QQ(y$RQ(}$VQ+n&bQ,Q9kQ,R9mQ,S9oQ,l'xQ,u(RQ,v(TQ,w(UQ-P(]Q-T(aQ-e(qQ-f(rd-q)U-v.q1{2x4x5f6x7U8RQ-t)WQ.e)xQ.g){Q0Z+qQ0d9uQ0e9wQ0f9yQ0g,VQ0z9gQ1^-QQ1b-SQ1u-lQ2O-xQ2d.fQ2f.iQ2v.sQ4R9}Q4V9lQ4W9nQ4X9pQ4^1VQ4e1`Q4k1jQ4r1qQ4t1xQ4y2PQ5U2bQ5i2zQ6^:RQ6`9zQ6a9vQ6b9xQ6i4dQ6o4pQ7W5kQ7m:OQ8_:SQ:[:hQ:f:nR:g:oT'y#r'zlgOSj}!m$Y%a%d%e%g*i*n/]/`S!oU%cQ%l!SQ%r!WQ'Q!{Q'q#jS*b%Y%]Q*f%^Q*r%kQ*|&OQ+m&aQ,j'rQ-s)VQ/W*eQ0Y+pQ1Q,eQ1s-jQ1}-wQ2u.rQ3Y/TQ3Z/UQ3]/VQ3_/XQ3f/bQ4[0}Q5T2aQ5h2yQ5w3^Q5y3`Q5z3aQ7V5jR7`5x!vZOSUj}!S!m!{$Y%Y%]%^%a%c%d%e%g%k&O&a)V*e*i*n+p-j-w.r/T/U/V/X/]/`/b2a2y3^3`3a5j5xQ!_RQ!nTQ$^kQ%u!]Q%y!`Q&t!uQ&{!yQ'R#OQ'S#PQ'T#QQ'U#RQ'V#SQ'W#TQ'X#UQ'Y#VQ'Z#WQ'[#XQ']#YQ'_#[Q'b#aQ'f#dW'p#j'r,e0}Q)j$lQ*y%vS+S&S/pQ+]&ZQ+v&kQ,U&xQ,[&|Q,_9SQ,a9UQ,o'|Q-m)OQ/k*}Q/n+QQ0_+wQ0i,YQ0m9XQ0n9YQ0o9ZQ0p9[Q0q9]Q0r9^Q0s9_Q0t9`Q0u9aQ0v9bQ0w9cQ0x9dQ0y,`Q0|9hQ1R9eQ1v-oQ2S.RQ3l9qQ3o/yQ4P0`Q4S0jQ4T9rQ4Y9tQ4Z9{Q5Z2iQ6O3jQ6R3qQ6_9|Q6c:PQ6d:QQ7e6SQ7x6yQ8Y7hQ8o8[Q8z8qQ9T!WR:a:kT!XQ!YR!aRR&U!bS&Q!b+US+R&R&YR/u+[R&z!xR&}!yT!sU$WS!rU$WU$vrs*gS&n!q!tQ+{&oQ,O&rQ.b)tS0a+z+|R4Q0b[!dR!`$s&[)r+_h!pUrs!q!t$W&o&r)t+z+|0bQ/Y*gQ/l+OQ3i/fT:X&S)sT!fR$sS!eR$sS%z!`)rS+T&S)sQ+^&[R/v+_T&X!b$tQ#h^R'v#mT'l#h'mR1P,dT([#u(dR(b#wQ-r)UQ1|-vQ2t.qQ4v1{Q5g2xQ6r4xQ7S5fQ7w6xQ8Q7UR8j8RlhOSj}!m$Y%a%d%e%g*i*n/]/`Q%ZyR*^%WV$wrs*gR.k)}R*]%UQ$opR)o$pR)e$jT%_z%bT%`z%bT/_*n/`",
+-  nodeNames: "⚠ ArithOp ArithOp extends LineComment BlockComment Script ExportDeclaration export Star as VariableName from String ; default FunctionDeclaration async function VariableDefinition TypeParamList TypeDefinition ThisType this LiteralType ArithOp Number BooleanLiteral TemplateType VoidType void TypeofType typeof MemberExpression . ?. PropertyName [ TemplateString null super RegExp ] ArrayExpression Spread , } { ObjectExpression Property async get set PropertyDefinition Block : NewExpression new TypeArgList CompareOp < ) ( ArgList UnaryExpression await yield delete LogicOp BitOp ParenthesizedExpression ClassExpression class extends ClassBody MethodDeclaration Privacy static abstract override PrivatePropertyDefinition PropertyDeclaration readonly Optional TypeAnnotation Equals StaticBlock FunctionExpression ArrowFunction ParamList ParamList ArrayPattern ObjectPattern PatternProperty Privacy readonly Arrow MemberExpression PrivatePropertyName BinaryExpression ArithOp ArithOp ArithOp ArithOp BitOp CompareOp instanceof in const CompareOp BitOp BitOp BitOp LogicOp LogicOp ConditionalExpression LogicOp LogicOp AssignmentExpression UpdateOp PostfixExpression CallExpression TaggedTemplateExpression DynamicImport import ImportMeta JSXElement JSXSelfCloseEndTag JSXStartTag JSXSelfClosingTag JSXIdentifier JSXNamespacedName JSXMemberExpression JSXSpreadAttribute JSXAttribute JSXAttributeValue JSXEscape JSXEndTag JSXOpenTag JSXFragmentTag JSXText JSXEscape JSXStartCloseTag JSXCloseTag PrefixCast ArrowFunction TypeParamList SequenceExpression KeyofType keyof UniqueType unique ImportType InferredType infer TypeName ParenthesizedType FunctionSignature ParamList NewSignature IndexedType TupleType Label ArrayType ReadonlyType ObjectType MethodType PropertyType IndexSignature CallSignature TypePredicate is NewSignature new UnionType LogicOp IntersectionType LogicOp ConditionalType ParameterizedType ClassDeclaration abstract implements type VariableDeclaration let var TypeAliasDeclaration InterfaceDeclaration interface EnumDeclaration enum EnumBody NamespaceDeclaration namespace module AmbientDeclaration declare GlobalDeclaration global ClassDeclaration ClassBody MethodDeclaration AmbientFunctionDeclaration ExportGroup VariableName VariableName ImportDeclaration ImportGroup ForStatement for ForSpec ForInSpec ForOfSpec of WhileStatement while WithStatement with DoStatement do IfStatement if else SwitchStatement switch SwitchBody CaseLabel case DefaultLabel TryStatement try catch finally ReturnStatement return ThrowStatement throw BreakStatement break ContinueStatement continue DebuggerStatement debugger LabeledStatement ExpressionStatement",
+-  maxTerm: 330,
++  states: "$1dO`QYOOO'QQ!LdO'#CgO'XOSO'#DSO)dQYO'#DXO)tQYO'#DdO){QYO'#DnO-xQYO'#DtOOQO'#EX'#EXO.]QWO'#EWO.bQWO'#EWOOQ!LS'#Eb'#EbO0aQ!LdO'#IsO2wQ!LdO'#ItO3eQWO'#EvO3jQpO'#F_OOQ!LS'#FO'#FOO3uO!bO'#FOO4TQWO'#FfO5bQWO'#FeOOQ!LS'#It'#ItOOQ!LQ'#Is'#IsOOQQ'#J^'#J^O5gQWO'#HlO5lQ!LYO'#HmOOQQ'#Ie'#IeOOQQ'#Hn'#HnQ`QYOOO){QYO'#DfO5tQWO'#GYO5yQ#tO'#ClO6XQWO'#EVO6dQWO'#EcO6iQ#tO'#E}O7TQWO'#GYO7YQWO'#G^O7eQWO'#G^O7sQWO'#GaO7sQWO'#GbO7sQWO'#GdO5tQWO'#GgO8dQWO'#GjO9rQWO'#CcO:SQWO'#GwO:[QWO'#G}O:[QWO'#HPO`QYO'#HRO:[QWO'#HTO:[QWO'#HWO:aQWO'#H^O:fQ!LZO'#HbO){QYO'#HdO:qQ!LZO'#HfO:|Q!LZO'#HhO5lQ!LYO'#HjO){QYO'#IuOOOS'#Hp'#HpO;XOSO,59nOOQ!LS,59n,59nO=jQbO'#CgO=tQYO'#HqO>RQWO'#IvO@QQbO'#IvO'dQYO'#IvO@XQWO,59sO@oQ&jO'#D^OAhQWO'#EXOAuQWO'#JROBQQWO'#JQOBYQWO,5:uOB_QWO'#JPOBfQWO'#DuO5yQ#tO'#EVOBtQWO'#EVOCPQ`O'#E}OOQ!LS,5:O,5:OOCXQYO,5:OOEVQ!LdO,5:YOEsQWO,5:`OF^Q!LYO'#JOO7YQWO'#I}OFeQWO'#I}OFmQWO,5:tOFrQWO'#I}OGQQYO,5:rOIQQWO'#ESOJ[QWO,5:rOKkQWO'#DhOKrQYO'#DmOK|Q&jO,5:{O){QYO,5:{OOQQ'#En'#EnOOQQ'#Ep'#EpO){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}OOQQ'#Et'#EtOLUQYO,5;_OOQ!LS,5;d,5;dOOQ!LS,5;e,5;eONUQWO,5;eOOQ!LS,5;f,5;fO){QYO'#H{ONZQ!LYO,5<RONuQWO,5:}O){QYO,5;bON|QpO'#FTO! yQpO'#JVO! eQpO'#JVO!!QQpO'#JVOOQO'#JV'#JVO!!fQpO,5;mOOOO,5;y,5;yO!!wQYO'#FaOOOO'#Hz'#HzO3uO!bO,5;jO!#OQpO'#FcOOQ!LS,5;j,5;jO!#oQ,UO'#CqOOQ!LS'#Ct'#CtO!$SQWO'#CtO!$XOSO'#CxO!$uQ#tO,5<OO!$|QWO,5<QO!&YQWO'#FpO!&gQWO'#FqO!&lQWO'#FuO!'nQ&jO'#FyO!(aQ,UO'#InOOQ!LS'#In'#InO!(kQWO'#ImO!(yQWO'#IlOOQ!LS'#Cr'#CrOOQ!LS'#Cy'#CyO!)RQWO'#C{OJaQWO'#FhOJaQWO'#FjO!)WQWO'#FlO!)]QWO'#FmO!)bQWO'#FsOJaQWO'#FxO!)gQWO'#EYO!*OQWO,5<PO`QYO,5>WOOQQ'#Ih'#IhOOQQ,5>X,5>XOOQQ-E;l-E;lO!+zQ!LdO,5:QOOQ!LQ'#Co'#CoO!,kQ#tO,5<tOOQO'#Ce'#CeO!,|QWO'#CpO!-UQ!LYO'#IiO5bQWO'#IiO:aQWO,59WO!-dQpO,59WO!-lQ#tO,59WO5yQ#tO,59WO!-wQWO,5:rO!.PQWO'#GvO!.[QWO'#JbO){QYO,5;gO!.dQ&jO,5;iO!.iQWO,5=aO!.nQWO,5=aO!.sQWO,5=aO5lQ!LYO,5=aO5tQWO,5<tO!/RQWO'#EZO!/dQ&jO'#E[OOQ!LQ'#JP'#JPO!/uQ!LYO'#J_O5lQ!LYO,5<xO7sQWO,5=OOOQO'#Cq'#CqO!0QQpO,5<{O!0YQ#tO,5<|O!0eQWO,5=OO!0jQ`O,5=RO:aQWO'#GlO5tQWO'#GnO!0rQWO'#GnO5yQ#tO'#GqO!0wQWO'#GqOOQQ,5=U,5=UO!0|QWO'#GrO!1UQWO'#ClO!1ZQWO,58}O!1eQWO,58}O!3gQYO,58}OOQQ,58},58}O!3tQ!LYO,58}O){QYO,58}O!4PQYO'#GyOOQQ'#Gz'#GzOOQQ'#G{'#G{O`QYO,5=cO!4aQWO,5=cO){QYO'#DtO`QYO,5=iO`QYO,5=kO!4fQWO,5=mO`QYO,5=oO!4kQWO,5=rO!4pQYO,5=xOOQQ,5=|,5=|O){QYO,5=|O5lQ!LYO,5>OOOQQ,5>Q,5>QO!8qQWO,5>QOOQQ,5>S,5>SO!8qQWO,5>SOOQQ,5>U,5>UO!8vQ`O,5?aOOOS-E;n-E;nOOQ!LS1G/Y1G/YO!8{QbO,5>]O){QYO,5>]OOQO-E;o-E;oO!9VQWO,5?bO!9_QbO,5?bO!9fQWO,5?lOOQ!LS1G/_1G/_O!9nQpO'#DQOOQO'#Ix'#IxO){QYO'#IxO!:]QpO'#IxO!:zQpO'#D_O!;]Q&jO'#D_O!=hQYO'#D_O!=oQWO'#IwO!=wQWO,59xO!=|QWO'#E]O!>[QWO'#JSO!>dQWO,5:vO!>zQ&jO'#D_O){QYO,5?mO!?UQWO'#HvO!9fQWO,5?lOOQ!LQ1G0a1G0aO!@bQ&jO'#DxOOQ!LS,5:a,5:aO){QYO,5:aOIQQWO,5:aO!@iQWO,5:aO:aQWO,5:qO!-dQpO,5:qO!-lQ#tO,5:qO5yQ#tO,5:qOOQ!LS1G/j1G/jOOQ!LS1G/z1G/zOOQ!LQ'#ER'#ERO){QYO,5?jO!@tQ!LYO,5?jO!AVQ!LYO,5?jO!A^QWO,5?iO!AfQWO'#HxO!A^QWO,5?iOOQ!LQ1G0`1G0`O7YQWO,5?iOOQ!LS1G0^1G0^O!BQQ!LdO1G0^O!BqQ!LbO,5:nOOQ!LS'#Fo'#FoO!C_Q!LdO'#InOGQQYO1G0^O!E^Q#tO'#IyO!EhQWO,5:SO!EmQbO'#IzO){QYO'#IzO!EwQWO,5:XOOQ!LS'#DQ'#DQOOQ!LS1G0g1G0gO!E|QWO1G0gO!H_Q!LdO1G0iO!HfQ!LdO1G0iO!JyQ!LdO1G0iO!KQQ!LdO1G0iO!MXQ!LdO1G0iO!MlQ!LdO1G0iO#!]Q!LdO1G0iO#!dQ!LdO1G0iO#$wQ!LdO1G0iO#%OQ!LdO1G0iO#&sQ!LdO1G0iO#)mQ7^O'#CgO#+hQ7^O1G0yO#-cQ7^O'#ItOOQ!LS1G1P1G1PO#-vQ!LdO,5>gOOQ!LQ-E;y-E;yO#.gQ!LdO1G0iOOQ!LS1G0i1G0iO#0iQ!LdO1G0|O#1YQpO,5;qO#1bQpO,5;rO#1jQpO'#FYO#2RQWO'#FXOOQO'#JW'#JWOOQO'#Hy'#HyO#2WQpO1G1XOOQ!LS1G1X1G1XOOOO1G1d1G1dO#2iQ7^O'#IsO#2sQWO,5;{OLUQYO,5;{OOOO-E;x-E;xOOQ!LS1G1U1G1UOOQ!LS,5;},5;}O#2xQpO,5;}OOQ!LS,59`,59`OIQQWO'#IpOOOS'#Ho'#HoO#2}OSO,59dOOQ!LS,59d,59dO){QYO1G1jO!)]QWO'#H}O#3YQWO,5<cOOQ!LS,5<`,5<`OOQO'#GT'#GTOJaQWO,5<nOOQO'#GV'#GVOJaQWO,5<pOJaQWO,5<rOOQO1G1l1G1lO#3eQ`O'#CoO#3xQ`O,5<[O#4PQWO'#JZO5tQWO'#JZO#4_QWO,5<^OJaQWO,5<]O#4dQ`O'#FoO#4qQ`O'#J[O#4{QWO'#J[OIQQWO'#J[O#5QQWO,5<aOOQ!LQ'#Dc'#DcO#5VQWO'#FrO#5bQpO'#FzO!'iQ&jO'#FzO!'iQ&jO'#F|O#5sQWO'#F}O!)bQWO'#GQOOQO'#IP'#IPO#5xQ&jO,5<eOOQ!LS,5<e,5<eO#6PQ&jO'#FzO#6_Q&jO'#F{O#6gQ&jO'#F{OOQ!LS,5<s,5<sOJaQWO,5?XOJaQWO,5?XO#6lQWO'#IQO#6wQWO,5?WOOQ!LS'#Cg'#CgO#7kQ#tO,59gOOQ!LS,59g,59gO#8^Q#tO,5<SO#9PQ#tO,5<UO#9ZQWO,5<WOOQ!LS,5<X,5<XO#9`QWO,5<_O#9eQ#tO,5<dOGQQYO1G1kO#9uQWO1G1kOOQQ1G3r1G3rOOQ!LS1G/l1G/lONUQWO1G/lOOQQ1G2`1G2`OIQQWO1G2`O){QYO1G2`OIQQWO1G2`O#9zQWO1G2`O#:YQWO,59[O#;cQWO'#ESOOQ!LQ,5?T,5?TO#;mQ!LYO,5?TOOQQ1G.r1G.rO:aQWO1G.rO!-dQpO1G.rO!-lQ#tO1G.rO#;{QWO1G0^O#<QQWO'#CgO#<]QWO'#JcO#<eQWO,5=bO#<jQWO'#JcO#<oQWO'#JcO#<tQWO'#IYO#=SQWO,5?|O#=[QbO1G1ROOQ!LS1G1T1G1TO5tQWO1G2{O#=cQWO1G2{O#=hQWO1G2{O#=mQWO1G2{OOQQ1G2{1G2{O#=rQ#tO1G2`O7YQWO'#JQO7YQWO'#E]O7YQWO'#ISO#>TQ!LYO,5?yOOQQ1G2d1G2dO!0eQWO1G2jOIQQWO1G2gO#>`QWO1G2gOOQQ1G2h1G2hOIQQWO1G2hO#>eQWO1G2hO#>mQ&jO'#GfOOQQ1G2j1G2jO!'iQ&jO'#IUO!0jQ`O1G2mOOQQ1G2m1G2mOOQQ,5=W,5=WO#>uQ#tO,5=YO5tQWO,5=YO#5sQWO,5=]O5bQWO,5=]O!-dQpO,5=]O!-lQ#tO,5=]O5yQ#tO,5=]O#?WQWO'#JaO#?cQWO,5=^OOQQ1G.i1G.iO#?hQ!LYO1G.iO#?sQWO1G.iO!)RQWO1G.iO5lQ!LYO1G.iO#?xQbO,5@OO#@SQWO,5@OO#@_QYO,5=eO#@fQWO,5=eO7YQWO,5@OOOQQ1G2}1G2}O`QYO1G2}OOQQ1G3T1G3TOOQQ1G3V1G3VO:[QWO1G3XO#@kQYO1G3ZO#DfQYO'#HYOOQQ1G3^1G3^O:aQWO1G3dO#DsQWO1G3dO5lQ!LYO1G3hOOQQ1G3j1G3jOOQ!LQ'#Fv'#FvO5lQ!LYO1G3lO5lQ!LYO1G3nOOOS1G4{1G4{O#D{Q`O,5<RO#ETQbO1G3wO#E_QWO1G4|O#EgQWO1G5WO#EoQWO,5?dOLUQYO,5:wO7YQWO,5:wO:aQWO,59yOLUQYO,59yO!-dQpO,59yO#EtQ7^O,59yOOQO,5:w,5:wO#FOQ&jO'#HrO#FfQWO,5?cOOQ!LS1G/d1G/dO#FnQ&jO'#HwO#GSQWO,5?nOOQ!LQ1G0b1G0bO!;]Q&jO,59yO#G[QbO1G5XOOQO,5>b,5>bO7YQWO,5>bOOQO-E;t-E;tOOQ!LQ'#EO'#EOO#GfQ!LrO'#EPO!@YQ&jO'#DyOOQO'#Hu'#HuO#HQQ&jO,5:dOOQ!LS,5:d,5:dO#HXQ&jO'#DyO#HjQ&jO'#DyO#HqQ&jO'#EUO#HtQ&jO'#EPO#IRQ&jO'#EPO!@YQ&jO'#EPO#IfQWO1G/{O#IkQ`O1G/{OOQ!LS1G/{1G/{O){QYO1G/{OIQQWO1G/{OOQ!LS1G0]1G0]O:aQWO1G0]O!-dQpO1G0]O!-lQ#tO1G0]O#IrQ!LdO1G5UO){QYO1G5UO#JSQ!LYO1G5UO#JeQWO1G5TO7YQWO,5>dOOQO,5>d,5>dO#JmQWO,5>dOOQO-E;v-E;vO#JeQWO1G5TO#J{Q!LdO,59gO#LzQ!LdO,5<SO#N|Q!LdO,5<UO$#OQ!LdO,5<dOOQ!LS7+%x7+%xO$%WQ!LdO7+%xO$%wQWO'#HsO$&RQWO,5?eOOQ!LS1G/n1G/nO$&ZQYO'#HtO$&hQWO,5?fO$&pQbO,5?fOOQ!LS1G/s1G/sOOQ!LS7+&R7+&RO$&zQ7^O,5:YO){QYO7+&eO$'UQ7^O,5:QOOQO1G1]1G1]OOQO1G1^1G1^O$'cQMhO,5;tOLUQYO,5;sOOQO-E;w-E;wOOQ!LS7+&s7+&sOOOO7+'O7+'OOOOO1G1g1G1gO$'nQWO1G1gOOQ!LS1G1i1G1iO$'sQ`O,5?[OOOS-E;m-E;mOOQ!LS1G/O1G/OO$'zQ!LdO7+'UOOQ!LS,5>i,5>iO$(kQWO,5>iOOQ!LS1G1}1G1}P$(pQWO'#H}POQ!LS-E;{-E;{O$)aQ#tO1G2YO$*SQ#tO1G2[O$*^Q#tO1G2^OOQ!LS1G1v1G1vO$*eQWO'#H|O$*sQWO,5?uO$*sQWO,5?uO$*{QWO,5?uO$+WQWO,5?uOOQO1G1x1G1xO$+fQ#tO1G1wO$+vQWO'#IOO$,WQWO,5?vOIQQWO,5?vO$,`Q`O,5?vOOQ!LS1G1{1G1{O5lQ!LYO,5<fO5lQ!LYO,5<gO$,jQWO,5<gO#5nQWO,5<gO!-dQpO,5<fO$,oQWO,5<hO5lQ!LYO,5<iO$,jQWO,5<lOOQO-E;}-E;}OOQ!LS1G2P1G2PO!'iQ&jO,5<fO$,wQWO,5<gO!'iQ&jO,5<hO!'iQ&jO,5<gO$-SQ#tO1G4sO$-^Q#tO1G4sOOQO,5>l,5>lOOQO-E<O-E<OO!.dQ&jO,59iO){QYO,59iO$-kQWO1G1rOJaQWO1G1yO$-pQ!LdO7+'VOOQ!LS7+'V7+'VOGQQYO7+'VOOQ!LS7+%W7+%WO$.aQ`O'#J]O#IfQWO7+'zO$.kQWO7+'zO$.sQ`O7+'zOOQQ7+'z7+'zOIQQWO7+'zO){QYO7+'zOIQQWO7+'zOOQO1G.v1G.vO$.}Q!LbO'#CgO$/_Q!LbO,5<jO$/|QWO,5<jOOQ!LQ1G4o1G4oOOQQ7+$^7+$^O:aQWO7+$^O!-dQpO7+$^OGQQYO7+%xO$0RQWO'#IXO$0aQWO,5?}OOQO1G2|1G2|O5tQWO,5?}O$0aQWO,5?}O$0iQWO,5?}OOQO,5>t,5>tOOQO-E<W-E<WOOQ!LS7+&m7+&mO$0nQWO7+(gO5lQ!LYO7+(gO5tQWO7+(gO$0sQWO7+(gO$0xQWO7+'zOOQ!LQ,5>n,5>nOOQ!LQ-E<Q-E<QOOQQ7+(U7+(UO$1WQ!LbO7+(ROIQQWO7+(RO$1bQ`O7+(SOOQQ7+(S7+(SOIQQWO7+(SO$1iQWO'#J`O$1tQWO,5=QOOQO,5>p,5>pOOQO-E<S-E<SOOQQ7+(X7+(XO$2nQ&jO'#GoOOQQ1G2t1G2tOIQQWO1G2tO){QYO1G2tOIQQWO1G2tO$2uQWO1G2tO$3TQ#tO1G2tO5lQ!LYO1G2wO#5sQWO1G2wO5bQWO1G2wO!-dQpO1G2wO!-lQ#tO1G2wO$3fQWO'#IWO$3qQWO,5?{O$3yQ&jO,5?{OOQ!LQ1G2x1G2xOOQQ7+$T7+$TO$4OQWO7+$TO5lQ!LYO7+$TO$4TQWO7+$TO){QYO1G5jO){QYO1G5kO$4YQYO1G3PO$4aQWO1G3PO$4fQYO1G3PO$4mQ!LYO1G5jOOQQ7+(i7+(iO5lQ!LYO7+(sO`QYO7+(uOOQQ'#Jf'#JfOOQQ'#IZ'#IZO$4wQYO,5=tOOQQ,5=t,5=tO){QYO'#HZO$5UQWO'#H]OOQQ7+)O7+)OO$5ZQYO7+)OO7YQWO7+)OOOQQ7+)S7+)SOOQQ7+)W7+)WOOQQ7+)Y7+)YOOQO1G5O1G5OO$9XQ7^O1G0cO$9cQWO1G0cOOQO1G/e1G/eO$9nQ7^O1G/eO:aQWO1G/eOLUQYO'#D_OOQO,5>^,5>^OOQO-E;p-E;pOOQO,5>c,5>cOOQO-E;u-E;uO!-dQpO1G/eOOQO1G3|1G3|O:aQWO,5:eOOQO,5:k,5:kO){QYO,5:kO$9xQ!LYO,5:kO$:TQ!LYO,5:kO!-dQpO,5:eOOQO-E;s-E;sOOQ!LS1G0O1G0OO!@YQ&jO,5:eO$:cQ&jO,5:eO$:tQ!LrO,5:kO$;`Q&jO,5:eO!@YQ&jO,5:kOOQO,5:p,5:pO$;gQ&jO,5:kO$;tQ!LYO,5:kOOQ!LS7+%g7+%gO#IfQWO7+%gO#IkQ`O7+%gOOQ!LS7+%w7+%wO:aQWO7+%wO!-dQpO7+%wO$<YQ!LdO7+*pO){QYO7+*pOOQO1G4O1G4OO7YQWO1G4OO$<jQWO7+*oO$<rQ!LdO1G2YO$>tQ!LdO1G2[O$@vQ!LdO1G1wO$COQ#tO,5>_OOQO-E;q-E;qO$CYQbO,5>`O){QYO,5>`OOQO-E;r-E;rO$CdQWO1G5QO$ClQ7^O1G0^O$EsQ7^O1G0iO$EzQ7^O1G0iO$G{Q7^O1G0iO$HSQ7^O1G0iO$IwQ7^O1G0iO$J[Q7^O1G0iO$LiQ7^O1G0iO$LpQ7^O1G0iO$NqQ7^O1G0iO$NxQ7^O1G0iO%!mQ7^O1G0iO%#QQ!LdO<<JPO%#qQ7^O1G0iO%%aQ7^O'#InO%'^Q7^O1G0|OLUQYO'#F[OOQO'#JX'#JXOOQO1G1`1G1`O%'kQWO1G1_O%'pQ7^O,5>gOOOO7+'R7+'ROOOS1G4v1G4vOOQ!LS1G4T1G4TOJaQWO7+'xO%'zQWO,5>hO5tQWO,5>hOOQO-E;z-E;zO%(YQWO1G5aO%(YQWO1G5aO%(bQWO1G5aO%(mQ`O,5>jO%(wQWO,5>jOIQQWO,5>jOOQO-E;|-E;|O%(|Q`O1G5bO%)WQWO1G5bOOQO1G2Q1G2QOOQO1G2R1G2RO5lQ!LYO1G2RO$,jQWO1G2RO5lQ!LYO1G2QO%)`QWO1G2SOIQQWO1G2SOOQO1G2T1G2TO5lQ!LYO1G2WO!-dQpO1G2QO#5nQWO1G2RO%)eQWO1G2SO%)mQWO1G2ROJaQWO7+*_OOQ!LS1G/T1G/TO%)xQWO1G/TOOQ!LS7+'^7+'^O%)}Q#tO7+'eO%*_Q!LdO<<JqOOQ!LS<<Jq<<JqOIQQWO'#IRO%+OQWO,5?wOOQQ<<Kf<<KfOIQQWO<<KfO#IfQWO<<KfO%+WQWO<<KfO%+`Q`O<<KfOIQQWO1G2UOOQQ<<Gx<<GxO:aQWO<<GxO%+jQ!LdO<<IdOOQ!LS<<Id<<IdOOQO,5>s,5>sO%,ZQWO,5>sO#<oQWO,5>sOOQO-E<V-E<VO%,`QWO1G5iO%,`QWO1G5iO5tQWO1G5iO%,hQWO<<LROOQQ<<LR<<LRO%,mQWO<<LRO5lQ!LYO<<LRO){QYO<<KfOIQQWO<<KfOOQQ<<Km<<KmO$1WQ!LbO<<KmOOQQ<<Kn<<KnO$1bQ`O<<KnO%,rQ&jO'#ITO%,}QWO,5?zOLUQYO,5?zOOQQ1G2l1G2lO#GfQ!LrO'#EPO!@YQ&jO'#GpOOQO'#IV'#IVO%-VQ&jO,5=ZOOQQ,5=Z,5=ZO%-^Q&jO'#EPO%-iQ&jO'#EPO%.QQ&jO'#EPO%.[Q&jO'#GpO%.mQWO7+(`O%.rQWO7+(`O%.zQ`O7+(`OOQQ7+(`7+(`OIQQWO7+(`O){QYO7+(`OIQQWO7+(`O%/UQWO7+(`OOQQ7+(c7+(cO5lQ!LYO7+(cO#5sQWO7+(cO5bQWO7+(cO!-dQpO7+(cO%/dQWO,5>rOOQO-E<U-E<UOOQO'#Gs'#GsO%/oQWO1G5gO5lQ!LYO<<GoOOQQ<<Go<<GoO%/wQWO<<GoO%/|QWO7++UO%0RQWO7++VOOQQ7+(k7+(kO%0WQWO7+(kO%0]QYO7+(kO%0dQWO7+(kO){QYO7++UO){QYO7++VOOQQ<<L_<<L_OOQQ<<La<<LaOOQQ-E<X-E<XOOQQ1G3`1G3`O%0iQWO,5=uOOQQ,5=w,5=wO:aQWO<<LjO%0nQWO<<LjOLUQYO7+%}OOQO7+%P7+%PO%0sQ7^O1G5XO:aQWO7+%POOQO1G0P1G0PO%0}Q!LdO1G0VOOQO1G0V1G0VO){QYO1G0VO%1XQ!LYO1G0VO:aQWO1G0PO!-dQpO1G0PO!@YQ&jO1G0PO%1dQ!LYO1G0VO%1rQ&jO1G0PO%2TQ!LYO1G0VO%2iQ!LrO1G0VO%2sQ&jO1G0PO!@YQ&jO1G0VOOQ!LS<<IR<<IROOQ!LS<<Ic<<IcO:aQWO<<IcO%2zQ!LdO<<N[OOQO7+)j7+)jO%3[Q!LdO7+'eO%5dQbO1G3zO%5nQ7^O7+%xO%5{Q7^O,59gO%7xQ7^O,5<SO%9uQ7^O,5<UO%;rQ7^O,5<dO%=bQ7^O7+'UO%=oQ7^O7+'VO%=|QWO,5;vOOQO7+&y7+&yO%>RQ#tO<<KdOOQO1G4S1G4SO%>cQWO1G4SO%>nQWO1G4SO%>|QWO7+*{O%>|QWO7+*{OIQQWO1G4UO%?UQ`O1G4UO%?`QWO7+*|OOQO7+'m7+'mO5lQ!LYO7+'mOOQO7+'l7+'lO$,jQWO7+'nO%?hQ`O7+'nOOQO7+'r7+'rO5lQ!LYO7+'lO$,jQWO7+'mO%?oQWO7+'nOIQQWO7+'nO#5nQWO7+'mO%?tQ#tO<<MyOOQ!LS7+$o7+$oO%@OQ`O,5>mOOQO-E<P-E<PO#IfQWOANAQOOQQANAQANAQOIQQWOANAQO%@YQ!LbO7+'pOOQQAN=dAN=dO5tQWO1G4_OOQO1G4_1G4_O%@gQWO1G4_O%@lQWO7++TO%@lQWO7++TO5lQ!LYOANAmO%@tQWOANAmOOQQANAmANAmO%@yQWOANAQO%ARQ`OANAQOOQQANAXANAXOOQQANAYANAYO%A]QWO,5>oOOQO-E<R-E<RO%AhQ7^O1G5fO#5sQWO,5=[O5bQWO,5=[O!-dQpO,5=[OOQO-E<T-E<TOOQQ1G2u1G2uO$:tQ!LrO,5:kO!@YQ&jO,5=[O%ArQ&jO,5=[O%BTQ&jO,5:kOOQQ<<Kz<<KzOIQQWO<<KzO%.mQWO<<KzO%B_QWO<<KzO%BgQ`O<<KzO){QYO<<KzOIQQWO<<KzOOQQ<<K}<<K}O5lQ!LYO<<K}O#5sQWO<<K}O5bQWO<<K}O%BqQ&jO1G4^O%BvQWO7++ROOQQAN=ZAN=ZO5lQ!LYOAN=ZOOQQ<<Np<<NpOOQQ<<Nq<<NqOOQQ<<LV<<LVO%COQWO<<LVO%CTQYO<<LVO%C[QWO<<NpO%CaQWO<<NqOOQQ1G3a1G3aOOQQANBUANBUO:aQWOANBUO%CfQ7^O<<IiOOQO<<Hk<<HkOOQO7+%q7+%qO%0}Q!LdO7+%qO){QYO7+%qOOQO7+%k7+%kO:aQWO7+%kO!-dQpO7+%kO%CpQ!LYO7+%qO!@YQ&jO7+%kO%C{Q!LYO7+%qO%DZQ&jO7+%kO%DlQ!LYO7+%qOOQ!LSAN>}AN>}O%EQQ!LdO<<KdO%GYQ7^O<<JPO%GgQ7^O1G1wO%IVQ7^O1G2YO%KSQ7^O1G2[O%MPQ7^O<<JqO%M^Q7^O<<IdOOQO1G1b1G1bOOQO7+)n7+)nO%MkQWO7+)nO%MvQWO<<NgO%NOQ`O7+)pOOQO<<KX<<KXO5lQ!LYO<<KYO$,jQWO<<KYOOQO<<KW<<KWO5lQ!LYO<<KXO%NYQ`O<<KYO$,jQWO<<KXOOQQG26lG26lO#IfQWOG26lOOQO7+)y7+)yO5tQWO7+)yO%NaQWO<<NoOOQQG27XG27XO5lQ!LYOG27XOIQQWOG26lOLUQYO1G4ZO%NiQWO7++QO5lQ!LYO1G2vO#5sQWO1G2vO5bQWO1G2vO!-dQpO1G2vO!@YQ&jO1G2vO%2iQ!LrO1G0VO%NqQ&jO1G2vO%.mQWOANAfOOQQANAfANAfOIQQWOANAfO& SQWOANAfO& [Q`OANAfOOQQANAiANAiO5lQ!LYOANAiO#5sQWOANAiOOQO'#Gt'#GtOOQO7+)x7+)xOOQQG22uG22uOOQQANAqANAqO& fQWOANAqOOQQAND[AND[OOQQAND]AND]O& kQYOG27pOOQO<<I]<<I]O%0}Q!LdO<<I]OOQO<<IV<<IVO:aQWO<<IVO){QYO<<I]O!-dQpO<<IVO&%iQ!LYO<<I]O!@YQ&jO<<IVO&%tQ!LYO<<I]O&&SQ7^O7+'eOOQO<<MY<<MYOOQOAN@tAN@tO5lQ!LYOAN@tOOQOAN@sAN@sO$,jQWOAN@tO5lQ!LYOAN@sOOQQLD,WLD,WOOQO<<Me<<MeOOQQLD,sLD,sO#IfQWOLD,WO&'rQ7^O7+)uOOQO7+(b7+(bO5lQ!LYO7+(bO#5sQWO7+(bO5bQWO7+(bO!-dQpO7+(bO!@YQ&jO7+(bOOQQG27QG27QO%.mQWOG27QOIQQWOG27QOOQQG27TG27TO5lQ!LYOG27TOOQQG27]G27]O:aQWOLD-[OOQOAN>wAN>wOOQOAN>qAN>qO%0}Q!LdOAN>wO:aQWOAN>qO){QYOAN>wO!-dQpOAN>qO&'|Q!LYOAN>wO&(XQ7^O<<KdOOQOG26`G26`O5lQ!LYOG26`OOQOG26_G26_OOQQ!$( r!$( rOOQO<<K|<<K|O5lQ!LYO<<K|O#5sQWO<<K|O5bQWO<<K|O!-dQpO<<K|OOQQLD,lLD,lO%.mQWOLD,lOOQQLD,oLD,oOOQQ!$(!v!$(!vOOQOG24cG24cOOQOG24]G24]O%0}Q!LdOG24cO:aQWOG24]O){QYOG24cOOQOLD+zLD+zOOQOANAhANAhO5lQ!LYOANAhO#5sQWOANAhO5bQWOANAhOOQQ!$(!W!$(!WOOQOLD)}LD)}OOQOLD)wLD)wO%0}Q!LdOLD)}OOQOG27SG27SO5lQ!LYOG27SO#5sQWOG27SOOQO!$'Mi!$'MiOOQOLD,nLD,nO5lQ!LYOLD,nOOQO!$(!Y!$(!YOLUQYO'#DnO&)wQbO'#IsOLUQYO'#DfO&*OQ!LdO'#CgO&*iQbO'#CgO&*yQYO,5:rOLUQYO,5:}OLUQYO,5:}OLUQYO,5:}OLUQYO,5:}OLUQYO,5:}OLUQYO,5:}OLUQYO,5:}OLUQYO,5:}OLUQYO,5:}OLUQYO,5:}OLUQYO,5:}OLUQYO'#H{O&,yQWO,5<RO&.]QWO,5:}OLUQYO,5;bO!)RQWO'#C{O!)RQWO'#C{OIQQWO'#FhO&-RQWO'#FhOIQQWO'#FjO&-RQWO'#FjOIQQWO'#FxO&-RQWO'#FxOLUQYO,5?mO&*yQYO1G0^O&.dQ7^O'#CgOLUQYO1G1jOIQQWO,5<nO&-RQWO,5<nOIQQWO,5<pO&-RQWO,5<pOIQQWO,5<]O&-RQWO,5<]O&*yQYO1G1kOLUQYO7+&eOIQQWO1G1yO&-RQWO1G1yO&*yQYO7+'VO&*yQYO7+%xOIQQWO7+'xO&-RQWO7+'xO&.nQWO'#EWO&.sQWO'#EWO&.{QWO'#EvO&/QQWO'#EcO&/VQWO'#JRO&/bQWO'#JPO&/mQWO,5:rO&/rQ#tO,5<OO&/yQWO'#FqO&0OQWO'#FqO&0TQWO,5<PO&0]QWO,5:rO&0eQ7^O1G0yO&0lQWO,5<_O&0qQWO,5<_O&0vQWO1G1kO&0{QWO1G0^O&1QQ#tO1G2^O&1XQ#tO1G2^O4TQWO'#FfO5bQWO'#FeOBtQWO'#EVOLUQYO,5;_O!)bQWO'#FsO!)bQWO'#FsOJaQWO,5<rOJaQWO,5<r",
++  stateData: "&2W~O'VOS'WOSSOSTOS~OPTOQTOWyO]cO^hOanObmOgcOiTOjcOkcOnTOpTOuROwcOxcOycO!PSO!ZkO!`UO!cTO!dTO!eTO!fTO!gTO!jlO#`sO#ppO#t^O$}qO%PtO%RrO%SrO%VuO%XvO%[wO%]wO%_xO%lzO%r{O%t|O%v}O%x!OO%{!PO&R!QO&V!RO&X!SO&Z!TO&]!UO&_!VO'YPO'cQO'oYO'|aO~OPZXYZX^ZXiZXrZXsZXuZX}ZX!]ZX!^ZX!`ZX!fZX!wZX#ScX#WZX#XZX#YZX#ZZX#[ZX#]ZX#^ZX#_ZX#aZX#cZX#eZX#fZX#kZX'TZX'cZX'pZX'wZX'xZX~O!X$jX~P$zO'Q!XO'R!WO'S!ZO~OPTOQTO]cOa!jOb!iOgcOiTOjcOkcOnTOpTOuROwcOxcOycO!P!bO!ZkO!`UO!cTO!dTO!eTO!fTO!gTO!j!hO#p!kO#t^O'Y![O'cQO'oYO'|aO~O|!`O}!]Oz'jPz'tP~P'dO!O!lO~P`OPTOQTO]cOa!jOb!iOgcOiTOjcOkcOnTOpTOuROwcOxcOycO!P!bO!ZkO!`UO!cTO!dTO!eTO!fTO!gTO!j!hO#p!kO#t^O'Y9XO'cQO'oYO'|aO~OPTOQTO]cOa!jOb!iOgcOiTOjcOkcOnTOpTOuROwcOxcOycO!P!bO!ZkO!`UO!cTO!dTO!eTO!fTO!gTO!j!hO#p!kO#t^O'cQO'oYO'|aO~O|!qO#Q!tO#R!qO'Y9YO!_'qP~P+{O#S!uO~O!X!vO#S!uO~OP#]OY#cOi#QOr!zOs!zOu!{O}#aO!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO#c#VO#e#XO#f#YO'cQO'p#ZO'w!|O'x!}O~O^'gX'T'gX!_'gXz'gX!P'gX%O'gX!X'gX~P.jO!w#dO#k#dOP'hXY'hX^'hXi'hXr'hXs'hXu'hX}'hX!]'hX!^'hX!`'hX!f'hX#W'hX#X'hX#Y'hX#Z'hX#['hX#]'hX#^'hX#a'hX#c'hX#e'hX#f'hX'c'hX'p'hX'w'hX'x'hX~O#_'hX'T'hXz'hX!_'hX'e'hX!P'hX%O'hX!X'hX~P0zO!w#dO~O#v#fO#x#eO$P#kO~O!P#lO#t^O$S#mO$U#oO~O]#rOg$POi#sOj#rOk#rOn$QOp$ROu#yO!P#zO!Z$WO!`#wO#R$XO#p$UO$]$SO$_$TO$b$VO'Y#qO'c#tO'^'`P~O!`$YO~O!X$[O~O^$]O'T$]O~O'Y$aO~O!`$YO'Y$aO'Z$cO'_$dO~Ob$jO!`$YO'Y$aO~O#_#SO~O]$sOr$oO!P$lO!`$nO%P$rO'Y$aO'Z$cO[(UP~O!j$tO~Ou$uO!P$vO'Y$aO~Ou$uO!P$vO%X$zO'Y$aO~O'Y${O~O#`sO%PtO%RrO%SrO%VuO%XvO%[wO%]wO~Oa%UOb%TO!j%RO$}%SO%a%QO~P7xOa%XObmO!P%WO!jlO#`sO$}qO%RrO%SrO%VuO%XvO%[wO%]wO%_xO~O_%[O!w%_O%P%YO'Z$cO~P8wO!`%`O!c%dO~O!`%eO~O!PSO~O^$]O'P%mO'T$]O~O^$]O'P%pO'T$]O~O^$]O'P%rO'T$]O~O'Q!XO'R!WO'S%vO~OPZXYZXiZXrZXsZXuZX}ZX}cX!]ZX!^ZX!`ZX!fZX!wZX!wcX#ScX#WZX#XZX#YZX#ZZX#[ZX#]ZX#^ZX#_ZX#aZX#cZX#eZX#fZX#kZX'cZX'pZX'wZX'xZX~OzZXzcX~P;dO|%xOz&eX}&eX~P){O}!]Oz'jX~OP#]OY#cOi#QOr!zOs!zOu!{O}!]O!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO#c#VO#e#XO#f#YO'cQO'p#ZO'w!|O'x!}O~Oz'jX~P>ZOz%}O~Ou&QO!S&[O!T&TO!U&TO'Z$cO~O]&ROj&RO|&UO'f&OO!O'kP!O'vP~P@^Oz'sX}'sX!X'sX!_'sX'p'sX~O!w'sX#S!{X!O'sX~PAVO!w&]Oz'uX}'uX~O}&^Oz'tX~Oz&`O~O!w#dO~PAVOR&dO!P&aO!k&cO'Y$aO~Ob&iO!`$YO'Y$aO~Or$oO!`$nO~O!O&jO~P`Or!zOs!zOu!{O!^!xO!`!yO'cQOP!baY!bai!ba}!ba!]!ba!f!ba#W!ba#X!ba#Y!ba#Z!ba#[!ba#]!ba#^!ba#_!ba#a!ba#c!ba#e!ba#f!ba'p!ba'w!ba'x!ba~O^!ba'T!baz!ba!_!ba'e!ba!P!ba%O!ba!X!ba~PC`O!_&kO~O!X!vO!w&mO'p&lO}'rX^'rX'T'rX~O!_'rX~PExO}&qO!_'qX~O!_&sO~Ou$uO!P$vO#R&tO'Y$aO~OPTOQTO]cOa!jOb!iOgcOiTOjcOkcOnTOpTOuROwcOxcOycO!PSO!ZkO!`UO!cTO!dTO!eTO!fTO!gTO!j!hO#p!kO#t^O'Y9XO'cQO'oYO'|aO~O]#rOg$POi#sOj#rOk#rOn$QOp9kOu#yO!P#zO!Z:nO!`#wO#R9qO#p$UO$]9mO$_9oO$b$VO'Y&xO'c#tO~O#S&zO~O]#rOg$POi#sOj#rOk#rOn$QOp$ROu#yO!P#zO!Z$WO!`#wO#R$XO#p$UO$]$SO$_$TO$b$VO'Y&xO'c#tO~O'^'mP~PJaO|'OO!_'nP~P){O'f'QO'oYO~OP9UOQ9UO]cOa:lOb!iOgcOi9UOjcOkcOn9UOp9UOuROwcOxcOycO!P!bO!Z9WO!`UO!c9UO!d9UO!e9UO!f9UO!g9UO!j!hO#p!kO#t^O'Y'`O'cQO'oYO'|:jO~O!`!yO~O}#aO^$Za'T$Za!_$Zaz$Za!P$Za%O$Za!X$Za~O#`'gO~PIQOr'jO!X'iO!P#wX#s#wX#v#wX#x#wX$P#wX~O!X'iO!P'yX#s'yX#v'yX#x'yX$P'yX~Or'jO~P! eOr'jO!P'yX#s'yX#v'yX#x'yX$P'yX~O!P'lO#s'pO#v'kO#x'kO$P'qO~O|'tO~PLUO#v#fO#x#eO$P'wO~Or$cXu$cX!^$cX'p$cX'w$cX'x$cX~OReX}eX!weX'^eX'^$cX~P!#ZOj'yO~O'Q'{O'R'zO'S'}O~Or(POu(QO'p#ZO'w(SO'x(UO~O'^(OO~P!$dO'^(XO~O]#rOg$POi#sOj#rOk#rOn$QOp9kOu#yO!P#zO!Z:nO!`#wO#R9qO#p$UO$]9mO$_9oO$b$VO'c#tO~O|(]O'Y(YO!_'}P~P!%RO#S(_O~O|(cO'Y(`Oz(OP~P!%RO^(lOi(qOu(iO!S(oO!T(hO!U(hO!`(fO!t(pO$u(kO'Z$cO'f(eO~O!O(nO~P!&yO!^!xOr'bXu'bX'p'bX'w'bX'x'bX}'bX!w'bX~O'^'bX#i'bX~P!'uOR(tO!w(sO}'aX'^'aX~O}(uO'^'`X~O'Y(wO~O!`(|O~O'Y&xO~O!`(fO~Ou$uO|!qO!P$vO#Q!tO#R!qO'Y$aO!_'qP~O!X!vO#S)QO~OP#]OY#cOi#QOr!zOs!zOu!{O!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO#c#VO#e#XO#f#YO'cQO'p#ZO'w!|O'x!}O~O^!Ya}!Ya'T!Yaz!Ya!_!Ya'e!Ya!P!Ya%O!Ya!X!Ya~P!*WOR)YO!P&aO!k)XO%O)WO'_$dO~O'Y${O'^'`P~O!X)]O!P']X^']X'T']X~O!`$YO'_$dO~O!`$YO'Y$aO'_$dO~O!X!vO#S&zO~O%P)iO'Y)eO!O(VP~O})jO[(UX~O'f'QO~OY)nO~O[)oO~O!P$lO'Y$aO'Z$cO[(UP~Ou$uO|)tO!P$vO'Y$aOz'tP~O]&XOj&XO|)uO'f'QO!O'vP~O})vO^(RX'T(RX~O!w)zO'_$dO~OR)}O!P#zO'_$dO~O!P*PO~Or*RO!PSO~O!j*WO~Ob*]O~O'Y(wO!O(TP~Ob$jO~O%PtO'Y${O~P8wOY*cO[*bO~OPTOQTO]cOanObmOgcOiTOjcOkcOnTOpTOuROwcOxcOycO!ZkO!`UO!cTO!dTO!eTO!fTO!gTO!jlO#t^O$}qO'cQO'oYO'|aO~O!P!bO#p!kO'Y9XO~P!1mO[*bO^$]O'T$]O~O^*gO#`*iO%R*iO%S*iO~P){O!`%`O~O%r*nO~O!P*pO~O&S*sO&T*rOP&QaQ&QaW&Qa]&Qa^&Qaa&Qab&Qag&Qai&Qaj&Qak&Qan&Qap&Qau&Qaw&Qax&Qay&Qa!P&Qa!Z&Qa!`&Qa!c&Qa!d&Qa!e&Qa!f&Qa!g&Qa!j&Qa#`&Qa#p&Qa#t&Qa$}&Qa%P&Qa%R&Qa%S&Qa%V&Qa%X&Qa%[&Qa%]&Qa%_&Qa%l&Qa%r&Qa%t&Qa%v&Qa%x&Qa%{&Qa&R&Qa&V&Qa&X&Qa&Z&Qa&]&Qa&_&Qa'O&Qa'Y&Qa'c&Qa'o&Qa'|&Qa!O&Qa%y&Qa_&Qa&O&Qa~O'Y*vO~O'e*yO~Oz&ea}&ea~P!*WO}!]Oz'ja~Oz'ja~P>ZO}&^Oz'ta~O}tX}!VX!OtX!O!VX!XtX!X!VX!`!VX!wtX'_!VX~O!X+QO!w+PO}#PX}'lX!O#PX!O'lX!X'lX!`'lX'_'lX~O!X+SO!`$YO'_$dO}!RX!O!RX~O]&POj&POu&QO'f(eO~OP9UOQ9UO]cOa:lOb!iOgcOi9UOjcOkcOn9UOp9UOuROwcOxcOycO!P!bO!Z9WO!`UO!c9UO!d9UO!e9UO!f9UO!g9UO!j!hO#p!kO#t^O'cQO'oYO'|:jO~O'Y9uO~P!;kO}+WO!O'kX~O!O+YO~O!X+QO!w+PO}#PX!O#PX~O}+ZO!O'vX~O!O+]O~O]&POj&POu&QO'Z$cO'f(eO~O!T+^O!U+^O~P!>iOu$uO|+aO!P$vO'Y$aOz&jX}&jX~O^+fO!S+iO!T+eO!U+eO!n+mO!o+kO!p+lO!q+jO!t+nO'Z$cO'f(eO'o+cO~O!O+hO~P!?jOR+sO!P&aO!k+rO~O!w+yO}'ra!_'ra^'ra'T'ra~O!X!vO~P!@tO}&qO!_'qa~Ou$uO|+|O!P$vO#Q,OO#R+|O'Y$aO}&lX!_&lX~O^!zi}!zi'T!ziz!zi!_!zi'e!zi!P!zi%O!zi!X!zi~P!*WO#S!va}!va!_!va!w!va!P!va^!va'T!vaz!va~P!$dO#S'bXP'bXY'bX^'bXi'bXs'bX!]'bX!`'bX!f'bX#W'bX#X'bX#Y'bX#Z'bX#['bX#]'bX#^'bX#_'bX#a'bX#c'bX#e'bX#f'bX'T'bX'c'bX!_'bXz'bX!P'bX'e'bX%O'bX!X'bX~P!'uO},XO'^'mX~P!$dO'^,ZO~O},[O!_'nX~P!*WO!_,_O~Oz,`O~OP#]Or!zOs!zOu!{O!^!xO!`!yO!f#]O'cQOY#Vi^#Vii#Vi}#Vi!]#Vi#X#Vi#Y#Vi#Z#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi'T#Vi'p#Vi'w#Vi'x#Viz#Vi!_#Vi'e#Vi!P#Vi%O#Vi!X#Vi~O#W#Vi~P!FRO#W#OO~P!FROP#]Or!zOs!zOu!{O!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO'cQOY#Vi^#Vi}#Vi!]#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi'T#Vi'p#Vi'w#Vi'x#Viz#Vi!_#Vi'e#Vi!P#Vi%O#Vi!X#Vi~Oi#Vi~P!HmOi#QO~P!HmOP#]Oi#QOr!zOs!zOu!{O!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO'cQO^#Vi}#Vi#a#Vi#c#Vi#e#Vi#f#Vi'T#Vi'p#Vi'w#Vi'x#Viz#Vi!_#Vi'e#Vi!P#Vi%O#Vi!X#Vi~OY#Vi!]#Vi#]#Vi#^#Vi#_#Vi~P!KXOY#cO!]#SO#]#SO#^#SO#_#SO~P!KXOP#]OY#cOi#QOr!zOs!zOu!{O!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO'cQO^#Vi}#Vi#c#Vi#e#Vi#f#Vi'T#Vi'p#Vi'x#Viz#Vi!_#Vi'e#Vi!P#Vi%O#Vi!X#Vi~O'w#Vi~P!NPO'w!|O~P!NPOP#]OY#cOi#QOr!zOs!zOu!{O!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO#c#VO'cQO'w!|O^#Vi}#Vi#e#Vi#f#Vi'T#Vi'p#Viz#Vi!_#Vi'e#Vi!P#Vi%O#Vi!X#Vi~O'x#Vi~P#!kO'x!}O~P#!kOP#]OY#cOi#QOr!zOs!zOu!{O!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO#c#VO#e#XO'cQO'w!|O'x!}O~O^#Vi}#Vi#f#Vi'T#Vi'p#Viz#Vi!_#Vi'e#Vi!P#Vi%O#Vi!X#Vi~P#%VOPZXYZXiZXrZXsZXuZX!]ZX!^ZX!`ZX!fZX!wZX#ScX#WZX#XZX#YZX#ZZX#[ZX#]ZX#^ZX#_ZX#aZX#cZX#eZX#fZX#kZX'cZX'pZX'wZX'xZX}ZX!OZX~O#iZX~P#'jOP#]OY9iOi9^Or!zOs!zOu!{O!]9`O!^!xO!`!yO!f#]O#W9[O#X9]O#Y9]O#Z9]O#[9_O#]9`O#^9`O#_9`O#a9aO#c9cO#e9eO#f9fO'cQO'p#ZO'w!|O'x!}O~O#i,bO~P#)tOP'hXY'hXi'hXr'hXs'hXu'hX!]'hX!^'hX!`'hX!f'hX#W'hX#X'hX#Y'hX#Z'hX#['hX#]'hX#^'hX#a'hX#c'hX#e'hX#f'hX'c'hX'p'hX'w'hX'x'hX}'hX~O!w9jO#k9jO#_'hX#i'hX!O'hX~P#+oO^&oa}&oa'T&oa!_&oa'e&oaz&oa!P&oa%O&oa!X&oa~P!*WOP#ViY#Vi^#Vii#Vis#Vi}#Vi!]#Vi!^#Vi!`#Vi!f#Vi#W#Vi#X#Vi#Y#Vi#Z#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi'T#Vi'c#Viz#Vi!_#Vi'e#Vi!P#Vi%O#Vi!X#Vi~P!$dO^#ji}#ji'T#jiz#ji!_#ji'e#ji!P#ji%O#ji!X#ji~P!*WO#v,dO#x,dO~O#v,eO#x,eO~O!X'iO!w,fO!P#|X#s#|X#v#|X#x#|X$P#|X~O|,gO~O!P'lO#s,iO#v'kO#x'kO$P,jO~O}9gO!O'gX~P#)tO!O,kO~O$P,mO~O'Q'{O'R'zO'S,pO~O],sOj,sOz,tO~O}cX!XcX!_cX!_$cX'pcX~P!#ZO!_,zO~P!$dO},{O!X!vO'p&lO!_'}X~O!_-QO~Oz$cX}$cX!X$jX~P!#ZO}-SOz(OX~P!$dO!X-UO~Oz-WO~O|(]O'Y$aO!_'}P~Oi-[O!X!vO!`$YO'_$dO'p&lO~O!X)]O~O!O-bO~P!&yO!T-cO!U-cO'Z$cO'f(eO~Ou-eO'f(eO~O!t-fO~O'Y${O}&tX'^&tX~O}(uO'^'`a~Or-kOs-kOu-lO'poa'woa'xoa}oa!woa~O'^oa#ioa~P#7POr(POu(QO'p$[a'w$[a'x$[a}$[a!w$[a~O'^$[a#i$[a~P#7uOr(POu(QO'p$^a'w$^a'x$^a}$^a!w$^a~O'^$^a#i$^a~P#8hO]-mO~O#S-nO~O'^$la}$la#i$la!w$la~P!$dO#S-qO~OR-zO!P&aO!k-yO%O-xO~O'^-{O~O]#rOi#sOj#rOk#rOn$QOp9kOu#yO!P#zO!Z:nO!`#wO#R9qO#p$UO$]9mO$_9oO$b$VO'c#tO~Og-}O'Y-|O~P#:_O!X)]O!P']a^']a'T']a~O#S.TO~OYZX}cX!OcX~O}.UO!O(VX~O!O.WO~OY.XO~O'Y)eO~O!P$lO'Y$aO[&|X}&|X~O})jO[(Ua~O!_.^O~P!*WO].`O~OY.aO~O[.bO~OR-zO!P&aO!k-yO%O-xO'_$dO~O})vO^(Ra'T(Ra~O!w.hO~OR.kO!P#zO~O'f'QO!O(SP~OR.uO!P.qO!k.tO%O.sO'_$dO~OY/PO}.}O!O(TX~O!O/QO~O[/SO^$]O'T$]O~O]/TO~O#_/VO%p/WO~P0zO!w#dO#_/VO%p/WO~O^/XO~P){O^/ZO~O%y/_OP%wiQ%wiW%wi]%wi^%wia%wib%wig%wii%wij%wik%win%wip%wiu%wiw%wix%wiy%wi!P%wi!Z%wi!`%wi!c%wi!d%wi!e%wi!f%wi!g%wi!j%wi#`%wi#p%wi#t%wi$}%wi%P%wi%R%wi%S%wi%V%wi%X%wi%[%wi%]%wi%_%wi%l%wi%r%wi%t%wi%v%wi%x%wi%{%wi&R%wi&V%wi&X%wi&Z%wi&]%wi&_%wi'O%wi'Y%wi'c%wi'o%wi'|%wi!O%wi_%wi&O%wi~O_/eO!O/cO&O/dO~P`O!PSO!`/hO~O}#aO'e$Za~Oz&ei}&ei~P!*WO}!]Oz'ji~O}&^Oz'ti~Oz/lO~O}!Ra!O!Ra~P#)tO]&POj&PO|/rO'f(eO}&fX!O&fX~P@^O}+WO!O'ka~O]&XOj&XO|)uO'f'QO}&kX!O&kX~O}+ZO!O'va~Oz'ui}'ui~P!*WO^$]O!X!vO!`$YO!f/}O!w/{O'T$]O'_$dO'p&lO~O!O0QO~P!?jO!T0RO!U0RO'Z$cO'f(eO'o+cO~O!S0SO~P#HXO!PSO!S0SO!q0UO!t0VO~P#HXO!S0SO!o0XO!p0XO!q0UO!t0VO~P#HXO!P&aO~O!P&aO~P!$dO}'ri!_'ri^'ri'T'ri~P!*WO!w0bO}'ri!_'ri^'ri'T'ri~O}&qO!_'qi~Ou$uO!P$vO#R0dO'Y$aO~O#SoaPoaYoa^oaioa!]oa!^oa!`oa!foa#Woa#Xoa#Yoa#Zoa#[oa#]oa#^oa#_oa#aoa#coa#eoa#foa'Toa'coa!_oazoa!Poa'eoa%Ooa!Xoa~P#7PO#S$[aP$[aY$[a^$[ai$[as$[a!]$[a!^$[a!`$[a!f$[a#W$[a#X$[a#Y$[a#Z$[a#[$[a#]$[a#^$[a#_$[a#a$[a#c$[a#e$[a#f$[a'T$[a'c$[a!_$[az$[a!P$[a'e$[a%O$[a!X$[a~P#7uO#S$^aP$^aY$^a^$^ai$^as$^a!]$^a!^$^a!`$^a!f$^a#W$^a#X$^a#Y$^a#Z$^a#[$^a#]$^a#^$^a#_$^a#a$^a#c$^a#e$^a#f$^a'T$^a'c$^a!_$^az$^a!P$^a'e$^a%O$^a!X$^a~P#8hO#S$laP$laY$la^$lai$las$la}$la!]$la!^$la!`$la!f$la#W$la#X$la#Y$la#Z$la#[$la#]$la#^$la#_$la#a$la#c$la#e$la#f$la'T$la'c$la!_$laz$la!P$la!w$la'e$la%O$la!X$la~P!$dO^!zq}!zq'T!zqz!zq!_!zq'e!zq!P!zq%O!zq!X!zq~P!*WO}&gX'^&gX~PJaO},XO'^'ma~O|0lO}&hX!_&hX~P){O},[O!_'na~O},[O!_'na~P!*WO#i!ba!O!ba~PC`O#i!Ya}!Ya!O!Ya~P#)tO!P1PO#t^O#}1QO~O!O1UO~O'e1VO~P!$dO^$Wq}$Wq'T$Wqz$Wq!_$Wq'e$Wq!P$Wq%O$Wq!X$Wq~P!*WOz1WO~O],sOj,sO~Or(POu(QO'x(UO'p$vi'w$vi}$vi!w$vi~O'^$vi#i$vi~P$(xOr(POu(QO'p$xi'w$xi'x$xi}$xi!w$xi~O'^$xi#i$xi~P$)kO#i1XO~P!$dO|1ZO'Y$aO}&pX!_&pX~O},{O!_'}a~O},{O!X!vO!_'}a~O},{O!X!vO'p&lO!_'}a~O'^$ei}$ei#i$ei!w$ei~P!$dO|1bO'Y(`Oz&rX}&rX~P!%RO}-SOz(Oa~O}-SOz(Oa~P!$dO!X!vO~O!X!vO#_1lO~Oi1pO!X!vO'p&lO~O}'ai'^'ai~P!$dO!w1sO}'ai'^'ai~P!$dO!_1vO~O^$Xq}$Xq'T$Xqz$Xq!_$Xq'e$Xq!P$Xq%O$Xq!X$Xq~P!*WO}1zO!P(PX~P!$dO!P&aO%O1}O~O!P&aO%O1}O~P!$dO!P$cX$sZX^$cX'T$cX~P!#ZO$s2ROrfXufX!PfX'pfX'wfX'xfX^fX'TfX~O$s2RO~O%P2YO'Y)eO}&{X!O&{X~O}.UO!O(Va~OY2^O~O[2_O~O]2bO~OR2dO!P&aO!k2cO%O1}O~O^$]O'T$]O~P!$dO!P#zO~P!$dO}2iO!w2kO!O(SX~O!O2lO~Ou(iO!S2uO!T2nO!U2nO!n2tO!o2sO!p2sO!t2rO'Z$cO'f(eO'o+cO~O!O2qO~P$1yOR2|O!P.qO!k2{O%O2zO~OR2|O!P.qO!k2{O%O2zO'_$dO~O'Y(wO}&zX!O&zX~O}.}O!O(Ta~O'f3VO~O]3XO~O[3ZO~O!_3^O~P){O^3`O~O^3`O~P){O#_3bO%p3cO~PExO_/eO!O3gO&O/dO~P`O!X3iO~O&T3jOP&QqQ&QqW&Qq]&Qq^&Qqa&Qqb&Qqg&Qqi&Qqj&Qqk&Qqn&Qqp&Qqu&Qqw&Qqx&Qqy&Qq!P&Qq!Z&Qq!`&Qq!c&Qq!d&Qq!e&Qq!f&Qq!g&Qq!j&Qq#`&Qq#p&Qq#t&Qq$}&Qq%P&Qq%R&Qq%S&Qq%V&Qq%X&Qq%[&Qq%]&Qq%_&Qq%l&Qq%r&Qq%t&Qq%v&Qq%x&Qq%{&Qq&R&Qq&V&Qq&X&Qq&Z&Qq&]&Qq&_&Qq'O&Qq'Y&Qq'c&Qq'o&Qq'|&Qq!O&Qq%y&Qq_&Qq&O&Qq~O}#Pi!O#Pi~P#)tO!w3lO}#Pi!O#Pi~O}!Ri!O!Ri~P#)tO^$]O!w3sO'T$]O~O^$]O!X!vO!w3sO'T$]O~O!T3wO!U3wO'Z$cO'f(eO'o+cO~O^$]O!X!vO!`$YO!f3xO!w3sO'T$]O'_$dO'p&lO~O!S3yO~P$:cO!S3yO!q3|O!t3}O~P$:cO^$]O!X!vO!f3xO!w3sO'T$]O'p&lO~O}'rq!_'rq^'rq'T'rq~P!*WO}&qO!_'qq~O#S$viP$viY$vi^$vii$vis$vi!]$vi!^$vi!`$vi!f$vi#W$vi#X$vi#Y$vi#Z$vi#[$vi#]$vi#^$vi#_$vi#a$vi#c$vi#e$vi#f$vi'T$vi'c$vi!_$viz$vi!P$vi'e$vi%O$vi!X$vi~P$(xO#S$xiP$xiY$xi^$xii$xis$xi!]$xi!^$xi!`$xi!f$xi#W$xi#X$xi#Y$xi#Z$xi#[$xi#]$xi#^$xi#_$xi#a$xi#c$xi#e$xi#f$xi'T$xi'c$xi!_$xiz$xi!P$xi'e$xi%O$xi!X$xi~P$)kO#S$eiP$eiY$ei^$eii$eis$ei}$ei!]$ei!^$ei!`$ei!f$ei#W$ei#X$ei#Y$ei#Z$ei#[$ei#]$ei#^$ei#_$ei#a$ei#c$ei#e$ei#f$ei'T$ei'c$ei!_$eiz$ei!P$ei!w$ei'e$ei%O$ei!X$ei~P!$dO}&ga'^&ga~P!$dO}&ha!_&ha~P!*WO},[O!_'ni~O#i!zi}!zi!O!zi~P#)tOP#]Or!zOs!zOu!{O!^!xO!`!yO!f#]O'cQOY#Vii#Vi!]#Vi#X#Vi#Y#Vi#Z#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi#i#Vi'p#Vi'w#Vi'x#Vi}#Vi!O#Vi~O#W#Vi~P$CyO#W9[O~P$CyOP#]Or!zOs!zOu!{O!^!xO!`!yO!f#]O#W9[O#X9]O#Y9]O#Z9]O'cQOY#Vi!]#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi#i#Vi'p#Vi'w#Vi'x#Vi}#Vi!O#Vi~Oi#Vi~P$FROi9^O~P$FROP#]Oi9^Or!zOs!zOu!{O!^!xO!`!yO!f#]O#W9[O#X9]O#Y9]O#Z9]O#[9_O'cQO#a#Vi#c#Vi#e#Vi#f#Vi#i#Vi'p#Vi'w#Vi'x#Vi}#Vi!O#Vi~OY#Vi!]#Vi#]#Vi#^#Vi#_#Vi~P$HZOY9iO!]9`O#]9`O#^9`O#_9`O~P$HZOP#]OY9iOi9^Or!zOs!zOu!{O!]9`O!^!xO!`!yO!f#]O#W9[O#X9]O#Y9]O#Z9]O#[9_O#]9`O#^9`O#_9`O#a9aO'cQO#c#Vi#e#Vi#f#Vi#i#Vi'p#Vi'x#Vi}#Vi!O#Vi~O'w#Vi~P$JoO'w!|O~P$JoOP#]OY9iOi9^Or!zOs!zOu!{O!]9`O!^!xO!`!yO!f#]O#W9[O#X9]O#Y9]O#Z9]O#[9_O#]9`O#^9`O#_9`O#a9aO#c9cO'cQO'w!|O#e#Vi#f#Vi#i#Vi'p#Vi}#Vi!O#Vi~O'x#Vi~P$LwO'x!}O~P$LwOP#]OY9iOi9^Or!zOs!zOu!{O!]9`O!^!xO!`!yO!f#]O#W9[O#X9]O#Y9]O#Z9]O#[9_O#]9`O#^9`O#_9`O#a9aO#c9cO#e9eO'cQO'w!|O'x!}O~O#f#Vi#i#Vi'p#Vi}#Vi!O#Vi~P% PO^#gy}#gy'T#gyz#gy!_#gy'e#gy!P#gy%O#gy!X#gy~P!*WOP#ViY#Vii#Vis#Vi!]#Vi!^#Vi!`#Vi!f#Vi#W#Vi#X#Vi#Y#Vi#Z#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi#i#Vi'c#Vi}#Vi!O#Vi~P!$dO!^!xOP'bXY'bXi'bXr'bXs'bXu'bX!]'bX!`'bX!f'bX#W'bX#X'bX#Y'bX#Z'bX#['bX#]'bX#^'bX#_'bX#a'bX#c'bX#e'bX#f'bX#i'bX'c'bX'p'bX'w'bX'x'bX}'bX!O'bX~O#i#ji}#ji!O#ji~P#)tO!O4_O~O}&oa!O&oa~P#)tO!X!vO'p&lO}&pa!_&pa~O},{O!_'}i~O},{O!X!vO!_'}i~Oz&ra}&ra~P!$dO!X4fO~O}-SOz(Oi~P!$dO}-SOz(Oi~Oz4lO~O!X!vO#_4rO~Oi4sO!X!vO'p&lO~Oz4uO~O'^$gq}$gq#i$gq!w$gq~P!$dO^$Xy}$Xy'T$Xyz$Xy!_$Xy'e$Xy!P$Xy%O$Xy!X$Xy~P!*WO}1zO!P(Pa~O!P&aO%O4zO~O!P&aO%O4zO~P!$dO^!zy}!zy'T!zyz!zy!_!zy'e!zy!P!zy%O!zy!X!zy~P!*WOY4}O~O}.UO!O(Vi~O]5SO~O[5TO~O'f'QO}&wX!O&wX~O}2iO!O(Sa~O!O5bO~P$1yOu-eO'f(eO'o+cO~O!S5eO!T5dO!U5dO!t0VO'Z$cO'f(eO'o+cO~O!o5fO!p5fO~P%-iO!T5dO!U5dO'Z$cO'f(eO'o+cO~O!P.qO~O!P.qO%O5hO~O!P.qO%O5hO~P!$dOR5mO!P.qO!k5lO%O5hO~OY5rO}&za!O&za~O}.}O!O(Ti~O]5uO~O!_5vO~O!_5wO~O!_5xO~O!_5xO~P){O^5zO~O!X5}O~O!_6PO~O}'ui!O'ui~P#)tO^$]O'T$]O~P!*WO^$]O!w6UO'T$]O~O^$]O!X!vO!w6UO'T$]O~O!T6ZO!U6ZO'Z$cO'f(eO'o+cO~O^$]O!X!vO!f6[O!w6UO'T$]O'p&lO~O!`$YO'_$dO~P%2TO!S6]O~P%1rO}'ry!_'ry^'ry'T'ry~P!*WO#S$gqP$gqY$gq^$gqi$gqs$gq}$gq!]$gq!^$gq!`$gq!f$gq#W$gq#X$gq#Y$gq#Z$gq#[$gq#]$gq#^$gq#_$gq#a$gq#c$gq#e$gq#f$gq'T$gq'c$gq!_$gqz$gq!P$gq!w$gq'e$gq%O$gq!X$gq~P!$dO}&hi!_&hi~P!*WO#i!zq}!zq!O!zq~P#)tOr-kOs-kOu-lOPoaYoaioa!]oa!^oa!`oa!foa#Woa#Xoa#Yoa#Zoa#[oa#]oa#^oa#_oa#aoa#coa#eoa#foa#ioa'coa'poa'woa'xoa}oa!Ooa~Or(POu(QOP$[aY$[ai$[as$[a!]$[a!^$[a!`$[a!f$[a#W$[a#X$[a#Y$[a#Z$[a#[$[a#]$[a#^$[a#_$[a#a$[a#c$[a#e$[a#f$[a#i$[a'c$[a'p$[a'w$[a'x$[a}$[a!O$[a~Or(POu(QOP$^aY$^ai$^as$^a!]$^a!^$^a!`$^a!f$^a#W$^a#X$^a#Y$^a#Z$^a#[$^a#]$^a#^$^a#_$^a#a$^a#c$^a#e$^a#f$^a#i$^a'c$^a'p$^a'w$^a'x$^a}$^a!O$^a~OP$laY$lai$las$la!]$la!^$la!`$la!f$la#W$la#X$la#Y$la#Z$la#[$la#]$la#^$la#_$la#a$la#c$la#e$la#f$la#i$la'c$la}$la!O$la~P!$dO#i$Wq}$Wq!O$Wq~P#)tO#i$Xq}$Xq!O$Xq~P#)tO!O6gO~O'^$zy}$zy#i$zy!w$zy~P!$dO!X!vO}&pi!_&pi~O!X!vO'p&lO}&pi!_&pi~O},{O!_'}q~Oz&ri}&ri~P!$dO}-SOz(Oq~Oz6nO~P!$dOz6nO~O}'ay'^'ay~P!$dO}&ua!P&ua~P!$dO!P$rq^$rq'T$rq~P!$dOY6vO~O}.UO!O(Vq~O]6yO~O!P&aO%O6zO~O!P&aO%O6zO~P!$dO!w6{O}&wa!O&wa~O}2iO!O(Si~P#)tO!T7RO!U7RO'Z$cO'f(eO'o+cO~O!S7TO!t3}O~P%ArO!P.qO%O7WO~O!P.qO%O7WO~P!$dO'f7^O~O}.}O!O(Tq~O!_7aO~O!_7aO~P){O!_7cO~O!_7dO~O}#Py!O#Py~P#)tO^$]O!w7jO'T$]O~O^$]O!X!vO!w7jO'T$]O~O!T7mO!U7mO'Z$cO'f(eO'o+cO~O^$]O!X!vO!f7nO!w7jO'T$]O'p&lO~O#S$zyP$zyY$zy^$zyi$zys$zy}$zy!]$zy!^$zy!`$zy!f$zy#W$zy#X$zy#Y$zy#Z$zy#[$zy#]$zy#^$zy#_$zy#a$zy#c$zy#e$zy#f$zy'T$zy'c$zy!_$zyz$zy!P$zy!w$zy'e$zy%O$zy!X$zy~P!$dO#i#gy}#gy!O#gy~P#)tOP$eiY$eii$eis$ei!]$ei!^$ei!`$ei!f$ei#W$ei#X$ei#Y$ei#Z$ei#[$ei#]$ei#^$ei#_$ei#a$ei#c$ei#e$ei#f$ei#i$ei'c$ei}$ei!O$ei~P!$dOr(POu(QO'x(UOP$viY$vii$vis$vi!]$vi!^$vi!`$vi!f$vi#W$vi#X$vi#Y$vi#Z$vi#[$vi#]$vi#^$vi#_$vi#a$vi#c$vi#e$vi#f$vi#i$vi'c$vi'p$vi'w$vi}$vi!O$vi~Or(POu(QOP$xiY$xii$xis$xi!]$xi!^$xi!`$xi!f$xi#W$xi#X$xi#Y$xi#Z$xi#[$xi#]$xi#^$xi#_$xi#a$xi#c$xi#e$xi#f$xi#i$xi'c$xi'p$xi'w$xi'x$xi}$xi!O$xi~O#i$Xy}$Xy!O$Xy~P#)tO#i!zy}!zy!O!zy~P#)tO!X!vO}&pq!_&pq~O},{O!_'}y~Oz&rq}&rq~P!$dOz7tO~P!$dO}.UO!O(Vy~O}2iO!O(Sq~O!T8QO!U8QO'Z$cO'f(eO'o+cO~O!P.qO%O8TO~O!P.qO%O8TO~P!$dO!_8WO~O&T8XOP&Q!ZQ&Q!ZW&Q!Z]&Q!Z^&Q!Za&Q!Zb&Q!Zg&Q!Zi&Q!Zj&Q!Zk&Q!Zn&Q!Zp&Q!Zu&Q!Zw&Q!Zx&Q!Zy&Q!Z!P&Q!Z!Z&Q!Z!`&Q!Z!c&Q!Z!d&Q!Z!e&Q!Z!f&Q!Z!g&Q!Z!j&Q!Z#`&Q!Z#p&Q!Z#t&Q!Z$}&Q!Z%P&Q!Z%R&Q!Z%S&Q!Z%V&Q!Z%X&Q!Z%[&Q!Z%]&Q!Z%_&Q!Z%l&Q!Z%r&Q!Z%t&Q!Z%v&Q!Z%x&Q!Z%{&Q!Z&R&Q!Z&V&Q!Z&X&Q!Z&Z&Q!Z&]&Q!Z&_&Q!Z'O&Q!Z'Y&Q!Z'c&Q!Z'o&Q!Z'|&Q!Z!O&Q!Z%y&Q!Z_&Q!Z&O&Q!Z~O^$]O!w8^O'T$]O~O^$]O!X!vO!w8^O'T$]O~OP$gqY$gqi$gqs$gq!]$gq!^$gq!`$gq!f$gq#W$gq#X$gq#Y$gq#Z$gq#[$gq#]$gq#^$gq#_$gq#a$gq#c$gq#e$gq#f$gq#i$gq'c$gq}$gq!O$gq~P!$dO}&wq!O&wq~P#)tO^$]O!w8sO'T$]O~OP$zyY$zyi$zys$zy!]$zy!^$zy!`$zy!f$zy#W$zy#X$zy#Y$zy#Z$zy#[$zy#]$zy#^$zy#_$zy#a$zy#c$zy#e$zy#f$zy#i$zy'c$zy}$zy!O$zy~P!$dO'e'gX~P.jO'eZXzZX!_ZX%pZX!PZX%OZX!XZX~P$zO!XcX!_ZX!_cX'pcX~P;dOP9UOQ9UO]cOa:lOb!iOgcOi9UOjcOkcOn9UOp9UOuROwcOxcOycO!PSO!Z9WO!`UO!c9UO!d9UO!e9UO!f9UO!g9UO!j!hO#p!kO#t^O'Y'`O'cQO'oYO'|:jO~O}9gO!O$Za~O]#rOg$POi#sOj#rOk#rOn$QOp9lOu#yO!P#zO!Z:oO!`#wO#R9rO#p$UO$]9nO$_9pO$b$VO'Y&xO'c#tO~O#`'gO~P&-RO!OZX!OcX~P;dO#S9ZO~O!X!vO#S9ZO~O!w9jO~O#_9`O~O!w9sO}'uX!O'uX~O!w9jO}'sX!O'sX~O#S9tO~O'^9vO~P!$dO#S9{O~O#S9|O~O!X!vO#S9}O~O!X!vO#S9tO~O#i:OO~P#)tO#S:PO~O#S:QO~O#S:RO~O#S:SO~O#i:TO~P!$dO#i:UO~P!$dO#t~!^!n!p!q#Q#R'|$]$_$b$s$}%O%P%V%X%[%]%_%a~TS#t'|#Xy'V'W'f'W'Y#v#x#v~",
++  goto: "#Dq(ZPPPPPPP([P(lP*`PPPP-uPP.[3l5`5sP5sPPP5s5sP5sP7aPP7fP7zPPPP<ZPPPP<Z>yPPP?PA[P<ZPCuPPPPEm<ZPPPPPGf<ZPPJeKbPPPPKfMOPMWNXPKb<Z<Z!#`!&X!*x!*x!.VPPP!.^!1Q<ZPPPPPPPPPP!3uP!5WPP<Z!6eP<ZP<Z<Z<Z<ZP<Z!8xPP!;oP!>bP!>f!>n!>r!>rP!;lP!>v!>vP!AiP!Am<Z<Z!As!De5sP5sP5s5sP!Eh5s5s!G`5s!Ib5s!KS5s5s!Kp!Mj!Mj!Mn!Mj!MvP!MjP5s!Nr5s# |5s5s-uPPP##ZPP##s##sP##sP#$Y##sPP#$`P#$VP#$V#$rMS#$V#%a#%g#%j([#%m([P#%t#%t#%tP([P([P([P([PP([P#%z#%}P#%}([PPP([P([P([P([P([P([([#&R#&]#&c#&i#&w#&}#'T#'_#'e#'o#'u#(T#(Z#(a#(o#)U#*h#*v#*|#+S#+Y#+`#+j#+p#+v#,Q#,d#,jPPPPPPPPP#,pPP#-d#1bPP#2x#3P#3XP#7ePP#7i#9|#?v#?z#?}#@Q#@]#@`PP#@c#@g#AU#Ay#A}#BaPP#Be#Bk#BoP#Br#Bv#By#Ci#DP#DU#DX#D[#Db#De#Di#DmmhOSj}!m$[%c%f%g%i*k*p/_/bQ$imQ$ppQ%ZyS&T!b+WQ&h!iS(h#z(mQ)c$jQ)p$rQ*[%TQ+^&[S+e&a+gQ+w&iQ-c(oQ.|*]Y0R+i+j+k+l+mS2n.q2pU3w0S0U0XU5d2s2t2uS6Z3y3|S7R5e5fQ7m6]R8Q7T$l[ORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#a#d$[$n%[%_%c%e%f%g%i%m%x&Q&]&c&m&z'O(O)Q)X*g*k*p+r+y,[,b-l-q-y.T.t/V/W/X/Z/_/b/d/{0b0l2c2{3`3b3c3s5l5z6U7j8^8s!j'b#[#l&U't+P+S,g/r1P2k3l6{9U9W9Z9[9]9^9_9`9a9b9c9d9e9f9g9j9s9t9v9}:O:R:S:mQ(x$RQ)h$lQ*^%WQ*e%`Q,R9kQ.O)]Q.Z)iQ/U*cQ2X.UQ3T.}Q4W9lR5P2YpeOSjy}!m$[%Y%c%f%g%i*k*p/_/bR*`%[&WVOSTjkn}!S!W!]!j!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#[#a#d#l$[$n%[%_%`%c%e%f%g%i%m%x&Q&]&c&m&z'O't(O)Q)X*g*k*p+P+S+r+y,[,b,g-l-q-y.T.t/V/W/X/Z/_/b/d/r/{0b0l1P2c2k2{3`3b3c3l3s5l5z6U6{7j8^8s9U9W9Z9[9]9^9_9`9a9b9c9d9e9f9g9j9s9t9v9}:O:R:S:l:mW!cRU!`&UQ$blQ$hmS$mp$rv$wrs!q!t$Y$u&^&q&t)t)u)v*i+Q+a+|,O/h0dQ%PwQ&e!hQ&g!iS([#w(fS)b$i$jQ)f$lQ)s$tQ*V%RQ*Z%TS+v&h&iQ-P(]Q.S)cQ.Y)iQ.[)jQ._)nQ.w*WS.{*[*]Q0`+wQ1Y,{Q2W.UQ2[.XQ2a.aQ3S.|Q4c1ZQ5O2YQ5R2^Q6u4}R7w6v!Y$fm!i$h$i$j&S&g&h&i(g)b)c+T+d+v+w-].S/w0O0T0`1o3v3{6X7k8_Q)Z$bQ){$|Q*O$}Q*Y%TQ.c)sQ.v*VU.z*Z*[*]Q2}.wS3R.{.|Q5_2mQ5q3SS7P5`5cS8O7Q7SQ8i8PR8x8jW#}a$d(u:jS$|t%YQ$}uQ%OvR)y$z$V#|a!v!x#c#w#y$S$T$X&d'z(T(V(W(_(c(s(t)W)Y)])z)}+s,X-S-U-n-x-z.h.k.s.u1X1b1l1s1z1}2R2d2z2|4f4r4z5h5m6z7W8T9i9m9n9o9p9q9r9w9x9y9z9{9|:P:Q:T:U:j:p:qV(y$R9k9lU&X!b$v+ZQ'R!zQ)m$oQ.l*PQ1t-kR5Z2i&YcORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#[#a#d#l$[$n%[%_%`%c%e%f%g%i%m%x&Q&U&]&c&m&z'O't(O)Q)X*g*k*p+P+S+r+y,[,b,g-l-q-y.T.t/V/W/X/Z/_/b/d/r/{0b0l1P2c2k2{3`3b3c3l3s5l5z6U6{7j8^8s9U9W9Z9[9]9^9_9`9a9b9c9d9e9f9g9j9s9t9v9}:O:R:S:m$]#`Z!_!n$`%w%{&v&}'T'U'V'W'X'Y'Z'[']'^'_'a'd'h'r)l*{+U+_+x,W,^,a,c,q-o/m/p0a0k0o0p0q0r0s0t0u0v0w0x0y0z0{1O1T1x2U3n3q4R4U4V4[4]5]6Q6T6a6e6f7g7z8[8q8|9V:c&ZcORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#[#a#d#l$[$n%[%_%`%c%e%f%g%i%m%x&Q&U&]&c&m&z'O't(O)Q)X*g*k*p+P+S+r+y,[,b,g-l-q-y.T.t/V/W/X/Z/_/b/d/r/{0b0l1P2c2k2{3`3b3c3l3s5l5z6U6{7j8^8s9U9W9Z9[9]9^9_9`9a9b9c9d9e9f9g9j9s9t9v9}:O:R:S:mQ&V!bR/s+WY&P!b&T&[+W+^S(g#z(mS+d&a+gS-](h(oQ-^(iQ-d(pQ.n*RU0O+e+i+jU0T+k+l+mS0Y+n2rQ1o-cQ1q-eQ1r-fS2m.q2pU3v0R0S0UQ3z0VQ3{0XS5`2n2uS5c2s2tU6X3w3y3|Q6^3}S7Q5d5eQ7S5fS7k6Z6]S8P7R7TQ8_7mR8j8QlhOSj}!m$[%c%f%g%i*k*p/_/bQ%k!QS&u!u9ZQ)`$gQ*T%PQ*U%QQ+t&fS,V&z9tS-p)Q9}Q.Q)aQ.p*SQ/f*rQ/g*sQ/o+RQ0W+kQ0^+uS1y-q:RQ2S.RS2V.T:SQ3m/qQ3p/yQ4P0_Q4|2TQ6O3jQ6R3oQ6V3uQ6_4QQ7e6PQ7h6WQ8Z7iQ8n8XQ8p8]R8{8r$W#_Z!_!n%w%{&v&}'T'U'V'W'X'Y'Z'[']'^'_'a'd'h'r)l*{+U+_+x,W,^,a,q-o/m/p0a0k0o0p0q0r0s0t0u0v0w0x0y0z0{1O1T1x2U3n3q4R4U4V4[4]5]6Q6T6a6e6f7g7z8[8q8|9V:cU(r#{&y0}T)U$`,c$W#^Z!_!n%w%{&v&}'T'U'V'W'X'Y'Z'[']'^'_'a'd'h'r)l*{+U+_+x,W,^,a,q-o/m/p0a0k0o0p0q0r0s0t0u0v0w0x0y0z0{1O1T1x2U3n3q4R4U4V4[4]5]6Q6T6a6e6f7g7z8[8q8|9V:cQ'c#_S)T$`,cR-r)U&YcORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#[#a#d#l$[$n%[%_%`%c%e%f%g%i%m%x&Q&U&]&c&m&z'O't(O)Q)X*g*k*p+P+S+r+y,[,b,g-l-q-y.T.t/V/W/X/Z/_/b/d/r/{0b0l1P2c2k2{3`3b3c3l3s5l5z6U6{7j8^8s9U9W9Z9[9]9^9_9`9a9b9c9d9e9f9g9j9s9t9v9}:O:R:S:mQ%f{Q%g|Q%i!OQ%j!PR/^*nQ&b!hQ)V$bQ+q&eS-w)Z)sS0Z+o+pW1|-t-u-v.cS4O0[0]U4y2O2P2QU6s4x5V5WQ7v6tR8e7yT+f&a+gS+d&a+gU0O+e+i+jU0T+k+l+mS0Y+n2rS2m.q2pU3v0R0S0UQ3z0VQ3{0XS5`2n2uS5c2s2tU6X3w3y3|Q6^3}S7Q5d5eQ7S5fS7k6Z6]S8P7R7TQ8_7mR8j8QS+f&a+gT2o.q2pS&o!p/[Q-O([Q-Z(gS/}+d2mQ1_-PS1i-[-dU3x0T0Y5cQ4b1YS4p1p1rU6[3z3{7SQ6i4cQ6r4sR7n6^Q!wXS&n!p/[Q)R$ZQ)^$eQ)d$kQ+z&oQ,}([Q-Y(gQ-_(jQ.P)_Q.x*XS/|+d2mS1^-O-PS1h-Z-dQ1k-^Q1n-`Q3P.yW3t/}0T0Y5cQ4a1YQ4e1_S4j1i1rQ4q1qQ5o3QW6Y3x3z3{7SS6h4b4cQ6m4lQ6p4pQ6}5^Q7[5pS7l6[6^Q7p6iQ7r6nQ7u6rQ7|7OQ8V7]Q8`7nQ8c7tQ8g7}Q8v8hQ9O8wQ9S9PQ:]:WQ:f:aR:g:b$nWORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#a#d$[$n%[%_%`%c%e%f%g%i%m%x&Q&]&c&m&z'O(O)Q)X*g*k*p+r+y,[,b-l-q-y.T.t/V/W/X/Z/_/b/d/{0b0l2c2{3`3b3c3s5l5z6U7j8^8sS!wn!j!j:V#[#l&U't+P+S,g/r1P2k3l6{9U9W9Z9[9]9^9_9`9a9b9c9d9e9f9g9j9s9t9v9}:O:R:S:mR:]:l$nXORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#a#d$[$n%[%_%`%c%e%f%g%i%m%x&Q&]&c&m&z'O(O)Q)X*g*k*p+r+y,[,b-l-q-y.T.t/V/W/X/Z/_/b/d/{0b0l2c2{3`3b3c3s5l5z6U7j8^8sQ$Zb!Y$em!i$h$i$j&S&g&h&i(g)b)c+T+d+v+w-].S/w0O0T0`1o3v3{6X7k8_S$kn!jQ)_$fQ*X%TW.y*Y*Z*[*]U3Q.z.{.|Q5^2mS5p3R3SU7O5_5`5cQ7]5qU7}7P7Q7SS8h8O8PS8w8i8jQ9P8x!j:W#[#l&U't+P+S,g/r1P2k3l6{9U9W9Z9[9]9^9_9`9a9b9c9d9e9f9g9j9s9t9v9}:O:R:S:mQ:a:kR:b:l$f]OSTjk}!S!W!]!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#a#d$[$n%[%_%c%e%f%g%i%m%x&Q&]&c&m&z'O(O)Q)X*g*k*p+r+y,[,b-l-q-y.T.t/V/W/X/Z/_/b/d/{0b0l2c2{3`3b3c3s5l5z6U7j8^8sU!gRU!`v$wrs!q!t$Y$u&^&q&t)t)u)v*i+Q+a+|,O/h0dQ*f%`!h:X#[#l't+P+S,g/r1P2k3l6{9U9W9Z9[9]9^9_9`9a9b9c9d9e9f9g9j9s9t9v9}:O:R:S:mR:[&US&Y!b$vR/u+Z$l[ORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#a#d$[$n%[%_%c%e%f%g%i%m%x&Q&]&c&m&z'O(O)Q)X*g*k*p+r+y,[,b-l-q-y.T.t/V/W/X/Z/_/b/d/{0b0l2c2{3`3b3c3s5l5z6U7j8^8s!j'b#[#l&U't+P+S,g/r1P2k3l6{9U9W9Z9[9]9^9_9`9a9b9c9d9e9f9g9j9s9t9v9}:O:R:S:mR*e%`$noORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#a#d$[$n%[%_%`%c%e%f%g%i%m%x&Q&]&c&m&z'O(O)Q)X*g*k*p+r+y,[,b-l-q-y.T.t/V/W/X/Z/_/b/d/{0b0l2c2{3`3b3c3s5l5z6U7j8^8sQ'R!z!k:Y#[#l&U't+P+S,g/r1P2k3l6{9U9W9Z9[9]9^9_9`9a9b9c9d9e9f9g9j9s9t9v9}:O:R:S:m!h#UZ!_$`%w%{&v&}'[']'^'_'d'h)l*{+_+x,W,^,q-o0a0k0{1x2U3q4R4U6T7g8[8q8|9V!R9b'a'r+U,c/m/p0o0w0x0y0z1O1T3n4V4[4]5]6Q6a6e6f7z:c!d#WZ!_$`%w%{&v&}'^'_'d'h)l*{+_+x,W,^,q-o0a0k0{1x2U3q4R4U6T7g8[8q8|9V}9d'a'r+U,c/m/p0o0y0z1O1T3n4V4[4]5]6Q6a6e6f7z:c!`#[Z!_$`%w%{&v&}'d'h)l*{+_+x,W,^,q-o0a0k0{1x2U3q4R4U6T7g8[8q8|9Vl(W#u&{)P,y-R-g-h0i1w4`4t:^:h:ix:m'a'r+U,c/m/p0o1O1T3n4V4[4]5]6Q6a6e6f7z:c!`:p&w'f(Z(a+p,U,n-V-s-v.g.i0]0h1`1d2Q2f2h2x4T4g4m4v4{5W5k6`6k6q7YZ:q0|4Z6b7o8a&YcORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#[#a#d#l$[$n%[%_%`%c%e%f%g%i%m%x&Q&U&]&c&m&z'O't(O)Q)X*g*k*p+P+S+r+y,[,b,g-l-q-y.T.t/V/W/X/Z/_/b/d/r/{0b0l1P2c2k2{3`3b3c3l3s5l5z6U6{7j8^8s9U9W9Z9[9]9^9_9`9a9b9c9d9e9f9g9j9s9t9v9}:O:R:S:mS#m`#nR1Q,f&a_ORSTU`jk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#[#a#d#l#n$[$n%[%_%`%c%e%f%g%i%m%x&Q&U&]&c&m&z'O't(O)Q)X*g*k*p+P+S+r+y,[,b,f,g-l-q-y.T.t/V/W/X/Z/_/b/d/r/{0b0l1P2c2k2{3`3b3c3l3s5l5z6U6{7j8^8s9U9W9Z9[9]9^9_9`9a9b9c9d9e9f9g9j9s9t9v9}:O:R:S:mT#i^#oS#g^#oT'k#j'oT#h^#oT'm#j'o&a`ORSTU`jk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#[#a#d#l#n$[$n%[%_%`%c%e%f%g%i%m%x&Q&U&]&c&m&z'O't(O)Q)X*g*k*p+P+S+r+y,[,b,f,g-l-q-y.T.t/V/W/X/Z/_/b/d/r/{0b0l1P2c2k2{3`3b3c3l3s5l5z6U6{7j8^8s9U9W9Z9[9]9^9_9`9a9b9c9d9e9f9g9j9s9t9v9}:O:R:S:mT#m`#nQ#p`R'v#n$nbORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#a#d$[$n%[%_%`%c%e%f%g%i%m%x&Q&]&c&m&z'O(O)Q)X*g*k*p+r+y,[,b-l-q-y.T.t/V/W/X/Z/_/b/d/{0b0l2c2{3`3b3c3s5l5z6U7j8^8s!k:k#[#l&U't+P+S,g/r1P2k3l6{9U9W9Z9[9]9^9_9`9a9b9c9d9e9f9g9j9s9t9v9}:O:R:S:m#RdOSUj}!S!W!m!{#l$[%[%_%`%c%e%f%g%i%m&Q&c't)X*g*k*p+r,g-l-y.t/V/W/X/Z/_/b/d1P2c2{3`3b3c5l5zt#{a!x$S$T$X(T(V(W(_(s(t,X-n1X1s:j:p:q!|&y!v#c#w#y&d'z(c)W)Y)])z)}+s-S-U-x-z.h.k.s.u1b1l1z1}2R2d2z2|4f4r4z5h5m6z7W8T9m9o9q9w9y9{:P:TQ(}$VQ,r(Pc0}9i9n9p9r9x9z9|:Q:Ut#xa!x$S$T$X(T(V(W(_(s(t,X-n1X1s:j:p:qS(j#z(mQ)O$WQ-`(k!|:_!v#c#w#y&d'z(c)W)Y)])z)}+s-S-U-x-z.h.k.s.u1b1l1z1}2R2d2z2|4f4r4z5h5m6z7W8T9m9o9q9w9y9{:P:Tb:`9i9n9p9r9x9z9|:Q:UQ:d:nR:e:ot#{a!x$S$T$X(T(V(W(_(s(t,X-n1X1s:j:p:q!|&y!v#c#w#y&d'z(c)W)Y)])z)}+s-S-U-x-z.h.k.s.u1b1l1z1}2R2d2z2|4f4r4z5h5m6z7W8T9m9o9q9w9y9{:P:Tc0}9i9n9p9r9x9z9|:Q:UlfOSj}!m$[%c%f%g%i*k*p/_/bQ(b#yQ*w%pQ*x%rR1a-S$U#|a!v!x#c#w#y$S$T$X&d'z(T(V(W(_(c(s(t)W)Y)])z)}+s,X-S-U-n-x-z.h.k.s.u1X1b1l1s1z1}2R2d2z2|4f4r4z5h5m6z7W8T9i9m9n9o9p9q9r9w9x9y9z9{9|:P:Q:T:U:j:p:qQ)|$}Q.j*OQ2g.iR5Y2hT(l#z(mS(l#z(mT2o.q2pQ)^$eQ-_(jQ.P)_Q.x*XQ3P.yQ5o3QQ6}5^Q7[5pQ7|7OQ8V7]Q8g7}Q8v8hQ9O8wR9S9Pl(T#u&{)P,y-R-g-h0i1w4`4t:^:h:i!`9w&w'f(Z(a+p,U,n-V-s-v.g.i0]0h1`1d2Q2f2h2x4T4g4m4v4{5W5k6`6k6q7YZ9x0|4Z6b7o8an(V#u&{)P,w,y-R-g-h0i1w4`4t:^:h:i!b9y&w'f(Z(a+p,U,n-V-s-v.g.i0]0f0h1`1d2Q2f2h2x4T4g4m4v4{5W5k6`6k6q7Y]9z0|4Z6b6c7o8apeOSjy}!m$[%Y%c%f%g%i*k*p/_/bQ%VxR*g%`peOSjy}!m$[%Y%c%f%g%i*k*p/_/bR%VxQ*Q%OR.f)yqeOSjy}!m$[%Y%c%f%g%i*k*p/_/bQ.r*VS2y.v.wW5g2v2w2x2}U7V5i5j5kU8R7U7X7YQ8k8SR8y8lQ%^yR*a%YR3W/PR7_5rS$mp$rR.[)jQ%czR*k%dR*q%jT/`*p/bQjOQ!mST$_j!mQ'|#tR,o'|Q!YQR%u!YQ!^RU%y!^%z*|Q%z!_R*|%{Q+X&VR/t+XQ,Y&{R0j,YQ,]&}S0m,]0nR0n,^Q+g&aR0P+gQ&_!eQ*}%|T+b&_*}Q+[&YR/v+[Q&r!rQ+{&pU,P&r+{0eR0e,QQ'o#jR,h'oQ#n`R'u#nQ#bZU'e#b*z9hQ*z9VR9h'rQ,|([W1[,|1]4d6jU1],}-O-PS4d1^1_R6j4e#q(R#u&w&{'f(Z(a(z({)P+p,S,T,U,n,w,x,y-R-V-g-h-s-v.g.i0]0f0g0h0i0|1`1d1w2Q2f2h2x4T4X4Y4Z4`4g4m4t4v4{5W5k6`6b6c6d6k6q7Y7o8a:^:h:iQ-T(aU1c-T1e4hQ1e-VR4h1dQ(m#zR-a(mQ(v$OR-j(vQ1{-sR4w1{Q)w$xR.e)wQ2j.lS5[2j6|R6|5]Q*S%PR.o*SQ2p.qR5a2pQ/O*^S3U/O5sR5s3WQ.V)fW2Z.V2]5Q6wQ2].YQ5Q2[R6w5RQ)k$mR.])kQ/b*pR3f/bWiOSj!mQ%h}Q)S$[Q*j%cQ*l%fQ*m%gQ*o%iQ/]*kS/`*p/bR3e/_Q$^gQ%l!RQ%o!TQ%q!UQ%s!VQ)r$sQ)x$yQ*`%^Q*u%nS/R*a*dQ/i*tQ/j*wQ/k*xS/z+d2mQ1f-XQ1g-YQ1m-_Q2`.`Q2e.gQ3O.xQ3Y/TQ3d/^Y3r/|/}0T0Y5cQ4i1hQ4k1jQ4n1nQ5U2bQ5X2fQ5n3PQ5t3X[6S3q3t3x3z3{7SQ6l4jQ6o4oQ6x5SQ7Z5oQ7`5uW7f6T6Y6[6^Q7q6mQ7s6pQ7x6yQ7{6}Q8U7[U8Y7g7l7nQ8b7rQ8d7uQ8f7|Q8m8VS8o8[8`Q8t8cQ8u8gQ8z8qQ8}8vQ9Q8|Q9R9OR9T9SQ$gmQ&f!iU)a$h$i$jQ+R&SU+u&g&h&iQ-X(gS.R)b)cQ/q+TQ/y+dS0_+v+wQ1j-]Q2T.SQ3o/wS3u0O0TQ4Q0`Q4o1oS6W3v3{Q7i6XQ8]7kR8r8_S#va:jR)[$dU$Oa$d:jR-i(uQ#uaS&w!v)]Q&{!xQ'f#cQ(Z#wQ(a#yQ(z$SQ({$TQ)P$XQ+p&dQ,S9mQ,T9oQ,U9qQ,n'zQ,w(TQ,x(VQ,y(WQ-R(_Q-V(cQ-g(sQ-h(td-s)W-x.s1}2z4z5h6z7W8TQ-v)YQ.g)zQ.i)}Q0]+sQ0f9wQ0g9yQ0h9{Q0i,XQ0|9iQ1`-SQ1d-UQ1w-nQ2Q-zQ2f.hQ2h.kQ2x.uQ4T:PQ4X9nQ4Y9pQ4Z9rQ4`1XQ4g1bQ4m1lQ4t1sQ4v1zQ4{2RQ5W2dQ5k2|Q6`:TQ6b9|Q6c9xQ6d9zQ6k4fQ6q4rQ7Y5mQ7o:QQ8a:UQ:^:jQ:h:pR:i:qT'{#t'|lgOSj}!m$[%c%f%g%i*k*p/_/bS!oU%eQ%n!SQ%t!WQ'S!{Q's#lS*d%[%_Q*h%`Q*t%mQ+O&QQ+o&cQ,l'tQ-u)XQ/Y*gQ0[+rQ1S,gQ1u-lQ2P-yQ2w.tQ3[/VQ3]/WQ3_/XQ3a/ZQ3h/dQ4^1PQ5V2cQ5j2{Q5y3`Q5{3bQ5|3cQ7X5lR7b5z!vZOSUj}!S!m!{$[%[%_%`%c%e%f%g%i%m&Q&c)X*g*k*p+r-l-y.t/V/W/X/Z/_/b/d2c2{3`3b3c5l5zQ!_RQ!nTQ$`kQ%w!]Q%{!`Q&v!uQ&}!yQ'T#OQ'U#PQ'V#QQ'W#RQ'X#SQ'Y#TQ'Z#UQ'[#VQ']#WQ'^#XQ'_#YQ'a#[Q'd#aQ'h#dW'r#l't,g1PQ)l$nQ*{%xS+U&U/rQ+_&]Q+x&mQ,W&zQ,^'OQ,a9UQ,c9WQ,q(OQ-o)QQ/m+PQ/p+SQ0a+yQ0k,[Q0o9ZQ0p9[Q0q9]Q0r9^Q0s9_Q0t9`Q0u9aQ0v9bQ0w9cQ0x9dQ0y9eQ0z9fQ0{,bQ1O9jQ1T9gQ1x-qQ2U.TQ3n9sQ3q/{Q4R0bQ4U0lQ4V9tQ4[9vQ4]9}Q5]2kQ6Q3lQ6T3sQ6a:OQ6e:RQ6f:SQ7g6UQ7z6{Q8[7jQ8q8^Q8|8sQ9V!WR:c:mT!XQ!YR!aRR&W!bS&S!b+WS+T&T&[R/w+^R&|!xR'P!yT!sU$YS!rU$YU$xrs*iS&p!q!tQ+}&qQ,Q&tQ.d)vS0c+|,OR4S0d[!dR!`$u&^)t+ah!pUrs!q!t$Y&q&t)v+|,O0dQ/[*iQ/n+QQ3k/hT:Z&U)uT!fR$uS!eR$uS%|!`)tS+V&U)uQ+`&^R/x+aT&Z!b$vQ#j^R'x#oT'n#j'oR1R,fT(^#w(fR(d#yQ-t)WQ2O-xQ2v.sQ4x1}Q5i2zQ6t4zQ7U5hQ7y6zQ8S7WR8l8TlhOSj}!m$[%c%f%g%i*k*p/_/bQ%]yR*`%YV$yrs*iR.m*PR*_%WQ$qpR)q$rR)g$lT%az%dT%bz%dT/a*p/b",
++  nodeNames: "⚠ ArithOp ArithOp extends LineComment BlockComment Script ExportDeclaration export Star as VariableName from String ; default FunctionDeclaration async function VariableDefinition TypeParamList TypeDefinition ThisType this LiteralType ArithOp Number BooleanLiteral TemplateType VoidType void TypeofType typeof MemberExpression . ?. PropertyName [ TemplateString null super RegExp ] ArrayExpression Spread , } { ObjectExpression Property async get set PropertyDefinition Block : NewExpression new TypeArgList CompareOp < ) ( ArgList UnaryExpression await yield delete LogicOp BitOp ParenthesizedExpression ClassExpression class extends ClassBody MethodDeclaration Privacy static abstract override PrivatePropertyDefinition PropertyDeclaration readonly Optional TypeAnnotation Equals StaticBlock FunctionExpression ArrowFunction ParamList ParamList ArrayPattern ObjectPattern PatternProperty Privacy readonly Arrow MemberExpression PrivatePropertyName BinaryExpression ArithOp ArithOp ArithOp ArithOp BitOp CompareOp instanceof in const CompareOp BitOp BitOp BitOp LogicOp LogicOp ConditionalExpression LogicOp LogicOp AssignmentExpression UpdateOp PostfixExpression CallExpression TaggedTemplateExpression DynamicImport import ImportMeta JSXElement JSXSelfCloseEndTag JSXStartTag JSXSelfClosingTag JSXIdentifier JSXBuiltin JSXIdentifier JSXNamespacedName JSXMemberExpression JSXSpreadAttribute JSXAttribute JSXAttributeValue JSXEscape JSXEndTag JSXOpenTag JSXFragmentTag JSXText JSXEscape JSXStartCloseTag JSXCloseTag PrefixCast ArrowFunction TypeParamList SequenceExpression KeyofType keyof UniqueType unique ImportType InferredType infer TypeName ParenthesizedType FunctionSignature ParamList NewSignature IndexedType TupleType Label ArrayType ReadonlyType ObjectType MethodType PropertyType IndexSignature CallSignature TypePredicate is NewSignature new UnionType LogicOp IntersectionType LogicOp ConditionalType ParameterizedType ClassDeclaration abstract implements type VariableDeclaration let var TypeAliasDeclaration InterfaceDeclaration interface EnumDeclaration enum EnumBody NamespaceDeclaration namespace module AmbientDeclaration declare GlobalDeclaration global ClassDeclaration ClassBody MethodDeclaration AmbientFunctionDeclaration ExportGroup VariableName VariableName ImportDeclaration ImportGroup ForStatement for ForSpec ForInSpec ForOfSpec of WhileStatement while WithStatement with DoStatement do IfStatement if else SwitchStatement switch SwitchBody CaseLabel case DefaultLabel TryStatement try catch finally ReturnStatement return ThrowStatement throw BreakStatement break ContinueStatement continue DebuggerStatement debugger LabeledStatement ExpressionStatement",
++  maxTerm: 332,
+   context: trackNewline,
+   nodeProps: [
+-    [NodeProp.group, -26,7,14,16,54,180,184,187,188,190,193,196,207,209,215,217,219,221,224,230,234,236,238,240,242,244,245,"Statement",-30,11,13,23,26,27,38,39,40,41,43,48,56,64,70,71,87,88,97,99,115,118,120,121,122,123,125,126,144,145,147,"Expression",-22,22,24,28,29,31,148,150,152,153,155,156,157,159,160,161,163,164,165,174,176,178,179,"Type",-3,75,81,86,"ClassItem"],
+-    [NodeProp.closedBy, 37,"]",47,"}",62,")",128,"JSXSelfCloseEndTag JSXEndTag",142,"JSXEndTag"],
+-    [NodeProp.openedBy, 42,"[",46,"{",61,"(",127,"JSXStartTag",137,"JSXStartTag JSXStartCloseTag"]
++    [NodeProp.group, -26,7,14,16,54,182,186,189,190,192,195,198,209,211,217,219,221,223,226,232,236,238,240,242,244,246,247,"Statement",-30,11,13,23,26,27,38,39,40,41,43,48,56,64,70,71,87,88,97,99,115,118,120,121,122,123,125,126,146,147,149,"Expression",-22,22,24,28,29,31,150,152,154,155,157,158,159,161,162,163,165,166,167,176,178,180,181,"Type",-3,75,81,86,"ClassItem"],
++    [NodeProp.closedBy, 37,"]",47,"}",62,")",128,"JSXSelfCloseEndTag JSXEndTag",144,"JSXEndTag"],
++    [NodeProp.openedBy, 42,"[",46,"{",61,"(",127,"JSXStartTag",139,"JSXStartTag JSXStartCloseTag"]
+   ],
+   skippedNodes: [0,4,5],
+   repeatNodeCount: 28,
+-  tokenData: "!C}~R!`OX%TXY%cYZ'RZ[%c[]%T]^'R^p%Tpq%cqr'crs(kst0htu2`uv4pvw5ewx6cxy<yyz=Zz{=k{|>k|}?O}!O>k!O!P?`!P!QCl!Q!R!0[!R![!1q![!]!7s!]!^!8V!^!_!8g!_!`!9d!`!a!:[!a!b!<R!b!c%T!c!}2`!}#O!=d#O#P%T#P#Q!=t#Q#R!>U#R#S2`#S#T!>i#T#o2`#o#p!>y#p#q!?O#q#r!?f#r#s!?x#s$f%T$f$g%c$g#BY2`#BY#BZ!@Y#BZ$IS2`$IS$I_!@Y$I_$I|2`$I|$I}!Bq$I}$JO!Bq$JO$JT2`$JT$JU!@Y$JU$KV2`$KV$KW!@Y$KW&FU2`&FU&FV!@Y&FV?HT2`?HT?HU!@Y?HU~2`W%YR$QWO!^%T!_#o%T#p~%T,T%jg$QW'T+{OX%TXY%cYZ%TZ[%c[p%Tpq%cq!^%T!_#o%T#p$f%T$f$g%c$g#BY%T#BY#BZ%c#BZ$IS%T$IS$I_%c$I_$JT%T$JT$JU%c$JU$KV%T$KV$KW%c$KW&FU%T&FU&FV%c&FV?HT%T?HT?HU%c?HU~%T,T'YR$QW'U+{O!^%T!_#o%T#p~%T$T'jS$QW!f#{O!^%T!_!`'v!`#o%T#p~%T$O'}S#a#v$QWO!^%T!_!`(Z!`#o%T#p~%T$O(bR#a#v$QWO!^%T!_#o%T#p~%T'u(rZ$QW]!ROY(kYZ)eZr(krs*rs!^(k!^!_+U!_#O(k#O#P-b#P#o(k#o#p+U#p~(k&r)jV$QWOr)ers*Ps!^)e!^!_*a!_#o)e#o#p*a#p~)e&r*WR#{&j$QWO!^%T!_#o%T#p~%T&j*dROr*ars*ms~*a&j*rO#{&j'u*{R#{&j$QW]!RO!^%T!_#o%T#p~%T'm+ZV]!ROY+UYZ*aZr+Urs+ps#O+U#O#P+w#P~+U'm+wO#{&j]!R'm+zROr+Urs,Ts~+U'm,[U#{&j]!ROY,nZr,nrs-Vs#O,n#O#P-[#P~,n!R,sU]!ROY,nZr,nrs-Vs#O,n#O#P-[#P~,n!R-[O]!R!R-_PO~,n'u-gV$QWOr(krs-|s!^(k!^!_+U!_#o(k#o#p+U#p~(k'u.VZ#{&j$QW]!ROY.xYZ%TZr.xrs/rs!^.x!^!_,n!_#O.x#O#P0S#P#o.x#o#p,n#p~.x!Z/PZ$QW]!ROY.xYZ%TZr.xrs/rs!^.x!^!_,n!_#O.x#O#P0S#P#o.x#o#p,n#p~.x!Z/yR$QW]!RO!^%T!_#o%T#p~%T!Z0XT$QWO!^.x!^!_,n!_#o.x#o#p,n#p~.xy0mZ$QWOt%Ttu1`u!^%T!_!c%T!c!}1`!}#R%T#R#S1`#S#T%T#T#o1`#p$g%T$g~1`y1g]$QW'mqOt%Ttu1`u!Q%T!Q![1`![!^%T!_!c%T!c!}1`!}#R%T#R#S1`#S#T%T#T#o1`#p$g%T$g~1`&i2k_$QW#vS'W%k'dpOt%Ttu2`u}%T}!O3j!O!Q%T!Q![2`![!^%T!_!c%T!c!}2`!}#R%T#R#S2`#S#T%T#T#o2`#p$g%T$g~2`[3q_$QW#vSOt%Ttu3ju}%T}!O3j!O!Q%T!Q![3j![!^%T!_!c%T!c!}3j!}#R%T#R#S3j#S#T%T#T#o3j#p$g%T$g~3j$O4wS#Y#v$QWO!^%T!_!`5T!`#o%T#p~%T$O5[R$QW#k#vO!^%T!_#o%T#p~%T%r5lU'v%j$QWOv%Tvw6Ow!^%T!_!`5T!`#o%T#p~%T$O6VS$QW#e#vO!^%T!_!`5T!`#o%T#p~%T'u6jZ$QW]!ROY6cYZ7]Zw6cwx*rx!^6c!^!_8T!_#O6c#O#P:T#P#o6c#o#p8T#p~6c&r7bV$QWOw7]wx*Px!^7]!^!_7w!_#o7]#o#p7w#p~7]&j7zROw7wwx*mx~7w'm8YV]!ROY8TYZ7wZw8Twx+px#O8T#O#P8o#P~8T'm8rROw8Twx8{x~8T'm9SU#{&j]!ROY9fZw9fwx-Vx#O9f#O#P9}#P~9f!R9kU]!ROY9fZw9fwx-Vx#O9f#O#P9}#P~9f!R:QPO~9f'u:YV$QWOw6cwx:ox!^6c!^!_8T!_#o6c#o#p8T#p~6c'u:xZ#{&j$QW]!ROY;kYZ%TZw;kwx/rx!^;k!^!_9f!_#O;k#O#P<e#P#o;k#o#p9f#p~;k!Z;rZ$QW]!ROY;kYZ%TZw;kwx/rx!^;k!^!_9f!_#O;k#O#P<e#P#o;k#o#p9f#p~;k!Z<jT$QWO!^;k!^!_9f!_#o;k#o#p9f#p~;k%V=QR!`$}$QWO!^%T!_#o%T#p~%TZ=bR!_R$QWO!^%T!_#o%T#p~%T%R=tU'X!R#Z#v$QWOz%Tz{>W{!^%T!_!`5T!`#o%T#p~%T$O>_S#W#v$QWO!^%T!_!`5T!`#o%T#p~%T$u>rSi$m$QWO!^%T!_!`5T!`#o%T#p~%T&i?VR}&a$QWO!^%T!_#o%T#p~%T&i?gVr%n$QWO!O%T!O!P?|!P!Q%T!Q![@r![!^%T!_#o%T#p~%Ty@RT$QWO!O%T!O!P@b!P!^%T!_#o%T#p~%Ty@iR|q$QWO!^%T!_#o%T#p~%Ty@yZ$QWjqO!Q%T!Q![@r![!^%T!_!g%T!g!hAl!h#R%T#R#S@r#S#X%T#X#YAl#Y#o%T#p~%TyAqZ$QWO{%T{|Bd|}%T}!OBd!O!Q%T!Q![CO![!^%T!_#R%T#R#SCO#S#o%T#p~%TyBiV$QWO!Q%T!Q![CO![!^%T!_#R%T#R#SCO#S#o%T#p~%TyCVV$QWjqO!Q%T!Q![CO![!^%T!_#R%T#R#SCO#S#o%T#p~%T,TCs`$QW#X#vOYDuYZ%TZzDuz{Jl{!PDu!P!Q!-e!Q!^Du!^!_Fx!_!`!.^!`!a!/]!a!}Du!}#OHq#O#PJQ#P#oDu#o#pFx#p~DuXD|[$QWyPOYDuYZ%TZ!PDu!P!QEr!Q!^Du!^!_Fx!_!}Du!}#OHq#O#PJQ#P#oDu#o#pFx#p~DuXEy_$QWyPO!^%T!_#Z%T#Z#[Er#[#]%T#]#^Er#^#a%T#a#bEr#b#g%T#g#hEr#h#i%T#i#jEr#j#m%T#m#nEr#n#o%T#p~%TPF}VyPOYFxZ!PFx!P!QGd!Q!}Fx!}#OG{#O#PHh#P~FxPGiUyP#Z#[Gd#]#^Gd#a#bGd#g#hGd#i#jGd#m#nGdPHOTOYG{Z#OG{#O#PH_#P#QFx#Q~G{PHbQOYG{Z~G{PHkQOYFxZ~FxXHvY$QWOYHqYZ%TZ!^Hq!^!_G{!_#OHq#O#PIf#P#QDu#Q#oHq#o#pG{#p~HqXIkV$QWOYHqYZ%TZ!^Hq!^!_G{!_#oHq#o#pG{#p~HqXJVV$QWOYDuYZ%TZ!^Du!^!_Fx!_#oDu#o#pFx#p~Du,TJs^$QWyPOYJlYZKoZzJlz{NQ{!PJl!P!Q!,R!Q!^Jl!^!_!!]!_!}Jl!}#O!'|#O#P!+a#P#oJl#o#p!!]#p~Jl,TKtV$QWOzKoz{LZ{!^Ko!^!_M]!_#oKo#o#pM]#p~Ko,TL`X$QWOzKoz{LZ{!PKo!P!QL{!Q!^Ko!^!_M]!_#oKo#o#pM]#p~Ko,TMSR$QWT+{O!^%T!_#o%T#p~%T+{M`ROzM]z{Mi{~M]+{MlTOzM]z{Mi{!PM]!P!QM{!Q~M]+{NQOT+{,TNX^$QWyPOYJlYZKoZzJlz{NQ{!PJl!P!Q! T!Q!^Jl!^!_!!]!_!}Jl!}#O!'|#O#P!+a#P#oJl#o#p!!]#p~Jl,T! ^_$QWT+{yPO!^%T!_#Z%T#Z#[Er#[#]%T#]#^Er#^#a%T#a#bEr#b#g%T#g#hEr#h#i%T#i#jEr#j#m%T#m#nEr#n#o%T#p~%T+{!!bYyPOY!!]YZM]Zz!!]z{!#Q{!P!!]!P!Q!&x!Q!}!!]!}#O!$`#O#P!&f#P~!!]+{!#VYyPOY!!]YZM]Zz!!]z{!#Q{!P!!]!P!Q!#u!Q!}!!]!}#O!$`#O#P!&f#P~!!]+{!#|UT+{yP#Z#[Gd#]#^Gd#a#bGd#g#hGd#i#jGd#m#nGd+{!$cWOY!$`YZM]Zz!$`z{!${{#O!$`#O#P!&S#P#Q!!]#Q~!$`+{!%OYOY!$`YZM]Zz!$`z{!${{!P!$`!P!Q!%n!Q#O!$`#O#P!&S#P#Q!!]#Q~!$`+{!%sTT+{OYG{Z#OG{#O#PH_#P#QFx#Q~G{+{!&VTOY!$`YZM]Zz!$`z{!${{~!$`+{!&iTOY!!]YZM]Zz!!]z{!#Q{~!!]+{!&}_yPOzM]z{Mi{#ZM]#Z#[!&x#[#]M]#]#^!&x#^#aM]#a#b!&x#b#gM]#g#h!&x#h#iM]#i#j!&x#j#mM]#m#n!&x#n~M],T!(R[$QWOY!'|YZKoZz!'|z{!(w{!^!'|!^!_!$`!_#O!'|#O#P!*o#P#QJl#Q#o!'|#o#p!$`#p~!'|,T!(|^$QWOY!'|YZKoZz!'|z{!(w{!P!'|!P!Q!)x!Q!^!'|!^!_!$`!_#O!'|#O#P!*o#P#QJl#Q#o!'|#o#p!$`#p~!'|,T!*PY$QWT+{OYHqYZ%TZ!^Hq!^!_G{!_#OHq#O#PIf#P#QDu#Q#oHq#o#pG{#p~Hq,T!*tX$QWOY!'|YZKoZz!'|z{!(w{!^!'|!^!_!$`!_#o!'|#o#p!$`#p~!'|,T!+fX$QWOYJlYZKoZzJlz{NQ{!^Jl!^!_!!]!_#oJl#o#p!!]#p~Jl,T!,Yc$QWyPOzKoz{LZ{!^Ko!^!_M]!_#ZKo#Z#[!,R#[#]Ko#]#^!,R#^#aKo#a#b!,R#b#gKo#g#h!,R#h#iKo#i#j!,R#j#mKo#m#n!,R#n#oKo#o#pM]#p~Ko,T!-lV$QWS+{OY!-eYZ%TZ!^!-e!^!_!.R!_#o!-e#o#p!.R#p~!-e+{!.WQS+{OY!.RZ~!.R$P!.g[$QW#k#vyPOYDuYZ%TZ!PDu!P!QEr!Q!^Du!^!_Fx!_!}Du!}#OHq#O#PJQ#P#oDu#o#pFx#p~Du]!/f[#sS$QWyPOYDuYZ%TZ!PDu!P!QEr!Q!^Du!^!_Fx!_!}Du!}#OHq#O#PJQ#P#oDu#o#pFx#p~Duy!0cd$QWjqO!O%T!O!P@r!P!Q%T!Q![!1q![!^%T!_!g%T!g!hAl!h#R%T#R#S!1q#S#U%T#U#V!3X#V#X%T#X#YAl#Y#b%T#b#c!2w#c#d!4m#d#l%T#l#m!5{#m#o%T#p~%Ty!1x_$QWjqO!O%T!O!P@r!P!Q%T!Q![!1q![!^%T!_!g%T!g!hAl!h#R%T#R#S!1q#S#X%T#X#YAl#Y#b%T#b#c!2w#c#o%T#p~%Ty!3OR$QWjqO!^%T!_#o%T#p~%Ty!3^W$QWO!Q%T!Q!R!3v!R!S!3v!S!^%T!_#R%T#R#S!3v#S#o%T#p~%Ty!3}Y$QWjqO!Q%T!Q!R!3v!R!S!3v!S!^%T!_#R%T#R#S!3v#S#b%T#b#c!2w#c#o%T#p~%Ty!4rV$QWO!Q%T!Q!Y!5X!Y!^%T!_#R%T#R#S!5X#S#o%T#p~%Ty!5`X$QWjqO!Q%T!Q!Y!5X!Y!^%T!_#R%T#R#S!5X#S#b%T#b#c!2w#c#o%T#p~%Ty!6QZ$QWO!Q%T!Q![!6s![!^%T!_!c%T!c!i!6s!i#R%T#R#S!6s#S#T%T#T#Z!6s#Z#o%T#p~%Ty!6z]$QWjqO!Q%T!Q![!6s![!^%T!_!c%T!c!i!6s!i#R%T#R#S!6s#S#T%T#T#Z!6s#Z#b%T#b#c!2w#c#o%T#p~%T%w!7|R!XV$QW#i%hO!^%T!_#o%T#p~%T!P!8^R^w$QWO!^%T!_#o%T#p~%T+c!8rR']d!]%Y#t&s'zP!P!Q!8{!^!_!9Q!_!`!9_W!9QO$SW#v!9VP#[#v!_!`!9Y#v!9_O#k#v#v!9dO#]#v%w!9kT!w%o$QWO!^%T!_!`'v!`!a!9z!a#o%T#p~%T$P!:RR#S#w$QWO!^%T!_#o%T#p~%T%w!:gT'[!s#]#v#}S$QWO!^%T!_!`!:v!`!a!;W!a#o%T#p~%T$O!:}R#]#v$QWO!^%T!_#o%T#p~%T$O!;_T#[#v$QWO!^%T!_!`5T!`!a!;n!a#o%T#p~%T$O!;uS#[#v$QWO!^%T!_!`5T!`#o%T#p~%T%w!<YV'n%o$QWO!O%T!O!P!<o!P!^%T!_!a%T!a!b!=P!b#o%T#p~%T$`!<vRs$W$QWO!^%T!_#o%T#p~%T$O!=WS$QW#f#vO!^%T!_!`5T!`#o%T#p~%T&e!=kRu&]$QWO!^%T!_#o%T#p~%TZ!={RzR$QWO!^%T!_#o%T#p~%T$O!>]S#c#v$QWO!^%T!_!`5T!`#o%T#p~%T$P!>pR$QW'a#wO!^%T!_#o%T#p~%T~!?OO!P~%r!?VT'u%j$QWO!^%T!_!`5T!`#o%T#p#q!=P#q~%T$u!?oR!O$k$QW'cQO!^%T!_#o%T#p~%TX!@PR!gP$QWO!^%T!_#o%T#p~%T,T!@gr$QW'T+{#vS'W%k'dpOX%TXY%cYZ%TZ[%c[p%Tpq%cqt%Ttu2`u}%T}!O3j!O!Q%T!Q![2`![!^%T!_!c%T!c!}2`!}#R%T#R#S2`#S#T%T#T#o2`#p$f%T$f$g%c$g#BY2`#BY#BZ!@Y#BZ$IS2`$IS$I_!@Y$I_$JT2`$JT$JU!@Y$JU$KV2`$KV$KW!@Y$KW&FU2`&FU&FV!@Y&FV?HT2`?HT?HU!@Y?HU~2`,T!CO_$QW'U+{#vS'W%k'dpOt%Ttu2`u}%T}!O3j!O!Q%T!Q![2`![!^%T!_!c%T!c!}2`!}#R%T#R#S2`#S#T%T#T#o2`#p$g%T$g~2`",
++  tokenData: "!F_~R!`OX%TXY%cYZ'RZ[%c[]%T]^'R^p%Tpq%cqr'crs(kst0htu2`uv4pvw5ewx6cxy<yyz=Zz{=k{|>k|}?O}!O>k!O!P?`!P!QCl!Q!R!0[!R![!1q![!]!7s!]!^!8V!^!_!8g!_!`!9d!`!a!:[!a!b!<R!b!c%T!c!}2`!}#O!=d#O#P%T#P#Q!=t#Q#R!>U#R#S2`#S#T!>i#T#o!>y#o#p!AZ#p#q!A`#q#r!Av#r#s!BY#s$f%T$f$g%c$g#BY2`#BY#BZ!Bj#BZ$IS2`$IS$I_!Bj$I_$I|2`$I|$I}!ER$I}$JO!ER$JO$JT2`$JT$JU!Bj$JU$KV2`$KV$KW!Bj$KW&FU2`&FU&FV!Bj&FV?HT2`?HT?HU!Bj?HU~2`W%YR$SWO!^%T!_#o%T#p~%T,T%jg$SW'V+{OX%TXY%cYZ%TZ[%c[p%Tpq%cq!^%T!_#o%T#p$f%T$f$g%c$g#BY%T#BY#BZ%c#BZ$IS%T$IS$I_%c$I_$JT%T$JT$JU%c$JU$KV%T$KV$KW%c$KW&FU%T&FU&FV%c&FV?HT%T?HT?HU%c?HU~%T,T'YR$SW'W+{O!^%T!_#o%T#p~%T$T'jS$SW!f#{O!^%T!_!`'v!`#o%T#p~%T$O'}S#a#v$SWO!^%T!_!`(Z!`#o%T#p~%T$O(bR#a#v$SWO!^%T!_#o%T#p~%T'u(rZ$SW]!ROY(kYZ)eZr(krs*rs!^(k!^!_+U!_#O(k#O#P-b#P#o(k#o#p+U#p~(k&r)jV$SWOr)ers*Ps!^)e!^!_*a!_#o)e#o#p*a#p~)e&r*WR#}&j$SWO!^%T!_#o%T#p~%T&j*dROr*ars*ms~*a&j*rO#}&j'u*{R#}&j$SW]!RO!^%T!_#o%T#p~%T'm+ZV]!ROY+UYZ*aZr+Urs+ps#O+U#O#P+w#P~+U'm+wO#}&j]!R'm+zROr+Urs,Ts~+U'm,[U#}&j]!ROY,nZr,nrs-Vs#O,n#O#P-[#P~,n!R,sU]!ROY,nZr,nrs-Vs#O,n#O#P-[#P~,n!R-[O]!R!R-_PO~,n'u-gV$SWOr(krs-|s!^(k!^!_+U!_#o(k#o#p+U#p~(k'u.VZ#}&j$SW]!ROY.xYZ%TZr.xrs/rs!^.x!^!_,n!_#O.x#O#P0S#P#o.x#o#p,n#p~.x!Z/PZ$SW]!ROY.xYZ%TZr.xrs/rs!^.x!^!_,n!_#O.x#O#P0S#P#o.x#o#p,n#p~.x!Z/yR$SW]!RO!^%T!_#o%T#p~%T!Z0XT$SWO!^.x!^!_,n!_#o.x#o#p,n#p~.xy0mZ$SWOt%Ttu1`u!^%T!_!c%T!c!}1`!}#R%T#R#S1`#S#T%T#T#o1`#p$g%T$g~1`y1g]$SW'oqOt%Ttu1`u!Q%T!Q![1`![!^%T!_!c%T!c!}1`!}#R%T#R#S1`#S#T%T#T#o1`#p$g%T$g~1`&i2k_$SW'fp'Y%k#vSOt%Ttu2`u}%T}!O3j!O!Q%T!Q![2`![!^%T!_!c%T!c!}2`!}#R%T#R#S2`#S#T%T#T#o2`#p$g%T$g~2`[3q_$SW#vSOt%Ttu3ju}%T}!O3j!O!Q%T!Q![3j![!^%T!_!c%T!c!}3j!}#R%T#R#S3j#S#T%T#T#o3j#p$g%T$g~3j$O4wS#Y#v$SWO!^%T!_!`5T!`#o%T#p~%T$O5[R$SW#k#vO!^%T!_#o%T#p~%T%r5lU'x%j$SWOv%Tvw6Ow!^%T!_!`5T!`#o%T#p~%T$O6VS$SW#e#vO!^%T!_!`5T!`#o%T#p~%T'u6jZ$SW]!ROY6cYZ7]Zw6cwx*rx!^6c!^!_8T!_#O6c#O#P:T#P#o6c#o#p8T#p~6c&r7bV$SWOw7]wx*Px!^7]!^!_7w!_#o7]#o#p7w#p~7]&j7zROw7wwx*mx~7w'm8YV]!ROY8TYZ7wZw8Twx+px#O8T#O#P8o#P~8T'm8rROw8Twx8{x~8T'm9SU#}&j]!ROY9fZw9fwx-Vx#O9f#O#P9}#P~9f!R9kU]!ROY9fZw9fwx-Vx#O9f#O#P9}#P~9f!R:QPO~9f'u:YV$SWOw6cwx:ox!^6c!^!_8T!_#o6c#o#p8T#p~6c'u:xZ#}&j$SW]!ROY;kYZ%TZw;kwx/rx!^;k!^!_9f!_#O;k#O#P<e#P#o;k#o#p9f#p~;k!Z;rZ$SW]!ROY;kYZ%TZw;kwx/rx!^;k!^!_9f!_#O;k#O#P<e#P#o;k#o#p9f#p~;k!Z<jT$SWO!^;k!^!_9f!_#o;k#o#p9f#p~;k%V=QR!`$}$SWO!^%T!_#o%T#p~%TZ=bR!_R$SWO!^%T!_#o%T#p~%T%R=tU'Z!R#Z#v$SWOz%Tz{>W{!^%T!_!`5T!`#o%T#p~%T$O>_S#W#v$SWO!^%T!_!`5T!`#o%T#p~%T$u>rSi$m$SWO!^%T!_!`5T!`#o%T#p~%T&i?VR}&a$SWO!^%T!_#o%T#p~%T&i?gVr%n$SWO!O%T!O!P?|!P!Q%T!Q![@r![!^%T!_#o%T#p~%Ty@RT$SWO!O%T!O!P@b!P!^%T!_#o%T#p~%Ty@iR|q$SWO!^%T!_#o%T#p~%Ty@yZ$SWjqO!Q%T!Q![@r![!^%T!_!g%T!g!hAl!h#R%T#R#S@r#S#X%T#X#YAl#Y#o%T#p~%TyAqZ$SWO{%T{|Bd|}%T}!OBd!O!Q%T!Q![CO![!^%T!_#R%T#R#SCO#S#o%T#p~%TyBiV$SWO!Q%T!Q![CO![!^%T!_#R%T#R#SCO#S#o%T#p~%TyCVV$SWjqO!Q%T!Q![CO![!^%T!_#R%T#R#SCO#S#o%T#p~%T,TCs`$SW#X#vOYDuYZ%TZzDuz{Jl{!PDu!P!Q!-e!Q!^Du!^!_Fx!_!`!.^!`!a!/]!a!}Du!}#OHq#O#PJQ#P#oDu#o#pFx#p~DuXD|[$SWyPOYDuYZ%TZ!PDu!P!QEr!Q!^Du!^!_Fx!_!}Du!}#OHq#O#PJQ#P#oDu#o#pFx#p~DuXEy_$SWyPO!^%T!_#Z%T#Z#[Er#[#]%T#]#^Er#^#a%T#a#bEr#b#g%T#g#hEr#h#i%T#i#jEr#j#m%T#m#nEr#n#o%T#p~%TPF}VyPOYFxZ!PFx!P!QGd!Q!}Fx!}#OG{#O#PHh#P~FxPGiUyP#Z#[Gd#]#^Gd#a#bGd#g#hGd#i#jGd#m#nGdPHOTOYG{Z#OG{#O#PH_#P#QFx#Q~G{PHbQOYG{Z~G{PHkQOYFxZ~FxXHvY$SWOYHqYZ%TZ!^Hq!^!_G{!_#OHq#O#PIf#P#QDu#Q#oHq#o#pG{#p~HqXIkV$SWOYHqYZ%TZ!^Hq!^!_G{!_#oHq#o#pG{#p~HqXJVV$SWOYDuYZ%TZ!^Du!^!_Fx!_#oDu#o#pFx#p~Du,TJs^$SWyPOYJlYZKoZzJlz{NQ{!PJl!P!Q!,R!Q!^Jl!^!_!!]!_!}Jl!}#O!'|#O#P!+a#P#oJl#o#p!!]#p~Jl,TKtV$SWOzKoz{LZ{!^Ko!^!_M]!_#oKo#o#pM]#p~Ko,TL`X$SWOzKoz{LZ{!PKo!P!QL{!Q!^Ko!^!_M]!_#oKo#o#pM]#p~Ko,TMSR$SWT+{O!^%T!_#o%T#p~%T+{M`ROzM]z{Mi{~M]+{MlTOzM]z{Mi{!PM]!P!QM{!Q~M]+{NQOT+{,TNX^$SWyPOYJlYZKoZzJlz{NQ{!PJl!P!Q! T!Q!^Jl!^!_!!]!_!}Jl!}#O!'|#O#P!+a#P#oJl#o#p!!]#p~Jl,T! ^_$SWT+{yPO!^%T!_#Z%T#Z#[Er#[#]%T#]#^Er#^#a%T#a#bEr#b#g%T#g#hEr#h#i%T#i#jEr#j#m%T#m#nEr#n#o%T#p~%T+{!!bYyPOY!!]YZM]Zz!!]z{!#Q{!P!!]!P!Q!&x!Q!}!!]!}#O!$`#O#P!&f#P~!!]+{!#VYyPOY!!]YZM]Zz!!]z{!#Q{!P!!]!P!Q!#u!Q!}!!]!}#O!$`#O#P!&f#P~!!]+{!#|UT+{yP#Z#[Gd#]#^Gd#a#bGd#g#hGd#i#jGd#m#nGd+{!$cWOY!$`YZM]Zz!$`z{!${{#O!$`#O#P!&S#P#Q!!]#Q~!$`+{!%OYOY!$`YZM]Zz!$`z{!${{!P!$`!P!Q!%n!Q#O!$`#O#P!&S#P#Q!!]#Q~!$`+{!%sTT+{OYG{Z#OG{#O#PH_#P#QFx#Q~G{+{!&VTOY!$`YZM]Zz!$`z{!${{~!$`+{!&iTOY!!]YZM]Zz!!]z{!#Q{~!!]+{!&}_yPOzM]z{Mi{#ZM]#Z#[!&x#[#]M]#]#^!&x#^#aM]#a#b!&x#b#gM]#g#h!&x#h#iM]#i#j!&x#j#mM]#m#n!&x#n~M],T!(R[$SWOY!'|YZKoZz!'|z{!(w{!^!'|!^!_!$`!_#O!'|#O#P!*o#P#QJl#Q#o!'|#o#p!$`#p~!'|,T!(|^$SWOY!'|YZKoZz!'|z{!(w{!P!'|!P!Q!)x!Q!^!'|!^!_!$`!_#O!'|#O#P!*o#P#QJl#Q#o!'|#o#p!$`#p~!'|,T!*PY$SWT+{OYHqYZ%TZ!^Hq!^!_G{!_#OHq#O#PIf#P#QDu#Q#oHq#o#pG{#p~Hq,T!*tX$SWOY!'|YZKoZz!'|z{!(w{!^!'|!^!_!$`!_#o!'|#o#p!$`#p~!'|,T!+fX$SWOYJlYZKoZzJlz{NQ{!^Jl!^!_!!]!_#oJl#o#p!!]#p~Jl,T!,Yc$SWyPOzKoz{LZ{!^Ko!^!_M]!_#ZKo#Z#[!,R#[#]Ko#]#^!,R#^#aKo#a#b!,R#b#gKo#g#h!,R#h#iKo#i#j!,R#j#mKo#m#n!,R#n#oKo#o#pM]#p~Ko,T!-lV$SWS+{OY!-eYZ%TZ!^!-e!^!_!.R!_#o!-e#o#p!.R#p~!-e+{!.WQS+{OY!.RZ~!.R$P!.g[$SW#k#vyPOYDuYZ%TZ!PDu!P!QEr!Q!^Du!^!_Fx!_!}Du!}#OHq#O#PJQ#P#oDu#o#pFx#p~Du]!/f[#sS$SWyPOYDuYZ%TZ!PDu!P!QEr!Q!^Du!^!_Fx!_!}Du!}#OHq#O#PJQ#P#oDu#o#pFx#p~Duy!0cd$SWjqO!O%T!O!P@r!P!Q%T!Q![!1q![!^%T!_!g%T!g!hAl!h#R%T#R#S!1q#S#U%T#U#V!3X#V#X%T#X#YAl#Y#b%T#b#c!2w#c#d!4m#d#l%T#l#m!5{#m#o%T#p~%Ty!1x_$SWjqO!O%T!O!P@r!P!Q%T!Q![!1q![!^%T!_!g%T!g!hAl!h#R%T#R#S!1q#S#X%T#X#YAl#Y#b%T#b#c!2w#c#o%T#p~%Ty!3OR$SWjqO!^%T!_#o%T#p~%Ty!3^W$SWO!Q%T!Q!R!3v!R!S!3v!S!^%T!_#R%T#R#S!3v#S#o%T#p~%Ty!3}Y$SWjqO!Q%T!Q!R!3v!R!S!3v!S!^%T!_#R%T#R#S!3v#S#b%T#b#c!2w#c#o%T#p~%Ty!4rV$SWO!Q%T!Q!Y!5X!Y!^%T!_#R%T#R#S!5X#S#o%T#p~%Ty!5`X$SWjqO!Q%T!Q!Y!5X!Y!^%T!_#R%T#R#S!5X#S#b%T#b#c!2w#c#o%T#p~%Ty!6QZ$SWO!Q%T!Q![!6s![!^%T!_!c%T!c!i!6s!i#R%T#R#S!6s#S#T%T#T#Z!6s#Z#o%T#p~%Ty!6z]$SWjqO!Q%T!Q![!6s![!^%T!_!c%T!c!i!6s!i#R%T#R#S!6s#S#T%T#T#Z!6s#Z#b%T#b#c!2w#c#o%T#p~%T%w!7|R!XV$SW#i%hO!^%T!_#o%T#p~%T!P!8^R^w$SWO!^%T!_#o%T#p~%T+c!8rR'_d!]%Y#t&s'|P!P!Q!8{!^!_!9Q!_!`!9_W!9QO$UW#v!9VP#[#v!_!`!9Y#v!9_O#k#v#v!9dO#]#v%w!9kT!w%o$SWO!^%T!_!`'v!`!a!9z!a#o%T#p~%T$P!:RR#S#w$SWO!^%T!_#o%T#p~%T%w!:gT'^!s#]#v$PS$SWO!^%T!_!`!:v!`!a!;W!a#o%T#p~%T$O!:}R#]#v$SWO!^%T!_#o%T#p~%T$O!;_T#[#v$SWO!^%T!_!`5T!`!a!;n!a#o%T#p~%T$O!;uS#[#v$SWO!^%T!_!`5T!`#o%T#p~%T%w!<YV'p%o$SWO!O%T!O!P!<o!P!^%T!_!a%T!a!b!=P!b#o%T#p~%T$`!<vRs$W$SWO!^%T!_#o%T#p~%T$O!=WS$SW#f#vO!^%T!_!`5T!`#o%T#p~%T&e!=kRu&]$SWO!^%T!_#o%T#p~%TZ!={RzR$SWO!^%T!_#o%T#p~%T$O!>]S#c#v$SWO!^%T!_!`5T!`#o%T#p~%T$P!>pR$SW'c#wO!^%T!_#o%T#p~%T&i!?U_$SW'fp'Y%k#xSOt%Ttu!>yu}%T}!O!@T!O!Q%T!Q![!>y![!^%T!_!c%T!c!}!>y!}#R%T#R#S!>y#S#T%T#T#o!>y#p$g%T$g~!>y[!@[_$SW#xSOt%Ttu!@Tu}%T}!O!@T!O!Q%T!Q![!@T![!^%T!_!c%T!c!}!@T!}#R%T#R#S!@T#S#T%T#T#o!@T#p$g%T$g~!@T~!A`O!P~%r!AgT'w%j$SWO!^%T!_!`5T!`#o%T#p#q!=P#q~%T$u!BPR!O$k$SW'eQO!^%T!_#o%T#p~%TX!BaR!gP$SWO!^%T!_#o%T#p~%T,T!Bwr$SW'V+{'fp'Y%k#vSOX%TXY%cYZ%TZ[%c[p%Tpq%cqt%Ttu2`u}%T}!O3j!O!Q%T!Q![2`![!^%T!_!c%T!c!}2`!}#R%T#R#S2`#S#T%T#T#o2`#p$f%T$f$g%c$g#BY2`#BY#BZ!Bj#BZ$IS2`$IS$I_!Bj$I_$JT2`$JT$JU!Bj$JU$KV2`$KV$KW!Bj$KW&FU2`&FU&FV!Bj&FV?HT2`?HT?HU!Bj?HU~2`,T!E`_$SW'W+{'fp'Y%k#vSOt%Ttu2`u}%T}!O3j!O!Q%T!Q![2`![!^%T!_!c%T!c!}2`!}#R%T#R#S2`#S#T%T#T#o2`#p$g%T$g~2`",
+   tokenizers: [noSemicolon, incdecToken, template, 0, 1, 2, 3, 4, 5, 6, 7, 8, insertSemicolon],
+   topRules: {"Script":[0,6]},
+-  dialects: {jsx: 11282, ts: 11284},
+-  dynamicPrecedences: {"145":1,"172":1},
+-  specialized: [{term: 284, get: (value, stack) => (tsExtends(value, stack) << 1)},{term: 284, get: value => spec_identifier[value] || -1},{term: 296, get: value => spec_word[value] || -1},{term: 59, get: value => spec_LessThan[value] || -1}],
+-  tokenPrec: 11305
++  dialects: {jsx: 11332, ts: 11334},
++  dynamicPrecedences: {"147":1,"174":1},
++  specialized: [{term: 286, get: (value, stack) => (tsExtends(value, stack) << 1)},{term: 286, get: value => spec_identifier[value] || -1},{term: 298, get: value => spec_word[value] || -1},{term: 59, get: value => spec_LessThan[value] || -1}],
++  tokenPrec: 11355
+ });
+ 
+ export { parser };
+diff --git a/node_modules/@lezer/javascript/src/javascript.grammar b/node_modules/@lezer/javascript/src/javascript.grammar
+index a45c690..1870aa7 100644
+--- a/node_modules/@lezer/javascript/src/javascript.grammar
++++ b/node_modules/@lezer/javascript/src/javascript.grammar
+@@ -460,17 +460,18 @@ JSXCloseTag { JSXStartCloseTag jsxElementName? JSXEndTag }
+ 
+ jsxElementName {
+   JSXIdentifier |
++  JSXBuiltin { JSXLowerIdentifier } |
+   JSXNamespacedName |
+   JSXMemberExpression
+ }
+ 
+-JSXMemberExpression { (JSXMemberExpression | JSXIdentifier) "." JSXIdentifier }
++JSXMemberExpression { (JSXMemberExpression | JSXIdentifier | JSXLowerIdentifier) "." (JSXIdentifier | JSXLowerIdentifier) }
+ 
+-JSXNamespacedName { (JSXIdentifier | JSXNamespacedName) ":" JSXIdentifier }
++JSXNamespacedName { (JSXIdentifier | JSXNamespacedName | JSXLowerIdentifier) ":" (JSXIdentifier | JSXLowerIdentifier) }
+ 
+ jsxAttribute {
+   JSXSpreadAttribute { "{" "..." expression "}" } |
+-  JSXAttribute { (JSXIdentifier | JSXNamespacedName) ("=" jsxAttributeValue)? }
++  JSXAttribute { (JSXIdentifier | JSXNamespacedName | JSXLowerIdentifier) ("=" jsxAttributeValue)? }
+ }
+ 
+ jsxAttributeValue {
+@@ -583,7 +584,7 @@ questionOp[@name=LogicOp] { "?" }
+ 
+   @precedence { spaces, newline, identifier }
+ 
+-  @precedence { spaces, newline, JSXIdentifier }
++  @precedence { spaces, newline, JSXIdentifier, JSXLowerIdentifier }
+ 
+   @precedence { spaces, newline, word }
+ 
+@@ -623,7 +624,9 @@ questionOp[@name=LogicOp] { "?" }
+ 
+   "?." "." "," ";" ":"
+ 
+-  JSXIdentifier { identifierChar (identifierChar | std.digit | "-")* }
++  JSXIdentifier { $[A-Z_$\u{a1}-\u{10ffff}] (identifierChar | std.digit | "-")* }
++
++  JSXLowerIdentifier[@name=JSXIdentifier] { $[a-z] (identifierChar | std.digit | "-")* }
+ 
+   JSXAttributeValue { '"' !["]* '"' | "'" ![']* "'" }
+ 
+diff --git a/node_modules/@lezer/javascript/src/parser.js b/node_modules/@lezer/javascript/src/parser.js
+index 53f4486..0ee4c3f 100644
+--- a/node_modules/@lezer/javascript/src/parser.js
++++ b/node_modules/@lezer/javascript/src/parser.js
+@@ -3,29 +3,29 @@ import {LRParser} from "@lezer/lr"
+ import {noSemicolon, incdecToken, template, insertSemicolon, tsExtends} from "./tokens"
+ import {trackNewline} from "./tokens.js"
+ import {NodeProp} from "@lezer/common"
+-const spec_identifier = {__proto__:null,export:16, as:21, from:25, default:30, async:35, function:36, this:46, true:54, false:54, void:60, typeof:64, null:78, super:80, new:114, await:131, yield:133, delete:134, class:144, extends:146, public:189, private:189, protected:189, readonly:191, instanceof:212, in:214, const:216, import:248, keyof:299, unique:303, infer:309, is:343, abstract:363, implements:365, type:367, let:370, var:372, interface:379, enum:383, namespace:389, module:391, declare:395, global:399, for:420, of:429, while:432, with:436, do:440, if:444, else:446, switch:450, case:456, try:462, catch:464, finally:466, return:470, throw:474, break:478, continue:482, debugger:486}
+-const spec_word = {__proto__:null,async:101, get:103, set:105, public:153, private:153, protected:153, static:155, abstract:157, override:159, readonly:165, new:347}
++const spec_identifier = {__proto__:null,export:16, as:21, from:25, default:30, async:35, function:36, this:46, true:54, false:54, void:60, typeof:64, null:78, super:80, new:114, await:131, yield:133, delete:134, class:144, extends:146, public:189, private:189, protected:189, readonly:191, instanceof:212, in:214, const:216, import:248, keyof:303, unique:307, infer:313, is:347, abstract:367, implements:369, type:371, let:374, var:376, interface:383, enum:387, namespace:393, module:395, declare:399, global:403, for:424, of:433, while:436, with:440, do:444, if:448, else:450, switch:454, case:460, try:466, catch:468, finally:470, return:474, throw:478, break:482, continue:486, debugger:490}
++const spec_word = {__proto__:null,async:101, get:103, set:105, public:153, private:153, protected:153, static:155, abstract:157, override:159, readonly:165, new:351}
+ const spec_LessThan = {__proto__:null,"<":121}
+ export const parser = LRParser.deserialize({
+   version: 13,
+-  states: "$1WO`QYOOO'QQ!LdO'#CgO'XOSO'#DSO)dQYO'#DXO)tQYO'#DdO){QYO'#DnO-xQYO'#DtOOQO'#EX'#EXO.]QWO'#EWO.bQWO'#EWOOQ!LS'#Eb'#EbO0aQ!LdO'#IqO2wQ!LdO'#IrO3eQWO'#EvO3jQpO'#F]OOQ!LS'#FO'#FOO3rO!bO'#FOO4QQWO'#FdO5_QWO'#FcOOQ!LS'#Ir'#IrOOQ!LQ'#Iq'#IqOOQQ'#J['#J[O5dQWO'#HjO5iQ!LYO'#HkOOQQ'#Ic'#IcOOQQ'#Hl'#HlQ`QYOOO){QYO'#DfO5qQWO'#GWO5vQ#tO'#ClO6UQWO'#EVO6aQWO'#EcO6fQ#tO'#E}O7QQWO'#GWO7VQWO'#G[O7bQWO'#G[O7pQWO'#G_O7pQWO'#G`O7pQWO'#GbO5qQWO'#GeO8aQWO'#GhO9oQWO'#CcO:PQWO'#GuO:XQWO'#G{O:XQWO'#G}O`QYO'#HPO:XQWO'#HRO:XQWO'#HUO:^QWO'#H[O:cQ!LZO'#H`O){QYO'#HbO:nQ!LZO'#HdO:yQ!LZO'#HfO5iQ!LYO'#HhO){QYO'#IsOOOS'#Hn'#HnO;UOSO,59nOOQ!LS,59n,59nO=gQbO'#CgO=qQYO'#HoO>OQWO'#ItO?}QbO'#ItO'dQYO'#ItO@UQWO,59sO@lQ&jO'#D^OAeQWO'#EXOArQWO'#JPOA}QWO'#JOOBVQWO,5:uOB[QWO'#I}OBcQWO'#DuO5vQ#tO'#EVOBqQWO'#EVOB|Q`O'#E}OOQ!LS,5:O,5:OOCUQYO,5:OOESQ!LdO,5:YOEpQWO,5:`OFZQ!LYO'#I|O7VQWO'#I{OFbQWO'#I{OFjQWO,5:tOFoQWO'#I{OF}QYO,5:rOH}QWO'#ESOJXQWO,5:rOKhQWO'#DhOKoQYO'#DmOKyQ&jO,5:{O){QYO,5:{OOQQ'#En'#EnOOQQ'#Ep'#EpO){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}OOQQ'#Et'#EtOLRQYO,5;_OOQ!LS,5;d,5;dOOQ!LS,5;e,5;eONRQWO,5;eOOQ!LS,5;f,5;fO){QYO'#HyONWQ!LYO,5<PONrQWO,5:}O){QYO,5;bO! [QpO'#JTONyQpO'#JTO! cQpO'#JTO! tQpO,5;mOOOO,5;w,5;wO!!SQYO'#F_OOOO'#Hx'#HxO3rO!bO,5;jO!!ZQpO'#FaOOQ!LS,5;j,5;jO!!wQ,UO'#CqOOQ!LS'#Ct'#CtO!#[QWO'#CtO!#aOSO'#CxO!#}Q#tO,5;|O!$UQWO,5<OO!%bQWO'#FnO!%oQWO'#FoO!%tQWO'#FsO!&vQ&jO'#FwO!'iQ,UO'#IlOOQ!LS'#Il'#IlO!'sQWO'#IkO!(RQWO'#IjOOQ!LS'#Cr'#CrOOQ!LS'#Cy'#CyO!(ZQWO'#C{OJ^QWO'#FfOJ^QWO'#FhO!(`QWO'#FjO!(eQWO'#FkO!(jQWO'#FqOJ^QWO'#FvO!(oQWO'#EYO!)WQWO,5;}O`QYO,5>UOOQQ'#If'#IfOOQQ,5>V,5>VOOQQ-E;j-E;jO!+SQ!LdO,5:QOOQ!LQ'#Co'#CoO!+sQ#tO,5<rOOQO'#Ce'#CeO!,UQWO'#CpO!,^Q!LYO'#IgO5_QWO'#IgO:^QWO,59WO!,lQpO,59WO!,tQ#tO,59WO5vQ#tO,59WO!-PQWO,5:rO!-XQWO'#GtO!-dQWO'#J`O){QYO,5;gO!-lQ&jO,5;iO!-qQWO,5=_O!-vQWO,5=_O!-{QWO,5=_O5iQ!LYO,5=_O5qQWO,5<rO!.ZQWO'#EZO!.lQ&jO'#E[OOQ!LQ'#I}'#I}O!.}Q!LYO'#J]O5iQ!LYO,5<vO7pQWO,5<|OOQO'#Cq'#CqO!/YQpO,5<yO!/bQ#tO,5<zO!/mQWO,5<|O!/rQ`O,5=PO:^QWO'#GjO5qQWO'#GlO!/zQWO'#GlO5vQ#tO'#GoO!0PQWO'#GoOOQQ,5=S,5=SO!0UQWO'#GpO!0^QWO'#ClO!0cQWO,58}O!0mQWO,58}O!2oQYO,58}OOQQ,58},58}O!2|Q!LYO,58}O){QYO,58}O!3XQYO'#GwOOQQ'#Gx'#GxOOQQ'#Gy'#GyO`QYO,5=aO!3iQWO,5=aO){QYO'#DtO`QYO,5=gO`QYO,5=iO!3nQWO,5=kO`QYO,5=mO!3sQWO,5=pO!3xQYO,5=vOOQQ,5=z,5=zO){QYO,5=zO5iQ!LYO,5=|OOQQ,5>O,5>OO!7yQWO,5>OOOQQ,5>Q,5>QO!7yQWO,5>QOOQQ,5>S,5>SO!8OQ`O,5?_OOOS-E;l-E;lOOQ!LS1G/Y1G/YO!8TQbO,5>ZO){QYO,5>ZOOQO-E;m-E;mO!8_QWO,5?`O!8gQbO,5?`O!8nQWO,5?jOOQ!LS1G/_1G/_O!8vQpO'#DQOOQO'#Iv'#IvO){QYO'#IvO!9eQpO'#IvO!:SQpO'#D_O!:eQ&jO'#D_O!<pQYO'#D_O!<wQWO'#IuO!=PQWO,59xO!=UQWO'#E]O!=dQWO'#JQO!=lQWO,5:vO!>SQ&jO'#D_O){QYO,5?kO!>^QWO'#HtO!8nQWO,5?jOOQ!LQ1G0a1G0aO!?jQ&jO'#DxOOQ!LS,5:a,5:aO){QYO,5:aOH}QWO,5:aO!?qQWO,5:aO:^QWO,5:qO!,lQpO,5:qO!,tQ#tO,5:qO5vQ#tO,5:qOOQ!LS1G/j1G/jOOQ!LS1G/z1G/zOOQ!LQ'#ER'#ERO){QYO,5?hO!?|Q!LYO,5?hO!@_Q!LYO,5?hO!@fQWO,5?gO!@nQWO'#HvO!@fQWO,5?gOOQ!LQ1G0`1G0`O7VQWO,5?gOOQ!LS1G0^1G0^O!AYQ!LdO1G0^O!AyQ!LbO,5:nOOQ!LS'#Fm'#FmO!BgQ!LdO'#IlOF}QYO1G0^O!DfQ#tO'#IwO!DpQWO,5:SO!DuQbO'#IxO){QYO'#IxO!EPQWO,5:XOOQ!LS'#DQ'#DQOOQ!LS1G0g1G0gO!EUQWO1G0gO!GgQ!LdO1G0iO!GnQ!LdO1G0iO!JRQ!LdO1G0iO!JYQ!LdO1G0iO!LaQ!LdO1G0iO!LtQ!LdO1G0iO# eQ!LdO1G0iO# lQ!LdO1G0iO#$PQ!LdO1G0iO#$WQ!LdO1G0iO#%{Q!LdO1G0iO#(uQ7^O'#CgO#*pQ7^O1G0yO#,kQ7^O'#IrOOQ!LS1G1P1G1PO#-OQ!LdO,5>eOOQ!LQ-E;w-E;wO#-oQ!LdO1G0iOOQ!LS1G0i1G0iO#/qQ!LdO1G0|O#0bQpO,5;oO#0gQpO,5;pO#0lQpO'#FWO#1QQWO'#FVOOQO'#JU'#JUOOQO'#Hw'#HwO#1VQpO1G1XOOQ!LS1G1X1G1XOOOO1G1b1G1bO#1eQ7^O'#IqO#1oQWO,5;yOLRQYO,5;yOOOO-E;v-E;vOOQ!LS1G1U1G1UOOQ!LS,5;{,5;{O#1tQpO,5;{OOQ!LS,59`,59`OH}QWO'#InOOOS'#Hm'#HmO#1yOSO,59dOOQ!LS,59d,59dO){QYO1G1hO!(eQWO'#H{O#2UQWO,5<aOOQ!LS,5<^,5<^OOQO'#GR'#GROJ^QWO,5<lOOQO'#GT'#GTOJ^QWO,5<nOJ^QWO,5<pOOQO1G1j1G1jO#2aQ`O'#CoO#2tQ`O,5<YO#2{QWO'#JXO5qQWO'#JXO#3ZQWO,5<[OJ^QWO,5<ZO#3`Q`O'#FmO#3mQ`O'#JYO#3wQWO'#JYOH}QWO'#JYO#3|QWO,5<_OOQ!LQ'#Dc'#DcO#4RQWO'#FpO#4^QpO'#FxO!&qQ&jO'#FxO!&qQ&jO'#FzO#4oQWO'#F{O!(jQWO'#GOOOQO'#H}'#H}O#4tQ&jO,5<cOOQ!LS,5<c,5<cO#4{Q&jO'#FxO#5ZQ&jO'#FyO#5cQ&jO'#FyOOQ!LS,5<q,5<qOJ^QWO,5?VOJ^QWO,5?VO#5hQWO'#IOO#5sQWO,5?UOOQ!LS'#Cg'#CgO#6gQ#tO,59gOOQ!LS,59g,59gO#7YQ#tO,5<QO#7{Q#tO,5<SO#8VQWO,5<UOOQ!LS,5<V,5<VO#8[QWO,5<]O#8aQ#tO,5<bOF}QYO1G1iO#8qQWO1G1iOOQQ1G3p1G3pOOQ!LS1G/l1G/lONRQWO1G/lOOQQ1G2^1G2^OH}QWO1G2^O){QYO1G2^OH}QWO1G2^O#8vQWO1G2^O#9UQWO,59[O#:_QWO'#ESOOQ!LQ,5?R,5?RO#:iQ!LYO,5?ROOQQ1G.r1G.rO:^QWO1G.rO!,lQpO1G.rO!,tQ#tO1G.rO#:wQWO1G0^O#:|QWO'#CgO#;XQWO'#JaO#;aQWO,5=`O#;fQWO'#JaO#;kQWO'#JaO#;pQWO'#IWO#<OQWO,5?zO#<WQbO1G1ROOQ!LS1G1T1G1TO5qQWO1G2yO#<_QWO1G2yO#<dQWO1G2yO#<iQWO1G2yOOQQ1G2y1G2yO#<nQ#tO1G2^O7VQWO'#JOO7VQWO'#E]O7VQWO'#IQO#=PQ!LYO,5?wOOQQ1G2b1G2bO!/mQWO1G2hOH}QWO1G2eO#=[QWO1G2eOOQQ1G2f1G2fOH}QWO1G2fO#=aQWO1G2fO#=iQ&jO'#GdOOQQ1G2h1G2hO!&qQ&jO'#ISO!/rQ`O1G2kOOQQ1G2k1G2kOOQQ,5=U,5=UO#=qQ#tO,5=WO5qQWO,5=WO#4oQWO,5=ZO5_QWO,5=ZO!,lQpO,5=ZO!,tQ#tO,5=ZO5vQ#tO,5=ZO#>SQWO'#J_O#>_QWO,5=[OOQQ1G.i1G.iO#>dQ!LYO1G.iO#>oQWO1G.iO!(ZQWO1G.iO5iQ!LYO1G.iO#>tQbO,5?|O#?OQWO,5?|O#?ZQYO,5=cO#?bQWO,5=cO7VQWO,5?|OOQQ1G2{1G2{O`QYO1G2{OOQQ1G3R1G3ROOQQ1G3T1G3TO:XQWO1G3VO#?gQYO1G3XO#CbQYO'#HWOOQQ1G3[1G3[O:^QWO1G3bO#CoQWO1G3bO5iQ!LYO1G3fOOQQ1G3h1G3hOOQ!LQ'#Ft'#FtO5iQ!LYO1G3jO5iQ!LYO1G3lOOOS1G4y1G4yO#CwQ`O,5<PO#DPQbO1G3uO#DZQWO1G4zO#DcQWO1G5UO#DkQWO,5?bOLRQYO,5:wO7VQWO,5:wO:^QWO,59yOLRQYO,59yO!,lQpO,59yO#DpQ7^O,59yOOQO,5:w,5:wO#DzQ&jO'#HpO#EbQWO,5?aOOQ!LS1G/d1G/dO#EjQ&jO'#HuO#FOQWO,5?lOOQ!LQ1G0b1G0bO!:eQ&jO,59yO#FWQbO1G5VOOQO,5>`,5>`O7VQWO,5>`OOQO-E;r-E;rOOQ!LQ'#EO'#EOO#FbQ!LrO'#EPO!?bQ&jO'#DyOOQO'#Hs'#HsO#F|Q&jO,5:dOOQ!LS,5:d,5:dO#GTQ&jO'#DyO#GfQ&jO'#DyO#GmQ&jO'#EUO#GpQ&jO'#EPO#G}Q&jO'#EPO!?bQ&jO'#EPO#HbQWO1G/{O#HgQ`O1G/{OOQ!LS1G/{1G/{O){QYO1G/{OH}QWO1G/{OOQ!LS1G0]1G0]O:^QWO1G0]O!,lQpO1G0]O!,tQ#tO1G0]O#HnQ!LdO1G5SO){QYO1G5SO#IOQ!LYO1G5SO#IaQWO1G5RO7VQWO,5>bOOQO,5>b,5>bO#IiQWO,5>bOOQO-E;t-E;tO#IaQWO1G5RO#IwQ!LdO,59gO#KvQ!LdO,5<QO#MxQ!LdO,5<SO$ zQ!LdO,5<bOOQ!LS7+%x7+%xO$$SQ!LdO7+%xO$$sQWO'#HqO$$}QWO,5?cOOQ!LS1G/n1G/nO$%VQYO'#HrO$%dQWO,5?dO$%lQbO,5?dOOQ!LS1G/s1G/sOOQ!LS7+&R7+&RO$%vQ7^O,5:YO){QYO7+&eO$&QQ7^O,5:QOOQO1G1Z1G1ZOOQO1G1[1G1[O$&_QMhO,5;rOLRQYO,5;qOOQO-E;u-E;uOOQ!LS7+&s7+&sOOOO7+&|7+&|OOOO1G1e1G1eO$&jQWO1G1eOOQ!LS1G1g1G1gO$&oQ`O,5?YOOOS-E;k-E;kOOQ!LS1G/O1G/OO$&vQ!LdO7+'SOOQ!LS,5>g,5>gO$'gQWO,5>gOOQ!LS1G1{1G1{P$'lQWO'#H{POQ!LS-E;y-E;yO$(]Q#tO1G2WO$)OQ#tO1G2YO$)YQ#tO1G2[OOQ!LS1G1t1G1tO$)aQWO'#HzO$)oQWO,5?sO$)oQWO,5?sO$)wQWO,5?sO$*SQWO,5?sOOQO1G1v1G1vO$*bQ#tO1G1uO$*rQWO'#H|O$+SQWO,5?tOH}QWO,5?tO$+[Q`O,5?tOOQ!LS1G1y1G1yO5iQ!LYO,5<dO5iQ!LYO,5<eO$+fQWO,5<eO#4jQWO,5<eO!,lQpO,5<dO$+kQWO,5<fO5iQ!LYO,5<gO$+fQWO,5<jOOQO-E;{-E;{OOQ!LS1G1}1G1}O!&qQ&jO,5<dO$+sQWO,5<eO!&qQ&jO,5<fO!&qQ&jO,5<eO$,OQ#tO1G4qO$,YQ#tO1G4qOOQO,5>j,5>jOOQO-E;|-E;|O!-lQ&jO,59iO){QYO,59iO$,gQWO1G1pOJ^QWO1G1wO$,lQ!LdO7+'TOOQ!LS7+'T7+'TOF}QYO7+'TOOQ!LS7+%W7+%WO$-]Q`O'#JZO#HbQWO7+'xO$-gQWO7+'xO$-oQ`O7+'xOOQQ7+'x7+'xOH}QWO7+'xO){QYO7+'xOH}QWO7+'xOOQO1G.v1G.vO$-yQ!LbO'#CgO$.ZQ!LbO,5<hO$.xQWO,5<hOOQ!LQ1G4m1G4mOOQQ7+$^7+$^O:^QWO7+$^O!,lQpO7+$^OF}QYO7+%xO$.}QWO'#IVO$/]QWO,5?{OOQO1G2z1G2zO5qQWO,5?{O$/]QWO,5?{O$/eQWO,5?{OOQO,5>r,5>rOOQO-E<U-E<UOOQ!LS7+&m7+&mO$/jQWO7+(eO5iQ!LYO7+(eO5qQWO7+(eO$/oQWO7+(eO$/tQWO7+'xOOQ!LQ,5>l,5>lOOQ!LQ-E<O-E<OOOQQ7+(S7+(SO$0SQ!LbO7+(POH}QWO7+(PO$0^Q`O7+(QOOQQ7+(Q7+(QOH}QWO7+(QO$0eQWO'#J^O$0pQWO,5=OOOQO,5>n,5>nOOQO-E<Q-E<QOOQQ7+(V7+(VO$1jQ&jO'#GmOOQQ1G2r1G2rOH}QWO1G2rO){QYO1G2rOH}QWO1G2rO$1qQWO1G2rO$2PQ#tO1G2rO5iQ!LYO1G2uO#4oQWO1G2uO5_QWO1G2uO!,lQpO1G2uO!,tQ#tO1G2uO$2bQWO'#IUO$2mQWO,5?yO$2uQ&jO,5?yOOQ!LQ1G2v1G2vOOQQ7+$T7+$TO$2zQWO7+$TO5iQ!LYO7+$TO$3PQWO7+$TO){QYO1G5hO){QYO1G5iO$3UQYO1G2}O$3]QWO1G2}O$3bQYO1G2}O$3iQ!LYO1G5hOOQQ7+(g7+(gO5iQ!LYO7+(qO`QYO7+(sOOQQ'#Jd'#JdOOQQ'#IX'#IXO$3sQYO,5=rOOQQ,5=r,5=rO){QYO'#HXO$4QQWO'#HZOOQQ7+(|7+(|O$4VQYO7+(|O7VQWO7+(|OOQQ7+)Q7+)QOOQQ7+)U7+)UOOQQ7+)W7+)WOOQO1G4|1G4|O$8TQ7^O1G0cO$8_QWO1G0cOOQO1G/e1G/eO$8jQ7^O1G/eO:^QWO1G/eOLRQYO'#D_OOQO,5>[,5>[OOQO-E;n-E;nOOQO,5>a,5>aOOQO-E;s-E;sO!,lQpO1G/eOOQO1G3z1G3zO:^QWO,5:eOOQO,5:k,5:kO){QYO,5:kO$8tQ!LYO,5:kO$9PQ!LYO,5:kO!,lQpO,5:eOOQO-E;q-E;qOOQ!LS1G0O1G0OO!?bQ&jO,5:eO$9_Q&jO,5:eO$9pQ!LrO,5:kO$:[Q&jO,5:eO!?bQ&jO,5:kOOQO,5:p,5:pO$:cQ&jO,5:kO$:pQ!LYO,5:kOOQ!LS7+%g7+%gO#HbQWO7+%gO#HgQ`O7+%gOOQ!LS7+%w7+%wO:^QWO7+%wO!,lQpO7+%wO$;UQ!LdO7+*nO){QYO7+*nOOQO1G3|1G3|O7VQWO1G3|O$;fQWO7+*mO$;nQ!LdO1G2WO$=pQ!LdO1G2YO$?rQ!LdO1G1uO$AzQ#tO,5>]OOQO-E;o-E;oO$BUQbO,5>^O){QYO,5>^OOQO-E;p-E;pO$B`QWO1G5OO$BhQ7^O1G0^O$DoQ7^O1G0iO$DvQ7^O1G0iO$FwQ7^O1G0iO$GOQ7^O1G0iO$HsQ7^O1G0iO$IWQ7^O1G0iO$KeQ7^O1G0iO$KlQ7^O1G0iO$MmQ7^O1G0iO$MtQ7^O1G0iO% iQ7^O1G0iO% |Q!LdO<<JPO%!mQ7^O1G0iO%$]Q7^O'#IlO%&YQ7^O1G0|OLRQYO'#FYOOQO'#JV'#JVOOQO1G1^1G1^O%&gQWO1G1]O%&lQ7^O,5>eOOOO7+'P7+'POOOS1G4t1G4tOOQ!LS1G4R1G4ROJ^QWO7+'vO%&vQWO,5>fO5qQWO,5>fOOQO-E;x-E;xO%'UQWO1G5_O%'UQWO1G5_O%'^QWO1G5_O%'iQ`O,5>hO%'sQWO,5>hOH}QWO,5>hOOQO-E;z-E;zO%'xQ`O1G5`O%(SQWO1G5`OOQO1G2O1G2OOOQO1G2P1G2PO5iQ!LYO1G2PO$+fQWO1G2PO5iQ!LYO1G2OO%([QWO1G2QOH}QWO1G2QOOQO1G2R1G2RO5iQ!LYO1G2UO!,lQpO1G2OO#4jQWO1G2PO%(aQWO1G2QO%(iQWO1G2POJ^QWO7+*]OOQ!LS1G/T1G/TO%(tQWO1G/TOOQ!LS7+'[7+'[O%(yQ#tO7+'cO%)ZQ!LdO<<JoOOQ!LS<<Jo<<JoOH}QWO'#IPO%)zQWO,5?uOOQQ<<Kd<<KdOH}QWO<<KdO#HbQWO<<KdO%*SQWO<<KdO%*[Q`O<<KdOH}QWO1G2SOOQQ<<Gx<<GxO:^QWO<<GxO%*fQ!LdO<<IdOOQ!LS<<Id<<IdOOQO,5>q,5>qO%+VQWO,5>qO#;kQWO,5>qOOQO-E<T-E<TO%+[QWO1G5gO%+[QWO1G5gO5qQWO1G5gO%+dQWO<<LPOOQQ<<LP<<LPO%+iQWO<<LPO5iQ!LYO<<LPO){QYO<<KdOH}QWO<<KdOOQQ<<Kk<<KkO$0SQ!LbO<<KkOOQQ<<Kl<<KlO$0^Q`O<<KlO%+nQ&jO'#IRO%+yQWO,5?xOLRQYO,5?xOOQQ1G2j1G2jO#FbQ!LrO'#EPO!?bQ&jO'#GnOOQO'#IT'#ITO%,RQ&jO,5=XOOQQ,5=X,5=XO%,YQ&jO'#EPO%,eQ&jO'#EPO%,|Q&jO'#EPO%-WQ&jO'#GnO%-iQWO7+(^O%-nQWO7+(^O%-vQ`O7+(^OOQQ7+(^7+(^OH}QWO7+(^O){QYO7+(^OH}QWO7+(^O%.QQWO7+(^OOQQ7+(a7+(aO5iQ!LYO7+(aO#4oQWO7+(aO5_QWO7+(aO!,lQpO7+(aO%.`QWO,5>pOOQO-E<S-E<SOOQO'#Gq'#GqO%.kQWO1G5eO5iQ!LYO<<GoOOQQ<<Go<<GoO%.sQWO<<GoO%.xQWO7++SO%.}QWO7++TOOQQ7+(i7+(iO%/SQWO7+(iO%/XQYO7+(iO%/`QWO7+(iO){QYO7++SO){QYO7++TOOQQ<<L]<<L]OOQQ<<L_<<L_OOQQ-E<V-E<VOOQQ1G3^1G3^O%/eQWO,5=sOOQQ,5=u,5=uO:^QWO<<LhO%/jQWO<<LhOLRQYO7+%}OOQO7+%P7+%PO%/oQ7^O1G5VO:^QWO7+%POOQO1G0P1G0PO%/yQ!LdO1G0VOOQO1G0V1G0VO){QYO1G0VO%0TQ!LYO1G0VO:^QWO1G0PO!,lQpO1G0PO!?bQ&jO1G0PO%0`Q!LYO1G0VO%0nQ&jO1G0PO%1PQ!LYO1G0VO%1eQ!LrO1G0VO%1oQ&jO1G0PO!?bQ&jO1G0VOOQ!LS<<IR<<IROOQ!LS<<Ic<<IcO:^QWO<<IcO%1vQ!LdO<<NYOOQO7+)h7+)hO%2WQ!LdO7+'cO%4`QbO1G3xO%4jQ7^O7+%xO%4wQ7^O,59gO%6tQ7^O,5<QO%8qQ7^O,5<SO%:nQ7^O,5<bO%<^Q7^O7+'SO%<kQ7^O7+'TO%<xQWO,5;tOOQO7+&w7+&wO%<}Q#tO<<KbOOQO1G4Q1G4QO%=_QWO1G4QO%=jQWO1G4QO%=xQWO7+*yO%=xQWO7+*yOH}QWO1G4SO%>QQ`O1G4SO%>[QWO7+*zOOQO7+'k7+'kO5iQ!LYO7+'kOOQO7+'j7+'jO$+fQWO7+'lO%>dQ`O7+'lOOQO7+'p7+'pO5iQ!LYO7+'jO$+fQWO7+'kO%>kQWO7+'lOH}QWO7+'lO#4jQWO7+'kO%>pQ#tO<<MwOOQ!LS7+$o7+$oO%>zQ`O,5>kOOQO-E;}-E;}O#HbQWOANAOOOQQANAOANAOOH}QWOANAOO%?UQ!LbO7+'nOOQQAN=dAN=dO5qQWO1G4]OOQO1G4]1G4]O%?cQWO1G4]O%?hQWO7++RO%?hQWO7++RO5iQ!LYOANAkO%?pQWOANAkOOQQANAkANAkO%?uQWOANAOO%?}Q`OANAOOOQQANAVANAVOOQQANAWANAWO%@XQWO,5>mOOQO-E<P-E<PO%@dQ7^O1G5dO#4oQWO,5=YO5_QWO,5=YO!,lQpO,5=YOOQO-E<R-E<ROOQQ1G2s1G2sO$9pQ!LrO,5:kO!?bQ&jO,5=YO%@nQ&jO,5=YO%APQ&jO,5:kOOQQ<<Kx<<KxOH}QWO<<KxO%-iQWO<<KxO%AZQWO<<KxO%AcQ`O<<KxO){QYO<<KxOH}QWO<<KxOOQQ<<K{<<K{O5iQ!LYO<<K{O#4oQWO<<K{O5_QWO<<K{O%AmQ&jO1G4[O%ArQWO7++POOQQAN=ZAN=ZO5iQ!LYOAN=ZOOQQ<<Nn<<NnOOQQ<<No<<NoOOQQ<<LT<<LTO%AzQWO<<LTO%BPQYO<<LTO%BWQWO<<NnO%B]QWO<<NoOOQQ1G3_1G3_OOQQANBSANBSO:^QWOANBSO%BbQ7^O<<IiOOQO<<Hk<<HkOOQO7+%q7+%qO%/yQ!LdO7+%qO){QYO7+%qOOQO7+%k7+%kO:^QWO7+%kO!,lQpO7+%kO%BlQ!LYO7+%qO!?bQ&jO7+%kO%BwQ!LYO7+%qO%CVQ&jO7+%kO%ChQ!LYO7+%qOOQ!LSAN>}AN>}O%C|Q!LdO<<KbO%FUQ7^O<<JPO%FcQ7^O1G1uO%HRQ7^O1G2WO%JOQ7^O1G2YO%K{Q7^O<<JoO%LYQ7^O<<IdOOQO1G1`1G1`OOQO7+)l7+)lO%LgQWO7+)lO%LrQWO<<NeO%LzQ`O7+)nOOQO<<KV<<KVO5iQ!LYO<<KWO$+fQWO<<KWOOQO<<KU<<KUO5iQ!LYO<<KVO%MUQ`O<<KWO$+fQWO<<KVOOQQG26jG26jO#HbQWOG26jOOQO7+)w7+)wO5qQWO7+)wO%M]QWO<<NmOOQQG27VG27VO5iQ!LYOG27VOH}QWOG26jOLRQYO1G4XO%MeQWO7++OO5iQ!LYO1G2tO#4oQWO1G2tO5_QWO1G2tO!,lQpO1G2tO!?bQ&jO1G2tO%1eQ!LrO1G0VO%MmQ&jO1G2tO%-iQWOANAdOOQQANAdANAdOH}QWOANAdO%NOQWOANAdO%NWQ`OANAdOOQQANAgANAgO5iQ!LYOANAgO#4oQWOANAgOOQO'#Gr'#GrOOQO7+)v7+)vOOQQG22uG22uOOQQANAoANAoO%NbQWOANAoOOQQANDYANDYOOQQANDZANDZO%NgQYOG27nOOQO<<I]<<I]O%/yQ!LdO<<I]OOQO<<IV<<IVO:^QWO<<IVO){QYO<<I]O!,lQpO<<IVO&$eQ!LYO<<I]O!?bQ&jO<<IVO&$pQ!LYO<<I]O&%OQ7^O7+'cOOQO<<MW<<MWOOQOAN@rAN@rO5iQ!LYOAN@rOOQOAN@qAN@qO$+fQWOAN@rO5iQ!LYOAN@qOOQQLD,ULD,UOOQO<<Mc<<McOOQQLD,qLD,qO#HbQWOLD,UO&&nQ7^O7+)sOOQO7+(`7+(`O5iQ!LYO7+(`O#4oQWO7+(`O5_QWO7+(`O!,lQpO7+(`O!?bQ&jO7+(`OOQQG27OG27OO%-iQWOG27OOH}QWOG27OOOQQG27RG27RO5iQ!LYOG27ROOQQG27ZG27ZO:^QWOLD-YOOQOAN>wAN>wOOQOAN>qAN>qO%/yQ!LdOAN>wO:^QWOAN>qO){QYOAN>wO!,lQpOAN>qO&&xQ!LYOAN>wO&'TQ7^O<<KbOOQOG26^G26^O5iQ!LYOG26^OOQOG26]G26]OOQQ!$( p!$( pOOQO<<Kz<<KzO5iQ!LYO<<KzO#4oQWO<<KzO5_QWO<<KzO!,lQpO<<KzOOQQLD,jLD,jO%-iQWOLD,jOOQQLD,mLD,mOOQQ!$(!t!$(!tOOQOG24cG24cOOQOG24]G24]O%/yQ!LdOG24cO:^QWOG24]O){QYOG24cOOQOLD+xLD+xOOQOANAfANAfO5iQ!LYOANAfO#4oQWOANAfO5_QWOANAfOOQQ!$(!U!$(!UOOQOLD)}LD)}OOQOLD)wLD)wO%/yQ!LdOLD)}OOQOG27QG27QO5iQ!LYOG27QO#4oQWOG27QOOQO!$'Mi!$'MiOOQOLD,lLD,lO5iQ!LYOLD,lOOQO!$(!W!$(!WOLRQYO'#DnO&(sQbO'#IqOLRQYO'#DfO&(zQ!LdO'#CgO&)eQbO'#CgO&)uQYO,5:rOLRQYO,5:}OLRQYO,5:}OLRQYO,5:}OLRQYO,5:}OLRQYO,5:}OLRQYO,5:}OLRQYO,5:}OLRQYO,5:}OLRQYO,5:}OLRQYO,5:}OLRQYO,5:}OLRQYO'#HyO&+uQWO,5<PO&-XQWO,5:}OLRQYO,5;bO!(ZQWO'#C{O!(ZQWO'#C{OH}QWO'#FfO&+}QWO'#FfOH}QWO'#FhO&+}QWO'#FhOH}QWO'#FvO&+}QWO'#FvOLRQYO,5?kO&)uQYO1G0^O&-`Q7^O'#CgOLRQYO1G1hOH}QWO,5<lO&+}QWO,5<lOH}QWO,5<nO&+}QWO,5<nOH}QWO,5<ZO&+}QWO,5<ZO&)uQYO1G1iOLRQYO7+&eOH}QWO1G1wO&+}QWO1G1wO&)uQYO7+'TO&)uQYO7+%xOH}QWO7+'vO&+}QWO7+'vO&-jQWO'#EWO&-oQWO'#EWO&-wQWO'#EvO&-|QWO'#EcO&.RQWO'#JPO&.^QWO'#I}O&.iQWO,5:rO&.nQ#tO,5;|O&.uQWO'#FoO&.zQWO'#FoO&/PQWO,5;}O&/XQWO,5:rO&/aQ7^O1G0yO&/hQWO,5<]O&/mQWO,5<]O&/rQWO1G1iO&/wQWO1G0^O&/|Q#tO1G2[O&0TQ#tO1G2[O4QQWO'#FdO5_QWO'#FcOBqQWO'#EVOLRQYO,5;_O!(jQWO'#FqO!(jQWO'#FqOJ^QWO,5<pOJ^QWO,5<p",
+-  stateData: "&1Q~O'TOS'UOSSOSTOS~OPTOQTOWyO]cO^hOanObmOgcOiTOjcOkcOnTOpTOuROwcOxcOycO!PSO!ZkO!`UO!cTO!dTO!eTO!fTO!gTO!jlO#`sO#ppO#t^O${qO$}tO%PrO%QrO%TuO%VvO%YwO%ZwO%]xO%jzO%p{O%r|O%t}O%v!OO%y!PO&P!QO&T!RO&V!SO&X!TO&Z!UO&]!VO'WPO'aQO'mYO'zaO~OPZXYZX^ZXiZXrZXsZXuZX}ZX!]ZX!^ZX!`ZX!fZX!wZX#ScX#WZX#XZX#YZX#ZZX#[ZX#]ZX#^ZX#_ZX#aZX#cZX#eZX#fZX#kZX'RZX'aZX'nZX'uZX'vZX~O!X$hX~P$zO'O!XO'P!WO'Q!ZO~OPTOQTO]cOa!jOb!iOgcOiTOjcOkcOnTOpTOuROwcOxcOycO!P!bO!ZkO!`UO!cTO!dTO!eTO!fTO!gTO!j!hO#p!kO#t^O'W![O'aQO'mYO'zaO~O|!`O}!]Oz'hPz'rP~P'dO!O!lO~P`OPTOQTO]cOa!jOb!iOgcOiTOjcOkcOnTOpTOuROwcOxcOycO!P!bO!ZkO!`UO!cTO!dTO!eTO!fTO!gTO!j!hO#p!kO#t^O'W9VO'aQO'mYO'zaO~OPTOQTO]cOa!jOb!iOgcOiTOjcOkcOnTOpTOuROwcOxcOycO!P!bO!ZkO!`UO!cTO!dTO!eTO!fTO!gTO!j!hO#p!kO#t^O'aQO'mYO'zaO~O|!qO#Q!tO#R!qO'W9WO!_'oP~P+{O#S!uO~O!X!vO#S!uO~OP#]OY#cOi#QOr!zOs!zOu!{O}#aO!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO#c#VO#e#XO#f#YO'aQO'n#ZO'u!|O'v!}O~O^'eX'R'eX!_'eXz'eX!P'eX$|'eX!X'eX~P.jO!w#dO#k#dOP'fXY'fX^'fXi'fXr'fXs'fXu'fX}'fX!]'fX!^'fX!`'fX!f'fX#W'fX#X'fX#Y'fX#Z'fX#['fX#]'fX#^'fX#a'fX#c'fX#e'fX#f'fX'a'fX'n'fX'u'fX'v'fX~O#_'fX'R'fXz'fX!_'fX'c'fX!P'fX$|'fX!X'fX~P0zO!w#dO~O#v#eO#}#iO~O!P#jO#t^O$Q#kO$S#mO~O]#pOg#}Oi#qOj#pOk#pOn$OOp$POu#wO!P#xO!Z$UO!`#uO#R$VO#p$SO$Z$QO$]$RO$`$TO'W#oO'a#rO'['^P~O!`$WO~O!X$YO~O^$ZO'R$ZO~O'W$_O~O!`$WO'W$_O'X$aO']$bO~Ob$hO!`$WO'W$_O~O#_#SO~O]$qOr$mO!P$jO!`$lO$}$pO'W$_O'X$aO[(SP~O!j$rO~Ou$sO!P$tO'W$_O~Ou$sO!P$tO%V$xO'W$_O~O'W$yO~O#`sO$}tO%PrO%QrO%TuO%VvO%YwO%ZwO~Oa%SOb%RO!j%PO${%QO%_%OO~P7uOa%VObmO!P%UO!jlO#`sO${qO%PrO%QrO%TuO%VvO%YwO%ZwO%]xO~O_%YO!w%]O$}%WO'X$aO~P8tO!`%^O!c%bO~O!`%cO~O!PSO~O^$ZO&}%kO'R$ZO~O^$ZO&}%nO'R$ZO~O^$ZO&}%pO'R$ZO~O'O!XO'P!WO'Q%tO~OPZXYZXiZXrZXsZXuZX}ZX}cX!]ZX!^ZX!`ZX!fZX!wZX!wcX#ScX#WZX#XZX#YZX#ZZX#[ZX#]ZX#^ZX#_ZX#aZX#cZX#eZX#fZX#kZX'aZX'nZX'uZX'vZX~OzZXzcX~P;aO|%vOz&cX}&cX~P){O}!]Oz'hX~OP#]OY#cOi#QOr!zOs!zOu!{O}!]O!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO#c#VO#e#XO#f#YO'aQO'n#ZO'u!|O'v!}O~Oz'hX~P>WOz%{O~Ou&OO!S&YO!T&RO!U&RO'X$aO~O]&POj&PO|&SO'd%|O!O'iP!O'tP~P@ZOz'qX}'qX!X'qX!_'qX'n'qX~O!w'qX#S!{X!O'qX~PASO!w&ZOz'sX}'sX~O}&[Oz'rX~Oz&^O~O!w#dO~PASOR&bO!P&_O!k&aO'W$_O~Ob&gO!`$WO'W$_O~Or$mO!`$lO~O!O&hO~P`Or!zOs!zOu!{O!^!xO!`!yO'aQOP!baY!bai!ba}!ba!]!ba!f!ba#W!ba#X!ba#Y!ba#Z!ba#[!ba#]!ba#^!ba#_!ba#a!ba#c!ba#e!ba#f!ba'n!ba'u!ba'v!ba~O^!ba'R!baz!ba!_!ba'c!ba!P!ba$|!ba!X!ba~PC]O!_&iO~O!X!vO!w&kO'n&jO}'pX^'pX'R'pX~O!_'pX~PEuO}&oO!_'oX~O!_&qO~Ou$sO!P$tO#R&rO'W$_O~OPTOQTO]cOa!jOb!iOgcOiTOjcOkcOnTOpTOuROwcOxcOycO!PSO!ZkO!`UO!cTO!dTO!eTO!fTO!gTO!j!hO#p!kO#t^O'W9VO'aQO'mYO'zaO~O]#pOg#}Oi#qOj#pOk#pOn$OOp9iOu#wO!P#xO!Z:lO!`#uO#R9oO#p$SO$Z9kO$]9mO$`$TO'W&vO'a#rO~O#S&xO~O]#pOg#}Oi#qOj#pOk#pOn$OOp$POu#wO!P#xO!Z$UO!`#uO#R$VO#p$SO$Z$QO$]$RO$`$TO'W&vO'a#rO~O'['kP~PJ^O|&|O!_'lP~P){O'd'OO'mYO~OP9SOQ9SO]cOa:jOb!iOgcOi9SOjcOkcOn9SOp9SOuROwcOxcOycO!P!bO!Z9UO!`UO!c9SO!d9SO!e9SO!f9SO!g9SO!j!hO#p!kO#t^O'W'^O'aQO'mYO'z:hO~O!`!yO~O}#aO^$Xa'R$Xa!_$Xaz$Xa!P$Xa$|$Xa!X$Xa~O#`'eO~PH}O!X'gO!P'wX#s'wX#v'wX#}'wX~Or'hO~PNyOr'hO!P'wX#s'wX#v'wX#}'wX~O!P'jO#s'nO#v'iO#}'oO~O|'rO~PLRO#v#eO#}'uO~Or$aXu$aX!^$aX'n$aX'u$aX'v$aX~OReX}eX!weX'[eX'[$aX~P!!cOj'wO~O'O'yO'P'xO'Q'{O~Or'}Ou(OO'n#ZO'u(QO'v(SO~O'['|O~P!#lO'[(VO~O]#pOg#}Oi#qOj#pOk#pOn$OOp9iOu#wO!P#xO!Z:lO!`#uO#R9oO#p$SO$Z9kO$]9mO$`$TO'a#rO~O|(ZO'W(WO!_'{P~P!$ZO#S(]O~O|(aO'W(^Oz'|P~P!$ZO^(jOi(oOu(gO!S(mO!T(fO!U(fO!`(dO!t(nO$s(iO'X$aO'd(cO~O!O(lO~P!&RO!^!xOr'`Xu'`X'n'`X'u'`X'v'`X}'`X!w'`X~O'['`X#i'`X~P!&}OR(rO!w(qO}'_X'['_X~O}(sO'['^X~O'W(uO~O!`(zO~O'W&vO~O!`(dO~Ou$sO|!qO!P$tO#Q!tO#R!qO'W$_O!_'oP~O!X!vO#S)OO~OP#]OY#cOi#QOr!zOs!zOu!{O!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO#c#VO#e#XO#f#YO'aQO'n#ZO'u!|O'v!}O~O^!Ya}!Ya'R!Yaz!Ya!_!Ya'c!Ya!P!Ya$|!Ya!X!Ya~P!)`OR)WO!P&_O!k)VO$|)UO']$bO~O'W$yO'['^P~O!X)ZO!P'ZX^'ZX'R'ZX~O!`$WO']$bO~O!`$WO'W$_O']$bO~O!X!vO#S&xO~O$})gO'W)cO!O(TP~O})hO[(SX~O'd'OO~OY)lO~O[)mO~O!P$jO'W$_O'X$aO[(SP~Ou$sO|)rO!P$tO'W$_Oz'rP~O]&VOj&VO|)sO'd'OO!O'tP~O})tO^(PX'R(PX~O!w)xO']$bO~OR){O!P#xO']$bO~O!P)}O~Or*PO!PSO~O!j*UO~Ob*ZO~O'W(uO!O(RP~Ob$hO~O$}tO'W$yO~P8tOY*aO[*`O~OPTOQTO]cOanObmOgcOiTOjcOkcOnTOpTOuROwcOxcOycO!ZkO!`UO!cTO!dTO!eTO!fTO!gTO!jlO#t^O${qO'aQO'mYO'zaO~O!P!bO#p!kO'W9VO~P!0uO[*`O^$ZO'R$ZO~O^*eO#`*gO%P*gO%Q*gO~P){O!`%^O~O%p*lO~O!P*nO~O&Q*qO&R*pOP&OaQ&OaW&Oa]&Oa^&Oaa&Oab&Oag&Oai&Oaj&Oak&Oan&Oap&Oau&Oaw&Oax&Oay&Oa!P&Oa!Z&Oa!`&Oa!c&Oa!d&Oa!e&Oa!f&Oa!g&Oa!j&Oa#`&Oa#p&Oa#t&Oa${&Oa$}&Oa%P&Oa%Q&Oa%T&Oa%V&Oa%Y&Oa%Z&Oa%]&Oa%j&Oa%p&Oa%r&Oa%t&Oa%v&Oa%y&Oa&P&Oa&T&Oa&V&Oa&X&Oa&Z&Oa&]&Oa&|&Oa'W&Oa'a&Oa'm&Oa'z&Oa!O&Oa%w&Oa_&Oa%|&Oa~O'W*tO~O'c*wO~Oz&ca}&ca~P!)`O}!]Oz'ha~Oz'ha~P>WO}&[Oz'ra~O}tX}!VX!OtX!O!VX!XtX!X!VX!`!VX!wtX']!VX~O!X+OO!w*}O}#PX}'jX!O#PX!O'jX!X'jX!`'jX']'jX~O!X+QO!`$WO']$bO}!RX!O!RX~O]%}Oj%}Ou&OO'd(cO~OP9SOQ9SO]cOa:jOb!iOgcOi9SOjcOkcOn9SOp9SOuROwcOxcOycO!P!bO!Z9UO!`UO!c9SO!d9SO!e9SO!f9SO!g9SO!j!hO#p!kO#t^O'aQO'mYO'z:hO~O'W9sO~P!:sO}+UO!O'iX~O!O+WO~O!X+OO!w*}O}#PX!O#PX~O}+XO!O'tX~O!O+ZO~O]%}Oj%}Ou&OO'X$aO'd(cO~O!T+[O!U+[O~P!=qOu$sO|+_O!P$tO'W$_Oz&hX}&hX~O^+dO!S+gO!T+cO!U+cO!n+kO!o+iO!p+jO!q+hO!t+lO'X$aO'd(cO'm+aO~O!O+fO~P!>rOR+qO!P&_O!k+pO~O!w+wO}'pa!_'pa^'pa'R'pa~O!X!vO~P!?|O}&oO!_'oa~Ou$sO|+zO!P$tO#Q+|O#R+zO'W$_O}&jX!_&jX~O^!zi}!zi'R!ziz!zi!_!zi'c!zi!P!zi$|!zi!X!zi~P!)`O#S!va}!va!_!va!w!va!P!va^!va'R!vaz!va~P!#lO#S'`XP'`XY'`X^'`Xi'`Xs'`X!]'`X!`'`X!f'`X#W'`X#X'`X#Y'`X#Z'`X#['`X#]'`X#^'`X#_'`X#a'`X#c'`X#e'`X#f'`X'R'`X'a'`X!_'`Xz'`X!P'`X'c'`X$|'`X!X'`X~P!&}O},VO'['kX~P!#lO'[,XO~O},YO!_'lX~P!)`O!_,]O~Oz,^O~OP#]Or!zOs!zOu!{O!^!xO!`!yO!f#]O'aQOY#Vi^#Vii#Vi}#Vi!]#Vi#X#Vi#Y#Vi#Z#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi'R#Vi'n#Vi'u#Vi'v#Viz#Vi!_#Vi'c#Vi!P#Vi$|#Vi!X#Vi~O#W#Vi~P!EZO#W#OO~P!EZOP#]Or!zOs!zOu!{O!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO'aQOY#Vi^#Vi}#Vi!]#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi'R#Vi'n#Vi'u#Vi'v#Viz#Vi!_#Vi'c#Vi!P#Vi$|#Vi!X#Vi~Oi#Vi~P!GuOi#QO~P!GuOP#]Oi#QOr!zOs!zOu!{O!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO'aQO^#Vi}#Vi#a#Vi#c#Vi#e#Vi#f#Vi'R#Vi'n#Vi'u#Vi'v#Viz#Vi!_#Vi'c#Vi!P#Vi$|#Vi!X#Vi~OY#Vi!]#Vi#]#Vi#^#Vi#_#Vi~P!JaOY#cO!]#SO#]#SO#^#SO#_#SO~P!JaOP#]OY#cOi#QOr!zOs!zOu!{O!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO'aQO^#Vi}#Vi#c#Vi#e#Vi#f#Vi'R#Vi'n#Vi'v#Viz#Vi!_#Vi'c#Vi!P#Vi$|#Vi!X#Vi~O'u#Vi~P!MXO'u!|O~P!MXOP#]OY#cOi#QOr!zOs!zOu!{O!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO#c#VO'aQO'u!|O^#Vi}#Vi#e#Vi#f#Vi'R#Vi'n#Viz#Vi!_#Vi'c#Vi!P#Vi$|#Vi!X#Vi~O'v#Vi~P# sO'v!}O~P# sOP#]OY#cOi#QOr!zOs!zOu!{O!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO#c#VO#e#XO'aQO'u!|O'v!}O~O^#Vi}#Vi#f#Vi'R#Vi'n#Viz#Vi!_#Vi'c#Vi!P#Vi$|#Vi!X#Vi~P#$_OPZXYZXiZXrZXsZXuZX!]ZX!^ZX!`ZX!fZX!wZX#ScX#WZX#XZX#YZX#ZZX#[ZX#]ZX#^ZX#_ZX#aZX#cZX#eZX#fZX#kZX'aZX'nZX'uZX'vZX}ZX!OZX~O#iZX~P#&rOP#]OY9gOi9[Or!zOs!zOu!{O!]9^O!^!xO!`!yO!f#]O#W9YO#X9ZO#Y9ZO#Z9ZO#[9]O#]9^O#^9^O#_9^O#a9_O#c9aO#e9cO#f9dO'aQO'n#ZO'u!|O'v!}O~O#i,`O~P#(|OP'fXY'fXi'fXr'fXs'fXu'fX!]'fX!^'fX!`'fX!f'fX#W'fX#X'fX#Y'fX#Z'fX#['fX#]'fX#^'fX#a'fX#c'fX#e'fX#f'fX'a'fX'n'fX'u'fX'v'fX}'fX~O!w9hO#k9hO#_'fX#i'fX!O'fX~P#*wO^&ma}&ma'R&ma!_&ma'c&maz&ma!P&ma$|&ma!X&ma~P!)`OP#ViY#Vi^#Vii#Vis#Vi}#Vi!]#Vi!^#Vi!`#Vi!f#Vi#W#Vi#X#Vi#Y#Vi#Z#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi'R#Vi'a#Viz#Vi!_#Vi'c#Vi!P#Vi$|#Vi!X#Vi~P!#lO^#ji}#ji'R#jiz#ji!_#ji'c#ji!P#ji$|#ji!X#ji~P!)`O#v,bO~O#v,cO~O!X'gO!w,dO!P#zX#s#zX#v#zX#}#zX~O|,eO~O!P'jO#s,gO#v'iO#},hO~O}9eO!O'eX~P#(|O!O,iO~O#},kO~O'O'yO'P'xO'Q,nO~O],qOj,qOz,rO~O}cX!XcX!_cX!_$aX'ncX~P!!cO!_,xO~P!#lO},yO!X!vO'n&jO!_'{X~O!_-OO~Oz$aX}$aX!X$hX~P!!cO}-QOz'|X~P!#lO!X-SO~Oz-UO~O|(ZO'W$_O!_'{P~Oi-YO!X!vO!`$WO']$bO'n&jO~O!X)ZO~O!O-`O~P!&RO!T-aO!U-aO'X$aO'd(cO~Ou-cO'd(cO~O!t-dO~O'W$yO}&rX'[&rX~O}(sO'['^a~Or-iOs-iOu-jO'noa'uoa'voa}oa!woa~O'[oa#ioa~P#5{Or'}Ou(OO'n$Ya'u$Ya'v$Ya}$Ya!w$Ya~O'[$Ya#i$Ya~P#6qOr'}Ou(OO'n$[a'u$[a'v$[a}$[a!w$[a~O'[$[a#i$[a~P#7dO]-kO~O#S-lO~O'[$ja}$ja#i$ja!w$ja~P!#lO#S-oO~OR-xO!P&_O!k-wO$|-vO~O'[-yO~O]#pOi#qOj#pOk#pOn$OOp9iOu#wO!P#xO!Z:lO!`#uO#R9oO#p$SO$Z9kO$]9mO$`$TO'a#rO~Og-{O'W-zO~P#9ZO!X)ZO!P'Za^'Za'R'Za~O#S.RO~OYZX}cX!OcX~O}.SO!O(TX~O!O.UO~OY.VO~O'W)cO~O!P$jO'W$_O[&zX}&zX~O})hO[(Sa~O!_.[O~P!)`O].^O~OY._O~O[.`O~OR-xO!P&_O!k-wO$|-vO']$bO~O})tO^(Pa'R(Pa~O!w.fO~OR.iO!P#xO~O'd'OO!O(QP~OR.sO!P.oO!k.rO$|.qO']$bO~OY.}O}.{O!O(RX~O!O/OO~O[/QO^$ZO'R$ZO~O]/RO~O#_/TO%n/UO~P0zO!w#dO#_/TO%n/UO~O^/VO~P){O^/XO~O%w/]OP%uiQ%uiW%ui]%ui^%uia%uib%uig%uii%uij%uik%uin%uip%uiu%uiw%uix%uiy%ui!P%ui!Z%ui!`%ui!c%ui!d%ui!e%ui!f%ui!g%ui!j%ui#`%ui#p%ui#t%ui${%ui$}%ui%P%ui%Q%ui%T%ui%V%ui%Y%ui%Z%ui%]%ui%j%ui%p%ui%r%ui%t%ui%v%ui%y%ui&P%ui&T%ui&V%ui&X%ui&Z%ui&]%ui&|%ui'W%ui'a%ui'm%ui'z%ui!O%ui_%ui%|%ui~O_/cO!O/aO%|/bO~P`O!PSO!`/fO~O}#aO'c$Xa~Oz&ci}&ci~P!)`O}!]Oz'hi~O}&[Oz'ri~Oz/jO~O}!Ra!O!Ra~P#(|O]%}Oj%}O|/pO'd(cO}&dX!O&dX~P@ZO}+UO!O'ia~O]&VOj&VO|)sO'd'OO}&iX!O&iX~O}+XO!O'ta~Oz'si}'si~P!)`O^$ZO!X!vO!`$WO!f/{O!w/yO'R$ZO']$bO'n&jO~O!O0OO~P!>rO!T0PO!U0PO'X$aO'd(cO'm+aO~O!S0QO~P#GTO!PSO!S0QO!q0SO!t0TO~P#GTO!S0QO!o0VO!p0VO!q0SO!t0TO~P#GTO!P&_O~O!P&_O~P!#lO}'pi!_'pi^'pi'R'pi~P!)`O!w0`O}'pi!_'pi^'pi'R'pi~O}&oO!_'oi~Ou$sO!P$tO#R0bO'W$_O~O#SoaPoaYoa^oaioa!]oa!^oa!`oa!foa#Woa#Xoa#Yoa#Zoa#[oa#]oa#^oa#_oa#aoa#coa#eoa#foa'Roa'aoa!_oazoa!Poa'coa$|oa!Xoa~P#5{O#S$YaP$YaY$Ya^$Yai$Yas$Ya!]$Ya!^$Ya!`$Ya!f$Ya#W$Ya#X$Ya#Y$Ya#Z$Ya#[$Ya#]$Ya#^$Ya#_$Ya#a$Ya#c$Ya#e$Ya#f$Ya'R$Ya'a$Ya!_$Yaz$Ya!P$Ya'c$Ya$|$Ya!X$Ya~P#6qO#S$[aP$[aY$[a^$[ai$[as$[a!]$[a!^$[a!`$[a!f$[a#W$[a#X$[a#Y$[a#Z$[a#[$[a#]$[a#^$[a#_$[a#a$[a#c$[a#e$[a#f$[a'R$[a'a$[a!_$[az$[a!P$[a'c$[a$|$[a!X$[a~P#7dO#S$jaP$jaY$ja^$jai$jas$ja}$ja!]$ja!^$ja!`$ja!f$ja#W$ja#X$ja#Y$ja#Z$ja#[$ja#]$ja#^$ja#_$ja#a$ja#c$ja#e$ja#f$ja'R$ja'a$ja!_$jaz$ja!P$ja!w$ja'c$ja$|$ja!X$ja~P!#lO^!zq}!zq'R!zqz!zq!_!zq'c!zq!P!zq$|!zq!X!zq~P!)`O}&eX'[&eX~PJ^O},VO'['ka~O|0jO}&fX!_&fX~P){O},YO!_'la~O},YO!_'la~P!)`O#i!ba!O!ba~PC]O#i!Ya}!Ya!O!Ya~P#(|O!P0}O#t^O#{1OO~O!O1SO~O'c1TO~P!#lO^$Uq}$Uq'R$Uqz$Uq!_$Uq'c$Uq!P$Uq$|$Uq!X$Uq~P!)`Oz1UO~O],qOj,qO~Or'}Ou(OO'v(SO'n$ti'u$ti}$ti!w$ti~O'[$ti#i$ti~P$'tOr'}Ou(OO'n$vi'u$vi'v$vi}$vi!w$vi~O'[$vi#i$vi~P$(gO#i1VO~P!#lO|1XO'W$_O}&nX!_&nX~O},yO!_'{a~O},yO!X!vO!_'{a~O},yO!X!vO'n&jO!_'{a~O'[$ci}$ci#i$ci!w$ci~P!#lO|1`O'W(^Oz&pX}&pX~P!$ZO}-QOz'|a~O}-QOz'|a~P!#lO!X!vO~O!X!vO#_1jO~Oi1nO!X!vO'n&jO~O}'_i'['_i~P!#lO!w1qO}'_i'['_i~P!#lO!_1tO~O^$Vq}$Vq'R$Vqz$Vq!_$Vq'c$Vq!P$Vq$|$Vq!X$Vq~P!)`O}1xO!P'}X~P!#lO!P&_O$|1{O~O!P&_O$|1{O~P!#lO!P$aX$qZX^$aX'R$aX~P!!cO$q2POrfXufX!PfX'nfX'ufX'vfX^fX'RfX~O$q2PO~O$}2WO'W)cO}&yX!O&yX~O}.SO!O(Ta~OY2[O~O[2]O~O]2`O~OR2bO!P&_O!k2aO$|1{O~O^$ZO'R$ZO~P!#lO!P#xO~P!#lO}2gO!w2iO!O(QX~O!O2jO~Ou(gO!S2sO!T2lO!U2lO!n2rO!o2qO!p2qO!t2pO'X$aO'd(cO'm+aO~O!O2oO~P$0uOR2zO!P.oO!k2yO$|2xO~OR2zO!P.oO!k2yO$|2xO']$bO~O'W(uO}&xX!O&xX~O}.{O!O(Ra~O'd3TO~O]3VO~O[3XO~O!_3[O~P){O^3^O~O^3^O~P){O#_3`O%n3aO~PEuO_/cO!O3eO%|/bO~P`O!X3gO~O&R3hOP&OqQ&OqW&Oq]&Oq^&Oqa&Oqb&Oqg&Oqi&Oqj&Oqk&Oqn&Oqp&Oqu&Oqw&Oqx&Oqy&Oq!P&Oq!Z&Oq!`&Oq!c&Oq!d&Oq!e&Oq!f&Oq!g&Oq!j&Oq#`&Oq#p&Oq#t&Oq${&Oq$}&Oq%P&Oq%Q&Oq%T&Oq%V&Oq%Y&Oq%Z&Oq%]&Oq%j&Oq%p&Oq%r&Oq%t&Oq%v&Oq%y&Oq&P&Oq&T&Oq&V&Oq&X&Oq&Z&Oq&]&Oq&|&Oq'W&Oq'a&Oq'm&Oq'z&Oq!O&Oq%w&Oq_&Oq%|&Oq~O}#Pi!O#Pi~P#(|O!w3jO}#Pi!O#Pi~O}!Ri!O!Ri~P#(|O^$ZO!w3qO'R$ZO~O^$ZO!X!vO!w3qO'R$ZO~O!T3uO!U3uO'X$aO'd(cO'm+aO~O^$ZO!X!vO!`$WO!f3vO!w3qO'R$ZO']$bO'n&jO~O!S3wO~P$9_O!S3wO!q3zO!t3{O~P$9_O^$ZO!X!vO!f3vO!w3qO'R$ZO'n&jO~O}'pq!_'pq^'pq'R'pq~P!)`O}&oO!_'oq~O#S$tiP$tiY$ti^$tii$tis$ti!]$ti!^$ti!`$ti!f$ti#W$ti#X$ti#Y$ti#Z$ti#[$ti#]$ti#^$ti#_$ti#a$ti#c$ti#e$ti#f$ti'R$ti'a$ti!_$tiz$ti!P$ti'c$ti$|$ti!X$ti~P$'tO#S$viP$viY$vi^$vii$vis$vi!]$vi!^$vi!`$vi!f$vi#W$vi#X$vi#Y$vi#Z$vi#[$vi#]$vi#^$vi#_$vi#a$vi#c$vi#e$vi#f$vi'R$vi'a$vi!_$viz$vi!P$vi'c$vi$|$vi!X$vi~P$(gO#S$ciP$ciY$ci^$cii$cis$ci}$ci!]$ci!^$ci!`$ci!f$ci#W$ci#X$ci#Y$ci#Z$ci#[$ci#]$ci#^$ci#_$ci#a$ci#c$ci#e$ci#f$ci'R$ci'a$ci!_$ciz$ci!P$ci!w$ci'c$ci$|$ci!X$ci~P!#lO}&ea'[&ea~P!#lO}&fa!_&fa~P!)`O},YO!_'li~O#i!zi}!zi!O!zi~P#(|OP#]Or!zOs!zOu!{O!^!xO!`!yO!f#]O'aQOY#Vii#Vi!]#Vi#X#Vi#Y#Vi#Z#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi#i#Vi'n#Vi'u#Vi'v#Vi}#Vi!O#Vi~O#W#Vi~P$BuO#W9YO~P$BuOP#]Or!zOs!zOu!{O!^!xO!`!yO!f#]O#W9YO#X9ZO#Y9ZO#Z9ZO'aQOY#Vi!]#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi#i#Vi'n#Vi'u#Vi'v#Vi}#Vi!O#Vi~Oi#Vi~P$D}Oi9[O~P$D}OP#]Oi9[Or!zOs!zOu!{O!^!xO!`!yO!f#]O#W9YO#X9ZO#Y9ZO#Z9ZO#[9]O'aQO#a#Vi#c#Vi#e#Vi#f#Vi#i#Vi'n#Vi'u#Vi'v#Vi}#Vi!O#Vi~OY#Vi!]#Vi#]#Vi#^#Vi#_#Vi~P$GVOY9gO!]9^O#]9^O#^9^O#_9^O~P$GVOP#]OY9gOi9[Or!zOs!zOu!{O!]9^O!^!xO!`!yO!f#]O#W9YO#X9ZO#Y9ZO#Z9ZO#[9]O#]9^O#^9^O#_9^O#a9_O'aQO#c#Vi#e#Vi#f#Vi#i#Vi'n#Vi'v#Vi}#Vi!O#Vi~O'u#Vi~P$IkO'u!|O~P$IkOP#]OY9gOi9[Or!zOs!zOu!{O!]9^O!^!xO!`!yO!f#]O#W9YO#X9ZO#Y9ZO#Z9ZO#[9]O#]9^O#^9^O#_9^O#a9_O#c9aO'aQO'u!|O#e#Vi#f#Vi#i#Vi'n#Vi}#Vi!O#Vi~O'v#Vi~P$KsO'v!}O~P$KsOP#]OY9gOi9[Or!zOs!zOu!{O!]9^O!^!xO!`!yO!f#]O#W9YO#X9ZO#Y9ZO#Z9ZO#[9]O#]9^O#^9^O#_9^O#a9_O#c9aO#e9cO'aQO'u!|O'v!}O~O#f#Vi#i#Vi'n#Vi}#Vi!O#Vi~P$M{O^#gy}#gy'R#gyz#gy!_#gy'c#gy!P#gy$|#gy!X#gy~P!)`OP#ViY#Vii#Vis#Vi!]#Vi!^#Vi!`#Vi!f#Vi#W#Vi#X#Vi#Y#Vi#Z#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi#i#Vi'a#Vi}#Vi!O#Vi~P!#lO!^!xOP'`XY'`Xi'`Xr'`Xs'`Xu'`X!]'`X!`'`X!f'`X#W'`X#X'`X#Y'`X#Z'`X#['`X#]'`X#^'`X#_'`X#a'`X#c'`X#e'`X#f'`X#i'`X'a'`X'n'`X'u'`X'v'`X}'`X!O'`X~O#i#ji}#ji!O#ji~P#(|O!O4]O~O}&ma!O&ma~P#(|O!X!vO'n&jO}&na!_&na~O},yO!_'{i~O},yO!X!vO!_'{i~Oz&pa}&pa~P!#lO!X4dO~O}-QOz'|i~P!#lO}-QOz'|i~Oz4jO~O!X!vO#_4pO~Oi4qO!X!vO'n&jO~Oz4sO~O'[$eq}$eq#i$eq!w$eq~P!#lO^$Vy}$Vy'R$Vyz$Vy!_$Vy'c$Vy!P$Vy$|$Vy!X$Vy~P!)`O}1xO!P'}a~O!P&_O$|4xO~O!P&_O$|4xO~P!#lO^!zy}!zy'R!zyz!zy!_!zy'c!zy!P!zy$|!zy!X!zy~P!)`OY4{O~O}.SO!O(Ti~O]5QO~O[5RO~O'd'OO}&uX!O&uX~O}2gO!O(Qa~O!O5`O~P$0uOu-cO'd(cO'm+aO~O!S5cO!T5bO!U5bO!t0TO'X$aO'd(cO'm+aO~O!o5dO!p5dO~P%,eO!T5bO!U5bO'X$aO'd(cO'm+aO~O!P.oO~O!P.oO$|5fO~O!P.oO$|5fO~P!#lOR5kO!P.oO!k5jO$|5fO~OY5pO}&xa!O&xa~O}.{O!O(Ri~O]5sO~O!_5tO~O!_5uO~O!_5vO~O!_5vO~P){O^5xO~O!X5{O~O!_5}O~O}'si!O'si~P#(|O^$ZO'R$ZO~P!)`O^$ZO!w6SO'R$ZO~O^$ZO!X!vO!w6SO'R$ZO~O!T6XO!U6XO'X$aO'd(cO'm+aO~O^$ZO!X!vO!f6YO!w6SO'R$ZO'n&jO~O!`$WO']$bO~P%1PO!S6ZO~P%0nO}'py!_'py^'py'R'py~P!)`O#S$eqP$eqY$eq^$eqi$eqs$eq}$eq!]$eq!^$eq!`$eq!f$eq#W$eq#X$eq#Y$eq#Z$eq#[$eq#]$eq#^$eq#_$eq#a$eq#c$eq#e$eq#f$eq'R$eq'a$eq!_$eqz$eq!P$eq!w$eq'c$eq$|$eq!X$eq~P!#lO}&fi!_&fi~P!)`O#i!zq}!zq!O!zq~P#(|Or-iOs-iOu-jOPoaYoaioa!]oa!^oa!`oa!foa#Woa#Xoa#Yoa#Zoa#[oa#]oa#^oa#_oa#aoa#coa#eoa#foa#ioa'aoa'noa'uoa'voa}oa!Ooa~Or'}Ou(OOP$YaY$Yai$Yas$Ya!]$Ya!^$Ya!`$Ya!f$Ya#W$Ya#X$Ya#Y$Ya#Z$Ya#[$Ya#]$Ya#^$Ya#_$Ya#a$Ya#c$Ya#e$Ya#f$Ya#i$Ya'a$Ya'n$Ya'u$Ya'v$Ya}$Ya!O$Ya~Or'}Ou(OOP$[aY$[ai$[as$[a!]$[a!^$[a!`$[a!f$[a#W$[a#X$[a#Y$[a#Z$[a#[$[a#]$[a#^$[a#_$[a#a$[a#c$[a#e$[a#f$[a#i$[a'a$[a'n$[a'u$[a'v$[a}$[a!O$[a~OP$jaY$jai$jas$ja!]$ja!^$ja!`$ja!f$ja#W$ja#X$ja#Y$ja#Z$ja#[$ja#]$ja#^$ja#_$ja#a$ja#c$ja#e$ja#f$ja#i$ja'a$ja}$ja!O$ja~P!#lO#i$Uq}$Uq!O$Uq~P#(|O#i$Vq}$Vq!O$Vq~P#(|O!O6eO~O'[$xy}$xy#i$xy!w$xy~P!#lO!X!vO}&ni!_&ni~O!X!vO'n&jO}&ni!_&ni~O},yO!_'{q~Oz&pi}&pi~P!#lO}-QOz'|q~Oz6lO~P!#lOz6lO~O}'_y'['_y~P!#lO}&sa!P&sa~P!#lO!P$pq^$pq'R$pq~P!#lOY6tO~O}.SO!O(Tq~O]6wO~O!P&_O$|6xO~O!P&_O$|6xO~P!#lO!w6yO}&ua!O&ua~O}2gO!O(Qi~P#(|O!T7PO!U7PO'X$aO'd(cO'm+aO~O!S7RO!t3{O~P%@nO!P.oO$|7UO~O!P.oO$|7UO~P!#lO'd7[O~O}.{O!O(Rq~O!_7_O~O!_7_O~P){O!_7aO~O!_7bO~O}#Py!O#Py~P#(|O^$ZO!w7hO'R$ZO~O^$ZO!X!vO!w7hO'R$ZO~O!T7kO!U7kO'X$aO'd(cO'm+aO~O^$ZO!X!vO!f7lO!w7hO'R$ZO'n&jO~O#S$xyP$xyY$xy^$xyi$xys$xy}$xy!]$xy!^$xy!`$xy!f$xy#W$xy#X$xy#Y$xy#Z$xy#[$xy#]$xy#^$xy#_$xy#a$xy#c$xy#e$xy#f$xy'R$xy'a$xy!_$xyz$xy!P$xy!w$xy'c$xy$|$xy!X$xy~P!#lO#i#gy}#gy!O#gy~P#(|OP$ciY$cii$cis$ci!]$ci!^$ci!`$ci!f$ci#W$ci#X$ci#Y$ci#Z$ci#[$ci#]$ci#^$ci#_$ci#a$ci#c$ci#e$ci#f$ci#i$ci'a$ci}$ci!O$ci~P!#lOr'}Ou(OO'v(SOP$tiY$tii$tis$ti!]$ti!^$ti!`$ti!f$ti#W$ti#X$ti#Y$ti#Z$ti#[$ti#]$ti#^$ti#_$ti#a$ti#c$ti#e$ti#f$ti#i$ti'a$ti'n$ti'u$ti}$ti!O$ti~Or'}Ou(OOP$viY$vii$vis$vi!]$vi!^$vi!`$vi!f$vi#W$vi#X$vi#Y$vi#Z$vi#[$vi#]$vi#^$vi#_$vi#a$vi#c$vi#e$vi#f$vi#i$vi'a$vi'n$vi'u$vi'v$vi}$vi!O$vi~O#i$Vy}$Vy!O$Vy~P#(|O#i!zy}!zy!O!zy~P#(|O!X!vO}&nq!_&nq~O},yO!_'{y~Oz&pq}&pq~P!#lOz7rO~P!#lO}.SO!O(Ty~O}2gO!O(Qq~O!T8OO!U8OO'X$aO'd(cO'm+aO~O!P.oO$|8RO~O!P.oO$|8RO~P!#lO!_8UO~O&R8VOP&O!ZQ&O!ZW&O!Z]&O!Z^&O!Za&O!Zb&O!Zg&O!Zi&O!Zj&O!Zk&O!Zn&O!Zp&O!Zu&O!Zw&O!Zx&O!Zy&O!Z!P&O!Z!Z&O!Z!`&O!Z!c&O!Z!d&O!Z!e&O!Z!f&O!Z!g&O!Z!j&O!Z#`&O!Z#p&O!Z#t&O!Z${&O!Z$}&O!Z%P&O!Z%Q&O!Z%T&O!Z%V&O!Z%Y&O!Z%Z&O!Z%]&O!Z%j&O!Z%p&O!Z%r&O!Z%t&O!Z%v&O!Z%y&O!Z&P&O!Z&T&O!Z&V&O!Z&X&O!Z&Z&O!Z&]&O!Z&|&O!Z'W&O!Z'a&O!Z'm&O!Z'z&O!Z!O&O!Z%w&O!Z_&O!Z%|&O!Z~O^$ZO!w8[O'R$ZO~O^$ZO!X!vO!w8[O'R$ZO~OP$eqY$eqi$eqs$eq!]$eq!^$eq!`$eq!f$eq#W$eq#X$eq#Y$eq#Z$eq#[$eq#]$eq#^$eq#_$eq#a$eq#c$eq#e$eq#f$eq#i$eq'a$eq}$eq!O$eq~P!#lO}&uq!O&uq~P#(|O^$ZO!w8qO'R$ZO~OP$xyY$xyi$xys$xy!]$xy!^$xy!`$xy!f$xy#W$xy#X$xy#Y$xy#Z$xy#[$xy#]$xy#^$xy#_$xy#a$xy#c$xy#e$xy#f$xy#i$xy'a$xy}$xy!O$xy~P!#lO'c'eX~P.jO'cZXzZX!_ZX%nZX!PZX$|ZX!XZX~P$zO!XcX!_ZX!_cX'ncX~P;aOP9SOQ9SO]cOa:jOb!iOgcOi9SOjcOkcOn9SOp9SOuROwcOxcOycO!PSO!Z9UO!`UO!c9SO!d9SO!e9SO!f9SO!g9SO!j!hO#p!kO#t^O'W'^O'aQO'mYO'z:hO~O}9eO!O$Xa~O]#pOg#}Oi#qOj#pOk#pOn$OOp9jOu#wO!P#xO!Z:mO!`#uO#R9pO#p$SO$Z9lO$]9nO$`$TO'W&vO'a#rO~O#`'eO~P&+}O!OZX!OcX~P;aO#S9XO~O!X!vO#S9XO~O!w9hO~O#_9^O~O!w9qO}'sX!O'sX~O!w9hO}'qX!O'qX~O#S9rO~O'[9tO~P!#lO#S9yO~O#S9zO~O!X!vO#S9{O~O!X!vO#S9rO~O#i9|O~P#(|O#S9}O~O#S:OO~O#S:PO~O#S:QO~O#i:RO~P!#lO#i:SO~P!#lO#t~!^!n!p!q#Q#R'z$Z$]$`$q${$|$}%T%V%Y%Z%]%_~TS#t'z#Xy'T'U#v'T'W'd~",
+-  goto: "#Dk(XPPPPPPP(YP(jP*^PPPP-sPP.Y3j5^5qP5qPPP5q5qP5qP7_PP7dP7xPPPP<XPPPP<X>wPPP>}AYP<XPCsPPPPEk<XPPPPPGd<XPPJcK`PPPPKdL|PMUNVPK`<X<X!#^!&V!*v!*v!.TPPP!.[!1O<XPPPPPPPPPP!3sP!5UPP<X!6cP<XP<X<X<X<XP<X!8vPP!;mP!>`!>h!>l!>lP!;jP!>p!>pP!AcP!Ag<X<X!Am!D_5qP5qP5q5qP!Eb5q5q!GY5q!I[5q!J|5q5q!Kj!Md!Md!Mh!Md!MpP!MdP5q!Nl5q# v5q5q-sPPP##TPP##m##mP##mP#$S##mPP#$YP#$PP#$P#$lMQ#$P#%Z#%a#%d(Y#%g(YP#%n#%n#%nP(YP(YP(YP(YPP(YP#%t#%wP#%w(YPPP(YP(YP(YP(YP(YP(Y(Y#%{#&V#&]#&c#&q#&w#&}#'X#'_#'i#'o#'}#(T#(Z#(i#)O#*b#*p#*v#*|#+S#+Y#+d#+j#+p#+z#,^#,dPPPPPPPPP#,jPP#-^#1[PP#2r#2y#3RP#7_PP#7c#9v#?p#?t#?w#?z#@V#@YPP#@]#@a#AO#As#Aw#BZPP#B_#Be#BiP#Bl#Bp#Bs#Cc#Cy#DO#DR#DU#D[#D_#Dc#DgmhOSj}!m$Y%a%d%e%g*i*n/]/`Q$gmQ$npQ%XyS&R!b+UQ&f!iS(f#x(kQ)a$hQ)n$pQ*Y%RQ+[&YS+c&_+eQ+u&gQ-a(mQ.z*ZY0P+g+h+i+j+kS2l.o2nU3u0Q0S0VU5b2q2r2sS6X3w3zS7P5c5dQ7k6ZR8O7R$l[ORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#a#d$Y$l%Y%]%a%c%d%e%g%k%v&O&Z&a&k&x&|'|)O)V*e*i*n+p+w,Y,`-j-o-w.R.r/T/U/V/X/]/`/b/y0`0j2a2y3^3`3a3q5j5x6S7h8[8q!j'`#[#j&S'r*}+Q,e/p0}2i3j6y9S9U9X9Y9Z9[9]9^9_9`9a9b9c9d9e9h9q9r9t9{9|:P:Q:kQ(v$PQ)f$jQ*[%UQ*c%^Q,P9iQ-|)ZQ.X)gQ/S*aQ2V.SQ3R.{Q4U9jR4}2WpeOSjy}!m$Y%W%a%d%e%g*i*n/]/`R*^%Y&WVOSTjkn}!S!W!]!j!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#[#a#d#j$Y$l%Y%]%^%a%c%d%e%g%k%v&O&Z&a&k&x&|'r'|)O)V*e*i*n*}+Q+p+w,Y,`,e-j-o-w.R.r/T/U/V/X/]/`/b/p/y0`0j0}2a2i2y3^3`3a3j3q5j5x6S6y7h8[8q9S9U9X9Y9Z9[9]9^9_9`9a9b9c9d9e9h9q9r9t9{9|:P:Q:j:kW!cRU!`&SQ$`lQ$fmS$kp$pv$urs!q!t$W$s&[&o&r)r)s)t*g+O+_+z+|/f0bQ$}wQ&c!hQ&e!iS(Y#u(dS)`$g$hQ)d$jQ)q$rQ*T%PQ*X%RS+t&f&gQ,}(ZQ.Q)aQ.W)gQ.Y)hQ.])lQ.u*US.y*Y*ZQ0^+uQ1W,yQ2U.SQ2Y.VQ2_._Q3Q.zQ4a1XQ4|2WQ5P2[Q6s4{R7u6t!Y$dm!i$f$g$h&Q&e&f&g(e)`)a+R+b+t+u-Z.Q/u/|0R0^1m3t3y6V7i8]Q)X$`Q)y$zQ)|${Q*W%RQ.a)qQ.t*TU.x*X*Y*ZQ2{.uS3P.y.zQ5]2kQ5o3QS6}5^5aS7|7O7QQ8g7}R8v8hW#{a$b(s:hS$zt%WQ${uQ$|vR)w$x$V#za!v!x#c#u#w$Q$R$V&b'x(R(T(U(](a(q(r)U)W)Z)x){+q,V-Q-S-l-v-x.f.i.q.s1V1`1j1q1x1{2P2b2x2z4d4p4x5f5k6x7U8R9g9k9l9m9n9o9p9u9v9w9x9y9z9}:O:R:S:h:n:oV(w$P9i9jU&V!b$t+XQ'P!zQ)k$mQ.j)}Q1r-iR5X2g&YcORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#[#a#d#j$Y$l%Y%]%^%a%c%d%e%g%k%v&O&S&Z&a&k&x&|'r'|)O)V*e*i*n*}+Q+p+w,Y,`,e-j-o-w.R.r/T/U/V/X/]/`/b/p/y0`0j0}2a2i2y3^3`3a3j3q5j5x6S6y7h8[8q9S9U9X9Y9Z9[9]9^9_9`9a9b9c9d9e9h9q9r9t9{9|:P:Q:k$]#`Z!_!n$^%u%y&t&{'R'S'T'U'V'W'X'Y'Z'[']'_'b'f'p)j*y+S+]+v,U,[,_,a,o-m/k/n0_0i0m0n0o0p0q0r0s0t0u0v0w0x0y0|1R1v2S3l3o4P4S4T4Y4Z5Z6O6R6_6c6d7e7x8Y8o8z9T:a&ZcORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#[#a#d#j$Y$l%Y%]%^%a%c%d%e%g%k%v&O&S&Z&a&k&x&|'r'|)O)V*e*i*n*}+Q+p+w,Y,`,e-j-o-w.R.r/T/U/V/X/]/`/b/p/y0`0j0}2a2i2y3^3`3a3j3q5j5x6S6y7h8[8q9S9U9X9Y9Z9[9]9^9_9`9a9b9c9d9e9h9q9r9t9{9|:P:Q:kQ&T!bR/q+UY%}!b&R&Y+U+[S(e#x(kS+b&_+eS-Z(f(mQ-[(gQ-b(nQ.l*PU/|+c+g+hU0R+i+j+kS0W+l2pQ1m-aQ1o-cQ1p-dS2k.o2nU3t0P0Q0SQ3x0TQ3y0VS5^2l2sS5a2q2rU6V3u3w3zQ6[3{S7O5b5cQ7Q5dS7i6X6ZS7}7P7RQ8]7kR8h8OlhOSj}!m$Y%a%d%e%g*i*n/]/`Q%i!QS&s!u9XQ)^$eQ*R$}Q*S%OQ+r&dS,T&x9rS-n)O9{Q.O)_Q.n*QQ/d*pQ/e*qQ/m+PQ0U+iQ0[+sS1w-o:PQ2Q.PS2T.R:QQ3k/oQ3n/wQ3}0]Q4z2RQ5|3hQ6P3mQ6T3sQ6]4OQ7c5}Q7f6UQ8X7gQ8l8VQ8n8ZR8y8p$W#_Z!_!n%u%y&t&{'R'S'T'U'V'W'X'Y'Z'[']'_'b'f'p)j*y+S+]+v,U,[,_,o-m/k/n0_0i0m0n0o0p0q0r0s0t0u0v0w0x0y0|1R1v2S3l3o4P4S4T4Y4Z5Z6O6R6_6c6d7e7x8Y8o8z9T:aU(p#y&w0{T)S$^,a$W#^Z!_!n%u%y&t&{'R'S'T'U'V'W'X'Y'Z'[']'_'b'f'p)j*y+S+]+v,U,[,_,o-m/k/n0_0i0m0n0o0p0q0r0s0t0u0v0w0x0y0|1R1v2S3l3o4P4S4T4Y4Z5Z6O6R6_6c6d7e7x8Y8o8z9T:aQ'a#_S)R$^,aR-p)S&YcORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#[#a#d#j$Y$l%Y%]%^%a%c%d%e%g%k%v&O&S&Z&a&k&x&|'r'|)O)V*e*i*n*}+Q+p+w,Y,`,e-j-o-w.R.r/T/U/V/X/]/`/b/p/y0`0j0}2a2i2y3^3`3a3j3q5j5x6S6y7h8[8q9S9U9X9Y9Z9[9]9^9_9`9a9b9c9d9e9h9q9r9t9{9|:P:Q:kQ%d{Q%e|Q%g!OQ%h!PR/[*lQ&`!hQ)T$`Q+o&cS-u)X)qS0X+m+nW1z-r-s-t.aS3|0Y0ZU4w1|1}2OU6q4v5T5UQ7t6rR8c7wT+d&_+eS+b&_+eU/|+c+g+hU0R+i+j+kS0W+l2pS2k.o2nU3t0P0Q0SQ3x0TQ3y0VS5^2l2sS5a2q2rU6V3u3w3zQ6[3{S7O5b5cQ7Q5dS7i6X6ZS7}7P7RQ8]7kR8h8OS+d&_+eT2m.o2nS&m!p/YQ,|(YQ-X(eS/{+b2kQ1],}S1g-Y-bU3v0R0W5aQ4`1WS4n1n1pU6Y3x3y7QQ6g4aQ6p4qR7l6[Q!wXS&l!p/YQ)P$XQ)[$cQ)b$iQ+x&mQ,{(YQ-W(eQ-](hQ-})]Q.v*VS/z+b2kS1[,|,}S1f-X-bQ1i-[Q1l-^Q2}.wW3r/{0R0W5aQ4_1WQ4c1]S4h1g1pQ4o1oQ5m3OW6W3v3x3y7QS6f4`4aQ6k4jQ6n4nQ6{5[Q7Y5nS7j6Y6[Q7n6gQ7p6lQ7s6pQ7z6|Q8T7ZQ8^7lQ8a7rQ8e7{Q8t8fQ8|8uQ9Q8}Q:Z:UQ:d:_R:e:`$nWORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#a#d$Y$l%Y%]%^%a%c%d%e%g%k%v&O&Z&a&k&x&|'|)O)V*e*i*n+p+w,Y,`-j-o-w.R.r/T/U/V/X/]/`/b/y0`0j2a2y3^3`3a3q5j5x6S7h8[8qS!wn!j!j:T#[#j&S'r*}+Q,e/p0}2i3j6y9S9U9X9Y9Z9[9]9^9_9`9a9b9c9d9e9h9q9r9t9{9|:P:Q:kR:Z:j$nXORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#a#d$Y$l%Y%]%^%a%c%d%e%g%k%v&O&Z&a&k&x&|'|)O)V*e*i*n+p+w,Y,`-j-o-w.R.r/T/U/V/X/]/`/b/y0`0j2a2y3^3`3a3q5j5x6S7h8[8qQ$Xb!Y$cm!i$f$g$h&Q&e&f&g(e)`)a+R+b+t+u-Z.Q/u/|0R0^1m3t3y6V7i8]S$in!jQ)]$dQ*V%RW.w*W*X*Y*ZU3O.x.y.zQ5[2kS5n3P3QU6|5]5^5aQ7Z5oU7{6}7O7QS8f7|7}S8u8g8hQ8}8v!j:U#[#j&S'r*}+Q,e/p0}2i3j6y9S9U9X9Y9Z9[9]9^9_9`9a9b9c9d9e9h9q9r9t9{9|:P:Q:kQ:_:iR:`:j$f]OSTjk}!S!W!]!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#a#d$Y$l%Y%]%a%c%d%e%g%k%v&O&Z&a&k&x&|'|)O)V*e*i*n+p+w,Y,`-j-o-w.R.r/T/U/V/X/]/`/b/y0`0j2a2y3^3`3a3q5j5x6S7h8[8qU!gRU!`v$urs!q!t$W$s&[&o&r)r)s)t*g+O+_+z+|/f0bQ*d%^!h:V#[#j'r*}+Q,e/p0}2i3j6y9S9U9X9Y9Z9[9]9^9_9`9a9b9c9d9e9h9q9r9t9{9|:P:Q:kR:Y&SS&W!b$tR/s+X$l[ORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#a#d$Y$l%Y%]%a%c%d%e%g%k%v&O&Z&a&k&x&|'|)O)V*e*i*n+p+w,Y,`-j-o-w.R.r/T/U/V/X/]/`/b/y0`0j2a2y3^3`3a3q5j5x6S7h8[8q!j'`#[#j&S'r*}+Q,e/p0}2i3j6y9S9U9X9Y9Z9[9]9^9_9`9a9b9c9d9e9h9q9r9t9{9|:P:Q:kR*c%^$noORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#a#d$Y$l%Y%]%^%a%c%d%e%g%k%v&O&Z&a&k&x&|'|)O)V*e*i*n+p+w,Y,`-j-o-w.R.r/T/U/V/X/]/`/b/y0`0j2a2y3^3`3a3q5j5x6S7h8[8qQ'P!z!k:W#[#j&S'r*}+Q,e/p0}2i3j6y9S9U9X9Y9Z9[9]9^9_9`9a9b9c9d9e9h9q9r9t9{9|:P:Q:k!h#UZ!_$^%u%y&t&{'Y'Z'[']'b'f)j*y+]+v,U,[,o-m0_0i0y1v2S3o4P4S6R7e8Y8o8z9T!R9`'_'p+S,a/k/n0m0u0v0w0x0|1R3l4T4Y4Z5Z6O6_6c6d7x:a!d#WZ!_$^%u%y&t&{'[']'b'f)j*y+]+v,U,[,o-m0_0i0y1v2S3o4P4S6R7e8Y8o8z9T}9b'_'p+S,a/k/n0m0w0x0|1R3l4T4Y4Z5Z6O6_6c6d7x:a!`#[Z!_$^%u%y&t&{'b'f)j*y+]+v,U,[,o-m0_0i0y1v2S3o4P4S6R7e8Y8o8z9Tl(U#s&y(},w-P-e-f0g1u4^4r:[:f:gx:k'_'p+S,a/k/n0m0|1R3l4T4Y4Z5Z6O6_6c6d7x:a!`:n&u'd(X(_+n,S,l-T-q-t.e.g0Z0f1^1b2O2d2f2v4R4e4k4t4y5U5i6^6i6o7WZ:o0z4X6`7m8_&YcORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#[#a#d#j$Y$l%Y%]%^%a%c%d%e%g%k%v&O&S&Z&a&k&x&|'r'|)O)V*e*i*n*}+Q+p+w,Y,`,e-j-o-w.R.r/T/U/V/X/]/`/b/p/y0`0j0}2a2i2y3^3`3a3j3q5j5x6S6y7h8[8q9S9U9X9Y9Z9[9]9^9_9`9a9b9c9d9e9h9q9r9t9{9|:P:Q:kS#k`#lR1O,d&a_ORSTU`jk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#[#a#d#j#l$Y$l%Y%]%^%a%c%d%e%g%k%v&O&S&Z&a&k&x&|'r'|)O)V*e*i*n*}+Q+p+w,Y,`,d,e-j-o-w.R.r/T/U/V/X/]/`/b/p/y0`0j0}2a2i2y3^3`3a3j3q5j5x6S6y7h8[8q9S9U9X9Y9Z9[9]9^9_9`9a9b9c9d9e9h9q9r9t9{9|:P:Q:kS#f^#mT'i#h'mT#g^#mT'k#h'm&a`ORSTU`jk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#[#a#d#j#l$Y$l%Y%]%^%a%c%d%e%g%k%v&O&S&Z&a&k&x&|'r'|)O)V*e*i*n*}+Q+p+w,Y,`,d,e-j-o-w.R.r/T/U/V/X/]/`/b/p/y0`0j0}2a2i2y3^3`3a3j3q5j5x6S6y7h8[8q9S9U9X9Y9Z9[9]9^9_9`9a9b9c9d9e9h9q9r9t9{9|:P:Q:kT#k`#lQ#n`R't#l$nbORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#a#d$Y$l%Y%]%^%a%c%d%e%g%k%v&O&Z&a&k&x&|'|)O)V*e*i*n+p+w,Y,`-j-o-w.R.r/T/U/V/X/]/`/b/y0`0j2a2y3^3`3a3q5j5x6S7h8[8q!k:i#[#j&S'r*}+Q,e/p0}2i3j6y9S9U9X9Y9Z9[9]9^9_9`9a9b9c9d9e9h9q9r9t9{9|:P:Q:k#RdOSUj}!S!W!m!{#j$Y%Y%]%^%a%c%d%e%g%k&O&a'r)V*e*i*n+p,e-j-w.r/T/U/V/X/]/`/b0}2a2y3^3`3a5j5xt#ya!x$Q$R$V(R(T(U(](q(r,V-l1V1q:h:n:o!|&w!v#c#u#w&b'x(a)U)W)Z)x){+q-Q-S-v-x.f.i.q.s1`1j1x1{2P2b2x2z4d4p4x5f5k6x7U8R9k9m9o9u9w9y9}:RQ({$TQ,p'}c0{9g9l9n9p9v9x9z:O:St#va!x$Q$R$V(R(T(U(](q(r,V-l1V1q:h:n:oS(h#x(kQ(|$UQ-^(i!|:]!v#c#u#w&b'x(a)U)W)Z)x){+q-Q-S-v-x.f.i.q.s1`1j1x1{2P2b2x2z4d4p4x5f5k6x7U8R9k9m9o9u9w9y9}:Rb:^9g9l9n9p9v9x9z:O:SQ:b:lR:c:mt#ya!x$Q$R$V(R(T(U(](q(r,V-l1V1q:h:n:o!|&w!v#c#u#w&b'x(a)U)W)Z)x){+q-Q-S-v-x.f.i.q.s1`1j1x1{2P2b2x2z4d4p4x5f5k6x7U8R9k9m9o9u9w9y9}:Rc0{9g9l9n9p9v9x9z:O:SlfOSj}!m$Y%a%d%e%g*i*n/]/`Q(`#wQ*u%nQ*v%pR1_-Q$U#za!v!x#c#u#w$Q$R$V&b'x(R(T(U(](a(q(r)U)W)Z)x){+q,V-Q-S-l-v-x.f.i.q.s1V1`1j1q1x1{2P2b2x2z4d4p4x5f5k6x7U8R9g9k9l9m9n9o9p9u9v9w9x9y9z9}:O:R:S:h:n:oQ)z${Q.h)|Q2e.gR5W2fT(j#x(kS(j#x(kT2m.o2nQ)[$cQ-](hQ-})]Q.v*VQ2}.wQ5m3OQ6{5[Q7Y5nQ7z6|Q8T7ZQ8e7{Q8t8fQ8|8uR9Q8}l(R#s&y(},w-P-e-f0g1u4^4r:[:f:g!`9u&u'd(X(_+n,S,l-T-q-t.e.g0Z0f1^1b2O2d2f2v4R4e4k4t4y5U5i6^6i6o7WZ9v0z4X6`7m8_n(T#s&y(},u,w-P-e-f0g1u4^4r:[:f:g!b9w&u'd(X(_+n,S,l-T-q-t.e.g0Z0d0f1^1b2O2d2f2v4R4e4k4t4y5U5i6^6i6o7W]9x0z4X6`6a7m8_peOSjy}!m$Y%W%a%d%e%g*i*n/]/`Q%TxR*e%^peOSjy}!m$Y%W%a%d%e%g*i*n/]/`R%TxQ*O$|R.d)wqeOSjy}!m$Y%W%a%d%e%g*i*n/]/`Q.p*TS2w.t.uW5e2t2u2v2{U7T5g5h5iU8P7S7V7WQ8i8QR8w8jQ%[yR*_%WR3U.}R7]5pS$kp$pR.Y)hQ%azR*i%bR*o%hT/^*n/`QjOQ!mST$]j!mQ'z#rR,m'zQ!YQR%s!YQ!^RU%w!^%x*zQ%x!_R*z%yQ+V&TR/r+VQ,W&yR0h,WQ,Z&{S0k,Z0lR0l,[Q+e&_R/}+eQ&]!eQ*{%zT+`&]*{Q+Y&WR/t+YQ&p!rQ+y&nU+}&p+y0cR0c,OQ'm#hR,f'mQ#l`R's#lQ#bZU'c#b*x9fQ*x9TR9f'pQ,z(YW1Y,z1Z4b6hU1Z,{,|,}S4b1[1]R6h4c#q(P#s&u&y'd(X(_(x(y(}+n,Q,R,S,l,u,v,w-P-T-e-f-q-t.e.g0Z0d0e0f0g0z1^1b1u2O2d2f2v4R4V4W4X4^4e4k4r4t4y5U5i6^6`6a6b6i6o7W7m8_:[:f:gQ-R(_U1a-R1c4fQ1c-TR4f1bQ(k#xR-_(kQ(t#|R-h(tQ1y-qR4u1yQ)u$vR.c)uQ2h.jS5Y2h6zR6z5ZQ*Q$}R.m*QQ2n.oR5_2nQ.|*[S3S.|5qR5q3UQ.T)dW2X.T2Z5O6uQ2Z.WQ5O2YR6u5PQ)i$kR.Z)iQ/`*nR3d/`WiOSj!mQ%f}Q)Q$YQ*h%aQ*j%dQ*k%eQ*m%gQ/Z*iS/^*n/`R3c/]Q$[gQ%j!RQ%m!TQ%o!UQ%q!VQ)p$qQ)v$wQ*^%[Q*s%lS/P*_*bQ/g*rQ/h*uQ/i*vS/x+b2kQ1d-VQ1e-WQ1k-]Q2^.^Q2c.eQ2|.vQ3W/RQ3b/[Y3p/z/{0R0W5aQ4g1fQ4i1hQ4l1lQ5S2`Q5V2dQ5l2}Q5r3V[6Q3o3r3v3x3y7QQ6j4hQ6m4mQ6v5QQ7X5mQ7^5sW7d6R6W6Y6[Q7o6kQ7q6nQ7v6wQ7y6{Q8S7YU8W7e7j7lQ8`7pQ8b7sQ8d7zQ8k8TS8m8Y8^Q8r8aQ8s8eQ8x8oQ8{8tQ9O8zQ9P8|R9R9QQ$emQ&d!iU)_$f$g$hQ+P&QU+s&e&f&gQ-V(eS.P)`)aQ/o+RQ/w+bS0]+t+uQ1h-ZQ2R.QQ3m/uS3s/|0RQ4O0^Q4m1mS6U3t3yQ7g6VQ8Z7iR8p8]S#ta:hR)Y$bU#|a$b:hR-g(sQ#saS&u!v)ZQ&y!xQ'd#cQ(X#uQ(_#wQ(x$QQ(y$RQ(}$VQ+n&bQ,Q9kQ,R9mQ,S9oQ,l'xQ,u(RQ,v(TQ,w(UQ-P(]Q-T(aQ-e(qQ-f(rd-q)U-v.q1{2x4x5f6x7U8RQ-t)WQ.e)xQ.g){Q0Z+qQ0d9uQ0e9wQ0f9yQ0g,VQ0z9gQ1^-QQ1b-SQ1u-lQ2O-xQ2d.fQ2f.iQ2v.sQ4R9}Q4V9lQ4W9nQ4X9pQ4^1VQ4e1`Q4k1jQ4r1qQ4t1xQ4y2PQ5U2bQ5i2zQ6^:RQ6`9zQ6a9vQ6b9xQ6i4dQ6o4pQ7W5kQ7m:OQ8_:SQ:[:hQ:f:nR:g:oT'y#r'zlgOSj}!m$Y%a%d%e%g*i*n/]/`S!oU%cQ%l!SQ%r!WQ'Q!{Q'q#jS*b%Y%]Q*f%^Q*r%kQ*|&OQ+m&aQ,j'rQ-s)VQ/W*eQ0Y+pQ1Q,eQ1s-jQ1}-wQ2u.rQ3Y/TQ3Z/UQ3]/VQ3_/XQ3f/bQ4[0}Q5T2aQ5h2yQ5w3^Q5y3`Q5z3aQ7V5jR7`5x!vZOSUj}!S!m!{$Y%Y%]%^%a%c%d%e%g%k&O&a)V*e*i*n+p-j-w.r/T/U/V/X/]/`/b2a2y3^3`3a5j5xQ!_RQ!nTQ$^kQ%u!]Q%y!`Q&t!uQ&{!yQ'R#OQ'S#PQ'T#QQ'U#RQ'V#SQ'W#TQ'X#UQ'Y#VQ'Z#WQ'[#XQ']#YQ'_#[Q'b#aQ'f#dW'p#j'r,e0}Q)j$lQ*y%vS+S&S/pQ+]&ZQ+v&kQ,U&xQ,[&|Q,_9SQ,a9UQ,o'|Q-m)OQ/k*}Q/n+QQ0_+wQ0i,YQ0m9XQ0n9YQ0o9ZQ0p9[Q0q9]Q0r9^Q0s9_Q0t9`Q0u9aQ0v9bQ0w9cQ0x9dQ0y,`Q0|9hQ1R9eQ1v-oQ2S.RQ3l9qQ3o/yQ4P0`Q4S0jQ4T9rQ4Y9tQ4Z9{Q5Z2iQ6O3jQ6R3qQ6_9|Q6c:PQ6d:QQ7e6SQ7x6yQ8Y7hQ8o8[Q8z8qQ9T!WR:a:kT!XQ!YR!aRR&U!bS&Q!b+US+R&R&YR/u+[R&z!xR&}!yT!sU$WS!rU$WU$vrs*gS&n!q!tQ+{&oQ,O&rQ.b)tS0a+z+|R4Q0b[!dR!`$s&[)r+_h!pUrs!q!t$W&o&r)t+z+|0bQ/Y*gQ/l+OQ3i/fT:X&S)sT!fR$sS!eR$sS%z!`)rS+T&S)sQ+^&[R/v+_T&X!b$tQ#h^R'v#mT'l#h'mR1P,dT([#u(dR(b#wQ-r)UQ1|-vQ2t.qQ4v1{Q5g2xQ6r4xQ7S5fQ7w6xQ8Q7UR8j8RlhOSj}!m$Y%a%d%e%g*i*n/]/`Q%ZyR*^%WV$wrs*gR.k)}R*]%UQ$opR)o$pR)e$jT%_z%bT%`z%bT/_*n/`",
+-  nodeNames: "⚠ ArithOp ArithOp extends LineComment BlockComment Script ExportDeclaration export Star as VariableName from String ; default FunctionDeclaration async function VariableDefinition TypeParamList TypeDefinition ThisType this LiteralType ArithOp Number BooleanLiteral TemplateType VoidType void TypeofType typeof MemberExpression . ?. PropertyName [ TemplateString null super RegExp ] ArrayExpression Spread , } { ObjectExpression Property async get set PropertyDefinition Block : NewExpression new TypeArgList CompareOp < ) ( ArgList UnaryExpression await yield delete LogicOp BitOp ParenthesizedExpression ClassExpression class extends ClassBody MethodDeclaration Privacy static abstract override PrivatePropertyDefinition PropertyDeclaration readonly Optional TypeAnnotation Equals StaticBlock FunctionExpression ArrowFunction ParamList ParamList ArrayPattern ObjectPattern PatternProperty Privacy readonly Arrow MemberExpression PrivatePropertyName BinaryExpression ArithOp ArithOp ArithOp ArithOp BitOp CompareOp instanceof in const CompareOp BitOp BitOp BitOp LogicOp LogicOp ConditionalExpression LogicOp LogicOp AssignmentExpression UpdateOp PostfixExpression CallExpression TaggedTemplateExpression DynamicImport import ImportMeta JSXElement JSXSelfCloseEndTag JSXStartTag JSXSelfClosingTag JSXIdentifier JSXNamespacedName JSXMemberExpression JSXSpreadAttribute JSXAttribute JSXAttributeValue JSXEscape JSXEndTag JSXOpenTag JSXFragmentTag JSXText JSXEscape JSXStartCloseTag JSXCloseTag PrefixCast ArrowFunction TypeParamList SequenceExpression KeyofType keyof UniqueType unique ImportType InferredType infer TypeName ParenthesizedType FunctionSignature ParamList NewSignature IndexedType TupleType Label ArrayType ReadonlyType ObjectType MethodType PropertyType IndexSignature CallSignature TypePredicate is NewSignature new UnionType LogicOp IntersectionType LogicOp ConditionalType ParameterizedType ClassDeclaration abstract implements type VariableDeclaration let var TypeAliasDeclaration InterfaceDeclaration interface EnumDeclaration enum EnumBody NamespaceDeclaration namespace module AmbientDeclaration declare GlobalDeclaration global ClassDeclaration ClassBody MethodDeclaration AmbientFunctionDeclaration ExportGroup VariableName VariableName ImportDeclaration ImportGroup ForStatement for ForSpec ForInSpec ForOfSpec of WhileStatement while WithStatement with DoStatement do IfStatement if else SwitchStatement switch SwitchBody CaseLabel case DefaultLabel TryStatement try catch finally ReturnStatement return ThrowStatement throw BreakStatement break ContinueStatement continue DebuggerStatement debugger LabeledStatement ExpressionStatement",
+-  maxTerm: 330,
++  states: "$1dO`QYOOO'QQ!LdO'#CgO'XOSO'#DSO)dQYO'#DXO)tQYO'#DdO){QYO'#DnO-xQYO'#DtOOQO'#EX'#EXO.]QWO'#EWO.bQWO'#EWOOQ!LS'#Eb'#EbO0aQ!LdO'#IsO2wQ!LdO'#ItO3eQWO'#EvO3jQpO'#F_OOQ!LS'#FO'#FOO3uO!bO'#FOO4TQWO'#FfO5bQWO'#FeOOQ!LS'#It'#ItOOQ!LQ'#Is'#IsOOQQ'#J^'#J^O5gQWO'#HlO5lQ!LYO'#HmOOQQ'#Ie'#IeOOQQ'#Hn'#HnQ`QYOOO){QYO'#DfO5tQWO'#GYO5yQ#tO'#ClO6XQWO'#EVO6dQWO'#EcO6iQ#tO'#E}O7TQWO'#GYO7YQWO'#G^O7eQWO'#G^O7sQWO'#GaO7sQWO'#GbO7sQWO'#GdO5tQWO'#GgO8dQWO'#GjO9rQWO'#CcO:SQWO'#GwO:[QWO'#G}O:[QWO'#HPO`QYO'#HRO:[QWO'#HTO:[QWO'#HWO:aQWO'#H^O:fQ!LZO'#HbO){QYO'#HdO:qQ!LZO'#HfO:|Q!LZO'#HhO5lQ!LYO'#HjO){QYO'#IuOOOS'#Hp'#HpO;XOSO,59nOOQ!LS,59n,59nO=jQbO'#CgO=tQYO'#HqO>RQWO'#IvO@QQbO'#IvO'dQYO'#IvO@XQWO,59sO@oQ&jO'#D^OAhQWO'#EXOAuQWO'#JROBQQWO'#JQOBYQWO,5:uOB_QWO'#JPOBfQWO'#DuO5yQ#tO'#EVOBtQWO'#EVOCPQ`O'#E}OOQ!LS,5:O,5:OOCXQYO,5:OOEVQ!LdO,5:YOEsQWO,5:`OF^Q!LYO'#JOO7YQWO'#I}OFeQWO'#I}OFmQWO,5:tOFrQWO'#I}OGQQYO,5:rOIQQWO'#ESOJ[QWO,5:rOKkQWO'#DhOKrQYO'#DmOK|Q&jO,5:{O){QYO,5:{OOQQ'#En'#EnOOQQ'#Ep'#EpO){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}OOQQ'#Et'#EtOLUQYO,5;_OOQ!LS,5;d,5;dOOQ!LS,5;e,5;eONUQWO,5;eOOQ!LS,5;f,5;fO){QYO'#H{ONZQ!LYO,5<RONuQWO,5:}O){QYO,5;bON|QpO'#FTO! yQpO'#JVO! eQpO'#JVO!!QQpO'#JVOOQO'#JV'#JVO!!fQpO,5;mOOOO,5;y,5;yO!!wQYO'#FaOOOO'#Hz'#HzO3uO!bO,5;jO!#OQpO'#FcOOQ!LS,5;j,5;jO!#oQ,UO'#CqOOQ!LS'#Ct'#CtO!$SQWO'#CtO!$XOSO'#CxO!$uQ#tO,5<OO!$|QWO,5<QO!&YQWO'#FpO!&gQWO'#FqO!&lQWO'#FuO!'nQ&jO'#FyO!(aQ,UO'#InOOQ!LS'#In'#InO!(kQWO'#ImO!(yQWO'#IlOOQ!LS'#Cr'#CrOOQ!LS'#Cy'#CyO!)RQWO'#C{OJaQWO'#FhOJaQWO'#FjO!)WQWO'#FlO!)]QWO'#FmO!)bQWO'#FsOJaQWO'#FxO!)gQWO'#EYO!*OQWO,5<PO`QYO,5>WOOQQ'#Ih'#IhOOQQ,5>X,5>XOOQQ-E;l-E;lO!+zQ!LdO,5:QOOQ!LQ'#Co'#CoO!,kQ#tO,5<tOOQO'#Ce'#CeO!,|QWO'#CpO!-UQ!LYO'#IiO5bQWO'#IiO:aQWO,59WO!-dQpO,59WO!-lQ#tO,59WO5yQ#tO,59WO!-wQWO,5:rO!.PQWO'#GvO!.[QWO'#JbO){QYO,5;gO!.dQ&jO,5;iO!.iQWO,5=aO!.nQWO,5=aO!.sQWO,5=aO5lQ!LYO,5=aO5tQWO,5<tO!/RQWO'#EZO!/dQ&jO'#E[OOQ!LQ'#JP'#JPO!/uQ!LYO'#J_O5lQ!LYO,5<xO7sQWO,5=OOOQO'#Cq'#CqO!0QQpO,5<{O!0YQ#tO,5<|O!0eQWO,5=OO!0jQ`O,5=RO:aQWO'#GlO5tQWO'#GnO!0rQWO'#GnO5yQ#tO'#GqO!0wQWO'#GqOOQQ,5=U,5=UO!0|QWO'#GrO!1UQWO'#ClO!1ZQWO,58}O!1eQWO,58}O!3gQYO,58}OOQQ,58},58}O!3tQ!LYO,58}O){QYO,58}O!4PQYO'#GyOOQQ'#Gz'#GzOOQQ'#G{'#G{O`QYO,5=cO!4aQWO,5=cO){QYO'#DtO`QYO,5=iO`QYO,5=kO!4fQWO,5=mO`QYO,5=oO!4kQWO,5=rO!4pQYO,5=xOOQQ,5=|,5=|O){QYO,5=|O5lQ!LYO,5>OOOQQ,5>Q,5>QO!8qQWO,5>QOOQQ,5>S,5>SO!8qQWO,5>SOOQQ,5>U,5>UO!8vQ`O,5?aOOOS-E;n-E;nOOQ!LS1G/Y1G/YO!8{QbO,5>]O){QYO,5>]OOQO-E;o-E;oO!9VQWO,5?bO!9_QbO,5?bO!9fQWO,5?lOOQ!LS1G/_1G/_O!9nQpO'#DQOOQO'#Ix'#IxO){QYO'#IxO!:]QpO'#IxO!:zQpO'#D_O!;]Q&jO'#D_O!=hQYO'#D_O!=oQWO'#IwO!=wQWO,59xO!=|QWO'#E]O!>[QWO'#JSO!>dQWO,5:vO!>zQ&jO'#D_O){QYO,5?mO!?UQWO'#HvO!9fQWO,5?lOOQ!LQ1G0a1G0aO!@bQ&jO'#DxOOQ!LS,5:a,5:aO){QYO,5:aOIQQWO,5:aO!@iQWO,5:aO:aQWO,5:qO!-dQpO,5:qO!-lQ#tO,5:qO5yQ#tO,5:qOOQ!LS1G/j1G/jOOQ!LS1G/z1G/zOOQ!LQ'#ER'#ERO){QYO,5?jO!@tQ!LYO,5?jO!AVQ!LYO,5?jO!A^QWO,5?iO!AfQWO'#HxO!A^QWO,5?iOOQ!LQ1G0`1G0`O7YQWO,5?iOOQ!LS1G0^1G0^O!BQQ!LdO1G0^O!BqQ!LbO,5:nOOQ!LS'#Fo'#FoO!C_Q!LdO'#InOGQQYO1G0^O!E^Q#tO'#IyO!EhQWO,5:SO!EmQbO'#IzO){QYO'#IzO!EwQWO,5:XOOQ!LS'#DQ'#DQOOQ!LS1G0g1G0gO!E|QWO1G0gO!H_Q!LdO1G0iO!HfQ!LdO1G0iO!JyQ!LdO1G0iO!KQQ!LdO1G0iO!MXQ!LdO1G0iO!MlQ!LdO1G0iO#!]Q!LdO1G0iO#!dQ!LdO1G0iO#$wQ!LdO1G0iO#%OQ!LdO1G0iO#&sQ!LdO1G0iO#)mQ7^O'#CgO#+hQ7^O1G0yO#-cQ7^O'#ItOOQ!LS1G1P1G1PO#-vQ!LdO,5>gOOQ!LQ-E;y-E;yO#.gQ!LdO1G0iOOQ!LS1G0i1G0iO#0iQ!LdO1G0|O#1YQpO,5;qO#1bQpO,5;rO#1jQpO'#FYO#2RQWO'#FXOOQO'#JW'#JWOOQO'#Hy'#HyO#2WQpO1G1XOOQ!LS1G1X1G1XOOOO1G1d1G1dO#2iQ7^O'#IsO#2sQWO,5;{OLUQYO,5;{OOOO-E;x-E;xOOQ!LS1G1U1G1UOOQ!LS,5;},5;}O#2xQpO,5;}OOQ!LS,59`,59`OIQQWO'#IpOOOS'#Ho'#HoO#2}OSO,59dOOQ!LS,59d,59dO){QYO1G1jO!)]QWO'#H}O#3YQWO,5<cOOQ!LS,5<`,5<`OOQO'#GT'#GTOJaQWO,5<nOOQO'#GV'#GVOJaQWO,5<pOJaQWO,5<rOOQO1G1l1G1lO#3eQ`O'#CoO#3xQ`O,5<[O#4PQWO'#JZO5tQWO'#JZO#4_QWO,5<^OJaQWO,5<]O#4dQ`O'#FoO#4qQ`O'#J[O#4{QWO'#J[OIQQWO'#J[O#5QQWO,5<aOOQ!LQ'#Dc'#DcO#5VQWO'#FrO#5bQpO'#FzO!'iQ&jO'#FzO!'iQ&jO'#F|O#5sQWO'#F}O!)bQWO'#GQOOQO'#IP'#IPO#5xQ&jO,5<eOOQ!LS,5<e,5<eO#6PQ&jO'#FzO#6_Q&jO'#F{O#6gQ&jO'#F{OOQ!LS,5<s,5<sOJaQWO,5?XOJaQWO,5?XO#6lQWO'#IQO#6wQWO,5?WOOQ!LS'#Cg'#CgO#7kQ#tO,59gOOQ!LS,59g,59gO#8^Q#tO,5<SO#9PQ#tO,5<UO#9ZQWO,5<WOOQ!LS,5<X,5<XO#9`QWO,5<_O#9eQ#tO,5<dOGQQYO1G1kO#9uQWO1G1kOOQQ1G3r1G3rOOQ!LS1G/l1G/lONUQWO1G/lOOQQ1G2`1G2`OIQQWO1G2`O){QYO1G2`OIQQWO1G2`O#9zQWO1G2`O#:YQWO,59[O#;cQWO'#ESOOQ!LQ,5?T,5?TO#;mQ!LYO,5?TOOQQ1G.r1G.rO:aQWO1G.rO!-dQpO1G.rO!-lQ#tO1G.rO#;{QWO1G0^O#<QQWO'#CgO#<]QWO'#JcO#<eQWO,5=bO#<jQWO'#JcO#<oQWO'#JcO#<tQWO'#IYO#=SQWO,5?|O#=[QbO1G1ROOQ!LS1G1T1G1TO5tQWO1G2{O#=cQWO1G2{O#=hQWO1G2{O#=mQWO1G2{OOQQ1G2{1G2{O#=rQ#tO1G2`O7YQWO'#JQO7YQWO'#E]O7YQWO'#ISO#>TQ!LYO,5?yOOQQ1G2d1G2dO!0eQWO1G2jOIQQWO1G2gO#>`QWO1G2gOOQQ1G2h1G2hOIQQWO1G2hO#>eQWO1G2hO#>mQ&jO'#GfOOQQ1G2j1G2jO!'iQ&jO'#IUO!0jQ`O1G2mOOQQ1G2m1G2mOOQQ,5=W,5=WO#>uQ#tO,5=YO5tQWO,5=YO#5sQWO,5=]O5bQWO,5=]O!-dQpO,5=]O!-lQ#tO,5=]O5yQ#tO,5=]O#?WQWO'#JaO#?cQWO,5=^OOQQ1G.i1G.iO#?hQ!LYO1G.iO#?sQWO1G.iO!)RQWO1G.iO5lQ!LYO1G.iO#?xQbO,5@OO#@SQWO,5@OO#@_QYO,5=eO#@fQWO,5=eO7YQWO,5@OOOQQ1G2}1G2}O`QYO1G2}OOQQ1G3T1G3TOOQQ1G3V1G3VO:[QWO1G3XO#@kQYO1G3ZO#DfQYO'#HYOOQQ1G3^1G3^O:aQWO1G3dO#DsQWO1G3dO5lQ!LYO1G3hOOQQ1G3j1G3jOOQ!LQ'#Fv'#FvO5lQ!LYO1G3lO5lQ!LYO1G3nOOOS1G4{1G4{O#D{Q`O,5<RO#ETQbO1G3wO#E_QWO1G4|O#EgQWO1G5WO#EoQWO,5?dOLUQYO,5:wO7YQWO,5:wO:aQWO,59yOLUQYO,59yO!-dQpO,59yO#EtQ7^O,59yOOQO,5:w,5:wO#FOQ&jO'#HrO#FfQWO,5?cOOQ!LS1G/d1G/dO#FnQ&jO'#HwO#GSQWO,5?nOOQ!LQ1G0b1G0bO!;]Q&jO,59yO#G[QbO1G5XOOQO,5>b,5>bO7YQWO,5>bOOQO-E;t-E;tOOQ!LQ'#EO'#EOO#GfQ!LrO'#EPO!@YQ&jO'#DyOOQO'#Hu'#HuO#HQQ&jO,5:dOOQ!LS,5:d,5:dO#HXQ&jO'#DyO#HjQ&jO'#DyO#HqQ&jO'#EUO#HtQ&jO'#EPO#IRQ&jO'#EPO!@YQ&jO'#EPO#IfQWO1G/{O#IkQ`O1G/{OOQ!LS1G/{1G/{O){QYO1G/{OIQQWO1G/{OOQ!LS1G0]1G0]O:aQWO1G0]O!-dQpO1G0]O!-lQ#tO1G0]O#IrQ!LdO1G5UO){QYO1G5UO#JSQ!LYO1G5UO#JeQWO1G5TO7YQWO,5>dOOQO,5>d,5>dO#JmQWO,5>dOOQO-E;v-E;vO#JeQWO1G5TO#J{Q!LdO,59gO#LzQ!LdO,5<SO#N|Q!LdO,5<UO$#OQ!LdO,5<dOOQ!LS7+%x7+%xO$%WQ!LdO7+%xO$%wQWO'#HsO$&RQWO,5?eOOQ!LS1G/n1G/nO$&ZQYO'#HtO$&hQWO,5?fO$&pQbO,5?fOOQ!LS1G/s1G/sOOQ!LS7+&R7+&RO$&zQ7^O,5:YO){QYO7+&eO$'UQ7^O,5:QOOQO1G1]1G1]OOQO1G1^1G1^O$'cQMhO,5;tOLUQYO,5;sOOQO-E;w-E;wOOQ!LS7+&s7+&sOOOO7+'O7+'OOOOO1G1g1G1gO$'nQWO1G1gOOQ!LS1G1i1G1iO$'sQ`O,5?[OOOS-E;m-E;mOOQ!LS1G/O1G/OO$'zQ!LdO7+'UOOQ!LS,5>i,5>iO$(kQWO,5>iOOQ!LS1G1}1G1}P$(pQWO'#H}POQ!LS-E;{-E;{O$)aQ#tO1G2YO$*SQ#tO1G2[O$*^Q#tO1G2^OOQ!LS1G1v1G1vO$*eQWO'#H|O$*sQWO,5?uO$*sQWO,5?uO$*{QWO,5?uO$+WQWO,5?uOOQO1G1x1G1xO$+fQ#tO1G1wO$+vQWO'#IOO$,WQWO,5?vOIQQWO,5?vO$,`Q`O,5?vOOQ!LS1G1{1G1{O5lQ!LYO,5<fO5lQ!LYO,5<gO$,jQWO,5<gO#5nQWO,5<gO!-dQpO,5<fO$,oQWO,5<hO5lQ!LYO,5<iO$,jQWO,5<lOOQO-E;}-E;}OOQ!LS1G2P1G2PO!'iQ&jO,5<fO$,wQWO,5<gO!'iQ&jO,5<hO!'iQ&jO,5<gO$-SQ#tO1G4sO$-^Q#tO1G4sOOQO,5>l,5>lOOQO-E<O-E<OO!.dQ&jO,59iO){QYO,59iO$-kQWO1G1rOJaQWO1G1yO$-pQ!LdO7+'VOOQ!LS7+'V7+'VOGQQYO7+'VOOQ!LS7+%W7+%WO$.aQ`O'#J]O#IfQWO7+'zO$.kQWO7+'zO$.sQ`O7+'zOOQQ7+'z7+'zOIQQWO7+'zO){QYO7+'zOIQQWO7+'zOOQO1G.v1G.vO$.}Q!LbO'#CgO$/_Q!LbO,5<jO$/|QWO,5<jOOQ!LQ1G4o1G4oOOQQ7+$^7+$^O:aQWO7+$^O!-dQpO7+$^OGQQYO7+%xO$0RQWO'#IXO$0aQWO,5?}OOQO1G2|1G2|O5tQWO,5?}O$0aQWO,5?}O$0iQWO,5?}OOQO,5>t,5>tOOQO-E<W-E<WOOQ!LS7+&m7+&mO$0nQWO7+(gO5lQ!LYO7+(gO5tQWO7+(gO$0sQWO7+(gO$0xQWO7+'zOOQ!LQ,5>n,5>nOOQ!LQ-E<Q-E<QOOQQ7+(U7+(UO$1WQ!LbO7+(ROIQQWO7+(RO$1bQ`O7+(SOOQQ7+(S7+(SOIQQWO7+(SO$1iQWO'#J`O$1tQWO,5=QOOQO,5>p,5>pOOQO-E<S-E<SOOQQ7+(X7+(XO$2nQ&jO'#GoOOQQ1G2t1G2tOIQQWO1G2tO){QYO1G2tOIQQWO1G2tO$2uQWO1G2tO$3TQ#tO1G2tO5lQ!LYO1G2wO#5sQWO1G2wO5bQWO1G2wO!-dQpO1G2wO!-lQ#tO1G2wO$3fQWO'#IWO$3qQWO,5?{O$3yQ&jO,5?{OOQ!LQ1G2x1G2xOOQQ7+$T7+$TO$4OQWO7+$TO5lQ!LYO7+$TO$4TQWO7+$TO){QYO1G5jO){QYO1G5kO$4YQYO1G3PO$4aQWO1G3PO$4fQYO1G3PO$4mQ!LYO1G5jOOQQ7+(i7+(iO5lQ!LYO7+(sO`QYO7+(uOOQQ'#Jf'#JfOOQQ'#IZ'#IZO$4wQYO,5=tOOQQ,5=t,5=tO){QYO'#HZO$5UQWO'#H]OOQQ7+)O7+)OO$5ZQYO7+)OO7YQWO7+)OOOQQ7+)S7+)SOOQQ7+)W7+)WOOQQ7+)Y7+)YOOQO1G5O1G5OO$9XQ7^O1G0cO$9cQWO1G0cOOQO1G/e1G/eO$9nQ7^O1G/eO:aQWO1G/eOLUQYO'#D_OOQO,5>^,5>^OOQO-E;p-E;pOOQO,5>c,5>cOOQO-E;u-E;uO!-dQpO1G/eOOQO1G3|1G3|O:aQWO,5:eOOQO,5:k,5:kO){QYO,5:kO$9xQ!LYO,5:kO$:TQ!LYO,5:kO!-dQpO,5:eOOQO-E;s-E;sOOQ!LS1G0O1G0OO!@YQ&jO,5:eO$:cQ&jO,5:eO$:tQ!LrO,5:kO$;`Q&jO,5:eO!@YQ&jO,5:kOOQO,5:p,5:pO$;gQ&jO,5:kO$;tQ!LYO,5:kOOQ!LS7+%g7+%gO#IfQWO7+%gO#IkQ`O7+%gOOQ!LS7+%w7+%wO:aQWO7+%wO!-dQpO7+%wO$<YQ!LdO7+*pO){QYO7+*pOOQO1G4O1G4OO7YQWO1G4OO$<jQWO7+*oO$<rQ!LdO1G2YO$>tQ!LdO1G2[O$@vQ!LdO1G1wO$COQ#tO,5>_OOQO-E;q-E;qO$CYQbO,5>`O){QYO,5>`OOQO-E;r-E;rO$CdQWO1G5QO$ClQ7^O1G0^O$EsQ7^O1G0iO$EzQ7^O1G0iO$G{Q7^O1G0iO$HSQ7^O1G0iO$IwQ7^O1G0iO$J[Q7^O1G0iO$LiQ7^O1G0iO$LpQ7^O1G0iO$NqQ7^O1G0iO$NxQ7^O1G0iO%!mQ7^O1G0iO%#QQ!LdO<<JPO%#qQ7^O1G0iO%%aQ7^O'#InO%'^Q7^O1G0|OLUQYO'#F[OOQO'#JX'#JXOOQO1G1`1G1`O%'kQWO1G1_O%'pQ7^O,5>gOOOO7+'R7+'ROOOS1G4v1G4vOOQ!LS1G4T1G4TOJaQWO7+'xO%'zQWO,5>hO5tQWO,5>hOOQO-E;z-E;zO%(YQWO1G5aO%(YQWO1G5aO%(bQWO1G5aO%(mQ`O,5>jO%(wQWO,5>jOIQQWO,5>jOOQO-E;|-E;|O%(|Q`O1G5bO%)WQWO1G5bOOQO1G2Q1G2QOOQO1G2R1G2RO5lQ!LYO1G2RO$,jQWO1G2RO5lQ!LYO1G2QO%)`QWO1G2SOIQQWO1G2SOOQO1G2T1G2TO5lQ!LYO1G2WO!-dQpO1G2QO#5nQWO1G2RO%)eQWO1G2SO%)mQWO1G2ROJaQWO7+*_OOQ!LS1G/T1G/TO%)xQWO1G/TOOQ!LS7+'^7+'^O%)}Q#tO7+'eO%*_Q!LdO<<JqOOQ!LS<<Jq<<JqOIQQWO'#IRO%+OQWO,5?wOOQQ<<Kf<<KfOIQQWO<<KfO#IfQWO<<KfO%+WQWO<<KfO%+`Q`O<<KfOIQQWO1G2UOOQQ<<Gx<<GxO:aQWO<<GxO%+jQ!LdO<<IdOOQ!LS<<Id<<IdOOQO,5>s,5>sO%,ZQWO,5>sO#<oQWO,5>sOOQO-E<V-E<VO%,`QWO1G5iO%,`QWO1G5iO5tQWO1G5iO%,hQWO<<LROOQQ<<LR<<LRO%,mQWO<<LRO5lQ!LYO<<LRO){QYO<<KfOIQQWO<<KfOOQQ<<Km<<KmO$1WQ!LbO<<KmOOQQ<<Kn<<KnO$1bQ`O<<KnO%,rQ&jO'#ITO%,}QWO,5?zOLUQYO,5?zOOQQ1G2l1G2lO#GfQ!LrO'#EPO!@YQ&jO'#GpOOQO'#IV'#IVO%-VQ&jO,5=ZOOQQ,5=Z,5=ZO%-^Q&jO'#EPO%-iQ&jO'#EPO%.QQ&jO'#EPO%.[Q&jO'#GpO%.mQWO7+(`O%.rQWO7+(`O%.zQ`O7+(`OOQQ7+(`7+(`OIQQWO7+(`O){QYO7+(`OIQQWO7+(`O%/UQWO7+(`OOQQ7+(c7+(cO5lQ!LYO7+(cO#5sQWO7+(cO5bQWO7+(cO!-dQpO7+(cO%/dQWO,5>rOOQO-E<U-E<UOOQO'#Gs'#GsO%/oQWO1G5gO5lQ!LYO<<GoOOQQ<<Go<<GoO%/wQWO<<GoO%/|QWO7++UO%0RQWO7++VOOQQ7+(k7+(kO%0WQWO7+(kO%0]QYO7+(kO%0dQWO7+(kO){QYO7++UO){QYO7++VOOQQ<<L_<<L_OOQQ<<La<<LaOOQQ-E<X-E<XOOQQ1G3`1G3`O%0iQWO,5=uOOQQ,5=w,5=wO:aQWO<<LjO%0nQWO<<LjOLUQYO7+%}OOQO7+%P7+%PO%0sQ7^O1G5XO:aQWO7+%POOQO1G0P1G0PO%0}Q!LdO1G0VOOQO1G0V1G0VO){QYO1G0VO%1XQ!LYO1G0VO:aQWO1G0PO!-dQpO1G0PO!@YQ&jO1G0PO%1dQ!LYO1G0VO%1rQ&jO1G0PO%2TQ!LYO1G0VO%2iQ!LrO1G0VO%2sQ&jO1G0PO!@YQ&jO1G0VOOQ!LS<<IR<<IROOQ!LS<<Ic<<IcO:aQWO<<IcO%2zQ!LdO<<N[OOQO7+)j7+)jO%3[Q!LdO7+'eO%5dQbO1G3zO%5nQ7^O7+%xO%5{Q7^O,59gO%7xQ7^O,5<SO%9uQ7^O,5<UO%;rQ7^O,5<dO%=bQ7^O7+'UO%=oQ7^O7+'VO%=|QWO,5;vOOQO7+&y7+&yO%>RQ#tO<<KdOOQO1G4S1G4SO%>cQWO1G4SO%>nQWO1G4SO%>|QWO7+*{O%>|QWO7+*{OIQQWO1G4UO%?UQ`O1G4UO%?`QWO7+*|OOQO7+'m7+'mO5lQ!LYO7+'mOOQO7+'l7+'lO$,jQWO7+'nO%?hQ`O7+'nOOQO7+'r7+'rO5lQ!LYO7+'lO$,jQWO7+'mO%?oQWO7+'nOIQQWO7+'nO#5nQWO7+'mO%?tQ#tO<<MyOOQ!LS7+$o7+$oO%@OQ`O,5>mOOQO-E<P-E<PO#IfQWOANAQOOQQANAQANAQOIQQWOANAQO%@YQ!LbO7+'pOOQQAN=dAN=dO5tQWO1G4_OOQO1G4_1G4_O%@gQWO1G4_O%@lQWO7++TO%@lQWO7++TO5lQ!LYOANAmO%@tQWOANAmOOQQANAmANAmO%@yQWOANAQO%ARQ`OANAQOOQQANAXANAXOOQQANAYANAYO%A]QWO,5>oOOQO-E<R-E<RO%AhQ7^O1G5fO#5sQWO,5=[O5bQWO,5=[O!-dQpO,5=[OOQO-E<T-E<TOOQQ1G2u1G2uO$:tQ!LrO,5:kO!@YQ&jO,5=[O%ArQ&jO,5=[O%BTQ&jO,5:kOOQQ<<Kz<<KzOIQQWO<<KzO%.mQWO<<KzO%B_QWO<<KzO%BgQ`O<<KzO){QYO<<KzOIQQWO<<KzOOQQ<<K}<<K}O5lQ!LYO<<K}O#5sQWO<<K}O5bQWO<<K}O%BqQ&jO1G4^O%BvQWO7++ROOQQAN=ZAN=ZO5lQ!LYOAN=ZOOQQ<<Np<<NpOOQQ<<Nq<<NqOOQQ<<LV<<LVO%COQWO<<LVO%CTQYO<<LVO%C[QWO<<NpO%CaQWO<<NqOOQQ1G3a1G3aOOQQANBUANBUO:aQWOANBUO%CfQ7^O<<IiOOQO<<Hk<<HkOOQO7+%q7+%qO%0}Q!LdO7+%qO){QYO7+%qOOQO7+%k7+%kO:aQWO7+%kO!-dQpO7+%kO%CpQ!LYO7+%qO!@YQ&jO7+%kO%C{Q!LYO7+%qO%DZQ&jO7+%kO%DlQ!LYO7+%qOOQ!LSAN>}AN>}O%EQQ!LdO<<KdO%GYQ7^O<<JPO%GgQ7^O1G1wO%IVQ7^O1G2YO%KSQ7^O1G2[O%MPQ7^O<<JqO%M^Q7^O<<IdOOQO1G1b1G1bOOQO7+)n7+)nO%MkQWO7+)nO%MvQWO<<NgO%NOQ`O7+)pOOQO<<KX<<KXO5lQ!LYO<<KYO$,jQWO<<KYOOQO<<KW<<KWO5lQ!LYO<<KXO%NYQ`O<<KYO$,jQWO<<KXOOQQG26lG26lO#IfQWOG26lOOQO7+)y7+)yO5tQWO7+)yO%NaQWO<<NoOOQQG27XG27XO5lQ!LYOG27XOIQQWOG26lOLUQYO1G4ZO%NiQWO7++QO5lQ!LYO1G2vO#5sQWO1G2vO5bQWO1G2vO!-dQpO1G2vO!@YQ&jO1G2vO%2iQ!LrO1G0VO%NqQ&jO1G2vO%.mQWOANAfOOQQANAfANAfOIQQWOANAfO& SQWOANAfO& [Q`OANAfOOQQANAiANAiO5lQ!LYOANAiO#5sQWOANAiOOQO'#Gt'#GtOOQO7+)x7+)xOOQQG22uG22uOOQQANAqANAqO& fQWOANAqOOQQAND[AND[OOQQAND]AND]O& kQYOG27pOOQO<<I]<<I]O%0}Q!LdO<<I]OOQO<<IV<<IVO:aQWO<<IVO){QYO<<I]O!-dQpO<<IVO&%iQ!LYO<<I]O!@YQ&jO<<IVO&%tQ!LYO<<I]O&&SQ7^O7+'eOOQO<<MY<<MYOOQOAN@tAN@tO5lQ!LYOAN@tOOQOAN@sAN@sO$,jQWOAN@tO5lQ!LYOAN@sOOQQLD,WLD,WOOQO<<Me<<MeOOQQLD,sLD,sO#IfQWOLD,WO&'rQ7^O7+)uOOQO7+(b7+(bO5lQ!LYO7+(bO#5sQWO7+(bO5bQWO7+(bO!-dQpO7+(bO!@YQ&jO7+(bOOQQG27QG27QO%.mQWOG27QOIQQWOG27QOOQQG27TG27TO5lQ!LYOG27TOOQQG27]G27]O:aQWOLD-[OOQOAN>wAN>wOOQOAN>qAN>qO%0}Q!LdOAN>wO:aQWOAN>qO){QYOAN>wO!-dQpOAN>qO&'|Q!LYOAN>wO&(XQ7^O<<KdOOQOG26`G26`O5lQ!LYOG26`OOQOG26_G26_OOQQ!$( r!$( rOOQO<<K|<<K|O5lQ!LYO<<K|O#5sQWO<<K|O5bQWO<<K|O!-dQpO<<K|OOQQLD,lLD,lO%.mQWOLD,lOOQQLD,oLD,oOOQQ!$(!v!$(!vOOQOG24cG24cOOQOG24]G24]O%0}Q!LdOG24cO:aQWOG24]O){QYOG24cOOQOLD+zLD+zOOQOANAhANAhO5lQ!LYOANAhO#5sQWOANAhO5bQWOANAhOOQQ!$(!W!$(!WOOQOLD)}LD)}OOQOLD)wLD)wO%0}Q!LdOLD)}OOQOG27SG27SO5lQ!LYOG27SO#5sQWOG27SOOQO!$'Mi!$'MiOOQOLD,nLD,nO5lQ!LYOLD,nOOQO!$(!Y!$(!YOLUQYO'#DnO&)wQbO'#IsOLUQYO'#DfO&*OQ!LdO'#CgO&*iQbO'#CgO&*yQYO,5:rOLUQYO,5:}OLUQYO,5:}OLUQYO,5:}OLUQYO,5:}OLUQYO,5:}OLUQYO,5:}OLUQYO,5:}OLUQYO,5:}OLUQYO,5:}OLUQYO,5:}OLUQYO,5:}OLUQYO'#H{O&,yQWO,5<RO&.]QWO,5:}OLUQYO,5;bO!)RQWO'#C{O!)RQWO'#C{OIQQWO'#FhO&-RQWO'#FhOIQQWO'#FjO&-RQWO'#FjOIQQWO'#FxO&-RQWO'#FxOLUQYO,5?mO&*yQYO1G0^O&.dQ7^O'#CgOLUQYO1G1jOIQQWO,5<nO&-RQWO,5<nOIQQWO,5<pO&-RQWO,5<pOIQQWO,5<]O&-RQWO,5<]O&*yQYO1G1kOLUQYO7+&eOIQQWO1G1yO&-RQWO1G1yO&*yQYO7+'VO&*yQYO7+%xOIQQWO7+'xO&-RQWO7+'xO&.nQWO'#EWO&.sQWO'#EWO&.{QWO'#EvO&/QQWO'#EcO&/VQWO'#JRO&/bQWO'#JPO&/mQWO,5:rO&/rQ#tO,5<OO&/yQWO'#FqO&0OQWO'#FqO&0TQWO,5<PO&0]QWO,5:rO&0eQ7^O1G0yO&0lQWO,5<_O&0qQWO,5<_O&0vQWO1G1kO&0{QWO1G0^O&1QQ#tO1G2^O&1XQ#tO1G2^O4TQWO'#FfO5bQWO'#FeOBtQWO'#EVOLUQYO,5;_O!)bQWO'#FsO!)bQWO'#FsOJaQWO,5<rOJaQWO,5<r",
++  stateData: "&2W~O'VOS'WOSSOSTOS~OPTOQTOWyO]cO^hOanObmOgcOiTOjcOkcOnTOpTOuROwcOxcOycO!PSO!ZkO!`UO!cTO!dTO!eTO!fTO!gTO!jlO#`sO#ppO#t^O$}qO%PtO%RrO%SrO%VuO%XvO%[wO%]wO%_xO%lzO%r{O%t|O%v}O%x!OO%{!PO&R!QO&V!RO&X!SO&Z!TO&]!UO&_!VO'YPO'cQO'oYO'|aO~OPZXYZX^ZXiZXrZXsZXuZX}ZX!]ZX!^ZX!`ZX!fZX!wZX#ScX#WZX#XZX#YZX#ZZX#[ZX#]ZX#^ZX#_ZX#aZX#cZX#eZX#fZX#kZX'TZX'cZX'pZX'wZX'xZX~O!X$jX~P$zO'Q!XO'R!WO'S!ZO~OPTOQTO]cOa!jOb!iOgcOiTOjcOkcOnTOpTOuROwcOxcOycO!P!bO!ZkO!`UO!cTO!dTO!eTO!fTO!gTO!j!hO#p!kO#t^O'Y![O'cQO'oYO'|aO~O|!`O}!]Oz'jPz'tP~P'dO!O!lO~P`OPTOQTO]cOa!jOb!iOgcOiTOjcOkcOnTOpTOuROwcOxcOycO!P!bO!ZkO!`UO!cTO!dTO!eTO!fTO!gTO!j!hO#p!kO#t^O'Y9XO'cQO'oYO'|aO~OPTOQTO]cOa!jOb!iOgcOiTOjcOkcOnTOpTOuROwcOxcOycO!P!bO!ZkO!`UO!cTO!dTO!eTO!fTO!gTO!j!hO#p!kO#t^O'cQO'oYO'|aO~O|!qO#Q!tO#R!qO'Y9YO!_'qP~P+{O#S!uO~O!X!vO#S!uO~OP#]OY#cOi#QOr!zOs!zOu!{O}#aO!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO#c#VO#e#XO#f#YO'cQO'p#ZO'w!|O'x!}O~O^'gX'T'gX!_'gXz'gX!P'gX%O'gX!X'gX~P.jO!w#dO#k#dOP'hXY'hX^'hXi'hXr'hXs'hXu'hX}'hX!]'hX!^'hX!`'hX!f'hX#W'hX#X'hX#Y'hX#Z'hX#['hX#]'hX#^'hX#a'hX#c'hX#e'hX#f'hX'c'hX'p'hX'w'hX'x'hX~O#_'hX'T'hXz'hX!_'hX'e'hX!P'hX%O'hX!X'hX~P0zO!w#dO~O#v#fO#x#eO$P#kO~O!P#lO#t^O$S#mO$U#oO~O]#rOg$POi#sOj#rOk#rOn$QOp$ROu#yO!P#zO!Z$WO!`#wO#R$XO#p$UO$]$SO$_$TO$b$VO'Y#qO'c#tO'^'`P~O!`$YO~O!X$[O~O^$]O'T$]O~O'Y$aO~O!`$YO'Y$aO'Z$cO'_$dO~Ob$jO!`$YO'Y$aO~O#_#SO~O]$sOr$oO!P$lO!`$nO%P$rO'Y$aO'Z$cO[(UP~O!j$tO~Ou$uO!P$vO'Y$aO~Ou$uO!P$vO%X$zO'Y$aO~O'Y${O~O#`sO%PtO%RrO%SrO%VuO%XvO%[wO%]wO~Oa%UOb%TO!j%RO$}%SO%a%QO~P7xOa%XObmO!P%WO!jlO#`sO$}qO%RrO%SrO%VuO%XvO%[wO%]wO%_xO~O_%[O!w%_O%P%YO'Z$cO~P8wO!`%`O!c%dO~O!`%eO~O!PSO~O^$]O'P%mO'T$]O~O^$]O'P%pO'T$]O~O^$]O'P%rO'T$]O~O'Q!XO'R!WO'S%vO~OPZXYZXiZXrZXsZXuZX}ZX}cX!]ZX!^ZX!`ZX!fZX!wZX!wcX#ScX#WZX#XZX#YZX#ZZX#[ZX#]ZX#^ZX#_ZX#aZX#cZX#eZX#fZX#kZX'cZX'pZX'wZX'xZX~OzZXzcX~P;dO|%xOz&eX}&eX~P){O}!]Oz'jX~OP#]OY#cOi#QOr!zOs!zOu!{O}!]O!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO#c#VO#e#XO#f#YO'cQO'p#ZO'w!|O'x!}O~Oz'jX~P>ZOz%}O~Ou&QO!S&[O!T&TO!U&TO'Z$cO~O]&ROj&RO|&UO'f&OO!O'kP!O'vP~P@^Oz'sX}'sX!X'sX!_'sX'p'sX~O!w'sX#S!{X!O'sX~PAVO!w&]Oz'uX}'uX~O}&^Oz'tX~Oz&`O~O!w#dO~PAVOR&dO!P&aO!k&cO'Y$aO~Ob&iO!`$YO'Y$aO~Or$oO!`$nO~O!O&jO~P`Or!zOs!zOu!{O!^!xO!`!yO'cQOP!baY!bai!ba}!ba!]!ba!f!ba#W!ba#X!ba#Y!ba#Z!ba#[!ba#]!ba#^!ba#_!ba#a!ba#c!ba#e!ba#f!ba'p!ba'w!ba'x!ba~O^!ba'T!baz!ba!_!ba'e!ba!P!ba%O!ba!X!ba~PC`O!_&kO~O!X!vO!w&mO'p&lO}'rX^'rX'T'rX~O!_'rX~PExO}&qO!_'qX~O!_&sO~Ou$uO!P$vO#R&tO'Y$aO~OPTOQTO]cOa!jOb!iOgcOiTOjcOkcOnTOpTOuROwcOxcOycO!PSO!ZkO!`UO!cTO!dTO!eTO!fTO!gTO!j!hO#p!kO#t^O'Y9XO'cQO'oYO'|aO~O]#rOg$POi#sOj#rOk#rOn$QOp9kOu#yO!P#zO!Z:nO!`#wO#R9qO#p$UO$]9mO$_9oO$b$VO'Y&xO'c#tO~O#S&zO~O]#rOg$POi#sOj#rOk#rOn$QOp$ROu#yO!P#zO!Z$WO!`#wO#R$XO#p$UO$]$SO$_$TO$b$VO'Y&xO'c#tO~O'^'mP~PJaO|'OO!_'nP~P){O'f'QO'oYO~OP9UOQ9UO]cOa:lOb!iOgcOi9UOjcOkcOn9UOp9UOuROwcOxcOycO!P!bO!Z9WO!`UO!c9UO!d9UO!e9UO!f9UO!g9UO!j!hO#p!kO#t^O'Y'`O'cQO'oYO'|:jO~O!`!yO~O}#aO^$Za'T$Za!_$Zaz$Za!P$Za%O$Za!X$Za~O#`'gO~PIQOr'jO!X'iO!P#wX#s#wX#v#wX#x#wX$P#wX~O!X'iO!P'yX#s'yX#v'yX#x'yX$P'yX~Or'jO~P! eOr'jO!P'yX#s'yX#v'yX#x'yX$P'yX~O!P'lO#s'pO#v'kO#x'kO$P'qO~O|'tO~PLUO#v#fO#x#eO$P'wO~Or$cXu$cX!^$cX'p$cX'w$cX'x$cX~OReX}eX!weX'^eX'^$cX~P!#ZOj'yO~O'Q'{O'R'zO'S'}O~Or(POu(QO'p#ZO'w(SO'x(UO~O'^(OO~P!$dO'^(XO~O]#rOg$POi#sOj#rOk#rOn$QOp9kOu#yO!P#zO!Z:nO!`#wO#R9qO#p$UO$]9mO$_9oO$b$VO'c#tO~O|(]O'Y(YO!_'}P~P!%RO#S(_O~O|(cO'Y(`Oz(OP~P!%RO^(lOi(qOu(iO!S(oO!T(hO!U(hO!`(fO!t(pO$u(kO'Z$cO'f(eO~O!O(nO~P!&yO!^!xOr'bXu'bX'p'bX'w'bX'x'bX}'bX!w'bX~O'^'bX#i'bX~P!'uOR(tO!w(sO}'aX'^'aX~O}(uO'^'`X~O'Y(wO~O!`(|O~O'Y&xO~O!`(fO~Ou$uO|!qO!P$vO#Q!tO#R!qO'Y$aO!_'qP~O!X!vO#S)QO~OP#]OY#cOi#QOr!zOs!zOu!{O!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO#c#VO#e#XO#f#YO'cQO'p#ZO'w!|O'x!}O~O^!Ya}!Ya'T!Yaz!Ya!_!Ya'e!Ya!P!Ya%O!Ya!X!Ya~P!*WOR)YO!P&aO!k)XO%O)WO'_$dO~O'Y${O'^'`P~O!X)]O!P']X^']X'T']X~O!`$YO'_$dO~O!`$YO'Y$aO'_$dO~O!X!vO#S&zO~O%P)iO'Y)eO!O(VP~O})jO[(UX~O'f'QO~OY)nO~O[)oO~O!P$lO'Y$aO'Z$cO[(UP~Ou$uO|)tO!P$vO'Y$aOz'tP~O]&XOj&XO|)uO'f'QO!O'vP~O})vO^(RX'T(RX~O!w)zO'_$dO~OR)}O!P#zO'_$dO~O!P*PO~Or*RO!PSO~O!j*WO~Ob*]O~O'Y(wO!O(TP~Ob$jO~O%PtO'Y${O~P8wOY*cO[*bO~OPTOQTO]cOanObmOgcOiTOjcOkcOnTOpTOuROwcOxcOycO!ZkO!`UO!cTO!dTO!eTO!fTO!gTO!jlO#t^O$}qO'cQO'oYO'|aO~O!P!bO#p!kO'Y9XO~P!1mO[*bO^$]O'T$]O~O^*gO#`*iO%R*iO%S*iO~P){O!`%`O~O%r*nO~O!P*pO~O&S*sO&T*rOP&QaQ&QaW&Qa]&Qa^&Qaa&Qab&Qag&Qai&Qaj&Qak&Qan&Qap&Qau&Qaw&Qax&Qay&Qa!P&Qa!Z&Qa!`&Qa!c&Qa!d&Qa!e&Qa!f&Qa!g&Qa!j&Qa#`&Qa#p&Qa#t&Qa$}&Qa%P&Qa%R&Qa%S&Qa%V&Qa%X&Qa%[&Qa%]&Qa%_&Qa%l&Qa%r&Qa%t&Qa%v&Qa%x&Qa%{&Qa&R&Qa&V&Qa&X&Qa&Z&Qa&]&Qa&_&Qa'O&Qa'Y&Qa'c&Qa'o&Qa'|&Qa!O&Qa%y&Qa_&Qa&O&Qa~O'Y*vO~O'e*yO~Oz&ea}&ea~P!*WO}!]Oz'ja~Oz'ja~P>ZO}&^Oz'ta~O}tX}!VX!OtX!O!VX!XtX!X!VX!`!VX!wtX'_!VX~O!X+QO!w+PO}#PX}'lX!O#PX!O'lX!X'lX!`'lX'_'lX~O!X+SO!`$YO'_$dO}!RX!O!RX~O]&POj&POu&QO'f(eO~OP9UOQ9UO]cOa:lOb!iOgcOi9UOjcOkcOn9UOp9UOuROwcOxcOycO!P!bO!Z9WO!`UO!c9UO!d9UO!e9UO!f9UO!g9UO!j!hO#p!kO#t^O'cQO'oYO'|:jO~O'Y9uO~P!;kO}+WO!O'kX~O!O+YO~O!X+QO!w+PO}#PX!O#PX~O}+ZO!O'vX~O!O+]O~O]&POj&POu&QO'Z$cO'f(eO~O!T+^O!U+^O~P!>iOu$uO|+aO!P$vO'Y$aOz&jX}&jX~O^+fO!S+iO!T+eO!U+eO!n+mO!o+kO!p+lO!q+jO!t+nO'Z$cO'f(eO'o+cO~O!O+hO~P!?jOR+sO!P&aO!k+rO~O!w+yO}'ra!_'ra^'ra'T'ra~O!X!vO~P!@tO}&qO!_'qa~Ou$uO|+|O!P$vO#Q,OO#R+|O'Y$aO}&lX!_&lX~O^!zi}!zi'T!ziz!zi!_!zi'e!zi!P!zi%O!zi!X!zi~P!*WO#S!va}!va!_!va!w!va!P!va^!va'T!vaz!va~P!$dO#S'bXP'bXY'bX^'bXi'bXs'bX!]'bX!`'bX!f'bX#W'bX#X'bX#Y'bX#Z'bX#['bX#]'bX#^'bX#_'bX#a'bX#c'bX#e'bX#f'bX'T'bX'c'bX!_'bXz'bX!P'bX'e'bX%O'bX!X'bX~P!'uO},XO'^'mX~P!$dO'^,ZO~O},[O!_'nX~P!*WO!_,_O~Oz,`O~OP#]Or!zOs!zOu!{O!^!xO!`!yO!f#]O'cQOY#Vi^#Vii#Vi}#Vi!]#Vi#X#Vi#Y#Vi#Z#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi'T#Vi'p#Vi'w#Vi'x#Viz#Vi!_#Vi'e#Vi!P#Vi%O#Vi!X#Vi~O#W#Vi~P!FRO#W#OO~P!FROP#]Or!zOs!zOu!{O!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO'cQOY#Vi^#Vi}#Vi!]#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi'T#Vi'p#Vi'w#Vi'x#Viz#Vi!_#Vi'e#Vi!P#Vi%O#Vi!X#Vi~Oi#Vi~P!HmOi#QO~P!HmOP#]Oi#QOr!zOs!zOu!{O!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO'cQO^#Vi}#Vi#a#Vi#c#Vi#e#Vi#f#Vi'T#Vi'p#Vi'w#Vi'x#Viz#Vi!_#Vi'e#Vi!P#Vi%O#Vi!X#Vi~OY#Vi!]#Vi#]#Vi#^#Vi#_#Vi~P!KXOY#cO!]#SO#]#SO#^#SO#_#SO~P!KXOP#]OY#cOi#QOr!zOs!zOu!{O!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO'cQO^#Vi}#Vi#c#Vi#e#Vi#f#Vi'T#Vi'p#Vi'x#Viz#Vi!_#Vi'e#Vi!P#Vi%O#Vi!X#Vi~O'w#Vi~P!NPO'w!|O~P!NPOP#]OY#cOi#QOr!zOs!zOu!{O!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO#c#VO'cQO'w!|O^#Vi}#Vi#e#Vi#f#Vi'T#Vi'p#Viz#Vi!_#Vi'e#Vi!P#Vi%O#Vi!X#Vi~O'x#Vi~P#!kO'x!}O~P#!kOP#]OY#cOi#QOr!zOs!zOu!{O!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO#c#VO#e#XO'cQO'w!|O'x!}O~O^#Vi}#Vi#f#Vi'T#Vi'p#Viz#Vi!_#Vi'e#Vi!P#Vi%O#Vi!X#Vi~P#%VOPZXYZXiZXrZXsZXuZX!]ZX!^ZX!`ZX!fZX!wZX#ScX#WZX#XZX#YZX#ZZX#[ZX#]ZX#^ZX#_ZX#aZX#cZX#eZX#fZX#kZX'cZX'pZX'wZX'xZX}ZX!OZX~O#iZX~P#'jOP#]OY9iOi9^Or!zOs!zOu!{O!]9`O!^!xO!`!yO!f#]O#W9[O#X9]O#Y9]O#Z9]O#[9_O#]9`O#^9`O#_9`O#a9aO#c9cO#e9eO#f9fO'cQO'p#ZO'w!|O'x!}O~O#i,bO~P#)tOP'hXY'hXi'hXr'hXs'hXu'hX!]'hX!^'hX!`'hX!f'hX#W'hX#X'hX#Y'hX#Z'hX#['hX#]'hX#^'hX#a'hX#c'hX#e'hX#f'hX'c'hX'p'hX'w'hX'x'hX}'hX~O!w9jO#k9jO#_'hX#i'hX!O'hX~P#+oO^&oa}&oa'T&oa!_&oa'e&oaz&oa!P&oa%O&oa!X&oa~P!*WOP#ViY#Vi^#Vii#Vis#Vi}#Vi!]#Vi!^#Vi!`#Vi!f#Vi#W#Vi#X#Vi#Y#Vi#Z#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi'T#Vi'c#Viz#Vi!_#Vi'e#Vi!P#Vi%O#Vi!X#Vi~P!$dO^#ji}#ji'T#jiz#ji!_#ji'e#ji!P#ji%O#ji!X#ji~P!*WO#v,dO#x,dO~O#v,eO#x,eO~O!X'iO!w,fO!P#|X#s#|X#v#|X#x#|X$P#|X~O|,gO~O!P'lO#s,iO#v'kO#x'kO$P,jO~O}9gO!O'gX~P#)tO!O,kO~O$P,mO~O'Q'{O'R'zO'S,pO~O],sOj,sOz,tO~O}cX!XcX!_cX!_$cX'pcX~P!#ZO!_,zO~P!$dO},{O!X!vO'p&lO!_'}X~O!_-QO~Oz$cX}$cX!X$jX~P!#ZO}-SOz(OX~P!$dO!X-UO~Oz-WO~O|(]O'Y$aO!_'}P~Oi-[O!X!vO!`$YO'_$dO'p&lO~O!X)]O~O!O-bO~P!&yO!T-cO!U-cO'Z$cO'f(eO~Ou-eO'f(eO~O!t-fO~O'Y${O}&tX'^&tX~O}(uO'^'`a~Or-kOs-kOu-lO'poa'woa'xoa}oa!woa~O'^oa#ioa~P#7POr(POu(QO'p$[a'w$[a'x$[a}$[a!w$[a~O'^$[a#i$[a~P#7uOr(POu(QO'p$^a'w$^a'x$^a}$^a!w$^a~O'^$^a#i$^a~P#8hO]-mO~O#S-nO~O'^$la}$la#i$la!w$la~P!$dO#S-qO~OR-zO!P&aO!k-yO%O-xO~O'^-{O~O]#rOi#sOj#rOk#rOn$QOp9kOu#yO!P#zO!Z:nO!`#wO#R9qO#p$UO$]9mO$_9oO$b$VO'c#tO~Og-}O'Y-|O~P#:_O!X)]O!P']a^']a'T']a~O#S.TO~OYZX}cX!OcX~O}.UO!O(VX~O!O.WO~OY.XO~O'Y)eO~O!P$lO'Y$aO[&|X}&|X~O})jO[(Ua~O!_.^O~P!*WO].`O~OY.aO~O[.bO~OR-zO!P&aO!k-yO%O-xO'_$dO~O})vO^(Ra'T(Ra~O!w.hO~OR.kO!P#zO~O'f'QO!O(SP~OR.uO!P.qO!k.tO%O.sO'_$dO~OY/PO}.}O!O(TX~O!O/QO~O[/SO^$]O'T$]O~O]/TO~O#_/VO%p/WO~P0zO!w#dO#_/VO%p/WO~O^/XO~P){O^/ZO~O%y/_OP%wiQ%wiW%wi]%wi^%wia%wib%wig%wii%wij%wik%win%wip%wiu%wiw%wix%wiy%wi!P%wi!Z%wi!`%wi!c%wi!d%wi!e%wi!f%wi!g%wi!j%wi#`%wi#p%wi#t%wi$}%wi%P%wi%R%wi%S%wi%V%wi%X%wi%[%wi%]%wi%_%wi%l%wi%r%wi%t%wi%v%wi%x%wi%{%wi&R%wi&V%wi&X%wi&Z%wi&]%wi&_%wi'O%wi'Y%wi'c%wi'o%wi'|%wi!O%wi_%wi&O%wi~O_/eO!O/cO&O/dO~P`O!PSO!`/hO~O}#aO'e$Za~Oz&ei}&ei~P!*WO}!]Oz'ji~O}&^Oz'ti~Oz/lO~O}!Ra!O!Ra~P#)tO]&POj&PO|/rO'f(eO}&fX!O&fX~P@^O}+WO!O'ka~O]&XOj&XO|)uO'f'QO}&kX!O&kX~O}+ZO!O'va~Oz'ui}'ui~P!*WO^$]O!X!vO!`$YO!f/}O!w/{O'T$]O'_$dO'p&lO~O!O0QO~P!?jO!T0RO!U0RO'Z$cO'f(eO'o+cO~O!S0SO~P#HXO!PSO!S0SO!q0UO!t0VO~P#HXO!S0SO!o0XO!p0XO!q0UO!t0VO~P#HXO!P&aO~O!P&aO~P!$dO}'ri!_'ri^'ri'T'ri~P!*WO!w0bO}'ri!_'ri^'ri'T'ri~O}&qO!_'qi~Ou$uO!P$vO#R0dO'Y$aO~O#SoaPoaYoa^oaioa!]oa!^oa!`oa!foa#Woa#Xoa#Yoa#Zoa#[oa#]oa#^oa#_oa#aoa#coa#eoa#foa'Toa'coa!_oazoa!Poa'eoa%Ooa!Xoa~P#7PO#S$[aP$[aY$[a^$[ai$[as$[a!]$[a!^$[a!`$[a!f$[a#W$[a#X$[a#Y$[a#Z$[a#[$[a#]$[a#^$[a#_$[a#a$[a#c$[a#e$[a#f$[a'T$[a'c$[a!_$[az$[a!P$[a'e$[a%O$[a!X$[a~P#7uO#S$^aP$^aY$^a^$^ai$^as$^a!]$^a!^$^a!`$^a!f$^a#W$^a#X$^a#Y$^a#Z$^a#[$^a#]$^a#^$^a#_$^a#a$^a#c$^a#e$^a#f$^a'T$^a'c$^a!_$^az$^a!P$^a'e$^a%O$^a!X$^a~P#8hO#S$laP$laY$la^$lai$las$la}$la!]$la!^$la!`$la!f$la#W$la#X$la#Y$la#Z$la#[$la#]$la#^$la#_$la#a$la#c$la#e$la#f$la'T$la'c$la!_$laz$la!P$la!w$la'e$la%O$la!X$la~P!$dO^!zq}!zq'T!zqz!zq!_!zq'e!zq!P!zq%O!zq!X!zq~P!*WO}&gX'^&gX~PJaO},XO'^'ma~O|0lO}&hX!_&hX~P){O},[O!_'na~O},[O!_'na~P!*WO#i!ba!O!ba~PC`O#i!Ya}!Ya!O!Ya~P#)tO!P1PO#t^O#}1QO~O!O1UO~O'e1VO~P!$dO^$Wq}$Wq'T$Wqz$Wq!_$Wq'e$Wq!P$Wq%O$Wq!X$Wq~P!*WOz1WO~O],sOj,sO~Or(POu(QO'x(UO'p$vi'w$vi}$vi!w$vi~O'^$vi#i$vi~P$(xOr(POu(QO'p$xi'w$xi'x$xi}$xi!w$xi~O'^$xi#i$xi~P$)kO#i1XO~P!$dO|1ZO'Y$aO}&pX!_&pX~O},{O!_'}a~O},{O!X!vO!_'}a~O},{O!X!vO'p&lO!_'}a~O'^$ei}$ei#i$ei!w$ei~P!$dO|1bO'Y(`Oz&rX}&rX~P!%RO}-SOz(Oa~O}-SOz(Oa~P!$dO!X!vO~O!X!vO#_1lO~Oi1pO!X!vO'p&lO~O}'ai'^'ai~P!$dO!w1sO}'ai'^'ai~P!$dO!_1vO~O^$Xq}$Xq'T$Xqz$Xq!_$Xq'e$Xq!P$Xq%O$Xq!X$Xq~P!*WO}1zO!P(PX~P!$dO!P&aO%O1}O~O!P&aO%O1}O~P!$dO!P$cX$sZX^$cX'T$cX~P!#ZO$s2ROrfXufX!PfX'pfX'wfX'xfX^fX'TfX~O$s2RO~O%P2YO'Y)eO}&{X!O&{X~O}.UO!O(Va~OY2^O~O[2_O~O]2bO~OR2dO!P&aO!k2cO%O1}O~O^$]O'T$]O~P!$dO!P#zO~P!$dO}2iO!w2kO!O(SX~O!O2lO~Ou(iO!S2uO!T2nO!U2nO!n2tO!o2sO!p2sO!t2rO'Z$cO'f(eO'o+cO~O!O2qO~P$1yOR2|O!P.qO!k2{O%O2zO~OR2|O!P.qO!k2{O%O2zO'_$dO~O'Y(wO}&zX!O&zX~O}.}O!O(Ta~O'f3VO~O]3XO~O[3ZO~O!_3^O~P){O^3`O~O^3`O~P){O#_3bO%p3cO~PExO_/eO!O3gO&O/dO~P`O!X3iO~O&T3jOP&QqQ&QqW&Qq]&Qq^&Qqa&Qqb&Qqg&Qqi&Qqj&Qqk&Qqn&Qqp&Qqu&Qqw&Qqx&Qqy&Qq!P&Qq!Z&Qq!`&Qq!c&Qq!d&Qq!e&Qq!f&Qq!g&Qq!j&Qq#`&Qq#p&Qq#t&Qq$}&Qq%P&Qq%R&Qq%S&Qq%V&Qq%X&Qq%[&Qq%]&Qq%_&Qq%l&Qq%r&Qq%t&Qq%v&Qq%x&Qq%{&Qq&R&Qq&V&Qq&X&Qq&Z&Qq&]&Qq&_&Qq'O&Qq'Y&Qq'c&Qq'o&Qq'|&Qq!O&Qq%y&Qq_&Qq&O&Qq~O}#Pi!O#Pi~P#)tO!w3lO}#Pi!O#Pi~O}!Ri!O!Ri~P#)tO^$]O!w3sO'T$]O~O^$]O!X!vO!w3sO'T$]O~O!T3wO!U3wO'Z$cO'f(eO'o+cO~O^$]O!X!vO!`$YO!f3xO!w3sO'T$]O'_$dO'p&lO~O!S3yO~P$:cO!S3yO!q3|O!t3}O~P$:cO^$]O!X!vO!f3xO!w3sO'T$]O'p&lO~O}'rq!_'rq^'rq'T'rq~P!*WO}&qO!_'qq~O#S$viP$viY$vi^$vii$vis$vi!]$vi!^$vi!`$vi!f$vi#W$vi#X$vi#Y$vi#Z$vi#[$vi#]$vi#^$vi#_$vi#a$vi#c$vi#e$vi#f$vi'T$vi'c$vi!_$viz$vi!P$vi'e$vi%O$vi!X$vi~P$(xO#S$xiP$xiY$xi^$xii$xis$xi!]$xi!^$xi!`$xi!f$xi#W$xi#X$xi#Y$xi#Z$xi#[$xi#]$xi#^$xi#_$xi#a$xi#c$xi#e$xi#f$xi'T$xi'c$xi!_$xiz$xi!P$xi'e$xi%O$xi!X$xi~P$)kO#S$eiP$eiY$ei^$eii$eis$ei}$ei!]$ei!^$ei!`$ei!f$ei#W$ei#X$ei#Y$ei#Z$ei#[$ei#]$ei#^$ei#_$ei#a$ei#c$ei#e$ei#f$ei'T$ei'c$ei!_$eiz$ei!P$ei!w$ei'e$ei%O$ei!X$ei~P!$dO}&ga'^&ga~P!$dO}&ha!_&ha~P!*WO},[O!_'ni~O#i!zi}!zi!O!zi~P#)tOP#]Or!zOs!zOu!{O!^!xO!`!yO!f#]O'cQOY#Vii#Vi!]#Vi#X#Vi#Y#Vi#Z#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi#i#Vi'p#Vi'w#Vi'x#Vi}#Vi!O#Vi~O#W#Vi~P$CyO#W9[O~P$CyOP#]Or!zOs!zOu!{O!^!xO!`!yO!f#]O#W9[O#X9]O#Y9]O#Z9]O'cQOY#Vi!]#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi#i#Vi'p#Vi'w#Vi'x#Vi}#Vi!O#Vi~Oi#Vi~P$FROi9^O~P$FROP#]Oi9^Or!zOs!zOu!{O!^!xO!`!yO!f#]O#W9[O#X9]O#Y9]O#Z9]O#[9_O'cQO#a#Vi#c#Vi#e#Vi#f#Vi#i#Vi'p#Vi'w#Vi'x#Vi}#Vi!O#Vi~OY#Vi!]#Vi#]#Vi#^#Vi#_#Vi~P$HZOY9iO!]9`O#]9`O#^9`O#_9`O~P$HZOP#]OY9iOi9^Or!zOs!zOu!{O!]9`O!^!xO!`!yO!f#]O#W9[O#X9]O#Y9]O#Z9]O#[9_O#]9`O#^9`O#_9`O#a9aO'cQO#c#Vi#e#Vi#f#Vi#i#Vi'p#Vi'x#Vi}#Vi!O#Vi~O'w#Vi~P$JoO'w!|O~P$JoOP#]OY9iOi9^Or!zOs!zOu!{O!]9`O!^!xO!`!yO!f#]O#W9[O#X9]O#Y9]O#Z9]O#[9_O#]9`O#^9`O#_9`O#a9aO#c9cO'cQO'w!|O#e#Vi#f#Vi#i#Vi'p#Vi}#Vi!O#Vi~O'x#Vi~P$LwO'x!}O~P$LwOP#]OY9iOi9^Or!zOs!zOu!{O!]9`O!^!xO!`!yO!f#]O#W9[O#X9]O#Y9]O#Z9]O#[9_O#]9`O#^9`O#_9`O#a9aO#c9cO#e9eO'cQO'w!|O'x!}O~O#f#Vi#i#Vi'p#Vi}#Vi!O#Vi~P% PO^#gy}#gy'T#gyz#gy!_#gy'e#gy!P#gy%O#gy!X#gy~P!*WOP#ViY#Vii#Vis#Vi!]#Vi!^#Vi!`#Vi!f#Vi#W#Vi#X#Vi#Y#Vi#Z#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi#i#Vi'c#Vi}#Vi!O#Vi~P!$dO!^!xOP'bXY'bXi'bXr'bXs'bXu'bX!]'bX!`'bX!f'bX#W'bX#X'bX#Y'bX#Z'bX#['bX#]'bX#^'bX#_'bX#a'bX#c'bX#e'bX#f'bX#i'bX'c'bX'p'bX'w'bX'x'bX}'bX!O'bX~O#i#ji}#ji!O#ji~P#)tO!O4_O~O}&oa!O&oa~P#)tO!X!vO'p&lO}&pa!_&pa~O},{O!_'}i~O},{O!X!vO!_'}i~Oz&ra}&ra~P!$dO!X4fO~O}-SOz(Oi~P!$dO}-SOz(Oi~Oz4lO~O!X!vO#_4rO~Oi4sO!X!vO'p&lO~Oz4uO~O'^$gq}$gq#i$gq!w$gq~P!$dO^$Xy}$Xy'T$Xyz$Xy!_$Xy'e$Xy!P$Xy%O$Xy!X$Xy~P!*WO}1zO!P(Pa~O!P&aO%O4zO~O!P&aO%O4zO~P!$dO^!zy}!zy'T!zyz!zy!_!zy'e!zy!P!zy%O!zy!X!zy~P!*WOY4}O~O}.UO!O(Vi~O]5SO~O[5TO~O'f'QO}&wX!O&wX~O}2iO!O(Sa~O!O5bO~P$1yOu-eO'f(eO'o+cO~O!S5eO!T5dO!U5dO!t0VO'Z$cO'f(eO'o+cO~O!o5fO!p5fO~P%-iO!T5dO!U5dO'Z$cO'f(eO'o+cO~O!P.qO~O!P.qO%O5hO~O!P.qO%O5hO~P!$dOR5mO!P.qO!k5lO%O5hO~OY5rO}&za!O&za~O}.}O!O(Ti~O]5uO~O!_5vO~O!_5wO~O!_5xO~O!_5xO~P){O^5zO~O!X5}O~O!_6PO~O}'ui!O'ui~P#)tO^$]O'T$]O~P!*WO^$]O!w6UO'T$]O~O^$]O!X!vO!w6UO'T$]O~O!T6ZO!U6ZO'Z$cO'f(eO'o+cO~O^$]O!X!vO!f6[O!w6UO'T$]O'p&lO~O!`$YO'_$dO~P%2TO!S6]O~P%1rO}'ry!_'ry^'ry'T'ry~P!*WO#S$gqP$gqY$gq^$gqi$gqs$gq}$gq!]$gq!^$gq!`$gq!f$gq#W$gq#X$gq#Y$gq#Z$gq#[$gq#]$gq#^$gq#_$gq#a$gq#c$gq#e$gq#f$gq'T$gq'c$gq!_$gqz$gq!P$gq!w$gq'e$gq%O$gq!X$gq~P!$dO}&hi!_&hi~P!*WO#i!zq}!zq!O!zq~P#)tOr-kOs-kOu-lOPoaYoaioa!]oa!^oa!`oa!foa#Woa#Xoa#Yoa#Zoa#[oa#]oa#^oa#_oa#aoa#coa#eoa#foa#ioa'coa'poa'woa'xoa}oa!Ooa~Or(POu(QOP$[aY$[ai$[as$[a!]$[a!^$[a!`$[a!f$[a#W$[a#X$[a#Y$[a#Z$[a#[$[a#]$[a#^$[a#_$[a#a$[a#c$[a#e$[a#f$[a#i$[a'c$[a'p$[a'w$[a'x$[a}$[a!O$[a~Or(POu(QOP$^aY$^ai$^as$^a!]$^a!^$^a!`$^a!f$^a#W$^a#X$^a#Y$^a#Z$^a#[$^a#]$^a#^$^a#_$^a#a$^a#c$^a#e$^a#f$^a#i$^a'c$^a'p$^a'w$^a'x$^a}$^a!O$^a~OP$laY$lai$las$la!]$la!^$la!`$la!f$la#W$la#X$la#Y$la#Z$la#[$la#]$la#^$la#_$la#a$la#c$la#e$la#f$la#i$la'c$la}$la!O$la~P!$dO#i$Wq}$Wq!O$Wq~P#)tO#i$Xq}$Xq!O$Xq~P#)tO!O6gO~O'^$zy}$zy#i$zy!w$zy~P!$dO!X!vO}&pi!_&pi~O!X!vO'p&lO}&pi!_&pi~O},{O!_'}q~Oz&ri}&ri~P!$dO}-SOz(Oq~Oz6nO~P!$dOz6nO~O}'ay'^'ay~P!$dO}&ua!P&ua~P!$dO!P$rq^$rq'T$rq~P!$dOY6vO~O}.UO!O(Vq~O]6yO~O!P&aO%O6zO~O!P&aO%O6zO~P!$dO!w6{O}&wa!O&wa~O}2iO!O(Si~P#)tO!T7RO!U7RO'Z$cO'f(eO'o+cO~O!S7TO!t3}O~P%ArO!P.qO%O7WO~O!P.qO%O7WO~P!$dO'f7^O~O}.}O!O(Tq~O!_7aO~O!_7aO~P){O!_7cO~O!_7dO~O}#Py!O#Py~P#)tO^$]O!w7jO'T$]O~O^$]O!X!vO!w7jO'T$]O~O!T7mO!U7mO'Z$cO'f(eO'o+cO~O^$]O!X!vO!f7nO!w7jO'T$]O'p&lO~O#S$zyP$zyY$zy^$zyi$zys$zy}$zy!]$zy!^$zy!`$zy!f$zy#W$zy#X$zy#Y$zy#Z$zy#[$zy#]$zy#^$zy#_$zy#a$zy#c$zy#e$zy#f$zy'T$zy'c$zy!_$zyz$zy!P$zy!w$zy'e$zy%O$zy!X$zy~P!$dO#i#gy}#gy!O#gy~P#)tOP$eiY$eii$eis$ei!]$ei!^$ei!`$ei!f$ei#W$ei#X$ei#Y$ei#Z$ei#[$ei#]$ei#^$ei#_$ei#a$ei#c$ei#e$ei#f$ei#i$ei'c$ei}$ei!O$ei~P!$dOr(POu(QO'x(UOP$viY$vii$vis$vi!]$vi!^$vi!`$vi!f$vi#W$vi#X$vi#Y$vi#Z$vi#[$vi#]$vi#^$vi#_$vi#a$vi#c$vi#e$vi#f$vi#i$vi'c$vi'p$vi'w$vi}$vi!O$vi~Or(POu(QOP$xiY$xii$xis$xi!]$xi!^$xi!`$xi!f$xi#W$xi#X$xi#Y$xi#Z$xi#[$xi#]$xi#^$xi#_$xi#a$xi#c$xi#e$xi#f$xi#i$xi'c$xi'p$xi'w$xi'x$xi}$xi!O$xi~O#i$Xy}$Xy!O$Xy~P#)tO#i!zy}!zy!O!zy~P#)tO!X!vO}&pq!_&pq~O},{O!_'}y~Oz&rq}&rq~P!$dOz7tO~P!$dO}.UO!O(Vy~O}2iO!O(Sq~O!T8QO!U8QO'Z$cO'f(eO'o+cO~O!P.qO%O8TO~O!P.qO%O8TO~P!$dO!_8WO~O&T8XOP&Q!ZQ&Q!ZW&Q!Z]&Q!Z^&Q!Za&Q!Zb&Q!Zg&Q!Zi&Q!Zj&Q!Zk&Q!Zn&Q!Zp&Q!Zu&Q!Zw&Q!Zx&Q!Zy&Q!Z!P&Q!Z!Z&Q!Z!`&Q!Z!c&Q!Z!d&Q!Z!e&Q!Z!f&Q!Z!g&Q!Z!j&Q!Z#`&Q!Z#p&Q!Z#t&Q!Z$}&Q!Z%P&Q!Z%R&Q!Z%S&Q!Z%V&Q!Z%X&Q!Z%[&Q!Z%]&Q!Z%_&Q!Z%l&Q!Z%r&Q!Z%t&Q!Z%v&Q!Z%x&Q!Z%{&Q!Z&R&Q!Z&V&Q!Z&X&Q!Z&Z&Q!Z&]&Q!Z&_&Q!Z'O&Q!Z'Y&Q!Z'c&Q!Z'o&Q!Z'|&Q!Z!O&Q!Z%y&Q!Z_&Q!Z&O&Q!Z~O^$]O!w8^O'T$]O~O^$]O!X!vO!w8^O'T$]O~OP$gqY$gqi$gqs$gq!]$gq!^$gq!`$gq!f$gq#W$gq#X$gq#Y$gq#Z$gq#[$gq#]$gq#^$gq#_$gq#a$gq#c$gq#e$gq#f$gq#i$gq'c$gq}$gq!O$gq~P!$dO}&wq!O&wq~P#)tO^$]O!w8sO'T$]O~OP$zyY$zyi$zys$zy!]$zy!^$zy!`$zy!f$zy#W$zy#X$zy#Y$zy#Z$zy#[$zy#]$zy#^$zy#_$zy#a$zy#c$zy#e$zy#f$zy#i$zy'c$zy}$zy!O$zy~P!$dO'e'gX~P.jO'eZXzZX!_ZX%pZX!PZX%OZX!XZX~P$zO!XcX!_ZX!_cX'pcX~P;dOP9UOQ9UO]cOa:lOb!iOgcOi9UOjcOkcOn9UOp9UOuROwcOxcOycO!PSO!Z9WO!`UO!c9UO!d9UO!e9UO!f9UO!g9UO!j!hO#p!kO#t^O'Y'`O'cQO'oYO'|:jO~O}9gO!O$Za~O]#rOg$POi#sOj#rOk#rOn$QOp9lOu#yO!P#zO!Z:oO!`#wO#R9rO#p$UO$]9nO$_9pO$b$VO'Y&xO'c#tO~O#`'gO~P&-RO!OZX!OcX~P;dO#S9ZO~O!X!vO#S9ZO~O!w9jO~O#_9`O~O!w9sO}'uX!O'uX~O!w9jO}'sX!O'sX~O#S9tO~O'^9vO~P!$dO#S9{O~O#S9|O~O!X!vO#S9}O~O!X!vO#S9tO~O#i:OO~P#)tO#S:PO~O#S:QO~O#S:RO~O#S:SO~O#i:TO~P!$dO#i:UO~P!$dO#t~!^!n!p!q#Q#R'|$]$_$b$s$}%O%P%V%X%[%]%_%a~TS#t'|#Xy'V'W'f'W'Y#v#x#v~",
++  goto: "#Dq(ZPPPPPPP([P(lP*`PPPP-uPP.[3l5`5sP5sPPP5s5sP5sP7aPP7fP7zPPPP<ZPPPP<Z>yPPP?PA[P<ZPCuPPPPEm<ZPPPPPGf<ZPPJeKbPPPPKfMOPMWNXPKb<Z<Z!#`!&X!*x!*x!.VPPP!.^!1Q<ZPPPPPPPPPP!3uP!5WPP<Z!6eP<ZP<Z<Z<Z<ZP<Z!8xPP!;oP!>bP!>f!>n!>r!>rP!;lP!>v!>vP!AiP!Am<Z<Z!As!De5sP5sP5s5sP!Eh5s5s!G`5s!Ib5s!KS5s5s!Kp!Mj!Mj!Mn!Mj!MvP!MjP5s!Nr5s# |5s5s-uPPP##ZPP##s##sP##sP#$Y##sPP#$`P#$VP#$V#$rMS#$V#%a#%g#%j([#%m([P#%t#%t#%tP([P([P([P([PP([P#%z#%}P#%}([PPP([P([P([P([P([P([([#&R#&]#&c#&i#&w#&}#'T#'_#'e#'o#'u#(T#(Z#(a#(o#)U#*h#*v#*|#+S#+Y#+`#+j#+p#+v#,Q#,d#,jPPPPPPPPP#,pPP#-d#1bPP#2x#3P#3XP#7ePP#7i#9|#?v#?z#?}#@Q#@]#@`PP#@c#@g#AU#Ay#A}#BaPP#Be#Bk#BoP#Br#Bv#By#Ci#DP#DU#DX#D[#Db#De#Di#DmmhOSj}!m$[%c%f%g%i*k*p/_/bQ$imQ$ppQ%ZyS&T!b+WQ&h!iS(h#z(mQ)c$jQ)p$rQ*[%TQ+^&[S+e&a+gQ+w&iQ-c(oQ.|*]Y0R+i+j+k+l+mS2n.q2pU3w0S0U0XU5d2s2t2uS6Z3y3|S7R5e5fQ7m6]R8Q7T$l[ORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#a#d$[$n%[%_%c%e%f%g%i%m%x&Q&]&c&m&z'O(O)Q)X*g*k*p+r+y,[,b-l-q-y.T.t/V/W/X/Z/_/b/d/{0b0l2c2{3`3b3c3s5l5z6U7j8^8s!j'b#[#l&U't+P+S,g/r1P2k3l6{9U9W9Z9[9]9^9_9`9a9b9c9d9e9f9g9j9s9t9v9}:O:R:S:mQ(x$RQ)h$lQ*^%WQ*e%`Q,R9kQ.O)]Q.Z)iQ/U*cQ2X.UQ3T.}Q4W9lR5P2YpeOSjy}!m$[%Y%c%f%g%i*k*p/_/bR*`%[&WVOSTjkn}!S!W!]!j!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#[#a#d#l$[$n%[%_%`%c%e%f%g%i%m%x&Q&]&c&m&z'O't(O)Q)X*g*k*p+P+S+r+y,[,b,g-l-q-y.T.t/V/W/X/Z/_/b/d/r/{0b0l1P2c2k2{3`3b3c3l3s5l5z6U6{7j8^8s9U9W9Z9[9]9^9_9`9a9b9c9d9e9f9g9j9s9t9v9}:O:R:S:l:mW!cRU!`&UQ$blQ$hmS$mp$rv$wrs!q!t$Y$u&^&q&t)t)u)v*i+Q+a+|,O/h0dQ%PwQ&e!hQ&g!iS([#w(fS)b$i$jQ)f$lQ)s$tQ*V%RQ*Z%TS+v&h&iQ-P(]Q.S)cQ.Y)iQ.[)jQ._)nQ.w*WS.{*[*]Q0`+wQ1Y,{Q2W.UQ2[.XQ2a.aQ3S.|Q4c1ZQ5O2YQ5R2^Q6u4}R7w6v!Y$fm!i$h$i$j&S&g&h&i(g)b)c+T+d+v+w-].S/w0O0T0`1o3v3{6X7k8_Q)Z$bQ){$|Q*O$}Q*Y%TQ.c)sQ.v*VU.z*Z*[*]Q2}.wS3R.{.|Q5_2mQ5q3SS7P5`5cS8O7Q7SQ8i8PR8x8jW#}a$d(u:jS$|t%YQ$}uQ%OvR)y$z$V#|a!v!x#c#w#y$S$T$X&d'z(T(V(W(_(c(s(t)W)Y)])z)}+s,X-S-U-n-x-z.h.k.s.u1X1b1l1s1z1}2R2d2z2|4f4r4z5h5m6z7W8T9i9m9n9o9p9q9r9w9x9y9z9{9|:P:Q:T:U:j:p:qV(y$R9k9lU&X!b$v+ZQ'R!zQ)m$oQ.l*PQ1t-kR5Z2i&YcORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#[#a#d#l$[$n%[%_%`%c%e%f%g%i%m%x&Q&U&]&c&m&z'O't(O)Q)X*g*k*p+P+S+r+y,[,b,g-l-q-y.T.t/V/W/X/Z/_/b/d/r/{0b0l1P2c2k2{3`3b3c3l3s5l5z6U6{7j8^8s9U9W9Z9[9]9^9_9`9a9b9c9d9e9f9g9j9s9t9v9}:O:R:S:m$]#`Z!_!n$`%w%{&v&}'T'U'V'W'X'Y'Z'[']'^'_'a'd'h'r)l*{+U+_+x,W,^,a,c,q-o/m/p0a0k0o0p0q0r0s0t0u0v0w0x0y0z0{1O1T1x2U3n3q4R4U4V4[4]5]6Q6T6a6e6f7g7z8[8q8|9V:c&ZcORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#[#a#d#l$[$n%[%_%`%c%e%f%g%i%m%x&Q&U&]&c&m&z'O't(O)Q)X*g*k*p+P+S+r+y,[,b,g-l-q-y.T.t/V/W/X/Z/_/b/d/r/{0b0l1P2c2k2{3`3b3c3l3s5l5z6U6{7j8^8s9U9W9Z9[9]9^9_9`9a9b9c9d9e9f9g9j9s9t9v9}:O:R:S:mQ&V!bR/s+WY&P!b&T&[+W+^S(g#z(mS+d&a+gS-](h(oQ-^(iQ-d(pQ.n*RU0O+e+i+jU0T+k+l+mS0Y+n2rQ1o-cQ1q-eQ1r-fS2m.q2pU3v0R0S0UQ3z0VQ3{0XS5`2n2uS5c2s2tU6X3w3y3|Q6^3}S7Q5d5eQ7S5fS7k6Z6]S8P7R7TQ8_7mR8j8QlhOSj}!m$[%c%f%g%i*k*p/_/bQ%k!QS&u!u9ZQ)`$gQ*T%PQ*U%QQ+t&fS,V&z9tS-p)Q9}Q.Q)aQ.p*SQ/f*rQ/g*sQ/o+RQ0W+kQ0^+uS1y-q:RQ2S.RS2V.T:SQ3m/qQ3p/yQ4P0_Q4|2TQ6O3jQ6R3oQ6V3uQ6_4QQ7e6PQ7h6WQ8Z7iQ8n8XQ8p8]R8{8r$W#_Z!_!n%w%{&v&}'T'U'V'W'X'Y'Z'[']'^'_'a'd'h'r)l*{+U+_+x,W,^,a,q-o/m/p0a0k0o0p0q0r0s0t0u0v0w0x0y0z0{1O1T1x2U3n3q4R4U4V4[4]5]6Q6T6a6e6f7g7z8[8q8|9V:cU(r#{&y0}T)U$`,c$W#^Z!_!n%w%{&v&}'T'U'V'W'X'Y'Z'[']'^'_'a'd'h'r)l*{+U+_+x,W,^,a,q-o/m/p0a0k0o0p0q0r0s0t0u0v0w0x0y0z0{1O1T1x2U3n3q4R4U4V4[4]5]6Q6T6a6e6f7g7z8[8q8|9V:cQ'c#_S)T$`,cR-r)U&YcORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#[#a#d#l$[$n%[%_%`%c%e%f%g%i%m%x&Q&U&]&c&m&z'O't(O)Q)X*g*k*p+P+S+r+y,[,b,g-l-q-y.T.t/V/W/X/Z/_/b/d/r/{0b0l1P2c2k2{3`3b3c3l3s5l5z6U6{7j8^8s9U9W9Z9[9]9^9_9`9a9b9c9d9e9f9g9j9s9t9v9}:O:R:S:mQ%f{Q%g|Q%i!OQ%j!PR/^*nQ&b!hQ)V$bQ+q&eS-w)Z)sS0Z+o+pW1|-t-u-v.cS4O0[0]U4y2O2P2QU6s4x5V5WQ7v6tR8e7yT+f&a+gS+d&a+gU0O+e+i+jU0T+k+l+mS0Y+n2rS2m.q2pU3v0R0S0UQ3z0VQ3{0XS5`2n2uS5c2s2tU6X3w3y3|Q6^3}S7Q5d5eQ7S5fS7k6Z6]S8P7R7TQ8_7mR8j8QS+f&a+gT2o.q2pS&o!p/[Q-O([Q-Z(gS/}+d2mQ1_-PS1i-[-dU3x0T0Y5cQ4b1YS4p1p1rU6[3z3{7SQ6i4cQ6r4sR7n6^Q!wXS&n!p/[Q)R$ZQ)^$eQ)d$kQ+z&oQ,}([Q-Y(gQ-_(jQ.P)_Q.x*XS/|+d2mS1^-O-PS1h-Z-dQ1k-^Q1n-`Q3P.yW3t/}0T0Y5cQ4a1YQ4e1_S4j1i1rQ4q1qQ5o3QW6Y3x3z3{7SS6h4b4cQ6m4lQ6p4pQ6}5^Q7[5pS7l6[6^Q7p6iQ7r6nQ7u6rQ7|7OQ8V7]Q8`7nQ8c7tQ8g7}Q8v8hQ9O8wQ9S9PQ:]:WQ:f:aR:g:b$nWORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#a#d$[$n%[%_%`%c%e%f%g%i%m%x&Q&]&c&m&z'O(O)Q)X*g*k*p+r+y,[,b-l-q-y.T.t/V/W/X/Z/_/b/d/{0b0l2c2{3`3b3c3s5l5z6U7j8^8sS!wn!j!j:V#[#l&U't+P+S,g/r1P2k3l6{9U9W9Z9[9]9^9_9`9a9b9c9d9e9f9g9j9s9t9v9}:O:R:S:mR:]:l$nXORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#a#d$[$n%[%_%`%c%e%f%g%i%m%x&Q&]&c&m&z'O(O)Q)X*g*k*p+r+y,[,b-l-q-y.T.t/V/W/X/Z/_/b/d/{0b0l2c2{3`3b3c3s5l5z6U7j8^8sQ$Zb!Y$em!i$h$i$j&S&g&h&i(g)b)c+T+d+v+w-].S/w0O0T0`1o3v3{6X7k8_S$kn!jQ)_$fQ*X%TW.y*Y*Z*[*]U3Q.z.{.|Q5^2mS5p3R3SU7O5_5`5cQ7]5qU7}7P7Q7SS8h8O8PS8w8i8jQ9P8x!j:W#[#l&U't+P+S,g/r1P2k3l6{9U9W9Z9[9]9^9_9`9a9b9c9d9e9f9g9j9s9t9v9}:O:R:S:mQ:a:kR:b:l$f]OSTjk}!S!W!]!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#a#d$[$n%[%_%c%e%f%g%i%m%x&Q&]&c&m&z'O(O)Q)X*g*k*p+r+y,[,b-l-q-y.T.t/V/W/X/Z/_/b/d/{0b0l2c2{3`3b3c3s5l5z6U7j8^8sU!gRU!`v$wrs!q!t$Y$u&^&q&t)t)u)v*i+Q+a+|,O/h0dQ*f%`!h:X#[#l't+P+S,g/r1P2k3l6{9U9W9Z9[9]9^9_9`9a9b9c9d9e9f9g9j9s9t9v9}:O:R:S:mR:[&US&Y!b$vR/u+Z$l[ORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#a#d$[$n%[%_%c%e%f%g%i%m%x&Q&]&c&m&z'O(O)Q)X*g*k*p+r+y,[,b-l-q-y.T.t/V/W/X/Z/_/b/d/{0b0l2c2{3`3b3c3s5l5z6U7j8^8s!j'b#[#l&U't+P+S,g/r1P2k3l6{9U9W9Z9[9]9^9_9`9a9b9c9d9e9f9g9j9s9t9v9}:O:R:S:mR*e%`$noORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#a#d$[$n%[%_%`%c%e%f%g%i%m%x&Q&]&c&m&z'O(O)Q)X*g*k*p+r+y,[,b-l-q-y.T.t/V/W/X/Z/_/b/d/{0b0l2c2{3`3b3c3s5l5z6U7j8^8sQ'R!z!k:Y#[#l&U't+P+S,g/r1P2k3l6{9U9W9Z9[9]9^9_9`9a9b9c9d9e9f9g9j9s9t9v9}:O:R:S:m!h#UZ!_$`%w%{&v&}'[']'^'_'d'h)l*{+_+x,W,^,q-o0a0k0{1x2U3q4R4U6T7g8[8q8|9V!R9b'a'r+U,c/m/p0o0w0x0y0z1O1T3n4V4[4]5]6Q6a6e6f7z:c!d#WZ!_$`%w%{&v&}'^'_'d'h)l*{+_+x,W,^,q-o0a0k0{1x2U3q4R4U6T7g8[8q8|9V}9d'a'r+U,c/m/p0o0y0z1O1T3n4V4[4]5]6Q6a6e6f7z:c!`#[Z!_$`%w%{&v&}'d'h)l*{+_+x,W,^,q-o0a0k0{1x2U3q4R4U6T7g8[8q8|9Vl(W#u&{)P,y-R-g-h0i1w4`4t:^:h:ix:m'a'r+U,c/m/p0o1O1T3n4V4[4]5]6Q6a6e6f7z:c!`:p&w'f(Z(a+p,U,n-V-s-v.g.i0]0h1`1d2Q2f2h2x4T4g4m4v4{5W5k6`6k6q7YZ:q0|4Z6b7o8a&YcORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#[#a#d#l$[$n%[%_%`%c%e%f%g%i%m%x&Q&U&]&c&m&z'O't(O)Q)X*g*k*p+P+S+r+y,[,b,g-l-q-y.T.t/V/W/X/Z/_/b/d/r/{0b0l1P2c2k2{3`3b3c3l3s5l5z6U6{7j8^8s9U9W9Z9[9]9^9_9`9a9b9c9d9e9f9g9j9s9t9v9}:O:R:S:mS#m`#nR1Q,f&a_ORSTU`jk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#[#a#d#l#n$[$n%[%_%`%c%e%f%g%i%m%x&Q&U&]&c&m&z'O't(O)Q)X*g*k*p+P+S+r+y,[,b,f,g-l-q-y.T.t/V/W/X/Z/_/b/d/r/{0b0l1P2c2k2{3`3b3c3l3s5l5z6U6{7j8^8s9U9W9Z9[9]9^9_9`9a9b9c9d9e9f9g9j9s9t9v9}:O:R:S:mT#i^#oS#g^#oT'k#j'oT#h^#oT'm#j'o&a`ORSTU`jk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#[#a#d#l#n$[$n%[%_%`%c%e%f%g%i%m%x&Q&U&]&c&m&z'O't(O)Q)X*g*k*p+P+S+r+y,[,b,f,g-l-q-y.T.t/V/W/X/Z/_/b/d/r/{0b0l1P2c2k2{3`3b3c3l3s5l5z6U6{7j8^8s9U9W9Z9[9]9^9_9`9a9b9c9d9e9f9g9j9s9t9v9}:O:R:S:mT#m`#nQ#p`R'v#n$nbORSTUjk}!S!W!]!`!m!u!y!{#O#P#Q#R#S#T#U#V#W#X#Y#a#d$[$n%[%_%`%c%e%f%g%i%m%x&Q&]&c&m&z'O(O)Q)X*g*k*p+r+y,[,b-l-q-y.T.t/V/W/X/Z/_/b/d/{0b0l2c2{3`3b3c3s5l5z6U7j8^8s!k:k#[#l&U't+P+S,g/r1P2k3l6{9U9W9Z9[9]9^9_9`9a9b9c9d9e9f9g9j9s9t9v9}:O:R:S:m#RdOSUj}!S!W!m!{#l$[%[%_%`%c%e%f%g%i%m&Q&c't)X*g*k*p+r,g-l-y.t/V/W/X/Z/_/b/d1P2c2{3`3b3c5l5zt#{a!x$S$T$X(T(V(W(_(s(t,X-n1X1s:j:p:q!|&y!v#c#w#y&d'z(c)W)Y)])z)}+s-S-U-x-z.h.k.s.u1b1l1z1}2R2d2z2|4f4r4z5h5m6z7W8T9m9o9q9w9y9{:P:TQ(}$VQ,r(Pc0}9i9n9p9r9x9z9|:Q:Ut#xa!x$S$T$X(T(V(W(_(s(t,X-n1X1s:j:p:qS(j#z(mQ)O$WQ-`(k!|:_!v#c#w#y&d'z(c)W)Y)])z)}+s-S-U-x-z.h.k.s.u1b1l1z1}2R2d2z2|4f4r4z5h5m6z7W8T9m9o9q9w9y9{:P:Tb:`9i9n9p9r9x9z9|:Q:UQ:d:nR:e:ot#{a!x$S$T$X(T(V(W(_(s(t,X-n1X1s:j:p:q!|&y!v#c#w#y&d'z(c)W)Y)])z)}+s-S-U-x-z.h.k.s.u1b1l1z1}2R2d2z2|4f4r4z5h5m6z7W8T9m9o9q9w9y9{:P:Tc0}9i9n9p9r9x9z9|:Q:UlfOSj}!m$[%c%f%g%i*k*p/_/bQ(b#yQ*w%pQ*x%rR1a-S$U#|a!v!x#c#w#y$S$T$X&d'z(T(V(W(_(c(s(t)W)Y)])z)}+s,X-S-U-n-x-z.h.k.s.u1X1b1l1s1z1}2R2d2z2|4f4r4z5h5m6z7W8T9i9m9n9o9p9q9r9w9x9y9z9{9|:P:Q:T:U:j:p:qQ)|$}Q.j*OQ2g.iR5Y2hT(l#z(mS(l#z(mT2o.q2pQ)^$eQ-_(jQ.P)_Q.x*XQ3P.yQ5o3QQ6}5^Q7[5pQ7|7OQ8V7]Q8g7}Q8v8hQ9O8wR9S9Pl(T#u&{)P,y-R-g-h0i1w4`4t:^:h:i!`9w&w'f(Z(a+p,U,n-V-s-v.g.i0]0h1`1d2Q2f2h2x4T4g4m4v4{5W5k6`6k6q7YZ9x0|4Z6b7o8an(V#u&{)P,w,y-R-g-h0i1w4`4t:^:h:i!b9y&w'f(Z(a+p,U,n-V-s-v.g.i0]0f0h1`1d2Q2f2h2x4T4g4m4v4{5W5k6`6k6q7Y]9z0|4Z6b6c7o8apeOSjy}!m$[%Y%c%f%g%i*k*p/_/bQ%VxR*g%`peOSjy}!m$[%Y%c%f%g%i*k*p/_/bR%VxQ*Q%OR.f)yqeOSjy}!m$[%Y%c%f%g%i*k*p/_/bQ.r*VS2y.v.wW5g2v2w2x2}U7V5i5j5kU8R7U7X7YQ8k8SR8y8lQ%^yR*a%YR3W/PR7_5rS$mp$rR.[)jQ%czR*k%dR*q%jT/`*p/bQjOQ!mST$_j!mQ'|#tR,o'|Q!YQR%u!YQ!^RU%y!^%z*|Q%z!_R*|%{Q+X&VR/t+XQ,Y&{R0j,YQ,]&}S0m,]0nR0n,^Q+g&aR0P+gQ&_!eQ*}%|T+b&_*}Q+[&YR/v+[Q&r!rQ+{&pU,P&r+{0eR0e,QQ'o#jR,h'oQ#n`R'u#nQ#bZU'e#b*z9hQ*z9VR9h'rQ,|([W1[,|1]4d6jU1],}-O-PS4d1^1_R6j4e#q(R#u&w&{'f(Z(a(z({)P+p,S,T,U,n,w,x,y-R-V-g-h-s-v.g.i0]0f0g0h0i0|1`1d1w2Q2f2h2x4T4X4Y4Z4`4g4m4t4v4{5W5k6`6b6c6d6k6q7Y7o8a:^:h:iQ-T(aU1c-T1e4hQ1e-VR4h1dQ(m#zR-a(mQ(v$OR-j(vQ1{-sR4w1{Q)w$xR.e)wQ2j.lS5[2j6|R6|5]Q*S%PR.o*SQ2p.qR5a2pQ/O*^S3U/O5sR5s3WQ.V)fW2Z.V2]5Q6wQ2].YQ5Q2[R6w5RQ)k$mR.])kQ/b*pR3f/bWiOSj!mQ%h}Q)S$[Q*j%cQ*l%fQ*m%gQ*o%iQ/]*kS/`*p/bR3e/_Q$^gQ%l!RQ%o!TQ%q!UQ%s!VQ)r$sQ)x$yQ*`%^Q*u%nS/R*a*dQ/i*tQ/j*wQ/k*xS/z+d2mQ1f-XQ1g-YQ1m-_Q2`.`Q2e.gQ3O.xQ3Y/TQ3d/^Y3r/|/}0T0Y5cQ4i1hQ4k1jQ4n1nQ5U2bQ5X2fQ5n3PQ5t3X[6S3q3t3x3z3{7SQ6l4jQ6o4oQ6x5SQ7Z5oQ7`5uW7f6T6Y6[6^Q7q6mQ7s6pQ7x6yQ7{6}Q8U7[U8Y7g7l7nQ8b7rQ8d7uQ8f7|Q8m8VS8o8[8`Q8t8cQ8u8gQ8z8qQ8}8vQ9Q8|Q9R9OR9T9SQ$gmQ&f!iU)a$h$i$jQ+R&SU+u&g&h&iQ-X(gS.R)b)cQ/q+TQ/y+dS0_+v+wQ1j-]Q2T.SQ3o/wS3u0O0TQ4Q0`Q4o1oS6W3v3{Q7i6XQ8]7kR8r8_S#va:jR)[$dU$Oa$d:jR-i(uQ#uaS&w!v)]Q&{!xQ'f#cQ(Z#wQ(a#yQ(z$SQ({$TQ)P$XQ+p&dQ,S9mQ,T9oQ,U9qQ,n'zQ,w(TQ,x(VQ,y(WQ-R(_Q-V(cQ-g(sQ-h(td-s)W-x.s1}2z4z5h6z7W8TQ-v)YQ.g)zQ.i)}Q0]+sQ0f9wQ0g9yQ0h9{Q0i,XQ0|9iQ1`-SQ1d-UQ1w-nQ2Q-zQ2f.hQ2h.kQ2x.uQ4T:PQ4X9nQ4Y9pQ4Z9rQ4`1XQ4g1bQ4m1lQ4t1sQ4v1zQ4{2RQ5W2dQ5k2|Q6`:TQ6b9|Q6c9xQ6d9zQ6k4fQ6q4rQ7Y5mQ7o:QQ8a:UQ:^:jQ:h:pR:i:qT'{#t'|lgOSj}!m$[%c%f%g%i*k*p/_/bS!oU%eQ%n!SQ%t!WQ'S!{Q's#lS*d%[%_Q*h%`Q*t%mQ+O&QQ+o&cQ,l'tQ-u)XQ/Y*gQ0[+rQ1S,gQ1u-lQ2P-yQ2w.tQ3[/VQ3]/WQ3_/XQ3a/ZQ3h/dQ4^1PQ5V2cQ5j2{Q5y3`Q5{3bQ5|3cQ7X5lR7b5z!vZOSUj}!S!m!{$[%[%_%`%c%e%f%g%i%m&Q&c)X*g*k*p+r-l-y.t/V/W/X/Z/_/b/d2c2{3`3b3c5l5zQ!_RQ!nTQ$`kQ%w!]Q%{!`Q&v!uQ&}!yQ'T#OQ'U#PQ'V#QQ'W#RQ'X#SQ'Y#TQ'Z#UQ'[#VQ']#WQ'^#XQ'_#YQ'a#[Q'd#aQ'h#dW'r#l't,g1PQ)l$nQ*{%xS+U&U/rQ+_&]Q+x&mQ,W&zQ,^'OQ,a9UQ,c9WQ,q(OQ-o)QQ/m+PQ/p+SQ0a+yQ0k,[Q0o9ZQ0p9[Q0q9]Q0r9^Q0s9_Q0t9`Q0u9aQ0v9bQ0w9cQ0x9dQ0y9eQ0z9fQ0{,bQ1O9jQ1T9gQ1x-qQ2U.TQ3n9sQ3q/{Q4R0bQ4U0lQ4V9tQ4[9vQ4]9}Q5]2kQ6Q3lQ6T3sQ6a:OQ6e:RQ6f:SQ7g6UQ7z6{Q8[7jQ8q8^Q8|8sQ9V!WR:c:mT!XQ!YR!aRR&W!bS&S!b+WS+T&T&[R/w+^R&|!xR'P!yT!sU$YS!rU$YU$xrs*iS&p!q!tQ+}&qQ,Q&tQ.d)vS0c+|,OR4S0d[!dR!`$u&^)t+ah!pUrs!q!t$Y&q&t)v+|,O0dQ/[*iQ/n+QQ3k/hT:Z&U)uT!fR$uS!eR$uS%|!`)tS+V&U)uQ+`&^R/x+aT&Z!b$vQ#j^R'x#oT'n#j'oR1R,fT(^#w(fR(d#yQ-t)WQ2O-xQ2v.sQ4x1}Q5i2zQ6t4zQ7U5hQ7y6zQ8S7WR8l8TlhOSj}!m$[%c%f%g%i*k*p/_/bQ%]yR*`%YV$yrs*iR.m*PR*_%WQ$qpR)q$rR)g$lT%az%dT%bz%dT/a*p/b",
++  nodeNames: "⚠ ArithOp ArithOp extends LineComment BlockComment Script ExportDeclaration export Star as VariableName from String ; default FunctionDeclaration async function VariableDefinition TypeParamList TypeDefinition ThisType this LiteralType ArithOp Number BooleanLiteral TemplateType VoidType void TypeofType typeof MemberExpression . ?. PropertyName [ TemplateString null super RegExp ] ArrayExpression Spread , } { ObjectExpression Property async get set PropertyDefinition Block : NewExpression new TypeArgList CompareOp < ) ( ArgList UnaryExpression await yield delete LogicOp BitOp ParenthesizedExpression ClassExpression class extends ClassBody MethodDeclaration Privacy static abstract override PrivatePropertyDefinition PropertyDeclaration readonly Optional TypeAnnotation Equals StaticBlock FunctionExpression ArrowFunction ParamList ParamList ArrayPattern ObjectPattern PatternProperty Privacy readonly Arrow MemberExpression PrivatePropertyName BinaryExpression ArithOp ArithOp ArithOp ArithOp BitOp CompareOp instanceof in const CompareOp BitOp BitOp BitOp LogicOp LogicOp ConditionalExpression LogicOp LogicOp AssignmentExpression UpdateOp PostfixExpression CallExpression TaggedTemplateExpression DynamicImport import ImportMeta JSXElement JSXSelfCloseEndTag JSXStartTag JSXSelfClosingTag JSXIdentifier JSXBuiltin JSXIdentifier JSXNamespacedName JSXMemberExpression JSXSpreadAttribute JSXAttribute JSXAttributeValue JSXEscape JSXEndTag JSXOpenTag JSXFragmentTag JSXText JSXEscape JSXStartCloseTag JSXCloseTag PrefixCast ArrowFunction TypeParamList SequenceExpression KeyofType keyof UniqueType unique ImportType InferredType infer TypeName ParenthesizedType FunctionSignature ParamList NewSignature IndexedType TupleType Label ArrayType ReadonlyType ObjectType MethodType PropertyType IndexSignature CallSignature TypePredicate is NewSignature new UnionType LogicOp IntersectionType LogicOp ConditionalType ParameterizedType ClassDeclaration abstract implements type VariableDeclaration let var TypeAliasDeclaration InterfaceDeclaration interface EnumDeclaration enum EnumBody NamespaceDeclaration namespace module AmbientDeclaration declare GlobalDeclaration global ClassDeclaration ClassBody MethodDeclaration AmbientFunctionDeclaration ExportGroup VariableName VariableName ImportDeclaration ImportGroup ForStatement for ForSpec ForInSpec ForOfSpec of WhileStatement while WithStatement with DoStatement do IfStatement if else SwitchStatement switch SwitchBody CaseLabel case DefaultLabel TryStatement try catch finally ReturnStatement return ThrowStatement throw BreakStatement break ContinueStatement continue DebuggerStatement debugger LabeledStatement ExpressionStatement",
++  maxTerm: 332,
+   context: trackNewline,
+   nodeProps: [
+-    [NodeProp.group, -26,7,14,16,54,180,184,187,188,190,193,196,207,209,215,217,219,221,224,230,234,236,238,240,242,244,245,"Statement",-30,11,13,23,26,27,38,39,40,41,43,48,56,64,70,71,87,88,97,99,115,118,120,121,122,123,125,126,144,145,147,"Expression",-22,22,24,28,29,31,148,150,152,153,155,156,157,159,160,161,163,164,165,174,176,178,179,"Type",-3,75,81,86,"ClassItem"],
+-    [NodeProp.closedBy, 37,"]",47,"}",62,")",128,"JSXSelfCloseEndTag JSXEndTag",142,"JSXEndTag"],
+-    [NodeProp.openedBy, 42,"[",46,"{",61,"(",127,"JSXStartTag",137,"JSXStartTag JSXStartCloseTag"]
++    [NodeProp.group, -26,7,14,16,54,182,186,189,190,192,195,198,209,211,217,219,221,223,226,232,236,238,240,242,244,246,247,"Statement",-30,11,13,23,26,27,38,39,40,41,43,48,56,64,70,71,87,88,97,99,115,118,120,121,122,123,125,126,146,147,149,"Expression",-22,22,24,28,29,31,150,152,154,155,157,158,159,161,162,163,165,166,167,176,178,180,181,"Type",-3,75,81,86,"ClassItem"],
++    [NodeProp.closedBy, 37,"]",47,"}",62,")",128,"JSXSelfCloseEndTag JSXEndTag",144,"JSXEndTag"],
++    [NodeProp.openedBy, 42,"[",46,"{",61,"(",127,"JSXStartTag",139,"JSXStartTag JSXStartCloseTag"]
+   ],
+   skippedNodes: [0,4,5],
+   repeatNodeCount: 28,
+-  tokenData: "!C}~R!`OX%TXY%cYZ'RZ[%c[]%T]^'R^p%Tpq%cqr'crs(kst0htu2`uv4pvw5ewx6cxy<yyz=Zz{=k{|>k|}?O}!O>k!O!P?`!P!QCl!Q!R!0[!R![!1q![!]!7s!]!^!8V!^!_!8g!_!`!9d!`!a!:[!a!b!<R!b!c%T!c!}2`!}#O!=d#O#P%T#P#Q!=t#Q#R!>U#R#S2`#S#T!>i#T#o2`#o#p!>y#p#q!?O#q#r!?f#r#s!?x#s$f%T$f$g%c$g#BY2`#BY#BZ!@Y#BZ$IS2`$IS$I_!@Y$I_$I|2`$I|$I}!Bq$I}$JO!Bq$JO$JT2`$JT$JU!@Y$JU$KV2`$KV$KW!@Y$KW&FU2`&FU&FV!@Y&FV?HT2`?HT?HU!@Y?HU~2`W%YR$QWO!^%T!_#o%T#p~%T,T%jg$QW'T+{OX%TXY%cYZ%TZ[%c[p%Tpq%cq!^%T!_#o%T#p$f%T$f$g%c$g#BY%T#BY#BZ%c#BZ$IS%T$IS$I_%c$I_$JT%T$JT$JU%c$JU$KV%T$KV$KW%c$KW&FU%T&FU&FV%c&FV?HT%T?HT?HU%c?HU~%T,T'YR$QW'U+{O!^%T!_#o%T#p~%T$T'jS$QW!f#{O!^%T!_!`'v!`#o%T#p~%T$O'}S#a#v$QWO!^%T!_!`(Z!`#o%T#p~%T$O(bR#a#v$QWO!^%T!_#o%T#p~%T'u(rZ$QW]!ROY(kYZ)eZr(krs*rs!^(k!^!_+U!_#O(k#O#P-b#P#o(k#o#p+U#p~(k&r)jV$QWOr)ers*Ps!^)e!^!_*a!_#o)e#o#p*a#p~)e&r*WR#{&j$QWO!^%T!_#o%T#p~%T&j*dROr*ars*ms~*a&j*rO#{&j'u*{R#{&j$QW]!RO!^%T!_#o%T#p~%T'm+ZV]!ROY+UYZ*aZr+Urs+ps#O+U#O#P+w#P~+U'm+wO#{&j]!R'm+zROr+Urs,Ts~+U'm,[U#{&j]!ROY,nZr,nrs-Vs#O,n#O#P-[#P~,n!R,sU]!ROY,nZr,nrs-Vs#O,n#O#P-[#P~,n!R-[O]!R!R-_PO~,n'u-gV$QWOr(krs-|s!^(k!^!_+U!_#o(k#o#p+U#p~(k'u.VZ#{&j$QW]!ROY.xYZ%TZr.xrs/rs!^.x!^!_,n!_#O.x#O#P0S#P#o.x#o#p,n#p~.x!Z/PZ$QW]!ROY.xYZ%TZr.xrs/rs!^.x!^!_,n!_#O.x#O#P0S#P#o.x#o#p,n#p~.x!Z/yR$QW]!RO!^%T!_#o%T#p~%T!Z0XT$QWO!^.x!^!_,n!_#o.x#o#p,n#p~.xy0mZ$QWOt%Ttu1`u!^%T!_!c%T!c!}1`!}#R%T#R#S1`#S#T%T#T#o1`#p$g%T$g~1`y1g]$QW'mqOt%Ttu1`u!Q%T!Q![1`![!^%T!_!c%T!c!}1`!}#R%T#R#S1`#S#T%T#T#o1`#p$g%T$g~1`&i2k_$QW#vS'W%k'dpOt%Ttu2`u}%T}!O3j!O!Q%T!Q![2`![!^%T!_!c%T!c!}2`!}#R%T#R#S2`#S#T%T#T#o2`#p$g%T$g~2`[3q_$QW#vSOt%Ttu3ju}%T}!O3j!O!Q%T!Q![3j![!^%T!_!c%T!c!}3j!}#R%T#R#S3j#S#T%T#T#o3j#p$g%T$g~3j$O4wS#Y#v$QWO!^%T!_!`5T!`#o%T#p~%T$O5[R$QW#k#vO!^%T!_#o%T#p~%T%r5lU'v%j$QWOv%Tvw6Ow!^%T!_!`5T!`#o%T#p~%T$O6VS$QW#e#vO!^%T!_!`5T!`#o%T#p~%T'u6jZ$QW]!ROY6cYZ7]Zw6cwx*rx!^6c!^!_8T!_#O6c#O#P:T#P#o6c#o#p8T#p~6c&r7bV$QWOw7]wx*Px!^7]!^!_7w!_#o7]#o#p7w#p~7]&j7zROw7wwx*mx~7w'm8YV]!ROY8TYZ7wZw8Twx+px#O8T#O#P8o#P~8T'm8rROw8Twx8{x~8T'm9SU#{&j]!ROY9fZw9fwx-Vx#O9f#O#P9}#P~9f!R9kU]!ROY9fZw9fwx-Vx#O9f#O#P9}#P~9f!R:QPO~9f'u:YV$QWOw6cwx:ox!^6c!^!_8T!_#o6c#o#p8T#p~6c'u:xZ#{&j$QW]!ROY;kYZ%TZw;kwx/rx!^;k!^!_9f!_#O;k#O#P<e#P#o;k#o#p9f#p~;k!Z;rZ$QW]!ROY;kYZ%TZw;kwx/rx!^;k!^!_9f!_#O;k#O#P<e#P#o;k#o#p9f#p~;k!Z<jT$QWO!^;k!^!_9f!_#o;k#o#p9f#p~;k%V=QR!`$}$QWO!^%T!_#o%T#p~%TZ=bR!_R$QWO!^%T!_#o%T#p~%T%R=tU'X!R#Z#v$QWOz%Tz{>W{!^%T!_!`5T!`#o%T#p~%T$O>_S#W#v$QWO!^%T!_!`5T!`#o%T#p~%T$u>rSi$m$QWO!^%T!_!`5T!`#o%T#p~%T&i?VR}&a$QWO!^%T!_#o%T#p~%T&i?gVr%n$QWO!O%T!O!P?|!P!Q%T!Q![@r![!^%T!_#o%T#p~%Ty@RT$QWO!O%T!O!P@b!P!^%T!_#o%T#p~%Ty@iR|q$QWO!^%T!_#o%T#p~%Ty@yZ$QWjqO!Q%T!Q![@r![!^%T!_!g%T!g!hAl!h#R%T#R#S@r#S#X%T#X#YAl#Y#o%T#p~%TyAqZ$QWO{%T{|Bd|}%T}!OBd!O!Q%T!Q![CO![!^%T!_#R%T#R#SCO#S#o%T#p~%TyBiV$QWO!Q%T!Q![CO![!^%T!_#R%T#R#SCO#S#o%T#p~%TyCVV$QWjqO!Q%T!Q![CO![!^%T!_#R%T#R#SCO#S#o%T#p~%T,TCs`$QW#X#vOYDuYZ%TZzDuz{Jl{!PDu!P!Q!-e!Q!^Du!^!_Fx!_!`!.^!`!a!/]!a!}Du!}#OHq#O#PJQ#P#oDu#o#pFx#p~DuXD|[$QWyPOYDuYZ%TZ!PDu!P!QEr!Q!^Du!^!_Fx!_!}Du!}#OHq#O#PJQ#P#oDu#o#pFx#p~DuXEy_$QWyPO!^%T!_#Z%T#Z#[Er#[#]%T#]#^Er#^#a%T#a#bEr#b#g%T#g#hEr#h#i%T#i#jEr#j#m%T#m#nEr#n#o%T#p~%TPF}VyPOYFxZ!PFx!P!QGd!Q!}Fx!}#OG{#O#PHh#P~FxPGiUyP#Z#[Gd#]#^Gd#a#bGd#g#hGd#i#jGd#m#nGdPHOTOYG{Z#OG{#O#PH_#P#QFx#Q~G{PHbQOYG{Z~G{PHkQOYFxZ~FxXHvY$QWOYHqYZ%TZ!^Hq!^!_G{!_#OHq#O#PIf#P#QDu#Q#oHq#o#pG{#p~HqXIkV$QWOYHqYZ%TZ!^Hq!^!_G{!_#oHq#o#pG{#p~HqXJVV$QWOYDuYZ%TZ!^Du!^!_Fx!_#oDu#o#pFx#p~Du,TJs^$QWyPOYJlYZKoZzJlz{NQ{!PJl!P!Q!,R!Q!^Jl!^!_!!]!_!}Jl!}#O!'|#O#P!+a#P#oJl#o#p!!]#p~Jl,TKtV$QWOzKoz{LZ{!^Ko!^!_M]!_#oKo#o#pM]#p~Ko,TL`X$QWOzKoz{LZ{!PKo!P!QL{!Q!^Ko!^!_M]!_#oKo#o#pM]#p~Ko,TMSR$QWT+{O!^%T!_#o%T#p~%T+{M`ROzM]z{Mi{~M]+{MlTOzM]z{Mi{!PM]!P!QM{!Q~M]+{NQOT+{,TNX^$QWyPOYJlYZKoZzJlz{NQ{!PJl!P!Q! T!Q!^Jl!^!_!!]!_!}Jl!}#O!'|#O#P!+a#P#oJl#o#p!!]#p~Jl,T! ^_$QWT+{yPO!^%T!_#Z%T#Z#[Er#[#]%T#]#^Er#^#a%T#a#bEr#b#g%T#g#hEr#h#i%T#i#jEr#j#m%T#m#nEr#n#o%T#p~%T+{!!bYyPOY!!]YZM]Zz!!]z{!#Q{!P!!]!P!Q!&x!Q!}!!]!}#O!$`#O#P!&f#P~!!]+{!#VYyPOY!!]YZM]Zz!!]z{!#Q{!P!!]!P!Q!#u!Q!}!!]!}#O!$`#O#P!&f#P~!!]+{!#|UT+{yP#Z#[Gd#]#^Gd#a#bGd#g#hGd#i#jGd#m#nGd+{!$cWOY!$`YZM]Zz!$`z{!${{#O!$`#O#P!&S#P#Q!!]#Q~!$`+{!%OYOY!$`YZM]Zz!$`z{!${{!P!$`!P!Q!%n!Q#O!$`#O#P!&S#P#Q!!]#Q~!$`+{!%sTT+{OYG{Z#OG{#O#PH_#P#QFx#Q~G{+{!&VTOY!$`YZM]Zz!$`z{!${{~!$`+{!&iTOY!!]YZM]Zz!!]z{!#Q{~!!]+{!&}_yPOzM]z{Mi{#ZM]#Z#[!&x#[#]M]#]#^!&x#^#aM]#a#b!&x#b#gM]#g#h!&x#h#iM]#i#j!&x#j#mM]#m#n!&x#n~M],T!(R[$QWOY!'|YZKoZz!'|z{!(w{!^!'|!^!_!$`!_#O!'|#O#P!*o#P#QJl#Q#o!'|#o#p!$`#p~!'|,T!(|^$QWOY!'|YZKoZz!'|z{!(w{!P!'|!P!Q!)x!Q!^!'|!^!_!$`!_#O!'|#O#P!*o#P#QJl#Q#o!'|#o#p!$`#p~!'|,T!*PY$QWT+{OYHqYZ%TZ!^Hq!^!_G{!_#OHq#O#PIf#P#QDu#Q#oHq#o#pG{#p~Hq,T!*tX$QWOY!'|YZKoZz!'|z{!(w{!^!'|!^!_!$`!_#o!'|#o#p!$`#p~!'|,T!+fX$QWOYJlYZKoZzJlz{NQ{!^Jl!^!_!!]!_#oJl#o#p!!]#p~Jl,T!,Yc$QWyPOzKoz{LZ{!^Ko!^!_M]!_#ZKo#Z#[!,R#[#]Ko#]#^!,R#^#aKo#a#b!,R#b#gKo#g#h!,R#h#iKo#i#j!,R#j#mKo#m#n!,R#n#oKo#o#pM]#p~Ko,T!-lV$QWS+{OY!-eYZ%TZ!^!-e!^!_!.R!_#o!-e#o#p!.R#p~!-e+{!.WQS+{OY!.RZ~!.R$P!.g[$QW#k#vyPOYDuYZ%TZ!PDu!P!QEr!Q!^Du!^!_Fx!_!}Du!}#OHq#O#PJQ#P#oDu#o#pFx#p~Du]!/f[#sS$QWyPOYDuYZ%TZ!PDu!P!QEr!Q!^Du!^!_Fx!_!}Du!}#OHq#O#PJQ#P#oDu#o#pFx#p~Duy!0cd$QWjqO!O%T!O!P@r!P!Q%T!Q![!1q![!^%T!_!g%T!g!hAl!h#R%T#R#S!1q#S#U%T#U#V!3X#V#X%T#X#YAl#Y#b%T#b#c!2w#c#d!4m#d#l%T#l#m!5{#m#o%T#p~%Ty!1x_$QWjqO!O%T!O!P@r!P!Q%T!Q![!1q![!^%T!_!g%T!g!hAl!h#R%T#R#S!1q#S#X%T#X#YAl#Y#b%T#b#c!2w#c#o%T#p~%Ty!3OR$QWjqO!^%T!_#o%T#p~%Ty!3^W$QWO!Q%T!Q!R!3v!R!S!3v!S!^%T!_#R%T#R#S!3v#S#o%T#p~%Ty!3}Y$QWjqO!Q%T!Q!R!3v!R!S!3v!S!^%T!_#R%T#R#S!3v#S#b%T#b#c!2w#c#o%T#p~%Ty!4rV$QWO!Q%T!Q!Y!5X!Y!^%T!_#R%T#R#S!5X#S#o%T#p~%Ty!5`X$QWjqO!Q%T!Q!Y!5X!Y!^%T!_#R%T#R#S!5X#S#b%T#b#c!2w#c#o%T#p~%Ty!6QZ$QWO!Q%T!Q![!6s![!^%T!_!c%T!c!i!6s!i#R%T#R#S!6s#S#T%T#T#Z!6s#Z#o%T#p~%Ty!6z]$QWjqO!Q%T!Q![!6s![!^%T!_!c%T!c!i!6s!i#R%T#R#S!6s#S#T%T#T#Z!6s#Z#b%T#b#c!2w#c#o%T#p~%T%w!7|R!XV$QW#i%hO!^%T!_#o%T#p~%T!P!8^R^w$QWO!^%T!_#o%T#p~%T+c!8rR']d!]%Y#t&s'zP!P!Q!8{!^!_!9Q!_!`!9_W!9QO$SW#v!9VP#[#v!_!`!9Y#v!9_O#k#v#v!9dO#]#v%w!9kT!w%o$QWO!^%T!_!`'v!`!a!9z!a#o%T#p~%T$P!:RR#S#w$QWO!^%T!_#o%T#p~%T%w!:gT'[!s#]#v#}S$QWO!^%T!_!`!:v!`!a!;W!a#o%T#p~%T$O!:}R#]#v$QWO!^%T!_#o%T#p~%T$O!;_T#[#v$QWO!^%T!_!`5T!`!a!;n!a#o%T#p~%T$O!;uS#[#v$QWO!^%T!_!`5T!`#o%T#p~%T%w!<YV'n%o$QWO!O%T!O!P!<o!P!^%T!_!a%T!a!b!=P!b#o%T#p~%T$`!<vRs$W$QWO!^%T!_#o%T#p~%T$O!=WS$QW#f#vO!^%T!_!`5T!`#o%T#p~%T&e!=kRu&]$QWO!^%T!_#o%T#p~%TZ!={RzR$QWO!^%T!_#o%T#p~%T$O!>]S#c#v$QWO!^%T!_!`5T!`#o%T#p~%T$P!>pR$QW'a#wO!^%T!_#o%T#p~%T~!?OO!P~%r!?VT'u%j$QWO!^%T!_!`5T!`#o%T#p#q!=P#q~%T$u!?oR!O$k$QW'cQO!^%T!_#o%T#p~%TX!@PR!gP$QWO!^%T!_#o%T#p~%T,T!@gr$QW'T+{#vS'W%k'dpOX%TXY%cYZ%TZ[%c[p%Tpq%cqt%Ttu2`u}%T}!O3j!O!Q%T!Q![2`![!^%T!_!c%T!c!}2`!}#R%T#R#S2`#S#T%T#T#o2`#p$f%T$f$g%c$g#BY2`#BY#BZ!@Y#BZ$IS2`$IS$I_!@Y$I_$JT2`$JT$JU!@Y$JU$KV2`$KV$KW!@Y$KW&FU2`&FU&FV!@Y&FV?HT2`?HT?HU!@Y?HU~2`,T!CO_$QW'U+{#vS'W%k'dpOt%Ttu2`u}%T}!O3j!O!Q%T!Q![2`![!^%T!_!c%T!c!}2`!}#R%T#R#S2`#S#T%T#T#o2`#p$g%T$g~2`",
++  tokenData: "!F_~R!`OX%TXY%cYZ'RZ[%c[]%T]^'R^p%Tpq%cqr'crs(kst0htu2`uv4pvw5ewx6cxy<yyz=Zz{=k{|>k|}?O}!O>k!O!P?`!P!QCl!Q!R!0[!R![!1q![!]!7s!]!^!8V!^!_!8g!_!`!9d!`!a!:[!a!b!<R!b!c%T!c!}2`!}#O!=d#O#P%T#P#Q!=t#Q#R!>U#R#S2`#S#T!>i#T#o!>y#o#p!AZ#p#q!A`#q#r!Av#r#s!BY#s$f%T$f$g%c$g#BY2`#BY#BZ!Bj#BZ$IS2`$IS$I_!Bj$I_$I|2`$I|$I}!ER$I}$JO!ER$JO$JT2`$JT$JU!Bj$JU$KV2`$KV$KW!Bj$KW&FU2`&FU&FV!Bj&FV?HT2`?HT?HU!Bj?HU~2`W%YR$SWO!^%T!_#o%T#p~%T,T%jg$SW'V+{OX%TXY%cYZ%TZ[%c[p%Tpq%cq!^%T!_#o%T#p$f%T$f$g%c$g#BY%T#BY#BZ%c#BZ$IS%T$IS$I_%c$I_$JT%T$JT$JU%c$JU$KV%T$KV$KW%c$KW&FU%T&FU&FV%c&FV?HT%T?HT?HU%c?HU~%T,T'YR$SW'W+{O!^%T!_#o%T#p~%T$T'jS$SW!f#{O!^%T!_!`'v!`#o%T#p~%T$O'}S#a#v$SWO!^%T!_!`(Z!`#o%T#p~%T$O(bR#a#v$SWO!^%T!_#o%T#p~%T'u(rZ$SW]!ROY(kYZ)eZr(krs*rs!^(k!^!_+U!_#O(k#O#P-b#P#o(k#o#p+U#p~(k&r)jV$SWOr)ers*Ps!^)e!^!_*a!_#o)e#o#p*a#p~)e&r*WR#}&j$SWO!^%T!_#o%T#p~%T&j*dROr*ars*ms~*a&j*rO#}&j'u*{R#}&j$SW]!RO!^%T!_#o%T#p~%T'm+ZV]!ROY+UYZ*aZr+Urs+ps#O+U#O#P+w#P~+U'm+wO#}&j]!R'm+zROr+Urs,Ts~+U'm,[U#}&j]!ROY,nZr,nrs-Vs#O,n#O#P-[#P~,n!R,sU]!ROY,nZr,nrs-Vs#O,n#O#P-[#P~,n!R-[O]!R!R-_PO~,n'u-gV$SWOr(krs-|s!^(k!^!_+U!_#o(k#o#p+U#p~(k'u.VZ#}&j$SW]!ROY.xYZ%TZr.xrs/rs!^.x!^!_,n!_#O.x#O#P0S#P#o.x#o#p,n#p~.x!Z/PZ$SW]!ROY.xYZ%TZr.xrs/rs!^.x!^!_,n!_#O.x#O#P0S#P#o.x#o#p,n#p~.x!Z/yR$SW]!RO!^%T!_#o%T#p~%T!Z0XT$SWO!^.x!^!_,n!_#o.x#o#p,n#p~.xy0mZ$SWOt%Ttu1`u!^%T!_!c%T!c!}1`!}#R%T#R#S1`#S#T%T#T#o1`#p$g%T$g~1`y1g]$SW'oqOt%Ttu1`u!Q%T!Q![1`![!^%T!_!c%T!c!}1`!}#R%T#R#S1`#S#T%T#T#o1`#p$g%T$g~1`&i2k_$SW'fp'Y%k#vSOt%Ttu2`u}%T}!O3j!O!Q%T!Q![2`![!^%T!_!c%T!c!}2`!}#R%T#R#S2`#S#T%T#T#o2`#p$g%T$g~2`[3q_$SW#vSOt%Ttu3ju}%T}!O3j!O!Q%T!Q![3j![!^%T!_!c%T!c!}3j!}#R%T#R#S3j#S#T%T#T#o3j#p$g%T$g~3j$O4wS#Y#v$SWO!^%T!_!`5T!`#o%T#p~%T$O5[R$SW#k#vO!^%T!_#o%T#p~%T%r5lU'x%j$SWOv%Tvw6Ow!^%T!_!`5T!`#o%T#p~%T$O6VS$SW#e#vO!^%T!_!`5T!`#o%T#p~%T'u6jZ$SW]!ROY6cYZ7]Zw6cwx*rx!^6c!^!_8T!_#O6c#O#P:T#P#o6c#o#p8T#p~6c&r7bV$SWOw7]wx*Px!^7]!^!_7w!_#o7]#o#p7w#p~7]&j7zROw7wwx*mx~7w'm8YV]!ROY8TYZ7wZw8Twx+px#O8T#O#P8o#P~8T'm8rROw8Twx8{x~8T'm9SU#}&j]!ROY9fZw9fwx-Vx#O9f#O#P9}#P~9f!R9kU]!ROY9fZw9fwx-Vx#O9f#O#P9}#P~9f!R:QPO~9f'u:YV$SWOw6cwx:ox!^6c!^!_8T!_#o6c#o#p8T#p~6c'u:xZ#}&j$SW]!ROY;kYZ%TZw;kwx/rx!^;k!^!_9f!_#O;k#O#P<e#P#o;k#o#p9f#p~;k!Z;rZ$SW]!ROY;kYZ%TZw;kwx/rx!^;k!^!_9f!_#O;k#O#P<e#P#o;k#o#p9f#p~;k!Z<jT$SWO!^;k!^!_9f!_#o;k#o#p9f#p~;k%V=QR!`$}$SWO!^%T!_#o%T#p~%TZ=bR!_R$SWO!^%T!_#o%T#p~%T%R=tU'Z!R#Z#v$SWOz%Tz{>W{!^%T!_!`5T!`#o%T#p~%T$O>_S#W#v$SWO!^%T!_!`5T!`#o%T#p~%T$u>rSi$m$SWO!^%T!_!`5T!`#o%T#p~%T&i?VR}&a$SWO!^%T!_#o%T#p~%T&i?gVr%n$SWO!O%T!O!P?|!P!Q%T!Q![@r![!^%T!_#o%T#p~%Ty@RT$SWO!O%T!O!P@b!P!^%T!_#o%T#p~%Ty@iR|q$SWO!^%T!_#o%T#p~%Ty@yZ$SWjqO!Q%T!Q![@r![!^%T!_!g%T!g!hAl!h#R%T#R#S@r#S#X%T#X#YAl#Y#o%T#p~%TyAqZ$SWO{%T{|Bd|}%T}!OBd!O!Q%T!Q![CO![!^%T!_#R%T#R#SCO#S#o%T#p~%TyBiV$SWO!Q%T!Q![CO![!^%T!_#R%T#R#SCO#S#o%T#p~%TyCVV$SWjqO!Q%T!Q![CO![!^%T!_#R%T#R#SCO#S#o%T#p~%T,TCs`$SW#X#vOYDuYZ%TZzDuz{Jl{!PDu!P!Q!-e!Q!^Du!^!_Fx!_!`!.^!`!a!/]!a!}Du!}#OHq#O#PJQ#P#oDu#o#pFx#p~DuXD|[$SWyPOYDuYZ%TZ!PDu!P!QEr!Q!^Du!^!_Fx!_!}Du!}#OHq#O#PJQ#P#oDu#o#pFx#p~DuXEy_$SWyPO!^%T!_#Z%T#Z#[Er#[#]%T#]#^Er#^#a%T#a#bEr#b#g%T#g#hEr#h#i%T#i#jEr#j#m%T#m#nEr#n#o%T#p~%TPF}VyPOYFxZ!PFx!P!QGd!Q!}Fx!}#OG{#O#PHh#P~FxPGiUyP#Z#[Gd#]#^Gd#a#bGd#g#hGd#i#jGd#m#nGdPHOTOYG{Z#OG{#O#PH_#P#QFx#Q~G{PHbQOYG{Z~G{PHkQOYFxZ~FxXHvY$SWOYHqYZ%TZ!^Hq!^!_G{!_#OHq#O#PIf#P#QDu#Q#oHq#o#pG{#p~HqXIkV$SWOYHqYZ%TZ!^Hq!^!_G{!_#oHq#o#pG{#p~HqXJVV$SWOYDuYZ%TZ!^Du!^!_Fx!_#oDu#o#pFx#p~Du,TJs^$SWyPOYJlYZKoZzJlz{NQ{!PJl!P!Q!,R!Q!^Jl!^!_!!]!_!}Jl!}#O!'|#O#P!+a#P#oJl#o#p!!]#p~Jl,TKtV$SWOzKoz{LZ{!^Ko!^!_M]!_#oKo#o#pM]#p~Ko,TL`X$SWOzKoz{LZ{!PKo!P!QL{!Q!^Ko!^!_M]!_#oKo#o#pM]#p~Ko,TMSR$SWT+{O!^%T!_#o%T#p~%T+{M`ROzM]z{Mi{~M]+{MlTOzM]z{Mi{!PM]!P!QM{!Q~M]+{NQOT+{,TNX^$SWyPOYJlYZKoZzJlz{NQ{!PJl!P!Q! T!Q!^Jl!^!_!!]!_!}Jl!}#O!'|#O#P!+a#P#oJl#o#p!!]#p~Jl,T! ^_$SWT+{yPO!^%T!_#Z%T#Z#[Er#[#]%T#]#^Er#^#a%T#a#bEr#b#g%T#g#hEr#h#i%T#i#jEr#j#m%T#m#nEr#n#o%T#p~%T+{!!bYyPOY!!]YZM]Zz!!]z{!#Q{!P!!]!P!Q!&x!Q!}!!]!}#O!$`#O#P!&f#P~!!]+{!#VYyPOY!!]YZM]Zz!!]z{!#Q{!P!!]!P!Q!#u!Q!}!!]!}#O!$`#O#P!&f#P~!!]+{!#|UT+{yP#Z#[Gd#]#^Gd#a#bGd#g#hGd#i#jGd#m#nGd+{!$cWOY!$`YZM]Zz!$`z{!${{#O!$`#O#P!&S#P#Q!!]#Q~!$`+{!%OYOY!$`YZM]Zz!$`z{!${{!P!$`!P!Q!%n!Q#O!$`#O#P!&S#P#Q!!]#Q~!$`+{!%sTT+{OYG{Z#OG{#O#PH_#P#QFx#Q~G{+{!&VTOY!$`YZM]Zz!$`z{!${{~!$`+{!&iTOY!!]YZM]Zz!!]z{!#Q{~!!]+{!&}_yPOzM]z{Mi{#ZM]#Z#[!&x#[#]M]#]#^!&x#^#aM]#a#b!&x#b#gM]#g#h!&x#h#iM]#i#j!&x#j#mM]#m#n!&x#n~M],T!(R[$SWOY!'|YZKoZz!'|z{!(w{!^!'|!^!_!$`!_#O!'|#O#P!*o#P#QJl#Q#o!'|#o#p!$`#p~!'|,T!(|^$SWOY!'|YZKoZz!'|z{!(w{!P!'|!P!Q!)x!Q!^!'|!^!_!$`!_#O!'|#O#P!*o#P#QJl#Q#o!'|#o#p!$`#p~!'|,T!*PY$SWT+{OYHqYZ%TZ!^Hq!^!_G{!_#OHq#O#PIf#P#QDu#Q#oHq#o#pG{#p~Hq,T!*tX$SWOY!'|YZKoZz!'|z{!(w{!^!'|!^!_!$`!_#o!'|#o#p!$`#p~!'|,T!+fX$SWOYJlYZKoZzJlz{NQ{!^Jl!^!_!!]!_#oJl#o#p!!]#p~Jl,T!,Yc$SWyPOzKoz{LZ{!^Ko!^!_M]!_#ZKo#Z#[!,R#[#]Ko#]#^!,R#^#aKo#a#b!,R#b#gKo#g#h!,R#h#iKo#i#j!,R#j#mKo#m#n!,R#n#oKo#o#pM]#p~Ko,T!-lV$SWS+{OY!-eYZ%TZ!^!-e!^!_!.R!_#o!-e#o#p!.R#p~!-e+{!.WQS+{OY!.RZ~!.R$P!.g[$SW#k#vyPOYDuYZ%TZ!PDu!P!QEr!Q!^Du!^!_Fx!_!}Du!}#OHq#O#PJQ#P#oDu#o#pFx#p~Du]!/f[#sS$SWyPOYDuYZ%TZ!PDu!P!QEr!Q!^Du!^!_Fx!_!}Du!}#OHq#O#PJQ#P#oDu#o#pFx#p~Duy!0cd$SWjqO!O%T!O!P@r!P!Q%T!Q![!1q![!^%T!_!g%T!g!hAl!h#R%T#R#S!1q#S#U%T#U#V!3X#V#X%T#X#YAl#Y#b%T#b#c!2w#c#d!4m#d#l%T#l#m!5{#m#o%T#p~%Ty!1x_$SWjqO!O%T!O!P@r!P!Q%T!Q![!1q![!^%T!_!g%T!g!hAl!h#R%T#R#S!1q#S#X%T#X#YAl#Y#b%T#b#c!2w#c#o%T#p~%Ty!3OR$SWjqO!^%T!_#o%T#p~%Ty!3^W$SWO!Q%T!Q!R!3v!R!S!3v!S!^%T!_#R%T#R#S!3v#S#o%T#p~%Ty!3}Y$SWjqO!Q%T!Q!R!3v!R!S!3v!S!^%T!_#R%T#R#S!3v#S#b%T#b#c!2w#c#o%T#p~%Ty!4rV$SWO!Q%T!Q!Y!5X!Y!^%T!_#R%T#R#S!5X#S#o%T#p~%Ty!5`X$SWjqO!Q%T!Q!Y!5X!Y!^%T!_#R%T#R#S!5X#S#b%T#b#c!2w#c#o%T#p~%Ty!6QZ$SWO!Q%T!Q![!6s![!^%T!_!c%T!c!i!6s!i#R%T#R#S!6s#S#T%T#T#Z!6s#Z#o%T#p~%Ty!6z]$SWjqO!Q%T!Q![!6s![!^%T!_!c%T!c!i!6s!i#R%T#R#S!6s#S#T%T#T#Z!6s#Z#b%T#b#c!2w#c#o%T#p~%T%w!7|R!XV$SW#i%hO!^%T!_#o%T#p~%T!P!8^R^w$SWO!^%T!_#o%T#p~%T+c!8rR'_d!]%Y#t&s'|P!P!Q!8{!^!_!9Q!_!`!9_W!9QO$UW#v!9VP#[#v!_!`!9Y#v!9_O#k#v#v!9dO#]#v%w!9kT!w%o$SWO!^%T!_!`'v!`!a!9z!a#o%T#p~%T$P!:RR#S#w$SWO!^%T!_#o%T#p~%T%w!:gT'^!s#]#v$PS$SWO!^%T!_!`!:v!`!a!;W!a#o%T#p~%T$O!:}R#]#v$SWO!^%T!_#o%T#p~%T$O!;_T#[#v$SWO!^%T!_!`5T!`!a!;n!a#o%T#p~%T$O!;uS#[#v$SWO!^%T!_!`5T!`#o%T#p~%T%w!<YV'p%o$SWO!O%T!O!P!<o!P!^%T!_!a%T!a!b!=P!b#o%T#p~%T$`!<vRs$W$SWO!^%T!_#o%T#p~%T$O!=WS$SW#f#vO!^%T!_!`5T!`#o%T#p~%T&e!=kRu&]$SWO!^%T!_#o%T#p~%TZ!={RzR$SWO!^%T!_#o%T#p~%T$O!>]S#c#v$SWO!^%T!_!`5T!`#o%T#p~%T$P!>pR$SW'c#wO!^%T!_#o%T#p~%T&i!?U_$SW'fp'Y%k#xSOt%Ttu!>yu}%T}!O!@T!O!Q%T!Q![!>y![!^%T!_!c%T!c!}!>y!}#R%T#R#S!>y#S#T%T#T#o!>y#p$g%T$g~!>y[!@[_$SW#xSOt%Ttu!@Tu}%T}!O!@T!O!Q%T!Q![!@T![!^%T!_!c%T!c!}!@T!}#R%T#R#S!@T#S#T%T#T#o!@T#p$g%T$g~!@T~!A`O!P~%r!AgT'w%j$SWO!^%T!_!`5T!`#o%T#p#q!=P#q~%T$u!BPR!O$k$SW'eQO!^%T!_#o%T#p~%TX!BaR!gP$SWO!^%T!_#o%T#p~%T,T!Bwr$SW'V+{'fp'Y%k#vSOX%TXY%cYZ%TZ[%c[p%Tpq%cqt%Ttu2`u}%T}!O3j!O!Q%T!Q![2`![!^%T!_!c%T!c!}2`!}#R%T#R#S2`#S#T%T#T#o2`#p$f%T$f$g%c$g#BY2`#BY#BZ!Bj#BZ$IS2`$IS$I_!Bj$I_$JT2`$JT$JU!Bj$JU$KV2`$KV$KW!Bj$KW&FU2`&FU&FV!Bj&FV?HT2`?HT?HU!Bj?HU~2`,T!E`_$SW'W+{'fp'Y%k#vSOt%Ttu2`u}%T}!O3j!O!Q%T!Q![2`![!^%T!_!c%T!c!}2`!}#R%T#R#S2`#S#T%T#T#o2`#p$g%T$g~2`",
+   tokenizers: [noSemicolon, incdecToken, template, 0, 1, 2, 3, 4, 5, 6, 7, 8, insertSemicolon],
+   topRules: {"Script":[0,6]},
+-  dialects: {jsx: 11282, ts: 11284},
+-  dynamicPrecedences: {"145":1,"172":1},
+-  specialized: [{term: 284, get: (value, stack) => (tsExtends(value, stack) << 1)},{term: 284, get: value => spec_identifier[value] || -1},{term: 296, get: value => spec_word[value] || -1},{term: 59, get: value => spec_LessThan[value] || -1}],
+-  tokenPrec: 11305
++  dialects: {jsx: 11332, ts: 11334},
++  dynamicPrecedences: {"147":1,"174":1},
++  specialized: [{term: 286, get: (value, stack) => (tsExtends(value, stack) << 1)},{term: 286, get: value => spec_identifier[value] || -1},{term: 298, get: value => spec_word[value] || -1},{term: 59, get: value => spec_LessThan[value] || -1}],
++  tokenPrec: 11355
+ })
+diff --git a/node_modules/@lezer/javascript/src/parser.terms.js b/node_modules/@lezer/javascript/src/parser.terms.js
+index fc7710f..49e292f 100644
+--- a/node_modules/@lezer/javascript/src/parser.terms.js
++++ b/node_modules/@lezer/javascript/src/parser.terms.js
+@@ -1,15 +1,15 @@
+ // This file was generated by lezer-generator. You probably shouldn't edit it.
+ export const
+-  noSemi = 275,
++  noSemi = 277,
+   incdec = 1,
+   incdecPrefix = 2,
+-  templateContent = 276,
+-  templateDollarBrace = 277,
+-  templateEnd = 278,
+-  insertSemi = 279,
++  templateContent = 278,
++  templateDollarBrace = 279,
++  templateEnd = 280,
++  insertSemi = 281,
+   TSExtends = 3,
+-  spaces = 281,
+-  newline = 282,
++  spaces = 283,
++  newline = 284,
+   LineComment = 4,
+   BlockComment = 5,
+   Script = 6,
+@@ -61,38 +61,39 @@ export const
+   JSXStartTag = 128,
+   JSXSelfClosingTag = 129,
+   JSXIdentifier = 130,
+-  JSXNamespacedName = 131,
+-  JSXMemberExpression = 132,
+-  JSXAttributeValue = 135,
+-  JSXEndTag = 137,
+-  JSXOpenTag = 138,
+-  JSXFragmentTag = 139,
+-  JSXText = 140,
+-  JSXEscape = 141,
+-  JSXStartCloseTag = 142,
+-  JSXCloseTag = 143,
+-  SequenceExpression = 147,
+-  TypeName = 155,
+-  ParamTypeList = 158,
+-  IndexedType = 160,
+-  Label = 162,
+-  ObjectType = 165,
+-  MethodType = 166,
+-  PropertyType = 167,
+-  IndexSignature = 168,
+-  TypePredicate = 170,
+-  ClassDeclaration = 180,
+-  VariableDeclaration = 184,
+-  TypeAliasDeclaration = 187,
+-  InterfaceDeclaration = 188,
+-  EnumDeclaration = 190,
+-  NamespaceDeclaration = 193,
+-  AmbientDeclaration = 196,
+-  ExportGroup = 204,
+-  ImportDeclaration = 207,
+-  ImportGroup = 208,
+-  ForSpec = 211,
+-  ForInSpec = 212,
+-  ForOfSpec = 213,
++  JSXLowerIdentifier = 132,
++  JSXNamespacedName = 133,
++  JSXMemberExpression = 134,
++  JSXAttributeValue = 137,
++  JSXEndTag = 139,
++  JSXOpenTag = 140,
++  JSXFragmentTag = 141,
++  JSXText = 142,
++  JSXEscape = 143,
++  JSXStartCloseTag = 144,
++  JSXCloseTag = 145,
++  SequenceExpression = 149,
++  TypeName = 157,
++  ParamTypeList = 160,
++  IndexedType = 162,
++  Label = 164,
++  ObjectType = 167,
++  MethodType = 168,
++  PropertyType = 169,
++  IndexSignature = 170,
++  TypePredicate = 172,
++  ClassDeclaration = 182,
++  VariableDeclaration = 186,
++  TypeAliasDeclaration = 189,
++  InterfaceDeclaration = 190,
++  EnumDeclaration = 192,
++  NamespaceDeclaration = 195,
++  AmbientDeclaration = 198,
++  ExportGroup = 206,
++  ImportDeclaration = 209,
++  ImportGroup = 210,
++  ForSpec = 213,
++  ForInSpec = 214,
++  ForOfSpec = 215,
+   Dialect_jsx = 0,
+   Dialect_ts = 1
diff --git a/beta/patches/next+12.3.2-canary.7.patch b/beta/patches/next+12.3.2-canary.7.patch
new file mode 100644
index 000000000..ee8d132de
--- /dev/null
+++ b/beta/patches/next+12.3.2-canary.7.patch
@@ -0,0 +1,22 @@
+diff --git a/node_modules/next/dist/server/render.js b/node_modules/next/dist/server/render.js
+index 3a141de..72a8749 100644
+--- a/node_modules/next/dist/server/render.js
++++ b/node_modules/next/dist/server/render.js
+@@ -752,9 +752,14 @@ async function renderToHTML(req, res, pathname, query, renderOpts) {
+             // Enabling react concurrent rendering mode: __NEXT_REACT_ROOT = true
+             const renderShell = async (EnhancedApp, EnhancedComponent)=>{
+                 const content = renderContent(EnhancedApp, EnhancedComponent);
+-                return await (0, _nodeWebStreamsHelper).renderToInitialStream({
+-                    ReactDOMServer,
+-                    element: content
++                return new Promise((resolve, reject) => {
++                    (0, _nodeWebStreamsHelper).renderToInitialStream({
++                        ReactDOMServer,
++                        element: content,
++                        streamOptions: {
++                            onError: reject
++                        }
++                    }).then(resolve, reject);
+                 });
+             };
+             const createBodyResult = (initialStream, suffix)=>{
diff --git a/beta/patches/next-remote-watch+1.0.0.patch b/beta/patches/next-remote-watch+1.0.0.patch
new file mode 100644
index 000000000..c9ecef84d
--- /dev/null
+++ b/beta/patches/next-remote-watch+1.0.0.patch
@@ -0,0 +1,16 @@
+diff --git a/node_modules/next-remote-watch/bin/next-remote-watch b/node_modules/next-remote-watch/bin/next-remote-watch
+index c055b66..a2f749c 100755
+--- a/node_modules/next-remote-watch/bin/next-remote-watch
++++ b/node_modules/next-remote-watch/bin/next-remote-watch
+@@ -66,7 +66,10 @@ app.prepare().then(() => {
+             }
+           }
+ 
+-          app.server.hotReloader.send('reloadPage')
++          app.server.hotReloader.send({
++            event: 'serverOnlyChanges',
++            pages: ['/[[...markdownPath]]']
++          });
+         }
+       )
+   }
diff --git a/beta/plugins/markdownToHtml.js b/beta/plugins/markdownToHtml.js
new file mode 100644
index 000000000..0d5fe7afb
--- /dev/null
+++ b/beta/plugins/markdownToHtml.js
@@ -0,0 +1,30 @@
+const remark = require('remark');
+const externalLinks = require('remark-external-links'); // Add _target and rel to external links
+const customHeaders = require('./remark-header-custom-ids'); // Custom header id's for i18n
+const images = require('remark-images'); // Improved image syntax
+const unrwapImages = require('remark-unwrap-images'); // Removes <p> wrapper around images
+const smartyPants = require('./remark-smartypants'); // Cleans up typography
+const html = require('remark-html');
+
+module.exports = {
+  remarkPlugins: [
+    externalLinks,
+    customHeaders,
+    images,
+    unrwapImages,
+    smartyPants,
+  ],
+  markdownToHtml,
+};
+
+async function markdownToHtml(markdown) {
+  const result = await remark()
+    .use(externalLinks)
+    .use(customHeaders)
+    .use(images)
+    .use(unrwapImages)
+    .use(smartyPants)
+    .use(html)
+    .process(markdown);
+  return result.toString();
+}
diff --git a/beta/plugins/remark-header-custom-ids.js b/beta/plugins/remark-header-custom-ids.js
new file mode 100644
index 000000000..356de1bf1
--- /dev/null
+++ b/beta/plugins/remark-header-custom-ids.js
@@ -0,0 +1,76 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+/*!
+ * Based on 'gatsby-remark-autolink-headers'
+ * Original Author: Kyle Mathews <mathews.kyle@gmail.com>
+ * Updated by Jared Palmer;
+ * Copyright (c) 2015 Gatsbyjs
+ */
+
+const toString = require('mdast-util-to-string');
+const visit = require('unist-util-visit');
+const toSlug = require('github-slugger').slug;
+
+function patch(context, key, value) {
+  if (!context[key]) {
+    context[key] = value;
+  }
+  return context[key];
+}
+
+const svgIcon = `<svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>`;
+
+module.exports = ({icon = svgIcon, className = `anchor`} = {}) => {
+  return function transformer(tree) {
+    const ids = new Set();
+    visit(tree, 'heading', (node) => {
+      let children = [...node.children];
+      let id;
+      if (children[children.length - 1].type === 'mdxTextExpression') {
+        // # My header {/*my-header*/}
+        id = children.pop().value;
+        const isValidCustomId = id.startsWith('/*') && id.endsWith('*/');
+        if (!isValidCustomId) {
+          throw Error(
+            'Expected header ID to be like: {/*some-header*/}. ' +
+              'Instead, received: ' +
+              id
+          );
+        }
+        id = id.slice(2, id.length - 2);
+        if (id !== toSlug(id)) {
+          throw Error(
+            'Expected header ID to be a valid slug. You specified: {/*' +
+              id +
+              '*/}. Replace it with: {/*' +
+              toSlug(id) +
+              '*/}'
+          );
+        }
+      } else {
+        // # My header
+        id = toSlug(toString(node));
+      }
+
+      if (ids.has(id)) {
+        throw Error(
+          'Cannot have a duplicate header with id "' +
+            id +
+            '" on the page. ' +
+            'Rename the section or give it an explicit unique ID. ' +
+            'For example: #### Arguments {/*setstate-arguments*/}'
+        );
+      }
+      ids.add(id);
+
+      const data = patch(node, 'data', {});
+      patch(data, 'id', id);
+      patch(data, 'htmlAttributes', {});
+      patch(data, 'hProperties', {});
+      patch(data.htmlAttributes, 'id', id);
+      patch(data.hProperties, 'id', id);
+    });
+  };
+};
diff --git a/beta/plugins/remark-smartypants.js b/beta/plugins/remark-smartypants.js
new file mode 100644
index 000000000..7dd1b0c4a
--- /dev/null
+++ b/beta/plugins/remark-smartypants.js
@@ -0,0 +1,21 @@
+const visit = require('unist-util-visit');
+const retext = require('retext');
+const smartypants = require('retext-smartypants');
+
+function check(parent) {
+  if (parent.tagName === 'script') return false;
+  if (parent.tagName === 'style') return false;
+  return true;
+}
+
+module.exports = function (options) {
+  const processor = retext().use(smartypants, options);
+
+  function transformer(tree) {
+    visit(tree, 'text', (node, index, parent) => {
+      if (check(parent)) node.value = String(processor.processSync(node.value));
+    });
+  }
+
+  return transformer;
+};
diff --git a/beta/postcss.config.js b/beta/postcss.config.js
new file mode 100644
index 000000000..427294522
--- /dev/null
+++ b/beta/postcss.config.js
@@ -0,0 +1,20 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+    'postcss-flexbugs-fixes': {},
+    'postcss-preset-env': {
+      autoprefixer: {
+        flexbox: 'no-2009',
+      },
+      stage: 3,
+      features: {
+        'custom-properties': false,
+      },
+    },
+  },
+}
diff --git a/beta/public/external.png b/beta/public/external.png
new file mode 100644
index 000000000..423ec131b
Binary files /dev/null and b/beta/public/external.png differ
diff --git a/beta/public/favicon.ico b/beta/public/favicon.ico
new file mode 100644
index 000000000..38fd8641c
Binary files /dev/null and b/beta/public/favicon.ico differ
diff --git a/beta/public/favicon_dark.ico b/beta/public/favicon_dark.ico
new file mode 100644
index 000000000..9bcfdcd7b
Binary files /dev/null and b/beta/public/favicon_dark.ico differ
diff --git a/beta/public/fonts/Source-Code-Pro-Regular.woff2 b/beta/public/fonts/Source-Code-Pro-Regular.woff2
new file mode 100644
index 000000000..655cd9e81
Binary files /dev/null and b/beta/public/fonts/Source-Code-Pro-Regular.woff2 differ
diff --git a/beta/public/html/single-file-example.html b/beta/public/html/single-file-example.html
new file mode 100644
index 000000000..380a169f5
--- /dev/null
+++ b/beta/public/html/single-file-example.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Hello World</title>
+    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+
+    <!-- Don't use this in production—do this: https://reactjs.org/docs/add-react-to-a-website#add-jsx-to-a-project -->
+    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="text/babel">
+
+      ReactDOM.render(
+        <h1>Hello, world!</h1>,
+        document.getElementById('root')
+      );
+
+    </script>
+    <!--
+      Note: this page is a great way to try React but it's not suitable for production.
+      It slowly compiles JSX with Babel in the browser and uses a large development build of React.
+
+      Read this section for a production-ready setup with JSX:
+      https://reactjs.org/docs/docs/add-react-to-a-website#try-react-with-jsx
+
+      In a larger project, you can use an integrated toolchain that includes JSX instead:
+      https://reactjs.org/docs/start-a-new-react-project
+
+      You can also use React without JSX, in which case you can remove Babel:
+      https://reactjs.org/docs/add-react-to-a-website#add-react-in-one-minute
+    -->
+  </body>
+</html>
diff --git a/beta/public/icons/logo-white.svg b/beta/public/icons/logo-white.svg
new file mode 100644
index 000000000..7ed0e8b05
--- /dev/null
+++ b/beta/public/icons/logo-white.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-11.5 -10.23174 23 20.46348">
+  <title>React Logo</title>
+  <circle cx="0" cy="0" r="2.05" fill="#fff"/>
+  <g stroke="#fff" stroke-width="1" fill="none">
+    <ellipse rx="11" ry="4.2"/>
+    <ellipse rx="11" ry="4.2" transform="rotate(60)"/>
+    <ellipse rx="11" ry="4.2" transform="rotate(120)"/>
+  </g>
+</svg>
diff --git a/beta/public/icons/logo.svg b/beta/public/icons/logo.svg
new file mode 100644
index 000000000..ea77a618d
--- /dev/null
+++ b/beta/public/icons/logo.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-11.5 -10.23174 23 20.46348">
+  <title>React Logo</title>
+  <circle cx="0" cy="0" r="2.05" fill="#61dafb"/>
+  <g stroke="#61dafb" stroke-width="1" fill="none">
+    <ellipse rx="11" ry="4.2"/>
+    <ellipse rx="11" ry="4.2" transform="rotate(60)"/>
+    <ellipse rx="11" ry="4.2" transform="rotate(120)"/>
+  </g>
+</svg>
diff --git a/beta/public/images/blog/animal-sounds.jpg b/beta/public/images/blog/animal-sounds.jpg
new file mode 100644
index 000000000..abe6d815e
Binary files /dev/null and b/beta/public/images/blog/animal-sounds.jpg differ
diff --git a/beta/public/images/blog/chatapp.png b/beta/public/images/blog/chatapp.png
new file mode 100644
index 000000000..de8c09ff3
Binary files /dev/null and b/beta/public/images/blog/chatapp.png differ
diff --git a/beta/public/images/blog/cra-better-output.png b/beta/public/images/blog/cra-better-output.png
new file mode 100644
index 000000000..44ed320ff
Binary files /dev/null and b/beta/public/images/blog/cra-better-output.png differ
diff --git a/beta/public/images/blog/cra-dynamic-import.gif b/beta/public/images/blog/cra-dynamic-import.gif
new file mode 100644
index 000000000..88db2896f
Binary files /dev/null and b/beta/public/images/blog/cra-dynamic-import.gif differ
diff --git a/beta/public/images/blog/cra-jest-search.gif b/beta/public/images/blog/cra-jest-search.gif
new file mode 100644
index 000000000..ed6819d89
Binary files /dev/null and b/beta/public/images/blog/cra-jest-search.gif differ
diff --git a/beta/public/images/blog/cra-pwa.png b/beta/public/images/blog/cra-pwa.png
new file mode 100644
index 000000000..9862ae565
Binary files /dev/null and b/beta/public/images/blog/cra-pwa.png differ
diff --git a/beta/public/images/blog/cra-runtime-error.gif b/beta/public/images/blog/cra-runtime-error.gif
new file mode 100644
index 000000000..7b4405f62
Binary files /dev/null and b/beta/public/images/blog/cra-runtime-error.gif differ
diff --git a/beta/public/images/blog/cra-update-exports.gif b/beta/public/images/blog/cra-update-exports.gif
new file mode 100644
index 000000000..2820d63df
Binary files /dev/null and b/beta/public/images/blog/cra-update-exports.gif differ
diff --git a/beta/public/images/blog/create-apps-with-no-configuration/compiled-successfully.png b/beta/public/images/blog/create-apps-with-no-configuration/compiled-successfully.png
new file mode 100644
index 000000000..223f5abf2
Binary files /dev/null and b/beta/public/images/blog/create-apps-with-no-configuration/compiled-successfully.png differ
diff --git a/beta/public/images/blog/create-apps-with-no-configuration/compiled-with-warnings.png b/beta/public/images/blog/create-apps-with-no-configuration/compiled-with-warnings.png
new file mode 100644
index 000000000..20aa25e3c
Binary files /dev/null and b/beta/public/images/blog/create-apps-with-no-configuration/compiled-with-warnings.png differ
diff --git a/beta/public/images/blog/create-apps-with-no-configuration/created-folder.png b/beta/public/images/blog/create-apps-with-no-configuration/created-folder.png
new file mode 100644
index 000000000..44aff6dcd
Binary files /dev/null and b/beta/public/images/blog/create-apps-with-no-configuration/created-folder.png differ
diff --git a/beta/public/images/blog/create-apps-with-no-configuration/failed-to-compile.png b/beta/public/images/blog/create-apps-with-no-configuration/failed-to-compile.png
new file mode 100644
index 000000000..a72b5fb2e
Binary files /dev/null and b/beta/public/images/blog/create-apps-with-no-configuration/failed-to-compile.png differ
diff --git a/beta/public/images/blog/create-apps-with-no-configuration/npm-run-build.png b/beta/public/images/blog/create-apps-with-no-configuration/npm-run-build.png
new file mode 100644
index 000000000..a7b931e12
Binary files /dev/null and b/beta/public/images/blog/create-apps-with-no-configuration/npm-run-build.png differ
diff --git a/beta/public/images/blog/devtools-component-filters.gif b/beta/public/images/blog/devtools-component-filters.gif
new file mode 100644
index 000000000..287c66757
Binary files /dev/null and b/beta/public/images/blog/devtools-component-filters.gif differ
diff --git a/beta/public/images/blog/devtools-full.gif b/beta/public/images/blog/devtools-full.gif
new file mode 100644
index 000000000..fd7ed9493
Binary files /dev/null and b/beta/public/images/blog/devtools-full.gif differ
diff --git a/beta/public/images/blog/devtools-highlight-updates.png b/beta/public/images/blog/devtools-highlight-updates.png
new file mode 100644
index 000000000..780bcf2ef
Binary files /dev/null and b/beta/public/images/blog/devtools-highlight-updates.png differ
diff --git a/beta/public/images/blog/devtools-search.gif b/beta/public/images/blog/devtools-search.gif
new file mode 100644
index 000000000..22d80051d
Binary files /dev/null and b/beta/public/images/blog/devtools-search.gif differ
diff --git a/beta/public/images/blog/devtools-side-pane.gif b/beta/public/images/blog/devtools-side-pane.gif
new file mode 100644
index 000000000..381e3554e
Binary files /dev/null and b/beta/public/images/blog/devtools-side-pane.gif differ
diff --git a/beta/public/images/blog/devtools-tree-view.png b/beta/public/images/blog/devtools-tree-view.png
new file mode 100644
index 000000000..854a39f8f
Binary files /dev/null and b/beta/public/images/blog/devtools-tree-view.png differ
diff --git a/beta/public/images/blog/devtools-v4-screenshot.png b/beta/public/images/blog/devtools-v4-screenshot.png
new file mode 100644
index 000000000..83a67d548
Binary files /dev/null and b/beta/public/images/blog/devtools-v4-screenshot.png differ
diff --git a/beta/public/images/blog/dog-tutorial.png b/beta/public/images/blog/dog-tutorial.png
new file mode 100644
index 000000000..72f8b4341
Binary files /dev/null and b/beta/public/images/blog/dog-tutorial.png differ
diff --git a/beta/public/images/blog/first-look.png b/beta/public/images/blog/first-look.png
new file mode 100644
index 000000000..d36aa1f35
Binary files /dev/null and b/beta/public/images/blog/first-look.png differ
diff --git a/beta/public/images/blog/flux-chart.png b/beta/public/images/blog/flux-chart.png
new file mode 100644
index 000000000..fbfdf94ea
Binary files /dev/null and b/beta/public/images/blog/flux-chart.png differ
diff --git a/beta/public/images/blog/flux-diagram.png b/beta/public/images/blog/flux-diagram.png
new file mode 100644
index 000000000..69cf64e0b
Binary files /dev/null and b/beta/public/images/blog/flux-diagram.png differ
diff --git a/beta/public/images/blog/genesis_skeleton.png b/beta/public/images/blog/genesis_skeleton.png
new file mode 100644
index 000000000..4b7c51e29
Binary files /dev/null and b/beta/public/images/blog/genesis_skeleton.png differ
diff --git a/beta/public/images/blog/gpu-cursor-move.gif b/beta/public/images/blog/gpu-cursor-move.gif
new file mode 100644
index 000000000..b3a621f78
Binary files /dev/null and b/beta/public/images/blog/gpu-cursor-move.gif differ
diff --git a/beta/public/images/blog/guess_filter.jpg b/beta/public/images/blog/guess_filter.jpg
new file mode 100644
index 000000000..1983df1c8
Binary files /dev/null and b/beta/public/images/blog/guess_filter.jpg differ
diff --git a/beta/public/images/blog/hacker-news-react-native.png b/beta/public/images/blog/hacker-news-react-native.png
new file mode 100644
index 000000000..a65679aba
Binary files /dev/null and b/beta/public/images/blog/hacker-news-react-native.png differ
diff --git a/beta/public/images/blog/highlight-updates-example.gif b/beta/public/images/blog/highlight-updates-example.gif
new file mode 100644
index 000000000..ab0c87d0c
Binary files /dev/null and b/beta/public/images/blog/highlight-updates-example.gif differ
diff --git a/beta/public/images/blog/introducing-the-react-profiler/commit-selector.png b/beta/public/images/blog/introducing-the-react-profiler/commit-selector.png
new file mode 100644
index 000000000..9c027444d
Binary files /dev/null and b/beta/public/images/blog/introducing-the-react-profiler/commit-selector.png differ
diff --git a/beta/public/images/blog/introducing-the-react-profiler/component-chart.png b/beta/public/images/blog/introducing-the-react-profiler/component-chart.png
new file mode 100644
index 000000000..3a3615db2
Binary files /dev/null and b/beta/public/images/blog/introducing-the-react-profiler/component-chart.png differ
diff --git a/beta/public/images/blog/introducing-the-react-profiler/devtools-profiler-tab.png b/beta/public/images/blog/introducing-the-react-profiler/devtools-profiler-tab.png
new file mode 100644
index 000000000..eabb3e500
Binary files /dev/null and b/beta/public/images/blog/introducing-the-react-profiler/devtools-profiler-tab.png differ
diff --git a/beta/public/images/blog/introducing-the-react-profiler/filtering-commits.gif b/beta/public/images/blog/introducing-the-react-profiler/filtering-commits.gif
new file mode 100644
index 000000000..1d73258e3
Binary files /dev/null and b/beta/public/images/blog/introducing-the-react-profiler/filtering-commits.gif differ
diff --git a/beta/public/images/blog/introducing-the-react-profiler/flame-chart.png b/beta/public/images/blog/introducing-the-react-profiler/flame-chart.png
new file mode 100644
index 000000000..80840b55c
Binary files /dev/null and b/beta/public/images/blog/introducing-the-react-profiler/flame-chart.png differ
diff --git a/beta/public/images/blog/introducing-the-react-profiler/interactions-for-commit.png b/beta/public/images/blog/introducing-the-react-profiler/interactions-for-commit.png
new file mode 100644
index 000000000..8f1a14c61
Binary files /dev/null and b/beta/public/images/blog/introducing-the-react-profiler/interactions-for-commit.png differ
diff --git a/beta/public/images/blog/introducing-the-react-profiler/interactions.png b/beta/public/images/blog/introducing-the-react-profiler/interactions.png
new file mode 100644
index 000000000..5683ac94a
Binary files /dev/null and b/beta/public/images/blog/introducing-the-react-profiler/interactions.png differ
diff --git a/beta/public/images/blog/introducing-the-react-profiler/navigate-between-interactions-and-commits.gif b/beta/public/images/blog/introducing-the-react-profiler/navigate-between-interactions-and-commits.gif
new file mode 100644
index 000000000..e500459c3
Binary files /dev/null and b/beta/public/images/blog/introducing-the-react-profiler/navigate-between-interactions-and-commits.gif differ
diff --git a/beta/public/images/blog/introducing-the-react-profiler/no-interactions.png b/beta/public/images/blog/introducing-the-react-profiler/no-interactions.png
new file mode 100644
index 000000000..d70199fc7
Binary files /dev/null and b/beta/public/images/blog/introducing-the-react-profiler/no-interactions.png differ
diff --git a/beta/public/images/blog/introducing-the-react-profiler/no-profiler-data-multi-root.png b/beta/public/images/blog/introducing-the-react-profiler/no-profiler-data-multi-root.png
new file mode 100644
index 000000000..e56fd4128
Binary files /dev/null and b/beta/public/images/blog/introducing-the-react-profiler/no-profiler-data-multi-root.png differ
diff --git a/beta/public/images/blog/introducing-the-react-profiler/no-render-times-for-selected-component.png b/beta/public/images/blog/introducing-the-react-profiler/no-render-times-for-selected-component.png
new file mode 100644
index 000000000..f77b42f85
Binary files /dev/null and b/beta/public/images/blog/introducing-the-react-profiler/no-render-times-for-selected-component.png differ
diff --git a/beta/public/images/blog/introducing-the-react-profiler/no-timing-data-for-commit.png b/beta/public/images/blog/introducing-the-react-profiler/no-timing-data-for-commit.png
new file mode 100644
index 000000000..84a4dcac2
Binary files /dev/null and b/beta/public/images/blog/introducing-the-react-profiler/no-timing-data-for-commit.png differ
diff --git a/beta/public/images/blog/introducing-the-react-profiler/props-and-state.gif b/beta/public/images/blog/introducing-the-react-profiler/props-and-state.gif
new file mode 100644
index 000000000..b0b05b127
Binary files /dev/null and b/beta/public/images/blog/introducing-the-react-profiler/props-and-state.gif differ
diff --git a/beta/public/images/blog/introducing-the-react-profiler/ranked-chart.png b/beta/public/images/blog/introducing-the-react-profiler/ranked-chart.png
new file mode 100644
index 000000000..01246f5e5
Binary files /dev/null and b/beta/public/images/blog/introducing-the-react-profiler/ranked-chart.png differ
diff --git a/beta/public/images/blog/introducing-the-react-profiler/see-all-commits-for-a-fiber.gif b/beta/public/images/blog/introducing-the-react-profiler/see-all-commits-for-a-fiber.gif
new file mode 100644
index 000000000..dac21e249
Binary files /dev/null and b/beta/public/images/blog/introducing-the-react-profiler/see-all-commits-for-a-fiber.gif differ
diff --git a/beta/public/images/blog/introducing-the-react-profiler/see-which-props-changed.gif b/beta/public/images/blog/introducing-the-react-profiler/see-which-props-changed.gif
new file mode 100644
index 000000000..ae965be9b
Binary files /dev/null and b/beta/public/images/blog/introducing-the-react-profiler/see-which-props-changed.gif differ
diff --git a/beta/public/images/blog/introducing-the-react-profiler/select-a-root-to-view-profiling-data.gif b/beta/public/images/blog/introducing-the-react-profiler/select-a-root-to-view-profiling-data.gif
new file mode 100644
index 000000000..b53f31025
Binary files /dev/null and b/beta/public/images/blog/introducing-the-react-profiler/select-a-root-to-view-profiling-data.gif differ
diff --git a/beta/public/images/blog/introducing-the-react-profiler/start-profiling.png b/beta/public/images/blog/introducing-the-react-profiler/start-profiling.png
new file mode 100644
index 000000000..7256474c0
Binary files /dev/null and b/beta/public/images/blog/introducing-the-react-profiler/start-profiling.png differ
diff --git a/beta/public/images/blog/introducing-the-react-profiler/stop-profiling.png b/beta/public/images/blog/introducing-the-react-profiler/stop-profiling.png
new file mode 100644
index 000000000..4ef27f333
Binary files /dev/null and b/beta/public/images/blog/introducing-the-react-profiler/stop-profiling.png differ
diff --git a/beta/public/images/blog/introducing-the-react-profiler/zoom-in-and-out.gif b/beta/public/images/blog/introducing-the-react-profiler/zoom-in-and-out.gif
new file mode 100644
index 000000000..3a8be2c9b
Binary files /dev/null and b/beta/public/images/blog/introducing-the-react-profiler/zoom-in-and-out.gif differ
diff --git a/beta/public/images/blog/jsx-compiler.png b/beta/public/images/blog/jsx-compiler.png
new file mode 100644
index 000000000..9b5e169c0
Binary files /dev/null and b/beta/public/images/blog/jsx-compiler.png differ
diff --git a/beta/public/images/blog/kendoui.png b/beta/public/images/blog/kendoui.png
new file mode 100644
index 000000000..8b18bf438
Binary files /dev/null and b/beta/public/images/blog/kendoui.png differ
diff --git a/beta/public/images/blog/khan-academy-editor.png b/beta/public/images/blog/khan-academy-editor.png
new file mode 100644
index 000000000..f0413939d
Binary files /dev/null and b/beta/public/images/blog/khan-academy-editor.png differ
diff --git a/beta/public/images/blog/landoflisp.png b/beta/public/images/blog/landoflisp.png
new file mode 100644
index 000000000..42bad2d4b
Binary files /dev/null and b/beta/public/images/blog/landoflisp.png differ
diff --git a/beta/public/images/blog/lights-out.png b/beta/public/images/blog/lights-out.png
new file mode 100644
index 000000000..78c545e7e
Binary files /dev/null and b/beta/public/images/blog/lights-out.png differ
diff --git a/beta/public/images/blog/makona-editor.png b/beta/public/images/blog/makona-editor.png
new file mode 100644
index 000000000..4fc4ece99
Binary files /dev/null and b/beta/public/images/blog/makona-editor.png differ
diff --git a/beta/public/images/blog/markdown_refactor.png b/beta/public/images/blog/markdown_refactor.png
new file mode 100644
index 000000000..b81679541
Binary files /dev/null and b/beta/public/images/blog/markdown_refactor.png differ
diff --git a/beta/public/images/blog/modus-create.gif b/beta/public/images/blog/modus-create.gif
new file mode 100644
index 000000000..194252ad1
Binary files /dev/null and b/beta/public/images/blog/modus-create.gif differ
diff --git a/beta/public/images/blog/monkeys.gif b/beta/public/images/blog/monkeys.gif
new file mode 100644
index 000000000..3da6185ce
Binary files /dev/null and b/beta/public/images/blog/monkeys.gif differ
diff --git a/beta/public/images/blog/ngreact.png b/beta/public/images/blog/ngreact.png
new file mode 100644
index 000000000..6ce7e3418
Binary files /dev/null and b/beta/public/images/blog/ngreact.png differ
diff --git a/beta/public/images/blog/om-backbone.png b/beta/public/images/blog/om-backbone.png
new file mode 100644
index 000000000..df411b280
Binary files /dev/null and b/beta/public/images/blog/om-backbone.png differ
diff --git a/beta/public/images/blog/parse-react.jpg b/beta/public/images/blog/parse-react.jpg
new file mode 100644
index 000000000..15e45d2ae
Binary files /dev/null and b/beta/public/images/blog/parse-react.jpg differ
diff --git a/beta/public/images/blog/polarr.jpg b/beta/public/images/blog/polarr.jpg
new file mode 100644
index 000000000..1cfb3cc90
Binary files /dev/null and b/beta/public/images/blog/polarr.jpg differ
diff --git a/beta/public/images/blog/propeller-logo.png b/beta/public/images/blog/propeller-logo.png
new file mode 100644
index 000000000..81cfaa181
Binary files /dev/null and b/beta/public/images/blog/propeller-logo.png differ
diff --git a/beta/public/images/blog/property-finder.png b/beta/public/images/blog/property-finder.png
new file mode 100644
index 000000000..709448b4f
Binary files /dev/null and b/beta/public/images/blog/property-finder.png differ
diff --git a/beta/public/images/blog/quiztime.png b/beta/public/images/blog/quiztime.png
new file mode 100644
index 000000000..7021036e6
Binary files /dev/null and b/beta/public/images/blog/quiztime.png differ
diff --git a/beta/public/images/blog/react-50k-mock-full.jpg b/beta/public/images/blog/react-50k-mock-full.jpg
new file mode 100644
index 000000000..1ebac0063
Binary files /dev/null and b/beta/public/images/blog/react-50k-mock-full.jpg differ
diff --git a/beta/public/images/blog/react-50k-mock.jpg b/beta/public/images/blog/react-50k-mock.jpg
new file mode 100644
index 000000000..bc2de61d4
Binary files /dev/null and b/beta/public/images/blog/react-50k-mock.jpg differ
diff --git a/beta/public/images/blog/react-50k-tshirt.jpg b/beta/public/images/blog/react-50k-tshirt.jpg
new file mode 100644
index 000000000..c96b44ca5
Binary files /dev/null and b/beta/public/images/blog/react-50k-tshirt.jpg differ
diff --git a/beta/public/images/blog/react-browserify-gulp.jpg b/beta/public/images/blog/react-browserify-gulp.jpg
new file mode 100644
index 000000000..d4389d6e9
Binary files /dev/null and b/beta/public/images/blog/react-browserify-gulp.jpg differ
diff --git a/beta/public/images/blog/react-dev-tools.jpg b/beta/public/images/blog/react-dev-tools.jpg
new file mode 100644
index 000000000..7eef44629
Binary files /dev/null and b/beta/public/images/blog/react-dev-tools.jpg differ
diff --git a/beta/public/images/blog/react-diff-tree.png b/beta/public/images/blog/react-diff-tree.png
new file mode 100644
index 000000000..9935e4ae1
Binary files /dev/null and b/beta/public/images/blog/react-diff-tree.png differ
diff --git a/beta/public/images/blog/react-draggable.png b/beta/public/images/blog/react-draggable.png
new file mode 100644
index 000000000..c0cb61f16
Binary files /dev/null and b/beta/public/images/blog/react-draggable.png differ
diff --git a/beta/public/images/blog/react-hackathon.jpg b/beta/public/images/blog/react-hackathon.jpg
new file mode 100644
index 000000000..2537d9865
Binary files /dev/null and b/beta/public/images/blog/react-hackathon.jpg differ
diff --git a/beta/public/images/blog/react-page.png b/beta/public/images/blog/react-page.png
new file mode 100644
index 000000000..3249fb370
Binary files /dev/null and b/beta/public/images/blog/react-page.png differ
diff --git a/beta/public/images/blog/react-perf-chrome-timeline.png b/beta/public/images/blog/react-perf-chrome-timeline.png
new file mode 100644
index 000000000..e9db8acfb
Binary files /dev/null and b/beta/public/images/blog/react-perf-chrome-timeline.png differ
diff --git a/beta/public/images/blog/react-php.png b/beta/public/images/blog/react-php.png
new file mode 100644
index 000000000..cb7e69abc
Binary files /dev/null and b/beta/public/images/blog/react-php.png differ
diff --git a/beta/public/images/blog/react-svg-fbp.png b/beta/public/images/blog/react-svg-fbp.png
new file mode 100644
index 000000000..ef89babad
Binary files /dev/null and b/beta/public/images/blog/react-svg-fbp.png differ
diff --git a/beta/public/images/blog/react-v16.13.0/hydration-warning-after.png b/beta/public/images/blog/react-v16.13.0/hydration-warning-after.png
new file mode 100644
index 000000000..92b6c9919
Binary files /dev/null and b/beta/public/images/blog/react-v16.13.0/hydration-warning-after.png differ
diff --git a/beta/public/images/blog/react-v16.13.0/hydration-warning-before.png b/beta/public/images/blog/react-v16.13.0/hydration-warning-before.png
new file mode 100644
index 000000000..381ab8677
Binary files /dev/null and b/beta/public/images/blog/react-v16.13.0/hydration-warning-before.png differ
diff --git a/beta/public/images/blog/react-v16.9.0/codemod.gif b/beta/public/images/blog/react-v16.9.0/codemod.gif
new file mode 100644
index 000000000..955b30fdc
Binary files /dev/null and b/beta/public/images/blog/react-v16.9.0/codemod.gif differ
diff --git a/beta/public/images/blog/react-v16.9.0/cwm-warning.png b/beta/public/images/blog/react-v16.9.0/cwm-warning.png
new file mode 100644
index 000000000..3ee69d748
Binary files /dev/null and b/beta/public/images/blog/react-v16.9.0/cwm-warning.png differ
diff --git a/beta/public/images/blog/react-v17-rc/react_17_delegation.png b/beta/public/images/blog/react-v17-rc/react_17_delegation.png
new file mode 100644
index 000000000..c8b23c0d6
Binary files /dev/null and b/beta/public/images/blog/react-v17-rc/react_17_delegation.png differ
diff --git a/beta/public/images/blog/reactive-bookmarklet.png b/beta/public/images/blog/reactive-bookmarklet.png
new file mode 100644
index 000000000..25351e717
Binary files /dev/null and b/beta/public/images/blog/reactive-bookmarklet.png differ
diff --git a/beta/public/images/blog/reflux-flux.png b/beta/public/images/blog/reflux-flux.png
new file mode 100644
index 000000000..dad38c7d1
Binary files /dev/null and b/beta/public/images/blog/reflux-flux.png differ
diff --git a/beta/public/images/blog/relay-components/relay-architecture.png b/beta/public/images/blog/relay-components/relay-architecture.png
new file mode 100644
index 000000000..0cfbff0d8
Binary files /dev/null and b/beta/public/images/blog/relay-components/relay-architecture.png differ
diff --git a/beta/public/images/blog/relay-components/relay-containers-data-flow.png b/beta/public/images/blog/relay-components/relay-containers-data-flow.png
new file mode 100644
index 000000000..2f062dd65
Binary files /dev/null and b/beta/public/images/blog/relay-components/relay-containers-data-flow.png differ
diff --git a/beta/public/images/blog/relay-components/relay-containers.png b/beta/public/images/blog/relay-components/relay-containers.png
new file mode 100644
index 000000000..be7dee719
Binary files /dev/null and b/beta/public/images/blog/relay-components/relay-containers.png differ
diff --git a/beta/public/images/blog/relay-components/sample-newsfeed.png b/beta/public/images/blog/relay-components/sample-newsfeed.png
new file mode 100644
index 000000000..0e7f5b5de
Binary files /dev/null and b/beta/public/images/blog/relay-components/sample-newsfeed.png differ
diff --git a/beta/public/images/blog/relay-visual-architecture-tour.png b/beta/public/images/blog/relay-visual-architecture-tour.png
new file mode 100644
index 000000000..b35c4978f
Binary files /dev/null and b/beta/public/images/blog/relay-visual-architecture-tour.png differ
diff --git a/beta/public/images/blog/release-script-build-confirmation.png b/beta/public/images/blog/release-script-build-confirmation.png
new file mode 100644
index 000000000..02026d172
Binary files /dev/null and b/beta/public/images/blog/release-script-build-confirmation.png differ
diff --git a/beta/public/images/blog/release-script-build-overview.png b/beta/public/images/blog/release-script-build-overview.png
new file mode 100644
index 000000000..d726be464
Binary files /dev/null and b/beta/public/images/blog/release-script-build-overview.png differ
diff --git a/beta/public/images/blog/release-script-publish-confirmation.png b/beta/public/images/blog/release-script-publish-confirmation.png
new file mode 100644
index 000000000..e05e64830
Binary files /dev/null and b/beta/public/images/blog/release-script-publish-confirmation.png differ
diff --git a/beta/public/images/blog/resistance-calculator.png b/beta/public/images/blog/resistance-calculator.png
new file mode 100644
index 000000000..16e8b3536
Binary files /dev/null and b/beta/public/images/blog/resistance-calculator.png differ
diff --git a/beta/public/images/blog/skills-matter.png b/beta/public/images/blog/skills-matter.png
new file mode 100644
index 000000000..4a4858c3d
Binary files /dev/null and b/beta/public/images/blog/skills-matter.png differ
diff --git a/beta/public/images/blog/snake.png b/beta/public/images/blog/snake.png
new file mode 100644
index 000000000..96d72b38a
Binary files /dev/null and b/beta/public/images/blog/snake.png differ
diff --git a/beta/public/images/blog/steve_reverse.gif b/beta/public/images/blog/steve_reverse.gif
new file mode 100644
index 000000000..a442fbbd9
Binary files /dev/null and b/beta/public/images/blog/steve_reverse.gif differ
diff --git a/beta/public/images/blog/strict-mode-unsafe-lifecycles-warning.png b/beta/public/images/blog/strict-mode-unsafe-lifecycles-warning.png
new file mode 100644
index 000000000..fbdeccde6
Binary files /dev/null and b/beta/public/images/blog/strict-mode-unsafe-lifecycles-warning.png differ
diff --git a/beta/public/images/blog/sweet-jsx.png b/beta/public/images/blog/sweet-jsx.png
new file mode 100644
index 000000000..f20aeede4
Binary files /dev/null and b/beta/public/images/blog/sweet-jsx.png differ
diff --git a/beta/public/images/blog/tcomb-react-native.png b/beta/public/images/blog/tcomb-react-native.png
new file mode 100644
index 000000000..98120c758
Binary files /dev/null and b/beta/public/images/blog/tcomb-react-native.png differ
diff --git a/beta/public/images/blog/thinking-in-react-components.png b/beta/public/images/blog/thinking-in-react-components.png
new file mode 100644
index 000000000..c71a86bcb
Binary files /dev/null and b/beta/public/images/blog/thinking-in-react-components.png differ
diff --git a/beta/public/images/blog/thinking-in-react-mock.png b/beta/public/images/blog/thinking-in-react-mock.png
new file mode 100644
index 000000000..78bd00a4a
Binary files /dev/null and b/beta/public/images/blog/thinking-in-react-mock.png differ
diff --git a/beta/public/images/blog/todomvc.png b/beta/public/images/blog/todomvc.png
new file mode 100644
index 000000000..ee78eb1cd
Binary files /dev/null and b/beta/public/images/blog/todomvc.png differ
diff --git a/beta/public/images/blog/turboreact.png b/beta/public/images/blog/turboreact.png
new file mode 100644
index 000000000..e8ef8cd3a
Binary files /dev/null and b/beta/public/images/blog/turboreact.png differ
diff --git a/beta/public/images/blog/tutsplus.png b/beta/public/images/blog/tutsplus.png
new file mode 100644
index 000000000..771653086
Binary files /dev/null and b/beta/public/images/blog/tutsplus.png differ
diff --git a/beta/public/images/blog/unite.png b/beta/public/images/blog/unite.png
new file mode 100644
index 000000000..ab45a5355
Binary files /dev/null and b/beta/public/images/blog/unite.png differ
diff --git a/beta/public/images/blog/versioning-1.png b/beta/public/images/blog/versioning-1.png
new file mode 100644
index 000000000..c13f98fd1
Binary files /dev/null and b/beta/public/images/blog/versioning-1.png differ
diff --git a/beta/public/images/blog/versioning-2.png b/beta/public/images/blog/versioning-2.png
new file mode 100644
index 000000000..39de2a010
Binary files /dev/null and b/beta/public/images/blog/versioning-2.png differ
diff --git a/beta/public/images/blog/versioning-3.png b/beta/public/images/blog/versioning-3.png
new file mode 100644
index 000000000..1824e89a9
Binary files /dev/null and b/beta/public/images/blog/versioning-3.png differ
diff --git a/beta/public/images/blog/versioning-4.png b/beta/public/images/blog/versioning-4.png
new file mode 100644
index 000000000..13ba32e39
Binary files /dev/null and b/beta/public/images/blog/versioning-4.png differ
diff --git a/beta/public/images/blog/versioning-5.png b/beta/public/images/blog/versioning-5.png
new file mode 100644
index 000000000..542a3926b
Binary files /dev/null and b/beta/public/images/blog/versioning-5.png differ
diff --git a/beta/public/images/blog/versioning-6.png b/beta/public/images/blog/versioning-6.png
new file mode 100644
index 000000000..e82bc7136
Binary files /dev/null and b/beta/public/images/blog/versioning-6.png differ
diff --git a/beta/public/images/blog/versioning-poll.png b/beta/public/images/blog/versioning-poll.png
new file mode 100644
index 000000000..8b3e18d93
Binary files /dev/null and b/beta/public/images/blog/versioning-poll.png differ
diff --git a/beta/public/images/blog/warn-legacy-context-in-strict-mode.png b/beta/public/images/blog/warn-legacy-context-in-strict-mode.png
new file mode 100644
index 000000000..e061325ac
Binary files /dev/null and b/beta/public/images/blog/warn-legacy-context-in-strict-mode.png differ
diff --git a/beta/public/images/blog/weather.png b/beta/public/images/blog/weather.png
new file mode 100644
index 000000000..90c5e6fea
Binary files /dev/null and b/beta/public/images/blog/weather.png differ
diff --git a/beta/public/images/blog/wolfenstein_react.png b/beta/public/images/blog/wolfenstein_react.png
new file mode 100644
index 000000000..98241b864
Binary files /dev/null and b/beta/public/images/blog/wolfenstein_react.png differ
diff --git a/beta/public/images/blog/xoxo2013.png b/beta/public/images/blog/xoxo2013.png
new file mode 100644
index 000000000..d35989095
Binary files /dev/null and b/beta/public/images/blog/xoxo2013.png differ
diff --git a/beta/public/images/blog/xreact.png b/beta/public/images/blog/xreact.png
new file mode 100644
index 000000000..ba23489d5
Binary files /dev/null and b/beta/public/images/blog/xreact.png differ
diff --git a/beta/public/images/docs/blur-popover-close.gif b/beta/public/images/docs/blur-popover-close.gif
new file mode 100644
index 000000000..fefc6b8a4
Binary files /dev/null and b/beta/public/images/docs/blur-popover-close.gif differ
diff --git a/beta/public/images/docs/cdn-cors-header.png b/beta/public/images/docs/cdn-cors-header.png
new file mode 100644
index 000000000..31b047cbd
Binary files /dev/null and b/beta/public/images/docs/cdn-cors-header.png differ
diff --git a/beta/public/images/docs/cm-steps-simple.png b/beta/public/images/docs/cm-steps-simple.png
new file mode 100644
index 000000000..e5683f9e6
Binary files /dev/null and b/beta/public/images/docs/cm-steps-simple.png differ
diff --git a/beta/public/images/docs/codewinds-004.png b/beta/public/images/docs/codewinds-004.png
new file mode 100644
index 000000000..6c4bc997f
Binary files /dev/null and b/beta/public/images/docs/codewinds-004.png differ
diff --git a/beta/public/images/docs/devtools-dev.png b/beta/public/images/docs/devtools-dev.png
new file mode 100644
index 000000000..5347b4b8d
Binary files /dev/null and b/beta/public/images/docs/devtools-dev.png differ
diff --git a/beta/public/images/docs/devtools-prod.png b/beta/public/images/docs/devtools-prod.png
new file mode 100644
index 000000000..4e200fb48
Binary files /dev/null and b/beta/public/images/docs/devtools-prod.png differ
diff --git a/beta/public/images/docs/diagrams/passing_data_context_close.dark.png b/beta/public/images/docs/diagrams/passing_data_context_close.dark.png
new file mode 100644
index 000000000..59045299d
Binary files /dev/null and b/beta/public/images/docs/diagrams/passing_data_context_close.dark.png differ
diff --git a/beta/public/images/docs/diagrams/passing_data_context_close.png b/beta/public/images/docs/diagrams/passing_data_context_close.png
new file mode 100644
index 000000000..4591aacce
Binary files /dev/null and b/beta/public/images/docs/diagrams/passing_data_context_close.png differ
diff --git a/beta/public/images/docs/diagrams/passing_data_context_far.dark.png b/beta/public/images/docs/diagrams/passing_data_context_far.dark.png
new file mode 100644
index 000000000..7e0d0bc58
Binary files /dev/null and b/beta/public/images/docs/diagrams/passing_data_context_far.dark.png differ
diff --git a/beta/public/images/docs/diagrams/passing_data_context_far.png b/beta/public/images/docs/diagrams/passing_data_context_far.png
new file mode 100644
index 000000000..7a4c85150
Binary files /dev/null and b/beta/public/images/docs/diagrams/passing_data_context_far.png differ
diff --git a/beta/public/images/docs/diagrams/passing_data_lifting_state.dark.png b/beta/public/images/docs/diagrams/passing_data_lifting_state.dark.png
new file mode 100644
index 000000000..dd7b48556
Binary files /dev/null and b/beta/public/images/docs/diagrams/passing_data_lifting_state.dark.png differ
diff --git a/beta/public/images/docs/diagrams/passing_data_lifting_state.png b/beta/public/images/docs/diagrams/passing_data_lifting_state.png
new file mode 100644
index 000000000..919b4e684
Binary files /dev/null and b/beta/public/images/docs/diagrams/passing_data_lifting_state.png differ
diff --git a/beta/public/images/docs/diagrams/passing_data_prop_drilling.dark.png b/beta/public/images/docs/diagrams/passing_data_prop_drilling.dark.png
new file mode 100644
index 000000000..1cbd5a2f8
Binary files /dev/null and b/beta/public/images/docs/diagrams/passing_data_prop_drilling.dark.png differ
diff --git a/beta/public/images/docs/diagrams/passing_data_prop_drilling.png b/beta/public/images/docs/diagrams/passing_data_prop_drilling.png
new file mode 100644
index 000000000..c22cb2c52
Binary files /dev/null and b/beta/public/images/docs/diagrams/passing_data_prop_drilling.png differ
diff --git a/beta/public/images/docs/diagrams/preserving_state_add_component.dark.png b/beta/public/images/docs/diagrams/preserving_state_add_component.dark.png
new file mode 100644
index 000000000..24155f936
Binary files /dev/null and b/beta/public/images/docs/diagrams/preserving_state_add_component.dark.png differ
diff --git a/beta/public/images/docs/diagrams/preserving_state_add_component.png b/beta/public/images/docs/diagrams/preserving_state_add_component.png
new file mode 100644
index 000000000..d98e7bd3d
Binary files /dev/null and b/beta/public/images/docs/diagrams/preserving_state_add_component.png differ
diff --git a/beta/public/images/docs/diagrams/preserving_state_diff_position_p1.dark.png b/beta/public/images/docs/diagrams/preserving_state_diff_position_p1.dark.png
new file mode 100644
index 000000000..b2c2efc67
Binary files /dev/null and b/beta/public/images/docs/diagrams/preserving_state_diff_position_p1.dark.png differ
diff --git a/beta/public/images/docs/diagrams/preserving_state_diff_position_p1.png b/beta/public/images/docs/diagrams/preserving_state_diff_position_p1.png
new file mode 100644
index 000000000..84d4ef52d
Binary files /dev/null and b/beta/public/images/docs/diagrams/preserving_state_diff_position_p1.png differ
diff --git a/beta/public/images/docs/diagrams/preserving_state_diff_position_p2.dark.png b/beta/public/images/docs/diagrams/preserving_state_diff_position_p2.dark.png
new file mode 100644
index 000000000..9472414cf
Binary files /dev/null and b/beta/public/images/docs/diagrams/preserving_state_diff_position_p2.dark.png differ
diff --git a/beta/public/images/docs/diagrams/preserving_state_diff_position_p2.png b/beta/public/images/docs/diagrams/preserving_state_diff_position_p2.png
new file mode 100644
index 000000000..fad05b2e2
Binary files /dev/null and b/beta/public/images/docs/diagrams/preserving_state_diff_position_p2.png differ
diff --git a/beta/public/images/docs/diagrams/preserving_state_diff_position_p3.dark.png b/beta/public/images/docs/diagrams/preserving_state_diff_position_p3.dark.png
new file mode 100644
index 000000000..2b520eb6a
Binary files /dev/null and b/beta/public/images/docs/diagrams/preserving_state_diff_position_p3.dark.png differ
diff --git a/beta/public/images/docs/diagrams/preserving_state_diff_position_p3.png b/beta/public/images/docs/diagrams/preserving_state_diff_position_p3.png
new file mode 100644
index 000000000..1fbbe510a
Binary files /dev/null and b/beta/public/images/docs/diagrams/preserving_state_diff_position_p3.png differ
diff --git a/beta/public/images/docs/diagrams/preserving_state_diff_pt1.dark.png b/beta/public/images/docs/diagrams/preserving_state_diff_pt1.dark.png
new file mode 100644
index 000000000..0bb042c94
Binary files /dev/null and b/beta/public/images/docs/diagrams/preserving_state_diff_pt1.dark.png differ
diff --git a/beta/public/images/docs/diagrams/preserving_state_diff_pt1.png b/beta/public/images/docs/diagrams/preserving_state_diff_pt1.png
new file mode 100644
index 000000000..1cbc6874f
Binary files /dev/null and b/beta/public/images/docs/diagrams/preserving_state_diff_pt1.png differ
diff --git a/beta/public/images/docs/diagrams/preserving_state_diff_pt2.dark.png b/beta/public/images/docs/diagrams/preserving_state_diff_pt2.dark.png
new file mode 100644
index 000000000..ae6bdf95b
Binary files /dev/null and b/beta/public/images/docs/diagrams/preserving_state_diff_pt2.dark.png differ
diff --git a/beta/public/images/docs/diagrams/preserving_state_diff_pt2.png b/beta/public/images/docs/diagrams/preserving_state_diff_pt2.png
new file mode 100644
index 000000000..3d52b278e
Binary files /dev/null and b/beta/public/images/docs/diagrams/preserving_state_diff_pt2.png differ
diff --git a/beta/public/images/docs/diagrams/preserving_state_diff_same_pt1.dark.png b/beta/public/images/docs/diagrams/preserving_state_diff_same_pt1.dark.png
new file mode 100644
index 000000000..f0eb4a786
Binary files /dev/null and b/beta/public/images/docs/diagrams/preserving_state_diff_same_pt1.dark.png differ
diff --git a/beta/public/images/docs/diagrams/preserving_state_diff_same_pt1.png b/beta/public/images/docs/diagrams/preserving_state_diff_same_pt1.png
new file mode 100644
index 000000000..3d22270d8
Binary files /dev/null and b/beta/public/images/docs/diagrams/preserving_state_diff_same_pt1.png differ
diff --git a/beta/public/images/docs/diagrams/preserving_state_diff_same_pt2.dark.png b/beta/public/images/docs/diagrams/preserving_state_diff_same_pt2.dark.png
new file mode 100644
index 000000000..07ef5a761
Binary files /dev/null and b/beta/public/images/docs/diagrams/preserving_state_diff_same_pt2.dark.png differ
diff --git a/beta/public/images/docs/diagrams/preserving_state_diff_same_pt2.png b/beta/public/images/docs/diagrams/preserving_state_diff_same_pt2.png
new file mode 100644
index 000000000..1bbc87a3e
Binary files /dev/null and b/beta/public/images/docs/diagrams/preserving_state_diff_same_pt2.png differ
diff --git a/beta/public/images/docs/diagrams/preserving_state_dom_tree.dark.png b/beta/public/images/docs/diagrams/preserving_state_dom_tree.dark.png
new file mode 100644
index 000000000..4f7c8afdc
Binary files /dev/null and b/beta/public/images/docs/diagrams/preserving_state_dom_tree.dark.png differ
diff --git a/beta/public/images/docs/diagrams/preserving_state_dom_tree.png b/beta/public/images/docs/diagrams/preserving_state_dom_tree.png
new file mode 100644
index 000000000..3b38a1bd3
Binary files /dev/null and b/beta/public/images/docs/diagrams/preserving_state_dom_tree.png differ
diff --git a/beta/public/images/docs/diagrams/preserving_state_increment.dark.png b/beta/public/images/docs/diagrams/preserving_state_increment.dark.png
new file mode 100644
index 000000000..5bc133611
Binary files /dev/null and b/beta/public/images/docs/diagrams/preserving_state_increment.dark.png differ
diff --git a/beta/public/images/docs/diagrams/preserving_state_increment.png b/beta/public/images/docs/diagrams/preserving_state_increment.png
new file mode 100644
index 000000000..9b9ce9ca8
Binary files /dev/null and b/beta/public/images/docs/diagrams/preserving_state_increment.png differ
diff --git a/beta/public/images/docs/diagrams/preserving_state_remove_component.dark.png b/beta/public/images/docs/diagrams/preserving_state_remove_component.dark.png
new file mode 100644
index 000000000..cb6a466ac
Binary files /dev/null and b/beta/public/images/docs/diagrams/preserving_state_remove_component.dark.png differ
diff --git a/beta/public/images/docs/diagrams/preserving_state_remove_component.png b/beta/public/images/docs/diagrams/preserving_state_remove_component.png
new file mode 100644
index 000000000..966c1744b
Binary files /dev/null and b/beta/public/images/docs/diagrams/preserving_state_remove_component.png differ
diff --git a/beta/public/images/docs/diagrams/preserving_state_same_component.dark.png b/beta/public/images/docs/diagrams/preserving_state_same_component.dark.png
new file mode 100644
index 000000000..013fcaa80
Binary files /dev/null and b/beta/public/images/docs/diagrams/preserving_state_same_component.dark.png differ
diff --git a/beta/public/images/docs/diagrams/preserving_state_same_component.png b/beta/public/images/docs/diagrams/preserving_state_same_component.png
new file mode 100644
index 000000000..4cb1b32ed
Binary files /dev/null and b/beta/public/images/docs/diagrams/preserving_state_same_component.png differ
diff --git a/beta/public/images/docs/diagrams/preserving_state_tree.dark.png b/beta/public/images/docs/diagrams/preserving_state_tree.dark.png
new file mode 100644
index 000000000..452343857
Binary files /dev/null and b/beta/public/images/docs/diagrams/preserving_state_tree.dark.png differ
diff --git a/beta/public/images/docs/diagrams/preserving_state_tree.png b/beta/public/images/docs/diagrams/preserving_state_tree.png
new file mode 100644
index 000000000..a77e49ab2
Binary files /dev/null and b/beta/public/images/docs/diagrams/preserving_state_tree.png differ
diff --git a/beta/public/images/docs/diagrams/responding_to_input_flow.dark.png b/beta/public/images/docs/diagrams/responding_to_input_flow.dark.png
new file mode 100644
index 000000000..60e5c8f36
Binary files /dev/null and b/beta/public/images/docs/diagrams/responding_to_input_flow.dark.png differ
diff --git a/beta/public/images/docs/diagrams/responding_to_input_flow.png b/beta/public/images/docs/diagrams/responding_to_input_flow.png
new file mode 100644
index 000000000..cbbec9ac3
Binary files /dev/null and b/beta/public/images/docs/diagrams/responding_to_input_flow.png differ
diff --git a/beta/public/images/docs/diagrams/sharing_data_child.dark.png b/beta/public/images/docs/diagrams/sharing_data_child.dark.png
new file mode 100644
index 000000000..3efdc29fe
Binary files /dev/null and b/beta/public/images/docs/diagrams/sharing_data_child.dark.png differ
diff --git a/beta/public/images/docs/diagrams/sharing_data_child.png b/beta/public/images/docs/diagrams/sharing_data_child.png
new file mode 100644
index 000000000..afc794bcd
Binary files /dev/null and b/beta/public/images/docs/diagrams/sharing_data_child.png differ
diff --git a/beta/public/images/docs/diagrams/sharing_data_child_clicked.dark.png b/beta/public/images/docs/diagrams/sharing_data_child_clicked.dark.png
new file mode 100644
index 000000000..cf60c235f
Binary files /dev/null and b/beta/public/images/docs/diagrams/sharing_data_child_clicked.dark.png differ
diff --git a/beta/public/images/docs/diagrams/sharing_data_child_clicked.png b/beta/public/images/docs/diagrams/sharing_data_child_clicked.png
new file mode 100644
index 000000000..c14fb4a8f
Binary files /dev/null and b/beta/public/images/docs/diagrams/sharing_data_child_clicked.png differ
diff --git a/beta/public/images/docs/diagrams/sharing_data_parent.dark.png b/beta/public/images/docs/diagrams/sharing_data_parent.dark.png
new file mode 100644
index 000000000..d4f369835
Binary files /dev/null and b/beta/public/images/docs/diagrams/sharing_data_parent.dark.png differ
diff --git a/beta/public/images/docs/diagrams/sharing_data_parent.png b/beta/public/images/docs/diagrams/sharing_data_parent.png
new file mode 100644
index 000000000..8c7b70305
Binary files /dev/null and b/beta/public/images/docs/diagrams/sharing_data_parent.png differ
diff --git a/beta/public/images/docs/diagrams/sharing_data_parent_clicked.dark.png b/beta/public/images/docs/diagrams/sharing_data_parent_clicked.dark.png
new file mode 100644
index 000000000..ac4c765de
Binary files /dev/null and b/beta/public/images/docs/diagrams/sharing_data_parent_clicked.dark.png differ
diff --git a/beta/public/images/docs/diagrams/sharing_data_parent_clicked.png b/beta/public/images/docs/diagrams/sharing_data_parent_clicked.png
new file mode 100644
index 000000000..ca16cb8dd
Binary files /dev/null and b/beta/public/images/docs/diagrams/sharing_data_parent_clicked.png differ
diff --git a/beta/public/images/docs/diagrams/sharing_state_child.dark.png b/beta/public/images/docs/diagrams/sharing_state_child.dark.png
new file mode 100644
index 000000000..dfaf897b0
Binary files /dev/null and b/beta/public/images/docs/diagrams/sharing_state_child.dark.png differ
diff --git a/beta/public/images/docs/diagrams/sharing_state_child.png b/beta/public/images/docs/diagrams/sharing_state_child.png
new file mode 100644
index 000000000..c3a9f0ec9
Binary files /dev/null and b/beta/public/images/docs/diagrams/sharing_state_child.png differ
diff --git a/beta/public/images/docs/diagrams/sharing_state_child_clicked.dark.png b/beta/public/images/docs/diagrams/sharing_state_child_clicked.dark.png
new file mode 100644
index 000000000..bc6b3c89a
Binary files /dev/null and b/beta/public/images/docs/diagrams/sharing_state_child_clicked.dark.png differ
diff --git a/beta/public/images/docs/diagrams/sharing_state_child_clicked.png b/beta/public/images/docs/diagrams/sharing_state_child_clicked.png
new file mode 100644
index 000000000..d4dddbd9b
Binary files /dev/null and b/beta/public/images/docs/diagrams/sharing_state_child_clicked.png differ
diff --git a/beta/public/images/docs/diagrams/sharing_state_parent.dark.png b/beta/public/images/docs/diagrams/sharing_state_parent.dark.png
new file mode 100644
index 000000000..ba937de7e
Binary files /dev/null and b/beta/public/images/docs/diagrams/sharing_state_parent.dark.png differ
diff --git a/beta/public/images/docs/diagrams/sharing_state_parent.png b/beta/public/images/docs/diagrams/sharing_state_parent.png
new file mode 100644
index 000000000..3aaaef724
Binary files /dev/null and b/beta/public/images/docs/diagrams/sharing_state_parent.png differ
diff --git a/beta/public/images/docs/diagrams/sharing_state_parent_clicked.dark.png b/beta/public/images/docs/diagrams/sharing_state_parent_clicked.dark.png
new file mode 100644
index 000000000..22ef522b4
Binary files /dev/null and b/beta/public/images/docs/diagrams/sharing_state_parent_clicked.dark.png differ
diff --git a/beta/public/images/docs/diagrams/sharing_state_parent_clicked.png b/beta/public/images/docs/diagrams/sharing_state_parent_clicked.png
new file mode 100644
index 000000000..406cd8314
Binary files /dev/null and b/beta/public/images/docs/diagrams/sharing_state_parent_clicked.png differ
diff --git a/beta/public/images/docs/diagrams/writing_jsx_form.dark.png b/beta/public/images/docs/diagrams/writing_jsx_form.dark.png
new file mode 100644
index 000000000..3f7184239
Binary files /dev/null and b/beta/public/images/docs/diagrams/writing_jsx_form.dark.png differ
diff --git a/beta/public/images/docs/diagrams/writing_jsx_form.png b/beta/public/images/docs/diagrams/writing_jsx_form.png
new file mode 100644
index 000000000..21baa97fc
Binary files /dev/null and b/beta/public/images/docs/diagrams/writing_jsx_form.png differ
diff --git a/beta/public/images/docs/diagrams/writing_jsx_html.dark.png b/beta/public/images/docs/diagrams/writing_jsx_html.dark.png
new file mode 100644
index 000000000..c73d3fb42
Binary files /dev/null and b/beta/public/images/docs/diagrams/writing_jsx_html.dark.png differ
diff --git a/beta/public/images/docs/diagrams/writing_jsx_html.png b/beta/public/images/docs/diagrams/writing_jsx_html.png
new file mode 100644
index 000000000..6f30314a3
Binary files /dev/null and b/beta/public/images/docs/diagrams/writing_jsx_html.png differ
diff --git a/beta/public/images/docs/diagrams/writing_jsx_js.dark.png b/beta/public/images/docs/diagrams/writing_jsx_js.dark.png
new file mode 100644
index 000000000..aee00cb98
Binary files /dev/null and b/beta/public/images/docs/diagrams/writing_jsx_js.dark.png differ
diff --git a/beta/public/images/docs/diagrams/writing_jsx_js.png b/beta/public/images/docs/diagrams/writing_jsx_js.png
new file mode 100644
index 000000000..9c3d44216
Binary files /dev/null and b/beta/public/images/docs/diagrams/writing_jsx_js.png differ
diff --git a/beta/public/images/docs/diagrams/writing_jsx_sidebar.dark.png b/beta/public/images/docs/diagrams/writing_jsx_sidebar.dark.png
new file mode 100644
index 000000000..5fa45be1c
Binary files /dev/null and b/beta/public/images/docs/diagrams/writing_jsx_sidebar.dark.png differ
diff --git a/beta/public/images/docs/diagrams/writing_jsx_sidebar.png b/beta/public/images/docs/diagrams/writing_jsx_sidebar.png
new file mode 100644
index 000000000..b1474562d
Binary files /dev/null and b/beta/public/images/docs/diagrams/writing_jsx_sidebar.png differ
diff --git a/beta/public/images/docs/error-boundaries-stack-trace-line-numbers.png b/beta/public/images/docs/error-boundaries-stack-trace-line-numbers.png
new file mode 100644
index 000000000..db828905a
Binary files /dev/null and b/beta/public/images/docs/error-boundaries-stack-trace-line-numbers.png differ
diff --git a/beta/public/images/docs/error-boundaries-stack-trace.png b/beta/public/images/docs/error-boundaries-stack-trace.png
new file mode 100644
index 000000000..f0d49d903
Binary files /dev/null and b/beta/public/images/docs/error-boundaries-stack-trace.png differ
diff --git a/beta/public/images/docs/granular-dom-updates.gif b/beta/public/images/docs/granular-dom-updates.gif
new file mode 100644
index 000000000..1651b0dae
Binary files /dev/null and b/beta/public/images/docs/granular-dom-updates.gif differ
diff --git a/beta/public/images/docs/illustrations/i_browser-paint.png b/beta/public/images/docs/illustrations/i_browser-paint.png
new file mode 100644
index 000000000..b0d61fa8f
Binary files /dev/null and b/beta/public/images/docs/illustrations/i_browser-paint.png differ
diff --git a/beta/public/images/docs/illustrations/i_children-prop.png b/beta/public/images/docs/illustrations/i_children-prop.png
new file mode 100644
index 000000000..296c626dc
Binary files /dev/null and b/beta/public/images/docs/illustrations/i_children-prop.png differ
diff --git a/beta/public/images/docs/illustrations/i_declarative-ui-programming.png b/beta/public/images/docs/illustrations/i_declarative-ui-programming.png
new file mode 100644
index 000000000..206d73e51
Binary files /dev/null and b/beta/public/images/docs/illustrations/i_declarative-ui-programming.png differ
diff --git a/beta/public/images/docs/illustrations/i_html_js.svg b/beta/public/images/docs/illustrations/i_html_js.svg
new file mode 100644
index 000000000..9b6f5bad8
--- /dev/null
+++ b/beta/public/images/docs/illustrations/i_html_js.svg
@@ -0,0 +1,95 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="355" viewBox="0 0 800 355">
+  <defs>
+    <style>
+      .a {
+        fill: #e0ddf0;
+      }
+
+      .b {
+        fill: #a19ad1;
+      }
+
+      .c, .h {
+        font-size: 14px;
+font-family: Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace ;
+      }       
+      .c {
+        fill: #312c59;
+      }
+
+      .c, .d, .h, .i {
+        font-weight: 700;
+      }
+
+      .d, .i {
+        font-size: 24px;
+        font-family: system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
+      }
+
+      .d {
+        fill: #8179c1;
+      }
+
+      .e {
+        fill: #cdeffc;
+      }
+
+      .f {
+        fill: none;
+        stroke: #416c7c;
+        stroke-miterlimit: 10;
+        stroke-width: 3px;
+      }
+
+      .g {
+        fill: #81d8f7;
+      }
+
+      .h {
+        fill: #154854;
+      }
+
+      .i {
+        fill: #61a2b9;
+      }
+
+      .j {
+        letter-spacing: -0.02em;
+      }
+    </style>
+  </defs>
+  <g>
+    <rect class="a" x="424.31" y="39" width="290.19" height="273"/>
+    <g>
+      <rect class="b" x="466.74" y="103.5" width="203.99" height="37.5" rx="4.83"/>
+      <text class="c" transform="translate(479.95 126.36)">onSubmit() { ... }</text>
+    </g>
+    <g>
+      <rect class="b" x="467.15" y="153.75" width="203.99" height="37.5" rx="4.83"/>
+      <text class="c" transform="translate(480.34 176.6)">login() { ... }</text>
+    </g>
+    <g>
+      <rect class="b" x="467.15" y="203.75" width="203.99" height="37.5" rx="4.83"/>
+      <text class="c" transform="translate(480.34 226.6)">onClick() { ... }</text>
+    </g>
+    <text class="d" transform="translate(554.31 76.12)">JS</text>
+  </g>
+  <g>
+    <rect class="e" x="75.5" y="39" width="291.37" height="273"/>
+    <path class="f" d="M213.69,124.36v17A16.67,16.67,0,0,1,197,158H175.83a16.68,16.68,0,0,0-16.68,16.67v13.24"/>
+    <path class="f" d="M214.15,124.36v17A16.68,16.68,0,0,0,230.83,158H252a16.67,16.67,0,0,1,16.67,16.67V220.5"/>
+    <g>
+      <rect class="g" x="178" y="103.5" width="76.5" height="37.5" rx="4.83"/>
+      <text class="h" transform="translate(194.95 126.36)">&lt;div&gt;</text>
+    </g>
+    <g>
+      <rect class="g" x="230.8" y="217.92" width="76.5" height="37.5" rx="4.83"/>
+      <text class="h" transform="translate(243.55 240.78)">&lt;form&gt;</text>
+    </g>
+    <g>
+      <rect class="g" x="123.81" y="182.92" width="76.5" height="37.5" rx="4.83"/>
+      <text class="h" transform="translate(149.15 205.78)">&lt;p&gt;</text>
+    </g>
+    <text class="i" transform="translate(189.88 76.12)">HTML</text>
+  </g>
+</svg>
diff --git a/beta/public/images/docs/illustrations/i_imperative-ui-programming.png b/beta/public/images/docs/illustrations/i_imperative-ui-programming.png
new file mode 100644
index 000000000..1e3b5fdd8
Binary files /dev/null and b/beta/public/images/docs/illustrations/i_imperative-ui-programming.png differ
diff --git a/beta/public/images/docs/illustrations/i_import-export.svg b/beta/public/images/docs/illustrations/i_import-export.svg
new file mode 100644
index 000000000..eb62e2b8c
--- /dev/null
+++ b/beta/public/images/docs/illustrations/i_import-export.svg
@@ -0,0 +1,100 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="395" viewBox="0 0 800 395">
+  <defs>
+    <style>
+      .a {
+        fill: none;
+      }
+
+      .h {
+        fill: #fff;
+        stroke: #a19ad1;
+        stroke-miterlimit: 10;
+        stroke-width: 4px;
+      }
+
+      .b {
+        fill: #cdeffc;
+      }
+
+      .c, .j {
+        font-size: 14px;
+        font-family: system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
+      }
+
+      .c {
+        fill: #18162d;
+      }
+
+      .c, .e, .g, .j {
+        font-weight: 700;
+      }
+
+      .d {
+        font-family: Courier;
+        font-weight: 400;
+      }
+
+      .e, .g {
+        font-size: 18px;
+        font-family: Arial-BoldMT, Arial;
+      }
+
+      .e {
+        fill: #a19ad1;
+      }
+
+      .f {
+        fill: #bec3c3;
+      }
+
+      .g {
+        fill: #6257b2;
+      }
+
+      .i {
+        fill: #c0bce0;
+      }
+
+      .j {
+        fill: #312c59;
+      }
+    </style>
+  </defs>
+  <g>
+    <rect class="h" x="46.5" y="33.55" width="212" height="292.45"/>
+    <g>
+      <rect class="b" x="67.75" y="173.55" width="164.75" height="115.45" rx="4.83"/>
+      <text class="c" transform="translate(79.95 200.91)">export default <tspan class="d"><tspan x="0.56" y="16.8">function </tspan><tspan x="0" y="33.6">Button() { </tspan><tspan x="0" y="50.4" xml:space="preserve"> ... </tspan><tspan x="0" y="67.2">}</tspan></tspan></text>
+    </g>
+    <text class="e" transform="translate(86.99 62.68)">Component.js</text>
+    <rect class="f" x="68.11" y="76" width="164.75" height="40" rx="4.83"/>
+    <rect class="f" x="68.11" y="124.33" width="164.75" height="40" rx="4.83"/>
+    <text class="g" transform="translate(69.21 355.13)">one default export</text>
+  </g>
+  <g>
+    <text class="g" transform="translate(295.2 355.13)">multiple named exports</text>
+    <rect class="h" x="294.5" y="33.55" width="212" height="292.45"/>
+    <g>
+      <rect class="i" x="315.75" y="185.55" width="164.75" height="97.45" rx="4.83"/>
+      <text class="j" transform="translate(327.95 212.91)">export <tspan class="d" x="58.81" y="0">function </tspan><tspan class="d"><tspan x="0" y="16.8">Checkbox() { </tspan><tspan x="0" y="33.6" xml:space="preserve"> ... </tspan><tspan x="0" y="50.4">}</tspan></tspan></text>
+    </g>
+    <g>
+      <rect class="i" x="315.75" y="77.55" width="164.75" height="97.45" rx="4.83"/>
+      <text class="j" transform="translate(327.95 104.91)">export <tspan class="d" x="58.81" y="0">function </tspan><tspan class="d"><tspan x="0" y="16.8">Slider() { </tspan><tspan x="0" y="33.6" xml:space="preserve"> ... </tspan><tspan x="0" y="50.4">}</tspan></tspan></text>
+    </g>
+    <text class="e" transform="translate(329.98 62.68)">Components.js</text>
+  </g>
+  <g>
+    <rect class="h" x="543.5" y="33.55" width="212" height="292.45"/>
+    <g>
+      <rect class="i" x="564.75" y="77.55" width="164.75" height="97.45" rx="4.83"/>
+      <text class="j" transform="translate(576.95 104.91)">export <tspan class="d" x="58.81" y="0">function </tspan><tspan class="d"><tspan x="0" y="16.8">Avatar() { </tspan><tspan x="0" y="33.6" xml:space="preserve"> ... </tspan><tspan x="0" y="50.4">}</tspan></tspan></text>
+    </g>
+    <text class="e" transform="translate(559.48 62.68)">MixedComponents.js</text>
+    <g>
+      <rect class="b" x="565.11" y="185.28" width="164.75" height="115.45" rx="4.83"/>
+      <text class="c" transform="translate(577.31 212.64)">export default <tspan class="d"><tspan x="0.56" y="16.8">function </tspan><tspan x="0" y="33.6">FriendsList() { </tspan><tspan x="0" y="50.4" xml:space="preserve"> ... </tspan><tspan x="0" y="67.2">}</tspan></tspan></text>
+    </g>
+    <text class="g" transform="translate(577.2 355.18)">named export(s)<tspan x="-26.49" y="21.6">and one default export</tspan></text>
+  </g>
+</svg>
diff --git a/beta/public/images/docs/illustrations/i_inputs1.png b/beta/public/images/docs/illustrations/i_inputs1.png
new file mode 100644
index 000000000..35150b22d
Binary files /dev/null and b/beta/public/images/docs/illustrations/i_inputs1.png differ
diff --git a/beta/public/images/docs/illustrations/i_inputs2.png b/beta/public/images/docs/illustrations/i_inputs2.png
new file mode 100644
index 000000000..f519af36e
Binary files /dev/null and b/beta/public/images/docs/illustrations/i_inputs2.png differ
diff --git a/beta/public/images/docs/illustrations/i_jsx.svg b/beta/public/images/docs/illustrations/i_jsx.svg
new file mode 100644
index 000000000..629cad665
--- /dev/null
+++ b/beta/public/images/docs/illustrations/i_jsx.svg
@@ -0,0 +1,55 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="355" viewBox="0 0 800 355">
+  <defs>
+    <style>
+      .a {
+        fill: #a19ad1;
+      }
+
+      .b {
+        fill: #cdeffc;
+      }
+
+      .c {
+        font-size: 14px;
+        fill: #18162d;
+font-family: Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace ;
+      }
+      .c, .f {
+        font-weight: 700;
+      }
+
+      .d {
+        fill: #81d8f7;
+      }
+
+      .e {
+        fill: #20363e;
+      }
+
+      .f {
+        font-size: 24px;
+        fill: #fff;
+        font-family: system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
+      }
+
+      .g {
+        letter-spacing: -0.06em;
+      }
+    </style>
+  </defs>
+  <g>
+    <g>
+      <rect class="a" x="424.5" y="39" width="290" height="273"/>
+      <rect class="b" x="446.51" y="173" width="247.76" height="84" rx="4.83"/>
+      <text class="c" transform="translate(457.95 126.36)">Form() {<tspan x="0" y="16.8" xml:space="preserve">  onClick() { ... }</tspan><tspan x="0" y="33.6" xml:space="preserve">  onSubmit() { ... }</tspan><tspan class="d"><tspan x="0" y="67.2" xml:space="preserve">  </tspan><tspan class="e" x="16.8" y="67.2">&lt;form onSubmit&gt;</tspan></tspan><tspan class="e"><tspan x="0" y="84" xml:space="preserve">    &lt;input onClick /&gt;</tspan><tspan x="0" y="100.8" xml:space="preserve">    &lt;input onClick /&gt;</tspan><tspan x="0" y="117.6" xml:space="preserve">  &lt;/form&gt; </tspan></tspan><tspan x="0" y="151.2">}</tspan></text>
+      <text class="f" transform="translate(526.64 76.12)">Form.js</text>
+    </g>
+    <g>
+      <rect class="a" x="76.5" y="39" width="290" height="273"/>
+      <rect class="b" x="127.66" y="223.25" width="218.35" height="35" rx="4.83"/>
+      <rect class="b" x="127.5" y="156" width="218.35" height="35" rx="4.83"/>
+      <text class="c" transform="translate(109.95 126.36)">Sidebar() {<tspan x="0" y="16.8" xml:space="preserve">  isLoggedIn() {</tspan><tspan class="d"><tspan x="0" y="50.4" xml:space="preserve">    </tspan><tspan class="e" x="33.61" y="50.4">&lt;p&gt;Welcome&lt;/p&gt; </tspan></tspan><tspan x="0" y="84" xml:space="preserve">  } else {</tspan><tspan class="d"><tspan x="0" y="117.6" xml:space="preserve">    </tspan><tspan class="e" x="33.61" y="117.6">&lt;Form /&gt; </tspan></tspan><tspan x="0" y="151.2" xml:space="preserve">  }</tspan><tspan x="0" y="168">}</tspan></text>
+      <text class="f" transform="translate(165.29 76.12)">Sidebar.js</text>
+    </g>
+  </g>
+</svg>
diff --git a/beta/public/images/docs/illustrations/i_puritea-recipe.png b/beta/public/images/docs/illustrations/i_puritea-recipe.png
new file mode 100644
index 000000000..46dba7b24
Binary files /dev/null and b/beta/public/images/docs/illustrations/i_puritea-recipe.png differ
diff --git a/beta/public/images/docs/illustrations/i_react-batching.png b/beta/public/images/docs/illustrations/i_react-batching.png
new file mode 100644
index 000000000..e213ba3ad
Binary files /dev/null and b/beta/public/images/docs/illustrations/i_react-batching.png differ
diff --git a/beta/public/images/docs/illustrations/i_ref.png b/beta/public/images/docs/illustrations/i_ref.png
new file mode 100644
index 000000000..c391e57e4
Binary files /dev/null and b/beta/public/images/docs/illustrations/i_ref.png differ
diff --git a/beta/public/images/docs/illustrations/i_render-and-commit1.png b/beta/public/images/docs/illustrations/i_render-and-commit1.png
new file mode 100644
index 000000000..d62ba5806
Binary files /dev/null and b/beta/public/images/docs/illustrations/i_render-and-commit1.png differ
diff --git a/beta/public/images/docs/illustrations/i_render-and-commit2.png b/beta/public/images/docs/illustrations/i_render-and-commit2.png
new file mode 100644
index 000000000..e01d0cce7
Binary files /dev/null and b/beta/public/images/docs/illustrations/i_render-and-commit2.png differ
diff --git a/beta/public/images/docs/illustrations/i_render-and-commit3.png b/beta/public/images/docs/illustrations/i_render-and-commit3.png
new file mode 100644
index 000000000..bdf58c0e0
Binary files /dev/null and b/beta/public/images/docs/illustrations/i_render-and-commit3.png differ
diff --git a/beta/public/images/docs/illustrations/i_render1.png b/beta/public/images/docs/illustrations/i_render1.png
new file mode 100644
index 000000000..3613c7691
Binary files /dev/null and b/beta/public/images/docs/illustrations/i_render1.png differ
diff --git a/beta/public/images/docs/illustrations/i_render2.png b/beta/public/images/docs/illustrations/i_render2.png
new file mode 100644
index 000000000..ca53a7785
Binary files /dev/null and b/beta/public/images/docs/illustrations/i_render2.png differ
diff --git a/beta/public/images/docs/illustrations/i_render3.png b/beta/public/images/docs/illustrations/i_render3.png
new file mode 100644
index 000000000..797860a7c
Binary files /dev/null and b/beta/public/images/docs/illustrations/i_render3.png differ
diff --git a/beta/public/images/docs/illustrations/i_rerender1.png b/beta/public/images/docs/illustrations/i_rerender1.png
new file mode 100644
index 000000000..e94361e7b
Binary files /dev/null and b/beta/public/images/docs/illustrations/i_rerender1.png differ
diff --git a/beta/public/images/docs/illustrations/i_rerender2.png b/beta/public/images/docs/illustrations/i_rerender2.png
new file mode 100644
index 000000000..6d85cae84
Binary files /dev/null and b/beta/public/images/docs/illustrations/i_rerender2.png differ
diff --git a/beta/public/images/docs/illustrations/i_rerender3.png b/beta/public/images/docs/illustrations/i_rerender3.png
new file mode 100644
index 000000000..d589a9b93
Binary files /dev/null and b/beta/public/images/docs/illustrations/i_rerender3.png differ
diff --git a/beta/public/images/docs/illustrations/i_state-snapshot1.png b/beta/public/images/docs/illustrations/i_state-snapshot1.png
new file mode 100644
index 000000000..69bbf2b72
Binary files /dev/null and b/beta/public/images/docs/illustrations/i_state-snapshot1.png differ
diff --git a/beta/public/images/docs/illustrations/i_state-snapshot2.png b/beta/public/images/docs/illustrations/i_state-snapshot2.png
new file mode 100644
index 000000000..eea48a218
Binary files /dev/null and b/beta/public/images/docs/illustrations/i_state-snapshot2.png differ
diff --git a/beta/public/images/docs/illustrations/i_state-snapshot3.png b/beta/public/images/docs/illustrations/i_state-snapshot3.png
new file mode 100644
index 000000000..a393528e2
Binary files /dev/null and b/beta/public/images/docs/illustrations/i_state-snapshot3.png differ
diff --git a/beta/public/images/docs/implementation-notes-tree.png b/beta/public/images/docs/implementation-notes-tree.png
new file mode 100644
index 000000000..923ef5d0d
Binary files /dev/null and b/beta/public/images/docs/implementation-notes-tree.png differ
diff --git a/beta/public/images/docs/javascript-jabber.png b/beta/public/images/docs/javascript-jabber.png
new file mode 100644
index 000000000..57d63c41c
Binary files /dev/null and b/beta/public/images/docs/javascript-jabber.png differ
diff --git a/beta/public/images/docs/keyboard-focus.png b/beta/public/images/docs/keyboard-focus.png
new file mode 100644
index 000000000..65a8dc300
Binary files /dev/null and b/beta/public/images/docs/keyboard-focus.png differ
diff --git a/beta/public/images/docs/outerclick-with-keyboard.gif b/beta/public/images/docs/outerclick-with-keyboard.gif
new file mode 100644
index 000000000..c82d299f8
Binary files /dev/null and b/beta/public/images/docs/outerclick-with-keyboard.gif differ
diff --git a/beta/public/images/docs/outerclick-with-mouse.gif b/beta/public/images/docs/outerclick-with-mouse.gif
new file mode 100644
index 000000000..e562e0324
Binary files /dev/null and b/beta/public/images/docs/outerclick-with-mouse.gif differ
diff --git a/beta/public/images/docs/perf-dom.png b/beta/public/images/docs/perf-dom.png
new file mode 100644
index 000000000..9a843c6ca
Binary files /dev/null and b/beta/public/images/docs/perf-dom.png differ
diff --git a/beta/public/images/docs/perf-exclusive.png b/beta/public/images/docs/perf-exclusive.png
new file mode 100644
index 000000000..a8ad5003c
Binary files /dev/null and b/beta/public/images/docs/perf-exclusive.png differ
diff --git a/beta/public/images/docs/perf-inclusive.png b/beta/public/images/docs/perf-inclusive.png
new file mode 100644
index 000000000..e46b370aa
Binary files /dev/null and b/beta/public/images/docs/perf-inclusive.png differ
diff --git a/beta/public/images/docs/perf-wasted.png b/beta/public/images/docs/perf-wasted.png
new file mode 100644
index 000000000..c73131818
Binary files /dev/null and b/beta/public/images/docs/perf-wasted.png differ
diff --git a/beta/public/images/docs/react-devtools-extension.png b/beta/public/images/docs/react-devtools-extension.png
new file mode 100644
index 000000000..6ea2aad8d
Binary files /dev/null and b/beta/public/images/docs/react-devtools-extension.png differ
diff --git a/beta/public/images/docs/react-devtools-standalone.png b/beta/public/images/docs/react-devtools-standalone.png
new file mode 100644
index 000000000..07da74137
Binary files /dev/null and b/beta/public/images/docs/react-devtools-standalone.png differ
diff --git a/beta/public/images/docs/react-devtools-state.gif b/beta/public/images/docs/react-devtools-state.gif
new file mode 100644
index 000000000..c9ff6cd35
Binary files /dev/null and b/beta/public/images/docs/react-devtools-state.gif differ
diff --git a/beta/public/images/docs/react-devtools-usedebugvalue.png b/beta/public/images/docs/react-devtools-usedebugvalue.png
new file mode 100644
index 000000000..854044318
Binary files /dev/null and b/beta/public/images/docs/react-devtools-usedebugvalue.png differ
diff --git a/beta/public/images/docs/s_thinking-in-react_ui.png b/beta/public/images/docs/s_thinking-in-react_ui.png
new file mode 100644
index 000000000..21802352c
Binary files /dev/null and b/beta/public/images/docs/s_thinking-in-react_ui.png differ
diff --git a/beta/public/images/docs/s_thinking-in-react_ui_outline.png b/beta/public/images/docs/s_thinking-in-react_ui_outline.png
new file mode 100644
index 000000000..d38f3e19f
Binary files /dev/null and b/beta/public/images/docs/s_thinking-in-react_ui_outline.png differ
diff --git a/beta/public/images/docs/should-component-update.png b/beta/public/images/docs/should-component-update.png
new file mode 100644
index 000000000..590af60b8
Binary files /dev/null and b/beta/public/images/docs/should-component-update.png differ
diff --git a/beta/public/images/docs/source/i_browser-paint.psd b/beta/public/images/docs/source/i_browser-paint.psd
new file mode 100644
index 000000000..bb541e889
Binary files /dev/null and b/beta/public/images/docs/source/i_browser-paint.psd differ
diff --git a/beta/public/images/docs/source/i_children-prop.psd b/beta/public/images/docs/source/i_children-prop.psd
new file mode 100644
index 000000000..2577c0aa0
Binary files /dev/null and b/beta/public/images/docs/source/i_children-prop.psd differ
diff --git a/beta/public/images/docs/source/i_declarative-ui-programming.psd b/beta/public/images/docs/source/i_declarative-ui-programming.psd
new file mode 100644
index 000000000..3b1a9a4d1
Binary files /dev/null and b/beta/public/images/docs/source/i_declarative-ui-programming.psd differ
diff --git a/beta/public/images/docs/source/i_imperative-ui-programming.psd b/beta/public/images/docs/source/i_imperative-ui-programming.psd
new file mode 100644
index 000000000..c1511b022
Binary files /dev/null and b/beta/public/images/docs/source/i_imperative-ui-programming.psd differ
diff --git a/beta/public/images/docs/source/i_keys-in-trees.psd b/beta/public/images/docs/source/i_keys-in-trees.psd
new file mode 100644
index 000000000..bab04dc08
Binary files /dev/null and b/beta/public/images/docs/source/i_keys-in-trees.psd differ
diff --git a/beta/public/images/docs/source/i_puritea-recipe.psd b/beta/public/images/docs/source/i_puritea-recipe.psd
new file mode 100644
index 000000000..72a33ab30
Binary files /dev/null and b/beta/public/images/docs/source/i_puritea-recipe.psd differ
diff --git a/beta/public/images/docs/source/i_react-batching.psd b/beta/public/images/docs/source/i_react-batching.psd
new file mode 100644
index 000000000..88bcd617b
Binary files /dev/null and b/beta/public/images/docs/source/i_react-batching.psd differ
diff --git a/beta/public/images/docs/source/i_react-is-blind-to-ui-swap.psd b/beta/public/images/docs/source/i_react-is-blind-to-ui-swap.psd
new file mode 100644
index 000000000..5e422ba63
Binary files /dev/null and b/beta/public/images/docs/source/i_react-is-blind-to-ui-swap.psd differ
diff --git a/beta/public/images/docs/source/i_ref.psd b/beta/public/images/docs/source/i_ref.psd
new file mode 100644
index 000000000..12349b431
Binary files /dev/null and b/beta/public/images/docs/source/i_ref.psd differ
diff --git a/beta/public/images/docs/source/i_render-commit.psd b/beta/public/images/docs/source/i_render-commit.psd
new file mode 100644
index 000000000..99f62802a
Binary files /dev/null and b/beta/public/images/docs/source/i_render-commit.psd differ
diff --git a/beta/public/images/docs/source/i_rerender.psd b/beta/public/images/docs/source/i_rerender.psd
new file mode 100644
index 000000000..9dc83d5ed
Binary files /dev/null and b/beta/public/images/docs/source/i_rerender.psd differ
diff --git a/beta/public/images/docs/source/i_rerendering.psd b/beta/public/images/docs/source/i_rerendering.psd
new file mode 100644
index 000000000..2ba1cba58
Binary files /dev/null and b/beta/public/images/docs/source/i_rerendering.psd differ
diff --git a/beta/public/images/docs/source/i_state-snapshot.psd b/beta/public/images/docs/source/i_state-snapshot.psd
new file mode 100644
index 000000000..b8d54ddcc
Binary files /dev/null and b/beta/public/images/docs/source/i_state-snapshot.psd differ
diff --git a/beta/public/images/docs/source/s_inputs.psd b/beta/public/images/docs/source/s_inputs.psd
new file mode 100644
index 000000000..60354742a
Binary files /dev/null and b/beta/public/images/docs/source/s_inputs.psd differ
diff --git a/beta/public/images/docs/source/s_ui-snapshot.psd b/beta/public/images/docs/source/s_ui-snapshot.psd
new file mode 100644
index 000000000..41c65f8fe
Binary files /dev/null and b/beta/public/images/docs/source/s_ui-snapshot.psd differ
diff --git a/beta/public/images/docs/thinking-in-react-tagtree.png b/beta/public/images/docs/thinking-in-react-tagtree.png
new file mode 100644
index 000000000..3d4db2d23
Binary files /dev/null and b/beta/public/images/docs/thinking-in-react-tagtree.png differ
diff --git a/beta/public/images/external.png b/beta/public/images/external.png
new file mode 100644
index 000000000..748a27e44
Binary files /dev/null and b/beta/public/images/external.png differ
diff --git a/beta/public/images/external_2x.png b/beta/public/images/external_2x.png
new file mode 100644
index 000000000..66230854d
Binary files /dev/null and b/beta/public/images/external_2x.png differ
diff --git a/beta/public/images/g_arrow.png b/beta/public/images/g_arrow.png
new file mode 100644
index 000000000..36258add5
Binary files /dev/null and b/beta/public/images/g_arrow.png differ
diff --git a/beta/public/images/history.png b/beta/public/images/history.png
new file mode 100644
index 000000000..4ca56a866
Binary files /dev/null and b/beta/public/images/history.png differ
diff --git a/beta/public/images/noise.png b/beta/public/images/noise.png
new file mode 100644
index 000000000..698f924f4
Binary files /dev/null and b/beta/public/images/noise.png differ
diff --git a/beta/public/images/oss_logo.png b/beta/public/images/oss_logo.png
new file mode 100644
index 000000000..3f376bee9
Binary files /dev/null and b/beta/public/images/oss_logo.png differ
diff --git a/beta/public/images/search.png b/beta/public/images/search.png
new file mode 100644
index 000000000..151377693
Binary files /dev/null and b/beta/public/images/search.png differ
diff --git a/beta/public/images/team/acdlite.jpg b/beta/public/images/team/acdlite.jpg
new file mode 100644
index 000000000..19ddb901f
Binary files /dev/null and b/beta/public/images/team/acdlite.jpg differ
diff --git a/beta/public/images/team/gaearon.jpg b/beta/public/images/team/gaearon.jpg
new file mode 100644
index 000000000..dff5a5173
Binary files /dev/null and b/beta/public/images/team/gaearon.jpg differ
diff --git a/beta/public/images/team/jasonbonta.jpg b/beta/public/images/team/jasonbonta.jpg
new file mode 100644
index 000000000..139eb5ece
Binary files /dev/null and b/beta/public/images/team/jasonbonta.jpg differ
diff --git a/beta/public/images/team/joe.jpg b/beta/public/images/team/joe.jpg
new file mode 100644
index 000000000..7eb702e79
Binary files /dev/null and b/beta/public/images/team/joe.jpg differ
diff --git a/beta/public/images/team/josh.jpg b/beta/public/images/team/josh.jpg
new file mode 100644
index 000000000..ebed23562
Binary files /dev/null and b/beta/public/images/team/josh.jpg differ
diff --git a/beta/public/images/team/lauren.jpg b/beta/public/images/team/lauren.jpg
new file mode 100644
index 000000000..1485cf8ff
Binary files /dev/null and b/beta/public/images/team/lauren.jpg differ
diff --git a/beta/public/images/team/lunaruan.jpg b/beta/public/images/team/lunaruan.jpg
new file mode 100644
index 000000000..f6de76d4e
Binary files /dev/null and b/beta/public/images/team/lunaruan.jpg differ
diff --git a/beta/public/images/team/mofei-zhang.png b/beta/public/images/team/mofei-zhang.png
new file mode 100644
index 000000000..9f957ada3
Binary files /dev/null and b/beta/public/images/team/mofei-zhang.png differ
diff --git a/beta/public/images/team/rickhanlonii.jpg b/beta/public/images/team/rickhanlonii.jpg
new file mode 100644
index 000000000..9165db5bc
Binary files /dev/null and b/beta/public/images/team/rickhanlonii.jpg differ
diff --git a/beta/public/images/team/sam.jpg b/beta/public/images/team/sam.jpg
new file mode 100644
index 000000000..f73474b91
Binary files /dev/null and b/beta/public/images/team/sam.jpg differ
diff --git a/beta/public/images/team/sathya.jpg b/beta/public/images/team/sathya.jpg
new file mode 100644
index 000000000..3d8ca7d58
Binary files /dev/null and b/beta/public/images/team/sathya.jpg differ
diff --git a/beta/public/images/team/sebmarkbage.jpg b/beta/public/images/team/sebmarkbage.jpg
new file mode 100644
index 000000000..b73e13cd7
Binary files /dev/null and b/beta/public/images/team/sebmarkbage.jpg differ
diff --git a/beta/public/images/team/sebsilbermann.jpg b/beta/public/images/team/sebsilbermann.jpg
new file mode 100644
index 000000000..f6fa04b37
Binary files /dev/null and b/beta/public/images/team/sebsilbermann.jpg differ
diff --git a/content/images/team/sethwebster.jpg b/beta/public/images/team/seth.jpg
similarity index 100%
rename from content/images/team/sethwebster.jpg
rename to beta/public/images/team/seth.jpg
diff --git a/beta/public/images/team/sophiebits.jpg b/beta/public/images/team/sophiebits.jpg
new file mode 100644
index 000000000..da5548aca
Binary files /dev/null and b/beta/public/images/team/sophiebits.jpg differ
diff --git a/beta/public/images/team/tianyu.jpg b/beta/public/images/team/tianyu.jpg
new file mode 100644
index 000000000..aeb6ed9fa
Binary files /dev/null and b/beta/public/images/team/tianyu.jpg differ
diff --git a/beta/public/images/team/yuzhi.jpg b/beta/public/images/team/yuzhi.jpg
new file mode 100644
index 000000000..c3f4175d7
Binary files /dev/null and b/beta/public/images/team/yuzhi.jpg differ
diff --git a/beta/public/images/tutorial/board-filled-with-ones.png b/beta/public/images/tutorial/board-filled-with-ones.png
new file mode 100644
index 000000000..d4ed6805a
Binary files /dev/null and b/beta/public/images/tutorial/board-filled-with-ones.png differ
diff --git a/beta/public/images/tutorial/board-filled-with-value.png b/beta/public/images/tutorial/board-filled-with-value.png
new file mode 100644
index 000000000..f3badc7f6
Binary files /dev/null and b/beta/public/images/tutorial/board-filled-with-value.png differ
diff --git a/beta/public/images/tutorial/codesandbox-devtools.png b/beta/public/images/tutorial/codesandbox-devtools.png
new file mode 100644
index 000000000..3ef9b2f8f
Binary files /dev/null and b/beta/public/images/tutorial/codesandbox-devtools.png differ
diff --git a/beta/public/images/tutorial/devtools-select.gif b/beta/public/images/tutorial/devtools-select.gif
new file mode 100644
index 000000000..dd1e1aa61
Binary files /dev/null and b/beta/public/images/tutorial/devtools-select.gif differ
diff --git a/beta/public/images/tutorial/empty-board.png b/beta/public/images/tutorial/empty-board.png
new file mode 100644
index 000000000..f10f05046
Binary files /dev/null and b/beta/public/images/tutorial/empty-board.png differ
diff --git a/beta/public/images/tutorial/nine-x-filled-squares.png b/beta/public/images/tutorial/nine-x-filled-squares.png
new file mode 100644
index 000000000..164334e6b
Binary files /dev/null and b/beta/public/images/tutorial/nine-x-filled-squares.png differ
diff --git a/beta/public/images/tutorial/number-filled-board.png b/beta/public/images/tutorial/number-filled-board.png
new file mode 100644
index 000000000..f510d00bb
Binary files /dev/null and b/beta/public/images/tutorial/number-filled-board.png differ
diff --git a/beta/public/images/tutorial/o-replaces-x.gif b/beta/public/images/tutorial/o-replaces-x.gif
new file mode 100644
index 000000000..cb0c63691
Binary files /dev/null and b/beta/public/images/tutorial/o-replaces-x.gif differ
diff --git a/beta/public/images/tutorial/react-starter-code-codesandbox.png b/beta/public/images/tutorial/react-starter-code-codesandbox.png
new file mode 100644
index 000000000..66fb0fdf1
Binary files /dev/null and b/beta/public/images/tutorial/react-starter-code-codesandbox.png differ
diff --git a/beta/public/images/tutorial/tictac-adding-x-s.gif b/beta/public/images/tutorial/tictac-adding-x-s.gif
new file mode 100644
index 000000000..0f17188c8
Binary files /dev/null and b/beta/public/images/tutorial/tictac-adding-x-s.gif differ
diff --git a/beta/public/images/tutorial/two-x-filled-squares.png b/beta/public/images/tutorial/two-x-filled-squares.png
new file mode 100644
index 000000000..35638bc0d
Binary files /dev/null and b/beta/public/images/tutorial/two-x-filled-squares.png differ
diff --git a/beta/public/images/tutorial/x-filled-square.png b/beta/public/images/tutorial/x-filled-square.png
new file mode 100644
index 000000000..2b42baad9
Binary files /dev/null and b/beta/public/images/tutorial/x-filled-square.png differ
diff --git a/beta/public/js/jsfiddle-integration-babel.js b/beta/public/js/jsfiddle-integration-babel.js
new file mode 100644
index 000000000..006c79c8a
--- /dev/null
+++ b/beta/public/js/jsfiddle-integration-babel.js
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+// Do not delete or move this file.
+// Many fiddles reference it so we have to keep it here.
+(function() {
+  var tag = document.querySelector(
+    'script[type="application/javascript;version=1.7"]'
+  );
+  if (!tag || tag.textContent.indexOf('window.onload=function(){') !== -1) {
+    alert('Bad JSFiddle configuration, please fork the original React JSFiddle');
+  }
+  tag.setAttribute('type', 'text/babel');
+  tag.textContent = tag.textContent.replace(/^\/\/<!\[CDATA\[/, '');
+})();
diff --git a/beta/public/js/jsfiddle-integration.js b/beta/public/js/jsfiddle-integration.js
new file mode 100644
index 000000000..fcf09e43f
--- /dev/null
+++ b/beta/public/js/jsfiddle-integration.js
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+// Do not delete or move this file.
+// Many fiddles reference it so we have to keep it here.
+(function() {
+  var tag = document.querySelector(
+    'script[type="application/javascript;version=1.7"]'
+  );
+  if (!tag || tag.textContent.indexOf('window.onload=function(){') !== -1) {
+    alert('Bad JSFiddle configuration, please fork the original React JSFiddle');
+  }
+  tag.setAttribute('type', 'text/jsx;harmony=true');
+  tag.textContent = tag.textContent.replace(/^\/\/<!\[CDATA\[/, '');
+})();
diff --git a/beta/public/logo-180x180.png b/beta/public/logo-180x180.png
new file mode 100644
index 000000000..2b1f8704a
Binary files /dev/null and b/beta/public/logo-180x180.png differ
diff --git a/beta/public/logo-512x512.png b/beta/public/logo-512x512.png
new file mode 100644
index 000000000..e7b803863
Binary files /dev/null and b/beta/public/logo-512x512.png differ
diff --git a/beta/public/logo-og.png b/beta/public/logo-og.png
new file mode 100644
index 000000000..d2e830d37
Binary files /dev/null and b/beta/public/logo-og.png differ
diff --git a/beta/public/robots.txt b/beta/public/robots.txt
new file mode 100644
index 000000000..eb0536286
--- /dev/null
+++ b/beta/public/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:
diff --git a/beta/scripts/downloadFonts.js b/beta/scripts/downloadFonts.js
new file mode 100644
index 000000000..098513ac9
--- /dev/null
+++ b/beta/scripts/downloadFonts.js
@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+const {execSync} = require('child_process');
+
+// So that we don't need to check them into the repo.
+// Serving them from the same domain is better for perf so do this on deploy.
+execSync(
+  'curl https://conf.reactjs.org/fonts/Optimistic_Display_W_Lt.woff2 --output public/fonts/Optimistic_Display_W_Lt.woff2'
+);
+execSync(
+  'curl https://conf.reactjs.org/fonts/Optimistic_Display_W_Md.woff2 --output public/fonts/Optimistic_Display_W_Md.woff2'
+);
+execSync(
+  'curl https://conf.reactjs.org/fonts/Optimistic_Display_W_Bd.woff2 --output public/fonts/Optimistic_Display_W_Bd.woff2'
+);
diff --git a/beta/scripts/generateBlogIndex.js b/beta/scripts/generateBlogIndex.js
new file mode 100644
index 000000000..b9deaa585
--- /dev/null
+++ b/beta/scripts/generateBlogIndex.js
@@ -0,0 +1,69 @@
+const fs = require('fs-extra');
+const path = require('path');
+const fm = require('gray-matter');
+const globby = require('globby');
+const parseISO = require('date-fns/parseISO');
+const readingTime = require('reading-time');
+const {markdownToHtml} = require('../plugins/markdownToHtml');
+
+/**
+ * This looks at the ./src/pages/blog directory and creates a route manifest that can be used
+ * in the sidebar and footers, and (in theory) category and author pages.
+ *
+ * For now, the blog manifest is a big array in reverse chronological order.
+ */
+Promise.resolve()
+  .then(async () => {
+    const routes = [];
+    const blogPosts = await globby('src/pages/blog/**/*.md');
+
+    for (let postpath of blogPosts) {
+      const [year, month, day, title] = postpath
+        .replace('src/pages/blog/', '')
+        .split('/');
+
+      const rawStr = await fs.readFile(postpath, 'utf8');
+      const {data, excerpt, content} = fm(rawStr, {
+        excerpt: function firstLine(file, options) {
+          file.excerpt = file.content.split('\n').slice(0, 2).join(' ');
+        },
+      });
+      const rendered = await markdownToHtml(excerpt.trimLeft().trim());
+
+      routes.unshift({
+        path: postpath.replace('src/pages', ''),
+        date: [year, month, day].join('-'),
+        title: data.title,
+        author: data.author,
+        excerpt: rendered,
+        readingTime: readingTime(content).text,
+      });
+    }
+
+    const sorted = routes.sort((post1, post2) =>
+      parseISO(post1.date) > parseISO(post2.date) ? -1 : 1
+    );
+    const blogManifest = {
+      routes: sorted,
+    };
+    const blogRecentSidebar = {
+      routes: [
+        {
+          title: 'Recent Posts',
+          path: '/blog',
+          heading: true,
+          routes: sorted.slice(0, 25),
+        },
+      ],
+    };
+
+    await fs.writeFile(
+      path.resolve('./src/blogIndex.json'),
+      JSON.stringify(blogManifest, null, 2)
+    );
+    await fs.writeFile(
+      path.resolve('./src/blogIndexRecent.json'),
+      JSON.stringify(blogRecentSidebar, null, 2)
+    );
+  })
+  .catch(console.error);
diff --git a/beta/scripts/generateRSS.js b/beta/scripts/generateRSS.js
new file mode 100644
index 000000000..a08c7e2ad
--- /dev/null
+++ b/beta/scripts/generateRSS.js
@@ -0,0 +1,46 @@
+const RSS = require('rss');
+const fs = require('fs-extra');
+const authorsJson = require('../src/authors.json');
+const blogIndexJson = require('../src/blogIndex.json');
+const parse = require('date-fns/parse');
+
+function removeFromLast(path, key) {
+  const i = path.lastIndexOf(key);
+  return i === -1 ? path : path.substring(0, i);
+}
+
+const SITE_URL = 'https://reactjs.org';
+
+function generate() {
+  const feed = new RSS({
+    title: 'React.js Blog',
+    site_url: SITE_URL,
+    feed_url: SITE_URL + '/feed.xml',
+  });
+
+  blogIndexJson.routes.map((meta) => {
+    feed.item({
+      title: meta.title,
+      guid: removeFromLast(meta.path, '.'),
+      url: SITE_URL + removeFromLast(meta.path, '.'),
+      date: parse(meta.date, 'yyyy-MM-dd', new Date()),
+      description: meta.description,
+      custom_elements: [].concat(
+        meta.author.map((author) => ({
+          author: [{ name: authorsJson[author].name }],
+        }))
+      ),
+    });
+  });
+
+  const rss = feed.xml({ indent: true });
+
+  fs.writeFileSync('./.next/static/feed.xml', rss);
+}
+
+try {
+  generate();
+} catch (error) {
+  console.error('Error generating rss feed');
+  throw error;
+}
diff --git a/beta/scripts/generateRedirects.js b/beta/scripts/generateRedirects.js
new file mode 100644
index 000000000..b6e23b58a
--- /dev/null
+++ b/beta/scripts/generateRedirects.js
@@ -0,0 +1,81 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+const resolve = require('path').resolve;
+const {writeFile} = require('fs-extra');
+const readFileSync = require('fs').readFileSync;
+const safeLoad = require('js-yaml').safeLoad;
+const path = require('path');
+const versionsFile = resolve(__dirname, '../../content/versions.yml');
+const file = readFileSync(versionsFile, 'utf8');
+const versions = safeLoad(file);
+const redirectsFilePath = path.join('vercel.json');
+
+function writeRedirectsFile(redirects, redirectsFilePath) {
+  if (!redirects.length) {
+    return null;
+  }
+
+  /**
+   * We will first read the old config to validate if the redirect already exists in the json
+   */
+  const vercelConfigPath = resolve(__dirname, '../../vercel.json');
+  const vercelConfigFile = readFileSync(vercelConfigPath);
+  const oldConfigContent = JSON.parse(vercelConfigFile);
+  /**
+   * Map data as vercel expects it to be
+   */
+
+  let vercelRedirects = {};
+
+  redirects.forEach((redirect) => {
+    const {fromPath, isPermanent, toPath} = redirect;
+
+    vercelRedirects[fromPath] = {
+      destination: toPath,
+      permanent: !!isPermanent,
+    };
+  });
+
+  /**
+   * Make sure we dont have the same redirect already
+   */
+  oldConfigContent.redirects.forEach((data) => {
+    if(vercelRedirects[data.source]){
+      delete vercelRedirects[data.source];
+    }
+  });
+
+  /**
+   * Serialize the object to array of objects
+   */
+  let newRedirects = [];
+  Object.keys(vercelRedirects).forEach((value) =>
+    newRedirects.push({
+      source: value,
+      destination: vercelRedirects[value].destination,
+      permanent: !!vercelRedirects[value].isPermanent,
+    })
+  );
+
+  /**
+   * We already have a vercel.json so we spread the new contents along with old ones
+   */
+  const newContents = {
+    ...oldConfigContent,
+    redirects: [...oldConfigContent.redirects, ...newRedirects],
+  };
+  writeFile(redirectsFilePath, JSON.stringify(newContents, null, 2));
+}
+
+// versions.yml structure is [{path: string, url: string, ...}, ...]
+writeRedirectsFile(
+  versions
+    .filter((version) => version.path && version.url)
+    .map((version) => ({
+      fromPath: version.path,
+      toPath: version.url,
+    })),
+  redirectsFilePath
+);
diff --git a/beta/scripts/headingIDHelpers/generateHeadingIDs.js b/beta/scripts/headingIDHelpers/generateHeadingIDs.js
new file mode 100644
index 000000000..40925d444
--- /dev/null
+++ b/beta/scripts/headingIDHelpers/generateHeadingIDs.js
@@ -0,0 +1,110 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+// To do: Make this ESM.
+// To do: properly check heading numbers (headings with the same text get
+// numbered, this script doesn’t check that).
+
+const assert = require('assert');
+const fs = require('fs');
+const GithubSlugger = require('github-slugger');
+const walk = require('./walk');
+
+let modules;
+
+function stripLinks(line) {
+  return line.replace(/\[([^\]]+)\]\([^)]+\)/, (match, p1) => p1);
+}
+
+function addHeaderID(line, slugger) {
+  // check if we're a header at all
+  if (!line.startsWith('#')) {
+    return line;
+  }
+
+  const match =
+    /^(#+\s+)(.+?)(\s*\{(?:\/\*|#)([^\}\*\/]+)(?:\*\/)?\}\s*)?$/.exec(line);
+  const before = match[1] + match[2];
+  const proc = modules
+    .unified()
+    .use(modules.remarkParse)
+    .use(modules.remarkSlug);
+  const tree = proc.runSync(proc.parse(before));
+  const head = tree.children[0];
+  assert(
+    head && head.type === 'heading',
+    'expected `' +
+      before +
+      '` to be a heading, is it using a normal space after `#`?'
+  );
+  const autoId = head.data.id;
+  const existingId = match[4];
+  const id = existingId || autoId;
+  // Ignore numbers:
+  const cleanExisting = existingId
+    ? existingId.replace(/-\d+$/, '')
+    : undefined;
+  const cleanAuto = autoId.replace(/-\d+$/, '');
+
+  if (cleanExisting && cleanExisting !== cleanAuto) {
+    console.log(
+      'Note: heading `%s` has a different ID (`%s`) than what GH generates for it: `%s`:',
+      before,
+      existingId,
+      autoId
+    );
+  }
+
+  return match[1] + match[2] + ' {/*' + id + '*/}';
+}
+
+function addHeaderIDs(lines) {
+  // Sluggers should be per file
+  const slugger = new GithubSlugger();
+  let inCode = false;
+  const results = [];
+  lines.forEach((line) => {
+    // Ignore code blocks
+    if (line.startsWith('```')) {
+      inCode = !inCode;
+      results.push(line);
+      return;
+    }
+    if (inCode) {
+      results.push(line);
+      return;
+    }
+
+    results.push(addHeaderID(line, slugger));
+  });
+  return results;
+}
+
+async function main(paths) {
+  paths = paths.length === 0 ? ['src/content'] : paths;
+
+  const [unifiedMod, remarkParseMod, remarkSlugMod] = await Promise.all([
+    import('unified'),
+    import('remark-parse'),
+    import('remark-slug'),
+  ]);
+  const unified = unifiedMod.unified;
+  const remarkParse = remarkParseMod.default;
+  const remarkSlug = remarkSlugMod.default;
+  modules = {unified, remarkParse, remarkSlug};
+  const files = paths.map((path) => [...walk(path)]).flat();
+
+  files.forEach((file) => {
+    if (!(file.endsWith('.md') || file.endsWith('.mdx'))) {
+      return;
+    }
+
+    const content = fs.readFileSync(file, 'utf8');
+    const lines = content.split('\n');
+    const updatedLines = addHeaderIDs(lines);
+    fs.writeFileSync(file, updatedLines.join('\n'));
+  });
+}
+
+module.exports = main;
diff --git a/beta/scripts/headingIDHelpers/validateHeadingIDs.js b/beta/scripts/headingIDHelpers/validateHeadingIDs.js
new file mode 100644
index 000000000..c3cf1ab8c
--- /dev/null
+++ b/beta/scripts/headingIDHelpers/validateHeadingIDs.js
@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+const fs = require('fs');
+const walk = require('./walk');
+
+/**
+ * Validate if there is a custom heading id and exit if there isn't a heading
+ * @param {string} line
+ * @returns
+ */
+function validateHeaderId(line) {
+  if (!line.startsWith('#')) {
+    return;
+  }
+
+  const match = /\{\/\*(.*?)\*\/}/.exec(line);
+  const id = match;
+  if (!id) {
+    console.error('Run yarn fix-headings to generate headings.');
+    process.exit(1);
+  }
+}
+
+/**
+ * Loops through the lines to skip code blocks
+ * @param {Array<string>} lines
+ */
+function validateHeaderIds(lines) {
+  let inCode = false;
+  const results = [];
+  lines.forEach((line) => {
+    // Ignore code blocks
+    if (line.startsWith('```')) {
+      inCode = !inCode;
+
+      results.push(line);
+      return;
+    }
+    if (inCode) {
+      results.push(line);
+      return;
+    }
+    validateHeaderId(line);
+  });
+}
+/**
+ * paths are basically array of path for which we have to validate heading IDs
+ * @param {Array<string>} paths
+ */
+async function main(paths) {
+  paths = paths.length === 0 ? ['src/content'] : paths;
+  const files = paths.map((path) => [...walk(path)]).flat();
+
+  files.forEach((file) => {
+    if (!(file.endsWith('.md') || file.endsWith('.mdx'))) {
+      return;
+    }
+
+    const content = fs.readFileSync(file, 'utf8');
+    const lines = content.split('\n');
+    validateHeaderIds(lines);
+  });
+}
+
+module.exports = main;
diff --git a/beta/scripts/headingIDHelpers/walk.js b/beta/scripts/headingIDHelpers/walk.js
new file mode 100644
index 000000000..721274e09
--- /dev/null
+++ b/beta/scripts/headingIDHelpers/walk.js
@@ -0,0 +1,24 @@
+const fs = require('fs');
+
+module.exports = function walk(dir) {
+  let results = [];
+  /** 
+   * If the param is a directory we can return the file
+   */
+  if(dir.includes('md')){
+    return [dir];
+  }
+  const list = fs.readdirSync(dir);
+  list.forEach(function (file) {
+    file = dir + '/' + file;
+    const stat = fs.statSync(file);
+    if (stat && stat.isDirectory()) {
+      /* Recurse into a subdirectory */
+      results = results.concat(walk(file));
+    } else {
+      /* Is a file */
+      results.push(file);
+    }
+  });
+  return results;
+};
diff --git a/beta/scripts/headingIdLinter.js b/beta/scripts/headingIdLinter.js
new file mode 100644
index 000000000..037e4945f
--- /dev/null
+++ b/beta/scripts/headingIdLinter.js
@@ -0,0 +1,16 @@
+const validateHeaderIds = require('./headingIDHelpers/validateHeadingIDs');
+const generateHeadingIds = require('./headingIDHelpers/generateHeadingIDs');
+
+/** 
+ * yarn lint-heading-ids --> Checks all files and causes an error if heading ID is missing
+ * yarn lint-heading-ids --fix --> Fixes all markdown file's heading IDs
+ * yarn lint-heading-ids path/to/markdown.md --> Checks that particular file for missing heading ID (path can denote a directory or particular file)
+ * yarn lint-heading-ids --fix path/to/markdown.md --> Fixes that particular file's markdown IDs (path can denote a directory or particular file)
+*/
+
+const markdownPaths = process.argv.slice(2);
+if (markdownPaths.includes('--fix')) {
+  generateHeadingIds(markdownPaths.filter((path) => path !== '--fix'));
+} else {
+  validateHeaderIds(markdownPaths);
+}
diff --git a/beta/scripts/migrations/migrateBlogPosts.js b/beta/scripts/migrations/migrateBlogPosts.js
new file mode 100644
index 000000000..8b93c23ab
--- /dev/null
+++ b/beta/scripts/migrations/migrateBlogPosts.js
@@ -0,0 +1,50 @@
+const fs = require('fs-extra');
+const path = require('path');
+const fm = require('gray-matter');
+const globby = require('globby');
+const parse = require('date-fns/parse');
+
+/**
+ * This script takes the gatsby blog posts directory and migrates it.
+ *
+ * In gatsby, blog posts were put in markdown files title YYYY-MM-DD-post-title.md.
+ * This script looks at that directory and then moves posts into folders paths
+ * that match the end URL structure of /blog/YYYY/MM/DD/postitle.md
+ *
+ * This allows us to use MDX in blog posts.
+ */
+
+// I dropped them into src/pages/oldblog
+// @todo remove after migration
+// I am not proud of this. Also, the blog posts needed to be cleaned up for MDX, don't run this again.
+Promise.resolve()
+  .then(async () => {
+    const blogManifest = {};
+    const blogPosts = await globby('src/pages/oldblog/*.md');
+    // console.log(blogPosts);
+    for (let postpath of blogPosts.sort()) {
+      const rawStr = await fs.readFile(postpath, 'utf8');
+      // console.log(rawStr);
+      const {data, content} = fm(rawStr);
+      const cleanPath = postpath.replace('src/pages/oldblog/', '');
+      const yrStr = parseInt(cleanPath.substr(0, 4), 10); // 2013-06-02
+      // console.log(yrStr);
+      const dateStr = cleanPath.substr(0, 10); // 2013-06-02
+      const postFileName = cleanPath.substr(11);
+      // console.log(postFileName, dateStr);
+      const datePath = dateStr.split('-').join('/');
+      // console.log(datePath);
+      const newPath = './src/pages/blog/' + datePath + '/' + postFileName;
+      // console.log(newPath);
+      await fs.ensureFile(path.resolve(newPath));
+      await fs.writeFile(
+        path.resolve(newPath),
+        rawStr
+          .replace('<br>', '<br/>')
+          .replace('<hr>', '<hr/>')
+          .replace('layout: post', '')
+          .replace('\nauthor', '\nlayout: Post\nauthor')
+      );
+    }
+  })
+  .catch(console.error);
diff --git a/beta/scripts/migrations/migratePermalinks.js b/beta/scripts/migrations/migratePermalinks.js
new file mode 100644
index 000000000..ad0303d4a
--- /dev/null
+++ b/beta/scripts/migrations/migratePermalinks.js
@@ -0,0 +1,35 @@
+const fs = require('fs-extra');
+const path = require('path');
+const fm = require('gray-matter');
+const globby = require('globby');
+
+/**
+ * This script ensures that every file in the docs folder is named corresponding
+ * to its respective frontmatter permalink. In the old site, the path of the page was set by
+ * the `permalink` in markdown frontmatter, and not the name of the file itself or it's id.
+ * In the new Next.js site, with its filesystem router, the name of the file must
+ * match exactly to its `permalink`.
+ */
+Promise.resolve()
+  .then(async () => {
+    const pages = await globby('src/pages/docs/**/*.{md,mdx}');
+    for (let sourcePath of pages.sort()) {
+      const rawStr = await fs.readFile(sourcePath, 'utf8');
+      const {data, content} = fm(rawStr);
+      const currentPath = sourcePath
+        .replace('src/pages/', '')
+        .replace('.md', '');
+      const permalink = data.permalink.replace('.html', '');
+      if (permalink !== currentPath) {
+        const destPath = 'src/pages/' + permalink + '.md';
+        try {
+          await fs.move(sourcePath, destPath);
+          console.log(`MOVED: ${sourcePath} --> ${destPath}`);
+        } catch (error) {
+          console.error(`ERROR: ${sourcePath} --> ${destPath}`);
+          console.error(error);
+        }
+      }
+    }
+  })
+  .catch(console.error);
diff --git a/beta/scripts/migrations/migrateRedirects.js b/beta/scripts/migrations/migrateRedirects.js
new file mode 100644
index 000000000..5e0a6ed0e
--- /dev/null
+++ b/beta/scripts/migrations/migrateRedirects.js
@@ -0,0 +1,117 @@
+const fs = require('fs-extra');
+const path = require('path');
+const fm = require('gray-matter');
+const globby = require('globby');
+
+/**
+ * This script takes a look at all the redirect frontmatter and converts it
+ * into a Next.js compatible redirects list. It also merges it with netlify's
+ * _redirects, which we moved by hand below.
+ *
+ * @remarks
+ * In the old gatsby site, redirects were specified in docs and blog post
+ * frontmatter that looks like:
+ *
+ * ---
+ * redirect_from:
+ *   - /docs/old-path.html#maybe-an-anchor
+ * ---
+ */
+
+const netlifyRedirects = [
+  {
+    source: '/html-jsx.html',
+    destination: 'https://magic.reactjs.net/htmltojsx.htm',
+    permanent: true,
+  },
+  {
+    source: '/tips/controlled-input-null-value.html',
+    destination: '/docs/forms.html#controlled-input-null-value',
+    permanent: false, // @todo why were these not permanent on netlify?
+  },
+  {
+    source: '/concurrent',
+    destination: '/docs/concurrent-mode-intro.html',
+    permanent: false,
+  },
+  {
+    source: '/hooks',
+    destination: '/docs/hooks-intro.html',
+    permanent: false,
+  },
+  {
+    source: '/tutorial',
+    destination: '/tutorial/tutorial.html',
+    permanent: false,
+  },
+  {
+    source: '/your-story',
+    destination: 'https://www.surveymonkey.co.uk/r/MVQV2R9',
+    permanent: true,
+  },
+  {
+    source: '/stories',
+    destination: 'https://medium.com/react-community-stories',
+    permanent: true,
+  },
+];
+
+Promise.resolve()
+  .then(async () => {
+    let contentRedirects = [];
+    let redirectPageCount = 0;
+
+    // Get all markdown pages
+    const pages = await globby('src/pages/**/*.{md,mdx}');
+    for (let filepath of pages) {
+      // Read file as string
+      const rawStr = await fs.readFile(filepath, 'utf8');
+      // Extract frontmatter
+      const {data, content} = fm(rawStr);
+      // Look for redirect yaml
+      if (data.redirect_from) {
+        redirectPageCount++;
+
+        let destinationPath = filepath
+          .replace('src/pages', '')
+          .replace('.md', '');
+
+        // Fix /docs/index -> /docs
+        if (destinationPath === '/docs/index') {
+          destinationPath = '/docs';
+        }
+
+        if (destinationPath === '/index') {
+          destinationPath = '/';
+        }
+
+        for (let sourcePath of data.redirect_from) {
+          contentRedirects.push({
+            source: '/' + sourcePath, // add slash
+            destination: destinationPath,
+            permanent: true,
+          });
+        }
+      }
+    }
+    console.log(
+      `Found ${redirectPageCount} pages with \`redirect_from\` frontmatter`
+    );
+    console.log(
+      `Writing ${contentRedirects.length} redirects to redirects.json`
+    );
+
+    await fs.writeFile(
+      path.resolve('./src/redirects.json'),
+      JSON.stringify(
+        {
+          redirects: [...contentRedirects, ...netlifyRedirects],
+        },
+        null,
+        2
+      )
+    );
+
+    console.log('✅ Done writing redirects');
+  })
+  .catch(console.error);
diff --git a/beta/src/authors.json b/beta/src/authors.json
new file mode 100644
index 000000000..76cd5aedd
--- /dev/null
+++ b/beta/src/authors.json
@@ -0,0 +1,130 @@
+{
+  "acdlite": {
+    "name": "Andrew Clark",
+    "url": "https://twitter.com/acdlite"
+  },
+  "benigeri": {
+    "name": "Paul Benigeri",
+    "url": "https://github.com/benigeri"
+  },
+  "bvaughn": {
+    "name": "Brian Vaughn",
+    "url": "https://github.com/bvaughn"
+  },
+  "chenglou": {
+    "name": "Cheng Lou",
+    "url": "https://twitter.com/_chenglou"
+  },
+  "clemmy": {
+    "name": "Clement Hoang",
+    "url": "https://twitter.com/c8hoang"
+  },
+  "Daniel15": {
+    "name": "Daniel Lo Nigro",
+    "url": "https://d.sb/"
+  },
+  "fisherwebdev": {
+    "name": "Bill Fisher",
+    "url": "https://twitter.com/fisherwebdev"
+  },
+  "flarnie": {
+    "name": "Flarnie Marchan",
+    "url": "https://twitter.com/ProbablyFlarnie"
+  },
+  "gaearon": {
+    "name": "Dan Abramov",
+    "url": "https://twitter.com/dan_abramov"
+  },
+  "jaredly": {
+    "name": "Jared Forsyth",
+    "url": "https://twitter.com/jaredforsyth"
+  },
+  "jgebhardt": {
+    "name": "Jonas Gebhardt",
+    "url": "https://twitter.com/jonasgebhardt"
+  },
+  "jimfb": {
+    "name": "Jim Sproch",
+    "url": "http: //www.jimsproch.com"
+  },
+  "jingc": {
+    "name": "Jing Chen",
+    "url": "https://twitter.com/jingc"
+  },
+  "josephsavona": {
+    "name": "Joseph Savona",
+    "url": "https://twitter.com/en_JS"
+  },
+  "keyanzhang": {
+    "name": "Keyan Zhang",
+    "url": "https://twitter.com/keyanzhang"
+  },
+  "kmeht": {
+    "name": "Kunal Mehta",
+    "url": "https://github.com/kmeht"
+  },
+  "LoukaN": {
+    "name": "Lou Husson",
+    "url": "https://twitter.com/loukan42"
+  },
+  "matthewjohnston4": {
+    "name": "Matthew Johnston",
+    "url": "https://github.com/matthewathome"
+  },
+  "nhunzaker": {
+    "name": "Nathan Hunzaker",
+    "url": "https://github.com/nhunzaker"
+  },
+  "petehunt": {
+    "name": "Pete Hunt",
+    "url": "https://twitter.com/floydophone"
+  },
+  "rachelnabors": {
+    "name": "Rachel Nabors",
+    "url": "https://twitter.com/rachelnabors"
+  },
+  "schrockn": {
+    "name": "Nick Schrock",
+    "url": "https://twitter.com/schrockn"
+  },
+  "sebmarkbage": {
+    "name": "Sebastian Markbåge",
+    "url": "https://twitter.com/sebmarkbage"
+  },
+  "sophiebits": {
+    "name": "Sophie Alpert",
+    "url": "https://sophiebits.com/"
+  },
+  "steveluscher": {
+    "name": "Steven Luscher",
+    "url": "https://twitter.com/steveluscher"
+  },
+  "tesseralis": {
+    "name": "Nat Alison",
+    "url": "https://twitter.com/tesseralis"
+  },
+  "threepointone": {
+    "name": "Sunil Pai",
+    "url": "https://twitter.com/threepointone"
+  },
+  "timer": {
+    "name": "Joe Haddad",
+    "url": "https://twitter.com/timer150"
+  },
+  "vjeux": {
+    "name": "Vjeux",
+    "url": "https://twitter.com/vjeux"
+  },
+  "wincent": {
+    "name": "Greg Hurrell",
+    "url": "https://twitter.com/wincent"
+  },
+  "zpao": {
+    "name": "Paul O’Shannessy",
+    "url": "https://twitter.com/zpao"
+  },
+  "tomocchino": {
+    "name": "Tom Occhino",
+    "url": "https://twitter.com/tomocchino"
+  }
+}
diff --git a/beta/src/blogIndex.json b/beta/src/blogIndex.json
new file mode 100644
index 000000000..088a1f82c
--- /dev/null
+++ b/beta/src/blogIndex.json
@@ -0,0 +1,1400 @@
+{
+  "routes": [
+    {
+      "path": "/blog/2020/08/10/react-v17-rc.md",
+      "date": "2020-08-10",
+      "title": "React v17.0 Release Candidate: No New Features",
+      "author": [
+        "gaearon",
+        "rachelnabors"
+      ],
+      "excerpt": "<p>Today, we are publishing the first Release Candidate for React 17. It has been two and a half years since <a href=\"/blog/2017/09/26/react-v16.0.html\">the previous major release of React</a>, which is a long time even by our standards! In this blog post, we will describe the role of this major release, what changes you can expect in it, and how you can try this release.</p>\n",
+      "readingTime": "20 min read"
+    },
+    {
+      "path": "/blog/2020/02/26/react-v16.13.0.md",
+      "date": "2020-02-26",
+      "title": "React v16.13.0",
+      "author": [
+        "threepointone"
+      ],
+      "excerpt": "<p>Today we are releasing React 16.13.0. It contains bugfixes and new deprecation warnings to help prepare for a future major release.</p>\n",
+      "readingTime": "7 min read"
+    },
+    {
+      "path": "/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense.md",
+      "date": "2019-11-06",
+      "title": "Building Great User Experiences with Concurrent Mode and Suspense",
+      "author": [
+        "josephsavona"
+      ],
+      "excerpt": "<p>At React Conf 2019 we announced an <a href=\"/docs/concurrent-mode-adoption#installation\">experimental release</a> of React that supports Concurrent Mode and Suspense. In this post we’ll introduce best practices for using them that we’ve identified through the process of building <a href=\"https://twitter.com/facebook/status/1123322299418124289\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">the new facebook.com</a>.</p>\n",
+      "readingTime": "17 min read"
+    },
+    {
+      "path": "/blog/2019/10/22/react-release-channels.md",
+      "date": "2019-10-22",
+      "title": "Preparing for the Future with React Prereleases",
+      "author": [
+        "acdlite"
+      ],
+      "excerpt": "<p>To share upcoming changes with our partners in the React ecosystem, we’re establishing official prerelease channels. We hope this process will help us make changes to React with confidence, and give developers the opportunity to try out experimental features.</p>\n",
+      "readingTime": "7 min read"
+    },
+    {
+      "path": "/blog/2019/08/15/new-react-devtools.md",
+      "date": "2019-08-15",
+      "title": "Introducing the New React DevTools",
+      "author": [
+        "bvaughn"
+      ],
+      "excerpt": "<p>We are excited to announce a new release of the React Developer Tools, available today in Chrome, Firefox, and (Chromium) Edge!</p>\n",
+      "readingTime": "2 min read"
+    },
+    {
+      "path": "/blog/2019/08/08/react-v16.9.0.md",
+      "date": "2019-08-08",
+      "title": "React v16.9.0 and the Roadmap Update",
+      "author": [
+        "gaearon",
+        "bvaughn"
+      ],
+      "excerpt": "<p>Today we are releasing React 16.9. It contains several new features, bugfixes, and new deprecation warnings to help prepare for a future major release.</p>\n",
+      "readingTime": "11 min read"
+    },
+    {
+      "path": "/blog/2019/02/23/is-react-translated-yet.md",
+      "date": "2019-02-23",
+      "title": "Is React Translated Yet? ¡Sí! Sim! はい！",
+      "author": [
+        "tesseralis"
+      ],
+      "excerpt": "<p>We’re excited to announce an ongoing effort to maintain official translations of the React documentation website into different languages. Thanks to the dedicated efforts of React community members from around the world, React is now being translated into <em>over 30</em> languages! You can find them on the new <a href=\"/languages\">Languages</a> page.</p>\n",
+      "readingTime": "7 min read"
+    },
+    {
+      "path": "/blog/2019/02/06/react-v16.8.0.md",
+      "date": "2019-02-06",
+      "title": "React v16.8: The One With Hooks",
+      "author": [
+        "gaearon"
+      ],
+      "excerpt": "<p>With React 16.8, <a href=\"/docs/hooks-intro.html\">React Hooks</a> are available in a stable release!</p>\n",
+      "readingTime": "7 min read"
+    },
+    {
+      "path": "/blog/2018/12/19/react-v-16-7.md",
+      "date": "2018-12-19",
+      "title": "React v16.7: No, This Is Not the One With Hooks",
+      "author": [
+        "acdlite"
+      ],
+      "excerpt": "<p>Our latest release includes an important performance bugfix for <code>React.lazy</code>. Although there are no API changes, we’re releasing it as a minor instead of a patch.</p>\n",
+      "readingTime": "3 min read"
+    },
+    {
+      "path": "/blog/2018/11/27/react-16-roadmap.md",
+      "date": "2018-11-27",
+      "title": "React 16.x Roadmap",
+      "author": [
+        "gaearon"
+      ],
+      "excerpt": "<p>You might have heard about features like “Hooks”, “Suspense”, and “Concurrent Rendering” in the previous blog posts and talks. In this post, we’ll look at how they fit together and the expected timeline for their availability in a stable release of React.</p>\n",
+      "readingTime": "14 min read"
+    },
+    {
+      "path": "/blog/2018/11/13/react-conf-recap.md",
+      "date": "2018-11-13",
+      "title": "React Conf recap: Hooks, Suspense, and Concurrent Rendering",
+      "author": [
+        "tomocchino"
+      ],
+      "excerpt": "<p>This year’s <a href=\"https://conf.reactjs.org/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">React Conf</a> took place on October 25 and 26 in Henderson, Nevada, where more than 600 attendees gathered to discuss the latest in UI engineering.</p>\n",
+      "readingTime": "2 min read"
+    },
+    {
+      "path": "/blog/2018/10/23/react-v-16-6.md",
+      "date": "2018-10-23",
+      "title": "React v16.6.0: lazy, memo and contextType",
+      "author": [
+        "sebmarkbage"
+      ],
+      "excerpt": "<p>Today we’re releasing React 16.6 with a few new convenient features. A form of PureComponent/shouldComponentUpdate for function components, a way to do code splitting using Suspense and an easier way to consume Context from class components.</p>\n",
+      "readingTime": "5 min read"
+    },
+    {
+      "path": "/blog/2018/10/01/create-react-app-v2.md",
+      "date": "2018-10-01",
+      "title": "Create React App 2.0: Babel 7, Sass, and More",
+      "author": [
+        "timer",
+        "gaearon"
+      ],
+      "excerpt": "<p>Create React App 2.0 has been released today, and it brings a year’s worth of improvements in a single dependency update.</p>\n",
+      "readingTime": "6 min read"
+    },
+    {
+      "path": "/blog/2018/09/10/introducing-the-react-profiler.md",
+      "date": "2018-09-10",
+      "title": "Introducing the React Profiler",
+      "author": [
+        "bvaughn"
+      ],
+      "excerpt": "<p>React 16.5 adds support for a new DevTools profiler plugin.</p>\n",
+      "readingTime": "8 min read"
+    },
+    {
+      "path": "/blog/2018/08/01/react-v-16-4-2.md",
+      "date": "2018-08-01",
+      "title": "React v16.4.2: Server-side vulnerability fix",
+      "author": [
+        "gaearon"
+      ],
+      "excerpt": "<p>We discovered a minor vulnerability that might affect some apps using ReactDOMServer. We are releasing a patch version for every affected React minor release so that you can upgrade with no friction. Read on for more details.</p>\n",
+      "readingTime": "4 min read"
+    },
+    {
+      "path": "/blog/2018/06/07/you-probably-dont-need-derived-state.md",
+      "date": "2018-06-07",
+      "title": "You Probably Don't Need Derived State",
+      "author": [
+        "bvaughn"
+      ],
+      "excerpt": "<p>React 16.4 included a <a href=\"/blog/2018/05/23/react-v-16-4#bugfix-for-getderivedstatefromprops\">bugfix for getDerivedStateFromProps</a> which caused some existing bugs in React components to reproduce more consistently. If this release exposed a case where your application was using an anti-pattern and didn’t work properly after the fix, we’re sorry for the churn. In this post, we will explain some common anti-patterns with derived state and our preferred alternatives.</p>\n",
+      "readingTime": "14 min read"
+    },
+    {
+      "path": "/blog/2018/05/23/react-v-16-4.md",
+      "date": "2018-05-23",
+      "title": "React v16.4.0: Pointer Events",
+      "author": [
+        "acdlite"
+      ],
+      "excerpt": "<p>The latest minor release adds support for an oft-requested feature: pointer events!</p>\n",
+      "readingTime": "5 min read"
+    },
+    {
+      "path": "/blog/2018/03/29/react-v-16-3.md",
+      "date": "2018-03-29",
+      "title": "React v16.3.0: New lifecycles and context API",
+      "author": [
+        "bvaughn"
+      ],
+      "excerpt": "<p>A few days ago, we <a href=\"/blog/2018/03/27/update-on-async-rendering\">wrote a post about upcoming changes to our legacy lifecycle methods</a>, including gradual migration strategies. In React 16.3.0, we are adding a few new lifecycle methods to assist with that migration. We are also introducing new APIs for long requested features: an official context API, a ref forwarding API, and an ergonomic ref API.</p>\n",
+      "readingTime": "6 min read"
+    },
+    {
+      "path": "/blog/2018/03/27/update-on-async-rendering.md",
+      "date": "2018-03-27",
+      "title": "Update on Async Rendering",
+      "author": [
+        "bvaughn"
+      ],
+      "excerpt": "<p>For over a year, the React team has been working to implement asynchronous rendering. Last month during his talk at JSConf Iceland, <a href=\"/blog/2018/03/01/sneak-peek-beyond-react-16\">Dan unveiled some of the exciting new possibilities async rendering unlocks</a>. Now we’d like to share with you some of the lessons we’ve learned while working on these features, and some recipes to help prepare your components for async rendering when it launches.</p>\n",
+      "readingTime": "12 min read"
+    },
+    {
+      "path": "/blog/2018/03/01/sneak-peek-beyond-react-16.md",
+      "date": "2018-03-01",
+      "title": "Sneak Peek: Beyond React 16",
+      "author": [
+        "sophiebits"
+      ],
+      "excerpt": "<p><a href=\"https://twitter.com/dan_abramov\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Dan Abramov</a> from our team just spoke at <a href=\"https://2018.jsconf.is/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">JSConf Iceland 2018</a> with a preview of some new features we’ve been working on in React. The talk opens with a question: “With vast differences in computing power and network speed, how do we deliver the best user experience for everyone?”</p>\n",
+      "readingTime": "2 min read"
+    },
+    {
+      "path": "/blog/2017/12/15/improving-the-repository-infrastructure.md",
+      "date": "2017-12-15",
+      "title": "Behind the Scenes: Improving the Repository Infrastructure",
+      "author": [
+        "gaearon",
+        "bvaughn"
+      ],
+      "excerpt": "<p>As we worked on <a href=\"/blog/2017/09/26/react-v16.0\">React 16</a>, we revamped the folder structure and much of the build tooling in the React repository. Among other things, we introduced projects such as <a href=\"https://rollupjs.org/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Rollup</a>, <a href=\"https://prettier.io/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Prettier</a>, and <a href=\"https://developers.google.com/closure/compiler/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Google Closure Compiler</a> into our workflow. People often ask us questions about how we use those tools. In this post, we would like to share some of the changes that we’ve made to our build and test infrastructure in 2017, and what motivated them.</p>\n",
+      "readingTime": "30 min read"
+    },
+    {
+      "path": "/blog/2017/12/07/introducing-the-react-rfc-process.md",
+      "date": "2017-12-07",
+      "title": "Introducing the React RFC Process",
+      "author": [
+        "acdlite"
+      ],
+      "excerpt": "<p>We’re adopting an RFC (“request for comments”) process for contributing ideas to React.</p>\n",
+      "readingTime": "2 min read"
+    },
+    {
+      "path": "/blog/2017/11/28/react-v16.2.0-fragment-support.md",
+      "date": "2017-11-28",
+      "title": "React v16.2.0: Improved Support for Fragments",
+      "author": [
+        "clemmy"
+      ],
+      "excerpt": "<p>React 16.2 is now available! The biggest addition is improved support for returning multiple children from a component’s render method. We call this feature <em>fragments</em>:</p>\n",
+      "readingTime": "8 min read"
+    },
+    {
+      "path": "/blog/2017/09/26/react-v16.0.md",
+      "date": "2017-09-26",
+      "title": "React v16.0",
+      "author": [
+        "acdlite"
+      ],
+      "excerpt": "<p>We’re excited to announce the release of React v16.0! Among the changes are some long-standing feature requests, including <a href=\"#new-render-return-types-fragments-and-strings\"><strong>fragments</strong></a>, <a href=\"#better-error-handling\"><strong>error boundaries</strong></a>, <a href=\"#portals\"><strong>portals</strong></a>, support for <a href=\"#support-for-custom-dom-attributes\"><strong>custom DOM attributes</strong></a>, improved <a href=\"#better-server-side-rendering\"><strong>server-side rendering</strong></a>, and <a href=\"#reduced-file-size\"><strong>reduced file size</strong></a>.</p>\n",
+      "readingTime": "11 min read"
+    },
+    {
+      "path": "/blog/2017/09/25/react-v15.6.2.md",
+      "date": "2017-09-25",
+      "title": "React v15.6.2",
+      "author": [
+        "nhunzaker"
+      ],
+      "excerpt": "<p>Today we’re sending out React 15.6.2. In 15.6.1, we shipped a few fixes for change events and inputs that had some unintended consequences. Those regressions have been ironed out, and we’ve also included a few more fixes to improve the stability of React across all browsers.</p>\n",
+      "readingTime": "3 min read"
+    },
+    {
+      "path": "/blog/2017/09/08/dom-attributes-in-react-16.md",
+      "date": "2017-09-08",
+      "title": "DOM Attributes in React 16",
+      "author": [
+        "gaearon"
+      ],
+      "excerpt": "<p>In the past, React used to ignore unknown DOM attributes. If you wrote JSX with an attribute that React doesn’t recognize, React would just skip it. For example, this:</p>\n",
+      "readingTime": "6 min read"
+    },
+    {
+      "path": "/blog/2017/07/26/error-handling-in-react-16.md",
+      "date": "2017-07-26",
+      "title": "Error Handling in React 16",
+      "author": [
+        "gaearon"
+      ],
+      "excerpt": "<p>As React 16 release is getting closer, we would like to announce a few changes to how React handles JavaScript errors inside components. These changes are included in React 16 beta versions, and will be a part of React 16.</p>\n",
+      "readingTime": "5 min read"
+    },
+    {
+      "path": "/blog/2017/06/13/react-v15.6.0.md",
+      "date": "2017-06-13",
+      "title": "React v15.6.0",
+      "author": [
+        "flarnie"
+      ],
+      "excerpt": "<p>Today we are releasing React 15.6.0. As we prepare for React 16.0, we have been fixing and cleaning up many things. This release continues to pave the way.</p>\n",
+      "readingTime": "4 min read"
+    },
+    {
+      "path": "/blog/2017/05/18/whats-new-in-create-react-app.md",
+      "date": "2017-05-18",
+      "title": "What's New in Create React App",
+      "author": [
+        "gaearon"
+      ],
+      "excerpt": "<p>Less than a year ago, we introduced <a href=\"/blog/2016/07/22/create-apps-with-no-configuration\">Create React App</a> as an officially supported way to create apps with zero configuration. The project has since enjoyed tremendous growth, with over 950 commits by more than 250 contributors.</p>\n",
+      "readingTime": "6 min read"
+    },
+    {
+      "path": "/blog/2017/04/07/react-v15.5.0.md",
+      "date": "2017-04-07",
+      "title": "React v15.5.0",
+      "author": [
+        "acdlite"
+      ],
+      "excerpt": "<p>It’s been exactly one year since the last breaking change to React. Our next major release, React 16, will include some exciting improvements, including a <a href=\"https://www.youtube.com/watch?v=ZCuYPiUIONs\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">complete rewrite</a> of React’s internals. <a href=\"/docs/design-principles#stability\">We take stability seriously</a>, and are committed to bringing those improvements to all of our users with minimal effort.</p>\n",
+      "readingTime": "7 min read"
+    },
+    {
+      "path": "/blog/2016/11/16/react-v15.4.0.md",
+      "date": "2016-11-16",
+      "title": "React v15.4.0",
+      "author": [
+        "gaearon"
+      ],
+      "excerpt": "<p>Today we are releasing React 15.4.0.</p>\n",
+      "readingTime": "6 min read"
+    },
+    {
+      "path": "/blog/2016/09/28/our-first-50000-stars.md",
+      "date": "2016-09-28",
+      "title": "Our First 50,000 Stars",
+      "author": [
+        "vjeux"
+      ],
+      "excerpt": "<p>Just three and a half years ago we open sourced a little JavaScript library called React. The journey since that day has been incredibly exciting.</p>\n",
+      "readingTime": "10 min read"
+    },
+    {
+      "path": "/blog/2016/08/05/relay-state-of-the-state.md",
+      "date": "2016-08-05",
+      "title": "Relay: State of the State",
+      "author": [
+        "josephsavona"
+      ],
+      "excerpt": "<p>This month marks a year since we released Relay and we’d like to share an update on the project and what’s next.</p>\n",
+      "readingTime": "8 min read"
+    },
+    {
+      "path": "/blog/2016/07/22/create-apps-with-no-configuration.md",
+      "date": "2016-07-22",
+      "title": "Create Apps with No Configuration",
+      "author": [
+        "gaearon"
+      ],
+      "excerpt": "<p><strong><a href=\"https://github.com/facebookincubator/create-react-app\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Create React App</a></strong> is a new officially supported way to create single-page React applications. It offers a modern build setup with no configuration.</p>\n",
+      "readingTime": "7 min read"
+    },
+    {
+      "path": "/blog/2016/07/13/mixins-considered-harmful.md",
+      "date": "2016-07-13",
+      "title": "Mixins Considered Harmful",
+      "author": [
+        "gaearon"
+      ],
+      "excerpt": "<p>“How do I share the code between several components?” is one of the first questions that people ask when they learn React. Our answer has always been to use component composition for code reuse. You can define a component and use it in several other components.</p>\n",
+      "readingTime": "20 min read"
+    },
+    {
+      "path": "/blog/2016/07/11/introducing-reacts-error-code-system.md",
+      "date": "2016-07-11",
+      "title": "Introducing React's Error Code System",
+      "author": [
+        "keyanzhang"
+      ],
+      "excerpt": "<p>Building a better developer experience has been one of the things that React deeply cares about, and a crucial part of it is to detect anti-patterns/potential errors early and provide helpful error messages when things (may) go wrong. However, most of these only exist in development mode; in production, we avoid having extra expensive assertions and sending down full error messages in order to reduce the number of bytes sent over the wire.</p>\n",
+      "readingTime": "2 min read"
+    },
+    {
+      "path": "/blog/2016/04/08/react-v15.0.1.md",
+      "date": "2016-04-08",
+      "title": "React v15.0.1",
+      "author": [
+        "zpao"
+      ],
+      "excerpt": "<p>Yesterday afternoon we shipped v15.0.0 and quickly got some feedback about a couple of issues. We apologize for these problems and we’ve been working since then to make sure we get fixes into your hands as quickly as possible.</p>\n",
+      "readingTime": "3 min read"
+    },
+    {
+      "path": "/blog/2016/04/07/react-v15.md",
+      "date": "2016-04-07",
+      "title": "React v15.0",
+      "author": [
+        "gaearon"
+      ],
+      "excerpt": "<p>We would like to thank the React community for reporting issues and regressions in the release candidates on our <a href=\"https://github.com/facebook/react/issues/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">issue tracker</a>. Over the last few weeks we fixed those issues, and now, after two release candidates, we are excited to finally release the stable version of React 15.</p>\n",
+      "readingTime": "15 min read"
+    },
+    {
+      "path": "/blog/2016/03/29/react-v0.14.8.md",
+      "date": "2016-03-29",
+      "title": "React v0.14.8",
+      "author": [
+        "gaearon"
+      ],
+      "excerpt": "<p>We have already released two release candidates for React 15, and the final version is coming soon.</p>\n",
+      "readingTime": "1 min read"
+    },
+    {
+      "path": "/blog/2016/03/16/react-v15-rc2.md",
+      "date": "2016-03-16",
+      "title": "React v15.0 Release Candidate 2",
+      "author": [
+        "zpao"
+      ],
+      "excerpt": "<p>Today we’re releasing a second release candidate for version 15. Primarily this is to address 2 issues, but we also picked up a few small changes from new contributors, including some improvements to some of our new warnings.</p>\n",
+      "readingTime": "3 min read"
+    },
+    {
+      "path": "/blog/2016/03/07/react-v15-rc1.md",
+      "date": "2016-03-07",
+      "title": "React v15.0 Release Candidate",
+      "author": [
+        "zpao"
+      ],
+      "excerpt": "<p>Sorry for the small delay in releasing this. As we said, we’ve been busy binge-watching House of Cards. That scene in the last episode where Francis and Claire Underwood <abbr title=\"You didn't think we would actually spoil anything did you?\">████████████████████████████████████</abbr>. WOW!</p>\n",
+      "readingTime": "8 min read"
+    },
+    {
+      "path": "/blog/2016/02/19/new-versioning-scheme.md",
+      "date": "2016-02-19",
+      "title": "New Versioning Scheme",
+      "author": [
+        "sebmarkbage"
+      ],
+      "excerpt": "<p>Today we’re announcing that we’re switching to major revisions for React. The current version is 0.14.7. The next release will be: <strong>15.0.0</strong></p>\n",
+      "readingTime": "4 min read"
+    },
+    {
+      "path": "/blog/2016/01/12/discontinuing-ie8-support.md",
+      "date": "2016-01-12",
+      "title": "Discontinuing IE 8 Support in React DOM",
+      "author": [
+        "sophiebits"
+      ],
+      "excerpt": "<p>Since its 2013 release, React has supported all popular browsers, including Internet Explorer 8 and above. We handle normalizing many quirks present in old browser versions, including event system differences, so that your app code doesn’t have to worry about most browser bugs.</p>\n",
+      "readingTime": "1 min read"
+    },
+    {
+      "path": "/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.md",
+      "date": "2016-01-08",
+      "title": "(A => B) !=> (B => A)",
+      "author": [
+        "jimfb"
+      ],
+      "excerpt": "<p>The documentation for <code>componentWillReceiveProps</code> states that <code>componentWillReceiveProps</code> will be invoked when the props change as the result of a rerender. Some people assume this means “if <code>componentWillReceiveProps</code> is called, then the props must have changed”, but that conclusion is logically incorrect.</p>\n",
+      "readingTime": "4 min read"
+    },
+    {
+      "path": "/blog/2015/12/29/react-v0.14.4.md",
+      "date": "2015-12-29",
+      "title": "React v0.14.4",
+      "author": [
+        "sophiebits"
+      ],
+      "excerpt": "<p>Happy December! We have a minor point release today. It has just a few small bug fixes.</p>\n",
+      "readingTime": "1 min read"
+    },
+    {
+      "path": "/blog/2015/12/18/react-components-elements-and-instances.md",
+      "date": "2015-12-18",
+      "title": "React Components, Elements, and Instances",
+      "author": [
+        "gaearon"
+      ],
+      "excerpt": "<p>The difference between <strong>components, their instances, and elements</strong> confuses many React beginners. Why are there three different terms to refer to something that is painted on screen?</p>\n",
+      "readingTime": "11 min read"
+    },
+    {
+      "path": "/blog/2015/12/16/ismounted-antipattern.md",
+      "date": "2015-12-16",
+      "title": "isMounted is an Antipattern",
+      "author": [
+        "jimfb"
+      ],
+      "excerpt": "<p>As we move closer to officially deprecating isMounted, it’s worth understanding why the function is an antipattern, and how to write code without the isMounted function.</p>\n",
+      "readingTime": "3 min read"
+    },
+    {
+      "path": "/blog/2015/12/04/react-js-conf-2016-diversity-scholarship.md",
+      "date": "2015-12-04",
+      "title": "React.js Conf 2016 Diversity Scholarship",
+      "author": [
+        "zpao"
+      ],
+      "excerpt": "<p>I am thrilled to announced that we will be organizing another diversity scholarship program for the upcoming React.js Conf! The tech industry is suffering from a lack of diversity, but it’s important to us that we have a thriving community that is made up of people with a variety of experiences and viewpoints.</p>\n",
+      "readingTime": "4 min read"
+    },
+    {
+      "path": "/blog/2015/11/18/react-v0.14.3.md",
+      "date": "2015-11-18",
+      "title": "React v0.14.3",
+      "author": [
+        "zpao"
+      ],
+      "excerpt": "<p>It’s time for another installment of React patch releases! We didn’t break anything in v0.14.2 but we do have a couple of other bugs we’re fixing. The biggest change in this release is actually an addition of a new built file. We heard from a number of people that they still need the ability to use React to render to a string on the client. While the use cases are not common and there are other ways to achieve this, we decided that it’s still valuable to support. So we’re now building <code>react-dom-server.js</code>, which will be shipped to Bower and in the <code>dist/</code> directory of the <code>react-dom</code> package on npm. This file works the same way as <code>react-dom.js</code> and therefore requires that the primary React build has already been included on the page.</p>\n",
+      "readingTime": "2 min read"
+    },
+    {
+      "path": "/blog/2015/11/02/react-v0.14.2.md",
+      "date": "2015-11-02",
+      "title": "React v0.14.2",
+      "author": [
+        "zpao"
+      ],
+      "excerpt": "<p>We have a quick update following the release of 0.14.1 last week. It turns out we broke a couple things in the development build of React when using Internet Explorer. Luckily it was only the development build, so your production applications were unaffected. This release is mostly to address those issues. There is one notable change if consuming React from npm. For the <code>react-dom</code> package, we moved <code>react</code> from a regular dependency to a peer dependency. This will impact very few people as these two are typically installed together at the top level, but it will fix some issues with dependencies of installed components also using <code>react</code> as a peer dependency.</p>\n",
+      "readingTime": "2 min read"
+    },
+    {
+      "path": "/blog/2015/10/28/react-v0.14.1.md",
+      "date": "2015-10-28",
+      "title": "React v0.14.1",
+      "author": [
+        "zpao"
+      ],
+      "excerpt": "<p>After a couple weeks of having more people use v0.14, we’re ready to ship a patch release addressing a few issues. Thanks to everybody who has reported issues and written patches!</p>\n",
+      "readingTime": "2 min read"
+    },
+    {
+      "path": "/blog/2015/10/19/reactiflux-is-moving-to-discord.md",
+      "date": "2015-10-19",
+      "title": "Reactiflux is moving to Discord",
+      "author": [
+        "benigeri"
+      ],
+      "excerpt": "<p>TL;DR: Slack decided that Reactiflux had too many members and disabled new invites. Reactiflux is moving to Discord. Join us: <a href=\"http://join.reactiflux.com/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">http://join.reactiflux.com</a></p>\n",
+      "readingTime": "5 min read"
+    },
+    {
+      "path": "/blog/2015/10/07/react-v0.14.md",
+      "date": "2015-10-07",
+      "title": "React v0.14",
+      "author": [
+        "sophiebits"
+      ],
+      "excerpt": "<p>We’re happy to announce the release of React 0.14 today! This release has a few major changes, primarily designed to simplify the code you write every day and to better support environments like React Native.</p>\n",
+      "readingTime": "12 min read"
+    },
+    {
+      "path": "/blog/2015/10/01/react-render-and-top-level-api.md",
+      "date": "2015-10-01",
+      "title": "ReactDOM.render and the Top Level React API",
+      "author": [
+        "jimfb",
+        "sebmarkbage"
+      ],
+      "excerpt": "<p>When you’re in React’s world you are just building components that fit into other components. Everything is a component. Unfortunately not everything around you is built using React. At the root of your tree you still have to write some plumbing code to connect the outer world into React.</p>\n",
+      "readingTime": "4 min read"
+    },
+    {
+      "path": "/blog/2015/09/14/community-roundup-27.md",
+      "date": "2015-09-14",
+      "title": "Community Round-up #27 – Relay Edition",
+      "author": [
+        "steveluscher"
+      ],
+      "excerpt": "<p>In the weeks following the <a href=\"/blog/2015/08/11/relay-technical-preview.html\">open-source release</a> of the Relay technical preview, the community has been abuzz with activity. We are honored to have been able to enjoy a steady stream of ideas and contributions from such a talented group of individuals. Let’s take a look at some of the things we’ve achieved, together!</p>\n",
+      "readingTime": "4 min read"
+    },
+    {
+      "path": "/blog/2015/09/10/react-v0.14-rc1.md",
+      "date": "2015-09-10",
+      "title": "React v0.14 Release Candidate",
+      "author": [
+        "sophiebits"
+      ],
+      "excerpt": "<p>We’re happy to announce our first release candidate for React 0.14! We gave you a <a href=\"/blog/2015/07/03/react-v0.14-beta-1.html\">sneak peek in July</a> at the upcoming changes but we’ve now stabilized the release more and we’d love for you to try it out before we release the final version.</p>\n",
+      "readingTime": "11 min read"
+    },
+    {
+      "path": "/blog/2015/09/02/new-react-developer-tools.md",
+      "date": "2015-09-02",
+      "title": "New React Developer Tools",
+      "author": [
+        "sophiebits"
+      ],
+      "excerpt": "<p>A month ago, we <a href=\"/blog/2015/08/03/new-react-devtools-beta.html\">posted a beta</a> of the new React developer tools. Today, we’re releasing the first stable version of the new devtools. We’re calling it version 0.14, but it’s a full rewrite so we think of it more like a 2.0 release.</p>\n",
+      "readingTime": "2 min read"
+    },
+    {
+      "path": "/blog/2015/08/13/reacteurope-roundup.md",
+      "date": "2015-08-13",
+      "title": "ReactEurope Round-up",
+      "author": [
+        "matthewjohnston4"
+      ],
+      "excerpt": "<p>Last month, the first React.js European conference took place in the city of Paris, at ReactEurope. Attendees were treated to a range of talks covering React, React Native, Flux, Relay, and GraphQL. Big thanks to everyone involved with organizing the conference, to all the attendees, and everyone who gave their time to speak - it wouldn’t have been possible without the help and support of the React community.</p>\n",
+      "readingTime": "5 min read"
+    },
+    {
+      "path": "/blog/2015/08/11/relay-technical-preview.md",
+      "date": "2015-08-11",
+      "title": "Relay Technical Preview",
+      "author": [
+        "josephsavona"
+      ],
+      "excerpt": "<h1 id=\"relay\">Relay </h1>\n",
+      "readingTime": "3 min read"
+    },
+    {
+      "path": "/blog/2015/08/03/new-react-devtools-beta.md",
+      "date": "2015-08-03",
+      "title": "New React Devtools Beta",
+      "author": [
+        "jaredly"
+      ],
+      "excerpt": "<p>We’ve made an entirely new version of the devtools, and we want you to try it</p>\n",
+      "readingTime": "3 min read"
+    },
+    {
+      "path": "/blog/2015/07/03/react-v0.14-beta-1.md",
+      "date": "2015-07-03",
+      "title": "React v0.14 Beta 1",
+      "author": [
+        "sophiebits"
+      ],
+      "excerpt": "<p>This week, many people in the React community are at <a href=\"https://www.react-europe.org/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">ReactEurope</a> in the beautiful (and very warm) city of Paris, the second React conference that’s been held to date. At our last conference, we released the first beta of React 0.13, and we figured we’d do the same today with our first beta of React 0.14, giving you something to play with if you’re not at the conference or you’re looking for something to do on the way home.</p>\n",
+      "readingTime": "5 min read"
+    },
+    {
+      "path": "/blog/2015/06/12/deprecating-jstransform-and-react-tools.md",
+      "date": "2015-06-12",
+      "title": "Deprecating JSTransform and react-tools",
+      "author": [
+        "zpao"
+      ],
+      "excerpt": "<p>Today we’re announcing the deprecation of react-tools and JSTransform.</p>\n",
+      "readingTime": "3 min read"
+    },
+    {
+      "path": "/blog/2015/05/22/react-native-release-process.md",
+      "date": "2015-05-22",
+      "title": "React Native Release Process",
+      "author": [
+        "vjeux"
+      ],
+      "excerpt": "<p>The React Native release process have been a bit chaotic since we open sourced. It was unclear when new code was released, there was no changelog, we bumped the minor and patch version inconsistently and we often had to submit updates right after a release to fix a bad bug. In order to <em>move fast with stable infra</em>, we are introducing a real release process with a two-week release schedule.</p>\n",
+      "readingTime": "2 min read"
+    },
+    {
+      "path": "/blog/2015/05/08/react-v0.13.3.md",
+      "date": "2015-05-08",
+      "title": "React v0.13.3",
+      "author": [
+        "zpao"
+      ],
+      "excerpt": "<p>Today we’re sharing another patch release in the v0.13 branch. There are only a few small changes, with a couple to address some issues that arose around that undocumented feature so many of you are already using: <code>context</code>. We also improved developer ergonomics just a little bit, making some warnings better.</p>\n",
+      "readingTime": "1 min read"
+    },
+    {
+      "path": "/blog/2015/05/01/graphql-introduction.md",
+      "date": "2015-05-01",
+      "title": "GraphQL Introduction",
+      "author": [
+        "schrockn"
+      ],
+      "excerpt": "<p>At the React.js conference in late January 2015, we revealed our next major technology in the React family: <a href=\"/blog/2015/02/20/introducing-relay-and-graphql.html\">Relay</a>.</p>\n",
+      "readingTime": "11 min read"
+    },
+    {
+      "path": "/blog/2015/04/18/react-v0.13.2.md",
+      "date": "2015-04-18",
+      "title": "React v0.13.2",
+      "author": [
+        "zpao"
+      ],
+      "excerpt": "<p>Yesterday the <a href=\"/blog/2015/04/17/react-native-v0.4.html\">React Native team shipped v0.4</a>. Those of us working on the web team just a few feet away couldn’t just be shown up like that so we’re shipping v0.13.2 today as well! This is a bug fix release to address a few things while we continue to work towards v0.14.</p>\n",
+      "readingTime": "2 min read"
+    },
+    {
+      "path": "/blog/2015/04/17/react-native-v0.4.md",
+      "date": "2015-04-17",
+      "title": "React Native v0.4",
+      "author": [
+        "vjeux"
+      ],
+      "excerpt": "<p>It’s been three weeks since we open sourced React Native and there’s been some insane amount of activity already: over 12.5k stars, 1000 commits, 500 issues, 380 pull requests, and 100 contributors, plus <a href=\"http://react.parts/native-ios\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">35 plugins</a> and <a href=\"http://herman.asia/building-a-flashcard-app-with-react-native\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">1 app in the app store</a>! We were expecting some buzz around the project but this is way beyond anything we imagined. Thank you!</p>\n",
+      "readingTime": "3 min read"
+    },
+    {
+      "path": "/blog/2015/03/30/community-roundup-26.md",
+      "date": "2015-03-30",
+      "title": "Community Round-up #26",
+      "author": [
+        "vjeux"
+      ],
+      "excerpt": "<p>We open sourced React Native last week and the community reception blew away all our expectations! So many of you tried it, made cool stuff with it, raised many issues and even submitted pull requests to fix them! The entire team wants to say thank you!</p>\n",
+      "readingTime": "4 min read"
+    },
+    {
+      "path": "/blog/2015/03/26/introducing-react-native.md",
+      "date": "2015-03-26",
+      "title": "Introducing React Native",
+      "author": [
+        "sophiebits"
+      ],
+      "excerpt": "<p>In January at React.js Conf, we announced React Native, a new framework for building native apps using React. We’re happy to announce that we’re open-sourcing React Native and you can start building your apps with it today.</p>\n",
+      "readingTime": "2 min read"
+    },
+    {
+      "path": "/blog/2015/03/19/building-the-facebook-news-feed-with-relay.md",
+      "date": "2015-03-19",
+      "title": "Building The Facebook News Feed With Relay",
+      "author": [
+        "josephsavona"
+      ],
+      "excerpt": "<p>At React.js Conf in January we gave a preview of Relay, a new framework for building data-driven applications in React. In this post, we’ll describe the process of creating a Relay application. This post assumes some familiarity with the concepts of Relay and GraphQL, so if you haven’t already we recommend reading <a href=\"/blog/2015/02/20/introducing-relay-and-graphql.html\">our introductory blog post</a> or watching <a href=\"https://www.youtube-nocookie.com/v/9sc8Pyc51uU\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">the conference talk</a>.</p>\n",
+      "readingTime": "7 min read"
+    },
+    {
+      "path": "/blog/2015/03/16/react-v0.13.1.md",
+      "date": "2015-03-16",
+      "title": "React v0.13.1",
+      "author": [
+        "zpao"
+      ],
+      "excerpt": "<p>It’s been less than a week since we shipped v0.13.0 but it’s time to do another quick release. We just released v0.13.1 which contains bugfixes for a number of small issues.</p>\n",
+      "readingTime": "2 min read"
+    },
+    {
+      "path": "/blog/2015/03/10/react-v0.13.md",
+      "date": "2015-03-10",
+      "title": "React v0.13",
+      "author": [
+        "sophiebits"
+      ],
+      "excerpt": "<p>Today, we’re happy to release React v0.13!</p>\n",
+      "readingTime": "5 min read"
+    },
+    {
+      "path": "/blog/2015/03/04/community-roundup-25.md",
+      "date": "2015-03-04",
+      "title": "Community Round-up #25",
+      "author": [
+        "matthewjohnston4"
+      ],
+      "excerpt": "<h2 id=\"react-101\">React 101 </h2>\n",
+      "readingTime": "3 min read"
+    },
+    {
+      "path": "/blog/2015/03/03/react-v0.13-rc2.md",
+      "date": "2015-03-03",
+      "title": "React v0.13 RC2",
+      "author": [
+        "sebmarkbage"
+      ],
+      "excerpt": "<p>Thanks to everybody who has already been testing the release candidate. We’ve received some good feedback and as a result we’re going to do a second release candidate. The changes are minimal. We haven’t changed the behavior of any APIs we exposed in the previous release candidate. Here’s a summary of the changes:</p>\n",
+      "readingTime": "3 min read"
+    },
+    {
+      "path": "/blog/2015/02/24/streamlining-react-elements.md",
+      "date": "2015-02-24",
+      "title": "Streamlining React Elements",
+      "author": [
+        "sebmarkbage"
+      ],
+      "excerpt": "<p>React v0.13 is right around the corner and so we wanted to discuss some upcoming changes to ReactElement. In particular, we added several warnings to some esoteric use cases of ReactElement. There are no runtime behavior changes for ReactElement - we’re adding these warnings in the hope that we can change some behavior in v0.14 if the changes are valuable to the community.</p>\n",
+      "readingTime": "10 min read"
+    },
+    {
+      "path": "/blog/2015/02/24/react-v0.13-rc1.md",
+      "date": "2015-02-24",
+      "title": "React v0.13 RC",
+      "author": [
+        "zpao"
+      ],
+      "excerpt": "<p>Over the weekend we pushed out our first (and hopefully only) release candidate for React v0.13!</p>\n",
+      "readingTime": "4 min read"
+    },
+    {
+      "path": "/blog/2015/02/20/introducing-relay-and-graphql.md",
+      "date": "2015-02-20",
+      "title": "Introducing Relay and GraphQL",
+      "author": [
+        "wincent"
+      ],
+      "excerpt": "<h2 id=\"data-fetching-for-react-applications\">Data fetching for React applications </h2>\n",
+      "readingTime": "7 min read"
+    },
+    {
+      "path": "/blog/2015/02/18/react-conf-roundup-2015.md",
+      "date": "2015-02-18",
+      "title": "React.js Conf Round-up 2015",
+      "author": [
+        "steveluscher"
+      ],
+      "excerpt": "<p>It was a privilege to welcome the React community to Facebook HQ on January 28–29 for the first-ever React.js Conf, and a pleasure to be able to unveil three new technologies that we’ve been using internally at Facebook for some time: GraphQL, Relay, and React Native.</p>\n",
+      "readingTime": "8 min read"
+    },
+    {
+      "path": "/blog/2015/01/27/react-v0.13.0-beta-1.md",
+      "date": "2015-01-27",
+      "title": "React v0.13.0 Beta 1",
+      "author": [
+        "sebmarkbage"
+      ],
+      "excerpt": "<p>React 0.13 has a lot of nice features but there is one particular feature that I’m really excited about. I couldn’t wait for React.js Conf to start tomorrow morning.</p>\n",
+      "readingTime": "5 min read"
+    },
+    {
+      "path": "/blog/2014/12/19/react-js-conf-diversity-scholarship.md",
+      "date": "2014-12-19",
+      "title": "React.js Conf Diversity Scholarship",
+      "author": [
+        "zpao"
+      ],
+      "excerpt": "<p>Today I’m really happy to announce the React.js Conf Diversity Scholarship! We believe that a diverse set of viewpoints and opinions is really important to build a thriving community. In an ideal world, every part of the tech community would be made up of people from all walks of life. However the reality is that we must be proactive and make an effort to make sure everybody has a voice. As conference organizers we worked closely with the Diversity Team here at Facebook to set aside 10 tickets and provide a scholarship. 10 tickets may not be many in the grand scheme but we really believe that this will have a positive impact on the discussions we have at the conference.</p>\n",
+      "readingTime": "3 min read"
+    },
+    {
+      "path": "/blog/2014/12/18/react-v0.12.2.md",
+      "date": "2014-12-18",
+      "title": "React v0.12.2",
+      "author": [
+        "zpao"
+      ],
+      "excerpt": "<p>We just shipped React v0.12.2, bringing the 0.12 branch up to date with a few small fixes that landed in master over the past 2 months.</p>\n",
+      "readingTime": "2 min read"
+    },
+    {
+      "path": "/blog/2014/11/25/community-roundup-24.md",
+      "date": "2014-11-25",
+      "title": "Community Round-up #24",
+      "author": [
+        "steveluscher"
+      ],
+      "excerpt": "<h2 id=\"keep-it-simple\">Keep it Simple </h2>\n",
+      "readingTime": "5 min read"
+    },
+    {
+      "path": "/blog/2014/11/24/react-js-conf-updates.md",
+      "date": "2014-11-24",
+      "title": "React.js Conf Updates",
+      "author": [
+        "vjeux"
+      ],
+      "excerpt": "<p>Yesterday was the <a href=\"http://conf.reactjs.com/index.html\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">React.js Conf</a> call for presenters submission deadline. We were</p>\n",
+      "readingTime": "2 min read"
+    },
+    {
+      "path": "/blog/2014/10/28/react-v0.12.md",
+      "date": "2014-10-28",
+      "title": "React v0.12",
+      "author": [
+        "zpao"
+      ],
+      "excerpt": "<p>We’re happy to announce the availability of React v0.12! After over a week of baking as the release candidate, we uncovered and fixed a few small issues. Thanks to all of you who upgraded and gave us feedback!</p>\n",
+      "readingTime": "6 min read"
+    },
+    {
+      "path": "/blog/2014/10/27/react-js-conf.md",
+      "date": "2014-10-27",
+      "title": "React.js Conf",
+      "author": [
+        "vjeux"
+      ],
+      "excerpt": "<p>Every few weeks someone asks us when we are going to organize a conference for React. Our answer has always been “some day”. In the mean time, people have been talking about React at other JavaScript conferences around the world. But now the time has finally come for us to have a conference of our own.</p>\n",
+      "readingTime": "1 min read"
+    },
+    {
+      "path": "/blog/2014/10/17/community-roundup-23.md",
+      "date": "2014-10-17",
+      "title": "Community Round-up #23",
+      "author": [
+        "LoukaN"
+      ],
+      "excerpt": "<p>This round-up is a special edition on <a href=\"https://facebook.github.io/flux/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Flux</a>. If you expect to see diagrams showing arrows that all point in the same direction, you won’t be disappointed!</p>\n",
+      "readingTime": "6 min read"
+    },
+    {
+      "path": "/blog/2014/10/16/react-v0.12-rc1.md",
+      "date": "2014-10-16",
+      "title": "React v0.12 RC",
+      "author": [
+        "sebmarkbage"
+      ],
+      "excerpt": "<p>We are finally ready to share the work we’ve been doing over the past couple months. A lot has gone into this and we want to make sure we iron out any potential issues before we make this final. So, we’re shipping a Release Candidate for React v0.12 today. If you get a chance, please give it a try and report any issues you find! A full changelog will accompany the final release but we’ve highlighted the interesting and breaking changes below.</p>\n",
+      "readingTime": "6 min read"
+    },
+    {
+      "path": "/blog/2014/10/14/introducing-react-elements.md",
+      "date": "2014-10-14",
+      "title": "Introducing React Elements",
+      "author": [
+        "sebmarkbage"
+      ],
+      "excerpt": "<p>The upcoming React 0.12 tweaks some APIs to get us close to the final 1.0 API. This release is all about setting us up for making the <code>ReactElement</code> type really FAST, <a href=\"https://facebook.github.io/jest/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">jest unit testing</a> easier, making classes simpler (in preparation for ES6 classes) and better integration with third-party languages!</p>\n",
+      "readingTime": "7 min read"
+    },
+    {
+      "path": "/blog/2014/09/24/testing-flux-applications.md",
+      "date": "2014-09-24",
+      "title": "Testing Flux Applications",
+      "author": [
+        "fisherwebdev"
+      ],
+      "excerpt": "<p><strong>A more up-to-date version of this post is available as part of the <a href=\"https://facebook.github.io/flux/docs/testing-flux-applications.html\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Flux documentation</a>.</strong></p>\n",
+      "readingTime": "8 min read"
+    },
+    {
+      "path": "/blog/2014/09/16/react-v0.11.2.md",
+      "date": "2014-09-16",
+      "title": "React v0.11.2",
+      "author": [
+        "zpao"
+      ],
+      "excerpt": "<p>Today we’re releasing React v0.11.2 to add a few small features.</p>\n",
+      "readingTime": "2 min read"
+    },
+    {
+      "path": "/blog/2014/09/12/community-round-up-22.md",
+      "date": "2014-09-12",
+      "title": "Community Round-up #22",
+      "author": [
+        "LoukaN"
+      ],
+      "excerpt": "<p>This has been an exciting summer as four big companies: Yahoo, Mozilla, Airbnb and Reddit announced that they were using React!</p>\n",
+      "readingTime": "4 min read"
+    },
+    {
+      "path": "/blog/2014/09/03/introducing-the-jsx-specification.md",
+      "date": "2014-09-03",
+      "title": "Introducing the JSX Specification",
+      "author": [
+        "sebmarkbage"
+      ],
+      "excerpt": "<p>At Facebook we’ve been using JSX for a long time. We originally introduced it to the world last year alongside React, but we actually used it in another form before that to create native DOM nodes. We’ve also seen some similar efforts grow out of our work in order to be used with other libraries and in interesting ways. At this point React JSX is just one of many implementations.</p>\n",
+      "readingTime": "1 min read"
+    },
+    {
+      "path": "/blog/2014/08/03/community-roundup-21.md",
+      "date": "2014-08-03",
+      "title": "Community Round-up #21",
+      "author": [
+        "LoukaN"
+      ],
+      "excerpt": "<h2 id=\"react-router\">React Router </h2>\n",
+      "readingTime": "3 min read"
+    },
+    {
+      "path": "/blog/2014/07/30/flux-actions-and-the-dispatcher.md",
+      "date": "2014-07-30",
+      "title": "Flux: Actions and the Dispatcher",
+      "author": [
+        "fisherwebdev"
+      ],
+      "excerpt": "<p>Flux is the application architecture Facebook uses to build JavaScript applications. It’s based on a unidirectional data flow. We’ve built everything from small widgets to huge applications with Flux, and it’s handled everything we’ve thrown at it. Because we’ve found it to be a great way to structure our code, we’re excited to share it with the open source community. <a href=\"http://youtu.be/nYkdrAPrdcw?t=10m20s\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Jing Chen presented Flux</a> at the F8 conference, and since that time we’ve seen a lot of interest in it. We’ve also published an <a href=\"https://facebook.github.io/flux/docs/overview.html\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">overview of Flux</a> and a <a href=\"https://github.com/facebook/flux/tree/master/examples/flux-todomvc/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">TodoMVC example</a>, with an accompanying <a href=\"https://facebook.github.io/flux/docs/todo-list.html\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">tutorial</a>.</p>\n",
+      "readingTime": "5 min read"
+    },
+    {
+      "path": "/blog/2014/07/28/community-roundup-20.md",
+      "date": "2014-07-28",
+      "title": "Community Round-up #20",
+      "author": [
+        "LoukaN"
+      ],
+      "excerpt": "<p>It’s an exciting time for React as there are now more commits from open source contributors than from Facebook engineers! Keep up the good work :)</p>\n",
+      "readingTime": "4 min read"
+    },
+    {
+      "path": "/blog/2014/07/25/react-v0.11.1.md",
+      "date": "2014-07-25",
+      "title": "React v0.11.1",
+      "author": [
+        "zpao"
+      ],
+      "excerpt": "<p>Today we’re releasing React v0.11.1 to address a few small issues. Thanks to everybody who has reported them as they’ve begun upgrading.</p>\n",
+      "readingTime": "2 min read"
+    },
+    {
+      "path": "/blog/2014/07/17/react-v0.11.md",
+      "date": "2014-07-17",
+      "title": "React v0.11",
+      "author": [
+        "zpao"
+      ],
+      "excerpt": "<p><strong>Update:</strong> We missed a few important changes in our initial post and changelog. We’ve updated this post with details about <a href=\"#descriptors\">Descriptors</a> and <a href=\"#prop-type-validation\">Prop Type Validation</a>.</p>\n",
+      "readingTime": "7 min read"
+    },
+    {
+      "path": "/blog/2014/07/13/react-v0.11-rc1.md",
+      "date": "2014-07-13",
+      "title": "React v0.11 RC",
+      "author": [
+        "zpao"
+      ],
+      "excerpt": "<p>It’s that time again… we’re just about ready to ship a new React release! v0.11 includes a wide array of bug fixes and features. We highlighted some of the most important changes below, along with the full changelog.</p>\n",
+      "readingTime": "5 min read"
+    },
+    {
+      "path": "/blog/2014/06/27/community-roundup-19.md",
+      "date": "2014-06-27",
+      "title": "Community Round-up #19",
+      "author": [
+        "chenglou"
+      ],
+      "excerpt": "<h2 id=\"react-meetups\">React Meetups! </h2>\n",
+      "readingTime": "3 min read"
+    },
+    {
+      "path": "/blog/2014/05/29/one-year-of-open-source-react.md",
+      "date": "2014-05-29",
+      "title": "One Year of Open-Source React",
+      "author": [
+        "chenglou"
+      ],
+      "excerpt": "<p>Today marks the one-year open-source anniversary of React.</p>\n",
+      "readingTime": "2 min read"
+    },
+    {
+      "path": "/blog/2014/05/06/flux.md",
+      "date": "2014-05-06",
+      "title": "Flux: An Application Architecture for React",
+      "author": [
+        "fisherwebdev",
+        "jingc"
+      ],
+      "excerpt": "<p>We recently spoke at one of f8’s breakout session about Flux, a data flow architecture that works well with React. Check out the video here:</p>\n",
+      "readingTime": "2 min read"
+    },
+    {
+      "path": "/blog/2014/04/04/reactnet.md",
+      "date": "2014-04-04",
+      "title": "Use React and JSX in ASP.NET MVC",
+      "author": [
+        "Daniel15"
+      ],
+      "excerpt": "<p>Today we’re happy to announce the initial release of</p>\n",
+      "readingTime": "1 min read"
+    },
+    {
+      "path": "/blog/2014/03/28/the-road-to-1.0.md",
+      "date": "2014-03-28",
+      "title": "The Road to 1.0",
+      "author": [
+        "zpao"
+      ],
+      "excerpt": "<p>When we launched React last spring, we purposefully decided not to call it 1.0. It was production ready, but we had plans to evolve APIs and behavior as we saw how people were using React, both internally and externally. We’ve learned a lot over the past 9 months and we’ve thought a lot about what 1.0 will mean for React. A couple weeks ago, I outlined [several projects][projects] that we have planned to take us to 1.0 and beyond. Today I’m writing a bit more about them to give our users a better insight into our plans.</p>\n",
+      "readingTime": "4 min read"
+    },
+    {
+      "path": "/blog/2014/03/21/react-v0.10.md",
+      "date": "2014-03-21",
+      "title": "React v0.10",
+      "author": [
+        "zpao"
+      ],
+      "excerpt": "<p>Hot on the heels of the <a href=\"/blog/2014/03/19/react-v0.10-rc1.html\">release candidate earlier this week</a>, we’re ready to call v0.10 done. The only major issue we discovered had to do with the <code>react-tools</code> package, which has been updated. We’ve copied over the changelog from the RC with some small clarifying changes.</p>\n",
+      "readingTime": "4 min read"
+    },
+    {
+      "path": "/blog/2014/03/19/react-v0.10-rc1.md",
+      "date": "2014-03-19",
+      "title": "React v0.10 RC",
+      "author": [
+        "zpao"
+      ],
+      "excerpt": "<p><a href=\"/blog/2014/02/20/react-v0.9.html\">v0.9 has only been out for a month</a>, but we’re getting ready to push out v0.10 already. Unlike v0.9 which took a long time, we don’t have a long list of changes to talk about.</p>\n",
+      "readingTime": "4 min read"
+    },
+    {
+      "path": "/blog/2014/03/14/community-roundup-18.md",
+      "date": "2014-03-14",
+      "title": "Community Round-up #18",
+      "author": [
+        "jgebhardt"
+      ],
+      "excerpt": "<p>In this Round-up, we are taking a few closer looks at React’s interplay with different frameworks and architectures.</p>\n",
+      "readingTime": "5 min read"
+    },
+    {
+      "path": "/blog/2014/02/24/community-roundup-17.md",
+      "date": "2014-02-24",
+      "title": "Community Round-up #17",
+      "author": [
+        "jgebhardt"
+      ],
+      "excerpt": "<p>It’s exciting to see the number of real-world React applications and components skyrocket over the past months! This community round-up features a few examples of inspiring React applications and components.</p>\n",
+      "readingTime": "3 min read"
+    },
+    {
+      "path": "/blog/2014/02/20/react-v0.9.md",
+      "date": "2014-02-20",
+      "title": "React v0.9",
+      "author": [
+        "sophiebits"
+      ],
+      "excerpt": "<p>I’m excited to announce that today we’re releasing React v0.9, which incorporates many bug fixes and several new features since the last release. This release contains almost four months of work, including over 800 commits from over 70 committers!</p>\n",
+      "readingTime": "7 min read"
+    },
+    {
+      "path": "/blog/2014/02/16/react-v0.9-rc1.md",
+      "date": "2014-02-16",
+      "title": "React v0.9 RC",
+      "author": [
+        "sophiebits"
+      ],
+      "excerpt": "<p>We’re almost ready to release React v0.9! We’re posting a release candidate so that you can test your apps on it; we’d much prefer to find show-stopping bugs now rather than after we release.</p>\n",
+      "readingTime": "6 min read"
+    },
+    {
+      "path": "/blog/2014/02/15/community-roundup-16.md",
+      "date": "2014-02-15",
+      "title": "Community Round-up #16",
+      "author": [
+        "jgebhardt"
+      ],
+      "excerpt": "<p>There have been many posts recently covering the <i>why</i> and <i>how</i> of React. This week’s community round-up includes a collection of recent articles to help you get started with React, along with a few posts that explain some of the inner workings.</p>\n",
+      "readingTime": "4 min read"
+    },
+    {
+      "path": "/blog/2014/02/05/community-roundup-15.md",
+      "date": "2014-02-05",
+      "title": "Community Round-up #15",
+      "author": [
+        "jgebhardt"
+      ],
+      "excerpt": "<p>Interest in React seems to have surged ever since David Nolen (<a href=\"https://twitter.com/swannodette\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">@swannodette</a>)‘s introduction of <a href=\"https://github.com/swannodette/om\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Om</a> in his post <a href=\"https://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">“The Future of JavaScript MVC Frameworks”</a>.</p>\n",
+      "readingTime": "4 min read"
+    },
+    {
+      "path": "/blog/2014/01/06/community-roundup-14.md",
+      "date": "2014-01-06",
+      "title": "Community Round-up #14",
+      "author": [
+        "vjeux"
+      ],
+      "excerpt": "<p>The theme of this first round-up of 2014 is integration. I’ve tried to assemble a list of articles and projects that use React in various environments.</p>\n",
+      "readingTime": "3 min read"
+    },
+    {
+      "path": "/blog/2014/01/02/react-chrome-developer-tools.md",
+      "date": "2014-01-02",
+      "title": "React Chrome Developer Tools",
+      "author": [
+        "sebmarkbage"
+      ],
+      "excerpt": "<p>With the new year, we thought you’d enjoy some new tools for debugging React code. Today we’re releasing the <a href=\"https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">React Developer Tools</a>, an extension to the Chrome Developer Tools. <a href=\"https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Download them from the Chrome Web Store</a>.</p>\n",
+      "readingTime": "2 min read"
+    },
+    {
+      "path": "/blog/2013/12/30/community-roundup-13.md",
+      "date": "2013-12-30",
+      "title": "Community Round-up #13",
+      "author": [
+        "vjeux"
+      ],
+      "excerpt": "<p>Happy holidays! This blog post is a little-late Christmas present for all the React users. Hopefully it will inspire you to write awesome web apps in 2014!</p>\n",
+      "readingTime": "4 min read"
+    },
+    {
+      "path": "/blog/2013/12/23/community-roundup-12.md",
+      "date": "2013-12-23",
+      "title": "Community Round-up #12",
+      "author": [
+        "vjeux"
+      ],
+      "excerpt": "<p>React got featured on the front-page of Hacker News thanks to the Om library. If you try it out for the first time, take a look at the <a href=\"/docs/getting-started.html\">docs</a> and do not hesitate to ask questions on the <a href=\"https://groups.google.com/group/reactjs\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Google Group</a>, <a href=\"irc://chat.freenode.net/reactjs\">IRC</a> or <a href=\"http://stackoverflow.com/questions/tagged/reactjs\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Stack Overflow</a>. We are trying our best to help you out!</p>\n",
+      "readingTime": "4 min read"
+    },
+    {
+      "path": "/blog/2013/12/19/react-v0.8.0.md",
+      "date": "2013-12-19",
+      "title": "React v0.8",
+      "author": [
+        "zpao"
+      ],
+      "excerpt": "<p>I’ll start by answering the obvious question:</p>\n",
+      "readingTime": "2 min read"
+    },
+    {
+      "path": "/blog/2013/12/18/react-v0.5.2-v0.4.2.md",
+      "date": "2013-12-18",
+      "title": "React v0.5.2, v0.4.2",
+      "author": [
+        "zpao"
+      ],
+      "excerpt": "<p>Today we’re releasing an update to address a potential XSS vulnerability that can arise when using user data as a <code>key</code>. Typically “safe” data is used for a <code>key</code>, for example, an id from your database, or a unique hash. However there are cases where it may be reasonable to use user generated content. A carefully crafted piece of content could result in arbitrary JS execution. While we make a very concerted effort to ensure all text is escaped before inserting it into the DOM, we missed one case. Immediately following the discovery of this vulnerability, we performed an audit to ensure we this was the only such vulnerability.</p>\n",
+      "readingTime": "2 min read"
+    },
+    {
+      "path": "/blog/2013/11/18/community-roundup-11.md",
+      "date": "2013-11-18",
+      "title": "Community Round-up #11",
+      "author": [
+        "vjeux"
+      ],
+      "excerpt": "<p>This round-up is the proof that React has taken off from its Facebook’s root: it features three in-depth presentations of React done by external people. This is awesome, keep them coming!</p>\n",
+      "readingTime": "4 min read"
+    },
+    {
+      "path": "/blog/2013/11/06/community-roundup-10.md",
+      "date": "2013-11-06",
+      "title": "Community Round-up #10",
+      "author": [
+        "vjeux"
+      ],
+      "excerpt": "<p>This is the 10th round-up already and React has come quite far since it was open sourced. Almost all new web projects at Khan Academy, Facebook, and Instagram are being developed using React. React has been deployed in a variety of contexts: a Chrome extension, a Windows 8 application, mobile websites, and desktop websites supporting Internet Explorer 8! Language-wise, React is not only being used within JavaScript but also CoffeeScript and ClojureScript.</p>\n",
+      "readingTime": "6 min read"
+    },
+    {
+      "path": "/blog/2013/10/29/react-v0-5-1.md",
+      "date": "2013-10-29",
+      "title": "React v0.5.1",
+      "author": [
+        "zpao"
+      ],
+      "excerpt": "<p>This release focuses on fixing some small bugs that have been uncovered over the past two weeks. I would like to thank everybody involved, specifically members of the community who fixed half of the issues found. Thanks to [Sophie Alpert][1], [Andrey Popp][2], and [Laurence Rowe][3] for their contributions!</p>\n",
+      "readingTime": "1 min read"
+    },
+    {
+      "path": "/blog/2013/10/16/react-v0.5.0.md",
+      "date": "2013-10-16",
+      "title": "React v0.5",
+      "author": [
+        "zpao"
+      ],
+      "excerpt": "<p>This release is the result of several months of hard work from members of the team and the community. While there are no groundbreaking changes in core, we’ve worked hard to improve performance and memory usage. We’ve also worked hard to make sure we are being consistent in our usage of DOM properties.</p>\n",
+      "readingTime": "4 min read"
+    },
+    {
+      "path": "/blog/2013/10/03/community-roundup-9.md",
+      "date": "2013-10-03",
+      "title": "Community Round-up #9",
+      "author": [
+        "vjeux"
+      ],
+      "excerpt": "<p>We organized a React hackathon last week-end in the Facebook Seattle office. 50 people, grouped into 15 teams, came to hack for a day on React. It was a lot of fun and we’ll probably organize more in the future.</p>\n",
+      "readingTime": "3 min read"
+    },
+    {
+      "path": "/blog/2013/09/24/community-roundup-8.md",
+      "date": "2013-09-24",
+      "title": "Community Round-up #8",
+      "author": [
+        "vjeux"
+      ],
+      "excerpt": "<p>A lot has happened in the month since our last update. Here are some of the more interesting things we’ve found. But first, we have a couple updates before we share links.</p>\n",
+      "readingTime": "6 min read"
+    },
+    {
+      "path": "/blog/2013/08/26/community-roundup-7.md",
+      "date": "2013-08-26",
+      "title": "Community Round-up #7",
+      "author": [
+        "vjeux"
+      ],
+      "excerpt": "<p>It’s been three months since we open sourced React and it is going well. Some stats so far:</p>\n",
+      "readingTime": "3 min read"
+    },
+    {
+      "path": "/blog/2013/08/19/use-react-and-jsx-in-python-applications.md",
+      "date": "2013-08-19",
+      "title": "Use React and JSX in Python Applications",
+      "author": [
+        "kmeht"
+      ],
+      "excerpt": "<p>Today we’re happy to announce the initial release of <a href=\"https://github.com/facebook/react-python\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">PyReact</a>, which makes it easier to use React and JSX in your Python applications. It’s designed to provide an API to transform your JSX files into JavaScript, as well as provide access to the latest React source files.</p>\n",
+      "readingTime": "2 min read"
+    },
+    {
+      "path": "/blog/2013/08/05/community-roundup-6.md",
+      "date": "2013-08-05",
+      "title": "Community Round-up #6",
+      "author": [
+        "vjeux"
+      ],
+      "excerpt": "<p>This is the first Community Round-up where none of the items are from Facebook/Instagram employees. It’s great to see the adoption of React growing.</p>\n",
+      "readingTime": "3 min read"
+    },
+    {
+      "path": "/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.md",
+      "date": "2013-07-30",
+      "title": "Use React and JSX in Ruby on Rails",
+      "author": [
+        "zpao"
+      ],
+      "excerpt": "<p>Today we’re releasing a gem to make it easier to use React and JSX in Ruby on Rails applications: <a href=\"https://github.com/facebook/react-rails\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">react-rails</a>.</p>\n",
+      "readingTime": "2 min read"
+    },
+    {
+      "path": "/blog/2013/07/26/react-v0-4-1.md",
+      "date": "2013-07-26",
+      "title": "React v0.4.1",
+      "author": [
+        "zpao"
+      ],
+      "excerpt": "<p>React v0.4.1 is a small update, mostly containing correctness fixes. Some code has been restructured internally but those changes do not impact any of our public APIs.</p>\n",
+      "readingTime": "1 min read"
+    },
+    {
+      "path": "/blog/2013/07/23/community-roundup-5.md",
+      "date": "2013-07-23",
+      "title": "Community Round-up #5",
+      "author": [
+        "vjeux"
+      ],
+      "excerpt": "<p>We launched the <a href=\"https://www.facebook.com/react\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">React Facebook Page</a> along with the React v0.4 launch. 700 people already liked it to get updated on the project :)</p>\n",
+      "readingTime": "4 min read"
+    },
+    {
+      "path": "/blog/2013/07/17/react-v0-4-0.md",
+      "date": "2013-07-17",
+      "title": "React v0.4.0",
+      "author": [
+        "zpao"
+      ],
+      "excerpt": "<p>Over the past 2 months we’ve been taking feedback and working hard to make React even better. We fixed some bugs, made some under-the-hood improvements, and added several features that we think will improve the experience developing with React. Today we’re proud to announce the availability of React v0.4!</p>\n",
+      "readingTime": "3 min read"
+    },
+    {
+      "path": "/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.md",
+      "date": "2013-07-11",
+      "title": "New in React v0.4: Prop Validation and Default Values",
+      "author": [
+        "zpao"
+      ],
+      "excerpt": "<p>Many of the questions we got following the public launch of React revolved around <code>props</code>, specifically that people wanted to do validation and to make sure their components had sensible defaults.</p>\n",
+      "readingTime": "2 min read"
+    },
+    {
+      "path": "/blog/2013/07/03/community-roundup-4.md",
+      "date": "2013-07-03",
+      "title": "Community Round-up #4",
+      "author": [
+        "vjeux"
+      ],
+      "excerpt": "<p>React reconciliation process appears to be very well suited to implement a text editor with a live preview as people at Khan Academy show us.</p>\n",
+      "readingTime": "3 min read"
+    },
+    {
+      "path": "/blog/2013/07/02/react-v0-4-autobind-by-default.md",
+      "date": "2013-07-02",
+      "title": "New in React v0.4: Autobind by Default",
+      "author": [
+        "zpao"
+      ],
+      "excerpt": "<p>React v0.4 is very close to completion. As we finish it off, we’d like to share with you some of the major changes we’ve made since v0.3. This is the first of several posts we’ll be making over the next week.</p>\n",
+      "readingTime": "2 min read"
+    },
+    {
+      "path": "/blog/2013/06/27/community-roundup-3.md",
+      "date": "2013-06-27",
+      "title": "Community Round-up #3",
+      "author": [
+        "vjeux"
+      ],
+      "excerpt": "<p>The highlight of this week is that an interaction-heavy app has been ported to React. React components are solving issues they had with nested views.</p>\n",
+      "readingTime": "4 min read"
+    },
+    {
+      "path": "/blog/2013/06/21/react-v0-3-3.md",
+      "date": "2013-06-21",
+      "title": "React v0.3.3",
+      "author": [
+        "zpao"
+      ],
+      "excerpt": "<p>We have a ton of great stuff coming in v0.4, but in the meantime we’re releasing v0.3.3. This release addresses some small issues people were having and simplifies our tools to make them easier to use.</p>\n",
+      "readingTime": "1 min read"
+    },
+    {
+      "path": "/blog/2013/06/19/community-roundup-2.md",
+      "date": "2013-06-19",
+      "title": "Community Round-up #2",
+      "author": [
+        "vjeux"
+      ],
+      "excerpt": "<p>Since the launch we have received a lot of feedback and are actively working on React 0.4. In the meantime, here are the highlights of this week.</p>\n",
+      "readingTime": "4 min read"
+    },
+    {
+      "path": "/blog/2013/06/12/community-roundup.md",
+      "date": "2013-06-12",
+      "title": "Community Round-up #1",
+      "author": [
+        "vjeux"
+      ],
+      "excerpt": "<p>React was open sourced two weeks ago and it’s time for a little round-up of what has been going on.</p>\n",
+      "readingTime": "3 min read"
+    },
+    {
+      "path": "/blog/2013/06/05/why-react.md",
+      "date": "2013-06-05",
+      "title": "Why did we build React?",
+      "author": [
+        "petehunt"
+      ],
+      "excerpt": "<p>There are a lot of JavaScript MVC frameworks out there. Why did we build React</p>\n",
+      "readingTime": "3 min read"
+    },
+    {
+      "path": "/blog/2013/06/02/jsfiddle-integration.md",
+      "date": "2013-06-02",
+      "title": "JSFiddle Integration",
+      "author": [
+        "vjeux"
+      ],
+      "excerpt": "<p><a href=\"https://jsfiddle.net\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">JSFiddle</a> just announced support for React. This is an exciting news as it makes collaboration on snippets of code a lot easier. You can play around this <strong><a href=\"http://jsfiddle.net/vjeux/kb3gN/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">base React JSFiddle</a></strong>, fork it and share it! A <a href=\"http://jsfiddle.net/vjeux/VkebS/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">fiddle without JSX</a> is also available.</p>\n",
+      "readingTime": "1 min read"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/beta/src/blogIndexRecent.json b/beta/src/blogIndexRecent.json
new file mode 100644
index 000000000..8bf964b5c
--- /dev/null
+++ b/beta/src/blogIndexRecent.json
@@ -0,0 +1,207 @@
+{
+  "title": "Recent Posts",
+  "heading": true,
+  "path": "/blog",
+  "routes": [
+    {
+      "path": "/blog/2020/08/10/react-v17-rc.md",
+      "date": "2020-08-10",
+      "title": "React v17.0 Release Candidate: No New Features",
+      "author": ["gaearon", "rachelnabors"],
+      "excerpt": "<p>Today, we are publishing the first Release Candidate for React 17. It has been two and a half years since <a href=\"/blog/2017/09/26/react-v16.0.html\">the previous major release of React</a>, which is a long time even by our standards! In this blog post, we will describe the role of this major release, what changes you can expect in it, and how you can try this release.</p>\n",
+      "readingTime": "20 min read"
+    },
+    {
+      "path": "/blog/2020/02/26/react-v16.13.0.md",
+      "date": "2020-02-26",
+      "title": "React v16.13.0",
+      "author": ["threepointone"],
+      "excerpt": "<p>Today we are releasing React 16.13.0. It contains bugfixes and new deprecation warnings to help prepare for a future major release.</p>\n",
+      "readingTime": "7 min read"
+    },
+    {
+      "path": "/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense.md",
+      "date": "2019-11-06",
+      "title": "Building Great User Experiences with Concurrent Mode and Suspense",
+      "author": ["josephsavona"],
+      "excerpt": "<p>At React Conf 2019 we announced an <a href=\"/docs/concurrent-mode-adoption#installation\">experimental release</a> of React that supports Concurrent Mode and Suspense. In this post we’ll introduce best practices for using them that we’ve identified through the process of building <a href=\"https://twitter.com/facebook/status/1123322299418124289\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">the new facebook.com</a>.</p>\n",
+      "readingTime": "17 min read"
+    },
+    {
+      "path": "/blog/2019/10/22/react-release-channels.md",
+      "date": "2019-10-22",
+      "title": "Preparing for the Future with React Prereleases",
+      "author": ["acdlite"],
+      "excerpt": "<p>To share upcoming changes with our partners in the React ecosystem, we’re establishing official prerelease channels. We hope this process will help us make changes to React with confidence, and give developers the opportunity to try out experimental features.</p>\n",
+      "readingTime": "7 min read"
+    },
+    {
+      "path": "/blog/2019/08/15/new-react-devtools.md",
+      "date": "2019-08-15",
+      "title": "Introducing the New React DevTools",
+      "author": ["bvaughn"],
+      "excerpt": "<p>We are excited to announce a new release of the React Developer Tools, available today in Chrome, Firefox, and (Chromium) Edge!</p>\n",
+      "readingTime": "2 min read"
+    },
+    {
+      "path": "/blog/2019/08/08/react-v16.9.0.md",
+      "date": "2019-08-08",
+      "title": "React v16.9.0 and the Roadmap Update",
+      "author": ["gaearon", "bvaughn"],
+      "excerpt": "<p>Today we are releasing React 16.9. It contains several new features, bugfixes, and new deprecation warnings to help prepare for a future major release.</p>\n",
+      "readingTime": "11 min read"
+    },
+    {
+      "path": "/blog/2019/02/23/is-react-translated-yet.md",
+      "date": "2019-02-23",
+      "title": "Is React Translated Yet? ¡Sí! Sim! はい！",
+      "author": ["tesseralis"],
+      "excerpt": "<p>We’re excited to announce an ongoing effort to maintain official translations of the React documentation website into different languages. Thanks to the dedicated efforts of React community members from around the world, React is now being translated into <em>over 30</em> languages! You can find them on the new <a href=\"/languages\">Languages</a> page.</p>\n",
+      "readingTime": "7 min read"
+    },
+    {
+      "path": "/blog/2019/02/06/react-v16.8.0.md",
+      "date": "2019-02-06",
+      "title": "React v16.8: The One With Hooks",
+      "author": ["gaearon"],
+      "excerpt": "<p>With React 16.8, <a href=\"/docs/hooks-intro.html\">React Hooks</a> are available in a stable release!</p>\n",
+      "readingTime": "7 min read"
+    },
+    {
+      "path": "/blog/2018/12/19/react-v-16-7.md",
+      "date": "2018-12-19",
+      "title": "React v16.7: No, This Is Not the One With Hooks",
+      "author": ["acdlite"],
+      "excerpt": "<p>Our latest release includes an important performance bugfix for <code>React.lazy</code>. Although there are no API changes, we’re releasing it as a minor instead of a patch.</p>\n",
+      "readingTime": "3 min read"
+    },
+    {
+      "path": "/blog/2018/11/27/react-16-roadmap.md",
+      "date": "2018-11-27",
+      "title": "React 16.x Roadmap",
+      "author": ["gaearon"],
+      "excerpt": "<p>You might have heard about features like “Hooks”, “Suspense”, and “Concurrent Rendering” in the previous blog posts and talks. In this post, we’ll look at how they fit together and the expected timeline for their availability in a stable release of React.</p>\n",
+      "readingTime": "14 min read"
+    },
+    {
+      "path": "/blog/2018/11/13/react-conf-recap.md",
+      "date": "2018-11-13",
+      "title": "React Conf recap: Hooks, Suspense, and Concurrent Rendering",
+      "author": ["tomocchino"],
+      "excerpt": "<p>This year’s <a href=\"https://conf.reactjs.org/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">React Conf</a> took place on October 25 and 26 in Henderson, Nevada, where more than 600 attendees gathered to discuss the latest in UI engineering.</p>\n",
+      "readingTime": "2 min read"
+    },
+    {
+      "path": "/blog/2018/10/23/react-v-16-6.md",
+      "date": "2018-10-23",
+      "title": "React v16.6.0: lazy, memo and contextType",
+      "author": ["sebmarkbage"],
+      "excerpt": "<p>Today we’re releasing React 16.6 with a few new convenient features. A form of PureComponent/shouldComponentUpdate for function components, a way to do code splitting using Suspense and an easier way to consume Context from class components.</p>\n",
+      "readingTime": "5 min read"
+    },
+    {
+      "path": "/blog/2018/10/01/create-react-app-v2.md",
+      "date": "2018-10-01",
+      "title": "Create React App 2.0: Babel 7, Sass, and More",
+      "author": ["timer", "gaearon"],
+      "excerpt": "<p>Create React App 2.0 has been released today, and it brings a year’s worth of improvements in a single dependency update.</p>\n",
+      "readingTime": "6 min read"
+    },
+    {
+      "path": "/blog/2018/09/10/introducing-the-react-profiler.md",
+      "date": "2018-09-10",
+      "title": "Introducing the React Profiler",
+      "author": ["bvaughn"],
+      "excerpt": "<p>React 16.5 adds support for a new DevTools profiler plugin.</p>\n",
+      "readingTime": "8 min read"
+    },
+    {
+      "path": "/blog/2018/08/01/react-v-16-4-2.md",
+      "date": "2018-08-01",
+      "title": "React v16.4.2: Server-side vulnerability fix",
+      "author": ["gaearon"],
+      "excerpt": "<p>We discovered a minor vulnerability that might affect some apps using ReactDOMServer. We are releasing a patch version for every affected React minor release so that you can upgrade with no friction. Read on for more details.</p>\n",
+      "readingTime": "4 min read"
+    },
+    {
+      "path": "/blog/2018/06/07/you-probably-dont-need-derived-state.md",
+      "date": "2018-06-07",
+      "title": "You Probably Don't Need Derived State",
+      "author": ["bvaughn"],
+      "excerpt": "<p>React 16.4 included a <a href=\"/blog/2018/05/23/react-v-16-4#bugfix-for-getderivedstatefromprops\">bugfix for getDerivedStateFromProps</a> which caused some existing bugs in React components to reproduce more consistently. If this release exposed a case where your application was using an anti-pattern and didn’t work properly after the fix, we’re sorry for the churn. In this post, we will explain some common anti-patterns with derived state and our preferred alternatives.</p>\n",
+      "readingTime": "14 min read"
+    },
+    {
+      "path": "/blog/2018/05/23/react-v-16-4.md",
+      "date": "2018-05-23",
+      "title": "React v16.4.0: Pointer Events",
+      "author": ["acdlite"],
+      "excerpt": "<p>The latest minor release adds support for an oft-requested feature: pointer events!</p>\n",
+      "readingTime": "5 min read"
+    },
+    {
+      "path": "/blog/2018/03/29/react-v-16-3.md",
+      "date": "2018-03-29",
+      "title": "React v16.3.0: New lifecycles and context API",
+      "author": ["bvaughn"],
+      "excerpt": "<p>A few days ago, we <a href=\"/blog/2018/03/27/update-on-async-rendering\">wrote a post about upcoming changes to our legacy lifecycle methods</a>, including gradual migration strategies. In React 16.3.0, we are adding a few new lifecycle methods to assist with that migration. We are also introducing new APIs for long requested features: an official context API, a ref forwarding API, and an ergonomic ref API.</p>\n",
+      "readingTime": "6 min read"
+    },
+    {
+      "path": "/blog/2018/03/27/update-on-async-rendering.md",
+      "date": "2018-03-27",
+      "title": "Update on Async Rendering",
+      "author": ["bvaughn"],
+      "excerpt": "<p>For over a year, the React team has been working to implement asynchronous rendering. Last month during his talk at JSConf Iceland, <a href=\"/blog/2018/03/01/sneak-peek-beyond-react-16\">Dan unveiled some of the exciting new possibilities async rendering unlocks</a>. Now we’d like to share with you some of the lessons we’ve learned while working on these features, and some recipes to help prepare your components for async rendering when it launches.</p>\n",
+      "readingTime": "12 min read"
+    },
+    {
+      "path": "/blog/2018/03/01/sneak-peek-beyond-react-16.md",
+      "date": "2018-03-01",
+      "title": "Sneak Peek: Beyond React 16",
+      "author": ["sophiebits"],
+      "excerpt": "<p><a href=\"https://twitter.com/dan_abramov\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Dan Abramov</a> from our team just spoke at <a href=\"https://2018.jsconf.is/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">JSConf Iceland 2018</a> with a preview of some new features we’ve been working on in React. The talk opens with a question: “With vast differences in computing power and network speed, how do we deliver the best user experience for everyone?”</p>\n",
+      "readingTime": "2 min read"
+    },
+    {
+      "path": "/blog/2017/12/15/improving-the-repository-infrastructure.md",
+      "date": "2017-12-15",
+      "title": "Behind the Scenes: Improving the Repository Infrastructure",
+      "author": ["gaearon", "bvaughn"],
+      "excerpt": "<p>As we worked on <a href=\"/blog/2017/09/26/react-v16.0\">React 16</a>, we revamped the folder structure and much of the build tooling in the React repository. Among other things, we introduced projects such as <a href=\"https://rollupjs.org/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Rollup</a>, <a href=\"https://prettier.io/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Prettier</a>, and <a href=\"https://developers.google.com/closure/compiler/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Google Closure Compiler</a> into our workflow. People often ask us questions about how we use those tools. In this post, we would like to share some of the changes that we’ve made to our build and test infrastructure in 2017, and what motivated them.</p>\n",
+      "readingTime": "30 min read"
+    },
+    {
+      "path": "/blog/2017/12/07/introducing-the-react-rfc-process.md",
+      "date": "2017-12-07",
+      "title": "Introducing the React RFC Process",
+      "author": ["acdlite"],
+      "excerpt": "<p>We’re adopting an RFC (“request for comments”) process for contributing ideas to React.</p>\n",
+      "readingTime": "2 min read"
+    },
+    {
+      "path": "/blog/2017/11/28/react-v16.2.0-fragment-support.md",
+      "date": "2017-11-28",
+      "title": "React v16.2.0: Improved Support for Fragments",
+      "author": ["clemmy"],
+      "excerpt": "<p>React 16.2 is now available! The biggest addition is improved support for returning multiple children from a component’s render method. We call this feature <em>fragments</em>:</p>\n",
+      "readingTime": "8 min read"
+    },
+    {
+      "path": "/blog/2017/09/26/react-v16.0.md",
+      "date": "2017-09-26",
+      "title": "React v16.0",
+      "author": ["acdlite"],
+      "excerpt": "<p>We’re excited to announce the release of React v16.0! Among the changes are some long-standing feature requests, including <a href=\"#new-render-return-types-fragments-and-strings\"><strong>fragments</strong></a>, <a href=\"#better-error-handling\"><strong>error boundaries</strong></a>, <a href=\"#portals\"><strong>portals</strong></a>, support for <a href=\"#support-for-custom-dom-attributes\"><strong>custom DOM attributes</strong></a>, improved <a href=\"#better-server-side-rendering\"><strong>server-side rendering</strong></a>, and <a href=\"#reduced-file-size\"><strong>reduced file size</strong></a>.</p>\n",
+      "readingTime": "11 min read"
+    },
+    {
+      "path": "/blog/2017/09/25/react-v15.6.2.md",
+      "date": "2017-09-25",
+      "title": "React v15.6.2",
+      "author": ["nhunzaker"],
+      "excerpt": "<p>Today we’re sending out React 15.6.2. In 15.6.1, we shipped a few fixes for change events and inputs that had some unintended consequences. Those regressions have been ironed out, and we’ve also included a few more fixes to improve the stability of React across all browsers.</p>\n",
+      "readingTime": "3 min read"
+    }
+  ]
+}
diff --git a/beta/src/components/Breadcrumbs.tsx b/beta/src/components/Breadcrumbs.tsx
new file mode 100644
index 000000000..9bd630b12
--- /dev/null
+++ b/beta/src/components/Breadcrumbs.tsx
@@ -0,0 +1,45 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {Fragment} from 'react';
+import {useRouteMeta} from 'components/Layout/useRouteMeta';
+import Link from 'next/link';
+
+function Breadcrumbs() {
+  const {breadcrumbs} = useRouteMeta();
+  if (!breadcrumbs) return null;
+  return (
+    <div className="flex flex-wrap">
+      {breadcrumbs.map(
+        (crumb, i) =>
+          crumb.path && (
+            <div className="flex mb-3 mt-0.5 items-center" key={i}>
+              <Fragment key={crumb.path}>
+                <Link href={crumb.path}>
+                  <a className="text-link dark:text-link-dark text-sm tracking-wide font-bold uppercase mr-1 hover:underline">
+                    {crumb.title}
+                  </a>
+                </Link>
+                <span className="inline-block mr-1 text-link dark:text-link-dark text-lg">
+                  <svg
+                    width="20"
+                    height="20"
+                    viewBox="0 0 20 20"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg">
+                    <path
+                      d="M6.86612 13.6161C6.37796 14.1043 6.37796 14.8957 6.86612 15.3839C7.35427 15.872 8.14572 15.872 8.63388 15.3839L13.1339 10.8839C13.622 10.3957 13.622 9.60428 13.1339 9.11612L8.63388 4.61612C8.14572 4.12797 7.35427 4.12797 6.86612 4.61612C6.37796 5.10428 6.37796 5.89573 6.86612 6.38388L10.4822 10L6.86612 13.6161Z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
+              </Fragment>
+            </div>
+          )
+      )}
+    </div>
+  );
+}
+
+export default Breadcrumbs;
diff --git a/beta/src/components/Button.tsx b/beta/src/components/Button.tsx
new file mode 100644
index 000000000..9d4d0cf2b
--- /dev/null
+++ b/beta/src/components/Button.tsx
@@ -0,0 +1,51 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import * as React from 'react';
+import cn from 'classnames';
+
+interface ButtonProps {
+  children: React.ReactNode;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  active: boolean;
+  className?: string;
+  style?: Record<string, string>;
+}
+
+export function Button({
+  children,
+  onClick,
+  active,
+  className,
+  style,
+}: ButtonProps) {
+  return (
+    <button
+      style={style}
+      onMouseDown={(evt) => {
+        evt.preventDefault();
+        evt.stopPropagation();
+      }}
+      onClick={onClick}
+      className={cn(
+        className,
+        'text-base leading-tight font-bold border rounded-lg py-2 px-4 focus:ring-1 focus:ring-offset-2 focus:ring-link active:bg-link active:border-link active:text-white active:ring-0 active:ring-offset-0 outline-none inline-flex items-center my-1',
+        {
+          'bg-link border-link text-white hover:bg-link focus:bg-link active:bg-link':
+            active,
+          'bg-transparent text-secondary dark:text-secondary-dark bg-secondary-button dark:bg-secondary-button-dark hover:text-link focus:text-link border-transparent':
+            !active,
+        }
+      )}>
+      {children}
+    </button>
+  );
+}
+
+Button.defaultProps = {
+  active: false,
+  style: {},
+};
+
+export default Button;
diff --git a/beta/src/components/ButtonLink.tsx b/beta/src/components/ButtonLink.tsx
new file mode 100644
index 000000000..b3fe73ad9
--- /dev/null
+++ b/beta/src/components/ButtonLink.tsx
@@ -0,0 +1,45 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import cn from 'classnames';
+import NextLink from 'next/link';
+
+interface ButtonLinkProps {
+  size?: 'md' | 'lg';
+  type?: 'primary' | 'secondary';
+  label?: string;
+  target?: '_self' | '_blank';
+}
+
+function ButtonLink({
+  href,
+  className,
+  children,
+  type = 'primary',
+  size = 'md',
+  label,
+  target = '_self',
+  ...props
+}: JSX.IntrinsicElements['a'] & ButtonLinkProps) {
+  const classes = cn(
+    className,
+    'inline-flex font-bold items-center border-2 border-transparent outline-none focus:ring-1 focus:ring-offset-2 focus:ring-link active:bg-link active:text-white active:ring-0 active:ring-offset-0 leading-normal',
+    {
+      'bg-link text-white hover:bg-opacity-80': type === 'primary',
+      'bg-secondary-button dark:bg-secondary-button-dark text-primary dark:text-primary-dark hover:text-link focus:bg-link focus:text-white focus:border-link focus:border-2':
+        type === 'secondary',
+      'text-lg rounded-lg p-4': size === 'lg',
+      'text-base rounded-lg px-4 py-1.5': size === 'md',
+    }
+  );
+  return (
+    <NextLink href={href as string}>
+      <a className={classes} {...props} aria-label={label} target={target}>
+        {children}
+      </a>
+    </NextLink>
+  );
+}
+
+export default ButtonLink;
diff --git a/beta/src/components/DocsFooter.tsx b/beta/src/components/DocsFooter.tsx
new file mode 100644
index 000000000..6a8597705
--- /dev/null
+++ b/beta/src/components/DocsFooter.tsx
@@ -0,0 +1,91 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import NextLink from 'next/link';
+import {memo} from 'react';
+import cn from 'classnames';
+import {removeFromLast} from 'utils/removeFromLast';
+import {IconNavArrow} from './Icon/IconNavArrow';
+import {RouteMeta} from './Layout/useRouteMeta';
+
+export type DocsPageFooterProps = Pick<
+  RouteMeta,
+  'route' | 'nextRoute' | 'prevRoute'
+>;
+
+function areEqual(prevProps: DocsPageFooterProps, props: DocsPageFooterProps) {
+  return prevProps.route?.path === props.route?.path;
+}
+
+export const DocsPageFooter = memo<DocsPageFooterProps>(
+  function DocsPageFooter({nextRoute, prevRoute, route}) {
+    if (!route || route?.heading) {
+      return null;
+    }
+
+    return (
+      <>
+        {prevRoute?.path || nextRoute?.path ? (
+          <>
+            <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-4 py-4 md:py-12">
+              {prevRoute?.path ? (
+                <FooterLink
+                  type="Previous"
+                  title={prevRoute.title}
+                  href={removeFromLast(prevRoute.path, '.')}
+                />
+              ) : (
+                <div />
+              )}
+
+              {nextRoute?.path ? (
+                <FooterLink
+                  type="Next"
+                  title={nextRoute.title}
+                  href={removeFromLast(nextRoute.path, '.')}
+                />
+              ) : (
+                <div />
+              )}
+            </div>
+          </>
+        ) : null}
+      </>
+    );
+  },
+  areEqual
+);
+
+function FooterLink({
+  href,
+  title,
+  type,
+}: {
+  href: string;
+  title: string;
+  type: 'Previous' | 'Next';
+}) {
+  return (
+    <NextLink href={href}>
+      <a
+        className={cn(
+          'flex gap-x-4 md:gap-x-6 items-center w-full md:w-80 px-4 md:px-5 py-6 border-2 border-transparent text-base leading-base text-link dark:text-link-dark rounded-lg group focus:text-link dark:focus:text-link-dark focus:bg-highlight focus:border-link dark:focus:bg-highlight-dark dark:focus:border-link-dark focus:border-opacity-100 focus:border-2 focus:ring-1 focus:ring-offset-4 focus:ring-blue-40 active:ring-0 active:ring-offset-0 hover:bg-gray-5 dark:hover:bg-gray-80',
+          {
+            'flex-row-reverse justify-self-end text-right': type === 'Next',
+          }
+        )}>
+        <IconNavArrow
+          className="text-gray-30 dark:text-gray-50 inline group-focus:text-link dark:group-focus:text-link-dark"
+          displayDirection={type === 'Previous' ? 'left' : 'right'}
+        />
+        <span>
+          <span className="block no-underline text-sm tracking-wide text-secondary dark:text-secondary-dark uppercase font-bold group-focus:text-link dark:group-focus:text-link-dark group-focus:text-opacity-100">
+            {type}
+          </span>
+          <span className="block text-lg group-hover:underline">{title}</span>
+        </span>
+      </a>
+    </NextLink>
+  );
+}
diff --git a/beta/src/components/ExternalLink.tsx b/beta/src/components/ExternalLink.tsx
new file mode 100644
index 000000000..38b1f2c5f
--- /dev/null
+++ b/beta/src/components/ExternalLink.tsx
@@ -0,0 +1,16 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+export function ExternalLink({
+  href,
+  target,
+  children,
+  ...props
+}: JSX.IntrinsicElements['a']) {
+  return (
+    <a href={href} target={target ?? '_blank'} rel="noopener" {...props}>
+      {children}
+    </a>
+  );
+}
diff --git a/beta/src/components/Icon/IconArrow.tsx b/beta/src/components/Icon/IconArrow.tsx
new file mode 100644
index 000000000..53bde1326
--- /dev/null
+++ b/beta/src/components/Icon/IconArrow.tsx
@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {memo} from 'react';
+import cn from 'classnames';
+
+export const IconArrow = memo<
+  JSX.IntrinsicElements['svg'] & {
+    displayDirection: 'left' | 'right' | 'up' | 'down';
+  }
+>(function IconArrow({displayDirection, className, ...rest}) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width="1.33em"
+      height="1.33em"
+      fill="currentColor"
+      {...rest}
+      className={cn(className, {
+        'rotate-180': displayDirection === 'right',
+      })}>
+      <path fill="none" d="M0 0h24v24H0z" />
+      <path d="M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414z" />
+    </svg>
+  );
+});
diff --git a/beta/src/components/Icon/IconArrowSmall.tsx b/beta/src/components/Icon/IconArrowSmall.tsx
new file mode 100644
index 000000000..cf85988d2
--- /dev/null
+++ b/beta/src/components/Icon/IconArrowSmall.tsx
@@ -0,0 +1,31 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {memo} from 'react';
+import cn from 'classnames';
+
+export const IconArrowSmall = memo<
+  JSX.IntrinsicElements['svg'] & {
+    displayDirection: 'left' | 'right' | 'up' | 'down';
+  }
+>(function IconArrowSmall({displayDirection, className, ...rest}) {
+  const classes = cn(className, {
+    'rotate-180': displayDirection === 'left',
+    'rotate-90': displayDirection === 'down',
+  });
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={classes}
+      {...rest}>
+      <path
+        d="M6.86612 13.6161C6.37796 14.1043 6.37796 14.8957 6.86612 15.3839C7.35427 15.872 8.14572 15.872 8.63388 15.3839L13.1339 10.8839C13.622 10.3957 13.622 9.60428 13.1339 9.11612L8.63388 4.61612C8.14572 4.12797 7.35427 4.12797 6.86612 4.61612C6.37796 5.10428 6.37796 5.89573 6.86612 6.38388L10.4822 10L6.86612 13.6161Z"
+        fill="currentColor"></path>
+    </svg>
+  );
+});
diff --git a/beta/src/components/Icon/IconChevron.tsx b/beta/src/components/Icon/IconChevron.tsx
new file mode 100644
index 000000000..1184d77d2
--- /dev/null
+++ b/beta/src/components/Icon/IconChevron.tsx
@@ -0,0 +1,40 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {memo} from 'react';
+import cn from 'classnames';
+
+export const IconChevron = memo<
+  JSX.IntrinsicElements['svg'] & {
+    displayDirection: 'up' | 'down' | 'left' | 'right';
+  }
+>(function IconChevron({className, displayDirection}) {
+  const classes = cn(
+    {
+      'rotate-0': displayDirection === 'down',
+      'rotate-90': displayDirection === 'left',
+      'rotate-180': displayDirection === 'up',
+      '-rotate-90': displayDirection === 'right',
+    },
+    className
+  );
+  return (
+    <svg
+      className={classes}
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20">
+      <g fill="none" fillRule="evenodd" transform="translate(-446 -398)">
+        <path
+          fill="currentColor"
+          fillRule="nonzero"
+          d="M95.8838835,240.366117 C95.3957281,239.877961 94.6042719,239.877961 94.1161165,240.366117 C93.6279612,240.854272 93.6279612,241.645728 94.1161165,242.133883 L98.6161165,246.633883 C99.1042719,247.122039 99.8957281,247.122039 100.383883,246.633883 L104.883883,242.133883 C105.372039,241.645728 105.372039,240.854272 104.883883,240.366117 C104.395728,239.877961 103.604272,239.877961 103.116117,240.366117 L99.5,243.982233 L95.8838835,240.366117 Z"
+          transform="translate(356.5 164.5)"
+        />
+        <polygon points="446 418 466 418 466 398 446 398" />
+      </g>
+    </svg>
+  );
+});
diff --git a/beta/src/components/Icon/IconClose.tsx b/beta/src/components/Icon/IconClose.tsx
new file mode 100644
index 000000000..5ad352cf0
--- /dev/null
+++ b/beta/src/components/Icon/IconClose.tsx
@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {memo} from 'react';
+
+export const IconClose = memo<JSX.IntrinsicElements['svg']>(function IconClose(
+  props
+) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1.33em"
+      height="1.33em"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}>
+      <line x1={18} y1={6} x2={6} y2={18} />
+      <line x1={6} y1={6} x2={18} y2={18} />
+    </svg>
+  );
+});
diff --git a/beta/src/components/Icon/IconCodeBlock.tsx b/beta/src/components/Icon/IconCodeBlock.tsx
new file mode 100644
index 000000000..755a2ae34
--- /dev/null
+++ b/beta/src/components/Icon/IconCodeBlock.tsx
@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {memo} from 'react';
+
+export const IconCodeBlock = memo<JSX.IntrinsicElements['svg']>(
+  function IconCodeBlock({className}) {
+    return (
+      <svg
+        className={className}
+        width="1.33em"
+        height="1em"
+        viewBox="0 0 24 18"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M24 9L18.343 14.657L16.929 13.243L21.172 9L16.929 4.757L18.343 3.343L24 9ZM2.828 9L7.071 13.243L5.657 14.657L0 9L5.657 3.343L7.07 4.757L2.828 9ZM9.788 18H7.66L14.212 0H16.34L9.788 18Z"
+          fill="currentColor"
+        />
+      </svg>
+    );
+  }
+);
diff --git a/beta/src/components/Icon/IconCopy.tsx b/beta/src/components/Icon/IconCopy.tsx
new file mode 100644
index 000000000..500cd4fda
--- /dev/null
+++ b/beta/src/components/Icon/IconCopy.tsx
@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {memo} from 'react';
+
+export const IconCopy = memo<JSX.IntrinsicElements['svg']>(function IconCopy({
+  className,
+}) {
+  return (
+    <svg
+      className={className}
+      width="1em"
+      height="1em"
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5.40382 15.3671C5.03332 15.1901 4.70081 14.9381 4.42481 14.6286C4.34831 14.5431 4.23931 14.5001 4.12981 14.5206L3.66181 14.6081C3.33531 14.6691 3.02032 14.4361 2.96232 14.0876L1.30981 4.12512C1.28181 3.95662 1.31731 3.7861 1.40981 3.6456C1.50231 3.5051 1.64082 3.41162 1.79932 3.38162L3.22131 3.00012C3.37681 2.97062 3.48981 2.82761 3.48981 2.65961V1.9101C3.48981 1.8276 3.49381 1.74561 3.49931 1.66461C3.50931 1.53461 3.35181 1.57211 3.35181 1.57211L1.64381 2.0076C1.18481 2.0936 0.751316 2.32662 0.451316 2.70612C0.0808162 3.17362 -0.0686885 3.77259 0.0293115 4.36459L1.68231 14.3281C1.84531 15.3081 2.65031 16.0001 3.55631 16.0001C3.66531 16.0001 3.77631 15.9896 3.88731 15.9691L5.36632 15.6916C5.52332 15.6626 5.54982 15.4366 5.40382 15.3671ZM14.9331 4.55801H12.9116C12.1351 4.55801 11.5001 3.91502 11.5001 3.12952V1.06802C11.5001 0.480524 11.0196 0 10.4321 0H7.44161C6.36911 0 5.50011 0.879508 5.50011 1.96451V12.1665C5.50011 13.179 6.33412 14 7.36262 14H14.1371C15.1661 14 16.0001 13.179 16.0001 12.1665V5.625C16.0001 5.038 15.5201 4.55801 14.9331 4.55801Z"
+        fill="currentColor"
+      />{' '}
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12.5888 0.0914385C12.4493 0.00843847 12.5158 0.252449 12.5158 0.252449C12.5653 0.428449 12.5918 0.613451 12.5918 0.804451V2.90296C12.5918 3.17646 12.8158 3.40046 13.0903 3.40046H15.1718C15.3883 3.40046 15.5968 3.43495 15.7918 3.49845C15.7918 3.49845 15.9373 3.50844 15.9008 3.43494C15.8383 3.33744 15.7673 3.24494 15.6833 3.16044L12.8303 0.289467C12.7558 0.214467 12.6743 0.149438 12.5888 0.0914385Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+});
diff --git a/beta/src/components/Icon/IconDeepDive.tsx b/beta/src/components/Icon/IconDeepDive.tsx
new file mode 100644
index 000000000..fe3e7774c
--- /dev/null
+++ b/beta/src/components/Icon/IconDeepDive.tsx
@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {memo} from 'react';
+
+export const IconDeepDive = memo<JSX.IntrinsicElements['svg']>(
+  function IconDeepDive({className}) {
+    return (
+      <svg
+        className={className}
+        width="0.78em"
+        height="0.78em"
+        viewBox="0 0 14 14"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M7.62728 12.3491V13.6825H6.29395V12.3491H0.960612C0.783801 12.3491 0.614232 12.2789 0.489207 12.1539C0.364183 12.0288 0.293945 11.8593 0.293945 11.6825V1.01579C0.293945 0.838979 0.364183 0.669409 0.489207 0.544385C0.614232 0.419361 0.783801 0.349123 0.960612 0.349123H4.96061C5.339 0.348674 5.71313 0.42896 6.05803 0.584621C6.40292 0.740282 6.71063 0.967734 6.96061 1.25179C7.2106 0.967734 7.51831 0.740282 7.8632 0.584621C8.20809 0.42896 8.58222 0.348674 8.96061 0.349123H12.9606C13.1374 0.349123 13.307 0.419361 13.432 0.544385C13.557 0.669409 13.6273 0.838979 13.6273 1.01579V11.6825C13.6273 11.8593 13.557 12.0288 13.432 12.1539C13.307 12.2789 13.1374 12.3491 12.9606 12.3491H7.62728ZM12.2939 11.0158V1.68246H8.96061C8.60699 1.68246 8.26785 1.82293 8.0178 2.07298C7.76776 2.32303 7.62728 2.66217 7.62728 3.01579V11.0158H12.2939ZM6.29395 11.0158V3.01579C6.29395 2.66217 6.15347 2.32303 5.90342 2.07298C5.65337 1.82293 5.31423 1.68246 4.96061 1.68246H1.62728V11.0158H6.29395Z"
+          fill="currentColor"
+        />
+      </svg>
+    );
+  }
+);
diff --git a/beta/src/components/Icon/IconDownload.tsx b/beta/src/components/Icon/IconDownload.tsx
new file mode 100644
index 000000000..c0e7f49c2
--- /dev/null
+++ b/beta/src/components/Icon/IconDownload.tsx
@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {memo} from 'react';
+
+export const IconDownload = memo<JSX.IntrinsicElements['svg']>(
+  function IconDownload({className}) {
+    return (
+      <svg
+        width="1em"
+        height="1em"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        className={className}>
+        <path
+          d="M20.5 22H3.5C3.10218 22 2.72064 21.842 2.43934 21.5607C2.15804 21.2794 2 20.8978 2 20.5V15.5C2 15.3674 2.05268 15.2402 2.14645 15.1464C2.24021 15.0527 2.36739 15 2.5 15H3.5C3.63261 15 3.75979 15.0527 3.85355 15.1464C3.94732 15.2402 4 15.3674 4 15.5V20H20V15.5C20 15.3674 20.0527 15.2402 20.1464 15.1464C20.2402 15.0527 20.3674 15 20.5 15H21.5C21.6326 15 21.7598 15.0527 21.8536 15.1464C21.9473 15.2402 22 15.3674 22 15.5V20.5C22 20.8978 21.842 21.2794 21.5607 21.5607C21.2794 21.842 20.8978 22 20.5 22Z"
+          fill="currentColor"
+        />
+        <path
+          d="M10.9999 2.5V13.79L8.81994 11.61C8.72479 11.5178 8.59747 11.4662 8.46494 11.4662C8.33241 11.4662 8.20509 11.5178 8.10994 11.61L7.39994 12.32C7.30769 12.4151 7.2561 12.5425 7.2561 12.675C7.2561 12.8075 7.30769 12.9348 7.39994 13.03L10.9399 16.56C11.0785 16.7003 11.2436 16.8117 11.4255 16.8877C11.6075 16.9637 11.8027 17.0029 11.9999 17.0029C12.1971 17.0029 12.3924 16.9637 12.5743 16.8877C12.7563 16.8117 12.9214 16.7003 13.0599 16.56L16.5999 13C16.6922 12.9048 16.7438 12.7775 16.7438 12.645C16.7438 12.5125 16.6922 12.3851 16.5999 12.29L15.8899 11.58C15.7948 11.4878 15.6675 11.4362 15.5349 11.4362C15.4024 11.4362 15.2751 11.4878 15.1799 11.58L12.9999 13.79V2.5C12.9999 2.36739 12.9473 2.24021 12.8535 2.14645C12.7597 2.05268 12.6325 2 12.4999 2H11.4999C11.3673 2 11.2402 2.05268 11.1464 2.14645C11.0526 2.24021 10.9999 2.36739 10.9999 2.5Z"
+          fill="currentColor"
+        />
+      </svg>
+    );
+  }
+);
diff --git a/beta/src/components/Icon/IconError.tsx b/beta/src/components/Icon/IconError.tsx
new file mode 100644
index 000000000..f101f62b2
--- /dev/null
+++ b/beta/src/components/Icon/IconError.tsx
@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {memo} from 'react';
+
+export const IconError = memo<JSX.IntrinsicElements['svg']>(function IconError({
+  className,
+}) {
+  return (
+    <svg
+      className={className}
+      width="1.33em"
+      height="1.33em"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg">
+      <circle cx="10.1626" cy="9.99951" r="9.47021" fill="currentColor" />
+      <path d="M6.22705 5.95996L14.2798 14.0127" stroke="white" />
+      <path d="M14.2798 5.95996L6.22705 14.0127" stroke="white" />
+    </svg>
+  );
+});
diff --git a/beta/src/components/Icon/IconFacebookCircle.tsx b/beta/src/components/Icon/IconFacebookCircle.tsx
new file mode 100644
index 000000000..0900d6815
--- /dev/null
+++ b/beta/src/components/Icon/IconFacebookCircle.tsx
@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {memo} from 'react';
+
+export const IconFacebookCircle = memo<JSX.IntrinsicElements['svg']>(
+  function IconFacebookCircle(props) {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        width="1.33em"
+        height="1.33em"
+        fill="currentColor"
+        {...props}>
+        <path fill="none" d="M0 0h24v24H0z" />
+        <path d="M12 2C6.477 2 2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.879V14.89h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.989C18.343 21.129 22 16.99 22 12c0-5.523-4.477-10-10-10z" />
+      </svg>
+    );
+  }
+);
diff --git a/beta/src/components/Icon/IconGitHub.tsx b/beta/src/components/Icon/IconGitHub.tsx
new file mode 100644
index 000000000..de2a982bd
--- /dev/null
+++ b/beta/src/components/Icon/IconGitHub.tsx
@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {memo} from 'react';
+
+export const IconGitHub = memo<JSX.IntrinsicElements['svg']>(
+  function IconGitHub(props) {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="1.33em"
+        height="1.33em"
+        viewBox="0 -2 24 24"
+        fill="currentColor"
+        {...props}>
+        <path d="M10 0a10 10 0 0 0-3.16 19.49c.5.1.68-.22.68-.48l-.01-1.7c-2.78.6-3.37-1.34-3.37-1.34-.46-1.16-1.11-1.47-1.11-1.47-.9-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.9 1.52 2.34 1.08 2.91.83.1-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.1.39-1.99 1.03-2.69a3.6 3.6 0 0 1 .1-2.64s.84-.27 2.75 1.02a9.58 9.58 0 0 1 5 0c1.91-1.3 2.75-1.02 2.75-1.02.55 1.37.2 2.4.1 2.64.64.7 1.03 1.6 1.03 2.69 0 3.84-2.34 4.68-4.57 4.93.36.31.68.92.68 1.85l-.01 2.75c0 .26.18.58.69.48A10 10 0 0 0 10 0"></path>
+      </svg>
+    );
+  }
+);
diff --git a/beta/src/components/Icon/IconHamburger.tsx b/beta/src/components/Icon/IconHamburger.tsx
new file mode 100644
index 000000000..5e6aa725a
--- /dev/null
+++ b/beta/src/components/Icon/IconHamburger.tsx
@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {memo} from 'react';
+
+export const IconHamburger = memo<JSX.IntrinsicElements['svg']>(
+  function IconHamburger(props) {
+    return (
+      <svg
+        width="1.33em"
+        height="1.33em"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...props}>
+        <line x1="3" y1="12" x2="21" y2="12"></line>
+        <line x1="3" y1="6" x2="21" y2="6"></line>
+        <line x1="3" y1="18" x2="21" y2="18"></line>
+      </svg>
+    );
+  }
+);
diff --git a/beta/src/components/Icon/IconHint.tsx b/beta/src/components/Icon/IconHint.tsx
new file mode 100644
index 000000000..b802bc79c
--- /dev/null
+++ b/beta/src/components/Icon/IconHint.tsx
@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {memo} from 'react';
+import cn from 'classnames';
+
+export const IconHint = memo<JSX.IntrinsicElements['svg']>(function IconHint({
+  className,
+}) {
+  return (
+    <svg
+      className={cn('inline -mt-0.5', className)}
+      width="12"
+      height="14"
+      viewBox="0 0 12 15"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M4.53487 11H5.21954V7.66665H6.55287V11H7.23754C7.32554 10.1986 7.7342 9.53732 8.39754 8.81532C8.47287 8.73398 8.9522 8.23732 9.00887 8.16665C9.47973 7.5784 9.77486 6.86913 9.86028 6.1205C9.9457 5.37187 9.81794 4.61434 9.4917 3.93514C9.16547 3.25594 8.65402 2.6827 8.01628 2.28143C7.37853 1.88016 6.64041 1.66719 5.88692 1.66703C5.13344 1.66686 4.39523 1.87953 3.75731 2.28052C3.11939 2.68152 2.60771 3.25454 2.28118 3.9336C1.95465 4.61266 1.82656 5.37014 1.91167 6.1188C1.99677 6.86747 2.2916 7.57687 2.7622 8.16532C2.81954 8.23665 3.3002 8.73398 3.3742 8.81465C4.0382 9.53732 4.44687 10.1986 4.53487 11ZM4.55287 12.3333V13H7.21954V12.3333H4.55287ZM1.7222 8.99998C1.09433 8.21551 0.700836 7.26963 0.587047 6.2713C0.473258 5.27296 0.643804 4.26279 1.07904 3.35715C1.51428 2.4515 2.19649 1.68723 3.04711 1.15237C3.89772 0.617512 4.88213 0.333824 5.88692 0.333984C6.89172 0.334145 7.87604 0.61815 8.72648 1.15328C9.57692 1.68841 10.2589 2.4529 10.6938 3.35869C11.1288 4.26447 11.299 5.27469 11.1849 6.27299C11.0708 7.27129 10.677 8.21705 10.0489 9.00132C9.63554 9.51598 8.55287 10.3333 8.55287 11.3333V13C8.55287 13.3536 8.41239 13.6927 8.16235 13.9428C7.9123 14.1928 7.57316 14.3333 7.21954 14.3333H4.55287C4.19925 14.3333 3.86011 14.1928 3.61006 13.9428C3.36001 13.6927 3.21954 13.3536 3.21954 13V11.3333C3.21954 10.3333 2.1362 9.51598 1.7222 8.99998Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+});
diff --git a/beta/src/components/Icon/IconInstagram.tsx b/beta/src/components/Icon/IconInstagram.tsx
new file mode 100644
index 000000000..6868a0a75
--- /dev/null
+++ b/beta/src/components/Icon/IconInstagram.tsx
@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {memo} from 'react';
+
+export const IconInstagram = memo<JSX.IntrinsicElements['svg']>(
+  function IconInstagram(props) {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        width="1.33em"
+        height="1.33em"
+        fill="currentColor"
+        {...props}>
+        <path fill="none" d="M0 0h24v24H0z" />
+        <path d="M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm0-2a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm6.5-.25a1.25 1.25 0 0 1-2.5 0 1.25 1.25 0 0 1 2.5 0zM12 4c-2.474 0-2.878.007-4.029.058-.784.037-1.31.142-1.798.332-.434.168-.747.369-1.08.703a2.89 2.89 0 0 0-.704 1.08c-.19.49-.295 1.015-.331 1.798C4.006 9.075 4 9.461 4 12c0 2.474.007 2.878.058 4.029.037.783.142 1.31.331 1.797.17.435.37.748.702 1.08.337.336.65.537 1.08.703.494.191 1.02.297 1.8.333C9.075 19.994 9.461 20 12 20c2.474 0 2.878-.007 4.029-.058.782-.037 1.309-.142 1.797-.331.433-.169.748-.37 1.08-.702.337-.337.538-.65.704-1.08.19-.493.296-1.02.332-1.8.052-1.104.058-1.49.058-4.029 0-2.474-.007-2.878-.058-4.029-.037-.782-.142-1.31-.332-1.798a2.911 2.911 0 0 0-.703-1.08 2.884 2.884 0 0 0-1.08-.704c-.49-.19-1.016-.295-1.798-.331C14.925 4.006 14.539 4 12 4zm0-2c2.717 0 3.056.01 4.122.06 1.065.05 1.79.217 2.428.465.66.254 1.216.598 1.772 1.153a4.908 4.908 0 0 1 1.153 1.772c.247.637.415 1.363.465 2.428.047 1.066.06 1.405.06 4.122 0 2.717-.01 3.056-.06 4.122-.05 1.065-.218 1.79-.465 2.428a4.883 4.883 0 0 1-1.153 1.772 4.915 4.915 0 0 1-1.772 1.153c-.637.247-1.363.415-2.428.465-1.066.047-1.405.06-4.122.06-2.717 0-3.056-.01-4.122-.06-1.065-.05-1.79-.218-2.428-.465a4.89 4.89 0 0 1-1.772-1.153 4.904 4.904 0 0 1-1.153-1.772c-.248-.637-.415-1.363-.465-2.428C2.013 15.056 2 14.717 2 12c0-2.717.01-3.056.06-4.122.05-1.066.217-1.79.465-2.428a4.88 4.88 0 0 1 1.153-1.772A4.897 4.897 0 0 1 5.45 2.525c.638-.248 1.362-.415 2.428-.465C8.944 2.013 9.283 2 12 2z" />
+      </svg>
+    );
+  }
+);
diff --git a/beta/src/components/Icon/IconLink.tsx b/beta/src/components/Icon/IconLink.tsx
new file mode 100644
index 000000000..587b4e6ed
--- /dev/null
+++ b/beta/src/components/Icon/IconLink.tsx
@@ -0,0 +1,25 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {memo} from 'react';
+
+export const IconLink = memo<JSX.IntrinsicElements['svg']>(function IconLink(
+  props
+) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1.33em"
+      height="1.33em"
+      viewBox="0 -2 24 24"
+      fill="currentColor"
+      {...props}>
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244"
+      />
+    </svg>
+  );
+});
diff --git a/beta/src/components/Icon/IconNavArrow.tsx b/beta/src/components/Icon/IconNavArrow.tsx
new file mode 100644
index 000000000..93eed6e3c
--- /dev/null
+++ b/beta/src/components/Icon/IconNavArrow.tsx
@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {memo} from 'react';
+import cn from 'classnames';
+
+export const IconNavArrow = memo<
+  JSX.IntrinsicElements['svg'] & {
+    displayDirection: 'right' | 'down' | 'left';
+  }
+>(function IconNavArrow({displayDirection = 'right', className}) {
+  const classes = cn(
+    'duration-100 ease-in transition',
+    {
+      'rotate-0': displayDirection === 'down',
+      '-rotate-90': displayDirection === 'right',
+      'rotate-90': displayDirection === 'left',
+    },
+    className
+  );
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      className={classes}
+      style={{minWidth: 20, minHeight: 20}}>
+      <g fill="none" fillRule="evenodd" transform="translate(-446 -398)">
+        <path
+          fill="currentColor"
+          fillRule="nonzero"
+          d="M95.8838835,240.366117 C95.3957281,239.877961 94.6042719,239.877961 94.1161165,240.366117 C93.6279612,240.854272 93.6279612,241.645728 94.1161165,242.133883 L98.6161165,246.633883 C99.1042719,247.122039 99.8957281,247.122039 100.383883,246.633883 L104.883883,242.133883 C105.372039,241.645728 105.372039,240.854272 104.883883,240.366117 C104.395728,239.877961 103.604272,239.877961 103.116117,240.366117 L99.5,243.982233 L95.8838835,240.366117 Z"
+          transform="translate(356.5 164.5)"
+        />
+        <polygon points="446 418 466 418 466 398 446 398" />
+      </g>
+    </svg>
+  );
+});
diff --git a/beta/src/components/Icon/IconNewPage.tsx b/beta/src/components/Icon/IconNewPage.tsx
new file mode 100644
index 000000000..e32901c5a
--- /dev/null
+++ b/beta/src/components/Icon/IconNewPage.tsx
@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {memo} from 'react';
+
+export const IconNewPage = memo<JSX.IntrinsicElements['svg']>(
+  function IconNewPage(props) {
+    return (
+      <svg
+        width="1em"
+        height="1em"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}>
+        <path
+          d="M20.5001 2H15.5001C15.3675 2 15.2403 2.05268 15.1465 2.14645C15.0528 2.24021 15.0001 2.36739 15.0001 2.5V3.5C15.0001 3.63261 15.0528 3.75979 15.1465 3.85355C15.2403 3.94732 15.3675 4 15.5001 4H18.5901L7.6501 14.94C7.60323 14.9865 7.56604 15.0418 7.54065 15.1027C7.51527 15.1636 7.5022 15.229 7.5022 15.295C7.5022 15.361 7.51527 15.4264 7.54065 15.4873C7.56604 15.5482 7.60323 15.6035 7.6501 15.65L8.3501 16.35C8.39658 16.3969 8.45188 16.4341 8.51281 16.4594C8.57374 16.4848 8.63909 16.4979 8.7051 16.4979C8.7711 16.4979 8.83646 16.4848 8.89738 16.4594C8.95831 16.4341 9.01362 16.3969 9.0601 16.35L20.0001 5.41V8.5C20.0001 8.63261 20.0528 8.75979 20.1465 8.85355C20.2403 8.94732 20.3675 9 20.5001 9H21.5001C21.6327 9 21.7599 8.94732 21.8537 8.85355C21.9474 8.75979 22.0001 8.63261 22.0001 8.5V3.5C22.0001 3.10218 21.8421 2.72064 21.5608 2.43934C21.2795 2.15804 20.8979 2 20.5001 2V2Z"
+          fill="currentColor"
+        />
+        <path
+          d="M21.5 13H20.5C20.3674 13 20.2402 13.0527 20.1464 13.1464C20.0527 13.2402 20 13.3674 20 13.5V20H4V4H10.5C10.6326 4 10.7598 3.94732 10.8536 3.85355C10.9473 3.75979 11 3.63261 11 3.5V2.5C11 2.36739 10.9473 2.24021 10.8536 2.14645C10.7598 2.05268 10.6326 2 10.5 2H3.5C3.10218 2 2.72064 2.15804 2.43934 2.43934C2.15804 2.72064 2 3.10218 2 3.5V20.5C2 20.8978 2.15804 21.2794 2.43934 21.5607C2.72064 21.842 3.10218 22 3.5 22H20.5C20.8978 22 21.2794 21.842 21.5607 21.5607C21.842 21.2794 22 20.8978 22 20.5V13.5C22 13.3674 21.9473 13.2402 21.8536 13.1464C21.7598 13.0527 21.6326 13 21.5 13Z"
+          fill="currentColor"
+        />
+      </svg>
+    );
+  }
+);
diff --git a/beta/src/components/Icon/IconNote.tsx b/beta/src/components/Icon/IconNote.tsx
new file mode 100644
index 000000000..a0ac1293e
--- /dev/null
+++ b/beta/src/components/Icon/IconNote.tsx
@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {memo} from 'react';
+
+export const IconNote = memo<JSX.IntrinsicElements['svg']>(function IconNote({
+  className,
+}) {
+  return (
+    <svg
+      className={className}
+      width="1em"
+      height="1.05em"
+      viewBox="0 0 18 19"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M18 12.2632L12 18.2592L1.002 18.2632C0.737486 18.2642 0.483369 18.1603 0.295486 17.9741C0.107603 17.7879 0.00132309 17.5347 0 17.2702V1.25618C0 0.708184 0.445 0.263184 0.993 0.263184H17.007C17.555 0.263184 18 0.719183 18 1.26518V12.2632ZM16 2.26318H2V16.2632H10V11.2632C10 11.0183 10.09 10.7818 10.2527 10.5988C10.4155 10.4158 10.6397 10.2988 10.883 10.2702L11 10.2632L16 10.2622V2.26318ZM15.171 12.2622L12 12.2632V15.4322L15.171 12.2622Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+});
diff --git a/beta/src/components/Icon/IconPitfall.tsx b/beta/src/components/Icon/IconPitfall.tsx
new file mode 100644
index 000000000..7c0b41dfc
--- /dev/null
+++ b/beta/src/components/Icon/IconPitfall.tsx
@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {memo} from 'react';
+
+export const IconPitfall = memo<JSX.IntrinsicElements['svg']>(
+  function IconPitfall({className}) {
+    return (
+      <svg
+        className={className}
+        width="1.11em"
+        height="1.11em"
+        viewBox="0 0 20 20"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M19 0.398926C19.552 0.398926 20 0.846926 20 1.39893V15.3989C20 15.9509 19.552 16.3989 19 16.3989H4.455L0 19.8989V1.39893C0 0.846926 0.448 0.398926 1 0.398926H19ZM18 2.39893H2V15.7839L3.763 14.3989H18V2.39893ZM8.515 4.81093L8.962 5.49893C7.294 6.40193 7.323 7.85093 7.323 8.16293C7.478 8.14293 7.641 8.13893 7.803 8.15393C8.705 8.23793 9.416 8.97893 9.416 9.89893C9.416 10.8649 8.632 11.6489 7.666 11.6489C7.129 11.6489 6.616 11.4039 6.292 11.0589C5.777 10.5129 5.5 9.89893 5.5 8.90393C5.5 7.15393 6.728 5.58593 8.515 4.81093ZM13.515 4.81093L13.962 5.49893C12.294 6.40193 12.323 7.85093 12.323 8.16293C12.478 8.14293 12.641 8.13893 12.803 8.15393C13.705 8.23793 14.416 8.97893 14.416 9.89893C14.416 10.8649 13.632 11.6489 12.666 11.6489C12.129 11.6489 11.616 11.4039 11.292 11.0589C10.777 10.5129 10.5 9.89893 10.5 8.90393C10.5 7.15393 11.728 5.58593 13.515 4.81093Z"
+          fill="currentColor"
+        />
+      </svg>
+    );
+  }
+);
diff --git a/beta/src/components/Icon/IconRestart.tsx b/beta/src/components/Icon/IconRestart.tsx
new file mode 100644
index 000000000..b4a6b62f5
--- /dev/null
+++ b/beta/src/components/Icon/IconRestart.tsx
@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {memo} from 'react';
+
+export const IconRestart = memo<JSX.IntrinsicElements['svg']>(
+  function IconRestart({className}) {
+    return (
+      <svg
+        width="1em"
+        height="1em"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        className={className}>
+        <path
+          d="M13.8982 5.20844C12.4626 4.88688 10.9686 4.93769 9.55821 5.35604L11.8524 3.06184C11.8989 3.0154 11.9357 2.96028 11.9608 2.89961C11.986 2.83894 11.9989 2.77391 11.9989 2.70824C11.9989 2.64256 11.986 2.57754 11.9608 2.51686C11.9357 2.45619 11.8989 2.40107 11.8524 2.35464L11.1456 1.64784C11.0992 1.60139 11.0441 1.56455 10.9834 1.53942C10.9227 1.51428 10.8577 1.50134 10.792 1.50134C10.7263 1.50134 10.6613 1.51428 10.6006 1.53942C10.54 1.56455 10.4848 1.60139 10.4384 1.64784L6.14571 5.94054C6.00654 6.07969 5.89615 6.2449 5.82083 6.42673C5.74551 6.60855 5.70675 6.80343 5.70675 7.00024C5.70675 7.19704 5.74551 7.39192 5.82083 7.57374C5.89615 7.75557 6.00654 7.92078 6.14571 8.05994L10.4387 12.3529C10.5325 12.4465 10.6595 12.4991 10.792 12.4991C10.9245 12.4991 11.0516 12.4465 11.1453 12.3529L11.8527 11.6455C11.9463 11.5518 11.9989 11.4247 11.9989 11.2922C11.9989 11.1598 11.9463 11.0327 11.8527 10.9389L8.77481 7.86104C9.99795 7.16236 11.415 6.8801 12.8125 7.05678C14.21 7.23347 15.5122 7.85953 16.523 8.84064C17.5338 9.82176 18.1983 11.1048 18.4165 12.4964C18.6347 13.888 18.3947 15.3129 17.7328 16.5562C17.0708 17.7996 16.0227 18.7942 14.7463 19.3902C13.47 19.9861 12.0345 20.1511 10.6563 19.8603C9.27798 19.5695 8.03152 18.8387 7.10469 17.778C6.17786 16.7172 5.62086 15.384 5.51761 13.9791C5.51156 13.8512 5.45689 13.7303 5.36477 13.6413C5.27265 13.5522 5.15001 13.5017 5.02191 13.5H4.02081C3.95297 13.4996 3.88574 13.5129 3.8232 13.5392C3.76065 13.5655 3.70408 13.6042 3.6569 13.6529C3.60972 13.7017 3.57291 13.7595 3.54869 13.8228C3.52448 13.8862 3.51336 13.9538 3.51601 14.0216C3.61349 15.5965 4.1473 17.1132 5.0577 18.4019C5.9681 19.6906 7.21917 20.7006 8.6709 21.3188C10.1226 21.937 11.7178 22.139 13.2778 21.9022C14.8378 21.6654 16.3011 20.9992 17.504 19.978C18.7069 18.9569 19.6019 17.6212 20.0889 16.1203C20.5759 14.6195 20.6356 13.0128 20.2614 11.4799C19.8872 9.94705 19.0938 8.54858 17.97 7.44098C16.8462 6.33339 15.4363 5.56037 13.8982 5.20844V5.20844Z"
+          fill="currentColor"
+        />
+      </svg>
+    );
+  }
+);
diff --git a/beta/src/components/Icon/IconRss.tsx b/beta/src/components/Icon/IconRss.tsx
new file mode 100644
index 000000000..f2a52ee25
--- /dev/null
+++ b/beta/src/components/Icon/IconRss.tsx
@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {memo} from 'react';
+
+export const IconRss = memo<JSX.IntrinsicElements['svg']>(function IconRss(
+  props
+) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}>
+      <path d="M4 11a9 9 0 0 1 9 9" />
+      <path d="M4 4a16 16 0 0 1 16 16" />
+      <circle cx={5} cy={19} r={1} />
+    </svg>
+  );
+});
diff --git a/beta/src/components/Icon/IconSearch.tsx b/beta/src/components/Icon/IconSearch.tsx
new file mode 100644
index 000000000..a2816991e
--- /dev/null
+++ b/beta/src/components/Icon/IconSearch.tsx
@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {memo} from 'react';
+
+export const IconSearch = memo<JSX.IntrinsicElements['svg']>(
+  function IconSearch(props) {
+    return (
+      <svg width="1em" height="1em" viewBox="0 0 20 20" {...props}>
+        <path
+          d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
+          stroke="currentColor"
+          fill="none"
+          strokeWidth="2"
+          fillRule="evenodd"
+          strokeLinecap="round"
+          strokeLinejoin="round"></path>
+      </svg>
+    );
+  }
+);
diff --git a/beta/src/components/Icon/IconSolution.tsx b/beta/src/components/Icon/IconSolution.tsx
new file mode 100644
index 000000000..668e41afe
--- /dev/null
+++ b/beta/src/components/Icon/IconSolution.tsx
@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {memo} from 'react';
+import cn from 'classnames';
+
+export const IconSolution = memo<JSX.IntrinsicElements['svg']>(
+  function IconSolution({className}) {
+    return (
+      <svg
+        className={cn('inline', className)}
+        width="0.75em"
+        height="0.75em"
+        viewBox="0 0 13 13"
+        xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M2.21908 8.74479V12.7448H0.885742V0.078125H7.14041C7.26418 0.0781911 7.3855 0.112714 7.49076 0.177827C7.59602 0.242939 7.68108 0.336071 7.73641 0.446792L8.21908 1.41146H12.2191C12.3959 1.41146 12.5655 1.4817 12.6905 1.60672C12.8155 1.73174 12.8857 1.90131 12.8857 2.07812V9.41146C12.8857 9.58827 12.8155 9.75784 12.6905 9.88286C12.5655 10.0079 12.3959 10.0781 12.2191 10.0781H7.96441C7.84063 10.0781 7.71932 10.0435 7.61406 9.97842C7.50879 9.91331 7.42374 9.82018 7.36841 9.70946L6.88574 8.74479H2.21908ZM2.21908 1.41146V7.41146H7.70974L8.37641 8.74479H11.5524V2.74479H7.39508L6.72841 1.41146H2.21908Z"
+          fill="currentColor"
+        />
+      </svg>
+    );
+  }
+);
diff --git a/beta/src/components/Icon/IconTerminal.tsx b/beta/src/components/Icon/IconTerminal.tsx
new file mode 100644
index 000000000..7b3a97a8c
--- /dev/null
+++ b/beta/src/components/Icon/IconTerminal.tsx
@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {memo} from 'react';
+
+export const IconTerminal = memo<JSX.IntrinsicElements['svg']>(
+  function IconTerminal({className}) {
+    return (
+      <svg
+        className={className}
+        width="1em"
+        height="1em"
+        viewBox="0 0 18 18"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M2.40299 2.61279H14.403C14.5798 2.61279 14.7494 2.68303 14.8744 2.80806C14.9994 2.93308 15.0697 3.10265 15.0697 3.27946V13.9461C15.0697 14.1229 14.9994 14.2925 14.8744 14.4175C14.7494 14.5426 14.5798 14.6128 14.403 14.6128H2.40299C2.22618 14.6128 2.05661 14.5426 1.93159 14.4175C1.80657 14.2925 1.73633 14.1229 1.73633 13.9461V3.27946C1.73633 3.10265 1.80657 2.93308 1.93159 2.80806C2.05661 2.68303 2.22618 2.61279 2.40299 2.61279ZM8.403 10.6128V11.9461H12.403V10.6128H8.403ZM6.01233 8.61279L4.12699 10.4981L5.06966 11.4415L7.89833 8.61279L5.06966 5.78413L4.12699 6.72746L6.01233 8.61279Z"
+          fill="currentColor"
+        />
+      </svg>
+    );
+  }
+);
diff --git a/beta/src/components/Icon/IconTwitter.tsx b/beta/src/components/Icon/IconTwitter.tsx
new file mode 100644
index 000000000..951171524
--- /dev/null
+++ b/beta/src/components/Icon/IconTwitter.tsx
@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {memo} from 'react';
+
+export const IconTwitter = memo<JSX.IntrinsicElements['svg']>(
+  function IconTwitter(props) {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        width="1.33em"
+        height="1.33em"
+        fill="currentColor"
+        {...props}>
+        <path fill="none" d="M0 0h24v24H0z" />
+        <path d="M22.162 5.656a8.384 8.384 0 0 1-2.402.658A4.196 4.196 0 0 0 21.6 4c-.82.488-1.719.83-2.656 1.015a4.182 4.182 0 0 0-7.126 3.814 11.874 11.874 0 0 1-8.62-4.37 4.168 4.168 0 0 0-.566 2.103c0 1.45.738 2.731 1.86 3.481a4.168 4.168 0 0 1-1.894-.523v.052a4.185 4.185 0 0 0 3.355 4.101 4.21 4.21 0 0 1-1.89.072A4.185 4.185 0 0 0 7.97 16.65a8.394 8.394 0 0 1-6.191 1.732 11.83 11.83 0 0 0 6.41 1.88c7.693 0 11.9-6.373 11.9-11.9 0-.18-.005-.362-.013-.54a8.496 8.496 0 0 0 2.087-2.165z" />
+      </svg>
+    );
+  }
+);
diff --git a/beta/src/components/Icon/IconWarning.tsx b/beta/src/components/Icon/IconWarning.tsx
new file mode 100644
index 000000000..d89b5678e
--- /dev/null
+++ b/beta/src/components/Icon/IconWarning.tsx
@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {memo} from 'react';
+
+export const IconWarning = memo<JSX.IntrinsicElements['svg']>(
+  function IconWarning({className}) {
+    return (
+      <svg
+        className={className}
+        width="1.33em"
+        height="1.33em"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg">
+        <g>
+          <path fill="none" d="M0 0h24v24H0z" />
+          <path
+            d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z"
+            fill="currentColor"
+          />
+        </g>
+      </svg>
+    );
+  }
+);
diff --git a/beta/src/components/Layout/Feedback.tsx b/beta/src/components/Layout/Feedback.tsx
new file mode 100644
index 000000000..0832be686
--- /dev/null
+++ b/beta/src/components/Layout/Feedback.tsx
@@ -0,0 +1,93 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {useState} from 'react';
+import {useRouter} from 'next/router';
+import {ga} from '../../utils/analytics';
+
+export function Feedback({onSubmit = () => {}}: {onSubmit?: () => void}) {
+  const {asPath} = useRouter();
+  // Reset on route changes.
+  return <SendFeedback key={asPath} onSubmit={onSubmit} />;
+}
+
+const thumbsUpIcon = (
+  <svg
+    width="16"
+    height="18"
+    viewBox="0 0 16 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M9.36603 0.384603C9.36605 0.384617 9.36601 0.384588 9.36603 0.384603L9.45902 0.453415C9.99732 0.851783 10.3873 1.42386 10.5654 2.07648C10.7435 2.72909 10.6993 3.42385 10.44 4.04763L9.27065 6.86008H12.6316C13.5249 6.86008 14.3817 7.22121 15.0134 7.86402C15.6451 8.50683 16 9.37868 16 10.2877V13.7154C16 14.8518 15.5564 15.9416 14.7668 16.7451C13.9771 17.5486 12.9062 18 11.7895 18H5.05263C3.71259 18 2.42743 17.4583 1.47988 16.4941C0.532325 15.5299 0 14.2221 0 12.8585V11.2511C2.40928e-06 9.87711 0.463526 8.54479 1.31308 7.47688L6.66804 0.745592C6.98662 0.345136 7.44414 0.08434 7.94623 0.0171605C8.4483 -0.0500155 8.95656 0.0815891 9.36603 0.384603ZM8.37542 1.77064C8.31492 1.72587 8.23987 1.70646 8.16579 1.71637C8.09171 1.72628 8.02415 1.76477 7.97708 1.82393L2.62213 8.55522C2.0153 9.31801 1.68421 10.2697 1.68421 11.2511V12.8585C1.68421 13.7676 2.03909 14.6394 2.67079 15.2822C3.30249 15.925 4.15927 16.2862 5.05263 16.2862H11.7895C12.4595 16.2862 13.1021 16.0153 13.5759 15.5332C14.0496 15.0511 14.3158 14.3972 14.3158 13.7154V10.2877C14.3158 9.83321 14.1383 9.39729 13.8225 9.07588C13.5066 8.75448 13.0783 8.57392 12.6316 8.57392H8C7.71763 8.57392 7.45405 8.4299 7.29806 8.19039C7.14206 7.95087 7.11442 7.64774 7.22445 7.38311L8.88886 3.37986C9 3.11253 9.01896 2.81477 8.94262 2.53507C8.8663 2.25541 8.69921 2.01027 8.46853 1.83954L8.37542 1.77064Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+const thumbsDownIcon = (
+  <svg
+    width="16"
+    height="18"
+    viewBox="0 0 16 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M6.63397 17.6154C6.63395 17.6154 6.63399 17.6154 6.63397 17.6154L6.54098 17.5466C6.00268 17.1482 5.61269 16.5761 5.43458 15.9235C5.25648 15.2709 5.30069 14.5761 5.56004 13.9524L6.72935 11.1399L3.36842 11.1399C2.47506 11.1399 1.61829 10.7788 0.986585 10.136C0.354883 9.49316 8.1991e-07 8.62132 8.99384e-07 7.71225L1.19904e-06 4.28458C1.29838e-06 3.14824 0.443605 2.05844 1.23323 1.25492C2.02286 0.451403 3.09383 -1.12829e-06 4.21053 -1.03067e-06L10.9474 -4.41715e-07C12.2874 -3.24565e-07 13.5726 0.541687 14.5201 1.50591C15.4677 2.47013 16 3.77789 16 5.1415L16 6.74893C16 8.12289 15.5365 9.45521 14.6869 10.5231L9.33196 17.2544C9.01338 17.6549 8.55586 17.9157 8.05377 17.9828C7.5517 18.05 7.04344 17.9184 6.63397 17.6154ZM7.62458 16.2294C7.68508 16.2741 7.76013 16.2935 7.83421 16.2836C7.90829 16.2737 7.97585 16.2352 8.02292 16.1761L13.3779 9.44478C13.9847 8.68199 14.3158 7.73033 14.3158 6.74892L14.3158 5.1415C14.3158 4.23242 13.9609 3.36058 13.3292 2.71777C12.6975 2.07496 11.8407 1.71383 10.9474 1.71383L4.21053 1.71383C3.5405 1.71383 2.89793 1.98468 2.42415 2.46679C1.95038 2.94889 1.68421 3.60277 1.68421 4.28458L1.68421 7.71225C1.68421 8.16679 1.86166 8.60271 2.1775 8.92411C2.49335 9.24552 2.92174 9.42608 3.36842 9.42608L8 9.42608C8.28237 9.42608 8.54595 9.5701 8.70195 9.80961C8.85794 10.0491 8.88558 10.3523 8.77555 10.6169L7.11114 14.6201C7 14.8875 6.98105 15.1852 7.05738 15.4649C7.1337 15.7446 7.30079 15.9897 7.53147 16.1605L7.62458 16.2294Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+function sendGAEvent(isPositive: boolean) {
+  // Fragile. Don't change unless you've tested the network payload
+  // and verified that the right events actually show up in GA.
+  ga(
+    'send',
+    'event',
+    'button',
+    'feedback',
+    window.location.pathname,
+    isPositive ? '1' : '0'
+  );
+}
+
+function SendFeedback({onSubmit}: {onSubmit: () => void}) {
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  return (
+    <div className="max-w-xs w-80 lg:w-auto py-3 shadow-lg rounded-lg m-4 bg-wash dark:bg-gray-95 px-4 flex">
+      <p className="w-full font-bold text-primary dark:text-primary-dark text-lg mr-4">
+        {isSubmitted ? 'Thank you for your feedback!' : 'Is this page useful?'}
+      </p>
+      {!isSubmitted && (
+        <button
+          aria-label="Yes"
+          className="bg-secondary-button dark:bg-secondary-button-dark rounded-lg text-primary dark:text-primary-dark px-3 mr-2"
+          onClick={() => {
+            setIsSubmitted(true);
+            onSubmit();
+            sendGAEvent(true);
+          }}>
+          {thumbsUpIcon}
+        </button>
+      )}
+      {!isSubmitted && (
+        <button
+          aria-label="No"
+          className="bg-secondary-button dark:bg-secondary-button-dark rounded-lg text-primary dark:text-primary-dark px-3"
+          onClick={() => {
+            setIsSubmitted(true);
+            onSubmit();
+            sendGAEvent(false);
+          }}>
+          {thumbsDownIcon}
+        </button>
+      )}
+    </div>
+  );
+}
diff --git a/beta/src/components/Layout/Footer.tsx b/beta/src/components/Layout/Footer.tsx
new file mode 100644
index 000000000..dc2ac0071
--- /dev/null
+++ b/beta/src/components/Layout/Footer.tsx
@@ -0,0 +1,218 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import * as React from 'react';
+import NextLink from 'next/link';
+import cn from 'classnames';
+import ButtonLink from 'components/ButtonLink';
+import {ExternalLink} from 'components/ExternalLink';
+import {IconFacebookCircle} from 'components/Icon/IconFacebookCircle';
+import {IconTwitter} from 'components/Icon/IconTwitter';
+import {IconGitHub} from 'components/Icon/IconGitHub';
+import {IconNavArrow} from 'components/Icon/IconNavArrow';
+
+export function Footer() {
+  const socialLinkClasses = 'hover:text-primary dark:text-primary-dark';
+  return (
+    <>
+      <div className="self-stretch w-full">
+        <div className="mx-auto w-full px-5 sm:px-12 md:px-12 pt-10 md:pt-12 lg:pt-10">
+          <hr className="max-w-7xl mx-auto border-border dark:border-border-dark" />
+          <div className="flex flex-col items-center m-4 p-4">
+            <p className="font-bold text-primary dark:text-primary-dark text-lg mb-4">
+              How do you like these docs?
+            </p>
+            <div>
+              <ButtonLink
+                href="https://www.surveymonkey.co.uk/r/PYRPF3X"
+                className="mt-1"
+                type="primary"
+                size="md"
+                target="_blank">
+                Take our survey!
+                <IconNavArrow
+                  displayDirection="right"
+                  className="inline ml-1"
+                />
+              </ButtonLink>
+            </div>
+          </div>
+          <hr className="max-w-7xl mx-auto border-border dark:border-border-dark" />
+        </div>
+        <footer className="text-secondary dark:text-secondary-dark py-12 px-5 sm:px-12 md:px-12 sm:py-12 md:py-16 lg:py-14">
+          <div className="grid grid-cols-2 sm:grid-cols-3 xl:grid-cols-5 gap-x-12 gap-y-8 max-w-7xl mx-auto ">
+            <ExternalLink
+              href="https://opensource.fb.com/"
+              className="col-span-2 sm:col-span-1 justify-items-start w-44 text-left">
+              <div>
+                <svg
+                  className="mt-4 mb-4"
+                  width="115"
+                  height="13"
+                  viewBox="0 0 115 13"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg">
+                  <path
+                    d="M9.12655 0.414727V2.061C9.1323 2.15436 9.06215 2.23355 8.97245 2.23945C8.96555 2.23945 8.95865 2.23945 8.95175 2.23945H2.07259V5.60409H7.75002C7.84087 5.59818 7.91792 5.67027 7.92367 5.76364C7.92367 5.76955 7.92367 5.77664 7.92367 5.78255V7.43C7.92942 7.52336 7.85927 7.60254 7.76842 7.60845C7.76267 7.60845 7.75577 7.60845 7.75002 7.60845H2.07259V12.5827C2.07949 12.6761 2.01049 12.7565 1.92079 12.7635C1.91389 12.7635 1.90699 12.7635 1.90009 12.7635H0.175126C0.084278 12.7695 0.00607958 12.6974 0.000329697 12.6028C0.000329697 12.5969 0.000329697 12.5898 0.000329697 12.5839V0.411182C-0.00542019 0.317818 0.0647284 0.237454 0.156727 0.231545C0.162476 0.231545 0.169376 0.231545 0.175126 0.231545H8.9506C9.04145 0.225636 9.1208 0.296545 9.12655 0.389909C9.1277 0.398182 9.1277 0.406454 9.12655 0.414727Z"
+                    fill="currentColor"
+                  />
+                  <path
+                    d="M23.1608 12.7637H21.2633C21.1656 12.7708 21.0793 12.701 21.0621 12.6018C20.8102 11.5736 20.5055 10.491 20.157 9.39902H14.3324C13.9874 10.491 13.6792 11.5736 13.4354 12.6018C13.4193 12.701 13.3331 12.7708 13.2353 12.7637H11.4068C11.285 12.7637 11.216 12.6916 11.2505 12.5663C12.3475 8.57648 14.0184 4.17539 15.7078 0.469206C15.7549 0.317933 15.8987 0.219842 16.0528 0.232842H18.5172C18.6713 0.219842 18.815 0.317933 18.8621 0.469206C20.6561 4.37393 22.1465 8.4193 23.3195 12.5663C23.3528 12.6904 23.2827 12.7637 23.1608 12.7637ZM19.513 7.46675C18.8771 5.65857 18.1722 3.85157 17.4431 2.2053H17.0348C16.3115 3.85157 15.5974 5.65857 14.9649 7.46675H19.513Z"
+                    fill="currentColor"
+                  />
+                  <path
+                    d="M26.2773 6.60636C26.2773 2.71818 28.767 0 32.317 0H32.5781C34.8079 0 36.5317 1.16291 37.4459 2.84464C37.5011 2.91082 37.4942 3.01127 37.4287 3.068C37.416 3.07982 37.4011 3.08927 37.385 3.09518L35.8521 3.874C35.7543 3.94018 35.6221 3.91182 35.5577 3.81136C35.5542 3.80545 35.5508 3.79955 35.5473 3.79364C34.9033 2.64845 33.9373 2.03982 32.5091 2.03982H32.248C30.0102 2.03982 28.4692 3.86455 28.4692 6.513C28.4692 9.16145 29.9837 10.9507 32.248 10.9507H32.5091C33.9718 10.9507 34.8251 10.4414 35.4783 9.66255C35.545 9.57036 35.6681 9.54318 35.7658 9.59991L37.3413 10.387C37.3907 10.4095 37.4241 10.4567 37.4287 10.5123C37.4252 10.5619 37.4068 10.6092 37.3758 10.647C36.4098 12.0971 34.6687 12.9917 32.5459 12.9917H32.2848C28.6716 13 26.2773 10.4449 26.2773 6.60636Z"
+                    fill="currentColor"
+                  />
+                  <path
+                    d="M51.3171 10.9367V12.5829C51.3228 12.6763 51.2527 12.7567 51.1607 12.7626C51.1549 12.7626 51.1492 12.7626 51.1434 12.7626H42.0011C41.9103 12.7685 41.8332 12.6964 41.8275 12.6042C41.8275 12.5971 41.8275 12.59 41.8275 12.5829V0.4102C41.8217 0.316836 41.8907 0.236473 41.9804 0.230563C41.9873 0.230563 41.9942 0.230563 42.0011 0.230563H50.9859C51.0767 0.224654 51.1549 0.296745 51.1607 0.391291C51.1607 0.3972 51.1607 0.404291 51.1607 0.4102V2.05647C51.1664 2.14984 51.0963 2.22902 51.0066 2.23493C50.9997 2.23493 50.9928 2.23493 50.9859 2.23493H43.8986V5.49202H49.6623C49.7531 5.48611 49.8313 5.5582 49.8371 5.65275C49.8371 5.65866 49.8371 5.66575 49.8371 5.67166V7.3002C49.8417 7.39356 49.7715 7.47393 49.6795 7.47865C49.6738 7.47865 49.668 7.47865 49.6623 7.47865H43.8986V10.7547H51.1434C51.2343 10.7487 51.3125 10.8197 51.3171 10.913C51.3182 10.9213 51.3182 10.9284 51.3171 10.9367Z"
+                    fill="currentColor"
+                  />
+                  <path
+                    d="M67.058 9.32692C67.058 11.518 65.4216 12.7625 62.5305 12.7625H56.5403C56.4495 12.7684 56.3724 12.6963 56.3667 12.6041C56.3667 12.597 56.3667 12.5899 56.3667 12.5828V0.410105C56.3609 0.316741 56.4299 0.236378 56.5196 0.230469C56.5265 0.230469 56.5334 0.230469 56.5403 0.230469H61.9993C64.8121 0.230469 66.3439 1.37565 66.3439 3.46983C66.3439 4.84783 65.6654 5.75192 64.2889 6.17147C66.222 6.59692 67.058 7.78701 67.058 9.32692ZM61.9556 2.18638H58.4389V5.55456H61.9556C63.5322 5.55456 64.2555 5.02629 64.2555 3.87165C64.2555 2.71701 63.5322 2.18638 61.9556 2.18638ZM64.934 9.13902C64.934 7.97492 64.1854 7.44783 62.5398 7.44783H58.4389V10.8113H62.5398C64.2107 10.8113 64.934 10.3102 64.934 9.13902Z"
+                    fill="currentColor"
+                  />
+                  <path
+                    d="M70.7057 6.5C70.7057 2.72409 73.1436 0 76.9742 0H77.2353C81.0658 0 83.5038 2.71818 83.5038 6.5C83.5038 10.2818 81.0658 13 77.2353 13H76.9742C73.1413 13 70.7057 10.2747 70.7057 6.5ZM77.2353 10.9555C79.7342 10.9555 81.3096 9.19336 81.3096 6.5C81.3096 3.80664 79.7342 2.04455 77.2353 2.04455H76.9742C74.4753 2.04455 72.8998 3.80664 72.8998 6.5C72.8998 9.19336 74.4753 10.9555 76.9742 10.9555H77.2353Z"
+                    fill="currentColor"
+                  />
+                  <path
+                    d="M87.0387 6.5C87.0387 2.72409 89.4766 0 93.3072 0H93.5683C97.3988 0 99.8368 2.71818 99.8368 6.5C99.8368 10.2818 97.3988 13 93.5683 13H93.3072C89.4766 13 87.0387 10.2747 87.0387 6.5ZM93.5683 10.9555C96.0672 10.9555 97.6426 9.19336 97.6426 6.5C97.6426 3.80664 96.0672 2.04455 93.5683 2.04455H93.3072C90.8083 2.04455 89.2329 3.80664 89.2329 6.5C89.2329 9.19336 90.8083 10.9555 93.3072 10.9555H93.5683Z"
+                    fill="currentColor"
+                  />
+                  <path
+                    d="M114.855 12.7637H112.608C112.488 12.7744 112.37 12.7153 112.304 12.6113C110.758 10.7511 109.079 9.01266 107.28 7.41129H106.271V12.5829C106.277 12.6763 106.206 12.7567 106.114 12.7626C106.109 12.7626 106.102 12.7626 106.096 12.7626H104.371C104.28 12.7685 104.203 12.6964 104.197 12.6042C104.197 12.5971 104.197 12.59 104.197 12.5829V0.4102C104.192 0.316836 104.261 0.236473 104.35 0.230563C104.357 0.230563 104.364 0.230563 104.371 0.230563H106.096C106.187 0.224654 106.265 0.296745 106.271 0.391291C106.271 0.3972 106.271 0.404291 106.271 0.4102V5.35375H107.295C108.951 3.83393 110.472 2.16638 111.84 0.370018C111.895 0.279018 111.996 0.227018 112.101 0.235291H114.226C114.33 0.235291 114.383 0.289654 114.383 0.360563C114.378 0.411382 114.356 0.458654 114.322 0.495291C112.682 2.59893 110.861 4.54538 108.88 6.31102C111.065 8.21375 113.095 10.2961 114.948 12.538C115.046 12.655 115 12.7637 114.855 12.7637Z"
+                    fill="currentColor"
+                  />
+                </svg>
+                Open Source
+              </div>
+              <div className="text-xs text-left mt-2 pr-0.5">
+                &copy;{new Date().getFullYear()}
+              </div>
+            </ExternalLink>
+            <div className="flex flex-col">
+              <FooterLink href="/learn" isHeader={true}>
+                Learn React
+              </FooterLink>
+              <FooterLink href="/learn/">Quick Start</FooterLink>
+              <FooterLink href="/learn/installation">Installation</FooterLink>
+              <FooterLink href="/learn/describing-the-ui">
+                Describing the UI
+              </FooterLink>
+              <FooterLink href="/learn/adding-interactivity">
+                Adding Interactivity
+              </FooterLink>
+              <FooterLink href="/learn/managing-state">
+                Managing State
+              </FooterLink>
+              <FooterLink href="/learn/escape-hatches">
+                Escape Hatches
+              </FooterLink>
+            </div>
+            <div className="flex flex-col">
+              <FooterLink href="/reference/react" isHeader={true}>
+                API Reference
+              </FooterLink>
+              <FooterLink href="/reference/react">React APIs</FooterLink>
+              <FooterLink href="/reference/react-dom">
+                React DOM APIs
+              </FooterLink>
+            </div>
+            <div className="flex flex-col sm:col-start-2 xl:col-start-4">
+              <FooterLink href="/" isHeader={true}>
+                Community
+              </FooterLink>
+              <FooterLink href="https://github.com/facebook/react/blob/main/CODE_OF_CONDUCT.md">
+                Code of Conduct
+              </FooterLink>
+              <FooterLink href="/learn/acknowledgements">
+                Acknowledgements
+              </FooterLink>
+              <FooterLink href="/learn/docs-contributors">
+                Docs Contributors
+              </FooterLink>
+              <FooterLink href="/learn/meet-the-team">Meet the Team</FooterLink>
+              <FooterLink href="https://reactjs.org/blog">Blog</FooterLink>
+              {/* <FooterLink href="/">Community Resources</FooterLink> */}
+            </div>
+            <div className="flex flex-col">
+              <FooterLink isHeader={true}>More</FooterLink>
+              {/* <FooterLink href="/">Tutorial</FooterLink> */}
+              {/* <FooterLink href="/">Blog</FooterLink> */}
+              {/* <FooterLink href="/">Acknowledgements</FooterLink> */}
+              <FooterLink href="https://reactnative.dev/">
+                React Native
+              </FooterLink>
+              <FooterLink href="https://opensource.facebook.com/legal/privacy">
+                Privacy
+              </FooterLink>
+              <FooterLink href="https://opensource.fb.com/legal/terms/">
+                Terms
+              </FooterLink>
+              <div className="flex flex-row mt-8 gap-x-2">
+                <ExternalLink
+                  aria-label="React on Facebook"
+                  href="https://www.facebook.com/react"
+                  className={socialLinkClasses}>
+                  <IconFacebookCircle />
+                </ExternalLink>
+                <ExternalLink
+                  aria-label="React on Twitter"
+                  href="https://twitter.com/reactjs"
+                  className={socialLinkClasses}>
+                  <IconTwitter />
+                </ExternalLink>
+                <ExternalLink
+                  aria-label="React on Github"
+                  href="https://github.com/facebook/react"
+                  className={socialLinkClasses}>
+                  <IconGitHub />
+                </ExternalLink>
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </>
+  );
+}
+
+function FooterLink({
+  href,
+  children,
+  isHeader = false,
+}: {
+  href?: string;
+  children: React.ReactNode;
+  isHeader?: boolean;
+}) {
+  const classes = cn('border-b inline-block border-transparent', {
+    'text-sm text-primary dark:text-primary-dark': !isHeader,
+    'text-md text-secondary dark:text-secondary-dark my-2 font-bold': isHeader,
+    'hover:border-gray-10': href,
+  });
+
+  if (!href) {
+    return <div className={classes}>{children}</div>;
+  }
+
+  if (href.startsWith('https://')) {
+    return (
+      <div>
+        <ExternalLink href={href} className={classes}>
+          {children}
+        </ExternalLink>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <NextLink href={href}>
+        <a className={classes}>{children}</a>
+      </NextLink>
+    </div>
+  );
+}
diff --git a/beta/src/components/Layout/MarkdownPage.tsx b/beta/src/components/Layout/MarkdownPage.tsx
new file mode 100644
index 000000000..c44298c05
--- /dev/null
+++ b/beta/src/components/Layout/MarkdownPage.tsx
@@ -0,0 +1,58 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import * as React from 'react';
+import {useRouter} from 'next/router';
+import {DocsPageFooter} from 'components/DocsFooter';
+import {Seo} from 'components/Seo';
+import PageHeading from 'components/PageHeading';
+import {useRouteMeta} from './useRouteMeta';
+import {useActiveSection} from '../../hooks/useActiveSection';
+import {TocContext} from '../MDX/TocContext';
+
+import(/* webpackPrefetch: true */ '../MDX/CodeBlock/CodeBlock');
+
+export interface MarkdownProps<Frontmatter> {
+  meta: Frontmatter & {description?: string};
+  children?: React.ReactNode;
+  toc: Array<{
+    url: string;
+    text: React.ReactNode;
+    depth: number;
+  }>;
+}
+
+export function MarkdownPage<
+  T extends {title: string; status?: string} = {title: string; status?: string}
+>({children, meta, toc}: MarkdownProps<T>) {
+  const {route, nextRoute, prevRoute} = useRouteMeta();
+  const section = useActiveSection();
+  const title = meta.title || route?.title || '';
+  const description = meta.description || route?.description || '';
+  const isHomePage = section === 'home';
+  return (
+    <>
+      <div className="pl-0">
+        <Seo title={title} />
+        {!isHomePage && (
+          <PageHeading
+            title={title}
+            description={description}
+            tags={route?.tags}
+          />
+        )}
+        <div className="px-5 sm:px-12">
+          <div className="max-w-7xl mx-auto">
+            <TocContext.Provider value={toc}>{children}</TocContext.Provider>
+          </div>
+          <DocsPageFooter
+            route={route}
+            nextRoute={nextRoute}
+            prevRoute={prevRoute}
+          />
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/beta/src/components/Layout/Nav/Nav.tsx b/beta/src/components/Layout/Nav/Nav.tsx
new file mode 100644
index 000000000..6422ecdb0
--- /dev/null
+++ b/beta/src/components/Layout/Nav/Nav.tsx
@@ -0,0 +1,383 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {useState, useRef, useContext, useEffect, Suspense} from 'react';
+import * as React from 'react';
+import cn from 'classnames';
+import NextLink from 'next/link';
+import {useRouter} from 'next/router';
+import {disableBodyScroll, enableBodyScroll} from 'body-scroll-lock';
+
+import {IconClose} from 'components/Icon/IconClose';
+import {IconHamburger} from 'components/Icon/IconHamburger';
+import {Search} from 'components/Search';
+import {useActiveSection} from 'hooks/useActiveSection';
+import {Logo} from '../../Logo';
+import {Feedback} from '../Feedback';
+import NavLink from './NavLink';
+import {SidebarContext} from 'components/Layout/useRouteMeta';
+import {SidebarRouteTree} from '../Sidebar/SidebarRouteTree';
+import type {RouteItem} from '../useRouteMeta';
+import sidebarLearn from '../../../sidebarLearn.json';
+import sidebarReference from '../../../sidebarReference.json';
+
+declare global {
+  interface Window {
+    __theme: string;
+    __setPreferredTheme: (theme: string) => void;
+  }
+}
+
+const feedbackIcon = (
+  <svg
+    width="28"
+    height="28"
+    viewBox="0 0 28 28"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M8.41477 2.29921C8.41479 2.29923 8.41476 2.2992 8.41477 2.29921L8.48839 2.35275C8.91454 2.66267 9.22329 3.10774 9.36429 3.61547C9.50529 4.12319 9.47029 4.6637 9.26497 5.14899L8.33926 7.33703H11C11.7072 7.33703 12.3855 7.61798 12.8856 8.11807C13.3857 8.61817 13.6667 9.29645 13.6667 10.0037V12.6704C13.6667 13.5544 13.3155 14.4023 12.6904 15.0274C12.0652 15.6525 11.2174 16.0037 10.3333 16.0037H5C3.93914 16.0037 2.92172 15.5823 2.17157 14.8321C1.42142 14.082 1 13.0646 1 12.0037V10.7531C1 9.68422 1.36696 8.6477 2.03953 7.81688L6.27886 2.58006C6.53107 2.26851 6.89328 2.06562 7.29077 2.01335C7.68823 1.96109 8.09061 2.06347 8.41477 2.29921ZM7.63054 3.37753C7.58264 3.34269 7.52323 3.32759 7.46459 3.33531C7.40594 3.34302 7.35245 3.37296 7.31519 3.41899L3.07585 8.65581C2.59545 9.24925 2.33333 9.98963 2.33333 10.7531V12.0037C2.33333 12.7109 2.61428 13.3892 3.11438 13.8893C3.61448 14.3894 4.29275 14.6704 5 14.6704H10.3333C10.8638 14.6704 11.3725 14.4596 11.7475 14.0846C12.1226 13.7095 12.3333 13.2008 12.3333 12.6704V10.0037C12.3333 9.65007 12.1929 9.31093 11.9428 9.06088C11.6928 8.81084 11.3536 8.67036 11 8.67036H7.33333C7.10979 8.67036 6.90112 8.55832 6.77763 8.37198C6.65413 8.18564 6.63225 7.94981 6.71936 7.74393L8.03701 4.62947C8.125 4.42149 8.14001 4.18984 8.07958 3.97224C8.01916 3.75467 7.88687 3.56396 7.70425 3.43113L7.63054 3.37753Z"
+      fill="currentColor"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M19.2517 25.7047C19.2517 25.7047 19.2517 25.7047 19.2517 25.7047L19.1781 25.6512C18.752 25.3412 18.4432 24.8962 18.3022 24.3884C18.1612 23.8807 18.1962 23.3402 18.4015 22.8549L19.3272 20.6669L16.6665 20.6669C15.9593 20.6669 15.281 20.3859 14.7809 19.8858C14.2808 19.3857 13.9998 18.7075 13.9998 18.0002L13.9998 15.3335C13.9998 14.4495 14.351 13.6016 14.9761 12.9765C15.6013 12.3514 16.4491 12.0002 17.3332 12.0002L22.6665 12.0002C23.7274 12.0002 24.7448 12.4216 25.4949 13.1718C26.2451 13.9219 26.6665 14.9393 26.6665 16.0002L26.6665 17.2508C26.6665 18.3197 26.2995 19.3562 25.627 20.187L21.3876 25.4238C21.1354 25.7354 20.7732 25.9383 20.3757 25.9906C19.9783 26.0428 19.5759 25.9404 19.2517 25.7047ZM20.036 24.6264C20.0839 24.6612 20.1433 24.6763 20.2019 24.6686C20.2606 24.6609 20.3141 24.6309 20.3513 24.5849L24.5907 19.3481C25.0711 18.7547 25.3332 18.0143 25.3332 17.2508L25.3332 16.0002C25.3332 15.293 25.0522 14.6147 24.5521 14.1146C24.052 13.6145 23.3738 13.3335 22.6665 13.3335L17.3332 13.3335C16.8027 13.3335 16.294 13.5443 15.919 13.9193C15.5439 14.2944 15.3332 14.8031 15.3332 15.3335L15.3332 18.0002C15.3332 18.3538 15.4736 18.693 15.7237 18.943C15.9737 19.1931 16.3129 19.3335 16.6665 19.3335L20.3332 19.3335C20.5567 19.3335 20.7654 19.4456 20.8889 19.6319C21.0124 19.8183 21.0343 20.0541 20.9471 20.26L19.6295 23.3744C19.5415 23.5824 19.5265 23.8141 19.5869 24.0317C19.6473 24.2492 19.7796 24.4399 19.9623 24.5728L20.036 24.6264Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+const darkIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="18"
+    height="18"
+    viewBox="0 0 24 24">
+    <g fill="none" fillRule="evenodd" transform="translate(-444 -204)">
+      <path
+        fill="currentColor"
+        fillRule="nonzero"
+        d="M102,21 C102,18.1017141 103.307179,15.4198295 105.51735,13.6246624 C106.001939,13.2310647 105.821611,12.4522936 105.21334,12.3117518 C104.322006,12.1058078 103.414758,12 102.5,12 C95.8722864,12 90.5,17.3722864 90.5,24 C90.5,30.6277136 95.8722864,36 102.5,36 C106.090868,36 109.423902,34.4109093 111.690274,31.7128995 C112.091837,31.2348572 111.767653,30.5041211 111.143759,30.4810139 C106.047479,30.2922628 102,26.1097349 102,21 Z M102.5,34.5 C96.7007136,34.5 92,29.7992864 92,24 C92,18.2007136 96.7007136,13.5 102.5,13.5 C102.807386,13.5 103.113925,13.5136793 103.419249,13.5407785 C101.566047,15.5446378 100.5,18.185162 100.5,21 C100.5,26.3198526 104.287549,30.7714322 109.339814,31.7756638 L109.516565,31.8092927 C107.615276,33.5209452 105.138081,34.5 102.5,34.5 Z"
+        transform="translate(354.5 192)"
+      />
+      <polygon points="444 228 468 228 468 204 444 204" />
+    </g>
+  </svg>
+);
+
+const lightIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    viewBox="0 0 24 24">
+    <g fill="none" fillRule="evenodd" transform="translate(-444 -204)">
+      <g fill="currentColor" transform="translate(354 144)">
+        <path
+          fillRule="nonzero"
+          d="M108.5 24C108.5 27.5902136 105.590214 30.5 102 30.5 98.4097864 30.5 95.5 27.5902136 95.5 24 95.5 20.4097864 98.4097864 17.5 102 17.5 105.590214 17.5 108.5 20.4097864 108.5 24zM107 24C107 21.2382136 104.761786 19 102 19 99.2382136 19 97 21.2382136 97 24 97 26.7617864 99.2382136 29 102 29 104.761786 29 107 26.7617864 107 24zM101 12.75L101 14.75C101 15.1642136 101.335786 15.5 101.75 15.5 102.164214 15.5 102.5 15.1642136 102.5 14.75L102.5 12.75C102.5 12.3357864 102.164214 12 101.75 12 101.335786 12 101 12.3357864 101 12.75zM95.7255165 14.6323616L96.7485165 16.4038616C96.9556573 16.7625614 97.4143618 16.8854243 97.7730616 16.6782835 98.1317614 16.4711427 98.2546243 16.0124382 98.0474835 15.6537384L97.0244835 13.8822384C96.8173427 13.5235386 96.3586382 13.4006757 95.9999384 13.6078165 95.6412386 13.8149573 95.5183757 14.2736618 95.7255165 14.6323616zM91.8822384 19.0244835L93.6537384 20.0474835C94.0124382 20.2546243 94.4711427 20.1317614 94.6782835 19.7730616 94.8854243 19.4143618 94.7625614 18.9556573 94.4038616 18.7485165L92.6323616 17.7255165C92.2736618 17.5183757 91.8149573 17.6412386 91.6078165 17.9999384 91.4006757 18.3586382 91.5235386 18.8173427 91.8822384 19.0244835zM90.75 25L92.75 25C93.1642136 25 93.5 24.6642136 93.5 24.25 93.5 23.8357864 93.1642136 23.5 92.75 23.5L90.75 23.5C90.3357864 23.5 90 23.8357864 90 24.25 90 24.6642136 90.3357864 25 90.75 25zM92.6323616 30.2744835L94.4038616 29.2514835C94.7625614 29.0443427 94.8854243 28.5856382 94.6782835 28.2269384 94.4711427 27.8682386 94.0124382 27.7453757 93.6537384 27.9525165L91.8822384 28.9755165C91.5235386 29.1826573 91.4006757 29.6413618 91.6078165 30.0000616 91.8149573 30.3587614 92.2736618 30.4816243 92.6323616 30.2744835zM97.0244835 34.1177616L98.0474835 32.3462616C98.2546243 31.9875618 98.1317614 31.5288573 97.7730616 31.3217165 97.4143618 31.1145757 96.9556573 31.2374386 96.7485165 31.5961384L95.7255165 33.3676384C95.5183757 33.7263382 95.6412386 34.1850427 95.9999384 34.3921835 96.3586382 34.5993243 96.8173427 34.4764614 97.0244835 34.1177616zM103 35.25L103 33.25C103 32.8357864 102.664214 32.5 102.25 32.5 101.835786 32.5 101.5 32.8357864 101.5 33.25L101.5 35.25C101.5 35.6642136 101.835786 36 102.25 36 102.664214 36 103 35.6642136 103 35.25zM108.274483 33.3676384L107.251483 31.5961384C107.044343 31.2374386 106.585638 31.1145757 106.226938 31.3217165 105.868239 31.5288573 105.745376 31.9875618 105.952517 32.3462616L106.975517 34.1177616C107.182657 34.4764614 107.641362 34.5993243 108.000062 34.3921835 108.358761 34.1850427 108.481624 33.7263382 108.274483 33.3676384zM112.117762 28.9755165L110.346262 27.9525165C109.987562 27.7453757 109.528857 27.8682386 109.321717 28.2269384 109.114576 28.5856382 109.237439 29.0443427 109.596138 29.2514835L111.367638 30.2744835C111.726338 30.4816243 112.185043 30.3587614 112.392183 30.0000616 112.599324 29.6413618 112.476461 29.1826573 112.117762 28.9755165zM113.25 23L111.25 23C110.835786 23 110.5 23.3357864 110.5 23.75 110.5 24.1642136 110.835786 24.5 111.25 24.5L113.25 24.5C113.664214 24.5 114 24.1642136 114 23.75 114 23.3357864 113.664214 23 113.25 23zM111.367638 17.7255165L109.596138 18.7485165C109.237439 18.9556573 109.114576 19.4143618 109.321717 19.7730616 109.528857 20.1317614 109.987562 20.2546243 110.346262 20.0474835L112.117762 19.0244835C112.476461 18.8173427 112.599324 18.3586382 112.392183 17.9999384 112.185043 17.6412386 111.726338 17.5183757 111.367638 17.7255165zM106.975517 13.8822384L105.952517 15.6537384C105.745376 16.0124382 105.868239 16.4711427 106.226938 16.6782835 106.585638 16.8854243 107.044343 16.7625614 107.251483 16.4038616L108.274483 14.6323616C108.481624 14.2736618 108.358761 13.8149573 108.000062 13.6078165 107.641362 13.4006757 107.182657 13.5235386 106.975517 13.8822384z"
+          transform="translate(0 48)"
+        />
+        <path
+          d="M98.6123,60.1372 C98.6123,59.3552 98.8753,58.6427 99.3368,58.0942 C99.5293,57.8657 99.3933,57.5092 99.0943,57.5017 C99.0793,57.5012 99.0633,57.5007 99.0483,57.5007 C97.1578,57.4747 95.5418,59.0312 95.5008,60.9217 C95.4578,62.8907 97.0408,64.5002 98.9998,64.5002 C99.7793,64.5002 100.4983,64.2452 101.0798,63.8142 C101.3183,63.6372 101.2358,63.2627 100.9478,63.1897 C99.5923,62.8457 98.6123,61.6072 98.6123,60.1372"
+          transform="translate(3 11)"
+        />
+      </g>
+      <polygon points="444 228 468 228 468 204 444 204" />
+    </g>
+  </svg>
+);
+
+export default function Nav() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [showFeedback, setShowFeedback] = useState(false);
+  const scrollParentRef = useRef<HTMLDivElement>(null);
+  const feedbackAutohideRef = useRef<any>(null);
+  const section = useActiveSection();
+  const {asPath} = useRouter();
+  const feedbackPopupRef = useRef<null | HTMLDivElement>(null);
+
+  // In desktop mode, use the route tree for current route.
+  let routeTree: RouteItem = useContext(SidebarContext);
+  // In mobile mode, let the user switch tabs there and back without navigating.
+  // Seed the tab state from the router, but keep it independent.
+  const [tab, setTab] = useState(section);
+  const [prevSection, setPrevSection] = useState(section);
+  if (prevSection !== section) {
+    setPrevSection(section);
+    setTab(section);
+  }
+  if (isOpen) {
+    switch (tab) {
+      case 'home':
+      case 'learn':
+        routeTree = sidebarLearn as RouteItem;
+        break;
+      case 'reference':
+        routeTree = sidebarReference as RouteItem;
+        break;
+    }
+  }
+  // HACK. Fix up the data structures instead.
+  if ((routeTree as any).routes.length === 1) {
+    routeTree = (routeTree as any).routes[0];
+  }
+
+  // While the overlay is open, disable body scroll.
+  useEffect(() => {
+    if (isOpen) {
+      const preferredScrollParent = scrollParentRef.current!;
+      disableBodyScroll(preferredScrollParent);
+      return () => enableBodyScroll(preferredScrollParent);
+    } else {
+      return undefined;
+    }
+  }, [isOpen]);
+
+  // Close the overlay on any navigation.
+  useEffect(() => {
+    setIsOpen(false);
+  }, [asPath]);
+
+  // Also close the overlay if the window gets resized past mobile layout.
+  // (This is also important because we don't want to keep the body locked!)
+  useEffect(() => {
+    const media = window.matchMedia(`(max-width: 1023px)`);
+    function closeIfNeeded() {
+      if (!media.matches) {
+        setIsOpen(false);
+      }
+    }
+    closeIfNeeded();
+    media.addEventListener('change', closeIfNeeded);
+    return () => {
+      media.removeEventListener('change', closeIfNeeded);
+    };
+  }, []);
+
+  function handleFeedback() {
+    clearTimeout(feedbackAutohideRef.current);
+    setShowFeedback(!showFeedback);
+  }
+
+  // Hide the Feedback widget on any click outside.
+  useEffect(() => {
+    if (!showFeedback) {
+      return;
+    }
+    function handleDocumentClickCapture(e: MouseEvent) {
+      if (!feedbackPopupRef.current!.contains(e.target as any)) {
+        e.stopPropagation();
+        e.preventDefault();
+        setShowFeedback(false);
+      }
+    }
+    document.addEventListener('click', handleDocumentClickCapture, {
+      capture: true,
+    });
+    return () =>
+      document.removeEventListener('click', handleDocumentClickCapture, {
+        capture: true,
+      });
+  }, [showFeedback]);
+
+  function selectTab(nextTab: 'learn' | 'reference') {
+    setTab(nextTab);
+    scrollParentRef.current!.scrollTop = 0;
+  }
+
+  return (
+    <div
+      className={cn(
+        'sticky top-0 lg:bottom-0 lg:h-screen flex flex-col',
+        isOpen && 'h-screen'
+      )}>
+      <nav className="items-center w-full flex lg:block justify-between bg-wash dark:bg-wash-dark pt-0 lg:pt-4 pr-5 lg:px-5 z-50">
+        <div className="xl:w-full xl:max-w-xs flex items-center">
+          <button
+            type="button"
+            aria-label="Menu"
+            onClick={() => setIsOpen(!isOpen)}
+            className={cn('flex lg:hidden items-center h-full px-4', {
+              'text-link dark:text-link-dark mr-0': isOpen,
+            })}>
+            {isOpen ? <IconClose /> : <IconHamburger />}
+          </button>
+          <NextLink href="/">
+            <a className="inline-flex text-l font-normal items-center text-primary dark:text-primary-dark py-1 mr-0 sm:mr-3 whitespace-nowrap">
+              <Logo className="text-sm mr-2 w-8 h-8 text-link dark:text-link-dark" />
+              React Docs
+            </a>
+          </NextLink>
+          <div className="lg:w-full leading-loose hidden sm:flex flex-initial items-center h-auto pr-5 lg:pr-5 pt-0.5">
+            <div className="px-1 mb-px bg-highlight dark:bg-highlight-dark rounded uppercase text-link dark:text-link-dark font-bold tracking-wide text-xs whitespace-nowrap">
+              Beta
+            </div>
+          </div>
+          <div className="block dark:hidden">
+            <button
+              type="button"
+              aria-label="Use Dark Mode"
+              onClick={() => {
+                window.__setPreferredTheme('dark');
+              }}
+              className="hidden lg:flex items-center h-full pr-2">
+              {darkIcon}
+            </button>
+          </div>
+          <div className="hidden dark:block">
+            <button
+              type="button"
+              aria-label="Use Light Mode"
+              onClick={() => {
+                window.__setPreferredTheme('light');
+              }}
+              className="hidden lg:flex items-center h-full pr-2">
+              {lightIcon}
+            </button>
+          </div>
+        </div>
+        {!isOpen && (
+          <div className="hidden lg:block sm:pt-10 lg:pt-4">
+            <Search />
+          </div>
+        )}
+        <div className="px-0 pt-2 w-full 2xl:max-w-xs hidden lg:flex items-center self-center border-b-0 lg:border-b border-border dark:border-border-dark">
+          <NavLink
+            href="/learn"
+            isActive={section === 'learn' || section === 'home'}>
+            Learn
+          </NavLink>
+          <NavLink href="/reference/react" isActive={section === 'reference'}>
+            Reference
+          </NavLink>
+        </div>
+        <div className="flex my-4 h-10 mx-0 w-full lg:hidden justify-end lg:max-w-sm">
+          <Search />
+          <button
+            aria-label="Give feedback"
+            type="button"
+            className={cn(
+              'inline-flex lg:hidden items-center rounded-full px-1.5 ml-4 lg:ml-6 relative top-px',
+              {
+                'bg-card dark:bg-card-dark': showFeedback,
+              }
+            )}
+            onClick={handleFeedback}>
+            {feedbackIcon}
+          </button>
+          <div className="block dark:hidden">
+            <button
+              type="button"
+              aria-label="Use Dark Mode"
+              onClick={() => {
+                window.__setPreferredTheme('dark');
+              }}
+              className="flex lg:hidden items-center p-1 h-full ml-4 lg:ml-6">
+              {darkIcon}
+            </button>
+          </div>
+          <div
+            ref={feedbackPopupRef}
+            className={cn(
+              'fixed top-12 right-0',
+              showFeedback ? 'block' : 'hidden'
+            )}>
+            <Feedback
+              onSubmit={() => {
+                clearTimeout(feedbackAutohideRef.current);
+                feedbackAutohideRef.current = setTimeout(() => {
+                  setShowFeedback(false);
+                }, 1000);
+              }}
+            />
+          </div>
+          <div className="hidden dark:block">
+            <button
+              type="button"
+              aria-label="Use Light Mode"
+              onClick={() => {
+                window.__setPreferredTheme('light');
+              }}
+              className="flex lg:hidden items-center p-1 h-full ml-4 lg:ml-6">
+              {lightIcon}
+            </button>
+          </div>
+        </div>
+      </nav>
+
+      {isOpen && (
+        <div className="bg-wash dark:bg-wash-dark px-5 flex justify-end border-b border-border dark:border-border-dark items-center self-center w-full z-10">
+          <TabButton
+            isActive={tab === 'learn' || tab === 'home'}
+            onClick={() => selectTab('learn')}>
+            Learn
+          </TabButton>
+          <TabButton
+            isActive={tab === 'reference'}
+            onClick={() => selectTab('reference')}>
+            Reference
+          </TabButton>
+        </div>
+      )}
+
+      <div
+        ref={scrollParentRef}
+        className="overflow-y-scroll no-bg-scrollbar lg:w-[336px] grow bg-wash dark:bg-wash-dark">
+        <aside
+          className={cn(
+            `lg:grow lg:flex flex-col w-full pb-8 lg:pb-0 lg:max-w-xs z-10`,
+            isOpen ? 'block z-40' : 'hidden lg:block'
+          )}>
+          <nav
+            role="navigation"
+            style={{'--bg-opacity': '.2'} as React.CSSProperties} // Need to cast here because CSS vars aren't considered valid in TS types (cuz they could be anything)
+            className="w-full lg:h-auto grow pr-0 lg:pr-5 pt-6 lg:py-6 md:pt-4 lg:pt-4 scrolling-touch scrolling-gpu">
+            {/* No fallback UI so need to be careful not to suspend directly inside. */}
+            <Suspense fallback={null}>
+              <SidebarRouteTree
+                // Don't share state between the desktop and mobile versions.
+                // This avoids unnecessary animations and visual flicker.
+                key={isOpen ? 'mobile-overlay' : 'desktop-or-hidden'}
+                routeTree={routeTree}
+                isForceExpanded={isOpen}
+              />
+            </Suspense>
+            <div className="h-20" />
+          </nav>
+          <div className="fixed bottom-0 hidden lg:block">
+            <Feedback />
+          </div>
+        </aside>
+      </div>
+    </div>
+  );
+}
+
+function TabButton({
+  children,
+  onClick,
+  isActive,
+}: {
+  children: any;
+  onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  isActive: boolean;
+}) {
+  const classes = cn(
+    'inline-flex items-center w-full border-b-2 justify-center text-base leading-9 px-3 pb-0.5 hover:text-link hover:gray-5',
+    {
+      'text-link dark:text-link-dark dark:border-link-dark border-link font-bold':
+        isActive,
+      'border-transparent': !isActive,
+    }
+  );
+  return (
+    <button className={classes} onClick={onClick}>
+      {children}
+    </button>
+  );
+}
diff --git a/beta/src/components/Layout/Nav/NavLink.tsx b/beta/src/components/Layout/Nav/NavLink.tsx
new file mode 100644
index 000000000..3fddc6e16
--- /dev/null
+++ b/beta/src/components/Layout/Nav/NavLink.tsx
@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import * as React from 'react';
+import cn from 'classnames';
+import {ExternalLink} from 'components/ExternalLink';
+import NextLink from 'next/link';
+
+interface NavLinkProps {
+  href: string;
+  children: React.ReactNode;
+  isActive: boolean;
+}
+
+export default function NavLink({href, children, isActive}: NavLinkProps) {
+  const classes = cn(
+    {
+      'text-link border-link dark:text-link-dark dark:border-link-dark font-bold':
+        isActive,
+    },
+    {'border-transparent': !isActive},
+    'inline-flex w-full items-center border-b-2 justify-center text-base leading-9 px-3 py-0.5 hover:text-link dark:hover:text-link-dark whitespace-nowrap'
+  );
+
+  if (href.startsWith('https://')) {
+    return (
+      <ExternalLink href={href} className={classes}>
+        {children}
+      </ExternalLink>
+    );
+  }
+
+  return (
+    <NextLink href={href}>
+      <a className={classes}>{children}</a>
+    </NextLink>
+  );
+}
diff --git a/beta/src/components/Layout/Nav/index.tsx b/beta/src/components/Layout/Nav/index.tsx
new file mode 100644
index 000000000..0f4d0e78e
--- /dev/null
+++ b/beta/src/components/Layout/Nav/index.tsx
@@ -0,0 +1,5 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+export {default as Nav} from './Nav';
diff --git a/beta/src/components/Layout/Page.tsx b/beta/src/components/Layout/Page.tsx
new file mode 100644
index 000000000..cafba9d36
--- /dev/null
+++ b/beta/src/components/Layout/Page.tsx
@@ -0,0 +1,57 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {Suspense} from 'react';
+import * as React from 'react';
+import {useRouter} from 'next/router';
+import {Nav} from './Nav';
+import {RouteItem, SidebarContext} from './useRouteMeta';
+import {useActiveSection} from 'hooks/useActiveSection';
+import {Footer} from './Footer';
+import {Toc} from './Toc';
+import SocialBanner from '../SocialBanner';
+import sidebarLearn from '../../sidebarLearn.json';
+import sidebarReference from '../../sidebarReference.json';
+import type {TocItem} from 'components/MDX/TocContext';
+
+interface PageProps {
+  children: React.ReactNode;
+  toc: Array<TocItem>;
+}
+
+export function Page({children, toc}: PageProps) {
+  const {asPath} = useRouter();
+  const section = useActiveSection();
+  let routeTree = sidebarLearn as RouteItem;
+  switch (section) {
+    case 'reference':
+      routeTree = sidebarReference as RouteItem;
+      break;
+  }
+  return (
+    <>
+      <SocialBanner />
+      <SidebarContext.Provider value={routeTree}>
+        <div className="grid grid-cols-only-content lg:grid-cols-sidebar-content 2xl:grid-cols-sidebar-content-toc">
+          <div className="fixed lg:sticky top-0 left-0 right-0 py-0 shadow lg:shadow-none z-50">
+            <Nav />
+          </div>
+          {/* No fallback UI so need to be careful not to suspend directly inside. */}
+          <Suspense fallback={null}>
+            <main className="min-w-0">
+              <div className="lg:hidden h-16 mb-2" />
+              <article className="break-words" key={asPath}>
+                {children}
+              </article>
+              <Footer />
+            </main>
+          </Suspense>
+          <div className="hidden lg:max-w-xs 2xl:block">
+            {toc.length > 0 && <Toc headings={toc} key={asPath} />}
+          </div>
+        </div>
+      </SidebarContext.Provider>
+    </>
+  );
+}
diff --git a/beta/src/components/Layout/Sidebar/SidebarButton.tsx b/beta/src/components/Layout/Sidebar/SidebarButton.tsx
new file mode 100644
index 000000000..b1276cdb8
--- /dev/null
+++ b/beta/src/components/Layout/Sidebar/SidebarButton.tsx
@@ -0,0 +1,57 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import * as React from 'react';
+import cn from 'classnames';
+import {IconNavArrow} from 'components/Icon/IconNavArrow';
+
+interface SidebarButtonProps {
+  title: string;
+  heading: boolean;
+  level: number;
+  onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  isExpanded?: boolean;
+  isBreadcrumb?: boolean;
+}
+
+export function SidebarButton({
+  title,
+  heading,
+  level,
+  onClick,
+  isExpanded,
+  isBreadcrumb,
+}: SidebarButtonProps) {
+  return (
+    <div
+      className={cn({
+        'my-1': heading || level === 1,
+        'my-3': level > 1,
+      })}>
+      <button
+        className={cn(
+          'p-2 pr-2 pl-5 w-full rounded-r-lg text-left hover:bg-gray-5 dark:hover:bg-gray-80 relative flex items-center justify-between',
+          {
+            'p-2 text-base': level > 1,
+            'text-link bg-highlight dark:bg-highlight-dark text-base font-bold hover:bg-highlight dark:hover:bg-highlight-dark hover:text-link dark:hover:text-link-dark':
+              !heading && isBreadcrumb && !isExpanded,
+            'p-4 my-6 text-2xl lg:my-auto lg:text-sm font-bold': heading,
+            'p-2 hover:text-gray-70 text-base font-bold text-primary dark:text-primary-dark':
+              !heading && !isBreadcrumb,
+            'text-primary dark:text-primary-dark': heading && !isBreadcrumb,
+            'text-primary dark:text-primary-dark text-base font-bold bg-card dark:bg-card-dark':
+              !heading && isExpanded,
+          }
+        )}
+        onClick={onClick}>
+        {title}
+        {typeof isExpanded && !heading && (
+          <span className="pr-2 text-gray-30">
+            <IconNavArrow displayDirection={isExpanded ? 'down' : 'right'} />
+          </span>
+        )}
+      </button>
+    </div>
+  );
+}
diff --git a/beta/src/components/Layout/Sidebar/SidebarLink.tsx b/beta/src/components/Layout/Sidebar/SidebarLink.tsx
new file mode 100644
index 000000000..de5ea8ea7
--- /dev/null
+++ b/beta/src/components/Layout/Sidebar/SidebarLink.tsx
@@ -0,0 +1,100 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import {useRef, useEffect} from 'react';
+import * as React from 'react';
+import cn from 'classnames';
+import {IconNavArrow} from 'components/Icon/IconNavArrow';
+import Link from 'next/link';
+
+interface SidebarLinkProps {
+  href: string;
+  selected?: boolean;
+  title: string;
+  level: number;
+  wip: boolean | undefined;
+  icon?: React.ReactNode;
+  heading?: boolean;
+  isExpanded?: boolean;
+  isBreadcrumb?: boolean;
+  hideArrow?: boolean;
+  isPending: boolean;
+}
+
+export function SidebarLink({
+  href,
+  selected = false,
+  title,
+  wip,
+  level,
+  heading = false,
+  isExpanded,
+  isBreadcrumb,
+  hideArrow,
+  isPending,
+}: SidebarLinkProps) {
+  const ref = useRef<HTMLAnchorElement>(null);
+
+  useEffect(() => {
+    if (selected && ref && ref.current) {
+      // @ts-ignore
+      if (typeof ref.current.scrollIntoViewIfNeeded === 'function') {
+        // @ts-ignore
+        ref.current.scrollIntoViewIfNeeded();
+      }
+    }
+  }, [ref, selected]);
+
+  let target = '';
+  if (href.startsWith('https://')) {
+    target = '_blank';
+  }
+  return (
+    <Link href={href}>
+      <a
+        ref={ref}
+        title={title}
+        target={target}
+        aria-current={selected ? 'page' : undefined}
+        className={cn(
+          'p-2 pr-2 w-full rounded-none lg:rounded-r-lg text-left hover:bg-gray-5 dark:hover:bg-gray-80 relative flex items-center justify-between',
+          {
+            'my-6': heading,
+            'text-primary dark:text-primary-dark': heading && !isBreadcrumb,
+            'text-sm pl-6': level > 0,
+            'pl-5': level < 2,
+            'text-base font-bold': level === 0,
+            'dark:text-primary-dark text-primary ': level === 0 && !selected,
+            'text-base text-link dark:text-link-dark': level === 1 && selected,
+            'dark:text-primary-dark text-primary': heading,
+            'text-base text-secondary dark:text-secondary-dark':
+              !selected && !heading,
+            'text-base text-link dark:text-link-dark bg-highlight dark:bg-highlight-dark border-blue-40 hover:bg-highlight hover:text-link dark:hover:bg-highlight-dark dark:hover:text-link-dark':
+              selected,
+            'dark:bg-gray-70 bg-gray-3 dark:hover:bg-gray-70 hover:bg-gray-3':
+              isPending,
+          }
+        )}>
+        {/* This here needs to be refactored ofc */}
+        <span
+          className={cn({
+            'text-gray-400 dark:text-gray-500': wip,
+          })}>
+          {title}
+        </span>
+        {isExpanded != null && !heading && !hideArrow && (
+          <span
+            className={cn('pr-1', {
+              'text-link': isExpanded,
+              'text-gray-30': !isExpanded,
+            })}>
+            <IconNavArrow displayDirection={isExpanded ? 'down' : 'right'} />
+          </span>
+        )}
+      </a>
+    </Link>
+  );
+}
diff --git a/beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx b/beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx
new file mode 100644
index 000000000..85fe5713e
--- /dev/null
+++ b/beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx
@@ -0,0 +1,186 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {useRef, useLayoutEffect, Fragment} from 'react';
+
+import cn from 'classnames';
+import {RouteItem} from 'components/Layout/useRouteMeta';
+import {useRouter} from 'next/router';
+import {removeFromLast} from 'utils/removeFromLast';
+import {useRouteMeta} from '../useRouteMeta';
+import {SidebarLink} from './SidebarLink';
+import useCollapse from 'react-collapsed';
+import usePendingRoute from 'hooks/usePendingRoute';
+
+interface SidebarRouteTreeProps {
+  isForceExpanded: boolean;
+  routeTree: RouteItem;
+  level?: number;
+}
+
+function CollapseWrapper({
+  isExpanded,
+  duration,
+  children,
+}: {
+  isExpanded: boolean;
+  duration: number;
+  children: any;
+}) {
+  const ref = useRef<HTMLDivElement | null>(null);
+  const timeoutRef = useRef<number | null>(null);
+  const {getCollapseProps} = useCollapse({
+    isExpanded,
+    duration,
+  });
+
+  // Disable pointer events while animating.
+  const isExpandedRef = useRef(isExpanded);
+  if (typeof window !== 'undefined') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useLayoutEffect(() => {
+      const wasExpanded = isExpandedRef.current;
+      if (wasExpanded === isExpanded) {
+        return;
+      }
+      isExpandedRef.current = isExpanded;
+      if (ref.current !== null) {
+        const node: HTMLDivElement = ref.current;
+        node.style.pointerEvents = 'none';
+        if (timeoutRef.current !== null) {
+          window.clearTimeout(timeoutRef.current);
+        }
+        timeoutRef.current = window.setTimeout(() => {
+          node.style.pointerEvents = '';
+        }, duration + 100);
+      }
+    });
+  }
+
+  return (
+    <div
+      ref={ref}
+      className={cn(isExpanded ? 'opacity-100' : 'opacity-50')}
+      style={{
+        transition: `opacity ${duration}ms ease-in-out`,
+      }}>
+      <div {...getCollapseProps()}>{children}</div>
+    </div>
+  );
+}
+
+export function SidebarRouteTree({
+  isForceExpanded,
+  routeTree,
+  level = 0,
+}: SidebarRouteTreeProps) {
+  const {breadcrumbs} = useRouteMeta(routeTree);
+  const cleanedPath = useRouter().asPath.split(/[\?\#]/)[0];
+  const pendingRoute = usePendingRoute();
+
+  const slug = cleanedPath;
+  const currentRoutes = routeTree.routes as RouteItem[];
+  const expandedPath = currentRoutes.reduce(
+    (acc: string | undefined, curr: RouteItem) => {
+      if (acc) return acc;
+      const breadcrumb = breadcrumbs.find((b) => b.path === curr.path);
+      if (breadcrumb) {
+        return curr.path;
+      }
+      if (curr.path === cleanedPath) {
+        return cleanedPath;
+      }
+      return undefined;
+    },
+    undefined
+  );
+
+  const expanded = expandedPath;
+  return (
+    <ul>
+      {currentRoutes.map(
+        (
+          {path, title, routes, wip, heading, hasSectionHeader, sectionHeader},
+          index
+        ) => {
+          const pagePath = path && removeFromLast(path, '.');
+          const selected = slug === pagePath;
+
+          let listItem = null;
+          if (!path || !pagePath || heading) {
+            // if current route item has no path and children treat it as an API sidebar heading
+            listItem = (
+              <SidebarRouteTree
+                level={level + 1}
+                isForceExpanded={isForceExpanded}
+                routeTree={{title, routes}}
+              />
+            );
+          } else if (routes) {
+            // if route has a path and child routes, treat it as an expandable sidebar item
+            const isExpanded = isForceExpanded || expanded === path;
+            listItem = (
+              <li key={`${title}-${path}-${level}-heading`}>
+                <SidebarLink
+                  key={`${title}-${path}-${level}-link`}
+                  href={pagePath}
+                  isPending={pendingRoute === pagePath}
+                  selected={selected}
+                  level={level}
+                  title={title}
+                  wip={wip}
+                  isExpanded={isExpanded}
+                  isBreadcrumb={expandedPath === path}
+                  hideArrow={isForceExpanded}
+                />
+                <CollapseWrapper duration={250} isExpanded={isExpanded}>
+                  <SidebarRouteTree
+                    isForceExpanded={isForceExpanded}
+                    routeTree={{title, routes}}
+                    level={level + 1}
+                  />
+                </CollapseWrapper>
+              </li>
+            );
+          } else {
+            // if route has a path and no child routes, treat it as a sidebar link
+            listItem = (
+              <li key={`${title}-${path}-${level}-link`}>
+                <SidebarLink
+                  isPending={pendingRoute === pagePath}
+                  href={path.startsWith('https://') ? path : pagePath}
+                  selected={selected}
+                  level={level}
+                  title={title}
+                  wip={wip}
+                />
+              </li>
+            );
+          }
+          if (hasSectionHeader) {
+            return (
+              <Fragment key={`${sectionHeader}-${level}-separator`}>
+                {index !== 0 && (
+                  <li
+                    role="separator"
+                    className="mt-4 mb-2 ml-5 border-b border-border dark:border-border-dark"
+                  />
+                )}
+                <h3
+                  className={cn(
+                    'mb-1 text-sm font-bold ml-5 text-gray-400 dark:text-gray-500',
+                    index !== 0 && 'mt-2'
+                  )}>
+                  {sectionHeader}
+                </h3>
+              </Fragment>
+            );
+          } else {
+            return listItem;
+          }
+        }
+      )}
+    </ul>
+  );
+}
diff --git a/beta/src/components/Layout/Sidebar/index.tsx b/beta/src/components/Layout/Sidebar/index.tsx
new file mode 100644
index 000000000..d0e291547
--- /dev/null
+++ b/beta/src/components/Layout/Sidebar/index.tsx
@@ -0,0 +1,7 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+export {SidebarButton} from './SidebarButton';
+export {SidebarLink} from './SidebarLink';
+export {SidebarRouteTree} from './SidebarRouteTree';
diff --git a/beta/src/components/Layout/Toc.tsx b/beta/src/components/Layout/Toc.tsx
new file mode 100644
index 000000000..2ff779534
--- /dev/null
+++ b/beta/src/components/Layout/Toc.tsx
@@ -0,0 +1,60 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import cx from 'classnames';
+import {useTocHighlight} from './useTocHighlight';
+import type {Toc} from '../MDX/TocContext';
+
+export function Toc({headings}: {headings: Toc}) {
+  const {currentIndex} = useTocHighlight();
+  // TODO: We currently have a mismatch between the headings in the document
+  // and the headings we find in MarkdownPage (i.e. we don't find Recap or Challenges).
+  // Select the max TOC item we have here for now, but remove this after the fix.
+  const selectedIndex = Math.min(currentIndex, headings.length - 1);
+  return (
+    <nav role="navigation" className="pt-[22px] sticky top-0 right-0">
+      {headings.length > 0 && (
+        <h2 className="mb-3 lg:mb-3 uppercase tracking-wide font-bold text-sm text-secondary dark:text-secondary-dark px-4 w-full">
+          On this page
+        </h2>
+      )}
+      <div className="h-full overflow-y-auto pl-4 max-h-[calc(100vh-7.5rem)]">
+        <ul className="space-y-2 pb-16">
+          {headings.length > 0 &&
+            headings.map((h, i) => {
+              if (h.url == null) {
+                // TODO: only log in DEV
+                console.error('Heading does not have URL');
+              }
+              return (
+                <li
+                  key={`heading-${h.url}-${i}`}
+                  className={cx(
+                    'text-sm px-2 rounded-l-lg',
+                    selectedIndex === i
+                      ? 'bg-highlight dark:bg-highlight-dark'
+                      : null,
+                    {
+                      'pl-4': h?.depth === 3,
+                      hidden: h.depth && h.depth > 3,
+                    }
+                  )}>
+                  <a
+                    className={cx(
+                      selectedIndex === i
+                        ? 'text-link dark:text-link-dark font-bold'
+                        : 'text-secondary dark:text-secondary-dark',
+                      'block hover:text-link dark:hover:text-link-dark leading-normal py-2'
+                    )}
+                    href={h.url}>
+                    {h.text}
+                  </a>
+                </li>
+              );
+            })}
+        </ul>
+      </div>
+    </nav>
+  );
+}
diff --git a/beta/src/components/Layout/useRouteMeta.tsx b/beta/src/components/Layout/useRouteMeta.tsx
new file mode 100644
index 000000000..ce508ebb6
--- /dev/null
+++ b/beta/src/components/Layout/useRouteMeta.tsx
@@ -0,0 +1,135 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {useContext, createContext} from 'react';
+import {useRouter} from 'next/router';
+
+/**
+ * While Next.js provides file-based routing, we still need to construct
+ * a sidebar for navigation and provide each markdown page
+ * previous/next links and titles. To do this, we construct a nested
+ * route object that is infinitely nestable.
+ */
+
+export type RouteTag =
+  | 'foundation'
+  | 'intermediate'
+  | 'advanced'
+  | 'experimental'
+  | 'deprecated';
+
+export interface RouteItem {
+  /** Page title (for the sidebar) */
+  title: string;
+  /** Optional page description for heading */
+  description?: string;
+  /* Additional meta info for page tagging */
+  tags?: RouteTag[];
+  /** Path to page */
+  path?: string;
+  /** Whether the entry is a heading */
+  heading?: boolean;
+  /** Whether the page is under construction */
+  wip?: boolean;
+  /** List of sub-routes */
+  routes?: RouteItem[];
+  /** Adds a section header above the route item */
+  hasSectionHeader?: boolean;
+  /** Title of section header */
+  sectionHeader?: string;
+}
+
+export interface Routes {
+  /** List of routes */
+  routes: RouteItem[];
+}
+
+/** Routing metadata about a given route and it's siblings and parent */
+export interface RouteMeta {
+  /** The previous route */
+  prevRoute?: RouteItem;
+  /** The next route */
+  nextRoute?: RouteItem;
+  /** The current route */
+  route?: RouteItem;
+  /** Trail of parent routes */
+  breadcrumbs?: RouteItem[];
+}
+
+export function useRouteMeta(rootRoute?: RouteItem) {
+  const sidebarContext = useContext(SidebarContext);
+  const routeTree = rootRoute || sidebarContext;
+  const router = useRouter();
+  if (router.pathname === '/404') {
+    return {
+      breadcrumbs: [],
+    };
+  }
+  const cleanedPath = router.asPath.split(/[\?\#]/)[0];
+  const breadcrumbs = getBreadcrumbs(cleanedPath, routeTree);
+  return {
+    ...getRouteMeta(cleanedPath, routeTree),
+    breadcrumbs: breadcrumbs.length > 0 ? breadcrumbs : [routeTree],
+  };
+}
+
+export const SidebarContext = createContext<RouteItem>({title: 'root'});
+
+// Performs a depth-first search to find the current route and its previous/next route
+function getRouteMeta(
+  searchPath: string,
+  currentRoute: RouteItem,
+  ctx: RouteMeta = {}
+): RouteMeta {
+  const {routes} = currentRoute;
+
+  if (ctx.route && !ctx.nextRoute) {
+    ctx.nextRoute = currentRoute;
+  }
+
+  if (currentRoute.path === searchPath) {
+    ctx.route = currentRoute;
+  }
+
+  if (!ctx.route) {
+    ctx.prevRoute = currentRoute;
+  }
+
+  if (!routes) {
+    return ctx;
+  }
+
+  for (const route of routes) {
+    getRouteMeta(searchPath, route, ctx);
+  }
+
+  return ctx;
+}
+
+// iterates the route tree from the current route to find its ancestors for breadcrumbs
+function getBreadcrumbs(
+  path: string,
+  currentRoute: RouteItem,
+  breadcrumbs: RouteItem[] = []
+): RouteItem[] {
+  if (currentRoute.path === path) {
+    return breadcrumbs;
+  }
+
+  if (!currentRoute.routes) {
+    return [];
+  }
+
+  for (const route of currentRoute.routes) {
+    const childRoute = getBreadcrumbs(path, route, [
+      ...breadcrumbs,
+      currentRoute,
+    ]);
+    if (childRoute?.length) {
+      return childRoute;
+    }
+  }
+
+  return [];
+}
diff --git a/beta/src/components/Layout/useTocHighlight.tsx b/beta/src/components/Layout/useTocHighlight.tsx
new file mode 100644
index 000000000..b0879a143
--- /dev/null
+++ b/beta/src/components/Layout/useTocHighlight.tsx
@@ -0,0 +1,82 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {useState, useRef, useEffect} from 'react';
+
+const TOP_OFFSET = 75;
+
+export function getHeaderAnchors(): HTMLAnchorElement[] {
+  return Array.prototype.filter.call(
+    document.getElementsByClassName('mdx-header-anchor'),
+    function (testElement) {
+      return (
+        testElement.parentNode.nodeName === 'H1' ||
+        testElement.parentNode.nodeName === 'H2' ||
+        testElement.parentNode.nodeName === 'H3'
+      );
+    }
+  );
+}
+
+/**
+ * Sets up Table of Contents highlighting.
+ */
+export function useTocHighlight() {
+  const [currentIndex, setCurrentIndex] = useState<number>(0);
+  const timeoutRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    function updateActiveLink() {
+      const pageHeight = document.body.scrollHeight;
+      const scrollPosition = window.scrollY + window.innerHeight;
+      const headersAnchors = getHeaderAnchors();
+
+      if (scrollPosition >= 0 && pageHeight - scrollPosition <= TOP_OFFSET) {
+        // Scrolled to bottom of page.
+        setCurrentIndex(headersAnchors.length - 1);
+        return;
+      }
+
+      let index = -1;
+      while (index < headersAnchors.length - 1) {
+        const headerAnchor = headersAnchors[index + 1];
+        const {top} = headerAnchor.getBoundingClientRect();
+
+        if (top >= TOP_OFFSET) {
+          break;
+        }
+        index += 1;
+      }
+
+      setCurrentIndex(Math.max(index, 0));
+    }
+
+    function throttledUpdateActiveLink() {
+      if (timeoutRef.current === null) {
+        timeoutRef.current = window.setTimeout(() => {
+          timeoutRef.current = null;
+          updateActiveLink();
+        }, 100);
+      }
+    }
+
+    document.addEventListener('scroll', throttledUpdateActiveLink);
+    document.addEventListener('resize', throttledUpdateActiveLink);
+
+    updateActiveLink();
+
+    return () => {
+      if (timeoutRef.current != null) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+      document.removeEventListener('scroll', throttledUpdateActiveLink);
+      document.removeEventListener('resize', throttledUpdateActiveLink);
+    };
+  }, []);
+
+  return {
+    currentIndex,
+  };
+}
diff --git a/beta/src/components/Logo.tsx b/beta/src/components/Logo.tsx
new file mode 100644
index 000000000..67469c0ed
--- /dev/null
+++ b/beta/src/components/Logo.tsx
@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+export function Logo(props: JSX.IntrinsicElements['svg']) {
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 410 369"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}>
+      <path
+        d="M204.995 224.552C226.56 224.552 244.042 207.07 244.042 185.506C244.042 163.941 226.56 146.459 204.995 146.459C183.43 146.459 165.948 163.941 165.948 185.506C165.948 207.07 183.43 224.552 204.995 224.552Z"
+        fill="currentColor"
+      />
+      <path
+        d="M409.99 184.505C409.99 153.707 381.437 126.667 335.996 108.925C343.342 60.6535 334.19 22.3878 307.492 6.98883C283.649 -6.77511 250.631 -0.0395641 214.512 25.9753C211.316 28.2692 208.143 30.7097 204.97 33.2477C201.822 30.7097 198.65 28.2692 195.477 25.9753C159.359 -0.0395641 126.34 -6.79951 102.497 6.98883C75.8237 22.3878 66.6721 60.6291 74.0422 108.852C28.5529 126.618 0 153.682 0 184.505C0 215.303 28.5528 242.342 73.9934 260.084C66.6477 308.356 75.7993 346.621 102.497 362.02C110.575 366.682 119.727 369 129.684 369C149.085 369 171.61 360.215 195.477 343.034C198.674 340.74 201.847 338.3 205.019 335.762C208.167 338.3 211.34 340.74 214.512 343.034C238.38 360.239 260.905 369 280.306 369C290.263 369 299.415 366.682 307.492 362.02C331.335 348.256 342 316.287 337.534 271.993C337.143 268.089 336.631 264.135 335.996 260.109C381.461 242.367 409.99 215.327 409.99 184.505ZM225.934 41.8136C246.238 27.1955 265.127 19.5814 280.306 19.5814C286.871 19.5814 292.728 20.9968 297.731 23.8765C315.204 33.9798 322.672 62.9475 317.327 102.433C299.756 97.0401 280.306 92.9158 259.392 90.2802C246.872 73.8074 233.597 58.9453 220.003 46.2551C221.98 44.7421 223.957 43.229 225.934 41.8136ZM112.259 23.8765C117.262 20.9968 123.119 19.5814 129.684 19.5814C144.863 19.5814 163.752 27.1711 184.056 41.8136C186.033 43.229 188.01 44.7176 189.986 46.2551C176.393 58.9453 163.142 73.783 150.622 90.2558C129.732 92.8914 110.258 97.0401 92.687 102.409C87.3424 62.9475 94.7857 33.9798 112.259 23.8765ZM19.5233 184.505C19.5233 164.322 40.9014 143.359 77.776 128.253C81.9003 146.141 88.0502 165.054 96.1768 184.456C88.0014 203.881 81.8515 222.819 77.7272 240.732C40.9014 225.626 19.5233 204.687 19.5233 184.505ZM184.056 327.196C154.966 348.134 128.805 354.675 112.259 345.133C94.7857 335.029 87.3181 306.062 92.6626 266.576C110.234 271.969 129.684 276.093 150.598 278.729C163.117 295.202 176.393 310.064 189.986 322.754C188.01 324.292 186.033 325.78 184.056 327.196ZM204.995 310.04C180.591 287.685 157.138 257.815 137.347 223.551C132.051 214.4 121.344 191.396 117 182.489C113.535 190.786 110.112 198.398 107.427 206.5C109.623 210.575 118.092 229.213 120.434 233.288C125.071 241.317 129.928 249.127 134.931 256.692C120.898 254.227 107.915 251.055 96.1035 247.321C102.815 217.011 116.213 182.064 137.347 145.458C142.545 136.453 153.838 116.346 159.5 108C150.568 109.147 143.395 108.767 135 110.5C132.56 114.453 122.777 131.645 120.434 135.721C115.749 143.823 111.454 151.925 107.427 159.978C102.546 146.581 98.8124 133.744 96.1524 121.64C125.755 112.293 162.727 106.411 204.995 106.411C215.562 106.411 237.63 106.197 247.49 106.905C242.048 99.7544 237.38 93.2819 231.694 86.888C227.082 86.7416 209.705 86.888 204.995 86.888C195.672 86.888 186.545 87.2053 177.589 87.7422C186.472 77.1752 195.672 67.5111 204.995 58.9697C229.375 81.3239 252.851 111.195 272.643 145.458C277.841 154.463 289.073 175.426 293.49 184.505C296.98 176.207 300.281 168.64 302.99 160.489C300.793 156.389 291.898 139.747 289.555 135.696C284.918 127.667 280.062 119.858 275.059 112.317C289.092 114.782 302.075 117.954 313.886 121.688C307.175 151.998 293.777 186.945 272.643 223.551C267.445 232.556 252.651 253.178 246.99 261.524C255.922 260.377 265.595 258.663 273.99 256.93C276.43 252.976 287.212 237.364 289.555 233.288C294.216 225.235 298.512 217.182 302.489 209.153C307.224 222.185 310.982 234.997 313.715 247.394C284.138 256.741 247.214 262.598 204.995 262.598C194.428 262.598 169.859 261.208 160 260.5C165.442 267.65 171.304 275.095 176.99 281.489C181.602 281.635 200.285 282.121 204.995 282.121C214.317 282.121 223.444 281.804 232.401 281.267C223.493 291.834 214.317 301.498 204.995 310.04ZM297.731 345.133C281.185 354.699 254.999 348.159 225.934 327.196C223.957 325.78 221.98 324.292 220.003 322.754C233.597 310.064 246.848 295.226 259.367 278.753C280.233 276.118 299.659 271.993 317.205 266.625C317.547 269.089 317.888 271.554 318.132 273.97C321.72 309.649 314.277 335.566 297.731 345.133ZM332.262 240.756C328.065 222.599 321.842 203.686 313.813 184.578C321.988 165.152 328.138 146.215 332.262 128.302C369.088 143.408 390.466 164.322 390.466 184.505C390.466 204.687 369.113 225.626 332.262 240.756Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
diff --git a/beta/src/components/MDX/Challenges/Challenge.tsx b/beta/src/components/MDX/Challenges/Challenge.tsx
new file mode 100644
index 000000000..24e99541c
--- /dev/null
+++ b/beta/src/components/MDX/Challenges/Challenge.tsx
@@ -0,0 +1,133 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {useState} from 'react';
+import cn from 'classnames';
+import {Button} from 'components/Button';
+import {ChallengeContents} from './Challenges';
+import {IconHint} from '../../Icon/IconHint';
+import {IconSolution} from '../../Icon/IconSolution';
+import {IconArrowSmall} from '../../Icon/IconArrowSmall';
+import {H4} from '../Heading';
+
+interface ChallengeProps {
+  isRecipes?: boolean;
+  totalChallenges: number;
+  currentChallenge: ChallengeContents;
+  hasNextChallenge: boolean;
+  handleClickNextChallenge: () => void;
+}
+
+export function Challenge({
+  isRecipes,
+  totalChallenges,
+  currentChallenge,
+  hasNextChallenge,
+  handleClickNextChallenge,
+}: ChallengeProps) {
+  const [showHint, setShowHint] = useState(false);
+  const [showSolution, setShowSolution] = useState(false);
+
+  const toggleHint = () => {
+    if (showSolution && !showHint) {
+      setShowSolution(false);
+    }
+    setShowHint((hint) => !hint);
+  };
+
+  const toggleSolution = () => {
+    if (showHint && !showSolution) {
+      setShowHint(false);
+    }
+    setShowSolution((solution) => !solution);
+  };
+
+  return (
+    <div className="p-5 sm:py-8 sm:px-8">
+      <div>
+        <H4
+          className="text-xl text-primary dark:text-primary-dark mb-2 mt-0 font-medium"
+          id={currentChallenge.id}>
+          <div className="font-bold block md:inline">
+            {isRecipes ? 'Example' : 'Challenge'} {currentChallenge.order} of{' '}
+            {totalChallenges}
+            <span className="text-primary dark:text-primary-dark">: </span>
+          </div>
+          {currentChallenge.name}
+        </H4>
+        {currentChallenge.content}
+      </div>
+      <div className="flex justify-between items-center mt-4">
+        {currentChallenge.hint ? (
+          <div>
+            <Button className="mr-2" onClick={toggleHint} active={showHint}>
+              <IconHint className="mr-1.5" />{' '}
+              {showHint ? 'Hide hint' : 'Show hint'}
+            </Button>
+            <Button
+              className="mr-2"
+              onClick={toggleSolution}
+              active={showSolution}>
+              <IconSolution className="mr-1.5" />{' '}
+              {showSolution ? 'Hide solution' : 'Show solution'}
+            </Button>
+          </div>
+        ) : (
+          !isRecipes && (
+            <Button
+              className="mr-2"
+              onClick={toggleSolution}
+              active={showSolution}>
+              <IconSolution className="mr-1.5" />{' '}
+              {showSolution ? 'Hide solution' : 'Show solution'}
+            </Button>
+          )
+        )}
+
+        {hasNextChallenge && (
+          <Button
+            className={cn(
+              isRecipes
+                ? 'bg-purple-50 border-purple-50 hover:bg-purple-50 focus:bg-purple-50 active:bg-purple-50'
+                : 'bg-link dark:bg-link-dark'
+            )}
+            onClick={handleClickNextChallenge}
+            active>
+            Next {isRecipes ? 'Example' : 'Challenge'}
+            <IconArrowSmall displayDirection="right" className="block ml-1.5" />
+          </Button>
+        )}
+      </div>
+      {showHint && currentChallenge.hint}
+
+      {showSolution && (
+        <div className="mt-6">
+          <h3 className="text-2xl font-bold text-primary dark:text-primary-dark">
+            Solution
+          </h3>
+          {currentChallenge.solution}
+          <div className="flex justify-between items-center mt-4">
+            <Button onClick={() => setShowSolution(false)}>
+              Close solution
+            </Button>
+            {hasNextChallenge && (
+              <Button
+                className={cn(
+                  isRecipes ? 'bg-purple-50' : 'bg-link dark:bg-link-dark'
+                )}
+                onClick={handleClickNextChallenge}
+                active>
+                Next Challenge
+                <IconArrowSmall
+                  displayDirection="right"
+                  className="block ml-1.5"
+                />
+              </Button>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/beta/src/components/MDX/Challenges/Challenges.tsx b/beta/src/components/MDX/Challenges/Challenges.tsx
new file mode 100644
index 000000000..25b1979fd
--- /dev/null
+++ b/beta/src/components/MDX/Challenges/Challenges.tsx
@@ -0,0 +1,157 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {Children, useRef, useEffect, useState} from 'react';
+import * as React from 'react';
+import cn from 'classnames';
+import {H2} from 'components/MDX/Heading';
+import {H4} from 'components/MDX/Heading';
+import {Challenge} from './Challenge';
+import {Navigation} from './Navigation';
+import {useRouter} from 'next/router';
+
+interface ChallengesProps {
+  children: React.ReactElement[];
+  isRecipes?: boolean;
+  titleText?: string;
+  titleId?: string;
+}
+
+export interface ChallengeContents {
+  id: string;
+  name: string;
+  order: number;
+  content: React.ReactNode;
+  solution: React.ReactNode;
+  hint?: React.ReactNode;
+}
+
+const parseChallengeContents = (
+  children: React.ReactElement[]
+): ChallengeContents[] => {
+  const contents: ChallengeContents[] = [];
+
+  if (!children) {
+    return contents;
+  }
+
+  let challenge: Partial<ChallengeContents> = {};
+  let content: React.ReactElement[] = [];
+  Children.forEach(children, (child) => {
+    const {props, type} = child;
+    switch ((type as any).mdxName) {
+      case 'Solution': {
+        challenge.solution = child;
+        challenge.content = content;
+        contents.push(challenge as ChallengeContents);
+        challenge = {};
+        content = [];
+        break;
+      }
+      case 'Hint': {
+        challenge.hint = child;
+        break;
+      }
+      case 'h4': {
+        challenge.order = contents.length + 1;
+        challenge.name = props.children;
+        challenge.id = props.id;
+        break;
+      }
+      default: {
+        content.push(child);
+      }
+    }
+  });
+
+  return contents;
+};
+
+enum QueuedScroll {
+  INIT = 'init',
+  NEXT = 'next',
+}
+
+export function Challenges({
+  children,
+  isRecipes,
+  titleText = isRecipes ? 'Try out some examples' : 'Try out some challenges',
+  titleId = isRecipes ? 'examples' : 'challenges',
+}: ChallengesProps) {
+  const challenges = parseChallengeContents(children);
+  const totalChallenges = challenges.length;
+  const scrollAnchorRef = useRef<HTMLDivElement>(null);
+  const queuedScrollRef = useRef<undefined | QueuedScroll>(QueuedScroll.INIT);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const currentChallenge = challenges[activeIndex];
+  const {asPath} = useRouter();
+
+  useEffect(() => {
+    if (queuedScrollRef.current === QueuedScroll.INIT) {
+      const initIndex = challenges.findIndex(
+        (challenge) => challenge.id === asPath.split('#')[1]
+      );
+      if (initIndex === -1) {
+        queuedScrollRef.current = undefined;
+      } else if (initIndex !== activeIndex) {
+        setActiveIndex(initIndex);
+      }
+    }
+    if (queuedScrollRef.current) {
+      scrollAnchorRef.current!.scrollIntoView({
+        block: 'start',
+        ...(queuedScrollRef.current === QueuedScroll.NEXT && {
+          behavior: 'smooth',
+        }),
+      });
+      queuedScrollRef.current = undefined;
+    }
+  }, [activeIndex, asPath, challenges]);
+
+  const handleChallengeChange = (index: number) => {
+    setActiveIndex(index);
+  };
+
+  const Heading = isRecipes ? H4 : H2;
+  return (
+    <div className="max-w-7xl mx-auto py-4">
+      <div
+        className={cn(
+          'border-gray-10 bg-card dark:bg-card-dark shadow-inner rounded-none -mx-5 sm:mx-auto sm:rounded-lg'
+        )}>
+        <div ref={scrollAnchorRef} className="py-2 px-5 sm:px-8 pb-0 md:pb-0">
+          <Heading
+            id={titleId}
+            className={cn(
+              'mb-2 leading-10 relative',
+              isRecipes
+                ? 'text-xl text-purple-50 dark:text-purple-30'
+                : 'text-3xl text-link'
+            )}>
+            {titleText}
+          </Heading>
+          {totalChallenges > 1 && (
+            <Navigation
+              currentChallenge={currentChallenge}
+              challenges={challenges}
+              handleChange={handleChallengeChange}
+              isRecipes={isRecipes}
+            />
+          )}
+        </div>
+        <Challenge
+          key={currentChallenge.id}
+          isRecipes={isRecipes}
+          currentChallenge={currentChallenge}
+          totalChallenges={totalChallenges}
+          hasNextChallenge={activeIndex < totalChallenges - 1}
+          handleClickNextChallenge={() => {
+            setActiveIndex((i) => i + 1);
+            queuedScrollRef.current = QueuedScroll.NEXT;
+          }}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/beta/src/components/MDX/Challenges/Navigation.tsx b/beta/src/components/MDX/Challenges/Navigation.tsx
new file mode 100644
index 000000000..e448828cf
--- /dev/null
+++ b/beta/src/components/MDX/Challenges/Navigation.tsx
@@ -0,0 +1,134 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {useRef, useCallback, useEffect, createRef} from 'react';
+import cn from 'classnames';
+import {IconChevron} from 'components/Icon/IconChevron';
+import {ChallengeContents} from './Challenges';
+import {debounce} from 'debounce';
+
+export function Navigation({
+  challenges,
+  handleChange,
+  currentChallenge,
+  isRecipes,
+}: {
+  challenges: ChallengeContents[];
+  handleChange: (index: number) => void;
+  currentChallenge: ChallengeContents;
+  isRecipes?: boolean;
+}) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const challengesNavRef = useRef(
+    challenges.map(() => createRef<HTMLButtonElement>())
+  );
+  const scrollPos = currentChallenge.order - 1;
+  const canScrollLeft = scrollPos > 0;
+  const canScrollRight = scrollPos < challenges.length - 1;
+
+  const handleScrollRight = () => {
+    if (scrollPos < challenges.length - 1) {
+      const currentNavRef = challengesNavRef.current[scrollPos + 1].current;
+      if (!currentNavRef) {
+        return;
+      }
+      if (containerRef.current) {
+        containerRef.current.scrollLeft = currentNavRef.offsetLeft;
+      }
+      handleChange(scrollPos + 1);
+    }
+  };
+
+  const handleScrollLeft = () => {
+    if (scrollPos > 0) {
+      const currentNavRef = challengesNavRef.current[scrollPos - 1].current;
+      if (!currentNavRef) {
+        return;
+      }
+      if (containerRef.current) {
+        containerRef.current.scrollLeft = currentNavRef.offsetLeft;
+      }
+      handleChange(scrollPos - 1);
+    }
+  };
+
+  const handleSelectNav = (index: number) => {
+    const currentNavRef = challengesNavRef.current[index].current;
+    if (containerRef.current) {
+      containerRef.current.scrollLeft = currentNavRef?.offsetLeft || 0;
+    }
+    handleChange(index);
+  };
+
+  const handleResize = useCallback(() => {
+    if (containerRef.current) {
+      const el = containerRef.current;
+      el.scrollLeft =
+        challengesNavRef.current[scrollPos].current?.offsetLeft || 0;
+    }
+  }, [containerRef, challengesNavRef, scrollPos]);
+
+  useEffect(() => {
+    handleResize();
+    const debouncedHandleResize = debounce(handleResize, 200);
+    window.addEventListener('resize', debouncedHandleResize);
+    return () => {
+      window.removeEventListener('resize', debouncedHandleResize);
+    };
+  }, [handleResize]);
+
+  return (
+    <div className="flex items-center justify-between">
+      <div className="overflow-hidden">
+        <div
+          ref={containerRef}
+          className="flex relative transition-transform content-box overflow-x-auto">
+          {challenges.map(({name, id, order}, index) => (
+            <button
+              className={cn(
+                'py-2 mr-4 text-base border-b-4 duration-100 ease-in transition whitespace-nowrap text-ellipsis',
+                isRecipes &&
+                  currentChallenge.id === id &&
+                  'text-purple-50 border-purple-50 hover:text-purple-50 dark:text-purple-30 dark:border-purple-30 dark:hover:text-purple-30',
+                !isRecipes &&
+                  currentChallenge.id === id &&
+                  'text-link border-link hover:text-link dark:text-link-dark dark:border-link-dark dark:hover:text-link-dark'
+              )}
+              onClick={() => handleSelectNav(index)}
+              key={`button-${id}`}
+              ref={challengesNavRef.current[index]}>
+              {order}. {name}
+            </button>
+          ))}
+        </div>
+      </div>
+      <div className="flex z-10 pb-2 pl-2">
+        <button
+          onClick={handleScrollLeft}
+          aria-label="Scroll left"
+          className={cn(
+            'bg-secondary-button dark:bg-secondary-button-dark h-8 px-2 rounded-l border-gray-20 border-r',
+            {
+              'text-primary dark:text-primary-dark': canScrollLeft,
+              'text-gray-30': !canScrollLeft,
+            }
+          )}>
+          <IconChevron displayDirection="left" />
+        </button>
+        <button
+          onClick={handleScrollRight}
+          aria-label="Scroll right"
+          className={cn(
+            'bg-secondary-button dark:bg-secondary-button-dark h-8 px-2 rounded-r',
+            {
+              'text-primary dark:text-primary-dark': canScrollRight,
+              'text-gray-30': !canScrollRight,
+            }
+          )}>
+          <IconChevron displayDirection="right" />
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/beta/src/components/MDX/Challenges/index.tsx b/beta/src/components/MDX/Challenges/index.tsx
new file mode 100644
index 000000000..413fd4611
--- /dev/null
+++ b/beta/src/components/MDX/Challenges/index.tsx
@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import * as React from 'react';
+export {Challenges} from './Challenges';
+
+export function Hint({children}: {children: React.ReactNode}) {
+  return <div>{children}</div>;
+}
+
+export function Solution({children}: {children: React.ReactNode}) {
+  return <div>{children}</div>;
+}
diff --git a/beta/src/components/MDX/CodeBlock/CodeBlock.tsx b/beta/src/components/MDX/CodeBlock/CodeBlock.tsx
new file mode 100644
index 000000000..dfd680563
--- /dev/null
+++ b/beta/src/components/MDX/CodeBlock/CodeBlock.tsx
@@ -0,0 +1,388 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import cn from 'classnames';
+import {highlightTree, HighlightStyle, tags} from '@codemirror/highlight';
+import {javascript} from '@codemirror/lang-javascript';
+import {html} from '@codemirror/lang-html';
+import {css} from '@codemirror/lang-css';
+import rangeParser from 'parse-numeric-range';
+import {CustomTheme} from '../Sandpack/Themes';
+
+interface InlineHiglight {
+  step: number;
+  line: number;
+  startColumn: number;
+  endColumn: number;
+}
+
+const jsxLang = javascript({jsx: true, typescript: false});
+const cssLang = css();
+const htmlLang = html();
+
+const CodeBlock = function CodeBlock({
+  children: {
+    props: {className = 'language-js', children: code = '', meta},
+  },
+  noMargin,
+}: {
+  children: React.ReactNode & {
+    props: {
+      className: string;
+      children?: string;
+      meta?: string;
+    };
+  };
+  className?: string;
+  noMargin?: boolean;
+}) {
+  code = code.trimEnd();
+  let lang = jsxLang;
+  if (className === 'language-css') {
+    lang = cssLang;
+  } else if (className === 'language-html') {
+    lang = htmlLang;
+  }
+  const tree = lang.language.parser.parse(code);
+  let tokenStarts = new Map();
+  let tokenEnds = new Map();
+  const highlightTheme = getSyntaxHighlight(CustomTheme);
+  highlightTree(tree, highlightTheme.match, (from, to, className) => {
+    tokenStarts.set(from, className);
+    tokenEnds.set(to, className);
+  });
+
+  const highlightedLines = new Map();
+  const lines = code.split('\n');
+  const lineDecorators = getLineDecorators(code, meta);
+  for (let decorator of lineDecorators) {
+    highlightedLines.set(decorator.line - 1, decorator.className);
+  }
+
+  const inlineDecorators = getInlineDecorators(code, meta);
+  const decoratorStarts = new Map();
+  const decoratorEnds = new Map();
+  for (let decorator of inlineDecorators) {
+    // Find where inline highlight starts and ends.
+    let decoratorStart = 0;
+    for (let i = 0; i < decorator.line - 1; i++) {
+      decoratorStart += lines[i].length + 1;
+    }
+    decoratorStart += decorator.startColumn;
+    const decoratorEnd =
+      decoratorStart + (decorator.endColumn - decorator.startColumn);
+    if (decoratorStarts.has(decoratorStart)) {
+      throw Error('Already opened decorator at ' + decoratorStart);
+    }
+    decoratorStarts.set(decoratorStart, decorator.className);
+    if (decoratorEnds.has(decoratorEnd)) {
+      throw Error('Already closed decorator at ' + decoratorEnd);
+    }
+    decoratorEnds.set(decoratorEnd, decorator.className);
+  }
+
+  // Produce output based on tokens and decorators.
+  // We assume tokens never overlap other tokens, and
+  // decorators never overlap with other decorators.
+  // However, tokens and decorators may mutually overlap.
+  // In that case, decorators always take precedence.
+  let currentDecorator = null;
+  let currentToken = null;
+  let buffer = '';
+  let lineIndex = 0;
+  let lineOutput = [];
+  let finalOutput = [];
+  for (let i = 0; i < code.length; i++) {
+    if (tokenEnds.has(i)) {
+      if (!currentToken) {
+        throw Error('Cannot close token at ' + i + ' because it was not open.');
+      }
+      if (!currentDecorator) {
+        lineOutput.push(
+          <span key={i + '/t'} className={currentToken}>
+            {buffer}
+          </span>
+        );
+        buffer = '';
+      }
+      currentToken = null;
+    }
+    if (decoratorEnds.has(i)) {
+      if (!currentDecorator) {
+        throw Error(
+          'Cannot close decorator at ' + i + ' because it was not open.'
+        );
+      }
+      lineOutput.push(
+        <span key={i + '/d'} className={currentDecorator}>
+          {buffer}
+        </span>
+      );
+      buffer = '';
+      currentDecorator = null;
+    }
+    if (decoratorStarts.has(i)) {
+      if (currentDecorator) {
+        throw Error(
+          'Cannot open decorator at ' + i + ' before closing last one.'
+        );
+      }
+      if (currentToken) {
+        lineOutput.push(
+          <span key={i + 'd'} className={currentToken}>
+            {buffer}
+          </span>
+        );
+        buffer = '';
+      } else {
+        lineOutput.push(buffer);
+        buffer = '';
+      }
+      currentDecorator = decoratorStarts.get(i);
+    }
+    if (tokenStarts.has(i)) {
+      if (currentToken) {
+        throw Error('Cannot open token at ' + i + ' before closing last one.');
+      }
+      currentToken = tokenStarts.get(i);
+      if (!currentDecorator) {
+        lineOutput.push(buffer);
+        buffer = '';
+      }
+    }
+    if (code[i] === '\n') {
+      lineOutput.push(buffer);
+      buffer = '';
+      finalOutput.push(
+        <div
+          key={lineIndex}
+          className={'cm-line ' + (highlightedLines.get(lineIndex) ?? '')}>
+          {lineOutput}
+          <br />
+        </div>
+      );
+      lineOutput = [];
+      lineIndex++;
+    } else {
+      buffer += code[i];
+    }
+  }
+  if (currentDecorator) {
+    lineOutput.push(
+      <span key={'end/d'} className={currentDecorator}>
+        {buffer}
+      </span>
+    );
+  } else if (currentToken) {
+    lineOutput.push(
+      <span key={'end/t'} className={currentToken}>
+        {buffer}
+      </span>
+    );
+  } else {
+    lineOutput.push(buffer);
+  }
+  finalOutput.push(
+    <div
+      key={lineIndex}
+      className={'cm-line ' + (highlightedLines.get(lineIndex) ?? '')}>
+      {lineOutput}
+    </div>
+  );
+
+  return (
+    <div
+      className={cn(
+        'sandpack sandpack--codeblock',
+        'rounded-lg h-full w-full overflow-x-auto flex items-center bg-wash dark:bg-gray-95 shadow-lg',
+        !noMargin && 'my-8'
+      )}>
+      <div className="sp-wrapper">
+        <div className="sp-stack">
+          <div className="sp-code-editor">
+            <pre className="sp-cm sp-pristine sp-javascript flex align-start">
+              <code className="sp-pre-placeholder grow-[2]">{finalOutput}</code>
+            </pre>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CodeBlock;
+
+function classNameToken(name: string): string {
+  return `sp-syntax-${name}`;
+}
+
+function getSyntaxHighlight(theme: any): HighlightStyle {
+  return HighlightStyle.define([
+    {tag: tags.link, textdecorator: 'underline'},
+    {tag: tags.emphasis, fontStyle: 'italic'},
+    {tag: tags.strong, fontWeight: 'bold'},
+
+    {
+      tag: tags.keyword,
+      class: classNameToken('keyword'),
+    },
+    {
+      tag: [tags.atom, tags.number, tags.bool],
+      class: classNameToken('static'),
+    },
+    {
+      tag: tags.standard(tags.tagName),
+      class: classNameToken('tag'),
+    },
+    {tag: tags.variableName, class: classNameToken('plain')},
+    {
+      // Highlight function call
+      tag: tags.function(tags.variableName),
+      class: classNameToken('definition'),
+    },
+    {
+      // Highlight function definition differently (eg: functional component def in React)
+      tag: [tags.definition(tags.function(tags.variableName)), tags.tagName],
+      class: classNameToken('definition'),
+    },
+    {
+      tag: tags.propertyName,
+      class: classNameToken('property'),
+    },
+    {
+      tag: [tags.literal, tags.inserted],
+      class: classNameToken(theme.syntax.string ? 'string' : 'static'),
+    },
+    {
+      tag: tags.punctuation,
+      class: classNameToken('punctuation'),
+    },
+    {
+      tag: [tags.comment, tags.quote],
+      class: classNameToken('comment'),
+    },
+  ]);
+}
+
+function getLineDecorators(
+  code: string,
+  meta: string
+): Array<{
+  line: number;
+  className: string;
+}> {
+  if (!meta) {
+    return [];
+  }
+  const linesToHighlight = getHighlightLines(meta);
+  const highlightedLineConfig = linesToHighlight.map((line) => {
+    return {
+      className: 'bg-github-highlight dark:bg-opacity-10',
+      line,
+    };
+  });
+  return highlightedLineConfig;
+}
+
+function getInlineDecorators(
+  code: string,
+  meta: string
+): Array<{
+  step: number;
+  line: number;
+  startColumn: number;
+  endColumn: number;
+  className: string;
+}> {
+  if (!meta) {
+    return [];
+  }
+  const inlineHighlightLines = getInlineHighlights(meta, code);
+  const inlineHighlightConfig = inlineHighlightLines.map(
+    (line: InlineHiglight) => ({
+      ...line,
+      elementAttributes: {'data-step': `${line.step}`},
+      className: cn(
+        'code-step bg-opacity-10 dark:bg-opacity-20 relative rounded px-1 py-[1.5px] border-b-[2px] border-opacity-60',
+        {
+          'bg-blue-40 border-blue-40 text-blue-60 dark:text-blue-30':
+            line.step === 1,
+          'bg-yellow-40 border-yellow-40 text-yellow-60 dark:text-yellow-30':
+            line.step === 2,
+          'bg-purple-40 border-purple-40 text-purple-60 dark:text-purple-30':
+            line.step === 3,
+          'bg-green-40 border-green-40 text-green-60 dark:text-green-30':
+            line.step === 4,
+        }
+      ),
+    })
+  );
+  return inlineHighlightConfig;
+}
+
+/**
+ *
+ * @param meta string provided after the language in a markdown block
+ * @returns array of lines to highlight
+ * @example
+ * ```js {1-3,7} [[1, 1, 20, 33], [2, 4, 4, 8]] App.js active
+ * ...
+ * ```
+ *
+ * -> The meta is `{1-3,7} [[1, 1, 20, 33], [2, 4, 4, 8]] App.js active`
+ */
+function getHighlightLines(meta: string): number[] {
+  const HIGHLIGHT_REGEX = /{([\d,-]+)}/;
+  const parsedMeta = HIGHLIGHT_REGEX.exec(meta);
+  if (!parsedMeta) {
+    return [];
+  }
+  return rangeParser(parsedMeta[1]);
+}
+
+/**
+ *
+ * @param meta string provided after the language in a markdown block
+ * @returns InlineHighlight[]
+ * @example
+ * ```js {1-3,7} [[1, 1, 'count'], [2, 4, 'setCount']] App.js active
+ * ...
+ * ```
+ *
+ * -> The meta is `{1-3,7} [[1, 1, 'count', [2, 4, 'setCount']] App.js active`
+ */
+function getInlineHighlights(meta: string, code: string) {
+  const INLINE_HIGHT_REGEX = /(\[\[.*\]\])/;
+  const parsedMeta = INLINE_HIGHT_REGEX.exec(meta);
+  if (!parsedMeta) {
+    return [];
+  }
+
+  const lines = code.split('\n');
+  const encodedHiglights = JSON.parse(parsedMeta[1]);
+  return encodedHiglights.map(([step, lineNo, substr, fromIndex]: any[]) => {
+    const line = lines[lineNo - 1];
+    let index = line.indexOf(substr);
+    const lastIndex = line.lastIndexOf(substr);
+    if (index !== lastIndex) {
+      if (fromIndex === undefined) {
+        throw Error(
+          "Found '" +
+            substr +
+            "' twice. Specify fromIndex as the fourth value in the tuple."
+        );
+      }
+      index = line.indexOf(substr, fromIndex);
+    }
+    if (index === -1) {
+      throw Error("Could not find: '" + substr + "'");
+    }
+    return {
+      step,
+      line: lineNo,
+      startColumn: index,
+      endColumn: index + substr.length,
+    };
+  });
+}
diff --git a/beta/src/components/MDX/CodeBlock/index.tsx b/beta/src/components/MDX/CodeBlock/index.tsx
new file mode 100644
index 000000000..e449e6b9e
--- /dev/null
+++ b/beta/src/components/MDX/CodeBlock/index.tsx
@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import * as React from 'react';
+import cn from 'classnames';
+import {lazy, memo, Suspense} from 'react';
+const CodeBlock = lazy(() => import('./CodeBlock'));
+
+export default memo(function CodeBlockWrapper(props: {
+  children: React.ReactNode & {
+    props: {
+      className: string;
+      children: string;
+      meta?: string;
+    };
+  };
+  isFromPackageImport: boolean;
+  noMargin?: boolean;
+  noMarkers?: boolean;
+}): any {
+  const {children, isFromPackageImport} = props;
+  return (
+    <Suspense
+      fallback={
+        <pre
+          className={cn(
+            'rounded-lg leading-6 h-full w-full overflow-x-auto flex items-center bg-wash dark:bg-gray-95 shadow-lg text-[13.6px] overflow-hidden',
+            !isFromPackageImport && 'my-8'
+          )}>
+          <div className="py-[18px] pl-5 font-normal ">
+            <p className="sp-pre-placeholder overflow-hidden">{children}</p>
+          </div>
+        </pre>
+      }>
+      <CodeBlock {...props} />
+    </Suspense>
+  );
+});
diff --git a/beta/src/components/MDX/CodeDiagram.tsx b/beta/src/components/MDX/CodeDiagram.tsx
new file mode 100644
index 000000000..7a503f068
--- /dev/null
+++ b/beta/src/components/MDX/CodeDiagram.tsx
@@ -0,0 +1,41 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {Children} from 'react';
+import * as React from 'react';
+import CodeBlock from './CodeBlock';
+
+interface CodeDiagramProps {
+  children: React.ReactNode;
+  flip?: boolean;
+}
+
+export function CodeDiagram({children, flip = false}: CodeDiagramProps) {
+  const illustration = Children.toArray(children).filter((child: any) => {
+    return child.type === 'img';
+  });
+  const content = Children.toArray(children).map((child: any) => {
+    if (child.type?.mdxName === 'pre') {
+      return <CodeBlock {...child.props} noMargin={true} noMarkers={true} />;
+    } else if (child.type === 'img') {
+      return null;
+    } else {
+      return child;
+    }
+  });
+  if (flip) {
+    return (
+      <section className="my-8 grid grid-cols-1 lg:grid-cols-2 gap-x-8 gap-y-4">
+        {illustration}
+        <div className="flex flex-col justify-center">{content}</div>
+      </section>
+    );
+  }
+  return (
+    <section className="my-8 grid grid-cols-1 lg:grid-cols-2 gap-x-8 gap-y-4">
+      <div className="flex flex-col justify-center">{content}</div>
+      <div className="py-4">{illustration}</div>
+    </section>
+  );
+}
diff --git a/beta/src/components/MDX/ConsoleBlock.tsx b/beta/src/components/MDX/ConsoleBlock.tsx
new file mode 100644
index 000000000..2ec393f03
--- /dev/null
+++ b/beta/src/components/MDX/ConsoleBlock.tsx
@@ -0,0 +1,76 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {isValidElement} from 'react';
+import * as React from 'react';
+import cn from 'classnames';
+import {IconWarning} from '../Icon/IconWarning';
+import {IconError} from '../Icon/IconError';
+
+type LogLevel = 'warning' | 'error' | 'info';
+
+interface ConsoleBlockProps {
+  level?: LogLevel;
+  children: React.ReactNode;
+}
+
+const Box = ({
+  width = '60px',
+  height = '17px',
+  className,
+  customStyles,
+}: {
+  width?: string;
+  height?: string;
+  className?: string;
+  customStyles?: Record<string, string>;
+}) => (
+  <div className={className} style={{width, height, ...customStyles}}></div>
+);
+
+function ConsoleBlock({level = 'error', children}: ConsoleBlockProps) {
+  let message: React.ReactNode | null;
+  if (typeof children === 'string') {
+    message = children;
+  } else if (isValidElement(children)) {
+    message = children.props.children;
+  }
+
+  return (
+    <div className="mb-4 text-secondary" translate="no">
+      <div className="flex w-full rounded-t-lg bg-gray-200 dark:bg-gray-80">
+        <div className="px-4 py-2 border-gray-300 dark:border-gray-90 border-r">
+          <Box className="bg-gray-300 dark:bg-gray-90" width="15px" />
+        </div>
+        <div className="flex text-sm px-4">
+          <div className="border-b-2 border-gray-300 dark:border-gray-90">
+            Console
+          </div>
+          <div className="px-4 py-2 flex">
+            <Box className="mr-2 bg-gray-300 dark:bg-gray-90" />
+            <Box className="mr-2 hidden md:block bg-gray-300 dark:bg-gray-90" />
+            <Box className="hidden md:block bg-gray-300 dark:bg-gray-90" />
+          </div>
+        </div>
+      </div>
+      <div
+        className={cn(
+          'flex px-4 pt-4 pb-6 items-center content-center font-mono text-code rounded-b-md',
+          {
+            'bg-red-30 text-red-50 dark:text-red-30 bg-opacity-5':
+              level === 'error',
+            'bg-yellow-5 text-yellow-50': level === 'warning',
+            'bg-gray-5 text-secondary dark:text-secondary-dark':
+              level === 'info',
+          }
+        )}>
+        {level === 'error' && <IconError className="self-start mt-1.5" />}
+        {level === 'warning' && <IconWarning className="self-start mt-1" />}
+        <div className="px-3">{message}</div>
+      </div>
+    </div>
+  );
+}
+
+export default ConsoleBlock;
diff --git a/beta/src/components/MDX/Diagram.tsx b/beta/src/components/MDX/Diagram.tsx
new file mode 100644
index 000000000..7920661da
--- /dev/null
+++ b/beta/src/components/MDX/Diagram.tsx
@@ -0,0 +1,60 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import Image from 'next/image';
+
+interface DiagramProps {
+  name: string;
+  alt: string;
+  height: number;
+  width: number;
+  children: string;
+  captionPosition: 'top' | 'bottom' | null;
+}
+
+function Caption({text}: {text: string}) {
+  return (
+    <div className="w-full table">
+      <figcaption className="p-1 sm:p-2 mt-0 sm:mt-0 text-gray-40 text-base lg:text-lg text-center leading-tight table-caption">
+        {text}
+      </figcaption>
+    </div>
+  );
+}
+
+export function Diagram({
+  name,
+  alt,
+  height,
+  width,
+  children,
+  captionPosition,
+}: DiagramProps) {
+  return (
+    <figure className="flex flex-col px-0 p-0 sm:p-10 first:mt-0 mt-10 sm:mt-0 justify-center items-center">
+      {captionPosition === 'top' && <Caption text={children} />}
+      <div className="dark-image">
+        <Image
+          src={`/images/docs/diagrams/${name}.dark.png`}
+          alt={alt}
+          height={height}
+          width={width}
+        />
+      </div>
+      <div className="light-image">
+        <Image
+          src={`/images/docs/diagrams/${name}.png`}
+          alt={alt}
+          height={height}
+          width={width}
+        />
+      </div>
+      {(!captionPosition || captionPosition === 'bottom') && (
+        <Caption text={children} />
+      )}
+    </figure>
+  );
+}
+
+export default Diagram;
diff --git a/beta/src/components/MDX/DiagramGroup.tsx b/beta/src/components/MDX/DiagramGroup.tsx
new file mode 100644
index 000000000..6c5130a3d
--- /dev/null
+++ b/beta/src/components/MDX/DiagramGroup.tsx
@@ -0,0 +1,19 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {ReactNode} from 'react';
+
+interface DiagramGroupProps {
+  children: ReactNode;
+}
+
+export function DiagramGroup({children}: DiagramGroupProps) {
+  return (
+    <div className="flex flex-col sm:flex-row py-2 sm:p-0 sm:space-y-0 justify-center items-start sm:items-center w-full">
+      {children}
+    </div>
+  );
+}
+
+export default DiagramGroup;
diff --git a/beta/src/components/MDX/ExpandableCallout.tsx b/beta/src/components/MDX/ExpandableCallout.tsx
new file mode 100644
index 000000000..6662cbd75
--- /dev/null
+++ b/beta/src/components/MDX/ExpandableCallout.tsx
@@ -0,0 +1,85 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {useRef} from 'react';
+import * as React from 'react';
+import cn from 'classnames';
+import {IconNote} from '../Icon/IconNote';
+import {IconWarning} from '../Icon/IconWarning';
+import {IconPitfall} from '../Icon/IconPitfall';
+
+type CalloutVariants = 'deprecated' | 'pitfall' | 'note' | 'wip';
+
+interface ExpandableCalloutProps {
+  children: React.ReactNode;
+  type: CalloutVariants;
+}
+
+const variantMap = {
+  deprecated: {
+    title: 'Deprecated',
+    Icon: IconWarning,
+    containerClasses: 'bg-red-5 dark:bg-red-60 dark:bg-opacity-20',
+    textColor: 'text-red-50 dark:text-red-40',
+    overlayGradient:
+      'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)',
+  },
+  note: {
+    title: 'Note',
+    Icon: IconNote,
+    containerClasses:
+      'bg-green-5 dark:bg-green-60 dark:bg-opacity-20 text-primary dark:text-primary-dark text-lg',
+    textColor: 'text-green-60 dark:text-green-40',
+    overlayGradient:
+      'linear-gradient(rgba(245, 249, 248, 0), rgba(245, 249, 248, 1)',
+  },
+  pitfall: {
+    title: 'Pitfall',
+    Icon: IconPitfall,
+    containerClasses: 'bg-yellow-5 dark:bg-yellow-60 dark:bg-opacity-20',
+    textColor: 'text-yellow-50 dark:text-yellow-40',
+    overlayGradient:
+      'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)',
+  },
+  wip: {
+    title: 'Under Construction',
+    Icon: IconNote,
+    containerClasses: 'bg-yellow-5 dark:bg-yellow-60 dark:bg-opacity-20',
+    textColor: 'text-yellow-50 dark:text-yellow-40',
+    overlayGradient:
+      'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)',
+  },
+};
+
+function ExpandableCallout({children, type}: ExpandableCalloutProps) {
+  const contentRef = useRef<HTMLDivElement>(null);
+  const variant = variantMap[type];
+
+  return (
+    <div
+      className={cn(
+        'expandable-callout',
+        'pt-8 pb-4 px-5 sm:px-8 my-8 relative rounded-none shadow-inner -mx-5 sm:mx-auto sm:rounded-lg',
+        variant.containerClasses
+      )}>
+      <h3 className={cn('mb-2 text-2xl font-bold', variant.textColor)}>
+        <variant.Icon
+          className={cn('inline mr-3 mb-1 text-lg', variant.textColor)}
+        />
+        {variant.title}
+      </h3>
+      <div className="relative">
+        <div ref={contentRef} className="py-2">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+ExpandableCallout.defaultProps = {
+  type: 'note',
+};
+
+export default ExpandableCallout;
diff --git a/beta/src/components/MDX/ExpandableExample.tsx b/beta/src/components/MDX/ExpandableExample.tsx
new file mode 100644
index 000000000..1056c52b7
--- /dev/null
+++ b/beta/src/components/MDX/ExpandableExample.tsx
@@ -0,0 +1,115 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import * as React from 'react';
+import cn from 'classnames';
+import {IconChevron} from '../Icon/IconChevron';
+import {IconDeepDive} from '../Icon/IconDeepDive';
+import {IconCodeBlock} from '../Icon/IconCodeBlock';
+import {Button} from '../Button';
+import {H4} from './Heading';
+import {useRouter} from 'next/router';
+import {useEffect, useRef, useState} from 'react';
+
+interface ExpandableExampleProps {
+  children: React.ReactNode;
+  excerpt?: string;
+  type: 'DeepDive' | 'Example';
+}
+
+function ExpandableExample({children, excerpt, type}: ExpandableExampleProps) {
+  if (!Array.isArray(children) || children[0].type.mdxName !== 'h4') {
+    throw Error(
+      `Expandable content ${type} is missing a corresponding title at the beginning`
+    );
+  }
+  const isDeepDive = type === 'DeepDive';
+  const isExample = type === 'Example';
+  const id = children[0].props.id;
+
+  const {asPath} = useRouter();
+  const shouldAutoExpand = id === asPath.split('#')[1];
+  const queuedExpandRef = useRef<boolean>(shouldAutoExpand);
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  useEffect(() => {
+    if (queuedExpandRef.current) {
+      queuedExpandRef.current = false;
+      setIsExpanded(true);
+    }
+  }, []);
+
+  return (
+    <details
+      open={isExpanded}
+      onToggle={(e: any) => {
+        setIsExpanded(e.currentTarget!.open);
+      }}
+      className={cn('my-12 rounded-lg shadow-inner relative', {
+        'dark:bg-opacity-20 dark:bg-purple-60 bg-purple-5': isDeepDive,
+        'dark:bg-opacity-20 dark:bg-yellow-60 bg-yellow-5': isExample,
+      })}>
+      <summary
+        className="list-none p-8"
+        tabIndex={-1 /* there's a button instead */}
+        onClick={(e) => {
+          // We toggle using a button instead of this whole area,
+          // with an escape case for the header anchor link
+          if (!(e.target instanceof SVGElement)) {
+            e.preventDefault();
+          }
+        }}>
+        <h5
+          className={cn('mb-4 uppercase font-bold flex items-center text-sm', {
+            'dark:text-purple-30 text-purple-50': isDeepDive,
+            'dark:text-yellow-30 text-yellow-60': isExample,
+          })}>
+          {isDeepDive && (
+            <>
+              <IconDeepDive className="inline mr-2 dark:text-purple-30 text-purple-40" />
+              Deep Dive
+            </>
+          )}
+          {isExample && (
+            <>
+              <IconCodeBlock className="inline mr-2 dark:text-yellow-30 text-yellow-50" />
+              Example
+            </>
+          )}
+        </h5>
+        <div className="mb-4">
+          <H4
+            id={id}
+            className="text-xl font-bold text-primary dark:text-primary-dark">
+            {children[0].props.children}
+          </H4>
+          {excerpt && <div>{excerpt}</div>}
+        </div>
+        <Button
+          active={true}
+          className={cn({
+            'bg-purple-50 border-purple-50 hover:bg-purple-40 focus:bg-purple-50 active:bg-purple-50':
+              isDeepDive,
+            'bg-yellow-50 border-yellow-50 hover:bg-yellow-40 focus:bg-yellow-50 active:bg-yellow-50':
+              isExample,
+          })}
+          onClick={() => setIsExpanded((current) => !current)}>
+          <span className="mr-1">
+            <IconChevron displayDirection={isExpanded ? 'up' : 'down'} />
+          </span>
+          {isExpanded ? 'Hide Details' : 'Show Details'}
+        </Button>
+      </summary>
+      <div
+        className={cn('p-8 border-t', {
+          'dark:border-purple-60 border-purple-10 ': isDeepDive,
+          'dark:border-yellow-60 border-yellow-50': isExample,
+        })}>
+        {children.slice(1)}
+      </div>
+    </details>
+  );
+}
+
+export default ExpandableExample;
diff --git a/beta/src/components/MDX/Heading.tsx b/beta/src/components/MDX/Heading.tsx
new file mode 100644
index 000000000..58fed55fe
--- /dev/null
+++ b/beta/src/components/MDX/Heading.tsx
@@ -0,0 +1,90 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import cn from 'classnames';
+import * as React from 'react';
+import {forwardRefWithAs} from 'utils/forwardRefWithAs';
+export interface HeadingProps {
+  className?: string;
+  isPageAnchor?: boolean;
+  children: React.ReactNode;
+  id?: string;
+  as?: any;
+}
+
+const Heading = forwardRefWithAs<HeadingProps, 'div'>(function Heading(
+  {as: Comp = 'div', className, children, id, isPageAnchor = true, ...props},
+  ref
+) {
+  let label = 'Link for this heading';
+  if (typeof children === 'string') {
+    label = 'Link for ' + children;
+  }
+
+  return (
+    <Comp id={id} {...props} ref={ref} className={cn('mdx-heading', className)}>
+      {children}
+      {isPageAnchor && (
+        <a
+          href={`#${id}`}
+          aria-label={label}
+          title={label}
+          className={cn(
+            'mdx-header-anchor',
+            Comp === 'h1' ? 'hidden' : 'inline-block'
+          )}>
+          <svg
+            width="1em"
+            height="1em"
+            viewBox="0 0 13 13"
+            xmlns="http://www.w3.org/2000/svg"
+            className="text-gray-70 ml-2 h-5 w-5">
+            <g fill="currentColor" fillRule="evenodd">
+              <path d="M7.778 7.975a2.5 2.5 0 0 0 .347-3.837L6.017 2.03a2.498 2.498 0 0 0-3.542-.007 2.5 2.5 0 0 0 .006 3.543l1.153 1.15c.07-.29.154-.563.25-.773.036-.077.084-.16.14-.25L3.18 4.85a1.496 1.496 0 0 1 .002-2.12 1.496 1.496 0 0 1 2.12 0l2.124 2.123a1.496 1.496 0 0 1-.333 2.37c.16.246.42.504.685.752z" />
+              <path d="M5.657 4.557a2.5 2.5 0 0 0-.347 3.837l2.108 2.108a2.498 2.498 0 0 0 3.542.007 2.5 2.5 0 0 0-.006-3.543L9.802 5.815c-.07.29-.154.565-.25.774-.036.076-.084.16-.14.25l.842.84c.585.587.59 1.532 0 2.122-.587.585-1.532.59-2.12 0L6.008 7.68a1.496 1.496 0 0 1 .332-2.372c-.16-.245-.42-.503-.685-.75z" />
+            </g>
+          </svg>
+        </a>
+      )}
+    </Comp>
+  );
+});
+
+export const H1 = ({className, ...props}: HeadingProps) => (
+  <Heading
+    as="h1"
+    className={cn(className, 'text-5xl font-bold leading-tight')}
+    {...props}
+  />
+);
+
+export const H2 = ({className, ...props}: HeadingProps) => (
+  <Heading
+    as="h2"
+    className={cn(
+      'text-3xl leading-10 text-primary dark:text-primary-dark font-bold my-6',
+      className
+    )}
+    {...props}
+  />
+);
+
+export const H3 = ({className, ...props}: HeadingProps) => (
+  <Heading
+    as="h3"
+    className={cn(
+      className,
+      'text-2xl leading-9 text-primary dark:text-primary-dark font-bold my-6'
+    )}
+    {...props}
+  />
+);
+
+export const H4 = ({className, ...props}: HeadingProps) => (
+  <Heading
+    as="h4"
+    className={cn(className, 'text-xl font-bold leading-9 my-4')}
+    {...props}
+  />
+);
diff --git a/beta/src/components/MDX/HomepageHero.tsx b/beta/src/components/MDX/HomepageHero.tsx
new file mode 100644
index 000000000..65c5c32a8
--- /dev/null
+++ b/beta/src/components/MDX/HomepageHero.tsx
@@ -0,0 +1,44 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {Logo} from 'components/Logo';
+import YouWillLearnCard from 'components/MDX/YouWillLearnCard';
+
+function HomepageHero() {
+  return (
+    <>
+      <div className="mt-8 lg:mt-10 mb-0 sm:mt-8 sm:mb-8 lg:mb-6 flex-col sm:flex-row flex grow items-start sm:items-center justify-start mx-auto max-w-4xl">
+        <Logo className="text-link dark:text-link-dark w-20 sm:w-28 mr-4 mb-4 sm:mb-0 h-auto" />
+        <div className="flex flex-wrap">
+          <h1 className="text-5xl mr-4 -mt-1 flex wrap font-bold leading-tight text-primary dark:text-primary-dark">
+            React Docs
+          </h1>
+          <div className="inline-flex self-center px-2 mt-1 bg-highlight dark:bg-highlight-dark w-auto rounded text-link dark:text-link-dark uppercase font-bold tracking-wide text-base whitespace-nowrap">
+            Beta
+          </div>
+        </div>
+      </div>
+      <section className="my-8 sm:my-10 grid grid-cols-1 lg:grid-cols-2 gap-x-8 gap-y-4">
+        <div className="flex flex-col justify-center">
+          <YouWillLearnCard title="Quick Start" path="/learn">
+            <p>
+              Learn how to think in React with step-by-step explanations and
+              interactive examples.
+            </p>
+          </YouWillLearnCard>
+        </div>
+        <div className="flex flex-col justify-center">
+          <YouWillLearnCard title="API Reference" path="/reference/react">
+            <p>
+              Look up the API of React Hooks, and see their shape with
+              color-coded signatures.
+            </p>
+          </YouWillLearnCard>
+        </div>
+      </section>
+    </>
+  );
+}
+
+export default HomepageHero;
diff --git a/beta/src/components/MDX/InlineCode.tsx b/beta/src/components/MDX/InlineCode.tsx
new file mode 100644
index 000000000..4a87c2a53
--- /dev/null
+++ b/beta/src/components/MDX/InlineCode.tsx
@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import cn from 'classnames';
+
+interface InlineCodeProps {
+  isLink: boolean;
+}
+function InlineCode({
+  isLink,
+  ...props
+}: JSX.IntrinsicElements['code'] & InlineCodeProps) {
+  return (
+    <code
+      className={cn(
+        'inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline',
+        {
+          'bg-gray-30 bg-opacity-10 py-px': !isLink,
+          'bg-highlight dark:bg-highlight-dark py-0': isLink,
+        }
+      )}
+      {...props}
+    />
+  );
+}
+
+export default InlineCode;
diff --git a/beta/src/components/MDX/Intro.tsx b/beta/src/components/MDX/Intro.tsx
new file mode 100644
index 000000000..6acde04d6
--- /dev/null
+++ b/beta/src/components/MDX/Intro.tsx
@@ -0,0 +1,19 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import * as React from 'react';
+
+export interface IntroProps {
+  children?: React.ReactNode;
+}
+
+function Intro({children}: IntroProps) {
+  return (
+    <div className="text-xl text-primary dark:text-primary-dark leading-relaxed">
+      {children}
+    </div>
+  );
+}
+
+export default Intro;
diff --git a/beta/src/components/MDX/Link.tsx b/beta/src/components/MDX/Link.tsx
new file mode 100644
index 000000000..e7acbaa62
--- /dev/null
+++ b/beta/src/components/MDX/Link.tsx
@@ -0,0 +1,55 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {Children, cloneElement} from 'react';
+import NextLink from 'next/link';
+import cn from 'classnames';
+
+import {ExternalLink} from 'components/ExternalLink';
+
+function Link({
+  href,
+  className,
+  children,
+  ...props
+}: JSX.IntrinsicElements['a']) {
+  const classes =
+    'inline text-link dark:text-link-dark border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal';
+  const modifiedChildren = Children.toArray(children).map((child: any) => {
+    if (child.type?.mdxName && child.type?.mdxName === 'inlineCode') {
+      return cloneElement(child, {
+        isLink: true,
+      });
+    }
+    return child;
+  });
+
+  if (!href) {
+    // eslint-disable-next-line jsx-a11y/anchor-has-content
+    return <a href={href} className={className} {...props} />;
+  }
+  return (
+    <>
+      {href.startsWith('https://') ? (
+        <ExternalLink href={href} className={cn(classes, className)} {...props}>
+          {modifiedChildren}
+        </ExternalLink>
+      ) : href.startsWith('#') ? (
+        // eslint-disable-next-line jsx-a11y/anchor-has-content
+        <a className={cn(classes, className)} href={href} {...props}>
+          {modifiedChildren}
+        </a>
+      ) : (
+        <NextLink href={href.replace('.html', '')}>
+          {/* eslint-disable-next-line jsx-a11y/anchor-has-content */}
+          <a className={cn(classes, className)} {...props}>
+            {modifiedChildren}
+          </a>
+        </NextLink>
+      )}
+    </>
+  );
+}
+
+export default Link;
diff --git a/beta/src/components/MDX/MDXComponents.module.css b/beta/src/components/MDX/MDXComponents.module.css
new file mode 100644
index 000000000..9840e77ce
--- /dev/null
+++ b/beta/src/components/MDX/MDXComponents.module.css
@@ -0,0 +1,43 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+/* Stop purging. */
+.markdown p {
+  @apply mb-4 leading-7 whitespace-pre-wrap text-gray-70;
+}
+
+.markdown ol {
+  @apply mb-4 ml-8 list-decimal;
+}
+
+.markdown ul {
+  @apply mb-4 ml-8 list-disc;
+}
+
+.markdown h1 {
+  @apply mb-6 text-4xl font-extrabold tracking-tight;
+}
+
+.markdown h2 {
+  @apply mt-12 mb-4 text-3xl font-extrabold tracking-tight;
+}
+.markdown h3 {
+  @apply mt-8 mb-3 text-2xl font-extrabold tracking-tight;
+}
+.markdown h4 {
+  @apply mt-8 mb-3 text-xl font-extrabold tracking-tight;
+}
+
+.markdown code {
+  @apply text-gray-70 bg-card dark:bg-card-dark   p-1 rounded-lg no-underline;
+  font-size: 90%;
+}
+
+.markdown li {
+  @apply mb-2;
+}
+
+.markdown a {
+  @apply inline text-link dark:text-link-dark break-normal border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal;
+}
diff --git a/beta/src/components/MDX/MDXComponents.tsx b/beta/src/components/MDX/MDXComponents.tsx
new file mode 100644
index 000000000..195f89ed8
--- /dev/null
+++ b/beta/src/components/MDX/MDXComponents.tsx
@@ -0,0 +1,420 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {Children, useContext, useMemo} from 'react';
+import * as React from 'react';
+import cn from 'classnames';
+
+import CodeBlock from './CodeBlock';
+import {CodeDiagram} from './CodeDiagram';
+import ConsoleBlock from './ConsoleBlock';
+import ExpandableCallout from './ExpandableCallout';
+import ExpandableExample from './ExpandableExample';
+import {H1, H2, H3, H4} from './Heading';
+import HomepageHero from './HomepageHero';
+import InlineCode from './InlineCode';
+import Intro from './Intro';
+import Link from './Link';
+import {PackageImport} from './PackageImport';
+import Recap from './Recap';
+import Sandpack from './Sandpack';
+import Diagram from './Diagram';
+import DiagramGroup from './DiagramGroup';
+import SimpleCallout from './SimpleCallout';
+import TerminalBlock from './TerminalBlock';
+import YouWillLearnCard from './YouWillLearnCard';
+import {Challenges, Hint, Solution} from './Challenges';
+import {IconNavArrow} from '../Icon/IconNavArrow';
+import ButtonLink from 'components/ButtonLink';
+import {TocContext} from './TocContext';
+import type {Toc, TocItem} from './TocContext';
+import {TeamMember} from './TeamMember';
+
+function CodeStep({children, step}: {children: any; step: number}) {
+  return (
+    <span
+      data-step={step}
+      className={cn(
+        'code-step bg-opacity-10 dark:bg-opacity-20 relative rounded px-[6px] py-[1.5px] border-b-[2px] border-opacity-60',
+        {
+          'bg-blue-40 border-blue-40 text-blue-60 dark:text-blue-30':
+            step === 1,
+          'bg-yellow-40 border-yellow-40 text-yellow-60 dark:text-yellow-30':
+            step === 2,
+          'bg-purple-40 border-purple-40 text-purple-60 dark:text-purple-30':
+            step === 3,
+          'bg-green-40 border-green-40 text-green-60 dark:text-green-30':
+            step === 4,
+        }
+      )}>
+      {children}
+    </span>
+  );
+}
+
+const P = (p: JSX.IntrinsicElements['p']) => (
+  <p className="whitespace-pre-wrap my-4" {...p} />
+);
+
+const Strong = (strong: JSX.IntrinsicElements['strong']) => (
+  <strong className="font-bold" {...strong} />
+);
+
+const OL = (p: JSX.IntrinsicElements['ol']) => (
+  <ol className="ml-6 my-3 list-decimal" {...p} />
+);
+const LI = (p: JSX.IntrinsicElements['li']) => (
+  <li className="leading-relaxed mb-1" {...p} />
+);
+const UL = (p: JSX.IntrinsicElements['ul']) => (
+  <ul className="ml-6 my-3 list-disc" {...p} />
+);
+
+const Divider = () => (
+  <hr className="my-6 block border-b border-t-0 border-border dark:border-border-dark" />
+);
+const Wip = ({children}: {children: React.ReactNode}) => (
+  <ExpandableCallout type="wip">{children}</ExpandableCallout>
+);
+const Pitfall = ({children}: {children: React.ReactNode}) => (
+  <ExpandableCallout type="pitfall">{children}</ExpandableCallout>
+);
+const Deprecated = ({children}: {children: React.ReactNode}) => (
+  <ExpandableCallout type="deprecated">{children}</ExpandableCallout>
+);
+const Note = ({children}: {children: React.ReactNode}) => (
+  <ExpandableCallout type="note">{children}</ExpandableCallout>
+);
+
+const Blockquote = ({
+  children,
+  ...props
+}: JSX.IntrinsicElements['blockquote']) => {
+  return (
+    <blockquote
+      className="mdx-blockquote py-4 px-8 my-8 shadow-inner bg-highlight dark:bg-highlight-dark bg-opacity-50 rounded-lg leading-6 flex relative"
+      {...props}>
+      <span className="block relative">{children}</span>
+    </blockquote>
+  );
+};
+
+function LearnMore({
+  children,
+  path,
+}: {
+  title: string;
+  path?: string;
+  children: any;
+}) {
+  return (
+    <>
+      <section className="p-8 mt-16 mb-16 flex flex-row shadow-inner justify-between items-center bg-card dark:bg-card-dark rounded-lg">
+        <div className="flex-col">
+          <h2 className="text-primary dark:text-primary-dark font-bold text-2xl leading-tight">
+            Ready to learn this topic?
+          </h2>
+          {children}
+          {path ? (
+            <ButtonLink
+              className="mt-1"
+              label="Read More"
+              href={path}
+              type="primary">
+              Read More
+              <IconNavArrow displayDirection="right" className="inline ml-1" />
+            </ButtonLink>
+          ) : null}
+        </div>
+      </section>
+      <hr className="border-border dark:border-border-dark mb-14" />
+    </>
+  );
+}
+
+function Math({children}: {children: any}) {
+  return (
+    <span
+      style={{
+        fontFamily: 'STIXGeneral-Regular, Georgia, serif',
+        fontSize: '1.2rem',
+      }}>
+      {children}
+    </span>
+  );
+}
+
+function MathI({children}: {children: any}) {
+  return (
+    <span
+      style={{
+        fontFamily: 'STIXGeneral-Italic, Georgia, serif',
+        fontSize: '1.2rem',
+      }}>
+      {children}
+    </span>
+  );
+}
+
+function YouWillLearn({
+  children,
+  isChapter,
+}: {
+  children: any;
+  isChapter?: boolean;
+}) {
+  let title = isChapter ? 'In this chapter' : 'You will learn';
+  return <SimpleCallout title={title}>{children}</SimpleCallout>;
+}
+
+// TODO: typing.
+function Recipes(props: any) {
+  return <Challenges {...props} isRecipes={true} />;
+}
+
+function AuthorCredit({
+  author = 'Rachel Lee Nabors',
+  authorLink = 'http://rachelnabors.com/',
+}: {
+  author: string;
+  authorLink: string;
+}) {
+  return (
+    <div className="sr-only group-hover:not-sr-only group-focus-within:not-sr-only hover:sr-only">
+      <p className="bg-card dark:bg-card-dark text-center text-sm text-secondary dark:text-secondary-dark leading-tight dark:text-secondary-dark p-2 rounded-lg absolute left-1/2 top-0 -translate-x-1/2 -translate-y-full group-hover:flex group-hover:opacity-100 after:content-[''] after:absolute after:left-1/2 after:top-[95%] after:-translate-x-1/2 after:border-8 after:border-x-transparent after:border-b-transparent after:border-t-card after:dark:border-t-card-dark opacity-0 transition-opacity duration-300">
+        <cite>
+          Illustrated by{' '}
+          {authorLink ? (
+            <a
+              target="_blank"
+              rel="noreferrer"
+              className="text-link dark:text-link-dark"
+              href={authorLink}>
+              {author}
+            </a>
+          ) : (
+            author
+          )}
+        </cite>
+      </p>
+    </div>
+  );
+}
+
+const IllustrationContext = React.createContext<{
+  isInBlock?: boolean;
+}>({
+  isInBlock: false,
+});
+
+function Illustration({
+  caption,
+  src,
+  alt,
+  author,
+  authorLink,
+}: {
+  caption: string;
+  src: string;
+  alt: string;
+  author: string;
+  authorLink: string;
+}) {
+  const {isInBlock} = React.useContext(IllustrationContext);
+
+  return (
+    <div className="relative group before:absolute before:-inset-y-16 before:inset-x-0 my-16 mx-0 2xl:mx-auto max-w-4xl 2xl:max-w-6xl">
+      <figure className="my-8 flex justify-center">
+        <img
+          src={src}
+          alt={alt}
+          style={{maxHeight: 300}}
+          className="bg-white rounded-lg"
+        />
+        {caption ? (
+          <figcaption className="text-center leading-tight mt-4">
+            {caption}
+          </figcaption>
+        ) : null}
+      </figure>
+      {!isInBlock && <AuthorCredit author={author} authorLink={authorLink} />}
+    </div>
+  );
+}
+
+const isInBlockTrue = {isInBlock: true};
+
+function IllustrationBlock({
+  sequential,
+  author,
+  authorLink,
+  children,
+}: {
+  author: string;
+  authorLink: string;
+  sequential: boolean;
+  children: any;
+}) {
+  const imageInfos = Children.toArray(children).map(
+    (child: any) => child.props
+  );
+  const images = imageInfos.map((info, index) => (
+    <figure key={index}>
+      <div className="bg-white rounded-lg p-4 flex-1 flex xl:p-6 justify-center items-center my-4">
+        <img src={info.src} alt={info.alt} height={info.height} />
+      </div>
+      {info.caption ? (
+        <figcaption className="text-secondary dark:text-secondary-dark text-center leading-tight mt-4">
+          {info.caption}
+        </figcaption>
+      ) : null}
+    </figure>
+  ));
+  return (
+    <IllustrationContext.Provider value={isInBlockTrue}>
+      <div className="relative group before:absolute before:-inset-y-16 before:inset-x-0 my-16 mx-0 2xl:mx-auto max-w-4xl 2xl:max-w-6xl">
+        {sequential ? (
+          <ol className="mdx-illustration-block flex">
+            {images.map((x: any, i: number) => (
+              <li className="flex-1" key={i}>
+                {x}
+              </li>
+            ))}
+          </ol>
+        ) : (
+          <div className="mdx-illustration-block">{images}</div>
+        )}
+        <AuthorCredit author={author} authorLink={authorLink} />
+      </div>
+    </IllustrationContext.Provider>
+  );
+}
+
+type NestedTocRoot = {
+  item: null;
+  children: Array<NestedTocNode>;
+};
+
+type NestedTocNode = {
+  item: TocItem;
+  children: Array<NestedTocNode>;
+};
+
+function calculateNestedToc(toc: Toc): NestedTocRoot {
+  const currentAncestors = new Map<number, NestedTocNode | NestedTocRoot>();
+  const root: NestedTocRoot = {
+    item: null,
+    children: [],
+  };
+  const startIndex = 1; // Skip "Overview"
+  for (let i = startIndex; i < toc.length; i++) {
+    const item = toc[i];
+    const currentParent: NestedTocNode | NestedTocRoot =
+      currentAncestors.get(item.depth - 1) || root;
+    const node: NestedTocNode = {
+      item,
+      children: [],
+    };
+    currentParent.children.push(node);
+    currentAncestors.set(item.depth, node);
+  }
+  return root;
+}
+
+function InlineToc() {
+  const toc = useContext(TocContext);
+  const root = useMemo(() => calculateNestedToc(toc), [toc]);
+  if (root.children.length < 2) {
+    return null;
+  }
+  return <InlineTocItem items={root.children} />;
+}
+
+function InlineTocItem({items}: {items: Array<NestedTocNode>}) {
+  return (
+    <UL>
+      {items.map((node) => (
+        <LI key={node.item.url}>
+          <Link href={node.item.url}>{node.item.text}</Link>
+          {node.children.length > 0 && <InlineTocItem items={node.children} />}
+        </LI>
+      ))}
+    </UL>
+  );
+}
+
+function LinkWithTodo({href, children, ...props}: JSX.IntrinsicElements['a']) {
+  if (href?.startsWith('TODO')) {
+    return children;
+  }
+
+  return (
+    <Link href={href} {...props}>
+      {children}
+    </Link>
+  );
+}
+
+export const MDXComponents = {
+  p: P,
+  strong: Strong,
+  blockquote: Blockquote,
+  ol: OL,
+  ul: UL,
+  li: LI,
+  h1: H1,
+  h2: H2,
+  h3: H3,
+  h4: H4,
+  hr: Divider,
+  a: LinkWithTodo,
+  code: InlineCode,
+  pre: CodeBlock,
+  CodeDiagram,
+  ConsoleBlock,
+  DeepDive: (props: {
+    children: React.ReactNode;
+    title: string;
+    excerpt: string;
+  }) => <ExpandableExample {...props} type="DeepDive" />,
+  Diagram,
+  DiagramGroup,
+  FullWidth({children}: {children: any}) {
+    return children;
+  },
+  MaxWidth({children}: {children: any}) {
+    return <div className="max-w-4xl ml-0 2xl:mx-auto">{children}</div>;
+  },
+  Pitfall,
+  Deprecated,
+  Wip,
+  HomepageHero,
+  Illustration,
+  IllustrationBlock,
+  Intro,
+  InlineToc,
+  LearnMore,
+  Math,
+  MathI,
+  Note,
+  PackageImport,
+  Recap,
+  Recipes,
+  Sandpack,
+  TeamMember,
+  TerminalBlock,
+  YouWillLearn,
+  YouWillLearnCard,
+  Challenges,
+  Hint,
+  Solution,
+  CodeStep,
+};
+
+for (let key in MDXComponents) {
+  if (MDXComponents.hasOwnProperty(key)) {
+    const MDXComponent: any = (MDXComponents as any)[key];
+    MDXComponent.mdxName = key;
+  }
+}
diff --git a/beta/src/components/MDX/PackageImport.tsx b/beta/src/components/MDX/PackageImport.tsx
new file mode 100644
index 000000000..5e2da820e
--- /dev/null
+++ b/beta/src/components/MDX/PackageImport.tsx
@@ -0,0 +1,38 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {Children} from 'react';
+import * as React from 'react';
+import CodeBlock from './CodeBlock';
+
+interface PackageImportProps {
+  children: React.ReactNode;
+}
+
+export function PackageImport({children}: PackageImportProps) {
+  const terminal = Children.toArray(children).filter((child: any) => {
+    return child.type?.mdxName !== 'pre';
+  });
+  const code = Children.toArray(children).map((child: any, i: number) => {
+    if (child.type?.mdxName === 'pre') {
+      return (
+        <CodeBlock
+          {...child.props}
+          isFromPackageImport
+          key={i}
+          noMargin={true}
+          noMarkers={true}
+        />
+      );
+    } else {
+      return null;
+    }
+  });
+  return (
+    <section className="my-8 grid grid-cols-1 lg:grid-cols-2 gap-x-8 gap-y-4">
+      <div className="flex flex-col justify-center">{terminal}</div>
+      <div className="flex flex-col justify-center">{code}</div>
+    </section>
+  );
+}
diff --git a/beta/src/components/MDX/Recap.tsx b/beta/src/components/MDX/Recap.tsx
new file mode 100644
index 000000000..d91ed48b4
--- /dev/null
+++ b/beta/src/components/MDX/Recap.tsx
@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import * as React from 'react';
+import {H2} from './Heading';
+
+interface RecapProps {
+  children: React.ReactNode;
+}
+
+function Recap({children}: RecapProps) {
+  return (
+    <section>
+      <H2 isPageAnchor id="recap">
+        Recap
+      </H2>
+      {children}
+    </section>
+  );
+}
+
+export default Recap;
diff --git a/beta/src/components/MDX/Sandpack/Console.tsx b/beta/src/components/MDX/Sandpack/Console.tsx
new file mode 100644
index 000000000..23194c870
--- /dev/null
+++ b/beta/src/components/MDX/Sandpack/Console.tsx
@@ -0,0 +1,242 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+import cn from 'classnames';
+import {useState, useRef, useEffect} from 'react';
+import {IconChevron} from 'components/Icon/IconChevron';
+
+import {SandpackCodeViewer, useSandpack} from '@codesandbox/sandpack-react';
+import type {SandpackMessageConsoleMethods} from '@codesandbox/sandpack-client';
+
+const getType = (
+  message: SandpackMessageConsoleMethods
+): 'info' | 'warning' | 'error' => {
+  if (message === 'log' || message === 'info') {
+    return 'info';
+  }
+
+  if (message === 'warn') {
+    return 'warning';
+  }
+
+  return 'error';
+};
+
+const getColor = (message: SandpackMessageConsoleMethods): string => {
+  if (message === 'warn') {
+    return 'text-yellow-50';
+  } else if (message === 'error') {
+    return 'text-red-40';
+  } else {
+    return 'text-secondary dark:text-secondary-dark';
+  }
+};
+
+// based on https://github.com/tmpfs/format-util/blob/0e62d430efb0a1c51448709abd3e2406c14d8401/format.js#L1
+// based on https://developer.mozilla.org/en-US/docs/Web/API/console#Using_string_substitutions
+// Implements s, d, i and f placeholders
+function formatStr(...inputArgs: any[]): any[] {
+  const maybeMessage = inputArgs[0];
+  if (typeof maybeMessage !== 'string') {
+    return inputArgs;
+  }
+  // If the first argument is a string, check for substitutions.
+  const args = inputArgs.slice(1);
+  let formatted: string = String(maybeMessage);
+  if (args.length) {
+    const REGEXP = /(%?)(%([jds]))/g;
+
+    formatted = formatted.replace(REGEXP, (match, escaped, ptn, flag) => {
+      let arg = args.shift();
+      switch (flag) {
+        case 's':
+          arg += '';
+          break;
+        case 'd':
+        case 'i':
+          arg = parseInt(arg, 10).toString();
+          break;
+        case 'f':
+          arg = parseFloat(arg).toString();
+          break;
+      }
+      if (!escaped) {
+        return arg;
+      }
+      args.unshift(arg);
+      return match;
+    });
+  }
+
+  // Arguments that remain after formatting.
+  if (args.length) {
+    for (let i = 0; i < args.length; i++) {
+      formatted += ' ' + String(args[i]);
+    }
+  }
+
+  // Update escaped %% values.
+  return [formatted.replace(/%{2,2}/g, '%')];
+}
+
+type ConsoleData = Array<{
+  data: Array<string | Record<string, string>>;
+  id: string;
+  method: SandpackMessageConsoleMethods;
+}>;
+
+const MAX_MESSAGE_COUNT = 100;
+
+export const SandpackConsole = ({visible}: {visible: boolean}) => {
+  const {listen} = useSandpack();
+  const [logs, setLogs] = useState<ConsoleData>([]);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    let isActive = true;
+    const unsubscribe = listen((message) => {
+      if (!isActive) {
+        console.warn('Received an unexpected log from Sandpack.');
+        return;
+      }
+      if (
+        (message.type === 'start' && message.firstLoad) ||
+        message.type === 'refresh'
+      ) {
+        setLogs([]);
+      }
+      if (message.type === 'console' && message.codesandbox) {
+        setLogs((prev) => {
+          const newLogs = message.log
+            .filter((consoleData) => {
+              if (!consoleData.method) {
+                return false;
+              }
+              if (
+                typeof consoleData.data[0] === 'string' &&
+                consoleData.data[0].indexOf('The above error occurred') !== -1
+              ) {
+                // Don't show React error addendum because
+                // we have a custom error overlay.
+                return false;
+              }
+              return true;
+            })
+            .map((consoleData) => {
+              return {
+                ...consoleData,
+                data: formatStr(...consoleData.data),
+              };
+            });
+          let messages = [...prev, ...newLogs];
+          while (messages.length > MAX_MESSAGE_COUNT) {
+            messages.shift();
+          }
+          return messages;
+        });
+      }
+    });
+
+    return () => {
+      unsubscribe();
+      isActive = false;
+    };
+  }, [listen]);
+
+  const [isExpanded, setIsExpanded] = useState(true);
+
+  useEffect(() => {
+    if (wrapperRef.current) {
+      wrapperRef.current.scrollTop = wrapperRef.current.scrollHeight;
+    }
+  }, [logs]);
+
+  if (!visible || logs.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="absolute dark:border-gray-700 bg-white dark:bg-gray-95 border-t bottom-0 w-full dark:text-white">
+      <div className="flex justify-between">
+        <button
+          className="flex items-center p-1"
+          onClick={() => setIsExpanded(!isExpanded)}>
+          <IconChevron displayDirection={isExpanded ? 'down' : 'right'} />
+          <span className="pl-1 text-sm">Console ({logs.length})</span>
+        </button>
+        <button
+          className="p-1"
+          onClick={() => {
+            setLogs([]);
+          }}>
+          <svg
+            viewBox="0 0 24 24"
+            width="18"
+            height="18"
+            stroke="currentColor"
+            strokeWidth="2"
+            fill="none"
+            strokeLinecap="round"
+            strokeLinejoin="round">
+            <circle cx="12" cy="12" r="10"></circle>
+            <line x1="4.93" y1="4.93" x2="19.07" y2="19.07"></line>
+          </svg>
+        </button>
+      </div>
+      {isExpanded && (
+        <div className="w-full h-full border-t bg-white dark:border-gray-700 dark:bg-gray-95 min-h-[28px] console">
+          <div className="max-h-40 h-auto overflow-auto" ref={wrapperRef}>
+            {logs.map(({data, id, method}) => {
+              return (
+                <div
+                  key={id}
+                  className={cn(
+                    'first:border-none border-t dark:border-gray-700 text-md p-1 pl-2 leading-6 font-mono min-h-[32px] whitespace-pre-wrap',
+                    `console-${getType(method)}`,
+                    getColor(method)
+                  )}>
+                  <span className="console-message">
+                    {data.map((msg, index) => {
+                      if (typeof msg === 'string') {
+                        return <span key={`${msg}-${index}`}>{msg}</span>;
+                      }
+
+                      let children;
+                      if (msg != null && typeof msg['@t'] === 'string') {
+                        // CodeSandbox wraps custom types
+                        children = msg['@t'];
+                      } else {
+                        try {
+                          children = JSON.stringify(msg, null, 2);
+                        } catch (error) {
+                          try {
+                            children = Object.prototype.toString.call(msg);
+                          } catch (err) {
+                            children = '[' + typeof msg + ']';
+                          }
+                        }
+                      }
+
+                      return (
+                        <span
+                          className={cn('console-span')}
+                          key={`${msg}-${index}`}>
+                          <SandpackCodeViewer
+                            initMode="user-visible"
+                            showTabs={false}
+                            // fileType="js"
+                            code={children}
+                          />
+                        </span>
+                      );
+                    })}
+                  </span>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/beta/src/components/MDX/Sandpack/CustomPreset.tsx b/beta/src/components/MDX/Sandpack/CustomPreset.tsx
new file mode 100644
index 000000000..7ef536579
--- /dev/null
+++ b/beta/src/components/MDX/Sandpack/CustomPreset.tsx
@@ -0,0 +1,148 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+import {memo, useRef, useState} from 'react';
+import {flushSync} from 'react-dom';
+import {
+  useSandpack,
+  useActiveCode,
+  SandpackCodeEditor,
+  // SandpackReactDevTools,
+  SandpackLayout,
+} from '@codesandbox/sandpack-react';
+import cn from 'classnames';
+
+import {IconChevron} from 'components/Icon/IconChevron';
+import {NavigationBar} from './NavigationBar';
+import {Preview} from './Preview';
+
+import {useSandpackLint} from './useSandpackLint';
+
+export const CustomPreset = memo(function CustomPreset({
+  showDevTools,
+  onDevToolsLoad,
+  devToolsLoaded,
+  providedFiles,
+}: {
+  showDevTools: boolean;
+  devToolsLoaded: boolean;
+  onDevToolsLoad: () => void;
+  providedFiles: Array<string>;
+}) {
+  const {lintErrors, lintExtensions} = useSandpackLint();
+  const {sandpack} = useSandpack();
+  const {code} = useActiveCode();
+  const {activeFile} = sandpack;
+  const lineCountRef = useRef<{[key: string]: number}>({});
+  if (!lineCountRef.current[activeFile]) {
+    lineCountRef.current[activeFile] = code.split('\n').length;
+  }
+  const lineCount = lineCountRef.current[activeFile];
+  const isExpandable = lineCount > 16;
+  return (
+    <SandboxShell
+      showDevTools={showDevTools}
+      onDevToolsLoad={onDevToolsLoad}
+      devToolsLoaded={devToolsLoaded}
+      providedFiles={providedFiles}
+      lintErrors={lintErrors}
+      lintExtensions={lintExtensions}
+      isExpandable={isExpandable}
+    />
+  );
+});
+
+const SandboxShell = memo(function SandboxShell({
+  showDevTools,
+  onDevToolsLoad,
+  devToolsLoaded,
+  providedFiles,
+  lintErrors,
+  lintExtensions,
+  isExpandable,
+}: {
+  showDevTools: boolean;
+  devToolsLoaded: boolean;
+  onDevToolsLoad: () => void;
+  providedFiles: Array<string>;
+  lintErrors: Array<any>;
+  lintExtensions: Array<any>;
+  isExpandable: boolean;
+}) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [isExpanded, setIsExpanded] = useState(false);
+  return (
+    <>
+      <div
+        className="shadow-lg dark:shadow-lg-dark rounded-lg"
+        ref={containerRef}>
+        <NavigationBar providedFiles={providedFiles} />
+        <SandpackLayout
+          className={cn(
+            showDevTools && devToolsLoaded && 'sp-layout-devtools',
+            !(isExpandable || isExpanded) && 'rounded-b-lg overflow-hidden',
+            isExpanded && 'sp-layout-expanded'
+          )}>
+          <Editor lintExtensions={lintExtensions} />
+          <Preview
+            className="order-last xl:order-2"
+            isExpanded={isExpanded}
+            lintErrors={lintErrors}
+          />
+          {(isExpandable || isExpanded) && (
+            <button
+              translate="yes"
+              className="sandpack-expand flex text-base justify-between dark:border-card-dark bg-wash dark:bg-card-dark items-center z-10 p-1 w-full order-2 xl:order-last border-b-1 relative top-0"
+              onClick={() => {
+                const nextIsExpanded = !isExpanded;
+                flushSync(() => {
+                  setIsExpanded(nextIsExpanded);
+                });
+                if (!nextIsExpanded && containerRef.current !== null) {
+                  // @ts-ignore
+                  if (containerRef.current.scrollIntoViewIfNeeded) {
+                    // @ts-ignore
+                    containerRef.current.scrollIntoViewIfNeeded();
+                  } else {
+                    containerRef.current.scrollIntoView({
+                      block: 'nearest',
+                      inline: 'nearest',
+                    });
+                  }
+                }
+              }}>
+              <span className="flex p-2 focus:outline-none text-primary dark:text-primary-dark leading-[20px]">
+                <IconChevron
+                  className="inline mr-1.5 text-xl"
+                  displayDirection={isExpanded ? 'up' : 'down'}
+                />
+                {isExpanded ? 'Show less' : 'Show more'}
+              </span>
+            </button>
+          )}
+        </SandpackLayout>
+
+        {/* {showDevTools && (
+          // @ts-ignore TODO(@danilowoz): support devtools
+          <SandpackReactDevTools onLoadModule={onDevToolsLoad} />
+        )} */}
+      </div>
+    </>
+  );
+});
+
+const Editor = memo(function Editor({
+  lintExtensions,
+}: {
+  lintExtensions: Array<any>;
+}) {
+  return (
+    <SandpackCodeEditor
+      showLineNumbers
+      showInlineErrors
+      showTabs={false}
+      showRunButton={false}
+      extensions={lintExtensions}
+    />
+  );
+});
diff --git a/beta/src/components/MDX/Sandpack/DownloadButton.tsx b/beta/src/components/MDX/Sandpack/DownloadButton.tsx
new file mode 100644
index 000000000..ef974b1af
--- /dev/null
+++ b/beta/src/components/MDX/Sandpack/DownloadButton.tsx
@@ -0,0 +1,105 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {useSyncExternalStore} from 'react';
+import {useSandpack} from '@codesandbox/sandpack-react';
+import {IconDownload} from '../../Icon/IconDownload';
+export interface DownloadButtonProps {}
+
+let supportsImportMap: boolean | void;
+
+function useSupportsImportMap() {
+  function subscribe() {
+    // It never updates.
+    return () => {};
+  }
+  function getCurrentValue() {
+    if (supportsImportMap === undefined) {
+      supportsImportMap =
+        (HTMLScriptElement as any).supports &&
+        (HTMLScriptElement as any).supports('importmap');
+    }
+    return supportsImportMap;
+  }
+  function getServerSnapshot() {
+    return false;
+  }
+
+  return useSyncExternalStore(subscribe, getCurrentValue, getServerSnapshot);
+}
+
+const SUPPORTED_FILES = ['/App.js', '/styles.css'];
+
+export function DownloadButton({
+  providedFiles,
+}: {
+  providedFiles: Array<string>;
+}) {
+  const {sandpack} = useSandpack();
+  const supported = useSupportsImportMap();
+  if (!supported) {
+    return null;
+  }
+  if (providedFiles.some((file) => !SUPPORTED_FILES.includes(file))) {
+    return null;
+  }
+
+  const downloadHTML = () => {
+    const css = sandpack.files['/styles.css']?.code ?? '';
+    const code = sandpack.files['/App.js']?.code ?? '';
+    const blob = new Blob([
+      `<!DOCTYPE html>
+<html>
+<body>
+  <div id="root"></div>
+</body>
+<!-- This setup is not suitable for production. -->
+<!-- Only use it in development! -->
+<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+<script type="importmap">
+{
+  "imports": {
+    "react": "https://esm.sh/react?dev",
+    "react-dom/client": "https://esm.sh/react-dom/client?dev"
+  }
+}
+</script>
+<script type="text/babel" data-type="module">
+import React, { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+${code.replace('export default ', 'let App = ')}
+
+const root = createRoot(document.getElementById('root'));
+root.render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);
+</script>
+<style>
+${css}
+</style>
+</html>`,
+    ]);
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.style.display = 'none';
+    a.href = url;
+    a.download = 'sandbox.html';
+    document.body.appendChild(a);
+    a.click();
+    window.URL.revokeObjectURL(url);
+  };
+
+  return (
+    <button
+      className="text-sm text-primary dark:text-primary-dark inline-flex items-center hover:text-link duration-100 ease-in transition mx-1"
+      onClick={downloadHTML}
+      title="Download Sandbox"
+      type="button">
+      <IconDownload className="inline mr-1" /> Download
+    </button>
+  );
+}
diff --git a/beta/src/components/MDX/Sandpack/ErrorMessage.tsx b/beta/src/components/MDX/Sandpack/ErrorMessage.tsx
new file mode 100644
index 000000000..7c67ee461
--- /dev/null
+++ b/beta/src/components/MDX/Sandpack/ErrorMessage.tsx
@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+interface ErrorType {
+  title?: string;
+  message: string;
+  column?: number;
+  line?: number;
+  path?: string;
+}
+
+export function ErrorMessage({error, ...props}: {error: ErrorType}) {
+  const {message, title} = error;
+
+  return (
+    <div className="bg-white border-2 border-red-40 rounded-lg p-6" {...props}>
+      <h2 className="text-red-40 text-xl mb-4">{title || 'Error'}</h2>
+      <pre className="text-secondary whitespace-pre-wrap break-words leading-tight">
+        {message}
+      </pre>
+    </div>
+  );
+}
diff --git a/beta/src/components/MDX/Sandpack/LoadingOverlay.tsx b/beta/src/components/MDX/Sandpack/LoadingOverlay.tsx
new file mode 100644
index 000000000..7c261866d
--- /dev/null
+++ b/beta/src/components/MDX/Sandpack/LoadingOverlay.tsx
@@ -0,0 +1,142 @@
+import {useState} from 'react';
+
+import {
+  LoadingOverlayState,
+  OpenInCodeSandboxButton,
+  useSandpack,
+} from '@codesandbox/sandpack-react';
+import {useEffect} from 'react';
+
+const FADE_ANIMATION_DURATION = 200;
+
+export const LoadingOverlay = ({
+  clientId,
+  dependenciesLoading,
+  forceLoading,
+}: {
+  clientId: string;
+  dependenciesLoading: boolean;
+  forceLoading: boolean;
+} & React.HTMLAttributes<HTMLDivElement>): JSX.Element | null => {
+  const loadingOverlayState = useLoadingOverlayState(
+    clientId,
+    dependenciesLoading,
+    forceLoading
+  );
+
+  if (loadingOverlayState === 'HIDDEN') {
+    return null;
+  }
+
+  if (loadingOverlayState === 'TIMEOUT') {
+    return (
+      <div className="sp-overlay sp-error">
+        <div className="sp-error-message">
+          Unable to establish connection with the sandpack bundler. Make sure
+          you are online or try again later. If the problem persists, please
+          report it via{' '}
+          <a
+            className="sp-error-message"
+            href="mailto:hello@codesandbox.io?subject=Sandpack Timeout Error">
+            email
+          </a>{' '}
+          or submit an issue on{' '}
+          <a
+            className="sp-error-message"
+            href="https://github.com/codesandbox/sandpack/issues"
+            rel="noreferrer noopener"
+            target="_blank">
+            GitHub.
+          </a>
+        </div>
+      </div>
+    );
+  }
+
+  const stillLoading =
+    loadingOverlayState === 'LOADING' || loadingOverlayState === 'PRE_FADING';
+
+  return (
+    <div
+      className="sp-overlay sp-loading"
+      style={{
+        opacity: stillLoading ? 1 : 0,
+        transition: `opacity ${FADE_ANIMATION_DURATION}ms ease-out`,
+      }}>
+      <div className="sp-cube-wrapper" title="Open in CodeSandbox">
+        <OpenInCodeSandboxButton />
+        <div className="sp-cube">
+          <div className="sp-sides">
+            <div className="top" />
+            <div className="right" />
+            <div className="bottom" />
+            <div className="left" />
+            <div className="front" />
+            <div className="back" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const useLoadingOverlayState = (
+  clientId: string,
+  dependenciesLoading: boolean,
+  forceLoading: boolean
+): LoadingOverlayState => {
+  const {sandpack, listen} = useSandpack();
+  const [state, setState] = useState<LoadingOverlayState>('HIDDEN');
+
+  if (state !== 'LOADING' && forceLoading) {
+    setState('LOADING');
+  }
+
+  /**
+   * Sandpack listener
+   */
+  const sandpackIdle = sandpack.status === 'idle';
+  useEffect(() => {
+    const unsubscribe = listen((message) => {
+      if (message.type === 'done') {
+        setState((prev) => {
+          return prev === 'LOADING' ? 'PRE_FADING' : 'HIDDEN';
+        });
+      }
+    }, clientId);
+
+    return () => {
+      unsubscribe();
+    };
+  }, [listen, clientId, sandpackIdle]);
+
+  /**
+   * Fading transient state
+   */
+  useEffect(() => {
+    let fadeTimeout: ReturnType<typeof setTimeout>;
+
+    if (state === 'PRE_FADING' && !dependenciesLoading) {
+      setState('FADING');
+    } else if (state === 'FADING') {
+      fadeTimeout = setTimeout(
+        () => setState('HIDDEN'),
+        FADE_ANIMATION_DURATION
+      );
+    }
+
+    return () => {
+      clearTimeout(fadeTimeout);
+    };
+  }, [state, dependenciesLoading]);
+
+  if (sandpack.status === 'timeout') {
+    return 'TIMEOUT';
+  }
+
+  if (sandpack.status !== 'running') {
+    return 'HIDDEN';
+  }
+
+  return state;
+};
diff --git a/beta/src/components/MDX/Sandpack/NavigationBar.tsx b/beta/src/components/MDX/Sandpack/NavigationBar.tsx
new file mode 100644
index 000000000..8c884a5d8
--- /dev/null
+++ b/beta/src/components/MDX/Sandpack/NavigationBar.tsx
@@ -0,0 +1,188 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {
+  useRef,
+  useInsertionEffect,
+  useCallback,
+  useState,
+  useEffect,
+  Fragment,
+} from 'react';
+import cn from 'classnames';
+import {
+  FileTabs,
+  useSandpack,
+  useSandpackNavigation,
+} from '@codesandbox/sandpack-react';
+import {OpenInCodeSandboxButton} from './OpenInCodeSandboxButton';
+import {ResetButton} from './ResetButton';
+import {DownloadButton} from './DownloadButton';
+import {IconChevron} from '../../Icon/IconChevron';
+import {Listbox} from '@headlessui/react';
+
+export function useEvent(fn: any): any {
+  const ref = useRef(null);
+  useInsertionEffect(() => {
+    ref.current = fn;
+  }, [fn]);
+  return useCallback((...args: any) => {
+    const f = ref.current!;
+    // @ts-ignore
+    return f(...args);
+  }, []);
+}
+
+const getFileName = (filePath: string): string => {
+  const lastIndexOfSlash = filePath.lastIndexOf('/');
+  return filePath.slice(lastIndexOfSlash + 1);
+};
+
+export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
+  const {sandpack} = useSandpack();
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const tabsRef = useRef<HTMLDivElement | null>(null);
+  // By default, show the dropdown because all tabs may not fit.
+  // We don't know whether they'll fit or not until after hydration:
+  const [showDropdown, setShowDropdown] = useState(true);
+  const {activeFile, setActiveFile, visibleFiles, clients} = sandpack;
+  const clientId = Object.keys(clients)[0];
+  const {refresh} = useSandpackNavigation(clientId);
+  const isMultiFile = visibleFiles.length > 1;
+  const hasJustToggledDropdown = useRef(false);
+
+  // Keep track of whether we can show all tabs or just the dropdown.
+  const onContainerResize = useEvent((containerWidth: number) => {
+    if (hasJustToggledDropdown.current === true) {
+      // Ignore changes likely caused by ourselves.
+      hasJustToggledDropdown.current = false;
+      return;
+    }
+    if (tabsRef.current === null) {
+      // Some ResizeObserver calls come after unmount.
+      return;
+    }
+    const tabsWidth = tabsRef.current.getBoundingClientRect().width;
+    const needsDropdown = tabsWidth >= containerWidth;
+    if (needsDropdown !== showDropdown) {
+      hasJustToggledDropdown.current = true;
+      setShowDropdown(needsDropdown);
+    }
+  });
+
+  useEffect(() => {
+    if (isMultiFile) {
+      const resizeObserver = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          if (entry.contentBoxSize) {
+            const contentBoxSize = Array.isArray(entry.contentBoxSize)
+              ? entry.contentBoxSize[0]
+              : entry.contentBoxSize;
+            const width = contentBoxSize.inlineSize;
+            onContainerResize(width);
+          }
+        }
+      });
+      const container = containerRef.current!;
+      resizeObserver.observe(container);
+      return () => resizeObserver.unobserve(container);
+    } else {
+      return;
+    }
+  }, [isMultiFile]);
+
+  const handleReset = () => {
+    /**
+     * resetAllFiles must come first, otherwise
+     * the previous content will appears for a second
+     * when the iframe loads.
+     *
+     * Plus, it should only prompts if there's any file changes
+     */
+    if (
+      sandpack.editorState === 'dirty' &&
+      confirm('Reset all your edits too?')
+    ) {
+      sandpack.resetAllFiles();
+    }
+
+    refresh();
+  };
+
+  return (
+    <div className="bg-wash dark:bg-card-dark flex justify-between items-center relative z-10 border-b border-border dark:border-border-dark rounded-t-lg text-lg">
+      <div className="flex-1 grow min-w-0 px-4 lg:px-6">
+        <Listbox value={activeFile} onChange={setActiveFile}>
+          <div ref={containerRef}>
+            <div className="relative overflow-hidden">
+              <div
+                ref={tabsRef}
+                className={cn(
+                  // The container for all tabs is always in the DOM, but
+                  // not always visible. This lets us measure how much space
+                  // the tabs would take if displayed. We use this to decide
+                  // whether to keep showing the dropdown, or show all tabs.
+                  'w-[fit-content]',
+                  showDropdown ? 'invisible' : ''
+                )}>
+                <FileTabs />
+              </div>
+              <Listbox.Button as={Fragment}>
+                {({open}) => (
+                  // If tabs don't fit, display the dropdown instead.
+                  // The dropdown is absolutely positioned inside the
+                  // space that's taken by the (invisible) tab list.
+                  <button
+                    className={cn(
+                      'absolute top-0 left-[2px]',
+                      !showDropdown && 'invisible'
+                    )}>
+                    <span
+                      className={cn(
+                        'h-full py-2 px-1 mt-px -mb-px flex border-b text-link dark:text-link-dark border-link dark:border-link-dark items-center text-md leading-tight truncate'
+                      )}
+                      style={{maxWidth: '160px'}}>
+                      {getFileName(activeFile)}
+                      {isMultiFile && (
+                        <span className="ml-2">
+                          <IconChevron
+                            displayDirection={open ? 'up' : 'down'}
+                          />
+                        </span>
+                      )}
+                    </span>
+                  </button>
+                )}
+              </Listbox.Button>
+            </div>
+          </div>
+          {isMultiFile && showDropdown && (
+            <Listbox.Options className="absolute mt-0.5 bg-card dark:bg-card-dark px-2 left-0 right-0 mx-0 rounded-b-lg border-1 border-border dark:border-border-dark rounded-sm shadow-md">
+              {visibleFiles.map((filePath: string) => (
+                <Listbox.Option key={filePath} value={filePath} as={Fragment}>
+                  {({active}) => (
+                    <li
+                      className={cn(
+                        'text-md mx-2 my-4 cursor-pointer',
+                        active && 'text-link dark:text-link-dark'
+                      )}>
+                      {getFileName(filePath)}
+                    </li>
+                  )}
+                </Listbox.Option>
+              ))}
+            </Listbox.Options>
+          )}
+        </Listbox>
+      </div>
+      <div
+        className="px-3 flex items-center justify-end text-right"
+        translate="yes">
+        <DownloadButton providedFiles={providedFiles} />
+        <ResetButton onReset={handleReset} />
+        <OpenInCodeSandboxButton />
+      </div>
+    </div>
+  );
+}
diff --git a/beta/src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx b/beta/src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx
new file mode 100644
index 000000000..42a2d2743
--- /dev/null
+++ b/beta/src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx
@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {UnstyledOpenInCodeSandboxButton} from '@codesandbox/sandpack-react';
+import {IconNewPage} from '../../Icon/IconNewPage';
+
+export const OpenInCodeSandboxButton = () => {
+  return (
+    <UnstyledOpenInCodeSandboxButton
+      className="text-sm text-primary dark:text-primary-dark inline-flex items-center hover:text-link duration-100 ease-in transition mx-1 ml-2 md:ml-1"
+      title="Open in CodeSandbox">
+      <IconNewPage
+        className="inline ml-1 mr-1 relative top-[1px]"
+        width="1em"
+        height="1em"
+      />
+      <span className="hidden md:block">Fork</span>
+    </UnstyledOpenInCodeSandboxButton>
+  );
+};
diff --git a/beta/src/components/MDX/Sandpack/Preview.tsx b/beta/src/components/MDX/Sandpack/Preview.tsx
new file mode 100644
index 000000000..cec510b81
--- /dev/null
+++ b/beta/src/components/MDX/Sandpack/Preview.tsx
@@ -0,0 +1,228 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+/* eslint-disable react-hooks/exhaustive-deps */
+import {useRef, useState, useEffect, useMemo, useId} from 'react';
+import {useSandpack, SandpackStack} from '@codesandbox/sandpack-react';
+import cn from 'classnames';
+import {ErrorMessage} from './ErrorMessage';
+import {SandpackConsole} from './Console';
+import type {LintDiagnostic} from './useSandpackLint';
+import {CSSProperties} from 'react';
+import {LoadingOverlay} from './LoadingOverlay';
+
+type CustomPreviewProps = {
+  className?: string;
+  isExpanded: boolean;
+  lintErrors: LintDiagnostic;
+};
+
+function useDebounced(value: any): any {
+  const ref = useRef<any>(null);
+  const [saved, setSaved] = useState(value);
+  useEffect(() => {
+    clearTimeout(ref.current);
+    ref.current = setTimeout(() => {
+      setSaved(value);
+    }, 300);
+  }, [value]);
+  return saved;
+}
+
+export function Preview({
+  isExpanded,
+  className,
+  lintErrors,
+}: CustomPreviewProps) {
+  const {sandpack, listen} = useSandpack();
+  const [bundlerIsReady, setBundlerIsReady] = useState(false);
+  const [showLoading, setShowLoading] = useState(false);
+  const [iframeComputedHeight, setComputedAutoHeight] = useState<number | null>(
+    null
+  );
+
+  let {
+    error: rawError,
+    registerBundler,
+    unregisterBundler,
+    errorScreenRegisteredRef,
+    openInCSBRegisteredRef,
+    loadingScreenRegisteredRef,
+    status,
+  } = sandpack;
+
+  if (
+    rawError &&
+    rawError.message === '_csbRefreshUtils.prelude is not a function'
+  ) {
+    // Work around a noisy internal error.
+    rawError = null;
+  }
+
+  // Memoized because it's fed to debouncing.
+  const firstLintError = useMemo(() => {
+    if (lintErrors.length === 0) {
+      return null;
+    } else {
+      const {line, column, message} = lintErrors[0];
+      return {
+        title: 'Lint Error',
+        message: `${line}:${column} - ${message}`,
+      };
+    }
+  }, [lintErrors]);
+
+  if (rawError == null || rawError.title === 'Runtime Exception') {
+    if (firstLintError !== null) {
+      rawError = firstLintError;
+    }
+  }
+
+  if (rawError != null && rawError.title === 'Runtime Exception') {
+    rawError.title = 'Runtime Error';
+  }
+
+  // It changes too fast, causing flicker.
+  const error = useDebounced(rawError);
+
+  const clientId = useId();
+  const iframeRef = useRef<HTMLIFrameElement | null>(null);
+
+  // SandpackPreview immediately registers the custom screens/components so the bundler does not render any of them
+  // TODO: why are we doing this during render?
+  openInCSBRegisteredRef.current = true;
+  errorScreenRegisteredRef.current = true;
+  loadingScreenRegisteredRef.current = true;
+
+  const sandpackIdle = sandpack.status === 'idle';
+
+  useEffect(function createBundler() {
+    const iframeElement = iframeRef.current!;
+    registerBundler(iframeElement, clientId);
+
+    return () => {
+      unregisterBundler(clientId);
+    };
+  }, []);
+
+  useEffect(
+    function bundlerListener() {
+      let timeout: ReturnType<typeof setTimeout>;
+
+      const unsubscribe = listen((message) => {
+        if (message.type === 'resize') {
+          setComputedAutoHeight(message.height);
+        } else if (message.type === 'start') {
+          if (message.firstLoad) {
+            setBundlerIsReady(false);
+          }
+
+          /**
+           * The spinner component transition might be longer than
+           * the bundler loading, so we only show the spinner if
+           * it takes more than 1s to load the bundler.
+           */
+          timeout = setTimeout(() => {
+            setShowLoading(true);
+          }, 500);
+        } else if (message.type === 'done') {
+          setBundlerIsReady(true);
+          setShowLoading(false);
+          clearTimeout(timeout);
+        }
+      }, clientId);
+
+      return () => {
+        clearTimeout(timeout);
+        setBundlerIsReady(false);
+        setComputedAutoHeight(null);
+        unsubscribe();
+      };
+    },
+    [sandpackIdle]
+  );
+
+  // WARNING:
+  // The layout and styling here is convoluted and really easy to break.
+  // If you make changes to it, you need to test different cases:
+  // - Content -> (compile | runtime) error -> content editing flow should work.
+  // - Errors should expand parent height rather than scroll.
+  // - Long sandboxes should scroll unless "show more" is toggled.
+  // - Expanded sandboxes ("show more") have sticky previews and errors.
+  // - Sandboxes have autoheight based on content.
+  // - That autoheight should be measured correctly! (Check some long ones.)
+  // - You shouldn't see nested scrolls (that means autoheight is borked).
+  // - Ideally you shouldn't see a blank preview tile while recompiling.
+  // - Container shouldn't be horizontally scrollable (even while loading).
+  // - It should work on mobile.
+  // The best way to test it is to actually go through some challenges.
+
+  const hideContent = error || !iframeComputedHeight || !bundlerIsReady;
+
+  const iframeWrapperPosition = (): CSSProperties => {
+    if (hideContent) {
+      return {position: 'relative'};
+    }
+
+    if (isExpanded) {
+      return {position: 'sticky', top: '2em'};
+    }
+
+    return {};
+  };
+
+  return (
+    <SandpackStack className={className}>
+      <div
+        className={cn(
+          'p-0 sm:p-2 md:p-4 lg:p-8 bg-card dark:bg-wash-dark h-full relative md:rounded-b-lg lg:rounded-b-none',
+          // Allow content to be scrolled if it's too high to fit.
+          // Note we don't want this in the expanded state
+          // because it breaks position: sticky (and isn't needed anyway).
+          !isExpanded && (error || bundlerIsReady) ? 'overflow-auto' : null
+        )}>
+        <div style={iframeWrapperPosition()}>
+          <iframe
+            ref={iframeRef}
+            className={cn(
+              'rounded-t-none bg-white md:shadow-md sm:rounded-lg w-full max-w-full transition-opacity',
+              // We can't *actually* hide content because that would
+              // break calculating the computed height in the iframe
+              // (which we're using for autosizing). This is noticeable
+              // if you make a compiler error and then fix it with code
+              // that expands the content. You want to measure that.
+              hideContent
+                ? 'absolute opacity-0 pointer-events-none duration-75'
+                : 'opacity-100 duration-150'
+            )}
+            title="Sandbox Preview"
+            style={{
+              height: iframeComputedHeight || '15px',
+              zIndex: isExpanded ? 'initial' : -1,
+            }}
+          />
+        </div>
+
+        {error && (
+          <div
+            className={cn(
+              'z-50',
+              // This isn't absolutely positioned so that
+              // the errors can also expand the parent height.
+              isExpanded ? 'sticky top-8 ' : null
+            )}>
+            <ErrorMessage error={error} />
+          </div>
+        )}
+
+        <LoadingOverlay
+          clientId={clientId}
+          dependenciesLoading={!bundlerIsReady && iframeComputedHeight === null}
+          forceLoading={showLoading}
+        />
+      </div>
+      <SandpackConsole visible={!error} />
+    </SandpackStack>
+  );
+}
diff --git a/beta/src/components/MDX/Sandpack/ResetButton.tsx b/beta/src/components/MDX/Sandpack/ResetButton.tsx
new file mode 100644
index 000000000..1ac413138
--- /dev/null
+++ b/beta/src/components/MDX/Sandpack/ResetButton.tsx
@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import * as React from 'react';
+import {IconRestart} from '../../Icon/IconRestart';
+export interface ResetButtonProps {
+  onReset: () => void;
+}
+
+export function ResetButton({onReset}: ResetButtonProps) {
+  return (
+    <button
+      className="text-sm text-primary dark:text-primary-dark inline-flex items-center hover:text-link duration-100 ease-in transition mx-1"
+      onClick={onReset}
+      title="Reset Sandbox"
+      type="button">
+      <IconRestart className="inline ml-1 mr-1 relative" /> Reset
+    </button>
+  );
+}
diff --git a/beta/src/components/MDX/Sandpack/SandpackRoot.tsx b/beta/src/components/MDX/Sandpack/SandpackRoot.tsx
new file mode 100644
index 000000000..4b3f41527
--- /dev/null
+++ b/beta/src/components/MDX/Sandpack/SandpackRoot.tsx
@@ -0,0 +1,104 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {Children, useState} from 'react';
+import * as React from 'react';
+import {SandpackProvider} from '@codesandbox/sandpack-react';
+import {SandpackLogLevel} from '@codesandbox/sandpack-client';
+import {CustomPreset} from './CustomPreset';
+import {createFileMap} from './createFileMap';
+import {CustomTheme} from './Themes';
+
+type SandpackProps = {
+  children: React.ReactNode;
+  autorun?: boolean;
+  showDevTools?: boolean;
+};
+
+const sandboxStyle = `
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  margin: 20px;
+  padding: 0;
+}
+
+h1 {
+  margin-top: 0;
+  font-size: 22px;
+}
+
+h2 {
+  margin-top: 0;
+  font-size: 20px;
+}
+
+h3 {
+  margin-top: 0;
+  font-size: 18px;
+}
+
+h4 {
+  margin-top: 0;
+  font-size: 16px;
+}
+
+h5 {
+  margin-top: 0;
+  font-size: 14px;
+}
+
+h6 {
+  margin-top: 0;
+  font-size: 12px;
+}
+
+code {
+  font-size: 1.2em;
+}
+
+ul {
+  padding-left: 20px;
+}
+`.trim();
+
+function SandpackRoot(props: SandpackProps) {
+  let {children, autorun = true, showDevTools = false} = props;
+  const [devToolsLoaded, setDevToolsLoaded] = useState(false);
+  const codeSnippets = Children.toArray(children) as React.ReactElement[];
+  const files = createFileMap(codeSnippets);
+
+  files['/styles.css'] = {
+    code: [sandboxStyle, files['/styles.css']?.code ?? ''].join('\n\n'),
+    hidden: !files['/styles.css']?.visible,
+  };
+
+  return (
+    <div className="sandpack sandpack--playground my-8">
+      <SandpackProvider
+        template="react"
+        files={files}
+        theme={CustomTheme}
+        options={{
+          autorun,
+          initMode: 'user-visible',
+          initModeObserverOptions: {rootMargin: '1400px 0px'},
+          bundlerURL: 'https://dad0ba0e.sandpack-bundler-4bw.pages.dev',
+          logLevel: SandpackLogLevel.None,
+        }}>
+        <CustomPreset
+          showDevTools={showDevTools}
+          onDevToolsLoad={() => setDevToolsLoaded(true)}
+          devToolsLoaded={devToolsLoaded}
+          providedFiles={Object.keys(files)}
+        />
+      </SandpackProvider>
+    </div>
+  );
+}
+
+export default SandpackRoot;
diff --git a/beta/src/components/MDX/Sandpack/Themes.tsx b/beta/src/components/MDX/Sandpack/Themes.tsx
new file mode 100644
index 000000000..98c4b00eb
--- /dev/null
+++ b/beta/src/components/MDX/Sandpack/Themes.tsx
@@ -0,0 +1,43 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import tailwindConfig from '../../../../tailwind.config';
+
+export const CustomTheme = {
+  colors: {
+    accent: 'inherit',
+    base: 'inherit',
+    clickable: 'inherit',
+    disabled: 'inherit',
+    error: 'inherit',
+    errorSurface: 'inherit',
+    hover: 'inherit',
+    surface1: 'inherit',
+    surface2: 'inherit',
+    surface3: 'inherit',
+    warning: 'inherit',
+    warningSurface: 'inherit',
+  },
+  syntax: {
+    plain: 'inherit',
+    comment: 'inherit',
+    keyword: 'inherit',
+    tag: 'inherit',
+    punctuation: 'inherit',
+    definition: 'inherit',
+    property: 'inherit',
+    static: 'inherit',
+    string: 'inherit',
+  },
+  font: {
+    body: tailwindConfig.theme.extend.fontFamily.sans
+      .join(', ')
+      .replace(/"/gm, ''),
+    mono: tailwindConfig.theme.extend.fontFamily.mono
+      .join(', ')
+      .replace(/"/gm, ''),
+    size: tailwindConfig.theme.extend.fontSize.code,
+    lineHeight: '24px',
+  },
+};
diff --git a/beta/src/components/MDX/Sandpack/createFileMap.ts b/beta/src/components/MDX/Sandpack/createFileMap.ts
new file mode 100644
index 000000000..89d53cfd2
--- /dev/null
+++ b/beta/src/components/MDX/Sandpack/createFileMap.ts
@@ -0,0 +1,53 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import type {SandpackFile} from '@codesandbox/sandpack-react';
+
+export const createFileMap = (codeSnippets: any) => {
+  return codeSnippets.reduce(
+    (result: Record<string, SandpackFile>, codeSnippet: React.ReactElement) => {
+      if ((codeSnippet.type as any).mdxName !== 'pre') {
+        return result;
+      }
+      const {props} = codeSnippet.props.children;
+      let filePath; // path in the folder structure
+      let fileHidden = false; // if the file is available as a tab
+      let fileActive = false; // if the file tab is shown by default
+
+      if (props.meta) {
+        const [name, ...params] = props.meta.split(' ');
+        filePath = '/' + name;
+        if (params.includes('hidden')) {
+          fileHidden = true;
+        }
+        if (params.includes('active')) {
+          fileActive = true;
+        }
+      } else {
+        if (props.className === 'language-js') {
+          filePath = '/App.js';
+        } else if (props.className === 'language-css') {
+          filePath = '/styles.css';
+        } else {
+          throw new Error(
+            `Code block is missing a filename: ${props.children}`
+          );
+        }
+      }
+      if (result[filePath]) {
+        throw new Error(
+          `File ${filePath} was defined multiple times. Each file snippet should have a unique path name`
+        );
+      }
+      result[filePath] = {
+        code: (props.children || '') as string,
+        hidden: fileHidden,
+        active: fileActive,
+      };
+
+      return result;
+    },
+    {}
+  );
+};
diff --git a/beta/src/components/MDX/Sandpack/index.tsx b/beta/src/components/MDX/Sandpack/index.tsx
new file mode 100644
index 000000000..3591e0581
--- /dev/null
+++ b/beta/src/components/MDX/Sandpack/index.tsx
@@ -0,0 +1,70 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {lazy, memo, Children, Suspense} from 'react';
+import {createFileMap} from './createFileMap';
+
+const SandpackRoot = lazy(() => import('./SandpackRoot'));
+
+const SandpackGlimmer = ({code}: {code: string}) => (
+  <div className="sandpack sandpack--playground my-8">
+    <div className="sp-wrapper">
+      <div className="shadow-lg dark:shadow-lg-dark rounded-lg">
+        <div className="bg-wash h-10 dark:bg-card-dark flex justify-between items-center relative z-10 border-b border-border dark:border-border-dark rounded-t-lg rounded-b-none">
+          <div className="px-4 lg:px-6">
+            <div className="sp-tabs"></div>
+          </div>
+          <div className="px-3 flex items-center justify-end grow text-right"></div>
+        </div>
+        <div className="sp-layout min-h-[216px] flex items-stretch flex-wrap">
+          <div className="sp-stack sp-editor max-h-[406px] h-auto overflow-auto">
+            <div className="sp-code-editor">
+              <div className="sp-cm sp-pristine">
+                <div className="cm-editor">
+                  <div>
+                    <div className="cm-gutters pl-9 sticky min-h-[192px]">
+                      <div className="cm-gutter cm-lineNumbers whitespace-pre sp-pre-placeholder">
+                        {code}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="sp-stack order-last xl:order-2 max-h-[406px] h-auto">
+            <div className="p-0 sm:p-2 md:p-4 lg:p-8 bg-card dark:bg-wash-dark h-full relative rounded-b-lg lg:rounded-b-none overflow-auto"></div>
+          </div>
+          {code.split('\n').length > 16 && (
+            <div className="flex h-[45px] text-base justify-between dark:border-card-dark bg-wash dark:bg-card-dark items-center z-10 rounded-t-none p-1 w-full order-2 xl:order-last border-b-1 relative top-0"></div>
+          )}
+        </div>
+      </div>
+    </div>
+  </div>
+);
+
+export default memo(function SandpackWrapper(props: any): any {
+  const codeSnippet = createFileMap(Children.toArray(props.children));
+
+  // To set the active file in the fallback we have to find the active file first.
+  // If there are no active files we fallback to App.js as default.
+  let activeCodeSnippet = Object.keys(codeSnippet).filter(
+    (fileName) =>
+      codeSnippet[fileName]?.active === true &&
+      codeSnippet[fileName]?.hidden === false
+  );
+  let activeCode;
+  if (!activeCodeSnippet.length) {
+    activeCode = codeSnippet['/App.js'].code;
+  } else {
+    activeCode = codeSnippet[activeCodeSnippet[0]].code;
+  }
+
+  return (
+    <Suspense fallback={<SandpackGlimmer code={activeCode} />}>
+      <SandpackRoot {...props} />
+    </Suspense>
+  );
+});
diff --git a/beta/src/components/MDX/Sandpack/runESLint.tsx b/beta/src/components/MDX/Sandpack/runESLint.tsx
new file mode 100644
index 000000000..5fea2f110
--- /dev/null
+++ b/beta/src/components/MDX/Sandpack/runESLint.tsx
@@ -0,0 +1,86 @@
+// @ts-nocheck
+
+import {Linter} from 'eslint/lib/linter/linter';
+
+import type {Diagnostic} from '@codemirror/lint';
+import type {Text} from '@codemirror/text';
+
+const getCodeMirrorPosition = (
+  doc: Text,
+  {line, column}: {line: number; column?: number}
+): number => {
+  return doc.line(line).from + (column ?? 0) - 1;
+};
+
+const linter = new Linter();
+
+// HACK! Eslint requires 'esquery' using `require`, but there's no commonjs interop.
+// because of this it tries to run `esquery.parse()`, while there's only `esquery.default.parse()`.
+// This hack places the functions in the right place.
+const esquery = require('esquery');
+esquery.parse = esquery.default?.parse;
+esquery.matches = esquery.default?.matches;
+
+const reactRules = require('eslint-plugin-react-hooks').rules;
+linter.defineRules({
+  'react-hooks/rules-of-hooks': reactRules['rules-of-hooks'],
+  'react-hooks/exhaustive-deps': reactRules['exhaustive-deps'],
+});
+
+const options = {
+  parserOptions: {
+    ecmaVersion: 12,
+    sourceType: 'module',
+    ecmaFeatures: {jsx: true},
+  },
+  rules: {
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'error',
+  },
+};
+
+export const runESLint = (
+  doc: Text
+): {errors: any[]; codeMirrorErrors: Diagnostic[]} => {
+  const codeString = doc.toString();
+  const errors = linter.verify(codeString, options) as any[];
+
+  const severity = {
+    1: 'warning',
+    2: 'error',
+  };
+
+  const codeMirrorErrors = errors
+    .map((error) => {
+      if (!error) return undefined;
+
+      const from = getCodeMirrorPosition(doc, {
+        line: error.line,
+        column: error.column,
+      });
+
+      const to = getCodeMirrorPosition(doc, {
+        line: error.endLine ?? error.line,
+        column: error.endColumn ?? error.column,
+      });
+
+      return {
+        ruleId: error.ruleId,
+        from,
+        to,
+        severity: severity[error.severity],
+        message: error.message,
+      };
+    })
+    .filter(Boolean) as Diagnostic[];
+
+  return {
+    codeMirrorErrors,
+    errors: errors.map((item) => {
+      return {
+        ...item,
+        severity: severity[item.severity],
+      };
+    }),
+  };
+};
diff --git a/beta/src/components/MDX/Sandpack/useSandpackLint.tsx b/beta/src/components/MDX/Sandpack/useSandpackLint.tsx
new file mode 100644
index 000000000..ec05fbe0d
--- /dev/null
+++ b/beta/src/components/MDX/Sandpack/useSandpackLint.tsx
@@ -0,0 +1,40 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+// @ts-nocheck
+
+import {useState, useEffect} from 'react';
+import type {EditorView} from '@codemirror/view';
+
+export type LintDiagnostic = {
+  line: number;
+  column: number;
+  severity: 'warning' | 'error';
+  message: string;
+}[];
+
+export const useSandpackLint = () => {
+  const [lintErrors, setLintErrors] = useState<LintDiagnostic>([]);
+  const [lintExtensions, setLintExtensions] = useState<any>([]);
+  useEffect(() => {
+    const loadLinter = async () => {
+      const {linter} = await import('@codemirror/lint');
+      const onLint = linter(async (props: EditorView) => {
+        // This is intentionally delayed until CodeMirror calls it
+        // so that we don't take away bandwidth from things loading early.
+        const {runESLint} = await import('./runESLint');
+        const editorState = props.state.doc;
+        let {errors, codeMirrorErrors} = runESLint(editorState);
+        // Ignore parsing or internal linter errors.
+        const isReactRuleError = (error: any) => error.ruleId != null;
+        setLintErrors(errors.filter(isReactRuleError));
+        return codeMirrorErrors.filter(isReactRuleError);
+      });
+      setLintExtensions([onLint]);
+    };
+
+    loadLinter();
+  }, []);
+  return {lintErrors, lintExtensions};
+};
diff --git a/beta/src/components/MDX/SimpleCallout.tsx b/beta/src/components/MDX/SimpleCallout.tsx
new file mode 100644
index 000000000..348a42b67
--- /dev/null
+++ b/beta/src/components/MDX/SimpleCallout.tsx
@@ -0,0 +1,31 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import * as React from 'react';
+import cn from 'classnames';
+import {H3} from './Heading';
+
+interface SimpleCalloutProps {
+  title: string;
+  children: React.ReactNode;
+  className?: string;
+}
+function SimpleCallout({title, children, className}: SimpleCalloutProps) {
+  return (
+    <div
+      className={cn(
+        'p-6 xl:p-8 pb-4 xl:pb-6 bg-card dark:bg-card-dark rounded-lg shadow-inner text-base text-secondary dark:text-secondary-dark my-8',
+        className
+      )}>
+      <H3
+        className="text-primary dark:text-primary-dark mt-0 mb-3 leading-tight"
+        isPageAnchor={false}>
+        {title}
+      </H3>
+      {children}
+    </div>
+  );
+}
+
+export default SimpleCallout;
diff --git a/beta/src/components/MDX/TeamMember.tsx b/beta/src/components/MDX/TeamMember.tsx
new file mode 100644
index 000000000..887e9f691
--- /dev/null
+++ b/beta/src/components/MDX/TeamMember.tsx
@@ -0,0 +1,98 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import * as React from 'react';
+import Image from 'next/image';
+import {IconTwitter} from '../Icon/IconTwitter';
+import {IconGitHub} from '../Icon/IconGitHub';
+import {ExternalLink} from '../ExternalLink';
+import {IconNewPage} from 'components/Icon/IconNewPage';
+import {H3} from './Heading';
+import {IconLink} from 'components/Icon/IconLink';
+
+interface TeamMemberProps {
+  name: string;
+  title: string;
+  permalink: string;
+  children: React.ReactNode;
+  photo: string;
+  twitter?: string;
+  github?: string;
+  personal?: string;
+}
+
+// TODO: good alt text for images/links
+export function TeamMember({
+  name,
+  title,
+  permalink,
+  children,
+  photo,
+  github,
+  twitter,
+  personal,
+}: TeamMemberProps) {
+  if (name == null || title == null || permalink == null || children == null) {
+    throw new Error(
+      'Expected name, title, permalink, and children for ' + name ??
+        title ??
+        permalink ??
+        'unknown'
+    );
+  }
+  return (
+    <div className="pb-6 sm:pb-10">
+      <div className="flex flex-col sm:flex-row height-auto">
+        <div
+          className="hidden sm:block basis-2/5 rounded overflow-hidden relative"
+          style={{width: 300, height: 250}}>
+          <Image src={photo} layout="fill" objectFit="cover" alt={name} />
+        </div>
+        <div
+          style={{minHeight: 300}}
+          className="block w-full sm:hidden flex-grow basis-2/5 rounded overflow-hidden relative">
+          <Image src={photo} layout="fill" objectFit="cover" alt={name} />
+        </div>
+        <div className="pl-0 sm:pl-6 basis-3/5 items-start">
+          <H3 className="mb-1 sm:my-0" id={permalink}>
+            {name}
+          </H3>
+          {title && <div>{title}</div>}
+          {children}
+          <div className="sm:flex sm:flex-row">
+            {twitter && (
+              <div className="mr-4">
+                <ExternalLink
+                  aria-label="React on Twitter"
+                  href={`https://twitter.com/${twitter}`}
+                  className="hover:text-primary dark:text-primary-dark flex flex-row items-center">
+                  <IconTwitter className="pr-2" />
+                  {twitter}
+                </ExternalLink>
+              </div>
+            )}
+            {github && (
+              <div className="mr-4">
+                <ExternalLink
+                  aria-label="GitHub Profile"
+                  href={`https://github.com/${github}`}
+                  className="hover:text-primary dark:text-primary-dark flex flex-row items-center">
+                  <IconGitHub className="pr-2" /> {github}
+                </ExternalLink>
+              </div>
+            )}
+            {personal && (
+              <ExternalLink
+                aria-label="Personal Site"
+                href={`https://${personal}`}
+                className="hover:text-primary dark:text-primary-dark flex flex-row items-center">
+                <IconLink className="pr-2" /> {personal}
+              </ExternalLink>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/beta/src/components/MDX/TerminalBlock.tsx b/beta/src/components/MDX/TerminalBlock.tsx
new file mode 100644
index 000000000..9fb5ff35f
--- /dev/null
+++ b/beta/src/components/MDX/TerminalBlock.tsx
@@ -0,0 +1,81 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {isValidElement, useState, useEffect} from 'react';
+import * as React from 'react';
+import {IconTerminal} from '../Icon/IconTerminal';
+import {IconCopy} from 'components/Icon/IconCopy';
+
+type LogLevel = 'info' | 'warning' | 'error';
+
+interface TerminalBlockProps {
+  level?: LogLevel;
+  children: React.ReactNode;
+}
+
+function LevelText({type}: {type: LogLevel}) {
+  switch (type) {
+    case 'warning':
+      return <span className="text-yellow-50 bg-none mr-1">Warning: </span>;
+    case 'error':
+      return <span className="text-red-40 mr-1">Error: </span>;
+    default:
+      return null;
+  }
+}
+
+function TerminalBlock({level = 'info', children}: TerminalBlockProps) {
+  let message: string | undefined;
+  if (typeof children === 'string') {
+    message = children;
+  } else if (
+    isValidElement(children) &&
+    typeof children.props.children === 'string'
+  ) {
+    message = children.props.children;
+  } else {
+    throw Error('Expected TerminalBlock children to be a plain string.');
+  }
+
+  const [copied, setCopied] = useState(false);
+  useEffect(() => {
+    if (!copied) {
+      return;
+    } else {
+      const timer = setTimeout(() => {
+        setCopied(false);
+      }, 2000);
+      return () => clearTimeout(timer);
+    }
+  }, [copied]);
+
+  return (
+    <div className="rounded-lg bg-secondary dark:bg-gray-50 h-full">
+      <div className="bg-gray-90 dark:bg-gray-60 w-full rounded-t-lg">
+        <div className="text-primary-dark dark:text-primary-dark flex text-sm px-4 py-0.5 relative justify-between">
+          <div>
+            <IconTerminal className="inline-flex mr-2 self-center" /> Terminal
+          </div>
+          <div>
+            <button
+              className="w-full text-left text-primary-dark dark:text-primary-dark "
+              onClick={() => {
+                window.navigator.clipboard.writeText(message ?? '');
+                setCopied(true);
+              }}>
+              <IconCopy className="inline-flex mr-2 self-center" />{' '}
+              {copied ? 'Copied' : 'Copy'}
+            </button>
+          </div>
+        </div>
+      </div>
+      <div className="px-8 pt-4 pb-6 text-primary-dark dark:text-primary-dark font-mono text-code whitespace-pre">
+        <LevelText type={level} />
+        {message}
+      </div>
+    </div>
+  );
+}
+
+export default TerminalBlock;
diff --git a/beta/src/components/MDX/TocContext.tsx b/beta/src/components/MDX/TocContext.tsx
new file mode 100644
index 000000000..8aeead370
--- /dev/null
+++ b/beta/src/components/MDX/TocContext.tsx
@@ -0,0 +1,15 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {createContext} from 'react';
+import type {ReactNode} from 'react';
+
+export type TocItem = {
+  url: string;
+  text: ReactNode;
+  depth: number;
+};
+export type Toc = Array<TocItem>;
+
+export const TocContext = createContext<Toc>([]);
diff --git a/beta/src/components/MDX/YouWillLearnCard.tsx b/beta/src/components/MDX/YouWillLearnCard.tsx
new file mode 100644
index 000000000..839876029
--- /dev/null
+++ b/beta/src/components/MDX/YouWillLearnCard.tsx
@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import * as React from 'react';
+import ButtonLink from 'components/ButtonLink';
+import {IconNavArrow} from 'components/Icon/IconNavArrow';
+
+interface YouWillLearnCardProps {
+  title: string;
+  path: string;
+  children: React.ReactNode;
+}
+
+function YouWillLearnCard({title, path, children}: YouWillLearnCardProps) {
+  return (
+    <div className="flex flex-col h-full bg-card dark:bg-card-dark shadow-inner justify-between rounded-lg pb-8 p-6 xl:p-8 mt-3">
+      <div>
+        <h4 className="text-primary dark:text-primary-dark font-bold text-2xl leading-tight">
+          {title}
+        </h4>
+        <div className="my-4">{children}</div>
+      </div>
+      <div>
+        <ButtonLink
+          href={path}
+          className="mt-1"
+          type="primary"
+          size="md"
+          label={title}>
+          Read More
+          <IconNavArrow displayDirection="right" className="inline ml-1" />
+        </ButtonLink>
+      </div>
+    </div>
+  );
+}
+
+export default YouWillLearnCard;
diff --git a/beta/src/components/PageHeading.tsx b/beta/src/components/PageHeading.tsx
new file mode 100644
index 000000000..a238fceb0
--- /dev/null
+++ b/beta/src/components/PageHeading.tsx
@@ -0,0 +1,48 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import Breadcrumbs from 'components/Breadcrumbs';
+import Tag from 'components/Tag';
+import {RouteTag} from './Layout/useRouteMeta';
+import {H1} from './MDX/Heading';
+
+interface PageHeadingProps {
+  title: string;
+  status?: string;
+  description?: string;
+  tags?: RouteTag[];
+}
+
+function PageHeading({
+  title,
+  status,
+  description,
+  tags = [],
+}: PageHeadingProps) {
+  return (
+    <div className="px-5 sm:px-12 pt-8 sm:pt-7 lg:pt-5">
+      <div className="max-w-4xl ml-0 2xl:mx-auto">
+        {tags ? <Breadcrumbs /> : null}
+        <H1 className="mt-0 text-primary dark:text-primary-dark -mx-.5 break-words">
+          {title}
+          {status ? <em>—{status}</em> : ''}
+        </H1>
+        {description && (
+          <p className="mt-4 mb-6 text-primary dark:text-primary-dark text-xl text-gray-90 leading-large">
+            {description}
+          </p>
+        )}
+        {tags?.length > 0 && (
+          <div className="mt-4">
+            {tags.map((tag) => (
+              <Tag key={tag} variant={tag as RouteTag} />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default PageHeading;
diff --git a/beta/src/components/Search.tsx b/beta/src/components/Search.tsx
new file mode 100644
index 000000000..49088276d
--- /dev/null
+++ b/beta/src/components/Search.tsx
@@ -0,0 +1,195 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+// @ts-ignore
+import {IconSearch} from 'components/Icon/IconSearch';
+import Head from 'next/head';
+import Link from 'next/link';
+import Router from 'next/router';
+import {useState, useCallback, useEffect} from 'react';
+import * as React from 'react';
+import {createPortal} from 'react-dom';
+import {siteConfig} from 'siteConfig';
+
+export interface SearchProps {
+  appId?: string;
+  apiKey?: string;
+  indexName?: string;
+  searchParameters?: any;
+  renderModal?: boolean;
+}
+
+function Hit({hit, children}: any) {
+  return (
+    <Link href={hit.url.replace()}>
+      <a>{children}</a>
+    </Link>
+  );
+}
+
+function Kbd(props: {children?: React.ReactNode}) {
+  return (
+    <kbd
+      className="h-6 w-6 border border-transparent mr-1 bg-wash dark:bg-wash-dark text-gray-30 align-middle p-0 inline-flex justify-center items-center  text-xs text-center rounded"
+      {...props}
+    />
+  );
+}
+
+// Copy-pasted from @docsearch/react to avoid importing the whole bundle.
+// Slightly trimmed to features we use.
+// (c) Algolia, Inc.
+function isEditingContent(event: any) {
+  var element = event.target;
+  var tagName = element.tagName;
+  return (
+    element.isContentEditable ||
+    tagName === 'INPUT' ||
+    tagName === 'SELECT' ||
+    tagName === 'TEXTAREA'
+  );
+}
+function useDocSearchKeyboardEvents({
+  isOpen,
+  onOpen,
+  onClose,
+}: {
+  isOpen: boolean;
+  onOpen: () => void;
+  onClose: () => void;
+}) {
+  useEffect(() => {
+    function onKeyDown(event: any) {
+      function open() {
+        // We check that no other DocSearch modal is showing before opening
+        // another one.
+        if (!document.body.classList.contains('DocSearch--active')) {
+          onOpen();
+        }
+      }
+      if (
+        (event.keyCode === 27 && isOpen) ||
+        (event.key === 'k' && (event.metaKey || event.ctrlKey)) ||
+        (!isEditingContent(event) && event.key === '/' && !isOpen)
+      ) {
+        event.preventDefault();
+        if (isOpen) {
+          onClose();
+        } else if (!document.body.classList.contains('DocSearch--active')) {
+          open();
+        }
+      }
+    }
+
+    window.addEventListener('keydown', onKeyDown);
+    return function () {
+      window.removeEventListener('keydown', onKeyDown);
+    };
+  }, [isOpen, onOpen, onClose]);
+}
+
+const options = {
+  appId: siteConfig.algolia.appId,
+  apiKey: siteConfig.algolia.apiKey,
+  indexName: siteConfig.algolia.indexName,
+};
+let DocSearchModal: any = null;
+export function Search({
+  searchParameters = {
+    hitsPerPage: 5,
+  },
+}: SearchProps) {
+  const [isShowing, setIsShowing] = useState(false);
+
+  const importDocSearchModalIfNeeded = useCallback(
+    function importDocSearchModalIfNeeded() {
+      if (DocSearchModal) {
+        return Promise.resolve();
+      }
+
+      // @ts-ignore
+      return import('@docsearch/react/modal').then(
+        ({DocSearchModal: Modal}) => {
+          DocSearchModal = Modal;
+        }
+      );
+    },
+    []
+  );
+
+  const onOpen = useCallback(
+    function onOpen() {
+      importDocSearchModalIfNeeded().then(() => {
+        setIsShowing(true);
+      });
+    },
+    [importDocSearchModalIfNeeded, setIsShowing]
+  );
+
+  const onClose = useCallback(
+    function onClose() {
+      setIsShowing(false);
+    },
+    [setIsShowing]
+  );
+
+  useDocSearchKeyboardEvents({isOpen: isShowing, onOpen, onClose});
+
+  return (
+    <>
+      <Head>
+        <link
+          rel="preconnect"
+          href={`https://${options.appId}-dsn.algolia.net`}
+        />
+      </Head>
+
+      <button
+        aria-label="Search"
+        type="button"
+        className="inline-flex md:hidden items-center text-lg p-1 ml-4 lg:ml-6"
+        onClick={onOpen}>
+        <IconSearch className="align-middle" />
+      </button>
+
+      <button
+        type="button"
+        className="hidden md:flex relative pl-4 pr-1 py-1 h-10 bg-secondary-button dark:bg-gray-80 outline-none focus:ring focus:outline-none betterhover:hover:bg-opacity-80 pointer items-center shadow-inner text-left w-full text-gray-30 rounded-md align-middle text-sm"
+        onClick={onOpen}>
+        <IconSearch className="mr-3 align-middle text-gray-30 shrink-0 group-betterhover:hover:text-gray-70" />
+        Search
+        <span className="ml-auto hidden sm:flex item-center">
+          <Kbd>⌘</Kbd>
+          <Kbd>K</Kbd>
+        </span>
+      </button>
+
+      {isShowing &&
+        createPortal(
+          <DocSearchModal
+            {...options}
+            initialScrollY={window.scrollY}
+            searchParameters={searchParameters}
+            onClose={onClose}
+            navigator={{
+              navigate({itemUrl}: any) {
+                Router.push(itemUrl);
+              },
+            }}
+            transformItems={(items: any[]) => {
+              return items.map((item) => {
+                const url = new URL(item.url);
+                return {
+                  ...item,
+                  url: item.url.replace(url.origin, '').replace('#__next', ''),
+                };
+              });
+            }}
+            hitComponent={Hit}
+          />,
+          document.body
+        )}
+    </>
+  );
+}
diff --git a/beta/src/components/Seo.tsx b/beta/src/components/Seo.tsx
new file mode 100644
index 000000000..9150bcfeb
--- /dev/null
+++ b/beta/src/components/Seo.tsx
@@ -0,0 +1,113 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import * as React from 'react';
+import Head from 'next/head';
+import {withRouter, Router} from 'next/router';
+
+export interface SeoProps {
+  title: string;
+  description?: string;
+  image?: string;
+  // jsonld?: JsonLDType | Array<JsonLDType>;
+  children?: React.ReactNode;
+}
+
+export const Seo = withRouter(
+  ({
+    title,
+    description = 'A JavaScript library for building user interfaces',
+    image = '/logo-og.png',
+    router,
+    children,
+  }: SeoProps & {router: Router}) => (
+    <Head>
+      {/* DEFAULT */}
+
+      <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+      {title != null && <title key="title">{title}</title>}
+      {description != null && (
+        <meta name="description" key="description" content={description} />
+      )}
+      {/* <link rel="icon" type="image/x-icon" href={favicon} />
+      <link rel="apple-touch-icon" href={favicon} />  @todo favicon */}
+      <meta property="fb:app_id" content="623268441017527" />
+      {/* OPEN GRAPH */}
+      <meta property="og:type" key="og:type" content="website" />
+      <meta
+        property="og:url"
+        key="og:url"
+        content={`https://beta.reactjs.org${router.asPath.split(/[\?\#]/)[0]}`}
+      />
+      {title != null && (
+        <meta property="og:title" content={title} key="og:title" />
+      )}
+      {description != null && (
+        <meta
+          property="og:description"
+          key="og:description"
+          content={description}
+        />
+      )}
+
+      <meta
+        property="og:image"
+        key="og:image"
+        content={`https://beta.reactjs.org${image}`}
+      />
+
+      {/* TWITTER */}
+      <meta
+        name="twitter:card"
+        key="twitter:card"
+        content="summary_large_image"
+      />
+      <meta name="twitter:site" key="twitter:site" content="@reactjs" />
+      <meta name="twitter:creator" key="twitter:creator" content="@reactjs" />
+      {title != null && (
+        <meta name="twitter:title" key="twitter:title" content={title} />
+      )}
+      {description != null && (
+        <meta
+          name="twitter:description"
+          key="twitter:description"
+          content={description}
+        />
+      )}
+
+      <meta
+        name="twitter:image"
+        key="twitter:image"
+        content={`https://beta.reactjs.org${image}`}
+      />
+      <meta
+        name="google-site-verification"
+        content="j1duf8XRaKuZyGvhPd8GkYXHG7LI4GYbIvAXBsqTC9U"
+      />
+      <link
+        rel="preload"
+        href="/fonts/Source-Code-Pro-Regular.woff2"
+        as="font"
+        type="font/woff2"
+        crossOrigin="anonymous"
+      />
+      <link
+        rel="preload"
+        href="https://beta.reactjs.org/fonts/Optimistic_Display_W_Md.woff2"
+        as="font"
+        type="font/woff2"
+        crossOrigin="anonymous"
+      />
+      <link
+        rel="preload"
+        href="https://beta.reactjs.org/fonts/Optimistic_Display_W_Bd.woff2"
+        as="font"
+        type="font/woff2"
+        crossOrigin="anonymous"
+      />
+      {children}
+    </Head>
+  )
+);
diff --git a/beta/src/components/SocialBanner.tsx b/beta/src/components/SocialBanner.tsx
new file mode 100644
index 000000000..826119c14
--- /dev/null
+++ b/beta/src/components/SocialBanner.tsx
@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ */
+
+import {useRef, useEffect} from 'react';
+import cn from 'classnames';
+import {ExternalLink} from './ExternalLink';
+
+const bannerText = 'Support Ukraine 🇺🇦';
+const bannerLink = 'https://opensource.fb.com/support-ukraine';
+const bannerLinkText = 'Help Provide Humanitarian Aid to Ukraine';
+
+export default function SocialBanner() {
+  const ref = useRef<HTMLDivElement | null>(null);
+  useEffect(() => {
+    function patchedScrollTo(x: number, y: number) {
+      if (y === 0) {
+        // We're trying to reset scroll.
+        // If we already scrolled past the banner, consider it as y = 0.
+        const bannerHeight = ref.current?.offsetHeight ?? 0; // Could be zero (e.g. mobile)
+        y = Math.min(window.scrollY, bannerHeight);
+      }
+      return realScrollTo(x, y);
+    }
+    const realScrollTo = window.scrollTo;
+    (window as any).scrollTo = patchedScrollTo;
+    return () => {
+      (window as any).scrollTo = realScrollTo;
+    };
+  }, []);
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        `h-[40px] hidden lg:flex w-full bg-gray-100 dark:bg-gray-700 text-base md:text-lg py-2 sm:py-0 items-center justify-center flex-col sm:flex-row z-[100]`
+      )}>
+      <div className="hidden sm:block">{bannerText}</div>
+      <ExternalLink
+        className="ml-0 sm:ml-1 text-link dark:text-link-dark hover:underline"
+        href={bannerLink}>
+        <div className="inline sm:hidden">🇺🇦 </div>
+        {bannerLinkText}
+        <span className="hidden sm:inline">.</span>
+      </ExternalLink>
+    </div>
+  );
+}
diff --git a/beta/src/components/Tag.tsx b/beta/src/components/Tag.tsx
new file mode 100644
index 000000000..e86226f88
--- /dev/null
+++ b/beta/src/components/Tag.tsx
@@ -0,0 +1,52 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import cn from 'classnames';
+import {RouteTag} from './Layout/useRouteMeta';
+
+const variantMap = {
+  foundation: {
+    name: 'Foundation',
+    classes: 'bg-yellow-50 text-white',
+  },
+  intermediate: {
+    name: 'Intermediate',
+    classes: 'bg-purple-40 text-white',
+  },
+  advanced: {
+    name: 'Advanced',
+    classes: 'bg-green-40 text-white',
+  },
+  experimental: {
+    name: 'Experimental',
+    classes: 'bg-ui-orange text-white',
+  },
+  deprecated: {
+    name: 'Deprecated',
+    classes: 'bg-red-40 text-white',
+  },
+};
+
+interface TagProps {
+  variant: RouteTag;
+  text?: string;
+  className?: string;
+}
+
+function Tag({text, variant, className}: TagProps) {
+  const {name, classes} = variantMap[variant];
+  return (
+    <span className={cn('mr-2', className)}>
+      <span
+        className={cn(
+          'inline font-bold text-sm uppercase py-1 px-2 rounded',
+          classes
+        )}>
+        {text || name}
+      </span>
+    </span>
+  );
+}
+
+export default Tag;
diff --git a/beta/src/content/blog/2013/06/02/jsfiddle-integration.md b/beta/src/content/blog/2013/06/02/jsfiddle-integration.md
new file mode 100644
index 000000000..b80295316
--- /dev/null
+++ b/beta/src/content/blog/2013/06/02/jsfiddle-integration.md
@@ -0,0 +1,8 @@
+---
+title: JSFiddle Integration
+author: [vjeux]
+---
+
+[JSFiddle](https://jsfiddle.net) just announced support for React. This is an exciting news as it makes collaboration on snippets of code a lot easier. You can play around this **[base React JSFiddle](http://jsfiddle.net/vjeux/kb3gN/)**, fork it and share it! A [fiddle without JSX](http://jsfiddle.net/vjeux/VkebS/) is also available.
+
+<blockquote class="twitter-tweet" align="center"><p>React (by Facebook) is now available on JSFiddle. <a href="http://t.co/wNQf9JPv5u" title="http://facebook.github.io/react/">facebook.github.io/react/</a></p>&mdash; JSFiddle (@jsfiddle) <a href="https://twitter.com/jsfiddle/status/341114115781177344">June 2, 2013</a></blockquote>
diff --git a/beta/src/content/blog/2013/06/05/why-react.md b/beta/src/content/blog/2013/06/05/why-react.md
new file mode 100644
index 000000000..7addc8a5d
--- /dev/null
+++ b/beta/src/content/blog/2013/06/05/why-react.md
@@ -0,0 +1,88 @@
+---
+title: Why did we build React?
+author: [petehunt]
+---
+
+There are a lot of JavaScript MVC frameworks out there. Why did we build React
+and why would you want to use it?
+
+## React isn't an MVC framework. {/*react-isnt-an-mvc-framework*/}
+
+React is a library for building composable user interfaces. It encourages
+the creation of reusable UI components which present data that changes over
+time.
+
+## React doesn't use templates. {/*react-doesnt-use-templates*/}
+
+Traditionally, web application UIs are built using templates or HTML directives.
+These templates dictate the full set of abstractions that you are allowed to use
+to build your UI.
+
+React approaches building user interfaces differently by breaking them into
+**components**. This means React uses a real, full featured programming language
+to render views, which we see as an advantage over templates for a few reasons:
+
+- **JavaScript is a flexible, powerful programming language** with the ability
+  to build abstractions. This is incredibly important in large applications.
+- By unifying your markup with its corresponding view logic, React can actually
+  make views **easier to extend and maintain**.
+- By baking an understanding of markup and content into JavaScript, there's
+  **no manual string concatenation** and therefore less surface area for XSS
+  vulnerabilities.
+
+We've also created [JSX](/docs/jsx-in-depth.html), an optional syntax
+extension, in case you prefer the readability of HTML to raw JavaScript.
+
+## Reactive updates are dead simple. {/*reactive-updates-are-dead-simple*/}
+
+React really shines when your data changes over time.
+
+In a traditional JavaScript application, you need to look at what data changed
+and imperatively make changes to the DOM to keep it up-to-date. Even AngularJS,
+which provides a declarative interface via directives and data binding [requires
+a linking function to manually update DOM nodes](https://code.angularjs.org/1.0.8/docs/guide/directive#reasonsbehindthecompilelinkseparation).
+
+React takes a different approach.
+
+When your component is first initialized, the `render` method is called,
+generating a lightweight representation of your view. From that representation,
+a string of markup is produced, and injected into the document. When your data
+changes, the `render` method is called again. In order to perform updates as
+efficiently as possible, we diff the return value from the previous call to
+`render` with the new one, and generate a minimal set of changes to be applied
+to the DOM.
+
+> The data returned from `render` is neither a string nor a DOM node -- it's a
+> lightweight description of what the DOM should look like.
+
+We call this process **reconciliation**. Check out
+[this jsFiddle](http://jsfiddle.net/2h6th4ju/) to see an example of
+reconciliation in action.
+
+Because this re-render is so fast (around 1ms for TodoMVC), the developer
+doesn't need to explicitly specify data bindings. We've found this approach
+makes it easier to build apps.
+
+## HTML is just the beginning. {/*html-is-just-the-beginning*/}
+
+Because React has its own lightweight representation of the document, we can do
+some pretty cool things with it:
+
+- Facebook has dynamic charts that render to `<canvas>` instead of HTML.
+- Instagram is a "single page" web app built entirely with React and
+  `Backbone.Router`. Designers regularly contribute React code with JSX.
+- We've built internal prototypes that run React apps in a web worker and use
+  React to drive **native iOS views** via an Objective-C bridge.
+- You can run React
+  [on the server](https://github.com/petehunt/react-server-rendering-example)
+  for SEO, performance, code sharing and overall flexibility.
+- Events behave in a consistent, standards-compliant way in all browsers
+  (including IE8) and automatically use
+  [event delegation](http://davidwalsh.name/event-delegate).
+
+Head on over to [https://reactjs.org](https://reactjs.org) to check out what we have
+built. Our documentation is geared towards building apps with the framework,
+but if you are interested in the nuts and bolts
+[get in touch](/support.html) with us!
+
+Thanks for reading!
diff --git a/beta/src/content/blog/2013/06/12/community-roundup.md b/beta/src/content/blog/2013/06/12/community-roundup.md
new file mode 100644
index 000000000..2b5a1c7b8
--- /dev/null
+++ b/beta/src/content/blog/2013/06/12/community-roundup.md
@@ -0,0 +1,48 @@
+---
+title: 'Community Round-up #1'
+author: [vjeux]
+---
+
+React was open sourced two weeks ago and it's time for a little round-up of what has been going on.
+
+## Khan Academy Question Editor {/*khan-academy-question-editor*/}
+
+It looks like [Sophie Alpert](http://sophiebits.com/) is the first person outside of Facebook and Instagram to push React code to production. We are very grateful for her contributions in form of pull requests, bug reports and presence on IRC ([#reactjs on Freenode](irc://chat.freenode.net/reactjs)). Sophie wrote about her experience using React:
+
+> I just rewrote a 2000-line project in React and have now made a handful of pull requests to React. Everything about React I've seen so far seems really well thought-out and I'm proud to be the first non-FB/IG production user of React.
+>
+> The project that I rewrote in React (and am continuing to improve) is the Khan Academy question editor which content creators can use to enter questions and hints that will be presented to students:
+>
+> <figure><a href="http://sophiebits.com/2013/06/09/using-react-to-speed-up-khan-academy.html"><img src="/images/blog/khan-academy-editor.png"/></a></figure>
+>
+> [Read the full post...](http://sophiebits.com/2013/06/09/using-react-to-speed-up-khan-academy.html)
+
+## Pimp my Backbone.View (by replacing it with React) {/*pimp-my-backboneview-by-replacing-it-with-react*/}
+
+[Paul Seiffert](https://blog.mayflower.de/) wrote a blog post that explains how to integrate React into Backbone applications.
+
+> React has some interesting concepts for JavaScript view objects that can be used to eliminate this one big problem I have with Backbone.js.
+>
+> As in most MVC implementations (although React is probably just a VC implementation), a view is one portion of the screen that is managed by a controlling object. This object is responsible for deciding when to re-render the view and how to react to user input. With React, these view-controllers objects are called components. A component knows how to render its view and how to handle to the user's interaction with it.
+>
+> The interesting thing is that React is figuring out by itself when to re-render a view and how to do this in the most efficient way.
+>
+> [Read the full post...](https://blog.mayflower.de/3937-Backbone-React.html)
+
+## Using facebook's React with require.js {/*using-facebooks-react-with-requirejs*/}
+
+[Mario Mueller](http://blog.xenji.com/) wrote a menu component in React and was able to easily integrate it with require.js, EventEmitter2 and bower.
+
+> I recently stumbled upon facebook's React library, which is a JavaScript library for building reusable frontend components. Even if this lib is only at version 0.3.x it behaves very stable, it is fast and is fun to code. I'm a big fan of require.js, so I tried to use React within the require.js eco system. It was not as hard as expected and here are some examples and some thoughts about it.
+>
+> [Read the full post...](http://blog.xenji.com/2013/06/facebooks-react-require-js.html)
+
+## Origins of React {/*origins-of-react*/}
+
+[Pete Hunt](http://www.petehunt.net/blog/) explained what differentiates React from other JavaScript libraries in [a previous blog post](/blog/2013/06/05/why-react.html). [Lee Byron](http://leebyron.com/) gives another perspective on Quora:
+
+> React isn't quite like any other popular JavaScript libraries, and it solves a very specific problem: complex UI rendering. It's also intended to be used along side many other popular libraries. For example, React works well with Backbone.js, amongst many others.
+>
+> React was born out of frustrations with the common pattern of writing two-way data bindings in complex MVC apps. React is an implementation of one-way data bindings.
+>
+> [Read the full post...](https://www.quora.com/React-JS-Library/How-is-Facebooks-React-JavaScript-library/answer/Lee-Byron?srid=3DcX)
diff --git a/beta/src/content/blog/2013/06/19/community-roundup-2.md b/beta/src/content/blog/2013/06/19/community-roundup-2.md
new file mode 100644
index 000000000..042aba36a
--- /dev/null
+++ b/beta/src/content/blog/2013/06/19/community-roundup-2.md
@@ -0,0 +1,73 @@
+---
+title: 'Community Round-up #2'
+author: [vjeux]
+---
+
+Since the launch we have received a lot of feedback and are actively working on React 0.4. In the meantime, here are the highlights of this week.
+
+## Some quick thoughts on React {/*some-quick-thoughts-on-react*/}
+
+[Andrew Greig](http://www.andrewgreig.com/) made a blog post that gives a high level description of what React is.
+
+> I have been using Facebook's recently released JavaScript framework called React.js for the last few days and have managed to obtain a rather high level understanding of how it works and formed a good perspective on how it fits in to the entire javascript framework ecosystem.
+>
+> Basically, React is not an MVC framework. It is not a replacement for Backbone or Knockout or Angular, instead it is designed to work with existing frameworks and help extend their functionality.
+>
+> It is designed for building big UIs. The type where you have lots of reusable components that are handling events and presenting and changing some backend data. In a traditional MVC app, React fulfils the role of the View. So you would still need to handle the Model and Controller on your own.
+>
+> I found the best way to utilise React was to pair it with Backbone, with React replacing the Backbone View, or to write your own Model/Data object and have React communicate with that.
+>
+> [Read the full post...](http://www.andrewgreig.com/637/)
+
+## React and Socket.IO Chat Application {/*react-and-socketio-chat-application*/}
+
+[Danial Khosravi](https://danialk.github.io/) made a real-time chat application that interacts with the back-end using Socket.IO.
+
+> A week ago I was playing with AngularJS and [this little chat application](https://github.com/btford/angular-socket-io-im) which uses socket.io and nodejs for realtime communication. Yesterday I saw a post about ReactJS in [EchoJS](http://www.echojs.com/) and started playing with this UI library. After playing a bit with React, I decided to write and chat application using React and I used Bran Ford's Backend for server side of this little app.
+>
+> <figure><a href="https://danialk.github.io/blog/2013/06/16/reactjs-and-socket-dot-io-chat-application/"><img src="/images/blog/chatapp.png"/></a></figure>
+>
+> [Read the full post...](https://danialk.github.io/blog/2013/06/16/reactjs-and-socket-dot-io-chat-application/)
+
+## React and Other Frameworks {/*react-and-other-frameworks*/}
+
+[Pete Hunt](http://www.petehunt.net/blog/) wrote an answer on Quora comparing React and Angular directives. At the end, he explains how you can make an Angular directive that is in fact being rendered with React.
+
+> To set the record straight: React components are far more powerful than Angular templates; they should be compared with Angular's directives instead. So I took the first Google hit for "AngularJS directive tutorial" (AngularJS Directives Tutorial - Fundoo Solutions), rewrote it in React and compared them. [...]
+>
+> We've designed React from the beginning to work well with other libraries. Angular is no exception. Let's take the original Angular example and use React to implement the fundoo-rating directive.
+>
+> [Read the full post...](https://www.quora.com/Pete-Hunt/Posts/Facebooks-React-vs-AngularJS-A-Closer-Look)
+
+In the same vein, [Markov Twain](https://twitter.com/markov_twain/status/345702941845499906) re-implemented the examples on the front-page [with Ember](http://jsbin.com/azihiw/2/edit) and [Vlad Yazhbin](https://twitter.com/vla) re-implemented the tutorial [with Angular](http://jsfiddle.net/vla/Cdrse/).
+
+## Web Components: React & x-tags {/*web-components-react--x-tags*/}
+
+Mozilla and Google are actively working on Web Components. [Vjeux](http://blog.vjeux.com/) wrote a proof of concept that shows how to implement them using React.
+
+> Using [x-tags](http://www.x-tags.org/) from Mozilla, we can write custom tags within the DOM. This is a great opportunity to be able to write reusable components without being tied to a particular library. I wrote [x-react](https://github.com/vjeux/react-xtags/) to have them being rendered in React.
+>
+> <figure><a href="http://blog.vjeux.com/2013/javascript/custom-components-react-x-tags.html"><img src="/images/blog/xreact.png"/></a></figure>
+>
+> [Read the full post...](http://blog.vjeux.com/2013/javascript/custom-components-react-x-tags.html)
+
+## React TodoMVC Example {/*react-todomvc-example*/}
+
+[TodoMVC.com](http://todomvc.com/) is a website that collects various implementations of the same basic Todo app. [Pete Hunt](http://www.petehunt.net/blog/) wrote an idiomatic React version.
+
+> Developers these days are spoiled with choice when it comes to selecting an MV\* framework for structuring and organizing their JavaScript web apps.
+>
+> To help solve this problem, we created TodoMVC - a project which offers the same Todo application implemented using MV* concepts in most of the popular JavaScript MV* frameworks of today.
+>
+> <figure><a href="http://todomvc.com/labs/architecture-examples/react/"><img src="/images/blog/todomvc.png"/></a></figure>
+>
+> [Read the source code...](https://github.com/tastejs/todomvc/tree/gh-pages/labs/architecture-examples/react)
+
+## JSX is not HTML {/*jsx-is-not-html*/}
+
+Many of you pointed out differences between JSX and HTML. In order to clear up some confusion, we have added some documentation that covers the four main differences:
+
+- [Whitespace removal](/docs/jsx-is-not-html.html)
+- [HTML Entities](/docs/jsx-is-not-html.html)
+- [Comments](/docs/jsx-is-not-html.html)
+- [Custom HTML Attributes](/docs/jsx-is-not-html.html)
diff --git a/beta/src/content/blog/2013/06/21/react-v0-3-3.md b/beta/src/content/blog/2013/06/21/react-v0-3-3.md
new file mode 100644
index 000000000..bc54ba963
--- /dev/null
+++ b/beta/src/content/blog/2013/06/21/react-v0-3-3.md
@@ -0,0 +1,20 @@
+---
+title: 'React v0.3.3'
+author: [zpao]
+---
+
+We have a ton of great stuff coming in v0.4, but in the meantime we're releasing v0.3.3. This release addresses some small issues people were having and simplifies our tools to make them easier to use.
+
+## react-tools {/*react-tools*/}
+
+- Upgrade Commoner so `require` statements are no longer relativized when passing through the transformer. This was a feature needed when building React, but doesn't translate well for other consumers of `bin/jsx`.
+- Upgraded our dependencies on Commoner and Recast so they use a different directory for their cache.
+- Freeze our esprima dependency.
+
+## React {/*react*/}
+
+- Allow reusing the same DOM node to render different components. e.g. `React.renderComponent(<div/>, domNode); React.renderComponent(<span/>, domNode);` will work now.
+
+## JSXTransformer {/*jsxtransformer*/}
+
+- Improved the in-browser transformer so that transformed scripts will execute in the expected scope. The allows components to be defined and used from separate files.
diff --git a/beta/src/content/blog/2013/06/27/community-roundup-3.md b/beta/src/content/blog/2013/06/27/community-roundup-3.md
new file mode 100644
index 000000000..32d71bea0
--- /dev/null
+++ b/beta/src/content/blog/2013/06/27/community-roundup-3.md
@@ -0,0 +1,90 @@
+---
+title: 'Community Round-up #3'
+author: [vjeux]
+---
+
+The highlight of this week is that an interaction-heavy app has been ported to React. React components are solving issues they had with nested views.
+
+## Moving From Backbone To React {/*moving-from-backbone-to-react*/}
+
+[Clay Allsopp](https://twitter.com/clayallsopp) successfully ported [Propeller](http://usepropeller.com/blog/posts/from-backbone-to-react/), a fairly big, interaction-heavy JavaScript app, to React.
+
+> [<img style={{ float: 'right', margin: '0 0 10px 10px'}} src="/images/blog/propeller-logo.png" />](http://usepropeller.com/blog/posts/from-backbone-to-react/)Subviews involve a lot of easy-to-forget boilerplate that Backbone (by design) doesn't automate. Libraries like Backbone.Marionette offer more abstractions to make view nesting easier, but they're all limited by the fact that Backbone delegates how and went view-document attachment occurs to the application code.
+>
+> React, on the other hand, manages the DOM and only exposes real nodes at select points in its API. The "elements" you code in React are actually objects which wrap DOM nodes, not the actual objects which get inserted into the DOM. Internally, React converts those abstractions into actual DOMElements and fills out the document accordingly. [...]
+>
+> We moved about 20 different Backbone view classes to React over the past few weeks, including the live-preview pane that you see in our little iOS demo. Most importantly, it's allowed us to put energy into making each component work great on its own, instead of spending extra cycles to ensure they function in unison. For that reason, we think React is a more scalable way to build view-intensive apps than Backbone alone, and it doesn't require you to drop-everything-and-refactor like a move to Ember or Angular would demand.
+>
+> [Read the full post...](http://usepropeller.com/blog/posts/from-backbone-to-react/)
+
+## Grunt Task for JSX {/*grunt-task-for-jsx*/}
+
+[Eric Clemmons](https://ericclemmons.github.io/) wrote a task for [Grunt](http://gruntjs.com/) that applies the JSX transformation to your JavaScript files. It also works with [Browserify](http://browserify.org/) if you want all your files to be concatenated and minified together.
+
+> Grunt task for compiling Facebook React's .jsx templates into .js
+>
+> ```javascript
+> grunt.initConfig({
+>   react: {
+>     app: {
+>       options: { extension: 'js' },
+>       files: { 'path/to/output/dir': 'path/to/jsx/templates/dir' }
+> ```
+>
+> It also works great with `grunt-browserify`!
+>
+> ```javascript
+> browserify: {
+>   options: {
+>     transform: [ require('grunt-react').browserify ]
+>   },
+>   app: {
+>     src: 'path/to/source/main.js',
+>     dest: 'path/to/target/output.js'
+> ```
+>
+> [Check out the project ...](https://github.com/ericclemmons/grunt-react)
+
+## Backbone/Handlebars Nested Views {/*backbonehandlebars-nested-views*/}
+
+[Joel Burget](http://joelburget.com/) wrote a blog post talking about the way we would write React-like components in Backbone and Handlebars.
+
+> The problem here is that we're trying to manipulate a tree, but there's a textual layer we have to go through. Our views are represented as a tree - the subviews are children of CommentCollectionView - and they end up as part of a tree in the DOM. But there's a Handlebars layer in the middle (which deals in flat strings), so the hierarchy must be destructed and rebuilt when we render.
+>
+> What does it take to render a collection view? In the Backbone/Handlebars view of the world you have to render the template (with stubs), render each subview which replaces a stub, and keep a reference to each subview (or anything within the view that could change in the future).
+>
+> So while our view is conceptually hierarchical, due to the fact that it has to go through a flat textual representation, we need to do a lot of extra work to reassemble that structure after rendering.
+>
+> [Read the full post...](http://joelburget.com/react/)
+
+## JSRomandie Meetup {/*jsromandie-meetup*/}
+
+[Renault John Lecoultre](https://twitter.com/renajohn/) from [BugBuster](http://www.bugbuster.com) did a React introduction talk at a JS meetup called [JS Romandie](https://twitter.com/jsromandie) last week.
+
+<script async class="speakerdeck-embed" data-id="888a9d50c01b01300df36658d0894ac1" data-ratio="1.33333333333333" src="//speakerdeck.com/assets/embed.js"></script>
+
+## CoffeeScript integration {/*coffeescript-integration*/}
+
+[Vjeux](http://blog.vjeux.com/) used the fact that JSX is just a syntactic sugar on-top of regular JS to rewrite the React front-page examples in CoffeeScript.
+
+> Multiple people asked what's the story about JSX and CoffeeScript. There is no JSX pre-processor for CoffeeScript and I'm not aware of anyone working on it. Fortunately, CoffeeScript is pretty expressive and we can play around the syntax to come up with something that is usable.
+>
+> ```javascript
+> {div, h3, textarea} = React.DOM
+> (div {className: 'MarkdownEditor'}, [
+>   (h3 {}, 'Input'),
+>   (textarea {onKeyUp: @handleKeyUp, ref: 'textarea'},
+>     @state.value
+>   )
+> ])
+> ```
+>
+> [Read the full post...](http://blog.vjeux.com/2013/javascript/react-coffeescript.html)
+
+## Tutorial in Plain JavaScript {/*tutorial-in-plain-javascript*/}
+
+We've seen a lot of people comparing React with various frameworks. [Ricardo Tomasi](http://ricardo.cc/) decided to re-implement the tutorial without any framework, just plain JavaScript.
+
+> Facebook & Instagram launched the React framework and an accompanying tutorial. Developer Vlad Yazhbin decided to rewrite that using AngularJS. The end result is pretty neat, but if you're like me you will not actually appreciate the HTML speaking for itself and doing all the hard work. So let's see what that looks like in plain javascript.
+>
+> [Read the full post...](http://ricardo.cc/2013/06/07/react-tutorial-rewritten-in-plain-javascript.html)
diff --git a/beta/src/content/blog/2013/07/02/react-v0-4-autobind-by-default.md b/beta/src/content/blog/2013/07/02/react-v0-4-autobind-by-default.md
new file mode 100644
index 000000000..cec2abfb0
--- /dev/null
+++ b/beta/src/content/blog/2013/07/02/react-v0-4-autobind-by-default.md
@@ -0,0 +1,51 @@
+---
+title: "New in React v0.4: Autobind by Default"
+author: [zpao]
+---
+
+React v0.4 is very close to completion. As we finish it off, we'd like to share with you some of the major changes we've made since v0.3. This is the first of several posts we'll be making over the next week.
+
+
+## What is React.autoBind? {/*what-is-reactautobind*/}
+
+If you take a look at most of our current examples, you'll see us using `React.autoBind` for event handlers. This is used in place of `Function.prototype.bind`. Remember that in JS, [function calls are late-bound](https://bonsaiden.github.io/JavaScript-Garden/#function.this). That means that if you simply pass a function around, the `this` used inside won't necessarily be the `this` you expect. `Function.prototype.bind` creates a new, properly bound, function so that when called, `this` is exactly what you expect it to be.
+
+Before we launched React, we would write this:
+
+```js {4}
+React.createClass({
+  onClick: function(event) {/* do something with this */},
+  render: function() {
+    return <button onClick={this.onClick.bind(this)} />;
+  }
+});
+```
+
+We wrote `React.autoBind` as a way to cache the function creation and save on memory usage. Since `render` can get called multiple times, if you used `this.onClick.bind(this)` you would actually create a new function on each pass. With React v0.3 you were able to write this instead:
+
+```js {2,4}
+React.createClass({
+  onClick: React.autoBind(function(event) {/* do something with this */}),
+  render: function() {
+    return <button onClick={this.onClick} />;
+  }
+});
+```
+
+
+## What's Changing in v0.4? {/*whats-changing-in-v04*/}
+
+After using `React.autoBind` for a few weeks, we realized that there were very few times that we didn't want that behavior. So we made it the default! Now all methods defined within `React.createClass` will already be bound to the correct instance.
+
+Starting with v0.4 you can just write this:
+
+```js {2,4}
+React.createClass({
+  onClick: function(event) {/* do something with this */},
+  render: function() {
+    return <button onClick={this.onClick} />;
+  }
+});
+```
+
+For v0.4 we will simply be making `React.autoBind` a no-op — it will just return the function you pass to it. Most likely you won't have to change your code to account for this change, though we encourage you to update. We'll publish a migration guide documenting this and other changes that come along with React v0.4.
diff --git a/beta/src/content/blog/2013/07/03/community-roundup-4.md b/beta/src/content/blog/2013/07/03/community-roundup-4.md
new file mode 100644
index 000000000..a609af04b
--- /dev/null
+++ b/beta/src/content/blog/2013/07/03/community-roundup-4.md
@@ -0,0 +1,59 @@
+---
+title: 'Community Round-up #4'
+author: [vjeux]
+---
+
+React reconciliation process appears to be very well suited to implement a text editor with a live preview as people at Khan Academy show us.
+
+## Khan Academy {/*khan-academy*/}
+
+[Ben Kamens](http://bjk5.com/) explains how [Sophie Alpert](http://sophiebits.com/) and [Joel Burget](http://joelburget.com/) are promoting React inside of [Khan Academy](https://www.khanacademy.org/). They now have three projects in the works using React.
+
+> Recently two Khan Academy devs dropped into our team chat and said they were gonna use React to write a new feature. They even hinted that we may want to adopt it product-wide.
+>
+> "The library is only a week old. It's a brand new way of thinking about things. We're the first to use it outside of Facebook. Heck, even the React devs were surprised to hear we're using this in production!!!"
+>
+> [Read the full post...](http://bjk5.com/post/53742233351/getting-your-team-to-adopt-new-technology)
+
+The best part is the demo of how React reconciliation process makes live editing more user-friendly.
+
+> Our renderer, post-React, is on the left. A typical math editor's preview is on the right.
+
+[![](/images/blog/monkeys.gif)](http://bjk5.com/post/53742233351/getting-your-team-to-adopt-new-technology)
+
+## React Snippets {/*react-snippets*/}
+
+Over the past several weeks, members of our team, [Pete Hunt](http://www.petehunt.net/) and [Paul O'Shannessy](http://zpao.com/), answered many questions that were asked in the [React group](https://groups.google.com/forum/#!forum/reactjs). They give a good overview of how to integrate React with other libraries and APIs through the use of [Mixins](/docs/reusable-components.html) and [Lifecycle Methods](/docs/working-with-the-browser.html).
+
+> [Listening Scroll Event](https://groups.google.com/forum/#!topic/reactjs/l6PnP8qbofk)
+>
+> - [JSFiddle](http://jsfiddle.net/aabeL/1/): Basically I've given you two mixins. The first lets you react to global scroll events. The second is, IMO, much more useful: it gives you scroll start and scroll end events, which you can use with setState() to create components that react based on whether the user is scrolling or not.
+>
+> [Fade-in Transition](https://groups.google.com/forum/#!topic/reactjs/RVAY_eQmdpo)
+>
+> - [JSFiddle](http://jsfiddle.net/ufe8k/1/): Creating a new `<FadeInWhenAdded>` component and using jQuery `.fadeIn()` function on the DOM node.
+> - [JSFiddle](http://jsfiddle.net/R8f5L/5/): Using CSS transition instead.
+>
+> [Socket.IO Integration](https://groups.google.com/forum/#!topic/reactjs/pyUZBRWcHB4)
+>
+> - [Gist](https://gist.github.com/zpao/5686416): The big thing to notice is that my component is pretty dumb (it doesn't have to be but that's how I chose to model it). All it does is render itself based on the props that are passed in. renderOrUpdate is where the "magic" happens.
+> - [Gist](https://gist.github.com/petehunt/5687230): This example is doing everything -- including the IO -- inside of a single React component.
+> - [Gist](https://gist.github.com/petehunt/5687276): One pattern that we use at Instagram a lot is to employ separation of concerns and consolidate I/O and state into components higher in the hierarchy to keep the rest of the components mostly stateless and purely display.
+>
+> [Sortable jQuery Plugin Integration](https://groups.google.com/forum/#!topic/reactjs/mHfBGI3Qwz4)
+>
+> - [JSFiddle](http://jsfiddle.net/LQxy7/): Your React component simply render empty divs, and then in componentDidMount() you call React.renderComponent() on each of those divs to set up a new root React tree. Be sure to explicitly unmountAndReleaseReactRootNode() for each component in componentWillUnmount().
+
+## Introduction to React Screencast {/*introduction-to-react-screencast*/}
+
+[Pete Hunt](http://www.petehunt.net/) recorded himself implementing a simple `<Blink>` tag in React.
+
+<figure><iframe src="https://player.vimeo.com/video/67248575" width="100%" height="340" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></figure>
+
+## Snake in React {/*snake-in-react*/}
+
+[Tom Occhino](http://tomocchino.com/) implemented Snake in 150 lines with React.
+
+> [Check the source on GitHub](https://github.com/tomocchino/react-snake/blob/master/src/snake.js)
+>
+> <figure><a href="https://tomocchino.github.io/react-snake/"><img src="/images/blog/snake.png"/></a></figure>
diff --git a/beta/src/content/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.md b/beta/src/content/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.md
new file mode 100644
index 000000000..59a41733c
--- /dev/null
+++ b/beta/src/content/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.md
@@ -0,0 +1,60 @@
+---
+title: 'New in React v0.4: Prop Validation and Default Values'
+author: [zpao]
+---
+
+Many of the questions we got following the public launch of React revolved around `props`, specifically that people wanted to do validation and to make sure their components had sensible defaults.
+
+## Validation {/*validation*/}
+
+Oftentimes you want to validate your `props` before you use them. Perhaps you want to ensure they are a specific type. Or maybe you want to restrict your prop to specific values. Or maybe you want to make a specific prop required. This was always possible — you could have written validations in your `render` or `componentWillReceiveProps` functions, but that gets clunky fast.
+
+React v0.4 will provide a nice easy way for you to use built-in validators, or to even write your own.
+
+```js
+React.createClass({
+  propTypes: {
+    // An optional string prop named "description".
+    description: React.PropTypes.string,
+
+    // A required enum prop named "category".
+    category: React.PropTypes.oneOf(['News','Photos']).isRequired,
+
+    // A prop named "dialog" that requires an instance of Dialog.
+    dialog: React.PropTypes.instanceOf(Dialog).isRequired
+  },
+  ...
+});
+```
+
+## Default Values {/*default-values*/}
+
+One common pattern we've seen with our React code is to do something like this:
+
+```js
+React.createClass({
+  render: function () {
+    var value = this.props.value || 'default value';
+    return <div>{value}</div>;
+  },
+});
+```
+
+Do this for a few `props` across a few components and now you have a lot of redundant code. Starting with React v0.4, you can provide default values in a declarative way:
+
+```js
+React.createClass({
+  getDefaultProps: function() {
+    return {
+      value: 'default value'
+    };
+  }
+  ...
+});
+```
+
+We will use the cached result of this function before each `render`. We also perform all validations before each `render` to ensure that you have all of the data you need in the right form before you try to use it.
+
+---
+
+Both of these features are entirely optional. We've found them to be increasingly valuable at Facebook as our applications grow and evolve, and we hope others find them useful as well.
diff --git a/beta/src/content/blog/2013/07/17/react-v0-4-0.md b/beta/src/content/blog/2013/07/17/react-v0-4-0.md
new file mode 100644
index 000000000..65a730234
--- /dev/null
+++ b/beta/src/content/blog/2013/07/17/react-v0-4-0.md
@@ -0,0 +1,37 @@
+---
+title: 'React v0.4.0'
+author: [zpao]
+---
+
+Over the past 2 months we've been taking feedback and working hard to make React even better. We fixed some bugs, made some under-the-hood improvements, and added several features that we think will improve the experience developing with React. Today we're proud to announce the availability of React v0.4!
+
+This release could not have happened without the support of our growing community. Since launch day, the community has contributed blog posts, questions to the [Google Group](https://groups.google.com/group/reactjs), and issues and pull requests on GitHub. We've had contributions ranging from documentation improvements to major changes to React's rendering. We've seen people integrate React into the tools they're using and the products they're building, and we're all very excited to see what our budding community builds next!
+
+React v0.4 has some big changes. We've also restructured the documentation to better communicate how to use React. We've summarized the changes below and linked to documentation where we think it will be especially useful.
+
+When you're ready, [go download it](/docs/installation.html)!
+
+### React {/*react*/}
+
+- Switch from using `id` attribute to `data-reactid` to track DOM nodes. This allows you to integrate with other JS and CSS libraries more easily.
+- Support for more DOM elements and attributes (e.g., `<canvas>`)
+- Improved server-side rendering APIs. `React.renderComponentToString(<component>, callback)` allows you to use React on the server and generate markup which can be sent down to the browser.
+- `prop` improvements: validation and default values. [Read our blog post for details...](/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html)
+- Support for the `key` prop, which allows for finer control over reconciliation. [Read the docs for details...](/docs/multiple-components.html)
+- Removed `React.autoBind`. [Read our blog post for details...](/blog/2013/07/02/react-v0-4-autobind-by-default.html)
+- Improvements to forms. We've written wrappers around `<input>`, `<textarea>`, `<option>`, and `<select>` in order to standardize many inconsistencies in browser implementations. This includes support for `defaultValue`, and improved implementation of the `onChange` event, and circuit completion. [Read the docs for details...](/docs/forms.html)
+- We've implemented an improved synthetic event system that conforms to the W3C spec.
+- Updates to your component are batched now, which may result in a significantly faster re-render of components. `this.setState` now takes an optional callback as its second parameter. If you were using `onClick={this.setState.bind(this, state)}` previously, you'll want to make sure you add a third parameter so that the event is not treated as the callback.
+
+### JSX {/*jsx*/}
+
+- Support for comment nodes `<div>{/* this is a comment and won't be rendered */}</div>`
+- Children are now transformed directly into arguments instead of being wrapped in an array
+  E.g. `<div><Component1/><Component2/></div>` is transformed into `React.DOM.div(null, Component1(null), Component2(null))`.
+  Previously this would be transformed into `React.DOM.div(null, [Component1(null), Component2(null)])`.
+  If you were using React without JSX previously, your code should still work.
+
+### react-tools {/*react-tools*/}
+
+- Fixed a number of bugs when transforming directories
+- No longer re-write `require()`s to be relative unless specified
diff --git a/beta/src/content/blog/2013/07/23/community-roundup-5.md b/beta/src/content/blog/2013/07/23/community-roundup-5.md
new file mode 100644
index 000000000..ce2effc6c
--- /dev/null
+++ b/beta/src/content/blog/2013/07/23/community-roundup-5.md
@@ -0,0 +1,94 @@
+---
+title: 'Community Round-up #5'
+author: [vjeux]
+---
+
+We launched the [React Facebook Page](https://www.facebook.com/react) along with the React v0.4 launch. 700 people already liked it to get updated on the project :)
+
+## Cross-browser onChange {/*cross-browser-onchange*/}
+
+[Sophie Alpert](http://sophiebits.com/) from [Khan Academy](https://www.khanacademy.org/) worked on a cross-browser implementation of `onChange` event that landed in v0.4. She wrote a blog post explaining the various browser quirks she had to deal with.
+
+> First off, what is the input event? If you have an `<input>` element and want to receive events whenever the value changes, the most obvious thing to do is to listen to the change event. Unfortunately, change fires only after the text field is defocused, rather than on each keystroke. The next obvious choice is the keyup event, which is triggered whenever a key is released. Unfortunately, keyup doesn't catch input that doesn't involve the keyboard (e.g., pasting from the clipboard using the mouse) and only fires once if a key is held down, rather than once per inserted character.
+>
+> Both keydown and keypress do fire repeatedly when a key is held down, but both fire immediately before the value changes, so to read the new value you have to defer the handler to the next event loop using `setTimeout(fn, 0)` or similar, which slows down your app. Of course, like keyup, neither keydown nor keypress fires for non-keyboard input events, and all three can fire in cases where the value doesn't change at all (such as when pressing the arrow keys).
+>
+> [Read the full post...](http://sophiebits.com/2013/06/18/a-near-perfect-oninput-shim-for-ie-8-and-9.html)
+
+## React Samples {/*react-samples*/}
+
+Learning a new library is always easier when you have working examples you can play with. [jwh](https://github.com/jhw) put many of them on his [react-samples GitHub repo](https://github.com/jhw/react-samples).
+
+> Some simple examples with Facebook's React framework
+>
+> - Bootstrap action bar, modal and table [#1](https://rawgithub.com/jhw/react-samples/master/html/actionbar.html),
+>   [#2](https://rawgithub.com/jhw/react-samples/master/html/bootstrap_actionbar.html),
+>   [#3](https://rawgithub.com/jhw/react-samples/master/html/bootstrap_modal.html),
+>   [#4](https://rawgithub.com/jhw/react-samples/master/html/bootstrap_striped_table.html)
+> - Comments [#1](https://rawgithub.com/jhw/react-samples/master/html/comments1.html),
+>   [#2](https://rawgithub.com/jhw/react-samples/master/html/comments2.html)
+> - Data Table [#1](https://rawgithub.com/jhw/react-samples/master/html/datatable.html),
+>   [#2](https://rawgithub.com/jhw/react-samples/master/html/datatable2.html),
+>   [#3](https://rawgithub.com/jhw/react-samples/master/html/datatable3.html),
+>   [#4](https://rawgithub.com/jhw/react-samples/master/html/datatable4.html),
+>   [#5](https://rawgithub.com/jhw/react-samples/master/html/datatable5.html)
+> - Filter Bar [#1](https://rawgithub.com/jhw/react-samples/master/html/filterbar.html),
+>   [#2](https://rawgithub.com/jhw/react-samples/master/html/filterbar2.html),
+>   [#3](https://rawgithub.com/jhw/react-samples/master/html/filterbar3.html),
+>   [#4](https://rawgithub.com/jhw/react-samples/master/html/filterbar4.html),
+>   [#5](https://rawgithub.com/jhw/react-samples/master/html/filterbar5.html)
+> - Fundoo Rating [#1](https://rawgithub.com/jhw/react-samples/master/html/fundoo.html)
+> - Line Char: [#1](https://rawgithub.com/jhw/react-samples/master/html/linechart.html),
+>   [#2](https://rawgithub.com/jhw/react-samples/master/html/linechart2.html)
+> - Multi tabs [#1](https://rawgithub.com/jhw/react-samples/master/html/multitabs.html)
+> - Select [#1](https://rawgithub.com/jhw/react-samples/master/html/select.html)
+> - Simple Tabs [#1](https://rawgithub.com/jhw/react-samples/master/html/simpletabs.html),
+>   [#2](https://rawgithub.com/jhw/react-samples/master/html/simpletabs2.html),
+>   [#3](https://rawgithub.com/jhw/react-samples/master/html/simpletabs3.html),
+>   [#4](https://rawgithub.com/jhw/react-samples/master/html/simpletabs4.html)
+> - Toggle [#1](https://rawgithub.com/jhw/react-samples/master/html/toggle.html)
+
+## React Chosen Wrapper {/*react-chosen-wrapper*/}
+
+[Cheng Lou](https://github.com/chenglou) wrote a wrapper for the [Chosen](https://harvesthq.github.io/chosen/) input library called [react-chosen](https://github.com/chenglou/react-chosen). It took just 25 lines to be able to use jQuery component as a React one.
+
+```javascript
+React.renderComponent(
+  <Chosen noResultsText="No result" value="Harvest" onChange={doSomething}>
+    <option value="Facebook">Facebook</option>
+    <option value="Harvest">Harvest</option>
+  </Chosen>,
+  document.getElementById('example')
+);
+```
+
+## JSX and ES6 Template Strings {/*jsx-and-es6-template-strings*/}
+
+[Domenic Denicola](http://domenicdenicola.com/) wrote a slide deck about the great applications of ES6 features and one slide shows how we could use Template Strings to compile JSX at run-time without the need for a pre-processing phase.
+
+<figure><iframe src="https://www.slideshare.net/slideshow/embed_code/24187146?rel=0&startSlide=36" width="100%" height={356} frameBorder={0} marginWidth={0} marginHeight={0} scrolling="no" style={{border: '1px solid #CCC', borderWidth: '1px 1px 0', marginBottom: 5}} allowFullScreen webkitallowfullscreen mozallowfullscreen> </iframe></figure>
+
+## React Presentation {/*react-presentation*/}
+
+[Tom Occhino](http://tomocchino.com/) and [Jordan Walke](https://github.com/jordwalke), React developers, did a presentation of React at Facebook Seattle's office. Check out the first 25 minutes for the presentation and the remaining 45 for a Q&A. I highly recommend you watching this video.
+
+<figure><iframe width={650} height={400} src="//www.youtube-nocookie.com/embed/XxVg_s8xAms" frameBorder={0} allowFullScreen /></figure>
+
+## Docs {/*docs*/}
+
+[Pete Hunt](http://www.petehunt.net/) rewrote the entirety of the docs for v0.4. The goal was to add more explanation about why we built React and what the best practices are.
+
+> Guides
+>
+> - [Why React?](/docs/why-react.html)
+> - [Displaying Data](/docs/displaying-data.html)
+>   - [JSX in Depth](/docs/jsx-in-depth.html)
+>   - [JSX Gotchas](/docs/jsx-gotchas.html)
+> - [Interactivity and Dynamic UIs](/docs/interactivity-and-dynamic-uis.html)
+> - [Multiple Components](/docs/multiple-components.html)
+> - [Reusable Components](/docs/reusable-components.html)
+> - [Forms](/docs/forms.html)
+> - [Working With the Browser](/docs/working-with-the-browser.html)
+>   - [More About Refs](/docs/more-about-refs.html)
+> - [Tooling integration](/docs/tooling-integration.html)
+> - [Reference](/docs/top-level-api.html)
diff --git a/beta/src/content/blog/2013/07/26/react-v0-4-1.md b/beta/src/content/blog/2013/07/26/react-v0-4-1.md
new file mode 100644
index 000000000..05a2b4105
--- /dev/null
+++ b/beta/src/content/blog/2013/07/26/react-v0-4-1.md
@@ -0,0 +1,21 @@
+---
+title: 'React v0.4.1'
+author: [zpao]
+---
+
+React v0.4.1 is a small update, mostly containing correctness fixes. Some code has been restructured internally but those changes do not impact any of our public APIs.
+
+## React {/*react*/}
+
+- `setState` callbacks are now executed in the scope of your component.
+- `click` events now work on Mobile Safari.
+- Prevent a potential error in event handling if `Object.prototype` is extended.
+- Don't set DOM attributes to the string `"undefined"` on update when previously defined.
+- Improved support for `<iframe>` attributes.
+- Added checksums to detect and correct cases where server-side rendering markup mismatches what React expects client-side.
+
+## JSXTransformer {/*jsxtransformer*/}
+
+- Improved environment detection so it can be run in a non-browser environment.
+
+[Download it now!](/downloads.html)
diff --git a/beta/src/content/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.md b/beta/src/content/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.md
new file mode 100644
index 000000000..4c36c2684
--- /dev/null
+++ b/beta/src/content/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.md
@@ -0,0 +1,47 @@
+---
+title: 'Use React and JSX in Ruby on Rails'
+author: [zpao]
+---
+
+Today we're releasing a gem to make it easier to use React and JSX in Ruby on Rails applications: [react-rails](https://github.com/facebook/react-rails).
+
+This gem has 2 primary purposes:
+
+1. To package `react.js` in a way that's easy to use and easy to update.
+2. To allow you to write JSX without an external build step to transform that into JS.
+
+## Packaging react.js {/*packaging-reactjs*/}
+
+To make `react.js` available for use client-side, simply add `react` to your manifest, and declare the variant you'd like to use in your environment. When you use `:production`, the minified and optimized `react.min.js` will be used instead of the development version. For example:
+
+```ruby
+# config/environments/development.rb
+
+MyApp::Application.configure do
+  config.react.variant = :development
+  # use :production in production.rb
+end
+```
+
+```js
+// app/assets/javascript/application.js
+
+//= require react
+```
+
+## Writing JSX {/*writing-jsx*/}
+
+When you name your file with `myfile.js.jsx`, `react-rails` will automatically try to transform that file. For the time being, we still require that you include the docblock at the beginning of the file. For example, this file will get transformed on request.
+
+```js
+/** @jsx React.DOM */
+React.renderComponent(<MyComponent />, document.getElementById('example'));
+```
+
+## Asset Pipeline {/*asset-pipeline*/}
+
+`react-rails` takes advantage of the [asset pipeline](http://guides.rubyonrails.org/asset_pipeline.html) that was introduced in Rails 3.1. A very important part of that pipeline is the `assets:precompile` Rake task. `react-rails` will ensure that your JSX files will be transformed into regular JS before all of your assets are minified and packaged.
+
+## Installation {/*installation*/}
+
+Installation follows the same process you're familiar with. You can install it globally with `gem install react-rails`, though we suggest you add the dependency to your `Gemfile` directly.
diff --git a/beta/src/content/blog/2013/08/05/community-roundup-6.md b/beta/src/content/blog/2013/08/05/community-roundup-6.md
new file mode 100644
index 000000000..322a1b255
--- /dev/null
+++ b/beta/src/content/blog/2013/08/05/community-roundup-6.md
@@ -0,0 +1,76 @@
+---
+title: 'Community Round-up #6'
+author: [vjeux]
+---
+
+This is the first Community Round-up where none of the items are from Facebook/Instagram employees. It's great to see the adoption of React growing.
+
+## React Game Tutorial {/*react-game-tutorial*/}
+
+[Caleb Cassel](https://twitter.com/CalebCassel) wrote a [step-by-step tutorial](https://rawgithub.com/calebcassel/react-demo/master/part1.html) about making a small game. It covers JSX, State and Events, Embedded Components and Integration with Backbone.
+
+<figure><a href="https://rawgithub.com/calebcassel/react-demo/master/part1.html"><img src="/images/blog/dog-tutorial.png"/></a></figure>
+
+## Reactify {/*reactify*/}
+
+[Andrey Popp](http://andreypopp.com/) created a [Browserify](http://browserify.org/) helper to compile JSX files.
+
+> Browserify v2 transform for `text/jsx`. Basic usage is:
+>
+> ```
+> % browserify -t reactify main.jsx
+> ```
+>
+> `reactify` transform activates for files with either `.jsx` extension or `/** @jsx React.DOM */` pragma as a first line for any `.js` file.
+>
+> [Check it out on GitHub...](https://github.com/andreypopp/reactify)
+
+## React Integration with Este {/*react-integration-with-este*/}
+
+[Daniel Steigerwald](http://daniel.steigerwald.cz/) is now using React within [Este](https://github.com/steida/este), which is a development stack for web apps in CoffeeScript that are statically typed using the Closure Library.
+
+```coffeescript
+este.demos.react.todoApp = este.react.create (`/** @lends {React.ReactComponent.prototype} */`)
+  render: ->
+    @div [
+      este.demos.react.todoList 'items': @state['items']
+      if @state['items'].length
+        @p "#{@state['items'].length} items."
+      @form 'onSubmit': @onFormSubmit, [
+        @input
+          'onChange': @onChange
+          'value': @state['text']
+          'autoFocus': true
+          'ref': 'textInput'
+        @button "Add ##{@state['items'].length + 1}"
+      ]
+    ]
+```
+
+[Check it out on GitHub...](https://github.com/steida/este-library/blob/master/este/demos/thirdparty/react/start.coffee)
+
+## React Stylus Boilerplate {/*react-stylus-boilerplate*/}
+
+[Zaim Bakar](https://zaim.github.io/) shared his boilerplate to get started with Stylus CSS processor.
+
+> This is my boilerplate React project using Grunt as the build tool, and Stylus as my CSS preprocessor.
+>
+> - Very minimal HTML boilerplate
+> - Uses Stylus, with nib included
+> - Uses two build targets:
+>   - `grunt build` to compile JSX and Stylus into a development build
+>   - `grunt dist` to minify and optimize the development build for production
+>
+> [Check it out on GitHub...](https://github.com/zaim/react-stylus-boilerplate)
+
+## WebFUI {/*webfui*/}
+
+[Conrad Barski](http://lisperati.com/), author of the popular book [Land of Lisp](http://landoflisp.com/), wants to use React for his ClojureScript library called [WebFUI](https://github.com/drcode/webfui).
+
+> I'm the author of "[Land of Lisp](http://landoflisp.com/)" and I love your framework. I built a somewhat similar framework a year ago [WebFUI](https://github.com/drcode/webfui) aimed at ClojureScript. My framework also uses global event delegates, a global "render" function, DOM reconciliation, etc just like react.js. (Of course these ideas all have been floating around the ether for ages, always great to see more people building on them.)
+>
+> Your implementation is more robust, and so I think the next point release of webfui will simply delegate all the "hard work" to react.js and will only focus on the areas where it adds value (enabling purely functional UI programming in clojurescript, and some other stuff related to streamlining event handling)
+>
+> <figure><a href="https://groups.google.com/forum/#!msg/reactjs/e3bYersyd64/qODfcuBR9LwJ"><img src="/images/blog/landoflisp.png"/></a></figure>
+>
+> [Read the full post...](https://groups.google.com/forum/#!msg/reactjs/e3bYersyd64/qODfcuBR9LwJ)
diff --git a/beta/src/content/blog/2013/08/19/use-react-and-jsx-in-python-applications.md b/beta/src/content/blog/2013/08/19/use-react-and-jsx-in-python-applications.md
new file mode 100644
index 000000000..59f1646d9
--- /dev/null
+++ b/beta/src/content/blog/2013/08/19/use-react-and-jsx-in-python-applications.md
@@ -0,0 +1,55 @@
+---
+title: 'Use React and JSX in Python Applications'
+author: [kmeht]
+---
+
+Today we're happy to announce the initial release of [PyReact](https://github.com/facebook/react-python), which makes it easier to use React and JSX in your Python applications. It's designed to provide an API to transform your JSX files into JavaScript, as well as provide access to the latest React source files.
+
+## Usage {/*usage*/}
+
+Transform your JSX files via the provided `jsx` module:
+
+```python
+from react import jsx
+
+# For multiple paths, use the JSXTransformer class.
+transformer = jsx.JSXTransformer()
+for jsx_path, js_path in my_paths:
+    transformer.transform(jsx_path, js_path)
+
+# For a single file, you can use a shortcut method.
+jsx.transform('path/to/input/file.jsx', 'path/to/output/file.js')
+```
+
+For full paths to React files, use the `source` module:
+
+```python
+from react import source
+
+# path_for raises IOError if the file doesn't exist.
+react_js = source.path_for('react.min.js')
+```
+
+## Django {/*django*/}
+
+PyReact includes a JSX compiler for [django-pipeline](https://github.com/cyberdelia/django-pipeline). Add it to your project's pipeline settings like this:
+
+```python
+PIPELINE_COMPILERS = (
+  'react.utils.pipeline.JSXCompiler',
+)
+```
+
+## Installation {/*installation*/}
+
+PyReact is hosted on PyPI, and can be installed with `pip`:
+
+    $ pip install PyReact
+
+Alternatively, add it into your `requirements` file:
+
+    PyReact==0.1.1
+
+**Dependencies**: PyReact uses [PyExecJS](https://github.com/doloopwhile/PyExecJS) to execute the bundled React code, which requires that a JS runtime environment is installed on your machine. We don't explicitly set a dependency on a runtime environment; Mac OS X comes bundled with one. If you're on a different platform, we recommend [PyV8](https://code.google.com/p/pyv8/).
+
+For the initial release, we've only tested on Python 2.7. Look out for support for Python 3 in the future, and if you see anything that can be improved, we welcome your [contributions](https://github.com/facebook/react-python/blob/master/CONTRIBUTING.md)!
diff --git a/beta/src/content/blog/2013/08/26/community-roundup-7.md b/beta/src/content/blog/2013/08/26/community-roundup-7.md
new file mode 100644
index 000000000..6adff518d
--- /dev/null
+++ b/beta/src/content/blog/2013/08/26/community-roundup-7.md
@@ -0,0 +1,73 @@
+---
+title: 'Community Round-up #7'
+author: [vjeux]
+---
+
+It's been three months since we open sourced React and it is going well. Some stats so far:
+
+- 114 285 unique visitors on this website
+- [1933 stars](https://github.com/facebook/react/stargazers) and [210 forks](https://github.com/facebook/react/network/members)
+- [226 posts on Google Group](https://groups.google.com/forum/#!forum/reactjs)
+- [76 GitHub projects using React](https://gist.github.com/vjeux/6335762)
+- [30 contributors](https://github.com/facebook/react/graphs/contributors)
+- [15 blog posts](/blog/)
+- 2 early adopters: [Khan Academy](http://sophiebits.com/2013/06/09/using-react-to-speed-up-khan-academy.html) and [Propeller](http://usepropeller.com/blog/posts/from-backbone-to-react/)
+
+## Wolfenstein Rendering Engine Ported to React {/*wolfenstein-rendering-engine-ported-to-react*/}
+
+[Pete Hunt](http://www.petehunt.net/) ported the render code of the web version of Wolfenstein 3D to React. Check out [the demo](http://www.petehunt.net/wolfenstein3D-react/wolf3d.html) and [render.js](https://github.com/petehunt/wolfenstein3D-react/blob/master/js/renderer.js#L183) file for the implementation.
+
+<figure><a href="http://www.petehunt.net/wolfenstein3D-react/wolf3d.html"><img src="/images/blog/wolfenstein_react.png"/></a></figure>
+
+## React & Meteor {/*react--meteor*/}
+
+[Ben Newman](https://twitter.com/benjamn) made a [13-lines wrapper](https://github.com/benjamn/meteor-react/blob/master/lib/mixin.js) to use React and Meteor together. [Meteor](http://www.meteor.com/) handles the real-time data synchronization between client and server. React provides the declarative way to write the interface and only updates the parts of the UI that changed.
+
+> This repository defines a Meteor package that automatically integrates the React rendering framework on both the client and the server, to complement or replace the default Handlebars templating system.
+>
+> The React core is officially agnostic about how you fetch and update your data, so it is far from obvious which approach is the best. This package provides one answer to that question (use Meteor!), and I hope you will find it a compelling combination.
+>
+> ```javascript
+> var MyComponent = React.createClass({
+>   mixins: [MeteorMixin],
+>
+>   getMeteorState: function () {
+>     return {foo: Session.get('foo')};
+>   },
+>
+>   render: function () {
+>     return <div>{this.state.foo}</div>;
+>   },
+> });
+> ```
+>
+> Dependencies will be registered for any data accesses performed by getMeteorState so that the component can be automatically re-rendered whenever the data changes.
+>
+> [Read more ...](https://github.com/benjamn/meteor-react)
+
+## React Page {/*react-page*/}
+
+[Jordan Walke](https://github.com/jordwalke) implemented a complete React project creator called [react-page](https://github.com/facebook/react-page/). It supports both server-side and client-side rendering, source transform and packaging JSX files using CommonJS modules, and instant reload.
+
+> Easy Application Development with React JavaScript
+>
+> <figure><a href="https://github.com/facebook/react-page/"><img src="/images/blog/react-page.png"/></a></figure>
+>
+> **Why Server Rendering?**
+>
+> - Faster initial page speed:
+>   - Markup displayed before downloading large JavaScript.
+>   - Markup can be generated more quickly on a fast server than low power client devices.
+> - Faster Development and Prototyping:
+>   - Instantly refresh your app without waiting for any watch scripts or bundlers.
+> - Easy deployment of static content pages/blogs: just archive using recursive wget.
+> - SEO benefits of indexability and perf.
+>
+> **How Does Server Rendering Work?**
+>
+> - `react-page` computes page markup on the server, sends it to the client so the user can see it quickly.
+> - The corresponding JavaScript is then packaged and sent.
+> - The browser runs that JavaScript, so that all of the event handlers, interactions and update code will run seamlessly on top of the server generated markup.
+> - From the developer's (and the user's) perspective, it's just as if the rendering occurred on the client, only faster.
+>
+> [Try it out ...](https://github.com/facebook/react-page/)
diff --git a/beta/src/content/blog/2013/09/24/community-roundup-8.md b/beta/src/content/blog/2013/09/24/community-roundup-8.md
new file mode 100644
index 000000000..3c4d210c9
--- /dev/null
+++ b/beta/src/content/blog/2013/09/24/community-roundup-8.md
@@ -0,0 +1,66 @@
+---
+title: 'Community Round-up #8'
+author: [vjeux]
+---
+
+A lot has happened in the month since our last update. Here are some of the more interesting things we've found. But first, we have a couple updates before we share links.
+
+First, we are organizing a [React Hackathon](http://reactjshack-a-thon.splashthat.com/) in Facebook's Seattle office on Saturday September 28. If you want to hack on React, meet some of the team or win some prizes, feel free to join us!
+
+We've also reached a point where there are too many questions for us to handle directly. We're encouraging people to ask questions on [StackOverflow](http://stackoverflow.com/questions/tagged/reactjs) using the tag [[reactjs]](http://stackoverflow.com/questions/tagged/reactjs). Many members of the team and community have subscribed to the tag, so feel free to ask questions there. We think these will be more discoverable than Google Groups archives or IRC logs.
+
+## JavaScript Jabber {/*javascript-jabber*/}
+
+[Pete Hunt](http://www.petehunt.net/) and [Jordan Walke](https://github.com/jordwalke) were interviewed on [JavaScript Jabber](http://javascriptjabber.com/073-jsj-react-with-pete-hunt-and-jordan-walke/) for an hour. They go over many aspects of React such as 60 FPS, Data binding, Performance, Diffing Algorithm, DOM Manipulation, Node.js support, server-side rendering, JSX, requestAnimationFrame and the community. This is a gold mine of information about React.
+
+> **PETE:** So React was designed all around that. Conceptually, how you build a React app is that every time your data changes, it's like hitting the refresh button in a server-rendered app. What we do is we conceptually throw out all of the markup and event handlers that you've registered and we reset the whole page and then we redraw the entire page. If you're writing a server-rendered app, handling updates is really easy because you hit the refresh button and you're pretty much guaranteed to get what you expect.
+>
+> **MERRICK:** That's true. You don't get into these odd states.
+>
+> **PETE:** Exactly, exactly. In order to implement that, we communicate it as a fake DOM. What we'll do is rather than throw out the actual browser html and event handlers, we have an internal representation of what the page looks like and then we generate a brand new representation of what we want the page to look like. Then we perform this really, really fast diffing algorithm between those two page representations, DOM representations. Then React will compute the minimum set of DOM mutations it needs to make to bring the page up to date.
+>
+> Then to finally get to answer your question, that set of DOM mutations then goes into a queue and we can plug in arbitrary flushing strategies for that. For example, when we originally launched React in open source, every setState would immediately trigger a flush to the DOM. That wasn't part of the contract of setState, but that was just our strategy and it worked pretty well. Then this totally awesome open source contributor Sophie Alpert at Khan Academy built a new batching strategy which would basically queue up every single DOM update and state change that happened within an event tick and would execute them in bulk at the end of the event tick.
+>
+> [Read the full conversation ...](http://javascriptjabber.com/073-jsj-react-with-pete-hunt-and-jordan-walke/)
+
+## JSXTransformer Trick {/*jsxtransformer-trick*/}
+
+While this is not going to work for all the attributes since they are camelCased in React, this is a pretty cool trick.
+
+<div style={{marginLeft: 74}}><blockquote className="twitter-tweet"><p>Turn any DOM element into a React.js function: JSXTransformer.transform("/** <a href="https://twitter.com/jsx">@jsx</a> React.DOM */" + element.innerHTML).code</p>— Ross Allen (@ssorallen) <a href="https://twitter.com/ssorallen/statuses/377105575441489920">September 9, 2013</a></blockquote></div>
+
+## Remarkable React {/*remarkable-react*/}
+
+[Stoyan Stefanov](http://www.phpied.com/) gave a talk at [BrazilJS](http://braziljs.com.br/) about React and wrote an article with the content of the presentation. He goes through the difficulties of writing _active apps_ using the DOM API and shows how React handles it.
+
+> So how does exactly React deal with it internally? Two crazy ideas - virtual DOM and synthetic events.
+>
+> You define you components in React. It builds a virtual DOM in JavaScript land which is way more efficient. Then it updates the DOM. (And "virtual DOM" is a very big name for what is simply a JavaScript object with nested key-value pairs)
+>
+> Data changes. React computes a diff (in JavaScript land, which is, of course, much more efficient) and updates the single table cell that needs to change. React replicates the state of the virtual DOM into the actual DOM only when and where it's necessary. And does it all at once, in most cases in a single tick of the `requestAnimationFrame()`.
+>
+> What about event handlers? They are synthetic. React uses event delegation to listen way at the top of the React tree. So removing a node in the virtual DOM has no effect on the event handling.
+>
+> The events are automatically cross-browser (they are React events). They are also much closer to W3C than any browser. That means that for example `e.target` works, no need to look for the event object or checking whether it's `e.target` or `e.srcElement` (IE). Bubbling and capturing phases also work cross browser. React also takes the liberty of making some small fixes, e.g. the event `<input onChange>` fires when you type, not when blur away from the input. And of course, event delegation is used as the most efficient way to handle events. You know that "thou shall use event delegation" is also commonly given advice for making web apps snappy.
+>
+> The good thing about the virtual DOM is that it's all in JavaScript land. You build all your UI in JavaScript. Which means it can be rendered on the server side, so you initial view is fast (and any SEO concerns are addressed). Also, if there are especially heavy operations they can be threaded into WebWorkers, which otherwise have no DOM access.
+>
+> [Read More ...](http://www.phpied.com/remarkable-react/)
+
+## Markdown in React {/*markdown-in-react*/}
+
+[Sophie Alpert](http://sophiebits.com/) converted [marked](https://github.com/chjj/marked), a Markdown JavaScript implementation, in React: [marked-react](https://github.com/sophiebits/marked-react). Even without using JSX, the HTML generation is now a lot cleaner. It is also safer as forgetting a call to `escape` will not introduce an XSS vulnerability.
+
+<figure><a href="https://github.com/sophiebits/marked-react/commit/cb70c9df6542c7c34ede9efe16f9b6580692a457"><img src="/images/blog/markdown_refactor.png"/></a></figure>
+
+## Unite from BugBusters {/*unite-from-bugbusters*/}
+
+[Renault John Lecoultre](https://twitter.com/renajohn) wrote [Unite](https://www.bugbuster.com/), an interactive tool for analyzing code dynamically using React. It integrates with CodeMirror.
+
+<figure><a href="https://unite.bugbuster.com/"><img src="/images/blog/unite.png"/></a></figure>
+
+## #reactjs IRC Logs {/*reactjs-irc-logs*/}
+
+[Vjeux](http://blog.vjeux.com/) re-implemented the display part of the IRC logger in React. Just 130 lines are needed for a performant infinite scroll with timestamps and color-coded author names.
+
+[View the source on JSFiddle...](http://jsfiddle.net/vjeux/QL9tz)
diff --git a/beta/src/content/blog/2013/10/03/community-roundup-9.md b/beta/src/content/blog/2013/10/03/community-roundup-9.md
new file mode 100644
index 000000000..f25d7ef6f
--- /dev/null
+++ b/beta/src/content/blog/2013/10/03/community-roundup-9.md
@@ -0,0 +1,95 @@
+---
+title: 'Community Round-up #9'
+author: [vjeux]
+---
+
+We organized a React hackathon last week-end in the Facebook Seattle office. 50 people, grouped into 15 teams, came to hack for a day on React. It was a lot of fun and we'll probably organize more in the future.
+
+![](/images/blog/react-hackathon.jpg)
+
+## React Hackathon Winner {/*react-hackathon-winner*/}
+
+[Alex Swan](http://bold-it.com/) implemented [Qu.izti.me](http://qu.izti.me/), a multi-player quiz game. It is real-time via Web Socket and mobile friendly.
+
+> The game itself is pretty simple. People join the "room" by going to [http://qu.izti.me](http://qu.izti.me/) on their device. Large displays will show a leaderboard along with the game, and small displays (such as phones) will act as personal gamepads. Users will see questions and a choice of answers. The faster you answer, the more points you earn.
+>
+> In my opinion, Socket.io and React go together like chocolate and peanut butter. The page was always an accurate representation of the game object.
+>
+> <figure><a href="http://bold-it.com/javascript/facebook-react-example/"><img src="/images/blog/quiztime.png"/></a></figure>
+>
+> [Read More...](http://bold-it.com/javascript/facebook-react-example/)
+
+## JSConf EU Talk: Rethinking Best Practices {/*jsconf-eu-talk-rethinking-best-practices*/}
+
+[Pete Hunt](http://www.petehunt.net/) presented React at JSConf EU. He covers three controversial design decisions of React:
+
+1. Build **components**, not templates
+2. Re-render the whole app on every update
+3. Virtual DOM
+
+The video will be available soon on the [JSConf EU website](http://2013.jsconf.eu/speakers/pete-hunt-react-rethinking-best-practices.html), but in the meantime, here are Pete's slides:
+
+<figure><iframe src="https://www.slideshare.net/slideshow/embed_code/26589373" width="100%" height="450" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" allowfullscreen></iframe></figure>
+
+## Pump - Clojure bindings for React {/*pump---clojure-bindings-for-react*/}
+
+[Alexander Solovyov](http://solovyov.net/) has been working on React bindings for ClojureScript. This is really exciting as it is using "native" ClojureScript data structures.
+
+```ruby
+(ns your.app
+  (:require-macros [pump.def-macros :refer [defr]])
+  (:require [pump.core]))
+
+(defr Component
+  :get-initial-state #(identity {:some-value ""})
+
+  [component props state]
+
+  [:div {:class-name "test"} "hello"])
+```
+
+[Check it out on GitHub...](https://github.com/piranha/pump)
+
+## JSXHint {/*jsxhint*/}
+
+[Todd Kennedy](http://blog.selfassembled.org/) working at [Cond&eacute; Nast](http://www.condenast.com/) implemented a wrapper on-top of [JSHint](http://www.jshint.com/) that first converts JSX files to JS.
+
+> A wrapper around JSHint to allow linting of files containing JSX syntax. Accepts glob patterns. Respects your local .jshintrc file and .gitignore to filter your glob patterns.
+>
+> ```
+> npm install -g jsxhint
+> ```
+>
+> [Check it out on GitHub...](https://github.com/CondeNast/JSXHint)
+
+## Turbo React {/*turbo-react*/}
+
+[Ross Allen](https://twitter.com/ssorallen) working at [Mesosphere](http://mesosphere.io/) combined [Turbolinks](https://github.com/rails/turbolinks/), a library used by Ruby on Rails to speed up page transition, and React.
+
+> "Re-request this page" is just a link to the current page. When you click it, Turbolinks intercepts the GET request and fetchs the full page via XHR.
+>
+> The panel is rendered with a random panel- class on each request, and the progress bar gets a random widthX class.
+>
+> With Turbolinks alone, the entire `<body>` would be replaced, and transitions would not happen. In this little demo though, React adds and removes classes and text, and the attribute changes are animated with CSS transitions. The DOM is otherwise left intact.
+>
+> <figure><a href="https://turbo-react.herokuapp.com/"><img src="/images/blog/turboreact.png"/></a></figure>
+>
+> [Check out the demo...](https://turbo-react.herokuapp.com/)
+
+## Reactive Table {/*reactive-table*/}
+
+[Stoyan Stefanov](http://www.phpied.com/) continues his series of blog posts about React. This one is an introduction tutorial on rendering a simple table with React.
+
+> React is all about components. So let's build one.
+>
+> Let's call it Table (to avoid any confusion what the component is about).
+>
+> ```javascript
+> var Table = React.createClass({
+>   /*stuff goeth here*/
+> });
+> ```
+>
+> You see that React components are defined using a regular JS object. Some properties and methods of the object such as render() have special meanings, the rest is upforgrabs.
+>
+> [Read the full article...](http://www.phpied.com/reactive-table/)
diff --git a/beta/src/content/blog/2013/10/16/react-v0.5.0.md b/beta/src/content/blog/2013/10/16/react-v0.5.0.md
new file mode 100644
index 000000000..73e3f2372
--- /dev/null
+++ b/beta/src/content/blog/2013/10/16/react-v0.5.0.md
@@ -0,0 +1,50 @@
+---
+title: 'React v0.5'
+author: [zpao]
+---
+
+This release is the result of several months of hard work from members of the team and the community. While there are no groundbreaking changes in core, we've worked hard to improve performance and memory usage. We've also worked hard to make sure we are being consistent in our usage of DOM properties.
+
+The biggest change you'll notice as a developer is that we no longer support `class` in JSX as a way to provide CSS classes. Since this prop was being converted to `className` at the transform step, it caused some confusion when trying to access it in composite components. As a result we decided to make our DOM properties mirror their counterparts in the JS DOM API. There are [a few exceptions](https://github.com/facebook/react/blob/master/src/dom/DefaultDOMPropertyConfig.js#L156) where we deviate slightly in an attempt to be consistent internally.
+
+The other major change in v0.5 is that we've added an additional build - `react-with-addons` - which adds support for some extras that we've been working on including animations and two-way binding. [Read more about these addons in the docs](/docs/addons.html).
+
+## Thanks to Our Community {/*thanks-to-our-community*/}
+
+We added _22 new people_ to the list of authors since we launched React v0.4.1 nearly 3 months ago. With a total of 48 names in our `AUTHORS` file, that means we've nearly doubled the number of contributors in that time period. We've seen the number of people contributing to discussion on IRC, mailing lists, Stack Overflow, and GitHub continue rising. We've also had people tell us about talks they've given in their local community about React.
+
+It's been awesome to see the things that people are building with React, and we can't wait to see what you come up with next!
+
+## Changelog {/*changelog*/}
+
+### React {/*react*/}
+
+- Memory usage improvements - reduced allocations in core which will help with GC pauses
+- Performance improvements - in addition to speeding things up, we made some tweaks to stay out of slow path code in V8 and Nitro.
+- Standardized prop -> DOM attribute process. This previously resulting in additional type checking and overhead as well as confusing cases for users. Now we will always convert your value to a string before inserting it into the DOM.
+- Support for Selection events.
+- Support for [Composition events](https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent).
+- Support for additional DOM properties (`charSet`, `content`, `form`, `httpEquiv`, `rowSpan`, `autoCapitalize`).
+- Support for additional SVG properties (`rx`, `ry`).
+- Support for using `getInitialState` and `getDefaultProps` in mixins.
+- Support mounting into iframes.
+- Bug fixes for controlled form components.
+- Bug fixes for SVG element creation.
+- Added `React.version`.
+- Added `React.isValidClass` - Used to determine if a value is a valid component constructor.
+- Removed `React.autoBind` - This was deprecated in v0.4 and now properly removed.
+- Renamed `React.unmountAndReleaseReactRootNode` to `React.unmountComponentAtNode`.
+- Began laying down work for refined performance analysis.
+- Better support for server-side rendering - [react-page](https://github.com/facebook/react-page) has helped improve the stability for server-side rendering.
+- Made it possible to use React in environments enforcing a strict [Content Security Policy](https://developer.mozilla.org/en-US/docs/Security/CSP/Introducing_Content_Security_Policy). This also makes it possible to use React to build Chrome extensions.
+
+### React with Addons (New!) {/*react-with-addons-new*/}
+
+- Introduced a separate build with several "addons" which we think can help improve the React experience. We plan to deprecate this in the long-term, instead shipping each as standalone pieces. [Read more in the docs](/docs/addons.html).
+
+### JSX {/*jsx*/}
+
+- No longer transform `class` to `className` as part of the transform! This is a breaking change - if you were using `class`, you _must_ change this to `className` or your components will be visually broken.
+- Added warnings to the in-browser transformer to make it clear it is not intended for production use.
+- Improved compatibility for Windows
+- Improved support for maintaining line numbers when transforming.
diff --git a/beta/src/content/blog/2013/10/29/react-v0-5-1.md b/beta/src/content/blog/2013/10/29/react-v0-5-1.md
new file mode 100644
index 000000000..d6905a102
--- /dev/null
+++ b/beta/src/content/blog/2013/10/29/react-v0-5-1.md
@@ -0,0 +1,23 @@
+---
+title: 'React v0.5.1'
+author: [zpao]
+---
+
+This release focuses on fixing some small bugs that have been uncovered over the past two weeks. I would like to thank everybody involved, specifically members of the community who fixed half of the issues found. Thanks to [Sophie Alpert][1], [Andrey Popp][2], and [Laurence Rowe][3] for their contributions!
+
+## Changelog {/*changelog*/}
+
+### React {/*react*/}
+
+- Fixed bug with `<input type="range">` and selection events.
+- Fixed bug with selection and focus.
+- Made it possible to unmount components from the document root.
+- Fixed bug for `disabled` attribute handling on non-`<input>` elements.
+
+### React with Addons {/*react-with-addons*/}
+
+- Fixed bug with transition and animation event detection.
+
+[1]: https://github.com/sophiebits
+[2]: https://github.com/andreypopp
+[3]: https://github.com/lrowe
diff --git a/beta/src/content/blog/2013/11/06/community-roundup-10.md b/beta/src/content/blog/2013/11/06/community-roundup-10.md
new file mode 100644
index 000000000..a9830fef9
--- /dev/null
+++ b/beta/src/content/blog/2013/11/06/community-roundup-10.md
@@ -0,0 +1,122 @@
+---
+title: 'Community Round-up #10'
+author: [vjeux]
+---
+
+This is the 10th round-up already and React has come quite far since it was open sourced. Almost all new web projects at Khan Academy, Facebook, and Instagram are being developed using React. React has been deployed in a variety of contexts: a Chrome extension, a Windows 8 application, mobile websites, and desktop websites supporting Internet Explorer 8! Language-wise, React is not only being used within JavaScript but also CoffeeScript and ClojureScript.
+
+The best part is that no drastic changes have been required to support all those use cases. Most of the efforts were targeted at polishing edge cases, performance improvements, and documentation.
+
+## Khan Academy - Officially moving to React {/*khan-academy---officially-moving-to-react*/}
+
+[Joel Burget](http://joelburget.com/) announced at Hack Reactor that new front-end code at Khan Academy should be written in React!
+
+> How did we get the rest of the team to adopt React? Using interns as an attack vector! Most full-time devs had already been working on their existing projects for a while and weren't looking to try something new at the time, but our class of summer interns was just arriving. For whatever reason, a lot of them decided to try React for their projects. Then mentors became exposed through code reviews or otherwise touching the new code. In this way React knowledge diffused to almost the whole team over the summer.
+>
+> Since the first React checkin on June 5, we've somehow managed to accumulate 23500 lines of jsx (React-flavored js) code. Which is terrifying in a way - that's a lot of code - but also really exciting that it was picked up so quickly.
+>
+> We held three meetings about how we should proceed with React. At the first two we decided to continue experimenting with React and deferred a final decision on whether to adopt it. At the third we adopted the policy that new code should be written in React.
+>
+> I'm excited that we were able to start nudging code quality forward. However, we still have a lot of work to do! One of the selling points of this transition is adopting a uniform frontend style. We're trying to upgrade all the code from (really old) pure jQuery and (regular old) Backbone views / Handlebars to shiny React. At the moment all we've done is introduce more fragmentation. We won't be gratuitously updating working code (if it ain't broke, don't fix it), but are seeking out parts of the codebase where we can shoot two birds with one stone by rewriting in React while fixing bugs or adding functionality.
+>
+> [Read the full article](http://joelburget.com/backbone-to-react/)
+
+## React: Rethinking best practices {/*react-rethinking-best-practices*/}
+
+[Pete Hunt](http://www.petehunt.net/)'s talk at JSConf EU 2013 is now available in video.
+
+<figure><iframe width="650" height="370" src="//www.youtube-nocookie.com/embed/x7cQ3mrcKaY" frameborder="0" allowfullscreen></iframe></figure>
+
+## Server-side React with PHP {/*server-side-react-with-php*/}
+
+[Stoyan Stefanov](http://www.phpied.com/)'s series of articles on React has two new entries on how to execute React on the server to generate the initial page load.
+
+> This post is an initial hack to have React components render server-side in PHP.
+>
+> - Problem: Build web UIs
+> - Solution: React
+> - Problem: UI built in JS is anti-SEO (assuming search engines are still noscript) and bad for perceived performance (blank page till JS arrives)
+> - Solution: [React page](https://github.com/facebook/react-page) to render the first view
+> - Problem: Can't host node.js apps / I have tons of PHP code
+> - Solution: Use PHP then!
+>
+> [**Read part 1 ...**](http://www.phpied.com/server-side-react-with-php/)
+>
+> [**Read part 2 ...**](http://www.phpied.com/server-side-react-with-php-part-2/)
+>
+> Rendered markup on the server:
+>
+> <figure><a href="http://www.phpied.com/server-side-react-with-php-part-2/"><img src="/images/blog/react-php.png"/></a></figure>
+
+## TodoMVC Benchmarks {/*todomvc-benchmarks*/}
+
+Webkit has a [TodoMVC Benchmark](https://github.com/WebKit/webkit/tree/master/PerformanceTests/DoYouEvenBench) that compares different frameworks. They recently included React and here are the results (average of 10 runs in Chrome 30):
+
+- **AngularJS:** 4043ms
+- **AngularJSPerf:** 3227ms
+- **BackboneJS:** 1874ms
+- **EmberJS:** 6822ms
+- **jQuery:** 14628ms
+- **React:** 2864ms
+- **VanillaJS:** 5567ms
+
+[Try it yourself!](http://www.petehunt.net/react/tastejs/benchmark.html)
+
+Please don't take those numbers too seriously, they only reflect one very specific use case and are testing code that wasn't written with performance in mind.
+
+Even though React scores as one of the fastest frameworks in the benchmark, the React code is simple and idiomatic. The only performance tweak used is the following function:
+
+```javascript
+/**
+ * This is a completely optional performance enhancement that you can implement
+ * on any React component. If you were to delete this method the app would still
+ * work correctly (and still be very performant!), we just use it as an example
+ * of how little code it takes to get an order of magnitude performance improvement.
+ */
+shouldComponentUpdate: function (nextProps, nextState) {
+  return (
+    nextProps.todo.id !== this.props.todo.id ||
+    nextProps.todo !== this.props.todo ||
+    nextProps.editing !== this.props.editing ||
+    nextState.editText !== this.state.editText
+  );
+},
+```
+
+By default, React "re-renders" all the components when anything changes. This is usually fast enough that you don't need to care. However, you can provide a function that can tell whether there will be any change based on the previous and next states and props. If it is faster than re-rendering the component, then you get a performance improvement.
+
+The fact that you can control when components are rendered is a very important characteristic of React as it gives you control over its performance. We are going to talk more about performance in the future, stay tuned.
+
+## Guess the filter {/*guess-the-filter*/}
+
+[Connor McSheffrey](http://conr.me) implemented a small game using React. The goal is to guess which filter has been used to create the Instagram photo.
+
+<figure><a href="http://guessthefilter.com/"><img src="/images/blog/guess_filter.jpg"/></a></figure>
+
+## React vs FruitMachine {/*react-vs-fruitmachine*/}
+
+[Andrew Betts](http://trib.tv/), director of the [Financial Times Labs](http://labs.ft.com/), posted an article comparing [FruitMachine](https://github.com/ftlabs/fruitmachine) and React.
+
+> Eerily similar, no? Maybe Facebook was inspired by Fruit Machine (after all, we got there first), but more likely, it just shows that this is a pretty decent way to solve the problem, and great minds think alike. We're graduating to a third phase in the evolution of web best practice - from intermingling of markup, style and behaviour, through a phase in which those concerns became ever more separated and encapsulated, and finally to a model where we can do that separation at a component level. Developments like Web Components show the direction the web community is moving, and frameworks like React and Fruit Machine are in fact not a lot more than polyfills for that promised behaviour to come.
+>
+> [Read the full article...](http://labs.ft.com/2013/10/client-side-layout-engines-react-vs-fruitmachine/)
+
+Even though we weren't inspired by FruitMachine (React has been used in production since before FruitMachine was open sourced), it's great to see similar technologies emerging and becoming popular.
+
+## React Brunch {/*react-brunch*/}
+
+[Matthew McCray](http://elucidata.net/) implemented [react-brunch](https://npmjs.org/package/react-brunch), a JSX compilation step for [Brunch](http://brunch.io/).
+
+> Adds React support to brunch by automatically compiling `*.jsx` files.
+>
+> You can configure react-brunch to automatically insert a react header (`/** @jsx React.DOM */`) into all `*.jsx` files. Disabled by default.
+>
+> Install the plugin via npm with `npm install --save react-brunch`.
+>
+> [Read more...](https://npmjs.org/package/react-brunch)
+
+## Random Tweet {/*random-tweet*/}
+
+I'm going to start adding a tweet at the end of each round-up. We'll start with this one:
+
+<blockquote class="twitter-tweet"><p>This weekend <a href="https://twitter.com/search?q=%23angular&amp;src=hash">#angular</a> died for me. Meet new king <a href="https://twitter.com/search?q=%23reactjs&amp;src=hash">#reactjs</a></p>&mdash; Eldar Djafarov &#x30C3; (@edjafarov) <a href="https://twitter.com/edjafarov/statuses/397033796710961152">November 3, 2013</a></blockquote>
diff --git a/beta/src/content/blog/2013/11/18/community-roundup-11.md b/beta/src/content/blog/2013/11/18/community-roundup-11.md
new file mode 100644
index 000000000..c5bbbb997
--- /dev/null
+++ b/beta/src/content/blog/2013/11/18/community-roundup-11.md
@@ -0,0 +1,91 @@
+---
+title: 'Community Round-up #11'
+author: [vjeux]
+---
+
+This round-up is the proof that React has taken off from its Facebook's root: it features three in-depth presentations of React done by external people. This is awesome, keep them coming!
+
+## Super VanJS 2013 Talk {/*super-vanjs-2013-talk*/}
+
+[Steve Luscher](https://github.com/steveluscher) working at [LeanPub](https://leanpub.com/) made a 30 min talk at [Super VanJS](https://twitter.com/vanjs). He does a remarkable job at explaining why React is so fast with very exciting demos using the HTML5 Audio API.
+
+<figure><iframe width="650" height="338" src="//www.youtube-nocookie.com/embed/1OeXsL5mr4g" frameborder="0" allowfullscreen></iframe></figure>
+
+## React Tips {/*react-tips*/}
+
+[Connor McSheffrey](http://connormcsheffrey.com/) and [Cheng Lou](https://github.com/chenglou) added a new section to the documentation. It's a list of small tips that you will probably find useful while working on React. Since each article is very small and focused, we [encourage you to contribute](/tips/introduction.html)!
+
+- [Inline Styles](/tips/inline-styles.html)
+- [If-Else in JSX](/tips/if-else-in-JSX.html)
+- [Self-Closing Tag](/tips/self-closing-tag.html)
+- [Maximum Number of JSX Root Nodes](/tips/maximum-number-of-jsx-root-nodes.html)
+- [Shorthand for Specifying Pixel Values in style props](/tips/style-props-value-px.html)
+- [Type of the Children props](/tips/children-props-type.html)
+- [Value of null for Controlled Input](/tips/controlled-input-null-value.html)
+- [`componentWillReceiveProps` Not Triggered After Mounting](/tips/componentWillReceiveProps-not-triggered-after-mounting.html)
+- [Props in getInitialState Is an Anti-Pattern](/tips/props-in-getInitialState-as-anti-pattern.html)
+- [DOM Event Listeners in a Component](/tips/dom-event-listeners.html)
+- [Load Initial Data via AJAX](/tips/initial-ajax.html)
+- [False in JSX](/tips/false-in-jsx.html)
+
+## Intro to the React Framework {/*intro-to-the-react-framework*/}
+
+[Pavan Podila](http://blog.pixelingene.com/) wrote an in-depth introduction to React on TutsPlus. This is definitively worth reading.
+
+> Within a component-tree, data should always flow down. A parent-component should set the props of a child-component to pass any data from the parent to the child. This is termed as the Owner-Owned pair. On the other hand user-events (mouse, keyboard, touches) will always bubble up from the child all the way to the root component, unless handled in between.
+
+<figure><a href="http://dev.tutsplus.com/tutorials/intro-to-the-react-framework--net-35660"><img src="/images/blog/tutsplus.png"/></a></figure>
+>
+> [Read the full article ...](http://dev.tutsplus.com/tutorials/intro-to-the-react-framework--net-35660)
+
+## 140-characters textarea {/*140-characters-textarea*/}
+
+[Brian Kim](https://github.com/brainkim) wrote a small textarea component that gradually turns red as you reach the 140-characters limit. Because he only changes the background color, React is smart enough not to mess with the text selection.
+
+<p data-height="178" data-theme-id="0" data-slug-hash="FECGb" data-user="brainkim" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/brainkim/pen/FECGb'>FECGb</a> by Brian Kim (<a href='http://codepen.io/brainkim'>@brainkim</a>) on <a href='http://codepen.io'>CodePen</a></p>
+<script async src="//codepen.io/assets/embed/ei.js"></script>
+
+## Genesis Skeleton {/*genesis-skeleton*/}
+
+[Eric Clemmons](https://ericclemmons.github.io/) is working on a "Modern, opinionated, full-stack starter kit for rapid, streamlined application development". The version 0.4.0 has just been released and has first-class support for React.
+
+<figure><a href="http://genesis-skeleton.com/"><img src="/images/blog/genesis_skeleton.png"/></a>a></figure>
+
+## AgFlow Talk {/*agflow-talk*/}
+
+[Robert Zaremba](http://rz.scale-it.pl/) working on [AgFlow](http://www.agflow.com/) recently talked in Poland about React.
+
+> In a nutshell, I presented why we chose React among other available options (ember.js, angular, backbone ...) in AgFlow, where I’m leading an application development.
+>
+> During the talk a wanted to highlight that React is not about implementing a Model, but a way to construct visible components with some state. React is simple. It is super simple, you can learn it in 1h. On the other hand what is model? Which functionality it should provide? React does one thing and does it the best (for me)!
+>
+> [Read the full article...](http://rz.scale-it.pl/2013/10/20/frontend_components_in_react.html)
+
+<figure><iframe src="https://docs.google.com/presentation/d/1JSFbjCuuexwOHCeHWBMNRIJdyfD2Z0ZQwX65WOWkfaI/embed?start=false" frameborder="0" width="100%" height="468" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"> </iframe></figure>
+
+## JSX {/*jsx*/}
+
+[Todd Kennedy](http://tck.io/) working at Cond&eacute; Nast wrote [JSXHint](https://github.com/CondeNast/JSXHint) and explains in a blog post his perspective on JSX.
+
+> Lets start with the elephant in the room: JSX?
+> Is this some sort of template language? Specifically no. This might have been the first big stumbling block. What looks like to be a templating language is actually an in-line DSL that gets transpiled directly into JavaScript by the JSX transpiler.
+>
+> Creating elements in memory is quick -- copying those elements into the DOM is where the slowness occurs. This is due to a variety of issues, most namely reflow/paint. Changing the items in the DOM causes the browser to re-paint the display, apply styles, etc. We want to keep those operations to an absolute minimum, especially if we're dealing with something that needs to update the DOM frequently.
+>
+> [Read the full article...](http://tck.io/posts/jsxhint_and_react.html)
+
+## Photo Gallery {/*photo-gallery*/}
+
+[Maykel Loomans](http://miekd.com/), designer at Instagram, wrote a gallery for photos he shot using React.
+
+<figure><a href="http://photos.miekd.com/xoxo2013/"><img src="/images/blog/xoxo2013.png"/></a>a></figure>
+
+## Random Tweet {/*random-tweet*/}
+
+<img src="/images/blog/steve_reverse.gif" style={{float: 'right'}} />
+
+<div style={{width: 320}}>
+<blockquote class="twitter-tweet">
+  <p>I think this reversed gif of Steve Urkel best describes my changing emotions towards the React Lib <a href="http://t.co/JoX0XqSXX3">http://t.co/JoX0XqSXX3</a></p>&mdash; Ryan Seddon (@ryanseddon) <a href="https://twitter.com/ryanseddon/statuses/398572848802852864">November 7, 2013</a>
+</blockquote>
+</div>
diff --git a/beta/src/content/blog/2013/12/18/react-v0.5.2-v0.4.2.md b/beta/src/content/blog/2013/12/18/react-v0.5.2-v0.4.2.md
new file mode 100644
index 000000000..7f3567e42
--- /dev/null
+++ b/beta/src/content/blog/2013/12/18/react-v0.5.2-v0.4.2.md
@@ -0,0 +1,21 @@
+---
+title: 'React v0.5.2, v0.4.2'
+author: [zpao]
+---
+
+Today we're releasing an update to address a potential XSS vulnerability that can arise when using user data as a `key`. Typically "safe" data is used for a `key`, for example, an id from your database, or a unique hash. However there are cases where it may be reasonable to use user generated content. A carefully crafted piece of content could result in arbitrary JS execution. While we make a very concerted effort to ensure all text is escaped before inserting it into the DOM, we missed one case. Immediately following the discovery of this vulnerability, we performed an audit to ensure we this was the only such vulnerability.
+
+This only affects v0.5.x and v0.4.x. Versions in the 0.3.x family are unaffected.
+
+Updated versions are available for immediate download via npm, bower, and on our [download page][download].
+
+We take security very seriously at Facebook. For most of our products, users don't need to know that a security issue has been fixed. But with libraries like React, we need to make sure developers using React have access to fixes to keep their users safe.
+
+While we've encouraged responsible disclosure as part of [Facebook's whitehat bounty program][bounty] since we launched, we don't have a good process for notifying our users. Hopefully we don't need to use it, but moving forward we'll set up a little bit more process to ensure the safety of our users. Ember.js has [an excellent policy][ember] which we may use as our model.
+
+You can learn more about the vulnerability discussed here: [CVE-2013-7035][cve].
+
+[download]: /react/downloads.html
+[bounty]: https://www.facebook.com/whitehat/
+[ember]: http://emberjs.com/security/
+[cve]: https://groups.google.com/forum/#!topic/reactjs/OIqxlB2aGfU
diff --git a/beta/src/content/blog/2013/12/19/react-v0.8.0.md b/beta/src/content/blog/2013/12/19/react-v0.8.0.md
new file mode 100644
index 000000000..9998b162e
--- /dev/null
+++ b/beta/src/content/blog/2013/12/19/react-v0.8.0.md
@@ -0,0 +1,46 @@
+---
+title: 'React v0.8'
+author: [zpao]
+---
+
+I'll start by answering the obvious question:
+
+> What happened to 0.6 and 0.7?
+
+It's become increasingly obvious since our launch in May that people want to use React on the server. With the server-side rendering abilities, that's a perfect fit. However using the same copy of React on the server and then packaging it up for the client is surprisingly a harder problem. People have been using our `react-tools` module which includes React, but when browserifying that ends up packaging all of `esprima` and some other dependencies that aren't needed on the client. So we wanted to make this whole experience better.
+
+We talked with [Jeff Barczewski][jeff] who was the owner of the `react` module on npm. He was kind enough to transition ownership to us and release his package under a different name: `autoflow`. I encourage you to [check it out][autoflow] if you're writing a lot of asynchronous code. In order to not break all of `react`'s current users of 0.7.x, we decided to bump our version to 0.8 and skip the issue entirely. We're also including a warning if you use our `react` module like you would use the previous package.
+
+In order to make the transition to 0.8 for our current users as painless as possible, we decided to make 0.8 primarily a bug fix release on top of 0.5. No public APIs were changed (even if they were already marked as deprecated). We haven't added any of the new features we have in master, though we did take the opportunity to pull in some improvements to internals.
+
+We hope that by releasing `react` on npm, we will enable a new set of uses that have been otherwise difficult. All feedback is welcome!
+
+## Changelog {/*changelog*/}
+
+### React {/*react*/}
+
+- Added support for more attributes:
+  - `rows` & `cols` for `<textarea>`
+  - `defer` & `async` for `<script>`
+  - `loop` for `<audio>` & `<video>`
+  - `autoCorrect` for form fields (a non-standard attribute only supported by mobile WebKit)
+- Improved error messages
+- Fixed Selection events in IE11
+- Added `onContextMenu` events
+
+### React with Addons {/*react-with-addons*/}
+
+- Fixed bugs with TransitionGroup when children were undefined
+- Added support for `onTransition`
+
+### react-tools {/*react-tools*/}
+
+- Upgraded `jstransform` and `esprima-fb`
+
+### JSXTransformer {/*jsxtransformer*/}
+
+- Added support for use in IE8
+- Upgraded browserify, which reduced file size by ~65KB (16KB gzipped)
+
+[jeff]: https://github.com/jeffbski
+[autoflow]: https://github.com/jeffbski/autoflow
diff --git a/beta/src/content/blog/2013/12/23/community-roundup-12.md b/beta/src/content/blog/2013/12/23/community-roundup-12.md
new file mode 100644
index 000000000..94cfb88f3
--- /dev/null
+++ b/beta/src/content/blog/2013/12/23/community-roundup-12.md
@@ -0,0 +1,98 @@
+---
+title: 'Community Round-up #12'
+author: [vjeux]
+---
+
+React got featured on the front-page of Hacker News thanks to the Om library. If you try it out for the first time, take a look at the [docs](/docs/getting-started.html) and do not hesitate to ask questions on the [Google Group](https://groups.google.com/group/reactjs), [IRC](irc://chat.freenode.net/reactjs) or [Stack Overflow](http://stackoverflow.com/questions/tagged/reactjs). We are trying our best to help you out!
+
+## The Future of JavaScript MVC {/*the-future-of-javascript-mvc*/}
+
+[David Nolen](https://swannodette.github.io/) announced Om, a thin wrapper on-top of React in ClojureScript. It stands out by only using immutable data structures. This unlocks the ability to write a very efficient [shouldComponentUpdate](/docs/component-specs.html#updating-shouldcomponentupdate) and get huge performance improvements on some tasks.
+
+> We've known this for some time over here in the ClojureScript corner of the world - all of our collections are immutable and modeled directly on the original Clojure versions written in Java. Modern JavaScript engines have now been tuned to the point that it's no longer uncommon to see collection performance within 2.5X of the Java Virtual Machine.
+>
+> Wait, wait, wait. What does the performance of persistent data structures have to do with the future of JavaScript MVCs?
+>
+> A whole lot.
+>
+> <figure><a href="https://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/"><img src="/images/blog/om-backbone.png"/></a></figure>
+>
+> [Read the full article...](https://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/)
+
+## Scroll Position with React {/*scroll-position-with-react*/}
+
+Managing the scroll position when new content is inserted is usually very tricky to get right. [Vjeux](http://blog.vjeux.com/) discovered that [componentWillUpdate](/docs/component-specs.html#updating-componentwillupdate) and [componentDidUpdate](/docs/component-specs.html#updating-componentdidupdate) were triggered exactly at the right time to manage the scroll position.
+
+> We can check the scroll position before the component has updated with componentWillUpdate and scroll if necessary at componentDidUpdate
+>
+> ```js
+> componentWillUpdate: function() {
+>   var node = this.getDOMNode();
+>   this.shouldScrollBottom =
+>     (node.scrollTop + node.offsetHeight) === node.scrollHeight;
+> },
+> componentDidUpdate: function() {
+>   if (this.shouldScrollBottom) {
+>     var node = this.getDOMNode();
+>     node.scrollTop = node.scrollHeight
+>   }
+> },
+> ```
+>
+> [Check out the blog article...](http://blog.vjeux.com/2013/javascript/scroll-position-with-react.html)
+
+## Lights Out {/*lights-out*/}
+
+React declarative approach is well suited to write games. [Cheng Lou](https://github.com/chenglou) wrote the famous Lights Out game in React. It's a good example of use of [TransitionGroup](/docs/animation.html) to implement animations.
+
+<figure><a href="https://chenglou.github.io/react-lights-out/"><img src="/images/blog/lights-out.png"/></a></figure>
+
+[Try it out!](https://chenglou.github.io/react-lights-out/)
+
+## Reactive Table Bookmarklet {/*reactive-table-bookmarklet*/}
+
+[Stoyan Stefanov](http://www.phpied.com/) wrote a bookmarklet to process tables on the internet. It adds a little "pop" button that expands to a full-screen view with sorting, editing and export to csv and json.
+
+<figure><a href="http://www.phpied.com/reactivetable-bookmarklet/"><img src="/images/blog/reactive-bookmarklet.png"/></a></figure>
+
+[Check out the blog post...](http://www.phpied.com/reactivetable-bookmarklet/)
+
+## MontageJS Tutorial in React {/*montagejs-tutorial-in-react*/}
+
+[Ross Allen](https://twitter.com/ssorallen) implemented [MontageJS](http://montagejs.org/)'s [Reddit tutorial](http://montagejs.org/docs/tutorial-reddit-client-with-montagejs.html) in React. This is a good opportunity to compare the philosophies of the two libraries.
+
+[View the source on JSFiddle...](https://jsfiddle.net/ssorallen/fEsYt/)
+
+## Writing Good React Components {/*writing-good-react-components*/}
+
+[William Högman Rudenmalm](http://blog.whn.se/) wrote an article on how to write good React components. This is full of good advice.
+
+> The idea of dividing software into smaller parts or components is hardly new - It is the essance of good software. The same principles that apply to software in general apply to building React components. That doesn’t mean that writing good React components is just about applying general rules.
+>
+> The web offers a unique set of challenges, which React offers interesting solutions to. First and foremost among these solutions is the what is called the Mock DOM. Rather than having user code interface with the DOM in a direct fashion, as is the case with most DOM manipulation libraries.
+>
+> You build a model of how you want the DOM end up like. React then inserts this model into the DOM. This is very useful for updates because React simply compares the model or mock DOM against the actual DOM, and then only updates based on the difference between the two states.
+>
+> [Read the full article ...](http://blog.whn.se/post/69621609605/writing-good-react-components)
+
+## Hoodie React TodoMVC {/*hoodie-react-todomvc*/}
+
+[Sven Lito](http://svenlito.com/) integrated the React TodoMVC example within an [Hoodie](http://hood.ie/) web app environment. This should let you get started using Hoodie and React.
+
+```
+hoodie new todomvc -t "hoodiehq/hoodie-react-todomvc"
+```
+
+[Check out on GitHub...](https://github.com/hoodiehq/hoodie-react-todomvc)
+
+## JSX Compiler {/*jsx-compiler*/}
+
+Ever wanted to have a quick way to see what a JSX tag would be converted to? [Tim Yung](http://www.yungsters.com/) made a page for it.
+
+<figure><a href="/react/jsx-compiler.html"><img src="/images/blog/jsx-compiler.png"/></a></figure>
+
+[Try it out!](/jsx-compiler.html)
+
+## Random Tweet {/*random-tweet*/}
+
+<center><blockquote class="twitter-tweet" lang="en"><p>.<a href="https://twitter.com/jordwalke">@jordwalke</a> lays down some truth <a href="http://t.co/AXAn0UlUe3">http://t.co/AXAn0UlUe3</a>, optimizing your JS application shouldn&#39;t force you to rewrite so much code <a href="https://twitter.com/search?q=%23reactjs&amp;src=hash">#reactjs</a></p>&mdash; David Nolen (@swannodette) <a href="https://twitter.com/swannodette/statuses/413780079249215488">December 19, 2013</a></blockquote></center>
diff --git a/beta/src/content/blog/2013/12/30/community-roundup-13.md b/beta/src/content/blog/2013/12/30/community-roundup-13.md
new file mode 100644
index 000000000..472c62a4a
--- /dev/null
+++ b/beta/src/content/blog/2013/12/30/community-roundup-13.md
@@ -0,0 +1,110 @@
+---
+title: 'Community Round-up #13'
+author: [vjeux]
+---
+
+Happy holidays! This blog post is a little-late Christmas present for all the React users. Hopefully it will inspire you to write awesome web apps in 2014!
+
+## React Touch {/*react-touch*/}
+
+[Pete Hunt](http://www.petehunt.net/) wrote three demos showing that React can be used to run 60fps native-like experiences on mobile web. A frosted glass effect, an image gallery with 3d animations and an infinite scroll view.
+
+<figure><iframe src="//player.vimeo.com/video/79659941" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></figure>
+
+[Try out the demos!](https://petehunt.github.io/react-touch/)
+
+## Introduction to React {/*introduction-to-react*/}
+
+[Stoyan Stefanov](http://www.phpied.com/) talked at Joe Dev On Tech about React. He goes over all the features of the library and ends with a concrete example.
+
+<figure><iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/SMMRJif5QW0" frameborder="0" allowfullscreen></iframe></figure>
+
+## JSX: E4X The Good Parts {/*jsx-e4x-the-good-parts*/}
+
+JSX is often compared to the now defunct E4X, [Vjeux](http://blog.vjeux.com/) went over all the E4X features and explained how JSX is different and hopefully doesn't repeat the same mistakes.
+
+> E4X (ECMAScript for XML) is a JavaScript syntax extension and a runtime to manipulate XML. It was promoted by Mozilla but failed to become mainstream and is now deprecated. JSX was inspired by E4X. In this article, I'm going to go over all the features of E4X and explain the design decisions behind JSX.
+>
+> **Historical Context**
+>
+> E4X has been created in 2002 by John Schneider. This was the golden age of XML where it was being used for everything: data, configuration files, code, interfaces (DOM) ... E4X was first implemented inside of Rhino, a JavaScript implementation from Mozilla written in Java.
+>
+> [Continue reading ...](http://blog.vjeux.com/2013/javascript/jsx-e4x-the-good-parts.html)
+
+## React + Socket.io {/*react--socketio*/}
+
+[Geert Pasteels](http://enome.be/nl) made a small experiment with Socket.io. He wrote a very small mixin that synchronizes React state with the server. Just include this mixin to your React component and it is now live!
+
+```javascript
+changeHandler: function (data) {
+  if (!_.isEqual(data.state, this.state) && this.path === data.path) {
+    this.setState(data.state);
+  }
+},
+componentDidMount: function (root) {
+  this.path = utils.nodePath(root);
+  socket.on('component-change', this.changeHandler);
+},
+componentWillUpdate: function (props, state) {
+  socket.emit('component-change', { path: this.path, state: state });
+},
+componentWillUnmount: function () {
+  socket.removeListener('component-change', this.change);
+}
+```
+
+[Check it out on GitHub...](https://github.com/Enome/react.io)
+
+## cssobjectify {/*cssobjectify*/}
+
+[Andrey Popp](http://andreypopp.com/) implemented a source transform that takes a CSS file and converts it to JSON. This integrates pretty nicely with React.
+
+```javascript
+/* style.css */
+MyComponent {
+  font-size: 12px;
+  background-color: red;
+}
+
+/* myapp.js */
+var React = require('react-tools/build/modules/React');
+var Styles = require('./styles.css');
+
+var MyComponent = React.createClass({
+  render: function() {
+    return (
+      <div style={Styles.MyComponent}>
+        Hello, world!
+      </div>
+    )
+  }
+});
+```
+
+[Check it out on GitHub...](https://github.com/andreypopp/cssobjectify)
+
+## ngReact {/*ngreact*/}
+
+[David Chang](http://davidandsuzi.com/) working at [HasOffer](http://www.hasoffers.com/) wanted to speed up his Angular app and replaced Angular primitives by React at different layers. When using React naively it is 67% faster, but when combining it with angular's transclusion it is 450% slower.
+
+> Rendering this takes 803ms for 10 iterations, hovering around 35 and 55ms for each data reload (that's 67% faster). You'll notice that the first load takes a little longer than successive loads, and the second load REALLY struggles - here, it's 433ms, which is more than half of the total time!
+>
+> <figure><a href="http://davidandsuzi.com/ngreact-react-components-in-angular/"><img src="/images/blog/ngreact.png"/></a></figure>
+>
+> [Read the full article...](http://davidandsuzi.com/ngreact-react-components-in-angular/)
+
+## vim-jsx {/*vim-jsx*/}
+
+[Max Wang](https://github.com/mxw) made a vim syntax highlighting and indentation plugin for vim.
+
+> Syntax highlighting and indenting for JSX. JSX is a JavaScript syntax transformer which translates inline XML document fragments into JavaScript objects. It was developed by Facebook alongside React.
+>
+> This bundle requires pangloss's [vim-javascript](https://github.com/pangloss/vim-javascript) syntax highlighting.
+>
+> Vim support for inline XML in JS is remarkably similar to the same for PHP.
+>
+> [View on GitHub...](https://github.com/mxw/vim-jsx)
+
+## Random Tweet {/*random-tweet*/}
+
+<center><blockquote class="twitter-tweet" lang="en"><p>I may be starting to get annoying with this, but ReactJS is really exciting. I truly feel the virtual DOM is a game changer.</p>&mdash; Eric Florenzano (@ericflo) <a href="https://twitter.com/ericflo/statuses/413842834974732288">December 20, 2013</a></blockquote></center>
diff --git a/beta/src/content/blog/2014/01/02/react-chrome-developer-tools.md b/beta/src/content/blog/2014/01/02/react-chrome-developer-tools.md
new file mode 100644
index 000000000..f92119286
--- /dev/null
+++ b/beta/src/content/blog/2014/01/02/react-chrome-developer-tools.md
@@ -0,0 +1,18 @@
+---
+title: 'React Chrome Developer Tools'
+author: [sebmarkbage]
+---
+
+With the new year, we thought you'd enjoy some new tools for debugging React code. Today we're releasing the [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi), an extension to the Chrome Developer Tools. [Download them from the Chrome Web Store](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi).
+
+<figure><iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/Cey7BS6dE0M" frameborder="0" allowfullscreen></iframe></figure>
+
+You will get a new tab titled "React" in your Chrome DevTools. This tab shows you a list of the root React Components that are rendered on the page as well as the subcomponents that each root renders.
+
+Selecting a Component in this tab allows you to view and edit its props and state in the panel on the right. In the breadcrumbs at the bottom, you can inspect the selected Component, the Component that created it, the Component that created that one, and so on.
+
+When you inspect a DOM element using the regular Elements tab, you can switch over to the React tab and the corresponding Component will be automatically selected. The Component will also be automatically selected if you have a breakpoint within its render phase. This allows you to step through the render tree and see how one Component affects another one.
+
+<figure><a href="https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi"><img src="/images/blog/react-dev-tools.jpg"/></a></figure>
+
+We hope these tools will help your team better understand your component hierarchy and track down bugs. We're very excited about this initial launch and appreciate any feedback you may have. As always, we also accept [pull requests on GitHub](https://github.com/facebook/react-devtools).
diff --git a/beta/src/content/blog/2014/01/06/community-roundup-14.md b/beta/src/content/blog/2014/01/06/community-roundup-14.md
new file mode 100644
index 000000000..cbf717b84
--- /dev/null
+++ b/beta/src/content/blog/2014/01/06/community-roundup-14.md
@@ -0,0 +1,85 @@
+---
+title: 'Community Round-up #14'
+author: [vjeux]
+---
+
+The theme of this first round-up of 2014 is integration. I've tried to assemble a list of articles and projects that use React in various environments.
+
+## React Baseline {/*react-baseline*/}
+
+React is only one-piece of your web application stack. [Mark Lussier](https://github.com/intabulas) shared his baseline stack that uses React along with Grunt, Browserify, Bower, Zepto, Director and Sass. This should help you get started using React for a new project.
+
+> As I do more projects with ReactJS I started to extract a baseline to use when starting new projects. This is very opinionated and I change my opinion from time to time. This is by no ways perfect and in your opinion most likely wrong :).. which is why I love github
+>
+> I encourage you to fork, and make it right and submit a pull request!
+>
+> My current opinion is using tools like Grunt, Browserify, Bower and multiple grunt plugins to get the job done. I also opted for Zepto over jQuery and the Flatiron Project's Director when I need a router. Oh and for the last little bit of tech that makes you mad, I am in the SASS camp when it comes to stylesheets
+>
+> [Check it out on GitHub...](https://github.com/intabulas/reactjs-baseline)
+
+## Animal Sounds {/*animal-sounds*/}
+
+[Josh Duck](http://joshduck.com/) used React in order to build a Windows 8 tablet app. This is a good example of a touch app written in React.
+[![](/images/blog/animal-sounds.jpg)](http://apps.microsoft.com/windows/en-us/app/baby-play-animal-sounds/9280825c-2ed9-41c0-ba38-aa9a5b890bb9)
+
+[Download the app...](http://apps.microsoft.com/windows/en-us/app/baby-play-animal-sounds/9280825c-2ed9-41c0-ba38-aa9a5b890bb9)
+
+## React Rails Tutorial {/*react-rails-tutorial*/}
+
+[Selem Delul](http://selem.im) bundled the [React Tutorial](/tutorial/tutorial.html) into a rails app. This is a good example on how to get started with a rails project.
+
+> ```sh
+> git clone https://github.com/necrodome/react-rails-tutorial
+> cd react-rails-tutorial
+> bundle install
+> rake db:migrate
+> rails s
+> ```
+>
+> Then visit http://localhost:3000/app to see the React application that is explained in the React Tutorial. Try opening multiple tabs!
+>
+> [View on GitHub...](https://github.com/necrodome/react-rails-tutorial)
+
+## Mixing with Backbone {/*mixing-with-backbone*/}
+
+[Eldar Djafarov](http://eldar.djafarov.com/) implemented a mixin to link Backbone models to React state and a small abstraction to write two-way binding on-top.
+
+[View code on JSFiddle](http://jsfiddle.net/djkojb/qZf48/13/)
+
+[Check out the blog post...](http://eldar.djafarov.com/2013/11/reactjs-mixing-with-backbone/)
+
+## React Infinite Scroll {/*react-infinite-scroll*/}
+
+[Guillaume Rivals](https://twitter.com/guillaumervls) implemented an InfiniteScroll component. This is a good example of a React component that has a simple yet powerful API.
+
+```javascript
+<InfiniteScroll
+  pageStart={0}
+  loadMore={loadFunc}
+  hasMore={true || false}
+  loader={<div className="loader">Loading ...</div>}>
+  {items} // <-- This is the "stuff" you want to load
+</InfiniteScroll>
+```
+
+[Try it out on GitHub!](https://github.com/guillaumervls/react-infinite-scroll)
+
+## Web Components Style {/*web-components-style*/}
+
+[Thomas Aylott](http://subtlegradient.com/) implemented an API that looks like Web Components but using React underneath.
+
+[View the source on JSFiddle...](http://jsfiddle.net/SubtleGradient/ue2Aa)
+
+## React vs Angular {/*react-vs-angular*/}
+
+React is often compared with Angular. [Pete Hunt](http://skulbuny.com/2013/10/31/react-vs-angular/) wrote an opinionated post on the subject.
+
+> First of all I think it’s important to evaluate technologies on objective rather than subjective features. “It feels nicer” or “it’s cleaner” aren’t valid reasons: performance, modularity, community size and ease of testing / integration with other tools are.
+>
+> I’ve done a lot of work benchmarking, building apps, and reading the code of Angular to try to come up with a reasonable comparison between their ways of doing things.
+>
+> [Read the full post...](http://skulbuny.com/2013/10/31/react-vs-angular/)
+
+## Random Tweet {/*random-tweet*/}
+
+<div><blockquote class="twitter-tweet" lang="en"><p>Really intrigued by React.js. I&#39;ve looked at all JS frameworks, and excepting <a href="https://twitter.com/serenadejs">@serenadejs</a> this is the first one which makes sense to me.</p>&mdash; Jonas Nicklas (@jonicklas) <a href="https://twitter.com/jonicklas/statuses/412640708755869696">December 16, 2013</a></blockquote></div>
diff --git a/beta/src/content/blog/2014/02/05/community-roundup-15.md b/beta/src/content/blog/2014/02/05/community-roundup-15.md
new file mode 100644
index 000000000..a5bdffb6d
--- /dev/null
+++ b/beta/src/content/blog/2014/02/05/community-roundup-15.md
@@ -0,0 +1,126 @@
+---
+title: 'Community Round-up #15'
+author: [jgebhardt]
+---
+
+Interest in React seems to have surged ever since David Nolen ([@swannodette](https://twitter.com/swannodette))'s introduction of [Om](https://github.com/swannodette/om) in his post ["The Future of JavaScript MVC Frameworks"](https://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/).
+
+In this React Community Round-up, we are taking a closer look at React from a functional programming perspective.
+
+## "React: Another Level of Indirection" {/*react-another-level-of-indirection*/}
+
+To start things off, Eric Normand ([@ericnormand](https://twitter.com/ericnormand)) of [LispCast](http://lispcast.com) makes the case for [React from a general functional programming standpoint](http://www.lispcast.com/react-another-level-of-indirection) and explains how React's "Virtual DOM provides the last piece of the Web Frontend Puzzle for ClojureScript".
+
+> The Virtual DOM is an indirection mechanism that solves the difficult problem of DOM programming: how to deal with incremental changes to a stateful tree structure. By abstracting away the statefulness, the Virtual DOM turns the real DOM into an immediate mode GUI, which is perfect for functional programming.
+>
+> [Read the full post...](http://www.lispcast.com/react-another-level-of-indirection)
+
+## Reagent: Minimalistic React for ClojureScript {/*reagent-minimalistic-react-for-clojurescript*/}
+
+Dan Holmsand ([@holmsand](https://twitter.com/holmsand)) created [Reagent](https://holmsand.github.io/reagent/), a simplistic ClojureScript API to React.
+
+> It allows you to define efficient React components using nothing but plain ClojureScript functions and data, that describe your UI using a Hiccup-like syntax.
+>
+> The goal of Reagent is to make it possible to define arbitrarily complex UIs using just a couple of basic concepts, and to be fast enough by default that you rarely have to care about performance.
+>
+> [Check it out on GitHub...](https://holmsand.github.io/reagent/)
+
+## Functional DOM programming {/*functional-dom-programming*/}
+
+React's one-way data-binding naturally lends itself to a functional programming approach. Facebook's Pete Hunt ([@floydophone](https://twitter.com/floydophone)) explores how one would go about [writing web apps in a functional manner](https://medium.com/p/67d81637d43). Spoiler alert:
+
+> This is React. It’s not about templates, or data binding, or DOM manipulation. It’s about using functional programming with a virtual DOM representation to build ambitious, high-performance apps with JavaScript.
+>
+> [Read the full post...](https://medium.com/p/67d81637d43)
+
+Pete also explains this in detail at his #MeteorDevShop talk (about 30 Minutes):
+
+<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/Lqcs6hPOcFw?start=2963" frameborder="0" allowfullscreen></iframe>
+
+## Kioo: Separating markup and logic {/*kioo-separating-markup-and-logic*/}
+
+[Creighton Kirkendall](https://github.com/ckirkendall) created [Kioo](https://github.com/ckirkendall/kioo), which adds Enlive-style templating to React. HTML templates are separated from the application logic. Kioo comes with separate examples for both Om and Reagent.
+
+A basic example from github:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <body>
+    <header>
+      <h1>Header placeholder</h1>
+      <ul id="navigation">
+        <li class="nav-item"><a href="#">Placeholder</a></li>
+      </ul>
+    </header>
+    <div class="content">place holder</div>
+  </body>
+</html>
+```
+
+```clojure
+...
+
+(defn my-nav-item [[caption func]]
+  (kioo/component "main.html" [:.nav-item]
+    {[:a] (do-> (content caption)
+                (set-attr :onClick func))}))
+
+(defn my-header [heading nav-elms]
+  (kioo/component "main.html" [:header]
+    {[:h1] (content heading)
+     [:ul] (content (map my-nav-item nav-elms))}))
+
+(defn my-page [data]
+  (kioo/component "main.html"
+    {[:header] (substitute (my-header (:heading data)
+                                      (:navigation data)))
+     [:.content] (content (:content data))}))
+
+(def app-state (atom {:heading    "main"
+                      :content    "Hello World"
+                      :navigation [["home" #(js/alert %)]
+                                   ["next" #(js/alert %)]]}))
+
+(om/root app-state my-page (.-body js/document))
+```
+
+## Om {/*om*/}
+
+In an interview with David Nolen, Tom Coupland ([@tcoupland](https://twitter.com/tcoupland)) of InfoQ provides a nice summary of recent developments around Om ("[Om: Enhancing Facebook's React with Immutability](http://www.infoq.com/news/2014/01/om-react)").
+
+> David [Nolen]: I think people are starting to see the limitations of just JavaScript and jQuery and even more structured solutions like Backbone, Angular, Ember, etc. React is a fresh approach to the DOM problem that seems obvious in hindsight.
+>
+> [Read the full interview...](http://www.infoq.com/news/2014/01/om-react)
+
+### A slice of React, ClojureScript and Om {/*a-slice-of-react-clojurescript-and-om*/}
+
+Fredrik Dyrkell ([@lexicallyscoped](https://twitter.com/lexicallyscoped)) rewrote part of the [React tutorial in both ClojureScript and Om](http://www.lexicallyscoped.com/2013/12/25/slice-of-reactjs-and-cljs.html), along with short, helpful explanations.
+
+> React has sparked a lot of interest in the Clojure community lately [...]. At the very core, React lets you build up your DOM representation in a functional fashion by composing pure functions and you have a simple building block for everything: React components.
+>
+> [Read the full post...](http://www.lexicallyscoped.com/2013/12/25/slice-of-reactjs-and-cljs.html)
+
+In a separate post, Dyrkell breaks down [how to build a binary clock component](http://www.lexicallyscoped.com/2014/01/23/ClojureScript-react-om-binary-clock.html) in Om.
+
+[[Demo](http://www.lexicallyscoped.com/demo/binclock/)] [[Code](https://github.com/fredyr/binclock/blob/master/src/binclock/core.cljs)]
+
+### Time Travel: Implementing undo in Om {/*time-travel-implementing-undo-in-om*/}
+
+David Nolen shows how to leverage immutable data structures to [add global undo](https://swannodette.github.io/2013/12/31/time-travel/) functionality to an app – using just 13 lines of ClojureScript.
+
+### A Step-by-Step Om Walkthrough {/*a-step-by-step-om-walkthrough*/}
+
+[Josh Lehman](http://www.joshlehman.me) took the time to create an extensive [step-by-step walkthrough](http://www.joshlehman.me/rewriting-the-react-tutorial-in-om/) of the React tutorial in Om. The well-documented source is on [github](https://github.com/jalehman/omtut-starter).
+
+### Omkara {/*omkara*/}
+
+[brendanyounger](https://github.com/brendanyounger) created [omkara](https://github.com/brendanyounger/omkara), a starting point for ClojureScript web apps based on Om/React. It aims to take advantage of server-side rendering and comes with a few tips on getting started with Om/React projects.
+
+### Om Experience Report {/*om-experience-report*/}
+
+Adam Solove ([@asolove](https://twitter.com/asolove/)) [dives a little deeper into Om, React and ClojureScript](http://adamsolove.com/js/clojure/2014/01/06/om-experience-report.html). He shares some helpful tips he gathered while building his [CartoCrayon](https://github.com/asolove/carto-crayon) prototype.
+
+## Not-so-random Tweet {/*not-so-random-tweet*/}
+
+<div><blockquote class="twitter-tweet" lang="en"><p>[@swannodette](https://twitter.com/swannodette) No thank you! It's honestly a bit weird because Om is exactly what I didn't know I wanted for doing functional UI work.</p>&mdash; Adam Solove (@asolove) <a href="https://twitter.com/asolove/status/420294067637858304">January 6, 2014</a></blockquote></div>
diff --git a/beta/src/content/blog/2014/02/15/community-roundup-16.md b/beta/src/content/blog/2014/02/15/community-roundup-16.md
new file mode 100644
index 000000000..544109e8c
--- /dev/null
+++ b/beta/src/content/blog/2014/02/15/community-roundup-16.md
@@ -0,0 +1,77 @@
+---
+title: 'Community Round-up #16'
+author: [jgebhardt]
+---
+
+There have been many posts recently covering the <i>why</i> and <i>how</i> of React. This week's community round-up includes a collection of recent articles to help you get started with React, along with a few posts that explain some of the inner workings.
+
+## React in a nutshell {/*react-in-a-nutshell*/}
+
+Got five minutes to pitch React to your coworkers? John Lynch ([@johnrlynch](https://twitter.com/johnrlynch)) put together [this excellent and refreshing slideshow](http://slid.es/johnlynch/reactjs):
+
+<iframe src="//slid.es/johnlynch/reactjs/embed" width="100%" height="420" scrolling="no" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+
+## React's diff algorithm {/*reacts-diff-algorithm*/}
+
+React core team member Christopher Chedeau ([@vjeux](https://twitter.com/vjeux)) explores the innards of React's tree diffing algorithm in this [extensive and well-illustrated post](http://calendar.perfplanet.com/2013/diff/). <figure>[![](/images/blog/react-diff-tree.png)](http://calendar.perfplanet.com/2013/diff/)</figure>
+
+While we're talking about tree diffing: Matt Esch ([@MatthewEsch](https://twitter.com/MatthewEsch)) created [this project](https://github.com/Matt-Esch/virtual-dom), which aims to implement the virtual DOM and a corresponding diff algorithm as separate modules.
+
+## Many, many new introductions to React! {/*many-many-new-introductions-to-react*/}
+
+James Padosley wrote a short post on the basics (and merits) of React: [What is React?](http://james.padolsey.com/javascript/what-is-react/)
+
+> What I like most about React is that it doesn't impose heady design patterns and data-modelling abstractions on me. [...] Its opinions are so minimal and its abstractions so focused on the problem of the DOM, that you can merrily slap your design choices atop.
+>
+> [Read the full post...](http://james.padolsey.com/javascript/what-is-react/)
+
+Taylor Lapeyre ([@taylorlapeyre](https://twitter.com/taylorlapeyre)) wrote another nice [introduction to React](http://words.taylorlapeyre.me/an-introduction-to-react).
+
+> React expects you to do the work of getting and pushing data from the server. This makes it very easy to implement React as a front end solution, since it simply expects you to hand it data. React does all the other work.
+>
+> [Read the full post...](http://words.taylorlapeyre.me/an-introduction-to-react)
+
+[This "Deep explanation for newbies"](http://www.webdesignporto.com/react-js-in-pure-javascript-facebook-library/?utm_source=echojs&utm_medium=post&utm_campaign=echojs) by [@ProJavaScript](https://twitter.com/ProJavaScript) explains how to get started building a React game without using the optional JSX syntax.
+
+### React around the world {/*react-around-the-world*/}
+
+It's great to see the React community expand internationally. [This site](http://habrahabr.ru/post/189230/) features a React introduction in Russian.
+
+### React tutorial series {/*react-tutorial-series*/}
+
+[Christopher Pitt](https://medium.com/@followchrisp) explains [React Components](https://medium.com/react-tutorials/828c397e3dc8) and [React Properties](https://medium.com/react-tutorials/ef11cd55caa0). The former includes a nice introduction to using JSX, while the latter focuses on adding interactivity and linking multiple components together. Also check out the [other posts in his React Tutorial series](https://medium.com/react-tutorials), e.g. on using [React + Backbone Model](https://medium.com/react-tutorials/8aaec65a546c) and [React + Backbone Router](https://medium.com/react-tutorials/c00be0cf1592).
+
+### Beginner tutorial: Implementing the board game Go {/*beginner-tutorial-implementing-the-board-game-go*/}
+
+[Chris LaRose](http://cjlarose.com/) walks through the steps of creating a Go app in React, showing how to separate application logic from the rendered components. Check out his [tutorial](http://cjlarose.com/2014/01/09/react-board-game-tutorial.html) or go straight to the [code](https://github.com/cjlarose/react-go).
+
+### Egghead.io video tutorials {/*eggheadio-video-tutorials*/}
+
+Joe Maddalone ([@joemaddalone](https://twitter.com/joemaddalone)) of [egghead.io](https://egghead.io/) created a series of React video tutorials, such as [this](http://www.youtube-nocookie.com/v/rFvZydtmsxM) introduction to React Components. [[part 1](http://www.youtube-nocookie.com/v/rFvZydtmsxM)], [[part 2](http://www.youtube-nocookie.com/v/5yvFLrt7N8M)]
+
+### "React: Finally, a great server/client web stack" {/*react-finally-a-great-serverclient-web-stack*/}
+
+Eric Florenzano ([@ericflo](https://twitter.com/ericflo)) sheds some light on what makes React perfect for server rendering:
+
+> [...] the ideal solution would fully render the markup on the server, deliver it to the client so that it can be shown to the user instantly. Then it would asynchronously load some JavaScript that would attach to the rendered markup, and invisibly promote the page into a full app that can render its own markup. [...]
+
+> What I've discovered is that enough of the pieces have come together, that this futuristic-sounding web environment is actually surprisingly easy to do now with React.js.
+
+> [Read the full post...](http://eflorenzano.com/blog/2014/01/23/react-finally-server-client/)
+
+## Building a complex React component {/*building-a-complex-react-component*/}
+
+[Matt Harrison](http://matt-harrison.com/) walks through the process of [creating an SVG-based Resistance Calculator](http://matt-harrison.com/building-a-complex-web-component-with-facebooks-react-library/) using React. <figure>[![](/images/blog/resistance-calculator.png)](http://matt-harrison.com/building-a-complex-web-component-with-facebooks-react-library/)</figure>
+
+## Random Tweets {/*random-tweets*/}
+
+<div><blockquote class="twitter-tweet" lang="en"><p>[#reactjs](https://twitter.com/search?q=%23reactjs&src=hash) has very simple API, but it's amazing how much work has been done under the hood to make it blazing fast.</p>&mdash; Anton Astashov (@anton_astashov) <a href="https://twitter.com/anton_astashov/status/417556491646693378">December 30, 2013</a></blockquote></div>
+
+<div><blockquote class="twitter-tweet" lang="en"><p>[#reactjs]((https://twitter.com/search?q=%23reactjs&src=hash) makes refactoring your HTML as easy & natural as refactoring your javascript [@react_js](https://twitter.com/react_js)</p>&mdash; Jared Forsyth (@jaredforsyth) <a href="https://twitter.com/jaredforsyth/status/420304083010854912">January 6, 2014</a></blockquote></div>
+
+<div><blockquote class="twitter-tweet" lang="en"><p>Played with react.js for an hour, so many things suddenly became stupidly simple.</p>&mdash; andrewingram (@andrewingram) <a href="https://twitter.com/andrewingram/status/422810480701620225">January 13, 2014</a></blockquote></div>
+
+<div><blockquote class="twitter-tweet" lang="en"><p>[@okonetchnikov](https://twitter.com/okonetchnikov) HOLY CRAP react is nice</p>&mdash; julik (@julikt) <a href="https://twitter.com/julikt/status/422843478792765440">January 13, 2014</a></blockquote></div>
+
+<div><blockquote class="twitter-tweet" lang="en"><p>brb rewriting everything with react
+</p>&mdash; Ben Smithett (@bensmithett) <a href="https://twitter.com/bensmithett/status/430671242186592256">February 4, 2014</a></blockquote></div>
diff --git a/beta/src/content/blog/2014/02/16/react-v0.9-rc1.md b/beta/src/content/blog/2014/02/16/react-v0.9-rc1.md
new file mode 100644
index 000000000..34120ed9d
--- /dev/null
+++ b/beta/src/content/blog/2014/02/16/react-v0.9-rc1.md
@@ -0,0 +1,125 @@
+---
+title: React v0.9 RC
+author: [sophiebits]
+---
+
+We're almost ready to release React v0.9! We're posting a release candidate so that you can test your apps on it; we'd much prefer to find show-stopping bugs now rather than after we release.
+
+The release candidate is available for download from the CDN:
+
+- **React**  
+  Dev build with warnings: https://fb.me/react-0.9.0-rc1.js  
+  Minified build for production: https://fb.me/react-0.9.0-rc1.min.js  
+- **React with Add-Ons**  
+  Dev build with warnings: https://fb.me/react-with-addons-0.9.0-rc1.js>  
+  Minified build for production: https://fb.me/react-with-addons-0.9.0-rc1.min.js  
+- **In-Browser JSX transformer**  
+  https://fb.me/JSXTransformer-0.9.0-rc1.js
+
+We've also published version `0.9.0-rc1` of the `react` and `react-tools` packages on npm and the `react` package on bower.
+
+Please try these builds out and [file an issue on GitHub](https://github.com/facebook/react/issues/new) if you see anything awry.
+
+## Upgrade Notes {/*upgrade-notes*/}
+
+In addition to the changes to React core listed below, we've made a small change to the way JSX interprets whitespace to make things more consistent. With this release, space between two components on the same line will be preserved, while a newline separating a text node from a tag will be eliminated in the output. Consider the code:
+
+```html
+<div>
+  Monkeys: {listOfMonkeys} {submitButton}
+</div>
+```
+
+In v0.8 and below, it was transformed to the following:
+
+```javascript
+React.DOM.div(null, ' Monkeys: ', listOfMonkeys, submitButton);
+```
+
+In v0.9, it will be transformed to this JS instead:
+
+```javascript{2,3}
+React.DOM.div(null, 'Monkeys:', listOfMonkeys, ' ', submitButton);
+```
+
+We believe this new behavior is more helpful and eliminates cases where unwanted whitespace was previously added.
+
+In cases where you want to preserve the space adjacent to a newline, you can write a JS string like `{"Monkeys: "}` in your JSX source. We've included a script to do an automated codemod of your JSX source tree that preserves the old whitespace behavior by adding and removing spaces appropriately. You can [install jsx_whitespace_transformer from npm](https://github.com/facebook/react/blob/master/npm-jsx_whitespace_transformer/README.md) and run it over your source tree to modify files in place. The transformed JSX files will preserve your code's existing whitespace behavior.
+
+## Changelog {/*changelog*/}
+
+### React Core {/*react-core*/}
+
+#### Breaking Changes {/*breaking-changes*/}
+
+- The lifecycle methods `componentDidMount` and `componentDidUpdate` no longer receive the root node as a parameter; use `this.getDOMNode()` instead
+- Whenever a prop is equal to `undefined`, the default value returned by `getDefaultProps` will now be used instead
+- `React.unmountAndReleaseReactRootNode` was previously deprecated and has now been removed
+- `React.renderComponentToString` is now synchronous and returns the generated HTML string
+- Full-page rendering (that is, rendering the `<html>` tag using React) is now supported only when starting with server-rendered markup
+- On mouse wheel events, `deltaY` is no longer negated
+- When prop types validation fails, a warning is logged instead of an error thrown (with the production build of React, the type checks are now skipped for performance)
+- On `input`, `select`, and `textarea` elements, `.getValue()` is no longer supported; use `.getDOMNode().value` instead
+- `this.context` on components is now reserved for internal use by React
+
+#### New Features {/*new-features*/}
+
+- React now never rethrows errors, so stack traces are more accurate and Chrome's purple break-on-error stop sign now works properly
+- Added a new tool for profiling React components and identifying places where defining `shouldComponentUpdate` can give performance improvements
+- Added support for SVG tags `defs`, `linearGradient`, `polygon`, `radialGradient`, `stop`
+- Added support for more attributes:
+  - `noValidate` and `formNoValidate` for forms
+  - `property` for Open Graph `<meta>` tags
+  - `sandbox`, `seamless`, and `srcDoc` for `<iframe>` tags
+  - `scope` for screen readers
+  - `span` for `<colgroup>` tags
+- Added support for defining `propTypes` in mixins
+- Added `any`, `arrayOf`, `component`, `oneOfType`, `renderable`, `shape` to `React.PropTypes`
+- Added support for `statics` on component spec for static component methods
+- On all events, `.currentTarget` is now properly set
+- On keyboard events, `.key` is now polyfilled in all browsers for special (non-printable) keys
+- On clipboard events, `.clipboardData` is now polyfilled in IE
+- On drag events, `.dataTransfer` is now present
+- Added support for `onMouseOver` and `onMouseOut` in addition to the existing `onMouseEnter` and `onMouseLeave` events
+- Added support for `onLoad` and `onError` on `<img>` elements
+- Added support for `onReset` on `<form>` elements
+- The `autoFocus` attribute is now polyfilled consistently on `input`, `select`, and `textarea`
+
+#### Bug Fixes {/*bug-fixes*/}
+
+- React no longer adds an `__owner__` property to each component's `props` object; passed-in props are now never mutated
+- When nesting top-level components (e.g., calling `React.renderComponent` within `componentDidMount`), events now properly bubble to the parent component
+- Fixed a case where nesting top-level components would throw an error when updating
+- Passing an invalid or misspelled propTypes type now throws an error
+- On mouse enter/leave events, `.target`, `.relatedTarget`, and `.type` are now set properly
+- On composition events, `.data` is now properly normalized in IE9 and IE10
+- CSS property values no longer have `px` appended for the unitless properties `columnCount`, `flex`, `flexGrow`, `flexShrink`, `lineClamp`, `order`, `widows`
+- Fixed a memory leak when unmounting children with a `componentWillUnmount` handler
+- Fixed a memory leak when `renderComponentToString` would store event handlers
+- Fixed an error that could be thrown when removing form elements during a click handler
+- `key` values containing `.` are now supported
+- Shortened `data-reactid` values for performance
+- Components now always remount when the `key` property changes
+- Event handlers are attached to `document` only when necessary, improving performance in some cases
+- Events no longer use `.returnValue` in modern browsers, eliminating a warning in Chrome
+- `scrollLeft` and `scrollTop` are no longer accessed on document.body, eliminating a warning in Chrome
+- General performance fixes, memory optimizations, improvements to warnings and error messages
+
+### React with Addons {/*react-with-addons*/}
+
+- `React.addons.TransitionGroup` was renamed to `React.addons.CSSTransitionGroup`
+- `React.addons.TransitionGroup` was added as a more general animation wrapper
+- `React.addons.cloneWithProps` was added for cloning components and modifying their props
+- Bug fix for adding back nodes during an exit transition for CSSTransitionGroup
+- Bug fix for changing `transitionLeave` in CSSTransitionGroup
+- Performance optimizations for CSSTransitionGroup
+- On checkbox `<input>` elements, `checkedLink` is now supported for two-way binding
+
+### JSX Compiler and react-tools Package {/*jsx-compiler-and-react-tools-package*/}
+
+- Whitespace normalization has changed; now space between two tags on the same line will be preserved, while newlines between two tags will be removed
+- The `react-tools` npm package no longer includes the React core libraries; use the `react` package instead.
+- `displayName` is now added in more cases, improving error messages and names in the React Dev Tools
+- Fixed an issue where an invalid token error was thrown after a JSX closing tag
+- `JSXTransformer` now uses source maps automatically in modern browsers
+- `JSXTransformer` error messages now include the filename and problematic line contents when a file fails to parse
diff --git a/beta/src/content/blog/2014/02/20/react-v0.9.md b/beta/src/content/blog/2014/02/20/react-v0.9.md
new file mode 100644
index 000000000..d19fdd746
--- /dev/null
+++ b/beta/src/content/blog/2014/02/20/react-v0.9.md
@@ -0,0 +1,137 @@
+---
+title: React v0.9
+author: [sophiebits]
+---
+
+I'm excited to announce that today we're releasing React v0.9, which incorporates many bug fixes and several new features since the last release. This release contains almost four months of work, including over 800 commits from over 70 committers!
+
+Thanks to everyone who tested the release candidate; we were able to find and fix an error in the event handling code, we upgraded envify to make running browserify on React faster, and we added support for five new attributes.
+
+As always, the release is available for download from the CDN:
+
+- **React**  
+  Dev build with warnings: https://fb.me/react-0.9.0.js  
+  Minified build for production: https://fb.me/react-0.9.0.min.js
+- **React with Add-Ons**  
+  Dev build with warnings: https://fb.me/react-with-addons-0.9.0.js  
+  Minified build for production: https://fb.me/react-with-addons-0.9.0.min.js
+- **In-Browser JSX Transformer**  
+  https://fb.me/JSXTransformer-0.9.0.js
+
+We've also published version `0.9.0` of the `react` and `react-tools` packages on npm and the `react` package on bower.
+
+## What’s New? {/*whats-new*/}
+
+This version includes better support for normalizing event properties across all supported browsers so that you need to worry even less about cross-browser differences. We've also made many improvements to error messages and have refactored the core to never rethrow errors, so stack traces are more accurate and Chrome's purple break-on-error stop sign now works properly.
+
+We've also added to the add-ons build [React.addons.TestUtils](/docs/test-utils.html), a set of new utilities to help you write unit tests for React components. You can now simulate events on your components, and several helpers are provided to help make assertions about the rendered DOM tree.
+
+We've also made several other improvements and a few breaking changes; the full changelog is provided below.
+
+## JSX Whitespace {/*jsx-whitespace*/}
+
+In addition to the changes to React core listed below, we've made a small change to the way JSX interprets whitespace to make things more consistent. With this release, space between two components on the same line will be preserved, while a newline separating a text node from a tag will be eliminated in the output. Consider the code:
+
+```html
+<div>
+  Monkeys: {listOfMonkeys} {submitButton}
+</div>
+```
+
+In v0.8 and below, it was transformed to the following:
+
+```javascript
+React.DOM.div(null, ' Monkeys: ', listOfMonkeys, submitButton);
+```
+
+In v0.9, it will be transformed to this JS instead:
+
+```javascript{2,3}
+React.DOM.div(null, 'Monkeys:', listOfMonkeys, ' ', submitButton);
+```
+
+We believe this new behavior is more helpful and eliminates cases where unwanted whitespace was previously added.
+
+In cases where you want to preserve the space adjacent to a newline, you can write `{'Monkeys: '}` or `Monkeys:{' '}` in your JSX source. We've included a script to do an automated codemod of your JSX source tree that preserves the old whitespace behavior by adding and removing spaces appropriately. You can [install jsx_whitespace_transformer from npm](https://github.com/facebook/react/blob/master/npm-jsx_whitespace_transformer/README.md) and run it over your source tree to modify files in place. The transformed JSX files will preserve your code's existing whitespace behavior.
+
+## Changelog {/*changelog*/}
+
+### React Core {/*react-core*/}
+
+#### Breaking Changes {/*breaking-changes*/}
+
+- The lifecycle methods `componentDidMount` and `componentDidUpdate` no longer receive the root node as a parameter; use `this.getDOMNode()` instead
+- Whenever a prop is equal to `undefined`, the default value returned by `getDefaultProps` will now be used instead
+- `React.unmountAndReleaseReactRootNode` was previously deprecated and has now been removed
+- `React.renderComponentToString` is now synchronous and returns the generated HTML string
+- Full-page rendering (that is, rendering the `<html>` tag using React) is now supported only when starting with server-rendered markup
+- On mouse wheel events, `deltaY` is no longer negated
+- When prop types validation fails, a warning is logged instead of an error thrown (with the production build of React, type checks are now skipped for performance)
+- On `input`, `select`, and `textarea` elements, `.getValue()` is no longer supported; use `.getDOMNode().value` instead
+- `this.context` on components is now reserved for internal use by React
+
+#### New Features {/*new-features*/}
+
+- React now never rethrows errors, so stack traces are more accurate and Chrome's purple break-on-error stop sign now works properly
+- Added support for SVG tags `defs`, `linearGradient`, `polygon`, `radialGradient`, `stop`
+- Added support for more attributes:
+  - `crossOrigin` for CORS requests
+  - `download` and `hrefLang` for `<a>` tags
+  - `mediaGroup` and `muted` for `<audio>` and `<video>` tags
+  - `noValidate` and `formNoValidate` for forms
+  - `property` for Open Graph `<meta>` tags
+  - `sandbox`, `seamless`, and `srcDoc` for `<iframe>` tags
+  - `scope` for screen readers
+  - `span` for `<colgroup>` tags
+- Added support for defining `propTypes` in mixins
+- Added `any`, `arrayOf`, `component`, `oneOfType`, `renderable`, `shape` to `React.PropTypes`
+- Added support for `statics` on component spec for static component methods
+- On all events, `.currentTarget` is now properly set
+- On keyboard events, `.key` is now polyfilled in all browsers for special (non-printable) keys
+- On clipboard events, `.clipboardData` is now polyfilled in IE
+- On drag events, `.dataTransfer` is now present
+- Added support for `onMouseOver` and `onMouseOut` in addition to the existing `onMouseEnter` and `onMouseLeave` events
+- Added support for `onLoad` and `onError` on `<img>` elements
+- Added support for `onReset` on `<form>` elements
+- The `autoFocus` attribute is now polyfilled consistently on `input`, `select`, and `textarea`
+
+#### Bug Fixes {/*bug-fixes*/}
+
+- React no longer adds an `__owner__` property to each component's `props` object; passed-in props are now never mutated
+- When nesting top-level components (e.g., calling `React.renderComponent` within `componentDidMount`), events now properly bubble to the parent component
+- Fixed a case where nesting top-level components would throw an error when updating
+- Passing an invalid or misspelled propTypes type now throws an error
+- On mouse enter/leave events, `.target`, `.relatedTarget`, and `.type` are now set properly
+- On composition events, `.data` is now properly normalized in IE9 and IE10
+- CSS property values no longer have `px` appended for the unitless properties `columnCount`, `flex`, `flexGrow`, `flexShrink`, `lineClamp`, `order`, `widows`
+- Fixed a memory leak when unmounting children with a `componentWillUnmount` handler
+- Fixed a memory leak when `renderComponentToString` would store event handlers
+- Fixed an error that could be thrown when removing form elements during a click handler
+- Boolean attributes such as `disabled` are rendered without a value (previously `disabled="true"`, now simply `disabled`)
+- `key` values containing `.` are now supported
+- Shortened `data-reactid` values for performance
+- Components now always remount when the `key` property changes
+- Event handlers are attached to `document` only when necessary, improving performance in some cases
+- Events no longer use `.returnValue` in modern browsers, eliminating a warning in Chrome
+- `scrollLeft` and `scrollTop` are no longer accessed on document.body, eliminating a warning in Chrome
+- General performance fixes, memory optimizations, improvements to warnings and error messages
+
+### React with Addons {/*react-with-addons*/}
+
+- `React.addons.TestUtils` was added to help write unit tests
+- `React.addons.TransitionGroup` was renamed to `React.addons.CSSTransitionGroup`
+- `React.addons.TransitionGroup` was added as a more general animation wrapper
+- `React.addons.cloneWithProps` was added for cloning components and modifying their props
+- Bug fix for adding back nodes during an exit transition for CSSTransitionGroup
+- Bug fix for changing `transitionLeave` in CSSTransitionGroup
+- Performance optimizations for CSSTransitionGroup
+- On checkbox `<input>` elements, `checkedLink` is now supported for two-way binding
+
+### JSX Compiler and react-tools Package {/*jsx-compiler-and-react-tools-package*/}
+
+- Whitespace normalization has changed; now space between two tags on the same line will be preserved, while newlines between two tags will be removed
+- The `react-tools` npm package no longer includes the React core libraries; use the `react` package instead.
+- `displayName` is now added in more cases, improving error messages and names in the React Dev Tools
+- Fixed an issue where an invalid token error was thrown after a JSX closing tag
+- `JSXTransformer` now uses source maps automatically in modern browsers
+- `JSXTransformer` error messages now include the filename and problematic line contents when a file fails to parse
diff --git a/beta/src/content/blog/2014/02/24/community-roundup-17.md b/beta/src/content/blog/2014/02/24/community-roundup-17.md
new file mode 100644
index 000000000..f6f344d77
--- /dev/null
+++ b/beta/src/content/blog/2014/02/24/community-roundup-17.md
@@ -0,0 +1,90 @@
+---
+title: 'Community Round-up #17'
+author: [jgebhardt]
+---
+
+It's exciting to see the number of real-world React applications and components skyrocket over the past months! This community round-up features a few examples of inspiring React applications and components.
+
+## React in the Real World {/*react-in-the-real-world*/}
+
+### Facebook Lookback video editor {/*facebook-lookback-video-editor*/}
+
+Large parts of Facebook's web frontend are already powered by React. The recently released Facebook [Lookback video and its corresponding editor](https://www.facebook.com/lookback/edit/) are great examples of a complex, real-world React app.
+
+### Russia's largest bank is now powered by React {/*russias-largest-bank-is-now-powered-by-react*/}
+
+Sberbank, Russia's largest bank, recently switched large parts of their site to use React, as detailed in [this post by Vyacheslav Slinko](https://groups.google.com/forum/#!topic/reactjs/Kj6WATX0atg).
+
+### Relato {/*relato*/}
+
+[Relato](https://bripkens.github.io/relato/) by [Ben Ripkens](https://github.com/bripkens) shows Open Source Statistics based on npm data. It features a filterable and sortable table built in React. Check it out &ndash; it's super fast!
+
+### Makona Editor {/*makona-editor*/}
+
+John Lynch ([@johnrlynch](https://twitter.com/johnrlynch)) created Makona, a block-style document editor for the web. Blocks of different content types comprise documents, authored using plain markup. At the switch of a toggle, block contents are then rendered on the page. While not quite a WYSIWYG editor, Makona uses plain textareas for input. This makes it compatible with a wider range of platforms than traditional rich text editors.
+[![](/images/blog/makona-editor.png)](https://johnthethird.github.io/makona-editor/)
+
+### Create Chrome extensions using React {/*create-chrome-extensions-using-react*/}
+
+React is in no way limited to just web pages. Brandon Tilley ([@BinaryMuse](https://twitter.com/BinaryMuse)) just released a detailed walk-through of [how he built his Chrome extension "Fast Tab Switcher" using React](http://brandontilley.com/2014/02/24/creating-chrome-extensions-with-react.html).
+
+### Twitter Streaming Client {/*twitter-streaming-client*/}
+
+Javier Aguirre ([@javaguirre](https://twitter.com/javaguirre)) put together a simple [twitter streaming client using node, socket.io and React](http://javaguirre.net/2014/02/11/twitter-streaming-api-with-node-socket-io-and-reactjs/).
+
+### Sproutsheet {/*sproutsheet*/}
+
+[Sproutsheet](http://sproutsheet.com/) is a gardening calendar. You can use it to track certain events that happen in the life of your plants. It's currently in beta and supports localStorage, and data/image import and export.
+
+### Instant Domain Search {/*instant-domain-search*/}
+
+[Instant Domain Search](https://instantdomainsearch.com/) also uses React. It sure is instant!
+
+### SVG-based graphical node editor {/*svg-based-graphical-node-editor*/}
+
+[NoFlo](http://noflojs.org/) and [Meemoo](http://meemoo.org/) developer [Forresto Oliphant](http://www.forresto.com/) built an awesome SVG-based [node editor](https://forresto.github.io/prototyping/react/) in React.
+[![](/images/blog/react-svg-fbp.png)](https://forresto.github.io/prototyping/react/)
+
+### Ultimate Tic-Tac-Toe Game in React {/*ultimate-tic-tac-toe-game-in-react*/}
+
+Rafał Cieślak ([@Ravicious](https://twitter.com/Ravicious)) wrote a [React version](https://ravicious.github.io/ultimate-ttt/) of [Ultimate Tic Tac Toe](http://mathwithbaddrawings.com/2013/06/16/ultimate-tic-tac-toe/). Find the source [here](https://github.com/ravicious/ultimate-ttt).
+
+### ReactJS Gallery {/*reactjs-gallery*/}
+
+[Emanuele Rampichini](https://github.com/lele85)'s [ReactJS Gallery](https://github.com/lele85/ReactGallery) is a cool demo app that shows fullscreen images from a folder on the server. If the folder content changes, the gallery app updates via websockets.
+
+Emanuele shared this awesome demo video with us:
+
+<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/jYcpaemt90M" frameborder="0" allowfullscreen></iframe>
+
+## React Components {/*react-components*/}
+
+### Table Sorter {/*table-sorter*/}
+
+[Table Sorter](https://bgerm.github.io/react-table-sorter-demo/) by [bgerm](https://github.com/bgerm) [[source](https://github.com/bgerm/react-table-sorter-demo)] is another helpful React component.
+
+### Static-search {/*static-search*/}
+
+Dmitry Chestnykh [@dchest](https://twitter.com/dchest) wrote a [static search indexer](https://github.com/dchest/static-search) in Go, along with a [React-based web front-end](http://www.codingrobots.com/search/) that consumes search result via JSON.
+
+### Lorem Ipsum component {/*lorem-ipsum-component*/}
+
+[Martin Andert](https://github.com/martinandert) created [react-lorem-component](https://github.com/martinandert/react-lorem-component), a simple component for all your placeholding needs.
+
+### Input with placeholder shim {/*input-with-placeholder-shim*/}
+
+[react-input-placeholder](enigma-io/react-input-placeholder) by [enigma-io](@enigma-io) is a small wrapper around React.DOM.input that shims in placeholder functionality for browsers that don't natively support it.
+
+### diContainer {/*dicontainer*/}
+
+[dicontainer](https://github.com/SpektrumFM/dicontainer) provides a dependency container that lets you inject Angular-style providers and services as simple React.js Mixins.
+
+## React server rendering {/*react-server-rendering*/}
+
+Ever wonder how to pre-render React components on the server? [react-server-example](https://github.com/mhart/react-server-example) by Michael Hart ([@hichaelmart](https://twitter.com/hichaelmart)) walks through the necessary steps.
+
+Similarly, Alan deLevie ([@adelevie](https://twitter.com/adelevie)) created [react-client-server-starter](https://github.com/adelevie/react-client-server-starter), another detailed walk-through of how to server-render your app.
+
+## Random Tweet {/*random-tweet*/}
+
+<div><blockquote class="twitter-tweet" lang="en"><p>Recent changes: web ui is being upgraded to [#reactjs](https://twitter.com/search?q=%23reactjs&src=hash), HEAD~4 at [https://camlistore.googlesource.com/camlistore/](https://camlistore.googlesource.com/camlistore/)</p>&mdash; Camlistore (@Camlistore) <a href="https://twitter.com/Camlistore/status/423925795820539904">January 16, 2014</a></blockquote></div>
diff --git a/beta/src/content/blog/2014/03/14/community-roundup-18.md b/beta/src/content/blog/2014/03/14/community-roundup-18.md
new file mode 100644
index 000000000..17c46aa01
--- /dev/null
+++ b/beta/src/content/blog/2014/03/14/community-roundup-18.md
@@ -0,0 +1,101 @@
+---
+title: 'Community Round-up #18'
+author: [jgebhardt]
+---
+
+In this Round-up, we are taking a few closer looks at React's interplay with different frameworks and architectures.
+
+## "Little framework BIG splash" {/*little-framework-big-splash*/}
+
+Let's start with yet another refreshing introduction to React: Craig Savolainen ([@maedhr](https://twitter.com/maedhr)) walks through some first steps, demonstrating [how to build a Google Maps component](http://infinitemonkeys.influitive.com/little-framework-big-splash) using React.
+
+## Architecting your app with react {/*architecting-your-app-with-react*/}
+
+Brandon Konkle ([@bkonkle](https://twitter.com/bkonkle))
+[Architecting your app with react](http://lincolnloop.com/blog/architecting-your-app-react-part-1/)
+We're looking forward to part 2!
+
+> React is not a full MVC framework, and this is actually one of its strengths. Many who adopt React choose to do so alongside their favorite MVC framework, like Backbone. React has no opinions about routing or syncing data, so you can easily use your favorite tools to handle those aspects of your frontend application. You'll often see React used to manage specific parts of an application's UI and not others. React really shines, however, when you fully embrace its strategies and make it the core of your application's interface.
+>
+> [Read the full article...](http://lincolnloop.com/blog/architecting-your-app-react-part-1/)
+
+## React vs. async DOM manipulation {/*react-vs-async-dom-manipulation*/}
+
+Eliseu Monar ([@eliseumds](https://twitter.com/eliseumds))'s post "[ReactJS vs async concurrent rendering](http://eliseumds.tumblr.com/post/77843550010/vitalbox-pchr-reactjs-vs-async-concurrent-rendering)" is a great example of how React quite literally renders a whole array of common web development work(arounds) obsolete.
+
+## React, Scala and the Play Framework {/*react-scala-and-the-play-framework*/}
+
+[Matthias Nehlsen](http://matthiasnehlsen.com/) wrote a detailed introductory piece on [React and the Play Framework](http://matthiasnehlsen.com/blog/2014/01/05/play-framework-and-facebooks-react-library/), including a helpful architectural diagram of a typical React app.
+
+Nehlsen's React frontend is the second implementation of his chat application's frontend, following an AngularJS version. Both implementations are functionally equivalent and offer some perspective on differences between the two frameworks.
+
+In [another article](http://matthiasnehlsen.com/blog/2014/01/24/scala-dot-js-and-reactjs/), he walks us through the process of using React with scala.js to implement app-wide undo functionality.
+
+Also check out his [talk](http://m.ustream.tv/recorded/42780242) at Ping Conference 2014, in which he walks through a lot of the previously content in great detail.
+
+## React and Backbone {/*react-and-backbone*/}
+
+The folks over at [Venmo](https://venmo.com/) are using React in conjunction with Backbone.
+Thomas Boyt ([@thomasaboyt](https://twitter.com/thomasaboyt)) wrote [this detailed piece](http://www.thomasboyt.com/2013/12/17/using-reactjs-as-a-backbone-view.html) about why React and Backbone are "a fantastic pairing".
+
+## React vs. Ember {/*react-vs-ember*/}
+
+Eric Berry ([@coderberry](https://twitter.com/coderberry)) developed Ember equivalents for some of the official React examples. Read his post for a side-by-side comparison of the respective implementations: ["Facebook React vs. Ember"](https://instructure.github.io/blog/2013/12/17/facebook-react-vs-ember/).
+
+## React and plain old HTML {/*react-and-plain-old-html*/}
+
+Daniel Lo Nigro ([@Daniel15](https://twitter.com/Daniel15)) created [React-Magic](https://github.com/reactjs/react-magic), which leverages React to ajaxify plain old html pages and even [allows CSS transitions between pageloads](http://stuff.dan.cx/facebook/react-hacks/magic/red.php).
+
+> React-Magic intercepts all navigation (link clicks and form posts) and loads the requested page via an AJAX request. React is then used to "diff" the old HTML with the new HTML, and only update the parts of the DOM that have been changed.
+>
+> [Check out the project on GitHub...](https://github.com/reactjs/react-magic)
+
+On a related note, [Reactize](https://turbo-react.herokuapp.com/) by Ross Allen ([@ssorallen](https://twitter.com/ssorallen)) is a similarly awesome project: A wrapper for Rails' [Turbolinks](https://github.com/rails/turbolinks/), which seems to have inspired John Lynch ([@johnrlynch](https://twitter.com/johnrlynch)) to then create [a server-rendered version using the JSX transformer in Rails middleware](http://www.rigelgroupllc.com/blog/2014/01/12/react-jsx-transformer-in-rails-middleware/).
+
+## React and Object.observe {/*react-and-objectobserve*/}
+
+Check out [François de Campredon](https://github.com/fdecampredon)'s implementation of [TodoMVC based on React and ES6's Object.observe](https://github.com/fdecampredon/react-observe-todomvc/).
+
+## React and Angular {/*react-and-angular*/}
+
+Ian Bicking ([@ianbicking](https://twitter.com/ianbicking)) of Mozilla Labs [explains why he "decided to go with React instead of Angular.js"](https://plus.google.com/+IanBicking/posts/Qj8R5SWAsfE).
+
+### ng-React Update {/*ng-react-update*/}
+
+[David Chang](https://github.com/davidchang) works through some performance improvements of his [ngReact](https://github.com/davidchang/ngReact) project. His post ["ng-React Update - React 0.9 and Angular Track By"](http://davidandsuzi.com/ngreact-update/) includes some helpful advice on boosting render performance for Angular components.
+
+> Angular gives you a ton of functionality out of the box - a full MV\* framework - and I am a big fan, but I'll admit that you need to know how to twist the right knobs to get performance.
+>
+> That said, React gives you a very strong view component out of the box with the performance baked right in. Try as I did, I couldn't actually get it any faster. So pretty impressive stuff.
+>
+> [Read the full post...](http://davidandsuzi.com/ngreact-update/)
+
+React was also recently mentioned at ng-conf, where the Angular team commented on React's concept of the virtual DOM:
+
+<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/srt3OBP2kGc?start=113" frameborder="0" allowfullscreen></iframe>
+
+## React and Web Components {/*react-and-web-components*/}
+
+Jonathan Krause ([@jonykrause](https://twitter.com/jonykrause)) offers his thoughts regarding [parallels between React and Web Components](http://jonykrau.se/posts/the-value-of-react), highlighting the value of React's ability to render pages on the server practically for free.
+
+## Immutable React {/*immutable-react*/}
+
+[Peter Hausel](http://pk11.kinja.com/) shows how to build a Wikipedia auto-complete demo based on immutable data structures (similar to [mori](https://npmjs.org/package/mori)), really taking advantage of the framework's one-way reactive data binding:
+
+> Its truly reactive design makes DOM updates finally sane and when combined with persistent data structures one can experience JavaScript development like it was never done before.
+>
+> [Read the full post](http://tech.kinja.com/immutable-react-1495205675)
+
+## D3 and React {/*d3-and-react*/}
+
+[Ben Smith](http://10consulting.com/) built some great SVG-based charting components using a little less of D3 and a little more of React: [D3 and React - the future of charting components?](http://10consulting.com/2014/02/19/d3-plus-reactjs-for-charting/)
+
+## Om and React {/*om-and-react*/}
+
+Josh Haberman ([@joshhaberman](https://twitter.com/JoshHaberman)) discusses performance differences between React, Om and traditional MVC frameworks in "[A closer look at OM vs React performance](http://blog.reverberate.org/2014/02/on-future-of-javascript-mvc-frameworks.html)".
+
+Speaking of Om: [Omchaya](https://github.com/sgrove/omchaya) by Sean Grove ([@sgrove](https://twitter.com/sgrove)) is a neat Cljs/Om example project.
+
+## Random Tweets {/*random-tweets*/}
+
+<div><blockquote class="twitter-tweet" lang="en"><p>Worked for 2 hours on a [@react_js](https://twitter.com/react_js) app sans internet. Love that I could get stuff done with it without googling every question.</p>&mdash; John Shimek (@varikin) <a href="https://twitter.com/varikin/status/436606891657949185">February 20, 2014</a></blockquote></div>
diff --git a/beta/src/content/blog/2014/03/19/react-v0.10-rc1.md b/beta/src/content/blog/2014/03/19/react-v0.10-rc1.md
new file mode 100644
index 000000000..9768da4a8
--- /dev/null
+++ b/beta/src/content/blog/2014/03/19/react-v0.10-rc1.md
@@ -0,0 +1,74 @@
+---
+title: React v0.10 RC
+author: [zpao]
+---
+
+[v0.9 has only been out for a month](/blog/2014/02/20/react-v0.9.html), but we’re getting ready to push out v0.10 already. Unlike v0.9 which took a long time, we don't have a long list of changes to talk about.
+
+The release candidate is available for download from the CDN:
+
+- **React**  
+  Dev build with warnings: https://fb.me/react-0.10.0-rc1.js  
+  Minified build for production: https://fb.me/react-0.10.0-rc1.min.js
+- **React with Add-Ons**  
+  Dev build with warnings: https://fb.me/react-with-addons-0.10.0-rc1.js  
+  Minified build for production: https://fb.me/react-with-addons-0.10.0-rc1.min.js
+- **In-Browser JSX transformer**  
+  https://fb.me/JSXTransformer-0.10.0-rc1.js
+
+We've also published version `0.10.0-rc1` of the `react` and `react-tools` packages on npm and the `react` package on bower.
+
+Please try these builds out and [file an issue on GitHub](https://github.com/facebook/react/issues/new) if you see anything awry.
+
+## Clone On Mount {/*clone-on-mount*/}
+
+The main purpose of this release is to provide a smooth upgrade path as we evolve some of the implementation of core. In v0.9 we started warning in cases where you called methods on unmounted components. This is part of an effort to enforce the idea that the return value of a component (`React.DOM.div()`, `MyComponent()`) is in fact not a reference to the component instance React uses in the virtual DOM. The return value is instead a light-weight object that React knows how to use. Since the return value currently is a reference to the same object React uses internally, we need to make this transition in stages as many people have come to depend on this implementation detail.
+
+In 0.10, we’re adding more warnings to catch a similar set of patterns. When a component is mounted we clone it and use that object for our internal representation. This allows us to capture calls you think you’re making to a mounted component. We’ll forward them on to the right object, but also warn you that this is breaking. See “Access to the Mounted Instance” on [this page](https://fb.me/react-warning-descriptors). Most of the time you can solve your pattern by using refs.
+
+Storing a reference to your top level component is a pattern touched upon on that page, but another examples that demonstrates what we see a lot of:
+
+```js
+// This is a common pattern. However instance here really refers to a
+// "descriptor", not necessarily the mounted instance.
+var instance = <MyComponent/>;
+React.renderComponent(instance);
+// ...
+instance.setProps(...);
+
+// The change here is very simple. The return value of renderComponent will be
+// the mounted instance.
+var instance = React.renderComponent(<MyComponent/>)
+// ...
+instance.setProps(...);
+```
+
+These warnings and method forwarding are only enabled in the development build. The production builds continue to work as they did in v0.9. We strongly encourage you to use the development builds to catch these warnings and fix the call sites.
+
+The plan for v0.11 is that we will go fully to "descriptors". Method calls on the return value of `MyComponent()` will fail hard.
+
+## Changelog {/*changelog*/}
+
+### React Core {/*react-core*/}
+
+#### New Features {/*new-features*/}
+
+- Added warnings to help migrate towards descriptors
+- Made it possible to server render without React-related markup (`data-reactid`, `data-react-checksum`). This DOM will not be mountable by React. [Read the docs for `React.renderComponentToStaticMarkup`](/docs/top-level-api.html#react.rendercomponenttostaticmarkup)
+- Added support for more attributes:
+  - `srcSet` for `<img>` to specify images at different pixel ratios
+  - `textAnchor` for SVG
+
+#### Bug Fixes {/*bug-fixes*/}
+
+- Ensure all void elements don’t insert a closing tag into the markup.
+- Ensure `className={false}` behaves consistently
+- Ensure `this.refs` is defined, even if no refs are specified.
+
+### Addons {/*addons*/}
+
+- `update` function to deal with immutable data. [Read the docs](/docs/update.html)
+
+### react-tools {/*react-tools*/}
+
+- Added an option argument to `transform` function. The only option supported is `harmony`, which behaves the same as `jsx --harmony` on the command line. This uses the ES6 transforms from [jstransform](https://github.com/facebook/jstransform).
diff --git a/beta/src/content/blog/2014/03/21/react-v0.10.md b/beta/src/content/blog/2014/03/21/react-v0.10.md
new file mode 100644
index 000000000..49b777c5c
--- /dev/null
+++ b/beta/src/content/blog/2014/03/21/react-v0.10.md
@@ -0,0 +1,74 @@
+---
+title: React v0.10
+author: [zpao]
+---
+
+Hot on the heels of the [release candidate earlier this week](/blog/2014/03/19/react-v0.10-rc1.html), we're ready to call v0.10 done. The only major issue we discovered had to do with the `react-tools` package, which has been updated. We've copied over the changelog from the RC with some small clarifying changes.
+
+The release is available for download from the CDN:
+
+- **React**  
+  Dev build with warnings: https://fb.me/react-0.10.0.js  
+  Minified build for production: https://fb.me/react-0.10.0.min.js
+- **React with Add-Ons**  
+  Dev build with warnings: https://fb.me/react-with-addons-0.10.0.js  
+  Minified build for production: https://fb.me/react-with-addons-0.10.0.min.js
+- **In-Browser JSX transformer**  
+  https://fb.me/JSXTransformer-0.10.0.js
+
+We've also published version `0.10.0` of the `react` and `react-tools` packages on npm and the `react` package on bower.
+
+Please try these builds out and [file an issue on GitHub](https://github.com/facebook/react/issues/new) if you see anything awry.
+
+## Clone On Mount {/*clone-on-mount*/}
+
+The main purpose of this release is to provide a smooth upgrade path as we evolve some of the implementation of core. In v0.9 we started warning in cases where you called methods on unmounted components. This is part of an effort to enforce the idea that the return value of a component (`React.DOM.div()`, `MyComponent()`) is in fact not a reference to the component instance React uses in the virtual DOM. The return value is instead a light-weight object that React knows how to use. Since the return value currently is a reference to the same object React uses internally, we need to make this transition in stages as many people have come to depend on this implementation detail.
+
+In 0.10, we’re adding more warnings to catch a similar set of patterns. When a component is mounted we clone it and use that object for our internal representation. This allows us to capture calls you think you’re making to a mounted component. We’ll forward them on to the right object, but also warn you that this is breaking. See “Access to the Mounted Instance” on [this page](https://fb.me/react-warning-descriptors). Most of the time you can solve your pattern by using refs.
+
+Storing a reference to your top level component is a pattern touched upon on that page, but another examples that demonstrates what we see a lot of:
+
+```js
+// This is a common pattern. However instance here really refers to a
+// "descriptor", not necessarily the mounted instance.
+var instance = <MyComponent/>;
+React.renderComponent(instance);
+// ...
+instance.setProps(...);
+
+// The change here is very simple. The return value of renderComponent will be
+// the mounted instance.
+var instance = React.renderComponent(<MyComponent/>)
+// ...
+instance.setProps(...);
+```
+
+These warnings and method forwarding are only enabled in the development build. The production builds continue to work as they did in v0.9. We strongly encourage you to use the development builds to catch these warnings and fix the call sites.
+
+The plan for v0.11 is that we will go fully to "descriptors". Method calls on the return value of `MyComponent()` will fail hard.
+
+## Changelog {/*changelog*/}
+
+### React Core {/*react-core*/}
+
+#### New Features {/*new-features*/}
+
+- Added warnings to help migrate towards descriptors
+- Made it possible to server render without React-related markup (`data-reactid`, `data-react-checksum`). This DOM will not be mountable by React. [Read the docs for `React.renderComponentToStaticMarkup`](/docs/top-level-api.html#react.rendercomponenttostaticmarkup)
+- Added support for more attributes:
+  - `srcSet` for `<img>` to specify images at different pixel ratios
+  - `textAnchor` for SVG
+
+#### Bug Fixes {/*bug-fixes*/}
+
+- Ensure all void elements don’t insert a closing tag into the markup.
+- Ensure `className={false}` behaves consistently
+- Ensure `this.refs` is defined, even if no refs are specified.
+
+### Addons {/*addons*/}
+
+- `update` function to deal with immutable data. [Read the docs](/docs/update.html)
+
+### react-tools {/*react-tools*/}
+
+- Added an option argument to `transform` function. The only option supported is `harmony`, which behaves the same as `jsx --harmony` on the command line. This uses the ES6 transforms from [jstransform](https://github.com/facebook/jstransform).
diff --git a/beta/src/content/blog/2014/03/28/the-road-to-1.0.md b/beta/src/content/blog/2014/03/28/the-road-to-1.0.md
new file mode 100644
index 000000000..e3a3b5f05
--- /dev/null
+++ b/beta/src/content/blog/2014/03/28/the-road-to-1.0.md
@@ -0,0 +1,56 @@
+---
+title: The Road to 1.0
+author: [zpao]
+---
+
+When we launched React last spring, we purposefully decided not to call it 1.0. It was production ready, but we had plans to evolve APIs and behavior as we saw how people were using React, both internally and externally. We've learned a lot over the past 9 months and we've thought a lot about what 1.0 will mean for React. A couple weeks ago, I outlined [several projects][projects] that we have planned to take us to 1.0 and beyond. Today I'm writing a bit more about them to give our users a better insight into our plans.
+
+Our primary goal with 1.0 is to clarify our messaging and converge on an API that is aligned with our goals. In order to do that, we want to clean up bad patterns we've seen in use and really help enable developers write good code.
+
+## Descriptors {/*descriptors*/}
+
+The first part of this is what we're calling "descriptors". I talked about this briefly in our [v0.10 announcements][v0.10]. The goal here is to separate our virtual DOM representation from our use of it. Simply, this means the return value of a component (e.g. `React.DOM.div()`, `MyComponent()`) will be a simple object containing the information React needs to render. Currently the object returned is actually linked to React's internal representation of the component and even directly to the DOM element. This has enabled some bad patterns that are quite contrary to how we want people to use React. That's our failure.
+
+We added some warnings in v0.9 to start migrating some of these bad patterns. With v0.10 we'll catch more. You'll see more on this soon as we expect to ship v0.11 with descriptors.
+
+## API Cleanup {/*api-cleanup*/}
+
+This is really connected to everything. We want to keep the API as simple as possible and help developers [fall into the pit of success][pitofsuccess]. Enabling bad patterns with bad APIs is not success.
+
+## ES6 {/*es6*/}
+
+Before we even launched React publicly, members of the team were talking about how we could leverage ES6, namely classes, to improve the experience of creating React components. Calling `React.createClass(...)` isn't great. We don't quite have the right answer here yet, but we're close. We want to make sure we make this as simple as possible. It could look like this:
+
+```js
+class MyComponent extends React.Component {
+  render() {
+    ...
+  }
+}
+```
+
+There are other features of ES6 we're already using in core. I'm sure we'll see more of that. The `jsx` executable we ship with `react-tools` already supports transforming many parts of ES6 into code that will run on older browsers.
+
+## Context {/*context*/}
+
+While we haven't documented `context`, it exists in some form in React already. It exists as a way to pass values through a tree without having to use props at every single point. We've seen this need crop up time and time again, so we want to make this as easy as possible. Its use has performance tradeoffs, and there are known weaknesses in our implementation, so we want to make sure this is a solid feature.
+
+## Addons {/*addons*/}
+
+As you may know, we ship a separate build of React with some extra features we called "addons". While this has served us fine, it's not great for our users. It's made testing harder, but also results in more cache misses for people using a CDN. The problem we face is that many of these "addons" need access to parts of React that we don't expose publicly. Our goal is to ship each addon on its own and let each hook into React as needed. This would also allow others to write and distribute "addons".
+
+## Browser Support {/*browser-support*/}
+
+As much as we'd all like to stop supporting older browsers, it's not always possible. Facebook still supports IE8. While React won't support IE8 forever, our goal is to have 1.0 support IE8. Hopefully we can continue to abstract some of these rough parts.
+
+## Animations {/*animations*/}
+
+Finding a way to define animations in a declarative way is a hard problem. We've been exploring the space for a long time. We've introduced some half-measures to alleviate some use cases, but the larger problem remains. While we'd like to make this a part of 1.0, realistically we don't think we'll have a good solution in place.
+
+## Miscellaneous {/*miscellaneous*/}
+
+There are several other things I listed on [our projects page][projects] that we're tracking. Some of them are internals and have no obvious outward effect (improve tests, repo separation, updated test runner). I encourage you to take a look.
+
+[v0.10]: /react/blog/2014/03/21/react-v0.10.html
+[pitofsuccess]: http://blog.codinghorror.com/falling-into-the-pit-of-success/
+[projects]: https://github.com/facebook/react/wiki/Projects
diff --git a/beta/src/content/blog/2014/04/04/reactnet.md b/beta/src/content/blog/2014/04/04/reactnet.md
new file mode 100644
index 000000000..146b968fa
--- /dev/null
+++ b/beta/src/content/blog/2014/04/04/reactnet.md
@@ -0,0 +1,38 @@
+---
+title: 'Use React and JSX in ASP.NET MVC'
+author: [Daniel15]
+---
+
+Today we're happy to announce the initial release of
+[ReactJS.NET](http://reactjs.net/), which makes it easier to use React and JSX
+in .NET applications, focusing specifically on ASP.NET MVC web applications.
+It has several purposes:
+
+- On-the-fly JSX to JavaScript compilation. Simply reference JSX files and they
+  will be compiled and cached server-side.
+
+  ```html
+  <script src="@Url.Content("/Scripts/HelloWorld.jsx")"></script>
+  ```
+
+- JSX to JavaScript compilation via popular minification/combination libraries
+  (Cassette and ASP.NET Bundling and Minification). This is suggested for
+  production websites.
+- Server-side component rendering to make your initial render super fast.
+
+Even though we are focusing on ASP.NET MVC, ReactJS.NET can also be used in
+Web Forms applications as well as non-web applications (for example, in build
+scripts). ReactJS.NET currently only works on Microsoft .NET but we are working
+on support for Linux and Mac OS X via Mono as well.
+
+## Installation {/*installation*/}
+
+ReactJS.NET is packaged in NuGet. Simply run `Install-Package React.Mvc4` in the
+package manager console or search NuGet for "React" to install it.
+[See the documentation](http://reactjs.net/docs) for more information. The
+GitHub project contains
+[a sample website](https://github.com/reactjs/React.NET/tree/master/src/React.Sample.Mvc4)
+demonstrating all of the features.
+
+Let us know what you think, and feel free to send through any feedback and
+report bugs [on GitHub](https://github.com/reactjs/React.NET).
diff --git a/beta/src/content/blog/2014/05/06/flux.md b/beta/src/content/blog/2014/05/06/flux.md
new file mode 100644
index 000000000..690d7603c
--- /dev/null
+++ b/beta/src/content/blog/2014/05/06/flux.md
@@ -0,0 +1,16 @@
+---
+title: 'Flux: An Application Architecture for React'
+author: [fisherwebdev, jingc]
+---
+
+We recently spoke at one of f8's breakout session about Flux, a data flow architecture that works well with React. Check out the video here:
+
+<figure><iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/nYkdrAPrdcw?list=PLb0IAmt7-GS188xDYE-u1ShQmFFGbrk0v&start=621" frameborder="0" allowfullscreen></iframe></figure>
+
+To summarize, Flux works well for us because the single directional data flow makes it easy to understand and modify an application as it becomes more complicated. We found that two-way data bindings lead to cascading updates, where changing one data model led to another data model updating, making it very difficult to predict what would change as the result of a single user interaction.
+
+In Flux, the Dispatcher is a singleton that directs the flow of data and ensures that updates do not cascade. As an application grows, the Dispatcher becomes more vital, as it can also manage dependencies between stores by invoking the registered callbacks in a specific order.
+
+When a user interacts with a React view, the view sends an action (usually represented as a JavaScript object with some fields) through the dispatcher, which notifies the various stores that hold the application's data and business logic. When the stores change state, they notify the views that something has updated. This works especially well with React's declarative model, which allows the stores to send updates without specifying how to transition views between states.
+
+Flux is more of a pattern than a formal framework, so you can start using Flux immediately without a lot of new code. An [example of this architecture](https://github.com/facebook/flux/tree/master/examples/flux-todomvc) is available, along with more [detailed documentation](https://facebook.github.io/flux/docs/overview.html) and a [tutorial](https://facebook.github.io/flux/docs/todo-list.html). Look for more examples to come in the future.
diff --git a/beta/src/content/blog/2014/05/29/one-year-of-open-source-react.md b/beta/src/content/blog/2014/05/29/one-year-of-open-source-react.md
new file mode 100644
index 000000000..d562a2cf4
--- /dev/null
+++ b/beta/src/content/blog/2014/05/29/one-year-of-open-source-react.md
@@ -0,0 +1,14 @@
+---
+title: 'One Year of Open-Source React'
+author: [chenglou]
+---
+
+Today marks the one-year open-source anniversary of React.
+
+It’s been a crazy ride. 2.3k commits and 1.5k issues and pull requests later, we’re approaching version 1.0 and nearing 7k GitHub stars, with big names such as Khan Academy, New York Times, and Airbnb (and naturally, Facebook and Instagram) using React in production, and many more developers blogging their success stories with it. The [roadmap](/blog/2014/03/28/the-road-to-1.0.html) gives a glimpse into the future of the library; exciting stuff lies ahead!
+
+Every success has its story. React was born out of our frustration at existing solutions for building UIs. When it was first suggested at Facebook, few people thought that functionally re-rendering everything and diffing the results could ever perform well. However, support grew after we built the first implementation and people wrote their first components. When we open-sourced React, the initial reception was [similarly skeptical](https://www.reddit.com/r/programming/comments/1fak87/react_facebooks_latest_javascript_client_library/). It challenges many pre-established conventions and received mostly disapproving first-impressions, intermingled with positive ones that often were votes of confidence in Facebook’s engineering capabilities. On an open, competitive platform such as the web, it's been hard to convince people to try React. [JSX](/docs/jsx-in-depth.html), in particular, filtered out a huge chunk of potential early adopters.
+
+Fast forward one year, React has strongly [grown in popularity](https://news.ycombinator.com/item?id=7489959). Special acknowledgments go to Khan Academy, the ClojureScript community, and established frameworks such as Ember and Angular for contributing to and debating on our work. We'd also like to thank all the [individual contributors](https://github.com/facebook/react/graphs/contributors) who have taken the time to help out over the past year. React, as a library and as a new paradigm on the web, wouldn't have gained as much traction without them. In the future, we will continue to try to set an example of what's possible to achieve when we rethink about current “best practices”.
+
+Here’s to another year!
diff --git a/beta/src/content/blog/2014/06/27/community-roundup-19.md b/beta/src/content/blog/2014/06/27/community-roundup-19.md
new file mode 100644
index 000000000..ca938a046
--- /dev/null
+++ b/beta/src/content/blog/2014/06/27/community-roundup-19.md
@@ -0,0 +1,60 @@
+---
+title: 'Community Round-up #19'
+author: [chenglou]
+---
+
+## React Meetups! {/*react-meetups*/}
+
+Ever wanted to find developers who also share the same interest in React than you? Recently, there has been a React Meetup in [San Francisco](http://www.meetup.com/ReactJS-San-Francisco/) (courtesy of [Telmate](http://www.telmate.com)), and one in [London](http://www.meetup.com/London-React-User-Group/) (courtesy of [Stuart Harris](http://www.meetup.com/London-React-User-Group/members/105837542/), [Cain Ullah](http://www.meetup.com/London-React-User-Group/members/15509971/) and [Zoe Merchant](http://www.meetup.com/London-React-User-Group/members/137058242/)). These two events have been big successes; a second one in London is [already planned](http://www.meetup.com/London-React-User-Group/events/191406572/).
+
+If you don't live near San Francisco or London, why not start one in your community?
+
+## Complementary Tools {/*complementary-tools*/}
+
+In case you haven't seen it, we've consolidated the tooling solution around React on [this wiki page](https://github.com/facebook/react/wiki/Complementary-Tools). Some of the notable recent entries include:
+
+- [Ryan Florence](https://github.com/rpflorence) and [Michael Jackson](https://github.com/mjackson)'s [react-nested-router](https://github.com/rpflorence/react-nested-router), which is a translation of the Ember router API to React.
+
+- [Stephen J. Collings](https://github.com/stevoland)'s [react-bootstrap](https://github.com/react-bootstrap/react-bootstrap), which wraps the popular framework with a bit of React goodness. The [website](https://react-bootstrap.github.io/components.html) features live-editable demos.
+
+- [Andrey Popp](https://github.com/andreypopp)'s [react-quickstart](https://github.com/andreypopp/react-quickstart), which gives you a quick template for server-side rendering and routing, among other features.
+
+These are some of the links that often pop up on the #reactjs IRC channel. If you made something that you think deserves to be shown on the wiki, feel free to add it!
+
+## React in Interesting Places {/*react-in-interesting-places*/}
+
+The core concepts React themselves is something very valuable that the community is exploring and pushing further. A year ago, we wouldn't have imagined something like [Bruce Hauman](http://rigsomelight.com)'s [Flappy Bird ClojureScript port](http://rigsomelight.com/2014/05/01/interactive-programming-flappy-bird-clojurescript.html), whose interactive programming has been made possible through React:
+
+<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/KZjFVdU8VLI" frameborder="0" allowfullscreen></iframe>
+
+And don't forget [Pete Hunt](https://github.com/petehunt)'s Wolfenstein 3D rendering engine in React ([source code](https://github.com/petehunt/wolfenstein3D-react/blob/master/js/renderer.js#L183)). While it's nearly a year old, it's still a nice demo.
+
+[![](/images/blog/wolfenstein_react.png)](http://www.petehunt.net/wolfenstein3D-react/wolf3d.html)
+
+Give us a shoutout on IRC or [React Google Groups](https://groups.google.com/forum/#!forum/reactjs) if you've used React in some Interesting places.
+
+## Even More People Using React {/*even-more-people-using-react*/}
+
+### Prismatic {/*prismatic*/}
+
+[Prismatic](http://getprismatic.com/home) recently shrank their codebase fivefold with the help of React and its popular ClojureScript wrapper, [Om](https://github.com/swannodette/om). They detailed their very positive experience [here](http://blog.getprismatic.com/om-sweet-om-high-functional-frontend-engineering-with-clojurescript-and-react/).
+
+> Finally, the state is normalized: each piece of information is represented in a single place. Since React ensures consistency between the DOM and the application data, the programmer can focus on ensuring that the state properly stays up to date in response to user input. If the application state is normalized, then this consistency is guaranteed by definition, completely avoiding the possibility of an entire class of common bugs.
+
+### Adobe Brackets {/*adobe-brackets*/}
+
+[Kevin Dangoor](http://www.kevindangoor.com) works on [Brackets](http://brackets.io/?lang=en), the open-source code editor. After writing [his first impression on React](http://www.kevindangoor.com/2014/05/simplifying-code-with-react/), he followed up with another insightful [article](http://www.kevindangoor.com/2014/05/react-in-brackets/) on how to gradually make the code transition, how to preserve the editor's good parts, and how to tune Brackets' tooling around JSX.
+
+> We don’t need to switch to React everywhere, all at once. It’s not a framework that imposes anything on the application structure. [...] Easy, iterative adoption is definitely something in React’s favor for us.
+
+### Storehouse {/*storehouse*/}
+
+[Storehouse](https://www.storehouse.co) (Apple Design Award 2014)'s web presence is build with React. Here's [an example story](https://www.storehouse.co/stories/y2ad-mexico-city-clouds). Congratulations on the award!
+
+### Vim Awesome {/*vim-awesome*/}
+
+[Vim Awesome](http://vimawesome.com), an open-source Vim plugins directory built on React, was just launched. Be sure to [check out the source code](https://github.com/divad12/vim-awesome) if you're curious to see an example of how to build a small single-page React app.
+
+## Random Tweets {/*random-tweets*/}
+
+<blockquote class="twitter-tweet" lang="en"><p>Spent 12 hours so far with <a href="https://twitter.com/hashtag/reactjs?src=hash">#reactjs</a>. Spent another 2 wondering why we&#39;ve been doing JS frameworks wrong until now. React makes me happy.</p>&mdash; Paul Irwin (@paulirwin) <a href="https://twitter.com/paulirwin/statuses/481263947589242882">June 24, 2014</a></blockquote>
diff --git a/beta/src/content/blog/2014/07/13/react-v0.11-rc1.md b/beta/src/content/blog/2014/07/13/react-v0.11-rc1.md
new file mode 100644
index 000000000..ef191e5ec
--- /dev/null
+++ b/beta/src/content/blog/2014/07/13/react-v0.11-rc1.md
@@ -0,0 +1,144 @@
+---
+title: React v0.11 RC
+author: [zpao]
+---
+
+It's that time again… we're just about ready to ship a new React release! v0.11 includes a wide array of bug fixes and features. We highlighted some of the most important changes below, along with the full changelog.
+
+The release candidate is available for download from the CDN:
+
+- **React**  
+  Dev build with warnings: https://fb.me/react-0.11.0-rc1.js  
+  Minified build for production: https://fb.me/react-0.11.0-rc1.min.js
+- **React with Add-Ons**  
+  Dev build with warnings: https://fb.me/react-with-addons-0.11.0-rc1.js  
+  Minified build for production: https://fb.me/react-with-addons-0.11.0-rc1.min.js
+- **In-Browser JSX transformer**  
+  https://fb.me/JSXTransformer-0.11.0-rc1.js
+
+We've also published version `0.11.0-rc1` of the `react` and `react-tools` packages on npm and the `react` package on bower.
+
+Please try these builds out and [file an issue on GitHub](https://github.com/facebook/react/issues/new) if you see anything awry.
+
+## `getDefaultProps` {/*getdefaultprops*/}
+
+Starting in React 0.11, `getDefaultProps()` is called only once when `React.createClass()` is called, instead of each time a component is rendered. This means that `getDefaultProps()` can no longer vary its return value based on `this.props` and any objects will be shared across all instances. This change improves performance and will make it possible in the future to do PropTypes checks earlier in the rendering process, allowing us to give better error messages.
+
+## Rendering to `null` {/*rendering-to-null*/}
+
+Since React's release, people have been using work arounds to "render nothing". Usually this means returning an empty `<div/>` or `<span/>`. Some people even got clever and started returning `<noscript/>` to avoid extraneous DOM nodes. We finally provided a "blessed" solution that allows developers to write meaningful code. Returning `null` is an explicit indication to React that you do not want anything rendered. Behind the scenes we make this work with a `<noscript>` element, though in the future we hope to not put anything in the document. In the mean time, `<noscript>` elements do not affect layout in any way, so you can feel safe using `null` today!
+
+```js
+// Before
+render: function() {
+  if (!this.state.visible) {
+    return <span/>;
+  }
+  // ...
+}
+
+// After
+render: function() {
+  if (!this.state.visible) {
+    return null;
+  }
+  // ...
+}
+```
+
+## JSX Namespacing {/*jsx-namespacing*/}
+
+Another feature request we've been hearing for a long time is the ability to have namespaces in JSX. Given that JSX is just JavaScript, we didn't want to use XML namespacing. Instead we opted for a standard JS approach: object property access. Instead of assigning variables to access components stored in an object (such as a component library), you can now use the component directly as `<Namespace.Component/>`.
+
+```js
+// Before
+var UI = require('UI');
+var UILayout = UI.Layout;
+var UIButton = UI.Button;
+var UILabel = UI.Label;
+
+render: function() {
+  return <UILayout><UIButton /><UILabel>text</UILabel></UILayout>;
+}
+
+// After
+var UI = require('UI');
+
+render: function() {
+  return <UI.Layout><UI.Button /><UI.Label>text</UI.Label></UI.Layout>;
+}
+```
+
+## Improved keyboard event normalization {/*improved-keyboard-event-normalization*/}
+
+Keyboard events now contain a normalized `e.key` value according to the [DOM Level 3 Events spec](http://www.w3.org/TR/DOM-Level-3-Events/#keys-special), allowing you to write simpler key handling code that works in all browsers, such as:
+
+```js
+handleKeyDown: function(e) {
+  if (e.key === 'Enter') {
+    // Handle enter key
+  } else if (e.key === ' ') {
+    // Handle spacebar
+  } else if (e.key === 'ArrowLeft') {
+    // Handle left arrow
+  }
+},
+```
+
+Keyboard and mouse events also now include a normalized `e.getModifierState()` that works consistently across browsers.
+
+## Changelog {/*changelog*/}
+
+### React Core {/*react-core*/}
+
+#### Breaking Changes {/*breaking-changes*/}
+
+- `getDefaultProps()` is now called once per class and shared across all instances
+
+#### New Features {/*new-features*/}
+
+- Rendering to `null`
+- Keyboard events include normalized `e.key` and `e.getModifierState()` properties
+- New normalized `onBeforeInput` event
+- `React.Children.count` has been added as a helper for counting the number of children
+
+#### Bug Fixes {/*bug-fixes*/}
+
+- Re-renders are batched in more cases
+- Events: `e.view` properly normalized
+- Added Support for more HTML attributes (`coords`, `crossOrigin`, `download`, `hrefLang`, `mediaGroup`, `muted`, `scrolling`, `shape`, `srcSet`, `start`, `useMap`)
+- Improved SVG support
+  - Changing `className` on a mounted SVG component now works correctly
+  - Added support for elements `mask` and `tspan`
+  - Added support for attributes `dx`, `dy`, `fillOpacity`, `fontFamily`, `fontSize`, `markerEnd`, `markerMid`, `markerStart`, `opacity`, `patternContentUnits`, `patternUnits`, `preserveAspectRatio`, `strokeDasharray`, `strokeOpacity`
+- CSS property names with vendor prefixes (`Webkit`, `ms`, `Moz`, `O`) are now handled properly
+- Duplicate keys no longer cause a hard error; now a warning is logged (and only one of the children with the same key is shown)
+- `img` event listeners are now unbound properly, preventing the error "Two valid but unequal nodes with the same `data-reactid`"
+- Added explicit warning when missing polyfills
+
+### React With Addons {/*react-with-addons*/}
+
+- PureRenderMixin
+- Perf: a new set of tools to help with performance analysis
+- Update: New `$apply` command to transform values
+- TransitionGroup bug fixes with null elements, Android
+
+### React NPM Module {/*react-npm-module*/}
+
+- Now includes the pre-built packages under `dist/`.
+- `envify` is properly listed as a dependency instead of a peer dependency
+
+### JSX {/*jsx*/}
+
+- Added support for namespaces, eg `<Components.Checkbox />`
+- JSXTransformer
+  - Enable the same `harmony` features available in the command line with `<script type="text/jsx;harmony=true">`
+  - Scripts are downloaded in parallel for more speed. They are still executed in order (as you would expect with normal script tags)
+  - Fixed a bug preventing sourcemaps from working in Firefox
+
+### React Tools Module {/*react-tools-module*/}
+
+- Improved readme with usage and API information
+- Improved ES6 transforms available with `--harmony` option
+- Added `--source-map-inline` option to the `jsx` executable
+- New `transformWithDetails` API which gives access to the raw sourcemap data
diff --git a/beta/src/content/blog/2014/07/17/react-v0.11.md b/beta/src/content/blog/2014/07/17/react-v0.11.md
new file mode 100644
index 000000000..ab3ac3d9f
--- /dev/null
+++ b/beta/src/content/blog/2014/07/17/react-v0.11.md
@@ -0,0 +1,163 @@
+---
+title: React v0.11
+author: [zpao]
+---
+
+**Update:** We missed a few important changes in our initial post and changelog. We've updated this post with details about [Descriptors](#descriptors) and [Prop Type Validation](#prop-type-validation).
+
+---
+
+We're really happy to announce the availability of React v0.11. There seems to be a lot of excitement already and we appreciate everybody who gave the release candidate a try over the weekend. We made a couple small changes in response to the feedback and issues filed. We enabled the destructuring assignment transform when using `jsx --harmony`, fixed a small regression with `statics`, and made sure we actually exposed the new API we said we were shipping: `React.Children.count`.
+
+This version has been cooking for a couple months now and includes a wide array of bug fixes and features. We highlighted some of the most important changes below, along with the full changelog.
+
+The release is available for download from the CDN:
+
+- **React**  
+  Dev build with warnings: https://fb.me/react-0.11.0.js  
+  Minified build for production: https://fb.me/react-0.11.0.min.js
+- **React with Add-Ons**  
+  Dev build with warnings: https://fb.me/react-with-addons-0.11.0.js  
+  Minified build for production: https://fb.me/react-with-addons-0.11.0.min.js
+- **In-Browser JSX transformer**  
+  https://fb.me/JSXTransformer-0.11.0.js
+
+We've also published version `0.11.0` of the `react` and `react-tools` packages on npm and the `react` package on bower.
+
+Please try these builds out and [file an issue on GitHub](https://github.com/facebook/react/issues/new) if you see anything awry.
+
+## `getDefaultProps` {/*getdefaultprops*/}
+
+Starting in React 0.11, `getDefaultProps()` is called only once when `React.createClass()` is called, instead of each time a component is rendered. This means that `getDefaultProps()` can no longer vary its return value based on `this.props` and any objects will be shared across all instances. This change improves performance and will make it possible in the future to do PropTypes checks earlier in the rendering process, allowing us to give better error messages.
+
+## Rendering to `null` {/*rendering-to-null*/}
+
+Since React's release, people have been using work arounds to "render nothing". Usually this means returning an empty `<div/>` or `<span/>`. Some people even got clever and started returning `<noscript/>` to avoid extraneous DOM nodes. We finally provided a "blessed" solution that allows developers to write meaningful code. Returning `null` is an explicit indication to React that you do not want anything rendered. Behind the scenes we make this work with a `<noscript>` element, though in the future we hope to not put anything in the document. In the mean time, `<noscript>` elements do not affect layout in any way, so you can feel safe using `null` today!
+
+```js
+// Before
+render: function() {
+  if (!this.state.visible) {
+    return <span/>;
+  }
+  // ...
+}
+
+// After
+render: function() {
+  if (!this.state.visible) {
+    return null;
+  }
+  // ...
+}
+```
+
+## JSX Namespacing {/*jsx-namespacing*/}
+
+Another feature request we've been hearing for a long time is the ability to have namespaces in JSX. Given that JSX is just JavaScript, we didn't want to use XML namespacing. Instead we opted for a standard JS approach: object property access. Instead of assigning variables to access components stored in an object (such as a component library), you can now use the component directly as `<Namespace.Component/>`.
+
+```js
+// Before
+var UI = require('UI');
+var UILayout = UI.Layout;
+var UIButton = UI.Button;
+var UILabel = UI.Label;
+
+render: function() {
+  return <UILayout><UIButton /><UILabel>text</UILabel></UILayout>;
+}
+
+// After
+var UI = require('UI');
+
+render: function() {
+  return <UI.Layout><UI.Button /><UI.Label>text</UI.Label></UI.Layout>;
+}
+```
+
+## Improved keyboard event normalization {/*improved-keyboard-event-normalization*/}
+
+Keyboard events now contain a normalized `e.key` value according to the [DOM Level 3 Events spec](http://www.w3.org/TR/DOM-Level-3-Events/#keys-special), allowing you to write simpler key handling code that works in all browsers, such as:
+
+```js
+handleKeyDown: function(e) {
+  if (e.key === 'Enter') {
+    // Handle enter key
+  } else if (e.key === ' ') {
+    // Handle spacebar
+  } else if (e.key === 'ArrowLeft') {
+    // Handle left arrow
+  }
+},
+```
+
+Keyboard and mouse events also now include a normalized `e.getModifierState()` that works consistently across browsers.
+
+## Descriptors {/*descriptors*/}
+
+In our [v0.10 release notes](/blog/2014/03/21/react-v0.10.html#clone-on-mount), we called out that we were deprecating the existing behavior of the component function call (eg `component = MyComponent(props, ...children)` or `component = <MyComponent prop={...}/>`). Previously that would create an instance and React would modify that internally. You could store that reference and then call functions on it (eg `component.setProps(...)`). This no longer works. `component` in the above examples will be a descriptor and not an instance that can be operated on. The v0.10 release notes provide a complete example along with a migration path. The development builds also provided warnings if you called functions on descriptors.
+
+Along with this change to descriptors, `React.isValidComponent` and `React.PropTypes.component` now actually validate that the value is a descriptor. Overwhelmingly, these functions are used to validate the value of `MyComponent()`, which as mentioned is now a descriptor, not a component instance. We opted to reduce code churn and make the migration to 0.11 as easy as possible. However, we realize this is has caused some confusion and we're working to make sure we are consistent with our terminology.
+
+## Prop Type Validation {/*prop-type-validation*/}
+
+Previously `React.PropTypes` validation worked by simply logging to the console. Internally, each validator was responsible for doing this itself. Additionally, you could write a custom validator and the expectation was that you would also simply `console.log` your error message. Very shortly into the 0.11 cycle we changed this so that our validators return (_not throw_) an `Error` object. We then log the `error.message` property in a central place in ReactCompositeComponent. Overall the result is the same, but this provides a clearer intent in validation. In addition, to better transition into our descriptor factory changes, we also currently run prop type validation twice in development builds. As a result, custom validators doing their own logging result in duplicate messages. To update, simply return an `Error` with your message instead.
+
+## Changelog {/*changelog*/}
+
+### React Core {/*react-core*/}
+
+#### Breaking Changes {/*breaking-changes*/}
+
+- `getDefaultProps()` is now called once per class and shared across all instances
+- `MyComponent()` now returns a descriptor, not an instance
+- `React.isValidComponent` and `React.PropTypes.component` validate _descriptors_, not component instances.
+- Custom `propType` validators should return an `Error` instead of logging directly
+
+#### New Features {/*new-features*/}
+
+- Rendering to `null`
+- Keyboard events include normalized `e.key` and `e.getModifierState()` properties
+- New normalized `onBeforeInput` event
+- `React.Children.count` has been added as a helper for counting the number of children
+
+#### Bug Fixes {/*bug-fixes*/}
+
+- Re-renders are batched in more cases
+- Events: `e.view` properly normalized
+- Added Support for more HTML attributes (`coords`, `crossOrigin`, `download`, `hrefLang`, `mediaGroup`, `muted`, `scrolling`, `shape`, `srcSet`, `start`, `useMap`)
+- Improved SVG support
+  - Changing `className` on a mounted SVG component now works correctly
+  - Added support for elements `mask` and `tspan`
+  - Added support for attributes `dx`, `dy`, `fillOpacity`, `fontFamily`, `fontSize`, `markerEnd`, `markerMid`, `markerStart`, `opacity`, `patternContentUnits`, `patternUnits`, `preserveAspectRatio`, `strokeDasharray`, `strokeOpacity`
+- CSS property names with vendor prefixes (`Webkit`, `ms`, `Moz`, `O`) are now handled properly
+- Duplicate keys no longer cause a hard error; now a warning is logged (and only one of the children with the same key is shown)
+- `img` event listeners are now unbound properly, preventing the error "Two valid but unequal nodes with the same `data-reactid`"
+- Added explicit warning when missing polyfills
+
+### React With Addons {/*react-with-addons*/}
+
+- PureRenderMixin: a mixin which helps optimize "pure" components
+- Perf: a new set of tools to help with performance analysis
+- Update: New `$apply` command to transform values
+- TransitionGroup bug fixes with null elements, Android
+
+### React NPM Module {/*react-npm-module*/}
+
+- Now includes the pre-built packages under `dist/`.
+- `envify` is properly listed as a dependency instead of a peer dependency
+
+### JSX {/*jsx*/}
+
+- Added support for namespaces, eg `<Components.Checkbox />`
+- JSXTransformer
+  - Enable the same `harmony` features available in the command line with `<script type="text/jsx;harmony=true">`
+  - Scripts are downloaded in parallel for more speed. They are still executed in order (as you would expect with normal script tags)
+  - Fixed a bug preventing sourcemaps from working in Firefox
+
+### React Tools Module {/*react-tools-module*/}
+
+- Improved readme with usage and API information
+- Improved ES6 transforms available with `--harmony` option
+- Added `--source-map-inline` option to the `jsx` executable
+- New `transformWithDetails` API which gives access to the raw sourcemap data
diff --git a/beta/src/content/blog/2014/07/25/react-v0.11.1.md b/beta/src/content/blog/2014/07/25/react-v0.11.1.md
new file mode 100644
index 000000000..621e0b802
--- /dev/null
+++ b/beta/src/content/blog/2014/07/25/react-v0.11.1.md
@@ -0,0 +1,45 @@
+---
+title: React v0.11.1
+author: [zpao]
+---
+
+Today we're releasing React v0.11.1 to address a few small issues. Thanks to everybody who has reported them as they've begun upgrading.
+
+The first of these is the most major and resulted in a regression with the use of `setState` inside `componentWillMount` when using React on the server. These `setState` calls are batched into the initial render. A change we made to our batching code resulted in this path hitting DOM specific code when run server-side, in turn throwing an error as `document` is not defined.
+
+There are several fixes we're including in v0.11.1 that are focused around the newly supported `event.getModifierState()` function. We made some adjustments to improve this cross-browser standardization.
+
+The final fix we're including is to better support a workaround for some IE8 behavior. The edge-case bug we're fixing was also present in v0.9 and v0.10, so while it wasn't a short-term regression, we wanted to make sure we support IE8 to the best of our abilities.
+
+We'd also like to call out a couple additional breaking changes that we failed to originally mention in the release notes for v0.11. We updated that blog post and the changelog, so we encourage you to go read about the changes around [Descriptors](/blog/2014/07/17/react-v0.11.html#descriptors) and [Prop Type Validation](/blog/2014/07/17/react-v0.11.html#prop-type-validation).
+
+The release is available for download from the CDN:
+
+- **React**  
+  Dev build with warnings: https://fb.me/react-0.11.1.js  
+  Minified build for production: https://fb.me/react-0.11.1.min.js
+- **React with Add-Ons**  
+  Dev build with warnings: https://fb.me/react-with-addons-0.11.1.js  
+  Minified build for production: https://fb.me/react-with-addons-0.11.1.min.js
+- **In-Browser JSX transformer**  
+  https://fb.me/JSXTransformer-0.11.1.js
+
+We've also published version `0.11.1` of the `react` and `react-tools` packages on npm and the `react` package on bower.
+
+Please try these builds out and [file an issue on GitHub](https://github.com/facebook/react/issues/new) if you see anything awry.
+
+## Changelog {/*changelog*/}
+
+### React Core {/*react-core*/}
+
+#### Bug Fixes {/*bug-fixes*/}
+
+- `setState` can be called inside `componentWillMount` in non-DOM environments
+- `SyntheticMouseEvent.getEventModifierState` correctly renamed to `getModifierState`
+- `getModifierState` correctly returns a `boolean`
+- `getModifierState` is now correctly case sensitive
+- Empty Text node used in IE8 `innerHTML` workaround is now removed, fixing rerendering in certain cases
+
+### JSXTransformer {/*jsxtransformer*/}
+
+- Fix duplicate variable declaration (caused issues in some browsers)
diff --git a/beta/src/content/blog/2014/07/28/community-roundup-20.md b/beta/src/content/blog/2014/07/28/community-roundup-20.md
new file mode 100644
index 000000000..395a3213e
--- /dev/null
+++ b/beta/src/content/blog/2014/07/28/community-roundup-20.md
@@ -0,0 +1,110 @@
+---
+title: 'Community Round-up #20'
+author: [LoukaN]
+---
+
+It's an exciting time for React as there are now more commits from open source contributors than from Facebook engineers! Keep up the good work :)
+
+## Atom moves to React {/*atom-moves-to-react*/}
+
+[Atom, GitHub's code editor, is now using React](http://blog.atom.io/2014/07/02/moving-atom-to-react.html) to build the editing experience. They made the move in order to improve performance. By default, React helped them eliminate unnecessary reflows, enabling them to focus on architecting the rendering pipeline in order to minimize repaints by using hardware acceleration. This is a testament to the fact that React's architecture is perfect for high performant applications.
+
+[<img src="/images/blog/gpu-cursor-move.gif" style={{width: '100%'}} />](http://blog.atom.io/2014/07/02/moving-atom-to-react.html)
+
+## Why Does React Scale? {/*why-does-react-scale*/}
+
+At the last [JSConf.us](http://2014.jsconf.us/), Vjeux talked about the design decisions made in the API that allows it to scale to a large number of developers. If you don't have 20 minutes, take a look at the [annotated slides](https://speakerdeck.com/vjeux/why-does-react-scale-jsconf-2014).
+
+<iframe width={650} height={315} src="//www.youtube-nocookie.com/embed/D-ioDiacTm8" frameBorder={0} allowFullScreen />
+
+## Live Editing {/*live-editing*/}
+
+One of the best features of React is that it provides the foundations to implement concepts that were otherwise extremely difficult, like server-side rendering, undo-redo, rendering to non-DOM environments like canvas... [Dan Abramov](https://twitter.com/dan_abramov) got hot code reloading working with webpack in order to [live edit a React project](https://gaearon.github.io/react-hot-loader/)!
+
+<iframe src="//player.vimeo.com/video/100010922" width="100%" height={315} webkitallowfullscreen mozallowfullscreen allowFullScreen />
+
+## ReactIntl Mixin by Yahoo {/*reactintl-mixin-by-yahoo*/}
+
+There are a couple of React-related projects that recently appeared on Yahoo's GitHub, the first one being an [internationalization mixin](https://github.com/yahoo/react-intl). It's great to see them getting excited about React and contributing back to the community.
+
+```javascript
+var MyComponent = React.createClass({
+  mixins: [ReactIntlMixin],
+  render: function () {
+    return (
+      <div>
+        <p>
+          {this.intlDate(1390518044403, {hour: 'numeric', minute: 'numeric'})}
+        </p>
+        <p>{this.intlNumber(400, {style: 'percent'})}</p>
+      </div>
+    );
+  },
+});
+
+React.renderComponent(
+  <MyComponent locales={['fr-FR']} />,
+  document.getElementById('example')
+);
+```
+
+## Thinking and Learning React {/*thinking-and-learning-react*/}
+
+Josephine Hall, working at Icelab, used React to write a mobile-focused application. She wrote a blog post [“Thinking and Learning React.js”](http://icelab.com.au/articles/thinking-and-learning-reactjs/) to share her experience with elements they had to use. You'll learn about routing, event dispatch, touchable components, and basic animations.
+
+## London React Meetup {/*london-react-meetup*/}
+
+If you missed the last [London React Meetup](http://www.meetup.com/London-React-User-Group/events/191406572/), the video is available, with lots of great content.
+
+- What's new in React 0.11 and how to improve performance by guaranteeing immutability
+- State handling in React with Morearty.JS
+- React on Rails - How to use React with Ruby on Rails to build isomorphic apps
+- Building an isomorphic, real-time to-do list with moped and node.js
+
+<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/CP3lvm5Ppqo" frameborder="0" allowfullscreen></iframe>
+
+In related news, the next [React SF Meetup](http://www.meetup.com/ReactJS-San-Francisco/events/195518392/) will be from Prezi: [“Immediate Mode on the Web: How We Implemented the Prezi Viewer in JavaScript”](https://medium.com/prezi-engineering/how-and-why-prezi-turned-to-javascript-56e0ca57d135). While not in React, their tech is really awesome and shares a lot of React's design principles and perf optimizations.
+
+## Using React and KendoUI Together {/*using-react-and-kendoui-together*/}
+
+One of the strengths of React is that it plays nicely with other libraries. Jim Cowart proved it by writing a tutorial that explains how to write [React component adapters for KendoUI](http://www.ifandelse.com/using-reactjs-and-kendoui-together/).
+
+<figure><a href="http://www.ifandelse.com/using-reactjs-and-kendoui-together/"><img src="/images/blog/kendoui.png" /></a></figure>
+
+## Acorn JSX {/*acorn-jsx*/}
+
+Ingvar Stepanyan extended the Acorn JavaScript parser to support JSX. The result is a [JSX parser](https://github.com/RReverser/acorn-jsx) that's 1.5–2.0x faster than the official JSX implementation. It is an experiment and is not meant to be used for serious things, but it's always a good thing to get competition on performance!
+
+## ReactScriptLoader {/*reactscriptloader*/}
+
+Yariv Sadan created [ReactScriptLoader](https://github.com/yariv/ReactScriptLoader) to make it easier to write components that require an external script.
+
+```javascript
+var Foo = React.createClass({
+  mixins: [ReactScriptLoaderMixin],
+  getScriptURL: function () {
+    return 'http://d3js.org/d3.v3.min.js';
+  },
+  getInitialState: function () {
+    return {scriptLoading: true, scriptLoadError: false};
+  },
+  onScriptLoaded: function () {
+    this.setState({scriptLoading: false});
+  },
+  onScriptError: function () {
+    this.setState({scriptLoading: false, scriptLoadError: true});
+  },
+  render: function () {
+    var message = this.state.scriptLoading
+      ? 'Loading script...'
+      : this.state.scriptLoadError
+      ? 'Loading failed'
+      : 'Loading succeeded';
+    return <span>{message}</span>;
+  },
+});
+```
+
+## Random Tweet {/*random-tweet*/}
+
+<blockquote class="twitter-tweet" data-conversation="none" lang="en"><p>“<a href="https://twitter.com/apphacker">@apphacker</a>: I take back the mean things I said about <a href="https://twitter.com/reactjs">@reactjs</a> I actually like it.” Summarizing the life of ReactJS in a single tweet.</p>&mdash; Jordan (@jordwalke) <a href="https://twitter.com/jordwalke/statuses/490747339607265280">July 20, 2014</a></blockquote>
diff --git a/beta/src/content/blog/2014/07/30/flux-actions-and-the-dispatcher.md b/beta/src/content/blog/2014/07/30/flux-actions-and-the-dispatcher.md
new file mode 100644
index 000000000..041b4003e
--- /dev/null
+++ b/beta/src/content/blog/2014/07/30/flux-actions-and-the-dispatcher.md
@@ -0,0 +1,38 @@
+---
+title: 'Flux: Actions and the Dispatcher'
+author: [fisherwebdev]
+---
+
+Flux is the application architecture Facebook uses to build JavaScript applications. It's based on a unidirectional data flow. We've built everything from small widgets to huge applications with Flux, and it's handled everything we've thrown at it. Because we've found it to be a great way to structure our code, we're excited to share it with the open source community. [Jing Chen presented Flux](http://youtu.be/nYkdrAPrdcw?t=10m20s) at the F8 conference, and since that time we've seen a lot of interest in it. We've also published an [overview of Flux](https://facebook.github.io/flux/docs/overview.html) and a [TodoMVC example](https://github.com/facebook/flux/tree/master/examples/flux-todomvc/), with an accompanying [tutorial](https://facebook.github.io/flux/docs/todo-list.html).
+
+Flux is more of a pattern than a full-blown framework, and you can start using it without a lot of new code beyond React. Up until recently, however, we haven't released one crucial piece of our Flux software: the dispatcher. But along with the creation of the new [Flux code repository](https://github.com/facebook/flux) and [Flux website](https://facebook.github.io/flux/), we've now open sourced the same [dispatcher](https://facebook.github.io/flux/docs/dispatcher.html) we use in our production applications.
+
+## Where the Dispatcher Fits in the Flux Data Flow {/*where-the-dispatcher-fits-in-the-flux-data-flow*/}
+
+The dispatcher is a singleton, and operates as the central hub of data flow in a Flux application. It is essentially a registry of callbacks, and can invoke these callbacks in order. Each _store_ registers a callback with the dispatcher. When new data comes into the dispatcher, it then uses these callbacks to propagate that data to all of the stores. The process of invoking the callbacks is initiated through the dispatch() method, which takes a data payload object as its sole argument.
+
+## Actions and ActionCreators {/*actions-and-actioncreators*/}
+
+When new data enters the system, whether through a person interacting with the application or through a web api call, that data is packaged into an _action_ — an object literal containing the new fields of data and a specific action type. We often create a library of helper methods called ActionCreators that not only create the action object, but also pass the action to the dispatcher.
+
+Different actions are identified by a type attribute. When all of the stores receive the action, they typically use this attribute to determine if and how they should respond to it. In a Flux application, both stores and views control themselves; they are not acted upon by external objects. Actions flow into the stores through the callbacks they define and register, not through setter methods.
+
+Letting the stores update themselves eliminates many entanglements typically found in MVC applications, where cascading updates between models can lead to unstable state and make accurate testing very difficult. The objects within a Flux application are highly decoupled, and adhere very strongly to the [Law of Demeter](https://en.wikipedia.org/wiki/Law_of_Demeter), the principle that each object within a system should know as little as possible about the other objects in the system. This results in software that is more maintainable, adaptable, testable, and easier for new engineering team members to understand.
+
+<img src="/images/blog/flux-diagram.png" style={{width: '100%'}} />
+
+## Why We Need a Dispatcher {/*why-we-need-a-dispatcher*/}
+
+As an application grows, dependencies across different stores are a near certainty. Store A will inevitably need Store B to update itself first, so that Store A can know how to update itself. We need the dispatcher to be able to invoke the callback for Store B, and finish that callback, before moving forward with Store A. To declaratively assert this dependency, a store needs to be able to say to the dispatcher, "I need to wait for Store B to finish processing this action." The dispatcher provides this functionality through its waitFor() method.
+
+The dispatch() method provides a simple, synchronous iteration through the callbacks, invoking each in turn. When waitFor() is encountered within one of the callbacks, execution of that callback stops and waitFor() provides us with a new iteration cycle over the dependencies. After the entire set of dependencies have been fulfilled, the original callback then continues to execute.
+
+Further, the waitFor() method may be used in different ways for different actions, within the same store's callback. In one case, Store A might need to wait for Store B. But in another case, it might need to wait for Store C. Using waitFor() within the code block that is specific to an action allows us to have fine-grained control of these dependencies.
+
+Problems arise, however, if we have circular dependencies. That is, if Store A needs to wait for Store B, and Store B needs to wait for Store A, we could wind up in an endless loop. The dispatcher now available in the Flux repo protects against this by throwing an informative error to alert the developer that this problem has occurred. The developer can then create a third store and resolve the circular dependency.
+
+## Example Chat App {/*example-chat-app*/}
+
+Along with the same dispatcher that Facebook uses in its production applications, we've also published a new example [chat app](https://github.com/facebook/flux/tree/master/examples/flux-chat), slightly more complicated than the simplistic TodoMVC, so that engineers can better understand how Flux solves problems like dependencies between stores and calls to a web API.
+
+We're hopeful that the new Flux repository will grow with time to include additional tools, boilerplate code and further examples. And we hope that Flux will prove as useful to you as it has to us. Enjoy!
diff --git a/beta/src/content/blog/2014/08/03/community-roundup-21.md b/beta/src/content/blog/2014/08/03/community-roundup-21.md
new file mode 100644
index 000000000..7b5795699
--- /dev/null
+++ b/beta/src/content/blog/2014/08/03/community-roundup-21.md
@@ -0,0 +1,107 @@
+---
+title: 'Community Round-up #21'
+author: [LoukaN]
+---
+
+## React Router {/*react-router*/}
+
+[Ryan Florence](http://ryanflorence.com/) and [Michael Jackson](https://twitter.com/mjackson) ported Ember's router to React in a project called [React Router](https://github.com/rackt/react-router). This is a very good example of both communities working together to make the web better!
+
+```javascript
+React.renderComponent(
+  <Routes>
+    <Route handler={App}>
+      <Route name="about" handler={About} />
+      <Route name="users" handler={Users}>
+        <Route name="user" path="/user/:userId" handler={User} />
+      </Route>
+    </Route>
+  </Routes>,
+  document.getElementById('example')
+);
+```
+
+## Going Big with React {/*going-big-with-react*/}
+
+Areeb Malik, from Facebook, talks about his experience using React. "On paper, all those JS frameworks look promising: clean implementations, quick code design, flawless execution. But what happens when you stress test JavaScript? What happens when you throw 6 megabytes of code at it? In this talk, we'll investigate how React performs in a high stress situation, and how it has helped our team build safe code on a massive scale"
+
+[![](/images/blog/skills-matter.png)](https://skillsmatter.com/skillscasts/5429-going-big-with-react)
+
+## What is React? {/*what-is-react*/}
+
+[Craig McKeachie](http://www.funnyant.com/author/admin/) author of [JavaScript Framework Guide](http://www.funnyant.com/javascript-framework-guide/) wrote an excellent news named ["What is React.js? Another Template Library?](http://www.funnyant.com/reactjs-what-is-it/)
+
+- Is React a template library?
+- Is React similar to Web Components?
+- Are the Virtual DOM and Shadow DOM the same?
+- Can React be used with other JavaScript MVC frameworks?
+- Who uses React?
+- Is React a premature optimization if you aren’t Facebook or Instagram?
+- Can I work with designers?
+- Will React hurt my search engine optimizations (SEO)?
+- Is React a framework for building applications or a library with one feature?
+- Are components a better way to build an application?
+- Can I build something complex with React?
+
+## Referencing Dynamic Children {/*referencing-dynamic-children*/}
+
+While Matt Zabriskie was working on [react-tabs](https://www.npmjs.com/package/react-tabs) he discovered how to use React.Children.map and React.addons.cloneWithProps in order to [reference dynamic children](http://www.mattzabriskie.com/blog/react-referencing-dynamic-children).
+
+```javascript
+var App = React.createClass({
+  render: function () {
+    var children = React.Children.map(this.props.children, function (
+      child,
+      index
+    ) {
+      return React.addons.cloneWithProps(child, {
+        ref: 'child-' + index,
+      });
+    });
+    return <div>{children}</div>;
+  },
+});
+```
+
+## JSX with Sweet.js using Readtables {/*jsx-with-sweetjs-using-readtables*/}
+
+Have you ever wondered how JSX was implemented? James Long wrote a very instructive blog post that explains how to [compile JSX with Sweet.js using Readtables](http://jlongster.com/Compiling-JSX-with-Sweet.js-using-Readtables).
+
+[![](/images/blog/sweet-jsx.png)](http://jlongster.com/Compiling-JSX-with-Sweet.js-using-Readtables)
+
+## First Look: Getting Started with React {/*first-look-getting-started-with-react*/}
+
+[Kirill Buga](http://modernweb.com/authors/kirill-buga/) wrote an article on Modern Web explaining how [React is different from traditional MVC](http://modernweb.com/2014/07/23/getting-started-reactjs/) used by most JavaScript applications
+
+<figure><a href="http://modernweb.com/2014/07/23/getting-started-reactjs"><img src="/images/blog/first-look.png" /></a></figure>
+
+## React Draggable {/*react-draggable*/}
+
+[Matt Zabriskie](https://github.com/mzabriskie) released a [project](https://github.com/mzabriskie/react-draggable) to make your react components draggable.
+
+[![](/images/blog/react-draggable.png)](https://mzabriskie.github.io/react-draggable/example/)
+
+## HTML Parser2 React {/*html-parser2-react*/}
+
+[Jason Brown](https://browniefed.github.io/) adapted htmlparser2 to React: [htmlparser2-react](https://www.npmjs.com/package/htmlparser2-react). That allows you to convert raw HTML to the virtual DOM.
+This is not the intended way to use React but can be useful as last resort if you have an existing piece of HTML.
+
+```javascript
+var html =
+  '<div data-id="1" class="hey this is a class" ' +
+  'style="width:100%;height: 100%;"><article id="this-article">' +
+  '<p>hey this is a paragraph</p><div><ul><li>1</li><li>2</li>' +
+  '<li>3</li></ul></div></article></div>';
+var parsedComponent = reactParser(html, React);
+```
+
+## Building UIs with React {/*building-uis-with-react*/}
+
+If you haven't yet tried out React, Jacob Rios did a Hangout where he covers the most important aspects and thankfully he recorded it!
+
+<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/lAn7GVoGlKU" frameborder="0" allowfullscreen></iframe>
+
+## Random Tweets {/*random-tweets*/}
+
+<blockquote class="twitter-tweet" lang="en"><p>We shipped reddit&#39;s first production <a href="https://twitter.com/reactjs">@reactjs</a> code last week, our checkout process.&#10;&#10;<a href="https://t.co/KUInwsCmAF">https://t.co/KUInwsCmAF</a></p>&mdash; Brian Holt (@holtbt) <a href="https://twitter.com/holtbt/statuses/493852312604254208">July 28, 2014</a></blockquote>
+<blockquote class="twitter-tweet" lang="en"><p>.<a href="https://twitter.com/AirbnbNerds">@AirbnbNerds</a> just launched our first user-facing React.js feature to production! We love it so far. <a href="https://t.co/KtyudemcIW">https://t.co/KtyudemcIW</a> /<a href="https://twitter.com/floydophone">@floydophone</a></p>&mdash; spikebrehm (@spikebrehm) <a href="https://twitter.com/spikebrehm/statuses/491645223643013121">July 22, 2014</a></blockquote>
diff --git a/beta/src/content/blog/2014/09/03/introducing-the-jsx-specification.md b/beta/src/content/blog/2014/09/03/introducing-the-jsx-specification.md
new file mode 100644
index 000000000..54bf3258e
--- /dev/null
+++ b/beta/src/content/blog/2014/09/03/introducing-the-jsx-specification.md
@@ -0,0 +1,14 @@
+---
+title: 'Introducing the JSX Specification'
+author: [sebmarkbage]
+---
+
+At Facebook we've been using JSX for a long time. We originally introduced it to the world last year alongside React, but we actually used it in another form before that to create native DOM nodes. We've also seen some similar efforts grow out of our work in order to be used with other libraries and in interesting ways. At this point React JSX is just one of many implementations.
+
+In order to make it easier to implement new versions and to make sure that the syntax remains compatible, we're now formalizing the syntax of JSX in a stand-alone spec without any semantic meaning. It's completely stand-alone from React itself.
+
+Read the spec now at https://facebook.github.io/jsx/.
+
+This is not a proposal to be standardized in ECMAScript. It's just a reference document that transpiler writers and syntax highlighters can agree on. It's currently in a draft stage and will probably continue to be a living document.
+
+Feel free to [open an Issue](https://github.com/facebook/jsx/issues/new) or Pull Request if you find something wrong.
diff --git a/beta/src/content/blog/2014/09/12/community-round-up-22.md b/beta/src/content/blog/2014/09/12/community-round-up-22.md
new file mode 100644
index 000000000..ed1698e76
--- /dev/null
+++ b/beta/src/content/blog/2014/09/12/community-round-up-22.md
@@ -0,0 +1,104 @@
+---
+title: 'Community Round-up #22'
+author: [LoukaN]
+---
+
+This has been an exciting summer as four big companies: Yahoo, Mozilla, Airbnb and Reddit announced that they were using React!
+
+<table><tr><td>
+<blockquote width="300" class="twitter-tweet" data-cards="hidden" lang="en"><p>Our friends at <a href="https://twitter.com/Yahoo">@yahoo</a> talk about migrating Yahoo! Mail from YUI to ReactJS at the next <a href="https://twitter.com/hashtag/ReactJS?src=hash">#ReactJS</a> meetup! <a href="http://t.co/Cu2AaE0sVE">http://t.co/Cu2AaE0sVE</a></p>&mdash; Facebook Open Source (@fbOpenSource) <a href="https://twitter.com/fbOpenSource/status/510258065900572672">September 12, 2014</a></blockquote>
+</td><td valign="top">
+<blockquote width="300" class="twitter-tweet" lang="en"><p>I guess <a href="https://twitter.com/reactjs">@reactjs</a> is getting into Firefox :-) Thanks <a href="https://twitter.com/n1k0">@n1k0</a> ! <a href="https://t.co/kipfUS0hu4">https://t.co/kipfUS0hu4</a></p>&mdash; David Bruant (@DavidBruant) <a href="https://twitter.com/DavidBruant/status/484956929933213696">July 4, 2014</a></blockquote>
+</td></tr><tr><td>
+<blockquote width="300" class="twitter-tweet" lang="en"><p>.<a href="https://twitter.com/AirbnbNerds">@AirbnbNerds</a> just launched our first user-facing React.js feature to production! We love it so far. <a href="https://t.co/KtyudemcIW">https://t.co/KtyudemcIW</a> /<a href="https://twitter.com/floydophone">@floydophone</a></p>&mdash; spikebrehm (@spikebrehm) <a href="https://twitter.com/spikebrehm/statuses/491645223643013121">July 22, 2014</a></blockquote>
+</td><td>
+<blockquote width="300" class="twitter-tweet" lang="en"><p>We shipped reddit&#39;s first production <a href="https://twitter.com/reactjs">@reactjs</a> code last week, our checkout process.&#10;&#10;<a href="https://t.co/KUInwsCmAF">https://t.co/KUInwsCmAF</a></p>&mdash; Brian Holt (@holtbt) <a href="https://twitter.com/holtbt/statuses/493852312604254208">July 28, 2014</a></blockquote>
+</td></tr></table>
+
+## React's Architecture {/*reacts-architecture*/}
+
+[Vjeux](http://blog.vjeux.com/), from the React team, gave a talk at OSCON on the history of React and the various optimizations strategies that are implemented. You can also check out the [annotated slides](https://speakerdeck.com/vjeux/oscon-react-architecture) or [Chris Dawson](http://thenewstack.io/author/chrisdawson/)'s notes titled [JavaScript’s History and How it Led To React](http://thenewstack.io/javascripts-history-and-how-it-led-to-reactjs/).
+
+<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/eCf5CquV_Bw" frameborder="0" allowfullscreen></iframe>
+
+## v8 optimizations {/*v8-optimizations*/}
+
+Jakob Kummerow landed [two optimizations to V8](http://www.chromium.org/developers/speed-hall-of-fame#TOC-2014-06-18) specifically targeted at optimizing React. That's really exciting to see browser vendors helping out on performance!
+
+## Reusable Components by Khan Academy {/*reusable-components-by-khan-academy*/}
+
+[Khan Academy](https://www.khanacademy.org/) released [many high quality standalone components](https://khan.github.io/react-components/) they are using. This is a good opportunity to see what React code used in production look like.
+
+```javascript
+var TeX = require('react-components/js/tex.jsx');
+React.renderComponent(<TeX>\nabla \cdot E = 4 \pi \rho</TeX>, domNode);
+
+var translated = (
+  <$_ first="Motoko" last="Kusanagi">
+    Hello, %(first)s %(last)s!
+  </$_>
+);
+```
+
+## React + Browserify + Gulp {/*react--browserify--gulp*/}
+
+[Trường](http://truongtx.me/) wrote a little guide to help your [getting started using React, Browserify and Gulp](http://truongtx.me/2014/07/18/using-reactjs-with-browserify-and-gulp/).
+
+<figure><a href="http://truongtx.me/2014/07/18/using-reactjs-with-browserify-and-gulp/"><img src="/images/blog/react-browserify-gulp.jpg" /></a></figure>
+
+## React Style {/*react-style*/}
+
+After React put HTML inside of JavaScript, Sander Spies takes the same approach with CSS: [IntegratedCSS](https://github.com/SanderSpies/react-style). It seems weird at first but this is the direction where React is heading.
+
+```javascript
+var Button = React.createClass({
+  normalStyle: ReactStyle(function () {
+    return {backgroundColor: vars.orange};
+  }),
+  activeStyle: ReactStyle(function () {
+    if (this.state.active) {
+      return {color: 'yellow', padding: '10px'};
+    }
+  }),
+  render: function () {
+    return (
+      <div styles={[this.normalStyle(), this.activeStyle()]}>
+        Hello, I'm styled
+      </div>
+    );
+  },
+});
+```
+
+## Virtual DOM in Elm {/*virtual-dom-in-elm*/}
+
+[Evan Czaplicki](http://evan.czaplicki.us) explains how Elm implements the idea of a Virtual DOM and a diffing algorithm. This is great to see React ideas spread to other languages.
+
+> Performance is a good hook, but the real benefit is that this approach leads to code that is easier to understand and maintain. In short, it becomes very simple to create reusable HTML widgets and abstract out common patterns. This is why people with larger code bases should be interested in virtual DOM approaches.
+>
+> [Read the full article](http://elm-lang.org/blog/Blazing-Fast-Html.elm)
+
+## Components Tutorial {/*components-tutorial*/}
+
+If you are getting started with React, [Joe Maddalone](http://www.joemaddalone.com/) made a good tutorial on how to build your first component.
+
+<iframe width="650" height="200" src="//www.youtube-nocookie.com/embed/rFvZydtmsxM" frameborder="0" allowfullscreen></iframe>
+
+## Saving time & staying sane? {/*saving-time--staying-sane*/}
+
+When [Kent William Innholt](http://http://kentwilliam.com/) who works at [M>Path](http://mpath.com/) summed up his experience using React in an [article](http://kentwilliam.com/articles/saving-time-staying-sane-pros-cons-of-react-js).
+
+> We're building an ambitious new web app, where the UI complexity represents most of the app's complexity overall. It includes a tremendous amount of UI widgets as well as a lot rules on what-to-show-when. This is exactly the sort of situation React.js was built to simplify.
+>
+> - **Big win**: Tighter coupling of markup and behavior
+> - **Jury's still out**: CSS lives outside React.js
+> - **Big win**: Cascading updates and functional thinking
+> - **Jury's still out**: Verbose propagation
+>
+> [Read the article...](http://kentwilliam.com/articles/saving-time-staying-sane-pros-cons-of-react-js)
+
+## Weather {/*weather*/}
+
+To finish this round-up, Andrew Gleave made a page that displays the [Weather](https://github.com/andrewgleave/react-weather). It's great to see that React is also used for small prototypes.
+
+<figure><a href="https://github.com/andrewgleave/react-weather"><img src="/images/blog/weather.png" /></a></figure>
diff --git a/beta/src/content/blog/2014/09/16/react-v0.11.2.md b/beta/src/content/blog/2014/09/16/react-v0.11.2.md
new file mode 100644
index 000000000..23f77d461
--- /dev/null
+++ b/beta/src/content/blog/2014/09/16/react-v0.11.2.md
@@ -0,0 +1,46 @@
+---
+title: React v0.11.2
+author: [zpao]
+---
+
+Today we're releasing React v0.11.2 to add a few small features.
+
+We're adding support for two more DOM elements, `<dialog>` and `<picture>`, as well as the associated attributes needed to use these elements: `open`, `media`, and `sizes`. While not all browsers support these natively, some of our cutting edge users want to make use of them, so we're making them available to everybody.
+
+We're also doing some work to prepare for v0.12 and improve compatibility between the versions. To do this we are replacing `React.createDescriptor` with `React.createElement`. `createDescriptor` will continue to work with a warning and will be gone in v0.12. Chances are that this won't affect anybody.
+
+And lastly, on the heels of announcing Flow at [@Scale](http://atscaleconference.com/) yesterday, we're adding the ability to strip TypeScript-like type annotations as part of the `jsx` transform. To use, simply use the `--strip-types` flag on the command line, or set `stripTypes` in the `options` object when calling the API. We'll be talking about Flow more in the coming months. But for now, it's helpful to know that it is a flow-sensitive JavaScript type checker we will be open sourcing soon.
+
+The release is available for download from the CDN:
+
+- **React**  
+  Dev build with warnings: https://fb.me/react-0.11.2.js  
+  Minified build for production: https://fb.me/react-0.11.2.min.js
+- **React with Add-Ons**  
+  Dev build with warnings: https://fb.me/react-with-addons-0.11.2.js  
+  Minified build for production: https://fb.me/react-with-addons-0.11.2.min.js
+- **In-Browser JSX transformer**  
+  https://fb.me/JSXTransformer-0.11.2.js
+
+We've also published version `0.11.2` of the `react` and `react-tools` packages on npm and the `react` package on bower.
+
+Please try these builds out and [file an issue on GitHub](https://github.com/facebook/react/issues/new) if you see anything awry.
+
+### React Core {/*react-core*/}
+
+#### New Features {/*new-features*/}
+
+- Added support for `<dialog>` element and associated `open` attribute
+- Added support for `<picture>` element and associated `media` and `sizes` attributes
+- Added `React.createElement` API in preparation for React v0.12
+  - `React.createDescriptor` has been deprecated as a result
+
+### JSX {/*jsx*/}
+
+- `<picture>` is now parsed into `React.DOM.picture`
+
+### React Tools {/*react-tools*/}
+
+- Update `esprima` and `jstransform` for correctness fixes
+- The `jsx` executable now exposes a `--strip-types` flag which can be used to remove TypeScript-like type annotations
+  - This option is also exposed to `require('react-tools').transform` as `stripTypes`
diff --git a/beta/src/content/blog/2014/09/24/testing-flux-applications.md b/beta/src/content/blog/2014/09/24/testing-flux-applications.md
new file mode 100644
index 000000000..2b947577f
--- /dev/null
+++ b/beta/src/content/blog/2014/09/24/testing-flux-applications.md
@@ -0,0 +1,312 @@
+---
+title: 'Testing Flux Applications'
+author: [fisherwebdev]
+---
+
+**A more up-to-date version of this post is available as part of the [Flux documentation](https://facebook.github.io/flux/docs/testing-flux-applications.html).**
+
+[Flux](https://facebook.github.io/flux/) is the application architecture that Facebook uses to build web applications with [React](/). It's based on a unidirectional data flow. In previous blog posts and documentation articles, we've shown the [basic structure and data flow](https://facebook.github.io/flux/docs/overview.html), more closely examined the [dispatcher and action creators](/blog/2014/07/30/flux-actions-and-the-dispatcher.html), and shown how to put it all together with a [tutorial](https://facebook.github.io/flux/docs/todo-list.html). Now let's look at how to do formal unit testing of Flux applications with [Jest](https://facebook.github.io/jest/), Facebook's auto-mocking testing framework.
+
+## Testing with Jest {/*testing-with-jest*/}
+
+For a unit test to operate on a truly isolated _unit_ of the application, we need to mock every module except the one we are testing. Jest makes the mocking of other parts of a Flux application trivial. To illustrate testing with Jest, we'll return to our [example TodoMVC application](https://github.com/facebook/flux/tree/master/examples/flux-todomvc).
+
+The first steps toward working with Jest are as follows:
+
+1. Get the module dependencies for the application installed by running `npm install`.
+2. Create a directory `__tests__/` with a test file, in this case TodoStore-test.js
+3. Run `npm install jest-cli --save-dev`
+4. Add the following to your package.json
+
+```javascript
+{
+  ...
+  "scripts": {
+    "test": "jest"
+  }
+  ...
+}
+```
+
+Now you're ready to run your tests from the command line with `npm test`.
+
+By default, all modules are mocked, so the only boilerplate we need in TodoStore-test.js is a declarative call to Jest's `dontMock()` method.
+
+```javascript
+jest.dontMock('TodoStore');
+```
+
+This tells Jest to let TodoStore be a real object with real, live methods. Jest will mock all other objects involved with the test.
+
+## Testing Stores {/*testing-stores*/}
+
+At Facebook, Flux stores often receive a great deal of formal unit test coverage, as this is where the application state and logic lives. Stores are arguably the most important place in a Flux application to provide coverage, but at first glance, it's not entirely obvious how to test them.
+
+By design, stores can't be modified from the outside. They have no setters. The only way new data can enter a store is through the callback it registers with the dispatcher.
+
+We therefore need to simulate the Flux data flow with this _one weird trick_.
+
+```javascript
+var mockRegister = MyDispatcher.register;
+var mockRegisterInfo = mockRegister.mock;
+var callsToRegister = mockRegisterInfo.calls;
+var firstCall = callsToRegister[0];
+var firstArgument = firstCall[0];
+var callback = firstArgument;
+```
+
+We now have the store's registered callback, the sole mechanism by which data can enter the store.
+
+For folks new to Jest, or mocks in general, it might not be entirely obvious what is happening in that code block, so let's look at each part of it a bit more closely. We start out by looking at the `register()` method of our application's dispatcher — the method that the store uses to register its callback with the dispatcher. The dispatcher has been thoroughly mocked automatically by Jest, so we can get a reference to the mocked version of the `register()` method just as we would normally refer to that method in our production code. But we can get additional information about that method with the `mock` _property_ of that method. We don't often think of methods having properties, but in Jest, this idea is vital. Every method of a mocked object has this property, and it allows us to examine how the method is being called during the test. A chronologically ordered list of calls to `register()` is available with the `calls` property of `mock`, and each of these calls has a list of the arguments that were used in each method call.
+
+So in this code, we are really saying, "Give me a reference to the first argument of the first call to MyDispatcher's `register()` method." That first argument is the store's callback, so now we have all we need to start testing. But first, we can save ourselves some semicolons and roll all of this into a single line:
+
+```javascript
+callback = MyDispatcher.register.mock.calls[0][0];
+```
+
+We can invoke that callback whenever we like, independent of our application's dispatcher or action creators. We will, in fact, fake the behavior of the dispatcher and action creators by invoking the callback with an action that we'll create directly in our test.
+
+```javascript
+var payload = {
+  source: 'VIEW_ACTION',
+  action: {
+    actionType: TodoConstants.TODO_CREATE,
+    text: 'foo',
+  },
+};
+callback(payload);
+var all = TodoStore.getAll();
+var keys = Object.keys(all);
+expect(all[keys[0]].text).toEqual('foo');
+```
+
+## Putting it All Together {/*putting-it-all-together*/}
+
+The example Flux TodoMVC application has been updated with an example test for the TodoStore, but let's look at an abbreviated version of the entire test. The most important things to notice in this test are how we keep a reference to the store's registered callback in the closure of the test, and how we recreate the store before every test so that we clear the state of the store entirely.
+
+```javascript
+jest.dontMock('../TodoStore');
+jest.dontMock('react/lib/merge');
+
+describe('TodoStore', function () {
+  var TodoConstants = require('../../constants/TodoConstants');
+
+  // mock actions inside dispatch payloads
+  var actionTodoCreate = {
+    source: 'VIEW_ACTION',
+    action: {
+      actionType: TodoConstants.TODO_CREATE,
+      text: 'foo',
+    },
+  };
+  var actionTodoDestroy = {
+    source: 'VIEW_ACTION',
+    action: {
+      actionType: TodoConstants.TODO_DESTROY,
+      id: 'replace me in test',
+    },
+  };
+
+  var AppDispatcher;
+  var TodoStore;
+  var callback;
+
+  beforeEach(function () {
+    AppDispatcher = require('../../dispatcher/AppDispatcher');
+    TodoStore = require('../TodoStore');
+    callback = AppDispatcher.register.mock.calls[0][0];
+  });
+
+  it('registers a callback with the dispatcher', function () {
+    expect(AppDispatcher.register.mock.calls.length).toBe(1);
+  });
+
+  it('initializes with no to-do items', function () {
+    var all = TodoStore.getAll();
+    expect(all).toEqual({});
+  });
+
+  it('creates a to-do item', function () {
+    callback(actionTodoCreate);
+    var all = TodoStore.getAll();
+    var keys = Object.keys(all);
+    expect(keys.length).toBe(1);
+    expect(all[keys[0]].text).toEqual('foo');
+  });
+
+  it('destroys a to-do item', function () {
+    callback(actionTodoCreate);
+    var all = TodoStore.getAll();
+    var keys = Object.keys(all);
+    expect(keys.length).toBe(1);
+    actionTodoDestroy.action.id = keys[0];
+    callback(actionTodoDestroy);
+    expect(all[keys[0]]).toBeUndefined();
+  });
+});
+```
+
+You can take a look at all this code in the [TodoStore's tests on GitHub](https://github.com/facebook/flux/tree/master/examples/flux-todomvc/js/stores/__tests__/TodoStore-test.js) as well.
+
+## Mocking Data Derived from Other Stores {/*mocking-data-derived-from-other-stores*/}
+
+Sometimes our stores rely on data from other stores. Because all of our modules are mocked, we'll need to simulate the data that comes from the other store. We can do this by retrieving the mock function and adding a custom return value to it.
+
+```javascript
+var MyOtherStore = require('../MyOtherStore');
+MyOtherStore.getState.mockReturnValue({
+  '123': {
+    id: '123',
+    text: 'foo',
+  },
+  '456': {
+    id: '456',
+    text: 'bar',
+  },
+});
+```
+
+Now we have a collection of objects that will come back from MyOtherStore whenever we call MyOtherStore.getState() in our tests. Any application state can be simulated with a combination of these custom return values and the previously shown technique of working with the store's registered callback.
+
+A brief example of this technique is up on GitHub within the Flux Chat example's [UnreadThreadStore-test.js](https://github.com/facebook/flux/tree/master/examples/flux-chat/js/stores/__tests__/UnreadThreadStore-test.js).
+
+For more information about the `mock` property of mocked methods or Jest's ability to provide custom mock values, see Jest's documentation on [mock functions](https://facebook.github.io/jest/docs/mock-functions.html).
+
+## Moving Logic from React to Stores {/*moving-logic-from-react-to-stores*/}
+
+What often starts as a little piece of seemingly benign logic in our React components often presents a problem while creating unit tests. We want to be able to write tests that read like a specification for our application's behavior, and when application logic slips into our view layer, this becomes more difficult.
+
+For example, when a user has marked each of their to-do items as complete, the TodoMVC specification dictates that we should also change the status of the "Mark all as complete" checkbox automatically. To create that logic, we might be tempted to write code like this in our MainSection's `render()` method:
+
+```javascript
+var allTodos = this.props.allTodos;
+var allChecked = true;
+for (var id in allTodos) {
+  if (!allTodos[id].complete) {
+    allChecked = false;
+    break;
+  }
+}
+...
+
+return (
+  <section id="main">
+  <input
+    id="toggle-all"
+    type="checkbox"
+    checked={allChecked ? 'checked' : ''}
+  />
+  ...
+  </section>
+);
+```
+
+While this seems like an easy, normal thing to do, this is an example of application logic slipping into the views, and it can't be described in our spec-style TodoStore test. Let's take that logic and move it to the store. First, we'll create a public method on the store that will encapsulate that logic:
+
+```javascript
+areAllComplete: function() {
+  for (var id in _todos) {
+    if (!_todos[id].complete) {
+      return false;
+    }
+  }
+  return true;
+},
+```
+
+Now we have the application logic where it belongs, and we can write the following test:
+
+```javascript
+it('determines whether all to-do items are complete', function () {
+  var i = 0;
+  for (; i < 3; i++) {
+    callback(mockTodoCreate);
+  }
+  expect(TodoStore.areAllComplete()).toBe(false);
+
+  var all = TodoStore.getAll();
+  for (key in all) {
+    callback({
+      source: 'VIEW_ACTION',
+      action: {
+        actionType: TodoConstants.TODO_COMPLETE,
+        id: key,
+      },
+    });
+  }
+  expect(TodoStore.areAllComplete()).toBe(true);
+
+  callback({
+    source: 'VIEW_ACTION',
+    action: {
+      actionType: TodoConstants.TODO_UNDO_COMPLETE,
+      id: key,
+    },
+  });
+  expect(TodoStore.areAllComplete()).toBe(false);
+});
+```
+
+Finally, we revise our view layer. We'll call for that data in the controller-view, TodoApp.js, and pass it down to the MainSection component.
+
+```javascript
+function getTodoState() {
+  return {
+    allTodos: TodoStore.getAll(),
+    areAllComplete: TodoStore.areAllComplete()
+  };
+}
+
+var TodoApp = React.createClass({
+...
+
+  /**
+   * @return {object}
+   */
+  render: function() {
+    return (
+      ...
+      <MainSection
+        allTodos={this.state.allTodos}
+        areAllComplete={this.state.areAllComplete}
+      />
+      ...
+    );
+  },
+
+  /**
+   * Event handler for 'change' events coming from the TodoStore
+   */
+  _onChange: function() {
+    this.setState(getTodoState());
+  }
+
+});
+```
+
+And then we'll utilize that property for the rendering of the checkbox.
+
+```javascript
+render: function() {
+  ...
+
+  return (
+    <section id="main">
+    <input
+      id="toggle-all"
+      type="checkbox"
+      checked={this.props.areAllComplete ? 'checked' : ''}
+    />
+    ...
+    </section>
+  );
+},
+```
+
+To learn how to test React components themselves, check out the [Jest tutorial for React](https://facebook.github.io/jest/docs/tutorial-react.html) and the [ReactTestUtils documentation](/docs/test-utils.html).
+
+## Further Reading {/*further-reading*/}
+
+- [Mocks Aren't Stubs](http://martinfowler.com/articles/mocksArentStubs.html) by Martin Fowler
+- [Jest API Reference](https://facebook.github.io/jest/docs/api.html)
diff --git a/beta/src/content/blog/2014/10/14/introducing-react-elements.md b/beta/src/content/blog/2014/10/14/introducing-react-elements.md
new file mode 100644
index 000000000..b7211be0a
--- /dev/null
+++ b/beta/src/content/blog/2014/10/14/introducing-react-elements.md
@@ -0,0 +1,217 @@
+---
+title: 'Introducing React Elements'
+author: [sebmarkbage]
+redirect_from:
+  - 'blog/2014/10/14/introducting-react-elements.html'
+---
+
+The upcoming React 0.12 tweaks some APIs to get us close to the final 1.0 API. This release is all about setting us up for making the `ReactElement` type really FAST, [jest unit testing](https://facebook.github.io/jest/) easier, making classes simpler (in preparation for ES6 classes) and better integration with third-party languages!
+
+If you currently use JSX everywhere, you don't really have to do anything to get these benefits! The updated transformer will do it for you.
+
+If you can't or don't want to use JSX, then please insert some hints for us. Add a `React.createFactory` call around your imported class when you require it:
+
+```javascript
+var MyComponent = React.createFactory(require('MyComponent'));
+```
+
+Everything is backwards compatible for now, and as always React will provide you with descriptive console messaging to help you upgrade.
+
+`ReactElement` is the primary API of React. Making it faster has shown to give us several times faster renders on common benchmarks. The API tweaks in this release helps us get there.
+
+Continue reading if you want all the nitty gritty details...
+
+## New Terminology {/*new-terminology*/}
+
+We wanted to make it easier for new users to see the parallel with the DOM (and why React is different). To align our terminology we now use the term `ReactElement` instead of _descriptor_. Likewise, we use the term `ReactNode` instead of _renderable_.
+
+[See the full React terminology guide.](https://gist.github.com/sebmarkbage/fcb1b6ab493b0c77d589)
+
+## Creating a ReactElement {/*creating-a-reactelement*/}
+
+We now expose an external API for programmatically creating a `ReactElement` object.
+
+```javascript
+var reactElement = React.createElement(type, props, children);
+```
+
+The `type` argument is either a string (HTML tag) or a class. It's a description of what tag/class is going to be rendered and what props it will contain. You can also create factory functions for specific types. This basically just provides the type argument for you:
+
+```javascript
+var div = React.createFactory('div');
+var reactDivElement = div(props, children);
+```
+
+## Deprecated: Auto-generated Factories {/*deprecated-auto-generated-factories*/}
+
+Imagine if `React.createClass` was just a plain JavaScript class. If you call a class as a plain function you would call the component's constructor to create a Component instance, not a `ReactElement`:
+
+```javascript
+new MyComponent(); // Component, not ReactElement
+```
+
+React 0.11 gave you a factory function for free when you called `React.createClass`. This wrapped your internal class and then returned a `ReactElement` factory function for you.
+
+```javascript
+var MyComponent = React.createFactory(
+  class {
+    render() {
+      ...
+    }
+  }
+);
+```
+
+In future versions of React, we want to be able to support pure classes without any special React dependencies. To prepare for that we're [deprecating the auto-generated factory](https://gist.github.com/sebmarkbage/d7bce729f38730399d28).
+
+This is the biggest change to 0.12. Don't worry though. This functionality continues to work the same for this release, it just warns you if you're using a deprecated API. That way you can upgrade piece-by-piece instead of everything at once.
+
+## Upgrading to 0.12 {/*upgrading-to-012*/}
+
+### React With JSX {/*react-with-jsx*/}
+
+If you use the React specific [JSX](https://facebook.github.io/jsx/) transform, the upgrade path is simple. Just make sure you have React in scope.
+
+```javascript
+// If you use node/browserify modules make sure
+// that you require React into scope.
+var React = require('react');
+```
+
+React's JSX will create the `ReactElement` for you. You can continue to use JSX with regular classes:
+
+```javascript
+var MyComponent = React.createClass(...);
+
+var MyOtherComponent = React.createClass({
+  render: function() {
+    return <MyComponent prop="value" />;
+  }
+});
+```
+
+_NOTE: React's JSX will not call arbitrary functions in future releases. This restriction is introduced so that it's easier to reason about the output of JSX by both the reader of your code and optimizing compilers. The JSX syntax is not tied to React. Just the transpiler. You can still use [the JSX spec](https://facebook.github.io/jsx/) with a different transpiler for custom purposes._
+
+### React Without JSX {/*react-without-jsx*/}
+
+If you don't use JSX and just call components as functions, you will need to explicitly create a factory before calling it:
+
+```javascript
+var MyComponentClass = React.createClass(...);
+
+var MyComponent = React.createFactory(MyComponentClass); // New step
+
+var MyOtherComponent = React.createClass({
+  render: function() {
+    return MyComponent({ prop: 'value' });
+  }
+});
+```
+
+If you're using a module system, the recommended solution is to export the class and create the factory on the requiring side.
+
+Your class creation is done just like before:
+
+```javascript
+// MyComponent.js
+var React = require('react');
+var MyComponent = React.createClass(...);
+module.exports = MyComponent;
+```
+
+The other side uses `React.createFactory` after `require`ing the component class:
+
+```javascript
+// MyOtherComponent.js
+var React = require('react');
+// All you have to do to upgrade is wrap your requires like this:
+var MyComponent = React.createFactory(require('MyComponent'));
+
+var MyOtherComponent = React.createClass({
+  render: function () {
+    return MyComponent({prop: 'value'});
+  },
+});
+
+module.exports = MyOtherComponent;
+```
+
+You ONLY have to do this for custom classes. React still has built-in factories for common HTML elements.
+
+```javascript
+var MyDOMComponent = React.createClass({
+  render: function () {
+    return React.DOM.div({className: 'foo'}); // still ok
+  },
+});
+```
+
+We realize that this is noisy. At least it's on the top of the file (out of sight, out of mind). This a tradeoff we had to make to get [the other benefits](https://gist.github.com/sebmarkbage/d7bce729f38730399d28) that this model unlocks.
+
+### Anti-Pattern: Exporting Factories {/*anti-pattern-exporting-factories*/}
+
+If you have an isolated project that only you use, then you could create a helper that creates both the class and the factory at once:
+
+```javascript
+// Anti-pattern - Please, don't use
+function createClass(spec) {
+  return React.createFactory(React.createClass(spec));
+}
+```
+
+This makes your components incompatible with jest testing, consumers using JSX, third-party languages that implement their own optimized `ReactElement` creation, etc.
+
+It also encourages you to put more logic into these helper functions. Something that another language, a compiler or a reader of your code couldn't reason about.
+
+To fit into the React ecosystem we recommend that you always export pure classes from your shared modules and let the consumer decide the best strategy for generating `ReactElement`s.
+
+## Third-party Languages {/*third-party-languages*/}
+
+The signature of a `ReactElement` is something like this:
+
+```javascript
+{
+  type : string | class,
+  props : { children, className, etc. },
+  key : string | boolean | number | null,
+  ref : string | null
+}
+```
+
+Languages with static typing that don't need validation (e.g. [Om in ClojureScript](https://github.com/swannodette/om)), and production level compilers will be able to generate these objects inline instead of going through the validation step. This optimization will allow significant performance improvements in React.
+
+## Your Thoughts and Ideas {/*your-thoughts-and-ideas*/}
+
+We'd love to hear your feedback on this API and your preferred style. A plausible alternative could be to directly inline objects instead of creating factory functions:
+
+```javascript
+// MyOtherComponent.js
+var React = require('react');
+var MyComponent = require('MyComponent');
+
+var MyOtherComponent = React.createClass({
+  render: function () {
+    return {type: MyComponent, props: {prop: 'value'}};
+  },
+});
+
+module.exports = MyOtherComponent;
+```
+
+This moves the noise down into the render method though. It also doesn't provide a hook for dynamic validation/type checking so you'll need some other way to verify that it's safe.
+
+_NOTE: This won't work in this version of React because it's conflicting with other legacy APIs that we're deprecating. (We temporarily add a `element._isReactElement = true` marker on the object.)_
+
+## The Next Step: ES6 Classes {/*the-next-step-es6-classes*/}
+
+After 0.12 we'll begin work on moving to ES6 classes. We will still support `React.createClass` as a backwards compatible API. If you use an ES6 transpiler you will be able to declare your components like this:
+
+```javascript
+export class MyComponent {
+  render() {
+    ...
+  }
+};
+```
+
+This upcoming release is a stepping stone to make it as easy as this. Thanks for your support.
diff --git a/beta/src/content/blog/2014/10/16/react-v0.12-rc1.md b/beta/src/content/blog/2014/10/16/react-v0.12-rc1.md
new file mode 100644
index 000000000..183b876ac
--- /dev/null
+++ b/beta/src/content/blog/2014/10/16/react-v0.12-rc1.md
@@ -0,0 +1,137 @@
+---
+title: 'React v0.12 RC'
+author: [sebmarkbage]
+---
+
+We are finally ready to share the work we've been doing over the past couple months. A lot has gone into this and we want to make sure we iron out any potential issues before we make this final. So, we're shipping a Release Candidate for React v0.12 today. If you get a chance, please give it a try and report any issues you find! A full changelog will accompany the final release but we've highlighted the interesting and breaking changes below.
+
+The release candidate is available for download:
+
+- **React**  
+  Dev build with warnings: https://fb.me/react-0.12.0-rc1.js  
+  Minified build for production: https://fb.me/react-0.12.0-rc1.min.js
+- **React with Add-Ons**  
+  Dev build with warnings: https://fb.me/react-with-addons-0.12.0-rc1.js  
+  Minified build for production: https://fb.me/react-with-addons-0.12.0-rc1.min.js
+- **In-Browser JSX transformer**  
+  https://fb.me/JSXTransformer-0.12.0-rc1.js
+
+We've also published version `0.12.0-rc1` of the `react` and `react-tools` packages on npm and the `react` package on bower.
+
+## React Elements {/*react-elements*/}
+
+The biggest conceptual change we made in v0.12 is the move to React Elements. [We talked about this topic in depth earlier this week](/blog/2014/10/14/introducing-react-elements.html). If you haven't already, you should read up on the exciting changes in there!
+
+## JSX Changes {/*jsx-changes*/}
+
+Earlier this year we decided to write [a specification for JSX](https://facebook.github.io/jsx/). This has allowed us to make some changes focused on the React specific JSX and still allow others to innovate in the same space.
+
+### The `@jsx` Pragma is Gone! {/*the-jsx-pragma-is-gone*/}
+
+We have wanted to do this since before we even open sourced React. No more `/** @jsx React.DOM */`!. The React specific JSX transform assumes you have `React` in scope (which had to be true before anyway).
+
+`JSXTransformer` and `react-tools` have both been updated to account for this.
+
+### JSX for Function Calls is No Longer Supported {/*jsx-for-function-calls-is-no-longer-supported*/}
+
+The React specific JSX transform no longer transforms to function calls. Instead we use `React.createElement` and pass it arguments. This allows us to make optimizations and better support React as a compile target for things like Om. Read more in the [React Elements introduction](/blog/2014/10/14/introducting-react-elements.html).
+
+The result of this change is that we will no longer support arbitrary function calls. We understand that the ability to do was a convenient shortcut for many people but we believe the gains will be worth it.
+
+### JSX Lower-case Convention {/*jsx-lower-case-convention*/}
+
+We used to have a whitelist of HTML tags that got special treatment in JSX. However as new HTML tags got added to the spec, or we added support for more SVG tags, we had to go update our whitelist. Additionally, there was ambiguity about the behavior. There was always the chance that something new added to the tag list would result in breaking your code. For example:
+
+```javascript
+return <component />;
+```
+
+Is `component` an existing HTML tag? What if it becomes one?
+
+To address this, we decided on a convention: **All JSX tags that start with a lower-case letter or contain a dash are treated as HTML.**
+
+This means that you no longer have to wait for us to upgrade JSX to use new tags. This also introduces the possibility to consume custom elements (Web Components) - although custom attributes are not yet fully supported.
+
+Currently we still use the whitelist as a sanity check. The transform will fail when it encounters an unknown tag. This allows you to update your code without hitting errors in production.
+
+In addition, the HTML tags are converted to strings instead of using `React.DOM` directly. `<div/>` becomes `React.createElement('div')` instead of `React.DOM.div()`.
+
+### JSX Spread Attributes {/*jsx-spread-attributes*/}
+
+Previously there wasn't a way to for you to pass a dynamic or unknown set of properties through JSX. This is now possible using the spread `...` operator.
+
+```javascript
+var myProps = {a: 1, b: 2};
+return <MyComponent {...myProps} />;
+```
+
+This merges the properties of the object onto the props of `MyComponent`.
+
+[Read More About Spread Attributes](https://gist.github.com/sebmarkbage/07bbe37bc42b6d4aef81)
+
+If you used to use plain function calls to pass arbitrary props objects...
+
+```javascript
+return MyComponent(myProps);
+```
+
+You can now switch to using Spread Attributes instead:
+
+```javascript
+return <MyComponent {...myProps} />;
+```
+
+## Breaking Change: `key` and `ref` Removed From `this.props` {/*breaking-change-key-and-ref-removed-from-thisprops*/}
+
+The props `key` and `ref` were already reserved property names. This turned out to be difficult to explicitly statically type since any object can accept these extra props. It also screws up JIT optimizations of React internals in modern VMs.
+
+These are concepts that React manages from outside the Component before it even gets created so it shouldn't be part of the props.
+
+We made this distinction clearer by moving them off the props object and onto the `ReactElement` itself. This means that you need to rename:
+
+`someElement.props.key` -> `someElement.key`
+
+You can no longer access `this.props.ref` and `this.props.key` from inside the Component instance itself. So you need to use a different name for those props.
+
+You do NOT need to change the way to define `key` and `ref`, only if you need to read it. E.g. `<div key="my-key" />` and `div({ key: 'my-key' })` still works.
+
+## Breaking Change: Default Props Resolution {/*breaking-change-default-props-resolution*/}
+
+This is a subtle difference but `defaultProps` are now resolved at `ReactElement` creation time instead of when it's mounted. This is means that we can avoid allocating an extra object for the resolved props.
+
+You will primarily see this breaking if you're also using `transferPropsTo`.
+
+## Deprecated: transferPropsTo {/*deprecated-transferpropsto*/}
+
+`transferPropsTo` is deprecated in v0.12 and will be removed in v0.13. This helper function was a bit magical. It auto-merged a certain whitelist of properties and excluded others. It was also transferring too many properties. This meant that we have to keep a whitelist of valid HTML attributes in the React runtime. It also means that we can't catch typos on props.
+
+Our suggested solution is to use the Spread Attributes.
+
+```javascript
+return <div {...this.props} />;
+```
+
+Or, just if you're not using JSX:
+
+```javascript
+return div(this.props);
+```
+
+Although to avoid passing too many props down, you'll probably want to use something like ES7 rest properties. [Read more about upgrading from transferPropsTo](https://gist.github.com/sebmarkbage/a6e220b7097eb3c79ab7).
+
+## Deprecated: Returning `false` in Event Handlers {/*deprecated-returning-false-in-event-handlers*/}
+
+It used to be possible to return `false` from event handlers to preventDefault. We did this because this works in most browsers. This is a confusing API and we might want to use the return value for something else. Therefore, this is deprecated. Use `event.preventDefault()` instead.
+
+## Renamed APIs {/*renamed-apis*/}
+
+As part of the [new React terminology](https://gist.github.com/sebmarkbage/fcb1b6ab493b0c77d589) we aliased some existing APIs to use the new naming convention:
+
+- `React.renderComponent` -> `React.render`
+- `React.renderComponentToString` -> `React.renderToString`
+- `React.renderComponentToStaticMarkup` -> `React.renderToStaticMarkup`
+- `React.isValidComponent` -> `React.isValidElement`
+- `React.PropTypes.component` -> `React.PropTypes.element`
+- `React.PropTypes.renderable` -> `React.PropTypes.node`
+
+The older APIs will log a warning but work the same. They will be removed in v0.13.
diff --git a/beta/src/content/blog/2014/10/17/community-roundup-23.md b/beta/src/content/blog/2014/10/17/community-roundup-23.md
new file mode 100644
index 000000000..13c0273a5
--- /dev/null
+++ b/beta/src/content/blog/2014/10/17/community-roundup-23.md
@@ -0,0 +1,137 @@
+---
+title: 'Community Round-up #23'
+author: [LoukaN]
+---
+
+This round-up is a special edition on [Flux](https://facebook.github.io/flux/). If you expect to see diagrams showing arrows that all point in the same direction, you won't be disappointed!
+
+## React And Flux at ForwardJS {/*react-and-flux-at-forwardjs*/}
+
+Facebook engineers [Jing Chen](https://github.com/jingc) and [Bill Fisher](https://github.com/fisherwebdev) gave a talk about Flux and React at [ForwardJS](http://forwardjs.com/), and how using an application architecture with a unidirectional data flow helped solve recurring bugs.
+
+<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/i__969noyAM" frameborder="0" allowfullscreen></iframe>
+
+# Yahoo {/*yahoo*/}
+
+Yahoo is converting Yahoo Mail to React and Flux and in the process, they open sourced several components. This will help you get an isomorphic application up and running.
+
+- [Flux Router Component](https://github.com/yahoo/flux-router-component)
+- [Dispatchr](https://github.com/yahoo/dispatchr)
+- [Fetchr](https://github.com/yahoo/fetchr)
+- [Flux Examples](https://github.com/yahoo/flux-examples)
+
+## Reflux {/*reflux*/}
+
+[Mikael Brassman](https://spoike.ghost.io/) wrote [Reflux](https://github.com/spoike/refluxjs), a library that implements Flux concepts. Note that it diverges significantly from the way we use Flux at Facebook. He explains [the reasons why in a blog post](https://spoike.ghost.io/deconstructing-reactjss-flux/).
+
+<center>
+<a href="https://spoike.ghost.io/deconstructing-reactjss-flux/"><img src="/images/blog/reflux-flux.png" width="400" /></a>
+</center>
+
+## React and Flux Interview {/*react-and-flux-interview*/}
+
+[Ian Obermiller](http://ianobermiller.com/), engineer at Facebook, [made a lengthy interview](http://ianobermiller.com/blog/2014/09/15/react-and-flux-interview/) on the experience of using React and Flux in order to build probably the biggest React application ever written so far.
+
+> I’ve actually said this many times to my team too, I love React. It’s really great for making these complex applications. One thing that really surprised me with it is that React combined with a sane module system like CommonJS, and making sure that you actually modulize your stuff properly has scaled really well to a team of almost 10 developers working on hundreds of files and tens of thousands of lines of code.
+>
+> Really, a fairly large code base... stuff just works. You don’t have to worry about mutating, and the state of the DOM just really makes stuff easy. Just conceptually it’s easier just to think about here’s what I have, here’s my data, here’s how it renders, I don’t care about anything else. For most cases that is really simplifying and makes it really fast to do stuff.
+>
+> [Read the full interview...](http://ianobermiller.com/blog/2014/09/15/react-and-flux-interview/)
+
+## Adobe's Brackets Project Tree {/*adobes-brackets-project-tree*/}
+
+[Kevin Dangoor](http://www.kevindangoor.com/) is converting the project tree of [Adobe's Bracket text editor](http://brackets.io/) to React and Flux. He wrote about his experience [using Flux](http://www.kevindangoor.com/2014/09/intro-to-the-new-brackets-project-tree/).
+
+<center>
+<a href="http://www.kevindangoor.com/2014/09/intro-to-the-new-brackets-project-tree/"><img src="/images/blog/flux-diagram.png" width="400" /></a>
+</center>
+
+## Async Requests with Flux Revisited {/*async-requests-with-flux-revisited*/}
+
+[Reto Schläpfer](http://www.code-experience.com/the-code-experience/) came back to a Flux project he hasn't worked on for a month and [saw many ways to improve the way he implemented Flux](http://www.code-experience.com/async-requests-with-react-js-and-flux-revisited/). He summarized his learnings in a blog post.
+
+> The smarter way is to call the Web Api directly from an Action Creator and then make the Api dispatch an event with the request result as a payload. The Store(s) can choose to listen on those request actions and change their state accordingly.
+>
+> Before I show some updated code snippets, let me explain why this is superior:
+>
+> - There should be only one channel for all state changes: The Dispatcher. This makes debugging easy because it just requires a single console.log in the dispatcher to observe every single state change trigger.
+>
+> - Asynchronously executed callbacks should not leak into Stores. The consequences of it are just too hard to fully foresee. This leads to elusive bugs. Stores should only execute synchronous code. Otherwise they are too hard to understand.
+>
+> - Avoiding actions firing other actions makes your app simple. We use the newest Dispatcher implementation from Facebook that does not allow a new dispatch while dispatching. It forces you to do things right.
+>
+> [Read the full article...](http://www.code-experience.com/async-requests-with-react-js-and-flux-revisited/)
+
+## Undo-Redo with Immutable Data Structures {/*undo-redo-with-immutable-data-structures*/}
+
+[Ameya Karve](https://github.com/ameyakarve) explained how to use [Mori](https://github.com/swannodette/mori), a library that provides immutable data structures, in order to [implement undo-redo](http://ameyakarve.com/jekyll/update/2014/02/06/Undo-React-Flux-Mori.html). This usually very challenging feature only takes a few lines of code with Flux!
+
+```javascript
+undo: function() {
+  this.redoStates = Mori.conj(this.redoStates, Mori.first(this.undoStates));
+  this.undoStates = Mori.drop(1, this.undoStates);
+  this.todosState = Mori.first(this.undoStates);
+  this.canUndo = Mori.count(this.undoStates) > 1;
+  this.canRedo = true;
+  if (Mori.count(this.undoStates) > 1) {
+    this.todos = JSON.parse(this.todosState);
+  } else {
+    this.todos = [];
+  }
+  this.emit('change');
+},
+```
+
+## Flux in practice {/*flux-in-practice*/}
+
+[Gary Chambers](https://twitter.com/garychambers108) wrote a [guide to get started with Flux](https://medium.com/@garychambers108/flux-in-practice-ec08daa9041a). This is a very practical introduction to Flux.
+
+> So, what does it actually mean to write an application in the Flux way? At that moment of inspiration, when faced with an empty text editor, how should you begin? This post follows the process of building a Flux-compliant application from scratch.
+>
+> [Read the full guide...](https://medium.com/@garychambers108/flux-in-practice-ec08daa9041a)
+
+## Components, React and Flux {/*components-react-and-flux*/}
+
+[Dan Abramov](https://twitter.com/dan_abramov) working at Stampsy made a talk about React and Flux. It's a very good overview of the concepts at play.
+
+<iframe src="//slides.com/danabramov/components-react-flux-wip/embed"  width="100%" height="315" scrolling="no" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+
+## React and Flux {/*react-and-flux*/}
+
+[Christian Alfoni](https://github.com/christianalfoni) wrote an article where [he compares Backbone, Angular and Flux](https://christianalfoni.github.io/javascript/2014/08/20/react-js-and-flux.html) on a simple example that's representative of a real project he worked on.
+
+> Wow, that was a bit more code! Well, try to think of it like this. In the above examples, if we were to do any changes to the application we would probably have to move things around. In the FLUX example we have considered that from the start.
+>
+> Any changes to the application is adding, not moving things around. If you need a new store, just add it and make components dependant of it. If you need more views, create a component and use it inside any other component without affecting their current "parent controller or models".
+>
+> [Read the full article...](https://christianalfoni.github.io/javascript/2014/08/20/react-js-and-flux.html)
+
+## Flux: Step by Step approach {/*flux-step-by-step-approach*/}
+
+[Nicola Paolucci](https://github.com/durdn) from Atlassian wrote a great guide to help your getting understand [Flux step by step](https://blogs.atlassian.com/2014/08/flux-architecture-step-by-step/).
+
+<center>
+<a href="https://blogs.atlassian.com/2014/08/flux-architecture-step-by-step/"><img src="/images/blog/flux-chart.png" width="400" /></a>
+</center>
+
+## DeLorean: Back to the future! {/*delorean-back-to-the-future*/}
+
+[DeLorean](https://github.com/deloreanjs/delorean) is a tiny Flux pattern implementation developed by [Fatih Kadir Akin](https://github.com/f).
+
+> - Unidirectional data flow, it makes your app logic simpler than MVC
+> - Automatically listens to data changes and keeps your data updated
+> - Makes data more consistent across your whole application
+> - It's framework agnostic, completely. There's no view framework dependency
+> - Very small, just 4K gzipped
+> - Built-in React.js integration, easy to use with Flight.js and Ractive.js and probably all others
+> - Improve your UI/data consistency using rollbacks
+
+## Facebook's iOS Infrastructure {/*facebooks-ios-infrastructure*/}
+
+Last but not least, Flux and React ideas are not limited to JavaScript inside of the browser. The iOS team at Facebook re-implemented Newsfeed using very similar patterns.
+
+<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/XhXC4SKOGfQ" frameborder="0" allowfullscreen></iframe>
+
+## Random Tweet {/*random-tweet*/}
+
+<blockquote class="twitter-tweet" lang="en"><p>If you build your app with flux, you can swap out React for a canvas or svg view layer and keep 85% of your code. (or the thing after React)</p>&mdash; Ryan Florence (@ryanflorence) <a href="https://twitter.com/ryanflorence/status/507309645372076034">September 3, 2014</a></blockquote>
diff --git a/beta/src/content/blog/2014/10/27/react-js-conf.md b/beta/src/content/blog/2014/10/27/react-js-conf.md
new file mode 100644
index 000000000..845592d6e
--- /dev/null
+++ b/beta/src/content/blog/2014/10/27/react-js-conf.md
@@ -0,0 +1,14 @@
+---
+title: React.js Conf
+author: [vjeux]
+---
+
+Every few weeks someone asks us when we are going to organize a conference for React. Our answer has always been "some day". In the mean time, people have been talking about React at other JavaScript conferences around the world. But now the time has finally come for us to have a conference of our own.
+
+**We're happy to announce [React.js Conf](http://conf.reactjs.com/)! It will take place January 28-29, 2015 on Facebook's campus in Menlo Park, California.**
+
+Before we open registration, [we're looking for great talks](http://conf.reactjs.com/call-for-presenters.html). We want to see how you pushed application development forward! If you ever talked to a meet-up, pitched React to your co-workers, or done something awesome and want to talk about it, let us know!
+
+Here are some areas of research we want to explore during the conference if you need some inspiration: server-side rendering, data fetching, language features (eg es6, clojure), immutability, rendering targets (eg svg, canvas), real-time updates...
+
+We look forward to seeing many of you in person in just a few short months!
diff --git a/beta/src/content/blog/2014/10/28/react-v0.12.md b/beta/src/content/blog/2014/10/28/react-v0.12.md
new file mode 100644
index 000000000..ad7db2639
--- /dev/null
+++ b/beta/src/content/blog/2014/10/28/react-v0.12.md
@@ -0,0 +1,126 @@
+---
+title: React v0.12
+author: [zpao]
+---
+
+We're happy to announce the availability of React v0.12! After over a week of baking as the release candidate, we uncovered and fixed a few small issues. Thanks to all of you who upgraded and gave us feedback!
+
+We have talked a lot about some of the bigger changes in this release. [We introduced new terminology](/blog/2014/10/14/introducing-react-elements.html) and changed APIs to clean up and simplify some of the concepts of React. [We also made several changes to JSX](/blog/2014/10/16/react-v0.12-rc1.html) and deprecated a few functions. We won't go into depth about these changes again but we encourage you to read up on these changes in the linked posts. We'll summarize these changes and discuss some of the other changes and how they may impact you below. As always, a full changelog is also included below.
+
+The release is available for download:
+
+- **React**  
+  Dev build with warnings: https://fb.me/react-0.12.0.js  
+  Minified build for production: https://fb.me/react-0.12.0.min.js
+- **React with Add-Ons**  
+  Dev build with warnings: https://fb.me/react-with-addons-0.12.0.js  
+  Minified build for production: https://fb.me/react-with-addons-0.12.0.min.js
+- **In-Browser JSX transformer**  
+  https://fb.me/JSXTransformer-0.12.0.js
+
+We've also published version `0.12.0` of the `react` and `react-tools` packages on npm and the `react` package on bower.
+
+## New Terminology & Updated APIs {/*new-terminology--updated-apis*/}
+
+v0.12 is bringing about some new terminology. [We introduced](/blog/2014/10/14/introducing-react-elements.html) this 2 weeks ago and we've also documented it in [a new section of the documentation](/docs/glossary.html). As a part of this, we also corrected many of our top-level APIs to align with the terminology. `Component` has been removed from all of our `React.render*` methods. While at one point the argument you passed to these functions was called a Component, it no longer is. You are passing ReactElements. To align with `render` methods in your component classes, we decided to keep the top-level functions short and sweet. `React.renderComponent` is now `React.render`.
+
+We also corrected some other misnomers. `React.isValidComponent` actually determines if the argument is a ReactElement, so it has been renamed to `React.isValidElement`. In the same vein, `React.PropTypes.component` is now `React.PropTypes.element` and `React.PropTypes.renderable` is now `React.PropTypes.node`.
+
+The old methods will still work but will warn upon first use. They will be removed in v0.13.
+
+## JSX Changes {/*jsx-changes*/}
+
+[We talked more in depth about these before](/blog/2014/10/16/react-v0.12-rc1.html#jsx-changes), so here are the highlights.
+
+- No more `/** @jsx React.DOM */`!
+- We no longer transform to a straight function call. `<Component/>` now becomes `React.createElement(Component)`
+- DOM components don't make use of `React.DOM`, instead we pass the tag name directly. `<div/>` becomes `React.createElement('div')`
+- We introduced spread attributes as a quick way to transfer props.
+
+## DevTools Improvements, No More `__internals` {/*devtools-improvements-no-more-__internals*/}
+
+For months we've gotten complaints about the React DevTools message. It shouldn't have logged the up-sell message when you were already using the DevTools. Unfortunately this was because the way we implemented these tools resulted in the DevTools knowing about React, but not the reverse. We finally gave this some attention and enabled React to know if the DevTools are installed. We released an update to the devtools several weeks ago making this possible. Extensions in Chrome should auto-update so you probably already have the update installed!
+
+As a result of this update, we no longer need to expose several internal modules to the world. If you were taking advantage of this implementation detail, your code will break. `React.__internals` is no more.
+
+## License Change - BSD {/*license-change---bsd*/}
+
+We updated the license on React to the BSD 3-Clause license with an explicit patent grant. Previously we used the Apache 2 license. These licenses are very similar and our extra patent grant is equivalent to the grant provided in the Apache license. You can still use React with the confidence that we have granted the use of any patents covering it. This brings us in line with the same licensing we use across the majority of our open source projects at Facebook.
+
+You can read the full text of the [LICENSE](https://github.com/facebook/react/blob/master/LICENSE) and [`PATENTS`](https://github.com/facebook/react/blob/master/PATENTS) files on GitHub.
+
+---
+
+## Changelog {/*changelog*/}
+
+### React Core {/*react-core*/}
+
+#### Breaking Changes {/*breaking-changes*/}
+
+- `key` and `ref` moved off props object, now accessible on the element directly
+- React is now BSD licensed with accompanying Patents grant
+- Default prop resolution has moved to Element creation time instead of mount time, making them effectively static
+- `React.__internals` is removed - it was exposed for DevTools which no longer needs access
+- Composite Component functions can no longer be called directly - they must be wrapped with `React.createFactory` first. This is handled for you when using JSX.
+
+#### New Features {/*new-features*/}
+
+- Spread syntax (`{...}`) introduced to deprecate `this.transferPropsTo`
+- Added support for more HTML attributes: `acceptCharset`, `classID`, `manifest`
+
+#### Deprecations {/*deprecations*/}
+
+- `React.renderComponent` --> `React.render`
+- `React.renderComponentToString` --> `React.renderToString`
+- `React.renderComponentToStaticMarkup` --> `React.renderToStaticMarkup`
+- `React.isValidComponent` --> `React.isValidElement`
+- `React.PropTypes.component` --> `React.PropTypes.element`
+- `React.PropTypes.renderable` --> `React.PropTypes.node`
+- **DEPRECATED** `React.isValidClass`
+- **DEPRECATED** `instance.transferPropsTo`
+- **DEPRECATED** Returning `false` from event handlers to preventDefault
+- **DEPRECATED** Convenience Constructor usage as function, instead wrap with `React.createFactory`
+- **DEPRECATED** use of `key={null}` to assign implicit keys
+
+#### Bug Fixes {/*bug-fixes*/}
+
+- Better handling of events and updates in nested results, fixing value restoration in "layered" controlled components
+- Correctly treat `event.getModifierState` as case sensitive
+- Improved normalization of `event.charCode`
+- Better error stacks when involving autobound methods
+- Removed DevTools message when the DevTools are installed
+- Correctly detect required language features across browsers
+- Fixed support for some HTML attributes:
+  - `list` updates correctly now
+  - `scrollLeft`, `scrollTop` removed, these should not be specified as props
+- Improved error messages
+
+### React With Addons {/*react-with-addons*/}
+
+#### New Features {/*new-features-1*/}
+
+- `React.addons.batchedUpdates` added to API for hooking into update cycle
+
+#### Breaking Changes {/*breaking-changes-1*/}
+
+- `React.addons.update` uses `assign` instead of `copyProperties` which does `hasOwnProperty` checks. Properties on prototypes will no longer be updated correctly.
+
+#### Bug Fixes {/*bug-fixes-1*/}
+
+- Fixed some issues with CSS Transitions
+
+### JSX {/*jsx*/}
+
+#### Breaking Changes {/*breaking-changes-2*/}
+
+- Enforced convention: lower case tag names are always treated as HTML tags, upper case tag names are always treated as composite components
+- JSX no longer transforms to simple function calls
+
+#### New Features {/*new-features-2*/}
+
+- `@jsx React.DOM` no longer required
+- spread (`{...}`) operator introduced to allow easier use of props
+
+#### Bug Fixes {/*bug-fixes-2*/}
+
+- JSXTransformer: Make sourcemaps an option when using APIs directly (eg, for react-rails)
diff --git a/beta/src/content/blog/2014/11/24/react-js-conf-updates.md b/beta/src/content/blog/2014/11/24/react-js-conf-updates.md
new file mode 100644
index 000000000..1e1af1e3d
--- /dev/null
+++ b/beta/src/content/blog/2014/11/24/react-js-conf-updates.md
@@ -0,0 +1,39 @@
+---
+title: React.js Conf Updates
+author: [vjeux]
+---
+
+Yesterday was the [React.js Conf](http://conf.reactjs.com/index.html) call for presenters submission deadline. We were
+surprised to have received a total of **one hundred talk proposals** and were
+amazed that 600 people requested to be notified when ticket go on sale. This is incredible!
+
+When we organized the conference, we decided to start small since this is the
+first React.js conference. Also, we weren't sure what level of demand to expect,
+so we planned for a single-track, two-day conference on Facebook's campus. The
+largest room available would accommodate 18 speaking slots and 200 attendees.
+The spacial configuration makes it difficult to add a second track and changing
+venues only two months in advance would be too difficult, so we are deciding to
+stick with the originally planned format and venue on Facebook's campus.
+
+Unfortunately, this means that we can only accept a small number of the awesome
+conference talk proposals. In order to make sure attendees get a fair shot at
+registering, we're going to sell tickets in three separate first-come,
+first-serve phases. **Tickets will cost \$200 regardless of which phase they are
+purchased from and all proceeds will go to charity**.
+
+- Friday November 28th 2014 — Noon PST: First wave of tickets
+- Friday December 5th 2014 — Noon PST: Second wave of tickets
+- Friday December 12th 2014 — Noon PST: Third and last wave of tickets
+
+We really do wish that everyone could attend React.js Conf, but in order to
+ensure a quality experience for those who attend, we feel it will be best to
+limit the size of the conference to what was originally planned for. This means
+that not everyone who wants to attend will be able to, and many talks that
+would be excellent contributions to the conference will have to be postponed
+until the next conference. All the talks will be recorded and put online shortly after.
+
+We hope to see many of you at React.js Conf this January.
+
+Sincerely,
+
+React Core Team
diff --git a/beta/src/content/blog/2014/11/25/community-roundup-24.md b/beta/src/content/blog/2014/11/25/community-roundup-24.md
new file mode 100644
index 000000000..5e1751cb4
--- /dev/null
+++ b/beta/src/content/blog/2014/11/25/community-roundup-24.md
@@ -0,0 +1,96 @@
+---
+title: 'Community Round-up #24'
+author: [steveluscher]
+---
+
+## Keep it Simple {/*keep-it-simple*/}
+
+Pedro Nauck ([pedronauck](https://github.com/pedronauck)) delivered an impeccably illustrated deck at Brazil's _Front in Floripa_ conference. Watch him talk about how to keep delivering value as your app scales, by keeping your development process simple.
+
+<script async class="speakerdeck-embed" data-id="44129b9054c901328b89221e99b278fe" data-ratio="1.33333333333333" src="//speakerdeck.com/assets/embed.js"></script>
+
+Murilo Pereira ([mpereira](https://github.com/mpereira)) tussles with the topic of complexity in this blog post about [coping with scaling up](http://www.techsonian.net/2014/09/from-backbone-to-react-our-experience-scaling-a-web-application/), where he describes how his team used React to make possible the “nearly impossible.”
+
+I ([steveluscher](https://github.com/steveluscher)) spoke at Manning Publications' “Powered By JavaScript” Strangeloop pre-conf in St. Louis. There, I proposed a new notation to talk about development complexity – Big-Coffee Notation ☕(n) – and spoke about the features of React that help keep our Big-Coffee from going quadratic, as our user interfaces get more complex.
+
+<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/rI0GQc__0SM" frameborder="0" allowfullscreen></iframe>
+
+James Pearce ([jamesgpearce](https://github.com/jamesgpearce)) carried Big-Coffee all the way to Raleigh, NC. At the _All Things Open_ conference, he spoke about some of the design decisions that went into React, particularly those that lend themselves to simpler, more reliable code.
+
+<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/m2fuO2wl_3c" frameborder="0" allowfullscreen></iframe>
+
+## All About Isomorphism {/*all-about-isomorphism*/}
+
+Michael Ridgway ([mridgway](https://github.com/mridgway)) shows us how Yahoo! (who recently [moved Yahoo! Mail to React](http://www.slideshare.net/rmsguhan/react-meetup-mailonreact)) renders their React+Flux application, server-side.
+
+<script async class="speakerdeck-embed" data-id="87ecaa3048750132f42542ffc18c6fcf" data-ratio="1.77777777777778" src="//speakerdeck.com/assets/embed.js"></script>
+
+Péter Márton ([hekike](https://github.com/hekike)) helps us brew a cold one (literally) using an application that's server-client [isomorphic and indexable](http://blog.risingstack.com/from-angularjs-to-react-the-isomorphic-way/). Demo and sample code included – cold ones sold separately.
+
+And, lest you think that client-server isomorphism exists in pursuit of crawalable, indexable HTML alone, watch as Nate Hunzaker ([nhunzaker](https://github.com/nhunzaker)) [server renders data visualizations as SVG](http://viget.com/extend/visualization-is-for-sharing-using-react-for-portable-data-visualization) with React.
+
+## React Router Mows the Lawn {/*react-router-mows-the-lawn*/}
+
+Ryan Florence ([rpflorence](https://github.com/rpflorence])) and Michael Jackson ([mjackson](https://github.com/mjackson)) unveiled a new API for [React Router](https://github.com/rackt/react-router) that solves some of its user's problems by eliminating the problems themselves. Read all about what React Router learned from its community of users, and how they've [rolled your ideas into their latest release](https://github.com/rackt/react-router/wiki/Announcements).
+
+## React in Practice {/*react-in-practice*/}
+
+Jonathan Beebe ([somethingkindawierd](https://github.com/somethingkindawierd)) spoke about how he uses React to build tools that deliver hope to those trying to make the best of a bad situation. Watch his talk from this year's _Nodevember_ conference in Nashville
+
+<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/uZgAq1CZ1N8" frameborder="0" allowfullscreen></iframe>
+
+If you take a peek under the covers, you'll find that React powers [Carousel](https://blog.carousel.com/2014/11/introducing-carousel-for-web-ipad-and-android-tablet/), Dropbox's new photo and video gallery app.
+
+We enjoyed a cinematic/narrative experience with this React-powered, interactive story by British author William Boyd. Dive into “[The Vanishing Game](https://thevanishinggame.wellstoried.com)” and see for yourself.
+
+## Be Kind, Rewind {/*be-kind-rewind*/}
+
+Spend the next 60 seconds watching Daniel Woelfel ([dwwoelfel](https://github.com/dwwoelfel)) serialize a React app's state as a string, then deserialize it to produce a working UI. Read about how he uses this technique to [reproduce bugs](http://blog.circleci.com/local-state-global-concerns/) reported to him by his users.
+
+<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/5yHFTN-_mOo" frameborder="0" allowfullscreen></iframe>
+
+## Community Components {/*community-components*/}
+
+Tom Chen ([tomchentw](https://github.com/tomchentw)) brings us a [react-google-maps](https://tomchentw.github.io/react-google-maps/) component, and a way to syntax highlight source code using Prism and the [react-prism](https://tomchentw.github.io/react-prism/) component, for good measure.
+
+Jed Watson ([jedwatson](https://github.com/JedWatson)) helps you manage touch, tap, and press events using the [react-tappable](https://github.com/JedWatson/react-tappable) component.
+
+To find these, and more community-built components, consult the [React Components](http://react-components.com/) and [React Rocks](http://react.rocks) component directories. React Rocks recently exceeded one-hundred listed components and counting. See one missing? Add the keyword `react-component` to your `package.json` to get listed on React Components, and [submit a link to React Rocks](https://docs.google.com/forms/d/1TpnwJmLcmmGj-_TI68upu_bKBViYeiKx7Aj9uKmV6wY/viewform).
+
+## Waiter, There's a CSS In My JavaScript {/*waiter-theres-a-css-in-my-javascript*/}
+
+The internet is abuzz with talk of styling React components using JavaScript instead of CSS. Christopher Chedeau ([vjeux](https://github.com/vjeux)) talks about some of the [fundamental style management challenges](https://speakerdeck.com/vjeux/react-css-in-js) we grapple with, at Facebook scale. A number of implementations of JavaScript centric style management solutions have appeared in the wild, including the React-focused [react-style](https://github.com/js-next/react-style).
+
+## Test Isolation {/*test-isolation*/}
+
+Yahoo! shows us how they make use of `iframe` elements to [unit test React components in isolation](http://yahooeng.tumblr.com/post/102274727496/to-testutil-or-not-to-testutil).
+
+## You've Got The Hang of Flux, Now Let's Flow {/*youve-got-the-hang-of-flux-now-lets-flow*/}
+
+Facebook Open Source released [Flow](https://code.facebook.com/posts/1505962329687926/flow-a-new-static-type-checker-for-javascript/) this month – a static type checker for JavaScript. Naturally, Flow supports JSX, and you can use it to [type check React applications](https://code.facebook.com/posts/1505962329687926/flow-a-new-static-type-checker-for-javascript/#compatibility). There's never been a better reason to start making use of `propTypes` in your component specifications!
+
+## Countdown to React.js Conf 2014 {/*countdown-to-reactjs-conf-2014*/}
+
+We're counting down the days until [React.js Conf](http://conf.reactjs.com) at Facebook's headquarters in Menlo Park, California, on January 28th & 29th, 2015. Thank you, to everyone who responded to the Call for Presenters. Mark the dates; tickets go on sale in three waves: at noon PST on November 28th, December 5th, and December 12th, 2014.
+
+## React Meetups Around the World {/*react-meetups-around-the-world*/}
+
+<blockquote class="twitter-tweet" lang="en"><p>React JS meetup having pretty good turn up rate today <a href="https://twitter.com/hashtag/londonreact?src=hash">#londonreact</a> <a href="http://t.co/c360dlVVAe">pic.twitter.com/c360dlVVAe</a></p>&mdash; Alexander Savin (@karismafilms) <a href="https://twitter.com/karismafilms/status/535152580377468928">November 19, 2014</a></blockquote>
+
+<div class="skinny-row">
+  <div class="skinny-col">
+    <blockquote class="twitter-tweet" lang="en"><p>60+ attendees at the second React.js Utah meetup. <a href="https://twitter.com/ryanflorence">@ryanflorence</a> doing a great job, even without the internet. <a href="http://t.co/fV59AQTOyu">pic.twitter.com/fV59AQTOyu</a></p>&mdash; ReactJS Utah (@reactjsutah) <a href="https://twitter.com/reactjsutah/status/527259410020573184">October 29, 2014</a></blockquote>
+  </div>
+  <div class="skinny-col">
+    <blockquote class="twitter-tweet" lang="en"><p><a href="https://twitter.com/hashtag/ReactJS?src=hash">#ReactJS</a> meetup at <a href="https://twitter.com/Yahoo">@Yahoo</a> ! History of <a href="https://twitter.com/yahoomail">@yahoomail</a> and why we chose react and NodeJS <a href="http://t.co/Nm4EdTv45G">pic.twitter.com/Nm4EdTv45G</a></p>&mdash; rmsguhan (@rmsguhan) <a href="https://twitter.com/rmsguhan/status/515370950427029504">September 26, 2014</a></blockquote>
+  </div>
+</div>
+
+<div class="skinny-row">
+  <div class="skinny-col">
+    <blockquote class="twitter-tweet" data-cards="hidden" lang="en"><p>The very first ReactJS meetup in NYC tonight, I&#39;ll be speaking about the big ideas behind Om <a href="http://t.co/dvPrFqE9eP">http://t.co/dvPrFqE9eP</a></p>&mdash; David Nolen (@swannodette) <a href="https://twitter.com/swannodette/status/532190993463128064">November 11, 2014</a></blockquote>
+  </div>
+  <div class="skinny-col">
+    <blockquote class="twitter-tweet" lang="en"><p>If anyone in Sydney is curious about <a href="https://twitter.com/reactjs">@reactjs</a>, I&#39;m presenting at <a href="https://twitter.com/sydjs">@sydjs</a> tonight on how to use it and why it is the future. <a href="https://twitter.com/hashtag/javascript?src=hash">#javascript</a></p>&mdash; Jed Watson (@JedWatson) <a href="https://twitter.com/JedWatson/status/534943557568565248">November 19, 2014</a></blockquote>
+  </div>
+</div>
diff --git a/beta/src/content/blog/2014/12/18/react-v0.12.2.md b/beta/src/content/blog/2014/12/18/react-v0.12.2.md
new file mode 100644
index 000000000..942ef68b4
--- /dev/null
+++ b/beta/src/content/blog/2014/12/18/react-v0.12.2.md
@@ -0,0 +1,36 @@
+---
+title: React v0.12.2
+author: [zpao]
+---
+
+We just shipped React v0.12.2, bringing the 0.12 branch up to date with a few small fixes that landed in master over the past 2 months.
+
+You may have noticed that we did not do an announcement for v0.12.1. That release was snuck out in anticipation of [Flow](http://flowtype.org/), with only transform-related changes. Namely we added a flag to the `jsx` executable which allowed you to safely transform Flow-based code to vanilla JS. If you didn't update for that release, you can safely skip it and move directly to v0.12.2.
+
+The release is available for download from the CDN:
+
+- **React**  
+  Dev build with warnings: https://fb.me/react-0.12.2.js  
+  Minified build for production: https://fb.me/react-0.12.2.min.js
+- **React with Add-Ons**  
+  Dev build with warnings: https://fb.me/react-with-addons-0.12.2.js  
+  Minified build for production: https://fb.me/react-with-addons-0.12.2.min.js
+- **In-Browser JSX transformer**  
+  https://fb.me/JSXTransformer-0.12.2.js
+
+We've also published version `0.12.2` of the `react` and `react-tools` packages on npm and the `react` package on bower. `0.12.1` is also available in the same locations if need those.
+
+Please try these builds out and [file an issue on GitHub](https://github.com/facebook/react/issues/new) if you see anything awry.
+
+## Changelog {/*changelog*/}
+
+### React Core {/*react-core*/}
+
+- Added support for more HTML attributes: `formAction`, `formEncType`, `formMethod`, `formTarget`, `marginHeight`, `marginWidth`
+- Added `strokeOpacity` to the list of unitless CSS properties
+- Removed trailing commas (allows npm module to be bundled and used in IE8)
+- Fixed bug resulting in error when passing `undefined` to `React.createElement` - now there is a useful warning
+
+### React Tools {/*react-tools*/}
+
+- JSX-related transforms now always use double quotes for props and `displayName`
diff --git a/beta/src/content/blog/2014/12/19/react-js-conf-diversity-scholarship.md b/beta/src/content/blog/2014/12/19/react-js-conf-diversity-scholarship.md
new file mode 100644
index 000000000..f757286d2
--- /dev/null
+++ b/beta/src/content/blog/2014/12/19/react-js-conf-diversity-scholarship.md
@@ -0,0 +1,37 @@
+---
+title: React.js Conf Diversity Scholarship
+author: [zpao]
+---
+
+Today I'm really happy to announce the React.js Conf Diversity Scholarship! We believe that a diverse set of viewpoints and opinions is really important to build a thriving community. In an ideal world, every part of the tech community would be made up of people from all walks of life. However the reality is that we must be proactive and make an effort to make sure everybody has a voice. As conference organizers we worked closely with the Diversity Team here at Facebook to set aside 10 tickets and provide a scholarship. 10 tickets may not be many in the grand scheme but we really believe that this will have a positive impact on the discussions we have at the conference.
+
+I'm really excited about this and I hope you are too! The full announcement is below:
+
+---
+
+The Diversity Team at Facebook is excited to announce that we are now accepting applications for the React.js Conf scholarship!
+
+Beginning today, those studying or working in computer science or a related field can apply for an all-expense paid scholarship to attend the React.js Conf at Facebook’s Headquarters in Menlo Park, CA on January 28 & 29, 2015. React opens a world of new possibilities such as server-side rendering, real-time updates, different rendering targets like SVG and canvas. Join us at React.js Conf to shape the future of client-side applications! For more information about the React.js conference, please see the [website](http://conf.reactjs.com/) and [previous](/blog/2014/10/27/react-js-conf.html) [updates](/blog/2014/11/24/react-js-conf-updates.html) on our blog.
+
+At Facebook, we believe that anyone anywhere can make a positive impact by developing products to make the world more open and connected to the people and things they care about. Given the current realities of the tech industry and the lack of representation of communities we seek to serve, applicants currently under-represented in Computer Science and related fields are strongly encouraged to apply.
+Facebook will make determinations on scholarship recipients in its sole discretion. Facebook complies with all equal opportunity laws.
+
+To apply for the scholarship, please visit the Application Page: https://www.surveymonkey.com/s/XVJGK6R
+
+## Award Includes {/*award-includes*/}
+
+- Paid registration fee for the React.js Conf January 28 & 29th at Facebook’s Headquarters in Menlo Park, CA
+- Paid travel and lodging expenses
+- Additional \$200 meal stipend
+
+## Important Dates {/*important-dates*/}
+
+- Monday, January 5, 2015: Applications for the React.js Conf Scholarship must be submitted in full
+- Friday, January 9, 2015: Award recipients will be notified by email of their acceptance
+- Wednesday & Thursday, January 28 & 29, 2015: React.js Conf
+
+## Eligibility {/*eligibility*/}
+
+- Must currently be studying or working in Computer Science or a related field
+- International applicants are welcome, but you will be responsible for securing your own visa to attend the conference
+- You must be available to attend the full duration of React.js conf on January 28 and 29 at Facebook Headquarters in Menlo Park
diff --git a/beta/src/content/blog/2015/01/27/react-v0.13.0-beta-1.md b/beta/src/content/blog/2015/01/27/react-v0.13.0-beta-1.md
new file mode 100644
index 000000000..9f4df0a98
--- /dev/null
+++ b/beta/src/content/blog/2015/01/27/react-v0.13.0-beta-1.md
@@ -0,0 +1,155 @@
+---
+title: React v0.13.0 Beta 1
+author: [sebmarkbage]
+---
+
+React 0.13 has a lot of nice features but there is one particular feature that I'm really excited about. I couldn't wait for React.js Conf to start tomorrow morning.
+
+Maybe you're like me and staying up late excited about the conference, or maybe you weren't one of the lucky ones to get a ticket. Either way I figured I'd give you all something to play with until then.
+
+We just published a beta version of React v0.13.0 to [npm](https://www.npmjs.com/package/react)! You can install it with `npm install react@0.13.0-beta.1`. Since this is a pre-release, we don't have proper release notes ready.
+
+So what is that one feature I'm so excited about that I just couldn't wait to share?
+
+## Plain JavaScript Classes!! {/*plain-javascript-classes*/}
+
+JavaScript originally didn't have a built-in class system. Every popular framework built their own, and so did we. This means that you have a learn slightly different semantics for each framework.
+
+We figured that we're not in the business of designing a class system. We just want to use whatever is the idiomatic JavaScript way of creating classes.
+
+In React 0.13.0 you no longer need to use `React.createClass` to create React components. If you have a transpiler you can use ES6 classes today. You can use the transpiler we ship with `react-tools` by making use of the harmony option: `jsx --harmony`.
+
+### ES6 Classes {/*es6-classes*/}
+
+```javascript
+class HelloMessage extends React.Component {
+  render() {
+    return <div>Hello {this.props.name}</div>;
+  }
+}
+
+React.render(<HelloMessage name="Sebastian" />, mountNode);
+```
+
+The API is mostly what you would expect, with the exception of `getInitialState`. We figured that the idiomatic way to specify class state is to just use a simple instance property. Likewise `getDefaultProps` and `propTypes` are really just properties on the constructor.
+
+```javascript
+export class Counter extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {count: props.initialCount};
+  }
+  tick() {
+    this.setState({count: this.state.count + 1});
+  }
+  render() {
+    return <div onClick={this.tick.bind(this)}>Clicks: {this.state.count}</div>;
+  }
+}
+Counter.propTypes = {initialCount: React.PropTypes.number};
+Counter.defaultProps = {initialCount: 0};
+```
+
+### ES7+ Property Initializers {/*es7-property-initializers*/}
+
+Wait, assigning to properties seems like a very imperative way of defining classes! You're right, however, we designed it this way because it's idiomatic. We fully expect a more declarative syntax for property initialization to arrive in future version of JavaScript. It might look something like this:
+
+```javascript
+// Future Version
+export class Counter extends React.Component {
+  static propTypes = {initialCount: React.PropTypes.number};
+  static defaultProps = {initialCount: 0};
+  state = {count: this.props.initialCount};
+  tick() {
+    this.setState({count: this.state.count + 1});
+  }
+  render() {
+    return <div onClick={this.tick.bind(this)}>Clicks: {this.state.count}</div>;
+  }
+}
+```
+
+This was inspired by TypeScript's property initializers.
+
+### Autobinding {/*autobinding*/}
+
+`React.createClass` has a built-in magic feature that bound all methods to `this` automatically for you. This can be a little confusing for JavaScript developers that are not used to this feature in other classes, or it can be confusing when they move from React to other classes.
+
+Therefore we decided not to have this built-in into React's class model. You can still explicitly prebind methods in your constructor if you want.
+
+```javascript
+class Counter extends React.Component {
+  constructor(props) {
+    super(props);
+    this.tick = this.tick.bind(this);
+  }
+  tick() {
+    ...
+  }
+  ...
+}
+```
+
+However, when we have the future property initializers, there is a neat trick that you can use to accomplish this syntactically:
+
+```javascript
+class Counter extends React.Component {
+  tick = () => {
+    ...
+  }
+  ...
+}
+```
+
+### Mixins {/*mixins*/}
+
+Unfortunately, we will not launch any mixin support for ES6 classes in React. That would defeat the purpose of only using idiomatic JavaScript concepts.
+
+There is no standard and universal way to define mixins in JavaScript. In fact, several features to support mixins were dropped from ES6 today. There are a lot of libraries with different semantics. We think that there should be one way of defining mixins that you can use for any JavaScript class. React just making another doesn't help that effort.
+
+Therefore, we will keep working with the larger JS community to create a standard for mixins. We will also start designing a new compositional API that will help make common tasks easier to do without mixins. E.g. first-class subscriptions to any kind of Flux store.
+
+Luckily, if you want to keep using mixins, you can just keep using `React.createClass`.
+
+> **Note:**
+>
+> The classic `React.createClass` style of creating classes will continue to work just fine.
+
+## Other Languages! {/*other-languages*/}
+
+Since these classes are just plain old JavaScript classes, you can use other languages that compile to JavaScript classes, such as TypeScript.
+
+You can also use CoffeeScript classes:
+
+```coffeescript
+div = React.createFactory 'div'
+
+class Counter extends React.Component
+  @propTypes = initialCount: React.PropTypes.number
+  @defaultProps = initialCount: 0
+
+  constructor: (props) ->
+    super props
+    @state = count: props.initialCount
+
+  tick: =>
+    @setState count: @state.count + 1
+
+  render: ->
+    div onClick: @tick,
+      'Clicks: '
+      @state.count
+```
+
+You can even use the old ES3 module pattern if you want:
+
+```javascript
+function MyComponent(initialProps) {
+  return {
+    state: {value: initialProps.initialValue},
+    render: function () {
+      return <span className={this.state.value} />;
+    },
+  };
+}
+```
diff --git a/beta/src/content/blog/2015/02/18/react-conf-roundup-2015.md b/beta/src/content/blog/2015/02/18/react-conf-roundup-2015.md
new file mode 100644
index 000000000..755060b47
--- /dev/null
+++ b/beta/src/content/blog/2015/02/18/react-conf-roundup-2015.md
@@ -0,0 +1,274 @@
+---
+title: React.js Conf Round-up 2015
+author: [steveluscher]
+---
+
+It was a privilege to welcome the React community to Facebook HQ on January 28–29 for the first-ever React.js Conf, and a pleasure to be able to unveil three new technologies that we've been using internally at Facebook for some time: GraphQL, Relay, and React Native.
+
+## The talks {/*the-talks*/}
+
+<div class="skinny-row">
+  <div class="skinny-col">
+    <h3 style={{ marginTop: 0 }}><a class="anchor" name="talk-keynote"></a>Keynote <a class="hash-link" href="#talk-keynote">#</a></h3>
+    <p>
+      <strong>Tom Occhino</strong> opened with a history of how React came to be, before announcing Facebook’s answer to a long-looming what-if question: what if we could use React to target something other than the DOM?
+    </p>
+  </div>
+  <div class="skinny-col">
+    <iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/KVZ-P-ZI6W4" frameborder="0" allowfullscreen></iframe>
+  </div>
+</div>
+
+<div class="skinny-row">
+  <div class="skinny-col">
+    <h3 style={{ marginTop: 0 }}><a class="anchor" name="talk-tweak"></a>Tweaking in real time <a class="hash-link" href="#talk-tweak">#</a></h3>
+    <p>
+      <strong>Brenton Simpson</strong> showed us how eBay brings Bret Victor’s feedback loop to your favorite editor using webpack, react-hot-loader, and <a href="https://github.com/appsforartists/ambidex">Ambidex</a>.
+    </p>
+  </div>
+  <div class="skinny-col">
+    <iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/yaymfLj5tjA" frameborder="0" allowfullscreen></iframe>
+  </div>
+</div>
+
+<div class="skinny-row">
+  <div class="skinny-col">
+    <h3 style={{ marginTop: 0 }}><a class="anchor" name="talk-ast"></a>Abstract Syntax Trees <a class="hash-link" href="#talk-ast">#</a></h3>
+    <p>
+      <strong>Gurdas Nijor</strong> showed us how we can leverage some conventions of React to perform source code transformations that unlock an inspirational set of use cases.
+    </p>
+  </div>
+  <div class="skinny-col">
+    <iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/OZGgVxFxSIs" frameBorder="0" allowFullScreen></iframe>
+  </div>
+</div>
+
+<div class="skinny-row">
+  <div class="skinny-col">
+    <h3 style={{ marginTop: 0 }}><a class="anchor" name="talk-relay-graphql"></a>Relay and GraphQL <a class="hash-link" href="#talk-relay-graphql">#</a></h3>
+    <p>
+      <strong>Daniel Schafer</strong> and <strong>Jing Chen</strong> showed us how Facebook approaches data fetching with React, giving us an early peek at the forthcoming duo of Relay and GraphQL.
+    </p>
+  </div>
+  <div class="skinny-col">
+    <iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/9sc8Pyc51uU" frameborder="0" allowfullscreen></iframe>
+  </div>
+</div>
+
+<div class="skinny-row">
+  <div class="skinny-col">
+    <h3 style={{ marginTop: 0 }}><a class="anchor" name="talk-channels"></a>Channels <a class="hash-link" href="#talk-channels">#</a></h3>
+    <p>
+      <strong>James Long</strong> explores what might happen if we introduce channels, a new style of coordinating actions, to React.
+    </p>
+  </div>
+  <div class="skinny-col">
+    <iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/W2DgDNQZOwo" frameborder="0" allowfullscreen></iframe>
+  </div>
+</div>
+
+<div class="skinny-row">
+  <div class="skinny-col">
+    <h3 style={{ marginTop: 0 }}><a class="anchor" name="talk-router"></a>React Router <a class="hash-link" href="#talk-router">#</a></h3>
+    <p>
+      <strong>Michael Jackson</strong> reminded us that URLs should be part of our design process, and showed us how <a href="https://github.com/rackt/react-router">react-router</a> can help to manage the transitions between them.
+    </p>
+  </div>
+  <div class="skinny-col">
+    <iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/XZfvW1a8Xac" frameborder="0" allowfullscreen></iframe>
+  </div>
+</div>
+
+<div class="skinny-row">
+  <div class="skinny-col">
+    <h3 style={{ marginTop: 0 }}><a class="anchor" name="talk-full-stack-flux"></a>Full-stack Flux <a class="hash-link" href="#talk-full-stack-flux">#</a></h3>
+    <p>
+      <strong>Pete Hunt</strong> showed us how a Flux approach can help us scale actions and questions on the backend in addition to the frontend.
+    </p>
+  </div>
+  <div class="skinny-col">
+    <iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/KtmjkCuV-EU" frameborder="0" allowfullscreen></iframe>
+  </div>
+</div>
+
+<div class="skinny-row">
+  <div class="skinny-col">
+    <h3 style={{ marginTop: 0 }}><a class="anchor" name="talk-performance"></a>High-performance <a class="hash-link" href="#talk-performance">#</a></h3>
+    <p>
+      <strong>Jason Bonta</strong> showed us how complex user interfaces can get, and how his team keeps them performant as they scale. He also had the pleasure of open-sourcing his team’s work on <a href="https://facebook.github.io/fixed-data-table/">FixedDataTable</a>.
+    </p>
+  </div>
+  <div class="skinny-col">
+    <iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/KYzlpRvWZ6c" frameborder="0" allowfullscreen></iframe>
+  </div>
+</div>
+
+<div class="skinny-row">
+  <div class="skinny-col">
+    <h3 style={{ marginTop: 0 }}><a class="anchor" name="talk-intl"></a>FormatJS and react-intl <a class="hash-link" href="#talk-intl">#</a></h3>
+    <p>
+      <strong>Eric Ferraiuolo</strong> showed how you can bring your app to a worldwide audience using a series of polyfills and emerging ECMAScript APIs.
+    </p>
+  </div>
+  <div class="skinny-col">
+    <iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/Sla-DkvmIHY" frameborder="0" allowfullscreen></iframe>
+  </div>
+</div>
+
+<div class="skinny-row">
+  <div class="skinny-col">
+    <h3 style={{ marginTop: 0 }}><a class="anchor" name="talk-hype"></a>Hype! <a class="hash-link" href="#talk-hype">#</a></h3>
+    <p>
+      <strong>Ryan Florence</strong> showed us how easy it is to transition from a career selling life insurance, to a burgeoning one as a software developer. All you have to do is to learn how to say “yes.”
+    </p>
+  </div>
+  <div class="skinny-col">
+    <iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/z5e7kWSHWTg" frameborder="0" allowfullscreen></iframe>
+  </div>
+</div>
+
+<div class="skinny-row">
+  <div class="skinny-col">
+    <h3 style={{ marginTop: 0 }}><a class="anchor" name="talk-native"></a>React Native <a class="hash-link" href="#talk-native">#</a></h3>
+    <p>
+      <strong>Christopher Chedeau</strong> showed us how to bring the developer experience of working with React on the web to native app development, using React Native.
+    </p>
+  </div>
+  <div class="skinny-col">
+    <iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/7rDsRXj9-cU" frameborder="0" allowfullscreen></iframe>
+  </div>
+</div>
+
+<div class="skinny-row">
+  <div class="skinny-col">
+    <h3 style={{ marginTop: 0 }}><a class="anchor" name="talk-components"></a>Components <a class="hash-link" href="#talk-components">#</a></h3>
+    <p>
+      <strong>Andrew Rota</strong> explained how React and Web Components can work together, and how to avoid some common pitfalls.
+    </p>
+  </div>
+  <div class="skinny-col">
+    <iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/g0TD0efcwVg" frameborder="0" allowfullscreen></iframe>
+  </div>
+</div>
+
+<div class="skinny-row">
+  <div class="skinny-col">
+    <h3 style={{ marginTop: 0 }}><a class="anchor" name="talk-immutable"></a>Immutability <a class="hash-link" href="#talk-immutable">#</a></h3>
+    <p>
+      <strong>Lee Byron</strong> led a master-class on persistent immutable data structures, showing us the world of possibility that they can unlock for your software, and perhaps JavaScript in general.
+    </p>
+  </div>
+  <div class="skinny-col">
+    <iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/I7IdS-PbEgI" frameborder="0" allowfullscreen></iframe>
+  </div>
+</div>
+
+<div class="skinny-row">
+  <div class="skinny-col">
+    <h3 style={{ marginTop: 0 }}><a class="anchor" name="talk-gibbon"></a>Beyond the DOM <a class="hash-link" href="#talk-gibbon">#</a></h3>
+    <p>
+      <strong>Jafar Husain</strong> told us a story about how Netflix was able to push React into places where the DOM could not go.
+    </p>
+  </div>
+  <div class="skinny-col">
+    <iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/eNC0mRYGWgc" frameborder="0" allowfullscreen></iframe>
+  </div>
+</div>
+
+<div class="skinny-row">
+  <div class="skinny-col">
+    <h3 style={{ marginTop: 0 }}><a class="anchor" name="talk-visualization"></a>Data Visualization <a class="hash-link" href="#talk-visualization">#</a></h3>
+    <p>
+      <strong>Zach Nation</strong> showed us how we can produce visualizations from over 45 million data points without breaking a sweat.
+    </p>
+  </div>
+  <div class="skinny-col">
+    <iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/2ii1lEkIv1s" frameborder="0" allowfullscreen></iframe>
+  </div>
+</div>
+
+<div class="skinny-row">
+  <div class="skinny-col">
+    <h3 style={{ marginTop: 0 }}><a class="anchor" name="talk-refracted"></a>React Refracted <a class="hash-link" href="#talk-refracted">#</a></h3>
+    <p>
+      <strong>David Nolen</strong> gave us a view of React from a non-JavaScript perspective, challenging some common intuition along the way.
+    </p>
+  </div>
+  <div class="skinny-col">
+    <iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/5hGHdETNteE" frameborder="0" allowfullscreen></iframe>
+  </div>
+</div>
+
+<div class="skinny-row">
+  <div class="skinny-col">
+    <h3 style={{ marginTop: 0 }}><a class="anchor" name="talk-flux-panel"></a>Flux Panel <a class="hash-link" href="#talk-flux-panel">#</a></h3>
+    <p>
+      <strong>Bill Fisher</strong> coordinated a Flux panel together with <strong>Michael Ridgway</strong>, <strong>Spike Brehm</strong>, <strong>Andres Suarez</strong>, <strong>Jing Chen</strong>, <strong>Ian Obermiller</strong>, and <strong>Kyle Davis</strong>.
+    </p>
+  </div>
+  <div class="skinny-col">
+    <iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/LTj4O7WJJ98" frameborder="0" allowfullscreen></iframe>
+  </div>
+</div>
+
+<div class="skinny-row">
+  <div class="skinny-col">
+    <h3 style={{ marginTop: 0 }}><a class="anchor" name="talk-communication"></a>Component communication <a class="hash-link" href="#talk-communication">#</a></h3>
+    <p>
+      <strong>Bonnie Eisenman</strong> led us through the ‘adapter’ approach to inter-component communication taken by her team at Codecademy.
+    </p>
+  </div>
+  <div class="skinny-col">
+    <iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/ZM6wXoFTY3o" frameborder="0" allowfullscreen></iframe>
+  </div>
+</div>
+
+<div class="skinny-row">
+  <div class="skinny-col">
+    <h3 style={{ marginTop: 0 }}><a class="anchor" name="talk-typescript"></a>Flow and TypeScript <a class="hash-link" href="#talk-typescript">#</a></h3>
+    <p>
+      <strong>James Brantly</strong> demonstrated how we can reap the benefits of static typing using both Flow and TypeScript.
+    </p>
+  </div>
+  <div class="skinny-col">
+    <iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/9PTa9-PPVAc" frameborder="0" allowfullscreen></iframe>
+  </div>
+</div>
+
+<div class="skinny-row">
+  <div class="skinny-col">
+    <h3 style={{ marginTop: 0 }}><a class="anchor" name="talk-qa"></a>Core Team Q&amp;A <a class="hash-link" href="#talk-qa">#</a></h3>
+    <p>
+      <strong>Tom Occhino</strong>, <strong>Sophie Alpert</strong>, <strong>Lee Byron</strong>, <strong>Christopher Chedeau</strong>, <strong>Sebastian Markbåge</strong>, <strong>Jing Chen</strong>, and <strong>Dan Schafer</strong> closed the conference with a Q&amp;A session.
+    </p>
+  </div>
+  <div class="skinny-col">
+    <iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/EPpkboSKvPI" frameborder="0" allowfullscreen></iframe>
+  </div>
+</div>
+
+## Reactions {/*reactions*/}
+
+The conference is over, but the conversation has just begun.
+
+**Mihai Parparita** detailed his efforts to [hack his way to a React.js Conf ticket](http://blog.persistent.info/2014/12/html-munging-my-way-to-reactjs-conf.html); **James Long** blogged about [his first encounter with React Native](http://jlongster.com/First-Impressions-using-React-Native); **Eric Florenzano** talked about how he perceives the [impact of Relay, GraphQL, and React Native](https://medium.com/@ericflo/facebook-just-taught-us-all-how-to-build-websites-51f1e7e996f2) on software development; **Margaret Staples** blogged about her experience of [being on-campus at Facebook HQ](http://deadlugosi.blogspot.com/2015/02/facebook-gave-me-ice-cream.html); **Jeff Barczewski** tied his experience of attending the conference up with a bow in this [blog post filled with photos, videos, and links](http://codewinds.com/blog/2015-02-04-reactjs-conf.html); **Kevin Old** left us with [his takeaways](http://kevinold.com/2015/01/31/takeaways-from-reactjs-conf-2015.html); **Paul Wittmann** found React Native [freshly on his radar](http://www.railslove.com/stories/fresh-on-our-radar-react-native); and finally, undeterred by not being able to attend the conference in person, **Justin Ball** [summarized it from afar](http://www.justinball.com/2015/02/02/i-didn't-attend-react.js-conf.html).
+
+And, in case you missed a session, you can borrow **Michael Chan’s** [drawings](http://chantastic.io/2015-reactjs-conf/), **Mihai Parparita’s** [summary](https://quip.com/uJQeABv7nkFN), or **Shaohua Zhou’s** [day 1](http://getshao.com/2015/01/29/react-js-conf-notes-day1/) / [day 2](http://getshao.com/2015/01/29/react-js-conf-notes-day-2/) notes.
+
+<div class="skinny-row">
+  <div class="skinny-col">
+    <blockquote class="twitter-tweet" lang="en"><p>Notes from <a href="https://twitter.com/dlschafer">@dlschafer</a> and <a href="https://twitter.com/jingc">@jingc</a>&#39;s <a href="https://twitter.com/hashtag/reactjsconf?src=hash">#reactjsconf</a> talk &quot;Data fetching for React applications at Facebook&quot; <a href="http://t.co/IUZUbDCDMQ">pic.twitter.com/IUZUbDCDMQ</a></p>&mdash; Michael Chan (@chantastic) <a href="https://twitter.com/chantastic/status/560538533161472000">January 28, 2015</a></blockquote>
+    <blockquote class="twitter-tweet" lang="en"><p>This is just magical (in the good way)… GraphQL + Relay is amazing. <a href="https://twitter.com/hashtag/reactjsconf?src=hash">#reactjsconf</a></p>&mdash; Chris Williams (@voodootikigod) <a href="https://twitter.com/voodootikigod/status/560533225395589120">January 28, 2015</a></blockquote>
+    <blockquote class="twitter-tweet" lang="en"><p>These… these are my people. :) <a href="https://twitter.com/hashtag/reactjsconf?src=hash">#reactjsconf</a></p>&mdash; Thomas Beirne (@Beirnet) <a href="https://twitter.com/Beirnet/status/560317879501848576">January 28, 2015</a></blockquote>
+  </div>
+  <div class="skinny-col">
+    <blockquote class="twitter-tweet" lang="en"><p>Humbled by the React team and community. Found <a href="https://twitter.com/hashtag/reactjsconf?src=hash">#reactjsconf</a> very mindful, practical and just real.</p>&mdash; xnoɹǝʃ uɐıɹq (@brianleroux) <a href="https://twitter.com/brianleroux/status/560972130112655360">January 30, 2015</a></blockquote>
+    <blockquote class="twitter-tweet" lang="en"><p>I say with confidence as a former UIKit author: [React&#39;s model for the UI layer is vastly better than UIKit&#39;s. React Native is a *huge* deal.</p>&mdash; Andy Matuschak (@andy_matuschak) <a href="https://twitter.com/andy_matuschak/status/560511204867575808">January 28, 2015</a></blockquote>]
+    <blockquote class="twitter-tweet" lang="en"><p><a href="https://twitter.com/hashtag/reactjsconf?src=hash">#reactjsconf</a> was incredible. Amazing project stewardship and community. Boring prediction, React Native sends adoption vertical in 2015.</p>&mdash; David Nolen (@swannodette) <a href="https://twitter.com/swannodette/status/561232290273980416">January 30, 2015</a></blockquote>
+    <blockquote class="twitter-tweet" lang="en"><p>I really love the community shout outs by <a href="https://twitter.com/Vjeux">@vjeux</a> between talks at <a href="https://twitter.com/hashtag/reactjsconf?src=hash">#reactjsconf</a>!</p>&mdash; Andrew Rota (@AndrewRota) <a href="https://twitter.com/AndrewRota/status/560927339522297856">January 29, 2015</a></blockquote>
+  </div>
+</div>
+
+**All proceeds from React.js Conf 2015 were donated to the wonderful programs at [code.org](http://code.org)**. These programs aim to increase access to the field of computer science by underrepresented members of our community. Watch this video to learn more.
+
+<iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/FC5FbmsH4fw" frameborder="0" allowfullscreen></iframe>
diff --git a/beta/src/content/blog/2015/02/20/introducing-relay-and-graphql.md b/beta/src/content/blog/2015/02/20/introducing-relay-and-graphql.md
new file mode 100644
index 000000000..4c3dde9bb
--- /dev/null
+++ b/beta/src/content/blog/2015/02/20/introducing-relay-and-graphql.md
@@ -0,0 +1,62 @@
+---
+title: 'Introducing Relay and GraphQL'
+author: [wincent]
+---
+
+## Data fetching for React applications {/*data-fetching-for-react-applications*/}
+
+There's more to building an application than creating a user interface. Data fetching is still a tricky problem, especially as applications become more complicated. At [React.js Conf](http://conf.reactjs.com/) we announced two projects we've created at Facebook to make data fetching simple for developers, even as a product grows to include dozens of contributors and the application becomes as complex as Facebook itself.
+
+<iframe width="650" height="315" src="https://www.youtube-nocookie.com/embed/9sc8Pyc51uU" frameborder="0" allowfullscreen></iframe>
+
+The two projects &mdash; Relay and GraphQL &mdash; have been in use in production at Facebook for some time, and we're excited to be bringing them to the world as open source in the future. In the meantime, we wanted to share some additional information about the projects here.
+
+<script async class="speakerdeck-embed" data-id="7af7c2f33bf9451a892dcd91de55b7c2" data-ratio="1.29456384323641" src="//speakerdeck.com/assets/embed.js"></script>
+
+## What is Relay? {/*what-is-relay*/}
+
+Relay is a new framework from Facebook that provides data-fetching functionality for React applications. It was announced at React.js Conf (January 2015).
+
+Each component specifies its own data dependencies declaratively using a query language called GraphQL. The data is made available to the component via properties on `this.props`.
+
+Developers compose these React components naturally, and Relay takes care of composing the data queries into efficient batches, providing each component with exactly the data that it requested (and no more), updating those components when the data changes, and maintaining a client-side store (cache) of all data.
+
+## What is GraphQL? {/*what-is-graphql*/}
+
+GraphQL is a data querying language designed to describe the complex, nested data dependencies of modern applications. It's been in production use in Facebook's native apps for several years.
+
+On the server, we configure the GraphQL system to map queries to underlying data-fetching code. This configuration layer allows GraphQL to work with arbitrary underlying storage mechanisms. Relay uses GraphQL as its query language, but it is not tied to a specific implementation of GraphQL.
+
+## The value proposition {/*the-value-proposition*/}
+
+Relay was born out of our experiences building large applications at Facebook. Our overarching goal is to enable developers to create correct, high-performance applications in a straightforward and obvious way. The design enables even large teams to make changes with a high degree of isolation and confidence. Fetching data is hard, dealing with ever-changing data is hard, and performance is hard. Relay aims to reduce these problems to simple ones, moving the tricky bits into the framework and freeing you to concentrate on building your application.
+
+By co-locating the queries with the view code, the developer can reason about what a component is doing by looking at it in isolation; it's not necessary to consider the context where the component was rendered in order to understand it. Components can be moved anywhere in a render hierarchy without having to apply a cascade of modifications to parent components or to the server code which prepares the data payload.
+
+Co-location leads developers to fall into the "pit of success", because they get exactly the data they asked for and the data they asked for is explicitly defined right next to where it is used. This means that performance becomes the default (it becomes much harder to accidentally over-fetch), and components are more robust (under-fetching is also less likely for the same reason, so components won't try to render missing data and blow up at runtime).
+
+Relay provides a predictable environment for developers by maintaining an invariant: a component won't be rendered until all the data it requested is available. Additionally, queries are defined statically (ie. we can extract queries from a component tree before rendering) and the GraphQL schema provides an authoritative description of what queries are valid, so we can validate queries early and fail fast when the developer makes a mistake.
+
+Only the fields of an object that a component explicitly asks for will be accessible to that component, even if other fields are known and cached in the store (because another component requested them). This makes it impossible for implicit data dependency bugs to exist latently in the system.
+
+By handling all data-fetching via a single abstraction, we're able to handle a bunch of things that would otherwise have to be dealt with repeatedly and pervasively across the application:
+
+- **Performance:** All queries flow through the framework code, where things that would otherwise be inefficient, repeated query patterns get automatically collapsed and batched into efficient, minimal queries. Likewise, the framework knows which data have been previously requested, or for which requests are currently "in flight", so queries can be automatically de-duplicated and the minimal queries can be produced.
+- **Subscriptions:** All data flows into a single store, and all reads from the store are via the framework. This means the framework knows which components care about which data and which should be re-rendered when data changes; components never have to set up individual subscriptions.
+- **Common patterns:** We can make common patterns easy. Pagination is the example that [Jing](https://twitter.com/jingc) gave at the conference: if you have 10 records initially, getting the next page just means declaring you want 15 records in total, and the framework automatically constructs the minimal query to grab the delta between what you have and what you need, requests it, and re-renders your view when the data become available.
+- **Simplified server implementation:** Rather than having a proliferation of end-points (per action, per route), a single GraphQL endpoint can serve as a facade for any number of underlying resources.
+- **Uniform mutations:** There is one consistent pattern for performing mutations (writes), and it is conceptually baked into the data querying model itself. You can think of a mutation as a query with side-effects: you provide some parameters that describe the change to be made (eg. attaching a comment to a record) and a query that specifies the data you'll need to update your view of the world after the mutation completes (eg. the comment count on the record), and the data flows through the system using the normal flow. We can do an immediate "optimistic" update on the client (ie. update the view under the assumption that the write will succeed), and finally commit it, retry it or roll it back in the event of an error when the server payload comes back.
+
+## How does it relate to Flux? {/*how-does-it-relate-to-flux*/}
+
+In some ways Relay is inspired by Flux, but the mental model is much simpler. Instead of multiple stores, there is one central store that caches all GraphQL data. Instead of explicit subscriptions, the framework itself can track which data each component requests, and which components should be updated whenever the data change. Instead of actions, modifications take the form of mutations.
+
+At Facebook, we have apps built entirely using Flux, entirely using Relay, or with both. One pattern we see emerging is letting Relay manage the bulk of the data flow for an application, but using Flux stores on the side to handle a subset of application state.
+
+## Open source plans {/*open-source-plans*/}
+
+We're working very hard right now on getting both GraphQL (a spec, and a reference implementation) and Relay ready for public release (no specific dates yet, but we are super excited about getting these out there).
+
+In the meantime, we'll be providing more and more information in the form of blog posts (and in [other channels](https://gist.github.com/wincent/598fa75e22bdfa44cf47)). As we get closer to the open source release, you can expect more concrete details, syntax and API descriptions and more.
+
+Watch this space!
diff --git a/beta/src/content/blog/2015/02/24/react-v0.13-rc1.md b/beta/src/content/blog/2015/02/24/react-v0.13-rc1.md
new file mode 100644
index 000000000..ef0dbc345
--- /dev/null
+++ b/beta/src/content/blog/2015/02/24/react-v0.13-rc1.md
@@ -0,0 +1,75 @@
+---
+title: 'React v0.13 RC'
+author: [zpao]
+date: 2015-02-24 14:00
+---
+
+Over the weekend we pushed out our first (and hopefully only) release candidate for React v0.13!
+
+We've talked a little bit about the changes that are coming. The splashiest of these changes is support for ES6 Classes. You can read more about this in [our beta announcement](/blog/2015/01/27/react-v0.13.0-beta-1.html). We're really excited about this! Sebastian also posted earlier this morning about [some of the other changes coming focused around ReactElement](/blog/2015/02/24/streamlining-react-elements.html). The changes we've been working on there will hopefully enable lots of improvements to performance and developer experience.
+
+The release candidate is available for download:
+
+- **React**  
+  Dev build with warnings: https://fb.me/react-0.13.0-rc1.js  
+  Minified build for production: https://fb.me/react-0.13.0-rc1.min.js
+- **React with Add-Ons**  
+  Dev build with warnings: https://fb.me/react-with-addons-0.13.0-rc1.js  
+  Minified build for production: https://fb.me/react-with-addons-0.13.0-rc1.min.js
+- **In-Browser JSX transformer**  
+  https://fb.me/JSXTransformer-0.13.0-rc1.js
+
+We've also published version `0.13.0-rc1` of the `react` and `react-tools` packages on npm and the `react` package on bower.
+
+---
+
+## Changelog {/*changelog*/}
+
+### React Core {/*react-core*/}
+
+#### Breaking Changes {/*breaking-changes*/}
+
+- Mutating `props` after an element is created is deprecated and will cause warnings in development mode; future versions of React will incorporate performance optimizations assuming that props aren't mutated
+- Static methods (defined in `statics`) are no longer autobound to the component class
+- `ref` resolution order has changed slightly such that a ref to a component is available immediately after its `componentDidMount` method is called; this change should be observable only if your component calls a parent component's callback within your `componentDidMount`, which is an anti-pattern and should be avoided regardless
+- Calls to `setState` in life-cycle methods are now always batched and therefore asynchronous. Previously the first call on the first mount was synchronous.
+- `setState` and `forceUpdate` on an unmounted component now warns instead of throwing. That avoids a possible race condition with Promises.
+- Access to most internal properties has been completely removed, including `this._pendingState` and `this._rootNodeID`.
+
+#### New Features {/*new-features*/}
+
+- Support for using ES6 classes to build React components; see the [v0.13.0 beta 1 notes](/blog/2015/01/27/react-v0.13.0-beta-1.html) for details
+- Added new top-level API `React.findDOMNode(component)`, which should be used in place of `component.getDOMNode()`. The base class for ES6-based components will not have `getDOMNode`. This change will enable some more patterns moving forward.
+- New `ref` style, allowing a callback to be used in place of a name: `<Photo ref={(c) => this._photo = c} />` allows you to reference the component with `this._photo` (as opposed to `ref="photo"` which gives `this.refs.photo`)
+- `this.setState()` can now take a function as the first argument for transactional state updates, such as `this.setState((state, props) => ({count: state.count + 1}));` -- this means that you no longer need to use `this._pendingState`, which is now gone.
+- Support for iterators and immutable-js sequences as children
+
+#### Deprecations {/*deprecations*/}
+
+- `ComponentClass.type` is deprecated. Just use `ComponentClass` (usually as `element.type === ComponentClass`)
+- Some methods that are available on `createClass`-based components are removed or deprecated from ES6 classes (for example, `getDOMNode`, `setProps`, `replaceState`).
+
+### React with Add-Ons {/*react-with-add-ons*/}
+
+#### Deprecations {/*deprecations-1*/}
+
+- `React.addons.classSet` is now deprecated. This functionality can be replaced with several freely available modules. [classnames](https://www.npmjs.com/package/classnames) is one such module.
+
+### React Tools {/*react-tools*/}
+
+#### Breaking Changes {/*breaking-changes-1*/}
+
+- When transforming ES6 syntax, `class` methods are no longer enumerable by default, which requires `Object.defineProperty`; if you support browsers such as IE8, you can pass `--target es3` to mirror the old behavior
+
+#### New Features {/*new-features-1*/}
+
+- `--target` option is available on the jsx command, allowing users to specify and ECMAScript version to target.
+  - `es5` is the default.
+  - `es3` restored the previous default behavior. An additional transform is added here to ensure the use of reserved words as properties is safe (eg `this.static` will become `this['static']` for IE8 compatibility).
+- The transform for the call spread syntax has also been enabled.
+
+### JSX {/*jsx*/}
+
+#### Breaking Changes {/*breaking-changes-2*/}
+
+- A change was made to how some JSX was parsed, specifically around the use of `>` or `}` when inside an element. Previously it would be treated as a string but now it will be treated as a parse error. We will be releasing a standalone executable to find and fix potential issues in your JSX code.
diff --git a/beta/src/content/blog/2015/02/24/streamlining-react-elements.md b/beta/src/content/blog/2015/02/24/streamlining-react-elements.md
new file mode 100644
index 000000000..b36c8ec41
--- /dev/null
+++ b/beta/src/content/blog/2015/02/24/streamlining-react-elements.md
@@ -0,0 +1,234 @@
+---
+title: 'Streamlining React Elements'
+author: [sebmarkbage]
+date: 2015-02-24 11:00
+---
+
+React v0.13 is right around the corner and so we wanted to discuss some upcoming changes to ReactElement. In particular, we added several warnings to some esoteric use cases of ReactElement. There are no runtime behavior changes for ReactElement - we're adding these warnings in the hope that we can change some behavior in v0.14 if the changes are valuable to the community.
+
+If you use React in an idiomatic way, chances are, you’ll never see any of these warnings. In that case, you can skip this blog post. You can just enjoy the benefits! These changes will unlock simplified semantics, better error messages, stack traces and compiler optimizations!
+
+## Immutable Props {/*immutable-props*/}
+
+In React 0.12, the props object was mutable. It allows you to do patterns like this:
+
+```js
+var element = <Foo bar={false} />;
+if (shouldUseFoo) {
+  element.props.foo = 10;
+  element.props.bar = true;
+}
+```
+
+The problem is that we don’t have a convenient way to tell when you’re done mutating.
+
+### Problem: Mutating Props You Don’t Own {/*problem-mutating-props-you-dont-own*/}
+
+If you mutate something, you destroy the original value. Therefore, there is nothing to diff against. Imagine something like this:
+
+```js
+var element = this.props.child;
+element.props.count = this.state.count;
+return element;
+```
+
+You take a ReactElement through `props.child` and mutate its property before rendering it. If this component's state updates, this render function won't actually get a new ReactElement in `props.child`. It will be the same one. You're mutating the same props.
+
+You could imagine that this would work. However, this disables the ability for any component to use `shouldComponentUpdate`. It looks like the component never changed because the previous value is always the same as the next one. Since the DOM layer does diffing, this pattern doesn't even work in this case. The change will never propagate down to the DOM except the first time.
+
+Additionally, if this element is reused in other places or used to switch back and forth between two modes, then you have all kinds of weird race conditions.
+
+It has always been broken to mutate the props of something passed into you. The problem is that we can’t warn you about this special case if you accidentally do this.
+
+### Problem: Too Late Validation {/*problem-too-late-validation*/}
+
+In React 0.12, we do PropType validation very deep inside React during mounting. This means that by the time you get an error, the debugger stack is long gone. This makes it difficult to find complex issues during debugging. We have to do this since it is fairly common for extra props to be added between the call to React.createElement and the mount time. So the type is incomplete until then.
+
+The static analysis in Flow is also impaired by this. There is no convenient place in the code where Flow can determine that the props are finalized.
+
+### Solution: Immutable Props {/*solution-immutable-props*/}
+
+Therefore, we would like to be able to freeze the element.props object so that it is immediately immutable at the JSX callsite (or createElement). In React 0.13 we will start warning you if you mutate `element.props` after this point.
+
+You can generally refactor these pattern to simply use two different JSX calls:
+
+```js
+if (shouldUseFoo) {
+  return <Foo foo={10} bar={true} />;
+} else {
+  return <Foo bar={false} />;
+}
+```
+
+However, if you really need to dynamically build up your props you can just use a temporary object and spread it into JSX:
+
+```js
+var props = {bar: false};
+if (shouldUseFoo) {
+  props.foo = 10;
+  props.bar = true;
+}
+return <Foo {...props} />;
+```
+
+It is still OK to do deep mutations of objects. E.g:
+
+```js
+return <Foo nestedObject={this.state.myModel} />;
+```
+
+In this case it's still ok to mutate the myModel object in state. We recommend that you use fully immutable models. E.g. by using immutable-js. However, we realize that mutable models are still convenient in many cases. Therefore we're only considering shallow freezing the props object that belongs to the ReactElement itself. Not nested objects.
+
+### Solution: Early PropType Warnings {/*solution-early-proptype-warnings*/}
+
+We will also start warning you for PropTypes at the JSX or createElement callsite. This will help debugging as you’ll have the stack trace right there. Similarly, Flow also validates PropTypes at this callsite.
+
+Note: There are valid patterns that clones a ReactElement and adds additional props to it. In that case these additional props needs to be optional.
+
+```js
+var element1 = <Foo />; // extra prop is optional
+var element2 = React.addons.cloneWithProps(element1, {extra: 'prop'});
+```
+
+## Owner {/*owner*/}
+
+In React each child has both a "parent" and an “owner”. The owner is the component that created a ReactElement. I.e. the render method which contains the JSX or createElement callsite.
+
+```js
+class Foo {
+  render() {
+    return (
+      <div>
+        <span />
+      </div>
+    );
+  }
+}
+```
+
+In this example, the owner of the `span` is `Foo` but the parent is the `div`.
+
+There is also an undocumented feature called "context" that also relies on the concept of an “owner” to pass hidden props down the tree.
+
+### Problem: The Semantics are Opaque and Confusing {/*problem-the-semantics-are-opaque-and-confusing*/}
+
+The problem is that these are hidden artifacts attached to the ReactElement. In fact, you probably didn’t even know about it. It silently changes semantics. Take this for example:
+
+```js
+var foo = <input className="foo" />;
+class Component {
+  render() {
+    return bar ? <input className="bar" /> : foo;
+  }
+}
+```
+
+These two inputs have different owners, therefore React will not keep its state when the conditional switches. There is nothing in the code to indicate that. Similarly, if you use `React.addons.cloneWithProps`, the owner changes.
+
+### Problem: Timing Matters {/*problem-timing-matters*/}
+
+The owner is tracked by the currently executing stack. This means that the semantics of a ReactElement varies depending on when it is executed. Take this example:
+
+```js
+class A {
+  render() {
+    return <B renderer={(text) => <span>{text}</span>} />;
+  }
+}
+class B {
+  render() {
+    return this.props.renderer('foo');
+  }
+}
+```
+
+The owner of the `span` is actually `B`, not `A` because of the timing of the callback. This all adds complexity and suffers from similar problems as mutation.
+
+### Problem: It Couples JSX to React {/*problem-it-couples-jsx-to-react*/}
+
+Have you wondered why JSX depends on React? Couldn’t the transpiler have that built-in to its runtime? The reason you need to have `React.createElement` in scope is because we depend on internal state of React to capture the current "owner". Without this, you wouldn’t need to have React in scope.
+
+### Solution: Make Context Parent-Based Instead of Owner-Based {/*solution-make-context-parent-based-instead-of-owner-based*/}
+
+The first thing we’re doing is warning you if you’re using the "owner" feature in a way that relies on it propagating through owners. Instead, we’re planning on propagating it through parents to its children. In almost all cases, this shouldn’t matter. In fact, parent-based contexts is simply a superset.
+
+### Solution: Remove the Semantic Implications of Owner {/*solution-remove-the-semantic-implications-of-owner*/}
+
+It turns out that there are very few cases where owners are actually important part of state-semantics. As a precaution, we’ll warn you if it turns out that the owner is important to determine state. In almost every case this shouldn’t matter. Unless you’re doing some weird optimizations, you shouldn’t see this warning.
+
+### Pending: Change the refs Semantics {/*pending-change-the-refs-semantics*/}
+
+Refs are still based on "owner". We haven’t fully solved this special case just yet.
+
+In 0.13 we introduced a new callback-refs API that doesn’t suffer from these problems but we’ll keep on a nice declarative alternative to the current semantics for refs. As always, we won’t deprecate something until we’re sure that you’ll have a nice upgrade path.
+
+## Keyed Objects as Maps {/*keyed-objects-as-maps*/}
+
+In React 0.12, and earlier, you could use keyed objects to provide an external key to an element or a set. This pattern isn’t actually widely used. It shouldn’t be an issue for most of you.
+
+```js
+<div>{{a: <span />, b: <span />}}</div>
+```
+
+### Problem: Relies on Enumeration Order {/*problem-relies-on-enumeration-order*/}
+
+The problem with this pattern is that it relies on enumeration order of objects. This is technically unspecified, even though implementations now agree to use insertion order. Except for the special case when numeric keys are used.
+
+### Problem: Using Objects as Maps is Bad {/*problem-using-objects-as-maps-is-bad*/}
+
+It is generally accepted that using objects as maps screw up type systems, VM optimizations, compilers etc. It is much better to use a dedicated data structure like ES6 Maps.
+
+More importantly, this can have important security implications. For example this has a potential security problem:
+
+```js
+var children = {};
+items.forEach((item) => (children[item.title] = <span />));
+return <div>{children}</div>;
+```
+
+Imagine if `item.title === '__proto__'` for example.
+
+### Problem: Can’t be Differentiated from Arbitrary Objects {/*problem-cant-be-differentiated-from-arbitrary-objects*/}
+
+Since these objects can have any keys with almost any value, we can’t differentiate them from a mistake. If you put some random object, we will try our best to traverse it and render it, instead of failing with a helpful warning. In fact, this is one of the few places where you can accidentally get an infinite loop in React.
+
+To differentiate ReactElements from one of these objects, we have to tag them with `_isReactElement`. This is another issue preventing us from inlining ReactElements as simple object literals.
+
+### Solution: Just use an Array and `key={...}` {/*solution-just-use-an-array-and-key*/}
+
+Most of the time you can just use an array with keyed ReactElements.
+
+```js
+var children = items.map((item) => <span key={item.title} />);
+<div>{children}</div>;
+```
+
+### Solution: React.addons.createFragment {/*solution-reactaddonscreatefragment*/}
+
+However, this is not always possible if you’re trying to add a prefix key to an unknown set (e.g. this.props.children). It is also not always the easiest upgrade path. Therefore, we are adding a helper to `React.addons` called `createFragment()`. This accepts a keyed object and returns an opaque type.
+
+```js
+<div>{React.addons.createFragment({a: <div />, b: this.props.children})}</div>
+```
+
+The exact signature of this kind of fragment will be determined later. It will likely be some kind of immutable sequence.
+
+Note: This will still not be valid as the direct return value of `render()`. Unfortunately, they still need to be wrapped in a `<div />` or some other element.
+
+## Compiler Optimizations: Unlocked! {/*compiler-optimizations-unlocked*/}
+
+These changes also unlock several possible compiler optimizations for static content in React 0.14. These optimizations were previously only available to template-based frameworks. They will now also be possible for React code! Both for JSX and `React.createElement/Factory`\*!
+
+See these GitHub Issues for a deep dive into compiler optimizations:
+
+- [Reuse Constant Value Types](https://github.com/facebook/react/issues/3226)
+- [Tagging ReactElements](https://github.com/facebook/react/issues/3227)
+- [Inline ReactElements](https://github.com/facebook/react/issues/3228)
+
+\* If you use the recommended pattern of explicit React.createFactory calls on the consumer side - since they are easily statically analyzed.
+
+## Rationale {/*rationale*/}
+
+I thought that these changes were particularly important because the mere existence of these patterns means that even components that DON’T use these patterns have to pay the price. There are other problematic patterns such as mutating state, but they’re at least localized to a component subtree so they don’t harm the ecosystem.
+
+As always, we’d love to hear your feedback and if you have any trouble upgrading, please let us know.
diff --git a/beta/src/content/blog/2015/03/03/react-v0.13-rc2.md b/beta/src/content/blog/2015/03/03/react-v0.13-rc2.md
new file mode 100644
index 000000000..c7b19dd22
--- /dev/null
+++ b/beta/src/content/blog/2015/03/03/react-v0.13-rc2.md
@@ -0,0 +1,60 @@
+---
+title: 'React v0.13 RC2'
+author: [sebmarkbage]
+---
+
+Thanks to everybody who has already been testing the release candidate. We've received some good feedback and as a result we're going to do a second release candidate. The changes are minimal. We haven't changed the behavior of any APIs we exposed in the previous release candidate. Here's a summary of the changes:
+
+- Introduced a new API (`React.cloneElement`, see below for details).
+- Fixed a bug related to validating `propTypes` when using the new `React.addons.createFragment` API.
+- Improved a couple warning messages.
+- Upgraded jstransform and esprima.
+
+The release candidate is available for download:
+
+- **React**  
+  Dev build with warnings: https://fb.me/react-0.13.0-rc2.js  
+  Minified build for production: https://fb.me/react-0.13.0-rc2.min.js
+- **React with Add-Ons**  
+  Dev build with warnings: https://fb.me/react-with-addons-0.13.0-rc2.js  
+  Minified build for production: https://fb.me/react-with-addons-0.13.0-rc2.min.js
+- **In-Browser JSX transformer**  
+  https://fb.me/JSXTransformer-0.13.0-rc2.js
+
+We've also published version `0.13.0-rc2` of the `react` and `react-tools` packages on npm and the `react` package on bower.
+
+---
+
+## React.cloneElement {/*reactcloneelement*/}
+
+In React v0.13 RC2 we will introduce a new API, similar to `React.addons.cloneWithProps`, with this signature:
+
+```js
+React.cloneElement(element, props, ...children);
+```
+
+Unlike `cloneWithProps`, this new function does not have any magic built-in behavior for merging `style` and `className` for the same reason we don't have that feature from `transferPropsTo`. Nobody is sure what exactly the complete list of magic things are, which makes it difficult to reason about the code and difficult to reuse when `style` has a different signature (e.g. in the upcoming React Native).
+
+`React.cloneElement` is _almost_ equivalent to:
+
+```js
+<element.type {...element.props} {...props}>
+  {children}
+</element.type>
+```
+
+However, unlike JSX and `cloneWithProps`, it also preserves `ref`s. This means that if you get a child with a `ref` on it, you won't accidentally steal it from your ancestor. You will get the same `ref` attached to your new element.
+
+One common pattern is to map over your children and add a new prop. There were many issues reported about `cloneWithProps` losing the ref, making it harder to reason about your code. Now following the same pattern with `cloneElement` will work as expected. For example:
+
+```js
+var newChildren = React.Children.map(this.props.children, function (child) {
+  return React.cloneElement(child, {foo: true});
+});
+```
+
+> Note: `React.cloneElement(child, { ref: 'newRef' })` _DOES_ override the `ref` so it is still not possible for two parents to have a ref to the same child, unless you use callback-refs.
+
+This was a critical feature to get into React 0.13 since props are now immutable. The upgrade path is often to clone the element, but by doing so you might lose the `ref`. Therefore, we needed a nicer upgrade path here. As we were upgrading callsites at Facebook we realized that we needed this method. We got the same feedback from the community. Therefore we decided to make another RC before the final release to make sure we get this in.
+
+We plan to eventually deprecate `React.addons.cloneWithProps`. We're not doing it yet, but this is a good opportunity to start thinking about your own uses and consider using `React.cloneElement` instead. We'll be sure to ship a release with deprecation notices before we actually remove it so no immediate action is necessary.
diff --git a/beta/src/content/blog/2015/03/04/community-roundup-25.md b/beta/src/content/blog/2015/03/04/community-roundup-25.md
new file mode 100644
index 000000000..70b57858f
--- /dev/null
+++ b/beta/src/content/blog/2015/03/04/community-roundup-25.md
@@ -0,0 +1,62 @@
+---
+title: 'Community Round-up #25'
+author: [matthewjohnston4]
+---
+
+## React 101 {/*react-101*/}
+
+Interest in React has been exploding recently, so it's a good time to explore some great recent tutorials and videos that cover getting started.
+
+[Ryan Clark](https://github.com/rynclark) provides a [great overview of the basics of React](http://ryanclark.me/getting-started-with-react/) with the goal of building a really simple dropdown nav.
+
+[Formidable Labs](https://github.com/FormidableLabs) and [Seattle JS](http://www.meetup.com/seattlejs/) recently hosted a series of React, Flux, and Flow workshops, and the first part is available to watch online:
+
+<iframe width="650" height="300" src="//www.youtube-nocookie.com/embed/Pd6Ub7Ju2RM" frameborder="0" allowfullscreen></iframe>
+
+[AEFlash](https://github.com/aearly) writes up [some best practices and tips](http://aeflash.com/2015-02/react-tips-and-best-practices.html) to help you avoid potential pitfalls when developing with React.
+
+Black Mutt Media [takes us through their usage of React](http://blackmuttmedia.com/blog/react-tmdb-api/) and Ruby to build an autocomplete field, and some of the pitfalls they encountered along the way.
+
+Our own [Sebastian Markbåge](https://github.com/sebmarkbage) was on the [Web Platform Podcast](http://thewebplatform.libsyn.com/31-building-with-reactjs) to have a chat about all aspects of React.
+
+<iframe style={{border: 'none'}} src="//html5-player.libsyn.com/embed/episode/id/3370114/height/75/width/200/theme/standard-mini/direction/no/autoplay/no/autonext/no/thumbnail/yes/preload/no/no_addthis/no/" height={26} width="100%" scrolling="no" allowFullScreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen />
+
+## Community Additions {/*community-additions*/}
+
+[Formidable Labs](https://github.com/FormidableLabs) have been busy, as they've also[ just launched Radium](http://projects.formidablelabs.com/radium/), a React component that provides you with the ability to use inline styles instead of CSS. They're also [looking for some help](http://projects.formidablelabs.com/radium-bootstrap/) contributing to a Radium Bootstrap implementation.
+
+[Reactiflux.com](http://reactiflux.com/) is a new Slack community based around (you guessed it!) React, and Flux.
+
+[React Week](http://reactweek.com/) is a week-long learning workshop, happening next week, for React, Flux, and other related technologies, run by [Ryan Florence](https://github.com/ryanflorence).
+
+[Babel-sublime](https://github.com/babel/babel-sublime) is a new package which provides Sublime with language definitions for ES6 JavaScript with React JSX syntax extensions.
+
+[react-meteor](https://github.com/reactjs/react-meteor), a package that replaces the default templating system of the Meteor platform with React, recently received a big update.
+
+## Rebuilding with React {/*rebuilding-with-react*/}
+
+[Rich Manalang](https://github.com/rmanalan) from Atlassian [explains why](https://developer.atlassian.com/blog/2015/02/rebuilding-hipchat-with-react/) they rebuilt their HipChat web client from scratch using React, and how they're already using it to rebuild their native desktop clients.
+
+[Andrew Hillel](https://twitter.com/andyhillel) of the BBC gives [an excellent and thorough breakdown](http://www.bbc.co.uk/blogs/internet/entries/47a96d23-ae04-444e-808f-678e6809765d) of the stack they used to rebuild their homepage, with React as an integral part of the front-end.
+
+A team from New Zealand called [Atomic](https://atomic.io/) is [building web and mobile prototyping and design tools](http://thenextweb.com/creativity/2015/02/19/meet-atomic-missing-tool-interface-design-thats-entirely-browser/) entirely in-browser, and as co-founder [Darryl Gray](https://twitter.com/darrylgray) says, “React.js “totally changed” the fact that browser performance often wasn’t good enough for complex tools like this.”.
+
+[Polarr](https://github.com/Polarrco) have rebuilt [their browser-based photo editor](http://polarrist.tumblr.com/post/111290422225/polarr-photo-editor-2-0-alpha-is-here) with React.
+
+<center><a href="http://polarrist.tumblr.com/post/111290422225/polarr-photo-editor-2-0-alpha-is-here"><img src="/images/blog/polarr.jpg"/></a></center>
+
+## It's F8! {/*its-f8*/}
+
+F8 2015 is just around the corner, and you can [sign up for the video streams](https://www.fbf8.com/stream.html) in advance because we're sure to be covering all things React.
+
+## Meetups {/*meetups*/}
+
+<table><tr><td width="50%" valign="top">
+<blockquote class="twitter-tweet" lang="en"><p>Our <a href="https://twitter.com/reactjs">@reactjs</a> meetup is in full effect <a href="https://twitter.com/hashtag/ReactJS?src=hash">#ReactJS</a> &#10;&#10;btw bathroom code is 6012 lol <a href="http://t.co/7iUpvmm3zz">pic.twitter.com/7iUpvmm3zz</a></p>&mdash; littleBits (@littleBits) <a href="https://twitter.com/littleBits/status/570373833028472832">February 25, 2015</a></blockquote>
+</td><td width="50%" valign="top">
+<blockquote class="twitter-tweet" lang="en"><p><a href="https://twitter.com/yrezgui">@yrezgui</a> captivating us with <a href="https://twitter.com/reactjs">@reactjs</a> at <a href="https://twitter.com/DevRocketUK">@DevRocketUK</a>. Thanks to the amazing sponsors <a href="https://twitter.com/makersacademy">@makersacademy</a> and <a href="https://twitter.com/couchbase">@couchbase</a>. <a href="http://t.co/xwA773omky">pic.twitter.com/xwA773omky</a></p>&mdash; James Nocentini (@jamiltz) <a href="https://twitter.com/jamiltz/status/570306188577001473">February 24, 2015</a></blockquote>
+</td></tr><tr><td width="50%" valign="top">
+<blockquote class="twitter-tweet" lang="en"><p>Listening to a bunch of very clever geekoids at the <a href="https://twitter.com/reactjs">@reactjs</a> seminar. Nice! <a href="http://t.co/0TeTOJOerO">pic.twitter.com/0TeTOJOerO</a></p>&mdash; Nick Middleweek (@nmiddleweek) <a href="https://twitter.com/nmiddleweek/status/568183658395394049">February 18, 2015</a></blockquote>
+</td><td width="50%" valign="top">
+<blockquote class="twitter-tweet" lang="en"><p>Watching the <a href="https://twitter.com/FrontendMasters">@FrontendMasters</a> ReactJS workshop! <a href="http://t.co/YraYIK97Lu">pic.twitter.com/YraYIK97Lu</a></p>&mdash; ReactJS News (@ReactJSNews) <a href="https://twitter.com/ReactJSNews/status/566269552112041985">February 13, 2015</a></blockquote>
+</td></tr></table>
diff --git a/beta/src/content/blog/2015/03/10/react-v0.13.md b/beta/src/content/blog/2015/03/10/react-v0.13.md
new file mode 100644
index 000000000..26555d2e5
--- /dev/null
+++ b/beta/src/content/blog/2015/03/10/react-v0.13.md
@@ -0,0 +1,88 @@
+---
+title: 'React v0.13'
+author: [sophiebits]
+---
+
+Today, we're happy to release React v0.13!
+
+The most notable new feature is [support for ES6 classes](/blog/2015/01/27/react-v0.13.0-beta-1.html), which allows developers to have more flexibility when writing components. Our eventual goal is for ES6 classes to replace `React.createClass` completely, but until we have a replacement for current mixin use cases and support for class property initializers in the language, we don't plan to deprecate `React.createClass`.
+
+At EmberConf and ng-conf last week, we were excited to see that Ember and Angular have been working on speed improvements and now both have performance comparable to React. We've always thought that performance isn't the most important reason to choose React, but we're still planning more optimizations to **make React even faster**.
+
+Our planned optimizations require that ReactElement objects are immutable, which has always been a best practice when writing idiomatic React code. In this release, we've added runtime warnings that fire when props are changed or added between the time an element is created and when it's rendered. When migrating your code, you may want to use new `React.cloneElement` API (which is similar to `React.addons.cloneWithProps` but preserves `key` and `ref` and does not merge `style` or `className` automatically). For more information about our planned optimizations, see GitHub issues
+[#3226](https://github.com/facebook/react/issues/3226),
+[#3227](https://github.com/facebook/react/issues/3227),
+[#3228](https://github.com/facebook/react/issues/3228).
+
+The release is now available for download:
+
+- **React**  
+  Dev build with warnings: https://fb.me/react-0.13.0.js  
+  Minified build for production: https://fb.me/react-0.13.0.min.js
+- **React with Add-Ons**  
+  Dev build with warnings: https://fb.me/react-with-addons-0.13.0.js  
+  Minified build for production: https://fb.me/react-with-addons-0.13.0.min.js
+- **In-Browser JSX transformer**  
+  https://fb.me/JSXTransformer-0.13.0.js
+
+We've also published version `0.13.0` of the `react` and `react-tools` packages on npm and the `react` package on bower.
+
+---
+
+## Changelog {/*changelog*/}
+
+### React Core {/*react-core*/}
+
+#### Breaking Changes {/*breaking-changes*/}
+
+- Deprecated patterns that warned in 0.12 no longer work: most prominently, calling component classes without using JSX or React.createElement and using non-component functions with JSX or createElement
+- Mutating `props` after an element is created is deprecated and will cause warnings in development mode; future versions of React will incorporate performance optimizations assuming that props aren't mutated
+- Static methods (defined in `statics`) are no longer autobound to the component class
+- `ref` resolution order has changed slightly such that a ref to a component is available immediately after its `componentDidMount` method is called; this change should be observable only if your component calls a parent component's callback within your `componentDidMount`, which is an anti-pattern and should be avoided regardless
+- Calls to `setState` in life-cycle methods are now always batched and therefore asynchronous. Previously the first call on the first mount was synchronous.
+- `setState` and `forceUpdate` on an unmounted component now warns instead of throwing. That avoids a possible race condition with Promises.
+- Access to most internal properties has been completely removed, including `this._pendingState` and `this._rootNodeID`.
+
+#### New Features {/*new-features*/}
+
+- Support for using ES6 classes to build React components; see the [v0.13.0 beta 1 notes](/blog/2015/01/27/react-v0.13.0-beta-1.html) for details.
+- Added new top-level API `React.findDOMNode(component)`, which should be used in place of `component.getDOMNode()`. The base class for ES6-based components will not have `getDOMNode`. This change will enable some more patterns moving forward.
+- Added a new top-level API `React.cloneElement(el, props)` for making copies of React elements – see the [v0.13 RC2 notes](/blog/2015/03/03/react-v0.13-rc2.html#react.cloneelement) for more details.
+- New `ref` style, allowing a callback to be used in place of a name: `<Photo ref={(c) => this._photo = c} />` allows you to reference the component with `this._photo` (as opposed to `ref="photo"` which gives `this.refs.photo`).
+- `this.setState()` can now take a function as the first argument for transactional state updates, such as `this.setState((state, props) => ({count: state.count + 1}));` – this means that you no longer need to use `this._pendingState`, which is now gone.
+- Support for iterators and immutable-js sequences as children.
+
+#### Deprecations {/*deprecations*/}
+
+- `ComponentClass.type` is deprecated. Just use `ComponentClass` (usually as `element.type === ComponentClass`).
+- Some methods that are available on `createClass`-based components are removed or deprecated from ES6 classes (`getDOMNode`, `replaceState`, `isMounted`, `setProps`, `replaceProps`).
+
+### React with Add-Ons {/*react-with-add-ons*/}
+
+#### New Features {/*new-features-1*/}
+
+- [`React.addons.createFragment` was added](/docs/create-fragment.html) for adding keys to entire sets of children.
+
+#### Deprecations {/*deprecations-1*/}
+
+- `React.addons.classSet` is now deprecated. This functionality can be replaced with several freely available modules. [classnames](https://www.npmjs.com/package/classnames) is one such module.
+- Calls to `React.addons.cloneWithProps` can be migrated to use `React.cloneElement` instead – make sure to merge `style` and `className` manually if desired.
+
+### React Tools {/*react-tools*/}
+
+#### Breaking Changes {/*breaking-changes-1*/}
+
+- When transforming ES6 syntax, `class` methods are no longer enumerable by default, which requires `Object.defineProperty`; if you support browsers such as IE8, you can pass `--target es3` to mirror the old behavior
+
+#### New Features {/*new-features-2*/}
+
+- `--target` option is available on the jsx command, allowing users to specify and ECMAScript version to target.
+  - `es5` is the default.
+  - `es3` restores the previous default behavior. An additional transform is added here to ensure the use of reserved words as properties is safe (eg `this.static` will become `this['static']` for IE8 compatibility).
+- The transform for the call spread syntax has also been enabled.
+
+### JSX {/*jsx*/}
+
+#### Breaking Changes {/*breaking-changes-2*/}
+
+- A change was made to how some JSX was parsed, specifically around the use of `>` or `}` when inside an element. Previously it would be treated as a string but now it will be treated as a parse error. The [`jsx_orphaned_brackets_transformer`](https://www.npmjs.com/package/jsx_orphaned_brackets_transformer) package on npm can be used to find and fix potential issues in your JSX code.
diff --git a/beta/src/content/blog/2015/03/16/react-v0.13.1.md b/beta/src/content/blog/2015/03/16/react-v0.13.1.md
new file mode 100644
index 000000000..39aeb89da
--- /dev/null
+++ b/beta/src/content/blog/2015/03/16/react-v0.13.1.md
@@ -0,0 +1,46 @@
+---
+title: 'React v0.13.1'
+author: [zpao]
+---
+
+It's been less than a week since we shipped v0.13.0 but it's time to do another quick release. We just released v0.13.1 which contains bugfixes for a number of small issues.
+
+Thanks all of you who have been upgrading your applications and taking the time to report issues. And a huge thank you to those of you who submitted pull requests for the issues you found! 2 of the 6 fixes that went out today came from people who aren't on the core team!
+
+The release is now available for download:
+
+- **React**  
+  Dev build with warnings: https://fb.me/react-0.13.1.js  
+  Minified build for production: https://fb.me/react-0.13.1.min.js
+- **React with Add-Ons**  
+  Dev build with warnings: https://fb.me/react-with-addons-0.13.1.js  
+  Minified build for production: https://fb.me/react-with-addons-0.13.1.min.js
+- **In-Browser JSX transformer**  
+  https://fb.me/JSXTransformer-0.13.1.js
+
+We've also published version `0.13.1` of the `react` and `react-tools` packages on npm and the `react` package on bower.
+
+---
+
+## Changelog {/*changelog*/}
+
+### React Core {/*react-core*/}
+
+#### Bug Fixes {/*bug-fixes*/}
+
+- Don't throw when rendering empty `<select>` elements
+- Ensure updating `style` works when transitioning from `null`
+
+### React with Add-Ons {/*react-with-add-ons*/}
+
+#### Bug Fixes {/*bug-fixes-1*/}
+
+- TestUtils: Don't warn about `getDOMNode` for ES6 classes
+- TestUtils: Ensure wrapped full page components (`<html>`, `<head>`, `<body>`) are treated as DOM components
+- Perf: Stop double-counting DOM components
+
+### React Tools {/*react-tools*/}
+
+#### Bug Fixes {/*bug-fixes-2*/}
+
+- Fix option parsing for `--non-strict-es6module`
diff --git a/beta/src/content/blog/2015/03/19/building-the-facebook-news-feed-with-relay.md b/beta/src/content/blog/2015/03/19/building-the-facebook-news-feed-with-relay.md
new file mode 100644
index 000000000..b9f03a998
--- /dev/null
+++ b/beta/src/content/blog/2015/03/19/building-the-facebook-news-feed-with-relay.md
@@ -0,0 +1,222 @@
+---
+title: 'Building The Facebook News Feed With Relay'
+author: [josephsavona]
+---
+
+At React.js Conf in January we gave a preview of Relay, a new framework for building data-driven applications in React. In this post, we'll describe the process of creating a Relay application. This post assumes some familiarity with the concepts of Relay and GraphQL, so if you haven't already we recommend reading [our introductory blog post](/blog/2015/02/20/introducing-relay-and-graphql.html) or watching [the conference talk](https://www.youtube-nocookie.com/v/9sc8Pyc51uU).
+
+We're working hard to prepare GraphQL and Relay for public release. In the meantime, we'll continue to provide information about what you can expect.
+
+<br/>
+
+## The Relay Architecture {/*the-relay-architecture*/}
+
+The diagram below shows the main parts of the Relay architecture on the client and the server:
+
+<img src="/images/blog/relay-components/relay-architecture.png" alt="Relay Architecture" width="650" />
+
+The main pieces are as follows:
+
+- Relay Components: React components annotated with declarative data descriptions.
+- Actions: Descriptions of how data should change in response to user actions.
+- Relay Store: A client-side data store that is fully managed by the framework.
+- Server: An HTTP server with GraphQL endpoints (one for reads, one for writes) that respond to GraphQL queries.
+
+This post will focus on **Relay components** that describe encapsulated units of UI and their data dependencies. These components form the majority of a Relay application.
+
+<br/>
+
+## A Relay Application {/*a-relay-application*/}
+
+To see how components work and can be composed, let's implement a basic version of the Facebook News Feed in Relay. Our application will have two components: a `<NewsFeed>` that renders a list of `<Story>` items. We'll introduce the plain React version of each component first and then convert it to a Relay component. The goal is something like the following:
+
+<img src="/images/blog/relay-components/sample-newsfeed.png" alt="Sample News Feed" width="360" />
+
+<br/>
+
+## The `<Story>` Begins {/*the-story-begins*/}
+
+The first step is a React `<Story>` component that accepts a `story` prop with the story's text and author information. Note that all examples uses ES6 syntax and elide presentation details to focus on the pattern of data access.
+
+```javascript
+// Story.react.js
+export default class Story extends React.Component {
+  render() {
+    var story = this.props.story;
+    return (
+      <View>
+        <Image uri={story.author.profilePicture.uri} />
+        <Text>{story.author.name}</Text>
+        <Text>{story.text}</Text>
+      </View>
+    );
+  }
+}
+```
+
+<br/>
+
+## What's the `<Story>`? {/*whats-the-story*/}
+
+Relay automates the process of fetching data for components by wrapping existing React components in Relay containers (themselves React components):
+
+```javascript
+// Story.react.js
+class Story extends React.Component { ... }
+
+export default Relay.createContainer(Story, {
+  fragments: {
+    story: /* TODO */
+  }
+});
+```
+
+Before adding the GraphQL fragment, let's look at the component hierarchy this creates:
+
+<img src="/images/blog/relay-components/relay-containers.png" width="397" alt="React Container Data Flow" />
+
+Most props will be passed through from the container to the original component. However, Relay will return the query results for a prop whenever a fragment is defined. In this case we'll add a GraphQL fragment for `story`:
+
+```javascript
+// Story.react.js
+class Story extends React.Component { ... }
+
+export default Relay.createContainer(Story, {
+  fragments: {
+    story: () => Relay.QL`
+      fragment on Story {
+        author {
+          name
+          profilePicture {
+            uri
+          }
+        }
+        text
+      }
+    `,
+  },
+});
+```
+
+Queries use ES6 template literals tagged with the `Relay.QL` function. Similar to how JSX transpiles to plain JavaScript objects and function calls, these template literals transpile to plain objects that describe fragments. Note that the fragment's structure closely matches the object structure that we expected in `<Story>`'s render function.
+
+<br/>
+
+## `<Story>`s on Demand {/*storys-on-demand*/}
+
+We can render a Relay component by providing Relay with the component (`<Story>`) and the ID of the data (a story ID). Given this information, Relay will first fetch the results of the query and then `render()` the component. The value of `props.story` will be a plain JavaScript object such as the following:
+
+```javascript
+{
+  author: {
+    name: "Greg",
+    profilePicture: {
+      uri: "https://…"
+    }
+  },
+  text: "The first Relay blog post is up…"
+}
+```
+
+Relay guarantees that all data required to render a component will be available before it is rendered. This means that `<Story>` does not need to handle a loading state; the `story` is _guaranteed_ to be available before `render()` is called. We have found that this invariant simplifies our application code _and_ improves the user experience. Of course, Relay also has options to delay the fetching of some parts of our queries.
+
+The diagram below shows how Relay containers make data available to our React components:
+
+<img src="/images/blog/relay-components/relay-containers-data-flow.png" width="650" alt="Relay Container Data Flow" />
+
+<br/>
+
+## `<NewsFeed>` Worthy {/*newsfeed-worthy*/}
+
+Now that the `<Story>` is over we can continue with the `<NewsFeed>` component. Again, we'll start with a React version:
+
+```javascript
+// NewsFeed.react.js
+class NewsFeed extends React.Component {
+  render() {
+    var stories = this.props.viewer.stories; // `viewer` is the active user
+    return (
+      <View>
+        {stories.map((story) => (
+          <Story story={story} />
+        ))}
+        <Button onClick={() => this.loadMore()}>Load More</Button>
+      </View>
+    );
+  }
+
+  loadMore() {
+    // TODO: fetch more stories
+  }
+}
+
+module.exports = NewsFeed;
+```
+
+<br/>
+
+## All the News Fit to be Relayed {/*all-the-news-fit-to-be-relayed*/}
+
+`<NewsFeed>` has two new requirements: it composes `<Story>` and requests more data at runtime.
+
+Just as React views can be nested, Relay components can compose query fragments from child components. Composition in GraphQL uses ES6 template literal substitution: `${Component.getFragment('prop')}`. Pagination can be accomplished with a variable, specified with `$variable` (as in `stories(first: $count)`):
+
+```javascript
+// NewsFeed.react.js
+class NewsFeed extends React.Component { ... }
+
+export default Relay.createContainer(NewsFeed, {
+  initialVariables: {
+    count: 3                                /* default to 3 stories */
+  },
+  fragments: {
+    viewer: () => Relay.QL`
+      fragment on Viewer {
+        stories(first: $count) {            /* fetch viewer's stories */
+          edges {                           /* traverse the graph */
+            node {
+              ${Story.getFragment('story')} /* compose child fragment */
+            }
+          }
+        }
+      }
+    `,
+  },
+});
+```
+
+Whenever `<NewsFeed>` is rendered, Relay will recursively expand all the composed fragments and fetch the queries in a single trip to the server. In this case, the `text` and `author` data will be fetched for each of the 3 story nodes.
+
+Query variables are available to components as `props.relay.variables` and can be modified with `props.relay.setVariables(nextVariables)`. We can use these to implement pagination:
+
+```javascript
+// NewsFeed.react.js
+class NewsFeed extends React.Component {
+  render() { ... }
+
+  loadMore() {
+    // read current params
+    var count = this.props.relay.variables.count;
+    // update params
+    this.props.relay.setVariables({
+      count: count + 5,
+    });
+  }
+}
+```
+
+Now when `loadMore()` is called, Relay will send a GraphQL request for the additional five stories. When these stories are fetched, the component will re-render with the new stories available in `props.viewer.stories` and the updated count reflected in `props.relay.variables.count`.
+
+<br/>
+
+## In Conclusion {/*in-conclusion*/}
+
+These two components form a solid core for our application. With the use of Relay containers and GraphQL queries, we've enabled the following benefits:
+
+- Automatic and efficient pre-fetching of data for an entire view hierarchy in a single network request.
+- Trivial pagination with automatic optimizations to fetch only the additional items.
+- View composition and reusability, so that `<Story>` can be used on its own or within `<NewsFeed>`, without any changes to either component.
+- Automatic subscriptions, so that components will re-render if their data changes. Unaffected components will not re-render unnecessarily.
+- Exactly _zero_ lines of imperative data fetching logic. Relay takes full advantage of React's declarative component model.
+
+But Relay has many more tricks up its sleeve. For example, it's built from the start to handle reads and writes, allowing for features like optimistic client updates with transactional rollback. Relay can also defer fetching select parts of queries, and it uses a local data store to avoid fetching the same data twice. These are all powerful features that we hope to explore in future posts.
diff --git a/beta/src/content/blog/2015/03/26/introducing-react-native.md b/beta/src/content/blog/2015/03/26/introducing-react-native.md
new file mode 100644
index 000000000..71068a565
--- /dev/null
+++ b/beta/src/content/blog/2015/03/26/introducing-react-native.md
@@ -0,0 +1,16 @@
+---
+title: 'Introducing React Native'
+author: [sophiebits]
+---
+
+In January at React.js Conf, we announced React Native, a new framework for building native apps using React. We're happy to announce that we're open-sourcing React Native and you can start building your apps with it today.
+
+For more details, see [Tom Occhino's post on the Facebook Engineering blog](https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/):
+
+> _What we really want is the user experience of the native mobile platforms, combined with the developer experience we have when building with React on the web._
+>
+> _With a bit of work, we can make it so the exact same React that's on GitHub can power truly native mobile applications. The only difference in the mobile environment is that instead of running React in the browser and rendering to divs and spans, we run it an embedded instance of JavaScriptCore inside our apps and render to higher-level platform-specific components._
+>
+> _It's worth noting that we're not chasing “write once, run anywhere.” Different platforms have different looks, feels, and capabilities, and as such, we should still be developing discrete apps for each platform, but the same set of engineers should be able to build applications for whatever platform they choose, without needing to learn a fundamentally different set of technologies for each. We call this approach “learn once, write anywhere.”_
+
+To learn more, visit the [React Native website](https://reactnative.dev/).
diff --git a/beta/src/content/blog/2015/03/30/community-roundup-26.md b/beta/src/content/blog/2015/03/30/community-roundup-26.md
new file mode 100644
index 000000000..9fb5af951
--- /dev/null
+++ b/beta/src/content/blog/2015/03/30/community-roundup-26.md
@@ -0,0 +1,72 @@
+---
+title: 'Community Round-up #26'
+author: [vjeux]
+---
+
+We open sourced React Native last week and the community reception blew away all our expectations! So many of you tried it, made cool stuff with it, raised many issues and even submitted pull requests to fix them! The entire team wants to say thank you!
+
+<blockquote class="twitter-tweet" lang="en"><p><a href="https://twitter.com/hashtag/reactnative?src=hash">#reactnative</a> is like when you get a new expansion pack, and everybody is running around clueless about which NPC to talk to for the quests</p>&mdash; Ryan Florence (@ryanflorence) <a href="https://twitter.com/ryanflorence/status/581810423554543616">March 28, 2015</a></blockquote>
+
+## When is React Native Android coming? {/*when-is-react-native-android-coming*/}
+
+**Give us 6 months**. At Facebook, we strive to only open-source projects that we are using in production. While the Android backend for React Native is starting to work (see video below at 37min), it hasn't been shipped to any users yet. There's a lot of work that goes into open-sourcing a project, and we want to do it right so that you have a great experience when using it.
+
+<iframe width="650" height="315" src="https://www.youtube-nocookie.com/embed/X6YbAKiLCLU?start=2220" frameborder="0" allowfullscreen></iframe>
+
+## Ray Wenderlich - Property Finder {/*ray-wenderlich---property-finder*/}
+
+If you are getting started with React Native, you should absolutely [use this tutorial](http://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript) from Colin Eberhardt. It goes through all the steps to make a reasonably complete app.
+
+[![](/images/blog/property-finder.png)](http://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript)
+
+Colin also [blogged about his experience using React Native](http://blog.scottlogic.com/2015/03/26/react-native-retrospective.html) for a few weeks and gives his thoughts on why you would or wouldn't use it.
+
+## The Changelog {/*the-changelog*/}
+
+Spencer Ahrens and I had the great pleasure to talk about React Native on [The Changelog](https://thechangelog.com/149/) podcast. It was really fun to chat for an hour, I hope that you'll enjoy listening to it. :)
+
+<audio src="https://cdn.changelog.com/uploads/podcast/149/the-changelog-149.mp3" controls="controls" style={{ width: '100%' }}></audio>
+
+## Hacker News {/*hacker-news*/}
+
+Less than 24 hours after React Native was open sourced, Simarpreet Singh built an [Hacker News reader app from scratch](https://github.com/iSimar/HackerNews-React-Native). It's unbelievable how fast he was able to pull it off!
+
+[![](/images/blog/hacker-news-react-native.png)](https://github.com/iSimar/HackerNews-React-Native)
+
+## Parse + React {/*parse--react*/}
+
+There's a huge ecosystem of JavaScript modules on npm and React Native was designed to work well with the ones that don't have DOM dependencies. Parse is a great example; you can `npm install parse` on your React Native project and it'll work as is. :) We still have [a](https://github.com/facebook/react-native/issues/406) [few](https://github.com/facebook/react-native/issues/370) [issues](https://github.com/facebook/react-native/issues/316) to solve; please create an issue if your favorite library doesn't work out of the box.
+
+[![](/images/blog/parse-react.jpg)](http://blog.parse.com/2015/03/25/parse-and-react-shared-chemistry/)
+
+## tcomb-form-native {/*tcomb-form-native*/}
+
+Giulio Canti is the author of the [tcomb-form library](https://github.com/gcanti/tcomb-form) for React. He already [ported it to React Native](https://github.com/gcanti/tcomb-form-native) and it looks great!
+
+[![](/images/blog/tcomb-react-native.png)](https://github.com/gcanti/tcomb-form-native)
+
+## Facebook Login with React Native {/*facebook-login-with-react-native*/}
+
+One of the reason we built React Native is to be able to use all the libraries in the native ecosystem. Brent Vatne leads the way and explains [how to use Facebook Login with React Native](http://brentvatne.ca/facebook-login-with-react-native/).
+
+## Modus Create {/*modus-create*/}
+
+Jay Garcia spent a lot of time during the beta working on a NES music player with React Native. He wrote a blog post to share his experience and explains some code snippets.
+
+[![](/images/blog/modus-create.gif)](http://moduscreate.com/react-native-has-landed/)
+
+## React Native with Babel and webpack {/*react-native-with-babel-and-webpack*/}
+
+React Native ships with a custom packager and custom ES6 transforms instead of using what the open source community settled on such as [webpack](https://webpack.js.org/) and [Babel](https://babeljs.io/). The main reason for this is performance – we couldn't get those tools to have sub-second reload time on a large codebase.
+
+Roman Liutikov found a way to [use webpack and Babel to run on React Native](https://github.com/roman01la/react-native-babel)! In the future, we want to work with those projects to provide cleaner extension mechanisms.
+
+## A Dynamic, Crazy, Native Mobile Future—Powered by JavaScript {/*a-dynamic-crazy-native-mobile-futurepowered-by-javascript*/}
+
+Clay Allsopp wrote a post about [all the crazy things you could do with a JavaScript engine that renders native views](https://medium.com/@clayallsopp/a-dynamic-crazy-native-mobile-future-powered-by-javascript-70f2d56b1987). What about native embeds, seamless native browser, native search engine or even app generation...
+
+## Random Tweet {/*random-tweet*/}
+
+We've spent a lot of efforts getting the onboarding as easy as possible and we're really happy that people noticed. We still have a lot of work to do on documentation, stay tuned!
+
+<blockquote class="twitter-tweet" lang="en"><p>Wow. Getting started with React Native might have been the smoothest experience I’ve ever had with a new developer product.</p>&mdash; Andreas Eldh (@eldh) <a href="https://twitter.com/eldh/status/581186172094980096">March 26, 2015</a></blockquote>
diff --git a/beta/src/content/blog/2015/04/17/react-native-v0.4.md b/beta/src/content/blog/2015/04/17/react-native-v0.4.md
new file mode 100644
index 000000000..49586fda5
--- /dev/null
+++ b/beta/src/content/blog/2015/04/17/react-native-v0.4.md
@@ -0,0 +1,24 @@
+---
+title: 'React Native v0.4'
+author: [vjeux]
+---
+
+It's been three weeks since we open sourced React Native and there's been some insane amount of activity already: over 12.5k stars, 1000 commits, 500 issues, 380 pull requests, and 100 contributors, plus [35 plugins](http://react.parts/native-ios) and [1 app in the app store](http://herman.asia/building-a-flashcard-app-with-react-native)! We were expecting some buzz around the project but this is way beyond anything we imagined. Thank you!
+
+I'd especially like to thank community members Brent Vatne and James Ide who have both already contributed meaningfully to the project and have been extremely helpful on IRC and with issues and pull requests
+
+## Changelog {/*changelog*/}
+
+The main focus of the past few weeks has been to make React Native the best possible experience for people outside of Facebook. Here's a high level summary of what's happened since we open sourced:
+
+- **Error messages and documentation**: We want React Native to be the absolute best developer experience for building mobile apps. We've added a lot of warnings, improved the documentation, and fixed many bugs. If you encounter anything, and I really mean anything, that is not expected or clear, please create an issue - we want to hear about it and fix it.
+- **NPM modules compatibility**: There are a lot of libraries on NPM that do not depend on node/browser internals that would be really useful in React Native, such as superagent, underscore, parse, and many others. The packager is now a lot more faithful to node/browserify/webpack dependency resolution. If your favorite library doesn't work out of the box, please open up an issue.
+- **Infrastructure**: We are refactoring the internals of React Native to make it easier to plug in to existing iOS codebases, as well as improve performance by removing redundant views and shadow views, supporting multiple root views and manually registering classes to reduce startup time.
+- **Components**: The API for a lot of UI components and APIs, especially the ones we're not using heavily inside of Facebook, has dramatically improved thanks to many of your pull requests.
+- **Tests**: We ported JavaScript tests, iOS Snapshot tests, and End to End tests to Travis CI. We have broken GitHub master a couple of times (whoops!) when syncing and we hope that with this growing suite of tests it's going to become harder and harder to do so.
+- **Patent Grant**: Many of you had concerns and questions around the PATENTS file. We pushed [a new version of the grant](https://code.facebook.com/posts/1639473982937255/updating-our-open-source-patent-grant/).
+- **Per commit history**: In order to synchronize from Facebook to GitHub, we used to do one giant commit every few days. We improved our tooling and now have per commit history that maintains author information (both internal and external from pull requests), and we retroactively applied this to historical diffs to provide proper attribution.
+
+## Where are we going? {/*where-are-we-going*/}
+
+In addition to supporting pull requests, issues, and general improvements, we're also working hard on our internal React Native integrations and on React Native for Android.
diff --git a/beta/src/content/blog/2015/04/18/react-v0.13.2.md b/beta/src/content/blog/2015/04/18/react-v0.13.2.md
new file mode 100644
index 000000000..cbdd641f2
--- /dev/null
+++ b/beta/src/content/blog/2015/04/18/react-v0.13.2.md
@@ -0,0 +1,50 @@
+---
+title: 'React v0.13.2'
+author: [zpao]
+---
+
+Yesterday the [React Native team shipped v0.4](/blog/2015/04/17/react-native-v0.4.html). Those of us working on the web team just a few feet away couldn't just be shown up like that so we're shipping v0.13.2 today as well! This is a bug fix release to address a few things while we continue to work towards v0.14.
+
+The release is now available for download:
+
+- **React**  
+  Dev build with warnings: https://fb.me/react-0.13.2.js  
+  Minified build for production: https://fb.me/react-0.13.2.min.js
+- **React with Add-Ons**  
+  Dev build with warnings: https://fb.me/react-with-addons-0.13.2.js  
+  Minified build for production: https://fb.me/react-with-addons-0.13.2.min.js
+- **In-Browser JSX transformer**  
+  https://fb.me/JSXTransformer-0.13.2.js
+
+We've also published version `0.13.2` of the `react` and `react-tools` packages on npm and the `react` package on bower.
+
+---
+
+## Changelog {/*changelog*/}
+
+### React Core {/*react-core*/}
+
+#### New Features {/*new-features*/}
+
+- Added `strokeDashoffset`, `flexPositive`, `flexNegative` to the list of unitless CSS properties
+- Added support for more DOM properties:
+  - `scoped` - for `<style>` elements
+  - `high`, `low`, `optimum` - for `<meter>` elements
+  - `unselectable` - IE-specific property to prevent user selection
+
+#### Bug Fixes {/*bug-fixes*/}
+
+- Fixed a case where re-rendering after rendering null didn't properly pass context
+- Fixed a case where re-rendering after rendering with `style={null}` didn't properly update `style`
+- Update `uglify` dependency to prevent a bug in IE8
+- Improved warnings
+
+### React with Add-Ons {/*react-with-add-ons*/}
+
+#### Bug Fixes {/*bug-fixes-1*/}
+
+- Immutabilty Helpers: Ensure it supports `hasOwnProperty` as an object key
+
+### React Tools {/*react-tools*/}
+
+- Improve documentation for new options
diff --git a/beta/src/content/blog/2015/05/01/graphql-introduction.md b/beta/src/content/blog/2015/05/01/graphql-introduction.md
new file mode 100644
index 000000000..eefb084ca
--- /dev/null
+++ b/beta/src/content/blog/2015/05/01/graphql-introduction.md
@@ -0,0 +1,101 @@
+---
+title: 'GraphQL Introduction'
+author: [schrockn]
+---
+
+At the React.js conference in late January 2015, we revealed our next major technology in the React family: [Relay](/blog/2015/02/20/introducing-relay-and-graphql.html).
+
+Relay is a new way of structuring client applications that co-locates data-fetching requirements and React components. Instead of placing data fetching logic in some other part of the client application – or embedding this logic in a custom endpoint on the server – we instead co-locate a _declarative_ data-fetching specification alongside the React component. The language of this declarative specification is GraphQL.
+
+GraphQL was not invented to enable Relay. In fact, GraphQL predates Relay by nearly three years. It was invented during the move from Facebook's HTML5-driven mobile applications to purely native applications. It is a query language for graph data that powers the lion's share of interactions in the Facebook Android and iOS applications. Any user of the native iOS or Android app in the last two years has used an app powered by GraphQL.
+
+We plan to open-source a reference implementation of a GraphQL server and publish a language specification in the coming months. Our goal is to evolve GraphQL to adapt to a wide range of backends, so that projects and companies can use this technology to access their own data. We believe that this is a compelling way to structure servers and to provide powerful abstractions, frameworks and tools – including, but not exclusively, Relay – for product developers.
+
+## What is GraphQL? {/*what-is-graphql*/}
+
+A GraphQL query is a string interpreted by a server that returns data in a specified format. Here is an example query:
+
+```js
+{
+  user(id: 3500401) {
+    id,
+    name,
+    isViewerFriend,
+    profilePicture(size: 50)  {
+      uri,
+      width,
+      height
+    }
+  }
+}
+```
+
+(Note: this syntax is slightly different from previous GraphQL examples. We've recently been making improvements to the language.)
+
+And here is the response to that query.
+
+```json
+{
+  "user": {
+    "id": 3500401,
+    "name": "Jing Chen",
+    "isViewerFriend": true,
+    "profilePicture": {
+      "uri": "http://someurl.cdn/pic.jpg",
+      "width": 50,
+      "height": 50
+    }
+  }
+}
+```
+
+We will dig into the syntax and semantics of GraphQL in a later post, but even a simple example shows many of its design principles:
+
+- **Hierarchical:** Most product development today involves the creation and manipulation of view hierarchies. To achieve congruence with the structure of these applications, a GraphQL query itself is a hierarchical set of fields. The query is shaped just like the data it returns. It is a natural way for product engineers to describe data requirements.
+- **Product-centric:** GraphQL is unapologetically driven by the requirements of views and the front-end engineers that write them. We start with their way of thinking and requirements and build the language and runtime necessary to enable that.
+- **Client-specified queries:** In GraphQL, the specification for queries are encoded in the _client_ rather than the _server_. These queries are specified at field-level granularity. In the vast majority of applications written without GraphQL, the server determines the data returned in its various scripted endpoints. A GraphQL query, on the other hand, returns exactly what a client asks for and no more.
+- **Backwards Compatible:** In a world of deployed native mobile applications with no forced upgrades, backwards compatibility is a challenge. Facebook, for example, releases apps on a two week fixed cycle and pledges to maintain those apps for _at least_ two years. This means there are at a _minimum_ 52 versions of our clients per platform querying our servers at any given time. Client-specified queries simplifies managing our backwards compatibility guarantees.
+- **Structured, Arbitrary Code:** Query languages with field-level granularity have typically queried storage engines directly, such as SQL. GraphQL instead imposes a structure onto a server, and exposes fields that are backed by _arbitrary code_. This allows for both server-side flexibility and a uniform, powerful API across the entire surface area of an application.
+- **Application-Layer Protocol:** GraphQL is an application-layer protocol and does not require a particular transport. It is a string that is parsed and interpreted by a server.
+- **Strongly-typed:** GraphQL is strongly-typed. Given a query, tooling can ensure that the query is both syntactically correct and valid within the GraphQL type system before execution, i.e. at development time, and the server can make certain guarantees about the shape and nature of the response. This makes it easier to build high quality client tools.
+- **Introspective:** GraphQL is introspective. Clients and tools can query the type system using the GraphQL syntax itself. This is a powerful platform for building tools and client software, such as automatic parsing of incoming data into strongly-typed interfaces. It is especially useful in statically typed languages such as Swift, Objective-C and Java, as it obviates the need for repetitive and error-prone code to shuffle raw, untyped JSON into strongly-typed business objects.
+
+## Why invent something new? {/*why-invent-something-new*/}
+
+Obviously GraphQL is not the first system to manage client-server interactions. In today's world there are two dominant architectural styles for client-server interaction: REST and _ad hoc_ endpoints.
+
+### REST {/*rest*/}
+
+REST, an acronym for Representational State Transfer, is an architectural style rather than a formal protocol. There is actually much debate about what exactly REST is and is not. We wish to avoid such debates. We are interested in the typical attributes of systems that _self-identify_ as REST, rather than systems which are formally REST.
+
+Objects in a typical REST system are addressable by URI and interacted with using verbs in the HTTP protocol. An HTTP GET to a particular URI fetches an object and returns a server-specified set of fields. An HTTP PUT edits an object; an HTTP DELETE deletes an object; and so on.
+
+We believe there are a number of weakness in typical REST systems, ones that are particularly problematic in mobile applications:
+
+- Fetching complicated object graphs require multiple round trips between the client and server to render single views. For mobile applications operating in variable network conditions, these multiple roundtrips are highly undesirable.
+- Invariably fields and additional data are added to REST endpoints as the system requirements change. However, old clients also receive this additional data as well, because the data fetching specification is encoded on the server rather than the client. As result, these payloads tend to grow over time for all clients. When this becomes a problem for a system, one solution is to overlay a versioning system onto the REST endpoints. Versioning also complicates a server, and results in code duplication, spaghetti code, or a sophisticated, hand-rolled infrastructure to manage it. Another solution to limit over-fetching is to provide multiple views – such as “compact” vs “full” – of the same REST endpoint, however this coarse granularity often does not offer adequate flexibility.
+- REST endpoints are usually weakly-typed and lack machine-readable metadata. While there is much debate about the merits of strong- versus weak-typing in distributed systems, we believe in strong typing because of the correctness guarantees and tooling opportunities it provides. Developers deal with systems that lack this metadata by inspecting frequently out-of-date documentation and then writing code against the documentation.
+- Many of these attributes are linked to the fact that “REST is intended for long-lived network-based applications that span multiple organizations” [according to its inventor](http://roy.gbiv.com/untangled/2008/rest-apis-must-be-hypertext-driven). This is not a requirement for APIs that serve a client app built within the same organization.
+
+Nearly all externally facing REST APIs we know of trend or end up in these non-ideal states, as well as nearly all _internal_ REST APIs. The consequences of opaqueness and over-fetching are more severe in internal APIs since their velocity of change and level of usage is almost always higher.
+
+Because of multiple round-trips and over-fetching, applications built in the REST style inevitably end up building _ad hoc_ endpoints that are superficially in the REST style. These actually couple the data to a particular view which explicitly violates one of REST's major goals. Most REST systems of any complexity end up as a continuum of endpoints that span from “traditional” REST to _ad hoc_ endpoints.
+
+### Ad Hoc Endpoints {/*ad-hoc-endpoints*/}
+
+Many applications have no formalized client-server contract. Product developers access server capabilities through _ad hoc_ endpoints and write custom code to fetch the data they need. Servers define procedures, and they return data. This approach has the virtue of simplicity, but can often become untenable as systems age.
+
+- These systems typically define a custom endpoint per view. For systems with a wide surface area this can quickly grow into a maintenance nightmare of orphaned endpoints, inconsistent tooling, and massive server code duplication. Disciplined engineering organizations can mitigate these issues with great engineering practices, high quality abstractions, and custom tooling. However, given our experience we believe that custom endpoints tend to lead to entropic server codebases.
+- Much like REST, the payloads of custom endpoints grow monotonically (even with mitigation from versioning systems) as the server evolves. Deployed clients cannot break, and, with rapid release cycles and backwards compatibility guarantees, distributed applications will have large numbers of extant versions. Under these constraints it is difficult to remove data from a custom endpoint.
+- Custom endpoints tend to – for a client developer – create a clunky, multi-language, multi-environment development process. No matter if the data has been accessed before in a different view, they are required to first change the custom endpoint, then deploy that code to a server accessible from a mobile device, and only then change the client to utilize that data. In GraphQL – unless the data in the view is completely new to the entire system – a product developer adds a field to a GraphQL query and the work on the client continues unabated.
+- Much like REST, most systems with custom endpoints do not have a formalized type system, which eliminates the possibility for the tools and guarantees that introspective type systems can provide. Some custom-endpoint-driven systems do use a strongly typed serialization scheme, such as Protocol Buffers, Thrift, or XML. Those do allow for direct parsing of responses into typed classes and eliminating boilerplate shuffling from JSON into handwritten classes. These systems are as not as expressive and flexible as GraphQL, and the other downsides of _ad hoc_ endpoints remain.
+
+We believe that GraphQL represents a novel way of structuring the client-server contract. Servers publish a type system specific to their application, and GraphQL provides a unified language to query data within the constraints of that type system. That language allows product developers to express data requirements in a form natural to them: a declarative and hierarchal one.
+
+This is a liberating platform for product developers. With GraphQL, no more contending with _ad hoc_ endpoints or object retrieval with multiple roundtrips to access server data; instead an elegant, hierarchical, declarative query dispatched to a single endpoint. No more frequent jumps between client and server development environments to do experimentation or to change or create views of existing data; instead experiments are done and new views built within a native, client development environment exclusively. No more shuffling unstructured data from _ad hoc_ endpoints into business objects; instead a powerful, introspective type system that serves as a platform for tool building.
+
+Product developers are free to focus on their client software and requirements while rarely leaving their development environment; they can more confidently support shipped clients as a system evolves; and they are using a protocol designed to operate well within the constraints of mobile applications. Product developers can query for exactly what they want, in the way they think about it, across their entire application's data model.
+
+## What's next? {/*whats-next*/}
+
+Over the coming months, we will share more technical details about GraphQL, including additional language features, tools that support it, and how it is built and used at Facebook. These posts will culminate in a formal specification of GraphQL to guide implementors across various languages and platforms. We also plan on releasing a reference implementation in the summer, in order to provide a basis for custom deployments and a platform for experimentation. We're incredibly excited to share this system and work with the open source community to improve it.
diff --git a/beta/src/content/blog/2015/05/08/react-v0.13.3.md b/beta/src/content/blog/2015/05/08/react-v0.13.3.md
new file mode 100644
index 000000000..20dc257c6
--- /dev/null
+++ b/beta/src/content/blog/2015/05/08/react-v0.13.3.md
@@ -0,0 +1,42 @@
+---
+title: 'React v0.13.3'
+author: [zpao]
+---
+
+Today we're sharing another patch release in the v0.13 branch. There are only a few small changes, with a couple to address some issues that arose around that undocumented feature so many of you are already using: `context`. We also improved developer ergonomics just a little bit, making some warnings better.
+
+The release is now available for download:
+
+- **React**  
+  Dev build with warnings: https://fb.me/react-0.13.3.js  
+  Minified build for production: https://fb.me/react-0.13.3.min.js
+- **React with Add-Ons**  
+  Dev build with warnings: https://fb.me/react-with-addons-0.13.3.js  
+  Minified build for production: https://fb.me/react-with-addons-0.13.3.min.js
+- **In-Browser JSX transformer**  
+  https://fb.me/JSXTransformer-0.13.3.js
+
+We've also published version `0.13.3` of the `react` and `react-tools` packages on npm and the `react` package on bower.
+
+---
+
+## Changelog {/*changelog*/}
+
+### React Core {/*react-core*/}
+
+#### New Features {/*new-features*/}
+
+- Added `clipPath` element and attribute for SVG
+- Improved warnings for deprecated methods in plain JS classes
+
+#### Bug Fixes {/*bug-fixes*/}
+
+- Loosened `dangerouslySetInnerHTML` restrictions so `{__html: undefined}` will no longer throw
+- Fixed extraneous context warning with non-pure `getChildContext`
+- Ensure `replaceState(obj)` retains prototype of `obj`
+
+### React with Add-ons {/*react-with-add-ons*/}
+
+### Bug Fixes {/*bug-fixes-1*/}
+
+- Test Utils: Ensure that shallow rendering works when components define `contextTypes`
diff --git a/beta/src/content/blog/2015/05/22/react-native-release-process.md b/beta/src/content/blog/2015/05/22/react-native-release-process.md
new file mode 100644
index 000000000..acc54c947
--- /dev/null
+++ b/beta/src/content/blog/2015/05/22/react-native-release-process.md
@@ -0,0 +1,22 @@
+---
+title: 'React Native Release Process'
+author: [vjeux]
+---
+
+The React Native release process have been a bit chaotic since we open sourced. It was unclear when new code was released, there was no changelog, we bumped the minor and patch version inconsistently and we often had to submit updates right after a release to fix a bad bug. In order to _move fast with stable infra_, we are introducing a real release process with a two-week release schedule.
+
+To explain how it works, let me walk you through an example. Today, Friday, we took the current state of master and put it on the 0.5-stable branch. We [published 0.5.0-rc](https://github.com/facebook/react-native/releases/tag/v0.5.0-rc), an RC (Release Candidate) when we cut the branch. For two weeks, we're going to let it stabilize and only cherry-pick critical bug fixes from master.
+
+Friday in two weeks, we're going to publish the 0.5.0 release, create the 0.6-stable branch and publish 0.6.0-rc as well.
+
+The release process is synchronized with Facebook's mobile release process. This means that everything in the open source release is also being shipped as part of all the Facebook apps that use React Native!
+
+You now have three ways to get React Native. You should chose the one you want based on the amount of risk you tolerate:
+
+- **master**: You have updates as soon as they are committed. This is if you want to live on the bleeding edge or want to submit pull requests.
+- **rc**: If you don't want to update every day and deal with many instabilities but want to have recent updates, this is your best shot.
+- **release**: This is the most stable version we offer. The trade-off is that it contains commits that are up to a month old.
+
+If you want more details, I highly recommend this video that explains how Facebook mobile release process works and why it was setup this way.
+
+<iframe width="650" height="300" src="https://www.youtube.com/embed/mOyoTUETmSM" frameborder="0" allowfullscreen></iframe>
diff --git a/beta/src/content/blog/2015/06/12/deprecating-jstransform-and-react-tools.md b/beta/src/content/blog/2015/06/12/deprecating-jstransform-and-react-tools.md
new file mode 100644
index 000000000..67aff7782
--- /dev/null
+++ b/beta/src/content/blog/2015/06/12/deprecating-jstransform-and-react-tools.md
@@ -0,0 +1,30 @@
+---
+title: 'Deprecating JSTransform and react-tools'
+author: [zpao]
+---
+
+Today we're announcing the deprecation of react-tools and JSTransform.
+
+As many people have noticed already, React and React Native have both switched their respective build systems to make use of [Babel](http://babeljs.io/). This replaced [JSTransform](https://github.com/facebook/jstransform), the source transformation tool that we wrote at Facebook. JSTransform has been really good for us over the past several years, however as the JavaScript language continues to evolve, the architecture we used has begun to show its age. We've faced maintenance issues and lagged behind implementing new language features. Last year, Babel (previously 6to5) exploded onto the scene, implementing new features at an amazing pace. Since then it has evolved a solid plugin API, and implemented some of our non-standard language features (JSX and Flow type annotations).
+
+react-tools has always been a very thin wrapper around JSTransform. It has served as a great tool for the community to get up and running, but at this point we're ready to [let it go](https://www.youtube.com/watch?v=moSFlvxnbgk). We won't ship a new version for v0.14.
+
+## Migrating to Babel {/*migrating-to-babel*/}
+
+Many people in the React and broader JavaScript community have already adopted Babel. It has [integrations with a number of tools](http://babeljs.io/docs/setup/). Depending on your tool, you'll want to read up on the instructions.
+
+We've been working with the Babel team as we started making use of it and we're confident that it will be the right tool to use with React.
+
+## Other Deprecations {/*other-deprecations*/}
+
+### esprima-fb {/*esprima-fb*/}
+
+As a result of no longer maintaining JSTransform, we no longer have a need to maintain our Esprima fork ([esprima-fb](https://github.com/facebook/esprima/)). The upstream Esprima and other esprima-based forks, like Espree, have been doing an excellent job of supporting new language features recently. If you have a need of an esprima-based parser, we encourage you to look into using one of those.
+
+Alternatively, if you need to parse JSX, take a look at [acorn](https://github.com/marijnh/acorn) parser in combination with [acorn-jsx](https://github.com/RReverser/acorn-jsx) plugin which is used inside of Babel and thus always supports the latest syntax.
+
+### JSXTransformer {/*jsxtransformer*/}
+
+JSXTransformer is another tool we built specifically for consuming JSX in the browser. It was always intended as a quick way to prototype code before setting up a build process. It would look for `<script>` tags with `type="text/jsx"` and then transform and run. This ran the same code that react-tools ran on the server. Babel ships with [a nearly identical tool](https://babeljs.io/docs/usage/browser/), which has already been integrated into [JS Bin](https://jsbin.com/).
+
+We'll be deprecating JSXTransformer, however the current version will still be available from various CDNs and Bower.
diff --git a/beta/src/content/blog/2015/07/03/react-v0.14-beta-1.md b/beta/src/content/blog/2015/07/03/react-v0.14-beta-1.md
new file mode 100644
index 000000000..6324f993c
--- /dev/null
+++ b/beta/src/content/blog/2015/07/03/react-v0.14-beta-1.md
@@ -0,0 +1,75 @@
+---
+title: React v0.14 Beta 1
+author: [sophiebits]
+---
+
+This week, many people in the React community are at [ReactEurope](https://www.react-europe.org/) in the beautiful (and very warm) city of Paris, the second React conference that's been held to date. At our last conference, we released the first beta of React 0.13, and we figured we'd do the same today with our first beta of React 0.14, giving you something to play with if you're not at the conference or you're looking for something to do on the way home.
+
+With React 0.14, we're continuing to let React mature and to make minor changes as the APIs continue to settle down. I'll talk only about the two largest changes in this blog post; when we publish the final release we'll be sure to update all of our documentation and include a full changelog.
+
+You can install the new beta with `npm install react@0.14.0-beta1` and `npm install react-dom@0.14.0-beta1`. As mentioned in [Deprecating react-tools](/blog/2015/06/12/deprecating-jstransform-and-react-tools.html), we're no longer updating the react-tools package so this release doesn't include a new version of it. Please try the new version out and let us know what you think, and please do file issues on our GitHub repo if you run into any problems.
+
+## Two Packages {/*two-packages*/}
+
+As we look at packages like [react-native](https://github.com/facebook/react-native), [react-art](https://github.com/reactjs/react-art), [react-canvas](https://github.com/Flipboard/react-canvas), and [react-three](https://github.com/Izzimach/react-three), it's become clear that the beauty and essence of React has nothing to do with browsers or the DOM.
+
+We think the true foundations of React are simply ideas of components and elements: being able to describe what you want to render in a declarative way. These are the pieces shared by all of these different packages. The parts of React specific to certain rendering targets aren't usually what we think of when we think of React. As one example, DOM diffing currently enables us to build React for the browser and make it fast enough to be useful, but if the DOM didn't have a stateful, imperative API, we might not need diffing at all.
+
+To make this more clear and to make it easier to build more environments that React can render to, we're splitting the main `react` package into two: `react` and `react-dom`.
+
+The `react` package contains `React.createElement`, `React.createClass` and `React.Component`, `React.PropTypes`, `React.Children`, and the other helpers related to elements and component classes. We think of these as the [_isomorphic_](http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/) or [_universal_](https://medium.com/@mjackson/universal-javascript-4761051b7ae9) helpers that you need to build components.
+
+The `react-dom` package contains `ReactDOM.render`, `ReactDOM.unmountComponentAtNode`, and `ReactDOM.findDOMNode`, and in `react-dom/server` we have server-side rendering support with `ReactDOMServer.renderToString` and `ReactDOMServer.renderToStaticMarkup`.
+
+```js
+var React = require('react');
+var ReactDOM = require('react-dom');
+
+var MyComponent = React.createClass({
+  render: function () {
+    return <div>Hello World</div>;
+  },
+});
+
+ReactDOM.render(<MyComponent />, node);
+```
+
+We anticipate that most components will need to depend only on the `react` package, which is lightweight and doesn't include any of the actual rendering logic. To start, we expect people to render DOM-based components with our `react-dom` package, but there's nothing stopping someone from diving deep on performance and writing a `awesome-faster-react-dom` package which can render _the exact same DOM-based components_. By decoupling the component definitions from the rendering, this becomes possible.
+
+More importantly, this paves the way to writing components that can be shared between the web version of React and React Native. This isn't yet easily possible, but we intend to make this easy in a future version so you can share React code between your website and native apps.
+
+The addons have moved to separate packages as well: `react-addons-clone-with-props`, `react-addons-create-fragment`, `react-addons-css-transition-group`, `react-addons-linked-state-mixin`, `react-addons-pure-render-mixin`, `react-addons-shallow-compare`, `react-addons-transition-group`, and `react-addons-update`, plus `ReactDOM.unstable_batchedUpdates` in `react-dom`.
+
+For now, please use the same version of `react` and `react-dom` in your apps to avoid versioning problems -- but we plan to remove this requirement later. (This release includes the old methods in the `react` package with a deprecation warning, but they'll be removed completely in 0.15.)
+
+## DOM node refs {/*dom-node-refs*/}
+
+The other big change we're making in this release is exposing refs to DOM components as the DOM node itself. That means: we looked at what you can do with a `ref` to a DOM component and realized that the only useful thing you can do with it is call `this.refs.giraffe.getDOMNode()` to get the underlying DOM node. In this release, `this.refs.giraffe` _is_ the actual DOM node.
+
+Refs to custom component classes work exactly as before.
+
+```js
+var Zoo = React.createClass({
+  render: function () {
+    return (
+      <div>
+        Giraffe's name: <input ref="giraffe" />
+      </div>
+    );
+  },
+
+  showName: function () {
+    // Previously:
+    // var input = this.refs.giraffe.getDOMNode();
+    var input = this.refs.giraffe;
+
+    alert(input.value);
+  },
+});
+```
+
+This change also applies to the return result of `ReactDOM.render` when passing a DOM node as the top component. As with refs, this change does not affect custom components (eg. `<MyFancyMenu>` or `<MyContextProvider>`), which remain unaffected by this change.
+
+Along with this change, we're also replacing `component.getDOMNode()` with `ReactDOM.findDOMNode(component)`. The `findDOMNode` method drills down to find which DOM node was rendered by a component, but it returns its argument when passed a DOM node so it's safe to call on a DOM component too. We introduced this function quietly in the last release, but now we're deprecating `.getDOMNode()` completely: it should be easy to change all existing calls in your code to be `ReactDOM.findDOMNode`. We also have an [automated codemod script](https://www.npmjs.com/package/react-codemod) to help you with this transition. Note that the `findDOMNode` calls are unnecessary when you already have a DOM component ref (as in the example above), so you can (and should) skip them in most cases going forward.
+
+We hope you're as excited about this release as we are! Let us know what you think of it.
diff --git a/beta/src/content/blog/2015/08/03/new-react-devtools-beta.md b/beta/src/content/blog/2015/08/03/new-react-devtools-beta.md
new file mode 100644
index 000000000..0a221eff2
--- /dev/null
+++ b/beta/src/content/blog/2015/08/03/new-react-devtools-beta.md
@@ -0,0 +1,92 @@
+---
+title: 'New React Devtools Beta'
+author: [jaredly]
+---
+
+We've made an entirely new version of the devtools, and we want you to try it
+out!
+
+![The full devtools gif](/images/blog/devtools-full.gif)
+
+## Why entirely new? {/*why-entirely-new*/}
+
+Perhaps the biggest reason was to create a defined API for dealing with
+internals, so that other tools could benefit as well and not have to depend on
+implementation details. This gives us more freedom to refactor things
+internally without worrying about breaking tooling.
+
+The current version of the devtools is a fork of Blink's "Elements" pane, and
+is imperative, mutation-driven, and tightly integrated with Chrome-specific
+APIs. The new devtools are much less coupled to Chrome, and easier to reason
+about thanks to React.
+
+## What are the benefits? {/*what-are-the-benefits*/}
+
+- 100% React
+- Firefox compatible
+- React Native compatible
+- more extensible & hackable
+
+## Are there any new features? {/*are-there-any-new-features*/}
+
+Yeah!
+
+### The Tree View {/*the-tree-view*/}
+
+![The new tree view of the devtools](/images/blog/devtools-tree-view.png)
+
+- Much richer view of your props, including the contents of objects and arrays
+- Custom components are emphasized, native components are de-emphasized
+- Stateful components have a red collapser
+- Improved keyboard navigation (hjkl or arrow keys)
+- Selected component is available in the console as `$r`
+- Props that change highlight in green
+- Right-click menu
+
+  - Scroll node into view
+  - Show the source for a component in the "Sources" pane
+  - Show the element in the "Elements" pane
+
+### Searching {/*searching*/}
+
+Select the search bar (or press "/"), and start searching for a component by
+name.
+
+![](/images/blog/devtools-search.gif)
+
+### The Side Pane {/*the-side-pane*/}
+
+- Now shows the `context` for a component
+- Right-click to store a prop/state value as a global variable
+
+![](/images/blog/devtools-side-pane.gif)
+
+## How do I install it? {/*how-do-i-install-it*/}
+
+First, disable the Chrome web store version, or it will break things. Then
+[download the .crx](https://github.com/facebook/react-devtools/releases) and
+drag it into your `chrome://extensions` page. If it's not working to drag it
+from the downloads bar, try opening your downloads folder and drag it from
+there.
+
+Once we've determined that there aren't any major regressions, we'll update
+the official web store version, and everyone will be automatically upgraded.
+
+### Also Firefox! {/*also-firefox*/}
+
+We also have an initial version of the devtools for Firefox, which you can
+download from the same [release page](https://github.com/facebook/react-devtools/releases).
+
+## Feedback welcome {/*feedback-welcome*/}
+
+Let us know what issues you run into
+[on GitHub](https://github.com/facebook/react-devtools/issues), and check out
+[the README](https://github.com/facebook/react-devtools/tree/devtools-next)
+for more info.
+
+## Update {/*update*/}
+
+_August 12, 2015_
+
+A second beta is out, with a number of bugfixes. It is also listed on the
+[releases page](https://github.com/facebook/react-devtools/releases).
diff --git a/beta/src/content/blog/2015/08/11/relay-technical-preview.md b/beta/src/content/blog/2015/08/11/relay-technical-preview.md
new file mode 100644
index 000000000..a16d81209
--- /dev/null
+++ b/beta/src/content/blog/2015/08/11/relay-technical-preview.md
@@ -0,0 +1,35 @@
+---
+title: 'Relay Technical Preview'
+author: [josephsavona]
+---
+
+# Relay {/*relay*/}
+
+Today we're excited to share an update on Relay - the technical preview is now open-source and [available on GitHub](http://github.com/facebook/relay).
+
+## Why Relay {/*why-relay*/}
+
+While React simplified the process of developing complex user-interfaces, it left open the question of how to interact with data on the server. It turns out that this was a significant source of friction for our developers; fragile coupling between client and server caused data-related bugs and made iteration harder. Furthermore, developers were forced to constantly re-implement complex async logic instead of focusing on their apps. Relay addresses these concerns by borrowing important lessons from React: it provides _declarative, component-oriented data fetching for React applications_.
+
+Declarative data-fetching means that Relay applications specify _what_ data they need, not _how_ to fetch that data. Just as React uses a description of the desired UI to manage view updates, Relay uses a data description in the form of GraphQL queries. Given these descriptions, Relay coalesces queries into batches for efficiency, manages error-prone asynchronous logic, caches data for performance, and automatically updates views as data changes.
+
+Relay is also component-oriented, extending the notion of a React component to include a description of what data is necessary to render it. This collocation allows developers to reason locally about their application and eliminates bugs such as under- or over-fetching data.
+
+Relay is in use at Facebook in production apps, and we're using it more and more because _Relay lets developers focus on their products and move fast_. It's working for us and we'd like to share it with the community.
+
+## What's Included {/*whats-included*/}
+
+We're open-sourcing a technical preview of Relay - the core framework that we use internally, with some modifications for use outside Facebook. As this is the first release, it's good to keep in mind that there may be some incomplete or missing features. We'll continue to develop Relay and are working closely with the GraphQL community to ensure that Relay tracks updates during GraphQL's RFC period. But we couldn't wait any longer to get this in your hands, and we're looking forward to your feedback and contributions.
+
+Relay is available on [GitHub](http://github.com/facebook/relay) and [npm](https://www.npmjs.com/package/react-relay).
+
+## What's Next {/*whats-next*/}
+
+The team is super excited to be releasing Relay - and just as excited about what's next. Here are some of the things we'll be focusing on:
+
+- Offline support. This will allow applications to fulfill queries and enqueue updates without connectivity.
+- Real-time updates. In collaboration with the GraphQL community, we're working to define a specification for subscriptions and provide support for them in Relay.
+- A generic Relay. Just as the power of React was never about the virtual DOM, Relay is much more than a GraphQL client. We're working to extend Relay to provide a unified interface for interacting not only with server data, but also in-memory and native device data (and, even better, a mix of all three).
+- Finally, it's all too easy as developers to focus on those people with the newest devices and fastest internet connections. We're working to make it easier to build applications that are robust in the face of slow or intermittent connectivity.
+
+Thanks!
diff --git a/beta/src/content/blog/2015/08/13/reacteurope-roundup.md b/beta/src/content/blog/2015/08/13/reacteurope-roundup.md
new file mode 100644
index 000000000..39b87730d
--- /dev/null
+++ b/beta/src/content/blog/2015/08/13/reacteurope-roundup.md
@@ -0,0 +1,61 @@
+---
+title: 'ReactEurope Round-up'
+author: [matthewjohnston4]
+---
+
+Last month, the first React.js European conference took place in the city of Paris, at ReactEurope. Attendees were treated to a range of talks covering React, React Native, Flux, Relay, and GraphQL. Big thanks to everyone involved with organizing the conference, to all the attendees, and everyone who gave their time to speak - it wouldn't have been possible without the help and support of the React community.
+
+[Christopher Chedeau](https://github.com/vjeux) gave the opening keynote to the conference:
+
+<iframe width="650" height="366" src="//www.youtube.com/embed/PAA9O4E1IM4" frameborder="0" allowfullscreen></iframe>
+
+[Spencer Ahrens](https://github.com/sahrens) walks through building an advanced gestural UI leveraging the unique power of the React Native layout and animation systems to build a complex and fluid experience:
+
+<iframe width="650" height="366" src="//www.youtube.com/embed/xDlfrcM6YBk" frameborder="0" allowfullscreen></iframe>
+
+[Lee Byron](https://github.com/leebyron) explores GraphQL, its core principles, how it works, and what makes it a powerful tool:
+
+<iframe width="650" height="366" src="//www.youtube.com/embed/WQLzZf34FJ8" frameborder="0" allowfullscreen></iframe>
+
+[Joseph Savona](https://github.com/josephsavona) explores the problems Relay solves, its architecture and the query lifecycle, and how can you use Relay to build more scalable apps. There are examples of how Relay powers applications as complex as the Facebook News Feed:
+
+<iframe width="650" height="366" src="//www.youtube.com/embed/IrgHurBjQbg" frameborder="0" allowfullscreen></iframe>
+
+[Nick Schrock](https://github.com/schrockn) and [Dan Schafer](https://github.com/dschafer) take a deeper dive into putting GraphQL to work. How can we build a GraphQL API to work with an existing REST API or server-side data model? What are best practices when building a GraphQL API, and how do they differ from traditional REST best practices? How does Facebook use GraphQL? Most importantly, what does a complete and coherent GraphQL API looks like, and how can we get started building one?
+
+<iframe width="650" height="366" src="//www.youtube.com/embed/gY48GW87Feo" frameborder="0" allowfullscreen></iframe>
+
+[Sebastian Markbåge](https://github.com/sebmarkbage) talks about why the DOM is flawed and how it is becoming a second-class citizen in the land of React apps:
+
+<iframe width="650" height="366" src="//www.youtube.com/embed/Zemce4Y1Y-A" frameborder="0" allowfullscreen></iframe>
+
+[Sebastian McKenzie](https://github.com/sebmck) goes over how existing JSX build pipeline infrastructure can be further utilised to perform even more significant code transformations such as transpilation, optimisation, profiling and more, reducing bugs, making your code faster and you as a developer more productive and happy:
+
+<iframe width="650" height="366" src="//www.youtube.com/embed/OFuDvqZmUrE" frameborder="0" allowfullscreen></iframe>
+
+[Cheng Lou](https://github.com/chenglou) gives a talk on the past, the present and the future of animation, and the place React can potentially take in this:
+
+<iframe width="650" height="366" src="//www.youtube.com/embed/1tavDv5hXpo" frameborder="0" allowfullscreen></iframe>
+
+And there was a Q&A session with the whole team covering a range of React topics:
+
+<iframe width="650" height="366" src="//www.youtube.com/embed/CRJZBZ_-6hQ" frameborder="0" allowfullscreen></iframe>
+
+And there were lots of great talks from the React community:
+
+- [Michael Chan](https://www.youtube.com/watch?v=ERB1TJBn32c&list=PLCC436JpVnK0Phxld2dD4tM4xPMxJCiRD&index=2) looks at how to solve problems like CSS theming and media queries with contexts and plain old JavaScript. He also looks at the role of container-components and when it's better to "just use CSS.".
+- [Elie Rotenberg](https://www.youtube.com/watch?v=JSjhhUvB9DY&index=3&list=PLCC436JpVnK0Phxld2dD4tM4xPMxJCiRD) talks about Flux over the Wire, building isomorphic, real-time React apps using a novel interpretation of Flux.
+- [Ryan Florence](https://www.youtube.com/watch?v=BF58ZJ1ZQxY&list=PLCC436JpVnK0Phxld2dD4tM4xPMxJCiRD&index=6) says “Your front and back ends are already successfully in production but you don't have to miss out on the productivity that React brings. Forget the rewrites, this is brownfield!”.
+- [Dan Abramov](https://www.youtube.com/watch?v=xsSnOQynTHs&index=7&list=PLCC436JpVnK0Phxld2dD4tM4xPMxJCiRD) demonstrates how React can be used together with webpack Hot Module Replacement to create a live editing environment with time travel that supercharges your debugging experience and transforms the way you work on real apps every day.
+- [Mikhail Davydov](https://www.youtube.com/watch?v=ee_U2t-8L48&index=10&list=PLCC436JpVnK0Phxld2dD4tM4xPMxJCiRD) shows you how to ask the browser layout engine for help, how to avoid slavery of DSL, and build declarative Text UI using only web-technologies like HTML, JS, CSS and React.
+- [Kevin Robinson](https://www.youtube.com/watch?v=EOz4D_714R8&list=PLCC436JpVnK3HvUSAHpt-LRJkIK8pQG6R&index=3) shares how user experience choices are a primary influence on how Twitter design the data layer, especially for teams developing new products with full-stack capabilities.
+- [Jed Watson](https://www.youtube.com/watch?v=ctwmd5L1U_Q&list=PLCC436JpVnK3HvUSAHpt-LRJkIK8pQG6R&index=4) shares what Thinkmill have learned about React and mobile app development, and how they've approached the unique challenges of mobile web apps - with tools that are useful to all developers building touch interfaces with React, as well as a walkthrough of their development process and framework.
+- [Michael Jackson](https://www.youtube.com/watch?v=Q6Kczrgw6ic&list=PLCC436JpVnK3HvUSAHpt-LRJkIK8pQG6R&index=5) discusses how your users can benefit from the many tools that React Router provides including server-side rendering, real URLs on native devices, and much, much more.
+- [Michael Ridgway](https://www.youtube.com/watch?v=MrozpFEBEBE&index=7&list=PLCC436JpVnK3HvUSAHpt-LRJkIK8pQG6R) walks you through an isomorphic Flux architecture to give you the holy grail of frontend development.
+- [Aria Buckles](https://www.youtube.com/watch?v=2Qu-Ulrsfl8&index=8&list=PLCC436JpVnK3HvUSAHpt-LRJkIK8pQG6R) covers Khan Academy's techniques and patterns to make dealing with large pure components simpler, as well as current open questions.
+- [Evan Morikawa and Ben Gotow](https://www.youtube.com/watch?v=Uu4Yz2HmCgE&index=9&list=PLCC436JpVnK3HvUSAHpt-LRJkIK8pQG6R) talk about specific features of React & Flux, React CSS, programming design patterns, and custom libraries, which can turn a static application into a dynamic platform that an ecosystem of developers can build on top of.
+- [Zalando](https://www.youtube.com/watch?v=3EQhkquvVmY&list=PLCC436JpVnK0Phxld2dD4tM4xPMxJCiRD&index=9), [Rangle.io](https://www.youtube.com/watch?v=nAWKR1bBDsU&index=12&list=PLCC436JpVnK0Phxld2dD4tM4xPMxJCiRD), [Automattic](https://www.youtube.com/watch?v=hjhyrBbDp6U&index=13&list=PLCC436JpVnK0Phxld2dD4tM4xPMxJCiRD), [Thinkmill](https://www.youtube.com/watch?v=ApoCktYaRxk&list=PLCC436JpVnK0Phxld2dD4tM4xPMxJCiRD&index=14), and [Red Badger](https://www.youtube.com/watch?v=hdKidiwR8DM&list=PLCC436JpVnK0Phxld2dD4tM4xPMxJCiRD&index=15) provided lots of insight into how larger companies are using React.
+
+There was also a [great series of Lightning talks](https://www.youtube.com/playlist?list=PLCC436JpVnK3xnOZ727t0vd3nbb5ZqCyo) from [Joshua Sierles](https://github.com/jsierles), [Ovidiu Cherecheș](https://github.com/skidding), [Mike Grabowski](https://github.com/grabbou), [Dave Brotherstone](https://github.com/bruderstein), [Sunil Pai](https://github.com/threepointone), [Andreas Savvides](https://github.com/AnSavvides), and [Petr Bela](https://github.com/petrbela).
+
+You can view the full list of talks on [the ReactEurope YouTube channel](https://www.youtube.com/channel/UCorlLn2oZfgOJ-FUcF2eZ1A).
diff --git a/beta/src/content/blog/2015/09/02/new-react-developer-tools.md b/beta/src/content/blog/2015/09/02/new-react-developer-tools.md
new file mode 100644
index 000000000..95f58528e
--- /dev/null
+++ b/beta/src/content/blog/2015/09/02/new-react-developer-tools.md
@@ -0,0 +1,26 @@
+---
+title: 'New React Developer Tools'
+author: [sophiebits]
+---
+
+A month ago, we [posted a beta](/blog/2015/08/03/new-react-devtools-beta.html) of the new React developer tools. Today, we're releasing the first stable version of the new devtools. We're calling it version 0.14, but it's a full rewrite so we think of it more like a 2.0 release.
+
+![Video/screenshot of new devtools](/images/blog/devtools-full.gif)
+
+It contains a handful of new features, including:
+
+- Built entirely with React, making it easier to develop and extend
+- Firefox support
+- Selected component instance is available as `$r` from the console
+- More detail is shown in props in the component tree
+- Right-click any node and choose "Show Source" to jump to the `render` method in the Sources panel
+- Right-click any props or state value to make it available as `$tmp` from the console
+- Full React Native support
+
+## Installation {/*installation*/}
+
+Download the new devtools from the [Chrome Web Store](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi), [Firefox Add-ons](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) for Firefox, and [Microsoft Edge Addons](https://microsoftedge.microsoft.com/addons/detail/gpphkfbcpidddadnkolkpfckpihlkkil) for Edge. If you're developing using React, we highly recommend installing these devtools.
+
+If you already have the Chrome extension installed, it should autoupdate within the next week. You can also head to `chrome://extensions` and click "Update extensions now" if you'd like to get the new version today. If you installed the devtools beta, please remove it and switch back to the version from the store to make sure you always get the latest updates and bug fixes.
+
+If you run into any issues, please post them on the [React GitHub repo](https://github.com/facebook/react).
diff --git a/beta/src/content/blog/2015/09/10/react-v0.14-rc1.md b/beta/src/content/blog/2015/09/10/react-v0.14-rc1.md
new file mode 100644
index 000000000..c452c0fa8
--- /dev/null
+++ b/beta/src/content/blog/2015/09/10/react-v0.14-rc1.md
@@ -0,0 +1,178 @@
+---
+title: 'React v0.14 Release Candidate'
+author: [sophiebits]
+---
+
+We’re happy to announce our first release candidate for React 0.14! We gave you a [sneak peek in July](/blog/2015/07/03/react-v0.14-beta-1.html) at the upcoming changes but we’ve now stabilized the release more and we’d love for you to try it out before we release the final version.
+
+Let us know if you run into any problems by filing issues on our [GitHub repo](https://github.com/facebook/react).
+
+## Installation {/*installation*/}
+
+We recommend using React from `npm` and using a tool like browserify or webpack to build your code into a single package:
+
+- `npm install --save react@0.14.0-rc1`
+- `npm install --save react-dom@0.14.0-rc1`
+
+Remember that by default, React runs extra checks and provides helpful warnings in development mode. When deploying your app, set the `NODE_ENV` environment variable to `production` to use the production build of React which does not include the development warnings and runs significantly faster.
+
+If you can’t use `npm` yet, we also provide pre-built browser builds for your convenience:
+
+- **React**  
+  Dev build with warnings: https://fb.me/react-0.14.0-rc1.js  
+  Minified build for production: https://fb.me/react-0.14.0-rc1.min.js
+- **React with Add-Ons**  
+  Dev build with warnings: https://fb.me/react-with-addons-0.14.0-rc1.js  
+  Minified build for production: https://fb.me/react-with-addons-0.14.0-rc1.min.js
+- **React DOM** (include React in the page before React DOM)  
+  Dev build with warnings: https://fb.me/react-dom-0.14.0-rc1.js  
+  Minified build for production: https://fb.me/react-dom-0.14.0-rc1.min.js
+
+These builds are also available in the `react` package on bower.
+
+## Changelog {/*changelog*/}
+
+### Major changes {/*major-changes*/}
+
+- #### Two Packages: React and React DOM
+
+  As we look at packages like [react-native](https://github.com/facebook/react-native), [react-art](https://github.com/reactjs/react-art), [react-canvas](https://github.com/Flipboard/react-canvas), and [react-three](https://github.com/Izzimach/react-three), it has become clear that the beauty and essence of React has nothing to do with browsers or the DOM.
+
+  To make this more clear and to make it easier to build more environments that React can render to, we’re splitting the main `react` package into two: `react` and `react-dom`. **This paves the way to writing components that can be shared between the web version of React and React Native.** We don’t expect all the code in an app to be shared, but we want to be able to share the components that do behave the same across platforms.
+
+  The `react` package contains `React.createElement`, `.createClass`, `.Component`, `.PropTypes`, `.Children`, and the other helpers related to elements and component classes. We think of these as the [_isomorphic_](http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/) or [_universal_](https://medium.com/@mjackson/universal-javascript-4761051b7ae9) helpers that you need to build components.
+
+  The `react-dom` package has `ReactDOM.render`, `.unmountComponentAtNode`, and `.findDOMNode`. In `react-dom/server` we have server-side rendering support with `ReactDOMServer.renderToString` and `.renderToStaticMarkup`.
+
+  ```js
+  var React = require('react');
+  var ReactDOM = require('react-dom');
+
+  var MyComponent = React.createClass({
+    render: function () {
+      return <div>Hello World</div>;
+    },
+  });
+
+  ReactDOM.render(<MyComponent />, node);
+  ```
+
+  We’ve published the [automated codemod script](https://github.com/reactjs/react-codemod/blob/master/README.md) we used at Facebook to help you with this transition.
+
+  The add-ons have moved to separate packages as well: `react-addons-clone-with-props`, `react-addons-create-fragment`, `react-addons-css-transition-group`, `react-addons-linked-state-mixin`, `react-addons-perf`, `react-addons-pure-render-mixin`, `react-addons-shallow-compare`, `react-addons-test-utils`, `react-addons-transition-group`, and `react-addons-update`, plus `ReactDOM.unstable_batchedUpdates` in `react-dom`.
+
+  For now, please use matching versions of `react` and `react-dom` in your apps to avoid versioning problems.
+
+- #### DOM node refs
+
+  The other big change we’re making in this release is exposing refs to DOM components as the DOM node itself. That means: we looked at what you can do with a `ref` to a React DOM component and realized that the only useful thing you can do with it is call `this.refs.giraffe.getDOMNode()` to get the underlying DOM node. In this release, `this.refs.giraffe` _is_ the actual DOM node. **Note that refs to custom (user-defined) components work exactly as before; only the built-in DOM components are affected by this change.**
+
+  ```js
+  var Zoo = React.createClass({
+    render: function () {
+      return (
+        <div>
+          Giraffe name: <input ref="giraffe" />
+        </div>
+      );
+    },
+    showName: function () {
+      // Previously: var input = this.refs.giraffe.getDOMNode();
+      var input = this.refs.giraffe;
+      alert(input.value);
+    },
+  });
+  ```
+
+  This change also applies to the return result of `ReactDOM.render` when passing a DOM node as the top component. As with refs, this change does not affect custom components. With these changes, we’re deprecating `.getDOMNode()` and replacing it with `ReactDOM.findDOMNode` (see below).
+
+- #### Stateless function components
+
+  In idiomatic React code, most of the components you write will be stateless, simply composing other components. We’re introducing a new, simpler syntax for these components where you can take `props` as an argument and return the element you want to render:
+
+  ```js
+  // Using an ES2015 (ES6) arrow function:
+  var Aquarium = (props) => {
+    var fish = getFish(props.species);
+    return <Tank>{fish}</Tank>;
+  };
+
+  // Or with destructuring and an implicit return, simply:
+  var Aquarium = ({species}) => <Tank>{getFish(species)}</Tank>;
+
+  // Then use: <Aquarium species="rainbowfish" />
+  ```
+
+  This pattern is designed to encourage the creation of these simple components that should comprise large portions of your apps. In the future, we’ll also be able to make performance optimizations specific to these components by avoiding unnecessary checks and memory allocations.
+
+- #### Deprecation of react-tools
+
+  The `react-tools` package and `JSXTransformer.js` browser file [have been deprecated](/blog/2015/06/12/deprecating-jstransform-and-react-tools.html). You can continue using version `0.13.3` of both, but we no longer support them and recommend migrating to [Babel](http://babeljs.io/), which has built-in support for React and JSX.
+
+- #### Compiler optimizations
+
+  React now supports two compiler optimizations that can be enabled in Babel 5.8.23 and newer. Both of these transforms **should be enabled only in production** (e.g., just before minifying your code) because although they improve runtime performance, they make warning messages more cryptic and skip important checks that happen in development mode, including propTypes.
+
+  **Inlining React elements:** The `optimisation.react.inlineElements` transform converts JSX elements to object literals like `{type: 'div', props: ...}` instead of calls to `React.createElement`.
+
+  **Constant hoisting for React elements:** The `optimisation.react.constantElements` transform hoists element creation to the top level for subtrees that are fully static, which reduces calls to `React.createElement` and the resulting allocations. More importantly, it tells React that the subtree hasn’t changed so React can completely skip it when reconciling.
+
+### Breaking changes {/*breaking-changes*/}
+
+As always, we have a few breaking changes in this release. Whenever we make large changes, we warn for at least one release so you have time to update your code. The Facebook codebase has over 15,000 React components, so on the React team, we always try to minimize the pain of breaking changes.
+
+These three breaking changes had a warning in 0.13, so you shouldn’t have to do anything if your code is already free of warnings:
+
+- The `props` object is now frozen, so mutating props after creating a component element is no longer supported. In most cases, [`React.cloneElement`](/docs/top-level-api.html#react.cloneelement) should be used instead. This change makes your components easier to reason about and enables the compiler optimizations mentioned above.
+- Plain objects are no longer supported as React children; arrays should be used instead. You can use the [`createFragment`](/docs/create-fragment.html) helper to migrate, which now returns an array.
+- Add-Ons: `classSet` has been removed. Use [classnames](https://github.com/JedWatson/classnames) instead.
+
+And these two changes did not warn in 0.13 but should be easy to find and clean up:
+
+- `React.initializeTouchEvents` is no longer necessary and has been removed completely. Touch events now work automatically.
+- Add-Ons: Due to the DOM node refs change mentioned above, `TestUtils.findAllInRenderedTree` and related helpers are no longer able to take a DOM component, only a custom component.
+
+### New deprecations, introduced with a warning {/*new-deprecations-introduced-with-a-warning*/}
+
+- Due to the DOM node refs change mentioned above, `this.getDOMNode()` is now deprecated and `ReactDOM.findDOMNode(this)` can be used instead. Note that in most cases, calling `findDOMNode` is now unnecessary – see the example above in the “DOM node refs” section.
+
+  If you have a large codebase, you can use our [automated codemod script](https://github.com/facebook/react/blob/master/packages/react-codemod/README.md) to change your code automatically.
+
+- `setProps` and `replaceProps` are now deprecated. Instead, call ReactDOM.render again at the top level with the new props.
+- ES6 component classes must now extend `React.Component` in order to enable stateless function components. The [ES3 module pattern](/blog/2015/01/27/react-v0.13.0-beta-1.html#other-languages) will continue to work.
+- Reusing and mutating a `style` object between renders has been deprecated. This mirrors our change to freeze the `props` object.
+- Add-Ons: `cloneWithProps` is now deprecated. Use [`React.cloneElement`](/docs/top-level-api.html#react.cloneelement) instead (unlike `cloneWithProps`, `cloneElement` does not merge `className` or `style` automatically; you can merge them manually if needed).
+- Add-Ons: To improve reliability, `CSSTransitionGroup` will no longer listen to transition events. Instead, you should specify transition durations manually using props such as `transitionEnterTimeout={500}`.
+
+### Notable enhancements {/*notable-enhancements*/}
+
+- Added `React.Children.toArray` which takes a nested children object and returns a flat array with keys assigned to each child. This helper makes it easier to manipulate collections of children in your `render` methods, especially if you want to reorder or slice `this.props.children` before passing it down. In addition, `React.Children.map` now returns plain arrays too.
+- React uses `console.error` instead of `console.warn` for warnings so that browsers show a full stack trace in the console. (Our warnings appear when you use patterns that will break in future releases and for code that is likely to behave unexpectedly, so we do consider our warnings to be “must-fix” errors.)
+- Previously, including untrusted objects as React children [could result in an XSS security vulnerability](http://danlec.com/blog/xss-via-a-spoofed-react-element). This problem should be avoided by properly validating input at the application layer and by never passing untrusted objects around your application code. As an additional layer of protection, [React now tags elements](https://github.com/facebook/react/pull/4832) with a specific [ES2015 (ES6) `Symbol`](http://www.2ality.com/2014/12/es6-symbols.html) in browsers that support it, in order to ensure that React never considers untrusted JSON to be a valid element. If this extra security protection is important to you, you should add a `Symbol` polyfill for older browsers, such as the one included by [Babel’s polyfill](http://babeljs.io/docs/usage/polyfill/).
+- When possible, React DOM now generates XHTML-compatible markup.
+- React DOM now supports these standard HTML attributes: `capture`, `challenge`, `inputMode`, `is`, `keyParams`, `keyType`, `minLength`, `summary`, `wrap`. It also now supports these non-standard attributes: `autoSave`, `results`, `security`.
+- React DOM now supports these SVG attributes, which render into namespaced attributes: `xlinkActuate`, `xlinkArcrole`, `xlinkHref`, `xlinkRole`, `xlinkShow`, `xlinkTitle`, `xlinkType`, `xmlBase`, `xmlLang`, `xmlSpace`.
+- The `image` SVG tag is now supported by React DOM.
+- In React DOM, arbitrary attributes are supported on custom elements (those with a hyphen in the tag name or an `is="..."` attribute).
+- React DOM now supports these media events on `audio` and `video` tags: `onAbort`, `onCanPlay`, `onCanPlayThrough`, `onDurationChange`, `onEmptied`, `onEncrypted`, `onEnded`, `onError`, `onLoadedData`, `onLoadedMetadata`, `onLoadStart`, `onPause`, `onPlay`, `onPlaying`, `onProgress`, `onRateChange`, `onSeeked`, `onSeeking`, `onStalled`, `onSuspend`, `onTimeUpdate`, `onVolumeChange`, `onWaiting`.
+- Many small performance improvements have been made.
+- Many warnings show more context than before.
+- Add-Ons: A [`shallowCompare`](https://github.com/facebook/react/pull/3355) add-on has been added as a migration path for `PureRenderMixin` in ES6 classes.
+- Add-Ons: `CSSTransitionGroup` can now use [custom class names](https://github.com/facebook/react/blob/48942b85/docs/docs/10.1-animation.md#custom-classes) instead of appending `-enter-active` or similar to the transition name.
+
+### New helpful warnings {/*new-helpful-warnings*/}
+
+- React DOM now warns you when nesting HTML elements invalidly, which helps you avoid surprising errors during updates.
+- Passing `document.body` directly as the container to `ReactDOM.render` now gives a warning as doing so can cause problems with browser extensions that modify the DOM.
+- Using multiple instances of React together is not supported, so we now warn when we detect this case to help you avoid running into the resulting problems.
+
+### Notable bug fixes {/*notable-bug-fixes*/}
+
+- Click events are handled by React DOM more reliably in mobile browsers, particularly in Mobile Safari.
+- SVG elements are created with the correct namespace in more cases.
+- React DOM now renders `<option>` elements with multiple text children properly and renders `<select>` elements on the server with the correct option selected.
+- When two separate copies of React add nodes to the same document (including when a browser extension uses React), React DOM tries harder not to throw exceptions during event handling.
+- Using non-lowercase HTML tag names in React DOM (e.g., `React.createElement('DIV')`) no longer causes problems, though we continue to recommend lowercase for consistency with the JSX tag name convention (lowercase names refer to built-in components, capitalized names refer to custom components).
+- React DOM understands that these CSS properties are unitless and does not append “px” to their values: `animationIterationCount`, `boxOrdinalGroup`, `flexOrder`, `tabSize`, `stopOpacity`.
+- Add-Ons: When using the test utils, `Simulate.mouseEnter` and `Simulate.mouseLeave` now work.
+- Add-Ons: ReactTransitionGroup now correctly handles multiple nodes being removed simultaneously.
diff --git a/beta/src/content/blog/2015/09/14/community-roundup-27.md b/beta/src/content/blog/2015/09/14/community-roundup-27.md
new file mode 100644
index 000000000..9a06e32e1
--- /dev/null
+++ b/beta/src/content/blog/2015/09/14/community-roundup-27.md
@@ -0,0 +1,75 @@
+---
+title: 'Community Round-up #27 – Relay Edition'
+author: [steveluscher]
+---
+
+In the weeks following the [open-source release](/blog/2015/08/11/relay-technical-preview.html) of the Relay technical preview, the community has been abuzz with activity. We are honored to have been able to enjoy a steady stream of ideas and contributions from such a talented group of individuals. Let's take a look at some of the things we've achieved, together!
+
+## Teaching servers to speak GraphQL {/*teaching-servers-to-speak-graphql*/}
+
+Every great Relay app starts by finding a GraphQL server to talk to. The community has spent the past few weeks teaching GraphQL to a few backend systems.
+
+Bryan Goldstein ([brysgo](https://github.com/brysgo)) has built a tool to help you define a GraphQL schema that wraps a set of [Bookshelf.JS](http://bookshelfjs.org/) models. Check out [graphql-bookshelf](https://github.com/brysgo/graphql-bookshelf).
+
+RisingStack ([risingstack](https://github.com/risingstack)) created a GraphQL ORM called [graffiti](https://github.com/RisingStack/graffiti) that you can plug into [mongoose](http://mongoosejs.com/) and serve using Express, Hapi, or Koa.
+
+David Mongeau-Petitpas ([dmongeau](https://github.com/dmongeau)) is working on a way to vend your Laravel models through a GraphQL endpoint, [laravel-graphql](https://github.com/Folkloreatelier/laravel-graphql).
+
+Gerald Monaco ([devknoll](https://github.com/devknoll)) created [graphql-schema](https://github.com/devknoll/graphql-schema) to allow the creation of JavaScript GraphQL schemas using a fluent/chainable interface.
+
+Jason Dusek ([solidsnack](https://github.com/solidsnack)) dove deep into PostgreSQL to teach it how to respond to GraphQL query strings as though they were SQL queries. Check out [GraphpostgresQL](https://github.com/solidsnack/GraphpostgresQL).
+
+Espen Hovlandsdal ([rexxars](https://github.com/rexxars)) built a [sql-to-graphql](https://github.com/vaffel/sql-to-graphql) tool that can perform introspection on the tables of a MySQL or PostgreSQL database, and produce a queryable HTTP GraphQL endpoint out of it.
+
+Mick Hansen ([mickhansen](https://github.com/mickhansen)) offers a set of [schema-building helpers](https://github.com/mickhansen/graphql-sequelize) for use with the [Sequelize ORM](http://docs.sequelizejs.com/en/latest/) for MySQL, PostgreSQL, SQLite, and MSSQL.
+
+## GraphQL beyond JavaScript {/*graphql-beyond-javascript*/}
+
+Robert Mosolgo ([rmosolgo](https://github.com/rmosolgo)) brought the full set of schema-building and query execution tools to Ruby, in the form of [graphql-ruby](https://github.com/rmosolgo/graphql-ruby) and [graphql-relay-ruby](https://github.com/rmosolgo/graphql-relay-ruby). Check out his [Rails-based demo](https://github.com/rmosolgo/graphql-ruby-demo).
+
+Andreas Marek ([andimarek](https://github.com/andimarek)) has brewed up a Java implementation of GraphQL, [graphql-java](https://github.com/andimarek/graphql-java).
+
+[vladar](https://github.com/vladar) is hard at work on a PHP port of the GraphQL reference implementation, [graphql-php](https://github.com/webonyx/graphql-php).
+
+Taeho Kim ([dittos](https://github.com/dittos)) is bringing GraphQL to Python, with [graphql-py](https://github.com/dittos/graphql-py).
+
+Oleg Ilyenko ([OlegIlyenko](https://github.com/OlegIlyenko)) made a beautiful and [delicious-looking website](http://sangria-graphql.org/) for a Scala implementation of GraphQL, [sangria](https://github.com/sangria-graphql/sangria).
+
+Joe McBride ([joemcbride](https://github.com/joemcbride)) has an up-and-running example of GraphQL for .NET, [graphql-dotnet](https://github.com/joemcbride/graphql-dotnet).
+
+## Show me, don't tell me {/*show-me-dont-tell-me*/}
+
+Interact with this [visual tour of Relay's architecture](http://sgwilym.github.io/relay-visual-learners/) by Sam Gwilym ([sgwilym](https://github.com/sgwilym)).
+
+<a href="http://sgwilym.github.io/relay-visual-learners/">
+  <img src="/images/blog/relay-visual-architecture-tour.png" alt="Relay for visual learners"  />
+</a>
+
+Sam has already launched a product that leverages Relay's data-fetching, optimistic responses, pagination, and mutations &ndash; all atop a Ruby GraphQL server: [new.comique.co](http://new.comique.co/)
+
+## Skeletons in the closet {/*skeletons-in-the-closet*/}
+
+Joseph Rollins ([fortruce](https://github.com/fortruce)) created a hot-reloading, auto schema-regenerating, [Relay skeleton](https://github.com/fortruce/relay-skeleton) that you can use to get up and running quickly.
+
+Michael Hart ([mhart](https://mhart)) built a [simple-relay-starter](https://github.com/mhart/simple-relay-starter) kit using Browserify.
+
+## Routing around {/*routing-around*/}
+
+Jimmy Jia ([taion](@taion)) and Gerald Monaco ([devknoll](@devknoll)) have been helping lost URLs find their way to Relay apps through their work on [react-router-relay](relay-tools/react-router-relay). Check out Christoph Nakazawa's ([cpojer](@cpojer)) [blog post](medium.com/@cpojer/relay-and-routing-36b5439bad9) on the topic. Jimmy completed the Relay TodoMVC example with routing, which you can check out at [taion/relay-todomvc](taion/relay-todomvc).
+
+Chen Hung-Tu ([transedward](https://github.com/transedward)) built a chat app atop the above mentioned router, with threaded conversations and pagination. Check it out at [transedward/relay-chat](https://github.com/transedward/relay-chat).
+
+## In your words {/*in-your-words*/}
+
+<div class="skinny-row">
+  <div class="skinny-col">
+    <blockquote class="twitter-tweet" lang="en"><p lang="en" dir="ltr">Relay making good on its promise to be the &quot;React.js of data fetching&quot;. Rebuilding small app with it. Spectacular how fast/easy building is.</p>&mdash; Kyle Mathews (@kylemathews) <a href="https://twitter.com/kylemathews/status/640289107122368513">September 5, 2015</a></blockquote>
+    <blockquote class="twitter-tweet" lang="en"><p lang="en" dir="ltr"><a href="https://twitter.com/hashtag/RainySundayHackathon?src=hash">#RainySundayHackathon</a> exploring <a href="https://twitter.com/hashtag/GraphQL?src=hash">#GraphQL</a> <a href="https://twitter.com/hashtag/RelayJS?src=hash">#RelayJS</a> <a href="http://t.co/Mm3HlqMejJ">pic.twitter.com/Mm3HlqMejJ</a></p>&mdash; Bastian Kistner (@passionkind) <a href="https://twitter.com/passionkind/status/632846601447411712">August 16, 2015</a></blockquote>
+    <blockquote class="twitter-tweet" lang="en"><p lang="en" dir="ltr">Friday. Time to GraphQL a MySQL database. <a href="https://twitter.com/hashtag/graphql?src=hash">#graphql</a> <a href="https://twitter.com/hashtag/relayjs?src=hash">#relayjs</a> <a href="https://twitter.com/hashtag/reactjs?src=hash">#reactjs</a> <a href="https://twitter.com/hashtag/webapp?src=hash">#webapp</a></p>&mdash; xador (@xadorfr) <a href="https://twitter.com/xadorfr/status/632108552765751296">August 14, 2015</a></blockquote>
+  </div>
+  <div class="skinny-col">
+    <blockquote class="twitter-tweet" lang="en"><p lang="en" dir="ltr">Started a new <a href="https://twitter.com/hashtag/RelayJS?src=hash">#RelayJS</a> and <a href="https://twitter.com/hashtag/GraphQL?src=hash">#GraphQL</a> meet up group! <a href="http://t.co/Vt6Cv4nNH4">http://t.co/Vt6Cv4nNH4</a> If you&#39;re in the Bay Area, I&#39;d love to have you join! <a href="https://twitter.com/hashtag/ReactJS?src=hash">#ReactJS</a></p>&mdash; Gerald Monaco (@devknoll) <a href="https://twitter.com/devknoll/status/636723716123000832">August 27, 2015</a></blockquote>
+    <blockquote class="twitter-tweet" lang="en"><p lang="en" dir="ltr">.<a href="https://twitter.com/reactjs">@reactjs</a> <a href="https://twitter.com/laneykuenzel">@laneykuenzel</a> <a href="https://twitter.com/BhuwanKhattar">@BhuwanKhattar</a> these <a href="https://twitter.com/hashtag/relayjs?src=hash">#relayjs</a> mutations. they&#39;re mind-blowingly awesome. they make so much damn sense. thank you!</p>&mdash; Jimmy Jia (@jimmy_jia) <a href="https://twitter.com/jimmy_jia/status/634204563709526016">August 20, 2015</a></blockquote>
+    <blockquote class="twitter-tweet" lang="en"><p lang="en" dir="ltr">REST is dead, long live REST! <a href="https://twitter.com/hashtag/graphql?src=hash">#graphql</a> <a href="https://twitter.com/hashtag/relayjs?src=hash">#relayjs</a></p>&mdash; Syrus Akbary (@syrusakbary) <a href="https://twitter.com/syrusakbary/status/631531666113060864">August 12, 2015</a></blockquote>
+  </div>
+</div>
diff --git a/beta/src/content/blog/2015/10/01/react-render-and-top-level-api.md b/beta/src/content/blog/2015/10/01/react-render-and-top-level-api.md
new file mode 100644
index 000000000..44c1dcce0
--- /dev/null
+++ b/beta/src/content/blog/2015/10/01/react-render-and-top-level-api.md
@@ -0,0 +1,131 @@
+---
+title: 'ReactDOM.render and the Top Level React API'
+author: ['jimfb', 'sebmarkbage']
+---
+
+When you're in React's world you are just building components that fit into other components. Everything is a component. Unfortunately not everything around you is built using React. At the root of your tree you still have to write some plumbing code to connect the outer world into React.
+
+The primary API for rendering into the DOM looks like this:
+
+```js
+ReactDOM.render(reactElement, domContainerNode);
+```
+
+To update the properties of an existing component, you call render again with a new element.
+
+If you are rendering React components within a single-page app, you may need to plug into the app's view lifecycle to ensure your app will invoke unmountComponentAtNode at the appropriate time. React will not automatically clean up a tree. You need to manually call:
+
+```js
+ReactDOM.unmountComponentAtNode(domContainerNode);
+```
+
+This is important and often forgotten. Forgetting to call `unmountComponentAtNode` will cause your app to leak memory. There is no way for us to automatically detect when it is appropriate to do this work. Every system is different.
+
+It is not unique to the DOM. If you want to insert a React Native view in the middle of an existing iOS app you will hit similar issues.
+
+## Helpers {/*helpers*/}
+
+If you have multiple React roots, or a single root that gets deleted over time, we recommend that you always create your own wrapper API. These will all look slightly different depending on what your outer system looks like. For example, at Facebook we have a system that automatically ties into our page transition router to automatically call `unmountComponentAtNode`.
+
+Rather than calling `ReactDOM.render()` directly everywhere, consider writing/using a library that will manage mounting and unmounting within your application.
+
+In your environment you may want to always configure internationalization, routers, user data etc. If you have many different React roots it can be a pain to set up configuration nodes all over the place. By creating your own wrapper you can unify that configuration into one place.
+
+## Object Oriented Updates {/*object-oriented-updates*/}
+
+If you call `ReactDOM.render` a second time to update properties, all your props are completely replaced.
+
+```js
+ReactDOM.render(<App locale="en-US" userID={1} />, container);
+// props.userID == 1
+// props.locale == "en-US"
+ReactDOM.render(<App userID={2} />, container);
+// props.userID == 2
+// props.locale == undefined ??!?
+```
+
+In object-oriented programming, all state lives on each object instance and you apply changes incrementally by mutating that state, one piece at a time. If you are using React within an app that expects an object oriented API (for instance, if you are building a custom web component using React), it might be surprising/confusing to a user that setting a single property would wipe out all the other properties on your component.
+
+We used to have a helper function called `setProps` which allowed you to update only a few properties at a time. Unfortunately this API lived on a component instance, required React to keep this state internally and wasn't very natural anyway. Therefore, we're deprecating it and suggest that you build it into your own wrapper instead.
+
+Here's some boilerplate to get you started. It is a 0.14 migration path for codebases using `setProps` and `replaceProps`.
+
+```js
+class ReactComponentRenderer {
+  constructor(klass, container) {
+    this.klass = klass;
+    this.container = container;
+    this.props = {};
+    this.component = null;
+  }
+
+  replaceProps(props, callback) {
+    this.props = {};
+    this.setProps(props, callback);
+  }
+
+  setProps(partialProps, callback) {
+    if (this.klass == null) {
+      console.warn(
+        'setProps(...): Can only update a mounted or ' +
+          'mounting component. This usually means you called setProps() on ' +
+          'an unmounted component. This is a no-op.'
+      );
+      return;
+    }
+    Object.assign(this.props, partialProps);
+    var element = React.createElement(this.klass, this.props);
+    this.component = ReactDOM.render(element, this.container, callback);
+  }
+
+  unmount() {
+    ReactDOM.unmountComponentAtNode(this.container);
+    this.klass = null;
+  }
+}
+```
+
+Object-oriented APIs don't look like that though. They use setters and methods. I think we can do better. If you know more about the component API that you're rendering, you can create a more natural object-oriented API around your React component.
+
+```js
+class ReactVideoPlayer {
+  constructor(url, container) {
+    this._container = container;
+    this._url = url;
+    this._isPlaying = false;
+    this._render();
+  }
+
+  _render() {
+    ReactDOM.render(
+      <VideoPlayer url={this._url} playing={this._isPlaying} />,
+      this._container
+    );
+  }
+
+  get url() {
+    return this._url;
+  }
+
+  set url(value) {
+    this._url = value;
+    this._render();
+  }
+
+  play() {
+    this._isPlaying = true;
+    this._render();
+  }
+
+  pause() {
+    this._isPlaying = false;
+    this._render();
+  }
+
+  destroy() {
+    ReactDOM.unmountComponentAtNode(this._container);
+  }
+}
+```
+
+This example shows how to provide an imperative API on top of a declarative one. Similarly, the reverse can be done, and a declarative wrapper can be used when exposing a Web Component as a React component.
diff --git a/beta/src/content/blog/2015/10/07/react-v0.14.md b/beta/src/content/blog/2015/10/07/react-v0.14.md
new file mode 100644
index 000000000..e8570a7bf
--- /dev/null
+++ b/beta/src/content/blog/2015/10/07/react-v0.14.md
@@ -0,0 +1,203 @@
+---
+title: 'React v0.14'
+author: [sophiebits]
+---
+
+We’re happy to announce the release of React 0.14 today! This release has a few major changes, primarily designed to simplify the code you write every day and to better support environments like React Native.
+
+If you tried the release candidate, thank you – your support is invaluable and we've fixed a few bugs that you reported.
+
+As with all of our releases, we consider this version to be stable enough to use in production and recommend that you upgrade in order to take advantage of our latest improvements.
+
+## Upgrade Guide {/*upgrade-guide*/}
+
+Like always, we have a few breaking changes in this release. We know changes can be painful (the Facebook codebase has over 15,000 React components), so we always try to make changes gradually in order to minimize the pain.
+
+If your code is free of warnings when running under React 0.13, upgrading should be easy. We have two new small breaking changes that didn't give a warning in 0.13 (see below). Every new change in 0.14, including the major changes below, is introduced with a runtime warning and will work as before until 0.15, so you don't have to worry about your app breaking with this upgrade.
+
+For the two major changes which require significant code changes, we've included [codemod scripts](https://github.com/reactjs/react-codemod/blob/master/README.md) to help you upgrade your code automatically.
+
+See the changelog below for more details.
+
+## Installation {/*installation*/}
+
+We recommend using React from `npm` and using a tool like browserify or webpack to build your code into a single bundle. To install the two packages:
+
+- `npm install --save react react-dom`
+
+Remember that by default, React runs extra checks and provides helpful warnings in development mode. When deploying your app, set the `NODE_ENV` environment variable to `production` to use the production build of React which does not include the development warnings and runs significantly faster.
+
+If you can’t use `npm` yet, we provide pre-built browser builds for your convenience, which are also available in the `react` package on bower.
+
+- **React**  
+  Dev build with warnings: https://fb.me/react-0.14.0.js  
+  Minified build for production: https://fb.me/react-0.14.0.min.js
+- **React with Add-Ons**  
+  Dev build with warnings: https://fb.me/react-with-addons-0.14.0.js  
+  Minified build for production: https://fb.me/react-with-addons-0.14.0.min.js
+- **React DOM** (include React in the page before React DOM)  
+  Dev build with warnings: https://fb.me/react-dom-0.14.0.js  
+  Minified build for production: https://fb.me/react-dom-0.14.0.min.js
+
+## Changelog {/*changelog*/}
+
+### Major changes {/*major-changes*/}
+
+- #### Two Packages: React and React DOM
+
+  As we look at packages like [react-native](https://github.com/facebook/react-native), [react-art](https://github.com/reactjs/react-art), [react-canvas](https://github.com/Flipboard/react-canvas), and [react-three](https://github.com/Izzimach/react-three), it has become clear that the beauty and essence of React has nothing to do with browsers or the DOM.
+
+  To make this more clear and to make it easier to build more environments that React can render to, we’re splitting the main `react` package into two: `react` and `react-dom`. **This paves the way to writing components that can be shared between the web version of React and React Native.** We don’t expect all the code in an app to be shared, but we want to be able to share the components that do behave the same across platforms.
+
+  The `react` package contains `React.createElement`, `.createClass`, `.Component`, `.PropTypes`, `.Children`, and the other helpers related to elements and component classes. We think of these as the [_isomorphic_](http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/) or [_universal_](https://medium.com/@mjackson/universal-javascript-4761051b7ae9) helpers that you need to build components.
+
+  The `react-dom` package has `ReactDOM.render`, `.unmountComponentAtNode`, and `.findDOMNode`. In `react-dom/server` we have server-side rendering support with `ReactDOMServer.renderToString` and `.renderToStaticMarkup`.
+
+  ```js
+  var React = require('react');
+  var ReactDOM = require('react-dom');
+
+  var MyComponent = React.createClass({
+    render: function () {
+      return <div>Hello World</div>;
+    },
+  });
+
+  ReactDOM.render(<MyComponent />, node);
+  ```
+
+  The old names will continue to work with a warning until 0.15 is released, and we’ve published the [automated codemod script](https://github.com/reactjs/react-codemod/blob/master/README.md) we used at Facebook to help you with this transition.
+
+  The add-ons have moved to separate packages as well:
+
+  - `react-addons-clone-with-props`
+  - `react-addons-create-fragment`
+  - `react-addons-css-transition-group`
+  - `react-addons-linked-state-mixin`
+  - `react-addons-perf`
+  - `react-addons-pure-render-mixin`
+  - `react-addons-shallow-compare`
+  - `react-addons-test-utils`
+  - `react-addons-transition-group`
+  - `react-addons-update`
+  - `ReactDOM.unstable_batchedUpdates` in `react-dom`.
+
+  For now, please use matching versions of `react` and `react-dom` (and the add-ons, if you use them) in your apps to avoid versioning problems.
+
+- #### DOM node refs
+
+  The other big change we’re making in this release is exposing refs to DOM components as the DOM node itself. That means: we looked at what you can do with a `ref` to a React DOM component and realized that the only useful thing you can do with it is call `this.refs.giraffe.getDOMNode()` to get the underlying DOM node. Starting with this release, `this.refs.giraffe` _is_ the actual DOM node. **Note that refs to custom (user-defined) components work exactly as before; only the built-in DOM components are affected by this change.**
+
+  ```js
+  var Zoo = React.createClass({
+    render: function () {
+      return (
+        <div>
+          Giraffe name: <input ref="giraffe" />
+        </div>
+      );
+    },
+    showName: function () {
+      // Previously: var input = this.refs.giraffe.getDOMNode();
+      var input = this.refs.giraffe;
+      alert(input.value);
+    },
+  });
+  ```
+
+  This change also applies to the return result of `ReactDOM.render` when passing a DOM node as the top component. As with refs, this change does not affect custom components.
+
+  With this change, we’re deprecating `.getDOMNode()` and replacing it with `ReactDOM.findDOMNode` (see below). If your components are currently using `.getDOMNode()`, they will continue to work with a warning until 0.15.
+
+- #### Stateless function components
+
+  In idiomatic React code, most of the components you write will be stateless, simply composing other components. We’re introducing a new, simpler syntax for these components where you can take `props` as an argument and return the element you want to render:
+
+  ```js
+  // A function component using an ES2015 (ES6) arrow function:
+  var Aquarium = (props) => {
+    var fish = getFish(props.species);
+    return <Tank>{fish}</Tank>;
+  };
+
+  // Or with destructuring and an implicit return, simply:
+  var Aquarium = ({species}) => <Tank>{getFish(species)}</Tank>;
+
+  // Then use: <Aquarium species="rainbowfish" />
+  ```
+
+  These components behave just like a React class with only a `render` method defined. Since no component instance is created for a function component, any `ref` added to one will evaluate to `null`. Function components do not have lifecycle methods, but you can set `.propTypes` and `.defaultProps` as properties on the function.
+
+  This pattern is designed to encourage the creation of these simple components that should comprise large portions of your apps. In the future, we’ll also be able to make performance optimizations specific to these components by avoiding unnecessary checks and memory allocations.
+
+- #### Deprecation of react-tools
+
+  The `react-tools` package and `JSXTransformer.js` browser file [have been deprecated](/blog/2015/06/12/deprecating-jstransform-and-react-tools.html). You can continue using version `0.13.3` of both, but we no longer support them and recommend migrating to [Babel](http://babeljs.io/), which has built-in support for React and JSX.
+
+- #### Compiler optimizations
+
+  React now supports two compiler optimizations that can be enabled in Babel 5.8.24 and newer. Both of these transforms **should be enabled only in production** (e.g., just before minifying your code) because although they improve runtime performance, they make warning messages more cryptic and skip important checks that happen in development mode, including propTypes.
+
+  **Inlining React elements:** The `optimisation.react.inlineElements` transform converts JSX elements to object literals like `{type: 'div', props: ...}` instead of calls to `React.createElement`.
+
+  **Constant hoisting for React elements:** The `optimisation.react.constantElements` transform hoists element creation to the top level for subtrees that are fully static, which reduces calls to `React.createElement` and the resulting allocations. More importantly, it tells React that the subtree hasn’t changed so React can completely skip it when reconciling.
+
+### Breaking changes {/*breaking-changes*/}
+
+In almost all cases, we change our APIs gradually and warn for at least one release to give you time to clean up your code. These two breaking changes did not have a warning in 0.13 but should be easy to find and clean up:
+
+- `React.initializeTouchEvents` is no longer necessary and has been removed completely. Touch events now work automatically.
+- Add-Ons: Due to the DOM node refs change mentioned above, `TestUtils.findAllInRenderedTree` and related helpers are no longer able to take a DOM component, only a custom component.
+
+These three breaking changes had a warning in 0.13, so you shouldn’t have to do anything if your code is already free of warnings:
+
+- The `props` object is now frozen, so mutating props after creating a component element is no longer supported. In most cases, [`React.cloneElement`](/docs/top-level-api.html#react.cloneelement) should be used instead. This change makes your components easier to reason about and enables the compiler optimizations mentioned above.
+- Plain objects are no longer supported as React children; arrays should be used instead. You can use the [`createFragment`](/docs/create-fragment.html) helper to migrate, which now returns an array.
+- Add-Ons: `classSet` has been removed. Use [classnames](https://github.com/JedWatson/classnames) instead.
+
+### New deprecations, introduced with a warning {/*new-deprecations-introduced-with-a-warning*/}
+
+Each of these changes will continue to work as before with a new warning until the release of 0.15 so you can upgrade your code gradually.
+
+- Due to the DOM node refs change mentioned above, `this.getDOMNode()` is now deprecated and `ReactDOM.findDOMNode(this)` can be used instead. Note that in most cases, calling `findDOMNode` is now unnecessary – see the example above in the “DOM node refs” section.
+
+  With each returned DOM node, we've added a `getDOMNode` method for backwards compatibility that will work with a warning until 0.15. If you have a large codebase, you can use our [automated codemod script](https://github.com/reactjs/react-codemod/blob/master/README.md) to change your code automatically.
+
+- `setProps` and `replaceProps` are now deprecated. Instead, call ReactDOM.render again at the top level with the new props.
+- ES6 component classes must now extend `React.Component` in order to enable stateless function components. The [ES3 module pattern](/blog/2015/01/27/react-v0.13.0-beta-1.html#other-languages) will continue to work.
+- Reusing and mutating a `style` object between renders has been deprecated. This mirrors our change to freeze the `props` object.
+- Add-Ons: `cloneWithProps` is now deprecated. Use [`React.cloneElement`](/docs/top-level-api.html#react.cloneelement) instead (unlike `cloneWithProps`, `cloneElement` does not merge `className` or `style` automatically; you can merge them manually if needed).
+- Add-Ons: To improve reliability, `CSSTransitionGroup` will no longer listen to transition events. Instead, you should specify transition durations manually using props such as `transitionEnterTimeout={500}`.
+
+### Notable enhancements {/*notable-enhancements*/}
+
+- Added `React.Children.toArray` which takes a nested children object and returns a flat array with keys assigned to each child. This helper makes it easier to manipulate collections of children in your `render` methods, especially if you want to reorder or slice `this.props.children` before passing it down. In addition, `React.Children.map` now returns plain arrays too.
+- React uses `console.error` instead of `console.warn` for warnings so that browsers show a full stack trace in the console. (Our warnings appear when you use patterns that will break in future releases and for code that is likely to behave unexpectedly, so we do consider our warnings to be “must-fix” errors.)
+- Previously, including untrusted objects as React children [could result in an XSS security vulnerability](http://danlec.com/blog/xss-via-a-spoofed-react-element). This problem should be avoided by properly validating input at the application layer and by never passing untrusted objects around your application code. As an additional layer of protection, [React now tags elements](https://github.com/facebook/react/pull/4832) with a specific [ES2015 (ES6) `Symbol`](http://www.2ality.com/2014/12/es6-symbols.html) in browsers that support it, in order to ensure that React never considers untrusted JSON to be a valid element. If this extra security protection is important to you, you should add a `Symbol` polyfill for older browsers, such as the one included by [Babel’s polyfill](http://babeljs.io/docs/usage/polyfill/).
+- When possible, React DOM now generates XHTML-compatible markup.
+- React DOM now supports these standard HTML attributes: `capture`, `challenge`, `inputMode`, `is`, `keyParams`, `keyType`, `minLength`, `summary`, `wrap`. It also now supports these non-standard attributes: `autoSave`, `results`, `security`.
+- React DOM now supports these SVG attributes, which render into namespaced attributes: `xlinkActuate`, `xlinkArcrole`, `xlinkHref`, `xlinkRole`, `xlinkShow`, `xlinkTitle`, `xlinkType`, `xmlBase`, `xmlLang`, `xmlSpace`.
+- The `image` SVG tag is now supported by React DOM.
+- In React DOM, arbitrary attributes are supported on custom elements (those with a hyphen in the tag name or an `is="..."` attribute).
+- React DOM now supports these media events on `audio` and `video` tags: `onAbort`, `onCanPlay`, `onCanPlayThrough`, `onDurationChange`, `onEmptied`, `onEncrypted`, `onEnded`, `onError`, `onLoadedData`, `onLoadedMetadata`, `onLoadStart`, `onPause`, `onPlay`, `onPlaying`, `onProgress`, `onRateChange`, `onSeeked`, `onSeeking`, `onStalled`, `onSuspend`, `onTimeUpdate`, `onVolumeChange`, `onWaiting`.
+- Many small performance improvements have been made.
+- Many warnings show more context than before.
+- Add-Ons: A [`shallowCompare`](https://github.com/facebook/react/pull/3355) add-on has been added as a migration path for `PureRenderMixin` in ES6 classes.
+- Add-Ons: `CSSTransitionGroup` can now use [custom class names](https://github.com/facebook/react/blob/48942b85/docs/docs/10.1-animation.md#custom-classes) instead of appending `-enter-active` or similar to the transition name.
+
+### New helpful warnings {/*new-helpful-warnings*/}
+
+- React DOM now warns you when nesting HTML elements invalidly, which helps you avoid surprising errors during updates.
+- Passing `document.body` directly as the container to `ReactDOM.render` now gives a warning as doing so can cause problems with browser extensions that modify the DOM.
+- Using multiple instances of React together is not supported, so we now warn when we detect this case to help you avoid running into the resulting problems.
+
+### Notable bug fixes {/*notable-bug-fixes*/}
+
+- Click events are handled by React DOM more reliably in mobile browsers, particularly in Mobile Safari.
+- SVG elements are created with the correct namespace in more cases.
+- React DOM now renders `<option>` elements with multiple text children properly and renders `<select>` elements on the server with the correct option selected.
+- When two separate copies of React add nodes to the same document (including when a browser extension uses React), React DOM tries harder not to throw exceptions during event handling.
+- Using non-lowercase HTML tag names in React DOM (e.g., `React.createElement('DIV')`) no longer causes problems, though we continue to recommend lowercase for consistency with the JSX tag name convention (lowercase names refer to built-in components, capitalized names refer to custom components).
+- React DOM understands that these CSS properties are unitless and does not append “px” to their values: `animationIterationCount`, `boxOrdinalGroup`, `flexOrder`, `tabSize`, `stopOpacity`.
+- Add-Ons: When using the test utils, `Simulate.mouseEnter` and `Simulate.mouseLeave` now work.
+- Add-Ons: ReactTransitionGroup now correctly handles multiple nodes being removed simultaneously.
diff --git a/beta/src/content/blog/2015/10/19/reactiflux-is-moving-to-discord.md b/beta/src/content/blog/2015/10/19/reactiflux-is-moving-to-discord.md
new file mode 100644
index 000000000..7875e805c
--- /dev/null
+++ b/beta/src/content/blog/2015/10/19/reactiflux-is-moving-to-discord.md
@@ -0,0 +1,86 @@
+---
+title: 'Reactiflux is moving to Discord'
+author: [benigeri]
+---
+
+TL;DR: Slack decided that Reactiflux had too many members and disabled new invites. Reactiflux is moving to Discord. Join us: [http://join.reactiflux.com](http://join.reactiflux.com/)
+
+## What happened with Slack? {/*what-happened-with-slack*/}
+
+A few weeks ago, Reactiflux reached 7,500 members on Slack. Shortly after, Slack decided we were too big and disabled invites. There was no way for new users to join. Many of us were sad and upset. We loved Slack. Our community was built around it.
+
+We reached out to Slack several times, but their decision was firm. Our large community caused performance issues. Slack wants to focus on building a great product for teams, not necessarily large open communities. Losing focus and building for too many use cases always leads to product bloat, and eventually a decrease in quality.
+
+## So… why Discord? {/*so-why-discord*/}
+
+After a [long and thorough debate](https://github.com/reactiflux/volunteers/issues/25), Discord quickly emerged as the most promising service. After just a few days, 400 members had joined the Discord server, and many already loved it.
+
+### Easiest to join {/*easiest-to-join*/}
+
+Discord is the easiest platform to join. New users can immediately join our conversations without having to create an account. All they need to do is provide a name. No permission granting, no password, no email confirmation.
+
+This is critically useful for us, and will make Reactiflux even more open and accessible.
+
+### Great apps {/*great-apps*/}
+
+Out of all of the services we’ve tried, Discord’s apps are by far the most polished. They are well designed, easy to use, and surprisingly fast. In addition to the web app, they have mobile apps on both iOS and Android as well as desktop apps for OS X and Windows, with Linux support coming soon.
+
+Their desktop apps are built with React and Electron, and their iOS app is built with React Native.
+
+### Moderation tools {/*moderation-tools*/}
+
+So far, we’ve been fortunate not to have to deal with spammers and trolls. As our community continues to grow, that might change. Unsurprisingly, Discord is the only app we’ve seen with legitimate moderation tools. It was built for gaming communities, after all.
+
+### Great multiple Server support {/*great-multiple-server-support*/}
+
+Your Discord account works with every Discord server, which is the equivalent of a Slack team. You don’t need to create a new account every time you join a new team. You can join new servers in one click, and it’s very easy to switch between them. Discord messages also work across servers, so your personal conversations are not scoped to a single server.
+
+Instead of having one huge, crowded Reactiflux server, we can branch off closely related channels into sub-servers. Communities will start overlapping, and it will be easy to interact with non-Reactiflux channels.
+
+### It’s hosted {/*its-hosted*/}
+
+Self-hosted apps require maintenance. We’re all busy, and we can barely find the time to keep our landing page up to date and running smoothly. More than anything, we need a stable platform, and we don’t have the resources to guarantee that right now.
+
+It’s a much safer bet to offload the hosting to Discord, who is already keeping the lights on for all their users.
+
+### We like the team {/*we-like-the-team*/}
+
+And they seem to like us back. They are excited for us to join them, and they’ve been very responsive to our feedback and suggestions.
+
+They implemented code syntax highlighting just a few days after we told them we needed it.
+
+Discord’s team has already built a solid suite of apps, and they have shown us how much they care about their users. We’re excited to see how they will continue to improve their product.
+
+## And what’s the catch? {/*and-whats-the-catch*/}
+
+Choosing the best chat service is subjective. There are a million reasons why Discord _might be_ a terrible idea. Here are the ones that we’re most worried about:
+
+### Difficult channel management {/*difficult-channel-management*/}
+
+Channel management seems to be the biggest issue. There is no way to opt out of channels; you can only mute them. And you can only mute channels one by one. There is no way to star channels, and channels can only be sorted on the server level. Each user will see the list of channels in the same order.
+
+As the number of channels grow, it will be challenging to keep things in order. Branching off sub-servers will help, and we will keep an easily accessible directory of channels across our main server and all of the sub-servers.
+
+We can build simple tools to make channel lookup easier, and the Discord team is working on improvements that should make this more manageable.
+
+### No Search {/*no-search*/}
+
+Lack of search is clearly a bummer, but Discord is working on it. Search is coming!
+
+### Firewall {/*firewall*/}
+
+A couple of users aren’t able to access Discord at work since other corporate filters classify it as a gaming application. This sucks, but it seems to be a rare case. So far, it seems only to affect 0.6% of our current community (3/500).
+
+We hope that these users can get Discord's domains whitelisted, and we’ll try to find a solution if this is a widespread issue. The Discord team is aware of the issue as well.
+
+## Is Discord going to disappear tomorrow? {/*is-discord-going-to-disappear-tomorrow*/}
+
+Probably not tomorrow. They have 14 people [full time](https://discordapp.com/company), and they’ve raised money from some of the best investors in Silicon Valley, including [Benchmark](http://www.benchmark.com/) and [Accel](http://www.accel.com/companies/).
+
+By focusing on gaming communities, Discord has differentiated itself from the many other communication apps. Discord is well received and has a rapidly growing user base. They plan to keep their basic offerings free for unlimited users and hope to make money with premium offerings (themes, add-ons, content, and more).
+
+## Join us! {/*join-us*/}
+
+More than 500 of us have already migrated to the new Reactiflux. Join us, we're one click away: [http://join.reactiflux.com](http://join.reactiflux.com/)
+
+_Note: Jordan Hawker’s thorough [research](http://jhawk.co/team-chat-comparison) made our decision a lot easier._
diff --git a/beta/src/content/blog/2015/10/28/react-v0.14.1.md b/beta/src/content/blog/2015/10/28/react-v0.14.1.md
new file mode 100644
index 000000000..fa0eb429b
--- /dev/null
+++ b/beta/src/content/blog/2015/10/28/react-v0.14.1.md
@@ -0,0 +1,44 @@
+---
+title: 'React v0.14.1'
+author: [zpao]
+---
+
+After a couple weeks of having more people use v0.14, we're ready to ship a patch release addressing a few issues. Thanks to everybody who has reported issues and written patches!
+
+The release is now available for download:
+
+- **React**  
+  Dev build with warnings: https://fb.me/react-0.14.1.js  
+  Minified build for production: https://fb.me/react-0.14.1.min.js
+- **React with Add-Ons**  
+  Dev build with warnings: https://fb.me/react-with-addons-0.14.1.js  
+  Minified build for production: https://fb.me/react-with-addons-0.14.1.min.js
+- **React DOM** (include React in the page before React DOM)  
+  Dev build with warnings: https://fb.me/react-dom-0.14.1.js  
+  Minified build for production: https://fb.me/react-dom-0.14.1.min.js
+
+We've also published version `0.14.1` of the `react`, `react-dom`, and addons packages on npm and the `react` package on bower.
+
+---
+
+## Changelog {/*changelog*/}
+
+### React DOM {/*react-dom*/}
+
+- Fixed bug where events wouldn't fire in old browsers when using React in development mode
+- Fixed bug preventing use of `dangerouslySetInnerHTML` with Closure Compiler Advanced mode
+- Added support for `srcLang`, `default`, and `kind` attributes for `<track>` elements
+- Added support for `color` attribute
+- Ensured legacy `.props` access on DOM nodes is updated on re-renders
+
+### React TestUtils Add-on {/*react-testutils-add-on*/}
+
+- Fixed `scryRenderedDOMComponentsWithClass` so it works with SVG
+
+### React CSSTransitionGroup Add-on {/*react-csstransitiongroup-add-on*/}
+
+- Fix bug preventing `0` to be used as a timeout value
+
+### React on Bower {/*react-on-bower*/}
+
+- Added `react-dom.js` to `main` to improve compatibility with tooling
diff --git a/beta/src/content/blog/2015/11/02/react-v0.14.2.md b/beta/src/content/blog/2015/11/02/react-v0.14.2.md
new file mode 100644
index 000000000..126a799a9
--- /dev/null
+++ b/beta/src/content/blog/2015/11/02/react-v0.14.2.md
@@ -0,0 +1,32 @@
+---
+title: 'React v0.14.2'
+author: [zpao]
+---
+
+We have a quick update following the release of 0.14.1 last week. It turns out we broke a couple things in the development build of React when using Internet Explorer. Luckily it was only the development build, so your production applications were unaffected. This release is mostly to address those issues. There is one notable change if consuming React from npm. For the `react-dom` package, we moved `react` from a regular dependency to a peer dependency. This will impact very few people as these two are typically installed together at the top level, but it will fix some issues with dependencies of installed components also using `react` as a peer dependency.
+
+The release is now available for download:
+
+- **React**  
+  Dev build with warnings: https://fb.me/react-0.14.2.js  
+  Minified build for production: https://fb.me/react-0.14.2.min.js
+- **React with Add-Ons**  
+  Dev build with warnings: https://fb.me/react-with-addons-0.14.2.js  
+  Minified build for production: https://fb.me/react-with-addons-0.14.2.min.js
+- **React DOM** (include React in the page before React DOM)  
+  Dev build with warnings: https://fb.me/react-dom-0.14.2.js  
+  Minified build for production: https://fb.me/react-dom-0.14.2.min.js
+
+We've also published version `0.14.2` of the `react`, `react-dom`, and addons packages on npm and the `react` package on bower.
+
+---
+
+## Changelog {/*changelog*/}
+
+### React DOM {/*react-dom*/}
+
+- Fixed bug with development build preventing events from firing in some versions of Internet Explorer & Edge
+- Fixed bug with development build when using es5-sham in older versions of Internet Explorer
+- Added support for `integrity` attribute
+- Fixed bug resulting in `children` prop being coerced to a string for custom elements, which was not the desired behavior.
+- Moved `react` from `dependencies` to `peerDependencies` to match expectations and align with `react-addons-*` packages
diff --git a/beta/src/content/blog/2015/11/18/react-v0.14.3.md b/beta/src/content/blog/2015/11/18/react-v0.14.3.md
new file mode 100644
index 000000000..1b1625821
--- /dev/null
+++ b/beta/src/content/blog/2015/11/18/react-v0.14.3.md
@@ -0,0 +1,44 @@
+---
+title: 'React v0.14.3'
+author: [zpao]
+---
+
+It's time for another installment of React patch releases! We didn't break anything in v0.14.2 but we do have a couple of other bugs we're fixing. The biggest change in this release is actually an addition of a new built file. We heard from a number of people that they still need the ability to use React to render to a string on the client. While the use cases are not common and there are other ways to achieve this, we decided that it's still valuable to support. So we're now building `react-dom-server.js`, which will be shipped to Bower and in the `dist/` directory of the `react-dom` package on npm. This file works the same way as `react-dom.js` and therefore requires that the primary React build has already been included on the page.
+
+The release is now available for download:
+
+- **React**  
+  Dev build with warnings: https://fb.me/react-0.14.3.js  
+  Minified build for production: https://fb.me/react-0.14.3.min.js
+- **React with Add-Ons**  
+  Dev build with warnings: https://fb.me/react-with-addons-0.14.3.js  
+  Minified build for production: https://fb.me/react-with-addons-0.14.3.min.js
+- **React DOM** (include React in the page before React DOM)  
+  Dev build with warnings: https://fb.me/react-dom-0.14.3.js  
+  Minified build for production: https://fb.me/react-dom-0.14.3.min.js
+- **React DOM Server** (include React in the page before React DOM Server)  
+  Dev build with warnings: https://fb.me/react-dom-server-0.14.3.js  
+  Minified build for production: https://fb.me/react-dom-server-0.14.3.min.js
+
+We've also published version `0.14.3` of the `react`, `react-dom`, and addons packages on npm and the `react` package on bower.
+
+---
+
+## Changelog {/*changelog*/}
+
+### React DOM {/*react-dom*/}
+
+- Added support for `nonce` attribute for `<script>` and `<style>` elements
+- Added support for `reversed` attribute for `<ol>` elements
+
+### React TestUtils Add-on {/*react-testutils-add-on*/}
+
+- Fixed bug with shallow rendering and function refs
+
+### React CSSTransitionGroup Add-on {/*react-csstransitiongroup-add-on*/}
+
+- Fixed bug resulting in timeouts firing incorrectly when mounting and unmounting rapidly
+
+### React on Bower {/*react-on-bower*/}
+
+- Added `react-dom-server.js` to expose `renderToString` and `renderToStaticMarkup` for usage in the browser
diff --git a/beta/src/content/blog/2015/12/04/react-js-conf-2016-diversity-scholarship.md b/beta/src/content/blog/2015/12/04/react-js-conf-2016-diversity-scholarship.md
new file mode 100644
index 000000000..800134f8d
--- /dev/null
+++ b/beta/src/content/blog/2015/12/04/react-js-conf-2016-diversity-scholarship.md
@@ -0,0 +1,44 @@
+---
+title: React.js Conf 2016 Diversity Scholarship
+author: [zpao]
+---
+
+I am thrilled to announced that we will be organizing another diversity scholarship program for the upcoming React.js Conf! The tech industry is suffering from a lack of diversity, but it's important to us that we have a thriving community that is made up of people with a variety of experiences and viewpoints.
+
+When we ran this program last year, we had _over 200_ people apply for only 10 tickets. There were so many people that we wanted to bring in but we couldn't. The results were still awesome, and we had bright individuals from around the world attending who would have otherwise been unable to. These attendees took part in discussions at the conference and brought perspectives that we might not have otherwise seen there.
+
+This year we're excited to bring back the scholarship, but we've set aside **40 tickets** because we really believe that it's important to do our best to make sure we have an even more diverse audience.
+
+This is something I'm personally really excited to be a part of. I know the rest of the team is as well. We're really proud to have everyone at Facebook providing support and funding for this.
+
+The details of the scholarship are provided below (or you can [go directly to the application](http://goo.gl/forms/PEmKj8oUp4)). I encourage you to apply! If you don't feel like you are eligible yourself, you can still help – send this along to friends, family, coworkers, acquaintances, or anybody who might be interested. And even if you haven't spoken before, please consider [submitting a proposal for a talk](http://conf.reactjs.com/) (either 30 minutes or just 5 minutes) - we're hoping to have a very diverse group of speakers in addition to attendees.
+
+---
+
+Facebook is excited to announce that we are now accepting applications for the React.js Conf Diversity Scholarship!
+
+Beginning today, those studying or working in computer science or a related field can apply for a partial scholarship to attend the React.js Conf in San Francisco, CA on February 22 & 23, 2016.
+
+React opens a world of new possibilities such as server-side rendering, real-time updates, different rendering targets like SVG and canvas. React Native makes is easy to use the same concepts and technologies to build native mobile experiences on iOS and Android. Join us at React.js Conf to shape the future of client-side applications! For more information about the React.js conference, please see [the website](http://conf.reactjs.com/).
+
+At Facebook, we believe that anyone anywhere can make a positive impact by developing products to make the world more open and connected to the people and things they care about. Given the current realities of the tech industry and the lack of representation of communities we seek to serve, applicants currently under-represented in Computer Science and related fields are strongly encouraged to apply. Facebook will make determinations on scholarship recipients in its sole discretion. Facebook complies with all equal opportunity laws.
+
+To apply for the scholarship, please visit the application page: **http://goo.gl/forms/PEmKj8oUp4**
+
+## Award Includes {/*award-includes*/}
+
+- Paid registration fee for the React.js Conf February 22 & 23 in downtown San Francisco, CA
+- Paid lodging expenses for February 21, 22, 23
+
+## Important Dates {/*important-dates*/}
+
+- Sunday December 13th 2015 - 11:59 PST: Applications for the React.js Conf Scholarship must be submitted in full
+- Wednesday, December 16th, 2015: Award recipients will be notified by email of their acceptance
+- Monday & Tuesday, February 22 & 23, 2016: React.js Conf
+
+## Eligibility {/*eligibility*/}
+
+- Must currently be studying or working in Computer Science or a related field
+- International applicants are welcome, but you will be responsible for securing your own visa to attend the conference
+- You must be able to provide your own transportation to San Francisco
+- You must be available to attend the full duration of React.js Conf on February 22 & 23 in San Francisco, CA
diff --git a/beta/src/content/blog/2015/12/16/ismounted-antipattern.md b/beta/src/content/blog/2015/12/16/ismounted-antipattern.md
new file mode 100644
index 000000000..c3c7152de
--- /dev/null
+++ b/beta/src/content/blog/2015/12/16/ismounted-antipattern.md
@@ -0,0 +1,79 @@
+---
+title: 'isMounted is an Antipattern'
+author: [jimfb]
+---
+
+As we move closer to officially deprecating isMounted, it's worth understanding why the function is an antipattern, and how to write code without the isMounted function.
+
+The primary use case for `isMounted()` is to avoid calling `setState()` after a component has unmounted, because calling `setState()` after a component has unmounted will emit a warning. The “setState warning” exists to help you catch bugs, because calling `setState()` on an unmounted component is an indication that your app/component has somehow failed to clean up properly. Specifically, calling `setState()` in an unmounted component means that your app is still holding a reference to the component after the component has been unmounted - which often indicates a memory leak!
+
+To avoid the error message, people often add lines like this:
+
+```js
+if (this.isMounted()) { // This is bad.
+  this.setState({...});
+}
+```
+
+Checking `isMounted` before calling `setState()` does eliminate the warning, but it also defeats the purpose of the warning, since now you will never get the warning (even when you should!)
+
+Other uses of `isMounted()` are similarly erroneous; using `isMounted()` is a code smell because the only reason you would check is because you think you might be holding a reference after the component has unmounted.
+
+An easy migration strategy for anyone upgrading their code to avoid `isMounted()` is to track the mounted status yourself. Just set a `_isMounted` property to true in `componentDidMount` and set it to false in `componentWillUnmount`, and use this variable to check your component's status.
+
+An optimal solution would be to find places where `setState()` might be called after a component has unmounted, and fix them. Such situations most commonly occur due to callbacks, when a component is waiting for some data and gets unmounted before the data arrives. Ideally, any callbacks should be canceled in `componentWillUnmount`, prior to unmounting.
+
+For instance, if you are using a Flux store in your component, you must unsubscribe in `componentWillUnmount`:
+
+```javascript{9}
+class MyComponent extends React.Component {
+  componentDidMount() {
+    mydatastore.subscribe(this);
+  }
+  render() {
+    ...
+  }
+  componentWillUnmount() {
+    mydatastore.unsubscribe(this);
+  }
+}
+```
+
+If you use ES6 promises, you may need to wrap your promise in order to make it cancelable.
+
+```js
+const cancelablePromise = makeCancelable(
+  new Promise(r => component.setState({...}))
+);
+
+cancelablePromise
+  .promise
+  .then(() => console.log('resolved'))
+  .catch((reason) => console.log('isCanceled', reason.isCanceled));
+
+cancelablePromise.cancel(); // Cancel the promise
+```
+
+Where `makeCancelable` was originally [defined by @istarkov](https://github.com/facebook/react/issues/5465#issuecomment-157888325) as:
+
+```js
+const makeCancelable = (promise) => {
+  let hasCanceled_ = false;
+
+  const wrappedPromise = new Promise((resolve, reject) => {
+    promise.then(
+      (val) => (hasCanceled_ ? reject({isCanceled: true}) : resolve(val)),
+      (error) => (hasCanceled_ ? reject({isCanceled: true}) : reject(error))
+    );
+  });
+
+  return {
+    promise: wrappedPromise,
+    cancel() {
+      hasCanceled_ = true;
+    },
+  };
+};
+```
+
+As an added bonus for getting your code cleaned up early, getting rid of `isMounted()` makes it one step easier for you to upgrade to ES6 classes, where using `isMounted()` is already prohibited. Happy coding!
diff --git a/beta/src/content/blog/2015/12/18/react-components-elements-and-instances.md b/beta/src/content/blog/2015/12/18/react-components-elements-and-instances.md
new file mode 100644
index 000000000..a09720305
--- /dev/null
+++ b/beta/src/content/blog/2015/12/18/react-components-elements-and-instances.md
@@ -0,0 +1,386 @@
+---
+title: 'React Components, Elements, and Instances'
+author: [gaearon]
+---
+
+The difference between **components, their instances, and elements** confuses many React beginners. Why are there three different terms to refer to something that is painted on screen?
+
+## Managing the Instances {/*managing-the-instances*/}
+
+If you’re new to React, you probably only worked with component classes and instances before. For example, you may declare a `Button` _component_ by creating a class. When the app is running, you may have several _instances_ of this component on screen, each with its own properties and local state. This is the traditional object-oriented UI programming. Why introduce _elements_?
+
+In this traditional UI model, it is up to you to take care of creating and destroying child component instances. If a `Form` component wants to render a `Button` component, it needs to create its instance, and manually keep it up to date with any new information.
+
+```js
+class Form extends TraditionalObjectOrientedView {
+  render() {
+    // Read some data passed to the view
+    const {isSubmitted, buttonText} = this.attrs;
+
+    if (!isSubmitted && !this.button) {
+      // Form is not yet submitted. Create the button!
+      this.button = new Button({
+        children: buttonText,
+        color: 'blue',
+      });
+      this.el.appendChild(this.button.el);
+    }
+
+    if (this.button) {
+      // The button is visible. Update its text!
+      this.button.attrs.children = buttonText;
+      this.button.render();
+    }
+
+    if (isSubmitted && this.button) {
+      // Form was submitted. Destroy the button!
+      this.el.removeChild(this.button.el);
+      this.button.destroy();
+    }
+
+    if (isSubmitted && !this.message) {
+      // Form was submitted. Show the success message!
+      this.message = new Message({text: 'Success!'});
+      this.el.appendChild(this.message.el);
+    }
+  }
+}
+```
+
+This is pseudocode, but it is more or less what you end up with when you write composite UI code that behaves consistently in an object-oriented way using a library like Backbone.
+
+Each component instance has to keep references to its DOM node and to the instances of the children components, and create, update, and destroy them when the time is right. The lines of code grow as the square of the number of possible states of the component, and the parents have direct access to their children component instances, making it hard to decouple them in the future.
+
+So how is React different?
+
+## Elements Describe the Tree {/*elements-describe-the-tree*/}
+
+In React, this is where the _elements_ come to rescue. **An element is a plain object _describing_ a component instance or DOM node and its desired properties.** It contains only information about the component type (for example, a `Button`), its properties (for example, its `color`), and any child elements inside it.
+
+An element is not an actual instance. Rather, it is a way to tell React what you _want_ to see on the screen. You can’t call any methods on the element. It’s just an immutable description object with two fields: `type: (string | ReactClass)` and `props: Object`[^1].
+
+### DOM Elements {/*dom-elements*/}
+
+When an element’s `type` is a string, it represents a DOM node with that tag name, and `props` correspond to its attributes. This is what React will render. For example:
+
+```js
+{
+  type: 'button',
+  props: {
+    className: 'button button-blue',
+    children: {
+      type: 'b',
+      props: {
+        children: 'OK!'
+      }
+    }
+  }
+}
+```
+
+This element is just a way to represent the following HTML as a plain object:
+
+```html
+<button class="button button-blue">
+  <b>
+    OK!
+  </b>
+</button>
+```
+
+Note how elements can be nested. By convention, when we want to create an element tree, we specify one or more child elements as the `children` prop of their containing element.
+
+What’s important is that both child and parent elements are _just descriptions and not the actual instances_. They don’t refer to anything on the screen when you create them. You can create them and throw them away, and it won’t matter much.
+
+React elements are easy to traverse, don’t need to be parsed, and of course they are much lighter than the actual DOM elements—they’re just objects!
+
+### Component Elements {/*component-elements*/}
+
+However, the `type` of an element can also be a function or a class corresponding to a React component:
+
+```js
+{
+  type: Button,
+  props: {
+    color: 'blue',
+    children: 'OK!'
+  }
+}
+```
+
+This is the core idea of React.
+
+**An element describing a component is also an element, just like an element describing the DOM node. They can be nested and mixed with each other.**
+
+This feature lets you define a `DangerButton` component as a `Button` with a specific `color` property value without worrying about whether `Button` renders to a DOM `<button>`, a `<div>`, or something else entirely:
+
+```js
+const DangerButton = ({children}) => ({
+  type: Button,
+  props: {
+    color: 'red',
+    children: children,
+  },
+});
+```
+
+You can mix and match DOM and component elements in a single element tree:
+
+```js
+const DeleteAccount = () => ({
+  type: 'div',
+  props: {
+    children: [{
+      type: 'p',
+      props: {
+        children: 'Are you sure?'
+      }
+    }, {
+      type: DangerButton,
+      props: {
+        children: 'Yep'
+      }
+    }, {
+      type: Button,
+      props: {
+        color: 'blue',
+        children: 'Cancel'
+      }
+   }]
+});
+```
+
+Or, if you prefer JSX:
+
+```js
+const DeleteAccount = () => (
+  <div>
+    <p>Are you sure?</p>
+    <DangerButton>Yep</DangerButton>
+    <Button color="blue">Cancel</Button>
+  </div>
+);
+```
+
+This mix and matching helps keep components decoupled from each other, as they can express both _is-a_ and _has-a_ relationships exclusively through composition:
+
+- `Button` is a DOM `<button>` with specific properties.
+- `DangerButton` is a `Button` with specific properties.
+- `DeleteAccount` contains a `Button` and a `DangerButton` inside a `<div>`.
+
+### Components Encapsulate Element Trees {/*components-encapsulate-element-trees*/}
+
+When React sees an element with a function or class `type`, it knows to ask _that_ component what element it renders to, given the corresponding `props`.
+
+When it sees this element:
+
+```js
+{
+  type: Button,
+  props: {
+    color: 'blue',
+    children: 'OK!'
+  }
+}
+```
+
+React will ask `Button` what it renders to. The `Button` will return this element:
+
+```js
+{
+  type: 'button',
+  props: {
+    className: 'button button-blue',
+    children: {
+      type: 'b',
+      props: {
+        children: 'OK!'
+      }
+    }
+  }
+}
+```
+
+React will repeat this process until it knows the underlying DOM tag elements for every component on the page.
+
+React is like a child asking “what is Y” for every “X is Y” you explain to them until they figure out every little thing in the world.
+
+Remember the `Form` example above? It can be written in React as follows[^1]:
+
+```js
+const Form = ({isSubmitted, buttonText}) => {
+  if (isSubmitted) {
+    // Form submitted! Return a message element.
+    return {
+      type: Message,
+      props: {
+        text: 'Success!',
+      },
+    };
+  }
+
+  // Form is still visible! Return a button element.
+  return {
+    type: Button,
+    props: {
+      children: buttonText,
+      color: 'blue',
+    },
+  };
+};
+```
+
+That’s it! For a React component, props are the input, and an element tree is the output.
+
+**The returned element tree can contain both elements describing DOM nodes, and elements describing other components. This lets you compose independent parts of UI without relying on their internal DOM structure.**
+
+We let React create, update, and destroy instances. We _describe_ them with elements we return from the components, and React takes care of managing the instances.
+
+### Components Can Be Classes or Functions {/*components-can-be-classes-or-functions*/}
+
+In the code above, `Form`, `Message`, and `Button` are React components. They can either be written as functions, like above, or as classes descending from `React.Component`. These three ways to declare a component are mostly equivalent:
+
+```js
+// 1) As a function of props
+const Button = ({children, color}) => ({
+  type: 'button',
+  props: {
+    className: 'button button-' + color,
+    children: {
+      type: 'b',
+      props: {
+        children: children,
+      },
+    },
+  },
+});
+
+// 2) Using the React.createClass() factory
+const Button = React.createClass({
+  render() {
+    const {children, color} = this.props;
+    return {
+      type: 'button',
+      props: {
+        className: 'button button-' + color,
+        children: {
+          type: 'b',
+          props: {
+            children: children,
+          },
+        },
+      },
+    };
+  },
+});
+
+// 3) As an ES6 class descending from React.Component
+class Button extends React.Component {
+  render() {
+    const {children, color} = this.props;
+    return {
+      type: 'button',
+      props: {
+        className: 'button button-' + color,
+        children: {
+          type: 'b',
+          props: {
+            children: children,
+          },
+        },
+      },
+    };
+  }
+}
+```
+
+When a component is defined as a class, it is a little bit more powerful than a function component. It can store some local state and perform custom logic when the corresponding DOM node is created or destroyed.
+
+A function component is less powerful but is simpler, and acts like a class component with just a single `render()` method. Unless you need features available only in a class, we encourage you to use function components instead.
+
+**However, whether functions or classes, fundamentally they are all components to React. They take the props as their input, and return the elements as their output.**
+
+### Top-Down Reconciliation {/*top-down-reconciliation*/}
+
+When you call:
+
+```js
+ReactDOM.render(
+  {
+    type: Form,
+    props: {
+      isSubmitted: false,
+      buttonText: 'OK!',
+    },
+  },
+  document.getElementById('root')
+);
+```
+
+React will ask the `Form` component what element tree it returns, given those `props`. It will gradually “refine” its understanding of your component tree in terms of simpler primitives:
+
+```js
+// React: You told me this...
+{
+  type: Form,
+  props: {
+    isSubmitted: false,
+    buttonText: 'OK!'
+  }
+}
+
+// React: ...And Form told me this...
+{
+  type: Button,
+  props: {
+    children: 'OK!',
+    color: 'blue'
+  }
+}
+
+// React: ...and Button told me this! I guess I'm done.
+{
+  type: 'button',
+  props: {
+    className: 'button button-blue',
+    children: {
+      type: 'b',
+      props: {
+        children: 'OK!'
+      }
+    }
+  }
+}
+```
+
+This is a part of the process that React calls [reconciliation](/docs/reconciliation.html) which starts when you call [`ReactDOM.render()`](/docs/top-level-api.html#reactdom.render) or [`setState()`](/docs/component-api.html#setstate). By the end of the reconciliation, React knows the resulting DOM tree, and a renderer like `react-dom` or `react-native` applies the minimal set of changes necessary to update the DOM nodes (or the platform-specific views in case of React Native).
+
+This gradual refining process is also the reason React apps are easy to optimize. If some parts of your component tree become too large for React to visit efficiently, you can tell it to [skip this “refining” and diffing certain parts of the tree if the relevant props have not changed](/docs/advanced-performance.html). It is very fast to calculate whether the props have changed if they are immutable, so React and immutability work great together, and can provide great optimizations with the minimal effort.
+
+You might have noticed that this blog entry talks a lot about components and elements, and not so much about the instances. The truth is, instances have much less importance in React than in most object-oriented UI frameworks.
+
+Only components declared as classes have instances, and you never create them directly: React does that for you. While [mechanisms for a parent component instance to access a child component instance](/docs/more-about-refs.html) exist, they are only used for imperative actions (such as setting focus on a field), and should generally be avoided.
+
+React takes care of creating an instance for every class component, so you can write components in an object-oriented way with methods and local state, but other than that, instances are not very important in the React’s programming model and are managed by React itself.
+
+## Summary {/*summary*/}
+
+An _element_ is a plain object describing what you want to appear on the screen in terms of the DOM nodes or other components. Elements can contain other elements in their props. Creating a React element is cheap. Once an element is created, it is never mutated.
+
+A _component_ can be declared in several different ways. It can be a class with a `render()` method. Alternatively, in simple cases, it can be defined as a function. In either case, it takes props as an input, and returns an element tree as the output.
+
+When a component receives some props as an input, it is because a particular parent component returned an element with its `type` and these props. This is why people say that the props flows one way in React: from parents to children.
+
+An _instance_ is what you refer to as `this` in the component class you write. It is useful for [storing local state and reacting to the lifecycle events](/docs/component-api.html).
+
+Function components don’t have instances at all. Class components have instances, but you never need to create a component instance directly—React takes care of this.
+
+Finally, to create elements, use [`React.createElement()`](/docs/top-level-api.html#react.createelement), [JSX](/docs/jsx-in-depth.html), or an [element factory helper](/docs/top-level-api.html#react.createfactory). Don’t write elements as plain objects in the real code—just know that they are plain objects under the hood.
+
+## Further Reading {/*further-reading*/}
+
+- [Introducing React Elements](/blog/2014/10/14/introducing-react-elements.html)
+- [Streamlining React Elements](/blog/2015/02/24/streamlining-react-elements.html)
+- [React (Virtual) DOM Terminology](/docs/glossary.html)
+
+[^1]: All React elements require an additional `$$typeof: Symbol.for('react.element')` field declared on the object for [security reasons](https://github.com/facebook/react/pull/4832). It is omitted in the examples above. This blog entry uses inline objects for elements to give you an idea of what’s happening underneath but the code won’t run as is unless you either add `$$typeof` to the elements, or change the code to use `React.createElement()` or JSX.
diff --git a/beta/src/content/blog/2015/12/29/react-v0.14.4.md b/beta/src/content/blog/2015/12/29/react-v0.14.4.md
new file mode 100644
index 000000000..eb18dcf6e
--- /dev/null
+++ b/beta/src/content/blog/2015/12/29/react-v0.14.4.md
@@ -0,0 +1,40 @@
+---
+title: 'React v0.14.4'
+author: [sophiebits]
+---
+
+Happy December! We have a minor point release today. It has just a few small bug fixes.
+
+The release is now available for download:
+
+- **React**  
+  Dev build with warnings: https://fb.me/react-0.14.4.js  
+  Minified build for production: https://fb.me/react-0.14.4.min.js
+- **React with Add-Ons**  
+  Dev build with warnings: https://fb.me/react-with-addons-0.14.4.js  
+  Minified build for production: https://fb.me/react-with-addons-0.14.4.min.js
+- **React DOM** (include React in the page before React DOM)  
+  Dev build with warnings: https://fb.me/react-dom-0.14.4.js  
+  Minified build for production: https://fb.me/react-dom-0.14.4.min.js
+- **React DOM Server** (include React in the page before React DOM Server)  
+  Dev build with warnings: https://fb.me/react-dom-server-0.14.4.js  
+  Minified build for production: https://fb.me/react-dom-server-0.14.4.min.js
+
+We've also published version `0.14.4` of the `react`, `react-dom`, and addons packages on npm and the `react` package on bower.
+
+---
+
+## Changelog {/*changelog*/}
+
+### React {/*react*/}
+
+- Minor internal changes for better compatibility with React Native
+
+### React DOM {/*react-dom*/}
+
+- The `autoCapitalize` and `autoCorrect` props are now set as attributes in the DOM instead of properties to improve cross-browser compatibility
+- Fixed bug with controlled `<select>` elements not handling updates properly
+
+### React Perf Add-on {/*react-perf-add-on*/}
+
+- Some DOM operation names have been updated for clarity in the output of `.printDOM()`
diff --git a/beta/src/content/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.md b/beta/src/content/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.md
new file mode 100644
index 000000000..916a74e37
--- /dev/null
+++ b/beta/src/content/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.md
@@ -0,0 +1,57 @@
+---
+title: '(A => B) !=> (B => A)'
+author: [jimfb]
+---
+
+The documentation for `componentWillReceiveProps` states that `componentWillReceiveProps` will be invoked when the props change as the result of a rerender. Some people assume this means "if `componentWillReceiveProps` is called, then the props must have changed", but that conclusion is logically incorrect.
+
+The guiding principle is one of my favorites from formal logic/mathematics:
+
+> A implies B does not imply B implies A
+
+Example: "If I eat moldy food, then I will get sick" does not imply "if I am sick, then I must have eaten moldy food". There are many other reasons I could be feeling sick. For instance, maybe the flu is circulating around the office. Similarly, there are many reasons that `componentWillReceiveProps` might get called, even if the props didn’t change.
+
+If you don’t believe me, call `ReactDOM.render()` three times with the exact same props, and try to predict the number of times `componentWillReceiveProps` will get called:
+
+```js
+class Component extends React.Component {
+  componentWillReceiveProps(nextProps) {
+    console.log('componentWillReceiveProps', nextProps.data.bar);
+  }
+  render() {
+    return <div>Bar {this.props.data.bar}!</div>;
+  }
+}
+
+var container = document.getElementById('container');
+
+var mydata = {bar: 'drinks'};
+ReactDOM.render(<Component data={mydata} />, container);
+ReactDOM.render(<Component data={mydata} />, container);
+ReactDOM.render(<Component data={mydata} />, container);
+```
+
+In this case, the answer is "2". React calls `componentWillReceiveProps` twice (once for each of the two updates). Both times, the value of "drinks" is printed (ie. the props didn’t change).
+
+To understand why, we need to think about what _could_ have happened. The data _could_ have changed between the initial render and the two subsequent updates, if the code had performed a mutation like this:
+
+```js
+var mydata = {bar: 'drinks'};
+ReactDOM.render(<Component data={mydata} />, container);
+mydata.bar = 'food';
+ReactDOM.render(<Component data={mydata} />, container);
+mydata.bar = 'noise';
+ReactDOM.render(<Component data={mydata} />, container);
+```
+
+React has no way of knowing that the data didn’t change. Therefore, React needs to call `componentWillReceiveProps`, because the component needs to be notified of the new props (even if the new props happen to be the same as the old props).
+
+You might think that React could just use smarter checks for equality, but there are some issues with this idea:
+
+- The old `mydata` and the new `mydata` are actually the same physical object (only the object’s internal value changed). Since the references are triple-equals-equal, doing an equality check doesn’t tell us if the value has changed. The only possible solution would be to have created a deep copy of the data, and then later do a deep comparison - but this can be prohibitively expensive for large data structures (especially ones with cycles).
+- The `mydata` object might contain references to functions which have captured variables within closures. There is no way for React to peek into these closures, and thus no way for React to copy them and/or verify equality.
+- The `mydata` object might contain references to objects which are re-instantiated during the parent's render (ie. not triple-equals-equal) but are conceptually equal (ie. same keys and same values). A deep-compare (expensive) could detect this, except that functions present a problem again because there is no reliable way to compare two functions to see if they are semantically equivalent.
+
+Given the language constraints, it is sometimes impossible for us to achieve meaningful equality semantics. In such cases, React will call `componentWillReceiveProps` (even though the props might not have changed) so the component has an opportunity to examine the new props and act accordingly.
+
+As a result, your implementation of `componentWillReceiveProps` MUST NOT assume that your props have changed. If you want an operation (such as a network request) to occur only when props have changed, your `componentWillReceiveProps` code needs to check to see if the props actually changed.
diff --git a/beta/src/content/blog/2016/01/12/discontinuing-ie8-support.md b/beta/src/content/blog/2016/01/12/discontinuing-ie8-support.md
new file mode 100644
index 000000000..519be482e
--- /dev/null
+++ b/beta/src/content/blog/2016/01/12/discontinuing-ie8-support.md
@@ -0,0 +1,10 @@
+---
+title: 'Discontinuing IE 8 Support in React DOM'
+author: [sophiebits]
+---
+
+Since its 2013 release, React has supported all popular browsers, including Internet Explorer 8 and above. We handle normalizing many quirks present in old browser versions, including event system differences, so that your app code doesn't have to worry about most browser bugs.
+
+Today, Microsoft [discontinued support for older versions of IE](https://www.microsoft.com/en-us/WindowsForBusiness/End-of-IE-support). Starting with React v15, we're discontinuing React DOM's support for IE 8. We've heard that most React DOM apps already don't support old versions of Internet Explorer, so this shouldn't affect many people. This change will help us develop faster and make React DOM even better. (We won't actively remove IE 8–related code quite yet, but we will deprioritize new bugs that are reported. If you need to support IE 8 we recommend you stay on React v0.14.)
+
+React DOM will continue to support IE 9 and above for the foreseeable future.
diff --git a/beta/src/content/blog/2016/02/19/new-versioning-scheme.md b/beta/src/content/blog/2016/02/19/new-versioning-scheme.md
new file mode 100644
index 000000000..c7c6dcce7
--- /dev/null
+++ b/beta/src/content/blog/2016/02/19/new-versioning-scheme.md
@@ -0,0 +1,60 @@
+---
+title: 'New Versioning Scheme'
+author: [sebmarkbage]
+---
+
+Today we're announcing that we're switching to major revisions for React. The current version is 0.14.7. The next release will be: **15.0.0**
+
+This change shouldn't materially affect most of you. Moving to major semver versions simply helps indicate our commitment to stability and gives us the flexibility to add new backwards-compatible features in minor releases. This means we can have fewer major releases and you won't have to wait as long to take advantage of improvements to React. Plus, if you're a component author, this versioning scheme gives you the flexibility to support two major versions of React at the same time so you don't need to leave anyone behind.
+
+The core of the React API has been stable for years. Our business as well as many of yours all depend heavily on the use of React as a core piece of our infrastructure. We're committed to the stability as well as the progress of React going forward.
+
+## Bring Everyone Along {/*bring-everyone-along*/}
+
+React isn't just a library but an ecosystem. We know that your applications and ours are not just isolated islands of code. It is a network of your own application code, your own open source components and third party libraries that all depend on React.
+
+<img src="/images/blog/versioning-1.png" width={403} />
+
+Therefore it is important that we don't just upgrade our own codebases but that we bring our whole community with us. We take the upgrade path very seriously - for everyone.
+
+<img src="/images/blog/versioning-poll.png" width={596} />
+
+## Introducing Minor Releases {/*introducing-minor-releases*/}
+
+Ideally everyone could just depend on the latest version of React all the time.
+
+<img src="/images/blog/versioning-2.png" width={463} />
+
+We know that in practice that is not possible. In the future, we expect more new additive APIs rather than breakage of existing ones. By moving to major revisions in the semver scheme, we can release new versions without breaking existing ones.
+
+<img src="/images/blog/versioning-3.png" width={503} />
+
+That means that if one component needs a new API, there is no need for any of the other components to do any further work. They remain compatible.
+
+## What Happened to 1.0.0? {/*what-happened-to-100*/}
+
+Part of React's growth and popularity is that it is stable and performant in production. People have long asked what React v1.0 will look. Technically some breaking changes are important to avoid stagnating, but we still achieve stability by making it easy to upgrade. If major version numbers indicate API stability and engender trust that it can be used in production, then we got there a long time ago. There are too many preconceived notions of what v1.0 is. We're still following semver. We're just communicating stability by moving the 0 from the beginning to the end.
+
+## Breaking Changes {/*breaking-changes*/}
+
+Minor revision releases will include deprecation warnings and tips for how to upgrade an API or pattern that will be removed or changed in the future.
+
+We will continue to release [codemods](https://www.youtube.com/watch?v=d0pOgY8__JM) for common patterns to make automatic upgrades of your codebase easier.
+
+Once we've reached the end of life for a particular major version, we'll release a new major version where all deprecated APIs have been removed.
+
+## Avoiding The Major Cliff {/*avoiding-the-major-cliff*/}
+
+If you try to upgrade your component to 16.0.0 you might find that your application no longer works if you still have other dependencies. E.g. if Ryan's and Jed's components are only compatible with 15.x.x.
+
+<img src="/images/blog/versioning-4.png" width={498} />
+
+Worst case, you revert back to 15.1.0 for your application. Since you'll want to use your component, you might also revert that one.
+
+<img src="/images/blog/versioning-5.png" width={493} />
+
+Of course, Ryan and Jed think the same way. If we're not careful, we can hit a cliff where nobody upgrades. This has happened to many software project ecosystems in the past.
+
+Therefore, we're committed to making it easy for most components and libraries built on top of React to be compatible with two major versions at the same time. We will do this by introducing new APIs before completely removing the old ones, thereby avoiding those cliffs.
+
+<img src="/images/blog/versioning-6.png" width={493} />
diff --git a/beta/src/content/blog/2016/03/07/react-v15-rc1.md b/beta/src/content/blog/2016/03/07/react-v15-rc1.md
new file mode 100644
index 000000000..78a9939ee
--- /dev/null
+++ b/beta/src/content/blog/2016/03/07/react-v15-rc1.md
@@ -0,0 +1,91 @@
+---
+title: 'React v15.0 Release Candidate'
+author: [zpao]
+---
+
+Sorry for the small delay in releasing this. As we said, we've been busy binge-watching House of Cards. That scene in the last episode where Francis and Claire Underwood <abbr title="You didn't think we would actually spoil anything did you?">████████████████████████████████████</abbr>. WOW!
+
+But now we're ready, so without further ado, we're shipping a release candidate for React v15 now. As a reminder, [we're switching to major versions](/blog/2016/02/19/new-versioning-scheme.html) to indicate that we have been using React in production for a long time. This 15.0 release follows our previous 0.14 version and we'll continue to follow semver like we've been doing since 2013. It's also worth noting that [we no longer actively support Internet Explorer 8](/blog/2016/01/12/discontinuing-ie8-support.html). We believe React will work in its current form there but we will not be prioritizing any efforts to fix new issues that only affect IE8.
+
+Please try it out before we publish the final release. Let us know if you run into any problems by filing issues on our [GitHub repo](https://github.com/facebook/react).
+
+## Upgrade Guide {/*upgrade-guide*/}
+
+Like always, we have a few breaking changes in this release. We know changes can be painful (the Facebook codebase has over 15,000 React components), so we always try to make changes gradually in order to minimize the pain.
+
+If your code is free of warnings when running under React 0.14, upgrading should be easy. The bulk of changes in this release are actually behind the scenes, impacting the way that React interacts with the DOM. The other substantial change is that React now supports the full range of SVG elements and attributes. Beyond that we have a large number of incremental improvements and additional warnings aimed to aid developers. We've also laid some groundwork in the core to bring you some new capabilities in future releases.
+
+See the changelog below for more details.
+
+## Installation {/*installation*/}
+
+We recommend using React from `npm` and using a tool like browserify or webpack to build your code into a single bundle. To install the two packages:
+
+- `npm install --save react@15.0.0-rc.1 react-dom@15.0.0-rc.1`
+
+Remember that by default, React runs extra checks and provides helpful warnings in development mode. When deploying your app, set the `NODE_ENV` environment variable to `production` to use the production build of React which does not include the development warnings and runs significantly faster.
+
+If you can’t use `npm` yet, we provide pre-built browser builds for your convenience, which are also available in the `react` package on bower.
+
+- **React**  
+  Dev build with warnings: https://fb.me/react-15.0.0-rc.1.js  
+  Minified build for production: https://fb.me/react-15.0.0-rc.1.min.js
+- **React with Add-Ons**  
+  Dev build with warnings: https://fb.me/react-with-addons-15.0.0-rc.1.js  
+  Minified build for production: https://fb.me/react-with-addons-15.0.0-rc.1.min.js
+- **React DOM** (include React in the page before React DOM)  
+  Dev build with warnings: https://fb.me/react-dom-15.0.0-rc.1.js  
+  Minified build for production: https://fb.me/react-dom-15.0.0-rc.1.min.js
+
+## Changelog {/*changelog*/}
+
+### Major changes {/*major-changes*/}
+
+- #### `document.createElement` is in and `data-reactid` is out
+
+  There were a number of large changes to our interactions with the DOM. One of the most noticeable changes is that we no longer set the `data-reactid` attribute for each DOM node. While this will make it much more difficult to know if a website is using React, the advantage is that the DOM is much more lightweight. This change was made possible by us switching to use `document.createElement` on initial render. Previously we would generate a large string of HTML and then set `node.innerHTML`. At the time, this was decided to be faster than using `document.createElement` for the majority of cases and browsers that we supported. Browsers have continued to improve and so overwhelmingly this is no longer true. By using `createElement` we can make other parts of React faster. The ids were used to map back from events to the original React component, meaning we had to do a bunch of work on every event, even though we cached this data heavily. As we've all experienced, caching and in particularly invalidating caches, can be error prone and we saw many hard to reproduce issues over the years as a result. Now we can build up a direct mapping at render time since we already have a handle on the node.
+
+- #### No more extra `<span>`s
+
+  Another big change with our DOM interaction is how we render text blocks. Previously you may have noticed that React rendered a lot of extra `<span>`s. Eg, in our most basic example on the home page we render `<div>Hello {this.props.name}</div>`, resulting in markup that contained 2 `<span>`s. Now we'll render plain text nodes interspersed with comment nodes that are used for demarcation. This gives us the same ability to update individual pieces of text, without creating extra nested nodes. Very few people have depended on the actual markup generated here so it's likely you are not impacted. However if you were targeting these `<span>`s in your CSS, you will need to adjust accordingly. You can always render them explicitly in your components.
+
+- #### Rendering `null` now uses comment nodes
+
+  We've also made use of these comment nodes to change what `null` renders to. Rendering to `null` was a feature we added in React v0.11 and was implemented by rendering `<noscript>` elements. By rendering to comment nodes now, there's a chance some of your CSS will be targeting the wrong thing, specifically if you are making use of `:nth-child` selectors. This, along with the other changes mentioned above, have always been considered implementation details of how React targets the DOM. We believe they are safe changes to make without going through a release with warnings detailing the subtle differences as they are details that should not be depended upon. Additionally, we have seen that these changes have improved React performance for many typical applications.
+
+- #### Improved SVG support
+
+  All SVG tags and attributes are now fully supported. (Uncommon SVG tags are not present on the `React.DOM` element helper, but JSX and `React.createElement` work on all tag names.) All SVG attributes match their original capitalization and hyphenation as defined in the specification (ex: `gradientTransform` must be camel-cased but `clip-path` should be hyphenated).
+
+### Breaking changes {/*breaking-changes*/}
+
+It's worth calling out the DOM structure changes above again, in particular the change from `<span>`s. In the course of updating the Facebook codebase, we found a very small amount of code that was depending on the markup that React generated. Some of these cases were integration tests like WebDriver which were doing very specific XPath queries to target nodes. Others were simply tests using `ReactDOM.renderToStaticMarkup` and comparing markup. Again, there were a very small number of changes that had to be made, but we don't want anybody to be blindsided. We encourage everybody to run their test suites when upgrading and consider alternative approaches when possible. One approach that will work for some cases is to explicitly use `<span>`s in your `render` method.
+
+These deprecations were introduced in v0.14 with a warning and the APIs are now removed.
+
+- Deprecated APIs removed from `React`, specifically `findDOMNode`, `render`, `renderToString`, `renderToStaticMarkup`, and `unmountComponentAtNode`.
+- Deprecated APIs removed from `React.addons`, specifically `batchedUpdates` and `cloneWithProps`.
+- Deprecated APIs removed from component instances, specifically `setProps`, `replaceProps`, and `getDOMNode`.
+
+### New deprecations, introduced with a warning {/*new-deprecations-introduced-with-a-warning*/}
+
+Each of these changes will continue to work as before with a new warning until the release of React 16 so you can upgrade your code gradually.
+
+- `LinkedStateMixin` and `valueLink` are now deprecated due to very low popularity. If you need this, you can use a wrapper component that implements the same behavior: [react-linked-input](https://www.npmjs.com/package/react-linked-input).
+
+### New helpful warnings {/*new-helpful-warnings*/}
+
+- If you use a minified copy of the _development_ build, React DOM kindly encourages you to use the faster production build instead.
+- React DOM: When specifying a unit-less CSS value as a string, a future version will not add `px` automatically. This version now warns in this case (ex: writing `style={{width: '300'}}`. (Unitless _number_ values like `width: 300` are unchanged.)
+- Synthetic Events will now warn when setting and accessing properties (which will not get cleared appropriately), as well as warn on access after an event has been returned to the pool.
+- Elements will now warn when attempting to read `ref` and `key` from the props.
+- React DOM now attempts to warn for mistyped event handlers on DOM elements (ex: `onclick` which should be `onClick`)
+
+### Notable bug fixes {/*notable-bug-fixes*/}
+
+- Fixed multiple small memory leaks
+- Input events are handled more reliably in IE 10 and IE 11; spurious events no longer fire when using a placeholder.
+- React DOM now supports the `cite` and `profile` HTML attributes.
+- React DOM now supports the `onAnimationStart`, `onAnimationEnd`, `onAnimationIteration`, `onTransitionEnd`, and `onInvalid` events. Support for `onLoad` has been added to `object` elements.
+- `Object.is` is used in a number of places to compare values, which leads to fewer false positives, especially involving `NaN`. In particular, this affects the `shallowCompare` add-on.
+- React DOM now defaults to using DOM attributes instead of properties, which fixes a few edge case bugs. Additionally the nullification of values (ex: `href={null}`) now results in the forceful removal, no longer trying to set to the default value used by browsers in the absence of a value.
diff --git a/beta/src/content/blog/2016/03/16/react-v15-rc2.md b/beta/src/content/blog/2016/03/16/react-v15-rc2.md
new file mode 100644
index 000000000..3e95dc4f6
--- /dev/null
+++ b/beta/src/content/blog/2016/03/16/react-v15-rc2.md
@@ -0,0 +1,32 @@
+---
+title: 'React v15.0 Release Candidate 2'
+author: [zpao]
+---
+
+Today we're releasing a second release candidate for version 15. Primarily this is to address 2 issues, but we also picked up a few small changes from new contributors, including some improvements to some of our new warnings.
+
+The most pressing change that was made is to fix a bug in our new code that removes `<span>`s, as discussed in the original RC1 post. Specifically we have some code that takes a different path in IE11 and Edge due to the speed of some DOM operations. There was a bug in this code which didn't break out of the optimization for `DocumentFragment`s, resulting in text not appearing at all. Thanks to the several people who [reported this](https://github.com/facebook/react/issues/6246).
+
+The other change is to our SVG code. In RC1 we had made the decision to pass through all attributes directly. This led to [some confusion with `class` vs `className`](https://github.com/facebook/react/issues/6211) and ultimately led us to reconsider our position on the approach. Passing through all attributes meant that we would have two different patterns for using React where things like hyphenated attributes would work for SVG but not HTML. In the future, we _might_ change our approach to the problem for HTML as well but in the meantime, maintaining consistency is important. So we reverted the changes that allowed the attributes to be passed through and instead expanded the SVG property list to include all attributes that are in the spec. We believe we have everything now but definitely [let us know](https://github.com/facebook/react/issues/1657#issuecomment-197031403) if we missed anything. It was and still is our intent to support the full range of SVG tags and attributes in this release.
+
+Thanks again to everybody who has tried the RC1 and reported issues. It has been extremely important and we wouldn't be able to do this without your help!
+
+## Installation {/*installation*/}
+
+We recommend using React from `npm` and using a tool like browserify or webpack to build your code into a single bundle. To install the two packages:
+
+- `npm install --save react@15.0.0-rc.2 react-dom@15.0.0-rc.2`
+
+Remember that by default, React runs extra checks and provides helpful warnings in development mode. When deploying your app, set the `NODE_ENV` environment variable to `production` to use the production build of React which does not include the development warnings and runs significantly faster.
+
+If you can’t use `npm` yet, we provide pre-built browser builds for your convenience, which are also available in the `react` package on bower.
+
+- **React**  
+  Dev build with warnings: https://fb.me/react-15.0.0-rc.2.js  
+  Minified build for production: https://fb.me/react-15.0.0-rc.2.min.js
+- **React with Add-Ons**  
+  Dev build with warnings: https://fb.me/react-with-addons-15.0.0-rc.2.js  
+  Minified build for production: https://fb.me/react-with-addons-15.0.0-rc.2.min.js
+- **React DOM** (include React in the page before React DOM)  
+  Dev build with warnings: https://fb.me/react-dom-15.0.0-rc.2.js  
+  Minified build for production: https://fb.me/react-dom-15.0.0-rc.2.min.js
diff --git a/beta/src/content/blog/2016/03/29/react-v0.14.8.md b/beta/src/content/blog/2016/03/29/react-v0.14.8.md
new file mode 100644
index 000000000..0296f6480
--- /dev/null
+++ b/beta/src/content/blog/2016/03/29/react-v0.14.8.md
@@ -0,0 +1,33 @@
+---
+title: 'React v0.14.8'
+author: [gaearon]
+---
+
+We have already released two release candidates for React 15, and the final version is coming soon.
+
+However [Ian Christian Myers](https://github.com/iancmyers) discovered a memory leak related to server rendering in React 0.14 and [contributed a fix](https://github.com/facebook/react/pull/6060). While this memory leak has already been fixed in a different way in the React 15 release candidates, we decided to cut another 0.14 release that contains just this fix.
+
+The release is now available for download:
+
+- **React**  
+  Dev build with warnings: https://fb.me/react-0.14.8.js  
+  Minified build for production: https://fb.me/react-0.14.8.min.js
+- **React with Add-Ons**  
+  Dev build with warnings: https://fb.me/react-with-addons-0.14.8.js  
+  Minified build for production: https://fb.me/react-with-addons-0.14.8.min.js
+- **React DOM** (include React in the page before React DOM)  
+  Dev build with warnings: https://fb.me/react-dom-0.14.8.js  
+  Minified build for production: https://fb.me/react-dom-0.14.8.min.js
+- **React DOM Server** (include React in the page before React DOM Server)  
+  Dev build with warnings: https://fb.me/react-dom-server-0.14.8.js  
+  Minified build for production: https://fb.me/react-dom-server-0.14.8.min.js
+
+We've also published version `0.14.8` of the `react`, `react-dom`, and addons packages on npm and the `react` package on bower.
+
+---
+
+## Changelog {/*changelog*/}
+
+### React {/*react*/}
+
+- Fixed memory leak when rendering on the server
diff --git a/beta/src/content/blog/2016/04/07/react-v15.md b/beta/src/content/blog/2016/04/07/react-v15.md
new file mode 100644
index 000000000..7486c2393
--- /dev/null
+++ b/beta/src/content/blog/2016/04/07/react-v15.md
@@ -0,0 +1,259 @@
+---
+title: 'React v15.0'
+author: [gaearon]
+---
+
+We would like to thank the React community for reporting issues and regressions in the release candidates on our [issue tracker](https://github.com/facebook/react/issues/). Over the last few weeks we fixed those issues, and now, after two release candidates, we are excited to finally release the stable version of React 15.
+
+As a reminder, [we’re switching to major versions](/blog/2016/02/19/new-versioning-scheme.html) to indicate that we have been using React in production for a long time. This 15.0 release follows our previous 0.14 version and we’ll continue to follow semver like we’ve been doing since 2013. It’s also worth noting that [we no longer actively support Internet Explorer 8](/blog/2016/01/12/discontinuing-ie8-support.html). We believe React will work in its current form there but we will not be prioritizing any efforts to fix new issues that only affect IE8.
+
+React 15 brings significant improvements to how we interact with the DOM:
+
+- We are now using `document.createElement` instead of setting `innerHTML` when mounting components. This allows us to get rid of the `data-reactid` attribute on every node and make the DOM lighter. Using `document.createElement` is also faster in modern browsers and fixes a number of edge cases related to SVG elements and running multiple copies of React on the same page.
+
+- Historically our support for SVG has been incomplete, and many tags and attributes were missing. We heard you, and in React 15 we [added support for all the SVG attributes that are recognized by today’s browsers](https://github.com/facebook/react/pull/6243). If we missed any of the attributes you’d like to use, please [let us know](https://github.com/facebook/react/issues/1657). As a bonus, thanks to using `document.createElement`, we no longer need to maintain a list of SVG tags, so any SVG tags that were previously unsupported should work just fine in React 15.
+
+- We received some amazing contributions from the community in this release, and we would like to highlight [this pull request](https://github.com/facebook/react/pull/5753) by [Michael Wiencek](https://github.com/mwiencek) in particular. Thanks to Michael’s work, React 15 no longer emits extra `<span>` nodes around the text, making the DOM output much cleaner. This was a longstanding annoyance for React users so it’s exciting to accept this as an outside contribution.
+
+While this isn’t directly related to the release, we understand that in order to receive more community contributions like Michael’s, we need to communicate our goals and priorities more openly, and review pull requests more decisively. As a first step towards this, we started publishing [React core team weekly meeting notes](https://github.com/reactjs/core-notes) again. We also intend to introduce an RFC process inspired by [Ember RFCs](https://github.com/emberjs/rfcs) so external contributors can have more insight and influence in the future development of React. We will keep you updated about this on our blog.
+
+We are also experimenting with a new changelog format in this post. Every change now links to the corresponding pull request and mentions the author. Let us know whether you find this useful!
+
+## Upgrade Guide {/*upgrade-guide*/}
+
+As usual with major releases, React 15 will remove support for some of the patterns deprecated nine months ago in React 0.14. We know changes can be painful (the Facebook codebase has over 20,000 React components, and that’s not even counting React Native), so we always try to make changes gradually in order to minimize the pain.
+
+If your code is free of warnings when running under React 0.14, upgrading should be easy. The bulk of changes in this release are actually behind the scenes, impacting the way that React interacts with the DOM. The other substantial change is that React now supports the full range of SVG elements and attributes. Beyond that we have a large number of incremental improvements and additional warnings aimed to aid developers. We’ve also laid some groundwork in the core to bring you some new capabilities in future releases.
+
+See the changelog below for more details.
+
+## Installation {/*installation*/}
+
+We recommend using React from `npm` and using a tool like browserify or webpack to build your code into a single bundle. To install the two packages:
+
+- `npm install --save react react-dom`
+
+Remember that by default, React runs extra checks and provides helpful warnings in development mode. When deploying your app, set the `NODE_ENV` environment variable to `production` to use the production build of React which does not include the development warnings and runs significantly faster.
+
+If you can’t use `npm` yet, we provide pre-built browser builds for your convenience, which are also available in the `react` package on bower.
+
+- **React**  
+  Dev build with warnings: https://fb.me/react-15.0.0.js  
+  Minified build for production: https://fb.me/react-15.0.0.min.js
+- **React with Add-Ons**  
+  Dev build with warnings: https://fb.me/react-with-addons-15.0.0.js  
+  Minified build for production: https://fb.me/react-with-addons-15.0.0.min.js
+- **React DOM** (include React in the page before React DOM)  
+  Dev build with warnings: https://fb.me/react-dom-15.0.0.js  
+  Minified build for production: https://fb.me/react-dom-15.0.0.min.js
+
+## Changelog {/*changelog*/}
+
+### Major changes {/*major-changes*/}
+
+- #### `document.createElement` is in and `data-reactid` is out
+
+  There were a number of large changes to our interactions with the DOM. One of the most noticeable changes is that we no longer set the `data-reactid` attribute for each DOM node. While this will make it more difficult to know if a website is using React, the advantage is that the DOM is much more lightweight. This change was made possible by us switching to use `document.createElement` on initial render. Previously we would generate a large string of HTML and then set `node.innerHTML`. At the time, this was decided to be faster than using `document.createElement` for the majority of cases and browsers that we supported. Browsers have continued to improve and so overwhelmingly this is no longer true. By using `createElement` we can make other parts of React faster. The ids were used to map back from events to the original React component, meaning we had to do a bunch of work on every event, even though we cached this data heavily. As we’ve all experienced, caching and in particularly invalidating caches, can be error prone and we saw many hard to reproduce issues over the years as a result. Now we can build up a direct mapping at render time since we already have a handle on the node.
+
+  **Note:** `data-reactid` is still present for server-rendered content, however it is much smaller than before and is simply an auto-incrementing counter.
+
+  <small>[@sophiebits](https://github.com/sophiebits) in [#5205](https://github.com/facebook/react/pull/5205)</small>
+
+- #### No more extra `<span>`s
+
+  Another big change with our DOM interaction is how we render text blocks. Previously you may have noticed that React rendered a lot of extra `<span>`s. For example, in our most basic example on the home page we render `<div>Hello {this.props.name}</div>`, resulting in markup that contained 2 `<span>`s. Now we’ll render plain text nodes interspersed with comment nodes that are used for demarcation. This gives us the same ability to update individual pieces of text, without creating extra nested nodes. Very few people have depended on the actual markup generated here so it’s likely you are not impacted. However if you were targeting these `<span>`s in your CSS, you will need to adjust accordingly. You can always render them explicitly in your components.
+
+  <small>[@mwiencek](https://github.com/mwiencek) in [#5753](https://github.com/facebook/react/pull/5753)</small>
+
+- #### Rendering `null` now uses comment nodes
+
+  We’ve also made use of these comment nodes to change what `null` renders to. Rendering to `null` was a feature we added in React 0.11 and was implemented by rendering `<noscript>` elements. By rendering to comment nodes now, there’s a chance some of your CSS will be targeting the wrong thing, specifically if you are making use of `:nth-child` selectors. React’s use of the `<noscript>` tag has always been considered an implementation detail of how React targets the DOM. We believe they are safe changes to make without going through a release with warnings detailing the subtle differences as they are details that should not be depended upon. Additionally, we have seen that these changes have improved React performance for many typical applications.
+
+  <small>[@sophiebits](https://github.com/sophiebits) in [#5451](https://github.com/facebook/react/pull/5451)</small>
+
+- #### Function components can now return `null` too
+
+  We added support for [defining stateless components as functions](/blog/2015/09/10/react-v0.14-rc1.html#stateless-function-components) in React 0.14. However, React 0.14 still allowed you to define a class component without extending `React.Component` or using `React.createClass()`, so [we couldn’t reliably tell if your component is a function or a class](https://github.com/facebook/react/issues/5355), and did not allow returning `null` from it. This issue is solved in React 15, and you can now return `null` from any component, whether it is a class or a function.
+
+  <small>[@jimfb](https://github.com/jimfb) in [#5884](https://github.com/facebook/react/pull/5884)</small>
+
+- #### Improved SVG support
+
+  All SVG tags are now fully supported. (Uncommon SVG tags are not present on the `React.DOM` element helper, but JSX and `React.createElement` work on all tag names.) All SVG attributes that are implemented by the browsers should be supported too. If you find any attributes that we have missed, please [let us know in this issue](https://github.com/facebook/react/issues/1657).
+
+  <small>[@zpao](https://github.com/zpao) in [#6243](https://github.com/facebook/react/pull/6243)</small>
+
+### Breaking changes {/*breaking-changes*/}
+
+- #### No extra `<span>`s
+
+  It’s worth calling out the DOM structure changes above again, in particular the change from `<span>`s. In the course of updating the Facebook codebase, we found a very small amount of code that was depending on the markup that React generated. Some of these cases were integration tests like WebDriver which were doing very specific XPath queries to target nodes. Others were simply tests using `ReactDOM.renderToStaticMarkup` and comparing markup. Again, there were a very small number of changes that had to be made, but we don’t want anybody to be blindsided. We encourage everybody to run their test suites when upgrading and consider alternative approaches when possible. One approach that will work for some cases is to explicitly use `<span>`s in your `render` method.
+
+  <small>[@mwiencek](https://github.com/mwiencek) in [#5753](https://github.com/facebook/react/pull/5753)</small>
+
+- #### `React.cloneElement()` now resolves `defaultProps`
+
+  We fixed a bug in `React.cloneElement()` that some components may rely on. If some of the `props` received by `cloneElement()` are `undefined`, it used to return an element with `undefined` values for those props. In React 15, we’re changing it to be consistent with `createElement()`. Now any `undefined` props passed to `cloneElement()` are resolved to the corresponding component’s `defaultProps`. Only one of our 20,000 React components was negatively affected by this so we feel comfortable releasing this change without keeping the old behavior for another release cycle.
+
+  <small>[@truongduy134](https://github.com/truongduy134) in [#5997](https://github.com/facebook/react/pull/5997)</small>
+
+- #### `ReactPerf.getLastMeasurements()` is opaque
+
+  This change won’t affect applications but may break some third-party tools. We are [revamping `ReactPerf` implementation](https://github.com/facebook/react/pull/6046) and plan to release it during the 15.x cycle. The internal performance measurement format is subject to change so, for the time being, we consider the return value of `ReactPerf.getLastMeasurements()` an opaque data structure that should not be relied upon.
+
+  <small>[@gaearon](https://github.com/gaearon) in [#6286](https://github.com/facebook/react/pull/6286)</small>
+
+- #### Removed deprecations
+
+  These deprecations were introduced nine months ago in v0.14 with a warning and are removed:
+
+  - Deprecated APIs are removed from the `React` top-level export: `findDOMNode`, `render`, `renderToString`, `renderToStaticMarkup`, and `unmountComponentAtNode`. As a reminder, they are now available on `ReactDOM` and `ReactDOMServer`.  
+    <small>[@jimfb](https://github.com/jimfb) in [#5832](https://github.com/facebook/react/pull/5832)</small>
+
+  - Deprecated addons are removed: `batchedUpdates` and `cloneWithProps`.  
+    <small>[@jimfb](https://github.com/jimfb) in [#5859](https://github.com/facebook/react/pull/5859), [@zpao](https://github.com/zpao) in [#6016](https://github.com/facebook/react/pull/6016)</small>
+
+  - Deprecated component instance methods are removed: `setProps`, `replaceProps`, and `getDOMNode`.  
+    <small>[@jimfb](https://github.com/jimfb) in [#5570](https://github.com/facebook/react/pull/5570)</small>
+
+  - Deprecated CommonJS `react/addons` entry point is removed. As a reminder, you should use separate `react-addons-*` packages instead. This only applies if you use the CommonJS builds.  
+    <small>[@gaearon](https://github.com/gaearon) in [#6285](https://github.com/facebook/react/pull/6285)</small>
+
+  - Passing `children` to void elements like `<input>` was deprecated, and now throws an error.  
+    <small>[@jonhester](https://github.com/jonhester) in [#3372](https://github.com/facebook/react/pull/3372)</small>
+
+  - React-specific properties on DOM `refs` (e.g. `this.refs.div.props`) were deprecated, and are removed now.  
+    <small>[@jimfb](https://github.com/jimfb) in [#5495](https://github.com/facebook/react/pull/5495)</small>
+
+### New deprecations, introduced with a warning {/*new-deprecations-introduced-with-a-warning*/}
+
+Each of these changes will continue to work as before with a new warning until the release of React 16 so you can upgrade your code gradually.
+
+- `LinkedStateMixin` and `valueLink` are now deprecated due to very low popularity. If you need this, you can use a wrapper component that implements the same behavior: [react-linked-input](https://www.npmjs.com/package/react-linked-input).  
+  <small>[@jimfb](https://github.com/jimfb) in [#6127](https://github.com/facebook/react/pull/6127)</small>
+
+- Future versions of React will treat `<input value={null}>` as a request to clear the input. However, React 0.14 has been ignoring `value={null}`. React 15 warns you on a `null` input value and offers you to clarify your intention. To fix the warning, you may explicitly pass an empty string to clear a controlled input, or pass `undefined` to make the input uncontrolled.  
+  <small>[@antoaravinth](https://github.com/antoaravinth) in [#5048](https://github.com/facebook/react/pull/5048)</small>
+
+- `ReactPerf.printDOM()` was renamed to `ReactPerf.printOperations()`, and `ReactPerf.getMeasurementsSummaryMap()` was renamed to `ReactPerf.getWasted()`.  
+  <small>[@gaearon](https://github.com/gaearon) in [#6287](https://github.com/facebook/react/pull/6287)</small>
+
+### New helpful warnings {/*new-helpful-warnings*/}
+
+- If you use a minified copy of the _development_ build, React DOM kindly encourages you to use the faster production build instead.  
+  <small>[@sophiebits](https://github.com/sophiebits) in [#5083](https://github.com/facebook/react/pull/5083)</small>
+
+- React DOM: When specifying a unit-less CSS value as a string, a future version will not add `px` automatically. This version now warns in this case (ex: writing `style={{width: '300'}}`. Unitless _number_ values like `width: 300` are unchanged.  
+  <small>[@pluma](https://github.com/pluma) in [#5140](https://github.com/facebook/react/pull/5140)</small>
+
+- Synthetic Events will now warn when setting and accessing properties (which will not get cleared appropriately), as well as warn on access after an event has been returned to the pool.  
+  <small>[@kentcdodds](https://github.com/kentcdodds) in [#5940](https://github.com/facebook/react/pull/5940) and [@koba04](https://github.com/koba04) in [#5947](https://github.com/facebook/react/pull/5947)</small>
+
+- Elements will now warn when attempting to read `ref` and `key` from the props.  
+  <small>[@prometheansacrifice](https://github.com/prometheansacrifice) in [#5744](https://github.com/facebook/react/pull/5744)</small>
+
+- React will now warn if you pass a different `props` object to `super()` in the constructor.  
+  <small>[@prometheansacrifice](https://github.com/prometheansacrifice) in [#5346](https://github.com/facebook/react/pull/5346)</small>
+
+- React will now warn if you call `setState()` inside `getChildContext()`.  
+  <small>[@raineroviir](https://github.com/raineroviir) in [#6121](https://github.com/facebook/react/pull/6121)</small>
+
+- React DOM now attempts to warn for mistyped event handlers on DOM elements, such as `onclick` which should be `onClick`.  
+  <small>[@ali](https://github.com/ali) in [#5361](https://github.com/facebook/react/pull/5361)</small>
+
+- React DOM now warns about `NaN` values in `style`.  
+  <small>[@jontewks](https://github.com/jontewks) in [#5811](https://github.com/facebook/react/pull/5811)</small>
+
+- React DOM now warns if you specify both `value` and `defaultValue` for an input.  
+  <small>[@mgmcdermott](https://github.com/mgmcdermott) in [#5823](https://github.com/facebook/react/pull/5823)</small>
+
+- React DOM now warns if an input switches between being controlled and uncontrolled.  
+  <small>[@TheBlasfem](https://github.com/TheBlasfem) in [#5864](https://github.com/facebook/react/pull/5864)</small>
+
+- React DOM now warns if you specify `onFocusIn` or `onFocusOut` handlers as they are unnecessary in React.  
+  <small>[@jontewks](https://github.com/jontewks) in [#6296](https://github.com/facebook/react/pull/6296)</small>
+
+- React now prints a descriptive error message when you pass an invalid callback as the last argument to `ReactDOM.render()`, `this.setState()`, or `this.forceUpdate()`.  
+  <small>[@conorhastings](https://github.com/conorhastings) in [#5193](https://github.com/facebook/react/pull/5193) and [@gaearon](https://github.com/gaearon) in [#6310](https://github.com/facebook/react/pull/6310)</small>
+
+- Add-Ons: `TestUtils.Simulate()` now prints a helpful message if you attempt to use it with shallow rendering.  
+  <small>[@conorhastings](https://github.com/conorhastings) in [#5358](https://github.com/facebook/react/pull/5358)</small>
+
+- PropTypes: `arrayOf()` and `objectOf()` provide better error messages for invalid arguments.  
+  <small>[@chicoxyzzy](https://github.com/chicoxyzzy) in [#5390](https://github.com/facebook/react/pull/5390)</small>
+
+### Notable bug fixes {/*notable-bug-fixes*/}
+
+- Fixed multiple small memory leaks.  
+  <small>[@sophiebits](https://github.com/sophiebits) in [#4983](https://github.com/facebook/react/pull/4983) and [@victor-homyakov](https://github.com/victor-homyakov) in [#6309](https://github.com/facebook/react/pull/6309)</small>
+
+- Input events are handled more reliably in IE 10 and IE 11; spurious events no longer fire when using a placeholder.  
+  <small>[@jquense](https://github.com/jquense) in [#4051](https://github.com/facebook/react/pull/4051)</small>
+
+- The `componentWillReceiveProps()` lifecycle method is now consistently called when `context` changes.  
+  <small>[@milesj](https://github.com/milesj) in [#5787](https://github.com/facebook/react/pull/5787)</small>
+
+- `React.cloneElement()` doesn’t append slash to an existing `key` when used inside `React.Children.map()`.  
+  <small>[@ianobermiller](https://github.com/ianobermiller) in [#5892](https://github.com/facebook/react/pull/5892)</small>
+
+- React DOM now supports the `cite` and `profile` HTML attributes.  
+  <small>[@AprilArcus](https://github.com/AprilArcus) in [#6094](https://github.com/facebook/react/pull/6094) and [@saiichihashimoto](https://github.com/saiichihashimoto) in [#6032](https://github.com/facebook/react/pull/6032)</small>
+
+- React DOM now supports `cssFloat`, `gridRow` and `gridColumn` CSS properties.  
+  <small>[@stevenvachon](https://github.com/stevenvachon) in [#6133](https://github.com/facebook/react/pull/6133) and [@mnordick](https://github.com/mnordick) in [#4779](https://github.com/facebook/react/pull/4779)</small>
+
+- React DOM now correctly handles `borderImageOutset`, `borderImageWidth`, `borderImageSlice`, `floodOpacity`, `strokeDasharray`, and `strokeMiterlimit` as unitless CSS properties.  
+  <small>[@rofrischmann](https://github.com/rofrischmann) in [#6210](https://github.com/facebook/react/pull/6210) and [#6270](https://github.com/facebook/react/pull/6270)</small>
+
+- React DOM now supports the `onAnimationStart`, `onAnimationEnd`, `onAnimationIteration`, `onTransitionEnd`, and `onInvalid` events. Support for `onLoad` has been added to `object` elements.  
+  <small>[@tomduncalf](https://github.com/tomduncalf) in [#5187](https://github.com/facebook/react/pull/5187), [@milesj](https://github.com/milesj) in [#6005](https://github.com/facebook/react/pull/6005), and [@ara4n](https://github.com/ara4n) in [#5781](https://github.com/facebook/react/pull/5781)</small>
+
+- React DOM now defaults to using DOM attributes instead of properties, which fixes a few edge case bugs. Additionally the nullification of values (ex: `href={null}`) now results in the forceful removal, no longer trying to set to the default value used by browsers in the absence of a value.  
+  <small>[@syranide](https://github.com/syranide) in [#1510](https://github.com/facebook/react/pull/1510)</small>
+
+- React DOM does not mistakingly coerce `children` to strings for Web Components.  
+  <small>[@jimfb](https://github.com/jimfb) in [#5093](https://github.com/facebook/react/pull/5093)</small>
+
+- React DOM now correctly normalizes SVG `<use>` events.  
+  <small>[@edmellum](https://github.com/edmellum) in [#5720](https://github.com/facebook/react/pull/5720)</small>
+
+- React DOM does not throw if a `<select>` is unmounted while its `onChange` handler is executing.  
+  <small>[@sambev](https://github.com/sambev) in [#6028](https://github.com/facebook/react/pull/6028)</small>
+
+- React DOM does not throw in Windows 8 apps.  
+  <small>[@Andrew8xx8](https://github.com/Andrew8xx8) in [#6063](https://github.com/facebook/react/pull/6063)</small>
+
+- React DOM does not throw when asynchronously unmounting a child with a `ref`.  
+  <small>[@yiminghe](https://github.com/yiminghe) in [#6095](https://github.com/facebook/react/pull/6095)</small>
+
+- React DOM no longer forces synchronous layout because of scroll position tracking.  
+  <small>[@syranide](https://github.com/syranide) in [#2271](https://github.com/facebook/react/pull/2271)</small>
+
+- `Object.is` is used in a number of places to compare values, which leads to fewer false positives, especially involving `NaN`. In particular, this affects the `shallowCompare` add-on.  
+  <small>[@chicoxyzzy](https://github.com/chicoxyzzy) in [#6132](https://github.com/facebook/react/pull/6132)</small>
+
+- Add-Ons: ReactPerf no longer instruments adding or removing an event listener because they don’t really touch the DOM due to event delegation.  
+  <small>[@antoaravinth](https://github.com/antoaravinth) in [#5209](https://github.com/facebook/react/pull/5209)</small>
+
+### Other improvements {/*improvements*/}
+
+- React now uses `loose-envify` instead of `envify` so it installs fewer transitive dependencies.  
+  <small>[@qerub](https://github.com/qerub) in [#6303](https://github.com/facebook/react/pull/6303)</small>
+
+- Shallow renderer now exposes `getMountedInstance()`.  
+  <small>[@glenjamin](https://github.com/glenjamin) in [#4918](https://github.com/facebook/react/pull/4918)</small>
+
+- Shallow renderer now returns the rendered output from `render()`.  
+  <small>[@simonewebdesign](https://github.com/simonewebdesign) in [#5411](https://github.com/facebook/react/pull/5411)</small>
+
+- React no longer depends on ES5 _shams_ for `Object.create` and `Object.freeze` in older environments. It still, however, requires ES5 _shims_ in those environments.  
+  <small>[@dgreensp](https://github.com/dgreensp) in [#4959](https://github.com/facebook/react/pull/4959)</small>
+
+- React DOM now allows `data-` attributes with names that start with numbers.  
+  <small>[@nLight](https://github.com/nLight) in [#5216](https://github.com/facebook/react/pull/5216)</small>
+
+- React DOM adds a new `suppressContentEditableWarning` prop for components like [Draft.js](https://facebook.github.io/draft-js/) that intentionally manage `contentEditable` children with React.  
+  <small>[@mxstbr](https://github.com/mxstbr) in [#6112](https://github.com/facebook/react/pull/6112)</small>
+
+- React improves the performance for `createClass()` on complex specs.  
+  <small>[@sophiebits](https://github.com/sophiebits) in [#5550](https://github.com/facebook/react/pull/5550)</small>
diff --git a/beta/src/content/blog/2016/04/08/react-v15.0.1.md b/beta/src/content/blog/2016/04/08/react-v15.0.1.md
new file mode 100644
index 000000000..432695159
--- /dev/null
+++ b/beta/src/content/blog/2016/04/08/react-v15.0.1.md
@@ -0,0 +1,36 @@
+---
+title: 'React v15.0.1'
+author: [zpao]
+---
+
+Yesterday afternoon we shipped v15.0.0 and quickly got some feedback about a couple of issues. We apologize for these problems and we've been working since then to make sure we get fixes into your hands as quickly as possible.
+
+The first of these issues is related to the removal of an undocumented API. This API was added to enable [JSX Spread Attributes](/docs/jsx-spread.html) in our JS compile tools (react-tools, JSXTransformer) before `Object.assign` was standard. When we stopped supporting these tools last year, we kept the API there to catch the longer tail of people using those tools. Meanwhile we moved to using Babel and encouraged others to do the same. Babel will typically compile the spread use to an `_extends` helper, which will use `Object.assign`. We did not properly research other compilation tools before deciding to remove the API in v15. Specifically, TypeScript and coffee-react are two popular packages using `React.__spread`, as well as reactify which still makes use react-tools. In order to make sure that code compiled with these tools is not broken, we will be restoring the `React.__spread` API and adding a warning. It will be removed in the future so if you maintain a project making using of it, we encourage you to compile to `Object.assign` directly or a similar helper function.
+
+The second issue resulted in cursor position being lost in controlled inputs. We merged a pull request earlier this week to fix a separate regression from v0.14. Our goal was to target `<option>` elements but we ended up targeting all interactions with `value` properties. Unfortunately we didn't test it as thoroughly as we thought. We backed out the offending change and fixed the issue in different way which doesn't have the same problem.
+
+We apologize if you installed 15.0.0 and have encountered these issues yourselves.
+
+As usual, you can get install the `react` package via npm or download a browser bundle.
+
+- **React**  
+  Dev build with warnings: https://fb.me/react-15.0.1.js  
+  Minified build for production: https://fb.me/react-15.0.1.min.js
+- **React with Add-Ons**  
+  Dev build with warnings: https://fb.me/react-with-addons-15.0.1.js  
+  Minified build for production: https://fb.me/react-with-addons-15.0.1.min.js
+- **React DOM** (include React in the page before React DOM)  
+  Dev build with warnings: https://fb.me/react-dom-15.0.1.js  
+  Minified build for production: https://fb.me/react-dom-15.0.1.min.js
+
+## Changelog {/*changelog*/}
+
+### React {/*react*/}
+
+- Restore `React.__spread` API to unbreak code compiled with some tools making use of this undocumented API. It is now officially deprecated.  
+  <small>[@zpao](https://github.com/zpao) in [#6444](https://github.com/facebook/react/pull/6444)</small>
+
+### ReactDOM {/*reactdom*/}
+
+- Fixed issue resulting in loss of cursor position in controlled inputs.  
+  <small>[@sophiebits](https://github.com/sophiebits) in [#6449](https://github.com/facebook/react/pull/6449)</small>
diff --git a/beta/src/content/blog/2016/07/11/introducing-reacts-error-code-system.md b/beta/src/content/blog/2016/07/11/introducing-reacts-error-code-system.md
new file mode 100644
index 000000000..1b4d5ff67
--- /dev/null
+++ b/beta/src/content/blog/2016/07/11/introducing-reacts-error-code-system.md
@@ -0,0 +1,18 @@
+---
+title: "Introducing React's Error Code System"
+author: [keyanzhang]
+---
+
+Building a better developer experience has been one of the things that React deeply cares about, and a crucial part of it is to detect anti-patterns/potential errors early and provide helpful error messages when things (may) go wrong. However, most of these only exist in development mode; in production, we avoid having extra expensive assertions and sending down full error messages in order to reduce the number of bytes sent over the wire.
+
+Prior to this release, we stripped out error messages at build-time and this is why you might have seen this message in production:
+
+> Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.
+
+In order to make debugging in production easier, we're introducing an Error Code System in [15.2.0](https://github.com/facebook/react/releases/tag/v15.2.0). We developed a [gulp script](https://github.com/facebook/react/blob/master/scripts/error-codes/gulp-extract-errors.js) that collects all of our `invariant` error messages and folds them to a [JSON file](https://github.com/facebook/react/blob/master/scripts/error-codes/codes.json), and at build-time Babel uses the JSON to [rewrite](https://github.com/facebook/react/blob/master/scripts/error-codes/replace-invariant-error-codes.js) our `invariant` calls in production to reference the corresponding error IDs. Now when things go wrong in production, the error that React throws will contain a URL with an error ID and relevant information. The URL will point you to a page in our documentation where the original error message gets reassembled.
+
+While we hope you don't see errors often, you can see how it works [here](/docs/error-decoder.html?invariant=109&args[]=Foo). This is what the same error from above will look like:
+
+> Minified React error #109; visit [https://reactjs.org/docs/error-decoder.html?invariant=109&args[]=Foo](/docs/error-decoder.html?invariant=109&args[]=Foo) for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
+
+We do this so that the developer experience is as good as possible, while also keeping the production bundle size as small as possible. This feature shouldn't require any changes on your side — use the `min.js` files in production or bundle your application code with `process.env.NODE_ENV === 'production'` and you should be good to go!
diff --git a/beta/src/content/blog/2016/07/13/mixins-considered-harmful.md b/beta/src/content/blog/2016/07/13/mixins-considered-harmful.md
new file mode 100644
index 000000000..743a3e3ae
--- /dev/null
+++ b/beta/src/content/blog/2016/07/13/mixins-considered-harmful.md
@@ -0,0 +1,594 @@
+---
+title: 'Mixins Considered Harmful'
+author: [gaearon]
+---
+
+“How do I share the code between several components?” is one of the first questions that people ask when they learn React. Our answer has always been to use component composition for code reuse. You can define a component and use it in several other components.
+
+It is not always obvious how a certain pattern can be solved with composition. React is influenced by functional programming but it came into the field that was dominated by object-oriented libraries. It was hard for engineers both inside and outside of Facebook to give up on the patterns they were used to.
+
+To ease the initial adoption and learning, we included certain escape hatches into React. The mixin system was one of those escape hatches, and its goal was to give you a way to reuse code between components when you aren’t sure how to solve the same problem with composition.
+
+Three years passed since React was released. The landscape has changed. Multiple view libraries now adopt a component model similar to React. Using composition over inheritance to build declarative user interfaces is no longer a novelty. We are also more confident in the React component model, and we have seen many creative uses of it both internally and in the community.
+
+In this post, we will consider the problems commonly caused by mixins. Then we will suggest several alternative patterns for the same use cases. We have found those patterns to scale better with the complexity of the codebase than mixins.
+
+## Why Mixins are Broken {/*why-mixins-are-broken*/}
+
+At Facebook, React usage has grown from a few components to thousands of them. This gives us a window into how people use React. Thanks to declarative rendering and top-down data flow, many teams were able to fix a bunch of bugs while shipping new features as they adopted React.
+
+However it’s inevitable that some of our code using React gradually became incomprehensible. Occasionally, the React team would see groups of components in different projects that people were afraid to touch. These components were too easy to break accidentally, were confusing to new developers, and eventually became just as confusing to the people who wrote them in the first place. Much of this confusion was caused by mixins. At the time, I wasn’t working at Facebook but I came to the [same conclusions](https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750) after writing my fair share of terrible mixins.
+
+This doesn’t mean that mixins themselves are bad. People successfully employ them in different languages and paradigms, including some functional languages. At Facebook, we extensively use traits in Hack which are fairly similar to mixins. Nevertheless, we think that mixins are unnecessary and problematic in React codebases. Here’s why.
+
+### Mixins introduce implicit dependencies {/*mixins-introduce-implicit-dependencies*/}
+
+Sometimes a component relies on a certain method defined in the mixin, such as `getClassName()`. Sometimes it’s the other way around, and mixin calls a method like `renderHeader()` on the component. JavaScript is a dynamic language so it’s hard to enforce or document these dependencies.
+
+Mixins break the common and usually safe assumption that you can rename a state key or a method by searching for its occurrences in the component file. You might write a stateful component and then your coworker might add a mixin that reads this state. In a few months, you might want to move that state up to the parent component so it can be shared with a sibling. Will you remember to update the mixin to read a prop instead? What if, by now, other components also use this mixin?
+
+These implicit dependencies make it hard for new team members to contribute to a codebase. A component’s `render()` method might reference some method that isn’t defined on the class. Is it safe to remove? Perhaps it’s defined in one of the mixins. But which one of them? You need to scroll up to the mixin list, open each of those files, and look for this method. Worse, mixins can specify their own mixins, so the search can be deep.
+
+Often, mixins come to depend on other mixins, and removing one of them breaks the other. In these situations it is very tricky to tell how the data flows in and out of mixins, and what their dependency graph looks like. Unlike components, mixins don’t form a hierarchy: they are flattened and operate in the same namespace.
+
+### Mixins cause name clashes {/*mixins-cause-name-clashes*/}
+
+There is no guarantee that two particular mixins can be used together. For example, if `FluxListenerMixin` defines `handleChange()` and `WindowSizeMixin` defines `handleChange()`, you can’t use them together. You also can’t define a method with this name on your own component.
+
+It’s not a big deal if you control the mixin code. When you have a conflict, you can rename that method on one of the mixins. However it’s tricky because some components or other mixins may already be calling this method directly, and you need to find and fix those calls as well.
+
+If you have a name conflict with a mixin from a third party package, you can’t just rename a method on it. Instead, you have to use awkward method names on your component to avoid clashes.
+
+The situation is no better for mixin authors. Even adding a new method to a mixin is always a potentially breaking change because a method with the same name might already exist on some of the components using it, either directly or through another mixin. Once written, mixins are hard to remove or change. Bad ideas don’t get refactored away because refactoring is too risky.
+
+### Mixins cause snowballing complexity {/*mixins-cause-snowballing-complexity*/}
+
+Even when mixins start out simple, they tend to become complex over time. The example below is based on a real scenario I’ve seen play out in a codebase.
+
+A component needs some state to track mouse hover. To keep this logic reusable, you might extract `handleMouseEnter()`, `handleMouseLeave()` and `isHovering()` into a `HoverMixin`. Next, somebody needs to implement a tooltip. They don’t want to duplicate the logic in `HoverMixin` so they create a `TooltipMixin` that uses `HoverMixin`. `TooltipMixin` reads `isHovering()` provided by `HoverMixin` in its `componentDidUpdate()` and either shows or hides the tooltip.
+
+A few months later, somebody wants to make the tooltip direction configurable. In an effort to avoid code duplication, they add support for a new optional method called `getTooltipOptions()` to `TooltipMixin`. By this time, components that show popovers also use `HoverMixin`. However popovers need a different hover delay. To solve this, somebody adds support for an optional `getHoverOptions()` method and implements it in `TooltipMixin`. Those mixins are now tightly coupled.
+
+This is fine while there are no new requirements. However this solution doesn’t scale well. What if you want to support displaying multiple tooltips in a single component? You can’t define the same mixin twice in a component. What if the tooltips need to be displayed automatically in a guided tour instead of on hover? Good luck decoupling `TooltipMixin` from `HoverMixin`. What if you need to support the case where the hover area and the tooltip anchor are located in different components? You can’t easily hoist the state used by mixin up into the parent component. Unlike components, mixins don’t lend themselves naturally to such changes.
+
+Every new requirement makes the mixins harder to understand. Components using the same mixin become increasingly coupled with time. Any new capability gets added to all of the components using that mixin. There is no way to split a “simpler” part of the mixin without either duplicating the code or introducing more dependencies and indirection between mixins. Gradually, the encapsulation boundaries erode, and since it’s hard to change or remove the existing mixins, they keep getting more abstract until nobody understands how they work.
+
+These are the same problems we faced building apps before React. We found that they are solved by declarative rendering, top-down data flow, and encapsulated components. At Facebook, we have been migrating our code to use alternative patterns to mixins, and we are generally happy with the results. You can read about those patterns below.
+
+## Migrating from Mixins {/*migrating-from-mixins*/}
+
+Let’s make it clear that mixins are not technically deprecated. If you use `React.createClass()`, you may keep using them. We only say that they didn’t work well for us, and so we won’t recommend using them in the future.
+
+Every section below corresponds to a mixin usage pattern that we found in the Facebook codebase. For each of them, we describe the problem and a solution that we think works better than mixins. The examples are written in ES5 but once you don’t need mixins, you can switch to ES6 classes if you’d like.
+
+We hope that you find this list helpful. Please let us know if we missed important use cases so we can either amend the list or be proven wrong!
+
+### Performance Optimizations {/*performance-optimizations*/}
+
+One of the most commonly used mixins is [`PureRenderMixin`](/docs/pure-render-mixin.html). You might be using it in some components to [prevent unnecessary re-renders](/docs/advanced-performance.html#shouldcomponentupdate-in-action) when the props and state are shallowly equal to the previous props and state:
+
+```javascript
+var PureRenderMixin = require('react-addons-pure-render-mixin');
+
+var Button = React.createClass({
+  mixins: [PureRenderMixin],
+
+  // ...
+});
+```
+
+#### Solution {/*solution*/}
+
+To express the same without mixins, you can use the [`shallowCompare`](/docs/shallow-compare.html) function directly instead:
+
+```js
+var shallowCompare = require('react-addons-shallow-compare');
+
+var Button = React.createClass({
+  shouldComponentUpdate: function (nextProps, nextState) {
+    return shallowCompare(this, nextProps, nextState);
+  },
+
+  // ...
+});
+```
+
+If you use a custom mixin implementing a `shouldComponentUpdate` function with different algorithm, we suggest exporting just that single function from a module and calling it directly from your components.
+
+We understand that more typing can be annoying. For the most common case, we plan to [introduce a new base class](https://github.com/facebook/react/pull/7195) called `React.PureComponent` in the next minor release. It uses the same shallow comparison as `PureRenderMixin` does today.
+
+### Subscriptions and Side Effects {/*subscriptions-and-side-effects*/}
+
+The second most common type of mixins that we encountered are mixins that subscribe a React component to a third-party data source. Whether this data source is a Flux Store, an Rx Observable, or something else, the pattern is very similar: the subscription is created in `componentDidMount`, destroyed in `componentWillUnmount`, and the change handler calls `this.setState()`.
+
+```javascript
+var SubscriptionMixin = {
+  getInitialState: function () {
+    return {
+      comments: DataSource.getComments(),
+    };
+  },
+
+  componentDidMount: function () {
+    DataSource.addChangeListener(this.handleChange);
+  },
+
+  componentWillUnmount: function () {
+    DataSource.removeChangeListener(this.handleChange);
+  },
+
+  handleChange: function () {
+    this.setState({
+      comments: DataSource.getComments(),
+    });
+  },
+};
+
+var CommentList = React.createClass({
+  mixins: [SubscriptionMixin],
+
+  render: function () {
+    // Reading comments from state managed by mixin.
+    var comments = this.state.comments;
+    return (
+      <div>
+        {comments.map(function (comment) {
+          return <Comment comment={comment} key={comment.id} />;
+        })}
+      </div>
+    );
+  },
+});
+
+module.exports = CommentList;
+```
+
+#### Solution {/*solution-1*/}
+
+If there is just one component subscribed to this data source, it is fine to embed the subscription logic right into the component. Avoid premature abstractions.
+
+If several components used this mixin to subscribe to a data source, a nice way to avoid repetition is to use a pattern called [“higher-order components”](https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750). It can sound intimidating so we will take a closer look at how this pattern naturally emerges from the component model.
+
+#### Higher-Order Components Explained {/*higher-order-components-explained*/}
+
+Let’s forget about React for a second. Consider these two functions that add and multiply numbers, logging the results as they do that:
+
+```js
+function addAndLog(x, y) {
+  var result = x + y;
+  console.log('result:', result);
+  return result;
+}
+
+function multiplyAndLog(x, y) {
+  var result = x * y;
+  console.log('result:', result);
+  return result;
+}
+```
+
+These two functions are not very useful but they help us demonstrate a pattern that we can later apply to components.
+
+Let’s say that we want to extract the logging logic out of these functions without changing their signatures. How can we do this? An elegant solution is to write a [higher-order function](https://en.wikipedia.org/wiki/Higher-order_function), that is, a function that takes a function as an argument and returns a function.
+
+Again, it sounds more intimidating than it really is:
+
+```js
+function withLogging(wrappedFunction) {
+  // Return a function with the same API...
+  return function (x, y) {
+    // ... that calls the original function
+    var result = wrappedFunction(x, y);
+    // ... but also logs its result!
+    console.log('result:', result);
+    return result;
+  };
+}
+```
+
+The `withLogging` higher-order function lets us write `add` and `multiply` without the logging statements, and later wrap them to get `addAndLog` and `multiplyAndLog` with exactly the same signatures as before:
+
+```js
+function add(x, y) {
+  return x + y;
+}
+
+function multiply(x, y) {
+  return x * y;
+}
+
+function withLogging(wrappedFunction) {
+  return function (x, y) {
+    var result = wrappedFunction(x, y);
+    console.log('result:', result);
+    return result;
+  };
+}
+
+// Equivalent to writing addAndLog by hand:
+var addAndLog = withLogging(add);
+
+// Equivalent to writing multiplyAndLog by hand:
+var multiplyAndLog = withLogging(multiply);
+```
+
+Higher-order components are a very similar pattern, but applied to components in React. We will apply this transformation from mixins in two steps.
+
+As a first step, we will split our `CommentList` component in two, a child and a parent. The child will be only concerned with rendering the comments. The parent will set up the subscription and pass the up-to-date data to the child via props.
+
+```js
+// This is a child component.
+// It only renders the comments it receives as props.
+var CommentList = React.createClass({
+  render: function () {
+    // Note: now reading from props rather than state.
+    var comments = this.props.comments;
+    return (
+      <div>
+        {comments.map(function (comment) {
+          return <Comment comment={comment} key={comment.id} />;
+        })}
+      </div>
+    );
+  },
+});
+
+// This is a parent component.
+// It subscribes to the data source and renders <CommentList />.
+var CommentListWithSubscription = React.createClass({
+  getInitialState: function () {
+    return {
+      comments: DataSource.getComments(),
+    };
+  },
+
+  componentDidMount: function () {
+    DataSource.addChangeListener(this.handleChange);
+  },
+
+  componentWillUnmount: function () {
+    DataSource.removeChangeListener(this.handleChange);
+  },
+
+  handleChange: function () {
+    this.setState({
+      comments: DataSource.getComments(),
+    });
+  },
+
+  render: function () {
+    // We pass the current state as props to CommentList.
+    return <CommentList comments={this.state.comments} />;
+  },
+});
+
+module.exports = CommentListWithSubscription;
+```
+
+There is just one final step left to do.
+
+Remember how we made `withLogging()` take a function and return another function wrapping it? We can apply a similar pattern to React components.
+
+We will write a new function called `withSubscription(WrappedComponent)`. Its argument could be any React component. We will pass `CommentList` as `WrappedComponent`, but we could also apply `withSubscription()` to any other component in our codebase.
+
+This function would return another component. The returned component would manage the subscription and render `<WrappedComponent />` with the current data.
+
+We call this pattern a “higher-order component”.
+
+The composition happens at React rendering level rather than with a direct function call. This is why it doesn’t matter whether the wrapped component is defined with `createClass()`, as an ES6 class or a function. If `WrappedComponent` is a React component, the component created by `withSubscription()` can render it.
+
+```js
+// This function takes a component...
+function withSubscription(WrappedComponent) {
+  // ...and returns another component...
+  return React.createClass({
+    getInitialState: function () {
+      return {
+        comments: DataSource.getComments(),
+      };
+    },
+
+    componentDidMount: function () {
+      // ... that takes care of the subscription...
+      DataSource.addChangeListener(this.handleChange);
+    },
+
+    componentWillUnmount: function () {
+      DataSource.removeChangeListener(this.handleChange);
+    },
+
+    handleChange: function () {
+      this.setState({
+        comments: DataSource.getComments(),
+      });
+    },
+
+    render: function () {
+      // ... and renders the wrapped component with the fresh data!
+      return <WrappedComponent comments={this.state.comments} />;
+    },
+  });
+}
+```
+
+Now we can declare `CommentListWithSubscription` by applying `withSubscription` to `CommentList`:
+
+```js
+var CommentList = React.createClass({
+  render: function () {
+    var comments = this.props.comments;
+    return (
+      <div>
+        {comments.map(function (comment) {
+          return <Comment comment={comment} key={comment.id} />;
+        })}
+      </div>
+    );
+  },
+});
+
+// withSubscription() returns a new component that
+// is subscribed to the data source and renders
+// <CommentList /> with up-to-date data.
+var CommentListWithSubscription = withSubscription(CommentList);
+
+// The rest of the app is interested in the subscribed component
+// so we export it instead of the original unwrapped CommentList.
+module.exports = CommentListWithSubscription;
+```
+
+#### Solution, Revisited {/*solution-revisited*/}
+
+Now that we understand higher-order components better, let’s take another look at the complete solution that doesn’t involve mixins. There are a few minor changes that are annotated with inline comments:
+
+```js
+function withSubscription(WrappedComponent) {
+  return React.createClass({
+    getInitialState: function () {
+      return {
+        comments: DataSource.getComments(),
+      };
+    },
+
+    componentDidMount: function () {
+      DataSource.addChangeListener(this.handleChange);
+    },
+
+    componentWillUnmount: function () {
+      DataSource.removeChangeListener(this.handleChange);
+    },
+
+    handleChange: function () {
+      this.setState({
+        comments: DataSource.getComments(),
+      });
+    },
+
+    render: function () {
+      // Use JSX spread syntax to pass all props and state down automatically.
+      return <WrappedComponent {...this.props} {...this.state} />;
+    },
+  });
+}
+
+// Optional change: convert CommentList to a function component
+// because it doesn't use lifecycle methods or state.
+function CommentList(props) {
+  var comments = props.comments;
+  return (
+    <div>
+      {comments.map(function (comment) {
+        return <Comment comment={comment} key={comment.id} />;
+      })}
+    </div>
+  );
+}
+
+// Instead of declaring CommentListWithSubscription,
+// we export the wrapped component right away.
+module.exports = withSubscription(CommentList);
+```
+
+Higher-order components are a powerful pattern. You can pass additional arguments to them if you want to further customize their behavior. After all, they are not even a feature of React. They are just functions that receive components and return components that wrap them.
+
+Like any solution, higher-order components have their own pitfalls. For example, if you heavily use [refs](/docs/more-about-refs.html), you might notice that wrapping something into a higher-order component changes the ref to point to the wrapping component. In practice we discourage using refs for component communication so we don’t think it’s a big issue. In the future, we might consider adding [ref forwarding](https://github.com/facebook/react/issues/4213) to React to solve this annoyance.
+
+### Rendering Logic {/*rendering-logic*/}
+
+The next most common use case for mixins that we discovered in our codebase is sharing rendering logic between components.
+
+Here is a typical example of this pattern:
+
+```js
+var RowMixin = {
+  // Called by components from render()
+  renderHeader: function () {
+    return (
+      <div className="row-header">
+        <h1>{this.getHeaderText() /* Defined by components */}</h1>
+      </div>
+    );
+  },
+};
+
+var UserRow = React.createClass({
+  mixins: [RowMixin],
+
+  // Called by RowMixin.renderHeader()
+  getHeaderText: function () {
+    return this.props.user.fullName;
+  },
+
+  render: function () {
+    return (
+      <div>
+        {this.renderHeader() /* Defined by RowMixin */}
+        <h2>{this.props.user.biography}</h2>
+      </div>
+    );
+  },
+});
+```
+
+Multiple components may be sharing `RowMixin` to render the header, and each of them would need to define `getHeaderText()`.
+
+#### Solution {/*solution-2*/}
+
+If you see rendering logic inside a mixin, it’s time to extract a component!
+
+Instead of `RowMixin`, we will define a `<RowHeader>` component. We will also replace the convention of defining a `getHeaderText()` method with the standard mechanism of top-data flow in React: passing props.
+
+Finally, since neither of those components currently need lifecycle methods or state, we can declare them as simple functions:
+
+```js
+function RowHeader(props) {
+  return (
+    <div className="row-header">
+      <h1>{props.text}</h1>
+    </div>
+  );
+}
+
+function UserRow(props) {
+  return (
+    <div>
+      <RowHeader text={props.user.fullName} />
+      <h2>{props.user.biography}</h2>
+    </div>
+  );
+}
+```
+
+Props keep component dependencies explicit, easy to replace, and enforceable with tools like [Flow](https://flowtype.org/) and [TypeScript](https://www.typescriptlang.org/).
+
+> **Note:**
+>
+> Defining components as functions is not required. There is also nothing wrong with using lifecycle methods and state—they are first-class React features. We use function components in this example because they are easier to read and we didn’t need those extra features, but classes would work just as fine.
+
+### Context {/*context*/}
+
+Another group of mixins we discovered were helpers for providing and consuming [React context](/docs/context.html). Context is an experimental unstable feature, has [certain issues](https://github.com/facebook/react/issues/2517), and will likely change its API in the future. We don’t recommend using it unless you’re confident there is no other way of solving your problem.
+
+Nevertheless, if you already use context today, you might have been hiding its usage with mixins like this:
+
+```js
+var RouterMixin = {
+  contextTypes: {
+    router: React.PropTypes.object.isRequired,
+  },
+
+  // The mixin provides a method so that components
+  // don't have to use the context API directly.
+  push: function (path) {
+    this.context.router.push(path);
+  },
+};
+
+var Link = React.createClass({
+  mixins: [RouterMixin],
+
+  handleClick: function (e) {
+    e.stopPropagation();
+
+    // This method is defined in RouterMixin.
+    this.push(this.props.to);
+  },
+
+  render: function () {
+    return <a onClick={this.handleClick}>{this.props.children}</a>;
+  },
+});
+
+module.exports = Link;
+```
+
+#### Solution {/*solution-3*/}
+
+We agree that hiding context usage from consuming components is a good idea until the context API stabilizes. However, we recommend using higher-order components instead of mixins for this.
+
+Let the wrapping component grab something from the context, and pass it down with props to the wrapped component:
+
+```js
+function withRouter(WrappedComponent) {
+  return React.createClass({
+    contextTypes: {
+      router: React.PropTypes.object.isRequired,
+    },
+
+    render: function () {
+      // The wrapper component reads something from the context
+      // and passes it down as a prop to the wrapped component.
+      var router = this.context.router;
+      return <WrappedComponent {...this.props} router={router} />;
+    },
+  });
+}
+
+var Link = React.createClass({
+  handleClick: function (e) {
+    e.stopPropagation();
+
+    // The wrapped component uses props instead of context.
+    this.props.router.push(this.props.to);
+  },
+
+  render: function () {
+    return <a onClick={this.handleClick}>{this.props.children}</a>;
+  },
+});
+
+// Don't forget to wrap the component!
+module.exports = withRouter(Link);
+```
+
+If you’re using a third party library that only provides a mixin, we encourage you to file an issue with them linking to this post so that they can provide a higher-order component instead. In the meantime, you can create a higher-order component around it yourself in exactly the same way.
+
+### Utility Methods {/*utility-methods*/}
+
+Sometimes, mixins are used solely to share utility functions between components:
+
+```js
+var ColorMixin = {
+  getLuminance(color) {
+    var c = parseInt(color, 16);
+    var r = (c & 0xff0000) >> 16;
+    var g = (c & 0x00ff00) >> 8;
+    var b = c & 0x0000ff;
+    return 0.299 * r + 0.587 * g + 0.114 * b;
+  },
+};
+
+var Button = React.createClass({
+  mixins: [ColorMixin],
+
+  render: function () {
+    var theme = this.getLuminance(this.props.color) > 160 ? 'dark' : 'light';
+    return <div className={theme}>{this.props.children}</div>;
+  },
+});
+```
+
+#### Solution {/*solution-4*/}
+
+Put utility functions into regular JavaScript modules and import them. This also makes it easier to test them or use them outside of your components:
+
+```js
+var getLuminance = require('../utils/getLuminance');
+
+var Button = React.createClass({
+  render: function () {
+    var theme = getLuminance(this.props.color) > 160 ? 'dark' : 'light';
+    return <div className={theme}>{this.props.children}</div>;
+  },
+});
+```
+
+### Other Use Cases {/*other-use-cases*/}
+
+Sometimes people use mixins to selectively add logging to lifecycle methods in some components. In the future, we intend to provide an [official DevTools API](https://github.com/facebook/react/issues/5306) that would let you implement something similar without touching the components. However it’s still very much a work in progress. If you heavily depend on logging mixins for debugging, you might want to keep using those mixins for a little longer.
+
+If you can’t accomplish something with a component, a higher-order component, or a utility module, it could mean that React should provide this out of the box. [File an issue](https://github.com/facebook/react/issues/new) to tell us about your use case for mixins, and we’ll help you consider alternatives or perhaps implement your feature request.
+
+Mixins are not deprecated in the traditional sense. You can keep using them with `React.createClass()`, as we won’t be changing it further. Eventually, as ES6 classes gain more adoption and their usability problems in React are solved, we might split `React.createClass()` into a separate package because most people wouldn’t need it. Even in that case, your old mixins would keep working.
+
+We believe that the alternatives above are better for the vast majority of cases, and we invite you to try writing React apps without using mixins.
diff --git a/beta/src/content/blog/2016/07/22/create-apps-with-no-configuration.md b/beta/src/content/blog/2016/07/22/create-apps-with-no-configuration.md
new file mode 100644
index 000000000..a6127855a
--- /dev/null
+++ b/beta/src/content/blog/2016/07/22/create-apps-with-no-configuration.md
@@ -0,0 +1,164 @@
+---
+title: 'Create Apps with No Configuration'
+author: [gaearon]
+---
+
+**[Create React App](https://github.com/facebookincubator/create-react-app)** is a new officially supported way to create single-page React applications. It offers a modern build setup with no configuration.
+
+## Getting Started {/*getting-started*/}
+
+### Installation {/*installation*/}
+
+First, install the global package:
+
+```sh
+npm install -g create-react-app
+```
+
+Node.js 4.x or higher is required.
+
+### Creating an App {/*creating-an-app*/}
+
+Now you can use it to create a new app:
+
+```sh
+create-react-app hello-world
+```
+
+This will take a while as npm installs the transitive dependencies, but once it’s done, you will see a list of commands you can run in the created folder:
+
+![created folder](/images/blog/create-apps-with-no-configuration/created-folder.png)
+
+### Starting the Server {/*starting-the-server*/}
+
+Run `npm start` to launch the development server. The browser will open automatically with the created app’s URL.
+
+![compiled successfully](/images/blog/create-apps-with-no-configuration/compiled-successfully.png)
+
+Create React App uses both webpack and Babel under the hood.
+The console output is tuned to be minimal to help you focus on the problems:
+
+![failed to compile](/images/blog/create-apps-with-no-configuration/failed-to-compile.png)
+
+ESLint is also integrated so lint warnings are displayed right in the console:
+
+![compiled with warnings](/images/blog/create-apps-with-no-configuration/compiled-with-warnings.png)
+
+We only picked a small subset of lint rules that often lead to bugs.
+
+### Building for Production {/*building-for-production*/}
+
+To build an optimized bundle, run `npm run build`:
+
+![npm run build](/images/blog/create-apps-with-no-configuration/npm-run-build.png)
+
+It is minified, correctly envified, and the assets include content hashes for caching.
+
+### One Dependency {/*one-dependency*/}
+
+Your `package.json` contains only a single build dependency and a few scripts:
+
+```js
+{
+  "name": "hello-world",
+  "dependencies": {
+    "react": "^15.2.1",
+    "react-dom": "^15.2.1"
+  },
+  "devDependencies": {
+    "react-scripts": "0.1.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+We take care of updating Babel, ESLint, and webpack to stable compatible versions so you can update a single dependency to get them all.
+
+### Zero Configuration {/*zero-configuration*/}
+
+It is worth repeating: there are no configuration files or complicated folder structures. The tool only generates the files you need to build your app.
+
+```
+hello-world/
+  README.md
+  index.html
+  favicon.ico
+  node_modules/
+  package.json
+  src/
+    App.css
+    App.js
+    index.css
+    index.js
+    logo.svg
+```
+
+All the build settings are preconfigured and can’t be changed. Some features, such as testing, are currently missing. This is an intentional limitation, and we recognize it might not work for everybody. And this brings us to the last point.
+
+### No Lock-In {/*no-lock-in*/}
+
+We first saw this feature in [Enclave](https://github.com/eanplatter/enclave), and we loved it. We talked to [Ean](https://twitter.com/EanPlatter), and he was excited to collaborate with us. He already sent a few pull requests!
+
+“Ejecting” lets you leave the comfort of Create React App setup at any time. You run a single command, and all the build dependencies, configs, and scripts are moved right into your project. At this point you can customize everything you want, but effectively you are forking our configuration and going your own way. If you’re experienced with build tooling and prefer to fine-tune everything to your taste, this lets you use Create React App as a boilerplate generator.
+
+We expect that at early stages, many people will “eject” for one reason or another, but as we learn from them, we will make the default setup more and more compelling while still providing no configuration.
+
+## Try It Out! {/*try-it-out*/}
+
+You can find [**Create React App**](https://github.com/facebookincubator/create-react-app) with additional instructions on GitHub.
+
+This is an experiment, and only time will tell if it becomes a popular way of creating and building React apps, or fades into obscurity.
+
+We welcome you to participate in this experiment. Help us build the React tooling that more people can use. We are always [open to feedback](https://github.com/facebookincubator/create-react-app/issues/11).
+
+## The Backstory {/*the-backstory*/}
+
+React was one of the first libraries to embrace transpiling JavaScript. As a result, even though you can [learn React without any tooling](https://github.com/facebook/react/blob/3fd582643ef3d222a00a0c756292c15b88f9f83c/examples/basic-jsx/index.html), the React ecosystem has commonly become associated with an overwhelming explosion of tools.
+
+Eric Clemmons called this phenomenon the “[JavaScript Fatigue](https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4)”:
+
+> Ultimately, the problem is that by choosing React (and inherently JSX), you’ve unwittingly opted into a confusing nest of build tools, boilerplate, linters, & time-sinks to deal with before you ever get to create anything.
+
+It is tempting to write code in ES2015 and JSX. It is sensible to use a bundler to keep the codebase modular, and a linter to catch the common mistakes. It is nice to have a development server with fast rebuilds, and a command to produce optimized bundles for production.
+
+Combining these tools requires some experience with each of them. Even so, it is far too easy to get dragged into fighting small incompatibilities, unsatisfied peerDependencies, and illegible configuration files.
+
+Many of those tools are plugin platforms and don’t directly acknowledge each other’s existence. They leave it up to the users to wire them together. The tools mature and change independently, and tutorials quickly get out of date.
+
+<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Marc was almost ready to implement his &quot;hello world&quot; React app <a href="https://t.co/ptdg4yteF1">pic.twitter.com/ptdg4yteF1</a></p>&mdash; Thomas Fuchs (@thomasfuchs) <a href="https://twitter.com/thomasfuchs/status/708675139253174273">March 12, 2016</a></blockquote>
+
+This doesn’t mean those tools aren’t great. To many of us, they have become indispensable, and we very much appreciate the effort of their maintainers. They already have too much on their plates to worry about the state of the React ecosystem.
+
+Still, we knew it was frustrating to spend days setting up a project when all you wanted was to learn React. We wanted to fix this.
+
+## Could We Fix This? {/*could-we-fix-this*/}
+
+We found ourselves in an unusual dilemma.
+
+So far, [our strategy](/docs/design-principles.html#dogfooding) has been to only release the code that we are using at Facebook. This helped us ensure that every project is battle-tested and has clearly defined scope and priorities.
+
+However, tooling at Facebook is different than at many smaller companies. Linting, transpilation, and packaging are all handled by powerful remote development servers, and product engineers don’t need to configure them. While we wish we could give a dedicated server to every user of React, even Facebook cannot scale that well!
+
+The React community is very important to us. We knew that we couldn’t fix the problem within the limits of our open source philosophy. This is why we decided to make an exception, and to ship something that we didn’t use ourselves, but that we thought would be useful to the community.
+
+## The Quest for a React <abbr title="Command Line Interface">CLI</abbr> {/*the-quest-for-a-react-abbr-titlecommand-line-interfacecliabbr*/}
+
+Having just attended [EmberCamp](http://embercamp.com/) a week ago, I was excited about [Ember CLI](https://ember-cli.com/). Ember users have a great “getting started” experience thanks to a curated set of tools united under a single command-line interface. I have heard similar feedback about [Elm Reactor](https://github.com/elm-lang/elm-reactor).
+
+Providing a cohesive curated experience is valuable by itself, even if the user could in theory assemble those parts themselves. Kathy Sierra [explains it best](http://seriouspony.com/blog/2013/7/24/your-app-makes-me-fat):
+
+> If your UX asks the user to make _choices_, for example, even if those choices are both clear and useful, the act of _deciding_ is a cognitive drain. And not just _while_ they’re deciding... even _after_ we choose, an unconscious cognitive background thread is slowly consuming/leaking resources, “Was _that_ the right choice?”
+
+I never tried to write a command-line tool for React apps, and neither has [Christopher](https://twitter.com/vjeux). We were chatting on Messenger about this idea, and we decided to work together on it for a week as a hackathon project.
+
+We knew that such projects traditionally haven’t been very successful in the React ecosystem. Christopher told me that multiple “React CLI” projects have started and failed at Facebook. The community tools with similar goals also exist, but so far they have not yet gained enough traction.
+
+Still, we decided it was worth another shot. Christopher and I created a very rough proof of concept on the weekend, and [Kevin](https://twitter.com/lacker) soon joined us.
+
+We invited some of the community members to collaborate with us, and we have spent this week working on this tool. We hope that you’ll enjoy using it! [Let us know what you think.](https://github.com/facebookincubator/create-react-app/issues/11)
+
+We would like to express our gratitude to [Max Stoiber](https://twitter.com/mxstbr), [Jonny Buchanan](https://twitter.com/jbscript), [Ean Platter](https://twitter.com/eanplatter), [Tyler McGinnis](https://github.com/tylermcginnis), [Kent C. Dodds](https://github.com/kentcdodds), and [Eric Clemmons](https://twitter.com/ericclemmons) for their early feedback, ideas, and contributions.
diff --git a/beta/src/content/blog/2016/08/05/relay-state-of-the-state.md b/beta/src/content/blog/2016/08/05/relay-state-of-the-state.md
new file mode 100644
index 000000000..2f2b1c6e0
--- /dev/null
+++ b/beta/src/content/blog/2016/08/05/relay-state-of-the-state.md
@@ -0,0 +1,81 @@
+---
+title: 'Relay: State of the State'
+author: [josephsavona]
+---
+
+This month marks a year since we released Relay and we'd like to share an update on the project and what's next.
+
+## A Year In Review {/*a-year-in-review*/}
+
+A year after launch, we're incredibly excited to see an active community forming around Relay and that companies such as Twitter are [using Relay in production](https://fabric.io/blog/building-fabric-mission-control-with-graphql-and-relay):
+
+> For a project like mission control, GraphQL and Relay were a near-perfect solution, and the cost of building it any other way justified the investment.
+>
+> -- <cite>Fin Hopkins</cite>
+
+This kind of positive feedback is really encouraging (I'll admit to re-reading that post far too many times), and great motivation for us to keep going and make Relay even better.
+
+With the community's help we've already come a long way since the technical preview. Here are some highlights:
+
+- In March we added support for server-side rendering and for creating multiple instances of Relay on a single page. This was a coordinated effort over the course of several months by community members [Denis Nedelyaev](https://github.com/denvned) and [Gerald Monaco](https://github.com/devknoll) (now at Facebook).
+- Also in March we added support for React Native. While we use Relay and React Native together internally, they didn't quite work together in open-source out of the box. We owe a big thanks to [Adam Miskiewicz](https://github.com/skevy), [Tom Burns](https://github.com/boourns), [Gaëtan Renaudeau](https://github.com/gre), [David Aurelio](https://github.com/davidaurelio), [Martín Bigio](https://github.com/martinbigio), [Paul O’Shannessy](https://github.com/zpao), [Sophie Alpert](https://github.com/sophiebits), and many others who helped track down and resolve issues. Finally, thanks to [Steven Luscher](https://github.com/steveluscher) for coordinating this effort and building the first Relay/ReactNative example app.
+
+We've also seen some great open-source projects spring up around Relay:
+
+- [Denis Nedelyaev](https://github.com/denvned) created [isomorphic-relay](https://github.com/denvned/isomorphic-relay/), a package that helps developers build server-rendered Relay apps where data is prepared on the server and then used to bootstrap the app on the client.
+- [Jimmy Jia](https://github.com/taion) created [react-router-relay](https://github.com/relay-tools/react-router-relay) to integrate Relay data-fetching into React Router.
+- [Pavel Chertorogov](https://github.com/nodkz) released [relay-network-layer](https://github.com/nodkz/react-relay-network-layer), which adds features such as batching query requests, middleware, authentication, logging, and more.
+
+This is just a small sampling of the community's contributions. So far we've merged over 300 PRs - about 25% of our commits - from over 80 of you. These PRs have improved everything from the website and docs down the very core of the framework. We're humbled by these outstanding contributions and excited to keep working with each of you!
+
+# Retrospective & Roadmap {/*retrospective--roadmap*/}
+
+Earlier this year we paused to reflect on the state of the project. What was working well? What could be improved? What features should we add, and what could we remove? A few themes emerged: performance on mobile, developer experience, and empowering the community.
+
+## Mobile Perf {/*mobile-perf*/}
+
+First, Relay was built to serve the needs of product developers at Facebook. In 2016, that means helping developers to build apps that work well on [mobile devices connecting on slower networks](https://newsroom.fb.com/news/2015/10/news-feed-fyi-building-for-all-connectivity/). For example, people in developing markets commonly use [2011 year-class phones](https://code.facebook.com/posts/307478339448736/year-class-a-classification-system-for-android/) and connect via [2G class networks](https://code.facebook.com/posts/952628711437136/classes-performance-and-network-segmentation-on-android/). These scenarios present their own challenges.
+
+Therefore, one of our primary goals this year is to optimize Relay for performance on low-end mobile devices _first_, knowing that this can translate to improved performance on high-end devices as well. In addition to standard approaches such as benchmarking, profiling, and optimizations, we're also working on big-picture changes.
+
+For example, in today's Relay, here's what happens when an app is opened. First, React Native starts initializing the JavaScript context (loading and parsing your code and then running it). When this finishes, the app executes and Relay sees that you need data. It constructs and prints the query, uploads the query text to the server, processes the response, and renders your app. (Note that this process applies on the web, except that the code has to be _downloaded_ instead of loaded from the device.)
+
+Ideally, though, we could begin fetching data as soon as the native code had loaded - in parallel with the JS context initialization. By the time your JS code was ready to run, the data-fetching would already be under way. To do this we would need a way to determine _statically_ - at build time - what query an application would send.
+
+The key is that GraphQL is already static - we just need to fully embrace this fact. More on this later.
+
+## Developer Experience {/*developer-experience*/}
+
+Next, we've paid attention to the community's feedback and know that, to put it simply, Relay could be "easier" to use (and "simpler" too). This isn't entirely surprising to us - Relay was originally designed as a routing library and gradually morphed into a data-fetching library. Concepts like Relay "routes", for example, no longer serve as critical a role and are just one more concept that developers have to learn about. Another example is mutations: while writes _are_ inherently more complex than reads, our API doesn't make the simple things simple enough.
+
+Alongside our focus on mobile performance, we've also kept the developer experience in mind as we evolve Relay core.
+
+## Empowering the Community {/*empowering-the-community*/}
+
+Finally, we want to make it easier for people in the community to develop useful libraries that work with Relay. By comparison, React's small surface area - components - allows developers to build cool things like routing, higher-order components, or reusable text editors. For Relay, this would mean having the framework provide core primitives that users can build upon. We want it to be possible for the community to integrate Relay with view libraries other than React, or to build real-time subscriptions as a complementary library.
+
+# What's Next {/*whats-next*/}
+
+These were big goals, and also a bit scary; we knew that incremental improvements would only allow us to move so fast. So in April we started a project to build a new implementation of Relay core targeting low-end mobile devices from the start.
+
+As you can guess since we're writing this, the experiment was a success. The result is a new core that retains the best parts of Relay today - colocated components & data-dependencies, automatic data/view consistency, declarative data-fetching - while improving performance on mobile devices and addressing several common areas of confusion.
+
+We're currently focused on shipping the first applications using the new core: ironing out bugs, refining the API changes and developer experience, and adding any missing features. We're excited to bring these changes to open source, and will do so once we've proven them in production. We'll go into more detail in some upcoming talks - links below - but for now here's an overview:
+
+- **Static Queries**: By adding a couple of Relay-specific directives, we've been able to retain the expressivity of current Relay queries using static syntax (concretely: you know what query an app will execute just by looking at the source text, without having to run that code). For starters this will allow Relay apps to start fetching data in parallel with JavaScript initialization. But it also unlocks other possibilities: knowing the query ahead of time means that we can generate optimized code for handling query responses, for example, or for reading query data from an offline cache.
+- **Expressive Mutations**: We'll continue to support a higher-level mutation API for common cases, but will also provide a lower-level API that allows "raw" data access where necessary. If you need to order a list of cached elements, for example, there will be a way to `sort()` it.
+- **Route-less Relay**: Routes will be gone in open source. Instead of a route with multiple query definitions, you'll just provide a single query with as many root fields as you want.
+- **Cache Eviction/Garbage Collection**: The API and architecture is designed from the start to allow removing cached data that is no longer referenced by a mounted view.
+
+Stepping back, we recognize that any API changes will require an investment on your part. To make the transition easier, though, _we will continue to support the current API for the foreseeable future_ (we're still using it too). And as much as possible we will open-source the tools that we use to migrate our own code. Ideas that we're exploring include codemods, an interoperability layer for the old/new APIs, and tutorials & guides to ease migration.
+
+Ultimately, we're making these changes because we believe they make Relay better all around: simpler for developers building apps and faster for the people using them.
+
+# Conclusion {/*conclusion*/}
+
+If you made it this far, congrats and thanks for reading! We'll be sharing more information about these changes in some upcoming talks:
+
+- [Greg Hurrell](https://github.com/wincent) will presenting a Relay "Deep Dive" at the [Silicon Valley ReactJS Meetup](http://www.meetup.com/Silicon-Valley-ReactJS-Meetup/events/232236845/) on August 17th.
+- I ([@josephsavona](https://github.com/josephsavona)) will be speaking about Relay at [React Rally](http://www.reactrally.com) on August 25th.
+
+We can't wait to share the new code with you and are working as fast as we can to do so!
diff --git a/beta/src/content/blog/2016/09/28/our-first-50000-stars.md b/beta/src/content/blog/2016/09/28/our-first-50000-stars.md
new file mode 100644
index 000000000..ada12dd57
--- /dev/null
+++ b/beta/src/content/blog/2016/09/28/our-first-50000-stars.md
@@ -0,0 +1,225 @@
+---
+title: 'Our First 50,000 Stars'
+author: [vjeux]
+---
+
+Just three and a half years ago we open sourced a little JavaScript library called React. The journey since that day has been incredibly exciting.
+
+## Commemorative T-Shirt {/*commemorative-t-shirt*/}
+
+In order to celebrate 50,000 GitHub stars, [Maggie Appleton](http://www.maggieappleton.com/) from [egghead.io](http://egghead.io/) has designed us a special T-shirt, which will be available for purchase from Teespring **only for a week** through Thursday, October 6. Maggie also wrote [a blog post](https://www.behance.net/gallery/43269677/Reacts-50000-Stars-Shirt) showing all the different concepts she came up with before settling on the final design.
+
+<a target="_blank" href="https://teespring.com/react-50000-stars"><img src="/images/blog/react-50k-tshirt.jpg" width="650" height="340" alt="React 50k Tshirt" /></a>
+
+The T-shirts are super soft using American Apparel's tri-blend fabric; we also have kids and toddler T-shirts and baby onesies available.
+
+- [Adult T-shirts (straight-cut and fitted)](https://teespring.com/react-50000-stars)
+- [Kids T-shirts](https://teespring.com/react-50000-stars-kids)
+- [Toddler T-Shirts](https://teespring.com/react-50000-stars-toddler)
+- [Baby Onesies](https://teespring.com/react-50000-stars-baby)
+
+Proceeds from the shirts will be donated to [CODE2040](http://www.code2040.org/), a nonprofit that creates access, awareness, and opportunities in technology for underrepresented minorities with a specific focus on Black and Latinx talent.
+
+## Archeology {/*archeology*/}
+
+We've spent a lot of time trying to explain the concepts behind React and the problems it attempts to solve, but we haven't talked much about how React evolved before being open sourced. This milestone seemed like as good a time as any to dig through the earliest commits and share some of the more important moments and fun facts.
+
+The story begins in our ads org, where we were building incredibly sophisticated client side web apps using an internal MVC framework called [BoltJS](http://web.archive.org/web/20130608154901/http://shaneosullivan.github.io/boltjs/intro.html). Here's a sample of what some Bolt code looked like:
+
+```js
+var CarView = require('javelin/core').createClass({
+  name: 'CarView',
+  extend: require('container').Container,
+  properties: {
+    wheels: 4,
+  },
+  declare: function () {
+    return {
+      childViews: [
+        {content: 'I have '},
+        {ref: 'wheelView'},
+        {content: ' wheels'},
+      ],
+    };
+  },
+  setWheels: function (wheels) {
+    this.findRef('wheelView').setContent(wheels);
+  },
+  getWheels: function () {
+    return this.findRef('wheelView').getContent();
+  },
+});
+
+var car = new CarView();
+car.setWheels(3);
+car.placeIn(document.body);
+//<div>
+//  <div>I have </div>
+//  <div>3</div>
+//  <div> wheels</div>
+//</div>
+```
+
+Bolt introduced a number of APIs and features that would eventually make their way into React including `render`, `createClass`, and `refs`. Bolt introduced the concept of `refs` as a way to create references to nodes that can be used imperatively. This was relevant for legacy interoperability and incremental adoption, and while React would eventually strive to be a lot more functional, `refs` proved to be a very useful way to break out of the functional paradigm when the need arose.
+
+But as our applications grew more and more sophisticated, our Bolt codebases got pretty complicated. Recognizing some of the framework's shortcomings, [Jordan Walke](https://twitter.com/jordwalke) started experimenting with a side-project called [FaxJS](https://github.com/jordwalke/FaxJs). His goal was to solve many of the same problems as Bolt, but in a very different way. This is actually where most of React's fundamentals were born, including props, state, re-evaluating large portions of the tree to “diff” the UI, server-side rendering, and a basic concept of components.
+
+```js
+TestProject.PersonDisplayer = {
+  structure: function () {
+    return Div({
+      classSet: {personDisplayerContainer: true},
+      titleDiv: Div({
+        classSet: {personNameTitle: true},
+        content: this.props.name,
+      }),
+      nestedAgeDiv: Div({
+        content: 'Interests: ' + this.props.interests,
+      }),
+    });
+  },
+};
+```
+
+## FBolt is Born {/*fbolt-is-born*/}
+
+Through his FaxJS experiment, Jordan became convinced that functional APIs — which discouraged mutation — offered a better, more scalable way to build user interfaces. He imported his library into Facebook's codebase in March of 2012 and renamed it “FBolt”, signifying an extension of Bolt where components are written in a functional programming style. Or maybe “FBolt” was a nod to FaxJS – he didn't tell us! ;)
+
+The interoperability between FBolt and Bolt allowed us to experiment with replacing just one component at a time with more functional component APIs. We could test the waters of this new functional paradigm, without having to go all in. We started with the components that were clearly best expressed functionally and then we would later continue to push the boundaries of what we could express as functions.
+
+Realizing that FBolt wouldn't be a great name for the library when used on its own, Jordan Walke and [Tom Occhino](https://twitter.com/tomocchino) decided on a new name: “React.” After Tom sent out the diff to rename everything to React, Jordan commented:
+
+> Jordan Walke:
+> I might add for the sake of discussion, that many systems advertise some kind of reactivity, but they usually require that you set up some kind of point-to-point listeners and won't work on structured data. This API reacts to any state or property changes, and works with data of any form (as deeply structured as the graph itself) so I think the name is fitting.
+
+Most of Tom's other commits at the time were on the first version of [GraphiQL](https://github.com/graphql/graphiql), a project which was recently open sourced.
+
+## Adding JSX {/*adding-jsx*/}
+
+Since about 2010 Facebook has been using an extension of PHP called [XHP](https://www.facebook.com/notes/facebook-engineering/xhp-a-new-way-to-write-php/294003943919/), which enables engineers to create UIs using XML literals right inside their PHP code. It was first introduced to help prevent XSS holes but ended up being an excellent way to structure applications with custom components.
+
+```js
+final class :a:post extends :x:element {
+  attribute :a;
+  protected function render(): XHPRoot {
+    $anchor = <a>{$this->getChildren()}</a>;
+    $form = (
+      <form
+        method="post"
+        action={$this->:href}
+        target={$this->:target}
+        class="postLink"
+      >{$anchor}</form>
+    );
+    $this->transferAllAttributes($anchor);
+    return $form;
+  }
+}
+```
+
+Before Jordan's work had even made its way into the Facebook codebase, Adam Hupp implemented an XHP-like concept for JavaScript, written in Haskell. This system enabled you to write the following inside a JavaScript file:
+
+```js
+function :example:hello(attrib, children) {
+  return (
+    <div class="special">
+      <h1>Hello, World!</h1>
+      {children}
+    </div>
+  );
+}
+```
+
+It would compile the above into the following normal ES3-compatible JavaScript:
+
+```js
+function jsx_example_hello(attrib, children) {
+  return (
+    S.create("div", {"class": "special"}, [
+      S.create("h1", {}, ["Hello, World!"]),
+      children
+    ]
+  );
+}
+```
+
+In this prototype, `S.create` would immediately create and return a DOM node. Most of the conversations on this prototype revolved around the performance characteristics of `innerHTML` versus creating DOM nodes directly. At the time, it would have been less than ideal to push developers universally in the direction of creating DOM nodes directly since it did not perform as well, especially in Firefox and IE. Facebook's then-CTO [Bret Taylor](https://twitter.com/btaylor) chimed in on the discussion at the time in favor of `innerHTML` over `document.createElement`:
+
+> Bret Taylor:
+> If you are not convinced about innerHTML, here is a small microbenchmark. It is about the same in Chrome. innerHTML is about 30% faster in the latest version of Firefox (much more in previous versions), and about 90% faster in IE8.
+
+This work was eventually abandoned but was revived after React made its way into the codebase. Jordan sidelined the previous performance discussions by introducing the concept of a “Virtual DOM,” though its eventual name didn't exist yet.
+
+> Jordan Walke:
+> For the first step, I propose that we do the easiest, yet most general transformation possible. My suggestion is to simply map xml expressions to function call expressions.
+>
+> - `<x></x>` becomes `x( )`
+> - `<x height=12></x>` becomes `x( {height:12} )`
+> - `<x> <y> </y> </x>` becomes `x({ childList: [y( )] })`
+>
+> At this point, JSX doesn't need to know about React - it's just a convenient way to write function calls. Coincidentally, React's primary abstraction is the function. Okay maybe it's not so coincidental ;)
+
+Adam made a very insightful comment, which is now the default way we write lists in React with JSX.
+
+> Adam Hupp:
+> I think we should just treat arrays of elements as a frag. This is useful for constructs like:
+>
+> ```js
+> <ul>
+>   {foo.map(function (i) {
+>     return <li>{i.data}</li>;
+>   })}
+> </ul>
+> ```
+>
+> In this case the ul(..) will get a childList with a single child, which is itself a list.
+
+React didn't end up using Adam's implementation directly. Instead, we created JSX by forking [js-xml-literal](https://github.com/laverdet/js-xml-literal), a side project by XHP creator Marcel Laverdet. JSX took its name from js-xml-literal, which Jordan modified to just be syntactic sugar for deeply nested function calls.
+
+## API Churn {/*api-churn*/}
+
+During the first year of React, internal adoption was growing quickly but there was quite a lot of churn in the component APIs and naming conventions:
+
+- `project` was renamed to `declare` then to `structure` and finally to `render`.
+- `Componentize` was renamed to `createComponent` and finally to `createClass`.
+
+As the project was about to be open sourced, [Lee Byron](https://twitter.com/leeb) sat down with Jordan Walke, Tom Occhino and Sebastian Markbåge in order to refactor, reimplement, and rename one of React's most beloved features – the lifecycle API. Lee [came up with a well-designed API](https://gist.github.com/vjeux/f2b015d230cc1ab18ed1df30550495ed) that is still in place today.
+
+- Concepts
+  - component - a ReactComponent instance
+  - state - internal state to a component
+  - props - external state to a component
+  - markup - the stringy HTML-ish stuff components generate
+  - DOM - the document and elements within the document
+- Actions
+  - mount - to put a component into a DOM
+  - initialize - to prepare a component for rendering
+  - update - a transition of state (and props) resulting a render.
+  - render - a side-effect-free process to get the representation (markup) of a component.
+  - validate - make assertions about something created and provided
+  - destroy - opposite of initialize
+- Operands
+  - create - make a new thing
+  - get - get an existing thing
+  - set - merge into existing
+  - replace - replace existing
+  - receive - respond to new data
+  - force - skip checks to do action
+- Notifications
+  - shouldObjectAction
+  - objectWillAction
+  - objectDidAction
+
+## Instagram {/*instagram*/}
+
+In 2012, Instagram got acquired by Facebook. [Pete Hunt](https://twitter.com/floydophone), who was working on Facebook photos and videos at the time, joined their newly formed web team. He wanted to build their website completely in React, which was in stark contrast with the incremental adoption model that had been used at Facebook.
+
+To make this happen, React had to be decoupled from Facebook's infrastructure, since Instagram didn't use any of it. This project acted as a forcing function to do the work needed to open source React. In the process, Pete also discovered and promoted a little project called webpack. He also implemented the `renderToString` primitive which was needed to do server-side rendering.
+
+As we started to prepare for the open source launch, [Maykel Loomans](https://twitter.com/miekd), a designer on Instagram, made a mock of what the website could look like. The header ended up defining the visual identity of React: its logo and the electric blue color!
+
+<center><a target="_blank" href="/images/blog/react-50k-mock-full.jpg"><img src="/images/blog/react-50k-mock.jpg" width="400" height="410" alt="React website mock" /></a></center>
+
+In its earliest days, React benefited tremendously from feedback, ideas, and technical contributions of early adopters and collaborators all over the company. While it might look like an overnight success in hindsight, the story of React is actually a great example of how new ideas often need to go through several rounds of refinement, iteration, and course correction over a long period of time before reaching their full potential.
+
+React's approach to building user interfaces with functional programming principles has changed the way we do things in just a few short years. It goes without saying, but React would be nothing without the amazing open source community that's built up around it!
diff --git a/beta/src/content/blog/2016/11/16/react-v15.4.0.md b/beta/src/content/blog/2016/11/16/react-v15.4.0.md
new file mode 100644
index 000000000..5d8ec44d1
--- /dev/null
+++ b/beta/src/content/blog/2016/11/16/react-v15.4.0.md
@@ -0,0 +1,174 @@
+---
+title: "React v15.4.0"
+author: [gaearon]
+---
+
+Today we are releasing React 15.4.0.
+
+We didn't announce the [previous](https://github.com/facebook/react/blob/master/CHANGELOG.md#1510-may-20-2016) [minor](https://github.com/facebook/react/blob/master/CHANGELOG.md#1520-july-1-2016) [releases](https://github.com/facebook/react/blob/master/CHANGELOG.md#1530-july-29-2016) on the blog because most of the changes were bug fixes. However, 15.4.0 is a special release, and we would like to highlight a few notable changes in it.
+
+### Separating React and React DOM {/*separating-react-and-react-dom*/}
+
+[More than a year ago](/blog/2015/09/10/react-v0.14-rc1.html#two-packages-react-and-react-dom), we started separating React and React DOM into separate packages. We deprecated `React.render()` in favor of `ReactDOM.render()` in React 0.14, and removed DOM-specific APIs from `React` completely in React 15. However, the React DOM implementation still [secretly lived inside the React package](https://www.reddit.com/r/javascript/comments/3m6wyu/found_this_line_in_the_react_codebase_made_me/cvcyo4a/).
+
+In React 15.4.0, we are finally moving React DOM implementation to the React DOM package. The React package will now contain only the renderer-agnostic code such as `React.Component` and `React.createElement()`.
+
+This solves a few long-standing issues, such as [errors](https://github.com/facebook/react/issues/7386) when you import React DOM in the same file as the [snapshot testing](https://facebook.github.io/jest/blog/2016/07/27/jest-14.html) renderer.
+
+**If you only use the official and documented React APIs you won't need to change anything in your application.**
+
+However, there is a possibility that you imported private APIs from `react/lib/*`, or that a package you rely on might use them. We would like to remind you that this was never supported, and that your apps should not rely on internal APIs. The React internals will keep changing as we work to make React better.
+
+Another thing to watch out for is that React DOM Server is now about the same size as React DOM since it contains its own copy of the React reconciler. We don't recommend using React DOM Server on the client in most cases.
+
+### Profiling Components with Chrome Timeline {/*profiling-components-with-chrome-timeline*/}
+
+You can now visualize React components in the Chrome Timeline. This lets you see which components exactly get mounted, updated, and unmounted, how much time they take relative to each other.
+
+<img src="../images/blog/react-perf-chrome-timeline.png" width="651" height="228" alt="React components in Chrome timeline" />
+
+To use it:
+
+1. Load your app with `?react_perf` in the query string (for example, `http://localhost:3000/?react_perf`).
+
+2. Open the Chrome DevTools **Timeline** tab and press **Record**.
+
+3. Perform the actions you want to profile. Don't record more than 20 seconds or Chrome might hang.
+
+4. Stop recording.
+
+5. React events will be grouped under the **User Timing** label.
+
+Note that the numbers are relative so components will render faster in production. Still, this should help you realize when unrelated UI gets updated by mistake, and how deep and how often your UI updates occur.
+
+Currently Chrome, Edge, and IE are the only browsers supporting this feature, but we use the standard [User Timing API](https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API) so we expect more browsers to add support for it.
+
+### Mocking Refs for Snapshot Testing {/*mocking-refs-for-snapshot-testing*/}
+
+If you're using Jest [snapshot testing](https://facebook.github.io/jest/blog/2016/07/27/jest-14.html), you might have had [issues](https://github.com/facebook/react/issues/7371) with components that rely on refs. With React 15.4.0, we introduce a way to provide mock refs to the test renderer. For example, consider this component using a ref in `componentDidMount`:
+
+```js {5,11}
+import React from 'react';
+
+export default class MyInput extends React.Component {
+  componentDidMount() {
+    this.input.focus();
+  }
+
+  render() {
+    return (
+      <input
+        ref={node => this.input = node}
+      />
+    );
+  }
+}
+```
+
+With snapshot renderer, `this.input` will be `null` because there is no DOM. React 15.4.0 lets us avoid such crashes by passing a custom `createNodeMock` function to the snapshot renderer in an `options` argument:
+
+```js {5-12,16}
+import React from 'react';
+import MyInput from './MyInput';
+import renderer from 'react-test-renderer';
+
+function createNodeMock(element) {
+  if (element.type === 'input') {
+    return {
+      focus() {},
+    };
+  }
+  return null;
+}
+
+it('renders correctly', () => {
+  const options = {createNodeMock};
+  const tree = renderer.create(<MyInput />, options);
+  expect(tree).toMatchSnapshot();
+});
+```
+
+We would like to thank [Brandon Dail](https://github.com/Aweary) for implementing this feature.
+
+You can learn more about snapshot testing in [this Jest blog post](https://facebook.github.io/jest/blog/2016/07/27/jest-14.html).
+
+---
+
+## Installation {/*installation*/}
+
+We recommend using [Yarn](https://yarnpkg.com/) or [npm](https://www.npmjs.com/) for managing front-end dependencies. If you're new to package managers, the [Yarn documentation](https://yarnpkg.com/en/docs/getting-started) is a good place to get started.
+
+To install React with Yarn, run:
+
+```bash
+yarn add react@15.4.0 react-dom@15.4.0
+```
+
+To install React with npm, run:
+
+```bash
+npm install --save react@15.4.0 react-dom@15.4.0
+```
+
+We recommend using a bundler like [webpack](https://webpack.js.org/) or [Browserify](http://browserify.org/) so you can write modular code and bundle it together into small packages to optimize load time.
+
+Remember that by default, React runs extra checks and provides helpful warnings in development mode. When deploying your app, make sure to [compile it in production mode](/docs/installation.html#development-and-production-versions).
+
+In case you don't use a bundler, we also provide pre-built bundles in the npm packages which you can [include as script tags](/docs/installation.html#using-a-cdn) on your page:
+
+* **React**  
+  Dev build with warnings: [react/dist/react.js](https://unpkg.com/react@15.4.0/dist/react.js)  
+  Minified build for production: [react/dist/react.min.js](https://unpkg.com/react@15.4.0/dist/react.min.js)  
+* **React with Add-Ons**  
+  Dev build with warnings: [react/dist/react-with-addons.js](https://unpkg.com/react@15.4.0/dist/react-with-addons.js)  
+  Minified build for production: [react/dist/react-with-addons.min.js](https://unpkg.com/react@15.4.0/dist/react-with-addons.min.js)  
+* **React DOM** (include React in the page before React DOM)  
+  Dev build with warnings: [react-dom/dist/react-dom.js](https://unpkg.com/react-dom@15.4.0/dist/react-dom.js)  
+  Minified build for production: [react-dom/dist/react-dom.min.js](https://unpkg.com/react-dom@15.4.0/dist/react-dom.min.js)  
+* **React DOM Server** (include React in the page before React DOM Server)  
+  Dev build with warnings: [react-dom/dist/react-dom-server.js](https://unpkg.com/react-dom@15.4.0/dist/react-dom-server.js)  
+  Minified build for production: [react-dom/dist/react-dom-server.min.js](https://unpkg.com/react-dom@15.4.0/dist/react-dom-server.min.js)
+
+We've also published version `15.4.0` of the `react`, `react-dom`, and addons packages on npm and the `react` package on bower.
+
+- - -
+
+## Changelog {/*changelog*/}
+
+### React {/*react*/}
+* React package and browser build no longer "secretly" includes React DOM.  
+  <small>([@sebmarkbage](https://github.com/sebmarkbage) in [#7164](https://github.com/facebook/react/pull/7164) and [#7168](https://github.com/facebook/react/pull/7168))</small>
+* Required PropTypes now fail with specific messages for null and undefined.  
+  <small>([@chenglou](https://github.com/chenglou) in [#7291](https://github.com/facebook/react/pull/7291))</small>
+* Improved development performance by freezing children instead of copying.  
+  <small>([@keyanzhang](https://github.com/keyanzhang) in [#7455](https://github.com/facebook/react/pull/7455))</small>
+
+### React DOM {/*react-dom*/}
+* Fixed occasional test failures when React DOM is used together with shallow renderer.  
+  <small>([@goatslacker](https://github.com/goatslacker) in [#8097](https://github.com/facebook/react/pull/8097))</small>
+* Added a warning for invalid `aria-` attributes.  
+  <small>([@jessebeach](https://github.com/jessebeach) in [#7744](https://github.com/facebook/react/pull/7744))</small>
+* Added a warning for using `autofocus` rather than `autoFocus`.  
+  <small>([@hkal](https://github.com/hkal) in [#7694](https://github.com/facebook/react/pull/7694))</small>
+* Removed an unnecessary warning about polyfilling `String.prototype.split`.  
+  <small>([@nhunzaker](https://github.com/nhunzaker) in [#7629](https://github.com/facebook/react/pull/7629))</small>
+* Clarified the warning about not calling PropTypes manually.  
+  <small>([@jedwards1211](https://github.com/jedwards1211) in [#7777](https://github.com/facebook/react/pull/7777))</small>
+* The unstable `batchedUpdates` API now passes the wrapped function's return value through.  
+  <small>([@bgnorlov](https://github.com/bgnorlov) in [#7444](https://github.com/facebook/react/pull/7444))</small>
+* Fixed a bug with updating text in IE 8.  
+  <small>([@mnpenner](https://github.com/mnpenner) in [#7832](https://github.com/facebook/react/pull/7832))</small>
+
+### React Perf {/*react-perf*/}
+* When ReactPerf is started, you can now view the relative time spent in components as a chart in Chrome Timeline.  
+  <small>([@gaearon](https://github.com/gaearon) in [#7549](https://github.com/facebook/react/pull/7549))</small>
+
+### React Test Utils {/*react-test-utils*/}
+* If you call `Simulate.click()` on a `<input disabled onClick={foo} />` then `foo` will get called whereas it didn't before.  
+  <small>([@nhunzaker](https://github.com/nhunzaker) in [#7642](https://github.com/facebook/react/pull/7642))</small>
+
+### React Test Renderer {/*react-test-renderer*/}
+* Due to packaging changes, it no longer crashes when imported together with React DOM in the same file.  
+  <small>([@sebmarkbage](https://github.com/sebmarkbage) in [#7164](https://github.com/facebook/react/pull/7164) and [#7168](https://github.com/facebook/react/pull/7168))</small>
+* `ReactTestRenderer.create()` now accepts `{createNodeMock: element => mock}` as an optional argument so you can mock refs with snapshot testing.  
+  <small>([@Aweary](https://github.com/Aweary) in [#7649](https://github.com/facebook/react/pull/7649) and [#8261](https://github.com/facebook/react/pull/8261))</small>
diff --git a/beta/src/content/blog/2017/04/07/react-v15.5.0.md b/beta/src/content/blog/2017/04/07/react-v15.5.0.md
new file mode 100644
index 000000000..dd6773513
--- /dev/null
+++ b/beta/src/content/blog/2017/04/07/react-v15.5.0.md
@@ -0,0 +1,226 @@
+---
+title: 'React v15.5.0'
+author: [acdlite]
+---
+
+It's been exactly one year since the last breaking change to React. Our next major release, React 16, will include some exciting improvements, including a [complete rewrite](https://www.youtube.com/watch?v=ZCuYPiUIONs) of React's internals. [We take stability seriously](/docs/design-principles#stability), and are committed to bringing those improvements to all of our users with minimal effort.
+
+To that end, today we're releasing React 15.5.0.
+
+### New Deprecation Warnings {/*new-deprecation-warnings*/}
+
+The biggest change is that we've extracted `React.PropTypes` and `React.createClass` into their own packages. Both are still accessible via the main `React` object, but using either will log a one-time deprecation warning to the console when in development mode. This will enable future code size optimizations.
+
+These warnings will not affect the behavior of your application. However, we realize they may cause some frustration, particularly if you use a testing framework that treats `console.error` as a failure.
+
+**Adding new warnings is not something we do lightly.** Warnings in React are not mere suggestions — they are integral to our strategy of keeping as many people as possible on the latest version of React. We never add warnings without providing an incremental path forward.
+
+So while the warnings may cause frustration in the short-term, we believe **prodding developers to migrate their codebases now prevents greater frustration in the future**. Proactively fixing warnings ensures you are prepared for the next major release. If your app produces zero warnings in 15.5, it should continue to work in 16 without any changes.
+
+For each of these new deprecations, we've provided a codemod to automatically migrate your code. They are available as part of the [react-codemod](https://github.com/reactjs/react-codemod) project.
+
+### Migrating from React.PropTypes {/*migrating-from-reactproptypes*/}
+
+Prop types are a feature for runtime validation of props during development. We've extracted the built-in prop types to a separate package to reflect the fact that not everybody uses them.
+
+In 15.5, instead of accessing `PropTypes` from the main `React` object, install the `prop-types` package and import them from there:
+
+```js {11,16,25}
+// Before (15.4 and below)
+import React from 'react';
+
+class Component extends React.Component {
+  render() {
+    return <div>{this.props.text}</div>;
+  }
+}
+
+Component.propTypes = {
+  text: React.PropTypes.string.isRequired,
+};
+
+// After (15.5)
+import React from 'react';
+import PropTypes from 'prop-types';
+
+class Component extends React.Component {
+  render() {
+    return <div>{this.props.text}</div>;
+  }
+}
+
+Component.propTypes = {
+  text: PropTypes.string.isRequired,
+};
+```
+
+The [codemod](https://github.com/reactjs/react-codemod#react-proptypes-to-prop-types) for this change performs this conversion automatically. Basic usage:
+
+```bash
+jscodeshift -t react-codemod/transforms/React-PropTypes-to-prop-types.js <path>
+```
+
+The `propTypes`, `contextTypes`, and `childContextTypes` APIs will work exactly as before. The only change is that the built-in validators now live in a separate package.
+
+You may also consider using [Flow](https://flow.org/) to statically type check your JavaScript code, including [React components](https://flow.org/en/docs/react/components/).
+
+### Migrating from React.createClass {/*migrating-from-reactcreateclass*/}
+
+When React was initially released, there was no idiomatic way to create classes in JavaScript, so we provided our own: `React.createClass`.
+
+Later, classes were added to the language as part of ES2015, so we added the ability to create React components using JavaScript classes. **Along with function components, JavaScript classes are now the [preferred way to create components in React](/docs/components-and-props#functional-and-class-components).**
+
+For your existing `createClass` components, we recommend that you migrate them to JavaScript classes. However, if you have components that rely on mixins, converting to classes may not be immediately feasible. If so, `create-react-class` is available on npm as a drop-in replacement:
+
+```js {4,13,15}
+// Before (15.4 and below)
+var React = require('react');
+
+var Component = React.createClass({
+  mixins: [MixinA],
+  render() {
+    return <Child />;
+  },
+});
+
+// After (15.5)
+var React = require('react');
+var createReactClass = require('create-react-class');
+
+var Component = createReactClass({
+  mixins: [MixinA],
+  render() {
+    return <Child />;
+  },
+});
+```
+
+Your components will continue to work the same as they did before.
+
+The [codemod](https://github.com/reactjs/react-codemod#explanation-of-the-new-es2015-class-transform-with-property-initializers) for this change attempts to convert a `createClass` component to a JavaScript class, with a fallback to `create-react-class` if necessary. It has converted thousands of components internally at Facebook.
+
+Basic usage:
+
+```bash
+jscodeshift -t react-codemod/transforms/class.js path/to/components
+```
+
+### Discontinuing support for React Addons {/*discontinuing-support-for-react-addons*/}
+
+We're discontinuing active maintenance of React Addons packages. In truth, most of these packages haven't been actively maintained in a long time. They will continue to work indefinitely, but we recommend migrating away as soon as you can to prevent future breakages.
+
+- **react-addons-create-fragment** – React 16 will have first-class support for fragments, at which point this package won't be necessary. We recommend using arrays of keyed elements instead.
+- **react-addons-css-transition-group** - Use [react-transition-group/CSSTransitionGroup](https://github.com/reactjs/react-transition-group) instead. Version 1.1.1 provides a drop-in replacement.
+- **react-addons-linked-state-mixin** - Explicitly set the `value` and `onChange` handler instead.
+- **react-addons-pure-render-mixin** - Use [`React.PureComponent`](/docs/react-api#reactpurecomponent) instead.
+- **react-addons-shallow-compare** - Use [`React.PureComponent`](/docs/react-api#reactpurecomponent) instead.
+- **react-addons-transition-group** - Use [react-transition-group/TransitionGroup](https://github.com/reactjs/react-transition-group) instead. Version 1.1.1 provides a drop-in replacement.
+- **react-addons-update** - Use [immutability-helper](https://github.com/kolodny/immutability-helper) instead, a drop-in replacement.
+- **react-linked-input** - Explicitly set the `value` and `onChange` handler instead.
+
+We're also discontinuing support for the `react-with-addons` UMD build. It will be removed in React 16.
+
+### React Test Utils {/*react-test-utils*/}
+
+Currently, the React Test Utils live inside `react-addons-test-utils`. As of 15.5, we're deprecating that package and moving them to `react-dom/test-utils` instead:
+
+```js
+// Before (15.4 and below)
+import TestUtils from 'react-addons-test-utils';
+
+// After (15.5)
+import TestUtils from 'react-dom/test-utils';
+```
+
+This reflects the fact that what we call the Test Utils are really a set of APIs that wrap the DOM renderer.
+
+The exception is shallow rendering, which is not DOM-specific. The shallow renderer has been moved to `react-test-renderer/shallow`.
+
+```js {2,5}
+// Before (15.4 and below)
+import {createRenderer} from 'react-addons-test-utils';
+
+// After (15.5)
+import {createRenderer} from 'react-test-renderer/shallow';
+```
+
+---
+
+## Acknowledgements {/*acknowledgements*/}
+
+A special thank you to these folks for transferring ownership of npm package names:
+
+- [Jason Miller](https://github.com/developit)
+- [Aaron Ackerman](https://github.com/aackerman)
+- [Vinicius Marson](https://github.com/viniciusmarson)
+
+---
+
+## Installation {/*installation*/}
+
+We recommend using [Yarn](https://yarnpkg.com/) or [npm](https://www.npmjs.com/) for managing front-end dependencies. If you're new to package managers, the [Yarn documentation](https://yarnpkg.com/en/docs/getting-started) is a good place to get started.
+
+To install React with Yarn, run:
+
+```bash
+yarn add react@^15.5.0 react-dom@^15.5.0
+```
+
+To install React with npm, run:
+
+```bash
+npm install --save react@^15.5.0 react-dom@^15.5.0
+```
+
+We recommend using a bundler like [webpack](https://webpack.js.org/) or [Browserify](http://browserify.org/) so you can write modular code and bundle it together into small packages to optimize load time.
+
+Remember that by default, React runs extra checks and provides helpful warnings in development mode. When deploying your app, make sure to [compile it in production mode](/docs/installation#development-and-production-versions).
+
+In case you don't use a bundler, we also provide pre-built bundles in the npm packages which you can [include as script tags](/docs/installation#using-a-cdn) on your page:
+
+- **React**  
+  Dev build with warnings: [react/dist/react.js](https://unpkg.com/react@15.5.0/dist/react.js)  
+  Minified build for production: [react/dist/react.min.js](https://unpkg.com/react@15.5.0/dist/react.min.js)
+- **React with Add-Ons**  
+  Dev build with warnings: [react/dist/react-with-addons.js](https://unpkg.com/react@15.5.0/dist/react-with-addons.js)  
+  Minified build for production: [react/dist/react-with-addons.min.js](https://unpkg.com/react@15.5.0/dist/react-with-addons.min.js)
+- **React DOM** (include React in the page before React DOM)  
+  Dev build with warnings: [react-dom/dist/react-dom.js](https://unpkg.com/react-dom@15.5.0/dist/react-dom.js)  
+  Minified build for production: [react-dom/dist/react-dom.min.js](https://unpkg.com/react-dom@15.5.0/dist/react-dom.min.js)
+- **React DOM Server** (include React in the page before React DOM Server)  
+  Dev build with warnings: [react-dom/dist/react-dom-server.js](https://unpkg.com/react-dom@15.5.0/dist/react-dom-server.js)  
+  Minified build for production: [react-dom/dist/react-dom-server.min.js](https://unpkg.com/react-dom@15.5.0/dist/react-dom-server.min.js)
+
+We've also published version `15.5.0` of the `react`, `react-dom`, and addons packages on npm and the `react` package on bower.
+
+---
+
+## Changelog {/*changelog*/}
+
+## 15.5.0 (April 7, 2017) {/*1550-april-7-2017*/}
+
+### React {/*react*/}
+
+- Added a deprecation warning for `React.createClass`. Points users to create-react-class instead. ([@acdlite](https://github.com/acdlite) in [d9a4fa4](https://github.com/facebook/react/commit/d9a4fa4f51c6da895e1655f32255cf72c0fe620e))
+- Added a deprecation warning for `React.PropTypes`. Points users to prop-types instead. ([@acdlite](https://github.com/acdlite) in [043845c](https://github.com/facebook/react/commit/043845ce75ea0812286bbbd9d34994bb7e01eb28))
+- Fixed an issue when using `ReactDOM` together with `ReactDOMServer`. ([@wacii](https://github.com/wacii) in [#9005](https://github.com/facebook/react/pull/9005))
+- Fixed issue with Closure Compiler. ([@anmonteiro](https://github.com/anmonteiro) in [#8895](https://github.com/facebook/react/pull/8895))
+- Another fix for Closure Compiler. ([@Shastel](https://github.com/Shastel) in [#8882](https://github.com/facebook/react/pull/8882))
+- Added component stack info to invalid element type warning. ([@n3tr](https://github.com/n3tr) in [#8495](https://github.com/facebook/react/pull/8495))
+
+### React DOM {/*react-dom*/}
+
+- Fixed Chrome bug when backspacing in number inputs. ([@nhunzaker](https://github.com/nhunzaker) in [#7359](https://github.com/facebook/react/pull/7359))
+- Added `react-dom/test-utils`, which exports the React Test Utils. ([@bvaughn](https://github.com/bvaughn))
+
+### React Test Renderer {/*react-test-renderer*/}
+
+- Fixed bug where `componentWillUnmount` was not called for children. ([@gre](https://github.com/gre) in [#8512](https://github.com/facebook/react/pull/8512))
+- Added `react-test-renderer/shallow`, which exports the shallow renderer. ([@bvaughn](https://github.com/bvaughn))
+
+### React Addons {/*react-addons*/}
+
+- Last release for addons; they will no longer be actively maintained.
+- Removed `peerDependencies` so that addons continue to work indefinitely. ([@acdlite](https://github.com/acdlite) and [@bvaughn](https://github.com/bvaughn) in [8a06cd7](https://github.com/facebook/react/commit/8a06cd7a786822fce229197cac8125a551e8abfa) and [67a8db3](https://github.com/facebook/react/commit/67a8db3650d724a51e70be130e9008806402678a))
+- Updated to remove references to `React.createClass` and `React.PropTypes` ([@acdlite](https://github.com/acdlite) in [12a96b9](https://github.com/facebook/react/commit/12a96b94823d6b6de6b1ac13bd576864abd50175))
+- `react-addons-test-utils` is deprecated. Use `react-dom/test-utils` and `react-test-renderer/shallow` instead. ([@bvaughn](https://github.com/bvaughn))
diff --git a/beta/src/content/blog/2017/05/18/whats-new-in-create-react-app.md b/beta/src/content/blog/2017/05/18/whats-new-in-create-react-app.md
new file mode 100644
index 000000000..0635a4d73
--- /dev/null
+++ b/beta/src/content/blog/2017/05/18/whats-new-in-create-react-app.md
@@ -0,0 +1,104 @@
+---
+title: "What's New in Create React App"
+author: [gaearon]
+---
+
+Less than a year ago, we introduced [Create React App](/blog/2016/07/22/create-apps-with-no-configuration) as an officially supported way to create apps with zero configuration. The project has since enjoyed tremendous growth, with over 950 commits by more than 250 contributors.
+
+Today, we are excited to announce that many features that have been in the pipeline for the last few months are finally released.
+
+As usual with Create React App, **you can enjoy these improvements in your existing non-ejected apps by updating a single dependency** and following our [migration instructions](https://github.com/facebookincubator/create-react-app/releases/tag/v1.0.0).
+
+Newly created apps will get these improvements automatically.
+
+### webpack 2 {/*webpack-2*/}
+
+> _This change was contributed by [@Timer](https://github.com/Timer) in [#1291](https://github.com/facebookincubator/create-react-app/pull/1291)._
+
+We have upgraded to webpack 2 which has been [officially released](https://medium.com/webpack/webpack-2-and-beyond-40520af9067f) a few months ago. It is a big upgrade with many bugfixes and general improvements. We have been testing it for a while, and now consider it stable enough to recommend it to everyone.
+
+While the Webpack configuration format has changed, Create React App users who didn't eject don't need to worry about it as we have updated the configuration on our side.
+
+If you had to eject your app for one reason or another, Webpack provides a [configuration migration guide](https://webpack.js.org/guides/migrating/) that you can follow to update your apps. Note that with each release of Create React App, we are working to support more use cases out of the box so that you don't have to eject in the future.
+
+The biggest notable webpack 2 feature is the ability to write and import [ES6 modules](http://2ality.com/2014/09/es6-modules-final) directly without compiling them to CommonJS. This shouldn’t affect how you write code since you likely already use `import` and `export` statements, but it will help catch more mistakes like missing named exports at compile time:
+
+![Export validation](/images/blog/cra-update-exports.gif)
+
+In the future, as the ecosystem around ES6 modules matures, you can expect more improvements to your app's bundle size thanks to [tree shaking](https://webpack.js.org/guides/tree-shaking/).
+
+### Runtime Error Overlay {/*error-overlay*/}
+
+> _This change was contributed by [@Timer](https://github.com/Timer) and [@nicinabox](https://github.com/nicinabox) in [#1101](https://github.com/facebookincubator/create-react-app/pull/1101), [@bvaughn](https://github.com/bvaughn) in [#2201](https://github.com/facebookincubator/create-react-app/pull/2201)._
+
+Have you ever made a mistake in code and only realized it after the console is flooded with cryptic errors? Or worse, have you ever shipped an app with crashes in production because you accidentally missed an error in development?
+
+To address these issues, we are introducing an overlay that pops up whenever there is an uncaught error in your application. It only appears in development, and you can dismiss it by pressing Escape.
+
+A GIF is worth a thousand words:
+
+![Runtime error overlay](/images/blog/cra-runtime-error.gif)
+
+(Yes, it integrates with your editor!)
+
+In the future, we plan to teach the runtime error overlay to understand more about your React app. For example, after React 16 we plan to show React component stacks in addition to the JavaScript stacks when an error is thrown.
+
+### Progressive Web Apps by Default {/*progressive-web-apps-by-default*/}
+
+> _This change was contributed by [@jeffposnick](https://github.com/jeffposnick) in [#1728](https://github.com/facebookincubator/create-react-app/pull/1728)._
+
+Newly created projects are built as [Progressive Web Apps](https://developers.google.com/web/progressive-web-apps/) by default. This means that they employ [service workers](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers) with an [offline-first caching strategy](https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/#cache-falling-back-to-network) to minimize the time it takes to serve the app to the users who visit it again. You can opt out of this behavior, but we recommend it both for new and existing apps, especially if you target mobile devices.
+
+![Loading assets from service worker](/images/blog/cra-pwa.png)
+
+New apps automatically have these features, but you can easily convert an existing project to a Progressive Web App by following [our migration guide](https://github.com/facebookincubator/create-react-app/releases/tag/v1.0.0).
+
+We will be adding [more documentation](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#making-a-progressive-web-app) on this topic in the coming weeks. Please feel free to [ask any questions](https://github.com/facebookincubator/create-react-app/issues/new) on the issue tracker!
+
+### Jest 20 {/*jest-20*/}
+
+> _This change was contributed by [@rogeliog](https://github.com/rogeliog) in [#1614](https://github.com/facebookincubator/create-react-app/pull/1614) and [@gaearon](https://github.com/gaearon) in [#2171](https://github.com/facebookincubator/create-react-app/pull/2171)._
+
+We are now using the latest version of Jest that includes numerous bugfixes and improvements. You can read more about the changes in [Jest 19](https://facebook.github.io/jest/blog/2017/02/21/jest-19-immersive-watch-mode-test-platform-improvements) and [Jest 20](http://facebook.github.io/jest/blog/2017/05/06/jest-20-delightful-testing-multi-project-runner) blog posts.
+
+Highlights include a new [immersive watch mode](https://facebook.github.io/jest/blog/2017/02/21/jest-19-immersive-watch-mode-test-platform-improvements#immersive-watch-mode), [a better snapshot format](https://facebook.github.io/jest/blog/2017/02/21/jest-19-immersive-watch-mode-test-platform-improvements#snapshot-updates), [improvements to printing skipped tests](https://facebook.github.io/jest/blog/2017/02/21/jest-19-immersive-watch-mode-test-platform-improvements#improved-printing-of-skipped-tests), and [new testing APIs](https://facebook.github.io/jest/blog/2017/05/06/jest-20-delightful-testing-multi-project-runner#new-improved-testing-apis).
+
+![Immersive test watcher](/images/blog/cra-jest-search.gif)
+
+Additionally, Create React App now support configuring a few Jest options related to coverage reporting.
+
+### Code Splitting with Dynamic import() {/*code-splitting-with-dynamic-import*/}
+
+> _This change was contributed by [@Timer](https://github.com/Timer) in [#1538](https://github.com/facebookincubator/create-react-app/pull/1538) and [@tharakawj](https://github.com/tharakawj) in [#1801](https://github.com/facebookincubator/create-react-app/pull/1801)._
+
+It is important to keep the initial JavaScript payload of web apps down to the minimum, and [load the rest of the code on demand](https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-2-page-load-performance-33b932d97cf2). Although Create React App supported [code splitting](https://webpack.js.org/guides/code-splitting-async/) using `require.ensure()` since the first release, it used a webpack-specific syntax that did not work in Jest or other environments.
+
+In this release, we are adding support for the [dynamic `import()` proposal](http://2ality.com/2017/01/import-operator#loading-code-on-demand) which aligns with the future web standards. Unlike `require.ensure()`, it doesn't break Jest tests, and should eventually become a part of JavaScript. We encourage you to use `import()` to delay loading the code for non-critical component subtrees until you need to render them.
+
+![Creating chunks with dynamic import](/images/blog/cra-dynamic-import.gif)
+
+### Better Console Output {/*better-console-output*/}
+
+> _This change was contributed by [@gaearon](https://github.com/gaearon) in [#2120](https://github.com/facebookincubator/create-react-app/pull/2120), [#2125](https://github.com/facebookincubator/create-react-app/pull/2125), and [#2161](https://github.com/facebookincubator/create-react-app/pull/2161)._
+
+We have improved the console output across the board.
+
+For example, when you start the development server, we now display the LAN address in additional to the localhost address so that you can quickly access the app from a mobile device on the same network:
+
+![Better console output](/images/blog/cra-better-output.png)
+
+When lint errors are reported, we no longer show the warnings so that you can concentrate on more critical issues. Errors and warnings in the production build output are better formatted, and the build error overlay font size now matches the browser font size more closely.
+
+### But Wait... There's More! {/*but-wait-theres-more*/}
+
+You can only fit so much in a blog post, but there are other long-requested features in this release, such as [environment-specific and local `.env` files](https://github.com/facebookincubator/create-react-app/pull/1344), [a lint rule against confusingly named globals](https://github.com/facebookincubator/create-react-app/pull/2130), [support for multiple proxies in development](https://github.com/facebookincubator/create-react-app/pull/1790), [a customizable browser launch script](https://github.com/facebookincubator/create-react-app/pull/1590), and many bugfixes.
+
+You can read the full changelog and the migration guide in the [v1.0.0 release notes](https://github.com/facebookincubator/create-react-app/releases/tag/v1.0.0).
+
+### Acknowledgements {/*acknowledgements*/}
+
+This release is a result of months of work from many people in the React community. It is focused on improving both developer and end user experience, as we believe they are complementary and go hand in hand.
+
+We are grateful to [everyone who has offered their contributions](https://github.com/facebookincubator/create-react-app/graphs/contributors), whether in code, documentation, or by helping other people. We would like to specifically thank [Joe Haddad](https://github.com/timer) for his invaluable help maintaining the project.
+
+We are excited to bring these improvements to everybody using Create React App, and we are looking forward to more of your feedback and contributions.
diff --git a/beta/src/content/blog/2017/06/13/react-v15.6.0.md b/beta/src/content/blog/2017/06/13/react-v15.6.0.md
new file mode 100644
index 000000000..bbce4c960
--- /dev/null
+++ b/beta/src/content/blog/2017/06/13/react-v15.6.0.md
@@ -0,0 +1,95 @@
+---
+title: 'React v15.6.0'
+author: [flarnie]
+---
+
+Today we are releasing React 15.6.0. As we prepare for React 16.0, we have been fixing and cleaning up many things. This release continues to pave the way.
+
+## Improving Inputs {/*improving-inputs*/}
+
+In React 15.6.0 the `onChange` event for inputs is a little bit more reliable and handles more edge cases, including the following:
+
+- not firing when radio button is clicked but not changed ([issue 1471](https://github.com/facebook/react/issues/1471))
+- changing an input of type `range` with the arrow keys ([issue 554](https://github.com/facebook/react/issues/554))
+- pasting text into a text area in IE11 ([issue 7211](https://github.com/facebook/react/issues/7211))
+- auto-fill in IE11 ([issue 6614](https://github.com/facebook/react/issues/6614))
+- clearing input with 'x' button or right-click 'delete' in IE11 ([issue 6822](https://github.com/facebook/react/issues/6822))
+- not firing when characters are present in the input on render in IE11 ([issue 2185](https://github.com/facebook/react/issues/2185))
+
+Thanks to [Jason Quense](https://github.com/jquense) and everyone who helped out on those issues and PRs.
+
+## Less Noisy Deprecation Warnings {/*less-noisy-deprecation-warnings*/}
+
+We are also including a couple of new warnings for upcoming deprecations. These should not affect most users, and for more details see the changelog below.
+
+After the last release, we got valuable community feedback that deprecation warnings were causing noise and failing tests. **In React 15.6, we have downgraded deprecation warnings to use `console.warn` instead of `console.error`.** Our other warnings will still use `console.error` because they surface urgent issues which could lead to bugs. Unlike our other warnings, deprecation warnings can be fixed over time and won't cause problems in your app if shipped. We believe that downgrading the urgency of deprecation warnings will make your next update easier. Thanks to everyone who was involved in the discussion of this change.
+
+---
+
+## Installation {/*installation*/}
+
+We recommend using [Yarn](https://yarnpkg.com/) or [npm](https://www.npmjs.com/) for managing front-end dependencies. If you're new to package managers, the [Yarn documentation](https://yarnpkg.com/en/docs/getting-started) is a good place to get started.
+
+To install React with Yarn, run:
+
+```bash
+yarn add react@^15.6.0 react-dom@^15.6.0
+```
+
+To install React with npm, run:
+
+```bash
+npm install --save react@^15.6.0 react-dom@^15.6.0
+```
+
+We recommend using a bundler like [webpack](https://webpack.js.org/) or [Browserify](http://browserify.org/) so you can write modular code and bundle it together into small packages to optimize load time.
+
+Remember that by default, React runs extra checks and provides helpful warnings in development mode. When deploying your app, make sure to [use the production build](/docs/optimizing-performance#use-the-production-build).
+
+In case you don't use a bundler, we also provide pre-built bundles in the npm packages which you can [include as script tags](/docs/installation#using-a-cdn) on your page:
+
+- **React**<br/>
+  Dev build with warnings: [react/dist/react.js](https://unpkg.com/react@15.6.0/dist/react.js)<br/>
+  Minified build for production: [react/dist/react.min.js](https://unpkg.com/react@15.6.0/dist/react.min.js)<br/>
+- **React with Add-Ons**<br/>
+  Dev build with warnings: [react/dist/react-with-addons.js](https://unpkg.com/react@15.6.0/dist/react-with-addons.js)<br/>
+  Minified build for production: [react/dist/react-with-addons.min.js](https://unpkg.com/react@15.5.0/dist/react-with-addons.min.js)<br/>
+- **React DOM** (include React in the page before React DOM)<br/>
+  Dev build with warnings: [react-dom/dist/react-dom.js](https://unpkg.com/react-dom@15.6.0/dist/react-dom.js)<br/>
+  Minified build for production: [react-dom/dist/react-dom.min.js](https://unpkg.com/react-dom@15.6.0/dist/react-dom.min.js)<br/>
+- **React DOM Server** (include React in the page before React DOM Server)<br/>
+  Dev build with warnings: [react-dom/dist/react-dom-server.js](https://unpkg.com/react-dom@15.6.0/dist/react-dom-server.js)<br/>
+  Minified build for production: [react-dom/dist/react-dom-server.min.js](https://unpkg.com/react-dom@15.6.0/dist/react-dom-server.min.js)<br/>
+
+We've also published version `15.6.0` of `react` and `react-dom` on npm, and the `react` package on bower.
+
+---
+
+## Changelog {/*changelog*/}
+
+## 15.6.0 (June 13, 2017) {/*1560-june-13-2017*/}
+
+### React {/*react*/}
+
+- Downgrade deprecation warnings to use `console.warn` instead of `console.error`. ([@flarnie](https://github.com/flarnie) in [#9753](https://github.com/facebook/react/pull/9753))
+- Add a deprecation warning for `React.createClass`. Points users to `create-react-class` instead. ([@flarnie](https://github.com/flarnie) in [#9771](https://github.com/facebook/react/pull/9771))
+- Add deprecation warnings and separate module for `React.DOM` factory helpers. ([@nhunzaker](https://github.com/nhunzaker) in [#8356](https://github.com/facebook/react/pull/8356))
+- Warn for deprecation of `React.createMixin` helper, which was never used. ([@aweary](https://github.com/aweary) in [#8853](https://github.com/facebook/react/pull/8853))
+
+### React DOM {/*react-dom*/}
+
+- Add support for CSS variables in `style` attribute. ([@aweary](https://github.com/aweary) in [#9302](https://github.com/facebook/react/pull/9302))
+- Add support for CSS Grid style properties. ([@ericsakmar](https://github.com/ericsakmar) in [#9185](https://github.com/facebook/react/pull/9185))
+- Fix bug where inputs mutated value on type conversion. ([@nhunzaker](https://github.com/mhunzaker) in [#9806](https://github.com/facebook/react/pull/9806))
+- Fix issues with `onChange` not firing properly for some inputs. ([@jquense](https://github.com/jquense) in [#8575](https://github.com/facebook/react/pull/8575))
+- Fix bug where controlled number input mistakenly allowed period. ([@nhunzaker](https://github.com/nhunzaker) in [#9584](https://github.com/facebook/react/pull/9584))
+- Fix bug where performance entries were being cleared. ([@chrisui](https://github.com/chrisui) in [#9451](https://github.com/facebook/react/pull/9451))
+
+### React Addons {/*react-addons*/}
+
+- Fix AMD support for addons depending on `react`. ([@flarnie](https://github.com/flarnie) in [#9919](https://github.com/facebook/react/issues/9919))
+- Fix `isMounted()` to return `true` in `componentWillUnmount`. ([@mridgway](https://github.com/mridgway) in [#9638](https://github.com/facebook/react/issues/9638))
+- Fix `react-addons-update` to not depend on native `Object.assign`. ([@gaearon](https://github.com/gaearon) in [#9937](https://github.com/facebook/react/pull/9937))
+- Remove broken Google Closure Compiler annotation from `create-react-class`. ([@gaearon](https://github.com/gaearon) in [#9933](https://github.com/facebook/react/pull/9933))
+- Remove unnecessary dependency from `react-linked-input`. ([@gaearon](https://github.com/gaearon) in [#9766](https://github.com/facebook/react/pull/9766))
+- Point `react-addons-(css-)transition-group` to the new package. ([@gaearon](https://github.com/gaearon) in [#9937](https://github.com/facebook/react/pull/9937))
diff --git a/beta/src/content/blog/2017/07/26/error-handling-in-react-16.md b/beta/src/content/blog/2017/07/26/error-handling-in-react-16.md
new file mode 100644
index 000000000..9ac2a17cd
--- /dev/null
+++ b/beta/src/content/blog/2017/07/26/error-handling-in-react-16.md
@@ -0,0 +1,116 @@
+---
+title: "Error Handling in React 16"
+author: [gaearon]
+---
+
+As React 16 release is getting closer, we would like to announce a few changes to how React handles JavaScript errors inside components. These changes are included in React 16 beta versions, and will be a part of React 16.
+
+**By the way, [we just released the first beta of React 16 for you to try!](https://github.com/facebook/react/issues/10294)**
+
+## Behavior in React 15 and Earlier {/*behavior-in-react-15-and-earlier*/}
+
+In the past, JavaScript errors inside components used to corrupt React’s internal state and cause it to [emit](https://github.com/facebook/react/issues/4026) [cryptic](https://github.com/facebook/react/issues/6895) [errors](https://github.com/facebook/react/issues/8579) on next renders. These errors were always caused by an earlier error in the application code, but React did not provide a way to handle them gracefully in components, and could not recover from them.
+
+## Introducing Error Boundaries {/*introducing-error-boundaries*/}
+
+A JavaScript error in a part of the UI shouldn’t break the whole app. To solve this problem for React users, React 16 introduces a new concept of an “error boundary”.
+
+Error boundaries are React components that **catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI** instead of the component tree that crashed. Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.
+
+A class component becomes an error boundary if it defines a new lifecycle method called `componentDidCatch(error, info)`:
+
+```js {7-12,15-18}
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  componentDidCatch(error, info) {
+    // Display fallback UI
+    this.setState({ hasError: true });
+    // You can also log the error to an error reporting service
+    logErrorToMyService(error, info);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      // You can render any custom fallback UI
+      return <h1>Something went wrong.</h1>;
+    }
+    return this.props.children;
+  }
+}
+```
+
+Then you can use it as a regular component:
+
+```js
+<ErrorBoundary>
+  <MyWidget />
+</ErrorBoundary>
+```
+
+The `componentDidCatch()` method works like a JavaScript `catch {}` block, but for components. Only class components can be error boundaries. In practice, most of the time you’ll want to declare an error boundary component once and use it throughout your application.
+
+Note that **error boundaries only catch errors in the components below them in the tree**. An error boundary can’t catch an error within itself. If an error boundary fails trying to render the error message, the error will propagate to the closest error boundary above it. This, too, is similar to how `catch {}` block works in JavaScript.
+
+## Live Demo {/*live-demo*/}
+
+Check out [this example of declaring and using an error boundary](https://codepen.io/gaearon/pen/wqvxGa?editors=0010) with [React 16 beta](https://github.com/facebook/react/issues/10294).
+
+## Where to Place Error Boundaries {/*where-to-place-error-boundaries*/}
+
+The granularity of error boundaries is up to you. You may wrap top-level route components to display a “Something went wrong” message to the user, just like server-side frameworks often handle crashes. You may also wrap individual widgets in an error boundary to protect them from crashing the rest of the application.
+
+## New Behavior for Uncaught Errors {/*new-behavior-for-uncaught-errors*/}
+
+This change has an important implication. **As of React 16, errors that were not caught by any error boundary will result in unmounting of the whole React component tree.**
+
+We debated this decision, but in our experience it is worse to leave corrupted UI in place than to completely remove it. For example, in a product like Messenger leaving the broken UI visible could lead to somebody sending a message to the wrong person. Similarly, it is worse for a payments app to display a wrong amount than to render nothing.
+
+This change means that as you migrate to React 16, you will likely uncover existing crashes in your application that have been unnoticed before. Adding error boundaries lets you provide better user experience when something goes wrong.
+
+For example, Facebook Messenger wraps content of the sidebar, the info panel, the conversation log, and the message input into separate error boundaries. If some component in one of these UI areas crashes, the rest of them remain interactive.
+
+We also encourage you to use JS error reporting services (or build your own) so that you can learn about unhandled exceptions as they happen in production, and fix them.
+
+## Component Stack Traces {/*component-stack-traces*/}
+
+React 16 prints all errors that occurred during rendering to the console in development, even if the application accidentally swallows them. In addition to the error message and the JavaScript stack, it also provides component stack traces. Now you can see where exactly in the component tree the failure has happened:
+
+<img src="../images/docs/error-boundaries-stack-trace.png" alt="Component stack traces in error message" style={{width: '100%'}} />
+
+
+You can also see the filenames and line numbers in the component stack trace. This works by default in [Create React App](https://github.com/facebookincubator/create-react-app) projects:
+
+<img src="../images/docs/error-boundaries-stack-trace-line-numbers.png" alt="Component stack traces with line numbers in error message" style={{width: '100%'}} />
+
+
+If you don’t use Create React App, you can add [this plugin](https://www.npmjs.com/package/babel-plugin-transform-react-jsx-source) manually to your Babel configuration. Note that it’s intended only for development and **must be disabled in production**.
+
+## Why Not Use `try` / `catch`? {/*why-not-use-try--catch*/}
+
+`try` / `catch` is great but it only works for imperative code:
+
+```js
+try {
+  showButton();
+} catch (error) {
+  // ...
+}
+```
+
+However, React components are declarative and specify *what* should be rendered:
+
+```js
+<Button />
+```
+
+Error boundaries preserve the declarative nature of React, and behave as you would expect. For example, even if an error occurs in a `componentDidUpdate` method caused by a `setState` somewhere deep in the tree, it will still correctly propagate to the closest error boundary.
+
+## Naming Changes from React 15 {/*naming-changes-from-react-15*/}
+
+React 15 included a very limited support for error boundaries under a different method name: `unstable_handleError`. This method no longer works, and you will need to change it to `componentDidCatch` in your code starting from the first 16 beta release.
+
+For this change, we’ve provided a [codemod](https://github.com/reactjs/react-codemod#error-boundaries) to automatically migrate your code.
diff --git a/beta/src/content/blog/2017/09/08/dom-attributes-in-react-16.md b/beta/src/content/blog/2017/09/08/dom-attributes-in-react-16.md
new file mode 100644
index 000000000..6c0c4bc95
--- /dev/null
+++ b/beta/src/content/blog/2017/09/08/dom-attributes-in-react-16.md
@@ -0,0 +1,187 @@
+---
+title: 'DOM Attributes in React 16'
+author: [gaearon]
+---
+
+In the past, React used to ignore unknown DOM attributes. If you wrote JSX with an attribute that React doesn't recognize, React would just skip it. For example, this:
+
+```js
+// Your code:
+<div mycustomattribute="something" />
+```
+
+would render an empty div to the DOM with React 15:
+
+```js
+// React 15 output:
+<div />
+```
+
+In React 16, we are making a change. Now, any unknown attributes will end up in the DOM:
+
+```js
+// React 16 output:
+<div mycustomattribute="something" />
+```
+
+## Why Are We Changing This? {/*why-are-we-changing-this*/}
+
+React has always provided a JavaScript-centric API to the DOM. Since React components often take both custom and DOM-related props, it makes sense for React to use the `camelCase` convention just like the DOM APIs:
+
+```js
+<div tabIndex="-1" />
+```
+
+This has not changed. However, the way we enforced it in the past forced us to maintain a whitelist of all valid React DOM attributes in the bundle:
+
+```js
+// ...
+summary: 'summary',
+tabIndex: 'tabindex'
+target: 'target',
+title: 'title',
+// ...
+```
+
+This had two downsides:
+
+- You could not [pass a custom attribute](https://github.com/facebook/react/issues/140). This is useful for supplying browser-specific non-standard attributes, trying new DOM APIs, and integrating with opinionated third-party libraries.
+
+- The attribute list kept growing over time, but most React canonical attribute names are already valid in the DOM. Removing most of the whitelist helped us reduce the bundle size a little bit.
+
+With the new approach, both of these problems are solved. With React 16, you can now pass custom attributes to all HTML and SVG elements, and React doesn't have to include the whole attribute whitelist in the production version.
+
+**Note that you should still use the canonical React naming for known attributes:**
+
+```js
+// Yes, please
+<div tabIndex="-1" />
+
+// Warning: Invalid DOM property `tabindex`. Did you mean `tabIndex`?
+<div tabindex="-1" />
+```
+
+In other words, the way you use DOM components in React hasn't changed, but now you have some new capabilities.
+
+## Should I Keep Data in Custom Attributes? {/*should-i-keep-data-in-custom-attributes*/}
+
+No. We don't encourage you to keep data in DOM attributes. Even if you have to, `data-` attributes are probably a better approach, but in most cases data should be kept in React component state or external stores.
+
+However, the new feature is handy if you need to use a non-standard or a new DOM attribute, or if you need to integrate with a third-party library that relies on such attributes.
+
+## Data and ARIA Attributes {/*data-and-aria-attributes*/}
+
+Just like before, React lets you pass `data-` and `aria-` attributes freely:
+
+```js
+<div data-foo="42" />
+<button aria-label="Close" onClick={onClose} />
+```
+
+This has not changed.
+
+[Accessibility](/docs/accessibility) is very important, so even though React 16 passes any attributes through, it still validates that `aria-` props have correct names in development mode, just like React 15 did.
+
+## Migration Path {/*migration-path*/}
+
+We have included [a warning about unknown attributes](/warnings/unknown-prop) since [React 15.2.0](https://github.com/facebook/react/releases/tag/v15.2.0) which came out more than a year ago. The vast majority of third-party libraries have already updated their code. If your app doesn't produce warnings with React 15.2.0 or higher, this change should not require modifications in your application code.
+
+If you still accidentally forward non-DOM props to DOM components, with React 16 you will start seeing those attributes in the DOM, for example:
+
+```js
+<div myData="[Object object]" />
+```
+
+This is somewhat safe (the browser will just ignore them) but we recommend to fix these cases when you see them. One potential hazard is if you pass an object that implements a custom `toString()` or `valueOf()` method that throws. Another possible issue is that legacy HTML attributes like `align` and `valign` will now be passed to the DOM. They used to be stripped out because React didn't support them.
+
+To avoid these problems, we suggest to fix the warnings you see in React 15 before upgrading to React 16.
+
+## Changes in Detail {/*changes-in-detail*/}
+
+We've made a few other changes to make the behavior more predictable and help ensure you're not making mistakes. We don't anticipate that these changes are likely to break real-world applications.
+
+**These changes only affect DOM components like `<div>`, not your own components.**
+
+Below is a detailed list of them.
+
+- **Unknown attributes with string, number, and object values:**
+
+  ```js
+  <div mycustomattribute="value" />
+  <div mycustomattribute={42} />
+  <div mycustomattribute={myObject} />
+  ```
+
+  React 15: Warns and ignores them.  
+   React 16: Converts values to strings and passes them through.
+
+  _Note: attributes starting with `on` are not passed through as an exception because this could become a potential security hole._
+
+- **Known attributes with a different canonical React name:**
+
+  ```js
+  <div tabindex="-1" />
+  <div class="hi" />
+  ```
+
+  React 15: Warns and ignores them.  
+   React 16: Warns but converts values to strings and passes them through.
+
+  _Note: always use the canonical React naming for all supported attributes._
+
+- **Non-boolean attributes with boolean values:**
+
+  ```js
+  <div className={false} />
+  ```
+
+  React 15: Converts booleans to strings and passes them through.  
+   React 16: Warns and ignores them.
+
+- **Non-event attributes with function values:**
+
+  ```js
+  <div className={function () {}} />
+  ```
+
+  React 15: Converts functions to strings and passes them through.  
+   React 16: Warns and ignores them.
+
+- **Attributes with Symbol values:**
+
+  ```js
+  <div className={Symbol('foo')} />
+  ```
+
+  React 15: Crashes.  
+   React 16: Warns and ignores them.
+
+- **Attributes with `NaN` values:**
+
+  ```js
+  <div tabIndex={0 / 0} />
+  ```
+
+  React 15: Converts `NaN`s to strings and passes them through.  
+   React 16: Converts `NaN`s to strings and passes them through with a warning.
+
+While testing this release, we have also [created an automatically generated table](https://github.com/facebook/react/blob/master/fixtures/attribute-behavior/AttributeTableSnapshot.md) for all known attributes to track potential regressions.
+
+## Try It! {/*try-it*/}
+
+You can try the change in [this CodePen](https://codepen.io/gaearon/pen/gxNVdP?editors=0010).  
+It uses React 16 RC, and you can [help us by testing the RC in your project!](https://github.com/facebook/react/issues/10294)
+
+## Thanks {/*thanks*/}
+
+This effort was largely driven by [Nathan Hunzaker](https://github.com/nhunzaker) who has been a [prolific outside contributor to React](https://github.com/facebook/react/pulls?q=is:pr+author:nhunzaker+is:closed).
+
+You can find his work on this issue in several PRs over the course of last year: [#6459](https://github.com/facebook/react/pull/6459), [#7311](https://github.com/facebook/react/pull/7311), [#10229](https://github.com/facebook/react/pull/10229), [#10397](https://github.com/facebook/react/pull/10397), [#10385](https://github.com/facebook/react/pull/10385), and [#10470](https://github.com/facebook/react/pull/10470).
+
+Major changes in a popular project can take a lot of time and research. Nathan demonstrated perseverance and commitment to getting this change through, and we are very thankful to him for this and other efforts.
+
+We would also like to thank [Brandon Dail](https://github.com/aweary) and [Jason Quense](https://github.com/jquense) for their invaluable help maintaining React this year.
+
+## Future Work {/*future-work*/}
+
+We are not changing how [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Custom_Elements) work in React 16, but there are [existing discussions](https://github.com/facebook/react/issues/7249) about setting properties instead of attributes, and we might revisit this in React 17. Feel free to chime in if you'd like to help!
diff --git a/beta/src/content/blog/2017/09/25/react-v15.6.2.md b/beta/src/content/blog/2017/09/25/react-v15.6.2.md
new file mode 100644
index 000000000..569fe5839
--- /dev/null
+++ b/beta/src/content/blog/2017/09/25/react-v15.6.2.md
@@ -0,0 +1,65 @@
+---
+title: 'React v15.6.2'
+author: [nhunzaker]
+---
+
+Today we're sending out React 15.6.2. In 15.6.1, we shipped a few fixes for change events and inputs that had some unintended consequences. Those regressions have been ironed out, and we've also included a few more fixes to improve the stability of React across all browsers.
+
+Additionally, 15.6.2 adds support for the [`controlList`](https://developers.google.com/web/updates/2017/03/chrome-58-media-updates#controlslist) attribute, and CSS columns are no longer appended with a `px` suffix.
+
+## Installation {/*installation*/}
+
+We recommend using [Yarn](https://yarnpkg.com/) or [npm](https://www.npmjs.com/) for managing front-end dependencies. If you're new to package managers, the [Yarn documentation](https://yarnpkg.com/en/docs/getting-started) is a good place to get started.
+
+To install React with Yarn, run:
+
+```bash
+yarn add react@^15.6.2 react-dom@^15.6.2
+```
+
+To install React with npm, run:
+
+```bash
+npm install --save react@^15.6.2 react-dom@^15.6.2
+```
+
+We recommend using a bundler like [webpack](https://webpack.js.org/) or [Browserify](http://browserify.org/) so you can write modular code and bundle it together into small packages to optimize load time.
+
+Remember that by default, React runs extra checks and provides helpful warnings in development mode. When deploying your app, make sure to [use the production build](/docs/optimizing-performance#use-the-production-build).
+
+In case you don't use a bundler, we also provide pre-built bundles in the npm packages which you can [include as script tags](/docs/installation#using-a-cdn) on your page:
+
+- **React**<br/>
+  Dev build with warnings: [react/dist/react.js](https://unpkg.com/react@15.6.2/dist/react.js)<br/>
+  Minified build for production: [react/dist/react.min.js](https://unpkg.com/react@15.6.2/dist/react.min.js)<br/>
+- **React with Add-Ons**<br/>
+  Dev build with warnings: [react/dist/react-with-addons.js](https://unpkg.com/react@15.6.2/dist/react-with-addons.js)<br/>
+  Minified build for production: [react/dist/react-with-addons.min.js](https://unpkg.com/react@15.6.2/dist/react-with-addons.min.js)<br/>
+- **React DOM** (include React in the page before React DOM)<br/>
+  Dev build with warnings: [react-dom/dist/react-dom.js](https://unpkg.com/react-dom@15.6.2/dist/react-dom.js)<br/>
+  Minified build for production: [react-dom/dist/react-dom.min.js](https://unpkg.com/react-dom@15.6.2/dist/react-dom.min.js)<br/>
+- **React DOM Server** (include React in the page before React DOM Server)<br/>
+  Dev build with warnings: [react-dom/dist/react-dom-server.js](https://unpkg.com/react-dom@15.6.2/dist/react-dom-server.js)<br/>
+  Minified build for production: [react-dom/dist/react-dom-server.min.js](https://unpkg.com/react-dom@15.6.2/dist/react-dom-server.min.js)<br/>
+
+We've also published version `15.6.2` of `react` and `react-dom` on npm, and the `react` package on bower.
+
+---
+
+## Changelog {/*changelog*/}
+
+## 15.6.2 (September 25, 2017) {/*1562-september-25-2017*/}
+
+### All Packages {/*all-packages*/}
+
+- Switch from BSD + Patents to MIT license
+
+### React DOM {/*react-dom*/}
+
+- Fix a bug where modifying `document.documentMode` would trigger IE detection in other browsers, breaking change events. ([@aweary](https://github.com/aweary) in [#10032](https://github.com/facebook/react/pull/10032))
+- CSS Columns are treated as unitless numbers. ([@aweary](https://github.com/aweary) in [#10115](https://github.com/facebook/react/pull/10115))
+- Fix bug in QtWebKit when wrapping synthetic events in proxies. ([@walrusfruitcake](https://github.com/walrusfruitcake) in [#10115](https://github.com/facebook/react/pull/10011))
+- Prevent event handlers from receiving extra argument in development. ([@aweary](https://github.com/aweary) in [#10115](https://github.com/facebook/react/pull/8363))
+- Fix cases where `onChange` would not fire with `defaultChecked` on radio inputs. ([@jquense](https://github.com/jquense) in [#10156](https://github.com/facebook/react/pull/10156))
+- Add support for `controlList` attribute to DOM property whitelist ([@nhunzaker](https://github.com/nhunzaker) in [#9940](https://github.com/facebook/react/pull/9940))
+- Fix a bug where creating an element with a ref in a constructor did not throw an error in development. ([@iansu](https://github.com/iansu) in [#10025](https://github.com/facebook/react/pull/10025))
diff --git a/beta/src/content/blog/2017/09/26/react-v16.0.md b/beta/src/content/blog/2017/09/26/react-v16.0.md
new file mode 100644
index 000000000..ab48f5d0e
--- /dev/null
+++ b/beta/src/content/blog/2017/09/26/react-v16.0.md
@@ -0,0 +1,213 @@
+---
+title: 'React v16.0'
+author: [acdlite]
+---
+
+We're excited to announce the release of React v16.0! Among the changes are some long-standing feature requests, including [**fragments**](#new-render-return-types-fragments-and-strings), [**error boundaries**](#better-error-handling), [**portals**](#portals), support for [**custom DOM attributes**](#support-for-custom-dom-attributes), improved [**server-side rendering**](#better-server-side-rendering), and [**reduced file size**](#reduced-file-size).
+
+### New render return types: fragments and strings {/*new-render-return-types-fragments-and-strings*/}
+
+You can now return an array of elements from a component's `render` method. Like with other arrays, you'll need to add a key to each element to avoid the key warning:
+
+```js
+render() {
+  // No need to wrap list items in an extra element!
+  return [
+    // Don't forget the keys :)
+    <li key="A">First item</li>,
+    <li key="B">Second item</li>,
+    <li key="C">Third item</li>,
+  ];
+}
+```
+
+[Starting with React 16.2.0](/blog/2017/11/28/react-v16.2.0-fragment-support), we are adding support for a special fragment syntax to JSX that doesn't require keys.
+
+We've added support for returning strings, too:
+
+```js
+render() {
+  return 'Look ma, no spans!';
+}
+```
+
+[See the full list of supported return types](/docs/react-component#render).
+
+### Better error handling {/*better-error-handling*/}
+
+Previously, runtime errors during rendering could put React in a broken state, producing cryptic error messages and requiring a page refresh to recover. To address this problem, React 16 uses a more resilient error-handling strategy. By default, if an error is thrown inside a component's render or lifecycle methods, the whole component tree is unmounted from the root. This prevents the display of corrupted data. However, it's probably not the ideal user experience.
+
+Instead of unmounting the whole app every time there's an error, you can use error boundaries. Error boundaries are special components that capture errors inside their subtree and display a fallback UI in its place. Think of error boundaries like try-catch statements, but for React components.
+
+For more details, check out our [previous post on error handling in React 16](/blog/2017/07/26/error-handling-in-react-16).
+
+### Portals {/*portals*/}
+
+Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
+
+```js
+render() {
+  // React does *not* create a new div. It renders the children into `domNode`.
+  // `domNode` is any valid DOM node, regardless of its location in the DOM.
+  return ReactDOM.createPortal(
+    this.props.children,
+    domNode,
+  );
+}
+```
+
+See a full example in the [documentation for portals](/docs/portals).
+
+### Better server-side rendering {/*better-server-side-rendering*/}
+
+React 16 includes a completely rewritten server renderer. It's really fast. It supports **streaming**, so you can start sending bytes to the client faster. And thanks to a [new packaging strategy](#reduced-file-size) that compiles away `process.env` checks (Believe it or not, reading `process.env` in Node is really slow!), you no longer need to bundle React to get good server-rendering performance.
+
+Core team member Sasha Aickin wrote a [great article describing React 16's SSR improvements](https://medium.com/@aickin/whats-new-with-server-side-rendering-in-react-16-9b0d78585d67). According to Sasha's synthetic benchmarks, server rendering in React 16 is roughly **three times faster** than React 15. "When comparing against React 15 with `process.env` compiled out, there’s about a 2.4x improvement in Node 4, about a 3x performance improvement in Node 6, and a full 3.8x improvement in the new Node 8.4 release. And if you compare against React 15 without compilation, React 16 has a full order of magnitude gain in SSR in the latest version of Node!" (As Sasha points out, please be aware that these numbers are based on synthetic benchmarks and may not reflect real-world performance.)
+
+In addition, React 16 is better at hydrating server-rendered HTML once it reaches the client. It no longer requires the initial render to exactly match the result from the server. Instead, it will attempt to reuse as much of the existing DOM as possible. No more checksums! In general, we don't recommend that you render different content on the client versus the server, but it can be useful in some cases (e.g. timestamps). **However, it's dangerous to have missing nodes on the server render as this might cause sibling nodes to be created with incorrect attributes.**
+
+See the [documentation for `ReactDOMServer`](/docs/react-dom-server) for more details.
+
+### Support for custom DOM attributes {/*support-for-custom-dom-attributes*/}
+
+Instead of ignoring unrecognized HTML and SVG attributes, React will now [pass them through to the DOM](/blog/2017/09/08/dom-attributes-in-react-16). This has the added benefit of allowing us to get rid of most of React's attribute whitelist, resulting in reduced file sizes.
+
+### Reduced file size {/*reduced-file-size*/}
+
+Despite all these additions, React 16 is actually **smaller** compared to 15.6.1!
+
+- `react` is 5.3 kb (2.2 kb gzipped), down from 20.7 kb (6.9 kb gzipped).
+- `react-dom` is 103.7 kb (32.6 kb gzipped), down from 141 kb (42.9 kb gzipped).
+- `react` + `react-dom` is 109 kb (34.8 kb gzipped), down from 161.7 kb (49.8 kb gzipped).
+
+That amounts to a combined **32% size decrease compared to the previous version (30% post-gzip)**.
+
+The size difference is partly attributable to a change in packaging. React now uses [Rollup](https://rollupjs.org/) to create flat bundles for each of its different target formats, resulting in both size and runtime performance wins. The flat bundle format also means that React's impact on bundle size is roughly consistent regardless of how you ship your app, whether it's with Webpack, Browserify, the pre-built UMD bundles, or any other system.
+
+### MIT licensed {/*mit-licensed*/}
+
+[In case you missed it](https://code.facebook.com/posts/300798627056246/relicensing-react-jest-flow-and-immutable-js/), React 16 is available under the MIT license. We've also published React 15.6.2 under MIT, for those who are unable to upgrade immediately.
+
+### New core architecture {/*new-core-architecture*/}
+
+React 16 is the first version of React built on top of a new core architecture, codenamed "Fiber." You can read all about this project over on [Facebook's engineering blog](https://code.facebook.com/posts/1716776591680069/react-16-a-look-inside-an-api-compatible-rewrite-of-our-frontend-ui-library/). (Spoiler: we rewrote React!)
+
+Fiber is responsible for most of the new features in React 16, like error boundaries and fragments. Over the next few releases, you can expect more new features as we begin to unlock the full potential of React.
+
+Perhaps the most exciting area we're working on is **async rendering**—a strategy for cooperatively scheduling rendering work by periodically yielding execution to the browser. The upshot is that, with async rendering, apps are more responsive because React avoids blocking the main thread.
+
+This demo provides an early peek at the types of problems async rendering can solve:
+
+<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Ever wonder what &quot;async rendering&quot; means? Here&#39;s a demo of how to coordinate an async React tree with non-React work <a href="https://t.co/3snoahB3uV">https://t.co/3snoahB3uV</a> <a href="https://t.co/egQ988gBjR">pic.twitter.com/egQ988gBjR</a></p>&mdash; Andrew Clark (@acdlite) <a href="https://twitter.com/acdlite/status/909926793536094209">September 18, 2017</a></blockquote>
+
+_Tip: Pay attention to the spinning black square._
+
+We think async rendering is a big deal, and represents the future of React. To make migration to v16.0 as smooth as possible, we're not enabling any async features yet, but we're excited to start rolling them out in the coming months. Stay tuned!
+
+## Installation {/*installation*/}
+
+React v16.0.0 is available on the npm registry.
+
+To install React 16 with Yarn, run:
+
+```bash
+yarn add react@^16.0.0 react-dom@^16.0.0
+```
+
+To install React 16 with npm, run:
+
+```bash
+npm install --save react@^16.0.0 react-dom@^16.0.0
+```
+
+We also provide UMD builds of React via a CDN:
+
+```html
+<script
+  crossorigin
+  src="https://unpkg.com/react@16/umd/react.production.min.js"
+></script>
+<script
+  crossorigin
+  src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"
+></script>
+```
+
+Refer to the documentation for [detailed installation instructions](/docs/installation).
+
+## Upgrading {/*upgrading*/}
+
+Although React 16 includes significant internal changes, in terms of upgrading, you can think of this like any other major React release. We've been serving React 16 to Facebook and Messenger.com users since earlier this year, and we released several beta and release candidate versions to flush out additional issues. With minor exceptions, **if your app runs in 15.6 without any warnings, it should work in 16.**
+
+For deprecations listed in [packaging](#packaging) below, codemods are provided to automatically transform your deprecated code.
+See the [15.5.0](/blog/2017/04/07/react-v15.5.0) blog post for more information, or browse the codemods in the [react-codemod](https://github.com/reactjs/react-codemod) project.
+
+### New deprecations {/*new-deprecations*/}
+
+Hydrating a server-rendered container now has an explicit API. If you're reviving server-rendered HTML, use [`ReactDOM.hydrate`](/docs/react-dom#hydrate) instead of `ReactDOM.render`. Keep using `ReactDOM.render` if you're just doing client-side rendering.
+
+### React Addons {/*react-addons*/}
+
+As previously announced, we've [discontinued support for React Addons](/blog/2017/04/07/react-v15.5.0#discontinuing-support-for-react-addons). We expect the latest version of each addon (except `react-addons-perf`; see below) to work for the foreseeable future, but we won't publish additional updates.
+
+Refer to the previous announcement for [suggestions on how to migrate](/blog/2017/04/07/react-v15.5.0#discontinuing-support-for-react-addons).
+
+`react-addons-perf` no longer works at all in React 16. It's likely that we'll release a new version of this tool in the future. In the meantime, you can [use your browser's performance tools to profile React components](/docs/optimizing-performance#profiling-components-with-the-chrome-performance-tab).
+
+### Breaking changes {/*breaking-changes*/}
+
+React 16 includes a number of small breaking changes. These only affect uncommon use cases and we don't expect them to break most apps.
+
+- React 15 had limited, undocumented support for error boundaries using `unstable_handleError`. This method has been renamed to `componentDidCatch`. You can use a codemod to [automatically migrate to the new API](https://github.com/reactjs/react-codemod#error-boundaries).
+- `ReactDOM.render` and `ReactDOM.unstable_renderSubtreeIntoContainer` now return null if called from inside a lifecycle method. To work around this, you can use [portals](https://github.com/facebook/react/issues/10309#issuecomment-318433235) or [refs](https://github.com/facebook/react/issues/10309#issuecomment-318434635).
+- `setState`:
+  - Calling `setState` with null no longer triggers an update. This allows you to decide in an updater function if you want to re-render.
+  - Calling `setState` directly in render always causes an update. This was not previously the case. Regardless, you should not be calling setState from render.
+  - `setState` callbacks (second argument) now fire immediately after `componentDidMount` / `componentDidUpdate` instead of after all components have rendered.
+- When replacing `<A />` with `<B />`, `B.componentWillMount` now always happens before `A.componentWillUnmount`. Previously, `A.componentWillUnmount` could fire first in some cases.
+- Previously, changing the ref to a component would always detach the ref before that component's render is called. Now, we change the ref later, when applying the changes to the DOM.
+- It is not safe to re-render into a container that was modified by something other than React. This worked previously in some cases but was never supported. We now emit a warning in this case. Instead you should clean up your component trees using `ReactDOM.unmountComponentAtNode`. [See this example.](https://github.com/facebook/react/issues/10294#issuecomment-318820987)
+- `componentDidUpdate` lifecycle no longer receives `prevContext` param. (See [#8631](https://github.com/facebook/react/issues/8631))
+- Shallow renderer no longer calls `componentDidUpdate` because DOM refs are not available. This also makes it consistent with `componentDidMount` (which does not get called in previous versions either).
+- Shallow renderer does not implement `unstable_batchedUpdates` anymore.
+- `ReactDOM.unstable_batchedUpdates` now only takes one extra argument after the callback.
+
+### Packaging {/*packaging*/}
+
+- There is no `react/lib/*` and `react-dom/lib/*` anymore. Even in CommonJS environments, React and ReactDOM are precompiled to single files (“flat bundles”). If you previously relied on undocumented React internals, and they don’t work anymore, let us know about your specific case in a new issue, and we’ll try to figure out a migration strategy for you.
+- There is no `react-with-addons.js` build anymore. All compatible addons are published separately on npm, and have single-file browser versions if you need them.
+- The deprecations introduced in 15.x have been removed from the core package. `React.createClass` is now available as `create-react-class`, `React.PropTypes` as `prop-types`, `React.DOM` as `react-dom-factories`, `react-addons-test-utils` as `react-dom/test-utils`, and shallow renderer as `react-test-renderer/shallow`. See [15.5.0](/blog/2017/04/07/react-v15.5.0) and [15.6.0](/blog/2017/06/13/react-v15.6.0) blog posts for instructions on migrating code and automated codemods.
+- The names and paths to the single-file browser builds have changed to emphasize the difference between development and production builds. For example:
+  - `react/dist/react.js` → `react/umd/react.development.js`
+  - `react/dist/react.min.js` → `react/umd/react.production.min.js`
+  - `react-dom/dist/react-dom.js` → `react-dom/umd/react-dom.development.js`
+  - `react-dom/dist/react-dom.min`.js → `react-dom/umd/react-dom.production.min.js`
+
+## JavaScript Environment Requirements {/*javascript-environment-requirements*/}
+
+React 16 depends on the collection types [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) and [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set). If you support older browsers and devices which may not yet provide these natively (e.g. IE < 11), consider including a global polyfill in your bundled application, such as [core-js](https://github.com/zloirock/core-js) or [babel-polyfill](https://babeljs.io/docs/usage/polyfill/).
+
+A polyfilled environment for React 16 using core-js to support older browsers might look like:
+
+```js
+import 'core-js/es6/map';
+import 'core-js/es6/set';
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById('root'));
+```
+
+React also depends on `requestAnimationFrame` (even in test environments).  
+You can use the [raf](https://www.npmjs.com/package/raf) package to shim `requestAnimationFrame`:
+
+```js
+import 'raf/polyfill';
+```
+
+## Acknowledgments {/*acknowledgments*/}
+
+As always, this release would not have been possible without our open source contributors. Thanks to everyone who filed bugs, opened PRs, responded to issues, wrote documentation, and more!
+
+Special thanks to our core contributors, especially for their heroic efforts over the past few weeks during the prerelease cycle: [Brandon Dail](https://twitter.com/aweary), [Jason Quense](https://twitter.com/monasticpanic), [Nathan Hunzaker](https://twitter.com/natehunzaker), and [Sasha Aickin](https://twitter.com/xander76).
diff --git a/beta/src/content/blog/2017/11/28/react-v16.2.0-fragment-support.md b/beta/src/content/blog/2017/11/28/react-v16.2.0-fragment-support.md
new file mode 100644
index 000000000..e1178dec4
--- /dev/null
+++ b/beta/src/content/blog/2017/11/28/react-v16.2.0-fragment-support.md
@@ -0,0 +1,333 @@
+---
+title: 'React v16.2.0: Improved Support for Fragments'
+author: [clemmy]
+---
+
+React 16.2 is now available! The biggest addition is improved support for returning multiple children from a component's render method. We call this feature _fragments_:
+
+Fragments look like empty JSX tags. They let you group a list of children without adding extra nodes to the DOM:
+
+```js
+render() {
+  return (
+    <>
+      <ChildA />
+      <ChildB />
+      <ChildC />
+    </>
+  );
+}
+```
+
+This exciting new feature is made possible by additions to both React and JSX.
+
+## What Are Fragments? {/*what-are-fragments*/}
+
+A common pattern is for a component to return a list of children. Take this example HTML:
+
+```html
+Some text.
+<h2>A heading</h2>
+More text.
+<h2>Another heading</h2>
+Even more text.
+```
+
+Prior to version 16, the only way to achieve this in React was by wrapping the children in an extra element, usually a `div` or `span`:
+
+```js
+render() {
+  return (
+    // Extraneous div element :(
+    <div>
+      Some text.
+      <h2>A heading</h2>
+      More text.
+      <h2>Another heading</h2>
+      Even more text.
+    </div>
+  );
+}
+```
+
+To address this limitation, React 16.0 added support for [returning an array of elements from a component's `render` method](/blog/2017/09/26/react-v16.0#new-render-return-types-fragments-and-strings). Instead of wrapping the children in a DOM element, you can put them into an array:
+
+```jsx
+render() {
+ return [
+  "Some text.",
+  <h2 key="heading-1">A heading</h2>,
+  "More text.",
+  <h2 key="heading-2">Another heading</h2>,
+  "Even more text."
+ ];
+}
+```
+
+However, this has some confusing differences from normal JSX:
+
+- Children in an array must be separated by commas.
+- Children in an array must have a key to prevent React's [key warning](/docs/lists-and-keys#keys).
+- Strings must be wrapped in quotes.
+
+To provide a more consistent authoring experience for fragments, React now provides a first-class `Fragment` component that can be used in place of arrays.
+
+```jsx{3,9}
+render() {
+  return (
+    <Fragment>
+      Some text.
+      <h2>A heading</h2>
+      More text.
+      <h2>Another heading</h2>
+      Even more text.
+    </Fragment>
+  );
+}
+```
+
+You can use `<Fragment />` the same way you'd use any other element, without changing the way you write JSX. No commas, no keys, no quotes.
+
+The Fragment component is available on the main React object:
+
+```js
+const Fragment = React.Fragment;
+
+<Fragment>
+  <ChildA />
+  <ChildB />
+  <ChildC />
+</Fragment>
+
+// This also works
+<React.Fragment>
+  <ChildA />
+  <ChildB />
+  <ChildC />
+</React.Fragment>
+```
+
+## JSX Fragment Syntax {/*jsx-fragment-syntax*/}
+
+Fragments are a common pattern in our codebases at Facebook. We anticipate they'll be widely adopted by other teams, too. To make the authoring experience as convenient as possible, we're adding syntactical support for fragments to JSX:
+
+```jsx{3,9}
+render() {
+  return (
+    <>
+      Some text.
+      <h2>A heading</h2>
+      More text.
+      <h2>Another heading</h2>
+      Even more text.
+    </>
+  );
+}
+```
+
+In React, this desugars to a `<React.Fragment/>` element, as in the example from the previous section. (Non-React frameworks that use JSX may compile to something different.)
+
+Fragment syntax in JSX was inspired by prior art such as the `XMLList() <></>` constructor in [E4X](https://web.archive.org/web/20201019115828/https://developer.mozilla.org/en-US/docs/Archive/Web/E4X/E4X_for_templating). Using a pair of empty tags is meant to represent the idea it won't add an actual element to the DOM.
+
+### Keyed Fragments {/*keyed-fragments*/}
+
+Note that the `<></>` syntax does not accept attributes, including keys.
+
+If you need a keyed fragment, you can use `<Fragment />` directly. A use case for this is mapping a collection to an array of fragments -- for example, to create a description list:
+
+```jsx
+function Glossary(props) {
+  return (
+    <dl>
+      {props.items.map((item) => (
+        // Without the `key`, React will fire a key warning
+        <Fragment key={item.id}>
+          <dt>{item.term}</dt>
+          <dd>{item.description}</dd>
+        </Fragment>
+      ))}
+    </dl>
+  );
+}
+```
+
+`key` is the only attribute that can be passed to `Fragment`. In the future, we may add support for additional attributes, such as event handlers.
+
+### Live Demo {/*live-demo*/}
+
+You can experiment with JSX fragment syntax with this [CodePen](https://codepen.io/reactjs/pen/VrEbjE?editors=1000).
+
+## Support for Fragment Syntax {/*support-for-fragment-syntax*/}
+
+Support for fragment syntax in JSX will vary depending on the tools you use to build your app. Please be patient as the JSX community works to adopt the new syntax. We've been working closely with maintainers of the most popular projects:
+
+### Create React App {/*create-react-app*/}
+
+Experimental support for fragment syntax will be added to Create React App within the next few days. A stable release may take a bit longer as we await adoption by upstream projects.
+
+### Babel {/*babel*/}
+
+Support for JSX fragments is available in [Babel v7.0.0-beta.31](https://github.com/babel/babel/releases/tag/v7.0.0-beta.31) and above! If you are already on Babel 7, simply update to the latest Babel and plugin transform:
+
+```bash
+# for yarn users
+yarn upgrade @babel/core @babel/plugin-transform-react-jsx
+# for npm users
+npm update @babel/core @babel/plugin-transform-react-jsx
+```
+
+Or if you are using the [react preset](https://www.npmjs.com/package/@babel/preset-react):
+
+```bash
+# for yarn users
+yarn upgrade @babel/core @babel/preset-react
+# for npm users
+npm update @babel/core @babel/preset-react
+```
+
+Note that Babel 7 is technically still in beta, but a [stable release is coming soon](https://babeljs.io/blog/2017/09/12/planning-for-7.0).
+
+Unfortunately, support for Babel 6.x is not available, and there are currently no plans to backport.
+
+#### Babel with Webpack (babel-loader) {/*babel-with-webpack-babel-loader*/}
+
+If you are using Babel with [Webpack](https://webpack.js.org/), no additional steps are needed because [babel-loader](https://github.com/babel/babel-loader) will use your peer-installed version of Babel.
+
+#### Babel with Other Frameworks {/*babel-with-other-frameworks*/}
+
+If you use JSX with a non-React framework like Inferno or Preact, there is a [pragma option available in babel-plugin-transform-react-jsx](https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-jsx#pragmafrag) that configures the Babel compiler to de-sugar the `<></>` syntax to a custom identifier.
+
+### TypeScript {/*typescript*/}
+
+TypeScript has full support for fragment syntax! Please upgrade to [version 2.6.2](https://github.com/Microsoft/TypeScript/releases/tag/v2.6.2). (Note that this is important even if you are already on version 2.6.1, since support was added as patch release in 2.6.2.)
+
+Upgrade to the latest TypeScript with the command:
+
+```bash
+# for yarn users
+yarn upgrade typescript
+# for npm users
+npm update typescript
+```
+
+### Flow {/*flow*/}
+
+[Flow](https://flow.org/) support for JSX fragments is available starting in [version 0.59](https://github.com/facebook/flow/releases/tag/v0.59.0)! Simply run
+
+```bash
+# for yarn users
+yarn upgrade flow-bin
+# for npm users
+npm update flow-bin
+```
+
+to update Flow to the latest version.
+
+### Prettier {/*prettier*/}
+
+[Prettier](https://github.com/prettier/prettier) added support for fragments in their [1.9 release](https://prettier.io/blog/2017/12/05/1.9.0#jsx-fragment-syntax-3237-https-githubcom-prettier-prettier-pull-3237-by-duailibe-https-githubcom-duailibe).
+
+### ESLint {/*eslint*/}
+
+JSX Fragments are supported by [ESLint](https://eslint.org/) 3.x when it is used together with [babel-eslint](https://github.com/babel/babel-eslint):
+
+```bash
+# for yarn users
+yarn add eslint@3.x babel-eslint@7
+# for npm users
+npm install eslint@3.x babel-eslint@7
+```
+
+or if you already have it, then upgrade:
+
+```bash
+# for yarn users
+yarn upgrade eslint@3.x babel-eslint@7
+# for npm users
+npm update eslint@3.x babel-eslint@7
+```
+
+Ensure you have the following line inside your `.eslintrc`:
+
+```json
+"parser": "babel-eslint"
+```
+
+That's it!
+
+Note that `babel-eslint` is not officially supported by ESLint. We'll be looking into adding support for fragments to ESLint 4.x itself in the coming weeks (see [issue #9662](https://github.com/eslint/eslint/issues/9662)).
+
+### Editor Support {/*editor-support*/}
+
+It may take a while for fragment syntax to be supported in your text editor. Please be patient as the community works to adopt the latest changes. In the meantime, you may see errors or inconsistent highlighting if your editor does not yet support fragment syntax. Generally, these errors can be safely ignored.
+
+#### TypeScript Editor Support {/*typescript-editor-support*/}
+
+If you're a TypeScript user -- great news! Editor support for JSX fragments is already available in [Visual Studio 2015](https://www.microsoft.com/en-us/download/details.aspx?id=48593), [Visual Studio 2017](https://www.microsoft.com/en-us/download/details.aspx?id=55258), [Visual Studio Code](https://code.visualstudio.com/updates/v1_19#_jsx-fragment-syntax) and [Sublime Text via Package Control](https://packagecontrol.io/packages/TypeScript).
+
+### Other Tools {/*other-tools*/}
+
+For other tools, please check with the corresponding documentation to check if there is support available. However, if you're blocked by your tooling, you can always start with using the `<Fragment>` component and perform a codemod later to replace it with the shorthand syntax when the appropriate support is available.
+
+## Installation {/*installation*/}
+
+React v16.2.0 is available on the npm registry.
+
+To install React 16 with Yarn, run:
+
+```bash
+yarn add react@^16.2.0 react-dom@^16.2.0
+```
+
+To install React 16 with npm, run:
+
+```bash
+npm install --save react@^16.2.0 react-dom@^16.2.0
+```
+
+We also provide UMD builds of React via a CDN:
+
+```html
+<script
+  crossorigin
+  src="https://unpkg.com/react@16/umd/react.production.min.js"
+></script>
+<script
+  crossorigin
+  src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"
+></script>
+```
+
+Refer to the documentation for [detailed installation instructions](/docs/installation).
+
+## Changelog {/*changelog*/}
+
+### React {/*react*/}
+
+- Add `Fragment` as named export to React. ([@clemmy](https://github.com/clemmy) in [#10783](https://github.com/facebook/react/pull/10783))
+- Support experimental Call/Return types in `React.Children` utilities. ([@MatteoVH](https://github.com/MatteoVH) in [#11422](https://github.com/facebook/react/pull/11422))
+
+### React DOM {/*react-dom*/}
+
+- Fix radio buttons not getting checked when using multiple lists of radios. ([@landvibe](https://github.com/landvibe) in [#11227](https://github.com/facebook/react/pull/11227))
+- Fix radio buttons not receiving the `onChange` event in some cases. ([@jquense](https://github.com/jquense) in [#11028](https://github.com/facebook/react/pull/11028))
+
+### React Test Renderer {/*react-test-renderer*/}
+
+- Fix `setState()` callback firing too early when called from `componentWillMount`. ([@accordeiro](https://github.com/accordeiro) in [#11507](https://github.com/facebook/react/pull/11507))
+
+### React Reconciler {/*react-reconciler*/}
+
+- Expose `react-reconciler/reflection` with utilities useful to custom renderers. ([@rivenhk](https://github.com/rivenhk) in [#11683](https://github.com/facebook/react/pull/11683))
+
+### Internal Changes {/*internal-changes*/}
+
+- Many tests were rewritten against the public API. Big thanks to [everyone who contributed](https://github.com/facebook/react/issues/11299)!
+
+## Acknowledgments {/*acknowledgments*/}
+
+This release was made possible by our open source contributors. A big thanks to everyone who filed issues, contributed to syntax discussions, reviewed pull requests, added support for JSX fragments in third party libraries, and more!
+
+Special thanks to the [TypeScript](https://www.typescriptlang.org/) and [Flow](https://flow.org/) teams, as well as the [Babel](https://babeljs.io/) maintainers, who helped make tooling support for the new syntax go seamlessly.
+
+Thanks to [Gajus Kuizinas](https://github.com/gajus/) and other contributors who prototyped the `Fragment` component in open source.
diff --git a/beta/src/content/blog/2017/12/07/introducing-the-react-rfc-process.md b/beta/src/content/blog/2017/12/07/introducing-the-react-rfc-process.md
new file mode 100644
index 000000000..dc5b35084
--- /dev/null
+++ b/beta/src/content/blog/2017/12/07/introducing-the-react-rfc-process.md
@@ -0,0 +1,40 @@
+---
+title: 'Introducing the React RFC Process'
+author: [acdlite]
+---
+
+We're adopting an RFC ("request for comments") process for contributing ideas to React.
+
+Inspired by [Yarn](https://github.com/yarnpkg/rfcs), [Ember](https://github.com/emberjs/rfcs), and [Rust](https://github.com/rust-lang/rfcs), the goal is to allow React core team members and community members to collaborate on the design of new features. It's also intended to provide a clear path for ideas to enter the project:
+
+- Create an RFC document detailing your proposal.
+- Submit a PR to the [RFC repository](https://github.com/reactjs/rfcs).
+- Incorporate feedback into the proposal.
+- After discussion, the core team may or may not accept the RFC.
+- If the RFC is accepted, the PR is merged.
+
+RFCs are accepted when they are approved for implementation in React. A more thorough description of the process is available in the repository's [README](https://github.com/reactjs/rfcs/blob/master/README.md). The exact details may be refined in the future.
+
+## Who Can Submit RFCs? {/*who-can-submit-rfcs*/}
+
+Anyone! No knowledge of React's internals is required, nor are you expected to implement the proposal yourself.
+
+As with our other repositories, we do ask that you complete a [Contributor License Agreement](https://github.com/reactjs/rfcs#contributor-license-agreement-cla) before we can accept your PR.
+
+## What Types of Changes Should Be Submitted As RFCs? {/*what-types-of-changes-should-be-submitted-as-rfcs*/}
+
+Generally, any idea that would benefit from additional review or design before being implemented is a good candidate for an RFC. As a rule of thumb, this means any proposal that adds, changes, or removes a React API.
+
+Not every change must go through the RFC process. Bug fixes or performance improvements that don't touch the API can be submitted directly to the main library.
+
+We now have several repositories where you can submit contributions to React:
+
+- **Issues, bugfixes, and code changes to the main library**: [facebook/react](https://github.com/facebook/react)
+- **Website and documentation**: [reactjs/reactjs.org](https://github.com/reactjs/reactjs.org)
+- **Ideas for changes that need additional review before being implemented**: [reactjs/rfcs](https://github.com/reactjs/rfcs)
+
+## RFC for A New Context API {/*rfc-for-a-new-context-api*/}
+
+Coinciding with the launch of our RFC process, we've submitted a [proposal for a new version of context](https://github.com/reactjs/rfcs/pull/2). The proposal has already received many valuable comments from the community that we will incorporate into the design of the new API.
+
+The context PR is a good example of how a typical RFC should be structured. We're excited to start receiving your proposals!
diff --git a/beta/src/content/blog/2017/12/15/improving-the-repository-infrastructure.md b/beta/src/content/blog/2017/12/15/improving-the-repository-infrastructure.md
new file mode 100644
index 000000000..0a5a9e896
--- /dev/null
+++ b/beta/src/content/blog/2017/12/15/improving-the-repository-infrastructure.md
@@ -0,0 +1,389 @@
+---
+title: 'Behind the Scenes: Improving the Repository Infrastructure'
+author: [gaearon, bvaughn]
+---
+
+As we worked on [React 16](/blog/2017/09/26/react-v16.0), we revamped the folder structure and much of the build tooling in the React repository. Among other things, we introduced projects such as [Rollup](https://rollupjs.org/), [Prettier](https://prettier.io/), and [Google Closure Compiler](https://developers.google.com/closure/compiler/) into our workflow. People often ask us questions about how we use those tools. In this post, we would like to share some of the changes that we've made to our build and test infrastructure in 2017, and what motivated them.
+
+While these changes helped us make React better, they don't affect most React users directly. However, we hope that blogging about them might help other library authors solve similar problems. Our contributors might also find these notes helpful!
+
+## Formatting Code with Prettier {/*formatting-code-with-prettier*/}
+
+React was one of the first large repositories to [fully embrace](https://github.com/facebook/react/pull/9101) opinionated automatic code formatting with [Prettier](https://prettier.io/). Our current Prettier setup consists of:
+
+- A local [`yarn prettier`](https://github.com/facebook/react/blob/cc52e06b490e0dc2482b345aa5d0d65fae931095/package.json#L115) script that [uses the Prettier Node API](https://github.com/facebook/react/blob/cc52e06b490e0dc2482b345aa5d0d65fae931095/scripts/prettier/index.js#L71-L77) to format files in place. We typically run it before committing changes. It is fast because it only checks the [files changed since diverging from remote master](https://github.com/facebook/react/blob/cc52e06b490e0dc2482b345aa5d0d65fae931095/scripts/shared/listChangedFiles.js#L29-L33).
+- A script that [runs Prettier](https://github.com/facebook/react/blob/cc52e06b490e0dc2482b345aa5d0d65fae931095/scripts/prettier/index.js#L79-L90) as part of our [continuous integration checks](https://github.com/facebook/react/blob/d906de7f602df810c38aa622c83023228b047db6/scripts/circleci/test_entry_point.sh#L10). It won't attempt to overwrite the files, but instead will fail the build if any file differs from the Prettier output for that file. This ensures that we can't merge a pull request unless it has been fully formatted.
+
+Some team members have also set up the [editor integrations](https://prettier.io/docs/en/editors). Our experience with Prettier has been fantastic, and we recommend it to any team that writes JavaScript.
+
+## Restructuring the Monorepo {/*restructuring-the-monorepo*/}
+
+Ever since React was split into packages, it has been a [monorepo](https://danluu.com/monorepo/): a set of packages under the umbrella of a single repository. This made it easier to coordinate changes and share the tooling, but our folder structure was deeply nested and difficult to understand. It was not clear which files belonged to which package. After releasing React 16, we've decided to completely reorganize the repository structure. Here is how we did it.
+
+### Migrating to Yarn Workspaces {/*migrating-to-yarn-workspaces*/}
+
+The Yarn package manager [introduced a feature called Workspaces](https://yarnpkg.com/blog/2017/08/02/introducing-workspaces/) a few months ago. This feature lets you tell Yarn where your monorepo's packages are located in the source tree. Every time you run `yarn`, in addition to installing your dependencies it also sets up the symlinks that point from your project's `node_modules` to the source folders of your packages.
+
+Thanks to Workspaces, absolute imports between our own packages (such as importing `react` from `react-dom`) "just work" with any tools that support the Node resolution mechanism. The only problem we encountered was Jest not running the transforms inside the linked packages, but we [found a fix](https://github.com/facebook/jest/pull/4761), and it was merged into Jest.
+
+To enable Yarn Workspaces, we added `"workspaces": ["packages/*"]` to our [`package.json`](https://github.com/facebook/react/blob/cc52e06b490e0dc2482b345aa5d0d65fae931095/package.json#L4-L6), and moved all the code into [top-level `packages/*` folders](https://github.com/facebook/react/tree/cc52e06b490e0dc2482b345aa5d0d65fae931095/packages), each with its own `package.json` file.
+
+Each package is structured in a similar way. For every public API entry point such as `react-dom` or `react-dom/server`, there is a [file](https://github.com/facebook/react/blob/cc52e06b490e0dc2482b345aa5d0d65fae931095/packages/react-dom/index.js) in the package root folder that re-exports the implementation from the [`/src/`](https://github.com/facebook/react/tree/cc52e06b490e0dc2482b345aa5d0d65fae931095/packages/react-dom/src) subfolder. The decision to point entry points to the source rather than to the built versions was intentional. Typically, we re-run a subset of tests after every change during development. Having to build the project to run a test would have been prohibitively slow. When we publish packages to npm, we replace these entry points with files in the [`/npm/`](https://github.com/facebook/react/tree/cc52e06b490e0dc2482b345aa5d0d65fae931095/packages/react-dom/npm) folder that point to the build artifacts.
+
+Not all packages have to be published on npm. For example, we keep some utilities that are tiny enough and can be safely duplicated in a [pseudo-package called `shared`](https://github.com/facebook/react/tree/cc52e06b490e0dc2482b345aa5d0d65fae931095/packages/shared). Our bundler is configured to [only treat `dependencies` declared from `package.json` as externals](https://github.com/facebook/react/blob/cc52e06b490e0dc2482b345aa5d0d65fae931095/scripts/rollup/build.js#L326-L329) so it happily bundles the `shared` code into `react` and `react-dom` without leaving any references to `shared/` in the build artifacts. So you can use Yarn Workspaces even if you don't plan to publish actual npm packages!
+
+### Removing the Custom Module System {/*removing-the-custom-module-system*/}
+
+In the past, we used a non-standard module system called "Haste" that lets you import any file from any other file by its unique `@providesModule` directive no matter where it is in the tree. It neatly avoids the problem of deep relative imports with paths like `../../../../` and is great for the product code. However, this makes it hard to understand the dependencies between packages. We also had to resort to hacks to make it work with different tools.
+
+We decided to [remove Haste](https://github.com/facebook/react/pull/11303) and use the Node resolution with relative imports instead. To avoid the problem of deep relative paths, we have [flattened our repository structure](https://github.com/facebook/react/pull/11304) so that it goes at most one level deep inside each package:
+
+```
+|-react
+|  |-npm
+|  |-src
+|-react-dom
+|  |-npm
+|  |-src
+|  |  |-client
+|  |  |-events
+|  |  |-server
+|  |  |-shared
+```
+
+This way, the relative paths can only contain one `./` or `../` followed by the filename. If one package needs to import something from another package, it can do so with an absolute import from a top-level entry point.
+
+In practice, we still have [some cross-package "internal" imports](https://github.com/facebook/react/blob/cc52e06b490e0dc2482b345aa5d0d65fae931095/packages/react-dom/src/client/ReactDOMFiberComponent.js#L10-L11) that violate this principle, but they're explicit, and we plan to gradually get rid of them.
+
+## Compiling Flat Bundles {/*compiling-flat-bundles*/}
+
+Historically, React was distributed in two different formats: as a single-file build that you can add as a `<script>` tag in the browser, and as a collection of CommonJS modules that you can bundle with a tool like webpack or Browserify.
+
+Before React 16, each React source file had a corresponding CommonJS module that was published as part of the npm packages. Importing `react` or `react-dom` led bundlers to the package [entry point](https://unpkg.com/react@15/index.js) from which they would build a dependency tree with the CommonJS modules in the [internal `lib` folder](https://unpkg.com/react@15/lib/).
+
+However, this approach had multiple disadvantages:
+
+- **It was inconsistent.** Different tools produce bundles of different sizes for identical code importing React, with the difference going as far as 30 kB (before gzip).
+- **It was inefficient for bundler users.** The code produced by most bundlers today contains a lot of "glue code" at the module boundaries. It keeps the modules isolated from each other, but increases the parse time, the bundle size, and the build time.
+- **It was inefficient for Node users.** When running in Node, performing `process.env.NODE_ENV` checks before development-only code incurs the overhead of actually looking up environment variables. This slowed down React server rendering. We couldn't cache it in a variable either because it prevented dead code elimination with Uglify.
+- **It broke encapsulation.** React internals were exposed both in the open source (as `react-dom/lib/*` imports) and internally at Facebook. It was convenient at first as a way to share utilities between projects, but with time it became a maintenance burden because renaming or changing argument types of internal functions would break unrelated projects.
+- **It prevented experimentation.** There was no way for the React team to experiment with any advanced compilation techniques. For example, in theory, we might want to apply [Google Closure Compiler Advanced](https://developers.google.com/closure/compiler/docs/api-tutorial3) optimizations or [Prepack](https://prepack.io/) to some of our code, but they are designed to work on complete bundles rather than small individual modules that we used to ship to npm.
+
+Due to these and other issues, we've changed the strategy in React 16. We still ship CommonJS modules for Node.js and bundlers, but instead of publishing many individual files in the npm package, we publish just two CommonJS bundles per entry point.
+
+For example, when you import `react` with React 16, the bundler [finds the entry point](https://unpkg.com/react@16/index.js) that just re-exports one of the two files:
+
+```js
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react.production.min.js');
+} else {
+  module.exports = require('./cjs/react.development.js');
+}
+```
+
+In every package provided by React, the [`cjs` folder](https://unpkg.com/react@16/cjs/) (short for "CommonJS") contains a development and a production pre-built bundle for each entry point.
+
+For example, [`react.development.js`](https://unpkg.com/react@16/cjs/react.development.js) is the version intended for development. It is readable and includes comments. On the other hand, [`react.production.min.js`](https://unpkg.com/react@16/cjs/react.production.min.js) was minified and optimized before it was published to npm.
+
+Note how this is essentially the same strategy that we've been using for the single-file browser builds (which now reside in the [`umd` directory](https://unpkg.com/react@16/umd/), short for [Universal Module Definition](https://www.davidbcalhoun.com/2014/what-is-amd-commonjs-and-umd/)). Now we just apply the same strategy to the CommonJS builds as well.
+
+### Migrating to Rollup {/*migrating-to-rollup*/}
+
+Just compiling CommonJS modules into single-file bundles doesn't solve all of the above problems. The really significant wins came from [migrating our build system](https://github.com/facebook/react/pull/9327) from Browserify to [Rollup](https://rollupjs.org/).
+
+[Rollup was designed with libraries rather than apps in mind](https://medium.com/webpack/webpack-and-rollup-the-same-but-different-a41ad427058c), and it is a perfect fit for React's use case. It solves one problem well: how to combine multiple modules into a flat file with minimal junk code in between. To achieve this, instead of turning modules into functions like many other bundlers, it puts all the code in the same scope, and renames variables so that they don't conflict. This produces code that is easier for the JavaScript engine to parse, for a human to read, and for a minifier to optimize.
+
+Rollup currently doesn't support some features that are important to application builders, such as code splitting. However, it does not aim to replace tools like webpack that do a great job at this. Rollup is a perfect fit for _libraries_ like React that can be pre-built and then integrated into apps.
+
+You can find our Rollup build configuration [here](https://github.com/facebook/react/blob/8ec146c38ee4f4c84b6ecf59f52de3371224e8bd/scripts/rollup/build.js#L336-L362), with a [list of plugins we currently use](https://github.com/facebook/react/blob/8ec146c38ee4f4c84b6ecf59f52de3371224e8bd/scripts/rollup/build.js#L196-L273).
+
+### Migrating to Google Closure Compiler {/*migrating-to-google-closure-compiler*/}
+
+After migrating to flat bundles, we [started](https://github.com/facebook/react/pull/10236) using [the JavaScript version of the Google Closure Compiler](https://github.com/google/closure-compiler-js) in its "simple" mode. In our experience, even with the advanced optimizations disabled, it still provided a significant advantage over Uglify, as it was able to better eliminate dead code and automatically inline small functions when appropriate.
+
+At first, we could only use Google Closure Compiler for the React bundles we shipped in the open source. At Facebook, we still needed the checked-in bundles to be unminified so we could symbolicate React production crashes with our error reporting tools. We ended up contributing [a flag](https://github.com/google/closure-compiler/pull/2707) that completely disables the renaming compiler pass. This lets us apply other optimizations like function inlining, but keep the code fully readable for the Facebook-specific builds of React. To improve the output readability, we [also format that custom build using Prettier](https://github.com/facebook/react/blob/cc52e06b490e0dc2482b345aa5d0d65fae931095/scripts/rollup/build.js#L249-L250). Interestingly, running Prettier on production bundles while debugging the build process is a great way to find unnecessary code in the bundles!
+
+Currently, all production React bundles [run through Google Closure Compiler in simple mode](https://github.com/facebook/react/blob/cc52e06b490e0dc2482b345aa5d0d65fae931095/scripts/rollup/build.js#L235-L248), and we may look into enabling advanced optimizations in the future.
+
+### Protecting Against Weak Dead Code Elimination {/*protecting-against-weak-dead-code-elimination*/}
+
+While we use an efficient [dead code elimination](https://en.wikipedia.org/wiki/Dead_code_elimination) solution in React itself, we can't make a lot of assumptions about the tools used by the React consumers.
+
+Typically, when you [configure a bundler for production](/docs/optimizing-performance#use-the-production-build), you need to tell it to substitute `process.env.NODE_ENV` with the `"production"` string literal. This process is sometimes called "envification". Consider this code:
+
+```js
+if (process.env.NODE_ENV !== 'production') {
+  // development-only code
+}
+```
+
+After envification, this condition will always be `false`, and can be completely eliminated by most minifiers:
+
+```js
+if ('production' !== 'production') {
+  // development-only code
+}
+```
+
+However, if the bundler is misconfigured, you can accidentally ship development code into production. We can't completely prevent this, but we took a few steps to mitigate the common cases when it happens.
+
+#### Protecting Against Late Envification {/*protecting-against-late-envification*/}
+
+As mentioned above, our entry points now look like this:
+
+```js
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react.production.min.js');
+} else {
+  module.exports = require('./cjs/react.development.js');
+}
+```
+
+However, some bundlers process `require`s before envification. In this case, even if the `else` block never executes, the `cjs/react.development.js` file still gets bundled.
+
+To prevent this, we also [wrap the whole content](https://github.com/facebook/react/blob/d906de7f602df810c38aa622c83023228b047db6/scripts/rollup/wrappers.js#L65-L69) of the development bundle into another `process.env.NODE_ENV` check inside the `cjs/react.development.js` bundle itself:
+
+```js
+'use strict';
+
+if (process.env.NODE_ENV !== 'production') {
+  (function () {
+    // bundle code
+  })();
+}
+```
+
+This way, even if the application bundle includes both the development and the production versions of the file, the development version will be empty after envification.
+
+The additional [IIFE](https://en.wikipedia.org/wiki/Immediately-invoked_function_expression) wrapper is necessary because some declarations (e.g. functions) can't be placed inside an `if` statement in JavaScript.
+
+#### Detecting Misconfigured Dead Code Elimination {/*detecting-misconfigured-dead-code-elimination*/}
+
+Even though [the situation is changing](https://twitter.com/iamakulov/status/941336777188696066), many popular bundlers don't yet force the users to specify the development or production mode. In this case `process.env.NODE_ENV` is typically provided by a runtime polyfill, but the dead code elimination doesn't work.
+
+We can't completely prevent React users from misconfiguring their bundlers, but we introduced a few additional checks for this in [React DevTools](https://github.com/facebook/react-devtools).
+
+If the development bundle executes, [React DOM reports this to React DevTools](https://github.com/facebook/react/blob/d906de7f602df810c38aa622c83023228b047db6/packages/react-dom/src/client/ReactDOM.js#L1333-L1335):
+
+<br/>
+
+<img src="/images/docs/devtools-dev.png" style={{maxWidth: '100%'}} alt="React DevTools on a website with development version of React" />
+
+There is also one more bad scenario. Sometimes, `process.env.NODE_ENV` is set to `"production"` at runtime rather than at the build time. This is how it should work in Node.js, but it is bad for the client-side builds because the unnecessary development code is bundled even though it never executes. This is harder to detect but we found a heuristic that works well in most cases and doesn't seem to produce false positives.
+
+We can write a function that contains a [development-only branch](https://github.com/facebook/react/blob/d906de7f602df810c38aa622c83023228b047db6/packages/react-dom/npm/index.js#L11-L20) with an arbitrary string literal. Then, if `process.env.NODE_ENV` is set to `"production"`, we can [call `toString()` on that function](https://github.com/facebook/react-devtools/blob/b370497ba6e873c63479408f11d784095523a630/backend/installGlobalHook.js#L143) and verify that the string literal in the development-only has been stripped out. If it is still there, the dead code elimination didn't work, and we need to warn the developer. Since developers might not notice the React DevTools warnings on a production website, we also [throw an error inside `setTimeout`](https://github.com/facebook/react-devtools/blob/b370497ba6e873c63479408f11d784095523a630/backend/installGlobalHook.js#L153-L160) from React DevTools in the hope that it will be picked up by the error analytics.
+
+We recognize this approach is somewhat fragile. The `toString()` method is not reliable and may change its behavior in future browser versions. This is why we put that logic into React DevTools itself rather than into React. This allows us to remove it later if it becomes problematic. We also warn only if we _found_ the special string literal rather than if we _didn't_ find it. This way, if the `toString()` output becomes opaque, or is overridden, the warning just won't fire.
+
+## Catching Mistakes Early {/*catching-mistakes-early*/}
+
+We want to catch bugs as early as possible. However, even with our extensive test coverage, occasionally we make a blunder. We made several changes to our build and test infrastructure this year to make it harder to mess up.
+
+### Migrating to ES Modules {/*migrating-to-es-modules*/}
+
+With the CommonJS `require()` and `module.exports`, it is easy to import a function that doesn't really exist, and not realize that until you call it. However, tools like Rollup that natively support [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) and [`export`](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export) syntax fail the build if you mistype a named import. After releasing React 16, [we have converted the entire React source code](https://github.com/facebook/react/pull/11389) to the ES Modules syntax.
+
+Not only did this provide some extra protection, but it also helped improve the build size. Many React modules only export utility functions, but CommonJS forced us to wrap them into an object. By turning those utility functions into named exports and eliminating the objects that contained them, we let Rollup place them into the top-level scope, and thus let the minifier mangle their names in the production builds.
+
+For now, have decided to only convert the source code to ES Modules, but not the tests. We use powerful utilities like `jest.resetModules()` and want to retain tighter control over when the modules get initialized in tests. In order to consume ES Modules from our tests, we enabled the [Babel CommonJS transform](https://github.com/facebook/react/blob/cc52e06b490e0dc2482b345aa5d0d65fae931095/scripts/jest/preprocessor.js#L28-L29), but only for the test environment.
+
+### Running Tests in Production Mode {/*running-tests-in-production-mode*/}
+
+Historically, we've been running all tests in a development environment. This let us assert on the warning messages produced by React, and seemed to make general sense. However, even though we try to keep the differences between the development and production code paths minimal, occasionally we would make a mistake in production-only code branches that weren't covered by tests, and cause an issue at Facebook.
+
+To solve this problem, we have added a new [`yarn test-prod`](https://github.com/facebook/react/blob/cc52e06b490e0dc2482b345aa5d0d65fae931095/package.json#L110) command that runs on CI for every pull request, and [executes all React test cases in the production mode](https://github.com/facebook/react/pull/11616). We wrapped any assertions about warning messages into development-only conditional blocks in all tests so that they can still check the rest of the expected behavior in both environments. Since we have a custom Babel transform that replaces production error messages with the [error codes](/blog/2016/07/11/introducing-reacts-error-code-system), we also added a [reverse transformation](https://github.com/facebook/react/blob/cc52e06b490e0dc2482b345aa5d0d65fae931095/scripts/jest/setupTests.js#L91-L126) as part of the production test run.
+
+### Using Public API in Tests {/*using-public-api-in-tests*/}
+
+When we were [rewriting the React reconciler](https://code.facebook.com/posts/1716776591680069/react-16-a-look-inside-an-api-compatible-rewrite-of-our-frontend-ui-library/), we recognized the importance of writing tests against the public API instead of internal modules. If the test is written against the public API, it is clear what is being tested from the user's perspective, and you can run it even if you rewrite the implementation from scratch.
+
+We reached out to the wonderful React community [asking for help](https://github.com/facebook/react/issues/11299) converting the remaining tests to use the public API. Almost all of the tests are converted now! The process wasn't easy. Sometimes a unit test just calls an internal method, and it's hard to figure out what the observable behavior from user's point of view was supposed to be tested. We found a few strategies that helped with this. The first thing we would try is to find the git history for when the test was added, and find clues in the issue and pull request description. Often they would contain reproducing cases that ended up being more valuable than the original unit tests! A good way to verify the guess is to try commenting out individual lines in the source code being tested. If the test fails, we know for sure that it stresses the given code path.
+
+We would like to give our deepest thanks to [everyone who contributed to this effort](https://github.com/facebook/react/issues?q=is%3Apr+11299+is%3Aclosed).
+
+### Running Tests on Compiled Bundles {/*running-tests-on-compiled-bundles*/}
+
+There is also one more benefit to writing tests against the public API: now we can [run them against the compiled bundles](https://github.com/facebook/react/pull/11633).
+
+This helps us ensure that tools like Babel, Rollup, and Google Closure Compiler don't introduce any regressions. This also opens the door for future more aggressive optimizations, as we can be confident that React still behaves exactly as expected after them.
+
+To implement this, we have created a [second Jest config](https://github.com/facebook/react/blob/cc52e06b490e0dc2482b345aa5d0d65fae931095/scripts/jest/config.build.js). It overrides our default config but points `react`, `react-dom`, and other entry points to the `/build/packages/` folder. This folder doesn't contain any React source code, and reflects what gets published to npm. It is populated after you run `yarn build`.
+
+This lets us run the same exact tests that we normally run against the source, but execute them using both development and production pre-built React bundles produced with Rollup and Google Closure Compiler.
+
+Unlike the normal test run, the bundle test run depends on the build products so it is not great for quick iteration. However, it still runs on the CI server so if something breaks, the test will display as failed, and we will know it's not safe to merge into master.
+
+There are still some test files that we intentionally don't run against the bundles. Sometimes we want to mock an internal module or override a feature flag that isn't exposed to the public yet. For those cases, we blacklist a test file by renaming it from `MyModule-test.js` to `MyModule-test.internal.js`.
+
+Currently, over 93% out of 2,650 React tests run against the compiled bundles.
+
+### Linting Compiled Bundles {/*linting-compiled-bundles*/}
+
+In addition to linting our source code, we run a much more limited set of lint rules (really, [just two of them](https://github.com/facebook/react/blob/cc52e06b490e0dc2482b345aa5d0d65fae931095/scripts/rollup/validate/eslintrc.cjs.js#L26-L27)) on the compiled bundles. This gives us an extra layer of protection against regressions in the underlying tools and [ensures](https://github.com/facebook/react/blob/cc52e06b490e0dc2482b345aa5d0d65fae931095/scripts/rollup/validate/eslintrc.cjs.js#L22) that the bundles don't use any language features that aren't supported by older browsers.
+
+### Simulating Package Publishing {/*simulating-package-publishing*/}
+
+Even running the tests on the built packages is not enough to avoid shipping a broken update. For example, we use the `files` field in our `package.json` files to specify a whitelist of folders and files that should be published on npm. However, it is easy to add a new entry point to a package but forget to add it to the whitelist. Even the bundle tests would pass, but after publishing the new entry point would be missing.
+
+To avoid situations like this, we are now simulating the npm publish by [running `npm pack` and then immediately unpacking the archive](https://github.com/facebook/react/blob/cc52e06b490e0dc2482b345aa5d0d65fae931095/scripts/rollup/packaging.js#L129-L134) after the build. Just like `npm publish`, this command filters out anything that isn't in the `files` whitelist. With this approach, if we were to forget adding an entry point to the list, it would be missing in the build folder, and the bundle tests relying on it would fail.
+
+### Creating Manual Test Fixtures {/*creating-manual-test-fixtures*/}
+
+Our unit tests run only in the Node environment, but not in the browsers. This was an intentional decision because browser-based testing tools were flaky in our experience, and didn't catch many issues anyway.
+
+We could get away with this because the code that touches the DOM is consolidated in a few files, and doesn't change that often. Every week, we update the Facebook.com codebase to the latest React commit on master. At Facebook, we use a set of internal [WebDriver](http://www.seleniumhq.org/projects/webdriver/) tests for critical product workflows, and these catch some regressions. React updates are first delivered to employees, so severe bugs get reported immediately before they reach two billion users.
+
+Still, it was hard to review DOM-related changes, and occasionally we would make mistakes. In particular, it was hard to remember all the edge cases that the code had to handle, why they were added, and when it was safe to remove them. We considered adding some automatic tests that run in the browser but we didn't want to slow down the development cycle and deal with a fragile CI. Additionally, automatic tests don't always catch DOM issues. For example, an input value displayed by the browser may not match what it reports as a DOM property.
+
+We've chatted about this with [Brandon Dail](https://github.com/aweary), [Jason Quense](https://github.com/jquense), and [Nathan Hunzaker](https://github.com/nhunzaker). They were sending substantial patches to React DOM but were frustrated that we failed to review them timely. We decided to give them commit access, but asked them to [create a set of manual tests](https://github.com/facebook/react/pull/8589) for DOM-related areas like input management. The initial set of manual fixtures [kept growing](https://github.com/facebook/react/commits/master/fixtures/dom) over the year.
+
+These fixtures are implemented as a React app located in [`fixtures/dom`](https://github.com/facebook/react/tree/d906de7f602df810c38aa622c83023228b047db6/fixtures/dom). Adding a fixture involves writing a React component with a description of the expected behavior, and links to the appropriate issues and browser quirks, like [in this example](https://github.com/facebook/react/pull/11760):
+
+<img src="https://user-images.githubusercontent.com/590904/33555298-dd52fb4e-d8cd-11e7-80e9-8369538eb633.png" style={{maxWidth: '100%'}} alt="DOM fixture example" />
+
+The fixture app lets you choose a version of React (local or one of the published versions) which is handy for comparing the behavior before and after the changes. When we change the behavior related to how we interact with the DOM, we can verify that it didn't regress by going through the related fixtures in different browsers.
+
+In some cases, a change proved to be so complex that it necessitated a standalone purpose-built fixture to verify it. For example, the [DOM attribute handling in React 16](/blog/2017/09/08/dom-attributes-in-react-16) was very hard to pull off with confidence at first. We kept discovering different edge cases, and almost gave up on doing it in time for the React 16 release. However, then we've built an ["attribute table" fixture](https://github.com/facebook/react/tree/d906de7f602df810c38aa622c83023228b047db6/fixtures/attribute-behavior) that renders all supported attributes and their misspellings with previous and next version of React, and displays the differences. It took a few iterations (the key insight was to group attributes with similar behavior together) but it ultimately allowed us to fix all major issues in just a few days.
+
+<br/>
+
+<blockquote class="twitter-tweet"><p lang="en" dir="ltr">We went through the table to vet the new behavior for every case (and discovered some old bugs too) <a href="https://t.co/cmF2qnK9Q9">pic.twitter.com/cmF2qnK9Q9</a></p>&mdash; Dan Abramov (@dan_abramov) <a href="https://twitter.com/dan_abramov/status/906244378066345984?ref_src=twsrc%5Etfw">September 8, 2017</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+
+Going through the fixtures is still a lot of work, and we are considering automating some of it. Still, the fixture app is invaluable even as documentation for the existing behavior and all the edge cases and browser bugs that React currently handles. Having it gives us confidence in making significant changes to the logic without breaking important use cases. Another improvement we're considering is to have a GitHub bot build and deploy the fixtures automatically for every pull request that touches the relevant files so anyone can help with browser testing.
+
+### Preventing Infinite Loops {/*preventing-infinite-loops*/}
+
+The React 16 codebase contains many `while` loops. They let us avoid the dreaded deep stack traces that occurred with earlier versions of React, but can make development of React really difficult. Every time there is a mistake in an exit condition our tests would just hang, and it took a while to figure out which of the loops is causing the issue.
+
+Inspired by the [strategy adopted by Repl.it](https://repl.it/site/blog/infinite-loops), we have added a [Babel plugin that prevents infinite loops](https://github.com/facebook/react/blob/d906de7f602df810c38aa622c83023228b047db6/scripts/babel/transform-prevent-infinite-loops.js) in the test environment. If some loop continues for more than the maximum allowed number of iterations, we throw an error and immediately fail it so that Jest can display where exactly this happened.
+
+This approach has a pitfall. If an error thrown from the Babel plugin gets caught and ignored up the call stack, the test will pass even though it has an infinite loop. This is really, really bad. To solve this problem, we [set a global field](https://github.com/facebook/react/blob/d906de7f602df810c38aa622c83023228b047db6/scripts/babel/transform-prevent-infinite-loops.js#L26-L30) before throwing the error. Then, after every test run, we [rethrow that error if the global field has been set](https://github.com/facebook/react/blob/d906de7f602df810c38aa622c83023228b047db6/scripts/jest/setupTests.js#L42-L56). This way any infinite loop will cause a test failure, no matter whether the error from the Babel plugin was caught or not.
+
+## Customizing the Build {/*customizing-the-build*/}
+
+There were a few things that we had to fine-tune after introducing our new build process. It took us a while to figure them out, but we're moderately happy with the solutions that we arrived at.
+
+### Dead Code Elimination {/*dead-code-elimination*/}
+
+The combination of Rollup and Google Closure Compiler already gets us pretty far in terms of stripping development-only code in production bundles. We [replace](https://github.com/facebook/react/blob/cc52e06b490e0dc2482b345aa5d0d65fae931095/scripts/rollup/build.js#L223-L226) the `__DEV__` literal with a boolean constant during the build, and both Rollup together and Google Closure Compiler can strip out the `if (false) {}` code branches and even some more sophisticated patterns. However, there is one particularly nasty case:
+
+```js
+import warning from 'fbjs/lib/warning';
+
+if (__DEV__) {
+  warning(false, 'Blimey!');
+}
+```
+
+This pattern is very common in the React source code. However `fbjs/lib/warning` is an external import that isn't being bundled by Rollup for the CommonJS bundle. Therefore, even if `warning()` call ends up being removed, Rollup doesn't know whether it's safe to remove to the import itself. What if the module performs a side effect during initialization? Then removing it would not be safe.
+
+To solve this problem, we use the [`treeshake.pureExternalModules` Rollup option](https://github.com/facebook/react/blob/cc52e06b490e0dc2482b345aa5d0d65fae931095/scripts/rollup/build.js#L338-L340) which takes an array of modules that we can guarantee don't have side effects. This lets Rollup know that an import to `fbjs/lib/warning` is safe to completely strip out if its value is not being used. However, if it _is_ being used (e.g. if we decide to add warnings in production), the import will be preserved. That's why this approach is safer than replacing modules with empty shims.
+
+When we optimize something, we need to ensure it doesn't regress in the future. What if somebody introduces a new development-only import of an external module, and not realize they also need to add it to `pureExternalModules`? Rollup prints a warning in such cases but we've [decided to fail the build completely](https://github.com/facebook/react/blob/cc52e06b490e0dc2482b345aa5d0d65fae931095/scripts/rollup/build.js#L395-L412) instead. This forces the person adding a new external development-only import to [explicitly specify whether it has side effects or not](https://github.com/facebook/react/blob/cc52e06b490e0dc2482b345aa5d0d65fae931095/scripts/rollup/modules.js#L10-L22) every time.
+
+### Forking Modules {/*forking-modules*/}
+
+In some cases, different bundles need to contain slightly different code. For example, React Native bundles have a different error handling mechanism that shows a redbox instead of printing a message to the console. However, it can be very inconvenient to thread these differences all the way through the calling modules.
+
+Problems like this are often solved with runtime configuration. However, sometimes it is impossible: for example, the React DOM bundles shouldn't even attempt to import the React Native redbox helpers. It is also unfortunate to bundle the code that never gets used in a particular environment.
+
+Another solution is to use dynamic dependency injection. However, it often produces code that is hard to understand, and may cause cyclical dependencies. It also defies some optimization opportunities.
+
+From the code point of view, ideally we just want to "redirect" a module to its different "forks" for specific bundles. The "forks" have the exact same API as the original modules, but do something different. We found this mental model very intuitive, and [created a fork configuration file](https://github.com/facebook/react/blob/cc52e06b490e0dc2482b345aa5d0d65fae931095/scripts/rollup/forks.js) that specifies how the original modules map to their forks, and the conditions under which this should happen.
+
+For example, this fork config entry specifies different [feature flags](https://github.com/facebook/react/blob/cc52e06b490e0dc2482b345aa5d0d65fae931095/packages/shared/ReactFeatureFlags.js) for different bundles:
+
+```js
+'shared/ReactFeatureFlags': (bundleType, entry) => {
+  switch (entry) {
+    case 'react-native-renderer':
+      return 'shared/forks/ReactFeatureFlags.native.js';
+    case 'react-cs-renderer':
+      return 'shared/forks/ReactFeatureFlags.native-cs.js';
+    default:
+      switch (bundleType) {
+        case FB_DEV:
+        case FB_PROD:
+          return 'shared/forks/ReactFeatureFlags.www.js';
+      }
+  }
+  return null;
+},
+```
+
+During the build, [our custom Rollup plugin](https://github.com/facebook/react/blob/cc52e06b490e0dc2482b345aa5d0d65fae931095/scripts/rollup/plugins/use-forks-plugin.js#L40) replaces modules with their forks if the conditions have matched. Since both the original modules and the forks are written as ES Modules, Rollup and Google Closure Compiler can inline constants like numbers or booleans, and thus efficiently eliminate dead code for disabled feature flags. In tests, when necessary, we [use `jest.mock()`](https://github.com/facebook/react/blob/cc52e06b490e0dc2482b345aa5d0d65fae931095/packages/react-cs-renderer/src/__tests__/ReactNativeCS-test.internal.js#L15-L17) to point the module to the appropriate forked version.
+
+As a bonus, we might want to verify that the export types of the original modules match the export types of the forks exactly. We can use a [slightly odd but totally working Flow trick](https://github.com/facebook/react/blob/cc52e06b490e0dc2482b345aa5d0d65fae931095/packages/shared/forks/ReactFeatureFlags.native.js#L32-L36) to accomplish this:
+
+```js
+import typeof * as FeatureFlagsType from 'shared/ReactFeatureFlags';
+import typeof * as FeatureFlagsShimType from './ReactFeatureFlags.native';
+type Check<_X, Y: _X, X: Y = _X> = null;
+(null: Check<FeatureFlagsShimType, FeatureFlagsType>);
+```
+
+This works by essentially forcing Flow to verify that two types are assignable to each other (and thus are equivalent). Now if we modify the exports of either the original module or the fork without changing the other file, the type check will fail. This might be a little goofy but we found this helpful in practice.
+
+To conclude this section, it is important to note that you can't specify your own module forks if you consume React from npm. This is intentional because none of these files are public API, and they are not covered by the [semver](https://semver.org/) guarantees. However, you are always welcome to build React from master or even fork it if you don't mind the instability and the risk of divergence. We hope that this writeup was still helpful in documenting one possible approach to targeting different environments from a single JavaScript library.
+
+### Tracking Bundle Size {/*tracking-bundle-size*/}
+
+As a final build step, we now [record build sizes for all bundles](https://github.com/facebook/react/blob/d906de7f602df810c38aa622c83023228b047db6/scripts/rollup/build.js#L264-L272) and write them to a file that [looks like this](https://github.com/facebook/react/blob/d906de7f602df810c38aa622c83023228b047db6/scripts/rollup/results.json). When you run `yarn build`, it prints a table with the results:
+
+<br/>
+
+<img src="https://user-images.githubusercontent.com/1519870/28427900-80487dbc-6d6f-11e7-828d-1b594bd1ddb5.png" style={{maxWidth: '100%'}} alt="Build results after running GCC" />
+
+_(It doesn't always look as good as this. This was the commit that migrated React from Uglify to Google Closure Compiler.)_
+
+Keeping the file sizes committed for everyone to see was helpful for tracking size changes and motivating people to find optimization opportunities.
+
+We haven't been entirely happy with this strategy because the JSON file often causes merge conflicts on larger branches. Updating it is also not currently enforced so it gets out of date. In the future, we're considering integrating a bot that would comment on pull requests with the size changes.
+
+## Simplifying the Release Process {/*simplifying-the-release-process*/}
+
+We like to release updates to the open source community often. Unfortunately, the old process of creating a release was slow and would typically take an entire day. After some changes to this process, we're now able to do a full release in less than an hour. Here's what we changed.
+
+### Branching Strategy {/*branching-strategy*/}
+
+Most of the time spent in the old release process was due to our branching strategy. The `master` branch was assumed to be unstable and would often contain breaking changes. Releases were done from a `stable` branch, and changes were manually cherry-picked into this branch prior to a release. We had [tooling to help automate](https://github.com/facebook/react/pull/7330) some of this process, but it was still [pretty complicated to use](https://github.com/facebook/react/blob/b5a2a1349d6e804d534f673612357c0be7e1d701/scripts/release-manager/Readme.md).
+
+As of version 16, we now release from the `master` branch. Experimental features and breaking changes are allowed, but must be hidden behind [feature flags](https://github.com/facebook/react/blob/cc52e06b490e0dc2482b345aa5d0d65fae931095/packages/shared/ReactFeatureFlags.js) so they can be removed during the build process. The new flat bundles and dead code elimination make it possible for us to do this without fear of leaking unwanted code into open source builds.
+
+### Automated Scripts {/*automated-scripts*/}
+
+After changing to a stable `master`, we created a new [release process checklist](https://github.com/facebook/react/issues/10620). Although much simpler than the previous process, this still involved dozens of steps and forgetting one could result in a broken release.
+
+To address this, we created a new [automated release process](https://github.com/facebook/react/pull/11223) that is [much easier to use](https://github.com/facebook/react/tree/master/scripts/release#react-release-script) and has several built-in checks to ensure that we release a working build. The new process is split into two steps: _build_ and _publish_. Here's what it looks like the first time you run it:
+
+![Release Script overview](/images/blog/release-script-build-overview.png)
+
+The _build_ step does most of the work- verifying permissions, running tests, and checking CI status. Once it finishes, it prints a reminder to update the CHANGELOG and to verify the bundle using the [manual fixtures](#creating-manual-test-fixtures) described above.
+
+![Release Script build confirmation screen](/images/blog/release-script-build-confirmation.png)
+
+All that's left is to tag and publish the release to NPM using the _publish_ script.
+
+![Release Script publish confirmation screen](/images/blog/release-script-publish-confirmation.png)
+
+(You may have noticed a `--dry` flag in the screenshots above. This flag allows us to run a release, end-to-end, without actually publishing to NPM. This is useful when working on the release script itself.)
+
+## In Conclusion {/*in-conclusion*/}
+
+Did this post inspire you to try some of these ideas in your own projects? We certainly hope so! If you have other ideas about how React build, test, or contribution workflow could be improved, please let us know on [our issue tracker](https://github.com/facebook/react/issues).
+
+You can find the related issues by the [build infrastructure label](https://github.com/facebook/react/labels/Component%3A%20Build%20Infrastructure). These are often great first contribution opportunities!
+
+## Acknowledgements {/*acknowledgements*/}
+
+We would like to thank:
+
+- [Rich Harris](https://github.com/Rich-Harris) and [Lukas Taegert](https://github.com/lukastaegert) for maintaining Rollup and helping us integrate it.
+- [Dimitris Vardoulakis](https://github.com/dimvar), [Chad Killingsworth](https://github.com/ChadKillingsworth), and [Tyler Breisacher](https://github.com/MatrixFrog) for their work on Google Closure Compiler and timely advice.
+- [Adrian Carolli](https://github.com/watadarkstar), [Adams Au](https://github.com/rivenhk), [Alex Cordeiro](https://github.com/accordeiro), [Jordan Tepper](https://github.com/HeroProtagonist), [Johnson Shi](https://github.com/sjy), [Soo Jae Hwang](https://github.com/misoguy), [Joe Lim](https://github.com/xjlim), [Yu Tian](https://github.com/yu-tian113), and others for helping prototype and implement some of these and other improvements.
+- [Anushree Subramani](https://github.com/anushreesubramani), [Abid Uzair](https://github.com/abiduzz420), [Sotiris Kiritsis](https://github.com/skiritsis), [Tim Jacobi](https://github.com/timjacobi), [Anton Arboleda](https://github.com/aarboleda1), [Jeremias Menichelli](https://github.com/jeremenichelli), [Audy Tanudjaja](https://github.com/audyodi), [Gordon Dent](https://github.com/gordyd), [Iacami Gevaerd
+  ](https://github.com/enapupe), [Lucas Lentz](https://github.com/sadpandabear), [Jonathan Silvestri](https://github.com/silvestrijonathan), [Mike Wilcox](https://github.com/mjw56), [Bernardo Smaniotto](https://github.com/smaniotto), [Douglas Gimli](https://github.com/douglasgimli), [Ethan Arrowood](https://github.com/ethan-arrowood), and others for their help porting the React test suite to use the public API.
diff --git a/beta/src/content/blog/2018/03/01/sneak-peek-beyond-react-16.md b/beta/src/content/blog/2018/03/01/sneak-peek-beyond-react-16.md
new file mode 100644
index 000000000..f6b452f00
--- /dev/null
+++ b/beta/src/content/blog/2018/03/01/sneak-peek-beyond-react-16.md
@@ -0,0 +1,24 @@
+---
+title: 'Sneak Peek: Beyond React 16'
+author: [sophiebits]
+---
+
+[Dan Abramov](https://twitter.com/dan_abramov) from our team just spoke at [JSConf Iceland 2018](https://2018.jsconf.is/) with a preview of some new features we've been working on in React. The talk opens with a question: "With vast differences in computing power and network speed, how do we deliver the best user experience for everyone?"
+
+Here's the video courtesy of JSConf Iceland:
+
+<br/>
+
+<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/nLF0n9SACd4?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
+
+I think you'll enjoy the talk more if you stop reading here and just watch the video. If you don't have time to watch, a (very) brief summary follows.
+
+## About the Two Demos {/*about-the-two-demos*/}
+
+On the first demo, Dan says: "We've built a generic way to ensure that high-priority updates don't get blocked by a low-priority update, called **time slicing**. If my device is fast enough, it feels almost like it's synchronous; if my device is slow, the app still feels responsive. It adapts to the device thanks to the [requestIdleCallback](https://developers.google.com/web/updates/2015/08/using-requestidlecallback) API. Notice that only the final state was displayed; the rendered screen is always consistent and we don't see visual artifacts of slow rendering causing a janky user experience."
+
+On the second demo, Dan explains: "We've built a generic way for components to suspend rendering while they load async data, which we call **suspense**. You can pause any state update until the data is ready, and you can add async loading to any component deep in the tree without plumbing all the props and state through your app and hoisting the logic. On a fast network, updates appear very fluid and instantaneous without a jarring cascade of spinners that appear and disappear. On a slow network, you can intentionally design which loading states the user should see and how granular or coarse they should be, instead of showing spinners based on how the code is written. The app stays responsive throughout."
+
+"Importantly, this is still the React you know. This is still the declarative component paradigm that you probably like about React."
+
+We can't wait to release these new async rendering features later this year. Follow this blog and [@reactjs on Twitter](https://twitter.com/reactjs) for updates.
diff --git a/beta/src/content/blog/2018/03/27/update-on-async-rendering.md b/beta/src/content/blog/2018/03/27/update-on-async-rendering.md
new file mode 100644
index 000000000..b168708a1
--- /dev/null
+++ b/beta/src/content/blog/2018/03/27/update-on-async-rendering.md
@@ -0,0 +1,700 @@
+---
+title: Update on Async Rendering
+author: [bvaughn]
+---
+
+For over a year, the React team has been working to implement asynchronous rendering. Last month during his talk at JSConf Iceland, [Dan unveiled some of the exciting new possibilities async rendering unlocks](/blog/2018/03/01/sneak-peek-beyond-react-16). Now we'd like to share with you some of the lessons we've learned while working on these features, and some recipes to help prepare your components for async rendering when it launches.
+
+One of the biggest lessons we've learned is that some of our legacy component lifecycles tend to encourage unsafe coding practices. They are:
+
+- `componentWillMount`
+- `componentWillReceiveProps`
+- `componentWillUpdate`
+
+These lifecycle methods have often been misunderstood and subtly misused; furthermore, we anticipate that their potential misuse may be more problematic with async rendering. Because of this, we will be adding an "UNSAFE\_" prefix to these lifecycles in an upcoming release. (Here, "unsafe" refers not to security but instead conveys that code using these lifecycles will be more likely to have bugs in future versions of React, especially once async rendering is enabled.)
+
+## Gradual Migration Path {/*gradual-migration-path*/}
+
+[React follows semantic versioning](/blog/2016/02/19/new-versioning-scheme), so this change will be gradual. Our current plan is:
+
+- **16.3**: Introduce aliases for the unsafe lifecycles, `UNSAFE_componentWillMount`, `UNSAFE_componentWillReceiveProps`, and `UNSAFE_componentWillUpdate`. (Both the old lifecycle names and the new aliases will work in this release.)
+- **A future 16.x release**: Enable deprecation warning for `componentWillMount`, `componentWillReceiveProps`, and `componentWillUpdate`. (Both the old lifecycle names and the new aliases will work in this release, but the old names will log a DEV-mode warning.)
+- **17.0**: Remove `componentWillMount`, `componentWillReceiveProps`, and `componentWillUpdate` . (Only the new "UNSAFE\_" lifecycle names will work from this point forward.)
+
+**Note that if you're a React application developer, you don't have to do anything about the legacy methods yet. The primary purpose of the upcoming version 16.3 release is to enable open source project maintainers to update their libraries in advance of any deprecation warnings. Those warnings will not be enabled until a future 16.x release.**
+
+We maintain over 50,000 React components at Facebook, and we don't plan to rewrite them all immediately. We understand that migrations take time. We will take the gradual migration path along with everyone in the React community.
+
+If you don't have the time to migrate or test these components, we recommend running a ["codemod"](https://medium.com/@cpojer/effective-javascript-codemods-5a6686bb46fb) script that renames them automatically:
+
+```bash
+cd your_project
+npx react-codemod rename-unsafe-lifecycles
+```
+
+Learn more about this codemod on the [16.9.0 release post.](https://reactjs.org/blog/2019/08/08/react-v16.9.0#renaming-unsafe-lifecycle-methods)
+
+---
+
+## Migrating from Legacy Lifecycles {/*migrating-from-legacy-lifecycles*/}
+
+If you'd like to start using the new component APIs introduced in React 16.3 (or if you're a maintainer looking to update your library in advance) here are a few examples that we hope will help you to start thinking about components a bit differently. Over time, we plan to add additional "recipes" to our documentation that show how to perform common tasks in a way that avoids the problematic lifecycles.
+
+Before we begin, here's a quick overview of the lifecycle changes planned for version 16.3:
+
+- We are **adding the following lifecycle aliases**: `UNSAFE_componentWillMount`, `UNSAFE_componentWillReceiveProps`, and `UNSAFE_componentWillUpdate`. (Both the old lifecycle names and the new aliases will be supported.)
+- We are **introducing two new lifecycles**, static `getDerivedStateFromProps` and `getSnapshotBeforeUpdate`.
+
+### New lifecycle: `getDerivedStateFromProps` {/*new-lifecycle-getderivedstatefromprops*/}
+
+```js
+class Example extends React.Component {
+  static getDerivedStateFromProps(props, state) {
+    // ...
+  }
+}
+```
+
+The new static `getDerivedStateFromProps` lifecycle is invoked after a component is instantiated as well as before it is re-rendered. It can return an object to update `state`, or `null` to indicate that the new `props` do not require any `state` updates.
+
+Together with `componentDidUpdate`, this new lifecycle should cover all use cases for the legacy `componentWillReceiveProps`.
+
+> Note:
+>
+> Both the older `componentWillReceiveProps` and the new `getDerivedStateFromProps` methods add significant complexity to components. This often leads to [bugs](/blog/2018/06/07/you-probably-dont-need-derived-state#common-bugs-when-using-derived-state). Consider **[simpler alternatives to derived state](/blog/2018/06/07/you-probably-dont-need-derived-state)** to make components predictable and maintainable.
+
+### New lifecycle: `getSnapshotBeforeUpdate` {/*new-lifecycle-getsnapshotbeforeupdate*/}
+
+```js
+class Example extends React.Component {
+  getSnapshotBeforeUpdate(prevProps, prevState) {
+    // ...
+  }
+}
+```
+
+The new `getSnapshotBeforeUpdate` lifecycle is called right before mutations are made (e.g. before the DOM is updated). The return value for this lifecycle will be passed as the third parameter to `componentDidUpdate`. (This lifecycle isn't often needed, but can be useful in cases like manually preserving scroll position during rerenders.)
+
+Together with `componentDidUpdate`, this new lifecycle should cover all use cases for the legacy `componentWillUpdate`.
+
+You can find their type signatures [in this gist](https://gist.github.com/gaearon/88634d27abbc4feeb40a698f760f3264).
+
+We'll look at examples of how both of these lifecycles can be used below.
+
+## Examples {/*examples*/}
+
+- [Initializing state](#initializing-state)
+- [Fetching external data](#fetching-external-data)
+- [Adding event listeners (or subscriptions)](#adding-event-listeners-or-subscriptions)
+- [Updating `state` based on props](#updating-state-based-on-props)
+- [Invoking external callbacks](#invoking-external-callbacks)
+- [Side effects on props change](#side-effects-on-props-change)
+- [Fetching external data when props change](#fetching-external-data-when-props-change)
+- [Reading DOM properties before an update](#reading-dom-properties-before-an-update)
+
+> Note
+>
+> For brevity, the examples below are written using the experimental class properties transform, but the same migration strategies apply without it.
+
+### Initializing state {/*initializing-state*/}
+
+This example shows a component with `setState` calls inside of `componentWillMount`:
+
+```js {5-10}
+// Before
+class ExampleComponent extends React.Component {
+  state = {};
+
+  componentWillMount() {
+    this.setState({
+      currentColor: this.props.defaultColor,
+      palette: 'rgb',
+    });
+  }
+}
+```
+
+The simplest refactor for this type of component is to move state initialization to the constructor or to a property initializer, like so:
+
+```js {3-6}
+// After
+class ExampleComponent extends React.Component {
+  state = {
+    currentColor: this.props.defaultColor,
+    palette: 'rgb',
+  };
+}
+```
+
+### Fetching external data {/*fetching-external-data*/}
+
+Here is an example of a component that uses `componentWillMount` to fetch external data:
+
+```js {7-14}
+// Before
+class ExampleComponent extends React.Component {
+  state = {
+    externalData: null,
+  };
+
+  componentWillMount() {
+    this._asyncRequest = loadMyAsyncData().then(
+      externalData => {
+        this._asyncRequest = null;
+        this.setState({externalData});
+      }
+    );
+  }
+
+  componentWillUnmount() {
+    if (this._asyncRequest) {
+      this._asyncRequest.cancel();
+    }
+  }
+
+  render() {
+    if (this.state.externalData === null) {
+      // Render loading state ...
+    } else {
+      // Render real UI ...
+    }
+  }
+}
+```
+
+The above code is problematic for both server rendering (where the external data won't be used) and the upcoming async rendering mode (where the request might be initiated multiple times).
+
+The recommended upgrade path for most use cases is to move data-fetching into `componentDidMount`:
+
+```js {7-14}
+// After
+class ExampleComponent extends React.Component {
+  state = {
+    externalData: null,
+  };
+
+  componentDidMount() {
+    this._asyncRequest = loadMyAsyncData().then(
+      externalData => {
+        this._asyncRequest = null;
+        this.setState({externalData});
+      }
+    );
+  }
+
+  componentWillUnmount() {
+    if (this._asyncRequest) {
+      this._asyncRequest.cancel();
+    }
+  }
+
+  render() {
+    if (this.state.externalData === null) {
+      // Render loading state ...
+    } else {
+      // Render real UI ...
+    }
+  }
+}
+```
+
+There is a common misconception that fetching in `componentWillMount` lets you avoid the first empty rendering state. In practice this was never true because React has always executed `render` immediately after `componentWillMount`. If the data is not available by the time `componentWillMount` fires, the first `render` will still show a loading state regardless of where you initiate the fetch. This is why moving the fetch to `componentDidMount` has no perceptible effect in the vast majority of cases.
+
+> Note
+>
+> Some advanced use-cases (e.g. libraries like Relay) may want to experiment with eagerly prefetching async data. An example of how this can be done is available [here](https://gist.github.com/bvaughn/89700e525ff423a75ffb63b1b1e30a8f).
+>
+> In the longer term, the canonical way to fetch data in React components will likely be based on the “suspense” API [introduced at JSConf Iceland](/blog/2018/03/01/sneak-peek-beyond-react-16). Both simple data fetching solutions and libraries like Apollo and Relay will be able to use it under the hood. It is significantly less verbose than either of the above solutions, but will not be finalized in time for the 16.3 release.
+>
+> When supporting server rendering, it's currently necessary to provide the data synchronously – `componentWillMount` was often used for this purpose but the constructor can be used as a replacement. The upcoming suspense APIs will make async data fetching cleanly possible for both client and server rendering.
+
+### Adding event listeners (or subscriptions) {/*adding-event-listeners-or-subscriptions*/}
+
+Here is an example of a component that subscribes to an external event dispatcher when mounting:
+
+```js {3-12}
+// Before
+class ExampleComponent extends React.Component {
+  componentWillMount() {
+    this.setState({
+      subscribedValue: this.props.dataSource.value,
+    });
+
+    // This is not safe; it can leak!
+    this.props.dataSource.subscribe(
+      this.handleSubscriptionChange
+    );
+  }
+
+  componentWillUnmount() {
+    this.props.dataSource.unsubscribe(
+      this.handleSubscriptionChange
+    );
+  }
+
+  handleSubscriptionChange = dataSource => {
+    this.setState({
+      subscribedValue: dataSource.value,
+    });
+  };
+}
+```
+
+Unfortunately, this can cause memory leaks for server rendering (where `componentWillUnmount` will never be called) and async rendering (where rendering might be interrupted before it completes, causing `componentWillUnmount` not to be called).
+
+People often assume that `componentWillMount` and `componentWillUnmount` are always paired, but that is not guaranteed. Only once `componentDidMount` has been called does React guarantee that `componentWillUnmount` will later be called for clean up.
+
+For this reason, the recommended way to add listeners/subscriptions is to use the `componentDidMount` lifecycle:
+
+```js {3-5,7-24}
+// After
+class ExampleComponent extends React.Component {
+  state = {
+    subscribedValue: this.props.dataSource.value,
+  };
+
+  componentDidMount() {
+    // Event listeners are only safe to add after mount,
+    // So they won't leak if mount is interrupted or errors.
+    this.props.dataSource.subscribe(
+      this.handleSubscriptionChange
+    );
+
+    // External values could change between render and mount,
+    // In some cases it may be important to handle this case.
+    if (
+      this.state.subscribedValue !==
+      this.props.dataSource.value
+    ) {
+      this.setState({
+        subscribedValue: this.props.dataSource.value,
+      });
+    }
+  }
+
+  componentWillUnmount() {
+    this.props.dataSource.unsubscribe(
+      this.handleSubscriptionChange
+    );
+  }
+
+  handleSubscriptionChange = dataSource => {
+    this.setState({
+      subscribedValue: dataSource.value,
+    });
+  };
+}
+```
+
+Sometimes it is important to update subscriptions in response to property changes. If you're using a library like Redux or MobX, the library's container component should handle this for you. For application authors, we've created a small library, [`create-subscription`](https://github.com/facebook/react/tree/master/packages/create-subscription), to help with this. We'll publish it along with React 16.3.
+
+Rather than passing a subscribable `dataSource` prop as we did in the example above, we could use `create-subscription` to pass in the subscribed value:
+
+```js
+import {createSubscription} from 'create-subscription';
+
+const Subscription = createSubscription({
+  getCurrentValue(sourceProp) {
+    // Return the current value of the subscription (sourceProp).
+    return sourceProp.value;
+  },
+
+  subscribe(sourceProp, callback) {
+    function handleSubscriptionChange() {
+      callback(sourceProp.value);
+    }
+
+    // Subscribe (e.g. add an event listener) to the subscription (sourceProp).
+    // Call callback(newValue) whenever a subscription changes.
+    sourceProp.subscribe(handleSubscriptionChange);
+
+    // Return an unsubscribe method.
+    return function unsubscribe() {
+      sourceProp.unsubscribe(handleSubscriptionChange);
+    };
+  },
+});
+
+// Rather than passing the subscribable source to our ExampleComponent,
+// We could just pass the subscribed value directly:
+<Subscription source={dataSource}>
+  {value => <ExampleComponent subscribedValue={value} />}
+</Subscription>;
+```
+
+> Note
+>
+> Libraries like Relay/Apollo should manage subscriptions manually with the same techniques as `create-subscription` uses under the hood (as referenced [here](https://gist.github.com/bvaughn/d569177d70b50b58bff69c3c4a5353f3)) in a way that is most optimized for their library usage.
+
+### Updating `state` based on `props` {/*updating-state-based-on-props*/}
+
+> Note:
+>
+> Both the older `componentWillReceiveProps` and the new `getDerivedStateFromProps` methods add significant complexity to components. This often leads to [bugs](/blog/2018/06/07/you-probably-dont-need-derived-state#common-bugs-when-using-derived-state). Consider **[simpler alternatives to derived state](/blog/2018/06/07/you-probably-dont-need-derived-state)** to make components predictable and maintainable.
+
+Here is an example of a component that uses the legacy `componentWillReceiveProps` lifecycle to update `state` based on new `props` values:
+
+```js {7-14}
+// Before
+class ExampleComponent extends React.Component {
+  state = {
+    isScrollingDown: false,
+  };
+
+  componentWillReceiveProps(nextProps) {
+    if (this.props.currentRow !== nextProps.currentRow) {
+      this.setState({
+        isScrollingDown:
+          nextProps.currentRow > this.props.currentRow,
+      });
+    }
+  }
+}
+```
+
+Although the above code is not problematic in itself, the `componentWillReceiveProps` lifecycle is often mis-used in ways that _do_ present problems. Because of this, the method will be deprecated.
+
+As of version 16.3, the recommended way to update `state` in response to `props` changes is with the new `static getDerivedStateFromProps` lifecycle. It is called when a component is created and each time it re-renders due to changes to props or state:
+
+```js {5-8,10-20}
+// After
+class ExampleComponent extends React.Component {
+  // Initialize state in constructor,
+  // Or with a property initializer.
+  state = {
+    isScrollingDown: false,
+    lastRow: null,
+  };
+
+  static getDerivedStateFromProps(props, state) {
+    if (props.currentRow !== state.lastRow) {
+      return {
+        isScrollingDown: props.currentRow > state.lastRow,
+        lastRow: props.currentRow,
+      };
+    }
+
+    // Return null to indicate no change to state.
+    return null;
+  }
+}
+```
+
+You may notice in the example above that `props.currentRow` is mirrored in state (as `state.lastRow`). This enables `getDerivedStateFromProps` to access the previous props value in the same way as is done in `componentWillReceiveProps`.
+
+You may wonder why we don't just pass previous props as a parameter to `getDerivedStateFromProps`. We considered this option when designing the API, but ultimately decided against it for two reasons:
+
+- A `prevProps` parameter would be null the first time `getDerivedStateFromProps` was called (after instantiation), requiring an if-not-null check to be added any time `prevProps` was accessed.
+- Not passing the previous props to this function is a step toward freeing up memory in future versions of React. (If React does not need to pass previous props to lifecycles, then it does not need to keep the previous `props` object in memory.)
+
+> Note
+>
+> If you're writing a shared component, the [`react-lifecycles-compat`](https://github.com/reactjs/react-lifecycles-compat) polyfill enables the new `getDerivedStateFromProps` lifecycle to be used with older versions of React as well. [Learn more about how to use it below.](#open-source-project-maintainers)
+
+### Invoking external callbacks {/*invoking-external-callbacks*/}
+
+Here is an example of a component that calls an external function when its internal state changes:
+
+```js {3-10}
+// Before
+class ExampleComponent extends React.Component {
+  componentWillUpdate(nextProps, nextState) {
+    if (
+      this.state.someStatefulValue !==
+      nextState.someStatefulValue
+    ) {
+      nextProps.onChange(nextState.someStatefulValue);
+    }
+  }
+}
+```
+
+Sometimes people use `componentWillUpdate` out of a misplaced fear that by the time `componentDidUpdate` fires, it is "too late" to update the state of other components. This is not the case. React ensures that any `setState` calls that happen during `componentDidMount` and `componentDidUpdate` are flushed before the user sees the updated UI. In general, it is better to avoid cascading updates like this, but in some cases they are necessary (for example, if you need to position a tooltip after measuring the rendered DOM element).
+
+Either way, it is unsafe to use `componentWillUpdate` for this purpose in async mode, because the external callback might get called multiple times for a single update. Instead, the `componentDidUpdate` lifecycle should be used since it is guaranteed to be invoked only once per update:
+
+```js {3-10}
+// After
+class ExampleComponent extends React.Component {
+  componentDidUpdate(prevProps, prevState) {
+    if (
+      this.state.someStatefulValue !==
+      prevState.someStatefulValue
+    ) {
+      this.props.onChange(this.state.someStatefulValue);
+    }
+  }
+}
+```
+
+### Side effects on props change {/*side-effects-on-props-change*/}
+
+Similar to the [example above](#invoking-external-callbacks), sometimes components have side effects when `props` change.
+
+```js {3-7}
+// Before
+class ExampleComponent extends React.Component {
+  componentWillReceiveProps(nextProps) {
+    if (this.props.isVisible !== nextProps.isVisible) {
+      logVisibleChange(nextProps.isVisible);
+    }
+  }
+}
+```
+
+Like `componentWillUpdate`, `componentWillReceiveProps` might get called multiple times for a single update. For this reason it is important to avoid putting side effects in this method. Instead, `componentDidUpdate` should be used since it is guaranteed to be invoked only once per update:
+
+```js {3-7}
+// After
+class ExampleComponent extends React.Component {
+  componentDidUpdate(prevProps, prevState) {
+    if (this.props.isVisible !== prevProps.isVisible) {
+      logVisibleChange(this.props.isVisible);
+    }
+  }
+}
+```
+
+### Fetching external data when `props` change {/*fetching-external-data-when-props-change*/}
+
+Here is an example of a component that fetches external data based on `props` values:
+
+```js {11-16}
+// Before
+class ExampleComponent extends React.Component {
+  state = {
+    externalData: null,
+  };
+
+  componentDidMount() {
+    this._loadAsyncData(this.props.id);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.id !== this.props.id) {
+      this.setState({externalData: null});
+      this._loadAsyncData(nextProps.id);
+    }
+  }
+
+  componentWillUnmount() {
+    if (this._asyncRequest) {
+      this._asyncRequest.cancel();
+    }
+  }
+
+  render() {
+    if (this.state.externalData === null) {
+      // Render loading state ...
+    } else {
+      // Render real UI ...
+    }
+  }
+
+  _loadAsyncData(id) {
+    this._asyncRequest = loadMyAsyncData(id).then(
+      externalData => {
+        this._asyncRequest = null;
+        this.setState({externalData});
+      }
+    );
+  }
+}
+```
+
+The recommended upgrade path for this component is to move data updates into `componentDidUpdate`. You can also use the new `getDerivedStateFromProps` lifecycle to clear stale data before rendering the new props:
+
+```js {7-19}
+// After
+class ExampleComponent extends React.Component {
+  state = {
+    externalData: null,
+  };
+
+  static getDerivedStateFromProps(props, state) {
+    // Store prevId in state so we can compare when props change.
+    // Clear out previously-loaded data (so we don't render stale stuff).
+    if (props.id !== state.prevId) {
+      return {
+        externalData: null,
+        prevId: props.id,
+      };
+    }
+
+    // No state update necessary
+    return null;
+  }
+
+  componentDidMount() {
+    this._loadAsyncData(this.props.id);
+  }
+
+  // highlight-range{1-5}
+  componentDidUpdate(prevProps, prevState) {
+    if (this.state.externalData === null) {
+      this._loadAsyncData(this.props.id);
+    }
+  }
+
+  componentWillUnmount() {
+    if (this._asyncRequest) {
+      this._asyncRequest.cancel();
+    }
+  }
+
+  render() {
+    if (this.state.externalData === null) {
+      // Render loading state ...
+    } else {
+      // Render real UI ...
+    }
+  }
+
+  _loadAsyncData(id) {
+    this._asyncRequest = loadMyAsyncData(id).then(
+      externalData => {
+        this._asyncRequest = null;
+        this.setState({externalData});
+      }
+    );
+  }
+}
+```
+
+> Note
+>
+> If you're using an HTTP library that supports cancellation, like [axios](https://www.npmjs.com/package/axios), then it's simple to cancel an in-progress request when unmounting. For native Promises, you can use an approach like [the one shown here](https://gist.github.com/bvaughn/982ab689a41097237f6e9860db7ca8d6).
+
+### Reading DOM properties before an update {/*reading-dom-properties-before-an-update*/}
+
+Here is an example of a component that reads a property from the DOM before an update in order to maintain scroll position within a list:
+
+```js {5-12,14-23}
+class ScrollingList extends React.Component {
+  listRef = null;
+  previousScrollOffset = null;
+
+  componentWillUpdate(nextProps, nextState) {
+    // Are we adding new items to the list?
+    // Capture the scroll position so we can adjust scroll later.
+    if (this.props.list.length < nextProps.list.length) {
+      this.previousScrollOffset =
+        this.listRef.scrollHeight - this.listRef.scrollTop;
+    }
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    // If previousScrollOffset is set, we've just added new items.
+    // Adjust scroll so these new items don't push the old ones out of view.
+    if (this.previousScrollOffset !== null) {
+      this.listRef.scrollTop =
+        this.listRef.scrollHeight -
+        this.previousScrollOffset;
+      this.previousScrollOffset = null;
+    }
+  }
+
+  render() {
+    return (
+      <div ref={this.setListRef}>
+        {/* ...contents... */}
+      </div>
+    );
+  }
+
+  setListRef = ref => {
+    this.listRef = ref;
+  };
+}
+```
+
+In the above example, `componentWillUpdate` is used to read the DOM property. However with async rendering, there may be delays between "render" phase lifecycles (like `componentWillUpdate` and `render`) and "commit" phase lifecycles (like `componentDidUpdate`). If the user does something like resize the window during this time, the `scrollHeight` value read from `componentWillUpdate` will be stale.
+
+The solution to this problem is to use the new "commit" phase lifecycle, `getSnapshotBeforeUpdate`. This method gets called _immediately before_ mutations are made (e.g. before the DOM is updated). It can return a value for React to pass as a parameter to `componentDidUpdate`, which gets called _immediately after_ mutations.
+
+The two lifecycles can be used together like this:
+
+```js {4-13,15-23}
+class ScrollingList extends React.Component {
+  listRef = null;
+
+  getSnapshotBeforeUpdate(prevProps, prevState) {
+    // Are we adding new items to the list?
+    // Capture the scroll position so we can adjust scroll later.
+    if (prevProps.list.length < this.props.list.length) {
+      return (
+        this.listRef.scrollHeight - this.listRef.scrollTop
+      );
+    }
+    return null;
+  }
+
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    // If we have a snapshot value, we've just added new items.
+    // Adjust scroll so these new items don't push the old ones out of view.
+    // (snapshot here is the value returned from getSnapshotBeforeUpdate)
+    if (snapshot !== null) {
+      this.listRef.scrollTop =
+        this.listRef.scrollHeight - snapshot;
+    }
+  }
+
+  render() {
+    return (
+      <div ref={this.setListRef}>
+        {/* ...contents... */}
+      </div>
+    );
+  }
+
+  setListRef = ref => {
+    this.listRef = ref;
+  };
+}
+```
+
+> Note
+>
+> If you're writing a shared component, the [`react-lifecycles-compat`](https://github.com/reactjs/react-lifecycles-compat) polyfill enables the new `getSnapshotBeforeUpdate` lifecycle to be used with older versions of React as well. [Learn more about how to use it below.](#open-source-project-maintainers)
+
+## Other scenarios {/*other-scenarios*/}
+
+While we tried to cover the most common use cases in this post, we recognize that we might have missed some of them. If you are using `componentWillMount`, `componentWillUpdate`, or `componentWillReceiveProps` in ways that aren't covered by this blog post, and aren't sure how to migrate off these legacy lifecycles, please [file a new issue against our documentation](https://github.com/reactjs/reactjs.org/issues/new) with your code examples and as much background information as you can provide. We will update this document with new alternative patterns as they come up.
+
+## Open source project maintainers {/*open-source-project-maintainers*/}
+
+Open source maintainers might be wondering what these changes mean for shared components. If you implement the above suggestions, what happens with components that depend on the new static `getDerivedStateFromProps` lifecycle? Do you also have to release a new major version and drop compatibility for React 16.2 and older?
+
+Fortunately, you do not!
+
+When React 16.3 is published, we'll also publish a new npm package, [`react-lifecycles-compat`](https://github.com/reactjs/react-lifecycles-compat). This package polyfills components so that the new `getDerivedStateFromProps` and `getSnapshotBeforeUpdate` lifecycles will also work with older versions of React (0.14.9+).
+
+To use this polyfill, first add it as a dependency to your library:
+
+```bash
+# Yarn
+yarn add react-lifecycles-compat
+
+# NPM
+npm install react-lifecycles-compat --save
+```
+
+Next, update your components to use the new lifecycles (as described above).
+
+Lastly, use the polyfill to make your component backwards compatible with older versions of React:
+
+```js {2,5,11}
+import React from 'react';
+import {polyfill} from 'react-lifecycles-compat';
+
+class ExampleComponent extends React.Component {
+  static getDerivedStateFromProps(props, state) {
+    // Your state update logic here ...
+  }
+}
+
+// Polyfill your component to work with older versions of React:
+polyfill(ExampleComponent);
+
+export default ExampleComponent;
+```
\ No newline at end of file
diff --git a/beta/src/content/blog/2018/03/29/react-v-16-3.md b/beta/src/content/blog/2018/03/29/react-v-16-3.md
new file mode 100644
index 000000000..ddad5d4e8
--- /dev/null
+++ b/beta/src/content/blog/2018/03/29/react-v-16-3.md
@@ -0,0 +1,148 @@
+---
+title: 'React v16.3.0: New lifecycles and context API'
+author: [bvaughn]
+---
+
+A few days ago, we [wrote a post about upcoming changes to our legacy lifecycle methods](/blog/2018/03/27/update-on-async-rendering), including gradual migration strategies. In React 16.3.0, we are adding a few new lifecycle methods to assist with that migration. We are also introducing new APIs for long requested features: an official context API, a ref forwarding API, and an ergonomic ref API.
+
+Read on to learn more about the release.
+
+## Official Context API {/*official-context-api*/}
+
+For many years, React has offered an experimental API for context. Although it was a powerful tool, its use was discouraged because of inherent problems in the API, and because we always intended to replace the experimental API with a better one.
+
+Version 16.3 introduces a new context API that is more efficient and supports both static type checking and deep updates.
+
+> **Note**
+>
+> The old context API will keep working for all React 16.x releases, so you will have time to migrate.
+
+Here is an example illustrating how you might inject a "theme" using the new context API:
+
+```js {1,8-10,18-20}
+const ThemeContext = React.createContext('light');
+
+class ThemeProvider extends React.Component {
+  state = {theme: 'light'};
+
+  render() {
+    return (
+      <ThemeContext.Provider value={this.state.theme}>
+        {this.props.children}
+      </ThemeContext.Provider>
+    );
+  }
+}
+
+class ThemedButton extends React.Component {
+  render() {
+    return (
+      <ThemeContext.Consumer>
+        {theme => <Button theme={theme} />}
+      </ThemeContext.Consumer>
+    );
+  }
+}
+```
+
+[Learn more about the new context API here.](/docs/context)
+
+## `createRef` API {/*createref-api*/}
+
+Previously, React provided two ways of managing refs: the legacy string ref API and the callback API. Although the string ref API was the more convenient of the two, it had [several downsides](https://github.com/facebook/react/issues/1373) and so our official recommendation was to use the callback form instead.
+
+Version 16.3 adds a new option for managing refs that offers the convenience of a string ref without any of the downsides:
+
+```js {4,8,12}
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.inputRef = React.createRef();
+  }
+
+  render() {
+    return <input type="text" ref={this.inputRef} />;
+  }
+
+  componentDidMount() {
+    this.inputRef.current.focus();
+  }
+}
+```
+
+> **Note:**
+>
+> Callback refs will continue to be supported in addition to the new `createRef` API.
+>
+> You don't need to replace callback refs in your components. They are slightly more flexible, so they will remain as an advanced feature.
+
+[Learn more about the new `createRef` API here.](/docs/refs-and-the-dom)
+
+## `forwardRef` API {/*forwardref-api*/}
+
+Generally, React components are declarative, but sometimes imperative access to the component instances and the underlying DOM nodes is necessary. This is common for use cases like managing focus, selection, or animations. React provides [refs](/docs/refs-and-the-dom) as a way to solve this problem. However, component encapsulation poses some challenges with refs.
+
+For example, if you replace a `<button>` with a custom `<FancyButton>` component, the `ref` attribute on it will start pointing at the wrapper component instead of the DOM node (and would be `null` for function components). While this is desirable for "application-level" components like `FeedStory` or `Comment` that need to be encapsulated, it can be annoying for "leaf" components such as `FancyButton` or `MyTextInput` that are typically used like their DOM counterparts, and might need to expose their DOM nodes.
+
+Ref forwarding is a new opt-in feature that lets some components take a `ref` they receive, and pass it further down (in other words, "forward" it) to a child. In the example below, `FancyButton` forwards its ref to a DOM `button` that it renders:
+
+```js {1,2}
+const FancyButton = React.forwardRef((props, ref) => (
+  <button ref={ref} className="FancyButton">
+    {props.children}
+  </button>
+));
+
+// You can now get a ref directly to the DOM button:
+const ref = React.createRef();
+<FancyButton ref={ref}>Click me!</FancyButton>;
+```
+
+This way, components using `FancyButton` can get a ref to the underlying `button` DOM node and access it if necessary—just like if they used a DOM `button` directly.
+
+Ref forwarding is not limited to "leaf" components that render DOM nodes. If you write [higher order components](/docs/higher-order-components), we recommend using ref forwarding to automatically pass the ref down to the wrapped class component instances.
+
+[Learn more about the forwardRef API here.](/docs/forwarding-refs)
+
+## Component Lifecycle Changes {/*component-lifecycle-changes*/}
+
+React's class component API has been around for years with little change. However, as we add support for more advanced features (such as [error boundaries](/docs/react-component#componentdidcatch) and the upcoming [async rendering mode](/blog/2018/03/01/sneak-peek-beyond-react-16)) we stretch this model in ways that it was not originally intended.
+
+For example, with the current API, it is too easy to block the initial render with non-essential logic. In part this is because there are too many ways to accomplish a given task, and it can be unclear which is best. We've observed that the interrupting behavior of error handling is often not taken into consideration and can result in memory leaks (something that will also impact the upcoming async rendering mode). The current class component API also complicates other efforts, like our work on [prototyping a React compiler](https://twitter.com/trueadm/status/944908776896978946).
+
+Many of these issues are exacerbated by a subset of the component lifecycles (`componentWillMount`, `componentWillReceiveProps`, and `componentWillUpdate`). These also happen to be the lifecycles that cause the most confusion within the React community. For these reasons, we are going to deprecate those methods in favor of better alternatives.
+
+We recognize that this change will impact many existing components. Because of this, the migration path will be as gradual as possible, and will provide escape hatches. (At Facebook, we maintain more than 50,000 React components. We depend on a gradual release cycle too!)
+
+> **Note:**
+>
+> Deprecation warnings will be enabled with a future 16.x release, **but the legacy lifecycles will continue to work until version 17**.
+>
+> Even in version 17, it will still be possible to use them, but they will be aliased with an "UNSAFE\_" prefix to indicate that they might cause issues. We have also prepared an [automated script to rename them](https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles) in existing code.
+
+In addition to deprecating unsafe lifecycles, we are also adding a couple of new lifecyles:
+
+- [`getDerivedStateFromProps`](/docs/react-component#static-getderivedstatefromprops) is being added as a safer alternative to the legacy `componentWillReceiveProps`. (Note that [in most cases you don't need either of them](/blog/2018/06/07/you-probably-dont-need-derived-state).)
+- [`getSnapshotBeforeUpdate`](/docs/react-component#getsnapshotbeforeupdate) is being added to support safely reading properties from e.g. the DOM before updates are made.
+
+[Learn more about these lifecycle changes here.](/blog/2018/03/27/update-on-async-rendering)
+
+## `StrictMode` Component {/*strictmode-component*/}
+
+`StrictMode` is a tool for highlighting potential problems in an application. Like `Fragment`, `StrictMode` does not render any visible UI. It activates additional checks and warnings for its descendants.
+
+> **Note:**
+>
+> `StrictMode` checks are run in development mode only; _they do not impact the production build_.
+
+Although it is not possible for strict mode to catch all problems (e.g. certain types of mutation), it can help with many. If you see warnings in strict mode, those things will likely cause bugs for async rendering.
+
+In version 16.3, `StrictMode` helps with:
+
+- Identifying components with unsafe lifecycles
+- Warning about legacy string ref API usage
+- Detecting unexpected side effects
+
+Additional functionality will be added with future releases of React.
+
+[Learn more about the `StrictMode` component here.](/docs/strict-mode)
diff --git a/beta/src/content/blog/2018/05/23/react-v-16-4.md b/beta/src/content/blog/2018/05/23/react-v-16-4.md
new file mode 100644
index 000000000..a40bff546
--- /dev/null
+++ b/beta/src/content/blog/2018/05/23/react-v-16-4.md
@@ -0,0 +1,149 @@
+---
+title: 'React v16.4.0: Pointer Events'
+author: [acdlite]
+---
+
+The latest minor release adds support for an oft-requested feature: pointer events!
+
+It also includes a bugfix for `getDerivedStateFromProps`. Check out the full [changelog](#changelog) below.
+
+## Pointer Events {/*pointer-events*/}
+
+The following event types are now available in React DOM:
+
+- `onPointerDown`
+- `onPointerMove`
+- `onPointerUp`
+- `onPointerCancel`
+- `onGotPointerCapture`
+- `onLostPointerCapture`
+- `onPointerEnter`
+- `onPointerLeave`
+- `onPointerOver`
+- `onPointerOut`
+
+Please note that these events will only work in browsers that support the [Pointer Events](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events) specification. (At the time of this writing, this includes the latest versions of Chrome, Firefox, Edge, and Internet Explorer.) If your application depends on pointer events, we recommend using a third-party pointer events polyfill. We have opted not to include such a polyfill in React DOM, to avoid an increase in bundle size.
+
+[Check out this example on CodeSandbox.](codesandbox://16-4-release-blog-post/pointer-events-example)
+
+Huge thanks to [Philipp Spiess](https://github.com/philipp-spiess) for contributing this change!
+
+## Bugfix for `getDerivedStateFromProps` {/*bugfix-for-getderivedstatefromprops*/}
+
+`getDerivedStateFromProps` is now called every time a component is rendered, regardless of the cause of the update. Previously, it was only called if the component was re-rendered by its parent, and would not fire as the result of a local `setState`. This was an oversight in the initial implementation that has now been corrected. The previous behavior was more similar to `componentWillReceiveProps`, but the improved behavior ensures compatibility with React's upcoming asynchronous rendering mode.
+
+**This bug fix will not affect most apps**, but it may cause issues with a small fraction of components. The rare cases where it does matter fall into one of two categories:
+
+### 1. Avoid Side Effects in `getDerivedStateFromProps` {/*1-avoid-side-effects-in-getderivedstatefromprops*/}
+
+Like the render method, `getDerivedStateFromProps` should be a pure function of props and state. Side effects in `getDerivedStateFromProps` were never supported, but since it now fires more often than it used to, the recent change may expose previously undiscovered bugs.
+
+Side effectful code should be moved to other methods: for example, Flux dispatches typically belong inside the originating event handler, and manual DOM mutations belong inside componentDidMount or componentDidUpdate. You can read more about this in our recent post about [preparing for asynchronous rendering](/blog/2018/03/27/update-on-async-rendering).
+
+### 2. Compare Incoming Props to Previous Props When Computing Controlled Values {/*2-compare-incoming-props-to-previous-props-when-computing-controlled-values*/}
+
+The following code assumes `getDerivedStateFromProps` only fires on prop changes:
+
+```js
+static getDerivedStateFromProps(props, state) {
+  if (props.value !== state.controlledValue) {
+    return {
+      // Since this method fires on both props and state changes, local updates
+      // to the controlled value will be ignored, because the props version
+      // always overrides it. Oops!
+      controlledValue: props.value,
+    };
+  }
+  return null;
+}
+```
+
+One possible way to fix this is to compare the incoming value to the previous value by storing the previous props in state:
+
+```js
+static getDerivedStateFromProps(props, state) {
+  const prevProps = state.prevProps || {};
+  // Compare the incoming prop to previous prop
+  const controlledValue =
+    prevProps.value !== props.value
+      ? props.value
+      : state.controlledValue;
+  return {
+    // Store the previous props in state
+    prevProps: props,
+    controlledValue,
+  };
+}
+```
+
+However, **code that "mirrors" props in state usually contains bugs**, whether you use the newer `getDerivedStateFromProps` or the legacy `componentWillReceiveProps`. We published a follow-up blog post that explains these problems in more detail, and suggests [simpler solutions that don't involve `getDerivedStateFromProps()`](/blog/2018/06/07/you-probably-dont-need-derived-state).
+
+## Installation {/*installation*/}
+
+React v16.4.0 is available on the npm registry.
+
+To install React 16 with Yarn, run:
+
+```bash
+yarn add react@^16.4.0 react-dom@^16.4.0
+```
+
+To install React 16 with npm, run:
+
+```bash
+npm install --save react@^16.4.0 react-dom@^16.4.0
+```
+
+We also provide UMD builds of React via a CDN:
+
+```html
+<script
+  crossorigin
+  src="https://unpkg.com/react@16/umd/react.production.min.js"
+></script>
+<script
+  crossorigin
+  src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"
+></script>
+```
+
+Refer to the documentation for [detailed installation instructions](/docs/installation).
+
+## Changelog {/*changelog*/}
+
+### React {/*react*/}
+
+- Add a new [experimental](https://github.com/reactjs/rfcs/pull/51) `React.unstable_Profiler` component for measuring performance. ([@bvaughn](https://github.com/bvaughn) in [#12745](https://github.com/facebook/react/pull/12745))
+
+### React DOM {/*react-dom*/}
+
+- Add support for the Pointer Events specification. ([@philipp-spiess](https://github.com/philipp-spiess) in [#12507](https://github.com/facebook/react/pull/12507))
+- Properly call `getDerivedStateFromProps()` regardless of the reason for re-rendering. ([@acdlite](https://github.com/acdlite) in [#12600](https://github.com/facebook/react/pull/12600) and [#12802](https://github.com/facebook/react/pull/12802))
+- Fix a bug that prevented context propagation in some cases. ([@gaearon](https://github.com/gaearon) in [#12708](https://github.com/facebook/react/pull/12708))
+- Fix re-rendering of components using `forwardRef()` on a deeper `setState()`. ([@gaearon](https://github.com/gaearon) in [#12690](https://github.com/facebook/react/pull/12690))
+- Fix some attributes incorrectly getting removed from custom element nodes. ([@airamrguez](https://github.com/airamrguez) in [#12702](https://github.com/facebook/react/pull/12702))
+- Fix context providers to not bail out on children if there's a legacy context provider above. ([@gaearon](https://github.com/gaearon) in [#12586](https://github.com/facebook/react/pull/12586))
+- Add the ability to specify `propTypes` on a context provider component. ([@nicolevy](https://github.com/nicolevy) in [#12658](https://github.com/facebook/react/pull/12658))
+- Fix a false positive warning when using `react-lifecycles-compat` in `<StrictMode>`. ([@bvaughn](https://github.com/bvaughn) in [#12644](https://github.com/facebook/react/pull/12644))
+- Warn when the `forwardRef()` render function has `propTypes` or `defaultProps`. ([@bvaughn](https://github.com/bvaughn) in [#12644](https://github.com/facebook/react/pull/12644))
+- Improve how `forwardRef()` and context consumers are displayed in the component stack. ([@sophiebits](https://github.com/sophiebits) in [#12777](https://github.com/facebook/react/pull/12777))
+- Change internal event names. This can break third-party packages that rely on React internals in unsupported ways. ([@philipp-spiess](https://github.com/philipp-spiess) in [#12629](https://github.com/facebook/react/pull/12629))
+
+### React Test Renderer {/*react-test-renderer*/}
+
+- Fix the `getDerivedStateFromProps()` support to match the new React DOM behavior. ([@koba04](https://github.com/koba04) in [#12676](https://github.com/facebook/react/pull/12676))
+- Fix a `testInstance.parent` crash when the parent is a fragment or another special node. ([@gaearon](https://github.com/gaearon) in [#12813](https://github.com/facebook/react/pull/12813))
+- `forwardRef()` components are now discoverable by the test renderer traversal methods. ([@gaearon](https://github.com/gaearon) in [#12725](https://github.com/facebook/react/pull/12725))
+- Shallow renderer now ignores `setState()` updaters that return `null` or `undefined`. ([@koba04](https://github.com/koba04) in [#12756](https://github.com/facebook/react/pull/12756))
+
+### React ART {/*react-art*/}
+
+- Fix reading context provided from the tree managed by React DOM. ([@acdlite](https://github.com/acdlite) in [#12779](https://github.com/facebook/react/pull/12779))
+
+### React Call Return (Experimental) {/*react-call-return-experimental*/}
+
+- This experiment was deleted because it was affecting the bundle size and the API wasn't good enough. It's likely to come back in the future in some other form. ([@gaearon](https://github.com/gaearon) in [#12820](https://github.com/facebook/react/pull/12820))
+
+### React Reconciler (Experimental) {/*react-reconciler-experimental*/}
+
+- The [new host config shape](https://github.com/facebook/react/blob/c601f7a64640290af85c9f0e33c78480656b46bc/packages/react-noop-renderer/src/createReactNoop.js#L82-L285) is flat and doesn't use nested objects. ([@gaearon](https://github.com/gaearon) in [#12792](https://github.com/facebook/react/pull/12792))
diff --git a/beta/src/content/blog/2018/06/07/you-probably-dont-need-derived-state.md b/beta/src/content/blog/2018/06/07/you-probably-dont-need-derived-state.md
new file mode 100644
index 000000000..13e1652f2
--- /dev/null
+++ b/beta/src/content/blog/2018/06/07/you-probably-dont-need-derived-state.md
@@ -0,0 +1,362 @@
+---
+title: "You Probably Don't Need Derived State"
+author: [bvaughn]
+---
+
+React 16.4 included a [bugfix for getDerivedStateFromProps](/blog/2018/05/23/react-v-16-4#bugfix-for-getderivedstatefromprops) which caused some existing bugs in React components to reproduce more consistently. If this release exposed a case where your application was using an anti-pattern and didn't work properly after the fix, we're sorry for the churn. In this post, we will explain some common anti-patterns with derived state and our preferred alternatives.
+
+For a long time, the lifecycle `componentWillReceiveProps` was the only way to update state in response to a change in props without an additional render. In version 16.3, [we introduced a replacement lifecycle, `getDerivedStateFromProps`](/blog/2018/03/29/react-v-16-3#component-lifecycle-changes) to solve the same use cases in a safer way. At the same time, we've realized that people have many misconceptions about how to use both methods, and we've found anti-patterns that result in subtle and confusing bugs. The `getDerivedStateFromProps` bugfix in 16.4 [makes derived state more predictable](https://github.com/facebook/react/issues/12898), so the results of misusing it are easier to notice.
+
+> Note
+>
+> All of the anti-patterns described in this post apply to both the older `componentWillReceiveProps` and the newer `getDerivedStateFromProps`.
+
+This blog post will cover the following topics:
+
+- [When to use derived state](#when-to-use-derived-state)
+- [Common bugs when using derived state](#common-bugs-when-using-derived-state)
+  - [Anti-pattern: Unconditionally copying props to state](#anti-pattern-unconditionally-copying-props-to-state)
+  - [Anti-pattern: Erasing state when props change](#anti-pattern-erasing-state-when-props-change)
+- [Preferred solutions](#preferred-solutions)
+- [What about memoization?](#what-about-memoization)
+
+## When to Use Derived State {/*when-to-use-derived-state*/}
+
+`getDerivedStateFromProps` exists for only one purpose. It enables a component to update its internal state as the result of **changes in props**. Our previous blog post provided some examples, like [recording the current scroll direction based on a changing offset prop](/blog/2018/03/27/update-on-async-rendering#updating-state-based-on-props) or [loading external data specified by a source prop](/blog/2018/03/27/update-on-async-rendering#fetching-external-data-when-props-change).
+
+We did not provide many examples, because as a general rule, **derived state should be used sparingly**. All problems with derived state that we have seen can be ultimately reduced to either (1) unconditionally updating state from props or (2) updating state whenever props and state don't match. (We'll go over both in more detail below.)
+
+- If you're using derived state to memoize some computation based only on the current props, you don't need derived state. See [What about memoization?](#what-about-memoization) below.
+- If you're updating derived state unconditionally or updating it whenever props and state don't match, your component likely resets its state too frequently. Read on for more details.
+
+## Common Bugs When Using Derived State {/*common-bugs-when-using-derived-state*/}
+
+The terms ["controlled"](/docs/forms#controlled-components) and ["uncontrolled"](/docs/uncontrolled-components) usually refer to form inputs, but they can also describe where any component's data lives. Data passed in as props can be thought of as **controlled** (because the parent component _controls_ that data). Data that exists only in internal state can be thought of as **uncontrolled** (because the parent can't directly change it).
+
+The most common mistake with derived state is mixing these two; when a derived state value is also updated by `setState` calls, there isn't a single source of truth for the data. The [external data loading example](/blog/2018/03/27/update-on-async-rendering#fetching-external-data-when-props-change) mentioned above may sound similar, but it's different in a few important ways. In the loading example, there is a clear source of truth for both the "source" prop and the "loading" state. When the source prop changes, the loading state should **always** be overridden. Conversely, the state is overridden only when the prop **changes** and is otherwise managed by the component.
+
+Problems arise when any of these constraints are changed. This typically comes in two forms. Let's take a look at both.
+
+### Anti-pattern: Unconditionally copying props to state {/*anti-pattern-unconditionally-copying-props-to-state*/}
+
+A common misconception is that `getDerivedStateFromProps` and `componentWillReceiveProps` are only called when props "change". These lifecycles are called any time a parent component rerenders, regardless of whether the props are "different" from before. Because of this, it has always been unsafe to _unconditionally_ override state using either of these lifecycles. **Doing so will cause state updates to be lost.**
+
+Let’s consider an example to demonstrate the problem. Here is an `EmailInput` component that "mirrors" an email prop in state:
+
+```js
+class EmailInput extends Component {
+  state = {email: this.props.email};
+
+  render() {
+    return <input onChange={this.handleChange} value={this.state.email} />;
+  }
+
+  handleChange = (event) => {
+    this.setState({email: event.target.value});
+  };
+
+  componentWillReceiveProps(nextProps) {
+    // This will erase any local state updates!
+    // Do not do this.
+    this.setState({email: nextProps.email});
+  }
+}
+```
+
+At first, this component might look okay. State is initialized to the value specified by props and updated when we type into the `<input>`. But if our component's parent rerenders, anything we've typed into the `<input>` will be lost! ([See this demo for an example.](https://codesandbox.io/s/m3w9zn1z8x)) This holds true even if we were to compare `nextProps.email !== this.state.email` before resetting.
+
+In this simple example, adding `shouldComponentUpdate` to rerender only when the email prop has changed could fix this. However in practice, components usually accept multiple props; another prop changing would still cause a rerender and improper reset. Function and object props are also often created inline, making it hard to implement a `shouldComponentUpdate` that reliably returns true only when a material change has happened. [Here is a demo that shows that happening.](https://codesandbox.io/s/jl0w6r9w59) As a result, `shouldComponentUpdate` is best used as a performance optimization, not to ensure correctness of derived state.
+
+Hopefully it's clear by now why **it is a bad idea to unconditionally copy props to state**. Before reviewing possible solutions, let's look at a related problematic pattern: what if we were to only update the state when the email prop changes?
+
+### Anti-pattern: Erasing state when props change {/*anti-pattern-erasing-state-when-props-change*/}
+
+Continuing the example above, we could avoid accidentally erasing state by only updating it when `props.email` changes:
+
+```js
+class EmailInput extends Component {
+  state = {
+    email: this.props.email,
+  };
+
+  componentWillReceiveProps(nextProps) {
+    // Any time props.email changes, update state.
+    if (nextProps.email !== this.props.email) {
+      this.setState({
+        email: nextProps.email,
+      });
+    }
+  }
+
+  // ...
+}
+```
+
+> Note
+>
+> Even though the example above shows `componentWillReceiveProps`, the same anti-pattern applies to `getDerivedStateFromProps`.
+
+We've just made a big improvement. Now our component will erase what we've typed only when the props actually change.
+
+There is still a subtle problem. Imagine a password manager app using the above input component. When navigating between details for two accounts with the same email, the input would fail to reset. This is because the prop value passed to the component would be the same for both accounts! This would be a surprise to the user, as an unsaved change to one account would appear to affect other accounts that happened to share the same email. ([See demo here.](https://codesandbox.io/s/mz2lnkjkrx))
+
+This design is fundamentally flawed, but it's also an easy mistake to make. ([I've made it myself!](https://twitter.com/brian_d_vaughn/status/959600888242307072)) Fortunately there are two alternatives that work better. The key to both is that **for any piece of data, you need to pick a single component that owns it as the source of truth, and avoid duplicating it in other components.** Let's take a look at each of the alternatives.
+
+## Preferred Solutions {/*preferred-solutions*/}
+
+### Recommendation: Fully controlled component {/*recommendation-fully-controlled-component*/}
+
+One way to avoid the problems mentioned above is to remove state from our component entirely. If the email address only exists as a prop, then we don't have to worry about conflicts with state. We could even convert `EmailInput` to a lighter-weight function component:
+
+```js
+function EmailInput(props) {
+  return <input onChange={props.onChange} value={props.email} />;
+}
+```
+
+This approach simplifies the implementation of our component, but if we still want to store a draft value, the parent form component will now need to do that manually. ([Click here to see a demo of this pattern.](https://codesandbox.io/s/7154w1l551))
+
+### Recommendation: Fully uncontrolled component with a `key` {/*recommendation-fully-uncontrolled-component-with-a-key*/}
+
+Another alternative would be for our component to fully own the "draft" email state. In that case, our component could still accept a prop for the _initial_ value, but it would ignore subsequent changes to that prop:
+
+```js
+class EmailInput extends Component {
+  state = {email: this.props.defaultEmail};
+
+  handleChange = (event) => {
+    this.setState({email: event.target.value});
+  };
+
+  render() {
+    return <input onChange={this.handleChange} value={this.state.email} />;
+  }
+}
+```
+
+In order to reset the value when moving to a different item (as in our password manager scenario), we can use the special React attribute called `key`. When a `key` changes, React will [_create_ a new component instance rather than _update_ the current one](/docs/reconciliation#keys). Keys are usually used for dynamic lists but are also useful here. In our case, we could use the user ID to recreate the email input any time a new user is selected:
+
+```js
+<EmailInput defaultEmail={this.props.user.email} key={this.props.user.id} />
+```
+
+Each time the ID changes, the `EmailInput` will be recreated and its state will be reset to the latest `defaultEmail` value. ([Click here to see a demo of this pattern.](https://codesandbox.io/s/6v1znlxyxn)) With this approach, you don't have to add `key` to every input. It might make more sense to put a `key` on the whole form instead. Every time the key changes, all components within the form will be recreated with a freshly initialized state.
+
+In most cases, this is the best way to handle state that needs to be reset.
+
+> Note
+>
+> While this may sound slow, the performance difference is usually insignificant. Using a key can even be faster if the components have heavy logic that runs on updates since diffing gets bypassed for that subtree.
+
+#### Alternative 1: Reset uncontrolled component with an ID prop {/*alternative-1-reset-uncontrolled-component-with-an-id-prop*/}
+
+If `key` doesn't work for some reason (perhaps the component is very expensive to initialize), a workable but cumbersome solution would be to watch for changes to "userID" in `getDerivedStateFromProps`:
+
+```js
+class EmailInput extends Component {
+  state = {
+    email: this.props.defaultEmail,
+    prevPropsUserID: this.props.userID,
+  };
+
+  static getDerivedStateFromProps(props, state) {
+    // Any time the current user changes,
+    // Reset any parts of state that are tied to that user.
+    // In this simple example, that's just the email.
+    if (props.userID !== state.prevPropsUserID) {
+      return {
+        prevPropsUserID: props.userID,
+        email: props.defaultEmail,
+      };
+    }
+    return null;
+  }
+
+  // ...
+}
+```
+
+This also provides the flexibility to only reset parts of our component's internal state if we so choose. ([Click here to see a demo of this pattern.](https://codesandbox.io/s/rjyvp7l3rq))
+
+> Note
+>
+> Even though the example above shows `getDerivedStateFromProps`, the same technique can be used with `componentWillReceiveProps`.
+
+#### Alternative 2: Reset uncontrolled component with an instance method {/*alternative-2-reset-uncontrolled-component-with-an-instance-method*/}
+
+More rarely, you may need to reset state even if there's no appropriate ID to use as `key`. One solution is to reset the key to a random value or autoincrementing number each time you want to reset. One other viable alternative is to expose an instance method to imperatively reset the internal state:
+
+```js
+class EmailInput extends Component {
+  state = {
+    email: this.props.defaultEmail,
+  };
+
+  resetEmailForNewUser(newEmail) {
+    this.setState({email: newEmail});
+  }
+
+  // ...
+}
+```
+
+The parent form component could then [use a `ref` to call this method](/docs/glossary#refs). ([Click here to see a demo of this pattern.](https://codesandbox.io/s/l70krvpykl))
+
+Refs can be useful in certain cases like this one, but generally we recommend you use them sparingly. Even in the demo, this imperative method is nonideal because two renders will occur instead of one.
+
+---
+
+### Recap {/*recap*/}
+
+To recap, when designing a component, it is important to decide whether its data will be controlled or uncontrolled.
+
+Instead of trying to **"mirror" a prop value in state**, make the component **controlled**, and consolidate the two diverging values in the state of some parent component. For example, rather than a child accepting a "committed" `props.value` and tracking a "draft" `state.value`, have the parent manage both `state.draftValue` and `state.committedValue` and control the child's value directly. This makes the data flow more explicit and predictable.
+
+For **uncontrolled** components, if you're trying to reset state when a particular prop (usually an ID) changes, you have a few options:
+
+- **Recommendation: To reset _all internal state_, use the `key` attribute.**
+- Alternative 1: To reset _only certain state fields_, watch for changes in a special property (e.g. `props.userID`).
+- Alternative 2: You can also consider fall back to an imperative instance method using refs.
+
+## What about memoization? {/*what-about-memoization*/}
+
+We've also seen derived state used to ensure an expensive value used in `render` is recomputed only when the inputs change. This technique is known as [memoization](https://en.wikipedia.org/wiki/Memoization).
+
+Using derived state for memoization isn't necessarily bad, but it's usually not the best solution. There is inherent complexity in managing derived state, and this complexity increases with each additional property. For example, if we add a second derived field to our component state then our implementation would need to separately track changes to both.
+
+Let's look at an example of one component that takes one prop—a list of items—and renders the items that match a search query entered by the user. We could use derived state to store the filtered list:
+
+```js
+class Example extends Component {
+  state = {
+    filterText: '',
+  };
+
+  // *******************************************************
+  // NOTE: this example is NOT the recommended approach.
+  // See the examples below for our recommendations instead.
+  // *******************************************************
+
+  static getDerivedStateFromProps(props, state) {
+    // Re-run the filter whenever the list array or filter text change.
+    // Note we need to store prevPropsList and prevFilterText to detect changes.
+    if (
+      props.list !== state.prevPropsList ||
+      state.prevFilterText !== state.filterText
+    ) {
+      return {
+        prevPropsList: props.list,
+        prevFilterText: state.filterText,
+        filteredList: props.list.filter((item) =>
+          item.text.includes(state.filterText)
+        ),
+      };
+    }
+    return null;
+  }
+
+  handleChange = (event) => {
+    this.setState({filterText: event.target.value});
+  };
+
+  render() {
+    return (
+      <Fragment>
+        <input onChange={this.handleChange} value={this.state.filterText} />
+        <ul>
+          {this.state.filteredList.map((item) => (
+            <li key={item.id}>{item.text}</li>
+          ))}
+        </ul>
+      </Fragment>
+    );
+  }
+}
+```
+
+This implementation avoids recalculating `filteredList` more often than necessary. But it is more complicated than it needs to be, because it has to separately track and detect changes in both props and state in order to properly update the filtered list. In this example, we could simplify things by using `PureComponent` and moving the filter operation into the render method:
+
+```js
+// PureComponents only rerender if at least one state or prop value changes.
+// Change is determined by doing a shallow comparison of state and prop keys.
+class Example extends PureComponent {
+  // State only needs to hold the current filter text value:
+  state = {
+    filterText: '',
+  };
+
+  handleChange = (event) => {
+    this.setState({filterText: event.target.value});
+  };
+
+  render() {
+    // The render method on this PureComponent is called only if
+    // props.list or state.filterText has changed.
+    const filteredList = this.props.list.filter((item) =>
+      item.text.includes(this.state.filterText)
+    );
+
+    return (
+      <Fragment>
+        <input onChange={this.handleChange} value={this.state.filterText} />
+        <ul>
+          {filteredList.map((item) => (
+            <li key={item.id}>{item.text}</li>
+          ))}
+        </ul>
+      </Fragment>
+    );
+  }
+}
+```
+
+The above approach is much cleaner and simpler than the derived state version. Occasionally, this won't be good enough—filtering may be slow for large lists, and `PureComponent` won't prevent rerenders if another prop were to change. To address both of these concerns, we could add a memoization helper to avoid unnecessarily re-filtering our list:
+
+```js
+import memoize from 'memoize-one';
+
+class Example extends Component {
+  // State only needs to hold the current filter text value:
+  state = {filterText: ''};
+
+  // Re-run the filter whenever the list array or filter text changes:
+  filter = memoize((list, filterText) =>
+    list.filter((item) => item.text.includes(filterText))
+  );
+
+  handleChange = (event) => {
+    this.setState({filterText: event.target.value});
+  };
+
+  render() {
+    // Calculate the latest filtered list. If these arguments haven't changed
+    // since the last render, `memoize-one` will reuse the last return value.
+    const filteredList = this.filter(this.props.list, this.state.filterText);
+
+    return (
+      <Fragment>
+        <input onChange={this.handleChange} value={this.state.filterText} />
+        <ul>
+          {filteredList.map((item) => (
+            <li key={item.id}>{item.text}</li>
+          ))}
+        </ul>
+      </Fragment>
+    );
+  }
+}
+```
+
+This is much simpler and performs just as well as the derived state version!
+
+When using memoization, remember a couple of constraints:
+
+1. In most cases, you'll want to **attach the memoized function to a component instance**. This prevents multiple instances of a component from resetting each other's memoized keys.
+1. Typically you'll want to use a memoization helper with a **limited cache size** in order to prevent memory leaks over time. (In the example above, we used `memoize-one` because it only caches the most recent arguments and result.)
+1. None of the implementations shown in this section will work if `props.list` is recreated each time the parent component renders. But in most cases, this setup is appropriate.
+
+## In closing {/*in-closing*/}
+
+In real world applications, components often contain a mix of controlled and uncontrolled behaviors. This is okay! If each value has a clear source of truth, you can avoid the anti-patterns mentioned above.
+
+It is also worth re-iterating that `getDerivedStateFromProps` (and derived state in general) is an advanced feature and should be used sparingly because of this complexity. If your use case falls outside of these patterns, please share it with us on [GitHub](https://github.com/reactjs/reactjs.org/issues/new) or [Twitter](https://twitter.com/reactjs)!
diff --git a/beta/src/content/blog/2018/08/01/react-v-16-4-2.md b/beta/src/content/blog/2018/08/01/react-v-16-4-2.md
new file mode 100644
index 000000000..e8a3f2cbf
--- /dev/null
+++ b/beta/src/content/blog/2018/08/01/react-v-16-4-2.md
@@ -0,0 +1,148 @@
+---
+title: "React v16.4.2: Server-side vulnerability fix"
+author: [gaearon]
+---
+
+We discovered a minor vulnerability that might affect some apps using ReactDOMServer. We are releasing a patch version for every affected React minor release so that you can upgrade with no friction. Read on for more details.
+
+## Short Description {/*short-description*/}
+
+Today, we are releasing a fix for a vulnerability we discovered in the `react-dom/server` implementation. It was introduced with the version 16.0.0 and has existed in all subsequent releases until today.
+
+This vulnerability **can only affect some server-rendered React apps.** Purely client-rendered apps are **not** affected. Additionally, we expect that most server-rendered apps don't contain the vulnerable pattern described below. Nevertheless, we recommend to follow the mitigation instructions at the earliest opportunity.
+
+While we were investigating this vulnerability, we found similar vulnerabilities in a few other popular front-end libraries. We have coordinated this release together with [Vue](https://github.com/vuejs/vue/releases/tag/v2.5.17) and [Preact](https://github.com/developit/preact-render-to-string/releases/tag/3.7.1) releases fixing the same issue. The tracking number for this vulnerability is `CVE-2018-6341`.
+
+## Mitigation {/*mitigation*/}
+
+**We have prepared a patch release with a fix for every affected minor version.**
+
+### 16.0.x {/*160x*/}
+
+If you're using `react-dom/server` with this version:
+
+- `react-dom@16.0.0`
+
+Update to this version instead:
+
+- `react-dom@16.0.1` **(contains the mitigation)**
+
+### 16.1.x {/*161x*/}
+
+If you're using `react-dom/server` with one of these versions:
+
+- `react-dom@16.1.0`
+- `react-dom@16.1.1`
+
+Update to this version instead:
+
+- `react-dom@16.1.2` **(contains the mitigation)**
+
+### 16.2.x {/*162x*/}
+
+If you're using `react-dom/server` with this version:
+
+- `react-dom@16.2.0`
+
+Update to this version instead:
+
+- `react-dom@16.2.1` **(contains the mitigation)**
+
+### 16.3.x {/*163x*/}
+
+If you're using `react-dom/server` with one of these versions:
+
+- `react-dom@16.3.0`
+- `react-dom@16.3.1`
+- `react-dom@16.3.2`
+
+Update to this version instead:
+
+- `react-dom@16.3.3` **(contains the mitigation)**
+
+### 16.4.x {/*164x*/}
+
+If you're using `react-dom/server` with one of these versions:
+
+- `react-dom@16.4.0`
+- `react-dom@16.4.1`
+
+Update to this version instead:
+
+- `react-dom@16.4.2` **(contains the mitigation)**
+
+If you're using a newer version of `react-dom`, no action is required.
+
+Note that only the `react-dom` package needs to be updated.
+
+## Detailed Description {/*detailed-description*/}
+
+Your app might be affected by this vulnerability only if both of these two conditions are true:
+
+* Your app is **being rendered to HTML using [ReactDOMServer API](/docs/react-dom-server.html)**, and
+* Your app **includes a user-supplied attribute name in an HTML tag.**
+
+Specifically, the vulnerable pattern looks like this:
+
+```js {2}
+let props = {};
+props[userProvidedData] = "hello";
+let element = <div {...props} />;
+let html = ReactDOMServer.renderToString(element);
+```
+
+In order to exploit it, the attacker would need to craft a special attribute name that triggers an [XSS](https://en.wikipedia.org/wiki/Cross-site_scripting) vulnerability. For example:
+
+```js
+let userProvidedData = '></div><script>alert("hi")</script>';
+```
+
+In the vulnerable versions of `react-dom/server`, the output would let the attacker inject arbitrary markup:
+
+```html
+<div ></div><script>alert("hi")</script>
+```
+
+In the versions after the vulnerability was [fixed](https://github.com/facebook/react/pull/13302) (and before it was introduced), attributes with invalid names are skipped:
+
+```html
+<div></div>
+```
+
+You would also see a warning about an invalid attribute name.
+
+Note that **we expect attribute names based on user input to be very rare in practice.** It doesn't serve any common practical use case, and has other potential security implications that React can't guard against.
+
+## Installation {/*installation*/}
+
+React v16.4.2 is available on the npm registry.
+
+To install React 16 with Yarn, run:
+
+```bash
+yarn add react@^16.4.2 react-dom@^16.4.2
+```
+
+To install React 16 with npm, run:
+
+```bash
+npm install --save react@^16.4.2 react-dom@^16.4.2
+```
+
+We also provide UMD builds of React via a CDN:
+
+```html
+<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
+<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
+```
+
+Refer to the documentation for [detailed installation instructions](/docs/installation.html).
+
+## Changelog {/*changelog*/}
+
+### React DOM Server {/*react-dom-server*/}
+
+* Fix a potential XSS vulnerability when the attacker controls an attribute name (`CVE-2018-6341`). This fix is available in the latest `react-dom@16.4.2`, as well as in previous affected minor versions: `react-dom@16.0.1`, `react-dom@16.1.2`, `react-dom@16.2.1`, and `react-dom@16.3.3`. ([@gaearon](https://github.com/gaearon) in [#13302](https://github.com/facebook/react/pull/13302))
+
+* Fix a crash in the server renderer when an attribute is called `hasOwnProperty`. This fix is only available in `react-dom@16.4.2`. ([@gaearon](https://github.com/gaearon) in [#13303](https://github.com/facebook/react/pull/13303))
+
diff --git a/beta/src/content/blog/2018/09/10/introducing-the-react-profiler.md b/beta/src/content/blog/2018/09/10/introducing-the-react-profiler.md
new file mode 100644
index 000000000..ebf383ad0
--- /dev/null
+++ b/beta/src/content/blog/2018/09/10/introducing-the-react-profiler.md
@@ -0,0 +1,200 @@
+---
+title: 'Introducing the React Profiler'
+author: [bvaughn]
+---
+
+React 16.5 adds support for a new DevTools profiler plugin.
+This plugin uses React's [experimental Profiler API](https://github.com/reactjs/rfcs/pull/51) to collect timing information about each component that's rendered in order to identify performance bottlenecks in React applications.
+It will be fully compatible with our upcoming [time slicing and suspense](/blog/2018/03/01/sneak-peek-beyond-react-16) features.
+
+This blog post covers the following topics:
+
+- [Profiling an application](#profiling-an-application)
+- [Reading performance data](#reading-performance-data)
+  - [Browsing commits](#browsing-commits)
+  - [Filtering commits](#filtering-commits)
+  - [Flame chart](#flame-chart)
+  - [Ranked chart](#ranked-chart)
+  - [Component chart](#component-chart)
+  - [Interactions](#interactions)
+- [Troubleshooting](#troubleshooting)
+  - [No profiling data has been recorded for the selected root](#no-profiling-data-has-been-recorded-for-the-selected-root)
+  - [No timing data to display for the selected commit](#no-timing-data-to-display-for-the-selected-commit)
+- [Deep dive video](#deep-dive-video)
+
+## Profiling an application {/*profiling-an-application*/}
+
+DevTools will show a "Profiler" tab for applications that support the new profiling API:
+
+![New DevTools "profiler" tab](/images/blog/introducing-the-react-profiler/devtools-profiler-tab.png)
+
+> Note:
+>
+> `react-dom` 16.5+ supports profiling in DEV mode.
+> A production profiling bundle is also available as `react-dom/profiling`.
+> Read more about how to use this bundle at [fb.me/react-profiling](https://fb.me/react-profiling)
+
+The "Profiler" panel will be empty initially. Click the record button to start profiling:
+
+![Click "record" to start profiling](/images/blog/introducing-the-react-profiler/start-profiling.png)
+
+Once you've started recording, DevTools will automatically collect performance information each time your application renders.
+Use your app as you normally would.
+When you are finished profiling, click the "Stop" button.
+
+![Click "stop" when you are finished profiling](/images/blog/introducing-the-react-profiler/stop-profiling.png)
+
+Assuming your application rendered at least once while profiling, DevTools will show several ways to view the performance data.
+We'll [take a look at each of these below](#reading-performance-data).
+
+## Reading performance data {/*reading-performance-data*/}
+
+### Browsing commits {/*browsing-commits*/}
+
+Conceptually, React does work in two phases:
+
+- The **render** phase determines what changes need to be made to e.g. the DOM. During this phase, React calls `render` and then compares the result to the previous render.
+- The **commit** phase is when React applies any changes. (In the case of React DOM, this is when React inserts, updates, and removes DOM nodes.) React also calls lifecycles like `componentDidMount` and `componentDidUpdate` during this phase.
+
+The DevTools profiler groups performance info by commit.
+Commits are displayed in a bar chart near the top of the profiler:
+
+![Bar chart of profiled commits](/images/blog/introducing-the-react-profiler/commit-selector.png)
+
+Each bar in the chart represents a single commit with the currently selected commit colored black.
+You can click on a bar (or the left/right arrow buttons) to select a different commit.
+
+The color and height of each bar corresponds to how long that commit took to render.
+(Taller, yellow bars took longer than shorter, blue bars.)
+
+### Filtering commits {/*filtering-commits*/}
+
+The longer you profile, the more times your application will render.
+In some cases you may end up with _too many commits_ to easily process.
+The profiler offers a filtering mechanism to help with this.
+Use it to specify a threshold and the profiler will hide all commits that were _faster_ than that value.
+
+![Filtering commits by time](/images/blog/introducing-the-react-profiler/filtering-commits.gif)
+
+### Flame chart {/*flame-chart*/}
+
+The flame chart view represents the state of your application for a particular commit.
+Each bar in the chart represents a React component (e.g. `App`, `Nav`).
+The size and color of the bar represents how long it took to render the component and its children.
+(The width of a bar represents how much time was spent _when the component last rendered_ and the color represents how much time was spent _as part of the current commit_.)
+
+![Example flame chart](/images/blog/introducing-the-react-profiler/flame-chart.png)
+
+> Note:
+>
+> The width of a bar indicates how long it took to render the component (and its children) when they last rendered.
+> If the component did not re-render as part of this commit, the time represents a previous render.
+> The wider a component is, the longer it took to render.
+>
+> The color of a bar indicates how long the component (and its children) took to render in the selected commit.
+> Yellow components took more time, blue components took less time, and gray components did not render at all during this commit.
+
+For example, the commit shown above took a total of 18.4ms to render.
+The `Router` component was the "most expensive" to render (taking 18.4ms).
+Most of this time was due to two of its children, `Nav` (8.4ms) and `Route` (7.9ms).
+The rest of the time was divided between its remaining children or spent in the component's own render method.
+
+You can zoom in or out on a flame chart by clicking on components:
+![Click on a component to zoom in or out](/images/blog/introducing-the-react-profiler/zoom-in-and-out.gif)
+
+Clicking on a component will also select it and show information in the right side panel which includes its `props` and `state` at the time of this commit.
+You can drill into these to learn more about what the component actually rendered during the commit:
+
+![Viewing a component's props and state for a commit](/images/blog/introducing-the-react-profiler/props-and-state.gif)
+
+In some cases, selecting a component and stepping between commits may also provide a hint as to _why_ the component rendered:
+
+![Seeing which values changed between commits](/images/blog/introducing-the-react-profiler/see-which-props-changed.gif)
+
+The above image shows that `state.scrollOffset` changed between commits.
+This is likely what caused the `List` component to re-render.
+
+### Ranked chart {/*ranked-chart*/}
+
+The ranked chart view represents a single commit.
+Each bar in the chart represents a React component (e.g. `App`, `Nav`).
+The chart is ordered so that the components which took the longest to render are at the top.
+
+![Example ranked chart](/images/blog/introducing-the-react-profiler/ranked-chart.png)
+
+> Note:
+>
+> A component's render time includes the time spent rendering its children,
+> so the components which took the longest to render are generally near the top of the tree.
+
+As with the flame chart, you can zoom in or out on a ranked chart by clicking on components.
+
+### Component chart {/*component-chart*/}
+
+Sometimes it's useful to see how many times a particular component rendered while you were profiling.
+The component chart provides this information in the form of a bar chart.
+Each bar in the chart represents a time when the component rendered.
+The color and height of each bar corresponds to how long the component took to render _relative to other components_ in a particular commit.
+
+![Example component chart](/images/blog/introducing-the-react-profiler/component-chart.png)
+
+The chart above shows that the `List` component rendered 11 times.
+It also shows that each time it rendered, it was the most "expensive" component in the commit (meaning that it took the longest).
+
+To view this chart, either double-click on a component _or_ select a component and click on the blue bar chart icon in the right detail pane.
+You can return to the previous chart by clicking the "x" button in the right detail pane.
+You can also double click on a particular bar to view more information about that commit.
+
+![How to view all renders for a specific component](/images/blog/introducing-the-react-profiler/see-all-commits-for-a-fiber.gif)
+
+If the selected component did not render at all during the profiling session, the following message will be shown:
+
+![No render times for the selected component](/images/blog/introducing-the-react-profiler/no-render-times-for-selected-component.png)
+
+### Interactions {/*interactions*/}
+
+React recently added another [experimental API](https://fb.me/react-interaction-tracing) for tracing the _cause_ of an update.
+"Interactions" traced with this API will also be shown in the profiler:
+
+![The interactions panel](/images/blog/introducing-the-react-profiler/interactions.png)
+
+The image above shows a profiling session that traced four interactions.
+Each row represents an interaction that was traced.
+The colored dots along the row represent commits that were related to that interaction.
+
+You can also see which interactions were traced for a particular commit from the flame chart and ranked chart views as well:
+
+![List of interactions for a commit](/images/blog/introducing-the-react-profiler/interactions-for-commit.png)
+
+You can navigate between interactions and commits by clicking on them:
+
+![Navigate between interactions and commits](/images/blog/introducing-the-react-profiler/navigate-between-interactions-and-commits.gif)
+
+The tracing API is still new and we will cover it in more detail in a future blog post.
+
+## Troubleshooting {/*troubleshooting*/}
+
+### No profiling data has been recorded for the selected root {/*no-profiling-data-has-been-recorded-for-the-selected-root*/}
+
+If your application has multiple "roots", you may see the following message after profiling:
+![No profiling data has been recorded for the selected root](/images/blog/introducing-the-react-profiler/no-profiler-data-multi-root.png)
+
+This message indicates that no performance data was recorded for the root that's selected in the "Elements" panel.
+In this case, try selecting a different root in that panel to view profiling information for that root:
+
+![Select a root in the "Elements" panel to view its performance data](/images/blog/introducing-the-react-profiler/select-a-root-to-view-profiling-data.gif)
+
+### No timing data to display for the selected commit {/*no-timing-data-to-display-for-the-selected-commit*/}
+
+Sometimes a commit may be so fast that `performance.now()` doesn't give DevTools any meaningful timing information.
+In this case, the following message will be shown:
+
+![No timing data to display for the selected commit](/images/blog/introducing-the-react-profiler/no-timing-data-for-commit.png)
+
+## Deep dive video {/*deep-dive-video*/}
+
+The following video demonstrates how the React profiler can be used to detect and improve performance bottlenecks in an actual React application.
+
+<br/>
+
+<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/nySib7ipZdk?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
diff --git a/beta/src/content/blog/2018/10/01/create-react-app-v2.md b/beta/src/content/blog/2018/10/01/create-react-app-v2.md
new file mode 100644
index 000000000..83882e0b1
--- /dev/null
+++ b/beta/src/content/blog/2018/10/01/create-react-app-v2.md
@@ -0,0 +1,94 @@
+---
+title: "Create React App 2.0: Babel 7, Sass, and More"
+author: [timer, gaearon]
+---
+
+Create React App 2.0 has been released today, and it brings a year's worth of improvements in a single dependency update.
+
+While React itself [doesn't require any build dependencies](/docs/create-a-new-react-app.html), it can be challenging to write a complex app without a fast test runner, a production minifier, and a modular codebase. Since the very first release, the goal of [Create React App](https://github.com/facebook/create-react-app) has been to help you focus on what matters the most -- your application code -- and to handle build and testing setup for you.
+
+Many of the tools it relies on have since released new versions containing new features and performance improvements: [Babel 7](https://babeljs.io/blog/2018/08/27/7.0.0), [webpack 4](https://medium.com/webpack/webpack-4-released-today-6cdb994702d4), and [Jest 23](https://jestjs.io/blog/2018/05/29/jest-23-blazing-fast-delightful-testing.html). However, updating them manually and making them work well together takes a lot of effort. And this is exactly what [Create React App 2.0 contributors](https://github.com/facebook/create-react-app/graphs/contributors) have been busy with for the past few months: **migrating the configuration and dependencies so that you don't need to do it yourself.**
+
+Now that Create React App 2.0 is out of beta, let's see what's new and how you can try it!
+
+>Note
+>
+>Don't feel pressured to upgrade anything. If you're satisfied with the current feature set, its performance, and reliability, you can keep using the version you're currently at! It might also be a good idea to let the 2.0 release stabilize a little bit before switching to it in production.
+
+## What's New {/*whats-new*/}
+
+Here's a short summary of what's new in this release:
+
+* 🎉 More styling options: you can use [Sass](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-sass-stylesheet) and [CSS Modules](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-modules-stylesheet) out of the box.
+* 🐠 We updated to [Babel 7](https://babeljs.io/blog/2018/08/27/7.0.0), including support for the [React fragment syntax](/docs/fragments.html#short-syntax) and many bugfixes.
+* 📦 We updated to [webpack 4](https://medium.com/webpack/webpack-4-released-today-6cdb994702d4), which automatically splits JS bundles more intelligently.
+* 🃏 We updated to [Jest 23](https://jestjs.io/blog/2018/05/29/jest-23-blazing-fast-delightful-testing.html), which includes an [interactive mode](https://jestjs.io/blog/2018/05/29/jest-23-blazing-fast-delightful-testing#interactive-snapshot-mode) for reviewing snapshots.
+* 💄 We added [PostCSS](https://preset-env.cssdb.org/features#stage-3) so you can use new CSS features in old browsers.
+* 💎 You can use [Apollo](https://github.com/leoasis/graphql-tag.macro#usage), [Relay Modern](https://github.com/facebook/relay/pull/2171#issuecomment-411459604), [MDX](https://github.com/facebook/create-react-app/issues/5149#issuecomment-425396995), and other third-party [Babel Macros](https://babeljs.io/blog/2017/09/11/zero-config-with-babel-macros) transforms.
+* 🌠 You can now [import an SVG as a React component](https://facebook.github.io/create-react-app/docs/adding-images-fonts-and-files#adding-svgs), and use it in JSX.
+* 🐈 You can try the experimental [Yarn Plug'n'Play mode](https://github.com/yarnpkg/rfcs/pull/101) that removes `node_modules`.
+* 🕸 You can now [plug your own proxy implementation](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#configuring-the-proxy-manually) in development to match your backend API.
+* 🚀 You can now use [packages written for latest Node versions](https://github.com/sindresorhus/ama/issues/446#issuecomment-281014491) without breaking the build.
+* ✂️ You can now optionally get a smaller CSS bundle if you only plan to target modern browsers.
+* 👷‍♀️ Service workers are now opt-in and are built using Google's [Workbox](https://developers.google.com/web/tools/workbox/).
+
+**All of these features work out of the box** -- to enable them, follow the below instructions.
+
+## Starting a Project with Create React App 2.0 {/*starting-a-project-with-create-react-app-20*/}
+
+You don't need to update anything special. Starting from today, when you run `create-react-app` it will use the 2.0 version of the template by default. Have fun!
+
+If you want to **use the old 1.x template** for some reason, you can do that by passing `--scripts-version=react-scripts@1.x` as an argument to `create-react-app`.
+
+## Updating a Project to Create React App 2.0 {/*updating-a-project-to-create-react-app-20*/}
+
+Upgrading a non-ejected project to Create React App 2.0 should usually be straightforward. Open `package.json` in the root of your project and find `react-scripts` there.
+
+Then change its version to `2.0.3`:
+
+```js {2}
+  // ... other dependencies ...
+  "react-scripts": "2.0.3"
+```
+
+Run `npm install` (or `yarn`, if you use it). **For many projects, this one-line change is sufficient to upgrade!**
+
+<blockquote class="twitter-tweet" data-conversation="none" data-dnt="true"><p lang="en" dir="ltr">working here... thanks for all the new functionality 👍</p>&mdash; Stephen Haney (@sdothaney) <a href="https://twitter.com/sdothaney/status/1046822703116607490?ref_src=twsrc%5Etfw">October 1, 2018</a></blockquote>
+
+Here are a few more tips to get you started.
+
+**When you run `npm start` for the first time after the upgrade,** you'll get a prompt asking about which browsers you'd like to support. Press `y` to accept the default ones. They'll be written to your `package.json` and you can edit them any time. Create React App will use this information to produce smaller or polyfilled CSS bundles depending on whether you target modern browsers or older browsers.
+
+**If `npm start` still doesn't quite work for you after the upgrade,** [check out the more detailed migration instructions in the release notes](https://github.com/facebook/create-react-app/releases/tag/v2.0.3). There *are* a few breaking changes in this release but the scope of them is limited, so they shouldn't take more than a few hours to sort out. Note that **[support for older browsers](https://github.com/facebook/create-react-app/blob/master/packages/react-app-polyfill/README.md) is now opt-in** to reduce the polyfill size.
+
+**If you previously ejected but now want to upgrade,** one common solution is to find the commits where you ejected (and any subsequent commits changing the configuration), revert them, upgrade, and later optionally eject again. It's also possible that the feature you ejected for (maybe Sass or CSS Modules?) is now supported out of the box.
+
+>Note
+>
+>Due to a possible bug in npm, you might see warnings about unsatisfied peer dependencies. You should be able to ignore them. As far as we're aware, this issue isn't present with Yarn.
+
+## Breaking Changes {/*breaking-changes*/}
+
+Here's a short list of breaking changes in this release:
+
+* Node 6 is no longer supported.
+* Support for older browsers (such as IE 9 to IE 11) is now opt-in with a [separate package](https://github.com/facebook/create-react-app/tree/master/packages/react-app-polyfill).
+* Code-splitting with `import()` now behaves closer to specification, while `require.ensure()` is disabled.
+* The default Jest environment now includes jsdom.
+* Support for specifying an object as `proxy` setting was replaced with support for a custom proxy module.
+* Support for `.mjs` extension was removed until the ecosystem around it stabilizes.
+* PropTypes definitions are automatically stripped out of the production builds.
+
+If either of these points affects you, [2.0.3 release notes](https://github.com/facebook/create-react-app/releases/tag/v2.0.3) contain more detailed instructions.
+
+## Learn More {/*learn-more*/}
+
+You can find the full changelog in the [release notes](https://github.com/facebook/create-react-app/releases/tag/v2.0.3). This was a large release, and we may have missed something. Please report any problems to our [issue tracker](https://github.com/facebook/create-react-app/issues/new) and we'll try to help.
+
+>Note
+>
+>If you've been using 2.x alpha versions, we provide [separate migration instructions](https://gist.github.com/gaearon/8650d1c70e436e5eff01f396dffc4114) for them.
+
+## Thanks {/*thanks*/}
+
+This release wouldn't be possible without our wonderful community of contributors. We'd like to thank [Andreas Cederström](https://github.com/andriijas), [Clement Hoang](https://github.com/clemmy), [Brian Ng](https://github.com/existentialism), [Kent C. Dodds](https://github.com/kentcdodds), [Ade Viankakrisna Fadlil](https://github.com/viankakrisna), [Andrey Sitnik](https://github.com/ai), [Ro Savage](https://github.com/ro-savage), [Fabiano Brito](https://github.com/Fabianopb), [Ian Sutherland](https://github.com/iansu), [Pete Nykänen](https://github.com/petetnt), [Jeffrey Posnick](https://github.com/jeffposnick), [Jack Zhao](https://github.com/bugzpodder), [Tobias Koppers](https://github.com/sokra), [Henry Zhu](https://github.com/hzoo), [Maël Nison](https://github.com/arcanis), [XiaoYan Li](https://github.com/lixiaoyan), [Marko Trebizan](https://github.com/themre), [Marek Suscak](https://github.com/mareksuscak), [Mikhail Osher](https://github.com/miraage), and many others who provided feedback and testing for this release.
diff --git a/beta/src/content/blog/2018/10/23/react-v-16-6.md b/beta/src/content/blog/2018/10/23/react-v-16-6.md
new file mode 100644
index 000000000..7c5ce2129
--- /dev/null
+++ b/beta/src/content/blog/2018/10/23/react-v-16-6.md
@@ -0,0 +1,157 @@
+---
+title: 'React v16.6.0: lazy, memo and contextType'
+author: [sebmarkbage]
+---
+
+Today we're releasing React 16.6 with a few new convenient features. A form of PureComponent/shouldComponentUpdate for function components, a way to do code splitting using Suspense and an easier way to consume Context from class components.
+
+Check out the full [changelog](#changelog) below.
+
+## [`React.memo`](/docs/react-api#reactmemo) {/*reactmemo*/}
+
+Class components can bail out from rendering when their input props are the same using [`PureComponent`](/docs/react-api#reactpurecomponent) or [`shouldComponentUpdate`](/docs/react-component#shouldcomponentupdate). Now you can do the same with function components by wrapping them in [`React.memo`](/docs/react-api#reactmemo).
+
+```js
+const MyComponent = React.memo(function MyComponent(props) {
+  /* only rerenders if props change */
+});
+```
+
+## [`React.lazy`](/docs/code-splitting#reactlazy): Code-Splitting with `Suspense` {/*reactlazy-code-splitting-with-suspense*/}
+
+You may have seen [Dan's talk about React Suspense at JSConf Iceland](/blog/2018/03/01/sneak-peek-beyond-react-16). Now you can use the Suspense component to do [code-splitting](/docs/code-splitting#reactlazy) by wrapping a dynamic import in a call to `React.lazy()`.
+
+```js
+import React, {lazy, Suspense} from 'react';
+const OtherComponent = lazy(() => import('./OtherComponent'));
+
+function MyComponent() {
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <OtherComponent />
+    </Suspense>
+  );
+}
+```
+
+The Suspense component will also allow library authors to start building data fetching with Suspense support in the future.
+
+> Note: This feature is not yet available for server-side rendering. Suspense support will be added in a later release.
+
+## [`static contextType`](/docs/context#classcontexttype) {/*static-contexttype*/}
+
+In [React 16.3](/blog/2018/03/29/react-v-16-3) we introduced the official Context API as a replacement to the previous [Legacy Context](/docs/legacy-context) API.
+
+```js
+const MyContext = React.createContext();
+```
+
+We've heard feedback that adopting the new render prop API can be difficult in class components. So we've added a convenience API to [consume a context value from within a class component](/docs/context#classcontexttype).
+
+```js
+class MyClass extends React.Component {
+  static contextType = MyContext;
+  componentDidMount() {
+    let value = this.context;
+    /* perform a side-effect at mount using the value of MyContext */
+  }
+  componentDidUpdate() {
+    let value = this.context;
+    /* ... */
+  }
+  componentWillUnmount() {
+    let value = this.context;
+    /* ... */
+  }
+  render() {
+    let value = this.context;
+    /* render something based on the value of MyContext */
+  }
+}
+```
+
+## [`static getDerivedStateFromError()`](/docs/react-component#static-getderivedstatefromerror) {/*static-getderivedstatefromerror*/}
+
+React 16 introduced [Error Boundaries](/blog/2017/07/26/error-handling-in-react-16) for handling errors thrown in React renders. We already had the `componentDidCatch` lifecycle method which gets fired after an error has already happened. It's great for logging errors to the server. It also lets you show a different UI to the user by calling `setState`.
+
+Before that is fired, we render `null` in place of the tree that threw an error. This sometimes breaks parent components that don't expect their refs to be empty. It also doesn't work to recover from errors on the server since the `Did` lifecycle methods don't fire during server-side rendering.
+
+We're adding another error method that lets you render the fallback UI before the render completes. See the docs for [`getDerivedStateFromError()`](/docs/react-component#static-getderivedstatefromerror).
+
+> Note: `getDerivedStateFromError()` is not yet available for server-side rendering. It is designed to work with server-side rendering in a future release. We're releasing it early so that you can start preparing to use it.
+
+## Deprecations in StrictMode {/*deprecations-in-strictmode*/}
+
+In [16.3](/blog/2018/03/29/react-v-16-3#strictmode-component) we introduced the [`StrictMode`](/docs/strict-mode) component. It lets you opt-in to early warnings for patterns that might cause problems in the future.
+
+We've added two more APIs to the list of deprecated APIs in `StrictMode`. If you don't use `StrictMode` you don't have to worry; these warning won't fire for you.
+
+- **ReactDOM.findDOMNode()** - This API is often misunderstood and most uses of it are unnecessary. It can also be surprisingly slow in React 16. [See the docs](/docs/strict-mode#warning-about-deprecated-finddomnode-usage) for possible upgrade paths.
+- **Legacy Context** using contextTypes and getChildContext - Legacy context makes React slightly slower and bigger than it needs to be. That's why we strongly want to encourage upgrading to the [new context API](/docs/context). Hopefully the addition of the [`contextType`](/docs/context#classcontexttype) API makes this a bit easier.
+
+If you're having trouble upgrading, we'd like to hear your feedback.
+
+## Installation {/*installation*/}
+
+React v16.6.0 is available on the npm registry.
+
+To install React 16 with Yarn, run:
+
+```bash
+yarn add react@^16.6.0 react-dom@^16.6.0
+```
+
+To install React 16 with npm, run:
+
+```bash
+npm install --save react@^16.6.0 react-dom@^16.6.0
+```
+
+We also provide UMD builds of React via a CDN:
+
+```html
+<script
+  crossorigin
+  src="https://unpkg.com/react@16/umd/react.production.min.js"
+></script>
+<script
+  crossorigin
+  src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"
+></script>
+```
+
+Refer to the documentation for [detailed installation instructions](/docs/installation).
+
+## Changelog {/*changelog*/}
+
+### React {/*react*/}
+
+- Add `React.memo()` as an alternative to `PureComponent` for functions. ([@acdlite](https://github.com/acdlite) in [#13748](https://github.com/facebook/react/pull/13748))
+- Add `React.lazy()` for code splitting components. ([@acdlite](https://github.com/acdlite) in [#13885](https://github.com/facebook/react/pull/13885))
+- `React.StrictMode` now warns about legacy context API. ([@bvaughn](https://github.com/bvaughn) in [#13760](https://github.com/facebook/react/pull/13760))
+- `React.StrictMode` now warns about `findDOMNode`. ([@sebmarkbage](https://github.com/sebmarkbage) in [#13841](https://github.com/facebook/react/pull/13841))
+- Rename `unstable_AsyncMode` to `unstable_ConcurrentMode`. ([@trueadm](https://github.com/trueadm) in [#13732](https://github.com/facebook/react/pull/13732))
+- Rename `unstable_Placeholder` to `Suspense`, and `delayMs` to `maxDuration`. ([@gaearon](https://github.com/gaearon) in [#13799](https://github.com/facebook/react/pull/13799) and [@sebmarkbage](https://github.com/sebmarkbage) in [#13922](https://github.com/facebook/react/pull/13922))
+
+### React DOM {/*react-dom*/}
+
+- Add `contextType` as a more ergonomic way to subscribe to context from a class. ([@bvaughn](https://github.com/bvaughn) in [#13728](https://github.com/facebook/react/pull/13728))
+- Add `getDerivedStateFromError` lifecycle method for catching errors in a future asynchronous server-side renderer. ([@bvaughn](https://github.com/bvaughn) in [#13746](https://github.com/facebook/react/pull/13746))
+- Warn when `<Context>` is used instead of `<Context.Consumer>`. ([@trueadm](https://github.com/trueadm) in [#13829](https://github.com/facebook/react/pull/13829))
+- Fix gray overlay on iOS Safari. ([@philipp-spiess](https://github.com/philipp-spiess) in [#13778](https://github.com/facebook/react/pull/13778))
+- Fix a bug caused by overwriting `window.event` in development. ([@sergei-startsev](https://github.com/sergei-startsev) in [#13697](https://github.com/facebook/react/pull/13697))
+
+### React DOM Server {/*react-dom-server*/}
+
+- Add support for `React.memo()`. ([@alexmckenley](https://github.com/alexmckenley) in [#13855](https://github.com/facebook/react/pull/13855))
+- Add support for `contextType`. ([@alexmckenley](https://github.com/alexmckenley) and [@sebmarkbage](https://github.com/sebmarkbage) in [#13889](https://github.com/facebook/react/pull/13889))
+
+### Scheduler (Experimental) {/*scheduler-experimental*/}
+
+- Rename the package to `scheduler`. ([@gaearon](https://github.com/gaearon) in [#13683](https://github.com/facebook/react/pull/13683))
+- Support priority levels, continuations, and wrapped callbacks. ([@acdlite](https://github.com/acdlite) in [#13720](https://github.com/facebook/react/pull/13720) and [#13842](https://github.com/facebook/react/pull/13842))
+- Improve the fallback mechanism in non-DOM environments. ([@acdlite](https://github.com/acdlite) in [#13740](https://github.com/facebook/react/pull/13740))
+- Schedule `requestAnimationFrame` earlier. ([@acdlite](https://github.com/acdlite) in [#13785](https://github.com/facebook/react/pull/13785))
+- Fix the DOM detection to be more thorough. ([@trueadm](https://github.com/trueadm) in [#13731](https://github.com/facebook/react/pull/13731))
+- Fix bugs with interaction tracing. ([@bvaughn](https://github.com/bvaughn) in [#13590](https://github.com/facebook/react/pull/13590))
+- Add the `envify` transform to the package. ([@mridgway](https://github.com/mridgway) in [#13766](https://github.com/facebook/react/pull/13766))
diff --git a/beta/src/content/blog/2018/11/13/react-conf-recap.md b/beta/src/content/blog/2018/11/13/react-conf-recap.md
new file mode 100644
index 000000000..d82ba1c1f
--- /dev/null
+++ b/beta/src/content/blog/2018/11/13/react-conf-recap.md
@@ -0,0 +1,26 @@
+---
+title: 'React Conf recap: Hooks, Suspense, and Concurrent Rendering'
+author: [tomocchino]
+---
+
+This year’s [React Conf](https://conf.reactjs.org/) took place on October 25 and 26 in Henderson, Nevada, where more than 600 attendees gathered to discuss the latest in UI engineering.
+
+<br/>
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/V-QO-KO90iQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+Sophie Alpert and Dan Abramov kicked off Day 1 with their keynote, React Today and Tomorrow. In the talk, they introduced [Hooks](/docs/hooks-intro), which are a new proposal that adds the ability to access features such as state without writing a JavaScript class. Hooks promise to dramatically simplify the code required for React components and are currently available in a React alpha release.
+
+<br/>
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/ByBPyMBTzM0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+On the morning of Day 2, Andrew Clark and Brian Vaughn presented Concurrent Rendering in React. Andrew covered the recently announced [React.lazy API for code splitting](/blog/2018/10/23/react-v-16-6) and previewed two upcoming features: concurrent mode and Suspense. Brian demonstrated how to use [React’s new profiler](/blog/2018/09/10/introducing-the-react-profiler) tooling to make apps built in React run faster.
+
+<br/>
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/UcqRXTriUVI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+In the afternoon, Parashuram N spoke in detail about React Native’s New Architecture, a long-term project that the React Native team has been working on over the past year and [announced in June](https://reactnative.dev/blog/2018/06/14/state-of-react-native-2018). We’re really excited about the potential of this project to improve performance, simplify interoperability with other libraries, and set a strong foundation for the future of React Native.
+
+Now that the conference is over, all 28 conference talks are [available to stream online](https://www.youtube.com/playlist?list=PLPxbbTqCLbGE5AihOSExAa4wUM-P42EIJ). There are tons of great ones from both days. We can’t wait until next year!
diff --git a/beta/src/content/blog/2018/11/27/react-16-roadmap.md b/beta/src/content/blog/2018/11/27/react-16-roadmap.md
new file mode 100644
index 000000000..cdbd297d3
--- /dev/null
+++ b/beta/src/content/blog/2018/11/27/react-16-roadmap.md
@@ -0,0 +1,202 @@
+---
+title: 'React 16.x Roadmap'
+author: [gaearon]
+---
+
+You might have heard about features like "Hooks", "Suspense", and "Concurrent Rendering" in the previous blog posts and talks. In this post, we'll look at how they fit together and the expected timeline for their availability in a stable release of React.
+
+> An Update from August, 2019
+>
+> You can find an update to this roadmap in the [React 16.9 release blog post](/blog/2019/08/08/react-v16.9.0#an-update-to-the-roadmap).
+
+## tl;dr {/*tldr*/}
+
+We plan to split the rollout of new React features into the following milestones:
+
+- React 16.6 with [Suspense for Code Splitting](#react-166-shipped-the-one-with-suspense-for-code-splitting) (_already shipped_)
+- A minor 16.x release with [React Hooks](#react-16x-q1-2019-the-one-with-hooks) (~Q1 2019)
+- A minor 16.x release with [Concurrent Mode](#react-16x-q2-2019-the-one-with-concurrent-mode) (~Q2 2019)
+- A minor 16.x release with [Suspense for Data Fetching](#react-16x-mid-2019-the-one-with-suspense-for-data-fetching) (~mid 2019)
+
+_(The original version of this post used exact version numbers. We edited it to reflect that there might need to be a few other minor releases in the middle between these ones.)_
+
+These are estimates, and the details may change as we're further along. There's at least two more projects we plan to complete in 2019. They require more exploration and aren't tied to a particular release yet:
+
+- [Modernizing React DOM](#modernizing-react-dom)
+- [Suspense for Server Rendering](#suspense-for-server-rendering)
+
+We expect to get more clarity on their timeline in the coming months.
+
+> Note
+>
+> This post is just a roadmap -- there is nothing in it that requires your immediate attention. When each of these features are released, we'll publish a full blog post announcing them.
+
+## Release Timeline {/*release-timeline*/}
+
+We have a single vision for how all of these features fit together, but we're releasing each part as soon as it is ready so that you can test and start using them sooner. The API design doesn't always make sense when looking at one piece in isolation; this post lays out the major parts of our plan to help you see the whole picture. (See our [versioning policy](/docs/faq-versioning) to learn more about our commitment to stability.)
+
+The gradual release strategy helps us refine the APIs, but the transitional period when some things aren't ready can be confusing. Let's look at what these different features mean for your app, how they relate to each other, and when you can expect to start learning and using them.
+
+### [React 16.6](/blog/2018/10/23/react-v-16-6) (shipped): The One with Suspense for Code Splitting {/*react-166-shipped-the-one-with-suspense-for-code-splitting*/}
+
+_Suspense_ refers to React's new ability to "suspend" rendering while components are waiting for something, and display a loading indicator. In React 16.6, Suspense supports only one use case: lazy loading components with `React.lazy()` and `<React.Suspense>`.
+
+```js
+// This component is loaded dynamically
+const OtherComponent = React.lazy(() => import('./OtherComponent'));
+
+function MyComponent() {
+  return (
+    <React.Suspense fallback={<Spinner />}>
+      <div>
+        <OtherComponent />
+      </div>
+    </React.Suspense>
+  );
+}
+```
+
+Code splitting with `React.lazy()` with `<React.Suspense>` is documented [in the Code Splitting guide](/docs/code-splitting#reactlazy). You can find another practical explanation in [this article](https://medium.com/@pomber/lazy-loading-and-preloading-components-in-react-16-6-804de091c82d).
+
+We have been using Suspense for code splitting at Facebook since July, and expect it to be stable. There's been a few regressions in the initial public release in 16.6.0, but they were fixed in 16.6.3.
+
+Code splitting is just the first step for Suspense. Our longer term vision for Suspense involves letting it handle data fetching too (and integrate with libraries like Apollo). In addition to a convenient programming model, Suspense also provides better user experience in Concurrent Mode. You'll find information about these topics further below.
+
+**Status in React DOM:** Available since React 16.6.0.
+
+**Status in React DOM Server:** Suspense is not available in the server renderer yet. This isn't for the lack of attention. We've started work on a new asynchronous server renderer that will support Suspense, but it's a large project and will take a good chunk of 2019 to complete.
+
+**Status in React Native:** Bundle splitting isn't very useful in React Native, but there's nothing technically preventing `React.lazy()` and `<Suspense>` from working when given a Promise to a module.
+
+**Recommendation:** If you only do client rendering, we recommend widely adopting `React.lazy()` and `<React.Suspense>` for code splitting React components. If you do server rendering, you'll have to wait with adoption until the new server renderer is ready.
+
+### React 16.x (~Q1 2019): The One with Hooks {/*react-16x-q1-2019-the-one-with-hooks*/}
+
+_Hooks_ let you use features like state and lifecycle from function components. They also let you reuse stateful logic between components without introducing extra nesting in your tree.
+
+```js
+function Example() {
+  // Declare a new state variable, which we'll call "count"
+  const [count, setCount] = useState(0);
+
+  return (
+    <div>
+      <p>You clicked {count} times</p>
+      <button onClick={() => setCount(count + 1)}>Click me</button>
+    </div>
+  );
+}
+```
+
+Hooks [introduction](/docs/hooks-intro) and [overview](/docs/hooks-overview) are good places to start. Watch [these talks](https://www.youtube.com/watch?v=V-QO-KO90iQ) for a video introduction and a deep dive. The [FAQ](/docs/hooks-faq) should answer most of your further questions. To learn more about the motivation behind Hooks, you can read [this article](https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889). Some of the rationale for the API design of Hooks is explained in [this RFC thread reply](https://github.com/reactjs/rfcs/pull/68#issuecomment-439314884).
+
+We have been dogfooding Hooks at Facebook since September. We don't expect major bugs in the implementation. Hooks are only available in the 16.7 alpha versions of React. Some of their API is expected to change in the final version (see the end of [this comment](https://github.com/reactjs/rfcs/pull/68#issuecomment-439314884) for details). It is possible that the minor release with Hooks might not be React 16.7.
+
+Hooks represent our vision for the future of React. They solve both problems that React users experience directly ("wrapper hell" of render props and higher-order components, duplication of logic in lifecycle methods), and the issues we've encountered optimizing React at scale (such as difficulties in inlining components with a compiler). Hooks don't deprecate classes. However, if Hooks are successful, it is possible that in a future _major_ release class support might move to a separate package, reducing the default bundle size of React.
+
+**Status in React DOM:** The first version of `react` and `react-dom` supporting Hooks is `16.7.0-alpha.0`. We expect to publish more alphas over the next months (at the time of writing, the latest one is `16.7.0-alpha.2`). You can try them by installing `react@next` with `react-dom@next`. Don't forget to update `react-dom` -- otherwise Hooks won't work.
+
+**Status in React DOM Server:** The same 16.7 alpha versions of `react-dom` fully support Hooks with `react-dom/server`.
+
+**Status in React Native:** There is no officially supported way to try Hooks in React Native yet. If you're feeling adventurous, check out [this thread](https://github.com/facebook/react-native/issues/21967) for unofficial instructions. There is a known issue with `useEffect` firing too late which still needs to be solved.
+
+**Recommendation:** When you’re ready, we encourage you to start trying Hooks in new components you write. Make sure everyone on your team is on board with using them and familiar with this documentation. We don’t recommend rewriting your existing classes to Hooks unless you planned to rewrite them anyway (e.g. to fix bugs). Read more about the adoption strategy [here](/docs/hooks-faq#adoption-strategy).
+
+### React 16.x (~Q2 2019): The One with Concurrent Mode {/*react-16x-q2-2019-the-one-with-concurrent-mode*/}
+
+_Concurrent Mode_ lets React apps be more responsive by rendering component trees without blocking the main thread. It is opt-in and allows React to interrupt a long-running render (for example, rendering a news feed story) to handle a high-priority event (for example, text input or hover). Concurrent Mode also improves the user experience of Suspense by skipping unnecessary loading states on fast connections.
+
+> Note
+>
+> You might have previously heard Concurrent Mode being referred to as ["async mode"](/blog/2018/03/27/update-on-async-rendering). We've changed the name to Concurrent Mode to highlight React's ability to perform work on different priority levels. This sets it apart from other approaches to async rendering.
+
+```js
+// Two ways to opt in:
+
+// 1. Part of an app (not final API)
+<React.unstable_ConcurrentMode>
+  <Something />
+</React.unstable_ConcurrentMode>;
+
+// 2. Whole app (not final API)
+ReactDOM.unstable_createRoot(domNode).render(<App />);
+```
+
+There is no documentation written for the Concurrent Mode yet. It is important to highlight that the conceptual model will likely be unfamiliar at first. Documenting its benefits, how to use it efficiently, and its pitfalls is a high priority for us, and will be a prerequisite for calling it stable. Until then, [Andrew's talk](https://www.youtube.com/watch?v=ByBPyMBTzM0) is the best introduction available.
+
+Concurrent Mode is _much_ less polished than Hooks. Some APIs aren't properly "wired up" yet and don't do what they're expected to. At the time of writing this post, we don't recommend using it for anything except very early experimentation. We don't expect many bugs in Concurrent Mode itself, but note that components that produce warnings in [`<React.StrictMode>`](https://reactjs.org/docs/strict-mode) may not work correctly. On a separate note, we've seen that Concurrent Mode _surfaces_ performance problems in other code which can sometimes be mistaken for performance issues in Concurrent Mode itself. For example, a stray `setInterval(fn, 1)` call that runs every millisecond would have a worse effect in Concurrent Mode. We plan to publish more guidance about diagnosing and fixing issues like this as part of this release's documentation.
+
+Concurrent Mode is a big part of our vision for React. For CPU-bound work, it allows non-blocking rendering and keeps your app responsive while rendering complex component trees. That's demoed in the first part of [our JSConf Iceland talk](/blog/2018/03/01/sneak-peek-beyond-react-16). Concurrent Mode also makes Suspense better. It lets you avoid flickering a loading indicator if the network is fast enough. It's hard to explain without seeing so [Andrew's talk](https://www.youtube.com/watch?v=ByBPyMBTzM0) is the best resource available today. Concurrent Mode relies on a cooperative main thread [scheduler](https://github.com/facebook/react/tree/master/packages/scheduler), and we are [collaborating with the Chrome team](https://www.youtube.com/watch?v=mDdgfyRB5kg) to eventually move this functionality into the browser itself.
+
+**Status in React DOM:** A _very_ unstable version of Concurrent Mode is available behind an `unstable_` prefix in React 16.6 but we don't recommend trying it unless you're willing to often run into walls or missing features. The 16.7 alphas include `React.ConcurrentMode` and `ReactDOM.createRoot` without an `unstable_` prefix, but we'll likely keep the prefix in 16.7, and only document and mark Concurrent Mode as stable in this future minor release.
+
+**Status in React DOM Server:** Concurrent Mode doesn't directly affect server rendering. It will work with the existing server renderer.
+
+**Status in React Native:** The current plan is to delay enabling Concurrent Mode in React Native until [React Fabric](https://github.com/react-native-community/discussions-and-proposals/issues/4) project is near completion.
+
+**Recommendation:** If you wish to adopt Concurrent Mode in the future, wrapping some component subtrees in [`<React.StrictMode>`](https://reactjs.org/docs/strict-mode) and fixing the resulting warnings is a good first step. In general it's not expected that legacy code would immediately be compatible. For example, at Facebook we mostly intend to use the Concurrent Mode in the more recently developed codebases, and keep the legacy ones running in the synchronous mode for the near future.
+
+### React 16.x (~mid 2019): The One with Suspense for Data Fetching {/*react-16x-mid-2019-the-one-with-suspense-for-data-fetching*/}
+
+As mentioned earlier, _Suspense_ refers to React's ability to "suspend" rendering while components are waiting for something, and display a loading indicator. In the already shipped React 16.6, the only supported use case for Suspense is code splitting. In this future minor release, we'd like to provide officially supported ways to use it for data fetching too. We'll provide a reference implementation of a basic "React Cache" that's compatible with Suspense, but you can also write your own. Data fetching libraries like Apollo and Relay will be able to integrate with Suspense by following a simple specification that we'll document.
+
+```js
+// React Cache for simple data fetching (not final API)
+import {unstable_createResource} from 'react-cache';
+
+// Tell React Cache how to fetch your data
+const TodoResource = unstable_createResource(fetchTodo);
+
+function Todo(props) {
+  // Suspends until the data is in the cache
+  const todo = TodoResource.read(props.id);
+  return <li>{todo.title}</li>;
+}
+
+function App() {
+  return (
+    // Same Suspense component you already use for code splitting
+    // would be able to handle data fetching too.
+    <React.Suspense fallback={<Spinner />}>
+      <ul>
+        {/* Siblings fetch in parallel */}
+        <Todo id="1" />
+        <Todo id="2" />
+      </ul>
+    </React.Suspense>
+  );
+}
+
+// Other libraries like Apollo and Relay can also
+// provide Suspense integrations with similar APIs.
+```
+
+There is no official documentation for how to fetch data with Suspense yet, but you can find some early information in [this talk](https://youtu.be/ByBPyMBTzM0?t=1312) and [this small demo](https://github.com/facebook/react/blob/master/packages/react-devtools/CHANGELOG.md#suspense-toggle). We'll write documentation for React Cache (and how to write your own Suspense-compatible library) closer to this React release, but if you're curious, you can find its very early source code [here](https://github.com/facebook/react/blob/master/packages/react-cache/src/ReactCache.js).
+
+The low-level Suspense mechanism (suspending rendering and showing a fallback) is expected to be stable even in React 16.6. We've used it for code splitting in production for months. However, the higher-level APIs for data fetching are very unstable. React Cache is rapidly changing, and will change at least a few more times. There are some low-level APIs that are [missing](https://github.com/reactjs/rfcs/pull/89) for a good higher-level API to be possible. We don't recommend using React Cache anywhere except very early experiments. Note that React Cache itself isn't strictly tied to React releases, but the current alphas lack basic features as cache invalidation, and you'll run into a wall very soon. We expect to have something usable with this React release.
+
+Eventually we'd like most data fetching to happen through Suspense but it will take a long time until all integrations are ready. In practice we expect it to be adopted very incrementally, and often through layers like Apollo or Relay rather than directly. Missing higher level APIs aren't the only obstacle — there are also some important UI patterns we don't support yet such as [showing progress indicator outside of the loading view hierarchy](https://github.com/facebook/react/issues/14248). As always, we will communicate our progress in the release notes on this blog.
+
+**Status in React DOM and React Native:** Technically, a compatible cache would already work with `<React.Suspense>` in React 16.6. However, we don't expect to have a good cache implementation until this React minor release. If you're feeling adventurous, you can try to write your own cache by looking at the React Cache alphas. However, note that the mental model is sufficiently different that there's a high risk of misunderstanding it until the docs are ready.
+
+**Status in React DOM Server:** Suspense is not available in the server renderer yet. As we mentioned earlier, we've started work on a new asynchronous server renderer that will support Suspense, but it's a large project and will take a good chunk of 2019 to complete.
+
+**Recommendation:** Wait for this minor React release in order to use Suspense for data fetching. Don’t try to use Suspense features in 16.6 for it; it’s not supported. However, your existing `<Suspense>` components for code splitting will be able to show loading states for data too when Suspense for Data Fetching becomes officially supported.
+
+## Other Projects {/*other-projects*/}
+
+### Modernizing React DOM {/*modernizing-react-dom*/}
+
+We started an investigation into [simplifying and modernizing](https://github.com/facebook/react/issues/13525) ReactDOM, with a goal of reduced bundle size and aligning closer with the browser behavior. It is still early to say which specific bullet points will "make it" because the project is in an exploratory phase. We will communicate our progress on that issue.
+
+### Suspense for Server Rendering {/*suspense-for-server-rendering*/}
+
+We started designing a new server renderer that supports Suspense (including waiting for asynchronous data on the server without double rendering) and progressively loading and hydrating page content in chunks for best user experience. You can watch an overview of its early prototype in [this talk](https://www.youtube.com/watch?v=z-6JC0_cOns). The new server renderer is going to be our major focus in 2019, but it's too early to say anything about its release schedule. Its development, as always, [will happen on GitHub](https://github.com/facebook/react/pulls?utf8=%E2%9C%93&q=is%3Apr+is%3Aopen+fizz).
+
+---
+
+And that's about it! As you can see, there's a lot here to keep us busy but we expect much progress in the coming months.
+
+We hope this post gives you an idea of what we're working on, what you can use today, and what you can expect to use in the future. While there's a lot of discussion about new features on social media platforms, you won't miss anything important if you read this blog.
+
+We're always open to feedback, and love to hear from you in the [RFC repository](https://github.com/reactjs/rfcs), [the issue tracker](https://github.com/facebook/react/issues), and [on Twitter](https://mobile.twitter.com/reactjs).
diff --git a/beta/src/content/blog/2018/12/19/react-v-16-7.md b/beta/src/content/blog/2018/12/19/react-v-16-7.md
new file mode 100644
index 000000000..9586e1631
--- /dev/null
+++ b/beta/src/content/blog/2018/12/19/react-v-16-7.md
@@ -0,0 +1,75 @@
+---
+title: 'React v16.7: No, This Is Not the One With Hooks'
+author: [acdlite]
+---
+
+Our latest release includes an important performance bugfix for `React.lazy`. Although there are no API changes, we're releasing it as a minor instead of a patch.
+
+## Why Is This Bugfix a Minor Instead of a Patch? {/*why-is-this-bugfix-a-minor-instead-of-a-patch*/}
+
+React follows [semantic versioning](/docs/faq-versioning). Typically, this means that we use patch versions for bugfixes, and minors for new (non-breaking) features. However, we reserve the option to release minor versions even if they do not include new features. The motivation is to reserve patches for changes that have a very low chance of breaking. Patches are the most important type of release because they sometimes contain critical bugfixes. That means patch releases have a higher bar for reliability. It's unacceptable for a patch to introduce additional bugs, because if people come to distrust patches, it compromises our ability to fix critical bugs when they arise — for example, to fix a security vulnerability.
+
+We never intend to ship bugs. React has a hard-earned reputation for stability, and we intend to keep it that way. We thoroughly test every version of React before releasing. This includes unit tests, generative (fuzzy) tests, integration tests, and internal dogfooding across tens of thousands of components. However, sometimes we make mistakes. That's why, going forward, our policy will be that if a release contains non-trivial changes, we will bump the minor version, even if the external behavior is the same. We'll also bump the minor when changing `unstable_`-prefixed APIs.
+
+## Can I Use Hooks Yet? {/*can-i-use-hooks-yet*/}
+
+Not yet, but soon!
+
+At React Conf, we said that 16.7 would be the first release to include Hooks. This was a mistake. We shouldn't have attached a specific version number to an unreleased feature. We'll avoid this in the future.
+
+Although 16.7 does not include Hooks, please do not infer anything about the timeline of the Hooks launch. Our plans for Hooks are unchanged:
+
+- The [Hooks proposal](https://github.com/reactjs/rfcs/pull/68) was accepted ([with minor planned changes in response to feedback](https://github.com/reactjs/rfcs/pull/68#issuecomment-439314884)).
+- The [implementation](https://github.com/facebook/react/commit/7bee9fbdd49aa5b9365a94b0ddf6db04bc1bf51c) was merged into the React repo (behind a feature flag).
+- We're currently in the testing phase, and you can expect a public release within a few months.
+
+We've heard from many people who want to start using Hooks in their apps. We also can't wait to ship them! But because Hooks changes how we write React components, we are taking extra time to get the details right. We appreciate your patience as we prepare this exciting new feature for widespread, ahem, _use_.
+
+Learn more about [our roadmap](/blog/2018/11/27/react-16-roadmap) in our previous post.
+
+## Installation {/*installation*/}
+
+React v16.7.0 is available on the npm registry.
+
+To install React 16 with Yarn, run:
+
+```bash
+yarn add react@^16.7.0 react-dom@^16.7.0
+```
+
+To install React 16 with npm, run:
+
+```bash
+npm install --save react@^16.7.0 react-dom@^16.7.0
+```
+
+We also provide UMD builds of React via a CDN:
+
+```html
+<script
+  crossorigin
+  src="https://unpkg.com/react@16/umd/react.production.min.js"
+></script>
+<script
+  crossorigin
+  src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"
+></script>
+```
+
+Refer to the documentation for [detailed installation instructions](/docs/installation).
+
+## Changelog {/*changelog*/}
+
+### React DOM {/*react-dom*/}
+
+- Fix performance of `React.lazy` for large numbers of lazily-loaded components. ([@acdlite](http://github.com/acdlite) in [#14429](https://github.com/facebook/react/pull/14429))
+- Clear fields on unmount to avoid memory leaks. ([@trueadm](http://github.com/trueadm) in [#14276](https://github.com/facebook/react/pull/14276))
+- Fix bug with SSR and context when mixing `react-dom/server@16.6` and `react@<16.6`. ([@gaearon](http://github.com/gaearon) in [#14291](https://github.com/facebook/react/pull/14291))
+- Fix a performance regression in profiling mode. ([@bvaughn](http://github.com/bvaughn) in [#14383](https://github.com/facebook/react/pull/14383))
+
+### Scheduler (Experimental) {/*scheduler-experimental*/}
+
+- Post to MessageChannel instead of window. ([@acdlite](http://github.com/acdlite) in [#14234](https://github.com/facebook/react/pull/14234))
+- Reduce serialization overhead. ([@developit](http://github.com/developit) in [#14249](https://github.com/facebook/react/pull/14249))
+- Fix fallback to `setTimeout` in testing environments. ([@bvaughn](http://github.com/bvaughn) in [#14358](https://github.com/facebook/react/pull/14358))
+- Add methods for debugging. ([@mrkev](http://github.com/mrkev) in [#14053](https://github.com/facebook/react/pull/14053))
diff --git a/beta/src/content/blog/2019/02/06/react-v16.8.0.md b/beta/src/content/blog/2019/02/06/react-v16.8.0.md
new file mode 100644
index 000000000..08e348b8c
--- /dev/null
+++ b/beta/src/content/blog/2019/02/06/react-v16.8.0.md
@@ -0,0 +1,207 @@
+---
+title: "React v16.8: The One With Hooks"
+author: [gaearon]
+---
+
+With React 16.8, [React Hooks](/docs/hooks-intro.html) are available in a stable release!
+
+## What Are Hooks? {/*what-are-hooks*/}
+
+Hooks let you use state and other React features without writing a class. You can also **build your own Hooks** to share reusable stateful logic between components.
+
+If you've never heard of Hooks before, you might find these resources interesting:
+
+* [Introducing Hooks](/docs/hooks-intro.html) explains why we're adding Hooks to React.
+* [Hooks at a Glance](/docs/hooks-overview.html) is a fast-paced overview of the built-in Hooks.
+* [Building Your Own Hooks](/docs/hooks-custom.html) demonstrates code reuse with custom Hooks.
+* [Making Sense of React Hooks](https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889) explores the new possibilities unlocked by Hooks.
+* [useHooks.com](https://usehooks.com/) showcases community-maintained Hooks recipes and demos.
+
+**You don't have to learn Hooks right now.** Hooks have no breaking changes, and we have no plans to remove classes from React. The [Hooks FAQ](/docs/hooks-faq.html) describes the gradual adoption strategy.
+
+## No Big Rewrites {/*no-big-rewrites*/}
+
+We don't recommend rewriting your existing applications to use Hooks overnight. Instead, try using Hooks in some of the new components, and let us know what you think. Code using Hooks will work [side by side](/docs/hooks-intro.html#gradual-adoption-strategy) with existing code using classes.
+
+## Can I Use Hooks Today? {/*can-i-use-hooks-today*/}
+
+Yes! Starting with 16.8.0, React includes a stable implementation of React Hooks for:
+
+* React DOM
+* React DOM Server
+* React Test Renderer
+* React Shallow Renderer
+
+Note that **to enable Hooks, all React packages need to be 16.8.0 or higher**. Hooks won't work if you forget to update, for example, React DOM.
+
+**React Native will support Hooks in the [0.59 release](https://github.com/react-native-community/react-native-releases/issues/79#issuecomment-457735214).**
+
+## Tooling Support {/*tooling-support*/}
+
+React Hooks are now supported by React DevTools. They are also supported in the latest Flow and TypeScript definitions for React. We strongly recommend enabling a new [lint rule called `eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks) to enforce best practices with Hooks. It will soon be included into Create React App by default.
+
+## What's Next {/*whats-next*/}
+
+We described our plan for the next months in the recently published [React Roadmap](/blog/2018/11/27/react-16-roadmap.html).
+
+Note that React Hooks don't cover *all* use cases for classes yet but they're [very close](/docs/hooks-faq.html#do-hooks-cover-all-use-cases-for-classes). Currently, only `getSnapshotBeforeUpdate()` and `componentDidCatch()` methods don't have equivalent Hooks APIs, and these lifecycles are relatively uncommon. If you want, you should be able to use Hooks in most of the new code you're writing.
+
+Even while Hooks were in alpha, the React community created many interesting [examples](https://codesandbox.io/react-hooks) and [recipes](https://usehooks.com) using Hooks for animations, forms, subscriptions, integrating with other libraries, and so on. We're excited about Hooks because they make code reuse easier, helping you write your components in a simpler way and make great user experiences. We can't wait to see what you'll create next!
+
+## Testing Hooks {/*testing-hooks*/}
+
+We have added a new API called `ReactTestUtils.act()` in this release. It ensures that the behavior in your tests matches what happens in the browser more closely. We recommend to wrap any code rendering and triggering updates to your components into `act()` calls. Testing libraries can also wrap their APIs with it (for example, [`react-testing-library`](https://testing-library.com/react)'s `render` and `fireEvent` utilities do this).
+
+For example, the counter example from [this page](/docs/hooks-effect.html) can be tested like this:
+
+```js {3,20-22,29-31}
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { act } from 'react-dom/test-utils';
+import Counter from './Counter';
+
+let container;
+
+beforeEach(() => {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+});
+
+afterEach(() => {
+  document.body.removeChild(container);
+  container = null;
+});
+
+it('can render and update a counter', () => {
+  // Test first render and effect
+  act(() => {
+    ReactDOM.render(<Counter />, container);
+  });
+  const button = container.querySelector('button');
+  const label = container.querySelector('p');
+  expect(label.textContent).toBe('You clicked 0 times');
+  expect(document.title).toBe('You clicked 0 times');
+
+  // Test second render and effect
+  act(() => {
+    button.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+  });
+  expect(label.textContent).toBe('You clicked 1 times');
+  expect(document.title).toBe('You clicked 1 times');
+});
+```
+
+The calls to `act()` will also flush the effects inside of them.
+
+If you need to test a custom Hook, you can do so by creating a component in your test, and using your Hook from it. Then you can test the component you wrote.
+
+To reduce the boilerplate, we recommend using [`react-testing-library`](https://testing-library.com/react) which is designed to encourage writing tests that use your components as the end users do.
+
+## Thanks {/*thanks*/}
+
+We'd like to thank everybody who commented on the [Hooks RFC](https://github.com/reactjs/rfcs/pull/68) for sharing their feedback. We've read all of your comments and made some adjustments to the final API based on them.
+
+## Installation {/*installation*/}
+
+### React {/*react*/}
+
+React v16.8.0 is available on the npm registry.
+
+To install React 16 with Yarn, run:
+
+```bash
+yarn add react@^16.8.0 react-dom@^16.8.0
+```
+
+To install React 16 with npm, run:
+
+```bash
+npm install --save react@^16.8.0 react-dom@^16.8.0
+```
+
+We also provide UMD builds of React via a CDN:
+
+```html
+<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
+<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
+```
+
+Refer to the documentation for [detailed installation instructions](/docs/installation.html).
+
+### ESLint Plugin for React Hooks {/*eslint-plugin-for-react-hooks*/}
+
+>Note
+>
+>As mentioned above, we strongly recommend using the `eslint-plugin-react-hooks` lint rule.
+>
+>If you're using Create React App, instead of manually configuring ESLint you can wait for the next version of `react-scripts` which will come out shortly and will include this rule.
+
+Assuming you already have ESLint installed, run:
+
+```sh
+# npm
+npm install eslint-plugin-react-hooks --save-dev
+
+# yarn
+yarn add eslint-plugin-react-hooks --dev
+```
+
+Then add it to your ESLint configuration:
+
+```js
+{
+  "plugins": [
+    // ...
+    "react-hooks"
+  ],
+  "rules": {
+    // ...
+    "react-hooks/rules-of-hooks": "error"
+  }
+}
+```
+
+## Changelog {/*changelog*/}
+
+### React {/*react-1*/}
+
+* Add [Hooks](https://reactjs.org/docs/hooks-intro.html) — a way to use state and other React features without writing a class. ([@acdlite](https://github.com/acdlite) et al. in [#13968](https://github.com/facebook/react/pull/13968))
+* Improve the `useReducer` Hook lazy initialization API. ([@acdlite](https://github.com/acdlite) in [#14723](https://github.com/facebook/react/pull/14723))
+
+### React DOM {/*react-dom*/}
+
+* Bail out of rendering on identical values for `useState` and `useReducer` Hooks. ([@acdlite](https://github.com/acdlite) in [#14569](https://github.com/facebook/react/pull/14569))
+* Don’t compare the first argument passed to `useEffect`/`useMemo`/`useCallback` Hooks. ([@acdlite](https://github.com/acdlite) in [#14594](https://github.com/facebook/react/pull/14594))
+* Use `Object.is` algorithm for comparing `useState` and `useReducer` values. ([@Jessidhia](https://github.com/Jessidhia) in [#14752](https://github.com/facebook/react/pull/14752))
+* Support synchronous thenables passed to `React.lazy()`. ([@gaearon](https://github.com/gaearon) in [#14626](https://github.com/facebook/react/pull/14626))
+* Render components with Hooks twice in Strict Mode (DEV-only) to match class behavior. ([@gaearon](https://github.com/gaearon) in [#14654](https://github.com/facebook/react/pull/14654))
+* Warn about mismatching Hook order in development. ([@threepointone](https://github.com/threepointone) in [#14585](https://github.com/facebook/react/pull/14585) and [@acdlite](https://github.com/acdlite) in [#14591](https://github.com/facebook/react/pull/14591))
+* Effect clean-up functions must return either `undefined` or a function. All other values, including `null`, are not allowed. [@acdlite](https://github.com/acdlite) in [#14119](https://github.com/facebook/react/pull/14119)
+
+### React Test Renderer {/*react-test-renderer*/}
+
+* Support Hooks in the shallow renderer. ([@trueadm](https://github.com/trueadm) in [#14567](https://github.com/facebook/react/pull/14567))
+* Fix wrong state in `shouldComponentUpdate` in the presence of `getDerivedStateFromProps` for Shallow Renderer. ([@chenesan](https://github.com/chenesan) in [#14613](https://github.com/facebook/react/pull/14613))
+* Add `ReactTestRenderer.act()` and `ReactTestUtils.act()` for batching updates so that tests more closely match real behavior. ([@threepointone](https://github.com/threepointone) in [#14744](https://github.com/facebook/react/pull/14744))
+
+### ESLint Plugin: React Hooks {/*eslint-plugin-react-hooks*/}
+
+* Initial [release](https://www.npmjs.com/package/eslint-plugin-react-hooks). ([@calebmer](https://github.com/calebmer) in [#13968](https://github.com/facebook/react/pull/13968))
+* Fix reporting after encountering a loop. ([@calebmer](https://github.com/calebmer) and [@Yurickh](https://github.com/Yurickh) in [#14661](https://github.com/facebook/react/pull/14661))
+* Don't consider throwing to be a rule violation. ([@sophiebits](https://github.com/sophiebits) in [#14040](https://github.com/facebook/react/pull/14040))
+
+## Hooks Changelog Since Alpha Versions {/*hooks-changelog-since-alpha-versions*/}
+
+The above changelog contains all notable changes since our last **stable** release (16.7.0). [As with all our minor releases](/docs/faq-versioning.html), none of the changes break backwards compatibility.
+
+If you're currently using Hooks from an alpha build of React, note that this release does contain some small breaking changes to Hooks. **We don't recommend depending on alphas in production code.** We publish them so we can make changes in response to community feedback before the API is stable.
+
+Here are all breaking changes to Hooks that have been made since the first alpha release:
+
+* Remove `useMutationEffect`. ([@sophiebits](https://github.com/sophiebits) in [#14336](https://github.com/facebook/react/pull/14336))
+* Rename `useImperativeMethods` to `useImperativeHandle`. ([@threepointone](https://github.com/threepointone) in [#14565](https://github.com/facebook/react/pull/14565))
+* Bail out of rendering on identical values for `useState` and `useReducer` Hooks. ([@acdlite](https://github.com/acdlite) in [#14569](https://github.com/facebook/react/pull/14569))
+* Don’t compare the first argument passed to `useEffect`/`useMemo`/`useCallback` Hooks. ([@acdlite](https://github.com/acdlite) in [#14594](https://github.com/facebook/react/pull/14594))
+* Use `Object.is` algorithm for comparing `useState` and `useReducer` values. ([@Jessidhia](https://github.com/Jessidhia) in [#14752](https://github.com/facebook/react/pull/14752))
+* Render components with Hooks twice in Strict Mode (DEV-only). ([@gaearon](https://github.com/gaearon) in [#14654](https://github.com/facebook/react/pull/14654))
+* Improve the `useReducer` Hook lazy initialization API. ([@acdlite](https://github.com/acdlite) in [#14723](https://github.com/facebook/react/pull/14723))
diff --git a/beta/src/content/blog/2019/02/23/is-react-translated-yet.md b/beta/src/content/blog/2019/02/23/is-react-translated-yet.md
new file mode 100644
index 000000000..368d9f8e1
--- /dev/null
+++ b/beta/src/content/blog/2019/02/23/is-react-translated-yet.md
@@ -0,0 +1,76 @@
+---
+title: 'Is React Translated Yet? ¡Sí! Sim! はい！'
+author: [tesseralis]
+---
+
+We’re excited to announce an ongoing effort to maintain official translations of the React documentation website into different languages. Thanks to the dedicated efforts of React community members from around the world, React is now being translated into _over 30_ languages! You can find them on the new [Languages](/languages) page.
+
+In addition, the following three languages have completed translating most of the React Docs! 🎉
+
+- **Spanish: [es.reactjs.org](https://es.reactjs.org)**
+- **Japanese: [ja.reactjs.org](https://ja.reactjs.org)**
+- **Brazilian Portuguese: [pt-br.reactjs.org](https://pt-br.reactjs.org)**
+
+Special congratulations to [Alejandro Ñáñez Ortiz](https://github.com/alejandronanez), [Rainer Martínez Fraga](https://github.com/carburo), [David Morales](https://github.com/dmorales), [Miguel Alejandro Bolivar Portilla](https://github.com/Darking360), and all the contributors to the Spanish translation for being the first to _completely_ translate the core pages of the docs!
+
+## Why Localization Matters {/*why-localization-matters*/}
+
+React already has many meetups and conferences around the world, but many programmers don't use English as their primary language. We’d love to support local communities who use React by making our documentation available in most popular languages.
+
+In the past, React community members have created unofficial translations for [Chinese](https://github.com/discountry/react), [Arabic](https://wiki.hsoub.com/React), and [Korean](https://github.com/reactjs/ko.reactjs.org/issues/4); by making an official channel for these translated docs we're hoping to make them easier to find and help make sure that non-English-speaking users of React aren't left behind.
+
+## Contributing {/*contributing*/}
+
+If you would like to help out on a current translation, check out the [Languages](/languages) page and click on the "Contribute" link for your language.
+
+Can't find your language? If you'd like to maintain your language's translation fork, follow the instructions in the [translation repo](https://github.com/reactjs/reactjs.org-translation#starting-a-new-translation)!
+
+## Backstory {/*backstory*/}
+
+Hi everyone! I'm [Nat](https://twitter.com/tesseralis)! You may know me as the [polyhedra lady](https://www.youtube.com/watch?v=Ew-UzGC8RqQ). For the past few weeks, I've been helping the React team coordinate their translation effort. Here's how I did it.
+
+Our original approach for translations was to use a SaaS platform that allows users to submit translations. There was already a [pull request](https://github.com/reactjs/reactjs.org/pull/873) to integrate it and my original responsibility was to finish that integration. However, we had concerns about the feasibility of that integration and the current quality of translations on the platform. Our primary concern was ensuring that translations kept up to date with the main repo and didn't become "stale".
+
+[Dan](https://twitter.com/dan_abramov) encouraged me to look for alternate solutions, and we stumbled across how [Vue](https://vuejs.org) maintained its translations -- through different forks of the main repo on GitHub. In particular, the [Japanese translation](https://jp.vuejs.org) used a bot to periodically check for changes in the English repo and submits pull requests whenever there is a change.
+
+This approach appealed to us for several reasons:
+
+- It was less code integration to get off the ground.
+- It encouraged active maintainers for each repo to ensure quality.
+- Contributors already understand GitHub as a platform and are motivated to contribute directly to the React organization.
+
+We started off with an initial trial period of three languages: Spanish, Japanese, and Simplified Chinese. This allowed us to work out any kinks in our process and make sure future translations are set up for success. I wanted to give the translation teams freedom to choose whatever tools they felt comfortable with. The only requirement is a [checklist](https://github.com/reactjs/reactjs.org-translation/blob/master/PROGRESS.template.md) that outlines the order of importance for translating pages.
+
+After the trial period, we were ready to accept more languages. I created [a script](https://github.com/reactjs/reactjs.org-translation/blob/master/scripts/create.js) to automate the creation of the new language repo, and a site, [Is React Translated Yet?](https://translations.reactjs.org), to track progress on the different translations. We started _10_ new translations on our first day alone!
+
+Because of the automation, the rest of the maintenance went mostly smoothly. We eventually created a [Slack channel](https://rt-slack-invite.herokuapp.com) to make it easier for translators to share information, and I released a guide solidifying the [responsibilities of maintainers](https://github.com/reactjs/reactjs.org-translation/blob/master/maintainer-guide.md). Allowing translators to talk with each other was a great boon -- for example, the Arabic, Persian, and Hebrew translations were able to talk to each other in order to get [right-to-left text](https://en.wikipedia.org/wiki/Right-to-left) working!
+
+## The Bot {/*the-bot*/}
+
+The most challenging part was getting the bot to sync changes from the English version of the site. Initially we were using the [che-tsumi](https://github.com/vuejs-jp/che-tsumi) bot created by the Japanese Vue translation team, but we soon decided to build our own bot to suit our needs. In particular, the che-tsumi bot works by [cherry picking](https://git-scm.com/docs/git-cherry-pick) new commits. This ended up causing a cavalade of new issues that were interconnected, especially when [Hooks were released](/blog/2019/02/06/react-v16.8.0).
+
+In the end, we decided that instead of cherry picking each commit, it made more sense to merge all new commits and create a pull request around once a day. Conflicts are merged as-is and listed in the [pull request](https://github.com/reactjs/pt-BR.reactjs.org/pull/114), leaving a checklist for maintainers to fix.
+
+Creating the [sync script](https://github.com/reactjs/reactjs.org-translation/blob/master/scripts/sync.js) was easy enough: it downloads the translated repo, adds the original as a remote, pulls from it, merges the conflicts, and creates a pull request.
+
+The problem was finding a place for the bot to run. I'm a frontend developer for a reason -- Heroku and its ilk are alien to me and _endlessly_ frustrating. In fact, until this past Tuesday, I was running the script by hand on my local machine!
+
+The biggest challenge was space. Each fork of the repo is around 100MB -- which takes minutes to clone on my local machine. We have _32_ forks, and the free tiers of most deployment platforms I checked limited you to 512MB of storage.
+
+After lots of notepad calculations, I found a solution: delete each repo once we've finished the script and limit the concurrency of `sync` scripts that run at once to be within the storage requirements. Luckily, Heroku dynos have a much faster Internet connection and are able to clone even the React repo quickly.
+
+There were other smaller issues that I ran into. I tried using the [Heroku Scheduler](https://elements.heroku.com/addons/scheduler) add-on so I didn't have to write any actual `watch` code, but it end up running too inconsistently, and I [had an existential meltdown on Twitter](https://twitter.com/tesseralis/status/1097387938088796160) when I couldn't figure out how to send commits from the Heroku dyno. But in the end, this frontend engineer was able to get the bot working!
+
+There are, as always, improvements I want to make to the bot. Right now it doesn't check whether there is an outstanding pull request before pushing another one. It's still hard to tell the exact change that happened in the original source, and it's possible to miss out on a needed translation change. But I trust the maintainers we've chosen to work through these issues, and the bot is [open source](https://github.com/reactjs/reactjs.org-translation) if anyone wants to help me make these improvements!
+
+## Thanks {/*thanks*/}
+
+Finally, I would like to extend my gratitude to the following people and groups:
+
+- All the translation maintainers and contributors who are helping translate React to more than thirty languages.
+- The [Vue.js Japan User Group](https://github.com/vuejs-jp) for initiating the idea of having bot-managed translations, and especially [Hanatani Takuma](https://github.com/potato4d) for helping us understand their approach and helping maintain the Japanese translation.
+- [Soichiro Miki](https://github.com/smikitky) for many [contributions](https://github.com/reactjs/reactjs.org/pull/1636) and thoughtful comments on the overall translation process, as well as for maintaining the Japanese translation.
+- [Eric Nakagawa](https://github.com/ericnakagawa) for managing our previous translation process.
+- [Brian Vaughn](https://github.com/bvaughn) for setting up the [languages page](/languages) and managing all the subdomains.
+
+And finally, thank you to [Dan Abramov](https://twitter.com/dan_abramov) for giving me this opportunity and being a great mentor along the way.
diff --git a/beta/src/content/blog/2019/08/08/react-v16.9.0.md b/beta/src/content/blog/2019/08/08/react-v16.9.0.md
new file mode 100644
index 000000000..e21cfe236
--- /dev/null
+++ b/beta/src/content/blog/2019/08/08/react-v16.9.0.md
@@ -0,0 +1,250 @@
+---
+title: 'React v16.9.0 and the Roadmap Update'
+author: [gaearon, bvaughn]
+---
+
+Today we are releasing React 16.9. It contains several new features, bugfixes, and new deprecation warnings to help prepare for a future major release.
+
+## New Deprecations {/*new-deprecations*/}
+
+### Renaming Unsafe Lifecycle Methods {/*renaming-unsafe-lifecycle-methods*/}
+
+[Over a year ago](/blog/2018/03/27/update-on-async-rendering), we announced that unsafe lifecycle methods are getting renamed:
+
+- `componentWillMount` → `UNSAFE_componentWillMount`
+- `componentWillReceiveProps` → `UNSAFE_componentWillReceiveProps`
+- `componentWillUpdate` → `UNSAFE_componentWillUpdate`
+
+**React 16.9 does not contain breaking changes, and the old names continue to work in this release.** But you will now see a warning when using any of the old names:
+
+![Warning: componentWillMount has been renamed, and is not recommended for use.](https://i.imgur.com/sngxSML.png)
+
+As the warning suggests, there are usually [better approaches](/blog/2018/03/27/update-on-async-rendering#migrating-from-legacy-lifecycles) for each of the unsafe methods. However, maybe you don't have the time to migrate or test these components. In that case, we recommend running a ["codemod"](https://medium.com/@cpojer/effective-javascript-codemods-5a6686bb46fb) script that renames them automatically:
+
+```bash
+cd your_project
+npx react-codemod rename-unsafe-lifecycles
+```
+
+_(Note that it says `npx`, not `npm`. `npx` is a utility that comes with Node 6+ by default.)_
+
+Running this codemod will replace the old names like `componentWillMount` with the new names like `UNSAFE_componentWillMount`:
+
+![Codemod in action](https://i.imgur.com/Heyvcyi.gif)
+
+The new names like `UNSAFE_componentWillMount` **will keep working in both React 16.9 and in React 17.x**. However, the new `UNSAFE_` prefix will help components with problematic patterns stand out during the code review and debugging sessions. (If you'd like, you can further discourage their use inside your app with the opt-in [Strict Mode](/docs/strict-mode).)
+
+> Note
+>
+> Learn more about our [versioning policy and commitment to stability](/docs/faq-versioning#commitment-to-stability).
+
+### Deprecating `javascript:` URLs {/*deprecating-javascript-urls*/}
+
+URLs starting with `javascript:` are a dangerous attack surface because it's easy to accidentally include unsanitized output in a tag like `<a href>` and create a security hole:
+
+```js
+const userProfile = {
+  website: "javascript: alert('you got hacked')",
+};
+// This will now warn:
+<a href={userProfile.website}>Profile</a>;
+```
+
+**In React 16.9,** this pattern continues to work, but it will log a warning. If you use `javascript:` URLs for logic, try to use React event handlers instead. (As a last resort, you can circumvent the protection with [`dangerouslySetInnerHTML`](/docs/dom-elements#dangerouslysetinnerhtml), but it is highly discouraged and often leads to security holes.)
+
+**In a future major release,** React will throw an error if it encounters a `javascript:` URL.
+
+### Deprecating "Factory" Components {/*deprecating-factory-components*/}
+
+Before compiling JavaScript classes with Babel became popular, React had support for a "factory" component that returns an object with a `render` method:
+
+```js
+function FactoryComponent() {
+  return {
+    render() {
+      return <div />;
+    },
+  };
+}
+```
+
+This pattern is confusing because it looks too much like a function component — but it isn't one. (A function component would just return the `<div />` in the above example.)
+
+This pattern was almost never used in the wild, and supporting it causes React to be slightly larger and slower than necessary. So we are deprecating this pattern in 16.9 and logging a warning if it's encountered. If you rely on it, adding `FactoryComponent.prototype = React.Component.prototype` can serve as a workaround. Alternatively, you can convert it to either a class or a function component.
+
+We don't expect most codebases to be affected by this.
+
+## New Features {/*new-features*/}
+
+### Async [`act()`](/docs/test-utils#act) for Testing {/*async-act-for-testing*/}
+
+[React 16.8](/blog/2019/02/06/react-v16.8.0) introduced a new testing utility called [`act()`](/docs/test-utils#act) to help you write tests that better match the browser behavior. For example, multiple state updates inside a single `act()` get batched. This matches how React already works when handling real browser events, and helps prepare your components for the future in which React will batch updates more often.
+
+However, in 16.8 `act()` only supported synchronous functions. Sometimes, you might have seen a warning like this in a test but [could not easily fix it](https://github.com/facebook/react/issues/14769):
+
+```
+An update to SomeComponent inside a test was not wrapped in act(...).
+```
+
+**In React 16.9, `act()` also accepts asynchronous functions,** and you can `await` its call:
+
+```js
+await act(async () => {
+  // ...
+});
+```
+
+This solves the remaining cases where you couldn't use `act()` before, such as when the state update was inside an asynchronous function. As a result, **you should be able to fix all the remaining `act()` warnings in your tests now.**
+
+We've heard there wasn't enough information about how to write tests with `act()`. The new [Testing Recipes](/docs/testing-recipes) guide describes common scenarios, and how `act()` can help you write good tests. These examples use vanilla DOM APIs, but you can also use [React Testing Library](https://testing-library.com/docs/react-testing-library/intro) to reduce the boilerplate code. Many of its methods already use `act()` internally.
+
+Please let us know [on the issue tracker](https://github.com/facebook/react/issues) if you bump into any other scenarios where `act()` doesn't work well for you, and we'll try to help.
+
+### Performance Measurements with [`<React.Profiler>`](/docs/profiler) {/*performance-measurements-with-reactprofiler*/}
+
+In React 16.5, we introduced a new [React Profiler for DevTools](/blog/2018/09/10/introducing-the-react-profiler) that helps find performance bottlenecks in your application. **In React 16.9, we are also adding a _programmatic_ way to gather measurements** called `<React.Profiler>`. We expect that most smaller apps won't use it, but it can be handy to track performance regressions over time in larger apps.
+
+The `<Profiler>` measures how often a React application renders and what the "cost" of rendering is. Its purpose is to help identify parts of an application that are slow and may benefit from [optimizations such as memoization](/docs/hooks-faq#how-to-memoize-calculations).
+
+A `<Profiler>` can be added anywhere in a React tree to measure the cost of rendering that part of the tree.
+It requires two props: an `id` (string) and an [`onRender` callback](/docs/profiler#onrender-callback) (function) which React calls any time a component within the tree "commits" an update.
+
+```js {2,7}
+render(
+  <Profiler id="application" onRender={onRenderCallback}>
+    <App>
+      <Navigation {...props} />
+      <Main {...props} />
+    </App>
+  </Profiler>
+);
+```
+
+To learn more about the `Profiler` and the parameters passed to the `onRender` callback, check out [the `Profiler` docs](/docs/profiler).
+
+> Note:
+>
+> Profiling adds some additional overhead, so **it is disabled in [the production build](https://reactjs.org/docs/optimizing-performance#use-the-production-build)**.
+>
+> To opt into production profiling, React provides a special production build with profiling enabled.
+> Read more about how to use this build at [fb.me/react-profiling](https://fb.me/react-profiling).
+
+## Notable Bugfixes {/*notable-bugfixes*/}
+
+This release contains a few other notable improvements:
+
+- A crash when calling `findDOMNode()` inside a `<Suspense>` tree [has been fixed](https://github.com/facebook/react/pull/15312).
+
+- A memory leak caused by retaining deleted subtrees [has been fixed](https://github.com/facebook/react/pull/16115) too.
+
+- An infinite loop caused by `setState` in `useEffect` now [logs an error](https://github.com/facebook/react/pull/15180). (This is similar to the error you see when you call `setState` in `componentDidUpdate` in a class.)
+
+We're thankful to all the contributors who helped surface and fix these and other issues. You can find the full changelog [below](#changelog).
+
+## An Update to the Roadmap {/*an-update-to-the-roadmap*/}
+
+In [November 2018](/blog/2018/11/27/react-16-roadmap), we have posted this roadmap for the 16.x releases:
+
+- A minor 16.x release with React Hooks (past estimate: Q1 2019)
+- A minor 16.x release with Concurrent Mode (past estimate: Q2 2019)
+- A minor 16.x release with Suspense for Data Fetching (past estimate: mid 2019)
+
+These estimates were too optimistic, and we've needed to adjust them.
+
+**tldr:** We shipped Hooks on time, but we're regrouping Concurrent Mode and Suspense for Data Fetching into a single release that we intend to release later this year.
+
+In February, we [shipped a stable 16.8 release](/blog/2019/02/06/react-v16.8.0) including React Hooks, with React Native support coming [a month later](https://reactnative.dev/blog/2019/03/12/releasing-react-native-059). However, we underestimated the follow-up work for this release, including the lint rules, developer tools, examples, and more documentation. This shifted the timeline by a few months.
+
+Now that React Hooks are rolled out, the work on Concurrent Mode and Suspense for Data Fetching is in full swing. The [new Facebook website that's currently in active development](https://twitter.com/facebook/status/1123322299418124289) is built on top of these features. Testing them with real code helped discover and address many issues before they can affect the open source users. Some of these fixes involved an internal redesign of these features, which has also caused the timeline to slip.
+
+With this new understanding, here's what we plan to do next.
+
+### One Release Instead of Two {/*one-release-instead-of-two*/}
+
+Concurrent Mode and Suspense [power the new Facebook website](https://developers.facebook.com/videos/2019/building-the-new-facebookcom-with-react-graphql-and-relay/) that's in active development, so we are confident that they're close to a stable state technically. We also now better understand the concrete steps before they are ready for open source adoption.
+
+Originally we thought we would split Concurrent Mode and Suspense for Data Fetching into two releases. We've found that this sequencing is confusing to explain because these features are more related than we thought at first. So we plan to release support for both Concurrent Mode and Suspense for Data Fetching in a single combined release instead.
+
+We don't want to overpromise the release date again. Given that we rely on both of them in production code, we expect to provide a 16.x release with opt-in support for them this year.
+
+### An Update on Data Fetching {/*an-update-on-data-fetching*/}
+
+While React is not opinionated about how you fetch data, the first release of Suspense for Data Fetching will likely focus on integrating with _opinionated data fetching libraries_. For example, at Facebook we are using upcoming Relay APIs that integrate with Suspense. We will document how other opinionated libraries like Apollo can support a similar integration.
+
+In the first release, we _don't_ intend to focus on the ad-hoc "fire an HTTP request" solution we used in earlier demos (also known as "React Cache"). However, we expect that both we and the React community will be exploring that space in the months after the initial release.
+
+### An Update on Server Rendering {/*an-update-on-server-rendering*/}
+
+We have started the work on the [new Suspense-capable server renderer](/blog/2018/11/27/react-16-roadmap#suspense-for-server-rendering), but we _don't_ expect it to be ready for the initial release of Concurrent Mode. This release will, however, provide a temporary solution that lets the existing server renderer emit HTML for Suspense fallbacks immediately, and then render their real content on the client. This is the solution we are currently using at Facebook ourselves until the streaming renderer is ready.
+
+### Why Is It Taking So Long? {/*why-is-it-taking-so-long*/}
+
+We've shipped the individual pieces leading up to Concurrent Mode as they became stable, including [new context API](/blog/2018/03/29/react-v-16-3), [lazy loading with Suspense](/blog/2018/10/23/react-v-16-6), and [Hooks](/blog/2019/02/06/react-v16.8.0). We are also eager to release the other missing parts, but [trying them at scale](/docs/design-principles#dogfooding) is an important part of the process. The honest answer is that it just took more work than we expected when we started. As always, we appreciate your questions and feedback on [Twitter](https://twitter.com/reactjs) and in our [issue tracker](https://github.com/facebook/react/issues).
+
+## Installation {/*installation*/}
+
+### React {/*react*/}
+
+React v16.9.0 is available on the npm registry.
+
+To install React 16 with Yarn, run:
+
+```bash
+yarn add react@^16.9.0 react-dom@^16.9.0
+```
+
+To install React 16 with npm, run:
+
+```bash
+npm install --save react@^16.9.0 react-dom@^16.9.0
+```
+
+We also provide UMD builds of React via a CDN:
+
+```html
+<script
+  crossorigin
+  src="https://unpkg.com/react@16/umd/react.production.min.js"
+></script>
+<script
+  crossorigin
+  src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"
+></script>
+```
+
+Refer to the documentation for [detailed installation instructions](/docs/installation).
+
+## Changelog {/*changelog*/}
+
+### React {/*changelog-react*/}
+
+- Add `<React.Profiler>` API for gathering performance measurements programmatically. ([@bvaughn](https://github.com/bvaughn) in [#15172](https://github.com/facebook/react/pull/15172))
+- Remove `unstable_ConcurrentMode` in favor of `unstable_createRoot`. ([@acdlite](https://github.com/acdlite) in [#15532](https://github.com/facebook/react/pull/15532))
+
+### React DOM {/*changelog-react-dom*/}
+
+- Deprecate old names for the `UNSAFE_*` lifecycle methods. ([@bvaughn](https://github.com/bvaughn) in [#15186](https://github.com/facebook/react/pull/15186) and [@threepointone](https://github.com/threepointone) in [#16103](https://github.com/facebook/react/pull/16103))
+- Deprecate `javascript:` URLs as a common attack surface. ([@sebmarkbage](https://github.com/sebmarkbage) in [#15047](https://github.com/facebook/react/pull/15047))
+- Deprecate uncommon "module pattern" (factory) components. ([@sebmarkbage](https://github.com/sebmarkbage) in [#15145](https://github.com/facebook/react/pull/15145))
+- Add support for the `disablePictureInPicture` attribute on `<video>`. ([@eek](https://github.com/eek) in [#15334](https://github.com/facebook/react/pull/15334))
+- Add support for `onLoad` event for `<embed>`. ([@cherniavskii](https://github.com/cherniavskii) in [#15614](https://github.com/facebook/react/pull/15614))
+- Add support for editing `useState` state from DevTools. ([@bvaughn](https://github.com/bvaughn) in [#14906](https://github.com/facebook/react/pull/14906))
+- Add support for toggling Suspense from DevTools. ([@gaearon](https://github.com/gaearon) in [#15232](https://github.com/facebook/react/pull/15232))
+- Warn when `setState` is called from `useEffect`, creating a loop. ([@gaearon](https://github.com/gaearon) in [#15180](https://github.com/facebook/react/pull/15180))
+- Fix a memory leak. ([@paulshen](https://github.com/paulshen) in [#16115](https://github.com/facebook/react/pull/16115))
+- Fix a crash inside `findDOMNode` for components wrapped in `<Suspense>`. ([@acdlite](https://github.com/acdlite) in [#15312](https://github.com/facebook/react/pull/15312))
+- Fix pending effects from being flushed too late. ([@acdlite](https://github.com/acdlite) in [#15650](https://github.com/facebook/react/pull/15650))
+- Fix incorrect argument order in a warning message. ([@brickspert](https://github.com/brickspert) in [#15345](https://github.com/facebook/react/pull/15345))
+- Fix hiding Suspense fallback nodes when there is an `!important` style. ([@acdlite](https://github.com/acdlite) in [#15861](https://github.com/facebook/react/pull/15861) and [#15882](https://github.com/facebook/react/pull/15882))
+- Slightly improve hydration performance. ([@bmeurer](https://github.com/bmeurer) in [#15998](https://github.com/facebook/react/pull/15998))
+
+### React DOM Server {/*changelog-react-dom-server*/}
+
+- Fix incorrect output for camelCase custom CSS property names. ([@bedakb](https://github.com/bedakb) in [#16167](https://github.com/facebook/react/pull/16167))
+
+### React Test Utilities and Test Renderer {/*changelog-react-test-utilities-and-test-renderer*/}
+
+- Add `act(async () => ...)` for testing asynchronous state updates. ([@threepointone](https://github.com/threepointone) in [#14853](https://github.com/facebook/react/pull/14853))
+- Add support for nesting `act` from different renderers. ([@threepointone](https://github.com/threepointone) in [#16039](https://github.com/facebook/react/pull/16039) and [#16042](https://github.com/facebook/react/pull/16042))
+- Warn in Strict Mode if effects are scheduled outside an `act()` call. ([@threepointone](https://github.com/threepointone) in [#15763](https://github.com/facebook/react/pull/15763) and [#16041](https://github.com/facebook/react/pull/16041))
+- Warn when using `act` from the wrong renderer. ([@threepointone](https://github.com/threepointone) in [#15756](https://github.com/facebook/react/pull/15756))
diff --git a/beta/src/content/blog/2019/08/15/new-react-devtools.md b/beta/src/content/blog/2019/08/15/new-react-devtools.md
new file mode 100644
index 000000000..0e15a2f38
--- /dev/null
+++ b/beta/src/content/blog/2019/08/15/new-react-devtools.md
@@ -0,0 +1,81 @@
+---
+title: 'Introducing the New React DevTools'
+author: [bvaughn]
+---
+
+We are excited to announce a new release of the React Developer Tools, available today in Chrome, Firefox, and (Chromium) Edge!
+
+## What's changed? {/*whats-changed*/}
+
+A lot has changed in version 4!
+At a high level, this new version should offer significant performance gains and an improved navigation experience.
+It also offers full support for React Hooks, including inspecting nested objects.
+
+![DevTools version 4 screenshot](/images/blog/devtools-v4-screenshot.png)
+
+[Visit the interactive tutorial](https://react-devtools-tutorial.now.sh/) to try out the new version or [see the changelog](https://github.com/facebook/react/blob/master/packages/react-devtools/CHANGELOG.md#400-august-15-2019) for demo videos and more details.
+
+## Which versions of React are supported? {/*which-versions-of-react-are-supported*/}
+
+**`react-dom`**
+
+- `0`-`14.x`: Not supported
+- `15.x`: Supported (except for the new component filters feature)
+- `16.x`: Supported
+
+**`react-native`**
+
+- `0`-`0.61.x`: Not supported
+- `0.62`: Supported
+
+## How do I get the new DevTools? {/*how-do-i-get-the-new-devtools*/}
+
+React DevTools is available as an extension for [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) and [Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/).
+If you have already installed the extension, it should update automatically within the next couple of hours.
+
+If you use the standalone shell (e.g. in React Native or Safari), you can install the new version [from NPM](https://www.npmjs.com/package/react-devtools):
+
+```shell
+npm install -g react-devtools@^4
+```
+
+## Where did all of the DOM elements go? {/*where-did-all-of-the-dom-elements-go*/}
+
+The new DevTools provides a way to filter components from the tree to make it easier to navigate deeply nested hierarchies.
+Host nodes (e.g. HTML `<div>`, React Native `<View>`) are _hidden by default_, but this filter can be disabled:
+
+![DevTools component filters](/images/blog/devtools-component-filters.gif)
+
+## How do I get the old version back? {/*how-do-i-get-the-old-version-back*/}
+
+If you are working with React Native version 60 (or older) you can install the previous release of DevTools from NPM:
+
+```shell
+npm install --dev react-devtools@^3
+```
+
+For older versions of React DOM (v0.14 or earlier) you will need to build the extension from source:
+
+```shell
+# Checkout the extension source
+git clone https://github.com/facebook/react-devtools
+
+cd react-devtools
+
+# Checkout the previous release branch
+git checkout v3
+
+# Install dependencies and build the unpacked extension
+yarn install
+yarn build:extension
+
+# Follow the on-screen instructions to complete installation
+```
+
+## Thank you! {/*thank-you*/}
+
+We'd like to thank everyone who tested the early release of DevTools version 4.
+Your feedback helped improve this initial release significantly.
+
+We still have many exciting features planned and feedback is always welcome!
+Please feel free to open a [GitHub issue](https://github.com/facebook/react/issues/new?labels=Component:%20Developer%20Tools) or tag [@reactjs on Twitter](https://twitter.com/reactjs).
diff --git a/beta/src/content/blog/2019/10/22/react-release-channels.md b/beta/src/content/blog/2019/10/22/react-release-channels.md
new file mode 100644
index 000000000..1bc33e8bf
--- /dev/null
+++ b/beta/src/content/blog/2019/10/22/react-release-channels.md
@@ -0,0 +1,103 @@
+---
+title: 'Preparing for the Future with React Prereleases'
+author: [acdlite]
+---
+
+To share upcoming changes with our partners in the React ecosystem, we're establishing official prerelease channels. We hope this process will help us make changes to React with confidence, and give developers the opportunity to try out experimental features.
+
+> This post will be most relevant to developers who work on frameworks, libraries, or developer tooling. Developers who use React primarily to build user-facing applications should not need to worry about our prerelease channels.
+
+React relies on a thriving open source community to file bug reports, open pull requests, and [submit RFCs](https://github.com/reactjs/rfcs). To encourage feedback, we sometimes share special builds of React that include unreleased features.
+
+Because the source of truth for React is our [public GitHub repository](https://github.com/facebook/react), it's always been possible to build a copy of React that includes the latest changes. However it's much easier for developers to install React from npm, so we occasionally publish prerelease builds to the npm registry. A recent example is the 16.7 alpha, which included an early version of the Hooks API.
+
+We would like to make it even easier for developers to test prerelease builds of React, so we're formalizing our process with three separate release channels.
+
+## Release Channels {/*release-channels*/}
+
+> The information in this post is also available on our [Release Channels](/docs/release-channels) page. We will update that document whenever there are changes to our release process.
+
+Each of React's release channels is designed for a distinct use case:
+
+- [**Latest**](#latest-channel) is for stable, semver React releases. It's what you get when you install React from npm. This is the channel you're already using today. **Use this for all user-facing React applications.**
+- [**Next**](#next-channel) tracks the master branch of the React source code repository. Think of these as release candidates for the next minor semver release. Use this for integration testing between React and third party projects.
+- [**Experimental**](#experimental-channel) includes experimental APIs and features that aren't available in the stable releases. These also track the master branch, but with additional feature flags turned on. Use this to try out upcoming features before they are released.
+
+All releases are published to npm, but only Latest uses [semantic versioning](/docs/faq-versioning). Prereleases (those in the Next and Experimental channels) have versions generated from a hash of their contents, e.g. `0.0.0-1022ee0ec` for Next and `0.0.0-experimental-1022ee0ec` for Experimental.
+
+**The only officially supported release channel for user-facing applications is Latest**. Next and Experimental releases are provided for testing purposes only, and we provide no guarantees that behavior won't change between releases. They do not follow the semver protocol that we use for releases from Latest.
+
+By publishing prereleases to the same registry that we use for stable releases, we are able to take advantage of the many tools that support the npm workflow, like [unpkg](https://unpkg.com) and [CodeSandbox](https://codesandbox.io).
+
+### Latest Channel {/*latest-channel*/}
+
+Latest is the channel used for stable React releases. It corresponds to the `latest` tag on npm. It is the recommended channel for all React apps that are shipped to real users.
+
+**If you're not sure which channel you should use, it's Latest.** If you're a React developer, this is what you're already using.
+
+You can expect updates to Latest to be extremely stable. Versions follow the semantic versioning scheme. Learn more about our commitment to stability and incremental migration in our [versioning policy](/docs/faq-versioning).
+
+### Next Channel {/*next-channel*/}
+
+The Next channel is a prerelease channel that tracks the master branch of the React repository. We use prereleases in the Next channel as release candidates for the Latest channel. You can think of Next as a superset of Latest that is updated more frequently.
+
+The degree of change between the most recent Next release and the most recent Latest release is approximately the same as you would find between two minor semver releases. However, **the Next channel does not conform to semantic versioning.** You should expect occasional breaking changes between successive releases in the Next channel.
+
+**Do not use prereleases in user-facing applications.**
+
+Releases in Next are published with the `next` tag on npm. Versions are generated from a hash of the build's contents, e.g. `0.0.0-1022ee0ec`.
+
+#### Using the Next Channel for Integration Testing {/*using-the-next-channel-for-integration-testing*/}
+
+The Next channel is designed to support integration testing between React and other projects.
+
+All changes to React go through extensive internal testing before they are released to the public. However, there are myriad environments and configurations used throughout the React ecosystem, and it's not possible for us to test against every single one.
+
+If you're the author of a third party React framework, library, developer tool, or similar infrastructure-type project, you can help us keep React stable for your users and the entire React community by periodically running your test suite against the most recent changes. If you're interested, follow these steps:
+
+- Set up a cron job using your preferred continuous integration platform. Cron jobs are supported by both [CircleCI](https://circleci.com/docs/2.0/triggers/#scheduled-builds) and [Travis CI](https://docs.travis-ci.com/user/cron-jobs/).
+- In the cron job, update your React packages to the most recent React release in the Next channel, using `next` tag on npm. Using the npm cli:
+
+  ```console
+  npm update react@next react-dom@next
+  ```
+
+  Or yarn:
+
+  ```console
+  yarn upgrade react@next react-dom@next
+  ```
+
+- Run your test suite against the updated packages.
+- If everything passes, great! You can expect that your project will work with the next minor React release.
+- If something breaks unexpectedly, please let us know by [filing an issue](https://github.com/facebook/react/issues).
+
+A project that uses this workflow is Next.js. (No pun intended! Seriously!) You can refer to their [CircleCI configuration](https://github.com/zeit/next.js/blob/c0a1c0f93966fe33edd93fb53e5fafb0dcd80a9e/.circleci/config.yml) as an example.
+
+### Experimental Channel {/*experimental-channel*/}
+
+Like Next, the Experimental channel is a prerelease channel that tracks the master branch of the React repository. Unlike Next, Experimental releases include additional features and APIs that are not ready for wider release.
+
+Usually, an update to Next is accompanied by a corresponding update to Experimental. They are based on the same source revision, but are built using a different set of feature flags.
+
+Experimental releases may be significantly different than releases to Next and Latest. **Do not use Experimental releases in user-facing applications.** You should expect frequent breaking changes between releases in the Experimental channel.
+
+Releases in Experimental are published with the `experimental` tag on npm. Versions are generated from a hash of the build's contents, e.g. `0.0.0-experimental-1022ee0ec`.
+
+#### What Goes Into an Experimental Release? {/*what-goes-into-an-experimental-release*/}
+
+Experimental features are ones that are not ready to be released to the wider public, and may change drastically before they are finalized. Some experiments may never be finalized -- the reason we have experiments is to test the viability of proposed changes.
+
+For example, if the Experimental channel had existed when we announced Hooks, we would have released Hooks to the Experimental channel weeks before they were available in Latest.
+
+You may find it valuable to run integration tests against Experimental. This is up to you. However, be advised that Experimental is even less stable than Next. **We do not guarantee any stability between Experimental releases.**
+
+#### How Can I Learn More About Experimental Features? {/*how-can-i-learn-more-about-experimental-features*/}
+
+Experimental features may or may not be documented. Usually, experiments aren't documented until they are close to shipping in Next or Stable.
+
+If a feature is not documented, they may be accompanied by an [RFC](https://github.com/reactjs/rfcs).
+
+We will post to the React blog when we're ready to announce new experiments, but that doesn't mean we will publicize every experiment.
+
+You can always refer to our public GitHub repository's [history](https://github.com/facebook/react/commits/master) for a comprehensive list of changes.
diff --git a/beta/src/content/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense.md b/beta/src/content/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense.md
new file mode 100644
index 000000000..f731fa75e
--- /dev/null
+++ b/beta/src/content/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense.md
@@ -0,0 +1,231 @@
+---
+title: 'Building Great User Experiences with Concurrent Mode and Suspense'
+author: [josephsavona]
+---
+
+At React Conf 2019 we announced an [experimental release](/docs/concurrent-mode-adoption#installation) of React that supports Concurrent Mode and Suspense. In this post we'll introduce best practices for using them that we've identified through the process of building [the new facebook.com](https://twitter.com/facebook/status/1123322299418124289).
+
+> This post will be most relevant to people working on _data fetching libraries_ for React.
+>
+> It shows how to best integrate them with Concurrent Mode and Suspense. The patterns introduced here are based on [Relay](https://relay.dev/docs/en/experimental/step-by-step) -- our library for building data-driven UIs with GraphQL. However, the ideas in this post **apply to other GraphQL clients as well as libraries using REST** or other approaches.
+
+This post is **aimed at library authors**. If you're primarily an application developer, you might still find some interesting ideas here, but don't feel like you have to read it in its entirety.
+
+## Talk Videos {/*talk-videos*/}
+
+If you prefer to watch videos, some of the ideas from this blog post have been referenced in several React Conf 2019 presentations:
+
+- [Data Fetching with Suspense in Relay](https://www.youtube.com/watch?v=Tl0S7QkxFE4&list=PLPxbbTqCLbGHPxZpw4xj_Wwg8-fdNxJRh&index=15&t=0s) by [Joe Savona](https://twitter.com/en_JS)
+- [Building the New Facebook with React and Relay](https://www.youtube.com/watch?v=KT3XKDBZW7M&list=PLPxbbTqCLbGHPxZpw4xj_Wwg8-fdNxJRh&index=4) by [Ashley Watkins](https://twitter.com/catchingash)
+- [React Conf Keynote](https://www.youtube.com/watch?v=uXEEL9mrkAQ&list=PLPxbbTqCLbGHPxZpw4xj_Wwg8-fdNxJRh&index=2) by [Yuzhi Zheng](https://twitter.com/yuzhiz)
+
+This post presents a deeper dive on implementing a data fetching library with Suspense.
+
+## Putting User Experience First {/*putting-user-experience-first*/}
+
+The React team and community has long placed a deserved emphasis on developer experience: ensuring that React has good error messages, focusing on components as a way to reason locally about app behavior, crafting APIs that are predictable and encourage correct usage by design, etc. But we haven't provided enough guidance on the best ways to achieve a great _user_ experience in large apps.
+
+For example, the React team has focused on _framework_ performance and providing tools for developers to debug and tune application performance (e.g. `React.memo`). But we haven't been as opinionated about the _high-level patterns_ that make the difference between fast, fluid apps and slow, janky ones. We always want to ensure that React remains approachable to new users and supports a variety of use-cases -- not every app has to be "blazing" fast. But as a community we can and should aim high. **We should make it as easy as possible to build apps that start fast and stay fast,** even as they grow in complexity, for users on varying devices and networks around the world.
+
+[Concurrent Mode](/docs/concurrent-mode-intro) and [Suspense](/docs/concurrent-mode-suspense) are experimental features that can help developers achieve this goal. We first introduced them at [JSConf Iceland in 2018](/blog/2018/03/01/sneak-peek-beyond-react-16), intentionally sharing details very early to give the community time to digest the new concepts and to set the stage for subsequent changes. Since then we've completed related work, such as the new Context API and the introduction of Hooks, which are designed in part to help developers naturally write code that is more compatible with Concurrent Mode. But we didn't want to implement these features and release them without validating that they work. So over the past year, the React, Relay, web infrastructure, and product teams at Facebook have all collaborated closely to build a new version of facebook.com that deeply integrates Concurrent Mode and Suspense to create an experience with a more fluid and app-like feel.
+
+Thanks to this project, we're more confident than ever that Concurrent Mode and Suspense can make it easier to deliver great, _fast_ user experiences. But doing so requires rethinking how we approach loading code and data for our apps. Effectively all of the data-fetching on the new facebook.com is powered by [Relay Hooks](https://relay.dev/docs/en/experimental/step-by-step) -- new Hooks-based Relay APIs that integrate with Concurrent Mode and Suspense out of the box.
+
+Relay Hooks -- and GraphQL -- won't be for everyone, and that's ok! Through our work on these APIs we've identified a set of more general patterns for using Suspense. **Even if Relay isn't the right fit for you, we think the key patterns we've introduced with Relay Hooks can be adapted to other frameworks.**
+
+## Best Practices for Suspense {/*best-practices-for-suspense*/}
+
+It's tempting to focus only on the total startup time for an app -- but it turns out that users' perception of performance is determined by more than the absolute loading time. For example, when comparing two apps with the same absolute startup time, our research shows that users will generally perceive the one with fewer intermediate loading states and fewer layout changes as having loaded faster. Suspense is a powerful tool for carefully orchestrating an elegant loading sequence with a few, well-defined states that progressively reveal content. But improving perceived performance only goes so far -- our apps still shouldn't take forever to fetch all of their code, data, images, and other assets.
+
+The traditional approach to loading data in React apps involves what we refer to as ["fetch-on-render"](/docs/concurrent-mode-suspense#approach-1-fetch-on-render-not-using-suspense). First we render a component with a spinner, then fetch data on mount (`componentDidMount` or `useEffect`), and finally update to render the resulting data. It's certainly _possible_ to use this pattern with Suspense: instead of initially rendering a placeholder itself, a component can "suspend" -- indicate to React that it isn't ready yet. This will tell React to find the nearest ancestor `<Suspense fallback={<Placeholder/>}>`, and render its fallback instead. If you watched earlier Suspense demos this example may feel familiar -- it's how we originally imagined using Suspense for data-fetching.
+
+It turns out that this approach has some limitations. Consider a page that shows a social media post by a user, along with comments on that post. That might be structured as a `<Post>` component that renders both the post body and a `<CommentList>` to show the comments. Using the fetch-on-render approach described above to implement this could cause sequential round trips (sometimes referred to as a "waterfall"). First the data for the `<Post>` component would be fetched and then the data for `<CommentList>` would be fetched, increasing the time it takes to show the full page.
+
+There's also another often-overlooked downside to this approach. If `<Post>` eagerly requires (or imports) the `<CommentList>` component, our app will have to wait to show the post _body_ while the code for the _comments_ is downloading. We could lazily load `<CommentList>`, but then that would delay fetching comments data and increase the time to show the full page. How do we resolve this problem without compromising on the user experience?
+
+## Render As You Fetch {/*render-as-you-fetch*/}
+
+The fetch-on-render approach is widely used by React apps today and can certainly be used to create great apps. But can we do even better? Let's step back and consider our goal.
+
+In the above `<Post>` example, we'd ideally show the more important content -- the post body -- as early as possible, _without_ negatively impacting the time to show the full page (including comments). Let's consider the key constraints on any solution and look at how we can achieve them:
+
+- Showing the more important content (the post body) as early as possible means that we need to load the code and data for the view incrementally. We _don't want to block showing the post body_ on the code for `<CommentList>` being downloaded, for example.
+- At the same time we don't want to increase the time to show the full page including comments. So we need to _start loading the code and data for the comments_ as soon as possible, ideally _in parallel_ with loading the post body.
+
+This might sound difficult to achieve -- but these constraints are actually incredibly helpful. They rule out a large number of approaches and spell out a solution for us. This brings us to the key patterns we've implemented in Relay Hooks, and that can be adapted to other data-fetching libraries. We'll look at each one in turn and then see how they add up to achieve our goal of fast, delightful loading experiences:
+
+1. Parallel data and view trees
+2. Fetch in event handlers
+3. Load data incrementally
+4. Treat code like data
+
+### Parallel Data and View Trees {/*parallel-data-and-view-trees*/}
+
+One of the most appealing things about the fetch-on-render pattern is that it colocates _what_ data a component needs with _how_ to render that data. This colocation is great -- an example of how it makes sense to group code by concerns and not by technologies. All the issues we saw above were due to _when_ we fetch data in this approach: upon rendering. We need to be able to fetch data _before_ we've rendered the component. The only way to achieve that is by extracting the data dependencies into parallel data and view trees.
+
+Here's how that works in Relay Hooks. Continuing our example of a social media post with body and comments, here's how we might define it with Relay Hooks:
+
+```javascript
+// Post.js
+function Post(props) {
+  // Given a reference to some post - `props.post` - *what* data
+  // do we need about that post?
+  const postData = useFragment(
+    graphql`
+      fragment PostData on Post @refetchable(queryName: "PostQuery") {
+        author
+        title
+        # ...  more fields ...
+      }
+    `,
+    props.post
+  );
+
+  // Now that we have the data, how do we render it?
+  return (
+    <div>
+      <h1>{postData.title}</h1>
+      <h2>by {postData.author}</h2>
+      {/* more fields  */}
+    </div>
+  );
+}
+```
+
+Although the GraphQL is written within the component, Relay has a build step (Relay Compiler) that extracts these data-dependencies into separate files and aggregates the GraphQL for each view into a single query. So we get the benefit of colocating concerns, while at runtime having parallel data and view trees. Other frameworks could achieve a similar effect by allowing developers to define data-fetching logic in a sibling file (maybe `Post.data.js`), or perhaps integrate with a bundler to allow defining data dependencies with UI code and automatically extracting it, similar to Relay Compiler.
+
+The key is that regardless of the technology we're using to load our data -- GraphQL, REST, etc -- we can separate _what_ data to load from how and when to actually load it. But once we do that, how and when _do_ we fetch our data?
+
+### Fetch in Event Handlers {/*fetch-in-event-handlers*/}
+
+Imagine that we're about to navigate from a list of a user's posts to the page for a specific post. We'll need to download the code for that page -- `Post.js` -- and also fetch its data.
+
+Waiting until we render the component has problems as we saw above. The key is to start fetching code and data for a new view _in the same event handler that triggers showing that view_. We can either fetch the data within our router -- if our router supports preloading data for routes -- or in the click event on the link that triggered the navigation. It turns out that the React Router folks are already hard at work on building APIs to support preloading data for routes. But other routing frameworks can implement this idea too.
+
+Conceptually, we want every route definition to include two things: what component to render and what data to preload, as a function of the route/url params. Here's what such a route definition _might_ look like. This example is loosely inspired by React Router's route definitions and is _primarily intended to demonstrate the concept, not a specific API_:
+
+```javascript
+// PostRoute.js (GraphQL version)
+
+// Relay generated query for loading Post data
+import PostQuery from './__generated__/PostQuery.graphql';
+
+const PostRoute = {
+  // a matching expression for which paths to handle
+  path: '/post/:id',
+
+  // what component to render for this route
+  component: React.lazy(() => import('./Post')),
+
+  // data to load for this route, as function of the route
+  // parameters
+  prepare: (routeParams) => {
+    // Relay extracts queries from components, allowing us to reference
+    // the data dependencies -- data tree -- from outside.
+    const postData = preloadQuery(PostQuery, {
+      postId: routeParams.id,
+    });
+
+    return {postData};
+  },
+};
+
+export default PostRoute;
+```
+
+Given such a definition, a router can:
+
+- Match a URL to a route definition.
+- Call the `prepare()` function to start loading that route's data. Note that `prepare()` is synchronous -- _we don't wait for the data to be ready_, since we want to start rendering more important parts of the view (like the post body) as quickly as possible.
+- Pass the preloaded data to the component. If the component is ready -- the `React.lazy` dynamic import has completed -- the component will render and try to access its data. If not, `React.lazy` will suspend until the code is ready.
+
+This approach can be generalized to other data-fetching solutions. An app that uses REST might define a route like this:
+
+```javascript
+// PostRoute.js (REST version)
+
+// Manually written logic for loading the data for the component
+import PostData from './Post.data';
+
+const PostRoute = {
+  // a matching expression for which paths to handle
+  path: '/post/:id',
+
+  // what component to render for this route
+  component: React.lazy(() => import('./Post')),
+
+  // data to load for this route, as function of the route
+  // parameters
+  prepare: (routeParams) => {
+    const postData = preloadRestEndpoint(PostData.endpointUrl, {
+      postId: routeParams.id,
+    });
+    return {postData};
+  },
+};
+
+export default PostRoute;
+```
+
+This same approach can be employed not just for routing, but in other places where we show content lazily or based on user interaction. For example, a tab component could eagerly load the first tab's code and data, and then use the same pattern as above to load the code and data for other tabs in the tab-change event handler. A component that displays a modal could preload the code and data for the modal in the click handler that triggers opening the modal, and so on.
+
+Once we've implemented the ability to start loading code and data for a view independently, we have the option to go one step further. Consider a `<Link to={path} />` component that links to a route. If the user hovers over that link, there's a reasonable chance they'll click it. And if they press the mouse down, there's an even better chance that they'll complete the click. If we can load code and data for a view _after_ the user clicks, we can also start that work _before_ they click, getting a head start on preparing the view.
+
+Best of all, we can centralize that logic in a few key places -- a router or core UI components -- and get any performance benefits automatically throughout our app. Of course preloading isn't always beneficial. It's something an application would tune based on the user's device or network speed to avoid eating up user's data plans. But the pattern here makes it easier to centralize the implementation of preloading and the decision of whether to enable it or not.
+
+### Load Data Incrementally {/*load-data-incrementally*/}
+
+The above patterns -- parallel data/view trees and fetching in event handlers -- let us start loading all the data for a view earlier. But we still want to be able to show more important parts of the view without waiting for _all_ of our data. At Facebook we've implemented support for this in GraphQL and Relay in the form of some new GraphQL directives (annotations that affect how/when data is delivered, but not what data). These new directives, called `@defer` and `@stream`, allow us to retrieve data incrementally. For example, consider our `<Post>` component from above. We want to show the body without waiting for the comments to be ready. We can achieve this with `@defer` and `<Suspense>`:
+
+```javascript
+// Post.js
+function Post(props) {
+  const postData = useFragment(
+    graphql`
+      fragment PostData on Post {
+        author
+        title
+
+        # fetch data for the comments, but don't block on it being ready
+        ...CommentList @defer
+      }
+    `,
+    props.post
+  );
+
+  return (
+    <div>
+      <h1>{postData.title}</h1>
+      <h2>by {postData.author}</h2>
+      {/* @defer pairs naturally with <Suspense> to make the UI non-blocking too */}
+      <Suspense fallback={<Spinner />}>
+        <CommentList post={postData} />
+      </Suspense>
+    </div>
+  );
+}
+```
+
+Here, our GraphQL server will stream back the results, first returning the `author` and `title` fields and then returning the comment data when it's ready. We wrap `<CommentList>` in a `<Suspense>` boundary so that we can render the post body before `<CommentList>` and its data are ready. This same pattern can be applied to other frameworks as well. For example, apps that call a REST API might make parallel requests to fetch the body and comments data for a post to avoid blocking on all the data being ready.
+
+### Treat Code Like Data {/*treat-code-like-data*/}
+
+But there's one thing that's still missing. We've shown how to preload _data_ for a route -- but what about code? The example above cheated a bit and used `React.lazy`. However, `React.lazy` is, as the name implies, _lazy_. It won't start downloading code until the lazy component is actually rendered -- it's "fetch-on-render" for code!
+
+To solve this, the React team is considering APIs that would allow bundle splitting and eager preloading for code as well. That would allow a user to pass some form of lazy component to a router, and for the router to trigger loading the code alongside its data as early as possible.
+
+## Putting It All Together {/*putting-it-all-together*/}
+
+To recap, achieving a great loading experience means that we need to **start loading code and data as early as possible, but without waiting for all of it to be ready**. Parallel data and view trees allow us to load the data for a view in parallel with loading the view (code) itself. Fetching in an event handler means we can start loading data as early as possible, and even optimistically preload a view when we have enough confidence that a user will navigate to it. Loading data incrementally allows us to load important data earlier without delaying the fetching of less important data. And treating code as data -- and preloading it with similar APIs -- allows us to load it earlier too.
+
+## Using These Patterns {/*using-these-patterns*/}
+
+These patterns aren't just ideas -- we've implemented them in Relay Hooks and are using them in production throughout the new facebook.com (which is currently in beta testing). If you're interested in using or learning more about these patterns, here are some resources:
+
+- The [React Concurrent docs](/docs/concurrent-mode-intro) explore how to use Concurrent Mode and Suspense and go into more detail about many of these patterns. It's a great resource to learn more about the APIs and use-cases they support.
+- The [experimental release of Relay Hooks](https://relay.dev/docs/en/experimental/step-by-step) implements the patterns described here.
+- We've implemented two similar example apps that demonstrate these concepts:
+  - The [Relay Hooks example app](https://github.com/relayjs/relay-examples/tree/master/issue-tracker) uses GitHub's public GraphQL API to implement a simple issue tracker app. It includes nested route support with code and data preloading. The code is fully commented -- we encourage cloning the repo, running the app locally, and exploring how it works.
+  - We also have a [non-GraphQL version of the app](https://github.com/gaearon/suspense-experimental-github-demo) that demonstrates how these concepts can be applied to other data-fetching libraries.
+
+While the APIs around Concurrent Mode and Suspense are [still experimental](/docs/concurrent-mode-adoption#who-is-this-experimental-release-for), we're confident that the ideas in this post are proven by practice. However, we understand that Relay and GraphQL aren't the right fit for everyone. That's ok! **We're actively exploring how to generalize these patterns to approaches such as REST,** and are exploring ideas for a more generic (ie non-GraphQL) API for composing a tree of data dependencies. In the meantime, we're excited to see what new libraries will emerge that implement the patterns described in this post to make it easier to build great, _fast_ user experiences.
diff --git a/beta/src/content/blog/2020/02/26/react-v16.13.0.md b/beta/src/content/blog/2020/02/26/react-v16.13.0.md
new file mode 100644
index 000000000..7b713aebe
--- /dev/null
+++ b/beta/src/content/blog/2020/02/26/react-v16.13.0.md
@@ -0,0 +1,215 @@
+---
+title: 'React v16.13.0'
+author: [threepointone]
+redirect_from:
+  - 'blog/2020/03/02/react-v16.13.0'
+---
+
+Today we are releasing React 16.13.0. It contains bugfixes and new deprecation warnings to help prepare for a future major release.
+
+## New Warnings {/*new-warnings*/}
+
+### Warnings for some updates during render {/*warnings-for-some-updates-during-render*/}
+
+A React component should not cause side effects in other components during rendering.
+
+It is supported to call `setState` during render, but [only for _the same component_](/docs/hooks-faq#how-do-i-implement-getderivedstatefromprops). If you call `setState` during a render on a different component, you will now see a warning:
+
+```
+Warning: Cannot update a component from inside the function body of a different component.
+```
+
+**This warning will help you find application bugs caused by unintentional state changes.** In the rare case that you intentionally want to change the state of another component as a result of rendering, you can wrap the `setState` call into `useEffect`.
+
+### Warnings for conflicting style rules {/*warnings-for-conflicting-style-rules*/}
+
+When dynamically applying a `style` that contains longhand and shorthand versions of CSS properties, particular combinations of updates can cause inconsistent styling. For example:
+
+```js
+<div
+  style={
+    toggle
+      ? {background: 'blue', backgroundColor: 'red'}
+      : {backgroundColor: 'red'}
+  }>
+  ...
+</div>
+```
+
+You might expect this `<div>` to always have a red background, no matter the value of `toggle`. However, on alternating the value of `toggle` between `true` and `false`, the background color start as `red`, then alternates between `transparent` and `blue`, [as you can see in this demo](https://codesandbox.io/s/blue-water-ghx8mi).
+
+**React now detects conflicting style rules and logs a warning.** To fix the issue, don't mix shorthand and longhand versions of the same CSS property in the `style` prop.
+
+### Warnings for some deprecated string refs {/*warnings-for-some-deprecated-string-refs*/}
+
+[String Refs is an old legacy API](/docs/refs-and-the-dom#legacy-api-string-refs) which is discouraged and is going to be deprecated in the future:
+
+```js
+<Button ref="myRef" />
+```
+
+(Don't confuse String Refs with refs in general, which **remain fully supported**.)
+
+In the future, we will provide an automated script (a "codemod") to migrate away from String Refs. However, some rare cases can't be migrated automatically. This release adds a new warning **only for those cases** in advance of the deprecation.
+
+For example, it will fire if you use String Refs together with the Render Prop pattern:
+
+```jsx
+class ClassWithRenderProp extends React.Component {
+  componentDidMount() {
+    doSomething(this.refs.myRef);
+  }
+  render() {
+    return this.props.children();
+  }
+}
+
+class ClassParent extends React.Component {
+  render() {
+    return (
+      <ClassWithRenderProp>{() => <Button ref="myRef" />}</ClassWithRenderProp>
+    );
+  }
+}
+```
+
+Code like this often indicates bugs. (You might expect the ref to be available on `ClassParent`, but instead it gets placed on `ClassWithRenderProp`).
+
+**You most likely don't have code like this**. If you do and it is intentional, convert it to [`React.createRef()`](/docs/refs-and-the-dom#creating-refs) instead:
+
+```jsx
+class ClassWithRenderProp extends React.Component {
+  myRef = React.createRef();
+  componentDidMount() {
+    doSomething(this.myRef.current);
+  }
+  render() {
+    return this.props.children(this.myRef);
+  }
+}
+
+class ClassParent extends React.Component {
+  render() {
+    return (
+      <ClassWithRenderProp>
+        {(myRef) => <Button ref={myRef} />}
+      </ClassWithRenderProp>
+    );
+  }
+}
+```
+
+> Note
+>
+> To see this warning, you need to have the [babel-plugin-transform-react-jsx-self](https://babeljs.io/docs/en/babel-plugin-transform-react-jsx-self) installed in your Babel plugins. It must _only_ be enabled in development mode.
+>
+> If you use Create React App or have the "react" preset with Babel 7+, you already have this plugin installed by default.
+
+### Deprecating `React.createFactory` {/*deprecating-reactcreatefactory*/}
+
+[`React.createFactory`](/docs/react-api#createfactory) is a legacy helper for creating React elements. This release adds a deprecation warning to the method. It will be removed in a future major version.
+
+Replace usages of `React.createFactory` with regular JSX. Alternately, you can copy and paste this one-line helper or publish it as a library:
+
+```jsx
+let createFactory = (type) => React.createElement.bind(null, type);
+```
+
+It does exactly the same thing.
+
+### Deprecating `ReactDOM.unstable_createPortal` in favor of `ReactDOM.createPortal` {/*deprecating-reactdomunstable_createportal-in-favor-of-reactdomcreateportal*/}
+
+When React 16 was released, `createPortal` became an officially supported API.
+
+However, we kept `unstable_createPortal` as a supported alias to keep the few libraries that adopted it working. We are now deprecating the unstable alias. Use `createPortal` directly instead of `unstable_createPortal`. It has exactly the same signature.
+
+## Other Improvements {/*other-improvements*/}
+
+### Component stacks in hydration warnings {/*component-stacks-in-hydration-warnings*/}
+
+React adds component stacks to its development warnings, enabling developers to isolate bugs and debug their programs. This release adds component stacks to a number of development warnings that didn't previously have them. As an example, consider this hydration warning from the previous versions:
+
+![A screenshot of the console warning, simply stating the nature of the hydration mismatch: "Warning: Expected server HTML to contain a matching div in div."](/images/blog/react-v16.13.0/hydration-warning-before.png)
+
+While it's pointing out an error with the code, it's not clear where the error exists, and what to do next. This release adds a component stack to this warning, which makes it look like this:
+
+![A screenshot of the console warning, stating the nature of the hydration mismatch, but also including a component stack : "Warning: Expected server HTML to contain a matching div in div, in div (at pages/index.js:4)..."](/images/blog/react-v16.13.0/hydration-warning-after.png)
+
+This makes it clear where the problem is, and lets you locate and fix the bug faster.
+
+### Notable bugfixes {/*notable-bugfixes*/}
+
+This release contains a few other notable improvements:
+
+- In Strict Development Mode, React calls lifecycle methods twice to flush out any possible unwanted side effects. This release adds that behaviour to `shouldComponentUpdate`. This shouldn't affect most code, unless you have side effects in `shouldComponentUpdate`. To fix this, move the code with side effects into `componentDidUpdate`.
+
+- In Strict Development Mode, the warnings for usage of the legacy context API didn't include the stack for the component that triggered the warning. This release adds the missing stack to the warning.
+
+- `onMouseEnter` now doesn't trigger on disabled `<button>` elements.
+
+- ReactDOM was missing a `version` export since we published v16. This release adds it back. We don't recommend using it in your application logic, but it's useful when debugging issues with mismatching / multiple versions of ReactDOM on the same page.
+
+We’re thankful to all the contributors who helped surface and fix these and other issues. You can find the full changelog [below](#changelog).
+
+## Installation {/*installation*/}
+
+### React {/*react*/}
+
+React v16.13.0 is available on the npm registry.
+
+To install React 16 with Yarn, run:
+
+```bash
+yarn add react@^16.13.0 react-dom@^16.13.0
+```
+
+To install React 16 with npm, run:
+
+```bash
+npm install --save react@^16.13.0 react-dom@^16.13.0
+```
+
+We also provide UMD builds of React via a CDN:
+
+```html
+<script
+  crossorigin
+  src="https://unpkg.com/react@16/umd/react.production.min.js"
+></script>
+<script
+  crossorigin
+  src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"
+></script>
+```
+
+Refer to the documentation for [detailed installation instructions](/docs/installation).
+
+## Changelog {/*changelog*/}
+
+### React {/*changelog-react*/}
+
+- Warn when a string ref is used in a manner that's not amenable to a future codemod ([@lunaruan](https://github.com/lunaruan) in [#17864](https://github.com/facebook/react/pull/17864))
+- Deprecate `React.createFactory()` ([@trueadm](https://github.com/trueadm) in [#17878](https://github.com/facebook/react/pull/17878))
+
+### React DOM {/*changelog-react-dom*/}
+
+- Warn when changes in `style` may cause an unexpected collision ([@sophiebits](https://github.com/sophiebits) in [#14181](https://github.com/facebook/react/pull/14181), [#18002](https://github.com/facebook/react/pull/18002))
+- Warn when a function component is updated during another component's render phase ([@acdlite](<(https://github.com/acdlite)>) in [#17099](https://github.com/facebook/react/pull/17099))
+- Deprecate `unstable_createPortal` ([@trueadm](https://github.com/trueadm) in [#17880](https://github.com/facebook/react/pull/17880))
+- Fix `onMouseEnter` being fired on disabled buttons ([@AlfredoGJ](https://github.com/AlfredoGJ) in [#17675](https://github.com/facebook/react/pull/17675))
+- Call `shouldComponentUpdate` twice when developing in `StrictMode` ([@bvaughn](https://github.com/bvaughn) in [#17942](https://github.com/facebook/react/pull/17942))
+- Add `version` property to ReactDOM ([@ealush](https://github.com/ealush) in [#15780](https://github.com/facebook/react/pull/15780))
+- Don't call `toString()` of `dangerouslySetInnerHTML` ([@sebmarkbage](https://github.com/sebmarkbage) in [#17773](https://github.com/facebook/react/pull/17773))
+- Show component stacks in more warnings ([@gaearon](https://github.com/gaearon) in [#17922](https://github.com/facebook/react/pull/17922), [#17586](https://github.com/facebook/react/pull/17586))
+
+### Concurrent Mode (Experimental) {/*changelog-concurrent-mode-experimental*/}
+
+- Warn for problematic usages of `ReactDOM.createRoot()` ([@trueadm](https://github.com/trueadm) in [#17937](https://github.com/facebook/react/pull/17937))
+- Remove `ReactDOM.createRoot()` callback params and added warnings on usage ([@bvaughn](https://github.com/bvaughn) in [#17916](https://github.com/facebook/react/pull/17916))
+- Don't group Idle/Offscreen work with other work ([@sebmarkbage](https://github.com/sebmarkbage) in [#17456](https://github.com/facebook/react/pull/17456))
+- Adjust `SuspenseList` CPU bound heuristic ([@sebmarkbage](https://github.com/sebmarkbage) in [#17455](https://github.com/facebook/react/pull/17455))
+- Add missing event plugin priorities ([@trueadm](https://github.com/trueadm) in [#17914](https://github.com/facebook/react/pull/17914))
+- Fix `isPending` only being true when transitioning from inside an input event ([@acdlite](https://github.com/acdlite) in [#17382](https://github.com/facebook/react/pull/17382))
+- Fix `React.memo` components dropping updates when interrupted by a higher priority update ([@acdlite](https://github.com/acdlite) in [#18091](https://github.com/facebook/react/pull/18091))
+- Don't warn when suspending at the wrong priority ([@gaearon](https://github.com/gaearon) in [#17971](https://github.com/facebook/react/pull/17971))
+- Fix a bug with rebasing updates ([@acdlite](https://github.com/acdlite) and [@sebmarkbage](https://github.com/sebmarkbage) in [#17560](https://github.com/facebook/react/pull/17560), [#17510](https://github.com/facebook/react/pull/17510), [#17483](https://github.com/facebook/react/pull/17483), [#17480](https://github.com/facebook/react/pull/17480))
diff --git a/beta/src/content/blog/2020/08/10/react-v17-rc.md b/beta/src/content/blog/2020/08/10/react-v17-rc.md
new file mode 100644
index 000000000..c01899a77
--- /dev/null
+++ b/beta/src/content/blog/2020/08/10/react-v17-rc.md
@@ -0,0 +1,364 @@
+---
+title: "React v17.0 Release Candidate: No New Features"
+author: [gaearon,rachelnabors]
+---
+
+Today, we are publishing the first Release Candidate for React 17. It has been two and a half years since [the previous major release of React](/blog/2017/09/26/react-v16.0.html), which is a long time even by our standards! In this blog post, we will describe the role of this major release, what changes you can expect in it, and how you can try this release.
+
+## No New Features {/*no-new-features*/}
+
+The React 17 release is unusual because it doesn't add any new developer-facing features. Instead, this release is primarily focused on **making it easier to upgrade React itself**.
+
+We're actively working on the new React features, but they're not a part of this release. The React 17 release is a key part of our strategy to roll them out without leaving anyone behind.
+
+In particular, **React 17 is a "stepping stone" release** that makes it safer to embed a tree managed by one version of React inside a tree managed by a different version of React.
+
+## Gradual Upgrades {/*gradual-upgrades*/}
+
+For the past seven years, React upgrades have been "all-or-nothing". Either you stay on an old version, or you upgrade your whole app to a new version. There was no in-between.
+
+This has worked out so far, but we are running into the limits of the "all-or-nothing" upgrade strategy. Some API changes, for example, deprecating the [legacy context API](/docs/legacy-context.html), are impossible to do in an automated way. Even though most apps written today don't ever use them, we still support them in React. We have to choose between supporting them in React indefinitely or leaving some apps behind on an old version of React. Both of these options aren't great.
+
+So we wanted to provide another option.
+
+**React 17 enables gradual React upgrades.** When you upgrade from React 15 to 16 (or, soon, from React 16 to 17), you would usually upgrade your whole app at once. This works well for many apps. But it can get increasingly challenging if the codebase was written more than a few years ago and isn't actively maintained. And while it's possible to use two versions of React on the page, until React 17 this has been fragile and caused problems with events.
+
+We're fixing many of those problems with React 17. This means that **when React 18 and the next future versions come out, you will now have more options**. The first option will be to upgrade your whole app at once, like you might have done before. But you will also have an option to upgrade your app piece by piece. For example, you might decide to migrate most of your app to React 18, but keep some lazy-loaded dialog or a subroute on React 17.
+
+This doesn't mean you *have to* do gradual upgrades. For most apps, upgrading all at once is still the best solution. Loading two versions of React -- even if one of them is loaded lazily on demand -- is still not ideal. However, for larger apps that aren't actively maintained, this option may make sense to consider, and React 17 enables those apps to not get left behind.
+
+To enable gradual updates, we've needed to make some changes to the React event system. React 17 is a major release because these changes are potentially breaking. In practice, we've only had to change fewer than twenty components out of 100,000+ so **we expect that most apps can upgrade to React 17 without too much trouble**. [Tell us](https://github.com/facebook/react/issues) if you run into problems.
+
+### Demo of Gradual Upgrades {/*demo-of-gradual-upgrades*/}
+
+We've prepared an [example repository](https://github.com/reactjs/react-gradual-upgrade-demo/) demonstrating how to lazy-load an older version of React if necessary. This demo uses Create React App, but it should be possible to follow a similar approach with any other tool. We welcome demos using other tooling as pull requests.
+
+>Note
+>
+>We've **postponed other changes** until after React 17. The goal of this release is to enable gradual upgrades. If upgrading to React 17 were too difficult, it would defeat its purpose.
+
+## Changes to Event Delegation {/*changes-to-event-delegation*/}
+
+Technically, it has always been possible to nest apps developed with different versions of React. However, it was rather fragile because of how the React event system worked.
+
+
+In React components, you usually write event handlers inline:
+
+```js
+<button onClick={handleClick}>
+```
+
+The vanilla DOM equivalent to this code is something like:
+
+```js
+myButton.addEventListener('click', handleClick);
+```
+
+However, for most events, React doesn't actually attach them to the DOM nodes on which you declare them. Instead, React attaches one handler per event type directly at the `document` node. This is called [event delegation](https://davidwalsh.name/event-delegate). In addition to its performance benefits on large application trees, it also makes it easier to add new features like [replaying events](https://twitter.com/dan_abramov/status/1200118229697486849).
+
+React has been doing event delegation automatically since its first release. When a DOM event fires on the document, React figures out which component to call, and then the React event "bubbles" upwards through your components. But behind the scenes, the native event has already bubbled up to the `document` level, where React installs its event handlers.
+
+However, this is a problem for gradual upgrades.
+
+If you have multiple React versions on the page, they all register event handlers at the top. This breaks `e.stopPropagation()`: if a nested tree has stopped propagation of an event, the outer tree would still receive it. This made it difficult to nest different versions of React. This concern is not hypothetical -- for example, the Atom editor [ran into this](https://github.com/facebook/react/pull/8117) four years ago.
+
+This is why we're changing how React attaches events to the DOM under the hood.
+
+**In React 17, React will no longer attach event handlers at the `document` level. Instead, it will attach them to the root DOM container into which your React tree is rendered:**
+
+```js
+const rootNode = document.getElementById('root');
+ReactDOM.render(<App />, rootNode);
+```
+
+In React 16 and earlier, React would do `document.addEventListener()` for most events. React 17 will call `rootNode.addEventListener()` under the hood instead.
+
+![A diagram showing how React 17 attaches events to the roots rather than to the document](../images/blog/react-v17-rc/react_17_delegation.png)
+
+Thanks to this change, **it is now safer to embed a React tree managed by one version inside a tree managed by a different React version**. Note that for this to work, both of the versions would need to be 17 or higher, which is why upgrading to React 17 is important. In a way, React 17 is a "stepping stone" release that makes next gradual upgrades feasible.
+
+This change also **makes it easier to embed React into apps built with other technologies**. For example, if the outer "shell" of your app is written in jQuery, but the newer code inside of it is written with React, `e.stopPropagation()` inside the React code would now prevent it from reaching the jQuery code -- as you would expect. This also works in the other direction. If you no longer like React and want to rewrite your app -- for example, in jQuery -- you can start converting the outer shell from React to jQuery without breaking the event propagation.
+
+We've confirmed that [numerous](https://github.com/facebook/react/issues/7094) [problems](https://github.com/facebook/react/issues/8693) [reported](https://github.com/facebook/react/issues/12518) [over](https://github.com/facebook/react/issues/13451) [the](https://github.com/facebook/react/issues/4335) [years](https://github.com/facebook/react/issues/1691) [on](https://github.com/facebook/react/issues/285#issuecomment-253502585) [our](https://github.com/facebook/react/pull/8117) [issue](https://github.com/facebook/react/issues/11530) [tracker](https://github.com/facebook/react/issues/7128) related to integrating React with non-React code have been fixed by the new behavior.
+
+>Note
+>
+>You might be wondering whether this breaks [Portals](/docs/portals.html) outside of the root container. The answer is that React *also* listens to events on portal containers, so this is not an issue.
+
+#### Fixing Potential Issues {/*fixing-potential-issues*/}
+
+As with any breaking change, it is likely some code would need to be adjusted. At Facebook, we had to adjust about 10 modules in total (out of many thousands) to work with this change.
+
+For example, if you add manual DOM listeners with `document.addEventListener(...)`, you might expect them to catch all React events. In React 16 and earlier, even if you call `e.stopPropagation()` in a React event handler, your custom `document` listeners would still receive them because the native event is *already* at the document level. With React 17, the propagation *would* stop (as requested!), so your `document` handlers would not fire:
+
+```js
+document.addEventListener('click', function() {
+  // This custom handler will no longer receive clicks
+  // from React components that called e.stopPropagation()
+});
+```
+
+You can fix code like this by converting your listener to use the [capture phase](https://javascript.info/bubbling-and-capturing#capturing). To do this, you can pass `{ capture: true }` as the third argument to `document.addEventListener`:
+
+```js
+document.addEventListener('click', function() {
+  // Now this event handler uses the capture phase,
+  // so it receives *all* click events below!
+}, { capture: true });
+```
+
+Note how this strategy is more resilient overall -- for example, it will probably fix existing bugs in your code that happen when `e.stopPropagation()` is called outside of a React event handler. In other words, **event propagation in React 17 works closer to the regular DOM**.
+
+## Other Breaking Changes {/*other-breaking-changes*/}
+
+We've kept the breaking changes in React 17 to the minimum. For example, it doesn't remove any of the methods that have been deprecated in the previous releases. However, it does include a few other breaking changes that have been relatively safe in our experience. In total, we've had to adjust fewer than 20 out of 100,000+ our components because of them.
+
+### Aligning with Browsers {/*aligning-with-browsers*/}
+
+We've made a couple of smaller changes related to the event system:
+
+* The `onScroll` event **no longer bubbles** to prevent [common confusion](https://github.com/facebook/react/issues/15723).
+* React `onFocus` and `onBlur` events have switched to using the native `focusin` and `focusout` events under the hood, which more closely match React's existing behavior and sometimes provide extra information.
+* Capture phase events (e.g. `onClickCapture`) now use real browser capture phase listeners.
+
+These changes align React closer with the browser behavior and improve interoperability.
+
+>Note
+>
+>Although React 17 switched from `focus` to `focusin` *under the hood* for the `onFocus` event, note that this has **not** affected the bubbling behavior. In React, `onFocus` event has always bubbled, and it continues to do so in React 17 because generally it is a more useful default. See [this sandbox](https://codesandbox.io/s/strange-albattani-7tqr7?file=/src/App.js) for the different checks you can add for different particular use cases.
+
+### No Event Pooling {/*no-event-pooling*/}
+
+React 17 removes the "event pooling" optimization from React. It doesn't improve performance in modern browsers and confuses even experienced React users:
+
+```js
+function handleChange(e) {
+  setData(data => ({
+    ...data,
+    // This crashes in React 16 and earlier:
+    text: e.target.value
+  }));
+}
+```
+
+This is because React reused the event objects between different events for performance in old browsers, and set all event fields to `null` in between them. With React 16 and earlier, you have to call `e.persist()` to properly use the event, or read the property you need earlier.
+
+**In React 17, this code works as you would expect. The old event pooling optimization has been fully removed, so you can read the event fields whenever you need them.**
+
+This is a behavior change, which is why we're marking it as breaking, but in practice we haven't seen it break anything at Facebook. (Maybe it even fixed a few bugs!) Note that `e.persist()` is still available on the React event object, but now it doesn't do anything.
+
+### Effect Cleanup Timing {/*effect-cleanup-timing*/}
+
+We are making the timing of the `useEffect` cleanup function more consistent.
+
+```js {3-5}
+useEffect(() => {
+  // This is the effect itself.
+  return () => {
+    // This is its cleanup.
+  };
+});
+```
+
+Most effects don't need to delay screen updates, so React runs them asynchronously soon after the update has been reflected on the screen. (For the rare cases where you need an effect to block paint, e.g. to measure and position a tooltip, prefer `useLayoutEffect`.)
+
+However, the effect *cleanup* function, when it exists, used to run synchronously in React 16. We've found that, similar to `componentWillUnmount` being synchronous in classes, this is not ideal for larger apps because it slows down large screen transitions (e.g. switching tabs).
+
+**In React 17, the effect cleanup function also runs asynchronously -- for example, if the component is unmounting, the cleanup will run _after_ the screen has been updated.**
+
+This mirrors how the effects themselves run more closely. In the  rare cases where you might want to rely on the synchronous execution, you can switch to `useLayoutEffect` instead.
+
+>Note
+>
+>You might be wondering whether this means that you'll now be unable to fix warnings about `setState` on unmounted components. Don't worry -- React specifically checks for this case, and does *not* fire `setState` warnings in the short gap between unmounting and the cleanup. **So code cancelling requests or intervals can almost always stay the same.**
+
+Additionally, React 17 executes the cleanup functions in the same order as the effects, according to their position in the tree. Previously, this order was occasionally different.
+
+#### Potential Issues {/*potential-issues*/}
+
+We've only seen a couple of components break with this change, although reusable libraries may need to test it more thoroughly. One example of problematic code may look like this:
+
+```js
+useEffect(() => {
+  someRef.current.someSetupMethod();
+  return () => {
+    someRef.current.someCleanupMethod();
+  };
+});
+```
+
+The problem is that `someRef.current` is mutable, so by the time the cleanup function runs, it may have been set to `null`. The solution is to capture any mutable values *inside* the effect:
+
+```js
+useEffect(() => {
+  const instance = someRef.current;
+  instance.someSetupMethod();
+  return () => {
+    instance.someCleanupMethod();
+  };
+});
+```
+
+We don't expect this to be a common problem because [our `eslint-plugin-react-hooks/exhaustive-deps` lint rule](https://github.com/facebook/react/tree/master/packages/eslint-plugin-react-hooks) (make sure you use it!) has always warned about this.
+
+### Consistent Errors for Returning Undefined {/*consistent-errors-for-returning-undefined*/}
+
+In React 16 and earlier, returning `undefined` has always been an error:
+
+```js
+function Button() {
+  return; // Error: Nothing was returned from render
+}
+```
+
+This is in part because it’s easy to return `undefined` unintentionally:
+
+```js
+function Button() {
+  // We forgot to write return, so this component returns undefined.
+  // React surfaces this as an error instead of ignoring it.
+  <button />;
+}
+```
+
+Previously, React only did this for class and function components, but did not check the return values of `forwardRef` and `memo` components. This was due to a coding mistake.
+
+**In React 17, the behavior for `forwardRef` and `memo` components is consistent with regular function and class components. Returning `undefined` from them is an error.**
+
+```js
+let Button = forwardRef(() => {
+  // We forgot to write return, so this component returns undefined.
+  // React 17 surfaces this as an error instead of ignoring it.
+  <button />;
+});
+
+let Button = memo(() => {
+  // We forgot to write return, so this component returns undefined.
+  // React 17 surfaces this as an error instead of ignoring it.
+  <button />;
+});
+```
+
+For the cases where you want to render nothing intentionally, return `null` instead.
+
+### Native Component Stacks {/*native-component-stacks*/}
+
+When you throw an error in the browser, the browser gives you a stack trace with JavaScript function names and their locations. However, JavaScript stacks are often not enough to diagnose a problem because the React tree hierarchy can be just as important. You want to know not just that a `Button` threw an error, but *where in the React tree* that `Button` is.
+
+To solve this, React 16 started printing "component stacks" when you have an error. Still, they used to be inferior to the native JavaScript stacks. In particular, they were not clickable in the console because React didn't know where the function was declared in the source code. Additionally, they were [mostly useless in production](https://github.com/facebook/react/issues/12757). Unlike regular minified JavaScript stacks which can be automatically restored to the original function names with a sourcemap, with React component stacks you had to choose between production stacks and bundle size.
+
+**In React 17, the component stacks are generated using a different mechanism that stitches them together from the regular native JavaScript stacks. This lets you get the fully symbolicated React component stack traces in a production environment.**
+
+The way React implements this is somewhat unorthodox. Currently, the browsers don't provide a way to get a function's stack frame (source file and location). So when React catches an error, it will now *reconstruct* its component stack by throwing (and catching) a temporary error from inside each of the components above, when it is possible. This adds a small performance penalty for crashes, but it only happens once per component type.
+
+If you're curious, you can read more details in [this pull request](https://github.com/facebook/react/pull/18561), but for the most part this exact mechanism shouldn't affect your code. From your perspective, the new feature is that component stacks are now clickable (because they rely on the native browser stack frames), and that you can decode them in production like you would with regular JavaScript errors.
+
+The part that constitutes a breaking change is that for this to work, React re-executes parts of some of the React functions and React class constructors above in the stack after an error is captured. Since render functions and class constructors shouldn't have side effects (which is also important for server rendering), this should not pose any practical problems.
+
+### Removing Private Exports {/*removing-private-exports*/}
+
+Finally, the last notable breaking change is that we've removed some React internals that were previously exposed to other projects. In particular, [React Native for Web](https://github.com/necolas/react-native-web) used to depend on some internals of the event system, but that dependency was fragile and used to break.
+
+**In React 17, these private exports have been removed. As far as we're aware, React Native for Web was the only project using them, and they have already completed a migration to a different approach that doesn't depend on those private exports.**
+
+This means that the older versions of React Native for Web won't be compatible with React 17, but the newer versions will work with it. In practice, this doesn't change much because React Native for Web had to release new versions to adapt to internal React changes anyway.
+
+Additionally, we've removed the `ReactTestUtils.SimulateNative` helper methods. They have never been documented, didn't do quite what their names implied, and didn't work with the changes we've made to the event system. If you want a convenient way to fire native browser events in tests, check out the [React Testing Library](https://testing-library.com/docs/dom-testing-library/api-events) instead.
+
+## Installation {/*installation*/}
+
+We encourage you to try React 17.0 Release Candidate soon and [raise any issues](https://github.com/facebook/react/issues) for the problems you might encounter in the migration. **Keep in mind that a release candidate is more likely to contain bugs than a stable release, so don't deploy it to production yet.**
+
+To install React 17 RC with npm, run:
+
+```bash
+npm install react@17.0.0-rc.0 react-dom@17.0.0-rc.0
+```
+
+To install React 17 RC with Yarn, run:
+
+```bash
+yarn add react@17.0.0-rc.0 react-dom@17.0.0-rc.0
+```
+
+We also provide UMD builds of React via a CDN:
+
+```html
+<script crossorigin src="https://unpkg.com/react@17.0.0-rc.0/umd/react.production.min.js"></script>
+<script crossorigin src="https://unpkg.com/react-dom@17.0.0-rc.0/umd/react-dom.production.min.js"></script>
+```
+
+Refer to the documentation for [detailed installation instructions](/docs/installation.html).
+
+## Changelog {/*changelog*/}
+
+### React {/*react*/}
+
+* Add `react/jsx-runtime` and `react/jsx-dev-runtime` for the [new JSX transform](https://babeljs.io/blog/2020/03/16/7.9.0#a-new-jsx-transform-11154-https-githubcom-babel-babel-pull-11154). ([@lunaruan](https://github.com/lunaruan) in [#18299](https://github.com/facebook/react/pull/18299))
+* Build component stacks from native error frames. ([@sebmarkbage](https://github.com/sebmarkbage) in [#18561](https://github.com/facebook/react/pull/18561))
+* Allow to specify `displayName` on context for improved stacks. ([@eps1lon](https://github.com/eps1lon) in [#18224](https://github.com/facebook/react/pull/18224))
+
+### React DOM {/*react-dom*/}
+
+* Delegate events to roots instead of `document`. ([@trueadm](https://github.com/trueadm) in [#18195](https://github.com/facebook/react/pull/18195) and [others](https://github.com/facebook/react/pulls?q=is%3Apr+author%3Atrueadm+modern+event+is%3Amerged))
+* Clean up all effects before running any next effects. ([@bvaughn](https://github.com/bvaughn) in [#17947](https://github.com/facebook/react/pull/17947))
+* Run `useEffect` cleanup functions asynchronously. ([@bvaughn](https://github.com/bvaughn) in [#17925](https://github.com/facebook/react/pull/17925))
+* Use browser `focusin` and `focusout` for `onFocus` and `onBlur`. ([@trueadm](https://github.com/trueadm) in [#19186](https://github.com/facebook/react/pull/19186))
+* Make all `Capture` events use the browser capture phase. ([@trueadm](https://github.com/trueadm) in [#19221](https://github.com/facebook/react/pull/19221))
+* Don't emulate bubbling of the `onScroll` event. ([@gaearon](https://github.com/gaearon) in [#19464](https://github.com/facebook/react/pull/19464))
+* Throw if `forwardRef` or `memo` component returns `undefined`. ([@gaearon](https://github.com/gaearon) in [#19550](https://github.com/facebook/react/pull/19550))
+* Remove event pooling. ([@trueadm](https://github.com/trueadm) in [#18969](https://github.com/facebook/react/pull/18969))
+* Stop exposing internals that won’t be needed by React Native Web. ([@necolas](https://github.com/necolas) in [#18483](https://github.com/facebook/react/pull/18483))
+* Disable `console` in the second render pass of DEV mode double render. ([@sebmarkbage](https://github.com/sebmarkbage) in [#18547](https://github.com/facebook/react/pull/18547))
+* Deprecate the undocumented and misleading `ReactTestUtils.SimulateNative` API. ([@gaearon](https://github.com/gaearon) in [#13407](https://github.com/facebook/react/pull/13407))
+* Rename private field names used in the internals. ([@gaearon](https://github.com/gaearon) in [#18377](https://github.com/facebook/react/pull/18377))
+* Don't call User Timing API in development. ([@gaearon](https://github.com/gaearon) in [#18417](https://github.com/facebook/react/pull/18417))
+* Disable console during the repeated render in Strict Mode. ([@sebmarkbage](https://github.com/sebmarkbage) in [#18547](https://github.com/facebook/react/pull/18547))
+* In Strict Mode, double-render components without Hooks too. ([@eps1lon](https://github.com/eps1lon) in [#18430](https://github.com/facebook/react/pull/18430))
+* Allow calling `ReactDOM.flushSync` during lifecycle methods (but warn). ([@sebmarkbage](https://github.com/sebmarkbage) in [#18759](https://github.com/facebook/react/pull/18759))
+* Add the `code` property to the keyboard event objects. ([@bl00mber](https://github.com/bl00mber) in [#18287](https://github.com/facebook/react/pull/18287))
+* Add the `disableRemotePlayback` property for `video` elements. ([@tombrowndev](https://github.com/tombrowndev) in [#18619](https://github.com/facebook/react/pull/18619))
+* Add the `enterKeyHint` property for `input` elements. ([@eps1lon](https://github.com/eps1lon) in [#18634](https://github.com/facebook/react/pull/18634))
+* Warn when no `value` is provided to `<Context.Provider>`. ([@charlie1404](https://github.com/charlie1404) in [#19054](https://github.com/facebook/react/pull/19054))
+* Warn when `memo` or `forwardRef` components return `undefined`. ([@bvaughn](https://github.com/bvaughn) in [#19550](https://github.com/facebook/react/pull/19550))
+* Improve the error message for invalid updates. ([@JoviDeCroock](https://github.com/JoviDeCroock) in [#18316](https://github.com/facebook/react/pull/18316))
+* Exclude forwardRef and memo from stack frames. ([@sebmarkbage](https://github.com/sebmarkbage) in [#18559](https://github.com/facebook/react/pull/18559))
+* Improve the error message when switching between controlled and uncontrolled inputs. ([@vcarl](https://github.com/vcarl) in [#17070](https://github.com/facebook/react/pull/17070))
+* Fix `setState` hanging in development inside a closed iframe. ([@gaearon](https://github.com/gaearon) in [#19220](https://github.com/facebook/react/pull/19220))
+* Fix rendering bailout for lazy components with `defaultProps`. ([@jddxf](https://github.com/jddxf) in [#18539](https://github.com/facebook/react/pull/18539))
+* Fix a false positive warning when `dangerouslySetInnerHTML` is `undefined`. ([@eps1lon](https://github.com/eps1lon) in [#18676](https://github.com/facebook/react/pull/18676))
+* Fix Test Utils with non-standard `require` implementation. ([@just-boris](https://github.com/just-boris) in [#18632](https://github.com/facebook/react/pull/18632))
+* Fix `onBeforeInput` reporting an incorrect `event.type`. ([@eps1lon](https://github.com/eps1lon) in [#19561](https://github.com/facebook/react/pull/19561))
+* Use delegation for `onSubmit` and `onReset` events. ([@gaearon](https://github.com/gaearon) in [#19333](https://github.com/facebook/react/pull/19333))
+* Improve memory usage. ([@trueadm](https://github.com/trueadm) in [#18970](https://github.com/facebook/react/pull/18970))
+
+### React DOM Server {/*react-dom-server*/}
+
+* Make `useCallback` behavior consistent with `useMemo` for the server renderer. ([@alexmckenley](https://github.com/alexmckenley) in [#18783](https://github.com/facebook/react/pull/18783))
+* Fix state leaking when a function component throws. ([@pmaccart](https://github.com/pmaccart) in [#19212](https://github.com/facebook/react/pull/19212))
+
+### React Test Renderer {/*react-test-renderer*/}
+
+* Improve `findByType` error message. ([@henryqdineen](https://github.com/henryqdineen) in [#17439](https://github.com/facebook/react/pull/17439))
+
+### Concurrent Mode (Experimental) {/*concurrent-mode-experimental*/}
+
+* Revamp the priority batching heuristics. ([@acdlite](https://github.com/acdlite) in [#18796](https://github.com/facebook/react/pull/18796))
+* Add the `unstable_` prefix before the experimental APIs. ([@acdlite](https://github.com/acdlite) in [#18825](https://github.com/facebook/react/pull/18825))
+* Remove `unstable_discreteUpdates` and `unstable_flushDiscreteUpdates`. ([@trueadm](https://github.com/trueadm) in [#18825](https://github.com/facebook/react/pull/18825))
+* Disable `<div hidden />` prerendering in favor of a different future API. ([@acdlite](https://github.com/acdlite) in [#18917](https://github.com/facebook/react/pull/18917))
+* Add an experimental `unstable_useOpaqueIdentifier` Hook. ([@lunaruan](https://github.com/lunaruan) in [#17322](https://github.com/facebook/react/pull/17322))
+* Using `act` in the test renderer no longer flushes Suspense fallbacks. ([@acdlite](https://github.com/acdlite) in [#18596](https://github.com/facebook/react/pull/18596))
+* Clear the existing root content before mounting. ([@bvaughn](https://github.com/bvaughn) in [#18730](https://github.com/facebook/react/pull/18730))
+* Fix a bug with error boundaries. ([@acdlite](https://github.com/acdlite) in [#18265](https://github.com/facebook/react/pull/18265))
+* Fix a bug causing dropped updates in a suspended tree. ([@acdlite](https://github.com/acdlite) in [#18384](https://github.com/facebook/react/pull/18384) and [#18457](https://github.com/facebook/react/pull/18457))
+* Fix a bug causing dropped render phase updates. ([@acdlite](https://github.com/acdlite) in [#18537](https://github.com/facebook/react/pull/18537))
+* Fix a bug in SuspenseList. ([@sebmarkbage](https://github.com/sebmarkbage) in [#18412](https://github.com/facebook/react/pull/18412))
+* Fix a bug causing Suspense fallback to show too early. ([@acdlite](https://github.com/acdlite) in [#18411](https://github.com/facebook/react/pull/18411))
+* Fix a bug with class components inside SuspenseList. ([@sebmarkbage](https://github.com/sebmarkbage) in [#18448](https://github.com/facebook/react/pull/18448))
+* Fix a bug with inputs that may cause updates to be dropped. ([@jddxf](https://github.com/jddxf) in [#18515](https://github.com/facebook/react/pull/18515) and [@acdlite](https://github.com/acdlite) in [#18535](https://github.com/facebook/react/pull/18535))
+* Fix a bug causing Suspense fallback to get stuck.  ([@acdlite](https://github.com/acdlite) in [#18663](https://github.com/facebook/react/pull/18663))
+* Don't cut off the tail of a SuspenseList if hydrating. ([@sebmarkbage](https://github.com/sebmarkbage) in [#18854](https://github.com/facebook/react/pull/18854))
+* Fix a bug in `useMutableSource` that may happen when `getSnapshot` changes. ([@bvaughn](https://github.com/bvaughn) in [#18297](https://github.com/facebook/react/pull/18297))
+* Fix a tearing bug in `useMutableSource`. ([@bvaughn](https://github.com/bvaughn) in [#18912](https://github.com/facebook/react/pull/18912))
+* Warn if calling setState outside of render but before commit. ([@sebmarkbage](https://github.com/sebmarkbage) in [#18838](https://github.com/facebook/react/pull/18838))
diff --git a/beta/src/content/index.md b/beta/src/content/index.md
new file mode 100644
index 000000000..78c663c02
--- /dev/null
+++ b/beta/src/content/index.md
@@ -0,0 +1,32 @@
+---
+id: home
+title: React Docs Beta
+permalink: index.html
+---
+
+<HomepageHero />
+
+## What is this site? {/*what-is-this-site*/}
+
+We are rewriting the React documentation with a few differences:
+
+- All explanations are **written using Hooks** rather than classes.
+- We've added **interactive examples** and visual diagrams.
+- Guides include **challenges (with solutions!)** to check your understanding.
+
+This beta website contains the current draft of the new docs.
+
+## How much content is ready? {/*how-much-content-is-ready*/}
+
+* [Learn React](/learn): ~99% finished.
+* [API Reference](/reference/react): 100% finished.
+
+You can track our progress [on GitHub.](https://github.com/reactjs/reactjs.org/issues/3308)
+
+## How can I provide feedback? {/*how-can-i-provide-feedback*/}
+
+Please use [this GitHub issue](https://github.com/reactjs/reactjs.org/issues/3308) or [this anonymous form](https://www.surveymonkey.co.uk/r/PYRPF3X) for high-level feedback. If you spot something that doesn't make sense, please tell us! Additionally, each page has thumbs up/down buttons in the corner.
+
+## Will this site replace the main site? {/*will-this-site-replace-the-main-site*/}
+
+We aim to switch this site to be the main one once we reach content parity with the [existing React documentation.](https://reactjs.org/) The old React website will be archived at a subdomain so you'll still be able to access it. Old content links will redirect to the archived subdomain, which will have a notice about outdated content.
\ No newline at end of file
diff --git a/beta/src/content/learn/acknowledgements.md b/beta/src/content/learn/acknowledgements.md
new file mode 100644
index 000000000..2ee6ab499
--- /dev/null
+++ b/beta/src/content/learn/acknowledgements.md
@@ -0,0 +1,67 @@
+---
+title: Acknowledgements
+---
+
+<Intro>
+
+React was originally created by [Jordan Walke.](https://github.com/jordwalke) Today, React has a [dedicated full-time team working on it](/learn/meet-the-team), as well as over a thousand [open source contributors.](https://github.com/facebook/react/blob/main/AUTHORS)
+
+</Intro>
+
+## Past contributors {/*past-contributors*/}
+
+We'd like to recognize a few people who have made significant contributions to React and its documentation in the past and have helped maintain them over the years:
+
+* [Almero Steyn](https://github.com/AlmeroSteyn)
+* [Andreas Svensson](https://github.com/syranide)
+* [Alex Krolick](https://github.com/alexkrolick)
+* [Alexey Pyltsyn](https://github.com/lex111)
+* [Brandon Dail](https://github.com/aweary)
+* [Brian Vaughn](https://github.com/bvaughn)
+* [Caleb Meredith](https://github.com/calebmer)
+* [Chang Yan](https://github.com/cyan33)
+* [Cheng Lou](https://github.com/chenglou)
+* [Christoph Nakazawa](https://github.com/cpojer)
+* [Christopher Chedeau](https://github.com/vjeux)
+* [Clement Hoang](https://github.com/clemmy)
+* [Dominic Gannaway](https://github.com/trueadm)
+* [Flarnie Marchan](https://github.com/flarnie)
+* [Jason Quense](https://github.com/jquense)
+* [Jesse Beach](https://github.com/jessebeach)
+* [Jessica Franco](https://github.com/Jessidhia)
+* [Jim Sproch](https://github.com/jimfb)
+* [Josh Duck](https://github.com/joshduck)
+* [Joe Critchley](https://github.com/joecritch)
+* [Jeff Morrison](https://github.com/jeffmo)
+* [Keyan Zhang](https://github.com/keyz)
+* [Marco Salazar](https://github.com/salazarm)
+* [Nat Alison](https://github.com/tesseralis)
+* [Nathan Hunzaker](https://github.com/nhunzaker)
+* [Nicolas Gallagher](https://github.com/necolas)
+* [Paul O'Shannessy](https://github.com/zpao)
+* [Pete Hunt](https://github.com/petehunt)
+* [Philipp Spiess](https://github.com/philipp-spiess)
+* [Rachel Nabors](https://github.com/rachelnabors)
+* [Robert Zhang](https://github.com/robertzhidealx)
+* [Sander Spies](https://github.com/sanderspies)
+* [Sasha Aickin](https://github.com/aickin)
+* [Seth Webster](https://github.com/sethwebster)
+* [Sophia Shoemaker](https://github.com/mrscobbler)
+* [Sophie Alpert](https://github.com/sophiebits)
+* [Sunil Pai](https://github.com/threepointone)
+* [Tim Yung](https://github.com/yungsters)
+* [Xuan Huang](https://github.com/huxpro)
+* [Yuzhi Zheng](https://github.com/yuzhi)
+
+This list is not exhaustive.
+
+We'd like to give special thanks to [Tom Occhino](https://github.com/tomocchino) and [Adam Wolff](https://github.com/wolffiex) for their guidance and support over the years. We are also thankful to all the volunteers who [translated React into other languages.](https://translations.reactjs.org/)
+
+## Additional Thanks {/*additional-thanks*/}
+
+Additionally, we're grateful to:
+
+* [Jeff Barczewski](https://github.com/jeffbski) for allowing us to use the `react` package name on npm
+* [Christopher Aue](https://christopheraue.net/) for letting us use the reactjs.com domain name and the [@reactjs](https://twitter.com/reactjs) username on Twitter
+* [ProjectMoon](https://github.com/ProjectMoon) for letting us use the [flux](https://www.npmjs.com/package/flux) package name on npm
+* Shane Anderson for allowing us to use the [react](https://github.com/react) org on GitHub
diff --git a/beta/src/content/learn/add-react-to-a-website.md b/beta/src/content/learn/add-react-to-a-website.md
new file mode 100644
index 000000000..4c1383fa0
--- /dev/null
+++ b/beta/src/content/learn/add-react-to-a-website.md
@@ -0,0 +1,277 @@
+---
+title: Add React to a Website
+---
+
+<Intro>
+
+You don't have to build your whole website with React. Adding React to HTML doesn't require installation, takes a minute, and lets you start writing interactive components right away.
+
+</Intro>
+
+<YouWillLearn>
+
+* How to add React to an HTML page in one minute
+* What is the JSX syntax and how to quickly try it
+* How to set up a JSX preprocessor for production
+
+</YouWillLearn>
+
+## Add React in one minute {/*add-react-in-one-minute*/}
+
+React has been designed from the start for gradual adoption. Most websites aren't (and don't need to be) fully built with React. This guide shows how to add some “sprinkles of interactivity” to an existing HTML page.
+
+Try this out with your own website or [an empty HTML file.](https://gist.github.com/gaearon/edf814aeee85062bc9b9830aeaf27b88/archive/3b31c3cdcea7dfcfd38a81905a0052dd8e5f71ec.zip) All you need is an internet connection and a text editor like Notepad or VSCode. (Here's [how to configure your editor](/learn/editor-setup/) for syntax highlighting!)
+
+### Step 1: Add a root HTML tag {/*step-1-add-a-root-html-tag*/}
+
+First, open the HTML page you want to edit. Add an empty `<div>` tag to mark the spot where you want to display something with React. Give this `<div>` a unique `id` attribute value. For example:
+
+```html {3}
+<!-- ... existing HTML ... -->
+
+<div id="like-button-root"></div>
+
+<!-- ... existing HTML ... -->
+```
+
+It's called a "root" because it's where the React tree will start. You can place a root HTML tag like this anywhere inside the `<body>` tag. Leave it empty because React will replace its contents with your React component.
+
+You may have as many root HTML tags as you need on one page.
+
+### Step 2: Add the script tags {/*step-2-add-the-script-tags*/}
+
+In the HTML page, right before the closing `</body>` tag, add three `<script>` tags for the following files:
+
+- [`react.development.js`](https://unpkg.com/react@18/umd/react.development.js) lets you define React components.
+- [`react-dom.development.js`](https://unpkg.com/react-dom@18/umd/react-dom.development.js) lets React render HTML elements to the [DOM.](https://developer.mozilla.org/docs/Web/API/Document_Object_Model)
+- **`like-button.js`** is where you'll write your component in the next step!
+
+Your HTML should now end like this:
+
+```html
+    <!-- end of the page -->
+    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
+    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
+    <script src="like-button.js"></script>
+  </body>
+</html>
+```
+
+<Pitfall>
+
+Before deploying to a live website, make sure to replace `development.js` with `production.min.js`! Development builds of React provide more helpful error messages, but slow down your website *a lot.*
+
+</Pitfall>
+
+### Step 3: Create a React component {/*step-3-create-a-react-component*/}
+
+Create a file called **`like-button.js`** next to your HTML page, add this code snippet, and save the file. This code defines a React component called `LikeButton`. (Learn more about making components in the [Quick Start!](/learn))
+
+```js
+'use strict';
+
+function LikeButton() {
+  const [liked, setLiked] = React.useState(false);
+
+  if (liked) {
+    return 'You liked this!';
+  }
+
+  return React.createElement(
+    'button',
+    {
+      onClick: () => setLiked(true),
+    },
+    'Like'
+  );
+}
+```
+
+### Step 4: Add your React component to the page {/*step-4-add-your-react-component-to-the-page*/}
+
+Lastly, add three lines to the bottom of **`like-button.js`.** These lines of code find the `<div>` you added to the HTML in the first step, create a React root, and then display the "Like" button React component inside of it:
+
+```js
+const rootNode = document.getElementById('like-button-root');
+const root = ReactDOM.createRoot(rootNode);
+root.render(React.createElement(LikeButton));
+```
+
+**Congratulations! You have just rendered your first React component to your website!**
+
+- [View the full example source code](https://gist.github.com/gaearon/0b535239e7f39c524f9c7dc77c44f09e)
+- [Download the full example (2KB zipped)](https://gist.github.com/gaearon/0b535239e7f39c524f9c7dc77c44f09e/archive/651935b26a48ac68b2de032d874526f2d0896848.zip)
+
+#### You can reuse components! {/*you-can-reuse-components*/}
+
+You might want to display React components in multiple places on the same HTML page. This is useful if React-powered parts of your page are separate from each other. You can do this by putting multiple root tags in your HTML and then rendering React components inside each of them with `ReactDOM.createRoot()`. For example:
+
+1. In **`index.html`,** add an additional container element `<div id="another-root"></div>`.
+2. In **`like-button.js`,** add three more lines at the end:
+
+```js {6,7,8,9}
+const anotherRootNode = document.getElementById('another-root');
+const anotherRoot = ReactDOM.createRoot(anotherRootNode);
+anotherRoot.render(React.createElement(LikeButton));
+```
+
+If you need to render the same component in many places, you can assign a CSS `class` instead of `id` to each root, and then find them all. Here is [an example that displays three "Like" buttons and passes data to each.](https://gist.github.com/gaearon/779b12e05ffd5f51ffadd50b7ded5bc8)
+
+### Step 5: Minify JavaScript for production {/*step-5-minify-javascript-for-production*/}
+
+Unminified JavaScript can significantly slow down page load times for your users. Before deploying your website to production, it's a good idea to minify its scripts.
+
+- **If you don't have a minification step** for your scripts, [here's one way to set it up.](https://gist.github.com/gaearon/ee0201910608f15df3f8cd66aa83f98e)
+- **If you already minify** your application scripts, your site will be production-ready if you ensure that the deployed HTML loads the versions of React ending in `production.min.js` like so:
+
+```html
+<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
+<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
+```
+
+## Try React with JSX {/*try-react-with-jsx*/}
+
+The examples above rely on features that are natively supported by browsers. This is why **`like-button.js`** uses a JavaScript function call to tell React what to display:
+
+```js
+return React.createElement('button', {onClick: () => setLiked(true)}, 'Like');
+```
+
+However, React also offers an option to use [JSX](/learn/writing-markup-with-jsx), an HTML-like JavaScript syntax, instead:
+
+```jsx
+return <button onClick={() => setLiked(true)}>Like</button>;
+```
+
+These two code snippets are equivalent. JSX is popular syntax for describing markup in JavaScript. Many people find it familiar and helpful for writing UI code--both with React and with other libraries.
+
+> You can play with transforming HTML markup into JSX using [this online converter.](https://babeljs.io/en/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=DwIwrgLhD2B2AEcDCAbAlgYwNYF4DeAFAJTw4B88EAFmgM4B0tAphAMoQCGETBe86WJgBMAXJQBOYJvAC-RGWQBQ8FfAAyaQYuAB6cFDhkgA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=7.17)
+
+### Try JSX {/*try-jsx*/}
+
+The quickest way to try JSX is to add the Babel compiler as a `<script>` tag to the page. Put it before **`like-button.js`,** and then add `type="text/babel"` attribute to the `<script>` tag for **`like-button.js`**:
+
+```html {3,4}
+  <script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
+  <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
+  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+  <script src="like-button.js" type="text/babel"></script>
+</body>
+```
+
+Now you can open **`like-button.js`** and replace
+
+```js
+return React.createElement(
+  'button',
+  {
+    onClick: () => setLiked(true),
+  },
+  'Like'
+);
+```
+
+with the equivalent JSX code:
+
+```jsx
+return (
+  <button onClick={() => setLiked(true)}>
+    Like
+  </button>
+);
+```
+
+It may feel a bit unusual at first to mix JS with markup, but it will grow on you! Check out [Writing Markup in JSX](/learn/writing-markup-with-jsx) for an introduction. Here is [an example HTML file with JSX](https://raw.githubusercontent.com/reactjs/reactjs.org/main/static/html/single-file-example.html) that you can download and play with.
+
+<Pitfall>
+
+The Babel `<script>` compiler is fine for learning and creating simple demos. However, **it makes your website slow and isn't suitable for production.** When you're ready to move forward, remove the Babel `<script>` tag and remove the `type="text/babel"` attribute you've added in this step. Instead, in the next section you will set up a JSX preprocessor to convert all your `<script>` tags from JSX to JS.
+
+</Pitfall>
+
+### Add JSX to a project {/*add-jsx-to-a-project*/}
+
+Adding JSX to a project doesn't require complicated tools like a [bundler](/learn/start-a-new-react-project#custom-toolchains) or a development server. Adding a JSX preprocessor is a lot like adding a CSS preprocessor.
+
+Go to your project folder in the terminal, and paste these two commands (**Be sure you have [Node.js](https://nodejs.org/) installed!**):
+
+1. `npm init -y` (if it fails, [here's a fix](https://gist.github.com/gaearon/246f6380610e262f8a648e3e51cad40d))
+2. `npm install babel-cli@6 babel-preset-react-app@3`
+
+You only need npm to install the JSX preprocessor. You won't need it for anything else. Both React and the application code can stay as `<script>` tags with no changes.
+
+Congratulations! You just added a **production-ready JSX setup** to your project.
+
+### Run the JSX Preprocessor {/*run-the-jsx-preprocessor*/}
+
+You can preprocess JSX so that every time you save a file with JSX in it, the transform will be re-run, converting the JSX file into a new, plain JavaScript file that the browser can understand. Here's how to set this up:
+
+1. Create a folder called **`src`.**
+2. In your terminal, run this command: `npx babel --watch src --out-dir . --presets react-app/prod ` (Don't wait for it to finish! This command starts an automated watcher for edits to JSX inside `src`.)
+3. Move your JSX-ified **`like-button.js`** ([it should look like this!](https://gist.githubusercontent.com/gaearon/be5ae0fbf563d6c5fe5c1563907b13d2/raw/4c0d0b8c7f4fcb341720424c28c72059f8174c62/like-button.js)) to the new **`src`** folder.
+
+The watcher will create a preprocessed **`like-button.js`** with the plain JavaScript code suitable for the browser.
+
+<Pitfall>
+
+If you see an error message saying "You have mistakenly installed the `babel` package", you might have missed [the previous step.](#add-jsx-to-a-project) Perform it in the same folder, and then try again.
+
+</Pitfall>
+
+The tool you just used is called Babel, and you can learn more about it from [its documentation.](https://babeljs.io/docs/en/babel-cli/) In addition to JSX, it lets you use the most recent JavaScript syntax features without worrying about breaking older browsers.
+
+If you're getting comfortable with build tools and want them to do more for you, [we cover some of the most popular and approachable toolchains here.](/learn/start-a-new-react-project)
+
+<DeepDive>
+
+#### React without JSX {/*react-without-jsx*/}
+
+Originally JSX was introduced to make writing components with React feel as familiar as writing HTML. Since then, the syntax has become widespread. However, there may be instances where you do not want to use or cannot use JSX. You have two options:
+
+- Use a JSX alternative like [htm](https://github.com/developit/htm) which uses JavaScript [template strings](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) instead of a compiler.
+- Use [`React.createElement()`](/reference/react/createElement) which has a special structure explained below.
+
+With JSX, you would write a component like so:
+
+```jsx
+function Hello(props) {
+  return <div>Hello {props.toWhat}</div>;
+}
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<Hello toWhat="World" />, );
+```
+
+With `React.createElement()`, you would write it like this:
+
+```js
+function Hello(props) {
+  return React.createElement('div', null, 'Hello ', props.toWhat);
+}
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  React.createElement(Hello, { toWhat: 'World' }, null)
+);
+```
+
+It accepts several arguments: `React.createElement(component, props, ...children)`.
+
+Here's how they work:
+
+1. A **component,** which can be a string representing an HTML element or a function component
+2. An object of any [**props** you want to pass](/learn/passing-props-to-a-component)
+3. The rest are **children** the component might have, such as text strings or other elements
+
+If you get tired of typing `React.createElement()`, one common pattern is to assign a shorthand:
+
+```js
+const e = React.createElement;
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(e('div', null, 'Hello World'));
+```
+
+Then, if you prefer this style, it can be just as convenient as JSX.
+
+</DeepDive>
diff --git a/beta/src/content/learn/adding-interactivity.md b/beta/src/content/learn/adding-interactivity.md
new file mode 100644
index 000000000..bdf75623c
--- /dev/null
+++ b/beta/src/content/learn/adding-interactivity.md
@@ -0,0 +1,797 @@
+---
+title: Adding Interactivity
+---
+
+<Intro>
+
+Some things on the screen update in response to user input. For example, clicking an image gallery switches the active image. In React, data that changes over time is called *state.* You can add state to any component, and update it as needed. In this chapter, you'll learn how to write components that handle interactions, update their state, and display different output over time.
+
+</Intro>
+
+<YouWillLearn isChapter={true}>
+
+* [How to handle user-initiated events](/learn/responding-to-events)
+* [How to make components "remember" information with state](/learn/state-a-components-memory)
+* [How React updates the UI in two phases](/learn/render-and-commit)
+* [Why state doesn't update right after you change it](/learn/state-as-a-snapshot)
+* [How to queue multiple state updates](/learn/queueing-a-series-of-state-updates)
+* [How to update an object in state](/learn/updating-objects-in-state)
+* [How to update an array in state](/learn/updating-arrays-in-state)
+
+</YouWillLearn>
+
+## Responding to events {/*responding-to-events*/}
+
+React lets you add *event handlers* to your JSX. Event handlers are your own functions that will be triggered in response to user interactions like clicking, hovering, focusing on form inputs, and so on.
+
+Built-in components like `<button>` only support built-in browser events like `onClick`. However, you can also create your own components, and give their event handler props any application-specific names that you like.
+
+<Sandpack>
+
+```js
+export default function App() {
+  return (
+    <Toolbar
+      onPlayMovie={() => alert('Playing!')}
+      onUploadImage={() => alert('Uploading!')}
+    />
+  );
+}
+
+function Toolbar({ onPlayMovie, onUploadImage }) {
+  return (
+    <div>
+      <Button onClick={onPlayMovie}>
+        Play Movie
+      </Button>
+      <Button onClick={onUploadImage}>
+        Upload Image
+      </Button>
+    </div>
+  );
+}
+
+function Button({ onClick, children }) {
+  return (
+    <button onClick={onClick}>
+      {children}
+    </button>
+  );
+}
+```
+
+```css
+button { margin-right: 10px; }
+```
+
+</Sandpack>
+
+<LearnMore path="/learn/responding-to-events">
+
+Read **[Responding to Events](/learn/responding-to-events)** to learn how to add event handlers.
+
+</LearnMore>
+
+## State: a component's memory {/*state-a-components-memory*/}
+
+Components often need to change what's on the screen as a result of an interaction. Typing into the form should update the input field, clicking "next" on an image carousel should change which image is displayed, clicking "buy" puts a product in the shopping cart. Components need to "remember" things: the current input value, the current image, the shopping cart. In React, this kind of component-specific memory is called *state.*
+
+You can add state to a component with a [`useState`](/reference/react/useState) Hook. *Hooks* are special functions that let your components use React features (state is one of those features). The `useState` Hook lets you declare a state variable. It takes the initial state and returns a pair of values: the current state, and a state setter function that lets you update it.
+
+```js
+const [index, setIndex] = useState(0);
+const [showMore, setShowMore] = useState(false);
+```
+
+Here is how an image gallery uses and updates state on click:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+import { sculptureList } from './data.js';
+
+export default function Gallery() {
+  const [index, setIndex] = useState(0);
+  const [showMore, setShowMore] = useState(false);
+
+  function handleNextClick() {
+    setIndex(index + 1);
+  }
+
+  function handleMoreClick() {
+    setShowMore(!showMore);
+  }
+
+  let sculpture = sculptureList[index];
+  return (
+    <>
+      <button onClick={handleNextClick}>
+        Next
+      </button>
+      <h2>
+        <i>{sculpture.name} </i>
+        by {sculpture.artist}
+      </h2>
+      <h3>
+        ({index + 1} of {sculptureList.length})
+      </h3>
+      <button onClick={handleMoreClick}>
+        {showMore ? 'Hide' : 'Show'} details
+      </button>
+      {showMore && <p>{sculpture.description}</p>}
+      <img
+        src={sculpture.url}
+        alt={sculpture.alt}
+      />
+    </>
+  );
+}
+```
+
+```js data.js
+export const sculptureList = [{
+  name: 'Homenaje a la Neurocirugía',
+  artist: 'Marta Colvin Andrade',
+  description: 'Although Colvin is predominantly known for abstract themes that allude to pre-Hispanic symbols, this gigantic sculpture, an homage to neurosurgery, is one of her most recognizable public art pieces.',
+  url: 'https://i.imgur.com/Mx7dA2Y.jpg',
+  alt: 'A bronze statue of two crossed hands delicately holding a human brain in their fingertips.'
+}, {
+  name: 'Floralis Genérica',
+  artist: 'Eduardo Catalano',
+  description: 'This enormous (75 ft. or 23m) silver flower is located in Buenos Aires. It is designed to move, closing its petals in the evening or when strong winds blow and opening them in the morning.',
+  url: 'https://i.imgur.com/ZF6s192m.jpg',
+  alt: 'A gigantic metallic flower sculpture with reflective mirror-like petals and strong stamens.'
+}, {
+  name: 'Eternal Presence',
+  artist: 'John Woodrow Wilson',
+  description: 'Wilson was known for his preoccupation with equality, social justice, as well as the essential and spiritual qualities of humankind. This massive (7ft. or 2,13m) bronze represents what he described as "a symbolic Black presence infused with a sense of universal humanity."',
+  url: 'https://i.imgur.com/aTtVpES.jpg',
+  alt: 'The sculpture depicting a human head seems ever-present and solemn. It radiates calm and serenity.'
+}, {
+  name: 'Moai',
+  artist: 'Unknown Artist',
+  description: 'Located on the Easter Island, there are 1,000 moai, or extant monumental statues, created by the early Rapa Nui people, which some believe represented deified ancestors.',
+  url: 'https://i.imgur.com/RCwLEoQm.jpg',
+  alt: 'Three monumental stone busts with the heads that are disproportionately large with somber faces.'
+}, {
+  name: 'Blue Nana',
+  artist: 'Niki de Saint Phalle',
+  description: 'The Nanas are triumphant creatures, symbols of femininity and maternity. Initially, Saint Phalle used fabric and found objects for the Nanas, and later on introduced polyester to achieve a more vibrant effect.',
+  url: 'https://i.imgur.com/Sd1AgUOm.jpg',
+  alt: 'A large mosaic sculpture of a whimsical dancing female figure in a colorful costume emanating joy.'
+}, {
+  name: 'Ultimate Form',
+  artist: 'Barbara Hepworth',
+  description: 'This abstract bronze sculpture is a part of The Family of Man series located at Yorkshire Sculpture Park. Hepworth chose not to create literal representations of the world but developed abstract forms inspired by people and landscapes.',
+  url: 'https://i.imgur.com/2heNQDcm.jpg',
+  alt: 'A tall sculpture made of three elements stacked on each other reminding of a human figure.'
+}, {
+  name: 'Cavaliere',
+  artist: 'Lamidi Olonade Fakeye',
+  description: "Descended from four generations of woodcarvers, Fakeye's work blended traditional and contemporary Yoruba themes.",
+  url: 'https://i.imgur.com/wIdGuZwm.png',
+  alt: 'An intricate wood sculpture of a warrior with a focused face on a horse adorned with patterns.'
+}, {
+  name: 'Big Bellies',
+  artist: 'Alina Szapocznikow',
+  description: "Szapocznikow is known for her sculptures of the fragmented body as a metaphor for the fragility and impermanence of youth and beauty. This sculpture depicts two very realistic large bellies stacked on top of each other, each around five feet (1,5m) tall.",
+  url: 'https://i.imgur.com/AlHTAdDm.jpg',
+  alt: 'The sculpture reminds a cascade of folds, quite different from bellies in classical sculptures.'
+}, {
+  name: 'Terracotta Army',
+  artist: 'Unknown Artist',
+  description: 'The Terracotta Army is a collection of terracotta sculptures depicting the armies of Qin Shi Huang, the first Emperor of China. The army consisted of more than 8,000 soldiers, 130 chariots with 520 horses, and 150 cavalry horses.',
+  url: 'https://i.imgur.com/HMFmH6m.jpg',
+  alt: '12 terracotta sculptures of solemn warriors, each with a unique facial expression and armor.'
+}, {
+  name: 'Lunar Landscape',
+  artist: 'Louise Nevelson',
+  description: 'Nevelson was known for scavenging objects from New York City debris, which she would later assemble into monumental constructions. In this one, she used disparate parts like a bedpost, juggling pin, and seat fragment, nailing and gluing them into boxes that reflect the influence of Cubism’s geometric abstraction of space and form.',
+  url: 'https://i.imgur.com/rN7hY6om.jpg',
+  alt: 'A black matte sculpture where the individual elements are initially indistinguishable.'
+}, {
+  name: 'Aureole',
+  artist: 'Ranjani Shettar',
+  description: 'Shettar merges the traditional and the modern, the natural and the industrial. Her art focuses on the relationship between man and nature. Her work was described as compelling both abstractly and figuratively, gravity defying, and a "fine synthesis of unlikely materials."',
+  url: 'https://i.imgur.com/okTpbHhm.jpg',
+  alt: 'A pale wire-like sculpture mounted on concrete wall and descending on the floor. It appears light.'
+}, {
+  name: 'Hippos',
+  artist: 'Taipei Zoo',
+  description: 'The Taipei Zoo commissioned a Hippo Square featuring submerged hippos at play.',
+  url: 'https://i.imgur.com/6o5Vuyu.jpg',
+  alt: 'A group of bronze hippo sculptures emerging from the sett sidewalk as if they were swimming.'
+}];
+```
+
+```css
+h2 { margin-top: 10px; margin-bottom: 0; }
+h3 {
+ margin-top: 5px;
+ font-weight: normal;
+ font-size: 100%;
+}
+img { width: 120px; height: 120px; }
+button {
+  display: block;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+```
+
+</Sandpack>
+
+<LearnMore path="/learn/state-a-components-memory">
+
+Read **[State: A Component's Memory](/learn/state-a-components-memory)** to learn how to remember a value and update it on interaction.
+
+</LearnMore>
+
+## Render and commit {/*render-and-commit*/}
+
+Before your components are displayed on the screen, they must be rendered by React. Understanding the steps in this process will help you think about how your code executes and explain its behavior.
+
+Imagine that your components are cooks in the kitchen, assembling tasty dishes from ingredients. In this scenario, React is the waiter who puts in requests from customers and brings them their orders. This process of requesting and serving UI has three steps:
+
+1. **Triggering** a render (delivering the diner's order to the kitchen)
+2. **Rendering** the component (preparing the order in the kitchen)
+3. **Committing** to the DOM (placing the order on the table)
+
+<IllustrationBlock sequential>
+  <Illustration caption="Trigger" alt="React as a server in a restaurant, fetching orders from the users and delivering them to the Component Kitchen." src="/images/docs/illustrations/i_render-and-commit1.png" />
+  <Illustration caption="Render" alt="The Card Chef gives React a fresh Card component." src="/images/docs/illustrations/i_render-and-commit2.png" />
+  <Illustration caption="Commit" alt="React delivers the Card to the user at their table." src="/images/docs/illustrations/i_render-and-commit3.png" />
+</IllustrationBlock>
+
+<LearnMore path="/learn/render-and-commit">
+
+Read **[Render and Commit](/learn/render-and-commit)** to learn the lifecycle of a UI update.
+
+</LearnMore>
+
+## State as a snapshot {/*state-as-a-snapshot*/}
+
+Unlike regular JavaScript variables, React state behaves more like a snapshot. Setting it does not change the state variable you already have, but instead triggers a re-render. This can be surprising at first!
+
+```js
+console.log(count);  // 0
+setCount(count + 1); // Request a re-render with 1
+console.log(count);  // Still 0!
+```
+
+React works this way to help you avoid subtle bugs. Here is a little chat app. Try to guess what happens if you press "Send" first and *then* change the recipient to Bob. Whose name will appear in the `alert` five seconds later?
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function Form() {
+  const [to, setTo] = useState('Alice');
+  const [message, setMessage] = useState('Hello');
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    setTimeout(() => {
+      alert(`You said ${message} to ${to}`);
+    }, 5000);
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <label>
+        To:{' '}
+        <select
+          value={to}
+          onChange={e => setTo(e.target.value)}>
+          <option value="Alice">Alice</option>
+          <option value="Bob">Bob</option>
+        </select>
+      </label>
+      <textarea
+        placeholder="Message"
+        value={message}
+        onChange={e => setMessage(e.target.value)}
+      />
+      <button type="submit">Send</button>
+    </form>
+  );
+}
+```
+
+```css
+label, textarea { margin-bottom: 10px; display: block; }
+```
+
+</Sandpack>
+
+
+<LearnMore path="/learn/state-as-a-snapshot">
+
+Read **[State as a Snapshot](/learn/state-as-a-snapshot)** to learn why state appears "fixed" and unchanging inside the event handlers.
+
+</LearnMore>
+
+## Queueing a series of state updates {/*queueing-a-series-of-state-updates*/}
+
+This component is buggy: clicking "+3" increments the score only once.
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function Counter() {
+  const [score, setScore] = useState(0);
+
+  function increment() {
+    setScore(score + 1);
+  }
+
+  return (
+    <>
+      <button onClick={() => increment()}>+1</button>
+      <button onClick={() => {
+        increment();
+        increment();
+        increment();
+      }}>+3</button>
+      <h1>Score: {score}</h1>
+    </>
+  )
+}
+```
+
+```css
+button { display: inline-block; margin: 10px; font-size: 20px; }
+```
+
+</Sandpack>
+
+[State as a Snapshot](/learn/state-as-a-snapshot) explains why this is happening. Setting state requests a new re-render, but does not change it in the already running code. So `score` continues to be `0` right after you call `setScore(score + 1)`.
+
+```js
+console.log(score);  // 0
+setScore(score + 1); // setScore(0 + 1);
+console.log(score);  // 0
+setScore(score + 1); // setScore(0 + 1);
+console.log(score);  // 0
+setScore(score + 1); // setScore(0 + 1);
+console.log(score);  // 0
+```
+
+You can fix this by passing an *updater function* when setting state. Notice how replacing `setScore(score + 1)` with `setScore(s => s + 1)` fixes the "+3" button. This is handy if you need to queue multiple state updates.
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function Counter() {
+  const [score, setScore] = useState(0);
+
+  function increment() {
+    setScore(s => s + 1);
+  }
+
+  return (
+    <>
+      <button onClick={() => increment()}>+1</button>
+      <button onClick={() => {
+        increment();
+        increment();
+        increment();
+      }}>+3</button>
+      <h1>Score: {score}</h1>
+    </>
+  )
+}
+```
+
+```css
+button { display: inline-block; margin: 10px; font-size: 20px; }
+```
+
+</Sandpack>
+
+<LearnMore path="/learn/queueing-a-series-of-state-updates">
+
+Read **[Queueing a Series of State Updates](/learn/queueing-a-series-of-state-updates)** to learn how to queue multiple updates before the next render.
+
+</LearnMore>
+
+## Updating objects in state {/*updating-objects-in-state*/}
+
+State can hold any kind of JavaScript value, including objects. But you shouldn't change objects and arrays that you hold in the React state directly. Instead, when you want to update an object and array, you need to create a new one (or make a copy of an existing one), and then update the state to use that copy.
+
+Usually, you will use the `...` spread syntax to copy objects and arrays that you want to change. For example, updating a nested object could look like this:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function Form() {
+  const [person, setPerson] = useState({
+    name: 'Niki de Saint Phalle',
+    artwork: {
+      title: 'Blue Nana',
+      city: 'Hamburg',
+      image: 'https://i.imgur.com/Sd1AgUOm.jpg',
+    }
+  });
+
+  function handleNameChange(e) {
+    setPerson({
+      ...person,
+      name: e.target.value
+    });
+  }
+
+  function handleTitleChange(e) {
+    setPerson({
+      ...person,
+      artwork: {
+        ...person.artwork,
+        title: e.target.value
+      }
+    });
+  }
+
+  function handleCityChange(e) {
+    setPerson({
+      ...person,
+      artwork: {
+        ...person.artwork,
+        city: e.target.value
+      }
+    });
+  }
+
+  function handleImageChange(e) {
+    setPerson({
+      ...person,
+      artwork: {
+        ...person.artwork,
+        image: e.target.value
+      }
+    });
+  }
+
+  return (
+    <>
+      <label>
+        Name:
+        <input
+          value={person.name}
+          onChange={handleNameChange}
+        />
+      </label>
+      <label>
+        Title:
+        <input
+          value={person.artwork.title}
+          onChange={handleTitleChange}
+        />
+      </label>
+      <label>
+        City:
+        <input
+          value={person.artwork.city}
+          onChange={handleCityChange}
+        />
+      </label>
+      <label>
+        Image:
+        <input
+          value={person.artwork.image}
+          onChange={handleImageChange}
+        />
+      </label>
+      <p>
+        <i>{person.artwork.title}</i>
+        {' by '}
+        {person.name}
+        <br />
+        (located in {person.artwork.city})
+      </p>
+      <img
+        src={person.artwork.image}
+        alt={person.artwork.title}
+      />
+    </>
+  );
+}
+```
+
+```css
+label { display: block; }
+input { margin-left: 5px; margin-bottom: 5px; }
+img { width: 200px; height: 200px; }
+```
+
+</Sandpack>
+
+If copying objects in code gets tedious, you can use a library like [Immer](https://github.com/immerjs/use-immer) to reduce repetitive code:
+
+<Sandpack>
+
+```js
+import { useImmer } from 'use-immer';
+
+export default function Form() {
+  const [person, updatePerson] = useImmer({
+    name: 'Niki de Saint Phalle',
+    artwork: {
+      title: 'Blue Nana',
+      city: 'Hamburg',
+      image: 'https://i.imgur.com/Sd1AgUOm.jpg',
+    }
+  });
+
+  function handleNameChange(e) {
+    updatePerson(draft => {
+      draft.name = e.target.value;
+    });
+  }
+
+  function handleTitleChange(e) {
+    updatePerson(draft => {
+      draft.artwork.title = e.target.value;
+    });
+  }
+
+  function handleCityChange(e) {
+    updatePerson(draft => {
+      draft.artwork.city = e.target.value;
+    });
+  }
+
+  function handleImageChange(e) {
+    updatePerson(draft => {
+      draft.artwork.image = e.target.value;
+    });
+  }
+
+  return (
+    <>
+      <label>
+        Name:
+        <input
+          value={person.name}
+          onChange={handleNameChange}
+        />
+      </label>
+      <label>
+        Title:
+        <input
+          value={person.artwork.title}
+          onChange={handleTitleChange}
+        />
+      </label>
+      <label>
+        City:
+        <input
+          value={person.artwork.city}
+          onChange={handleCityChange}
+        />
+      </label>
+      <label>
+        Image:
+        <input
+          value={person.artwork.image}
+          onChange={handleImageChange}
+        />
+      </label>
+      <p>
+        <i>{person.artwork.title}</i>
+        {' by '}
+        {person.name}
+        <br />
+        (located in {person.artwork.city})
+      </p>
+      <img
+        src={person.artwork.image}
+        alt={person.artwork.title}
+      />
+    </>
+  );
+}
+```
+
+```json package.json
+{
+  "dependencies": {
+    "immer": "1.7.3",
+    "react": "latest",
+    "react-dom": "latest",
+    "react-scripts": "latest",
+    "use-immer": "0.5.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+```css
+label { display: block; }
+input { margin-left: 5px; margin-bottom: 5px; }
+img { width: 200px; height: 200px; }
+```
+
+</Sandpack>
+
+<LearnMore path="/learn/updating-objects-in-state">
+
+Read **[Updating Objects in State](/learn/updating-objects-in-state)** to learn how to update objects correctly.
+
+</LearnMore>
+
+## Updating arrays in state {/*updating-arrays-in-state*/}
+
+Arrays are another type of mutable JavaScript objects you can store in state and should treat as read-only. Just like with objects, when you want to update an array stored in state, you need to create a new one (or make a copy of an existing one), and then set state to use the new array:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+let nextId = 3;
+const initialList = [
+  { id: 0, title: 'Big Bellies', seen: false },
+  { id: 1, title: 'Lunar Landscape', seen: false },
+  { id: 2, title: 'Terracotta Army', seen: true },
+];
+
+export default function BucketList() {
+  const [list, setList] = useState(
+    initialList
+  );
+
+  function handleToggle(artworkId, nextSeen) {
+    setList(list.map(artwork => {
+      if (artwork.id === artworkId) {
+        return { ...artwork, seen: nextSeen };
+      } else {
+        return artwork;
+      }
+    }));
+  }
+
+  return (
+    <>
+      <h1>Art Bucket List</h1>
+      <h2>My list of art to see:</h2>
+      <ItemList
+        artworks={list}
+        onToggle={handleToggle} />
+    </>
+  );
+}
+
+function ItemList({ artworks, onToggle }) {
+  return (
+    <ul>
+      {artworks.map(artwork => (
+        <li key={artwork.id}>
+          <label>
+            <input
+              type="checkbox"
+              checked={artwork.seen}
+              onChange={e => {
+                onToggle(
+                  artwork.id,
+                  e.target.checked
+                );
+              }}
+            />
+            {artwork.title}
+          </label>
+        </li>
+      ))}
+    </ul>
+  );
+}
+```
+
+</Sandpack>
+
+If copying arrays in code gets tedious, you can use a library like [Immer](https://github.com/immerjs/use-immer) to reduce repetitive code:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+import { useImmer } from 'use-immer';
+
+let nextId = 3;
+const initialList = [
+  { id: 0, title: 'Big Bellies', seen: false },
+  { id: 1, title: 'Lunar Landscape', seen: false },
+  { id: 2, title: 'Terracotta Army', seen: true },
+];
+
+export default function BucketList() {
+  const [list, updateList] = useImmer(initialList);
+
+  function handleToggle(artworkId, nextSeen) {
+    updateList(draft => {
+      const artwork = draft.find(a =>
+        a.id === artworkId
+      );
+      artwork.seen = nextSeen;
+    });
+  }
+
+  return (
+    <>
+      <h1>Art Bucket List</h1>
+      <h2>My list of art to see:</h2>
+      <ItemList
+        artworks={list}
+        onToggle={handleToggle} />
+    </>
+  );
+}
+
+function ItemList({ artworks, onToggle }) {
+  return (
+    <ul>
+      {artworks.map(artwork => (
+        <li key={artwork.id}>
+          <label>
+            <input
+              type="checkbox"
+              checked={artwork.seen}
+              onChange={e => {
+                onToggle(
+                  artwork.id,
+                  e.target.checked
+                );
+              }}
+            />
+            {artwork.title}
+          </label>
+        </li>
+      ))}
+    </ul>
+  );
+}
+```
+
+```json package.json
+{
+  "dependencies": {
+    "immer": "1.7.3",
+    "react": "latest",
+    "react-dom": "latest",
+    "react-scripts": "latest",
+    "use-immer": "0.5.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+</Sandpack>
+
+<LearnMore path="/learn/updating-arrays-in-state">
+
+Read **[Updating Arrays in State](/learn/updating-arrays-in-state)** to learn how to update arrays correctly.
+
+</LearnMore>
+
+## What's next? {/*whats-next*/}
+
+Head over to [Responding to Events](/learn/responding-to-events) to start reading this chapter page by page!
+
+Or, if you're already familiar with these topics, why not read about [Managing State](/learn/managing-state)?
diff --git a/beta/src/content/learn/choosing-the-state-structure.md b/beta/src/content/learn/choosing-the-state-structure.md
new file mode 100644
index 000000000..70969d3fc
--- /dev/null
+++ b/beta/src/content/learn/choosing-the-state-structure.md
@@ -0,0 +1,2850 @@
+---
+title: Choosing the State Structure
+---
+
+<Intro>
+
+Structuring state well can make a difference between a component that is pleasant to modify and debug, and one that is a constant source of bugs. Here are some tips you should consider when structuring state.
+
+</Intro>
+
+<YouWillLearn>
+
+* When to use a single vs multiple state variables
+* What to avoid when organizing state
+* How to fix common issues with the state structure
+
+</YouWillLearn>
+
+## Principles for structuring state {/*principles-for-structuring-state*/}
+
+When you write a component that holds some state, you'll have to make choices about how many state variables to use and what the shape of their data should be. While it's possible to write correct programs even with a suboptimal state structure, there are a few principles that can guide you to make better choices:
+
+1. **Group related state.** If you always update two or more state variables at the same time, consider merging them into a single state variable.
+2. **Avoid contradictions in state.** When the state is structured in a way that several pieces of state may contradict and "disagree" with each other, you leave room for mistakes. Try to avoid this.
+3. **Avoid redundant state.** If you can calculate some information from the component's props or its existing state variables during rendering, you should not put that information into that component's state.
+4. **Avoid duplication in state.** When the same data is duplicated between multiple state variables, or within nested objects, it is difficult to keep them in sync. Reduce duplication when you can.
+5. **Avoid deeply nested state.** Deeply hierarchical state is not very convenient to update. When possible, prefer to structure state in a flat way.
+
+The goal behind these principles is to *make state easy to update without introducing mistakes*. Removing redundant and duplicate data from state helps ensure that all its pieces stay in sync. This is similar to how a database engineer might want to ["normalize" the database structure](https://docs.microsoft.com/en-us/office/troubleshoot/access/database-normalization-description) to reduce the chance of bugs. To paraphrase Albert Einstein, **"Make your state as simple as it can be--but no simpler."**
+
+Now let's see how these principles apply in action.
+
+## Group related state {/*group-related-state*/}
+
+You might sometimes be unsure between using a single or multiple state variables.
+
+Should you do this?
+
+```js
+const [x, setX] = useState(0);
+const [y, setY] = useState(0);
+```
+
+Or this?
+
+```js
+const [position, setPosition] = useState({ x: 0, y: 0 });
+```
+
+Technically, you can use either of these approaches. But **if some two state variables always change together, it might be a good idea to unify them into a single state variable.** Then you won't forget to always keep them in sync, like in this example where moving the cursor updates both coordinates of the red dot:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function MovingDot() {
+  const [position, setPosition] = useState({
+    x: 0,
+    y: 0
+  });
+  return (
+    <div
+      onPointerMove={e => {
+        setPosition({
+          x: e.clientX,
+          y: e.clientY
+        });
+      }}
+      style={{
+        position: 'relative',
+        width: '100vw',
+        height: '100vh',
+      }}>
+      <div style={{
+        position: 'absolute',
+        backgroundColor: 'red',
+        borderRadius: '50%',
+        transform: `translate(${position.x}px, ${position.y}px)`,
+        left: -10,
+        top: -10,
+        width: 20,
+        height: 20,
+      }} />
+    </div>
+  )
+}
+```
+
+```css
+body { margin: 0; padding: 0; height: 250px; }
+```
+
+</Sandpack>
+
+Another case where you'll group data into an object or an array is when you don't know how many different pieces of state you'll need. For example, it's helpful when you have a form where the user can add custom fields.
+
+<Pitfall>
+
+If your state variable is an object, remember that [you can't update only one field in it](/learn/updating-objects-in-state) without explicitly copying the other fields. For example, you can't do `setPosition({ x: 100 })` in the above example because it would not have the `y` property at all! Instead, if you wanted to set `x` alone, you would either do `setPosition({ ...position, x: 100 })`, or split them into two state variables and do `setX(100)`.
+
+</Pitfall>
+
+## Avoid contradictions in state {/*avoid-contradictions-in-state*/}
+
+Here is a hotel feedback form with `isSending` and `isSent` state variables:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function FeedbackForm() {
+  const [text, setText] = useState('');
+  const [isSending, setIsSending] = useState(false);
+  const [isSent, setIsSent] = useState(false);
+
+  async function handleSubmit(e) {
+    e.preventDefault();
+    setIsSending(true);
+    await sendMessage(text);
+    setIsSending(false);
+    setIsSent(true);
+  }
+
+  if (isSent) {
+    return <h1>Thanks for feedback!</h1>
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <p>How was your stay at The Prancing Pony?</p>
+      <textarea
+        disabled={isSending}
+        value={text}
+        onChange={e => setText(e.target.value)}
+      />
+      <br />
+      <button
+        disabled={isSending}
+        type="submit"
+      >
+        Send
+      </button>
+      {isSending && <p>Sending...</p>}
+    </form>
+  );
+}
+
+// Pretend to send a message.
+function sendMessage(text) {
+  return new Promise(resolve => {
+    setTimeout(resolve, 2000);
+  });
+}
+```
+
+</Sandpack>
+
+While this code works, it leaves the door open for "impossible" states. For example, if you forget to call `setIsSent` and `setIsSending` together, you may end up in a situation where both `isSending` and `isSent` are `true` at the same time. The more complex your component is, the harder it will be to understand what happened.
+
+**Since `isSending` and `isSent` should never be `true` at the same time, it is better to replace them with one `status` state variable that may take one of *three* valid states:** `'typing'` (initial), `'sending'`, and `'sent'`:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function FeedbackForm() {
+  const [text, setText] = useState('');
+  const [status, setStatus] = useState('typing');
+
+  async function handleSubmit(e) {
+    e.preventDefault();
+    setStatus('sending');
+    await sendMessage(text);
+    setStatus('sent');
+  }
+
+  const isSending = status === 'sending';
+  const isSent = status === 'sent';
+
+  if (isSent) {
+    return <h1>Thanks for feedback!</h1>
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <p>How was your stay at The Prancing Pony?</p>
+      <textarea
+        disabled={isSending}
+        value={text}
+        onChange={e => setText(e.target.value)}
+      />
+      <br />
+      <button
+        disabled={isSending}
+        type="submit"
+      >
+        Send
+      </button>
+      {isSending && <p>Sending...</p>}
+    </form>
+  );
+}
+
+// Pretend to send a message.
+function sendMessage(text) {
+  return new Promise(resolve => {
+    setTimeout(resolve, 2000);
+  });
+}
+```
+
+</Sandpack>
+
+You can still declare some constants for readability:
+
+```js
+const isSending = status === 'sending';
+const isSent = status === 'sent';
+```
+
+But they're not state variables, so you don't need to worry about them getting out of sync with each other.
+
+## Avoid redundant state {/*avoid-redundant-state*/}
+
+If you can calculate some information from the component's props or its existing state variables during rendering, you **should not** put that information into that component's state.
+
+For example, take this form. It works, but can you find any redundant state in it?
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function Form() {
+  const [firstName, setFirstName] = useState('');
+  const [lastName, setLastName] = useState('');
+  const [fullName, setFullName] = useState('');
+
+  function handleFirstNameChange(e) {
+    setFirstName(e.target.value);
+    setFullName(e.target.value + ' ' + lastName);
+  }
+
+  function handleLastNameChange(e) {
+    setLastName(e.target.value);
+    setFullName(firstName + ' ' + e.target.value);
+  }
+
+  return (
+    <>
+      <h2>Let’s check you in</h2>
+      <label>
+        First name:{' '}
+        <input
+          value={firstName}
+          onChange={handleFirstNameChange}
+        />
+      </label>
+      <label>
+        Last name:{' '}
+        <input
+          value={lastName}
+          onChange={handleLastNameChange}
+        />
+      </label>
+      <p>
+        Your ticket will be issued to: <b>{fullName}</b>
+      </p>
+    </>
+  );
+}
+```
+
+```css
+label { display: block; margin-bottom: 5px; }
+```
+
+</Sandpack>
+
+This form has three state variables: `firstName`, `lastName`, and `fullName`. However, `fullName` is redundant. **You can always calculate `fullName` from `firstName` and `lastName` during render, so remove it from state.**
+
+This is how you can do it:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function Form() {
+  const [firstName, setFirstName] = useState('');
+  const [lastName, setLastName] = useState('');
+
+  const fullName = firstName + ' ' + lastName;
+
+  function handleFirstNameChange(e) {
+    setFirstName(e.target.value);
+  }
+
+  function handleLastNameChange(e) {
+    setLastName(e.target.value);
+  }
+
+  return (
+    <>
+      <h2>Let’s check you in</h2>
+      <label>
+        First name:{' '}
+        <input
+          value={firstName}
+          onChange={handleFirstNameChange}
+        />
+      </label>
+      <label>
+        Last name:{' '}
+        <input
+          value={lastName}
+          onChange={handleLastNameChange}
+        />
+      </label>
+      <p>
+        Your ticket will be issued to: <b>{fullName}</b>
+      </p>
+    </>
+  );
+}
+```
+
+```css
+label { display: block; margin-bottom: 5px; }
+```
+
+</Sandpack>
+
+Here, `fullName` is *not* a state variable. Instead, it's calculated during render:
+
+```js
+const fullName = firstName + ' ' + lastName;
+```
+
+As a result, the change handlers don't need to do anything special to update it. When you call `setFirstName` or `setLastName`, you trigger a re-render, and then the next `fullName` will be calculated from the fresh data.
+
+<DeepDive>
+
+#### Don't mirror props in state {/*don-t-mirror-props-in-state*/}
+
+A common example of redundant state is code like this:
+
+```js
+function Message({ messageColor }) {
+  const [color, setColor] = useState(messageColor);
+```
+
+Here, a `color` state variable is initialized to the `messageColor` prop. The problem is that **if the parent component passes a different value of `messageColor` later (for example, `'red'` instead of `'blue'`), the `color` *state variable* would not be updated!** The state is only initialized during the first render.
+
+This is why "mirroring" some prop in a state variable can lead to confusion. Instead, use the `messageColor` prop directly in your code. If you want to give it a shorter name, use a constant:
+
+```js
+function Message({ messageColor }) {
+  const color = messageColor;
+```
+
+This way it won't get out of sync with the prop passed from the parent component.
+
+"Mirroring" props into state only makes sense when you *want* to ignore all updates for a specific prop. By convention, start the prop name with `initial` or `default` to clarify that its new values are ignored:
+
+```js
+function Message({ initialColor }) {
+  // The `color` state variable holds the *first* value of `initialColor`.
+  // Further changes to the `initialColor` prop are ignored.
+  const [color, setColor] = useState(initialColor);
+```
+
+</DeepDive>
+
+## Avoid duplication in state {/*avoid-duplication-in-state*/}
+
+This menu list component lets you choose a single travel snack out of several:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+const initialItems = [
+  { title: 'pretzels', id: 0 },
+  { title: 'crispy seaweed', id: 1 },
+  { title: 'granola bar', id: 2 },
+];
+
+export default function Menu() {
+  const [items, setItems] = useState(initialItems);
+  const [selectedItem, setSelectedItem] = useState(
+    items[0]
+  );
+
+  return (
+    <>
+      <h2>What's your travel snack?</h2>
+      <ul>
+        {items.map(item => (
+          <li key={item.id}>
+            {item.title}
+            {' '}
+            <button onClick={() => {
+              setSelectedItem(item);
+            }}>Choose</button>
+          </li>
+        ))}
+      </ul>
+      <p>You picked {selectedItem.title}.</p>
+    </>
+  );
+}
+```
+
+```css
+button { margin-top: 10px; }
+```
+
+</Sandpack>
+
+Currently, it stores the selected item as an object in the `selectedItem` state variable. However, this is not great: **the contents of the `selectedItem` is the same object as one of the items inside the `items` list.** This means that the information about the item itself is duplicated in two places.
+
+Why is this a problem? Let's make each item editable:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+const initialItems = [
+  { title: 'pretzels', id: 0 },
+  { title: 'crispy seaweed', id: 1 },
+  { title: 'granola bar', id: 2 },
+];
+
+export default function Menu() {
+  const [items, setItems] = useState(initialItems);
+  const [selectedItem, setSelectedItem] = useState(
+    items[0]
+  );
+
+  function handleItemChange(id, e) {
+    setItems(items.map(item => {
+      if (item.id === id) {
+        return {
+          ...item,
+          title: e.target.value,
+        };
+      } else {
+        return item;
+      }
+    }));
+  }
+
+  return (
+    <>
+      <h2>What's your travel snack?</h2> 
+      <ul>
+        {items.map((item, index) => (
+          <li key={item.id}>
+            <input
+              value={item.title}
+              onChange={e => {
+                handleItemChange(item.id, e)
+              }}
+            />
+            {' '}
+            <button onClick={() => {
+              setSelectedItem(item);
+            }}>Choose</button>
+          </li>
+        ))}
+      </ul>
+      <p>You picked {selectedItem.title}.</p>
+    </>
+  );
+}
+```
+
+```css
+button { margin-top: 10px; }
+```
+
+</Sandpack>
+
+Notice how if you first click "Choose" on an item and *then* edit it, **the input updates but the label at the bottom does not reflect the edits.** This is because you have duplicated state, and you forgot to update `selectedItem`.
+
+Although you could update `selectedItem` too, an easier fix is to remove duplication. In this example, instead of a `selectedItem` object (which creates a duplication with objects inside `items`), you hold the `selectedId` in state, and *then* get the `selectedItem` by searching the `items` array for an item with that ID:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+const initialItems = [
+  { title: 'pretzels', id: 0 },
+  { title: 'crispy seaweed', id: 1 },
+  { title: 'granola bar', id: 2 },
+];
+
+export default function Menu() {
+  const [items, setItems] = useState(initialItems);
+  const [selectedId, setSelectedId] = useState(0);
+
+  const selectedItem = items.find(item =>
+    item.id === selectedId
+  );
+
+  function handleItemChange(id, e) {
+    setItems(items.map(item => {
+      if (item.id === id) {
+        return {
+          ...item,
+          title: e.target.value,
+        };
+      } else {
+        return item;
+      }
+    }));
+  }
+
+  return (
+    <>
+      <h2>What's your travel snack?</h2>
+      <ul>
+        {items.map((item, index) => (
+          <li key={item.id}>
+            <input
+              value={item.title}
+              onChange={e => {
+                handleItemChange(item.id, e)
+              }}
+            />
+            {' '}
+            <button onClick={() => {
+              setSelectedId(item.id);
+            }}>Choose</button>
+          </li>
+        ))}
+      </ul>
+      <p>You picked {selectedItem.title}.</p>
+    </>
+  );
+}
+```
+
+```css
+button { margin-top: 10px; }
+```
+
+</Sandpack>
+
+(Alternatively, you may hold the selected index in state.)
+
+The state used to be duplicated like this:
+
+* `items = [{ id: 0, title: 'pretzels'}, ...]`
+* `selectedItem = {id: 0, title: 'pretzels'}`
+
+But after the change it's like this:
+
+* `items = [{ id: 0, title: 'pretzels'}, ...]`
+* `selectedId = 0`
+
+The duplication is gone, and you only keep the essential state!
+
+Now if you edit the *selected* item, the message below will update immediately. This is because `setItems` triggers a re-render, and `items.find(...)` would find the item with the updated title. You didn't need to hold *the selected item* in state, because only the *selected ID* is essential. The rest could be calculated during render.
+
+## Avoid deeply nested state {/*avoid-deeply-nested-state*/}
+
+Imagine a travel plan consisting of planets, continents, and countries. You might be tempted to structure its state using nested objects and arrays, like in this example:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+import { initialTravelPlan } from './places.js';
+
+function PlaceTree({ place }) {
+  const childPlaces = place.childPlaces;
+  return (
+    <li>
+      {place.title}
+      {childPlaces.length > 0 && (
+        <ol>
+          {childPlaces.map(place => (
+            <PlaceTree key={place.id} place={place} />
+          ))}
+        </ol>
+      )}
+    </li>
+  );
+}
+
+export default function TravelPlan() {
+  const [plan, setPlan] = useState(initialTravelPlan);
+  const planets = plan.childPlaces;
+  return (
+    <>
+      <h2>Places to visit</h2>
+      <ol>
+        {planets.map(place => (
+          <PlaceTree key={place.id} place={place} />
+        ))}
+      </ol>
+    </>
+  );
+}
+```
+
+```js places.js active
+export const initialTravelPlan = {
+  id: 0,
+  title: '(Root)',
+  childPlaces: [{
+    id: 1,
+    title: 'Earth',
+    childPlaces: [{
+      id: 2,
+      title: 'Africa',
+      childPlaces: [{
+        id: 3,
+        title: 'Botswana',
+        childPlaces: []
+      }, {
+        id: 4,
+        title: 'Egypt',
+        childPlaces: []
+      }, {
+        id: 5,
+        title: 'Kenya',
+        childPlaces: []
+      }, {
+        id: 6,
+        title: 'Madagascar',
+        childPlaces: []
+      }, {
+        id: 7,
+        title: 'Morocco',
+        childPlaces: []
+      }, {
+        id: 8,
+        title: 'Nigeria',
+        childPlaces: []
+      }, {
+        id: 9,
+        title: 'South Africa',
+        childPlaces: []
+      }]
+    }, {
+      id: 10,
+      title: 'Americas',
+      childPlaces: [{
+        id: 11,
+        title: 'Argentina',
+        childPlaces: []
+      }, {
+        id: 12,
+        title: 'Brazil',
+        childPlaces: []
+      }, {
+        id: 13,
+        title: 'Barbados',
+        childPlaces: []
+      }, {
+        id: 14,
+        title: 'Canada',
+        childPlaces: []
+      }, {
+        id: 15,
+        title: 'Jamaica',
+        childPlaces: []
+      }, {
+        id: 16,
+        title: 'Mexico',
+        childPlaces: []
+      }, {
+        id: 17,
+        title: 'Trinidad and Tobago',
+        childPlaces: []
+      }, {
+        id: 18,
+        title: 'Venezuela',
+        childPlaces: []
+      }]
+    }, {
+      id: 19,
+      title: 'Asia',
+      childPlaces: [{
+        id: 20,
+        title: 'China',
+        childPlaces: []
+      }, {
+        id: 21,
+        title: 'Hong Kong',
+        childPlaces: []
+      }, {
+        id: 22,
+        title: 'India',
+        childPlaces: []
+      }, {
+        id: 23,
+        title: 'Singapore',
+        childPlaces: []
+      }, {
+        id: 24,
+        title: 'South Korea',
+        childPlaces: []
+      }, {
+        id: 25,
+        title: 'Thailand',
+        childPlaces: []
+      }, {
+        id: 26,
+        title: 'Vietnam',
+        childPlaces: []
+      }]
+    }, {
+      id: 27,
+      title: 'Europe',
+      childPlaces: [{
+        id: 28,
+        title: 'Croatia',
+        childPlaces: [],
+      }, {
+        id: 29,
+        title: 'France',
+        childPlaces: [],
+      }, {
+        id: 30,
+        title: 'Germany',
+        childPlaces: [],
+      }, {
+        id: 31,
+        title: 'Italy',
+        childPlaces: [],
+      }, {
+        id: 32,
+        title: 'Portugal',
+        childPlaces: [],
+      }, {
+        id: 33,
+        title: 'Spain',
+        childPlaces: [],
+      }, {
+        id: 34,
+        title: 'Turkey',
+        childPlaces: [],
+      }]
+    }, {
+      id: 35,
+      title: 'Oceania',
+      childPlaces: [{
+        id: 36,
+        title: 'Australia',
+        childPlaces: [],
+      }, {
+        id: 37,
+        title: 'Bora Bora (French Polynesia)',
+        childPlaces: [],
+      }, {
+        id: 38,
+        title: 'Easter Island (Chile)',
+        childPlaces: [],
+      }, {
+        id: 39,
+        title: 'Fiji',
+        childPlaces: [],
+      }, {
+        id: 40,
+        title: 'Hawaii (the USA)',
+        childPlaces: [],
+      }, {
+        id: 41,
+        title: 'New Zealand',
+        childPlaces: [],
+      }, {
+        id: 42,
+        title: 'Vanuatu',
+        childPlaces: [],
+      }]
+    }]
+  }, {
+    id: 43,
+    title: 'Moon',
+    childPlaces: [{
+      id: 44,
+      title: 'Rheita',
+      childPlaces: []
+    }, {
+      id: 45,
+      title: 'Piccolomini',
+      childPlaces: []
+    }, {
+      id: 46,
+      title: 'Tycho',
+      childPlaces: []
+    }]
+  }, {
+    id: 47,
+    title: 'Mars',
+    childPlaces: [{
+      id: 48,
+      title: 'Corn Town',
+      childPlaces: []
+    }, {
+      id: 49,
+      title: 'Green Hill',
+      childPlaces: []      
+    }]
+  }]
+};
+```
+
+</Sandpack>
+
+Now let's say you want to add a button to delete a place you've already visited. How would you go about it? [Updating nested state](/learn/updating-objects-in-state#updating-a-nested-object) involves making copies of objects all the way up from the part that changed. Deleting a deeply nested place would involve copying its entire parent place chain. Such code can be very verbose.
+
+**If the state is too nested to update easily, consider making it "flat".** Here is one way you can restructure this data. Instead of a tree-like structure where each `place` has an array of *its child places*, you can have each place hold an array of *its child place IDs*. Then you can store a mapping from each place ID to the corresponding place.
+
+This data restructuring might remind you of seeing a database table:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+import { initialTravelPlan } from './places.js';
+
+function PlaceTree({ id, placesById }) {
+  const place = placesById[id];
+  const childIds = place.childIds;
+  return (
+    <li>
+      {place.title}
+      {childIds.length > 0 && (
+        <ol>
+          {childIds.map(childId => (
+            <PlaceTree
+              key={childId}
+              id={childId}
+              placesById={placesById}
+            />
+          ))}
+        </ol>
+      )}
+    </li>
+  );
+}
+
+export default function TravelPlan() {
+  const [plan, setPlan] = useState(initialTravelPlan);
+  const root = plan[0];
+  const planetIds = root.childIds;
+  return (
+    <>
+      <h2>Places to visit</h2>
+      <ol>
+        {planetIds.map(id => (
+          <PlaceTree
+            key={id}
+            id={id}
+            placesById={plan}
+          />
+        ))}
+      </ol>
+    </>
+  );
+}
+```
+
+```js places.js active
+export const initialTravelPlan = {
+  0: {
+    id: 0,
+    title: '(Root)',
+    childIds: [1, 43, 47],
+  },
+  1: {
+    id: 1,
+    title: 'Earth',
+    childIds: [2, 10, 19, 27, 35]
+  },
+  2: {
+    id: 2,
+    title: 'Africa',
+    childIds: [3, 4, 5, 6 , 7, 8, 9]
+  }, 
+  3: {
+    id: 3,
+    title: 'Botswana',
+    childIds: []
+  },
+  4: {
+    id: 4,
+    title: 'Egypt',
+    childIds: []
+  },
+  5: {
+    id: 5,
+    title: 'Kenya',
+    childIds: []
+  },
+  6: {
+    id: 6,
+    title: 'Madagascar',
+    childIds: []
+  }, 
+  7: {
+    id: 7,
+    title: 'Morocco',
+    childIds: []
+  },
+  8: {
+    id: 8,
+    title: 'Nigeria',
+    childIds: []
+  },
+  9: {
+    id: 9,
+    title: 'South Africa',
+    childIds: []
+  },
+  10: {
+    id: 10,
+    title: 'Americas',
+    childIds: [11, 12, 13, 14, 15, 16, 17, 18],   
+  },
+  11: {
+    id: 11,
+    title: 'Argentina',
+    childIds: []
+  },
+  12: {
+    id: 12,
+    title: 'Brazil',
+    childIds: []
+  },
+  13: {
+    id: 13,
+    title: 'Barbados',
+    childIds: []
+  }, 
+  14: {
+    id: 14,
+    title: 'Canada',
+    childIds: []
+  },
+  15: {
+    id: 15,
+    title: 'Jamaica',
+    childIds: []
+  },
+  16: {
+    id: 16,
+    title: 'Mexico',
+    childIds: []
+  },
+  17: {
+    id: 17,
+    title: 'Trinidad and Tobago',
+    childIds: []
+  },
+  18: {
+    id: 18,
+    title: 'Venezuela',
+    childIds: []
+  },
+  19: {
+    id: 19,
+    title: 'Asia',
+    childIds: [20, 21, 22, 23, 24, 25, 26],   
+  },
+  20: {
+    id: 20,
+    title: 'China',
+    childIds: []
+  },
+  21: {
+    id: 21,
+    title: 'Hong Kong',
+    childIds: []
+  },
+  22: {
+    id: 22,
+    title: 'India',
+    childIds: []
+  },
+  23: {
+    id: 23,
+    title: 'Singapore',
+    childIds: []
+  },
+  24: {
+    id: 24,
+    title: 'South Korea',
+    childIds: []
+  },
+  25: {
+    id: 25,
+    title: 'Thailand',
+    childIds: []
+  },
+  26: {
+    id: 26,
+    title: 'Vietnam',
+    childIds: []
+  },
+  27: {
+    id: 27,
+    title: 'Europe',
+    childIds: [28, 29, 30, 31, 32, 33, 34],   
+  },
+  28: {
+    id: 28,
+    title: 'Croatia',
+    childIds: []
+  },
+  29: {
+    id: 29,
+    title: 'France',
+    childIds: []
+  },
+  30: {
+    id: 30,
+    title: 'Germany',
+    childIds: []
+  },
+  31: {
+    id: 31,
+    title: 'Italy',
+    childIds: []
+  },
+  32: {
+    id: 32,
+    title: 'Portugal',
+    childIds: []
+  },
+  33: {
+    id: 33,
+    title: 'Spain',
+    childIds: []
+  },
+  34: {
+    id: 34,
+    title: 'Turkey',
+    childIds: []
+  },
+  35: {
+    id: 35,
+    title: 'Oceania',
+    childIds: [36, 37, 38, 39, 40, 41, 42],   
+  },
+  36: {
+    id: 36,
+    title: 'Australia',
+    childIds: []
+  },
+  37: {
+    id: 37,
+    title: 'Bora Bora (French Polynesia)',
+    childIds: []
+  },
+  38: {
+    id: 38,
+    title: 'Easter Island (Chile)',
+    childIds: []
+  },
+  39: {
+    id: 39,
+    title: 'Fiji',
+    childIds: []
+  },
+  40: {
+    id: 40,
+    title: 'Hawaii (the USA)',
+    childIds: []
+  },
+  41: {
+    id: 41,
+    title: 'New Zealand',
+    childIds: []
+  },
+  42: {
+    id: 42,
+    title: 'Vanuatu',
+    childIds: []
+  },
+  43: {
+    id: 43,
+    title: 'Moon',
+    childIds: [44, 45, 46]
+  },
+  44: {
+    id: 44,
+    title: 'Rheita',
+    childIds: []
+  },
+  45: {
+    id: 45,
+    title: 'Piccolomini',
+    childIds: []
+  },
+  46: {
+    id: 46,
+    title: 'Tycho',
+    childIds: []
+  },
+  47: {
+    id: 47,
+    title: 'Mars',
+    childIds: [48, 49]
+  },
+  48: {
+    id: 48,
+    title: 'Corn Town',
+    childIds: []
+  },
+  49: {
+    id: 49,
+    title: 'Green Hill',
+    childIds: []
+  }
+};
+```
+
+</Sandpack>
+
+**Now that the state is "flat" (also known as "normalized"), updating nested items becomes easier.**
+
+In order to remove a place now, you only need to update two levels of state:
+
+- The updated version of its *parent* place should exclude the removed ID from its `childIds` array.
+- The updated version of the root "table" object should include the updated version of the parent place.
+
+Here is an example of how you could go about it:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+import { initialTravelPlan } from './places.js';
+
+export default function TravelPlan() {
+  const [plan, setPlan] = useState(initialTravelPlan);
+
+  function handleComplete(parentId, childId) {
+    const parent = plan[parentId];
+    // Create a new version of the parent place
+    // that doesn't include this child ID.
+    const nextParent = {
+      ...parent,
+      childIds: parent.childIds
+        .filter(id => id !== childId)
+    };
+    // Update the root state object...
+    setPlan({
+      ...plan,
+      // ...so that it has the updated parent.
+      [parentId]: nextParent
+    });
+  }
+
+  const root = plan[0];
+  const planetIds = root.childIds;
+  return (
+    <>
+      <h2>Places to visit</h2>
+      <ol>
+        {planetIds.map(id => (
+          <PlaceTree
+            key={id}
+            id={id}
+            parentId={0}
+            placesById={plan}
+            onComplete={handleComplete}
+          />
+        ))}
+      </ol>
+    </>
+  );
+}
+
+function PlaceTree({ id, parentId, placesById, onComplete }) {
+  const place = placesById[id];
+  const childIds = place.childIds;
+  return (
+    <li>
+      {place.title}
+      <button onClick={() => {
+        onComplete(parentId, id);
+      }}>
+        Complete
+      </button>
+      {childIds.length > 0 &&
+        <ol>
+          {childIds.map(childId => (
+            <PlaceTree
+              key={childId}
+              id={childId}
+              parentId={id}
+              placesById={placesById}
+              onComplete={onComplete}
+            />
+          ))}
+        </ol>
+      }
+    </li>
+  );
+}
+```
+
+```js places.js
+export const initialTravelPlan = {
+  0: {
+    id: 0,
+    title: '(Root)',
+    childIds: [1, 43, 47],
+  },
+  1: {
+    id: 1,
+    title: 'Earth',
+    childIds: [2, 10, 19, 27, 35]
+  },
+  2: {
+    id: 2,
+    title: 'Africa',
+    childIds: [3, 4, 5, 6 , 7, 8, 9]
+  }, 
+  3: {
+    id: 3,
+    title: 'Botswana',
+    childIds: []
+  },
+  4: {
+    id: 4,
+    title: 'Egypt',
+    childIds: []
+  },
+  5: {
+    id: 5,
+    title: 'Kenya',
+    childIds: []
+  },
+  6: {
+    id: 6,
+    title: 'Madagascar',
+    childIds: []
+  }, 
+  7: {
+    id: 7,
+    title: 'Morocco',
+    childIds: []
+  },
+  8: {
+    id: 8,
+    title: 'Nigeria',
+    childIds: []
+  },
+  9: {
+    id: 9,
+    title: 'South Africa',
+    childIds: []
+  },
+  10: {
+    id: 10,
+    title: 'Americas',
+    childIds: [11, 12, 13, 14, 15, 16, 17, 18],   
+  },
+  11: {
+    id: 11,
+    title: 'Argentina',
+    childIds: []
+  },
+  12: {
+    id: 12,
+    title: 'Brazil',
+    childIds: []
+  },
+  13: {
+    id: 13,
+    title: 'Barbados',
+    childIds: []
+  }, 
+  14: {
+    id: 14,
+    title: 'Canada',
+    childIds: []
+  },
+  15: {
+    id: 15,
+    title: 'Jamaica',
+    childIds: []
+  },
+  16: {
+    id: 16,
+    title: 'Mexico',
+    childIds: []
+  },
+  17: {
+    id: 17,
+    title: 'Trinidad and Tobago',
+    childIds: []
+  },
+  18: {
+    id: 18,
+    title: 'Venezuela',
+    childIds: []
+  },
+  19: {
+    id: 19,
+    title: 'Asia',
+    childIds: [20, 21, 22, 23, 24, 25, 26],   
+  },
+  20: {
+    id: 20,
+    title: 'China',
+    childIds: []
+  },
+  21: {
+    id: 21,
+    title: 'Hong Kong',
+    childIds: []
+  },
+  22: {
+    id: 22,
+    title: 'India',
+    childIds: []
+  },
+  23: {
+    id: 23,
+    title: 'Singapore',
+    childIds: []
+  },
+  24: {
+    id: 24,
+    title: 'South Korea',
+    childIds: []
+  },
+  25: {
+    id: 25,
+    title: 'Thailand',
+    childIds: []
+  },
+  26: {
+    id: 26,
+    title: 'Vietnam',
+    childIds: []
+  },
+  27: {
+    id: 27,
+    title: 'Europe',
+    childIds: [28, 29, 30, 31, 32, 33, 34],   
+  },
+  28: {
+    id: 28,
+    title: 'Croatia',
+    childIds: []
+  },
+  29: {
+    id: 29,
+    title: 'France',
+    childIds: []
+  },
+  30: {
+    id: 30,
+    title: 'Germany',
+    childIds: []
+  },
+  31: {
+    id: 31,
+    title: 'Italy',
+    childIds: []
+  },
+  32: {
+    id: 32,
+    title: 'Portugal',
+    childIds: []
+  },
+  33: {
+    id: 33,
+    title: 'Spain',
+    childIds: []
+  },
+  34: {
+    id: 34,
+    title: 'Turkey',
+    childIds: []
+  },
+  35: {
+    id: 35,
+    title: 'Oceania',
+    childIds: [36, 37, 38, 39, 40, 41,, 42],   
+  },
+  36: {
+    id: 36,
+    title: 'Australia',
+    childIds: []
+  },
+  37: {
+    id: 37,
+    title: 'Bora Bora (French Polynesia)',
+    childIds: []
+  },
+  38: {
+    id: 38,
+    title: 'Easter Island (Chile)',
+    childIds: []
+  },
+  39: {
+    id: 39,
+    title: 'Fiji',
+    childIds: []
+  },
+  40: {
+    id: 40,
+    title: 'Hawaii (the USA)',
+    childIds: []
+  },
+  41: {
+    id: 41,
+    title: 'New Zealand',
+    childIds: []
+  },
+  42: {
+    id: 42,
+    title: 'Vanuatu',
+    childIds: []
+  },
+  43: {
+    id: 43,
+    title: 'Moon',
+    childIds: [44, 45, 46]
+  },
+  44: {
+    id: 44,
+    title: 'Rheita',
+    childIds: []
+  },
+  45: {
+    id: 45,
+    title: 'Piccolomini',
+    childIds: []
+  },
+  46: {
+    id: 46,
+    title: 'Tycho',
+    childIds: []
+  },
+  47: {
+    id: 47,
+    title: 'Mars',
+    childIds: [48, 49]
+  },
+  48: {
+    id: 48,
+    title: 'Corn Town',
+    childIds: []
+  },
+  49: {
+    id: 49,
+    title: 'Green Hill',
+    childIds: []
+  }
+};
+```
+
+```css
+button { margin: 10px; }
+```
+
+</Sandpack>
+
+You can nest state as much as you like, but making it "flat" can solve numerous problems. It makes state easier to update, and it helps ensure you don't have duplication in different parts of a nested object.
+
+<DeepDive>
+
+#### Improving memory usage {/*improving-memory-usage*/}
+
+Ideally, you would also remove the deleted items (and their children!) from the "table" object to improve memory usage. This version does that. It also [uses Immer](/learn/updating-objects-in-state#write-concise-update-logic-with-immer) to make the update logic more concise.
+
+<Sandpack>
+
+```js
+import { useImmer } from 'use-immer';
+import { initialTravelPlan } from './places.js';
+
+export default function TravelPlan() {
+  const [plan, updatePlan] = useImmer(initialTravelPlan);
+
+  function handleComplete(parentId, childId) {
+    updatePlan(draft => {
+      // Remove from the parent place's child IDs.
+      const parent = draft[parentId];
+      parent.childIds = parent.childIds
+        .filter(id => id !== childId);
+
+      // Forget this place and all its subtree.
+      deleteAllChildren(childId);
+      function deleteAllChildren(id) {
+        const place = draft[id];
+        place.childIds.forEach(deleteAllChildren);
+        delete draft[id];
+      }
+    });
+  }
+
+  const root = plan[0];
+  const planetIds = root.childIds;
+  return (
+    <>
+      <h2>Places to visit</h2>
+      <ol>
+        {planetIds.map(id => (
+          <PlaceTree
+            key={id}
+            id={id}
+            parentId={0}
+            placesById={plan}
+            onComplete={handleComplete}
+          />
+        ))}
+      </ol>
+    </>
+  );
+}
+
+function PlaceTree({ id, parentId, placesById, onComplete }) {
+  const place = placesById[id];
+  const childIds = place.childIds;
+  return (
+    <li>
+      {place.title}
+      <button onClick={() => {
+        onComplete(parentId, id);
+      }}>
+        Complete
+      </button>
+      {childIds.length > 0 &&
+        <ol>
+          {childIds.map(childId => (
+            <PlaceTree
+              key={childId}
+              id={childId}
+              parentId={id}
+              placesById={placesById}
+              onComplete={onComplete}
+            />
+          ))}
+        </ol>
+      }
+    </li>
+  );
+}
+```
+
+```js places.js
+export const initialTravelPlan = {
+  0: {
+    id: 0,
+    title: '(Root)',
+    childIds: [1, 43, 47],
+  },
+  1: {
+    id: 1,
+    title: 'Earth',
+    childIds: [2, 10, 19, 27, 35]
+  },
+  2: {
+    id: 2,
+    title: 'Africa',
+    childIds: [3, 4, 5, 6 , 7, 8, 9]
+  }, 
+  3: {
+    id: 3,
+    title: 'Botswana',
+    childIds: []
+  },
+  4: {
+    id: 4,
+    title: 'Egypt',
+    childIds: []
+  },
+  5: {
+    id: 5,
+    title: 'Kenya',
+    childIds: []
+  },
+  6: {
+    id: 6,
+    title: 'Madagascar',
+    childIds: []
+  }, 
+  7: {
+    id: 7,
+    title: 'Morocco',
+    childIds: []
+  },
+  8: {
+    id: 8,
+    title: 'Nigeria',
+    childIds: []
+  },
+  9: {
+    id: 9,
+    title: 'South Africa',
+    childIds: []
+  },
+  10: {
+    id: 10,
+    title: 'Americas',
+    childIds: [11, 12, 13, 14, 15, 16, 17, 18],   
+  },
+  11: {
+    id: 11,
+    title: 'Argentina',
+    childIds: []
+  },
+  12: {
+    id: 12,
+    title: 'Brazil',
+    childIds: []
+  },
+  13: {
+    id: 13,
+    title: 'Barbados',
+    childIds: []
+  }, 
+  14: {
+    id: 14,
+    title: 'Canada',
+    childIds: []
+  },
+  15: {
+    id: 15,
+    title: 'Jamaica',
+    childIds: []
+  },
+  16: {
+    id: 16,
+    title: 'Mexico',
+    childIds: []
+  },
+  17: {
+    id: 17,
+    title: 'Trinidad and Tobago',
+    childIds: []
+  },
+  18: {
+    id: 18,
+    title: 'Venezuela',
+    childIds: []
+  },
+  19: {
+    id: 19,
+    title: 'Asia',
+    childIds: [20, 21, 22, 23, 24, 25, 26],   
+  },
+  20: {
+    id: 20,
+    title: 'China',
+    childIds: []
+  },
+  21: {
+    id: 21,
+    title: 'Hong Kong',
+    childIds: []
+  },
+  22: {
+    id: 22,
+    title: 'India',
+    childIds: []
+  },
+  23: {
+    id: 23,
+    title: 'Singapore',
+    childIds: []
+  },
+  24: {
+    id: 24,
+    title: 'South Korea',
+    childIds: []
+  },
+  25: {
+    id: 25,
+    title: 'Thailand',
+    childIds: []
+  },
+  26: {
+    id: 26,
+    title: 'Vietnam',
+    childIds: []
+  },
+  27: {
+    id: 27,
+    title: 'Europe',
+    childIds: [28, 29, 30, 31, 32, 33, 34],   
+  },
+  28: {
+    id: 28,
+    title: 'Croatia',
+    childIds: []
+  },
+  29: {
+    id: 29,
+    title: 'France',
+    childIds: []
+  },
+  30: {
+    id: 30,
+    title: 'Germany',
+    childIds: []
+  },
+  31: {
+    id: 31,
+    title: 'Italy',
+    childIds: []
+  },
+  32: {
+    id: 32,
+    title: 'Portugal',
+    childIds: []
+  },
+  33: {
+    id: 33,
+    title: 'Spain',
+    childIds: []
+  },
+  34: {
+    id: 34,
+    title: 'Turkey',
+    childIds: []
+  },
+  35: {
+    id: 35,
+    title: 'Oceania',
+    childIds: [36, 37, 38, 39, 40, 41,, 42],   
+  },
+  36: {
+    id: 36,
+    title: 'Australia',
+    childIds: []
+  },
+  37: {
+    id: 37,
+    title: 'Bora Bora (French Polynesia)',
+    childIds: []
+  },
+  38: {
+    id: 38,
+    title: 'Easter Island (Chile)',
+    childIds: []
+  },
+  39: {
+    id: 39,
+    title: 'Fiji',
+    childIds: []
+  },
+  40: {
+    id: 40,
+    title: 'Hawaii (the USA)',
+    childIds: []
+  },
+  41: {
+    id: 41,
+    title: 'New Zealand',
+    childIds: []
+  },
+  42: {
+    id: 42,
+    title: 'Vanuatu',
+    childIds: []
+  },
+  43: {
+    id: 43,
+    title: 'Moon',
+    childIds: [44, 45, 46]
+  },
+  44: {
+    id: 44,
+    title: 'Rheita',
+    childIds: []
+  },
+  45: {
+    id: 45,
+    title: 'Piccolomini',
+    childIds: []
+  },
+  46: {
+    id: 46,
+    title: 'Tycho',
+    childIds: []
+  },
+  47: {
+    id: 47,
+    title: 'Mars',
+    childIds: [48, 49]
+  },
+  48: {
+    id: 48,
+    title: 'Corn Town',
+    childIds: []
+  },
+  49: {
+    id: 49,
+    title: 'Green Hill',
+    childIds: []
+  }
+};
+```
+
+```css
+button { margin: 10px; }
+```
+
+```json package.json
+{
+  "dependencies": {
+    "immer": "1.7.3",
+    "react": "latest",
+    "react-dom": "latest",
+    "react-scripts": "latest",
+    "use-immer": "0.5.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+</Sandpack>
+
+</DeepDive>
+
+Sometimes, you can also reduce state nesting by moving some of the nested state into the child components. This works well for ephemeral UI state that doesn't need to be stored, like whether an item is hovered.
+
+<Recap>
+
+* If two state variables always update together, consider merging them into one. 
+* Choose your state variables carefully to avoid creating "impossible" states.
+* Structure your state in a way that reduces the chances that you'll make a mistake updating it.
+* Avoid redundant and duplicate state so that you don't need to keep it in sync.
+* Don't put props *into* state unless you specifically want to prevent updates.
+* For UI patterns like selection, keep ID or index in state instead of the object itself.
+* If updating deeply nested state is complicated, try flattening it.
+
+</Recap>
+
+<Challenges>
+
+#### Fix a component that's not updating {/*fix-a-component-thats-not-updating*/}
+
+This `Clock` component receives two props: `color` and `time`. When you select a different color in the select box, the `Clock` component receives a different `color` prop from its parent component. However, for some reason, the displayed color doesn't update. Why? Fix the problem.
+
+<Sandpack>
+
+```js Clock.js active
+import { useState } from 'react';
+
+export default function Clock(props) {
+  const [color, setColor] = useState(props.color);
+  return (
+    <h1 style={{ color: color }}>
+      {props.time}
+    </h1>
+  );
+}
+```
+
+```js App.js hidden
+import { useState, useEffect } from 'react';
+import Clock from './Clock.js';
+
+function useTime() {
+  const [time, setTime] = useState(() => new Date());
+  useEffect(() => {
+    const id = setInterval(() => {
+      setTime(new Date());
+    }, 1000);
+    return () => clearInterval(id);
+  }, []);
+  return time;
+}
+
+export default function App() {
+  const time = useTime();
+  const [color, setColor] = useState('lightcoral');
+  return (
+    <div>
+      <p>
+        Pick a color:{' '}
+        <select value={color} onChange={e => setColor(e.target.value)}>
+          <option value="lightcoral">lightcoral</option>
+          <option value="midnightblue">midnightblue</option>
+          <option value="rebeccapurple">rebeccapurple</option>
+        </select>
+      </p>
+      <Clock color={color} time={time.toLocaleTimeString()} />
+    </div>
+  );
+}
+```
+
+</Sandpack>
+
+<Solution>
+
+The issue is that this component has `color` state initialized with the initial value of the `color` prop. But when the `color` prop changes, this does not affect the state variable! So they get out of sync. To fix this issue, remove the state variable altogether, and use the `color` prop directly.
+
+<Sandpack>
+
+```js Clock.js active
+import { useState } from 'react';
+
+export default function Clock(props) {
+  return (
+    <h1 style={{ color: props.color }}>
+      {props.time}
+    </h1>
+  );
+}
+```
+
+```js App.js hidden
+import { useState, useEffect } from 'react';
+import Clock from './Clock.js';
+
+function useTime() {
+  const [time, setTime] = useState(() => new Date());
+  useEffect(() => {
+    const id = setInterval(() => {
+      setTime(new Date());
+    }, 1000);
+    return () => clearInterval(id);
+  }, []);
+  return time;
+}
+
+export default function App() {
+  const time = useTime();
+  const [color, setColor] = useState('lightcoral');
+  return (
+    <div>
+      <p>
+        Pick a color:{' '}
+        <select value={color} onChange={e => setColor(e.target.value)}>
+          <option value="lightcoral">lightcoral</option>
+          <option value="midnightblue">midnightblue</option>
+          <option value="rebeccapurple">rebeccapurple</option>
+        </select>
+      </p>
+      <Clock color={color} time={time.toLocaleTimeString()} />
+    </div>
+  );
+}
+```
+
+</Sandpack>
+
+Or, using the destructuring syntax:
+
+<Sandpack>
+
+```js Clock.js active
+import { useState } from 'react';
+
+export default function Clock({ color, time }) {
+  return (
+    <h1 style={{ color: color }}>
+      {time}
+    </h1>
+  );
+}
+```
+
+```js App.js hidden
+import { useState, useEffect } from 'react';
+import Clock from './Clock.js';
+
+function useTime() {
+  const [time, setTime] = useState(() => new Date());
+  useEffect(() => {
+    const id = setInterval(() => {
+      setTime(new Date());
+    }, 1000);
+    return () => clearInterval(id);
+  }, []);
+  return time;
+}
+
+export default function App() {
+  const time = useTime();
+  const [color, setColor] = useState('lightcoral');
+  return (
+    <div>
+      <p>
+        Pick a color:{' '}
+        <select value={color} onChange={e => setColor(e.target.value)}>
+          <option value="lightcoral">lightcoral</option>
+          <option value="midnightblue">midnightblue</option>
+          <option value="rebeccapurple">rebeccapurple</option>
+        </select>
+      </p>
+      <Clock color={color} time={time.toLocaleTimeString()} />
+    </div>
+  );
+}
+```
+
+</Sandpack>
+
+</Solution>
+
+#### Fix a broken packing list {/*fix-a-broken-packing-list*/}
+
+This packing list has a footer that shows how many items are packed, and how many items there are overall. It seems to work at first, but it is buggy. For example, if you mark an item as packed and then delete it, the counter will not be updated correctly. Fix the counter so that it's always correct.
+
+<Hint>
+
+Is any state in this example redundant?
+
+</Hint>
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+import AddItem from './AddItem.js';
+import PackingList from './PackingList.js';
+
+let nextId = 3;
+const initialItems = [
+  { id: 0, title: 'Warm socks', packed: true },
+  { id: 1, title: 'Travel journal', packed: false },
+  { id: 2, title: 'Watercolors', packed: false },
+];
+
+export default function TravelPlan() {
+  const [items, setItems] = useState(initialItems);
+  const [total, setTotal] = useState(3);
+  const [packed, setPacked] = useState(1);
+
+  function handleAddItem(title) {
+    setTotal(total + 1);
+    setItems([
+      ...items,
+      {
+        id: nextId++,
+        title: title,
+        packed: false
+      }
+    ]);
+  }
+
+  function handleChangeItem(nextItem) {
+    if (nextItem.packed) {
+      setPacked(packed + 1);
+    } else {
+      setPacked(packed - 1);
+    }
+    setItems(items.map(item => {
+      if (item.id === nextItem.id) {
+        return nextItem;
+      } else {
+        return item;
+      }
+    }));
+  }
+
+  function handleDeleteItem(itemId) {
+    setTotal(total - 1);
+    setItems(
+      items.filter(item => item.id !== itemId)
+    );
+  }
+
+  return (
+    <>  
+      <AddItem
+        onAddItem={handleAddItem}
+      />
+      <PackingList
+        items={items}
+        onChangeItem={handleChangeItem}
+        onDeleteItem={handleDeleteItem}
+      />
+      <hr />
+      <b>{packed} out of {total} packed!</b>
+    </>
+  );
+}
+```
+
+```js AddItem.js hidden
+import { useState } from 'react';
+
+export default function AddItem({ onAddItem }) {
+  const [title, setTitle] = useState('');
+  return (
+    <>
+      <input
+        placeholder="Add item"
+        value={title}
+        onChange={e => setTitle(e.target.value)}
+      />
+      <button onClick={() => {
+        setTitle('');
+        onAddItem(title);
+      }}>Add</button>
+    </>
+  )
+}
+```
+
+```js PackingList.js hidden
+import { useState } from 'react';
+
+export default function PackingList({
+  items,
+  onChangeItem,
+  onDeleteItem
+}) {
+  return (
+    <ul>
+      {items.map(item => (
+        <li key={item.id}>
+          <label>
+            <input
+              type="checkbox"
+              checked={item.packed}
+              onChange={e => {
+                onChangeItem({
+                  ...item,
+                  packed: e.target.checked
+                });
+              }}
+            />
+            {' '}
+            {item.title}
+          </label>
+          <button onClick={() => onDeleteItem(item.id)}>
+            Delete
+          </button>
+        </li>
+      ))}
+    </ul>
+  );
+}
+```
+
+```css
+button { margin: 5px; }
+li { list-style-type: none; }
+ul, li { margin: 0; padding: 0; }
+```
+
+</Sandpack>
+
+<Solution>
+
+Although you could carefully change each event handler to update the `total` and `packed` counters correctly, the root problem is that these state variables exist at all. They are redundant because you can always calculate the number of items (packed or total) from the `items` array itself. Remove the redundant state to fix the bug:
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+import AddItem from './AddItem.js';
+import PackingList from './PackingList.js';
+
+let nextId = 3;
+const initialItems = [
+  { id: 0, title: 'Warm socks', packed: true },
+  { id: 1, title: 'Travel journal', packed: false },
+  { id: 2, title: 'Watercolors', packed: false },
+];
+
+export default function TravelPlan() {
+  const [items, setItems] = useState(initialItems);
+
+  const total = items.length;
+  const packed = items
+    .filter(item => item.packed)
+    .length;
+
+  function handleAddItem(title) {
+    setItems([
+      ...items,
+      {
+        id: nextId++,
+        title: title,
+        packed: false
+      }
+    ]);
+  }
+
+  function handleChangeItem(nextItem) {
+    setItems(items.map(item => {
+      if (item.id === nextItem.id) {
+        return nextItem;
+      } else {
+        return item;
+      }
+    }));
+  }
+
+  function handleDeleteItem(itemId) {
+    setItems(
+      items.filter(item => item.id !== itemId)
+    );
+  }
+
+  return (
+    <>  
+      <AddItem
+        onAddItem={handleAddItem}
+      />
+      <PackingList
+        items={items}
+        onChangeItem={handleChangeItem}
+        onDeleteItem={handleDeleteItem}
+      />
+      <hr />
+      <b>{packed} out of {total} packed!</b>
+    </>
+  );
+}
+```
+
+```js AddItem.js hidden
+import { useState } from 'react';
+
+export default function AddItem({ onAddItem }) {
+  const [title, setTitle] = useState('');
+  return (
+    <>
+      <input
+        placeholder="Add item"
+        value={title}
+        onChange={e => setTitle(e.target.value)}
+      />
+      <button onClick={() => {
+        setTitle('');
+        onAddItem(title);
+      }}>Add</button>
+    </>
+  )
+}
+```
+
+```js PackingList.js hidden
+import { useState } from 'react';
+
+export default function PackingList({
+  items,
+  onChangeItem,
+  onDeleteItem
+}) {
+  return (
+    <ul>
+      {items.map(item => (
+        <li key={item.id}>
+          <label>
+            <input
+              type="checkbox"
+              checked={item.packed}
+              onChange={e => {
+                onChangeItem({
+                  ...item,
+                  packed: e.target.checked
+                });
+              }}
+            />
+            {' '}
+            {item.title}
+          </label>
+          <button onClick={() => onDeleteItem(item.id)}>
+            Delete
+          </button>
+        </li>
+      ))}
+    </ul>
+  );
+}
+```
+
+```css
+button { margin: 5px; }
+li { list-style-type: none; }
+ul, li { margin: 0; padding: 0; }
+```
+
+</Sandpack>
+
+Notice how the event handlers are only concerned with calling `setItems` after this change. The item counts are now calculated during the next render from `items`, so they are always up-to-date.
+
+</Solution>
+
+#### Fix the disappearing selection {/*fix-the-disappearing-selection*/}
+
+There is a list of `letters` in state. When you hover or focus a particular letter, it gets highlighted. The currently highlighted letter is stored in the `highlightedLetter` state variable. You can "star" and "unstar" individual letters, which updates the `letters` array in state.
+
+This code works, but there is a minor UI glitch. When you press "Star" or "Unstar", the highlighting disappears for a moment. However, it reappears as soon as you move your pointer or switch to another letter with keyboard. Why is this happening? Fix it so that the highlighting doesn't disappear after the button click.
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+import { initialLetters } from './data.js';
+import Letter from './Letter.js';
+
+export default function MailClient() {
+  const [letters, setLetters] = useState(initialLetters);
+  const [highlightedLetter, setHighlightedLetter] = useState(null);
+
+  function handleHover(letter) {
+    setHighlightedLetter(letter);
+  }
+
+  function handleStar(starred) {
+    setLetters(letters.map(letter => {
+      if (letter.id === starred.id) {
+        return {
+          ...letter,
+          isStarred: !letter.isStarred
+        };
+      } else {
+        return letter;
+      }
+    }));
+  }
+
+  return (
+    <>
+      <h2>Inbox</h2>
+      <ul>
+        {letters.map(letter => (
+          <Letter
+            key={letter.id}
+            letter={letter}
+            isHighlighted={
+              letter === highlightedLetter
+            }
+            onHover={handleHover}
+            onToggleStar={handleStar}
+          />
+        ))}
+      </ul>
+    </>
+  );
+}
+```
+
+```js Letter.js
+export default function Letter({
+  letter,
+  isHighlighted,
+  onHover,
+  onToggleStar,
+}) {
+  return (
+    <li
+      className={
+        isHighlighted ? 'highlighted' : ''
+      }
+      onFocus={() => {
+        onHover(letter);        
+      }}
+      onPointerMove={() => {
+        onHover(letter);
+      }}
+    >
+      <button onClick={() => {
+        onToggleStar(letter);
+      }}>
+        {letter.isStarred ? 'Unstar' : 'Star'}
+      </button>
+      {letter.subject}
+    </li>
+  )
+}
+```
+
+```js data.js
+export const initialLetters = [{
+  id: 0,
+  subject: 'Ready for adventure?',
+  isStarred: true,
+}, {
+  id: 1,
+  subject: 'Time to check in!',
+  isStarred: false,
+}, {
+  id: 2,
+  subject: 'Festival Begins in Just SEVEN Days!',
+  isStarred: false,
+}];
+```
+
+```css
+button { margin: 5px; }
+li { border-radius: 5px; }
+.highlighted { background: #d2eaff; }
+```
+
+</Sandpack>
+
+<Solution>
+
+The problem is that you're holding the letter object in `highlightedLetter`. But you're also holding the same information in the `letters` array. So your state has duplication! When you update the `letters` array after the button click, you create a new letter object which is different from `highlightedLetter`. This is why `highlightedLetter === letter` check becomes `false`, and the highlight disappears. It reappears the next time you call `setHighlightedLetter` when the pointer moves.
+
+To fix the issue, remove the duplication from state. Instead of storing *the letter itself* in two places, store the `highlightedId` instead. Then you can check `isHighlighted` for each letter with `letter.id === highlightedId`, which will work even if the `letter` object has changed since the last render.
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+import { initialLetters } from './data.js';
+import Letter from './Letter.js';
+
+export default function MailClient() {
+  const [letters, setLetters] = useState(initialLetters);
+  const [highlightedId, setHighlightedId ] = useState(null);
+
+  function handleHover(letterId) {
+    setHighlightedId(letterId);
+  }
+
+  function handleStar(starredId) {
+    setLetters(letters.map(letter => {
+      if (letter.id === starredId) {
+        return {
+          ...letter,
+          isStarred: !letter.isStarred
+        };
+      } else {
+        return letter;
+      }
+    }));
+  }
+
+  return (
+    <>
+      <h2>Inbox</h2>
+      <ul>
+        {letters.map(letter => (
+          <Letter
+            key={letter.id}
+            letter={letter}
+            isHighlighted={
+              letter.id === highlightedId
+            }
+            onHover={handleHover}
+            onToggleStar={handleStar}
+          />
+        ))}
+      </ul>
+    </>
+  );
+}
+```
+
+```js Letter.js
+export default function Letter({
+  letter,
+  isHighlighted,
+  onHover,
+  onToggleStar,
+}) {
+  return (
+    <li
+      className={
+        isHighlighted ? 'highlighted' : ''
+      }
+      onFocus={() => {
+        onHover(letter.id);        
+      }}
+      onPointerMove={() => {
+        onHover(letter.id);
+      }}
+    >
+      <button onClick={() => {
+        onToggleStar(letter.id);
+      }}>
+        {letter.isStarred ? 'Unstar' : 'Star'}
+      </button>
+      {letter.subject}
+    </li>
+  )
+}
+```
+
+```js data.js
+export const initialLetters = [{
+  id: 0,
+  subject: 'Ready for adventure?',
+  isStarred: true,
+}, {
+  id: 1,
+  subject: 'Time to check in!',
+  isStarred: false,
+}, {
+  id: 2,
+  subject: 'Festival Begins in Just SEVEN Days!',
+  isStarred: false,
+}];
+```
+
+```css
+button { margin: 5px; }
+li { border-radius: 5px; }
+.highlighted { background: #d2eaff; }
+```
+
+</Sandpack>
+
+</Solution>
+
+#### Implement multiple selection {/*implement-multiple-selection*/}
+
+In this example, each `Letter` has an `isSelected` prop and an `onToggle` handler that marks it as selected. This works, but the state is stored as a `selectedId` (either `null` or an ID), so only one letter can get selected at any given time.
+
+Change the state structure to support multiple selection. (How would you structure it? Think about this before writing the code.) Each checkbox should become independent from the others. Clicking a selected letter should uncheck it. Finally, the footer should show the correct number of the selected items.
+
+<Hint>
+
+Instead of a single selected ID, you might want to hold an array or a [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) of selected IDs in state.
+
+</Hint>
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+import { letters } from './data.js';
+import Letter from './Letter.js';
+
+export default function MailClient() {
+  const [selectedId, setSelectedId] = useState(null);
+
+  // TODO: allow multiple selection
+  const selectedCount = 1;
+
+  function handleToggle(toggledId) {
+    // TODO: allow multiple selection
+    setSelectedId(toggledId);
+  }
+
+  return (
+    <>
+      <h2>Inbox</h2>
+      <ul>
+        {letters.map(letter => (
+          <Letter
+            key={letter.id}
+            letter={letter}
+            isSelected={
+              // TODO: allow multiple selection
+              letter.id === selectedId
+            }
+            onToggle={handleToggle}
+          />
+        ))}
+        <hr />
+        <p>
+          <b>
+            You selected {selectedCount} letters
+          </b>
+        </p>
+      </ul>
+    </>
+  );
+}
+```
+
+```js Letter.js
+export default function Letter({
+  letter,
+  onToggle,
+  isSelected,
+}) {
+  return (
+    <li className={
+      isSelected ? 'selected' : ''
+    }>
+      <label>
+        <input
+          type="checkbox"
+          checked={isSelected}
+          onChange={() => {
+            onToggle(letter.id);
+          }}
+        />
+        {letter.subject}
+      </label>
+    </li>
+  )
+}
+```
+
+```js data.js
+export const letters = [{
+  id: 0,
+  subject: 'Ready for adventure?',
+  isStarred: true,
+}, {
+  id: 1,
+  subject: 'Time to check in!',
+  isStarred: false,
+}, {
+  id: 2,
+  subject: 'Festival Begins in Just SEVEN Days!',
+  isStarred: false,
+}];
+```
+
+```css
+input { margin: 5px; }
+li { border-radius: 5px; }
+label { width: 100%; padding: 5px; display: inline-block; }
+.selected { background: #d2eaff; }
+```
+
+</Sandpack>
+
+<Solution>
+
+Instead of a single `selectedId`, keep a `selectedIds` *array* in state. For example, if you select the first and the last letter, it would contain `[0, 2]`. When nothing is selected, it would be an empty `[]` array:
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+import { letters } from './data.js';
+import Letter from './Letter.js';
+
+export default function MailClient() {
+  const [selectedIds, setSelectedIds] = useState([]);
+
+  const selectedCount = selectedIds.length;
+
+  function handleToggle(toggledId) {
+    // Was it previously selected?
+    if (selectedIds.includes(toggledId)) {
+      // Then remove this ID from the array.
+      setSelectedIds(selectedIds.filter(id =>
+        id !== toggledId
+      ));
+    } else {
+      // Otherwise, add this ID to the array.
+      setSelectedIds([
+        ...selectedIds,
+        toggledId
+      ]);
+    }
+  }
+
+  return (
+    <>
+      <h2>Inbox</h2>
+      <ul>
+        {letters.map(letter => (
+          <Letter
+            key={letter.id}
+            letter={letter}
+            isSelected={
+              selectedIds.includes(letter.id)
+            }
+            onToggle={handleToggle}
+          />
+        ))}
+        <hr />
+        <p>
+          <b>
+            You selected {selectedCount} letters
+          </b>
+        </p>
+      </ul>
+    </>
+  );
+}
+```
+
+```js Letter.js
+export default function Letter({
+  letter,
+  onToggle,
+  isSelected,
+}) {
+  return (
+    <li className={
+      isSelected ? 'selected' : ''
+    }>
+      <label>
+        <input
+          type="checkbox"
+          checked={isSelected}
+          onChange={() => {
+            onToggle(letter.id);
+          }}
+        />
+        {letter.subject}
+      </label>
+    </li>
+  )
+}
+```
+
+```js data.js
+export const letters = [{
+  id: 0,
+  subject: 'Ready for adventure?',
+  isStarred: true,
+}, {
+  id: 1,
+  subject: 'Time to check in!',
+  isStarred: false,
+}, {
+  id: 2,
+  subject: 'Festival Begins in Just SEVEN Days!',
+  isStarred: false,
+}];
+```
+
+```css
+input { margin: 5px; }
+li { border-radius: 5px; }
+label { width: 100%; padding: 5px; display: inline-block; }
+.selected { background: #d2eaff; }
+```
+
+</Sandpack>
+
+One minor downside of using an array is that for each item, you're calling `selectedIds.includes(letter.id)` to check whether it's selected. If the array is very large, this can become a performance problem because array search with [`includes()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes) takes linear time, and you're doing this search for each individual item.
+
+To fix this, you can hold a [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) in state instead, which provides a fast [`has()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/has) operation:
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+import { letters } from './data.js';
+import Letter from './Letter.js';
+
+export default function MailClient() {
+  const [selectedIds, setSelectedIds] = useState(
+    new Set()
+  );
+
+  const selectedCount = selectedIds.size;
+
+  function handleToggle(toggledId) {
+    // Create a copy (to avoid mutation).
+    const nextIds = new Set(selectedIds);
+    if (nextIds.has(toggledId)) {
+      nextIds.delete(toggledId);
+    } else {
+      nextIds.add(toggledId);
+    }
+    setSelectedIds(nextIds);
+  }
+
+  return (
+    <>
+      <h2>Inbox</h2>
+      <ul>
+        {letters.map(letter => (
+          <Letter
+            key={letter.id}
+            letter={letter}
+            isSelected={
+              selectedIds.has(letter.id)
+            }
+            onToggle={handleToggle}
+          />
+        ))}
+        <hr />
+        <p>
+          <b>
+            You selected {selectedCount} letters
+          </b>
+        </p>
+      </ul>
+    </>
+  );
+}
+```
+
+```js Letter.js
+export default function Letter({
+  letter,
+  onToggle,
+  isSelected,
+}) {
+  return (
+    <li className={
+      isSelected ? 'selected' : ''
+    }>
+      <label>
+        <input
+          type="checkbox"
+          checked={isSelected}
+          onChange={() => {
+            onToggle(letter.id);
+          }}
+        />
+        {letter.subject}
+      </label>
+    </li>
+  )
+}
+```
+
+```js data.js
+export const letters = [{
+  id: 0,
+  subject: 'Ready for adventure?',
+  isStarred: true,
+}, {
+  id: 1,
+  subject: 'Time to check in!',
+  isStarred: false,
+}, {
+  id: 2,
+  subject: 'Festival Begins in Just SEVEN Days!',
+  isStarred: false,
+}];
+```
+
+```css
+input { margin: 5px; }
+li { border-radius: 5px; }
+label { width: 100%; padding: 5px; display: inline-block; }
+.selected { background: #d2eaff; }
+```
+
+</Sandpack>
+
+Now each item does a `selectedIds.has(letter.id)` check, which is very fast.
+
+Keep in mind that you [should not mutate objects in state](/learn/updating-objects-in-state), and that includes Sets, too. This is why the `handleToggle` function creates a *copy* of the Set first, and then updates that copy.
+
+</Solution>
+
+</Challenges>
diff --git a/beta/src/content/learn/community.md b/beta/src/content/learn/community.md
new file mode 100644
index 000000000..2b25cf901
--- /dev/null
+++ b/beta/src/content/learn/community.md
@@ -0,0 +1,38 @@
+---
+title: Community
+---
+
+<Intro>
+
+React has a community of millions of developers. On this page we've listed some React-related communities that you can be a part of; see the other pages in this section for additional online and in-person learning materials.
+
+</Intro>
+
+## Code of Conduct {/*code-of-conduct*/}
+
+Before participating in React's communities, [please read our Code of Conduct.](https://github.com/facebook/react/blob/main/CODE_OF_CONDUCT.md) We have adopted the [Contributor Covenant](https://www.contributor-covenant.org/) and we expect that all community members adhere to the guidelines within.
+
+## Stack Overflow {/*stack-overflow*/}
+
+Stack Overflow is a popular forum to ask code-level questions or if you're stuck with a specific error. Read through the [existing questions](https://stackoverflow.com/questions/tagged/reactjs) tagged with **reactjs** or [ask your own](https://stackoverflow.com/questions/ask?tags=reactjs)!
+
+{/*
+
+TODO: decide on the criteria for inclusion before uncommenting. (Change Popular Discussion Forums into heading while un-commenting)
+
+Popular Discussion Forums
+
+There are many online forums which are a great place for discussion about best practices and application architecture as well as the future of React. If you have an answerable code-level question, Stack Overflow is usually a better fit.
+
+Each community consists of many thousands of React users.
+
+* [DEV's React community](https://dev.to/t/react)
+* [Hashnode's React community](https://hashnode.com/n/reactjs)
+* [Reactiflux online chat](https://discord.gg/reactiflux)
+* [Reddit's React community](https://www.reddit.com/r/reactjs/)
+
+*/}
+
+## News {/*news*/}
+
+For the latest news about React, [follow **@reactjs** on Twitter](https://twitter.com/reactjs) and the [official React blog](/blog/) on this website.
diff --git a/beta/src/content/learn/conditional-rendering.md b/beta/src/content/learn/conditional-rendering.md
new file mode 100644
index 000000000..a0486d246
--- /dev/null
+++ b/beta/src/content/learn/conditional-rendering.md
@@ -0,0 +1,766 @@
+---
+title: Conditional Rendering
+---
+
+<Intro>
+
+Your components will often need to display different things depending on different conditions. In React, you can conditionally render JSX using JavaScript syntax like `if` statements, `&&`, and `? :` operators.
+
+</Intro>
+
+<YouWillLearn>
+
+* How to return different JSX depending on a condition
+* How to conditionally include or exclude a piece of JSX
+* Common conditional syntax shortcuts you’ll encounter in React codebases
+
+</YouWillLearn>
+
+## Conditionally returning JSX {/*conditionally-returning-jsx*/}
+
+Let’s say you have a `PackingList` component rendering several `Item`s, which can be marked as packed or not:
+
+<Sandpack>
+
+```js
+function Item({ name, isPacked }) {
+  return <li className="item">{name}</li>;
+}
+
+export default function PackingList() {
+  return (
+    <section>
+      <h1>Sally Ride's Packing List</h1>
+      <ul>
+        <Item 
+          isPacked={true} 
+          name="Space suit" 
+        />
+        <Item 
+          isPacked={true} 
+          name="Helmet with a golden leaf" 
+        />
+        <Item 
+          isPacked={false} 
+          name="Photo of Tam" 
+        />
+      </ul>
+    </section>
+  );
+}
+```
+
+</Sandpack>
+
+Notice that some of the `Item` components have their `isPacked` prop set to `true` instead of `false`. You want to add a checkmark (✔) to packed items if `isPacked={true}`.
+
+You can write this as an [`if`/`else` statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) like so:
+
+```js
+if (isPacked) {
+  return <li className="item">{name} ✔</li>;
+}
+return <li className="item">{name}</li>;
+```
+
+If the `isPacked` prop is `true`, this code **returns a different JSX tree.** With this change, some of the items get a checkmark at the end:
+
+<Sandpack>
+
+```js
+function Item({ name, isPacked }) {
+  if (isPacked) {
+    return <li className="item">{name} ✔</li>;
+  }
+  return <li className="item">{name}</li>;
+}
+
+export default function PackingList() {
+  return (
+    <section>
+      <h1>Sally Ride's Packing List</h1>
+      <ul>
+        <Item 
+          isPacked={true} 
+          name="Space suit" 
+        />
+        <Item 
+          isPacked={true} 
+          name="Helmet with a golden leaf" 
+        />
+        <Item 
+          isPacked={false} 
+          name="Photo of Tam" 
+        />
+      </ul>
+    </section>
+  );
+}
+```
+
+</Sandpack>
+
+Try editing what gets returned in either case, and see how the result changes!
+
+Notice how you're creating branching logic with JavaScript's `if` and `return` statements. In React, control flow (like conditions) is handled by JavaScript.
+
+### Conditionally returning nothing with `null` {/*conditionally-returning-nothing-with-null*/}
+
+In some situations, you won't want to render anything at all. For example, say you don't want to show packed items at all. A component must return something. In this case, you can return `null`:
+
+```js
+if (isPacked) {
+  return null;
+}
+return <li className="item">{name}</li>;
+```
+
+If `isPacked` is true, the component will return nothing, `null`. Otherwise, it will return JSX to render.
+
+<Sandpack>
+
+```js
+function Item({ name, isPacked }) {
+  if (isPacked) {
+    return null;
+  }
+  return <li className="item">{name}</li>;
+}
+
+export default function PackingList() {
+  return (
+    <section>
+      <h1>Sally Ride's Packing List</h1>
+      <ul>
+        <Item 
+          isPacked={true} 
+          name="Space suit" 
+        />
+        <Item 
+          isPacked={true} 
+          name="Helmet with a golden leaf" 
+        />
+        <Item 
+          isPacked={false} 
+          name="Photo of Tam" 
+        />
+      </ul>
+    </section>
+  );
+}
+```
+
+</Sandpack>
+
+In practice, returning `null` from a component isn't common because it might surprise a developer trying to render it. More often, you would conditionally include or exclude the component in the parent component's JSX. Here's how to do that!
+
+## Conditionally including JSX {/*conditionally-including-jsx*/}
+
+In the previous example, you controlled which (if any!) JSX tree would be returned by the component. You may already have noticed some duplication in the render output:
+
+```js
+<li className="item">{name} ✔</li>
+```
+
+is very similar to
+
+```js
+<li className="item">{name}</li>
+```
+
+Both of the conditional branches return `<li className="item">...</li>`:
+
+```js
+if (isPacked) {
+  return <li className="item">{name} ✔</li>;
+}
+return <li className="item">{name}</li>;
+```
+
+While this duplication isn't harmful, it could make your code harder to maintain. What if you want to change the `className`? You'd have to do it in two places in your code! In such a situation, you could conditionally include a little JSX to make your code more [DRY.](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself)
+
+### Conditional (ternary) operator (`? :`) {/*conditional-ternary-operator--*/}
+
+JavaScript has a compact syntax for writing a conditional expression -- the [conditional operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) or "ternary operator".
+
+Instead of this:
+
+```js
+if (isPacked) {
+  return <li className="item">{name} ✔</li>;
+}
+return <li className="item">{name}</li>;
+```
+
+You can write this:
+
+```js
+return (
+  <li className="item">
+    {isPacked ? name + ' ✔' : name}
+  </li>
+);
+```
+
+You can read it as *"if `isPacked` is true, then (`?`) render `name + ' ✔'`, otherwise (`:`) render `name`"*.
+
+<DeepDive>
+
+#### Are these two examples fully equivalent? {/*are-these-two-examples-fully-equivalent*/}
+
+If you're coming from an object-oriented programming background, you might assume that the two examples above are subtly different because one of them may create two different "instances" of `<li>`. But JSX elements aren't "instances" because they don't hold any internal state and aren't real DOM nodes. They're lightweight descriptions, like blueprints. So these two examples, in fact, *are* completely equivalent. [Preserving and Resetting State](/learn/preserving-and-resetting-state) goes into detail about how this works.
+
+</DeepDive>
+
+Now let's say you want to wrap the completed item's text into another HTML tag, like `<del>` to strike it out. You can add even more newlines and parentheses so that it's easier to nest more JSX each of the cases:
+
+<Sandpack>
+
+```js
+function Item({ name, isPacked }) {
+  return (
+    <li className="item">
+      {isPacked ? (
+        <del>
+          {name + ' ✔'}
+        </del>
+      ) : (
+        name
+      )}
+    </li>
+  );
+}
+
+export default function PackingList() {
+  return (
+    <section>
+      <h1>Sally Ride's Packing List</h1>
+      <ul>
+        <Item 
+          isPacked={true} 
+          name="Space suit" 
+        />
+        <Item 
+          isPacked={true} 
+          name="Helmet with a golden leaf" 
+        />
+        <Item 
+          isPacked={false} 
+          name="Photo of Tam" 
+        />
+      </ul>
+    </section>
+  );
+}
+```
+
+</Sandpack>
+
+This style works well for simple conditions, but use it in moderation. If your components get messy with too much nested conditional markup, consider extracting child components to clean things up. In React, markup is a part of your code, so you can use tools like variables and functions to tidy up complex expressions.
+
+### Logical AND operator (`&&`) {/*logical-and-operator-*/}
+
+Another common shortcut you'll encounter is the [JavaScript logical AND (`&&`) operator.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#:~:text=The%20logical%20AND%20(%20%26%26%20)%20operator,it%20returns%20a%20Boolean%20value.) Inside React components, it often comes up when you want to render some JSX when the condition is true, **or render nothing otherwise.** With `&&`, you could conditionally render the checkmark only if `isPacked` is `true`:
+
+```js
+return (
+  <li className="item">
+    {name} {isPacked && '✔'}
+  </li>
+);
+```
+
+You can read this as *"if `isPacked`, then (`&&`) render the checkmark, otherwise, render nothing"*.
+
+Here it is in action:
+
+<Sandpack>
+
+```js
+function Item({ name, isPacked }) {
+  return (
+    <li className="item">
+      {name} {isPacked && '✔'}
+    </li>
+  );
+}
+
+export default function PackingList() {
+  return (
+    <section>
+      <h1>Sally Ride's Packing List</h1>
+      <ul>
+        <Item 
+          isPacked={true} 
+          name="Space suit" 
+        />
+        <Item 
+          isPacked={true} 
+          name="Helmet with a golden leaf" 
+        />
+        <Item 
+          isPacked={false} 
+          name="Photo of Tam" 
+        />
+      </ul>
+    </section>
+  );
+}
+```
+
+</Sandpack>
+
+A [JavaScript && expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND) returns the value of its right side (in our case, the checkmark) if the left side (our condition) is `true`. But if the condition is `false`, the whole expression becomes `false`. React considers `false` as a "hole" in the JSX tree, just like `null` or `undefined`, and doesn't render anything in its place.
+
+
+<Pitfall>
+
+**Don't put numbers on the left side of `&&`.**
+
+To test the condition, JavaScript converts the left side to a boolean automatically. However, if the left side is `0`, then the whole expression gets that value (`0`), and React will happily render `0` rather than nothing.
+
+For example, a common mistake is to write code like `messageCount && <p>New messages</p>`. It's easy to assume that it renders nothing when `messageCount` is `0`, but it really renders the `0` itself!
+
+To fix it, make the left side a boolean: `messageCount > 0 && <p>New messages</p>`.
+
+</Pitfall>
+
+### Conditionally assigning JSX to a variable {/*conditionally-assigning-jsx-to-a-variable*/}
+
+When the shortcuts get in the way of writing plain code, try using an `if` statement and a variable. You can reassign variables defined with [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let), so start by providing the default content you want to display, the name:
+
+```js
+let itemContent = name;
+```
+
+Use an `if` statement to reassign a JSX expression to `itemContent` if `isPacked` is `true`:
+
+```js
+if (isPacked) {
+  itemContent = name + " ✔";
+}
+```
+
+[Curly braces open the "window into JavaScript".](/learn/javascript-in-jsx-with-curly-braces#using-curly-braces-a-window-into-the-javascript-world) Embed the variable with curly braces in the returned JSX tree, nesting the previously calculated expression inside of JSX:
+
+```js
+<li className="item">
+  {itemContent}
+</li>
+```
+
+This style is the most verbose, but it's also the most flexible. Here it is in action:
+
+<Sandpack>
+
+```js
+function Item({ name, isPacked }) {
+  let itemContent = name;
+  if (isPacked) {
+    itemContent = name + " ✔";
+  }
+  return (
+    <li className="item">
+      {itemContent}
+    </li>
+  );
+}
+
+export default function PackingList() {
+  return (
+    <section>
+      <h1>Sally Ride's Packing List</h1>
+      <ul>
+        <Item 
+          isPacked={true} 
+          name="Space suit" 
+        />
+        <Item 
+          isPacked={true} 
+          name="Helmet with a golden leaf" 
+        />
+        <Item 
+          isPacked={false} 
+          name="Photo of Tam" 
+        />
+      </ul>
+    </section>
+  );
+}
+```
+
+</Sandpack>
+
+Like before, this works not only for text, but for arbitrary JSX too:
+
+<Sandpack>
+
+```js
+function Item({ name, isPacked }) {
+  let itemContent = name;
+  if (isPacked) {
+    itemContent = (
+      <del>
+        {name + " ✔"}
+      </del>
+    );
+  }
+  return (
+    <li className="item">
+      {itemContent}
+    </li>
+  );
+}
+
+export default function PackingList() {
+  return (
+    <section>
+      <h1>Sally Ride's Packing List</h1>
+      <ul>
+        <Item 
+          isPacked={true} 
+          name="Space suit" 
+        />
+        <Item 
+          isPacked={true} 
+          name="Helmet with a golden leaf" 
+        />
+        <Item 
+          isPacked={false} 
+          name="Photo of Tam" 
+        />
+      </ul>
+    </section>
+  );
+}
+```
+
+</Sandpack>
+
+If you're not familiar with JavaScript, this variety of styles might seem overwhelming at first. However, learning them will help you read and write any JavaScript code -- and not just React components! Pick the one you prefer for a start, and then consult this reference again if you forget how the other ones work.
+
+<Recap>
+
+* In React, you control branching logic with JavaScript.
+* You can return a JSX expression conditionally with an `if` statement.
+* You can conditionally save some JSX to a variable and then include it inside other JSX by using the curly braces.
+* In JSX, `{cond ? <A /> : <B />}` means *"if `cond`, render `<A />`, otherwise `<B />`"*.
+* In JSX, `{cond && <A />}` means *"if `cond`, render `<A />`, otherwise nothing"*.
+* The shortcuts are common, but you don't have to use them if you prefer plain `if`.
+
+</Recap>
+
+
+
+<Challenges>
+
+#### Show an icon for incomplete items with `? :` {/*show-an-icon-for-incomplete-items-with--*/}
+
+Use the conditional operator (`cond ? a : b`) to render a ❌ if `isPacked` isn’t `true`.
+
+<Sandpack>
+
+```js
+function Item({ name, isPacked }) {
+  return (
+    <li className="item">
+      {name} {isPacked && '✔'}
+    </li>
+  );
+}
+
+export default function PackingList() {
+  return (
+    <section>
+      <h1>Sally Ride's Packing List</h1>
+      <ul>
+        <Item 
+          isPacked={true} 
+          name="Space suit" 
+        />
+        <Item 
+          isPacked={true} 
+          name="Helmet with a golden leaf" 
+        />
+        <Item 
+          isPacked={false} 
+          name="Photo of Tam" 
+        />
+      </ul>
+    </section>
+  );
+}
+```
+
+</Sandpack>
+
+<Solution>
+
+<Sandpack>
+
+```js
+function Item({ name, isPacked }) {
+  return (
+    <li className="item">
+      {name} {isPacked ? '✔' : '❌'}
+    </li>
+  );
+}
+
+export default function PackingList() {
+  return (
+    <section>
+      <h1>Sally Ride's Packing List</h1>
+      <ul>
+        <Item 
+          isPacked={true} 
+          name="Space suit" 
+        />
+        <Item 
+          isPacked={true} 
+          name="Helmet with a golden leaf" 
+        />
+        <Item 
+          isPacked={false} 
+          name="Photo of Tam" 
+        />
+      </ul>
+    </section>
+  );
+}
+```
+
+</Sandpack>
+
+</Solution>
+
+#### Show the item importance with `&&` {/*show-the-item-importance-with-*/}
+
+In this example, each `Item` receives a numerical `importance` prop. Use the `&&` operator to render "_(Importance: X)_" in italics, but only for items that have non-zero importance. Your item list should end up looking like this:
+
+* Space suit _(Importance: 9)_
+* Helmet with a golden leaf
+* Photo of Tam _(Importance: 6)_
+
+Don't forget to add a space between the two labels!
+
+<Sandpack>
+
+```js
+function Item({ name, importance }) {
+  return (
+    <li className="item">
+      {name}
+    </li>
+  );
+}
+
+export default function PackingList() {
+  return (
+    <section>
+      <h1>Sally Ride's Packing List</h1>
+      <ul>
+        <Item 
+          importance={9} 
+          name="Space suit" 
+        />
+        <Item 
+          importance={0} 
+          name="Helmet with a golden leaf" 
+        />
+        <Item 
+          importance={6} 
+          name="Photo of Tam" 
+        />
+      </ul>
+    </section>
+  );
+}
+```
+
+</Sandpack>
+
+<Solution>
+
+This should do the trick:
+
+<Sandpack>
+
+```js
+function Item({ name, importance }) {
+  return (
+    <li className="item">
+      {name}
+      {importance > 0 && ' '}
+      {importance > 0 &&
+        <i>(Importance: {importance})</i>
+      }
+    </li>
+  );
+}
+
+export default function PackingList() {
+  return (
+    <section>
+      <h1>Sally Ride's Packing List</h1>
+      <ul>
+        <Item 
+          importance={9} 
+          name="Space suit" 
+        />
+        <Item 
+          importance={0} 
+          name="Helmet with a golden leaf" 
+        />
+        <Item 
+          importance={6} 
+          name="Photo of Tam" 
+        />
+      </ul>
+    </section>
+  );
+}
+```
+
+</Sandpack>
+
+Note that you must write `importance > 0 && ...` rather than `importance && ...` so that if the `importance` is `0`, `0` isn't rendered as the result!
+
+In this solution, two separate conditions are used to insert a space between then name and the importance label. Alternatively, you could use a fragment with a leading space: `importance > 0 && <> <i>...</i></>` or add a space immediately inside the `<i>`:  `importance > 0 && <i> ...</i>`.
+
+</Solution>
+
+#### Refactor a series of `? :` to `if` and variables {/*refactor-a-series-of---to-if-and-variables*/}
+
+This `Drink` component uses a series of `? :` conditions to show different information depending on whether the `name` prop is `"tea"` or `"coffee"`. The problem is that the information about each drink is spread across multiple conditions. Refactor this code to use a single `if` statement instead of three `? :` conditions.
+
+<Sandpack>
+
+```js
+function Drink({ name }) {
+  return (
+    <section>
+      <h1>{name}</h1>
+      <dl>
+        <dt>Part of plant</dt>
+        <dd>{name === 'tea' ? 'leaf' : 'bean'}</dd>
+        <dt>Caffeine content</dt>
+        <dd>{name === 'tea' ? '15–70 mg/cup' : '80–185 mg/cup'}</dd>
+        <dt>Age</dt>
+        <dd>{name === 'tea' ? '4,000+ years' : '1,000+ years'}</dd>
+      </dl>
+    </section>
+  );
+}
+
+export default function DrinkList() {
+  return (
+    <div>
+      <Drink name="tea" />
+      <Drink name="coffee" />
+    </div>
+  );
+}
+```
+
+</Sandpack>
+
+Once you've refactored the code to use `if`, do you have further ideas on how to simplify it?
+
+<Solution>
+
+There are multiple ways you could go about this, but here is one starting point:
+
+<Sandpack>
+
+```js
+function Drink({ name }) {
+  let part, caffeine, age;
+  if (name === 'tea') {
+    part = 'leaf';
+    caffeine = '15–70 mg/cup';
+    age = '4,000+ years';
+  } else if (name === 'coffee') {
+    part = 'bean';
+    caffeine = '80–185 mg/cup';
+    age = '1,000+ years';
+  }
+  return (
+    <section>
+      <h1>{name}</h1>
+      <dl>
+        <dt>Part of plant</dt>
+        <dd>{part}</dd>
+        <dt>Caffeine content</dt>
+        <dd>{caffeine}</dd>
+        <dt>Age</dt>
+        <dd>{age}</dd>
+      </dl>
+    </section>
+  );
+}
+
+export default function DrinkList() {
+  return (
+    <div>
+      <Drink name="tea" />
+      <Drink name="coffee" />
+    </div>
+  );
+}
+```
+
+</Sandpack>
+
+Here the information about each drink is grouped together instead of being spread across multiple conditions. This makes it easier to add more drinks in the future.
+
+Another solution would be to remove the condition altogether by moving the information into objects:
+
+<Sandpack>
+
+```js
+const drinks = {
+  tea: {
+    part: 'leaf',
+    caffeine: '15–70 mg/cup',
+    age: '4,000+ years'
+  },
+  coffee: {
+    part: 'bean',
+    caffeine: '80–185 mg/cup',
+    age: '1,000+ years'
+  }
+};
+
+function Drink({ name }) {
+  const info = drinks[name];
+  return (
+    <section>
+      <h1>{name}</h1>
+      <dl>
+        <dt>Part of plant</dt>
+        <dd>{info.part}</dd>
+        <dt>Caffeine content</dt>
+        <dd>{info.caffeine}</dd>
+        <dt>Age</dt>
+        <dd>{info.age}</dd>
+      </dl>
+    </section>
+  );
+}
+
+export default function DrinkList() {
+  return (
+    <div>
+      <Drink name="tea" />
+      <Drink name="coffee" />
+    </div>
+  );
+}
+```
+
+</Sandpack>
+
+</Solution>
+
+</Challenges>
diff --git a/beta/src/content/learn/describing-the-ui.md b/beta/src/content/learn/describing-the-ui.md
new file mode 100644
index 000000000..6df4c0475
--- /dev/null
+++ b/beta/src/content/learn/describing-the-ui.md
@@ -0,0 +1,530 @@
+---
+title: Describing the UI
+---
+
+<Intro>
+
+React is a JavaScript library for rendering user interfaces (UI). UI is built from small units like buttons, text, and images. React lets you combine them into reusable, nestable *components.* From web sites to phone apps, everything on the screen can be broken down into components. In this chapter, you'll learn to create, customize, and conditionally display React components.
+
+</Intro>
+
+<YouWillLearn isChapter={true}>
+
+* [How to write your first React component](/learn/your-first-component)
+* [When and how to create multi-component files](/learn/importing-and-exporting-components)
+* [How to add markup to JavaScript with JSX](/learn/writing-markup-with-jsx)
+* [How to use curly braces with JSX to access JavaScript functionality from your components](/learn/javascript-in-jsx-with-curly-braces)
+* [How to configure components with props](/learn/passing-props-to-a-component)
+* [How to conditionally render components](/learn/conditional-rendering)
+* [How to render multiple components at a time](/learn/rendering-lists)
+* [How to avoid confusing bugs by keeping components pure](/learn/keeping-components-pure)
+
+</YouWillLearn>
+
+## Your first component {/*your-first-component*/}
+
+React applications are built from isolated pieces of UI called *components*. A React component is a JavaScript function that you can sprinkle with markup. Components can be as small as a button, or as large as an entire page. Here is a `Gallery` component rendering three `Profile` components:
+
+<Sandpack>
+
+```js
+function Profile() {
+  return (
+    <img
+      src="https://i.imgur.com/MK3eW3As.jpg"
+      alt="Katherine Johnson"
+    />
+  );
+}
+
+export default function Gallery() {
+  return (
+    <section>
+      <h1>Amazing scientists</h1>
+      <Profile />
+      <Profile />
+      <Profile />
+    </section>
+  );
+}
+```
+
+```css
+img { margin: 0 10px 10px 0; height: 90px; }
+```
+
+</Sandpack>
+
+<LearnMore path="/learn/your-first-component">
+
+Read **[Your First Component](/learn/your-first-component)** to learn how to declare and use React components.
+
+</LearnMore>
+
+## Importing and exporting components {/*importing-and-exporting-components*/}
+
+You can declare many components in one file, but large files can get difficult to navigate. To solve this, you can *export* a component into its own file, and then *import* that component from another file:
+
+
+<Sandpack>
+
+```js App.js hidden
+import Gallery from './Gallery.js';
+
+export default function App() {
+  return (
+    <Gallery />
+  );
+}
+```
+
+```js Gallery.js active
+import Profile from './Profile.js';
+
+export default function Gallery() {
+  return (
+    <section>
+      <h1>Amazing scientists</h1>
+      <Profile />
+      <Profile />
+      <Profile />
+    </section>
+  );
+}
+```
+
+```js Profile.js
+export default function Profile() {
+  return (
+    <img
+      src="https://i.imgur.com/QIrZWGIs.jpg"
+      alt="Alan L. Hart"
+    />
+  );
+}
+```
+
+```css
+img { margin: 0 10px 10px 0; }
+```
+
+</Sandpack>
+
+<LearnMore path="/learn/importing-and-exporting-components">
+
+Read **[Importing and Exporting Components](/learn/importing-and-exporting-components)** to learn how to split components into their own files.
+
+</LearnMore>
+
+## Writing markup with JSX {/*writing-markup-with-jsx*/}
+
+Each React component is a JavaScript function that may contain some markup that React renders into the browser. React components use a syntax extension called JSX to represent that markup. JSX looks a lot like HTML, but it is a bit stricter and can display dynamic information.
+
+If we paste existing HTML markup into a React component, it won't always work:
+
+<Sandpack>
+
+```js
+export default function TodoList() {
+  return (
+    // This doesn't quite work!
+    <h1>Hedy Lamarr's Todos</h1>
+    <img
+      src="https://i.imgur.com/yXOvdOSs.jpg"
+      alt="Hedy Lamarr"
+      class="photo"
+    >
+    <ul>
+      <li>Invent new traffic lights
+      <li>Rehearse a movie scene
+      <li>Improve spectrum technology
+    </ul>
+  );
+}
+```
+
+```css
+img { height: 90px; }
+```
+
+</Sandpack>
+
+If you have existing HTML like this, you can fix it using a [converter](https://transform.tools/html-to-jsx):
+
+<Sandpack>
+
+```js
+export default function TodoList() {
+  return (
+    <>
+      <h1>Hedy Lamarr's Todos</h1>
+      <img
+        src="https://i.imgur.com/yXOvdOSs.jpg"
+        alt="Hedy Lamarr"
+        className="photo"
+      />
+      <ul>
+        <li>Invent new traffic lights</li>
+        <li>Rehearse a movie scene</li>
+        <li>Improve spectrum technology</li>
+      </ul>
+    </>
+  );
+}
+```
+
+```css
+img { height: 90px; }
+```
+
+</Sandpack>
+
+<LearnMore path="/learn/writing-markup-with-jsx">
+
+Read **[Writing Markup with JSX](/learn/writing-markup-with-jsx)** to learn how to write valid JSX.
+
+</LearnMore>
+
+## JavaScript in JSX with curly braces {/*javascript-in-jsx-with-curly-braces*/}
+
+JSX lets you write HTML-like markup inside a JavaScript file, keeping rendering logic and content in the same place. Sometimes you will want to add a little JavaScript logic or reference a dynamic property inside that markup. In this situation, you can use curly braces in your JSX to "open a window" to JavaScript:
+
+<Sandpack>
+
+```js
+const person = {
+  name: 'Gregorio Y. Zara',
+  theme: {
+    backgroundColor: 'black',
+    color: 'pink'
+  }
+};
+
+export default function TodoList() {
+  return (
+    <div style={person.theme}>
+      <h1>{person.name}'s Todos</h1>
+      <img
+        className="avatar"
+        src="https://i.imgur.com/7vQD0fPs.jpg"
+        alt="Gregorio Y. Zara"
+      />
+      <ul>
+        <li>Improve the videophone</li>
+        <li>Prepare aeronautics lectures</li>
+        <li>Work on the alcohol-fuelled engine</li>
+      </ul>
+    </div>
+  );
+}
+```
+
+```css
+body { padding: 0; margin: 0 }
+body > div > div { padding: 20px; }
+.avatar { border-radius: 50%; height: 90px; }
+```
+
+</Sandpack>
+
+<LearnMore path="/learn/javascript-in-jsx-with-curly-braces">
+
+Read **[JavaScript in JSX with Curly Braces](/learn/javascript-in-jsx-with-curly-braces)** to learn how to access JavaScript data from JSX.
+
+</LearnMore>
+
+## Passing props to a component {/*passing-props-to-a-component*/}
+
+React components use *props* to communicate with each other. Every parent component can pass some information to its child components by giving them props. Props might remind you of HTML attributes, but you can pass any JavaScript value through them, including objects, arrays, functions, and even JSX!
+
+<Sandpack>
+
+```js
+import { getImageUrl } from './utils.js'
+
+export default function Profile() {
+  return (
+    <Card>
+      <Avatar
+        size={100}
+        person={{
+          name: 'Katsuko Saruhashi',
+          imageId: 'YfeOqp2'
+        }}
+      />
+    </Card>
+  );
+}
+
+function Avatar({ person, size }) {
+  return (
+    <img
+      className="avatar"
+      src={getImageUrl(person)}
+      alt={person.name}
+      width={size}
+      height={size}
+    />
+  );
+}
+
+function Card({ children }) {
+  return (
+    <div className="card">
+      {children}
+    </div>
+  );
+}
+
+```
+
+```js utils.js
+export function getImageUrl(person, size = 's') {
+  return (
+    'https://i.imgur.com/' +
+    person.imageId +
+    size +
+    '.jpg'
+  );
+}
+```
+
+```css
+.card {
+  width: fit-content;
+  margin: 5px;
+  padding: 5px;
+  font-size: 20px;
+  text-align: center;
+  border: 1px solid #aaa;
+  border-radius: 20px;
+  background: #fff;
+}
+.avatar {
+  margin: 20px;
+  border-radius: 50%;
+}
+```
+
+</Sandpack>
+
+<LearnMore path="/learn/passing-props-to-a-component">
+
+Read **[Passing Props to a Component](/learn/passing-props-to-a-component)** to learn how to pass and read props.
+
+</LearnMore>
+
+## Conditional rendering {/*conditional-rendering*/}
+
+Your components will often need to display different things depending on different conditions. In React, you can conditionally render JSX using JavaScript syntax like `if` statements, `&&`, and `? :` operators.
+
+In this example, the JavaScript `&&` operator is used to conditionally render a checkmark:
+
+<Sandpack>
+
+```js
+function Item({ name, isPacked }) {
+  return (
+    <li className="item">
+      {name} {isPacked && '✔'}
+    </li>
+  );
+}
+
+export default function PackingList() {
+  return (
+    <section>
+      <h1>Sally Ride's Packing List</h1>
+      <ul>
+        <Item
+          isPacked={true}
+          name="Space suit"
+        />
+        <Item
+          isPacked={true}
+          name="Helmet with a golden leaf"
+        />
+        <Item
+          isPacked={false}
+          name="Photo of Tam"
+        />
+      </ul>
+    </section>
+  );
+}
+```
+
+</Sandpack>
+
+<LearnMore path="/learn/conditional-rendering">
+
+Read **[Conditional Rendering](/learn/conditional-rendering)** to learn the different ways to render content conditionally.
+
+</LearnMore>
+
+## Rendering lists {/*rendering-lists*/}
+
+You will often want to display multiple similar components from a collection of data. You can use JavaScript's `filter()` and `map()` with React to filter and transform your array of data into an array of components.
+
+For each array item, you will need to specify a `key`. Usually, you will want to use an ID from the database as a `key`. Keys let React keep track of each item's place in the list even if the list changes.
+
+<Sandpack>
+
+```js App.js
+import { people } from './data.js';
+import { getImageUrl } from './utils.js';
+
+export default function List() {
+  const listItems = people.map(person =>
+    <li key={person.id}>
+      <img
+        src={getImageUrl(person)}
+        alt={person.name}
+      />
+      <p>
+        <b>{person.name}:</b>
+        {' ' + person.profession + ' '}
+        known for {person.accomplishment}
+      </p>
+    </li>
+  );
+  return (
+    <article>
+      <h1>Scientists</h1>
+      <ul>{listItems}</ul>
+    </article>
+  );
+}
+```
+
+```js data.js
+export const people = [{
+  id: 0,
+  name: 'Creola Katherine Johnson',
+  profession: 'mathematician',
+  accomplishment: 'spaceflight calculations',
+  imageId: 'MK3eW3A'
+}, {
+  id: 1,
+  name: 'Mario José Molina-Pasquel Henríquez',
+  profession: 'chemist',
+  accomplishment: 'discovery of Arctic ozone hole',
+  imageId: 'mynHUSa'
+}, {
+  id: 2,
+  name: 'Mohammad Abdus Salam',
+  profession: 'physicist',
+  accomplishment: 'electromagnetism theory',
+  imageId: 'bE7W1ji'
+}, {
+  id: 3,
+  name: 'Percy Lavon Julian',
+  profession: 'chemist',
+  accomplishment: 'pioneering cortisone drugs, steroids and birth control pills',
+  imageId: 'IOjWm71'
+}, {
+  id: 4,
+  name: 'Subrahmanyan Chandrasekhar',
+  profession: 'astrophysicist',
+  accomplishment: 'white dwarf star mass calculations',
+  imageId: 'lrWQx8l'
+}];
+```
+
+```js utils.js
+export function getImageUrl(person) {
+  return (
+    'https://i.imgur.com/' +
+    person.imageId +
+    's.jpg'
+  );
+}
+```
+
+```css
+ul { list-style-type: none; padding: 0px 10px; }
+li {
+  margin-bottom: 10px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  align-items: center;
+}
+img { width: 100px; height: 100px; border-radius: 50%; }
+h1 { font-size: 22px; }
+h2 { font-size: 20px; }
+```
+
+</Sandpack>
+
+<LearnMore path="/learn/rendering-lists">
+
+Read **[Rendering Lists](/learn/rendering-lists)** to learn how to render a list of components, and how to choose a key.
+
+</LearnMore>
+
+## Keeping components pure {/*keeping-components-pure*/}
+
+Some JavaScript functions are *pure.* A pure function:
+
+* **Minds its own business.** It does not change any objects or variables that existed before it was called.
+* **Same inputs, same output.** Given the same inputs, a pure function should always return the same result.
+
+By strictly only writing your components as pure functions, you can avoid an entire class of baffling bugs and unpredictable behavior as your codebase grows. Here is an example of an impure component:
+
+<Sandpack>
+
+```js
+let guest = 0;
+
+function Cup() {
+  // Bad: changing a preexisting variable!
+  guest = guest + 1;
+  return <h2>Tea cup for guest #{guest}</h2>;
+}
+
+export default function TeaSet() {
+  return (
+    <>
+      <Cup />
+      <Cup />
+      <Cup />
+    </>
+  );
+}
+```
+
+</Sandpack>
+
+You can make this component pure by passing a prop instead of modifying a preexisting variable:
+
+<Sandpack>
+
+```js
+function Cup({ guest }) {
+  return <h2>Tea cup for guest #{guest}</h2>;
+}
+
+export default function TeaSet() {
+  return (
+    <>
+      <Cup guest={1} />
+      <Cup guest={2} />
+      <Cup guest={3} />
+    </>
+  );
+}
+```
+
+</Sandpack>
+
+<LearnMore path="/learn/keeping-components-pure">
+
+Read **[Keeping Components Pure](/learn/keeping-components-pure)** to learn how to write components as pure, predictable functions.
+
+</LearnMore>
+
+## What's next? {/*whats-next*/}
+
+Head over to [Your First Component](/learn/your-first-component) to start reading this chapter page by page!
+
+Or, if you're already familiar with these topics, why not read about [Adding Interactivity](/learn/adding-interactivity)?
diff --git a/beta/src/content/learn/docs-contributors.md b/beta/src/content/learn/docs-contributors.md
new file mode 100644
index 000000000..810821e15
--- /dev/null
+++ b/beta/src/content/learn/docs-contributors.md
@@ -0,0 +1,34 @@
+---
+title: Docs Contributors
+---
+
+<Intro>
+
+React documentation is written and maintained by the [React team](/learn/meet-the-team) and [external contributors.](https://github.com/reactjs/reactjs.org/graphs/contributors) On this page, we'd like to thank a few people who've made significant contributions to this site.
+
+</Intro>
+
+## Content {/*content*/}
+
+* [Rachel Nabors](https://twitter.com/RachelNabors): editing, writing, illustrating
+* [Dan Abramov](https://twitter.com/dan_abramov): writing, curriculum design
+* [Sylwia Vargas](https://twitter.com/SylwiaVargas): example code
+* [Rick Hanlon](https://twitter.com/rickhanlonii): writing
+* [David McCabe](https://twitter.com/mcc_abe): writing 
+
+## Design {/*design*/}
+
+* [Dan Lebowitz](https://twitter.com/lebo): site design
+* [Razvan Gradinar](https://dribbble.com/GradinarRazvan): sandbox design
+* [Maggie Appleton](https://maggieappleton.com/): diagram system
+* [Sophie Alpert](https://twitter.com/sophiebits): color-coded explanations
+
+## Development {/*development*/}
+
+* [Jared Palmer](https://twitter.com/jaredpalmer): site development
+* [ThisDotLabs](https://www.thisdot.co/) ([Dane Grant](https://twitter.com/danecando), [Dustin Goodman](https://twitter.com/dustinsgoodman)): site development
+* [CodeSandbox](https://codesandbox.io/) ([Ives van Hoorne](https://twitter.com/CompuIves), [Alex Moldovan](https://twitter.com/alexnmoldovan), [Jasper De Moor](https://twitter.com/JasperDeMoor), [Danilo Woznica](https://twitter.com/danilowoz)): sandbox integration
+* [Rick Hanlon](https://twitter.com/rickhanlonii): site development
+* [Harish Kumar](https://www.strek.in/): development and maintenance
+
+We'd also like to thank countless alpha testers and community members who gave us feedback along the way.
diff --git a/beta/src/content/learn/editor-setup.md b/beta/src/content/learn/editor-setup.md
new file mode 100644
index 000000000..0b7f55418
--- /dev/null
+++ b/beta/src/content/learn/editor-setup.md
@@ -0,0 +1,62 @@
+---
+title: Editor Setup
+---
+
+<Intro>
+
+A properly configured editor can make code clearer to read and faster to write. It can even help you catch bugs as you write them! If this is your first time setting up an editor or you're looking to tune up your current editor, we have a few recommendations.
+
+</Intro>
+
+<YouWillLearn>
+
+* What the most popular editors are
+* How to format your code automatically
+
+</YouWillLearn>
+
+## Your editor {/*your-editor*/}
+
+[VS Code](https://code.visualstudio.com/) is one of the most popular editors in use today. It has a large marketplace of extensions and integrates well with popular services like GitHub. Most of the features listed below can be added to VS Code as extensions as well, making it highly configurable!
+
+Other popular text editors used in the React community include:
+
+* [WebStorm](https://www.jetbrains.com/webstorm/) is an integrated development environment designed specifically for JavaScript.
+* [Sublime Text](https://www.sublimetext.com/) has support for JSX and TypeScript, [syntax highlighting](https://stackoverflow.com/a/70960574/458193) and autocomplete built in.
+* [Vim](https://www.vim.org/) is a highly configurable text editor built to make creating and changing any kind of text very efficient. It is included as "vi" with most UNIX systems and with Apple OS X.
+
+## Recommended text editor features {/*recommended-text-editor-features*/}
+
+Some editors come with these features built in, but others might require adding an extension. Check to see what support your editor of choice provides to be sure!
+
+### Linting {/*linting*/}
+
+Code linters find problems in your code as you write, helping you fix them early. [ESLint](https://eslint.org/) is a popular, open source linter for JavaScript. 
+
+* [Install ESLint with the recommended configuration for React](https://www.npmjs.com/package/eslint-config-react-app) (be sure you have [Node installed!](https://nodejs.org/en/download/current/))
+* [Integrate ESLint in VSCode with the official extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
+
+**Make sure that you've enabled all the [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks) rules for your project.** They are essential and catch the most severe bugs early. The recommended [`eslint-config-react-app`](https://www.npmjs.com/package/eslint-config-react-app) preset already includes them.
+
+### Formatting {/*formatting*/}
+
+The last thing you want to do when sharing your code with another contributor is get into an discussion about [tabs vs spaces](https://www.google.com/search?q=tabs+vs+spaces)! Fortunately, [Prettier](https://prettier.io/) will clean up your code by reformatting it to conform to preset, configurable rules. Run Prettier, and all your tabs will be converted to spaces—and your indentation, quotes, etc will also all be changed to conform to the configuration. In the ideal setup, Prettier will run when you save your file, quickly making these edits for you.
+
+You can install the [Prettier extension in VSCode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) by following these steps:
+
+1. Launch VS Code
+2. Use Quick Open (press Ctrl/Cmd+P)
+3. Paste in `ext install esbenp.prettier-vscode`
+4. Press Enter
+
+#### Formatting on save {/*formatting-on-save*/}
+
+Ideally, you should format your code on every save. VS Code has settings for this!
+
+1. In VS Code, press `CTRL/CMD + SHIFT + P`.
+2. Type "settings"
+3. Hit Enter
+4. In the search bar, type "format on save"
+5. Be sure the "format on save" option is ticked!
+
+> If your ESLint preset has formatting rules, they may conflict with Prettier. We recommend to disable all formatting rules in your ESLint preset using [`eslint-config-prettier`](https://github.com/prettier/eslint-config-prettier) so that ESLint is *only* used for catching logical mistakes. If you want to enforce that files are formatted before a pull request is merged, use [`prettier --check`](https://prettier.io/docs/en/cli.html#--check) for your continuous integration.
diff --git a/beta/src/content/learn/escape-hatches.md b/beta/src/content/learn/escape-hatches.md
new file mode 100644
index 000000000..1ce1ac22e
--- /dev/null
+++ b/beta/src/content/learn/escape-hatches.md
@@ -0,0 +1,848 @@
+---
+title: Escape Hatches
+---
+
+<Intro>
+
+Some of your components may need to control and synchronize with systems outside of React. For example, you might need to focus an input using the browser API, play and pause a video player implemented without React, or connect and listen to messages from a remote server. In this chapter, you'll learn the escape hatches that let you "step outside" React and connect to external systems. Most of your application logic and data flow should not rely on these features.
+
+</Intro>
+
+<YouWillLearn isChapter={true}>
+
+* [How to "remember" information without re-rendering](/learn/referencing-values-with-refs)
+* [How to access DOM elements managed by React](/learn/manipulating-the-dom-with-refs)
+* [How to synchronize components with external systems](/learn/synchronizing-with-effects)
+* [How to remove unnecessary Effects from your components](/learn/you-might-not-need-an-effect)
+* [How an Effect's lifecycle is different from a component's](/learn/lifecycle-of-reactive-effects)
+* [How to prevent some values from re-triggering Effects](/learn/separating-events-from-effects)
+* [How to make your Effect re-run less often](/learn/removing-effect-dependencies)
+* [How to share logic between components](/learn/reusing-logic-with-custom-hooks)
+
+</YouWillLearn>
+
+## Referencing values with refs {/*referencing-values-with-refs*/}
+
+When you want a component to "remember" some information, but you don't want that information to [trigger new renders](/learn/render-and-commit), you can use a *ref*:
+
+```js
+const ref = useRef(0);
+```
+
+Like state, refs are retained by React between re-renders. However, setting state re-renders a component. Changing a ref does not! You can access the current value of that ref through the `ref.current` property.
+
+<Sandpack>
+
+```js
+import { useRef } from 'react';
+
+export default function Counter() {
+  let ref = useRef(0);
+
+  function handleClick() {
+    ref.current = ref.current + 1;
+    alert('You clicked ' + ref.current + ' times!');
+  }
+
+  return (
+    <button onClick={handleClick}>
+      Click me!
+    </button>
+  );
+}
+```
+
+</Sandpack>
+
+A ref is like a secret pocket of your component that React doesn't track. For example, you can use refs to store [timeout IDs](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#return_value), [DOM elements](https://developer.mozilla.org/en-US/docs/Web/API/Element), and other objects that don't impact the component's rendering output.
+
+<LearnMore path="/learn/referencing-values-with-refs">
+
+Read **[Referencing Values with Refs](/learn/referencing-values-with-refs)** to learn how to use refs to remember information.
+
+</LearnMore>
+
+## Manipulating the DOM with refs {/*manipulating-the-dom-with-refs*/}
+
+React automatically updates the DOM to match your render output, so your components won't often need to manipulate it. However, sometimes you might need access to the DOM elements managed by React—for example, to focus a node, scroll to it, or measure its size and position. There is no built-in way to do those things in React, so you will need a ref to the DOM node. For example, clicking the button will focus the input using a ref:
+
+<Sandpack>
+
+```js
+import { useRef } from 'react';
+
+export default function Form() {
+  const inputRef = useRef(null);
+
+  function handleClick() {
+    inputRef.current.focus();
+  }
+
+  return (
+    <>
+      <input ref={inputRef} />
+      <button onClick={handleClick}>
+        Focus the input
+      </button>
+    </>
+  );
+}
+```
+
+</Sandpack>
+
+<LearnMore path="/learn/manipulating-the-dom-with-refs">
+
+Read **[Manipulating the DOM with Refs](/learn/manipulating-the-dom-with-refs)** to learn how to access DOM elements managed by React.
+
+</LearnMore>
+
+## Synchronizing with Effects {/*synchronizing-with-effects*/}
+
+Some components need to synchronize with external systems. For example, you might want to control a non-React component based on the React state, set up a server connection, or send an analytics log when a component appears on the screen. Unlike event handlers, which let you handle particular events, *Effects* let you run some code after rendering. Use them to synchronize your component with some system outside of React.
+
+Press Play/Pause multiple times and see how the video player stays synchronized to the `isPlaying` prop value:
+
+<Sandpack>
+
+```js
+import { useState, useRef, useEffect } from 'react';
+
+function VideoPlayer({ src, isPlaying }) {
+  const ref = useRef(null);
+
+  useEffect(() => {
+    if (isPlaying) {
+      ref.current.play();
+    } else {
+      ref.current.pause();
+    }
+  }, [isPlaying]);
+
+  return <video ref={ref} src={src} loop playsInline />;
+}
+
+export default function App() {
+  const [isPlaying, setIsPlaying] = useState(false);
+  return (
+    <>
+      <button onClick={() => setIsPlaying(!isPlaying)}>
+        {isPlaying ? 'Pause' : 'Play'}
+      </button>
+      <VideoPlayer
+        isPlaying={isPlaying}
+        src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
+      />
+    </>
+  );
+}
+```
+
+```css
+button { display: block; margin-bottom: 20px; }
+video { width: 250px; }
+```
+
+</Sandpack>
+
+Many Effects also need to "clean up" after themselves. For example, if your Effect sets up a connection to a chat server, it should return a *cleanup function* that tells React how to disconnect your component from that server:
+
+<Sandpack>
+
+```js
+import { useState, useEffect } from 'react';
+import { createConnection } from './chat.js';
+
+export default function ChatRoom() {
+  useEffect(() => {
+    const connection = createConnection();
+    connection.connect();
+    return () => connection.disconnect();
+  }, []);
+  return <h1>Welcome to the chat!</h1>;
+}
+```
+
+```js chat.js
+export function createConnection() {
+  // A real implementation would actually connect to the server
+  return {
+    connect() {
+      console.log('✅ Connecting...');
+    },
+    disconnect() {
+      console.log('❌ Disconnected.');
+    }
+  };
+}
+```
+
+```css
+input { display: block; margin-bottom: 20px; }
+```
+
+</Sandpack>
+
+In development, React will immediately run and clean up your Effect one extra time. This is why you see `"✅ Connecting..."` printed twice. This ensures that you don't forget to implement the cleanup function.
+
+<LearnMore path="/learn/synchronizing-with-effects">
+
+Read **[Synchronizing with Effects](/learn/synchronizing-with-effects)** to learn how to synchronize components with external systems.
+
+</LearnMore>
+
+## You Might Not Need An Effect {/*you-might-not-need-an-effect*/}
+
+Effects are an escape hatch from the React paradigm. They let you "step outside" of React and synchronize your components with some external system. If there is no external system involved (for example, if you want to update a component's state when some props or state change), you shouldn't need an Effect. Removing unnecessary Effects will make your code easier to follow, faster to run, and less error-prone.
+
+There are two common cases in which you don't need Effects:
+- **You don't need Effects to transform data for rendering.**
+- **You don't need Effects to handle user events.**
+
+For example, you don't need an Effect to adjust some state based on other state:
+
+```js {5-9}
+function Form() {
+  const [firstName, setFirstName] = useState('Taylor');
+  const [lastName, setLastName] = useState('Swift');
+
+  // 🔴 Avoid: redundant state and unnecessary Effect
+  const [fullName, setFullName] = useState('');
+  useEffect(() => {
+    setFullName(firstName + ' ' + lastName);
+  }, [firstName, lastName]);
+  // ...
+}
+```
+
+Instead, calculate as much as you can while rendering:
+
+```js {4-5}
+function Form() {
+  const [firstName, setFirstName] = useState('Taylor');
+  const [lastName, setLastName] = useState('Swift');
+  // ✅ Good: calculated during rendering
+  const fullName = firstName + ' ' + lastName;
+  // ...
+}
+```
+
+However, you *do* need Effects to synchronize with external systems. 
+
+<LearnMore path="/learn/you-might-not-need-an-effect">
+
+Read **[You Might Not Need an Effect](/learn/you-might-not-need-an-effect)** to learn how to remove unnecessary Effects.
+
+</LearnMore>
+
+## Lifecycle of reactive effects {/*lifecycle-of-reactive-effects*/}
+
+Effects have a different lifecycle from components. Components may mount, update, or unmount. An Effect can only do two things: to start synchronizing something, and later to stop synchronizing it. This cycle can happen multiple times if your Effect depends on props and state that change over time.
+
+This Effect depends on the value of the `roomId` prop. Props are *reactive values,* which means they can change on a re-render. Notice that the Effect *re-synchronizes* (and re-connects to the server) after you update the `roomId`:
+
+<Sandpack>
+
+```js
+import { useState, useEffect } from 'react';
+import { createConnection } from './chat.js';
+
+const serverUrl = 'https://localhost:1234';
+
+function ChatRoom({ roomId }) {
+  useEffect(() => {
+    const connection = createConnection(serverUrl, roomId);
+    connection.connect();
+    return () => connection.disconnect();
+  }, [roomId]);
+
+  return <h1>Welcome to the {roomId} room!</h1>;
+}
+
+export default function App() {
+  const [roomId, setRoomId] = useState('general');
+  return (
+    <>
+      <label>
+        Choose the chat room:{' '}
+        <select
+          value={roomId}
+          onChange={e => setRoomId(e.target.value)}
+        >
+          <option value="general">general</option>
+          <option value="travel">travel</option>
+          <option value="music">music</option>
+        </select>
+      </label>
+      <hr />
+      <ChatRoom roomId={roomId} />
+    </>
+  );
+}
+```
+
+```js chat.js
+export function createConnection(serverUrl, roomId) {
+  // A real implementation would actually connect to the server
+  return {
+    connect() {
+      console.log('✅ Connecting to "' + roomId + '" room at ' + serverUrl + '...');
+    },
+    disconnect() {
+      console.log('❌ Disconnected from "' + roomId + '" room at ' + serverUrl);
+    }
+  };
+}
+```
+
+```css
+input { display: block; margin-bottom: 20px; }
+button { margin-left: 10px; }
+```
+
+</Sandpack>
+
+React provides a linter rule to check that you've specified your Effect's dependencies correctly. If you forget to specify `roomId` in the list of dependencies in the above example, the linter will find that bug automatically.
+
+<LearnMore path="/learn/lifecycle-of-reactive-effects">
+
+Read **[Lifecycle of Reactive Events](/learn/lifecycle-of-reactive-effects)** to learn how an Effect's lifecycle is different from a component's.
+
+</LearnMore>
+
+## Separating events from Effects {/*separating-events-from-effects*/}
+
+<Wip>
+
+This section describes an **experimental API that has not yet been added to React,** so you can't use it yet.
+
+</Wip>
+
+Event handlers only re-run when you perform the same interaction again. Unlike event handlers, Effects re-synchronize if some value they read, like a prop or a state variable, is different from what it was on last render. Sometimes, you want a mix of both behaviors: an Effect that re-runs in response to some values but not others.
+
+All code inside Effects is *reactive.* It will run again if some reactive value it reads has changed due to a re-render. For example, this Effect will re-connect to the chat if either `roomId` or `theme` have changed after interaction:
+
+<Sandpack>
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "latest",
+    "react-dom": "latest",
+    "react-scripts": "latest",
+    "toastify-js": "1.12.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+```js
+import { useState, useEffect } from 'react';
+import { createConnection, sendMessage } from './chat.js';
+import { showNotification } from './notifications.js';
+
+const serverUrl = 'https://localhost:1234';
+
+function ChatRoom({ roomId, theme }) {
+  useEffect(() => {
+    const connection = createConnection(serverUrl, roomId);
+    connection.on('connected', () => {
+      showNotification('Connected!', theme);
+    });
+    connection.connect();
+    return () => connection.disconnect();
+  }, [roomId, theme]);
+
+  return <h1>Welcome to the {roomId} room!</h1>
+}
+
+export default function App() {
+  const [roomId, setRoomId] = useState('general');
+  const [isDark, setIsDark] = useState(false);
+  return (
+    <>
+      <label>
+        Choose the chat room:{' '}
+        <select
+          value={roomId}
+          onChange={e => setRoomId(e.target.value)}
+        >
+          <option value="general">general</option>
+          <option value="travel">travel</option>
+          <option value="music">music</option>
+        </select>
+      </label>
+      <label>
+        <input
+          type="checkbox"
+          checked={isDark}
+          onChange={e => setIsDark(e.target.checked)}
+        />
+        Use dark theme
+      </label>
+      <hr />
+      <ChatRoom
+        roomId={roomId}
+        theme={isDark ? 'dark' : 'light'} 
+      />
+    </>
+  );
+}
+```
+
+```js chat.js
+export function createConnection(serverUrl, roomId) {
+  // A real implementation would actually connect to the server
+  let connectedCallback;
+  let timeout;
+  return {
+    connect() {
+      timeout = setTimeout(() => {
+        if (connectedCallback) {
+          connectedCallback();
+        }
+      }, 100);
+    },
+    on(event, callback) {
+      if (connectedCallback) {
+        throw Error('Cannot add the handler twice.');
+      }
+      if (event !== 'connected') {
+        throw Error('Only "connected" event is supported.');
+      }
+      connectedCallback = callback;
+    },
+    disconnect() {
+      clearTimeout(timeout);
+    }
+  };
+}
+```
+
+```js notifications.js
+import Toastify from 'toastify-js';
+import 'toastify-js/src/toastify.css';
+
+export function showNotification(message, theme) {
+  Toastify({
+    text: message,
+    duration: 2000,
+    gravity: 'top',
+    position: 'right',
+    style: {
+      background: theme === 'dark' ? 'black' : 'white',
+      color: theme === 'dark' ? 'white' : 'black',
+    },
+  }).showToast();
+}
+```
+
+```css
+label { display: block; margin-top: 10px; }
+```
+
+</Sandpack>
+
+This is not ideal. You want to re-connect to the chat only if the `roomId` has changed. Switching the `theme` shouldn't re-connect to the chat! Move the code reading `theme` out of your Effect into an *Event function*:
+
+<Sandpack>
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "experimental",
+    "react-dom": "experimental",
+    "react-scripts": "latest",
+    "toastify-js": "1.12.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+```js
+import { useState, useEffect } from 'react';
+import { experimental_useEvent as useEvent } from 'react';
+import { createConnection, sendMessage } from './chat.js';
+import { showNotification } from './notifications.js';
+
+const serverUrl = 'https://localhost:1234';
+
+function ChatRoom({ roomId, theme }) {
+  const onConnected = useEvent(() => {
+    showNotification('Connected!', theme);
+  });
+
+  useEffect(() => {
+    const connection = createConnection(serverUrl, roomId);
+    connection.on('connected', () => {
+      onConnected();
+    });
+    connection.connect();
+    return () => connection.disconnect();
+  }, [roomId]);
+
+  return <h1>Welcome to the {roomId} room!</h1>
+}
+
+export default function App() {
+  const [roomId, setRoomId] = useState('general');
+  const [isDark, setIsDark] = useState(false);
+  return (
+    <>
+      <label>
+        Choose the chat room:{' '}
+        <select
+          value={roomId}
+          onChange={e => setRoomId(e.target.value)}
+        >
+          <option value="general">general</option>
+          <option value="travel">travel</option>
+          <option value="music">music</option>
+        </select>
+      </label>
+      <label>
+        <input
+          type="checkbox"
+          checked={isDark}
+          onChange={e => setIsDark(e.target.checked)}
+        />
+        Use dark theme
+      </label>
+      <hr />
+      <ChatRoom
+        roomId={roomId}
+        theme={isDark ? 'dark' : 'light'} 
+      />
+    </>
+  );
+}
+```
+
+```js chat.js
+export function createConnection(serverUrl, roomId) {
+  // A real implementation would actually connect to the server
+  let connectedCallback;
+  let timeout;
+  return {
+    connect() {
+      timeout = setTimeout(() => {
+        if (connectedCallback) {
+          connectedCallback();
+        }
+      }, 100);
+    },
+    on(event, callback) {
+      if (connectedCallback) {
+        throw Error('Cannot add the handler twice.');
+      }
+      if (event !== 'connected') {
+        throw Error('Only "connected" event is supported.');
+      }
+      connectedCallback = callback;
+    },
+    disconnect() {
+      clearTimeout(timeout);
+    }
+  };
+}
+```
+
+```js notifications.js hidden
+import Toastify from 'toastify-js';
+import 'toastify-js/src/toastify.css';
+
+export function showNotification(message, theme) {
+  Toastify({
+    text: message,
+    duration: 2000,
+    gravity: 'top',
+    position: 'right',
+    style: {
+      background: theme === 'dark' ? 'black' : 'white',
+      color: theme === 'dark' ? 'white' : 'black',
+    },
+  }).showToast();
+}
+```
+
+```css
+label { display: block; margin-top: 10px; }
+```
+
+</Sandpack>
+
+Code inside Event functions isn't reactive, so changing the `theme` no longer makes your Effect re-connect.
+
+<LearnMore path="/learn/separating-events-from-effects">
+
+Read **[Separating Events from Effects](/learn/separating-events-from-effects)** to learn how to prevent some values from re-triggering Effects.
+
+</LearnMore>
+
+## Removing Effect dependencies {/*removing-effect-dependencies*/}
+
+When you write an Effect, the linter will verify that you've included every reactive value (like props and state) that the Effect reads in the list of your Effect's dependencies. This ensures that your Effect remains synchronized with the latest props and state of your component. Unnecessary dependencies may cause your Effect to run too often, or even create an infinite loop. The way you remove them depends on the case.
+
+For example, this Effect depends on the `options` object which gets re-created every time you edit the input:
+
+<Sandpack>
+
+```js
+import { useState, useEffect } from 'react';
+import { createConnection } from './chat.js';
+
+const serverUrl = 'https://localhost:1234';
+
+function ChatRoom({ roomId }) {
+  const [message, setMessage] = useState('');
+
+  const options = {
+    serverUrl: serverUrl,
+    roomId: roomId
+  };
+
+  useEffect(() => {
+    const connection = createConnection(options);
+    connection.connect();
+    return () => connection.disconnect();
+  }, [options]);
+
+  return (
+    <>
+      <h1>Welcome to the {roomId} room!</h1>
+      <input value={message} onChange={e => setMessage(e.target.value)} />
+    </>
+  );
+}
+
+export default function App() {
+  const [roomId, setRoomId] = useState('general');
+  return (
+    <>
+      <label>
+        Choose the chat room:{' '}
+        <select
+          value={roomId}
+          onChange={e => setRoomId(e.target.value)}
+        >
+          <option value="general">general</option>
+          <option value="travel">travel</option>
+          <option value="music">music</option>
+        </select>
+      </label>
+      <hr />
+      <ChatRoom roomId={roomId} />
+    </>
+  );
+}
+```
+
+```js chat.js
+export function createConnection({ serverUrl, roomId }) {
+  // A real implementation would actually connect to the server
+  return {
+    connect() {
+      console.log('✅ Connecting to "' + roomId + '" room at ' + serverUrl + '...');
+    },
+    disconnect() {
+      console.log('❌ Disconnected from "' + roomId + '" room at ' + serverUrl);
+    }
+  };
+}
+```
+
+```css
+input { display: block; margin-bottom: 20px; }
+button { margin-left: 10px; }
+```
+
+</Sandpack>
+
+You don't want the chat to re-connect every time you start typing a message in that chat. To fix this problem, move creation of the `options` object inside the Effect so that the Effect only depends on the `roomId` string:
+
+<Sandpack>
+
+```js
+import { useState, useEffect } from 'react';
+import { createConnection } from './chat.js';
+
+const serverUrl = 'https://localhost:1234';
+
+function ChatRoom({ roomId }) {
+  const [message, setMessage] = useState('');
+
+  useEffect(() => {
+    const options = {
+      serverUrl: serverUrl,
+      roomId: roomId
+    };
+    const connection = createConnection(options);
+    connection.connect();
+    return () => connection.disconnect();
+  }, [roomId]);
+
+  return (
+    <>
+      <h1>Welcome to the {roomId} room!</h1>
+      <input value={message} onChange={e => setMessage(e.target.value)} />
+    </>
+  );
+}
+
+export default function App() {
+  const [roomId, setRoomId] = useState('general');
+  return (
+    <>
+      <label>
+        Choose the chat room:{' '}
+        <select
+          value={roomId}
+          onChange={e => setRoomId(e.target.value)}
+        >
+          <option value="general">general</option>
+          <option value="travel">travel</option>
+          <option value="music">music</option>
+        </select>
+      </label>
+      <hr />
+      <ChatRoom roomId={roomId} />
+    </>
+  );
+}
+```
+
+```js chat.js
+export function createConnection({ serverUrl, roomId }) {
+  // A real implementation would actually connect to the server
+  return {
+    connect() {
+      console.log('✅ Connecting to "' + roomId + '" room at ' + serverUrl + '...');
+    },
+    disconnect() {
+      console.log('❌ Disconnected from "' + roomId + '" room at ' + serverUrl);
+    }
+  };
+}
+```
+
+```css
+input { display: block; margin-bottom: 20px; }
+button { margin-left: 10px; }
+```
+
+</Sandpack>
+
+Notice that you didn't start by editing the dependency list to remove the `options` dependency. That would be wrong. Instead, you changed the surrounding code so that the dependency became *unnecessary.* You can think of the dependency list as a list of all the reactive values used by your Effect's code. You don't intentionally choose what to put on that list. The list describes your code. To change the dependency list, change the code.
+
+<LearnMore path="/learn/removing-effect-dependencies">
+
+Read **[Removing Effect Dependencies](/learn/removing-effect-dependencies)** to learn how to make your Effect re-run less often.
+
+</LearnMore>
+
+## Reusing logic with custom Hooks {/*reusing-logic-with-custom-hooks*/}
+
+React comes with built-in Hooks like `useState`, `useContext`, and `useEffect`. Sometimes, you’ll wish that there was a Hook for some more specific purpose: for example, to fetch data, to keep track of whether the user is online, or to connect to a chat room. To do this, you can create your own Hooks for your application's needs.
+
+In this example, the `usePointerPosition` custom Hook tracks the cursor position, while `useDelayedValue` custom Hook returns a value that's "lagging behind" the value you passed by a certain number of milliseconds. Move the cursor over the sandbox preview area to see a moving trail of dots following the cursor:
+
+<Sandpack>
+
+```js
+import { usePointerPosition } from './usePointerPosition.js';
+import { useDelayedValue } from './useDelayedValue.js';
+
+export default function Canvas() {
+  const pos1 = usePointerPosition();
+  const pos2 = useDelayedValue(pos1, 100);
+  const pos3 = useDelayedValue(pos2, 200);
+  const pos4 = useDelayedValue(pos3, 100);
+  const pos5 = useDelayedValue(pos3, 50);
+  return (
+    <>
+      <Dot position={pos1} opacity={1} />
+      <Dot position={pos2} opacity={0.8} />
+      <Dot position={pos3} opacity={0.6} />
+      <Dot position={pos4} opacity={0.4} />
+      <Dot position={pos5} opacity={0.2} />
+    </>
+  );
+}
+
+function Dot({ position, opacity }) {
+  return (
+    <div style={{
+      position: 'absolute',
+      backgroundColor: 'pink',
+      borderRadius: '50%',
+      opacity,
+      transform: `translate(${position.x}px, ${position.y}px)`,
+      pointerEvents: 'none',
+      left: -20,
+      top: -20,
+      width: 40,
+      height: 40,
+    }} />
+  );
+}
+```
+
+```js usePointerPosition.js
+import { useState, useEffect } from 'react';
+
+export function usePointerPosition() {
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  useEffect(() => {
+    function handleMove(e) {
+      setPosition({ x: e.clientX, y: e.clientY });
+    }
+    window.addEventListener('pointermove', handleMove);
+    return () => window.removeEventListener('pointermove', handleMove);
+  }, []);
+  return position;
+}
+```
+
+```js useDelayedValue.js
+import { useState, useEffect } from 'react';
+
+export function useDelayedValue(value, delay) {
+  const [delayedValue, setDelayedValue] = useState(value);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setDelayedValue(value);
+    }, delay);
+  }, [value, delay]);
+
+  return delayedValue;
+}
+```
+
+```css
+body { min-height: 300px; }
+```
+
+</Sandpack>
+
+You can create custom Hooks, compose them together, pass data between them, and reuse them between components. As your app grows, you will write fewer Effects by hand because you'll be able to reuse custom Hooks you already wrote. There are also many excellent custom Hooks maintained by the React community.
+
+<LearnMore path="/learn/reusing-logic-with-custom-hooks">
+
+Read **[Reusing Logic with Custom Hooks](/learn/reusing-logic-with-custom-hooks)** to learn how to share logic between components.
+
+</LearnMore>
+
+## What's next? {/*whats-next*/}
+
+Head over to [Referencing Values with Refs](/learn/referencing-values-with-refs) to start reading this chapter page by page!
diff --git a/beta/src/content/learn/extracting-state-logic-into-a-reducer.md b/beta/src/content/learn/extracting-state-logic-into-a-reducer.md
new file mode 100644
index 000000000..a4b0ac94f
--- /dev/null
+++ b/beta/src/content/learn/extracting-state-logic-into-a-reducer.md
@@ -0,0 +1,2629 @@
+---
+title: Extracting State Logic into a Reducer
+---
+
+<Intro>
+
+Components with many state updates spread across many event handlers can get overwhelming. For these cases, you can consolidate all the state update logic outside your component in a single function, called a _reducer._
+
+</Intro>
+
+<YouWillLearn>
+
+- What a reducer function is
+- How to refactor `useState` to `useReducer`
+- When to use a reducer
+- How to write one well
+
+</YouWillLearn>
+
+## Consolidate state logic with a reducer {/*consolidate-state-logic-with-a-reducer*/}
+
+As your components grow in complexity, it can get harder to see at a glance all the different ways in which a component's state gets updated. For example, the `TaskApp` component below holds an array of `tasks` in state and uses three different event handlers to add, remove, and edit tasks:
+
+<Sandpack>
+
+```js App.js
+import {useState} from 'react';
+import AddTask from './AddTask.js';
+import TaskList from './TaskList.js';
+
+export default function TaskApp() {
+  const [tasks, setTasks] = useState(initialTasks);
+
+  function handleAddTask(text) {
+    setTasks([
+      ...tasks,
+      {
+        id: nextId++,
+        text: text,
+        done: false,
+      },
+    ]);
+  }
+
+  function handleChangeTask(task) {
+    setTasks(
+      tasks.map((t) => {
+        if (t.id === task.id) {
+          return task;
+        } else {
+          return t;
+        }
+      })
+    );
+  }
+
+  function handleDeleteTask(taskId) {
+    setTasks(tasks.filter((t) => t.id !== taskId));
+  }
+
+  return (
+    <>
+      <h1>Prague itinerary</h1>
+      <AddTask onAddTask={handleAddTask} />
+      <TaskList
+        tasks={tasks}
+        onChangeTask={handleChangeTask}
+        onDeleteTask={handleDeleteTask}
+      />
+    </>
+  );
+}
+
+let nextId = 3;
+const initialTasks = [
+  {id: 0, text: 'Visit Kafka Museum', done: true},
+  {id: 1, text: 'Watch a puppet show', done: false},
+  {id: 2, text: 'Lennon Wall pic', done: false},
+];
+```
+
+```js AddTask.js hidden
+import {useState} from 'react';
+
+export default function AddTask({onAddTask}) {
+  const [text, setText] = useState('');
+  return (
+    <>
+      <input
+        placeholder="Add task"
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+      />
+      <button
+        onClick={() => {
+          setText('');
+          onAddTask(text);
+        }}>
+        Add
+      </button>
+    </>
+  );
+}
+```
+
+```js TaskList.js hidden
+import {useState} from 'react';
+
+export default function TaskList({tasks, onChangeTask, onDeleteTask}) {
+  return (
+    <ul>
+      {tasks.map((task) => (
+        <li key={task.id}>
+          <Task task={task} onChange={onChangeTask} onDelete={onDeleteTask} />
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function Task({task, onChange, onDelete}) {
+  const [isEditing, setIsEditing] = useState(false);
+  let taskContent;
+  if (isEditing) {
+    taskContent = (
+      <>
+        <input
+          value={task.text}
+          onChange={(e) => {
+            onChange({
+              ...task,
+              text: e.target.value,
+            });
+          }}
+        />
+        <button onClick={() => setIsEditing(false)}>Save</button>
+      </>
+    );
+  } else {
+    taskContent = (
+      <>
+        {task.text}
+        <button onClick={() => setIsEditing(true)}>Edit</button>
+      </>
+    );
+  }
+  return (
+    <label>
+      <input
+        type="checkbox"
+        checked={task.done}
+        onChange={(e) => {
+          onChange({
+            ...task,
+            done: e.target.checked,
+          });
+        }}
+      />
+      {taskContent}
+      <button onClick={() => onDelete(task.id)}>Delete</button>
+    </label>
+  );
+}
+```
+
+```css
+button {
+  margin: 5px;
+}
+li {
+  list-style-type: none;
+}
+ul,
+li {
+  margin: 0;
+  padding: 0;
+}
+```
+
+</Sandpack>
+
+Each of its event handlers calls `setTasks` in order to update the state. As this component grows, so does the amount of state logic sprinkled throughout it. To reduce this complexity and keep all your logic in one easy-to-access place, you can move that state logic into a single function outside your component, **called a "reducer".**
+
+Reducers are a different way to handle state. You can migrate from `useState` to `useReducer` in three steps:
+
+1. **Move** from setting state to dispatching actions.
+2. **Write** a reducer function.
+3. **Use** the reducer from your component.
+
+### Step 1: Move from setting state to dispatching actions {/*step-1-move-from-setting-state-to-dispatching-actions*/}
+
+Your event handlers currently specify _what to do_ by setting state:
+
+```js
+function handleAddTask(text) {
+  setTasks([
+    ...tasks,
+    {
+      id: nextId++,
+      text: text,
+      done: false,
+    },
+  ]);
+}
+
+function handleChangeTask(task) {
+  setTasks(
+    tasks.map((t) => {
+      if (t.id === task.id) {
+        return task;
+      } else {
+        return t;
+      }
+    })
+  );
+}
+
+function handleDeleteTask(taskId) {
+  setTasks(tasks.filter((t) => t.id !== taskId));
+}
+```
+
+Remove all the state setting logic. What you are left with are three event handlers:
+
+- `handleAddTask(text)` is called when the user presses "Add".
+- `handleChangeTask(task)` is called when the user toggles a task or presses "Save".
+- `handleDeleteTask(taskId)` is called when the user presses "Delete".
+
+Managing state with reducers is slightly different from directly setting state. Instead of telling React "what to do" by setting state, you specify "what the user just did" by dispatching "actions" from your event handlers. (The state update logic will live elsewhere!) So instead of "setting `tasks`" via an event handler, you're dispatching an "added/changed/deleted a task" action. This is more descriptive of the user's intent.
+
+```js
+function handleAddTask(text) {
+  dispatch({
+    type: 'added',
+    id: nextId++,
+    text: text,
+  });
+}
+
+function handleChangeTask(task) {
+  dispatch({
+    type: 'changed',
+    task: task,
+  });
+}
+
+function handleDeleteTask(taskId) {
+  dispatch({
+    type: 'deleted',
+    id: taskId,
+  });
+}
+```
+
+The object you pass to `dispatch` is called an "action":
+
+```js {3-7}
+function handleDeleteTask(taskId) {
+  dispatch(
+    // "action" object:
+    {
+      type: 'deleted',
+      id: taskId,
+    }
+  );
+}
+```
+
+It is a regular JavaScript object. You decide what to put in it, but generally it should contain the minimal information about _what happened_. (You will add the `dispatch` function itself in a later step.)
+
+<Note>
+
+An action object can have any shape.
+
+By convention, it is common to give it a string `type` that describes what happened, and pass any additional information in other fields. The `type` is specific to a component, so in this example either `'added'` or `'added_task'` would be fine. Choose a name that says what happened!
+
+```js
+dispatch({
+  // specific to component
+  type: 'what_happened',
+  // other fields go here
+});
+```
+
+</Note>
+
+### Step 2: Write a reducer function {/*step-2-write-a-reducer-function*/}
+
+A reducer function is where you will put your state logic. It takes two arguments, the current state and the action object, and it returns the next state:
+
+```js
+function yourReducer(state, action) {
+  // return next state for React to set
+}
+```
+
+React will set the state to what you return from the reducer.
+
+To move your state setting logic from your event handlers to a reducer function in this example, you will:
+
+1. Declare the current state (`tasks`) as the first argument.
+2. Declare the `action` object as the second argument.
+3. Return the _next_ state from the reducer (which React will set the state to).
+
+Here is all the state setting logic migrated to a reducer function:
+
+```js
+function tasksReducer(tasks, action) {
+  if (action.type === 'added') {
+    return [
+      ...tasks,
+      {
+        id: action.id,
+        text: action.text,
+        done: false,
+      },
+    ];
+  } else if (action.type === 'changed') {
+    return tasks.map((t) => {
+      if (t.id === action.task.id) {
+        return action.task;
+      } else {
+        return t;
+      }
+    });
+  } else if (action.type === 'deleted') {
+    return tasks.filter((t) => t.id !== action.id);
+  } else {
+    throw Error('Unknown action: ' + action.type);
+  }
+}
+```
+
+> Because the reducer function takes state (`tasks`) as an argument, you can **declare it outside of your component.** This decreases the indentation level and can make your code easier to read.
+
+<Note>
+
+The code above uses if/else statements, but it's a convention to use [switch statements](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/switch) inside reducers. The result is the same, but it can be easier to read switch statements at a glance.
+
+We'll be using them throughout the rest of this documentation like so:
+
+```js
+function tasksReducer(tasks, action) {
+  switch (action.type) {
+    case 'added': {
+      return [
+        ...tasks,
+        {
+          id: action.id,
+          text: action.text,
+          done: false,
+        },
+      ];
+    }
+    case 'changed': {
+      return tasks.map((t) => {
+        if (t.id === action.task.id) {
+          return action.task;
+        } else {
+          return t;
+        }
+      });
+    }
+    case 'deleted': {
+      return tasks.filter((t) => t.id !== action.id);
+    }
+    default: {
+      throw Error('Unknown action: ' + action.type);
+    }
+  }
+}
+```
+
+We recommend to wrap each `case` block into the `{` and `}` curly braces so that variables declared inside of different `case`s don't clash with each other. Also, a `case` should usually end with a `return`. If you forget to `return`, the code will "fall through" to the next `case`, which can lead to mistakes!
+
+If you're not yet comfortable with switch statements, using if/else is completely fine.
+
+</Note>
+
+<DeepDive>
+
+#### Why are reducers called this way? {/*why-are-reducers-called-this-way*/}
+
+Although reducers can "reduce" the amount of code inside your component, they are actually named after the [`reduce()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce) operation that you can perform on arrays.
+
+The `reduce()` operation lets you take an array and "accumulate" a single value out of many:
+
+```
+const arr = [1, 2, 3, 4, 5];
+const sum = arr.reduce(
+  (result, number) => result + number
+); // 1 + 2 + 3 + 4 + 5
+```
+
+The function you pass to `reduce` is known as a "reducer". It takes the _result so far_ and the _current item,_ then it returns the _next result._ React reducers are an example of the same idea: they take the _state so far_ and the _action_, and return the _next state._ In this way, they accumulate actions over time into state.
+
+You could even use the `reduce()` method with an `initialState` and an array of `actions` to calculate the final state by passing your reducer function to it:
+
+<Sandpack>
+
+```js index.js active
+import tasksReducer from './tasksReducer.js';
+
+let initialState = [];
+let actions = [
+  {type: 'added', id: 1, text: 'Visit Kafka Museum'},
+  {type: 'added', id: 2, text: 'Watch a puppet show'},
+  {type: 'deleted', id: 1},
+  {type: 'added', id: 3, text: 'Lennon Wall pic'},
+];
+
+let finalState = actions.reduce(tasksReducer, initialState);
+
+const output = document.getElementById('output');
+output.textContent = JSON.stringify(finalState, null, 2);
+```
+
+```js tasksReducer.js
+export default function tasksReducer(tasks, action) {
+  switch (action.type) {
+    case 'added': {
+      return [
+        ...tasks,
+        {
+          id: action.id,
+          text: action.text,
+          done: false,
+        },
+      ];
+    }
+    case 'changed': {
+      return tasks.map((t) => {
+        if (t.id === action.task.id) {
+          return action.task;
+        } else {
+          return t;
+        }
+      });
+    }
+    case 'deleted': {
+      return tasks.filter((t) => t.id !== action.id);
+    }
+    default: {
+      throw Error('Unknown action: ' + action.type);
+    }
+  }
+}
+```
+
+```html public/index.html
+<pre id="output"></pre>
+```
+
+</Sandpack>
+
+You probably won't need to do this yourself, but this is similar to what React does!
+
+</DeepDive>
+
+### Step 3: Use the reducer from your component {/*step-3-use-the-reducer-from-your-component*/}
+
+Finally, you need to hook up the `tasksReducer` to your component. Make sure to import the `useReducer` Hook from React:
+
+```js
+import {useReducer} from 'react';
+```
+
+Then you can replace `useState`:
+
+```js
+const [tasks, setTasks] = useState(initialTasks);
+```
+
+with `useReducer` like so:
+
+```js
+const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);
+```
+
+The `useReducer` Hook is similar to `useState`—you must pass it an initial state and it returns a stateful value and a way to set state (in this case, the dispatch function). But it's a little different.
+
+The `useReducer` Hook takes two arguments:
+
+1. A reducer function
+2. An initial state
+
+And it returns:
+
+1. A stateful value
+2. A dispatch function (to "dispatch" user actions to the reducer)
+
+Now it's fully wired up! Here, the reducer is declared at the bottom of the component file:
+
+<Sandpack>
+
+```js App.js
+import {useReducer} from 'react';
+import AddTask from './AddTask.js';
+import TaskList from './TaskList.js';
+
+export default function TaskApp() {
+  const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);
+
+  function handleAddTask(text) {
+    dispatch({
+      type: 'added',
+      id: nextId++,
+      text: text,
+    });
+  }
+
+  function handleChangeTask(task) {
+    dispatch({
+      type: 'changed',
+      task: task,
+    });
+  }
+
+  function handleDeleteTask(taskId) {
+    dispatch({
+      type: 'deleted',
+      id: taskId,
+    });
+  }
+
+  return (
+    <>
+      <h1>Prague itinerary</h1>
+      <AddTask onAddTask={handleAddTask} />
+      <TaskList
+        tasks={tasks}
+        onChangeTask={handleChangeTask}
+        onDeleteTask={handleDeleteTask}
+      />
+    </>
+  );
+}
+
+function tasksReducer(tasks, action) {
+  switch (action.type) {
+    case 'added': {
+      return [
+        ...tasks,
+        {
+          id: action.id,
+          text: action.text,
+          done: false,
+        },
+      ];
+    }
+    case 'changed': {
+      return tasks.map((t) => {
+        if (t.id === action.task.id) {
+          return action.task;
+        } else {
+          return t;
+        }
+      });
+    }
+    case 'deleted': {
+      return tasks.filter((t) => t.id !== action.id);
+    }
+    default: {
+      throw Error('Unknown action: ' + action.type);
+    }
+  }
+}
+
+let nextId = 3;
+const initialTasks = [
+  {id: 0, text: 'Visit Kafka Museum', done: true},
+  {id: 1, text: 'Watch a puppet show', done: false},
+  {id: 2, text: 'Lennon Wall pic', done: false},
+];
+```
+
+```js AddTask.js hidden
+import {useState} from 'react';
+
+export default function AddTask({onAddTask}) {
+  const [text, setText] = useState('');
+  return (
+    <>
+      <input
+        placeholder="Add task"
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+      />
+      <button
+        onClick={() => {
+          setText('');
+          onAddTask(text);
+        }}>
+        Add
+      </button>
+    </>
+  );
+}
+```
+
+```js TaskList.js hidden
+import {useState} from 'react';
+
+export default function TaskList({tasks, onChangeTask, onDeleteTask}) {
+  return (
+    <ul>
+      {tasks.map((task) => (
+        <li key={task.id}>
+          <Task task={task} onChange={onChangeTask} onDelete={onDeleteTask} />
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function Task({task, onChange, onDelete}) {
+  const [isEditing, setIsEditing] = useState(false);
+  let taskContent;
+  if (isEditing) {
+    taskContent = (
+      <>
+        <input
+          value={task.text}
+          onChange={(e) => {
+            onChange({
+              ...task,
+              text: e.target.value,
+            });
+          }}
+        />
+        <button onClick={() => setIsEditing(false)}>Save</button>
+      </>
+    );
+  } else {
+    taskContent = (
+      <>
+        {task.text}
+        <button onClick={() => setIsEditing(true)}>Edit</button>
+      </>
+    );
+  }
+  return (
+    <label>
+      <input
+        type="checkbox"
+        checked={task.done}
+        onChange={(e) => {
+          onChange({
+            ...task,
+            done: e.target.checked,
+          });
+        }}
+      />
+      {taskContent}
+      <button onClick={() => onDelete(task.id)}>Delete</button>
+    </label>
+  );
+}
+```
+
+```css
+button {
+  margin: 5px;
+}
+li {
+  list-style-type: none;
+}
+ul,
+li {
+  margin: 0;
+  padding: 0;
+}
+```
+
+</Sandpack>
+
+If you want, you can even move the reducer to a different file:
+
+<Sandpack>
+
+```js App.js
+import {useReducer} from 'react';
+import AddTask from './AddTask.js';
+import TaskList from './TaskList.js';
+import tasksReducer from './tasksReducer.js';
+
+export default function TaskApp() {
+  const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);
+
+  function handleAddTask(text) {
+    dispatch({
+      type: 'added',
+      id: nextId++,
+      text: text,
+    });
+  }
+
+  function handleChangeTask(task) {
+    dispatch({
+      type: 'changed',
+      task: task,
+    });
+  }
+
+  function handleDeleteTask(taskId) {
+    dispatch({
+      type: 'deleted',
+      id: taskId,
+    });
+  }
+
+  return (
+    <>
+      <h1>Prague itinerary</h1>
+      <AddTask onAddTask={handleAddTask} />
+      <TaskList
+        tasks={tasks}
+        onChangeTask={handleChangeTask}
+        onDeleteTask={handleDeleteTask}
+      />
+    </>
+  );
+}
+
+let nextId = 3;
+const initialTasks = [
+  {id: 0, text: 'Visit Kafka Museum', done: true},
+  {id: 1, text: 'Watch a puppet show', done: false},
+  {id: 2, text: 'Lennon Wall pic', done: false},
+];
+```
+
+```js tasksReducer.js
+export default function tasksReducer(tasks, action) {
+  switch (action.type) {
+    case 'added': {
+      return [
+        ...tasks,
+        {
+          id: action.id,
+          text: action.text,
+          done: false,
+        },
+      ];
+    }
+    case 'changed': {
+      return tasks.map((t) => {
+        if (t.id === action.task.id) {
+          return action.task;
+        } else {
+          return t;
+        }
+      });
+    }
+    case 'deleted': {
+      return tasks.filter((t) => t.id !== action.id);
+    }
+    default: {
+      throw Error('Unknown action: ' + action.type);
+    }
+  }
+}
+```
+
+```js AddTask.js hidden
+import {useState} from 'react';
+
+export default function AddTask({onAddTask}) {
+  const [text, setText] = useState('');
+  return (
+    <>
+      <input
+        placeholder="Add task"
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+      />
+      <button
+        onClick={() => {
+          setText('');
+          onAddTask(text);
+        }}>
+        Add
+      </button>
+    </>
+  );
+}
+```
+
+```js TaskList.js hidden
+import {useState} from 'react';
+
+export default function TaskList({tasks, onChangeTask, onDeleteTask}) {
+  return (
+    <ul>
+      {tasks.map((task) => (
+        <li key={task.id}>
+          <Task task={task} onChange={onChangeTask} onDelete={onDeleteTask} />
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function Task({task, onChange, onDelete}) {
+  const [isEditing, setIsEditing] = useState(false);
+  let taskContent;
+  if (isEditing) {
+    taskContent = (
+      <>
+        <input
+          value={task.text}
+          onChange={(e) => {
+            onChange({
+              ...task,
+              text: e.target.value,
+            });
+          }}
+        />
+        <button onClick={() => setIsEditing(false)}>Save</button>
+      </>
+    );
+  } else {
+    taskContent = (
+      <>
+        {task.text}
+        <button onClick={() => setIsEditing(true)}>Edit</button>
+      </>
+    );
+  }
+  return (
+    <label>
+      <input
+        type="checkbox"
+        checked={task.done}
+        onChange={(e) => {
+          onChange({
+            ...task,
+            done: e.target.checked,
+          });
+        }}
+      />
+      {taskContent}
+      <button onClick={() => onDelete(task.id)}>Delete</button>
+    </label>
+  );
+}
+```
+
+```css
+button {
+  margin: 5px;
+}
+li {
+  list-style-type: none;
+}
+ul,
+li {
+  margin: 0;
+  padding: 0;
+}
+```
+
+</Sandpack>
+
+Component logic can be easier to read when you separate concerns like this. Now the event handlers only specify _what happened_ by dispatching actions, and the reducer function determines _how the state updates_ in response to them.
+
+## Comparing `useState` and `useReducer` {/*comparing-usestate-and-usereducer*/}
+
+Reducers are not without downsides! Here's a few ways you can compare them:
+
+- **Code size:** Generally, with `useState` you have to write less code upfront. With `useReducer`, you have to write both a reducer function _and_ dispatch actions. However, `useReducer` can help cut down on the code if many event handlers modify state in a similar way.
+- **Readability:** `useState` is very easy to read when the state updates are simple. When they get more complex, they can bloat your component's code and make it difficult to scan. In this case, `useReducer` lets you cleanly separate the _how_ of update logic from the _what happened_ of event handlers.
+- **Debugging:** When you have a bug with `useState`, it can be difficult to tell _where_ the state was set incorrectly, and _why_. With `useReducer`, you can add a console log into your reducer to see every state update, and _why_ it happened (due to which `action`). If each `action` is correct, you'll know that the mistake is in the reducer logic itself. However, you have to step through more code than with `useState`.
+- **Testing:** A reducer is a pure function that doesn't depend on your component. This means that you can export and test it separately in isolation. While generally it's best to test components in a more realistic environment, for complex state update logic it can be useful to assert that your reducer returns a particular state for a particular initial state and action.
+- **Personal preference:** Some people like reducers, others don't. That's okay. It's a matter of preference. You can always convert between `useState` and `useReducer` back and forth: they are equivalent!
+
+We recommend using a reducer if you often encounter bugs due to incorrect state updates in some component, and want to introduce more structure to its code. You don't have to use reducers for everything: feel free to mix and match! You can even `useState` and `useReducer` in the same component.
+
+## Writing reducers well {/*writing-reducers-well*/}
+
+Keep these two tips in mind when writing reducers:
+
+- **Reducers must be pure.** Similar to [state updater functions](/learn/queueing-a-series-of-state-updates), reducers run during rendering! (Actions are queued until the next render.) This means that reducers [must be pure](/learn/keeping-components-pure)—same inputs always result in the same output. They should not send requests, schedule timeouts, or perform any side effects (operations that impact things outside the component). They should update [objects](/learn/updating-objects-in-state) and [arrays](/learn/updating-arrays-in-state) without mutations.
+- **Each action describes a single user interaction, even if that leads to multiple changes in the data.** For example, if a user presses "Reset" on a form with five fields managed by a reducer, it makes more sense to dispatch one `reset_form` action rather than five separate `set_field` actions. If you log every action in a reducer, that log should be clear enough for you to reconstruct what interactions or responses happened in what order. This helps with debugging!
+
+## Writing concise reducers with Immer {/*writing-concise-reducers-with-immer*/}
+
+Just like with [updating objects](/learn/updating-objects-in-state#write-concise-update-logic-with-immer) and [arrays](/learn/updating-arrays-in-state#write-concise-update-logic-with-immer) in regular state, you can use the Immer library to make reducers more concise. Here, [`useImmerReducer`](https://github.com/immerjs/use-immer#useimmerreducer) lets you mutate the state with `push` or `arr[i] =` assignment:
+
+<Sandpack>
+
+```js App.js
+import {useImmerReducer} from 'use-immer';
+import AddTask from './AddTask.js';
+import TaskList from './TaskList.js';
+
+function tasksReducer(draft, action) {
+  switch (action.type) {
+    case 'added': {
+      draft.push({
+        id: action.id,
+        text: action.text,
+        done: false,
+      });
+      break;
+    }
+    case 'changed': {
+      const index = draft.findIndex((t) => t.id === action.task.id);
+      draft[index] = action.task;
+      break;
+    }
+    case 'deleted': {
+      return draft.filter((t) => t.id !== action.id);
+    }
+    default: {
+      throw Error('Unknown action: ' + action.type);
+    }
+  }
+}
+
+export default function TaskApp() {
+  const [tasks, dispatch] = useImmerReducer(tasksReducer, initialTasks);
+
+  function handleAddTask(text) {
+    dispatch({
+      type: 'added',
+      id: nextId++,
+      text: text,
+    });
+  }
+
+  function handleChangeTask(task) {
+    dispatch({
+      type: 'changed',
+      task: task,
+    });
+  }
+
+  function handleDeleteTask(taskId) {
+    dispatch({
+      type: 'deleted',
+      id: taskId,
+    });
+  }
+
+  return (
+    <>
+      <h1>Prague itinerary</h1>
+      <AddTask onAddTask={handleAddTask} />
+      <TaskList
+        tasks={tasks}
+        onChangeTask={handleChangeTask}
+        onDeleteTask={handleDeleteTask}
+      />
+    </>
+  );
+}
+
+let nextId = 3;
+const initialTasks = [
+  {id: 0, text: 'Visit Kafka Museum', done: true},
+  {id: 1, text: 'Watch a puppet show', done: false},
+  {id: 2, text: 'Lennon Wall pic', done: false},
+];
+```
+
+```js AddTask.js hidden
+import {useState} from 'react';
+
+export default function AddTask({onAddTask}) {
+  const [text, setText] = useState('');
+  return (
+    <>
+      <input
+        placeholder="Add task"
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+      />
+      <button
+        onClick={() => {
+          setText('');
+          onAddTask(text);
+        }}>
+        Add
+      </button>
+    </>
+  );
+}
+```
+
+```js TaskList.js hidden
+import {useState} from 'react';
+
+export default function TaskList({tasks, onChangeTask, onDeleteTask}) {
+  return (
+    <ul>
+      {tasks.map((task) => (
+        <li key={task.id}>
+          <Task task={task} onChange={onChangeTask} onDelete={onDeleteTask} />
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function Task({task, onChange, onDelete}) {
+  const [isEditing, setIsEditing] = useState(false);
+  let taskContent;
+  if (isEditing) {
+    taskContent = (
+      <>
+        <input
+          value={task.text}
+          onChange={(e) => {
+            onChange({
+              ...task,
+              text: e.target.value,
+            });
+          }}
+        />
+        <button onClick={() => setIsEditing(false)}>Save</button>
+      </>
+    );
+  } else {
+    taskContent = (
+      <>
+        {task.text}
+        <button onClick={() => setIsEditing(true)}>Edit</button>
+      </>
+    );
+  }
+  return (
+    <label>
+      <input
+        type="checkbox"
+        checked={task.done}
+        onChange={(e) => {
+          onChange({
+            ...task,
+            done: e.target.checked,
+          });
+        }}
+      />
+      {taskContent}
+      <button onClick={() => onDelete(task.id)}>Delete</button>
+    </label>
+  );
+}
+```
+
+```css
+button {
+  margin: 5px;
+}
+li {
+  list-style-type: none;
+}
+ul,
+li {
+  margin: 0;
+  padding: 0;
+}
+```
+
+```json package.json
+{
+  "dependencies": {
+    "immer": "1.7.3",
+    "react": "latest",
+    "react-dom": "latest",
+    "react-scripts": "latest",
+    "use-immer": "0.5.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+</Sandpack>
+
+Reducers must be pure, so they shouldn't mutate state. But Immer provides you with a special `draft` object which is safe to mutate. Under the hood, Immer will create a copy of your state with the changes you made to the `draft`. This is why reducers managed by `useImmerReducer` can mutate their first argument and don't need to return state.
+
+<Recap>
+
+- To convert from `useState` to `useReducer`:
+  1. Dispatch actions from event handlers.
+  2. Write a reducer function that returns the next state for a given state and action.
+  3. Replace `useState` with `useReducer`.
+- Reducers require you to write a bit more code, but they help with debugging and testing.
+- Reducers must be pure.
+- Each action describes a single user interaction.
+- Use Immer if you want to write reducers in a mutating style.
+
+</Recap>
+
+<Challenges>
+
+#### Dispatch actions from event handlers {/*dispatch-actions-from-event-handlers*/}
+
+Currently, the event handlers in `ContactList.js` and `Chat.js` have `// TODO` comments. This is why typing into the input doesn't work, and clicking on the buttons doesn't change the selected recipient.
+
+Replace these two `// TODO`s with the code to `dispatch` the corresponding actions. To see the expected shape and the type of the actions, check the reducer in `messengerReducer.js`. The reducer is already written so you won't need to change it. You only need to dispatch the actions in `ContactList.js` and `Chat.js`.
+
+<Hint>
+
+The `dispatch` function is already available in both of these components because it was passed as a prop. So you need to call `dispatch` with the corresponding action object.
+
+To check the action object shape, you can look at the reducer and see which `action` fields it expects to see. For example, the `changed_selection` case in the reducer looks like this:
+
+```js
+case 'changed_selection': {
+  return {
+    ...state,
+    selectedId: action.contactId
+  };
+}
+```
+
+This means that your action object should have a `type: 'changed_selection'`. You also see the `action.contactId` being used, so you need to include a `contactId` property into your action.
+
+</Hint>
+
+<Sandpack>
+
+```js App.js
+import {useReducer} from 'react';
+import Chat from './Chat.js';
+import ContactList from './ContactList.js';
+import {initialState, messengerReducer} from './messengerReducer';
+
+export default function Messenger() {
+  const [state, dispatch] = useReducer(messengerReducer, initialState);
+  const message = state.message;
+  const contact = contacts.find((c) => c.id === state.selectedId);
+  return (
+    <div>
+      <ContactList
+        contacts={contacts}
+        selectedId={state.selectedId}
+        dispatch={dispatch}
+      />
+      <Chat
+        key={contact.id}
+        message={message}
+        contact={contact}
+        dispatch={dispatch}
+      />
+    </div>
+  );
+}
+
+const contacts = [
+  {id: 0, name: 'Taylor', email: 'taylor@mail.com'},
+  {id: 1, name: 'Alice', email: 'alice@mail.com'},
+  {id: 2, name: 'Bob', email: 'bob@mail.com'},
+];
+```
+
+```js messengerReducer.js
+export const initialState = {
+  selectedId: 0,
+  message: 'Hello',
+};
+
+export function messengerReducer(state, action) {
+  switch (action.type) {
+    case 'changed_selection': {
+      return {
+        ...state,
+        selectedId: action.contactId,
+        message: '',
+      };
+    }
+    case 'edited_message': {
+      return {
+        ...state,
+        message: action.message,
+      };
+    }
+    default: {
+      throw Error('Unknown action: ' + action.type);
+    }
+  }
+}
+```
+
+```js ContactList.js
+export default function ContactList({contacts, selectedId, dispatch}) {
+  return (
+    <section className="contact-list">
+      <ul>
+        {contacts.map((contact) => (
+          <li key={contact.id}>
+            <button
+              onClick={() => {
+                // TODO: dispatch changed_selection
+              }}>
+              {selectedId === contact.id ? <b>{contact.name}</b> : contact.name}
+            </button>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}
+```
+
+```js Chat.js
+import {useState} from 'react';
+
+export default function Chat({contact, message, dispatch}) {
+  return (
+    <section className="chat">
+      <textarea
+        value={message}
+        placeholder={'Chat to ' + contact.name}
+        onChange={(e) => {
+          // TODO: dispatch edited_message
+          // (Read the input value from e.target.value)
+        }}
+      />
+      <br />
+      <button>Send to {contact.email}</button>
+    </section>
+  );
+}
+```
+
+```css
+.chat,
+.contact-list {
+  float: left;
+  margin-bottom: 20px;
+}
+ul,
+li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+li button {
+  width: 100px;
+  padding: 10px;
+  margin-right: 10px;
+}
+textarea {
+  height: 150px;
+}
+```
+
+</Sandpack>
+
+<Solution>
+
+From the reducer code, you can infer that actions need to look like this:
+
+```js
+// When the user presses "Alice"
+dispatch({
+  type: 'changed_selection',
+  contactId: 1,
+});
+
+// When user types "Hello!"
+dispatch({
+  type: 'edited_message',
+  message: 'Hello!',
+});
+```
+
+Here is the example updated to dispatch the corresponding messages:
+
+<Sandpack>
+
+```js App.js
+import {useReducer} from 'react';
+import Chat from './Chat.js';
+import ContactList from './ContactList.js';
+import {initialState, messengerReducer} from './messengerReducer';
+
+export default function Messenger() {
+  const [state, dispatch] = useReducer(messengerReducer, initialState);
+  const message = state.message;
+  const contact = contacts.find((c) => c.id === state.selectedId);
+  return (
+    <div>
+      <ContactList
+        contacts={contacts}
+        selectedId={state.selectedId}
+        dispatch={dispatch}
+      />
+      <Chat
+        key={contact.id}
+        message={message}
+        contact={contact}
+        dispatch={dispatch}
+      />
+    </div>
+  );
+}
+
+const contacts = [
+  {id: 0, name: 'Taylor', email: 'taylor@mail.com'},
+  {id: 1, name: 'Alice', email: 'alice@mail.com'},
+  {id: 2, name: 'Bob', email: 'bob@mail.com'},
+];
+```
+
+```js messengerReducer.js
+export const initialState = {
+  selectedId: 0,
+  message: 'Hello',
+};
+
+export function messengerReducer(state, action) {
+  switch (action.type) {
+    case 'changed_selection': {
+      return {
+        ...state,
+        selectedId: action.contactId,
+        message: '',
+      };
+    }
+    case 'edited_message': {
+      return {
+        ...state,
+        message: action.message,
+      };
+    }
+    default: {
+      throw Error('Unknown action: ' + action.type);
+    }
+  }
+}
+```
+
+```js ContactList.js
+export default function ContactList({contacts, selectedId, dispatch}) {
+  return (
+    <section className="contact-list">
+      <ul>
+        {contacts.map((contact) => (
+          <li key={contact.id}>
+            <button
+              onClick={() => {
+                dispatch({
+                  type: 'changed_selection',
+                  contactId: contact.id,
+                });
+              }}>
+              {selectedId === contact.id ? <b>{contact.name}</b> : contact.name}
+            </button>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}
+```
+
+```js Chat.js
+import {useState} from 'react';
+
+export default function Chat({contact, message, dispatch}) {
+  return (
+    <section className="chat">
+      <textarea
+        value={message}
+        placeholder={'Chat to ' + contact.name}
+        onChange={(e) => {
+          dispatch({
+            type: 'edited_message',
+            message: e.target.value,
+          });
+        }}
+      />
+      <br />
+      <button>Send to {contact.email}</button>
+    </section>
+  );
+}
+```
+
+```css
+.chat,
+.contact-list {
+  float: left;
+  margin-bottom: 20px;
+}
+ul,
+li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+li button {
+  width: 100px;
+  padding: 10px;
+  margin-right: 10px;
+}
+textarea {
+  height: 150px;
+}
+```
+
+</Sandpack>
+
+</Solution>
+
+#### Clear the input on sending a message {/*clear-the-input-on-sending-a-message*/}
+
+Currently, pressing "Send" doesn't do anything. Add an event handler to the "Send" button that will:
+
+1. Show an `alert` with the recipient's email and the message.
+2. Clear the message input.
+
+<Sandpack>
+
+```js App.js
+import {useReducer} from 'react';
+import Chat from './Chat.js';
+import ContactList from './ContactList.js';
+import {initialState, messengerReducer} from './messengerReducer';
+
+export default function Messenger() {
+  const [state, dispatch] = useReducer(messengerReducer, initialState);
+  const message = state.message;
+  const contact = contacts.find((c) => c.id === state.selectedId);
+  return (
+    <div>
+      <ContactList
+        contacts={contacts}
+        selectedId={state.selectedId}
+        dispatch={dispatch}
+      />
+      <Chat
+        key={contact.id}
+        message={message}
+        contact={contact}
+        dispatch={dispatch}
+      />
+    </div>
+  );
+}
+
+const contacts = [
+  {id: 0, name: 'Taylor', email: 'taylor@mail.com'},
+  {id: 1, name: 'Alice', email: 'alice@mail.com'},
+  {id: 2, name: 'Bob', email: 'bob@mail.com'},
+];
+```
+
+```js messengerReducer.js
+export const initialState = {
+  selectedId: 0,
+  message: 'Hello',
+};
+
+export function messengerReducer(state, action) {
+  switch (action.type) {
+    case 'changed_selection': {
+      return {
+        ...state,
+        selectedId: action.contactId,
+        message: '',
+      };
+    }
+    case 'edited_message': {
+      return {
+        ...state,
+        message: action.message,
+      };
+    }
+    default: {
+      throw Error('Unknown action: ' + action.type);
+    }
+  }
+}
+```
+
+```js ContactList.js
+export default function ContactList({contacts, selectedId, dispatch}) {
+  return (
+    <section className="contact-list">
+      <ul>
+        {contacts.map((contact) => (
+          <li key={contact.id}>
+            <button
+              onClick={() => {
+                dispatch({
+                  type: 'changed_selection',
+                  contactId: contact.id,
+                });
+              }}>
+              {selectedId === contact.id ? <b>{contact.name}</b> : contact.name}
+            </button>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}
+```
+
+```js Chat.js active
+import {useState} from 'react';
+
+export default function Chat({contact, message, dispatch}) {
+  return (
+    <section className="chat">
+      <textarea
+        value={message}
+        placeholder={'Chat to ' + contact.name}
+        onChange={(e) => {
+          dispatch({
+            type: 'edited_message',
+            message: e.target.value,
+          });
+        }}
+      />
+      <br />
+      <button>Send to {contact.email}</button>
+    </section>
+  );
+}
+```
+
+```css
+.chat,
+.contact-list {
+  float: left;
+  margin-bottom: 20px;
+}
+ul,
+li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+li button {
+  width: 100px;
+  padding: 10px;
+  margin-right: 10px;
+}
+textarea {
+  height: 150px;
+}
+```
+
+</Sandpack>
+
+<Solution>
+
+There are a couple of ways you could do it in the "Send" button event handler. One approach is to show an alert and then dispatch an `edited_message` action with an empty `message`:
+
+<Sandpack>
+
+```js App.js
+import {useReducer} from 'react';
+import Chat from './Chat.js';
+import ContactList from './ContactList.js';
+import {initialState, messengerReducer} from './messengerReducer';
+
+export default function Messenger() {
+  const [state, dispatch] = useReducer(messengerReducer, initialState);
+  const message = state.message;
+  const contact = contacts.find((c) => c.id === state.selectedId);
+  return (
+    <div>
+      <ContactList
+        contacts={contacts}
+        selectedId={state.selectedId}
+        dispatch={dispatch}
+      />
+      <Chat
+        key={contact.id}
+        message={message}
+        contact={contact}
+        dispatch={dispatch}
+      />
+    </div>
+  );
+}
+
+const contacts = [
+  {id: 0, name: 'Taylor', email: 'taylor@mail.com'},
+  {id: 1, name: 'Alice', email: 'alice@mail.com'},
+  {id: 2, name: 'Bob', email: 'bob@mail.com'},
+];
+```
+
+```js messengerReducer.js
+export const initialState = {
+  selectedId: 0,
+  message: 'Hello',
+};
+
+export function messengerReducer(state, action) {
+  switch (action.type) {
+    case 'changed_selection': {
+      return {
+        ...state,
+        selectedId: action.contactId,
+        message: '',
+      };
+    }
+    case 'edited_message': {
+      return {
+        ...state,
+        message: action.message,
+      };
+    }
+    default: {
+      throw Error('Unknown action: ' + action.type);
+    }
+  }
+}
+```
+
+```js ContactList.js
+export default function ContactList({contacts, selectedId, dispatch}) {
+  return (
+    <section className="contact-list">
+      <ul>
+        {contacts.map((contact) => (
+          <li key={contact.id}>
+            <button
+              onClick={() => {
+                dispatch({
+                  type: 'changed_selection',
+                  contactId: contact.id,
+                });
+              }}>
+              {selectedId === contact.id ? <b>{contact.name}</b> : contact.name}
+            </button>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}
+```
+
+```js Chat.js active
+import {useState} from 'react';
+
+export default function Chat({contact, message, dispatch}) {
+  return (
+    <section className="chat">
+      <textarea
+        value={message}
+        placeholder={'Chat to ' + contact.name}
+        onChange={(e) => {
+          dispatch({
+            type: 'edited_message',
+            message: e.target.value,
+          });
+        }}
+      />
+      <br />
+      <button
+        onClick={() => {
+          alert(`Sending "${message}" to ${contact.email}`);
+          dispatch({
+            type: 'edited_message',
+            message: '',
+          });
+        }}>
+        Send to {contact.email}
+      </button>
+    </section>
+  );
+}
+```
+
+```css
+.chat,
+.contact-list {
+  float: left;
+  margin-bottom: 20px;
+}
+ul,
+li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+li button {
+  width: 100px;
+  padding: 10px;
+  margin-right: 10px;
+}
+textarea {
+  height: 150px;
+}
+```
+
+</Sandpack>
+
+This works and clears the input when you hit "Send".
+
+However, _from the user's perspective_, sending a message is a different action than editing the field. To reflect that, you could instead create a _new_ action called `sent_message`, and handle it separately in the reducer:
+
+<Sandpack>
+
+```js App.js
+import {useReducer} from 'react';
+import Chat from './Chat.js';
+import ContactList from './ContactList.js';
+import {initialState, messengerReducer} from './messengerReducer';
+
+export default function Messenger() {
+  const [state, dispatch] = useReducer(messengerReducer, initialState);
+  const message = state.message;
+  const contact = contacts.find((c) => c.id === state.selectedId);
+  return (
+    <div>
+      <ContactList
+        contacts={contacts}
+        selectedId={state.selectedId}
+        dispatch={dispatch}
+      />
+      <Chat
+        key={contact.id}
+        message={message}
+        contact={contact}
+        dispatch={dispatch}
+      />
+    </div>
+  );
+}
+
+const contacts = [
+  {id: 0, name: 'Taylor', email: 'taylor@mail.com'},
+  {id: 1, name: 'Alice', email: 'alice@mail.com'},
+  {id: 2, name: 'Bob', email: 'bob@mail.com'},
+];
+```
+
+```js messengerReducer.js active
+export const initialState = {
+  selectedId: 0,
+  message: 'Hello',
+};
+
+export function messengerReducer(state, action) {
+  switch (action.type) {
+    case 'changed_selection': {
+      return {
+        ...state,
+        selectedId: action.contactId,
+        message: '',
+      };
+    }
+    case 'edited_message': {
+      return {
+        ...state,
+        message: action.message,
+      };
+    }
+    case 'sent_message': {
+      return {
+        ...state,
+        message: '',
+      };
+    }
+    default: {
+      throw Error('Unknown action: ' + action.type);
+    }
+  }
+}
+```
+
+```js ContactList.js
+export default function ContactList({contacts, selectedId, dispatch}) {
+  return (
+    <section className="contact-list">
+      <ul>
+        {contacts.map((contact) => (
+          <li key={contact.id}>
+            <button
+              onClick={() => {
+                dispatch({
+                  type: 'changed_selection',
+                  contactId: contact.id,
+                });
+              }}>
+              {selectedId === contact.id ? <b>{contact.name}</b> : contact.name}
+            </button>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}
+```
+
+```js Chat.js active
+import {useState} from 'react';
+
+export default function Chat({contact, message, dispatch}) {
+  return (
+    <section className="chat">
+      <textarea
+        value={message}
+        placeholder={'Chat to ' + contact.name}
+        onChange={(e) => {
+          dispatch({
+            type: 'edited_message',
+            message: e.target.value,
+          });
+        }}
+      />
+      <br />
+      <button
+        onClick={() => {
+          alert(`Sending "${message}" to ${contact.email}`);
+          dispatch({
+            type: 'sent_message',
+          });
+        }}>
+        Send to {contact.email}
+      </button>
+    </section>
+  );
+}
+```
+
+```css
+.chat,
+.contact-list {
+  float: left;
+  margin-bottom: 20px;
+}
+ul,
+li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+li button {
+  width: 100px;
+  padding: 10px;
+  margin-right: 10px;
+}
+textarea {
+  height: 150px;
+}
+```
+
+</Sandpack>
+
+The resulting behavior is the same. But keep in mind that action types should ideally describe "what the user did" rather than "how you want the state to change". This makes it easier to later add more features.
+
+With either solution, it's important that you **don't** place the `alert` inside a reducer. The reducer should be a pure function--it should only calculate the next state. It should not "do" anything, including displaying messages to the user. That should happen in the event handler. (To help catch mistakes like this, React will call your reducers multiple times in Strict Mode. This is why, if you put an alert in a reducer, it fires twice.)
+
+</Solution>
+
+#### Restore input values when switching between tabs {/*restore-input-values-when-switching-between-tabs*/}
+
+In this example, switching between different recipients always clears the text input:
+
+```js
+case 'changed_selection': {
+  return {
+    ...state,
+    selectedId: action.contactId,
+    message: '' // Clears the input
+  };
+```
+
+This is because you don't want to share a single message draft between several recipients. But it would be better if your app "remembered" a draft for each contact separately, restoring them when you switch contacts.
+
+Your task is to change the way the state is structured so that you remember a separate message draft _per contact_. You would need to make a few changes to the reducer, the initial state, and the components.
+
+<Hint>
+
+You can structure your state like this:
+
+```js
+export const initialState = {
+  selectedId: 0,
+  messages: {
+    0: 'Hello, Taylor', // Draft for contactId = 0
+    1: 'Hello, Alice', // Draft for contactId = 1
+  },
+};
+```
+
+The `[key]: value` [computed property](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#computed_property_names) syntax can help you update the `messages` object:
+
+```js
+{
+  ...state.messages,
+  [id]: message
+}
+```
+
+</Hint>
+
+<Sandpack>
+
+```js App.js
+import {useReducer} from 'react';
+import Chat from './Chat.js';
+import ContactList from './ContactList.js';
+import {initialState, messengerReducer} from './messengerReducer';
+
+export default function Messenger() {
+  const [state, dispatch] = useReducer(messengerReducer, initialState);
+  const message = state.message;
+  const contact = contacts.find((c) => c.id === state.selectedId);
+  return (
+    <div>
+      <ContactList
+        contacts={contacts}
+        selectedId={state.selectedId}
+        dispatch={dispatch}
+      />
+      <Chat
+        key={contact.id}
+        message={message}
+        contact={contact}
+        dispatch={dispatch}
+      />
+    </div>
+  );
+}
+
+const contacts = [
+  {id: 0, name: 'Taylor', email: 'taylor@mail.com'},
+  {id: 1, name: 'Alice', email: 'alice@mail.com'},
+  {id: 2, name: 'Bob', email: 'bob@mail.com'},
+];
+```
+
+```js messengerReducer.js
+export const initialState = {
+  selectedId: 0,
+  message: 'Hello',
+};
+
+export function messengerReducer(state, action) {
+  switch (action.type) {
+    case 'changed_selection': {
+      return {
+        ...state,
+        selectedId: action.contactId,
+        message: '',
+      };
+    }
+    case 'edited_message': {
+      return {
+        ...state,
+        message: action.message,
+      };
+    }
+    case 'sent_message': {
+      return {
+        ...state,
+        message: '',
+      };
+    }
+    default: {
+      throw Error('Unknown action: ' + action.type);
+    }
+  }
+}
+```
+
+```js ContactList.js
+export default function ContactList({contacts, selectedId, dispatch}) {
+  return (
+    <section className="contact-list">
+      <ul>
+        {contacts.map((contact) => (
+          <li key={contact.id}>
+            <button
+              onClick={() => {
+                dispatch({
+                  type: 'changed_selection',
+                  contactId: contact.id,
+                });
+              }}>
+              {selectedId === contact.id ? <b>{contact.name}</b> : contact.name}
+            </button>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}
+```
+
+```js Chat.js
+import {useState} from 'react';
+
+export default function Chat({contact, message, dispatch}) {
+  return (
+    <section className="chat">
+      <textarea
+        value={message}
+        placeholder={'Chat to ' + contact.name}
+        onChange={(e) => {
+          dispatch({
+            type: 'edited_message',
+            message: e.target.value,
+          });
+        }}
+      />
+      <br />
+      <button
+        onClick={() => {
+          alert(`Sending "${message}" to ${contact.email}`);
+          dispatch({
+            type: 'sent_message',
+          });
+        }}>
+        Send to {contact.email}
+      </button>
+    </section>
+  );
+}
+```
+
+```css
+.chat,
+.contact-list {
+  float: left;
+  margin-bottom: 20px;
+}
+ul,
+li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+li button {
+  width: 100px;
+  padding: 10px;
+  margin-right: 10px;
+}
+textarea {
+  height: 150px;
+}
+```
+
+</Sandpack>
+
+<Solution>
+
+You'll need to update the reducer to store and update a separate message draft per contact:
+
+```js
+// When the input is edited
+case 'edited_message': {
+  return {
+    // Keep other state like selection
+    ...state,
+    messages: {
+      // Keep messages for other contacts
+      ...state.messages,
+      // But change the selected contact's message
+      [state.selectedId]: action.message
+    }
+  };
+}
+```
+
+You would also update the `Messenger` component to read the message for the currently selected contact:
+
+```js
+const message = state.messages[state.selectedId];
+```
+
+Here is the complete solution:
+
+<Sandpack>
+
+```js App.js
+import {useReducer} from 'react';
+import Chat from './Chat.js';
+import ContactList from './ContactList.js';
+import {initialState, messengerReducer} from './messengerReducer';
+
+export default function Messenger() {
+  const [state, dispatch] = useReducer(messengerReducer, initialState);
+  const message = state.messages[state.selectedId];
+  const contact = contacts.find((c) => c.id === state.selectedId);
+  return (
+    <div>
+      <ContactList
+        contacts={contacts}
+        selectedId={state.selectedId}
+        dispatch={dispatch}
+      />
+      <Chat
+        key={contact.id}
+        message={message}
+        contact={contact}
+        dispatch={dispatch}
+      />
+    </div>
+  );
+}
+
+const contacts = [
+  {id: 0, name: 'Taylor', email: 'taylor@mail.com'},
+  {id: 1, name: 'Alice', email: 'alice@mail.com'},
+  {id: 2, name: 'Bob', email: 'bob@mail.com'},
+];
+```
+
+```js messengerReducer.js
+export const initialState = {
+  selectedId: 0,
+  messages: {
+    0: 'Hello, Taylor',
+    1: 'Hello, Alice',
+    2: 'Hello, Bob',
+  },
+};
+
+export function messengerReducer(state, action) {
+  switch (action.type) {
+    case 'changed_selection': {
+      return {
+        ...state,
+        selectedId: action.contactId,
+      };
+    }
+    case 'edited_message': {
+      return {
+        ...state,
+        messages: {
+          ...state.messages,
+          [state.selectedId]: action.message,
+        },
+      };
+    }
+    case 'sent_message': {
+      return {
+        ...state,
+        messages: {
+          ...state.messages,
+          [state.selectedId]: '',
+        },
+      };
+    }
+    default: {
+      throw Error('Unknown action: ' + action.type);
+    }
+  }
+}
+```
+
+```js ContactList.js
+export default function ContactList({contacts, selectedId, dispatch}) {
+  return (
+    <section className="contact-list">
+      <ul>
+        {contacts.map((contact) => (
+          <li key={contact.id}>
+            <button
+              onClick={() => {
+                dispatch({
+                  type: 'changed_selection',
+                  contactId: contact.id,
+                });
+              }}>
+              {selectedId === contact.id ? <b>{contact.name}</b> : contact.name}
+            </button>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}
+```
+
+```js Chat.js
+import {useState} from 'react';
+
+export default function Chat({contact, message, dispatch}) {
+  return (
+    <section className="chat">
+      <textarea
+        value={message}
+        placeholder={'Chat to ' + contact.name}
+        onChange={(e) => {
+          dispatch({
+            type: 'edited_message',
+            message: e.target.value,
+          });
+        }}
+      />
+      <br />
+      <button
+        onClick={() => {
+          alert(`Sending "${message}" to ${contact.email}`);
+          dispatch({
+            type: 'sent_message',
+          });
+        }}>
+        Send to {contact.email}
+      </button>
+    </section>
+  );
+}
+```
+
+```css
+.chat,
+.contact-list {
+  float: left;
+  margin-bottom: 20px;
+}
+ul,
+li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+li button {
+  width: 100px;
+  padding: 10px;
+  margin-right: 10px;
+}
+textarea {
+  height: 150px;
+}
+```
+
+</Sandpack>
+
+Notably, you didn't need to change any of the event handlers to implement this different behavior. Without a reducer, you would have to change every event handler that updates the state.
+
+</Solution>
+
+#### Implement `useReducer` from scratch {/*implement-usereducer-from-scratch*/}
+
+In the earlier examples, you imported the `useReducer` Hook from React. This time, you will implement _the `useReducer` Hook itself!_ Here is a stub to get you started. It shouldn't take more than 10 lines of code.
+
+To test your changes, try typing into the input or select a contact.
+
+<Hint>
+
+Here is a more detailed sketch of the implementation:
+
+```js
+export function useReducer(reducer, initialState) {
+  const [state, setState] = useState(initialState);
+
+  function dispatch(action) {
+    // ???
+  }
+
+  return [state, dispatch];
+}
+```
+
+Recall that a reducer function takes two arguments--the current state and the action object--and it returns the next state. What should your `dispatch` implementation do with it?
+
+</Hint>
+
+<Sandpack>
+
+```js App.js
+import {useReducer} from './MyReact.js';
+import Chat from './Chat.js';
+import ContactList from './ContactList.js';
+import {initialState, messengerReducer} from './messengerReducer';
+
+export default function Messenger() {
+  const [state, dispatch] = useReducer(messengerReducer, initialState);
+  const message = state.messages[state.selectedId];
+  const contact = contacts.find((c) => c.id === state.selectedId);
+  return (
+    <div>
+      <ContactList
+        contacts={contacts}
+        selectedId={state.selectedId}
+        dispatch={dispatch}
+      />
+      <Chat
+        key={contact.id}
+        message={message}
+        contact={contact}
+        dispatch={dispatch}
+      />
+    </div>
+  );
+}
+
+const contacts = [
+  {id: 0, name: 'Taylor', email: 'taylor@mail.com'},
+  {id: 1, name: 'Alice', email: 'alice@mail.com'},
+  {id: 2, name: 'Bob', email: 'bob@mail.com'},
+];
+```
+
+```js messengerReducer.js
+export const initialState = {
+  selectedId: 0,
+  messages: {
+    0: 'Hello, Taylor',
+    1: 'Hello, Alice',
+    2: 'Hello, Bob',
+  },
+};
+
+export function messengerReducer(state, action) {
+  switch (action.type) {
+    case 'changed_selection': {
+      return {
+        ...state,
+        selectedId: action.contactId,
+      };
+    }
+    case 'edited_message': {
+      return {
+        ...state,
+        messages: {
+          ...state.messages,
+          [state.selectedId]: action.message,
+        },
+      };
+    }
+    case 'sent_message': {
+      return {
+        ...state,
+        messages: {
+          ...state.messages,
+          [state.selectedId]: '',
+        },
+      };
+    }
+    default: {
+      throw Error('Unknown action: ' + action.type);
+    }
+  }
+}
+```
+
+```js MyReact.js active
+import {useState} from 'react';
+
+export function useReducer(reducer, initialState) {
+  const [state, setState] = useState(initialState);
+
+  // ???
+
+  return [state, dispatch];
+}
+```
+
+```js ContactList.js hidden
+export default function ContactList({contacts, selectedId, dispatch}) {
+  return (
+    <section className="contact-list">
+      <ul>
+        {contacts.map((contact) => (
+          <li key={contact.id}>
+            <button
+              onClick={() => {
+                dispatch({
+                  type: 'changed_selection',
+                  contactId: contact.id,
+                });
+              }}>
+              {selectedId === contact.id ? <b>{contact.name}</b> : contact.name}
+            </button>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}
+```
+
+```js Chat.js hidden
+import {useState} from 'react';
+
+export default function Chat({contact, message, dispatch}) {
+  return (
+    <section className="chat">
+      <textarea
+        value={message}
+        placeholder={'Chat to ' + contact.name}
+        onChange={(e) => {
+          dispatch({
+            type: 'edited_message',
+            message: e.target.value,
+          });
+        }}
+      />
+      <br />
+      <button
+        onClick={() => {
+          alert(`Sending "${message}" to ${contact.email}`);
+          dispatch({
+            type: 'sent_message',
+          });
+        }}>
+        Send to {contact.email}
+      </button>
+    </section>
+  );
+}
+```
+
+```css
+.chat,
+.contact-list {
+  float: left;
+  margin-bottom: 20px;
+}
+ul,
+li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+li button {
+  width: 100px;
+  padding: 10px;
+  margin-right: 10px;
+}
+textarea {
+  height: 150px;
+}
+```
+
+</Sandpack>
+
+<Solution>
+
+Dispatching an action calls a reducer with the current state and the action, and stores the result as the next state. This is what it looks like in code:
+
+<Sandpack>
+
+```js App.js
+import {useReducer} from './MyReact.js';
+import Chat from './Chat.js';
+import ContactList from './ContactList.js';
+import {initialState, messengerReducer} from './messengerReducer';
+
+export default function Messenger() {
+  const [state, dispatch] = useReducer(messengerReducer, initialState);
+  const message = state.messages[state.selectedId];
+  const contact = contacts.find((c) => c.id === state.selectedId);
+  return (
+    <div>
+      <ContactList
+        contacts={contacts}
+        selectedId={state.selectedId}
+        dispatch={dispatch}
+      />
+      <Chat
+        key={contact.id}
+        message={message}
+        contact={contact}
+        dispatch={dispatch}
+      />
+    </div>
+  );
+}
+
+const contacts = [
+  {id: 0, name: 'Taylor', email: 'taylor@mail.com'},
+  {id: 1, name: 'Alice', email: 'alice@mail.com'},
+  {id: 2, name: 'Bob', email: 'bob@mail.com'},
+];
+```
+
+```js messengerReducer.js
+export const initialState = {
+  selectedId: 0,
+  messages: {
+    0: 'Hello, Taylor',
+    1: 'Hello, Alice',
+    2: 'Hello, Bob',
+  },
+};
+
+export function messengerReducer(state, action) {
+  switch (action.type) {
+    case 'changed_selection': {
+      return {
+        ...state,
+        selectedId: action.contactId,
+      };
+    }
+    case 'edited_message': {
+      return {
+        ...state,
+        messages: {
+          ...state.messages,
+          [state.selectedId]: action.message,
+        },
+      };
+    }
+    case 'sent_message': {
+      return {
+        ...state,
+        messages: {
+          ...state.messages,
+          [state.selectedId]: '',
+        },
+      };
+    }
+    default: {
+      throw Error('Unknown action: ' + action.type);
+    }
+  }
+}
+```
+
+```js MyReact.js active
+import {useState} from 'react';
+
+export function useReducer(reducer, initialState) {
+  const [state, setState] = useState(initialState);
+
+  function dispatch(action) {
+    const nextState = reducer(state, action);
+    setState(nextState);
+  }
+
+  return [state, dispatch];
+}
+```
+
+```js ContactList.js hidden
+export default function ContactList({contacts, selectedId, dispatch}) {
+  return (
+    <section className="contact-list">
+      <ul>
+        {contacts.map((contact) => (
+          <li key={contact.id}>
+            <button
+              onClick={() => {
+                dispatch({
+                  type: 'changed_selection',
+                  contactId: contact.id,
+                });
+              }}>
+              {selectedId === contact.id ? <b>{contact.name}</b> : contact.name}
+            </button>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}
+```
+
+```js Chat.js hidden
+import {useState} from 'react';
+
+export default function Chat({contact, message, dispatch}) {
+  return (
+    <section className="chat">
+      <textarea
+        value={message}
+        placeholder={'Chat to ' + contact.name}
+        onChange={(e) => {
+          dispatch({
+            type: 'edited_message',
+            message: e.target.value,
+          });
+        }}
+      />
+      <br />
+      <button
+        onClick={() => {
+          alert(`Sending "${message}" to ${contact.email}`);
+          dispatch({
+            type: 'sent_message',
+          });
+        }}>
+        Send to {contact.email}
+      </button>
+    </section>
+  );
+}
+```
+
+```css
+.chat,
+.contact-list {
+  float: left;
+  margin-bottom: 20px;
+}
+ul,
+li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+li button {
+  width: 100px;
+  padding: 10px;
+  margin-right: 10px;
+}
+textarea {
+  height: 150px;
+}
+```
+
+</Sandpack>
+
+Though it doesn't matter in most cases, a slightly more accurate implementation looks like this:
+
+```js
+function dispatch(action) {
+  setState((s) => reducer(s, action));
+}
+```
+
+This is because the dispatched actions are queued until the next render, [similar to the updater functions.](/learn/queueing-a-series-of-state-updates)
+
+</Solution>
+
+</Challenges>
diff --git a/beta/src/content/learn/importing-and-exporting-components.md b/beta/src/content/learn/importing-and-exporting-components.md
new file mode 100644
index 000000000..5aedc2dff
--- /dev/null
+++ b/beta/src/content/learn/importing-and-exporting-components.md
@@ -0,0 +1,418 @@
+---
+title: Importing and Exporting Components
+---
+
+<Intro>
+
+The magic of components lies in their reusability: you can create components that are composed of other components. But as you nest more and more components, it often makes sense to start splitting them into different files. This lets you keep your files easy to scan and reuse components in more places.
+
+</Intro>
+
+<YouWillLearn>
+
+* What a root component file is
+* How to import and export a component
+* When to use default and named imports and exports
+* How to import and export multiple components from one file
+* How to split components into multiple files
+
+</YouWillLearn>
+
+## The root component file {/*the-root-component-file*/}
+
+In [Your First Component](/learn/your-first-component), you made a `Profile` component and a `Gallery` component that renders it:
+
+<Sandpack>
+
+```js
+function Profile() {
+  return (
+    <img
+      src="https://i.imgur.com/MK3eW3As.jpg"
+      alt="Katherine Johnson"
+    />
+  );
+}
+
+export default function Gallery() {
+  return (
+    <section>
+      <h1>Amazing scientists</h1>
+      <Profile />
+      <Profile />
+      <Profile />
+    </section>
+  );
+}
+```
+
+```css
+img { margin: 0 10px 10px 0; height: 90px; }
+```
+
+</Sandpack>
+
+These currently live in a **root component file,** named `App.js` in this example. In [Create React App](https://create-react-app.dev/), your app lives in `src/App.js`. Depending on your setup, your root component could be in another file, though. If you use a framework with file-based routing, such as Next.js, your root component will be different for every page.
+
+## Exporting and importing a component {/*exporting-and-importing-a-component*/}
+
+What if you want to change the landing screen in the future and put a list of science books there? Or place all the profiles somewhere else? It makes sense to move `Gallery` and `Profile` out of the root component file. This will make them more modular and reusable in other files. You can move a component in three steps:
+
+1. **Make** a new JS file to put the components in.
+2. **Export** your function component from that file (using either [default](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_the_default_export) or [named](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_named_exports) exports).
+3. **Import** it in the file where you’ll use the component (using the corresponding technique for importing [default](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#importing_defaults) or [named](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#import_a_single_export_from_a_module) exports).
+
+Here both `Profile` and `Gallery` have been moved out of `App.js` into a new file called `Gallery.js`. Now you can change `App.js` to import `Gallery` from `Gallery.js`:
+
+<Sandpack>
+
+```js App.js
+import Gallery from './Gallery.js';
+
+export default function App() {
+  return (
+    <Gallery />
+  );
+}
+```
+
+```js Gallery.js
+function Profile() {
+  return (
+    <img
+      src="https://i.imgur.com/QIrZWGIs.jpg"
+      alt="Alan L. Hart"
+    />
+  );
+}
+
+export default function Gallery() {
+  return (
+    <section>
+      <h1>Amazing scientists</h1>
+      <Profile />
+      <Profile />
+      <Profile />
+    </section>
+  );
+}
+```
+
+```css
+img { margin: 0 10px 10px 0; height: 90px; }
+```
+
+</Sandpack>
+
+Notice how this example is broken down into two component files now:
+
+1. `Gallery.js`:
+     - Defines the `Profile` component which is only used within the same file and is not exported.
+     - Exports the `Gallery` component as a **default export.**
+2. `App.js`:
+     - Imports `Gallery` as a **default import** from `Gallery.js`.
+     - Exports the root `App` component as a **default export.**
+
+
+<Note>
+
+You may encounter files that leave off the `.js` file extension like so:
+
+```js 
+import Gallery from './Gallery';
+```
+
+Either `'./Gallery.js'` or `'./Gallery'` will work with React, though the former is closer to how [native ES Modules](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules) work.
+
+</Note>
+
+<DeepDive>
+
+#### Default vs named exports {/*default-vs-named-exports*/}
+
+There are two primary ways to export values with JavaScript: default exports and named exports. So far, our examples have only used default exports. But you can use one or both of them in the same file. **A file can have no more than one _default_ export, but it can have as many _named_ exports as you like.**
+
+![Default and named exports](/images/docs/illustrations/i_import-export.svg)
+
+How you export your component dictates how you must import it. You will get an error if you try to import a default export the same way you would a named export! This chart can help you keep track:
+
+| Syntax           | Export statement                           | Import statement                          |
+| -----------      | -----------                                | -----------                               |
+| Default  | `export default function Button() {}` | `import Button from './button.js';`     |
+| Named    | `export function Button() {}`         | `import { Button } from './button.js';` |
+
+When you write a _default_ import, you can put any name you want after `import`. For example, you could write `import Banana from './button.js'` instead and it would still provide you with the same default export. In contrast, with named imports, the name has to match on both sides. That's why they are called _named_ imports!
+
+**People often use default exports if the file exports only one component, and use named exports if it exports multiple components and values.** Regardless of which coding style you prefer, always give meaningful names to your component functions and the files that contain them. Components without names, like `export default () => {}`, are discouraged because they make debugging harder.
+
+</DeepDive>
+
+## Exporting and importing multiple components from the same file {/*exporting-and-importing-multiple-components-from-the-same-file*/}
+
+What if you want to show just one `Profile` instead of a gallery? You can export the `Profile` component, too. But `Gallery.js` already has a *default* export, and you can't have _two_ default exports. You could create a new file with a default export, or you could add a *named* export for `Profile`. **A file can only have one default export, but it can have numerous named exports!**
+
+> To reduce the potential confusion between default and named exports, some teams choose to only stick to one style (default or named), or avoid mixing them in a single file. It's a matter of preference. Do what works best for you!
+
+First, **export** `Profile` from `Gallery.js` using a named export (no `default` keyword):
+
+```js
+export function Profile() {
+  // ...
+}
+```
+
+Then, **import** `Profile` from `Gallery.js` to `App.js` using a named import (with the curly braces):
+
+```js
+import { Profile } from './Gallery.js';
+```
+
+Finally, **render** `<Profile />` from the `App` component:
+
+```js
+export default function App() {
+  return <Profile />;
+}
+```
+
+Now `Gallery.js` contains two exports: a default `Gallery` export, and a named `Profile` export. `App.js` imports both of them. Try editing `<Profile />` to `<Gallery />` and back in this example:
+
+<Sandpack>
+
+```js App.js
+import Gallery from './Gallery.js';
+import { Profile } from './Gallery.js';
+
+export default function App() {
+  return (
+    <Profile />
+  );
+}
+```
+
+```js Gallery.js
+export function Profile() {
+  return (
+    <img
+      src="https://i.imgur.com/QIrZWGIs.jpg"
+      alt="Alan L. Hart"
+    />
+  );
+}
+
+export default function Gallery() {
+  return (
+    <section>
+      <h1>Amazing scientists</h1>
+      <Profile />
+      <Profile />
+      <Profile />
+    </section>
+  );
+}
+```
+
+```css
+img { margin: 0 10px 10px 0; height: 90px; }
+```
+
+</Sandpack>
+
+Now you're using a mix of default and named exports:
+
+* `Gallery.js`:
+  - Exports the `Profile` component as a **named export called `Profile`.**
+  - Exports the `Gallery` component as a **default export.**
+* `App.js`:
+  - Imports `Profile` as a **named import called `Profile`** from `Gallery.js`.
+  - Imports `Gallery` as a **default import** from `Gallery.js`.
+  - Exports the root `App` component as a **default export.**
+
+<Recap>
+
+On this page you learned:
+
+* What a root component file is
+* How to import and export a component
+* When and how to use default and named imports and exports
+* How to export multiple components from the same file
+
+</Recap>
+
+
+
+<Challenges>
+
+#### Split the components further {/*split-the-components-further*/}
+
+Currently, `Gallery.js` exports both `Profile` and `Gallery`, which is a bit confusing.
+
+Move the `Profile` component to its own `Profile.js`, and then change the `App` component to render both `<Profile />` and `<Gallery />` one after another.
+
+You may use either a default or a named export for `Profile`, but make sure that you use the corresponding import syntax in both `App.js` and `Gallery.js`! You can refer to the table from the deep dive above:
+
+| Syntax           | Export statement                           | Import statement                          |
+| -----------      | -----------                                | -----------                               |
+| Default  | `export default function Button() {}` | `import Button from './button.js';`     |
+| Named    | `export function Button() {}`         | `import { Button } from './button.js';` |
+
+<Hint>
+
+Don't forget to import your components where they are called. Doesn't `Gallery` use `Profile`, too?
+
+</Hint>
+
+<Sandpack>
+
+```js App.js
+import Gallery from './Gallery.js';
+import { Profile } from './Gallery.js';
+
+export default function App() {
+  return (
+    <div>
+      <Profile />
+    </div>
+  );
+}
+```
+
+```js Gallery.js active
+// Move me to Profile.js!
+export function Profile() {
+  return (
+    <img
+      src="https://i.imgur.com/QIrZWGIs.jpg"
+      alt="Alan L. Hart"
+    />
+  );
+}
+
+export default function Gallery() {
+  return (
+    <section>
+      <h1>Amazing scientists</h1>
+      <Profile />
+      <Profile />
+      <Profile />
+    </section>
+  );
+}
+```
+
+```js Profile.js
+```
+
+```css
+img { margin: 0 10px 10px 0; height: 90px; }
+```
+
+</Sandpack>
+
+After you get it working with one kind of exports, make it work with the other kind.
+
+<Solution>
+
+This is the solution with named exports:
+
+<Sandpack>
+
+```js App.js
+import Gallery from './Gallery.js';
+import { Profile } from './Profile.js';
+
+export default function App() {
+  return (
+    <div>
+      <Profile />
+      <Gallery />
+    </div>
+  );
+}
+```
+
+```js Gallery.js
+import { Profile } from './Profile.js';
+
+export default function Gallery() {
+  return (
+    <section>
+      <h1>Amazing scientists</h1>
+      <Profile />
+      <Profile />
+      <Profile />
+    </section>
+  );
+}
+```
+
+```js Profile.js
+export function Profile() {
+  return (
+    <img
+      src="https://i.imgur.com/QIrZWGIs.jpg"
+      alt="Alan L. Hart"
+    />
+  );
+}
+```
+
+```css
+img { margin: 0 10px 10px 0; height: 90px; }
+```
+
+</Sandpack>
+
+This is the solution with default exports:
+
+<Sandpack>
+
+```js App.js
+import Gallery from './Gallery.js';
+import Profile from './Profile.js';
+
+export default function App() {
+  return (
+    <div>
+      <Profile />
+      <Gallery />
+    </div>
+  );
+}
+```
+
+```js Gallery.js
+import Profile from './Profile.js';
+
+export default function Gallery() {
+  return (
+    <section>
+      <h1>Amazing scientists</h1>
+      <Profile />
+      <Profile />
+      <Profile />
+    </section>
+  );
+}
+```
+
+```js Profile.js
+export default function Profile() {
+  return (
+    <img
+      src="https://i.imgur.com/QIrZWGIs.jpg"
+      alt="Alan L. Hart"
+    />
+  );
+}
+```
+
+```css
+img { margin: 0 10px 10px 0; height: 90px; }
+```
+
+</Sandpack>
+
+</Solution>
+
+</Challenges>
diff --git a/beta/src/content/learn/index.md b/beta/src/content/learn/index.md
new file mode 100644
index 000000000..720b7c08e
--- /dev/null
+++ b/beta/src/content/learn/index.md
@@ -0,0 +1,539 @@
+---
+title: Quick Start
+---
+
+<Intro>
+
+Welcome to the React documentation! This page will give you an introduction to the 80% of React concepts that you will use on a daily basis.
+
+</Intro>
+
+<YouWillLearn>
+
+- How to create and nest components
+- How to add markup and styles
+- How to display data
+- How to render conditions and lists
+- How to respond to events and update the screen
+- How to share data between components
+
+</YouWillLearn>
+
+## Creating and nesting components {/*components*/}
+
+React apps are made out of *components*. A component is a piece of the UI (user interface) that has its own logic and appearance. A component can be as small as a button, or as large as an entire page.
+
+React components are JavaScript functions that return markup:
+
+```js
+function MyButton() {
+  return (
+    <button>I'm a button</button>
+  );
+}
+```
+
+Now that you've declared `MyButton`, you can nest it into another component:
+
+```js {5}
+export default function MyApp() {
+  return (
+    <div>
+      <h1>Welcome to my app</h1>
+      <MyButton />
+    </div>
+  );
+}
+```
+
+Notice that `<MyButton />` starts with a capital letter. That's how you know it's a React component. React component names must always start with a capital letter, while HTML tags must be lowercase.
+
+Have a look at the result:
+
+<Sandpack>
+
+```js
+function MyButton() {
+  return (
+    <button>
+      I'm a button
+    </button>
+  );
+}
+
+export default function MyApp() {
+  return (
+    <div>
+      <h1>Welcome to my app</h1>
+      <MyButton />
+    </div>
+  );
+}
+```
+
+</Sandpack>
+
+The `export default` keywords specify the main component in the file. If you're not familiar with some piece of JavaScript syntax, [MDN](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export) and [javascript.info](https://javascript.info/import-export) have great references.
+
+## Writing markup with JSX {/*writing-markup-with-jsx*/}
+
+The markup syntax you've seen above is called *JSX*. It is optional, but most React projects use JSX for its convenience. All of the [tools we recommend for local development](/learn/installation) support JSX out of the box.
+
+JSX is stricter than HTML. You have to close tags like `<br />`. Your component also can't return multiple JSX tags. You have to wrap them into a shared parent, like a `<div>...</div>` or an empty `<>...</>` wrapper:
+
+```js {3,6}
+function AboutPage() {
+  return (
+    <>
+      <h1>About</h1>
+      <p>Hello there.<br />How do you do?</p>
+    </>
+  );
+}
+```
+
+If you have a lot of HTML to port to JSX, you can use an [online converter.](https://transform.tools/html-to-jsx)
+
+## Adding styles {/*adding-styles*/}
+
+In React, you specify a CSS class with `className`. It works the same way as the HTML [`class`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) attribute:
+
+```js
+<img className="avatar" />
+```
+
+Then you write the CSS rules for it in a separate CSS file:
+
+```css
+/* In your CSS */
+.avatar {
+  border-radius: 50%;
+}
+```
+
+React does not prescribe how you add CSS files. In the simplest case, you'll add a [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) tag to your HTML. If you use a build tool or a framework, consult its documentation to learn how to add a CSS file to your project.
+
+## Displaying data {/*displaying-data*/}
+
+JSX lets you put markup into JavaScript. Curly braces let you "escape back" into JavaScript so that you can embed some variable from your code and display it to the user. For example, this will display `user.name`:
+
+```js {3}
+return (
+  <h1>
+    {user.name}
+  </h1>
+);
+```
+
+You can also "escape into JavaScript" from JSX attributes, but you have to use curly braces *instead of* quotes. For example, `className="avatar"` passes the `"avatar"` string as the CSS class, but `src={user.imageUrl}` reads the JavaScript `user.imageUrl` variable value, and then passes that value as the `src` attribute:
+
+```js {3,4}
+return (
+  <img
+    className="avatar"
+    src={user.imageUrl}
+  />
+);
+```
+
+You can put more complex expressions inside the JSX curly braces too, for example, [string concatenation](https://javascript.info/operators#string-concatenation-with-binary):
+
+<Sandpack>
+
+```js
+const user = {
+  name: 'Hedy Lamarr',
+  imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
+  imageSize: 90,
+};
+
+export default function Profile() {
+  return (
+    <>
+      <h1>{user.name}</h1>
+      <img
+        className="avatar"
+        src={user.imageUrl}
+        alt={'Photo of ' + user.name}
+        style={{
+          width: user.imageSize,
+          height: user.imageSize
+        }}
+      />
+    </>
+  );
+}
+```
+
+```css
+.avatar {
+  border-radius: 50%;
+}
+
+.large {
+  border: 4px solid gold;
+}
+```
+
+</Sandpack>
+
+In the above example, `style={{}}` is not a special syntax, but a regular `{}` object inside the `style={ }` JSX curly braces. You can use the `style` attribute when your styles depend on JavaScript variables.
+
+## Conditional rendering {/*conditional-rendering*/}
+
+In React, there is no special syntax for writing conditions. Instead, you'll use the same techniques as you use when writing regular JavaScript code. For example, you can use an [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) statement to conditionally include JSX:
+
+```js
+let content;
+if (isLoggedIn) {
+  content = <AdminPanel />;
+} else {
+  content = <LoginForm />;
+}
+return (
+  <div>
+    {content}
+  </div>
+);
+```
+
+If you prefer more compact code, you can use the [conditional `?` operator.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) Unlike `if`, it works inside JSX:
+
+```js
+<div>
+  {isLoggedIn ? (
+    <AdminPanel />
+  ) : (
+    <LoginForm />
+  )}
+</div>
+```
+
+When you don't need the `else` branch, you can also use a shorter [logical `&&` syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#short-circuit_evaluation):
+
+```js
+<div>
+  {isLoggedIn && <AdminPanel />}
+</div>
+```
+
+All of these approaches also work for conditionally specifying attributes. If you're unfamiliar with some of this JavaScript syntax, you can start by always using `if...else`.
+
+## Rendering lists {/*rendering-lists*/}
+
+You will rely on JavaScript features like [`for` loop](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for) and the [array `map()` function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) to render lists of components.
+
+For example, let's say you have an array of products:
+
+```js
+const products = [
+  { title: 'Cabbage', id: 1 },
+  { title: 'Garlic', id: 2 },
+  { title: 'Apple', id: 3 },
+];
+```
+
+Inside your component, use the `map()` function to transform an array of products into an array of `<li>` items:
+
+```js
+const listItems = products.map(product =>
+  <li key={product.id}>
+    {product.title}
+  </li>
+);
+
+return (
+  <ul>{listItems}</ul>
+);
+```
+
+Notice how `<li>` has a `key` attribute. For each item in a list, you should pass a string or a number that uniquely identifies that item among its siblings. Usually, a key should be coming from your data, such as a database ID. React will rely on your keys to understand what happened if you later insert, delete, or reorder the items.
+
+<Sandpack>
+
+```js
+const products = [
+  { title: 'Cabbage', isFruit: false, id: 1 },
+  { title: 'Garlic', isFruit: false, id: 2 },
+  { title: 'Apple', isFruit: true, id: 3 },
+];
+
+export default function ShoppingList() {
+  const listItems = products.map(product =>
+    <li
+      key={product.id}
+      style={{
+        color: product.isFruit ? 'magenta' : 'darkgreen'
+      }}
+    >
+      {product.title}
+    </li>
+  );
+
+  return (
+    <ul>{listItems}</ul>
+  );
+}
+```
+
+</Sandpack>
+
+## Responding to events {/*responding-to-events*/}
+
+You can respond to events by declaring *event handler* functions inside your components:
+
+```js {2-4,7}
+function MyButton() {
+  function handleClick() {
+    alert('You clicked me!');
+  }
+
+  return (
+    <button onClick={handleClick}>
+      Click me
+    </button>
+  );
+}
+```
+
+Notice how `onClick={handleClick}` has no parentheses at the end! Do not _call_ the event handler function: you only need to *pass it down*. React will call your event handler when the user clicks the button.
+
+## Updating the screen {/*updating-the-screen*/}
+
+Often, you'll want your component to "remember" some information and display it. For example, maybe you want to count the number of times a button is clicked. To do this, add *state* to your component.
+
+First, import [`useState`](/reference/react/useState) from React:
+
+```js
+import { useState } from 'react';
+```
+
+Now you can declare a *state variable* inside your component:
+
+```js
+function MyButton() {
+  const [count, setCount] = useState(0);
+```
+
+You will get two things from `useState`: the current state (`count`), and the function that lets you update it (`setCount`). You can give them any names, but the convention is to call them like `[something, setSomething]`.
+
+The first time the button is displayed, `count` will be `0` because you passed `0` to `useState()`. When you want to change state, call `setCount()` and pass the new value to it. Clicking this button will increment the counter:
+
+```js {5}
+function MyButton() {
+  const [count, setCount] = useState(0);
+
+  function handleClick() {
+    setCount(count + 1);
+  }
+
+  return (
+    <button onClick={handleClick}>
+      Clicked {count} times
+    </button>
+  );
+}
+```
+
+React will call your component function again. This time, `count` will be `1`. Then it will be `2`. And so on.
+
+If you render the same component multiple times, each will get its own state. Try clicking each button separately:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function MyApp() {
+  return (
+    <div>
+      <h1>Counters that update separately</h1>
+      <MyButton />
+      <MyButton />
+    </div>
+  );
+}
+
+function MyButton() {
+  const [count, setCount] = useState(0);
+
+  function handleClick() {
+    setCount(count + 1);
+  }
+
+  return (
+    <button onClick={handleClick}>
+      Clicked {count} times
+    </button>
+  );
+}
+```
+
+```css
+button {
+  display: block;
+  margin-bottom: 5px;
+}
+```
+
+</Sandpack>
+
+Notice how each button "remembers" its own `count` state and doesn't affect other buttons.
+
+## Using Hooks {/*using-hooks*/}
+
+Functions starting with `use` are called *Hooks*. `useState` is a built-in Hook provided by React. You can find other built-in Hooks in the [React API reference.](/reference/react) You can also write your own Hooks by combining the existing ones.
+
+Hooks are more restrictive than regular functions. You can only call Hooks *at the top level* of your components (or other Hooks). If you want to use `useState` in a condition or a loop, extract a new component and put it there.
+
+## Sharing data between components {/*sharing-data-between-components*/}
+
+In the previous example, each `MyButton` had its own independent `count`, and when each button was clicked, only the `count` for the button clicked changed:
+
+<DiagramGroup>
+
+<Diagram name="sharing_data_child" height={367} width={407} alt="Diagram showing a tree of three components, one parent labeled MyApp and two children labeled MyButton. Both MyButton components contain a count with value zero.">
+
+Initially, each `MyButton`'s `count` state is `0`
+
+</Diagram>
+
+<Diagram name="sharing_data_child_clicked" height={367} width={407} alt="The same diagram as the previous, with the count of the first child MyButton component highlighted indicating a click with the count value incremented to one. The second MyButton component still contains value zero." >
+
+The first `MyButton` updates its `count` to `1`
+
+</Diagram>
+
+</DiagramGroup>
+
+However, often you'll need components to *share data and always update together*.
+
+To make both `MyButton` components display the same `count` and update together, you need to move the state from the individual buttons "upwards" to the closest component containing all of them.
+
+In this example, it is `MyApp`:
+
+<DiagramGroup>
+
+<Diagram name="sharing_data_parent" height={385} width={410} alt="Diagram showing a tree of three components, one parent labeled MyApp and two children labeled MyButton. MyApp contains a count value of zero which is passed down to both of the MyButton components, which also show value zero." >
+
+Initially, `MyApp`'s `count` state is `0` and is passed down to both children
+
+</Diagram>
+
+<Diagram name="sharing_data_parent_clicked" height={385} width={410} alt="The same diagram as the previous, with the count of the parent MyApp component highlighted indicating a click with the value incremented to one. The flow to both of the children MyButton components is also highlighted, and the count value in each child is set to one indicating the value was passed down." >
+
+On click, `MyApp` updates its `count` state to `1` and passes it down to both children
+
+</Diagram>
+
+</DiagramGroup>
+
+Now when you click either button, the `count` in `MyApp` will change, which will change both of the counts in `MyButton`. Here's how you can express this in code.
+
+First, *move the state up* from `MyButton` into `MyApp`:
+
+```js {2-6,18}
+export default function MyApp() {
+  const [count, setCount] = useState(0);
+
+  function handleClick() {
+    setCount(count + 1);
+  }
+
+  return (
+    <div>
+      <h1>Counters that update separately</h1>
+      <MyButton />
+      <MyButton />
+    </div>
+  );
+}
+
+function MyButton() {
+  // ... we're moving code from here ...
+}
+
+```
+
+Then, *pass the state down* from `MyApp` to each `MyButton`, together with the shared click handler. You can pass information to `MyButton` using the JSX curly braces, just like you previously did with built-in tags like `<img>`:
+
+```js {11-12}
+export default function MyApp() {
+  const [count, setCount] = useState(0);
+
+  function handleClick() {
+    setCount(count + 1);
+  }
+
+  return (
+    <div>
+      <h1>Counters that update together</h1>
+      <MyButton count={count} onClick={handleClick} />
+      <MyButton count={count} onClick={handleClick} />
+    </div>
+  );
+}
+```
+
+The information you pass down like this is called _props_. Now the `MyApp` component contains the `count` state and the `handleClick` event handler, and *passes both of them down as props* to each of the buttons.
+
+Finally, change `MyButton` to *read* the props you have passed from its parent component:
+
+```js {1,3}
+function MyButton({ count, onClick }) {
+  return (
+    <button onClick={onClick}>
+      Clicked {count} times
+    </button>
+  );
+}
+```
+
+When you click the button, the `onClick` handler fires. Each button's `onClick` prop was set to the `handleClick` function inside `MyApp`, so the code inside of it runs. That code calls `setCount(count + 1)`, incrementing the `count` state variable. The new `count` value is passed as a prop to each button, so they all show the new value.
+
+This is called "lifting state up". By moving state up, we've shared it between components.
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function MyApp() {
+  const [count, setCount] = useState(0);
+
+  function handleClick() {
+    setCount(count + 1);
+  }
+
+  return (
+    <div>
+      <h1>Counters that update together</h1>
+      <MyButton count={count} onClick={handleClick} />
+      <MyButton count={count} onClick={handleClick} />
+    </div>
+  );
+}
+
+function MyButton({ count, onClick }) {
+  return (
+    <button onClick={onClick}>
+      Clicked {count} times
+    </button>
+  );
+}
+```
+
+```css
+button {
+  display: block;
+  margin-bottom: 5px;
+}
+```
+
+</Sandpack>
+
+## Next Steps {/*next-steps*/}
+
+By now, you know the basics of how to write React code!
+
+Check out the [Tutorial](/learn/tutorial-tic-tac-toe) to put them into practice and build your first mini-app with React.
diff --git a/beta/src/content/learn/installation.md b/beta/src/content/learn/installation.md
new file mode 100644
index 000000000..6ddc66b56
--- /dev/null
+++ b/beta/src/content/learn/installation.md
@@ -0,0 +1,57 @@
+---
+title: Installation
+---
+
+<Intro>
+
+React has been designed from the start for gradual adoption. You can use as little or as much React as you need. Whether you want to get a taste of React, add some interactivity to an HTML page, or start a complex React-powered app, this section will help you get started.
+
+</Intro>
+
+<YouWillLearn isChapter={true}>
+
+* [How to add React to an HTML page](/learn/add-react-to-a-website)
+* [How to start a standalone React project](/learn/start-a-new-react-project)
+* [How to set up your editor](/learn/editor-setup)
+* [How to install React Developer Tools](/learn/react-developer-tools)
+
+</YouWillLearn>
+
+## Try React {/*try-react*/}
+
+You don't need to install anything to play with React. Try editing this sandbox!
+
+<Sandpack>
+
+```js
+function Greeting({ name }) {
+  return <h1>Hello, {name}</h1>;
+}
+
+export default function App() {
+  return <Greeting name="world" />
+}
+```
+
+</Sandpack>
+
+You can edit it directly or open it in a new tab by pressing the "Fork" button in the upper right corner.
+
+Most pages in the React documentation contain sandboxes like this. Outside of the React documentation, there are many online sandboxes that support React: for example, [CodeSandbox](https://codesandbox.io/s/new), [StackBlitz](https://stackblitz.com/fork/react), or [CodePen.](https://codepen.io/pen?&editors=0010&layout=left&prefill_data_id=3f4569d1-1b11-4bce-bd46-89090eed5ddb)
+
+### Try React locally {/*try-react-locally*/}
+
+To try React locally on your computer, [download this HTML page.](https://raw.githubusercontent.com/reactjs/reactjs.org/main/static/html/single-file-example.html) Open it in your editor and in your browser!
+
+## Add React to a page {/*add-react-to-a-page*/}
+
+If you're working with an existing site and need to add a little bit of React, you can [add React with a script tag.](/learn/add-react-to-a-website)
+
+## Start a React project {/*start-a-react-project*/}
+
+If you're ready to [start a standalone project](/learn/start-a-new-react-project) with React, you can set up a minimal toolchain for a pleasant developer experience. You can also start with a framework that makes a lot of decisions for you out of the box.
+
+## Next steps {/*next-steps*/}
+
+Head to the [Quick Start](/learn) guide for a tour of the most important React concepts you will encounter every day.
+
diff --git a/beta/src/content/learn/javascript-in-jsx-with-curly-braces.md b/beta/src/content/learn/javascript-in-jsx-with-curly-braces.md
new file mode 100644
index 000000000..aafac8022
--- /dev/null
+++ b/beta/src/content/learn/javascript-in-jsx-with-curly-braces.md
@@ -0,0 +1,587 @@
+---
+title: JavaScript in JSX with Curly Braces
+---
+
+<Intro>
+
+JSX lets you write HTML-like markup inside a JavaScript file, keeping rendering logic and content in the same place. Sometimes you will want to add a little JavaScript logic or reference a dynamic property inside that markup. In this situation, you can use curly braces in your JSX to open a window to JavaScript.
+
+</Intro>
+
+<YouWillLearn>
+
+* How to pass strings with quotes
+* How to reference a JavaScript variable inside JSX with curly braces
+* How to call a JavaScript function inside JSX with curly braces
+* How to use a JavaScript object inside JSX with curly braces
+
+</YouWillLearn>
+
+## Passing strings with quotes {/*passing-strings-with-quotes*/}
+
+When you want to pass a string attribute to JSX, you put it in single or double quotes:
+
+<Sandpack>
+
+```js
+export default function Avatar() {
+  return (
+    <img
+      className="avatar"
+      src="https://i.imgur.com/7vQD0fPs.jpg"
+      alt="Gregorio Y. Zara"
+    />
+  );
+}
+```
+
+```css
+.avatar { border-radius: 50%; height: 90px; }
+```
+
+</Sandpack>
+
+Here, `"https://i.imgur.com/7vQD0fPs.jpg"` and `"Gregorio Y. Zara"` are being passed as strings.
+
+But what if you want to dynamically specify the `src` or `alt` text? You could **use a value from JavaScript by replacing `"` and `"` with `{` and `}`**:
+
+<Sandpack>
+
+```js
+export default function Avatar() {
+  const avatar = 'https://i.imgur.com/7vQD0fPs.jpg';
+  const description = 'Gregorio Y. Zara';
+  return (
+    <img
+      className="avatar"
+      src={avatar}
+      alt={description}
+    />
+  );
+}
+```
+
+```css
+.avatar { border-radius: 50%; height: 90px; }
+```
+
+</Sandpack>
+
+Notice the difference between `className="avatar"`, which specifies an `"avatar"` CSS class name that makes the image round, and `src={avatar}` that reads the value of the JavaScript variable called `avatar`. That's because curly braces let you work with JavaScript right there in your markup!
+
+## Using curly braces: A window into the JavaScript world {/*using-curly-braces-a-window-into-the-javascript-world*/}
+
+JSX is a special way of writing JavaScript. That means it’s possible to use JavaScript inside it—with curly braces `{ }`. The example below first declares a name for the scientist, `name`, then embeds it with curly braces inside the `<h1>`:
+
+<Sandpack>
+
+```js
+export default function TodoList() {
+  const name = 'Gregorio Y. Zara';
+  return (
+    <h1>{name}'s To Do List</h1>
+  );
+}
+```
+
+</Sandpack>
+
+Try changing `name`'s value from `'Gregorio Y. Zara'` to `'Hedy Lamarr'`. See how the To Do List title changes?
+
+Any JavaScript expression will work between curly braces, including function calls like `formatDate()`:
+
+<Sandpack>
+
+```js
+const today = new Date();
+
+function formatDate(date) {
+  return new Intl.DateTimeFormat(
+    'en-US',
+    { weekday: 'long' }
+  ).format(date);
+}
+
+export default function TodoList() {
+  return (
+    <h1>To Do List for {formatDate(today)}</h1>
+  );
+}
+```
+
+</Sandpack>
+
+### Where to use curly braces {/*where-to-use-curly-braces*/}
+
+You can only use curly braces in two ways inside JSX:
+
+1. **As text** directly inside a JSX tag: `<h1>{name}'s To Do List</h1>` works, but `<{tag}>Gregorio Y. Zara's To Do List</{tag}>`  will not.
+2. **As attributes** immediately following the `=` sign: `src={avatar}` will read the `avatar` variable, but `src="{avatar}"` will pass the string `"{avatar}"`.
+
+## Using "double curlies": CSS and other objects in JSX {/*using-double-curlies-css-and-other-objects-in-jsx*/}
+
+In addition to strings, numbers, and other JavaScript expressions, you can even pass objects in JSX. Objects are also denoted with curly braces, like `{ name: "Hedy Lamarr", inventions: 5 }`. Therefore, to pass a JS object in JSX, you must wrap the object in another pair of curly braces: `person={{ name: "Hedy Lamarr", inventions: 5 }}`.
+
+You may see this with inline CSS styles in JSX. React does not require you to use inline styles (CSS classes work great for most cases). But when you need an inline style, you pass an object to the `style` attribute:
+
+<Sandpack>
+
+```js
+export default function TodoList() {
+  return (
+    <ul style={{
+      backgroundColor: 'black',
+      color: 'pink'
+    }}>
+      <li>Improve the videophone</li>
+      <li>Prepare aeronautics lectures</li>
+      <li>Work on the alcohol-fuelled engine</li>
+    </ul>
+  );
+}
+```
+
+```css
+body { padding: 0; margin: 0 }
+ul { padding: 20px 20px 20px 40px; margin: 0; }
+```
+
+</Sandpack>
+
+Try changing the values of `backgroundColor` and `color`.
+
+You can really see the JavaScript object inside the curly braces when you write it like this:
+
+```js {2-5}
+<ul style={
+  {
+    backgroundColor: 'black',
+    color: 'pink'
+  }
+}>
+```
+
+The next time you see `{{` and `}}` in JSX, know that it's nothing more than an object inside the JSX curlies!
+
+<Pitfall>
+
+Inline `style` properties are written in camelCase. For example, HTML `<ul style="background-color: black">` would be written as `<ul style={{ backgroundColor: 'black' }}>`  in your component.
+
+</Pitfall>
+
+## More fun with JavaScript objects and curly braces {/*more-fun-with-javascript-objects-and-curly-braces*/}
+
+You can move several expressions into one object, and reference them in your JSX inside curly braces:
+
+<Sandpack>
+
+```js
+const person = {
+  name: 'Gregorio Y. Zara',
+  theme: {
+    backgroundColor: 'black',
+    color: 'pink'
+  }
+};
+
+export default function TodoList() {
+  return (
+    <div style={person.theme}>
+      <h1>{person.name}'s Todos</h1>
+      <img
+        className="avatar"
+        src="https://i.imgur.com/7vQD0fPs.jpg"
+        alt="Gregorio Y. Zara"
+      />
+      <ul>
+        <li>Improve the videophone</li>
+        <li>Prepare aeronautics lectures</li>
+        <li>Work on the alcohol-fuelled engine</li>
+      </ul>
+    </div>
+  );
+}
+```
+
+```css
+body { padding: 0; margin: 0 }
+body > div > div { padding: 20px; }
+.avatar { border-radius: 50%; height: 90px; }
+```
+
+</Sandpack>
+
+In this example, the `person` JavaScript object contains a `name` string and a `theme` object:
+
+```js
+const person = {
+  name: 'Gregorio Y. Zara',
+  theme: {
+    backgroundColor: 'black',
+    color: 'pink'
+  }
+};
+```
+
+The component can use these values from `person` like so:
+
+```js
+<div style={person.theme}>
+  <h1>{person.name}'s Todos</h1>
+```
+
+JSX is very minimal as a templating language because it lets you organize data and logic using JavaScript.
+
+<Recap>
+
+Now you know almost everything about JSX:
+
+* JSX attributes inside quotes are passed as strings.
+* Curly braces let you bring JavaScript logic and variables into your markup.
+* They work inside the JSX tag content or immediately after `=` in attributes.
+* `{{` and `}}` is not special syntax: it's a JavaScript object tucked inside JSX curly braces.
+
+</Recap>
+
+<Challenges>
+
+#### Fix the mistake {/*fix-the-mistake*/}
+
+This code crashes with an error saying `Objects are not valid as a React child`:
+
+<Sandpack>
+
+```js
+const person = {
+  name: 'Gregorio Y. Zara',
+  theme: {
+    backgroundColor: 'black',
+    color: 'pink'
+  }
+};
+
+export default function TodoList() {
+  return (
+    <div style={person.theme}>
+      <h1>{person}'s Todos</h1>
+      <img
+        className="avatar"
+        src="https://i.imgur.com/7vQD0fPs.jpg"
+        alt="Gregorio Y. Zara"
+      />
+      <ul>
+        <li>Improve the videophone</li>
+        <li>Prepare aeronautics lectures</li>
+        <li>Work on the alcohol-fuelled engine</li>
+      </ul>
+    </div>
+  );
+}
+```
+
+```css
+body { padding: 0; margin: 0 }
+body > div > div { padding: 20px; }
+.avatar { border-radius: 50%; height: 90px; }
+```
+
+</Sandpack>
+
+Can you find the problem?
+
+<Hint>Look for what's inside the curly braces. Are we putting the right thing there?</Hint>
+
+<Solution>
+
+This is happening because this example renders *an object itself* into the markup rather than a string: `<h1>{person}'s Todos</h1>` is trying to render the entire `person` object! Including raw objects as text content throws an error because React doesn't know how you want to display them.
+
+To fix it, replace `<h1>{person}'s Todos</h1>` with `<h1>{person.name}'s Todos</h1>`:
+
+<Sandpack>
+
+```js
+const person = {
+  name: 'Gregorio Y. Zara',
+  theme: {
+    backgroundColor: 'black',
+    color: 'pink'
+  }
+};
+
+export default function TodoList() {
+  return (
+    <div style={person.theme}>
+      <h1>{person.name}'s Todos</h1>
+      <img
+        className="avatar"
+        src="https://i.imgur.com/7vQD0fPs.jpg"
+        alt="Gregorio Y. Zara"
+      />
+      <ul>
+        <li>Improve the videophone</li>
+        <li>Prepare aeronautics lectures</li>
+        <li>Work on the alcohol-fuelled engine</li>
+      </ul>
+    </div>
+  );
+}
+```
+
+```css
+body { padding: 0; margin: 0 }
+body > div > div { padding: 20px; }
+.avatar { border-radius: 50%; height: 90px; }
+```
+
+</Sandpack>
+
+</Solution>
+
+#### Extract information into an object {/*extract-information-into-an-object*/}
+
+Extract the image URL into the `person` object.
+
+<Sandpack>
+
+```js
+const person = {
+  name: 'Gregorio Y. Zara',
+  theme: {
+    backgroundColor: 'black',
+    color: 'pink'
+  }
+};
+
+export default function TodoList() {
+  return (
+    <div style={person.theme}>
+      <h1>{person.name}'s Todos</h1>
+      <img
+        className="avatar"
+        src="https://i.imgur.com/7vQD0fPs.jpg"
+        alt="Gregorio Y. Zara"
+      />
+      <ul>
+        <li>Improve the videophone</li>
+        <li>Prepare aeronautics lectures</li>
+        <li>Work on the alcohol-fuelled engine</li>
+      </ul>
+    </div>
+  );
+}
+```
+
+```css
+body { padding: 0; margin: 0 }
+body > div > div { padding: 20px; }
+.avatar { border-radius: 50%; height: 90px; }
+```
+
+</Sandpack>
+
+<Solution>
+
+Move the image URL into a property called `person.imageUrl` and read it from the `<img>` tag using the curlies:
+
+<Sandpack>
+
+```js
+const person = {
+  name: 'Gregorio Y. Zara',
+  imageUrl: "https://i.imgur.com/7vQD0fPs.jpg",
+  theme: {
+    backgroundColor: 'black',
+    color: 'pink'
+  }
+};
+
+export default function TodoList() {
+  return (
+    <div style={person.theme}>
+      <h1>{person.name}'s Todos</h1>
+      <img
+        className="avatar"
+        src={person.imageUrl}
+        alt="Gregorio Y. Zara"
+      />
+      <ul>
+        <li>Improve the videophone</li>
+        <li>Prepare aeronautics lectures</li>
+        <li>Work on the alcohol-fuelled engine</li>
+      </ul>
+    </div>
+  );
+}
+```
+
+```css
+body { padding: 0; margin: 0 }
+body > div > div { padding: 20px; }
+.avatar { border-radius: 50%; height: 90px; }
+```
+
+</Sandpack>
+
+</Solution>
+
+#### Write an expression inside JSX curly braces {/*write-an-expression-inside-jsx-curly-braces*/}
+
+In the object below, the full image URL is split into four parts: base URL, `imageId`, `imageSize`, and file extension.
+
+We want the image URL to combine these attributes together: base URL (always `'https://i.imgur.com/'`), `imageId` (`'7vQD0fP'`), `imageSize` (`'s'`), and file extension (always `'.jpg'`). However, something is wrong with how the `<img>` tag specifies its `src`.
+
+Can you fix it?
+
+<Sandpack>
+
+```js
+
+const baseUrl = 'https://i.imgur.com/';
+const person = {
+  name: 'Gregorio Y. Zara',
+  imageId: '7vQD0fP',
+  imageSize: 's',
+  theme: {
+    backgroundColor: 'black',
+    color: 'pink'
+  }
+};
+
+export default function TodoList() {
+  return (
+    <div style={person.theme}>
+      <h1>{person.name}'s Todos</h1>
+      <img
+        className="avatar"
+        src="{baseUrl}{person.imageId}{person.imageSize}.jpg"
+        alt={person.name}
+      />
+      <ul>
+        <li>Improve the videophone</li>
+        <li>Prepare aeronautics lectures</li>
+        <li>Work on the alcohol-fuelled engine</li>
+      </ul>
+    </div>
+  );
+}
+```
+
+```css
+body { padding: 0; margin: 0 }
+body > div > div { padding: 20px; }
+.avatar { border-radius: 50%; height: 90px; }
+```
+
+</Sandpack>
+
+To check that your fix worked, try changing the value of `imageSize` to `'b'`. The image should resize after your edit.
+
+<Solution>
+
+You can write it as `src={baseUrl + person.imageId + person.imageSize + '.jpg'}`.
+
+1. `{` opens the JavaScript expression
+2. `baseUrl + person.imageId + person.imageSize + '.jpg'` produces the correct URL string
+3. `}` closes the JavaScript expression
+
+<Sandpack>
+
+```js
+const baseUrl = 'https://i.imgur.com/';
+const person = {
+  name: 'Gregorio Y. Zara',
+  imageId: '7vQD0fP',
+  imageSize: 's',
+  theme: {
+    backgroundColor: 'black',
+    color: 'pink'
+  }
+};
+
+export default function TodoList() {
+  return (
+    <div style={person.theme}>
+      <h1>{person.name}'s Todos</h1>
+      <img
+        className="avatar"
+        src={baseUrl + person.imageId + person.imageSize + '.jpg'}
+        alt={person.name}
+      />
+      <ul>
+        <li>Improve the videophone</li>
+        <li>Prepare aeronautics lectures</li>
+        <li>Work on the alcohol-fuelled engine</li>
+      </ul>
+    </div>
+  );
+}
+```
+
+```css
+body { padding: 0; margin: 0 }
+body > div > div { padding: 20px; }
+.avatar { border-radius: 50%; height: 90px; }
+```
+
+</Sandpack>
+
+You can also move this expression into a separate function like `getImageUrl` below:
+
+<Sandpack>
+
+```js App.js
+import { getImageUrl } from './utils.js'
+
+const person = {
+  name: 'Gregorio Y. Zara',
+  imageId: '7vQD0fP',
+  imageSize: 's',
+  theme: {
+    backgroundColor: 'black',
+    color: 'pink'
+  }
+};
+
+export default function TodoList() {
+  return (
+    <div style={person.theme}>
+      <h1>{person.name}'s Todos</h1>
+      <img
+        className="avatar"
+        src={getImageUrl(person)}
+        alt={person.name}
+      />
+      <ul>
+        <li>Improve the videophone</li>
+        <li>Prepare aeronautics lectures</li>
+        <li>Work on the alcohol-fuelled engine</li>
+      </ul>
+    </div>
+  );
+}
+```
+
+```js utils.js
+export function getImageUrl(person) {
+  return (
+    'https://i.imgur.com/' +
+    person.imageId +
+    person.imageSize +
+    '.jpg'
+  );
+}
+```
+
+```css
+body { padding: 0; margin: 0 }
+body > div > div { padding: 20px; }
+.avatar { border-radius: 50%; height: 90px; }
+```
+
+</Sandpack>
+
+Variables and functions can help you keep the markup simple!
+
+</Solution>
+
+</Challenges>
\ No newline at end of file
diff --git a/beta/src/content/learn/keeping-components-pure.md b/beta/src/content/learn/keeping-components-pure.md
new file mode 100644
index 000000000..60760edc5
--- /dev/null
+++ b/beta/src/content/learn/keeping-components-pure.md
@@ -0,0 +1,864 @@
+---
+title: Keeping Components Pure
+---
+
+<Intro>
+
+Some JavaScript functions are *pure.* Pure functions only perform a calculation and nothing more. By strictly only writing your components as pure functions, you can avoid an entire class of baffling bugs and unpredictable behavior as your codebase grows. To get these benefits, though, there are a few rules you must follow.
+
+</Intro>
+
+<YouWillLearn>
+
+* What purity is and how it helps you avoid bugs
+* How to keep components pure by keeping changes out of the render phase
+* How to use Strict Mode to find mistakes in your components
+
+</YouWillLearn>
+
+## Purity: Components as formulas {/*purity-components-as-formulas*/}
+
+In computer science (and especially the world of functional programming), [a pure function](https://wikipedia.org/wiki/Pure_function) is a function with the following characteristics:
+
+* **It minds its own business.** It does not change any objects or variables that existed before it was called.
+* **Same inputs, same output.** Given the same inputs, a pure function should always return the same result.
+
+You might already be familiar with one example of pure functions: formulas in math.
+
+Consider this math formula: <Math><MathI>y</MathI> = 2<MathI>x</MathI></Math>.
+
+If <Math><MathI>x</MathI> = 2</Math> then <Math><MathI>y</MathI> = 4</Math>. Always. 
+
+If <Math><MathI>x</MathI> = 3</Math> then <Math><MathI>y</MathI> = 6</Math>. Always. 
+
+If <Math><MathI>x</MathI> = 3</Math>, <MathI>y</MathI> won't sometimes be <Math>9</Math> or <Math>–1</Math> or <Math>2.5</Math> depending on the time of day or the state of the stock market. 
+
+If <Math><MathI>y</MathI> = 2<MathI>x</MathI></Math> and <Math><MathI>x</MathI> = 3</Math>, <MathI>y</MathI> will _always_ be <Math>6</Math>. 
+
+If we made this into a JavaScript function, it would look like this:
+
+```js
+function double(number) {
+  return 2 * number;
+}
+```
+
+In the above example, `double` is a **pure function.** If you pass it `3`, it will return `6`. Always.
+
+React is designed around this concept. **React assumes that every component you write is a pure function.** This means that React components you write must always return the same JSX given the same inputs:
+
+<Sandpack>
+
+```js App.js
+function Recipe({ drinkers }) {
+  return (
+    <ol>    
+      <li>Boil {drinkers} cups of water.</li>
+      <li>Add {drinkers} spoons of tea and {0.5 * drinkers} spoons of spice.</li>
+      <li>Add {0.5 * drinkers} cups of milk to boil and sugar to taste.</li>
+    </ol>
+  );
+}
+
+export default function App() {
+  return (
+    <section>
+      <h1>Spiced Chai Recipe</h1>
+      <h2>For two</h2>
+      <Recipe drinkers={2} />
+      <h2>For a gathering</h2>
+      <Recipe drinkers={4} />
+    </section>
+  );
+}
+```
+
+</Sandpack>
+
+When you pass `drinkers={2}` to `Recipe`, it will return JSX containing `2 cups of water`. Always. 
+
+If you pass `drinkers={4}`, it will return JSX containing `4 cups of water`. Always.
+
+Just like a math formula. 
+
+You could think of your components as recipes: if you follow them and don't introduce new ingredients during the cooking process, you will get the same dish every time. That "dish" is the JSX that the component serves to React to [render.](/learn/render-and-commit)
+
+<Illustration src="/images/docs/illustrations/i_puritea-recipe.png" alt="A tea recipe for x people: take x cups of water, add x spoons of tea and 0.5x spoons of spices, and 0.5x cups of milk" />
+
+## Side Effects: (un)intended consequences {/*side-effects-unintended-consequences*/}
+
+React's rendering process must always be pure. Components should only *return* their JSX, and not *change* any objects or variables that existed before rendering—that would make them impure!
+
+Here is a component that breaks this rule:
+
+<Sandpack>
+
+```js
+let guest = 0;
+
+function Cup() {
+  // Bad: changing a preexisting variable!
+  guest = guest + 1;
+  return <h2>Tea cup for guest #{guest}</h2>;
+}
+
+export default function TeaSet() {
+  return (
+    <>
+      <Cup />
+      <Cup />
+      <Cup />
+    </>
+  );
+}
+```
+
+</Sandpack>
+
+This component is reading and writing a `guest` variable declared outside of it. This means that **calling this component multiple times will produce different JSX!** And what's more, if _other_ components read `guest`, they will produce different JSX, too, depending on when they were rendered! That's not predictable.
+
+Going back to our formula <Math><MathI>y</MathI> = 2<MathI>x</MathI></Math>, now even if <Math><MathI>x</MathI> = 2</Math>, we cannot trust that <Math><MathI>y</MathI> = 4</Math>. Our tests could fail, our users would be baffled, planes would fall out of the sky—you can see how this would lead to confusing bugs!
+
+You can fix this component by [passing `guest` as a prop instead](/learn/passing-props-to-a-component):
+
+<Sandpack>
+
+```js
+function Cup({ guest }) {
+  return <h2>Tea cup for guest #{guest}</h2>;
+}
+
+export default function TeaSet() {
+  return (
+    <>
+      <Cup guest={1} />
+      <Cup guest={2} />
+      <Cup guest={3} />
+    </>
+  );
+}
+```
+
+</Sandpack>
+
+Now your component is pure, as the JSX it returns only depends on the `guest` prop.
+
+In general, you should not expect your components to be rendered in any particular order. It doesn't matter if you call <Math><MathI>y</MathI> = 2<MathI>x</MathI></Math> before or after <Math><MathI>y</MathI> = 5<MathI>x</MathI></Math>: both formulas will resolve independently of each other. In the same way, each component should only "think for itself", and not attempt to coordinate with or depend upon others during rendering. Rendering is like a school exam: each component should calculate JSX on their own!
+
+<DeepDive>
+
+#### Detecting impure calculations with StrictMode {/*detecting-impure-calculations-with-strict-mode*/}
+
+Although you might not have used them all yet, in React there are three kinds of inputs that you can read while rendering: [props](/learn/passing-props-to-a-component), [state](/learn/state-a-components-memory), and [context.](/learn/passing-data-deeply-with-context) You should always treat these inputs as read-only.
+
+When you want to *change* something in response to user input, you should [set state](/learn/state-a-components-memory) instead of writing to a variable. You should never change preexisting variables or objects while your component is rendering.
+
+React offers a "Strict Mode" in which it calls each component's function twice during development. **By calling the component functions twice, Strict Mode helps find components that break these rules.**
+
+Notice how the original example displayed "Guest #2", "Guest #4", and "Guest #6" instead of "Guest #1", "Guest #2", and "Guest #3". The original function was impure, so calling it twice broke it. But the fixed pure version works even if the function is called twice every time. **Pure functions only calculate, so calling them twice won't change anything**--just like calling `double(2)` twice doesn't change what's returned, and solving <Math><MathI>y</MathI> = 2<MathI>x</MathI></Math> twice doesn't change what <MathI>y</MathI> is. Same inputs, same outputs. Always.
+
+Strict Mode has no effect in production, so it won't slow down the app for your users. To opt into Strict Mode, you can wrap your root component into `<React.StrictMode>`. Some frameworks do this by default.
+
+</DeepDive>
+
+### Local mutation: Your component's little secret {/*local-mutation-your-components-little-secret*/}
+
+In the above example, the problem was that the component changed a *preexisting* variable while rendering. This is often called a **"mutation"** to make it sound a bit scarier. Pure functions don't mutate variables outside of the function's scope or objects that were created before the call—that makes them impure!
+
+However, **it's completely fine to change variables and objects that you've *just* created while rendering.** In this example, you create an `[]` array, assign it to a `cups` variable, and then `push` a dozen cups into it:
+
+<Sandpack>
+
+```js
+function Cup({ guest }) {
+  return <h2>Tea cup for guest #{guest}</h2>;
+}
+
+export default function TeaGathering() {
+  let cups = [];
+  for (let i = 1; i <= 12; i++) {
+    cups.push(<Cup key={i} guest={i} />);
+  }
+  return cups;
+}
+```
+
+</Sandpack>
+
+If the `cups` variable or the `[]` array were created outside the `TeaGathering` function, this would be a huge problem! You would be changing a *preexisting* object by pushing items into that array.
+
+However, it's fine because you've created them *during the same render*, inside `TeaGathering`. No code outside of `TeaGathering` will ever know that this happened. This is called **"local mutation"**—it's like your component's little secret.
+
+## Where you _can_ cause side effects {/*where-you-_can_-cause-side-effects*/}
+
+While functional programming relies heavily on purity, at some point, somewhere, _something_ has to change. That's kind of the point of programming! These changes—updating the screen, starting an animation, changing the data—are called **side effects.** They're things that happen _"on the side"_, not during rendering.
+
+In React, **side effects usually belong inside [event handlers.](/learn/responding-to-events)** Event handlers are functions that React runs when you perform some action—for example, when you click a button. Even though event handlers are defined *inside* your component, they don't run *during* rendering! **So event handlers don't need to be pure.**
+
+If you've exhausted all other options and can't find the right event handler for your side effect, you can still attach it to your returned JSX with a [`useEffect`](/reference/react/useEffect) call in your component. This tells React to execute it later, after rendering, when side effects are allowed. **However, this approach should be your last resort.**
+
+When possible, try to express your logic with rendering alone. You'll be surprised how far this can take you!
+
+<DeepDive>
+
+#### Why does React care about purity? {/*why-does-react-care-about-purity*/}
+
+Writing pure functions takes some habit and discipline. But it also unlocks marvelous opportunities:
+
+* Your components could run in a different environment—for example, on the server! Since they return the same result for the same inputs, one component can serve many user requests.
+* You can improve performance by [skipping rendering](/reference/react/memo) components whose inputs have not changed. This is safe because pure functions always return the same results, so they are safe to cache.
+* If some data changes in the middle of rendering a deep component tree, React can restart rendering without wasting time to finish the outdated render. Purity makes it safe to stop calculating at any time.
+
+Every new React feature we're building takes advantage of purity. From data fetching to animations to performance, keeping components pure unlocks the power of the React paradigm.
+
+</DeepDive>
+
+<Recap>
+
+* A component must be pure, meaning:
+  * **It minds its own business.** It should not change any objects or variables that existed before rendering.
+  * **Same inputs, same output.** Given the same inputs, a component should always return the same JSX. 
+* Rendering can happen at any time, so components should not depend on each others' rendering sequence.
+* You should not mutate any of the inputs that your components use for rendering. That includes props, state, and context. To update the screen, ["set" state](/learn/state-a-components-memory) instead of mutating preexisting objects.
+* Strive to express your component's logic in the JSX you return. When you need to "change things", you'll usually want to do it in an event handler. As a last resort, you can `useEffect`.
+* Writing pure functions takes a bit of practice, but it unlocks the power of React's paradigm.
+
+</Recap>
+
+
+  
+<Challenges>
+
+#### Fix a broken clock {/*fix-a-broken-clock*/}
+
+This component tries to set the `<h1>`'s CSS class to `"night"` during the time from midnight to six hours in the morning, and `"day"` at all other times. However, it doesn't work. Can you fix this component?
+
+You can verify whether your solution works by temporarily changing the computer's timezone. When the current time is between midnight and six in the morning, the clock should have inverted colors!
+
+<Hint>
+
+Rendering is a *calculation*, it shouldn't try to "do" things. Can you express the same idea differently?
+
+</Hint>
+
+<Sandpack>
+
+```js Clock.js active
+export default function Clock({ time }) {
+  let hours = time.getHours();
+  if (hours >= 0 && hours <= 6) {
+    document.getElementById('time').className = 'night';
+  } else {
+    document.getElementById('time').className = 'day';
+  }
+  return (
+    <h1 id="time">
+      {time.toLocaleTimeString()}
+    </h1>
+  );
+}
+```
+
+```js App.js hidden
+import { useState, useEffect } from 'react';
+import Clock from './Clock.js';
+
+function useTime() {
+  const [time, setTime] = useState(() => new Date());
+  useEffect(() => {
+    const id = setInterval(() => {
+      setTime(new Date());
+    }, 1000);
+    return () => clearInterval(id);
+  }, []);
+  return time;
+}
+
+export default function App() {
+  const time = useTime();
+  return (
+    <Clock time={time} />
+  );
+}
+```
+
+```css
+body > * {
+  width: 100%;
+  height: 100%;
+}
+.day {
+  background: #fff;
+  color: #222;
+}
+.night {
+  background: #222;
+  color: #fff;
+}
+```
+
+</Sandpack>
+
+<Solution>
+
+You can fix this component by calculating the `className` and including it in the render output:
+
+<Sandpack>
+
+```js Clock.js active
+export default function Clock({ time }) {
+  let hours = time.getHours();
+  let className;
+  if (hours >= 0 && hours <= 6) {
+    className = 'night';
+  } else {
+    className = 'day';
+  }
+  return (
+    <h1 className={className}>
+      {time.toLocaleTimeString()}
+    </h1>
+  );
+}
+```
+
+```js App.js hidden
+import { useState, useEffect } from 'react';
+import Clock from './Clock.js';
+
+function useTime() {
+  const [time, setTime] = useState(() => new Date());
+  useEffect(() => {
+    const id = setInterval(() => {
+      setTime(new Date());
+    }, 1000);
+    return () => clearInterval(id);
+  }, []);
+  return time;
+}
+
+export default function App() {
+  const time = useTime();
+  return (
+    <Clock time={time} />
+  );
+}
+```
+
+```css
+body > * {
+  width: 100%;
+  height: 100%;
+}
+.day {
+  background: #fff;
+  color: #222;
+}
+.night {
+  background: #222;
+  color: #fff;
+}
+```
+
+</Sandpack>
+
+In this example, the side effect (modifying the DOM) was not necessary at all. You only needed to return JSX.
+
+</Solution>
+
+#### Fix a broken profile {/*fix-a-broken-profile*/}
+
+Two `Profile` components are rendered side by side with different data. Press "Collapse" on the first profile, and then "Expand" it. You'll notice that both profiles now show the same person. This is a bug.
+
+Find the cause of the bug and fix it.
+
+<Hint>
+
+The buggy code is in `Profile.js`. Make sure you read it all from top to bottom!
+
+</Hint>
+
+<Sandpack>
+
+```js Profile.js
+import Panel from './Panel.js';
+import { getImageUrl } from './utils.js';
+
+let currentPerson;
+
+export default function Profile({ person }) {
+  currentPerson = person;
+  return (
+    <Panel>
+      <Header />
+      <Avatar />
+    </Panel>
+  )
+}
+
+function Header() {
+  return <h1>{currentPerson.name}</h1>;
+}
+
+function Avatar() {
+  return (
+    <img
+      className="avatar"
+      src={getImageUrl(currentPerson)}
+      alt={currentPerson.name}
+      width={50}
+      height={50}
+    />
+  );
+}
+```
+
+```js Panel.js hidden
+import { useState } from 'react';
+
+export default function Panel({ children }) {
+  const [open, setOpen] = useState(true);
+  return (
+    <section className="panel">
+      <button onClick={() => setOpen(!open)}>
+        {open ? 'Collapse' : 'Expand'}
+      </button>
+      {open && children}
+    </section>
+  );
+}
+```
+
+```js App.js
+import Profile from './Profile.js';
+
+export default function App() {
+  return (
+    <>
+      <Profile person={{
+        imageId: 'lrWQx8l',
+        name: 'Subrahmanyan Chandrasekhar',
+      }} />
+      <Profile person={{
+        imageId: 'MK3eW3A',
+        name: 'Creola Katherine Johnson',
+      }} />
+    </>
+  )
+}
+```
+
+```js utils.js hidden
+export function getImageUrl(person, size = 's') {
+  return (
+    'https://i.imgur.com/' +
+    person.imageId +
+    size +
+    '.jpg'
+  );
+}
+```
+
+```css
+.avatar { margin: 5px; border-radius: 50%; }
+.panel {
+  border: 1px solid #aaa;
+  border-radius: 6px;
+  margin-top: 20px;
+  padding: 10px;
+  width: 200px;
+}
+h1 { margin: 5px; font-size: 18px; }
+```
+
+</Sandpack>
+
+<Solution>
+
+The problem is that the `Profile` component writes to a preexisting variable called `currentPerson`, and the `Header` and `Avatar` components read from it. This makes *all three of them* impure and difficult to predict.
+
+To fix the bug, remove the `currentPerson` variable. Instead, pass all information from `Profile` to `Header` and `Avatar` via props. You'll need to add a `person` prop to both components and pass it all the way down.
+
+<Sandpack>
+
+```js Profile.js active
+import Panel from './Panel.js';
+import { getImageUrl } from './utils.js';
+
+export default function Profile({ person }) {
+  return (
+    <Panel>
+      <Header person={person} />
+      <Avatar person={person} />
+    </Panel>
+  )
+}
+
+function Header({ person }) {
+  return <h1>{person.name}</h1>;
+}
+
+function Avatar({ person }) {
+  return (
+    <img
+      className="avatar"
+      src={getImageUrl(person)}
+      alt={person.name}
+      width={50}
+      height={50}
+    />
+  );
+}
+```
+
+```js Panel.js hidden
+import { useState } from 'react';
+
+export default function Panel({ children }) {
+  const [open, setOpen] = useState(true);
+  return (
+    <section className="panel">
+      <button onClick={() => setOpen(!open)}>
+        {open ? 'Collapse' : 'Expand'}
+      </button>
+      {open && children}
+    </section>
+  );
+}
+```
+
+```js App.js
+import Profile from './Profile.js';
+
+export default function App() {
+  return (
+    <>
+      <Profile person={{
+        imageId: 'lrWQx8l',
+        name: 'Subrahmanyan Chandrasekhar',
+      }} />
+      <Profile person={{
+        imageId: 'MK3eW3A',
+        name: 'Creola Katherine Johnson',
+      }} />
+    </>
+  );
+}
+```
+
+```js utils.js hidden
+export function getImageUrl(person, size = 's') {
+  return (
+    'https://i.imgur.com/' +
+    person.imageId +
+    size +
+    '.jpg'
+  );
+}
+```
+
+```css
+.avatar { margin: 5px; border-radius: 50%; }
+.panel {
+  border: 1px solid #aaa;
+  border-radius: 6px;
+  margin-top: 20px;
+  padding: 10px;
+  width: 200px;
+}
+h1 { margin: 5px; font-size: 18px; }
+```
+
+</Sandpack>
+
+Remember that React does not guarantee that component functions will execute in any particular order, so you can't communicate between them by setting variables. All communication must happen through props.
+
+</Solution>
+
+#### Fix a broken story tray {/*fix-a-broken-story-tray*/}
+
+The CEO of your company is asking you to add "stories" to your online clock app, and you can't say no. You've written a `StoryTray` component that accepts a list of `stories`, followed by a "Create Story" placeholder.
+
+You implemented the "Create Story" placeholder by pushing one more fake story at the end of the `stories` array that you receive as a prop. But for some reason, "Create Story" appears more than once. Fix the issue.
+
+<Sandpack>
+
+```js StoryTray.js active
+export default function StoryTray({ stories }) {
+  stories.push({
+    id: 'create',
+    label: 'Create Story'
+  });
+
+  return (
+    <ul>
+      {stories.map(story => (
+        <li key={story.id}>
+          {story.label}
+        </li>
+      ))}
+    </ul>
+  );
+}
+```
+
+```js App.js hidden
+import { useState, useEffect } from 'react';
+import StoryTray from './StoryTray.js';
+
+let initialStories = [
+  {id: 0, label: "Ankit's Story" },
+  {id: 1, label: "Taylor's Story" },
+];
+
+export default function App() {
+  let [stories, setStories] = useState([...initialStories])
+  let time = useTime();
+
+  // HACK: Prevent the memory from growing forever while you read docs.
+  // We're breaking our own rules here.
+  if (stories.length > 100) {
+    stories.length = 100;
+  }
+
+  return (
+    <div
+      style={{
+        width: '100%',
+        height: '100%',
+        textAlign: 'center',
+      }}
+    >
+      <h2>It is {time.toLocaleTimeString()} now.</h2>
+      <StoryTray stories={stories} />
+    </div>
+  );
+}
+
+function useTime() {
+  const [time, setTime] = useState(() => new Date());
+  useEffect(() => {
+    const id = setInterval(() => {
+      setTime(new Date());
+    }, 1000);
+    return () => clearInterval(id);
+  }, []);
+  return time;
+}
+```
+
+```css
+ul {
+  margin: 0;
+  list-style-type: none;
+}
+
+li {
+  border: 1px solid #aaa;
+  border-radius: 6px;
+  float: left;
+  margin: 5px;
+  margin-bottom: 20px;
+  padding: 5px;
+  width: 70px;
+  height: 100px;
+}
+```
+
+```js sandbox.config.json hidden
+{
+  "hardReloadOnChange": true
+}
+```
+
+</Sandpack>
+
+<Solution>
+
+Notice how whenever the clock updates, "Create Story" is added *twice*. This serves as a hint that we have a mutation during rendering--Strict Mode calls components twice to make these issues more noticeable.
+
+`StoryTray` function is not pure. By calling `push` on the received `stories` array (a prop!), it is mutating an object that was created *before* `StoryTray` started rendering. This makes it buggy and very difficult to predict.
+
+The simplest fix is to not touch the array at all, and render "Create Story" separately:
+
+<Sandpack>
+
+```js StoryTray.js active
+export default function StoryTray({ stories }) {
+  return (
+    <ul>
+      {stories.map(story => (
+        <li key={story.id}>
+          {story.label}
+        </li>
+      ))}
+      <li>Create Story</li>
+    </ul>
+  );
+}
+```
+
+```js App.js hidden
+import { useState, useEffect } from 'react';
+import StoryTray from './StoryTray.js';
+
+let initialStories = [
+  {id: 0, label: "Ankit's Story" },
+  {id: 1, label: "Taylor's Story" },
+];
+
+export default function App() {
+  let [stories, setStories] = useState([...initialStories])
+  let time = useTime();
+
+  // HACK: Prevent the memory from growing forever while you read docs.
+  // We're breaking our own rules here.
+  if (stories.length > 100) {
+    stories.length = 100;
+  }
+
+  return (
+    <div
+      style={{
+        width: '100%',
+        height: '100%',
+        textAlign: 'center',
+      }}
+    >
+      <h2>It is {time.toLocaleTimeString()} now.</h2>
+      <StoryTray stories={stories} />
+    </div>
+  );
+}
+
+function useTime() {
+  const [time, setTime] = useState(() => new Date());
+  useEffect(() => {
+    const id = setInterval(() => {
+      setTime(new Date());
+    }, 1000);
+    return () => clearInterval(id);
+  }, []);
+  return time;
+}
+```
+
+```css
+ul {
+  margin: 0;
+  list-style-type: none;
+}
+
+li {
+  border: 1px solid #aaa;
+  border-radius: 6px;
+  float: left;
+  margin: 5px;
+  margin-bottom: 20px;
+  padding: 5px;
+  width: 70px;
+  height: 100px;
+}
+```
+
+</Sandpack>
+
+Alternatively, you could create a _new_ array (by copying the existing one) before you push an item into it:
+
+<Sandpack>
+
+```js StoryTray.js active
+export default function StoryTray({ stories }) {
+  // Copy the array!
+  let storiesToDisplay = stories.slice();
+
+  // Does not affect the original array:
+  storiesToDisplay.push({
+    id: 'create',
+    label: 'Create Story'
+  });
+
+  return (
+    <ul>
+      {storiesToDisplay.map(story => (
+        <li key={story.id}>
+          {story.label}
+        </li>
+      ))}
+    </ul>
+  );
+}
+```
+
+```js App.js hidden
+import { useState, useEffect } from 'react';
+import StoryTray from './StoryTray.js';
+
+let initialStories = [
+  {id: 0, label: "Ankit's Story" },
+  {id: 1, label: "Taylor's Story" },
+];
+
+export default function App() {
+  let [stories, setStories] = useState([...initialStories])
+  let time = useTime();
+
+  // HACK: Prevent the memory from growing forever while you read docs.
+  // We're breaking our own rules here.
+  if (stories.length > 100) {
+    stories.length = 100;
+  }
+
+  return (
+    <div
+      style={{
+        width: '100%',
+        height: '100%',
+        textAlign: 'center',
+      }}
+    >
+      <h2>It is {time.toLocaleTimeString()} now.</h2>
+      <StoryTray stories={stories} />
+    </div>
+  );
+}
+
+function useTime() {
+  const [time, setTime] = useState(() => new Date());
+  useEffect(() => {
+    const id = setInterval(() => {
+      setTime(new Date());
+    }, 1000);
+    return () => clearInterval(id);
+  }, []);
+  return time;
+}
+```
+
+```css
+ul {
+  margin: 0;
+  list-style-type: none;
+}
+
+li {
+  border: 1px solid #aaa;
+  border-radius: 6px;
+  float: left;
+  margin: 5px;
+  margin-bottom: 20px;
+  padding: 5px;
+  width: 70px;
+  height: 100px;
+}
+```
+
+</Sandpack>
+
+This keeps your mutation local and your rendering function pure. However, you still need to be careful: for example, if you tried to change any of the array's existing items, you'd have to clone those items too.
+
+It is useful to remember which operations on arrays mutate them, and which don't. For example, `push`, `pop`, `reverse`, and `sort` will mutate the original array, but `slice`, `filter`, and `map` will create a new one.
+
+</Solution>
+
+</Challenges>
diff --git a/beta/src/content/learn/lifecycle-of-reactive-effects.md b/beta/src/content/learn/lifecycle-of-reactive-effects.md
new file mode 100644
index 000000000..803e7be9e
--- /dev/null
+++ b/beta/src/content/learn/lifecycle-of-reactive-effects.md
@@ -0,0 +1,2105 @@
+---
+title: 'Lifecycle of Reactive Effects'
+---
+
+<Intro>
+
+Effects have a different lifecycle from components. Components may mount, update, or unmount. An Effect can only do two things: to start synchronizing something, and later to stop synchronizing it. This cycle can happen multiple times if your Effect depends on props and state that change over time. React provides a linter rule to check that you've specified your Effect's dependencies correctly. This keeps your Effect synchronized to the latest props and state.
+
+</Intro>
+
+<YouWillLearn>
+
+- How an Effect's lifecycle is different from a component's lifecycle
+- How to think about each individual Effect in isolation
+- When your Effect needs to re-synchronize, and why
+- How your Effect's dependencies are determined
+- What it means for a value to be reactive
+- What an empty dependency array means
+- How React verifies your dependencies are correct with a linter
+- What to do when you disagree with the linter
+
+</YouWillLearn>
+
+## The lifecycle of an Effect {/*the-lifecycle-of-an-effect*/}
+
+Every React component goes through the same lifecycle:
+
+- A component _mounts_ when it's added to the screen.
+- A component _updates_ when it receives new props or state. This usually happens in response to an interaction.
+- A component _unmounts_ when it's removed from the screen.
+
+**It's a good way to think about components, but _not_ about Effects.** Instead, try to think about each Effect independently from your component's lifecycle. An Effect describes how to [synchronize an external system](/learn/synchronizing-with-effects) to the current props and state. As your code changes, this synchronization will need to happen more or less often.
+
+To illustrate this point, consider this Effect connecting your component to a chat server:
+
+```js
+const serverUrl = 'https://localhost:1234';
+
+function ChatRoom({ roomId }) {
+  useEffect(() => {
+    const connection = createConnection(serverUrl, roomId);
+    connection.connect();
+    return () => {
+      connection.disconnect();
+    };
+  }, [roomId]);
+  // ...
+}
+```
+
+Your Effect's body specifies how to **start synchronizing:**
+
+```js {2-3}
+    // ...
+    const connection = createConnection(serverUrl, roomId);
+    connection.connect();
+    return () => {
+      connection.disconnect();
+    };
+    // ...
+```
+
+The cleanup function returned by your Effect specifies how to **stop synchronizing:**
+
+```js {5}
+    // ...
+    const connection = createConnection(serverUrl, roomId);
+    connection.connect();
+    return () => {
+      connection.disconnect();
+    };
+    // ...
+```
+
+Intuitively, you might think that React would **start synchronizing** when your component mounts and **stop synchronizing** when your component unmounts. However, this is not the end of the story! Sometimes, it may also be necessary to **start and stop synchronizing multiple times** while the component remains mounted.
+
+Let's look at _why_ this is necessary, _when_ it happens, and _how_ you can control this behavior.
+
+<Note>
+
+Some Effects don't return a cleanup function at all. [More often than not,](/learn/synchronizing-with-effects#how-to-handle-the-effect-firing-twice-in-development) you'll want to return one--but if you don't, React will behave as if you returned an empty cleanup function that doesn't do anything.
+
+</Note>
+
+### Why synchronization may need to happen more than once {/*why-synchronization-may-need-to-happen-more-than-once*/}
+
+Imagine this `ChatRoom` component receives a `roomId` prop that the user picks in a dropdown. Let's say that initially the user picks the `"general"` room as the `roomId`. Your app displays the `"general"` chat room:
+
+```js {3}
+const serverUrl = 'https://localhost:1234';
+
+function ChatRoom({ roomId /* "general" */ }) {
+  // ...
+  return <h1>Welcome to the {roomId} room!</h1>;
+}
+```
+
+After the UI is displayed, React will run your Effect to **start synchronizing.** It connects to the `"general"` room:
+
+```js {3,4}
+function ChatRoom({ roomId /* "general" */ }) {
+  useEffect(() => {
+    const connection = createConnection(serverUrl, roomId); // Connects to the "general" room
+    connection.connect();
+    return () => {
+      connection.disconnect(); // Disconnects from the "general" room
+    };
+  }, [roomId]);
+  // ...
+```
+
+So far, so good.
+
+Later, the user picks a different room in the dropdown (for example, `"travel"`). First, React will update the UI:
+
+```js {1}
+function ChatRoom({ roomId /* "travel" */ }) {
+  // ...
+  return <h1>Welcome to the {roomId} room!</h1>;
+}
+```
+
+Pause to think about what should happen next. The user sees that `"travel"` is the selected chat room in the UI. However, the Effect that ran the last time is still connected to the `"general"` room. **The `roomId` prop has changed, so whatever your Effect did back then (connecting to the `"general"` room) no longer matches the UI.**
+
+At this point, you want React to do two things:
+
+1. Stop synchronizing with the old `roomId` (disconnect from the `"general"` room)
+2. Start synchronizing with the new `roomId` (connect to the `"travel"` room)
+
+**Luckily, you've already taught React how to do both of these things!** Your Effect's body specifies how to start synchronizing, and your cleanup function specifies how to stop synchronizing. All that React needs to do now is to call them in the correct order and with the correct props and state. Let's see how exactly that happens.
+
+### How React re-synchronizes your Effect {/*how-react-re-synchronizes-your-effect*/}
+
+Recall that your `ChatRoom` component has received a new value for its `roomId` prop. It used to be `"general"`, and now it is `"travel"`. React needs to re-synchronize your Effect to re-connect you to a different room.
+
+To **stop synchronizing,** React will call the cleanup function that your Effect returned after connecting to the `"general"` room. Since `roomId` was `"general"`, the cleanup function disconnects from the `"general"` room:
+
+```js {6}
+function ChatRoom({ roomId /* "general" */ }) {
+  useEffect(() => {
+    const connection = createConnection(serverUrl, roomId); // Connects to the "general" room
+    connection.connect();
+    return () => {
+      connection.disconnect(); // Disconnects from the "general" room
+    };
+    // ...
+```
+
+Then React will run the Effect that you've provided during this render. This time, `roomId` is `"travel"` so it will **start synchronizing** to the `"travel"` chat room (until its cleanup function is eventually called too):
+
+```js {3,4}
+function ChatRoom({ roomId /* "travel" */ }) {
+  useEffect(() => {
+    const connection = createConnection(serverUrl, roomId); // Connects to the "travel" room
+    connection.connect();
+    // ...
+```
+
+Thanks to this, you're now connected to the same room that the user chose in the UI. Disaster averted!
+
+Every time after your component re-renders with a different `roomId`, your Effect will re-synchronize. For example, let's say the user changes `roomId` from `"travel"` to `"music"`. React will again **stop synchronizing** your Effect by calling its cleanup function (disconnecting you from the `"travel"` room). Then it will **start synchronizing** again by running its body with the new `roomId` prop (connecting you to the `"music"` room).
+
+Finally, when the user goes to a different screen, `ChatRoom` unmounts. Now there is no need to stay connected at all. React will **stop synchronizing** your Effect one last time and disconnect you from the `"music"` chat room.
+
+### Thinking from the Effect's perspective {/*thinking-from-the-effects-perspective*/}
+
+Let's recap everything that's happened from the `ChatRoom` component's perspective:
+
+1. `ChatRoom` mounted with `roomId` set to `"general"`
+1. `ChatRoom` updated with `roomId` set to `"travel"`
+1. `ChatRoom` updated with `roomId` set to `"music"`
+1. `ChatRoom` unmounted
+
+During each of these points in the component's lifecycle, your Effect did different things:
+
+1. Your Effect connected to the `"general"` room
+1. Your Effect disconnected from the `"general"` room and connected to the `"travel"` room
+1. Your Effect disconnected from the `"travel"` room and connected to the `"music"` room
+1. Your Effect disconnected from the `"music"` room
+
+Now let's think about what happened from the perspective of the Effect itself:
+
+```js
+  useEffect(() => {
+    // Your Effect connected to the room specified with roomId...
+    const connection = createConnection(serverUrl, roomId);
+    connection.connect();
+    return () => {
+      // ...until it disconnected
+      connection.disconnect();
+    };
+  }, [roomId]);
+```
+
+This code's structure might inspire you to see what happened as a sequence of non-overlapping time periods:
+
+1. Your Effect connected to the `"general"` room (until it disconnected)
+1. Your Effect connected to the `"travel"` room (until it disconnected)
+1. Your Effect connected to the `"music"` room (until it disconnected)
+
+Previously, you were thinking from the component's perspective. When you looked from the component's perspective, it was tempting to think of Effects as "callbacks" or "lifecycle events" that fire at a specific time like "after a render" or "before unmount". This way of thinking gets complicated very fast, so it's best to avoid it.
+
+**Instead, always focus on a single start/stop cycle at a time. It shouldn't matter whether a component is mounting, updating, or unmounting. All you need to do is to describe how to start synchronization and how to stop it. If you do it well, your Effect will be resilient to being started and stopped as many times as it's needed.**
+
+This might remind you how you don't think whether a component is mounting or updating when you write the rendering logic that creates JSX. You describe what should be on the screen, and React [figures out the rest.](/learn/reacting-to-input-with-state)
+
+### How React verifies that your Effect can re-synchronize {/*how-react-verifies-that-your-effect-can-re-synchronize*/}
+
+Here is a live example that you can play with. Press "Open chat" to mount the `ChatRoom` component:
+
+<Sandpack>
+
+```js
+import { useState, useEffect } from 'react';
+import { createConnection } from './chat.js';
+
+const serverUrl = 'https://localhost:1234';
+
+function ChatRoom({ roomId }) {
+  useEffect(() => {
+    const connection = createConnection(serverUrl, roomId);
+    connection.connect();
+    return () => connection.disconnect();
+  }, [roomId]);
+  return <h1>Welcome to the {roomId} room!</h1>;
+}
+
+export default function App() {
+  const [roomId, setRoomId] = useState('general');
+  const [show, setShow] = useState(false);
+  return (
+    <>
+      <label>
+        Choose the chat room:{' '}
+        <select
+          value={roomId}
+          onChange={e => setRoomId(e.target.value)}
+        >
+          <option value="general">general</option>
+          <option value="travel">travel</option>
+          <option value="music">music</option>
+        </select>
+      </label>
+      <button onClick={() => setShow(!show)}>
+        {show ? 'Close chat' : 'Open chat'}
+      </button>
+      {show && <hr />}
+      {show && <ChatRoom roomId={roomId} />}
+    </>
+  );
+}
+```
+
+```js chat.js
+export function createConnection(serverUrl, roomId) {
+  // A real implementation would actually connect to the server
+  return {
+    connect() {
+      console.log('✅ Connecting to "' + roomId + '" room at ' + serverUrl + '...');
+    },
+    disconnect() {
+      console.log('❌ Disconnected from "' + roomId + '" room at ' + serverUrl);
+    }
+  };
+}
+```
+
+```css
+input { display: block; margin-bottom: 20px; }
+button { margin-left: 10px; }
+```
+
+</Sandpack>
+
+Notice that when the component mounts for the first time, you see three logs:
+
+1. `✅ Connecting to "general" room at https://localhost:1234...` *(development-only)*
+1. `❌ Disconnected from "general" room at https://localhost:1234.` *(development-only)*
+1. `✅ Connecting to "general" room at https://localhost:1234...`
+
+The first two logs are development-only. In development, React always remounts each component once. **In other words, React verifies that your Effect can re-synchronize by forcing it to do that immediately in development.** This might remind you how you might open the door and close it an extra time to check that the door lock works. React starts and stops your Effect one extra time in development to check [you've implemented its cleanup well.](/learn/synchronizing-with-effects#how-to-handle-the-effect-firing-twice-in-development)
+
+The main reason your Effect will re-synchronize in practice is if some data it uses has changed. In the sandbox above, change the selected chat room. Notice how, when the `roomId` changes, your Effect re-synchronizes.
+
+However, there are also more unusual cases in which re-synchronization is necessary. For example, try editing the `serverUrl` in the sandbox above while the chat is open. Notice how the Effect re-synchronizes in response to your edits to the code. In the future, React may add more features that take advantage of re-synchronization.
+
+### How React knows that it needs to re-synchronize the Effect {/*how-react-knows-that-it-needs-to-re-synchronize-the-effect*/}
+
+You might be wondering how React knew that your Effect needed to re-synchronize after `roomId` changes. It's because *you told React* that this Effect's code depends on `roomId` by including it in the [list of dependencies:](/learn/synchronizing-with-effects#step-2-specify-the-effect-dependencies)
+
+```js {1,3,8}
+function ChatRoom({ roomId }) { // The roomId prop may change over time
+  useEffect(() => {
+    const connection = createConnection(serverUrl, roomId); // This Effect reads roomId 
+    connection.connect();
+    return () => {
+      connection.disconnect();
+    };
+  }, [roomId]); // So you tell React that this Effect "depends on" roomId
+  // ...
+```
+
+Here's how this works:
+
+1. You knew `roomId` is a prop, which means it can change over time.
+2. You knew that your Effect reads `roomId` (so its logic depends on a value that may change later).
+3. This is why you specified it as your Effect's dependency (so that it re-synchronizes when `roomId` changes).
+
+Every time after your component re-renders, React will look at the array of dependencies that you have passed. If any of the values in the array is different from the value at the same spot that you passed during the previous render, React will re-synchronize your Effect. For example, if you passed `["general"]` during the initial render, and later you passed `["travel"]` during the next render, React will compare `"general"` and `"travel"`. These are different values (compared with [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is)), so React will re-synchronize your Effect. On the other hand, if your component re-renders but `roomId` has not changed, your Effect will remain connected to the same room.
+
+### Each Effect represents a separate synchronization process {/*each-effect-represents-a-separate-synchronization-process*/}
+
+Resist adding unrelated logic to your Effect only because this logic needs to run at the same time as an Effect you already wrote. For example, let's say you want to send an analytics event when the user visits the room. You already have an Effect that depends on `roomId`, so you might feel tempted to add the analytics call right there:
+
+```js {3}
+function ChatRoom({ roomId }) {
+  useEffect(() => {
+    logVisit(roomId);
+    const connection = createConnection(serverUrl, roomId);
+    connection.connect();
+    return () => {
+      connection.disconnect();
+    };
+  }, [roomId]);
+  // ...
+}
+```
+
+But imagine you later add another dependency to this Effect that needs to re-establish the connection. If this Effect re-synchronizes, it will also call `logVisit(roomId)` for the same room, which you did not intend. Logging the visit **is a separate process** from connecting. This is why they should be written as two separate Effects:
+
+```js {2-4}
+function ChatRoom({ roomId }) {
+  useEffect(() => {
+    logVisit(roomId);
+  }, [roomId]);
+
+  useEffect(() => {
+    const connection = createConnection(serverUrl, roomId);
+    // ...
+  }, [roomId]);
+  // ...
+}
+```
+
+**Each Effect in your code should represent a separate and independent synchronization process.**
+
+In the above example, deleting one Effect wouldn’t break the other Effect's logic. This is a good indication that they synchronize different things, and so it made sense to split them up. On the other hand, if you split up a cohesive piece of logic into separate Effects, the code may look "cleaner" but will be [more difficult to maintain.](/learn/you-might-not-need-an-effect#chains-of-computations) This is why you should think whether the processes are same or separate, not whether the code looks cleaner.
+
+## Effects "react" to reactive values {/*effects-react-to-reactive-values*/}
+
+Your Effect reads two variables (`serverUrl` and `roomId`), but you only specified `roomId` as a dependency:
+
+```js {5,10}
+const serverUrl = 'https://localhost:1234';
+
+function ChatRoom({ roomId }) {
+  useEffect(() => {
+    const connection = createConnection(serverUrl, roomId);
+    connection.connect();
+    return () => {
+      connection.disconnect();
+    };
+  }, [roomId]);
+  // ...
+}
+```
+
+Why doesn't `serverUrl` need to be a dependency?
+
+This is because the `serverUrl` never changes due to a re-render. It's always the same no matter how many times and with which props and state the component re-renders. Since `serverUrl` never changes, it wouldn't make sense to specify it as a dependency. After all, dependencies only do something when they change over time!
+
+On the other hand, `roomId` may be different on a re-render. **Props, state, and other values declared inside the component are _reactive_ because they're calculated during rendering and participate in the React data flow.**
+
+If `serverUrl` was a state variable, it would be reactive. Reactive values must be included in dependencies:
+
+```js {2,5,10}
+function ChatRoom({ roomId }) { // Props change over time
+  const [serverUrl, setServerUrl] = useState('https://localhost:1234'); // State may change over time
+
+  useEffect(() => {
+    const connection = createConnection(serverUrl, roomId); // Your Effect reads props and state
+    connection.connect();
+    return () => {
+      connection.disconnect();
+    };
+  }, [roomId, serverUrl]); // So you tell React that this Effect "depends on" on props and state
+  // ...
+}
+```
+
+By including `serverUrl` as a dependency, you ensure that the Effect re-synchronizes after it changes.
+
+Try changing the selected chat room or edit the server URL in this sandbox:
+
+<Sandpack>
+
+```js
+import { useState, useEffect } from 'react';
+import { createConnection } from './chat.js';
+
+function ChatRoom({ roomId }) {
+  const [serverUrl, setServerUrl] = useState('https://localhost:1234');
+
+  useEffect(() => {
+    const connection = createConnection(serverUrl, roomId);
+    connection.connect();
+    return () => connection.disconnect();
+  }, [roomId, serverUrl]);
+
+  return (
+    <>
+      <label>
+        Server URL:{' '}
+        <input
+          value={serverUrl}
+          onChange={e => setServerUrl(e.target.value)}
+        />
+      </label>
+      <h1>Welcome to the {roomId} room!</h1>
+    </>
+  );
+}
+
+export default function App() {
+  const [roomId, setRoomId] = useState('general');
+  return (
+    <>
+      <label>
+        Choose the chat room:{' '}
+        <select
+          value={roomId}
+          onChange={e => setRoomId(e.target.value)}
+        >
+          <option value="general">general</option>
+          <option value="travel">travel</option>
+          <option value="music">music</option>
+        </select>
+      </label>
+      <hr />
+      <ChatRoom roomId={roomId} />
+    </>
+  );
+}
+```
+
+```js chat.js
+export function createConnection(serverUrl, roomId) {
+  // A real implementation would actually connect to the server
+  return {
+    connect() {
+      console.log('✅ Connecting to "' + roomId + '" room at ' + serverUrl + '...');
+    },
+    disconnect() {
+      console.log('❌ Disconnected from "' + roomId + '" room at ' + serverUrl);
+    }
+  };
+}
+```
+
+```css
+input { display: block; margin-bottom: 20px; }
+button { margin-left: 10px; }
+```
+
+</Sandpack>
+
+Whenever you change a reactive value like `roomId` or `serverUrl`, the Effect re-connects to the chat server.
+
+### What an Effect with empty dependencies means {/*what-an-effect-with-empty-dependencies-means*/}
+
+What happens if you move both `serverUrl` and `roomId` outside the component?
+
+```js {1,2}
+const serverUrl = 'https://localhost:1234';
+const roomId = 'general';
+
+function ChatRoom() {
+  useEffect(() => {
+    const connection = createConnection(serverUrl, roomId);
+    connection.connect();
+    return () => {
+      connection.disconnect();
+    };
+  }, []); // ✅ All dependencies declared
+  // ...
+}
+```
+
+Now your Effect's code does not use *any* reactive values, so its dependencies can be empty (`[]`).
+
+If you think from the component's perspective, the empty `[]` dependency array means this Effect connects to the chat room only when the component mounts, and disconnects only when the component unmounts. (Keep in mind that React would still [re-synchronize it an extra time](#how-react-verifies-that-your-effect-can-re-synchronize) in development to stress-test your Effect's logic.)
+
+
+<Sandpack>
+
+```js
+import { useState, useEffect } from 'react';
+import { createConnection } from './chat.js';
+
+const serverUrl = 'https://localhost:1234';
+const roomId = 'general';
+
+function ChatRoom() {
+  useEffect(() => {
+    const connection = createConnection(serverUrl, roomId);
+    connection.connect();
+    return () => connection.disconnect();
+  }, []);
+  return <h1>Welcome to the {roomId} room!</h1>;
+}
+
+export default function App() {
+  const [show, setShow] = useState(false);
+  return (
+    <>
+      <button onClick={() => setShow(!show)}>
+        {show ? 'Close chat' : 'Open chat'}
+      </button>
+      {show && <hr />}
+      {show && <ChatRoom />}
+    </>
+  );
+}
+```
+
+```js chat.js
+export function createConnection(serverUrl, roomId) {
+  // A real implementation would actually connect to the server
+  return {
+    connect() {
+      console.log('✅ Connecting to "' + roomId + '" room at ' + serverUrl + '...');
+    },
+    disconnect() {
+      console.log('❌ Disconnected from "' + roomId + '" room at ' + serverUrl);
+    }
+  };
+}
+```
+
+```css
+input { display: block; margin-bottom: 20px; }
+button { margin-left: 10px; }
+```
+
+</Sandpack>
+
+However, if you [think from the Effect's perspective,](#thinking-from-the-effects-perspective) you don't need to think about mounting and unmounting at all. What's important is you've specified what your Effect does to start and stop synchronizing. Today, it has no reactive dependencies. But if you ever want the user to change `roomId` or `serverUrl` over time (and so they'd have to become reactive), your Effect's code won't change. You will only need to add them to the dependencies.
+
+### All variables declared in the component body are reactive {/*all-variables-declared-in-the-component-body-are-reactive*/}
+
+Props and state aren't the only reactive values. Values that you calculate from them are also reactive. If the props or state change, your component will re-render, and the values calculated from them will also change. This is why all variables from the component body used by the Effect should also be in the Effect dependency list.
+
+Let's say that the user can pick a chat server in the dropdown, but they can also configure a default server in settings. Suppose you've already put the settings state in a [context](/learn/scaling-up-with-reducer-and-context) so you read the `settings` from that context. Now you calculate the `serverUrl` based on the selected server from props and the default server from context:
+
+```js {3,5,10}
+function ChatRoom({ roomId, selectedServerUrl }) { // roomId is reactive
+  const settings = useContext(SettingsContext); // settings is reactive
+  const serverUrl = selectedServerUrl ?? settings.defaultServerUrl; // serverUrl is reactive
+  useEffect(() => {
+    const connection = createConnection(serverUrl, roomId); // Your Effect reads roomId and serverUrl
+    connection.connect();
+    return () => {
+      connection.disconnect();
+    };
+  }, [roomId, serverUrl]); // So it needs to re-synchronize when either of them changes!
+  // ...
+}
+```
+
+In this example, `serverUrl` is not a prop or a state variable. It's a regular variable that you calculate during rendering. But it's calculated during rendering, so it can change due to a re-render. This is why it's reactive.
+
+**All values inside the component (including props, state, and variables in your component's body) are reactive. Any reactive value can change on a re-render, so you need to include reactive values as Effect's dependencies.**
+
+In other words, Effects "react" to all values from the component body.
+
+<DeepDive>
+
+#### Can global or mutable values be dependencies? {/*can-global-or-mutable-values-be-dependencies*/}
+
+Mutable values (including global variables) aren't reactive.
+
+**A mutable value like [`location.pathname`](https://developer.mozilla.org/en-US/docs/Web/API/Location/pathname) can't be a dependency.** It's mutable, so it can change at any time completely outside of the React rendering data flow. Changing it wouldn't trigger a re-render of your component. Therefore, even if you specified it in the dependencies, React *wouldn't know* to re-synchronize the Effect when it changes. This also breaks the rules of React because reading mutable data during rendering (which is when you calculate the dependencies) breaks [purity of rendering.](/learn/keeping-components-pure) Instead, you should read and subscribe to an external mutable value with [`useSyncExternalStore`.](/learn/you-might-not-need-an-effect#subscribing-to-an-external-store)
+
+**A mutable value like [`ref.current`](/reference/react/useRef#reference) or things you read from it also can't be a dependency.** The ref object returned by `useRef` itself can be a dependency, but its `current` property is intentionally mutable. It lets you [keep track of something without triggering a re-render.](/learn/referencing-values-with-refs) But since changing it doesn't trigger a re-render, it's not a reactive value, and React won't know to re-run your Effect when it changes.
+
+As you'll learn below on this page, a linter will check for these issues automatically.
+
+</DeepDive>
+
+### React verifies that you specified every reactive value as a dependency {/*react-verifies-that-you-specified-every-reactive-value-as-a-dependency*/}
+
+If your linter is [configured for React,](/learn/editor-setup#linting) it will check that every reactive value used by your Effect's code is declared as its dependency. For example, this is a lint error because both `roomId` and `serverUrl` are reactive:
+
+<Sandpack>
+
+```js
+import { useState, useEffect } from 'react';
+import { createConnection } from './chat.js';
+
+function ChatRoom({ roomId }) { // roomId is reactive
+  const [serverUrl, setServerUrl] = useState('https://localhost:1234'); // serverUrl is reactive
+
+  useEffect(() => {
+    const connection = createConnection(serverUrl, roomId);
+    connection.connect();
+    return () => connection.disconnect();
+  }, []); // <-- Something's wrong here!
+
+  return (
+    <>
+      <label>
+        Server URL:{' '}
+        <input
+          value={serverUrl}
+          onChange={e => setServerUrl(e.target.value)}
+        />
+      </label>
+      <h1>Welcome to the {roomId} room!</h1>
+    </>
+  );
+}
+
+export default function App() {
+  const [roomId, setRoomId] = useState('general');
+  return (
+    <>
+      <label>
+        Choose the chat room:{' '}
+        <select
+          value={roomId}
+          onChange={e => setRoomId(e.target.value)}
+        >
+          <option value="general">general</option>
+          <option value="travel">travel</option>
+          <option value="music">music</option>
+        </select>
+      </label>
+      <hr />
+      <ChatRoom roomId={roomId} />
+    </>
+  );
+}
+```
+
+```js chat.js
+export function createConnection(serverUrl, roomId) {
+  // A real implementation would actually connect to the server
+  return {
+    connect() {
+      console.log('✅ Connecting to "' + roomId + '" room at ' + serverUrl + '...');
+    },
+    disconnect() {
+      console.log('❌ Disconnected from "' + roomId + '" room at ' + serverUrl);
+    }
+  };
+}
+```
+
+```css
+input { display: block; margin-bottom: 20px; }
+button { margin-left: 10px; }
+```
+
+</Sandpack>
+
+This may look like a React error, but really React is pointing out a bug in your code. Both `roomId` and `serverUrl` may change over time, but you're forgetting to re-synchronize your Effect when they change. As a result, you will remain connected to the initial `roomId` and `serverUrl` even after the user picks different values in the UI.
+
+To fix the bug, follow the linter's suggestion to specify `roomId` and `serverUrl` as dependencies of your Effect:
+
+```js {9}
+function ChatRoom({ roomId, serverUrl }) {
+  const [serverUrl, setServerUrl] = useState('https://localhost:1234'); // serverUrl is reactive
+  useEffect(() => {
+    const connection = createConnection(serverUrl, roomId);
+    connection.connect();
+    return () => {
+      connection.disconnect();
+    };
+  }, [serverUrl, roomId]); // ✅ All dependencies declared
+  // ...
+}
+```
+
+Try this fix in the sandbox above. Verify that the linter error is gone, and that the chat re-connects when needed.
+
+<Note>
+
+In some cases, React *knows* that a value never changes even though it's declared inside the component. For example, the [`set` function](/reference/react/useState#setstate) returned from `useState` and the ref object returned by [`useRef`](/reference/react/useRef) are *stable*--they are guaranteed to not change on a re-render. Stable values aren't reactive, so the linter lets you omit them from the list. However, including them is allowed: they won't change, so it doesn't matter.
+
+</Note>
+
+### What to do when you don't want to re-synchronize {/*what-to-do-when-you-dont-want-to-re-synchronize*/}
+
+In the previous example, you've fixed the lint error by listing `roomId` and `serverUrl` as dependencies.
+
+**However, you could instead "prove" to the linter that these values aren't reactive values,** i.e. that they *can't* change as a result of a re-render. For example, if `serverUrl` and `roomId` don't depend on rendering and always have the same values, you can move them outside the component. Now they don't need to be dependencies:
+
+```js {1,2,11}
+const serverUrl = 'https://localhost:1234'; // serverUrl is not reactive
+const roomId = 'general'; // roomId is not reactive
+
+function ChatRoom() {
+  useEffect(() => {
+    const connection = createConnection(serverUrl, roomId);
+    connection.connect();
+    return () => {
+      connection.disconnect();
+    };
+  }, []); // ✅ All dependencies declared
+  // ...
+}
+```
+
+You can also move them *inside the Effect.* They aren't calculated during rendering, so they're not reactive:
+
+```js {3,4,10}
+function ChatRoom() {
+  useEffect(() => {
+    const serverUrl = 'https://localhost:1234'; // serverUrl is not reactive
+    const roomId = 'general'; // roomId is not reactive
+    const connection = createConnection(serverUrl, roomId);
+    connection.connect();
+    return () => {
+      connection.disconnect();
+    };
+  }, []); // ✅ All dependencies declared
+  // ...
+}
+```
+
+**Effects are reactive blocks of code.** They re-synchronize when the values you read inside of them change. Unlike event handlers, which only run once per interaction, Effects run whenever synchronization is necessary.
+
+**You can't "choose" your dependencies.** Your dependencies must include every [reactive value](#all-variables-declared-in-the-component-body-are-reactive) you read in the Effect. The linter enforces this. Sometimes this may lead to problems like infinite loops and to your Effect re-synchronizing too often. Don't fix these problems by suppressing the linter! Here's what to try instead:
+
+* **Check that your Effect represents an independent synchronization process.** If your Effect doesn't synchronize anything, [it might be unnecessary.](/learn/you-might-not-need-an-effect) If it synchronizes several independent things, [split it up.](#each-effect-represents-a-separate-synchronization-process)
+
+* **If you want to read the latest value of props or state without "reacting" to it and re-synchronizing the Effect,** you can split your Effect into a reactive part (which you'll keep in the Effect) and a non-reactive part (which you'll extract into something called an _Event function_). [Read more about separating Events from Effects.](/learn/separating-events-from-effects)
+
+* **Avoid relying on objects and functions as dependencies.** If you create objects and functions during rendering and then read them from an Effect, they will be different on every render. This will cause your Effect to re-synchronize every time. [Read more about removing unnecessary dependencies from your Effects.](/learn/removing-effect-dependencies)
+
+<Pitfall>
+
+The linter is your friend, but its powers are limited. The linter only knows when the dependencies are *wrong*. It doesn't know *the best* way to solve each case. If the linter suggests a dependency, but adding it causes a loop, it doesn't mean the linter should be ignored. It means you need to change the code inside (or outside) the Effect so that that value isn't reactive and doesn't *need* to be a dependency.
+
+If you have an existing codebase, you might have some Effects that suppress the linter like this:
+
+```js {3-4}
+useEffect(() => {
+  // ...
+  // 🔴 Avoid suppressing the linter like this:
+  // eslint-ignore-next-line react-hooks/exhaustive-dependencies
+}, []);
+```
+
+On the [next](/learn/separating-events-from-effects) [pages](/learn/removing-effect-dependencies), you'll learn how to fix this code without breaking the rules. It's always worth fixing!
+
+</Pitfall>
+
+<Recap>
+
+- Components can mount, update, and unmount.
+- Each Effect has a separate lifecycle from the surrounding component.
+- Each Effect describes a separate synchronization process that can *start* and *stop*.
+- When you write and read Effects, you should think from each individual Effect's perspective (how to start and stop synchronization) rather than from the component's perspective (how it mounts, updates, or unmounts).
+- Values declared inside the component body are "reactive".
+- Reactive values should re-synchronize the Effect because they can change over time.
+- The linter verifies that all reactive values used inside the Effect are specified as dependencies.
+- All errors flagged by the linter are legitimate. There's always a way to fix the code that doesn't break the rules.
+
+</Recap>
+
+<Challenges>
+
+#### Fix reconnecting on every keystroke {/*fix-reconnecting-on-every-keystroke*/}
+
+In this example, the `ChatRoom` component connects to the chat room when the component mounts, disconnects when it unmounts, and reconnects when you select a different chat room. This behavior is correct, so you need to keep it working.
+
+However, there is a problem. Whenever you type into the message box input at the bottom, `ChatRoom` *also* reconnects to the chat. (You can notice this by clearing the console and typing into the input.) Fix the issue so that this doesn't happen.
+
+<Hint>
+
+You might need to add a dependency array for this Effect. What dependencies should be there?
+
+</Hint>
+
+<Sandpack>
+
+```js
+import { useState, useEffect } from 'react';
+import { createConnection } from './chat.js';
+
+const serverUrl = 'https://localhost:1234';
+
+function ChatRoom({ roomId }) {
+  const [message, setMessage] = useState('');
+
+  useEffect(() => {
+    const connection = createConnection(serverUrl, roomId);
+    connection.connect();
+    return () => connection.disconnect();
+  });
+
+  return (
+    <>
+      <h1>Welcome to the {roomId} room!</h1>
+      <input
+        value={message}
+        onChange={e => setMessage(e.target.value)}
+      />
+    </>
+  );
+}
+
+export default function App() {
+  const [roomId, setRoomId] = useState('general');
+  return (
+    <>
+      <label>
+        Choose the chat room:{' '}
+        <select
+          value={roomId}
+          onChange={e => setRoomId(e.target.value)}
+        >
+          <option value="general">general</option>
+          <option value="travel">travel</option>
+          <option value="music">music</option>
+        </select>
+      </label>
+      <hr />
+      <ChatRoom roomId={roomId} />
+    </>
+  );
+}
+```
+
+```js chat.js
+export function createConnection(serverUrl, roomId) {
+  // A real implementation would actually connect to the server
+  return {
+    connect() {
+      console.log('✅ Connecting to "' + roomId + '" room at ' + serverUrl + '...');
+    },
+    disconnect() {
+      console.log('❌ Disconnected from "' + roomId + '" room at ' + serverUrl);
+    }
+  };
+}
+```
+
+```css
+input { display: block; margin-bottom: 20px; }
+button { margin-left: 10px; }
+```
+
+</Sandpack>
+
+<Solution>
+
+This Effect didn't have a dependency array at all, so it re-synchronized after every re-render. First, add a dependency array. Then, make sure that every reactive value used by the Effect is specified in the array. For example, `roomId` is reactive (because it's a prop), so it should be included in the array. This ensures that when the user selects a different room, the chat reconnects. On the other hand, `serverUrl` is defined outside the component. This is why it doesn't need to be in the array.
+
+<Sandpack>
+
+```js
+import { useState, useEffect } from 'react';
+import { createConnection } from './chat.js';
+
+const serverUrl = 'https://localhost:1234';
+
+function ChatRoom({ roomId }) {
+  const [message, setMessage] = useState('');
+
+  useEffect(() => {
+    const connection = createConnection(serverUrl, roomId);
+    connection.connect();
+    return () => connection.disconnect();
+  }, [roomId]);
+
+  return (
+    <>
+      <h1>Welcome to the {roomId} room!</h1>
+      <input
+        value={message}
+        onChange={e => setMessage(e.target.value)}
+      />
+    </>
+  );
+}
+
+export default function App() {
+  const [roomId, setRoomId] = useState('general');
+  return (
+    <>
+      <label>
+        Choose the chat room:{' '}
+        <select
+          value={roomId}
+          onChange={e => setRoomId(e.target.value)}
+        >
+          <option value="general">general</option>
+          <option value="travel">travel</option>
+          <option value="music">music</option>
+        </select>
+      </label>
+      <hr />
+      <ChatRoom roomId={roomId} />
+    </>
+  );
+}
+```
+
+```js chat.js
+export function createConnection(serverUrl, roomId) {
+  // A real implementation would actually connect to the server
+  return {
+    connect() {
+      console.log('✅ Connecting to "' + roomId + '" room at ' + serverUrl + '...');
+    },
+    disconnect() {
+      console.log('❌ Disconnected from "' + roomId + '" room at ' + serverUrl);
+    }
+  };
+}
+```
+
+```css
+input { display: block; margin-bottom: 20px; }
+button { margin-left: 10px; }
+```
+
+</Sandpack>
+
+</Solution>
+
+#### Switch synchronization on and off {/*switch-synchronization-on-and-off*/}
+
+In this example, an Effect subscribes to the window [`pointermove`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointermove_event) event to move a pink dot on the screen. Try hovering over the preview area (or touching the screen if you're on a mobile device), and see how the pink dot follows your movement.
+
+There is also a checkbox. Ticking the checkbox toggles the `canMove` state variable, but this state variable is not used anywhere in the code. Your task is to change the code so that when `canMove` is `false` (the checkbox is ticked off), the dot should stop moving. After you toggle the checkbox back on (and set `canMove` to `true`), the box should follow the movement again. In other words, whether the dot can move or not should stay synchronized to whether the checkbox is checked.
+
+<Hint>
+
+You can't declare an Effect conditionally. However, the code inside the Effect can use conditions!
+
+</Hint>
+
+<Sandpack>
+
+```js
+import { useState, useEffect } from 'react';
+
+export default function App() {
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const [canMove, setCanMove] = useState(true);
+
+  useEffect(() => {
+    function handleMove(e) {
+      setPosition({ x: e.clientX, y: e.clientY });
+    }
+    window.addEventListener('pointermove', handleMove);
+    return () => window.removeEventListener('pointermove', handleMove);
+  }, []);
+
+  return (
+    <>
+      <label>
+        <input type="checkbox"
+          checked={canMove}
+          onChange={e => setCanMove(e.target.checked)} 
+        />
+        The dot is allowed to move
+      </label>
+      <hr />
+      <div style={{
+        position: 'absolute',
+        backgroundColor: 'pink',
+        borderRadius: '50%',
+        opacity: 0.6,
+        transform: `translate(${position.x}px, ${position.y}px)`,
+        pointerEvents: 'none',
+        left: -20,
+        top: -20,
+        width: 40,
+        height: 40,
+      }} />
+    </>
+  );
+}
+```
+
+```css
+body {
+  height: 200px;
+}
+```
+
+</Sandpack>
+
+<Solution>
+
+One solution is to wrap the `setPosition` call into an `if (canMove) { ... }` condition:
+
+<Sandpack>
+
+```js
+import { useState, useEffect } from 'react';
+
+export default function App() {
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const [canMove, setCanMove] = useState(true);
+
+  useEffect(() => {
+    function handleMove(e) {
+      if (canMove) {
+        setPosition({ x: e.clientX, y: e.clientY });
+      }
+    }
+    window.addEventListener('pointermove', handleMove);
+    return () => window.removeEventListener('pointermove', handleMove);
+  }, [canMove]);
+
+  return (
+    <>
+      <label>
+        <input type="checkbox"
+          checked={canMove}
+          onChange={e => setCanMove(e.target.checked)} 
+        />
+        The dot is allowed to move
+      </label>
+      <hr />
+      <div style={{
+        position: 'absolute',
+        backgroundColor: 'pink',
+        borderRadius: '50%',
+        opacity: 0.6,
+        transform: `translate(${position.x}px, ${position.y}px)`,
+        pointerEvents: 'none',
+        left: -20,
+        top: -20,
+        width: 40,
+        height: 40,
+      }} />
+    </>
+  );
+}
+```
+
+```css
+body {
+  height: 200px;
+}
+```
+
+</Sandpack>
+
+Alternatively, you could wrap the *event subscription* logic into an `if (canMove) { ... }` condition:
+
+<Sandpack>
+
+```js
+import { useState, useEffect } from 'react';
+
+export default function App() {
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const [canMove, setCanMove] = useState(true);
+
+  useEffect(() => {
+    function handleMove(e) {
+      setPosition({ x: e.clientX, y: e.clientY });
+    }
+    if (canMove) {
+      window.addEventListener('pointermove', handleMove);
+      return () => window.removeEventListener('pointermove', handleMove);
+    }
+  }, [canMove]);
+
+  return (
+    <>
+      <label>
+        <input type="checkbox"
+          checked={canMove}
+          onChange={e => setCanMove(e.target.checked)} 
+        />
+        The dot is allowed to move
+      </label>
+      <hr />
+      <div style={{
+        position: 'absolute',
+        backgroundColor: 'pink',
+        borderRadius: '50%',
+        opacity: 0.6,
+        transform: `translate(${position.x}px, ${position.y}px)`,
+        pointerEvents: 'none',
+        left: -20,
+        top: -20,
+        width: 40,
+        height: 40,
+      }} />
+    </>
+  );
+}
+```
+
+```css
+body {
+  height: 200px;
+}
+```
+
+</Sandpack>
+
+In both of these cases, `canMove` is a reactive variable that you read inside the Effect. This is why it must be specified in the list of Effect dependencies. This ensures that the Effect re-synchronizes after every change to its value.
+
+</Solution>
+
+#### Investigate a stale value bug {/*investigate-a-stale-value-bug*/}
+
+In this example, the pink dot should move when the checkbox is on, and should stop moving when the checkbox is off. The logic for this has already been implemented: the `handleMove` event handler checks the `canMove` state variable.
+
+However, for some reason, the `canMove` state variable inside `handleMove` appears to be "stale": it's always `true`, even after you tick off the checkbox. How is this possible? Find the mistake in the code and fix it.
+
+<Hint>
+
+If you see a linter rule being suppressed, remove the suppression! That's where the mistakes usually are.
+
+</Hint>
+
+<Sandpack>
+
+```js
+import { useState, useEffect } from 'react';
+
+export default function App() {
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const [canMove, setCanMove] = useState(true);
+
+  function handleMove(e) {
+    if (canMove) {
+      setPosition({ x: e.clientX, y: e.clientY });
+    }
+  }
+
+  useEffect(() => {
+    window.addEventListener('pointermove', handleMove);
+    return () => window.removeEventListener('pointermove', handleMove);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <>
+      <label>
+        <input type="checkbox"
+          checked={canMove}
+          onChange={e => setCanMove(e.target.checked)} 
+        />
+        The dot is allowed to move
+      </label>
+      <hr />
+      <div style={{
+        position: 'absolute',
+        backgroundColor: 'pink',
+        borderRadius: '50%',
+        opacity: 0.6,
+        transform: `translate(${position.x}px, ${position.y}px)`,
+        pointerEvents: 'none',
+        left: -20,
+        top: -20,
+        width: 40,
+        height: 40,
+      }} />
+    </>
+  );
+}
+```
+
+```css
+body {
+  height: 200px;
+}
+```
+
+</Sandpack>
+
+<Solution>
+
+The problem with the original code was suppressing the dependency linter. If you remove the suppression, you'll see that this Effect depends on the `handleMove` function. This makes sense: `handleMove` is declared inside the component body, which makes it a reactive value. Every reactive value must be specified as a depedency, or it can potentially get stale over time!
+
+The author of the original code has "lied" to React by saying that the Effect does not depend (`[]`) on any reactive values. This is why React did not re-synchronize the Effect after `canMove` has changed (and `handleMove` with it). Because React did not re-synchronize the Effect, the `handleMove` attached as a listener is the `handleMove` function created during the initial render. During the initial render, `canMove` was `true`, which is why `handleMove` from the initial render will forever see that value.
+
+**If you never suppress the linter, you will never see problems with stale values.** There are a few different ways to solve this bug, but you should always start by removing the linter suppression. Then change the code to fix the lint error.
+
+You can change the Effect dependencies to `[handleMove]`, but since it's going to be a newly defined function for every render, you might as well remove dependencies array altogether. Then the Effect *will* re-synchronize after every re-render:
+
+<Sandpack>
+
+```js
+import { useState, useEffect } from 'react';
+
+export default function App() {
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const [canMove, setCanMove] = useState(true);
+
+  function handleMove(e) {
+    if (canMove) {
+      setPosition({ x: e.clientX, y: e.clientY });
+    }
+  }
+
+  useEffect(() => {
+    window.addEventListener('pointermove', handleMove);
+    return () => window.removeEventListener('pointermove', handleMove);
+  });
+
+  return (
+    <>
+      <label>
+        <input type="checkbox"
+          checked={canMove}
+          onChange={e => setCanMove(e.target.checked)} 
+        />
+        The dot is allowed to move
+      </label>
+      <hr />
+      <div style={{
+        position: 'absolute',
+        backgroundColor: 'pink',
+        borderRadius: '50%',
+        opacity: 0.6,
+        transform: `translate(${position.x}px, ${position.y}px)`,
+        pointerEvents: 'none',
+        left: -20,
+        top: -20,
+        width: 40,
+        height: 40,
+      }} />
+    </>
+  );
+}
+```
+
+```css
+body {
+  height: 200px;
+}
+```
+
+</Sandpack>
+
+This solution works, but it's not ideal. If you put `console.log('Resubscribing')` inside the Effect, you'll notice that it resubscribes after every re-render. Resubscribing is fast, but it would still be nice to avoid doing it so often.
+
+A better fix would be to move the `handleMove` function *inside* the Effect. Then `handleMove` won't be a reactive value, and so your Effect won't depend on a function. Instead, it will need to depend on `canMove` which your code now reads from inside the Effect. This matches the behavior you wanted, since your Effect will now stay synchronized with the value of `canMove`:
+
+<Sandpack>
+
+```js
+import { useState, useEffect } from 'react';
+
+export default function App() {
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const [canMove, setCanMove] = useState(true);
+
+  useEffect(() => {
+    function handleMove(e) {
+      if (canMove) {
+        setPosition({ x: e.clientX, y: e.clientY });
+      }
+    }
+
+    window.addEventListener('pointermove', handleMove);
+    return () => window.removeEventListener('pointermove', handleMove);
+  }, [canMove]);
+
+  return (
+    <>
+      <label>
+        <input type="checkbox"
+          checked={canMove}
+          onChange={e => setCanMove(e.target.checked)} 
+        />
+        The dot is allowed to move
+      </label>
+      <hr />
+      <div style={{
+        position: 'absolute',
+        backgroundColor: 'pink',
+        borderRadius: '50%',
+        opacity: 0.6,
+        transform: `translate(${position.x}px, ${position.y}px)`,
+        pointerEvents: 'none',
+        left: -20,
+        top: -20,
+        width: 40,
+        height: 40,
+      }} />
+    </>
+  );
+}
+```
+
+```css
+body {
+  height: 200px;
+}
+```
+
+</Sandpack>
+
+Try adding `console.log('Resubscribing')` inside the Effect body and notice that now it only resubscribes when you toggle the checkbox (`canMove` changes) or edit the code. This makes it better than the previous approach that always resubscribed.
+
+You'll learn a more general approach to this type of problem in [Separating Events from Effects.](/learn/separating-events-from-effects)
+
+</Solution>
+
+#### Fix a connection switch {/*fix-a-connection-switch*/}
+
+In this example, the chat service in `chat.js` exposes two different APIs: `createEncryptedConnection` and `createUnencryptedConnection`. The root `App` component lets the user choose whether to use encryption or not, and then passes down the corresponding API method to the child `ChatRoom` component as the `createConnection` prop.
+
+Notice that initially, the console logs say the connection is not encrypted. Try toggling the checkbox on: nothing will happen. However, if you change the selected room after that, then the chat will reconnect *and* enable encryption (as you'll see from the console messages). This is a bug. Fix the bug so that toggling the checkbox *also* causes the chat to reconnect.
+
+<Hint>
+
+Suppressing the linter is always suspicious. Could this be a bug?
+
+</Hint>
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+import ChatRoom from './ChatRoom.js';
+import {
+  createEncryptedConnection,
+  createUnencryptedConnection,
+} from './chat.js';
+
+export default function App() {
+  const [roomId, setRoomId] = useState('general');
+  const [isEncrypted, setIsEncrypted] = useState(false);
+  return (
+    <>
+      <label>
+        Choose the chat room:{' '}
+        <select
+          value={roomId}
+          onChange={e => setRoomId(e.target.value)}
+        >
+          <option value="general">general</option>
+          <option value="travel">travel</option>
+          <option value="music">music</option>
+        </select>
+      </label>
+      <label>
+        <input
+          type="checkbox"
+          checked={isEncrypted}
+          onChange={e => setIsEncrypted(e.target.checked)}
+        />
+        Enable encryption
+      </label>
+      <hr />
+      <ChatRoom
+        roomId={roomId}
+        createConnection={isEncrypted ?
+          createEncryptedConnection :
+          createUnencryptedConnection
+        }
+      />
+    </>
+  );
+}
+```
+
+```js ChatRoom.js active
+import { useState, useEffect } from 'react';
+
+export default function ChatRoom({ roomId, createConnection }) {
+  useEffect(() => {
+    const connection = createConnection(roomId);
+    connection.connect();
+    return () => connection.disconnect();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [roomId]);
+
+  return <h1>Welcome to the {roomId} room!</h1>;
+}
+```
+
+```js chat.js
+export function createEncryptedConnection(roomId) {
+  // A real implementation would actually connect to the server
+  return {
+    connect() {
+      console.log('✅ 🔐 Connecting to "' + roomId + '... (encrypted)');
+    },
+    disconnect() {
+      console.log('❌ 🔐 Disconnected from "' + roomId + '" room (encrypted)');
+    }
+  };
+}
+
+export function createUnencryptedConnection(roomId) {
+  // A real implementation would actually connect to the server
+  return {
+    connect() {
+      console.log('✅ Connecting to "' + roomId + '... (unencrypted)');
+    },
+    disconnect() {
+      console.log('❌ Disconnected from "' + roomId + '" room (unencrypted)');
+    }
+  };
+}
+```
+
+```css
+label { display: block; margin-bottom: 10px; }
+```
+
+</Sandpack>
+
+<Solution>
+
+If you remove the linter suppression, you will see a lint error. The problem is that `createConnection` is a prop, so it's a reactive value. It can change over time! (And indeed, it should--when the user ticks the checkbox, the parent component passes a different value of the `createConnection` prop.) This is why it should be a dependency. Include it in the list to fix the bug:
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+import ChatRoom from './ChatRoom.js';
+import {
+  createEncryptedConnection,
+  createUnencryptedConnection,
+} from './chat.js';
+
+export default function App() {
+  const [roomId, setRoomId] = useState('general');
+  const [isEncrypted, setIsEncrypted] = useState(false);
+  return (
+    <>
+      <label>
+        Choose the chat room:{' '}
+        <select
+          value={roomId}
+          onChange={e => setRoomId(e.target.value)}
+        >
+          <option value="general">general</option>
+          <option value="travel">travel</option>
+          <option value="music">music</option>
+        </select>
+      </label>
+      <label>
+        <input
+          type="checkbox"
+          checked={isEncrypted}
+          onChange={e => setIsEncrypted(e.target.checked)}
+        />
+        Enable encryption
+      </label>
+      <hr />
+      <ChatRoom
+        roomId={roomId}
+        createConnection={isEncrypted ?
+          createEncryptedConnection :
+          createUnencryptedConnection
+        }
+      />
+    </>
+  );
+}
+```
+
+```js ChatRoom.js active
+import { useState, useEffect } from 'react';
+
+export default function ChatRoom({ roomId, createConnection }) {
+  useEffect(() => {
+    const connection = createConnection(roomId);
+    connection.connect();
+    return () => connection.disconnect();
+  }, [roomId, createConnection]);
+
+  return <h1>Welcome to the {roomId} room!</h1>;
+}
+```
+
+```js chat.js
+export function createEncryptedConnection(roomId) {
+  // A real implementation would actually connect to the server
+  return {
+    connect() {
+      console.log('✅ 🔐 Connecting to "' + roomId + '... (encrypted)');
+    },
+    disconnect() {
+      console.log('❌ 🔐 Disconnected from "' + roomId + '" room (encrypted)');
+    }
+  };
+}
+
+export function createUnencryptedConnection(roomId) {
+  // A real implementation would actually connect to the server
+  return {
+    connect() {
+      console.log('✅ Connecting to "' + roomId + '... (unencrypted)');
+    },
+    disconnect() {
+      console.log('❌ Disconnected from "' + roomId + '" room (unencrypted)');
+    }
+  };
+}
+```
+
+```css
+label { display: block; margin-bottom: 10px; }
+```
+
+</Sandpack>
+
+It is correct that `createConnection` is a dependency. However, this code is a bit fragile because someone could edit the `App` component to pass an inline function as the value of this prop. In that case, its value would be different every time the `App` component re-renders, so the Effect might re-synchronize too often. To avoid this, you can pass `isEncrypted` down instead:
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+import ChatRoom from './ChatRoom.js';
+
+export default function App() {
+  const [roomId, setRoomId] = useState('general');
+  const [isEncrypted, setIsEncrypted] = useState(false);
+  return (
+    <>
+      <label>
+        Choose the chat room:{' '}
+        <select
+          value={roomId}
+          onChange={e => setRoomId(e.target.value)}
+        >
+          <option value="general">general</option>
+          <option value="travel">travel</option>
+          <option value="music">music</option>
+        </select>
+      </label>
+      <label>
+        <input
+          type="checkbox"
+          checked={isEncrypted}
+          onChange={e => setIsEncrypted(e.target.checked)}
+        />
+        Enable encryption
+      </label>
+      <hr />
+      <ChatRoom
+        roomId={roomId}
+        isEncrypted={isEncrypted}
+      />
+    </>
+  );
+}
+```
+
+```js ChatRoom.js active
+import { useState, useEffect } from 'react';
+import {
+  createEncryptedConnection,
+  createUnencryptedConnection,
+} from './chat.js';
+
+export default function ChatRoom({ roomId, isEncrypted }) {
+  useEffect(() => {
+    const createConnection = isEncrypted ?
+      createEncryptedConnection :
+      createUnencryptedConnection;
+    const connection = createConnection(roomId);
+    connection.connect();
+    return () => connection.disconnect();
+  }, [roomId, isEncrypted]);
+
+  return <h1>Welcome to the {roomId} room!</h1>;
+}
+```
+
+```js chat.js
+export function createEncryptedConnection(roomId) {
+  // A real implementation would actually connect to the server
+  return {
+    connect() {
+      console.log('✅ 🔐 Connecting to "' + roomId + '... (encrypted)');
+    },
+    disconnect() {
+      console.log('❌ 🔐 Disconnected from "' + roomId + '" room (encrypted)');
+    }
+  };
+}
+
+export function createUnencryptedConnection(roomId) {
+  // A real implementation would actually connect to the server
+  return {
+    connect() {
+      console.log('✅ Connecting to "' + roomId + '... (unencrypted)');
+    },
+    disconnect() {
+      console.log('❌ Disconnected from "' + roomId + '" room (unencrypted)');
+    }
+  };
+}
+```
+
+```css
+label { display: block; margin-bottom: 10px; }
+```
+
+</Sandpack>
+
+In this version, the `App` component passes a boolean prop instead of a function. Inside the Effect, you decide which function to use. Since both `createEncryptedConnection` and `createUnencryptedConnection` are declared outside the component, they aren't reactive, and don't need to be dependencies. You'll learn more about this in [Removing Effect Dependencies.](/learn/removing-effect-dependencies)
+
+</Solution>
+
+#### Populate a chain of select boxes {/*populate-a-chain-of-select-boxes*/}
+
+In this example, there are two select boxes. One select box lets the user pick a planet. Another select box lets the user pick a place *on that planet.* The second box doesn't work yet. Your task is to make it show the places on the chosen planet.
+
+Look at how the first select box works. It populates the `planetList` state with the result from the `"/planets"` API call. The currently selected planet's ID is kept in the `planetId` state variable. You need to find where to add some additional code so that the `placeList` state variable is populated with the result of the `"/planets/" + planetId + "/places"` API call.
+
+If you implement this right, selecting a planet should populate the place list. Changing a planet should change the place list.
+
+<Hint>
+
+If you have two independent synchronization processes, you need to write two separate Effects.
+
+</Hint>
+
+<Sandpack>
+
+```js App.js
+import { useState, useEffect } from 'react';
+import { fetchData } from './api.js';
+
+export default function Page() {
+  const [planetList, setPlanetList] = useState([])
+  const [planetId, setPlanetId] = useState('');
+
+  const [placeList, setPlaceList] = useState([]);
+  const [placeId, setPlaceId] = useState('');
+
+  useEffect(() => {
+    let ignore = false;
+    fetchData('/planets').then(result => {
+      if (!ignore) {
+        console.log('Fetched a list of planets.');
+        setPlanetList(result);
+        setPlanetId(result[0].id); // Select the first planet
+      }
+    });
+    return () => {
+      ignore = true;
+    }
+  }, []);
+
+  return (
+    <>
+      <label>
+        Pick a planet:{' '}
+        <select value={planetId} onChange={e => {
+          setPlanetId(e.target.value);
+        }}>
+          {planetList.map(planet =>
+            <option key={planet.id} value={planet.id}>{planet.name}</option>
+          )}
+        </select>
+      </label>
+      <label>
+        Pick a place:{' '}
+        <select value={placeId} onChange={e => {
+          setPlaceId(e.target.value);
+        }}>
+          {placeList.map(place =>
+            <option key={place.id} value={place.id}>{place.name}</option>
+          )}
+        </select>
+      </label>
+      <hr />
+      <p>You are going to: {placeId || '???'} on {planetId || '???'} </p>
+    </>
+  );
+}
+```
+
+```js api.js hidden
+export function fetchData(url) {
+  if (url === '/planets') {
+    return fetchPlanets();
+  } else if (url.startsWith('/planets/')) {
+    const match = url.match(/^\/planets\/([\w-]+)\/places(\/)?$/);
+    if (!match || !match[1] || !match[1].length) {
+      throw Error('Expected URL like "/planets/earth/places". Received: "' + url + '".');
+    }
+    return fetchPlaces(match[1]);
+  } else throw Error('Expected URL like "/planets" or "/planets/earth/places". Received: "' + url + '".');
+}
+
+async function fetchPlanets() {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve([{
+        id: 'earth',
+        name: 'Earth'
+      }, {
+        id: 'venus',
+        name: 'Venus'
+      }, {
+        id: 'mars',
+        name: 'Mars'        
+      }]);
+    }, 1000);
+  });
+}
+
+async function fetchPlaces(planetId) {
+  if (typeof planetId !== 'string') {
+    throw Error(
+      'fetchPlaces(planetId) expects a string argument. ' +
+      'Instead received: ' + planetId + '.'
+    );
+  }
+  return new Promise(resolve => {
+    setTimeout(() => {
+      if (planetId === 'earth') {
+        resolve([{
+          id: 'laos',
+          name: 'Laos'
+        }, {
+          id: 'spain',
+          name: 'Spain'
+        }, {
+          id: 'vietnam',
+          name: 'Vietnam'        
+        }]);
+      } else if (planetId === 'venus') {
+        resolve([{
+          id: 'aurelia',
+          name: 'Aurelia'
+        }, {
+          id: 'diana-chasma',
+          name: 'Diana Chasma'
+        }, {
+          id: 'kumsong-vallis',
+          name: 'Kŭmsŏng Vallis'        
+        }]);
+      } else if (planetId === 'mars') {
+        resolve([{
+          id: 'aluminum-city',
+          name: 'Aluminum City'
+        }, {
+          id: 'new-new-york',
+          name: 'New New York'
+        }, {
+          id: 'vishniac',
+          name: 'Vishniac'
+        }]);
+      } else throw Error('Uknown planet ID: ' + planetId);
+    }, 1000);
+  });
+}
+```
+
+```css
+label { display: block; margin-bottom: 10px; }
+```
+
+</Sandpack>
+
+<Solution>
+
+There are two independent synchronization processes:
+
+- The first select box is synchronized to the remote list of planets.
+- The second select box is synchronized to the remote list of places for the current `planetId`.
+
+This is why it makes sense to describe them as two separate Effects. Here's an example of how you could do this:
+
+<Sandpack>
+
+```js App.js
+import { useState, useEffect } from 'react';
+import { fetchData } from './api.js';
+
+export default function Page() {
+  const [planetList, setPlanetList] = useState([])
+  const [planetId, setPlanetId] = useState('');
+
+  const [placeList, setPlaceList] = useState([]);
+  const [placeId, setPlaceId] = useState('');
+
+  useEffect(() => {
+    let ignore = false;
+    fetchData('/planets').then(result => {
+      if (!ignore) {
+        console.log('Fetched a list of planets.');
+        setPlanetList(result);
+        setPlanetId(result[0].id); // Select the first planet
+      }
+    });
+    return () => {
+      ignore = true;
+    }
+  }, []);
+
+  useEffect(() => {
+    if (planetId === '') {
+      // Nothing is selected in the first box yet
+      return;
+    }
+
+    let ignore = false;
+    fetchData('/planets/' + planetId + '/places').then(result => {
+      if (!ignore) {
+        console.log('Fetched a list of places on "' + planetId + '".');
+        setPlaceList(result);
+        setPlaceId(result[0].id); // Select the first place
+      }
+    });
+    return () => {
+      ignore = true;
+    }
+  }, [planetId]);
+
+  return (
+    <>
+      <label>
+        Pick a planet:{' '}
+        <select value={planetId} onChange={e => {
+          setPlanetId(e.target.value);
+        }}>
+          {planetList.map(planet =>
+            <option key={planet.id} value={planet.id}>{planet.name}</option>
+          )}
+        </select>
+      </label>
+      <label>
+        Pick a place:{' '}
+        <select value={placeId} onChange={e => {
+          setPlaceId(e.target.value);
+        }}>
+          {placeList.map(place =>
+            <option key={place.id} value={place.id}>{place.name}</option>
+          )}
+        </select>
+      </label>
+      <hr />
+      <p>You are going to: {placeId || '???'} on {planetId || '???'} </p>
+    </>
+  );
+}
+```
+
+```js api.js hidden
+export function fetchData(url) {
+  if (url === '/planets') {
+    return fetchPlanets();
+  } else if (url.startsWith('/planets/')) {
+    const match = url.match(/^\/planets\/([\w-]+)\/places(\/)?$/);
+    if (!match || !match[1] || !match[1].length) {
+      throw Error('Expected URL like "/planets/earth/places". Received: "' + url + '".');
+    }
+    return fetchPlaces(match[1]);
+  } else throw Error('Expected URL like "/planets" or "/planets/earth/places". Received: "' + url + '".');
+}
+
+async function fetchPlanets() {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve([{
+        id: 'earth',
+        name: 'Earth'
+      }, {
+        id: 'venus',
+        name: 'Venus'
+      }, {
+        id: 'mars',
+        name: 'Mars'        
+      }]);
+    }, 1000);
+  });
+}
+
+async function fetchPlaces(planetId) {
+  if (typeof planetId !== 'string') {
+    throw Error(
+      'fetchPlaces(planetId) expects a string argument. ' +
+      'Instead received: ' + planetId + '.'
+    );
+  }
+  return new Promise(resolve => {
+    setTimeout(() => {
+      if (planetId === 'earth') {
+        resolve([{
+          id: 'laos',
+          name: 'Laos'
+        }, {
+          id: 'spain',
+          name: 'Spain'
+        }, {
+          id: 'vietnam',
+          name: 'Vietnam'        
+        }]);
+      } else if (planetId === 'venus') {
+        resolve([{
+          id: 'aurelia',
+          name: 'Aurelia'
+        }, {
+          id: 'diana-chasma',
+          name: 'Diana Chasma'
+        }, {
+          id: 'kumsong-vallis',
+          name: 'Kŭmsŏng Vallis'        
+        }]);
+      } else if (planetId === 'mars') {
+        resolve([{
+          id: 'aluminum-city',
+          name: 'Aluminum City'
+        }, {
+          id: 'new-new-york',
+          name: 'New New York'
+        }, {
+          id: 'vishniac',
+          name: 'Vishniac'
+        }]);
+      } else throw Error('Uknown planet ID: ' + planetId);
+    }, 1000);
+  });
+}
+```
+
+```css
+label { display: block; margin-bottom: 10px; }
+```
+
+</Sandpack>
+
+This code is a bit repetitive. However, that's not a good reason to combine it into a single Effect! If you did this, you'd have to combine both Effect's dependencies into one list, and then changing the planet would refetch the list of all planets. Effects are not a tool for code reuse.
+
+Instead, to reduce repetition, you can extract some logic into a custom Hook like `useSelectOptions` below:
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+import { useSelectOptions } from './useSelectOptions.js';
+
+export default function Page() {
+  const [
+    planetList,
+    planetId,
+    setPlanetId
+  ] = useSelectOptions('/planets');
+
+  const [
+    placeList,
+    placeId,
+    setPlaceId
+  ] = useSelectOptions(planetId ? `/planets/${planetId}/places` : null);
+
+  return (
+    <>
+      <label>
+        Pick a planet:{' '}
+        <select value={planetId} onChange={e => {
+          setPlanetId(e.target.value);
+        }}>
+          {planetList?.map(planet =>
+            <option key={planet.id} value={planet.id}>{planet.name}</option>
+          )}
+        </select>
+      </label>
+      <label>
+        Pick a place:{' '}
+        <select value={placeId} onChange={e => {
+          setPlaceId(e.target.value);
+        }}>
+          {placeList?.map(place =>
+            <option key={place.id} value={place.id}>{place.name}</option>
+          )}
+        </select>
+      </label>
+      <hr />
+      <p>You are going to: {placeId || '...'} on {planetId || '...'} </p>
+    </>
+  );
+}
+```
+
+```js useSelectOptions.js
+import { useState, useEffect } from 'react';
+import { fetchData } from './api.js';
+
+export function useSelectOptions(url) {
+  const [list, setList] = useState(null);
+  const [selectedId, setSelectedId] = useState('');
+  useEffect(() => {
+    if (url === null) {
+      return;
+    }
+
+    let ignore = false;
+    fetchData(url).then(result => {
+      if (!ignore) {
+        setList(result);
+        setSelectedId(result[0].id);
+      }
+    });
+    return () => {
+      ignore = true;
+    }
+  }, [url]);
+  return [list, selectedId, setSelectedId];
+}
+```
+
+```js api.js hidden
+export function fetchData(url) {
+  if (url === '/planets') {
+    return fetchPlanets();
+  } else if (url.startsWith('/planets/')) {
+    const match = url.match(/^\/planets\/([\w-]+)\/places(\/)?$/);
+    if (!match || !match[1] || !match[1].length) {
+      throw Error('Expected URL like "/planets/earth/places". Received: "' + url + '".');
+    }
+    return fetchPlaces(match[1]);
+  } else throw Error('Expected URL like "/planets" or "/planets/earth/places". Received: "' + url + '".');
+}
+
+async function fetchPlanets() {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve([{
+        id: 'earth',
+        name: 'Earth'
+      }, {
+        id: 'venus',
+        name: 'Venus'
+      }, {
+        id: 'mars',
+        name: 'Mars'        
+      }]);
+    }, 1000);
+  });
+}
+
+async function fetchPlaces(planetId) {
+  if (typeof planetId !== 'string') {
+    throw Error(
+      'fetchPlaces(planetId) expects a string argument. ' +
+      'Instead received: ' + planetId + '.'
+    );
+  }
+  return new Promise(resolve => {
+    setTimeout(() => {
+      if (planetId === 'earth') {
+        resolve([{
+          id: 'laos',
+          name: 'Laos'
+        }, {
+          id: 'spain',
+          name: 'Spain'
+        }, {
+          id: 'vietnam',
+          name: 'Vietnam'        
+        }]);
+      } else if (planetId === 'venus') {
+        resolve([{
+          id: 'aurelia',
+          name: 'Aurelia'
+        }, {
+          id: 'diana-chasma',
+          name: 'Diana Chasma'
+        }, {
+          id: 'kumsong-vallis',
+          name: 'Kŭmsŏng Vallis'        
+        }]);
+      } else if (planetId === 'mars') {
+        resolve([{
+          id: 'aluminum-city',
+          name: 'Aluminum City'
+        }, {
+          id: 'new-new-york',
+          name: 'New New York'
+        }, {
+          id: 'vishniac',
+          name: 'Vishniac'
+        }]);
+      } else throw Error('Uknown planet ID: ' + planetId);
+    }, 1000);
+  });
+}
+```
+
+```css
+label { display: block; margin-bottom: 10px; }
+```
+
+</Sandpack>
+
+Check the `useSelectOptions.js` tab in the sandbox to see how it works. Ideally, most Effects in your application should eventually be replaced by custom Hooks, whether written by you or by the community. Custom Hooks hide the synchronization logic, so the calling component doesn't know about the Effect. As you keep working on your app, you'll develop a palette of Hooks to choose from, and eventually you won't need to write Effects in your components very often.
+
+</Solution>
+
+</Challenges>
diff --git a/beta/src/content/learn/managing-state.md b/beta/src/content/learn/managing-state.md
new file mode 100644
index 000000000..4df058106
--- /dev/null
+++ b/beta/src/content/learn/managing-state.md
@@ -0,0 +1,1017 @@
+---
+title: Managing State
+---
+
+<Intro>
+
+As your application grows, it helps to be more intentional about how your state is organized and how the data flows between your components. Redundant or duplicate state is a common source of bugs. In this chapter, you'll learn how to structure your state well, how to keep your state update logic maintainable, and how to share state between distant components.
+
+</Intro>
+
+<YouWillLearn isChapter={true}>
+
+* [How to think about UI changes as state changes](/learn/reacting-to-input-with-state)
+* [How to structure state well](/learn/choosing-the-state-structure)
+* [How to "lift state up" to share it between components](/learn/sharing-state-between-components)
+* [How to control whether the state gets preserved or reset](/learn/preserving-and-resetting-state)
+* [How to consolidate complex state logic in a function](/learn/extracting-state-logic-into-a-reducer)
+* [How to pass information without "prop drilling"](/learn/passing-data-deeply-with-context)
+* [How to scale state management as your app grows](/learn/scaling-up-with-reducer-and-context)
+
+</YouWillLearn>
+
+## Reacting to input with state {/*reacting-to-input-with-state*/}
+
+With React, you won't modify the UI from code directly. For example, you won't write commands like "disable the button", "enable the button", "show the success message", etc. Instead, you will describe the UI you want to see for the different visual states of your component ("initial state", "typing state", "success state"), and then trigger the state changes in response to user input. This is similar to how designers think about UI.
+
+Here is a quiz form built using React. Note how it uses the `status` state variable to determine whether to enable or disable the submit button, and whether to show the success message instead.
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function Form() {
+  const [answer, setAnswer] = useState('');
+  const [error, setError] = useState(null);
+  const [status, setStatus] = useState('typing');
+
+  if (status === 'success') {
+    return <h1>That's right!</h1>
+  }
+
+  async function handleSubmit(e) {
+    e.preventDefault();
+    setStatus('submitting');
+    try {
+      await submitForm(answer);
+      setStatus('success');
+    } catch (err) {
+      setStatus('typing');
+      setError(err);
+    }
+  }
+
+  function handleTextareaChange(e) {
+    setAnswer(e.target.value);
+  }
+
+  return (
+    <>
+      <h2>City quiz</h2>
+      <p>
+        In which city is there a billboard that turns air into drinkable water?
+      </p>
+      <form onSubmit={handleSubmit}>
+        <textarea
+          value={answer}
+          onChange={handleTextareaChange}
+          disabled={status === 'submitting'}
+        />
+        <br />
+        <button disabled={
+          answer.length === 0 ||
+          status === 'submitting'
+        }>
+          Submit
+        </button>
+        {error !== null &&
+          <p className="Error">
+            {error.message}
+          </p>
+        }
+      </form>
+    </>
+  );
+}
+
+function submitForm(answer) {
+  // Pretend it's hitting the network.
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      let shouldError = answer.toLowerCase() !== 'lima'
+      if (shouldError) {
+        reject(new Error('Good guess but a wrong answer. Try again!'));
+      } else {
+        resolve();
+      }
+    }, 1500);
+  });
+}
+```
+
+```css
+.Error { color: red; }
+```
+
+</Sandpack>
+
+<LearnMore path="/learn/reacting-to-input-with-state">
+
+Read **[Reacting to Input with State](/learn/reacting-to-input-with-state)** to learn how to approach interactions with a state-driven mindset.
+
+</LearnMore>
+
+## Choosing the state structure {/*choosing-the-state-structure*/}
+
+Structuring state well can make a difference between a component that is pleasant to modify and debug, and one that is a constant source of bugs. The most important principle is that state shouldn't contain redundant or duplicated information. If there's some unnecessary state, it's easy to forget to update it, and introduce bugs!
+
+For example, this form has a **redundant** `fullName` state variable:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function Form() {
+  const [firstName, setFirstName] = useState('');
+  const [lastName, setLastName] = useState('');
+  const [fullName, setFullName] = useState('');
+
+  function handleFirstNameChange(e) {
+    setFirstName(e.target.value);
+    setFullName(e.target.value + ' ' + lastName);
+  }
+
+  function handleLastNameChange(e) {
+    setLastName(e.target.value);
+    setFullName(firstName + ' ' + e.target.value);
+  }
+
+  return (
+    <>
+      <h2>Let’s check you in</h2>
+      <label>
+        First name:{' '}
+        <input
+          value={firstName}
+          onChange={handleFirstNameChange}
+        />
+      </label>
+      <label>
+        Last name:{' '}
+        <input
+          value={lastName}
+          onChange={handleLastNameChange}
+        />
+      </label>
+      <p>
+        Your ticket will be issued to: <b>{fullName}</b>
+      </p>
+    </>
+  );
+}
+```
+
+```css
+label { display: block; margin-bottom: 5px; }
+```
+
+</Sandpack>
+
+You can remove it and simplify the code by calculating `fullName` while the component is rendering:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function Form() {
+  const [firstName, setFirstName] = useState('');
+  const [lastName, setLastName] = useState('');
+
+  const fullName = firstName + ' ' + lastName;
+
+  function handleFirstNameChange(e) {
+    setFirstName(e.target.value);
+  }
+
+  function handleLastNameChange(e) {
+    setLastName(e.target.value);
+  }
+
+  return (
+    <>
+      <h2>Let’s check you in</h2>
+      <label>
+        First name:{' '}
+        <input
+          value={firstName}
+          onChange={handleFirstNameChange}
+        />
+      </label>
+      <label>
+        Last name:{' '}
+        <input
+          value={lastName}
+          onChange={handleLastNameChange}
+        />
+      </label>
+      <p>
+        Your ticket will be issued to: <b>{fullName}</b>
+      </p>
+    </>
+  );
+}
+```
+
+```css
+label { display: block; margin-bottom: 5px; }
+```
+
+</Sandpack>
+
+This might seem like a small change, but many bugs in React apps are fixed this way.
+
+<LearnMore path="/learn/choosing-the-state-structure">
+
+Read **[Choosing the State Structure](/learn/choosing-the-state-structure)** to learn how to design the state shape to avoid bugs.
+
+</LearnMore>
+
+## Sharing state between components {/*sharing-state-between-components*/}
+
+Sometimes, you want the state of two components to always change together. To do it, remove state from both of them, move it to their closest common parent, and then pass it down to them via props. This is known as "lifting state up", and it's one of the most common things you will do writing React code.
+
+In this example, only one panel should be active at a time. To achieve this, instead of keeping the active state inside each individual panel, the parent component holds the state and specifies the props for its children.
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function Accordion() {
+  const [activeIndex, setActiveIndex] = useState(0);
+  return (
+    <>
+      <h2>Almaty, Kazakhstan</h2>
+      <Panel
+        title="About"
+        isActive={activeIndex === 0}
+        onShow={() => setActiveIndex(0)}
+      >
+        With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was its capital city.
+      </Panel>
+      <Panel
+        title="Etymology"
+        isActive={activeIndex === 1}
+        onShow={() => setActiveIndex(1)}
+      >
+        The name comes from <span lang="kk-KZ">алма</span>, the Kazakh word for "apple" and is often translated as "full of apples". In fact, the region surrounding Almaty is thought to be the ancestral home of the apple, and the wild <i lang="la">Malus sieversii</i> is considered a likely candidate for the ancestor of the modern domestic apple.
+      </Panel>
+    </>
+  );
+}
+
+function Panel({
+  title,
+  children,
+  isActive,
+  onShow
+}) {
+  return (
+    <section className="panel">
+      <h3>{title}</h3>
+      {isActive ? (
+        <p>{children}</p>
+      ) : (
+        <button onClick={onShow}>
+          Show
+        </button>
+      )}
+    </section>
+  );
+}
+```
+
+```css
+h3, p { margin: 5px 0px; }
+.panel {
+  padding: 10px;
+  border: 1px solid #aaa;
+}
+```
+
+</Sandpack>
+
+<LearnMore path="/learn/sharing-state-between-components">
+
+Read **[Sharing State Between Components](/learn/sharing-state-between-components)** to learn how to lift state up and keep components in sync.
+
+</LearnMore>
+
+## Preserving and resetting state {/*preserving-and-resetting-state*/}
+
+When you re-render a component, React needs to decide which parts of the tree to keep (and update), and which parts to discard or re-create from scratch. In most cases, React's automatic behavior works well enough. By default, React preserves the parts of the tree that "match up" with the previously rendered component tree.
+
+However, sometimes this is not what you want. For example, in this app, typing a message and then switching the recipient does not reset the input. This can make the user accidentally send a message to the wrong person:
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+import Chat from './Chat.js';
+import ContactList from './ContactList.js';
+
+export default function Messenger() {
+  const [to, setTo] = useState(contacts[0]);
+  return (
+    <div>
+      <ContactList
+        contacts={contacts}
+        selectedContact={to}
+        onSelect={contact => setTo(contact)}
+      />
+      <Chat contact={to} />
+    </div>
+  )
+}
+
+const contacts = [
+  { name: 'Taylor', email: 'taylor@mail.com' },
+  { name: 'Alice', email: 'alice@mail.com' },
+  { name: 'Bob', email: 'bob@mail.com' }
+];
+```
+
+```js ContactList.js
+export default function ContactList({
+  selectedContact,
+  contacts,
+  onSelect
+}) {
+  return (
+    <section className="contact-list">
+      <ul>
+        {contacts.map(contact =>
+          <li key={contact.email}>
+            <button onClick={() => {
+              onSelect(contact);
+            }}>
+              {contact.name}
+            </button>
+          </li>
+        )}
+      </ul>
+    </section>
+  );
+}
+```
+
+```js Chat.js
+import { useState } from 'react';
+
+export default function Chat({ contact }) {
+  const [text, setText] = useState('');
+  return (
+    <section className="chat">
+      <textarea
+        value={text}
+        placeholder={'Chat to ' + contact.name}
+        onChange={e => setText(e.target.value)}
+      />
+      <br />
+      <button>Send to {contact.email}</button>
+    </section>
+  );
+}
+```
+
+```css
+.chat, .contact-list {
+  float: left;
+  margin-bottom: 20px;
+}
+ul, li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+li button {
+  width: 100px;
+  padding: 10px;
+  margin-right: 10px;
+}
+textarea {
+  height: 150px;
+}
+```
+
+</Sandpack>
+
+React lets you override the default behavior, and *force* a component to reset its state by passing it a different `key`, like `<Chat key={email} />`. This tells React that if the recipient is different, it should be considered a *different* `Chat` component that needs to be re-created from scratch with the new data (and UI like inputs). Now switching between the recipients always resets the input field--even though you render the same component.
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+import Chat from './Chat.js';
+import ContactList from './ContactList.js';
+
+export default function Messenger() {
+  const [to, setTo] = useState(contacts[0]);
+  return (
+    <div>
+      <ContactList
+        contacts={contacts}
+        selectedContact={to}
+        onSelect={contact => setTo(contact)}
+      />
+      <Chat key={to.email} contact={to} />
+    </div>
+  )
+}
+
+const contacts = [
+  { name: 'Taylor', email: 'taylor@mail.com' },
+  { name: 'Alice', email: 'alice@mail.com' },
+  { name: 'Bob', email: 'bob@mail.com' }
+];
+```
+
+```js ContactList.js
+export default function ContactList({
+  selectedContact,
+  contacts,
+  onSelect
+}) {
+  return (
+    <section className="contact-list">
+      <ul>
+        {contacts.map(contact =>
+          <li key={contact.email}>
+            <button onClick={() => {
+              onSelect(contact);
+            }}>
+              {contact.name}
+            </button>
+          </li>
+        )}
+      </ul>
+    </section>
+  );
+}
+```
+
+```js Chat.js
+import { useState } from 'react';
+
+export default function Chat({ contact }) {
+  const [text, setText] = useState('');
+  return (
+    <section className="chat">
+      <textarea
+        value={text}
+        placeholder={'Chat to ' + contact.name}
+        onChange={e => setText(e.target.value)}
+      />
+      <br />
+      <button>Send to {contact.email}</button>
+    </section>
+  );
+}
+```
+
+```css
+.chat, .contact-list {
+  float: left;
+  margin-bottom: 20px;
+}
+ul, li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+li button {
+  width: 100px;
+  padding: 10px;
+  margin-right: 10px;
+}
+textarea {
+  height: 150px;
+}
+```
+
+</Sandpack>
+
+<LearnMore path="/learn/preserving-and-resetting-state">
+
+Read **[Preserving and Resetting State](/learn/preserving-and-resetting-state)** to learn the lifetime of state and how to control it.
+
+</LearnMore>
+
+## Extracting state logic into a reducer {/*extracting-state-logic-into-a-reducer*/}
+
+Components with many state updates spread across many event handlers can get overwhelming. For these cases, you can consolidate all the state update logic outside your component in a single function, called "reducer". Your event handlers become concise because they only specify the user "actions". At the bottom of the file, the reducer function specifies how the state should update in response to each action!
+
+<Sandpack>
+
+```js App.js
+import { useReducer } from 'react';
+import AddTask from './AddTask.js';
+import TaskList from './TaskList.js';
+
+export default function TaskApp() {
+  const [tasks, dispatch] = useReducer(
+    tasksReducer,
+    initialTasks
+  );
+
+  function handleAddTask(text) {
+    dispatch({
+      type: 'added',
+      id: nextId++,
+      text: text,
+    });
+  }
+
+  function handleChangeTask(task) {
+    dispatch({
+      type: 'changed',
+      task: task
+    });
+  }
+
+  function handleDeleteTask(taskId) {
+    dispatch({
+      type: 'deleted',
+      id: taskId
+    });
+  }
+
+  return (
+    <>
+      <h1>Prague itinerary</h1>
+      <AddTask
+        onAddTask={handleAddTask}
+      />
+      <TaskList
+        tasks={tasks}
+        onChangeTask={handleChangeTask}
+        onDeleteTask={handleDeleteTask}
+      />
+    </>
+  );
+}
+
+function tasksReducer(tasks, action) {
+  switch (action.type) {
+    case 'added': {
+      return [...tasks, {
+        id: action.id,
+        text: action.text,
+        done: false
+      }];
+    }
+    case 'changed': {
+      return tasks.map(t => {
+        if (t.id === action.task.id) {
+          return action.task;
+        } else {
+          return t;
+        }
+      });
+    }
+    case 'deleted': {
+      return tasks.filter(t => t.id !== action.id);
+    }
+    default: {
+      throw Error('Unknown action: ' + action.type);
+    }
+  }
+}
+
+let nextId = 3;
+const initialTasks = [
+  { id: 0, text: 'Visit Kafka Museum', done: true },
+  { id: 1, text: 'Watch a puppet show', done: false },
+  { id: 2, text: 'Lennon Wall pic', done: false }
+];
+```
+
+```js AddTask.js hidden
+import { useState } from 'react';
+
+export default function AddTask({ onAddTask }) {
+  const [text, setText] = useState('');
+  return (
+    <>
+      <input
+        placeholder="Add task"
+        value={text}
+        onChange={e => setText(e.target.value)}
+      />
+      <button onClick={() => {
+        setText('');
+        onAddTask(text);
+      }}>Add</button>
+    </>
+  )
+}
+```
+
+```js TaskList.js hidden
+import { useState } from 'react';
+
+export default function TaskList({
+  tasks,
+  onChangeTask,
+  onDeleteTask
+}) {
+  return (
+    <ul>
+      {tasks.map(task => (
+        <li key={task.id}>
+          <Task
+            task={task}
+            onChange={onChangeTask}
+            onDelete={onDeleteTask}
+          />
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function Task({ task, onChange, onDelete }) {
+  const [isEditing, setIsEditing] = useState(false);
+  let taskContent;
+  if (isEditing) {
+    taskContent = (
+      <>
+        <input
+          value={task.text}
+          onChange={e => {
+            onChange({
+              ...task,
+              text: e.target.value
+            });
+          }} />
+        <button onClick={() => setIsEditing(false)}>
+          Save
+        </button>
+      </>
+    );
+  } else {
+    taskContent = (
+      <>
+        {task.text}
+        <button onClick={() => setIsEditing(true)}>
+          Edit
+        </button>
+      </>
+    );
+  }
+  return (
+    <label>
+      <input
+        type="checkbox"
+        checked={task.done}
+        onChange={e => {
+          onChange({
+            ...task,
+            done: e.target.checked
+          });
+        }}
+      />
+      {taskContent}
+      <button onClick={() => onDelete(task.id)}>
+        Delete
+      </button>
+    </label>
+  );
+}
+```
+
+```css
+button { margin: 5px; }
+li { list-style-type: none; }
+ul, li { margin: 0; padding: 0; }
+```
+
+</Sandpack>
+
+<LearnMore path="/learn/extracting-state-logic-into-a-reducer">
+
+Read **[Extracting State Logic into a Reducer](/learn/extracting-state-logic-into-a-reducer)** to learn how to consolidate logic in the reducer function.
+
+</LearnMore>
+
+## Passing data deeply with context {/*passing-data-deeply-with-context*/}
+
+Usually, you will pass information from a parent component to a child component via props. But passing props can become inconvenient if you need to pass some prop through many components, or if many components need the same information. Context lets the parent component make some information available to any component in the tree below it—no matter how deep it is—without passing it explicitly through props.
+
+Here, the `Heading` component determines its heading level by "asking" the closest `Section` for its level. Each `Section` tracks its own level by asking the parent `Section` and adding one to it. Every `Section` provides information to all components below it without passing props--it does that through context.
+
+<Sandpack>
+
+```js
+import Heading from './Heading.js';
+import Section from './Section.js';
+
+export default function Page() {
+  return (
+    <Section>
+      <Heading>Title</Heading>
+      <Section>
+        <Heading>Heading</Heading>
+        <Heading>Heading</Heading>
+        <Heading>Heading</Heading>
+        <Section>
+          <Heading>Sub-heading</Heading>
+          <Heading>Sub-heading</Heading>
+          <Heading>Sub-heading</Heading>
+          <Section>
+            <Heading>Sub-sub-heading</Heading>
+            <Heading>Sub-sub-heading</Heading>
+            <Heading>Sub-sub-heading</Heading>
+          </Section>
+        </Section>
+      </Section>
+    </Section>
+  );
+}
+```
+
+```js Section.js
+import { useContext } from 'react';
+import { LevelContext } from './LevelContext.js';
+
+export default function Section({ children }) {
+  const level = useContext(LevelContext);
+  return (
+    <section className="section">
+      <LevelContext.Provider value={level + 1}>
+        {children}
+      </LevelContext.Provider>
+    </section>
+  );
+}
+```
+
+```js Heading.js
+import { useContext } from 'react';
+import { LevelContext } from './LevelContext.js';
+
+export default function Heading({ children }) {
+  const level = useContext(LevelContext);
+  switch (level) {
+    case 0:
+      throw Error('Heading must be inside a Section!');
+    case 1:
+      return <h1>{children}</h1>;
+    case 2:
+      return <h2>{children}</h2>;
+    case 3:
+      return <h3>{children}</h3>;
+    case 4:
+      return <h4>{children}</h4>;
+    case 5:
+      return <h5>{children}</h5>;
+    case 6:
+      return <h6>{children}</h6>;
+    default:
+      throw Error('Unknown level: ' + level);
+  }
+}
+```
+
+```js LevelContext.js
+import { createContext } from 'react';
+
+export const LevelContext = createContext(0);
+```
+
+```css
+.section {
+  padding: 10px;
+  margin: 5px;
+  border-radius: 5px;
+  border: 1px solid #aaa;
+}
+```
+
+</Sandpack>
+
+<LearnMore path="/learn/passing-data-deeply-with-context">
+
+Read **[Passing Data Deeply with Context](/learn/passing-data-deeply-with-context)** to learn about using context as an alternative to passing props.
+
+</LearnMore>
+
+## Scaling up with reducer and context {/*scaling-up-with-reducer-and-context*/}
+
+Reducers let you consolidate a component’s state update logic. Context lets you pass information deep down to other components. You can combine reducers and context together to manage state of a complex screen.
+
+With this approach, a parent component with complex state manages it with a reducer. Other components anywhere deep in the tree can read its state via context. They can also dispatch actions to update that state.
+
+<Sandpack>
+
+```js App.js
+import AddTask from './AddTask.js';
+import TaskList from './TaskList.js';
+import { TasksProvider } from './TasksContext.js';
+
+export default function TaskApp() {
+  return (
+    <TasksProvider>
+      <h1>Day off in Kyoto</h1>
+      <AddTask />
+      <TaskList />
+    </TasksProvider>
+  );
+}
+```
+
+```js TasksContext.js
+import { createContext, useContext, useReducer } from 'react';
+
+const TasksContext = createContext(null);
+const TasksDispatchContext = createContext(null);
+
+export function TasksProvider({ children }) {
+  const [tasks, dispatch] = useReducer(
+    tasksReducer,
+    initialTasks
+  );
+
+  return (
+    <TasksContext.Provider value={tasks}>
+      <TasksDispatchContext.Provider
+        value={dispatch}
+      >
+        {children}
+      </TasksDispatchContext.Provider>
+    </TasksContext.Provider>
+  );
+}
+
+export function useTasks() {
+  return useContext(TasksContext);
+}
+
+export function useTasksDispatch() {
+  return useContext(TasksDispatchContext);
+}
+
+function tasksReducer(tasks, action) {
+  switch (action.type) {
+    case 'added': {
+      return [...tasks, {
+        id: action.id,
+        text: action.text,
+        done: false
+      }];
+    }
+    case 'changed': {
+      return tasks.map(t => {
+        if (t.id === action.task.id) {
+          return action.task;
+        } else {
+          return t;
+        }
+      });
+    }
+    case 'deleted': {
+      return tasks.filter(t => t.id !== action.id);
+    }
+    default: {
+      throw Error('Unknown action: ' + action.type);
+    }
+  }
+}
+
+const initialTasks = [
+  { id: 0, text: 'Philosopher’s Path', done: true },
+  { id: 1, text: 'Visit the temple', done: false },
+  { id: 2, text: 'Drink matcha', done: false }
+];
+```
+
+```js AddTask.js
+import { useState, useContext } from 'react';
+import { useTasksDispatch } from './TasksContext.js';
+
+export default function AddTask({ onAddTask }) {
+  const [text, setText] = useState('');
+  const dispatch = useTasksDispatch();
+  return (
+    <>
+      <input
+        placeholder="Add task"
+        value={text}
+        onChange={e => setText(e.target.value)}
+      />
+      <button onClick={() => {
+        setText('');
+        dispatch({
+          type: 'added',
+          id: nextId++,
+          text: text,
+        });
+      }}>Add</button>
+    </>
+  );
+}
+
+let nextId = 3;
+```
+
+```js TaskList.js
+import { useState, useContext } from 'react';
+import { useTasks, useTasksDispatch } from './TasksContext.js';
+
+export default function TaskList() {
+  const tasks = useTasks();
+  return (
+    <ul>
+      {tasks.map(task => (
+        <li key={task.id}>
+          <Task task={task} />
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function Task({ task }) {
+  const [isEditing, setIsEditing] = useState(false);
+  const dispatch = useTasksDispatch();
+  let taskContent;
+  if (isEditing) {
+    taskContent = (
+      <>
+        <input
+          value={task.text}
+          onChange={e => {
+            dispatch({
+              type: 'changed',
+              task: {
+                ...task,
+                text: e.target.value
+              }
+            });
+          }} />
+        <button onClick={() => setIsEditing(false)}>
+          Save
+        </button>
+      </>
+    );
+  } else {
+    taskContent = (
+      <>
+        {task.text}
+        <button onClick={() => setIsEditing(true)}>
+          Edit
+        </button>
+      </>
+    );
+  }
+  return (
+    <label>
+      <input
+        type="checkbox"
+        checked={task.done}
+        onChange={e => {
+          dispatch({
+            type: 'changed',
+            task: {
+              ...task,
+              done: e.target.checked
+            }
+          });
+        }}
+      />
+      {taskContent}
+      <button onClick={() => {
+        dispatch({
+          type: 'deleted',
+          id: task.id
+        });
+      }}>
+        Delete
+      </button>
+    </label>
+  );
+}
+```
+
+```css
+button { margin: 5px; }
+li { list-style-type: none; }
+ul, li { margin: 0; padding: 0; }
+```
+
+</Sandpack>
+
+<LearnMore path="/learn/scaling-up-with-reducer-and-context">
+
+Read **[Scaling Up with Reducer and Context](/learn/scaling-up-with-reducer-and-context)** to learn how state management scales in a growing app.
+
+</LearnMore>
+
+## What's next? {/*whats-next*/}
+
+Head over to [Reacting to Input with State](/learn/reacting-to-input-with-state) to start reading this chapter page by page!
+
+Or, if you're already familiar with these topics, why not read about [Escape Hatches](/learn/escape-hatches)?
diff --git a/beta/src/content/learn/manipulating-the-dom-with-refs.md b/beta/src/content/learn/manipulating-the-dom-with-refs.md
new file mode 100644
index 000000000..2adee47ac
--- /dev/null
+++ b/beta/src/content/learn/manipulating-the-dom-with-refs.md
@@ -0,0 +1,1202 @@
+---
+title: 'Manipulating the DOM with Refs'
+---
+
+<Intro>
+
+React automatically updates the [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) to match your render output, so your components won't often need to manipulate it. However, sometimes you might need access to the DOM elements managed by React--for example, to focus a node, scroll to it, or measure its size and position. There is no built-in way to do those things in React, so you will need a *ref* to the DOM node.
+
+</Intro>
+
+<YouWillLearn>
+
+- How to access a DOM node managed by React with the `ref` attribute
+- How the `ref` JSX attribute relates to the `useRef` Hook
+- How to access another component's DOM node
+- In which cases it's safe to modify the DOM managed by React
+
+</YouWillLearn>
+
+## Getting a ref to the node {/*getting-a-ref-to-the-node*/}
+
+To access a DOM node managed by React, first, import the `useRef` Hook:
+
+```js
+import { useRef } from 'react';
+```
+
+Then, use it to declare a ref inside your component:
+
+```js
+const myRef = useRef(null);
+```
+
+Finally, pass it to the DOM node as the `ref` attribute:
+
+```js
+<div ref={myRef}>
+```
+
+The `useRef` Hook returns an object with a single property called `current`. Initially, `myRef.current` will be `null`. When React creates a DOM node for this `<div>`, React will put a reference to this node into `myRef.current`. You can then access this DOM node from your [event handlers](/learn/responding-to-events) and use the built-in [browser APIs](https://developer.mozilla.org/docs/Web/API/Element) defined on it.
+
+```js
+// You can use any browser APIs, for example:
+myRef.current.scrollIntoView();
+```
+
+### Example: Focusing a text input {/*example-focusing-a-text-input*/}
+
+In this example, clicking the button will focus the input:
+
+<Sandpack>
+
+```js
+import { useRef } from 'react';
+
+export default function Form() {
+  const inputRef = useRef(null);
+
+  function handleClick() {
+    inputRef.current.focus();
+  }
+
+  return (
+    <>
+      <input ref={inputRef} />
+      <button onClick={handleClick}>
+        Focus the input
+      </button>
+    </>
+  );
+}
+```
+
+</Sandpack>
+
+To implement this:
+
+1. Declare `inputRef` with the `useRef` Hook.
+2. Pass it as `<input ref={inputRef}>`. This tells React to **put this `<input>`'s DOM node into `inputRef.current`.**
+3. In the `handleClick` function, read the input DOM node from `inputRef.current` and call [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) on it with `inputRef.current.focus()`.
+4. Pass the `handleClick` event handler to `<button>` with `onClick`.
+
+While DOM manipulation is the most common use case for refs, the `useRef` Hook can be used for storing other things outside React, like timer IDs. Similarly to state, refs remain between renders. Refs are like state variables that don't trigger re-renders when you set them. For an introduction to refs, see [Referencing Values with Refs.](/learn/referencing-values-with-refs)
+
+### Example: Scrolling to an element {/*example-scrolling-to-an-element*/}
+
+You can have more than a single ref in a component. In this example, there is a carousel of three images. Each button centers an image by calling the browser [`scrollIntoView()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) method the corresponding DOM node:
+
+<Sandpack>
+
+```js
+import { useRef } from 'react';
+
+export default function CatFriends() {
+  const firstCatRef = useRef(null);
+  const secondCatRef = useRef(null);
+  const thirdCatRef = useRef(null);
+
+  function handleScrollToFirstCat() {
+    firstCatRef.current.scrollIntoView({
+      behavior: 'smooth',
+      block: 'nearest',
+      inline: 'center'
+    });
+  }
+
+  function handleScrollToSecondCat() {
+    secondCatRef.current.scrollIntoView({
+      behavior: 'smooth',
+      block: 'nearest',
+      inline: 'center'
+    });
+  }
+
+  function handleScrollToThirdCat() {
+    thirdCatRef.current.scrollIntoView({
+      behavior: 'smooth',
+      block: 'nearest',
+      inline: 'center'
+    });
+  }
+
+  return (
+    <>
+      <nav>
+        <button onClick={handleScrollToFirstCat}>
+          Tom
+        </button>
+        <button onClick={handleScrollToSecondCat}>
+          Maru
+        </button>
+        <button onClick={handleScrollToThirdCat}>
+          Jellylorum
+        </button>
+      </nav>
+      <div>
+        <ul>
+          <li>
+            <img
+              src="https://placekitten.com/g/200/200"
+              alt="Tom"
+              ref={firstCatRef}
+            />
+          </li>
+          <li>
+            <img
+              src="https://placekitten.com/g/300/200"
+              alt="Maru"
+              ref={secondCatRef}
+            />
+          </li>
+          <li>
+            <img
+              src="https://placekitten.com/g/250/200"
+              alt="Jellylorum"
+              ref={thirdCatRef}
+            />
+          </li>
+        </ul>
+      </div>
+    </>
+  );
+}
+```
+
+```css
+div {
+  width: 100%;
+  overflow: hidden;
+}
+
+nav {
+  text-align: center;
+}
+
+button {
+  margin: .25rem;
+}
+
+ul,
+li {
+  list-style: none;
+  white-space: nowrap;
+}
+
+li {
+  display: inline;
+  padding: 0.5rem;
+}
+```
+
+</Sandpack>
+
+<DeepDive>
+
+#### How to manage a list of refs using a ref callback {/*how-to-manage-a-list-of-refs-using-a-ref-callback*/}
+
+In the above examples, there is a predefined number of refs. However, sometimes you might need a ref to each item in the list, and you don't know how many you will have. Something like this **wouldn't work**:
+
+```js
+<ul>
+  {items.map((item) => {
+    // Doesn't work!
+    const ref = useRef(null);
+    return <li ref={ref} />;
+  })}
+</ul>
+```
+
+This is because **Hooks must only be called at the top-level of your component.** You can't call `useRef` in a loop, in a condition, or inside a `map()` call.
+
+One possible way around this is to get a single ref to their parent element, and then use DOM manipulation methods like [`querySelectorAll`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) to "find" the individual child nodes from it. However, this is brittle and can break if your DOM structure changes.
+
+Another solution is to **pass a function to the `ref` attribute.** This is called a [`ref` callback.](/reference/react-dom/components/common#ref-callback) React will call your ref callback with the DOM node when it's time to set the ref, and with `null` when it's time to clear it. This lets you maintain your own array or a [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), and access any ref by its index or some kind of ID.
+
+This example shows how you can use this approach to scroll to an arbitrary node in a long list:
+
+<Sandpack>
+
+```js
+import { useRef } from 'react';
+
+export default function CatFriends() {
+  const itemsRef = useRef(null);
+
+  function scrollToId(itemId) {
+    const map = getMap();
+    const node = map.get(itemId);
+    node.scrollIntoView({
+      behavior: 'smooth',
+      block: 'nearest',
+      inline: 'center'
+    });
+  }
+
+  function getMap() {
+    if (!itemsRef.current) {
+      // Initialize the Map on first usage.
+      itemsRef.current = new Map();
+    }
+    return itemsRef.current;
+  }
+
+  return (
+    <>
+      <nav>
+        <button onClick={() => scrollToId(0)}>
+          Tom
+        </button>
+        <button onClick={() => scrollToId(5)}>
+          Maru
+        </button>
+        <button onClick={() => scrollToId(9)}>
+          Jellylorum
+        </button>
+      </nav>
+      <div>
+        <ul>
+          {catList.map(cat => (
+            <li
+              key={cat.id}
+              ref={(node) => {
+                const map = getMap();
+                if (node) {
+                  map.set(cat.id, node);
+                } else {
+                  map.delete(cat.id);
+                }
+              }}
+            >
+              <img
+                src={cat.imageUrl}
+                alt={'Cat #' + cat.id}
+              />
+            </li>
+          ))}
+        </ul>
+      </div>
+    </>
+  );
+}
+
+const catList = [];
+for (let i = 0; i < 10; i++) {
+  catList.push({
+    id: i,
+    imageUrl: 'https://placekitten.com/250/200?image=' + i
+  });
+}
+
+```
+
+```css
+div {
+  width: 100%;
+  overflow: hidden;
+}
+
+nav {
+  text-align: center;
+}
+
+button {
+  margin: .25rem;
+}
+
+ul,
+li {
+  list-style: none;
+  white-space: nowrap;
+}
+
+li {
+  display: inline;
+  padding: 0.5rem;
+}
+```
+
+</Sandpack>
+
+In this example, `itemsRef` doesn't hold a single DOM node. Instead, it holds a [Map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Map) from item ID to a DOM node. ([Refs can hold any values!](/learn/referencing-values-with-refs)) The [`ref` callback](/reference/react-dom/components/common#ref-callback) on every list item takes care to update the Map:
+
+```js
+<li
+  key={cat.id}
+  ref={node => {
+    const map = getMap();
+    if (node) {
+      // Add to the Map
+      map.set(cat.id, node);
+    } else {
+      // Remove from the Map
+      map.delete(cat.id);
+    }
+  }}
+>
+```
+
+This lets you read individual DOM nodes from the Map later.
+
+</DeepDive>
+
+## Accessing another component's DOM nodes {/*accessing-another-components-dom-nodes*/}
+
+When you put a ref on a built-in component that outputs a browser element like `<input />`, React will set that ref's `current` property to the corresponding DOM node (such as the actual `<input />` in the browser).
+
+However, if you try to put a ref on **your own** component, like `<MyInput />`, by default you will get `null`. Here is an example demonstrating it. Notice how clicking the button **does not** focus the input:
+
+<Sandpack>
+
+```js
+import { useRef } from 'react';
+
+function MyInput(props) {
+  return <input {...props} />;
+}
+
+export default function MyForm() {
+  const inputRef = useRef(null);
+
+  function handleClick() {
+    inputRef.current.focus();
+  }
+
+  return (
+    <>
+      <MyInput ref={inputRef} />
+      <button onClick={handleClick}>
+        Focus the input
+      </button>
+    </>
+  );
+}
+```
+
+</Sandpack>
+
+To help you notice the issue, React also prints an error to the console:
+
+<ConsoleBlock level="error">
+
+Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
+
+</ConsoleBlock>
+
+This happens because by default React does not let a component access the DOM nodes of other components. Not even for its own children! This is intentional. Refs are an escape hatch that should be used sparingly. Manually manipulating _another_ component's DOM nodes makes your code even more fragile.
+
+Instead, components that _want_ to expose their DOM nodes have to **opt in** to that behavior. A component can specify that it "forwards" its ref to one of its children. Here's how `MyInput` can use the `forwardRef` API:
+
+```js
+const MyInput = forwardRef((props, ref) => {
+  return <input {...props} ref={ref} />;
+});
+```
+
+This is how it works:
+
+1. `<MyInput ref={inputRef} />` tells React to put the corresponding DOM node into `inputRef.current`. However, it's up to the `MyInput` component to opt into that--by default, it doesn't.
+2. The `MyInput` component is declared using `forwardRef`. **This opts it into receiving the `inputRef` from above as the second `ref` argument** which is declared after `props`.
+3. `MyInput` itself passes the `ref` it received to the `<input>` inside of it.
+
+Now clicking the button to focus the input works:
+
+<Sandpack>
+
+```js
+import { forwardRef, useRef } from 'react';
+
+const MyInput = forwardRef((props, ref) => {
+  return <input {...props} ref={ref} />;
+});
+
+export default function Form() {
+  const inputRef = useRef(null);
+
+  function handleClick() {
+    inputRef.current.focus();
+  }
+
+  return (
+    <>
+      <MyInput ref={inputRef} />
+      <button onClick={handleClick}>
+        Focus the input
+      </button>
+    </>
+  );
+}
+```
+
+</Sandpack>
+
+In design systems, it is a common pattern for low-level components like buttons, inputs, and so on, to forward their refs to their DOM nodes. On the other hand, high-level components like forms, lists, or page sections usually won't expose their DOM nodes to avoid accidental dependencies on the DOM structure.
+
+<DeepDive>
+
+#### Exposing a subset of the API with an imperative handle {/*exposing-a-subset-of-the-api-with-an-imperative-handle*/}
+
+In the above example, `MyInput` exposes the original DOM input element. This lets the parent component call `focus()` on it. However, this also lets the parent component do something else--for example, change its CSS styles. In uncommon cases, you may want to restrict the exposed functionality. You can do that with `useImperativeHandle`:
+
+<Sandpack>
+
+```js
+import {
+  forwardRef, 
+  useRef, 
+  useImperativeHandle
+} from 'react';
+
+const MyInput = forwardRef((props, ref) => {
+  const realInputRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    // Only expose focus and nothing else
+    focus() {
+      realInputRef.current.focus();
+    },
+  }));
+  return <input {...props} ref={realInputRef} />;
+});
+
+export default function Form() {
+  const inputRef = useRef(null);
+
+  function handleClick() {
+    inputRef.current.focus();
+  }
+
+  return (
+    <>
+      <MyInput ref={inputRef} />
+      <button onClick={handleClick}>
+        Focus the input
+      </button>
+    </>
+  );
+}
+```
+
+</Sandpack>
+
+Here, `realInputRef` inside `MyInput` holds the actual input DOM node. However, `useImperativeHandle` instructs React to provide your own special object as the value of a ref to the parent component. So `inputRef.current` inside the `Form` component will only have the `focus` method. In this case, the ref "handle" is not the DOM node, but the custom object you create inside `useImperativeHandle` call.
+
+</DeepDive>
+
+## When React attaches the refs {/*when-react-attaches-the-refs*/}
+
+In React, every update is split in [two phases](/learn/render-and-commit#step-3-react-commits-changes-to-the-dom):
+
+* During **render,** React calls your components to figure out what should be on the screen.
+* During **commit,** React applies changes to the DOM.
+
+In general, you [don't want](/learn/referencing-values-with-refs#best-practices-for-refs) to access refs during rendering. That goes for refs holding DOM nodes as well. During the first render, the DOM nodes have not yet been created, so `ref.current` will be `null`. And during the rendering of updates, the DOM nodes haven't been updated yet. So it's too early to read them.
+
+React sets `ref.current` during the commit. Before updating the DOM, React sets the affected `ref.current` values to `null`. After updating the DOM, React immediately sets them to the corresponding DOM nodes.
+
+**Usually, you will access refs from event handlers.** If you want to do something with a ref, but there is no particular event to do it in, you might need an Effect. We will discuss effects on the next pages.
+
+<DeepDive>
+
+#### Flushing state updates synchronously with flushSync {/*flushing-state-updates-synchronously-with-flush-sync*/}
+
+Consider code like this, which adds a new todo and scrolls the screen down to the last child of the list. Notice how, for some reason, it always scrolls to the todo that was *just before* the last added one:
+
+<Sandpack>
+
+```js
+import { useState, useRef } from 'react';
+
+export default function TodoList() {
+  const listRef = useRef(null);
+  const [text, setText] = useState('');
+  const [todos, setTodos] = useState(
+    initialTodos
+  );
+
+  function handleAdd() {
+    const newTodo = { id: nextId++, text: text };
+    setText('');
+    setTodos([ ...todos, newTodo]);
+    listRef.current.lastChild.scrollIntoView({
+      behavior: 'smooth',
+      block: 'nearest'
+    });
+  }
+
+  return (
+    <>
+      <button onClick={handleAdd}>
+        Add
+      </button>
+      <input
+        value={text}
+        onChange={e => setText(e.target.value)}
+      />
+      <ul ref={listRef}>
+        {todos.map(todo => (
+          <li key={todo.id}>{todo.text}</li>
+        ))}
+      </ul>
+    </>
+  );
+}
+
+let nextId = 0;
+let initialTodos = [];
+for (let i = 0; i < 20; i++) {
+  initialTodos.push({
+    id: nextId++,
+    text: 'Todo #' + (i + 1)
+  });
+}
+```
+
+</Sandpack>
+
+The issue is with these two lines:
+
+```js
+setTodos([ ...todos, newTodo]);
+listRef.current.lastChild.scrollIntoView();
+```
+
+In React, [state updates are queued.](/learn/queueing-a-series-of-state-updates) Usually, this is what you want. However, here it causes a problem because `setTodos` does not immediately update the DOM. So the time you scroll the list to its last element, the todo has not yet been added. This is why scrolling always "lags behind" by one item.
+
+To fix this issue, you can force React to update ("flush") the DOM synchronously. To do this, import `flushSync` from `react-dom` and **wrap the state update** into a `flushSync` call:
+
+```js
+flushSync(() => {
+  setTodos([ ...todos, newTodo]);
+});
+listRef.current.lastChild.scrollIntoView();
+```
+
+This will instruct React to update the DOM synchronously right after the code wrapped in `flushSync` executes. As a result, the last todo will already be in the DOM by the time you try to scroll to it:
+
+<Sandpack>
+
+```js
+import { useState, useRef } from 'react';
+import { flushSync } from 'react-dom';
+
+export default function TodoList() {
+  const listRef = useRef(null);
+  const [text, setText] = useState('');
+  const [todos, setTodos] = useState(
+    initialTodos
+  );
+
+  function handleAdd() {
+    const newTodo = { id: nextId++, text: text };
+    flushSync(() => {
+      setText('');
+      setTodos([ ...todos, newTodo]);      
+    });
+    listRef.current.lastChild.scrollIntoView({
+      behavior: 'smooth',
+      block: 'nearest'
+    });
+  }
+
+  return (
+    <>
+      <button onClick={handleAdd}>
+        Add
+      </button>
+      <input
+        value={text}
+        onChange={e => setText(e.target.value)}
+      />
+      <ul ref={listRef}>
+        {todos.map(todo => (
+          <li key={todo.id}>{todo.text}</li>
+        ))}
+      </ul>
+    </>
+  );
+}
+
+let nextId = 0;
+let initialTodos = [];
+for (let i = 0; i < 20; i++) {
+  initialTodos.push({
+    id: nextId++,
+    text: 'Todo #' + (i + 1)
+  });
+}
+```
+
+</Sandpack>
+
+</DeepDive>
+
+## Best practices for DOM manipulation with refs {/*best-practices-for-dom-manipulation-with-refs*/}
+
+Refs are an escape hatch. You should only use them when you have to "step outside React". Common examples of this include managing focus, scroll position, or calling browser APIs that React does not expose.
+
+If you stick to non-destructive actions like focusing and scrolling, you shouldn't encounter any problems. However, if you try to **modify** the DOM manually, you can risk conflicting with the changes React is making.
+
+To illustrate this problem, this example includes a welcome message and two buttons. The first button toggles its presence using [conditional rendering](/learn/conditional-rendering) and [state](/learn/state-a-components-memory), as you would usually do in React. The second button uses the [`remove()` DOM API](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) to forcefully remove it from the DOM outside of React's control.
+
+Try pressing "Toggle with setState" a few times. The message should disappear and appear again. Then press "Remove from the DOM". This will forcefully remove it. Finally, press "Toggle with setState":
+
+<Sandpack>
+
+```js
+import {useState, useRef} from 'react';
+
+export default function Counter() {
+  const [show, setShow] = useState(true);
+  const ref = useRef(null);
+
+  return (
+    <div>
+      <button
+        onClick={() => {
+          setShow(!show);
+        }}>
+        Toggle with setState
+      </button>
+      <button
+        onClick={() => {
+          ref.current.remove();
+        }}>
+        Remove from the DOM
+      </button>
+      {show && <p ref={ref}>Hello world</p>}
+    </div>
+  );
+}
+```
+
+```css
+p,
+button {
+  display: block;
+  margin: 10px;
+}
+```
+
+</Sandpack>
+
+After you've manually removed the DOM element, trying to use `setState` to show it again will lead to a crash. This is because you've changed the DOM, and React doesn't know how to continue managing it correctly.
+
+**Avoid changing DOM nodes managed by React.** Modifying, adding children to, or removing children from elements that are managed by React can lead to inconsistent visual results or crashes like above.
+
+However, this doesn't mean that you can't do it at all. It requires caution. **You can safely modify parts of the DOM that React has _no reason_ to update.** For example, if some `<div>` is always empty in the JSX, React won't have a reason to touch its children list. Therefore, it is safe to manually add or remove elements there.
+
+<Recap>
+
+- Refs are a generic concept, but most often you'll use them to hold DOM elements.
+- You instruct React to put a DOM node into `myRef.current` by passing `<div ref={myRef}>`.
+- Usually, you will use refs for non-destructive actions like focusing, scrolling, or measuring DOM elements.
+- A component doesn't expose its DOM nodes by default. You can opt into exposing a DOM node by using `forwardRef` and passing the second `ref` argument down to a specific node.
+- Avoid changing DOM nodes managed by React.
+- If you do modify DOM nodes managed by React, modify parts that React has no reason to update.
+
+</Recap>
+
+
+
+<Challenges>
+
+#### Play and pause the video {/*play-and-pause-the-video*/}
+
+In this example, the button toggles a state variable to switch between a playing and a paused state. However, in order to actually play or pause the video, toggling state is not enough. You also need to call [`play()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play) and [`pause()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause) on the DOM element for the `<video>`. Add a ref to it, and make the button work.
+
+<Sandpack>
+
+```js
+import { useState, useRef } from 'react';
+
+export default function VideoPlayer() {
+  const [isPlaying, setIsPlaying] = useState(false);
+
+  function handleClick() {
+    const nextIsPlaying = !isPlaying;
+    setIsPlaying(nextIsPlaying);
+  }
+
+  return (
+    <>
+      <button onClick={handleClick}>
+        {isPlaying ? 'Pause' : 'Play'}
+      </button>
+      <video width="250">
+        <source
+          src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
+          type="video/mp4"
+        />
+      </video>
+    </>
+  )
+}
+```
+
+```css
+button { display: block; margin-bottom: 20px; }
+```
+
+</Sandpack>
+
+For an extra challenge, keep the "Play" button in sync with whether the video is playing even if the user right-clicks the video and plays it using the built-in browser media controls. You might want to listen to `onPlay` and `onPause` on the video to do that.
+
+<Solution>
+
+Declare a ref and put it on the `<video>` element. Then call `ref.current.play()` and `ref.current.pause()` in the event handler depending on the next state.
+
+<Sandpack>
+
+```js
+import { useState, useRef } from 'react';
+
+export default function VideoPlayer() {
+  const [isPlaying, setIsPlaying] = useState(false);
+  const ref = useRef(null);
+
+  function handleClick() {
+    const nextIsPlaying = !isPlaying;
+    setIsPlaying(nextIsPlaying);
+
+    if (nextIsPlaying) {
+      ref.current.play();
+    } else {
+      ref.current.pause();
+    }
+  }
+
+  return (
+    <>
+      <button onClick={handleClick}>
+        {isPlaying ? 'Pause' : 'Play'}
+      </button>
+      <video
+        width="250"
+        ref={ref}
+        onPlay={() => setIsPlaying(true)}
+        onPause={() => setIsPlaying(false)}
+      >
+        <source
+          src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
+          type="video/mp4"
+        />
+      </video>
+    </>
+  )
+}
+```
+
+```css
+button { display: block; margin-bottom: 20px; }
+```
+
+</Sandpack>
+
+In order to handle the built-in browser controls, you can add `onPlay` and `onPause` handlers to the `<video>` element and call `setIsPlaying` from them. This way, if the user plays the video using the browser controls, the state will adjust accordingly.
+
+</Solution>
+
+#### Focus the search field {/*focus-the-search-field*/}
+
+Make it so that clicking the "Search" button puts focus into the field.
+
+<Sandpack>
+
+```js
+export default function Page() {
+  return (
+    <>
+      <nav>
+        <button>Search</button>
+      </nav>
+      <input
+        placeholder="Looking for something?"
+      />
+    </>
+  );
+}
+```
+
+```css
+button { display: block; margin-bottom: 10px; }
+```
+
+</Sandpack>
+
+<Solution>
+
+Add a ref to the input, and call `focus()` on the DOM node to focus it:
+
+<Sandpack>
+
+```js
+import { useRef } from 'react';
+
+export default function Page() {
+  const inputRef = useRef(null);
+  return (
+    <>
+      <nav>
+        <button onClick={() => {
+          inputRef.current.focus();
+        }}>
+          Search
+        </button>
+      </nav>
+      <input
+        ref={inputRef}
+        placeholder="Looking for something?"
+      />
+    </>
+  );
+}
+```
+
+```css
+button { display: block; margin-bottom: 10px; }
+```
+
+</Sandpack>
+
+</Solution>
+
+#### Scrolling an image carousel {/*scrolling-an-image-carousel*/}
+
+This image carousel has a "Next" button that switches the active image. Make the gallery scroll horizontally to the active image on click. You will want to call [`scrollIntoView()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) on the DOM node of the active image:
+
+```js
+node.scrollIntoView({
+  behavior: 'smooth',
+  block: 'nearest',
+  inline: 'center'
+});
+```
+
+<Hint>
+
+You don't need to have a ref to every image for this exercise. It should be enough to have a ref to the currently active image, or to the list itself. Use `flushSync` to ensure the DOM is updated *before* you scroll.
+
+</Hint>
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function CatFriends() {
+  const [index, setIndex] = useState(0);
+  return (
+    <>
+      <nav>
+        <button onClick={() => {
+          if (index < catList.length - 1) {
+            setIndex(index + 1);
+          } else {
+            setIndex(0);
+          }
+        }}>
+          Next
+        </button>
+      </nav>
+      <div>
+        <ul>
+          {catList.map((cat, i) => (
+            <li key={cat.id}>
+              <img
+                className={
+                  index === i ?
+                    'active' :
+                    ''
+                }
+                src={cat.imageUrl}
+                alt={'Cat #' + cat.id}
+              />
+            </li>
+          ))}
+        </ul>
+      </div>
+    </>
+  );
+}
+
+const catList = [];
+for (let i = 0; i < 10; i++) {
+  catList.push({
+    id: i,
+    imageUrl: 'https://placekitten.com/250/200?image=' + i
+  });
+}
+
+```
+
+```css
+div {
+  width: 100%;
+  overflow: hidden;
+}
+
+nav {
+  text-align: center;
+}
+
+button {
+  margin: .25rem;
+}
+
+ul,
+li {
+  list-style: none;
+  white-space: nowrap;
+}
+
+li {
+  display: inline;
+  padding: 0.5rem;
+}
+
+img {
+  padding: 10px;
+  margin: -10px;
+  transition: background 0.2s linear;
+}
+
+.active {
+  background: rgba(0, 100, 150, 0.4);
+}
+```
+
+</Sandpack>
+
+<Solution>
+
+You can declare a `selectedRef`, and then pass it conditionally only to the current image:
+
+```js
+<li ref={index === i ? selectedRef : null}>
+```
+
+When `index === i`, meaning that the image is the selected one, the `<li>` will receive the `selectedRef`. React will make sure that `selectedRef.current` always points at the correct DOM node.
+
+Note that the `flushSync` call is necessary to force React to update the DOM before the scroll. Otherwise, `selectedRef.current` would always point at the previously selected item.
+
+<Sandpack>
+
+```js
+import { useRef, useState } from 'react';
+import { flushSync } from 'react-dom';
+
+export default function CatFriends() {
+  const selectedRef = useRef(null);
+  const [index, setIndex] = useState(0);
+
+  return (
+    <>
+      <nav>
+        <button onClick={() => {
+          flushSync(() => {
+            if (index < catList.length - 1) {
+              setIndex(index + 1);
+            } else {
+              setIndex(0);
+            }
+          });
+          selectedRef.current.scrollIntoView({
+            behavior: 'smooth',
+            block: 'nearest',
+            inline: 'center'
+          });            
+        }}>
+          Next
+        </button>
+      </nav>
+      <div>
+        <ul>
+          {catList.map((cat, i) => (
+            <li
+              key={cat.id}
+              ref={index === i ?
+                selectedRef :
+                null
+              }
+            >
+              <img
+                className={
+                  index === i ?
+                    'active'
+                    : ''
+                }
+                src={cat.imageUrl}
+                alt={'Cat #' + cat.id}
+              />
+            </li>
+          ))}
+        </ul>
+      </div>
+    </>
+  );
+}
+
+const catList = [];
+for (let i = 0; i < 10; i++) {
+  catList.push({
+    id: i,
+    imageUrl: 'https://placekitten.com/250/200?image=' + i
+  });
+}
+
+```
+
+```css
+div {
+  width: 100%;
+  overflow: hidden;
+}
+
+nav {
+  text-align: center;
+}
+
+button {
+  margin: .25rem;
+}
+
+ul,
+li {
+  list-style: none;
+  white-space: nowrap;
+}
+
+li {
+  display: inline;
+  padding: 0.5rem;
+}
+
+img {
+  padding: 10px;
+  margin: -10px;
+  transition: background 0.2s linear;
+}
+
+.active {
+  background: rgba(0, 100, 150, 0.4);
+}
+```
+
+</Sandpack>
+
+</Solution>
+
+#### Focus the search field with separate components {/*focus-the-search-field-with-separate-components*/}
+
+Make it so that clicking the "Search" button puts focus into the field. Note that each component is defined in a separate file and shouldn't be moved out of it. How do you connect them together?
+
+<Hint>
+
+You'll need `forwardRef` to opt into exposing a DOM node from your own component like `SearchInput`.
+
+</Hint>
+
+<Sandpack>
+
+```js App.js
+import SearchButton from './SearchButton.js';
+import SearchInput from './SearchInput.js';
+
+export default function Page() {
+  return (
+    <>
+      <nav>
+        <SearchButton />
+      </nav>
+      <SearchInput />
+    </>
+  );
+}
+```
+
+```js SearchButton.js
+export default function SearchButton() {
+  return (
+    <button>
+      Search
+    </button>
+  );
+}
+```
+
+```js SearchInput.js
+export default function SearchInput() {
+  return (
+    <input
+      placeholder="Looking for something?"
+    />
+  );
+}
+```
+
+```css
+button { display: block; margin-bottom: 10px; }
+```
+
+</Sandpack>
+
+<Solution>
+
+You'll need to add an `onClick` prop to the `SearchButton`, and make the `SearchButton` pass it down to the browser `<button>`. You'll also pass a ref down to `<SearchInput>`, which will forward it to the real `<input>` and populate it. Finally, in the click handler, you'll call `focus` on the DOM node stored inside that ref.
+
+<Sandpack>
+
+```js App.js
+import { useRef } from 'react';
+import SearchButton from './SearchButton.js';
+import SearchInput from './SearchInput.js';
+
+export default function Page() {
+  const inputRef = useRef(null);
+  return (
+    <>
+      <nav>
+        <SearchButton onClick={() => {
+          inputRef.current.focus();
+        }} />
+      </nav>
+      <SearchInput ref={inputRef} />
+    </>
+  );
+}
+```
+
+```js SearchButton.js
+export default function SearchButton({ onClick }) {
+  return (
+    <button onClick={onClick}>
+      Search
+    </button>
+  );
+}
+```
+
+```js SearchInput.js
+import { forwardRef } from 'react';
+
+export default forwardRef(
+  function SearchInput(props, ref) {
+    return (
+      <input
+        ref={ref}
+        placeholder="Looking for something?"
+      />
+    );
+  }
+);
+```
+
+```css
+button { display: block; margin-bottom: 10px; }
+```
+
+</Sandpack>
+
+</Solution>
+
+</Challenges>
diff --git a/beta/src/content/learn/meet-the-team.md b/beta/src/content/learn/meet-the-team.md
new file mode 100644
index 000000000..ec48427e7
--- /dev/null
+++ b/beta/src/content/learn/meet-the-team.md
@@ -0,0 +1,87 @@
+---
+title: "Meet the Team"
+---
+
+<Intro>
+
+React development is led by a dedicated team working full time at Meta. It also receives contributions from people all over the world.
+
+</Intro>
+
+## React Core {/*react-core*/}
+
+The React Core team members work full time on the core component APIs, the engine that powers React DOM and React Native, React DevTools, and the React documentation website.
+
+Current members of the React team are listed in alphabetical order below.
+
+<TeamMember name="Andrew Clark" permalink="andrew-clark" photo="/images/team/acdlite.jpg" github="acdlite" twitter="acdlite" title="Engineer at Meta">
+    Andrew got started with web development by making sites with WordPress, and eventually tricked himself into doing JavaScript. His favorite pastime is karaoke. Andrew is either a Disney villain or a Disney princess, depending on the day.
+</TeamMember>
+
+<TeamMember name="Dan Abramov" permalink="dan-abramov" photo="/images/team/gaearon.jpg" github="gaearon" twitter="dan_abramov" title="Engineer at Meta">
+    Dan got into programming after he accidentally discovered Visual Basic inside Microsoft PowerPoint. He has found his true calling in turning [Sebastian](#sebastian-markbåge)'s tweets into long-form blog posts. Dan occasionally wins at Fortnite by hiding in a bush until the game ends.
+</TeamMember>
+
+<TeamMember name="Jason Bonta" permalink="jason-bonta" photo="/images/team/jasonbonta.jpg" title="Engineering Manager at Meta">
+    Jason likes having large volumes of Amazon packages delivered to the office so that he can build forts. Despite literally walling himself off from his team at times and not understanding how for-of loops work, we appreciate him for the unique qualities he brings to his work.
+</TeamMember>
+
+<TeamMember name="Joe Savona" permalink="joe-savona" photo="/images/team/joe.jpg" github="josephsavona" twitter="en_JS" title="Engineer at Meta">
+    Joe was planning to major in math and philosophy but got into computer science after writing physics simulations in Matlab. Prior to React, he worked on Relay, RSocket.js, and the Skip programming language. While he’s not building some sort of reactive system he enjoys running, studying Japanese, and spending time with his family.
+</TeamMember>
+
+<TeamMember name="Josh Story" permalink="josh-story" photo="/images/team/josh.jpg" github="gnoff" twitter="joshcstory" title="Engineer at Vercel">
+    Josh majored in Mathematics and discovered programming while in college. His first professional developer job was to program insurance rate calculations in Microsoft Excel, the paragon of Reactive Programming which must be why he now works on React. In between that time Josh has been an IC, Manager, and Executive at a few startups. outside of work he likes to push his limits with cooking.
+</TeamMember>
+
+<TeamMember name="Lauren Tan" permalink="lauren-tan" photo="/images/team/lauren.jpg" github="poteto" twitter="potetotes" personal="no.lol" title="Engineer at Meta">
+    Lauren’s programming career peaked when she first discovered the `<marquee>` tag. She’s been chasing that high ever since. When she’s not adding bugs into React, she enjoys dropping cheeky memes in chat, and playing all too many video games with her partner, and her dog Zelda.
+</TeamMember>
+
+<TeamMember name="Luna Ruan" permalink="luna-ruan" photo="/images/team/lunaruan.jpg" github="lunaruan" twitter="lunaruan" title="Engineer at Meta">
+    Luna learned programming because she thought it meant creating video games. Instead, she ended up working on the Pinterest web app, and now on React itself. Luna doesn't want to make video games anymore, but she plans to do creative writing if she ever gets bored.
+</TeamMember>
+
+<TeamMember name="Mofei Zhang" permalink="mofei-zhang" photo="/images/team/mofei-zhang.png" github="mofeiZ" title="Engineer at Meta">
+    Mofei started programming when she realized it can help her cheat in video games. She focused on operating systems in undergrad / grad school, but now finds herself happily tinkering on React. Outside of work, she enjoys debugging bouldering problems and planning her next backpacking trip(s).
+</TeamMember>
+
+<TeamMember name="Rick Hanlon" permalink="rick-hanlon" photo="/images/team/rickhanlonii.jpg" github="rickhanlonii" twitter="rickhanlonii" personal="rickhanlon.codes" title="Engineer at Meta">
+    Ricky majored in theoretical math and somehow found himself on the React Native team for a couple years before joining the React team. When he's not programming you can find him snowboarding, biking, climbing, golfing, or closing GitHub issues that do not match the issue template.
+</TeamMember>
+
+<TeamMember name="Samuel Susla" permalink="samuel-susla" photo="/images/team/sam.jpg" github="sammy-SC" twitter="SamuelSusla" title="Engineer at Meta">
+    Samuel’s interest in programming started with the movie Matrix. He still has Matrix screen saver. Before working on React, he was focused on writing iOS apps. Outside of work, Samuel enjoys playing beach volleyball, squash, badminton and spending time with his family.
+</TeamMember>
+
+<TeamMember name="Sathya Gunasekaran " permalink="sathya-gunasekaran" photo="/images/team/sathya.jpg" github="gsathya" twitter="_gsathya" title="Engineer at Meta">
+    Sathya hated the Dragon Book in school but somehow ended up working on compilers all his career. When he's not compiling React components, he's either drinking coffee or eating yet another Dosa.
+</TeamMember>
+
+<TeamMember name="Sebastian Markbåge" permalink="sebastian-markbåge" photo="/images/team/sebmarkbage.jpg" github="sebmarkbage" twitter="sebmarkbage" title="Engineer at Vercel">
+    Sebastian majored in psychology. He's usually quiet. Even when he says something, it often doesn't make sense to the rest of us until a few months later. The correct way to pronounce his surname is "mark-boa-geh" but he settled for "mark-beige" out of pragmatism -- and that's how he approaches React.
+</TeamMember>
+
+<TeamMember name="Sebastian Silbermann" permalink="sebastian-silbermann" photo="/images/team/sebsilbermann.jpg" github="eps1lon" twitter="sebsilbermann" title="Independent Engineer">
+    Sebastian learned programming to make the browser games he played during class more enjoyable. Eventually this lead to contributing to as much open source code as possible. Outside of coding he's busy making sure people don't confuse him with the other Sebastians and Zilberman of the React community.
+</TeamMember>
+
+<TeamMember name="Seth Webster" permalink="seth-webster" photo="/images/team/seth.jpg" github="sethwebster" twitter="sethwebster" personal="sethwebster.com" title="Engineering Manager at Meta">
+    Seth started programming as a kid growing up in Tucson, AZ. After school, he was bitten by the music bug and was a touring musician for about 10 years before returning to *work*, starting with Intuit. In his spare time, he loves [taking pictures](https://www.sethwebster.com) and flying for animal rescues in the northeastern United States.
+</TeamMember>
+
+<TeamMember name="Sophie Alpert" permalink="sophie-alpert" photo="/images/team/sophiebits.jpg" github="sophiebits" twitter="sophiebits" personal="sophiebits.com" title="Independent Engineer">
+    Four days after React was released, Sophie rewrote the entirety of her then-current project to use it, which she now realizes was perhaps a bit reckless. After she became the project's #1 committer, she wondered why she wasn't getting paid by Facebook like everyone else was and joined the team officially to lead React through its adolescent years. Though she quit that job years ago, somehow she's still in the team's group chats and “providing value”.
+</TeamMember>
+
+<TeamMember name="Tianyu Yao" permalink="tianyu-yao" photo="/images/team/tianyu.jpg" github="tyao1" twitter="tianyu0" title="Engineer at Meta">
+    Tianyu’s interest in computers started as a kid because he loves video games. So he majored in computer science and still plays childish games like League of Legends. When he is not in front of a computer, he enjoys playing with his two kittens, hiking and kayaking.
+</TeamMember>
+
+<TeamMember name="Yuzhi Zheng" permalink="yuzhi-zheng" photo="/images/team/yuzhi.jpg" github="yuzhi" twitter="yuzhiz" title="Engineering Manager at Meta">
+    Yuzhi studied Computer Science in school. She liked the instant gratification of seeing code come to life without having to physically be in a laboratory. Now she’s a manager in the React org. Before management, she used to work on the Relay data fetching framework. In her spare time, Yuzhi enjoys optimizing her life via gardening and home improvement projects.
+</TeamMember>
+
+## Past contributors {/*past-contributors*/}
+
+You can find the past team members and other people who significantly contributed to React over the years on the [acknowledgements](/learn/acknowledgements) page.
diff --git a/beta/src/content/learn/passing-data-deeply-with-context.md b/beta/src/content/learn/passing-data-deeply-with-context.md
new file mode 100644
index 000000000..5a8213d67
--- /dev/null
+++ b/beta/src/content/learn/passing-data-deeply-with-context.md
@@ -0,0 +1,1160 @@
+---
+title: Passing Data Deeply with Context
+---
+
+<Intro>
+
+Usually, you will pass information from a parent component to a child component via props. But passing props can become verbose and inconvenient if you have to pass them through many components in the middle, or if many components in your app need the same information. *Context* lets the parent component make some information available to any component in the tree below it—no matter how deep—without passing it explicitly through props.
+
+</Intro>
+
+<YouWillLearn>
+
+- What "prop drilling" is
+- How to replace repetitive prop passing with context
+- Common use cases for context
+- Common alternatives to context
+
+</YouWillLearn>
+
+## The problem with passing props {/*the-problem-with-passing-props*/}
+
+[Passing props](/learn/passing-props-to-a-component) is a great way to explicitly pipe data through your UI tree to the components that use it.
+
+But passing props can become verbose and inconvenient when you need to pass some prop deeply through the tree, or if many components need the same prop. The nearest common ancestor could be far removed from the components that need data, and [lifting state up](/learn/sharing-state-between-components) that high can lead to a situation sometimes called "prop drilling".
+
+<DiagramGroup>
+
+<Diagram name="passing_data_lifting_state" height={160} width={608} captionPosition="top" alt="Diagram with a tree of three components. The parent contains a bubble representing a value highlighted in purple. The value flows down to each of the two children, both highlighted in purple." >
+
+Lifting state up
+
+</Diagram>
+<Diagram name="passing_data_prop_drilling" height={430} width={608} captionPosition="top" alt="Diagram with a tree of ten nodes, each node with two children or less. The root node contains a bubble representing a value highlighted in purple. The value flows down through the two children, each of which pass the value but do not contain it. The left child passes the value down to two children which are both highlighted purple. The right child of the root passes the value through to one of its two children - the right one, which is highlighted purple. That child passed the value through its single child, which passes it down to both of its two children, which are highlighted purple.">
+
+Prop drilling
+
+</Diagram>
+
+</DiagramGroup>
+
+Wouldn't it be great if there were a way to "teleport" data to the components in the tree that need it without passing props? With React's context feature, there is!
+
+## Context: an alternative to passing props {/*context-an-alternative-to-passing-props*/}
+
+Context lets a parent component provide data to the entire tree below it. There are many uses for context. Here is one example. Consider this `Heading` component that accepts a `level` for its size:
+
+<Sandpack>
+
+```js
+import Heading from './Heading.js';
+import Section from './Section.js';
+
+export default function Page() {
+  return (
+    <Section>
+      <Heading level={1}>Title</Heading>
+      <Heading level={2}>Heading</Heading>
+      <Heading level={3}>Sub-heading</Heading>
+      <Heading level={4}>Sub-sub-heading</Heading>
+      <Heading level={5}>Sub-sub-sub-heading</Heading>
+      <Heading level={6}>Sub-sub-sub-sub-heading</Heading>
+    </Section>
+  );
+}
+```
+
+```js Section.js
+export default function Section({ children }) {
+  return (
+    <section className="section">
+      {children}
+    </section>
+  );
+}
+```
+
+```js Heading.js
+export default function Heading({ level, children }) {
+  switch (level) {
+    case 1:
+      return <h1>{children}</h1>;
+    case 2:
+      return <h2>{children}</h2>;
+    case 3:
+      return <h3>{children}</h3>;
+    case 4:
+      return <h4>{children}</h4>;
+    case 5:
+      return <h5>{children}</h5>;
+    case 6:
+      return <h6>{children}</h6>;
+    default:
+      throw Error('Unknown level: ' + level);
+  }
+}
+```
+
+```css
+.section {
+  padding: 10px;
+  margin: 5px;
+  border-radius: 5px;
+  border: 1px solid #aaa;
+}
+```
+
+</Sandpack>
+
+Let's say you want multiple headings within the same `Section` to always have the same size:
+
+<Sandpack>
+
+```js
+import Heading from './Heading.js';
+import Section from './Section.js';
+
+export default function Page() {
+  return (
+    <Section>
+      <Heading level={1}>Title</Heading>
+      <Section>
+        <Heading level={2}>Heading</Heading>
+        <Heading level={2}>Heading</Heading>
+        <Heading level={2}>Heading</Heading>
+        <Section>
+          <Heading level={3}>Sub-heading</Heading>
+          <Heading level={3}>Sub-heading</Heading>
+          <Heading level={3}>Sub-heading</Heading>
+          <Section>
+            <Heading level={4}>Sub-sub-heading</Heading>
+            <Heading level={4}>Sub-sub-heading</Heading>
+            <Heading level={4}>Sub-sub-heading</Heading>
+          </Section>
+        </Section>
+      </Section>
+    </Section>
+  );
+}
+```
+
+```js Section.js
+export default function Section({ children }) {
+  return (
+    <section className="section">
+      {children}
+    </section>
+  );
+}
+```
+
+```js Heading.js
+export default function Heading({ level, children }) {
+  switch (level) {
+    case 1:
+      return <h1>{children}</h1>;
+    case 2:
+      return <h2>{children}</h2>;
+    case 3:
+      return <h3>{children}</h3>;
+    case 4:
+      return <h4>{children}</h4>;
+    case 5:
+      return <h5>{children}</h5>;
+    case 6:
+      return <h6>{children}</h6>;
+    default:
+      throw Error('Unknown level: ' + level);
+  }
+}
+```
+
+```css
+.section {
+  padding: 10px;
+  margin: 5px;
+  border-radius: 5px;
+  border: 1px solid #aaa;
+}
+```
+
+</Sandpack>
+
+Currently, you pass the `level` prop to each `<Heading>` separately:
+
+```js
+<Section>
+  <Heading level={3}>About</Heading>
+  <Heading level={3}>Photos</Heading>
+  <Heading level={3}>Videos</Heading>
+</Section>
+```
+
+It would be nice if you could pass the `level` prop to the `<Section>` component instead and remove it from the `<Heading>`. This way you could enforce that all headings in the same section have the same size:
+
+```js
+<Section level={3}>
+  <Heading>About</Heading>
+  <Heading>Photos</Heading>
+  <Heading>Videos</Heading>
+</Section>
+```
+
+But how can the `<Heading>` component know the level of its closest `<Section>`? **That would require some way for a child to "ask" for data from somewhere above in the tree.**
+
+You can't do it with props alone. This is where context comes into play. You will do it in three steps:
+
+1. **Create** a context. (You can call it `LevelContext`, since it's for the heading level.)
+2. **Use** that context from the component that needs the data. (`Heading` will use `LevelContext`.)
+3. **Provide** that context from the component that specifies the data. (`Section` will provide `LevelContext`.)
+
+Context lets a parent--even a distant one!--provide some data to the entire tree inside of it.
+
+<DiagramGroup>
+
+<Diagram name="passing_data_context_close" height={160} width={608} captionPosition="top" alt="Diagram with a tree of three components. The parent contains a bubble representing a value highlighted in orange which projects down to the two children, each highlighted in orange." >
+
+Using context in close children
+
+</Diagram>
+
+<Diagram name="passing_data_context_far" height={430} width={608} captionPosition="top" alt="Diagram with a tree of ten nodes, each node with two children or less. The root parent node contains a bubble representing a value highlighted in orange. The value projects down directly to four leaves and one intermediate component in the tree, which are all highlighted in orange. None of the other intermediate components are highlighted.">
+
+Using context in distant children
+
+</Diagram>
+
+</DiagramGroup>
+
+### Step 1: Create the context {/*step-1-create-the-context*/}
+
+First, you need to create the context. You'll need to **export it from a file** so that your components can use it:
+
+<Sandpack>
+
+```js
+import Heading from './Heading.js';
+import Section from './Section.js';
+
+export default function Page() {
+  return (
+    <Section>
+      <Heading level={1}>Title</Heading>
+      <Section>
+        <Heading level={2}>Heading</Heading>
+        <Heading level={2}>Heading</Heading>
+        <Heading level={2}>Heading</Heading>
+        <Section>
+          <Heading level={3}>Sub-heading</Heading>
+          <Heading level={3}>Sub-heading</Heading>
+          <Heading level={3}>Sub-heading</Heading>
+          <Section>
+            <Heading level={4}>Sub-sub-heading</Heading>
+            <Heading level={4}>Sub-sub-heading</Heading>
+            <Heading level={4}>Sub-sub-heading</Heading>
+          </Section>
+        </Section>
+      </Section>
+    </Section>
+  );
+}
+```
+
+```js Section.js
+export default function Section({ children }) {
+  return (
+    <section className="section">
+      {children}
+    </section>
+  );
+}
+```
+
+```js Heading.js
+export default function Heading({ level, children }) {
+  switch (level) {
+    case 1:
+      return <h1>{children}</h1>;
+    case 2:
+      return <h2>{children}</h2>;
+    case 3:
+      return <h3>{children}</h3>;
+    case 4:
+      return <h4>{children}</h4>;
+    case 5:
+      return <h5>{children}</h5>;
+    case 6:
+      return <h6>{children}</h6>;
+    default:
+      throw Error('Unknown level: ' + level);
+  }
+}
+```
+
+```js LevelContext.js active
+import { createContext } from 'react';
+
+export const LevelContext = createContext(1);
+```
+
+```css
+.section {
+  padding: 10px;
+  margin: 5px;
+  border-radius: 5px;
+  border: 1px solid #aaa;
+}
+```
+
+</Sandpack>
+
+The only argument to `createContext` is the _default_ value. Here, `1` refers to the biggest heading level, but you could pass any kind of value (even an object). You will see the significance of the default value in the next step.
+
+### Step 2: Use the context {/*step-2-use-the-context*/}
+
+Import the `useContext` Hook from React and your context:
+
+```js
+import { useContext } from 'react';
+import { LevelContext } from './LevelContext.js';
+```
+
+Currently, the `Heading` component reads `level` from props:
+
+```js
+export default function Heading({ level, children }) {
+  // ...
+}
+```
+
+Instead, remove the `level` prop and read the value from the context you just imported, `LevelContext`:
+
+```js {2}
+export default function Heading({ children }) {
+  const level = useContext(LevelContext);
+  // ...
+}
+```
+
+`useContext` is a Hook. Just like `useState` and `useReducer`, you can only call a Hook at the top level of a React component. **`useContext` tells React that the `Heading` component wants to read the `LevelContext`.**
+
+Now that the `Heading` component doesn't have a `level` prop, you don't need to pass the level prop to `Heading` in your JSX like this anymore:
+
+```js
+<Section>
+  <Heading level={4}>Sub-sub-heading</Heading>
+  <Heading level={4}>Sub-sub-heading</Heading>
+  <Heading level={4}>Sub-sub-heading</Heading>
+</Section>
+```
+
+Update the JSX so that it's the `Section` that receives it instead:
+
+```jsx
+<Section level={4}>
+  <Heading>Sub-sub-heading</Heading>
+  <Heading>Sub-sub-heading</Heading>
+  <Heading>Sub-sub-heading</Heading>
+</Section>
+```
+
+As a reminder, this is the markup that you were trying to get working:
+
+<Sandpack>
+
+```js
+import Heading from './Heading.js';
+import Section from './Section.js';
+
+export default function Page() {
+  return (
+    <Section level={1}>
+      <Heading>Title</Heading>
+      <Section level={2}>
+        <Heading>Heading</Heading>
+        <Heading>Heading</Heading>
+        <Heading>Heading</Heading>
+        <Section level={3}>
+          <Heading>Sub-heading</Heading>
+          <Heading>Sub-heading</Heading>
+          <Heading>Sub-heading</Heading>
+          <Section level={4}>
+            <Heading>Sub-sub-heading</Heading>
+            <Heading>Sub-sub-heading</Heading>
+            <Heading>Sub-sub-heading</Heading>
+          </Section>
+        </Section>
+      </Section>
+    </Section>
+  );
+}
+```
+
+```js Section.js
+export default function Section({ children }) {
+  return (
+    <section className="section">
+      {children}
+    </section>
+  );
+}
+```
+
+```js Heading.js
+import { useContext } from 'react';
+import { LevelContext } from './LevelContext.js';
+
+export default function Heading({ children }) {
+  const level = useContext(LevelContext);
+  switch (level) {
+    case 1:
+      return <h1>{children}</h1>;
+    case 2:
+      return <h2>{children}</h2>;
+    case 3:
+      return <h3>{children}</h3>;
+    case 4:
+      return <h4>{children}</h4>;
+    case 5:
+      return <h5>{children}</h5>;
+    case 6:
+      return <h6>{children}</h6>;
+    default:
+      throw Error('Unknown level: ' + level);
+  }
+}
+```
+
+```js LevelContext.js
+import { createContext } from 'react';
+
+export const LevelContext = createContext(1);
+```
+
+```css
+.section {
+  padding: 10px;
+  margin: 5px;
+  border-radius: 5px;
+  border: 1px solid #aaa;
+}
+```
+
+</Sandpack>
+
+Notice this example doesn't quite work, yet! All the headings have the same size because **even though you're *using* the context, you have not *provided* it yet.** React doesn't know where to get it!
+
+If you don't provide the context, React will use the default value you've specified in the previous step. In this example, you specified `1` as the argument to `createContext`, so `useContext(LevelContext)` returns `1`, setting all those headings to `<h1>`. Let's fix this problem by having each `Section` provide its own context.
+
+### Step 3: Provide the context {/*step-3-provide-the-context*/}
+
+The `Section` component currently renders its children:
+
+```js
+export default function Section({ children }) {
+  return (
+    <section className="section">
+      {children}
+    </section>
+  );
+}
+```
+
+**Wrap them with a context provider** to provide the `LevelContext` to them:
+
+```js {1,6,8}
+import { LevelContext } from './LevelContext.js';
+
+export default function Section({ level, children }) {
+  return (
+    <section className="section">
+      <LevelContext.Provider value={level}>
+        {children}
+      </LevelContext.Provider>
+    </section>
+  );
+}
+```
+
+This tells React: "if any component inside this `<Section>` asks for `LevelContext`, give them this `level`." The component will use the value of the nearest `<LevelContext.Provider>` in the UI tree above it.
+
+<Sandpack>
+
+```js
+import Heading from './Heading.js';
+import Section from './Section.js';
+
+export default function Page() {
+  return (
+    <Section level={1}>
+      <Heading>Title</Heading>
+      <Section level={2}>
+        <Heading>Heading</Heading>
+        <Heading>Heading</Heading>
+        <Heading>Heading</Heading>
+        <Section level={3}>
+          <Heading>Sub-heading</Heading>
+          <Heading>Sub-heading</Heading>
+          <Heading>Sub-heading</Heading>
+          <Section level={4}>
+            <Heading>Sub-sub-heading</Heading>
+            <Heading>Sub-sub-heading</Heading>
+            <Heading>Sub-sub-heading</Heading>
+          </Section>
+        </Section>
+      </Section>
+    </Section>
+  );
+}
+```
+
+```js Section.js
+import { LevelContext } from './LevelContext.js';
+
+export default function Section({ level, children }) {
+  return (
+    <section className="section">
+      <LevelContext.Provider value={level}>
+        {children}
+      </LevelContext.Provider>
+    </section>
+  );
+}
+```
+
+```js Heading.js
+import { useContext } from 'react';
+import { LevelContext } from './LevelContext.js';
+
+export default function Heading({ children }) {
+  const level = useContext(LevelContext);
+  switch (level) {
+    case 1:
+      return <h1>{children}</h1>;
+    case 2:
+      return <h2>{children}</h2>;
+    case 3:
+      return <h3>{children}</h3>;
+    case 4:
+      return <h4>{children}</h4>;
+    case 5:
+      return <h5>{children}</h5>;
+    case 6:
+      return <h6>{children}</h6>;
+    default:
+      throw Error('Unknown level: ' + level);
+  }
+}
+```
+
+```js LevelContext.js
+import { createContext } from 'react';
+
+export const LevelContext = createContext(1);
+```
+
+```css
+.section {
+  padding: 10px;
+  margin: 5px;
+  border-radius: 5px;
+  border: 1px solid #aaa;
+}
+```
+
+</Sandpack>
+
+It's the same result as the original code, but you did not need to pass the `level` prop to each `Heading` component! Instead, it "figures out" its heading level by asking the closest `Section` above:
+
+1. You pass a `level` prop to the `<Section>`.
+2. `Section` wraps its children into `<LevelContext.Provider value={level}>`.
+3. `Heading` asks the closest value of `LevelContext` above with `useContext(LevelContext)`.
+
+## Using and providing context from the same component {/*using-and-providing-context-from-the-same-component*/}
+
+Currently, you still have to specify each section's `level` manually:
+
+```js
+export default function Page() {
+  return (
+    <Section level={1}>
+      ...
+      <Section level={2}>
+        ...
+        <Section level={3}>
+          ...
+```
+
+Since context lets you read information from a component above, each `Section` could read the `level` from the `Section` above, and pass `level + 1` down automatically. Here is how you could do it:
+
+```js Section.js {5,8}
+import { useContext } from 'react';
+import { LevelContext } from './LevelContext.js';
+
+export default function Section({ children }) {
+  const level = useContext(LevelContext);
+  return (
+    <section className="section">
+      <LevelContext.Provider value={level + 1}>
+        {children}
+      </LevelContext.Provider>
+    </section>
+  );
+}
+```
+
+With this change, you don't need to pass the `level` prop *either* to the `<Section>` or to the `<Heading>`:
+
+<Sandpack>
+
+```js
+import Heading from './Heading.js';
+import Section from './Section.js';
+
+export default function Page() {
+  return (
+    <Section>
+      <Heading>Title</Heading>
+      <Section>
+        <Heading>Heading</Heading>
+        <Heading>Heading</Heading>
+        <Heading>Heading</Heading>
+        <Section>
+          <Heading>Sub-heading</Heading>
+          <Heading>Sub-heading</Heading>
+          <Heading>Sub-heading</Heading>
+          <Section>
+            <Heading>Sub-sub-heading</Heading>
+            <Heading>Sub-sub-heading</Heading>
+            <Heading>Sub-sub-heading</Heading>
+          </Section>
+        </Section>
+      </Section>
+    </Section>
+  );
+}
+```
+
+```js Section.js
+import { useContext } from 'react';
+import { LevelContext } from './LevelContext.js';
+
+export default function Section({ children }) {
+  const level = useContext(LevelContext);
+  return (
+    <section className="section">
+      <LevelContext.Provider value={level + 1}>
+        {children}
+      </LevelContext.Provider>
+    </section>
+  );
+}
+```
+
+```js Heading.js
+import { useContext } from 'react';
+import { LevelContext } from './LevelContext.js';
+
+export default function Heading({ children }) {
+  const level = useContext(LevelContext);
+  switch (level) {
+    case 0:
+      throw Error('Heading must be inside a Section!');
+    case 1:
+      return <h1>{children}</h1>;
+    case 2:
+      return <h2>{children}</h2>;
+    case 3:
+      return <h3>{children}</h3>;
+    case 4:
+      return <h4>{children}</h4>;
+    case 5:
+      return <h5>{children}</h5>;
+    case 6:
+      return <h6>{children}</h6>;
+    default:
+      throw Error('Unknown level: ' + level);
+  }
+}
+```
+
+```js LevelContext.js
+import { createContext } from 'react';
+
+export const LevelContext = createContext(0);
+```
+
+```css
+.section {
+  padding: 10px;
+  margin: 5px;
+  border-radius: 5px;
+  border: 1px solid #aaa;
+}
+```
+
+</Sandpack>
+
+Now both `Heading` and `Section` read the `LevelContext` to figure out how "deep" they are. And the `Section` wraps its children into the `LevelContext` to specify that anything inside of it is at a "deeper" level.
+
+>This example uses heading levels because they show visually how nested components can override context. But context is useful for many other use cases too. You can use it to pass down any information needed by the entire subtree: the current color theme, the currently logged in user, and so on.
+
+## Context passes through intermediate components {/*context-passes-through-intermediate-components*/}
+
+You can insert as many components as you like between the component that provides context and the one that uses it. This includes both built-in components like `<div>` and components you might build yourself.
+
+In this example, the same `Post` component (with a dashed border) is rendered at two different nesting levels. Notice that the `<Heading>` inside of it gets its level automatically from the closest `<Section>`:
+
+<Sandpack>
+
+```js
+import Heading from './Heading.js';
+import Section from './Section.js';
+
+export default function ProfilePage() {
+  return (
+    <Section>
+      <Heading>My Profile</Heading>
+      <Post
+        title="Hello traveller!"
+        body="Read about my adventures."
+      />
+      <AllPosts />
+    </Section>
+  );
+}
+
+function AllPosts() {
+  return (
+    <Section>
+      <Heading>Posts</Heading>
+      <RecentPosts />
+    </Section>
+  );
+}
+
+function RecentPosts() {
+  return (
+    <Section>
+      <Heading>Recent Posts</Heading>
+      <Post
+        title="Flavors of Lisbon"
+        body="...those pastéis de nata!"
+      />
+      <Post
+        title="Buenos Aires in the rhythm of tango"
+        body="I loved it!"
+      />
+    </Section>
+  );
+}
+
+function Post({ title, body }) {
+  return (
+    <Section isFancy={true}>
+      <Heading>
+        {title}
+      </Heading>
+      <p><i>{body}</i></p>
+    </Section>
+  );
+}
+```
+
+```js Section.js
+import { useContext } from 'react';
+import { LevelContext } from './LevelContext.js';
+
+export default function Section({ children, isFancy }) {
+  const level = useContext(LevelContext);
+  return (
+    <section className={
+      'section ' +
+      (isFancy ? 'fancy' : '')
+    }>
+      <LevelContext.Provider value={level + 1}>
+        {children}
+      </LevelContext.Provider>
+    </section>
+  );
+}
+```
+
+```js Heading.js
+import { useContext } from 'react';
+import { LevelContext } from './LevelContext.js';
+
+export default function Heading({ children }) {
+  const level = useContext(LevelContext);
+  switch (level) {
+    case 0:
+      throw Error('Heading must be inside a Section!');
+    case 1:
+      return <h1>{children}</h1>;
+    case 2:
+      return <h2>{children}</h2>;
+    case 3:
+      return <h3>{children}</h3>;
+    case 4:
+      return <h4>{children}</h4>;
+    case 5:
+      return <h5>{children}</h5>;
+    case 6:
+      return <h6>{children}</h6>;
+    default:
+      throw Error('Unknown level: ' + level);
+  }
+}
+```
+
+```js LevelContext.js
+import { createContext } from 'react';
+
+export const LevelContext = createContext(0);
+```
+
+```css
+.section {
+  padding: 10px;
+  margin: 5px;
+  border-radius: 5px;
+  border: 1px solid #aaa;
+}
+
+.fancy {
+  border: 4px dashed pink;
+}
+```
+
+</Sandpack>
+
+You didn't do anything special for this to work. A `Section` specifies the context for the tree inside it, so you can insert a `<Heading>` anywhere, and it will have the correct size. Try it in the sandbox above!
+
+**Context lets you write components that "adapt to their surroundings" and display themselves differently depending on _where_ (or, in other words, _in which context_) they are being rendered.**
+
+How context works might remind you of [CSS property inheritance.](https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance) In CSS, you can specify `color: blue` for a `<div>`, and any DOM node inside of it, no matter how deep, will inherit that color unless some other DOM node in the middle overrides it with `color: green`. Similarly, in React, the only way to override some context coming from above is to wrap children into a context provider with a different value.
+
+In CSS, different properties like `color` and `background-color` don't override each other. You can set all  `<div>`'s `color` to red without impacting `background-color`. Similarly, **different React contexts don't override each other.** Each context that you make with `createContext()` is completely separate from other ones, and ties together components using and providing *that particular* context. One component may use or provide many different contexts without a problem.
+
+## Before you use context {/*before-you-use-context*/}
+
+Context is very tempting to use! However, this also means it's too easy to overuse it. **Just because you need to pass some props several levels deep doesn't mean you should put that information into context.**
+
+Here's a few alternatives you should consider before using context:
+
+1. **Start by [passing props.](/learn/passing-props-to-a-component)** If your components are not trivial, it's not unusual to pass a dozen props down through a dozen components. It may feel like a slog, but it makes it very clear which components use which data! The person maintaining your code will be glad you've made the data flow explicit with props.
+2. **Extract components and [pass JSX as `children`](/learn/passing-props-to-a-component#passing-jsx-as-children) to them.** If you pass some data through many layers of intermediate components that don't use that data (and only pass it further down), this often means that you forgot to extract some components along the way. For example, maybe you pass data props like `posts` to visual components that don't use them directly, like `<Layout posts={posts} />`. Instead, make `Layout` take `children` as a prop, and render `<Layout><Posts posts={posts} /></Layout>`. This reduces the number of layers between the component specifying the data and the one that needs it.
+
+If neither of these approaches works well for you, consider context.
+
+## Use cases for context {/*use-cases-for-context*/}
+
+* **Theming:** If your app lets the user change its appearance (e.g. dark mode), you can put a context provider at the top of your app, and use that context in components that need to adjust their visual look.
+* **Current account:** Many components might need to know the currently logged in user. Putting it in context makes it convenient to read it anywhere in the tree. Some apps also let you operate multiple accounts at the same time (e.g. to leave a comment as a different user). In those cases, it can be convenient to wrap a part of the UI into a nested provider with a different current account value.
+* **Routing:** Most routing solutions use context internally to hold the current route. This is how every link "knows" whether it's active or not. If you build your own router, you might want to do it too.
+* **Managing state:** As your app grows, you might end up with a lot of state closer to the top of your app. Many distant components below may want to change it. It is common to [use a reducer together with context](/learn/scaling-up-with-reducer-and-context) to manage complex state and pass it down to distant components without too much hassle.
+  
+Context is not limited to static values. If you pass a different value on the next render, React will update all the components reading it below! This is why context is often used in combination with state.
+
+In general, if some information is needed by distant components in different parts of the tree, it's a good indication that context will help you.
+
+<Recap>
+
+* Context lets a component provide some information to the entire tree below it.
+* To pass context:
+  1. Create and export it with `export const MyContext = createContext(defaultValue)`.
+  2. Pass it to the `useContext(MyContext)` Hook to read it in any child component, no matter how deep.
+  3. Wrap children into `<MyContext.Provider value={...}>` to provide it from a parent.
+* Context passes through any components in the middle.
+* Context lets you write components that "adapt to their surroundings".
+* Before you use context, try passing props or passing JSX as `children`.
+
+</Recap>
+
+<Challenges>
+
+#### Replace prop drilling with context {/*replace-prop-drilling-with-context*/}
+
+In this example, toggling the checkbox changes the `imageSize` prop passed to each `<PlaceImage>`. The checkbox state is held in the top-level `App` component, but each `<PlaceImage>` needs to be aware of it.
+
+Currently, `App` passes `imageSize` to `List`, which passes it to each `Place`, which passes it to the `PlaceImage`. Remove the `imageSize` prop, and instead pass it from the `App` component directly to `PlaceImage`.
+
+You can declare context in `Context.js`.
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+import { places } from './data.js';
+import { getImageUrl } from './utils.js';
+
+export default function App() {
+  const [isLarge, setIsLarge] = useState(false);
+  const imageSize = isLarge ? 150 : 100;
+  return (
+    <>
+      <label>
+        <input
+          type="checkbox"
+          checked={isLarge}
+          onChange={e => {
+            setIsLarge(e.target.checked);
+          }}
+        />
+        Use large images
+      </label>
+      <hr />
+      <List imageSize={imageSize} />
+    </>
+  )
+}
+
+function List({ imageSize }) {
+  const listItems = places.map(place =>
+    <li key={place.id}>
+      <Place
+        place={place}
+        imageSize={imageSize}
+      />
+    </li>
+  );
+  return <ul>{listItems}</ul>;
+}
+
+function Place({ place, imageSize }) {
+  return (
+    <>
+      <PlaceImage
+        place={place}
+        imageSize={imageSize}
+      />
+      <p>
+        <b>{place.name}</b>
+        {': ' + place.description}
+      </p>
+    </>
+  );
+}
+
+function PlaceImage({ place, imageSize }) {
+  return (
+    <img
+      src={getImageUrl(place)}
+      alt={place.name}
+      width={imageSize}
+      height={imageSize}
+    />
+  );
+}
+```
+
+```js Context.js
+
+```
+
+```js data.js
+export const places = [{
+  id: 0,
+  name: 'Bo-Kaap in Cape Town, South Africa',
+  description: 'The tradition of choosing bright colors for houses began in the late 20th century.',
+  imageId: 'K9HVAGH'
+}, {
+  id: 1, 
+  name: 'Rainbow Village in Taichung, Taiwan',
+  description: 'To save the houses from demolition, Huang Yung-Fu, a local resident, painted all 1,200 of them in 1924.',
+  imageId: '9EAYZrt'
+}, {
+  id: 2, 
+  name: 'Macromural de Pachuca, Mexico',
+  description: 'One of the largest murals in the world covering homes in a hillside neighborhood.',
+  imageId: 'DgXHVwu'
+}, {
+  id: 3, 
+  name: 'Selarón Staircase in Rio de Janeiro, Brazil',
+  description: 'This landmark was created by Jorge Selarón, a Chilean-born artist, as a "tribute to the Brazilian people."',
+  imageId: 'aeO3rpI'
+}, {
+  id: 4, 
+  name: 'Burano, Italy',
+  description: 'The houses are painted following a specific color system dating back to 16th century.',
+  imageId: 'kxsph5C'
+}, {
+  id: 5, 
+  name: 'Chefchaouen, Marocco',
+  description: 'There are a few theories on why the houses are painted blue, including that the color repells mosquitos or that it symbolizes sky and heaven.',
+  imageId: 'rTqKo46'
+}, {
+  id: 6,
+  name: 'Gamcheon Culture Village in Busan, South Korea',
+  description: 'In 2009, the village was converted into a cultural hub by painting the houses and featuring exhibitions and art installations.',
+  imageId: 'ZfQOOzf'
+}];
+```
+
+```js utils.js
+export function getImageUrl(place) {
+  return (
+    'https://i.imgur.com/' +
+    place.imageId +
+    'l.jpg'
+  );
+}
+```
+
+```css
+ul { list-style-type: none; padding: 0px 10px; }
+li { 
+  margin-bottom: 10px; 
+  display: grid; 
+  grid-template-columns: auto 1fr;
+  gap: 20px;
+  align-items: center;
+}
+```
+
+</Sandpack>
+
+<Solution>
+
+Remove `imageSize` prop from all the components.
+
+Create and export `ImageSizeContext` from `Context.js`. Then wrap the List into `<ImageSizeContext.Provider value={imageSize}>` to pass the value down, and `useContext(ImageSizeContext)` to read it in the `PlaceImage`:
+
+<Sandpack>
+
+```js App.js
+import { useState, useContext } from 'react';
+import { places } from './data.js';
+import { getImageUrl } from './utils.js';
+import { ImageSizeContext } from './Context.js';
+
+export default function App() {
+  const [isLarge, setIsLarge] = useState(false);
+  const imageSize = isLarge ? 150 : 100;
+  return (
+    <ImageSizeContext.Provider
+      value={imageSize}
+    >
+      <label>
+        <input
+          type="checkbox"
+          checked={isLarge}
+          onChange={e => {
+            setIsLarge(e.target.checked);
+          }}
+        />
+        Use large images
+      </label>
+      <hr />
+      <List />
+    </ImageSizeContext.Provider>
+  )
+}
+
+function List() {
+  const listItems = places.map(place =>
+    <li key={place.id}>
+      <Place place={place} />
+    </li>
+  );
+  return <ul>{listItems}</ul>;
+}
+
+function Place({ place }) {
+  return (
+    <>
+      <PlaceImage place={place} />
+      <p>
+        <b>{place.name}</b>
+        {': ' + place.description}
+      </p>
+    </>
+  );
+}
+
+function PlaceImage({ place }) {
+  const imageSize = useContext(ImageSizeContext);
+  return (
+    <img
+      src={getImageUrl(place)}
+      alt={place.name}
+      width={imageSize}
+      height={imageSize}
+    />
+  );
+}
+```
+
+```js Context.js
+import { createContext } from 'react';
+
+export const ImageSizeContext = createContext(500);
+```
+
+```js data.js
+export const places = [{
+  id: 0,
+  name: 'Bo-Kaap in Cape Town, South Africa',
+  description: 'The tradition of choosing bright colors for houses began in the late 20th century.',
+  imageId: 'K9HVAGH'
+}, {
+  id: 1, 
+  name: 'Rainbow Village in Taichung, Taiwan',
+  description: 'To save the houses from demolition, Huang Yung-Fu, a local resident, painted all 1,200 of them in 1924.',
+  imageId: '9EAYZrt'
+}, {
+  id: 2, 
+  name: 'Macromural de Pachuca, Mexico',
+  description: 'One of the largest murals in the world covering homes in a hillside neighborhood.',
+  imageId: 'DgXHVwu'
+}, {
+  id: 3, 
+  name: 'Selarón Staircase in Rio de Janeiro, Brazil',
+  description: 'This landmark was created by Jorge Selarón, a Chilean-born artist, as a "tribute to the Brazilian people".',
+  imageId: 'aeO3rpI'
+}, {
+  id: 4, 
+  name: 'Burano, Italy',
+  description: 'The houses are painted following a specific color system dating back to 16th century.',
+  imageId: 'kxsph5C'
+}, {
+  id: 5, 
+  name: 'Chefchaouen, Marocco',
+  description: 'There are a few theories on why the houses are painted blue, including that the color repells mosquitos or that it symbolizes sky and heaven.',
+  imageId: 'rTqKo46'
+}, {
+  id: 6,
+  name: 'Gamcheon Culture Village in Busan, South Korea',
+  description: 'In 2009, the village was converted into a cultural hub by painting the houses and featuring exhibitions and art installations.',
+  imageId: 'ZfQOOzf'
+}];
+```
+
+```js utils.js
+export function getImageUrl(place) {
+  return (
+    'https://i.imgur.com/' +
+    place.imageId +
+    'l.jpg'
+  );
+}
+```
+
+```css
+ul { list-style-type: none; padding: 0px 10px; }
+li { 
+  margin-bottom: 10px; 
+  display: grid; 
+  grid-template-columns: auto 1fr;
+  gap: 20px;
+  align-items: center;
+}
+```
+
+</Sandpack>
+
+Note how components in the middle don't need to pass `imageSize` anymore.
+
+</Solution>
+
+</Challenges>
diff --git a/beta/src/content/learn/passing-props-to-a-component.md b/beta/src/content/learn/passing-props-to-a-component.md
new file mode 100644
index 000000000..111fa89bd
--- /dev/null
+++ b/beta/src/content/learn/passing-props-to-a-component.md
@@ -0,0 +1,1113 @@
+---
+title: Passing Props to a Component
+---
+
+<Intro>
+
+React components use *props* to communicate with each other. Every parent component can pass some information to its child components by giving them props. Props might remind you of HTML attributes, but you can pass any JavaScript value through them, including objects, arrays, and functions.
+
+</Intro>
+
+<YouWillLearn>
+
+* How to pass props to a component
+* How to read props from a component
+* How to specify default values for props
+* How to pass some JSX to a component
+* How props change over time
+
+</YouWillLearn>
+
+## Familiar props {/*familiar-props*/}
+
+Props are the information that you pass to a JSX tag. For example, `className`, `src`, `alt`, `width`, and `height` are some of the props you can pass to an `<img>`:
+
+<Sandpack>
+
+```js
+function Avatar() {
+  return (
+    <img
+      className="avatar"
+      src="https://i.imgur.com/1bX5QH6.jpg"
+      alt="Lin Lanying"
+      width={100}
+      height={100}
+    />
+  );
+}
+
+export default function Profile() {
+  return (
+    <Avatar />
+  );
+}
+```
+
+```css
+body { min-height: 120px; }
+.avatar { margin: 20px; border-radius: 50%; }
+```
+
+</Sandpack>
+
+The props you can pass to an `<img>` tag are predefined (ReactDOM conforms to [the HTML standard](https://www.w3.org/TR/html52/semantics-embedded-content.html#the-img-element)). But you can pass any props to *your own* components, such as `<Avatar>`, to customize them. Here's how!
+
+## Passing props to a component {/*passing-props-to-a-component*/}
+
+In this code, the `Profile` component isn't passing any props to its child component, `Avatar`:
+
+```js
+export default function Profile() {
+  return (
+    <Avatar />
+  );
+}
+```
+
+You can give `Avatar` some props in two steps.
+
+### Step 1: Pass props to the child component {/*step-1-pass-props-to-the-child-component*/}
+
+First, pass some props to `Avatar`. For example, let's pass two props: `person` (an object), and `size` (a number):
+
+```js
+export default function Profile() {
+  return (
+    <Avatar
+      person={{ name: 'Lin Lanying', imageId: '1bX5QH6' }}
+      size={100}
+    />
+  );
+}
+```
+
+> If double curly braces after `person=` confuse you, remember [they are merely an object](/learn/javascript-in-jsx-with-curly-braces#using-double-curlies-css-and-other-objects-in-jsx) inside the JSX curlies.
+
+Now you can read these props inside the `Avatar` component.
+
+### Step 2: Read props inside the child component {/*step-2-read-props-inside-the-child-component*/}
+
+You can read these props by listing their names `person, size` separated by the commas inside `({` and `})` directly after `function Avatar`. This lets you use them inside the `Avatar` code, like you would with a variable.
+
+```js
+function Avatar({ person, size }) {
+  // person and size are available here
+}
+```
+
+Add some logic to `Avatar` that uses the `person` and `size` props for rendering, and you're done.
+
+Now you can configure `Avatar` to render in many different ways with different props. Try tweaking the values!
+
+<Sandpack>
+
+```js App.js
+import { getImageUrl } from './utils.js';
+
+function Avatar({ person, size }) {
+  return (
+    <img
+      className="avatar"
+      src={getImageUrl(person)}
+      alt={person.name}
+      width={size}
+      height={size}
+    />
+  );
+}
+
+export default function Profile() {
+  return (
+    <div>
+      <Avatar
+        size={100}
+        person={{ 
+          name: 'Katsuko Saruhashi', 
+          imageId: 'YfeOqp2'
+        }}
+      />
+      <Avatar
+        size={80}
+        person={{
+          name: 'Aklilu Lemma', 
+          imageId: 'OKS67lh'
+        }}
+      />
+      <Avatar
+        size={50}
+        person={{ 
+          name: 'Lin Lanying',
+          imageId: '1bX5QH6'
+        }}
+      />
+    </div>
+  );
+}
+```
+
+```js utils.js
+export function getImageUrl(person, size = 's') {
+  return (
+    'https://i.imgur.com/' +
+    person.imageId +
+    size +
+    '.jpg'
+  );
+}
+```
+
+```css
+body { min-height: 120px; }
+.avatar { margin: 10px; border-radius: 50%; }
+```
+
+</Sandpack>
+
+Props let you think about parent and child components independently. For example, you can change the `person` or the `size` props inside `Profile` without having to think about how `Avatar` uses them. Similarly, you can change how the `Avatar` uses these props, without looking at the `Profile`.
+
+You can think of props like "knobs" that you can adjust. They serve the same role as arguments serve for functions—in fact, props _are_ the only argument to your component! React component functions accept a single argument, a `props` object:
+
+```js
+function Avatar(props) {
+  let person = props.person;
+  let size = props.size;
+  // ...
+}
+```
+
+Usually you don't need the whole `props` object itself, so you destructure it into individual props.
+
+<Pitfall>
+
+**Don't miss the pair of `{` and `}` curlies** inside of `(` and `)` when declaring props:
+
+```js
+function Avatar({ person, size }) {
+  // ...
+}
+```
+
+This syntax is called ["destructuring"](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Unpacking_fields_from_objects_passed_as_a_function_parameter) and is equivalent to reading properties from a function parameter:
+
+```js
+function Avatar(props) {
+  let person = props.person;
+  let size = props.size;
+  // ...
+}
+```
+
+</Pitfall>
+
+## Specifying a default value for a prop {/*specifying-a-default-value-for-a-prop*/}
+
+If you want to give a prop a default value to fall back on when no value is specified, you can do it with the destructuring by putting `=` and the default value right after the parameter:
+
+```js
+function Avatar({ person, size = 100 }) {
+  // ...
+}
+```
+
+Now, if `<Avatar person={...} />` is rendered with no `size` prop, the `size` will be set to `100`.
+
+The default value is only used if the `size` prop is missing or if you pass `size={undefined}`. But if you pass `size={null}` or `size={0}`, the default value will **not** be used.
+
+## Forwarding props with the JSX spread syntax {/*forwarding-props-with-the-jsx-spread-syntax*/}
+
+Sometimes, passing props gets very repetitive:
+
+```js
+function Profile({ person, size, isSepia, thickBorder }) {
+  return (
+    <div className="card">
+      <Avatar
+        person={person}
+        size={size}
+        isSepia={isSepia}
+        thickBorder={thickBorder}
+      />
+    </div>
+  );
+}
+```
+
+There's nothing wrong with repetitive code—it can be more legible. But at times you may value conciseness. Some components forward all of their props to their children, like how this `Profile` does with `Avatar`. Because they don't use any of their props directly, it can make sense to use a more concise "spread" syntax:
+
+```js
+function Profile(props) {
+  return (
+    <div className="card">
+      <Avatar {...props} />
+    </div>
+  );
+}
+```
+
+This forwards all of `Profile`'s props to the `Avatar` without listing each of their names.
+
+**Use spread syntax with restraint.** If you're using it in every other component, something is wrong. Often, it indicates that you should split your components and pass children as JSX. More on that next!
+
+## Passing JSX as children {/*passing-jsx-as-children*/}
+
+It is common to nest built-in browser tags:
+
+```js
+<div>
+  <img />
+</div>
+```
+
+Sometimes you'll want to nest your own components the same way:
+
+```js
+<Card>
+  <Avatar />
+</Card>
+```
+
+When you nest content inside a JSX tag, the parent component will receive that content in a prop called `children`. For example, the `Card` component below will receive a `children` prop set to `<Avatar />` and render it in a wrapper div:
+
+<Sandpack>
+
+```js App.js
+import Avatar from './Avatar.js';
+
+function Card({ children }) {
+  return (
+    <div className="card">
+      {children}
+    </div>
+  );
+}
+
+export default function Profile() {
+  return (
+    <Card>
+      <Avatar
+        size={100}
+        person={{ 
+          name: 'Katsuko Saruhashi',
+          imageId: 'YfeOqp2'
+        }}
+      />
+    </Card>
+  );
+}
+```
+
+```js Avatar.js
+import { getImageUrl } from './utils.js';
+
+export default function Avatar({ person, size }) {
+  return (
+    <img
+      className="avatar"
+      src={getImageUrl(person)}
+      alt={person.name}
+      width={size}
+      height={size}
+    />
+  );
+}
+```
+
+```js utils.js
+export function getImageUrl(person, size = 's') {
+  return (
+    'https://i.imgur.com/' +
+    person.imageId +
+    size +
+    '.jpg'
+  );
+}
+```
+
+```css
+.card {
+  width: fit-content;
+  margin: 5px;
+  padding: 5px;
+  font-size: 20px;
+  text-align: center;
+  border: 1px solid #aaa;
+  border-radius: 20px;
+  background: #fff;
+}
+.avatar {
+  margin: 20px;
+  border-radius: 50%;
+}
+```
+
+</Sandpack>
+
+Try replacing the `<Avatar>` inside `<Card>` with some text to see how the `Card` component can wrap any nested content. It doesn't need to "know" what's being rendered inside of it. You will see this flexible pattern in many places.
+
+You can think of a component with a `children` prop as having a "hole" that can be "filled in" by its parent components with arbitrary JSX. You will often use the `children` prop for visual wrappers: panels, grids, and so on.
+
+<Illustration src="/images/docs/illustrations/i_children-prop.png" alt='A puzzle-like Card tile with a slot for "children" pieces like text and Avatar' />
+
+## How props change over time {/*how-props-change-over-time*/}
+
+The `Clock` component below receives two props from its parent component: `color` and `time`. (The parent component's code is omitted because it uses [state](/learn/state-a-components-memory), which we won't dive into just yet.)
+
+Try changing the color in the select box below:
+
+<Sandpack>
+
+```js Clock.js active
+export default function Clock({ color, time }) {
+  return (
+    <h1 style={{ color: color }}>
+      {time}
+    </h1>
+  );
+}
+```
+
+```js App.js hidden
+import { useState, useEffect } from 'react';
+import Clock from './Clock.js';
+
+function useTime() {
+  const [time, setTime] = useState(() => new Date());
+  useEffect(() => {
+    const id = setInterval(() => {
+      setTime(new Date());
+    }, 1000);
+    return () => clearInterval(id);
+  }, []);
+  return time;
+}
+
+export default function App() {
+  const time = useTime();
+  const [color, setColor] = useState('lightcoral');
+  return (
+    <div>
+      <p>
+        Pick a color:{' '}
+        <select value={color} onChange={e => setColor(e.target.value)}>
+          <option value="lightcoral">lightcoral</option>
+          <option value="midnightblue">midnightblue</option>
+          <option value="rebeccapurple">rebeccapurple</option>
+        </select>
+      </p>
+      <Clock color={color} time={time.toLocaleTimeString()} />
+    </div>
+  );
+}
+```
+
+</Sandpack>
+
+This example illustrates that **a component may receive different props over time.** Props are not always static! Here, the `time` prop changes every second, and the `color` prop changes when you select another color. Props reflect a component's data at any point in time, rather than only in the beginning.
+
+However, props are [immutable](https://en.wikipedia.org/wiki/Immutable_object)—a term from computer science meaning "unchangeable". When a component needs to change its props (for example, in response to a user interaction or new data), it will have to "ask" its parent component to pass it _different props_—a new object! Its old props will then be cast aside, and eventually the JavaScript engine will reclaim the memory taken by them.
+
+**Don't try to "change props".** When you need to respond to the user input (like changing the selected color), you will need to "set state", which you can learn about in [State: A Component's Memory.](/learn/state-a-components-memory)
+
+<Recap>
+
+* To pass props, add them to the JSX, just like you would with HTML attributes.
+* To read props, use the `function Avatar({ person, size })` destructuring syntax.
+* You can specify a default value like `size = 100`, which is used for missing and `undefined` props.
+* You can forward all props with `<Avatar {...props} />` JSX spread syntax, but don't overuse it!
+* Nested JSX like `<Card><Avatar /></Card>` will appear as `Card` component's `children` prop.
+* Props are read-only snapshots in time: every render receives a new version of props.
+* You can't change props. When you need interactivity, you'll need to set state.
+
+</Recap>
+
+
+
+<Challenges>
+
+#### Extract a component {/*extract-a-component*/}
+
+This `Gallery` component contains some very similar markup for two profiles. Extract a `Profile` component out of it to reduce the duplication. You'll need to choose what props to pass to it.
+
+<Sandpack>
+
+```js App.js
+import { getImageUrl } from './utils.js';
+
+export default function Gallery() {
+  return (
+    <div>
+      <h1>Notable Scientists</h1>
+      <section className="profile">
+        <h2>Maria Skłodowska-Curie</h2>
+        <img
+          className="avatar"
+          src={getImageUrl('szV5sdG')}
+          alt="Maria Skłodowska-Curie"
+          width={70}
+          height={70}
+        />
+        <ul>
+          <li>
+            <b>Profession: </b> 
+            physicist and chemist
+          </li>
+          <li>
+            <b>Awards: 4 </b> 
+            (Nobel Prize in Physics, Nobel Prize in Chemistry, Davy Medal, Matteucci Medal)
+          </li>
+          <li>
+            <b>Discovered: </b>
+            polonium (element)
+          </li>
+        </ul>
+      </section>
+      <section className="profile">
+        <h2>Katsuko Saruhashi</h2>
+        <img
+          className="avatar"
+          src={getImageUrl('YfeOqp2')}
+          alt="Katsuko Saruhashi"
+          width={70}
+          height={70}
+        />
+        <ul>
+          <li>
+            <b>Profession: </b> 
+            geochemist
+          </li>
+          <li>
+            <b>Awards: 2 </b> 
+            (Miyake Prize for geochemistry, Tanaka Prize)
+          </li>
+          <li>
+            <b>Discovered: </b>
+            a method for measuring carbon dioxide in seawater
+          </li>
+        </ul>
+      </section>
+    </div>
+  );
+}
+```
+
+```js utils.js
+export function getImageUrl(imageId, size = 's') {
+  return (
+    'https://i.imgur.com/' +
+    imageId +
+    size +
+    '.jpg'
+  );
+}
+```
+
+```css
+.avatar { margin: 5px; border-radius: 50%; min-height: 70px; }
+.profile {
+  border: 1px solid #aaa;
+  border-radius: 6px;
+  margin-top: 20px;
+  padding: 10px;
+}
+h1, h2 { margin: 5px; }
+h1 { margin-bottom: 10px; }
+ul { padding: 0px 10px 0px 20px; }
+li { margin: 5px; }
+```
+
+</Sandpack>
+
+<Hint>
+
+Start by extracting the markup for one of the scientists. Then find the pieces that don't match it in the second example, and make them configurable by props.
+
+</Hint>
+
+<Solution>
+
+In this solution, the `Profile` component accepts multiple props: `imageId` (a string), `name` (a string), `profession` (a string), `awards` (an array of strings), `discovery` (a string), and `imageSize` (a number).
+
+Note that the `imageSize` prop has a default value, which is why we don't pass it to the component.
+
+<Sandpack>
+
+```js App.js
+import { getImageUrl } from './utils.js';
+
+function Profile({
+  imageId,
+  name,
+  profession,
+  awards,
+  discovery,
+  imageSize = 70
+}) {
+  return (
+    <section className="profile">
+      <h2>{name}</h2>
+      <img
+        className="avatar"
+        src={getImageUrl(imageId)}
+        alt={name}
+        width={imageSize}
+        height={imageSize}
+      />
+      <ul>
+        <li><b>Profession:</b> {profession}</li>
+        <li>
+          <b>Awards: {awards.length} </b>
+          ({awards.join(', ')})
+        </li>
+        <li>
+          <b>Discovered: </b>
+          {discovery}
+        </li>
+      </ul>
+    </section>
+  );
+}
+
+export default function Gallery() {
+  return (
+    <div>
+      <h1>Notable Scientists</h1>
+      <Profile
+        imageId="szV5sdG"
+        name="Maria Skłodowska-Curie"
+        profession="physicist and chemist"
+        discovery="polonium (chemical element)"
+        awards={[
+          'Nobel Prize in Physics',
+          'Nobel Prize in Chemistry',
+          'Davy Medal',
+          'Matteucci Medal'
+        ]}
+      />
+      <Profile
+        imageId='YfeOqp2'
+        name='Katsuko Saruhashi'
+        profession='geochemist'
+        discovery="a method for measuring carbon dioxide in seawater"
+        awards={[
+          'Miyake Prize for geochemistry',
+          'Tanaka Prize'
+        ]}
+      />
+    </div>
+  );
+}
+```
+
+```js utils.js
+export function getImageUrl(imageId, size = 's') {
+  return (
+    'https://i.imgur.com/' +
+    imageId +
+    size +
+    '.jpg'
+  );
+}
+```
+
+```css
+.avatar { margin: 5px; border-radius: 50%; min-height: 70px; }
+.profile {
+  border: 1px solid #aaa;
+  border-radius: 6px;
+  margin-top: 20px;
+  padding: 10px;
+}
+h1, h2 { margin: 5px; }
+h1 { margin-bottom: 10px; }
+ul { padding: 0px 10px 0px 20px; }
+li { margin: 5px; }
+```
+
+</Sandpack>
+
+Note how you don't need a separate `awardCount` prop if `awards` is an array. Then you can use `awards.length` to count the number of awards. Remember that props can take any values, and that includes arrays too!
+
+Another solution, which is more similar to the earlier examples on this page, is to group all information about a person in a single object, and pass that object as one prop:
+
+<Sandpack>
+
+```js App.js
+import { getImageUrl } from './utils.js';
+
+function Profile({ person, imageSize = 70 }) {
+  const imageSrc = getImageUrl(person)
+
+  return (
+    <section className="profile">
+      <h2>{person.name}</h2>
+      <img
+        className="avatar"
+        src={imageSrc}
+        alt={person.name}
+        width={imageSize}
+        height={imageSize}
+      />
+      <ul>
+        <li>
+          <b>Profession:</b> {person.profession}
+        </li>
+        <li>
+          <b>Awards: {person.awards.length} </b>
+          ({person.awards.join(', ')})
+        </li>
+        <li>
+          <b>Discovered: </b>
+          {person.discovery}
+        </li>
+      </ul>
+    </section>
+  )
+}
+
+export default function Gallery() {
+  return (
+    <div>
+      <h1>Notable Scientists</h1>
+      <Profile person={{
+        imageId: 'szV5sdG',
+        name: 'Maria Skłodowska-Curie',
+        profession: 'physicist and chemist',
+        discovery: 'polonium (chemical element)',
+        awards: [
+          'Nobel Prize in Physics',
+          'Nobel Prize in Chemistry',
+          'Davy Medal',
+          'Matteucci Medal'
+        ],
+      }} />
+      <Profile person={{
+        imageId: 'YfeOqp2',
+        name: 'Katsuko Saruhashi',
+        profession: 'geochemist',
+        discovery: 'a method for measuring carbon dioxide in seawater',
+        awards: [
+          'Miyake Prize for geochemistry',
+          'Tanaka Prize'
+        ],
+      }} />
+    </div>
+  );
+}
+```
+
+```js utils.js
+export function getImageUrl(person, size = 's') {
+  return (
+    'https://i.imgur.com/' +
+    person.imageId +
+    size +
+    '.jpg'
+  );
+}
+```
+
+```css
+.avatar { margin: 5px; border-radius: 50%; min-height: 70px; }
+.profile {
+  border: 1px solid #aaa;
+  border-radius: 6px;
+  margin-top: 20px;
+  padding: 10px;
+}
+h1, h2 { margin: 5px; }
+h1 { margin-bottom: 10px; }
+ul { padding: 0px 10px 0px 20px; }
+li { margin: 5px; }
+```
+
+</Sandpack>
+
+Although the syntax looks slightly different because you're describing properties of a JavaScript object rather than a collection of JSX attributes, these examples are mostly equivalent, and you can pick either approach.
+
+</Solution>
+
+#### Adjust the image size based on a prop {/*adjust-the-image-size-based-on-a-prop*/}
+
+In this example, `Avatar` receives a numeric `size` prop which determines the `<img>` width and height. The `size` prop is set to `40` in this example. However, if you open the image in a new tab, you'll notice that the image itself is larger (`160` pixels). The real image size is determined by which thumbnail size you're requesting.
+
+Change the `Avatar` component to request the closest image size based on the `size` prop. Specifically, if the `size` is less than `90`, pass `'s'` ("small") rather than `'b'` ("big") to the `getImageUrl` function. Verify that your changes work by rendering avatars with different values of the `size` prop and opening images in a new tab.
+
+<Sandpack>
+
+```js App.js
+import { getImageUrl } from './utils.js';
+
+function Avatar({ person, size }) {
+  return (
+    <img
+      className="avatar"
+      src={getImageUrl(person, 'b')}
+      alt={person.name}
+      width={size}
+      height={size}
+    />
+  );
+}
+
+export default function Profile() {
+  return (
+    <Avatar
+      size={40}
+      person={{ 
+        name: 'Gregorio Y. Zara', 
+        imageId: '7vQD0fP'
+      }}
+    />
+  );
+}
+```
+
+```js utils.js
+export function getImageUrl(person, size) {
+  return (
+    'https://i.imgur.com/' +
+    person.imageId +
+    size +
+    '.jpg'
+  );
+}
+```
+
+```css
+.avatar { margin: 20px; border-radius: 50%; }
+```
+
+</Sandpack>
+
+<Solution>
+
+Here is how you could go about it:
+
+<Sandpack>
+
+```js App.js
+import { getImageUrl } from './utils.js';
+
+function Avatar({ person, size }) {
+  let thumbnailSize = 's';
+  if (size > 90) {
+    thumbnailSize = 'b';
+  }
+  return (
+    <img
+      className="avatar"
+      src={getImageUrl(person, thumbnailSize)}
+      alt={person.name}
+      width={size}
+      height={size}
+    />
+  );
+}
+
+export default function Profile() {
+  return (
+    <>
+      <Avatar
+        size={40}
+        person={{ 
+          name: 'Gregorio Y. Zara', 
+          imageId: '7vQD0fP'
+        }}
+      />
+      <Avatar
+        size={120}
+        person={{ 
+          name: 'Gregorio Y. Zara', 
+          imageId: '7vQD0fP'
+        }}
+      />
+    </>
+  );
+}
+```
+
+```js utils.js
+export function getImageUrl(person, size) {
+  return (
+    'https://i.imgur.com/' +
+    person.imageId +
+    size +
+    '.jpg'
+  );
+}
+```
+
+```css
+.avatar { margin: 20px; border-radius: 50%; }
+```
+
+</Sandpack>
+
+You could also show a sharper image for high DPI screens by taking [`window.devicePixelRatio`](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio) into account:
+
+<Sandpack>
+
+```js App.js
+import { getImageUrl } from './utils.js';
+
+const ratio = window.devicePixelRatio;
+
+function Avatar({ person, size }) {
+  let thumbnailSize = 's';
+  if (size * ratio > 90) {
+    thumbnailSize = 'b';
+  }
+  return (
+    <img
+      className="avatar"
+      src={getImageUrl(person, thumbnailSize)}
+      alt={person.name}
+      width={size}
+      height={size}
+    />
+  );
+}
+
+export default function Profile() {
+  return (
+    <>
+      <Avatar
+        size={40}
+        person={{ 
+          name: 'Gregorio Y. Zara', 
+          imageId: '7vQD0fP'
+        }}
+      />
+      <Avatar
+        size={70}
+        person={{ 
+          name: 'Gregorio Y. Zara', 
+          imageId: '7vQD0fP'
+        }}
+      />
+      <Avatar
+        size={120}
+        person={{ 
+          name: 'Gregorio Y. Zara', 
+          imageId: '7vQD0fP'
+        }}
+      />
+    </>
+  );
+}
+```
+
+```js utils.js
+export function getImageUrl(person, size) {
+  return (
+    'https://i.imgur.com/' +
+    person.imageId +
+    size +
+    '.jpg'
+  );
+}
+```
+
+```css
+.avatar { margin: 20px; border-radius: 50%; }
+```
+
+</Sandpack>
+
+Props let you encapsulate logic like this inside the `Avatar` component (and change it later if needed) so that everyone can use the `<Avatar>` component without thinking about how the images are requested and resized.
+
+</Solution>
+
+#### Passing JSX in a `children` prop {/*passing-jsx-in-a-children-prop*/}
+
+Extract a `Card` component from the markup below, and use the `children` prop to pass different JSX to it:
+
+<Sandpack>
+
+```js
+export default function Profile() {
+  return (
+    <div>
+      <div className="card">
+        <div className="card-content">
+          <h1>Photo</h1>
+          <img
+            className="avatar"
+            src="https://i.imgur.com/OKS67lhm.jpg"
+            alt="Aklilu Lemma"
+            width={70}
+            height={70}
+          />
+        </div>
+      </div>
+      <div className="card">
+        <div className="card-content">
+          <h1>About</h1>
+          <p>Aklilu Lemma was a distinguished Ethiopian scientist who discovered a natural treatment to schistosomiasis.</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+```
+
+```css
+.card {
+  width: fit-content;
+  margin: 20px;
+  padding: 20px;
+  border: 1px solid #aaa;
+  border-radius: 20px;
+  background: #fff;
+}
+.card-content {
+  text-align: center;
+}
+.avatar {
+  margin: 10px;
+  border-radius: 50%;
+}
+h1 {
+  margin: 5px;
+  padding: 0;
+  font-size: 24px;
+}
+```
+
+</Sandpack>
+
+<Hint>
+
+Any JSX you put inside of a component's tag will be passed as the `children` prop to that component.
+
+</Hint>
+
+<Solution>
+
+This is how you can use the `Card` component in both places:
+
+<Sandpack>
+
+```js
+function Card({ children }) {
+  return (
+    <div className="card">
+      <div className="card-content">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export default function Profile() {
+  return (
+    <div>
+      <Card>
+        <h1>Photo</h1>
+        <img
+          className="avatar"
+          src="https://i.imgur.com/OKS67lhm.jpg"
+          alt="Aklilu Lemma"
+          width={100}
+          height={100}
+        />
+      </Card>
+      <Card>
+        <h1>About</h1>
+        <p>Aklilu Lemma was a distinguished Ethiopian scientist who discovered a natural treatment to schistosomiasis.</p>
+      </Card>
+    </div>
+  );
+}
+```
+
+```css
+.card {
+  width: fit-content;
+  margin: 20px;
+  padding: 20px;
+  border: 1px solid #aaa;
+  border-radius: 20px;
+  background: #fff;
+}
+.card-content {
+  text-align: center;
+}
+.avatar {
+  margin: 10px;
+  border-radius: 50%;
+}
+h1 {
+  margin: 5px;
+  padding: 0;
+  font-size: 24px;
+}
+```
+
+</Sandpack>
+
+You can also make `title` a separate prop if you want every `Card` to always have a title:
+
+<Sandpack>
+
+```js
+function Card({ children, title }) {
+  return (
+    <div className="card">
+      <div className="card-content">
+        <h1>{title}</h1>
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export default function Profile() {
+  return (
+    <div>
+      <Card title="Photo">
+        <img
+          className="avatar"
+          src="https://i.imgur.com/OKS67lhm.jpg"
+          alt="Aklilu Lemma"
+          width={100}
+          height={100}
+        />
+      </Card>
+      <Card title="About">
+        <p>Aklilu Lemma was a distinguished Ethiopian scientist who discovered a natural treatment to schistosomiasis.</p>
+      </Card>
+    </div>
+  );
+}
+```
+
+```css
+.card {
+  width: fit-content;
+  margin: 20px;
+  padding: 20px;
+  border: 1px solid #aaa;
+  border-radius: 20px;
+  background: #fff;
+}
+.card-content {
+  text-align: center;
+}
+.avatar {
+  margin: 10px;
+  border-radius: 50%;
+}
+h1 {
+  margin: 5px;
+  padding: 0;
+  font-size: 24px;
+}
+```
+
+</Sandpack>
+
+</Solution>
+
+</Challenges>
diff --git a/beta/src/content/learn/preserving-and-resetting-state.md b/beta/src/content/learn/preserving-and-resetting-state.md
new file mode 100644
index 000000000..22ebfc221
--- /dev/null
+++ b/beta/src/content/learn/preserving-and-resetting-state.md
@@ -0,0 +1,2196 @@
+---
+title: Preserving and Resetting State
+---
+
+<Intro>
+
+State is isolated between components. React keeps track of which state belongs to which component based on their place in the UI tree. You can control when to preserve state and when to reset it between re-renders.
+
+</Intro>
+
+<YouWillLearn>
+
+* How React "sees" component structures
+* When React chooses to preserve or reset the state
+* How to force React to reset component's state
+* How keys and types affect whether the state is preserved
+
+</YouWillLearn>
+
+## The UI tree {/*the-ui-tree*/}
+
+Browsers use many tree structures to model UI. The [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) represents HTML elements, the [CSSOM](https://developer.mozilla.org/docs/Web/API/CSS_Object_Model) does the same for CSS. There's even an [Accessibility tree](https://developer.mozilla.org/docs/Glossary/Accessibility_tree)!
+
+React also uses tree structures to manage and model the UI you make. React makes **UI trees** from your JSX. Then React DOM updates the browser DOM elements to match that UI tree. (React Native translates these trees into elements specific to mobile platforms.)
+
+<DiagramGroup>
+
+<Diagram name="preserving_state_dom_tree" height={193} width={864} alt="Diagram with three sections arranged horizontally. In the first section, there are three rectangles stacked vertically, with labels 'Component A', 'Component B', and 'Component C'. Transitioning to the next pane is an arrow with the React logo on top labeled 'React'. The middle section contains a tree of components, with the root labeled 'A' and two children labeled 'B' and 'C'. The next section is again transitioned using an arrow with the React logo on top labeled 'React'. The third and final section is a wireframe of a browser, containing a tree of 8 nodes, which has only a subset highlighted (indicating the subtree from the middle section).">
+
+From components, React creates a UI tree which React DOM uses to render the DOM
+
+</Diagram>
+
+</DiagramGroup>
+
+## State is tied to a position in the tree {/*state-is-tied-to-a-position-in-the-tree*/}
+
+When you give a component state, you might think the state "lives" inside the component. But the state is actually held inside React. React associates each piece of state it's holding with the correct component by where that component sits in the UI tree.
+
+
+Here, there is only one `<Counter />` JSX tag, but it's rendered at two different positions:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function App() {
+  const counter = <Counter />;
+  return (
+    <div>
+      {counter}
+      {counter}
+    </div>
+  );
+}
+
+function Counter() {
+  const [score, setScore] = useState(0);
+  const [hover, setHover] = useState(false);
+
+  let className = 'counter';
+  if (hover) {
+    className += ' hover';
+  }
+
+  return (
+    <div
+      className={className}
+      onPointerEnter={() => setHover(true)}
+      onPointerLeave={() => setHover(false)}
+    >
+      <h1>{score}</h1>
+      <button onClick={() => setScore(score + 1)}>
+        Add one
+      </button>
+    </div>
+  );
+}
+```
+
+```css
+label {
+  display: block;
+  clear: both;
+}
+
+.counter {
+  width: 100px;
+  text-align: center;
+  border: 1px solid gray;
+  border-radius: 4px;
+  padding: 20px;
+  margin: 0 20px 20px 0;
+  float: left;
+}
+
+.hover {
+  background: #ffffd8;
+}
+```
+
+</Sandpack>
+
+Here's how these look as a tree:    
+
+<DiagramGroup>
+
+<Diagram name="preserving_state_tree" height={248} width={395} alt="Diagram of a tree of React components. The root node is labeled 'div' and has two children. Each of the children are labeled 'Counter' and both contain a state bubble labeled 'count' with value 0.">
+
+React tree
+
+</Diagram>
+
+</DiagramGroup>
+
+**These are two separate counters because each is rendered at its own position in the tree.** You don't usually have to think about these positions to use React, but it can be useful to understand how it works.
+
+In React, each component on the screen has fully isolated state. For example, if you render two `Counter` components side by side, each of them will get its own, independent, `score` and `hover` states.
+
+Try clicking both counters and notice they don't affect each other:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function App() {
+  return (
+    <div>
+      <Counter />
+      <Counter />
+    </div>
+  );
+}
+
+function Counter() {
+  const [score, setScore] = useState(0);
+  const [hover, setHover] = useState(false);
+
+  let className = 'counter';
+  if (hover) {
+    className += ' hover';
+  }
+
+  return (
+    <div
+      className={className}
+      onPointerEnter={() => setHover(true)}
+      onPointerLeave={() => setHover(false)}
+    >
+      <h1>{score}</h1>
+      <button onClick={() => setScore(score + 1)}>
+        Add one
+      </button>
+    </div>
+  );
+}
+```
+
+```css
+.counter {
+  width: 100px;
+  text-align: center;
+  border: 1px solid gray;
+  border-radius: 4px;
+  padding: 20px;
+  margin: 0 20px 20px 0;
+  float: left;
+}
+
+.hover {
+  background: #ffffd8;
+}
+```
+
+</Sandpack>
+
+As you can see, when one counter is updated, only the state for that component is updated:
+
+
+<DiagramGroup>
+
+<Diagram name="preserving_state_increment" height={248} width={441} alt="Diagram of a tree of React components. The root node is labeled 'div' and has two children. The left child is labeled 'Counter' and contains a state bubble labeled 'count' with value 0. The right child is labeled 'Counter' and contains a state bubble labeled 'count' with value 1. The state bubble of the right child is highlighted in yellow to indicate its value has updated.">
+
+Updating state
+
+</Diagram>
+
+</DiagramGroup>
+
+
+React will keep the state around for as long as you render the same component at the same position. To see this, increment both counters, then remove the second component by unchecking "Render the second counter" checkbox, and then add it back by ticking it again:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function App() {
+  const [showB, setShowB] = useState(true);
+  return (
+    <div>
+      <Counter />
+      {showB && <Counter />} 
+      <label>
+        <input
+          type="checkbox"
+          checked={showB}
+          onChange={e => {
+            setShowB(e.target.checked)
+          }}
+        />
+        Render the second counter
+      </label>
+    </div>
+  );
+}
+
+function Counter() {
+  const [score, setScore] = useState(0);
+  const [hover, setHover] = useState(false);
+
+  let className = 'counter';
+  if (hover) {
+    className += ' hover';
+  }
+
+  return (
+    <div
+      className={className}
+      onPointerEnter={() => setHover(true)}
+      onPointerLeave={() => setHover(false)}
+    >
+      <h1>{score}</h1>
+      <button onClick={() => setScore(score + 1)}>
+        Add one
+      </button>
+    </div>
+  );
+}
+```
+
+```css
+label {
+  display: block;
+  clear: both;
+}
+
+.counter {
+  width: 100px;
+  text-align: center;
+  border: 1px solid gray;
+  border-radius: 4px;
+  padding: 20px;
+  margin: 0 20px 20px 0;
+  float: left;
+}
+
+.hover {
+  background: #ffffd8;
+}
+```
+
+</Sandpack>
+
+Notice how the moment you stop rendering the second counter, its state disappears completely. That's because when React removes a component, it destroys its state.
+
+<DiagramGroup>
+
+<Diagram name="preserving_state_remove_component" height={253} width={422} alt="Diagram of a tree of React components. The root node is labeled 'div' and has two children. The left child is labeled 'Counter' and contains a state bubble labeled 'count' with value 0. The right child is missing, and in its place is a yellow 'poof' image, highlighting the component being deleted from the tree.">
+
+Deleting a component
+
+</Diagram>
+
+</DiagramGroup>
+
+When you tick "Render the second counter", a second `Counter` and its state are initialized from scratch (`score = 0`) and added to the DOM.
+
+<DiagramGroup>
+
+<Diagram name="preserving_state_add_component" height={258} width={500} alt="Diagram of a tree of React components. The root node is labeled 'div' and has two children. The left child is labeled 'Counter' and contains a state bubble labeled 'count' with value 0. The right child is labeled 'Counter' and contains a state bubble labeled 'count' with value 0. The entire right child node is highlighted in yellow, indicating that it was just added to the tree.">
+
+Adding a component
+
+</Diagram>
+
+</DiagramGroup>
+
+**React preserves a component's state for as long as it's being rendered at its position in the UI tree.** If it gets removed, or a different component gets rendered at the same position, React discards its state.
+
+## Same component at the same position preserves state {/*same-component-at-the-same-position-preserves-state*/}
+
+In this example, there are two different `<Counter />` tags:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function App() {
+  const [isFancy, setIsFancy] = useState(false);
+  return (
+    <div>
+      {isFancy ? (
+        <Counter isFancy={true} /> 
+      ) : (
+        <Counter isFancy={false} /> 
+      )}
+      <label>
+        <input
+          type="checkbox"
+          checked={isFancy}
+          onChange={e => {
+            setIsFancy(e.target.checked)
+          }}
+        />
+        Use fancy styling
+      </label>
+    </div>
+  );
+}
+
+function Counter({ isFancy }) {
+  const [score, setScore] = useState(0);
+  const [hover, setHover] = useState(false);
+
+  let className = 'counter';
+  if (hover) {
+    className += ' hover';
+  }
+  if (isFancy) {
+    className += ' fancy';
+  }
+
+  return (
+    <div
+      className={className}
+      onPointerEnter={() => setHover(true)}
+      onPointerLeave={() => setHover(false)}
+    >
+      <h1>{score}</h1>
+      <button onClick={() => setScore(score + 1)}>
+        Add one
+      </button>
+    </div>
+  );
+}
+```
+
+```css
+label {
+  display: block;
+  clear: both;
+}
+
+.counter {
+  width: 100px;
+  text-align: center;
+  border: 1px solid gray;
+  border-radius: 4px;
+  padding: 20px;
+  margin: 0 20px 20px 0;
+  float: left;
+}
+
+.fancy {
+  border: 5px solid gold;
+  color: #ff6767;
+}
+
+.hover {
+  background: #ffffd8;
+}
+```
+
+</Sandpack>
+
+When you tick or clear the checkbox, the counter state does not get reset. Whether `isFancy` is `true` or `false`, you always have a `<Counter />` as the first child of the `div` returned from the root `App` component:
+
+<DiagramGroup>
+
+<Diagram name="preserving_state_same_component" height={461} width={600} alt="Diagram with two sections separated by an arrow transitioning between them. Each section contains a layout of components with a parent labeled 'App' containing a state bubble labeled isFancy. This component has one child labeled 'div', which leads to a prop bubble containing isFancy (highlighted in purple) passed down to the only child. The last child is labeled 'Counter' and contains a state bubble with label 'count' and value 3 in both diagrams. In the left section of the diagram, nothing is highlighted and the isFancy parent state value is false. In the right section of the diagram, the isFancy parent state value has changed to true and it is highlighted in yellow, and so is the props bubble below, which has also changed its isFancy value to true.">
+
+Updating the `App` state does not reset the `Counter` because `Counter` stays in the same position
+
+</Diagram>
+
+</DiagramGroup>
+
+
+It's the same component at the same position, so from React's perspective, it's the same counter.
+
+<Pitfall>
+
+Remember that **it's the position in the UI tree--not in the JSX markup--that matters to React!** This component has two `return` clauses with different `<Counter />` JSX tags inside and outside the `if`:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function App() {
+  const [isFancy, setIsFancy] = useState(false);
+  if (isFancy) {
+    return (
+      <div>
+        <Counter isFancy={true} />
+        <label>
+          <input
+            type="checkbox"
+            checked={isFancy}
+            onChange={e => {
+              setIsFancy(e.target.checked)
+            }}
+          />
+          Use fancy styling
+        </label>
+      </div>
+    );
+  }
+  return (
+    <div>
+      <Counter isFancy={false} />
+      <label>
+        <input
+          type="checkbox"
+          checked={isFancy}
+          onChange={e => {
+            setIsFancy(e.target.checked)
+          }}
+        />
+        Use fancy styling
+      </label>
+    </div>
+  );
+}
+
+function Counter({ isFancy }) {
+  const [score, setScore] = useState(0);
+  const [hover, setHover] = useState(false);
+
+  let className = 'counter';
+  if (hover) {
+    className += ' hover';
+  }
+  if (isFancy) {
+    className += ' fancy';
+  }
+
+  return (
+    <div
+      className={className}
+      onPointerEnter={() => setHover(true)}
+      onPointerLeave={() => setHover(false)}
+    >
+      <h1>{score}</h1>
+      <button onClick={() => setScore(score + 1)}>
+        Add one
+      </button>
+    </div>
+  );
+}
+```
+
+```css
+label {
+  display: block;
+  clear: both;
+}
+
+.counter {
+  width: 100px;
+  text-align: center;
+  border: 1px solid gray;
+  border-radius: 4px;
+  padding: 20px;
+  margin: 0 20px 20px 0;
+  float: left;
+}
+
+.fancy {
+  border: 5px solid gold;
+  color: #ff6767;
+}
+
+.hover {
+  background: #ffffd8;
+}
+```
+
+</Sandpack>
+
+You might expect the state to reset when you tick checkbox, but it doesn't! This is because **both of these `<Counter />` tags are rendered at the same position.** React doesn't know where you place the conditions in your function. All it "sees" is the tree you return. In both cases, the `App` component returns a `<div>` with `<Counter />` as a first child. This is why React considers them as _the same_ `<Counter />`.
+
+You can think of them as having the same "address": the first child of the first child of the root. This is how React matches them up between the previous and next renders, regardless of how you structure your logic.
+
+</Pitfall>
+
+## Different components at the same position reset state {/*different-components-at-the-same-position-reset-state*/}
+
+In this example, ticking the checkbox will replace `<Counter>` with a `<p>`:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function App() {
+  const [isPaused, setIsPaused] = useState(false);
+  return (
+    <div>
+      {isPaused ? (
+        <p>See you later!</p> 
+      ) : (
+        <Counter /> 
+      )}
+      <label>
+        <input
+          type="checkbox"
+          checked={isPaused}
+          onChange={e => {
+            setIsPaused(e.target.checked)
+          }}
+        />
+        Take a break
+      </label>
+    </div>
+  );
+}
+
+function Counter() {
+  const [score, setScore] = useState(0);
+  const [hover, setHover] = useState(false);
+
+  let className = 'counter';
+  if (hover) {
+    className += ' hover';
+  }
+
+  return (
+    <div
+      className={className}
+      onPointerEnter={() => setHover(true)}
+      onPointerLeave={() => setHover(false)}
+    >
+      <h1>{score}</h1>
+      <button onClick={() => setScore(score + 1)}>
+        Add one
+      </button>
+    </div>
+  );
+}
+```
+
+```css
+label {
+  display: block;
+  clear: both;
+}
+
+.counter {
+  width: 100px;
+  text-align: center;
+  border: 1px solid gray;
+  border-radius: 4px;
+  padding: 20px;
+  margin: 0 20px 20px 0;
+  float: left;
+}
+
+.hover {
+  background: #ffffd8;
+}
+```
+
+</Sandpack>
+
+Here, you switch between _different_ component types at the same position. Initially, the first child of the `<div>` contained a `Counter`. But when you swapped in a `p`, React removed the `Counter` from the UI tree and destroyed its state.
+
+<DiagramGroup>
+
+<Diagram name="preserving_state_diff_pt1" height={290} width={753} alt="Diagram with three sections, with an arrow transitioning each section in between. The first section contains a React component labeled 'div' with a single child labeled 'Counter' containing a state bubble labeled 'count' with value 3. The middle section has the same 'div' parent, but the child component has now been deleted, indicated by a yellow 'proof' image. The third section has the same 'div' parent again, now with a new child labeled 'p', highlighted in yellow.">
+
+When `Counter` changes to `p`, the `Counter` is deleted and the `p` is added
+
+</Diagram>
+
+</DiagramGroup>
+
+<DiagramGroup>
+
+<Diagram name="preserving_state_diff_pt2" height={290} width={753} alt="Diagram with three sections, with an arrow transitioning each section in between. The first section contains a React component labeled 'p'. The middle section has the same 'div' parent, but the child component has now been deleted, indicated by a yellow 'proof' image. The third section has the same 'div' parent again, now with a new child labeled 'Counter' containing a state bubble labeled 'count' with value 0, highlighted in yellow.">
+
+When switching back, the `p` is deleted and the `Counter` is added
+
+</Diagram>
+
+</DiagramGroup>
+
+Also, **when you render a different component in the same position, it resets the state of its entire subtree.** To see how this works, increment the counter and then tick the checkbox:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function App() {
+  const [isFancy, setIsFancy] = useState(false);
+  return (
+    <div>
+      {isFancy ? (
+        <div>
+          <Counter isFancy={true} /> 
+        </div>
+      ) : (
+        <section>
+          <Counter isFancy={false} />
+        </section>
+      )}
+      <label>
+        <input
+          type="checkbox"
+          checked={isFancy}
+          onChange={e => {
+            setIsFancy(e.target.checked)
+          }}
+        />
+        Use fancy styling
+      </label>
+    </div>
+  );
+}
+
+function Counter({ isFancy }) {
+  const [score, setScore] = useState(0);
+  const [hover, setHover] = useState(false);
+
+  let className = 'counter';
+  if (hover) {
+    className += ' hover';
+  }
+  if (isFancy) {
+    className += ' fancy';
+  }
+
+  return (
+    <div
+      className={className}
+      onPointerEnter={() => setHover(true)}
+      onPointerLeave={() => setHover(false)}
+    >
+      <h1>{score}</h1>
+      <button onClick={() => setScore(score + 1)}>
+        Add one
+      </button>
+    </div>
+  );
+}
+```
+
+```css
+label {
+  display: block;
+  clear: both;
+}
+
+.counter {
+  width: 100px;
+  text-align: center;
+  border: 1px solid gray;
+  border-radius: 4px;
+  padding: 20px;
+  margin: 0 20px 20px 0;
+  float: left;
+}
+
+.fancy {
+  border: 5px solid gold;
+  color: #ff6767;
+}
+
+.hover {
+  background: #ffffd8;
+}
+```
+
+</Sandpack>
+
+The counter state gets reset when you click the checkbox. Although you render a `Counter`, the first child of the `div` changes from a `div` to a `section`. When the child `div` was removed from the DOM, the whole tree below it (including the `Counter` and its state) was destroyed as well.
+
+<DiagramGroup>
+
+<Diagram name="preserving_state_diff_same_pt1" height={350} width={794} alt="Diagram with three sections, with an arrow transitioning each section in between. The first section contains a React component labeled 'div' with a single child labeled 'section', which has a single child labeled 'Counter' containing a state bubble labeled 'count' with value 3. The middle section has the same 'div' parent, but the child components have now been deleted, indicated by a yellow 'proof' image. The third section has the same 'div' parent again, now with a new child labeled 'div', highlighted in yellow, also with a new child labeled 'Counter' containing a state bubble labeled 'count' with value 0, all highlighted in yellow.">
+
+When `section` changes to `div`, the `section` is deleted and the new `div` is added
+
+</Diagram>
+
+</DiagramGroup>
+
+<DiagramGroup>
+
+<Diagram name="preserving_state_diff_same_pt2" height={350} width={794} alt="Diagram with three sections, with an arrow transitioning each section in between. The first section contains a React component labeled 'div' with a single child labeled 'div', which has a single child labeled 'Counter' containing a state bubble labeled 'count' with value 0. The middle section has the same 'div' parent, but the child components have now been deleted, indicated by a yellow 'proof' image. The third section has the same 'div' parent again, now with a new child labeled 'section', highlighted in yellow, also with a new child labeled 'Counter' containing a state bubble labeled 'count' with value 0, all highlighted in yellow.">
+
+When switching back, the `div` is deleted and the new `section` is added
+
+</Diagram>
+
+</DiagramGroup>
+
+As a rule of thumb, **if you want to preserve the state between re-renders, the structure of your tree needs to "match up"** from one render to another. If the structure is different, the state gets destroyed because React destroys state when it removes a component from the tree.
+
+<Pitfall>
+
+This is why you should not nest component function definitions.
+
+Here, the `MyTextField` component function is defined *inside* `MyComponent`:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function MyComponent() {
+  const [counter, setCounter] = useState(0);
+
+  function MyTextField() {
+    const [text, setText] = useState('');
+
+    return (
+      <input
+        value={text}
+        onChange={e => setText(e.target.value)}
+      />
+    );
+  }
+
+  return (
+    <>
+      <MyTextField />
+      <button onClick={() => {
+        setCounter(counter + 1)
+      }}>Clicked {counter} times</button>
+    </>
+  );
+}
+```
+
+</Sandpack>
+
+
+Every time you click the button, the input state disappears! This is because a *different* `MyTextField` function is created for every render of `MyComponent`. You're rendering a *different* component in the same position, so React resets all state below. This leads to bugs and performance problems. To avoid this problem, **always declare component functions at the top level, and don't nest their definitions.**
+
+</Pitfall>
+
+## Resetting state at the same position {/*resetting-state-at-the-same-position*/}
+
+By default, React preserves state of a component while it stays at the same position. Usually, this is exactly what you want, so it makes sense as the default behavior. But sometimes, you may want to reset a component's state. Consider this app that lets two players keep track of their scores during each turn:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function Scoreboard() {
+  const [isPlayerA, setIsPlayerA] = useState(true);
+  return (
+    <div>
+      {isPlayerA ? (
+        <Counter person="Taylor" />
+      ) : (
+        <Counter person="Sarah" />
+      )}
+      <button onClick={() => {
+        setIsPlayerA(!isPlayerA);
+      }}>
+        Next player!
+      </button>
+    </div>
+  );
+}
+
+function Counter({ person }) {
+  const [score, setScore] = useState(0);
+  const [hover, setHover] = useState(false);
+
+  let className = 'counter';
+  if (hover) {
+    className += ' hover';
+  }
+
+  return (
+    <div
+      className={className}
+      onPointerEnter={() => setHover(true)}
+      onPointerLeave={() => setHover(false)}
+    >
+      <h1>{person}'s score: {score}</h1>
+      <button onClick={() => setScore(score + 1)}>
+        Add one
+      </button>
+    </div>
+  );
+}
+```
+
+```css
+h1 {
+  font-size: 18px;
+}
+
+.counter {
+  width: 100px;
+  text-align: center;
+  border: 1px solid gray;
+  border-radius: 4px;
+  padding: 20px;
+  margin: 0 20px 20px 0;
+}
+
+.hover {
+  background: #ffffd8;
+}
+```
+
+</Sandpack>
+
+Currently, when you change the player, the score is preserved. The two `Counter`s appear in the same position, so React sees them as *the same* `Counter` whose `person` prop has changed.
+
+But conceptually, in this app they should be two separate counters. They might appear in the same place in the UI, but one is a counter for Taylor, and another is a counter for Sarah.
+
+There are two ways to reset state when switching between them:
+
+1. Render components in different positions
+2. Give each component an explicit identity with `key`
+
+
+### Option 1: Rendering a component in different positions {/*option-1-rendering-a-component-in-different-positions*/}
+
+If you want these two `Counter`s to be independent, you can render them in two different positions:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function Scoreboard() {
+  const [isPlayerA, setIsPlayerA] = useState(true);
+  return (
+    <div>
+      {isPlayerA &&
+        <Counter person="Taylor" />
+      }
+      {!isPlayerA &&
+        <Counter person="Sarah" />
+      }
+      <button onClick={() => {
+        setIsPlayerA(!isPlayerA);
+      }}>
+        Next player!
+      </button>
+    </div>
+  );
+}
+
+function Counter({ person }) {
+  const [score, setScore] = useState(0);
+  const [hover, setHover] = useState(false);
+
+  let className = 'counter';
+  if (hover) {
+    className += ' hover';
+  }
+
+  return (
+    <div
+      className={className}
+      onPointerEnter={() => setHover(true)}
+      onPointerLeave={() => setHover(false)}
+    >
+      <h1>{person}'s score: {score}</h1>
+      <button onClick={() => setScore(score + 1)}>
+        Add one
+      </button>
+    </div>
+  );
+}
+```
+
+```css
+h1 {
+  font-size: 18px;
+}
+
+.counter {
+  width: 100px;
+  text-align: center;
+  border: 1px solid gray;
+  border-radius: 4px;
+  padding: 20px;
+  margin: 0 20px 20px 0;
+}
+
+.hover {
+  background: #ffffd8;
+}
+```
+
+</Sandpack>
+
+* Initially, `isPlayerA` is `true`. So the first position contains `Counter` state, and the second one is empty.
+* When you click the "Next player" button the first position clears but the second one now contains a `Counter`.
+
+<DiagramGroup>
+
+<Diagram name="preserving_state_diff_position_p1" height={375} width={504} alt="Diagram with a tree of React components. The parent is labeled 'Scoreboard' with a state bubble labeled isPlayerA with value 'true'. The only child, arranged to the left, is labeled Counter with a state bubble labeled 'count' and value 0. All of the left child is highlighted in yellow, indicating it was added.">
+
+Initial state
+
+</Diagram>
+
+<Diagram name="preserving_state_diff_position_p2" height={375} width={504} alt="Diagram with a tree of React components. The parent is labeled 'Scoreboard' with a state bubble labeled isPlayerA with value 'false'. The state bubble is highlighted in yellow, indicating that it has changed. The left child is replaced with a yellow 'poof' image indicating that it has been deleted and there is a new child on the right, highlighted in yellow indicating that it was added. The new child is labeled 'Counter' and contains a state bubble labeled 'count' with value 0.">
+
+Clicking "next"
+
+</Diagram>
+
+<Diagram name="preserving_state_diff_position_p3" height={375} width={504} alt="Diagram with a tree of React components. The parent is labeled 'Scoreboard' with a state bubble labeled isPlayerA with value 'true'. The state bubble is highlighted in yellow, indicating that it has changed. There is a new child on the left, highlighted in yellow indicating that it was added. The new child is labeled 'Counter' and contains a state bubble labeled 'count' with value 0. The right child is replaced with a yellow 'poof' image indicating that it has been deleted.">
+
+Clicking "next" again
+
+</Diagram>
+
+</DiagramGroup>
+
+> Each `Counter`'s state gets destroyed each time its removed from the DOM. This is why they reset every time you click the button.
+
+This solution is convenient when you only have a few independent components rendered in the same place. In this example, you only have two, so it's not a hassle to render both separately in the JSX.
+
+### Option 2: Resetting state with a key {/*option-2-resetting-state-with-a-key*/}
+
+There is also another, more generic, way to reset a component's state.
+
+You might have seen `key`s when [rendering lists.](/learn/rendering-lists#keeping-list-items-in-order-with-key) Keys aren't just for lists! You can use keys to make React distinguish between any components. By default, React uses order within the parent ("first counter", "second counter") to discern between components. But keys let you tell React that this is not just a *first* counter, or a *second* counter, but a specific counter--for example, *Taylor's* counter. This way, React will know *Taylor's* counter wherever it appears in the tree!
+
+In this example, the two `<Counter />`s don't share state even though they appear in the same place in JSX:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function Scoreboard() {
+  const [isPlayerA, setIsPlayerA] = useState(true);
+  return (
+    <div>
+      {isPlayerA ? (
+        <Counter key="Taylor" person="Taylor" />
+      ) : (
+        <Counter key="Sarah" person="Sarah" />
+      )}
+      <button onClick={() => {
+        setIsPlayerA(!isPlayerA);
+      }}>
+        Next player!
+      </button>
+    </div>
+  );
+}
+
+function Counter({ person }) {
+  const [score, setScore] = useState(0);
+  const [hover, setHover] = useState(false);
+
+  let className = 'counter';
+  if (hover) {
+    className += ' hover';
+  }
+
+  return (
+    <div
+      className={className}
+      onPointerEnter={() => setHover(true)}
+      onPointerLeave={() => setHover(false)}
+    >
+      <h1>{person}'s score: {score}</h1>
+      <button onClick={() => setScore(score + 1)}>
+        Add one
+      </button>
+    </div>
+  );
+}
+```
+
+```css
+h1 {
+  font-size: 18px;
+}
+
+.counter {
+  width: 100px;
+  text-align: center;
+  border: 1px solid gray;
+  border-radius: 4px;
+  padding: 20px;
+  margin: 0 20px 20px 0;
+}
+
+.hover {
+  background: #ffffd8;
+}
+```
+
+</Sandpack>
+
+Switching between Taylor and Sarah does not preserve the state. This is because **you gave them different `key`s:**
+
+```js
+{isPlayerA ? (
+  <Counter key="Taylor" person="Taylor" />
+) : (
+  <Counter key="Sarah" person="Sarah" />
+)}
+```
+
+Specifying a `key` tells React to use the `key` itself as part of the position, instead of their order within the parent. This is why, even though you render them in the same place in JSX, from React's perspective, these are two different counters. As a result, they will never share state. Every time a counter appears on the screen, its state is created. Every time it is removed, its state is destroyed. Toggling between them resets their state over and over.
+
+> Remember that keys are not globally unique. They only specify the position *within the parent*.
+
+### Resetting a form with a key {/*resetting-a-form-with-a-key*/}
+
+Resetting state with a key is particularly useful when dealing with forms.
+
+In this chat app, the `<Chat>` component contains the text input state:
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+import Chat from './Chat.js';
+import ContactList from './ContactList.js';
+
+export default function Messenger() {
+  const [to, setTo] = useState(contacts[0]);
+  return (
+    <div>
+      <ContactList
+        contacts={contacts}
+        selectedContact={to}
+        onSelect={contact => setTo(contact)}
+      />
+      <Chat contact={to} />
+    </div>
+  )
+}
+
+const contacts = [
+  { id: 0, name: 'Taylor', email: 'taylor@mail.com' },
+  { id: 1, name: 'Alice', email: 'alice@mail.com' },
+  { id: 2, name: 'Bob', email: 'bob@mail.com' }
+];
+```
+
+```js ContactList.js
+export default function ContactList({
+  selectedContact,
+  contacts,
+  onSelect
+}) {
+  return (
+    <section className="contact-list">
+      <ul>
+        {contacts.map(contact =>
+          <li key={contact.id}>
+            <button onClick={() => {
+              onSelect(contact);
+            }}>
+              {contact.name}
+            </button>
+          </li>
+        )}
+      </ul>
+    </section>
+  );
+}
+```
+
+```js Chat.js
+import { useState } from 'react';
+
+export default function Chat({ contact }) {
+  const [text, setText] = useState('');
+  return (
+    <section className="chat">
+      <textarea
+        value={text}
+        placeholder={'Chat to ' + contact.name}
+        onChange={e => setText(e.target.value)}
+      />
+      <br />
+      <button>Send to {contact.email}</button>
+    </section>
+  );
+}
+```
+
+```css
+.chat, .contact-list {
+  float: left;
+  margin-bottom: 20px;
+}
+ul, li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+li button {
+  width: 100px;
+  padding: 10px;
+  margin-right: 10px;
+}
+textarea {
+  height: 150px;
+}
+```
+
+</Sandpack>
+
+Try entering something into the input, and then press "Alice" or "Bob" to choose a different recipient. You will notice that the input state is preserved because the `<Chat>` is rendered at the same position in the tree.
+
+**In many apps, this may be the desired behavior, but not in a chat app!** You don't want to let the user send a message they already typed to a wrong person due to an accidental click. To fix it, add a `key`:
+
+```js
+<Chat key={to.id} contact={to} />
+```
+
+This ensures that when you select a different recipient, the `Chat` component will be recreated from scratch, including any state in the tree below it. React will also re-create the DOM elements instead of reusing them.
+
+Now switching the recipient always clears the text field:
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+import Chat from './Chat.js';
+import ContactList from './ContactList.js';
+
+export default function Messenger() {
+  const [to, setTo] = useState(contacts[0]);
+  return (
+    <div>
+      <ContactList
+        contacts={contacts}
+        selectedContact={to}
+        onSelect={contact => setTo(contact)}
+      />
+      <Chat key={to.id} contact={to} />
+    </div>
+  )
+}
+
+const contacts = [
+  { id: 0, name: 'Taylor', email: 'taylor@mail.com' },
+  { id: 1, name: 'Alice', email: 'alice@mail.com' },
+  { id: 2, name: 'Bob', email: 'bob@mail.com' }
+];
+```
+
+```js ContactList.js
+export default function ContactList({
+  selectedContact,
+  contacts,
+  onSelect
+}) {
+  return (
+    <section className="contact-list">
+      <ul>
+        {contacts.map(contact =>
+          <li key={contact.id}>
+            <button onClick={() => {
+              onSelect(contact);
+            }}>
+              {contact.name}
+            </button>
+          </li>
+        )}
+      </ul>
+    </section>
+  );
+}
+```
+
+```js Chat.js
+import { useState } from 'react';
+
+export default function Chat({ contact }) {
+  const [text, setText] = useState('');
+  return (
+    <section className="chat">
+      <textarea
+        value={text}
+        placeholder={'Chat to ' + contact.name}
+        onChange={e => setText(e.target.value)}
+      />
+      <br />
+      <button>Send to {contact.email}</button>
+    </section>
+  );
+}
+```
+
+```css
+.chat, .contact-list {
+  float: left;
+  margin-bottom: 20px;
+}
+ul, li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+li button {
+  width: 100px;
+  padding: 10px;
+  margin-right: 10px;
+}
+textarea {
+  height: 150px;
+}
+```
+
+</Sandpack>
+
+<DeepDive>
+
+#### Preserving state for removed components {/*preserving-state-for-removed-components*/}
+
+In a real chat app, you'd probably want to recover the input state when the user selects the previous recipient again. There are a few ways to keep the state "alive" for a component that's no longer visible:
+
+- You could render _all_ chats instead of just the current one, but hide all the others with CSS. The chats would not get removed from the tree, so their local state would be preserved. This solution works great for simple UIs. But it can get very slow if the hidden trees are large and contain a lot of DOM nodes.
+- You could [lift the state up](/learn/sharing-state-between-components) and hold the pending message for each recipient in the parent component. This way, when the child components get removed, it doesn't matter, because it's the parent that keeps the important information. This is the most common solution.
+- You might also use a different source in addition to React state. For example, you probably want a message draft to persist even if the user accidentally closes the page. To implement this, you could have the `Chat` component initialize its state by reading from the [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage), and save the drafts there too.
+
+No matter which strategy you pick, a chat _with Alice_ is conceptually distinct from a chat _with Bob_, so it makes sense to give a `key` to the `<Chat>` tree based on the current recipient.
+
+</DeepDive>
+
+<Recap>
+
+- React keeps state for as long as the same component is rendered at the same position.
+- State is not kept in JSX tags. It's associated with the tree position in which you put that JSX.
+- You can force a subtree to reset its state by giving it a different key.
+- Don't nest component definitions, or you'll reset state by accident.
+
+</Recap>
+
+
+
+<Challenges>
+
+#### Fix disappearing input text {/*fix-disappearing-input-text*/}
+
+This example shows a message when you press the button. However, pressing the button also accidentally resets the input. Why does this happen? Fix it so that pressing the button does not reset the input text.
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+
+export default function App() {
+  const [showHint, setShowHint] = useState(false);
+  if (showHint) {
+    return (
+      <div>
+        <p><i>Hint: Your favorite city?</i></p>
+        <Form />
+        <button onClick={() => {
+          setShowHint(false);
+        }}>Hide hint</button>
+      </div>
+    );
+  }
+  return (
+    <div>
+      <Form />
+      <button onClick={() => {
+        setShowHint(true);
+      }}>Show hint</button>
+    </div>
+  );
+}
+
+function Form() {
+  const [text, setText] = useState('');
+  return (
+    <textarea
+      value={text}
+      onChange={e => setText(e.target.value)}
+    />
+  );
+}
+```
+
+```css
+textarea { display: block; margin: 10px 0; }
+```
+
+</Sandpack>
+
+<Solution>
+
+The problem is that `Form` is rendered in different positions. In the `if` branch, it is the second child of the `<div>`, but in the `else` branch, it is the first child. Therefore, the component type in each position changes. The first position changes between holding a `p` and a `Form`, while the second position changes between holding a `Form` and a `button`. React resets the state every time the component type changes.
+
+The easiest solution is to unify the branches so that `Form` always renders in the same position:
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+
+export default function App() {
+  const [showHint, setShowHint] = useState(false);
+  return (
+    <div>
+      {showHint &&
+        <p><i>Hint: Your favorite city?</i></p>
+      }
+      <Form />
+      {showHint ? (
+        <button onClick={() => {
+          setShowHint(false);
+        }}>Hide hint</button>
+      ) : (
+        <button onClick={() => {
+          setShowHint(true);
+        }}>Show hint</button>
+      )}
+    </div>
+  );
+}
+
+function Form() {
+  const [text, setText] = useState('');
+  return (
+    <textarea
+      value={text}
+      onChange={e => setText(e.target.value)}
+    />
+  );
+}
+```
+
+```css
+textarea { display: block; margin: 10px 0; }
+```
+
+</Sandpack>
+
+
+Technically, you could also add `null` before `<Form />` in the `else` branch to match the `if` branch structure:
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+
+export default function App() {
+  const [showHint, setShowHint] = useState(false);
+  if (showHint) {
+    return (
+      <div>
+        <p><i>Hint: Your favorite city?</i></p>
+        <Form />
+        <button onClick={() => {
+          setShowHint(false);
+        }}>Hide hint</button>
+      </div>
+    );
+  }
+  return (
+    <div>
+      {null}
+      <Form />
+      <button onClick={() => {
+        setShowHint(true);
+      }}>Show hint</button>
+    </div>
+  );
+}
+
+function Form() {
+  const [text, setText] = useState('');
+  return (
+    <textarea
+      value={text}
+      onChange={e => setText(e.target.value)}
+    />
+  );
+}
+```
+
+```css
+textarea { display: block; margin: 10px 0; }
+```
+
+</Sandpack>
+
+This way, `Form` is always the second child, so it stays in the same position and keeps its state. But this approach is much less obvious and introduces a risk that someone else will remove that `null`.
+
+</Solution>
+
+#### Swap two form fields {/*swap-two-form-fields*/}
+
+This form lets you enter first and last name. It also has a checkbox controlling which field goes first. When you tick the checkbox, the "Last name" field will appear before the "First name" field.
+
+It almost works, but there is a bug. If you fill in the "First name" input and tick the checkbox, the text will stay in the first input (which is now "Last name"). Fix it so that the input text *also* moves when you reverse the order.
+
+<Hint>
+
+It seems like for these fields, their position within the parent is not enough. Is there some way to tell React how to match up the state between re-renders?
+
+</Hint>
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+
+export default function App() {
+  const [reverse, setReverse] = useState(false);
+  let checkbox = (
+    <label>
+      <input
+        type="checkbox"
+        checked={reverse}
+        onChange={e => setReverse(e.target.checked)}
+      />
+      Reverse order
+    </label>
+  );
+  if (reverse) {
+    return (
+      <>
+        <Field label="Last name" /> 
+        <Field label="First name" />
+        {checkbox}
+      </>
+    );
+  } else {
+    return (
+      <>
+        <Field label="First name" /> 
+        <Field label="Last name" />
+        {checkbox}
+      </>
+    );    
+  }
+}
+
+function Field({ label }) {
+  const [text, setText] = useState('');
+  return (
+    <label>
+      {label}:{' '}
+      <input
+        type="text"
+        value={text}
+        placeholder={label}
+        onChange={e => setText(e.target.value)}
+      />
+    </label>
+  );
+}
+```
+
+```css
+label { display: block; margin: 10px 0; }
+```
+
+</Sandpack>
+
+<Solution>
+
+Give a `key` to both `<Field>` components in both `if` and `else` branches. This tells React how to "match up" the correct state for either `<Field>` even if their order within the parent changes:
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+
+export default function App() {
+  const [reverse, setReverse] = useState(false);
+  let checkbox = (
+    <label>
+      <input
+        type="checkbox"
+        checked={reverse}
+        onChange={e => setReverse(e.target.checked)}
+      />
+      Reverse order
+    </label>
+  );
+  if (reverse) {
+    return (
+      <>
+        <Field key="lastName" label="Last name" /> 
+        <Field key="firstName" label="First name" />
+        {checkbox}
+      </>
+    );
+  } else {
+    return (
+      <>
+        <Field key="firstName" label="First name" /> 
+        <Field key="lastName" label="Last name" />
+        {checkbox}
+      </>
+    );    
+  }
+}
+
+function Field({ label }) {
+  const [text, setText] = useState('');
+  return (
+    <label>
+      {label}:{' '}
+      <input
+        type="text"
+        value={text}
+        placeholder={label}
+        onChange={e => setText(e.target.value)}
+      />
+    </label>
+  );
+}
+```
+
+```css
+label { display: block; margin: 10px 0; }
+```
+
+</Sandpack>
+
+</Solution>
+
+#### Reset a detail form {/*reset-a-detail-form*/}
+
+This is an editable contact list. You can edit the selected contact's details and then either press "Save" to update it, or "Reset" to undo your changes.
+
+When you select a different contact (for example, Alice), the state updates but the form keeps showing the previous contact's details. Fix it so that the form gets reset when the selected contact changes.
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+import ContactList from './ContactList.js';
+import EditContact from './EditContact.js';
+
+export default function ContactManager() {
+  const [
+    contacts,
+    setContacts
+  ] = useState(initialContacts);
+  const [
+    selectedId,
+    setSelectedId
+  ] = useState(0);
+  const selectedContact = contacts.find(c =>
+    c.id === selectedId
+  );
+
+  function handleSave(updatedData) {
+    const nextContacts = contacts.map(c => {
+      if (c.id === updatedData.id) {
+        return updatedData;
+      } else {
+        return c;
+      }
+    });
+    setContacts(nextContacts);
+  }
+
+  return (
+    <div>
+      <ContactList
+        contacts={contacts}
+        selectedId={selectedId}
+        onSelect={id => setSelectedId(id)}
+      />
+      <hr />
+      <EditContact
+        initialData={selectedContact}
+        onSave={handleSave}
+      />
+    </div>
+  )
+}
+
+const initialContacts = [
+  { id: 0, name: 'Taylor', email: 'taylor@mail.com' },
+  { id: 1, name: 'Alice', email: 'alice@mail.com' },
+  { id: 2, name: 'Bob', email: 'bob@mail.com' }
+];
+```
+
+```js ContactList.js
+export default function ContactList({
+  contacts,
+  selectedId,
+  onSelect
+}) {
+  return (
+    <section>
+      <ul>
+        {contacts.map(contact =>
+          <li key={contact.id}>
+            <button onClick={() => {
+              onSelect(contact.id);
+            }}>
+              {contact.id === selectedId ?
+                <b>{contact.name}</b> :
+                contact.name
+              }
+            </button>
+          </li>
+        )}
+      </ul>
+    </section>
+  );
+}
+```
+
+```js EditContact.js
+import { useState } from 'react';
+
+export default function EditContact({ initialData, onSave }) {
+  const [name, setName] = useState(initialData.name);
+  const [email, setEmail] = useState(initialData.email);
+  return (
+    <section>
+      <label>
+        Name:{' '}
+        <input
+          type="text"
+          value={name}
+          onChange={e => setName(e.target.value)}
+        />
+      </label>
+      <label>
+        Email:{' '}
+        <input
+          type="email"
+          value={email}
+          onChange={e => setEmail(e.target.value)}
+        />
+      </label>
+      <button onClick={() => {
+        const updatedData = {
+          id: initialData.id,
+          name: name,
+          email: email
+        };
+        onSave(updatedData);
+      }}>
+        Save
+      </button>
+      <button onClick={() => {
+        setName(initialData.name);
+        setEmail(initialData.email);
+      }}>
+        Reset
+      </button>
+    </section>
+  );
+}
+```
+
+```css
+ul, li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+li { display: inline-block; }
+li button {
+  padding: 10px;
+}
+label {
+  display: block;
+  margin: 10px 0;
+}
+button {
+  margin-right: 10px;
+  margin-bottom: 10px;
+}
+```
+
+</Sandpack>
+
+<Solution>
+
+Give `key={selectedId}` to the `EditContact` component. This way, switching between different contacts will reset the form:
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+import ContactList from './ContactList.js';
+import EditContact from './EditContact.js';
+
+export default function ContactManager() {
+  const [
+    contacts,
+    setContacts
+  ] = useState(initialContacts);
+  const [
+    selectedId,
+    setSelectedId
+  ] = useState(0);
+  const selectedContact = contacts.find(c =>
+    c.id === selectedId
+  );
+
+  function handleSave(updatedData) {
+    const nextContacts = contacts.map(c => {
+      if (c.id === updatedData.id) {
+        return updatedData;
+      } else {
+        return c;
+      }
+    });
+    setContacts(nextContacts);
+  }
+
+  return (
+    <div>
+      <ContactList
+        contacts={contacts}
+        selectedId={selectedId}
+        onSelect={id => setSelectedId(id)}
+      />
+      <hr />
+      <EditContact
+        key={selectedId}
+        initialData={selectedContact}
+        onSave={handleSave}
+      />
+    </div>
+  )
+}
+
+const initialContacts = [
+  { id: 0, name: 'Taylor', email: 'taylor@mail.com' },
+  { id: 1, name: 'Alice', email: 'alice@mail.com' },
+  { id: 2, name: 'Bob', email: 'bob@mail.com' }
+];
+```
+
+```js ContactList.js
+export default function ContactList({
+  contacts,
+  selectedId,
+  onSelect
+}) {
+  return (
+    <section>
+      <ul>
+        {contacts.map(contact =>
+          <li key={contact.id}>
+            <button onClick={() => {
+              onSelect(contact.id);
+            }}>
+              {contact.id === selectedId ?
+                <b>{contact.name}</b> :
+                contact.name
+              }
+            </button>
+          </li>
+        )}
+      </ul>
+    </section>
+  );
+}
+```
+
+```js EditContact.js
+import { useState } from 'react';
+
+export default function EditContact({ initialData, onSave }) {
+  const [name, setName] = useState(initialData.name);
+  const [email, setEmail] = useState(initialData.email);
+  return (
+    <section>
+      <label>
+        Name:{' '}
+        <input
+          type="text"
+          value={name}
+          onChange={e => setName(e.target.value)}
+        />
+      </label>
+      <label>
+        Email:{' '}
+        <input
+          type="email"
+          value={email}
+          onChange={e => setEmail(e.target.value)}
+        />
+      </label>
+      <button onClick={() => {
+        const updatedData = {
+          id: initialData.id,
+          name: name,
+          email: email
+        };
+        onSave(updatedData);
+      }}>
+        Save
+      </button>
+      <button onClick={() => {
+        setName(initialData.name);
+        setEmail(initialData.email);
+      }}>
+        Reset
+      </button>
+    </section>
+  );
+}
+```
+
+```css
+ul, li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+li { display: inline-block; }
+li button {
+  padding: 10px;
+}
+label {
+  display: block;
+  margin: 10px 0;
+}
+button {
+  margin-right: 10px;
+  margin-bottom: 10px;
+}
+```
+
+</Sandpack>
+
+</Solution>
+
+#### Clear an image while it's loading {/*clear-an-image-while-its-loading*/}
+
+When you press "Next", the browser starts loading the next image. However, because it's displayed in the same `<img>` tag, by default you would still see the previous image until the next one loads. This may be undesirable if it's important for the text to always match the image. Change it so that the moment you press "Next", the previous image immediately clears.
+
+<Hint>
+
+Is there a way to tell React to re-create the DOM instead of reusing it?
+
+</Hint>
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function Gallery() {
+  const [index, setIndex] = useState(0);
+  const hasNext = index < images.length - 1;
+
+  function handleClick() {
+    if (hasNext) {
+      setIndex(index + 1);
+    } else {
+      setIndex(0);
+    }
+  }
+
+  let image = images[index];
+  return (
+    <>
+      <button onClick={handleClick}>
+        Next
+      </button>
+      <h3>
+        Image {index + 1} of {images.length}
+      </h3>
+      <img src={image.src} />
+      <p>
+        {image.place}
+      </p>
+    </>
+  );
+}
+
+let images = [{
+  place: 'Penang, Malaysia',
+  src: 'https://i.imgur.com/FJeJR8M.jpg'
+}, {
+  place: 'Lisbon, Portugal',
+  src: 'https://i.imgur.com/dB2LRbj.jpg'
+}, {
+  place: 'Bilbao, Spain',
+  src: 'https://i.imgur.com/z08o2TS.jpg'
+}, {
+  place: 'Valparaíso, Chile',
+  src: 'https://i.imgur.com/Y3utgTi.jpg'
+}, {
+  place: 'Schwyz, Switzerland',
+  src: 'https://i.imgur.com/JBbMpWY.jpg'
+}, {
+  place: 'Prague, Czechia',
+  src: 'https://i.imgur.com/QwUKKmF.jpg'
+}, {
+  place: 'Ljubljana, Slovenia',
+  src: 'https://i.imgur.com/3aIiwfm.jpg'
+}];
+```
+
+```css
+img { width: 150px; height: 150px; }
+```
+
+</Sandpack>
+
+<Solution>
+
+You can provide a `key` to the `<img>` tag. When that `key` changes, React will re-create the `<img>` DOM node from scratch. This causes a brief flash when each image loads, so it's not something you'd want to do for every image in your app. But it makes sense if you want to ensure the image always matches the text.
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function Gallery() {
+  const [index, setIndex] = useState(0);
+  const hasNext = index < images.length - 1;
+
+  function handleClick() {
+    if (hasNext) {
+      setIndex(index + 1);
+    } else {
+      setIndex(0);
+    }
+  }
+
+  let image = images[index];
+  return (
+    <>
+      <button onClick={handleClick}>
+        Next
+      </button>
+      <h3>
+        Image {index + 1} of {images.length}
+      </h3>
+      <img key={image.src} src={image.src} />
+      <p>
+        {image.place}
+      </p>
+    </>
+  );
+}
+
+let images = [{
+  place: 'Penang, Malaysia',
+  src: 'https://i.imgur.com/FJeJR8M.jpg'
+}, {
+  place: 'Lisbon, Portugal',
+  src: 'https://i.imgur.com/dB2LRbj.jpg'
+}, {
+  place: 'Bilbao, Spain',
+  src: 'https://i.imgur.com/z08o2TS.jpg'
+}, {
+  place: 'Valparaíso, Chile',
+  src: 'https://i.imgur.com/Y3utgTi.jpg'
+}, {
+  place: 'Schwyz, Switzerland',
+  src: 'https://i.imgur.com/JBbMpWY.jpg'
+}, {
+  place: 'Prague, Czechia',
+  src: 'https://i.imgur.com/QwUKKmF.jpg'
+}, {
+  place: 'Ljubljana, Slovenia',
+  src: 'https://i.imgur.com/3aIiwfm.jpg'
+}];
+```
+
+```css
+img { width: 150px; height: 150px; }
+```
+
+</Sandpack>
+
+</Solution>
+
+#### Fix misplaced state in the list {/*fix-misplaced-state-in-the-list*/}
+
+In this list, each `Contact` has state that determines whether "Show email" has been pressed for it. Press "Show email" for Alice, and then tick the "Show in reverse order" checkbox. You will notice that it's _Taylor's_ email that is expanded now, but Alice's--which has moved to the bottom--appears collapsed.
+
+Fix it so that the expanded state is associated with each contact, regardless of the chosen ordering.
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+import Contact from './Contact.js';
+
+export default function ContactList() {
+  const [reverse, setReverse] = useState(false);
+
+  const displayedContacts = [...contacts];
+  if (reverse) {
+    displayedContacts.reverse();
+  }
+
+  return (
+    <>
+      <label>
+        <input
+          type="checkbox"
+          value={reverse}
+          onChange={e => {
+            setReverse(e.target.checked)
+          }}
+        />{' '}
+        Show in reverse order
+      </label>
+      <ul>
+        {displayedContacts.map((contact, i) =>
+          <li key={i}>
+            <Contact contact={contact} />
+          </li>
+        )}
+      </ul>
+    </>
+  );
+}
+
+const contacts = [
+  { id: 0, name: 'Alice', email: 'alice@mail.com' },
+  { id: 1, name: 'Bob', email: 'bob@mail.com' },
+  { id: 2, name: 'Taylor', email: 'taylor@mail.com' }
+];
+```
+
+```js Contact.js
+import { useState } from 'react';
+
+export default function Contact({ contact }) {
+  const [expanded, setExpanded] = useState(false);
+  return (
+    <>
+      <p><b>{contact.name}</b></p>
+      {expanded &&
+        <p><i>{contact.email}</i></p>
+      }
+      <button onClick={() => {
+        setExpanded(!expanded);
+      }}>
+        {expanded ? 'Hide' : 'Show'} email
+      </button>
+    </>
+  );
+}
+```
+
+```css
+ul, li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+li {
+  margin-bottom: 20px;
+}
+label {
+  display: block;
+  margin: 10px 0;
+}
+button {
+  margin-right: 10px;
+  margin-bottom: 10px;
+}
+```
+
+</Sandpack>
+
+<Solution>
+
+The problem is that this example was using index as a `key`:
+
+```js
+{displayedContacts.map((contact, i) =>
+  <li key={i}>
+```
+
+However, you want the state to be associated with _each particular contact_.
+
+Using the contact ID as a `key` instead fixes the issue:
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+import Contact from './Contact.js';
+
+export default function ContactList() {
+  const [reverse, setReverse] = useState(false);
+
+  const displayedContacts = [...contacts];
+  if (reverse) {
+    displayedContacts.reverse();
+  }
+
+  return (
+    <>
+      <label>
+        <input
+          type="checkbox"
+          value={reverse}
+          onChange={e => {
+            setReverse(e.target.checked)
+          }}
+        />{' '}
+        Show in reverse order
+      </label>
+      <ul>
+        {displayedContacts.map(contact =>
+          <li key={contact.id}>
+            <Contact contact={contact} />
+          </li>
+        )}
+      </ul>
+    </>
+  );
+}
+
+const contacts = [
+  { id: 0, name: 'Alice', email: 'alice@mail.com' },
+  { id: 1, name: 'Bob', email: 'bob@mail.com' },
+  { id: 2, name: 'Taylor', email: 'taylor@mail.com' }
+];
+```
+
+```js Contact.js
+import { useState } from 'react';
+
+export default function Contact({ contact }) {
+  const [expanded, setExpanded] = useState(false);
+  return (
+    <>
+      <p><b>{contact.name}</b></p>
+      {expanded &&
+        <p><i>{contact.email}</i></p>
+      }
+      <button onClick={() => {
+        setExpanded(!expanded);
+      }}>
+        {expanded ? 'Hide' : 'Show'} email
+      </button>
+    </>
+  );
+}
+```
+
+```css
+ul, li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+li {
+  margin-bottom: 20px;
+}
+label {
+  display: block;
+  margin: 10px 0;
+}
+button {
+  margin-right: 10px;
+  margin-bottom: 10px;
+}
+```
+
+</Sandpack>
+
+State is associated with the tree position. A `key` lets you specify a named position instead of relying on order.
+
+</Solution>
+
+</Challenges>
diff --git a/beta/src/content/learn/queueing-a-series-of-state-updates.md b/beta/src/content/learn/queueing-a-series-of-state-updates.md
new file mode 100644
index 000000000..4144d3623
--- /dev/null
+++ b/beta/src/content/learn/queueing-a-series-of-state-updates.md
@@ -0,0 +1,599 @@
+---
+title: Queueing a Series of State Updates
+---
+
+<Intro>
+
+Setting a state variable will queue another render. But sometimes you might want to perform multiple operations on the value before queueing the next render. To do this, it helps to understand how React batches state updates.
+
+</Intro>
+
+<YouWillLearn>
+
+* What "batching" is and how React uses it to process multiple state updates
+* How to apply several updates to the same state variable in a row
+
+</YouWillLearn>
+
+## React batches state updates {/*react-batches-state-updates*/}
+
+You might expect that clicking the "+3" button will increment the counter three times because it calls `setNumber(number + 1)` three times:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function Counter() {
+  const [number, setNumber] = useState(0);
+
+  return (
+    <>
+      <h1>{number}</h1>
+      <button onClick={() => {
+        setNumber(number + 1);
+        setNumber(number + 1);
+        setNumber(number + 1);
+      }}>+3</button>
+    </>
+  )
+}
+```
+
+```css
+button { display: inline-block; margin: 10px; font-size: 20px; }
+h1 { display: inline-block; margin: 10px; width: 30px; text-align: center; }
+```
+
+</Sandpack>
+
+However, as you might recall from the previous section, [each render's state values are fixed](/learn/state-as-a-snapshot#rendering-takes-a-snapshot-in-time), so the value of `number` inside the first render's event handler is always `0`, no matter how many times you call `setNumber(1)`:
+
+```js
+setNumber(0 + 1);
+setNumber(0 + 1);
+setNumber(0 + 1);
+```
+
+But there is one other factor at work here to discuss. **React waits until *all* code in the event handlers has run before processing your state updates.** This is why the re-render only happens *after* all these `setNumber()` calls.
+
+This might remind you of a waiter taking an order at the restaurant. A waiter doesn't run to the kitchen at the mention of your first dish! Instead, they let you finish your order, let you make changes to it, and even take orders from other people at the table.
+
+<Illustration src="/images/docs/illustrations/i_react-batching.png"  alt="An elegant cursor at a restaurant places and order multiple times with React, playing the part of the waiter. After she calls setState() multiple times, the waiter writes down the last one she requested as her final order." />
+
+This lets you update multiple state variables--even from multiple components--without triggering too many [re-renders.](/learn/render-and-commit#re-renders-when-state-updates) But this also means that the UI won't be updated until _after_ your event handler, and any code in it, completes. This behavior, also known as **batching,** makes your React app run much faster. It also avoids dealing with confusing "half-finished" renders where only some of the variables have been updated.
+
+**React does not batch across *multiple* intentional events like clicks**--each click is handled separately. Rest assured that React only does batching when it's generally safe to do. This ensures that, for example, if the first button click disables a form, the second click would not submit it again.
+
+## Updating the same state variable multiple times before the next render {/*updating-the-same-state-variable-multiple-times-before-the-next-render*/}
+
+It is an uncommon use case, but if you would like to update the same state variable multiple times before the next render, instead of passing the *next state value* like `setNumber(number + 1)`, you can pass a *function* that calculates the next state based on the previous one in the queue, like `setNumber(n => n + 1)`. It is a way to tell React to "do something with the state value" instead of just replacing it.
+
+Try incrementing the counter now:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function Counter() {
+  const [number, setNumber] = useState(0);
+
+  return (
+    <>
+      <h1>{number}</h1>
+      <button onClick={() => {
+        setNumber(n => n + 1);
+        setNumber(n => n + 1);
+        setNumber(n => n + 1);
+      }}>+3</button>
+    </>
+  )
+}
+```
+
+```css
+button { display: inline-block; margin: 10px; font-size: 20px; }
+h1 { display: inline-block; margin: 10px; width: 30px; text-align: center; }
+```
+
+</Sandpack>
+
+Here, `n => n + 1` is called an **updater function.** When you pass it to a state setter:
+
+1. React queues this function to be processed after all the other code in the event handler has run.
+2. During the next render, React goes through the queue and gives you the final updated state.
+
+```js
+setNumber(n => n + 1);
+setNumber(n => n + 1);
+setNumber(n => n + 1);
+```
+
+Here's how React works through these lines of code while executing the event handler:
+
+1. `setNumber(n => n + 1)`: `n => n + 1` is a function. React adds it to a queue.
+1. `setNumber(n => n + 1)`: `n => n + 1` is a function. React adds it to a queue.
+1. `setNumber(n => n + 1)`: `n => n + 1` is a function. React adds it to a queue.
+
+When you call `useState` during the next render, React goes through the queue. The previous `number` state was `0`, so that's what React passes to the first updater function as the `n` argument. Then React takes the return value of your previous updater function and passes it to the next updater as `n`, and so on:
+
+|  queued update | `n` | returns |
+|--------------|---------|-----|
+| `n => n + 1` | `0` | `0 + 1 = 1` |
+| `n => n + 1` | `1` | `1 + 1 = 2` |
+| `n => n + 1` | `2` | `2 + 1 = 3` |
+
+React stores `3` as the final result and returns it from `useState`.
+
+This is why clicking "+3" in the above example correctly increments the value by 3.
+### What happens if you update state after replacing it {/*what-happens-if-you-update-state-after-replacing-it*/}
+
+What about this event handler? What do you think `number` will be in the next render?
+
+```js
+<button onClick={() => {
+  setNumber(number + 5);
+  setNumber(n => n + 1);
+}}>
+```
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function Counter() {
+  const [number, setNumber] = useState(0);
+
+  return (
+    <>
+      <h1>{number}</h1>
+      <button onClick={() => {
+        setNumber(number + 5);
+        setNumber(n => n + 1);
+      }}>Increase the number</button>
+    </>
+  )
+}
+```
+
+```css
+button { display: inline-block; margin: 10px; font-size: 20px; }
+h1 { display: inline-block; margin: 10px; width: 30px; text-align: center; }
+```
+
+</Sandpack>
+
+Here's what this event handler tells React to do:
+
+1. `setNumber(number + 5)`: `number` is `0`, so `setNumber(0 + 5)`. React adds *"replace with `5`"* to its queue.
+2. `setNumber(n => n + 1)`: `n => n + 1` is an updater function. React adds *that function* to its queue.
+
+During the next render, React goes through the state queue:
+
+|   queued update       | `n` | returns |
+|--------------|---------|-----|
+| "replace with `5`" | `0` (unused) | `5` |
+| `n => n + 1` | `5` | `5 + 1 = 6` |
+
+React stores `6` as the final result and returns it from `useState`. 
+
+> You may have noticed that `setState(x)` actually works like `setState(n => x)`, but `n` is unused!
+
+### What happens if you replace state after updating it {/*what-happens-if-you-replace-state-after-updating-it*/}
+
+Let's try one more example. What do you think `number` will be in the next render?
+
+```js
+<button onClick={() => {
+  setNumber(number + 5);
+  setNumber(n => n + 1);
+  setNumber(42);
+}}>
+```
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function Counter() {
+  const [number, setNumber] = useState(0);
+
+  return (
+    <>
+      <h1>{number}</h1>
+      <button onClick={() => {
+        setNumber(number + 5);
+        setNumber(n => n + 1);
+        setNumber(42);
+      }}>Increase the number</button>
+    </>
+  )
+}
+```
+
+```css
+button { display: inline-block; margin: 10px; font-size: 20px; }
+h1 { display: inline-block; margin: 10px; width: 30px; text-align: center; }
+```
+
+</Sandpack>
+
+Here's how React works through these lines of code while executing this event handler:
+
+1. `setNumber(number + 5)`: `number` is `0`, so `setNumber(0 + 5)`. React adds *"replace with `5`"* to its queue.
+2. `setNumber(n => n + 1)`: `n => n + 1` is an updater function. React adds *that function* to its queue.
+3. `setNumber(42)`: React adds *"replace with `42`"* to its queue.
+
+During the next render, React goes through the state queue:
+
+|   queued update       | `n` | returns |
+|--------------|---------|-----|
+| "replace with `5`" | `0` (unused) | `5` |
+| `n => n + 1` | `5` | `5 + 1 = 6` |
+| "replace with `42`" | `6` (unused) | `42` |
+
+Then React stores `42` as the final result and returns it from `useState`.
+
+To summarize, here's how you can think of what you're passing to the `setNumber` state setter:
+
+* **An updater function** (e.g. `n => n + 1`) gets added to the queue.
+* **Any other value** (e.g. number `5`) adds "replace with `5`" to the queue, ignoring what's already queued.
+
+After the event handler completes, React will trigger a re-render. During the re-render, React will process the queue. Updater functions run during rendering, so **updater functions must be [pure](/learn/keeping-components-pure)** and only *return* the result. Don't try to set state from inside of them or run other side effects. In Strict Mode, React will run each updater function twice (but discard the second result) to help you find mistakes.
+
+### Naming conventions {/*naming-conventions*/}
+
+It's common to name the updater function argument by the first letters of the corresponding state variable:
+
+```js
+setEnabled(e => !e);
+setLastName(ln => ln.reverse());
+setFriendCount(fc => fc * 2);
+```
+
+If you prefer more verbose code, another common convention is to repeat the full state variable name, like `setEnabled(enabled => !enabled)`, or to use a prefix like `setEnabled(prevEnabled => !prevEnabled)`.
+
+<Recap>
+
+* Setting state does not change the variable in the existing render, but it requests a new render.
+* React processes state updates after event handlers have finished running. This is called batching.
+* To update some state multiple times in one event, you can use `setNumber(n => n + 1)` updater function.
+
+</Recap>
+
+
+
+<Challenges>
+
+#### Fix a request counter {/*fix-a-request-counter*/}
+
+You're working on an art marketplace app that lets the user submit multiple orders for an art item at the same time. Each time the user presses the "Buy" button, the "Pending" counter should increase by one. After three seconds, the "Pending" counter should decrease, and the "Completed" counter should increase.
+
+However, the "Pending" counter does not behave as intended. When you press "Buy", it decreases to `-1` (which should not be possible!). And if you click fast twice, both counters seem to behave unpredictably.
+
+Why does this happen? Fix both counters.
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function RequestTracker() {
+  const [pending, setPending] = useState(0);
+  const [completed, setCompleted] = useState(0);
+
+  async function handleClick() {
+    setPending(pending + 1);
+    await delay(3000);
+    setPending(pending - 1);
+    setCompleted(completed + 1);
+  }
+
+  return (
+    <>
+      <h3>
+        Pending: {pending}
+      </h3>
+      <h3>
+        Completed: {completed}
+      </h3>
+      <button onClick={handleClick}>
+        Buy     
+      </button>
+    </>
+  );
+}
+
+function delay(ms) {
+  return new Promise(resolve => {
+    setTimeout(resolve, ms);
+  });
+}
+```
+
+</Sandpack>
+
+<Solution>
+
+Inside the `handleClick` event handler, the values of `pending` and `completed` correspond to what they were at the time of the click event. For the first render, `pending` was `0`, so `setPending(pending - 1)` becomes `setPending(-1)`, which is wrong. Since you want to *increment* or *decrement* the counters, rather than set them to a concrete value determined during the click, you can instead pass the updater functions:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function RequestTracker() {
+  const [pending, setPending] = useState(0);
+  const [completed, setCompleted] = useState(0);
+
+  async function handleClick() {
+    setPending(p => p + 1);
+    await delay(3000);
+    setPending(p => p - 1);
+    setCompleted(c => c + 1);
+  }
+
+  return (
+    <>
+      <h3>
+        Pending: {pending}
+      </h3>
+      <h3>
+        Completed: {completed}
+      </h3>
+      <button onClick={handleClick}>
+        Buy     
+      </button>
+    </>
+  );
+}
+
+function delay(ms) {
+  return new Promise(resolve => {
+    setTimeout(resolve, ms);
+  });
+}
+```
+
+</Sandpack>
+
+This ensures that when you increment or decrement a counter, you do it in relation to its *latest* state rather than what the state was at the time of the click.
+
+</Solution>
+
+#### Implement the state queue yourself {/*implement-the-state-queue-yourself*/}
+
+In this challenge, you will reimplement a tiny part of React from scratch! It's not as hard as it sounds.
+
+Scroll through the sandbox preview. Notice that it shows **four test cases.** They correspond to the examples you've seen earlier on this page. Your task is to implement the `getFinalState` function so that it returns the correct result for each of those cases. If you implement it correctly, all four tests should pass.
+
+You will receive two arguments: `baseState` is the initial state (like `0`), and the `queue` is an array which contains a mix of numbers (like `5`) and updater functions (like `n => n + 1`) in the order they were added.
+
+Your task is to return the final state, just like the tables on this page show!
+
+<Hint>
+
+If you're feeling stuck, start with this code structure:
+
+```js
+export function getFinalState(baseState, queue) {
+  let finalState = baseState;
+
+  for (let update of queue) {
+    if (typeof update === 'function') {
+      // TODO: apply the updater function
+    } else {
+      // TODO: replace the state
+    }
+  }
+
+  return finalState;
+}
+```
+
+Fill out the missing lines!
+
+</Hint>
+
+<Sandpack>
+
+```js processQueue.js active
+export function getFinalState(baseState, queue) {
+  let finalState = baseState;
+
+  // TODO: do something with the queue...
+
+  return finalState;
+}
+```
+
+```js App.js
+import { getFinalState } from './processQueue.js';
+
+function increment(n) {
+  return n + 1;
+}
+increment.toString = () => 'n => n+1';
+
+export default function App() {
+  return (
+    <>
+      <TestCase
+        baseState={0}
+        queue={[1, 1, 1]}
+        expected={1}
+      />
+      <hr />
+      <TestCase
+        baseState={0}
+        queue={[
+          increment,
+          increment,
+          increment
+        ]}
+        expected={3}
+      />
+      <hr />
+      <TestCase
+        baseState={0}
+        queue={[
+          5,
+          increment,
+        ]}
+        expected={6}
+      />
+      <hr />
+      <TestCase
+        baseState={0}
+        queue={[
+          5,
+          increment,
+          42,
+        ]}
+        expected={42}
+      />
+    </>
+  );
+}
+
+function TestCase({
+  baseState,
+  queue,
+  expected
+}) {
+  const actual = getFinalState(baseState, queue);
+  return (
+    <>
+      <p>Base state: <b>{baseState}</b></p>
+      <p>Queue: <b>[{queue.join(', ')}]</b></p>
+      <p>Expected result: <b>{expected}</b></p>
+      <p style={{
+        color: actual === expected ?
+          'green' :
+          'red'
+      }}>
+        Your result: <b>{actual}</b>
+        {' '}
+        ({actual === expected ?
+          'correct' :
+          'wrong'
+        })
+      </p>
+    </>
+  );
+}
+```
+
+</Sandpack>
+
+<Solution>
+
+This is the exact algorithm described on this page that React uses to calculate the final state:
+
+<Sandpack>
+
+```js processQueue.js active
+export function getFinalState(baseState, queue) {
+  let finalState = baseState;
+
+  for (let update of queue) {
+    if (typeof update === 'function') {
+      // Apply the updater function.
+      finalState = update(finalState);
+    } else {
+      // Replace the next state.
+      finalState = update;
+    }
+  }
+
+  return finalState;
+}
+```
+
+```js App.js
+import { getFinalState } from './processQueue.js';
+
+function increment(n) {
+  return n + 1;
+}
+increment.toString = () => 'n => n+1';
+
+export default function App() {
+  return (
+    <>
+      <TestCase
+        baseState={0}
+        queue={[1, 1, 1]}
+        expected={1}
+      />
+      <hr />
+      <TestCase
+        baseState={0}
+        queue={[
+          increment,
+          increment,
+          increment
+        ]}
+        expected={3}
+      />
+      <hr />
+      <TestCase
+        baseState={0}
+        queue={[
+          5,
+          increment,
+        ]}
+        expected={6}
+      />
+      <hr />
+      <TestCase
+        baseState={0}
+        queue={[
+          5,
+          increment,
+          42,
+        ]}
+        expected={42}
+      />
+    </>
+  );
+}
+
+function TestCase({
+  baseState,
+  queue,
+  expected
+}) {
+  const actual = getFinalState(baseState, queue);
+  return (
+    <>
+      <p>Base state: <b>{baseState}</b></p>
+      <p>Queue: <b>[{queue.join(', ')}]</b></p>
+      <p>Expected result: <b>{expected}</b></p>
+      <p style={{
+        color: actual === expected ?
+          'green' :
+          'red'
+      }}>
+        Your result: <b>{actual}</b>
+        {' '}
+        ({actual === expected ?
+          'correct' :
+          'wrong'
+        })
+      </p>
+    </>
+  );
+}
+```
+
+</Sandpack>
+
+Now you know how this part of React works!
+
+</Solution>
+
+</Challenges>
\ No newline at end of file
diff --git a/beta/src/content/learn/react-developer-tools.md b/beta/src/content/learn/react-developer-tools.md
new file mode 100644
index 000000000..89208a6bb
--- /dev/null
+++ b/beta/src/content/learn/react-developer-tools.md
@@ -0,0 +1,76 @@
+---
+title: React Developer Tools
+---
+
+<Intro>
+
+Use React Developer Tools to inspect React [components](/learn/your-first-component), edit [props](/learn/passing-props-to-a-component) and [state](/learn/state-a-components-memory), and identify performance problems.
+
+</Intro>
+
+<YouWillLearn>
+
+* How to install React Developer Tools
+
+</YouWillLearn>
+
+## Browser extension {/*browser-extension*/}
+
+The easiest way to debug websites built with React is to install the React Developer Tools browser extension. It is available for several popular browsers:
+
+* [Install for **Chrome**](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)
+* [Install for **Firefox**](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/)
+* [Install for **Edge**](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil)
+
+Now, if you visit a website **built with React,** you will see the _Components_ and _Profiler_ panels.
+
+![React Developer Tools extension](/images/docs/react-devtools-extension.png)
+
+### Safari and other browsers {/*safari-and-other-browsers*/}
+For other browsers (for example, Safari), install the [`react-devtools`](https://www.npmjs.com/package/react-devtools) npm package:
+```bash
+# Yarn
+yarn global add react-devtools
+
+# Npm
+npm install -g react-devtools
+```
+
+Next open the developer tools from the terminal:
+```bash
+react-devtools
+```
+
+Then connect your website by adding the following `<script>` tag to the beginning of your website's `<head>`:
+```html {3}
+<html>
+  <head>
+    <script src="http://localhost:8097"></script>
+```
+
+Reload your website in the browser now to view it in developer tools.
+
+![React Developer Tools standalone](/images/docs/react-devtools-standalone.png)
+
+## Mobile (React Native) {/*mobile-react-native*/}
+React Developer Tools can be used to inspect apps built with [React Native](https://reactnative.dev/) as well.
+
+The easiest way to use React Developer Tools is to install it globally:
+```bash
+# Yarn
+yarn global add react-devtools
+
+# Npm
+npm install -g react-devtools
+```
+
+Next open the developer tools from the terminal.
+```bash
+react-devtools
+```
+
+It should connect to any local React Native app that's running.
+
+> Try reloading the app if developer tools doesn't connect after a few seconds.
+
+[Learn more about debugging React Native.](https://reactnative.dev/docs/debugging)
diff --git a/beta/src/content/learn/reacting-to-input-with-state.md b/beta/src/content/learn/reacting-to-input-with-state.md
new file mode 100644
index 000000000..58bda220d
--- /dev/null
+++ b/beta/src/content/learn/reacting-to-input-with-state.md
@@ -0,0 +1,1231 @@
+---
+title: Reacting to Input with State
+---
+
+<Intro>
+
+React uses a declarative way to manipulate the UI. Instead of manipulating individual pieces of the UI directly, you describe the different states that your component can be in, and switch between them in response to the user input. This is similar to how designers think about the UI.
+
+</Intro>
+
+<YouWillLearn>
+
+* How declarative UI programming differs from imperative UI programming
+* How to enumerate the different visual states your component can be in
+* How to trigger the changes between the different visual states from code
+
+</YouWillLearn>
+
+## How declarative UI compares to imperative {/*how-declarative-ui-compares-to-imperative*/}
+
+When you design UI interactions, you probably think about how the UI *changes* in response to user actions. Consider a form that lets the user submit an answer:
+
+* When you type something into a form, the "Submit" button **becomes enabled.**
+* When you press "Submit", both form and the button **become disabled,** and a spinner **appears.**
+* If the network request succeeds, the form **gets hidden,** and the "Thank you" message **appears.**
+* If the network request fails, an error message **appears,** and the form **becomes enabled** again.
+
+In **imperative programming,** the above corresponds directly to how you implement interaction. You have to write the exact instructions to manipulate the UI depending on what just happened. Here's another way to think about this: imagine riding next to someone in a car and telling them turn by turn where to go.
+
+<Illustration src="/images/docs/illustrations/i_imperative-ui-programming.png"  alt="In a car driven by an anxious-looking person representing JavaScript, a passenger orders the driver to execute a sequence of complicated turn by turn navigations." />
+
+They don't know where you want to go, they just follow your commands. (And if you get the directions wrong, you end up in the wrong place!) It's called *imperative* because you have to "command" each element, from the spinner to the button, telling the computer *how* to update the UI.
+
+In this example of imperative UI programming, the form is built *without* React. It uses the built-in browser [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model):
+
+<Sandpack>
+
+```js index.js active
+async function handleFormSubmit(e) {
+  e.preventDefault();
+  disable(textarea);
+  disable(button);
+  show(loadingMessage);
+  hide(errorMessage);
+  try {
+    await submitForm(textarea.value);
+    show(successMessage);
+    hide(form);
+  } catch (err) {
+    show(errorMessage);
+    errorMessage.textContent = err.message;
+  } finally {
+    hide(loadingMessage);
+    enable(textarea);
+    enable(button);
+  }
+}
+
+function handleTextareaChange() {
+  if (textarea.value.length === 0) {
+    disable(button);
+  } else {
+    enable(button);
+  }
+}
+
+function hide(el) {
+  el.style.display = 'none';
+}
+
+function show(el) {
+  el.style.display = '';
+}
+
+function enable(el) {
+  el.disabled = false;
+}
+
+function disable(el) {
+  el.disabled = true;
+}
+
+function submitForm(answer) {
+  // Pretend it's hitting the network.
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      if (answer.toLowerCase() == 'istanbul') {
+        resolve();
+      } else {
+        reject(new Error('Good guess but a wrong answer. Try again!'));
+      }
+    }, 1500);
+  });
+}
+
+let form = document.getElementById('form');
+let textarea = document.getElementById('textarea');
+let button = document.getElementById('button');
+let loadingMessage = document.getElementById('loading');
+let errorMessage = document.getElementById('error');
+let successMessage = document.getElementById('success');
+form.onsubmit = handleFormSubmit;
+textarea.oninput = handleTextareaChange;
+```
+
+```js sandbox.config.json hidden
+{
+  "hardReloadOnChange": true
+}
+```
+
+```html public/index.html
+<form id="form">
+  <h2>City quiz</h2>
+  <p>
+    What city is located on two continents?
+  </p>
+  <textarea id="textarea"></textarea>
+  <br />
+  <button id="button" disabled>Submit</button>
+  <p id="loading" style="display: none">Loading...</p>
+  <p id="error" style="display: none; color: red;"></p>
+</form>
+<h1 id="success" style="display: none">That's right!</h1>
+
+<style>
+* { box-sizing: border-box; }
+body { font-family: sans-serif; margin: 20px; padding: 0; }
+</style>
+```
+
+</Sandpack>
+
+Manipulating the UI imperatively works well enough for isolated examples, but it gets exponentially more difficult to manage in more complex systems. Imagine updating a page full of different forms like this one. Adding a new UI element or a new interaction would require carefully checking all existing code to make sure you haven't introduced a bug (for example, forgetting to show or hide something).
+
+React was built to solve this problem.
+
+In React, you don't directly manipulate the UI--meaning you don't enable, disable, show, or hide components directly. Instead, you **declare what you want to show,** and React figures out how to update the UI. Think of getting into a taxi and telling the driver where you want to go instead of telling them exactly where to turn. It's the driver's job to get you there, and they might even know some shortcuts you haven't considered!
+
+<Illustration src="/images/docs/illustrations/i_declarative-ui-programming.png" alt="In a car driven by React, a passenger asks to be taken to a specific place on the map. React figures out how to do that." />
+
+## Thinking about UI declaratively {/*thinking-about-ui-declaratively*/}
+
+You've seen how to implement a form imperatively above. To better understand how to think in React, you'll walk through reimplementing this UI in React below:
+
+1. **Identify** your component's different visual states
+2. **Determine** what triggers those state changes
+3. **Represent** the state in memory using `useState`
+4. **Remove** any non-essential state variables
+5. **Connect** the event handlers to set the state
+
+### Step 1: Identify your component's different visual states {/*step-1-identify-your-components-different-visual-states*/}
+
+In computer science, you may hear about a ["state machine"](https://en.wikipedia.org/wiki/Finite-state_machine) being in one of several “states”. If you work with a designer, you may have seen mockups for different "visual states". React stands at the intersection of design and computer science, so both of these ideas are sources of inspiration.
+
+First, you need to visualize all the different "states" of the UI the user might see:
+
+* **Empty**: Form has a disabled "Submit" button.
+* **Typing**: Form has an enabled "Submit" button.
+* **Submitting**: Form is completely disabled. Spinner is shown.
+* **Success**: "Thank you" message is shown instead of a form.
+* **Error**: Same as Typing state, but with an extra error message.
+
+Just like a designer, you'll want to "mock up" or create "mocks" for the different states before you add logic. For example, here is a mock for just the visual part of the form. This mock is controlled by a prop called `status` with a default value of `'empty'`:
+
+<Sandpack>
+
+```js
+export default function Form({
+  status = 'empty'
+}) {
+  if (status === 'success') {
+    return <h1>That's right!</h1>
+  }
+  return (
+    <>
+      <h2>City quiz</h2>
+      <p>
+        In which city is there a billboard that turns air into drinkable water?
+      </p>
+      <form>
+        <textarea />
+        <br />
+        <button>
+          Submit
+        </button>
+      </form>
+    </>
+  )
+}
+```
+
+</Sandpack>
+
+You could call that prop anything you like, the naming is not important. Try editing `status = 'empty'` to `status = 'success'` to see the success message appear. Mocking lets you quickly iterate on the UI before you wire up any logic. Here is a more fleshed out prototype of the same component, still "controlled" by the `status` prop:
+
+<Sandpack>
+
+```js
+export default function Form({
+  // Try 'submitting', 'error', 'success':
+  status = 'empty'
+}) {
+  if (status === 'success') {
+    return <h1>That's right!</h1>
+  }
+  return (
+    <>
+      <h2>City quiz</h2>
+      <p>
+        In which city is there a billboard that turns air into drinkable water?
+      </p>
+      <form>
+        <textarea disabled={
+          status === 'submitting'
+        } />
+        <br />
+        <button disabled={
+          status === 'empty' ||
+          status === 'submitting'
+        }>
+          Submit
+        </button>
+        {status === 'error' &&
+          <p className="Error">
+            Good guess but a wrong answer. Try again!
+          </p>
+        }
+      </form>
+      </>
+  );
+}
+```
+
+```css
+.Error { color: red; }
+```
+
+</Sandpack>
+
+<DeepDive>
+
+#### Displaying many visual states at once {/*displaying-many-visual-states-at-once*/}
+
+If a component has a lot of visual states, it can be convenient to show them all on one page:
+
+<Sandpack>
+
+```js App.js active
+import Form from './Form.js';
+
+let statuses = [
+  'empty',
+  'typing',
+  'submitting',
+  'success',
+  'error',
+];
+
+export default function App() {
+  return (
+    <>
+      {statuses.map(status => (
+        <section key={status}>
+          <h4>Form ({status}):</h4>
+          <Form status={status} />
+        </section>
+      ))}
+    </>
+  );
+}
+```
+
+```js Form.js
+export default function Form({ status }) {
+  if (status === 'success') {
+    return <h1>That's right!</h1>
+  }
+  return (
+    <form>
+      <textarea disabled={
+        status === 'submitting'
+      } />
+      <br />
+      <button disabled={
+        status === 'empty' ||
+        status === 'submitting'
+      }>
+        Submit
+      </button>
+      {status === 'error' &&
+        <p className="Error">
+          Good guess but a wrong answer. Try again!
+        </p>
+      }
+    </form>
+  );
+}
+```
+
+```css
+section { border-bottom: 1px solid #aaa; padding: 20px; }
+h4 { color: #222; }
+body { margin: 0; }
+.Error { color: red; }
+```
+
+</Sandpack>
+
+Pages like this are often called "living styleguides" or "storybooks".
+
+</DeepDive>
+
+### Step 2: Determine what triggers those state changes {/*step-2-determine-what-triggers-those-state-changes*/}
+
+You can trigger state updates in response to two kinds of inputs:
+
+* **Human inputs,** like clicking a button, typing in a field, navigating a link.
+* **Computer inputs,** like a network response arriving, a timeout completing, an image loading.
+
+<IllustrationBlock>
+  <Illustration caption="Human inputs" alt="A finger." src="/images/docs/illustrations/i_inputs1.png" />
+  <Illustration caption="Computer inputs" alt="Ones and zeroes." src="/images/docs/illustrations/i_inputs2.png" />
+</IllustrationBlock>
+
+In both cases, **you must set [state variables](/learn/state-a-components-memory#anatomy-of-usestate) to update the UI.** For the form you're developing, you will need to change state in response to a few different inputs:
+
+* **Changing the text input** (human) should switch it from the *Empty* state to the *Typing* state or back, depending on whether the text box is empty or not.
+* **Clicking the Submit button** (human) should switch it to the *Submitting* state.
+* **Successful network response** (computer) should switch it to the *Success* state.
+* **Failed network response** (computer) should switch it to the *Error* state with the matching error message.
+
+> Notice that human inputs often require [event handlers](/learn/responding-to-events)!
+
+To help visualize this flow, try drawing each state on paper as a labeled circle, and each change between two states as an arrow. You can sketch out many flows this way and sort out bugs long before implementation.
+
+<DiagramGroup>
+
+<Diagram name="responding_to_input_flow" height={350} width={688} alt="Flow chart moving left to right with 5 nodes. The first node labeled 'empty' has one edge labeled 'start typing' connected to a node labeled 'typing'. That node has one edge labeled 'press submit' connected to a node labeled 'submitting', which has two edges. The left edge is labeled 'network error' connecting to a node labeled 'error'. The right edge is labeled 'network success' connecting to a node labeled 'success'.">
+
+Form states
+
+</Diagram>
+
+</DiagramGroup>
+
+### Step 3: Represent the state in memory with `useState` {/*step-3-represent-the-state-in-memory-with-usestate*/}
+
+Next you'll need to represent the visual states of your component in memory with [`useState`.](/reference/react/useState) Simplicity is key: each piece of state is a "moving piece", and **you want as few "moving pieces" as possible.** More complexity leads to more bugs!
+
+Start with the state that *absolutely must* be there. For example, you'll need to store the `answer` for the input, and the `error` (if it exists) to store the last error:
+
+```js
+const [answer, setAnswer] = useState('');
+const [error, setError] = useState(null);
+```
+
+Then, you'll need a state variable representing which one of the visual states described earlier you want to display. There's usually more than a single way to represent that in memory, so you'll need to experiment with it.
+
+If you struggle to think of the best way immediately, start by adding enough state that you're *definitely* sure that all the possible visual states are covered:
+
+```js
+const [isEmpty, setIsEmpty] = useState(true);
+const [isTyping, setIsTyping] = useState(false);
+const [isSubmitting, setIsSubmitting] = useState(false);
+const [isSuccess, setIsSuccess] = useState(false);
+const [isError, setIsError] = useState(false);
+```
+
+Your first idea likely won't be the best, but that's ok--refactoring state is a part of the process!
+
+### Step 4: Remove any non-essential state variables {/*step-4-remove-any-non-essential-state-variables*/}
+
+You want to avoid duplication in the state content so you're only tracking what is essential. Spending a little time on refactoring your state structure will make your components easier to understand, reduce duplication, and avoid unintended meanings. Your goal is to **prevent the cases where the state in memory doesn't represent any valid UI that you'd want a user to see.** (For example, you never want to show an error message and disable the input at the same time, or the user won't be able to correct the error!)
+
+Here are some questions you can ask about your state variables:
+
+* **Does this state cause a paradox?** For example, `isTyping` and `isSubmitting` can't both be `true`. A paradox usually means that the state is not constrained enough. There are four possible combinations of two booleans, but only three correspond to valid states. To remove the "impossible" state, you can combine these into a `status` that must be one of three values: `'typing'`, `'submitting'`, or `'success'`.
+* **Is the same information available in another state variable already?** Another paradox: `isEmpty` and `isTyping` can't be `true` at the same time. By making them separate state variables, you risk them going out of sync and causing bugs. Fortunately, you can remove `isEmpty` and instead check `answer.length === 0`.
+* **Can you get the same information from the inverse of another state variable?** `isError` is not needed because you can check `error !== null` instead.
+
+After this clean-up, you're left with 3 (down from 7!) *essential* state variables:
+
+```js
+const [answer, setAnswer] = useState('');
+const [error, setError] = useState(null);
+const [status, setStatus] = useState('typing'); // 'typing', 'submitting', or 'success'
+```
+
+You know they are essential, because you can't remove any of them without breaking the functionality.
+
+<DeepDive>
+
+#### Eliminating “impossible” states with a reducer {/*eliminating-impossible-states-with-a-reducer*/}
+
+These three variables are a good enough representation of this form's state. However, there are still some intermediate states that don't fully make sense. For example, a non-null `error` doesn't make sense when `status` is `'success'`. To model the state more precisely, you can [extract it into a reducer.](/learn/extracting-state-logic-into-a-reducer) Reducers let you unify multiple state variables into a single object and consolidate all the related logic!
+
+</DeepDive>
+
+### Step 5: Connect the event handlers to set state {/*step-5-connect-the-event-handlers-to-set-state*/}
+
+Lastly, create event handlers to set the state variables. Below is the final form, with all event handlers wired up:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function Form() {
+  const [answer, setAnswer] = useState('');
+  const [error, setError] = useState(null);
+  const [status, setStatus] = useState('typing');
+
+  if (status === 'success') {
+    return <h1>That's right!</h1>
+  }
+
+  async function handleSubmit(e) {
+    e.preventDefault();
+    setStatus('submitting');
+    try {
+      await submitForm(answer);
+      setStatus('success');
+    } catch (err) {
+      setStatus('typing');
+      setError(err);
+    }
+  }
+
+  function handleTextareaChange(e) {
+    setAnswer(e.target.value);
+  }
+
+  return (
+    <>
+      <h2>City quiz</h2>
+      <p>
+        In which city is there a billboard that turns air into drinkable water?
+      </p>
+      <form onSubmit={handleSubmit}>
+        <textarea
+          value={answer}
+          onChange={handleTextareaChange}
+          disabled={status === 'submitting'}
+        />
+        <br />
+        <button disabled={
+          answer.length === 0 ||
+          status === 'submitting'
+        }>
+          Submit
+        </button>
+        {error !== null &&
+          <p className="Error">
+            {error.message}
+          </p>
+        }
+      </form>
+    </>
+  );
+}
+
+function submitForm(answer) {
+  // Pretend it's hitting the network.
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      let shouldError = answer.toLowerCase() !== 'lima'
+      if (shouldError) {
+        reject(new Error('Good guess but a wrong answer. Try again!'));
+      } else {
+        resolve();
+      }
+    }, 1500);
+  });
+}
+```
+
+```css
+.Error { color: red; }
+```
+
+</Sandpack>
+
+Although this code is longer than the original imperative example, it is much less fragile. Expressing all interactions as state changes lets you later introduce new visual states without breaking existing ones. It also lets you change what should be displayed in each state without changing the logic of the interaction itself.
+
+<Recap>
+
+* Declarative programming means describing the UI for each visual state rather than micromanaging the UI (imperative).
+* When developing a component:
+  1. Identify all its visual states.
+  2. Determine the human and computer triggers for state changes.
+  3. Model the state with `useState`.
+  4. Remove non-essential state to avoid bugs and paradoxes.
+  5. Connect the event handlers to set state.
+
+</Recap>
+
+
+
+<Challenges>
+
+#### Add and remove a CSS class {/*add-and-remove-a-css-class*/}
+
+Make it so that clicking on the picture *removes* the `background--active` CSS class from the outer `<div>`, but *adds* the `picture--active` class to the `<img>`. Clicking the background again should restore the original CSS classes.
+
+Visually, you should expect that clicking on the picture removes the purple background and highlights the picture border. Clicking outside the picture highlights the background, but removes the picture border highlight.
+
+<Sandpack>
+
+```js
+export default function Picture() {
+  return (
+    <div className="background background--active">
+      <img
+        className="picture"
+        alt="Rainbow houses in Kampung Pelangi, Indonesia"
+        src="https://i.imgur.com/5qwVYb1.jpeg"
+      />
+    </div>
+  );
+}
+```
+
+```css
+body { margin: 0; padding: 0; height: 250px; }
+
+.background {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #eee;
+}
+
+.background--active {
+  background: #a6b5ff;
+}
+
+.picture {
+  width: 200px;
+  height: 200px;
+  border-radius: 10px;
+}
+
+.picture--active {
+  border: 5px solid #a6b5ff;
+}
+```
+
+</Sandpack>
+
+<Solution>
+
+This component has two visual states: when the image is active, and when the image is inactive:
+
+* When the image is active, the CSS classes are `background` and `picture picture--active`.
+* When the image is inactive, the CSS classes are `background background--active` and `picture`.
+
+A single boolean state variable is enough to remember whether the image is active. The original task was to remove or add CSS classes. However, in React you need to *describe* what you want to see rather than *manipulate* the UI elements. So you need to calculate both CSS classes based on the current state. You also need to [stop the propagation](/learn/responding-to-events#stopping-propagation) so that clicking the image doesn't register as a click on the background.
+
+Verify that this version works by clicking the image and then outside of it:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function Picture() {
+  const [isActive, setIsActive] = useState(false);
+
+  let backgroundClassName = 'background';
+  let pictureClassName = 'picture';
+  if (isActive) {
+    pictureClassName += ' picture--active';
+  } else {
+    backgroundClassName += ' background--active';
+  }
+
+  return (
+    <div
+      className={backgroundClassName}
+      onClick={() => setIsActive(false)}
+    >
+      <img
+        onClick={e => {
+          e.stopPropagation();
+          setIsActive(true);
+        }}
+        className={pictureClassName}
+        alt="Rainbow houses in Kampung Pelangi, Indonesia"
+        src="https://i.imgur.com/5qwVYb1.jpeg"
+      />
+    </div>
+  );
+}
+```
+
+```css
+body { margin: 0; padding: 0; height: 250px; }
+
+.background {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #eee;
+}
+
+.background--active {
+  background: #a6b5ff;
+}
+
+.picture {
+  width: 200px;
+  height: 200px;
+  border-radius: 10px;
+  border: 5px solid transparent;
+}
+
+.picture--active {
+  border: 5px solid #a6b5ff;
+}
+```
+
+</Sandpack>
+
+Alternatively, you could return two separate chunks of JSX:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function Picture() {
+  const [isActive, setIsActive] = useState(false);
+  if (isActive) {
+    return (
+      <div
+        className="background"
+        onClick={() => setIsActive(false)}
+      >
+        <img
+          className="picture picture--active"
+          alt="Rainbow houses in Kampung Pelangi, Indonesia"
+          src="https://i.imgur.com/5qwVYb1.jpeg"
+          onClick={e => e.stopPropagation()}
+        />
+      </div>
+    );
+  }
+  return (
+    <div className="background background--active">
+      <img
+        className="picture"
+        alt="Rainbow houses in Kampung Pelangi, Indonesia"
+        src="https://i.imgur.com/5qwVYb1.jpeg"
+        onClick={() => setIsActive(true)}
+      />
+    </div>
+  );
+}
+```
+
+```css
+body { margin: 0; padding: 0; height: 250px; }
+
+.background {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #eee;
+}
+
+.background--active {
+  background: #a6b5ff;
+}
+
+.picture {
+  width: 200px;
+  height: 200px;
+  border-radius: 10px;
+  border: 5px solid transparent;
+}
+
+.picture--active {
+  border: 5px solid #a6b5ff;
+}
+```
+
+</Sandpack>
+
+Keep in mind that if two different JSX chunks describe the same tree, their nesting (first `<div>` → first `<img>`) has to line up. Otherwise, toggling `isActive` would recreate the whole tree below and [reset its state.](/learn/preserving-and-resetting-state) This is why, if a similar JSX tree gets returned in both cases, it is better to write them as a single piece of JSX.
+
+</Solution>
+
+#### Profile editor {/*profile-editor*/}
+
+Here is a small form implemented with plain JavaScript and DOM. Play with it to understand its behavior:
+
+<Sandpack>
+
+```js index.js active
+function handleFormSubmit(e) {
+  e.preventDefault();
+  if (editButton.textContent === 'Edit Profile') {
+    editButton.textContent = 'Save Profile';
+    hide(firstNameText);
+    hide(lastNameText);
+    show(firstNameInput);
+    show(lastNameInput);
+  } else {
+    editButton.textContent = 'Edit Profile';
+    hide(firstNameInput);
+    hide(lastNameInput);
+    show(firstNameText);
+    show(lastNameText);
+  }
+}
+
+function handleFirstNameChange() {
+  firstNameText.textContent = firstNameInput.value;
+  helloText.textContent = (
+    'Hello ' +
+    firstNameInput.value + ' ' +
+    lastNameInput.value + '!'
+  );
+}
+
+function handleLastNameChange() {
+  lastNameText.textContent = lastNameInput.value;
+  helloText.textContent = (
+    'Hello ' +
+    firstNameInput.value + ' ' +
+    lastNameInput.value + '!'
+  );
+}
+
+function hide(el) {
+  el.style.display = 'none';
+}
+
+function show(el) {
+  el.style.display = '';
+}
+
+let form = document.getElementById('form');
+let editButton = document.getElementById('editButton');
+let firstNameInput = document.getElementById('firstNameInput');
+let firstNameText = document.getElementById('firstNameText');
+let lastNameInput = document.getElementById('lastNameInput');
+let lastNameText = document.getElementById('lastNameText');
+let helloText = document.getElementById('helloText');
+form.onsubmit = handleFormSubmit;
+firstNameInput.oninput = handleFirstNameChange;
+lastNameInput.oninput = handleLastNameChange;
+```
+
+```js sandbox.config.json hidden
+{
+  "hardReloadOnChange": true
+}
+```
+
+```html public/index.html
+<form id="form">
+  <label>
+    First name:
+    <b id="firstNameText">Jane</b>
+    <input
+      id="firstNameInput"
+      value="Jane"
+      style="display: none">
+  </label>
+  <label>
+    Last name:
+    <b id="lastNameText">Jacobs</b>
+    <input
+      id="lastNameInput"
+      value="Jacobs"
+      style="display: none">
+  </label>
+  <button type="submit" id="editButton">Edit Profile</button>
+  <p><i id="helloText">Hello, Jane Jacobs!</i></p>
+</form>
+
+<style>
+* { box-sizing: border-box; }
+body { font-family: sans-serif; margin: 20px; padding: 0; }
+label { display: block; margin-bottom: 20px; }
+</style>
+```
+
+</Sandpack>
+
+This form switches between two modes: in the editing mode, you see the inputs, and in the viewing mode, you only see the result. The button label changes between "Edit" and "Save" depending on the mode you're in. When you change the inputs, the welcome message at the bottom updates in real time.
+
+Your task is to reimplement it in React in the sandbox below. For your convenience, the markup was already converted to JSX, but you'll need to make it show and hide the inputs like the original does.
+
+Make sure that it updates the text at the bottom, too!
+
+<Sandpack>
+
+```js
+export default function EditProfile() {
+  return (
+    <form>
+      <label>
+        First name:{' '}
+        <b>Jane</b>
+        <input />
+      </label>
+      <label>
+        Last name:{' '}
+        <b>Jacobs</b>
+        <input />
+      </label>
+      <button type="submit">
+        Edit Profile
+      </button>
+      <p><i>Hello, Jane Jacobs!</i></p>
+    </form>
+  );
+}
+```
+
+```css
+label { display: block; margin-bottom: 20px; }
+```
+
+</Sandpack>
+
+<Solution>
+
+You will need two state variables to hold the input values: `firstName` and `lastName`. You're also going to need an `isEditing` state variable that holds whether to display the inputs or not. You should _not_ need a `fullName` variable because the full name can always be calculated from the `firstName` and the `lastName`.
+
+Finally, you should use [conditional rendering](/learn/conditional-rendering) to show or hide the inputs depending on `isEditing`.
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function EditProfile() {
+  const [isEditing, setIsEditing] = useState(false);
+  const [firstName, setFirstName] = useState('Jane');
+  const [lastName, setLastName] = useState('Jacobs');
+
+  return (
+    <form onSubmit={e => {
+      e.preventDefault();
+      setIsEditing(!isEditing);
+    }}>
+      <label>
+        First name:{' '}
+        {isEditing ? (
+          <input
+            value={firstName}
+            onChange={e => {
+              setFirstName(e.target.value)
+            }}
+          />
+        ) : (
+          <b>{firstName}</b>
+        )}
+      </label>
+      <label>
+        Last name:{' '}
+        {isEditing ? (
+          <input
+            value={lastName}
+            onChange={e => {
+              setLastName(e.target.value)
+            }}
+          />
+        ) : (
+          <b>{lastName}</b>
+        )}
+      </label>
+      <button type="submit">
+        {isEditing ? 'Save' : 'Edit'} Profile
+      </button>
+      <p><i>Hello, {firstName} {lastName}!</i></p>
+    </form>
+  );
+}
+```
+
+```css
+label { display: block; margin-bottom: 20px; }
+```
+
+</Sandpack>
+
+Compare this solution to the original imperative code. How are they different?
+
+</Solution>
+
+#### Refactor the imperative solution without React {/*refactor-the-imperative-solution-without-react*/}
+
+Here is the original sandbox from the previous challenge, written imperatively without React:
+
+<Sandpack>
+
+```js index.js active
+function handleFormSubmit(e) {
+  e.preventDefault();
+  if (editButton.textContent === 'Edit Profile') {
+    editButton.textContent = 'Save Profile';
+    hide(firstNameText);
+    hide(lastNameText);
+    show(firstNameInput);
+    show(lastNameInput);
+  } else {
+    editButton.textContent = 'Edit Profile';
+    hide(firstNameInput);
+    hide(lastNameInput);
+    show(firstNameText);
+    show(lastNameText);
+  }
+}
+
+function handleFirstNameChange() {
+  firstNameText.textContent = firstNameInput.value;
+  helloText.textContent = (
+    'Hello ' +
+    firstNameInput.value + ' ' +
+    lastNameInput.value + '!'
+  );
+}
+
+function handleLastNameChange() {
+  lastNameText.textContent = lastNameInput.value;
+  helloText.textContent = (
+    'Hello ' +
+    firstNameInput.value + ' ' +
+    lastNameInput.value + '!'
+  );
+}
+
+function hide(el) {
+  el.style.display = 'none';
+}
+
+function show(el) {
+  el.style.display = '';
+}
+
+let form = document.getElementById('form');
+let editButton = document.getElementById('editButton');
+let firstNameInput = document.getElementById('firstNameInput');
+let firstNameText = document.getElementById('firstNameText');
+let lastNameInput = document.getElementById('lastNameInput');
+let lastNameText = document.getElementById('lastNameText');
+let helloText = document.getElementById('helloText');
+form.onsubmit = handleFormSubmit;
+firstNameInput.oninput = handleFirstNameChange;
+lastNameInput.oninput = handleLastNameChange;
+```
+
+```js sandbox.config.json hidden
+{
+  "hardReloadOnChange": true
+}
+```
+
+```html public/index.html
+<form id="form">
+  <label>
+    First name:
+    <b id="firstNameText">Jane</b>
+    <input
+      id="firstNameInput"
+      value="Jane"
+      style="display: none">
+  </label>
+  <label>
+    Last name:
+    <b id="lastNameText">Jacobs</b>
+    <input
+      id="lastNameInput"
+      value="Jacobs"
+      style="display: none">
+  </label>
+  <button type="submit" id="editButton">Edit Profile</button>
+  <p><i id="helloText">Hello, Jane Jacobs!</i></p>
+</form>
+
+<style>
+* { box-sizing: border-box; }
+body { font-family: sans-serif; margin: 20px; padding: 0; }
+label { display: block; margin-bottom: 20px; }
+</style>
+```
+
+</Sandpack>
+
+Imagine React didn't exist. Can you refactor this code in a way that makes the logic less fragile and more similar to the React version? What would it look like if the state was explicit, like in React?
+
+If you're struggling to think where to start, the stub below already has most of the structure in place. If you start here, fill in the missing logic in the `updateDOM` function. (Refer to the original code where needed.)
+
+<Sandpack>
+
+```js index.js active
+let firstName = 'Jane';
+let lastName = 'Jacobs';
+let isEditing = false;
+
+function handleFormSubmit(e) {
+  e.preventDefault();
+  setIsEditing(!isEditing);
+}
+
+function handleFirstNameChange(e) {
+  setFirstName(e.target.value);
+}
+
+function handleLastNameChange(e) {
+  setLastName(e.target.value);
+}
+
+function setFirstName(value) {
+  firstName = value;
+  updateDOM();
+}
+
+function setLastName(value) {
+  lastName = value;
+  updateDOM();
+}
+
+function setIsEditing(value) {
+  isEditing = value;
+  updateDOM();
+}
+
+function updateDOM() {
+  if (isEditing) {
+    editButton.textContent = 'Save Profile';
+    // TODO: show inputs, hide content
+  } else {
+    editButton.textContent = 'Edit Profile';
+    // TODO: hide inputs, show content
+  }
+  // TODO: update text labels
+}
+
+function hide(el) {
+  el.style.display = 'none';
+}
+
+function show(el) {
+  el.style.display = '';
+}
+
+let form = document.getElementById('form');
+let editButton = document.getElementById('editButton');
+let firstNameInput = document.getElementById('firstNameInput');
+let firstNameText = document.getElementById('firstNameText');
+let lastNameInput = document.getElementById('lastNameInput');
+let lastNameText = document.getElementById('lastNameText');
+let helloText = document.getElementById('helloText');
+form.onsubmit = handleFormSubmit;
+firstNameInput.oninput = handleFirstNameChange;
+lastNameInput.oninput = handleLastNameChange;
+```
+
+```js sandbox.config.json hidden
+{
+  "hardReloadOnChange": true
+}
+```
+
+```html public/index.html
+<form id="form">
+  <label>
+    First name:
+    <b id="firstNameText">Jane</b>
+    <input
+      id="firstNameInput"
+      value="Jane"
+      style="display: none">
+  </label>
+  <label>
+    Last name:
+    <b id="lastNameText">Jacobs</b>
+    <input
+      id="lastNameInput"
+      value="Jacobs"
+      style="display: none">
+  </label>
+  <button type="submit" id="editButton">Edit Profile</button>
+  <p><i id="helloText">Hello, Jane Jacobs!</i></p>
+</form>
+
+<style>
+* { box-sizing: border-box; }
+body { font-family: sans-serif; margin: 20px; padding: 0; }
+label { display: block; margin-bottom: 20px; }
+</style>
+```
+
+</Sandpack>
+
+<Solution>
+
+The missing logic included toggling the display of inputs and content, and updating the labels:
+
+<Sandpack>
+
+```js index.js active
+let firstName = 'Jane';
+let lastName = 'Jacobs';
+let isEditing = false;
+
+function handleFormSubmit(e) {
+  e.preventDefault();
+  setIsEditing(!isEditing);
+}
+
+function handleFirstNameChange(e) {
+  setFirstName(e.target.value);
+}
+
+function handleLastNameChange(e) {
+  setLastName(e.target.value);
+}
+
+function setFirstName(value) {
+  firstName = value;
+  updateDOM();
+}
+
+function setLastName(value) {
+  lastName = value;
+  updateDOM();
+}
+
+function setIsEditing(value) {
+  isEditing = value;
+  updateDOM();
+}
+
+function updateDOM() {
+  if (isEditing) {
+    editButton.textContent = 'Save Profile';
+    hide(firstNameText);
+    hide(lastNameText);
+    show(firstNameInput);
+    show(lastNameInput);
+  } else {
+    editButton.textContent = 'Edit Profile';
+    hide(firstNameInput);
+    hide(lastNameInput);
+    show(firstNameText);
+    show(lastNameText);
+  }
+  firstNameText.textContent = firstName;
+  lastNameText.textContent = lastName;
+  helloText.textContent = (
+    'Hello ' +
+    firstName + ' ' +
+    lastName + '!'
+  );
+}
+
+function hide(el) {
+  el.style.display = 'none';
+}
+
+function show(el) {
+  el.style.display = '';
+}
+
+let form = document.getElementById('form');
+let editButton = document.getElementById('editButton');
+let firstNameInput = document.getElementById('firstNameInput');
+let firstNameText = document.getElementById('firstNameText');
+let lastNameInput = document.getElementById('lastNameInput');
+let lastNameText = document.getElementById('lastNameText');
+let helloText = document.getElementById('helloText');
+form.onsubmit = handleFormSubmit;
+firstNameInput.oninput = handleFirstNameChange;
+lastNameInput.oninput = handleLastNameChange;
+```
+
+```js sandbox.config.json hidden
+{
+  "hardReloadOnChange": true
+}
+```
+
+```html public/index.html
+<form id="form">
+  <label>
+    First name:
+    <b id="firstNameText">Jane</b>
+    <input
+      id="firstNameInput"
+      value="Jane"
+      style="display: none">
+  </label>
+  <label>
+    Last name:
+    <b id="lastNameText">Jacobs</b>
+    <input
+      id="lastNameInput"
+      value="Jacobs"
+      style="display: none">
+  </label>
+  <button type="submit" id="editButton">Edit Profile</button>
+  <p><i id="helloText">Hello, Jane Jacobs!</i></p>
+</form>
+
+<style>
+* { box-sizing: border-box; }
+body { font-family: sans-serif; margin: 20px; padding: 0; }
+label { display: block; margin-bottom: 20px; }
+</style>
+```
+
+</Sandpack>
+
+The `updateDOM` function you wrote shows what React does under the hood when you set the state. (However, React also avoids touching the DOM for properties that have not changed since the last time they were set.)
+
+</Solution>
+
+</Challenges>
diff --git a/beta/src/content/learn/referencing-values-with-refs.md b/beta/src/content/learn/referencing-values-with-refs.md
new file mode 100644
index 000000000..f395ab879
--- /dev/null
+++ b/beta/src/content/learn/referencing-values-with-refs.md
@@ -0,0 +1,662 @@
+---
+title: 'Referencing Values with Refs'
+---
+
+<Intro>
+
+When you want a component to "remember" some information, but you don't want that information to [trigger new renders](/learn/render-and-commit), you can use a *ref*.
+
+</Intro>
+
+<YouWillLearn>
+
+- How to add a ref to your component
+- How to update a ref's value
+- How refs are different from state
+- How to use refs safely
+
+</YouWillLearn>
+
+## Adding a ref to your component {/*adding-a-ref-to-your-component*/}
+
+You can add a ref to your component by importing the `useRef` Hook from React:
+
+```js
+import { useRef } from 'react';
+```
+
+Inside your component, call the `useRef` Hook and pass the initial value that you want to reference as the only argument. For example, here is a ref to the value `0`:
+
+```js
+const ref = useRef(0);
+```
+
+`useRef` returns an object like this:
+
+```js
+{ 
+  current: 0 // The value you passed to useRef
+}
+```
+
+<Illustration src="/images/docs/illustrations/i_ref.png" alt="An arrow with 'current' written on it stuffed into a pocket with 'ref' written on it." />
+
+You can access the current value of that ref through the `ref.current` property. This value is intentionally mutable, meaning you can both read and write to it. It's like a secret pocket of your component that React doesn't track. (This is what makes it an "escape hatch" from React's one-way data flow--more on that below!)
+
+Here, a button will increment `ref.current` on every click:
+
+<Sandpack>
+
+```js
+import { useRef } from 'react';
+
+export default function Counter() {
+  let ref = useRef(0);
+
+  function handleClick() {
+    ref.current = ref.current + 1;
+    alert('You clicked ' + ref.current + ' times!');
+  }
+
+  return (
+    <button onClick={handleClick}>
+      Click me!
+    </button>
+  );
+}
+```
+
+</Sandpack>
+
+The ref points to a number, but, like [state](/learn/state-a-components-memory), you could point to anything: a string, an object, or even a function. Unlike state, ref is a plain JavaScript object with the `current` property that you can read and modify.
+
+Note that **the component doesn't re-render with every increment.** Like state, refs are retained by React between re-renders. However, setting state re-renders a component. Changing a ref does not!
+
+## Example: building a stopwatch {/*example-building-a-stopwatch*/}
+
+You can combine refs and state in a single component. For example, let's make a stopwatch that the user can start or stop by pressing a button. In order to display how much time has passed since the user pressed "Start", you will need to keep track of when the Start button was pressed and what the current time is. **This information is used for rendering, so you'll keep it in state:**
+
+```js
+const [startTime, setStartTime] = useState(null);
+const [now, setNow] = useState(null);
+```
+
+When the user presses "Start", you'll use [`setInterval`](https://developer.mozilla.org/docs/Web/API/setInterval) in order to update the time every 10 milliseconds:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function Stopwatch() {
+  const [startTime, setStartTime] = useState(null);
+  const [now, setNow] = useState(null);
+
+  function handleStart() {
+    // Start counting.
+    setStartTime(Date.now());
+    setNow(Date.now());
+
+    setInterval(() => {
+      // Update the current time every 10ms.
+      setNow(Date.now());
+    }, 10);
+  }
+
+  let secondsPassed = 0;
+  if (startTime != null && now != null) {
+    secondsPassed = (now - startTime) / 1000;
+  }
+
+  return (
+    <>
+      <h1>Time passed: {secondsPassed.toFixed(3)}</h1>
+      <button onClick={handleStart}>
+        Start
+      </button>
+    </>
+  );
+}
+```
+
+</Sandpack>
+
+When the "Stop" button is pressed, you need to cancel the existing interval so that it stops updating the `now` state variable. You can do this by calling [`clearInterval`](https://developer.mozilla.org/en-US/docs/Web/API/clearInterval), but you need to give it the interval ID that was previously returned by the `setInterval` call when the user pressed Start. You need to keep the interval ID somewhere. **Since the interval ID is not used for rendering, you can keep it in a ref:**
+
+<Sandpack>
+
+```js
+import { useState, useRef } from 'react';
+
+export default function Stopwatch() {
+  const [startTime, setStartTime] = useState(null);
+  const [now, setNow] = useState(null);
+  const intervalRef = useRef(null);
+
+  function handleStart() {
+    setStartTime(Date.now());
+    setNow(Date.now());
+
+    clearInterval(intervalRef.current);
+    intervalRef.current = setInterval(() => {
+      setNow(Date.now());
+    }, 10);
+  }
+
+  function handleStop() {
+    clearInterval(intervalRef.current);
+  }
+
+  let secondsPassed = 0;
+  if (startTime != null && now != null) {
+    secondsPassed = (now - startTime) / 1000;
+  }
+
+  return (
+    <>
+      <h1>Time passed: {secondsPassed.toFixed(3)}</h1>
+      <button onClick={handleStart}>
+        Start
+      </button>
+      <button onClick={handleStop}>
+        Stop
+      </button>
+    </>
+  );
+}
+```
+
+</Sandpack>
+
+When a piece of information is used for rendering, keep it in state. When a piece of information is only needed by event handlers and changing it doesn't require a re-render, using a ref may be more efficient.
+
+## Differences between refs and state {/*differences-between-refs-and-state*/}
+
+Perhaps you're thinking refs seem less "strict" than state—you can mutate them instead of always having to use a state setting function, for instance. But in most cases, you'll want to use state. Refs are an "escape hatch" you won't need often. Here's how state and refs compare:
+
+| refs                                                                                  | state                                                                                                                     |
+| ------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
+| `useRef(initialValue)` returns `{ current: initialValue }`                            | `useState(initialValue)` returns the current value of a state variable and a state setter function ( `[value, setValue]`) |
+| Doesn't trigger re-render when you change it.                                         | Triggers re-render when you change it.                                                                                    |
+| Mutable—you can modify and update `current`'s value outside of the rendering process. | "Immutable"—you must use the state setting function to modify state variables to queue a re-render.                       |
+| You shouldn't read (or write) the `current` value during rendering. | You can read state at any time. However, each render has its own [snapshot](/learn/state-as-a-snapshot) of state which does not change.
+
+Here is a counter button that's implemented with state:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function Counter() {
+  const [count, setCount] = useState(0);
+
+  function handleClick() {
+    setCount(count + 1);
+  }
+
+  return (
+    <button onClick={handleClick}>
+      You clicked {count} times
+    </button>
+  );
+}
+```
+
+</Sandpack>
+
+Because the `count` value is displayed, it makes sense to use a state value for it. When the counter's value is set with `setCount()`, React re-renders the component and the screen updates to reflect the new count.
+
+If you tried to implement this with a ref, React would never re-render the component, so you'd never see the count change! See how clicking this button **does not update its text**:
+
+<Sandpack>
+
+```js
+import { useRef } from 'react';
+
+export default function Counter() {
+  let countRef = useRef(0);
+
+  function handleClick() {
+    // This doesn't re-render the component!
+    countRef.current = countRef.current + 1;
+  }
+
+  return (
+    <button onClick={handleClick}>
+      You clicked {countRef.current} times
+    </button>
+  );
+}
+```
+
+</Sandpack>
+
+This is why reading `ref.current` during render leads to unreliable code. If you need that, use state instead.
+
+<DeepDive>
+
+#### How does useRef work inside? {/*how-does-use-ref-work-inside*/}
+
+Although both `useState` and `useRef` are provided by React, in principle `useRef` could be implemented _on top of_ `useState`. You can imagine that inside of React, `useRef` is implemented like this:
+
+```js
+// Inside of React
+function useRef(initialValue) {
+  const [ref, unused] = useState({ current: initialValue });
+  return ref;
+}
+```
+
+During the first render, `useRef` returns `{ current: initialValue }`. This object is stored by React, so during the next render the same object will be returned. Note how the state setter is unused in this example. It is unnecessary because `useRef` always needs to return the same object!
+
+React provides a built-in version of `useRef` because it is common enough in practice. But you can think of it as a regular state variable without a setter. If you're familiar with object-oriented programming, refs might remind you of instance fields--but instead of `this.something` you write `somethingRef.current`.
+
+</DeepDive>
+
+## When to use refs {/*when-to-use-refs*/}
+
+Typically, you will use a ref when your component needs to "step outside" React and communicate with external APIs—often a browser API that won't impact the appearance of the component. Here are a few of these rare situations:
+
+- Storing [timeout IDs](https://developer.mozilla.org/docs/Web/API/setTimeout)
+- Storing and manipulating [DOM elements](https://developer.mozilla.org/docs/Web/API/Element), which we cover on [the next page](/learn/manipulating-the-dom-with-refs)
+- Storing other objects that aren't necessary to calculate the JSX.
+
+If your component needs to store some value, but it doesn't impact the rendering logic, choose refs.
+
+## Best practices for refs {/*best-practices-for-refs*/}
+
+Following these principles will make your components more predictable:
+
+- **Treat refs as an escape hatch.** Refs are useful when you work with external systems or browser APIs. If much of your application logic and data flow relies on refs, you might want to rethink your approach.
+- **Don't read or write `ref.current` during rendering.** If some information is needed during rendering, use [state](/learn/state-a-components-memory) instead. Since React doesn't know when `ref.current` changes, even reading it while rendering makes your component's behavior difficult to predict. (The only exception to this is code like `if (!ref.current) ref.current = new Thing()` which only sets the ref once during the first render.)
+
+Limitations of React state don't apply to refs. For example, state acts like a [snapshot for every render](/learn/state-as-a-snapshot) and [doesn't update synchronously.](/learn/queueing-a-series-of-state-updates) But when you mutate the current value of a ref, it changes immediately:
+
+```js
+ref.current = 5;
+console.log(ref.current); // 5
+```
+
+This is because **the ref itself is a regular JavaScript object,** and so it behaves like one.
+
+You also don't need to worry about [avoiding mutation](/learn/updating-objects-in-state) when you work with a ref. As long as the object you're mutating isn't used for rendering, React doesn't care what you do with the ref or its contents.
+
+## Refs and the DOM {/*refs-and-the-dom*/}
+
+You can point a ref to any value. However, the most common use case for a ref is to access a DOM element. For example, this is handy if you want to focus an input programmatically. When you pass a ref to a `ref` attribute in JSX, like `<div ref={myRef}>`, React will put the corresponding DOM element into `myRef.current`. You can read more about this in [Manipulating the DOM with Refs.](/learn/manipulating-the-dom-with-refs)
+
+<Recap>
+
+- Refs are an escape hatch to hold onto values that aren't used for rendering. You won't need them often.
+- A ref is a plain JavaScript object with a single property called `current`, which you can read or set.
+- You can ask React to give you a ref by calling the `useRef` Hook.
+- Like state, refs let you retain information between re-renders of a component.
+- Unlike state, setting the ref's `current` value does not trigger a re-render.
+- Don't read or write `ref.current` during rendering. This makes your component hard to predict.
+
+</Recap>
+
+
+
+<Challenges>
+
+#### Fix a broken chat input {/*fix-a-broken-chat-input*/}
+
+Type a message and click "Send". You will notice there is a three second delay before you see the "Sent!" alert. During this delay, you can see an "Undo" button. Click it. This "Undo" button is supposed to stop the "Sent!" message from appearing. It does this by calling [`clearTimeout`](https://developer.mozilla.org/en-US/docs/Web/API/clearTimeout) for the timeout ID saved during `handleSend`. However, even after "Undo" is clicked, the "Sent!" message still appears. Find why it doesn't work, and fix it.
+
+<Hint>
+
+Regular variables like `let timeoutID` don't "survive" between re-renders because every render runs your component (and initializes its variables) from scratch. Should you keep the timeout ID somewhere else?
+
+</Hint>
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function Chat() {
+  const [text, setText] = useState('');
+  const [isSending, setIsSending] = useState(false);
+  let timeoutID = null;
+
+  function handleSend() {
+    setIsSending(true);
+    timeoutID = setTimeout(() => {
+      alert('Sent!');
+      setIsSending(false);
+    }, 3000);
+  }
+
+  function handleUndo() {
+    setIsSending(false);
+    clearTimeout(timeoutID);
+  }
+
+  return (
+    <>
+      <input
+        disabled={isSending}
+        value={text}
+        onChange={e => setText(e.target.value)}
+      />
+      <button
+        disabled={isSending}
+        onClick={handleSend}>
+        {isSending ? 'Sending...' : 'Send'}
+      </button>
+      {isSending &&
+        <button onClick={handleUndo}>
+          Undo
+        </button>
+      }
+    </>
+  );
+}
+```
+
+</Sandpack>
+
+<Solution>
+
+Whenever your component re-renders (such as when you set state), all local variables get initialized from scratch. This is why you can't save the timeout ID in a local variable like `timeoutID` and then expect another event handler to "see" it in the future. Instead, store it in a ref, which React will preserve between renders.
+
+<Sandpack>
+
+```js
+import { useState, useRef } from 'react';
+
+export default function Chat() {
+  const [text, setText] = useState('');
+  const [isSending, setIsSending] = useState(false);
+  const timeoutRef = useRef(null);
+
+  function handleSend() {
+    setIsSending(true);
+    timeoutRef.current = setTimeout(() => {
+      alert('Sent!');
+      setIsSending(false);
+    }, 3000);
+  }
+
+  function handleUndo() {
+    setIsSending(false);
+    clearTimeout(timeoutRef.current);
+  }
+
+  return (
+    <>
+      <input
+        disabled={isSending}
+        value={text}
+        onChange={e => setText(e.target.value)}
+      />
+      <button
+        disabled={isSending}
+        onClick={handleSend}>
+        {isSending ? 'Sending...' : 'Send'}
+      </button>
+      {isSending &&
+        <button onClick={handleUndo}>
+          Undo
+        </button>
+      }
+    </>
+  );
+}
+```
+
+</Sandpack>
+
+</Solution>
+
+
+#### Fix a component failing to re-render {/*fix-a-component-failing-to-re-render*/}
+
+This button is supposed to toggle between showing "On" and "Off". However, it always shows "Off". What is wrong with this code? Fix it.
+
+<Sandpack>
+
+```js
+import { useRef } from 'react';
+
+export default function Toggle() {
+  const isOnRef = useRef(false);
+
+  return (
+    <button onClick={() => {
+      isOnRef.current = !isOnRef.current;
+    }}>
+      {isOnRef.current ? 'On' : 'Off'}
+    </button>
+  );
+}
+```
+
+</Sandpack>
+
+<Solution>
+
+In this example, the current value of a ref is used to calculate the rendering output: `{isOnRef.current ? 'On' : 'Off'}`. This is a sign that this information should not be in a ref, and should have instead been put in state. To fix it, remove the ref and use state instead:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function Toggle() {
+  const [isOn, setIsOn] = useState(false);
+
+  return (
+    <button onClick={() => {
+      setIsOn(!isOn);
+    }}>
+      {isOn ? 'On' : 'Off'}
+    </button>
+  );
+}
+```
+
+</Sandpack>
+
+</Solution>
+
+#### Fix debouncing {/*fix-debouncing*/}
+
+In this example, all button click handlers are ["debounced".](https://redd.one/blog/debounce-vs-throttle) To see what this means, press one of the buttons. Notice how the message appears a second later. If you press the button while waiting for the message, the timer will reset. So if you keep clicking the same button fast many times, the message won't appear until a second *after* you stop clicking. Debouncing lets you delay some action until the user "stops doing things".
+
+This example works, but not quite as intended. The buttons are not independent. To see the problem, click one of the buttons, and then immediately click another button. You'd expect that after a delay, you would see both button's messages. But only the last button's message shows up. The first button's message gets lost.
+
+Why are the buttons interfering with each other? Find and fix the issue.
+
+<Hint>
+
+The last timeout ID variable is shared between all `DebouncedButton` components. This is why clicking one button resets another button's timeout. Can you store a separate timeout ID for each button?
+
+</Hint>
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+let timeoutID;
+
+function DebouncedButton({ onClick, children }) {
+  return (
+    <button onClick={() => {
+      clearTimeout(timeoutID);
+      timeoutID = setTimeout(() => {
+        onClick();
+      }, 1000);
+    }}>
+      {children}
+    </button>
+  );
+}
+
+export default function Dashboard() {
+  return (
+    <>
+      <DebouncedButton
+        onClick={() => alert('Spaceship launched!')}
+      >
+        Launch the spaceship
+      </DebouncedButton>
+      <DebouncedButton
+        onClick={() => alert('Soup boiled!')}
+      >
+        Boil the soup
+      </DebouncedButton>
+      <DebouncedButton
+        onClick={() => alert('Lullaby sung!')}
+      >
+        Sing a lullaby
+      </DebouncedButton>
+    </>
+  )
+}
+```
+
+```css
+button { display: block; margin: 10px; }
+```
+
+</Sandpack>
+
+<Solution>
+
+A variable like `timeoutID` is shared between all components. This is why clicking on the second button resets the first button's pending timeout. To fix this, you can keep timeout in a ref. Each button will get its own ref, so they won't conflict with each other. Notice how clicking two buttons fast will show both messages.
+
+<Sandpack>
+
+```js
+import { useState, useRef } from 'react';
+
+function DebouncedButton({ onClick, children }) {
+  const timeoutRef = useRef(null);
+  return (
+    <button onClick={() => {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(() => {
+        onClick();
+      }, 1000);
+    }}>
+      {children}
+    </button>
+  );
+}
+
+export default function Dashboard() {
+  return (
+    <>
+      <DebouncedButton
+        onClick={() => alert('Spaceship launched!')}
+      >
+        Launch the spaceship
+      </DebouncedButton>
+      <DebouncedButton
+        onClick={() => alert('Soup boiled!')}
+      >
+        Boil the soup
+      </DebouncedButton>
+      <DebouncedButton
+        onClick={() => alert('Lullaby sung!')}
+      >
+        Sing a lullaby
+      </DebouncedButton>
+    </>
+  )
+}
+```
+
+```css
+button { display: block; margin: 10px; }
+```
+
+</Sandpack>
+
+</Solution>
+
+#### Read the latest state {/*read-the-latest-state*/}
+
+In this example, after you press "Send", there is a small delay before the message is shown. Type "hello", press Send, and then quickly edit the input again. Despite your edits, the alert would still show "hello" (which was the value of state [at the time](/learn/state-as-a-snapshot#state-over-time) the button was clicked).
+
+Usually, this behavior is what you want in an app. However, there may be occasional cases where you want some asynchronous code to read the *latest* version of some state. Can you think of a way to make the alert show the *current* input text rather than what it was at the time of the click?
+
+<Sandpack>
+
+```js
+import { useState, useRef } from 'react';
+
+export default function Chat() {
+  const [text, setText] = useState('');
+
+  function handleSend() {
+    setTimeout(() => {
+      alert('Sending: ' + text);
+    }, 3000);
+  }
+
+  return (
+    <>
+      <input
+        value={text}
+        onChange={e => setText(e.target.value)}
+      />
+      <button
+        onClick={handleSend}>
+        Send
+      </button>
+    </>
+  );
+}
+```
+
+</Sandpack>
+
+<Solution>
+
+State works [like a snapshot](/learn/state-as-a-snapshot), so you can't read the latest state from an asynchronous operation like a timeout. However, you can keep the latest input text in a ref. A ref is mutable, so you can read the `current` property at any time. Since the current text is also used for rendering, in this example, you will need *both* a state variable (for rendering), *and* a ref (to read it in the timeout). You will need to update the current ref value manually.
+
+<Sandpack>
+
+```js
+import { useState, useRef } from 'react';
+
+export default function Chat() {
+  const [text, setText] = useState('');
+  const textRef = useRef(text);
+
+  function handleChange(e) {
+    setText(e.target.value);
+    textRef.current = e.target.value;
+  }
+
+  function handleSend() {
+    setTimeout(() => {
+      alert('Sending: ' + textRef.current);
+    }, 3000);
+  }
+
+  return (
+    <>
+      <input
+        value={text}
+        onChange={handleChange}
+      />
+      <button
+        onClick={handleSend}>
+        Send
+      </button>
+    </>
+  );
+}
+```
+
+</Sandpack>
+
+</Solution>
+
+</Challenges>
diff --git a/beta/src/content/learn/removing-effect-dependencies.md b/beta/src/content/learn/removing-effect-dependencies.md
new file mode 100644
index 000000000..7b4815f4f
--- /dev/null
+++ b/beta/src/content/learn/removing-effect-dependencies.md
@@ -0,0 +1,2330 @@
+---
+title: 'Removing Effect Dependencies'
+---
+
+<Intro>
+
+When you write an Effect, the linter will verify that you've included every reactive value (like props and state) that the Effect reads in the list of your Effect's dependencies. This ensures that your Effect remains synchronized with the latest props and state of your component. Unnecessary dependencies may cause your Effect to run too often, or even create an infinite loop. Follow this guide to review and remove unnecessary dependencies from your Effects.
+
+</Intro>
+
+<YouWillLearn>
+
+- How to fix infinite Effect dependency loops
+- What to do when you want to remove a dependency
+- How to read a value from your Effect without "reacting" to it
+- How and why to avoid object and function dependencies
+- Why suppressing the dependency linter is dangerous, and what to do instead
+
+</YouWillLearn>
+
+## Dependencies should match the code {/*dependencies-should-match-the-code*/}
+
+When you write an Effect, you first specify how to [start and stop](/learn/lifecycle-of-reactive-effects#the-lifecycle-of-an-effect) whatever you want your Effect to be doing:
+
+```js {5-7}
+const serverUrl = 'https://localhost:1234';
+
+function ChatRoom({ roomId }) {
+  useEffect(() => {
+    const connection = createConnection(serverUrl, roomId);
+    connection.connect();
+    return () => connection.disconnect();
+  	// ...
+}
+```
+
+Then, if you leave the Effect dependencies empty (`[]`), the linter will suggest the correct dependencies:
+
+<Sandpack>
+
+```js
+import { useState, useEffect } from 'react';
+import { createConnection } from './chat.js';
+
+const serverUrl = 'https://localhost:1234';
+
+function ChatRoom({ roomId }) {
+  useEffect(() => {
+    const connection = createConnection(serverUrl, roomId);
+    connection.connect();
+    return () => connection.disconnect();
+  }, []); // <-- Fix the mistake here!
+  return <h1>Welcome to the {roomId} room!</h1>;
+}
+
+export default function App() {
+  const [roomId, setRoomId] = useState('general');
+  return (
+    <>
+      <label>
+        Choose the chat room:{' '}
+        <select
+          value={roomId}
+          onChange={e => setRoomId(e.target.value)}
+        >
+          <option value="general">general</option>
+          <option value="travel">travel</option>
+          <option value="music">music</option>
+        </select>
+      </label>
+      <hr />
+      <ChatRoom roomId={roomId} />
+    </>
+  );
+}
+```
+
+```js chat.js
+export function createConnection(serverUrl, roomId) {
+  // A real implementation would actually connect to the server
+  return {
+    connect() {
+      console.log('✅ Connecting to "' + roomId + '" room at ' + serverUrl + '...');
+    },
+    disconnect() {
+      console.log('❌ Disconnected from "' + roomId + '" room at ' + serverUrl);
+    }
+  };
+}
+```
+
+```css
+input { display: block; margin-bottom: 20px; }
+button { margin-left: 10px; }
+```
+
+</Sandpack>
+
+Fill them in according to what the linter says:
+
+```js {6}
+function ChatRoom({ roomId }) {
+  useEffect(() => {
+    const connection = createConnection(serverUrl, roomId);
+    connection.connect();
+    return () => connection.disconnect();
+  }, [roomId]); // ✅ All dependencies declared
+  // ...
+}
+```
+
+[Effects "react" to reactive values.](/learn/lifecycle-of-reactive-effects#effects-react-to-reactive-values) Since `roomId` is a reactive value (it can change due to a re-render), the linter verifies that you've specified it as a dependency. If `roomId` receives a different value, React will re-synchronize your Effect. This ensures that the chat stays connected to the selected room and "reacts" to the dropdown:
+
+<Sandpack>
+
+```js
+import { useState, useEffect } from 'react';
+import { createConnection } from './chat.js';
+
+const serverUrl = 'https://localhost:1234';
+
+function ChatRoom({ roomId }) {
+  useEffect(() => {
+    const connection = createConnection(serverUrl, roomId);
+    connection.connect();
+    return () => connection.disconnect();
+  }, [roomId]);
+  return <h1>Welcome to the {roomId} room!</h1>;
+}
+
+export default function App() {
+  const [roomId, setRoomId] = useState('general');
+  return (
+    <>
+      <label>
+        Choose the chat room:{' '}
+        <select
+          value={roomId}
+          onChange={e => setRoomId(e.target.value)}
+        >
+          <option value="general">general</option>
+          <option value="travel">travel</option>
+          <option value="music">music</option>
+        </select>
+      </label>
+      <hr />
+      <ChatRoom roomId={roomId} />
+    </>
+  );
+}
+```
+
+```js chat.js
+export function createConnection(serverUrl, roomId) {
+  // A real implementation would actually connect to the server
+  return {
+    connect() {
+      console.log('✅ Connecting to "' + roomId + '" room at ' + serverUrl + '...');
+    },
+    disconnect() {
+      console.log('❌ Disconnected from "' + roomId + '" room at ' + serverUrl);
+    }
+  };
+}
+```
+
+```css
+input { display: block; margin-bottom: 20px; }
+button { margin-left: 10px; }
+```
+
+</Sandpack>
+
+### To remove a dependency, prove that it's not a dependency {/*to-remove-a-dependency-prove-that-its-not-a-dependency*/}
+
+Notice that you can't "choose" the dependencies of your Effect. Every <CodeStep step={2}>reactive value</CodeStep> used by your Effect's code must be declared in your dependency list. Your Effect's dependency list is determined by the surrounding code:
+
+```js [[2, 3, "roomId"], [2, 5, "roomId"], [2, 8, "roomId"]]
+const serverUrl = 'https://localhost:1234';
+
+function ChatRoom({ roomId }) { // This is a reactive value
+  useEffect(() => {
+    const connection = createConnection(serverUrl, roomId); // This Effect reads that reactive value
+    connection.connect();
+    return () => connection.disconnect();
+  }, [roomId]); // ✅ So you must specify that reactive value as a dependency of your Effect
+  // ...
+}
+```
+
+[Reactive values](/learn/lifecycle-of-reactive-effects#all-variables-declared-in-the-component-body-are-reactive) include props and all variables and functions declared directly inside of your component. Since `roomId` is a reactive value, you can't remove it from the dependency list. The linter wouldn't allow it:
+
+```js {8}
+const serverUrl = 'https://localhost:1234';
+
+function ChatRoom({ roomId }) {
+  useEffect(() => {
+    const connection = createConnection(serverUrl, roomId);
+    connection.connect();
+    return () => connection.disconnect();
+  }, []); // 🔴 React Hook useEffect has a missing dependency: 'roomId'
+  // ...
+}
+```
+
+And the linter would be right! Since `roomId` may change over time, this would introduce a bug in your code.
+
+**To remove a dependency, you need to "prove" to the linter that it *doesn't need* to be a dependency.** For example, you can move `roomId` out of your component to prove that it's not reactive and won't change on re-renders:
+
+```js {2,9}
+const serverUrl = 'https://localhost:1234';
+const roomId = 'music'; // Not a reactive value anymore
+
+function ChatRoom() {
+  useEffect(() => {
+    const connection = createConnection(serverUrl, roomId);
+    connection.connect();
+    return () => connection.disconnect();
+  }, []); // ✅ All dependencies declared
+  // ...
+}
+```
+
+Now that `roomId` is not a reactive value (and can't change on a re-render), it doesn't need to be a dependency:
+
+<Sandpack>
+
+```js
+import { useState, useEffect } from 'react';
+import { createConnection } from './chat.js';
+
+const serverUrl = 'https://localhost:1234';
+const roomId = 'music';
+
+export default function ChatRoom() {
+  useEffect(() => {
+    const connection = createConnection(serverUrl, roomId);
+    connection.connect();
+    return () => connection.disconnect();
+  }, []);
+  return <h1>Welcome to the {roomId} room!</h1>;
+}
+```
+
+```js chat.js
+export function createConnection(serverUrl, roomId) {
+  // A real implementation would actually connect to the server
+  return {
+    connect() {
+      console.log('✅ Connecting to "' + roomId + '" room at ' + serverUrl + '...');
+    },
+    disconnect() {
+      console.log('❌ Disconnected from "' + roomId + '" room at ' + serverUrl);
+    }
+  };
+}
+```
+
+```css
+input { display: block; margin-bottom: 20px; }
+button { margin-left: 10px; }
+```
+
+</Sandpack>
+
+This is why you could now specify an [empty (`[]`) dependency list.](/learn/lifecycle-of-reactive-effects#what-an-effect-with-empty-dependencies-means) Your Effect *really doesn't* depend on any reactive value anymore, so it *really doesn't* need to re-run when any of the component's props or state change.
+
+### To change the dependencies, change the code {/*to-change-the-dependencies-change-the-code*/}
+
+You might have noticed a pattern in your workflow:
+
+1. First, you **change the code** of your Effect or how your reactive values are declared.
+2. Then, you follow the linter and adjust the dependencies to **match the code you have changed.**
+3. If you're not happy with the list of dependencies, you **go back to the first step** (and change the code again).
+
+The last part is important. **If you want to change the dependencies, change the surrounding code first.** You can think of the dependency list as [a list of all the reactive values used by your Effect's code.](/learn/lifecycle-of-reactive-effects#react-verifies-that-you-specified-every-reactive-value-as-a-dependency) You don't intentionally *choose* what to put on that list. The list *describes* your code. To change the dependency list, change the code.
+
+This might feel like solving an equation. You might start with a goal (for example, to remove a dependency), and you need to "find" the exact code matching that goal. Not everyone finds solving equations fun, and the same thing could be said about writing Effects! Luckily, there is a list of common recipes that you can try below.
+
+<Pitfall>
+
+If you have an existing codebase, you might have some Effects that suppress the linter like this:
+
+```js {3-4}
+useEffect(() => {
+  // ...
+  // 🔴 Avoid suppressing the linter like this:
+  // eslint-ignore-next-line react-hooks/exhaustive-dependencies
+}, []);
+```
+
+**When dependencies don't match the code, there is a very high risk of introducing bugs.** By suppressing the linter, you "lie" to React about the values your Effect depends on. Instead, use the techniques below.
+
+</Pitfall>
+
+<DeepDive>
+
+#### Why is suppressing the dependency linter so dangerous? {/*why-is-suppressing-the-dependency-linter-so-dangerous*/}
+
+Suppressing the linter leads to very unintuitive bugs that are hard to find and fix. Here's one example:
+
+<Sandpack>
+
+```js
+import { useState, useEffect } from 'react';
+
+export default function Timer() {
+  const [count, setCount] = useState(0);
+  const [increment, setIncrement] = useState(1);
+
+  function onTick() {
+	setCount(count + increment);
+  }
+
+  useEffect(() => {
+    const id = setInterval(onTick, 1000);
+    return () => clearInterval(id);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <>
+      <h1>
+        Counter: {count}
+        <button onClick={() => setCount(0)}>Reset</button>
+      </h1>
+      <hr />
+      <p>
+        Every second, increment by:
+        <button disabled={increment === 0} onClick={() => {
+          setIncrement(i => i - 1);
+        }}>–</button>
+        <b>{increment}</b>
+        <button onClick={() => {
+          setIncrement(i => i + 1);
+        }}>+</button>
+      </p>
+    </>
+  );
+}
+```
+
+```css
+button { margin: 10px; }
+```
+
+</Sandpack>
+
+Let's say that you wanted to run the Effect "only on mount". You've read that [empty (`[]`) dependencies](/learn/lifecycle-of-reactive-effects#what-an-effect-with-empty-dependencies-means) do that, so you've decided to ignore the linter, and forcefully specified `[]` as the dependencies.
+
+This counter was supposed to increment every second by the amount configurable with the two buttons. However, since you "lied" to React that this Effect doesn't depend on anything, React forever keeps using the `onTick` function from the initial render. [During that render,](/learn/state-as-a-snapshot#rendering-takes-a-snapshot-in-time) `count` was `0` and `increment` was `1`. This is why `onTick` from that render always calls `setCount(0 + 1)` every second, and you always see `1`. Bugs like this are harder to fix when they're spread across multiple components.
+
+There's always a better solution than ignoring the linter! To fix this code, you need to add `onTick` to the dependency list. (To ensure the interval is only setup once, [make `onTick` an Effect Event.](/learn/separating-events-from-effects#reading-latest-props-and-state-with-effect-events))
+
+**We recommend to treat the dependency lint error as a compilation error. If you don't suppress it, you will never see bugs like this.** The rest of this page documents the alternatives for this and other cases.
+
+</DeepDive>
+
+## Removing unnecessary dependencies {/*removing-unnecessary-dependencies*/}
+
+Every time you adjust the Effect's dependencies to reflect the code, look at the dependency list. Does it make sense for the Effect to re-run when any of these dependencies change? Sometimes, the answer is "no":
+
+* Sometimes, you want to re-execute *different parts* of your Effect under different conditions.
+* Sometimes, you want to only read the *latest value* of some dependency instead of "reacting" to its changes.
+* Sometimes, a dependency may change too often *unintentionally* because it's an object or a function.
+
+To find the right solution, you'll need to answer a few questions about your Effect. Let's walk through them.
+
+### Should this code move to an event handler? {/*should-this-code-move-to-an-event-handler*/}
+
+The first thing you should think about is whether this code should be an Effect at all.
+
+Imagine a form. On submit, you set the `submitted` state variable to `true`. You need to send a POST request and show a notification. You've decided to put this logic inside an Effect that "reacts" to `submitted` being `true`:
+
+```js {6-8}
+function Form() {
+  const [submitted, setSubmitted] = useState(false);
+
+  useEffect(() => {
+    if (submitted) {
+      // 🔴 Avoid: Event-specific logic inside an Effect
+      post('/api/register');
+      showNotification('Successfully registered!');
+    }
+  }, [submitted]);
+
+  function handleSubmit() {
+    setSubmitted(true);
+  }
+
+  // ...
+}
+```
+
+Later, you want to style the notification message according to the current theme, so you read the current theme. Since `theme` is declared in the component body, it is a reactive value, and you must declare it as a dependency:
+
+```js {3,9,11}
+function Form() {
+  const [submitted, setSubmitted] = useState(false);
+  const theme = useContext(ThemeContext);
+
+  useEffect(() => {
+    if (submitted) {
+      // 🔴 Avoid: Event-specific logic inside an Effect
+      post('/api/register');
+      showNotification('Successfully registered!', theme);
+    }
+  }, [submitted, theme]); // ✅ All dependencies declared
+
+  function handleSubmit() {
+    setSubmitted(true);
+  }  
+
+  // ...
+}
+```
+
+But by doing this, you've introduced a bug. Imagine you submit the form first and then switch between Dark and Light themes. The `theme` will change, the Effect will re-run, and so it will display the same notification again!
+
+**The problem here is that this shouldn't be an Effect in the first place.** You want to send this POST request and show the notification in response to *submitting the form,* which is a particular interaction. When you want to run some code in response to particular interaction, put that logic directly into the corresponding event handler:
+
+```js {6-7}
+function Form() {
+  const theme = useContext(ThemeContext);
+
+  function handleSubmit() {
+    // ✅ Good: Event-specific logic is called from event handlers
+    post('/api/register');
+    showNotification('Successfully registered!', theme);
+  }  
+
+  // ...
+}
+```
+
+Now that the code is in an event handler, it's not reactive--so it will only run when the user submits the form. Read more about [choosing between event handlers and Effects](/learn/separating-events-from-effects#reactive-values-and-reactive-logic) and [how to delete unnecessary Effects.](/learn/you-might-not-need-an-effect)
+
+### Is your Effect doing several unrelated things? {/*is-your-effect-doing-several-unrelated-things*/}
+
+The next question you should ask yourself is whether your Effect is doing several unrelated things.
+
+Imagine you're creating a shipping form where the user needs to choose their city and area. You fetch the list of `cities` from the server according to the selected `country` so that you can show them as dropdown options:
+
+```js
+function ShippingForm({ country }) {
+  const [cities, setCities] = useState(null);
+  const [city, setCity] = useState(null);
+
+  useEffect(() => {
+    let ignore = false;
+    fetch(`/api/cities?country=${country}`)
+      .then(response => response.json())
+      .then(json => {
+        if (!ignore) {
+          setCities(json);
+        }
+      });
+    return () => {
+      ignore = true;
+    };
+  }, [country]); // ✅ All dependencies declared
+
+  // ...
+```
+
+This is a good example of [fetching data in an Effect.](/learn/you-might-not-need-an-effect#fetching-data) You are synchronizing the `cities` state with the network according to the `country` prop. You can't do this in an event handler because you need to fetch as soon as `ShippingForm` is displayed and whenever the `country` changes (no matter which interaction causes it).
+
+Now let's say you're adding a second select box for city areas, which should fetch the `areas` for the currently selected `city`. You might start by adding a second `fetch` call for the list of areas inside the same Effect:
+
+```js {15-24,28}
+function ShippingForm({ country }) {
+  const [cities, setCities] = useState(null);
+  const [city, setCity] = useState(null);
+  const [areas, setAreas] = useState(null);
+
+  useEffect(() => {
+    let ignore = false;
+    fetch(`/api/cities?country=${country}`)
+      .then(response => response.json())
+      .then(json => {
+        if (!ignore) {
+          setCities(json);
+        }
+      });
+    // 🔴 Avoid: A single Effect synchronizes two independent processes
+    if (city) {
+      fetch(`/api/areas?city=${city}`)
+        .then(response => response.json())
+        .then(json => {
+          if (!ignore) {
+            setAreas(json);
+          }
+        });
+    }
+    return () => {
+      ignore = true;
+    };
+  }, [country, city]); // ✅ All dependencies declared
+
+  // ...
+```
+
+However, since the Effect now uses the `city` state variable, you've had to add `city` to the list of dependencies. That, in turn, has introduced a problem. Now, whenever the user selects a different city, the Effect will re-run and call `fetchCities(country)`. As a result, you will be unnecessarily refetching the list of cities many times.
+
+**The problem with this code is that you're synchronizing two different unrelated things:**
+
+1. You want to synchronize the `cities` state to the network based on the `country` prop.
+1. You want to synchronize the `areas` state to the network based on the `city` state.
+
+Split the logic into two Effects, each of which reacts to the prop that it needs to synchronize with:
+
+```js {19-33}
+function ShippingForm({ country }) {
+  const [cities, setCities] = useState(null);
+  useEffect(() => {
+    let ignore = false;
+    fetch(`/api/cities?country=${country}`)
+      .then(response => response.json())
+      .then(json => {
+        if (!ignore) {
+          setCities(json);
+        }
+      });
+    return () => {
+      ignore = true;
+    };
+  }, [country]); // ✅ All dependencies declared
+
+  const [city, setCity] = useState(null);
+  const [areas, setAreas] = useState(null);
+  useEffect(() => {
+    if (city) {
+      let ignore = false;
+      fetch(`/api/areas?city=${city}`)
+        .then(response => response.json())
+        .then(json => {
+          if (!ignore) {
+            setAreas(json);
+          }
+        });
+      return () => {
+        ignore = true;
+      };
+    }
+  }, [city]); // ✅ All dependencies declared
+
+  // ...
+```
+
+Now the first Effect only re-runs if the `country` changes, while the second Effect re-runs when the `city` changes. You've separated them by purpose: two different things are synchronized by two separate Effects. Two separate Effects have two separate dependency lists, so they will no longer trigger each other unintentionally.
+
+The final code is longer than the original, but splitting these Effects is still correct. [Each Effect should represent an independent synchronization process.](/learn/lifecycle-of-reactive-effects#each-effect-represents-a-separate-synchronization-process) In this example, deleting one Effect doesn't break the other Effect's logic. This is a good indication that they *synchronize different things,* and it made sense to split them up. If the duplication feels concerning, you can further improve this code by [extracting repetitive logic into a custom Hook.](/learn/reusing-logic-with-custom-hooks#when-to-use-custom-hooks)
+
+### Are you reading some state to calculate the next state? {/*are-you-reading-some-state-to-calculate-the-next-state*/}
+
+This Effect updates the `messages` state variable with a newly created array every time a new message arrives:
+
+```js {2,6-8}
+function ChatRoom({ roomId }) {
+  const [messages, setMessages] = useState([]);
+  useEffect(() => {
+    const connection = createConnection();
+    connection.connect();
+    connection.on('message', (receivedMessage) => {
+      setMessages([...messages, receivedMessage]);
+    });
+    // ...
+```
+
+It uses the `messages` variable to [create a new array](/learn/updating-arrays-in-state) starting with all the existing messages and adds the new message at the end. However, since `messages` is a reactive value read by an Effect, it must be a dependency:
+
+```js {7,10}
+function ChatRoom({ roomId }) {
+  const [messages, setMessages] = useState([]);
+  useEffect(() => {
+    const connection = createConnection();
+    connection.connect();
+    connection.on('message', (receivedMessage) => {
+      setMessages([...messages, receivedMessage]);
+    });
+    return () => connection.disconnect();
+  }, [roomId, messages]); // ✅ All dependencies declared
+  // ...
+```
+
+And making `messages` a dependency introduces a problem.
+
+Every time you receive a message, `setMessages()` causes the component to re-render with a new `messages` array that includes the received message. However, since this Effect now depends on `messages`, this will *also* re-synchronize the Effect. So every new message will make the chat re-connect. The user would not like that!
+
+To fix the issue, don't read `messages` inside the Effect. Instead, pass an [updater function](/reference/react/useState#updating-state-based-on-the-previous-state) to `setMessages`:
+
+```js {7,10}
+function ChatRoom({ roomId }) {
+  const [messages, setMessages] = useState([]);
+  useEffect(() => {
+    const connection = createConnection();
+    connection.connect();
+    connection.on('message', (receivedMessage) => {
+      setMessages(msgs => [...msgs, receivedMessage]);
+    });
+    return () => connection.disconnect();
+  }, [roomId]); // ✅ All dependencies declared
+  // ...
+```
+
+**Notice how your Effect does not read the `messages` variable at all now.** You only need to pass an updater function like `msgs => [...msgs, receivedMessage]`. React [puts your updater function in a queue](/learn/queueing-a-series-of-state-updates) and will provide the `msgs` argument to it during the next render. This is why the Effect itself doesn't need to depend on `messages` anymore. As a result of this fix, receiving a chat message will no longer make the chat re-connect.
+
+### Do you want to read a value without "reacting" to its changes? {/*do-you-want-to-read-a-value-without-reacting-to-its-changes*/}
+
+<Wip>
+
+This section describes an **experimental API that has not yet been added to React,** so you can't use it yet.
+
+</Wip>
+
+Suppose that you want to play a sound when the user receives a new message unless `isMuted` is `true`:
+
+```js {3,10-12}
+function ChatRoom({ roomId }) {
+  const [messages, setMessages] = useState([]);
+  const [isMuted, setIsMuted] = useState(false);
+
+  useEffect(() => {
+    const connection = createConnection();
+    connection.connect();
+    connection.on('message', (receivedMessage) => {
+      setMessages(msgs => [...msgs, receivedMessage]);
+      if (!isMuted) {
+        playSound();
+      }
+    });
+    // ...
+```
+
+Since your Effect now uses `isMuted` in its code, you have to add it to the dependencies:
+
+```js {10,15}
+function ChatRoom({ roomId }) {
+  const [messages, setMessages] = useState([]);
+  const [isMuted, setIsMuted] = useState(false);
+
+  useEffect(() => {
+    const connection = createConnection();
+    connection.connect();
+    connection.on('message', (receivedMessage) => {
+      setMessages(msgs => [...msgs, receivedMessage]);
+      if (!isMuted) {
+        playSound();
+      }
+    });
+    return () => connection.disconnect();
+  }, [roomId, isMuted]); // ✅ All dependencies declared
+  // ...
+```
+
+The problem is that every time `isMuted` changes (for example, when the user presses the "Muted" toggle), the Effect will re-synchronize, and reconnect to the chat server. This is not the desired user experience! (In this example, even disabling the linter would not work--if you do that, `isMuted` would get "stuck" with its old value.)
+
+To solve this problem, you need to extract the logic that shouldn't be reactive out of the Effect. You don't want this Effect to "react" to the changes in `isMuted`. [Move this non-reactive piece of logic into an Effect Event:](/learn/separating-events-from-effects#declaring-an-effect-event)
+
+```js {1,7-12,18,21}
+import { useState, useEffect, useEffectEvent } from 'react';
+
+function ChatRoom({ roomId }) {
+  const [messages, setMessages] = useState([]);
+  const [isMuted, setIsMuted] = useState(false);
+
+  const onMessage = useEffectEvent(receivedMessage => {
+    setMessages(msgs => [...msgs, receivedMessage]);
+    if (!isMuted) {
+      playSound();
+    }
+  });
+
+  useEffect(() => {
+    const connection = createConnection();
+    connection.connect();
+    connection.on('message', (receivedMessage) => {
+      onMessage(receivedMessage);
+    });
+    return () => connection.disconnect();
+  }, [roomId]); // ✅ All dependencies declared
+  // ...
+```
+
+Effect Events let you split an Effect into reactive parts (which should "react" to reactive values like `roomId` and their changes) and non-reactive parts (which only read their latest values, like `onMessage` reads `isMuted`). **Now that you read `isMuted` inside an Effect Event, it doesn't need to be a dependency of your Effect.** As a result, the chat won't re-connect when you toggle the "Muted" setting on and off, solving the original issue!
+
+#### Wrapping an event handler from the props {/*wrapping-an-event-handler-from-the-props*/}
+
+You might run into a similar problem when your component receives an event handler as a prop:
+
+```js {1,8,11}
+function ChatRoom({ roomId, onReceiveMessage }) {
+  const [messages, setMessages] = useState([]);
+
+  useEffect(() => {
+    const connection = createConnection();
+    connection.connect();
+    connection.on('message', (receivedMessage) => {
+      onReceiveMessage(receivedMessage);
+    });
+    return () => connection.disconnect();
+  }, [roomId, onReceiveMessage]); // ✅ All dependencies declared
+  // ...
+```
+
+Suppose that the parent component passes a *different* `onReceiveMessage` function on every render:
+
+```js {3-5}
+<ChatRoom
+  roomId={roomId}
+  onReceiveMessage={receivedMessage => {
+    // ...
+  }}
+/>
+```
+
+Since `onReceiveMessage` is a dependency of your Effect, it would cause the Effect to re-synchronize after every parent re-render. This would make it re-connect to the chat. To solve this, wrap the call in an Effect Event:
+
+```js {4-6,12,15}
+function ChatRoom({ roomId, onReceiveMessage }) {
+  const [messages, setMessages] = useState([]);
+
+  const onMessage = useEffectEvent(receivedMessage => {
+    onReceiveMessage(receivedMessage);
+  });
+
+  useEffect(() => {
+    const connection = createConnection();
+    connection.connect();
+    connection.on('message', (receivedMessage) => {
+      onMessage(receivedMessage);
+    });
+    return () => connection.disconnect();
+  }, [roomId]); // ✅ All dependencies declared
+  // ...
+```
+
+Effect Events aren't reactive, so you don't need to specify them as dependencies. As a result, the chat will no longer re-connect even if the parent component passes a function that's different on every re-render.
+
+#### Separating reactive and non-reactive code {/*separating-reactive-and-non-reactive-code*/}
+
+In this example, you want to log a visit every time `roomId` changes. You want to include the current `notificationCount` with every log, but you *don't* want a change to `notificationCount` to trigger a log event.
+
+The solution is again to split out the non-reactive code into an Effect Event:
+
+```js {2-4,7}
+function Chat({ roomId, notificationCount }) {
+  const onVisit = useEffectEvent(visitedRoomId => {
+    logVisit(visitedRoomId, notificationCount);
+  });
+
+  useEffect(() => {
+    onVisit(roomId);
+  }, [roomId]); // ✅ All dependencies declared
+  // ...
+}
+```
+
+You want your logic to be reactive with regards to `roomId`, so you read `roomId` inside of your Effect. However, you don't want a change to `notificationCount` to log an extra visit, so you read `notificationCount` inside of the Effect Event. [Learn more about reading the latest props and state from Effects using Effect Events.](/learn/separating-events-from-effects#reading-latest-props-and-state-with-effect-events)
+
+### Does some reactive value change unintentionally? {/*does-some-reactive-value-change-unintentionally*/}
+
+Sometimes, you *do* want your Effect to "react" to a certain value, but that value changes more often than you'd like--and might not reflect any actual change from the user's perspective. For example, let's say that you create an `options` object in the body of your component, and then read that object from inside of your Effect:
+
+```js {3-6,9}
+function ChatRoom({ roomId }) {
+  // ...
+  const options = {
+    serverUrl: serverUrl,
+    roomId: roomId
+  };
+
+  useEffect(() => {
+    const connection = createConnection(options);
+    connection.connect();
+    // ...
+```
+
+This object is declared in the component body, so it's a [reactive value.](/learn/lifecycle-of-reactive-effects#effects-react-to-reactive-values) When you read a reactive value like this inside an Effect, you declare it as a dependency. This ensures your Effect "reacts" to its changes:
+
+```js {3,6}
+  // ...
+  useEffect(() => {
+    const connection = createConnection(options);
+    connection.connect();
+    return () => connection.disconnect();
+  }, [options]); // ✅ All dependencies declared
+  // ...
+```
+
+It is important to declare it as a dependency! This ensures, for example, that if the `roomId` changes, then your Effect will re-connect to the chat with the new `options`. However, there is also a problem with the code above. To see the problem, try typing into the input in the sandbox below, and watch what happens in the console:
+
+<Sandpack>
+
+```js
+import { useState, useEffect } from 'react';
+import { createConnection } from './chat.js';
+
+const serverUrl = 'https://localhost:1234';
+
+function ChatRoom({ roomId }) {
+  const [message, setMessage] = useState('');
+
+  const options = {
+    serverUrl: serverUrl,
+    roomId: roomId
+  };
+
+  useEffect(() => {
+    const connection = createConnection(options);
+    connection.connect();
+    return () => connection.disconnect();
+  }, [options]);
+
+  return (
+    <>
+      <h1>Welcome to the {roomId} room!</h1>
+      <input value={message} onChange={e => setMessage(e.target.value)} />
+    </>
+  );
+}
+
+export default function App() {
+  const [roomId, setRoomId] = useState('general');
+  return (
+    <>
+      <label>
+        Choose the chat room:{' '}
+        <select
+          value={roomId}
+          onChange={e => setRoomId(e.target.value)}
+        >
+          <option value="general">general</option>
+          <option value="travel">travel</option>
+          <option value="music">music</option>
+        </select>
+      </label>
+      <hr />
+      <ChatRoom roomId={roomId} />
+    </>
+  );
+}
+```
+
+```js chat.js
+export function createConnection({ serverUrl, roomId }) {
+  // A real implementation would actually connect to the server
+  return {
+    connect() {
+      console.log('✅ Connecting to "' + roomId + '" room at ' + serverUrl + '...');
+    },
+    disconnect() {
+      console.log('❌ Disconnected from "' + roomId + '" room at ' + serverUrl);
+    }
+  };
+}
+```
+
+```css
+input { display: block; margin-bottom: 20px; }
+button { margin-left: 10px; }
+```
+
+</Sandpack>
+
+In the sandbox above, the input only updates the `message` state variable. From the user's perspective, this should not affect the chat connection. However, every time you update the `message`, your component re-renders. When your component re-renders, the code inside of it runs again from scratch.
+
+This means that a new `options` object is created from scratch on every re-render of the `ChatRoom` component. React sees that the `options` object is a *different object* from the `options` object created during the last render. This is why it re-synchronizes your Effect (which depends on `options`), and the chat re-connects as you type.
+
+**This problem affects objects and functions in particular. In JavaScript, each newly created object and function is considered distinct from all the others. It doesn't matter that the contents inside of them may be the same!**
+
+```js {7-8}
+// During the first render
+const options1 = { serverUrl: 'https://localhost:1234', roomId: 'music' };
+
+// During the next render
+const options2 = { serverUrl: 'https://localhost:1234', roomId: 'music' };
+
+// These are two different objects!
+console.log(Object.is(options1, options2)); // false
+````
+
+**Object and function dependencies create a risk that your Effect will re-synchronize more often than you need.** 
+
+This is why, whenever possible, you should try to avoid objects and functions as your Effect's dependencies. Instead, try moving them outside the component, inside the Effect, or extracting primitive values out of them.
+
+#### Move static objects and functions outside your component {/*move-static-objects-and-functions-outside-your-component*/}
+
+If the object does not depend on any props and state, you can move that object outside your component:
+
+```js {1-4,13}
+const options = {
+  serverUrl: 'https://localhost:1234',
+  roomId: 'music'
+};
+
+function ChatRoom() {
+  const [message, setMessage] = useState('');
+
+  useEffect(() => {
+    const connection = createConnection(options);
+    connection.connect();
+    return () => connection.disconnect();
+  }, []); // ✅ All dependencies declared
+  // ...
+```
+
+This way, you *prove* to the linter that it's not reactive. It can't change as a result of a re-render, so it doesn't need to be a dependency of your Effect. Now re-rendering `ChatRoom` won't cause your Effect to re-synchronize.
+
+This works for functions too:
+
+```js {1-6,12}
+function createOptions() {
+  return {
+    serverUrl: 'https://localhost:1234',
+    roomId: 'music'
+  };
+}
+
+function ChatRoom() {
+  const [message, setMessage] = useState('');
+
+  useEffect(() => {
+    const options = createOptions();
+    const connection = createConnection();
+    connection.connect();
+    return () => connection.disconnect();
+  }, []); // ✅ All dependencies declared
+  // ...
+```
+
+Since `createOptions` is declared outside your component, it's not a reactive value. This is why it doesn't need to be specified in your Effect's dependencies, and why it won't ever cause your Effect to re-synchronize.
+
+#### Move dynamic objects and functions inside your Effect {/*move-dynamic-objects-and-functions-inside-your-effect*/}
+
+If your object depends on some reactive value that may change as a result of a re-render, like a `roomId` prop, you can't pull it *outside* your component. You can, however, move its creation *inside* of your Effect's code:
+
+```js {7-10,11,14}
+const serverUrl = 'https://localhost:1234';
+
+function ChatRoom({ roomId }) {
+  const [message, setMessage] = useState('');
+
+  useEffect(() => {
+    const options = {
+      serverUrl: serverUrl,
+      roomId: roomId
+    };
+    const connection = createConnection(options);
+    connection.connect();
+    return () => connection.disconnect();
+  }, [roomId]); // ✅ All dependencies declared
+  // ...
+```
+
+Now that `options` is declared inside of your Effect, it is no longer a dependency of your Effect. Instead, the only reactive value used by your Effect is `roomId`. Since `roomId` is not an object or function, you can be sure that it won't be *unintentionally* different. In JavaScript, numbers and strings are compared by their content:
+
+```js {7-8}
+// During the first render
+const roomId1 = 'music';
+
+// During the next render
+const roomId2 = 'music';
+
+// These two strings are the same!
+console.log(Object.is(roomId1, roomId2)); // true
+````
+
+Thanks to this fix, the chat no longer re-connects if you edit the input:
+
+<Sandpack>
+
+```js
+import { useState, useEffect } from 'react';
+import { createConnection } from './chat.js';
+
+const serverUrl = 'https://localhost:1234';
+
+function ChatRoom({ roomId }) {
+  const [message, setMessage] = useState('');
+
+  useEffect(() => {
+    const options = {
+      serverUrl: serverUrl,
+      roomId: roomId
+    };
+    const connection = createConnection(options);
+    connection.connect();
+    return () => connection.disconnect();
+  }, [roomId]);
+
+  return (
+    <>
+      <h1>Welcome to the {roomId} room!</h1>
+      <input value={message} onChange={e => setMessage(e.target.value)} />
+    </>
+  );
+}
+
+export default function App() {
+  const [roomId, setRoomId] = useState('general');
+  return (
+    <>
+      <label>
+        Choose the chat room:{' '}
+        <select
+          value={roomId}
+          onChange={e => setRoomId(e.target.value)}
+        >
+          <option value="general">general</option>
+          <option value="travel">travel</option>
+          <option value="music">music</option>
+        </select>
+      </label>
+      <hr />
+      <ChatRoom roomId={roomId} />
+    </>
+  );
+}
+```
+
+```js chat.js
+export function createConnection({ serverUrl, roomId }) {
+  // A real implementation would actually connect to the server
+  return {
+    connect() {
+      console.log('✅ Connecting to "' + roomId + '" room at ' + serverUrl + '...');
+    },
+    disconnect() {
+      console.log('❌ Disconnected from "' + roomId + '" room at ' + serverUrl);
+    }
+  };
+}
+```
+
+```css
+input { display: block; margin-bottom: 20px; }
+button { margin-left: 10px; }
+```
+
+</Sandpack>
+
+However, it *does* re-connect when you change the `roomId` dropdown, as you would expect.
+
+This works for functions, too:
+
+```js {7-12,14}
+const serverUrl = 'https://localhost:1234';
+
+function ChatRoom({ roomId }) {
+  const [message, setMessage] = useState('');
+
+  useEffect(() => {
+    function createOptions() {
+      return {
+        serverUrl: serverUrl,
+        roomId: roomId
+      };
+    }
+
+    const options = createOptions();
+    const connection = createConnection(options);
+    connection.connect();
+    return () => connection.disconnect();
+  }, [roomId]); // ✅ All dependencies declared
+  // ...
+```
+
+You can write your own functions to group pieces of logic inside your Effect. As long as you also declare them *inside* your Effect, they're not reactive values, and so they don't need to be dependencies of your Effect.
+
+#### Read primitive values from objects {/*read-primitive-values-from-objects*/}
+
+Sometimes, you may receive an object from props:
+
+```js {1,5,8}
+function ChatRoom({ options }) {
+  const [message, setMessage] = useState('');
+
+  useEffect(() => {
+    const connection = createConnection(options);
+    connection.connect();
+    return () => connection.disconnect();
+  }, [options]); // ✅ All dependencies declared
+  // ...
+```
+
+The risk here is that the parent component will create the object during rendering:
+
+```js {3-6}
+<ChatRoom
+  roomId={roomId}
+  options={{
+    serverUrl: serverUrl,
+    roomId: roomId
+  }}
+/>
+```
+
+This would cause your Effect to re-connect every time the parent component re-renders. To fix this, read all the necessary information from the object *outside* the Effect, and avoid having objects and functions dependencies:
+
+```js {4,7-8,12}
+function ChatRoom({ options }) {
+  const [message, setMessage] = useState('');
+
+  const { roomId, serverUrl } = options;
+  useEffect(() => {
+    const connection = createConnection({
+      roomId: roomId,
+      serverUrl: serverUrl
+    });
+    connection.connect();
+    return () => connection.disconnect();
+  }, [roomId, serverUrl]); // ✅ All dependencies declared
+  // ...
+```
+
+The logic gets a little repetitive (you read some values from an object outside an Effect, and then create an object with the same values inside the Effect). But it makes it very explicit what information your Effect *actually* depends on. If an object is re-created unintentionally by the parent component, the chat would not re-connect. However, if `options.roomId` or `options.serverUrl` actually change, the chat would re-connect as you'd expect.
+
+#### Calculate primitive values from functions {/*calculate-primitive-values-from-functions*/}
+
+The same approach can work for functions. For example, suppose the parent component passes a function:
+
+```js {3-8}
+<ChatRoom
+  roomId={roomId}
+  getOptions={() => {
+    return {
+      serverUrl: serverUrl,
+      roomId: roomId
+    };
+  }}
+/>
+```
+
+To avoid making it a dependency (and thus causing it to re-connect on re-renders), call it outside the Effect. This gives you the `roomId` and `serverUrl` values that aren't objects, and that you can read from inside your Effect:
+
+```js {1,4}
+function ChatRoom({ getOptions }) {
+  const [message, setMessage] = useState('');
+
+  const { roomId, serverUrl } = getOptions();
+  useEffect(() => {
+    const connection = createConnection({
+      roomId: roomId,
+      serverUrl: serverUrl
+    });
+    connection.connect();
+    return () => connection.disconnect();
+  }, [roomId, serverUrl]); // ✅ All dependencies declared
+  // ...
+```
+
+This only works for [pure](/learn/keeping-components-pure) functions because they are safe to call during rendering. If your function is an event handler, but you don't want its changes to re-synchronize your Effect, [wrap it into an Effect Event instead.](#do-you-want-to-read-a-value-without-reacting-to-its-changes)
+
+<Recap>
+
+- Dependencies should always match the code.
+- When you're not happy with your dependencies, what you need to edit is the code.
+- Suppressing the linter leads to very confusing bugs, and you should always avoid it.
+- To remove a dependency, you need to "prove" to the linter that it's not necessary.
+- If the code in your Effect should run in response to a specific interaction, move that code to an event handler.
+- If different parts of your Effect should re-run for different reasons, split it into several Effects.
+- If you want to update some state based on the previous state, pass an updater function.
+- If you want to read the latest value without "reacting" it, extract an Effect Event from your Effect.
+- In JavaScript, objects and functions are considered different if they were created at different times.
+- Try to avoid object and function dependencies. Move them outside the component or inside the Effect.
+
+</Recap>
+
+<Challenges>
+
+#### Fix a resetting interval {/*fix-a-resetting-interval*/}
+
+This Effect sets up an interval that ticks every second. You've noticed something strange happening: it seems like the interval gets destroyed and re-created every time it ticks. Fix the code so that the interval doesn't get constantly re-created.
+
+<Hint>
+
+It seems like this Effect's code depends on `count`. Is there some way to not need this dependency? There should be a way to update the `count` state based on its previous value without adding a dependency on that value.
+
+</Hint>
+
+<Sandpack>
+
+```js
+import { useState, useEffect } from 'react';
+
+export default function Timer() {
+  const [count, setCount] = useState(0);
+
+  useEffect(() => {
+    console.log('✅ Creating an interval');
+    const id = setInterval(() => {
+      console.log('⏰ Interval tick');
+      setCount(count + 1);
+    }, 1000);
+    return () => {
+      console.log('❌ Clearing an interval');
+      clearInterval(id);
+    };
+  }, [count]);
+
+  return <h1>Counter: {count}</h1>
+}
+```
+
+</Sandpack>
+
+<Solution>
+
+You want to update the `count` state to be `count + 1` from inside the Effect. However, this makes your Effect depend on `count`, which changes with every tick, and that's why your interval gets re-created on every tick.
+
+To solve this, use the [updater function](/reference/react/useState#updating-state-based-on-the-previous-state) and write `setCount(c => c + 1)` instead of `setCount(count + 1)`:
+
+<Sandpack>
+
+```js
+import { useState, useEffect } from 'react';
+
+export default function Timer() {
+  const [count, setCount] = useState(0);
+
+  useEffect(() => {
+    console.log('✅ Creating an interval');
+    const id = setInterval(() => {
+      console.log('⏰ Interval tick');
+      setCount(c => c + 1);
+    }, 1000);
+    return () => {
+      console.log('❌ Clearing an interval');
+      clearInterval(id);
+    };
+  }, []);
+
+  return <h1>Counter: {count}</h1>
+}
+```
+
+</Sandpack>
+
+Instead of reading `count` inside the Effect, you pass a `c => c + 1` instruction ("increment this number!") to React. React will apply it on the next render. And since you don't need to read the value of `count` inside your Effect anymore, so you can keep your Effect's dependencies empty (`[]`). This prevents your Effect from re-creating the interval on every tick.
+
+</Solution>
+
+#### Fix a retriggering animation {/*fix-a-retriggering-animation*/}
+
+In this example, when you press "Show", a welcome message fades in. The animation takes a second. When you press "Remove", the welcome message immediately disappears. The logic for the fade-in animation is implemented in the `animation.js` file as plain JavaScript [animation loop.](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) You don't need to change that logic. You can treat it as a third-party library. Your Effect creates an instance of `FadeInAnimation` for the DOM node, and then calls `start(duration)` or `stop()` to control the animation. The `duration` is controlled by a slider. Adjust the slider and see how the animation changes.
+
+This code already works, but there is something you want to change. Currently, when you move the slider that controls the `duration` state variable, it retriggers the animation. Change the behavior so that the Effect does not "react" to the `duration` variable. When you press "Show", the Effect should use the current `duration` on the slider. However, moving the slider itself should not by itself retrigger the animation.
+
+<Hint>
+
+Is there a line of code inside the Effect that should not be reactive? How can you move non-reactive code out of the Effect?
+
+</Hint>
+
+<Sandpack>
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "experimental",
+    "react-dom": "experimental",
+    "react-scripts": "latest"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+```js
+import { useState, useEffect, useRef } from 'react';
+import { experimental_useEffectEvent as useEffectEvent } from 'react';
+import { FadeInAnimation } from './animation.js';
+
+function Welcome({ duration }) {
+  const ref = useRef(null);
+
+  useEffect(() => {
+    const animation = new FadeInAnimation(ref.current);
+    animation.start(duration);
+    return () => {
+      animation.stop();
+    };
+  }, [duration]);
+
+  return (
+    <h1
+      ref={ref}
+      style={{
+        opacity: 0,
+        color: 'white',
+        padding: 50,
+        textAlign: 'center',
+        fontSize: 50,
+        backgroundImage: 'radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%)'
+      }}
+    >
+      Welcome
+    </h1>
+  );
+}
+
+export default function App() {
+  const [duration, setDuration] = useState(1000);
+  const [show, setShow] = useState(false);
+
+  return (
+    <>
+      <label>
+        <input
+          type="range"
+          min="100"
+          max="3000"
+          value={duration}
+          onChange={e => setDuration(Number(e.target.value))}
+        />
+        <br />
+        Fade in duration: {duration} ms
+      </label>
+      <button onClick={() => setShow(!show)}>
+        {show ? 'Remove' : 'Show'}
+      </button>
+      <hr />
+      {show && <Welcome duration={duration} />}
+    </>
+  );
+}
+```
+
+```js animation.js
+export class FadeInAnimation {
+  constructor(node) {
+    this.node = node;
+  }
+  start(duration) {
+    this.duration = duration;
+    if (this.duration === 0) {
+      // Jump to end immediately
+      this.onProgress(1);
+    } else {
+      this.onProgress(0);
+      // Start animating
+      this.startTime = performance.now();
+      this.frameId = requestAnimationFrame(() => this.onFrame());
+    }
+  }
+  onFrame() {
+    const timePassed = performance.now() - this.startTime;
+    const progress = Math.min(timePassed / this.duration, 1);
+    this.onProgress(progress);
+    if (progress < 1) {
+      // We still have more frames to paint
+      this.frameId = requestAnimationFrame(() => this.onFrame());
+    }
+  }
+  onProgress(progress) {
+    this.node.style.opacity = progress;
+  }
+  stop() {
+    cancelAnimationFrame(this.frameId);
+    this.startTime = null;
+    this.frameId = null;
+    this.duration = 0;
+  }
+}
+```
+
+```css
+label, button { display: block; margin-bottom: 20px; }
+html, body { min-height: 300px; }
+```
+
+</Sandpack>
+
+<Solution>
+
+Your Effect needs to read the latest value of `duration`, but you don't want it to "react" to changes in `duration`. You use `duration` to start the animation, but starting animation isn't reactive. Extract the non-reactive line of code into an Effect Event, and call that function from your Effect.
+
+<Sandpack>
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "experimental",
+    "react-dom": "experimental",
+    "react-scripts": "latest"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+```js
+import { useState, useEffect, useRef } from 'react';
+import { FadeInAnimation } from './animation.js';
+import { experimental_useEffectEvent as useEffectEvent } from 'react';
+
+function Welcome({ duration }) {
+  const ref = useRef(null);
+
+  const onAppear = useEffectEvent(animation => {
+    animation.start(duration);
+  });
+
+  useEffect(() => {
+    const animation = new FadeInAnimation(ref.current);
+    onAppear(animation);
+    return () => {
+      animation.stop();
+    };
+  }, []);
+
+  return (
+    <h1
+      ref={ref}
+      style={{
+        opacity: 0,
+        color: 'white',
+        padding: 50,
+        textAlign: 'center',
+        fontSize: 50,
+        backgroundImage: 'radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%)'
+      }}
+    >
+      Welcome
+    </h1>
+  );
+}
+
+export default function App() {
+  const [duration, setDuration] = useState(1000);
+  const [show, setShow] = useState(false);
+
+  return (
+    <>
+      <label>
+        <input
+          type="range"
+          min="100"
+          max="3000"
+          value={duration}
+          onChange={e => setDuration(Number(e.target.value))}
+        />
+        <br />
+        Fade in duration: {duration} ms
+      </label>
+      <button onClick={() => setShow(!show)}>
+        {show ? 'Remove' : 'Show'}
+      </button>
+      <hr />
+      {show && <Welcome duration={duration} />}
+    </>
+  );
+}
+```
+
+```js animation.js
+export class FadeInAnimation {
+  constructor(node) {
+    this.node = node;
+  }
+  start(duration) {
+    this.duration = duration;
+    this.onProgress(0);
+    this.startTime = performance.now();
+    this.frameId = requestAnimationFrame(() => this.onFrame());
+  }
+  onFrame() {
+    const timePassed = performance.now() - this.startTime;
+    const progress = Math.min(timePassed / this.duration, 1);
+    this.onProgress(progress);
+    if (progress < 1) {
+      // We still have more frames to paint
+      this.frameId = requestAnimationFrame(() => this.onFrame());
+    }
+  }
+  onProgress(progress) {
+    this.node.style.opacity = progress;
+  }
+  stop() {
+    cancelAnimationFrame(this.frameId);
+    this.startTime = null;
+    this.frameId = null;
+    this.duration = 0;
+  }
+}
+```
+
+```css
+label, button { display: block; margin-bottom: 20px; }
+html, body { min-height: 300px; }
+```
+
+</Sandpack>
+
+Effect Events like `onAppear` are not reactive, so you can read `duration` inside without retriggering the animation.
+
+</Solution>
+
+#### Fix a reconnecting chat {/*fix-a-reconnecting-chat*/}
+
+In this example, every time you press "Toggle theme", the chat re-connects. Why does this happen? Fix the mistake so that the chat re-connects only when you edit Server URL or choose a different the chat room.
+
+Treat `chat.js` as an external third-party library: you can consult it to check its API, but don't edit it.
+
+<Hint>
+
+There's more than one way to fix this, but ultimately you want to avoid having an object as your dependency.
+
+</Hint>
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+import ChatRoom from './ChatRoom.js';
+
+export default function App() {
+  const [isDark, setIsDark] = useState(false);
+  const [roomId, setRoomId] = useState('general');
+  const [serverUrl, setServerUrl] = useState('https://localhost:1234');
+
+  const options = {
+    serverUrl: serverUrl,
+    roomId: roomId
+  };
+
+  return (
+    <div className={isDark ? 'dark' : 'light'}>
+      <button onClick={() => setIsDark(!isDark)}>
+        Toggle theme
+      </button>
+      <label>
+        Server URL:{' '}
+        <input
+          value={serverUrl}
+          onChange={e => setServerUrl(e.target.value)}
+        />
+      </label>
+      <label>
+        Choose the chat room:{' '}
+        <select
+          value={roomId}
+          onChange={e => setRoomId(e.target.value)}
+        >
+          <option value="general">general</option>
+          <option value="travel">travel</option>
+          <option value="music">music</option>
+        </select>
+      </label>
+      <hr />
+      <ChatRoom options={options} />
+    </div>
+  );
+}
+```
+
+```js ChatRoom.js active
+import { useEffect } from 'react';
+import { createConnection } from './chat.js';
+
+export default function ChatRoom({ options }) {
+  useEffect(() => {
+    const connection = createConnection(options);
+    connection.connect();
+    return () => connection.disconnect();
+  }, [options]);
+
+  return <h1>Welcome to the {options.roomId} room!</h1>;
+}
+```
+
+```js chat.js
+export function createConnection({ serverUrl, roomId }) {
+  // A real implementation would actually connect to the server
+  if (typeof serverUrl !== 'string') {
+    throw Error('Expected serverUrl to be a string. Received: ' + serverUrl);
+  }
+  if (typeof roomId !== 'string') {
+    throw Error('Expected roomId to be a string. Received: ' + roomId);
+  }
+  return {
+    connect() {
+      console.log('✅ Connecting to "' + roomId + '" room at ' + serverUrl + '...');
+    },
+    disconnect() {
+      console.log('❌ Disconnected from "' + roomId + '" room at ' + serverUrl);
+    }
+  };
+}
+```
+
+```css
+label, button { display: block; margin-bottom: 5px; }
+.dark { background: #222; color: #eee; }
+```
+
+</Sandpack>
+
+<Solution>
+
+Your Effect is re-running because it depends on the `options` object. Objects can be re-created unintentionally, you should try to avoid them as dependencies of your Effects whenever possible.
+
+The least invasive fix is to read `roomId` and `serverUrl` right outside the Effect, and then make the Effect depend on those primitive values (which can't change unintentionally). Inside the Effect, create an object and it pass to `createConnnection`:
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+import ChatRoom from './ChatRoom.js';
+
+export default function App() {
+  const [isDark, setIsDark] = useState(false);
+  const [roomId, setRoomId] = useState('general');
+  const [serverUrl, setServerUrl] = useState('https://localhost:1234');
+
+  const options = {
+    serverUrl: serverUrl,
+    roomId: roomId
+  };
+
+  return (
+    <div className={isDark ? 'dark' : 'light'}>
+      <button onClick={() => setIsDark(!isDark)}>
+        Toggle theme
+      </button>
+      <label>
+        Server URL:{' '}
+        <input
+          value={serverUrl}
+          onChange={e => setServerUrl(e.target.value)}
+        />
+      </label>
+      <label>
+        Choose the chat room:{' '}
+        <select
+          value={roomId}
+          onChange={e => setRoomId(e.target.value)}
+        >
+          <option value="general">general</option>
+          <option value="travel">travel</option>
+          <option value="music">music</option>
+        </select>
+      </label>
+      <hr />
+      <ChatRoom options={options} />
+    </div>
+  );
+}
+```
+
+```js ChatRoom.js active
+import { useEffect } from 'react';
+import { createConnection } from './chat.js';
+
+export default function ChatRoom({ options }) {
+  const { roomId, serverUrl } = options;
+  useEffect(() => {
+    const connection = createConnection({
+      roomId: roomId,
+      serverUrl: serverUrl
+    });
+    connection.connect();
+    return () => connection.disconnect();
+  }, [roomId, serverUrl]);
+
+  return <h1>Welcome to the {options.roomId} room!</h1>;
+}
+```
+
+```js chat.js
+export function createConnection({ serverUrl, roomId }) {
+  // A real implementation would actually connect to the server
+  if (typeof serverUrl !== 'string') {
+    throw Error('Expected serverUrl to be a string. Received: ' + serverUrl);
+  }
+  if (typeof roomId !== 'string') {
+    throw Error('Expected roomId to be a string. Received: ' + roomId);
+  }
+  return {
+    connect() {
+      console.log('✅ Connecting to "' + roomId + '" room at ' + serverUrl + '...');
+    },
+    disconnect() {
+      console.log('❌ Disconnected from "' + roomId + '" room at ' + serverUrl);
+    }
+  };
+}
+```
+
+```css
+label, button { display: block; margin-bottom: 5px; }
+.dark { background: #222; color: #eee; }
+```
+
+</Sandpack>
+
+It would be even better to replace the object `options` prop with the more specific `roomId` and `serverUrl` props:
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+import ChatRoom from './ChatRoom.js';
+
+export default function App() {
+  const [isDark, setIsDark] = useState(false);
+  const [roomId, setRoomId] = useState('general');
+  const [serverUrl, setServerUrl] = useState('https://localhost:1234');
+
+  return (
+    <div className={isDark ? 'dark' : 'light'}>
+      <button onClick={() => setIsDark(!isDark)}>
+        Toggle theme
+      </button>
+      <label>
+        Server URL:{' '}
+        <input
+          value={serverUrl}
+          onChange={e => setServerUrl(e.target.value)}
+        />
+      </label>
+      <label>
+        Choose the chat room:{' '}
+        <select
+          value={roomId}
+          onChange={e => setRoomId(e.target.value)}
+        >
+          <option value="general">general</option>
+          <option value="travel">travel</option>
+          <option value="music">music</option>
+        </select>
+      </label>
+      <hr />
+      <ChatRoom
+        roomId={roomId}
+        serverUrl={serverUrl}
+      />
+    </div>
+  );
+}
+```
+
+```js ChatRoom.js active
+import { useState, useEffect } from 'react';
+import { createConnection } from './chat.js';
+
+export default function ChatRoom({ roomId, serverUrl }) {
+  useEffect(() => {
+    const connection = createConnection({
+      roomId: roomId,
+      serverUrl: serverUrl
+    });
+    connection.connect();
+    return () => connection.disconnect();
+  }, [roomId, serverUrl]);
+
+  return <h1>Welcome to the {roomId} room!</h1>;
+}
+```
+
+```js chat.js
+export function createConnection({ serverUrl, roomId }) {
+  // A real implementation would actually connect to the server
+  if (typeof serverUrl !== 'string') {
+    throw Error('Expected serverUrl to be a string. Received: ' + serverUrl);
+  }
+  if (typeof roomId !== 'string') {
+    throw Error('Expected roomId to be a string. Received: ' + roomId);
+  }
+  return {
+    connect() {
+      console.log('✅ Connecting to "' + roomId + '" room at ' + serverUrl + '...');
+    },
+    disconnect() {
+      console.log('❌ Disconnected from "' + roomId + '" room at ' + serverUrl);
+    }
+  };
+}
+```
+
+```css
+label, button { display: block; margin-bottom: 5px; }
+.dark { background: #222; color: #eee; }
+```
+
+</Sandpack>
+
+Sticking to primitive props where possible makes it easier to optimize your components later.
+
+</Solution>
+
+#### Fix a reconnecting chat, again {/*fix-a-reconnecting-chat-again*/}
+
+This example connects to the chat either with or without encryption. Toggle the checkbox and notice the different messages in the console when the encryption is on and off. Try changing the room. Then, try toggling the theme. When you're connected to a chat room, you will receive new messages every few seconds. Verify that their color matches the theme you've picked.
+
+In this example, the chat re-connects every time you try to change the theme. Fix this. After the fix, changing the theme should not re-connect the chat, but toggling encryption settings or changing the room should re-connect.
+
+Don't change any code in `chat.js`. Other than that, you can change any code as long as it results in the same behavior. For example, you may find it helpful to change which props are being passed down.
+
+<Hint>
+
+You're passing down two functions: `onMessage` and `createConnection`. Both of them are created from scratch every time `App` re-renders. They are considered to be new values every time, which is why they re-trigger your Effect.
+
+One of these functions is an event handler. Do you know some way to call an event handler an Effect without "reacting" to the new values of the event handler function? That would come in handy!
+
+Another of these functions only exists to pass some state to an imported API method. Is this function really necessary? What is the essential information that's being passed down? You might need to move some imports from `App.js` to `ChatRoom.js`.
+
+</Hint>
+
+<Sandpack>
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "experimental",
+    "react-dom": "experimental",
+    "react-scripts": "latest",
+    "toastify-js": "1.12.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+```js App.js
+import { useState } from 'react';
+import ChatRoom from './ChatRoom.js';
+import {
+  createEncryptedConnection,
+  createUnencryptedConnection,
+} from './chat.js';
+import { showNotification } from './notifications.js';
+
+export default function App() {
+  const [isDark, setIsDark] = useState(false);
+  const [roomId, setRoomId] = useState('general');
+  const [isEncrypted, setIsEncrypted] = useState(false);
+
+  return (
+    <>
+      <label>
+        <input
+          type="checkbox"
+          checked={isDark}
+          onChange={e => setIsDark(e.target.checked)}
+        />
+        Use dark theme
+      </label>
+      <label>
+        <input
+          type="checkbox"
+          checked={isEncrypted}
+          onChange={e => setIsEncrypted(e.target.checked)}
+        />
+        Enable encryption
+      </label>
+      <label>
+        Choose the chat room:{' '}
+        <select
+          value={roomId}
+          onChange={e => setRoomId(e.target.value)}
+        >
+          <option value="general">general</option>
+          <option value="travel">travel</option>
+          <option value="music">music</option>
+        </select>
+      </label>
+      <hr />
+      <ChatRoom
+        roomId={roomId}
+        onMessage={msg => {
+          showNotification('New message: ' + msg, isDark ? 'dark' : 'light');
+        }}
+        createConnection={() => {
+          const options = {
+            serverUrl: 'https://localhost:1234',
+            roomId: roomId
+          };
+          if (isEncrypted) {
+            return createEncryptedConnection(options);
+          } else {
+            return createUnencryptedConnection(options);
+          }
+        }}
+      />
+    </>
+  );
+}
+```
+
+```js ChatRoom.js active
+import { useState, useEffect } from 'react';
+import { experimental_useEffectEvent as useEffectEvent } from 'react';
+
+export default function ChatRoom({ roomId, createConnection, onMessage }) {
+  useEffect(() => {
+    const connection = createConnection();
+    connection.on('message', (msg) => onMessage(msg));
+    connection.connect();
+    return () => connection.disconnect();
+  }, [createConnection, onMessage]);
+
+  return <h1>Welcome to the {roomId} room!</h1>;
+}
+```
+
+```js chat.js
+export function createEncryptedConnection({ serverUrl, roomId }) {
+  // A real implementation would actually connect to the server
+  if (typeof serverUrl !== 'string') {
+    throw Error('Expected serverUrl to be a string. Received: ' + serverUrl);
+  }
+  if (typeof roomId !== 'string') {
+    throw Error('Expected roomId to be a string. Received: ' + roomId);
+  }
+  let intervalId;
+  let messageCallback;
+  return {
+    connect() {
+      console.log('✅ 🔐 Connecting to "' + roomId + '" room... (encrypted)');
+      clearInterval(intervalId);
+      intervalId = setInterval(() => {
+        if (messageCallback) {
+          if (Math.random() > 0.5) {
+            messageCallback('hey')
+          } else {
+            messageCallback('lol');
+          }
+        }
+      }, 3000);
+    },
+    disconnect() {
+      clearInterval(intervalId);
+      messageCallback = null;
+      console.log('❌ 🔐 Disconnected from "' + roomId + '" room (encrypted)');
+    },
+    on(event, callback) {
+      if (messageCallback) {
+        throw Error('Cannot add the handler twice.');
+      }
+      if (event !== 'message') {
+        throw Error('Only "message" event is supported.');
+      }
+      messageCallback = callback;
+    },
+  };
+}
+
+export function createUnencryptedConnection({ serverUrl, roomId }) {
+  // A real implementation would actually connect to the server
+  if (typeof serverUrl !== 'string') {
+    throw Error('Expected serverUrl to be a string. Received: ' + serverUrl);
+  }
+  if (typeof roomId !== 'string') {
+    throw Error('Expected roomId to be a string. Received: ' + roomId);
+  }
+  let intervalId;
+  let messageCallback;
+  return {
+    connect() {
+      console.log('✅ Connecting to "' + roomId + '" room (unencrypted)...');
+      clearInterval(intervalId);
+      intervalId = setInterval(() => {
+        if (messageCallback) {
+          if (Math.random() > 0.5) {
+            messageCallback('hey')
+          } else {
+            messageCallback('lol');
+          }
+        }
+      }, 3000);
+    },
+    disconnect() {
+      clearInterval(intervalId);
+      messageCallback = null;
+      console.log('❌ Disconnected from "' + roomId + '" room (unencrypted)');
+    },
+    on(event, callback) {
+      if (messageCallback) {
+        throw Error('Cannot add the handler twice.');
+      }
+      if (event !== 'message') {
+        throw Error('Only "message" event is supported.');
+      }
+      messageCallback = callback;
+    },
+  };
+}
+```
+
+```js notifications.js
+import Toastify from 'toastify-js';
+import 'toastify-js/src/toastify.css';
+
+export function showNotification(message, theme) {
+  Toastify({
+    text: message,
+    duration: 2000,
+    gravity: 'top',
+    position: 'right',
+    style: {
+      background: theme === 'dark' ? 'black' : 'white',
+      color: theme === 'dark' ? 'white' : 'black',
+    },
+  }).showToast();
+}
+```
+
+```css
+label, button { display: block; margin-bottom: 5px; }
+```
+
+</Sandpack>
+
+<Solution>
+
+There's more than one correct way to solve this, but the here is one possible solution.
+
+In the original example, toggling the theme caused different `onMessage` and `createConnection` functions to be created and passed down. Since the Effect depended on these functions, the chat would re-connect every time you toggle the theme.
+
+To fix the problem with `onMessage`, you needed to wrap it into an Effect Event:
+
+```js {1,2,6}
+export default function ChatRoom({ roomId, createConnection, onMessage }) {
+  const onReceiveMessage = useEffectEvent(onMessage);
+
+  useEffect(() => {
+    const connection = createConnection();
+    connection.on('message', (msg) => onReceiveMessage(msg));
+    // ...
+```
+
+Unlike the `onMessage` prop, the `onReceiveMessage` Effect Event is not reactive. This is why it doesn't need to be a dependency of your Effect. As a result, changes to `onMessage` won't cause the chat to re-connect.
+
+You can't do the same with `createConnection` because it *should* be reactive. You *want* the Effect to re-trigger if the user switches between an encrypted and an unencryption connection, or if the user switches the current room. However, because `createConnection` is a function, you can't check whether the information it reads has *actually* changed or not. To solve this, instead of passing `createConnection` down from the `App` component, pass the raw `roomId` and `isEncrypted` values:
+
+```js {2-3}
+      <ChatRoom
+        roomId={roomId}
+        isEncrypted={isEncrypted}
+        onMessage={msg => {
+          showNotification('New message: ' + msg, isDark ? 'dark' : 'light');
+        }}
+      />
+```
+
+Now you can move the `createConnection` function *inside* the Effect instead of passing it down from the `App`:
+
+```js {1-4,6,10-20}
+import {
+  createEncryptedConnection,
+  createUnencryptedConnection,
+} from './chat.js';
+
+export default function ChatRoom({ roomId, isEncrypted, onMessage }) {
+  const onReceiveMessage = useEffectEvent(onMessage);
+
+  useEffect(() => {
+    function createConnection() {
+      const options = {
+        serverUrl: 'https://localhost:1234',
+        roomId: roomId
+      };
+      if (isEncrypted) {
+        return createEncryptedConnection(options);
+      } else {
+        return createUnencryptedConnection(options);
+      }
+    }
+    // ...
+```
+
+After these two changes, your Effect no longer depends on any function values:
+
+```js {1,8,10,21}
+export default function ChatRoom({ roomId, isEncrypted, onMessage }) { // Reactive values
+  const onReceiveMessage = useEffectEvent(onMessage); // Not reactive
+
+  useEffect(() => {
+    function createConnection() {
+      const options = {
+        serverUrl: 'https://localhost:1234',
+        roomId: roomId // Reading a reactive value
+      };
+      if (isEncrypted) { // Reading a reactive value
+        return createEncryptedConnection(options);
+      } else {
+        return createUnencryptedConnection(options);
+      }
+    }
+
+    const connection = createConnection();
+    connection.on('message', (msg) => onReceiveMessage(msg));
+    connection.connect();
+    return () => connection.disconnect();
+  }, [roomId, isEncrypted]); // ✅ All dependencies declared
+```
+
+As a result, the chat re-connects only when something meaningful (`roomId` or `isEncrypted`) changes:
+
+<Sandpack>
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "experimental",
+    "react-dom": "experimental",
+    "react-scripts": "latest",
+    "toastify-js": "1.12.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+```js App.js
+import { useState } from 'react';
+import ChatRoom from './ChatRoom.js';
+
+import { showNotification } from './notifications.js';
+
+export default function App() {
+  const [isDark, setIsDark] = useState(false);
+  const [roomId, setRoomId] = useState('general');
+  const [isEncrypted, setIsEncrypted] = useState(false);
+
+  return (
+    <>
+      <label>
+        <input
+          type="checkbox"
+          checked={isDark}
+          onChange={e => setIsDark(e.target.checked)}
+        />
+        Use dark theme
+      </label>
+      <label>
+        <input
+          type="checkbox"
+          checked={isEncrypted}
+          onChange={e => setIsEncrypted(e.target.checked)}
+        />
+        Enable encryption
+      </label>
+      <label>
+        Choose the chat room:{' '}
+        <select
+          value={roomId}
+          onChange={e => setRoomId(e.target.value)}
+        >
+          <option value="general">general</option>
+          <option value="travel">travel</option>
+          <option value="music">music</option>
+        </select>
+      </label>
+      <hr />
+      <ChatRoom
+        roomId={roomId}
+        isEncrypted={isEncrypted}
+        onMessage={msg => {
+          showNotification('New message: ' + msg, isDark ? 'dark' : 'light');
+        }}
+      />
+    </>
+  );
+}
+```
+
+```js ChatRoom.js active
+import { useState, useEffect } from 'react';
+import { experimental_useEffectEvent as useEffectEvent } from 'react';
+import {
+  createEncryptedConnection,
+  createUnencryptedConnection,
+} from './chat.js';
+
+export default function ChatRoom({ roomId, isEncrypted, onMessage }) {
+  const onReceiveMessage = useEffectEvent(onMessage);
+
+  useEffect(() => {
+    function createConnection() {
+      const options = {
+        serverUrl: 'https://localhost:1234',
+        roomId: roomId
+      };
+      if (isEncrypted) {
+        return createEncryptedConnection(options);
+      } else {
+        return createUnencryptedConnection(options);
+      }
+    }
+
+    const connection = createConnection();
+    connection.on('message', (msg) => onReceiveMessage(msg));
+    connection.connect();
+    return () => connection.disconnect();
+  }, [roomId, isEncrypted]);
+
+  return <h1>Welcome to the {roomId} room!</h1>;
+}
+```
+
+```js chat.js
+export function createEncryptedConnection({ serverUrl, roomId }) {
+  // A real implementation would actually connect to the server
+  if (typeof serverUrl !== 'string') {
+    throw Error('Expected serverUrl to be a string. Received: ' + serverUrl);
+  }
+  if (typeof roomId !== 'string') {
+    throw Error('Expected roomId to be a string. Received: ' + roomId);
+  }
+  let intervalId;
+  let messageCallback;
+  return {
+    connect() {
+      console.log('✅ 🔐 Connecting to "' + roomId + '" room... (encrypted)');
+      clearInterval(intervalId);
+      intervalId = setInterval(() => {
+        if (messageCallback) {
+          if (Math.random() > 0.5) {
+            messageCallback('hey')
+          } else {
+            messageCallback('lol');
+          }
+        }
+      }, 3000);
+    },
+    disconnect() {
+      clearInterval(intervalId);
+      messageCallback = null;
+      console.log('❌ 🔐 Disconnected from "' + roomId + '" room (encrypted)');
+    },
+    on(event, callback) {
+      if (messageCallback) {
+        throw Error('Cannot add the handler twice.');
+      }
+      if (event !== 'message') {
+        throw Error('Only "message" event is supported.');
+      }
+      messageCallback = callback;
+    },
+  };
+}
+
+export function createUnencryptedConnection({ serverUrl, roomId }) {
+  // A real implementation would actually connect to the server
+  if (typeof serverUrl !== 'string') {
+    throw Error('Expected serverUrl to be a string. Received: ' + serverUrl);
+  }
+  if (typeof roomId !== 'string') {
+    throw Error('Expected roomId to be a string. Received: ' + roomId);
+  }
+  let intervalId;
+  let messageCallback;
+  return {
+    connect() {
+      console.log('✅ Connecting to "' + roomId + '" room (unencrypted)...');
+      clearInterval(intervalId);
+      intervalId = setInterval(() => {
+        if (messageCallback) {
+          if (Math.random() > 0.5) {
+            messageCallback('hey')
+          } else {
+            messageCallback('lol');
+          }
+        }
+      }, 3000);
+    },
+    disconnect() {
+      clearInterval(intervalId);
+      messageCallback = null;
+      console.log('❌ Disconnected from "' + roomId + '" room (unencrypted)');
+    },
+    on(event, callback) {
+      if (messageCallback) {
+        throw Error('Cannot add the handler twice.');
+      }
+      if (event !== 'message') {
+        throw Error('Only "message" event is supported.');
+      }
+      messageCallback = callback;
+    },
+  };
+}
+```
+
+```js notifications.js
+import Toastify from 'toastify-js';
+import 'toastify-js/src/toastify.css';
+
+export function showNotification(message, theme) {
+  Toastify({
+    text: message,
+    duration: 2000,
+    gravity: 'top',
+    position: 'right',
+    style: {
+      background: theme === 'dark' ? 'black' : 'white',
+      color: theme === 'dark' ? 'white' : 'black',
+    },
+  }).showToast();
+}
+```
+
+```css
+label, button { display: block; margin-bottom: 5px; }
+```
+
+</Sandpack>
+
+</Solution>
+
+</Challenges>
diff --git a/beta/src/content/learn/render-and-commit.md b/beta/src/content/learn/render-and-commit.md
new file mode 100644
index 000000000..e54485a74
--- /dev/null
+++ b/beta/src/content/learn/render-and-commit.md
@@ -0,0 +1,213 @@
+---
+title: Render and Commit
+---
+
+<Intro>
+
+Before your components are displayed on screen, they must be rendered by React. Understanding the steps in this process will help you think about how your code executes and explain its behavior.
+
+</Intro>
+
+<YouWillLearn>
+
+* What rendering means in React
+* When and why React renders a component
+* The steps involved in displaying a component on screen
+* Why rendering does not always produce a DOM update
+
+</YouWillLearn>
+
+Imagine that your components are cooks in the kitchen, assembling tasty dishes from ingredients. In this scenario, React is the waiter who puts in requests from customers and brings them their orders. This process of requesting and serving UI has three steps:
+
+1. **Triggering** a render (delivering the guest's order to the kitchen)
+2. **Rendering** the component (preparing the order in the kitchen)
+3. **Committing** to the DOM (placing the order on the table)
+
+<IllustrationBlock sequential>
+  <Illustration caption="Trigger" alt="React as a server in a restaurant, fetching orders from the users and delivering them to the Component Kitchen." src="/images/docs/illustrations/i_render-and-commit1.png" />
+  <Illustration caption="Render" alt="The Card Chef gives React a fresh Card component." src="/images/docs/illustrations/i_render-and-commit2.png" />
+  <Illustration caption="Commit" alt="React delivers the Card to the user at their table." src="/images/docs/illustrations/i_render-and-commit3.png" />
+</IllustrationBlock>
+
+## Step 1: Trigger a render {/*step-1-trigger-a-render*/}
+
+There are two reasons for a component to render:
+
+1. It's the component's **initial render.**
+2. The component's (or one of its ancestors') **state has been updated.**
+
+### Initial render {/*initial-render*/}
+
+When your app starts, you need to trigger the initial render. Frameworks and sandboxes sometimes hide this code, but it's done by calling [`createRoot`](https://beta.reactjs.org/apis/react-dom/client/createRoot) with the target DOM node, and then calling its `render` method with your component:
+
+<Sandpack>
+
+```js index.js active
+import Image from './Image.js';
+import { createRoot } from 'react-dom/client';
+
+const root = createRoot(document.getElementById('root'))
+root.render(<Image />);
+```
+
+```js Image.js
+export default function Image() {
+  return (
+    <img
+      src="https://i.imgur.com/ZF6s192.jpg"
+      alt="'Floralis Genérica' by Eduardo Catalano: a gigantic metallic flower sculpture with reflective petals"
+    />
+  );
+}
+```
+
+</Sandpack>
+
+Try commenting out the `root.render()` call and see the component disappear!
+
+### Re-renders when state updates {/*re-renders-when-state-updates*/}
+
+Once the component has been initially rendered, you can trigger further renders by updating its state with the [`set` function.](/reference/react/useState#setstate) Updating your component's state automatically queues a render. (You can imagine these as a restaurant guest ordering tea, dessert, and all sorts of things after putting in their first order, depending on the state of their thirst or hunger.)
+
+<IllustrationBlock sequential>
+  <Illustration caption="State update..." alt="React as a server in a restaurant, serving a Card UI to the user, represented as a patron with a cursor for their head. They patron expresses they want a pink card, not a black one!" src="/images/docs/illustrations/i_rerender1.png" />
+  <Illustration caption="...triggers..." alt="React returns to the Component Kitchen and tells the Card Chef they need a pink Card." src="/images/docs/illustrations/i_rerender2.png" />
+  <Illustration caption="...render!" alt="The Card Chef gives React the pink Card." src="/images/docs/illustrations/i_rerender3.png" />
+</IllustrationBlock>
+
+## Step 2: React renders your components {/*step-2-react-renders-your-components*/}
+
+After you trigger a render, React calls your components to figure out what to display on screen. **"Rendering" is React calling your components.**
+
+* **On initial render,** React will call the root component.
+* **For subsequent renders,** React will call the function component whose state update triggered the render.
+
+This process is recursive: if the updated component returns some other component, React will render _that_ component next, and if that component also returns something, it will render _that_ component next, and so on. The process will continue until there are no more nested components and React knows exactly what should be displayed on screen.
+
+In the following example, React will call `Gallery()` and  `Image()` several times:
+
+<Sandpack>
+
+```js Gallery.js active
+export default function Gallery() {
+  return (
+    <section>
+      <h1>Inspiring Sculptures</h1>
+      <Image />
+      <Image />
+      <Image />
+    </section>
+  );
+}
+
+function Image() {
+  return (
+    <img
+      src="https://i.imgur.com/ZF6s192.jpg"
+      alt="'Floralis Genérica' by Eduardo Catalano: a gigantic metallic flower sculpture with reflective petals"
+    />
+  );
+}
+```
+
+```js index.js
+import Gallery from './Gallery.js';
+import { createRoot } from 'react-dom/client';
+
+const root = createRoot(document.getElementById('root'))
+root.render(<Gallery />);
+```
+
+```css
+img { margin: 0 10px 10px 0; }
+```
+
+</Sandpack>
+
+* **During the initial render,** React will [create the DOM nodes](https://developer.mozilla.org/docs/Web/API/Document/createElement) for `<section>`, `<h1>`, and three `<img>` tags. 
+* **During a re-render,** React will calculate which of their properties, if any, have changed since the previous render. It won't do anything with that information until the next step, the commit phase.
+
+<Pitfall>
+
+Rendering must always be a [pure calculation](/learn/keeping-components-pure):
+
+* **Same inputs, same output.** Given the same inputs, a component should always return the same JSX. (When someone orders a salad with tomatoes, they should not receive a salad with onions!)
+* **It minds its own business.** It should not change any objects or variables that existed before rendering. (One order should not change anyone else's order.)
+
+Otherwise, you can encounter confusing bugs and unpredictable behavior as your codebase grows in complexity. When developing in "Strict Mode", React calls each component's function twice, which can help surface mistakes caused by impure functions.
+
+</Pitfall>
+
+<DeepDive>
+
+#### Optimizing performance {/*optimizing-performance*/}
+
+The default behavior of rendering all components nested within the updated component is not optimal for performance if the updated component is very high in the tree. If you run into a performance issue, there are several opt-in ways to solve it described in the [Performance](https://reactjs.org/docs/optimizing-performance.html#gatsby-focus-wrapper) section. **Don't optimize prematurely!**
+
+</DeepDive>
+
+## Step 3: React commits changes to the DOM {/*step-3-react-commits-changes-to-the-dom*/}
+
+After rendering (calling) your components, React will modify the DOM. 
+
+* **For the initial render,** React will use the [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) DOM API to put all the DOM nodes it has created on screen. 
+* **For re-renders,** React will apply the minimal necessary operations (calculated while rendering!) to make the DOM match the latest rendering output.
+
+**React only changes the DOM nodes if there's a difference between renders.** For example, here is a component that re-renders with different props passed from its parent every second. Notice how you can add some text into the `<input>`, updating its `value`, but the text doesn't disappear when the component re-renders:
+
+<Sandpack>
+
+```js Clock.js active
+export default function Clock({ time }) {
+  return (
+    <>
+      <h1>{time}</h1>
+      <input />
+    </>
+  );
+}
+```
+
+```js App.js hidden
+import { useState, useEffect } from 'react';
+import Clock from './Clock.js';
+
+function useTime() {
+  const [time, setTime] = useState(() => new Date());
+  useEffect(() => {
+    const id = setInterval(() => {
+      setTime(new Date());
+    }, 1000);
+    return () => clearInterval(id);
+  }, []);
+  return time;
+}
+
+export default function App() {
+  const time = useTime();
+  return (
+    <Clock time={time.toLocaleTimeString()} />
+  );
+}
+```
+
+</Sandpack>
+
+This works because during this last step, React only updates the content of `<h1>` with the new `time`. It sees that the `<input>` appears in the JSX in the same place as last time, so React doesn't touch the `<input>`—or its `value`!
+## Epilogue: Browser paint {/*epilogue-browser-paint*/}
+
+After rendering is done and React updated the DOM, the browser will repaint the screen. Although this process is known as "browser rendering", we'll refer to it as "painting" to avoid confusion in the rest of these docs.
+
+<Illustration alt="A browser painting 'still life with card element'." src="/images/docs/illustrations/i_browser-paint.png" />
+
+<Recap>
+
+* Any screen update in a React app happens in three steps:
+  1. Trigger
+  2. Render
+  3. Commit
+* You can use Strict Mode to find mistakes in your components
+* React does not touch the DOM if the rendering result is the same as last time
+
+</Recap>
+
diff --git a/beta/src/content/learn/rendering-lists.md b/beta/src/content/learn/rendering-lists.md
new file mode 100644
index 000000000..b7c4854b5
--- /dev/null
+++ b/beta/src/content/learn/rendering-lists.md
@@ -0,0 +1,1261 @@
+---
+title: Rendering Lists
+---
+
+<Intro>
+
+You will often want to display multiple similar components from a collection of data. You can use the [JavaScript array methods](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array#) to manipulate an array of data. On this page, you'll use [`filter()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) and [`map()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map) with React to filter and transform your array of data into an array of components.
+
+</Intro>
+
+<YouWillLearn>
+
+* How to render components from an array using JavaScript's `map()`
+* How to render only specific components using JavaScript's `filter()`
+* When and why to use React keys
+
+</YouWillLearn>
+
+## Rendering data from arrays {/*rendering-data-from-arrays*/}
+
+Say that you have a list of content.
+
+```js
+<ul>
+  <li>Creola Katherine Johnson: mathematician</li>
+  <li>Mario José Molina-Pasquel Henríquez: chemist</li>
+  <li>Mohammad Abdus Salam: physicist</li>
+  <li>Percy Lavon Julian: chemist</li>
+  <li>Subrahmanyan Chandrasekhar: astrophysicist</li>
+</ul>
+```
+
+The only difference among those list items is their contents, their data. You will often need to show several instances of the same component using different data when building interfaces: from lists of comments to galleries of profile images. In these situations, you can store that data in JavaScript objects and arrays and use methods like [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) and [`filter()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) to render lists of components from them.
+
+Here’s a short example of how to generate a list of items from an array:
+
+1. **Move** the data into an array:
+
+```js
+const people = [
+  'Creola Katherine Johnson: mathematician',
+  'Mario José Molina-Pasquel Henríquez: chemist',
+  'Mohammad Abdus Salam: physicist',
+  'Percy Lavon Julian: chemist',
+  'Subrahmanyan Chandrasekhar: astrophysicist'
+];
+```
+
+2. **Map** the `people` members into a new array of JSX nodes, `listItems`:
+
+```js
+const listItems = people.map(person => <li>{person}</li>);
+```
+
+3. **Return** `listItems` from your component wrapped in a `<ul>`:
+
+```js
+return <ul>{listItems}</ul>;
+```
+
+Here is the result:
+
+<Sandpack>
+
+```js
+const people = [
+  'Creola Katherine Johnson: mathematician',
+  'Mario José Molina-Pasquel Henríquez: chemist',
+  'Mohammad Abdus Salam: physicist',
+  'Percy Lavon Julian: chemist',
+  'Subrahmanyan Chandrasekhar: astrophysicist'
+];
+
+export default function List() {
+  const listItems = people.map(person =>
+    <li>{person}</li>
+  );
+  return <ul>{listItems}</ul>;
+}
+```
+
+```css
+li { margin-bottom: 10px; }
+```
+
+</Sandpack>
+
+Notice the sandbox above displays a console error:
+
+<ConsoleBlock level="error">
+
+Warning: Each child in a list should have a unique "key" prop.
+
+</ConsoleBlock>
+
+You'll learn how to fix this error later on this page. Before we get to that, let's add some structure to your data.
+
+## Filtering arrays of items {/*filtering-arrays-of-items*/}
+
+This data can be structured even more.
+
+```js
+const people = [{
+  id: 0,
+  name: 'Creola Katherine Johnson',
+  profession: 'mathematician',
+}, {
+  id: 1,
+  name: 'Mario José Molina-Pasquel Henríquez',
+  profession: 'chemist',
+}, {
+  id: 2,
+  name: 'Mohammad Abdus Salam',
+  profession: 'physicist',
+}, {
+  name: 'Percy Lavon Julian',
+  profession: 'chemist',  
+}, {
+  name: 'Subrahmanyan Chandrasekhar',
+  profession: 'astrophysicist',
+}];
+```
+
+Let's say you want a way to only show people whose profession is `'chemist'`. You can use JavaScript's `filter()` method to return just those people. This method takes an array of items, passes them through a “test” (a function that returns `true` or `false`), and returns a new array of only those items that passed the test (returned `true`).
+
+You only want the items where `profession` is `'chemist'`. The "test" function for this looks like `(person) => person.profession === 'chemist'`. Here's how to put it together:
+
+1. **Create** a new array of just “chemist” people, `chemists`, by calling `filter()` on the `people` filtering by `person.profession === 'chemist'`:
+
+```js
+const chemists = people.filter(person =>
+  person.profession === 'chemist'
+);
+```
+
+2. Now **map** over `chemists`:
+
+```js {1,13}
+const listItems = chemists.map(person =>
+  <li>
+     <img
+       src={getImageUrl(person)}
+       alt={person.name}
+     />
+     <p>
+       <b>{person.name}:</b>
+       {' ' + person.profession + ' '}
+       known for {person.accomplishment}
+     </p>
+  </li>
+);
+```
+
+3. Lastly, **return** the `listItems` from your component:
+
+```js
+return <ul>{listItems}</ul>;
+```
+
+<Sandpack>
+
+```js App.js
+import { people } from './data.js';
+import { getImageUrl } from './utils.js';
+
+export default function List() {
+  const chemists = people.filter(person =>
+    person.profession === 'chemist'
+  );
+  const listItems = chemists.map(person =>
+    <li>
+      <img
+        src={getImageUrl(person)}
+        alt={person.name}
+      />
+      <p>
+        <b>{person.name}:</b>
+        {' ' + person.profession + ' '}
+        known for {person.accomplishment}
+      </p>
+    </li>
+  );
+  return <ul>{listItems}</ul>;
+}
+```
+
+```js data.js
+export const people = [{
+  id: 0,
+  name: 'Creola Katherine Johnson',
+  profession: 'mathematician',
+  accomplishment: 'spaceflight calculations',
+  imageId: 'MK3eW3A'
+}, {
+  id: 1,
+  name: 'Mario José Molina-Pasquel Henríquez',
+  profession: 'chemist',
+  accomplishment: 'discovery of Arctic ozone hole',
+  imageId: 'mynHUSa'
+}, {
+  id: 2,
+  name: 'Mohammad Abdus Salam',
+  profession: 'physicist',
+  accomplishment: 'electromagnetism theory',
+  imageId: 'bE7W1ji'
+}, {
+  id: 3,
+  name: 'Percy Lavon Julian',
+  profession: 'chemist',
+  accomplishment: 'pioneering cortisone drugs, steroids and birth control pills',
+  imageId: 'IOjWm71'
+}, {
+  id: 4,
+  name: 'Subrahmanyan Chandrasekhar',
+  profession: 'astrophysicist',
+  accomplishment: 'white dwarf star mass calculations',
+  imageId: 'lrWQx8l'
+}];
+```
+
+```js utils.js
+export function getImageUrl(person) {
+  return (
+    'https://i.imgur.com/' +
+    person.imageId +
+    's.jpg'
+  );
+}
+```
+
+```css
+ul { list-style-type: none; padding: 0px 10px; }
+li { 
+  margin-bottom: 10px; 
+  display: grid; 
+  grid-template-columns: auto 1fr;
+  gap: 20px;
+  align-items: center;
+}
+img { width: 100px; height: 100px; border-radius: 50%; }
+```
+
+</Sandpack>
+
+<Pitfall>
+
+Arrow functions implicitly return the expression right after `=>`, so you didn't need a `return` statement:
+
+```js
+const listItems = chemists.map(person =>
+  <li>...</li> // Implicit return!
+);
+```
+
+However, **you must write `return` explicitly if your `=>` is followed by a `{` curly brace!**
+
+```js
+const listItems = chemists.map(person => { // Curly brace
+  return <li>...</li>;
+});
+```
+
+Arrow functions containing `=> {` are said to have a ["block body".](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#function_body) They let you write more than a single line of code, but you *have to* write a `return` statement yourself. If you forget it, nothing gets returned!
+
+</Pitfall>
+
+## Keeping list items in order with `key` {/*keeping-list-items-in-order-with-key*/}
+
+Notice that all the sandboxes above show an error in the console:
+
+<ConsoleBlock level="error">
+
+Warning: Each child in a list should have a unique "key" prop.
+
+</ConsoleBlock>
+
+You need to give each array item a `key` -- a string or a number that uniquely identifies it among other items in that array:
+
+```js
+<li key={person.id}>...</li>
+```
+
+<Note>
+
+JSX elements directly inside a `map()` call always need keys!
+
+</Note>
+
+Keys tell React which array item each component corresponds to, so that it can match them up later. This becomes important if your array items can move (e.g. due to sorting), get inserted, or get deleted. A well-chosen `key` helps React infer what exactly has happened, and make the correct updates to the DOM tree.
+
+Rather than generating keys on the fly, you should include them in your data:
+
+<Sandpack>
+
+```js App.js
+import { people } from './data.js';
+import { getImageUrl } from './utils.js';
+
+export default function List() {
+  const listItems = people.map(person =>
+    <li key={person.id}>
+      <img
+        src={getImageUrl(person)}
+        alt={person.name}
+      />
+      <p>
+        <b>{person.name}</b>
+          {' ' + person.profession + ' '}
+          known for {person.accomplishment}
+      </p>
+    </li>
+  );
+  return <ul>{listItems}</ul>;
+}
+```
+
+```js data.js active
+export const people = [{
+  id: 0, // Used in JSX as a key
+  name: 'Creola Katherine Johnson',
+  profession: 'mathematician',
+  accomplishment: 'spaceflight calculations',
+  imageId: 'MK3eW3A'
+}, {
+  id: 1, // Used in JSX as a key
+  name: 'Mario José Molina-Pasquel Henríquez',
+  profession: 'chemist',
+  accomplishment: 'discovery of Arctic ozone hole',
+  imageId: 'mynHUSa'
+}, {
+  id: 2, // Used in JSX as a key
+  name: 'Mohammad Abdus Salam',
+  profession: 'physicist',
+  accomplishment: 'electromagnetism theory',
+  imageId: 'bE7W1ji'
+}, {
+  id: 3, // Used in JSX as a key
+  name: 'Percy Lavon Julian',
+  profession: 'chemist',
+  accomplishment: 'pioneering cortisone drugs, steroids and birth control pills',
+  imageId: 'IOjWm71'
+}, {
+  id: 4, // Used in JSX as a key
+  name: 'Subrahmanyan Chandrasekhar',
+  profession: 'astrophysicist',
+  accomplishment: 'white dwarf star mass calculations',
+  imageId: 'lrWQx8l'
+}];
+```
+
+```js utils.js
+export function getImageUrl(person) {
+  return (
+    'https://i.imgur.com/' +
+    person.imageId +
+    's.jpg'
+  );
+}
+```
+
+```css
+ul { list-style-type: none; padding: 0px 10px; }
+li { 
+  margin-bottom: 10px; 
+  display: grid; 
+  grid-template-columns: auto 1fr;
+  gap: 20px;
+  align-items: center;
+}
+img { width: 100px; height: 100px; border-radius: 50%; }
+```
+
+</Sandpack>
+
+<DeepDive>
+
+#### Displaying several DOM nodes for each list item {/*displaying-several-dom-nodes-for-each-list-item*/}
+
+What do you do when each item needs to render not one, but several DOM nodes?
+
+The short [`<>...</>` Fragment](/reference/react/Fragment) syntax won't let you pass a key, so you need to either group them into a single `<div>`, or use the slightly longer and [more explicit `<Fragment>` syntax:](/reference/react/Fragment#rendering-a-list-of-fragments)
+
+```js
+import { Fragment } from 'react';
+
+// ...
+
+const listItems = people.map(person =>
+  <Fragment key={person.id}>
+    <h1>{person.name}</h1>
+    <p>{person.bio}</p>
+  </Fragment>
+);
+```
+
+Fragments disappear from the DOM, so this will produce a flat list of `<h1>`, `<p>`, `<h1>`, `<p>`, and so on.
+
+</DeepDive>
+
+### Where to get your `key` {/*where-to-get-your-key*/}
+
+Different sources of data provide different sources of keys:
+
+* **Data from a database:** If your data is coming from a database, you can use the database keys/IDs, which are unique by nature.
+* **Locally generated data:** If your data is generated and persisted locally (e.g. notes in a note-taking app), use an incrementing counter, [`crypto.randomUUID()`](https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID) or a package like [`uuid`](https://www.npmjs.com/package/uuid) when creating items.
+
+### Rules of keys {/*rules-of-keys*/}
+
+* **Keys must be unique among siblings.** However, it’s okay to use the same keys for JSX nodes in _different_ arrays.
+* **Keys must not change** or that defeats their purpose! Don't generate them while rendering.
+
+### Why does React need keys? {/*why-does-react-need-keys*/}
+
+Imagine that files on your desktop didn't have names. Instead, you'd refer to them by their order -- the first file, the second file, and so on. You could get used to it, but once you delete a file, it would get confusing. The second file would become the first file, the third file would be the second file, and so on.
+
+File names in a folder and JSX keys in an array serve a similar purpose. They let us uniquely identify an item between its siblings. A well-chosen key provides more information than the position within the array. Even if the _position_ changes due to reordering, the `key` lets React identify the item throughout its lifetime.
+
+<Pitfall>
+
+You might be tempted to use an item's index in the array as its key. In fact, that's what React will use if you don't specify a `key` at all. But the order in which you render items will change over time if an item is inserted, deleted, or if the array gets reordered. Index as a key often leads to subtle and confusing bugs.
+
+Similarly, do not generate keys on the fly, e.g. with `key={Math.random()}`. This will cause keys to never match up between renders, leading to all your components and DOM being recreated every time. Not only is this slow, but it will also lose any user input inside the list items. Instead, use a stable ID based on the data.
+
+Note that your components won't receive `key` as a prop. It's only used as a hint by React itself. If your component needs an ID, you have to pass it as a separate prop: `<Profile key={id} userId={id} />`.
+
+</Pitfall>
+
+<Recap>
+
+On this page you learned:
+
+* How to move data out of components and into data structures like arrays and objects.
+* How to generate sets of similar components with JavaScript's `map()`.
+* How to create arrays of filtered items with JavaScript's `filter()`.
+* Why and how to set `key` on each component in a collection so React can keep track of each of them even if their position or data changes.
+
+</Recap>
+
+
+
+<Challenges>
+
+#### Splitting a list in two {/*splitting-a-list-in-two*/}
+
+This example shows a list of all people.
+
+Change it to show two separate lists one after another: **Chemists** and **Everyone Else.** Like previously, you can determine whether a person is a chemist by checking if `person.profession === 'chemist'`.
+
+<Sandpack>
+
+```js App.js
+import { people } from './data.js';
+import { getImageUrl } from './utils.js';
+
+export default function List() {
+  const listItems = people.map(person =>
+    <li key={person.id}>
+      <img
+        src={getImageUrl(person)}
+        alt={person.name}
+      />
+      <p>
+        <b>{person.name}:</b>
+        {' ' + person.profession + ' '}
+        known for {person.accomplishment}
+      </p>
+    </li>
+  );
+  return (
+    <article>
+      <h1>Scientists</h1>
+      <ul>{listItems}</ul>
+    </article>
+  );
+}
+```
+
+```js data.js
+export const people = [{
+  id: 0,
+  name: 'Creola Katherine Johnson',
+  profession: 'mathematician',
+  accomplishment: 'spaceflight calculations',
+  imageId: 'MK3eW3A'
+}, {
+  id: 1,
+  name: 'Mario José Molina-Pasquel Henríquez',
+  profession: 'chemist',
+  accomplishment: 'discovery of Arctic ozone hole',
+  imageId: 'mynHUSa'
+}, {
+  id: 2,
+  name: 'Mohammad Abdus Salam',
+  profession: 'physicist',
+  accomplishment: 'electromagnetism theory',
+  imageId: 'bE7W1ji'
+}, {
+  id: 3,
+  name: 'Percy Lavon Julian',
+  profession: 'chemist',
+  accomplishment: 'pioneering cortisone drugs, steroids and birth control pills',
+  imageId: 'IOjWm71'
+}, {
+  id: 4,
+  name: 'Subrahmanyan Chandrasekhar',
+  profession: 'astrophysicist',
+  accomplishment: 'white dwarf star mass calculations',
+  imageId: 'lrWQx8l'
+}];
+```
+
+```js utils.js
+export function getImageUrl(person) {
+  return (
+    'https://i.imgur.com/' +
+    person.imageId +
+    's.jpg'
+  );
+}
+```
+
+```css
+ul { list-style-type: none; padding: 0px 10px; }
+li {
+  margin-bottom: 10px;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 20px;
+  align-items: center;
+}
+img { width: 100px; height: 100px; border-radius: 50%; }
+```
+
+</Sandpack>
+
+<Solution>
+
+You could use `filter()` twice, creating two separate arrays, and then `map` over both of them:
+
+<Sandpack>
+
+```js App.js
+import { people } from './data.js';
+import { getImageUrl } from './utils.js';
+
+export default function List() {
+  const chemists = people.filter(person =>
+    person.profession === 'chemist'
+  );
+  const everyoneElse = people.filter(person =>
+    person.profession !== 'chemist'
+  );
+  return (
+    <article>
+      <h1>Scientists</h1>
+      <h2>Chemists</h2>
+      <ul>
+        {chemists.map(person =>
+          <li key={person.id}>
+            <img
+              src={getImageUrl(person)}
+              alt={person.name}
+            />
+            <p>
+              <b>{person.name}:</b>
+              {' ' + person.profession + ' '}
+              known for {person.accomplishment}
+            </p>
+          </li>
+        )}
+      </ul>
+      <h2>Everyone Else</h2>
+      <ul>
+        {everyoneElse.map(person =>
+          <li key={person.id}>
+            <img
+              src={getImageUrl(person)}
+              alt={person.name}
+            />
+            <p>
+              <b>{person.name}:</b>
+              {' ' + person.profession + ' '}
+              known for {person.accomplishment}
+            </p>
+          </li>
+        )}
+      </ul>
+    </article>
+  );
+}
+```
+
+```js data.js
+export const people = [{
+  id: 0,
+  name: 'Creola Katherine Johnson',
+  profession: 'mathematician',
+  accomplishment: 'spaceflight calculations',
+  imageId: 'MK3eW3A'
+}, {
+  id: 1,
+  name: 'Mario José Molina-Pasquel Henríquez',
+  profession: 'chemist',
+  accomplishment: 'discovery of Arctic ozone hole',
+  imageId: 'mynHUSa'
+}, {
+  id: 2,
+  name: 'Mohammad Abdus Salam',
+  profession: 'physicist',
+  accomplishment: 'electromagnetism theory',
+  imageId: 'bE7W1ji'
+}, {
+  id: 3,
+  name: 'Percy Lavon Julian',
+  profession: 'chemist',
+  accomplishment: 'pioneering cortisone drugs, steroids and birth control pills',
+  imageId: 'IOjWm71'
+}, {
+  id: 4,
+  name: 'Subrahmanyan Chandrasekhar',
+  profession: 'astrophysicist',
+  accomplishment: 'white dwarf star mass calculations',
+  imageId: 'lrWQx8l'
+}];
+```
+
+```js utils.js
+export function getImageUrl(person) {
+  return (
+    'https://i.imgur.com/' +
+    person.imageId +
+    's.jpg'
+  );
+}
+```
+
+```css
+ul { list-style-type: none; padding: 0px 10px; }
+li {
+  margin-bottom: 10px;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 20px;
+  align-items: center;
+}
+img { width: 100px; height: 100px; border-radius: 50%; }
+```
+
+</Sandpack>
+
+In this solution, the `map` calls are placed directly inline into the parent `<ul>` elements, but you could introduce variables for them if you find that more readable.
+
+There is still a bit duplication between the rendered lists. You can go further and extract the repetitive parts into a `<ListSection>` component:
+
+<Sandpack>
+
+```js App.js
+import { people } from './data.js';
+import { getImageUrl } from './utils.js';
+
+function ListSection({ title, people }) {
+  return (
+    <>
+      <h2>{title}</h2>
+      <ul>
+        {people.map(person =>
+          <li key={person.id}>
+            <img
+              src={getImageUrl(person)}
+              alt={person.name}
+            />
+            <p>
+              <b>{person.name}:</b>
+              {' ' + person.profession + ' '}
+              known for {person.accomplishment}
+            </p>
+          </li>
+        )}
+      </ul>
+    </>
+  );
+}
+
+export default function List() {
+  const chemists = people.filter(person =>
+    person.profession === 'chemist'
+  );
+  const everyoneElse = people.filter(person =>
+    person.profession !== 'chemist'
+  );
+  return (
+    <article>
+      <h1>Scientists</h1>
+      <ListSection
+        title="Chemists"
+        people={chemists}
+      />
+      <ListSection
+        title="Everyone Else"
+        people={everyoneElse}
+      />
+    </article>
+  );
+}
+```
+
+```js data.js
+export const people = [{
+  id: 0,
+  name: 'Creola Katherine Johnson',
+  profession: 'mathematician',
+  accomplishment: 'spaceflight calculations',
+  imageId: 'MK3eW3A'
+}, {
+  id: 1,
+  name: 'Mario José Molina-Pasquel Henríquez',
+  profession: 'chemist',
+  accomplishment: 'discovery of Arctic ozone hole',
+  imageId: 'mynHUSa'
+}, {
+  id: 2,
+  name: 'Mohammad Abdus Salam',
+  profession: 'physicist',
+  accomplishment: 'electromagnetism theory',
+  imageId: 'bE7W1ji'
+}, {
+  id: 3,
+  name: 'Percy Lavon Julian',
+  profession: 'chemist',
+  accomplishment: 'pioneering cortisone drugs, steroids and birth control pills',
+  imageId: 'IOjWm71'
+}, {
+  id: 4,
+  name: 'Subrahmanyan Chandrasekhar',
+  profession: 'astrophysicist',
+  accomplishment: 'white dwarf star mass calculations',
+  imageId: 'lrWQx8l'
+}];
+```
+
+```js utils.js
+export function getImageUrl(person) {
+  return (
+    'https://i.imgur.com/' +
+    person.imageId +
+    's.jpg'
+  );
+}
+```
+
+```css
+ul { list-style-type: none; padding: 0px 10px; }
+li {
+  margin-bottom: 10px;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 20px;
+  align-items: center;
+}
+img { width: 100px; height: 100px; border-radius: 50%; }
+```
+
+</Sandpack>
+
+A very attentive reader might notice that with two `filter` calls, we check each person's profession twice. Checking a property is very fast, so in this example it's fine. If your logic was more expensive than that, you could replace the `filter` calls with a loop that manually constructs the arrays and checks each person once.
+
+In fact, if `people` never change, you could move this code out of your component. From React's perspective, all that matters is that you give it an array of JSX nodes in the end. It doesn't care how you produce that array:
+
+<Sandpack>
+
+```js App.js
+import { people } from './data.js';
+import { getImageUrl } from './utils.js';
+
+let chemists = [];
+let everyoneElse = [];
+people.forEach(person => {
+  if (person.profession === 'chemist') {
+    chemists.push(person);
+  } else {
+    everyoneElse.push(person);
+  }
+});
+
+function ListSection({ title, people }) {
+  return (
+    <>
+      <h2>{title}</h2>
+      <ul>
+        {people.map(person =>
+          <li key={person.id}>
+            <img
+              src={getImageUrl(person)}
+              alt={person.name}
+            />
+            <p>
+              <b>{person.name}:</b>
+              {' ' + person.profession + ' '}
+              known for {person.accomplishment}
+            </p>
+          </li>
+        )}
+      </ul>
+    </>
+  );
+}
+
+export default function List() {
+  return (
+    <article>
+      <h1>Scientists</h1>
+      <ListSection
+        title="Chemists"
+        people={chemists}
+      />
+      <ListSection
+        title="Everyone Else"
+        people={everyoneElse}
+      />
+    </article>
+  );
+}
+```
+
+```js data.js
+export const people = [{
+  id: 0,
+  name: 'Creola Katherine Johnson',
+  profession: 'mathematician',
+  accomplishment: 'spaceflight calculations',
+  imageId: 'MK3eW3A'
+}, {
+  id: 1,
+  name: 'Mario José Molina-Pasquel Henríquez',
+  profession: 'chemist',
+  accomplishment: 'discovery of Arctic ozone hole',
+  imageId: 'mynHUSa'
+}, {
+  id: 2,
+  name: 'Mohammad Abdus Salam',
+  profession: 'physicist',
+  accomplishment: 'electromagnetism theory',
+  imageId: 'bE7W1ji'
+}, {
+  id: 3,
+  name: 'Percy Lavon Julian',
+  profession: 'chemist',
+  accomplishment: 'pioneering cortisone drugs, steroids and birth control pills',
+  imageId: 'IOjWm71'
+}, {
+  id: 4,
+  name: 'Subrahmanyan Chandrasekhar',
+  profession: 'astrophysicist',
+  accomplishment: 'white dwarf star mass calculations',
+  imageId: 'lrWQx8l'
+}];
+```
+
+```js utils.js
+export function getImageUrl(person) {
+  return (
+    'https://i.imgur.com/' +
+    person.imageId +
+    's.jpg'
+  );
+}
+```
+
+```css
+ul { list-style-type: none; padding: 0px 10px; }
+li {
+  margin-bottom: 10px;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 20px;
+  align-items: center;
+}
+img { width: 100px; height: 100px; border-radius: 50%; }
+```
+
+</Sandpack>
+
+</Solution>
+
+#### Nested lists in one component {/*nested-lists-in-one-component*/}
+
+Make a list of recipes from this array! For each recipe in the array, display its name as an `<h2>` and list its ingredients in a `<ul>`.
+
+<Hint>
+
+This will require nesting two different `map` calls.
+
+</Hint>
+
+<Sandpack>
+
+```js App.js
+import { recipes } from './data.js';
+
+export default function RecipeList() {
+  return (
+    <div>
+      <h1>Recipes</h1>
+    </div>
+  );
+}
+```
+
+```js data.js
+export const recipes = [{
+  id: 'greek-salad',
+  name: 'Greek Salad',
+  ingredients: ['tomatoes', 'cucumber', 'onion', 'olives', 'feta']
+}, {
+  id: 'hawaiian-pizza',
+  name: 'Hawaiian Pizza',
+  ingredients: ['pizza crust', 'pizza sauce', 'mozzarella', 'ham', 'pineapple']
+}, {
+  id: 'hummus',
+  name: 'Hummus',
+  ingredients: ['chickpeas', 'olive oil', 'garlic cloves', 'lemon', 'tahini']
+}];
+```
+
+</Sandpack>
+
+<Solution>
+
+Here is one way you could go about it:
+
+<Sandpack>
+
+```js App.js
+import { recipes } from './data.js';
+
+export default function RecipeList() {
+  return (
+    <div>
+      <h1>Recipes</h1>
+      {recipes.map(recipe =>
+        <div key={recipe.id}>
+          <h2>{recipe.name}</h2>
+          <ul>
+            {recipe.ingredients.map(ingredient =>
+              <li key={ingredient}>
+                {ingredient}
+              </li>
+            )}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}
+```
+
+```js data.js
+export const recipes = [{
+  id: 'greek-salad',
+  name: 'Greek Salad',
+  ingredients: ['tomatoes', 'cucumber', 'onion', 'olives', 'feta']
+}, {
+  id: 'hawaiian-pizza',
+  name: 'Hawaiian Pizza',
+  ingredients: ['pizza crust', 'pizza sauce', 'mozzarella', 'ham', 'pineapple']
+}, {
+  id: 'hummus',
+  name: 'Hummus',
+  ingredients: ['chickpeas', 'olive oil', 'garlic cloves', 'lemon', 'tahini']
+}];
+```
+
+</Sandpack>
+
+Each of the `recipes` already includes an `id` field, so that's what the outer loop uses for its `key`. There is no ID you could use to loop over ingredients. However, it's reasonable to assume that the same ingredient won't be listed twice within the same recipe, so its name can serve as a `key`. Alternatively, you could change the data structure to add IDs, or use index as a `key` (with the caveat that you can't safely reorder ingredients).
+
+</Solution>
+
+#### Extracting a list item component {/*extracting-a-list-item-component*/}
+
+This `RecipeList` component contains two nested `map` calls. To simplify it, extract a `Recipe` component from it which will accept `id`, `name`, and `ingredients` props. Where do you place the outer `key` and why?
+
+<Sandpack>
+
+```js App.js
+import { recipes } from './data.js';
+
+export default function RecipeList() {
+  return (
+    <div>
+      <h1>Recipes</h1>
+      {recipes.map(recipe =>
+        <div key={recipe.id}>
+          <h2>{recipe.name}</h2>
+          <ul>
+            {recipe.ingredients.map(ingredient =>
+              <li key={ingredient}>
+                {ingredient}
+              </li>
+            )}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}
+```
+
+```js data.js
+export const recipes = [{
+  id: 'greek-salad',
+  name: 'Greek Salad',
+  ingredients: ['tomatoes', 'cucumber', 'onion', 'olives', 'feta']
+}, {
+  id: 'hawaiian-pizza',
+  name: 'Hawaiian Pizza',
+  ingredients: ['pizza crust', 'pizza sauce', 'mozzarella', 'ham', 'pineapple']
+}, {
+  id: 'hummus',
+  name: 'Hummus',
+  ingredients: ['chickpeas', 'olive oil', 'garlic cloves', 'lemon', 'tahini']
+}];
+```
+
+</Sandpack>
+
+<Solution>
+
+You can copy-paste the JSX from the outer `map` into a new `Recipe` component and return that JSX. Then you can change `recipe.name` to `name`, `recipe.id` to `id`, and so on, and pass them as props to the `Recipe`:
+
+<Sandpack>
+
+```js
+import { recipes } from './data.js';
+
+function Recipe({ id, name, ingredients }) {
+  return (
+    <div>
+      <h2>{name}</h2>
+      <ul>
+        {ingredients.map(ingredient =>
+          <li key={ingredient}>
+            {ingredient}
+          </li>
+        )}
+      </ul>
+    </div>
+  );
+}
+
+export default function RecipeList() {
+  return (
+    <div>
+      <h1>Recipes</h1>
+      {recipes.map(recipe =>
+        <Recipe {...recipe} key={recipe.id} />
+      )}
+    </div>
+  );
+}
+```
+
+```js data.js
+export const recipes = [{
+  id: 'greek-salad',
+  name: 'Greek Salad',
+  ingredients: ['tomatoes', 'cucumber', 'onion', 'olives', 'feta']
+}, {
+  id: 'hawaiian-pizza',
+  name: 'Hawaiian Pizza',
+  ingredients: ['pizza crust', 'pizza sauce', 'mozzarella', 'ham', 'pineapple']
+}, {
+  id: 'hummus',
+  name: 'Hummus',
+  ingredients: ['chickpeas', 'olive oil', 'garlic cloves', 'lemon', 'tahini']
+}];
+```
+
+</Sandpack>
+
+Here, `<Recipe {...recipe} key={recipe.id} />` is a syntax shortcut saying "pass all properties of the `recipe` object as props to the `Recipe` component". You could also write each prop explicitly: `<Recipe id={recipe.id} name={recipe.name} ingredients={recipe.ingredients} key={recipe.id} />`.
+
+**Note that the `key` is specified on the `<Recipe>` itself rather than on the root `<div>` returned from `Recipe`.** This is because this `key` is needed directly within the context of the surrounding array. Previously, you had an array of `<div>`s so each of them needed a `key`, but now you have an array of `<Recipe>`s. In other words, when you extract a component, don't forget to leave the `key` outside the JSX you copy and paste.
+
+</Solution>
+
+#### List with a separator {/*list-with-a-separator*/}
+
+This example renders a famous haiku by Katsushika Hokusai, with each line wrapped in a `<p>` tag. Your job is to insert an `<hr />` separator between each paragraph. Your resulting structure should look like this:
+
+```js
+<article>
+  <p>I write, erase, rewrite</p>
+  <hr />
+  <p>Erase again, and then</p>
+  <hr />
+  <p>A poppy blooms.</p>
+</article>
+```
+
+A haiku only contains three lines, but your solution should work with any number of lines. Note that `<hr />` elements only appear *between* the `<p>` elements, not in the beginning or the end!
+
+<Sandpack>
+
+```js
+const poem = {
+  lines: [
+    'I write, erase, rewrite',
+    'Erase again, and then',
+    'A poppy blooms.'
+  ]
+};
+
+export default function Poem() {
+  return (
+    <article>
+      {poem.lines.map((line, index) =>
+        <p key={index}>
+          {line}
+        </p>
+      )}
+    </article>
+  );
+}
+```
+
+```css
+body {
+  text-align: center;
+}
+p {
+  font-family: Georgia, serif;
+  font-size: 20px;
+  font-style: italic;
+}
+hr {
+  margin: 0 120px 0 120px;
+  border: 1px dashed #45c3d8;
+}
+```
+
+</Sandpack>
+
+(This is a rare case where index as a key is acceptable because a poem's lines will never reorder.)
+
+<Hint>
+
+You'll either need to convert `map` to a manual loop, or use a fragment.
+
+</Hint>
+
+<Solution>
+
+You can write a manual loop, inserting `<hr />` and `<p>...</p>` into the output array as you go:
+
+<Sandpack>
+
+```js
+const poem = {
+  lines: [
+    'I write, erase, rewrite',
+    'Erase again, and then',
+    'A poppy blooms.'
+  ]
+};
+
+export default function Poem() {
+  let output = [];
+
+  // Fill the output array
+  poem.lines.forEach((line, i) => {
+    output.push(
+      <hr key={i + '-separator'} />
+    );
+    output.push(
+      <p key={i + '-text'}>
+        {line}
+      </p>
+    );
+  });
+  // Remove the first <hr />
+  output.shift();
+
+  return (
+    <article>
+      {output}
+    </article>
+  );
+}
+```
+
+```css
+body {
+  text-align: center;
+}
+p {
+  font-family: Georgia, serif;
+  font-size: 20px;
+  font-style: italic;
+}
+hr {
+  margin: 0 120px 0 120px;
+  border: 1px dashed #45c3d8;
+}
+```
+
+</Sandpack>
+
+Using the original line index as a `key` doesn't work anymore because each separator and paragraph are now in the same array. However, you can give each of them a distinct key using a suffix, e.g. `key={i + '-text'}`.
+
+Alternatively, you could render a collection of fragments which contain `<hr />` and `<p>...</p>`. However, the `<>...</>` shorthand syntax doesn't support passing keys, so you'd have to write `<Fragment>` explicitly:
+
+<Sandpack>
+
+```js
+import React, { Fragment } from 'react';
+
+const poem = {
+  lines: [
+    'I write, erase, rewrite',
+    'Erase again, and then',
+    'A poppy blooms.'
+  ]
+};
+
+export default function Poem() {
+  return (
+    <article>
+      {poem.lines.map((line, i) =>
+        <Fragment key={i}>
+          {i > 0 && <hr />}
+          <p>{line}</p>
+        </Fragment>
+      )}
+    </article>
+  );
+}
+```
+
+```css
+body {
+  text-align: center;
+}
+p {
+  font-family: Georgia, serif;
+  font-size: 20px;
+  font-style: italic;
+}
+hr {
+  margin: 0 120px 0 120px;
+  border: 1px dashed #45c3d8;
+}
+```
+
+</Sandpack>
+
+Remember, fragments (often written as `<> </>`) let you group JSX nodes without adding extra `<div>`s!
+
+</Solution>
+
+</Challenges>
diff --git a/beta/src/content/learn/responding-to-events.md b/beta/src/content/learn/responding-to-events.md
new file mode 100644
index 000000000..2bf26bded
--- /dev/null
+++ b/beta/src/content/learn/responding-to-events.md
@@ -0,0 +1,735 @@
+---
+title: Responding to Events
+---
+
+<Intro>
+
+React lets you add *event handlers* to your JSX. Event handlers are your own functions that will be triggered in response to interactions like clicking, hovering, focusing form inputs, and so on.
+
+</Intro>
+
+<YouWillLearn>
+
+* Different ways to write an event handler
+* How to pass event handling logic from a parent component
+* How events propagate and how to stop them
+
+</YouWillLearn>
+
+## Adding event handlers {/*adding-event-handlers*/}
+
+To add an event handler, you will first define a function and then [pass it as a prop](/learn/passing-props-to-a-component) to the appropriate JSX tag. For example, here is a button that doesn't do anything yet:
+
+<Sandpack>
+
+```js
+export default function Button() {
+  return (
+    <button>
+      I don't do anything
+    </button>
+  );
+}
+```
+
+</Sandpack>
+
+You can make it show a message when a user clicks by following these three steps:
+
+1. Declare a function called `handleClick` *inside* your `Button` component.
+2. Implement the logic inside that function (use `alert` to show the message).
+3. Add `onClick={handleClick}` to the `<button>` JSX.
+
+<Sandpack>
+
+```js
+export default function Button() {
+  function handleClick() {
+    alert('You clicked me!');
+  }
+
+  return (
+    <button onClick={handleClick}>
+      Click me
+    </button>
+  );
+}
+```
+
+```css
+button { margin-right: 10px; }
+```
+
+</Sandpack>
+
+You defined the `handleClick` function and then [passed it as a prop](/learn/passing-props-to-a-component) to `<button>`.  `handleClick` is an **event handler.** Event handler functions:
+
+* Are usually defined *inside* your components.
+* Have names that start with `handle`, followed by the name of the event.
+
+> By convention, it is common to name event handlers as `handle` followed by the event name. You'll often see `onClick={handleClick}`, `onMouseEnter={handleMouseEnter}`, and so on.
+
+Alternatively, you can define an event handler inline in the JSX:
+
+```jsx
+<button onClick={function handleClick() {
+  alert('You clicked me!');
+}}>
+```
+
+Or, more concisely, using an arrow function:
+
+```jsx
+<button onClick={() => {
+  alert('You clicked me!');
+}}>
+```
+
+All of these styles are equivalent. Inline event handlers are convenient for short functions.
+
+<Pitfall>
+
+Functions passed to event handlers must be passed, not called. For example:
+
+| passing a function (correct)     | calling a function (incorrect)     |
+| -------------------------------- | ---------------------------------- |
+| `<button onClick={handleClick}>` | `<button onClick={handleClick()}>` |
+
+The difference is subtle. In the first example, the `handleClick` function is passed as an `onClick` event handler. This tells React to remember it and only call your function when the user clicks the button.
+
+In the second example, the `()` at the end of `handleClick()` fires the function *immediately* during [rendering](/learn/render-and-commit), without any clicks. This is because JavaScript inside the [JSX `{` and `}`](/learn/javascript-in-jsx-with-curly-braces) executes right away.
+
+When you write code inline, the same pitfall presents itself in a different way:
+
+| passing a function (correct)            | calling a function (incorrect)    |
+| --------------------------------------- | --------------------------------- |
+| `<button onClick={() => alert('...')}>` | `<button onClick={alert('...')}>` |
+
+
+Passing inline code like this won't fire on click—it fires every time the component renders:
+
+```jsx
+// This alert fires when the component renders, not when clicked!
+<button onClick={alert('You clicked me!')}>
+```
+
+If you want to define your event handler inline, wrap it in an anonymous function like so:
+
+```jsx
+<button onClick={() => alert('You clicked me!')}>
+```
+
+Rather than executing the code inside with every render, this creates a function to be called later.
+
+In both cases, what you want to pass is a function:
+
+* `<button onClick={handleClick}>` passes the `handleClick` function.
+* `<button onClick={() => alert('...')}>` passes the `() => alert('...')` function.
+
+> [Read more about arrow functions.](https://javascript.info/arrow-functions-basics)
+
+</Pitfall>
+
+### Reading props in event handlers {/*reading-props-in-event-handlers*/}
+
+Because event handlers are declared inside of a component, they have access to the component's props. Here is a button that, when clicked, shows an alert with its `message` prop:
+
+<Sandpack>
+
+```js
+function AlertButton({ message, children }) {
+  return (
+    <button onClick={() => alert(message)}>
+      {children}
+    </button>
+  );
+}
+
+export default function Toolbar() {
+  return (
+    <div>
+      <AlertButton message="Playing!">
+        Play Movie
+      </AlertButton>
+      <AlertButton message="Uploading!">
+        Upload Image
+      </AlertButton>
+    </div>
+  );
+}
+```
+
+```css
+button { margin-right: 10px; }
+```
+
+</Sandpack>
+
+This lets these two buttons show different messages. Try changing the messages passed to them.
+
+### Passing event handlers as props {/*passing-event-handlers-as-props*/}
+
+Often you'll want the parent component to specify a child's event handler. Consider buttons: depending on where you're using a `Button` component, you might want to execute a different function—perhaps one plays a movie and another uploads an image. 
+
+To do this, pass a prop the component receives from its parent as the event handler like so:
+
+<Sandpack>
+
+```js
+function Button({ onClick, children }) {
+  return (
+    <button onClick={onClick}>
+      {children}
+    </button>
+  );
+}
+
+function PlayButton({ movieName }) {
+  function handlePlayClick() {
+    alert(`Playing ${movieName}!`);
+  }
+
+  return (
+    <Button onClick={handlePlayClick}>
+      Play "{movieName}"
+    </Button>
+  );
+}
+
+function UploadButton() {
+  return (
+    <Button onClick={() => alert('Uploading!')}>
+      Upload Image
+    </Button>
+  );
+}
+
+export default function Toolbar() {
+  return (
+    <div>
+      <PlayButton movieName="Kiki's Delivery Service" />
+      <UploadButton />
+    </div>
+  );
+}
+```
+
+```css
+button { margin-right: 10px; }
+```
+
+</Sandpack>
+
+Here, the `Toolbar` component renders a `PlayButton` and an `UploadButton`:
+
+- `PlayButton` passes `handlePlayClick` as the `onClick` prop to the `Button` inside.
+- `UploadButton` passes `() => alert('Uploading!')` as the `onClick` prop to the `Button` inside.
+
+Finally, your `Button` component accepts a prop called `onClick`. It passes that prop directly to the built-in browser `<button>` with `onClick={onClick}`. This tells React to call the passed function on click.
+
+If you use a [design system](https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969), it's common for components like buttons to contain styling but not specify behavior. Instead, components like `PlayButton` and `UploadButton` will pass event handlers down.
+
+### Naming event handler props {/*naming-event-handler-props*/}
+
+Built-in components like `<button>` and `<div>` only support [browser event names](TODO:/apis/react-dom/events) like `onClick`. However, when you're building your own components, you can name their event handler props any way that you like.
+
+> By convention, event handler props should start with `on`, followed by a capital letter.
+
+For example, the `Button` component's `onClick` prop could have been called `onSmash`:
+
+<Sandpack>
+
+```js
+function Button({ onSmash, children }) {
+  return (
+    <button onClick={onSmash}>
+      {children}
+    </button>
+  );
+}
+
+export default function App() {
+  return (
+    <div>
+      <Button onSmash={() => alert('Playing!')}>
+        Play Movie
+      </Button>
+      <Button onSmash={() => alert('Uploading!')}>
+        Upload Image
+      </Button>
+    </div>
+  );
+}
+```
+
+```css
+button { margin-right: 10px; }
+```
+
+</Sandpack>
+
+In this example, `<button onClick={onSmash}>` shows that the browser `<button>` (lowercase) still needs a prop called `onClick`, but the prop name received by your custom `Button` component is up to you!
+
+When your component supports multiple interactions, you might name event handler props for app-specific concepts. For example, this `Toolbar` component receives `onPlayMovie` and `onUploadImage` event handlers:
+
+<Sandpack>
+
+```js
+export default function App() {
+  return (
+    <Toolbar
+      onPlayMovie={() => alert('Playing!')}
+      onUploadImage={() => alert('Uploading!')}
+    />
+  );
+}
+
+function Toolbar({ onPlayMovie, onUploadImage }) {
+  return (
+    <div>
+      <Button onClick={onPlayMovie}>
+        Play Movie
+      </Button>
+      <Button onClick={onUploadImage}>
+        Upload Image
+      </Button>
+    </div>
+  );
+}
+
+function Button({ onClick, children }) {
+  return (
+    <button onClick={onClick}>
+      {children}
+    </button>
+  );
+}
+```
+
+```css
+button { margin-right: 10px; }
+```
+
+</Sandpack>
+
+Notice how the `App` component does not need to know *what* `Toolbar` will do with `onPlayMovie` or `onUploadImage`. That's an implementation detail of the `Toolbar`. Here, `Toolbar` passes them down as `onClick` handlers to its `Button`s, but it could later also trigger them on a keyboard shortcut. Naming props after app-specific interactions like `onPlayMovie` gives you the flexibility to change how they're used later.
+
+## Event propagation {/*event-propagation*/}
+
+Event handlers will also catch events from any children your component might have. We say that an event "bubbles" or "propagates" up the tree: it starts with where the event happened, and then goes up the tree.
+
+This `<div>` contains two buttons. Both the `<div>` *and* each button have their own `onClick` handlers. Which handlers do you think will fire when you click a button?
+
+<Sandpack>
+
+```js
+export default function Toolbar() {
+  return (
+    <div className="Toolbar" onClick={() => {
+      alert('You clicked on the toolbar!');
+    }}>
+      <button onClick={() => alert('Playing!')}>
+        Play Movie
+      </button>
+      <button onClick={() => alert('Uploading!')}>
+        Upload Image
+      </button>
+    </div>
+  );
+}
+```
+
+```css
+.Toolbar {
+  background: #aaa;
+  padding: 5px;
+}
+button { margin: 5px; }
+```
+
+</Sandpack>
+
+If you click on either button, its `onClick` will run first, followed by the parent `<div>`'s `onClick`. So two messages will appear. If you click the toolbar itself, only the parent `<div>`'s `onClick` will run.
+
+<Pitfall>
+
+All events propagate in React except `onScroll`, which only works on the JSX tag you attach it to.
+
+</Pitfall>
+
+### Stopping propagation {/*stopping-propagation*/}
+
+Event handlers receive an **event object** as their only argument. By convention, it's usually called `e`, which stands for "event". You can use this object to read information about the event.
+
+That event object also lets you stop the propagation. If you want to prevent an event from reaching parent components, you need to call `e.stopPropagation()` like this `Button` component does:
+
+<Sandpack>
+
+```js
+function Button({ onClick, children }) {
+  return (
+    <button onClick={e => {
+      e.stopPropagation();
+      onClick();
+    }}>
+      {children}
+    </button>
+  );
+}
+
+export default function Toolbar() {
+  return (
+    <div className="Toolbar" onClick={() => {
+      alert('You clicked on the toolbar!');
+    }}>
+      <Button onClick={() => alert('Playing!')}>
+        Play Movie
+      </Button>
+      <Button onClick={() => alert('Uploading!')}>
+        Upload Image
+      </Button>
+    </div>
+  );
+}
+```
+
+```css
+.Toolbar {
+  background: #aaa;
+  padding: 5px;
+}
+button { margin: 5px; }
+```
+
+</Sandpack>
+
+When you click on a button:
+
+1. React calls the `onClick` handler passed to `<button>`. 
+2. That handler, defined in `Button`, does the following:
+   * Calls `e.stopPropagation()`, preventing the event from bubbling further.
+   * Calls the `onClick` function, which is a prop passed from the `Toolbar` component.
+3. That function, defined in the `Toolbar` component, displays the button's own alert.
+4. Since the propagation was stopped, the parent `<div>`'s `onClick` handler does *not* run.
+
+As a result of `e.stopPropagation()`, clicking on the buttons now only shows a single alert (from the `<button>`) rather than the two of them (from the `<button>` and the parent toolbar `<div>`). Clicking a button is not the same thing as clicking the surrounding toolbar, so stopping the propagation makes sense for this UI.
+
+<DeepDive>
+
+#### Capture phase events {/*capture-phase-events*/}
+
+In rare cases, you might need to catch all events on child elements, *even if they stopped propagation*. For example, maybe you want to log every click to analytics, regardless of the propagation logic. You can do this by adding `Capture` at the end of the event name:
+
+```js
+<div onClickCapture={() => { /* this runs first */ }}>
+  <button onClick={e => e.stopPropagation()} />
+  <button onClick={e => e.stopPropagation()} />
+</div>
+```
+
+Each event propagates in three phases: 
+
+1. It travels down, calling all `onClickCapture` handlers.
+2. It runs the clicked element's `onClick` handler. 
+3. It travels upwards, calling all `onClick` handlers.
+
+Capture events are useful for code like routers or analytics, but you probably won't use them in app code.
+
+</DeepDive>
+
+### Passing handlers as alternative to propagation {/*passing-handlers-as-alternative-to-propagation*/}
+
+Notice how this click handler runs a line of code _and then_ calls the `onClick` prop passed by the parent:
+
+```js {4,5}
+function Button({ onClick, children }) {
+  return (
+    <button onClick={e => {
+      e.stopPropagation();
+      onClick();
+    }}>
+      {children}
+    </button>
+  );
+}
+```
+
+You could add more code to this handler before calling the parent `onClick` event handler, too. This pattern provides an *alternative* to propagation. It lets the child component handle the event, while also letting the parent component specify some additional behavior. Unlike propagation, it's not automatic. But the benefit of this pattern is that you can clearly follow the whole chain code that executes as a result of some event.
+
+If you rely on propagation and it's difficult to trace which handlers execute and why, try this approach instead.
+
+### Preventing default behavior {/*preventing-default-behavior*/}
+
+Some browser events have default behavior associated with them. For example, a `<form>` submit event, which happens when a button inside of it is clicked, will reload the whole page by default:
+
+<Sandpack>
+
+```js
+export default function Signup() {
+  return (
+    <form onSubmit={() => alert('Submitting!')}>
+      <input />
+      <button>Send</button>
+    </form>
+  );
+}
+```
+
+```css
+button { margin-left: 5px; }
+```
+
+</Sandpack>
+
+You can call `e.preventDefault()` on the event object to stop this from happening:
+
+<Sandpack>
+
+```js
+export default function Signup() {
+  return (
+    <form onSubmit={e => {
+      e.preventDefault();
+      alert('Submitting!');
+    }}>
+      <input />
+      <button>Send</button>
+    </form>
+  );
+}
+```
+
+```css
+button { margin-left: 5px; }
+```
+
+</Sandpack>
+
+Don't confuse `e.stopPropagation()` and `e.preventDefault()`. They are both useful, but are unrelated:
+
+* [`e.stopPropagation()`](https://developer.mozilla.org/docs/Web/API/Event/stopPropagation) stops the event handlers attached to the tags above from firing.
+* [`e.preventDefault()` ](https://developer.mozilla.org/docs/Web/API/Event/preventDefault) prevents the default browser behavior for the few events that have it.
+
+## Can event handlers have side effects? {/*can-event-handlers-have-side-effects*/}
+
+Absolutely! Event handlers are the best place for side effects.
+
+Unlike rendering functions, event handlers don't need to be [pure](/learn/keeping-components-pure), so it's a great place to *change* something—for example, change an input's value in response to typing, or change a list in response to a button press. However, in order to change some information, you first need some way to store it. In React, this is done by using [state, a component's memory.](/learn/state-a-components-memory) You will learn all about it on the next page.
+
+<Recap>
+
+* You can handle events by passing a function as a prop to an element like `<button>`.
+* Event handlers must be passed, **not called!** `onClick={handleClick}`, not `onClick={handleClick()}`.
+* You can define an event handler function separately or inline.
+* Event handlers are defined inside a component, so they can access props.
+* You can declare an event handler in a parent and pass it as a prop to a child.
+* You can define your own event handler props with application-specific names.
+* Events propagate upwards. Call `e.stopPropagation()` on the first argument to prevent that.
+* Events may have unwanted default browser behavior. Call `e.preventDefault()` to prevent that.
+* Explicitly calling an event handler prop from a child handler is a good alternative to propagation.
+
+</Recap>
+
+
+
+<Challenges>
+
+#### Fix an event handler {/*fix-an-event-handler*/}
+
+Clicking this button is supposed to switch the page background between white and black. However, nothing happens when you click it. Fix the problem. (Don't worry about the logic inside `handleClick`—that part is fine.)
+
+<Sandpack>
+
+```js
+export default function LightSwitch() {
+  function handleClick() {
+    let bodyStyle = document.body.style;
+    if (bodyStyle.backgroundColor === 'black') {
+      bodyStyle.backgroundColor = 'white';
+    } else {
+      bodyStyle.backgroundColor = 'black';
+    }
+  }
+
+  return (
+    <button onClick={handleClick()}>
+      Toggle the lights
+    </button>
+  );
+}
+```
+
+</Sandpack>
+
+<Solution>
+
+The problem is that `<button onClick={handleClick()}>` _calls_ the `handleClick` function while rendering instead of _passing_ it. Removing the `()` call so that it's `<button onClick={handleClick}>` fixes the issue:
+
+<Sandpack>
+
+```js
+export default function LightSwitch() {
+  function handleClick() {
+    let bodyStyle = document.body.style;
+    if (bodyStyle.backgroundColor === 'black') {
+      bodyStyle.backgroundColor = 'white';
+    } else {
+      bodyStyle.backgroundColor = 'black';
+    }
+  }
+
+  return (
+    <button onClick={handleClick}>
+      Toggle the lights
+    </button>
+  );
+}
+```
+
+</Sandpack>
+
+Alternatively, you could wrap the call into another function, like `<button onClick={() => handleClick()}>`:
+
+<Sandpack>
+
+```js
+export default function LightSwitch() {
+  function handleClick() {
+    let bodyStyle = document.body.style;
+    if (bodyStyle.backgroundColor === 'black') {
+      bodyStyle.backgroundColor = 'white';
+    } else {
+      bodyStyle.backgroundColor = 'black';
+    }
+  }
+
+  return (
+    <button onClick={() => handleClick()}>
+      Toggle the lights
+    </button>
+  );
+}
+```
+
+</Sandpack>
+
+</Solution>
+
+#### Wire up the events {/*wire-up-the-events*/}
+
+This `ColorSwitch` component renders a button. It's supposed to change the page color. Wire it up to the `onChangeColor` event handler prop it receives from the parent so that clicking the button changes the color.
+
+After you do this, notice that clicking the button also increments the page click counter. Your colleague who wrote the parent component insists that `onChangeColor` does not increment any counters. What else might be happening? Fix it so that clicking the button *only* changes the color, and does _not_ increment the counter.
+
+<Sandpack>
+
+```js ColorSwitch.js active
+export default function ColorSwitch({
+  onChangeColor
+}) {
+  return (
+    <button>
+      Change color
+    </button>
+  );
+}
+```
+
+```js App.js hidden
+import { useState } from 'react';
+import ColorSwitch from './ColorSwitch.js';
+
+export default function App() {
+  const [clicks, setClicks] = useState(0);
+
+  function handleClickOutside() {
+    setClicks(c => c + 1);
+  }
+
+  function getRandomLightColor() {
+    let r = 150 + Math.round(100 * Math.random());
+    let g = 150 + Math.round(100 * Math.random());
+    let b = 150 + Math.round(100 * Math.random());
+    return `rgb(${r}, ${g}, ${b})`;
+  }
+
+  function handleChangeColor() {
+    let bodyStyle = document.body.style;
+    bodyStyle.backgroundColor = getRandomLightColor();
+  }
+
+  return (
+    <div style={{ width: '100%', height: '100%' }} onClick={handleClickOutside}>
+      <ColorSwitch onChangeColor={handleChangeColor} />
+      <br />
+      <br />
+      <h2>Clicks on the page: {clicks}</h2>
+    </div>
+  );
+}
+```
+
+</Sandpack>
+
+<Solution>
+
+First, you need to add the event handler, like `<button onClick={onChangeColor}>`.
+
+However, this introduces the problem of the incrementing counter. If `onChangeColor` does not do this, as your colleague insists, then the problem is that this event propagates up, and some handler above does it. To solve this problem, you need to stop the propagation. But don't forget that you should still call `onChangeColor`.
+
+<Sandpack>
+
+```js ColorSwitch.js active
+export default function ColorSwitch({
+  onChangeColor
+}) {
+  return (
+    <button onClick={e => {
+      e.stopPropagation();
+      onChangeColor();
+    }}>
+      Change color
+    </button>
+  );
+}
+```
+
+```js App.js hidden
+import { useState } from 'react';
+import ColorSwitch from './ColorSwitch.js';
+
+export default function App() {
+  const [clicks, setClicks] = useState(0);
+
+  function handleClickOutside() {
+    setClicks(c => c + 1);
+  }
+
+  function getRandomLightColor() {
+    let r = 150 + Math.round(100 * Math.random());
+    let g = 150 + Math.round(100 * Math.random());
+    let b = 150 + Math.round(100 * Math.random());
+    return `rgb(${r}, ${g}, ${b})`;
+  }
+
+  function handleChangeColor() {
+    let bodyStyle = document.body.style;
+    bodyStyle.backgroundColor = getRandomLightColor();
+  }
+
+  return (
+    <div style={{ width: '100%', height: '100%' }} onClick={handleClickOutside}>
+      <ColorSwitch onChangeColor={handleChangeColor} />
+      <br />
+      <br />
+      <h2>Clicks on the page: {clicks}</h2>
+    </div>
+  );
+}
+```
+
+</Sandpack>
+
+</Solution>
+
+</Challenges>
diff --git a/beta/src/content/learn/reusing-logic-with-custom-hooks.md b/beta/src/content/learn/reusing-logic-with-custom-hooks.md
new file mode 100644
index 000000000..d4a138ed7
--- /dev/null
+++ b/beta/src/content/learn/reusing-logic-with-custom-hooks.md
@@ -0,0 +1,2492 @@
+---
+title: 'Reusing Logic with Custom Hooks'
+---
+
+<Intro>
+
+React comes with several built-in Hooks like `useState`, `useContext`, and `useEffect`. Sometimes, you'll wish that there was a Hook for some more specific purpose: for example, to fetch data, to keep track of whether the user is online, or to connect to a chat room. You might not find these Hooks in React, but you can create your own Hooks for your application's needs.
+
+</Intro>
+
+<YouWillLearn>
+
+- What custom Hooks are, and how to write your own
+- How to reuse logic between components
+- How to name and structure your custom Hooks
+- When and why to extract custom Hooks
+
+</YouWillLearn>
+
+## Custom Hooks: Sharing logic between components {/*custom-hooks-sharing-logic-between-components*/}
+
+Imagine you're developing an app that heavily relies on the network (as most apps do). You want to warn the user if their network connection has accidentally gone off while they were using your app. How would you go about it?
+
+It seems like you'll need two things in your component:
+
+1. A piece of state that tracks whether the network is online.
+2. An Effect that subscribes to the global [`online`](https://developer.mozilla.org/en-US/docs/Web/API/Window/online_event) and [`offline`](https://developer.mozilla.org/en-US/docs/Web/API/Window/offline_event) events, and updates that state.
+
+This will keep your component [synchronized](/learn/synchronizing-with-effects) with the network status. You might start with something like this:
+
+<Sandpack>
+
+```js
+import { useState, useEffect } from 'react';
+
+export default function StatusBar() {
+  const [isOnline, setIsOnline] = useState(true);
+  useEffect(() => {
+    function handleOnline() {
+      setIsOnline(true);
+    }
+    function handleOffline() {
+      setIsOnline(false);
+    }
+    window.addEventListener('online', handleOnline);
+    window.addEventListener('offline', handleOffline);
+    return () => {
+      window.removeEventListener('online', handleOnline);
+      window.removeEventListener('offline', handleOffline);
+    };
+  }, []);
+
+  return <h1>{isOnline ? '✅ Online' : '❌ Disconnected'}</h1>;
+}
+```
+
+</Sandpack>
+
+Try turning your network on and off, and notice how this `StatusBar` updates in response to your actions.
+
+Now imagine you *also* want to use the same logic in a different component. You want to implement a Save button that will become disabled and show "Reconnecting..." instead of "Save" while the network is off.
+
+To start, you can copy and paste the `isOnline` state and the Effect into `SaveButton`:
+
+<Sandpack>
+
+```js
+import { useState, useEffect } from 'react';
+
+export default function SaveButton() {
+  const [isOnline, setIsOnline] = useState(true);
+  useEffect(() => {
+    function handleOnline() {
+      setIsOnline(true);
+    }
+    function handleOffline() {
+      setIsOnline(false);
+    }
+    window.addEventListener('online', handleOnline);
+    window.addEventListener('offline', handleOffline);
+    return () => {
+      window.removeEventListener('online', handleOnline);
+      window.removeEventListener('offline', handleOffline);
+    };
+  }, []);
+
+  function handleSaveClick() {
+    console.log('✅ Progress saved');
+  }
+
+  return (
+    <button disabled={!isOnline} onClick={handleSaveClick}>
+      {isOnline ? 'Save progress' : 'Reconnecting...'}
+    </button>
+  );
+}
+```
+
+</Sandpack>
+
+Verify that, if you turn off the network, the button will change its appearance.
+
+These two components work fine, but the duplication in logic between them is unfortunate. It seems like even though they have different *visual appearance,* you want to reuse the logic between them.
+
+### Extracting your own custom Hook from a component {/*extracting-your-own-custom-hook-from-a-component*/}
+
+Imagine for a moment that, similar to [`useState`](/reference/react/useState) and [`useEffect`](/reference/react/useEffect), there was a built-in `useOnlineStatus` Hook. Then both of these components could be simplified and you could remove the duplication between them:
+
+```js {2,7}
+function StatusBar() {
+  const isOnline = useOnlineStatus();
+  return <h1>{isOnline ? '✅ Online' : '❌ Disconnected'}</h1>;
+}
+
+function SaveButton() {
+  const isOnline = useOnlineStatus();
+
+  function handleSaveClick() {
+    console.log('✅ Progress saved');
+  }
+
+  return (
+    <button disabled={!isOnline} onClick={handleSaveClick}>
+      {isOnline ? 'Save progress' : 'Reconnecting...'}
+    </button>
+  );
+}
+```
+
+Although there is no such built-in Hook, you can write it yourself. Declare a function called `useOnlineStatus` and move all the duplicated code into it from the components you wrote earlier:
+
+```js {2-16}
+function useOnlineStatus() {
+  const [isOnline, setIsOnline] = useState(true);
+  useEffect(() => {
+    function handleOnline() {
+      setIsOnline(true);
+    }
+    function handleOffline() {
+      setIsOnline(false);
+    }
+    window.addEventListener('online', handleOnline);
+    window.addEventListener('offline', handleOffline);
+    return () => {
+      window.removeEventListener('online', handleOnline);
+      window.removeEventListener('offline', handleOffline);
+    };
+  }, []);
+  return isOnline;
+}
+```
+
+At the end of the function, return `isOnline`. This lets your components read that value:
+
+<Sandpack>
+
+```js
+import { useOnlineStatus } from './useOnlineStatus.js';
+
+function StatusBar() {
+  const isOnline = useOnlineStatus();
+  return <h1>{isOnline ? '✅ Online' : '❌ Disconnected'}</h1>;
+}
+
+function SaveButton() {
+  const isOnline = useOnlineStatus();
+
+  function handleSaveClick() {
+    console.log('✅ Progress saved');
+  }
+
+  return (
+    <button disabled={!isOnline} onClick={handleSaveClick}>
+      {isOnline ? 'Save progress' : 'Reconnecting...'}
+    </button>
+  );
+}
+
+export default function App() {
+  return (
+    <>
+      <SaveButton />
+      <StatusBar />
+    </>
+  );
+}
+```
+
+```js useOnlineStatus.js
+import { useState, useEffect } from 'react';
+
+export function useOnlineStatus() {
+  const [isOnline, setIsOnline] = useState(true);
+  useEffect(() => {
+    function handleOnline() {
+      setIsOnline(true);
+    }
+    function handleOffline() {
+      setIsOnline(false);
+    }
+    window.addEventListener('online', handleOnline);
+    window.addEventListener('offline', handleOffline);
+    return () => {
+      window.removeEventListener('online', handleOnline);
+      window.removeEventListener('offline', handleOffline);
+    };
+  }, []);
+  return isOnline;
+}
+```
+
+</Sandpack>
+
+Verify that switching the network on and off updates both components.
+
+Now your components don't have as much repetitive logic. **More importantly, the code inside them describes *what they want to do* (use the online status!) rather than *how to do it* (by subscribing to the browser events).**
+
+When you extract logic into custom Hooks, you can hide the gnarly details of how you deal with some external system or a browser API. The code of your components expresses your intent, not the implementation.
+
+### Hook names always start with `use` {/*hook-names-always-start-with-use*/}
+
+React applications are built from components. Components are built from Hooks, whether built-in or custom. You'll likely often use custom Hooks created by others, but occasionally you might write one yourself!
+
+You must follow these naming conventions:
+
+1. **React component names must start with a capital letter,** like `StatusBar` and `SaveButton`. React components also need to return something that React knows how to display, like a piece of JSX.
+2. **Hook names must start with `use` followed by a capital letter,** like [`useState`](/reference/react/useState) (built-in) or `useOnlineStatus` (custom, like earlier on the page). Hooks may return arbitrary values.
+
+This convention guarantees that you can always look at a component and know where its state, Effects, and other React features might "hide". For example, if you see a `getColor()` function call inside your component, you can be sure that it can't possibly contain React state inside because its name doesn't start with `use`. However, a function call like `useOnlineStatus()` will most likely contain calls to other Hooks inside!
+
+<Note>
+
+If your linter is [configured for React,](/learn/editor-setup#linting) it will enforce this naming convention. Scroll up to the sandbox above and rename `useOnlineStatus` to `getOnlineStatus`. Notice that the linter won't allow you to call `useState` or `useEffect` inside of it anymore. Only Hooks and components can call other Hooks!
+
+</Note>
+
+<DeepDive>
+
+#### Should all functions called during rendering start with the use prefix? {/*should-all-functions-called-during-rendering-start-with-the-use-prefix*/}
+
+No. Functions that don't *call* Hooks don't need to *be* Hooks.
+
+If your function doesn't call any Hooks, avoid the `use` prefix. Instead, write it as a regular function *without* the `use` prefix. For example, `useSorted` below doesn't call Hooks, so call it `getSorted` instead:
+
+```js
+// 🔴 Avoid: A Hook that doesn't use Hooks
+function useSorted(items) {
+  return items.slice().sort();
+}
+
+// ✅ Good: A regular function that doesn't use Hooks
+function getSorted(items) {
+  return items.slice().sort();
+}
+```
+
+This ensures that your code can call this regular function anywhere, including conditions:
+
+```js
+function List({ items, shouldSort }) {
+  let displayedItems = items;
+  if (shouldSort) {
+    // ✅ It's ok to call getSorted() conditionally because it's not a Hook
+    displayedItems = getSorted(items);
+  }
+  // ...
+}
+```
+
+You should give `use` prefix to a function (and thus make it a Hook) if it uses at least one Hook inside of it:
+
+```js
+// ✅ Good: A Hook that uses other Hooks
+function useAuth() {
+  return useContext(Auth);
+}
+```
+
+Technically, this isn't enforced by React. In principle, you could make a Hook that doesn't call other Hooks. This is often confusing and limiting so it's best to avoid that pattern. However, there may be rare cases where it is helpful. For example, maybe your function doesn't use any Hooks right now, but you plan to add some Hook calls to it in the future. Then it makes sense to name it with the `use` prefix:
+
+```js {3-4}
+// ✅ Good: A Hook that will likely use some other Hooks later
+function useAuth() {
+  // TODO: Replace with this line when authentication is implemented:
+  // return useContext(Auth);
+  return TEST_USER;
+}
+```
+
+Then components won't be able to call it conditionally. This will become important when you actually add Hook calls inside. If you don't plan to use Hooks inside it (now or later), don't make it a Hook.
+
+</DeepDive>
+
+### Custom Hooks let you share stateful logic, not state itself {/*custom-hooks-let-you-share-stateful-logic-not-state-itself*/}
+
+In the earlier example, when you turned the network on and off, both components updated together. However, it's wrong to think that a single `isOnline` state variable is shared between them. Look at this code:
+
+```js {2,7}
+function StatusBar() {
+  const isOnline = useOnlineStatus();
+  // ...
+}
+
+function SaveButton() {
+  const isOnline = useOnlineStatus();
+  // ...
+}
+```
+
+It works the same way as before you extracted the duplication:
+
+```js {2-5,10-13}
+function StatusBar() {
+  const [isOnline, setIsOnline] = useState(true);
+  useEffect(() => {
+    // ...
+  }, []);
+  // ...
+}
+
+function SaveButton() {
+  const [isOnline, setIsOnline] = useState(true);
+  useEffect(() => {
+    // ...
+  }, []);
+  // ...
+}
+```
+
+These are two completely independent state variables and Effects! They only happened to have the same value at the same time because you synchronized them with the same external value (whether the network is on).
+
+To better illustrate this, we'll need a different example. Consider this `Form` component:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function Form() {
+  const [firstName, setFirstName] = useState('Mary');
+  const [lastName, setLastName] = useState('Poppins');
+
+  function handleFirstNameChange(e) {
+    setFirstName(e.target.value);
+  }
+
+  function handleLastNameChange(e) {
+    setLastName(e.target.value);
+  }
+
+  return (
+    <>
+      <label>
+        First name:
+        <input value={firstName} onChange={handleFirstNameChange} />
+      </label>
+      <label>
+        Last name:
+        <input value={lastName} onChange={handleLastNameChange} />
+      </label>
+      <p><b>Good morning, {firstName} {lastName}.</b></p>
+    </>
+  );
+}
+```
+
+```css
+label { display: block; }
+input { margin-left: 10px; }
+```
+
+</Sandpack>
+
+There's some repetitive logic for each form field:
+
+1. There's a piece of state (`firstName` and `lastName`).
+1. There's a change handler (`handleFirstNameChange` and `handleLastNameChange`).
+1. There's a piece of JSX that specifies the `value` and `onChange` attributes for that input.
+
+You can extract the repetitive logic into this `useFormInput` custom Hook:
+
+<Sandpack>
+
+```js
+import { useFormInput } from './useFormInput.js';
+
+export default function Form() {
+  const firstNameProps = useFormInput('Mary');
+  const lastNameProps = useFormInput('Poppins');
+
+  return (
+    <>
+      <label>
+        First name:
+        <input {...firstNameProps} />
+      </label>
+      <label>
+        Last name:
+        <input {...lastNameProps} />
+      </label>
+      <p><b>Good morning, {firstNameProps.value} {lastNameProps.value}.</b></p>
+    </>
+  );
+}
+```
+
+```js useFormInput.js active
+import { useState } from 'react';
+
+export function useFormInput(initialValue) {
+  const [value, setValue] = useState(initialValue);
+
+  function handleChange(e) {
+    setValue(e.target.value);
+  }
+
+  const inputProps = {
+    value: value,
+    onChange: handleChange
+  };
+
+  return inputProps;
+}
+```
+
+```css
+label { display: block; }
+input { margin-left: 10px; }
+```
+
+</Sandpack>
+
+Notice that it only declares *one* state variable called `value`.
+
+However, the `Form` component calls `useFormInput` *two times:*
+
+```js
+function Form() {
+  const firstNameProps = useFormInput('Mary');
+  const lastNameProps = useFormInput('Poppins');
+  // ...
+```
+
+This is why it works like declaring two separate state variables!
+
+**Custom Hooks let you share *stateful logic* but not *state itself.* Each call to a Hook is completely independent from every other call to the same Hook.** This is why the two sandboxes above are completely equivalent. If you'd like, scroll back up and compare them. The behavior before and after extracting a custom Hook is identical.
+
+When you need to share the state itself between multiple components, [lift it up and pass it down](/learn/sharing-state-between-components) instead.
+
+## Passing reactive values between Hooks {/*passing-reactive-values-between-hooks*/}
+
+The code inside your custom Hooks will re-run during every re-render of your component. This is why, like components, custom Hooks [need to be pure.](/learn/keeping-components-pure) Think of custom Hooks' code as part of your component's body!
+
+Because custom Hooks re-render together with your component, they always receive the latest props and state. To see what this means, consider this chat room example. Change the server URL or the selected chat room:
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+import ChatRoom from './ChatRoom.js';
+
+export default function App() {
+  const [roomId, setRoomId] = useState('general');
+  return (
+    <>
+      <label>
+        Choose the chat room:{' '}
+        <select
+          value={roomId}
+          onChange={e => setRoomId(e.target.value)}
+        >
+          <option value="general">general</option>
+          <option value="travel">travel</option>
+          <option value="music">music</option>
+        </select>
+      </label>
+      <hr />
+      <ChatRoom
+        roomId={roomId}
+      />
+    </>
+  );
+}
+```
+
+```js ChatRoom.js active
+import { useState, useEffect } from 'react';
+import { createConnection } from './chat.js';
+import { showNotification } from './notifications.js';
+
+export default function ChatRoom({ roomId }) {
+  const [serverUrl, setServerUrl] = useState('https://localhost:1234');
+
+  useEffect(() => {
+    const options = {
+      serverUrl: serverUrl,
+      roomId: roomId
+    };
+    const connection = createConnection(options);
+    connection.on('message', (msg) => {
+      showNotification('New message: ' + msg);
+    });
+    connection.connect();
+    return () => connection.disconnect();
+  }, [roomId, serverUrl]);
+
+  return (
+    <>
+      <label>
+        Server URL:
+        <input value={serverUrl} onChange={e => setServerUrl(e.target.value)} />
+      </label>
+      <h1>Welcome to the {roomId} room!</h1>
+    </>
+  );
+}
+```
+
+```js chat.js
+export function createConnection({ serverUrl, roomId }) {
+  // A real implementation would actually connect to the server
+  if (typeof serverUrl !== 'string') {
+    throw Error('Expected serverUrl to be a string. Received: ' + serverUrl);
+  }
+  if (typeof roomId !== 'string') {
+    throw Error('Expected roomId to be a string. Received: ' + roomId);
+  }
+  let intervalId;
+  let messageCallback;
+  return {
+    connect() {
+      console.log('✅ Connecting to "' + roomId + '" room at ' + serverUrl + '...');
+      clearInterval(intervalId);
+      intervalId = setInterval(() => {
+        if (messageCallback) {
+          if (Math.random() > 0.5) {
+            messageCallback('hey')
+          } else {
+            messageCallback('lol');
+          }
+        }
+      }, 3000);
+    },
+    disconnect() {
+      clearInterval(intervalId);
+      messageCallback = null;
+      console.log('❌ Disconnected from "' + roomId + '" room at ' + serverUrl + '');
+    },
+    on(event, callback) {
+      if (messageCallback) {
+        throw Error('Cannot add the handler twice.');
+      }
+      if (event !== 'message') {
+        throw Error('Only "message" event is supported.');
+      }
+      messageCallback = callback;
+    },
+  };
+}
+```
+
+```js notifications.js
+import Toastify from 'toastify-js';
+import 'toastify-js/src/toastify.css';
+
+export function showNotification(message, theme = 'dark') {
+  Toastify({
+    text: message,
+    duration: 2000,
+    gravity: 'top',
+    position: 'right',
+    style: {
+      background: theme === 'dark' ? 'black' : 'white',
+      color: theme === 'dark' ? 'white' : 'black',
+    },
+  }).showToast();
+}
+```
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "latest",
+    "react-dom": "latest",
+    "react-scripts": "latest",
+    "toastify-js": "1.12.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+```css
+input { display: block; margin-bottom: 20px; }
+button { margin-left: 10px; }
+```
+
+</Sandpack>
+
+When you change `serverUrl` or `roomId`, the Effect ["reacts" to your changes](/learn/lifecycle-of-reactive-effects#effects-react-to-reactive-values) and re-synchronizes. You can tell by the console messages that the chat re-connects every time that you change your Effect's dependencies.
+
+Now move the Effect's code into a custom Hook:
+
+```js {2-13}
+export function useChatRoom({ serverUrl, roomId }) {
+  useEffect(() => {
+    const options = {
+      serverUrl: serverUrl,
+      roomId: roomId
+    };
+    const connection = createConnection(options);
+    connection.connect();
+    connection.on('message', (msg) => {
+      showNotification('New message: ' + msg);
+    });
+    return () => connection.disconnect();
+  }, [roomId, serverUrl]);
+}
+```
+
+This lets your `ChatRoom` component call your custom Hook without worrying about how it works inside:
+
+```js {4-7}
+export default function ChatRoom({ roomId }) {
+  const [serverUrl, setServerUrl] = useState('https://localhost:1234');
+
+  useChatRoom({
+    roomId: roomId,
+    serverUrl: serverUrl
+  });
+
+  return (
+    <>
+      <label>
+        Server URL:
+        <input value={serverUrl} onChange={e => setServerUrl(e.target.value)} />
+      </label>
+      <h1>Welcome to the {roomId} room!</h1>
+    </>
+  );
+}
+```
+
+This looks much simpler! (But it does the same thing.)
+
+Notice that the logic *still responds* to prop and state changes. Try editing the server URL or the selected room:
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+import ChatRoom from './ChatRoom.js';
+
+export default function App() {
+  const [roomId, setRoomId] = useState('general');
+  return (
+    <>
+      <label>
+        Choose the chat room:{' '}
+        <select
+          value={roomId}
+          onChange={e => setRoomId(e.target.value)}
+        >
+          <option value="general">general</option>
+          <option value="travel">travel</option>
+          <option value="music">music</option>
+        </select>
+      </label>
+      <hr />
+      <ChatRoom
+        roomId={roomId}
+      />
+    </>
+  );
+}
+```
+
+```js ChatRoom.js active
+import { useState } from 'react';
+import { useChatRoom } from './useChatRoom.js';
+
+export default function ChatRoom({ roomId }) {
+  const [serverUrl, setServerUrl] = useState('https://localhost:1234');
+
+  useChatRoom({
+    roomId: roomId,
+    serverUrl: serverUrl
+  });
+
+  return (
+    <>
+      <label>
+        Server URL:
+        <input value={serverUrl} onChange={e => setServerUrl(e.target.value)} />
+      </label>
+      <h1>Welcome to the {roomId} room!</h1>
+    </>
+  );
+}
+```
+
+```js useChatRoom.js
+import { useEffect } from 'react';
+import { createConnection } from './chat.js';
+import { showNotification } from './notifications.js';
+
+export function useChatRoom({ serverUrl, roomId }) {
+  useEffect(() => {
+    const options = {
+      serverUrl: serverUrl,
+      roomId: roomId
+    };
+    const connection = createConnection(options);
+    connection.connect();
+    connection.on('message', (msg) => {
+      showNotification('New message: ' + msg);
+    });
+    return () => connection.disconnect();
+  }, [roomId, serverUrl]);
+}
+```
+
+```js chat.js
+export function createConnection({ serverUrl, roomId }) {
+  // A real implementation would actually connect to the server
+  if (typeof serverUrl !== 'string') {
+    throw Error('Expected serverUrl to be a string. Received: ' + serverUrl);
+  }
+  if (typeof roomId !== 'string') {
+    throw Error('Expected roomId to be a string. Received: ' + roomId);
+  }
+  let intervalId;
+  let messageCallback;
+  return {
+    connect() {
+      console.log('✅ Connecting to "' + roomId + '" room at ' + serverUrl + '...');
+      clearInterval(intervalId);
+      intervalId = setInterval(() => {
+        if (messageCallback) {
+          if (Math.random() > 0.5) {
+            messageCallback('hey')
+          } else {
+            messageCallback('lol');
+          }
+        }
+      }, 3000);
+    },
+    disconnect() {
+      clearInterval(intervalId);
+      messageCallback = null;
+      console.log('❌ Disconnected from "' + roomId + '" room at ' + serverUrl + '');
+    },
+    on(event, callback) {
+      if (messageCallback) {
+        throw Error('Cannot add the handler twice.');
+      }
+      if (event !== 'message') {
+        throw Error('Only "message" event is supported.');
+      }
+      messageCallback = callback;
+    },
+  };
+}
+```
+
+```js notifications.js
+import Toastify from 'toastify-js';
+import 'toastify-js/src/toastify.css';
+
+export function showNotification(message, theme = 'dark') {
+  Toastify({
+    text: message,
+    duration: 2000,
+    gravity: 'top',
+    position: 'right',
+    style: {
+      background: theme === 'dark' ? 'black' : 'white',
+      color: theme === 'dark' ? 'white' : 'black',
+    },
+  }).showToast();
+}
+```
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "latest",
+    "react-dom": "latest",
+    "react-scripts": "latest",
+    "toastify-js": "1.12.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+```css
+input { display: block; margin-bottom: 20px; }
+button { margin-left: 10px; }
+```
+
+</Sandpack>
+
+Notice how you're taking the return value of one Hook:
+
+```js {2}
+export default function ChatRoom({ roomId }) {
+  const [serverUrl, setServerUrl] = useState('https://localhost:1234');
+
+  useChatRoom({
+    roomId: roomId,
+    serverUrl: serverUrl
+  });
+  // ...
+```
+
+and pass it as an input to another Hook:
+
+```js {6}
+export default function ChatRoom({ roomId }) {
+  const [serverUrl, setServerUrl] = useState('https://localhost:1234');
+
+  useChatRoom({
+    roomId: roomId,
+    serverUrl: serverUrl
+  });
+  // ...
+```
+
+Every time your `ChatRoom` component re-renders, it passes the latest `roomId` and `serverUrl` to your Hook. This is why your Effect re-connects to the chat whenever their values are different after a re-render. (If you ever worked with music processing software, chaining Hooks like this might remind you of chaining multiple audio effects, like adding reverb or chorus. It's as if the output of `useState` "feeds into" the input of the `useChatRoom`.)
+
+### Passing event handlers to custom Hooks {/*passing-event-handlers-to-custom-hooks*/}
+
+<Wip>
+
+This section describes an **experimental API that has not yet been added to React,** so you can't use it yet.
+
+</Wip>
+
+As you start using `useChatRoom` in more components, you might want to let different components customize its behavior. For example, currently, the logic for what to do when a message arrives is hardcoded inside the Hook:
+
+```js {9-11}
+export function useChatRoom({ serverUrl, roomId }) {
+  useEffect(() => {
+    const options = {
+      serverUrl: serverUrl,
+      roomId: roomId
+    };
+    const connection = createConnection(options);
+    connection.connect();
+    connection.on('message', (msg) => {
+      showNotification('New message: ' + msg);
+    });
+    return () => connection.disconnect();
+  }, [roomId, serverUrl]);
+}
+```
+
+Let's say you want to move this logic back to your component:
+
+```js {7-9}
+export default function ChatRoom({ roomId }) {
+  const [serverUrl, setServerUrl] = useState('https://localhost:1234');
+
+  useChatRoom({
+    roomId: roomId,
+    serverUrl: serverUrl,
+    onReceiveMessage(msg) {
+      showNotification('New message: ' + msg);
+    }
+  });
+  // ...
+```
+
+To make this work, change your custom Hook to take `onReceiveMessage` as one of its named options:
+
+```js {1,10,13}
+export function useChatRoom({ serverUrl, roomId, onReceiveMessage }) {
+  useEffect(() => {
+    const options = {
+      serverUrl: serverUrl,
+      roomId: roomId
+    };
+    const connection = createConnection(options);
+    connection.connect();
+    connection.on('message', (msg) => {
+      onReceiveMessage(msg);
+    });
+    return () => connection.disconnect();
+  }, [roomId, serverUrl, onReceiveMessage]); // ✅ All dependencies declared
+}
+```
+
+This will work, but there's one more improvement you can do when your custom Hook accepts event handlers.
+
+Adding a dependency on `onReceiveMessage` is not ideal because it will cause the chat to re-connect every time the component re-renders. [Wrap this event handler into an Effect Event to remove it from the dependencies:](/learn/removing-effect-dependencies#wrapping-an-event-handler-from-the-props)
+
+```js {1,4,5,15,18}
+import { useEffect, useEffectEvent } from 'react';
+// ...
+
+export function useChatRoom({ serverUrl, roomId, onReceiveMessage }) {
+  const onMessage = useEffectEvent(onReceiveMessage);
+
+  useEffect(() => {
+    const options = {
+      serverUrl: serverUrl,
+      roomId: roomId
+    };
+    const connection = createConnection(options);
+    connection.connect();
+    connection.on('message', (msg) => {
+      onMessage(msg);
+    });
+    return () => connection.disconnect();
+  }, [roomId, serverUrl]); // ✅ All dependencies declared
+}
+```
+
+Now the chat won't re-connect every time that the `ChatRoom` component re-renders. Here is a fully working demo of passing an event handler to a custom Hook that you can play with:
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+import ChatRoom from './ChatRoom.js';
+
+export default function App() {
+  const [roomId, setRoomId] = useState('general');
+  return (
+    <>
+      <label>
+        Choose the chat room:{' '}
+        <select
+          value={roomId}
+          onChange={e => setRoomId(e.target.value)}
+        >
+          <option value="general">general</option>
+          <option value="travel">travel</option>
+          <option value="music">music</option>
+        </select>
+      </label>
+      <hr />
+      <ChatRoom
+        roomId={roomId}
+      />
+    </>
+  );
+}
+```
+
+```js ChatRoom.js active
+import { useState } from 'react';
+import { useChatRoom } from './useChatRoom.js';
+import { showNotification } from './notifications.js';
+
+export default function ChatRoom({ roomId }) {
+  const [serverUrl, setServerUrl] = useState('https://localhost:1234');
+
+  useChatRoom({
+    roomId: roomId,
+    serverUrl: serverUrl,
+    onReceiveMessage(msg) {
+      showNotification('New message: ' + msg);
+    }
+  });
+
+  return (
+    <>
+      <label>
+        Server URL:
+        <input value={serverUrl} onChange={e => setServerUrl(e.target.value)} />
+      </label>
+      <h1>Welcome to the {roomId} room!</h1>
+    </>
+  );
+}
+```
+
+```js useChatRoom.js
+import { useEffect } from 'react';
+import { experimental_useEffectEvent as useEffectEvent } from 'react';
+import { createConnection } from './chat.js';
+
+export function useChatRoom({ serverUrl, roomId, onReceiveMessage }) {
+  const onMessage = useEffectEvent(onReceiveMessage);
+
+  useEffect(() => {
+    const options = {
+      serverUrl: serverUrl,
+      roomId: roomId
+    };
+    const connection = createConnection(options);
+    connection.connect();
+    connection.on('message', (msg) => {
+      onMessage(msg);
+    });
+    return () => connection.disconnect();
+  }, [roomId, serverUrl]);
+}
+```
+
+```js chat.js
+export function createConnection({ serverUrl, roomId }) {
+  // A real implementation would actually connect to the server
+  if (typeof serverUrl !== 'string') {
+    throw Error('Expected serverUrl to be a string. Received: ' + serverUrl);
+  }
+  if (typeof roomId !== 'string') {
+    throw Error('Expected roomId to be a string. Received: ' + roomId);
+  }
+  let intervalId;
+  let messageCallback;
+  return {
+    connect() {
+      console.log('✅ Connecting to "' + roomId + '" room at ' + serverUrl + '...');
+      clearInterval(intervalId);
+      intervalId = setInterval(() => {
+        if (messageCallback) {
+          if (Math.random() > 0.5) {
+            messageCallback('hey')
+          } else {
+            messageCallback('lol');
+          }
+        }
+      }, 3000);
+    },
+    disconnect() {
+      clearInterval(intervalId);
+      messageCallback = null;
+      console.log('❌ Disconnected from "' + roomId + '" room at ' + serverUrl + '');
+    },
+    on(event, callback) {
+      if (messageCallback) {
+        throw Error('Cannot add the handler twice.');
+      }
+      if (event !== 'message') {
+        throw Error('Only "message" event is supported.');
+      }
+      messageCallback = callback;
+    },
+  };
+}
+```
+
+```js notifications.js
+import Toastify from 'toastify-js';
+import 'toastify-js/src/toastify.css';
+
+export function showNotification(message, theme = 'dark') {
+  Toastify({
+    text: message,
+    duration: 2000,
+    gravity: 'top',
+    position: 'right',
+    style: {
+      background: theme === 'dark' ? 'black' : 'white',
+      color: theme === 'dark' ? 'white' : 'black',
+    },
+  }).showToast();
+}
+```
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "experimental",
+    "react-dom": "experimental",
+    "react-scripts": "latest",
+    "toastify-js": "1.12.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+```css
+input { display: block; margin-bottom: 20px; }
+button { margin-left: 10px; }
+```
+
+</Sandpack>
+
+Notice how you no longer need to know *how* `useChatRoom` works in order to use it. You could add it to any other component, pass any other options, and it would work the same way. That's the power of custom Hooks.
+
+## When to use custom Hooks {/*when-to-use-custom-hooks*/}
+
+You don't need to extract a custom Hook for every little duplicated bit of code. Some duplication is fine. For example, extracting a `useFormInput` Hook to wrap a single `useState` call like earlier is probably unnecessary.
+
+However, whenever you write an Effect, consider whether it would be clearer to also wrap it in a custom Hook. [You shouldn't need Effects very often,](/learn/you-might-not-need-an-effect) so if you're writing one, it means that you need to "step outside React" to synchronize with some external system or to do something that React doesn't have a built-in API for. Wrapping your Effect into a custom Hook lets you precisely communicate your intent and how the data flows through it.
+
+For example, consider a `ShippingForm` component that displays two dropdowns: one shows the list of cities, and another shows the list of areas in the selected city. You might start with some code that looks like this:
+
+```js {3-16,20-35}
+function ShippingForm({ country }) {
+  const [cities, setCities] = useState(null);
+  // This Effect fetches cities for a country
+  useEffect(() => {
+    let ignore = false;
+    fetch(`/api/cities?country=${country}`)
+      .then(response => response.json())
+      .then(json => {
+        if (!ignore) {
+          setCities(json);
+        }
+      });
+    return () => {
+      ignore = true;
+    };
+  }, [country]);
+
+  const [city, setCity] = useState(null);
+  const [areas, setAreas] = useState(null);
+  // This Effect fetches areas for the selected city
+  useEffect(() => {
+    if (city) {
+      let ignore = false;
+      fetch(`/api/areas?city=${city}`)
+        .then(response => response.json())
+        .then(json => {
+          if (!ignore) {
+            setAreas(json);
+          }
+        });
+      return () => {
+        ignore = true;
+      };
+    }
+  }, [city]);
+
+  // ...
+```
+
+Although this code is quite repetitive, [it's correct to keep these Effects separate from each other.](/learn/removing-effect-dependencies#is-your-effect-doing-several-unrelated-things) They synchronize two different things, so you shouldn't merge them into one Effect. Instead, you can simplify the `ShippingForm` component above by extracting the common logic between them into your own `useData` Hook:
+
+```js {2-18}
+function useData(url) {
+  const [data, setData] = useState(null);
+  useEffect(() => {
+    if (url) {
+      let ignore = false;
+      fetch(url)
+        .then(response => response.json())
+        .then(json => {
+          if (!ignore) {
+            setData(json);
+          }
+        });
+      return () => {
+        ignore = true;
+      };
+    }
+  }, [url]);
+  return data;
+}
+```
+
+Now you can replace both Effects in the `ShippingForm` components with calls to `useData`:
+
+```js {2,4}
+function ShippingForm({ country }) {
+  const cities = useData(`/api/cities?country=${country}`);
+  const [city, setCity] = useState(null);
+  const areas = useData(city ? `/api/areas?city=${city}` : null);
+  // ...
+```
+
+Extracting a custom Hook makes the data flow explicit. You feed the `url` in and you get the `data` out. By "hiding" your Effect inside `useData`, you also prevent someone working on the `ShippingForm` component from adding [unnecessary dependencies](/learn/removing-effect-dependencies) to it. Ideally, with time, most of your app's Effects will be in custom Hooks.
+
+<DeepDive>
+
+#### Keep your custom Hooks focused on concrete high-level use cases {/*keep-your-custom-hooks-focused-on-concrete-high-level-use-cases*/}
+
+Start by choosing your custom Hook's name. If you struggle to pick a clear name, it might mean that your Effect is too coupled to the rest of your component's logic, and is not yet ready to be extracted.
+
+Ideally, your custom Hook's name should be clear enough that even a person who doesn't write code often could have a good guess about what your custom Hook does, what it takes, and what it returns:
+
+* ✅ `useData(url)`
+* ✅ `useImpressionLog(eventName, extraData)`
+* ✅ `useChatRoom(options)`
+
+When you synchronize with an external system, your custom Hook name may be more technical and use jargon specific to that system. It's good as long as it would be clear to a person familiar with that system:
+
+* ✅ `useMediaQuery(query)`
+* ✅ `useSocket(url)`
+* ✅ `useIntersectionObserver(ref, options)`
+
+**Keep custom Hooks focused on concrete high-level use cases.** Avoid creating and using custom "lifecycle" Hooks that act as alternatives and convenience wrappers for the `useEffect` API itself:
+
+* 🔴 `useMount(fn)`
+* 🔴 `useEffectOnce(fn)`
+* 🔴 `useUpdateEffect(fn)`
+
+For example, this `useMount` Hook tries to ensure some code only runs "on mount":
+
+```js {4-5,14-15}
+function ChatRoom({ roomId }) {
+  const [serverUrl, setServerUrl] = useState('https://localhost:1234');
+
+  // 🔴 Avoid: using custom "lifecycle" Hooks
+  useMount(() => {
+    const connection = createConnection({ roomId, serverUrl });
+    connection.connect();
+
+    post('/analytics/event', { eventName: 'visit_chat' });
+  });
+  // ...
+}
+
+// 🔴 Avoid: creating custom "lifecycle" Hooks
+function useMount(fn) {
+  useEffect(() => {
+    fn();
+  }, []); // 🔴 React Hook useEffect has a missing dependency: 'fn'
+}
+```
+
+**Custom "lifecycle" Hooks like `useMount` don't fit well into the React paradigm.** For example, this code example has a mistake (it doesn't "react" to `roomId` or `serverUrl` changes), but the linter won't warn you about it because the linter only checks direct `useEffect` calls. It won't know about your Hook.
+
+If you're writing an Effect, start by using the React API directly:
+
+```js
+function ChatRoom({ roomId }) {
+  const [serverUrl, setServerUrl] = useState('https://localhost:1234');
+
+  // ✅ Good: two raw Effects separated by purpose
+
+  useEffect(() => {
+    const connection = createConnection({ serverUrl, roomId });
+    connection.connect();
+    return () => connection.disconnect();
+  }, [serverUrl, roomId]);
+
+  useEffect(() => {
+    post('/analytics/event', { eventName: 'visit_chat', roomId });
+  }, [roomId]);
+
+  // ...
+}
+```
+
+Then, you can (but don't have to) extract custom Hooks for different high-level use cases:
+
+```js
+function ChatRoom({ roomId }) {
+  const [serverUrl, setServerUrl] = useState('https://localhost:1234');
+
+  // ✅ Great: custom Hooks named after their purpose
+  useChatRoom({ serverUrl, roomId });
+  useImpressionLog('visit_chat', { roomId });
+  // ...
+}
+```
+
+**A good custom Hook makes the calling code more declarative by constraining what it does.** For example, `useChatRoom(options)` can only connect to the chat room, while `useImpressionLog(eventName, extraData)` can only send an impression log to the analytics. If your custom Hook API doesn't constrain the use cases and is very abstract, in the long run it's likely to introduce more problems than it solves.
+
+</DeepDive>
+
+### Custom Hooks help you migrate to better patterns {/*custom-hooks-help-you-migrate-to-better-patterns*/}
+
+Effects are an ["escape hatch"](/learn/escape-hatches): you use them when you need to "step outside React" and when there is no better built-in solution for your use case. With time, the React team's goal is to reduce the number of the Effects in your app to the minimum by providing more specific solutions to more specific problems. Wrapping Effects in custom Hooks makes it easier to upgrade your code when these solutions become available. Let's return to this example:
+
+<Sandpack>
+
+```js
+import { useOnlineStatus } from './useOnlineStatus.js';
+
+function StatusBar() {
+  const isOnline = useOnlineStatus();
+  return <h1>{isOnline ? '✅ Online' : '❌ Disconnected'}</h1>;
+}
+
+function SaveButton() {
+  const isOnline = useOnlineStatus();
+
+  function handleSaveClick() {
+    console.log('✅ Progress saved');
+  }
+
+  return (
+    <button disabled={!isOnline} onClick={handleSaveClick}>
+      {isOnline ? 'Save progress' : 'Reconnecting...'}
+    </button>
+  );
+}
+
+export default function App() {
+  return (
+    <>
+      <SaveButton />
+      <StatusBar />
+    </>
+  );
+}
+```
+
+```js useOnlineStatus.js active
+import { useState, useEffect } from 'react';
+
+export function useOnlineStatus() {
+  const [isOnline, setIsOnline] = useState(true);
+  useEffect(() => {
+    function handleOnline() {
+      setIsOnline(true);
+    }
+    function handleOffline() {
+      setIsOnline(false);
+    }
+    window.addEventListener('online', handleOnline);
+    window.addEventListener('offline', handleOffline);
+    return () => {
+      window.removeEventListener('online', handleOnline);
+      window.removeEventListener('offline', handleOffline);
+    };
+  }, []);
+  return isOnline;
+}
+```
+
+</Sandpack>
+
+In the above example, `useOnlineStatus` is implemented with a pair of [`useState`](/reference/react/useState) and [`useEffect`.](/reference/react/useEffect) However, this isn't the best possible solution. There is a number of edge cases it doesn't consider. For example, it assumes that when the component mounts, `isOnline` is already `true`, but this may be wrong if the network already went offline. You can use the browser [`navigator.onLine`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/onLine) API to check for that, but using it directly would break if you run your React app on the server to generate the initial HTML. In short, this code could be improved.
+
+Luckily, React 18 includes a dedicated API called [`useSyncExternalStore`](/reference/react/useSyncExternalStore) which takes care of all of these problems for you. Here is how your `useOnlineStatus` Hook, rewritten to take advantage of this new API:
+
+<Sandpack>
+
+```js
+import { useOnlineStatus } from './useOnlineStatus.js';
+
+function StatusBar() {
+  const isOnline = useOnlineStatus();
+  return <h1>{isOnline ? '✅ Online' : '❌ Disconnected'}</h1>;
+}
+
+function SaveButton() {
+  const isOnline = useOnlineStatus();
+
+  function handleSaveClick() {
+    console.log('✅ Progress saved');
+  }
+
+  return (
+    <button disabled={!isOnline} onClick={handleSaveClick}>
+      {isOnline ? 'Save progress' : 'Reconnecting...'}
+    </button>
+  );
+}
+
+export default function App() {
+  return (
+    <>
+      <SaveButton />
+      <StatusBar />
+    </>
+  );
+}
+```
+
+```js useOnlineStatus.js active
+import { useSyncExternalStore } from 'react';
+
+function subscribe(callback) {
+  window.addEventListener('online', callback);
+  window.addEventListener('offline', callback);
+  return () => {
+    window.removeEventListener('online', callback);
+    window.removeEventListener('offline', callback);
+  };
+}
+
+export function useOnlineStatus() {
+  return useSyncExternalStore(
+    subscribe,
+    () => navigator.onLine, // How to get the value on the client
+    () => true // How to get the value on the server
+  );
+}
+
+```
+
+</Sandpack>
+
+Notice how **you didn't need to change any of the components** to make this migration:
+
+```js {2,7}
+function StatusBar() {
+  const isOnline = useOnlineStatus();
+  // ...
+}
+
+function SaveButton() {
+  const isOnline = useOnlineStatus();
+  // ...
+}
+```
+
+This is another reason for why wrapping Effects in custom Hooks is often beneficial:
+
+1. You make the data flow to and from your Effects very explicit.
+2. You let your components focus on the intent rather than on the exact implementation of your Effects.
+3. When React adds new features, you can remove those Effects without changing any of your components.
+
+Similar to a [design system,](https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969) you might find it helpful to start extracting common idioms from your app's components into custom Hooks. This will keep your components' code focused on the intent, and let you avoid writing raw Effects very often. There are also many excellent custom Hooks maintained by the React community.
+
+<DeepDive>
+
+#### Will React provide any built-in solution for data fetching? {/*will-react-provide-any-built-in-solution-for-data-fetching*/}
+
+We're still working out the details, but we expect that in the future, you'll write data fetching like this:
+
+```js {1,4,6}
+import { use } from 'react'; // Not available yet!
+
+function ShippingForm({ country }) {
+  const cities = use(fetch(`/api/cities?country=${country}`));
+  const [city, setCity] = useState(null);
+  const areas = city ? use(fetch(`/api/areas?city=${city}`)) : null;
+  // ...
+```
+
+If you use custom Hooks like `useData` above in your app, it will require fewer changes to migrate to the eventually recommended approach than if you write raw Effects in every component manually. However, the old approach will still work fine, so if you feel happy writing raw Effects, you can continue to do that.
+
+</DeepDive>
+
+### There is more than one way to do it {/*there-is-more-than-one-way-to-do-it*/}
+
+Let's say you want to implement a fade-in animation *from scratch* using the browser [`requestAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) API. You might start with an Effect that sets up an animation loop. During each frame of the animation, you could change the opacity of the DOM node you [hold in a ref](/learn/manipulating-the-dom-with-refs) until it reaches `1`. Your code might start like this:
+
+<Sandpack>
+
+```js
+import { useState, useEffect, useRef } from 'react';
+
+function Welcome() {
+  const ref = useRef(null);
+
+  useEffect(() => {
+    const duration = 1000;
+    const node = ref.current;
+
+    let startTime = performance.now();
+    let frameId = null;
+
+    function onFrame(now) {
+      const timePassed = now - startTime;
+      const progress = Math.min(timePassed / duration, 1);
+      onProgress(progress);
+      if (progress < 1) {
+        // We still have more frames to paint
+        frameId = requestAnimationFrame(onFrame);
+      }
+    }
+
+    function onProgress(progress) {
+      node.style.opacity = progress;
+    }
+
+    function start() {
+      onProgress(0);
+      startTime = performance.now();
+      frameId = requestAnimationFrame(onFrame);
+    }
+
+    function stop() {
+      cancelAnimationFrame(frameId);
+      startTime = null;
+      frameId = null;
+    }
+
+    start();
+    return () => stop();
+  }, []);
+
+  return (
+    <h1 className="welcome" ref={ref}>
+      Welcome
+    </h1>
+  );
+}
+
+export default function App() {
+  const [show, setShow] = useState(false);
+  return (
+    <>
+      <button onClick={() => setShow(!show)}>
+        {show ? 'Remove' : 'Show'}
+      </button>
+      <hr />
+      {show && <Welcome />}
+    </>
+  );
+}
+```
+
+```css
+label, button { display: block; margin-bottom: 20px; }
+html, body { min-height: 300px; }
+.welcome {
+  opacity: 0;
+  color: white;
+  padding: 50px;
+  text-align: center;
+  font-size: 50px;
+  background-image: radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%);
+}
+```
+
+</Sandpack>
+
+To make the component more readable, you might extract the logic into a `useFadeIn` custom Hook:
+
+<Sandpack>
+
+```js
+import { useState, useEffect, useRef } from 'react';
+import { useFadeIn } from './useFadeIn.js';
+
+function Welcome() {
+  const ref = useRef(null);
+
+  useFadeIn(ref, 1000);
+
+  return (
+    <h1 className="welcome" ref={ref}>
+      Welcome
+    </h1>
+  );
+}
+
+export default function App() {
+  const [show, setShow] = useState(false);
+  return (
+    <>
+      <button onClick={() => setShow(!show)}>
+        {show ? 'Remove' : 'Show'}
+      </button>
+      <hr />
+      {show && <Welcome />}
+    </>
+  );
+}
+```
+
+```js useFadeIn.js
+import { useEffect } from 'react';
+
+export function useFadeIn(ref, duration) {
+  useEffect(() => {
+    const node = ref.current;
+
+    let startTime = performance.now();
+    let frameId = null;
+
+    function onFrame(now) {
+      const timePassed = now - startTime;
+      const progress = Math.min(timePassed / duration, 1);
+      onProgress(progress);
+      if (progress < 1) {
+        // We still have more frames to paint
+        frameId = requestAnimationFrame(onFrame);
+      }
+    }
+
+    function onProgress(progress) {
+      node.style.opacity = progress;
+    }
+
+    function start() {
+      onProgress(0);
+      startTime = performance.now();
+      frameId = requestAnimationFrame(onFrame);
+    }
+
+    function stop() {
+      cancelAnimationFrame(frameId);
+      startTime = null;
+      frameId = null;
+    }
+
+    start();
+    return () => stop();
+  }, [ref, duration]);
+}
+```
+
+```css
+label, button { display: block; margin-bottom: 20px; }
+html, body { min-height: 300px; }
+.welcome {
+  opacity: 0;
+  color: white;
+  padding: 50px;
+  text-align: center;
+  font-size: 50px;
+  background-image: radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%);
+}
+```
+
+</Sandpack>
+
+You could keep the `useFadeIn` code as is, but you could also refactor it more. For example, you could extract the logic for setting up the animation loop out of `useFadeIn` into a new custom Hook called `useAnimationLoop`:
+
+<Sandpack>
+
+```js
+import { useState, useEffect, useRef } from 'react';
+import { useFadeIn } from './useFadeIn.js';
+
+function Welcome() {
+  const ref = useRef(null);
+
+  useFadeIn(ref, 1000);
+
+  return (
+    <h1 className="welcome" ref={ref}>
+      Welcome
+    </h1>
+  );
+}
+
+export default function App() {
+  const [show, setShow] = useState(false);
+  return (
+    <>
+      <button onClick={() => setShow(!show)}>
+        {show ? 'Remove' : 'Show'}
+      </button>
+      <hr />
+      {show && <Welcome />}
+    </>
+  );
+}
+```
+
+```js useFadeIn.js active
+import { useState, useEffect } from 'react';
+import { experimental_useEffectEvent as useEffectEvent } from 'react';
+
+export function useFadeIn(ref, duration) {
+  const [isRunning, setIsRunning] = useState(true);
+
+  useAnimationLoop(isRunning, (timePassed) => {
+    const progress = Math.min(timePassed / duration, 1);
+    ref.current.style.opacity = progress;
+    if (progress === 1) {
+      setIsRunning(false);
+    }
+  });
+}
+
+function useAnimationLoop(isRunning, drawFrame) {
+  const onFrame = useEffectEvent(drawFrame);
+
+  useEffect(() => {
+    if (!isRunning) {
+      return;
+    }
+
+    const startTime = performance.now();
+    let frameId = null;
+
+    function tick(now) {
+      const timePassed = now - startTime;
+      onFrame(timePassed);
+      frameId = requestAnimationFrame(tick);
+    }
+
+    tick();
+    return () => cancelAnimationFrame(frameId);
+  }, [isRunning]);
+}
+```
+
+```css
+label, button { display: block; margin-bottom: 20px; }
+html, body { min-height: 300px; }
+.welcome {
+  opacity: 0;
+  color: white;
+  padding: 50px;
+  text-align: center;
+  font-size: 50px;
+  background-image: radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%);
+}
+```
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "experimental",
+    "react-dom": "experimental",
+    "react-scripts": "latest"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+</Sandpack>
+
+However, you didn't *have to* do that. As with regular functions, ultimately you decide where to draw the boundaries between different parts of your code. For example, you could also take a very different approach. Instead of keeping the logic in the Effect, you could move most of the imperative logic inside a JavaScript [class:](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes)
+
+<Sandpack>
+
+```js
+import { useState, useEffect, useRef } from 'react';
+import { useFadeIn } from './useFadeIn.js';
+
+function Welcome() {
+  const ref = useRef(null);
+
+  useFadeIn(ref, 1000);
+
+  return (
+    <h1 className="welcome" ref={ref}>
+      Welcome
+    </h1>
+  );
+}
+
+export default function App() {
+  const [show, setShow] = useState(false);
+  return (
+    <>
+      <button onClick={() => setShow(!show)}>
+        {show ? 'Remove' : 'Show'}
+      </button>
+      <hr />
+      {show && <Welcome />}
+    </>
+  );
+}
+```
+
+```js useFadeIn.js active
+import { useState, useEffect } from 'react';
+import { FadeInAnimation } from './animation.js';
+
+export function useFadeIn(ref, duration) {
+  useEffect(() => {
+    const animation = new FadeInAnimation(ref.current);
+    animation.start(duration);
+    return () => {
+      animation.stop();
+    };
+  }, [ref, duration]);
+}
+```
+
+```js animation.js
+export class FadeInAnimation {
+  constructor(node) {
+    this.node = node;
+  }
+  start(duration) {
+    this.duration = duration;
+    this.onProgress(0);
+    this.startTime = performance.now();
+    this.frameId = requestAnimationFrame(() => this.onFrame());
+  }
+  onFrame() {
+    const timePassed = performance.now() - this.startTime;
+    const progress = Math.min(timePassed / this.duration, 1);
+    this.onProgress(progress);
+    if (progress === 1) {
+      this.stop();
+    } else {
+      // We still have more frames to paint
+      this.frameId = requestAnimationFrame(() => this.onFrame());
+    }
+  }
+  onProgress(progress) {
+    this.node.style.opacity = progress;
+  }
+  stop() {
+    cancelAnimationFrame(this.frameId);
+    this.startTime = null;
+    this.frameId = null;
+    this.duration = 0;
+  }
+}
+```
+
+```css
+label, button { display: block; margin-bottom: 20px; }
+html, body { min-height: 300px; }
+.welcome {
+  opacity: 0;
+  color: white;
+  padding: 50px;
+  text-align: center;
+  font-size: 50px;
+  background-image: radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%);
+}
+```
+
+</Sandpack>
+
+Effects let you connect React to external systems. The more coordination between Effects is needed (for example, to chain multiple animations), the more it makes sense to extract that logic out of Effects and Hooks *completely* like in the sandbox above. Then, the code you extracted *becomes* the "external system". This lets your Effects stay simple because they only need to send messages to the system you've moved outside React.
+
+The examples above assume that the fade-in logic needs to be written in JavaScript. However, this particular fade-in animation is both simpler and much more efficient to implement with a plain [CSS Animation:](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations)
+
+<Sandpack>
+
+```js
+import { useState, useEffect, useRef } from 'react';
+import './welcome.css';
+
+function Welcome() {
+  return (
+    <h1 className="welcome">
+      Welcome
+    </h1>
+  );
+}
+
+export default function App() {
+  const [show, setShow] = useState(false);
+  return (
+    <>
+      <button onClick={() => setShow(!show)}>
+        {show ? 'Remove' : 'Show'}
+      </button>
+      <hr />
+      {show && <Welcome />}
+    </>
+  );
+}
+```
+
+```css styles.css
+label, button { display: block; margin-bottom: 20px; }
+html, body { min-height: 300px; }
+```
+
+```css welcome.css active
+.welcome {
+  color: white;
+  padding: 50px;
+  text-align: center;
+  font-size: 50px;
+  background-image: radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%);
+
+  animation: fadeIn 1000ms;
+}
+
+@keyframes fadeIn {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+```
+
+</Sandpack>
+
+Sometimes, you don't even need a Hook!
+
+<Recap>
+
+- Custom Hooks let you share logic between components.
+- Custom Hooks must be named starting with `use` followed by a capital letter.
+- Custom Hooks only share stateful logic, not state itself.
+- You can pass reactive values from one Hook to another, and they stay up-to-date.
+- All Hooks re-run every time your component re-renders.
+- The code of your custom Hooks should be pure, like your component's code.
+- Wrap event handlers received by custom Hooks into Effect Events.
+- Don't create custom Hooks like `useMount`. Keep their purpose specific.
+- It's up to you how and where to choose the boundaries of your code.
+
+</Recap>
+
+<Challenges>
+
+#### Extract a `useCounter` Hook {/*extract-a-usecounter-hook*/}
+
+This component uses a state variable and an Effect to display a number that increments every second. Extract this logic into a custom Hook called `useCounter`. Your goal is to make the `Counter` component implementation look exactly like this:
+
+```js
+export default function Counter() {
+  const count = useCounter();
+  return <h1>Seconds passed: {count}</h1>;
+}
+```
+
+You'll need to write your custom Hook in `useCounter.js` and import it into the `Counter.js` file.
+
+<Sandpack>
+
+```js
+import { useState, useEffect } from 'react';
+
+export default function Counter() {
+  const [count, setCount] = useState(0);
+  useEffect(() => {
+    const id = setInterval(() => {
+      setCount(c => c + 1);
+    }, 1000);
+    return () => clearInterval(id);
+  }, []);
+  return <h1>Seconds passed: {count}</h1>;
+}
+```
+
+```js useCounter.js
+// Write your custom Hook in this file!
+```
+
+</Sandpack>
+
+<Solution>
+
+Your code should look like this:
+
+<Sandpack>
+
+```js
+import { useCounter } from './useCounter.js';
+
+export default function Counter() {
+  const count = useCounter();
+  return <h1>Seconds passed: {count}</h1>;
+}
+```
+
+```js useCounter.js
+import { useState, useEffect } from 'react';
+
+export function useCounter() {
+  const [count, setCount] = useState(0);
+  useEffect(() => {
+    const id = setInterval(() => {
+      setCount(c => c + 1);
+    }, 1000);
+    return () => clearInterval(id);
+  }, []);
+  return count;
+}
+```
+
+</Sandpack>
+
+Notice that `App.js` doesn't need to import `useState` or `useEffect` anymore.
+
+</Solution>
+
+#### Make the counter delay configurable {/*make-the-counter-delay-configurable*/}
+
+In this example, there is a `delay` state variable controlled by a slider, but its value is not used. Pass the `delay` value to your custom `useCounter` Hook, and change the `useCounter` Hook to use the passed `delay` instead of hardcoding `1000` ms.
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+import { useCounter } from './useCounter.js';
+
+export default function Counter() {
+  const [delay, setDelay] = useState(1000);
+  const count = useCounter();
+  return (
+    <>
+      <label>
+        Tick duration: {delay} ms
+        <br />
+        <input
+          type="range"
+          value={delay}
+          min="10"
+          max="2000"
+          onChange={e => setDelay(Number(e.target.value))}
+        />
+      </label>
+      <hr />
+      <h1>Ticks: {count}</h1>
+    </>
+  );
+}
+```
+
+```js useCounter.js
+import { useState, useEffect } from 'react';
+
+export function useCounter() {
+  const [count, setCount] = useState(0);
+  useEffect(() => {
+    const id = setInterval(() => {
+      setCount(c => c + 1);
+    }, 1000);
+    return () => clearInterval(id);
+  }, []);
+  return count;
+}
+```
+
+</Sandpack>
+
+<Solution>
+
+Pass the `delay` to your Hook with `useCounter(delay)`. Then, inside the Hook, use `delay` instead of the hardcoded `1000` value. You'll need to add `delay` to your Effect's dependencies. This ensures that a change in `delay` will reset the interval.
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+import { useCounter } from './useCounter.js';
+
+export default function Counter() {
+  const [delay, setDelay] = useState(1000);
+  const count = useCounter(delay);
+  return (
+    <>
+      <label>
+        Tick duration: {delay} ms
+        <br />
+        <input
+          type="range"
+          value={delay}
+          min="10"
+          max="2000"
+          onChange={e => setDelay(Number(e.target.value))}
+        />
+      </label>
+      <hr />
+      <h1>Ticks: {count}</h1>
+    </>
+  );
+}
+```
+
+```js useCounter.js
+import { useState, useEffect } from 'react';
+
+export function useCounter(delay) {
+  const [count, setCount] = useState(0);
+  useEffect(() => {
+    const id = setInterval(() => {
+      setCount(c => c + 1);
+    }, delay);
+    return () => clearInterval(id);
+  }, [delay]);
+  return count;
+}
+```
+
+</Sandpack>
+
+</Solution>
+
+#### Extract `useInterval` out of `useCounter` {/*extract-useinterval-out-of-usecounter*/}
+
+Currently, your `useCounter` Hook does two things. It sets up an interval, and it also increments a state variable on every interval tick. Split out the logic that sets up the interval into a separate Hook called `useInterval`. It should take two arguments: the `onTick` callback, and the `delay`. After this change, your `useCounter` implementation should look like this:
+
+```js
+export function useCounter(delay) {
+  const [count, setCount] = useState(0);
+  useInterval(() => {
+    setCount(c => c + 1);
+  }, delay);
+  return count;
+}
+```
+
+Write `useInterval` in the `useInterval.js` file and import it into the `useCounter.js` file.
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+import { useCounter } from './useCounter.js';
+
+export default function Counter() {
+  const count = useCounter(1000);
+  return <h1>Seconds passed: {count}</h1>;
+}
+```
+
+```js useCounter.js
+import { useState, useEffect } from 'react';
+
+export function useCounter(delay) {
+  const [count, setCount] = useState(0);
+  useEffect(() => {
+    const id = setInterval(() => {
+      setCount(c => c + 1);
+    }, delay);
+    return () => clearInterval(id);
+  }, [delay]);
+  return count;
+}
+```
+
+```js useInterval.js
+// Write your Hook here!
+```
+
+</Sandpack>
+
+<Solution>
+
+The logic inside `useInterval` should set up and clear the interval. It doesn't need to do anything else.
+
+<Sandpack>
+
+```js
+import { useCounter } from './useCounter.js';
+
+export default function Counter() {
+  const count = useCounter(1000);
+  return <h1>Seconds passed: {count}</h1>;
+}
+```
+
+```js useCounter.js
+import { useState } from 'react';
+import { useInterval } from './useInterval.js';
+
+export function useCounter(delay) {
+  const [count, setCount] = useState(0);
+  useInterval(() => {
+    setCount(c => c + 1);
+  }, delay);
+  return count;
+}
+```
+
+```js useInterval.js active
+import { useEffect } from 'react';
+
+export function useInterval(onTick, delay) {
+  useEffect(() => {
+    const id = setInterval(onTick, delay);
+    return () => clearInterval(id);
+  }, [onTick, delay]);
+}
+```
+
+</Sandpack>
+
+Note that there is a bit of a problem with this solution, which you'll solve in the next challenge.
+
+</Solution>
+
+#### Fix a resetting interval {/*fix-a-resetting-interval*/}
+
+In this example, there are *two* separate intervals.
+
+The `App` component calls `useCounter`, which calls `useInterval` to update the counter every second. But the `App` component *also* calls `useInterval` to randomly update the page background color every two seconds.
+
+For some reason, the callback that updates the page background never runs. Add some logs inside `useInterval`:
+
+```js {2,5}
+  useEffect(() => {
+    console.log('✅ Setting up an interval with delay ', delay)
+    const id = setInterval(onTick, delay);
+    return () => {
+      console.log('❌ Clearing an interval with delay ', delay)
+      clearInterval(id);
+    };
+  }, [onTick, delay]);
+```
+
+Do the logs match what you expect to happen? If some of your Effects seem to re-synchronize unnecessarily, can you guess which dependency is causing that to happen? Is there some way to [remove that dependency](/learn/removing-effect-dependencies) from your Effect?
+
+After you fix the issue, you should expect the page background to update every two seconds.
+
+<Hint>
+
+It looks like your `useInterval` Hook accepts an event listener as an argument. Can you think of some way to wrap that event listener so that it doesn't need to be a dependency of your Effect?
+
+</Hint>
+
+<Sandpack>
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "experimental",
+    "react-dom": "experimental",
+    "react-scripts": "latest"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+```js
+import { useCounter } from './useCounter.js';
+import { useInterval } from './useInterval.js';
+
+export default function Counter() {
+  const count = useCounter(1000);
+
+  useInterval(() => {
+    const randomColor = `hsla(${Math.random() * 360}, 100%, 50%, 0.2)`;
+    document.body.style.backgroundColor = randomColor;
+  }, 2000);
+
+  return <h1>Seconds passed: {count}</h1>;
+}
+```
+
+```js useCounter.js
+import { useState } from 'react';
+import { useInterval } from './useInterval.js';
+
+export function useCounter(delay) {
+  const [count, setCount] = useState(0);
+  useInterval(() => {
+    setCount(c => c + 1);
+  }, delay);
+  return count;
+}
+```
+
+```js useInterval.js
+import { useEffect } from 'react';
+import { experimental_useEffectEvent as useEffectEvent } from 'react';
+
+export function useInterval(onTick, delay) {
+  useEffect(() => {
+    const id = setInterval(onTick, delay);
+    return () => {
+      clearInterval(id);
+    };
+  }, [onTick, delay]);
+}
+```
+
+</Sandpack>
+
+<Solution>
+
+Inside `useInterval`, wrap the tick callback into an Effect Event, as you did [earlier on this page.](/learn/reusing-logic-with-custom-hooks#passing-event-handlers-to-custom-hooks)
+
+This will allow you to omit `onTick` from dependencies of your Effect. The Effect won't re-synchronize on every re-render of the component, so the page background color change interval won't get reset every second before it has a chance to fire.
+
+With this change, both intervals work as expected and don't interfere with each other:
+
+<Sandpack>
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "experimental",
+    "react-dom": "experimental",
+    "react-scripts": "latest"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+
+```js
+import { useCounter } from './useCounter.js';
+import { useInterval } from './useInterval.js';
+
+export default function Counter() {
+  const count = useCounter(1000);
+
+  useInterval(() => {
+    const randomColor = `hsla(${Math.random() * 360}, 100%, 50%, 0.2)`;
+    document.body.style.backgroundColor = randomColor;
+  }, 2000);
+
+  return <h1>Seconds passed: {count}</h1>;
+}
+```
+
+```js useCounter.js
+import { useState } from 'react';
+import { useInterval } from './useInterval.js';
+
+export function useCounter(delay) {
+  const [count, setCount] = useState(0);
+  useInterval(() => {
+    setCount(c => c + 1);
+  }, delay);
+  return count;
+}
+```
+
+```js useInterval.js active
+import { useEffect } from 'react';
+import { experimental_useEffectEvent as useEffectEvent } from 'react';
+
+export function useInterval(callback, delay) {
+  const onTick = useEffectEvent(callback);
+  useEffect(() => {
+    const id = setInterval(onTick, delay);
+    return () => clearInterval(id);
+  }, [delay]);
+}
+```
+
+</Sandpack>
+
+</Solution>
+
+#### Implement a staggering movement {/*implement-a-staggering-movement*/}
+
+In this example, the `usePointerPosition()` Hook tracks the current pointer position. Try moving your cursor or your finger over the preview area and see the red dot follow your movement. Its position is saved in the `pos1` variable.
+
+In fact, there are five (!) different red dots being rendered. You don't see them because currently they all appear at the same position. This is what you need to fix. What you want to implement instead is a "staggered" movement: each dot should "follow" the previous dot's path. For example, if you quickly move your cursor, the first dot should follow it immediately, the second dot should follow the first dot with a small delay, the third dot should follow the second dot, and so on.
+
+You need to implement the `useDelayedValue` custom Hook. Its current implementation returns the `value` provided to it. Instead, you want to return the value back from `delay` milliseconds ago. You might need some state and an Effect to do this.
+
+After you implement `useDelayedValue`, you should see the dots move following one another.
+
+<Hint>
+
+You'll need to store the `delayedValue` as a state variable inside your custom Hook. When the `value` changes, you'll want to run an Effect. This Effect should update `delayedValue` after the `delay`. You might find it helpful to call `setTimeout`.
+
+Does this Effect need cleanup? Why or why not?
+
+</Hint>
+
+<Sandpack>
+
+```js
+import { usePointerPosition } from './usePointerPosition.js';
+
+function useDelayedValue(value, delay) {
+  // TODO: Implement this Hook
+  return value;
+}
+
+export default function Canvas() {
+  const pos1 = usePointerPosition();
+  const pos2 = useDelayedValue(pos1, 100);
+  const pos3 = useDelayedValue(pos2, 200);
+  const pos4 = useDelayedValue(pos3, 100);
+  const pos5 = useDelayedValue(pos3, 50);
+  return (
+    <>
+      <Dot position={pos1} opacity={1} />
+      <Dot position={pos2} opacity={0.8} />
+      <Dot position={pos3} opacity={0.6} />
+      <Dot position={pos4} opacity={0.4} />
+      <Dot position={pos5} opacity={0.2} />
+    </>
+  );
+}
+
+function Dot({ position, opacity }) {
+  return (
+    <div style={{
+      position: 'absolute',
+      backgroundColor: 'pink',
+      borderRadius: '50%',
+      opacity,
+      transform: `translate(${position.x}px, ${position.y}px)`,
+      pointerEvents: 'none',
+      left: -20,
+      top: -20,
+      width: 40,
+      height: 40,
+    }} />
+  );
+}
+```
+
+```js usePointerPosition.js
+import { useState, useEffect } from 'react';
+
+export function usePointerPosition() {
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  useEffect(() => {
+    function handleMove(e) {
+      setPosition({ x: e.clientX, y: e.clientY });
+    }
+    window.addEventListener('pointermove', handleMove);
+    return () => window.removeEventListener('pointermove', handleMove);
+  }, []);
+  return position;
+}
+```
+
+```css
+body { min-height: 300px; }
+```
+
+</Sandpack>
+
+<Solution>
+
+Here is a working version. You keep the `delayedValue` as a state variable. When `value` updates, your Effect schedules a timeout to update the `delayedValue`. This is why the `delayedValue` always "lags behind" the actual `value`.
+
+<Sandpack>
+
+```js
+import { useState, useEffect } from 'react';
+import { usePointerPosition } from './usePointerPosition.js';
+
+function useDelayedValue(value, delay) {
+  const [delayedValue, setDelayedValue] = useState(value);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setDelayedValue(value);
+    }, delay);
+  }, [value, delay]);
+
+  return delayedValue;
+}
+
+export default function Canvas() {
+  const pos1 = usePointerPosition();
+  const pos2 = useDelayedValue(pos1, 100);
+  const pos3 = useDelayedValue(pos2, 200);
+  const pos4 = useDelayedValue(pos3, 100);
+  const pos5 = useDelayedValue(pos3, 50);
+  return (
+    <>
+      <Dot position={pos1} opacity={1} />
+      <Dot position={pos2} opacity={0.8} />
+      <Dot position={pos3} opacity={0.6} />
+      <Dot position={pos4} opacity={0.4} />
+      <Dot position={pos5} opacity={0.2} />
+    </>
+  );
+}
+
+function Dot({ position, opacity }) {
+  return (
+    <div style={{
+      position: 'absolute',
+      backgroundColor: 'pink',
+      borderRadius: '50%',
+      opacity,
+      transform: `translate(${position.x}px, ${position.y}px)`,
+      pointerEvents: 'none',
+      left: -20,
+      top: -20,
+      width: 40,
+      height: 40,
+    }} />
+  );
+}
+```
+
+```js usePointerPosition.js
+import { useState, useEffect } from 'react';
+
+export function usePointerPosition() {
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  useEffect(() => {
+    function handleMove(e) {
+      setPosition({ x: e.clientX, y: e.clientY });
+    }
+    window.addEventListener('pointermove', handleMove);
+    return () => window.removeEventListener('pointermove', handleMove);
+  }, []);
+  return position;
+}
+```
+
+```css
+body { min-height: 300px; }
+```
+
+</Sandpack>
+
+Note that this Effect *does not* need cleanup. If you called `clearTimeout` in the cleanup function, then each time the `value` changes, it would reset the already scheduled timeout. To keep the movement continuous, you want all the timeouts to fire.
+
+</Solution>
+
+</Challenges>
diff --git a/beta/src/content/learn/scaling-up-with-reducer-and-context.md b/beta/src/content/learn/scaling-up-with-reducer-and-context.md
new file mode 100644
index 000000000..b37f60b42
--- /dev/null
+++ b/beta/src/content/learn/scaling-up-with-reducer-and-context.md
@@ -0,0 +1,1362 @@
+---
+title: Scaling Up with Reducer and Context
+---
+
+<Intro>
+
+Reducers let you consolidate a component's state update logic. Context lets you pass information deep down to other components. You can combine reducers and context together to manage state of a complex screen.
+
+</Intro>
+
+<YouWillLearn>
+
+* How to combine a reducer with context
+* How to avoid passing state and dispatch through props
+* How to keep context and state logic in a separate file
+
+</YouWillLearn>
+
+## Combining a reducer with context {/*combining-a-reducer-with-context*/}
+
+In this example from [the introduction to reducers](/learn/extracting-state-logic-into-a-reducer), the state is managed by a reducer. The reducer function contains all of the state update logic and is declared at the bottom of this file:
+
+<Sandpack>
+
+```js App.js
+import { useReducer } from 'react';
+import AddTask from './AddTask.js';
+import TaskList from './TaskList.js';
+
+export default function TaskApp() {
+  const [tasks, dispatch] = useReducer(
+    tasksReducer,
+    initialTasks
+  );
+
+  function handleAddTask(text) {
+    dispatch({
+      type: 'added',
+      id: nextId++,
+      text: text,
+    });
+  }
+
+  function handleChangeTask(task) {
+    dispatch({
+      type: 'changed',
+      task: task
+    });
+  }
+
+  function handleDeleteTask(taskId) {
+    dispatch({
+      type: 'deleted',
+      id: taskId
+    });
+  }
+
+  return (
+    <>
+      <h1>Day off in Kyoto</h1>
+      <AddTask
+        onAddTask={handleAddTask}
+      />
+      <TaskList
+        tasks={tasks}
+        onChangeTask={handleChangeTask}
+        onDeleteTask={handleDeleteTask}
+      />
+    </>
+  );
+}
+
+function tasksReducer(tasks, action) {
+  switch (action.type) {
+    case 'added': {
+      return [...tasks, {
+        id: action.id,
+        text: action.text,
+        done: false
+      }];
+    }
+    case 'changed': {
+      return tasks.map(t => {
+        if (t.id === action.task.id) {
+          return action.task;
+        } else {
+          return t;
+        }
+      });
+    }
+    case 'deleted': {
+      return tasks.filter(t => t.id !== action.id);
+    }
+    default: {
+      throw Error('Unknown action: ' + action.type);
+    }
+  }
+}
+
+let nextId = 3;
+const initialTasks = [
+  { id: 0, text: 'Philosopher’s Path', done: true },
+  { id: 1, text: 'Visit the temple', done: false },
+  { id: 2, text: 'Drink matcha', done: false }
+];
+```
+
+```js AddTask.js
+import { useState } from 'react';
+
+export default function AddTask({ onAddTask }) {
+  const [text, setText] = useState('');
+  return (
+    <>
+      <input
+        placeholder="Add task"
+        value={text}
+        onChange={e => setText(e.target.value)}
+      />
+      <button onClick={() => {
+        setText('');
+        onAddTask(text);
+      }}>Add</button>
+    </>
+  )
+}
+```
+
+```js TaskList.js
+import { useState } from 'react';
+
+export default function TaskList({
+  tasks,
+  onChangeTask,
+  onDeleteTask
+}) {
+  return (
+    <ul>
+      {tasks.map(task => (
+        <li key={task.id}>
+          <Task
+            task={task}
+            onChange={onChangeTask}
+            onDelete={onDeleteTask}
+          />
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function Task({ task, onChange, onDelete }) {
+  const [isEditing, setIsEditing] = useState(false);
+  let taskContent;
+  if (isEditing) {
+    taskContent = (
+      <>
+        <input
+          value={task.text}
+          onChange={e => {
+            onChange({
+              ...task,
+              text: e.target.value
+            });
+          }} />
+        <button onClick={() => setIsEditing(false)}>
+          Save
+        </button>
+      </>
+    );
+  } else {
+    taskContent = (
+      <>
+        {task.text}
+        <button onClick={() => setIsEditing(true)}>
+          Edit
+        </button>
+      </>
+    );
+  }
+  return (
+    <label>
+      <input
+        type="checkbox"
+        checked={task.done}
+        onChange={e => {
+          onChange({
+            ...task,
+            done: e.target.checked
+          });
+        }}
+      />
+      {taskContent}
+      <button onClick={() => onDelete(task.id)}>
+        Delete
+      </button>
+    </label>
+  );
+}
+```
+
+```css
+button { margin: 5px; }
+li { list-style-type: none; }
+ul, li { margin: 0; padding: 0; }
+```
+
+</Sandpack>
+
+A reducer helps keep the event handlers short and concise. However, as your app grows, you might run into another difficulty. **Currently, the `tasks` state and the `dispatch` function are only available in the top-level `TaskApp` component.** To let other components read the list of tasks or change it, you have to explicitly [pass down](/learn/passing-props-to-a-component) the current state and the event handlers that change it as props.
+
+For example, `TaskApp` passes a list of tasks and the event handlers to `TaskList`:
+
+```js
+<TaskList
+  tasks={tasks}
+  onChangeTask={handleChangeTask}
+  onDeleteTask={handleDeleteTask}
+/>
+```
+
+And `TaskList` passes the event handlers to `Task`:
+
+```js
+<Task
+  task={task}
+  onChange={onChangeTask}
+  onDelete={onDeleteTask}
+/>
+```
+
+In a small example like this, this works well, but if you have tens or hundreds of components in the middle, passing down all state and functions can be quite frustrating!
+
+This is why, as an alternative to passing them through props, you might want to put both the `tasks` state and the `dispatch` function [into context.](/learn/passing-data-deeply-with-context) **This way, any component below `TaskApp` in the tree can read the tasks and dispatch actions without the repetitive "prop drilling".**
+
+Here is how you can combine a reducer with context:
+
+1. **Create** the context.
+2. **Put** state and dispatch into context.
+3. **Use** context anywhere in the tree.
+
+### Step 1: Create the context {/*step-1-create-the-context*/}
+
+The `useReducer` Hook returns the current `tasks` and the `dispatch` function that lets you update them:
+
+```js
+const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);
+```
+
+To pass them down the tree, you will [create](/learn/passing-data-deeply-with-context#step-2-use-the-context) two separate contexts:
+
+- `TasksContext` provides the current list of tasks.
+- `TasksDispatchContext` provides the function that lets components dispatch actions.
+
+Export them from a separate file so that you can later import them from other files:
+
+<Sandpack>
+
+```js App.js
+import { useReducer } from 'react';
+import AddTask from './AddTask.js';
+import TaskList from './TaskList.js';
+
+export default function TaskApp() {
+  const [tasks, dispatch] = useReducer(
+    tasksReducer,
+    initialTasks
+  );
+
+  function handleAddTask(text) {
+    dispatch({
+      type: 'added',
+      id: nextId++,
+      text: text,
+    });
+  }
+
+  function handleChangeTask(task) {
+    dispatch({
+      type: 'changed',
+      task: task
+    });
+  }
+
+  function handleDeleteTask(taskId) {
+    dispatch({
+      type: 'deleted',
+      id: taskId
+    });
+  }
+
+  return (
+    <>
+      <h1>Day off in Kyoto</h1>
+      <AddTask
+        onAddTask={handleAddTask}
+      />
+      <TaskList
+        tasks={tasks}
+        onChangeTask={handleChangeTask}
+        onDeleteTask={handleDeleteTask}
+      />
+    </>
+  );
+}
+
+function tasksReducer(tasks, action) {
+  switch (action.type) {
+    case 'added': {
+      return [...tasks, {
+        id: action.id,
+        text: action.text,
+        done: false
+      }];
+    }
+    case 'changed': {
+      return tasks.map(t => {
+        if (t.id === action.task.id) {
+          return action.task;
+        } else {
+          return t;
+        }
+      });
+    }
+    case 'deleted': {
+      return tasks.filter(t => t.id !== action.id);
+    }
+    default: {
+      throw Error('Unknown action: ' + action.type);
+    }
+  }
+}
+
+let nextId = 3;
+const initialTasks = [
+  { id: 0, text: 'Philosopher’s Path', done: true },
+  { id: 1, text: 'Visit the temple', done: false },
+  { id: 2, text: 'Drink matcha', done: false }
+];
+```
+
+```js TasksContext.js active
+import { createContext } from 'react';
+
+export const TasksContext = createContext(null);
+export const TasksDispatchContext = createContext(null);
+```
+
+```js AddTask.js
+import { useState } from 'react';
+
+export default function AddTask({ onAddTask }) {
+  const [text, setText] = useState('');
+  return (
+    <>
+      <input
+        placeholder="Add task"
+        value={text}
+        onChange={e => setText(e.target.value)}
+      />
+      <button onClick={() => {
+        setText('');
+        onAddTask(text);
+      }}>Add</button>
+    </>
+  )
+}
+```
+
+```js TaskList.js
+import { useState } from 'react';
+
+export default function TaskList({
+  tasks,
+  onChangeTask,
+  onDeleteTask
+}) {
+  return (
+    <ul>
+      {tasks.map(task => (
+        <li key={task.id}>
+          <Task
+            task={task}
+            onChange={onChangeTask}
+            onDelete={onDeleteTask}
+          />
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function Task({ task, onChange, onDelete }) {
+  const [isEditing, setIsEditing] = useState(false);
+  let taskContent;
+  if (isEditing) {
+    taskContent = (
+      <>
+        <input
+          value={task.text}
+          onChange={e => {
+            onChange({
+              ...task,
+              text: e.target.value
+            });
+          }} />
+        <button onClick={() => setIsEditing(false)}>
+          Save
+        </button>
+      </>
+    );
+  } else {
+    taskContent = (
+      <>
+        {task.text}
+        <button onClick={() => setIsEditing(true)}>
+          Edit
+        </button>
+      </>
+    );
+  }
+  return (
+    <label>
+      <input
+        type="checkbox"
+        checked={task.done}
+        onChange={e => {
+          onChange({
+            ...task,
+            done: e.target.checked
+          });
+        }}
+      />
+      {taskContent}
+      <button onClick={() => onDelete(task.id)}>
+        Delete
+      </button>
+    </label>
+  );
+}
+```
+
+```css
+button { margin: 5px; }
+li { list-style-type: none; }
+ul, li { margin: 0; padding: 0; }
+```
+
+</Sandpack>
+
+Here, you're passing `null` as the default value to both contexts. The actual values will be provided by the `TaskApp` component.
+
+### Step 2: Put state and dispatch into context {/*step-2-put-state-and-dispatch-into-context*/}
+
+Now you can import both contexts in your `TaskApp` component. Take the `tasks` and `dispatch` returned by `useReducer()` and [provide them](/learn/passing-data-deeply-with-context#step-3-provide-the-context) to the entire tree below:
+
+```js {4,7-8}
+import { TasksContext, TasksDispatchContext } from './TasksContext.js';
+
+export default function TaskApp() {
+  const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);
+  // ...
+  return (
+    <TasksContext.Provider value={tasks}>
+      <TasksDispatchContext.Provider value={dispatch}>
+        ...
+      </TasksDispatchContext.Provider>
+    </TasksContext.Provider>
+  );
+}
+```
+
+For now, you pass the information both via props and in context:
+
+<Sandpack>
+
+```js App.js
+import { useReducer } from 'react';
+import AddTask from './AddTask.js';
+import TaskList from './TaskList.js';
+import { TasksContext, TasksDispatchContext } from './TasksContext.js';
+
+export default function TaskApp() {
+  const [tasks, dispatch] = useReducer(
+    tasksReducer,
+    initialTasks
+  );
+
+  function handleAddTask(text) {
+    dispatch({
+      type: 'added',
+      id: nextId++,
+      text: text,
+    });
+  }
+
+  function handleChangeTask(task) {
+    dispatch({
+      type: 'changed',
+      task: task
+    });
+  }
+
+  function handleDeleteTask(taskId) {
+    dispatch({
+      type: 'deleted',
+      id: taskId
+    });
+  }
+
+  return (
+    <TasksContext.Provider value={tasks}>
+      <TasksDispatchContext.Provider value={dispatch}>
+        <h1>Day off in Kyoto</h1>
+        <AddTask
+          onAddTask={handleAddTask}
+        />
+        <TaskList
+          tasks={tasks}
+          onChangeTask={handleChangeTask}
+          onDeleteTask={handleDeleteTask}
+        />
+      </TasksDispatchContext.Provider>
+    </TasksContext.Provider>
+  );
+}
+
+function tasksReducer(tasks, action) {
+  switch (action.type) {
+    case 'added': {
+      return [...tasks, {
+        id: action.id,
+        text: action.text,
+        done: false
+      }];
+    }
+    case 'changed': {
+      return tasks.map(t => {
+        if (t.id === action.task.id) {
+          return action.task;
+        } else {
+          return t;
+        }
+      });
+    }
+    case 'deleted': {
+      return tasks.filter(t => t.id !== action.id);
+    }
+    default: {
+      throw Error('Unknown action: ' + action.type);
+    }
+  }
+}
+
+let nextId = 3;
+const initialTasks = [
+  { id: 0, text: 'Philosopher’s Path', done: true },
+  { id: 1, text: 'Visit the temple', done: false },
+  { id: 2, text: 'Drink matcha', done: false }
+];
+```
+
+```js TasksContext.js
+import { createContext } from 'react';
+
+export const TasksContext = createContext(null);
+export const TasksDispatchContext = createContext(null);
+```
+
+```js AddTask.js
+import { useState } from 'react';
+
+export default function AddTask({ onAddTask }) {
+  const [text, setText] = useState('');
+  return (
+    <>
+      <input
+        placeholder="Add task"
+        value={text}
+        onChange={e => setText(e.target.value)}
+      />
+      <button onClick={() => {
+        setText('');
+        onAddTask(text);
+      }}>Add</button>
+    </>
+  )
+}
+```
+
+```js TaskList.js
+import { useState } from 'react';
+
+export default function TaskList({
+  tasks,
+  onChangeTask,
+  onDeleteTask
+}) {
+  return (
+    <ul>
+      {tasks.map(task => (
+        <li key={task.id}>
+          <Task
+            task={task}
+            onChange={onChangeTask}
+            onDelete={onDeleteTask}
+          />
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function Task({ task, onChange, onDelete }) {
+  const [isEditing, setIsEditing] = useState(false);
+  let taskContent;
+  if (isEditing) {
+    taskContent = (
+      <>
+        <input
+          value={task.text}
+          onChange={e => {
+            onChange({
+              ...task,
+              text: e.target.value
+            });
+          }} />
+        <button onClick={() => setIsEditing(false)}>
+          Save
+        </button>
+      </>
+    );
+  } else {
+    taskContent = (
+      <>
+        {task.text}
+        <button onClick={() => setIsEditing(true)}>
+          Edit
+        </button>
+      </>
+    );
+  }
+  return (
+    <label>
+      <input
+        type="checkbox"
+        checked={task.done}
+        onChange={e => {
+          onChange({
+            ...task,
+            done: e.target.checked
+          });
+        }}
+      />
+      {taskContent}
+      <button onClick={() => onDelete(task.id)}>
+        Delete
+      </button>
+    </label>
+  );
+}
+```
+
+```css
+button { margin: 5px; }
+li { list-style-type: none; }
+ul, li { margin: 0; padding: 0; }
+```
+
+</Sandpack>
+
+In the next step, you will remove prop passing.
+
+### Step 3: Use context anywhere in the tree {/*step-3-use-context-anywhere-in-the-tree*/}
+
+Now you don't need to pass the list of tasks or the event handlers down the tree:
+
+```js {4-5}
+<TasksContext.Provider value={tasks}>
+  <TasksDispatchContext.Provider value={dispatch}>
+    <h1>Day off in Kyoto</h1>
+    <AddTask />
+    <TaskList />
+  </TasksDispatchContext.Provider>
+</TasksContext.Provider>
+```
+
+Instead, any component that needs the task list can read it from the `TaskContext`:
+
+```js {2}
+export default function TaskList() {
+  const tasks = useContext(TasksContext);
+  // ...
+```
+
+To update the task list, any component can read the `dispatch` function from context and call it:
+
+```js {3,9-13}
+export default function AddTask() {
+  const [text, setText] = useState('');
+  const dispatch = useContext(TasksDispatchContext);
+  // ...
+  return (
+    // ...
+    <button onClick={() => {
+      setText('');
+      dispatch({
+        type: 'added',
+        id: nextId++,
+        text: text,
+      });
+    }}>Add</button>
+    // ...
+```
+
+**The `TaskApp` component does not pass any event handlers down, and the `TaskList` does not pass any event handlers to the `Task` component either.** Each component reads the context that it needs:
+
+<Sandpack>
+
+```js App.js
+import { useReducer } from 'react';
+import AddTask from './AddTask.js';
+import TaskList from './TaskList.js';
+import { TasksContext, TasksDispatchContext } from './TasksContext.js';
+
+export default function TaskApp() {
+  const [tasks, dispatch] = useReducer(
+    tasksReducer,
+    initialTasks
+  );
+
+  return (
+    <TasksContext.Provider value={tasks}>
+      <TasksDispatchContext.Provider value={dispatch}>
+        <h1>Day off in Kyoto</h1>
+        <AddTask />
+        <TaskList />
+      </TasksDispatchContext.Provider>
+    </TasksContext.Provider>
+  );
+}
+
+function tasksReducer(tasks, action) {
+  switch (action.type) {
+    case 'added': {
+      return [...tasks, {
+        id: action.id,
+        text: action.text,
+        done: false
+      }];
+    }
+    case 'changed': {
+      return tasks.map(t => {
+        if (t.id === action.task.id) {
+          return action.task;
+        } else {
+          return t;
+        }
+      });
+    }
+    case 'deleted': {
+      return tasks.filter(t => t.id !== action.id);
+    }
+    default: {
+      throw Error('Unknown action: ' + action.type);
+    }
+  }
+}
+
+const initialTasks = [
+  { id: 0, text: 'Philosopher’s Path', done: true },
+  { id: 1, text: 'Visit the temple', done: false },
+  { id: 2, text: 'Drink matcha', done: false }
+];
+```
+
+```js TasksContext.js
+import { createContext } from 'react';
+
+export const TasksContext = createContext(null);
+export const TasksDispatchContext = createContext(null);
+```
+
+```js AddTask.js
+import { useState, useContext } from 'react';
+import { TasksDispatchContext } from './TasksContext.js';
+
+export default function AddTask() {
+  const [text, setText] = useState('');
+  const dispatch = useContext(TasksDispatchContext);
+  return (
+    <>
+      <input
+        placeholder="Add task"
+        value={text}
+        onChange={e => setText(e.target.value)}
+      />
+      <button onClick={() => {
+        setText('');
+        dispatch({
+          type: 'added',
+          id: nextId++,
+          text: text,
+        }); 
+      }}>Add</button>
+    </>
+  );
+}
+
+let nextId = 3;
+```
+
+```js TaskList.js active
+import { useState, useContext } from 'react';
+import { TasksContext, TasksDispatchContext } from './TasksContext.js';
+
+export default function TaskList() {
+  const tasks = useContext(TasksContext);
+  return (
+    <ul>
+      {tasks.map(task => (
+        <li key={task.id}>
+          <Task task={task} />
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function Task({ task }) {
+  const [isEditing, setIsEditing] = useState(false);
+  const dispatch = useContext(TasksDispatchContext);
+  let taskContent;
+  if (isEditing) {
+    taskContent = (
+      <>
+        <input
+          value={task.text}
+          onChange={e => {
+            dispatch({
+              type: 'changed',
+              task: {
+                ...task,
+                text: e.target.value
+              }
+            });
+          }} />
+        <button onClick={() => setIsEditing(false)}>
+          Save
+        </button>
+      </>
+    );
+  } else {
+    taskContent = (
+      <>
+        {task.text}
+        <button onClick={() => setIsEditing(true)}>
+          Edit
+        </button>
+      </>
+    );
+  }
+  return (
+    <label>
+      <input
+        type="checkbox"
+        checked={task.done}
+        onChange={e => {
+          dispatch({
+            type: 'changed',
+            task: {
+              ...task,
+              done: e.target.checked
+            }
+          });
+        }}
+      />
+      {taskContent}
+      <button onClick={() => {
+        dispatch({
+          type: 'deleted',
+          id: task.id
+        });
+      }}>
+        Delete
+      </button>
+    </label>
+  );
+}
+```
+
+```css
+button { margin: 5px; }
+li { list-style-type: none; }
+ul, li { margin: 0; padding: 0; }
+```
+
+</Sandpack>
+
+**The state still "lives" in the top-level `TaskApp` component, managed with `useReducer`.** But its `tasks` and `dispatch` are now available to every component below in the tree by importing and using these contexts.
+
+## Moving all wiring into a single file {/*moving-all-wiring-into-a-single-file*/}
+
+You don't have to do this, but you could further declutter the components by moving both reducer and context into a single file. Currently, `TasksContext.js` contains only two context declarations:
+
+```js
+import { createContext } from 'react';
+
+export const TasksContext = createContext(null);
+export const TasksDispatchContext = createContext(null);
+```
+
+This file is about to get crowded! You'll move the reducer into that same file. Then you'll declare a new `TasksProvider` component in the same file. This component will tie all the pieces together:
+
+1. It will manage the state with a reducer.
+2. It will provide both contexts to components below.
+3. It will [take `children` as a prop](/learn/passing-props-to-a-component#passing-jsx-as-children) so you can pass JSX to it.
+
+```js
+export function TasksProvider({ children }) {
+  const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);
+
+  return (
+    <TasksContext.Provider value={tasks}>
+      <TasksDispatchContext.Provider value={dispatch}>
+        {children}
+      </TasksDispatchContext.Provider>
+    </TasksContext.Provider>
+  );
+}
+```
+
+**This removes all the complexity and wiring from your `TaskApp` component:**
+
+<Sandpack>
+
+```js App.js
+import AddTask from './AddTask.js';
+import TaskList from './TaskList.js';
+import { TasksProvider } from './TasksContext.js';
+
+export default function TaskApp() {
+  return (
+    <TasksProvider>
+      <h1>Day off in Kyoto</h1>
+      <AddTask />
+      <TaskList />
+    </TasksProvider>
+  );
+}
+```
+
+```js TasksContext.js
+import { createContext, useReducer } from 'react';
+
+export const TasksContext = createContext(null);
+export const TasksDispatchContext = createContext(null);
+
+export function TasksProvider({ children }) {
+  const [tasks, dispatch] = useReducer(
+    tasksReducer,
+    initialTasks
+  );
+
+  return (
+    <TasksContext.Provider value={tasks}>
+      <TasksDispatchContext.Provider value={dispatch}>
+        {children}
+      </TasksDispatchContext.Provider>
+    </TasksContext.Provider>
+  );
+}
+
+function tasksReducer(tasks, action) {
+  switch (action.type) {
+    case 'added': {
+      return [...tasks, {
+        id: action.id,
+        text: action.text,
+        done: false
+      }];
+    }
+    case 'changed': {
+      return tasks.map(t => {
+        if (t.id === action.task.id) {
+          return action.task;
+        } else {
+          return t;
+        }
+      });
+    }
+    case 'deleted': {
+      return tasks.filter(t => t.id !== action.id);
+    }
+    default: {
+      throw Error('Unknown action: ' + action.type);
+    }
+  }
+}
+
+const initialTasks = [
+  { id: 0, text: 'Philosopher’s Path', done: true },
+  { id: 1, text: 'Visit the temple', done: false },
+  { id: 2, text: 'Drink matcha', done: false }
+];
+```
+
+```js AddTask.js
+import { useState, useContext } from 'react';
+import { TasksDispatchContext } from './TasksContext.js';
+
+export default function AddTask() {
+  const [text, setText] = useState('');
+  const dispatch = useContext(TasksDispatchContext);
+  return (
+    <>
+      <input
+        placeholder="Add task"
+        value={text}
+        onChange={e => setText(e.target.value)}
+      />
+      <button onClick={() => {
+        setText('');
+        dispatch({
+          type: 'added',
+          id: nextId++,
+          text: text,
+        }); 
+      }}>Add</button>
+    </>
+  );
+}
+
+let nextId = 3;
+```
+
+```js TaskList.js
+import { useState, useContext } from 'react';
+import { TasksContext, TasksDispatchContext } from './TasksContext.js';
+
+export default function TaskList() {
+  const tasks = useContext(TasksContext);
+  return (
+    <ul>
+      {tasks.map(task => (
+        <li key={task.id}>
+          <Task task={task} />
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function Task({ task }) {
+  const [isEditing, setIsEditing] = useState(false);
+  const dispatch = useContext(TasksDispatchContext);
+  let taskContent;
+  if (isEditing) {
+    taskContent = (
+      <>
+        <input
+          value={task.text}
+          onChange={e => {
+            dispatch({
+              type: 'changed',
+              task: {
+                ...task,
+                text: e.target.value
+              }
+            });
+          }} />
+        <button onClick={() => setIsEditing(false)}>
+          Save
+        </button>
+      </>
+    );
+  } else {
+    taskContent = (
+      <>
+        {task.text}
+        <button onClick={() => setIsEditing(true)}>
+          Edit
+        </button>
+      </>
+    );
+  }
+  return (
+    <label>
+      <input
+        type="checkbox"
+        checked={task.done}
+        onChange={e => {
+          dispatch({
+            type: 'changed',
+            task: {
+              ...task,
+              done: e.target.checked
+            }
+          });
+        }}
+      />
+      {taskContent}
+      <button onClick={() => {
+        dispatch({
+          type: 'deleted',
+          id: task.id
+        });
+      }}>
+        Delete
+      </button>
+    </label>
+  );
+}
+```
+
+```css
+button { margin: 5px; }
+li { list-style-type: none; }
+ul, li { margin: 0; padding: 0; }
+```
+
+</Sandpack>
+
+You can also export functions that _use_ the context from `TasksContext.js`:
+
+```js
+export function useTasks() {
+  return useContext(TasksContext);
+}
+
+export function useTasksDispatch() {
+  return useContext(TasksDispatchContext);
+}
+```
+
+When a component needs to read context, it can do it through these functions:
+
+```js
+const tasks = useTasks();
+const dispatch = useTasksDispatch();
+```
+
+This doesn't change the behavior in any way, but it lets you later split these contexts further or add some logic to these functions. **Now all of the context and reducer wiring is in `TasksContext.js`. This keeps the components clean and uncluttered, focused on what they display rather than where they get the data:**
+
+<Sandpack>
+
+```js App.js
+import AddTask from './AddTask.js';
+import TaskList from './TaskList.js';
+import { TasksProvider } from './TasksContext.js';
+
+export default function TaskApp() {
+  return (
+    <TasksProvider>
+      <h1>Day off in Kyoto</h1>
+      <AddTask />
+      <TaskList />
+    </TasksProvider>
+  );
+}
+```
+
+```js TasksContext.js
+import { createContext, useContext, useReducer } from 'react';
+
+const TasksContext = createContext(null);
+
+const TasksDispatchContext = createContext(null);
+
+export function TasksProvider({ children }) {
+  const [tasks, dispatch] = useReducer(
+    tasksReducer,
+    initialTasks
+  );
+
+  return (
+    <TasksContext.Provider value={tasks}>
+      <TasksDispatchContext.Provider value={dispatch}>
+        {children}
+      </TasksDispatchContext.Provider>
+    </TasksContext.Provider>
+  );
+}
+
+export function useTasks() {
+  return useContext(TasksContext);
+}
+
+export function useTasksDispatch() {
+  return useContext(TasksDispatchContext);
+}
+
+function tasksReducer(tasks, action) {
+  switch (action.type) {
+    case 'added': {
+      return [...tasks, {
+        id: action.id,
+        text: action.text,
+        done: false
+      }];
+    }
+    case 'changed': {
+      return tasks.map(t => {
+        if (t.id === action.task.id) {
+          return action.task;
+        } else {
+          return t;
+        }
+      });
+    }
+    case 'deleted': {
+      return tasks.filter(t => t.id !== action.id);
+    }
+    default: {
+      throw Error('Unknown action: ' + action.type);
+    }
+  }
+}
+
+const initialTasks = [
+  { id: 0, text: 'Philosopher’s Path', done: true },
+  { id: 1, text: 'Visit the temple', done: false },
+  { id: 2, text: 'Drink matcha', done: false }
+];
+```
+
+```js AddTask.js
+import { useState } from 'react';
+import { useTasksDispatch } from './TasksContext.js';
+
+export default function AddTask() {
+  const [text, setText] = useState('');
+  const dispatch = useTasksDispatch();
+  return (
+    <>
+      <input
+        placeholder="Add task"
+        value={text}
+        onChange={e => setText(e.target.value)}
+      />
+      <button onClick={() => {
+        setText('');
+        dispatch({
+          type: 'added',
+          id: nextId++,
+          text: text,
+        }); 
+      }}>Add</button>
+    </>
+  );
+}
+
+let nextId = 3;
+```
+
+```js TaskList.js active
+import { useState } from 'react';
+import { useTasks, useTasksDispatch } from './TasksContext.js';
+
+export default function TaskList() {
+  const tasks = useTasks();
+  return (
+    <ul>
+      {tasks.map(task => (
+        <li key={task.id}>
+          <Task task={task} />
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function Task({ task }) {
+  const [isEditing, setIsEditing] = useState(false);
+  const dispatch = useTasksDispatch();
+  let taskContent;
+  if (isEditing) {
+    taskContent = (
+      <>
+        <input
+          value={task.text}
+          onChange={e => {
+            dispatch({
+              type: 'changed',
+              task: {
+                ...task,
+                text: e.target.value
+              }
+            });
+          }} />
+        <button onClick={() => setIsEditing(false)}>
+          Save
+        </button>
+      </>
+    );
+  } else {
+    taskContent = (
+      <>
+        {task.text}
+        <button onClick={() => setIsEditing(true)}>
+          Edit
+        </button>
+      </>
+    );
+  }
+  return (
+    <label>
+      <input
+        type="checkbox"
+        checked={task.done}
+        onChange={e => {
+          dispatch({
+            type: 'changed',
+            task: {
+              ...task,
+              done: e.target.checked
+            }
+          });
+        }}
+      />
+      {taskContent}
+      <button onClick={() => {
+        dispatch({
+          type: 'deleted',
+          id: task.id
+        });
+      }}>
+        Delete
+      </button>
+    </label>
+  );
+}
+```
+
+```css
+button { margin: 5px; }
+li { list-style-type: none; }
+ul, li { margin: 0; padding: 0; }
+```
+
+</Sandpack>
+
+You can think of `TasksProvider` as a part of the screen that knows how to deal with tasks, `useTasks` as a way to read them, and `useTasksDispatch` as a way to update them from any component below in the tree.
+
+> Functions like `useTasks` and `useTasksDispatch` are called **[Custom Hooks.](/learn/reusing-logic-with-custom-hooks)** Your function is considered a custom Hook if its name starts with `use`. This lets you use other Hooks, like `useContext`, inside it.
+
+As your app grows, you may have many context-reducer pairs like this. This is a powerful way to scale your app and [lift state up](/learn/sharing-state-between-components) without too much work whenever you want to access the data deep in the tree.
+
+<Recap>
+
+- You can combine reducer with context to let any component read and update state above it.
+- To provide state and the dispatch function to components below:
+  1. Create two contexts (for state and for dispatch functions).
+  2. Provide both contexts from the component that uses the reducer.
+  3. Use either context from components that need to read them.
+- You can further declutter the components by moving all wiring into one file.
+  - You can export a component like `TasksProvider` that provides context.
+  - You can also export custom Hooks like `useTasks` and `useTasksDispatch` to read it.
+- You can have many context-reducer pairs like this in your app.
+
+</Recap>
+
diff --git a/beta/src/content/learn/separating-events-from-effects.md b/beta/src/content/learn/separating-events-from-effects.md
new file mode 100644
index 000000000..ba1029d8c
--- /dev/null
+++ b/beta/src/content/learn/separating-events-from-effects.md
@@ -0,0 +1,1842 @@
+---
+title: 'Separating Events from Effects'
+---
+
+<Intro>
+
+Event handlers only re-run when you perform the same interaction again. Unlike event handlers, Effects re-synchronize if some value they read, like a prop or a state variable, is different from what it was during the last render. Sometimes, you also want a mix of both behaviors: an Effect that re-runs in response to some values but not others. This page will teach you how to do that.
+
+</Intro>
+
+<YouWillLearn>
+
+- How to choose between an event handler and an Effect
+- Why Effects are reactive, and event handlers are not
+- What to do when you want a part of your Effect's code to not be reactive
+- What Effect Events are, and how to extract them from your Effects
+- How to read the latest props and state from Effects using Effect Events
+
+</YouWillLearn>
+
+## Choosing between event handlers and Effects {/*choosing-between-event-handlers-and-effects*/}
+
+First, let's recap the difference between event handlers and Effects.
+
+Imagine you're implementing a chat room component. Your requirements look like this:
+
+1. Your component should automatically connect to the selected chat room.
+1. When you click the "Send" button, it should send a message to the chat.
+
+Let's say you've already implemented the code for them, but you're not sure where to put it. Should you use event handlers or Effects? Every time you need to answer this question, consider [*why* the code needs to run.](/learn/synchronizing-with-effects#what-are-effects-and-how-are-they-different-from-events)
+
+### Event handlers run in response to specific interactions {/*event-handlers-run-in-response-to-specific-interactions*/}
+
+From the user's perspective, sending a message should happen *because* the particular "Send" button was clicked. The user will get rather upset if you send their message at any other time or for any other reason. This is why sending a message should be an event handler. Event handlers let you handle specific interactions like clicks:
+
+```js {4-6}
+function ChatRoom({ roomId }) {
+  const [message, setMessage] = useState('');
+  // ...
+  function handleSendClick() {
+    sendMessage(message);
+  }
+  // ...
+  return (
+    <>
+      <input value={message} onChange={e => setMessage(e.target.value)} />
+      <button onClick={handleSendClick}>Send</button>;
+    </>
+  );
+}
+```
+
+With an event handler, you can be sure that `sendMessage(message)` will *only* run if the user presses the button.
+
+### Effects run whenever synchronization is needed {/*effects-run-whenever-synchronization-is-needed*/}
+
+Recall that you also need to keep the component connected to the chat room. Where does that code go?
+
+The *reason* to run this code is not some particular interaction. It doesn't matter why or how the user navigated to the chat room screen. Now that they're looking at it and could interact with it, the component needs to stay connected to the selected chat server. Even if the chat room component was the initial screen of your app, and the user has not performed any interactions at all, you would *still* need to connect. This is why it's an Effect:
+
+```js {3-9}
+function ChatRoom({ roomId }) {
+  // ...
+  useEffect(() => {
+    const connection = createConnection(serverUrl, roomId);
+    connection.connect();
+    return () => {
+      connection.disconnect();
+    };
+  }, [roomId]);
+  // ...
+}
+```
+
+With this code, you can be sure that there is always an active connection to the currently selected chat server, *regardless* of the specific interactions performed by the user. Whether the user has only opened your app, selected a different room, or navigated to another screen and back, your Effect will ensure that the component will *remain synchronized* with the currently selected room, and will [re-connect whenever it's necessary.](/learn/lifecycle-of-reactive-effects#why-synchronization-may-need-to-happen-more-than-once)
+
+<Sandpack>
+
+```js
+import { useState, useEffect } from 'react';
+import { createConnection, sendMessage } from './chat.js';
+
+const serverUrl = 'https://localhost:1234';
+
+function ChatRoom({ roomId }) {
+  const [message, setMessage] = useState('');
+
+  useEffect(() => {
+    const connection = createConnection(serverUrl, roomId);
+    connection.connect();
+    return () => connection.disconnect();
+  }, [roomId]);
+
+  function handleSendClick() {
+    sendMessage(message);
+  }
+
+  return (
+    <>
+      <h1>Welcome to the {roomId} room!</h1>
+      <input value={message} onChange={e => setMessage(e.target.value)} />
+      <button onClick={handleSendClick}>Send</button>
+    </>
+  );
+}
+
+export default function App() {
+  const [roomId, setRoomId] = useState('general');
+  const [show, setShow] = useState(false);
+  return (
+    <>
+      <label>
+        Choose the chat room:{' '}
+        <select
+          value={roomId}
+          onChange={e => setRoomId(e.target.value)}
+        >
+          <option value="general">general</option>
+          <option value="travel">travel</option>
+          <option value="music">music</option>
+        </select>
+      </label>
+      <button onClick={() => setShow(!show)}>
+        {show ? 'Close chat' : 'Open chat'}
+      </button>
+      {show && <hr />}
+      {show && <ChatRoom roomId={roomId} />}
+    </>
+  );
+}
+```
+
+```js chat.js
+export function sendMessage(message) {
+  console.log('🔵 You sent: ' + message);
+}
+
+export function createConnection(serverUrl, roomId) {
+  // A real implementation would actually connect to the server
+  return {
+    connect() {
+      console.log('✅ Connecting to "' + roomId + '" room at ' + serverUrl + '...');
+    },
+    disconnect() {
+      console.log('❌ Disconnected from "' + roomId + '" room at ' + serverUrl);
+    }
+  };
+}
+```
+
+```css
+input, select { margin-right: 20px; }
+```
+
+</Sandpack>
+
+## Reactive values and reactive logic {/*reactive-values-and-reactive-logic*/}
+
+Intuitively, you could say that event handlers are always triggered "manually", for example by clicking a button. Effects, on the other hand, are "automatic": they run and re-run as often as it's needed to stay synchronized.
+
+There is a more precise way to think about this.
+
+Props, state, and variables declared inside your component's body are called <CodeStep step={2}>reactive values</CodeStep>. In this example, `serverUrl` is not a reactive value, but `roomId` and `message` are. They participate in the rendering data flow:
+
+```js [[2, 3, "roomId"], [2, 4, "message"]]
+const serverUrl = 'https://localhost:1234';
+
+function ChatRoom({ roomId }) {
+  const [message, setMessage] = useState('');
+
+  // ...
+}
+```
+
+Reactive values like these can change due to a re-render. For example, the user may edit the `message` or choose a different `roomId` in a dropdown. Event handlers and Effects are different in how they respond to changes:
+
+- **Logic inside event handlers is *not reactive.*** It will not run again unless the user performs the same interaction (for example, a click) again. Event handlers can read reactive values, but they don't "react" to their changes.
+- **Logic inside Effects is *reactive.*** If your Effect reads a reactive value, [you have to specify it as a dependency.](/learn/lifecycle-of-reactive-effects#effects-react-to-reactive-values) Then, if a re-render causes that value to change, React will re-run your Effect's logic again with the new value.
+
+Let's revisit the previous example to illustrate this difference.
+
+### Logic inside event handlers is not reactive {/*logic-inside-event-handlers-is-not-reactive*/}
+
+Take a look at this line of code. Should this logic be reactive or not?
+
+```js [[2, 2, "message"]]
+    // ...
+    sendMessage(message);
+    // ...
+```
+
+From the user's perspective, **a change to the `message` does _not_ mean that they want to send a message.** It only means that the user is typing. In other words, the logic that sends a message should not be reactive. It should not run again only because the <CodeStep step={2}>reactive value</CodeStep> has changed. That's why you placed this logic in the event handler:
+
+```js {2}
+  function handleSendClick() {
+    sendMessage(message);
+  }
+```
+
+Event handlers aren't reactive, so `sendMessage(message)` will only run when the user clicks the Send button.
+
+### Logic inside Effects is reactive {/*logic-inside-effects-is-reactive*/}
+
+Now let's return to these lines:
+
+```js [[2, 2, "roomId"]]
+    // ...
+    const connection = createConnection(serverUrl, roomId);
+    connection.connect();
+    // ...
+```
+
+From the user's perspective, **a change to the `roomId` *does* mean that they want to connect to a different room.** In other words, the logic for connecting to the room should be reactive. You *want* these lines of code to "keep up" with the <CodeStep step={2}>reactive value</CodeStep>, and to run again if that value is different. That's why you put this logic inside an Effect:
+
+```js {2-3}
+  useEffect(() => {
+    const connection = createConnection(serverUrl, roomId);
+    connection.connect();
+    return () => {
+      connection.disconnect()
+    };
+  }, [roomId]);
+```
+
+Effects are reactive, so `createConnection(serverUrl, roomId)` and `connection.connect()` will run for every distinct value of `roomId`. Your Effect keeps the chat connection synchronized to the currently selected room.
+
+## Extracting non-reactive logic out of Effects {/*extracting-non-reactive-logic-out-of-effects*/}
+
+Things get more tricky when you want to mix reactive logic with non-reactive logic.
+
+For example, imagine that you want to show a notification when the user connects to the chat. You read the current theme (dark or light) from the props so that you can show the notification in the correct color:
+
+```js {1,4-6}
+function ChatRoom({ roomId, theme }) {
+  useEffect(() => {
+    const connection = createConnection(serverUrl, roomId);
+    connection.on('connected', () => {
+      showNotification('Connected!', theme);
+    });
+    connection.connect();
+    // ...
+````
+
+However, `theme` is a reactive value (it can change as a result of re-rendering), and [every reactive value read by an Effect must be declared as its dependency.](/learn/lifecycle-of-reactive-effects#react-verifies-that-you-specified-every-reactive-value-as-a-dependency) So now you have to specify `theme` as a dependency of your Effect:
+
+```js {5,11}
+function ChatRoom({ roomId, theme }) {
+  useEffect(() => {
+    const connection = createConnection(serverUrl, roomId);
+    connection.on('connected', () => {
+      showNotification('Connected!', theme);
+    });
+    connection.connect();
+    return () => {
+      connection.disconnect()
+    };
+  }, [roomId, theme]); // ✅ All dependencies declared
+  // ...
+````
+
+Play with this example and see if you can spot the problem with this user experience:
+
+<Sandpack>
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "latest",
+    "react-dom": "latest",
+    "react-scripts": "latest",
+    "toastify-js": "1.12.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+```js
+import { useState, useEffect } from 'react';
+import { createConnection, sendMessage } from './chat.js';
+import { showNotification } from './notifications.js';
+
+const serverUrl = 'https://localhost:1234';
+
+function ChatRoom({ roomId, theme }) {
+  useEffect(() => {
+    const connection = createConnection(serverUrl, roomId);
+    connection.on('connected', () => {
+      showNotification('Connected!', theme);
+    });
+    connection.connect();
+    return () => connection.disconnect();
+  }, [roomId, theme]);
+
+  return <h1>Welcome to the {roomId} room!</h1>
+}
+
+export default function App() {
+  const [roomId, setRoomId] = useState('general');
+  const [isDark, setIsDark] = useState(false);
+  return (
+    <>
+      <label>
+        Choose the chat room:{' '}
+        <select
+          value={roomId}
+          onChange={e => setRoomId(e.target.value)}
+        >
+          <option value="general">general</option>
+          <option value="travel">travel</option>
+          <option value="music">music</option>
+        </select>
+      </label>
+      <label>
+        <input
+          type="checkbox"
+          checked={isDark}
+          onChange={e => setIsDark(e.target.checked)}
+        />
+        Use dark theme
+      </label>
+      <hr />
+      <ChatRoom
+        roomId={roomId}
+        theme={isDark ? 'dark' : 'light'}
+      />
+    </>
+  );
+}
+```
+
+```js chat.js
+export function createConnection(serverUrl, roomId) {
+  // A real implementation would actually connect to the server
+  let connectedCallback;
+  let timeout;
+  return {
+    connect() {
+      timeout = setTimeout(() => {
+        if (connectedCallback) {
+          connectedCallback();
+        }
+      }, 100);
+    },
+    on(event, callback) {
+      if (connectedCallback) {
+        throw Error('Cannot add the handler twice.');
+      }
+      if (event !== 'connected') {
+        throw Error('Only "connected" event is supported.');
+      }
+      connectedCallback = callback;
+    },
+    disconnect() {
+      clearTimeout(timeout);
+    }
+  };
+}
+```
+
+```js notifications.js
+import Toastify from 'toastify-js';
+import 'toastify-js/src/toastify.css';
+
+export function showNotification(message, theme) {
+  Toastify({
+    text: message,
+    duration: 2000,
+    gravity: 'top',
+    position: 'right',
+    style: {
+      background: theme === 'dark' ? 'black' : 'white',
+      color: theme === 'dark' ? 'white' : 'black',
+    },
+  }).showToast();
+}
+```
+
+```css
+label { display: block; margin-top: 10px; }
+```
+
+</Sandpack>
+
+When the `roomId` changes, the chat re-connects as you would expect. But since `theme` is also a dependency, the chat *also* re-connects every time you switch between the dark and the light theme. That's not great!
+
+In other words, you *don't* want this line to be reactive, even though it is inside an Effect (which is reactive):
+
+```js
+      // ...
+      showNotification('Connected!', theme);
+      // ...
+```
+
+You need a way to separate this non-reactive logic from the reactive Effect around it.
+
+### Declaring an Effect Event {/*declaring-an-effect-event*/}
+
+<Wip>
+
+This section describes an **experimental API that has not yet been added to React,** so you can't use it yet.
+
+</Wip>
+
+Use a special Hook called [`useEffectEvent`](/reference/react/useEffectEvent) to extract this non-reactive logic out of your Effect:
+
+```js {1,4-6}
+import { useEffect, useEffectEvent } from 'react';
+
+function ChatRoom({ roomId, theme }) {
+  const onConnected = useEffectEvent(() => {
+    showNotification('Connected!', theme);
+  });
+  // ...
+````
+
+Here, `onConnected` is called an *Effect Event.* It's a part of your Effect logic, but it behaves a lot more like an event handler. The logic inside it is not reactive, and it always "sees" the latest values of your props and state.
+
+Now you can call the `onConnected` Effect Event from inside your Effect:
+
+```js {2-4,9,13}
+function ChatRoom({ roomId, theme }) {
+  const onConnected = useEffectEvent(() => {
+    showNotification('Connected!', theme);
+  });
+
+  useEffect(() => {
+    const connection = createConnection(serverUrl, roomId);
+    connection.on('connected', () => {
+      onConnected();
+    });
+    connection.connect();
+    return () => connection.disconnect();
+  }, [roomId]); // ✅ All dependencies declared
+  // ...
+```
+
+This solves the problem. Note that you had to *remove* `onConnected` from the list of your Effect's dependencies. **Effect Events are not reactive and must be omitted from dependencies. The linter will error if you include them.**
+
+Verify that the new behavior works as you would expect:
+
+<Sandpack>
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "experimental",
+    "react-dom": "experimental",
+    "react-scripts": "latest",
+    "toastify-js": "1.12.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+```js
+import { useState, useEffect } from 'react';
+import { experimental_useEffectEvent as useEffectEvent } from 'react';
+import { createConnection, sendMessage } from './chat.js';
+import { showNotification } from './notifications.js';
+
+const serverUrl = 'https://localhost:1234';
+
+function ChatRoom({ roomId, theme }) {
+  const onConnected = useEffectEvent(() => {
+    showNotification('Connected!', theme);
+  });
+
+  useEffect(() => {
+    const connection = createConnection(serverUrl, roomId);
+    connection.on('connected', () => {
+      onConnected();
+    });
+    connection.connect();
+    return () => connection.disconnect();
+  }, [roomId]);
+
+  return <h1>Welcome to the {roomId} room!</h1>
+}
+
+export default function App() {
+  const [roomId, setRoomId] = useState('general');
+  const [isDark, setIsDark] = useState(false);
+  return (
+    <>
+      <label>
+        Choose the chat room:{' '}
+        <select
+          value={roomId}
+          onChange={e => setRoomId(e.target.value)}
+        >
+          <option value="general">general</option>
+          <option value="travel">travel</option>
+          <option value="music">music</option>
+        </select>
+      </label>
+      <label>
+        <input
+          type="checkbox"
+          checked={isDark}
+          onChange={e => setIsDark(e.target.checked)}
+        />
+        Use dark theme
+      </label>
+      <hr />
+      <ChatRoom
+        roomId={roomId}
+        theme={isDark ? 'dark' : 'light'}
+      />
+    </>
+  );
+}
+```
+
+```js chat.js
+export function createConnection(serverUrl, roomId) {
+  // A real implementation would actually connect to the server
+  let connectedCallback;
+  let timeout;
+  return {
+    connect() {
+      timeout = setTimeout(() => {
+        if (connectedCallback) {
+          connectedCallback();
+        }
+      }, 100);
+    },
+    on(event, callback) {
+      if (connectedCallback) {
+        throw Error('Cannot add the handler twice.');
+      }
+      if (event !== 'connected') {
+        throw Error('Only "connected" event is supported.');
+      }
+      connectedCallback = callback;
+    },
+    disconnect() {
+      clearTimeout(timeout);
+    }
+  };
+}
+```
+
+```js notifications.js hidden
+import Toastify from 'toastify-js';
+import 'toastify-js/src/toastify.css';
+
+export function showNotification(message, theme) {
+  Toastify({
+    text: message,
+    duration: 2000,
+    gravity: 'top',
+    position: 'right',
+    style: {
+      background: theme === 'dark' ? 'black' : 'white',
+      color: theme === 'dark' ? 'white' : 'black',
+    },
+  }).showToast();
+}
+```
+
+```css
+label { display: block; margin-top: 10px; }
+```
+
+</Sandpack>
+
+You can think of Effect Events as being very similar to event handlers. The main difference is that event handlers run in response to a user interactions, whereas Effect Events are triggered by you from Effects. Effect Events let you "break the chain" between the reactivity of Effects and some code that should not be reactive.
+
+### Reading latest props and state with Effect Events {/*reading-latest-props-and-state-with-effect-events*/}
+
+<Wip>
+
+This section describes an **experimental API that has not yet been added to React,** so you can't use it yet.
+
+</Wip>
+
+Effect Events let you fix many patterns where you might be tempted to suppress the dependency linter.
+
+For example, say you have an Effect to log the page visits:
+
+```js
+function Page() {
+  useEffect(() => {
+    logVisit();
+  }, []);
+  // ...
+}
+```
+
+Later, you add multiple routes to your site. Now your `Page` component receives a `url` prop with the current path. You want to pass the `url` as a part of your `logVisit` call, but the dependency linter complains:
+
+```js {1,3}
+function Page({ url }) {
+  useEffect(() => {
+    logVisit(url);
+  }, []); // 🔴 React Hook useEffect has a missing dependency: 'url'
+  // ...
+}
+```
+
+Think about what you want the code to do. You *want* to log a separate visit for different URLs since each URL represents a different page. In other words, this `logVisit` call *should* be reactive with respect to the `url`. This is why, in this case, it makes sense to follow the dependency linter, and add `url` as a dependency:
+
+```js {4}
+function Page({ url }) {
+  useEffect(() => {
+    logVisit(url);
+  }, [url]); // ✅ All dependencies declared
+  // ...
+}
+```
+
+Now let's say you want to include the number of items in the shopping cart together with every page visit:
+
+```js {2-3,6}
+function Page({ url }) {
+  const { items } = useContext(ShoppingCartContext);
+  const numberOfItems = items.length;
+
+  useEffect(() => {
+    logVisit(url, numberOfItems);
+  }, [url]); // 🔴 React Hook useEffect has a missing dependency: 'numberOfItems'
+  // ...
+}
+```
+
+You used `numberOfItems` inside the Effect, so the linter asks you to add it as a dependency. However, you *don't* want the `logVisit` call to be reactive with respect to `numberOfItems`. If the user puts something into the shopping cart, and the `numberOfItems` changes, this *does not mean* that the user visited the page again. In other words, *visiting the page* feels similar to an event. You want to be very precise about *when* you say it's happened.
+
+Split the code in two parts:
+
+```js {5-7,10}
+function Page({ url }) {
+  const { items } = useContext(ShoppingCartContext);
+  const numberOfItems = items.length;
+
+  const onVisit = useEffectEvent(visitedUrl => {
+    logVisit(visitedUrl, numberOfItems);
+  });
+
+  useEffect(() => {
+    onVisit(url);
+  }, [url]); // ✅ All dependencies declared
+  // ...
+}
+```
+
+Here, `onVisit` is an Effect Event. The code inside it isn't reactive. This is why you can use `numberOfItems` (or any other reactive value!) without worrying that it will cause the surrounding code to re-execute on changes.
+
+On the other hand, the Effect itself remains reactive. Code inside the Effect uses the `url` prop, so the Effect will re-run after every re-render with a different `url`. This, in turn, will call the `onVisit` Effect Event.
+
+As a result, you will call `logVisit` for every change to the `url`, and always read the latest `numberOfItems`. However, if `numberOfItems` changes on its own, this will not cause any of the code to re-run.
+
+<Note>
+
+You might be wondering if you could call `onVisit()` with no arguments, and read the `url` inside it:
+
+```js {2,6}
+  const onVisit = useEffectEvent(() => {
+    logVisit(url, numberOfItems);
+  });
+
+  useEffect(() => {
+    onVisit();
+  }, [url]);
+```
+
+This would work, but it's better to pass this `url` to the Effect Event explicitly. **By passing `url` as an argument to your Effect Event, you are saying that visiting a page with a different `url` constitutes a separate "event" from the user's perspective.** The `visitedUrl` is a *part* of the "event" that happened:
+
+```js {1-2,6}
+  const onVisit = useEffectEvent(visitedUrl => {
+    logVisit(visitedUrl, numberOfItems);
+  });
+
+  useEffect(() => {
+    onVisit(url);
+  }, [url]);
+```
+
+Since your Effect Event explicitly "asks" for the `visitedUrl`, now you can't accidentally remove `url` from the Effect's dependencies. If you remove the `url` dependency (causing distinct page visits to be counted as one), the linter will warn you about it. You want `onVisit` to be reactive with regards to the `url`, so instead of reading the `url` inside (where it wouldn't be reactive), you pass it *from* your Effect.
+
+This becomes especially important if there is some asynchronous logic inside the Effect:
+
+```js {6,8}
+  const onVisit = useEffectEvent(visitedUrl => {
+    logVisit(visitedUrl, numberOfItems);
+  });
+
+  useEffect(() => {
+    setTimeout(() => {
+      onVisit(url);
+    }, 5000); // Delay logging visits
+  }, [url]);
+```
+
+In this example, `url` inside `onVisit` corresponds to the *latest* `url` (which could have already changed), but `visitedUrl` corresponds to the `url` that originally caused this Effect (and this `onVisit` call) to run.
+
+</Note>
+
+<DeepDive>
+
+#### Is it okay to suppress the dependency linter instead? {/*is-it-okay-to-suppress-the-dependency-linter-instead*/}
+
+In the existing codebases, you may sometimes see the lint rule suppressed like this:
+
+```js {7-9}
+function Page({ url }) {
+  const { items } = useContext(ShoppingCartContext);
+  const numberOfItems = items.length;
+
+  useEffect(() => {
+    logVisit(url, numberOfItems);
+    // 🔴 Avoid suppressing the linter like this:
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [url]);
+  // ...
+}
+```
+
+After `useEffectEvent` becomes a stable part of React, we recommend to **never suppress the linter** like this.
+
+The first downside of suppressing the rule is that React will no longer warn you when your Effect needs to "react" to a new reactive dependency you've introduced to your code. For example, in the earlier example, you added `url` to the dependencies *because* React reminded you to do it. You will no longer get such reminders for any future edits to that Effect if you disable the linter. This leads to bugs.
+
+Here is an example of a confusing bug caused by suppressing the linter. In this example, the `handleMove` function is supposed to read the current `canMove` state variable value in order to decide whether the dot should follow the cursor. However, `canMove` is always `true` inside `handleMove`. Can you see why?
+
+<Sandpack>
+
+```js
+import { useState, useEffect } from 'react';
+
+export default function App() {
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const [canMove, setCanMove] = useState(true);
+
+  function handleMove(e) {
+    if (canMove) {
+      setPosition({ x: e.clientX, y: e.clientY });
+    }
+  }
+
+  useEffect(() => {
+    window.addEventListener('pointermove', handleMove);
+    return () => window.removeEventListener('pointermove', handleMove);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <>
+      <label>
+        <input type="checkbox"
+          checked={canMove}
+          onChange={e => setCanMove(e.target.checked)}
+        />
+        The dot is allowed to move
+      </label>
+      <hr />
+      <div style={{
+        position: 'absolute',
+        backgroundColor: 'pink',
+        borderRadius: '50%',
+        opacity: 0.6,
+        transform: `translate(${position.x}px, ${position.y}px)`,
+        pointerEvents: 'none',
+        left: -20,
+        top: -20,
+        width: 40,
+        height: 40,
+      }} />
+    </>
+  );
+}
+```
+
+```css
+body {
+  height: 200px;
+}
+```
+
+</Sandpack>
+
+
+The problem with the this code is in suppressing the dependency linter. If you remove the suppression, you'll see that this Effect should depend on the `handleMove` function. This makes sense: `handleMove` is declared inside the component body, which makes it a reactive value. Every reactive value must be specified as a dependency, or it can potentially get stale over time!
+
+The author of the original code has "lied" to React by saying that the Effect does not depend (`[]`) on any reactive values. This is why React did not re-synchronize the Effect after `canMove` has changed (and `handleMove` with it). Because React did not re-synchronize the Effect, the `handleMove` attached as a listener is the `handleMove` function created during the initial render. During the initial render, `canMove` was `true`, which is why `handleMove` from the initial render will forever see that value.
+
+**If you never suppress the linter, you will never see problems with stale values.**
+
+With `useEffectEvent`, there is no need to "lie" to the linter, and the code works as you would expect:
+
+<Sandpack>
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "experimental",
+    "react-dom": "experimental",
+    "react-scripts": "latest"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+```js
+import { useState, useEffect } from 'react';
+import { experimental_useEffectEvent as useEffectEvent } from 'react';
+
+export default function App() {
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const [canMove, setCanMove] = useState(true);
+
+  const onMove = useEffectEvent(e => {
+    if (canMove) {
+      setPosition({ x: e.clientX, y: e.clientY });
+    }
+  });
+
+  useEffect(() => {
+    window.addEventListener('pointermove', onMove);
+    return () => window.removeEventListener('pointermove', onMove);
+  }, []);
+
+  return (
+    <>
+      <label>
+        <input type="checkbox"
+          checked={canMove}
+          onChange={e => setCanMove(e.target.checked)}
+        />
+        The dot is allowed to move
+      </label>
+      <hr />
+      <div style={{
+        position: 'absolute',
+        backgroundColor: 'pink',
+        borderRadius: '50%',
+        opacity: 0.6,
+        transform: `translate(${position.x}px, ${position.y}px)`,
+        pointerEvents: 'none',
+        left: -20,
+        top: -20,
+        width: 40,
+        height: 40,
+      }} />
+    </>
+  );
+}
+```
+
+```css
+body {
+  height: 200px;
+}
+```
+
+</Sandpack>
+
+This doesn't mean that `useEffectEvent` is *always* the correct solution. You should only apply it to the lines of code that you don't want to be reactive. For example, in the above sandbox, you didn't want the Effect's code to be reactive with regards to `canMove`. That's why it made sense to extract an Effect Event.
+
+Read [Removing Effect Dependencies](/learn/removing-effect-dependencies) for other correct alternatives to suppressing the linter.
+
+</DeepDive>
+
+### Limitations of Effect Events {/*limitations-of-effect-events*/}
+
+<Wip>
+
+This section describes an **experimental API that has not yet been added to React,** so you can't use it yet.
+
+</Wip>
+
+Effect Events are very limited in how you can use them:
+
+* **Only call them from inside Effects.**
+* **Never pass them to other components or Hooks.**
+
+For example, don't declare and pass an Effect Event like this:
+
+```js {4-6,8}
+function Timer() {
+  const [count, setCount] = useState(0);
+
+  const onTick = useEffectEvent(() => {
+    setCount(count + 1);
+  });
+
+  useTimer(onTick, 1000); // 🔴 Avoid: Passing Effect Events
+
+  return <h1>{count}</h1>
+}
+
+function useTimer(callback, delay) {
+  useEffect(() => {
+    const id = setInterval(() => {
+      callback();
+    }, delay);
+    return () => {
+      clearInterval(id);
+    };
+  }, [delay, callback]); // Need to specify "callback" in dependencies
+}
+```
+
+Instead, always declare Effect Events directly next to the Effects that use them:
+
+```js {10-12,16,21}
+function Timer() {
+  const [count, setCount] = useState(0);
+  useTimer(() => {
+    setCount(count + 1);
+  }, 1000);
+  return <h1>{count}</h1>
+}
+
+function useTimer(callback, delay) {
+  const onTick = useEffectEvent(() => {
+    callback();
+  });
+
+  useEffect(() => {
+    const id = setInterval(() => {
+      onTick(); // ✅ Good: Only called locally inside an Effect
+    }, delay);
+    return () => {
+      clearInterval(id);
+    };
+  }, [delay]); // No need to specify "onTick" (an Effect Event) as a dependency
+}
+```
+
+Effect Events are non-reactive "pieces" of your Effect code. They should be next to the Effect using them.
+
+<Recap>
+
+- Event handlers run in response to specific interactions.
+- Effects run whenever synchronization is needed.
+- Logic inside event handlers is not reactive.
+- Logic inside Effects is reactive.
+- You can move non-reactive logic from Effects into Effect Events.
+- Only call Effect Events from inside Effects.
+- Don't pass Effect Events to other components or Hooks.
+
+</Recap>
+
+<Challenges>
+
+#### Fix a variable that doesn't update {/*fix-a-variable-that-doesnt-update*/}
+
+This `Timer` component keeps a `count` state variable which increases every second. The value by which it's increasing is stored in the `increment` state variable. You can control the `increment` variable with the plus and minus buttons.
+
+However, no matter how many times you click the plus button, the counter is still incremented by one every second. What's wrong with this code? Why is `increment` always equal to `1` inside the Effect's code? Find the mistake and fix it.
+
+<Hint>
+
+To fix this code, it's enough to follow the rules.
+
+</Hint>
+
+<Sandpack>
+
+```js
+import { useState, useEffect } from 'react';
+
+export default function Timer() {
+  const [count, setCount] = useState(0);
+  const [increment, setIncrement] = useState(1);
+
+  useEffect(() => {
+    const id = setInterval(() => {
+      setCount(c => c + increment);
+    }, 1000);
+    return () => {
+      clearInterval(id);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <>
+      <h1>
+        Counter: {count}
+        <button onClick={() => setCount(0)}>Reset</button>
+      </h1>
+      <hr />
+      <p>
+        Every second, increment by:
+        <button disabled={increment === 0} onClick={() => {
+          setIncrement(i => i - 1);
+        }}>–</button>
+        <b>{increment}</b>
+        <button onClick={() => {
+          setIncrement(i => i + 1);
+        }}>+</button>
+      </p>
+    </>
+  );
+}
+```
+
+```css
+button { margin: 10px; }
+```
+
+</Sandpack>
+
+<Solution>
+
+As usual, when you're looking for bugs in Effects, start by searching for linter suppressions.
+
+If you remove the suppression comment, React will tell you that this Effect's code depends on `increment`, but you "lied" to React by claiming that this Effect does not depend on any reactive values (`[]`). Add `increment` to the dependency array:
+
+<Sandpack>
+
+```js
+import { useState, useEffect } from 'react';
+
+export default function Timer() {
+  const [count, setCount] = useState(0);
+  const [increment, setIncrement] = useState(1);
+
+  useEffect(() => {
+    const id = setInterval(() => {
+      setCount(c => c + increment);
+    }, 1000);
+    return () => {
+      clearInterval(id);
+    };
+  }, [increment]);
+
+  return (
+    <>
+      <h1>
+        Counter: {count}
+        <button onClick={() => setCount(0)}>Reset</button>
+      </h1>
+      <hr />
+      <p>
+        Every second, increment by:
+        <button disabled={increment === 0} onClick={() => {
+          setIncrement(i => i - 1);
+        }}>–</button>
+        <b>{increment}</b>
+        <button onClick={() => {
+          setIncrement(i => i + 1);
+        }}>+</button>
+      </p>
+    </>
+  );
+}
+```
+
+```css
+button { margin: 10px; }
+```
+
+</Sandpack>
+
+Now, when `increment` changes, React will re-synchronize your Effect, which will restart the interval.
+
+</Solution>
+
+#### Fix a freezing counter {/*fix-a-freezing-counter*/}
+
+This `Timer` component keeps a `count` state variable which increases every second. The value by which it's increasing is stored in the `increment` state variable, which you can control it with the plus and minus buttons. For example, try pressing the plus button nine times, and notice that the `count` now increases each second by ten rather than by one.
+
+There is a small issue with this user interface. You might notice that if you keep pressing the plus or minus buttons faster than once per second, the timer itself seems to pause. It only resumes after a second passes since the last time you've pressed either button. Find why this is happening, and fix the issue so that the timer ticks on *every* second without interruptions.
+
+<Hint>
+
+It seems like the Effect which sets up the timer "reacts" to the `increment` value. Does the line that uses the current `increment` value in order to call `setCount` really need to be reactive?
+
+</Hint>
+
+<Sandpack>
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "experimental",
+    "react-dom": "experimental",
+    "react-scripts": "latest"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+```js
+import { useState, useEffect } from 'react';
+import { experimental_useEffectEvent as useEffectEvent } from 'react';
+
+export default function Timer() {
+  const [count, setCount] = useState(0);
+  const [increment, setIncrement] = useState(1);
+
+  useEffect(() => {
+    const id = setInterval(() => {
+      setCount(c => c + increment);
+    }, 1000);
+    return () => {
+      clearInterval(id);
+    };
+  }, [increment]);
+
+  return (
+    <>
+      <h1>
+        Counter: {count}
+        <button onClick={() => setCount(0)}>Reset</button>
+      </h1>
+      <hr />
+      <p>
+        Every second, increment by:
+        <button disabled={increment === 0} onClick={() => {
+          setIncrement(i => i - 1);
+        }}>–</button>
+        <b>{increment}</b>
+        <button onClick={() => {
+          setIncrement(i => i + 1);
+        }}>+</button>
+      </p>
+    </>
+  );
+}
+```
+
+```css
+button { margin: 10px; }
+```
+
+</Sandpack>
+
+<Solution>
+
+The issue is that the code inside the Effect uses the `increment` state variable. Since it's a dependency of your Effect, every change to `increment` causes the Effect to re-synchronize, which causes the interval to clear. If you keep clearing the interval every time before it has a chance to fire, it will appear as if the timer has stalled.
+
+To solve the issue, extract an `onTick` Effect Event from the Effect:
+
+<Sandpack>
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "experimental",
+    "react-dom": "experimental",
+    "react-scripts": "latest"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+```js
+import { useState, useEffect } from 'react';
+import { experimental_useEffectEvent as useEffectEvent } from 'react';
+
+export default function Timer() {
+  const [count, setCount] = useState(0);
+  const [increment, setIncrement] = useState(1);
+
+  const onTick = useEffectEvent(() => {
+    setCount(c => c + increment);
+  });
+
+  useEffect(() => {
+    const id = setInterval(() => {
+      onTick();
+    }, 1000);
+    return () => {
+      clearInterval(id);
+    };
+  }, []);
+
+  return (
+    <>
+      <h1>
+        Counter: {count}
+        <button onClick={() => setCount(0)}>Reset</button>
+      </h1>
+      <hr />
+      <p>
+        Every second, increment by:
+        <button disabled={increment === 0} onClick={() => {
+          setIncrement(i => i - 1);
+        }}>–</button>
+        <b>{increment}</b>
+        <button onClick={() => {
+          setIncrement(i => i + 1);
+        }}>+</button>
+      </p>
+    </>
+  );
+}
+```
+
+
+```css
+button { margin: 10px; }
+```
+
+</Sandpack>
+
+Since `onTick` is an Effect Event, the code inside it isn't reactive. The change to `increment` does not trigger any Effects.
+
+</Solution>
+
+#### Fix a non-adjustable delay {/*fix-a-non-adjustable-delay*/}
+
+In this example, you can customize the interval delay. It's stored in a `delay` state variable which is updated by two buttons. However, even if you press the "plus 100 ms" button until the `delay` is 1000 milliseconds (that is, a second), you'll notice that the timer still increments very fast (every 100 ms). It's as if your changes to the `delay` are ignored. Find and fix the bug.
+
+<Hint>
+
+Code inside Effect Events is not reactive. Are there cases in which you would _want_ the `setInterval` call to re-run?
+
+</Hint>
+
+<Sandpack>
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "experimental",
+    "react-dom": "experimental",
+    "react-scripts": "latest"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+```js
+import { useState, useEffect } from 'react';
+import { experimental_useEffectEvent as useEffectEvent } from 'react';
+
+export default function Timer() {
+  const [count, setCount] = useState(0);
+  const [increment, setIncrement] = useState(1);
+  const [delay, setDelay] = useState(100);
+
+  const onTick = useEffectEvent(() => {
+    setCount(c => c + increment);
+  });
+
+  const onMount = useEffectEvent(() => {
+    return setInterval(() => {
+      onTick();
+    }, delay);
+  });
+
+  useEffect(() => {
+    const id = onMount();
+    return () => {
+      clearInterval(id);
+    }
+  }, []);
+
+  return (
+    <>
+      <h1>
+        Counter: {count}
+        <button onClick={() => setCount(0)}>Reset</button>
+      </h1>
+      <hr />
+      <p>
+        Increment by:
+        <button disabled={increment === 0} onClick={() => {
+          setIncrement(i => i - 1);
+        }}>–</button>
+        <b>{increment}</b>
+        <button onClick={() => {
+          setIncrement(i => i + 1);
+        }}>+</button>
+      </p>
+      <p>
+        Increment delay:
+        <button disabled={delay === 100} onClick={() => {
+          setDelay(d => d - 100);
+        }}>–100 ms</button>
+        <b>{delay} ms</b>
+        <button onClick={() => {
+          setDelay(d => d + 100);
+        }}>+100 ms</button>
+      </p>
+    </>
+  );
+}
+```
+
+
+```css
+button { margin: 10px; }
+```
+
+</Sandpack>
+
+<Solution>
+
+The problem with the above example is that it extracted an Effect Event called `onMount` without considering what the code should actually be doing. You should only extract Effect Events for a specific reason: when you want to make a part of your code non-reactive. However, the `setInterval` call *should* be reactive with respect to the `delay` state variable. If the `delay` changes, you want to set up the interval from scratch! To fix this code, pull all the reactive code back inside the Effect:
+
+<Sandpack>
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "experimental",
+    "react-dom": "experimental",
+    "react-scripts": "latest"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+```js
+import { useState, useEffect } from 'react';
+import { experimental_useEffectEvent as useEffectEvent } from 'react';
+
+export default function Timer() {
+  const [count, setCount] = useState(0);
+  const [increment, setIncrement] = useState(1);
+  const [delay, setDelay] = useState(100);
+
+  const onTick = useEffectEvent(() => {
+    setCount(c => c + increment);
+  });
+
+  useEffect(() => {
+    const id = setInterval(() => {
+      onTick();
+    }, delay);
+    return () => {
+      clearInterval(id);
+    }
+  }, [delay]);
+
+  return (
+    <>
+      <h1>
+        Counter: {count}
+        <button onClick={() => setCount(0)}>Reset</button>
+      </h1>
+      <hr />
+      <p>
+        Increment by:
+        <button disabled={increment === 0} onClick={() => {
+          setIncrement(i => i - 1);
+        }}>–</button>
+        <b>{increment}</b>
+        <button onClick={() => {
+          setIncrement(i => i + 1);
+        }}>+</button>
+      </p>
+      <p>
+        Increment delay:
+        <button disabled={delay === 100} onClick={() => {
+          setDelay(d => d - 100);
+        }}>–100 ms</button>
+        <b>{delay} ms</b>
+        <button onClick={() => {
+          setDelay(d => d + 100);
+        }}>+100 ms</button>
+      </p>
+    </>
+  );
+}
+```
+
+```css
+button { margin: 10px; }
+```
+
+</Sandpack>
+
+In general, you should be suspicious of functions like `onMount` that focus on the *timing* rather than the *purpose* of a piece of code. It may feel "more descriptive" at first but it obscures your intent. As a rule of thumb, Effect Events should correspond to something that happens from the *user's* perspective. For example, `onMessage`, `onTick`, `onVisit`, or `onConnected` are good Effect Event names. Code inside them would likely not need to be reactive. On the other hand, `onMount`, `onUpdate`, `onUnmount`, or `onAfterRender` are so generic that it's easy to accidentally put code that *should* be reactive into them. This is why you should name your Effect Events after *what the user thinks has happened,* not when some code happened to run.
+
+</Solution>
+
+#### Fix a delayed notification {/*fix-a-delayed-notification*/}
+
+When you join a chat room, this component shows a notification. However, it doesn't show the notification immediately. Instead, the notification is artificially delayed by two seconds so that the user has a chance to look around the UI.
+
+This almost works, but there is a bug. Try changing the dropdown from "general" to "travel" and then to "music" very quickly. If you do it fast enough, you will see two notifications (as expected!) but they will *both* say "Welcome to music".
+
+Fix it so that when you switch from "general" to "travel" and then to "music" very quickly, you see two notifications, the first one being "Welcome to travel" and the second one being "Welcome to music". (For an additional challenge, assuming you've *already* made the notifications show the correct rooms, change the code so that only the latter notification is displayed.)
+
+<Hint>
+
+Your Effect knows which room it connected to. Is there any information that you might want to pass to your Effect Event?
+
+</Hint>
+
+<Sandpack>
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "experimental",
+    "react-dom": "experimental",
+    "react-scripts": "latest",
+    "toastify-js": "1.12.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+```js
+import { useState, useEffect } from 'react';
+import { experimental_useEffectEvent as useEffectEvent } from 'react';
+import { createConnection, sendMessage } from './chat.js';
+import { showNotification } from './notifications.js';
+
+const serverUrl = 'https://localhost:1234';
+
+function ChatRoom({ roomId, theme }) {
+  const onConnected = useEffectEvent(() => {
+    showNotification('Welcome to ' + roomId, theme);
+  });
+
+  useEffect(() => {
+    const connection = createConnection(serverUrl, roomId);
+    connection.on('connected', () => {
+      setTimeout(() => {
+        onConnected();
+      }, 2000);
+    });
+    connection.connect();
+    return () => connection.disconnect();
+  }, [roomId]);
+
+  return <h1>Welcome to the {roomId} room!</h1>
+}
+
+export default function App() {
+  const [roomId, setRoomId] = useState('general');
+  const [isDark, setIsDark] = useState(false);
+  return (
+    <>
+      <label>
+        Choose the chat room:{' '}
+        <select
+          value={roomId}
+          onChange={e => setRoomId(e.target.value)}
+        >
+          <option value="general">general</option>
+          <option value="travel">travel</option>
+          <option value="music">music</option>
+        </select>
+      </label>
+      <label>
+        <input
+          type="checkbox"
+          checked={isDark}
+          onChange={e => setIsDark(e.target.checked)}
+        />
+        Use dark theme
+      </label>
+      <hr />
+      <ChatRoom
+        roomId={roomId}
+        theme={isDark ? 'dark' : 'light'}
+      />
+    </>
+  );
+}
+```
+
+```js chat.js
+export function createConnection(serverUrl, roomId) {
+  // A real implementation would actually connect to the server
+  let connectedCallback;
+  let timeout;
+  return {
+    connect() {
+      timeout = setTimeout(() => {
+        if (connectedCallback) {
+          connectedCallback();
+        }
+      }, 100);
+    },
+    on(event, callback) {
+      if (connectedCallback) {
+        throw Error('Cannot add the handler twice.');
+      }
+      if (event !== 'connected') {
+        throw Error('Only "connected" event is supported.');
+      }
+      connectedCallback = callback;
+    },
+    disconnect() {
+      clearTimeout(timeout);
+    }
+  };
+}
+```
+
+```js notifications.js hidden
+import Toastify from 'toastify-js';
+import 'toastify-js/src/toastify.css';
+
+export function showNotification(message, theme) {
+  Toastify({
+    text: message,
+    duration: 2000,
+    gravity: 'top',
+    position: 'right',
+    style: {
+      background: theme === 'dark' ? 'black' : 'white',
+      color: theme === 'dark' ? 'white' : 'black',
+    },
+  }).showToast();
+}
+```
+
+```css
+label { display: block; margin-top: 10px; }
+```
+
+</Sandpack>
+
+<Solution>
+
+Inside your Effect Event, `roomId` is the value *at the time Effect Event was called.*
+
+Your Effect Event is called with a two second delay. If you're quickly switching from the travel to the music room, by the time the travel room's notification shows, `roomId` is already `"music"`. This is why both notifications say "Welcome to music".
+
+To fix the issue, instead of reading the *latest* `roomId` inside the Effect Event, make it a parameter of your Effect Event, like `connectedRoomId` below. Then pass `roomId` from your Effect by calling `onConnected(roomId)`:
+
+<Sandpack>
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "experimental",
+    "react-dom": "experimental",
+    "react-scripts": "latest",
+    "toastify-js": "1.12.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+```js
+import { useState, useEffect } from 'react';
+import { experimental_useEffectEvent as useEffectEvent } from 'react';
+import { createConnection, sendMessage } from './chat.js';
+import { showNotification } from './notifications.js';
+
+const serverUrl = 'https://localhost:1234';
+
+function ChatRoom({ roomId, theme }) {
+  const onConnected = useEffectEvent(connectedRoomId => {
+    showNotification('Welcome to ' + connectedRoomId, theme);
+  });
+
+  useEffect(() => {
+    const connection = createConnection(serverUrl, roomId);
+    connection.on('connected', () => {
+      setTimeout(() => {
+        onConnected(roomId);
+      }, 2000);
+    });
+    connection.connect();
+    return () => connection.disconnect();
+  }, [roomId]);
+
+  return <h1>Welcome to the {roomId} room!</h1>
+}
+
+export default function App() {
+  const [roomId, setRoomId] = useState('general');
+  const [isDark, setIsDark] = useState(false);
+  return (
+    <>
+      <label>
+        Choose the chat room:{' '}
+        <select
+          value={roomId}
+          onChange={e => setRoomId(e.target.value)}
+        >
+          <option value="general">general</option>
+          <option value="travel">travel</option>
+          <option value="music">music</option>
+        </select>
+      </label>
+      <label>
+        <input
+          type="checkbox"
+          checked={isDark}
+          onChange={e => setIsDark(e.target.checked)}
+        />
+        Use dark theme
+      </label>
+      <hr />
+      <ChatRoom
+        roomId={roomId}
+        theme={isDark ? 'dark' : 'light'}
+      />
+    </>
+  );
+}
+```
+
+```js chat.js
+export function createConnection(serverUrl, roomId) {
+  // A real implementation would actually connect to the server
+  let connectedCallback;
+  let timeout;
+  return {
+    connect() {
+      timeout = setTimeout(() => {
+        if (connectedCallback) {
+          connectedCallback();
+        }
+      }, 100);
+    },
+    on(event, callback) {
+      if (connectedCallback) {
+        throw Error('Cannot add the handler twice.');
+      }
+      if (event !== 'connected') {
+        throw Error('Only "connected" event is supported.');
+      }
+      connectedCallback = callback;
+    },
+    disconnect() {
+      clearTimeout(timeout);
+    }
+  };
+}
+```
+
+```js notifications.js hidden
+import Toastify from 'toastify-js';
+import 'toastify-js/src/toastify.css';
+
+export function showNotification(message, theme) {
+  Toastify({
+    text: message,
+    duration: 2000,
+    gravity: 'top',
+    position: 'right',
+    style: {
+      background: theme === 'dark' ? 'black' : 'white',
+      color: theme === 'dark' ? 'white' : 'black',
+    },
+  }).showToast();
+}
+```
+
+```css
+label { display: block; margin-top: 10px; }
+```
+
+</Sandpack>
+
+The Effect that had `roomId` set to `"travel"` (so it connected to the `"travel"` room) will show the notification for `"travel"`. The Effect that had `roomId` set to `"music"` (so it connected to the `"music"` room) will show the notification for `"music"`. In other words, `connectedRoomId` comes from your Effect (which is reactive), while `theme` always uses the latest value.
+
+To solve the additional challenge, save the notification timeout ID and clear it in the cleanup function of your Effect:
+
+<Sandpack>
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "experimental",
+    "react-dom": "experimental",
+    "react-scripts": "latest",
+    "toastify-js": "1.12.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+```js
+import { useState, useEffect } from 'react';
+import { experimental_useEffectEvent as useEffectEvent } from 'react';
+import { createConnection, sendMessage } from './chat.js';
+import { showNotification } from './notifications.js';
+
+const serverUrl = 'https://localhost:1234';
+
+function ChatRoom({ roomId, theme }) {
+  const onConnected = useEffectEvent(connectedRoomId => {
+    showNotification('Welcome to ' + connectedRoomId, theme);
+  });
+
+  useEffect(() => {
+    const connection = createConnection(serverUrl, roomId);
+    let notificationTimeoutId;
+    connection.on('connected', () => {
+      notificationTimeoutId = setTimeout(() => {
+        onConnected(roomId);
+      }, 2000);
+    });
+    connection.connect();
+    return () => {
+      connection.disconnect();
+      if (notificationTimeoutId !== undefined) {
+        clearTimeout(notificationTimeoutId);
+      }
+    };
+  }, [roomId]);
+
+  return <h1>Welcome to the {roomId} room!</h1>
+}
+
+export default function App() {
+  const [roomId, setRoomId] = useState('general');
+  const [isDark, setIsDark] = useState(false);
+  return (
+    <>
+      <label>
+        Choose the chat room:{' '}
+        <select
+          value={roomId}
+          onChange={e => setRoomId(e.target.value)}
+        >
+          <option value="general">general</option>
+          <option value="travel">travel</option>
+          <option value="music">music</option>
+        </select>
+      </label>
+      <label>
+        <input
+          type="checkbox"
+          checked={isDark}
+          onChange={e => setIsDark(e.target.checked)}
+        />
+        Use dark theme
+      </label>
+      <hr />
+      <ChatRoom
+        roomId={roomId}
+        theme={isDark ? 'dark' : 'light'}
+      />
+    </>
+  );
+}
+```
+
+```js chat.js
+export function createConnection(serverUrl, roomId) {
+  // A real implementation would actually connect to the server
+  let connectedCallback;
+  let timeout;
+  return {
+    connect() {
+      timeout = setTimeout(() => {
+        if (connectedCallback) {
+          connectedCallback();
+        }
+      }, 100);
+    },
+    on(event, callback) {
+      if (connectedCallback) {
+        throw Error('Cannot add the handler twice.');
+      }
+      if (event !== 'connected') {
+        throw Error('Only "connected" event is supported.');
+      }
+      connectedCallback = callback;
+    },
+    disconnect() {
+      clearTimeout(timeout);
+    }
+  };
+}
+```
+
+```js notifications.js hidden
+import Toastify from 'toastify-js';
+import 'toastify-js/src/toastify.css';
+
+export function showNotification(message, theme) {
+  Toastify({
+    text: message,
+    duration: 2000,
+    gravity: 'top',
+    position: 'right',
+    style: {
+      background: theme === 'dark' ? 'black' : 'white',
+      color: theme === 'dark' ? 'white' : 'black',
+    },
+  }).showToast();
+}
+```
+
+```css
+label { display: block; margin-top: 10px; }
+```
+
+</Sandpack>
+
+This ensures that already scheduled (but not yet displayed) notifications get cancelled when you change rooms.
+
+</Solution>
+
+</Challenges>
diff --git a/beta/src/content/learn/sharing-state-between-components.md b/beta/src/content/learn/sharing-state-between-components.md
new file mode 100644
index 000000000..cc98d8f82
--- /dev/null
+++ b/beta/src/content/learn/sharing-state-between-components.md
@@ -0,0 +1,624 @@
+---
+title: Sharing State Between Components
+---
+
+<Intro>
+
+Sometimes, you want the state of two components to always change together. To do it, remove state from both of them, move it to their closest common parent, and then pass it down to them via props. This is known as *lifting state up,* and it's one of the most common things you will do writing React code.
+
+</Intro>
+
+<YouWillLearn>
+
+- How to share state between components by lifting it up
+- What are controlled and uncontrolled components
+
+</YouWillLearn>
+
+## Lifting state up by example {/*lifting-state-up-by-example*/}
+
+In this example, a parent `Accordion` component renders two separate `Panel`s:
+
+* `Accordion`
+  - `Panel`
+  - `Panel`
+
+Each `Panel` component has a boolean `isActive` state that determines whether its content is visible.
+
+Press the Show button for both panels:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+function Panel({ title, children }) {
+  const [isActive, setIsActive] = useState(false);
+  return (
+    <section className="panel">
+      <h3>{title}</h3>
+      {isActive ? (
+        <p>{children}</p>
+      ) : (
+        <button onClick={() => setIsActive(true)}>
+          Show
+        </button>
+      )}
+    </section>
+  );
+}
+
+export default function Accordion() {
+  return (
+    <>
+      <h2>Almaty, Kazakhstan</h2>
+      <Panel title="About">
+        With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was its capital city.
+      </Panel>
+      <Panel title="Etymology">
+        The name comes from <span lang="kk-KZ">алма</span>, the Kazakh word for "apple" and is often translated as "full of apples". In fact, the region surrounding Almaty is thought to be the ancestral home of the apple, and the wild <i lang="la">Malus sieversii</i> is considered a likely candidate for the ancestor of the modern domestic apple.
+      </Panel>
+    </>
+  );
+}
+```
+
+```css
+h3, p { margin: 5px 0px; }
+.panel {
+  padding: 10px;
+  border: 1px solid #aaa;
+}
+```
+
+</Sandpack>
+
+Notice how pressing one panel's button does not affect the other panel--they are independent.
+
+<DiagramGroup>
+
+<Diagram name="sharing_state_child" height={367} width={477} alt="Diagram showing a tree of three components, one parent labeled Accordion and two children labeled Panel. Both Panel components contain isActive with value false.">
+
+Initially, each `Panel`'s `isActive` state is `false`, so they both appear collapsed
+
+</Diagram>
+
+<Diagram name="sharing_state_child_clicked" height={367} width={480} alt="The same diagram as the previous, with the isActive of the first child Panel component highlighted indicating a click with the isActive value set to true. The second Panel component still contains value false." >
+
+Clicking either `Panel`'s button will only update that `Panel`'s `isActive` state alone
+
+</Diagram>
+
+</DiagramGroup>
+
+**But now let's say you want to change it so that only one panel is expanded at any given time.** With that design, expanding the second panel should collapse the first one. How would you do that?
+
+To coordinate these two panels, you need to "lift their state up" to a parent component in three steps:
+
+1. **Remove** state from the child components.
+2. **Pass** hardcoded data from the common parent.
+3. **Add** state to the common parent and pass it down together with the event handlers.
+
+This will allow the `Accordion` component to coordinate both `Panel`s and only expand one at a time.
+
+### Step 1: Remove state from the child components {/*step-1-remove-state-from-the-child-components*/}
+
+You will give control of the `Panel`'s `isActive` to its parent component. This means that the parent component will pass `isActive` to `Panel` as a prop instead. Start by **removing this line** from the `Panel` component:
+
+```js
+const [isActive, setIsActive] = useState(false);
+```
+
+And instead, add `isActive` to the `Panel`'s list of props:
+
+```js
+function Panel({ title, children, isActive }) {
+```
+
+Now the `Panel`'s parent component can *control* `isActive` by [passing it down as a prop.](/learn/passing-props-to-a-component) Conversely, the `Panel` component now has *no control* over the value of `isActive`--it's now up to the parent component!
+
+### Step 2: Pass hardcoded data from the common parent {/*step-2-pass-hardcoded-data-from-the-common-parent*/}
+
+To lift state up, you must locate the closest common parent component of *both* of the child components that you want to coordinate:
+
+* `Accordion` *(closest common parent)*
+  - `Panel`
+  - `Panel`
+
+In this example, it's the `Accordion` component. Since it's above both panels and can control their props, it will become the "source of truth" for which panel is currently active. Make the `Accordion` component pass a hardcoded value of `isActive` (for example, `true`) to both panels:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function Accordion() {
+  return (
+    <>
+      <h2>Almaty, Kazakhstan</h2>
+      <Panel title="About" isActive={true}>
+        With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was its capital city.
+      </Panel>
+      <Panel title="Etymology" isActive={true}>
+        The name comes from <span lang="kk-KZ">алма</span>, the Kazakh word for "apple" and is often translated as "full of apples". In fact, the region surrounding Almaty is thought to be the ancestral home of the apple, and the wild <i lang="la">Malus sieversii</i> is considered a likely candidate for the ancestor of the modern domestic apple.
+      </Panel>
+    </>
+  );
+}
+
+function Panel({ title, children, isActive }) {
+  return (
+    <section className="panel">
+      <h3>{title}</h3>
+      {isActive ? (
+        <p>{children}</p>
+      ) : (
+        <button onClick={() => setIsActive(true)}>
+          Show
+        </button>
+      )}
+    </section>
+  );
+}
+```
+
+```css
+h3, p { margin: 5px 0px; }
+.panel {
+  padding: 10px;
+  border: 1px solid #aaa;
+}
+```
+
+</Sandpack>
+
+Try editing the hardcoded `isActive` values in the `Accordion` component and see the result on the screen.
+
+### Step 3: Add state to the common parent {/*step-3-add-state-to-the-common-parent*/}
+
+Lifting state up often changes the nature of what you're storing as state.
+
+In this case, only one panel should be active at a time. This means that the `Accordion` common parent component needs to keep track of *which* panel is the active one. Instead of a `boolean` value, it could use a number as the index of the active `Panel` for the state variable:
+
+```js
+const [activeIndex, setActiveIndex] = useState(0);
+```
+
+When the `activeIndex` is `0`, the first panel is active, and when it's `1`, it's the second one.
+
+Clicking the "Show" button in either `Panel` needs to change the active index in `Accordion`. A `Panel` can't set the `activeIndex` state directly because it's defined inside the `Accordion`. The `Accordion` component needs to *explicitly allow* the `Panel` component to change its state by [passing an event handler down as a prop](/learn/responding-to-events#passing-event-handlers-as-props):
+
+```js
+<>
+  <Panel
+    isActive={activeIndex === 0}
+    onShow={() => setActiveIndex(0)}
+  >
+    ...
+  </Panel>
+  <Panel
+    isActive={activeIndex === 1}
+    onShow={() => setActiveIndex(1)}
+  >
+    ...
+  </Panel>
+</>
+```
+
+The `<button>` inside the `Panel` will now use the `onShow` prop as its click event handler:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function Accordion() {
+  const [activeIndex, setActiveIndex] = useState(0);
+  return (
+    <>
+      <h2>Almaty, Kazakhstan</h2>
+      <Panel
+        title="About"
+        isActive={activeIndex === 0}
+        onShow={() => setActiveIndex(0)}
+      >
+        With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was its capital city.
+      </Panel>
+      <Panel
+        title="Etymology"
+        isActive={activeIndex === 1}
+        onShow={() => setActiveIndex(1)}
+      >
+        The name comes from <span lang="kk-KZ">алма</span>, the Kazakh word for "apple" and is often translated as "full of apples". In fact, the region surrounding Almaty is thought to be the ancestral home of the apple, and the wild <i lang="la">Malus sieversii</i> is considered a likely candidate for the ancestor of the modern domestic apple.
+      </Panel>
+    </>
+  );
+}
+
+function Panel({
+  title,
+  children,
+  isActive,
+  onShow
+}) {
+  return (
+    <section className="panel">
+      <h3>{title}</h3>
+      {isActive ? (
+        <p>{children}</p>
+      ) : (
+        <button onClick={onShow}>
+          Show
+        </button>
+      )}
+    </section>
+  );
+}
+```
+
+```css
+h3, p { margin: 5px 0px; }
+.panel {
+  padding: 10px;
+  border: 1px solid #aaa;
+}
+```
+
+</Sandpack>
+
+This completes lifting state up! Moving state into the common parent component allowed you to coordinate the two panels. Using the active index instead of two "is shown" flags ensured that only one panel is active at a given time. And passing down the event handler to the child allowed the child to change the parent's state.
+
+<DiagramGroup>
+
+<Diagram name="sharing_state_parent" height={385} width={487} alt="Diagram showing a tree of three components, one parent labeled Accordion and two children labeled Panel. Accordion contains an activeIndex value of zero which turns into isActive value of true passed to the first Panel, and isActive value of false passed to the second Panel." >
+
+Initially, `Accordion`'s `activeIndex` is `0`, so the first `Panel` receives `isActive = true`
+
+</Diagram>
+
+<Diagram name="sharing_state_parent_clicked" height={385} width={521} alt="The same diagram as the previous, with the activeIndex value of the parent Accordion component highlighted indicating a click with the value changed to one. The flow to both of the children Panel components is also highlighted, and the isActive value passed to each child is set to the opposite: false for the first Panel and true for the second one." >
+
+When `Accordion`'s `activeIndex` state changes to `1`, the second `Panel` receives `isActive = true` instead
+
+</Diagram>
+
+</DiagramGroup>
+
+<DeepDive>
+
+#### Controlled and uncontrolled components {/*controlled-and-uncontrolled-components*/}
+
+It is common to call a component with some local state "uncontrolled". For example, the original `Panel` component with an `isActive` state variable is uncontrolled because its parent cannot influence whether the panel is active or not.
+
+In contrast, you might say a component is "controlled" when the important information in it is driven by props rather than its own local state. This lets the parent component fully specify its behavior. The final `Panel` component with the `isActive` prop is controlled by the `Accordion` component.
+
+Uncontrolled components are easier to use within their parents because they require less configuration. But they're less flexible when you want to coordinate them together. Controlled components are maximally flexible, but they require the parent components to fully configure them with props.
+
+In practice, "controlled" and "uncontrolled" aren't strict technical terms--each component usually has some mix of both local state and props. However, this is a useful way to talk about how components are designed and what capabilities they offer.
+
+When writing a component, consider which information in it should be controlled (via props), and which information should be uncontrolled (via state). But you can always change your mind and refactor later.
+
+</DeepDive>
+
+## A single source of truth for each state {/*a-single-source-of-truth-for-each-state*/}
+
+In a React application, many components will have their own state. Some state may "live" close to the leaf components (components at the bottom of the tree) like inputs. Other state may "live" closer to the top of the app. For example, even client-side routing libraries are usually implemented by storing the current route in the React state, and passing it down by props!
+
+**For each unique piece of state, you will choose the component that "owns" it.** This principle is also known as having a ["single source of truth".](https://en.wikipedia.org/wiki/Single_source_of_truth) It doesn't mean that all state lives in one place--but that for _each_ piece of state, there is a _specific_ component that holds that piece of information. Instead of duplicating shared state between components, you will *lift it up* to their common shared parent, and *pass it down* to the children that need it.
+
+Your app will change as you work on it. It is common that you will move state down or back up while you're still figuring out where each piece of the state "lives". This is all part of the process!
+
+To see what this feels like in practice with a few more components, read [Thinking in React.](/learn/thinking-in-react)
+
+<Recap>
+
+* When you want to coordinate two components, move their state to their common parent.
+* Then pass the information down through props from their common parent.
+* Finally, pass the event handlers down so that the children can change the parent's state.
+* It's useful to consider components as "controlled" (driven by props) or "uncontrolled" (driven by state).
+
+</Recap>
+
+<Challenges>
+
+#### Synced inputs {/*synced-inputs*/}
+
+These two inputs are independent. Make them stay in sync: editing one input should update the other input with the same text, and vice versa. 
+
+<Hint>
+
+You'll need to lift their state up into the parent component.
+
+</Hint>
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function SyncedInputs() {
+  return (
+    <>
+      <Input label="First input" />
+      <Input label="Second input" />
+    </>
+  );
+}
+
+function Input({ label }) {
+  const [text, setText] = useState('');
+
+  function handleChange(e) {
+    setText(e.target.value);
+  }
+
+  return (
+    <label>
+      {label}
+      {' '}
+      <input
+        value={text}
+        onChange={handleChange}
+      />
+    </label>
+  );
+}
+```
+
+```css
+input { margin: 5px; }
+label { display: block; }
+```
+
+</Sandpack>
+
+<Solution>
+
+Move the `text` state variable into the parent component along with the `handleChange` handler. Then pass them down as props to both of the `Input` components. This will keep them in sync.
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function SyncedInputs() {
+  const [text, setText] = useState('');
+
+  function handleChange(e) {
+    setText(e.target.value);
+  }
+
+  return (
+    <>
+      <Input
+        label="First input"
+        value={text}
+        onChange={handleChange}
+      />
+      <Input
+        label="Second input"
+        value={text}
+        onChange={handleChange}
+      />
+    </>
+  );
+}
+
+function Input({ label, value, onChange }) {
+  return (
+    <label>
+      {label}
+      {' '}
+      <input
+        value={value}
+        onChange={onChange}
+      />
+    </label>
+  );
+}
+```
+
+```css
+input { margin: 5px; }
+label { display: block; }
+```
+
+</Sandpack>
+
+</Solution>
+
+#### Filtering a list {/*filtering-a-list*/}
+
+In this example, the `SearchBar` has its own `query` state that controls the text input. Its parent `FilterableList` component displays a `List` of items, but it doesn't take the search query into account.
+
+Use the `filterItems(foods, query)` function to filter the list according to the search query. To test your changes, verify that typing "s" into the input filters down the list to "Sushi", "Shish kebab", and "Dim sum".
+
+Note that `filterItems` is already implemented and imported so you don't need to write it yourself!
+
+<Hint>
+
+You will want to remove the `query` state and the `handleChange` handler from the `SearchBar`, and move them to the `FilterableList`. Then pass them down to `SearchBar` as `query` and `onChange` props.
+
+</Hint>
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+import { foods, filterItems } from './data.js';
+
+export default function FilterableList() {
+  return (
+    <>
+      <SearchBar />
+      <hr />
+      <List items={foods} />
+    </>
+  );
+}
+
+function SearchBar() {
+  const [query, setQuery] = useState('');
+
+  function handleChange(e) {
+    setQuery(e.target.value);
+  }
+
+  return (
+    <label>
+      Search:{' '}
+      <input
+        value={query}
+        onChange={handleChange}
+      />
+    </label>
+  );
+}
+
+function List({ items }) {
+  return (
+    <table>
+      <tbody>
+        {items.map(food => (
+          <tr key={food.id}>
+            <td>{food.name}</td>
+            <td>{food.description}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+```
+
+```js data.js
+export function filterItems(items, query) {
+  query = query.toLowerCase();
+  return items.filter(item =>
+    item.name.split(' ').some(word =>
+      word.toLowerCase().startsWith(query)
+    )
+  );
+}
+
+export const foods = [{
+  id: 0,
+  name: 'Sushi',
+  description: 'Sushi is a traditional Japanese dish of prepared vinegared rice'
+}, {
+  id: 1,
+  name: 'Dal',
+  description: 'The most common way of preparing dal is in the form of a soup to which onions, tomatoes and various spices may be added'
+}, {
+  id: 2,
+  name: 'Pierogi',
+  description: 'Pierogi are filled dumplings made by wrapping unleavened dough around a savoury or sweet filling and cooking in boiling water'
+}, {
+  id: 3,
+  name: 'Shish kebab',
+  description: 'Shish kebab is a popular meal of skewered and grilled cubes of meat.'
+}, {
+  id: 4,
+  name: 'Dim sum',
+  description: 'Dim sum is a large range of small dishes that Cantonese people traditionally enjoy in restaurants for breakfast and lunch'
+}];
+```
+
+</Sandpack>
+
+<Solution>
+
+Lift the `query` state up into the `FilterableList` component. Call `filterItems(foods, query)` to get the filtered list and pass it down to the `List`. Now changing the query input is reflected in the list:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+import { foods, filterItems } from './data.js';
+
+export default function FilterableList() {
+  const [query, setQuery] = useState('');
+  const results = filterItems(foods, query);
+
+  function handleChange(e) {
+    setQuery(e.target.value);
+  }
+
+  return (
+    <>
+      <SearchBar
+        query={query}
+        onChange={handleChange}
+      />
+      <hr />
+      <List items={results} />
+    </>
+  );
+}
+
+function SearchBar({ query, onChange }) {
+  return (
+    <label>
+      Search:{' '}
+      <input
+        value={query}
+        onChange={onChange}
+      />
+    </label>
+  );
+}
+
+function List({ items }) {
+  return (
+    <table>
+      <tbody> 
+        {items.map(food => (
+          <tr key={food.id}>
+            <td>{food.name}</td>
+            <td>{food.description}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+```
+
+```js data.js
+export function filterItems(items, query) {
+  query = query.toLowerCase();
+  return items.filter(item =>
+    item.name.split(' ').some(word =>
+      word.toLowerCase().startsWith(query)
+    )
+  );
+}
+
+export const foods = [{
+  id: 0,
+  name: 'Sushi',
+  description: 'Sushi is a traditional Japanese dish of prepared vinegared rice'
+}, {
+  id: 1,
+  name: 'Dal',
+  description: 'The most common way of preparing dal is in the form of a soup to which onions, tomatoes and various spices may be added'
+}, {
+  id: 2,
+  name: 'Pierogi',
+  description: 'Pierogi are filled dumplings made by wrapping unleavened dough around a savoury or sweet filling and cooking in boiling water'
+}, {
+  id: 3,
+  name: 'Shish kebab',
+  description: 'Shish kebab is a popular meal of skewered and grilled cubes of meat.'
+}, {
+  id: 4,
+  name: 'Dim sum',
+  description: 'Dim sum is a large range of small dishes that Cantonese people traditionally enjoy in restaurants for breakfast and lunch'
+}];
+```
+
+</Sandpack>
+
+</Solution>
+
+</Challenges>
diff --git a/beta/src/content/learn/start-a-new-react-project.md b/beta/src/content/learn/start-a-new-react-project.md
new file mode 100644
index 000000000..3e1d44d36
--- /dev/null
+++ b/beta/src/content/learn/start-a-new-react-project.md
@@ -0,0 +1,83 @@
+---
+title: Start a New React Project
+---
+
+<Intro>
+
+If you're starting a new project, we recommend to use a toolchain or a framework. These tools provide a comfortable development environment but require a local Node.js installation.
+
+</Intro>
+
+<YouWillLearn>
+
+* How toolchains are different from frameworks
+* How to start a project with a minimal toolchain
+* How to start a project with a fully-featured framework
+* What's inside popular toolchains and frameworks
+
+</YouWillLearn>
+
+## Choose your own adventure {/*choose-your-own-adventure*/}
+
+React is a library that lets you organize UI code by breaking it apart into pieces called components. React doesn't take care of routing or data management. This means there are several ways to start a new React project:
+
+* [Start with an **HTML file and a script tag.**](/learn/add-react-to-a-website) This doesn't require Node.js setup but offers limited features.
+* Start with a **minimal toolchain,** adding more features to your project as you go. (Great for learning!)
+* Start with an **opinionated framework** that has common features like data fetching and routing built-in.
+
+## Getting started with a minimal toolchain {/*getting-started-with-a-minimal-toolchain*/}
+
+If you're **learning React,** we recommend [Create React App.](https://create-react-app.dev/) It is the most popular way to try out React and build a new single-page, client-side application. It's made for React but isn't opinionated about routing or data fetching.
+
+First, install [Node.js.](https://nodejs.org/en/) Then open your terminal and run this line to create a project:
+
+<TerminalBlock>
+
+npx create-react-app my-app
+
+</TerminalBlock>
+
+Now you can run your app with:
+
+<TerminalBlock>
+
+cd my-app
+npm start
+
+</TerminalBlock>
+
+For more information, [check out the official guide.](https://create-react-app.dev/docs/getting-started)
+
+> Create React App doesn't handle backend logic or databases. You can use it with any backend. When you build a project, you'll get a folder with static HTML, CSS and JS. Because Create React App can't take advantage of the server, it doesn't provide the best performance. If you're looking for faster loading times and built-in features like routing and server-side logic, we recommend using a framework instead.
+
+### Popular alternatives {/*toolkit-popular-alternatives*/}
+
+* [Vite](https://vitejs.dev/guide/)
+* [Parcel](https://parceljs.org/getting-started/webapp/)
+
+## Building with a full-featured framework {/*building-with-a-full-featured-framework*/}
+
+If you're looking to **start a production-ready project,** [Next.js](https://nextjs.org/) is a great place to start. Next.js is a popular, lightweight framework for static and server‑rendered applications built with React. It comes pre-packaged with features like routing, styling, and server-side rendering, getting your project up and running quickly. 
+
+The [Next.js Foundations](https://nextjs.org/learn/foundations/about-nextjs) tutorial is a great introduction to building with React and Next.js.
+
+### Popular alternatives {/*framework-popular-alternatives*/}
+
+* [Gatsby](https://www.gatsbyjs.org/)
+* [Remix](https://remix.run/)
+* [Razzle](https://razzlejs.org/)
+
+## Custom toolchains {/*custom-toolchains*/}
+
+You may prefer to create and configure your own toolchain. A toolchain typically consists of:
+
+* A **package manager** lets you install, update, and manage third-party packages. Popular package managers: [npm](https://www.npmjs.com/) (built into Node.js), [Yarn](https://yarnpkg.com/), [pnpm.](https://pnpm.io/)
+* A **compiler** lets you compile modern language features and additional syntax like JSX or type annotations for the browsers. Popular compilers: [Babel](https://babeljs.io/), [TypeScript](https://www.typescriptlang.org/), [swc.](https://swc.rs/)
+* A **bundler** lets you write modular code and bundle it together into small packages to optimize load time. Popular bundlers: [webpack](https://webpack.js.org/), [Parcel](https://parceljs.org/), [esbuild](https://esbuild.github.io/), [swc.](https://swc.rs/)
+* A **minifier** makes your code more compact so that it loads faster. Popular minifiers: [Terser](https://terser.org/), [swc.](https://swc.rs/)
+* A **server** handles server requests so that you can render components to HTML. Popular servers: [Express.](https://expressjs.com/)
+* A **linter** checks your code for common mistakes. Popular linters: [ESLint.](https://eslint.org/)
+* A **test runner** lets you run tests against your code. Popular test runners: [Jest.](https://jestjs.io/)
+
+If you prefer to set up your own JavaScript toolchain from scratch, [check out this guide](https://blog.usejournal.com/creating-a-react-app-from-scratch-f3c693b84658) that re-creates some of the Create React App functionality. A framework will usually also provide a routing and a data fetching solution. In a larger project, you might also want to manage multiple packages in a single repository with a tool like [Nx](https://nx.dev/react) or [Turborepo.](https://turborepo.org/)
+
diff --git a/beta/src/content/learn/state-a-components-memory.md b/beta/src/content/learn/state-a-components-memory.md
new file mode 100644
index 000000000..e67cf0a51
--- /dev/null
+++ b/beta/src/content/learn/state-a-components-memory.md
@@ -0,0 +1,1509 @@
+---
+title: "State: A Component's Memory"
+---
+
+<Intro>
+
+Components often need to change what's on the screen as a result of an interaction. Typing into the form should update the input field, clicking "next" on an image carousel should change which image is displayed, clicking "buy" should put a product in the shopping cart. Components need to "remember" things: the current input value, the current image, the shopping cart. In React, this kind of component-specific memory is called *state*.
+
+</Intro>
+
+<YouWillLearn>
+
+* How to add a state variable with the [`useState`](/reference/react/useState) Hook
+* What pair of values the `useState` Hook returns
+* How to add more than one state variable
+* Why state is called local
+
+</YouWillLearn>
+
+## When a regular variable isn’t enough {/*when-a-regular-variable-isnt-enough*/}
+
+Here's a component that renders a sculpture image. Clicking the "Next" button should show the next sculpture by changing the `index` to `1`, then `2`, and so on. However, this **won't work** (you can try it!):
+
+<Sandpack>
+
+```js
+import { sculptureList } from './data.js';
+
+export default function Gallery() {
+  let index = 0;
+
+  function handleClick() {
+    index = index + 1;
+  }
+
+  let sculpture = sculptureList[index];
+  return (
+    <>
+      <button onClick={handleClick}>
+        Next
+      </button>
+      <h2>
+        <i>{sculpture.name} </i> 
+        by {sculpture.artist}
+      </h2>
+      <h3>  
+        ({index + 1} of {sculptureList.length})
+      </h3>
+      <img 
+        src={sculpture.url} 
+        alt={sculpture.alt}
+      />
+      <p>
+        {sculpture.description}
+      </p>
+    </>
+  );
+}
+```
+
+```js data.js
+export const sculptureList = [{
+  name: 'Homenaje a la Neurocirugía',
+  artist: 'Marta Colvin Andrade',
+  description: 'Although Colvin is predominantly known for abstract themes that allude to pre-Hispanic symbols, this gigantic sculpture, an homage to neurosurgery, is one of her most recognizable public art pieces.',
+  url: 'https://i.imgur.com/Mx7dA2Y.jpg',
+  alt: 'A bronze statue of two crossed hands delicately holding a human brain in their fingertips.'  
+}, {
+  name: 'Floralis Genérica',
+  artist: 'Eduardo Catalano',
+  description: 'This enormous (75 ft. or 23m) silver flower is located in Buenos Aires. It is designed to move, closing its petals in the evening or when strong winds blow and opening them in the morning.',
+  url: 'https://i.imgur.com/ZF6s192m.jpg',
+  alt: 'A gigantic metallic flower sculpture with reflective mirror-like petals and strong stamens.'
+}, {
+  name: 'Eternal Presence',
+  artist: 'John Woodrow Wilson',
+  description: 'Wilson was known for his preoccupation with equality, social justice, as well as the essential and spiritual qualities of humankind. This massive (7ft. or 2,13m) bronze represents what he described as "a symbolic Black presence infused with a sense of universal humanity."',
+  url: 'https://i.imgur.com/aTtVpES.jpg',
+  alt: 'The sculpture depicting a human head seems ever-present and solemn. It radiates calm and serenity.'
+}, {
+  name: 'Moai',
+  artist: 'Unknown Artist',
+  description: 'Located on the Easter Island, there are 1,000 moai, or extant monumental statues, created by the early Rapa Nui people, which some believe represented deified ancestors.',
+  url: 'https://i.imgur.com/RCwLEoQm.jpg',
+  alt: 'Three monumental stone busts with the heads that are disproportionately large with somber faces.'
+}, {
+  name: 'Blue Nana',
+  artist: 'Niki de Saint Phalle',
+  description: 'The Nanas are triumphant creatures, symbols of femininity and maternity. Initially, Saint Phalle used fabric and found objects for the Nanas, and later on introduced polyester to achieve a more vibrant effect.',
+  url: 'https://i.imgur.com/Sd1AgUOm.jpg',
+  alt: 'A large mosaic sculpture of a whimsical dancing female figure in a colorful costume emanating joy.'
+}, {
+  name: 'Ultimate Form',
+  artist: 'Barbara Hepworth',
+  description: 'This abstract bronze sculpture is a part of The Family of Man series located at Yorkshire Sculpture Park. Hepworth chose not to create literal representations of the world but developed abstract forms inspired by people and landscapes.',
+  url: 'https://i.imgur.com/2heNQDcm.jpg',
+  alt: 'A tall sculpture made of three elements stacked on each other reminding of a human figure.'
+}, {
+  name: 'Cavaliere',
+  artist: 'Lamidi Olonade Fakeye',
+  description: "Descended from four generations of woodcarvers, Fakeye's work blended traditional and contemporary Yoruba themes.",
+  url: 'https://i.imgur.com/wIdGuZwm.png',
+  alt: 'An intricate wood sculpture of a warrior with a focused face on a horse adorned with patterns.'
+}, {
+  name: 'Big Bellies',
+  artist: 'Alina Szapocznikow',
+  description: "Szapocznikow is known for her sculptures of the fragmented body as a metaphor for the fragility and impermanence of youth and beauty. This sculpture depicts two very realistic large bellies stacked on top of each other, each around five feet (1,5m) tall.",
+  url: 'https://i.imgur.com/AlHTAdDm.jpg',
+  alt: 'The sculpture reminds a cascade of folds, quite different from bellies in classical sculptures.'
+}, {
+  name: 'Terracotta Army',
+  artist: 'Unknown Artist',
+  description: 'The Terracotta Army is a collection of terracotta sculptures depicting the armies of Qin Shi Huang, the first Emperor of China. The army consisted of more than 8,000 soldiers, 130 chariots with 520 horses, and 150 cavalry horses.',
+  url: 'https://i.imgur.com/HMFmH6m.jpg',
+  alt: '12 terracotta sculptures of solemn warriors, each with a unique facial expression and armor.'
+}, {
+  name: 'Lunar Landscape',
+  artist: 'Louise Nevelson',
+  description: 'Nevelson was known for scavenging objects from New York City debris, which she would later assemble into monumental constructions. In this one, she used disparate parts like a bedpost, juggling pin, and seat fragment, nailing and gluing them into boxes that reflect the influence of Cubism’s geometric abstraction of space and form.',
+  url: 'https://i.imgur.com/rN7hY6om.jpg',
+  alt: 'A black matte sculpture where the individual elements are initially indistinguishable.'
+}, {
+  name: 'Aureole',
+  artist: 'Ranjani Shettar',
+  description: 'Shettar merges the traditional and the modern, the natural and the industrial. Her art focuses on the relationship between man and nature. Her work was described as compelling both abstractly and figuratively, gravity defying, and a "fine synthesis of unlikely materials."',
+  url: 'https://i.imgur.com/okTpbHhm.jpg',
+  alt: 'A pale wire-like sculpture mounted on concrete wall and descending on the floor. It appears light.'
+}, {
+  name: 'Hippos',
+  artist: 'Taipei Zoo',
+  description: 'The Taipei Zoo commissioned a Hippo Square featuring submerged hippos at play.',
+  url: 'https://i.imgur.com/6o5Vuyu.jpg',
+  alt: 'A group of bronze hippo sculptures emerging from the sett sidewalk as if they were swimming.'
+}];
+```
+
+```css
+h2 { margin-top: 10px; margin-bottom: 0; }
+h3 {
+  margin-top: 5px;
+  font-weight: normal;
+  font-size: 100%;
+}
+img { width: 120px; height: 120px; }
+button {
+  display: block;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+```
+
+</Sandpack>
+
+The `handleClick` event handler is updating a local variable, `index`. But two things prevent that change from being visible:
+
+1. **Local variables don't persist between renders.** When React renders this component a second time, it renders it from scratch—it doesn't consider any changes to the local variables.
+2. **Changes to local variables won't trigger renders.** React doesn't realize it needs to render the component again with the new data.
+
+To update a component with new data, two things need to happen:
+
+1. **Retain** the data between renders.
+2. **Trigger** React to render the component with new data (re-rendering).
+
+The [`useState`](/reference/react/useState) Hook provides those two things:
+
+1. A **state variable** to retain the data between renders.
+2. A **state setter function** to update the variable and trigger React to render the component again.
+
+## Adding a state variable {/*adding-a-state-variable*/}
+
+To add a state variable, import `useState` from React at the top of the file:
+
+```js
+import { useState } from 'react';
+```
+
+Then, replace this line:
+
+```js
+let index = 0;
+```
+
+with
+
+```js
+const [index, setIndex] = useState(0);
+```
+
+`index` is a state variable and `setIndex` is the setter function.
+
+> The `[` and `]` syntax here is called [array destructuring](https://javascript.info/destructuring-assignment) and it lets you read values from an array. The array returned by `useState` always has exactly two items.
+
+This is how they work together in `handleClick`:
+
+```js
+function handleClick() {
+  setIndex(index + 1);
+}
+```
+
+Now clicking the "Next" button switches the current sculpture:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+import { sculptureList } from './data.js';
+
+export default function Gallery() {
+  const [index, setIndex] = useState(0);
+
+  function handleClick() {
+    setIndex(index + 1);
+  }
+
+  let sculpture = sculptureList[index];
+  return (
+    <>
+      <button onClick={handleClick}>
+        Next
+      </button>
+      <h2>
+        <i>{sculpture.name} </i> 
+        by {sculpture.artist}
+      </h2>
+      <h3>  
+        ({index + 1} of {sculptureList.length})
+      </h3>
+      <img 
+        src={sculpture.url} 
+        alt={sculpture.alt}
+      />
+      <p>
+        {sculpture.description}
+      </p>
+    </>
+  );
+}
+```
+
+```js data.js
+export const sculptureList = [{
+  name: 'Homenaje a la Neurocirugía',
+  artist: 'Marta Colvin Andrade',
+  description: 'Although Colvin is predominantly known for abstract themes that allude to pre-Hispanic symbols, this gigantic sculpture, an homage to neurosurgery, is one of her most recognizable public art pieces.',
+  url: 'https://i.imgur.com/Mx7dA2Y.jpg',
+  alt: 'A bronze statue of two crossed hands delicately holding a human brain in their fingertips.'  
+}, {
+  name: 'Floralis Genérica',
+  artist: 'Eduardo Catalano',
+  description: 'This enormous (75 ft. or 23m) silver flower is located in Buenos Aires. It is designed to move, closing its petals in the evening or when strong winds blow and opening them in the morning.',
+  url: 'https://i.imgur.com/ZF6s192m.jpg',
+  alt: 'A gigantic metallic flower sculpture with reflective mirror-like petals and strong stamens.'
+}, {
+  name: 'Eternal Presence',
+  artist: 'John Woodrow Wilson',
+  description: 'Wilson was known for his preoccupation with equality, social justice, as well as the essential and spiritual qualities of humankind. This massive (7ft. or 2,13m) bronze represents what he described as "a symbolic Black presence infused with a sense of universal humanity."',
+  url: 'https://i.imgur.com/aTtVpES.jpg',
+  alt: 'The sculpture depicting a human head seems ever-present and solemn. It radiates calm and serenity.'
+}, {
+  name: 'Moai',
+  artist: 'Unknown Artist',
+  description: 'Located on the Easter Island, there are 1,000 moai, or extant monumental statues, created by the early Rapa Nui people, which some believe represented deified ancestors.',
+  url: 'https://i.imgur.com/RCwLEoQm.jpg',
+  alt: 'Three monumental stone busts with the heads that are disproportionately large with somber faces.'
+}, {
+  name: 'Blue Nana',
+  artist: 'Niki de Saint Phalle',
+  description: 'The Nanas are triumphant creatures, symbols of femininity and maternity. Initially, Saint Phalle used fabric and found objects for the Nanas, and later on introduced polyester to achieve a more vibrant effect.',
+  url: 'https://i.imgur.com/Sd1AgUOm.jpg',
+  alt: 'A large mosaic sculpture of a whimsical dancing female figure in a colorful costume emanating joy.'
+}, {
+  name: 'Ultimate Form',
+  artist: 'Barbara Hepworth',
+  description: 'This abstract bronze sculpture is a part of The Family of Man series located at Yorkshire Sculpture Park. Hepworth chose not to create literal representations of the world but developed abstract forms inspired by people and landscapes.',
+  url: 'https://i.imgur.com/2heNQDcm.jpg',
+  alt: 'A tall sculpture made of three elements stacked on each other reminding of a human figure.'
+}, {
+  name: 'Cavaliere',
+  artist: 'Lamidi Olonade Fakeye',
+  description: "Descended from four generations of woodcarvers, Fakeye's work blended traditional and contemporary Yoruba themes.",
+  url: 'https://i.imgur.com/wIdGuZwm.png',
+  alt: 'An intricate wood sculpture of a warrior with a focused face on a horse adorned with patterns.'
+}, {
+  name: 'Big Bellies',
+  artist: 'Alina Szapocznikow',
+  description: "Szapocznikow is known for her sculptures of the fragmented body as a metaphor for the fragility and impermanence of youth and beauty. This sculpture depicts two very realistic large bellies stacked on top of each other, each around five feet (1,5m) tall.",
+  url: 'https://i.imgur.com/AlHTAdDm.jpg',
+  alt: 'The sculpture reminds a cascade of folds, quite different from bellies in classical sculptures.'
+}, {
+  name: 'Terracotta Army',
+  artist: 'Unknown Artist',
+  description: 'The Terracotta Army is a collection of terracotta sculptures depicting the armies of Qin Shi Huang, the first Emperor of China. The army consisted of more than 8,000 soldiers, 130 chariots with 520 horses, and 150 cavalry horses.',
+  url: 'https://i.imgur.com/HMFmH6m.jpg',
+  alt: '12 terracotta sculptures of solemn warriors, each with a unique facial expression and armor.'
+}, {
+  name: 'Lunar Landscape',
+  artist: 'Louise Nevelson',
+  description: 'Nevelson was known for scavenging objects from New York City debris, which she would later assemble into monumental constructions. In this one, she used disparate parts like a bedpost, juggling pin, and seat fragment, nailing and gluing them into boxes that reflect the influence of Cubism’s geometric abstraction of space and form.',
+  url: 'https://i.imgur.com/rN7hY6om.jpg',
+  alt: 'A black matte sculpture where the individual elements are initially indistinguishable.'
+}, {
+  name: 'Aureole',
+  artist: 'Ranjani Shettar',
+  description: 'Shettar merges the traditional and the modern, the natural and the industrial. Her art focuses on the relationship between man and nature. Her work was described as compelling both abstractly and figuratively, gravity defying, and a "fine synthesis of unlikely materials."',
+  url: 'https://i.imgur.com/okTpbHhm.jpg',
+  alt: 'A pale wire-like sculpture mounted on concrete wall and descending on the floor. It appears light.'
+}, {
+  name: 'Hippos',
+  artist: 'Taipei Zoo',
+  description: 'The Taipei Zoo commissioned a Hippo Square featuring submerged hippos at play.',
+  url: 'https://i.imgur.com/6o5Vuyu.jpg',
+  alt: 'A group of bronze hippo sculptures emerging from the sett sidewalk as if they were swimming.'
+}];
+```
+
+```css
+h2 { margin-top: 10px; margin-bottom: 0; }
+h3 {
+ margin-top: 5px;
+ font-weight: normal;
+ font-size: 100%;
+}
+img { width: 120px; height: 120px; }
+button {
+  display: block;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+```
+
+</Sandpack>
+
+### Meet your first Hook {/*meet-your-first-hook*/}
+
+In React, `useState`, as well as any other function starting with "`use`", is called a Hook.
+
+*Hooks* are special functions that are only available while React is [rendering](/learn/render-and-commit#step-1-trigger-a-render) (which we'll get into in more detail on the next page). They let you "hook into" different React features.
+
+State is just one of those features, but you will meet the other Hooks later.
+
+<Pitfall>
+
+**Hooks—functions starting with `use`—can only be called at the top level of your components or [your own Hooks.](/learn/reusing-logic-with-custom-hooks)** You can't call Hooks inside conditions, loops, or other nested functions. Hooks are functions, but it's helpful to think of them as unconditional declarations about your component's needs. You "use" React features at the top of your component similar to how you "import" modules at the top of your file.
+
+</Pitfall>
+
+### Anatomy of `useState` {/*anatomy-of-usestate*/}
+
+When you call [`useState`](/reference/react/useState), you are telling React that you want this component to remember something:
+
+```js
+const [index, setIndex] = useState(0);
+```
+
+In this case, you want React to remember `index`.
+
+> The convention is to name this pair like `const [something, setSomething]`. You could name it anything you like, but conventions make things easier to understand across projects.
+
+The only argument to `useState` is the **initial value** of your state variable. In this example, the `index`'s initial value is set to `0` with `useState(0)`. 
+
+Every time your component renders, `useState` gives you an array containing two values:
+
+1. The **state variable** (`index`) with the value you stored.
+2. The **state setter function** (`setIndex`) which can update the state variable and trigger React to render the component again.
+
+Here's how that happens in action:
+
+```js
+const [index, setIndex] = useState(0);
+```
+
+1. **Your component renders the first time.** Because you passed `0` to `useState` as the initial value for `index`, it will return `[0, setIndex]`. React remembers `0` is the latest state value.
+2. **You update the state.** When a user clicks the button, it calls `setIndex(index + 1)`. `index` is `0`, so it's `setIndex(1)`. This tells React to remember `index` is `1` now and triggers another render.
+3. **Your component's second render.** React still sees `useState(0)`, but because React *remembers* that you set `index` to `1`, it returns `[1, setIndex]` instead.
+4. And so on!
+
+## Giving a component multiple state variables {/*giving-a-component-multiple-state-variables*/}
+
+You can have as many state variables of as many types as you like in one component. This component has two state variables, a number `index` and a boolean `showMore` that's toggled when you click "Show details":
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+import { sculptureList } from './data.js';
+
+export default function Gallery() {
+  const [index, setIndex] = useState(0);
+  const [showMore, setShowMore] = useState(false);
+
+  function handleNextClick() {
+    setIndex(index + 1);
+  }
+
+  function handleMoreClick() {
+    setShowMore(!showMore);
+  }
+
+  let sculpture = sculptureList[index];
+  return (
+    <>
+      <button onClick={handleNextClick}>
+        Next
+      </button>
+      <h2>
+        <i>{sculpture.name} </i> 
+        by {sculpture.artist}
+      </h2>
+      <h3>  
+        ({index + 1} of {sculptureList.length})
+      </h3>
+      <button onClick={handleMoreClick}>
+        {showMore ? 'Hide' : 'Show'} details
+      </button>
+      {showMore && <p>{sculpture.description}</p>}
+      <img 
+        src={sculpture.url} 
+        alt={sculpture.alt}
+      />
+    </>
+  );
+}
+```
+
+```js data.js
+export const sculptureList = [{
+  name: 'Homenaje a la Neurocirugía',
+  artist: 'Marta Colvin Andrade',
+  description: 'Although Colvin is predominantly known for abstract themes that allude to pre-Hispanic symbols, this gigantic sculpture, an homage to neurosurgery, is one of her most recognizable public art pieces.',
+  url: 'https://i.imgur.com/Mx7dA2Y.jpg',
+  alt: 'A bronze statue of two crossed hands delicately holding a human brain in their fingertips.'  
+}, {
+  name: 'Floralis Genérica',
+  artist: 'Eduardo Catalano',
+  description: 'This enormous (75 ft. or 23m) silver flower is located in Buenos Aires. It is designed to move, closing its petals in the evening or when strong winds blow and opening them in the morning.',
+  url: 'https://i.imgur.com/ZF6s192m.jpg',
+  alt: 'A gigantic metallic flower sculpture with reflective mirror-like petals and strong stamens.'
+}, {
+  name: 'Eternal Presence',
+  artist: 'John Woodrow Wilson',
+  description: 'Wilson was known for his preoccupation with equality, social justice, as well as the essential and spiritual qualities of humankind. This massive (7ft. or 2,13m) bronze represents what he described as "a symbolic Black presence infused with a sense of universal humanity."',
+  url: 'https://i.imgur.com/aTtVpES.jpg',
+  alt: 'The sculpture depicting a human head seems ever-present and solemn. It radiates calm and serenity.'
+}, {
+  name: 'Moai',
+  artist: 'Unknown Artist',
+  description: 'Located on the Easter Island, there are 1,000 moai, or extant monumental statues, created by the early Rapa Nui people, which some believe represented deified ancestors.',
+  url: 'https://i.imgur.com/RCwLEoQm.jpg',
+  alt: 'Three monumental stone busts with the heads that are disproportionately large with somber faces.'
+}, {
+  name: 'Blue Nana',
+  artist: 'Niki de Saint Phalle',
+  description: 'The Nanas are triumphant creatures, symbols of femininity and maternity. Initially, Saint Phalle used fabric and found objects for the Nanas, and later on introduced polyester to achieve a more vibrant effect.',
+  url: 'https://i.imgur.com/Sd1AgUOm.jpg',
+  alt: 'A large mosaic sculpture of a whimsical dancing female figure in a colorful costume emanating joy.'
+}, {
+  name: 'Ultimate Form',
+  artist: 'Barbara Hepworth',
+  description: 'This abstract bronze sculpture is a part of The Family of Man series located at Yorkshire Sculpture Park. Hepworth chose not to create literal representations of the world but developed abstract forms inspired by people and landscapes.',
+  url: 'https://i.imgur.com/2heNQDcm.jpg',
+  alt: 'A tall sculpture made of three elements stacked on each other reminding of a human figure.'
+}, {
+  name: 'Cavaliere',
+  artist: 'Lamidi Olonade Fakeye',
+  description: "Descended from four generations of woodcarvers, Fakeye's work blended traditional and contemporary Yoruba themes.",
+  url: 'https://i.imgur.com/wIdGuZwm.png',
+  alt: 'An intricate wood sculpture of a warrior with a focused face on a horse adorned with patterns.'
+}, {
+  name: 'Big Bellies',
+  artist: 'Alina Szapocznikow',
+  description: "Szapocznikow is known for her sculptures of the fragmented body as a metaphor for the fragility and impermanence of youth and beauty. This sculpture depicts two very realistic large bellies stacked on top of each other, each around five feet (1,5m) tall.",
+  url: 'https://i.imgur.com/AlHTAdDm.jpg',
+  alt: 'The sculpture reminds a cascade of folds, quite different from bellies in classical sculptures.'
+}, {
+  name: 'Terracotta Army',
+  artist: 'Unknown Artist',
+  description: 'The Terracotta Army is a collection of terracotta sculptures depicting the armies of Qin Shi Huang, the first Emperor of China. The army consisted of more than 8,000 soldiers, 130 chariots with 520 horses, and 150 cavalry horses.',
+  url: 'https://i.imgur.com/HMFmH6m.jpg',
+  alt: '12 terracotta sculptures of solemn warriors, each with a unique facial expression and armor.'
+}, {
+  name: 'Lunar Landscape',
+  artist: 'Louise Nevelson',
+  description: 'Nevelson was known for scavenging objects from New York City debris, which she would later assemble into monumental constructions. In this one, she used disparate parts like a bedpost, juggling pin, and seat fragment, nailing and gluing them into boxes that reflect the influence of Cubism’s geometric abstraction of space and form.',
+  url: 'https://i.imgur.com/rN7hY6om.jpg',
+  alt: 'A black matte sculpture where the individual elements are initially indistinguishable.'
+}, {
+  name: 'Aureole',
+  artist: 'Ranjani Shettar',
+  description: 'Shettar merges the traditional and the modern, the natural and the industrial. Her art focuses on the relationship between man and nature. Her work was described as compelling both abstractly and figuratively, gravity defying, and a "fine synthesis of unlikely materials."',
+  url: 'https://i.imgur.com/okTpbHhm.jpg',
+  alt: 'A pale wire-like sculpture mounted on concrete wall and descending on the floor. It appears light.'
+}, {
+  name: 'Hippos',
+  artist: 'Taipei Zoo',
+  description: 'The Taipei Zoo commissioned a Hippo Square featuring submerged hippos at play.',
+  url: 'https://i.imgur.com/6o5Vuyu.jpg',
+  alt: 'A group of bronze hippo sculptures emerging from the sett sidewalk as if they were swimming.'
+}];
+```
+
+```css
+h2 { margin-top: 10px; margin-bottom: 0; }
+h3 {
+ margin-top: 5px;
+ font-weight: normal;
+ font-size: 100%;
+}
+img { width: 120px; height: 120px; }
+button {
+  display: block;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+```
+
+</Sandpack>
+
+It is a good idea to have multiple state variables if their state is unrelated, like `index` and `showMore` in this example. But if you find that you often change two state variables together, it might be better to combine them into a single one. For example, if you have a form with many fields, it's more convenient to have a single state variable that holds an object than state variable per field. [Choosing the State Structure](/learn/choosing-the-state-structure) has more tips on this.
+
+<DeepDive>
+
+#### How does React know which state to return? {/*how-does-react-know-which-state-to-return*/}
+
+You might have noticed that the `useState` call does not receive any information about *which* state variable it refers to. There is no "identifier" that is passed to `useState`, so how does it know which of the state variables to return? Does it rely on some magic like parsing your functions? The answer is no.
+
+Instead, to enable their concise syntax, Hooks **rely on a stable call order on every render of the same component.** This works well in practice because if you follow the rule above ("only call Hooks at the top level"), Hooks will always be called in the same order. Additionally, a [linter plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks) catches most mistakes.
+
+Internally, React holds an array of state pairs for every component. It also maintains the current pair index, which is set to `0` before rendering. Each time you call `useState`, React gives you the next state pair and increments the index. You can read more about this mechanism in [React Hooks: Not Magic, Just Arrays.](https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e)
+
+This example **doesn't use React** but it gives you an idea of how `useState` works internally:
+
+<Sandpack>
+
+```js index.js active
+let componentHooks = [];
+let currentHookIndex = 0;
+
+// How useState works inside React (simplified).
+function useState(initialState) {
+  let pair = componentHooks[currentHookIndex];
+  if (pair) {
+    // This is not the first render,
+    // so the state pair already exists.
+    // Return it and prepare for next Hook call.
+    currentHookIndex++;
+    return pair;
+  }
+
+  // This is the first time we're rendering,
+  // so create a state pair and store it.
+  pair = [initialState, setState];
+
+  function setState(nextState) {
+    // When the user requests a state change,
+    // put the new value into the pair.
+    pair[0] = nextState;
+    updateDOM();
+  }
+
+  // Store the pair for future renders
+  // and prepare for the next Hook call.
+  componentHooks[currentHookIndex] = pair;
+  currentHookIndex++;
+  return pair;
+}
+
+function Gallery() {
+  // Each useState() call will get the next pair.
+  const [index, setIndex] = useState(0);
+  const [showMore, setShowMore] = useState(false);
+
+  function handleNextClick() {
+    setIndex(index + 1);
+  }
+
+  function handleMoreClick() {
+    setShowMore(!showMore);
+  }
+
+  let sculpture = sculptureList[index];
+  // This example doesn't use React, so
+  // return an output object instead of JSX.
+  return {
+    onNextClick: handleNextClick,
+    onMoreClick: handleMoreClick,
+    header: `${sculpture.name} by ${sculpture.artist}`,
+    counter: `${index + 1} of ${sculptureList.length}`,
+    more: `${showMore ? 'Hide' : 'Show'} details`,
+    description: showMore ? sculpture.description : null,
+    imageSrc: sculpture.url,
+    imageAlt: sculpture.alt
+  };
+}
+
+function updateDOM() {
+  // Reset the current Hook index
+  // before rendering the component.
+  currentHookIndex = 0;
+  let output = Gallery();
+
+  // Update the DOM to match the output.
+  // This is the part React does for you.
+  nextButton.onclick = output.onNextClick;
+  header.textContent = output.header;
+  moreButton.onclick = output.onMoreClick;
+  moreButton.textContent = output.more;
+  image.src = output.imageSrc;
+  image.alt = output.imageAlt;
+  if (output.description !== null) {
+    description.textContent = output.description;
+    description.style.display = '';
+  } else {
+    description.style.display = 'none';
+  }
+}
+
+let nextButton = document.getElementById('nextButton');
+let header = document.getElementById('header');
+let moreButton = document.getElementById('moreButton');
+let description = document.getElementById('description');
+let image = document.getElementById('image');
+let sculptureList = [{
+  name: 'Homenaje a la Neurocirugía',
+  artist: 'Marta Colvin Andrade',
+  description: 'Although Colvin is predominantly known for abstract themes that allude to pre-Hispanic symbols, this gigantic sculpture, an homage to neurosurgery, is one of her most recognizable public art pieces.',
+  url: 'https://i.imgur.com/Mx7dA2Y.jpg',
+  alt: 'A bronze statue of two crossed hands delicately holding a human brain in their fingertips.'  
+}, {
+  name: 'Floralis Genérica',
+  artist: 'Eduardo Catalano',
+  description: 'This enormous (75 ft. or 23m) silver flower is located in Buenos Aires. It is designed to move, closing its petals in the evening or when strong winds blow and opening them in the morning.',
+  url: 'https://i.imgur.com/ZF6s192m.jpg',
+  alt: 'A gigantic metallic flower sculpture with reflective mirror-like petals and strong stamens.'
+}, {
+  name: 'Eternal Presence',
+  artist: 'John Woodrow Wilson',
+  description: 'Wilson was known for his preoccupation with equality, social justice, as well as the essential and spiritual qualities of humankind. This massive (7ft. or 2,13m) bronze represents what he described as "a symbolic Black presence infused with a sense of universal humanity."',
+  url: 'https://i.imgur.com/aTtVpES.jpg',
+  alt: 'The sculpture depicting a human head seems ever-present and solemn. It radiates calm and serenity.'
+}, {
+  name: 'Moai',
+  artist: 'Unknown Artist',
+  description: 'Located on the Easter Island, there are 1,000 moai, or extant monumental statues, created by the early Rapa Nui people, which some believe represented deified ancestors.',
+  url: 'https://i.imgur.com/RCwLEoQm.jpg',
+  alt: 'Three monumental stone busts with the heads that are disproportionately large with somber faces.'
+}, {
+  name: 'Blue Nana',
+  artist: 'Niki de Saint Phalle',
+  description: 'The Nanas are triumphant creatures, symbols of femininity and maternity. Initially, Saint Phalle used fabric and found objects for the Nanas, and later on introduced polyester to achieve a more vibrant effect.',
+  url: 'https://i.imgur.com/Sd1AgUOm.jpg',
+  alt: 'A large mosaic sculpture of a whimsical dancing female figure in a colorful costume emanating joy.'
+}, {
+  name: 'Ultimate Form',
+  artist: 'Barbara Hepworth',
+  description: 'This abstract bronze sculpture is a part of The Family of Man series located at Yorkshire Sculpture Park. Hepworth chose not to create literal representations of the world but developed abstract forms inspired by people and landscapes.',
+  url: 'https://i.imgur.com/2heNQDcm.jpg',
+  alt: 'A tall sculpture made of three elements stacked on each other reminding of a human figure.'
+}, {
+  name: 'Cavaliere',
+  artist: 'Lamidi Olonade Fakeye',
+  description: "Descended from four generations of woodcarvers, Fakeye's work blended traditional and contemporary Yoruba themes.",
+  url: 'https://i.imgur.com/wIdGuZwm.png',
+  alt: 'An intricate wood sculpture of a warrior with a focused face on a horse adorned with patterns.'
+}, {
+  name: 'Big Bellies',
+  artist: 'Alina Szapocznikow',
+  description: "Szapocznikow is known for her sculptures of the fragmented body as a metaphor for the fragility and impermanence of youth and beauty. This sculpture depicts two very realistic large bellies stacked on top of each other, each around five feet (1,5m) tall.",
+  url: 'https://i.imgur.com/AlHTAdDm.jpg',
+  alt: 'The sculpture reminds a cascade of folds, quite different from bellies in classical sculptures.'
+}, {
+  name: 'Terracotta Army',
+  artist: 'Unknown Artist',
+  description: 'The Terracotta Army is a collection of terracotta sculptures depicting the armies of Qin Shi Huang, the first Emperor of China. The army consisted of more than 8,000 soldiers, 130 chariots with 520 horses, and 150 cavalry horses.',
+  url: 'https://i.imgur.com/HMFmH6m.jpg',
+  alt: '12 terracotta sculptures of solemn warriors, each with a unique facial expression and armor.'
+}, {
+  name: 'Lunar Landscape',
+  artist: 'Louise Nevelson',
+  description: 'Nevelson was known for scavenging objects from New York City debris, which she would later assemble into monumental constructions. In this one, she used disparate parts like a bedpost, juggling pin, and seat fragment, nailing and gluing them into boxes that reflect the influence of Cubism’s geometric abstraction of space and form.',
+  url: 'https://i.imgur.com/rN7hY6om.jpg',
+  alt: 'A black matte sculpture where the individual elements are initially indistinguishable.'
+}, {
+  name: 'Aureole',
+  artist: 'Ranjani Shettar',
+  description: 'Shettar merges the traditional and the modern, the natural and the industrial. Her art focuses on the relationship between man and nature. Her work was described as compelling both abstractly and figuratively, gravity defying, and a "fine synthesis of unlikely materials."',
+  url: 'https://i.imgur.com/okTpbHhm.jpg',
+  alt: 'A pale wire-like sculpture mounted on concrete wall and descending on the floor. It appears light.'
+}, {
+  name: 'Hippos',
+  artist: 'Taipei Zoo',
+  description: 'The Taipei Zoo commissioned a Hippo Square featuring submerged hippos at play.',
+  url: 'https://i.imgur.com/6o5Vuyu.jpg',
+  alt: 'A group of bronze hippo sculptures emerging from the sett sidewalk as if they were swimming.'
+}];
+
+// Make UI match the initial state.
+updateDOM();
+```
+
+```html public/index.html
+<button id="nextButton">
+  Next
+</button>
+<h3 id="header"></h3>
+<button id="moreButton"></button>
+<p id="description"></p>
+<img id="image">
+
+<style>
+* { box-sizing: border-box; }
+body { font-family: sans-serif; margin: 20px; padding: 0; }
+button { display: block; margin-bottom: 10px; }
+</style>
+```
+
+```css
+button { display: block; margin-bottom: 10px; }
+```
+
+</Sandpack>
+
+You don't have to understand it to use React, but you might find this a helpful mental model.
+
+</DeepDive>
+
+## State is isolated and private {/*state-is-isolated-and-private*/}
+
+State is local to a component instance on the screen. In other words, **if you render the same component twice, each copy will have completely isolated state!** Changing one of them will not affect the other.
+
+In this example, the `Gallery` component from earlier is rendered twice with no changes to its logic. Try clicking the buttons inside each of the galleries. Notice that their state is independent:
+
+<Sandpack>
+
+```js
+import Gallery from './Gallery.js';
+
+export default function Page() {
+  return (
+    <div className="Page">
+      <Gallery />
+      <Gallery />
+    </div>
+  );
+}
+
+```
+
+```js Gallery.js
+import { useState } from 'react';
+import { sculptureList } from './data.js';
+
+export default function Gallery() {
+  const [index, setIndex] = useState(0);
+  const [showMore, setShowMore] = useState(false);
+
+  function handleNextClick() {
+    setIndex(index + 1);
+  }
+
+  function handleMoreClick() {
+    setShowMore(!showMore);
+  }
+
+  let sculpture = sculptureList[index];
+  return (
+    <section>
+      <button onClick={handleNextClick}>
+        Next
+      </button>
+      <h2>
+        <i>{sculpture.name} </i> 
+        by {sculpture.artist}
+      </h2>
+      <h3>  
+        ({index + 1} of {sculptureList.length})
+      </h3>
+      <button onClick={handleMoreClick}>
+        {showMore ? 'Hide' : 'Show'} details
+      </button>
+      {showMore && <p>{sculpture.description}</p>}
+      <img 
+        src={sculpture.url} 
+        alt={sculpture.alt}
+      />
+    </section>
+  );
+}
+```
+
+```js data.js
+export const sculptureList = [{
+  name: 'Homenaje a la Neurocirugía',
+  artist: 'Marta Colvin Andrade',
+  description: 'Although Colvin is predominantly known for abstract themes that allude to pre-Hispanic symbols, this gigantic sculpture, an homage to neurosurgery, is one of her most recognizable public art pieces.',
+  url: 'https://i.imgur.com/Mx7dA2Y.jpg',
+  alt: 'A bronze statue of two crossed hands delicately holding a human brain in their fingertips.'  
+}, {
+  name: 'Floralis Genérica',
+  artist: 'Eduardo Catalano',
+  description: 'This enormous (75 ft. or 23m) silver flower is located in Buenos Aires. It is designed to move, closing its petals in the evening or when strong winds blow and opening them in the morning.',
+  url: 'https://i.imgur.com/ZF6s192m.jpg',
+  alt: 'A gigantic metallic flower sculpture with reflective mirror-like petals and strong stamens.'
+}, {
+  name: 'Eternal Presence',
+  artist: 'John Woodrow Wilson',
+  description: 'Wilson was known for his preoccupation with equality, social justice, as well as the essential and spiritual qualities of humankind. This massive (7ft. or 2,13m) bronze represents what he described as "a symbolic Black presence infused with a sense of universal humanity."',
+  url: 'https://i.imgur.com/aTtVpES.jpg',
+  alt: 'The sculpture depicting a human head seems ever-present and solemn. It radiates calm and serenity.'
+}, {
+  name: 'Moai',
+  artist: 'Unknown Artist',
+  description: 'Located on the Easter Island, there are 1,000 moai, or extant monumental statues, created by the early Rapa Nui people, which some believe represented deified ancestors.',
+  url: 'https://i.imgur.com/RCwLEoQm.jpg',
+  alt: 'Three monumental stone busts with the heads that are disproportionately large with somber faces.'
+}, {
+  name: 'Blue Nana',
+  artist: 'Niki de Saint Phalle',
+  description: 'The Nanas are triumphant creatures, symbols of femininity and maternity. Initially, Saint Phalle used fabric and found objects for the Nanas, and later on introduced polyester to achieve a more vibrant effect.',
+  url: 'https://i.imgur.com/Sd1AgUOm.jpg',
+  alt: 'A large mosaic sculpture of a whimsical dancing female figure in a colorful costume emanating joy.'
+}, {
+  name: 'Ultimate Form',
+  artist: 'Barbara Hepworth',
+  description: 'This abstract bronze sculpture is a part of The Family of Man series located at Yorkshire Sculpture Park. Hepworth chose not to create literal representations of the world but developed abstract forms inspired by people and landscapes.',
+  url: 'https://i.imgur.com/2heNQDcm.jpg',
+  alt: 'A tall sculpture made of three elements stacked on each other reminding of a human figure.'
+}, {
+  name: 'Cavaliere',
+  artist: 'Lamidi Olonade Fakeye',
+  description: "Descended from four generations of woodcarvers, Fakeye's work blended traditional and contemporary Yoruba themes.",
+  url: 'https://i.imgur.com/wIdGuZwm.png',
+  alt: 'An intricate wood sculpture of a warrior with a focused face on a horse adorned with patterns.'
+}, {
+  name: 'Big Bellies',
+  artist: 'Alina Szapocznikow',
+  description: "Szapocznikow is known for her sculptures of the fragmented body as a metaphor for the fragility and impermanence of youth and beauty. This sculpture depicts two very realistic large bellies stacked on top of each other, each around five feet (1,5m) tall.",
+  url: 'https://i.imgur.com/AlHTAdDm.jpg',
+  alt: 'The sculpture reminds a cascade of folds, quite different from bellies in classical sculptures.'
+}, {
+  name: 'Terracotta Army',
+  artist: 'Unknown Artist',
+  description: 'The Terracotta Army is a collection of terracotta sculptures depicting the armies of Qin Shi Huang, the first Emperor of China. The army consisted of more than 8,000 soldiers, 130 chariots with 520 horses, and 150 cavalry horses.',
+  url: 'https://i.imgur.com/HMFmH6m.jpg',
+  alt: '12 terracotta sculptures of solemn warriors, each with a unique facial expression and armor.'
+}, {
+  name: 'Lunar Landscape',
+  artist: 'Louise Nevelson',
+  description: 'Nevelson was known for scavenging objects from New York City debris, which she would later assemble into monumental constructions. In this one, she used disparate parts like a bedpost, juggling pin, and seat fragment, nailing and gluing them into boxes that reflect the influence of Cubism’s geometric abstraction of space and form.',
+  url: 'https://i.imgur.com/rN7hY6om.jpg',
+  alt: 'A black matte sculpture where the individual elements are initially indistinguishable.'
+}, {
+  name: 'Aureole',
+  artist: 'Ranjani Shettar',
+  description: 'Shettar merges the traditional and the modern, the natural and the industrial. Her art focuses on the relationship between man and nature. Her work was described as compelling both abstractly and figuratively, gravity defying, and a "fine synthesis of unlikely materials."',
+  url: 'https://i.imgur.com/okTpbHhm.jpg',
+  alt: 'A pale wire-like sculpture mounted on concrete wall and descending on the floor. It appears light.'
+}, {
+  name: 'Hippos',
+  artist: 'Taipei Zoo',
+  description: 'The Taipei Zoo commissioned a Hippo Square featuring submerged hippos at play.',
+  url: 'https://i.imgur.com/6o5Vuyu.jpg',
+  alt: 'A group of bronze hippo sculptures emerging from the sett sidewalk as if they were swimming.'
+}];
+```
+
+```css
+button { display: block; margin-bottom: 10px; }
+.Page > * {
+  float: left;
+  width: 50%;
+  padding: 10px;
+}
+h2 { margin-top: 10px; margin-bottom: 0; }
+h3 {
+  margin-top: 5px;
+  font-weight: normal;
+  font-size: 100%;
+}
+img { width: 120px; height: 120px; }
+button {
+  display: block;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+```
+
+</Sandpack>
+
+This is what makes state different from regular variables that you might declare at the top of your module. State is not tied to a particular function call or a place in the code, but it's "local" to the specific place on the screen. You rendered two `<Gallery />` components, so their state is stored separately.
+
+Also notice how the `Page` component doesn't "know" anything about the `Gallery` state or even whether it has any. Unlike props, **state is fully private to the component declaring it.** The parent component can't change it. This lets you add state to any component or remove it without impacting the rest of the components.
+
+What if you wanted both galleries to keep their states in sync? The right way to do it in React is to *remove* state from child components and add it to their closest shared parent. The next few pages will focus on organizing state of a single component, but we will return to this topic in [Sharing State Between Components.](/learn/sharing-state-between-components)
+
+<Recap>
+
+* Use a state variable when a component needs to "remember" some information between renders.
+* State variables are declared by calling the `useState` Hook.
+* Hooks are special functions that start with `use`. They let you "hook into" React features like state.
+* Hooks might remind you of imports: they need to be called unconditionally. Calling Hooks, including `useState`, is only valid at the top level of a component or another Hook.
+* The `useState` Hook returns a pair of values: the current state and the function to update it.
+* You can have more than one state variable. Internally, React matches them up by their order.
+* State is private to the component. If you render it in two places, each copy gets its own state.
+
+</Recap>
+
+
+
+<Challenges>
+
+#### Complete the gallery {/*complete-the-gallery*/}
+
+When you press "Next" on the last sculpture, the code crashes. Fix the logic to prevent the crash. You may do this by adding extra logic to event handler or by disabling the button when the action is not possible.
+
+After fixing the crash, add a "Previous" button that shows the previous sculpture. It shouldn't crash on the first sculpture.
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+import { sculptureList } from './data.js';
+
+export default function Gallery() {
+  const [index, setIndex] = useState(0);
+  const [showMore, setShowMore] = useState(false);
+
+  function handleNextClick() {
+    setIndex(index + 1);
+  }
+
+  function handleMoreClick() {
+    setShowMore(!showMore);
+  }
+
+  let sculpture = sculptureList[index];
+  return (
+    <>
+      <button onClick={handleNextClick}>
+        Next
+      </button>
+      <h2>
+        <i>{sculpture.name} </i> 
+        by {sculpture.artist}
+      </h2>
+      <h3>  
+        ({index + 1} of {sculptureList.length})
+      </h3>
+      <button onClick={handleMoreClick}>
+        {showMore ? 'Hide' : 'Show'} details
+      </button>
+      {showMore && <p>{sculpture.description}</p>}
+      <img 
+        src={sculpture.url} 
+        alt={sculpture.alt}
+      />
+    </>
+  );
+}
+```
+
+```js data.js
+export const sculptureList = [{
+  name: 'Homenaje a la Neurocirugía',
+  artist: 'Marta Colvin Andrade',
+  description: 'Although Colvin is predominantly known for abstract themes that allude to pre-Hispanic symbols, this gigantic sculpture, an homage to neurosurgery, is one of her most recognizable public art pieces.',
+  url: 'https://i.imgur.com/Mx7dA2Y.jpg',
+  alt: 'A bronze statue of two crossed hands delicately holding a human brain in their fingertips.'  
+}, {
+  name: 'Floralis Genérica',
+  artist: 'Eduardo Catalano',
+  description: 'This enormous (75 ft. or 23m) silver flower is located in Buenos Aires. It is designed to move, closing its petals in the evening or when strong winds blow and opening them in the morning.',
+  url: 'https://i.imgur.com/ZF6s192m.jpg',
+  alt: 'A gigantic metallic flower sculpture with reflective mirror-like petals and strong stamens.'
+}, {
+  name: 'Eternal Presence',
+  artist: 'John Woodrow Wilson',
+  description: 'Wilson was known for his preoccupation with equality, social justice, as well as the essential and spiritual qualities of humankind. This massive (7ft. or 2,13m) bronze represents what he described as "a symbolic Black presence infused with a sense of universal humanity."',
+  url: 'https://i.imgur.com/aTtVpES.jpg',
+  alt: 'The sculpture depicting a human head seems ever-present and solemn. It radiates calm and serenity.'
+}, {
+  name: 'Moai',
+  artist: 'Unknown Artist',
+  description: 'Located on the Easter Island, there are 1,000 moai, or extant monumental statues, created by the early Rapa Nui people, which some believe represented deified ancestors.',
+  url: 'https://i.imgur.com/RCwLEoQm.jpg',
+  alt: 'Three monumental stone busts with the heads that are disproportionately large with somber faces.'
+}, {
+  name: 'Blue Nana',
+  artist: 'Niki de Saint Phalle',
+  description: 'The Nanas are triumphant creatures, symbols of femininity and maternity. Initially, Saint Phalle used fabric and found objects for the Nanas, and later on introduced polyester to achieve a more vibrant effect.',
+  url: 'https://i.imgur.com/Sd1AgUOm.jpg',
+  alt: 'A large mosaic sculpture of a whimsical dancing female figure in a colorful costume emanating joy.'
+}, {
+  name: 'Ultimate Form',
+  artist: 'Barbara Hepworth',
+  description: 'This abstract bronze sculpture is a part of The Family of Man series located at Yorkshire Sculpture Park. Hepworth chose not to create literal representations of the world but developed abstract forms inspired by people and landscapes.',
+  url: 'https://i.imgur.com/2heNQDcm.jpg',
+  alt: 'A tall sculpture made of three elements stacked on each other reminding of a human figure.'
+}, {
+  name: 'Cavaliere',
+  artist: 'Lamidi Olonade Fakeye',
+  description: "Descended from four generations of woodcarvers, Fakeye's work blended traditional and contemporary Yoruba themes.",
+  url: 'https://i.imgur.com/wIdGuZwm.png',
+  alt: 'An intricate wood sculpture of a warrior with a focused face on a horse adorned with patterns.'
+}, {
+  name: 'Big Bellies',
+  artist: 'Alina Szapocznikow',
+  description: "Szapocznikow is known for her sculptures of the fragmented body as a metaphor for the fragility and impermanence of youth and beauty. This sculpture depicts two very realistic large bellies stacked on top of each other, each around five feet (1,5m) tall.",
+  url: 'https://i.imgur.com/AlHTAdDm.jpg',
+  alt: 'The sculpture reminds a cascade of folds, quite different from bellies in classical sculptures.'
+}, {
+  name: 'Terracotta Army',
+  artist: 'Unknown Artist',
+  description: 'The Terracotta Army is a collection of terracotta sculptures depicting the armies of Qin Shi Huang, the first Emperor of China. The army consisted of more than 8,000 soldiers, 130 chariots with 520 horses, and 150 cavalry horses.',
+  url: 'https://i.imgur.com/HMFmH6m.jpg',
+  alt: '12 terracotta sculptures of solemn warriors, each with a unique facial expression and armor.'
+}, {
+  name: 'Lunar Landscape',
+  artist: 'Louise Nevelson',
+  description: 'Nevelson was known for scavenging objects from New York City debris, which she would later assemble into monumental constructions. In this one, she used disparate parts like a bedpost, juggling pin, and seat fragment, nailing and gluing them into boxes that reflect the influence of Cubism’s geometric abstraction of space and form.',
+  url: 'https://i.imgur.com/rN7hY6om.jpg',
+  alt: 'A black matte sculpture where the individual elements are initially indistinguishable.'
+}, {
+  name: 'Aureole',
+  artist: 'Ranjani Shettar',
+  description: 'Shettar merges the traditional and the modern, the natural and the industrial. Her art focuses on the relationship between man and nature. Her work was described as compelling both abstractly and figuratively, gravity defying, and a "fine synthesis of unlikely materials."',
+  url: 'https://i.imgur.com/okTpbHhm.jpg',
+  alt: 'A pale wire-like sculpture mounted on concrete wall and descending on the floor. It appears light.'
+}, {
+  name: 'Hippos',
+  artist: 'Taipei Zoo',
+  description: 'The Taipei Zoo commissioned a Hippo Square featuring submerged hippos at play.',
+  url: 'https://i.imgur.com/6o5Vuyu.jpg',
+  alt: 'A group of bronze hippo sculptures emerging from the sett sidewalk as if they were swimming.'
+}];
+```
+
+```css
+button { display: block; margin-bottom: 10px; }
+.Page > * {
+  float: left;
+  width: 50%;
+  padding: 10px;
+}
+h2 { margin-top: 10px; margin-bottom: 0; }
+h3 {
+  margin-top: 5px;
+  font-weight: normal;
+  font-size: 100%;
+}
+img { width: 120px; height: 120px; }
+```
+
+</Sandpack>
+
+<Solution>
+
+This adds a guarding condition inside both event handlers and disables the buttons when needed:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+import { sculptureList } from './data.js';
+
+export default function Gallery() {
+  const [index, setIndex] = useState(0);
+  const [showMore, setShowMore] = useState(false);
+
+  let hasPrev = index > 0;
+  let hasNext = index < sculptureList.length - 1;
+
+  function handlePrevClick() {
+    if (hasPrev) {
+      setIndex(index - 1);
+    }
+  }
+
+  function handleNextClick() {
+    if (hasNext) {
+      setIndex(index + 1);
+    }
+  }
+
+  function handleMoreClick() {
+    setShowMore(!showMore);
+  }
+
+  let sculpture = sculptureList[index];
+  return (
+    <>
+      <button
+        onClick={handlePrevClick}
+        disabled={!hasPrev}
+      >
+        Previous
+      </button>
+      <button
+        onClick={handleNextClick}
+        disabled={!hasNext}
+      >
+        Next
+      </button>
+      <h2>
+        <i>{sculpture.name} </i> 
+        by {sculpture.artist}
+      </h2>
+      <h3>  
+        ({index + 1} of {sculptureList.length})
+      </h3>
+      <button onClick={handleMoreClick}>
+        {showMore ? 'Hide' : 'Show'} details
+      </button>
+      {showMore && <p>{sculpture.description}</p>}
+      <img 
+        src={sculpture.url} 
+        alt={sculpture.alt}
+      />
+    </>
+  );
+}
+```
+
+```js data.js hidden
+export const sculptureList = [{
+  name: 'Homenaje a la Neurocirugía',
+  artist: 'Marta Colvin Andrade',
+  description: 'Although Colvin is predominantly known for abstract themes that allude to pre-Hispanic symbols, this gigantic sculpture, an homage to neurosurgery, is one of her most recognizable public art pieces.',
+  url: 'https://i.imgur.com/Mx7dA2Y.jpg',
+  alt: 'A bronze statue of two crossed hands delicately holding a human brain in their fingertips.'  
+}, {
+  name: 'Floralis Genérica',
+  artist: 'Eduardo Catalano',
+  description: 'This enormous (75 ft. or 23m) silver flower is located in Buenos Aires. It is designed to move, closing its petals in the evening or when strong winds blow and opening them in the morning.',
+  url: 'https://i.imgur.com/ZF6s192m.jpg',
+  alt: 'A gigantic metallic flower sculpture with reflective mirror-like petals and strong stamens.'
+}, {
+  name: 'Eternal Presence',
+  artist: 'John Woodrow Wilson',
+  description: 'Wilson was known for his preoccupation with equality, social justice, as well as the essential and spiritual qualities of humankind. This massive (7ft. or 2,13m) bronze represents what he described as "a symbolic Black presence infused with a sense of universal humanity."',
+  url: 'https://i.imgur.com/aTtVpES.jpg',
+  alt: 'The sculpture depicting a human head seems ever-present and solemn. It radiates calm and serenity.'
+}, {
+  name: 'Moai',
+  artist: 'Unknown Artist',
+  description: 'Located on the Easter Island, there are 1,000 moai, or extant monumental statues, created by the early Rapa Nui people, which some believe represented deified ancestors.',
+  url: 'https://i.imgur.com/RCwLEoQm.jpg',
+  alt: 'Three monumental stone busts with the heads that are disproportionately large with somber faces.'
+}, {
+  name: 'Blue Nana',
+  artist: 'Niki de Saint Phalle',
+  description: 'The Nanas are triumphant creatures, symbols of femininity and maternity. Initially, Saint Phalle used fabric and found objects for the Nanas, and later on introduced polyester to achieve a more vibrant effect.',
+  url: 'https://i.imgur.com/Sd1AgUOm.jpg',
+  alt: 'A large mosaic sculpture of a whimsical dancing female figure in a colorful costume emanating joy.'
+}, {
+  name: 'Ultimate Form',
+  artist: 'Barbara Hepworth',
+  description: 'This abstract bronze sculpture is a part of The Family of Man series located at Yorkshire Sculpture Park. Hepworth chose not to create literal representations of the world but developed abstract forms inspired by people and landscapes.',
+  url: 'https://i.imgur.com/2heNQDcm.jpg',
+  alt: 'A tall sculpture made of three elements stacked on each other reminding of a human figure.'
+}, {
+  name: 'Cavaliere',
+  artist: 'Lamidi Olonade Fakeye',
+  description: "Descended from four generations of woodcarvers, Fakeye's work blended traditional and contemporary Yoruba themes.",
+  url: 'https://i.imgur.com/wIdGuZwm.png',
+  alt: 'An intricate wood sculpture of a warrior with a focused face on a horse adorned with patterns.'
+}, {
+  name: 'Big Bellies',
+  artist: 'Alina Szapocznikow',
+  description: "Szapocznikow is known for her sculptures of the fragmented body as a metaphor for the fragility and impermanence of youth and beauty. This sculpture depicts two very realistic large bellies stacked on top of each other, each around five feet (1,5m) tall.",
+  url: 'https://i.imgur.com/AlHTAdDm.jpg',
+  alt: 'The sculpture reminds a cascade of folds, quite different from bellies in classical sculptures.'
+}, {
+  name: 'Terracotta Army',
+  artist: 'Unknown Artist',
+  description: 'The Terracotta Army is a collection of terracotta sculptures depicting the armies of Qin Shi Huang, the first Emperor of China. The army consisted of more than 8,000 soldiers, 130 chariots with 520 horses, and 150 cavalry horses.',
+  url: 'https://i.imgur.com/HMFmH6m.jpg',
+  alt: '12 terracotta sculptures of solemn warriors, each with a unique facial expression and armor.'
+}, {
+  name: 'Lunar Landscape',
+  artist: 'Louise Nevelson',
+  description: 'Nevelson was known for scavenging objects from New York City debris, which she would later assemble into monumental constructions. In this one, she used disparate parts like a bedpost, juggling pin, and seat fragment, nailing and gluing them into boxes that reflect the influence of Cubism’s geometric abstraction of space and form.',
+  url: 'https://i.imgur.com/rN7hY6om.jpg',
+  alt: 'A black matte sculpture where the individual elements are initially indistinguishable.'
+}, {
+  name: 'Aureole',
+  artist: 'Ranjani Shettar',
+  description: 'Shettar merges the traditional and the modern, the natural and the industrial. Her art focuses on the relationship between man and nature. Her work was described as compelling both abstractly and figuratively, gravity defying, and a "fine synthesis of unlikely materials."',
+  url: 'https://i.imgur.com/okTpbHhm.jpg',
+  alt: 'A pale wire-like sculpture mounted on concrete wall and descending on the floor. It appears light.'
+}, {
+  name: 'Hippos',
+  artist: 'Taipei Zoo',
+  description: 'The Taipei Zoo commissioned a Hippo Square featuring submerged hippos at play.',
+  url: 'https://i.imgur.com/6o5Vuyu.jpg',
+  alt: 'A group of bronze hippo sculptures emerging from the sett sidewalk as if they were swimming.'
+}];
+```
+
+```css
+button { display: block; margin-bottom: 10px; }
+.Page > * {
+  float: left;
+  width: 50%;
+  padding: 10px;
+}
+h2 { margin-top: 10px; margin-bottom: 0; }
+h3 {
+  margin-top: 5px;
+  font-weight: normal;
+  font-size: 100%;
+}
+img { width: 120px; height: 120px; }
+```
+
+</Sandpack>
+
+Notice how `hasPrev` and `hasNext` are used *both* for the returned JSX and inside the event handlers! This handy pattern works because event handler functions ["close over"](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) any variables declared while rendering.
+
+</Solution>
+
+#### Fix stuck form inputs {/*fix-stuck-form-inputs*/}
+
+When you type into the input fields, nothing appears. It's like the input values are "stuck" with empty strings. The `value` of the first `<input>` is set to always match the `firstName` variable, and the `value` for the second `<input>` is set to always match the `lastName` variable. This is correct. Both inputs have `onChange` event handlers, which try to update the variables based on the latest user input (`e.target.value`). However, the variables don't seem to "remember" their values between re-renders. Fix this by using state variables instead.
+
+<Sandpack>
+
+```js
+export default function Form() {
+  let firstName = '';
+  let lastName = '';
+
+  function handleFirstNameChange(e) {
+    firstName = e.target.value;
+  }
+
+  function handleLastNameChange(e) {
+    lastName = e.target.value;
+  }
+
+  function handleReset() {
+    firstName = '';
+    lastName = '';
+  }
+
+  return (
+    <form onSubmit={e => e.preventDefault()}>
+      <input
+        placeholder="First name"
+        value={firstName}
+        onChange={handleFirstNameChange}
+      />
+      <input
+        placeholder="Last name"
+        value={lastName}
+        onChange={handleLastNameChange}
+      />
+      <h1>Hi, {firstName} {lastName}</h1>
+      <button onClick={handleReset}>Reset</button>
+    </form>
+  );
+}
+```
+
+```css 
+h1 { margin-top: 10px; }
+```
+
+</Sandpack>
+
+<Solution>
+
+First, import `useState` from React. Then replace `firstName` and `lastName` with state variables declared by calling `useState`. Finally, replace every `firstName = ...` assignment with `setFirstName(...)`, and do the same for `lastName`. Don't forget to update `handleReset` too so that the reset button works.
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function Form() {
+  const [firstName, setFirstName] = useState('');
+  const [lastName, setLastName] = useState('');
+
+  function handleFirstNameChange(e) {
+    setFirstName(e.target.value);
+  }
+
+  function handleLastNameChange(e) {
+    setLastName(e.target.value);
+  }
+
+  function handleReset() {
+    setFirstName('');
+    setLastName('');
+  }
+
+  return (
+    <form onSubmit={e => e.preventDefault()}>
+      <input
+        placeholder="First name"
+        value={firstName}
+        onChange={handleFirstNameChange}
+      />
+      <input
+        placeholder="Last name"
+        value={lastName}
+        onChange={handleLastNameChange}
+      />
+      <h1>Hi, {firstName} {lastName}</h1>
+      <button onClick={handleReset}>Reset</button>
+    </form>
+  );
+}
+```
+
+```css 
+h1 { margin-top: 10px; }
+```
+
+</Sandpack>
+
+</Solution>
+
+#### Fix a crash {/*fix-a-crash*/}
+
+Here is a small form that is supposed to let the user leave some feedback. When the feedback is submitted, it's supposed to display a thank-you message. However, it crashes with an error message saying "Rendered fewer hooks than expected". Can you spot the mistake and fix it?
+
+<Hint>
+
+Are there any limitations on _where_ Hooks may be called? Does this component break any rules? Check if there are any comments disabling the linter checks--this is where the bugs often hide!
+
+</Hint>
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function FeedbackForm() {
+  const [isSent, setIsSent] = useState(false);
+  if (isSent) {
+    return <h1>Thank you!</h1>;
+  } else {
+    // eslint-disable-next-line
+    const [message, setMessage] = useState('');
+    return (
+      <form onSubmit={e => {
+        e.preventDefault();
+        alert(`Sending: "${message}"`);
+        setIsSent(true);
+      }}>
+        <textarea
+          placeholder="Message"
+          value={message}
+          onChange={e => setMessage(e.target.value)}
+        />
+        <br />
+        <button type="submit">Send</button>
+      </form>
+    );
+  }
+}
+```
+
+</Sandpack>
+
+<Solution>
+
+Hooks can only be called at the top level of the component function. Here, the first `isSent` definition follows this rule, but the `message` definition is nested in a condition.
+
+Move it out of the condition to fix the issue:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function FeedbackForm() {
+  const [isSent, setIsSent] = useState(false);
+  const [message, setMessage] = useState('');
+
+  if (isSent) {
+    return <h1>Thank you!</h1>;
+  } else {
+    return (
+      <form onSubmit={e => {
+        e.preventDefault();
+        alert(`Sending: "${message}"`);
+        setIsSent(true);
+      }}>
+        <textarea
+          placeholder="Message"
+          value={message}
+          onChange={e => setMessage(e.target.value)}
+        />
+        <br />
+        <button type="submit">Send</button>
+      </form>
+    );
+  }
+}
+```
+
+</Sandpack>
+
+Remember, Hooks must be called unconditionally and always in the same order!
+
+You could also remove the unnecessary `else` branch to reduce the nesting. However, it's still important that all calls to Hooks happen *before* the first `return`.
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function FeedbackForm() {
+  const [isSent, setIsSent] = useState(false);
+  const [message, setMessage] = useState('');
+
+  if (isSent) {
+    return <h1>Thank you!</h1>;
+  }
+
+  return (
+    <form onSubmit={e => {
+      e.preventDefault();
+      alert(`Sending: "${message}"`);
+      setIsSent(true);
+    }}>
+      <textarea
+        placeholder="Message"
+        value={message}
+        onChange={e => setMessage(e.target.value)}
+      />
+      <br />
+      <button type="submit">Send</button>
+    </form>
+  );
+}
+```
+
+</Sandpack>
+
+Try moving the second `useState` call after the `if` condition and notice how this breaks it again.
+
+If your linter is [configured for React](/learn/editor-setup#linting), you should see a lint error when you make a mistake like this. If you don't see an error when you try the faulty code locally, you need to set up linting for your project. 
+
+</Solution>
+
+#### Remove unnecessary state {/*remove-unnecessary-state*/}
+
+When the button is clicked, this example should ask for the user's name and then display an alert greeting them. You tried to use state to keep the name, but for some reason it always shows "Hello, !".
+
+To fix this code, remove the unnecessary state variable. (We will discuss about [why this didn't work](/learn/state-as-a-snapshot) later.)
+
+Can you explain why this state variable was unnecessary?
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function FeedbackForm() {
+  const [name, setName] = useState('');
+
+  function handleClick() {
+    setName(prompt('What is your name?'));
+    alert(`Hello, ${name}!`);
+  }
+
+  return (
+    <button onClick={handleClick}>
+      Greet
+    </button>
+  );
+}
+```
+
+</Sandpack>
+
+<Solution>
+
+Here is a fixed version that uses a regular `name` variable declared in the function that needs it:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function FeedbackForm() {
+  function handleClick() {
+    const name = prompt('What is your name?');
+    alert(`Hello, ${name}!`);
+  }
+
+  return (
+    <button onClick={handleClick}>
+      Greet
+    </button>
+  );
+}
+```
+
+</Sandpack>
+
+A state variable is only necessary to keep information between re-renders of a component. Within a single event handler, a regular variable will do fine. Don't introduce state variables when a regular variable works well.
+
+</Solution>
+
+</Challenges>
diff --git a/beta/src/content/learn/state-as-a-snapshot.md b/beta/src/content/learn/state-as-a-snapshot.md
new file mode 100644
index 000000000..556553d33
--- /dev/null
+++ b/beta/src/content/learn/state-as-a-snapshot.md
@@ -0,0 +1,435 @@
+---
+title: State as a Snapshot
+---
+
+<Intro>
+
+State variables might look like regular JavaScript variables that you can read and write to. However, state behaves more like a snapshot. Setting it does not change the state variable you already have, but instead triggers a re-render.
+
+</Intro>
+
+<YouWillLearn>
+
+* How setting state triggers re-renders
+* When and how state updates
+* Why state does not update immediately after you set it
+* How event handlers access a "snapshot" of the state
+
+</YouWillLearn>
+
+## Setting state triggers renders {/*setting-state-triggers-renders*/}
+
+You might think of your user interface as changing directly in response to the user event like a click. In React, it works a little differently from this mental model. On the previous page, you saw that [setting state requests a re-render](/learn/render-and-commit#step-1-trigger-a-render) from React. This means that for an interface to react to the event, you need to *update the state*.
+
+In this example, when you press "send", `setIsSent(true)` tells React to re-render the UI:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function Form() {
+  const [isSent, setIsSent] = useState(false);
+  const [message, setMessage] = useState('Hi!');
+  if (isSent) {
+    return <h1>Your message is on its way!</h1>
+  }
+  return (
+    <form onSubmit={(e) => {
+      e.preventDefault();
+      setIsSent(true);
+      sendMessage(message);
+    }}>
+      <textarea
+        placeholder="Message"
+        value={message}
+        onChange={e => setMessage(e.target.value)}
+      />
+      <button type="submit">Send</button>
+    </form>
+  );
+}
+
+function sendMessage(message) {
+  // ...
+}
+```
+
+```css
+label, textarea { margin-bottom: 10px; display: block; }
+```
+
+</Sandpack>
+
+Here's what happens when you click the button:
+
+1. The `onSubmit` event handler executes.
+2. `setIsSent(true)` sets `isSent` to `true` and queues a new render.
+3. React re-renders the component according to the new `isSent` value.
+
+Let's take a closer look at the relationship between state and rendering.
+
+## Rendering takes a snapshot in time {/*rendering-takes-a-snapshot-in-time*/}
+
+["Rendering"](/learn/render-and-commit#step-2-react-renders-your-components) means that React is calling your component, which is a function. The JSX you return from that function is like a snapshot of the UI in time. Its props, event handlers, and local variables were all calculated **using its state at the time of the render.**
+
+Unlike a photograph or a movie frame, the UI "snapshot" you return is interactive. It includes logic like event handlers that specify what happens in response to inputs. React then updates the screen to match this snapshot and connects the event handlers. As a result, pressing a button will trigger the click handler from your JSX.
+
+When React re-renders a component:
+
+1. React calls your function again.
+2. Your function returns a new JSX snapshot.
+3. React then updates the screen to match the snapshot you've returned.
+
+<IllustrationBlock sequential>
+    <Illustration caption="React executing the function" src="/images/docs/illustrations/i_render1.png" />
+    <Illustration caption="Calculating the snapshot" src="/images/docs/illustrations/i_render2.png" />
+    <Illustration caption="Updating the DOM tree" src="/images/docs/illustrations/i_render3.png" />
+</IllustrationBlock>
+
+As a component's memory, state is not like a regular variable that disappears after your function returns. State actually "lives" in React itself--as if on a shelf!--outside of your function. When React calls your component, it gives you a snapshot of the state for that particular render. Your component returns a snapshot of the UI with a fresh set of props and event handlers in its JSX, all calculated **using the state values from that render!**
+
+<IllustrationBlock sequential>
+  <Illustration caption="You tell React to update the state" src="/images/docs/illustrations/i_state-snapshot1.png" />
+  <Illustration caption="React updates the state value" src="/images/docs/illustrations/i_state-snapshot2.png" />
+  <Illustration caption="React passes a snapshot of the state value into the component" src="/images/docs/illustrations/i_state-snapshot3.png" />
+</IllustrationBlock>
+
+Here's a little experiment to show you how this works. In this example, you might expect that clicking the "+3" button would increment the counter three times because it calls `setNumber(number + 1)` three times.
+
+See what happens when you click the "+3" button:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function Counter() {
+  const [number, setNumber] = useState(0);
+
+  return (
+    <>
+      <h1>{number}</h1>
+      <button onClick={() => {
+        setNumber(number + 1);
+        setNumber(number + 1);
+        setNumber(number + 1);
+      }}>+3</button>
+    </>
+  )
+}
+```
+
+```css
+button { display: inline-block; margin: 10px; font-size: 20px; }
+h1 { display: inline-block; margin: 10px; width: 30px; text-align: center; }
+```
+
+</Sandpack>
+
+Notice that `number` only increments once per click!
+
+**Setting state only changes it for the *next* render.** During the first render, `number` was `0`. This is why, in *that render's* `onClick` handler, the value of `number` is still `0` even after `setNumber(number + 1)` was called:
+
+```js
+<button onClick={() => {
+  setNumber(number + 1);
+  setNumber(number + 1);
+  setNumber(number + 1);
+}}>+3</button>
+```
+
+Here is what this button's click handler tells React to do:
+
+1. `setNumber(number + 1)`: `number` is `0` so `setNumber(0 + 1)`.
+    - React prepares to change `number` to `1` on the next render.
+2. `setNumber(number + 1)`: `number` is `0` so `setNumber(0 + 1)`.
+    - React prepares to change `number` to `1` on the next render.
+3. `setNumber(number + 1)`: `number` is `0` so `setNumber(0 + 1)`.
+    - React prepares to change `number` to `1` on the next render.
+
+Even though you called `setNumber(number + 1)` three times, in *this render's* event handler `number` is always `0`, so you set the state to `1` three times. This is why, after your event handler finishes, React re-renders the component with `number` equal to `1` rather than `3`.
+
+You can also visualize this by mentally substituting state variables with their values in your code. Since the `number` state variable is `0` for *this render*, its event handler looks like this:
+
+```js
+<button onClick={() => {
+  setNumber(0 + 1);
+  setNumber(0 + 1);
+  setNumber(0 + 1);
+}}>+3</button>
+```
+
+For the next render, `number` is `1`, so *that render's* click handler looks like this:
+
+```js
+<button onClick={() => {
+  setNumber(1 + 1);
+  setNumber(1 + 1);
+  setNumber(1 + 1);
+}}>+3</button>
+```
+
+This is why clicking the button again will set the counter to `2`, then to `3` on the next click, and so on.
+
+## State over time {/*state-over-time*/}
+
+Well, that was fun. Try to guess what clicking this button will alert:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function Counter() {
+  const [number, setNumber] = useState(0);
+
+  return (
+    <>
+      <h1>{number}</h1>
+      <button onClick={() => {
+        setNumber(number + 5);
+        alert(number);
+      }}>+5</button>
+    </>
+  )
+}
+```
+
+```css
+button { display: inline-block; margin: 10px; font-size: 20px; }
+h1 { display: inline-block; margin: 10px; width: 30px; text-align: center; }
+```
+
+</Sandpack>
+
+If you use the substitution method from before, you can guess that the alert shows "0":
+
+```js
+setNumber(0 + 5);
+alert(0);
+```
+
+But what if you put a timer on the alert, so it only fires _after_ the component re-rendered? Would it say "0" or "5"? Have a guess!
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function Counter() {
+  const [number, setNumber] = useState(0);
+
+  return (
+    <>
+      <h1>{number}</h1>
+      <button onClick={() => {
+        setNumber(number + 5);
+        setTimeout(() => {
+          alert(number);
+        }, 3000);
+      }}>+5</button>
+    </>
+  )
+}
+```
+
+```css
+button { display: inline-block; margin: 10px; font-size: 20px; }
+h1 { display: inline-block; margin: 10px; width: 30px; text-align: center; }
+```
+
+</Sandpack>
+
+Surprised? If you use the substitution method, you can see the "snapshot" of the state passed to the alert.
+
+```js
+setNumber(0 + 5);
+setTimeout(() => {
+  alert(0);
+}, 3000);
+```
+
+The state stored in React may have changed by the time the alert runs, but it was scheduled using a snapshot of the state at the time the user interacted with it!
+
+**A state variable's value never changes within a render,** even if its event handler's code is asynchronous. Inside *that render's* `onClick`, the value of `number` continues to be `0` even after `setNumber(number + 5)` was called. Its value was "fixed" when React "took the snapshot" of the UI by calling your component.
+
+Here is an example of how that makes your event handlers less prone to timing mistakes. Below is a form that sends a message with a five-second delay. Imagine this scenario:
+
+1. You press the "Send" button, sending "Hello" to Alice.
+2. Before the five-second delay ends, you change the value of the "To" field to "Bob".
+
+What do you expect the `alert` to display? Would it display, "You said Hello to Alice"? Or would it display, "You said Hello to Bob"? Make a guess based on what you know, and then try it:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function Form() {
+  const [to, setTo] = useState('Alice');
+  const [message, setMessage] = useState('Hello');
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    setTimeout(() => {
+      alert(`You said ${message} to ${to}`);
+    }, 5000);
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <label>
+        To:{' '}
+        <select
+          value={to}
+          onChange={e => setTo(e.target.value)}>
+          <option value="Alice">Alice</option>
+          <option value="Bob">Bob</option>
+        </select>
+      </label>
+      <textarea
+        placeholder="Message"
+        value={message}
+        onChange={e => setMessage(e.target.value)}
+      />
+      <button type="submit">Send</button>
+    </form>
+  );
+}
+```
+
+```css
+label, textarea { margin-bottom: 10px; display: block; }
+```
+
+</Sandpack>
+
+**React keeps the state values "fixed" within one render's event handlers.** You don't need to worry whether the state has changed while the code is running.
+
+But what if you wanted to read the latest state before a re-render? You'll want to use a [state updater function](/learn/queueing-a-series-of-state-updates), covered on the next page!
+
+<Recap>
+
+* Setting state requests a new render.
+* React stores state outside of your component, as if on a shelf.
+* When you call `useState`, React gives you a snapshot of the state *for that render*.
+* Variables and event handlers don't "survive" re-renders. Every render has its own event handlers.
+* Every render (and functions inside it) will always "see" the snapshot of the state that React gave to *that* render.
+* You can mentally substitute state in event handlers, similarly to how you think about the rendered JSX.
+* Event handlers created in the past have the state values from the render in which they were created.
+
+</Recap>
+
+
+
+<Challenges>
+
+#### Implement a traffic light {/*implement-a-traffic-light*/}
+
+Here is a crosswalk light component that toggles on when the button is pressed:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function TrafficLight() {
+  const [walk, setWalk] = useState(true);
+
+  function handleClick() {
+    setWalk(!walk);
+  }
+
+  return (
+    <>
+      <button onClick={handleClick}>
+        Change to {walk ? 'Stop' : 'Walk'}
+      </button>
+      <h1 style={{
+        color: walk ? 'darkgreen' : 'darkred'
+      }}>
+        {walk ? 'Walk' : 'Stop'}
+      </h1>
+    </>
+  );
+}
+```
+
+```css
+h1 { margin-top: 20px; }
+```
+
+</Sandpack>
+
+Add an `alert` to the click handler. When the light is green and says "Walk", clicking the button should say "Stop is next". When the light is red and says "Stop", clicking the button should say "Walk is next".
+
+Does it make a difference whether you put the `alert` before or after the `setWalk` call?
+
+<Solution>
+
+Your `alert` should look like this:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function TrafficLight() {
+  const [walk, setWalk] = useState(true);
+
+  function handleClick() {
+    setWalk(!walk);
+    alert(walk ? 'Stop is next' : 'Walk is next');
+  }
+
+  return (
+    <>
+      <button onClick={handleClick}>
+        Change to {walk ? 'Stop' : 'Walk'}
+      </button>
+      <h1 style={{
+        color: walk ? 'darkgreen' : 'darkred'
+      }}>
+        {walk ? 'Walk' : 'Stop'}
+      </h1>
+    </>
+  );
+}
+```
+
+```css
+h1 { margin-top: 20px; }
+```
+
+</Sandpack>
+
+Whether you put it before or after the `setWalk` call makes no difference. That render's value of `walk` is fixed. Calling `setWalk` will only change it for the *next* render, but will not affect the event handler from the previous render.
+
+This line might seem counter-intuitive at first:
+
+```js
+alert(walk ? 'Stop is next' : 'Walk is next');
+```
+
+But it makes sense if you read it as: "If the traffic light shows 'Walk now', the message should say 'Stop is next.'" The `walk` variable inside your event handler matches that render's value of `walk` and does not change.
+
+You can verify that this is correct by applying the substitution method. When `walk` is `true`, you get:
+
+```js
+<button onClick={() => {
+  setWalk(false);
+  alert('Stop is next');
+}}>
+  Change to Stop
+</button>
+<h1 style={{color: 'darkgreen'}}>
+  Walk
+</h1>
+```
+
+So clicking "Change to Stop" queues a render with `walk` set to `false`, and alerts "Stop is next".
+
+</Solution>
+
+</Challenges>
diff --git a/beta/src/content/learn/synchronizing-with-effects.md b/beta/src/content/learn/synchronizing-with-effects.md
new file mode 100644
index 000000000..74b642435
--- /dev/null
+++ b/beta/src/content/learn/synchronizing-with-effects.md
@@ -0,0 +1,1579 @@
+---
+title: 'Synchronizing with Effects'
+---
+
+<Intro>
+
+Some components need to synchronize with external systems. For example, you might want to control a non-React component based on the React state, set up a server connection, or send an analytics log when a component appears on the screen. *Effects* let you run some code after rendering so that you can synchronize your component with some system outside of React.
+
+</Intro>
+
+<YouWillLearn>
+
+- What Effects are
+- How Effects are different from events
+- How to declare an Effect in your component
+- How to skip re-running an Effect unnecessarily
+- Why Effects run twice in development and how to fix them
+
+</YouWillLearn>
+
+## What are Effects and how are they different from events? {/*what-are-effects-and-how-are-they-different-from-events*/}
+
+Before getting to Effects, you need to be familiar with two types of logic inside React components:
+
+- **Rendering code** (introduced in [Describing the UI](/learn/describing-the-ui)) lives at the top level of your component. This is where you take the props and state, transform them, and return the JSX you want to see on the screen. [Rendering code must be pure.](/learn/keeping-components-pure) Like a math formula, it should only _calculate_ the result, but not do anything else.
+
+- **Event handlers** (introduced in [Adding Interactivity](/learn/adding-interactivity)) are nested functions inside your components that *do* things rather than just calculate them. An event handler might update an input field, submit an HTTP POST request to buy a product, or navigate the user to another screen. Event handlers contain ["side effects"](https://en.wikipedia.org/wiki/Side_effect_(computer_science)) (they change the program's state) and are caused by a specific user action (for example, a button click or typing).
+
+Sometimes this isn't enough. Consider a `ChatRoom` component that must connect to the chat server whenever it's visible on the screen. Connecting to a server is not a pure calculation (it's a side effect) so it can't happen during rendering. However, there is no single particular event like a click that causes `ChatRoom` to be displayed.
+
+***Effects* let you specify side effects that are caused by rendering itself, rather than by a particular event.** Sending a message in the chat is an *event* because it is directly caused by the user clicking a specific button. However, setting up a server connection is an *Effect* because it needs to happen regardless of which interaction caused the component to appear. Effects run at the end of the [rendering process](/learn/render-and-commit) after the screen updates. This is a good time to synchronize the React components with some external system (like network or a third-party library).
+
+<Note>
+
+Here and later in this text, capitalized "Effect" refers to the React-specific definition above, i.e. a side effect caused by rendering. To refer to the broader programming concept, we'll say "side effect".
+
+</Note>
+
+
+## You might not need an Effect {/*you-might-not-need-an-effect*/}
+
+**Don't rush to add Effects to your components.** Keep in mind that Effects are typically used to "step out" of your React code and synchronize with some *external* system. This includes browser APIs, third-party widgets, network, and so on. If your Effect only adjusts some state based on other state, [you might not need an Effect.](/learn/you-might-not-need-an-effect)
+
+## How to write an Effect {/*how-to-write-an-effect*/}
+
+To write an Effect, follow these three steps:
+
+1. **Declare an Effect.** By default, your Effect will run after every render.
+2. **Specify the Effect dependencies.** Most Effects should only re-run *when needed* rather than after every render. For example, a fade-in animation should only trigger when a component appears. Connecting and disconnecting to a chat room should only happen when the component appears and disappears, or when the chat room changes. You will learn how to control this by specifying *dependencies.*
+3. **Add cleanup if needed.** Some Effects need to specify how to stop, undo, or clean up whatever they were doing. For example, "connect" needs "disconnect", "subscribe" needs "unsubscribe", and "fetch" needs either "cancel" or "ignore". You will learn how to do this by returning a *cleanup function*.
+
+Let's look at each of these steps in detail.
+
+### Step 1: Declare an Effect {/*step-1-declare-an-effect*/}
+
+To declare an Effect in your component, import the [`useEffect` Hook](/reference/react/useEffect) from React:
+
+```js
+import { useEffect } from 'react';
+```
+
+Then, call it at the top level of your component and put some code inside your Effect:
+
+```js {2-4}
+function MyComponent() {
+  useEffect(() => {
+    // Code here will run after *every* render
+  });
+  return <div />;
+}
+```
+
+Every time your component renders, React will update the screen *and then* run the code inside `useEffect`. In other words, **`useEffect` "delays" a piece of code from running until that render is reflected on the screen.**
+
+Let's see how you can use an Effect to synchronize with an external system. Consider a `<VideoPlayer>` React component. It would be nice to control whether it's playing or paused by passing an `isPlaying` prop to it:
+
+```js
+<VideoPlayer isPlaying={isPlaying} />;
+```
+
+Your custom `VideoPlayer` component renders the built-in browser [`<video>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video) tag:
+
+```js
+function VideoPlayer({ src, isPlaying }) {
+  // TODO: do something with isPlaying
+  return <video src={src} />;
+}
+```
+
+However, the browser `<video>` tag does not have an `isPlaying` prop. The only way to control it is to manually call the [`play()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play) and [`pause()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause) methods on the DOM element. **You need to synchronize the value of `isPlaying` prop, which tells whether the video _should_ currently be playing, with imperative calls like `play()` and `pause()`.**
+
+We'll need to first [get a ref](/learn/manipulating-the-dom-with-refs) to the `<video>` DOM node.
+
+You might be tempted to try to call `play()` or `pause()` during rendering, but that isn't correct:
+
+<Sandpack>
+
+```js
+import { useState, useRef, useEffect } from 'react';
+
+function VideoPlayer({ src, isPlaying }) {
+  const ref = useRef(null);
+
+  if (isPlaying) {
+    ref.current.play();  // Calling these while rendering isn't allowed.
+  } else {
+    ref.current.pause(); // Also, this crashes.
+  }
+
+  return <video ref={ref} src={src} loop playsInline />;
+}
+
+export default function App() {
+  const [isPlaying, setIsPlaying] = useState(false);
+  return (
+    <>
+      <button onClick={() => setIsPlaying(!isPlaying)}>
+        {isPlaying ? 'Pause' : 'Play'}
+      </button>
+      <VideoPlayer
+        isPlaying={isPlaying}
+        src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
+      />
+    </>
+  );
+}
+```
+
+```css
+button { display: block; margin-bottom: 20px; }
+video { width: 250px; }
+```
+
+</Sandpack>
+
+The reason this code isn't correct is that it tries to do something with the DOM node during rendering. In React, [rendering should be a pure calculation](/learn/keeping-components-pure) of JSX and should not contain side effects like modifying the DOM.
+
+Moreover, when `VideoPlayer` is called for the first time, its DOM does not exist yet! There isn't a DOM node yet to call `play()` or `pause()` on, because React doesn't know what DOM to create until after you return the JSX.
+
+The solution here is to **wrap the side effect with `useEffect` to move it out of the rendering calculation:**
+
+```js {6,12}
+import { useEffect, useRef } from 'react';
+
+function VideoPlayer({ src, isPlaying }) {
+  const ref = useRef(null);
+
+  useEffect(() => {
+    if (isPlaying) {
+      ref.current.play();
+    } else {
+      ref.current.pause();
+    }
+  });
+
+  return <video ref={ref} src={src} loop playsInline />;
+}
+```
+
+By wrapping the DOM update in an Effect, you let React update the screen first. Then your Effect runs.
+
+When your `VideoPlayer` component renders (either the first time or if it re-renders), a few things will happen. First, React will update the screen, ensuring the `<video>` tag is in the DOM with the right props. Then React will run your Effect. Finally, your Effect will call `play()` or `pause()` depending on the value of `isPlaying` prop.
+
+Press Play/Pause multiple times and see how the video player stays synchronized to the `isPlaying` value:
+
+<Sandpack>
+
+```js
+import { useState, useRef, useEffect } from 'react';
+
+function VideoPlayer({ src, isPlaying }) {
+  const ref = useRef(null);
+
+  useEffect(() => {
+    if (isPlaying) {
+      ref.current.play();
+    } else {
+      ref.current.pause();
+    }
+  });
+
+  return <video ref={ref} src={src} loop playsInline />;
+}
+
+export default function App() {
+  const [isPlaying, setIsPlaying] = useState(false);
+  return (
+    <>
+      <button onClick={() => setIsPlaying(!isPlaying)}>
+        {isPlaying ? 'Pause' : 'Play'}
+      </button>
+      <VideoPlayer
+        isPlaying={isPlaying}
+        src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
+      />
+    </>
+  );
+}
+```
+
+```css
+button { display: block; margin-bottom: 20px; }
+video { width: 250px; }
+```
+
+</Sandpack>
+
+In this example, the "external system" you synchronized to React state was the browser media API. You can use a similar approach to wrap legacy non-React code (like jQuery plugins) into declarative React components.
+
+Note that controlling a video player is much more complex in practice. Calling `play()` may fail, the user might play or pause using the built-in browser controls, and so on. This example is very simplified and incomplete.
+
+<Pitfall>
+
+By default, Effects run after *every* render. This is why code like this will **produce an infinite loop:**
+
+```js
+const [count, setCount] = useState(0);
+useEffect(() => {
+  setCount(count + 1);
+});
+```
+
+Effects run as a *result* of rendering. Setting state *triggers* rendering. Setting state immediately in an Effect is like plugging a power outlet into itself. The Effect runs, it sets the state, which causes a re-render, which causes the Effect to run, it sets the state again, this causes another re-render, and so on.
+
+Effects should usually synchronize your components with an *external* system. If there's no external system and you only want to adjust some state based on other state, [you might not need an Effect.](/learn/you-might-not-need-an-effect)
+
+</Pitfall>
+
+### Step 2: Specify the Effect dependencies {/*step-2-specify-the-effect-dependencies*/}
+
+By default, Effects run after *every* render. Often, this is **not what you want:**
+
+- Sometimes, it's slow. Synchronizing with an external system is not always instant, so you might want to skip doing it unless it's necessary. For example, you don't want to reconnect to the chat server on every keystroke.
+- Sometimes, it's wrong. For example, you don't want to trigger a component fade-in animation on every keystroke. The animation should only play once when the component appears for the first time.
+
+To demonstrate the issue, here is the previous example with a few `console.log` calls and a text input that updates the parent component's state. Notice how typing causes the Effect to re-run:
+
+<Sandpack>
+
+```js
+import { useState, useRef, useEffect } from 'react';
+
+function VideoPlayer({ src, isPlaying }) {
+  const ref = useRef(null);
+
+  useEffect(() => {
+    if (isPlaying) {
+      console.log('Calling video.play()');
+      ref.current.play();
+    } else {
+      console.log('Calling video.pause()');
+      ref.current.pause();
+    }
+  });
+
+  return <video ref={ref} src={src} loop playsInline />;
+}
+
+export default function App() {
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [text, setText] = useState('');
+  return (
+    <>
+      <input value={text} onChange={e => setText(e.target.value)} />
+      <button onClick={() => setIsPlaying(!isPlaying)}>
+        {isPlaying ? 'Pause' : 'Play'}
+      </button>
+      <VideoPlayer
+        isPlaying={isPlaying}
+        src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
+      />
+    </>
+  );
+}
+```
+
+```css
+input, button { display: block; margin-bottom: 20px; }
+video { width: 250px; }
+```
+
+</Sandpack>
+
+You can tell React to **skip unnecessarily re-running the Effect** by specifying an array of *dependencies* as the second argument to the `useEffect` call. Start by adding an empty `[]` array to the above example on line 14:
+
+```js {3}
+  useEffect(() => {
+    // ...
+  }, []);
+```
+
+You should see an error saying `React Hook useEffect has a missing dependency: 'isPlaying'`:
+
+<Sandpack>
+
+```js
+import { useState, useRef, useEffect } from 'react';
+
+function VideoPlayer({ src, isPlaying }) {
+  const ref = useRef(null);
+
+  useEffect(() => {
+    if (isPlaying) {
+      console.log('Calling video.play()');
+      ref.current.play();
+    } else {
+      console.log('Calling video.pause()');
+      ref.current.pause();
+    }
+  }, []); // This causes an error
+
+  return <video ref={ref} src={src} loop playsInline />;
+}
+
+export default function App() {
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [text, setText] = useState('');
+  return (
+    <>
+      <input value={text} onChange={e => setText(e.target.value)} />
+      <button onClick={() => setIsPlaying(!isPlaying)}>
+        {isPlaying ? 'Pause' : 'Play'}
+      </button>
+      <VideoPlayer
+        isPlaying={isPlaying}
+        src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
+      />
+    </>
+  );
+}
+```
+
+```css
+input, button { display: block; margin-bottom: 20px; }
+video { width: 250px; }
+```
+
+</Sandpack>
+
+The problem is that the code inside of your Effect *depends on* the `isPlaying` prop to decide what to do, but this dependency was not explicitly declared. To fix this issue, add `isPlaying` to the dependency array:
+
+```js {2,7}
+  useEffect(() => {
+    if (isPlaying) { // It's used here...
+      // ...
+    } else {
+      // ...
+    }
+  }, [isPlaying]); // ...so it must be declared here!
+```
+
+Now all dependencies are declared, so there is no error. Specifying `[isPlaying]` as the dependency array tells React that it should skip re-running your Effect if `isPlaying` is the same as it was during the previous render. With this change, typing into the input doesn't cause the Effect to re-run, but pressing Play/Pause does:
+
+<Sandpack>
+
+```js
+import { useState, useRef, useEffect } from 'react';
+
+function VideoPlayer({ src, isPlaying }) {
+  const ref = useRef(null);
+
+  useEffect(() => {
+    if (isPlaying) {
+      console.log('Calling video.play()');
+      ref.current.play();
+    } else {
+      console.log('Calling video.pause()');
+      ref.current.pause();
+    }
+  }, [isPlaying]);
+
+  return <video ref={ref} src={src} loop playsInline />;
+}
+
+export default function App() {
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [text, setText] = useState('');
+  return (
+    <>
+      <input value={text} onChange={e => setText(e.target.value)} />
+      <button onClick={() => setIsPlaying(!isPlaying)}>
+        {isPlaying ? 'Pause' : 'Play'}
+      </button>
+      <VideoPlayer
+        isPlaying={isPlaying}
+        src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
+      />
+    </>
+  );
+}
+```
+
+```css
+input, button { display: block; margin-bottom: 20px; }
+video { width: 250px; }
+```
+
+</Sandpack>
+
+The dependency array can contain multiple dependencies. React will only skip re-running the Effect if *all* of the dependencies you specify have exactly the same values as they had during the previous render. React compares the dependency values using the [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison. See the [`useEffect` API reference](/reference/react/useEffect#reference) for more details.
+
+**Notice that you can't "choose" your dependencies.** You will get a lint error if the dependencies you specified don't match what React expects based on the code inside your Effect. This helps catch many bugs in your code. If your Effect uses some value but you *don't* want to re-run the Effect when it changes, you'll need to [*edit the Effect code itself* to not "need" that dependency.](/learn/lifecycle-of-reactive-effects#what-to-do-when-you-dont-want-to-re-synchronize)
+
+<Pitfall>
+
+The behaviors *without* the dependency array and with an *empty* `[]` dependency array are very different:
+
+```js {3,7,11}
+useEffect(() => {
+  // This runs after every render
+});
+
+useEffect(() => {
+  // This runs only on mount (when the component appears)
+}, []);
+
+useEffect(() => {
+  // This runs on mount *and also* if either a or b have changed since the last render
+}, [a, b]);
+```
+
+We'll take a close look at what "mount" means in the next step.
+
+</Pitfall>
+
+<DeepDive>
+
+#### Why was the ref omitted from the dependency array? {/*why-was-the-ref-omitted-from-the-dependency-array*/}
+
+This Effect uses _both_ `ref` and `isPlaying`, but only `isPlaying` is declared as a dependency:
+
+```js {9}
+function VideoPlayer({ src, isPlaying }) {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (isPlaying) {
+      ref.current.play();
+    } else {
+      ref.current.pause();
+    }
+  }, [isPlaying]);
+```
+
+This is because the `ref` object has a *stable identity:* React guarantees [you'll always get the same object](/reference/react/useRef#returns) from the same `useRef` call on every render. It never changes, so it will never by itself cause the Effect to re-run. Therefore, it does not matter whether you include it or not. Including it is fine too:
+
+```js {9}
+function VideoPlayer({ src, isPlaying }) {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (isPlaying) {
+      ref.current.play();
+    } else {
+      ref.current.pause();
+    }
+  }, [isPlaying, ref]);
+```
+
+The [`set` functions](/reference/react/useState#setstate) returned by `useState` also have stable identity, so you will often see them omitted from the dependencies too. If the linter lets you omit a dependency without errors, it is safe to do.
+
+Omitting always-stable dependencies only works when the linter can "see" that the object is stable. For example, if `ref` was passed from a parent component, you would have to specify it in the dependency array. However, this is good because you can't know whether the parent component always passes the same ref, or passes one of several refs conditionally. So your Effect _would_ depend on which ref is passed.
+
+</DeepDive>
+
+### Step 3: Add cleanup if needed {/*step-3-add-cleanup-if-needed*/}
+
+Consider a different example. You're writing a `ChatRoom` component that needs to connect to the chat server when it appears. You are given a `createConnection()` API that returns an object with `connect()` and `disconnect()` methods. How do you keep the component connected while it is displayed to the user?
+
+Start by writing the Effect logic:
+
+```js
+useEffect(() => {
+  const connection = createConnection();
+  connection.connect();
+});
+```
+
+It would be slow to connect to the chat after every re-render, so you add the dependency array:
+
+```js {4}
+useEffect(() => {
+  const connection = createConnection();
+  connection.connect();
+}, []);
+```
+
+**The code inside the Effect does not use any props or state, so your dependency array is `[]` (empty). This tells React to only run this code when the component "mounts", i.e. appears on the screen for the first time.**
+
+Let's try running this code:
+
+<Sandpack>
+
+```js
+import { useEffect } from 'react';
+import { createConnection } from './chat.js';
+
+export default function ChatRoom() {
+  useEffect(() => {
+    const connection = createConnection();
+    connection.connect();
+  }, []);
+  return <h1>Welcome to the chat!</h1>;
+}
+```
+
+```js chat.js
+export function createConnection() {
+  // A real implementation would actually connect to the server
+  return {
+    connect() {
+      console.log('✅ Connecting...');
+    },
+    disconnect() {
+      console.log('❌ Disconnected.');
+    }
+  };
+}
+```
+
+```css
+input { display: block; margin-bottom: 20px; }
+```
+
+</Sandpack>
+
+This Effect only runs on mount, so you might expect `"✅ Connecting..."` to be printed once in the console. **However, if you check the console, `"✅ Connecting..."` gets printed twice. Why does it happen?**
+
+Imagine the `ChatRoom` component is a part of a larger app with many different screens. The user starts their journey on the `ChatRoom` page. The component mounts and calls `connection.connect()`. Then imagine the user navigates to another screen--for example, to the Settings page. The `ChatRoom` component unmounts. Finally, the user clicks Back and `ChatRoom` mounts again. This would set up a second connection--but the first connection was never destroyed! As the user navigates across the app, the connections would keep piling up.
+
+Bugs like this are easy to miss without extensive manual testing. To help you spot them quickly, in development React remounts every component once immediately after its initial mount. **Seeing the `"✅ Connecting..."` log twice helps you notice the real issue: your code doesn't close the connection when the component unmounts.**
+
+To fix the issue, return a *cleanup function* from your Effect:
+
+```js {4-6}
+  useEffect(() => {
+    const connection = createConnection();
+    connection.connect();
+    return () => {
+      connection.disconnect();
+    };
+  }, []);
+```
+
+React will call your cleanup function each time before the Effect runs again, and one final time when the component unmounts (gets removed). Let's see what happens when the cleanup function is implemented:
+
+<Sandpack>
+
+```js
+import { useState, useEffect } from 'react';
+import { createConnection } from './chat.js';
+
+export default function ChatRoom() {
+  useEffect(() => {
+    const connection = createConnection();
+    connection.connect();
+    return () => connection.disconnect();
+  }, []);
+  return <h1>Welcome to the chat!</h1>;
+}
+```
+
+```js chat.js
+export function createConnection() {
+  // A real implementation would actually connect to the server
+  return {
+    connect() {
+      console.log('✅ Connecting...');
+    },
+    disconnect() {
+      console.log('❌ Disconnected.');
+    }
+  };
+}
+```
+
+```css
+input { display: block; margin-bottom: 20px; }
+```
+
+</Sandpack>
+
+Now you get three console logs in development:
+
+1. `"✅ Connecting..."`
+2. `"❌ Disconnected."`
+3. `"✅ Connecting..."`
+
+**This is the correct behavior in development.** By remounting your component, React verifies that navigating away and back would not break your code. Disconnecting and then connecting again is exactly what should happen! When you implement the cleanup well, there should be no user-visible difference between running the Effect once vs running it, cleaning it up, and running it again. There's an extra connect/disconnect call pair because React is probing your code for bugs in development. This is normal and you shouldn't try to make it go away.
+
+**In production, you would only see `"✅ Connecting..."` printed once.** Remounting components only happens in development to help you find Effects that need cleanup. You can turn off [Strict Mode](/reference/react/StrictMode) to opt out of the development behavior, but we recommend keeping it on. This lets you find many bugs like the one above.
+
+## How to handle the Effect firing twice in development? {/*how-to-handle-the-effect-firing-twice-in-development*/}
+
+React intentionally remounts your components in development to help you find bugs like in the last example. **The right question isn't "how to run an Effect once", but "how to fix my Effect so that it works after remounting".**
+
+Usually, the answer is to implement the cleanup function.  The cleanup function should stop or undo whatever the Effect was doing. The rule of thumb is that the user shouldn't be able to distinguish between the Effect running once (as in production) and a _setup → cleanup → setup_ sequence (as you'd see in development).
+
+Most of the Effects you'll write will fit into one of the common patterns below.
+
+### Controlling non-React widgets {/*controlling-non-react-widgets*/}
+
+Sometimes you need to add UI widgets that aren't written to React. For example, let's say you're adding a map component to your page. It has a `setZoomLevel()` method, and you'd like to keep the zoom level in sync with a `zoomLevel` state variable in your React code. Your Effect would look like similar to this:
+
+```js
+useEffect(() => {
+  const map = mapRef.current;
+  map.setZoomLevel(zoomLevel);
+}, [zoomLevel]);
+```
+
+Note that there is no cleanup needed in this case. In development, React will call the Effect twice, but this is not a problem because calling `setZoomLevel` twice with the same value does not do anything. It may be slightly slower, but this doesn't matter because the remounting is development-only and won't happen in production.
+
+Some APIs may not allow you to call them twice in a row. For example, the [`showModal`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal) method of the built-in [`<dialog>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement) element throws if you call it twice. Implement the cleanup function and make it close the dialog:
+
+```js {4}
+useEffect(() => {
+  const dialog = dialogRef.current;
+  dialog.showModal();
+  return () => dialog.close();
+}, []);
+```
+
+In development, your Effect will call `showModal()`, then immediately `close()`, and then `showModal()` again. This has the same user-visible behavior as calling `showModal()` once, as you would see in production.
+
+### Subscribing to events {/*subscribing-to-events*/}
+
+If your Effect subscribes to something, the cleanup function should unsubscribe:
+
+```js {6}
+useEffect(() => {
+  function handleScroll(e) {
+    console.log(e.clientX, e.clientY);
+  }
+  window.addEventListener('scroll', handleScroll);
+  return () => window.removeEventListener('scroll', handleScroll);
+}, []);
+```
+
+In development, your Effect will call `addEventListener()`, then immediately `removeEventListener()`, and then `addEventListener()` again with the same handler. So there would be only one active subscription at a time. This has the same user-visible behavior as calling `addEventListener()` once, as you would see in production.
+
+### Triggering animations {/*triggering-animations*/}
+
+If your Effect animates something in, the cleanup function should reset the animation to the initial values:
+
+```js {4-6}
+useEffect(() => {
+  const node = ref.current;
+  node.style.opacity = 1; // Trigger the animation
+  return () => {
+    node.style.opacity = 0; // Reset to the initial value
+  };
+}, []);
+```
+
+In development, opacity will be set to `1`, then to `0`, and then to `1` again. This should have the same user-visible behavior as setting it to `1` directly, which is what would happen in production. If you use a third-party animation library with support for tweening, your cleanup function should reset the tween's timeline to its initial state.
+
+### Fetching data {/*fetching-data*/}
+
+If your Effect fetches something, the cleanup function should either [abort the fetch](https://developer.mozilla.org/en-US/docs/Web/API/AbortController) or ignore its result:
+
+```js {2,6,13-15}
+useEffect(() => {
+  let ignore = false;
+
+  async function startFetching() {
+    const json = await fetchTodos(userId);
+    if (!ignore) {
+      setTodos(json);
+    }
+  }
+
+  startFetching();
+
+  return () => {
+    ignore = true;
+  };
+}, [userId]);
+```
+
+You can't "undo" a network request that already happened, but your cleanup function should ensure that the fetch that's _not relevant anymore_ does not keep affecting your application. For example, if the `userId` changes from `'Alice'` to `'Bob'`, cleanup ensures that the `'Alice'` response is ignored even if it arrives after `'Bob'`.
+
+**In development, you will see two fetches in the Network tab.** There is nothing wrong with that. With the approach above, the first Effect will immediately get cleaned up so its copy of the `ignore` variable will be set to `true`. So even though there is an extra request, it won't affect the state thanks to the `if (!ignore)` check.
+
+**In production, there will only be one request.** If the second request in development is bothering you, the best approach is to use a solution that deduplicates requests and caches their responses between components:
+
+```js
+function TodoList() {
+  const todos = useSomeDataLibrary(`/api/user/${userId}/todos`);
+  // ...
+```
+
+This will not only improve the development experience, but also make your application feel faster. For example, the user pressing the Back button won't have to wait for some data to load again because it will be cached. You can either build such a cache yourself or use one of the many existing alternatives to manual fetching in Effects.
+
+<DeepDive>
+
+#### What are good alternatives to data fetching in Effects? {/*what-are-good-alternatives-to-data-fetching-in-effects*/}
+
+Writing `fetch` calls inside Effects is a [popular way to fetch data](https://www.robinwieruch.de/react-hooks-fetch-data/), especially in fully client-side apps. This is, however, a very manual approach and it has significant downsides:
+
+- **Effects don't run on the server.** This means that the initial server-rendered HTML will only include a loading state with no data. The client computer will have to download all JavaScript and render your app only to discover that now it needs to load the data. This is not very efficient.
+- **Fetching directly in Effects makes it easy to create "network waterfalls".** You render the parent component, it fetches some data, renders the child components, and then they start fetching their data. If the network is not very fast, this is significantly slower than fetching all data in parallel.
+- **Fetching directly in Effects usually means you don't preload or cache data.** For example, if the component unmounts and then mounts again, it would have to fetch the data again.
+- **It's not very ergonomic.** There's quite a bit of boilerplate code involved when writing `fetch` calls in a way that doesn't suffer from bugs like [race conditions.](https://maxrozen.com/race-conditions-fetching-data-react-with-useeffect)
+
+This list of downsides is not specific to React. It applies to fetching data on mount with any library. Like with routing, data fetching is not trivial to do well, so we recommend the following approaches:
+
+- **If you use a [framework](/learn/start-a-new-react-project#building-with-a-full-featured-framework), use its built-in data fetching mechanism.** Modern React frameworks have integrated data fetching mechanisms that are efficient and don't suffer from the above pitfalls.
+- **Otherwise, consider using or building a client-side cache.** Popular open source solutions include [React Query](https://tanstack.com/query/latest), [useSWR](https://swr.vercel.app/), and [React Router 6.4+.](https://beta.reactrouter.com/en/main/start/overview) You can build your own solution too, in which case you would use Effects under the hood but also add logic for deduplicating requests, caching responses, and avoiding network waterfalls (by preloading data or hoisting data requirements to routes).
+
+You can continue fetching data directly in Effects if neither of these approaches suit you.
+
+</DeepDive>
+
+### Sending analytics {/*sending-analytics*/}
+
+Consider this code that sends an analytics event on the page visit:
+
+```js
+useEffect(() => {
+  logVisit(url); // Sends a POST request
+}, [url]);
+```
+
+In development, `logVisit` will be called twice for every URL, so you might be tempted to try to work around it. **We recommend to keep this code as is.** Like with earlier examples, there is no *user-visible* behavior difference between running it once and running it twice. From a practical point of view, `logVisit` should not do anything in development because you don't want the logs from the development machines to skew the production metrics. Your component remounts every time you save its file, so it would send extra visits during development anyway.
+
+**In production, there will be no duplicate visit logs.**
+
+To debug the analytics events you're sending, you can deploy your app to a staging environment (which runs in production mode) or temporarily opt out of [Strict Mode](/reference/react/StrictMode) and its development-only remounting checks. You may also send analytics from the route change event handlers instead of Effects. For even more precise analytics, [intersection observers](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) can help track which components are in the viewport and how long they remain visible.
+
+### Not an Effect: Initializing the application {/*not-an-effect-initializing-the-application*/}
+
+Some logic should only run once when the application starts. You can put it outside your components:
+
+```js {2-3}
+if (typeof window !== 'undefined') { // Check if we're running in the browser.
+  checkAuthToken();
+  loadDataFromLocalStorage();
+}
+
+function App() {
+  // ...
+}
+```
+
+This guarantees that such logic only runs once after the browser loads the page.
+
+### Not an Effect: Buying a product {/*not-an-effect-buying-a-product*/}
+
+Sometimes, even if you write a cleanup function, there's no way to prevent user-visible consequences of running the Effect twice. For example, maybe your Effect sends a POST request like buying a product:
+
+```js {2-3}
+useEffect(() => {
+  // 🔴 Wrong: This Effect fires twice in development, exposing a problem in the code.
+  fetch('/api/buy', { method: 'POST' });
+}, []);
+```
+
+You wouldn't want to buy the product twice. However, this is also why you shouldn't put this logic in an Effect. What if the user goes to another page and then presses Back? Your Effect would run again. You don't want to buy the product when the user *visits* a page; you want to buy it when the user *clicks* the Buy button.
+
+Buying is not caused by rendering; it's caused by a specific interaction. It only runs once because the interaction (a click) happens once. **Delete the Effect and move your `/api/buy` request into the Buy button event handler:**
+
+```js {2-3}
+  function handleClick() {
+    // ✅ Buying is an event because it is caused by a particular interaction.
+    fetch('/api/buy', { method: 'POST' });
+  }
+```
+
+**This illustrates that if remounting breaks the logic of your application, this usually uncovers existing bugs.** From the user's perspective, visiting a page shouldn't be different from visiting it, clicking a link, and then pressing Back. React verifies that your components don't break this principle by remounting them once in development.
+
+## Putting it all together {/*putting-it-all-together*/}
+
+This playground can help you "get a feel" for how Effects work in practice.
+
+This example uses [`setTimeout`](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout) to schedule a console log with the input text to appear three seconds after the Effect runs. The cleanup function cancels the pending timeout. Start by pressing "Mount the component":
+
+<Sandpack>
+
+```js
+import { useState, useEffect } from 'react';
+
+function Playground() {
+  const [text, setText] = useState('a');
+
+  useEffect(() => {
+    function onTimeout() {
+      console.log('⏰ ' + text);
+    }
+
+    console.log('🔵 Schedule "' + text + '" log');
+    const timeoutId = setTimeout(onTimeout, 3000);
+
+    return () => {
+      console.log('🟡 Cancel "' + text + '" log');
+      clearTimeout(timeoutId);
+    };
+  }, [text]);
+
+  return (
+    <>
+      <label>
+        What to log:{' '}
+        <input
+          value={text}
+          onChange={e => setText(e.target.value)}
+        />
+      </label>
+      <h1>{text}</h1>
+    </>
+  );
+}
+
+export default function App() {
+  const [show, setShow] = useState(false);
+  return (
+    <>
+      <button onClick={() => setShow(!show)}>
+        {show ? 'Unmount' : 'Mount'} the component
+      </button>
+      {show && <hr />}
+      {show && <Playground />}
+    </>
+  );
+}
+```
+
+</Sandpack>
+
+You will see three logs at first: `Schedule "a" log`, `Cancel "a" log`, and `Schedule "a" log` again. Three second later there will also be a log saying `a`. As you learned earlier on this page, the extra schedule/cancel pair is because **React remounts the component once in development to verify that you've implemented cleanup well.**
+
+Now edit the input to say `abc`. If you do it fast enough, you'll see `Schedule "ab" log` immediately followed by `Cancel "ab" log` and `Schedule "abc" log`. **React always cleans up the previous render's Effect before the next render's Effect.** This is why even if you type into the input fast, there is at most one timeout scheduled at a time. Edit the input a few times and watch the console to get a feel for how Effects get cleaned up.
+
+Type something into the input and then immediately press "Unmount the component". **Notice how unmounting cleans up the last render's Effect.** In this example, it clears the last timeout before it has a chance to fire.
+
+Finally, edit the component above and **comment out the cleanup function** so that the timeouts don't get cancelled. Try typing `abcde` fast. What do you expect to happen in three seconds? Will `console.log(text)` inside the timeout print the *latest* `text` and produce five `abcde` logs? Give it a try to check your intuition!
+
+Three seconds later, you should see a sequence of logs (`a`, `ab`, `abc`, `abcd`, and `abcde`) rather than five `abcde` logs. **Each Effect "captures" the `text` value from its corresponding render.**  It doesn't matter that the `text` state changed: an Effect from the render with `text = 'ab'` will always see `'ab'`. In other words, Effects from each render are isolated from each other. If you're curious how this works, you can read about [closures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures).
+
+<DeepDive>
+
+#### Each render has its own Effects {/*each-render-has-its-own-effects*/}
+
+You can think of `useEffect` as "attaching" a piece of behavior to the render output. Consider this Effect:
+
+```js
+export default function ChatRoom({ roomId }) {
+  useEffect(() => {
+    const connection = createConnection(roomId);
+    connection.connect();
+    return () => connection.disconnect();
+  }, [roomId]);
+
+  return <h1>Welcome to {roomId}!</h1>;
+}
+```
+
+Let's see what exactly happens as the user navigates around the app.
+
+#### Initial render {/*initial-render*/}
+
+The user visits `<ChatRoom roomId="general" />`. Let's [mentally substitute](/learn/state-as-a-snapshot#rendering-takes-a-snapshot-in-time) `roomId` with `'general'`:
+
+```js
+  // JSX for the first render (roomId = "general")
+  return <h1>Welcome to general!</h1>;
+```
+
+**The Effect is *also* a part of the rendering output.** The first render's Effect becomes:
+
+```js
+  // Effect for the first render (roomId = "general")
+  () => {
+    const connection = createConnection('general');
+    connection.connect();
+    return () => connection.disconnect();
+  },
+  // Dependencies for the first render (roomId = "general")
+  ['general']
+```
+
+React runs this Effect, which connects to the `'general'` chat room.
+
+#### Re-render with same dependencies {/*re-render-with-same-dependencies*/}
+
+Let's say `<ChatRoom roomId="general" />` re-renders. The JSX output is the same:
+
+```js
+  // JSX for the second render (roomId = "general")
+  return <h1>Welcome to general!</h1>;
+```
+
+React sees that the rendering output has not changed, so it doesn't update the DOM.
+
+The Effect from the second render looks like this:
+
+```js
+  // Effect for the second render (roomId = "general")
+  () => {
+    const connection = createConnection('general');
+    connection.connect();
+    return () => connection.disconnect();
+  },
+  // Dependencies for the second render (roomId = "general")
+  ['general']
+```
+
+React compares `['general']` from the second render with `['general']` from the first render. **Because all dependencies are the same, React *ignores* the Effect from the second render.** It never gets called.
+
+#### Re-render with different dependencies {/*re-render-with-different-dependencies*/}
+
+Then, the user visits `<ChatRoom roomId="travel" />`. This time, the component returns different JSX:
+
+```js
+  // JSX for the third render (roomId = "travel")
+  return <h1>Welcome to travel!</h1>;
+```
+
+React updates the DOM to change `"Welcome to general"` into `"Welcome to travel"`.
+
+The Effect from the third render looks like this:
+
+```js
+  // Effect for the third render (roomId = "travel")
+  () => {
+    const connection = createConnection('travel');
+    connection.connect();
+    return () => connection.disconnect();
+  },
+  // Dependencies for the third render (roomId = "travel")
+  ['travel']
+```
+
+React compares `['travel']` from the third render with `['general']` from the second render. One dependency is different: `Object.is('travel', 'general')` is `false`. The Effect can't be skipped.
+
+**Before React can apply the Effect from the third render, it needs to clean up the last Effect that _did_ run.** The second render's Effect was skipped, so React needs to clean up the first render's Effect. If you scroll up to the first render, you'll see that its cleanup calls `disconnect()` on the connection that was created with `createConnection('general')`. This disconnects the app from the `'general'` chat room.
+
+After that, React runs the third render's Effect. It connects to the `'travel'` chat room.
+
+#### Unmount {/*unmount*/}
+
+Finally, let's say the user navigates away, and the `ChatRoom` component unmounts. React runs the last Effect's cleanup function. The last Effect was from the third render. The third render's cleanup destroys the `createConnection('travel')` connection. So the app disconnects from the `'travel'` room.
+
+#### Development-only behaviors {/*development-only-behaviors*/}
+
+When [Strict Mode](/reference/react/StrictMode) is on, React remounts every component once after mount (state and DOM are preserved). This [helps you find Effects that need cleanup](#step-3-add-cleanup-if-needed) and exposes bugs like race conditions early. Additionally, React will remount the Effects whenever you save a file in development. Both of these behaviors are development-only.
+
+</DeepDive>
+
+<Recap>
+
+- Unlike events, Effects are caused by rendering itself rather than a particular interaction.
+- Effects let you synchronize a component with some external system (third-party API, network, etc).
+- By default, Effects run after every render (including the initial one).
+- React will skip the Effect if all of its dependencies have the same values as during the last render.
+- You can't "choose" your dependencies. They are determined by the code inside the Effect.
+- An empty dependency array (`[]`) corresponds to the component "mounting", i.e. being added to the screen.
+- When Strict Mode is on, React mounts components twice (in development only!) to stress-test your Effects.
+- If your Effect breaks because of remounting, you need to implement a cleanup function.
+- React will call your cleanup function before the Effect runs next time, and during the unmount.
+
+</Recap>
+
+<Challenges>
+
+#### Focus a field on mount {/*focus-a-field-on-mount*/}
+
+In this example, the form renders a `<MyInput />` component.
+
+Use the input's [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) method to make `MyInput` automatically focus when it appears on the screen. There is already a commented out implementation, but it doesn't quite work. Figure out why it doesn't work, and fix it. (If you're familiar with the `autoFocus` attribute, pretend that it does not exist: we are reimplementing the same functionality from scratch.)
+
+<Sandpack>
+
+```js MyInput.js active
+import { useEffect, useRef } from 'react';
+
+export default function MyInput({ value, onChange }) {
+  const ref = useRef(null);
+
+  // TODO: This doesn't quite work. Fix it.
+  // ref.current.focus()    
+
+  return (
+    <input
+      ref={ref}
+      value={value}
+      onChange={onChange}
+    />
+  );
+}
+```
+
+```js App.js hidden
+import { useState } from 'react';
+import MyInput from './MyInput.js';
+
+export default function Form() {
+  const [show, setShow] = useState(false);
+  const [name, setName] = useState('Taylor');
+  const [upper, setUpper] = useState(false);
+  return (
+    <>
+      <button onClick={() => setShow(s => !s)}>{show ? 'Hide' : 'Show'} form</button>
+      <br />
+      <hr />
+      {show && (
+        <>
+          <label>
+            Enter your name:
+            <MyInput
+              value={name}
+              onChange={e => setName(e.target.value)}
+            />
+          </label>
+          <label>
+            <input
+              type="checkbox"
+              checked={upper}
+              onChange={e => setUpper(e.target.checked)}
+            />
+            Make it uppercase
+          </label>
+          <p>Hello, <b>{upper ? name.toUpperCase() : name}</b></p>
+        </>
+      )}
+    </>
+  );
+}
+```
+
+```css
+label {
+  display: block;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+body {
+  min-height: 150px;
+}
+```
+
+</Sandpack>
+
+
+To verify that your solution works, press "Show form" and verify that the input receives focus (becomes highlighted and the cursor is placed inside). Press "Hide form" and "Show form" again. Verify the input is highlighted again.
+
+`MyInput` should only focus _on mount_ rather than after every render. To verify that the behavior is right, press "Show form" and then repeatedly press the "Make it uppercase" checkbox. Clicking the checkbox should _not_ focus the input above it.
+
+<Solution>
+
+Calling `ref.current.focus()` during render is wrong because it is a *side effect*. Side effects should either be placed inside an event handler or be declared with `useEffect`. In this case, the side effect is _caused_ by the component appearing rather than by any specific interaction, so it makes sense to put it in an Effect.
+
+To fix the mistake, wrap the `ref.current.focus()` call into an Effect declaration. Then, to ensure that this Effect runs only on mount rather than after every render, add the empty `[]` dependencies to it.
+
+<Sandpack>
+
+```js MyInput.js active
+import { useEffect, useRef } from 'react';
+
+export default function MyInput({ value, onChange }) {
+  const ref = useRef(null);
+
+  useEffect(() => {
+    ref.current.focus();
+  }, []);
+
+  return (
+    <input
+      ref={ref}
+      value={value}
+      onChange={onChange}
+    />
+  );
+}
+```
+
+```js App.js hidden
+import { useState } from 'react';
+import MyInput from './MyInput.js';
+
+export default function Form() {
+  const [show, setShow] = useState(false);
+  const [name, setName] = useState('Taylor');
+  const [upper, setUpper] = useState(false);
+  return (
+    <>
+      <button onClick={() => setShow(s => !s)}>{show ? 'Hide' : 'Show'} form</button>
+      <br />
+      <hr />
+      {show && (
+        <>
+          <label>
+            Enter your name:
+            <MyInput
+              value={name}
+              onChange={e => setName(e.target.value)}
+            />
+          </label>
+          <label>
+            <input
+              type="checkbox"
+              checked={upper}
+              onChange={e => setUpper(e.target.checked)}
+            />
+            Make it uppercase
+          </label>
+          <p>Hello, <b>{upper ? name.toUpperCase() : name}</b></p>
+        </>
+      )}
+    </>
+  );
+}
+```
+
+```css
+label {
+  display: block;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+body {
+  min-height: 150px;
+}
+```
+
+</Sandpack>
+
+</Solution>
+
+#### Focus a field conditionally {/*focus-a-field-conditionally*/}
+
+This form renders two `<MyInput />` components.
+
+Press "Show form" and notice that the second field automatically gets focused. This is because both of the `<MyInput />` components try to focus the field inside. When you call `focus()` for two input fields in a row, the last one always "wins".
+
+Let's say you want to focus the first field. The first `MyInput` component now receives a boolean `shouldFocus` prop set to `true`. Change the logic so that `focus()` is only called if the `shouldFocus` prop received by `MyInput` is `true`.
+
+<Sandpack>
+
+```js MyInput.js active
+import { useEffect, useRef } from 'react';
+
+export default function MyInput({ shouldFocus, value, onChange }) {
+  const ref = useRef(null);
+
+  // TODO: call focus() only if shouldFocus is true.
+  useEffect(() => {
+    ref.current.focus();
+  }, []);
+
+  return (
+    <input
+      ref={ref}
+      value={value}
+      onChange={onChange}
+    />
+  );
+}
+```
+
+```js App.js hidden
+import { useState } from 'react';
+import MyInput from './MyInput.js';
+
+export default function Form() {
+  const [show, setShow] = useState(false);
+  const [firstName, setFirstName] = useState('Taylor');
+  const [lastName, setLastName] = useState('Swift');
+  const [upper, setUpper] = useState(false);
+  const name = firstName + ' ' + lastName;
+  return (
+    <>
+      <button onClick={() => setShow(s => !s)}>{show ? 'Hide' : 'Show'} form</button>
+      <br />
+      <hr />
+      {show && (
+        <>
+          <label>
+            Enter your first name:
+            <MyInput
+              value={firstName}
+              onChange={e => setFirstName(e.target.value)}
+              shouldFocus={true}
+            />
+          </label>
+          <label>
+            Enter your last name:
+            <MyInput
+              value={lastName}
+              onChange={e => setLastName(e.target.value)}
+              shouldFocus={false}
+            />
+          </label>
+          <p>Hello, <b>{upper ? name.toUpperCase() : name}</b></p>
+        </>
+      )}
+    </>
+  );
+}
+```
+
+```css
+label {
+  display: block;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+body {
+  min-height: 150px;
+}
+```
+
+</Sandpack>
+
+To verify your solution, press "Show form" and "Hide form" repeatedly. When the form appears, only the *first* input should get focused. This is because the parent component renders the first input with `shouldFocus={true}` and the second input with `shouldFocus={false}`. Also check that both inputs still work and you can type into both of them.
+
+<Hint>
+
+You can't declare an Effect conditionally, but your Effect can include conditional logic.
+
+</Hint>
+
+<Solution>
+
+Put the conditional logic inside the Effect. You will need to specify `shouldFocus` as a dependency because you are using it inside the Effect. (This means that if some input's `shouldFocus` changes from `false` to `true`, it will focus after mount.)
+
+<Sandpack>
+
+```js MyInput.js active
+import { useEffect, useRef } from 'react';
+
+export default function MyInput({ shouldFocus, value, onChange }) {
+  const ref = useRef(null);
+
+  useEffect(() => {
+    if (shouldFocus) {
+      ref.current.focus();
+    }
+  }, [shouldFocus]);
+
+  return (
+    <input
+      ref={ref}
+      value={value}
+      onChange={onChange}
+    />
+  );
+}
+```
+
+```js App.js hidden
+import { useState } from 'react';
+import MyInput from './MyInput.js';
+
+export default function Form() {
+  const [show, setShow] = useState(false);
+  const [firstName, setFirstName] = useState('Taylor');
+  const [lastName, setLastName] = useState('Swift');
+  const [upper, setUpper] = useState(false);
+  const name = firstName + ' ' + lastName;
+  return (
+    <>
+      <button onClick={() => setShow(s => !s)}>{show ? 'Hide' : 'Show'} form</button>
+      <br />
+      <hr />
+      {show && (
+        <>
+          <label>
+            Enter your first name:
+            <MyInput
+              value={firstName}
+              onChange={e => setFirstName(e.target.value)}
+              shouldFocus={true}
+            />
+          </label>
+          <label>
+            Enter your last name:
+            <MyInput
+              value={lastName}
+              onChange={e => setLastName(e.target.value)}
+              shouldFocus={false}
+            />
+          </label>
+          <p>Hello, <b>{upper ? name.toUpperCase() : name}</b></p>
+        </>
+      )}
+    </>
+  );
+}
+```
+
+```css
+label {
+  display: block;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+body {
+  min-height: 150px;
+}
+```
+
+</Sandpack>
+
+</Solution>
+
+#### Fix an interval that fires twice {/*fix-an-interval-that-fires-twice*/}
+
+This `Counter` component displays a counter that should increment every second. On mount, it calls [`setInterval`.](https://developer.mozilla.org/en-US/docs/Web/API/setInterval) This causes `onTick` to run every second. The `onTick` function increments the counter.
+
+However, instead of incrementing once per second, it increments twice. Why is that? Find the cause of the bug and fix it.
+
+<Hint>
+
+Keep in mind that `setInterval` returns an interval ID, which you can pass to [`clearInterval`](https://developer.mozilla.org/en-US/docs/Web/API/clearInterval) to stop the interval.
+
+</Hint>
+
+<Sandpack>
+
+```js Counter.js active
+import { useState, useEffect } from 'react';
+
+export default function Counter() {
+  const [count, setCount] = useState(0);
+
+  useEffect(() => {
+    function onTick() {
+      setCount(c => c + 1);
+    }
+
+    setInterval(onTick, 1000);
+  }, []);
+
+  return <h1>{count}</h1>;
+}
+```
+
+```js App.js hidden
+import { useState } from 'react';
+import Counter from './Counter.js';
+
+export default function Form() {
+  const [show, setShow] = useState(false);
+  return (
+    <>
+      <button onClick={() => setShow(s => !s)}>{show ? 'Hide' : 'Show'} counter</button>
+      <br />
+      <hr />
+      {show && <Counter />}
+    </>
+  );
+}
+```
+
+```css
+label {
+  display: block;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+body {
+  min-height: 150px;
+}
+```
+
+</Sandpack>
+
+<Solution>
+
+When [Strict Mode](/reference/react/StrictMode) is on (like in the sandboxes on this site), React remounts each component once in development. This causes the interval to be set up twice, and this is why each second the counter increments twice.
+
+However, React's behavior is not the *cause* of the bug: the bug already exists in the code. React's behavior makes the bug more noticeable. The real cause is that this Effect starts a process but doesn't provide a way to clean it up.
+
+To fix this code, save the interval ID returned by `setInterval`, and implement a cleanup function with [`clearInterval`](https://developer.mozilla.org/en-US/docs/Web/API/clearInterval):
+
+<Sandpack>
+
+```js Counter.js active
+import { useState, useEffect } from 'react';
+
+export default function Counter() {
+  const [count, setCount] = useState(0);
+
+  useEffect(() => {
+    function onTick() {
+      setCount(c => c + 1);
+    }
+
+    const intervalId = setInterval(onTick, 1000);
+    return () => clearInterval(intervalId);
+  }, []);
+
+  return <h1>{count}</h1>;
+}
+```
+
+```js App.js hidden
+import { useState } from 'react';
+import Counter from './Counter.js';
+
+export default function App() {
+  const [show, setShow] = useState(false);
+  return (
+    <>
+      <button onClick={() => setShow(s => !s)}>{show ? 'Hide' : 'Show'} counter</button>
+      <br />
+      <hr />
+      {show && <Counter />}
+    </>
+  );
+}
+```
+
+```css
+label {
+  display: block;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+body {
+  min-height: 150px;
+}
+```
+
+</Sandpack>
+
+In development, React will still remount your component once to verify that you've implemented cleanup well. So there will be a `setInterval` call, immediately followed by `clearInterval`, and `setInterval` again. In production, there will be only one `setInterval` call. The user-visible behavior in both cases is the same: the counter increments once per second.
+
+</Solution>
+
+#### Fix fetching inside an Effect {/*fix-fetching-inside-an-effect*/}
+
+This component shows the biography for the selected person. It loads the biography by calling an asynchronous function `fetchBio(person)` on mount and whenever `person` changes. That asynchronous function returns a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) which eventually resolves to a string. When fetching is done, it calls `setBio` to display that string under the select box.
+
+<Sandpack>
+
+```js App.js
+import { useState, useEffect } from 'react';
+import { fetchBio } from './api.js';
+
+export default function Page() {
+  const [person, setPerson] = useState('Alice');
+  const [bio, setBio] = useState(null);
+
+  useEffect(() => {
+    setBio(null);
+    fetchBio(person).then(result => {
+      setBio(result);
+    });
+  }, [person]);
+
+  return (
+    <>
+      <select value={person} onChange={e => {
+        setPerson(e.target.value);
+      }}>
+        <option value="Alice">Alice</option>
+        <option value="Bob">Bob</option>
+        <option value="Taylor">Taylor</option>
+      </select>
+      <hr />
+      <p><i>{bio ?? 'Loading...'}</i></p>
+    </>
+  );
+}
+```
+
+```js api.js hidden
+export async function fetchBio(person) {
+  const delay = person === 'Bob' ? 2000 : 200;
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve('This is ' + person + '’s bio.');
+    }, delay);
+  })
+}
+
+```
+
+</Sandpack>
+
+
+There is a bug in this code. Start by selecting "Alice". Then select "Bob" and then immediately after that select "Taylor". If you do this fast enough, you will notice that bug: Taylor is selected, but the paragraph below says "This is Bob's bio."
+
+Why does this happen? Fix the bug inside this Effect.
+
+<Hint>
+
+If an Effect fetches something asynchronously, it usually needs cleanup.
+
+</Hint>
+
+<Solution>
+
+To trigger the bug, things need to happen in this order:
+
+- Selecting `'Bob'` triggers `fetchBio('Bob')`
+- Selecting `'Taylor'` triggers `fetchBio('Taylor')`
+- **Fetching `'Taylor'` completes *before* fetching `'Bob'`**
+- The Effect from the `'Taylor'` render calls `setBio('This is Taylor’s bio')`
+- Fetching `'Bob'` completes
+- The Effect from the `'Bob'` render calls `setBio('This is Bob’s bio')`
+
+This is why you see Bob's bio even though Taylor is selected. Bugs like this are called [race conditions](https://en.wikipedia.org/wiki/Race_condition) because two asynchronous operations are "racing" with each other, and they might arrive in an unexpected order.
+
+To fix this race condition, add a cleanup function:
+
+<Sandpack>
+
+```js App.js
+import { useState, useEffect } from 'react';
+import { fetchBio } from './api.js';
+
+export default function Page() {
+  const [person, setPerson] = useState('Alice');
+  const [bio, setBio] = useState(null);
+  useEffect(() => {
+    let ignore = false;
+    setBio(null);
+    fetchBio(person).then(result => {
+      if (!ignore) {
+        setBio(result);
+      }
+    });
+    return () => {
+      ignore = true;
+    }
+  }, [person]);
+
+  return (
+    <>
+      <select value={person} onChange={e => {
+        setPerson(e.target.value);
+      }}>
+        <option value="Alice">Alice</option>
+        <option value="Bob">Bob</option>
+        <option value="Taylor">Taylor</option>
+      </select>
+      <hr />
+      <p><i>{bio ?? 'Loading...'}</i></p>
+    </>
+  );
+}
+```
+
+```js api.js hidden
+export async function fetchBio(person) {
+  const delay = person === 'Bob' ? 2000 : 200;
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve('This is ' + person + '’s bio.');
+    }, delay);
+  })
+}
+
+```
+
+</Sandpack>
+
+Each render's Effect has its own `ignore` variable. Initially, the `ignore` variable is set to `false`. However, if an Effect gets cleaned up (such as when you select a different person), its `ignore` variable becomes `true`. So now it doesn't matter in which order the requests complete. Only the last person's Effect will have `ignore` set to `false`, so it will call `setBio(result)`. Past Effects have been cleaned up, so the `if (!ignore)` check will prevent them from calling `setBio`:
+
+- Selecting `'Bob'` triggers `fetchBio('Bob')`
+- Selecting `'Taylor'` triggers `fetchBio('Taylor')` **and cleans up the previous (Bob's) Effect**
+- Fetching `'Taylor'` completes *before* fetching `'Bob'`
+- The Effect from the `'Taylor'` render calls `setBio('This is Taylor’s bio')`
+- Fetching `'Bob'` completes
+- The Effect from the `'Bob'` render **does not do anything because its `ignore` flag was set to `true`**
+
+In addition to ignoring the result of an outdated API call, you can also use [`AbortController`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController) to cancel the requests that are no longer needed. However, by itself this is not enough to protect against race conditions. More asynchronous steps could be chained after the fetch, so using an explicit flag like `ignore` is the most reliable way to fix this type of problems.
+
+</Solution>
+
+</Challenges>
+
diff --git a/beta/src/content/learn/thinking-in-react.md b/beta/src/content/learn/thinking-in-react.md
new file mode 100644
index 000000000..82dc4c0fc
--- /dev/null
+++ b/beta/src/content/learn/thinking-in-react.md
@@ -0,0 +1,649 @@
+---
+title: Thinking in React
+---
+
+<Intro>
+
+React can change how you think about the designs you look at and the apps you build. When you build a user interface with React, you will first break it apart into pieces called *components.* Then, you will describe the different visual states for each of your components. Finally, you will connect your components together so that the data flows through them. In this tutorial, we'll guide you through the thought process of building a searchable product data table with React.
+
+</Intro>
+
+## Start with the mockup {/*start-with-the-mockup*/}
+
+Imagine that you already have a JSON API and a mockup from a designer.
+
+The JSON API returns some data that looks like this:
+
+```json
+[
+  { category: "Fruits", price: "$1", stocked: true, name: "Apple" },
+  { category: "Fruits", price: "$1", stocked: true, name: "Dragonfruit" },
+  { category: "Fruits", price: "$2", stocked: false, name: "Passionfruit" },
+  { category: "Vegetables", price: "$2", stocked: true, name: "Spinach" },
+  { category: "Vegetables", price: "$4", stocked: false, name: "Pumpkin" },
+  { category: "Vegetables", price: "$1", stocked: true, name: "Peas" }
+]
+```
+
+The mockup looks like this:
+
+<img src="/images/docs/s_thinking-in-react_ui.png" width="300" style={{margin: '0 auto'}} />
+
+To implement a UI in React, you will usually follow the same five steps.
+
+## Step 1: Break the UI into a component hierarchy {/*step-1-break-the-ui-into-a-component-hierarchy*/}
+
+Start by drawing boxes around every component and subcomponent in the mockup and naming them. If you work with a designer, they may have already named these components in their design tool. Check in with them!
+
+Depending on your background, you can think about splitting up a design into components in different ways:
+
+* **Programming**--use the same techniques for deciding if you should create a new function or object. One such technique is the [single responsibility principle](https://en.wikipedia.org/wiki/Single_responsibility_principle), that is, a component should ideally only do one thing. If it ends up growing, it should be decomposed into smaller subcomponents. 
+* **CSS**--consider what you would make class selectors for. (However, components are a bit less granular.)
+* **Design**--consider how you would organize the design's layers.
+
+If your JSON is well-structured, you'll often find that it naturally maps to the component structure of your UI. That's because UI and data models often have the same information architecture--that is, the same shape. Separate your UI into components, where each component matches one piece of your data model.
+
+There are five components on this screen:
+
+<FullWidth>
+
+<CodeDiagram flip>
+
+<img src="/images/docs/s_thinking-in-react_ui_outline.png" width="500" style={{margin: '0 auto'}} />
+
+1. `FilterableProductTable` (grey) contains the entire app.
+2. `SearchBar` (blue) receives the user input.
+3. `ProductTable` (lavender) displays and filters the list according to the user input.
+4. `ProductCategoryRow` (green) displays a heading for each category.
+5. `ProductRow`	(yellow) displays a row for each product.
+
+</CodeDiagram>
+
+</FullWidth>
+
+If you look at `ProductTable` (lavender), you'll see that the table header (containing the "Name" and "Price" labels) isn't its own component. This is a matter of preference, and you could go either way. For this example, it is a part of `ProductTable` because it appears inside the `ProductTable`'s list. However, if this header grows to be complex (e.g., if you add sorting), it would make sense to make this its own `ProductTableHeader` component.
+
+Now that you've identified the components in the mockup, arrange them into a hierarchy. Components that appear within another component in the mockup should appear as a child in the hierarchy:
+
+* `FilterableProductTable`
+    * `SearchBar`
+    * `ProductTable`
+        * `ProductCategoryRow`
+        * `ProductRow`
+
+## Step 2: Build a static version in React {/*step-2-build-a-static-version-in-react*/}
+
+Now that you have your component hierarchy, it's time to implement your app. The most straightforward approach is to build a version that renders the UI from your data model without adding any interactivity... yet! It's often easier to build the static version first and then add interactivity separately. Building a static version requires a lot of typing and no thinking, but adding interactivity requires a lot of thinking and not a lot of typing.
+
+To build a static version of your app that renders your data model, you'll want to build [components](/learn/your-first-component) that reuse other components and pass data using [props.](/learn/passing-props-to-a-component) Props are a way of passing data from parent to child. (If you're familiar with the concept of [state](/learn/state-a-components-memory), don't use state at all to build this static version. State is reserved only for interactivity, that is, data that changes over time. Since this is a static version of the app, you don't need it.)
+
+You can either build "top down" by starting with building the components higher up in the hierarchy (like `FilterableProductTable`) or "bottom up" by working from components lower down (like `ProductRow`). In simpler examples, it’s usually easier to go top-down, and on larger projects, it’s easier to go bottom-up.
+
+<Sandpack>
+
+```jsx App.js
+function ProductCategoryRow({ category }) {
+  return (
+    <tr>
+      <th colSpan="2">
+        {category}
+      </th>
+    </tr>
+  );
+}
+
+function ProductRow({ product }) {
+  const name = product.stocked ? product.name :
+    <span style={{ color: 'red' }}>
+      {product.name}
+    </span>;
+
+  return (
+    <tr>
+      <td>{name}</td>
+      <td>{product.price}</td>
+    </tr>
+  );
+}
+
+function ProductTable({ products }) {
+  const rows = [];
+  let lastCategory = null;
+
+  products.forEach((product) => {
+    if (product.category !== lastCategory) {
+      rows.push(
+        <ProductCategoryRow
+          category={product.category}
+          key={product.category} />
+      );
+    }
+    rows.push(
+      <ProductRow
+        product={product}
+        key={product.name} />
+    );
+    lastCategory = product.category;
+  });
+
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Price</th>
+        </tr>
+      </thead>
+      <tbody>{rows}</tbody>
+    </table>
+  );
+}
+
+function SearchBar() {
+  return (
+    <form>
+      <input type="text" placeholder="Search..." />
+      <label>
+        <input type="checkbox" />
+        {' '}
+        Only show products in stock
+      </label>
+    </form>
+  );
+}
+
+function FilterableProductTable({ products }) {
+  return (
+    <div>
+      <SearchBar />
+      <ProductTable products={products} />
+    </div>
+  );
+}
+
+const PRODUCTS = [
+  {category: "Fruits", price: "$1", stocked: true, name: "Apple"},
+  {category: "Fruits", price: "$1", stocked: true, name: "Dragonfruit"},
+  {category: "Fruits", price: "$2", stocked: false, name: "Passionfruit"},
+  {category: "Vegetables", price: "$2", stocked: true, name: "Spinach"},
+  {category: "Vegetables", price: "$4", stocked: false, name: "Pumpkin"},
+  {category: "Vegetables", price: "$1", stocked: true, name: "Peas"}
+];
+
+export default function App() {
+  return <FilterableProductTable products={PRODUCTS} />;
+}
+```
+
+```css
+body {
+  padding: 5px
+}
+label {
+  display: block;
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+th {
+  padding-top: 10px;
+}
+td {
+  padding: 2px;
+  padding-right: 40px;
+}
+```
+
+</Sandpack>
+
+(If this code looks intimidating, go through the [Quick Start](/learn/) first!)
+
+After building your components, you'll have a library of reusable components that render your data model. Because this is a static app, the components will only return JSX. The component at the top of the hierarchy (`FilterableProductTable`) will take your data model as a prop. This is called _one-way data flow_ because the data flows down from the top-level component to the ones at the bottom of the tree.
+
+<Pitfall>
+
+At this point, you should not be using any state values. That’s for the next step!
+
+</Pitfall>
+
+## Step 3: Find the minimal but complete representation of UI state {/*step-3-find-the-minimal-but-complete-representation-of-ui-state*/}
+
+To make the UI interactive, you need to let users change your underlying data model. You will use *state* for this.
+
+Think of state as the minimal set of changing data that your app needs to remember. The most important principle for structuring state is to keep it [DRY (Don't Repeat Yourself).](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself) Figure out the absolute minimal representation of the state your application needs and compute everything else on-demand. For example, if you're building a shopping list, you can store the items as an array in state. If you want to also display the number of items in the list, don't store the number of items as another state value--instead, read the length of your array.
+
+Now think of all of the pieces of data in this example application:
+
+1. The original list of products
+2. The search text the user has entered
+3. The value of the checkbox
+4. The filtered list of products
+
+Which of these are state? Identify the ones that are not:
+
+* Does it **remain unchanged** over time? If so, it isn't state.
+* Is it **passed in from a parent** via props? If so, it isn't state.
+* **Can you compute it** based on existing state or props in your component? If so, it *definitely* isn't state!
+
+What's left is probably state.
+
+Let's go through them one by one again:
+
+1. The original list of products is **passed in as props, so it's not state.** 
+2. The search text seems to be state since it changes over time and can't be computed from anything.
+3. The value of the checkbox seems to be state since it changes over time and can't be computed from anything.
+4. The filtered list of products **isn't state because it can be computed** by taking the original list of products and filtering it according to the search text and value of the checkbox.
+
+This means only the search text and the value of the checkbox are state! Nicely done!
+
+<DeepDive>
+
+#### Props vs State {/*props-vs-state*/}
+
+There are two types of "model" data in React: props and state. The two are very different:
+
+* [**Props** are like arguments you pass](/learn/passing-props-to-a-component) to a function. They let a parent component pass data to a child component and customize its appearance. For example, a `Form` can pass a `color` prop to a `Button`.
+* [**State** is like a component’s memory.](/learn/state-a-components-memory) It lets a component keep track of some information and change it in response to interactions. For example, a `Button` might keep track of `isHovered` state.
+
+Props and state are different, but they work together. A parent component will often keep some information in state (so that it can change it), and *pass it down* to child components as their props. It's okay if the difference still feels fuzzy on the first read. It takes a bit of practice for it to really stick!
+
+</DeepDive>
+
+## Step 4: Identify where your state should live {/*step-4-identify-where-your-state-should-live*/}
+
+After identifying your app’s minimal state data, you need to identify which component is responsible for changing this state, or *owns* the state. Remember: React uses one-way data flow, passing data down the component hierarchy from parent to child component. It may not be immediately clear which component should own what state. This can be challenging if you’re new to this concept, but you can figure it out by following these steps!
+
+For each piece of state in your application:
+
+1. Identify *every* component that renders something based on that state.
+2. Find their closest common parent component--a component above them all in the hierarchy.
+3. Decide where the state should live:
+    1. Often, you can put the state directly into their common parent.
+    2. You can also put the state into some component above their common parent.
+    3. If you can't find a component where it makes sense to own the state, create a new component solely for holding the state and add it somewhere in the hierarchy above the common parent component.
+
+In the previous step, you found two pieces of state in this application: the search input text, and the value of the checkbox. In this example, they always appear together, so it is easier to think of them as a single piece of state.
+
+Now let's run through our strategy for this state:
+
+1. **Identify components that use state:**
+    * `ProductTable` needs to filter the product list based on that state (search text and checkbox value). 
+    * `SearchBar` needs to display that state (search text and checkbox value).
+1. **Find their common parent:** The first parent component both components share is `FilterableProductTable`.
+2. **Decide where the state lives**: We'll keep the filter text and checked state values in `FilterableProductTable`.
+
+So the state values will live in `FilterableProductTable`. 
+
+Add state to the component with the [`useState()` Hook.](/reference/react/useState) Hooks let you "hook into" a component's [render cycle.](/learn/render-and-commit) Add two state variables at the top of `FilterableProductTable` and specify the initial state of your application:
+
+```js
+function FilterableProductTable({ products }) {
+  const [filterText, setFilterText] = useState('');
+  const [inStockOnly, setInStockOnly] = useState(false);  
+```
+
+Then, pass `filterText` and `inStockOnly` to `ProductTable` and `SearchBar` as props:
+
+```js
+<div>
+  <SearchBar 
+    filterText={filterText} 
+    inStockOnly={inStockOnly} />
+  <ProductTable 
+    products={products}
+    filterText={filterText}
+    inStockOnly={inStockOnly} />
+</div>
+```
+
+You can start seeing how your application will behave. Edit the `filterText` initial value from `useState('')` to `useState('fruit')` in the sandbox code below. You'll see both the search input text and the table update:
+
+<Sandpack>
+
+```jsx App.js
+import { useState } from 'react';
+
+function FilterableProductTable({ products }) {
+  const [filterText, setFilterText] = useState('');
+  const [inStockOnly, setInStockOnly] = useState(false);
+
+  return (
+    <div>
+      <SearchBar 
+        filterText={filterText} 
+        inStockOnly={inStockOnly} />
+      <ProductTable 
+        products={products}
+        filterText={filterText}
+        inStockOnly={inStockOnly} />
+    </div>
+  );
+}
+
+function ProductCategoryRow({ category }) {
+  return (
+    <tr>
+      <th colSpan="2">
+        {category}
+      </th>
+    </tr>
+  );
+}
+
+function ProductRow({ product }) {
+  const name = product.stocked ? product.name :
+    <span style={{ color: 'red' }}>
+      {product.name}
+    </span>;
+
+  return (
+    <tr>
+      <td>{name}</td>
+      <td>{product.price}</td>
+    </tr>
+  );
+}
+
+function ProductTable({ products, filterText, inStockOnly }) {
+  const rows = [];
+  let lastCategory = null;
+
+  products.forEach((product) => {
+    if (
+      product.name.toLowerCase().indexOf(
+        filterText.toLowerCase()
+      ) === -1
+    ) {
+      return;
+    }
+    if (inStockOnly && !product.stocked) {
+      return;
+    }
+    if (product.category !== lastCategory) {
+      rows.push(
+        <ProductCategoryRow
+          category={product.category}
+          key={product.category} />
+      );
+    }
+    rows.push(
+      <ProductRow
+        product={product}
+        key={product.name} />
+    );
+    lastCategory = product.category;
+  });
+
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Price</th>
+        </tr>
+      </thead>
+      <tbody>{rows}</tbody>
+    </table>
+  );
+}
+
+function SearchBar({ filterText, inStockOnly }) {
+  return (
+    <form>
+      <input 
+        type="text" 
+        value={filterText} 
+        placeholder="Search..."/>
+      <label>
+        <input 
+          type="checkbox" 
+          checked={inStockOnly} />
+        {' '}
+        Only show products in stock
+      </label>
+    </form>
+  );
+}
+
+const PRODUCTS = [
+  {category: "Fruits", price: "$1", stocked: true, name: "Apple"},
+  {category: "Fruits", price: "$1", stocked: true, name: "Dragonfruit"},
+  {category: "Fruits", price: "$2", stocked: false, name: "Passionfruit"},
+  {category: "Vegetables", price: "$2", stocked: true, name: "Spinach"},
+  {category: "Vegetables", price: "$4", stocked: false, name: "Pumpkin"},
+  {category: "Vegetables", price: "$1", stocked: true, name: "Peas"}
+];
+
+export default function App() {
+  return <FilterableProductTable products={PRODUCTS} />;
+}
+```
+
+```css
+body {
+  padding: 5px
+}
+label {
+  display: block;
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+th {
+  padding-top: 5px;
+}
+td {
+  padding: 2px;
+}
+```
+
+</Sandpack>
+
+Notice that editing the form doesn't work yet. There is a console error in the sandbox above explaining why:
+
+<ConsoleBlock level="error">
+
+You provided a \`value\` prop to a form field without an \`onChange\` handler. This will render a read-only field.
+
+</ConsoleBlock>
+
+In the sandbox above, `ProductTable` and `SearchBar` read the `filterText` and `inStockOnly` props to render the table, the input, and the checkbox. For example, here is how `SearchBar` populates the input value:
+
+```js {1,6}
+function SearchBar({ filterText, inStockOnly }) {
+  return (
+    <form>
+      <input 
+        type="text" 
+        value={filterText} 
+        placeholder="Search..."/>
+```
+
+However, you haven't added any code to respond to the user actions like typing yet. This will be your final step.
+
+
+## Step 5: Add inverse data flow {/*step-5-add-inverse-data-flow*/}
+
+Currently your app renders correctly with props and state flowing down the hierarchy. But to change the state according to user input, you will need to support data flowing the other way: the form components deep in the hierarchy need to update the state in `FilterableProductTable`. 
+
+React makes this data flow explicit, but it requires a little more typing than two-way data binding. If you try to type or check the box in the example above, you'll see that React ignores your input. This is intentional. By writing `<input value={filterText} />`, you've set the `value` prop of the `input` to always be equal to the `filterText` state passed in from `FilterableProductTable`. Since `filterText` state is never set, the input never changes.
+
+You want to make it so whenever the user changes the form inputs, the state updates to reflect those changes. The state is owned by `FilterableProductTable`, so only it can call `setFilterText` and `setInStockOnly`. To let `SearchBar` update the `FilterableProductTable`'s state, you need to pass these functions down to `SearchBar`:
+
+```js {2,3,10,11}
+function FilterableProductTable({ products }) {
+  const [filterText, setFilterText] = useState('');
+  const [inStockOnly, setInStockOnly] = useState(false);
+
+  return (
+    <div>
+      <SearchBar 
+        filterText={filterText} 
+        inStockOnly={inStockOnly}
+        onFilterTextChange={setFilterText}
+        onInStockOnlyChange={setInStockOnly} />
+```
+
+Inside the `SearchBar`, you will add the `onChange` event handlers and set the parent state from them:
+
+```js {5}
+<input 
+  type="text" 
+  value={filterText} 
+  placeholder="Search..." 
+  onChange={(e) => onFilterTextChange(e.target.value)} />
+```
+
+Now the application fully works!
+
+<Sandpack>
+
+```jsx App.js
+import { useState } from 'react';
+
+function FilterableProductTable({ products }) {
+  const [filterText, setFilterText] = useState('');
+  const [inStockOnly, setInStockOnly] = useState(false);
+
+  return (
+    <div>
+      <SearchBar 
+        filterText={filterText} 
+        inStockOnly={inStockOnly} 
+        onFilterTextChange={setFilterText} 
+        onInStockOnlyChange={setInStockOnly} />
+      <ProductTable 
+        products={products} 
+        filterText={filterText}
+        inStockOnly={inStockOnly} />
+    </div>
+  );
+}
+
+function ProductCategoryRow({ category }) {
+  return (
+    <tr>
+      <th colSpan="2">
+        {category}
+      </th>
+    </tr>
+  );
+}
+
+function ProductRow({ product }) {
+  const name = product.stocked ? product.name :
+    <span style={{ color: 'red' }}>
+      {product.name}
+    </span>;
+
+  return (
+    <tr>
+      <td>{name}</td>
+      <td>{product.price}</td>
+    </tr>
+  );
+}
+
+function ProductTable({ products, filterText, inStockOnly }) {
+  const rows = [];
+  let lastCategory = null;
+
+  products.forEach((product) => {
+    if (
+      product.name.toLowerCase().indexOf(
+        filterText.toLowerCase()
+      ) === -1
+    ) {
+      return;
+    }
+    if (inStockOnly && !product.stocked) {
+      return;
+    }
+    if (product.category !== lastCategory) {
+      rows.push(
+        <ProductCategoryRow
+          category={product.category}
+          key={product.category} />
+      );
+    }
+    rows.push(
+      <ProductRow
+        product={product}
+        key={product.name} />
+    );
+    lastCategory = product.category;
+  });
+
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Price</th>
+        </tr>
+      </thead>
+      <tbody>{rows}</tbody>
+    </table>
+  );
+}
+
+function SearchBar({
+  filterText,
+  inStockOnly,
+  onFilterTextChange,
+  onInStockOnlyChange
+}) {
+  return (
+    <form>
+      <input 
+        type="text" 
+        value={filterText} placeholder="Search..." 
+        onChange={(e) => onFilterTextChange(e.target.value)} />
+      <label>
+        <input 
+          type="checkbox" 
+          checked={inStockOnly} 
+          onChange={(e) => onInStockOnlyChange(e.target.checked)} />
+        {' '}
+        Only show products in stock
+      </label>
+    </form>
+  );
+}
+
+const PRODUCTS = [
+  {category: "Fruits", price: "$1", stocked: true, name: "Apple"},
+  {category: "Fruits", price: "$1", stocked: true, name: "Dragonfruit"},
+  {category: "Fruits", price: "$2", stocked: false, name: "Passionfruit"},
+  {category: "Vegetables", price: "$2", stocked: true, name: "Spinach"},
+  {category: "Vegetables", price: "$4", stocked: false, name: "Pumpkin"},
+  {category: "Vegetables", price: "$1", stocked: true, name: "Peas"}
+];
+
+export default function App() {
+  return <FilterableProductTable products={PRODUCTS} />;
+}
+```
+
+```css
+body {
+  padding: 5px
+}
+label {
+  display: block;
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+th {
+  padding: 4px;
+}
+td {
+  padding: 2px;
+}
+```
+
+</Sandpack>
+
+You can learn all about handling events and updating state in the [Adding Interactivity](/learn/adding-interactivity) section.
+
+## Where to go from here {/*where-to-go-from-here*/}
+
+This was a very brief introduction to how to think about building components and applications with React. You can [start a React project](/learn/installation) right now or [dive deeper on all the syntax](/learn/describing-the-ui) used in this tutorial.
diff --git a/beta/src/content/learn/tutorial-tic-tac-toe.md b/beta/src/content/learn/tutorial-tic-tac-toe.md
new file mode 100644
index 000000000..4dcfddcdc
--- /dev/null
+++ b/beta/src/content/learn/tutorial-tic-tac-toe.md
@@ -0,0 +1,2918 @@
+---
+title: 'Tutorial: Tic-Tac-Toe'
+---
+
+<Intro>
+
+You will build a small tic-tac-toe game during this tutorial. This tutorial does not assume any existing React knowledge. The techniques you'll learn in the tutorial are fundamental to building any React app, and fully understanding it will give you a deep understanding of React.
+
+</Intro>
+
+<Note>
+
+This tutorial is designed for people who prefer to **learn by doing** and want to quickly try making something tangible. If you prefer learning each concept step by step, start with [Describing the UI.](/learn/describing-the-ui)
+
+</Note>
+
+The tutorial is divided into several sections:
+
+- [Setup for the tutorial](#setup-for-the-tutorial) will give you **a starting point** to follow the tutorial.
+- [Overview](#overview) will teach you **the fundamentals** of React: components, props, and state.
+- [Completing the game](#completing-the-game) will teach you **the most common techniques** in React development.
+- [Adding time travel](#adding-time-travel) will give you **a deeper insight** into the unique strengths of React.
+
+### What are you building? {/*what-are-you-building*/}
+
+In this tutorial, you'll build an interactive tic-tac-toe game with React.
+
+You can see what it will look like when you're finished here:
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+
+function Square({ value, onSquareClick }) {
+  return (
+    <button className="square" onClick={onSquareClick}>
+      {value}
+    </button>
+  );
+}
+
+function Board({ xIsNext, squares, onPlay }) {
+  function handleClick(i) {
+    if (calculateWinner(squares) || squares[i]) {
+      return;
+    }
+    const nextSquares = squares.slice();
+    if (xIsNext) {
+      nextSquares[i] = 'X';
+    } else {
+      nextSquares[i] = 'O';
+    }
+    onPlay(nextSquares);
+  }
+
+  const winner = calculateWinner(squares);
+  let status;
+  if (winner) {
+    status = 'Winner: ' + winner;
+  } else {
+    status = 'Next player: ' + (xIsNext ? 'X' : 'O');
+  }
+
+  return (
+    <>
+      <div className="status">{status}</div>
+      <div className="board-row">
+        <Square value={squares[0]} onSquareClick={() => handleClick(0)} />
+        <Square value={squares[1]} onSquareClick={() => handleClick(1)} />
+        <Square value={squares[2]} onSquareClick={() => handleClick(2)} />
+      </div>
+      <div className="board-row">
+        <Square value={squares[3]} onSquareClick={() => handleClick(3)} />
+        <Square value={squares[4]} onSquareClick={() => handleClick(4)} />
+        <Square value={squares[5]} onSquareClick={() => handleClick(5)} />
+      </div>
+      <div className="board-row">
+        <Square value={squares[6]} onSquareClick={() => handleClick(6)} />
+        <Square value={squares[7]} onSquareClick={() => handleClick(7)} />
+        <Square value={squares[8]} onSquareClick={() => handleClick(8)} />
+      </div>
+    </>
+  );
+}
+
+export default function Game() {
+  const [history, setHistory] = useState([Array(9).fill(null)]);
+  const [currentMove, setCurrentMove] = useState(0);
+  const xIsNext = currentMove % 2 === 0;
+  const currentSquares = history[currentMove];
+
+  function handlePlay(nextSquares) {
+    const nextHistory = [...history.slice(0, currentMove + 1), nextSquares];
+    setHistory(nextHistory);
+    setCurrentMove(nextHistory.length - 1);
+  }
+
+  function jumpTo(nextMove) {
+    setCurrentMove(nextMove);
+  }
+
+  const moves = history.map((squares, move) => {
+    let description;
+    if (move > 0) {
+      description = 'Go to move #' + move;
+    } else {
+      description = 'Go to game start';
+    }
+    return (
+      <li key={move}>
+        <button onClick={() => jumpTo(move)}>{description}</button>
+      </li>
+    );
+  });
+
+  return (
+    <div className="game">
+      <div className="game-board">
+        <Board xIsNext={xIsNext} squares={currentSquares} onPlay={handlePlay} />
+      </div>
+      <div className="game-info">
+        <ol>{moves}</ol>
+      </div>
+    </div>
+  );
+}
+
+function calculateWinner(squares) {
+  const lines = [
+    [0, 1, 2],
+    [3, 4, 5],
+    [6, 7, 8],
+    [0, 3, 6],
+    [1, 4, 7],
+    [2, 5, 8],
+    [0, 4, 8],
+    [2, 4, 6],
+  ];
+  for (let i = 0; i < lines.length; i++) {
+    const [a, b, c] = lines[i];
+    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
+      return squares[a];
+    }
+  }
+  return null;
+}
+```
+
+```css styles.css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  margin: 20px;
+  padding: 0;
+}
+
+.square {
+  background: #fff;
+  border: 1px solid #999;
+  float: left;
+  font-size: 24px;
+  font-weight: bold;
+  line-height: 34px;
+  height: 34px;
+  margin-right: -1px;
+  margin-top: -1px;
+  padding: 0;
+  text-align: center;
+  width: 34px;
+}
+
+.board-row:after {
+  clear: both;
+  content: '';
+  display: table;
+}
+
+.status {
+  margin-bottom: 10px;
+}
+.game {
+  display: flex;
+  flex-direction: row;
+}
+
+.game-info {
+  margin-left: 20px;
+}
+```
+
+</Sandpack>
+
+If the code doesn't make sense to you yet, or if you are unfamiliar with the code's syntax, don't worry! The goal of this tutorial is to help you understand React and its syntax.
+
+We recommend that you check out the tic-tac-toe game above before continuing with the tutorial. One of the features that you'll notice is that there is a numbered list to the right of the game's board. This list gives you a history of all of the moves that have occurred in the game, and it is updated as the game progresses.
+
+Once you've played around with the finished tic-tac-toe game, keep scrolling. You'll start with a simpler template in this tutorial. Our next step is to set you up so that you can start building the game.
+
+## Setup for the tutorial {/*setup-for-the-tutorial*/}
+
+In the live code editor below, click **Fork** in the top-right corner to open the editor in a new tab using the website CodeSandbox. CodeSandbox allows you to write code in your browser and immediately view how your users will see the app you've created. The new tab should display an empty square and the starter code for this tutorial.
+
+<Sandpack>
+
+```js App.js
+export default function Square() {
+  return <button className="square">X</button>;
+}
+```
+
+```css styles.css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  margin: 20px;
+  padding: 0;
+}
+
+.square {
+  background: #fff;
+  border: 1px solid #999;
+  float: left;
+  font-size: 24px;
+  font-weight: bold;
+  line-height: 34px;
+  height: 34px;
+  margin-right: -1px;
+  margin-top: -1px;
+  padding: 0;
+  text-align: center;
+  width: 34px;
+}
+
+.board-row:after {
+  clear: both;
+  content: '';
+  display: table;
+}
+
+.status {
+  margin-bottom: 10px;
+}
+.game {
+  display: flex;
+  flex-direction: row;
+}
+
+.game-info {
+  margin-left: 20px;
+}
+```
+
+</Sandpack>
+
+<Note>
+
+You can also follow this tutorial using your local development environment. To do this, you need to:
+
+1. Install [Node.js](https://nodejs.org/en/)
+1. In the CodeSandbox tab you opened earlier, press the top-left corner button to open the menu, and then choose **File > Export to ZIP** in that menu to download an archive of the files locally
+1. Unzip the archive, then open a terminal and `cd` to the directory you unzipped
+1. Install the dependencies with `npm install`
+1. Run `npm start` to start a local server and follow the prompts to view the code running in a browser
+
+If you get stuck, don't let this stop you! Follow along online instead and try a local setup again later.
+
+</Note>
+
+## Overview {/*overview*/}
+
+Now that you're set up, let's get an overview of React!
+
+### Inspecting the starter code {/*inspecting-the-starter-code*/}
+
+In CodeSandbox you'll see three main sections:
+
+![CodeSandbox with starter code](../images/tutorial/react-starter-code-codesandbox.png)
+
+1. The _Files_ section with a list of files like `App.js`, `index.js`, `styles.css` and a folder called `public`
+1. The _code editor_ where you'll see the source code of your selected file
+1. The _browser_ section where you'll see how the code you've written will be displayed
+
+The `App.js` file should be selected in the _Files_ section. The contents of that file in the _code editor_ should be:
+
+```jsx
+export default function Square() {
+  return <button className="square">X</button>;
+}
+```
+
+The _browser_ section should be displaying a square with a X in it like this:
+
+![x-filled square](../images/tutorial/x-filled-square.png)
+
+Now let's have a look at the files in the starter code.
+
+#### `App.js` {/*appjs*/}
+
+The code in `App.js` creates a _component_. In React, a component is a piece of reusable code that represents a part of a user interface. Components are used to render, manage, and update the UI elements in your application. Let's look at the component line by line to see what's going on:
+
+```js {1}
+export default function Square() {
+  return <button className="square">X</button>;
+}
+```
+
+The first line defines a function called `Square`. The `export` JavaScript keyword makes this function accessible outside of this file. The `default` keyword tells other files using your code that it's the main function in your file.
+
+```js {2}
+export default function Square() {
+  return <button className="square">X</button>;
+}
+```
+
+The second line returns a button. The `return` JavaScript keyword means whatever comes after is returned as a value to the caller of the function. `<button>` is a *JSX element*. A JSX element is a combination of JavaScript code and HTML tags that describes what you'd like to display. `className="square"` is a button property or *prop* that tells CSS how to style the button. `X` is the text displayed inside of the button and `</button>` closes the JSX element to indicate that any following content shouldn't be placed inside the button.
+
+#### `styles.css` {/*stylescss*/}
+
+Click on the file labeled `styles.css` in the _Files_ section of CodeSandbox. This file defines the styles for your React app. The first two _CSS selectors_ (`*` and `body`) define the style of large parts of your app while the `.square` selector defines the style of any component where the `className` property is set to `square`. In your code, that would match the button from your Square component in the `App.js` file.
+
+#### `index.js` {/*indexjs*/}
+
+Click on the file labeled `index.js` in the _Files_ section of CodeSandbox. You won't be editing this file during the tutorial but it is the bridge between the component you created in the `App.js` file and the web browser.
+
+```jsx
+import {StrictMode} from 'react';
+import {createRoot} from 'react-dom/client';
+import './styles.css';
+
+import App from './App';
+```
+
+Lines 1-5 brings all the necessary pieces together: 
+
+* React
+* React's library to talk to web browsers (React DOM)
+* the styles for your components
+* the component you created in `App.js`.
+
+The remainder of the file brings all the pieces together and injects the final product into `index.html` in the `public` folder.
+
+### Building the board {/*building-the-board*/}
+
+Let's get back to `App.js`. This is where you'll spend the rest of the tutorial.
+
+Currently the board is only a single square, but you need nine! If you just try and copy paste your square to make two squares like this:
+
+```js {2}
+export default function Square() {
+  return <button className="square">X</button><button className="square">X</button>;
+}
+```
+
+You'll get this error:
+
+<ConsoleBlock level="error">
+
+/src/App.js: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment `<>...</>`?
+
+</ConsoleBlock>
+
+React components need to return a single JSX element and not multiple adjacent JSX elements like two buttons. To fix this you can use *fragments* (`<>` and `</>`) to wrap multiple adjacent JSX elements like this:
+
+```js {3-6}
+export default function Square() {
+  return (
+    <>
+      <button className="square">X</button>
+      <button className="square">X</button>
+    </>
+  );
+}
+```
+
+Now you should see:
+
+![two x-filled squares](../images/tutorial/two-x-filled-squares.png)
+
+Great! Now you just need to copy-paste a few times to add nine squares and...
+
+![nine x-filled squares in a line](../images/tutorial/nine-x-filled-squares.png)
+
+Oh no! The squares are all in a single line, not in a grid like you need for our board. To fix this you'll need to group your squares into rows with `div`s and add some CSS classes. While you're at it, you'll give each square a number to make sure you know where each square is displayed.
+
+In the `App.js` file, update the `Square` component to look like this:
+
+```js {3-19}
+export default function Square() {
+  return (
+    <>
+      <div className="board-row">
+        <button className="square">1</button>
+        <button className="square">2</button>
+        <button className="square">3</button>
+      </div>
+      <div className="board-row">
+        <button className="square">4</button>
+        <button className="square">5</button>
+        <button className="square">6</button>
+      </div>
+      <div className="board-row">
+        <button className="square">7</button>
+        <button className="square">8</button>
+        <button className="square">9</button>
+      </div>
+    </>
+  );
+}
+```
+
+The CSS defined in `styles.css` styles the divs with the `className` of `board-row`. Now that you've grouped your components into rows with the styled `div`s you have your tic-tac-toe board:
+
+![tic-tac-toe board filled with numbers 1 through 9](../images/tutorial/number-filled-board.png)
+
+But you now have a problem. Your component named `Square`, really isn't a square anymore. Let's fix that by changing the name to `Board`:
+
+```js {1}
+export default function Board() {
+  //...
+}
+```
+
+At this point your code should look something like this:
+
+<Sandpack>
+
+```js
+export default function Board() {
+  return (
+    <>
+      <div className="board-row">
+        <button className="square">1</button>
+        <button className="square">2</button>
+        <button className="square">3</button>
+      </div>
+      <div className="board-row">
+        <button className="square">4</button>
+        <button className="square">5</button>
+        <button className="square">6</button>
+      </div>
+      <div className="board-row">
+        <button className="square">7</button>
+        <button className="square">8</button>
+        <button className="square">9</button>
+      </div>
+    </>
+  );
+}
+```
+
+```css styles.css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  margin: 20px;
+  padding: 0;
+}
+
+.square {
+  background: #fff;
+  border: 1px solid #999;
+  float: left;
+  font-size: 24px;
+  font-weight: bold;
+  line-height: 34px;
+  height: 34px;
+  margin-right: -1px;
+  margin-top: -1px;
+  padding: 0;
+  text-align: center;
+  width: 34px;
+}
+
+.board-row:after {
+  clear: both;
+  content: '';
+  display: table;
+}
+
+.status {
+  margin-bottom: 10px;
+}
+.game {
+  display: flex;
+  flex-direction: row;
+}
+
+.game-info {
+  margin-left: 20px;
+}
+```
+
+</Sandpack>
+
+<Note>
+
+Psssst... That's a lot to type! It's okay to copy and paste code from this page. However, if you're up for a little challenge, we recommend to only copy the code that you've manually typed at least once yourself.
+
+</Note>
+
+### Passing data through props {/*passing-data-through-props*/}
+
+Next, you'll want to change the value of a square from empty to "X" when the user clicks on the square. With how you've built the board so far you would need to copy-paste the code that updates the square nine times (once for each square you have)! Instead of copy-pasting, React's component architecture allows you to create a reusable component to avoid messy, duplicated code.
+
+First, you are going to copy the line defining your first square (`<button className="square">1</button>`) from your `Board` component into a new `Square` component:
+
+```js {1-3}
+function Square() {
+  return <button className="square">1</button>;
+}
+
+export default function Board() {
+  // ...
+}
+```
+
+Then you'll update the Board component to render that `Square` component using JSX syntax:
+
+```js {5-19}
+// ...
+export default function Board() {
+  return (
+    <>
+      <div className="board-row">
+        <Square />
+        <Square />
+        <Square />
+      </div>
+      <div className="board-row">
+        <Square />
+        <Square />
+        <Square />
+      </div>
+      <div className="board-row">
+        <Square />
+        <Square />
+        <Square />
+      </div>
+    </>
+  );
+}
+```
+
+Notice how unlike the browser `div`s, your own components `Board` and `Square` must start with a capital letter. 
+
+Let's take a look:
+
+![one-filled board](../images/tutorial/board-filled-with-ones.png)
+
+Oh no! You lost the numbered squares you had before. Now each square says "1". To fix this, you will use *props* to pass the value each square should have from the parent component (`Board`) to the child component (`Square`).
+
+Update the `Square` component to read the `value` prop that you'll pass from the `Board`:
+
+```js {1}
+function Square({ value }) {
+  return <button className="square">1</button>;
+}
+```
+
+`function Square({ value })` indicates the Square component can be passed a prop called `value`.
+
+Now you want to display that `value` instead of `1` inside every square. Try doing it like this:
+
+```js {2}
+function Square({ value }) {
+  return <button className="square">value</button>;
+}
+```
+
+Oops, this is not what you wanted:
+
+![value-filled board](../images/tutorial/board-filled-with-value.png)
+
+You wanted to render the JavaScript variable called `value` from your component, not the word "value". To "escape into JavaScript" from JSX, you need curly braces. Add curly braces around `value` in JSX like so:
+
+```js {2}
+function Square({ value }) {
+  return <button className="square">{value}</button>;
+}
+```
+
+For now, you should see a empty board:
+
+![empty board](../images/tutorial/empty-board.png)
+
+This is because the `Board` component hasn't passed the `value` prop to each `Square` component it renders yet. To fix it you'll add the `value` prop to each `Square` component rendered by the `Board` component:
+
+```js {5-7,10-12,15-17}
+export default function Board() {
+  return (
+    <>
+      <div className="board-row">
+        <Square value="1" />
+        <Square value="2" />
+        <Square value="3" />
+      </div>
+      <div className="board-row">
+        <Square value="4" />
+        <Square value="5" />
+        <Square value="6" />
+      </div>
+      <div className="board-row">
+        <Square value="7" />
+        <Square value="8" />
+        <Square value="9" />
+      </div>
+    </>
+  );
+}
+```
+
+Now you should see a grid of numbers again:
+
+![tic-tac-toe board filled with numbers 1 through 9](../images/tutorial/number-filled-board.png)
+
+Your updated code should look like this:
+
+<Sandpack>
+
+```js App.js
+function Square({ value }) {
+  return <button className="square">{value}</button>;
+}
+
+export default function Board() {
+  return (
+    <>
+      <div className="board-row">
+        <Square value="1" />
+        <Square value="2" />
+        <Square value="3" />
+      </div>
+      <div className="board-row">
+        <Square value="4" />
+        <Square value="5" />
+        <Square value="6" />
+      </div>
+      <div className="board-row">
+        <Square value="7" />
+        <Square value="8" />
+        <Square value="9" />
+      </div>
+    </>
+  );
+}
+```
+
+```css styles.css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  margin: 20px;
+  padding: 0;
+}
+
+.square {
+  background: #fff;
+  border: 1px solid #999;
+  float: left;
+  font-size: 24px;
+  font-weight: bold;
+  line-height: 34px;
+  height: 34px;
+  margin-right: -1px;
+  margin-top: -1px;
+  padding: 0;
+  text-align: center;
+  width: 34px;
+}
+
+.board-row:after {
+  clear: both;
+  content: '';
+  display: table;
+}
+
+.status {
+  margin-bottom: 10px;
+}
+.game {
+  display: flex;
+  flex-direction: row;
+}
+
+.game-info {
+  margin-left: 20px;
+}
+```
+
+</Sandpack>
+
+### Making an interactive component {/*making-an-interactive-component*/}
+
+Let's fill the `Square` component with an `X` when you click it. Declare a function called `handleClick` inside of the `Square`. Then, add `onClick` to the props of the button JSX element returned from the `Square` component:
+
+```js {2-4,9}
+function Square({ value }) {
+  function handleClick() {
+    console.log('clicked!');
+  }
+
+  return (
+    <button
+      className="square"
+      onClick={handleClick}
+    >
+      {value}
+    </button>
+  );
+}
+```
+
+If you click on a square now, you should see a log saying `"clicked!"` in the _Console_ tab at the bottom of the _Browser_ section in CodeSandbox. Clicking the square more than once will log `"clicked!"` again. Repeated console logs with the same message will not create more lines in the console. Instead, you will see an incrementing counter next to your first `"clicked!"` log.
+
+<Note>
+
+If you are following this tutorial using your local development environment, you need to open your browser's Console. For example, if you use the Chrome browser, you can view the Console with the keyboard shortcut **Shift + Ctrl + J** (on Windows/Linux) or **Option + ⌘ + J** (on macOS).
+
+</Note>
+
+As a next step, you want the Square component to "remember" that it got clicked, and fill it with an "X" mark. To "remember" things, components use *state*.
+
+React provides a special function called `useState` that you can call from your component to let it "remember" things. Let's store the current value of the `Square` in state, and change it when the `Square` is clicked.
+
+Import `useState` at the top of the file. Remove the `value` prop from the Square component. Instead, add a new line at the start of the `Square` component that calls `useState`. Have it return a state variable called `value`:
+
+```js {1,3,4}
+import { useState } from 'react';
+
+function Square() {
+  const [value, setValue] = useState(null);
+
+  function handleClick() {
+    //...
+```
+
+`value` stores the value and `setValue` is a function that can be used to change the value. The `null` passed to `useState` is used as the initial value for this state variable, so `value` here starts off equal to `null`.
+
+Since the `Square` component no longer accepts props anymore, you'll remove the `value` prop from all nine of the Square components created by the Board component:
+
+```js {6-8,11-13,16-18}
+// ...
+export default function Board() {
+  return (
+    <>
+      <div className="board-row">
+        <Square />
+        <Square />
+        <Square />
+      </div>
+      <div className="board-row">
+        <Square />
+        <Square />
+        <Square />
+      </div>
+      <div className="board-row">
+        <Square />
+        <Square />
+        <Square />
+      </div>
+    </>
+  );
+}
+```
+
+Now you'll change `Square` to display an "X" when clicked. Replace the `console.log("clicked!");` event handler with `setValue('X');`. Now your `Square` component looks like this:
+
+```js {5}
+function Square() {
+  const [value, setValue] = useState(null);
+
+  function handleClick() {
+    setValue('X');
+  }
+
+  return (
+    <button
+      className="square"
+      onClick={handleClick}
+    >
+      {value}
+    </button>
+  );
+}
+```
+
+By calling this `set` function from an `onClick` handler, you're telling React to re-render that `Square` whenever its `<button>` is clicked. After the update, the `Square`'s `value` will be `'X'`, so you'll see the "X" on the game board.
+
+If you click on any Square, an "X" should show up:
+
+![adding xes to board](../images/tutorial/tictac-adding-x-s.gif)
+
+Note that each Square has its own state: the `value` stored in each Square is completely independent of the others. When you call a `set` function in a component, React automatically updates the child components inside of it too.
+
+After you've made the above changes, your code will look like this:
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+
+function Square() {
+  const [value, setValue] = useState(null);
+
+  function handleClick() {
+    setValue('X');
+  }
+
+  return (
+    <button
+      className="square"
+      onClick={handleClick}
+    >
+      {value}
+    </button>
+  );
+}
+
+export default function Board() {
+  return (
+    <>
+      <div className="board-row">
+        <Square />
+        <Square />
+        <Square />
+      </div>
+      <div className="board-row">
+        <Square />
+        <Square />
+        <Square />
+      </div>
+      <div className="board-row">
+        <Square />
+        <Square />
+        <Square />
+      </div>
+    </>
+  );
+}
+```
+
+```css styles.css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  margin: 20px;
+  padding: 0;
+}
+
+.square {
+  background: #fff;
+  border: 1px solid #999;
+  float: left;
+  font-size: 24px;
+  font-weight: bold;
+  line-height: 34px;
+  height: 34px;
+  margin-right: -1px;
+  margin-top: -1px;
+  padding: 0;
+  text-align: center;
+  width: 34px;
+}
+
+.board-row:after {
+  clear: both;
+  content: '';
+  display: table;
+}
+
+.status {
+  margin-bottom: 10px;
+}
+.game {
+  display: flex;
+  flex-direction: row;
+}
+
+.game-info {
+  margin-left: 20px;
+}
+```
+
+</Sandpack>
+
+### React Developer Tools {/*react-developer-tools*/}
+
+React DevTools let you check the props and the state of your React components. You can find the React DevTools tab at the bottom of the _browser_ section in CodeSandbox:
+
+![React DevTools in CodeSandbox](../images/tutorial/codesandbox-devtools.png)
+
+To inspect a particular component on the screen, use the button in the top left corner of React DevTools:
+
+![Selecting components on the page with React DevTools](../images/tutorial/devtools-select.gif)
+
+<Note>
+
+For local development, React DevTools is available as a [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en), [Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/), and [Edge](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil) browser extension. After installing it, the *Components* tab will appear in your browser Developer Tools for sites using React.
+
+</Note>
+
+## Completing the game {/*completing-the-game*/}
+
+By this point, you have all the basic building blocks for your tic-tac-toe game. To have a complete game, you now need to alternate placing "X"s and "O"s on the board, and you need a way to determine a winner.
+
+### Lifting state up {/*lifting-state-up*/}
+
+Currently, each `Square` component maintains a part of the game's state. To check for a winner in a tic-tac-toe game, the `Board` would need to somehow know the state of each of the 9 `Square` components.
+
+How would you approach that? At first, you might guess that the `Board` needs to "ask" each `Square` for that `Square`'s state. Although this approach is technically possible in React, we discourage it because the code becomes difficult to understand, susceptible to bugs, and hard to refactor. Instead, the best approach is to store the game's state in the parent `Board` component instead of in each `Square`. The `Board` component can tell each `Square` what to display by passing a prop, like you did when you passed a number to each Square.
+
+**To collect data from multiple children, or to have two child components communicate with each other, declare the shared state in their parent component instead. The parent component can pass that state back down to the children via props. This keeps the child components in sync with each other and with the parent component.**
+
+Lifting state into a parent component is common when React components are refactored.
+
+Let's take this opportunity to try it out. Edit the `Board` component so that it declares a state variable named `squares` that defaults to an array of 9 nulls corresponding to the 9 squares:
+
+```js {3}
+// ...
+export default function Board() {
+  const [squares, setSquares] = useState(Array(9).fill(null));
+  return (
+    // ...
+  );
+}
+```
+
+`Array(9).fill(null)` creates an array with nine elements and sets each of them to `null`. The `useState()` call around it declares a `squares` state variable that's initially set to that array. Each entry in the array corresponds to the value of a square. When you fill the board in later, the `squares` array will look something like this:
+
+```jsx
+['O', null, 'X', 'X', 'X', 'O', 'O', null, null]
+```
+
+Now your `Board` component needs to pass the `value` prop down to each of the `Square` components it renders:
+
+```js {6-8,11-13,16-18}
+export default function Board() {
+  const [squares, setSquares] = useState(Array(9).fill(null));
+  return (
+    <>
+      <div className="board-row">
+        <Square value={squares[0]} />
+        <Square value={squares[1]} />
+        <Square value={squares[2]} />
+      </div>
+      <div className="board-row">
+        <Square value={squares[3]} />
+        <Square value={squares[4]} />
+        <Square value={squares[5]} />
+      </div>
+      <div className="board-row">
+        <Square value={squares[6]} />
+        <Square value={squares[7]} />
+        <Square value={squares[8]} />
+      </div>
+    </>
+  );
+}
+```
+
+Next, you'll edit the `Square` component to receive the `value` prop from the Board component. This will require removing the Square component's own stateful tracking of `value` and the button's `onClick` prop:
+
+```js {1,2}
+function Square({value}) {
+  return <button className="square">{value}</button>;
+}
+```
+
+At this point you should see a empty tic-tac-toe board:
+
+![empty board](../images/tutorial/empty-board.png)
+
+And you code should look like this:
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+
+function Square({ value }) {
+  return <button className="square">{value}</button>;
+}
+
+export default function Board() {
+  const [squares, setSquares] = useState(Array(9).fill(null));
+  return (
+    <>
+      <div className="board-row">
+        <Square value={squares[0]} />
+        <Square value={squares[1]} />
+        <Square value={squares[2]} />
+      </div>
+      <div className="board-row">
+        <Square value={squares[3]} />
+        <Square value={squares[4]} />
+        <Square value={squares[5]} />
+      </div>
+      <div className="board-row">
+        <Square value={squares[6]} />
+        <Square value={squares[7]} />
+        <Square value={squares[8]} />
+      </div>
+    </>
+  );
+}
+```
+
+```css styles.css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  margin: 20px;
+  padding: 0;
+}
+
+.square {
+  background: #fff;
+  border: 1px solid #999;
+  float: left;
+  font-size: 24px;
+  font-weight: bold;
+  line-height: 34px;
+  height: 34px;
+  margin-right: -1px;
+  margin-top: -1px;
+  padding: 0;
+  text-align: center;
+  width: 34px;
+}
+
+.board-row:after {
+  clear: both;
+  content: '';
+  display: table;
+}
+
+.status {
+  margin-bottom: 10px;
+}
+.game {
+  display: flex;
+  flex-direction: row;
+}
+
+.game-info {
+  margin-left: 20px;
+}
+```
+
+</Sandpack>
+
+Each Square will now receive a `value` prop that will either be `'X'`, `'O'`, or `null` for empty squares.
+
+Next, you need to change what happens when a `Square` is clicked. The `Board` component now maintains which squares are filled. You'll need to create a way for the `Square` to update the `Board`'s state. Since state is private to a component that defines it, you cannot update the `Board`'s state directly from `Square`.
+
+Instead, you'll pass down a function from the `Board` component to the `Square` component, and you'll have `Square` call that function when a square is clicked. You'll start with the function that the `Square` component will call when it is clicked. You'll call that function `onSquareClick`:
+
+```js {3}
+function Square({ value }) {
+  return (
+    <button className="square" onClick={onSquareClick}>
+      {value}
+    </button>
+  );
+}
+```
+
+Next, you'll add the `onSquareClick` function to the `Square` component's props:
+
+```js {1}
+function Square({ value, onSquareClick }) {
+  return (
+    <button className="square" onClick={onSquareClick}>
+      {value}
+    </button>
+  );
+}
+```
+
+Now you'll connect the `onSquareClick` prop to a function in the `Board` component that you'll name `handleClick`. To connect `onSquareClick` to `handleClick` you'll pass a function to the `onSquareClick` prop of the first `Square` component: 
+
+```js {7}
+export default function Board() {
+  const [squares, setSquares] = useState(Array(9).fill(null));
+
+  return (
+    <>
+      <div className="board-row">
+        <Square value={squares[0]} onSquareClick={handleClick} />
+        //...
+  );
+}
+```
+
+Lastly, you will define the `handleClick` function inside the Board component to update the `squares` array holding your board's state:
+
+```js {4-8}
+export default function Board() {
+  const [squares, setSquares] = useState(Array(9).fill(null));
+
+  function handleClick() {
+    const nextSquares = squares.slice();
+    nextSquares[0] = "X";
+    setSquares(nextSquares);
+  }
+
+  return (
+    // ...
+  )
+}
+```
+
+The `handleClick` function creates a copy of the `squares` array (`nextSquares`) with the JavaScript `slice()` Array method. Then, `handleClick` updates the `nextSquares` array to add `X` to the first (`[0]` index) square.
+
+Calling the `setSquares` function lets React know the state of the component has changed. This will trigger a re-render of the components that use the `squares` state (`Board`) as well as its child components (the `Square` components that make up the board).
+
+<Note>
+
+JavaScript supports [closures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) which means an inner function (e.g. `handleClick`) has access to variables and functions defined in a outer function (e.g. `Board`). The `handleClick` function can read the `squares` state and call the `setSquares` method because they are both defined inside of the `Board` function.
+
+</Note>
+
+Now you can add X's to the board...  but only to the upper left square. Your `handleClick` function is hardcoded to update the index for the upper left square (`0`). Let's update `handleClick` to be able to update any square. Add a argument `i` to the `handleClick` function that takes the index of the square that should be updated:
+
+```js {4,6}
+export default function Board() {
+  const [squares, setSquares] = useState(Array(9).fill(null));
+
+  function handleClick(i) {
+    const nextSquares = squares.slice();
+    nextSquares[i] = "X";
+    setSquares(nextSquares);
+  }
+
+  return (
+    // ...
+  )
+}
+```
+
+Now there is a new problem!
+
+Try setting the `onSquareClick` prop of square to be `handleClick(0)` directly in the JSX like this:
+
+```jsx
+<Square value={squares[0]} onSquareClick={handleClick(0)} />
+```
+
+The `handleClick(0)` call will be a part of rendering the board component. Because `handleClick(0)` alters the state of the board component by calling `setSquares`, your entire board component will be re-rendered again. But `handleClick(0)` is now a part of rendering of the board component, and so you've created an infinite loop:
+
+<ConsoleBlock level="error">
+
+Too many re-renders. React limits the number of renders to prevent an infinite loop.
+
+</ConsoleBlock>
+
+Why didn't this problem happen earlier?
+
+When you were passing `onSquareClick={handleClick}`, you were passing the `handleClick` function down as a prop. You were not calling it! But now you are *calling* that function right away--notice the parentheses in `handleClick(0)`--and that's why it runs too early. You don't *want* to call `handleClick` until the user clicks!
+
+To fix this, you could create a function like `handleFirstSquareClick` that calls `handleClick(0)`, a function like `handleSecondSquareClick` that calls `handleClick(1)`, and so on. Instead of calling them, you would pass these functions down as props like `onSquareClick={handleFirstSquareClick}`. This would solve the infinite loop.
+
+However, defining nine different functions and giving each of them a name is too verbose. Instead, let's do this:
+
+```js {6}
+export default function Board() {
+  // ...
+  return (
+    <>
+      <div className="board-row">
+        <Square value={squares[0]} onSquareClick={() => handleClick(0)} />
+        // ...
+  );
+}
+```
+
+Notice the new `() =>` syntax. Here, `() => handleClick(0)` is an *arrow function,* which is a shorter way to define functions. When the square is clicked, the code after the `=>` "arrow" will run, calling `handleClick(0)`.
+
+Now you need to update the other eight squares to call `handleClick` from the arrow functions you pass. Make sure that the argument for each call the `handleClick` corresponds to the index of the correct square:
+
+```js {6-8,11-13,16-18}
+export default function Board() {
+  // ...
+  return (
+    <>
+      <div className="board-row">
+        <Square value={squares[0]} onSquareClick={() => handleClick(0)} />
+        <Square value={squares[1]} onSquareClick={() => handleClick(1)} />
+        <Square value={squares[2]} onSquareClick={() => handleClick(2)} />
+      </div>
+      <div className="board-row">
+        <Square value={squares[3]} onSquareClick={() => handleClick(3)} />
+        <Square value={squares[4]} onSquareClick={() => handleClick(4)} />
+        <Square value={squares[5]} onSquareClick={() => handleClick(5)} />
+      </div>
+      <div className="board-row">
+        <Square value={squares[6]} onSquareClick={() => handleClick(6)} />
+        <Square value={squares[7]} onSquareClick={() => handleClick(7)} />
+        <Square value={squares[8]} onSquareClick={() => handleClick(8)} />
+      </div>
+    </>
+  );
+};
+```
+
+Now you can again add X's to any square on the board by clicking on them:
+
+![filling the board with X](../images/tutorial/tictac-adding-x-s.gif)
+
+But this time all the state management is handled by the `Board` component!
+
+This is what your code should look like:
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+
+function Square({ value, onSquareClick }) {
+  return (
+    <button className="square" onClick={onSquareClick}>
+      {value}
+    </button>
+  );
+}
+
+export default function Board() {
+  const [squares, setSquares] = useState(Array(9).fill(null));
+
+  function handleClick(i) {
+    const nextSquares = squares.slice();
+    nextSquares[i] = 'X';
+    setSquares(nextSquares);
+  }
+
+  return (
+    <>
+      <div className="board-row">
+        <Square value={squares[0]} onSquareClick={() => handleClick(0)} />
+        <Square value={squares[1]} onSquareClick={() => handleClick(1)} />
+        <Square value={squares[2]} onSquareClick={() => handleClick(2)} />
+      </div>
+      <div className="board-row">
+        <Square value={squares[3]} onSquareClick={() => handleClick(3)} />
+        <Square value={squares[4]} onSquareClick={() => handleClick(4)} />
+        <Square value={squares[5]} onSquareClick={() => handleClick(5)} />
+      </div>
+      <div className="board-row">
+        <Square value={squares[6]} onSquareClick={() => handleClick(6)} />
+        <Square value={squares[7]} onSquareClick={() => handleClick(7)} />
+        <Square value={squares[8]} onSquareClick={() => handleClick(8)} />
+      </div>
+    </>
+  );
+}
+```
+
+```css styles.css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  margin: 20px;
+  padding: 0;
+}
+
+.square {
+  background: #fff;
+  border: 1px solid #999;
+  float: left;
+  font-size: 24px;
+  font-weight: bold;
+  line-height: 34px;
+  height: 34px;
+  margin-right: -1px;
+  margin-top: -1px;
+  padding: 0;
+  text-align: center;
+  width: 34px;
+}
+
+.board-row:after {
+  clear: both;
+  content: '';
+  display: table;
+}
+
+.status {
+  margin-bottom: 10px;
+}
+.game {
+  display: flex;
+  flex-direction: row;
+}
+
+.game-info {
+  margin-left: 20px;
+}
+```
+
+</Sandpack>
+
+Now that your state handling is in the `Board` component, the parent `Board` component passes props to the child `Square` components so that they can be displayed correctly. When clicking on a `Square`, the child `Square` component now asks the parent `Board` component to update the state of the board. When the `Board`'s state changes, both the `Board` component and every child `Square` component re-renders automatically. Keeping the state of all squares in the `Board` component will allow it to determine the winner in the future.
+
+Let's recap what happens when a user clicks the top left square on your board to add an `X` to it:
+
+1. Clicking on the upper left square runs the function that the `button` received as its `onClick` prop from the `Square`. The `Square` component received that function as its `onSquareClick` prop from the `Board`. The `Board` component defined that function directly in the JSX. It calls `handleClick` with an argument of `0`.
+1. `handleClick` uses the argument (`0`) to update the first element of the `squares` array from `null` to `X`.
+1. The `squares` state of the `Board` component was updated, so the `Board` and all of its children re-render. This causes the `value` prop of the `Square` component with index `0` to change from `null` to `X`.
+
+In the end the user sees that the upper left square has changed from empty to having a `X` after clicking it.
+
+<Note>
+
+The DOM `<button>` element's `onClick` attribute has a special meaning to React because it is a built-in component. For custom components like Square, the naming is up to you. You could give any name to the `Square`'s `onSquareClick` prop or `Board`'s `handleClick` function, and the code would work the same. In React, it's conventional to use `on[Event]` names for props which represent events and `handle[Event]` for the function definitions which handle the events.
+
+</Note>
+
+### Why immutability is important {/*why-immutability-is-important*/}
+
+Note how in `handleClick`, you call `.slice()` to create a copy of the `squares` array instead of modifying the existing array. To explain why, we need to discuss immutability and why immutability is important to learn.
+
+There are generally two approaches to changing data. The first approach is to _mutate_ the data by directly changing the data's values. The second approach is to replace the data with a new copy which has the desired changes. Here is what it would look like if you mutated the `squares` array:
+
+```jsx
+const squares = [null, null, null, null, null, null, null, null, null];
+squares[0] = 'X';
+// Now `squares` is ["X", null, null, null, null, null, null, null, null];
+```
+
+And here is what it would look like if you changed data without mutating the `squares` array:
+
+```jsx
+const squares = [null, null, null, null, null, null, null, null, null];
+const nextSquares = ['X', null, null, null, null, null, null, null, null];
+// Now `squares` is unchanged, but `nextSquares` first element is 'X' rather than `null`
+```
+
+The end result is the same but by not mutating (changing the underlying data) directly, you gain several benefits.
+
+Immutability makes complex features much easier to implement. Later in this tutorial, you will implement a "time travel" feature that lets you review the game's history and "jump back" to past moves. This functionality isn't specific to games--an ability to undo and redo certain actions is a common requirement for apps. Avoiding direct data mutation lets you keep previous versions of the data intact, and reuse them (or reset to them) later.
+
+There is also another benefit of immutability. By default, all child components re-render automatically when the state of a parent component changes. This includes even the child components that weren't affected by the change. Although re-rendering is not by itself noticeable to the user (you shouldn't actively try to avoid it!), you might want to skip re-rendering a part of the tree that clearly wasn't affected by it for performance reasons. Immutability makes it very cheap for components to compare whether their data has changed or not. You can learn more about how React chooses when to re-render a component in [the `memo` API reference](/reference/react/memo) documentation.
+
+### Taking turns {/*taking-turns*/}
+
+It's now time to fix a major defect in this tic-tac-toe game: the "O"s cannot be marked on the board.
+
+You'll set the first move to be "X" by default. Let's keep track of this by adding another piece of state to the Board component:
+
+```js {2}
+function Board() {
+  const [xIsNext, setXIsNext] = useState(true);
+  const [squares, setSquares] = useState(Array(9).fill(null));
+
+  // ...
+}
+```
+
+Each time a player moves, `xIsNext` (a boolean) will be flipped to determine which player goes next and the game's state will be saved. You'll update the `Board`'s `handleClick` function to flip the value of `xIsNext`:
+
+```js {7,8,9,10,11,13}
+export default function Board() {
+  const [xIsNext, setXIsNext] = useState(true);
+  const [squares, setSquares] = useState(Array(9).fill(null));
+
+  function handleClick(i) {
+    const nextSquares = squares.slice();
+    if (xIsNext) {
+      nextSquares[i] = "X";
+    } else {
+      nextSquares[i] = "O";
+    }
+    setSquares(nextSquares);
+    setXIsNext(!xIsNext);
+  }
+
+  return (
+    //...
+  );
+}
+```
+
+Now, as you click on different squares, they will alternate between `X` and `O`, as they should!
+
+But wait, there's a problem. Try clicking on the same square multiple times:
+
+![O overwriting an X](../images/tutorial/o-replaces-x.gif)
+
+The `X` is overwritten by an `O`! While this would add a very interesting twist to the game, we're going to stick to the original rules for now.
+
+When you mark a square with a `X` or a `O` you aren't first checking to see if the square already has a `X` or `O` value. You can fix this by *returning early*. You'll check to see if the square already has a `X` or and `O`. If the square is already filled, you will `return` in the `handleClick` function early--before it tries to update the board state.
+
+```js {2,3,4}
+function handleClick(i) {
+  if (squares[i]) {
+    return;
+  }
+  const nextSquares = squares.slice();
+  //...
+}
+```
+
+Now you can only add `X`'s or `O`'s to empty squares! Here is what your code should look like at this point:
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+
+function Square({value, onSquareClick}) {
+  return (
+    <button className="square" onClick={onSquareClick}>
+      {value}
+    </button>
+  );
+}
+
+export default function Board() {
+  const [xIsNext, setXIsNext] = useState(true);
+  const [squares, setSquares] = useState(Array(9).fill(null));
+
+  function handleClick(i) {
+    if (squares[i]) {
+      return;
+    }
+    const nextSquares = squares.slice();
+    if (xIsNext) {
+      nextSquares[i] = 'X';
+    } else {
+      nextSquares[i] = 'O';
+    }
+    setSquares(nextSquares);
+    setXIsNext(!xIsNext);
+  }
+
+  return (
+    <>
+      <div className="board-row">
+        <Square value={squares[0]} onSquareClick={() => handleClick(0)} />
+        <Square value={squares[1]} onSquareClick={() => handleClick(1)} />
+        <Square value={squares[2]} onSquareClick={() => handleClick(2)} />
+      </div>
+      <div className="board-row">
+        <Square value={squares[3]} onSquareClick={() => handleClick(3)} />
+        <Square value={squares[4]} onSquareClick={() => handleClick(4)} />
+        <Square value={squares[5]} onSquareClick={() => handleClick(5)} />
+      </div>
+      <div className="board-row">
+        <Square value={squares[6]} onSquareClick={() => handleClick(6)} />
+        <Square value={squares[7]} onSquareClick={() => handleClick(7)} />
+        <Square value={squares[8]} onSquareClick={() => handleClick(8)} />
+      </div>
+    </>
+  );
+}
+```
+
+```css styles.css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  margin: 20px;
+  padding: 0;
+}
+
+.square {
+  background: #fff;
+  border: 1px solid #999;
+  float: left;
+  font-size: 24px;
+  font-weight: bold;
+  line-height: 34px;
+  height: 34px;
+  margin-right: -1px;
+  margin-top: -1px;
+  padding: 0;
+  text-align: center;
+  width: 34px;
+}
+
+.board-row:after {
+  clear: both;
+  content: '';
+  display: table;
+}
+
+.status {
+  margin-bottom: 10px;
+}
+.game {
+  display: flex;
+  flex-direction: row;
+}
+
+.game-info {
+  margin-left: 20px;
+}
+```
+
+</Sandpack>
+
+### Declaring a winner {/*declaring-a-winner*/}
+
+Now that you show which player's turn is next, you should also show when the game is won and there are no more turns to make. To do this you'll add a helper function called `calculateWinner` that takes an array of 9 squares, checks for a winner and returns `'X'`, `'O'`, or `null` as appropriate. Don't worry too much about the `calculateWinner` function; it's not specific to React:
+
+```js App.js
+export default function Board() {
+  //...
+}
+
+function calculateWinner(squares) {
+  const lines = [
+    [0, 1, 2],
+    [3, 4, 5],
+    [6, 7, 8],
+    [0, 3, 6],
+    [1, 4, 7],
+    [2, 5, 8],
+    [0, 4, 8],
+    [2, 4, 6]
+  ];
+  for (let i = 0; i < lines.length; i++) {
+    const [a, b, c] = lines[i];
+    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
+      return squares[a];
+    }
+  }
+  return null;
+}
+```
+
+<Note>
+
+It does not matter whether you define `calculateWinner` before or after the `Board`. Let's put it at the end so that you don't have to scroll past it every time you edit your components.
+
+</Note>
+
+You will call `calculateWinner(squares)` in the `Board` component's `handleClick` function to check if a player has won. You can perform this check at the same time you check if a user has clicked a square that already has a `X` or and `O`. We'd like to return early in both cases:
+
+```js {2}
+function handleClick(i) {
+  if (squares[i] || calculateWinner(squares)) {
+    return;
+  }
+  const nextSquares = squares.slice();
+  //...
+}
+```
+
+To let the players know when the game is over, you can display text such as "Winner: X" or "Winner: O". To do that you'll add a `status` section to the `Board` component. The status will display the winner if the game is over and if the game is ongoing you'll display which player's turn is next:
+
+```js {3-9,13}
+export default function Board() {
+  // ...
+  const winner = calculateWinner(squares);
+  let status;
+  if (winner) {
+    status = "Winner: " + winner;
+  } else {
+    status = "Next player: " + (xIsNext ? "X" : "O");
+  }
+
+  return (
+    <div>
+      <div className="status">{status}</div>
+      <div className="board-row">
+        // ...
+  )
+}
+```
+
+Congratulations! You now have a working tic-tac-toe game. And you've just learned the basics of React too. So _you_ are the real winner here. Here is what the code should look like:
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+
+function Square({value, onSquareClick}) {
+  return (
+    <button className="square" onClick={onSquareClick}>
+      {value}
+    </button>
+  );
+}
+
+export default function Board() {
+  const [xIsNext, setXIsNext] = useState(true);
+  const [squares, setSquares] = useState(Array(9).fill(null));
+
+  function handleClick(i) {
+    if (calculateWinner(squares) || squares[i]) {
+      return;
+    }
+    const nextSquares = squares.slice();
+    if (xIsNext) {
+      nextSquares[i] = 'X';
+    } else {
+      nextSquares[i] = 'O';
+    }
+    setSquares(nextSquares);
+    setXIsNext(!xIsNext);
+  }
+
+  const winner = calculateWinner(squares);
+  let status;
+  if (winner) {
+    status = 'Winner: ' + winner;
+  } else {
+    status = 'Next player: ' + (xIsNext ? 'X' : 'O');
+  }
+
+  return (
+    <>
+      <div className="status">{status}</div>
+      <div className="board-row">
+        <Square value={squares[0]} onSquareClick={() => handleClick(0)} />
+        <Square value={squares[1]} onSquareClick={() => handleClick(1)} />
+        <Square value={squares[2]} onSquareClick={() => handleClick(2)} />
+      </div>
+      <div className="board-row">
+        <Square value={squares[3]} onSquareClick={() => handleClick(3)} />
+        <Square value={squares[4]} onSquareClick={() => handleClick(4)} />
+        <Square value={squares[5]} onSquareClick={() => handleClick(5)} />
+      </div>
+      <div className="board-row">
+        <Square value={squares[6]} onSquareClick={() => handleClick(6)} />
+        <Square value={squares[7]} onSquareClick={() => handleClick(7)} />
+        <Square value={squares[8]} onSquareClick={() => handleClick(8)} />
+      </div>
+    </>
+  );
+}
+
+function calculateWinner(squares) {
+  const lines = [
+    [0, 1, 2],
+    [3, 4, 5],
+    [6, 7, 8],
+    [0, 3, 6],
+    [1, 4, 7],
+    [2, 5, 8],
+    [0, 4, 8],
+    [2, 4, 6],
+  ];
+  for (let i = 0; i < lines.length; i++) {
+    const [a, b, c] = lines[i];
+    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
+      return squares[a];
+    }
+  }
+  return null;
+}
+```
+
+```css styles.css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  margin: 20px;
+  padding: 0;
+}
+
+.square {
+  background: #fff;
+  border: 1px solid #999;
+  float: left;
+  font-size: 24px;
+  font-weight: bold;
+  line-height: 34px;
+  height: 34px;
+  margin-right: -1px;
+  margin-top: -1px;
+  padding: 0;
+  text-align: center;
+  width: 34px;
+}
+
+.board-row:after {
+  clear: both;
+  content: '';
+  display: table;
+}
+
+.status {
+  margin-bottom: 10px;
+}
+.game {
+  display: flex;
+  flex-direction: row;
+}
+
+.game-info {
+  margin-left: 20px;
+}
+```
+
+</Sandpack>
+
+## Adding time travel {/*adding-time-travel*/}
+
+As a final exercise, let's make it possible to "go back in time" to the previous moves in the game.
+
+### Storing a history of moves {/*storing-a-history-of-moves*/}
+
+If you mutated the `squares` array, implementing time travel would be very difficult.
+
+However, you used `slice()` to create a new copy of the `squares` array after every move, and treated it as immutable. This will allow you to store every past version of the `squares` array, and navigate between the turns that have already happened.
+
+You'll store the past `squares` arrays in another array called `history`, which you'll store as a new state variable. The `history` array represents all board states, from the first to the last move, and has a shape like this:
+
+```jsx
+[
+  // Before first move
+  [null, null, null, null, null, null, null, null, null],
+  // After first move
+  [null, null, null, null, 'X', null, null, null, null],
+  // After second move
+  [null, null, null, null, 'X', null, null, null, 'O'],
+  // ...
+]
+```
+
+### Lifting state up, again {/*lifting-state-up-again*/}
+
+You will now write a new top-level component called `Game` to display a list of past moves. That's where you will place the `history` state that contains the entire game history.
+
+Placing the `history` state into the `Game` component will let you remove the `squares` state from its child `Board` component. Just like you "lifted state up" from the `Square` component into the `Board` component, you will now lift it up from the `Board` into the top-level `Game` component. This gives the `Game` component full control over the `Board`'s data and lets it instruct the `Board` to render previous turns from the `history`.
+
+First, add a `Game` component with `export default`. Have it render the `Board` component inside some markup:
+
+```js {1,5-16}
+function Board() {
+  // ...
+}
+
+export default function Game() {
+  return (
+    <div className="game">
+      <div className="game-board">
+        <Board />
+      </div>
+      <div className="game-info">
+        <ol>{/*TODO*/}</ol>
+      </div>
+    </div>
+  );
+}
+```
+
+Note that you are removing the `export default` keywords before the `function Board() {` declaration and adding them before the `function Game() {` declaration. This tells your `index.js` file to use the `Game` component as the top-level component instead of your `Board` component. The additional `div`s returned by the `Game` component are making room for the game information you'll add to the board later.
+
+Add some state to the `Game` component to track which player is next and the history of moves:
+
+```js {2-3}
+export default function Game() {
+  const [xIsNext, setXIsNext] = useState(true);
+  const [history, setHistory] = useState([Array(9).fill(null)]);
+  // ...
+```
+
+Notice how `[Array(9).fill(null)]` is an array with a single item, which itself is an array of 9 `null`s.
+
+To render the squares for the current move, you'll want to read the last squares array from the `history`. You don't need `useState` for this--you already have enough information to calculate it during rendering:
+
+```js {4}
+export default function Game() {
+  const [xIsNext, setXIsNext] = useState(true);
+  const [history, setHistory] = useState([Array(9).fill(null)]);
+  const currentSquares = history[history.length - 1];
+  // ...
+```
+
+Next, create a `handlePlay` function inside the `Game` component that will be called by the `Board` component to update the game. Pass `xIsNext`, `currentSquares` and `handlePlay` as props to the `Board` component:
+
+```js {6-8,13}
+export default function Game() {
+  const [xIsNext, setXIsNext] = useState(true);
+  const [history, setHistory] = useState([Array(9).fill(null)]);
+  const currentSquares = history[history.length - 1];
+
+  function handlePlay(nextSquares) {
+    // TODO
+  }
+
+  return (
+    <div className="game">
+      <div className="game-board">
+        <Board xIsNext={xIsNext} squares={currentSquares} onPlay={handlePlay} />
+        //...
+  )
+}
+```
+
+Let's make the `Board` component fully controlled by the props it receives. Change the `Board` component to take three props: `xIsNext`, `squares`, and a new `onPlay` function that `Board` can call with the updated squares array whenever a player makes a move. Next, remove the first two lines of the `Board` function that call `useState`:
+
+```js {1}
+function Board({ xIsNext, squares, onPlay }) {
+  function handleClick(i) {
+    //...
+  }
+  // ...
+}
+```
+
+Now you'll replace the `setSquares` and `setXIsNext` calls in `handleClick` in the `Board` component with a single call to your new `onPlay` function so the `Game` component can update the `Board` when the user clicks a square:
+
+```js {12}
+function Board({ xIsNext, squares, onPlay }) {
+  function handleClick(i) {
+    if (calculateWinner(squares) || squares[i]) {
+      return;
+    }
+    const nextSquares = squares.slice();
+    if (xIsNext) {
+      nextSquares[i] = "X";
+    } else {
+      nextSquares[i] = "O";
+    }
+    onPlay(nextSquares);
+  }
+  //...
+}
+```
+
+The `Board` component is fully controlled by the props passed to it by the `Game` component. You need to implement the `handlePlay` function in the `Game` component to get the game working again.
+
+What should `handlePlay` do when called? Remember that Board used to call `setSquares` with an updated array; now it passes the updated `squares` array to `onPlay`.
+
+The `handlePlay` function needs to update `Game`'s state to trigger a re-render, but you don't have a `setSquares` function that you can call any more--you're now using the `history` state variable to store this information. You'll want to update `history` by appending the updated `squares` array as a new history entry. You also want to toggle `xIsNext`, just as Board used to do:
+
+```js {4-5}
+export default function Game() {
+  //...
+  function handlePlay(nextSquares) {
+    setHistory([...history, nextSquares]);
+    setXIsNext(!xIsNext);
+  }
+  //...
+}
+```
+
+Here, `[...history, nextSquares]` creates a new array that contains all the items in `history`, followed by `nextSquares`. (You can read the `...history` [*spread syntax*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) as "enumerate all the items in `history`".)
+
+For example, if `history` is `[[null,null,null], ["X",null,null]]` and `nextSquares` is `["X",null,"O"]`, then the new `[...history, nextSquares]` array will be `[[null,null,null], ["X",null,null], ["X",null,"O"]]`.
+
+At this point, you've moved the state to live in the `Game` component, and the UI should be fully working, just as it was before the refactor. Here is what the code should look like at this point:
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+
+function Square({ value, onSquareClick }) {
+  return (
+    <button className="square" onClick={onSquareClick}>
+      {value}
+    </button>
+  );
+}
+
+function Board({ xIsNext, squares, onPlay }) {
+  function handleClick(i) {
+    if (calculateWinner(squares) || squares[i]) {
+      return;
+    }
+    const nextSquares = squares.slice();
+    if (xIsNext) {
+      nextSquares[i] = 'X';
+    } else {
+      nextSquares[i] = 'O';
+    }
+    onPlay(nextSquares);
+  }
+
+  const winner = calculateWinner(squares);
+  let status;
+  if (winner) {
+    status = 'Winner: ' + winner;
+  } else {
+    status = 'Next player: ' + (xIsNext ? 'X' : 'O');
+  }
+
+  return (
+    <>
+      <div className="status">{status}</div>
+      <div className="board-row">
+        <Square value={squares[0]} onSquareClick={() => handleClick(0)} />
+        <Square value={squares[1]} onSquareClick={() => handleClick(1)} />
+        <Square value={squares[2]} onSquareClick={() => handleClick(2)} />
+      </div>
+      <div className="board-row">
+        <Square value={squares[3]} onSquareClick={() => handleClick(3)} />
+        <Square value={squares[4]} onSquareClick={() => handleClick(4)} />
+        <Square value={squares[5]} onSquareClick={() => handleClick(5)} />
+      </div>
+      <div className="board-row">
+        <Square value={squares[6]} onSquareClick={() => handleClick(6)} />
+        <Square value={squares[7]} onSquareClick={() => handleClick(7)} />
+        <Square value={squares[8]} onSquareClick={() => handleClick(8)} />
+      </div>
+    </>
+  );
+}
+
+export default function Game() {
+  const [xIsNext, setXIsNext] = useState(true);
+  const [history, setHistory] = useState([Array(9).fill(null)]);
+  const currentSquares = history[history.length - 1];
+
+  function handlePlay(nextSquares) {
+    setHistory([...history, nextSquares]);
+    setXIsNext(!xIsNext);
+  }
+
+  return (
+    <div className="game">
+      <div className="game-board">
+        <Board xIsNext={xIsNext} squares={currentSquares} onPlay={handlePlay} />
+      </div>
+      <div className="game-info">
+        <ol>{/*TODO*/}</ol>
+      </div>
+    </div>
+  );
+}
+
+function calculateWinner(squares) {
+  const lines = [
+    [0, 1, 2],
+    [3, 4, 5],
+    [6, 7, 8],
+    [0, 3, 6],
+    [1, 4, 7],
+    [2, 5, 8],
+    [0, 4, 8],
+    [2, 4, 6],
+  ];
+  for (let i = 0; i < lines.length; i++) {
+    const [a, b, c] = lines[i];
+    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
+      return squares[a];
+    }
+  }
+  return null;
+}
+```
+
+```css styles.css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  margin: 20px;
+  padding: 0;
+}
+
+.square {
+  background: #fff;
+  border: 1px solid #999;
+  float: left;
+  font-size: 24px;
+  font-weight: bold;
+  line-height: 34px;
+  height: 34px;
+  margin-right: -1px;
+  margin-top: -1px;
+  padding: 0;
+  text-align: center;
+  width: 34px;
+}
+
+.board-row:after {
+  clear: both;
+  content: '';
+  display: table;
+}
+
+.status {
+  margin-bottom: 10px;
+}
+.game {
+  display: flex;
+  flex-direction: row;
+}
+
+.game-info {
+  margin-left: 20px;
+}
+```
+
+</Sandpack>
+
+### Showing the past moves {/*showing-the-past-moves*/}
+
+Since you are recording the tic-tac-toe game's history, you can now display it to the player as a list of past moves.
+
+React elements like `<button>` are regular JavaScript objects; you can pass them around in your application. To render multiple items in React, you can use an array of React elements.
+
+You already have an array of `history` moves in state, so now you need to transform it to an array of React elements. In JavaScript, to transform one array into another, you can use the [array `map` method:](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)
+
+```jsx
+[1, 2, 3].map((x) => x * 2) // [2, 4, 6]
+```
+
+You'll use `map` to transform your `history` of moves into React elements representing buttons on the screen, and you'll display a list of buttons to "jump" to past moves. Let's `map` over the `history` in the Game component:
+
+```js {11-13,15-27,35}
+export default function Game() {
+  const [xIsNext, setXIsNext] = useState(true);
+  const [history, setHistory] = useState([Array(9).fill(null)]);
+  const currentSquares = history[history.length - 1];
+
+  function handlePlay(nextSquares) {
+    setHistory([...history, nextSquares]);
+    setXIsNext(!xIsNext);
+  }
+
+  function jumpTo(nextMove) {
+    // TODO
+  }
+
+  const moves = history.map((squares, move) => {
+    let description;
+    if (move > 0) {
+      description = 'Go to move #' + move;
+    } else {
+      description = 'Go to game start';
+    }
+    return (
+      <li>
+        <button onClick={() => jumpTo(move)}>{description}</button>
+      </li>
+    );
+  });
+
+  return (
+    <div className="game">
+      <div className="game-board">
+        <Board xIsNext={xIsNext} squares={currentSquares} onPlay={handlePlay} />
+      </div>
+      <div className="game-info">
+        <ol>{moves}</ol>
+      </div>
+    </div>
+  );
+}
+```
+
+You can see what your code should look like below. Note that you should see an error in the developer tools console that says: ``Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `Game`.`` You'll fix this error in the next section.
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+
+function Square({ value, onSquareClick }) {
+  return (
+    <button className="square" onClick={onSquareClick}>
+      {value}
+    </button>
+  );
+}
+
+function Board({ xIsNext, squares, onPlay }) {
+  function handleClick(i) {
+    if (calculateWinner(squares) || squares[i]) {
+      return;
+    }
+    const nextSquares = squares.slice();
+    if (xIsNext) {
+      nextSquares[i] = 'X';
+    } else {
+      nextSquares[i] = 'O';
+    }
+    onPlay(nextSquares);
+  }
+
+  const winner = calculateWinner(squares);
+  let status;
+  if (winner) {
+    status = 'Winner: ' + winner;
+  } else {
+    status = 'Next player: ' + (xIsNext ? 'X' : 'O');
+  }
+
+  return (
+    <>
+      <div className="status">{status}</div>
+      <div className="board-row">
+        <Square value={squares[0]} onSquareClick={() => handleClick(0)} />
+        <Square value={squares[1]} onSquareClick={() => handleClick(1)} />
+        <Square value={squares[2]} onSquareClick={() => handleClick(2)} />
+      </div>
+      <div className="board-row">
+        <Square value={squares[3]} onSquareClick={() => handleClick(3)} />
+        <Square value={squares[4]} onSquareClick={() => handleClick(4)} />
+        <Square value={squares[5]} onSquareClick={() => handleClick(5)} />
+      </div>
+      <div className="board-row">
+        <Square value={squares[6]} onSquareClick={() => handleClick(6)} />
+        <Square value={squares[7]} onSquareClick={() => handleClick(7)} />
+        <Square value={squares[8]} onSquareClick={() => handleClick(8)} />
+      </div>
+    </>
+  );
+}
+
+export default function Game() {
+  const [xIsNext, setXIsNext] = useState(true);
+  const [history, setHistory] = useState([Array(9).fill(null)]);
+  const currentSquares = history[history.length - 1];
+
+  function handlePlay(nextSquares) {
+    setHistory([...history, nextSquares]);
+    setXIsNext(!xIsNext);
+  }
+
+  function jumpTo(nextMove) {
+    // TODO
+  }
+
+  const moves = history.map((squares, move) => {
+    let description;
+    if (move > 0) {
+      description = 'Go to move #' + move;
+    } else {
+      description = 'Go to game start';
+    }
+    return (
+      <li>
+        <button onClick={() => jumpTo(move)}>{description}</button>
+      </li>
+    );
+  });
+
+  return (
+    <div className="game">
+      <div className="game-board">
+        <Board xIsNext={xIsNext} squares={currentSquares} onPlay={handlePlay} />
+      </div>
+      <div className="game-info">
+        <ol>{moves}</ol>
+      </div>
+    </div>
+  );
+}
+
+function calculateWinner(squares) {
+  const lines = [
+    [0, 1, 2],
+    [3, 4, 5],
+    [6, 7, 8],
+    [0, 3, 6],
+    [1, 4, 7],
+    [2, 5, 8],
+    [0, 4, 8],
+    [2, 4, 6],
+  ];
+  for (let i = 0; i < lines.length; i++) {
+    const [a, b, c] = lines[i];
+    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
+      return squares[a];
+    }
+  }
+  return null;
+}
+```
+
+```css styles.css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  margin: 20px;
+  padding: 0;
+}
+
+.square {
+  background: #fff;
+  border: 1px solid #999;
+  float: left;
+  font-size: 24px;
+  font-weight: bold;
+  line-height: 34px;
+  height: 34px;
+  margin-right: -1px;
+  margin-top: -1px;
+  padding: 0;
+  text-align: center;
+  width: 34px;
+}
+
+.board-row:after {
+  clear: both;
+  content: '';
+  display: table;
+}
+
+.status {
+  margin-bottom: 10px;
+}
+
+.game {
+  display: flex;
+  flex-direction: row;
+}
+
+.game-info {
+  margin-left: 20px;
+}
+```
+
+</Sandpack>
+
+As you iterate through `history` array inside the function you passed to `map`, the `squares` argument goes through each element of `history`, and the `move` argument goes through each array index: `0`, `1`, `2`, …. (In most cases, you'd need the actual array elements, but in this case you don't use `squares` to render a list of moves.)
+
+For each move in the tic-tac-toe game's history, you create a list item `<li>` which contains a button `<button>`. The button has a `onClick` handler which calls a function called `jumpTo` (that you haven't implemented yet).
+
+For now, you should see a list of the moves that occurred in the game and an error in the developer tools console.
+
+Let's discuss what the "key" error means.
+
+### Picking a key {/*picking-a-key*/}
+
+When you render a list, React stores some information about each rendered list item. When you update a list, React needs to determine what has changed. You could have added, removed, re-arranged, or updated the list's items.
+
+Imagine transitioning from
+
+```html
+<li>Alexa: 7 tasks left</li>
+<li>Ben: 5 tasks left</li>
+```
+
+to
+
+```html
+<li>Ben: 9 tasks left</li>
+<li>Claudia: 8 tasks left</li>
+<li>Alexa: 5 tasks left</li>
+```
+
+In addition to the updated counts, a human reading this would probably say that you swapped Alexa and Ben's ordering and inserted Claudia between Alexa and Ben. However, React is a computer program and can't know what you intended, so you need to specify a _key_ property for each list item to differentiate each list item from its siblings. If you were displaying data from a database, Alexa, Ben, and Claudia's database IDs could be used as keys.
+
+```js {1}
+<li key={user.id}>
+  {user.name}: {user.taskCount} tasks left
+</li>
+```
+
+When a list is re-rendered, React takes each list item's key and searches the previous list's items for a matching key. If the current list has a key that didn't exist before, React creates a component. If the current list is missing a key that existed in the previous list, React destroys the previous component. If two keys match, the corresponding component is moved.
+
+Keys tell React about the identity of each component, which allows React to maintain state between re-renders. If a component's key changes, the component will be destroyed and re-created with a new state.
+
+`key` is a special and reserved property in React. When an element is created, React extracts the `key` property and stores the key directly on the returned element. Even though `key` may look like it is passed as props, React automatically uses `key` to decide which components to update. There's no way for a component to ask what `key` its parent specified.
+
+**It's strongly recommended that you assign proper keys whenever you build dynamic lists.** If you don't have an appropriate key, you may want to consider restructuring your data so that you do.
+
+If no key is specified, React will report an error and use the array index as a key by default. Using the array index as a key is problematic when trying to re-order a list's items or inserting/removing list items. Explicitly passing `key={i}` silences the error but has the same problems as array indices and is not recommended in most cases.
+
+Keys do not need to be globally unique; they only need to be unique between components and their siblings.
+
+### Implementing time travel {/*implementing-time-travel*/}
+
+In the tic-tac-toe game's history, each past move has a unique ID associated with it: it's the sequential number of the move. Moves will never be re-ordered, deleted, or inserted in the middle, so it's safe to use the move index as a key.
+
+In the `Game` function, you can add the key as `<li key={move}>`, and if you reload the rendered game, React's "key" error should disappear:
+
+```js {4}
+const moves = history.map((squares, move) => {
+  //...
+  return (
+    <li key={move}>
+      <button onClick={() => jumpTo(move)}>{description}</button>
+    </li>
+  );
+});
+```
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+
+function Square({ value, onSquareClick }) {
+  return (
+    <button className="square" onClick={onSquareClick}>
+      {value}
+    </button>
+  );
+}
+
+function Board({ xIsNext, squares, onPlay }) {
+  function handleClick(i) {
+    if (calculateWinner(squares) || squares[i]) {
+      return;
+    }
+    const nextSquares = squares.slice();
+    if (xIsNext) {
+      nextSquares[i] = 'X';
+    } else {
+      nextSquares[i] = 'O';
+    }
+    onPlay(nextSquares);
+  }
+
+  const winner = calculateWinner(squares);
+  let status;
+  if (winner) {
+    status = 'Winner: ' + winner;
+  } else {
+    status = 'Next player: ' + (xIsNext ? 'X' : 'O');
+  }
+
+  return (
+    <>
+      <div className="status">{status}</div>
+      <div className="board-row">
+        <Square value={squares[0]} onSquareClick={() => handleClick(0)} />
+        <Square value={squares[1]} onSquareClick={() => handleClick(1)} />
+        <Square value={squares[2]} onSquareClick={() => handleClick(2)} />
+      </div>
+      <div className="board-row">
+        <Square value={squares[3]} onSquareClick={() => handleClick(3)} />
+        <Square value={squares[4]} onSquareClick={() => handleClick(4)} />
+        <Square value={squares[5]} onSquareClick={() => handleClick(5)} />
+      </div>
+      <div className="board-row">
+        <Square value={squares[6]} onSquareClick={() => handleClick(6)} />
+        <Square value={squares[7]} onSquareClick={() => handleClick(7)} />
+        <Square value={squares[8]} onSquareClick={() => handleClick(8)} />
+      </div>
+    </>
+  );
+}
+
+export default function Game() {
+  const [xIsNext, setXIsNext] = useState(true);
+  const [history, setHistory] = useState([Array(9).fill(null)]);
+  const currentSquares = history[history.length - 1];
+
+  function handlePlay(nextSquares) {
+    setHistory([...history, nextSquares]);
+    setXIsNext(!xIsNext);
+  }
+
+  function jumpTo(nextMove) {
+    // TODO
+  }
+
+  const moves = history.map((squares, move) => {
+    let description;
+    if (move > 0) {
+      description = 'Go to move #' + move;
+    } else {
+      description = 'Go to game start';
+    }
+    return (
+      <li key={move}>
+        <button onClick={() => jumpTo(move)}>{description}</button>
+      </li>
+    );
+  });
+
+  return (
+    <div className="game">
+      <div className="game-board">
+        <Board xIsNext={xIsNext} squares={currentSquares} onPlay={handlePlay} />
+      </div>
+      <div className="game-info">
+        <ol>{moves}</ol>
+      </div>
+    </div>
+  );
+}
+
+function calculateWinner(squares) {
+  const lines = [
+    [0, 1, 2],
+    [3, 4, 5],
+    [6, 7, 8],
+    [0, 3, 6],
+    [1, 4, 7],
+    [2, 5, 8],
+    [0, 4, 8],
+    [2, 4, 6],
+  ];
+  for (let i = 0; i < lines.length; i++) {
+    const [a, b, c] = lines[i];
+    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
+      return squares[a];
+    }
+  }
+  return null;
+}
+
+```
+
+```css styles.css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  margin: 20px;
+  padding: 0;
+}
+
+.square {
+  background: #fff;
+  border: 1px solid #999;
+  float: left;
+  font-size: 24px;
+  font-weight: bold;
+  line-height: 34px;
+  height: 34px;
+  margin-right: -1px;
+  margin-top: -1px;
+  padding: 0;
+  text-align: center;
+  width: 34px;
+}
+
+.board-row:after {
+  clear: both;
+  content: '';
+  display: table;
+}
+
+.status {
+  margin-bottom: 10px;
+}
+
+.game {
+  display: flex;
+  flex-direction: row;
+}
+
+.game-info {
+  margin-left: 20px;
+}
+```
+
+</Sandpack>
+
+Before you can implement `jumpTo`, you need the `Game` component to keep track of which step the user is currently viewing. To do this, define a new state variable called `currentMove`, defaulting to `0`:
+
+```js {4}
+export default function Game() {
+  const [xIsNext, setXIsNext] = useState(true);
+  const [history, setHistory] = useState([Array(9).fill(null)]);
+  const [currentMove, setCurrentMove] = useState(0);
+  const currentSquares = history[history.length - 1];
+  //...
+}
+```
+
+Next, update the `jumpTo` function inside `Game` to update that `currentMove`. You'll also set `xIsNext` to `true` if the number that you're changing `currentMove` to is even.
+
+```js {4-5}
+export default function Game() {
+  // ...
+  function jumpTo(nextMove) {
+    setCurrentMove(nextMove);
+    setXIsNext(nextMove % 2 === 0);
+  }
+  //...
+}
+```
+
+You will now make two changes to the `Game`'s `handlePlay` function which is called when you click on a square.
+
+- If you "go back in time" and then make a new move from that point, you only want to keep the history up to that point. Instead of adding `nextSquares` after all items (`...` spread syntax) in `history`, you'll add it after all items in `history.slice(0, currentMove + 1)` so that you're only keeping that portion of the old history.
+- Each time a move is made, you need to update `currentMove` to point to the latest history entry.
+
+```js {2-4}
+function handlePlay(nextSquares) {
+  const nextHistory = [...history.slice(0, currentMove + 1), nextSquares];
+  setHistory(nextHistory);
+  setCurrentMove(nextHistory.length - 1);
+  setXIsNext(!xIsNext);
+}
+```
+
+Finally, you will modify the `Game` component to render the currently selected move, instead of always rendering the final move:
+
+```js {5}
+export default function Game() {
+  const [xIsNext, setXIsNext] = useState(true);
+  const [history, setHistory] = useState([Array(9).fill(null)]);
+  const [currentMove, setCurrentMove] = useState(0);
+  const currentSquares = history[currentMove];
+
+  // ...
+}
+```
+
+If you click on any step in the game's history, the tic-tac-toe board should immediately update to show what the board looked like after that step occurred.
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+
+function Square({value, onSquareClick}) {
+  return (
+    <button className="square" onClick={onSquareClick}>
+      {value}
+    </button>
+  );
+}
+
+function Board({ xIsNext, squares, onPlay }) {
+  function handleClick(i) {
+    if (calculateWinner(squares) || squares[i]) {
+      return;
+    }
+    const nextSquares = squares.slice();
+    if (xIsNext) {
+      nextSquares[i] = 'X';
+    } else {
+      nextSquares[i] = 'O';
+    }
+    onPlay(nextSquares);
+  }
+
+  const winner = calculateWinner(squares);
+  let status;
+  if (winner) {
+    status = 'Winner: ' + winner;
+  } else {
+    status = 'Next player: ' + (xIsNext ? 'X' : 'O');
+  }
+
+  return (
+    <>
+      <div className="status">{status}</div>
+      <div className="board-row">
+        <Square value={squares[0]} onSquareClick={() => handleClick(0)} />
+        <Square value={squares[1]} onSquareClick={() => handleClick(1)} />
+        <Square value={squares[2]} onSquareClick={() => handleClick(2)} />
+      </div>
+      <div className="board-row">
+        <Square value={squares[3]} onSquareClick={() => handleClick(3)} />
+        <Square value={squares[4]} onSquareClick={() => handleClick(4)} />
+        <Square value={squares[5]} onSquareClick={() => handleClick(5)} />
+      </div>
+      <div className="board-row">
+        <Square value={squares[6]} onSquareClick={() => handleClick(6)} />
+        <Square value={squares[7]} onSquareClick={() => handleClick(7)} />
+        <Square value={squares[8]} onSquareClick={() => handleClick(8)} />
+      </div>
+    </>
+  );
+}
+
+export default function Game() {
+  const [xIsNext, setXIsNext] = useState(true);
+  const [history, setHistory] = useState([Array(9).fill(null)]);
+  const [currentMove, setCurrentMove] = useState(0);
+  const currentSquares = history[currentMove];
+
+  function handlePlay(nextSquares) {
+    const nextHistory = [...history.slice(0, currentMove + 1), nextSquares];
+    setHistory(nextHistory);
+    setCurrentMove(nextHistory.length - 1);
+    setXIsNext(!xIsNext);
+  }
+
+  function jumpTo(nextMove) {
+    setCurrentMove(nextMove);
+    setXIsNext(nextMove % 2 === 0);
+  }
+
+  const moves = history.map((squares, move) => {
+    let description;
+    if (move > 0) {
+      description = 'Go to move #' + move;
+    } else {
+      description = 'Go to game start';
+    }
+    return (
+      <li key={move}>
+        <button onClick={() => jumpTo(move)}>{description}</button>
+      </li>
+    );
+  });
+
+  return (
+    <div className="game">
+      <div className="game-board">
+        <Board xIsNext={xIsNext} squares={currentSquares} onPlay={handlePlay} />
+      </div>
+      <div className="game-info">
+        <ol>{moves}</ol>
+      </div>
+    </div>
+  );
+}
+
+function calculateWinner(squares) {
+  const lines = [
+    [0, 1, 2],
+    [3, 4, 5],
+    [6, 7, 8],
+    [0, 3, 6],
+    [1, 4, 7],
+    [2, 5, 8],
+    [0, 4, 8],
+    [2, 4, 6],
+  ];
+  for (let i = 0; i < lines.length; i++) {
+    const [a, b, c] = lines[i];
+    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
+      return squares[a];
+    }
+  }
+  return null;
+}
+```
+
+```css styles.css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  margin: 20px;
+  padding: 0;
+}
+
+.square {
+  background: #fff;
+  border: 1px solid #999;
+  float: left;
+  font-size: 24px;
+  font-weight: bold;
+  line-height: 34px;
+  height: 34px;
+  margin-right: -1px;
+  margin-top: -1px;
+  padding: 0;
+  text-align: center;
+  width: 34px;
+}
+
+.board-row:after {
+  clear: both;
+  content: '';
+  display: table;
+}
+
+.status {
+  margin-bottom: 10px;
+}
+.game {
+  display: flex;
+  flex-direction: row;
+}
+
+.game-info {
+  margin-left: 20px;
+}
+```
+
+</Sandpack>
+
+### Final cleanup {/*final-cleanup*/}
+
+If you look at the code very closely, you may notice that `xIsNext === true` when `currentMove` is even and `xIsNext === false` when `currentMove` is odd. In other words, if you know the value of `currentMove`, then you can always figure out what `xIsNext` should be.
+
+There's no reason for you to store both of these in state. In fact, always try to avoid redundant state. Simplifying what you store in state helps reduce bugs and make your code easier to understand. Change `Game` so that it no longer stores `xIsNext` as a separate state variable and instead figures it out based on the `currentMove`:
+
+```js {4,11,15}
+export default function Game() {
+  const [history, setHistory] = useState([Array(9).fill(null)]);
+  const [currentMove, setCurrentMove] = useState(0);
+  const xIsNext = currentMove % 2 === 0;
+  const currentSquares = history[currentMove];
+
+  function handlePlay(nextSquares) {
+    const nextHistory = [...history.slice(0, currentMove + 1), nextSquares];
+    setHistory(nextHistory);
+    setCurrentMove(nextHistory.length - 1);
+  }
+
+  function jumpTo(nextMove) {
+    setCurrentMove(nextMove);
+  }
+  // ...
+}
+```
+
+You no longer need the `xIsNext` state declaration or the calls to `setXIsNext`. Now, there's no chance for `xIsNext` to get out of sync with `currentMove`, even if you make a mistake while coding the components.
+
+### Wrapping up {/*wrapping-up*/}
+
+Congratulations! You've created a tic-tac-toe game that:
+
+- Lets you play tic-tac-toe,
+- Indicates when a player has won the game,
+- Stores a game's history as a game progresses,
+- Allows players to review a game's history and see previous versions of a game's board.
+
+Nice work! We hope you now feel like you have a decent grasp of how React works.
+
+Check out the final result here:
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+
+function Square({ value, onSquareClick }) {
+  return (
+    <button className="square" onClick={onSquareClick}>
+      {value}
+    </button>
+  );
+}
+
+function Board({ xIsNext, squares, onPlay }) {
+  function handleClick(i) {
+    if (calculateWinner(squares) || squares[i]) {
+      return;
+    }
+    const nextSquares = squares.slice();
+    if (xIsNext) {
+      nextSquares[i] = 'X';
+    } else {
+      nextSquares[i] = 'O';
+    }
+    onPlay(nextSquares);
+  }
+
+  const winner = calculateWinner(squares);
+  let status;
+  if (winner) {
+    status = 'Winner: ' + winner;
+  } else {
+    status = 'Next player: ' + (xIsNext ? 'X' : 'O');
+  }
+
+  return (
+    <>
+      <div className="status">{status}</div>
+      <div className="board-row">
+        <Square value={squares[0]} onSquareClick={() => handleClick(0)} />
+        <Square value={squares[1]} onSquareClick={() => handleClick(1)} />
+        <Square value={squares[2]} onSquareClick={() => handleClick(2)} />
+      </div>
+      <div className="board-row">
+        <Square value={squares[3]} onSquareClick={() => handleClick(3)} />
+        <Square value={squares[4]} onSquareClick={() => handleClick(4)} />
+        <Square value={squares[5]} onSquareClick={() => handleClick(5)} />
+      </div>
+      <div className="board-row">
+        <Square value={squares[6]} onSquareClick={() => handleClick(6)} />
+        <Square value={squares[7]} onSquareClick={() => handleClick(7)} />
+        <Square value={squares[8]} onSquareClick={() => handleClick(8)} />
+      </div>
+    </>
+  );
+}
+
+export default function Game() {
+  const [history, setHistory] = useState([Array(9).fill(null)]);
+  const [currentMove, setCurrentMove] = useState(0);
+  const xIsNext = currentMove % 2 === 0;
+  const currentSquares = history[currentMove];
+
+  function handlePlay(nextSquares) {
+    const nextHistory = [...history.slice(0, currentMove + 1), nextSquares];
+    setHistory(nextHistory);
+    setCurrentMove(nextHistory.length - 1);
+  }
+
+  function jumpTo(nextMove) {
+    setCurrentMove(nextMove);
+  }
+
+  const moves = history.map((squares, move) => {
+    let description;
+    if (move > 0) {
+      description = 'Go to move #' + move;
+    } else {
+      description = 'Go to game start';
+    }
+    return (
+      <li key={move}>
+        <button onClick={() => jumpTo(move)}>{description}</button>
+      </li>
+    );
+  });
+
+  return (
+    <div className="game">
+      <div className="game-board">
+        <Board xIsNext={xIsNext} squares={currentSquares} onPlay={handlePlay} />
+      </div>
+      <div className="game-info">
+        <ol>{moves}</ol>
+      </div>
+    </div>
+  );
+}
+
+function calculateWinner(squares) {
+  const lines = [
+    [0, 1, 2],
+    [3, 4, 5],
+    [6, 7, 8],
+    [0, 3, 6],
+    [1, 4, 7],
+    [2, 5, 8],
+    [0, 4, 8],
+    [2, 4, 6],
+  ];
+  for (let i = 0; i < lines.length; i++) {
+    const [a, b, c] = lines[i];
+    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
+      return squares[a];
+    }
+  }
+  return null;
+}
+```
+
+```css styles.css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  margin: 20px;
+  padding: 0;
+}
+
+.square {
+  background: #fff;
+  border: 1px solid #999;
+  float: left;
+  font-size: 24px;
+  font-weight: bold;
+  line-height: 34px;
+  height: 34px;
+  margin-right: -1px;
+  margin-top: -1px;
+  padding: 0;
+  text-align: center;
+  width: 34px;
+}
+
+.board-row:after {
+  clear: both;
+  content: '';
+  display: table;
+}
+
+.status {
+  margin-bottom: 10px;
+}
+.game {
+  display: flex;
+  flex-direction: row;
+}
+
+.game-info {
+  margin-left: 20px;
+}
+```
+
+</Sandpack>
+
+If you have extra time or want to practice your new React skills, here are some ideas for improvements that you could make to the tic-tac-toe game, listed in order of increasing difficulty:
+
+1. For the current move only, show "You are at move #..." instead of a button
+1. Rewrite `Board` to use two loops to make the squares instead of hardcoding them.
+1. Add a toggle button that lets you sort the moves in either ascending or descending order.
+1. When someone wins, highlight the three squares that caused the win (and when no one wins, display a message about the result being a draw).
+1. Display the location for each move in the format (col, row) in the move history list.
+
+Throughout this tutorial, you've touched on React concepts including elements, components, props, and state. Now that you've seen how these concepts work when building a game, check out [Thinking in React](/learn/thinking-in-react) to see how the same React concepts work when build an app's UI.
diff --git a/beta/src/content/learn/updating-arrays-in-state.md b/beta/src/content/learn/updating-arrays-in-state.md
new file mode 100644
index 000000000..eae89facf
--- /dev/null
+++ b/beta/src/content/learn/updating-arrays-in-state.md
@@ -0,0 +1,1975 @@
+---
+title: Updating Arrays in State
+---
+
+<Intro>
+
+Arrays are mutable in JavaScript, but you should treat them as immutable when you store them in state. Just like with objects, when you want to update an array stored in state, you need to create a new one (or make a copy of an existing one), and then set state to use the new array.
+
+</Intro>
+
+<YouWillLearn>
+
+- How to add, remove, or change items in an array in React state
+- How to update an object inside of an array
+- How to make array copying less repetitive with Immer
+
+</YouWillLearn>
+
+## Updating arrays without mutation {/*updating-arrays-without-mutation*/}
+
+In JavaScript, arrays are just another kind of object. [Like with objects](/learn/updating-objects-in-state), **you should treat arrays in React state as read-only.** This means that you shouldn't reassign items inside an array like `arr[0] = 'bird'`, and you also shouldn't use methods that mutate the array, such as `push()` and `pop()`.
+
+Instead, every time you want to update an array, you'll want to pass a *new* array to your state setting function. To do that, you can create a new array from the original array in your state by calling its non-mutating methods like `filter()` and `map()`. Then you can set your state to the resulting new array.
+
+Here is a reference table of common array operations. When dealing with arrays inside React state, you will need to avoid the methods in the left column, and instead prefer the methods in the right column:
+
+|           | avoid (mutates the array)           | prefer (returns a new array)                                        |
+| --------- | ----------------------------------- | ------------------------------------------------------------------- |
+| adding    | `push`, `unshift`                   | `concat`, `[...arr]` spread syntax ([example](#adding-to-an-array)) |
+| removing  | `pop`, `shift`, `splice`            | `filter`, `slice` ([example](#removing-from-an-array))              |
+| replacing | `splice`, `arr[i] = ...` assignment | `map` ([example](#replacing-items-in-an-array))                     |
+| sorting   | `reverse`, `sort`                   | copy the array first ([example](#making-other-changes-to-an-array)) |
+
+Alternatively, you can [use Immer](#write-concise-update-logic-with-immer) which lets you use methods from both columns.
+
+<Pitfall>
+
+Unfortunately, [`slice`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) and [`splice`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) are named similarly but are very different:
+
+* `slice` lets you copy an array or a part of it.
+* `splice` **mutates** the array (to insert or delete items).
+
+In React, you will be using `slice` (no `p`!) a lot more often because you don't want to mutate objects or arrays in state. [Updating Objects](/learn/updating-objects-in-state) explains what mutation is and why it's not recommended for state.
+
+</Pitfall>
+
+### Adding to an array {/*adding-to-an-array*/}
+
+`push()` will mutate an array, which you don't want:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+let nextId = 0;
+
+export default function List() {
+  const [name, setName] = useState('');
+  const [artists, setArtists] = useState([]);
+
+  return (
+    <>
+      <h1>Inspiring sculptors:</h1>
+      <input
+        value={name}
+        onChange={e => setName(e.target.value)}
+      />
+      <button onClick={() => {
+        setName('');
+        artists.push({
+          id: nextId++,
+          name: name,
+        });
+      }}>Add</button>
+      <ul>
+        {artists.map(artist => (
+          <li key={artist.id}>{artist.name}</li>
+        ))}
+      </ul>
+    </>
+  );
+}
+```
+
+```css
+button { margin-left: 5px; }
+```
+
+</Sandpack>
+
+Instead, create a *new* array which contains the existing items *and* a new item at the end. There are multiple ways to do this, but the easiest one is to use the `...` [array spread](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_array_literals) syntax:
+
+```js
+setArtists( // Replace the state
+  [ // with a new array
+    ...artists, // that contains all the old items
+    { id: nextId++, name: name } // and one new item at the end
+  ]
+);
+```
+
+Now it works correctly:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+let nextId = 0;
+
+export default function List() {
+  const [name, setName] = useState('');
+  const [artists, setArtists] = useState([]);
+
+  return (
+    <>
+      <h1>Inspiring sculptors:</h1>
+      <input
+        value={name}
+        onChange={e => setName(e.target.value)}
+      />
+      <button onClick={() => {
+        setName('');
+        setArtists([
+          ...artists,
+          { id: nextId++, name: name }
+        ]);
+      }}>Add</button>
+      <ul>
+        {artists.map(artist => (
+          <li key={artist.id}>{artist.name}</li>
+        ))}
+      </ul>
+    </>
+  );
+}
+```
+
+```css
+button { margin-left: 5px; }
+```
+
+</Sandpack>
+
+The array spread syntax also lets you prepend an item by placing it *before* the original `...artists`:
+
+```js
+setArtists([
+  { id: nextId++, name: name },
+  ...artists // Put old items at the end
+]);
+```
+
+In this way, spread can do the job of both `push()` by adding to the end of an array and `unshift()` by adding to the beginning of an array. Try it in the sandbox above!
+
+### Removing from an array {/*removing-from-an-array*/}
+
+The easiest way to remove an item from an array is to *filter it out*. In other words, you will produce a new array that will not contain that item. To do this, use the `filter` method, for example:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+let initialArtists = [
+  { id: 0, name: 'Marta Colvin Andrade' },
+  { id: 1, name: 'Lamidi Olonade Fakeye'},
+  { id: 2, name: 'Louise Nevelson'},
+];
+
+export default function List() {
+  const [artists, setArtists] = useState(
+    initialArtists
+  );
+
+  return (
+    <>
+      <h1>Inspiring sculptors:</h1>
+      <ul>
+        {artists.map(artist => (
+          <li key={artist.id}>
+            {artist.name}{' '}
+            <button onClick={() => {
+              setArtists(
+                artists.filter(a =>
+                  a.id !== artist.id
+                )
+              );
+            }}>
+              Delete
+            </button>
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+}
+```
+
+</Sandpack>
+
+Click the "Delete" button a few times, and look at its click handler.
+
+```js
+setArtists(
+  artists.filter(a => a.id !== artist.id)
+);
+```
+
+Here, `artists.filter(a => a.id !== artist.id)` means "create an array that consists of those `artists` whose IDs are different from `artist.id`". In other words, each artist's "Delete" button will filter _that_ artist out of the array, and then request a re-render with the resulting array. Note that `filter` does not modify the original array.
+
+### Transforming an array {/*transforming-an-array*/}
+
+If you want to change some or all items of the array, you can use `map()` to create a **new** array. The function you will pass to `map` can decide what to do with each item, based on its data or its index (or both).
+
+In this example, an array holds coordinates of two circles and a square. When you press the button, it moves only the circles down by 50 pixels. It does this by producing a new array of data using `map()`:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+let initialShapes = [
+  { id: 0, type: 'circle', x: 50, y: 100 },
+  { id: 1, type: 'square', x: 150, y: 100 },
+  { id: 2, type: 'circle', x: 250, y: 100 },
+];
+
+export default function ShapeEditor() {
+  const [shapes, setShapes] = useState(
+    initialShapes
+  );
+
+  function handleClick() {
+    const nextShapes = shapes.map(shape => {
+      if (shape.type === 'square') {
+        // No change
+        return shape;
+      } else {
+        // Return a new circle 50px below
+        return {
+          ...shape,
+          y: shape.y + 50,
+        };
+      }
+    });
+    // Re-render with the new array
+    setShapes(nextShapes);
+  }
+
+  return (
+    <>
+      <button onClick={handleClick}>
+        Move circles down!
+      </button>
+      {shapes.map(shape => (
+        <div
+          key={shape.id}
+          style={{
+          background: 'purple',
+          position: 'absolute',
+          left: shape.x,
+          top: shape.y,
+          borderRadius:
+            shape.type === 'circle'
+              ? '50%' : '',
+          width: 20,
+          height: 20,
+        }} />
+      ))}
+    </>
+  );
+}
+```
+
+```css
+body { height: 300px; }
+```
+
+</Sandpack>
+
+### Replacing items in an array {/*replacing-items-in-an-array*/}
+
+It is particularly common to want to replace one or more items in an array. Assignments like `arr[0] = 'bird'` are mutating the original array, so instead you'll want to use `map` for this as well.
+
+To replace an item, create a new array with `map`. Inside your `map` call, you will receive the item index as the second argument. Use it to decide whether to return the original item (the first argument) or something else:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+let initialCounters = [
+  0, 0, 0
+];
+
+export default function CounterList() {
+  const [counters, setCounters] = useState(
+    initialCounters
+  );
+
+  function handleIncrementClick(index) {
+    const nextCounters = counters.map((c, i) => {
+      if (i === index) {
+        // Increment the clicked counter
+        return c + 1;
+      } else {
+        // The rest haven't changed
+        return c;
+      }
+    });
+    setCounters(nextCounters);
+  }
+
+  return (
+    <ul>
+      {counters.map((counter, i) => (
+        <li key={i}>
+          {counter}
+          <button onClick={() => {
+            handleIncrementClick(i);
+          }}>+1</button>
+        </li>
+      ))}
+    </ul>
+  );
+}
+```
+
+```css
+button { margin: 5px; }
+```
+
+</Sandpack>
+
+### Inserting into an array {/*inserting-into-an-array*/}
+
+Sometimes, you may want to insert an item at a particular position that's neither at the beginning nor at the end. To do this, you can use the `...` array spread syntax together with the `slice()` method. The `slice()` method lets you cut a "slice" of the array. To insert an item, you will create an array that spreads the slice _before_ the insertion point, then the new item, and then the rest of the original array.
+
+In this example, the Insert button always inserts at the index `1`:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+let nextId = 3;
+const initialArtists = [
+  { id: 0, name: 'Marta Colvin Andrade' },
+  { id: 1, name: 'Lamidi Olonade Fakeye'},
+  { id: 2, name: 'Louise Nevelson'},
+];
+
+export default function List() {
+  const [name, setName] = useState('');
+  const [artists, setArtists] = useState(
+    initialArtists
+  );
+
+  function handleClick() {
+    const insertAt = 1; // Could be any index
+    const nextArtists = [
+      // Items before the insertion point:
+      ...artists.slice(0, insertAt),
+      // New item:
+      { id: nextId++, name: name },
+      // Items after the insertion point:
+      ...artists.slice(insertAt)
+    ];
+    setArtists(nextArtists);
+    setName('');
+  }
+
+  return (
+    <>
+      <h1>Inspiring sculptors:</h1>
+      <input
+        value={name}
+        onChange={e => setName(e.target.value)}
+      />
+      <button onClick={handleClick}>
+        Insert
+      </button>
+      <ul>
+        {artists.map(artist => (
+          <li key={artist.id}>{artist.name}</li>
+        ))}
+      </ul>
+    </>
+  );
+}
+```
+
+```css
+button { margin-left: 5px; }
+```
+
+</Sandpack>
+
+### Making other changes to an array {/*making-other-changes-to-an-array*/}
+
+There are some things you can't do with the spread syntax and non-mutating methods like `map()` and `filter()` alone. For example, you may want to reverse or sort an array. The JavaScript `reverse()` and `sort()` methods are mutating the original array, so you can't use them directly.
+
+**However, you can copy the array first, and then make changes to it.**
+
+For example:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+let nextId = 3;
+const initialList = [
+  { id: 0, title: 'Big Bellies' },
+  { id: 1, title: 'Lunar Landscape' },
+  { id: 2, title: 'Terracotta Army' },
+];
+
+export default function List() {
+  const [list, setList] = useState(initialList);
+
+  function handleClick() {
+    const nextList = [...list];
+    nextList.reverse();
+    setList(nextList);
+  }
+
+  return (
+    <>
+      <button onClick={handleClick}>
+        Reverse
+      </button>
+      <ul>
+        {list.map(artwork => (
+          <li key={artwork.id}>{artwork.title}</li>
+        ))}
+      </ul>
+    </>
+  );
+}
+```
+
+</Sandpack>
+
+Here, you use the `[...list]` spread syntax to create a copy of the original array first. Now that you have a copy, you can use mutating methods like `nextList.reverse()` or `nextList.sort()`, or even assign individual items with `nextList[0] = "something"`.
+
+However, **even if you copy an array, you can't mutate existing items _inside_ of it directly.** This is because copying is shallow--the new array will contain the same items as the original one. So if you modify an object inside the copied array, you are mutating the existing state. For example, code like this is a problem.
+
+```js
+const nextList = [...list];
+nextList[0].seen = true; // Problem: mutates list[0]
+setList(nextList);
+```
+
+Although `nextList` and `list` are two different arrays, **`nextList[0]` and `list[0]` point to the same object.** So by changing `nextList[0].seen`, you are also changing `list[0].seen`. This is a state mutation, which you should avoid! You can solve this issue in a similar way to [updating nested JavaScript objects](/learn/updating-objects-in-state#updating-a-nested-object)--by copying individual items you want to change instead of mutating them. Here's how.
+
+## Updating objects inside arrays {/*updating-objects-inside-arrays*/}
+
+Objects are not _really_ located "inside" arrays. They might appear to be "inside" in code, but each object in an array is a separate value, to which the array "points". This is why you need to be careful when changing nested fields like `list[0]`. Another person's artwork list may point to the same element of the array!
+
+**When updating nested state, you need to create copies from the point where you want to update, and all the way up to the top level.** Let's see how this works.
+
+In this example, two separate artwork lists have the same initial state. They are supposed to be isolated, but because of a mutation, their state is accidentally shared, and checking a box in one list affects the other list:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+let nextId = 3;
+const initialList = [
+  { id: 0, title: 'Big Bellies', seen: false },
+  { id: 1, title: 'Lunar Landscape', seen: false },
+  { id: 2, title: 'Terracotta Army', seen: true },
+];
+
+export default function BucketList() {
+  const [myList, setMyList] = useState(initialList);
+  const [yourList, setYourList] = useState(
+    initialList
+  );
+
+  function handleToggleMyList(artworkId, nextSeen) {
+    const myNextList = [...myList];
+    const artwork = myNextList.find(
+      a => a.id === artworkId
+    );
+    artwork.seen = nextSeen;
+    setMyList(myNextList);
+  }
+
+  function handleToggleYourList(artworkId, nextSeen) {
+    const yourNextList = [...yourList];
+    const artwork = yourNextList.find(
+      a => a.id === artworkId
+    );
+    artwork.seen = nextSeen;
+    setYourList(yourNextList);
+  }
+
+  return (
+    <>
+      <h1>Art Bucket List</h1>
+      <h2>My list of art to see:</h2>
+      <ItemList
+        artworks={myList}
+        onToggle={handleToggleMyList} />
+      <h2>Your list of art to see:</h2>
+      <ItemList
+        artworks={yourList}
+        onToggle={handleToggleYourList} />
+    </>
+  );
+}
+
+function ItemList({ artworks, onToggle }) {
+  return (
+    <ul>
+      {artworks.map(artwork => (
+        <li key={artwork.id}>
+          <label>
+            <input
+              type="checkbox"
+              checked={artwork.seen}
+              onChange={e => {
+                onToggle(
+                  artwork.id,
+                  e.target.checked
+                );
+              }}
+            />
+            {artwork.title}
+          </label>
+        </li>
+      ))}
+    </ul>
+  );
+}
+```
+
+</Sandpack>
+
+The problem is in code like this:
+
+```js
+const myNextList = [...myList];
+const artwork = myNextList.find(a => a.id === artworkId);
+artwork.seen = nextSeen; // Problem: mutates an existing item
+setMyList(myNextList);
+```
+
+Although the `myNextList` array itself is new, the *items themselves* are the same as in the original `myList` array. So changing `artwork.seen` changes the *original* artwork item. That artwork item is also in `yourArtworks`, which causes the bug. Bugs like this can be difficult to think about, but thankfully they disappear if you avoid mutating state.
+
+**You can use `map` to substitute an old item with its updated version without mutation.**
+
+```js
+setMyList(myList.map(artwork => {
+  if (artwork.id === artworkId) {
+    // Create a *new* object with changes
+    return { ...artwork, seen: nextSeen };
+  } else {
+    // No changes
+    return artwork;
+  }
+});
+```
+
+Here, `...` is the object spread syntax used to [create a copy of an object.](/learn/updating-objects-in-state#copying-objects-with-the-spread-syntax)
+
+With this approach, none of the existing state items are being mutated, and the bug is fixed:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+let nextId = 3;
+const initialList = [
+  { id: 0, title: 'Big Bellies', seen: false },
+  { id: 1, title: 'Lunar Landscape', seen: false },
+  { id: 2, title: 'Terracotta Army', seen: true },
+];
+
+export default function BucketList() {
+  const [myList, setMyList] = useState(initialList);
+  const [yourList, setYourList] = useState(
+    initialList
+  );
+
+  function handleToggleMyList(artworkId, nextSeen) {
+    setMyList(myList.map(artwork => {
+      if (artwork.id === artworkId) {
+        // Create a *new* object with changes
+        return { ...artwork, seen: nextSeen };
+      } else {
+        // No changes
+        return artwork;
+      }
+    }));
+  }
+
+  function handleToggleYourList(artworkId, nextSeen) {
+    setYourList(yourList.map(artwork => {
+      if (artwork.id === artworkId) {
+        // Create a *new* object with changes
+        return { ...artwork, seen: nextSeen };
+      } else {
+        // No changes
+        return artwork;
+      }
+    }));
+  }
+
+  return (
+    <>
+      <h1>Art Bucket List</h1>
+      <h2>My list of art to see:</h2>
+      <ItemList
+        artworks={myList}
+        onToggle={handleToggleMyList} />
+      <h2>Your list of art to see:</h2>
+      <ItemList
+        artworks={yourList}
+        onToggle={handleToggleYourList} />
+    </>
+  );
+}
+
+function ItemList({ artworks, onToggle }) {
+  return (
+    <ul>
+      {artworks.map(artwork => (
+        <li key={artwork.id}>
+          <label>
+            <input
+              type="checkbox"
+              checked={artwork.seen}
+              onChange={e => {
+                onToggle(
+                  artwork.id,
+                  e.target.checked
+                );
+              }}
+            />
+            {artwork.title}
+          </label>
+        </li>
+      ))}
+    </ul>
+  );
+}
+```
+
+</Sandpack>
+
+In general, **you should only mutate objects that you have just created.** If you were inserting a *new* artwork, you could mutate it, but if you're dealing with something that's already in state, you need to make a copy.
+
+### Write concise update logic with Immer {/*write-concise-update-logic-with-immer*/}
+
+Updating nested arrays without mutation can get a little bit repetitive. [Just as with objects](/learn/updating-objects-in-state#write-concise-update-logic-with-immer):
+
+- Generally, you shouldn't need to update state more than a couple of levels deep. If your state objects are very deep, you might want to [restructure them differently](/learn/choosing-the-state-structure#avoid-deeply-nested-state) so that they are flat.
+- If you don't want to change your state structure, you might prefer to use [Immer](https://github.com/immerjs/use-immer), which lets you write using the convenient but mutating syntax and takes care of producing the copies for you.
+
+Here is the Art Bucket List example rewritten with Immer:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+import { useImmer } from 'use-immer';
+
+let nextId = 3;
+const initialList = [
+  { id: 0, title: 'Big Bellies', seen: false },
+  { id: 1, title: 'Lunar Landscape', seen: false },
+  { id: 2, title: 'Terracotta Army', seen: true },
+];
+
+export default function BucketList() {
+  const [myList, updateMyList] = useImmer(
+    initialList
+  );
+  const [yourArtworks, updateYourList] = useImmer(
+    initialList
+  );
+
+  function handleToggleMyList(id, nextSeen) {
+    updateMyList(draft => {
+      const artwork = draft.find(a =>
+        a.id === id
+      );
+      artwork.seen = nextSeen;
+    });
+  }
+
+  function handleToggleYourList(artworkId, nextSeen) {
+    updateYourList(draft => {
+      const artwork = draft.find(a =>
+        a.id === artworkId
+      );
+      artwork.seen = nextSeen;
+    });
+  }
+
+  return (
+    <>
+      <h1>Art Bucket List</h1>
+      <h2>My list of art to see:</h2>
+      <ItemList
+        artworks={myList}
+        onToggle={handleToggleMyList} />
+      <h2>Your list of art to see:</h2>
+      <ItemList
+        artworks={yourArtworks}
+        onToggle={handleToggleYourList} />
+    </>
+  );
+}
+
+function ItemList({ artworks, onToggle }) {
+  return (
+    <ul>
+      {artworks.map(artwork => (
+        <li key={artwork.id}>
+          <label>
+            <input
+              type="checkbox"
+              checked={artwork.seen}
+              onChange={e => {
+                onToggle(
+                  artwork.id,
+                  e.target.checked
+                );
+              }}
+            />
+            {artwork.title}
+          </label>
+        </li>
+      ))}
+    </ul>
+  );
+}
+```
+
+```json package.json
+{
+  "dependencies": {
+    "immer": "1.7.3",
+    "react": "latest",
+    "react-dom": "latest",
+    "react-scripts": "latest",
+    "use-immer": "0.5.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+</Sandpack>
+
+Note how with Immer, **mutation like `artwork.seen = nextSeen` is now okay:**
+
+```js
+updateMyTodos(draft => {
+  const artwork = draft.find(a => a.id === artworkId);
+  artwork.seen = nextSeen;
+});
+```
+
+This is because you're not mutating the _original_ state, but you're mutating a special `draft` object provided by Immer. Similarly, you can apply mutating methods like `push()` and `pop()` to the content of the `draft`.
+
+Behind the scenes, Immer always constructs the next state from scratch according to the changes that you've done to the `draft`. This keeps your event handlers very concise without ever mutating state.
+
+<Recap>
+
+- You can put arrays into state, but you can't change them.
+- Instead of mutating an array, create a *new* version of it, and update the state to it.
+- You can use the `[...arr, newItem]` array spread syntax to create arrays with new items.
+- You can use `filter()` and `map()` to create new arrays with filtered or transformed items.
+- You can use Immer to keep your code concise.
+
+</Recap>
+
+
+
+<Challenges>
+
+#### Update an item in the shopping cart {/*update-an-item-in-the-shopping-cart*/}
+
+Fill in the `handleIncreaseClick` logic so that pressing "+" increases the corresponding number:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+const initialProducts = [{
+  id: 0,
+  name: 'Baklava',
+  count: 1,
+}, {
+  id: 1,
+  name: 'Cheese',
+  count: 5,
+}, {
+  id: 2,
+  name: 'Spaghetti',
+  count: 2,
+}];
+
+export default function ShoppingCart() {
+  const [
+    products,
+    setProducts
+  ] = useState(initialProducts)
+
+  function handleIncreaseClick(productId) {
+
+  }
+
+  return (
+    <ul>
+      {products.map(product => (
+        <li key={product.id}>
+          {product.name}
+          {' '}
+          (<b>{product.count}</b>)
+          <button onClick={() => {
+            handleIncreaseClick(product.id);
+          }}>
+            +
+          </button>
+        </li>
+      ))}
+    </ul>
+  );
+}
+```
+
+```css
+button { margin: 5px; }
+```
+
+</Sandpack>
+
+<Solution>
+
+You can use the `map` function to create a new array, and then use the `...` object spread syntax to create a copy of the changed object for the new array:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+const initialProducts = [{
+  id: 0,
+  name: 'Baklava',
+  count: 1,
+}, {
+  id: 1,
+  name: 'Cheese',
+  count: 5,
+}, {
+  id: 2,
+  name: 'Spaghetti',
+  count: 2,
+}];
+
+export default function ShoppingCart() {
+  const [
+    products,
+    setProducts
+  ] = useState(initialProducts)
+
+  function handleIncreaseClick(productId) {
+    setProducts(products.map(product => {
+      if (product.id === productId) {
+        return {
+          ...product,
+          count: product.count + 1
+        };
+      } else {
+        return product;
+      }
+    }))
+  }
+
+  return (
+    <ul>
+      {products.map(product => (
+        <li key={product.id}>
+          {product.name}
+          {' '}
+          (<b>{product.count}</b>)
+          <button onClick={() => {
+            handleIncreaseClick(product.id);
+          }}>
+            +
+          </button>
+        </li>
+      ))}
+    </ul>
+  );
+}
+```
+
+```css
+button { margin: 5px; }
+```
+
+</Sandpack>
+
+</Solution>
+
+#### Remove an item from the shopping cart {/*remove-an-item-from-the-shopping-cart*/}
+
+This shopping cart has a working "+" button, but the "–" button doesn't do anything. You need to add an event handler to it so that pressing it decreases the `count` of the corresponding product. If you press "–" when the count is 1, the product should automatically get removed from the cart. Make sure it never shows 0.
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+const initialProducts = [{
+  id: 0,
+  name: 'Baklava',
+  count: 1,
+}, {
+  id: 1,
+  name: 'Cheese',
+  count: 5,
+}, {
+  id: 2,
+  name: 'Spaghetti',
+  count: 2,
+}];
+
+export default function ShoppingCart() {
+  const [
+    products,
+    setProducts
+  ] = useState(initialProducts)
+
+  function handleIncreaseClick(productId) {
+    setProducts(products.map(product => {
+      if (product.id === productId) {
+        return {
+          ...product,
+          count: product.count + 1
+        };
+      } else {
+        return product;
+      }
+    }))
+  }
+
+  return (
+    <ul>
+      {products.map(product => (
+        <li key={product.id}>
+          {product.name}
+          {' '}
+          (<b>{product.count}</b>)
+          <button onClick={() => {
+            handleIncreaseClick(product.id);
+          }}>
+            +
+          </button>
+          <button>
+            –
+          </button>
+        </li>
+      ))}
+    </ul>
+  );
+}
+```
+
+```css
+button { margin: 5px; }
+```
+
+</Sandpack>
+
+<Solution>
+
+You can first use `map` to produce a new array, and then `filter` to remove products with a `count` set to `0`:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+const initialProducts = [{
+  id: 0,
+  name: 'Baklava',
+  count: 1,
+}, {
+  id: 1,
+  name: 'Cheese',
+  count: 5,
+}, {
+  id: 2,
+  name: 'Spaghetti',
+  count: 2,
+}];
+
+export default function ShoppingCart() {
+  const [
+    products,
+    setProducts
+  ] = useState(initialProducts)
+
+  function handleIncreaseClick(productId) {
+    setProducts(products.map(product => {
+      if (product.id === productId) {
+        return {
+          ...product,
+          count: product.count + 1
+        };
+      } else {
+        return product;
+      }
+    }))
+  }
+
+  function handleDecreaseClick(productId) {
+    let nextProducts = products.map(product => {
+      if (product.id === productId) {
+        return {
+          ...product,
+          count: product.count - 1
+        };
+      } else {
+        return product;
+      }
+    });
+    nextProducts = nextProducts.filter(p =>
+      p.count > 0
+    );
+    setProducts(nextProducts)
+  }
+
+  return (
+    <ul>
+      {products.map(product => (
+        <li key={product.id}>
+          {product.name}
+          {' '}
+          (<b>{product.count}</b>)
+          <button onClick={() => {
+            handleIncreaseClick(product.id);
+          }}>
+            +
+          </button>
+          <button onClick={() => {
+            handleDecreaseClick(product.id);
+          }}>
+            –
+          </button>
+        </li>
+      ))}
+    </ul>
+  );
+}
+```
+
+```css
+button { margin: 5px; }
+```
+
+</Sandpack>
+
+</Solution>
+
+#### Fix the mutations using non-mutative methods {/*fix-the-mutations-using-non-mutative-methods*/}
+
+In this example, all of the event handlers in `App.js` use mutation. As a result, editing and deleting todos doesn't work. Rewrite `handleAddTodo`, `handleChangeTodo`, and `handleDeleteTodo` to use the non-mutative methods:
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+import AddTodo from './AddTodo.js';
+import TaskList from './TaskList.js';
+
+let nextId = 3;
+const initialTodos = [
+  { id: 0, title: 'Buy milk', done: true },
+  { id: 1, title: 'Eat tacos', done: false },
+  { id: 2, title: 'Brew tea', done: false },
+];
+
+export default function TaskApp() {
+  const [todos, setTodos] = useState(
+    initialTodos
+  );
+
+  function handleAddTodo(title) {
+    todos.push({
+      id: nextId++,
+      title: title,
+      done: false
+    });
+  }
+
+  function handleChangeTodo(nextTodo) {
+    const todo = todos.find(t =>
+      t.id === nextTodo.id
+    );
+    todo.title = nextTodo.title;
+    todo.done = nextTodo.done;
+  }
+
+  function handleDeleteTodo(todoId) {
+    const index = todos.findIndex(t =>
+      t.id === todoId
+    );
+    todos.splice(index, 1);
+  }
+
+  return (
+    <>
+      <AddTodo
+        onAddTodo={handleAddTodo}
+      />
+      <TaskList
+        todos={todos}
+        onChangeTodo={handleChangeTodo}
+        onDeleteTodo={handleDeleteTodo}
+      />
+    </>
+  );
+}
+```
+
+```js AddTodo.js
+import { useState } from 'react';
+
+export default function AddTodo({ onAddTodo }) {
+  const [title, setTitle] = useState('');
+  return (
+    <>
+      <input
+        placeholder="Add todo"
+        value={title}
+        onChange={e => setTitle(e.target.value)}
+      />
+      <button onClick={() => {
+        setTitle('');
+        onAddTodo(title);
+      }}>Add</button>
+    </>
+  )
+}
+```
+
+```js TaskList.js
+import { useState } from 'react';
+
+export default function TaskList({
+  todos,
+  onChangeTodo,
+  onDeleteTodo
+}) {
+  return (
+    <ul>
+      {todos.map(todo => (
+        <li key={todo.id}>
+          <Task
+            todo={todo}
+            onChange={onChangeTodo}
+            onDelete={onDeleteTodo}
+          />
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function Task({ todo, onChange, onDelete }) {
+  const [isEditing, setIsEditing] = useState(false);
+  let todoContent;
+  if (isEditing) {
+    todoContent = (
+      <>
+        <input
+          value={todo.title}
+          onChange={e => {
+            onChange({
+              ...todo,
+              title: e.target.value
+            });
+          }} />
+        <button onClick={() => setIsEditing(false)}>
+          Save
+        </button>
+      </>
+    );
+  } else {
+    todoContent = (
+      <>
+        {todo.title}
+        <button onClick={() => setIsEditing(true)}>
+          Edit
+        </button>
+      </>
+    );
+  }
+  return (
+    <label>
+      <input
+        type="checkbox"
+        checked={todo.done}
+        onChange={e => {
+          onChange({
+            ...todo,
+            done: e.target.checked
+          });
+        }}
+      />
+      {todoContent}
+      <button onClick={() => onDelete(todo.id)}>
+        Delete
+      </button>
+    </label>
+  );
+}
+```
+
+```css
+button { margin: 5px; }
+li { list-style-type: none; }
+ul, li { margin: 0; padding: 0; }
+```
+
+</Sandpack>
+
+<Solution>
+
+In `handleAddTodo`, you can use the array spread syntax. In `handleChangeTodo`, you can create a new array with `map`. In `handleDeleteTodo`, you can create a new array with `filter`. Now the list works correctly:
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+import AddTodo from './AddTodo.js';
+import TaskList from './TaskList.js';
+
+let nextId = 3;
+const initialTodos = [
+  { id: 0, title: 'Buy milk', done: true },
+  { id: 1, title: 'Eat tacos', done: false },
+  { id: 2, title: 'Brew tea', done: false },
+];
+
+export default function TaskApp() {
+  const [todos, setTodos] = useState(
+    initialTodos
+  );
+
+  function handleAddTodo(title) {
+    setTodos([
+      ...todos,
+      {
+        id: nextId++,
+        title: title,
+        done: false
+      }
+    ]);
+  }
+
+  function handleChangeTodo(nextTodo) {
+    setTodos(todos.map(t => {
+      if (t.id === nextTodo.id) {
+        return nextTodo;
+      } else {
+        return t;
+      }
+    }));
+  }
+
+  function handleDeleteTodo(todoId) {
+    setTodos(
+      todos.filter(t => t.id !== todoId)
+    );
+  }
+
+  return (
+    <>
+      <AddTodo
+        onAddTodo={handleAddTodo}
+      />
+      <TaskList
+        todos={todos}
+        onChangeTodo={handleChangeTodo}
+        onDeleteTodo={handleDeleteTodo}
+      />
+    </>
+  );
+}
+```
+
+```js AddTodo.js
+import { useState } from 'react';
+
+export default function AddTodo({ onAddTodo }) {
+  const [title, setTitle] = useState('');
+  return (
+    <>
+      <input
+        placeholder="Add todo"
+        value={title}
+        onChange={e => setTitle(e.target.value)}
+      />
+      <button onClick={() => {
+        setTitle('');
+        onAddTodo(title);
+      }}>Add</button>
+    </>
+  )
+}
+```
+
+```js TaskList.js
+import { useState } from 'react';
+
+export default function TaskList({
+  todos,
+  onChangeTodo,
+  onDeleteTodo
+}) {
+  return (
+    <ul>
+      {todos.map(todo => (
+        <li key={todo.id}>
+          <Task
+            todo={todo}
+            onChange={onChangeTodo}
+            onDelete={onDeleteTodo}
+          />
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function Task({ todo, onChange, onDelete }) {
+  const [isEditing, setIsEditing] = useState(false);
+  let todoContent;
+  if (isEditing) {
+    todoContent = (
+      <>
+        <input
+          value={todo.title}
+          onChange={e => {
+            onChange({
+              ...todo,
+              title: e.target.value
+            });
+          }} />
+        <button onClick={() => setIsEditing(false)}>
+          Save
+        </button>
+      </>
+    );
+  } else {
+    todoContent = (
+      <>
+        {todo.title}
+        <button onClick={() => setIsEditing(true)}>
+          Edit
+        </button>
+      </>
+    );
+  }
+  return (
+    <label>
+      <input
+        type="checkbox"
+        checked={todo.done}
+        onChange={e => {
+          onChange({
+            ...todo,
+            done: e.target.checked
+          });
+        }}
+      />
+      {todoContent}
+      <button onClick={() => onDelete(todo.id)}>
+        Delete
+      </button>
+    </label>
+  );
+}
+```
+
+```css
+button { margin: 5px; }
+li { list-style-type: none; }
+ul, li { margin: 0; padding: 0; }
+```
+
+</Sandpack>
+
+</Solution>
+
+
+#### Fix the mutations using Immer {/*fix-the-mutations-using-immer*/}
+
+This is the same example as in the previous challenge. This time, fix the mutations by using Immer. For your convenience, `useImmer` is already imported, so you need to change the `todos` state variable to use it.
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+import { useImmer } from 'use-immer';
+import AddTodo from './AddTodo.js';
+import TaskList from './TaskList.js';
+
+let nextId = 3;
+const initialTodos = [
+  { id: 0, title: 'Buy milk', done: true },
+  { id: 1, title: 'Eat tacos', done: false },
+  { id: 2, title: 'Brew tea', done: false },
+];
+
+export default function TaskApp() {
+  const [todos, setTodos] = useState(
+    initialTodos
+  );
+
+  function handleAddTodo(title) {
+    todos.push({
+      id: nextId++,
+      title: title,
+      done: false
+    });
+  }
+
+  function handleChangeTodo(nextTodo) {
+    const todo = todos.find(t =>
+      t.id === nextTodo.id
+    );
+    todo.title = nextTodo.title;
+    todo.done = nextTodo.done;
+  }
+
+  function handleDeleteTodo(todoId) {
+    const index = todos.findIndex(t =>
+      t.id === todoId
+    );
+    todos.splice(index, 1);
+  }
+
+  return (
+    <>
+      <AddTodo
+        onAddTodo={handleAddTodo}
+      />
+      <TaskList
+        todos={todos}
+        onChangeTodo={handleChangeTodo}
+        onDeleteTodo={handleDeleteTodo}
+      />
+    </>
+  );
+}
+```
+
+```js AddTodo.js
+import { useState } from 'react';
+
+export default function AddTodo({ onAddTodo }) {
+  const [title, setTitle] = useState('');
+  return (
+    <>
+      <input
+        placeholder="Add todo"
+        value={title}
+        onChange={e => setTitle(e.target.value)}
+      />
+      <button onClick={() => {
+        setTitle('');
+        onAddTodo(title);
+      }}>Add</button>
+    </>
+  )
+}
+```
+
+```js TaskList.js
+import { useState } from 'react';
+
+export default function TaskList({
+  todos,
+  onChangeTodo,
+  onDeleteTodo
+}) {
+  return (
+    <ul>
+      {todos.map(todo => (
+        <li key={todo.id}>
+          <Task
+            todo={todo}
+            onChange={onChangeTodo}
+            onDelete={onDeleteTodo}
+          />
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function Task({ todo, onChange, onDelete }) {
+  const [isEditing, setIsEditing] = useState(false);
+  let todoContent;
+  if (isEditing) {
+    todoContent = (
+      <>
+        <input
+          value={todo.title}
+          onChange={e => {
+            onChange({
+              ...todo,
+              title: e.target.value
+            });
+          }} />
+        <button onClick={() => setIsEditing(false)}>
+          Save
+        </button>
+      </>
+    );
+  } else {
+    todoContent = (
+      <>
+        {todo.title}
+        <button onClick={() => setIsEditing(true)}>
+          Edit
+        </button>
+      </>
+    );
+  }
+  return (
+    <label>
+      <input
+        type="checkbox"
+        checked={todo.done}
+        onChange={e => {
+          onChange({
+            ...todo,
+            done: e.target.checked
+          });
+        }}
+      />
+      {todoContent}
+      <button onClick={() => onDelete(todo.id)}>
+        Delete
+      </button>
+    </label>
+  );
+}
+```
+
+```css
+button { margin: 5px; }
+li { list-style-type: none; }
+ul, li { margin: 0; padding: 0; }
+```
+
+```json package.json
+{
+  "dependencies": {
+    "immer": "1.7.3",
+    "react": "latest",
+    "react-dom": "latest",
+    "react-scripts": "latest",
+    "use-immer": "0.5.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+</Sandpack>
+
+<Solution>
+
+With Immer, you can write code in the mutative fashion, as long as you're only mutating parts of the `draft` that Immer gives you. Here, all mutations are performed on the `draft` so the code works:
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+import { useImmer } from 'use-immer';
+import AddTodo from './AddTodo.js';
+import TaskList from './TaskList.js';
+
+let nextId = 3;
+const initialTodos = [
+  { id: 0, title: 'Buy milk', done: true },
+  { id: 1, title: 'Eat tacos', done: false },
+  { id: 2, title: 'Brew tea', done: false },
+];
+
+export default function TaskApp() {
+  const [todos, updateTodos] = useImmer(
+    initialTodos
+  );
+
+  function handleAddTodo(title) {
+    updateTodos(draft => {
+      draft.push({
+        id: nextId++,
+        title: title,
+        done: false
+      });
+    });
+  }
+
+  function handleChangeTodo(nextTodo) {
+    updateTodos(draft => {
+      const todo = draft.find(t =>
+        t.id === nextTodo.id
+      );
+      todo.title = nextTodo.title;
+      todo.done = nextTodo.done;
+    });
+  }
+
+  function handleDeleteTodo(todoId) {
+    updateTodos(draft => {
+      const index = draft.findIndex(t =>
+        t.id === todoId
+      );
+      draft.splice(index, 1);
+    });
+  }
+
+  return (
+    <>
+      <AddTodo
+        onAddTodo={handleAddTodo}
+      />
+      <TaskList
+        todos={todos}
+        onChangeTodo={handleChangeTodo}
+        onDeleteTodo={handleDeleteTodo}
+      />
+    </>
+  );
+}
+```
+
+```js AddTodo.js
+import { useState } from 'react';
+
+export default function AddTodo({ onAddTodo }) {
+  const [title, setTitle] = useState('');
+  return (
+    <>
+      <input
+        placeholder="Add todo"
+        value={title}
+        onChange={e => setTitle(e.target.value)}
+      />
+      <button onClick={() => {
+        setTitle('');
+        onAddTodo(title);
+      }}>Add</button>
+    </>
+  )
+}
+```
+
+```js TaskList.js
+import { useState } from 'react';
+
+export default function TaskList({
+  todos,
+  onChangeTodo,
+  onDeleteTodo
+}) {
+  return (
+    <ul>
+      {todos.map(todo => (
+        <li key={todo.id}>
+          <Task
+            todo={todo}
+            onChange={onChangeTodo}
+            onDelete={onDeleteTodo}
+          />
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function Task({ todo, onChange, onDelete }) {
+  const [isEditing, setIsEditing] = useState(false);
+  let todoContent;
+  if (isEditing) {
+    todoContent = (
+      <>
+        <input
+          value={todo.title}
+          onChange={e => {
+            onChange({
+              ...todo,
+              title: e.target.value
+            });
+          }} />
+        <button onClick={() => setIsEditing(false)}>
+          Save
+        </button>
+      </>
+    );
+  } else {
+    todoContent = (
+      <>
+        {todo.title}
+        <button onClick={() => setIsEditing(true)}>
+          Edit
+        </button>
+      </>
+    );
+  }
+  return (
+    <label>
+      <input
+        type="checkbox"
+        checked={todo.done}
+        onChange={e => {
+          onChange({
+            ...todo,
+            done: e.target.checked
+          });
+        }}
+      />
+      {todoContent}
+      <button onClick={() => onDelete(todo.id)}>
+        Delete
+      </button>
+    </label>
+  );
+}
+```
+
+```css
+button { margin: 5px; }
+li { list-style-type: none; }
+ul, li { margin: 0; padding: 0; }
+```
+
+```json package.json
+{
+  "dependencies": {
+    "immer": "1.7.3",
+    "react": "latest",
+    "react-dom": "latest",
+    "react-scripts": "latest",
+    "use-immer": "0.5.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+</Sandpack>
+
+You can also mix and match the mutative and non-mutative approaches with Immer.
+
+For example, in this version `handleAddTodo` is implemented by mutating the Immer `draft`, while `handleChangeTodo` and `handleDeleteTodo` use the non-mutative `map` and `filter` methods:
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+import { useImmer } from 'use-immer';
+import AddTodo from './AddTodo.js';
+import TaskList from './TaskList.js';
+
+let nextId = 3;
+const initialTodos = [
+  { id: 0, title: 'Buy milk', done: true },
+  { id: 1, title: 'Eat tacos', done: false },
+  { id: 2, title: 'Brew tea', done: false },
+];
+
+export default function TaskApp() {
+  const [todos, updateTodos] = useImmer(
+    initialTodos
+  );
+
+  function handleAddTodo(title) {
+    updateTodos(draft => {
+      draft.push({
+        id: nextId++,
+        title: title,
+        done: false
+      });
+    });
+  }
+
+  function handleChangeTodo(nextTodo) {
+    updateTodos(todos.map(todo => {
+      if (todo.id === nextTodo.id) {
+        return nextTodo;
+      } else {
+        return todo;
+      }
+    }));
+  }
+
+  function handleDeleteTodo(todoId) {
+    updateTodos(
+      todos.filter(t => t.id !== todoId)
+    );
+  }
+
+  return (
+    <>
+      <AddTodo
+        onAddTodo={handleAddTodo}
+      />
+      <TaskList
+        todos={todos}
+        onChangeTodo={handleChangeTodo}
+        onDeleteTodo={handleDeleteTodo}
+      />
+    </>
+  );
+}
+```
+
+```js AddTodo.js
+import { useState } from 'react';
+
+export default function AddTodo({ onAddTodo }) {
+  const [title, setTitle] = useState('');
+  return (
+    <>
+      <input
+        placeholder="Add todo"
+        value={title}
+        onChange={e => setTitle(e.target.value)}
+      />
+      <button onClick={() => {
+        setTitle('');
+        onAddTodo(title);
+      }}>Add</button>
+    </>
+  )
+}
+```
+
+```js TaskList.js
+import { useState } from 'react';
+
+export default function TaskList({
+  todos,
+  onChangeTodo,
+  onDeleteTodo
+}) {
+  return (
+    <ul>
+      {todos.map(todo => (
+        <li key={todo.id}>
+          <Task
+            todo={todo}
+            onChange={onChangeTodo}
+            onDelete={onDeleteTodo}
+          />
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function Task({ todo, onChange, onDelete }) {
+  const [isEditing, setIsEditing] = useState(false);
+  let todoContent;
+  if (isEditing) {
+    todoContent = (
+      <>
+        <input
+          value={todo.title}
+          onChange={e => {
+            onChange({
+              ...todo,
+              title: e.target.value
+            });
+          }} />
+        <button onClick={() => setIsEditing(false)}>
+          Save
+        </button>
+      </>
+    );
+  } else {
+    todoContent = (
+      <>
+        {todo.title}
+        <button onClick={() => setIsEditing(true)}>
+          Edit
+        </button>
+      </>
+    );
+  }
+  return (
+    <label>
+      <input
+        type="checkbox"
+        checked={todo.done}
+        onChange={e => {
+          onChange({
+            ...todo,
+            done: e.target.checked
+          });
+        }}
+      />
+      {todoContent}
+      <button onClick={() => onDelete(todo.id)}>
+        Delete
+      </button>
+    </label>
+  );
+}
+```
+
+```css
+button { margin: 5px; }
+li { list-style-type: none; }
+ul, li { margin: 0; padding: 0; }
+```
+
+```json package.json
+{
+  "dependencies": {
+    "immer": "1.7.3",
+    "react": "latest",
+    "react-dom": "latest",
+    "react-scripts": "latest",
+    "use-immer": "0.5.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+</Sandpack>
+
+With Immer, you can pick the style that feels the most natural for each separate case.
+
+</Solution>
+
+</Challenges>
diff --git a/beta/src/content/learn/updating-objects-in-state.md b/beta/src/content/learn/updating-objects-in-state.md
new file mode 100644
index 000000000..df8bffaaa
--- /dev/null
+++ b/beta/src/content/learn/updating-objects-in-state.md
@@ -0,0 +1,1625 @@
+---
+title: Updating Objects in State
+---
+
+<Intro>
+
+State can hold any kind of JavaScript value, including objects. But you shouldn't change objects that you hold in the React state directly. Instead, when you want to update an object, you need to create a new one (or make a copy of an existing one), and then set the state to use that copy.
+
+</Intro>
+
+<YouWillLearn>
+
+- How to correctly update an object in React state
+- How to update a nested object without mutating it
+- What immutability is, and how not to break it
+- How to make object copying less repetitive with Immer
+
+</YouWillLearn>
+
+## What's a mutation? {/*whats-a-mutation*/}
+
+You can store any kind of JavaScript value in state.
+
+```js
+const [x, setX] = useState(0);
+```
+
+So far you've been working with numbers, strings, and booleans. These kinds of JavaScript values are "immutable", meaning unchangeable or "read-only". You can trigger a re-render to _replace_ a value:
+
+```js
+setX(5);
+```
+
+The `x` state changed from `0` to `5`, but the _number `0` itself_ did not change. It's not possible to make any changes to the built-in primitive values like numbers, strings, and booleans in JavaScript.
+
+Now consider an object in state:
+
+```js
+const [position, setPosition] = useState({ x: 0, y: 0 });
+```
+
+Technically, it is possible to change the contents of _the object itself_. **This is called a mutation:**
+
+```js
+position.x = 5;
+```
+
+However, although objects in React state are technically mutable, you should treat them **as if** they were immutable--like numbers, booleans, and strings. Instead of mutating them, you should always replace them.
+
+## Treat state as read-only {/*treat-state-as-read-only*/}
+
+In other words, you should **treat any JavaScript object that you put into state as read-only.**
+
+This example holds an object in state to represent the current pointer position. The red dot is supposed to move when you touch or move the cursor over the preview area. But the dot stays in the initial position:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+export default function MovingDot() {
+  const [position, setPosition] = useState({
+    x: 0,
+    y: 0
+  });
+  return (
+    <div
+      onPointerMove={e => {
+        position.x = e.clientX;
+        position.y = e.clientY;
+      }}
+      style={{
+        position: 'relative',
+        width: '100vw',
+        height: '100vh',
+      }}>
+      <div style={{
+        position: 'absolute',
+        backgroundColor: 'red',
+        borderRadius: '50%',
+        transform: `translate(${position.x}px, ${position.y}px)`,
+        left: -10,
+        top: -10,
+        width: 20,
+        height: 20,
+      }} />
+    </div>
+  );
+}
+```
+
+```css
+body { margin: 0; padding: 0; height: 250px; }
+```
+
+</Sandpack>
+
+The problem is with this bit of code.
+
+```js
+onPointerMove={e => {
+  position.x = e.clientX;
+  position.y = e.clientY;
+}}
+```
+
+This code modifies the object assigned to `position` from [the previous render.](/learn/state-as-a-snapshot#rendering-takes-a-snapshot-in-time) But without using the state setting function, React has no idea that object has changed. So React does not do anything in response. It's like trying to change the order after you've already eaten the meal. While mutating state can work in some cases, we don't recommend it. You should treat the state value you have access to in a render as read-only.
+
+To actually [trigger a re-render](/learn/state-as-a-snapshot#setting-state-triggers-renders) in this case, **create a *new* object and pass it to the state setting function:**
+
+```js
+onPointerMove={e => {
+  setPosition({
+    x: e.clientX,
+    y: e.clientY
+  });
+}}
+```
+
+With `setPosition`, you're telling React:
+
+* Replace `position` with this new object
+* And render this component again
+
+Notice how the red dot now follows your pointer when you touch or hover over the preview area:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+export default function MovingDot() {
+  const [position, setPosition] = useState({
+    x: 0,
+    y: 0
+  });
+  return (
+    <div
+      onPointerMove={e => {
+        setPosition({
+          x: e.clientX,
+          y: e.clientY
+        });
+      }}
+      style={{
+        position: 'relative',
+        width: '100vw',
+        height: '100vh',
+      }}>
+      <div style={{
+        position: 'absolute',
+        backgroundColor: 'red',
+        borderRadius: '50%',
+        transform: `translate(${position.x}px, ${position.y}px)`,
+        left: -10,
+        top: -10,
+        width: 20,
+        height: 20,
+      }} />
+    </div>
+  );
+}
+```
+
+```css
+body { margin: 0; padding: 0; height: 250px; }
+```
+
+</Sandpack>
+
+<DeepDive>
+
+#### Local mutation is fine {/*local-mutation-is-fine*/}
+
+Code like this is a problem because it modifies an *existing* object in state:
+
+```js
+position.x = e.clientX;
+position.y = e.clientY;
+```
+
+But code like this is **absolutely fine** because you're mutating a fresh object you have *just created*:
+
+```js
+const nextPosition = {};
+nextPosition.x = e.clientX;
+nextPosition.y = e.clientY;
+setPosition(nextPosition);
+````
+
+In fact, it is completely equivalent to writing this:
+
+```js
+setPosition({
+  x: e.clientX,
+  y: e.clientY
+});
+```
+
+Mutation is only a problem when you change *existing* objects that are already in state. Mutating an object you've just created is okay because *no other code references it yet.* Changing it isn't going to accidentally impact something that depends on it. This is called a "local mutation". You can even do local mutation [while rendering.](/learn/keeping-components-pure#local-mutation-your-components-little-secret) Very convenient and completely okay!
+
+</DeepDive>  
+
+## Copying objects with the spread syntax {/*copying-objects-with-the-spread-syntax*/}
+
+In the previous example, the `position` object is always created fresh from the current cursor position. But often, you will want to include *existing* data as a part of the new object you're creating. For example, you may want to update *only one* field in a form, but keep the previous values for all other fields.
+
+These input fields don't work because the `onChange` handlers mutate the state:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function Form() {
+  const [person, setPerson] = useState({
+    firstName: 'Barbara',
+    lastName: 'Hepworth',
+    email: 'bhepworth@sculpture.com'
+  });
+
+  function handleFirstNameChange(e) {
+    person.firstName = e.target.value;
+  }
+
+  function handleLastNameChange(e) {
+    person.lastName = e.target.value;
+  }
+
+  function handleEmailChange(e) {
+    person.email = e.target.value;
+  }
+
+  return (
+    <>
+      <label>
+        First name:
+        <input
+          value={person.firstName}
+          onChange={handleFirstNameChange}
+        />
+      </label>
+      <label>
+        Last name:
+        <input
+          value={person.lastName}
+          onChange={handleLastNameChange}
+        />
+      </label>
+      <label>
+        Email:
+        <input
+          value={person.email}
+          onChange={handleEmailChange}
+        />
+      </label>
+      <p>
+        {person.firstName}{' '}
+        {person.lastName}{' '}
+        ({person.email})
+      </p>
+    </>
+  );
+}
+```
+
+```css
+label { display: block; }
+input { margin-left: 5px; margin-bottom: 5px; }
+```
+
+</Sandpack>
+
+For example, this line mutates the state from a past render:
+
+```js
+person.firstName = e.target.value;
+```
+
+The reliable way to get the behavior you're looking for is to create a new object and pass it to `setPerson`. But here, you want to also **copy the existing data into it** because only one of the fields has changed:
+
+```js
+setPerson({
+  firstName: e.target.value, // New first name from the input
+  lastName: person.lastName,
+  email: person.email
+});
+```
+
+You can use the `...` [object spread](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_object_literals) syntax so that you don't need to copy every property separately.
+
+```js
+setPerson({
+  ...person, // Copy the old fields
+  firstName: e.target.value // But override this one
+});
+```
+
+Now the form works! 
+
+Notice how you didn't declare a separate state variable for each input field. For large forms, keeping all data grouped in an object is very convenient--as long as you update it correctly!
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function Form() {
+  const [person, setPerson] = useState({
+    firstName: 'Barbara',
+    lastName: 'Hepworth',
+    email: 'bhepworth@sculpture.com'
+  });
+
+  function handleFirstNameChange(e) {
+    setPerson({
+      ...person,
+      firstName: e.target.value
+    });
+  }
+
+  function handleLastNameChange(e) {
+    setPerson({
+      ...person,
+      lastName: e.target.value
+    });
+  }
+
+  function handleEmailChange(e) {
+    setPerson({
+      ...person,
+      email: e.target.value
+    });
+  }
+
+  return (
+    <>
+      <label>
+        First name:
+        <input
+          value={person.firstName}
+          onChange={handleFirstNameChange}
+        />
+      </label>
+      <label>
+        Last name:
+        <input
+          value={person.lastName}
+          onChange={handleLastNameChange}
+        />
+      </label>
+      <label>
+        Email:
+        <input
+          value={person.email}
+          onChange={handleEmailChange}
+        />
+      </label>
+      <p>
+        {person.firstName}{' '}
+        {person.lastName}{' '}
+        ({person.email})
+      </p>
+    </>
+  );
+}
+```
+
+```css
+label { display: block; }
+input { margin-left: 5px; margin-bottom: 5px; }
+```
+
+</Sandpack>
+
+Note that the `...` spread syntax is "shallow"--it only copies things one level deep. This makes it fast, but it also means that if you want to update a nested property, you'll have to use it more than once. 
+
+<DeepDive>
+
+#### Using a single event handler for multiple fields {/*using-a-single-event-handler-for-multiple-fields*/}
+
+You can also use the `[` and `]` braces inside your object definition to specify a property with dynamic name. Here is the same example, but with a single event handler instead of three different ones:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function Form() {
+  const [person, setPerson] = useState({
+    firstName: 'Barbara',
+    lastName: 'Hepworth',
+    email: 'bhepworth@sculpture.com'
+  });
+
+  function handleChange(e) {
+    setPerson({
+      ...person,
+      [e.target.name]: e.target.value
+    });
+  }
+
+  return (
+    <>
+      <label>
+        First name:
+        <input
+          name="firstName"
+          value={person.firstName}
+          onChange={handleChange}
+        />
+      </label>
+      <label>
+        Last name:
+        <input
+          name="lastName"
+          value={person.lastName}
+          onChange={handleChange}
+        />
+      </label>
+      <label>
+        Email:
+        <input
+          name="email"
+          value={person.email}
+          onChange={handleChange}
+        />
+      </label>
+      <p>
+        {person.firstName}{' '}
+        {person.lastName}{' '}
+        ({person.email})
+      </p>
+    </>
+  );
+}
+```
+
+```css
+label { display: block; }
+input { margin-left: 5px; margin-bottom: 5px; }
+```
+
+</Sandpack>
+
+Here, `e.target.name` refers to the `name` property given to the `<input>` DOM element.
+
+</DeepDive>
+
+## Updating a nested object {/*updating-a-nested-object*/}
+
+Consider a nested object structure like this:
+
+```js
+const [person, setPerson] = useState({
+  name: 'Niki de Saint Phalle',
+  artwork: {
+    title: 'Blue Nana',
+    city: 'Hamburg',
+    image: 'https://i.imgur.com/Sd1AgUOm.jpg',
+  }
+});
+```
+
+If you wanted to update `person.artwork.city`, it's clear how to do it with mutation:
+
+```js
+person.artwork.city = 'New Delhi';
+```
+
+But in React, you treat state as immutable! In order to change `city`, you would first need to produce the new `artwork` object (pre-populated with data from the previous one), and then produce the new `person` object which points at the new `artwork`:
+
+```js
+const nextArtwork = { ...person.artwork, city: 'New Delhi' };
+const nextPerson = { ...person, artwork: nextArtwork };
+setPerson(nextPerson);
+```
+
+Or, written as a single function call:
+
+```js
+setPerson({
+  ...person, // Copy other fields
+  artwork: { // but replace the artwork
+    ...person.artwork, // with the same one
+    city: 'New Delhi' // but in New Delhi!
+  }
+});
+```
+
+This gets a bit wordy, but it works fine for many cases:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function Form() {
+  const [person, setPerson] = useState({
+    name: 'Niki de Saint Phalle',
+    artwork: {
+      title: 'Blue Nana',
+      city: 'Hamburg',
+      image: 'https://i.imgur.com/Sd1AgUOm.jpg',
+    }
+  });
+
+  function handleNameChange(e) {
+    setPerson({
+      ...person,
+      name: e.target.value
+    });
+  }
+
+  function handleTitleChange(e) {
+    setPerson({
+      ...person,
+      artwork: {
+        ...person.artwork,
+        title: e.target.value
+      }
+    });
+  }
+
+  function handleCityChange(e) {
+    setPerson({
+      ...person,
+      artwork: {
+        ...person.artwork,
+        city: e.target.value
+      }
+    });
+  }
+
+  function handleImageChange(e) {
+    setPerson({
+      ...person,
+      artwork: {
+        ...person.artwork,
+        image: e.target.value
+      }
+    });
+  }
+
+  return (
+    <>
+      <label>
+        Name:
+        <input
+          value={person.name}
+          onChange={handleNameChange}
+        />
+      </label>
+      <label>
+        Title:
+        <input
+          value={person.artwork.title}
+          onChange={handleTitleChange}
+        />
+      </label>
+      <label>
+        City:
+        <input
+          value={person.artwork.city}
+          onChange={handleCityChange}
+        />
+      </label>
+      <label>
+        Image:
+        <input
+          value={person.artwork.image}
+          onChange={handleImageChange}
+        />
+      </label>
+      <p>
+        <i>{person.artwork.title}</i>
+        {' by '}
+        {person.name}
+        <br />
+        (located in {person.artwork.city})
+      </p>
+      <img 
+        src={person.artwork.image} 
+        alt={person.artwork.title}
+      />
+    </>
+  );
+}
+```
+
+```css
+label { display: block; }
+input { margin-left: 5px; margin-bottom: 5px; }
+img { width: 200px; height: 200px; }
+```
+
+</Sandpack>
+
+<DeepDive>
+
+#### Objects are not really nested {/*objects-are-not-really-nested*/}
+
+An object like this appears "nested" in code:
+
+```js
+let obj = {
+  name: 'Niki de Saint Phalle',
+  artwork: {
+    title: 'Blue Nana',
+    city: 'Hamburg',
+    image: 'https://i.imgur.com/Sd1AgUOm.jpg',
+  }
+};
+```
+
+However, "nesting" is an inaccurate way to think about how objects behave. When the code executes, there is no such thing as a "nested" object. You are really looking at two different objects:
+
+```js
+let obj1 = {
+  title: 'Blue Nana',
+  city: 'Hamburg',
+  image: 'https://i.imgur.com/Sd1AgUOm.jpg',
+};
+
+let obj2 = {
+  name: 'Niki de Saint Phalle',
+  artwork: obj1
+};
+```
+
+The `obj1` object is not "inside" `obj2`. For example, `obj3` could "point" at `obj1` too:
+
+```js
+let obj1 = {
+  title: 'Blue Nana',
+  city: 'Hamburg',
+  image: 'https://i.imgur.com/Sd1AgUOm.jpg',
+};
+
+let obj2 = {
+  name: 'Niki de Saint Phalle',
+  artwork: obj1
+};
+
+let obj3 = {
+  name: 'Copycat',
+  artwork: obj1
+};
+```
+
+If you were to mutate `obj3.artwork.city`, it would affect both `obj2.artwork.city` and `obj1.city`. This is because `obj3.artwork`, `obj2.artwork`, and `obj1` are the same object. This is difficult to see when you think of objects as "nested". Instead, they are separate objects "pointing" at each other with properties.
+
+</DeepDive>  
+
+### Write concise update logic with Immer {/*write-concise-update-logic-with-immer*/}
+
+If your state is deeply nested, you might want to consider [flattening it.](/learn/choosing-the-state-structure#avoid-deeply-nested-state) But, if you don't want to change your state structure, you might prefer a shortcut to nested spreads. [Immer](https://github.com/immerjs/use-immer) is a popular library that lets you write using the convenient but mutating syntax and takes care of producing the copies for you. With Immer, the code you write looks like you are "breaking the rules" and mutating an object:
+
+```js
+updatePerson(draft => {
+  draft.artwork.city = 'Lagos';
+});
+```
+
+But unlike a regular mutation, it doesn't overwrite the past state!
+
+<DeepDive>
+
+#### How does Immer work? {/*how-does-immer-work*/}
+
+The `draft` provided by Immer is a special type of object, called a [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy), that "records" what you do with it. This is why you can mutate it freely as much as you like! Under the hood, Immer figures out which parts of the `draft` have been changed, and produces a completely new object that contains your edits.
+
+</DeepDive>
+
+To try Immer:
+
+1. Add `use-immer` to your `package.json` as a dependency
+2. Run `npm install`
+3. Then replace `import { useState } from 'react'` with `import { useImmer } from 'use-immer'`
+
+Here is the above example converted to Immer:
+
+<Sandpack>
+
+```js
+import { useImmer } from 'use-immer';
+
+export default function Form() {
+  const [person, updatePerson] = useImmer({
+    name: 'Niki de Saint Phalle',
+    artwork: {
+      title: 'Blue Nana',
+      city: 'Hamburg',
+      image: 'https://i.imgur.com/Sd1AgUOm.jpg',
+    }
+  });
+
+  function handleNameChange(e) {
+    updatePerson(draft => {
+      draft.name = e.target.value;
+    });
+  }
+
+  function handleTitleChange(e) {
+    updatePerson(draft => {
+      draft.artwork.title = e.target.value;
+    });
+  }
+
+  function handleCityChange(e) {
+    updatePerson(draft => {
+      draft.artwork.city = e.target.value;
+    });
+  }
+
+  function handleImageChange(e) {
+    updatePerson(draft => {
+      draft.artwork.image = e.target.value;
+    });
+  }
+
+  return (
+    <>
+      <label>
+        Name:
+        <input
+          value={person.name}
+          onChange={handleNameChange}
+        />
+      </label>
+      <label>
+        Title:
+        <input
+          value={person.artwork.title}
+          onChange={handleTitleChange}
+        />
+      </label>
+      <label>
+        City:
+        <input
+          value={person.artwork.city}
+          onChange={handleCityChange}
+        />
+      </label>
+      <label>
+        Image:
+        <input
+          value={person.artwork.image}
+          onChange={handleImageChange}
+        />
+      </label>
+      <p>
+        <i>{person.artwork.title}</i>
+        {' by '}
+        {person.name}
+        <br />
+        (located in {person.artwork.city})
+      </p>
+      <img 
+        src={person.artwork.image} 
+        alt={person.artwork.title}
+      />
+    </>
+  );
+}
+```
+
+```json package.json
+{
+  "dependencies": {
+    "immer": "1.7.3",
+    "react": "latest",
+    "react-dom": "latest",
+    "react-scripts": "latest",
+    "use-immer": "0.5.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+```css
+label { display: block; }
+input { margin-left: 5px; margin-bottom: 5px; }
+img { width: 200px; height: 200px; }
+```
+
+</Sandpack>
+
+Notice how much more concise the event handlers have become. You can mix and match `useState` and `useImmer` in a single component as much as you like. Immer is a great way to keep the update handlers concise, especially if there's nesting in your state, and copying objects leads to repetitive code.
+
+<DeepDive>
+
+#### Why is mutating state not recommended in React? {/*why-is-mutating-state-not-recommended-in-react*/}
+
+There are a few reasons:
+
+* **Debugging:** If you use `console.log` and don't mutate state, your past logs won't get clobbered by the more recent state changes. So you can clearly see how state has changed between renders.
+* **Optimizations:** Common React [optimization strategies](/reference/react/memo) rely on skipping work if previous props or state are the same as the next ones. If you never mutate state, it is very fast to check whether there were any changes. If `prevObj === obj`, you can be sure that nothing could have changed inside of it.
+* **New Features:** The new React features we're building rely on state being [treated like a snapshot.](/learn/state-as-a-snapshot) If you're mutating past versions of state, that may prevent you from using the new features.
+* **Requirement Changes:** Some application features, like implementing Undo/Redo, showing a history of changes, or letting the user reset a form to earlier values, are easier to do when nothing is mutated. This is because you can keep past copies of state in memory, and reuse them when appropriate. If you start with a mutative approach, features like this can be difficult to add later on.
+* **Simpler Implementation:** Because React does not rely on mutation, it does not need to do anything special with your objects. It does not need to hijack their properties, always wrap them into Proxies, or do other work at initialization as many "reactive" solutions do. This is also why React lets you put any object into state--no matter how large--without additional performance or correctness pitfalls.
+
+In practice, you can often "get away" with mutating state in React, but we strongly advise you not to do that so that you can use new React features developed with this approach in mind. Future contributors and perhaps even your future self will thank you!
+
+</DeepDive>
+
+<Recap>
+
+* Treat all state in React as immutable.
+* When you store objects in state, mutating them will not trigger renders and will change the state in previous render "snapshots".
+* Instead of mutating an object, create a *new* version of it, and trigger a re-render by setting state to it.
+* You can use the `{...obj, something: 'newValue'}` object spread syntax to create copies of objects.
+* Spread syntax is shallow: it only copies one level deep.
+* To update a nested object, you need to create copies all the way up from the place you're updating.
+* To reduce repetitive copying code, use Immer.
+
+</Recap>
+
+
+
+<Challenges>
+
+#### Fix incorrect state updates {/*fix-incorrect-state-updates*/}
+
+This form has a few bugs. Click the button that increases the score a few times. Notice that it does not increase. Then edit the first name, and notice that the score has suddenly "caught up" with your changes. Finally, edit the last name, and notice that the score has disappeared completely.
+
+Your task is to fix all of these bugs. As you fix them, explain why each of them happens.
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function Scoreboard() {
+  const [player, setPlayer] = useState({
+    firstName: 'Ranjani',
+    lastName: 'Shettar',
+    score: 10,
+  });
+
+  function handlePlusClick() {
+    player.score++;
+  }
+
+  function handleFirstNameChange(e) {
+    setPlayer({
+      ...player,
+      firstName: e.target.value,
+    });
+  }
+
+  function handleLastNameChange(e) {
+    setPlayer({
+      lastName: e.target.value
+    });
+  }
+
+  return (
+    <>
+      <label>
+        Score: <b>{player.score}</b>
+        {' '}
+        <button onClick={handlePlusClick}>
+          +1
+        </button>
+      </label>
+      <label>
+        First name:
+        <input
+          value={player.firstName}
+          onChange={handleFirstNameChange}
+        />
+      </label>
+      <label>
+        Last name:
+        <input
+          value={player.lastName}
+          onChange={handleLastNameChange}
+        />
+      </label>
+    </>
+  );
+}
+```
+
+```css
+label { display: block; margin-bottom: 10px; }
+input { margin-left: 5px; margin-bottom: 5px; }
+```
+
+</Sandpack>
+
+<Solution>
+
+Here is a version with both bugs fixed:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function Scoreboard() {
+  const [player, setPlayer] = useState({
+    firstName: 'Ranjani',
+    lastName: 'Shettar',
+    score: 10,
+  });
+
+  function handlePlusClick() {
+    setPlayer({
+      ...player,
+      score: player.score + 1,
+    });
+  }
+
+  function handleFirstNameChange(e) {
+    setPlayer({
+      ...player,
+      firstName: e.target.value,
+    });
+  }
+
+  function handleLastNameChange(e) {
+    setPlayer({
+      ...player,
+      lastName: e.target.value
+    });
+  }
+
+  return (
+    <>
+      <label>
+        Score: <b>{player.score}</b>
+        {' '}
+        <button onClick={handlePlusClick}>
+          +1
+        </button>
+      </label>
+      <label>
+        First name:
+        <input
+          value={player.firstName}
+          onChange={handleFirstNameChange}
+        />
+      </label>
+      <label>
+        Last name:
+        <input
+          value={player.lastName}
+          onChange={handleLastNameChange}
+        />
+      </label>
+    </>
+  );
+}
+```
+
+```css
+label { display: block; }
+input { margin-left: 5px; margin-bottom: 5px; }
+```
+
+</Sandpack>
+
+The problem with `handlePlusClick` was that it mutated the `player` object. As a result, React did not know that there's a reason to re-render, and did not update the score on the screen. This is why, when you edited the first name, the state got updated, triggering a re-render which _also_ updated the score on the screen.
+
+The problem with `handleLastNameChange` was that it did not copy the existing `...player` fields into the new object. This is why the score got lost after you edited the last name.
+
+</Solution>
+
+#### Find and fix the mutation {/*find-and-fix-the-mutation*/}
+
+There is a draggable box on a static background. You can change the box's color using the select input.
+
+But there is a bug. If you move the box first, and then change its color, the background (which isn't supposed to move!) will "jump" to the box position. But this should not happen: the `Background`'s `position` prop is set to `initialPosition`, which is `{ x: 0, y: 0 }`. Why is the background moving after the color change?
+
+Find the bug and fix it.
+
+<Hint>
+
+If something unexpected changes, there is a mutation. Find the mutation in `App.js` and fix it.
+
+</Hint>
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+import Background from './Background.js';
+import Box from './Box.js';
+
+const initialPosition = {
+  x: 0,
+  y: 0
+};
+
+export default function Canvas() {
+  const [shape, setShape] = useState({
+    color: 'orange',
+    position: initialPosition
+  });
+
+  function handleMove(dx, dy) {
+    shape.position.x += dx;
+    shape.position.y += dy;
+  }
+
+  function handleColorChange(e) {
+    setShape({
+      ...shape,
+      color: e.target.value
+    });
+  }
+
+  return (
+    <>
+      <select
+        value={shape.color}
+        onChange={handleColorChange}
+      >
+        <option value="orange">orange</option>
+        <option value="lightpink">lightpink</option>
+        <option value="aliceblue">aliceblue</option>
+      </select>
+      <Background
+        position={initialPosition}
+      />
+      <Box
+        color={shape.color}
+        position={shape.position}
+        onMove={handleMove}
+      >
+        Drag me!
+      </Box>
+    </>
+  );
+}
+```
+
+```js Box.js
+import { useState } from 'react';
+
+export default function Box({
+  children,
+  color,
+  position,
+  onMove
+}) {
+  const [
+    lastCoordinates,
+    setLastCoordinates
+  ] = useState(null);
+
+  function handlePointerDown(e) {
+    e.target.setPointerCapture(e.pointerId);
+    setLastCoordinates({
+      x: e.clientX,
+      y: e.clientY,
+    });
+  }
+
+  function handlePointerMove(e) {
+    if (lastCoordinates) {
+      setLastCoordinates({
+        x: e.clientX,
+        y: e.clientY,
+      });
+      const dx = e.clientX - lastCoordinates.x;
+      const dy = e.clientY - lastCoordinates.y;
+      onMove(dx, dy);
+    }
+  }
+
+  function handlePointerUp(e) {
+    setLastCoordinates(null);
+  }
+
+  return (
+    <div
+      onPointerDown={handlePointerDown}
+      onPointerMove={handlePointerMove}
+      onPointerUp={handlePointerUp}
+      style={{
+        width: 100,
+        height: 100,
+        cursor: 'grab',
+        backgroundColor: color,
+        position: 'absolute',
+        border: '1px solid black',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        transform: `translate(
+          ${position.x}px,
+          ${position.y}px
+        )`,
+      }}
+    >{children}</div>
+  );
+}
+```
+
+```js Background.js
+export default function Background({
+  position
+}) {
+  return (
+    <div style={{
+      position: 'absolute',
+      transform: `translate(
+        ${position.x}px,
+        ${position.y}px
+      )`,
+      width: 250,
+      height: 250,
+      backgroundColor: 'rgba(200, 200, 0, 0.2)',
+    }} />
+  );
+};
+```
+
+```css
+body { height: 280px; }
+select { margin-bottom: 10px; }
+```
+
+</Sandpack>
+
+<Solution>
+
+The problem was in the mutation inside `handleMove`. It mutated `shape.position`, but that's the same object that `initialPosition` points at. This is why both the shape and the background move. (It's a mutation, so the change doesn't reflect on the screen until an unrelated update--the color change--triggers a re-render.)
+
+The fix is to remove the mutation from `handleMove`, and use the spread syntax to copy the shape. Note that `+=` is a mutation, so you need to rewrite it to use a regular `+` operation.
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+import Background from './Background.js';
+import Box from './Box.js';
+
+const initialPosition = {
+  x: 0,
+  y: 0
+};
+
+export default function Canvas() {
+  const [shape, setShape] = useState({
+    color: 'orange',
+    position: initialPosition
+  });
+
+  function handleMove(dx, dy) {
+    setShape({
+      ...shape,
+      position: {
+        x: shape.position.x + dx,
+        y: shape.position.y + dy,
+      }
+    });
+  }
+
+  function handleColorChange(e) {
+    setShape({
+      ...shape,
+      color: e.target.value
+    });
+  }
+
+  return (
+    <>
+      <select
+        value={shape.color}
+        onChange={handleColorChange}
+      >
+        <option value="orange">orange</option>
+        <option value="lightpink">lightpink</option>
+        <option value="aliceblue">aliceblue</option>
+      </select>
+      <Background
+        position={initialPosition}
+      />
+      <Box
+        color={shape.color}
+        position={shape.position}
+        onMove={handleMove}
+      >
+        Drag me!
+      </Box>
+    </>
+  );
+}
+```
+
+```js Box.js
+import { useState } from 'react';
+
+export default function Box({
+  children,
+  color,
+  position,
+  onMove
+}) {
+  const [
+    lastCoordinates,
+    setLastCoordinates
+  ] = useState(null);
+
+  function handlePointerDown(e) {
+    e.target.setPointerCapture(e.pointerId);
+    setLastCoordinates({
+      x: e.clientX,
+      y: e.clientY,
+    });
+  }
+
+  function handlePointerMove(e) {
+    if (lastCoordinates) {
+      setLastCoordinates({
+        x: e.clientX,
+        y: e.clientY,
+      });
+      const dx = e.clientX - lastCoordinates.x;
+      const dy = e.clientY - lastCoordinates.y;
+      onMove(dx, dy);
+    }
+  }
+
+  function handlePointerUp(e) {
+    setLastCoordinates(null);
+  }
+
+  return (
+    <div
+      onPointerDown={handlePointerDown}
+      onPointerMove={handlePointerMove}
+      onPointerUp={handlePointerUp}
+      style={{
+        width: 100,
+        height: 100,
+        cursor: 'grab',
+        backgroundColor: color,
+        position: 'absolute',
+        border: '1px solid black',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        transform: `translate(
+          ${position.x}px,
+          ${position.y}px
+        )`,
+      }}
+    >{children}</div>
+  );
+}
+```
+
+```js Background.js
+export default function Background({
+  position
+}) {
+  return (
+    <div style={{
+      position: 'absolute',
+      transform: `translate(
+        ${position.x}px,
+        ${position.y}px
+      )`,
+      width: 250,
+      height: 250,
+      backgroundColor: 'rgba(200, 200, 0, 0.2)',
+    }} />
+  );
+};
+```
+
+```css
+body { height: 280px; }
+select { margin-bottom: 10px; }
+```
+
+</Sandpack>
+
+</Solution>
+
+#### Update an object with Immer {/*update-an-object-with-immer*/}
+
+This is the same buggy example as in the previous challenge. This time, fix the mutation by using Immer. For your convenience, `useImmer` is already imported, so you need to change the `shape` state variable to use it.
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+import { useImmer } from 'use-immer';
+import Background from './Background.js';
+import Box from './Box.js';
+
+const initialPosition = {
+  x: 0,
+  y: 0
+};
+
+export default function Canvas() {
+  const [shape, setShape] = useState({
+    color: 'orange',
+    position: initialPosition
+  });
+
+  function handleMove(dx, dy) {
+    shape.position.x += dx;
+    shape.position.y += dy;
+  }
+
+  function handleColorChange(e) {
+    setShape({
+      ...shape,
+      color: e.target.value
+    });
+  }
+
+  return (
+    <>
+      <select
+        value={shape.color}
+        onChange={handleColorChange}
+      >
+        <option value="orange">orange</option>
+        <option value="lightpink">lightpink</option>
+        <option value="aliceblue">aliceblue</option>
+      </select>
+      <Background
+        position={initialPosition}
+      />
+      <Box
+        color={shape.color}
+        position={shape.position}
+        onMove={handleMove}
+      >
+        Drag me!
+      </Box>
+    </>
+  );
+}
+```
+
+```js Box.js
+import { useState } from 'react';
+
+export default function Box({
+  children,
+  color,
+  position,
+  onMove
+}) {
+  const [
+    lastCoordinates,
+    setLastCoordinates
+  ] = useState(null);
+
+  function handlePointerDown(e) {
+    e.target.setPointerCapture(e.pointerId);
+    setLastCoordinates({
+      x: e.clientX,
+      y: e.clientY,
+    });
+  }
+
+  function handlePointerMove(e) {
+    if (lastCoordinates) {
+      setLastCoordinates({
+        x: e.clientX,
+        y: e.clientY,
+      });
+      const dx = e.clientX - lastCoordinates.x;
+      const dy = e.clientY - lastCoordinates.y;
+      onMove(dx, dy);
+    }
+  }
+
+  function handlePointerUp(e) {
+    setLastCoordinates(null);
+  }
+
+  return (
+    <div
+      onPointerDown={handlePointerDown}
+      onPointerMove={handlePointerMove}
+      onPointerUp={handlePointerUp}
+      style={{
+        width: 100,
+        height: 100,
+        cursor: 'grab',
+        backgroundColor: color,
+        position: 'absolute',
+        border: '1px solid black',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        transform: `translate(
+          ${position.x}px,
+          ${position.y}px
+        )`,
+      }}
+    >{children}</div>
+  );
+}
+```
+
+```js Background.js
+export default function Background({
+  position
+}) {
+  return (
+    <div style={{
+      position: 'absolute',
+      transform: `translate(
+        ${position.x}px,
+        ${position.y}px
+      )`,
+      width: 250,
+      height: 250,
+      backgroundColor: 'rgba(200, 200, 0, 0.2)',
+    }} />
+  );
+};
+```
+
+```css
+body { height: 280px; }
+select { margin-bottom: 10px; }
+```
+
+```json package.json
+{
+  "dependencies": {
+    "immer": "1.7.3",
+    "react": "latest",
+    "react-dom": "latest",
+    "react-scripts": "latest",
+    "use-immer": "0.5.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+</Sandpack>
+
+<Solution>
+
+This is the solution rewritten with Immer. Notice how the event handlers are written in a mutating fashion, but the bug does not occur. This is because under the hood, Immer never mutates the existing objects.
+
+<Sandpack>
+
+```js App.js
+import { useImmer } from 'use-immer';
+import Background from './Background.js';
+import Box from './Box.js';
+
+const initialPosition = {
+  x: 0,
+  y: 0
+};
+
+export default function Canvas() {
+  const [shape, updateShape] = useImmer({
+    color: 'orange',
+    position: initialPosition
+  });
+
+  function handleMove(dx, dy) {
+    updateShape(draft => {
+      draft.position.x += dx;
+      draft.position.y += dy;
+    });
+  }
+
+  function handleColorChange(e) {
+    updateShape(draft => {
+      draft.color = e.target.value;
+    });
+  }
+
+  return (
+    <>
+      <select
+        value={shape.color}
+        onChange={handleColorChange}
+      >
+        <option value="orange">orange</option>
+        <option value="lightpink">lightpink</option>
+        <option value="aliceblue">aliceblue</option>
+      </select>
+      <Background
+        position={initialPosition}
+      />
+      <Box
+        color={shape.color}
+        position={shape.position}
+        onMove={handleMove}
+      >
+        Drag me!
+      </Box>
+    </>
+  );
+}
+```
+
+```js Box.js
+import { useState } from 'react';
+
+export default function Box({
+  children,
+  color,
+  position,
+  onMove
+}) {
+  const [
+    lastCoordinates,
+    setLastCoordinates
+  ] = useState(null);
+
+  function handlePointerDown(e) {
+    e.target.setPointerCapture(e.pointerId);
+    setLastCoordinates({
+      x: e.clientX,
+      y: e.clientY,
+    });
+  }
+
+  function handlePointerMove(e) {
+    if (lastCoordinates) {
+      setLastCoordinates({
+        x: e.clientX,
+        y: e.clientY,
+      });
+      const dx = e.clientX - lastCoordinates.x;
+      const dy = e.clientY - lastCoordinates.y;
+      onMove(dx, dy);
+    }
+  }
+
+  function handlePointerUp(e) {
+    setLastCoordinates(null);
+  }
+
+  return (
+    <div
+      onPointerDown={handlePointerDown}
+      onPointerMove={handlePointerMove}
+      onPointerUp={handlePointerUp}
+      style={{
+        width: 100,
+        height: 100,
+        cursor: 'grab',
+        backgroundColor: color,
+        position: 'absolute',
+        border: '1px solid black',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        transform: `translate(
+          ${position.x}px,
+          ${position.y}px
+        )`,
+      }}
+    >{children}</div>
+  );
+}
+```
+
+```js Background.js
+export default function Background({
+  position
+}) {
+  return (
+    <div style={{
+      position: 'absolute',
+      transform: `translate(
+        ${position.x}px,
+        ${position.y}px
+      )`,
+      width: 250,
+      height: 250,
+      backgroundColor: 'rgba(200, 200, 0, 0.2)',
+    }} />
+  );
+};
+```
+
+```css
+body { height: 280px; }
+select { margin-bottom: 10px; }
+```
+
+```json package.json
+{
+  "dependencies": {
+    "immer": "1.7.3",
+    "react": "latest",
+    "react-dom": "latest",
+    "react-scripts": "latest",
+    "use-immer": "0.5.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+</Sandpack>
+
+</Solution>
+
+</Challenges>
diff --git a/beta/src/content/learn/writing-markup-with-jsx.md b/beta/src/content/learn/writing-markup-with-jsx.md
new file mode 100644
index 000000000..9030d1a8f
--- /dev/null
+++ b/beta/src/content/learn/writing-markup-with-jsx.md
@@ -0,0 +1,353 @@
+---
+title: Writing Markup with JSX
+---
+
+<Intro>
+
+*JSX* is a syntax extension for JavaScript that lets you write HTML-like markup inside a JavaScript file. Although there are other ways to write components, most React developers prefer the conciseness of JSX, and most codebases use it.
+
+</Intro>
+
+<YouWillLearn>
+
+* Why React mixes markup with rendering logic
+* How JSX is different from HTML
+* How to display information with JSX
+
+</YouWillLearn>
+
+## JSX: Putting markup into JavaScript {/*jsx-putting-markup-into-javascript*/}
+
+The Web has been built on HTML, CSS, and JavaScript. For many years, web developers kept content in HTML, design in CSS, and logic in JavaScript—often in separate files! Content was marked up inside HTML while the page's logic lived separately in JavaScript:
+
+<DiagramGroup>
+
+<Diagram name="writing_jsx_html" height={237} width={325} alt="HTML markup with purple background and a div with two child tags: p and form. ">
+
+HTML
+
+</Diagram>
+
+<Diagram name="writing_jsx_js" height={237} width={325} alt="Three JavaScript handlers with yellow background: onSubmit, onLogin, and onClick.">
+
+JavaScript
+
+</Diagram>
+
+</DiagramGroup>
+
+But as the Web became more interactive, logic increasingly determined content. JavaScript was in charge of the HTML! This is why **in React, rendering logic and markup live together in the same place—components.**
+
+<DiagramGroup>
+
+<Diagram name="writing_jsx_sidebar" height={330} width={325} alt="React component with HTML and JavaScript from previous examples mixed. Function name is Sidebar which calls the function isLoggedIn, highlighted in yellow. Nested inside the function highlighted in purple is the p tag from before, and a Form tag referencing the component shown in the next diagram.">
+
+`Sidebar.js` React component
+
+</Diagram>
+
+<Diagram name="writing_jsx_form" height={330} width={325} alt="React component with HTML and JavaScript from previous examples mixed. Function name is Form containing two handlers onClick and onSubmit highlighted in yellow. Following the handlers is HTML highlighted in purple. The HTML contains a form element with a nested input element, each with an onClick prop.">
+
+`Form.js` React component
+
+</Diagram>
+
+</DiagramGroup>
+
+Keeping a button's rendering logic and markup together ensures that they stay in sync with each other on every edit. Conversely, details that are unrelated, such as the button's markup and a sidebar's markup, are isolated from each other, making it safer to change either of them on their own.
+
+Each React component is a JavaScript function that may contain some markup that React renders into the browser. React components use a syntax extension called JSX to represent that markup. JSX looks a lot like HTML, but it is a bit stricter and can display dynamic information. The best way to understand this is to convert some HTML markup to JSX markup.
+
+<Note>
+
+JSX and React are two separate things. They're often used together, but you *can* [use them independently](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#whats-a-jsx-transform) of each other. JSX is a syntax extension, while React is a JavaScript library.
+
+</Note>
+
+## Converting HTML to JSX {/*converting-html-to-jsx*/}
+
+Suppose that you have some (perfectly valid) HTML:
+
+```html
+<h1>Hedy Lamarr's Todos</h1>
+<img 
+  src="https://i.imgur.com/yXOvdOSs.jpg" 
+  alt="Hedy Lamarr" 
+  class="photo"
+>
+<ul>
+    <li>Invent new traffic lights
+    <li>Rehearse a movie scene
+    <li>Improve the spectrum technology
+</ul>
+```
+
+And you want to put it into your component:
+
+```js
+export default function TodoList() {
+  return (
+    // ???
+  )
+}
+```
+
+If you copy and paste it as is, it will not work:
+
+
+<Sandpack>
+
+```js
+export default function TodoList() {
+  return (
+    // This doesn't quite work!
+    <h1>Hedy Lamarr's Todos</h1>
+    <img 
+      src="https://i.imgur.com/yXOvdOSs.jpg" 
+      alt="Hedy Lamarr" 
+      class="photo"
+    >
+    <ul>
+      <li>Invent new traffic lights
+      <li>Rehearse a movie scene
+      <li>Improve the spectrum technology
+    </ul>
+  );
+}
+```
+
+```css
+img { height: 90px }
+```
+
+</Sandpack>
+
+This is because JSX is stricter and has a few more rules than HTML! If you read the error messages above, they'll guide you to fix the markup, or you can follow the guide below.
+
+<Note>
+
+Most of the times, React's on-screen error messages will help you find where the problem is. Give them a read if you get stuck!
+
+</Note>
+
+## The Rules of JSX {/*the-rules-of-jsx*/}
+
+### 1. Return a single root element {/*1-return-a-single-root-element*/}
+
+To return multiple elements from a component, **wrap them with a single parent tag.**
+
+For example, you can use a `<div>`:
+
+```js {1,11}
+<div>
+  <h1>Hedy Lamarr's Todos</h1>
+  <img 
+    src="https://i.imgur.com/yXOvdOSs.jpg" 
+    alt="Hedy Lamarr" 
+    class="photo"
+  >
+  <ul>
+    ...
+  </ul>
+</div>
+```
+
+
+If you don't want to add an extra `<div>` to your markup, you can write `<>` and `</>` instead:
+
+```js {1,11}
+<>
+  <h1>Hedy Lamarr's Todos</h1>
+  <img 
+    src="https://i.imgur.com/yXOvdOSs.jpg" 
+    alt="Hedy Lamarr" 
+    class="photo"
+  >
+  <ul>
+    ...
+  </ul>
+</>
+```
+
+This empty tag is called a *[Fragment.](/reference/react/Fragment)* Fragments let you group things without leaving any trace in the browser HTML tree.
+
+<DeepDive>
+
+#### Why do multiple JSX tags need to be wrapped? {/*why-do-multiple-jsx-tags-need-to-be-wrapped*/}
+
+JSX looks like HTML, but under the hood it is transformed into plain JavaScript objects. You can't return two objects from a function without wrapping them into an array. This explains why you also can't return two JSX tags without wrapping them into another tag or a Fragment.
+
+</DeepDive>
+
+### 2. Close all the tags {/*2-close-all-the-tags*/}
+
+JSX requires tags to be explicitly closed: self-closing tags like `<img>` must become `<img />`, and wrapping tags like `<li>oranges` must be written as `<li>oranges</li>`.
+
+This is how Hedy Lamarr's image and list items look closed:
+
+```js {2-6,8-10}
+<>
+  <img 
+    src="https://i.imgur.com/yXOvdOSs.jpg" 
+    alt="Hedy Lamarr" 
+    class="photo"
+   />
+  <ul>
+    <li>Invent new traffic lights</li>
+    <li>Rehearse a movie scene</li>
+    <li>Improve the spectrum technology</li>
+  </ul>
+</>
+```
+
+### 3. camelCase <s>all</s> most of the things! {/*3-camelcase-salls-most-of-the-things*/}
+
+JSX turns into JavaScript and attributes written in JSX become keys of JavaScript objects. In your own components, you will often want to read those attributes into variables. But JavaScript has limitations on variable names. For example, their names can't contain dashes or be reserved words like `class`.
+
+This is why, in React, many HTML and SVG attributes are written in camelCase. For example, instead of `stroke-width` you use `strokeWidth`. Since `class` is a reserved word, in React you write `className` instead, named after the [corresponding DOM property](https://developer.mozilla.org/en-US/docs/Web/API/Element/className):
+
+```js {4}
+<img 
+  src="https://i.imgur.com/yXOvdOSs.jpg" 
+  alt="Hedy Lamarr" 
+  className="photo"
+/>
+```
+
+You can [find all these attributes in the React DOM Elements.](TODO) If you get one wrong, don't worry—React will print a message with a possible correction to the [browser console.](https://developer.mozilla.org/docs/Tools/Browser_Console)
+
+<Pitfall>
+
+For historical reasons, [`aria-*`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) and [`data-*`](https://developer.mozilla.org/docs/Learn/HTML/Howto/Use_data_attributes) attributes are written as in HTML with dashes.
+
+</Pitfall>
+
+### Pro-tip: Use a JSX Converter {/*pro-tip-use-a-jsx-converter*/}
+
+Converting all these attributes in existing markup can be tedious! We recommend using a [converter](https://transform.tools/html-to-jsx) to translate your existing HTML and SVG to JSX. Converters are very useful in practice, but it's still worth understanding what is going on so that you can comfortably write JSX on your own.
+
+Here is your final result:
+
+<Sandpack>
+
+```js
+export default function TodoList() {
+  return (
+    <>
+      <h1>Hedy Lamarr's Todos</h1>
+      <img 
+        src="https://i.imgur.com/yXOvdOSs.jpg" 
+        alt="Hedy Lamarr" 
+        className="photo" 
+      />
+      <ul>
+        <li>Invent new traffic lights</li>
+        <li>Rehearse a movie scene</li>
+        <li>Improve the spectrum technology</li>
+      </ul>
+    </>
+  );
+}
+```
+
+```css
+img { height: 90px }
+```
+
+</Sandpack>
+
+<Recap>
+
+Now you know why JSX exists and how to use it in components:
+
+* React components group rendering logic together with markup because they are related.
+* JSX is similar to HTML, with a few differences. You can use a [converter](https://transform.tools/html-to-jsx) if you need to.
+* Error messages will often point you in the right direction to fixing your markup.
+
+</Recap>
+
+
+
+<Challenges>
+
+#### Convert some HTML to JSX {/*convert-some-html-to-jsx*/}
+
+This HTML was pasted into a component, but it's not valid JSX. Fix it:
+
+<Sandpack>
+
+```js
+export default function Bio() {
+  return (
+    <div class="intro">
+      <h1>Welcome to my website!</h1>
+    </div>
+    <p class="summary">
+      You can find my thoughts here.
+      <br><br>
+      <b>And <i>pictures</b></i> of scientists!
+    </p>
+  );
+}
+```
+
+```css
+.intro {
+  background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);
+  background-clip: text;
+  color: transparent;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.summary {
+  padding: 20px;
+  border: 10px solid gold;
+}
+```
+
+</Sandpack>
+
+Whether to do it by hand or using the converter is up to you!
+
+<Solution>
+
+<Sandpack>
+
+```js
+export default function Bio() {
+  return (
+    <div>
+      <div className="intro">
+        <h1>Welcome to my website!</h1>
+      </div>
+      <p className="summary">
+        You can find my thoughts here.
+        <br /><br />
+        <b>And <i>pictures</i></b> of scientists!
+      </p>
+    </div>
+  );
+}
+```
+
+```css
+.intro {
+  background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);
+  background-clip: text;
+  color: transparent;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.summary {
+  padding: 20px;
+  border: 10px solid gold;
+}
+```
+
+</Sandpack>
+
+</Solution>
+
+</Challenges>
diff --git a/beta/src/content/learn/you-might-not-need-an-effect.md b/beta/src/content/learn/you-might-not-need-an-effect.md
new file mode 100644
index 000000000..6b4f75931
--- /dev/null
+++ b/beta/src/content/learn/you-might-not-need-an-effect.md
@@ -0,0 +1,1730 @@
+---
+title: 'You Might Not Need an Effect'
+---
+
+<Intro>
+
+Effects are an escape hatch from the React paradigm. They let you "step outside" of React and synchronize your components with some external system like a non-React widget, network, or the browser DOM. If there is no external system involved (for example, if you want to update a component's state when some props or state change), you shouldn't need an Effect. Removing unnecessary Effects will make your code easier to follow, faster to run, and less error-prone.
+
+</Intro>
+
+<YouWillLearn>
+
+* Why and how to remove unnecessary Effects from your components
+* How to cache expensive computations without Effects
+* How to reset and adjust component state without Effects
+* How to share logic between event handlers
+* Which logic should be moved to event handlers
+* How to notify parent components about changes
+
+</YouWillLearn>
+
+## How to remove unnecessary Effects {/*how-to-remove-unnecessary-effects*/}
+
+There are two common cases in which you don't need Effects:
+
+* **You don't need Effects to transform data for rendering.** For example, let's say you want to filter a list before displaying it. You might feel tempted to write an Effect that updates a state variable when the list changes. However, this is inefficient. When you update your component's state, React will first call your component functions to calculate what should be on the screen. Then React will ["commit"](/learn/render-and-commit) these changes to the DOM, updating the screen. Then React will run your Effects. If your Effect *also* immediately updates the state, this restarts the whole process from scratch! To avoid the unnecessary render passes, transform all the data at the top level of your components. That code will automatically re-run whenever your props or state change.
+* **You don't need Effects to handle user events.** For example, let's say you want to send an `/api/buy` POST request and show a notification when the user buys a product. In the Buy button click event handler, you know exactly what happened. By the time an Effect runs, you don't know *what* the user did (for example, which button was clicked). This is why you'll usually handle user events in the corresponding event handlers.
+
+You *do* need Effects to [synchronize](/learn/synchronizing-with-effects#what-are-effects-and-how-are-they-different-from-events) with external systems. For example, you can write an Effect that keeps a jQuery widget synchronized with the React state. You can also fetch data with Effects: for example, you can synchronize the search results with the current search query. Keep in mind that modern [frameworks](/learn/start-a-new-react-project#building-with-a-full-featured-framework) provide more efficient built-in data fetching mechanisms than writing Effects directly in your components.
+
+To help you gain the right intuition, let's look at some common concrete examples!
+
+### Updating state based on props or state {/*updating-state-based-on-props-or-state*/}
+
+Suppose you have a component with two state variables: `firstName` and `lastName`. You want to calculate a `fullName` from them by concatenating them. Moreover, you'd like `fullName` to update whenever `firstName` or `lastName` change. Your first instinct might be to add a `fullName` state variable and update it in an Effect:
+
+```js {5-9}
+function Form() {
+  const [firstName, setFirstName] = useState('Taylor');
+  const [lastName, setLastName] = useState('Swift');
+
+  // 🔴 Avoid: redundant state and unnecessary Effect
+  const [fullName, setFullName] = useState('');
+  useEffect(() => {
+    setFullName(firstName + ' ' + lastName);
+  }, [firstName, lastName]);
+  // ...
+}
+```
+
+This is more complicated than necessary. It is inefficient too: it does an entire render pass with a stale value for `fullName`, then immediately re-renders with the updated value. Remove both the state variable and the Effect:
+
+```js {4-5}
+function Form() {
+  const [firstName, setFirstName] = useState('Taylor');
+  const [lastName, setLastName] = useState('Swift');
+  // ✅ Good: calculated during rendering
+  const fullName = firstName + ' ' + lastName;
+  // ...
+}
+```
+
+**When something can be calculated from the existing props or state, [don't put it in state.](/learn/choosing-the-state-structure#avoid-redundant-state) Instead, calculate it during rendering.** This makes your code faster (you avoid the extra "cascading" updates), simpler (you remove some code), and less error-prone (you avoid bugs caused by different state variables getting out of sync with each other). If this approach feels new to you, [Thinking in React](/learn/thinking-in-react#step-3-find-the-minimal-but-complete-representation-of-ui-state) has some guidance on what should go into state.
+
+### Caching expensive calculations {/*caching-expensive-calculations*/}
+
+This component computes `visibleTodos` by taking the `todos` it receives by props and filtering them according to the `filter` prop. You might feel tempted to store the result in a state variable and update it in an Effect:
+
+```js {4-8}
+function TodoList({ todos, filter }) {
+  const [newTodo, setNewTodo] = useState('');
+
+  // 🔴 Avoid: redundant state and unnecessary Effect
+  const [visibleTodos, setVisibleTodos] = useState([]);
+  useEffect(() => {
+    setVisibleTodos(getFilteredTodos(todos, filter));
+  }, [todos, filter]);
+
+  // ...
+}
+```
+
+Like in the earlier example, this is both unnecessary and inefficient. First, remove the state and the Effect:
+
+```js {3-4}
+function TodoList({ todos, filter }) {
+  const [newTodo, setNewTodo] = useState('');
+  // ✅ This is fine if getFilteredTodos() is not slow.
+  const visibleTodos = getFilteredTodos(todos, filter);
+  // ...
+}
+```
+
+In many cases, this code is fine! But maybe `getFilteredTodos()` is slow or you have a lot of `todos`. In that case you don't want to recalculate `getFilteredTodos()` if some unrelated state variable like `newTodo` has changed.
+
+You can cache (or ["memoize"](https://en.wikipedia.org/wiki/Memoization)) an expensive calculation by wrapping it in a [`useMemo`](/reference/react/useMemo) Hook:
+
+```js {5-8}
+import { useMemo, useState } from 'react';
+
+function TodoList({ todos, filter }) {
+  const [newTodo, setNewTodo] = useState('');
+  const visibleTodos = useMemo(() => {
+    // ✅ Does not re-run unless todos or filter change
+    return getFilteredTodos(todos, filter);
+  }, [todos, filter]);
+  // ...
+}
+```
+
+Or, written as a single line:
+
+```js {5-6}
+import { useMemo, useState } from 'react';
+
+function TodoList({ todos, filter }) {
+  const [newTodo, setNewTodo] = useState('');
+  // ✅ Does not re-run getFilteredTodos() unless todos or filter change
+  const visibleTodos = useMemo(() => getFilteredTodos(todos, filter), [todos, filter]);
+  // ...
+}
+```
+
+**This tells React that you don't want the inner function to re-run unless either `todos` or `filter` have changed.** React will remember the return value of `getFilteredTodos()` during the initial render. During the next renders, it will check if `todos` or `filter` are different. If they're the same as last time, `useMemo` will return the last result it has stored. But if they are different, React will call the wrapped function again (and store _that_ result instead).
+
+The function you wrap in [`useMemo`](/reference/react/useMemo) runs during rendering, so this only works for [pure calculations.](/learn/keeping-components-pure)
+
+<DeepDive>
+
+#### How to tell if a calculation is expensive? {/*how-to-tell-if-a-calculation-is-expensive*/}
+
+In general, unless you're creating or looping over thousands of objects, it's probably not expensive. If you want to get more confidence, you can add a console log to measure the time spent in a piece of code:
+
+```js {1,3}
+console.time('filter array');
+const visibleTodos = getFilteredTodos(todos, filter);
+console.timeEnd('filter array');
+```
+
+Perform the interaction you're measuring (for example, typing into the input). You will then see logs like `filter array: 0.15ms` in your console. If the overall logged time adds up to a significant amount (say, `1ms` or more), it might make sense to memoize that calculation. As an experiment, you can then wrap the calculation in `useMemo` to verify whether the total logged time has decreased for that interaction or not:
+
+```js
+console.time('filter array');
+const visibleTodos = useMemo(() => {
+  return getFilteredTodos(todos, filter); // Skipped if todos and filter haven't changed
+}, [todos, filter]);
+console.timeEnd('filter array');
+```
+
+`useMemo` won't make the *first* render faster. It only helps you skip unnecessary work on updates.
+
+Keep in mind that your machine is probably faster than your users' so it's a good idea to test the performance with an artificial slowdown. For example, Chrome offers a [CPU Throttling](https://developer.chrome.com/blog/new-in-devtools-61/#throttling) option for this.
+
+Also note that measuring performance in development will not give you the most accurate results. (For example, when [Strict Mode](/reference/react/StrictMode) is on, you will see each component render twice rather than once.) To get the most accurate timings, build your app for production and test it on a device like your users have.
+
+</DeepDive>
+
+### Resetting all state when a prop changes {/*resetting-all-state-when-a-prop-changes*/}
+
+This `ProfilePage` component receives a `userId` prop. The page contains a comment input, and you use a `comment` state variable to hold its value. One day, you notice a problem: when you navigate from one profile to another, the `comment` state does not get reset. As a result, it's easy to accidentally post a comment on a wrong user's profile. To fix the issue, you want to clear out the `comment` state variable whenever the `userId` changes:
+
+```js {4-7}
+export default function ProfilePage({ userId }) {
+  const [comment, setComment] = useState('');
+
+  // 🔴 Avoid: Resetting state on prop change in an Effect
+  useEffect(() => {
+    setComment('');
+  }, [userId]);
+  // ...
+}
+```
+
+This is inefficient because `ProfilePage` and its children will first render with the stale value, and then render again. It is also complicated because you'd need to do this in *every* component that has some state inside `ProfilePage`. For example, if the comment UI is nested, you'd want to clear out nested comment state too.
+
+Instead, you can tell React that each user's profile is conceptually a _different_ profile by giving it an explicit key. Split your component in two and pass a `key` attribute from the outer component to the inner one:
+
+```js {5,11-12}
+export default function ProfilePage({ userId }) {
+  return (
+    <Profile
+      userId={userId}
+      key={userId}
+    />
+  );
+}
+
+function Profile({ userId }) {
+  // ✅ This and any other state below will reset on key change automatically
+  const [comment, setComment] = useState('');
+  // ...
+}
+```
+
+Normally, React preserves the state when the same component is rendered in the same spot. **By passing `userId` as a `key` to the `Profile` component, you're asking React to treat two `Profile` components with different `userId` as two different components that should not share any state.** Whenever the key (which you've set to `userId`) changes, React will recreate the DOM and [reset the state](/learn/preserving-and-resetting-state#option-2-resetting-state-with-a-key) of the `Profile` component and all of its children. As a result, the `comment` field will clear out automatically when navigating between profiles.
+
+Note that in this example, only the outer `ProfilePage` component is exported and visible to other files in the project. Components rendering `ProfilePage` don't need to pass the key to it: they pass `userId` as a regular prop. The fact `ProfilePage` passes it as a `key` to the inner `Profile` component is an implementation detail.
+
+### Adjusting some state when a prop changes {/*adjusting-some-state-when-a-prop-changes*/}
+
+Sometimes, you might want to reset or adjust a part of the state on a prop change, but not all of it.
+
+This `List` component receives a list of `items` as a prop, and maintains the selected item in the `selection` state variable. You want to reset the `selection` to `null` whenever the `items` prop receives a different array:
+
+```js {5-8}
+function List({ items }) {
+  const [isReverse, setIsReverse] = useState(false);
+  const [selection, setSelection] = useState(null);
+
+  // 🔴 Avoid: Adjusting state on prop change in an Effect
+  useEffect(() => {
+    setSelection(null);
+  }, [items]);
+  // ...
+}
+```
+
+This, too, is not ideal. Every time the `items` change, the `List` and its child components will render with a stale `selection` value at first. Then React will update the DOM and run the Effects. Finally, the `setSelection(null)` call will cause another re-render of the `List` and its child components, restarting this whole process again.
+
+Start by deleting the Effect. Instead, adjust the state directly during rendering:
+
+```js {5-11}
+function List({ items }) {
+  const [isReverse, setIsReverse] = useState(false);
+  const [selection, setSelection] = useState(null);
+
+  // Better: Adjust the state while rendering
+  const [prevItems, setPrevItems] = useState(items);
+  if (items !== prevItems) {
+    setPrevItems(items);
+    setSelection(null);
+  }
+  // ...
+}
+```
+
+[Storing information from previous renders](/reference/react/useState#storing-information-from-previous-renders) like this can be hard to understand, but it’s better than updating the same state in an Effect. In the above example, `setSelection` is called directly during a render. React will re-render the `List` *immediately* after it exits with a `return` statement. By that point, React hasn't rendered the `List` children or updated the DOM yet, so this lets the `List` children skip rendering the stale `selection` value.
+
+When you update a component during rendering, React throws away the returned JSX and immediately retries rendering. To avoid very slow cascading retries, React only lets you update the *same* component's state during a render. If you update another component's state during a render, you'll see an error. A condition like `items !== prevItems` is necessary to avoid loops. You may adjust state like this, but any other side effects (like changing the DOM or setting a timeout) should remain in event handlers or Effects to [keep your components predictable.](/learn/keeping-components-pure)
+
+**Although this pattern is more efficient than an Effect, most components shouldn't need it either.** No matter how you do it, adjusting state based on props or other state makes your data flow more difficult to understand and debug. Always check whether you can [reset all state with a key](#resetting-all-state-when-a-prop-changes) or [calculate everything during rendering](#updating-state-based-on-props-or-state) instead. For example, instead of storing (and resetting) the selected *item*, you can store the selected *item ID:*
+
+```js {3-5}
+function List({ items }) {
+  const [isReverse, setIsReverse] = useState(false);
+  const [selectedId, setSelectedId] = useState(null);
+  // ✅ Best: Calculate everything during rendering
+  const selection = items.find(item => item.id === selectedId) ?? null;
+  // ...
+}
+```
+
+Now there is no need to "adjust" the state at all. If the item with the selected ID is in the list, it remains selected. If it's not, the `selection` calculated during rendering will be `null` because no matching item was found. This behavior is a bit different, but arguably it's better because most changes to `items` now preserve the selection. However, you'd need to use `selection` in all the logic below because an item with `selectedId` might not exist.
+
+### Sharing logic between event handlers {/*sharing-logic-between-event-handlers*/}
+
+Let's say you have a product page with two buttons (Buy and Checkout) that both let you buy that product. You want to show a notification whenever the user puts the product in the cart. Adding the `showNotification()` call to both buttons' click handlers feels repetitive so you might be tempted to place this logic in an Effect:
+
+```js {2-7}
+function ProductPage({ product, addToCart }) {
+  // 🔴 Avoid: Event-specific logic inside an Effect
+  useEffect(() => {
+    if (product.isInCart) {
+      showNotification(`Added ${product.name} to the shopping cart!`);
+    }
+  }, [product]);
+
+  function handleBuyClick() {
+    addToCart(product);
+  }
+
+  function handleCheckoutClick() {
+    addToCart(product);
+    navigateTo('/checkout');
+  }
+  // ...
+}
+```
+
+This Effect is unnecessary. It will also most likely cause bugs. For example, let's say that your app "remembers" the shopping cart between the page reloads. If you add a product to the cart once and refresh the page, the notification will appear again. It will keep appearing every time you refresh that product's page. This is because `product.isInCart` will already be `true` on the page load, so the Effect above will call `showNotification()`.
+
+**When you're not sure whether some code should be in an Effect or in an event handler, ask yourself *why* this code needs to run. Use Effects only for code that should run *because* the component was displayed to the user.** In this example, the notification should appear because the user *pressed the button*, not because the page was displayed! Delete the Effect and put the shared logic into a function that you call from both event handlers:
+
+```js {2-6,9,13}
+function ProductPage({ product, addToCart }) {
+  // ✅ Good: Event-specific logic is called from event handlers
+  function buyProduct() {
+    addToCart(product);
+    showNotification(`Added ${product.name} to the shopping cart!`);
+  }
+
+  function handleBuyClick() {
+    buyProduct();
+  }
+
+  function handleCheckoutClick() {
+    buyProduct();
+    navigateTo('/checkout');
+  }
+  // ...
+}
+```
+
+This both removes the unnecessary Effect and fixes the bug.
+
+### Sending a POST request {/*sending-a-post-request*/}
+
+This `Form` component sends two kinds of POST requests. It sends an analytics event when it mounts. When you fill in the form and click the Submit button, it will send a POST request to the `/api/register` endpoint:
+
+```js {5-8,10-16}
+function Form() {
+  const [firstName, setFirstName] = useState('');
+  const [lastName, setLastName] = useState('');
+
+  // ✅ Good: This logic should run because the component was displayed
+  useEffect(() => {
+    post('/analytics/event', { eventName: 'visit_form' });
+  }, []);
+
+  // 🔴 Avoid: Event-specific logic inside an Effect
+  const [jsonToSubmit, setJsonToSubmit] = useState(null);
+  useEffect(() => {
+    if (jsonToSubmit !== null) {
+      post('/api/register', jsonToSubmit);
+    }
+  }, [jsonToSubmit]);
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    setJsonToSubmit({ firstName, lastName });
+  }
+  // ...
+}
+```
+
+Let's apply the same criteria as in the example before.
+
+The analytics POST request should remain in an Effect. This is because the _reason_ to send the analytics event is that the form was displayed. (It would fire twice in development, but [see here](/learn/synchronizing-with-effects#sending-analytics) for how to deal with that.)
+
+However, the `/api/register` POST request is not caused by the form being _displayed_. You only want to send the request at one specific moment in time: when the user presses the button. It should only ever happen _on that particular interaction_. Delete the second Effect and move that POST request into the event handler:
+
+```js {12-13}
+function Form() {
+  const [firstName, setFirstName] = useState('');
+  const [lastName, setLastName] = useState('');
+
+  // ✅ Good: This logic runs because the component was displayed
+  useEffect(() => {
+    post('/analytics/event', { eventName: 'visit_form' });
+  }, []);
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    // ✅ Good: Event-specific logic is in the event handler
+    post('/api/register', { firstName, lastName });
+  }
+  // ...
+}
+```
+
+When you choose whether to put some logic into an event handler or an Effect, the main question you need to answer is _what kind of logic_ it is from the user's perspective. If this logic is caused by a particular interaction, keep it in the event handler. If it's caused by the user _seeing_ the component on the screen, keep it in the Effect.
+
+### Chains of computations {/*chains-of-computations*/}
+
+Sometimes you might feel tempted to chain Effects that each adjust a piece of state based on other state:
+
+```js {7-29}
+function Game() {
+  const [card, setCard] = useState(null);
+  const [goldCardCount, setGoldCardCount] = useState(0);
+  const [round, setRound] = useState(1);
+  const [isGameOver, setIsGameOver] = useState(false);
+
+  // 🔴 Avoid: Chains of Effects that adjust the state solely to trigger each other
+  useEffect(() => {
+    if (card !== null && card.gold) {
+      setGoldCardCount(c => c + 1);
+    }
+  }, [card]);
+
+  useEffect(() => {
+    if (goldCardCount > 3) {
+      setRound(r => r + 1)
+      setGoldCardCount(0);
+    }
+  }, [goldCardCount]);
+
+  useEffect(() => {
+    if (round > 5) {
+      setIsGameOver(true);
+    }
+  }, [round]);
+
+  useEffect(() => {
+    alert('Good game!');
+  }, [isGameOver]);
+
+  function handlePlaceCard(nextCard) {
+    if (isGameOver) {
+      throw Error('Game already ended.');
+    } else {
+      setCard(nextCard);
+    }
+  }
+
+  // ...
+```
+
+There are two problems with this code.
+
+One problem is that it is very inefficient: the component (and its children) have to re-render between each `set` call in the chain. In the example above, in the worst case (`setCard` → render → `setGoldCardCount` → render → `setRound` → render → `setIsGameOver` → render) there are three unnecessary re-renders of the tree below.
+
+Even if it weren't slow, as your code evolves, you will run into cases where the "chain" you wrote doesn't fit the new requirements. Imagine you are adding a way to step through the history of the game moves. You'd do it by updating each state variable to a value from the past. However, setting the `card` state to a value from the past would trigger the Effect chain again and change the data you're showing. Code like this is often rigid and fragile.
+
+In this case, it's better to calculate what you can during rendering, and adjust the state in the event handler:
+
+```js {6-7,14-26}
+function Game() {
+  const [card, setCard] = useState(null);
+  const [goldCardCount, setGoldCardCount] = useState(0);
+  const [round, setRound] = useState(1);
+
+  // ✅ Calculate what you can during rendering
+  const isGameOver = round > 5;
+
+  function handlePlaceCard(nextCard) {
+    if (isGameOver) {
+      throw Error('Game already ended.');
+    }
+
+    // ✅ Calculate all the next state in the event handler
+    setCard(nextCard);
+    if (nextCard.gold) {
+      if (goldCardCount <= 3) {
+        setGoldCardCount(goldCardCount + 1);
+      } else {
+        setGoldCardCount(0);
+        setRound(round + 1);
+        if (round === 5) {
+          alert('Good game!');
+        }
+      }
+    }
+  }
+
+  // ...
+```
+
+This is a lot more efficient. Also, if you implement a way to view game history, now you will be able to set each state variable to a move from the past without triggering the Effect chain that adjusts every other value. If you need to reuse logic between several event handlers, you can [extract a function](#sharing-logic-between-event-handlers) and call it from those handlers.
+
+Remember that inside event handlers, [state behaves like a snapshot.](/learn/state-as-a-snapshot) For example, even after you call `setRound(round + 1)`, the `round` variable will reflect the value at the time the user clicked the button. If you need to use the next value for calculations, define it manually like `const nextRound = round + 1`.
+
+In some cases, you *can't* calculate the next state directly in the event handler. For example, imagine a form with multiple dropdowns where the options of the next dropdown depend on the selected value of the previous dropdown. Then, a chain of Effects fetching data is appropriate because you are synchronizing with network.
+
+### Initializing the application {/*initializing-the-application*/}
+
+Some logic should only run once when the app loads. You might place it in an Effect in the top-level component:
+
+```js {2-6}
+function App() {
+  // 🔴 Avoid: Effects with logic that should only ever run once
+  useEffect(() => {
+    loadDataFromLocalStorage();
+    checkAuthToken();
+  }, []);
+  // ...
+}
+```
+
+However, you'll quickly discover that it [runs twice in development.](/learn/synchronizing-with-effects#how-to-handle-the-effect-firing-twice-in-development) This can cause issues--for example, maybe it invalidates the authentication token because the function wasn't designed to be called twice. In general, your components should be resilient to being remounted. This includes your top-level `App` component. Although it may not ever get remounted in practice in production, following the same constraints in all components makes it easier to move and reuse code. If some logic must run *once per app load* rather than *once per component mount*, you can add a top-level variable to track whether it has already executed, and always skip re-running it:
+
+```js {1,5-6,10}
+let didInit = false;
+
+function App() {
+  useEffect(() => {
+    if (!didInit) {
+      didInit = true;
+      // ✅ Only runs once per app load
+      loadDataFromLocalStorage();
+      checkAuthToken();
+    }
+  }, []);
+  // ...
+}
+```
+
+You can also run it during module initialization and before the app renders:
+
+```js {1,5}
+if (typeof window !== 'undefined') { // Check if we're running in the browser.
+   // ✅ Only runs once per app load
+  checkAuthToken();
+  loadDataFromLocalStorage();
+}
+
+function App() {
+  // ...
+}
+```
+
+Code at the top level runs once when your component is imported--even if it doesn't end up being rendered. To avoid slowdown or surprising behavior when importing arbitrary components, don't overuse this pattern. Keep app-wide initialization logic to root component modules like `App.js` or in your application's entry point module.
+
+### Notifying parent components about state changes {/*notifying-parent-components-about-state-changes*/}
+
+Let's say you're writing a `Toggle` component with an internal `isOn` state which can be either `true` or `false`. There are a few different ways to toggle it (by clicking or dragging). You want to notify the parent component whenever the `Toggle` internal state changes, so you expose an `onChange` event and call it from an Effect:
+
+```js {4-7}
+function Toggle({ onChange }) {
+  const [isOn, setIsOn] = useState(false);
+
+  // 🔴 Avoid: The onChange handler runs too late
+  useEffect(() => {
+    onChange(isOn);
+  }, [isOn, onChange])
+
+  function handleClick() {
+    setIsOn(!isOn);
+  }
+
+  function handleDragEnd(e) {
+    if (isCloserToRightEdge(e)) {
+      setIsOn(true);
+    } else {
+      setIsOn(false);
+    }
+  }
+
+  // ...
+}
+```
+
+Like earlier, this is not ideal. The `Toggle` updates its state first, and React updates the screen. Then React runs the Effect, which calls the `onChange` function passed from a parent component. Now the parent component will update its own state, starting another render pass. It would be better to do everything in a single pass instead.
+
+Delete the Effect and instead update the state of *both* components within the same event handler:
+
+```js {5-7,11,16,18}
+function Toggle({ onChange }) {
+  const [isOn, setIsOn] = useState(false);
+
+  function updateToggle(nextIsOn) {
+    // ✅ Good: Perform all updates during the event that caused them
+    setIsOn(nextIsOn);
+    onChange(nextIsOn);
+  }
+
+  function handleClick() {
+    updateToggle(!isOn);
+  }
+
+  function handleDragEnd(e) {
+    if (isCloserToRightEdge(e)) {
+      updateToggle(true);
+    } else {
+      updateToggle(false);
+    }
+  }
+
+  // ...
+}
+```
+
+With this approach, both the `Toggle` component and its parent component update their state during the event. React [batches updates](/learn/queueing-a-series-of-state-updates) from different components together, so there will only be one render pass as a result.
+
+You might also be able to remove the state altogether, and instead receive `isOn` from the parent component:
+
+```js {1,2}
+// ✅ Also good: the component is fully controlled by its parent
+function Toggle({ isOn, onChange }) {
+  function handleClick() {
+    onChange(!isOn);
+  }
+
+  function handleDragEnd(e) {
+    if (isCloserToRightEdge(e)) {
+      onChange(true);
+    } else {
+      onChange(false);
+    }
+  }
+
+  // ...
+}
+```
+
+["Lifting state up"](/learn/sharing-state-between-components) lets the parent component fully control the `Toggle` by toggling the parent's own state. This means the parent component will have to contain more logic, but there will be less state overall to worry about. Whenever you try to keep two different state variables synchronized, it's a sign to try lifting state up instead!
+
+### Passing data to the parent {/*passing-data-to-the-parent*/}
+
+This `Child` component fetches some data and then passes it to the `Parent` component in an Effect:
+
+```js {9-14}
+function Parent() {
+  const [data, setData] = useState(null);
+  // ...
+  return <Child onFetched={setData} />;
+}
+
+function Child({ onFetched }) {
+  const data = useSomeAPI();
+  // 🔴 Avoid: Passing data to the parent in an Effect
+  useEffect(() => {
+    if (data) {
+      onFetched(data);
+    }
+  }, [onFetched, data]);
+  // ...
+}
+```
+
+In React, data flows from the parent components to their children. When you see something wrong on the screen, you can trace where the information comes from by going up the component chain until you find which component passes the wrong prop or has the wrong state. When child components update the state of their parent components in Effects, the data flow becomes very difficult to trace. Since both the child and the parent component need the same data, let the parent component fetch that data, and *pass it down* to the child instead:
+
+```js {4-5}
+function Parent() {
+  const data = useSomeAPI();
+  // ...
+  // ✅ Good: Passing data down to the child
+  return <Child data={data} />;
+}
+
+function Child({ data }) {
+  // ...
+}
+```
+
+This is simpler and keeps the data flow predictable: the data flows down from the parent to the child.
+
+### Subscribing to an external store {/*subscribing-to-an-external-store*/}
+
+Sometimes, your components may need to subscribe to some data outside of the React state. This data could be from a third-party library or a built-in browser API. Since this data can change without React's knowledge, you need to manually subscribe your components to it. This is often done with an Effect, for example:
+
+```js {2-17}
+function useOnlineStatus() {
+  // Not ideal: Manual store subscription in an Effect
+  const [isOnline, setIsOnline] = useState(true);
+  useEffect(() => {
+    function updateState() {
+      setIsOnline(navigator.onLine);
+    }
+
+    updateState();
+
+    window.addEventListener('online', updateState);
+    window.addEventListener('offline', updateState);
+    return () => {
+      window.removeEventListener('online', updateState);
+      window.removeEventListener('offline', updateState);
+    };
+  }, []);
+  return isOnline;
+}
+
+function ChatIndicator() {
+  const isOnline = useOnlineStatus();
+  // ...
+}
+```
+
+Here, the component subscribes to an external data store (in this case, the browser `navigator.onLine` API). Since this API does not exist on the server (so it can't be used to generate the initial HTML), initially the state is set to `true`. Whenever the value of that data store changes in the browser, the component updates its state.
+
+Although it's common to use Effects for this, React has a purpose-built Hook for subscribing to an external store that is preferred instead. Delete the Effect and replace it with a call to [`useSyncExternalStore`](/reference/react/useSyncExternalStore):
+
+```js {11-16}
+function subscribe(callback) {
+  window.addEventListener('online', callback);
+  window.addEventListener('offline', callback);
+  return () => {
+    window.removeEventListener('online', callback);
+    window.removeEventListener('offline', callback);
+  };
+}
+
+function useOnlineStatus() {
+  // ✅ Good: Subscribing to an external store with a built-in Hook
+  return useSyncExternalStore(
+    subscribe, // React won't resubscribe for as long as you pass the same function
+    () => navigator.onLine, // How to get the value on the client
+    () => true // How to get the value on the server
+  );
+}
+
+function ChatIndicator() {
+  const isOnline = useOnlineStatus();
+  // ...
+}
+```
+
+This approach is less error-prone than manually syncing mutable data to React state with an Effect. Typically, you'll write a custom Hook like `useOnlineStatus()` above so that you don't need to repeat this code in the individual components. [Read more about subscribing to external stores from React components.](/reference/react/useSyncExternalStore)
+
+### Fetching data {/*fetching-data*/}
+
+Many apps use Effects to kick off data fetching. It is quite common to write a data fetching Effect like this:
+
+```js {5-10}
+function SearchResults({ query }) {
+  const [results, setResults] = useState([]);
+  const [page, setPage] = useState(1);
+
+  useEffect(() => {
+    // 🔴 Avoid: Fetching without cleanup logic
+    fetchResults(query, page).then(json => {
+      setResults(json);
+    });
+  }, [query, page]);
+
+  function handleNextPageClick() {
+    setPage(page + 1);
+  }
+  // ...
+}
+```
+
+You *don't* need to move this fetch to an event handler.
+
+This might seem like a contradiction with the earlier examples where you needed to put the logic into the event handlers! However, consider that it's not *the typing event* that's the main reason to fetch. Search inputs are often prepopulated from the URL, and the user might navigate Back and Forward without touching the input. It doesn't matter where `page` and `query` come from. While this component is visible, you want to keep `results` [synchronized](/learn/synchronizing-with-effects) with data from the network according to the current `page` and `query`. This is why it's an Effect.
+
+However, the code above has a bug. Imagine you type `"hello"` fast. Then the `query` will change from `"h"`, to `"he"`, `"hel"`, `"hell"`, and `"hello"`. This will kick off separate fetches, but there is no guarantee about which order the responses will arrive in. For example, the `"hell"` response may arrive *after* the `"hello"` response. Since it will call `setResults()` last, you will be displaying the wrong search results. This is called a ["race condition"](https://en.wikipedia.org/wiki/Race_condition): two different requests "raced" against each other and came in a different order than you expected.
+
+**To fix the race condition, you need to [add a cleanup function](/learn/synchronizing-with-effects#fetching-data) to ignore stale responses:**
+
+```js {5,7,9,11-13}
+function SearchResults({ query }) {
+  const [results, setResults] = useState([]);
+  const [page, setPage] = useState(1);
+  useEffect(() => {
+    let ignore = false;
+    fetchResults(query, page).then(json => {
+      if (!ignore) {
+        setResults(json);
+      }
+    });
+    return () => {
+      ignore = true;
+    };
+  }, [query, page]);
+
+  function handleNextPageClick() {
+    setPage(page + 1);
+  }
+  // ...
+}
+```
+
+This ensures that when your Effect fetches data, all responses except the last requested one will be ignored.
+
+Handling race conditions is not the only difficulty with implementing data fetching. You might also want to think about how to cache the responses (so that the user can click Back and see the previous screen instantly instead of a spinner), how to fetch them on the server (so that the initial server-rendered HTML contains the fetched content instead of a spinner), and how to avoid network waterfalls (so that a child component that needs to fetch data doesn't have to wait for every parent above it to finish fetching their data before it can start). **These issues apply to any UI library, not just React. Solving them is not trivial, which is why modern [frameworks](/learn/start-a-new-react-project#building-with-a-full-featured-framework) provide more efficient built-in data fetching mechanisms than writing Effects directly in your components.**
+
+If you don't use a framework (and don't want to build your own) but would like to make data fetching from Effects more ergonomic, consider extracting your fetching logic into a custom Hook like in this example:
+
+```js {4}
+function SearchResults({ query }) {
+  const [page, setPage] = useState(1);
+  const params = new URLSearchParams({ query, page });
+  const results = useData(`/api/search?${params}`);
+
+  function handleNextPageClick() {
+    setPage(page + 1);
+  }
+  // ...
+}
+
+function useData(url) {
+  const [data, setData] = useState(null);
+  useEffect(() => {
+    let ignore = false;
+    fetch(url)
+      .then(response => response.json())
+      .then(json => {
+        if (!ignore) {
+          setData(json);
+        }
+      });
+    return () => {
+      ignore = true;
+    };
+  }, [url]);
+  return data;
+}
+```
+
+You'll likely also want to add some logic for error handling and to track whether the content is loading. You can build a Hook like this yourself or use one of the many solutions already available in the React ecosystem. **Although this alone won't be as efficient as using a framework's built-in data fetching mechanism, moving the data fetching logic into a custom Hook will make it easier to adopt an efficient data fetching strategy later.**
+
+In general, whenever you have to resort to writing Effects, keep an eye out for when you can extract a piece of functionality into a custom Hook with a more declarative and purpose-built API like `useData` above. The fewer raw `useEffect` calls you have in your components, the easier you will find to maintain your application.
+
+<Recap>
+
+- If you can calculate something during render, you don't need an Effect.
+- To cache expensive calculations, add `useMemo` instead of `useEffect`.
+- To reset the state of an entire component tree, pass a different `key` to it.
+- To reset a particular bit of state in response to a prop change, set it during rendering.
+- Code that needs to run because a component was *displayed* should be in Effects, the rest should be in events.
+- If you need to update the state of several components, it's better to do it during a single event.
+- Whenever you try to synchronize state variables in different components, consider lifting state up.
+- You can fetch data with Effects, but you need to implement cleanup to avoid race conditions.
+
+</Recap>
+
+<Challenges>
+
+#### Transform data without Effects {/*transform-data-without-effects*/}
+
+The `TodoList` below displays a list of todos. When the "Show only active todos" checkbox is ticked, completed todos are not displayed in the list. Regardless of which todos are visible, the footer displays the count of todos that are not yet completed.
+
+Simplify this component by removing all the unnecessary state and Effects.
+
+<Sandpack>
+
+```js
+import { useState, useEffect } from 'react';
+import { initialTodos, createTodo } from './todos.js';
+
+export default function TodoList() {
+  const [todos, setTodos] = useState(initialTodos);
+  const [showActive, setShowActive] = useState(false);
+  const [activeTodos, setActiveTodos] = useState([]);
+  const [visibleTodos, setVisibleTodos] = useState([]);
+  const [footer, setFooter] = useState(null);
+
+  useEffect(() => {
+    setActiveTodos(todos.filter(todo => !todo.completed));
+  }, [todos]);
+
+  useEffect(() => {
+    setVisibleTodos(showActive ? activeTodos : todos);
+  }, [showActive, todos, activeTodos]);
+
+  useEffect(() => {
+    setFooter(
+      <footer>
+        {activeTodos.length} todos left
+      </footer>
+    );
+  }, [activeTodos]);
+
+  return (
+    <>
+      <label>
+        <input
+          type="checkbox"
+          checked={showActive}
+          onChange={e => setShowActive(e.target.checked)}
+        />
+        Show only active todos
+      </label>
+      <NewTodo onAdd={newTodo => setTodos([...todos, newTodo])} />
+      <ul>
+        {visibleTodos.map(todo => (
+          <li key={todo.id}>
+            {todo.completed ? <s>{todo.text}</s> : todo.text}
+          </li>
+        ))}
+      </ul>
+      {footer}
+    </>
+  );
+}
+
+function NewTodo({ onAdd }) {
+  const [text, setText] = useState('');
+
+  function handleAddClick() {
+    setText('');
+    onAdd(createTodo(text));
+  }
+
+  return (
+    <>
+      <input value={text} onChange={e => setText(e.target.value)} />
+      <button onClick={handleAddClick}>
+        Add
+      </button>
+    </>
+  );
+}
+```
+
+```js todos.js
+let nextId = 0;
+
+export function createTodo(text, completed = false) {
+  return {
+    id: nextId++,
+    text,
+    completed
+  };
+}
+
+export const initialTodos = [
+  createTodo('Get apples', true),
+  createTodo('Get oranges', true),
+  createTodo('Get carrots'),
+];
+```
+
+```css
+label { display: block; }
+input { margin-top: 10px; }
+```
+
+</Sandpack>
+
+<Hint>
+
+If you can calculate something during rendering, you don't need state or an Effect that updates it.
+
+</Hint>
+
+<Solution>
+
+There are only two essential pieces of state in this example: the list of `todos` and the `showActive` state variable which represents whether the checkbox is ticked. All of the other state variables are [redundant](/learn/choosing-the-state-structure#avoid-redundant-state) and can be calculated during rendering instead. This includes the `footer` which you can move directly into the surrounding JSX.
+
+Your result should end up looking like this:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+import { initialTodos, createTodo } from './todos.js';
+
+export default function TodoList() {
+  const [todos, setTodos] = useState(initialTodos);
+  const [showActive, setShowActive] = useState(false);
+  const activeTodos = todos.filter(todo => !todo.completed);
+  const visibleTodos = showActive ? activeTodos : todos;
+
+  return (
+    <>
+      <label>
+        <input
+          type="checkbox"
+          checked={showActive}
+          onChange={e => setShowActive(e.target.checked)}
+        />
+        Show only active todos
+      </label>
+      <NewTodo onAdd={newTodo => setTodos([...todos, newTodo])} />
+      <ul>
+        {visibleTodos.map(todo => (
+          <li key={todo.id}>
+            {todo.completed ? <s>{todo.text}</s> : todo.text}
+          </li>
+        ))}
+      </ul>
+      <footer>
+        {activeTodos.length} todos left
+      </footer>
+    </>
+  );
+}
+
+function NewTodo({ onAdd }) {
+  const [text, setText] = useState('');
+
+  function handleAddClick() {
+    setText('');
+    onAdd(createTodo(text));
+  }
+
+  return (
+    <>
+      <input value={text} onChange={e => setText(e.target.value)} />
+      <button onClick={handleAddClick}>
+        Add
+      </button>
+    </>
+  );
+}
+```
+
+```js todos.js
+let nextId = 0;
+
+export function createTodo(text, completed = false) {
+  return {
+    id: nextId++,
+    text,
+    completed
+  };
+}
+
+export const initialTodos = [
+  createTodo('Get apples', true),
+  createTodo('Get oranges', true),
+  createTodo('Get carrots'),
+];
+```
+
+```css
+label { display: block; }
+input { margin-top: 10px; }
+```
+
+</Sandpack>
+
+</Solution>
+
+#### Cache a calculation without Effects {/*cache-a-calculation-without-effects*/}
+
+In this example, filtering the todos was extracted into a separate function called `getVisibleTodos()`. This function contains a `console.log()` call inside of it which helps you notice when it's being called. Toggle "Show only active todos" and notice that it causes `getVisibleTodos()` to re-run. This is expected because visible todos change when you toggle which ones to display.
+
+Your task is to remove the Effect that recomputes the `visibleTodos` list in the `TodoList` component. However, you need to make sure that `getVisibleTodos()` does *not* re-run (and so does not print any logs) when you type into the input.
+
+<Hint>
+
+One solution is to add a `useMemo` call to cache the visible todos. There is also another, less obvious solution.
+
+</Hint>
+
+<Sandpack>
+
+```js
+import { useState, useEffect } from 'react';
+import { initialTodos, createTodo, getVisibleTodos } from './todos.js';
+
+export default function TodoList() {
+  const [todos, setTodos] = useState(initialTodos);
+  const [showActive, setShowActive] = useState(false);
+  const [text, setText] = useState('');
+  const [visibleTodos, setVisibleTodos] = useState([]);
+
+  useEffect(() => {
+    setVisibleTodos(getVisibleTodos(todos, showActive));
+  }, [todos, showActive]);
+
+  function handleAddClick() {
+    setText('');
+    setTodos([...todos, createTodo(text)]);
+  }
+
+  return (
+    <>
+      <label>
+        <input
+          type="checkbox"
+          checked={showActive}
+          onChange={e => setShowActive(e.target.checked)}
+        />
+        Show only active todos
+      </label>
+      <input value={text} onChange={e => setText(e.target.value)} />
+      <button onClick={handleAddClick}>
+        Add
+      </button>
+      <ul>
+        {visibleTodos.map(todo => (
+          <li key={todo.id}>
+            {todo.completed ? <s>{todo.text}</s> : todo.text}
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+}
+```
+
+```js todos.js
+let nextId = 0;
+let calls = 0;
+
+export function getVisibleTodos(todos, showActive) {
+  console.log(`getVisibleTodos() was called ${++calls} times`);
+  const activeTodos = todos.filter(todo => !todo.completed);
+  const visibleTodos = showActive ? activeTodos : todos;
+  return visibleTodos;
+}
+
+export function createTodo(text, completed = false) {
+  return {
+    id: nextId++,
+    text,
+    completed
+  };
+}
+
+export const initialTodos = [
+  createTodo('Get apples', true),
+  createTodo('Get oranges', true),
+  createTodo('Get carrots'),
+];
+```
+
+```css
+label { display: block; }
+input { margin-top: 10px; }
+```
+
+</Sandpack>
+
+<Solution>
+
+Remove the state variable and the Effect, and instead add a `useMemo` call to cache the result of calling `getVisibleTodos()`:
+
+<Sandpack>
+
+```js
+import { useState, useMemo } from 'react';
+import { initialTodos, createTodo, getVisibleTodos } from './todos.js';
+
+export default function TodoList() {
+  const [todos, setTodos] = useState(initialTodos);
+  const [showActive, setShowActive] = useState(false);
+  const [text, setText] = useState('');
+  const visibleTodos = useMemo(
+    () => getVisibleTodos(todos, showActive),
+    [todos, showActive]
+  );
+
+  function handleAddClick() {
+    setText('');
+    setTodos([...todos, createTodo(text)]);
+  }
+
+  return (
+    <>
+      <label>
+        <input
+          type="checkbox"
+          checked={showActive}
+          onChange={e => setShowActive(e.target.checked)}
+        />
+        Show only active todos
+      </label>
+      <input value={text} onChange={e => setText(e.target.value)} />
+      <button onClick={handleAddClick}>
+        Add
+      </button>
+      <ul>
+        {visibleTodos.map(todo => (
+          <li key={todo.id}>
+            {todo.completed ? <s>{todo.text}</s> : todo.text}
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+}
+```
+
+```js todos.js
+let nextId = 0;
+let calls = 0;
+
+export function getVisibleTodos(todos, showActive) {
+  console.log(`getVisibleTodos() was called ${++calls} times`);
+  const activeTodos = todos.filter(todo => !todo.completed);
+  const visibleTodos = showActive ? activeTodos : todos;
+  return visibleTodos;
+}
+
+export function createTodo(text, completed = false) {
+  return {
+    id: nextId++,
+    text,
+    completed
+  };
+}
+
+export const initialTodos = [
+  createTodo('Get apples', true),
+  createTodo('Get oranges', true),
+  createTodo('Get carrots'),
+];
+```
+
+```css
+label { display: block; }
+input { margin-top: 10px; }
+```
+
+</Sandpack>
+
+With this change, `getVisibleTodos()` will be called only if `todos` or `showActive` change. Typing into the input only changes the `text` state variable, so it does not trigger a call to `getVisibleTodos()`.
+
+There is also another solution which does not need `useMemo`. Since the `text` state variable can't possibly affect the list of todos, you can extract the `NewTodo` form into a separate component, and move the `text` state variable inside of it:
+
+<Sandpack>
+
+```js
+import { useState, useMemo } from 'react';
+import { initialTodos, createTodo, getVisibleTodos } from './todos.js';
+
+export default function TodoList() {
+  const [todos, setTodos] = useState(initialTodos);
+  const [showActive, setShowActive] = useState(false);
+  const visibleTodos = getVisibleTodos(todos, showActive);
+
+  return (
+    <>
+      <label>
+        <input
+          type="checkbox"
+          checked={showActive}
+          onChange={e => setShowActive(e.target.checked)}
+        />
+        Show only active todos
+      </label>
+      <NewTodo onAdd={newTodo => setTodos([...todos, newTodo])} />
+      <ul>
+        {visibleTodos.map(todo => (
+          <li key={todo.id}>
+            {todo.completed ? <s>{todo.text}</s> : todo.text}
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+}
+
+function NewTodo({ onAdd }) {
+  const [text, setText] = useState('');
+
+  function handleAddClick() {
+    setText('');
+    onAdd(createTodo(text));
+  }
+
+  return (
+    <>
+      <input value={text} onChange={e => setText(e.target.value)} />
+      <button onClick={handleAddClick}>
+        Add
+      </button>
+    </>
+  );
+}
+```
+
+```js todos.js
+let nextId = 0;
+let calls = 0;
+
+export function getVisibleTodos(todos, showActive) {
+  console.log(`getVisibleTodos() was called ${++calls} times`);
+  const activeTodos = todos.filter(todo => !todo.completed);
+  const visibleTodos = showActive ? activeTodos : todos;
+  return visibleTodos;
+}
+
+export function createTodo(text, completed = false) {
+  return {
+    id: nextId++,
+    text,
+    completed
+  };
+}
+
+export const initialTodos = [
+  createTodo('Get apples', true),
+  createTodo('Get oranges', true),
+  createTodo('Get carrots'),
+];
+```
+
+```css
+label { display: block; }
+input { margin-top: 10px; }
+```
+
+</Sandpack>
+
+This approach satisfies the requirements too. When you type into the input, only the `text` state variable updates. Since the `text` state variable is in the child `NewTodo` component, the parent `TodoList` component won't get re-rendered. This is why `getVisibleTodos()` doesn't get called when you type. (It would still be called if the `TodoList` re-renders for another reason.)
+
+</Solution>
+
+#### Reset state without Effects {/*reset-state-without-effects*/}
+
+This `EditContact` component receives a contact object shaped like `{ id, name, email }` as the `savedContact` prop. Try editing the name and email input fields. When you press Save, the contact's button above the form updates to the edited name. When you press Reset, any pending changes in the form are discarded. Play around with this UI to get a feel for it.
+
+When you select a contact with the buttons at the top, the form resets to reflect that contact's details. This is done with an Effect inside `EditContact.js`. Remove this Effect. Find another way to reset the form when `savedContact.id` changes.
+
+<Sandpack>
+
+```js App.js hidden
+import { useState } from 'react';
+import ContactList from './ContactList.js';
+import EditContact from './EditContact.js';
+
+export default function ContactManager() {
+  const [
+    contacts,
+    setContacts
+  ] = useState(initialContacts);
+  const [
+    selectedId,
+    setSelectedId
+  ] = useState(0);
+  const selectedContact = contacts.find(c =>
+    c.id === selectedId
+  );
+
+  function handleSave(updatedData) {
+    const nextContacts = contacts.map(c => {
+      if (c.id === updatedData.id) {
+        return updatedData;
+      } else {
+        return c;
+      }
+    });
+    setContacts(nextContacts);
+  }
+
+  return (
+    <div>
+      <ContactList
+        contacts={contacts}
+        selectedId={selectedId}
+        onSelect={id => setSelectedId(id)}
+      />
+      <hr />
+      <EditContact
+        savedContact={selectedContact}
+        onSave={handleSave}
+      />
+    </div>
+  )
+}
+
+const initialContacts = [
+  { id: 0, name: 'Taylor', email: 'taylor@mail.com' },
+  { id: 1, name: 'Alice', email: 'alice@mail.com' },
+  { id: 2, name: 'Bob', email: 'bob@mail.com' }
+];
+```
+
+```js ContactList.js hidden
+export default function ContactList({
+  contacts,
+  selectedId,
+  onSelect
+}) {
+  return (
+    <section>
+      <ul>
+        {contacts.map(contact =>
+          <li key={contact.id}>
+            <button onClick={() => {
+              onSelect(contact.id);
+            }}>
+              {contact.id === selectedId ?
+                <b>{contact.name}</b> :
+                contact.name
+              }
+            </button>
+          </li>
+        )}
+      </ul>
+    </section>
+  );
+}
+```
+
+```js EditContact.js active
+import { useState, useEffect } from 'react';
+
+export default function EditContact({ savedContact, onSave }) {
+  const [name, setName] = useState(savedContact.name);
+  const [email, setEmail] = useState(savedContact.email);
+
+  useEffect(() => {
+    setName(savedContact.name);
+    setEmail(savedContact.email);
+  }, [savedContact]);
+
+  return (
+    <section>
+      <label>
+        Name:{' '}
+        <input
+          type="text"
+          value={name}
+          onChange={e => setName(e.target.value)}
+        />
+      </label>
+      <label>
+        Email:{' '}
+        <input
+          type="email"
+          value={email}
+          onChange={e => setEmail(e.target.value)}
+        />
+      </label>
+      <button onClick={() => {
+        const updatedData = {
+          id: savedContact.id,
+          name: name,
+          email: email
+        };
+        onSave(updatedData);
+      }}>
+        Save
+      </button>
+      <button onClick={() => {
+        setName(savedContact.name);
+        setEmail(savedContact.email);
+      }}>
+        Reset
+      </button>
+    </section>
+  );
+}
+```
+
+```css
+ul, li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+li { display: inline-block; }
+li button {
+  padding: 10px;
+}
+label {
+  display: block;
+  margin: 10px 0;
+}
+button {
+  margin-right: 10px;
+  margin-bottom: 10px;
+}
+```
+
+</Sandpack>
+
+<Hint>
+
+It would be nice if there was a way to tell React that when `savedContact.id` is different, the `EditContact` form is conceptually a _different contact's form_ and should not preserve state. Do you recall any such way?
+
+</Hint>
+
+<Solution>
+
+Split the `EditContact` component in two. Move all the form state into the inner `EditForm` component. Export the outer `EditContact` component, and make it pass `savedContact.id` as the `key` to the inner `EditContact` component. As a result, the inner `EditForm` component resets all of the form state and recreates the DOM whenever you select a different contact.
+
+<Sandpack>
+
+```js App.js hidden
+import { useState } from 'react';
+import ContactList from './ContactList.js';
+import EditContact from './EditContact.js';
+
+export default function ContactManager() {
+  const [
+    contacts,
+    setContacts
+  ] = useState(initialContacts);
+  const [
+    selectedId,
+    setSelectedId
+  ] = useState(0);
+  const selectedContact = contacts.find(c =>
+    c.id === selectedId
+  );
+
+  function handleSave(updatedData) {
+    const nextContacts = contacts.map(c => {
+      if (c.id === updatedData.id) {
+        return updatedData;
+      } else {
+        return c;
+      }
+    });
+    setContacts(nextContacts);
+  }
+
+  return (
+    <div>
+      <ContactList
+        contacts={contacts}
+        selectedId={selectedId}
+        onSelect={id => setSelectedId(id)}
+      />
+      <hr />
+      <EditContact
+        savedContact={selectedContact}
+        onSave={handleSave}
+      />
+    </div>
+  )
+}
+
+const initialContacts = [
+  { id: 0, name: 'Taylor', email: 'taylor@mail.com' },
+  { id: 1, name: 'Alice', email: 'alice@mail.com' },
+  { id: 2, name: 'Bob', email: 'bob@mail.com' }
+];
+```
+
+```js ContactList.js hidden
+export default function ContactList({
+  contacts,
+  selectedId,
+  onSelect
+}) {
+  return (
+    <section>
+      <ul>
+        {contacts.map(contact =>
+          <li key={contact.id}>
+            <button onClick={() => {
+              onSelect(contact.id);
+            }}>
+              {contact.id === selectedId ?
+                <b>{contact.name}</b> :
+                contact.name
+              }
+            </button>
+          </li>
+        )}
+      </ul>
+    </section>
+  );
+}
+```
+
+```js EditContact.js active
+import { useState } from 'react';
+
+export default function EditContact(props) {
+  return (
+    <EditForm
+      {...props}
+      key={props.savedContact.id}
+    />
+  );
+}
+
+function EditForm({ savedContact, onSave }) {
+  const [name, setName] = useState(savedContact.name);
+  const [email, setEmail] = useState(savedContact.email);
+
+  return (
+    <section>
+      <label>
+        Name:{' '}
+        <input
+          type="text"
+          value={name}
+          onChange={e => setName(e.target.value)}
+        />
+      </label>
+      <label>
+        Email:{' '}
+        <input
+          type="email"
+          value={email}
+          onChange={e => setEmail(e.target.value)}
+        />
+      </label>
+      <button onClick={() => {
+        const updatedData = {
+          id: savedContact.id,
+          name: name,
+          email: email
+        };
+        onSave(updatedData);
+      }}>
+        Save
+      </button>
+      <button onClick={() => {
+        setName(savedContact.name);
+        setEmail(savedContact.email);
+      }}>
+        Reset
+      </button>
+    </section>
+  );
+}
+```
+
+```css
+ul, li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+li { display: inline-block; }
+li button {
+  padding: 10px;
+}
+label {
+  display: block;
+  margin: 10px 0;
+}
+button {
+  margin-right: 10px;
+  margin-bottom: 10px;
+}
+```
+
+</Sandpack>
+
+</Solution>
+
+#### Submit a form without Effects {/*submit-a-form-without-effects*/}
+
+This `Form` component lets you send a message to a friend. When you submit the form, the `showForm` state variable is set to `false`. This triggers an Effect calling `sendMessage(message)`, which sends the message (you can see it in the console). After the message is sent, you see a "Thank you" dialog with an "Open chat" button that lets you get back to the form.
+
+Your app's users are sending way too many messages. To make chatting a little bit more difficult, you've decided to show the "Thank you" dialog *first* rather than the form. Change the `showForm` state variable to initialize to `false` instead of `true`. As soon as you make that change, the console will show that an empty message was sent. Something in this logic is wrong!
+
+What's the root cause of this problem? And how can you fix it?
+
+<Hint>
+
+Should the message be sent _because_ the user saw the "Thank you" dialog? Or is it the other way around?
+
+</Hint>
+
+<Sandpack>
+
+```js
+import { useState, useEffect } from 'react';
+
+export default function Form() {
+  const [showForm, setShowForm] = useState(true);
+  const [message, setMessage] = useState('');
+
+  useEffect(() => {
+    if (!showForm) {
+      sendMessage(message);
+    }
+  }, [showForm, message]);
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    setShowForm(false);
+  }
+
+  if (!showForm) {
+    return (
+      <>
+        <h1>Thanks for using our services!</h1>
+        <button onClick={() => {
+          setMessage('');
+          setShowForm(true);
+        }}>
+          Open chat
+        </button>
+      </>
+    );
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <textarea
+        placeholder="Message"
+        value={message}
+        onChange={e => setMessage(e.target.value)}
+      />
+      <button type="submit" disabled={message === ''}>
+        Send
+      </button>
+    </form>
+  );
+}
+
+function sendMessage(message) {
+  console.log('Sending message: ' + message);
+}
+```
+
+```css
+label, textarea { margin-bottom: 10px; display: block; }
+```
+
+</Sandpack>
+
+<Solution>
+
+The `showForm` state variable determines whether to show the form or the "Thank you" dialog. However, you aren't sending the message because the "Thank you" dialog was _displayed_. You want to send the message because the user has _submitted the form._ Delete the misleading Effect and move the `sendMessage` call inside the `handleSubmit` event handler:
+
+<Sandpack>
+
+```js
+import { useState, useEffect } from 'react';
+
+export default function Form() {
+  const [showForm, setShowForm] = useState(true);
+  const [message, setMessage] = useState('');
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    setShowForm(false);
+    sendMessage(message);
+  }
+
+  if (!showForm) {
+    return (
+      <>
+        <h1>Thanks for using our services!</h1>
+        <button onClick={() => {
+          setMessage('');
+          setShowForm(true);
+        }}>
+          Open chat
+        </button>
+      </>
+    );
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <textarea
+        placeholder="Message"
+        value={message}
+        onChange={e => setMessage(e.target.value)}
+      />
+      <button type="submit" disabled={message === ''}>
+        Send
+      </button>
+    </form>
+  );
+}
+
+function sendMessage(message) {
+  console.log('Sending message: ' + message);
+}
+```
+
+```css
+label, textarea { margin-bottom: 10px; display: block; }
+```
+
+</Sandpack>
+
+Notice how in this version, only _submitting the form_ (which is an event) causes the message to be sent. It works equally well regardless of whether `showForm` is initially set to `true` or `false`. (Set it to `false` and notice no extra console messages.)
+
+</Solution>
+
+</Challenges>
diff --git a/beta/src/content/learn/your-first-component.md b/beta/src/content/learn/your-first-component.md
new file mode 100644
index 000000000..608f729d3
--- /dev/null
+++ b/beta/src/content/learn/your-first-component.md
@@ -0,0 +1,461 @@
+---
+title: Your First Component
+---
+
+<Intro>
+
+*Components* are one of the core concepts of React. They are the foundation upon which you build user interfaces (UI), which makes them the perfect place to start your React journey!
+
+</Intro>
+
+<YouWillLearn>
+
+* What a component is
+* What role components play in a React application
+* How to write your first React component
+
+</YouWillLearn>
+
+## Components: UI building blocks {/*components-ui-building-blocks*/}
+
+On the Web, HTML lets us create rich structured documents with its built-in set of tags like `<h1>` and `<li>`:
+
+```html
+<article>
+  <h1>My First Component</h1>
+  <ol>
+    <li>Components: UI Building Blocks</li>
+    <li>Defining a Component</li>
+    <li>Using a Component</li>
+  </ol>
+</article>
+```
+
+This markup represents this article `<article>`, its heading `<h1>`, and an (abbreviated) table of contents as an ordered list `<ol>`. Markup like this, combined with CSS for style, and JavaScript for interactivity, lies behind every sidebar, avatar, modal, dropdown—every piece of UI you see on the Web.
+
+React lets you combine your markup, CSS, and JavaScript into custom "components", **reusable UI elements for your app.** The table of contents code you saw above could be turned into a `<TableOfContents />` component you could render on every page. Under the hood, it still uses the same HTML tags like `<article>`, `<h1>`, etc.
+
+Just like with HTML tags, you can compose, order and nest components to design whole pages. For example, the documentation page you're reading is made out of React components:
+
+```js
+<PageLayout>
+  <NavigationHeader>
+    <SearchBar />
+    <Link to="/docs">Docs</Link>
+  </NavigationHeader>
+  <Sidebar />
+  <PageContent>
+    <TableOfContents />
+    <DocumentationText />
+  </PageContent>
+</PageLayout>
+```
+
+As your project grows, you will notice that many of your designs can be composed by reusing components you already wrote, speeding up your development. Our table of contents above could be added to any screen with `<TableOfContents />`! You can even jumpstart your project with the thousands of components shared by the React open source community like [Chakra UI](https://chakra-ui.com/) and [Material UI.](https://material-ui.com/)
+
+## Defining a component {/*defining-a-component*/}
+
+Traditionally when creating web pages, web developers marked up their content and then added interaction by sprinkling on some JavaScript. This worked great when interaction was a nice-to-have on the web. Now it is expected for many sites and all apps. React puts interactivity first while still using the same technology: **a React component is a JavaScript function that you can _sprinkle with markup_.** Here's what that looks like (you can edit the example below):
+
+<Sandpack>
+
+```js
+export default function Profile() {
+  return (
+    <img
+      src="https://i.imgur.com/MK3eW3Am.jpg"
+      alt="Katherine Johnson"
+    />
+  )
+}
+```
+
+```css
+img { height: 200px; }
+```
+
+</Sandpack>
+
+And here's how to build a component:
+
+### Step 1: Export the component {/*step-1-export-the-component*/}
+
+The `export default` prefix is a [standard JavaScript syntax](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (not specific to React). It lets you mark the main function in a file so that you can later import it from other files. (More on importing in [Importing and Exporting Components](/learn/importing-and-exporting-components)!)
+
+### Step 2: Define the function {/*step-2-define-the-function*/}
+
+With `function Profile() { }` you define a JavaScript function with the name `Profile`.
+
+<Pitfall>
+
+React components are regular JavaScript functions, but **their names must start with a capital letter** or they won't work!
+
+</Pitfall>
+
+### Step 3: Add markup {/*step-3-add-markup*/}
+
+The component returns an `<img />` tag with `src` and `alt` attributes. `<img />` is written like HTML, but it is actually JavaScript under the hood! This syntax is called [JSX](/learn/writing-markup-with-jsx), and it lets you embed markup inside JavaScript.
+
+Return statements can be written all on one line, as in this component:
+
+```js
+return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />;
+```
+
+But if your markup isn't all on the same line as the `return` keyword, you must wrap it in a pair of parentheses like this:
+
+```js
+return (
+  <div>
+    <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
+  </div>
+);
+```
+
+<Pitfall>
+
+Without parentheses, any code on the lines after `return` [will be ignored](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)!
+
+</Pitfall>
+
+## Using a component {/*using-a-component*/}
+
+Now that you've defined your `Profile` component, you can nest it inside other components. For example, you can export a `Gallery` component that uses multiple `Profile` components:
+
+<Sandpack>
+
+```js
+function Profile() {
+  return (
+    <img
+      src="https://i.imgur.com/MK3eW3As.jpg"
+      alt="Katherine Johnson"
+    />
+  );
+}
+
+export default function Gallery() {
+  return (
+    <section>
+      <h1>Amazing scientists</h1>
+      <Profile />
+      <Profile />
+      <Profile />
+    </section>
+  );
+}
+```
+
+```css
+img { margin: 0 10px 10px 0; height: 90px; }
+```
+
+</Sandpack>
+
+### What the browser sees {/*what-the-browser-sees*/}
+
+Notice the difference in casing:
+
+* `<section>` is lowercase, so React knows we refer to an HTML tag.
+* `<Profile />` starts with a capital `P`, so React knows that we want to use our component called `Profile`.
+
+And `Profile` contains even more HTML: `<img />`. In the end, this is what the browser sees:
+
+```html
+<section>
+  <h1>Amazing scientists</h1>
+  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
+  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
+  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
+</section>
+```
+
+### Nesting and organizing components {/*nesting-and-organizing-components*/}
+
+Components are regular JavaScript functions, so you can keep multiple components in the same file. This is convenient when components are relatively small or tightly related to each other. If this file gets crowded, you can always move `Profile` to a separate file. You will learn how to do this shortly on the [page about imports.](/learn/importing-and-exporting-components)
+
+Because the `Profile` components are rendered inside `Gallery`—even several times!—we can say that `Gallery` is a **parent component,** rendering each `Profile` as a "child". This is part of the magic of React: you can define a component once, and then use it in as many places and as many times as you like.
+
+<Pitfall>
+
+Components can render other components, but **you must never nest their definitions:**
+
+```js {2-5}
+export default function Gallery() {
+  // 🔴 Never define a component inside another component!
+  function Profile() {
+    // ...
+  }
+  // ...
+}
+```
+
+The snippet above is [very slow and causes bugs.](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) Instead, define every component at the top level:
+
+```js {5-8}
+export default function Gallery() {
+  // ...
+}
+
+// ✅ Declare components at the top level
+function Profile() {
+  // ...
+}
+```
+
+When a child component needs some data from a parent, [pass it by props](/learn/passing-props-to-a-component) instead of nesting definitions.
+
+</Pitfall>
+
+<DeepDive>
+
+#### Components all the way down {/*components-all-the-way-down*/}
+
+Your React application begins at a "root" component. Usually, it is created automatically when you start a new project. For example, if you use [CodeSandbox](https://codesandbox.io/) or [Create React App](https://create-react-app.dev/), the root component is defined in `src/App.js`. If you use the framework [Next.js](https://nextjs.org/), the root component is defined in `pages/index.js`. In these examples, you've been exporting root components.
+
+Most React apps use components all the way down. This means that you won't only use components for reusable pieces like buttons, but also for larger pieces like sidebars, lists, and ultimately, complete pages! Components are a handy way to organize UI code and markup, even if some of them are only used once.
+
+Frameworks like Next.js take this a step further. Instead of using an empty HTML file and letting React "take over" managing the page with JavaScript, they *also* generate the HTML automatically from your React components. This allows your app to show some content before the JavaScript code loads.
+
+Still, many websites only use React to [add "sprinkles of interactivity".](/learn/add-react-to-a-website) They have many root components instead of a single one for the entire page. You can use as much—or as little—React as you need.
+
+</DeepDive>
+
+<Recap>
+
+You've just gotten your first taste of React! Let's recap some key points.
+
+* React lets you create components, **reusable UI elements for your app.**
+* In a React app, every piece of UI is a component.
+* React components are regular JavaScript functions except:
+
+  1. Their names always begin with a capital letter.
+  2. They return JSX markup.
+
+</Recap>
+
+
+
+<Challenges>
+
+#### Export the component {/*export-the-component*/}
+
+This sandbox doesn't work because the root component is not exported:
+
+<Sandpack>
+
+```js
+function Profile() {
+  return (
+    <img
+      src="https://i.imgur.com/lICfvbD.jpg"
+      alt="Aklilu Lemma"
+    />
+  );
+}
+```
+
+```css
+img { height: 181px; }
+```
+
+</Sandpack>
+
+Try to fix it yourself before looking at the solution!
+
+<Solution>
+
+Add `export default` before the function definition like so:
+
+<Sandpack>
+
+```js
+export default function Profile() {
+  return (
+    <img
+      src="https://i.imgur.com/lICfvbD.jpg"
+      alt="Aklilu Lemma"
+    />
+  );
+}
+```
+
+```css
+img { height: 181px; }
+```
+
+</Sandpack>
+
+You might be wondering why writing `export` alone is not enough to fix this example. You can learn the difference between `export` and `export default` in [Importing and Exporting Components.](/learn/importing-and-exporting-components)
+
+</Solution>
+
+#### Fix the return statement {/*fix-the-return-statement*/}
+
+Something isn't right about this `return` statement. Can you fix it?
+
+<Hint>
+
+You may get an "Unexpected token" error while trying to fix this. In that case, check the that semicolon appears *after* the closing parenthesis. Leaving a semicolon inside `return ( )` will cause an error.
+
+</Hint>
+
+
+<Sandpack>
+
+```js
+export default function Profile() {
+  return
+    <img src="https://i.imgur.com/jA8hHMpm.jpg" alt="Katsuko Saruhashi" />;
+}
+```
+
+```css
+img { height: 180px; }
+```
+
+</Sandpack>
+
+<Solution>
+
+You can fix this component by moving the return statement to one line like so:
+
+<Sandpack>
+
+```js
+export default function Profile() {
+  return <img src="https://i.imgur.com/jA8hHMpm.jpg" alt="Katsuko Saruhashi" />;
+}
+```
+
+```css
+img { height: 180px; }
+```
+
+</Sandpack>
+
+Or by wrapping the returned JSX markup in parentheses that open right after `return`:
+
+<Sandpack>
+
+```js
+export default function Profile() {
+  return (
+    <img 
+      src="https://i.imgur.com/jA8hHMpm.jpg" 
+      alt="Katsuko Saruhashi" 
+    />
+  );
+}
+```
+
+```css
+img { height: 180px; }
+```
+
+</Sandpack>
+
+</Solution>
+
+#### Spot the mistake {/*spot-the-mistake*/}
+
+Something's wrong with how the `Profile` component is declared and used. Can you spot the mistake? (Try to remember how React distinguishes components from the regular HTML tags!)
+
+<Sandpack>
+
+```js
+function profile() {
+  return (
+    <img
+      src="https://i.imgur.com/QIrZWGIs.jpg"
+      alt="Alan L. Hart"
+    />
+  );
+}
+
+export default function Gallery() {
+  return (
+    <section>
+      <h1>Amazing scientists</h1>
+      <profile />
+      <profile />
+      <profile />
+    </section>
+  );
+}
+```
+
+```css
+img { margin: 0 10px 10px 0; height: 90px; }
+```
+
+</Sandpack>
+
+<Solution>
+
+React component names must start with a capital letter.
+
+Change `function profile()` to `function Profile()`, and then change every `<profile />` to `<Profile />`:
+
+<Sandpack>
+
+```js
+function Profile() {
+  return (
+    <img
+      src="https://i.imgur.com/QIrZWGIs.jpg"
+      alt="Alan L. Hart"
+    />
+  );
+}
+
+export default function Gallery() {
+  return (
+    <section>
+      <h1>Amazing scientists</h1>
+      <Profile />
+      <Profile />
+      <Profile />
+    </section>
+  );
+}
+```
+
+```css
+img { margin: 0 10px 10px 0; }
+```
+
+</Sandpack>
+
+</Solution>
+
+#### Your own component {/*your-own-component*/}
+
+Write a component from scratch. You can give it any valid name and return any markup. If you're out of ideas, you can write a `Congratulations` component that shows `<h1>Good job!</h1>`. Don't forget to export it!
+
+<Sandpack>
+
+```js
+// Write your component below!
+
+```
+
+</Sandpack>
+
+<Solution>
+
+<Sandpack>
+
+```js
+export default function Congratulations() {
+  return (
+    <h1>Good job!</h1>
+  );
+}
+```
+
+</Sandpack>
+
+</Solution>
+
+</Challenges>
diff --git a/beta/src/content/reference/react-dom/client/createRoot.md b/beta/src/content/reference/react-dom/client/createRoot.md
new file mode 100644
index 000000000..bee136acc
--- /dev/null
+++ b/beta/src/content/reference/react-dom/client/createRoot.md
@@ -0,0 +1,426 @@
+---
+title: createRoot
+---
+
+<Intro>
+
+`createRoot` lets you create a root to display React components inside a browser DOM node.
+
+```js
+const root = createRoot(domNode, options?)
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `createRoot(domNode, options?)` {/*createroot*/}
+
+Call `createRoot` to create a React root for displaying content inside a browser DOM element.
+
+```js
+import { createRoot } from 'react-dom/client';
+
+const domNode = document.getElementById('root');
+const root = createRoot(domNode);
+```
+
+React will create a root for the `domNode`, and take over managing the DOM inside it. After you've created a root, you need to call [`root.render`](#root-render) to display a React component inside of it:
+
+```js
+root.render(<App />);
+```
+
+An app fully built with React will usually only have one `createRoot` call for its root component. A page that uses "sprinkles" of React for parts of the page may have as many separate roots as needed.
+
+[See more examples below.](#usage)
+
+#### Parameters {/*parameters*/}
+
+* `domNode`: A [DOM element.](https://developer.mozilla.org/en-US/docs/Web/API/Element) React will create a root for this DOM element and allow you to call functions on the root, such as `render` to display rendered React content.
+
+* **optional** `options`: An object with options for this React root.
+
+  * **optional** `onRecoverableError`: Callback called when React automatically recovers from errors.
+  * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page.
+
+#### Returns {/*returns*/}
+
+`createRoot` returns an object with two methods: [`render`](#root-render) and [`unmount`.](#root-unmount)
+
+#### Caveats {/*caveats*/}
+* If your app is server-rendered, using `createRoot()` is not supported. Use [`hydrateRoot()`](/reference/react-dom/client/hydrateRoot) instead.
+* You'll likely have only one `createRoot` call in your app. If you use a framework, it might do this call for you.
+* When you want to render a piece of JSX in a different part of the DOM tree that isn't a child of your component (for example, a modal or a tooltip), use [`createPortal`](/reference/react-dom/createPortal) instead of `createRoot`.
+
+---
+
+### `root.render(reactNode)` {/*root-render*/}
+
+Call `root.render` to display a piece of [JSX](/learn/writing-markup-with-jsx) ("React node") into the React root's browser DOM node.
+
+```js
+root.render(<App />);
+```
+
+React will display `<App />` in the `root`, and take over managing the DOM inside it.
+
+[See more examples below.](#usage)
+
+#### Parameters {/*root-render-parameters*/}
+
+* `reactNode`: A *React node* that you want to display. This will usually be a piece of JSX like `<App />`, but you can also pass a React element constructed with [`createElement()`](/reference/react/createElement), a string, a number, `null`, or `undefined`.
+
+
+#### Returns {/*root-render-returns*/}
+
+`root.render` returns `undefined`.
+
+#### Caveats {/*root-render-caveats*/}
+
+* The first time you call `root.render`, React will clear all the existing HTML content inside the React root before rendering the React component into it.
+
+* If your root's DOM node contains HTML generated by React on the server or during the build, use [`hydrateRoot()`](/reference/react-dom/client/hydrateRoot) instead, which attaches the event handlers to the existing HTML.
+
+* If you call `render` on the same root more than once, React will update the DOM as necessary to reflect the latest JSX you passed. React will decide which parts of the DOM can be reused and which need to be recreated by ["matching it up"](/learn/preserving-and-resetting-state) with the previously rendered tree. Calling `render` on the same root again is similar to calling the [`set` function](/reference/react/useState#setstate) on the root component: React avoids unnecessary DOM updates.
+
+---
+
+### `root.unmount()` {/*root-unmount*/}
+
+Call `root.unmount` to destroy a rendered tree inside a React root.
+
+```js
+root.unmount();
+```
+
+An app fully built with React will usually not have any calls to `root.unmount`.
+
+This is mostly useful if your React root's DOM node (or any of its ancestors) may get removed from the DOM by some other code. For example, imagine a jQuery tab panel that removes inactive tabs from the DOM. If a tab gets removed, everything inside it (including the React roots inside) would get removed from the DOM as well. In that case, you need to tell React to "stop" managing the removed root's content by calling `root.unmount`. Otherwise, the components inside the removed root won't know to clean up and free up global resources like subscriptions.
+
+Calling `root.unmount` will unmount all the components in the root and "detach" React from the root DOM node, including removing any event handlers or state in the tree. 
+
+
+#### Parameters {/*root-unmount-parameters*/}
+
+`root.unmount` does not accept any parameters.
+
+
+#### Returns {/*root-unmount-returns*/}
+
+`root.unmount` returns `undefined`.
+
+#### Caveats {/*root-unmount-caveats*/}
+
+* Calling `root.unmount` will unmount all the components in the tree and "detach" React from the root DOM node.
+
+* Once you call `root.unmount` you cannot call `root.render` again on the same root. Attempting to call `root.render` on an unmounted root will throw a "Cannot update an unmounted root" error. However, you can create a new root for the same DOM node after the previous root for that node has been unmounted.
+
+---
+
+## Usage {/*usage*/}
+
+### Rendering an app fully built with React {/*rendering-an-app-fully-built-with-react*/}
+
+If your app is fully built with React, create a single root for your entire app.
+
+```js [[1, 3, "document.getElementById('root')"], [2, 4, "<App />"]]
+import { createRoot } from 'react-dom/client';
+
+const root = createRoot(document.getElementById('root'));
+root.render(<App />);
+````
+
+Usually, you only need to run this code once at startup. It will:
+
+1. Find the <CodeStep step={1}>browser DOM node</CodeStep> defined in your HTML.
+2. Display the <CodeStep step={2}>React component</CodeStep> for your app inside.
+
+<Sandpack>
+
+```html index.html
+<!DOCTYPE html>
+<html>
+  <head><title>My app</title></head>
+  <body>
+    <!-- This is the DOM node -->
+    <div id="root"></div>
+  </body>
+</html>
+```
+
+```js index.js active
+import { createRoot } from 'react-dom/client';
+import App from './App.js';
+import './styles.css';
+
+const root = createRoot(document.getElementById('root'));
+root.render(<App />);
+```
+
+```js App.js
+import { useState } from 'react';
+
+export default function App() {
+  return (
+    <>
+      <h1>Hello, world!</h1>
+      <Counter />
+    </>
+  );
+}
+
+function Counter() {
+  const [count, setCount] = useState(0);
+  return (
+    <button onClick={() => setCount(count + 1)}>
+      You clicked me {count} times
+    </button>
+  );
+}
+```
+
+</Sandpack>
+
+**If your app is fully built with React, you shouldn't need to create any more roots, or to call [`root.render`](#root-render) again.** 
+
+From this point on, React will manage the DOM of your entire app. To add more components, [nest them inside the `App` component.](/learn/importing-and-exporting-components) When you need to update the UI, each of your components can do this by [using state.](/reference/react/useState) When you need to display extra content like a modal or a tooltip outside the DOM node, [render it with a portal.](/reference/react-dom/createPortal)
+
+<Note>
+
+When your HTML is empty, the user sees a blank page until the app's JavaScript code loads and runs:
+
+```html
+<div id="root"></div>
+```
+
+This can feel very slow! To solve this, you can generate the initial HTML from your components [on the server or during the build.](/reference/react-dom/server) Then your visitors can read text, see images, and click links before any of the JavaScript code loads. We recommend to [use a framework](/learn/start-a-new-react-project#building-with-a-full-featured-framework) that does this optimization out of the box. Depending on when it runs, this is called *server-side rendering (SSR)* or *static site generation (SSG).*
+
+</Note>
+
+<Pitfall>
+
+**Apps using server rendering or static generation must call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) instead of `createRoot`.** React will then *hydrate* (reuse) the DOM nodes from your HTML instead of destroying and re-creating them.
+
+</Pitfall>
+
+---
+
+### Rendering a page partially built with React {/*rendering-a-page-partially-built-with-react*/}
+
+If your page [isn't fully built with React](/learn/add-react-to-a-website), you can call `createRoot` multiple times to create a root for each top-level piece of UI managed by React. You can display different content in each root by calling [`root.render`.](#root-render)
+
+Here, two different React components are rendered into two DOM nodes defined in the `index.html` file:
+
+<Sandpack>
+
+```html public/index.html
+<nav id="navigation"></nav>
+<main>
+  <p>This paragraph is not rendered by React (open index.html to verify).</p>
+  <section id="comments"></section>
+</main>
+```
+
+```js index.js active
+import './styles.css';
+import { createRoot } from 'react-dom/client';
+import { Comments, Navigation } from './Components.js';
+
+const navDomNode = document.getElementById('navigation');
+const navRoot = createRoot(navDomNode); 
+navRoot.render(<Navigation />);
+
+const commentDomNode = document.getElementById('comments');
+const commentRoot = createRoot(commentDomNode); 
+commentRoot.render(<Comments />);
+```
+
+```js Components.js
+export function Navigation() {
+  return (
+    <ul>
+      <NavLink href="/">Home</NavLink>
+      <NavLink href="/about">About</NavLink>
+    </ul>
+  );
+}
+
+function NavLink({ href, children }) {
+  return (
+    <li>
+      <a href={href}>{children}</a>
+    </li>
+  );
+}
+
+export function Comments() {
+  return (
+    <>
+      <h2>Comments</h2>
+      <Comment text="Hello!" author="Sophie" />
+      <Comment text="How are you?" author="Sunil" />
+    </>
+  );
+}
+
+function Comment({ text, author }) {
+  return (
+    <p>{text} — <i>{author}</i></p>
+  );
+}
+```
+
+```css
+nav ul { padding: 0; margin: 0; }
+nav ul li { display: inline-block; margin-right: 20px; }
+```
+
+</Sandpack>
+
+You could also create a new DOM node with [`document.createElement()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement) and add it to the document manually.
+
+```js
+const domNode = document.createElement('div');
+const root = createRoot(domNode); 
+root.render(<Comment />);
+document.body.appendChild(domNode); // You can add it anywhere in the document
+```
+
+To remove the React tree from the DOM node and clean up all the resources used by it, call [`root.unmount`.](#root-unmount)
+
+```js
+root.unmount();
+```
+
+This is mostly useful if your React components are inside an app written in a different framework.
+
+---
+
+### Updating a root component {/*updating-a-root-component*/}
+
+You can call `render` more than once on the same root. As long as the component tree structure matches up with what was previously rendered, React will [preserve the state.](/learn/preserving-and-resetting-state) Notice how you can type in the input, which means that the updates from repeated `render` calls every second in this example are not destructive:
+
+<Sandpack>
+
+```js index.js active
+import { createRoot } from 'react-dom/client';
+import './styles.css';
+import App from './App.js';
+
+const root = createRoot(document.getElementById('root'));
+
+let i = 0;
+setInterval(() => {
+  root.render(<App counter={i} />);
+  i++;
+}, 1000);
+```
+
+```js App.js
+export default function App({counter}) {
+  return (
+    <>
+      <h1>Hello, world! {counter}</h1>
+      <input placeholder="Type something here" />
+    </>
+  );
+}
+```
+
+</Sandpack>
+
+It is uncommon to call `render` multiple times. Usually, you'll [update state](/reference/react/useState) inside one of the components instead.
+
+---
+## Troubleshooting {/*troubleshooting*/}
+
+### I've created a root, but nothing is displayed {/*ive-created-a-root-but-nothing-is-displayed*/}
+
+Make sure you haven't forgotten to actually *render* your app into the root:
+
+```js {5}
+import { createRoot } from 'react-dom/client';
+import App from './App.js';
+
+const root = createRoot(document.getElementById('root'));
+root.render(<App />);
+```
+
+Until you do that, nothing is displayed.
+
+---
+
+### I'm getting an error: "Target container is not a DOM element" {/*im-getting-an-error-target-container-is-not-a-dom-element*/}
+
+This error means that whatever you're passing to `createRoot` is not a DOM node.
+
+If you're not sure what's happening, try logging it:
+
+```js {2}
+const domNode = document.getElementById('root');
+console.log(domNode); // ???
+const root = createRoot(domNode);
+root.render(<App />);
+```
+
+For example, if `domNode` is `null`, it means that [`getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) returned `null`. This will happen if there is no node in the document with the given ID at the time of your call. There may be a few reasons for it:
+
+1. The ID you're looking for might differ from the ID you used in the HTML file. Check for typos!
+2. Your bundle's `<script>` tag cannot "see" any DOM nodes that appear *after* it in the HTML.
+
+If you can't get it working, check out [Adding React to a Website](/learn/add-react-to-a-website) for a working example.
+
+Another common way to get this error is to write `createRoot(<App />)` instead of `createRoot(domNode)`.
+
+---
+
+### I'm getting an error: "Functions are not valid as a React child." {/*im-getting-an-error-functions-are-not-valid-as-a-react-child*/}
+
+This error means that whatever you're passing to `root.render` is not a React component.
+
+This may happen if you call `root.render` with `Component` instead of `<Component />`:
+
+```js {2,5}
+// 🚩 Wrong: App is a function, not a Component.
+root.render(App);
+
+// ✅ Correct: <App /> is a component.
+root.render(<App />);
+````
+
+Or if you pass a function to `root.render`, instead of the result of calling it:
+
+```js {2,5}
+// 🚩 Wrong: createApp is a function, not a component.
+root.render(createApp);
+
+// ✅ Correct: call createApp to return a component.
+root.render(createApp());
+```
+
+If you can't get it working, check out [Adding React to a Website](/learn/add-react-to-a-website) for a working example.
+
+---
+
+### My server-rendered HTML gets re-created from scratch {/*my-server-rendered-html-gets-re-created-from-scratch*/}
+
+If your app is server-rendered and includes the initial HTML generated by React, you might notice that creating a root and calling `root.render` deletes all that HTML, and then re-creates all the DOM nodes from scratch. This can be slower, resets focus and scroll positions, and may lose other user input.
+
+Server-rendered apps must use [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) instead of `createRoot`:
+
+```js {1,4-7}
+import { hydrateRoot } from 'react-dom/client';
+import App from './App.js';
+
+hydrateRoot(
+  document.getElementById('root'),
+  <App />
+);
+```
+
+Note that its API is different. In particular, usually there will be no further `root.render` call.
diff --git a/beta/src/content/reference/react-dom/client/hydrateRoot.md b/beta/src/content/reference/react-dom/client/hydrateRoot.md
new file mode 100644
index 000000000..bff1a17f9
--- /dev/null
+++ b/beta/src/content/reference/react-dom/client/hydrateRoot.md
@@ -0,0 +1,373 @@
+---
+title: hydrateRoot
+---
+
+<Intro>
+
+`hydrateRoot` lets you display React components inside a browser DOM node whose HTML content was previously generated by [`react-dom/server`.](/reference/react-dom/server)
+
+```js
+const root = hydrateRoot(domNode, reactNode, options?)
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `hydrateRoot(domNode, options?)` {/*hydrateroot*/}
+
+Call `hydrateRoot` to “attach” React to existing HTML that was already rendered by React in a server environment.
+
+```js
+import { hydrateRoot } from 'react-dom/client';
+
+const domNode = document.getElementById('root');
+const root = hydrateRoot(domNode, reactNode);
+```
+
+React will attach to the HTML that exists inside the `domNode`, and take over managing the DOM inside it. An app fully built with React will usually only have one `hydrateRoot` call with its root component.
+
+[See more examples below.](#usage)
+
+#### Parameters {/*parameters*/}
+
+* `domNode`: A [DOM element](https://developer.mozilla.org/en-US/docs/Web/API/Element) that was rendered as the root element on the server.
+
+* `reactNode`: The "React node" used to render the existing HTML. This will usually be a piece of JSX like `<App />` which was rendered with a `ReactDOM Server` method such as `renderToPipeableStream(<App />)`.
+
+* **optional** `options`: An object with options for this React root.
+
+  * **optional** `onRecoverableError`: Callback called when React automatically recovers from errors.
+  * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix as used on the server.
+  * **optional** `nonce`: 
+
+#### Returns {/*returns*/}
+
+`hydrateRoot` returns an object with two methods: [`render`](#root-render) and [`unmount`.](#root-unmount)
+
+#### Caveats {/*caveats*/}
+
+* `hydrateRoot()` expects the rendered content to be identical with the server-rendered content. You should treat mismatches as bugs and fix them.
+* In development mode, React warns about mismatches during hydration. There are no guarantees that attribute differences will be patched up in case of mismatches. This is important for performance reasons because in most apps, mismatches are rare, and so validating all markup would be prohibitively expensive.
+* You'll likely have only one `hydrateRoot` call in your app. If you use a framework, it might do this call for you.
+* If your app is client-rendered with no HTML rendered already, using `hydrateRoot()` is not supported. Use [`createRoot()`](/reference/react-dom/client/createRoot) instead.
+
+---
+
+### `root.render(reactNode)` {/*root-render*/}
+
+Call `root.render` to update a React component inside a hydrated React root for a browser DOM element.
+
+```js
+root.render(<App />);
+```
+
+React will update `<App />` in the hydrated `root`.
+
+[See more examples below.](#usage)
+
+#### Parameters {/*root-render-parameters*/}
+
+* `reactNode`: A "React node" that you want to update. This will usually be a piece of JSX like `<App />`, but you can also pass a React element constructed with [`createElement()`](/reference/react/createElement), a string, a number, `null`, or `undefined`.
+
+
+#### Returns {/*root-render-returns*/}
+
+`root.render` returns `undefined`.
+
+#### Caveats {/*root-render-caveats*/}
+
+* If you call `root.render` before the root has finished hydrating, React will clear the existing server-rendered HTML content and switch the entire root to client rendering.
+
+---
+
+### `root.unmount()` {/*root-unmount*/}
+
+Call `root.unmount` to destroy a rendered tree inside a React root.
+
+```js
+root.unmount();
+```
+
+An app fully built with React will usually not have any calls to `root.unmount`.
+
+This is mostly useful if your React root's DOM node (or any of its ancestors) may get removed from the DOM by some other code. For example, imagine a jQuery tab panel that removes inactive tabs from the DOM. If a tab gets removed, everything inside it (including the React roots inside) would get removed from the DOM as well. In that case, you need to tell React to "stop" managing the removed root's content by calling `root.unmount`. Otherwise, the components inside the removed root won't know to clean up and free up global resources like subscriptions.
+
+Calling `root.unmount` will unmount all the components in the root and "detach" React from the root DOM node, including removing any event handlers or state in the tree. 
+
+
+#### Parameters {/*root-unmount-parameters*/}
+
+`root.unmount` does not accept any parameters.
+
+
+#### Returns {/*root-unmount-returns*/}
+
+`render` returns `null`.
+
+#### Caveats {/*root-unmount-caveats*/}
+
+* Calling `root.unmount` will unmount all the components in the tree and "detach" React from the root DOM node.
+
+* Once you call `root.unmount` you cannot call `root.render` again on the root. Attempting to call `root.render` on an unmounted root will throw a "Cannot update an unmounted root" error.
+
+---
+
+## Usage {/*usage*/}
+
+### Hydrating server-rendered HTML {/*hydrating-server-rendered-html*/}
+
+If your app's HTML was generated by [`react-dom/server`](/reference/react-dom/client/createRoot), you need to *hydrate* it on the client.
+
+```js [[1, 3, "document.getElementById('root')"], [2, 3, "<App />"]]
+import { hydrateRoot } from 'react-dom/client';
+
+hydrateRoot(document.getElementById('root'), <App />);
+````
+
+This will hydrate the server HTML inside the <CodeStep step={1}>browser DOM node</CodeStep> with the <CodeStep step={2}>React component</CodeStep> for your app. Usually, you will do it once at startup. If you use a framework, it might do this behind the scenes for you.
+
+To hydrate your app, React will "attach" your components' logic to the initial generated HTML from the server. Hydration turns the initial HTML snapshot from the server into a fully interactive app that runs in the browser.
+
+<Sandpack>
+
+```html public/index.html
+<!--
+  HTML content inside <div id="root">...</div>
+  was generated from App by react-dom/server.
+-->
+<div id="root"><h1>Hello, world!</h1><button>You clicked me <!-- -->0<!-- --> times</button></div>
+```
+
+```js index.js active
+import './styles.css';
+import { hydrateRoot } from 'react-dom/client';
+import App from './App.js';
+
+hydrateRoot(
+  document.getElementById('root'),
+  <App />
+);
+```
+
+```js App.js
+import { useState } from 'react';
+
+export default function App() {
+  return (
+    <>
+      <h1>Hello, world!</h1>
+      <Counter />
+    </>
+  );
+}
+
+function Counter() {
+  const [count, setCount] = useState(0);
+  return (
+    <button onClick={() => setCount(count + 1)}>
+      You clicked me {count} times
+    </button>
+  );
+}
+```
+
+</Sandpack>
+
+You shouldn't need to call `hydrateRoot` again or to call it in more places. From this point on, React will be managing the DOM of your application. If you want to update the UI, your components can do this by [using state.](/reference/react/useState)
+
+<Pitfall>
+
+The React tree you pass to `hydrateRoot` needs to produce **the same output** as it did on the server.
+
+This is important for the user experience. The user will spend some time looking at the server-generated HTML before your JavaScript code loads. Server rendering creates an illusion that the app loads faster by showing the HTML snapshot of its output. Suddenly showing different content breaks that illusion. This is why the server render output must match the initial render output on the client during hydration.
+
+The most common causes leading to hydration errors include:
+
+* Extra whitespace (like newlines) around the React-generated HTML inside the root node.
+* Using checks like `typeof window !== 'undefined'` in your rendering logic.
+* Using browser-only APIs like [`window.matchMedia`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) in your rendering logic.
+* Rendering different data on the server and the client.
+
+React can recover from some hydration errors, but **you must fix them like other bugs.** In the best case, they'll lead to a slower app; in the worst case, event handlers would get attached to the wrong elements.
+
+</Pitfall>
+
+---
+
+### Hydrating an entire document {/*hydrating-an-entire-document*/}
+
+Apps fully built with React can render the entire document from the root component, including the [`<html>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html) tag:
+
+```js {3,13}
+function App() {
+  return (
+    <html>
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="stylesheet" href="/styles.css"></link>
+        <title>My app</title>
+      </head>
+      <body>
+        <Router />
+      </body>
+    </html>
+  );
+}
+```
+
+To hydrate the entire document, pass the [`document`](https://developer.mozilla.org/en-US/docs/Web/API/Window/document) global as the first argument to `hydrateRoot`:
+
+```js {4}
+import { hydrateRoot } from 'react-dom/client';
+import App from './App.js';
+
+hydrateRoot(document, <App />);
+```
+
+---
+
+### Suppressing unavoidable hydration mismatch errors {/*suppressing-unavoidable-hydration-mismatch-errors*/}
+
+If a single element’s attribute or text content is unavoidably different between the server and the client (for example, a timestamp), you may silence the hydration mismatch warning.
+
+To silence hydration warnings on an element, add `suppressHydrationWarning={true}`:
+
+<Sandpack>
+
+```html public/index.html
+<!--
+  HTML content inside <div id="root">...</div>
+  was generated from App by react-dom/server.
+-->
+<div id="root"><h1>Current Date: <!-- -->01/01/2020</h1></div>
+```
+
+```js index.js
+import './styles.css';
+import { hydrateRoot } from 'react-dom/client';
+import App from './App.js';
+
+hydrateRoot(document.getElementById('root'), <App />);
+```
+
+```js App.js active
+export default function App() {
+  return (
+    <h1 suppressHydrationWarning={true}>
+      Current Date: {new Date().toLocaleDateString()}
+    </h1>
+  );
+}
+```
+
+</Sandpack>
+
+This only works one level deep, and is intended to be an escape hatch. Don’t overuse it. Unless it’s text content, React still won’t attempt to patch it up, so it may remain inconsistent until future updates.
+
+---
+
+### Handling different client and server content {/*handling-different-client-and-server-content*/}
+
+If you intentionally need to render something different on the server and the client, you can do a two-pass rendering. Components that render something different on the client can read a [state variable](/reference/react/useState) like `isClient`, which you can set to `true` in an [Effect](/reference/react/useEffect):
+
+<Sandpack>
+
+```html public/index.html
+<!--
+  HTML content inside <div id="root">...</div>
+  was generated from App by react-dom/server.
+-->
+<div id="root"><h1>Is Server</h1></div>
+```
+
+```js index.js
+import './styles.css';
+import { hydrateRoot } from 'react-dom/client';
+import App from './App.js';
+
+hydrateRoot(document.getElementById('root'), <App />);
+```
+
+```js App.js active
+import { useState, useEffect } from "react";
+
+export default function App() {
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  return (
+    <h1>
+      {isClient ? 'Is Client' : 'Is Server'}
+    </h1>
+  );
+}
+```
+
+</Sandpack>
+
+This way the initial render pass will render the same content as the server, avoiding mismatches, but an additional pass will happen synchronously right after hydration.
+
+<Pitfall>
+
+This approach makes hydration slower because your components have to render twice. Be mindful of the user experience on slow connections. The JavaScript code may load significantly later than the initial HTML render, so rendering a different UI immediately after hydration may also feel jarring to the user.
+
+</Pitfall>
+
+---
+
+### Updating a hydrated root component {/*updating-a-hydrated-root-component*/}
+
+After the root has finished hydrating, you can call [`root.render`](#root-render) to update the root React component. **Unlike with [`createRoot`](/reference/react-dom/client/createRoot), you don't usually need to do this because the initial content was already rendered as HTML.**
+
+If you call `root.render` at some point after hydration, and the component tree structure matches up with what was previously rendered, React will [preserve the state.](/learn/preserving-and-resetting-state) Notice how you can type in the input, which means that the updates from repeated `render` calls every second in this example are not destructive:
+
+<Sandpack>
+
+```html public/index.html
+<!--
+  All HTML content inside <div id="root">...</div> was
+  generated by rendering <App /> with react-dom/server.
+-->
+<div id="root"><h1>Hello, world! <!-- -->0</h1><input placeholder="Type something here"/></div>
+```
+
+```js index.js active
+import { hydrateRoot } from 'react-dom/client';
+import './styles.css';
+import App from './App.js';
+
+const root = hydrateRoot(
+  document.getElementById('root'),
+  <App counter={0} />
+);
+
+let i = 0;
+setInterval(() => {
+  root.render(<App counter={i} />);
+  i++;
+}, 1000);
+```
+
+```js App.js
+export default function App({counter}) {
+  return (
+    <>
+      <h1>Hello, world! {counter}</h1>
+      <input placeholder="Type something here" />
+    </>
+  );
+}
+```
+
+</Sandpack>
+
+It is uncommon to call [`root.render`](#root-render) on a hydrated root. Usually, you'll [update state](/reference/react/useState) inside one of the components instead.
diff --git a/beta/src/content/reference/react-dom/client/index.md b/beta/src/content/reference/react-dom/client/index.md
new file mode 100644
index 000000000..4e588b3a2
--- /dev/null
+++ b/beta/src/content/reference/react-dom/client/index.md
@@ -0,0 +1,22 @@
+---
+title: Client React DOM APIs
+---
+
+<Intro>
+
+The `react-dom/client` APIs let you render React components on the client (in the browser). These APIs are typically used at the top level of your app to initialize your React tree. A [framework](/learn/start-a-new-react-project#building-with-a-full-featured-framework) may call them for you. Most of your components don't need to import or use them.
+
+</Intro>
+
+---
+
+## Client APIs {/*client-apis*/}
+
+* [`createRoot`](/reference/react-dom/client/createRoot) lets you create a root to display React components inside a browser DOM node.
+* [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) lets you display React components inside a browser DOM node whose HTML content was previously generated by [`react-dom/server`.](/reference/react-dom/server)
+
+---
+
+## Browser support {/*browser-support*/}
+
+React supports all popular browsers, including Internet Explorer 9 and above. Some polyfills are required for older browsers such as IE 9 and IE 10.
\ No newline at end of file
diff --git a/beta/src/content/reference/react-dom/components/common.md b/beta/src/content/reference/react-dom/components/common.md
new file mode 100644
index 000000000..d640248c8
--- /dev/null
+++ b/beta/src/content/reference/react-dom/components/common.md
@@ -0,0 +1,1184 @@
+---
+title: "Common components (e.g. <div>)"
+---
+
+<Intro>
+
+All built-in browser components, such as [`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div), support some common props and events.
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### Common components (e.g. `<div>`) {/*common*/}
+
+```js
+<div className="wrapper">Some content</div>
+```
+
+[See more examples below.](#usage)
+
+#### Props {/*common-props*/}
+
+These special React props are supported for all built-in components:
+
+* `children`: A React node (an element, a string, a number, [a portal,](/reference/react-dom/createPortal) an empty node like `null`, `undefined` and booleans, or an array of other React nodes). Specifies the content inside the component. When you use JSX, you will usually specify the `children` prop implicitly by nesting tags like `<div><span /></div>`.
+
+* `dangerouslySetInnerHTML`: An object of the form `{ __html: '<p>some html</p>' }` with a raw HTML string inside. Overrides the [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) property of the DOM node and displays the passed HTML inside. This should be used with extreme caution! If the HTML inside isn't trusted (for example, if it's based on user data), you risk introducing an [XSS](https://en.wikipedia.org/wiki/Cross-site_scripting) vulnerability. [Read more about using `dangerouslySetInnerHTML`.](#dangerously-setting-the-inner-html)
+
+* `ref`: A ref object from [`useRef`](/reference/react/useRef) or [`createRef`](/reference/react/createRef), or a [`ref` callback function,](#ref-callback) or a string for [legacy refs.](https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs) Your ref will be filled with the DOM element for this node. [Read more about manipulating the DOM with refs.](#manipulating-a-dom-node-with-a-ref)
+
+* `suppressContentEditableWarning`: A boolean. If `true`, suppresses the warning that React shows for elements that both have `children` and `contentEditable={true}` (which normally do not work together). Use this if you're building a text input library that manages the `contentEditable` content manually.
+
+* `suppressHydrationWarning`: A boolean. If you use [server rendering,](/reference/react-dom/server) normally there is a warning when the server and the client render different content. In some rare cases (like timestamps), it is very hard or impossible to guarantee an exact match. If you set `suppressHydrationWarning` to `true`, React will not warn you about mismatches in the attributes and the content of that element. It only works one level deep, and is intended to be used as an escape hatch. Don't overuse it. [Read more about suppressing hydration errors.](/reference/react-dom/client/hydrateRoot#suppressing-unavoidable-hydration-mismatch-errors)
+
+* `style`: An object with CSS styles, for example `{ fontWeight: 'bold', margin: 20 }`. Similarly to the DOM [`style`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) property, the CSS property names need to be written as `camelCase`, for example `fontWeight` instead of `font-weight`. You can pass strings or numbers as values. If you pass a number, like `width: 100`, React will automatically append `px` ("pixels") to the value unless it's a [unitless property.](https://github.com/facebook/react/blob/81d4ee9ca5c405dce62f64e61506b8e155f38d8d/packages/react-dom-bindings/src/shared/CSSProperty.js#L8-L57) We recommend using `style` only for dynamic styles where you don't know the style values ahead of time. In other cases, applying plain CSS classes with `className` is more efficient. [Read more about applying CSS with `className` and `styles`.](#applying-css-styles)
+
+These standard DOM props are also supported for all built-in components:
+
+* [`accessKey`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey): A string. Specifies a keyboard shortcut for the element. [Not generally recommended.](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey#accessibility_concerns)
+* [`aria-*`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes): ARIA attributes let you specify the accessibility tree information for this element. See [ARIA attributes](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes) for a complete reference. In React, all ARIA attribute names are exactly the same as in HTML.
+* [`autoCapitalize`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize): A string. Specifies whether and how the user input should be capitalized.
+* [`className`](https://developer.mozilla.org/en-US/docs/Web/API/Element/className): A string. Specifies the element's CSS class name. [Read more about applying CSS styles.](#applying-css-styles)
+* [`contentEditable`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable): A boolean. If `true`, the browser lets the user edit the rendered element directly. This is used to implement rich text input libraries like [Lexical.](https://lexical.dev/) React warns if you try to pass React children to an element with `contentEditable={true}` because React will not be able to update its content after user edits.
+* [`data-*`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*): Data attributes let you attach some string data to the element, for example `data-fruit="banana"`. In React, they are not commonly used because you would usually read data from props or state instead.
+* [`dir`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir): Either `'ltr'` or `'rtl'`. Specifies the text direction of the element.
+* [`draggable`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/draggable): A boolean. Specifies whether the element is draggable. Part of [HTML Drag and Drop API.](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API)
+* [`enterKeyHint`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/enterKeyHint): A string. Specifies which action to present for the enter key on virtual keyboards.
+* [`htmlFor`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor): A string. For [`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) and [`<output>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output), lets you [associate the label with some control.](/reference/react-dom/components/input#providing-a-label-for-an-input) Same as [`for` HTML attribute.](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/for) React uses the standard DOM property names (`htmlFor`) instead of HTML attribute names.
+* [`hidden`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden): A boolean or a string. Specifies whether the element should be hidden.
+* [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id): A string. Specifies a unique identifier for this element, which can be used to find it later or connect it with other elements. Generate it with [`useId`](/reference/react/useId) to avoid clashes between multiple instances of the same component.
+* [`is`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/is): A string. If specified, the component will behave like a [custom element.](/reference/react-dom/components#custom-html-elements)
+* [`inputMode`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode): A string. Specifies what kind of keyboard to display (for example, text, number or telephone).
+* [`itemProp`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemprop): A string. Specifies which property the element represents for structured data crawlers.
+* [`lang`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang): A string. Specifies the language of the element.
+* [`onAnimationEnd`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationend_event): An [`AnimationEvent` handler](#animationevent-handler) function. Fires when a CSS animation completes.
+* `onAnimationEndCapture`: A version of `onAnimationEnd` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onAnimationIteration`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationiteration_event): An [`AnimationEvent` handler](#animationevent-handler) function. Fires when an iteration of a CSS animation ends, and another one begins.
+* `onAnimationIterationCapture`: A version of `onAnimationIteration` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onAnimationStart`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationstart_event): An [`AnimationEvent` handler](#animationevent-handler) function. Fires when a CSS animation starts.
+* `onAnimationStartCapture`: `onAnimationStart`, but fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onAuxClick`](https://developer.mozilla.org/en-US/docs/Web/API/Element/auxclick_event): A [`MouseEvent` handler](#mouseevent-handler) function. Fires when a non-primary pointer button was clicked.
+* `onAuxClickCapture`: A version of `onAuxClick` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* `onBeforeInput`: An [`InputEvent` handler](#inputevent-handler) function. Fires before the value of an editable element is modified. React does *not* yet use the native [`beforeinput`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforeinput_event) event, and instead attempts to polyfill it using other events.
+* `onBeforeInputCapture`: A version of `onBeforeInput` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* `onBlur`: A [`FocusEvent` handler](#focusevent-handler) function. Fires when an element lost focus. Unlike the built-in browser [`blur`](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event) event, in React the `onBlur` event bubbles.
+* `onBlurCapture`: A version of `onBlur` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onClick`](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event): A [`MouseEvent` handler](#mouseevent-handler) function. Fires when the primary button was clicked on the pointing device.
+* `onClickCapture`: A version of `onClick` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onCompositionStart`](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionstart_event): A [`CompositionEvent` handler](#compositionevent-handler) function. Fires when an [input method editor](https://developer.mozilla.org/en-US/docs/Glossary/Input_method_editor) starts a new composition session.
+* `onCompositionStartCapture`: A version of `onCompositionStart` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onCompositionEnd`](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionend_event): A [`CompositionEvent` handler](#compositionevent-handler) function. Fires when an [input method editor](https://developer.mozilla.org/en-US/docs/Glossary/Input_method_editor) completes or cancels a composition session.
+* `onCompositionEndCapture`: A version of `onCompositionEnd` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onCompositionUpdate`](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionupdate_event): A [`CompositionEvent` handler](#compositionevent-handler) function. Fires when an [input method editor](https://developer.mozilla.org/en-US/docs/Glossary/Input_method_editor) receives a new character.
+* `onCompositionUpdateCapture`: A version of `onCompositionUpdate` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onContextMenu`](https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event): A [`MouseEvent` handler](#mouseevent-handler) function. Fires when the user tries to open a context menu.
+* `onContextMenuCapture`: A version of `onContextMenu` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onCopy`](https://developer.mozilla.org/en-US/docs/Web/API/Element/copy_event): A [`ClipboardEvent` handler](#clipboardevent-handler) function. Fires when the user tries to copy something into the clipboard.
+* `onCopyCapture`: A version of `onCopy` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onCut`](https://developer.mozilla.org/en-US/docs/Web/API/Element/cut_event): A [`ClipboardEvent` handler](#clipboardevent-handler) function. Fires when the user tries to cut something into the clipboard.
+* `onCutCapture`: A version of `onCut` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* `onDoubleClick`: A [`MouseEvent` handler](#mouseevent-handler) function. Fires when the user clicks twice. Corresponds to the browser [`dblclick` event.](https://developer.mozilla.org/en-US/docs/Web/API/Element/dblclick_event)
+* `onDoubleClickCapture`: A version of `onDoubleClick` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onDrag`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/drag_event): A [`DragEvent` handler](#dragevent-handler) function. Fires while the user is dragging something. 
+* `onDragCapture`: A version of `onDrag` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onDragEnd`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragend_event): A [`DragEvent` handler](#dragevent-handler) function. Fires when the user stops dragging something. 
+* `onDragEndCapture`: A version of `onDragEnd` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onDragEnter`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragenter_event): A [`DragEvent` handler](#dragevent-handler) function. Fires when the dragged content enters a valid drop target. 
+* `onDragEnterCapture`: A version of `onDragEnter` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onDragOver`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragover_event): A [`DragEvent` handler](#dragevent-handler) function. Fires on a valid drop target while the dragged content is dragged over it. You must call `e.preventDefault()` here to allow dropping.
+* `onDragOverCapture`: A version of `onDragOver` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onDragStart`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragstart_event): A [`DragEvent` handler](#dragevent-handler) function. Fires when the user starts dragging an element.
+* `onDragStartCapture`: A version of `onDragStart` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onDrop`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/drop_event): A [`DragEvent` handler](#dragevent-handler) function. Fires when something is dropped on a valid drop target.
+* `onDropCapture`: A version of `onDrop` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* `onFocus`: A [`FocusEvent` handler](#focusevent-handler) function. Fires when an element lost focus. Unlike the built-in browser [`focus`](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event) event, in React the `onFocus` event bubbles.
+* `onFocusCapture`: A version of `onFocus` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onGotPointerCapture`](https://developer.mozilla.org/en-US/docs/Web/API/Element/gotpointercapture_event): A [`PointerEvent` handler](#pointerevent-handler) function. Fires when an element programmatically captures a pointer.
+* `onGotPointerCaptureCapture`: A version of `onGotPointerCapture` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onKeyDown`](https://developer.mozilla.org/en-US/docs/Web/API/Element/keydown_event): A [`KeyboardEvent` handler](#pointerevent-handler) function. Fires when a key is pressed.
+* `onKeyDownCapture`: A version of `onKeyDown` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onKeyPress`](https://developer.mozilla.org/en-US/docs/Web/API/Element/keypress_event): A [`KeyboardEvent` handler](#pointerevent-handler) function. Deprecated. Use `onKeyDown` or `onBeforeInput` instead.
+* `onKeyPressCapture`: A version of `onKeyPress` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onKeyUp`](https://developer.mozilla.org/en-US/docs/Web/API/Element/keyup_event): A [`KeyboardEvent` handler](#pointerevent-handler) function. Fires when a key is released.
+* `onKeyUpCapture`: A version of `onKeyUp` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onLostPointerCapture`](https://developer.mozilla.org/en-US/docs/Web/API/Element/lostpointercapture_event): A [`PointerEvent` handler](#pointerevent-handler) function. Fires when an element stops capturing a pointer.
+* `onLostPointerCaptureCapture`: A version of `onLostPointerCapture` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onMouseDown`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mousedown_event): A [`MouseEvent` handler](#mouseevent-handler) function. Fires when the pointer is pressed down.
+* `onMouseDownCapture`: A version of `onMouseDown` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onMouseEnter`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseenter_event): A [`MouseEvent` handler](#mouseevent-handler) function. Fires when the pointer moves inside an element. Does not have a capture phase. Instead, `onMouseLeave` and `onMouseEnter` propagate from the element being left to the one being entered.
+* [`onMouseLeave`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseleave_event): A [`MouseEvent` handler](#mouseevent-handler) function. Fires when the pointer moves outside an element. Does not have a capture phase. Instead, `onMouseLeave` and `onMouseEnter` propagate from the element being left to the one being entered.
+* [`onMouseMove`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event): A [`MouseEvent` handler](#mouseevent-handler) function. Fires when the pointer changes coordinates.
+* `onMouseMoveCapture`: A version of `onMouseMove` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onMouseOut`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseout_event): A [`MouseEvent` handler](#mouseevent-handler) function. Fires when the pointer moves outside an element, or if it moves into a child element.
+* `onMouseOutCapture`: A version of `onMouseOut` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onMouseUp`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseup_event): A [`MouseEvent` handler](#mouseevent-handler) function. Fires when the pointer is released.
+* `onMouseUpCapture`: A version of `onMouseUp` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onPointerCancel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointercancel_event): A [`PointerEvent` handler](#pointerevent-handler) function. Fires when the browser cancels a pointer interaction.
+* `onPointerCancelCapture`: A version of `onPointerCancel` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onPointerDown`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerdown_event): A [`PointerEvent` handler](#pointerevent-handler) function. Fires when a pointer becomes active.
+* `onPointerDownCapture`: A version of `onPointerDown` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onPointerEnter`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerenter_event): A [`PointerEvent` handler](#pointerevent-handler) function. Fires when a pointer moves inside an element. Does not have a capture phase. Instead, `onPointerLeave` and `onPointerEnter` propagate from the element being left to the one being entered.
+* [`onPointerLeave`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerleave_event): A [`PointerEvent` handler](#pointerevent-handler) function. Fires when a pointer moves outside an element. Does not have a capture phase. Instead, `onPointerLeave` and `onPointerEnter` propagate from the element being left to the one being entered.
+* [`onPointerMove`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointermove_event): A [`PointerEvent` handler](#pointerevent-handler) function. Fires when a pointer changes coordinates.
+* `onPointerMoveCapture`: A version of `onPointerMove` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onPointerOut`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerout_event): A [`PointerEvent` handler](#pointerevent-handler) function. Fires when a pointer moves outside an element, if the pointer interaction is cancelled, and [a few other reasons.](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerout_event)
+* `onPointerOutCapture`: A version of `onPointerOut` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onPointerUp`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerup_event): A [`PointerEvent` handler](#pointerevent-handler) function. Fires when a pointer is no longer active.
+* `onPointerUpCapture`: A version of `onPointerUp` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onPaste`](https://developer.mozilla.org/en-US/docs/Web/API/Element/paste_event): A [`ClipboardEvent` handler](#clipboardevent-handler) function. Fires when the user tries to paste something from the clipboard.
+* `onPasteCapture`: A version of `onPaste` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onScroll`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll_event): An [`Event` handler](#event-handler) function. Fires when an element has been scrolled. This event does not bubble.
+* `onScrollCapture`: A version of `onScroll` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onSelect`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select_event): An [`Event` handler](#event-handler) function. Fires after the selection inside an editable element like an input changes. React extends the `onSelect` event to work for `contentEditable={true}` elements as well. In addition, React extends it to fire for empty selection and on edits (which may affect the selection).
+* `onSelectCapture`: A version of `onSelect` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onTouchCancel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/touchcancel_event): A [`TouchEvent` handler](#touchevent-handler) function. Fires when the browser cancels a touch interaction.
+* `onTouchCancelCapture`: A version of `onTouchCancel` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onTouchEnd`](https://developer.mozilla.org/en-US/docs/Web/API/Element/touchend_event): A [`TouchEvent` handler](#touchevent-handler) function. Fires when one or more touch points are removed.
+* `onTouchEndCapture`: A version of `onTouchEnd` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onTouchMove`](https://developer.mozilla.org/en-US/docs/Web/API/Element/touchmove_event): A [`TouchEvent` handler](#touchevent-handler) function. Fires one or more touch points are moved.
+* `onTouchMoveCapture`: A version of `onTouchMove` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onTouchStart`](https://developer.mozilla.org/en-US/docs/Web/API/Element/touchstart_event): A [`TouchEvent` handler](#touchevent-handler) function. Fires when one or more touch points are placed.
+* `onTouchStartCapture`: A version of `onTouchStart` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onTransitionEnd`](https://developer.mozilla.org/en-US/docs/Web/API/Element/transitionend_event): A [`TransitionEvent` handler](#transitionevent-handler) function. Fires when a CSS transition completes.
+* `onTransitionEndCapture`: A version of `onTransitionEnd` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onWheel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event): A [`WheelEvent` handler](#wheelevent-handler) function. Fires when the user rotates a wheel button.
+* `onWheelCapture`: A version of `onWheel` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`role`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles): A string. Specifies the element role explicitly for assistive technologies.
+nt.
+* [`slot`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles): A string. Specifies the slot name when using shadow DOM. In React, an equivalent pattern is typically achieved by passing JSX as props, for example `<Layout left={<Sidebar />} right={<Content />} />`.
+* [`spellCheck`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck): A boolean or null. If explicitly set to `true` or `false`, enables or disables spellchecking.
+* [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex): A number. Overrides the default Tab button behavior. [Avoid using values other than `-1` and `0`.](https://www.tpgi.com/using-the-tabindex-attribute/)
+* [`title`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title): A string. Specifies the tooltip text for the element.
+* [`translate`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/translate): Either `'yes'` or `'no'`. Passing `'no'` excludes the element content from being translated.
+
+You can also pass custom attributes as props, for example `mycustomprop="someValue".` This can be useful when integrating with third-party libraries. The custom attribute name must be lowercase and must not start with `on`. The value will be converted to a string. If you pass `null` or `undefined`, the custom attribute will be removed.
+
+These events fire only for the [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) elements:
+
+* [`onReset`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset_event): An [`Event` handler](#event-handler) function. Fires when a form gets reset.
+* `onResetCapture`: A version of `onReset` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onSubmit`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event): An [`Event` handler](#event-handler) function. Fires when a form gets submitted.
+* `onSubmitCapture`: A version of `onSubmit` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+
+These events fire only for the [`<dialog>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) elements. Unlike browser events, they bubble in React:
+
+* [`onCancel`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/cancel_event): An [`Event` handler](#event-handler) function. Fires when the user tries to dismiss the dialog.
+* `onCancelCapture`: A version of `onCancel` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+capture-phase-events)
+* [`onClose`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/close_event): An [`Event` handler](#event-handler) function. Fires when a dialog has been closed.
+* `onCloseCapture`: A version of `onClose` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+
+These events fire only for the [`<details>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) elements. Unlike browser events, they bubble in React:
+
+* [`onToggle`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDetailsElement/toggle_event): An [`Event` handler](#event-handler) function. Fires when the user toggles the details.
+* `onToggleCapture`: A version of `onToggle` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+capture-phase-events)
+
+These events fire for [`<img>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img), [`<iframe>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe), [`<object>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object), [`<embed>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed), [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link), and [SVG `<image>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_Image_Tag) elements. Unlike browser events, they bubble in React:
+
+* `onLoad`: An [`Event` handler](#event-handler) function. Fires when the resource has loaded.
+* `onLoadCapture`: A version of `onLoad` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onError`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/error_event): An [`Event` handler](#event-handler) function. Fires when the resource could not be loaded.
+* `onErrorCapture`: A version of `onError` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+
+These events fire for resources like [`<audio>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio) and [`<video>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video). Unlike browser events, they bubble in React:
+
+* [`onAbort`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/abort_event): An [`Event` handler](#event-handler) function. Fires when the resource has not fully loaded, but not due to an error.
+* `onAbortCapture`: A version of `onAbort` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onCanPlay`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canplay_event): An [`Event` handler](#event-handler) function. Fires when there's enough data to start playing, but not enough to play to the end without buffering.
+* `onCanPlayCapture`: A version of `onCanPlay` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onCanPlayThrough`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canplaythrough_event): An [`Event` handler](#event-handler) function. Fires when there's enough data that it's likely possible to start playing without buffering until the end.
+* `onCanPlayThroughCapture`: A version of `onCanPlayThrough` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onDurationChange`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/durationchange_event): An [`Event` handler](#event-handler) function. Fires when the media duration has updated.
+* `onDurationChangeCapture`: A version of `onDurationChange` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onEmptied`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/emptied_event): An [`Event` handler](#event-handler) function. Fires when the media has become empty.
+* `onEmptiedCapture`: A version of `onEmptied` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onEncrypted`](https://w3c.github.io/encrypted-media/#dom-evt-encrypted): An [`Event` handler](#event-handler) function. Fires when the browser encounters encrypted media.
+* `onEncryptedCapture`: A version of `onEncrypted` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onEnded`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ended_event): An [`Event` handler](#event-handler) function. Fires when the playback stops because there's nothing left to play.
+* `onEndedCapture`: A version of `onEnded` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onError`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/error_event): An [`Event` handler](#event-handler) function. Fires when the resource could not be loaded.
+* `onErrorCapture`: A version of `onError` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onLoadedData`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadeddata_event): An [`Event` handler](#event-handler) function. Fires when the current playback frame has loaded.
+* `onLoadedDataCapture`: A version of `onLoadedData` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onLoadedMetadata`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadedmetadata_event): An [`Event` handler](#event-handler) function. Fires when metadata has loaded.
+* `onLoadedMetadataCapture`: A version of `onLoadedMetadata` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onLoadStart`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadstart_event): An [`Event` handler](#event-handler) function. Fires when the browser started loading the resource.
+* `onLoadStartCapture`: A version of `onLoadStart` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onPause`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause_event): An [`Event` handler](#event-handler) function. Fires when the media was paused.
+* `onPauseCapture`: A version of `onPause` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onPlay`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play_event): An [`Event` handler](#event-handler) function. Fires when the media is no longer paused.
+* `onPlayCapture`: A version of `onPlay` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onPlaying`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playing_event): An [`Event` handler](#event-handler) function. Fires when the media starts or restarts playing.
+* `onPlayingCapture`: A version of `onPlaying` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onProgress`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/progress_event): An [`Event` handler](#event-handler) function. Fires periodically while the resource is loading.
+* `onProgressCapture`: A version of `onProgress` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onRateChange`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ratechange_event): An [`Event` handler](#event-handler) function. Fires when playback rate changes.
+* `onRateChangeCapture`: A version of `onRateChange` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* `onResize`: An [`Event` handler](#event-handler) function. Fires when video changes size.
+* `onResizeCapture`: A version of `onResize` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onSeeked`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seeked_event): An [`Event` handler](#event-handler) function. Fires when a seek operation completes.
+* `onSeekedCapture`: A version of `onSeeked` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onSeeking`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seeking_event): An [`Event` handler](#event-handler) function. Fires when a seek operation starts.
+* `onSeekingCapture`: A version of `onSeeking` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onStalled`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/stalled_event): An [`Event` handler](#event-handler) function. Fires when the browser is waiting for data but it keeps not loading.
+* `onStalledCapture`: A version of `onStalled` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onSuspend`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/suspend_event): An [`Event` handler](#event-handler) function. Fires when loading the resource was suspended.
+* `onSuspendCapture`: A version of `onSuspend` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onTimeUpdate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/timeupdate_event): An [`Event` handler](#event-handler) function. Fires when the current playback time updates.
+* `onTimeUpdateCapture`: A version of `onTimeUpdate` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onVolumeChange`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/volumechange_event): An [`Event` handler](#event-handler) function. Fires when the volume has changed.
+* `onVolumeChangeCapture`: A version of `onVolumeChange` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onWaiting`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/waiting_event): An [`Event` handler](#event-handler) function. Fires when the playback stopped due to temporary lack of data.
+* `onWaitingCapture`: A version of `onWaiting` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+
+#### Caveats {/*common-caveats*/}
+
+- You cannot pass both `children` and `dangerouslySetInnerHTML` at the same time.
+- Some events (like `onAbort` and `onLoad`) don't bubble in the browser, but bubble in React.
+
+---
+
+### `ref` callback function {/*ref-callback*/}
+
+Instead of a ref object (like the one returned by [`useRef`](/reference/react/useRef#manipulating-the-dom-with-a-ref)), you may pass a function to the `ref` attribute.
+
+```js
+<div ref={(node) => console.log(node)} />
+```
+
+[See an example of using the `ref` callback.](/learn/manipulating-the-dom-with-refs#how-to-manage-a-list-of-refs-using-a-ref-callback)
+
+When the `<div>` DOM node is added to the screen, React will call your `ref` callback with the DOM `node` as the argument. When that `<div>` DOM node is removed, React will call your `ref` callback with `null`.
+
+React will also call your `ref` callback whenever you pass a *different* `ref` callback. In the above example, `(node) => { ... }` is a different function on every render. This is why, when your component re-renders, the *previous* function will be called with `null` as the argument, and the *next* function will be called with the DOM node.
+
+#### Parameters {/*ref-callback-parameters*/}
+
+* `node`: A DOM node or `null`. React will pass you the DOM node when the ref gets attached, and `null` when the ref gets detached. Unless you pass the same function reference for the `ref` callback on every render, the callback will get temporarily detached and re-attached during ever re-render of the component.
+
+#### Returns {/*returns*/}
+
+Do not return anything from the `ref` callback.
+
+---
+
+### React event object {/*react-event-object*/}
+
+Your event handlers will receive a *React event object.* It is also sometimes known as a "synthetic event".
+
+```js
+<button onClick={e => {
+  console.log(e); // React event object
+}} />
+```
+
+It conforms to the same standard as the underlying DOM events, but fixes some browser inconsistencies.
+
+Some React events do not map directly to the browser's native events. For example in `onMouseLeave`, `e.nativeEvent` will point to a `mouseout` event. The specific mapping is not part of the public API and may change in the future. If you need the underlying browser event for some reason, read it from `e.nativeEvent`.
+
+#### Properties {/*react-event-object-properties*/}
+
+React event objects implement some of the standard [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event) properties:
+
+* [`bubbles`](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles): A boolean. Returns whether the event bubbles through the DOM. 
+* [`cancelable`](https://developer.mozilla.org/en-US/docs/Web/API/Event/cancelable): A boolean. Returns whether the event can be canceled.
+* [`currentTarget`](https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget): A DOM node. Returns the node to which the current handler is attached in the React tree.
+* [`defaultPrevented`](https://developer.mozilla.org/en-US/docs/Web/API/Event/defaultPrevented): A boolean. Returns whether `preventDefault` was called.
+* [`eventPhase`](https://developer.mozilla.org/en-US/docs/Web/API/Event/eventPhase): A number. Returns which phase the event is currently in.
+* [`isTrusted`](https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted): A boolean. Returns whether the event was initiated by user.
+* [`target`](https://developer.mozilla.org/en-US/docs/Web/API/Event/target): A DOM node. Returns the node on which the event has occurred (which could be a distant child).
+* [`timeStamp`](https://developer.mozilla.org/en-US/docs/Web/API/Event/timeStamp): A number. Returns the time when the event occurred.
+
+Additionally, React event objects provide these properties:
+
+* `nativeEvent`: A DOM [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). The original browser event object.
+
+#### Methods {/*react-event-object-methods*/}
+
+React event objects implement some of the standard [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event) methods:
+
+* [`preventDefault()`](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault): Prevents the default browser action for the event.
+* [`stopPropagation()`](https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation): Stops the event propagation through the React tree.
+
+Additionally, React event objects provide these methods:
+
+* `isDefaultPrevented()`: Returns a boolean value indicating whether `preventDefault` was called.
+* `isPropagationStopped()`: Returns a boolean value indicating whether `stopPropagation` was called.
+* `persist()`: Not used with React DOM. With React Native, call this to read event's properties after the event.
+* `isPersistent()`: Not used with React DOM. With React Native, returns whether `persist` has been called.
+
+#### Caveats {/*react-event-object-caveats*/}
+
+* The values of `currentTarget`, `eventPhase`, `target`, and `type` reflect the values your React code expects. Under the hood, React attaches event handlers at the root, but this is not reflected in React event objects. For example, `e.currentTarget` may not be the same as the underlying `e.nativeEvent.currentTarget`. For polyfilled events, `e.type` (React event type) may differ from `e.nativeEvent.type` (underlying type).
+
+---
+
+### `AnimationEvent` handler function {/*animationevent-handler*/}
+
+An event handler type for the [CSS animation](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations) events.
+
+```js
+<div
+  onAnimationStart={e => console.log('onAnimationStart')}
+  onAnimationIteration={e => console.log('onAnimationStart')}
+  onAnimationEnd={e => console.log('onAnimationStart')}
+/>
+```
+
+#### Parameters {/*animationevent-handler-parameters*/}
+
+* `e`: A [React event object](#react-event-object) with these extra [`AnimationEvent`](https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent) properties:
+  * [`animationName`](https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent/animationName)
+  * [`elapsedTime`](https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent/elapsedTime)
+  * [`pseudoElement`](https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent)
+
+---
+
+### `ClipboardEvent` handler function {/*clipboadevent-handler*/}
+
+An event handler type for the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API) events.
+
+```js
+<input
+  onCopy={e => console.log('onCopy')}
+  onCut={e => console.log('onCut')}
+  onPaste={e => console.log('onPaste')}
+/>
+```
+
+#### Parameters {/*clipboadevent-handler-parameters*/}
+
+* `e`: A [React event object](#react-event-object) with these extra [`ClipboardEvent`](https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent) properties:
+
+  * [`clipboardData`](https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent/clipboardData)
+
+---
+
+### `CompositionEvent` handler function {/*compositionevent-handler*/}
+
+An event handler type for the [input method editor (IME)](https://developer.mozilla.org/en-US/docs/Glossary/Input_method_editor) events.
+
+```js
+<input
+  onCompositionStart={e => console.log('onCompositionStart')}
+  onCompositionUpdate={e => console.log('onCompositionUpdate')}
+  onCompositionEnd={e => console.log('onCompositionEnd')}
+/>
+```
+
+#### Parameters {/*compositionevent-handler-parameters*/}
+
+* `e`: A [React event object](#react-event-object) with these extra [`CompositionEvent`](https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent) properties:
+  * [`data`](https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent/data)
+
+---
+
+### `DragEvent` handler function {/*dragevent-handler*/}
+
+An event handler type for the [HTML Drag and Drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API) events.
+
+```js
+<>
+  <div
+    draggable={true}
+    onDragStart={e => console.log('onDragStart')}
+    onDragEnd={e => console.log('onDragEnd')}
+  >
+    Drag source
+  </div>
+
+  <div
+    onDragEnter={e => console.log('onDragEnter')}
+    onDragLeave={e => console.log('onDragLeave')}
+    onDragOver={e => { e.preventDefault(); console.log('onDragOver'); }}
+    onDrop={e => console.log('onDrop')}
+  >
+    Drop target
+  </div>
+</>
+```
+
+#### Parameters {/*dragevent-handler-parameters*/}
+
+* `e`: A [React event object](#react-event-object) with these extra [`DragEvent`](https://developer.mozilla.org/en-US/docs/Web/API/DragEvent) properties:
+  * [`dataTransfer`](https://developer.mozilla.org/en-US/docs/Web/API/DragEvent/dataTransfer)
+
+  It also includes the inherited [`MouseEvent`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) properties:
+
+  * [`altKey`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/altKey)
+  * [`button`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button)
+  * [`buttons`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons)
+  * [`ctrlKey`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/ctrlKey)
+  * [`clientX`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientX)
+  * [`clientY`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientY)
+  * [`getModifierState(key)`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/getModifierState)
+  * [`metaKey`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/metaKey)
+  * [`movementX`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementX)
+  * [`movementY`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementY)
+  * [`pageX`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageX)
+  * [`pageY`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageY)
+  * [`relatedTarget`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/relatedTarget)
+  * [`screenX`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/screenX)
+  * [`screenY`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/screenY)
+  * [`shiftKey`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/shiftKey)
+
+  It also includes the inherited [`UIEvent`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) properties:
+
+  * [`detail`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail)
+  * [`view`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/view)
+
+---
+
+### `FocusEvent` handler function {/*focusevent-handler*/}
+
+An event handler type for the focus events.
+
+```js
+<input
+  onFocus={e => console.log('onFocus')}
+  onBlur={e => console.log('onBlur')}
+/>
+```
+
+[See an example.](#handling-focus-events)
+
+#### Parameters {/*focusevent-handler-parameters*/}
+
+* `e`: A [React event object](#react-event-object) with these extra [`FocusEvent`](https://developer.mozilla.org/en-US/docs/Web/API/FocusEvent) properties:
+  * [`relatedTarget`](https://developer.mozilla.org/en-US/docs/Web/API/FocusEvent/relatedTarget)
+
+  It also includes the inherited [`UIEvent`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) properties:
+
+  * [`detail`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail)
+  * [`view`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/view)
+
+---
+
+### `Event` handler function {/*event-handler*/}
+
+An event handler type for generic events.
+
+#### Parameters {/*event-handler-parameters*/}
+
+* `e`: A [React event object](#react-event-object) with no additional properties.
+
+---
+
+### `InputEvent` handler function {/*inputevent-handler*/}
+
+An event handler type for the `onBeforeInput` event.
+
+```js
+<input onBeforeInput={e => console.log('onBeforeInput')} />
+```
+
+#### Parameters {/*inputevent-handler-parameters*/}
+
+* `e`: A [React event object](#react-event-object) with these extra [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent) properties:
+  * [`data`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent/data)
+
+---
+
+### `KeyboardEvent` handler function {/*keyboardevent-handler*/}
+
+An event handler type for keyboard events.
+
+```js
+<input
+  onKeyDown={e => console.log('onKeyDown')}
+  onKeyUp={e => console.log('onKeyUp')}
+/>
+```
+
+[See an example.](#handling-keyboard-events)
+
+#### Parameters {/*keyboardevent-handler-parameters*/}
+
+* `e`: A [React event object](#react-event-object) with these extra [`KeyboardEvent`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) properties:
+  * [`altKey`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/altKey)
+  * [`charCode`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/charCode)
+  * [`code`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code)
+  * [`ctrlKey`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/ctrlKey)
+  * [`getModifierState(key)`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/getModifierState)
+  * [`key`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key)
+  * [`keyCode`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode)
+  * [`locale`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/locale)
+  * [`metaKey`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/metaKey)
+  * [`location`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/location)
+  * [`repeat`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/repeat)
+  * [`shiftKey`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/shiftKey)
+  * [`which`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/which)
+
+  It also includes the inherited [`UIEvent`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) properties:
+
+  * [`detail`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail)
+  * [`view`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/view)
+
+---
+
+### `MouseEvent` handler function {/*mouseevent-handler*/}
+
+An event handler type for mouse events.
+
+```js
+<div
+  onClick={e => console.log('onClick')}
+  onMouseEnter={e => console.log('onMouseEnter')}
+  onMouseOver={e => console.log('onMouseOver')}
+  onMouseDown={e => console.log('onMouseDown')}
+  onMouseUp={e => console.log('onMouseUp')}
+  onMouseLeave={e => console.log('onMouseLeave')}
+/>
+```
+
+[See an example.](#handling-mouse-events)
+
+#### Parameters {/*mouseevent-handler-parameters*/}
+
+* `e`: A [React event object](#react-event-object) with these extra [`MouseEvent`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) properties:
+  * [`altKey`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/altKey)
+  * [`button`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button)
+  * [`buttons`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons)
+  * [`ctrlKey`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/ctrlKey)
+  * [`clientX`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientX)
+  * [`clientY`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientY)
+  * [`getModifierState(key)`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/getModifierState)
+  * [`metaKey`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/metaKey)
+  * [`movementX`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementX)
+  * [`movementY`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementY)
+  * [`pageX`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageX)
+  * [`pageY`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageY)
+  * [`relatedTarget`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/relatedTarget)
+  * [`screenX`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/screenX)
+  * [`screenY`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/screenY)
+  * [`shiftKey`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/shiftKey)
+
+  It also includes the inherited [`UIEvent`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) properties:
+
+  * [`detail`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail)
+  * [`view`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/view)
+
+---
+
+### `PointerEvent` handler function {/*pointerevent-handler*/}
+
+An event handler type for [pointer events.](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events)
+
+```js
+<div
+  onPointerEnter={e => console.log('onPointerEnter')}
+  onPointerMove={e => console.log('onPointerMove')}
+  onPointerDown={e => console.log('onPointerDown')}
+  onPointerUp={e => console.log('onPointerUp')}
+  onPointerLeave={e => console.log('onPointerLeave')}
+/>
+```
+
+[See an example.](#handling-pointer-events)
+
+#### Parameters {/*pointerevent-handler-parameters*/}
+
+* `e`: A [React event object](#react-event-object) with these extra [`PointerEvent`](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) properties:
+  * [`height`](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/height)
+  * [`isPrimary`](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/isPrimary)
+  * [`pointerId`](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerId)
+  * [`pointerType`](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType)
+  * [`pressure`](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pressure)
+  * [`tangentialPressure`](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tangentialPressure)
+  * [`tiltX`](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltX)
+  * [`tiltY`](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltY)
+  * [`twist`](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/twist)
+  * [`width`](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/width)
+
+  It also includes the inherited [`MouseEvent`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) properties:
+
+  * [`altKey`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/altKey)
+  * [`button`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button)
+  * [`buttons`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons)
+  * [`ctrlKey`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/ctrlKey)
+  * [`clientX`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientX)
+  * [`clientY`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientY)
+  * [`getModifierState(key)`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/getModifierState)
+  * [`metaKey`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/metaKey)
+  * [`movementX`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementX)
+  * [`movementY`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementY)
+  * [`pageX`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageX)
+  * [`pageY`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageY)
+  * [`relatedTarget`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/relatedTarget)
+  * [`screenX`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/screenX)
+  * [`screenY`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/screenY)
+  * [`shiftKey`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/shiftKey)
+
+  It also includes the inherited [`UIEvent`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) properties:
+
+  * [`detail`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail)
+  * [`view`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/view)
+
+---
+
+### `TouchEvent` handler function {/*touchevent-handler*/}
+
+An event handler type for [touch events.](https://developer.mozilla.org/en-US/docs/Web/API/Touch_events)
+
+```js
+<div
+  onTouchStart={e => console.log('onTouchStart')}
+  onTouchMove={e => console.log('onTouchMove')}
+  onTouchEnd={e => console.log('onTouchEnd')}
+  onTouchCancel={e => console.log('onTouchCancel')}
+/>
+```
+
+#### Parameters {/*touchevent-handler-parameters*/}
+
+* `e`: A [React event object](#react-event-object) with these extra [`TouchEvent`](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent) properties:
+  * [`altKey`](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/altKey)
+  * [`ctrlKey`](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/ctrlKey)
+  * [`changedTouches`](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/changedTouches)
+  * [`getModifierState(key)`](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/getModifierState)
+  * [`metaKey`](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/metaKey)
+  * [`shiftKey`](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/shiftKey)
+  * [`touches`](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/touches)
+  * [`targetTouches`](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/targetTouches)
+  
+  It also includes the inherited [`UIEvent`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) properties:
+
+  * [`detail`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail)
+  * [`view`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/view)
+
+---
+
+### `TransitionEvent` handler function {/*transitionevent-handler*/}
+
+An event handler type for the CSS transition events.
+
+```js
+<div
+  onTransitionEnd={e => console.log('onTransitionEnd')}
+/>
+```
+
+#### Parameters {/*transitionevent-handler-parameters*/}
+
+* `e`: A [React event object](#react-event-object) with these extra [`TransitionEvent`](https://developer.mozilla.org/en-US/docs/Web/API/TransitionEvent) properties:
+  * [`elapsedTime`](https://developer.mozilla.org/en-US/docs/Web/API/TransitionEvent/elapsedTime)
+  * [`propertyName`](https://developer.mozilla.org/en-US/docs/Web/API/TransitionEvent/propertyName)
+  * [`pseudoElement`](https://developer.mozilla.org/en-US/docs/Web/API/TransitionEvent/pseudoElement)
+
+---
+
+### `UIEvent` handler function {/*uievent-handler*/}
+
+An event handler type for generic UI events.
+
+```js
+<div
+  onScroll={e => console.log('onScroll')}
+/>
+```
+
+#### Parameters {/*uievent-handler-parameters*/}
+
+* `e`: A [React event object](#react-event-object) with these extra [`UIEvent`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) properties:
+  * [`detail`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail)
+  * [`view`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/view)
+
+---
+
+### `WheelEvent` handler function {/*wheelevent-handler*/}
+
+An event handler type for the `onWheel` event.
+
+```js
+<div
+  onScroll={e => console.log('onScroll')}
+/>
+```
+
+#### Parameters {/*wheelevent-handler-parameters*/}
+
+* `e`: A [React event object](#react-event-object) with these extra [`WheelEvent`](https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent) properties:
+  * [`deltaMode`](https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/deltaMode)
+  * [`deltaX`](https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/deltaX)
+  * [`deltaY`](https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/deltaY)
+  * [`deltaZ`](https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/deltaZ)
+
+
+  It also includes the inherited [`MouseEvent`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) properties:
+
+  * [`altKey`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/altKey)
+  * [`button`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button)
+  * [`buttons`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons)
+  * [`ctrlKey`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/ctrlKey)
+  * [`clientX`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientX)
+  * [`clientY`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientY)
+  * [`getModifierState(key)`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/getModifierState)
+  * [`metaKey`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/metaKey)
+  * [`movementX`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementX)
+  * [`movementY`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementY)
+  * [`pageX`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageX)
+  * [`pageY`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageY)
+  * [`relatedTarget`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/relatedTarget)
+  * [`screenX`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/screenX)
+  * [`screenY`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/screenY)
+  * [`shiftKey`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/shiftKey)
+
+  It also includes the inherited [`UIEvent`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) properties:
+
+  * [`detail`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail)
+  * [`view`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/view)
+
+---
+
+## Usage {/*usage*/}
+
+### Applying CSS styles {/*applying-css-styles*/}
+
+In React, you specify a CSS class with [`className`.](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) It works like the `class` attribute in HTML:
+
+```js
+<img className="avatar" />
+```
+
+Then you write the CSS rules for it in a separate CSS file:
+
+```css
+/* In your CSS */
+.avatar {
+  border-radius: 50%;
+}
+```
+
+React does not prescribe how you add CSS files. In the simplest case, you'll add a [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) tag to your HTML. If you use a build tool or a framework, consult its documentation to learn how to add a CSS file to your project.
+
+Sometimes, the style values depend on data. Use the `style` attribute to pass some styles dynamically:
+
+```js {3-6}
+<img
+  className="avatar"
+  style={{
+    width: user.imageSize,
+    height: user.imageSize
+  }}
+/>
+```
+
+
+In the above example, `style={{}}` is not a special syntax, but a regular `{}` object inside the `style={ }` [JSX curly braces.](/learn/javascript-in-jsx-with-curly-braces) We recommend to only use the `style` attribute when your styles depend on JavaScript variables.
+
+<Sandpack>
+
+```js App.js
+import Avatar from './Avatar.js';
+
+const user = {
+  name: 'Hedy Lamarr',
+  imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
+  imageSize: 90,
+};
+
+export default function App() {
+  return <Avatar user={user} />;
+}
+```
+
+```js Avatar.js active
+export default function Avatar({ user }) {
+  return (
+    <img
+      src={user.imageUrl}
+      alt={'Photo of ' + user.name}
+      className="avatar"
+      style={{
+        width: user.imageSize,
+        height: user.imageSize
+      }}
+    />
+  );
+}
+```
+
+```css styles.css
+.avatar {
+  border-radius: 50%;
+}
+```
+
+</Sandpack>
+
+<DeepDive>
+
+#### How to apply multiple CSS classes conditionally? {/*how-to-apply-multiple-css-classes-conditionally*/}
+
+To apply CSS classes conditionally, you need to produce the `className` string yourself using JavaScript.
+
+For example, `className={'row ' + (isSelected ? 'selected': '')}` will produce either `className="row"` or `className="row selected"` depending on whether `isSelected` is `true`.
+
+To make this more readable, you can use a tiny helper library like [`classnames`:](https://github.com/JedWatson/classnames)
+
+```js
+import cn from 'classnames';
+
+function Row({ isSelected }) {
+  return (
+    <div className={cn('row', isSelected && 'selected')}>
+      ...
+    </div>
+  );
+}
+```
+
+It is especially convenient if you have multiple conditional classes:
+
+```js
+import cn from 'classnames';
+
+function Row({ isSelected, size }) {
+  return (
+    <div className={cn('row', {
+      selected: isSelected,
+      large: size === 'large',
+      small: size === 'small',
+    })}>
+      ...
+    </div>
+  );
+}
+```
+
+</DeepDive>
+
+---
+
+### Manipulating a DOM node with a ref {/*manipulating-a-dom-node-with-a-ref*/}
+
+Sometimes, you'll need to get the browser DOM node associated with a tag in JSX. For example, if you want to focus an `<input>` when a button is clicked, you need to call [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) on the browser `<input>` DOM node.
+
+To obtain the browser DOM node for a tag, [declare a ref](/reference/react/useRef) and pass it as the `ref` attribute to that tag:
+
+```js {7}
+import { useRef } from 'react';
+
+export default function Form() {
+  const inputRef = useRef(null);
+  // ...
+  return (
+    <input ref={inputRef} />
+    // ...
+```
+
+React will put the DOM node into `inputRef.current` after it's been rendered to the screen.
+
+<Sandpack>
+
+```js
+import { useRef } from 'react';
+
+export default function Form() {
+  const inputRef = useRef(null);
+
+  function handleClick() {
+    inputRef.current.focus();
+  }
+
+  return (
+    <>
+      <input ref={inputRef} />
+      <button onClick={handleClick}>
+        Focus the input
+      </button>
+    </>
+  );
+}
+```
+
+</Sandpack>
+
+Read more about [manipulating DOM with refs](/learn/manipulating-the-dom-with-refs) and [check out more examples.](/reference/react/useRef#examples-dom)
+
+For more advanced use cases, the `ref` attribute also accepts a [callback function.](#ref-callback)
+
+---
+
+### Dangerously setting the inner HTML {/*dangerously-setting-the-inner-html*/}
+
+You can pass a raw HTML string to an element like so:
+
+```js
+const markup = { __html: '<p>some raw html</p>' };
+return <div dangerouslySetInnerHTML={markup} />;
+```
+
+**This is dangerous. As with the underlying DOM [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) property, you must exercise extreme caution! Unless the markup is coming from a completely trusted source, it is trivial to introduce an [XSS](https://en.wikipedia.org/wiki/Cross-site_scripting) vulnerability this way.**
+
+For example, if you use a Markdown library that converts Markdown to HTML, you trust that its parser doesn't contain bugs, and the user only sees their own input, you can display the resulting HTML like this:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+import MarkdownPreview from './MarkdownPreview.js';
+
+export default function MarkdownEditor() {
+  const [postContent, setPostContent] = useState('_Hello,_ **Markdown**!');
+  return (
+    <>
+      <label>
+        Enter some markdown:
+        <textarea
+          value={postContent}
+          onChange={e => setPostContent(e.target.value)}
+        />
+      </label>
+      <hr />
+      <MarkdownPreview markdown={postContent} />
+    </>
+  );
+}
+```
+
+```js MarkdownPreview.js active
+import { Remarkable } from 'remarkable';
+
+const md = new Remarkable();
+
+function renderMarkdownToHTML(markdown) {
+  // This is ONLY safe because the output HTML
+  // is shown to the same user, and because you
+  // trust this Markdown parser to not have bugs.
+  const renderedHTML = md.render(markdown);
+  return {__html: renderedHTML};
+}
+
+export default function MarkdownPreview({ markdown }) {
+  const markup = renderMarkdownToHTML(markdown);
+  return <div dangerouslySetInnerHTML={markup} />;
+}
+```
+
+```json package.json
+{
+  "dependencies": {
+    "react": "latest",
+    "react-dom": "latest",
+    "react-scripts": "latest",
+    "remarkable": "2.0.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+```css
+textarea { display: block; margin-top: 5px; margin-bottom: 10px; }
+```
+
+</Sandpack>
+
+To see why rendering arbitrary HTML is dangerous, replace the code above with this:
+
+```js {1-4,7,8}
+const post = {
+  // Imagine this content is stored in the database.
+  content: `<img src="" onerror='alert("you were hacked")'>`
+};
+
+export default function MarkdownPreview() {
+  // 🔴 SECURITY HOLE: passing untrusted input to dangerouslySetInnerHTML
+  const markup = { __html: post.content };
+  return <div dangerouslySetInnerHTML={markup} />;
+}
+```
+
+The code embedded in the HTML will run. A hacker could use this security hole to steal user information or to perform actions on their behalf. **Only use `dangerouslySetInnerHTML` with trusted and sanitized data.**
+
+---
+
+### Handling mouse events {/*handling-mouse-events*/}
+
+This example shows some common [mouse events](#mouseevent-handler) and when they fire.
+
+<Sandpack>
+
+```js
+export default function MouseExample() {
+  return (
+    <div
+      onMouseEnter={e => console.log('onMouseEnter (parent)')}
+      onMouseLeave={e => console.log('onMouseLeave (parent)')}
+    >
+      <button
+        onClick={e => console.log('onClick (first button)')}
+        onMouseDown={e => console.log('onMouseDown (first button)')}
+        onMouseEnter={e => console.log('onMouseEnter (first button)')}
+        onMouseLeave={e => console.log('onMouseLeave (first button)')}
+        onMouseOver={e => console.log('onMouseOver (first button)')}
+        onMouseUp={e => console.log('onMouseUp (first button)')}
+      >
+        First button
+      </button>
+      <button
+        onClick={e => console.log('onClick (second button)')}
+        onMouseDown={e => console.log('onMouseDown (second button)')}
+        onMouseEnter={e => console.log('onMouseEnter (second button)')}
+        onMouseLeave={e => console.log('onMouseLeave (second button)')}
+        onMouseOver={e => console.log('onMouseOver (second button)')}
+        onMouseUp={e => console.log('onMouseUp (second button)')}
+      >
+        Second button
+      </button>
+    </div>
+  );
+}
+```
+
+```css
+label { display: block; }
+input { margin-left: 10px; }
+```
+
+</Sandpack>
+
+---
+
+### Handling pointer events {/*handling-pointer-events*/}
+
+This example shows some common [pointer events](#pointerevent-handler) and when they fire.
+
+<Sandpack>
+
+```js
+export default function PointerExample() {
+  return (
+    <div
+      onPointerEnter={e => console.log('onPointerEnter (parent)')}
+      onPointerLeave={e => console.log('onPointerLeave (parent)')}
+      style={{ padding: 20, backgroundColor: '#ddd' }}
+    >
+      <div
+        onPointerDown={e => console.log('onPointerDown (first child)')}
+        onPointerEnter={e => console.log('onPointerEnter (first child)')}
+        onPointerLeave={e => console.log('onPointerLeave (first child)')}
+        onPointerMove={e => console.log('onPointerMove (first child)')}
+        onPointerUp={e => console.log('onPointerUp (first child)')}
+        style={{ padding: 20, backgroundColor: 'lightyellow' }}
+      >
+        First child
+      </div>
+      <div
+        onPointerDown={e => console.log('onPointerDown (second child)')}
+        onPointerEnter={e => console.log('onPointerEnter (second child)')}
+        onPointerLeave={e => console.log('onPointerLeave (second child)')}
+        onPointerMove={e => console.log('onPointerMove (second child)')}
+        onPointerUp={e => console.log('onPointerUp (second child)')}
+        style={{ padding: 20, backgroundColor: 'lightblue' }}
+      >
+        Second child
+      </div>
+    </div>
+  );
+}
+```
+
+```css
+label { display: block; }
+input { margin-left: 10px; }
+```
+
+</Sandpack>
+
+---
+
+### Handling focus events {/*handling-focus-events*/}
+
+In React, [focus events](#focusevent-handler) bubble. You can use the `currentTarget` and `relatedTarget` to differentiate if the focusing or blurring events originated from outside of the parent element. The example shows how to detect focusing a child, focusing the parent element, and how to detect focus entering or leaving the whole subtree.
+
+<Sandpack>
+
+```js
+export default function FocusExample() {
+  return (
+    <div
+      tabIndex={1}
+      onFocus={(e) => {
+        if (e.currentTarget === e.target) {
+          console.log('focused parent');
+        } else {
+          console.log('focused child', e.target.name);
+        }
+        if (!e.currentTarget.contains(e.relatedTarget)) {
+          // Not triggered when swapping focus between children
+          console.log('focus entered parent');
+        }
+      }}
+      onBlur={(e) => {
+        if (e.currentTarget === e.target) {
+          console.log('unfocused parent');
+        } else {
+          console.log('unfocused child', e.target.name);
+        }
+        if (!e.currentTarget.contains(e.relatedTarget)) {
+          // Not triggered when swapping focus between children
+          console.log('focus left parent');
+        }
+      }}
+    >
+      <label>
+        First name:
+        <input name="firstName" />
+      </label>
+      <label>
+        Last name:
+        <input name="lastName" />
+      </label>
+    </div>
+  );
+}
+```
+
+```css
+label { display: block; }
+input { margin-left: 10px; }
+```
+
+</Sandpack>
+
+---
+
+### Handling keyboard events {/*handling-keyboard-events*/}
+
+This example shows some common [keyboard events](#keyboardevent-handler) and when they fire.
+
+<Sandpack>
+
+```js
+export default function KeyboardExample() {
+  return (
+    <label>
+      First name:
+      <input
+        name="firstName"
+        onKeyDown={e => console.log('onKeyDown:', e.key, e.code)}
+        onKeyUp={e => console.log('onKeyUp:', e.key, e.code)}
+      />
+    </label>
+  );
+}
+```
+
+```css
+label { display: block; }
+input { margin-left: 10px; }
+```
+
+</Sandpack>
diff --git a/beta/src/content/reference/react-dom/components/index.md b/beta/src/content/reference/react-dom/components/index.md
new file mode 100644
index 000000000..877ff97fc
--- /dev/null
+++ b/beta/src/content/reference/react-dom/components/index.md
@@ -0,0 +1,261 @@
+---
+title: "React DOM Components"
+---
+
+<Intro>
+
+React supports all of the browser built-in [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) and [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG/Element) components.
+
+</Intro>
+
+---
+
+## Common components {/*common-components*/}
+
+All of the built-in browser components support some props and events.
+
+* [Common components (e.g. `<div>`)](/reference/react-dom/components/common)
+
+This includes React-specific props like `ref` and `dangerouslySetInnerHTML`.
+
+---
+
+## Form components {/*form-components*/}
+
+These built-in browser components accept user input:
+
+* [`<input>`](/reference/react-dom/components/input)
+* [`<select>`](/reference/react-dom/components/select)
+* [`<textarea>`](/reference/react-dom/components/textarea)
+
+They are special in React because passing the `value` prop to them makes them *[controlled.](/reference/react-dom/components/input#controlling-an-input-with-a-state-variable)*
+
+---
+
+## All HTML components {/*all-html-components*/}
+
+React supports all built-in browser HTML components. This includes:
+
+* [`<aside>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside)
+* [`<audio>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio)
+* [`<b>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b)
+* [`<base>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base)
+* [`<bdi>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/bdi)
+* [`<bdo>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/bdo)
+* [`<blockquote>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote)
+* [`<body>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body)
+* [`<br>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br)
+* [`<button>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button)
+* [`<canvas>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas)
+* [`<caption>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption)
+* [`<cite>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite)
+* [`<code>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code)
+* [`<col>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col)
+* [`<colgroup>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/colgroup)
+* [`<data>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/data)
+* [`<datalist>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist)
+* [`<dd>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dd)
+* [`<del>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del)
+* [`<details>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details)
+* [`<dfn>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dfn)
+* [`<dialog>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog)
+* [`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div)
+* [`<dl>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl)
+* [`<dt>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dt)
+* [`<em>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em)
+* [`<embed>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed)
+* [`<fieldset>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset)
+* [`<figcaption>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption)
+* [`<figure>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure)
+* [`<footer>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer)
+* [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form)
+* [`<h1>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h1)
+* [`<head>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head)
+* [`<header>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header)
+* [`<hgroup>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hgroup)
+* [`<hr>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr)
+* [`<html>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html)
+* [`<i>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i)
+* [`<iframe>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe)
+* [`<img>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img)
+* [`<input>`](/reference/react-dom/components/input)
+* [`<ins>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins)
+* [`<kbd>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd)
+* [`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)
+* [`<legend>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/legend)
+* [`<li>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li)
+* [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)
+* [`<main>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main)
+* [`<map>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map)
+* [`<mark>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark)
+* [`<menu>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu)
+* [`<meta>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta)
+* [`<meter>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter)
+* [`<nav>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav)
+* [`<noscript>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript)
+* [`<object>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object)
+* [`<ol>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol)
+* [`<optgroup>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup)
+* [`<option>`](/reference/react-dom/components/option)
+* [`<output>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output)
+* [`<p>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p)
+* [`<picture>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture)
+* [`<pre>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre)
+* [`<progress>`](/reference/react-dom/components/progress)
+* [`<q>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q)
+* [`<rp>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rp)
+* [`<rt>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rt)
+* [`<ruby>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ruby)
+* [`<s>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/s)
+* [`<samp>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/samp)
+* [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)
+* [`<section>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section)
+* [`<select>`](/reference/react-dom/components/select)
+* [`<slot>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot)
+* [`<small>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small)
+* [`<source>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source)
+* [`<span>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span)
+* [`<strong>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong)
+* [`<style>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style)
+* [`<sub>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sub)
+* [`<summary>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary)
+* [`<sup>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup)
+* [`<table>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table)
+* [`<tbody>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody)
+* [`<td>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td)
+* [`<template>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)
+* [`<textarea>`](/reference/react-dom/components/textarea)
+* [`<tfoot>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot)
+* [`<th>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th)
+* [`<thead>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead)
+* [`<time>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time)
+* [`<title>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title)
+* [`<tr>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr)
+* [`<track>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track)
+* [`<u>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/u)
+* [`<ul>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul)
+* [`<var>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/var)
+* [`<video>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video)
+* [`<wbr>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr)
+
+<Note>
+
+Similar to the [DOM standard,](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) React uses a `camelCase` convention for prop names. For example, you'll write `tabIndex` instead of `tabindex`. You can convert existing HTML to JSX with an [online converter.](https://transform.tools/html-to-jsx)
+
+</Note>
+
+---
+
+### Custom HTML elements {/*custom-html-elements*/}
+
+If you render a tag with a dash, like `<my-element>`, React will assume you want to render a [custom HTML element.](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) In React, rendering custom elements works differently from rendering built-in browser tags:
+
+- All custom element props are serialized to strings and are always set using attributes.
+- Custom elements accept `class` rather than `className`, and `for` rather than `htmlFor`.
+
+If you render a built-in browser HTML element with an [`is`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/is) attribute, it will also be treated as a custom element.
+
+<Note>
+
+[A future version of React will include more comprehensive support for custom elements.](https://github.com/facebook/react/issues/11347#issuecomment-1122275286)
+
+You can try it by upgrading React packages to the most recent experimental version:
+
+- `react@experimental`
+- `react-dom@experimental`
+
+Experimental versions of React may contain bugs. Don't use them in production.
+
+</Note>
+---
+
+## All SVG components {/*all-svg-components*/}
+
+React supports all built-in browser SVG components. This includes:
+
+* [`<a>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/a)
+* [`<animate>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate)
+* [`<animateMotion>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateMotion)
+* [`<animateTransform>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateTransform)
+* [`<circle>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle)
+* [`<clipPath>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath)
+* [`<defs>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs)
+* [`<desc>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/desc)
+* [`<discard>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/discard)
+* [`<ellipse>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/ellipse)
+* [`<feBlend>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feBlend)
+* [`<feColorMatrix>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feColorMatrix)
+* [`<feComponentTransfer>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feComponentTransfer)
+* [`<feComposite>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feComposite)
+* [`<feConvolveMatrix>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feConvolveMatrix)
+* [`<feDiffuseLighting>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feDiffuseLighting)
+* [`<feDisplacementMap>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feDisplacementMap)
+* [`<feDistantLight>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feDistantLight)
+* [`<feDropShadow>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feDropShadow)
+* [`<feFlood>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feFlood)
+* [`<feFuncA>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feFuncA)
+* [`<feFuncB>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feFuncB)
+* [`<feFuncG>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feFuncG)
+* [`<feFuncR>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feFuncR)
+* [`<feGaussianBlur>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feGaussianBlur)
+* [`<feImage>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feImage)
+* [`<feMerge>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feMerge)
+* [`<feMergeNode>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feMergeNode)
+* [`<feMorphology>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feMorphology)
+* [`<feOffset>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feOffset)
+* [`<fePointLight>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/fePointLight)
+* [`<feSpecularLighting>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feSpecularLighting)
+* [`<feSpotLight>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feSpotLight)
+* [`<feTile>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feTile)
+* [`<feTurbulence>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feTurbulence)
+* [`<filter>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter)
+* [`<foreignObject>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject)
+* [`<g>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g)
+* `<hatch>`
+* `<hatchpath>`
+* [`<image>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image)
+* [`<line>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/line)
+* [`<linearGradient>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient)
+* [`<marker>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/marker)
+* [`<mask>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/mask)
+* [`<metadata>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/metadata)
+* [`<mpath>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/mpath)
+* [`<path>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path)
+* [`<pattern>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/pattern)
+* [`<polygon>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polygon)
+* [`<polyline>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polyline)
+* [`<radialGradient>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/radialGradient)
+* [`<rect>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect)
+* [`<script>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/script)
+* [`<set>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/set)
+* [`<stop>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/stop)
+* [`<style>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/style)
+* [`<svg>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg)
+* [`<switch>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/switch)
+* [`<symbol>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol)
+* [`<text>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text)
+* [`<textPath>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath)
+* [`<title>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title)
+* [`<tspan>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/tspan)
+* [`<use>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use)
+* [`<view>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/view)
+
+<Note>
+
+Similar to the [DOM standard,](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) React uses a `camelCase` convention for prop names. For example, you'll write `tabIndex` instead of `tabindex`. You can convert existing SVG to JSX with an [online converter.](https://transform.tools/)
+
+Namespaced attributes also have to be written without the colon:
+
+* `xlink:actuate` becomes `xlinkActuate`.
+* `xlink:arcrole` becomes `xlinkArcrole`.
+* `xlink:href` becomes `xlinkHref`.
+* `xlink:role` becomes `xlinkRole`.
+* `xlink:show` becomes `xlinkShow`.
+* `xlink:title` becomes `xlinkTitle`.
+* `xlink:type` becomes `xlinkType`.
+* `xml:base` becomes `xmlBase`.
+* `xml:lang` becomes `xmlLang`.
+* `xml:space` becomes `xmlSpace`.
+* `xmlns:xlink` becomes `xmlnsXlink`.
+
+</Note>
diff --git a/beta/src/content/reference/react-dom/components/input.md b/beta/src/content/reference/react-dom/components/input.md
new file mode 100644
index 000000000..497713c07
--- /dev/null
+++ b/beta/src/content/reference/react-dom/components/input.md
@@ -0,0 +1,595 @@
+---
+title: "<input>"
+---
+
+<Intro>
+
+The [built-in browser `<input>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) lets you render different kinds of form inputs.
+
+```js
+<input />
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `<input>` {/*input*/}
+
+To display an input, render the [built-in browser `<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) component.
+
+```js
+<input name="myInput" />
+```
+
+[See more examples below.](#usage)
+
+#### Props {/*props*/}
+
+`<input>` supports all [common element props.](/reference/react-dom/components/common#props)
+
+You can [make an input controlled](#controlling-an-input-with-a-state-variable) by passing one of these props:
+
+* [`checked`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#checked): A boolean. For a checkbox input or a radio button, controls whether it is selected.
+* [`value`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#value): A string. For a text input, controls its text. (For a radio button, specifies its form data.)
+
+When you pass either of them, you must also pass an `onChange` handler that updates the passed value.
+
+These `<input>` props are only relevant for uncontrolled inputs:
+
+* [`defaultChecked`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#defaultChecked): A boolean. Specifies [the initial value](#providing-an-initial-value-for-an-input) for `type="checkbox"` and `type="radio"` inputs.
+* [`defaultValue`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#defaultValue): A string. Specifies [the initial value](#providing-an-initial-value-for-an-input) for a text input.
+
+These `<input>` props are relevant both for uncontrolled and controlled inputs:
+
+* [`accept`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#accept): A string. Specifies which filetypes are accepted by a `type="file"` input.
+* [`alt`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#alt): A string. Specifies the alternative image text for a `type="image"` input.
+* [`capture`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#capture): A string. Specifies the media (microphone, video, or camera) captured by a `type="file"` input.
+* [`autoComplete`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#autocomplete): A string. Specifies one of the possible [autocomplete behaviors.](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values)
+* [`autoFocus`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#autofocus): A boolean. If `true`, React will focus the element on mount.
+* [`dirname`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#dirname): A string. Specifies the form field name for the element's directionality.
+* [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled): A boolean. If `true`, the input will not be interactive and will appear dimmed.
+* `children`: `<input>` does not accept children.
+* [`form`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#form): A string. Specifies the `id` of the `<form>` this input belongs to. If omitted, it's the closest parent form.
+* [`formAction`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formaction): A string. Overrides the parent `<form action>` for `type="submit"` and `type="image"`.
+* [`formEnctype`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formenctype): A string. Overrides the parent `<form enctype>` for `type="submit"` and `type="image"`.
+* [`formMethod`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formmethod): A string. Overrides the parent `<form method>` for `type="submit"` and `type="image"`.
+* [`formNoValidate`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formnovalidate): A string. Overrides the parent `<form noValidate>` for `type="submit"` and `type="image"`.
+* [`formTarget`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formtarget): A string. Overrides the parent `<form target>` for `type="submit"` and `type="image"`.
+* [`height`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#height): A string. Specifies the image height for `type="image"`.
+* [`list`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#list): A string. Specifies the `id` of the `<datalist>` with the autocomplete options.
+* [`max`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max): A number. Specifies the maximum value of numerical and datetime inputs.
+* [`maxLength`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength): A number. Specifies the maximum length of text and other inputs.
+* [`min`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min): A number. Specifies the minimum value of numerical and datetime inputs.
+* [`minLength`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength): A number. Specifies the minimum length of text and other inputs.
+* [`multiple`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#multiple): A boolean. Specifies whether multiple values are allowed for `<type="file"` and `type="email"`.
+* [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name): A string. Specifies the name for this input that's [submitted with the form.](#reading-the-input-values-when-submitting-a-form)
+* `onChange`: An [`Event` handler](/reference/react-dom/components/common#event-handler) function. Required for [controlled inputs.](#controlling-an-input-with-a-state-variable) Fires immediately when the input's value is changed by the user (for example, it fires on every keystroke). Behaves like the browser [`input` event.](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)
+* `onChangeCapture`: A version of `onChange` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onInput`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event): An [`Event` handler](/reference/react-dom/components/common#event-handler) function. Fires immediately when the value is changed by the user. For historical reasons, in React it is idiomatic to use `onChange` instead which works similarly.
+* `onInputCapture`: A version of `onInput` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onInvalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event): An [`Event` handler](/reference/react-dom/components/common#event-handler) function. Fires if an input fails validation on form submit. Unlike the built-in `invalid` event, the React `onInvalid` event bubbles.
+* `onInvalidCapture`: A version of `onInvalid` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onSelect`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select_event): An [`Event` handler](/reference/react-dom/components/common#event-handler) function. Fires after the selection inside the `<input>` changes. React extends the `onSelect` event to also fire for empty selection and on edits (which may affect the selection).
+* `onSelectCapture`: A version of `onSelect` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`pattern`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#pattern): A string. Specifies the pattern that the `value` must match.
+* [`placeholder`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder): A string. Displayed in a dimmed color when the input value is empty.
+* [`readOnly`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly): A boolean. If `true`, the input is not editable by the user.
+* [`required`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#required): A boolean. If `true`, the value must be provided for the form to submit.
+* [`size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#size): A number. Similar to setting width, but the unit depends on the control.
+* [`src`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#src): A string. Specifies the image source for a `type="image"` input.
+* [`step`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step): A positive number or an `'any'` string. Specifies the distance between valid values.
+* [`type`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#type): A string. One of the [input types.](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types)
+* [`width`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#width):  A string. Specifies the image width for a `type="image"` input.
+
+#### Caveats {/*caveats*/}
+
+- Checkboxes need `checked` (or `defaultChecked`), not `value` (or `defaultValue`).
+- If a text input receives a string `value` prop, it will be [treated as controlled.](#controlling-an-input-with-a-state-variable)
+- If a checkbox or a radio button receives a boolean `checked` prop, it will be [treated as controlled.](#controlling-an-input-with-a-state-variable)
+- An input can't be both controlled and uncontrolled at the same time.
+- An input cannot switch between being controlled or uncontrolled over its lifetime.
+- Every controlled input needs an `onChange` event handler that synchronously updates its backing value.
+
+---
+
+## Usage {/*usage*/}
+
+### Displaying inputs of different types {/*displaying-inputs-of-different-types*/}
+
+To display an input, render an `<input>` component. By default, it will be a text input. You can pass `type="checkbox"` for a checkbox, `type="radio"` for a radio button, [or one of the other input types.](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types)
+
+<Sandpack>
+
+```js
+export default function MyForm() {
+  return (
+    <>
+      <label>
+        Text input: <input name="myInput" />
+      </label>
+      <hr />
+      <label>
+        Checkbox: <input type="checkbox" name="myCheckbox" />
+      </label>
+      <hr />
+      <p>
+        Radio buttons:
+        <label>
+          <input type="radio" name="myRadio" value="option1" />
+          Option 1
+        </label>
+        <label>
+          <input type="radio" name="myRadio" value="option2" />
+          Option 2
+        </label>
+        <label>
+          <input type="radio" name="myRadio" value="option3" />
+          Option 3
+        </label>
+      </p>
+    </>
+  );
+}
+```
+
+```css
+label { display: block; }
+input { margin: 5px; }
+```
+
+</Sandpack>
+
+---
+
+### Providing a label for an input {/*providing-a-label-for-an-input*/}
+
+Typically, you will place every `<input>` inside a [`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) tag. This tells the browser that this label is associated with that input. When the user clicks the label, the browser will automatically focus the input. It's also essential for accessibility: a screen reader will announce the label caption when the user focuses the associated input.
+
+If you can't nest `<input>` into a `<label>`, associate them by passing the same ID to `<input id>` and [`<label htmlFor>`.](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor) To avoid conflicts between multiple instances of one component, generate such an ID with [`useId`.](/reference/react/useId)
+
+<Sandpack>
+
+```js
+import { useId } from 'react';
+
+export default function Form() {
+  const ageInputId = useId();
+  return (
+    <>
+      <label>
+        Your first name:
+        <input name="firstName" />
+      </label>
+      <hr />
+      <label htmlFor={ageInputId}>Your age:</label>
+      <input id={ageInputId} name="age" type="number" />
+    </>
+  );
+}
+```
+
+```css
+input { margin: 5px; }
+```
+
+</Sandpack>
+
+---
+
+### Providing an initial value for an input {/*providing-an-initial-value-for-an-input*/}
+
+You can optionally specify the initial value for any input. Pass it as the `defaultValue` string for text inputs. Checkboxes and radio buttons should specify the initial value with the `defaultChecked` boolean instead.
+
+<Sandpack>
+
+```js
+export default function MyForm() {
+  return (
+    <>
+      <label>
+        Text input: <input name="myInput" defaultValue="Some initial value" />
+      </label>
+      <hr />
+      <label>
+        Checkbox: <input type="checkbox" name="myCheckbox" defaultChecked={true} />
+      </label>
+      <hr />
+      <p>
+        Radio buttons:
+        <label>
+          <input type="radio" name="myRadio" value="option1" />
+          Option 1
+        </label>
+        <label>
+          <input
+            type="radio"
+            name="myRadio"
+            value="option2"
+            defaultChecked={true} 
+          />
+          Option 2
+        </label>
+        <label>
+          <input type="radio" name="myRadio" value="option3" />
+          Option 3
+        </label>
+      </p>
+    </>
+  );
+}
+```
+
+```css
+label { display: block; }
+input { margin: 5px; }
+```
+
+</Sandpack>
+
+---
+
+### Reading the input values when submitting a form {/*reading-the-input-values-when-submitting-a-form*/}
+
+Add a [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) around your inputs with a [`<button type="submit">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) inside. It will call your `<form onSubmit>` event handler. By default, the browser will send the form data to the current URL and refresh the page. You can override that behavior by calling `e.preventDefault()`. To read the form data, use [`new FormData(e.target)`](https://developer.mozilla.org/en-US/docs/Web/API/FormData).
+<Sandpack>
+
+```js
+export default function MyForm() {
+  function handleSubmit(e) {
+    // Prevent the browser from reloading the page
+    e.preventDefault();
+
+    // Read the form data
+    const form = e.target;
+    const formData = new FormData(form);
+
+    // You can pass formData as a fetch body directly:
+    fetch('/some-api', { method: form.method, body: formData });
+
+    // Or you can work with it as a plain object:
+    const formJson = Object.fromEntries(formData.entries());
+    console.log(formJson);
+  }
+
+  return (
+    <form method="post" onSubmit={handleSubmit}>
+      <label>
+        Text input: <input name="myInput" defaultValue="Some initial value" />
+      </label>
+      <hr />
+      <label>
+        Checkbox: <input type="checkbox" name="myCheckbox" defaultChecked={true} />
+      </label>
+      <hr />
+      <p>
+        Radio buttons:
+        <label><input type="radio" name="myRadio" value="option1" /> Option 1</label>
+        <label><input type="radio" name="myRadio" value="option2" defaultChecked={true} /> Option 2</label>
+        <label><input type="radio" name="myRadio" value="option3" /> Option 3</label>
+      </p>
+      <hr />
+      <button type="reset">Reset form</button>
+      <button type="submit">Submit form</button>
+    </form>
+  );
+}
+```
+
+```css
+label { display: block; }
+input { margin: 5px; }
+```
+
+</Sandpack>
+
+<Note>
+
+Give a `name` to every `<input>`, for example `<input name="firstName" defaultValue="Taylor" />`. The `name` you specified will be used as a key in the form data, for example `{ firstName: "Taylor" }`.
+
+</Note>
+
+<Pitfall>
+
+By default, *any* `<button>` inside a `<form>` will submit it. This can be surprising! If you have your own custom `Button` React component, consider returning [`<button type="button">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button) instead of `<button>`. Then, to be explicit, use `<button type="submit">` for buttons that *are* supposed to submit the form.
+
+</Pitfall>
+
+---
+
+### Controlling an input with a state variable {/*controlling-an-input-with-a-state-variable*/}
+
+An input like `<input />` is *uncontrolled.* Even if you [pass an initial value](#providing-an-initial-value-for-an-input) like `<input defaultValue="Initial text" />`, your JSX only specifies the initial value. It does not control what the value should be right now.
+
+**To render a _controlled_ input, pass the `value` prop to it (or `checked` for checkboxes and radios).** React will force the input to always have the `value` you passed. Typically, you will control an input by declaring a [state variable:](/reference/react/useState)
+
+```js {2,6,7}
+function Form() {
+  const [firstName, setFirstName] = useState(''); // Declare a state variable...
+  // ...
+  return (
+    <input
+      value={firstName} // ...force the input's value to match the state variable...
+      onChange={e => setFirstName(e.target.value)} // ... and update the state variable on any edits!
+    />
+  );
+}
+```
+
+A controlled input makes sense if you needed state anyway--for example, to re-render your UI on every edit:
+
+```js {2,9}
+function Form() {
+  const [firstName, setFirstName] = useState('');
+  return (
+    <>
+      <label>
+        First name:
+        <input value={firstName} onChange={e => setFirstName(e.target.value)} />
+      </label>
+      {firstName !== '' && <p>Your name is {firstName}.</p>}
+      ...
+```
+
+It's also useful if you want to offer multiple ways to adjust the input state (for example, by clicking a button):
+
+```js {3-4,10-11,14}
+function Form() {
+  // ...
+  const [age, setAge] = useState('');
+  const ageAsNumber = Number(age);
+  return (
+    <>
+      <label>
+        Age:
+        <input
+          value={age}
+          onChange={e => setAge(e.target.value)}
+          type="number"
+        />
+        <button onClick={() => setAge(ageAsNumber + 10)}>
+          Add 10 years
+        </button>
+```
+
+The `value` you pass to controlled components should not be `undefined` or `null`. If you need the initial value to be empty (such as with the `firstName` field below), initialize your state variable to an empty string (`''`).
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function Form() {
+  const [firstName, setFirstName] = useState('');
+  const [age, setAge] = useState('20');
+  const ageAsNumber = Number(age);
+  return (
+    <>
+      <label>
+        First name:
+        <input
+          value={firstName}
+          onChange={e => setFirstName(e.target.value)}
+        />
+      </label>
+      <label>
+        Age:
+        <input
+          value={age}
+          onChange={e => setAge(e.target.value)}
+          type="number"
+        />
+        <button onClick={() => setAge(ageAsNumber + 10)}>
+          Add 10 years
+        </button>
+      </label>
+      {firstName !== '' &&
+        <p>Your name is {firstName}.</p>
+      }
+      {ageAsNumber > 0 &&
+        <p>Your age is {ageAsNumber}.</p>
+      }
+    </>
+  );
+}
+```
+
+```css
+label { display: block; }
+input { margin: 5px; }
+p { font-weight: bold; }
+```
+
+</Sandpack>
+
+<Pitfall>
+
+**If you pass `value` without `onChange`, it will be impossible to type into the input.** When you control an input by passing some `value` to it, you *force* it to always have the value you passed. So if you pass a state variable as a `value` but forget to update that state variable synchronously during the `onChange` event handler, React will revert the input after every keystroke back to the `value` that you specified.
+
+</Pitfall>
+
+---
+
+### Optimizing re-rendering on every keystroke {/*optimizing-re-rendering-on-every-keystroke*/}
+
+When you use a controlled input, you set the state on every keystroke. If the component containing your state re-renders a large tree, this can get slow. There's a few ways you can optimize re-rendering performance.
+
+For example, suppose you start with a form that re-renders all page content on every keystroke:
+
+```js {5-8}
+function App() {
+  const [firstName, setFirstName] = useState('');
+  return (
+    <>
+      <form>
+        <input value={firstName} onChange={e => setFirstName(e.target.value)} />
+      </form>
+      <PageContent />
+    </>
+  );
+}
+```
+
+Since `<PageContent />` doesn't rely on the input state, you can move the input state into its own component:
+
+```js {4,10-17}
+function App() {
+  return (
+    <>
+      <SignupForm />
+      <PageContent />
+    </>
+  );
+}
+
+function SignupForm() {
+  const [firstName, setFirstName] = useState('');
+  return (
+    <form>
+      <input value={firstName} onChange={e => setFirstName(e.target.value)} />
+    </form>
+  );
+}
+```
+
+This significantly improves performance because now only `SignupForm` re-renders on every keystroke.
+
+If there is no way to avoid re-rendering (for example, if `PageContent` depends on the search input's value), [`useDeferredValue`](/reference/react/useDeferredValue#deferring-re-rendering-for-a-part-of-the-ui) lets you keep the controlled input responsive even in the middle of a large re-render.
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+
+### My text input doesn't update when I type into it {/*my-text-input-doesnt-update-when-i-type-into-it*/}
+
+If you render an input with `value` but no `onChange`, you will see an error in the console:
+
+```js
+// 🔴 Bug: controlled text input with no onChange handler
+<input value={something} />
+```
+
+<ConsoleBlock level="error">
+
+You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.
+
+</ConsoleBlock>
+
+As the error message suggests, if you only wanted to [specify the *initial* value,](#providing-an-initial-value-for-an-input) pass `defaultValue` instead:
+
+```js
+// ✅ Good: uncontrolled input with an initial value
+<input defaultValue={something} />
+```
+
+If you want [to control this input with a state variable,](#controlling-an-input-with-a-state-variable) specify an `onChange` handler:
+
+```js
+// ✅ Good: controlled input with onChange
+<input value={something} onChange={e => setSomething(e.target.value)} />
+```
+
+If the value is intentionally read-only, add a `readOnly` prop to suppress the error:
+
+```js
+// ✅ Good: readonly controlled input without on change
+<input value={something} readOnly={true} />
+```
+
+---
+
+### My checkbox doesn't update when I click on it {/*my-checkbox-doesnt-update-when-i-click-on-it*/}
+
+If you render a checkbox with `checked` but no `onChange`, you will see an error in the console:
+
+```js
+// 🔴 Bug: controlled checkbox with no onChange handler
+<input type="checkbox" checked={something} />
+```
+
+<ConsoleBlock level="error">
+
+You provided a `checked` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultChecked`. Otherwise, set either `onChange` or `readOnly`.
+
+</ConsoleBlock>
+
+As the error message suggests, if you only wanted to [specify the *initial* value,](#providing-an-initial-value-for-an-input) pass `defaultChecked` instead:
+
+```js
+// ✅ Good: uncontrolled checkbox with an initial value
+<input type="checkbox" defaultChecked={something} />
+```
+
+If you want [to control this checkbox with a state variable,](#controlling-an-input-with-a-state-variable) specify an `onChange` handler:
+
+```js
+// ✅ Good: controlled checkbox with onChange
+<input type="checkbox" checked={something} onChange={e => setSomething(e.target.checked)} />
+```
+
+<Pitfall>
+
+You need to read `e.target.checked` rather than `e.target.value` for checkboxes.
+
+</Pitfall>
+
+If the checkbox is intentionally read-only, add a `readOnly` prop to suppress the error:
+
+```js
+// ✅ Good: readonly controlled input without on change
+<input type="checkbox" checked={something} readOnly={true} />
+```
+
+---
+
+### My input caret jumps to the beginning on every keystroke {/*my-input-caret-jumps-to-the-beginning-on-every-keystroke*/}
+
+If you [control an input,](#controlling-an-input-with-a-state-variable) you must update its state variable to the input's value from the DOM during `onChange`.
+
+You can't update it to something other than `e.target.value` (or `e.target.checked` for checkboxes):
+
+```js
+function handleChange(e) {
+  // 🔴 Bug: updating an input to something other than e.target.value
+  setFirstName(e.target.value.toUpperCase());
+}
+```
+
+You also can't update it asynchronously:
+
+```js
+function handleChange(e) {
+  // 🔴 Bug: updating an input asynchronously
+  setTimeout(() => {
+    setFirstName(e.target.value);
+  }, 100);
+}
+```
+
+To fix your code, update it synchronously to `e.target.value`:
+
+```js
+function handleChange(e) {
+  // ✅ Updating a controlled input to e.target.value synchronously
+  setFirstName(e.target.value);
+}
+```
+
+If this doesn't fix the problem, it's possible that the input gets removed and re-added from the DOM on every keystroke. This can happen if you're accidentally [resetting state](/learn/preserving-and-resetting-state) on every re-render. For example, this can happen if the input or one of its parents always receives a different `key` attribute, or if you nest component definitions (which is not allowed in React and causes the "inner" component to always be considered a different tree).
+
+---
+
+### I'm getting an error: "A component is changing an uncontrolled input to be controlled" {/*im-getting-an-error-a-component-is-changing-an-uncontrolled-input-to-be-controlled*/}
+
+
+If you provide a `value` to the component, it must remain a string throughout its lifetime.
+
+You cannot pass `value={undefined}` first and later pass `value="some string"` because React won't know whether you want the component to be uncontrolled or controlled. A controlled component should always receive a string `value`, not `null` or `undefined`.
+
+If your `value` is coming from an API or a state variable, it might be initialized to `null` or `undefined`. In that case, either set it to an empty string (`''`) initially, or pass `value={someValue ?? ''}` to ensure `value` is a string.
+
+Similarly, if you pass `checked` to a checkbox, ensure it's always a boolean.
diff --git a/beta/src/content/reference/react-dom/components/option.md b/beta/src/content/reference/react-dom/components/option.md
new file mode 100644
index 000000000..be1db0d61
--- /dev/null
+++ b/beta/src/content/reference/react-dom/components/option.md
@@ -0,0 +1,83 @@
+---
+title: "<option>"
+---
+
+<Intro>
+
+The [built-in browser `<option>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option) lets you render an option inside a [`<select>`](/reference/react-dom/components/select) box.
+
+```js
+<select>
+  <option value="someOption">Some option</option>
+  <option value="otherOption">Other option</option>
+</select>
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `<option>` {/*option*/}
+
+The [built-in browser `<option>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select) lets you render an option inside a [`<select>`](/reference/react-dom/components/select) box.
+
+```js
+<select>
+  <option value="someOption">Some option</option>
+  <option value="otherOption">Other option</option>
+</select>
+```
+
+[See more examples below.](#usage)
+
+#### Props {/*props*/}
+
+`<option>` supports all [common element props.](/reference/react-dom/components/common#props)
+
+Additionally, `<option>` supports these props:
+
+* [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option#disabled): A boolean. If `true`, the option will not be selectable and will appear dimmed.
+* [`label`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option#label): A string. Specifies the meaning of the option. If not specified, the text inside the option is used.
+* [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option#value): The value to be used [when submitting the parent `<select>` in a form](/reference/react-dom/components/select#reading-the-select-box-value-when-submitting-a-form) if this option is selected.
+
+#### Caveats {/*caveats*/}
+
+* React does not support the `selected` attribute on `<option>`. Instead, pass this option's `value` to the parent [`<select defaultValue>`](/reference/react-dom/components/select#providing-an-initially-selected-option) for an uncontrolled select box, or [`<select value>`](/reference/react-dom/components/select#controlling-a-select-box-with-a-state-variable) for a controlled select box.
+
+---
+
+## Usage {/*usage*/}
+
+### Displaying a select box with options {/*displaying-a-select-box-with-options*/}
+
+Render a `<select>` with a list of `<option>` components inside to display a select box. Give each `<option>` a `value` representing the data to be submitted with the form.
+
+[Read more about displaying a `<select>` with a list of `<option>` components.](/reference/react-dom/components/select)
+
+<Sandpack>
+
+```js
+export default function FruitPicker() {
+  return (
+    <label>
+      Pick a fruit:
+      <select name="selectedFruit">
+        <option value="apple">Apple</option>
+        <option value="banana">Banana</option>
+        <option value="orange">Orange</option>
+      </select>
+    </label>
+  );
+}
+```
+
+```css
+select { margin: 5px; }
+```
+
+</Sandpack>  
+
diff --git a/beta/src/content/reference/react-dom/components/progress.md b/beta/src/content/reference/react-dom/components/progress.md
new file mode 100644
index 000000000..fd6c96a1e
--- /dev/null
+++ b/beta/src/content/reference/react-dom/components/progress.md
@@ -0,0 +1,71 @@
+---
+title: "<progress>"
+---
+
+<Intro>
+
+The [built-in browser `<progress>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress) lets you render a progress indicator.
+
+```js
+<progress value={0.5} />
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `<progress>` {/*progress*/}
+
+To display a progress indicator, render the [built-in browser `<progress>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress) component.
+
+```js
+<progress value={0.5} />
+```
+
+[See more examples below.](#usage)
+
+#### Props {/*props*/}
+
+`<progress>` supports all [common element props.](/reference/react-dom/components/common#props)
+
+Additionally, `<progress>` supports these props:
+
+* [`max`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#attr-max): A number. Specifies the maximum `value`. Defaults to `1`.
+* [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#attr-value): A number between `0` and `max`, or `null` for intermedinate progress. Specifies how much was done.
+
+---
+
+## Usage {/*usage*/}
+
+### Controlling a progress indicator {/*controlling-a-progress-indicator*/}
+
+To display a progress indicator, render a `<progress>` component. You can pass a number `value` between `0` and the `max` value you specify. If you don't pass a `max` value, it will assumed to be `1` by default.
+
+If the operation is not ongoing, pass `value={null}` to put the progress indicator into an indeterminate state.
+
+<Sandpack>
+
+```js
+export default function App() {
+  return (
+    <>
+      <progress value={0} />
+      <progress value={0.5} />
+      <progress value={0.7} />
+      <progress value={75} max={100} />
+      <progress value={1} />
+      <progress value={null} />
+    </>
+  );
+}
+```
+
+```css
+progress { display: block; }
+```
+
+</Sandpack>
diff --git a/beta/src/content/reference/react-dom/components/select.md b/beta/src/content/reference/react-dom/components/select.md
new file mode 100644
index 000000000..3aa9ac0dc
--- /dev/null
+++ b/beta/src/content/reference/react-dom/components/select.md
@@ -0,0 +1,384 @@
+---
+title: "<select>"
+---
+
+<Intro>
+
+The [built-in browser `<select>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select) lets you render a select box with options.
+
+```js
+<select>
+  <option value="someOption">Some option</option>
+  <option value="otherOption">Other option</option>
+</select>
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `<select>` {/*select*/}
+
+To display a select box, render the [built-in browser `<select>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select) component.
+
+```js
+<select>
+  <option value="someOption">Some option</option>
+  <option value="otherOption">Other option</option>
+</select>
+```
+
+[See more examples below.](#usage)
+
+#### Props {/*props*/}
+
+`<select>` supports all [common element props.](/reference/react-dom/components/common#props)
+
+You can [make a select box controlled](#controlling-a-select-box-with-a-state-variable) by passing a `value` prop:
+
+* `value`: A string (or an array of strings for [`multiple={true}`](#enabling-multiple-selection)). Controls which option is selected. Every value string match the `value` of some `<option>` nested inside the `<select>`.
+
+When you pass `value`, you must also pass an `onChange` handler that updates the passed value.
+
+If your `<select>` is uncontrolled, you may pass the `defaultValue` prop instead:
+
+* `defaultValue`: A string (or an array of strings for [`multiple={true}`](#enabling-multiple-selection)). Specifies [the initially selected option.](#providing-an-initially-selected-option)
+
+These `<select>` props are relevant both for uncontrolled and controlled select boxs:
+
+* [`autoComplete`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-autocomplete): A string. Specifies one of the possible [autocomplete behaviors.](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values)
+* [`autoFocus`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-autofocus): A boolean. If `true`, React will focus the element on mount.
+* `children`: `<select>` accepts [`<option>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option), [`<optgroup>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup), and [`<datalist>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup) components as children. You can also pass your own components as long as they eventually render one of the allowed components. If you pass your own components that eventually render `<option>` tags, each `<option>` you render must have a `value`.
+* [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-disabled): A boolean. If `true`, the select box will not be interactive and will appear dimmed.
+* [`form`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-form): A string. Specifies the `id` of the `<form>` this select box belongs to. If omitted, it's the closest parent form.
+* [`multiple`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-multiple): A boolean. If `true`, the browser allows [multiple selection.](#enabling-multiple-selection)
+* [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-name): A string. Specifies the name for this select box that's [submitted with the form.](#reading-the-select-box-value-when-submitting-a-form)
+* `onChange`: An [`Event` handler](/reference/react-dom/components/common#event-handler) function. Required for [controlled select boxes.](#controlling-a-select-box-with-a-state-variable) Fires immediately when the user picks a different option. Behaves like the browser [`input` event.](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)
+* `onChangeCapture`: A version of `onChange` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onInput`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event): An [`Event` handler](/reference/react-dom/components/common#event-handler) function. Fires immediately when the value is changed by the user. For historical reasons, in React it is idiomatic to use `onChange` instead which works similarly.
+* `onInputCapture`: A version of `onInput` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onInvalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event): An [`Event` handler](/reference/react-dom/components/common#event-handler) function. Fires if an input fails validation on form submit. Unlike the built-in `invalid` event, the React `onInvalid` event bubbles.
+* `onInvalidCapture`: A version of `onInvalid` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`required`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-required): A boolean. If `true`, the value must be provided for the form to submit.
+* [`size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-size): A number. For `multiple={true}` selects, specifies the preferred number of initially visible items.
+
+#### Caveats {/*caveats*/}
+
+- Unlike in HTML, passing a `selected` attribute to `<option>` is not supported. Instead, use [`<select defaultValue>`](#providing-an-initially-selected-option) for uncontrolled select boxes and [`<select value>`](#controlling-a-select-box-with-a-state-variable) for controlled select boxes.
+- If a select box receives a `value` prop, it will be [treated as controlled.](#controlling-a-select-box-with-a-state-variable)
+- A select box can't be both controlled and uncontrolled at the same time.
+- A select box cannot switch between being controlled or uncontrolled over its lifetime.
+- Every controlled select box needs an `onChange` event handler that synchronously updates its backing value.
+
+---
+
+## Usage {/*usage*/}
+
+### Displaying a select box with options {/*displaying-a-select-box-with-options*/}
+
+Render a `<select>` with a list of `<option>` components inside to display a select box. Give each `<option>` a `value` representing the data to be submitted with the form.
+
+<Sandpack>
+
+```js
+export default function FruitPicker() {
+  return (
+    <label>
+      Pick a fruit:
+      <select name="selectedFruit">
+        <option value="apple">Apple</option>
+        <option value="banana">Banana</option>
+        <option value="orange">Orange</option>
+      </select>
+    </label>
+  );
+}
+```
+
+```css
+select { margin: 5px; }
+```
+
+</Sandpack>  
+
+---
+
+### Providing a label for a select box {/*providing-a-label-for-a-select-box*/}
+
+Typically, you will place every `<select>` inside a [`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) tag. This tells the browser that this label is associated with that select box. When the user clicks the label, the browser will automatically focus the select box. It's also essential for accessibility: a screen reader will announce the label caption when the user focuses the select box.
+
+If you can't nest `<select>` into a `<label>`, associate them by passing the same ID to `<select id>` and [`<label htmlFor>`.](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor) To avoid conflicts between multiple instances of one component, generate such an ID with [`useId`.](/reference/react/useId)
+
+<Sandpack>
+
+```js
+import { useId } from 'react';
+
+export default function Form() {
+  const vegetableSelectId = useId();
+  return (
+    <>
+      <label>
+        Pick a fruit:
+        <select name="selectedFruit">
+          <option value="apple">Apple</option>
+          <option value="banana">Banana</option>
+          <option value="orange">Orange</option>
+        </select>
+      </label>
+      <hr />
+      <label htmlFor={vegetableSelectId}>
+        Pick a vegetable:
+      </label>
+      <select id={vegetableSelectId} name="selectedVegetable">
+        <option value="cucumber">Cucumber</option>
+        <option value="corn">Corn</option>
+        <option value="tomato">Tomato</option>
+      </select>
+    </>
+  );
+}
+```
+
+```css
+select { margin: 5px; }
+```
+
+</Sandpack>
+
+
+---
+
+### Providing an initially selected option {/*providing-an-initially-selected-option*/}
+
+By default, the browser will select the first `<option>` in the list. To select a different option by default, pass that `<option>`'s `value` as the `defaultValue` to the `<select>` element.
+
+<Sandpack>
+
+```js
+export default function FruitPicker() {
+  return (
+    <label>
+      Pick a fruit:
+      <select name="selectedFruit" defaultValue="orange">
+        <option value="apple">Apple</option>
+        <option value="banana">Banana</option>
+        <option value="orange">Orange</option>
+      </select>
+    </label>
+  );
+}
+```
+
+```css
+select { margin: 5px; }
+```
+
+</Sandpack>  
+
+<Pitfall>
+
+Unlike in HTML, passing a `selected` attribute to an individual `<option>` is not supported.
+
+</Pitfall>
+
+---
+
+### Enabling multiple selection {/*enabling-multiple-selection*/}
+
+Pass `multiple={true}` to the `<select>` to let the user select multiple options. In that case, if you also specify `defaultValue` to choose the initially selected options, it must be an array.
+
+<Sandpack>
+
+```js
+export default function FruitPicker() {
+  return (
+    <label>
+      Pick some fruits:
+      <select
+        name="selectedFruit"
+        defaultValue={['orange', 'banana']}
+        multiple={true}
+      >
+        <option value="apple">Apple</option>
+        <option value="banana">Banana</option>
+        <option value="orange">Orange</option>
+      </select>
+    </label>
+  );
+}
+```
+
+```css
+select { display: block; margin-top: 10px; width: 200px; }
+```
+
+</Sandpack>
+
+---
+
+### Reading the select box value when submitting a form {/*reading-the-select-box-value-when-submitting-a-form*/}
+
+Add a [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) around your textarea with a [`<button type="submit">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) inside. It will call your `<form onSubmit>` event handler. By default, the browser will send the form data to the current URL and refresh the page. You can override that behavior by calling `e.preventDefault()`. To read the form data, use [`new FormData(e.target)`](https://developer.mozilla.org/en-US/docs/Web/API/FormData).
+<Sandpack>
+
+```js
+export default function EditPost() {
+  function handleSubmit(e) {
+    // Prevent the browser from reloading the page
+    e.preventDefault();
+    // Read the form data
+    const form = e.target;
+    const formData = new FormData(form);
+    // You can pass formData as a fetch body directly:
+    fetch('/some-api', { method: form.method, body: formData });
+    // You can generate a URL out of it, as the browser does by default:
+    console.log(new URLSearchParams(formData).toString());
+    // You can work with it as a plain object.
+    const formJson = Object.fromEntries(formData.entries());
+    console.log(formJson); // (!) This doesn't include multiple select values
+    // Or you can get an array of name-value pairs.
+    console.log([...formData.entries()]);
+  }
+
+  return (
+    <form method="post" onSubmit={handleSubmit}>
+      <label>
+        Pick your favorite fruit:
+        <select name="selectedFruit" defaultValue="orange">
+          <option value="apple">Apple</option>
+          <option value="banana">Banana</option>
+          <option value="orange">Orange</option>
+        </select>
+      </label>
+      <label>
+        Pick all your favorite vegetables:
+        <select
+          name="selectedVegetables"
+          multiple={true}
+          defaultValue={['corn', 'tomato']}
+        >
+          <option value="cucumber">Cucumber</option>
+          <option value="corn">Corn</option>
+          <option value="tomato">Tomato</option>
+        </select>
+      </label>
+      <hr />
+      <button type="reset">Reset</button>
+      <button type="submit">Submit</button>
+    </form>
+  );
+}
+```
+
+```css
+label, select { display: block; }
+label { margin-bottom: 20px; }
+```
+
+</Sandpack>
+
+<Note>
+
+Give a `name` to your `<select>`, for example `<select name="selectedFruit" />`. The `name` you specified will be used as a key in the form data, for example `{ selectedFruit: "orange" }`.
+
+If you use `<select multiple={true}>`, the [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) you'll read from the form will include each selected value as a separate name-value pair. Look closely at the console logs in the example above.
+
+</Note>
+
+<Pitfall>
+
+By default, *any* `<button>` inside a `<form>` will submit it. This can be surprising! If you have your own custom `Button` React component, consider returning [`<button type="button">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button) instead of `<button>`. Then, to be explicit, use `<button type="submit">` for buttons that *are* supposed to submit the form.
+
+</Pitfall>
+
+---
+
+### Controlling a select box with a state variable {/*controlling-a-select-box-with-a-state-variable*/}
+
+A select box like `<select />` is *uncontrolled.* Even if you [pass an initially selected value](#providing-an-initially-selected-option) like `<select defaultValue="orange" />`, your JSX only specifies the initial value, not the value right now.
+
+**To render a _controlled_ select box, pass the `value` prop to it.** React will force the select box to always have the `value` you passed. Typically, you will control a select box by declaring a [state variable:](/reference/react/useState)
+
+```js {2,6,7}
+function FruitPicker() {
+  const [selectedFruit, setSelectedFruit] = useState('orange'); // Declare a state variable...
+  // ...
+  return (
+    <select
+      value={selectedFruit} // ...force the select's value to match the state variable...
+      onChange={e => setSelectedFruit(e.target.value)} // ... and update the state variable on any change!
+    >
+      <option value="apple">Apple</option>
+      <option value="banana">Banana</option>
+      <option value="orange">Orange</option>
+    </select>
+  );
+}
+```
+
+This is useful if you want to re-render some part of the UI in response to every selection.
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function FruitPicker() {
+  const [selectedFruit, setSelectedFruit] = useState('orange');
+  const [selectedVegs, setSelectedVegs] = useState(['corn', 'tomato']);
+  return (
+    <>
+      <label>
+        Pick a fruit:
+        <select
+          value={selectedFruit}
+          onChange={e => setSelectedFruit(e.target.value)}
+        >
+          <option value="apple">Apple</option>
+          <option value="banana">Banana</option>
+          <option value="orange">Orange</option>
+        </select>
+      </label>
+      <hr />
+      <label>
+        Pick all your favorite vegetables:
+        <select
+          multiple={true}
+          value={selectedVegs}
+          onChange={e => {
+            const options = [...e.target.selectedOptions];
+            const values = options.map(option => option.value);
+            setSelectedVegs(values);
+          }}
+        >
+          <option value="cucumber">Cucumber</option>
+          <option value="corn">Corn</option>
+          <option value="tomato">Tomato</option>
+        </select>
+      </label>
+      <hr />
+      <p>Your favorite fruit: {selectedFruit}</p>
+      <p>Your favorite vegetables: {selectedVegs.join(', ')}</p>
+    </>
+  );
+}
+```
+
+```css
+select { margin-bottom: 10px; display: block; }
+```
+
+</Sandpack>
+
+<Pitfall>
+
+**If you pass `value` without `onChange`, it will be impossible to select an option.** When you control a select box by passing some `value` to it, you *force* it to always have the value you passed. So if you pass a state variable as a `value` but forget to update that state variable synchronously during the `onChange` event handler, React will revert the select box after every keystroke back to the `value` that you specified.
+
+Unlike in HTML, passing a `selected` attribute to an individual `<option>` is not supported.
+
+</Pitfall>
diff --git a/beta/src/content/reference/react-dom/components/textarea.md b/beta/src/content/reference/react-dom/components/textarea.md
new file mode 100644
index 000000000..833fedf5c
--- /dev/null
+++ b/beta/src/content/reference/react-dom/components/textarea.md
@@ -0,0 +1,423 @@
+---
+title: "<textarea>"
+---
+
+<Intro>
+
+The [built-in browser `<textarea>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) lets you render a multiline text input.
+
+```js
+<textarea />
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `<textarea>` {/*textarea*/}
+
+To display a text area, render the [built-in browser `<textarea>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) component.
+
+```js
+<textarea name="postContent" />
+```
+
+[See more examples below.](#usage)
+
+#### Props {/*props*/}
+
+`<textarea>` supports all [common element props.](/reference/react-dom/components/common#props)
+
+You can [make a text area controlled](#controlling-a-text-area-with-a-state-variable) by passing a `value` prop:
+
+* `value`: A string. Controls the text inside the text area.
+
+When you pass `value`, you must also pass an `onChange` handler that updates the passed value.
+
+If your `<textarea>` is uncontrolled, you may pass the `defaultValue` prop instead:
+
+* `defaultValue`: A string. Specifies [the initial value](#providing-an-initial-value-for-a-text-area) for a text area.
+
+These `<textarea>` props are relevant both for uncontrolled and controlled text areas:
+
+* [`autoComplete`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-autocomplete): Either `'on'` or `'off'`. Specifies the autocomplete behavior.
+* [`autoFocus`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-autofocus): A boolean. If `true`, React will focus the element on mount.
+* `children`: `<textarea>` does not accept children. To set the initial value, use `defaultValue`.
+* [`cols`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-cols): A number. Specifies the default width in average character widths. Defaults to `20`.
+* [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-disabled): A boolean. If `true`, the input will not be interactive and will appear dimmed.
+* [`form`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-form): A string. Specifies the `id` of the `<form>` this input belongs to. If omitted, it's the closest parent form.
+* [`maxLength`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-maxlength): A number. Specifies the maximum length of text.
+* [`minLength`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-minlength): A number. Specifies the minimum length of text.
+* [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name): A string. Specifies the name for this input that's [submitted with the form.](#reading-the-textarea-value-when-submitting-a-form)
+* `onChange`: An [`Event` handler](/reference/react-dom/components/common#event-handler) function. Required for [controlled text areas.](#controlling-a-text-area-with-a-state-variable) Fires immediately when the input's value is changed by the user (for example, it fires on every keystroke). Behaves like the browser [`input` event.](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)
+* `onChangeCapture`: A version of `onChange` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onInput`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event): An [`Event` handler](/reference/react-dom/components/common#event-handler) function. function. Fires immediately when the value is changed by the user. For historical reasons, in React it is idiomatic to use `onChange` instead which works similarly.
+* `onInputCapture`: A version of `onInput` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onInvalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event): An [`Event` handler](/reference/react-dom/components/common#event-handler) function. Fires if an input fails validation on form submit. Unlike the built-in `invalid` event, the React `onInvalid` event bubbles.
+* `onInvalidCapture`: A version of `onInvalid` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onSelect`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement/select_event): An [`Event` handler](/reference/react-dom/components/common#event-handler) function. Fires after the selection inside the `<textarea>` changes. React extends the `onSelect` event to also fire for empty selection and on edits (which may affect the selection).
+* `onSelectCapture`: A version of `onSelect` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`placeholder`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-placeholder): A string. Displayed in a dimmed color when the text area value is empty.
+* [`readOnly`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-readonly): A boolean. If `true`, the text area is not editable by the user.
+* [`required`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-required): A boolean. If `true`, the value must be provided for the form to submit.
+* [`rows`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows): A number. Specifies the default height in average character heights. Defaults to `2`.
+* [`wrap`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-wrap): Either `'hard'`, `'soft'`, or `'off'`. Specifies how the text should be wrapped when submitting a form.
+
+#### Caveats {/*caveats*/}
+
+- Passing children like `<textarea>something</textarea>` is not allowed. [Use `defaultValue` for initial content.](#providing-an-initial-value-for-a-text-area)
+- If a text area receives a string `value` prop, it will be [treated as controlled.](#controlling-a-text-area-with-a-state-variable)
+- A text area can't be both controlled and uncontrolled at the same time.
+- A text area cannot switch between being controlled or uncontrolled over its lifetime.
+- Every controlled text area needs an `onChange` event handler that synchronously updates its backing value.
+
+---
+
+## Usage {/*usage*/}
+
+### Displaying a text area {/*displaying-a-text-area*/}
+
+Render `<textarea>` to display a text area. You can specify its default size with the [`rows`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#rows) and [`cols`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#cols) attributes, but by default the user will be able to resize it. To disable resizing, you can specify `resize: none` in the CSS.
+
+<Sandpack>
+
+```js
+export default function NewPost() {
+  return (
+    <label>
+      Write your post:
+      <textarea name="postContent" rows={4} cols={40} />
+    </label>
+  );
+}
+```
+
+```css
+input { margin-left: 5px; }
+textarea { margin-top: 10px; }
+label { margin: 10px; }
+label, textarea { display: block; }
+```
+
+</Sandpack>
+
+---
+
+### Providing a label for a text area {/*providing-a-label-for-a-text-area*/}
+
+Typically, you will place every `<textarea>` inside a [`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) tag. This tells the browser that this label is associated with that text area. When the user clicks the label, the browser will focus the text area. It's also essential for accessibility: a screen reader will announce the label caption when the user focuses the text area.
+
+If you can't nest `<textarea>` into a `<label>`, associate them by passing the same ID to `<textarea id>` and [`<label htmlFor>`.](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor) To avoid conflicts between instances of one component, generate such an ID with [`useId`.](/reference/react/useId)
+
+<Sandpack>
+
+```js
+import { useId } from 'react';
+
+export default function Form() {
+  const postTextAreaId = useId();
+  return (
+    <>
+      <label htmlFor={postTextAreaId}>
+        Write your post:
+      </label>
+      <textarea
+        id={postTextAreaId}
+        name="postContent"
+        rows={4}
+        cols={40}
+      />
+    </>
+  );
+}
+```
+
+```css
+input { margin: 5px; }
+```
+
+</Sandpack>
+
+---
+
+### Providing an initial value for a text area {/*providing-an-initial-value-for-a-text-area*/}
+
+You can optionally specify the initial value for the text area. Pass it as the `defaultValue` string.
+
+<Sandpack>
+
+```js
+export default function EditPost() {
+  return (
+    <label>
+      Edit your post:
+      <textarea
+        name="postContent"
+        defaultValue="I really enjoyed biking yesterday!"
+        rows={4}
+        cols={40}
+      />
+    </label>
+  );
+}
+```
+
+```css
+input { margin-left: 5px; }
+textarea { margin-top: 10px; }
+label { margin: 10px; }
+label, textarea { display: block; }
+```
+
+</Sandpack>
+
+<Pitfall>
+
+Unlike in HTML, passing initial text like `<textarea>Some content</textarea>` is not supported.
+
+</Pitfall>
+
+---
+
+### Reading the text area value when submitting a form {/*reading-the-text-area-value-when-submitting-a-form*/}
+
+Add a [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) around your textarea with a [`<button type="submit">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) inside. It will call your `<form onSubmit>` event handler. By default, the browser will send the form data to the current URL and refresh the page. You can override that behavior by calling `e.preventDefault()`. To read the form data, use [`new FormData(e.target)`](https://developer.mozilla.org/en-US/docs/Web/API/FormData).
+<Sandpack>
+
+```js
+export default function EditPost() {
+  function handleSubmit(e) {
+    // Prevent the browser from reloading the page
+    e.preventDefault();
+
+    // Read the form data
+    const form = e.target;
+    const formData = new FormData(form);
+
+    // You can pass formData as a fetch body directly:
+    fetch('/some-api', { method: form.method, body: formData });
+
+    // Or you can work with it as a plain object:
+    const formJson = Object.fromEntries(formData.entries());
+    console.log(formJson);
+  }
+
+  return (
+    <form method="post" onSubmit={handleSubmit}>
+      <label>
+        Post title: <input name="postTitle" defaultValue="Biking" />
+      </label>
+      <label>
+        Edit your post:
+        <textarea
+          name="postContent"
+          defaultValue="I really enjoyed biking yesterday!"
+          rows={4}
+          cols={40}
+        />
+      </label>
+      <hr />
+      <button type="reset">Reset edits</button>
+      <button type="submit">Save post</button>
+    </form>
+  );
+}
+```
+
+```css
+label { display: block; }
+input { margin: 5px; }
+```
+
+</Sandpack>
+
+<Note>
+
+Give a `name` to your `<textarea>`, for example `<textarea name="postContent" />`. The `name` you specified will be used as a key in the form data, for example `{ postContent: "Your post" }`.
+
+</Note>
+
+<Pitfall>
+
+By default, *any* `<button>` inside a `<form>` will submit it. This can be surprising! If you have your own custom `Button` React component, consider returning [`<button type="button">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button) instead of `<button>`. Then, to be explicit, use `<button type="submit">` for buttons that *are* supposed to submit the form.
+
+</Pitfall>
+
+---
+
+### Controlling a text area with a state variable {/*controlling-a-text-area-with-a-state-variable*/}
+
+A text area like `<textarea />` is *uncontrolled.* Even if you [pass an initial value](#providing-an-initial-value-for-a-text-area) like `<textarea defaultValue="Initial text" />`, your JSX only specifies the initial value, not the value right now.
+
+**To render a _controlled_ text area, pass the `value` prop to it.** React will force the text area to always have the `value` you passed. Typically, you will control a text area by declaring a [state variable:](/reference/react/useState)
+
+```js {2,6,7}
+function NewPost() {
+  const [postContent, setPostContent] = useState(''); // Declare a state variable...
+  // ...
+  return (
+    <textarea
+      value={postContent} // ...force the input's value to match the state variable...
+      onChange={e => setPostContent(e.target.value)} // ... and update the state variable on any edits!
+    />
+  );
+}
+```
+
+This is useful if you want to re-render some part of the UI in response to every keystroke.
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+import MarkdownPreview from './MarkdownPreview.js';
+
+export default function MarkdownEditor() {
+  const [postContent, setPostContent] = useState('_Hello,_ **Markdown**!');
+  return (
+    <>
+      <label>
+        Enter some markdown:
+        <textarea
+          value={postContent}
+          onChange={e => setPostContent(e.target.value)}
+        />
+      </label>
+      <hr />
+      <MarkdownPreview markdown={postContent} />
+    </>
+  );
+}
+```
+
+```js MarkdownPreview.js
+import { Remarkable } from 'remarkable';
+
+const md = new Remarkable();
+
+export default function MarkdownPreview({ markdown }) {
+  const renderedHTML = md.render(markdown);
+  return <div dangerouslySetInnerHTML={{__html: renderedHTML}} />;
+}
+```
+
+```json package.json
+{
+  "dependencies": {
+    "react": "latest",
+    "react-dom": "latest",
+    "react-scripts": "latest",
+    "remarkable": "2.0.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+```css
+textarea { display: block; margin-top: 5px; margin-bottom: 10px; }
+```
+
+</Sandpack>
+
+<Pitfall>
+
+**If you pass `value` without `onChange`, it will be impossible to type into the text area.** When you control an text area by passing some `value` to it, you *force* it to always have the value you passed. So if you pass a state variable as a `value` but forget to update that state variable synchronously during the `onChange` event handler, React will revert the text area after every keystroke back to the `value` that you specified.
+
+</Pitfall>
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+
+### My text area doesn't update when I type into it {/*my-text-area-doesnt-update-when-i-type-into-it*/}
+
+If you render a text area with `value` but no `onChange`, you will see an error in the console:
+
+```js
+// 🔴 Bug: controlled text area with no onChange handler
+<textarea value={something} />
+```
+
+<ConsoleBlock level="error">
+
+You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.
+
+</ConsoleBlock>
+
+As the error message suggests, if you only wanted to [specify the *initial* value,](#providing-an-initial-value-for-a-text-area) pass `defaultValue` instead:
+
+```js
+// ✅ Good: uncontrolled text area with an initial value
+<textarea defaultValue={something} />
+```
+
+If you want [to control this text area with a state variable,](#controlling-a-text-area-with-a-state-variable) specify an `onChange` handler:
+
+```js
+// ✅ Good: controlled text area with onChange
+<textarea value={something} onChange={e => setSomething(e.target.value)} />
+```
+
+If the value is intentionally read-only, add a `readOnly` prop to suppress the error:
+
+```js
+// ✅ Good: readonly controlled text area without on change
+<textarea value={something} readOnly={true} />
+```
+
+---
+
+### My text area caret jumps to the beginning on every keystroke {/*my-text-area-caret-jumps-to-the-beginning-on-every-keystroke*/}
+
+If you [control a text area,](#controlling-a-text-area-with-a-state-variable) you must update its state variable to the text area's value from the DOM during `onChange`.
+
+You can't update it to something other than `e.target.value`:
+
+```js
+function handleChange(e) {
+  // 🔴 Bug: updating an input to something other than e.target.value
+  setFirstName(e.target.value.toUpperCase());
+}
+```
+
+You also can't update it asynchronously:
+
+```js
+function handleChange(e) {
+  // 🔴 Bug: updating an input asynchronously
+  setTimeout(() => {
+    setFirstName(e.target.value);
+  }, 100);
+}
+```
+
+To fix your code, update it synchronously to `e.target.value`:
+
+```js
+function handleChange(e) {
+  // ✅ Updating a controlled input to e.target.value synchronously
+  setFirstName(e.target.value);
+}
+```
+
+If this doesn't fix the problem, it's possible that the text area gets removed and re-added from the DOM on every keystroke. This can happen if you're accidentally [resetting state](/learn/preserving-and-resetting-state) on every re-render. For example, this can happen if the text area or one of its parents always receives a different `key` attribute, or if you nest component definitions (which is not allowed in React and causes the "inner" component to remount on every render).
+
+---
+
+### I'm getting an error: "A component is changing an uncontrolled input to be controlled" {/*im-getting-an-error-a-component-is-changing-an-uncontrolled-input-to-be-controlled*/}
+
+
+If you provide a `value` to the component, it must remain a string throughout its lifetime.
+
+You cannot pass `value={undefined}` first and later pass `value="some string"` because React won't know whether you want the component to be uncontrolled or controlled. A controlled component should always receive a string `value`, not `null` or `undefined`.
+
+If your `value` is coming from an API or a state variable, it might be initialized to `null` or `undefined`. In that case, either set it to an empty string (`''`) initially, or pass `value={someValue ?? ''}` to ensure `value` is a string.
diff --git a/beta/src/content/reference/react-dom/createPortal.md b/beta/src/content/reference/react-dom/createPortal.md
new file mode 100644
index 000000000..f5209b174
--- /dev/null
+++ b/beta/src/content/reference/react-dom/createPortal.md
@@ -0,0 +1,457 @@
+---
+title: createPortal
+---
+
+<Intro>
+
+`createPortal` lets you render some children into a different part of the DOM.
+
+
+```js
+<div>
+  <SomeComponent />
+  {createPortal(children, domNode)}
+</div>
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `createPortal(children, domNode)` {/*createportal*/}
+
+To create a portal, call `createPortal`, passing some JSX, and the DOM node where it should be rendered:
+
+```js
+import { createPortal } from 'react-dom';
+
+// ...
+
+<div>
+  <p>This child is placed in the parent div.</p>
+  {createPortal(
+    <p>This child is placed in the document body.</p>,
+    document.body
+  )}
+</div>
+```
+
+[See more examples below.](#usage)
+
+A portal only changes the physical placement of the DOM node. In every other way, the JSX you render into a portal acts as a child node of the React component that renders it. For example, the child can access the context provided by the parent tree, and events still bubble up from children to parents according to the React tree.
+
+#### Parameters {/*parameters*/}
+
+* `children`: Anything that can be rendered with React, such as a piece of JSX (e.g. `<div />` or `<SomeComponent />`), a [Fragment](/reference/react/Fragment) (`<>...</>`), a string or a number, or an array of these.
+
+* `domNode`: Some DOM node, such as those returned by `document.getElementById()`. The node must already exist. Passing a different DOM node during an update will cause the portal content to be recreated.
+
+#### Returns {/*returns*/}
+
+`createPortal` returns a React node that can be included into JSX or returned from a React component. If React encounters it in the render output, it will place the provided `children` inside the provided `domNode`.
+
+#### Caveats {/*caveats*/}
+
+* Events from portals propagate according to the React tree rather than the DOM tree. For example, if you click inside a portal, and the portal is wrapped in `<div onClick>`, that `onClick` handler will fire. If this causes issues, either stop the event propagation from inside the portal, or move the portal itself up in the React tree.
+
+---
+
+## Usage {/*usage*/}
+
+### Rendering to a different part of the DOM {/*rendering-to-a-different-part-of-the-dom*/}
+
+*Portals* let your components render some of their children into a different place in the DOM. This lets a part of your component "escape" from whatever containers it may be in. For example, a component can display a modal dialog or a tooltip that appears above and outside of the rest of the page.
+
+To create a portal, render the result of `createPortal` with <CodeStep step={1}>some JSX</CodeStep> and the <CodeStep step={2}>DOM node where it should go</CodeStep>:
+
+```js [[1, 8, "<p>This child is placed in the document body.</p>"], [2, 9, "document.body"]]
+import { createPortal } from 'react-dom';
+
+function MyComponent() {
+  return (
+    <div style={{ border: '2px solid black' }}>
+      <p>This child is placed in the parent div.</p>
+      {createPortal(
+        <p>This child is placed in the document body.</p>,
+        document.body
+      )}
+    </div>
+  );
+}
+```
+
+React will put the DOM nodes for <CodeStep step={1}>the JSX you passed</CodeStep> inside of the <CodeStep step={2}>DOM node you provided</CodeStep>. Without a portal, the second `<p>` would be placed inside the parent `<div>`, but the portal "teleported" it into the [`document.body`:](https://developer.mozilla.org/en-US/docs/Web/API/Document/body)
+
+<Sandpack>
+
+```js
+import { createPortal } from 'react-dom';
+
+export default function MyComponent() {
+  return (
+    <div style={{ border: '2px solid black' }}>
+      <p>This child is placed in the parent div.</p>
+      {createPortal(
+        <p>This child is placed in the document body.</p>,
+        document.body
+      )}
+    </div>
+  );
+}
+```
+
+</Sandpack>
+
+Notice how the second paragraph visually appears outside the parent `<div>` with the border. If you inspect the DOM structure with developer tools, you can confirm that the second `<p>` got placed direcly into the `<body>`:
+
+```html {4-6,9}
+<body>
+  <div id="root">
+    ...
+      <div style="border: 2px solid black">
+        <p>This child is placed inside the parent div.</p>
+      </div>
+    ...
+  </div>
+  <p>This child is placed in the document body.</p>
+</body>
+```
+
+A portal only changes the physical placement of the DOM node. In every other way, the JSX you render into a portal acts as a child node of the React component that renders it. For example, the child can access the context provided by the parent tree, and events still bubble up from children to parents according to the React tree.
+
+---
+
+### Rendering a modal dialog with a portal {/*rendering-a-modal-dialog-with-a-portal*/}
+
+You can use a portal to create a modal dialog that floats above the rest of the page, even if the component that summons the dialog is inside a container with `overflow: hidden` or other styles that interfere with the dialog.
+
+In this example, the two containers have styles that disrupt the modal dialog, but the one rendered into a portal is unaffected because, in the DOM, the modal is not contained within the elements rendered by its parents.
+
+<Sandpack>
+
+```js App.js active
+import NoPortalExample from './NoPortalExample';
+import PortalExample from './PortalExample';
+
+export default function App() {
+  return (
+    <>
+      <div className="clipping-container">
+        <NoPortalExample  />
+      </div>
+      <div className="clipping-container">
+        <PortalExample />
+      </div>
+    </>
+  );
+}
+```
+
+```js NoPortalExample.js
+import { useState } from 'react';
+import ModalContent from './ModalContent.js';
+
+export default function NoPortalExample() {
+  const [showModal, setShowModal] = useState(false);
+  return (
+    <>
+      <button onClick={() => setShowModal(true)}>
+        Show modal without a portal
+      </button>
+      {showModal && (
+        <ModalContent onClose={() => setShowModal(false)} />
+      )}
+    </>
+  );
+}
+```
+
+```js PortalExample.js active
+import { useState } from 'react';
+import { createPortal } from 'react-dom';
+import ModalContent from './ModalContent.js';
+
+export default function PortalExample() {
+  const [showModal, setShowModal] = useState(false);
+  return (
+    <>
+      <button onClick={() => setShowModal(true)}>
+        Show modal using a portal
+      </button>
+      {showModal && createPortal(
+        <ModalContent onClose={() => setShowModal(false)} />,
+        document.body
+      )}
+    </>
+  );
+}
+```
+
+```js ModalContent.js
+export default function ModalContent({ onClose }) {
+  return (
+    <div className="modal">
+      <div>I'm a modal dialog</div>
+      <button onClick={onClose}>Close</button>
+    </div>
+  );
+}
+```
+
+
+```css styles.css
+.clipping-container {
+  position: relative;
+  border: 1px solid #aaa;
+  margin-bottom: 12px;
+  padding: 12px;
+  width: 250px;
+  height: 80px;
+  overflow: hidden;
+}
+
+.modal {
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  box-shadow: rgba(100, 100, 111, 0.3) 0px 7px 29px 0px;
+  background-color: white;
+  border: 2px solid rgb(240, 240, 240);
+  border-radius: 12px;
+  position:  absolute;
+  width: 250px;
+  top: 70px;
+  left: calc(50% - 125px);
+  bottom: 70px;
+}
+```
+
+</Sandpack>
+
+<Pitfall>
+
+It's important to make sure that your app is accessible when using portals. For instance, you may need to manage keyboard focus so that the user can move the focus in and out of the portal in a natural way.
+
+Follow the [WAI-ARIA Modal Authoring Practices](https://www.w3.org/WAI/ARIA/apg/#dialog_modal) when creating modals. If you use a community package, ensure that it is accessible and follows these guidelines.
+
+</Pitfall>
+
+---
+
+### Rendering React components into non-React server markup {/*rendering-react-components-into-non-react-server-markup*/}
+
+Portals can be useful if your React root is only part of a static or server-rendered page that isn't built with React. For example, if your page is built with a server framework like Rails or PHP, you can create areas of interactivity within static areas such as sidebars. Compared with having [multiple separate React roots,](/reference/react-dom/client/createRoot#rendering-a-page-partially-built-with-react) portals let you treat the app as a single React tree with shared state even though its parts render to different parts of the DOM.
+
+<Sandpack>
+
+```html index.html
+<!DOCTYPE html>
+<html>
+  <head><title>My app</title></head>
+  <body>
+    <h1>Welcome to my hybrid app</h1>
+    <div class="parent">
+      <div class="sidebar">
+        This is server non-React markup
+        <div id="sidebar-content"></div>
+      </div>
+      <div id="root"></div>
+    </div>
+  </body>
+</html>
+```
+
+```js index.js
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.js';
+import './styles.css';
+
+const root = createRoot(document.getElementById('root'));
+root.render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);
+```
+
+```js App.js active
+import { createPortal } from 'react-dom';
+
+const sidebarContentEl = document.getElementById('sidebar-content');
+
+export default function App() {
+  return (
+    <>
+      <MainContent />
+      {createPortal(
+        <SidebarContent />,
+        sidebarContentEl
+      )}
+    </>
+  );
+}
+
+function MainContent() {
+  return <p>This part is rendered by React</p>;
+}
+
+function SidebarContent() {
+  return <p>This part is also rendered by React!</p>;
+}
+```
+
+```css
+.parent {
+  display: flex;
+  flex-direction: row;
+}
+
+#root {
+  margin-top: 12px;
+}
+
+.sidebar {
+  padding:  12px;
+  background-color: #eee;
+  width: 200px;
+  height: 200px;
+  margin-right: 12px;
+}
+
+#sidebar-content {
+  margin-top: 18px;
+  display: block;
+  background-color: white;
+}
+
+p {
+  margin: 0;
+}
+```
+
+</Sandpack>
+
+---
+
+### Rendering React components into non-React DOM nodes {/*rendering-react-components-into-non-react-dom-nodes*/}
+
+You can also use a portal to manage the content of a DOM node that's managed outside of React. For example, suppose you're integrating with a non-React map widget and you want to render React content inside a popup.
+
+To do this, declare a `popupContainer` state variable to store the DOM node you're going to render into:
+
+```js
+const [popupContainer, setPopupContainer] = useState(null);
+```
+
+When you initialize the third-party widget, store the DOM node returned by the widget so you can render into it:
+
+```js {5-6}
+useEffect(() => {
+  if (mapRef.current === null) {
+    const map = createMapWidget(containerRef.current);
+    mapRef.current = map;
+    const popupDiv = addPopupToMapWidget(map);
+    setPopupContainer(popupDiv);
+  }
+}, []);
+```
+
+This lets you use `createPortal` to render React content into `popupContainer` once it becomes available:
+
+```js {3-6}
+return (
+  <div style={{ width: 250, height: 250 }} ref={containerRef}>
+    {popupContainer !== null && createPortal(
+      <p>Hello from React!</p>,
+      popupContainer
+    )}
+  </div>
+);
+```
+
+Here is a complete example you can play with:
+
+<Sandpack>
+
+```json package.json hidden
+{
+  "dependencies": {
+    "leaflet": "1.9.1",
+    "react": "latest",
+    "react-dom": "latest",
+    "react-scripts": "latest",
+    "remarkable": "2.0.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+```js App.js
+import { useRef, useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { createMapWidget, addPopupToMapWidget } from './map-widget.js';
+
+export default function Map() {
+  const containerRef = useRef(null);
+  const mapRef = useRef(null);
+  const [popupContainer, setPopupContainer] = useState(null);
+
+  useEffect(() => {
+    if (mapRef.current === null) {
+      const map = createMapWidget(containerRef.current);
+      mapRef.current = map;
+      const popupDiv = addPopupToMapWidget(map);
+      setPopupContainer(popupDiv);
+    }
+  }, []);
+
+  return (
+    <div style={{ width: 250, height: 250 }} ref={containerRef}>
+      {popupContainer !== null && createPortal(
+        <p>Hello from React!</p>,
+        popupContainer
+      )}
+    </div>
+  );
+}
+```
+
+```js map-widget.js
+import 'leaflet/dist/leaflet.css';
+import * as L from 'leaflet';
+
+export function createMapWidget(containerDomNode) {
+  const map = L.map(containerDomNode);
+  map.setView([0, 0], 0);
+  L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    maxZoom: 19,
+    attribution: '© OpenStreetMap'
+  }).addTo(map);
+  return map;
+}
+
+export function addPopupToMapWidget(map) {
+  const popupDiv = document.createElement('div');
+  L.popup()
+    .setLatLng([0, 0])
+    .setContent(popupDiv)
+    .openOn(map);
+  return popupDiv;
+}
+```
+
+```css
+button { margin: 5px; }
+```
+
+</Sandpack>
diff --git a/beta/src/content/reference/react-dom/findDOMNode.md b/beta/src/content/reference/react-dom/findDOMNode.md
new file mode 100644
index 000000000..df3057f5b
--- /dev/null
+++ b/beta/src/content/reference/react-dom/findDOMNode.md
@@ -0,0 +1,435 @@
+---
+title: findDOMNode
+---
+
+<Deprecated>
+
+This API will be removed in a future major version of React. [See the alternatives.](#alternatives)
+
+</Deprecated>
+
+<Intro>
+
+`findDOMNode` finds the browser DOM node for a React [class component](/reference/react/Component) instance.
+
+```js
+const domNode = findDOMNode(componentInstance)
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `findDOMNode(componentInstance)` {/*finddomnode*/}
+
+Call `findDOMNode` to find the browser DOM node for a given React [class component](/reference/react/Component) instance.
+
+```js
+import { findDOMNode } from 'react-dom';
+
+const domNode = findDOMNode(componentInstance);
+```
+
+[See more examples below.](#usage)
+
+#### Parameters {/*parameters*/}
+
+* `componentInstance`: An instance of the [`Component`](/reference/react/Component) subclass. For example, `this` inside a class component.
+
+
+#### Returns {/*returns*/}
+
+`findDOMNode` returns the first closest browser DOM node within the given `componentInstance`. When a component renders to `null`, or renders `false`, `findDOMNode` returns `null`. When a component renders to a string, `findDOMNode` returns a text DOM node containing that value.
+
+#### Caveats {/*caveats*/}
+
+* A component may return an array or a [Fragment](/reference/react/Fragment) with multiple children. In that case `findDOMNode`, will return the DOM node corresponding to the first non-empty child.
+
+* `findDOMNode` only works on mounted components (that is, components that have been placed in the DOM). If you try to call this on a component that has not been mounted yet (like calling `findDOMNode()` in `render()` on a component that has yet to be created), an exception will be thrown.
+
+* `findDOMNode` only returns the result at the time of your call. If a child component renders a different node later, there is no way for you to be notified of this change.
+
+* `findDOMNode` accepts a class component instance, so it can't be used with function components.
+
+---
+
+## Usage {/*usage*/}
+
+### Finding the root DOM node of a class component {/*finding-the-root-dom-node-of-a-class-component*/}
+
+Call `findDOMNode` with a [class component](/reference/react/Component) instance (usually, `this`) to find the DOM node it has rendered.
+
+```js {3}
+class AutoselectingInput extends Component {
+  componentDidMount() {
+    const input = findDOMNode(this);
+    input.select()
+  }
+
+  render() {
+    return <input defaultValue="Hello" />
+  }
+}
+```
+
+Here, the `input` variable will be set to the `<input>` DOM element. This lets you do something with it. For example, when clicking "Show example" below mounts the input, [`input.select()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select) selects all text in the input:
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+import AutoselectingInput from './AutoselectingInput.js';
+
+export default function App() {
+  const [show, setShow] = useState(false);
+  return (
+    <>
+      <button onClick={() => setShow(true)}>
+        Show example
+      </button>
+      <hr />
+      {show && <AutoselectingInput />}
+    </>
+  );
+}
+```
+
+```js AutoselectingInput.js active
+import { Component } from 'react';
+import { findDOMNode } from 'react-dom';
+
+class AutoselectingInput extends Component {
+  componentDidMount() {
+    const input = findDOMNode(this);
+    input.select()
+  }
+
+  render() {
+    return <input defaultValue="Hello" />
+  }
+}
+
+export default AutoselectingInput;
+```
+
+</Sandpack>
+
+---
+
+## Alternatives {/*alternatives*/}
+
+### Reading component's own DOM node from a ref {/*reading-components-own-dom-node-from-a-ref*/}
+
+Code using `findDOMNode` is fragile because the connection between the JSX node and the code manipulating the corresponding DOM node is not explicit. For example, try wrapping `<input />` from this example into a `<div>`:
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+import AutoselectingInput from './AutoselectingInput.js';
+
+export default function App() {
+  const [show, setShow] = useState(false);
+  return (
+    <>
+      <button onClick={() => setShow(true)}>
+        Show example
+      </button>
+      <hr />
+      {show && <AutoselectingInput />}
+    </>
+  );
+}
+```
+
+```js AutoselectingInput.js active
+import { Component } from 'react';
+import { findDOMNode } from 'react-dom';
+
+class AutoselectingInput extends Component {
+  componentDidMount() {
+    const input = findDOMNode(this);
+    input.select()
+  }
+  render() {
+    return <input defaultValue="Hello" />
+  }
+}
+
+export default AutoselectingInput;
+```
+
+</Sandpack>
+
+This will break the code because now, `findDOMNode(this)` finds the `<div>` DOM node, but the code expects an `<input>` DOM node. To avoid these kinds of problems, use [`createRef`](/reference/react/createRef) to manage a specific DOM node.
+
+In this example, `findDOMNode` is no longer used. Instead, `inputRef = createRef(null)` is defined as an instance field on the class. To read the DOM node from it, you can use `this.inputRef.current`. To attach it to the JSX, you render `<input ref={this.inputRef} />`. You have connected the code using the DOM node to its JSX:
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+import AutoselectingInput from './AutoselectingInput.js';
+
+export default function App() {
+  const [show, setShow] = useState(false);
+  return (
+    <>
+      <button onClick={() => setShow(true)}>
+        Show example
+      </button>
+      <hr />
+      {show && <AutoselectingInput />}
+    </>
+  );
+}
+```
+
+```js AutoselectingInput.js active
+import { createRef, Component } from 'react';
+
+class AutoselectingInput extends Component {
+  inputRef = createRef(null);
+
+  componentDidMount() {
+    const input = this.inputRef.current;
+    input.select()
+  }
+
+  render() {
+    return (
+      <input ref={this.inputRef} defaultValue="Hello" />
+    );
+  }
+}
+
+export default AutoselectingInput;
+```
+
+</Sandpack>
+
+In modern React without class components, the equivalent code would call [`useRef`](/reference/react/useRef) instead:
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+import AutoselectingInput from './AutoselectingInput.js';
+
+export default function App() {
+  const [show, setShow] = useState(false);
+  return (
+    <>
+      <button onClick={() => setShow(true)}>
+        Show example
+      </button>
+      <hr />
+      {show && <AutoselectingInput />}
+    </>
+  );
+}
+```
+
+```js AutoselectingInput.js active
+import { useRef, useEffect } from 'react';
+
+export default function AutoselectingInput() {
+  const inputRef = useRef(null);
+
+  useEffect(() => {
+    const input = inputRef.current;
+    input.select();
+  }, []);
+
+  return <input ref={inputRef} defaultValue="Hello" />
+}
+```
+
+</Sandpack>
+
+[Read more about manipulating the DOM with refs.](/learn/manipulating-the-dom-with-refs)
+
+---
+
+### Reading a child component's DOM node from a forwarded ref {/*reading-a-child-components-dom-node-from-a-forwarded-ref*/}
+
+In this example, `findDOMNode(this)` finds a DOM node that belongs to another component. The `AutoselectingInput` renders `MyInput`, which is your own component that renders a browser `<input>`.
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+import AutoselectingInput from './AutoselectingInput.js';
+
+export default function App() {
+  const [show, setShow] = useState(false);
+  return (
+    <>
+      <button onClick={() => setShow(true)}>
+        Show example
+      </button>
+      <hr />
+      {show && <AutoselectingInput />}
+    </>
+  );
+}
+```
+
+```js AutoselectingInput.js active
+import { Component } from 'react';
+import { findDOMNode } from 'react-dom';
+import MyInput from './MyInput.js';
+
+class AutoselectingInput extends Component {
+  componentDidMount() {
+    const input = findDOMNode(this);
+    input.select()
+  }
+  render() {
+    return <MyInput />;
+  }
+}
+
+export default AutoselectingInput;
+```
+
+```js MyInput.js
+export default function MyInput() {
+  return <input defaultValue="Hello" />;
+}
+```
+
+</Sandpack>
+
+Notice that calling `findDOMNode(this)` inside `AutoselectingInput` still gives you the DOM `<input>`--even though the JSX for this `<input>` is hidden inside the `MyInput` component. This seems convenient for the above example, but it leads to fragile code. Imagine that you wanted to edit `MyInput` later and add a wrapper `<div>` around it. This would break the code of `AutoselectingInput` (which expects to find an `<input>` DOM node).
+
+To replace `findDOMNode` in this example, the two components need to coordinate:
+
+1. `AutoSelectingInput` should declare a ref, like [in the earlier example](#reading-components-own-dom-node-from-a-ref), and pass it to `<MyInput>`.
+2. `MyInput` should be declared with [`forwardRef`](/reference/react/forwardRef) to read the passed ref, and pass it down to the `<input>` node.
+
+This version does that, so it no longer needs `findDOMNode`:
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+import AutoselectingInput from './AutoselectingInput.js';
+
+export default function App() {
+  const [show, setShow] = useState(false);
+  return (
+    <>
+      <button onClick={() => setShow(true)}>
+        Show example
+      </button>
+      <hr />
+      {show && <AutoselectingInput />}
+    </>
+  );
+}
+```
+
+```js AutoselectingInput.js active
+import { createRef, Component } from 'react';
+import MyInput from './MyInput.js';
+
+class AutoselectingInput extends Component {
+  inputRef = createRef(null);
+
+  componentDidMount() {
+    const input = this.inputRef.current;
+    input.select()
+  }
+
+  render() {
+    return (
+      <MyInput ref={this.inputRef} />
+    );
+  }
+}
+
+export default AutoselectingInput;
+```
+
+```js MyInput.js
+import { forwardRef } from 'react';
+
+const MyInput = forwardRef(function MyInput(props, ref) {
+  return <input ref={ref} defaultValue="Hello" />;
+});
+
+export default MyInput;
+```
+
+</Sandpack>
+
+Here is how this code would look like with function components instead of classes:
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+import AutoselectingInput from './AutoselectingInput.js';
+
+export default function App() {
+  const [show, setShow] = useState(false);
+  return (
+    <>
+      <button onClick={() => setShow(true)}>
+        Show example
+      </button>
+      <hr />
+      {show && <AutoselectingInput />}
+    </>
+  );
+}
+```
+
+```js AutoselectingInput.js active
+import { useRef, useEffect } from 'react';
+import MyInput from './MyInput.js';
+
+export default function AutoselectingInput() {
+  const inputRef = useRef(null);
+
+  useEffect(() => {
+    const input = inputRef.current;
+    input.select();
+  }, []);
+
+  return <MyInput ref={inputRef} defaultValue="Hello" />
+}
+```
+
+```js MyInput.js
+import { forwardRef } from 'react';
+
+const MyInput = forwardRef(function MyInput(props, ref) {
+  return <input ref={ref} defaultValue="Hello" />;
+});
+
+export default MyInput;
+```
+
+</Sandpack>
+
+---
+
+### Adding a wrapper `<div>` element {/*adding-a-wrapper-div-element*/}
+
+Sometimes a component needs to know the position and size of its children. This makes it tempting to find the children with `findDOMNode(this)`, and then use DOM methods like [`getBoundingClientRect`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) for measurements.
+
+There is currently no direct equivalent for this use case, which is why `findDOMNode` is deprecated but is not yet removed completely from React. In the meantime, you can try rendering a wrapper `<div>` node around the content as a workaround, and getting a ref to that node. However, extra wrappers can sometimes break styling.
+
+```js
+<div ref={someRef}>
+  {children}
+</div>
+```
+
+This also applies to focusing and scrolling to arbitrary children.
diff --git a/beta/src/content/reference/react-dom/flushSync.md b/beta/src/content/reference/react-dom/flushSync.md
new file mode 100644
index 000000000..cb0d9594d
--- /dev/null
+++ b/beta/src/content/reference/react-dom/flushSync.md
@@ -0,0 +1,135 @@
+---
+title: flushSync
+---
+
+<Pitfall>
+
+Using `flushSync` is uncommon and can hurt the performance of your app.
+
+</Pitfall>
+
+<Intro>
+
+`flushSync` lets you force React to flush any updates inside the provided callback synchronously. This ensures that the DOM is updated immediately.
+
+```js
+flushSync(callback)
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `flushSync(callback)` {/*flushsync*/}
+
+Call `flushSync` to force React to flush any pending work and update the DOM synchronously.
+
+```js
+import { flushSync } from 'react-dom';
+
+flushSync(() => {
+  setSomething(123);
+});
+```
+
+Most of the time, `flushSync` can be avoided. Use `flushSync` as last resort.
+
+[See more examples below.](#usage)
+
+#### Parameters {/*parameters*/}
+
+
+* `callback`: A function. React will immediately call this callback and flush any updates it contains synchronously. It may also flush any pending updates, or Effects, or updates inside of Effects. If an update suspends as a result of this `flushSync` call, the fallbacks may be re-shown.
+
+#### Returns {/*returns*/}
+
+`flushSync` returns `undefined`.
+
+#### Caveats {/*caveats*/}
+
+* `flushSync` can significantly hurt performance. Use sparingly.
+* `flushSync` may force pending Suspense boundaries to show their `fallback` state.
+* `flushSync` may run pending effects and synchronously apply any updates they contain before returning.
+* `flushSync` may flush updates outside the callback when necessary to flush the updates inside the callback. For example, if there are pending updates from a click, React may flush those before flushing the updates inside the callback.
+
+---
+
+## Usage {/*usage*/}
+
+### Flushing updates for third-party integrations {/*flushing-updates-for-third-party-integrations*/}
+
+When integrating with third-party code such as browser APIs or UI libraries, it may be necessary to force React to flush updates. Use `flushSync` to force React to flush any <CodeStep step={1}>state updates</CodeStep> inside the callback synchronously:
+
+```js [[1, 2, "setSomething(123)"]]
+flushSync(() => {
+  setSomething(123);
+});
+// By this line, the DOM is updated.
+```
+
+This ensures that, by the time the next line of code runs, React has already updated the DOM.
+
+**Using `flushSync` is uncommon, and using it often can significantly hurt the performance of your app.** If your app only uses React APIs, and does not integrate with third-party libraries, `flushSync` should be unnecessary.
+
+However, it can be helpful for integrating with third-party code like browser APIs.
+
+Some browser APIs expect results inside of callbacks to be written to the DOM synchronously, by the end of the callback, so the browser can do something with the rendered DOM. In most cases, React handles this for you automatically. But in some cases it may be necessary to break outside of React and force a synchronous update.
+
+For example, the browser `onbeforeprint` API allows you to change the page immediately before the print dialog opens. This is useful for applying custom print styles that allow the document to display better for printing.
+
+In the example below, you use `flushSync` inside of the `onbeforeprint` callback to immediately "flush" the React state to the DOM. By doing this, when the print dialog opens, the state has been updated in `isPrinting` is "yes":   
+
+<Sandpack>
+
+```js App.js active
+import { useState, useEffect } from 'react';
+import { flushSync } from 'react-dom';
+
+export default function PrintApp() {
+  const [isPrinting, setIsPrinting] = useState(false);
+  
+  useEffect(() => {
+    function handleBeforePrint() {
+      flushSync(() => {
+        setIsPrinting(true);
+      })
+    }
+    
+    function handleAfterPrint() {
+      setIsPrinting(false);
+    }
+
+    window.addEventListener('beforeprint', handleBeforePrint);
+    window.addEventListener('afterprint', handleAfterPrint);
+    return () => {
+      window.removeEventListener('beforeprint', handleBeforePrint);
+      window.removeEventListener('afterprint', handleAfterPrint);
+    }
+  }, []);
+  
+  return (
+    <>
+      <h1>isPrinting: {isPrinting ? 'yes' : 'no'}</h1>
+      <button onClick={() => window.print()}>
+        Print
+      </button>
+    </>
+  );
+}
+```
+
+</Sandpack>
+
+If you remove the call to `flushSync`, then when the print dialog will display `isPrinting` as "no". This is because React batches the updates asynchronously and the print dialog is displayed before the state is updated.
+
+<Pitfall>
+
+`flushSync` can significantly hurt performance, and may unexpectedly force pending Suspense boundaries to show their fallback state.
+
+Most of the time, `flushSync` can be avoided, so use `flushSync` as last resort.
+
+</Pitfall>
diff --git a/beta/src/content/reference/react-dom/hydrate.md b/beta/src/content/reference/react-dom/hydrate.md
new file mode 100644
index 000000000..6e590f75e
--- /dev/null
+++ b/beta/src/content/reference/react-dom/hydrate.md
@@ -0,0 +1,201 @@
+---
+title: hydrate
+---
+
+<Deprecated>
+
+This API will be removed in a future major version of React.
+
+In React 18, `hydrate` was replaced by [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot) Using `hydrate` in React 18 will warn that your app will behave as if it’s running React 17. Learn more [here.](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis)
+
+</Deprecated>
+
+<Intro>
+
+`hydrate` lets you display React components inside a browser DOM node whose HTML content was previously generated by [`react-dom/server`](/reference/react-dom/server) in React 17 and below.
+
+```js
+hydrate(reactNode, domNode, callback?)
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `hydrate(reactNode, domNode, callback?)` {/*hydrate*/}
+
+Call `hydrate` in React 17 and below to “attach” React to existing HTML that was already rendered by React in a server environment.
+
+```js
+import { hydrate } from 'react-dom';
+
+hydrate(reactNode, domNode);
+```
+
+React will attach to the HTML that exists inside the `domNode`, and take over managing the DOM inside it. An app fully built with React will usually only have one `hydrate` call with its root component.
+
+[See more examples below.](#usage)
+
+#### Parameters {/*parameters*/}
+
+* `reactNode`: The "React node" used to render the existing HTML. This will usually be a piece of JSX like `<App />` which was rendered with a `ReactDOM Server` method such as `renderToString(<App />)` in React 17.
+
+* `domNode`: A [DOM element](https://developer.mozilla.org/en-US/docs/Web/API/Element) that was rendered as the root element on the server.
+
+* **optional**: `callback`: A function. If passed, React will call it after your component is hydrated.
+
+#### Returns {/*returns*/}
+
+`hydrate` returns null.
+
+#### Caveats {/*caveats*/}
+* `hydrate` expects the rendered content to be identical with the server-rendered content. React can patch up differences in text content, but you should treat mismatches as bugs and fix them.
+* In development mode, React warns about mismatches during hydration. There are no guarantees that attribute differences will be patched up in case of mismatches. This is important for performance reasons because in most apps, mismatches are rare, and so validating all markup would be prohibitively expensive.
+* You'll likely have only one `hydrate` call in your app. If you use a framework, it might do this call for you.
+* If your app is client-rendered with no HTML rendered already, using `hydrate()` is not supported. Use [render()](/reference/react-dom/render) (for React 17 and below) or [createRoot()](/reference/react-dom/client/createRoot) (for React 18+) instead.
+
+---
+
+## Usage {/*usage*/}
+
+Call `hydrate` to attach a <CodeStep step={1}>React component</CodeStep> into a server-rendered <CodeStep step={2}>browser DOM node</CodeStep>.
+
+```js [[1, 3, "document.getElementById('root')"], [2, 3, "<App />"]]
+import {hydrate} from 'react-dom';
+
+hydrate(<App />, document.getElementById('root'));
+````
+
+Using `hydrate()` to render a client-only app (an app without server-rendered HTML) is not supported. Use [`render()`](/reference/react-dom/render) (in React 17 and below) or [`createRoot()`](/reference/react-dom/client/createRoot) (in React 18+) instead.
+
+### Hydrating server-rendered HTML {/*hydrating-server-rendered-html*/}
+
+In React, "hydration" is how React "attaches" to existing HTML that was already rendered by React in a server environment. During hydration, React will attempt to attach event listeners to the existing markup and take over rendering the app on the client.
+
+In apps fully built with React, **you will usually only hydrate one "root", once at startup for your entire app**.
+
+<Sandpack>
+
+```html public/index.html
+<!--
+  HTML content inside <div id="root">...</div>
+  was generated from App by react-dom/server.
+-->
+<div id="root"><h1>Hello, world!</h1></div>
+```
+
+```js index.js active
+import './styles.css';
+import {hydrate} from 'react-dom';
+import App from './App.js';
+
+hydrate(<App />, document.getElementById('root'));
+```
+
+```js App.js
+export default function App() {
+  return <h1>Hello, world!</h1>;
+}
+```
+
+</Sandpack>
+
+Usually you shouldn't need to call `hydrate` again or to call it in more places. From this point on, React will be managing the DOM of your application. If you want to update the UI, your components can do this by [using state.](/reference/react/useState)
+
+For more information on hydration, see the docs for [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot)
+
+---
+
+### Suppressing unavoidable hydration mismatch errors {/*suppressing-unavoidable-hydration-mismatch-errors*/}
+
+If a single element’s attribute or text content is unavoidably different between the server and the client (for example, a timestamp), you may silence the hydration mismatch warning.
+
+To silence hydration warnings on an element, add `suppressHydrationWarning={true}`:
+
+<Sandpack>
+
+```html public/index.html
+<!--
+  HTML content inside <div id="root">...</div>
+  was generated from App by react-dom/server.
+-->
+<div id="root"><h1>Current Date: 01/01/2020</h1></div>
+```
+
+```js index.js
+import './styles.css';
+import {hydrate} from 'react-dom';
+import App from './App.js';
+
+hydrate(<App />, document.getElementById('root'));
+```
+
+```js App.js active
+export default function App() {
+  return (
+    <h1 suppressHydrationWarning={true}>
+      Current Date: {new Date().toLocaleDateString()}
+    </h1>
+  );
+}
+```
+
+</Sandpack>
+
+This only works one level deep, and is intended to be an escape hatch. Don’t overuse it. Unless it’s text content, React still won’t attempt to patch it up, so it may remain inconsistent until future updates.
+
+---
+
+### Handling different client and server content {/*handling-different-client-and-server-content*/}
+
+If you intentionally need to render something different on the server and the client, you can do a two-pass rendering. Components that render something different on the client can read a [state variable](/reference/react/useState) like `isClient`, which you can set to `true` in an [effect](/reference/react/useEffect):
+
+<Sandpack>
+
+```html public/index.html
+<!--
+  HTML content inside <div id="root">...</div>
+  was generated from App by react-dom/server.
+-->
+<div id="root"><h1>Is Server</h1></div>
+```
+
+```js index.js
+import './styles.css';
+import {hydrate} from 'react-dom';
+import App from './App.js';
+
+hydrate(<App />, document.getElementById('root'));
+```
+
+```js App.js active
+import { useState, useEffect } from "react";
+
+export default function App() {
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  return (
+    <h1>
+      {isClient ? 'Is Client' : 'Is Server'}
+    </h1>
+  );
+}
+```
+
+</Sandpack>
+
+This way the initial render pass will render the same content as the server, avoiding mismatches, but an additional pass will happen synchronously right after hydration.
+
+<Pitfall>
+
+This approach makes hydration slower because your components have to render twice. Be mindful of the user experience on slow connections. The JavaScript code may load significantly later than the initial HTML render, so rendering a different UI immediately after hydration may also feel jarring to the user.
+
+</Pitfall>
diff --git a/beta/src/content/reference/react-dom/index.md b/beta/src/content/reference/react-dom/index.md
new file mode 100644
index 000000000..5b2648c18
--- /dev/null
+++ b/beta/src/content/reference/react-dom/index.md
@@ -0,0 +1,43 @@
+---
+title: React DOM APIs
+---
+
+<Intro>
+
+The `react-dom` package contains methods that are only supported for the web applications (which run in the browser DOM environment). They are not supported for React Native.
+
+</Intro>
+
+---
+
+## APIs {/*apis*/}
+
+These APIs can be imported from your components. They are rarely used:
+
+* [`createPortal`](/reference/react-dom/createPortal) lets you render child components in a different part of the DOM tree.
+* [`flushSync`](/reference/react-dom/flushSync) lets you force React to flush a state update and update the DOM synchronously.
+
+---
+
+## Entry points {/*entry-points*/}
+
+The `react-dom` package provides two additional entry points:
+
+* [`react-dom/client`](/reference/react-dom/client) contains APIs to render React components on the client (in the browser).
+* [`react-dom/server`](/reference/react-dom/server) contains APIs to render React components on the server.
+
+---
+
+## Deprecated APIs {/*deprecated-apis*/}
+
+<Deprecated>
+
+These APIs will be removed in a future major version of React.
+
+</Deprecated>
+
+* [`findDOMNode`](/reference/react-dom/findDOMNode) finds the closest DOM node corresponding to a class component instance.
+* [`hydrate`](/reference/react-dom/hydrate) mounts a tree into the DOM created from server HTML. Deprecated in favor of [`hydrateRoot`](/reference/react-dom/client/hydrateRoot).
+* [`render`](/reference/react-dom/render) mounts a tree into the DOM. Deprecated in favor of [`createRoot`](/reference/react-dom/client/createRoot).
+* [`unmountComponentAtNode`](/reference/react-dom/unmountComponentAtNode) unmounts a tree from the DOM. Deprecated in favor of [`root.unmount()`.](/reference/react-dom/client/createRoot#root-unmount)
+
diff --git a/beta/src/content/reference/react-dom/render.md b/beta/src/content/reference/react-dom/render.md
new file mode 100644
index 000000000..15cf970a3
--- /dev/null
+++ b/beta/src/content/reference/react-dom/render.md
@@ -0,0 +1,218 @@
+---
+title: render
+---
+
+<Deprecated>
+
+This API will be removed in a future major version of React.
+
+In React 18, `render` was replaced by [`createRoot`.](/reference/react-dom/client/createRoot) Using `render` in React 18 will warn that your app will behave as if it’s running React 17. Learn more [here.](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis)
+
+</Deprecated>
+
+<Intro>
+
+`render` renders a piece of [JSX](/learn/writing-markup-with-jsx) ("React node") into a browser DOM node.
+
+```js
+render(reactNode, domNode, callback?)
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `render(reactNode, domNode, callback?)` {/*render*/}
+
+Call `render` to display a React component inside a browser DOM element.
+
+```js
+import { render } from 'react-dom';
+
+const domNode = document.getElementById('root');
+render(<App />, domNode);
+```
+
+React will display `<App />` in the `domNode`, and take over managing the DOM inside it.
+
+An app fully built with React will usually only have one `render` call with its root component.  A page that uses "sprinkles" of React for parts of the page may have as many `render` calls as needed.
+
+[See more examples below.](#usage)
+
+#### Parameters {/*parameters*/}
+
+* `reactNode`: A *React node* that you want to display. This will usually be a piece of JSX like `<App />`, but you can also pass a React element constructed with [`createElement()`](/reference/react/createElement), a string, a number, `null`, or `undefined`. 
+
+* `domNode`: A [DOM element.](https://developer.mozilla.org/en-US/docs/Web/API/Element) React will display the `reactNode` you pass inside this DOM element. From this moment, React will manage the DOM inside the `domNode` and update it when your React tree changes.
+
+* **optional** `callback`: A function. If passed, React will call it after your component is placed into the DOM.
+
+
+#### Returns {/*returns*/}
+
+`render` usually returns `null`. However, if the `reactNode` you pass is a *class component*, then it will return an instance of that component.
+
+#### Caveats {/*caveats*/}
+
+* In React 18, `render` was replaced by [`createRoot`.](/reference/react-dom/client/createRoot) Please use `createRoot` for React 18 and beyond.
+
+* The first time you call `render`, React will clear all the existing HTML content inside the `domNode` before rendering the React component into it. If your `domNode` contains HTML generated by React on the server or during the build, use [`hydrate()`](/reference/react-dom/hydrate) instead, which attaches the event handlers to the existing HTML.
+
+* If you call `render` on the same `domNode` more than once, React will update the DOM as necessary to reflect the latest JSX you passed. React will decide which parts of the DOM can be reused and which need to be recreated by ["matching it up"](/learn/preserving-and-resetting-state) with the previously rendered tree. Calling `render` on the same `domNode` again is similar to calling the [`set` function](/reference/react/useState#setstate) on the root component: React avoids unnecessary DOM updates.
+
+* If your app is fully built with React, you'll likely have only one `render` call in your app. (If you use a framework, it might do this call for you.) When you want to render a piece of JSX in a different part of the DOM tree that isn't a child of your component (for example, a modal or a tooltip), use [`createPortal`](/reference/react-dom/createPortal) instead of `render`.
+
+---
+
+## Usage {/*usage*/}
+
+Call `render` to display a <CodeStep step={1}>React component</CodeStep> inside a <CodeStep step={2}>browser DOM node</CodeStep>.
+
+```js [[1, 4, "<App />"], [2, 4, "document.getElementById('root')"]]
+import {render} from 'react-dom';
+import App from './App.js';
+
+render(<App />, document.getElementById('root'));
+````
+
+### Rendering the root component {/*rendering-the-root-component*/}
+
+In apps fully built with React, **you will usually only do this once at startup**--to render the "root" component.
+
+<Sandpack>
+
+```js index.js active
+import './styles.css';
+import {render} from 'react-dom';
+import App from './App.js';
+
+render(<App />, document.getElementById('root'));
+```
+
+```js App.js
+export default function App() {
+  return <h1>Hello, world!</h1>;
+}
+```
+
+</Sandpack>
+
+Usually you shouldn't need to call `render` again or to call it in more places. From this point on, React will be managing the DOM of your application. If you want to update the UI, your components can do this by [using state.](/reference/react/useState)
+
+---
+
+### Rendering multiple roots {/*rendering-multiple-roots*/}
+
+If your page [isn't fully built with React](/learn/add-react-to-a-website), call `render` for each top-level piece of UI managed by React.
+
+<Sandpack>
+
+```html public/index.html
+<nav id="navigation"></nav>
+<main>
+  <p>This paragraph is not rendered by React (open index.html to verify).</p>
+  <section id="comments"></section>
+</main>
+```
+
+```js index.js active
+import './styles.css';
+import { render } from 'react-dom';
+import { Comments, Navigation } from './Components.js';
+
+render(
+  <Navigation />,
+  document.getElementById('navigation')
+);
+
+render(
+  <Comments />,
+  document.getElementById('comments')
+);
+```
+
+```js Components.js
+export function Navigation() {
+  return (
+    <ul>
+      <NavLink href="/">Home</NavLink>
+      <NavLink href="/about">About</NavLink>
+    </ul>
+  );
+}
+
+function NavLink({ href, children }) {
+  return (
+    <li>
+      <a href={href}>{children}</a>
+    </li>
+  );
+}
+
+export function Comments() {
+  return (
+    <>
+      <h2>Comments</h2>
+      <Comment text="Hello!" author="Sophie" />
+      <Comment text="How are you?" author="Sunil" />
+    </>
+  );
+}
+
+function Comment({ text, author }) {
+  return (
+    <p>{text} — <i>{author}</i></p>
+  );
+}
+```
+
+```css
+nav ul { padding: 0; margin: 0; }
+nav ul li { display: inline-block; margin-right: 20px; }
+```
+
+</Sandpack>
+
+You can destroy the rendered trees with [`unmountComponentAtNode()`.](/reference/react-dom/unmountComponentAtNode)
+
+---
+
+### Updating the rendered tree {/*updating-the-rendered-tree*/}
+
+You can call `render` more than once on the same DOM node. As long as the component tree structure matches up with what was previously rendered, React will [preserve the state.](/learn/preserving-and-resetting-state) Notice how you can type in the input, which means that the updates from repeated `render` calls every second in this example are not destructive:
+
+<Sandpack>
+
+```js index.js active
+import {render} from 'react-dom';
+import './styles.css';
+import App from './App.js';
+
+let i = 0;
+setInterval(() => {
+  render(
+    <App counter={i} />,
+    document.getElementById('root')
+  );
+  i++;
+}, 1000);
+```
+
+```js App.js
+export default function App({counter}) {
+  return (
+    <>
+      <h1>Hello, world! {counter}</h1>
+      <input placeholder="Type something here" />
+    </>
+  );
+}
+```
+
+</Sandpack>
+
+It is uncommon to call `render` multiple times. Usually, you'll [update state](/reference/react/useState) inside one of the components instead.
diff --git a/beta/src/content/reference/react-dom/server/index.md b/beta/src/content/reference/react-dom/server/index.md
new file mode 100644
index 000000000..9e8703f3a
--- /dev/null
+++ b/beta/src/content/reference/react-dom/server/index.md
@@ -0,0 +1,49 @@
+---
+title: Server React DOM APIs
+---
+
+<Intro>
+
+The `react-dom/server` APIs let you render React components to HTML on the server. These APIs are only used on the server at the top level of your app to generate the initial HTML. A [framework](/learn/start-a-new-react-project#building-with-a-full-featured-framework) may call them for you. Most of your components don't need to import or use them.
+
+</Intro>
+
+---
+
+## Server APIs for Node.js Streams {/*server-apis-for-nodejs-streams*/}
+
+These methods are only available in the environments with [Node.js Streams:](https://nodejs.org/api/stream.html)
+
+* [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream) renders a React tree to a pipeable [Node.js Stream.](https://nodejs.org/api/stream.html)
+* [`renderToStaticNodeStream`](/reference/react-dom/server/renderToStaticNodeStream) renders a non-interactive React tree to a [Node.js Readable Stream.](https://nodejs.org/api/stream.html#readable-streams)
+
+---
+
+## Server APIs for Web Streams {/*server-apis-for-web-streams*/}
+
+These methods are only available in the environments with [Web Streams](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API), which includes browsers, Deno, and some modern edge runtimes:
+
+* [`renderToReadableStream`](/reference/react-dom/server/renderToReadableStream) renders a React tree to a [Readable Web Stream.](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream)
+
+---
+
+## Server APIs for non-streaming environments {/*server-apis-for-non-streaming-environments*/}
+
+These methods can be used in the environments that don't support streams:
+
+* [`renderToString`](/reference/react-dom/server/renderToString) renders a React tree to a string.
+* [`renderToStaticMarkup`](/reference/react-dom/server/renderToStaticMarkup) renders a non-interactive React tree to a string.
+
+They have limited functionality compared to the streaming APIs.
+
+---
+
+## Deprecated server APIs {/*deprecated-server-apis*/}
+
+<Deprecated>
+
+These APIs will be removed in a future major version of React.
+
+</Deprecated>
+
+* [`renderToNodeStream`](/reference/react-dom/server/renderToNodeStream) renders a React tree to a [Node.js Readable stream.](https://nodejs.org/api/stream.html#readable-streams) (Deprecated.)
diff --git a/beta/src/content/reference/react-dom/server/renderToNodeStream.md b/beta/src/content/reference/react-dom/server/renderToNodeStream.md
new file mode 100644
index 000000000..a4ab2e570
--- /dev/null
+++ b/beta/src/content/reference/react-dom/server/renderToNodeStream.md
@@ -0,0 +1,76 @@
+---
+title: renderToNodeStream
+---
+
+<Deprecated>
+
+This API will be removed in a future major version of React. Use [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream) instead.
+
+</Deprecated>
+
+<Intro>
+
+`renderToNodeStream` renders a React tree to a [Node.js Readable Stream.](https://nodejs.org/api/stream.html#readable-streams)
+
+```js
+const stream = renderToNodeStream(reactNode)
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `renderToNodeStream(reactNode)` {/*rendertonodestream*/}
+
+On the server, call `renderToNodeStream` to get a [Node.js Readable Stream](https://nodejs.org/api/stream.html#readable-streams) which you can pipe into the response.
+
+```js
+import { renderToNodeStream } from 'react-dom/server';
+
+const stream = renderToNodeStream(<App />);
+stream.pipe(response);
+```
+
+On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to make the server-generated HTML interactive.
+
+[See more examples below.](#usage)
+
+#### Parameters {/*parameters*/}
+
+* `reactNode`: A React node you want to render to HTML. For example, a JSX element like `<App />`.
+
+#### Returns {/*returns*/}
+
+A [Node.js Readable Stream](https://nodejs.org/api/stream.html#readable-streams) that outputs an HTML string.
+
+#### Caveats {/*caveats*/}
+
+* This method will wait for all [Suspense boundaries](/reference/react/Suspense) to complete before returning any output.
+
+* As of React 18, this method buffers all of its output, so it doesn't actually provide any streaming benefits. This is why it's recommended that you migrate to [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream) instead.
+
+* The returned stream is a byte stream encoded in utf-8. If you need a stream in another encoding, take a look at a project like [iconv-lite](https://www.npmjs.com/package/iconv-lite), which provides transform streams for transcoding text.
+
+---
+
+## Usage {/*usage*/}
+
+### Rendering a React tree as HTML to a Node.js Readable Stream {/*rendering-a-react-tree-as-html-to-a-nodejs-readable-stream*/}
+
+Call `renderToNodeStream` to get a [Node.js Readable Stream](https://nodejs.org/api/stream.html#readable-streams) which you can pipe to your server response:
+
+```js {5-6}
+import { renderToNodeStream } from 'react-dom/server';
+
+// The route handler syntax depends on your backend framework
+app.use('/', (request, response) => {
+  const stream = renderToNodeStream(<App />);
+  stream.pipe(response);
+});
+```
+
+The stream will produce the initial non-interactive HTML output of your React components. On the client, you will need to call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to *hydrate* that server-generated HTML and make it interactive.
diff --git a/beta/src/content/reference/react-dom/server/renderToPipeableStream.md b/beta/src/content/reference/react-dom/server/renderToPipeableStream.md
new file mode 100644
index 000000000..06426734c
--- /dev/null
+++ b/beta/src/content/reference/react-dom/server/renderToPipeableStream.md
@@ -0,0 +1,605 @@
+---
+title: renderToPipeableStream
+---
+
+<Intro>
+
+`renderToPipeableStream` renders a React tree to a pipeable [Node.js Stream.](https://nodejs.org/api/stream.html)
+
+```js
+const { pipe, abort } = renderToPipeableStream(reactNode, options?)
+```
+
+</Intro>
+
+<InlineToc />
+
+<Note>
+
+This API is specific to Node.js. Environments with [Web Streams,](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) like Deno and modern edge runtimes, should use [`renderToReadableStream`](/reference/react-dom/server/renderToReadableStream) instead.
+
+</Note>
+
+---
+
+## Reference {/*reference*/}
+
+### `renderToPipeableStream(reactNode, options)` {/*rendertopipeablestream*/}
+
+Call `renderToPipeableStream` to render your React tree as HTML into a [Node.js Stream.](https://nodejs.org/api/stream.html#writable-streams)
+
+```js
+import { renderToPipeableStream } from 'react-dom/server';
+
+const { pipe } = renderToPipeableStream(<App />, {
+  bootstrapScripts: ['/main.js'],
+  onShellReady() {
+    response.setHeader('content-type', 'text/html');
+    pipe(response);
+  }
+});
+```
+
+On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to make the server-generated HTML interactive.
+
+[See more examples below.](#usage)
+
+#### Parameters {/*parameters*/}
+
+* `reactNode`: A React node you want to render to HTML. For example, a JSX element like `<App />`. It is expected to represent the entire document, so the `App` component should render the `<html>` tag.
+
+* **optional** `options`: An object with streaming options.
+  * **optional** `bootstrapScriptContent`: If specified, this string will be placed in an inline `<script>` tag.
+  * **optional** `bootstrapScripts`: An array of string URLs for the `<script>` tags to emit on the page. Use this to include the `<script>` that calls [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot) Omit it if you don't want to run React on the client at all.
+  * **optional** `bootstrapModules`: Like `bootstrapScripts`, but emits [`<script type="module">`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) instead.
+  * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix as passed to [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot#parameters)
+  * **optional** `namespaceURI`: A string with the root [namespace URI](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS#important_namespace_uris) for the stream. Defaults to regular HTML. Pass `'http://www.w3.org/2000/svg'` for SVG or `'http://www.w3.org/1998/Math/MathML'` for MathML.
+  * **optional** `nonce`: A [`nonce`](http://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#nonce) string to allow scripts for [`script-src` Content-Security-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src).
+  * **optional** `onAllReady`: A callback that fires when all rendering is complete, including both the [shell](#specifying-what-goes-into-the-shell) and all additional [content.](#streaming-more-content-as-it-loads) You can use this instead of `onShellReady` [for crawlers and static generation.](#waiting-for-all-content-to-load-for-crawlers-and-static-generation) If you start streaming here, you won't get any progressive loading. The stream will contain the final HTML.
+  * **optional** `onError`: A callback that fires whenever there is a server error, whether [recoverable](#recovering-from-errors-outside-the-shell) or [not.](#recovering-from-errors-inside-the-shell) By default, this only calls `console.error`. If you override it to [log crash reports,](#logging-crashes-on-the-server) make sure that you still call `console.error`. You can also use it to [adjust the status code](#setting-the-status-code) before the shell is emitted.
+  * **optional** `onShellReady`: A callback that fires right after the [initial shell](#specifying-what-goes-into-the-shell) has been rendered. You can [set the status code](#setting-the-status-code) and call `pipe` here to start streaming. React will [stream the additional content](#streaming-more-content-as-it-loads) after the shell along with the inline `<script>` tags that place that replace the HTML loading fallbacks with the content.
+  * **optional** `onShellError`: A callback that fires if there was an error rendering the initial shell.  It receives the error as an argument. No bytes were emitted from the stream yet, and neither `onShellReady` nor `onAllReady` will get called, so you can [output a fallback HTML shell.](#recovering-from-errors-inside-the-shell)
+  * **optional** `progressiveChunkSize`: The number of bytes in a chunk. [Read more about the default heuristic.](https://github.com/facebook/react/blob/14c2be8dac2d5482fda8a0906a31d239df8551fc/packages/react-server/src/ReactFizzServer.js#L210-L225)
+
+
+#### Returns {/*returns*/}
+
+`renderToPipeableStream` returns an object with two methods:
+
+* `pipe` outputs the HTML into the provided [Writable Node.js Stream.](https://nodejs.org/api/stream.html#writable-streams) Call `pipe` in `onShellReady` if you want to enable streaming, or in `onAllReady` for crawlers and static generation.
+* `abort` lets you [abort server rendering](#aborting-server-rendering) and render the rest on the client.
+
+---
+
+## Usage {/*usage*/}
+
+### Rendering a React tree as HTML to a Node.js Stream {/*rendering-a-react-tree-as-html-to-a-nodejs-stream*/}
+
+Call `renderToPipeableStream` to render your React tree as HTML into a [Node.js Stream:](https://nodejs.org/api/stream.html#writable-streams)
+
+```js [[1, 5, "<App />"], [2, 6, "['/main.js']"]]
+import { renderToPipeableStream } from 'react-dom/server';
+
+// The route handler syntax depends on your backend framework
+app.use('/', (request, response) => {
+  const { pipe } = renderToPipeableStream(<App />, {
+    bootstrapScripts: ['/main.js'],
+    onShellReady() {
+      response.setHeader('content-type', 'text/html');
+      pipe(response);
+    }
+  });
+});
+```
+
+Along with the <CodeStep step={1}>root component</CodeStep>, you need to provide a list of <CodeStep step={2}>boostrap `<script>` paths</CodeStep>. Your root component should return **the entire document including the root `<html>` tag.** For example, it might look like this:
+
+```js [[1, 1, "App"]]
+export default function App() {
+  return (
+    <html>
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="stylesheet" href="/styles.css"></link>
+        <title>My app</title>
+      </head>
+      <body>
+        <Router />
+      </body>
+    </html>
+  );
+}
+```
+
+React will automatically inject the [doctype](https://developer.mozilla.org/en-US/docs/Glossary/Doctype) and your <CodeStep step={2}>bootstrap `<script>` tags</CodeStep> into the resulting HTML stream:
+
+```html [[2, 5, "/main.js"]]
+<!DOCTYPE html>
+<html>
+  <!-- ... HTML from your components ... -->
+</html>
+<script src="/main.js" async=""></script>
+```
+
+On the client, your bootstrap script should [hydrate the entire `document` with a call to `hydrateRoot`:](/reference/react-dom/client/hydrateRoot#hydrating-an-entire-document)
+
+```js [[1, 4, "<App />"]]
+import {hydrateRoot} from 'react-dom/client';
+import App from './App.js';
+
+hydrateRoot(document, <App />);
+```
+
+This will attach event listeners to the server-generated HTML and make it interactive.
+
+<DeepDive>
+
+#### Reading CSS and JS asset paths from the build output {/*reading-css-and-js-asset-paths-from-the-build-output*/}
+
+The final asset URLs (like JavaScript and CSS files) are often hashed after the build. For example, instead of `styles.css` you might end up with `styles.123456.css`. Hashing static asset filenames guarantees that every distinct build of the same asset will have a different filename. This is useful because it lets you safely enable long-term caching for static assets: a file with a certain name would never change content.
+
+However, if you don't know the asset URLs until after the build, there's no way for you to put them in the source code. For example, hardcoding `"/styles.css"` into JSX like earlier wouldn't work. To keep them out of your source code, your root component can read the real filenames from a map passed as a prop:
+
+```js {1,6}
+export default function App({ assetMap }) {
+  return (
+    <html>
+      <head>
+        ...
+        <link rel="stylesheet" href={assetMap['styles.css']}></link>
+        ...
+      </head>
+      ...
+    </html>
+  );
+}
+```
+
+On the server, render `<App assetMap={assetMap} />` and pass your `assetMap` with the asset URLs:
+
+```js {1-5,8,9}
+// You'd need to get this JSON from your build tooling, e.g. read it from the build output.
+const assetMap = {
+  'styles.css': '/styles.123456.css',
+  'main.js': '/main.123456.js'
+};
+
+app.use('/', (request, response) => {
+  const { pipe } = renderToPipeableStream(<App assetMap={assetMap} />, {
+    bootstrapScripts: [assetMap['main.js']],
+    onShellReady() {
+      response.setHeader('content-type', 'text/html');
+      pipe(response);
+    }
+  });
+});
+```
+
+Since your server is now rendering `<App assetMap={assetMap} />`, you need to render it with `assetMap` on the client too to avoid hydration errors. You can serialize and pass `assetMap` to the client like this:
+
+```js {9-10}
+// You'd need to get this JSON from your build tooling.
+const assetMap = {
+  'styles.css': '/styles.123456.css',
+  'main.js': '/main.123456.js'
+};
+
+app.use('/', (request, response) => {
+  const { pipe } = renderToPipeableStream(<App assetMap={assetMap} />, {
+    // Careful: It's safe to stringify() this because this data isn't user-generated.
+    bootstrapScriptContent: `window.assetMap = ${JSON.stringify(assetMap)};`,
+    bootstrapScripts: [assetMap['main.js']],
+    onShellReady() {
+      response.setHeader('content-type', 'text/html');
+      pipe(response);
+    }
+  });
+});
+```
+
+In the example above, the `bootstrapScriptContent` option adds an extra inline `<script>` tag that sets the global `window.assetMap` variable on the client. This lets the client code read the same `assetMap`:
+
+```js {4}
+import {hydrateRoot} from 'react-dom/client';
+import App from './App.js';
+
+hydrateRoot(document, <App assetMap={window.assetMap} />);
+```
+
+Both client and server render `App` with the same `assetMap` prop, so there are no hydration errors.
+
+</DeepDive>
+
+---
+
+### Streaming more content as it loads {/*streaming-more-content-as-it-loads*/}
+
+Streaming allows the user to start seeing the content even before all the data has loaded on the server. For example, consider a profile page that shows a cover, a sidebar with friends and photos, and a list of posts:
+
+```js
+function ProfilePage() {
+  return (
+    <ProfileLayout>
+      <ProfileCover />
+      <Sidebar>
+        <Friends />
+        <Photos />
+      </Sidebar>
+      <Posts />
+    </ProfileLayout>
+  );
+}
+```
+
+Imagine that loading data for `<Posts />` takes some time. Ideally, you'd want to show the rest of the profile page content to the user without waiting for the posts. To do this, [wrap `Posts` in a `<Suspense>` boundary:](/reference/react/Suspense#displaying-a-fallback-while-content-is-loading)
+
+```js {9,11}
+function ProfilePage() {
+  return (
+    <ProfileLayout>
+      <ProfileCover />
+      <Sidebar>
+        <Friends />
+        <Photos />
+      </Sidebar>
+      <Suspense fallback={<PostsGlimmer />}>
+        <Posts />
+      </Suspense>
+    </ProfileLayout>
+  );
+}
+```
+
+This way, you tell React to start streaming the HTML before `Posts` loads its data. React will send the HTML for the loading fallback (`PostsGlimmer`) first, and then, when `Posts` finishes loading its data, React will send the remaining HTML along with an inline `<script>` tag that replaces the loading fallback with that HTML. From the user's perspective, the page will first appear with the `PostsGlimmer`, and then it will be replaced by the `Posts`.
+
+You can further [nest `<Suspense>` boundaries](/reference/react/Suspense#revealing-nested-content-as-it-loads) to create a more granular loading sequence:
+
+```js {5,13}
+function ProfilePage() {
+  return (
+    <ProfileLayout>
+      <ProfileCover />
+      <Suspense fallback={<BigSpinner />}>
+        <Sidebar>
+          <Friends />
+          <Photos />
+        </Sidebar>
+        <Suspense fallback={<PostsGlimmer />}>
+          <Posts />
+        </Suspense>
+      </Suspense>
+    </ProfileLayout>
+  );
+}
+```
+
+In this example, React can start streaming the page even earlier. Only `ProfileLayout` and `ProfileCover` must finish rendering first because they are not wrapped in any `<Suspense>` boundary. However, if `Sidebar`, `Friends`, or `Photos` need to load some data, React will send the HTML for the `BigSpinner` fallback instead. Then, as enough data becomes available, more content will continue to be revealed until all of it becomes visible.
+
+Streaming does not need to wait for React itself to load in the browser, or for your app to become interactive. The HTML content from the server will get progressively revealed before any of the `<script>` tags have loaded.
+
+[Read more about how streaming HTML works.](https://github.com/reactwg/react-18/discussions/37)
+
+<Note>
+
+**Only Suspense-enabled data sources will activate the Suspense component.** They include:
+
+- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/advanced-features/react-18)
+- Lazy-loading component code with [`lazy`](/reference/react/lazy)
+
+Suspense **does not** detect when data is fetched inside an Effect or event handler.
+
+The exact way you would load data in the `Posts` component above depends on your framework. If you use a Suspense-enabled framework, you'll find the details in its data fetching documentation.
+
+Suspense-enabled data fetching without the use of an opinionated framework is not yet supported. The requirements for implementing a Suspense-enabled data source are unstable and undocumented. An official API for integrating data sources with Suspense will be released in a future version of React. 
+
+</Note>
+
+---
+
+### Specifying what goes into the shell {/*specifying-what-goes-into-the-shell*/}
+
+The part of your app outside of any `<Suspense>` boundaries is called *the shell:*
+
+```js {3-5,13,14}
+function ProfilePage() {
+  return (
+    <ProfileLayout>
+      <ProfileCover />
+      <Suspense fallback={<BigSpinner />}>
+        <Sidebar>
+          <Friends />
+          <Photos />
+        </Sidebar>
+        <Suspense fallback={<PostsGlimmer />}>
+          <Posts />
+        </Suspense>
+      </Suspense>
+    </ProfileLayout>
+  );
+}
+```
+
+It determines the earliest loading state that the user may see:
+
+```js {3-5,13
+<ProfileLayout>
+  <ProfileCover />
+  <BigSpinner />
+</ProfileLayout>
+```
+
+If you wrap the whole app into a `<Suspense>` boundary at the root, the shell will only contain that spinner. However, that's not a pleasant user experience because seeing a big spinner on the screen can feel slower and more annoying than waiting a bit more and seeing the real layout. This is why usually you'll want to place the `<Suspense>` boundaries so that the shell feels *minimal but complete*--like a skeleton of the entire page layout.
+
+The `onShellReady` callback fires when the entire shell has been rendered. Usually, you'll start streaming then:
+
+```js {3-6}
+const { pipe } = renderToPipeableStream(<App />, {
+  bootstrapScripts: ['/main.js'],
+  onShellReady() {
+    response.setHeader('content-type', 'text/html');
+    pipe(response);
+  }
+});
+```
+
+By the time `onShellReady` fires, components in nested `<Suspense>` boundaries might still be loading data.
+
+---
+
+### Logging crashes on the server {/*logging-crashes-on-the-server*/}
+
+By default, all errors on the server are logged to console. You can override this behavior to log crash reports:
+
+```js {7-10}
+const { pipe } = renderToPipeableStream(<App />, {
+  bootstrapScripts: ['/main.js'],
+  onShellReady() {
+    response.setHeader('content-type', 'text/html');
+    pipe(response);
+  },
+  onError(error) {
+    console.error(error);
+    logServerCrashReport(error);
+  }
+});
+```
+
+If you provide a custom `onError` implementation, don't forget to also log errors to the console like above.
+
+---
+
+### Recovering from errors inside the shell {/*recovering-from-errors-inside-the-shell*/}
+
+In this example, the shell contains `ProfileLayout`, `ProfileCover`, and `PostsGlimmer`:
+
+```js {3-5,7-8}
+function ProfilePage() {
+  return (
+    <ProfileLayout>
+      <ProfileCover />
+      <Suspense fallback={<PostsGlimmer />}>
+        <Posts />
+      </Suspense>
+    </ProfileLayout>
+  );
+}
+```
+
+If an error occurs while rendering those components, React won't have any meaningful HTML to send to the client. Override `onShellError` to send a fallback HTML that doesn't rely on server rendering as the last resort:
+
+```js {7-11}
+const { pipe } = renderToPipeableStream(<App />, {
+  bootstrapScripts: ['/main.js'],
+  onShellReady() {
+    response.setHeader('content-type', 'text/html');
+    pipe(response);
+  },
+  onShellError(error) {
+    response.statusCode = 500;
+    response.setHeader('content-type', 'text/html');
+    response.send('<h1>Something went wrong</h1>'); 
+  },
+  onError(error) {
+    console.error(error);
+    logServerCrashReport(error);
+  }
+});
+```
+
+If there is an error while generating the shell, both `onError` and `onShellError` will fire. Use `onError` for error reporting and use `onShellError` to send the fallback HTML document. Your fallback HTML does not have to be an error page. For example, you can include an alternative shell that tries to render your app on the client only.
+
+---
+
+### Recovering from errors outside the shell {/*recovering-from-errors-outside-the-shell*/}
+
+In this example, the `<Posts />` component is wrapped in `<Suspense>` so it is *not* a part of the shell:
+
+```js {6}
+function ProfilePage() {
+  return (
+    <ProfileLayout>
+      <ProfileCover />
+      <Suspense fallback={<PostsGlimmer />}>
+        <Posts />
+      </Suspense>
+    </ProfileLayout>
+  );
+}
+```
+
+If an error happens in the `Posts` component or somewhere inside it, React will [try to recover from it:](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-server-only-content)
+
+1. It will emit the loading fallback for the closest `<Suspense>` boundary (`PostsGlimmer`) into the HTML.
+2. It will "give up" on trying to render the `Posts` content on the server anymore.
+3. When the JavaScript code loads on the client, React will *retry* rendering the `Posts` component on the client.
+
+If retrying rendering `Posts` on the client *also* fails, React will throw the error on the client. As with all the errors thrown during rendering, the [closest parent error boundary](/reference/react/Component#static-getderivedstatefromerror) determines how to present the error to the user. In practice, this means that the user will see a loading indicator until it is certain that the error is not recoverable.
+
+If retrying rendering `Posts` on the client succeeds, the loading fallback from the server will be replaced with the client rendering output. The user will not know that there was a server error. However, the server `onError` callback and the client [`onRecoverableError`](/reference/react-dom/client/hydrateRoot#hydrateroot) callbacks will fire so that you can get notified about the error.
+
+---
+
+### Setting the status code {/*setting-the-status-code*/}
+
+Streaming introduces a tradeoff. You want to start streaming the page as early as possible so that the user can see the content sooner. However, once you start streaming, you can no longer set the response status code.
+
+By [dividing your app](#specifying-what-goes-into-the-shell) into the shell (above all `<Suspense>` boundaries) and the rest of the content, you've already solved a part of this problem. If the shell errors, you'll get the `onShellError` callback which lets you set the error status code. Otherwise, you know that the app may recover on the client, so the "OK" status code is reasonable.
+
+```js {4}
+const { pipe } = renderToPipeableStream(<App />, {
+  bootstrapScripts: ['/main.js'],
+  onShellReady() {
+    response.statusCode = 200;
+    response.setHeader('content-type', 'text/html');
+    pipe(response);
+  },
+  onShellError(error) {
+    response.statusCode = 500;
+    response.setHeader('content-type', 'text/html');
+    response.send('<h1>Something went wrong</h1>'); 
+  },
+  onError(error) {
+    console.error(error);
+    logServerCrashReport(error);
+  }
+});
+```
+
+If a component *outside* the shell (i.e. inside a `<Suspense>` boundary) throws an error, React will not stop rendering. This means that the `onError` callback will fire, but you will still get `onShellReady` instead of `onShellError`. This is because React will try to recover from that error on the client, [as described above.](#recovering-from-errors-outside-the-shell)
+
+However, if you'd like, you can use the fact that something has errored to set the status code:
+
+```js {1,6,16}
+let didError = false;
+
+const { pipe } = renderToPipeableStream(<App />, {
+  bootstrapScripts: ['/main.js'],
+  onShellReady() {
+    response.statusCode = didError ? 500 : 200;
+    response.setHeader('content-type', 'text/html');
+    pipe(response);
+  },
+  onShellError(error) {
+    response.statusCode = 500;
+    response.setHeader('content-type', 'text/html');
+    response.send('<h1>Something went wrong</h1>'); 
+  },
+  onError(error) {
+    didError = true;
+    console.error(error);
+    logServerCrashReport(error);
+  }
+});
+```
+
+This will only catch errors outside the shell that happened while generating the initial shell content, so it's not exhaustive. If knowing whether an error occurred for some content is critical, you can move it up into the shell.
+
+---
+
+### Handling different errors in different ways {/*handling-different-errors-in-different-ways*/}
+
+You can [create your own `Error` subclasses](https://javascript.info/custom-errors) and use the [`instanceof`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/instanceof) operator to check which error is thrown. For example, you can define a custom `NotFoundError` and throw it from your component. Then your `onError`, `onShellReady`, and `onShellError` callbacks can do something different depending on the error type:
+
+```js {2,4-14,19,24,30}
+let didError = false;
+let caughtError = null;
+
+function getStatusCode() {
+  if (didError) {
+    if (caughtError instanceof NotFoundError) {
+      return 404;
+    } else {
+      return 500;
+    }
+  } else {
+    return 200;
+  }
+}
+
+const { pipe } = renderToPipeableStream(<App />, {
+  bootstrapScripts: ['/main.js'],
+  onShellReady() {
+    response.statusCode = getStatusCode();
+    response.setHeader('content-type', 'text/html');
+    pipe(response);
+  },
+  onShellError(error) {
+   response.statusCode = getStatusCode();
+   response.setHeader('content-type', 'text/html');
+   response.send('<h1>Something went wrong</h1>'); 
+  },
+  onError(error) {
+    didError = true;
+    caughtError = error;
+    console.error(error);
+    logServerCrashReport(error);
+  }
+});
+```
+
+Keep in mind that once you emit the shell and start streaming, you can't change the status code.
+
+---
+
+### Waiting for all content to load for crawlers and static generation {/*waiting-for-all-content-to-load-for-crawlers-and-static-generation*/}
+
+Streaming offers a better user experience because the user can see the content as it becomes available.
+
+However, when a crawler visits your page, or if you're generating the pages at the build time, you might want to let all of the content load first and then produce the final HTML output instead of revealing it progressively.
+
+You can wait for all the content to load using the `onAllReady` callback:
+
+
+```js {2,7,11,18-24}
+let didError = false;
+let isCrawler = // ... depends on your bot detection strategy ...
+
+const { pipe } = renderToPipeableStream(<App />, {
+  bootstrapScripts: ['/main.js'],
+  onShellReady() {
+    if (!isCrawler) {
+      response.statusCode = didError ? 500 : 200;
+      response.setHeader('content-type', 'text/html');
+      pipe(response);
+    }
+  },
+  onShellError(error) {
+    response.statusCode = 500;
+    response.setHeader('content-type', 'text/html');
+    response.send('<h1>Something went wrong</h1>'); 
+  },
+  onAllReady() {
+    if (isCrawler) {
+      response.statusCode = didError ? 500 : 200;
+      response.setHeader('content-type', 'text/html');
+      pipe(response);      
+    }
+  },
+  onError(error) {
+    didError = true;
+    console.error(error);
+    logServerCrashReport(error);
+  }
+});
+```
+
+A regular visitor will get a stream of progressively loaded content. A crawler will receive the final HTML output after all the data loads. However, this also means that the crawler will have to wait for *all* data, some of which might be slow to load or error. Depending on your app, you could choose to send the shell to the crawlers too.
+
+---
+
+### Aborting server rendering {/*aborting-server-rendering*/}
+
+You can force the server rendering to "give up" after a timeout:
+
+```js {1,5-7}
+const { pipe, abort } = renderToPipeableStream(<App />, {
+  // ...
+});
+
+setTimeout(() => {
+  abort();
+}, 10000);
+```
+
+React will flush the remaining loading fallbacks as HTML, and will attempt to render the rest on the client.
diff --git a/beta/src/content/reference/react-dom/server/renderToReadableStream.md b/beta/src/content/reference/react-dom/server/renderToReadableStream.md
new file mode 100644
index 000000000..37025ba20
--- /dev/null
+++ b/beta/src/content/reference/react-dom/server/renderToReadableStream.md
@@ -0,0 +1,621 @@
+---
+title: renderToReadableStream
+---
+
+<Intro>
+
+`renderToReadableStream` renders a React tree to a [Readable Web Stream.](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream)
+
+```js
+const stream = await renderToReadableStream(reactNode, options?)
+```
+
+</Intro>
+
+<InlineToc />
+
+<Note>
+
+This API depends on [Web Streams.](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) For Node.js, use [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream) instead.
+
+</Note>
+
+---
+
+## Reference {/*reference*/}
+
+### `renderToReadableStream(reactNode, options?)` {/*rendertoreadablestream*/}
+
+Call `renderToReadableStream` to render your React tree as HTML into a [Node.js Stream.](https://nodejs.org/api/stream.html#writable-streams)
+
+```js
+import { renderToReadableStream } from 'react-dom/server';
+
+async function handler(request) {
+  const stream = await renderToReadableStream(<App />, {
+    bootstrapScripts: ['/main.js']
+  });
+  return new Response(stream, {
+    headers: { 'content-type': 'text/html' },
+  });
+}
+```
+
+On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to make the server-generated HTML interactive.
+
+[See more examples below.](#usage)
+
+#### Parameters {/*parameters*/}
+
+* `reactNode`: A React node you want to render to HTML. For example, a JSX element like `<App />`. It is expected to represent the entire document, so the `App` component should render the `<html>` tag.
+
+* **optional** `options`: An object with streaming options.
+  * **optional** `bootstrapScriptContent`: If specified, this string will be placed in an inline `<script>` tag.
+  * **optional** `bootstrapScripts`: An array of string URLs for the `<script>` tags to emit on the page. Use this to include the `<script>` that calls [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot) Omit it if you don't want to run React on the client at all.
+  * **optional** `bootstrapModules`: Like `bootstrapScripts`, but emits [`<script type="module">`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) instead.
+  * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix as passed to [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot#parameters)
+  * **optional** `namespaceURI`: A string with the root [namespace URI](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS#important_namespace_uris) for the stream. Defaults to regular HTML. Pass `'http://www.w3.org/2000/svg'` for SVG or `'http://www.w3.org/1998/Math/MathML'` for MathML.
+  * **optional** `nonce`: A [`nonce`](http://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#nonce) string to allow scripts for [`script-src` Content-Security-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src).
+  * **optional** `onError`: A callback that fires whenever there is a server error, whether [recoverable](#recovering-from-errors-outside-the-shell) or [not.](#recovering-from-errors-inside-the-shell) By default, this only calls `console.error`. If you override it to [log crash reports,](#logging-crashes-on-the-server) make sure that you still call `console.error`. You can also use it to [adjust the status code](#setting-the-status-code) before the shell is emitted.
+  * **optional** `progressiveChunkSize`: The number of bytes in a chunk. [Read more about the default heuristic.](https://github.com/facebook/react/blob/14c2be8dac2d5482fda8a0906a31d239df8551fc/packages/react-server/src/ReactFizzServer.js#L210-L225)
+  * **optional** `signal`: An [abort signal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that lets you [abort server rendering](#aborting-server-rendering) and render the rest on the client.
+
+
+#### Returns {/*returns*/}
+
+`renderToReadableStream` returns a Promise:
+
+- If rendering the [shell](#specifying-what-goes-into-the-shell) is successful, that Promise will resolve to a [Readable Web Stream.](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream)
+- If rendering the shell fails, the Promise will be rejected. [Use this to output a fallback shell.](#recovering-from-errors-inside-the-shell)
+
+The returned stream has an additional property:
+
+* `allReady`: A Promise that resolves when all rendering is complete, including both the [shell](#specifying-what-goes-into-the-shell) and all additional [content.](#streaming-more-content-as-it-loads) You can `await stream.allReady` before returning a response [for crawlers and static generation.](#waiting-for-all-content-to-load-for-crawlers-and-static-generation) If you do that, you won't get any progressive loading. The stream will contain the final HTML.
+
+---
+
+## Usage {/*usage*/}
+
+### Rendering a React tree as HTML to a Readable Web Stream {/*rendering-a-react-tree-as-html-to-a-readable-web-stream*/}
+
+Call `renderToReadableStream` to render your React tree as HTML into a [Readable Web Stream:](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream)
+
+```js [[1, 4, "<App />"], [2, 5, "['/main.js']"]]
+import { renderToReadableStream } from 'react-dom/server';
+
+async function handler(request) {
+  const stream = await renderToReadableStream(<App />, {
+    bootstrapScripts: ['/main.js']
+  });
+  return new Response(stream, {
+    headers: { 'content-type': 'text/html' },
+  });
+}
+```
+
+Along with the <CodeStep step={1}>root component</CodeStep>, you need to provide a list of <CodeStep step={2}>boostrap `<script>` paths</CodeStep>. Your root component should return **the entire document including the root `<html>` tag.** For example, it might look like this:
+
+```js [[1, 1, "App"]]
+export default function App() {
+  return (
+    <html>
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="stylesheet" href="/styles.css"></link>
+        <title>My app</title>
+      </head>
+      <body>
+        <Router />
+      </body>
+    </html>
+  );
+}
+```
+
+React will automatically inject the [doctype](https://developer.mozilla.org/en-US/docs/Glossary/Doctype) and your <CodeStep step={2}>bootstrap `<script>` tags</CodeStep> into the resulting HTML stream:
+
+```html [[2, 5, "/main.js"]]
+<!DOCTYPE html>
+<html>
+  <!-- ... HTML from your components ... -->
+</html>
+<script src="/main.js" async=""></script>
+```
+
+On the client, your bootstrap script should [hydrate the entire `document` with a call to `hydrateRoot`:](/reference/react-dom/client/hydrateRoot#hydrating-an-entire-document)
+
+```js [[1, 4, "<App />"]]
+import {hydrateRoot} from 'react-dom/client';
+import App from './App.js';
+
+hydrateRoot(document, <App />);
+```
+
+This will attach event listeners to the server-generated HTML and make it interactive.
+
+<DeepDive>
+
+#### Reading CSS and JS asset paths from the build output {/*reading-css-and-js-asset-paths-from-the-build-output*/}
+
+The final asset URLs (like JavaScript and CSS files) are often hashed after the build. For example, instead of `styles.css` you might end up with `styles.123456.css`. Hashing static asset filenames guarantees that every distinct build of the same asset will have a different filename. This is useful because it lets you safely enable long-term caching for static assets: a file with a certain name would never change content.
+
+However, if you don't know the asset URLs until after the build, there's no way for you to put them in the source code. For example, hardcoding `"/styles.css"` into JSX like earlier wouldn't work. To keep them out of your source code, your root component can read the real filenames from a map passed as a prop:
+
+```js {1,6}
+export default function App({ assetMap }) {
+  return (
+    <html>
+      <head>
+        <title>My app</title>
+        <link rel="stylesheet" href={assetMap['styles.css']}></link>
+      </head>
+      ...
+    </html>
+  );
+}
+```
+
+On the server, render `<App assetMap={assetMap} />` and pass your `assetMap` with the asset URLs:
+
+```js {1-5,8,9}
+// You'd need to get this JSON from your build tooling, e.g. read it from the build output.
+const assetMap = {
+  'styles.css': '/styles.123456.css',
+  'main.js': '/main.123456.js'
+};
+
+async function handler(request) {
+  const stream = await renderToReadableStream(<App assetMap={assetMap} />, {
+    bootstrapScripts: [assets['/main.js']]
+  });
+  return new Response(stream, {
+    headers: { 'content-type': 'text/html' },
+  });
+}
+```
+
+Since your server is now rendering `<App assetMap={assetMap} />`, you need to render it with `assetMap` on the client too to avoid hydration errors. You can serialize and pass `assetMap` to the client like this:
+
+```js {9-10}
+// You'd need to get this JSON from your build tooling.
+const assetMap = {
+  'styles.css': '/styles.123456.css',
+  'main.js': '/main.123456.js'
+};
+
+async function handler(request) {
+  const stream = await renderToReadableStream(<App assetMap={assetMap} />, {
+    // Careful: It's safe to stringify() this because this data isn't user-generated.
+    bootstrapScriptContent: `window.assetMap = ${JSON.stringify(assetMap)};`,
+    bootstrapScripts: [assets['/main.js']],
+  });
+  return new Response(stream, {
+    headers: { 'content-type': 'text/html' },
+  });
+}
+```
+
+In the example above, the `bootstrapScriptContent` option adds an extra inline `<script>` tag that sets the global `window.assetMap` variable on the client. This lets the client code read the same `assetMap`:
+
+```js {4}
+import {hydrateRoot} from 'react-dom/client';
+import App from './App.js';
+
+hydrateRoot(document, <App assetMap={window.assetMap} />);
+```
+
+Both client and server render `App` with the same `assetMap` prop, so there are no hydration errors.
+
+</DeepDive>
+
+---
+
+### Streaming more content as it loads {/*streaming-more-content-as-it-loads*/}
+
+Streaming allows the user to start seeing the content even before all the data has loaded on the server. For example, consider a profile page that shows a cover, a sidebar with friends and photos, and a list of posts:
+
+```js
+function ProfilePage() {
+  return (
+    <ProfileLayout>
+      <ProfileCover />
+      <Sidebar>
+        <Friends />
+        <Photos />
+      </Sidebar>
+      <Posts />
+    </ProfileLayout>
+  );
+}
+```
+
+Imagine that loading data for `<Posts />` takes some time. Ideally, you'd want to show the rest of the profile page content to the user without waiting for the posts. To do this, [wrap `Posts` in a `<Suspense>` boundary:](/reference/react/Suspense#displaying-a-fallback-while-content-is-loading)
+
+```js {9,11}
+function ProfilePage() {
+  return (
+    <ProfileLayout>
+      <ProfileCover />
+      <Sidebar>
+        <Friends />
+        <Photos />
+      </Sidebar>
+      <Suspense fallback={<PostsGlimmer />}>
+        <Posts />
+      </Suspense>
+    </ProfileLayout>
+  );
+}
+```
+
+This way, you tell React to start streaming the HTML before `Posts` loads its data. React will send the HTML for the loading fallback (`PostsGlimmer`) first, and then, when `Posts` finishes loading its data, React will send the remaining HTML along with an inline `<script>` tag that replaces the loading fallback with that HTML. From the user's perspective, the page will first appear with the `PostsGlimmer`, and then it will be replaced by the `Posts`.
+
+You can further [nest `<Suspense>` boundaries](/reference/react/Suspense#revealing-nested-content-as-it-loads) to create a more granular loading sequence:
+
+```js {5,13}
+function ProfilePage() {
+  return (
+    <ProfileLayout>
+      <ProfileCover />
+      <Suspense fallback={<BigSpinner />}>
+        <Sidebar>
+          <Friends />
+          <Photos />
+        </Sidebar>
+        <Suspense fallback={<PostsGlimmer />}>
+          <Posts />
+        </Suspense>
+      </Suspense>
+    </ProfileLayout>
+  );
+}
+```
+
+In this example, React can start streaming the page even earlier. Only `ProfileLayout` and `ProfileCover` must finish rendering first because they are not wrapped in any `<Suspense>` boundary. However, if `Sidebar`, `Friends`, or `Photos` need to load some data, React will send the HTML for the `BigSpinner` fallback instead. Then, as enough data becomes available, more content will continue to be revealed until all of it becomes visible.
+
+Streaming does not need to wait for React itself to load in the browser, or for your app to become interactive. The HTML content from the server will get progressively revealed before any of the `<script>` tags have loaded.
+
+[Read more about how streaming HTML works.](https://github.com/reactwg/react-18/discussions/37)
+
+<Note>
+
+**Only Suspense-enabled data sources will activate the Suspense component.** They include:
+
+- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/advanced-features/react-18)
+- Lazy-loading component code with [`lazy`](/reference/react/lazy)
+
+Suspense **does not** detect when data is fetched inside an Effect or event handler.
+
+The exact way you would load data in the `Posts` component above depends on your framework. If you use a Suspense-enabled framework, you'll find the details in its data fetching documentation.
+
+Suspense-enabled data fetching without the use of an opinionated framework is not yet supported. The requirements for implementing a Suspense-enabled data source are unstable and undocumented. An official API for integrating data sources with Suspense will be released in a future version of React. 
+
+</Note>
+
+---
+
+### Specifying what goes into the shell {/*specifying-what-goes-into-the-shell*/}
+
+The part of your app outside of any `<Suspense>` boundaries is called *the shell:*
+
+```js {3-5,13,14}
+function ProfilePage() {
+  return (
+    <ProfileLayout>
+      <ProfileCover />
+      <Suspense fallback={<BigSpinner />}>
+        <Sidebar>
+          <Friends />
+          <Photos />
+        </Sidebar>
+        <Suspense fallback={<PostsGlimmer />}>
+          <Posts />
+        </Suspense>
+      </Suspense>
+    </ProfileLayout>
+  );
+}
+```
+
+It determines the earliest loading state that the user may see:
+
+```js {3-5,13
+<ProfileLayout>
+  <ProfileCover />
+  <BigSpinner />
+</ProfileLayout>
+```
+
+If you wrap the whole app into a `<Suspense>` boundary at the root, the shell will only contain that spinner. However, that's not a pleasant user experience because seeing a big spinner on the screen can feel slower and more annoying than waiting a bit more and seeing the real layout. This is why usually you'll want to place the `<Suspense>` boundaries so that the shell feels *minimal but complete*--like a skeleton of the entire page layout.
+
+The async call to `renderToReadableStream` will resolve to a `stream` as soon as the entire shell has been rendered. Usually, you'll start streaming then by creating and returning a response with that `stream`:
+
+```js {5}
+async function handler(request) {
+  const stream = await renderToReadableStream(<App />, {
+    bootstrapScripts: ['/main.js']
+  });
+  return new Response(stream, {
+    headers: { 'content-type': 'text/html' },
+  });
+}
+```
+
+By the time the `stream` is returned, components in nested `<Suspense>` boundaries might still be loading data.
+
+---
+
+### Logging crashes on the server {/*logging-crashes-on-the-server*/}
+
+By default, all errors on the server are logged to console. You can override this behavior to log crash reports:
+
+```js {4-7}
+async function handler(request) {
+  const stream = await renderToReadableStream(<App />, {
+    bootstrapScripts: ['/main.js'],
+    onError(error) {
+      console.error(error);
+      logServerCrashReport(error);
+    }
+  });
+  return new Response(stream, {
+    headers: { 'content-type': 'text/html' },
+  });
+}
+```
+
+If you provide a custom `onError` implementation, don't forget to also log errors to the console like above.
+
+---
+
+### Recovering from errors inside the shell {/*recovering-from-errors-inside-the-shell*/}
+
+In this example, the shell contains `ProfileLayout`, `ProfileCover`, and `PostsGlimmer`:
+
+```js {3-5,7-8}
+function ProfilePage() {
+  return (
+    <ProfileLayout>
+      <ProfileCover />
+      <Suspense fallback={<PostsGlimmer />}>
+        <Posts />
+      </Suspense>
+    </ProfileLayout>
+  );
+}
+```
+
+If an error occurs while rendering those components, React won't have any meaningful HTML to send to the client. Wrap your `renderToReadableStream` call in a `try...catch` to send a fallback HTML that doesn't rely on server rendering as the last resort:
+
+```js {2,13-18}
+async function handler(request) {
+  try {
+    const stream = await renderToReadableStream(<App />, {
+      bootstrapScripts: ['/main.js'],
+      onError(error) {
+        console.error(error);
+        logServerCrashReport(error);
+      }
+    });
+    return new Response(stream, {
+      headers: { 'content-type': 'text/html' },
+    });
+  } catch (error) {
+    return new Response('<h1>Something went wrong</h1>', {
+      status: 500,
+      headers: { 'content-type': 'text/html' },
+    });
+  }
+}
+```
+
+If there is an error while generating the shell, both `onError` and your `catch` block will run. Use `onError` for error reporting and use the `catch` block to send the fallback HTML document. Your fallback HTML does not have to be an error page. For example, you can include an alternative shell that tries to render your app on the client only.
+
+---
+
+### Recovering from errors outside the shell {/*recovering-from-errors-outside-the-shell*/}
+
+In this example, the `<Posts />` component is wrapped in `<Suspense>` so it is *not* a part of the shell:
+
+```js {6}
+function ProfilePage() {
+  return (
+    <ProfileLayout>
+      <ProfileCover />
+      <Suspense fallback={<PostsGlimmer />}>
+        <Posts />
+      </Suspense>
+    </ProfileLayout>
+  );
+}
+```
+
+If an error happens in the `Posts` component or somewhere inside it, React will [try to recover from it:](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-server-only-content)
+
+1. It will emit the loading fallback for the closest `<Suspense>` boundary (`PostsGlimmer`) into the HTML.
+2. It will "give up" on trying to render the `Posts` content on the server anymore.
+3. When the JavaScript code loads on the client, React will *retry* rendering the `Posts` component on the client.
+
+If retrying rendering `Posts` on the client *also* fails, React will throw the error on the client. As with all the errors thrown during rendering, the [closest parent error boundary](/reference/react/Component#static-getderivedstatefromerror) determines how to present the error to the user. In practice, this means that the user will see a loading indicator until it is certain that the error is not recoverable.
+
+If retrying rendering `Posts` on the client succeeds, the loading fallback from the server will be replaced with the client rendering output. The user will not know that there was a server error. However, the server `onError` callback and the client [`onRecoverableError`](/reference/react-dom/client/hydrateRoot#hydrateroot) callbacks will fire so that you can get notified about the error.
+
+---
+
+### Setting the status code {/*setting-the-status-code*/}
+
+Streaming introduces a tradeoff. You want to start streaming the page as early as possible so that the user can see the content sooner. However, once you start streaming, you can no longer set the response status code.
+
+By [dividing your app](#specifying-what-goes-into-the-shell) into the shell (above all `<Suspense>` boundaries) and the rest of the content, you've already solved a part of this problem. If the shell errors, your `catch` block will run which lets you set the error status code. Otherwise, you know that the app may recover on the client, so the "OK" status code is reasonable.
+
+```js {11}
+async function handler(request) {
+  try {
+    const stream = await renderToReadableStream(<App />, {
+      bootstrapScripts: ['/main.js'],
+      onError(error) {
+        console.error(error);
+        logServerCrashReport(error);
+      }
+    });
+    return new Response(stream, {
+      status: 200,
+      headers: { 'content-type': 'text/html' },
+    });
+  } catch (error) {
+    return new Response('<h1>Something went wrong</h1>', {
+      status: 500,
+      headers: { 'content-type': 'text/html' },
+    });
+  }
+}
+```
+
+If a component *outside* the shell (i.e. inside a `<Suspense>` boundary) throws an error, React will not stop rendering. This means that the `onError` callback will fire, but your code will continue running without getting into the `catch` block. This is because React will try to recover from that error on the client, [as described above.](#recovering-from-errors-outside-the-shell)
+
+However, if you'd like, you can use the fact that something has errored to set the status code:
+
+```js {3,7,13}
+async function handler(request) {
+  try {
+    let didError = false;
+    const stream = await renderToReadableStream(<App />, {
+      bootstrapScripts: ['/main.js'],
+      onError(error) {
+        didError = true;
+        console.error(error);
+        logServerCrashReport(error);
+      }
+    });
+    return new Response(stream, {
+      status: didError ? 500 : 200,
+      headers: { 'content-type': 'text/html' },
+    });
+  } catch (error) {
+    return new Response('<h1>Something went wrong</h1>', {
+      status: 500,
+      headers: { 'content-type': 'text/html' },
+    });
+  }
+}
+```
+
+This will only catch errors outside the shell that happened while generating the initial shell content, so it's not exhaustive. If knowing whether an error occurred for some content is critical, you can move it up into the shell.
+
+---
+
+### Handling different errors in different ways {/*handling-different-errors-in-different-ways*/}
+
+You can [create your own `Error` subclasses](https://javascript.info/custom-errors) and use the [`instanceof`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/instanceof) operator to check which error is thrown. For example, you can define a custom `NotFoundError` and throw it from your component. Then you can save the error in `onError` and do something different before returning the response depending on the error type:
+
+```js {2-3,5-15,22,28,33}
+async function handler(request) {
+  let didError = false;
+  let caughtError = null;
+
+  function getStatusCode() {
+    if (didError) {
+      if (caughtError instanceof NotFoundError) {
+        return 404;
+      } else {
+        return 500;
+      }
+    } else {
+      return 200;
+    }
+  }
+
+  try {
+    const stream = await renderToReadableStream(<App />, {
+      bootstrapScripts: ['/main.js'],
+      onError(error) {
+        didError = true;
+        caughtError = error;
+        console.error(error);
+        logServerCrashReport(error);
+      }
+    });
+    return new Response(stream, {
+      status: getStatusCode(),
+      headers: { 'content-type': 'text/html' },
+    });
+  } catch (error) {
+    return new Response('<h1>Something went wrong</h1>', {
+      status: getStatusCode(),
+      headers: { 'content-type': 'text/html' },
+    });
+  }
+}
+```
+
+Keep in mind that once you emit the shell and start streaming, you can't change the status code.
+
+---
+
+### Waiting for all content to load for crawlers and static generation {/*waiting-for-all-content-to-load-for-crawlers-and-static-generation*/}
+
+Streaming offers a better user experience because the user can see the content as it becomes available.
+
+However, when a crawler visits your page, or if you're generating the pages at the build time, you might want to let all of the content load first and then produce the final HTML output instead of revealing it progressively.
+
+You can wait for all the content to load by awaiting the `stream.allReady` Promise:
+
+```js {12-15}
+async function handler(request) {
+  try {
+    let didError = false;
+    const stream = await renderToReadableStream(<App />, {
+      bootstrapScripts: ['/main.js'],
+      onError(error) {
+        didError = true;
+        console.error(error);
+        logServerCrashReport(error);
+      }
+    });
+    let isCrawler = // ... depends on your bot detection strategy ...
+    if (isCrawler) {
+      await stream.allReady;
+    }
+    return new Response(stream, {
+      status: didError ? 500 : 200,
+      headers: { 'content-type': 'text/html' },
+    });
+  } catch (error) {
+    return new Response('<h1>Something went wrong</h1>', {
+      status: 500,
+      headers: { 'content-type': 'text/html' },
+    });
+  }
+}
+```
+
+A regular visitor will get a stream of progressively loaded content. A crawler will receive the final HTML output after all the data loads. However, this also means that the crawler will have to wait for *all* data, some of which might be slow to load or error. Depending on your app, you could choose to send the shell to the crawlers too.
+
+---
+
+### Aborting server rendering {/*aborting-server-rendering*/}
+
+You can force the server rendering to "give up" after a timeout:
+
+```js {3,4-6,9}
+async function handler(request) {
+  try {
+    const controller = new AbortController();
+    setTimeout(() => {
+      controller.abort();
+    }, 10000);
+
+    const stream = await renderToReadableStream(<App />, {
+      signal: controller.signal,
+      bootstrapScripts: ['/main.js'],
+      onError(error) {
+        didError = true;
+        console.error(error);
+        logServerCrashReport(error);
+      }
+    });
+    // ...
+```
+
+React will flush the remaining loading fallbacks as HTML, and will attempt to render the rest on the client.
diff --git a/beta/src/content/reference/react-dom/server/renderToStaticMarkup.md b/beta/src/content/reference/react-dom/server/renderToStaticMarkup.md
new file mode 100644
index 000000000..01ff17ee6
--- /dev/null
+++ b/beta/src/content/reference/react-dom/server/renderToStaticMarkup.md
@@ -0,0 +1,77 @@
+---
+title: renderToStaticMarkup
+---
+
+<Intro>
+
+`renderToStaticMarkup` renders a non-interactive React tree to an HTML string.
+
+```js
+const html = renderToStaticMarkup(reactNode)
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `renderToStaticMarkup(reactNode)` {/*rendertostaticmarkup*/}
+
+On the server, call `renderToStaticMarkup` to render your app to HTML.
+
+```js
+import { renderToStaticMarkup } from 'react-dom/server';
+
+const html = renderToStaticMarkup(<Page />);
+```
+
+It will produce non-interactive HTML output of your React components.
+
+[See more examples below.](#usage)
+
+#### Parameters {/*parameters*/}
+
+* `reactNode`: A React node you want to render to HTML. For example, a JSX node like `<Page />`.
+
+#### Returns {/*returns*/}
+
+An HTML string.
+
+#### Caveats {/*caveats*/}
+
+* `renderToStaticMarkup` output cannot be hydrated.
+
+* `renderToStaticMarkup` has limited Suspense support. If a component suspends, `renderToStaticMarkup` immediately sends its fallback as HTML.
+
+* `renderToStaticMarkup` works in the browser, but using it in the client code is not recommended. If you need to render a component to HTML in the browser, [get the HTML by rendering it into a DOM node.](/reference/react-dom/server/renderToString#removing-rendertostring-from-the-client-code)
+
+---
+
+## Usage {/*usage*/}
+
+### Rendering a non-interactive React tree as HTML to a string {/*rendering-a-non-interactive-react-tree-as-html-to-a-string*/}
+
+Call `renderToStaticMarkup` to render your app to an HTML string which you can send with your server response:
+
+```js {5-6}
+import { renderToStaticMarkup } from 'react-dom/server';
+
+// The route handler syntax depends on your backend framework
+app.use('/', (request, response) => {
+  const html = renderToStaticMarkup(<Page />);
+  response.send(html);
+});
+```
+
+This will produce the initial non-interactive HTML output of your React components.
+
+<Pitfall>
+
+This method renders **non-interactive HTML that cannot be hydrated.**  This is useful if you want to use React as a simple static page generator, or if you're rendering completely static content like emails.
+
+Interactive apps should use [`renderToString`](/reference/react-dom/server/renderToString) on the server and [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) on the client.
+
+</Pitfall>
diff --git a/beta/src/content/reference/react-dom/server/renderToStaticNodeStream.md b/beta/src/content/reference/react-dom/server/renderToStaticNodeStream.md
new file mode 100644
index 000000000..ec3d58937
--- /dev/null
+++ b/beta/src/content/reference/react-dom/server/renderToStaticNodeStream.md
@@ -0,0 +1,80 @@
+---
+title: renderToStaticNodeStream
+---
+
+<Intro>
+
+`renderToStaticNodeStream` renders a non-interactive React tree to a [Node.js Readable Stream.](https://nodejs.org/api/stream.html#readable-streams)
+
+```js
+const stream = renderToStaticNodeStream(reactNode)
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `renderToStaticNodeStream(reactNode)` {/*rendertostaticnodestream*/}
+
+On the server, call `renderToStaticNodeStream` to get a [Node.js Readable Stream](https://nodejs.org/api/stream.html#readable-streams).
+
+```js
+import { renderToStaticNodeStream } from 'react-dom/server';
+
+const stream = renderToStaticNodeStream(<Page />);
+stream.pipe(response);
+```
+
+[See more examples below.](#usage)
+
+The stream will produce non-interactive HTML output of your React components.
+
+#### Parameters {/*parameters*/}
+
+* `reactNode`: A React node you want to render to HTML. For example, a JSX element like `<Page />`.
+
+#### Returns {/*returns*/}
+
+A [Node.js Readable Stream](https://nodejs.org/api/stream.html#readable-streams) that outputs an HTML string. The resulting HTML can't be hydrated on the client.
+
+#### Caveats {/*caveats*/}
+
+* `renderToStaticNodeStream` output cannot be hydrated.
+
+* This method will wait for all [Suspense boundaries](/reference/react/Suspense) to complete before returning any output.
+
+* As of React 18, this method buffers all of its output, so it doesn't actually provide any streaming benefits.
+
+* The returned stream is a byte stream encoded in utf-8. If you need a stream in another encoding, take a look at a project like [iconv-lite](https://www.npmjs.com/package/iconv-lite), which provides transform streams for transcoding text.
+
+---
+
+## Usage {/*usage*/}
+
+### Rendering a React tree as static HTML to a Node.js Readable Stream {/*rendering-a-react-tree-as-static-html-to-a-nodejs-readable-stream*/}
+
+Call `renderToStaticNodeStream` to get a [Node.js Readable Stream](https://nodejs.org/api/stream.html#readable-streams) which you can pipe to your server response:
+
+```js {5-6}
+import { renderToStaticNodeStream } from 'react-dom/server';
+
+// The route handler syntax depends on your backend framework
+app.use('/', (request, response) => {
+  const stream = renderToStaticNodeStream(<Page />);
+  stream.pipe(response);
+});
+```
+
+The stream will produce the initial non-interactive HTML output of your React components.
+
+<Pitfall>
+
+This method renders **non-interactive HTML that cannot be hydrated.** This is useful if you want to use React as a simple static page generator, or if you're rendering completely static content like emails.
+
+Interactive apps should use [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream) on the server and [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) on the client.
+
+</Pitfall>
diff --git a/beta/src/content/reference/react-dom/server/renderToString.md b/beta/src/content/reference/react-dom/server/renderToString.md
new file mode 100644
index 000000000..970793763
--- /dev/null
+++ b/beta/src/content/reference/react-dom/server/renderToString.md
@@ -0,0 +1,138 @@
+---
+title: renderToString
+---
+
+<Pitfall>
+
+`renderToString` does not support streaming or waiting for data. [See the alternatives.](#alternatives)
+
+</Pitfall>
+
+<Intro>
+
+`renderToString` renders a React tree to an HTML string.
+
+```js
+const html = renderToString(reactNode)
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `renderToString(reactNode)` {/*rendertostring*/}
+
+On the server, call `renderToString` to render your app to HTML.
+
+```js
+import { renderToString } from 'react-dom/server';
+
+const html = renderToString(<App />);
+```
+
+On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to make the server-generated HTML interactive.
+
+[See more examples below.](#usage)
+
+#### Parameters {/*parameters*/}
+
+* `reactNode`: A React node you want to render to HTML. For example, a JSX node like `<App />`.
+
+#### Returns {/*returns*/}
+
+An HTML string.
+
+#### Caveats {/*caveats*/}
+
+* `renderToString` has limited Suspense support. If a component suspends, `renderToString` immediately sends its fallback as HTML.
+
+* `renderToString` works in the browser, but using it in the client code is [not recommended.](#removing-rendertostring-from-the-client-code)
+
+---
+
+## Usage {/*usage*/}
+
+### Rendering a React tree as HTML to a string {/*rendering-a-react-tree-as-html-to-a-string*/}
+
+Call `renderToString` to render your app to an HTML string which you can send with your server response:
+
+```js {5-6}
+import { renderToString } from 'react-dom/server';
+
+// The route handler syntax depends on your backend framework
+app.use('/', (request, response) => {
+  const html = renderToString(<App />);
+  response.send(html);
+});
+```
+
+This will produce the initial non-interactive HTML output of your React components. On the client, you will need to call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to *hydrate* that server-generated HTML and make it interactive.
+
+
+<Pitfall>
+
+`renderToString` does not support streaming or waiting for data. [See the alternatives.](#alternatives)
+
+</Pitfall>
+
+---
+
+## Alternatives {/*alternatives*/}
+
+### Migrating from `renderToString` to a streaming method on the server {/*migrating-from-rendertostring-to-a-streaming-method-on-the-server*/}
+
+`renderToString` returns a string immediately, so it does not support streaming or waiting for data.
+
+When possible, we recommend to use these fully-featured alternatives:
+
+* If you use Node.js, use [`renderToPipeableStream`.](/reference/react-dom/server/renderToPipeableStream)
+* If you use Deno or a modern edge runtime with [Web Streams](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API), use [`renderToReadableStream`.](/reference/react-dom/server/renderToReadableStream)
+
+You can continue using `renderToString` if your server environment does not support streams.
+
+---
+
+### Removing `renderToString` from the client code {/*removing-rendertostring-from-the-client-code*/}
+
+Sometimes, `renderToString` is used on the client to convert some component to HTML.
+
+```js {1-2}
+// 🚩 Unnecessary: using renderToString on the client
+import { renderToString } from 'react-dom/server';
+
+const html = renderToString(<MyIcon />);
+console.log(html); // For example, "<svg>...</svg>"
+```
+
+Importing `react-dom/server` **on the client** unnecessarily increases your bundle size and should be avoided. If you need to render some component to HTML in the browser, use [`createRoot`](/reference/react-dom/client/createRoot) and read HTML from the DOM:
+
+```js
+import { createRoot } from 'react-dom/client';
+import { flushSync } from 'react-dom';
+
+const div = document.createElement('div');
+const root = createRoot(div);
+flushSync(() => {
+  root.render(<MyIcon />);
+});
+console.log(div.innerHTML); // For example, "<svg>...</svg>"
+```
+
+The [`flushSync`](/reference/react-dom/flushSync) call is necessary so that the DOM is updated before reading its [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) property.
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+
+### When a component suspends, the HTML always contains a fallback {/*when-a-component-suspends-the-html-always-contains-a-fallback*/}
+
+`renderToString` does not fully support Suspense.
+
+If some component suspends (for example, because it's defined with [`lazy`](/reference/react/lazy) or fetches data), `renderToString` will not wait for its content to resolve. Instead, `renderToString` will find the closest [`<Suspense>`](/reference/react/Suspense) boundary above it and render its `fallback` prop in the HTML. The content will not appear until the client code loads.
+
+To solve this, use one of the [recommended streaming solutions.](#migrating-from-rendertostring-to-a-streaming-method-on-the-server) They can stream content in chunks as it resolves on the server so that the user sees the page being progressively filled in even before the client code loads.
+
diff --git a/beta/src/content/reference/react-dom/unmountComponentAtNode.md b/beta/src/content/reference/react-dom/unmountComponentAtNode.md
new file mode 100644
index 000000000..008943bd5
--- /dev/null
+++ b/beta/src/content/reference/react-dom/unmountComponentAtNode.md
@@ -0,0 +1,113 @@
+---
+title: unmountComponentAtNode
+---
+
+<Deprecated>
+
+This API will be removed in a future major version of React.
+
+In React 18, `unmountComponentAtNode` was replaced by [`root.unmount()`](/reference/react-dom/client/createRoot#root-unmount).
+
+</Deprecated>
+
+<Intro>
+
+`unmountComponentAtNode` removes a mounted React component from the DOM.
+
+```js
+unmountComponentAtNode(domNode)
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `unmountComponentAtNode(domNode)` {/*unmountcomponentatnode*/}
+
+Call `unmountComponentAtNode` to remove a mounted React component from the DOM and clean up its event handlers and state.
+
+```js
+import { unmountComponentAtNode } from 'react-dom';
+
+const domNode = document.getElementById('root');
+render(<App />, domNode);
+
+unmountComponentAtNode(domNode);
+```
+
+[See more examples below.](#usage)
+
+#### Parameters {/*parameters*/}
+
+* `domNode`: A [DOM element.](https://developer.mozilla.org/en-US/docs/Web/API/Element) React will remove a mounted React component from this element.
+
+#### Returns {/*returns*/}
+
+`unmountComponentAtNode` returns `true` if a component was unmounted and `false` otherwise.
+
+---
+
+## Usage {/*usage*/}
+
+Call `unmountComponentAtNode` to remove a <CodeStep step={1}>mounted React component</CodeStep> from a <CodeStep step={2}>browser DOM node</CodeStep> and clean up its event handlers and state.
+
+```js [[1, 5, "<App />"], [2, 5, "rootNode"], [2, 8, "rootNode"]]
+import {render, unmountComponentAtNode} from 'react-dom';
+import App from './App.js';
+
+const rootNode = document.getElementById('root');
+render(<App />, rootNode);
+
+// ...
+unmountComponentAtNode(rootNode);
+````
+
+
+### Removing a React app from a DOM element {/*removing-a-react-app-from-a-dom-element*/}
+
+Occasionally, you may want to "sprinkle" React on an existing page, or a page that is not fully written in React. In those cases, you may need to "stop" the React app, by removing all of the UI, state, and listeners from the DOM node it was rendered to.
+
+In this example, clicking "Render React App" will render a React app. Click "Unmount React App" to destroy it:
+
+<Sandpack>
+
+```html index.html
+<!DOCTYPE html>
+<html>
+  <head><title>My app</title></head>
+  <body>
+    <button id='render'>Render React App</button>
+    <button id='unmount'>Unmount React App</button>
+    <!-- This is the React App node -->
+    <div id='root'></div>
+  </body>
+</html>
+```
+
+```js index.js active
+import './styles.css';
+import {render, unmountComponentAtNode} from 'react-dom';
+import App from './App.js';
+
+const domNode = document.getElementById('root');
+
+document.getElementById('render').addEventListener('click', () => {
+  render(<App />, domNode);
+});
+
+document.getElementById('unmount').addEventListener('click', () => {
+  unmountComponentAtNode(domNode);
+});
+```
+
+```js App.js
+export default function App() {
+  return <h1>Hello, world!</h1>;
+}
+```
+
+</Sandpack>
diff --git a/beta/src/content/reference/react/Children.md b/beta/src/content/reference/react/Children.md
new file mode 100644
index 000000000..3683cb7cc
--- /dev/null
+++ b/beta/src/content/reference/react/Children.md
@@ -0,0 +1,949 @@
+---
+title: Children
+---
+
+<Pitfall>
+
+Using `Children` is uncommon and can lead to fragile code. [See common alternatives.](#alternatives)
+
+</Pitfall>
+
+<Intro>
+
+`Children` lets you manipulate and transform the JSX you received as the [`children` prop.](/learn/passing-props-to-a-component#passing-jsx-as-children)
+
+```js
+const mappedChildren = Children.map(children, child =>
+  <div className="Row">
+    {child}
+  </div>
+);
+
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `Children.count(children)` {/*children-count*/}
+
+Call `Children.count(children)` to count the number of children in the `children` data structure.
+
+```js RowList.js active
+import { Children } from 'react';
+
+function RowList({ children }) {
+  return (
+    <>
+      <h1>Total rows: {Children.count(children)}</h1>
+      ...
+    </>
+  );
+}
+```
+
+[See more examples below.](#counting-children)
+
+#### Parameters {/*children-count-parameters*/}
+
+* `children`: The value of the [`children` prop](/learn/passing-props-to-a-component#passing-jsx-as-children) received by your component.
+
+#### Returns {/*children-count-returns*/}
+
+The number of nodes inside these `children`.
+
+#### Caveats {/*children-count-caveats*/}
+
+- Empty nodes (`null`, `undefined`, and Booleans), strings, numbers, and [React elements](/reference/react/createElement) count as individual nodes. Arrays don't count as individual nodes, but their children do. **The traversal does not go deeper than React elements:** they don't get rendered, and their children aren't traversed. [Fragments](/reference/react/Fragment) don't get traversed.
+
+---
+
+### `Children.forEach(children, fn, thisArg?)` {/*children-foreach*/}
+
+Call `Children.forEach(children, fn, thisArg?)` to run some code for each child in the `children` data structure.
+
+```js RowList.js active
+import { Children } from 'react';
+
+function SeparatorList({ children }) {
+  const result = [];
+  Children.forEach(children, (child, index) => {
+    result.push(child);
+    result.push(<hr key={index} />);
+  });
+  // ...
+```
+
+[See more examples below.](#running-some-code-for-each-child)
+
+#### Parameters {/*children-foreach-parameters*/}
+
+* `children`: The value of the [`children` prop](/learn/passing-props-to-a-component#passing-jsx-as-children) received by your component.
+* `fn`: The function you want to run for each child, similar to the [array `forEach` method](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) callback. It will be called with the child as the first argument and its index as the second argument. The index starts at `0` and increments on each call.
+* **optional** `thisArg`: The [`this` value](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this) with which the `fn` function should be called. If omitted, it's `undefined`.
+
+#### Returns {/*children-foreach-returns*/}
+
+`Children.forEach` returns `undefined`.
+
+#### Caveats {/*children-foreach-caveats*/}
+
+- Empty nodes (`null`, `undefined`, and Booleans), strings, numbers, and [React elements](/reference/react/createElement) count as individual nodes. Arrays don't count as individual nodes, but their children do. **The traversal does not go deeper than React elements:** they don't get rendered, and their children aren't traversed. [Fragments](/reference/react/Fragment) don't get traversed.
+
+---
+
+### `Children.map(children, fn, thisArg?)` {/*children-map*/}
+
+Call `Children.map(children, fn, thisArg?)` to map or transform each child in the `children` data structure.
+
+```js RowList.js active
+import { Children } from 'react';
+
+function RowList({ children }) {
+  return (
+    <div className="RowList">
+      {Children.map(children, child =>
+        <div className="Row">
+          {child}
+        </div>
+      )}
+    </div>
+  );
+}
+```
+
+[See more examples below.](#transforming-children)
+
+#### Parameters {/*children-map-parameters*/}
+
+* `children`: The value of the [`children` prop](/learn/passing-props-to-a-component#passing-jsx-as-children) received by your component.
+* `fn`: The mapping function, similar to the [array `map` method](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) callback. It will be called with the child as the first argument and its index as the second argument. The index starts at `0` and increments on each call. You need to return a React node from this function. This may be an empty node (`null`, `undefined`, or a Boolean), a string, a number, a React element, or an array of other React nodes.
+* **optional** `thisArg`: The [`this` value](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this) with which the `fn` function should be called. If omitted, it's `undefined`.
+
+#### Returns {/*children-map-returns*/}
+
+If `children` is `null` or `undefined`, returns the same value.
+
+Otherwise, returns a flat array consisting of the nodes you've returned from the `fn` function. The returned array will contain all nodes you returned except for `null` and `undefined`.
+
+#### Caveats {/*children-map-caveats*/}
+
+- Empty nodes (`null`, `undefined`, and Booleans), strings, numbers, and [React elements](/reference/react/createElement) count as individual nodes. Arrays don't count as individual nodes, but their children do. **The traversal does not go deeper than React elements:** they don't get rendered, and their children aren't traversed. [Fragments](/reference/react/Fragment) don't get traversed.
+
+- If you return an element or an array of elements with keys from `fn`, **the returned elements' keys will be automatically combined with the key of the corresponding original item from `children`.** When you return multiple elements from `fn` in an array, their keys only need to be unique locally amongst each other.
+
+---
+
+### `Children.only(children)` {/*children-only*/}
+
+
+Call `Children.only(children)` to assert that `children` represent a single React element.
+
+```js
+function Box({ children }) {
+  const element = Children.only(children);
+  // ...
+```
+
+#### Parameters {/*children-only-parameters*/}
+
+* `children`: The value of the [`children` prop](/learn/passing-props-to-a-component#passing-jsx-as-children) received by your component.
+
+#### Returns {/*children-only-returns*/}
+
+If `children` [is a valid element,](/reference/react/isValidElement) returns that element.
+
+Otherwise, throws an error.
+
+#### Caveats {/*children-only-caveats*/}
+
+- This method always **throws if you pass an array (such as the return value of `Children.map`) as `children`.** In other words, it enforces that `children` is a single React element, not that it's an array with a single element.
+
+---
+
+### `Children.toArray(children)` {/*children-toarray*/}
+
+Call `Children.toArray(children)` to create an array out of the `children` data structure.
+
+```js ReversedList.js active
+import { Children } from 'react';
+
+export default function ReversedList({ children }) {
+  const result = Children.toArray(children);
+  result.reverse();
+  // ...
+```
+
+#### Parameters {/*children-toarray-parameters*/}
+
+* `children`: The value of the [`children` prop](/learn/passing-props-to-a-component#passing-jsx-as-children) received by your component.
+
+#### Returns {/*children-toarray-returns*/}
+
+Returns a flat array of elements in `children`.
+
+#### Caveats {/*children-toarray-caveats*/}
+
+- Empty nodes (`null`, `undefined`, and Booleans) will be omitted in the returned array. **The returned elements' keys will be calculated from the original elements' keys and their level of nesting and position.** This ensures that flattening the array does not introduce changes in behavior.
+
+---
+
+## Usage {/*usage*/}
+
+### Transforming children {/*transforming-children*/}
+
+To transform the children JSX that your component [receives as the `children` prop,](/learn/passing-props-to-a-component#passing-jsx-as-children) call `Children.map`:
+
+```js {6,10}
+import { Children } from 'react';
+
+function RowList({ children }) {
+  return (
+    <div className="RowList">
+      {Children.map(children, child =>
+        <div className="Row">
+          {child}
+        </div>
+      )}
+    </div>
+  );
+}
+```
+
+In the example above, the `RowList` wraps every child it receives into a `<div className="Row">` container. For example, let's say the parent component passes three `<p>` tags as the `children` prop to `RowList`:
+
+```js
+<RowList>
+  <p>This is the first item.</p>
+  <p>This is the second item.</p>
+  <p>This is the third item.</p>
+</RowList>
+```
+
+Then, with the `RowList` implementation above, the final rendered result will look like this:
+
+```js
+<div className="RowList">
+  <div className="Row">
+    <p>This is the first item.</p>
+  </div>
+  <div className="Row">
+    <p>This is the second item.</p>
+  </div>
+  <div className="Row">
+    <p>This is the third item.</p>
+  </div>
+</div>
+```
+
+`Children.map` is similar to [to transforming arrays with `map()`.](/learn/rendering-lists) The difference is that the `children` data structure is considered *opaque.* This means that even if it's sometimes an array, you should not assume it's an array or any other particular data type. This is why you should use `Children.map` if you need to transform it.
+
+<Sandpack>
+
+```js
+import RowList from './RowList.js';
+
+export default function App() {
+  return (
+    <RowList>
+      <p>This is the first item.</p>
+      <p>This is the second item.</p>
+      <p>This is the third item.</p>
+    </RowList>
+  );
+}
+```
+
+```js RowList.js active
+import { Children } from 'react';
+
+export default function RowList({ children }) {
+  return (
+    <div className="RowList">
+      {Children.map(children, child =>
+        <div className="Row">
+          {child}
+        </div>
+      )}
+    </div>
+  );
+}
+```
+
+```css
+.RowList {
+  display: flex;
+  flex-direction: column;
+  border: 2px solid grey;
+  padding: 5px;
+}
+
+.Row {
+  border: 2px dashed black;
+  padding: 5px;
+  margin: 5px;
+}
+```
+
+</Sandpack>
+
+<DeepDive>
+
+#### Why is the children prop not always an array? {/*why-is-the-children-prop-not-always-an-array*/}
+
+In React, the `children` prop is considered an *opaque* data structure. This means that you shouldn't rely on how it is structured. To transform, filter, or count children, you should use the `Children` methods.
+
+In practice, the `children` data structure is often represented as an array internally. However, if there is only a single child, then React won't create an extra array since this would lead to unnecessary memory overhead. As long as you use the `Children` methods instead of directly introspecting the `children` prop, your code will not break even if React changes how the data structure is actually implemented.
+
+Even when `children` is an array, `Children.map` has useful special behavior. For example, `Children.map` combines the [keys](/learn/rendering-lists#keeping-list-items-in-order-with-key) on the returned elements with the keys on the `children` you've passed to it. This ensures the original JSX children don't "lose" keys even if they get wrapped like in the example above.
+
+</DeepDive>
+
+<Pitfall>
+
+The `children` data structure **does not include rendered output** of the components you pass as JSX. In the example below, the `children` received by the `RowList` only contains two items rather than three:
+
+1. `<p>This is the first item.</p>`
+2. `<MoreRows />`
+
+This is why only two row wrappers are generated in this example:
+
+<Sandpack>
+
+```js
+import RowList from './RowList.js';
+
+export default function App() {
+  return (
+    <RowList>
+      <p>This is the first item.</p>
+      <MoreRows />
+    </RowList>
+  );
+}
+
+function MoreRows() {
+  return (
+    <>
+      <p>This is the second item.</p>
+      <p>This is the third item.</p>
+    </>
+  );
+}
+```
+
+```js RowList.js
+import { Children } from 'react';
+
+export default function RowList({ children }) {
+  return (
+    <div className="RowList">
+      {Children.map(children, child =>
+        <div className="Row">
+          {child}
+        </div>
+      )}
+    </div>
+  );
+}
+```
+
+```css
+.RowList {
+  display: flex;
+  flex-direction: column;
+  border: 2px solid grey;
+  padding: 5px;
+}
+
+.Row {
+  border: 2px dashed black;
+  padding: 5px;
+  margin: 5px;
+}
+```
+
+</Sandpack>
+
+**There is no way to get the rendered output of an inner component** like `<MoreRows />` when manipulating `children`. This is why [it's usually better to use one of the alternative solutions.](#alternatives)
+
+</Pitfall>
+
+---
+
+### Running some code for each child {/*running-some-code-for-each-child*/}
+
+Call `Children.forEach` to iterate over each child in the `children` data structure. It does not return any value and is similar to the [array `forEach` method.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) You can use it to run custom logic like constructing your own array.
+
+<Sandpack>
+
+```js
+import SeparatorList from './SeparatorList.js';
+
+export default function App() {
+  return (
+    <SeparatorList>
+      <p>This is the first item.</p>
+      <p>This is the second item.</p>
+      <p>This is the third item.</p>
+    </SeparatorList>
+  );
+}
+```
+
+```js SeparatorList.js active
+import { Children } from 'react';
+
+export default function SeparatorList({ children }) {
+  const result = [];
+  Children.forEach(children, (child, index) => {
+    result.push(child);
+    result.push(<hr key={index} />);
+  });
+  result.pop(); // Remove the last separator
+  return result;
+}
+```
+
+</Sandpack>
+
+<Pitfall>
+
+As mentioned earlier, there is no way to get the rendered output of an inner component when manipulating `children`. This is why [it's usually better to use one of the alternative solutions.](#alternatives)
+
+</Pitfall>
+
+---
+
+### Counting children {/*counting-children*/}
+
+Call `Children.count(children)` to calculate the number of children.
+
+<Sandpack>
+
+```js
+import RowList from './RowList.js';
+
+export default function App() {
+  return (
+    <RowList>
+      <p>This is the first item.</p>
+      <p>This is the second item.</p>
+      <p>This is the third item.</p>
+    </RowList>
+  );
+}
+```
+
+```js RowList.js active
+import { Children } from 'react';
+
+export default function RowList({ children }) {
+  return (
+    <div className="RowList">
+      <h1 className="RowListHeader">
+        Total rows: {Children.count(children)}
+      </h1>
+      {Children.map(children, child =>
+        <div className="Row">
+          {child}
+        </div>
+      )}
+    </div>
+  );
+}
+```
+
+```css
+.RowList {
+  display: flex;
+  flex-direction: column;
+  border: 2px solid grey;
+  padding: 5px;
+}
+
+.RowListHeader {
+  padding-top: 5px;
+  font-size: 25px;
+  font-weight: bold;
+  text-align: center;
+}
+
+.Row {
+  border: 2px dashed black;
+  padding: 5px;
+  margin: 5px;
+}
+```
+
+</Sandpack>
+
+<Pitfall>
+
+As mentioned earlier, there is no way to get the rendered output of an inner component when manipulating `children`. This is why [it's usually better to use one of the alternative solutions.](#alternatives)
+
+</Pitfall>
+
+---
+
+### Converting children to an array {/*converting-children-to-an-array*/}
+
+Call `Children.toArray(children)` to turn the `children` data structure into a regular JavaScript array. This lets you manipulate the array with built-in array methods like [`filter`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), [`sort`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort), or [`reverse`.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse) 
+
+<Sandpack>
+
+```js
+import ReversedList from './ReversedList.js';
+
+export default function App() {
+  return (
+    <ReversedList>
+      <p>This is the first item.</p>
+      <p>This is the second item.</p>
+      <p>This is the third item.</p>
+    </ReversedList>
+  );
+}
+```
+
+```js ReversedList.js active
+import { Children } from 'react';
+
+export default function ReversedList({ children }) {
+  const result = Children.toArray(children);
+  result.reverse();
+  return result;
+}
+```
+
+</Sandpack>
+
+<Pitfall>
+
+As mentioned earlier, there is no way to get the rendered output of an inner component when manipulating `children`. This is why [it's usually better to use one of the alternative solutions.](#alternatives)
+
+</Pitfall>
+
+---
+
+## Alternatives {/*alternatives*/}
+
+<Note>
+
+This section describes alternatives to the `Children` API (with capital `C`) that's imported like this:
+
+```js
+import { Children } from 'react';
+```
+
+Don't confuse it with [using the `children` prop](/learn/passing-props-to-a-component#passing-jsx-as-children) (lowercase `c`), which is good and encouraged.
+
+</Note>
+
+### Exposing multiple components {/*exposing-multiple-components*/}
+
+Manipulating children with the `Children` methods often leads to fragile code. When you pass children to a component in JSX, you don't usually expect the component to manipulate or transform the individual children.
+
+When you can, try to avoid using the `Children` methods. For example, if you want every child of `RowList` to be wrapped in `<div className="Row">`, export a `Row` component, and manually wrap every row into it like this:
+
+<Sandpack>
+
+```js
+import { RowList, Row } from './RowList.js';
+
+export default function App() {
+  return (
+    <RowList>
+      <Row>
+        <p>This is the first item.</p>
+      </Row>
+      <Row>
+        <p>This is the second item.</p>
+      </Row>
+      <Row>
+        <p>This is the third item.</p>
+      </Row>
+    </RowList>
+  );
+}
+```
+
+```js RowList.js
+export function RowList({ children }) {
+  return (
+    <div className="RowList">
+      {children}
+    </div>
+  );
+}
+
+export function Row({ children }) {
+  return (
+    <div className="Row">
+      {children}
+    </div>
+  );
+}
+```
+
+```css
+.RowList {
+  display: flex;
+  flex-direction: column;
+  border: 2px solid grey;
+  padding: 5px;
+}
+
+.Row {
+  border: 2px dashed black;
+  padding: 5px;
+  margin: 5px;
+}
+```
+
+</Sandpack>
+
+Unlike using `Children.map`, this approach does not wrap every child automatically. **However, this approach has a significant benefit compared to the [earlier example with `Children.map`](#transforming-children) because it works even if you keep extracting more components.** For example, it still works if you extract your own `MoreRows` component:
+
+<Sandpack>
+
+```js
+import { RowList, Row } from './RowList.js';
+
+export default function App() {
+  return (
+    <RowList>
+      <Row>
+        <p>This is the first item.</p>
+      </Row>
+      <MoreRows />
+    </RowList>
+  );
+}
+
+function MoreRows() {
+  return (
+    <>
+      <Row>
+        <p>This is the second item.</p>
+      </Row>
+      <Row>
+        <p>This is the third item.</p>
+      </Row>
+    </>
+  );
+}
+```
+
+```js RowList.js
+export function RowList({ children }) {
+  return (
+    <div className="RowList">
+      {children}
+    </div>
+  );
+}
+
+export function Row({ children }) {
+  return (
+    <div className="Row">
+      {children}
+    </div>
+  );
+}
+```
+
+```css
+.RowList {
+  display: flex;
+  flex-direction: column;
+  border: 2px solid grey;
+  padding: 5px;
+}
+
+.Row {
+  border: 2px dashed black;
+  padding: 5px;
+  margin: 5px;
+}
+```
+
+</Sandpack>
+
+This wouldn't work with `Children.map` because it would "see" `<MoreRows />` as a single child (and a single row).
+
+---
+
+### Accepting an array of objects as a prop {/*accepting-an-array-of-objects-as-a-prop*/}
+
+You can also explicitly pass an array as a prop. For example, this `RowList` accepts a `rows` array as a prop:
+
+<Sandpack>
+
+```js
+import { RowList, Row } from './RowList.js';
+
+export default function App() {
+  return (
+    <RowList rows={[
+      { id: 'first', content: <p>This is the first item.</p> },
+      { id: 'second', content: <p>This is the second item.</p> },
+      { id: 'third', content: <p>This is the third item.</p> }
+    ]} />
+  );
+}
+```
+
+```js RowList.js
+export function RowList({ rows }) {
+  return (
+    <div className="RowList">
+      {rows.map(row => (
+        <div className="Row" key={row.id}>
+          {row.content}
+        </div>
+      ))}
+    </div>
+  );
+}
+```
+
+```css
+.RowList {
+  display: flex;
+  flex-direction: column;
+  border: 2px solid grey;
+  padding: 5px;
+}
+
+.Row {
+  border: 2px dashed black;
+  padding: 5px;
+  margin: 5px;
+}
+```
+
+</Sandpack>
+
+Since `rows` is a regular JavaScript array, the `RowList` component can use built-in array methods like [`map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) on it.
+
+This pattern is especially useful when you want to be able to pass more information as structured data together with children. In the below example, the `TabSwitcher` component receives an array of objects as the `tabs` prop:
+
+<Sandpack>
+
+```js
+import TabSwitcher from './TabSwitcher.js';
+
+export default function App() {
+  return (
+    <TabSwitcher tabs={[
+      {
+        id: 'first',
+        header: 'First',
+        content: <p>This is the first item.</p>
+      },
+      {
+        id: 'second',
+        header: 'Second',
+        content: <p>This is the second item.</p>
+      },
+      {
+        id: 'third',
+        header: 'Third',
+        content: <p>This is the third item.</p>
+      }
+    ]} />
+  );
+}
+```
+
+```js TabSwitcher.js
+import { useState } from 'react';
+
+export default function TabSwitcher({ tabs }) {
+  const [selectedId, setSelectedId] = useState(tabs[0].id);
+  const selectedTab = tabs.find(tab => tab.id === selectedId);
+  return (
+    <>
+      {tabs.map(tab => (
+        <button
+          key={tab.id}
+          onClick={() => setSelectedId(tab.id)}
+        >
+          {tab.header}
+        </button>
+      ))}
+      <hr />
+      <div key={selectedId}>
+        <h3>{selectedTab.header}</h3>
+        {selectedTab.content}
+      </div>
+    </>
+  );
+}
+```
+
+</Sandpack>
+
+Unlike passing the children as JSX, this approach lets you associate some extra data like `header` with each item. Because you are working with the `tabs` directly, and it is an array, you do not need the `Children` methods.
+
+---
+
+### Calling a render prop to customize rendering {/*calling-a-render-prop-to-customize-rendering*/}
+
+Instead of producing JSX for every single item, you can also pass a function that returns JSX, and call that function when necessary. In this example, the `App` component passes a `renderContent` function to the `TabSwitcher` component. The `TabSwitcher` component calls `renderContent` only for the selected tab:
+
+<Sandpack>
+
+```js
+import TabSwitcher from './TabSwitcher.js';
+
+export default function App() {
+  return (
+    <TabSwitcher
+      tabIds={['first', 'second', 'third']}
+      getHeader={tabId => {
+        return tabId[0].toUpperCase() + tabId.slice(1);
+      }}
+      renderContent={tabId => {
+        return <p>This is the {tabId} item.</p>;
+      }}
+    />
+  );
+}
+```
+
+```js TabSwitcher.js
+import { useState } from 'react';
+
+export default function TabSwitcher({ tabIds, getHeader, renderContent }) {
+  const [selectedId, setSelectedId] = useState(tabIds[0]);
+  return (
+    <>
+      {tabIds.map((tabId) => (
+        <button
+          key={tabId}
+          onClick={() => setSelectedId(tabId)}
+        >
+          {getHeader(tabId)}
+        </button>
+      ))}
+      <hr />
+      <div key={selectedId}>
+        <h3>{getHeader(selectedId)}</h3>
+        {renderContent(selectedId)}
+      </div>
+    </>
+  );
+}
+```
+
+</Sandpack>
+
+A prop like `renderContent` is called a *render prop* because it is a prop that specifies how to render a piece of the user interface. However, there is nothing special about it: it is a regular prop which happens to be a function.
+
+Render props are functions, so you can pass information to them. For example, this `RowList` component passes the `id` and the `index` of each row to the `renderRow` render prop, which uses `index` to highlight even rows:
+
+<Sandpack>
+
+```js
+import { RowList, Row } from './RowList.js';
+
+export default function App() {
+  return (
+    <RowList
+      rowIds={['first', 'second', 'third']}
+      renderRow={(id, index) => {
+        return (
+          <Row isHighlighted={index % 2 === 0}>
+            <p>This is the {id} item.</p>
+          </Row> 
+        );
+      }}
+    />
+  );
+}
+```
+
+```js RowList.js
+import { Fragment } from 'react';
+
+export function RowList({ rowIds, renderRow }) {
+  return (
+    <div className="RowList">
+      <h1 className="RowListHeader">
+        Total rows: {rowIds.length}
+      </h1>
+      {rowIds.map((rowId, index) =>
+        <Fragment key={rowId}>
+          {renderRow(rowId, index)}
+        </Fragment>
+      )}
+    </div>
+  );
+}
+
+export function Row({ children, isHighlighted }) {
+  return (
+    <div className={[
+      'Row',
+      isHighlighted ? 'RowHighlighted' : ''
+    ].join(' ')}>
+      {children}
+    </div>
+  );
+}
+```
+
+```css
+.RowList {
+  display: flex;
+  flex-direction: column;
+  border: 2px solid grey;
+  padding: 5px;
+}
+
+.RowListHeader {
+  padding-top: 5px;
+  font-size: 25px;
+  font-weight: bold;
+  text-align: center;
+}
+
+.Row {
+  border: 2px dashed black;
+  padding: 5px;
+  margin: 5px;
+}
+
+.RowHighlighted {
+  background: #ffa;
+}
+```
+
+</Sandpack>
+
+This is another example of how parent and child components can cooperate without manipulating the children.
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+
+### I pass a custom component, but the `Children` methods don't show its render result {/*i-pass-a-custom-component-but-the-children-methods-dont-show-its-render-result*/}
+
+Suppose you pass two children to `RowList` like this:
+
+```js
+<RowList>
+  <p>First item</p>
+  <MoreRows />
+</RowList>
+```
+
+If you do `Children.count(children)` inside `RowList`, you will get `2`. Even if `MoreRows` renders 10 different items, or if it returns `null`, `Children.count(children)` will still be `2`. From the `RowList`'s perspective, it only "sees" the JSX it has received. It does not "see" the internals of the `MoreRows` component.
+
+The limitation makes it hard to extract a component. This is why [alternatives](#alternatives) are preferred to using `Children`.
diff --git a/beta/src/content/reference/react/Component.md b/beta/src/content/reference/react/Component.md
new file mode 100644
index 000000000..3063a0505
--- /dev/null
+++ b/beta/src/content/reference/react/Component.md
@@ -0,0 +1,2007 @@
+---
+title: Component
+---
+
+<Pitfall>
+
+We recommend to define components as functions instead of classes. [See how to migrate.](#alternatives)
+
+</Pitfall>
+
+<Intro>
+
+`Component` is the base class for the React components defined as [JavaScript classes.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes) Class components are still supported by React, but we don't recommend using them in new code.
+
+```js
+class Greeting extends Component {
+  render() {
+    return <h1>Hello, {this.props.name}!</h1>;
+  }
+}
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `Component` {/*component*/}
+
+To define a React component as a class, extend the built-in `Component` class and define a [`render` method:](#render)
+
+```js
+import { Component } from 'react';
+
+class Greeting extends Component {
+  render() {
+    return <h1>Hello, {this.props.name}!</h1>;
+  }
+}
+```
+
+Only the `render` method is required, other methods are optional.
+
+[See more examples below.](#usage)
+
+---
+
+### `context` {/*context*/}
+
+The [context](/learn/passing-data-deeply-with-context) of a class component is available as `this.context`. It is only available if you specify *which* context you want to receive using [`static contextType`](#static-contexttype) (modern) or [`static contextTypes`](#static-contexttypes) (deprecated).
+
+A class component can only read one context at a time.
+
+```js {2,5}
+class Button extends Component {
+  static contextType = ThemeContext;
+
+  render() {
+    const theme = this.context;
+    const className = 'button-' + theme;
+    return (
+      <button className={className}>
+        {this.props.children}
+      </button>
+    );
+  }
+}
+
+```
+
+<Note>
+
+Reading `this.context` in class components is equivalent to [`useContext`](/reference/react/useContext) in function components.
+
+[See how to migrate.](#migrating-a-component-with-context-from-a-class-to-a-function)
+
+</Note>
+
+---
+
+### `props` {/*props*/}
+
+The props passed to a class component are available as `this.props`.
+
+```js {3}
+class Greeting extends Component {
+  render() {
+    return <h1>Hello, {this.props.name}!</h1>;
+  }
+}
+
+<Greeting name="Taylor" />
+```
+
+<Note>
+
+Reading `this.props` in class components is equivalent to [declaring props](/learn/passing-props-to-a-component#step-2-read-props-inside-the-child-component) in function components.
+
+[See how to migrate.](#migrating-a-simple-component-from-a-class-to-a-function)
+
+</Note>
+
+---
+
+### `refs` {/*refs*/}
+
+<Deprecated>
+
+This API will be removed in a future major version of React. [Use `createRef` instead.](/reference/react/createRef)
+
+</Deprecated>
+
+Lets you access [legacy string refs](https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs) for this component.
+
+---
+
+### `state` {/*state*/}
+
+The state of a class component is available as `this.state`. The `state` field must be an object. Do not mutate the state directly. If you wish to change the state, call `setState` with the new state.
+
+```js {2-4,7-9,18}
+class Counter extends Component {
+  state = {
+    age: 42,
+  };
+
+  handleAgeChange = () => {
+    this.setState({
+      age: this.state.age + 1 
+    });
+  };
+
+  render() {
+    return (
+      <>
+        <button onClick={this.handleAgeChange}>
+        Increment age
+        </button>
+        <p>You are {this.state.age}.</p>
+      </>
+    );
+  }
+}
+```
+
+<Note>
+
+Defining `state` in class components is equivalent to calling [`useState`](/reference/react/useState) in function components.
+
+[See how to migrate.](#migrating-a-component-with-state-from-a-class-to-a-function)
+
+</Note>
+
+---
+
+### `constructor(props)` {/*constructor*/}
+
+The [constructor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor) runs before your class component *mounts* (gets added to the screen). Typically, a constructor is only used for two purposes in React. It lets you declare state and [bind](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind) your class methods to the class instance:
+
+```js {2-6}
+class Counter extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { counter: 0 };
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  handleClick() {
+    // ...
+  }
+```
+
+If you use modern JavaScript syntax, constructors are rarely needed. Instead, you can rewrite this code above using the [public class field syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Public_class_fields) which is supported both by modern browsers and tools like [Babel:](https://babeljs.io/)
+
+```js {2,4}
+class Counter extends Component {
+  state = { counter: 0 };
+
+  handleClick = () => {
+    // ...
+  }
+```
+
+A constructor should not contain any side effects or subscriptions.
+
+#### Parameters {/*constructor-parameters*/}
+
+* `props`: The component's initial props.
+
+#### Returns {/*constructor-returns*/}
+
+`constructor` should not return anything.
+
+#### Caveats {/*constructor-caveats*/}
+
+* Do not run any side effects or subscriptions in the constructor. Instead, use [`componentDidMount`](#componentdidmount) for that.
+
+* Inside a constructor, you need to call `super(props)` before any other statement. If you don't do that, `this.props` will be `undefined` while the constructor runs, which can be confusing and cause bugs.
+
+* Constructor is the only place where you can assign [`this.state`](#state) directly. In all other methods, you need to use [`this.setState()`](#setstate) instead. Do not call `setState` in the constructor.
+
+* When you use [server rendering,](/reference/react-dom/server) the constructor will run on the server too, followed by the [`render`](#render) method. However, lifecycle methods like `componentDidMount` or `componentWillUnmount` will not run on the server.
+
+* When [Strict Mode](/reference/react/StrictMode) is on, React will call `constructor` twice in development and then throw away one of the instances. This helps you notice the accidental side effects that need to be moved out of the `constructor`.
+
+<Note>
+
+There is no exact equivalent for `constructor` in function components. To declare state in a function component, call [`useState`.](/reference/react/useState) To avoid recalculating the initial state, [pass a function to `useState`.](/reference/react/useState#avoiding-recreating-the-initial-state)
+
+</Note>
+
+---
+
+### `componentDidCatch(error, info)` {/*componentdidcatch*/}
+
+If you define `componentDidCatch`, React will call it when some child component (including distant children) throws an error during rendering. This lets you log that error to an error reporting service in production.
+
+Typically, it is used together with [`static getDerivedStateFromError`](#static-getderivedstatefromerror) which lets you update state in response to an error and display an error message to the user. A component with these methods is called an *error boundary.*
+
+```js {12-19}
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error) {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true };
+  }
+
+  componentDidCatch(error, info) {
+    // Example "componentStack":
+    //   in ComponentThatThrows (created by App)
+    //   in ErrorBoundary (created by App)
+    //   in div (created by App)
+    //   in App
+    logErrorToMyService(error, info.componentStack);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      // You can render any custom fallback UI
+      return this.props.fallback;
+    }
+
+    return this.props.children;
+  }
+}
+```
+
+Then you can wrap a part of your component tree with it:
+
+```js {1,3}
+<ErrorBoundary fallback={<p>Something went wrong</p>}>
+  <Profile />
+</ErrorBoundary>
+```
+
+If `Profile` or its child component throws an error, `ErrorBoundary` will "catch" that error, display a fallback UI with the error message you've provided, and send a production error report to your error reporting service.
+
+You don't need to wrap every component into a separate error boundary. When you think about the [granularity of error boundaries,](https://aweary.dev/fault-tolerance-react/) consider where it makes sense to display an error message. For example, in a messaging app, it makes sense to place an error boundary around the list of conversations. It also makes sense to place one around every individual message. However, it wouldn't make sense to place a boundary around every avatar.
+
+#### Parameters {/*componentdidcatch-parameters*/}
+
+* `error`: The error that was thrown. In practice, it will usually be an instance of [`Error`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error) but this is not guaranteed because JavaScript allows to [`throw`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/throw) any value, including strings or even `null`.
+
+* `info`: An object containing additional information about the error. Its `componentStack` field contains a stack trace with the component that threw, as well as the names and source locations of all its parent components. In production, the component names will be minified. If you set up production error reporting, you can decode the component stack using sourcemaps the same way as you would do for regular JavaScript error stacks.
+
+#### Returns {/*componentdidcatch-returns*/}
+
+`componentDidCatch` should not return anything.
+
+#### Caveats {/*componentdidcatch-caveats*/}
+
+* In the past, it was common to call `setState` inside `componentDidCatch` in order to update the UI and display the fallback error message. This is deprecated in favor of defining [`static getDerivedStateFromError`.](#static-getderivedstatefromerror)
+
+* Production and development builds of React slightly differ in the way `componentDidCatch` handles errors. In development, the errors will bubble up to `window`, which means that any `window.onerror` or `window.addEventListener('error', callback)` will intercept the errors that have been caught by `componentDidCatch`. In production, instead, the errors will not bubble up, which means any ancestor error handler will only receive errors not explicitly caught by `componentDidCatch`.
+
+<Note>
+
+There is no direct equivalent for `componentDidCatch` in function components yet. If you'd like to avoid creating class components, write a single `ErrorBoundary` component like above and use it throughout your app. Alternatively, you can use the [`react-error-boundary`](https://github.com/bvaughn/react-error-boundary) package which does that for you.
+
+</Note>
+
+---
+
+### `componentDidMount()` {/*componentdidmount*/}
+
+If you define the `componentDidMount` method, React will call it when your component is first added *(mounted)* to the screen. This is a common place to start data fetching, set up subscriptions, or manipulate the DOM nodes.
+
+If you implement `componentDidMount`, you usually need to implement other lifecycle methods to avoid bugs. For example, if `componentDidMount` reads some state or props, you also have to implement [`componentDidUpdate`](#componentdidupdate) to handle their changes, and [`componentWillUnmount`](#componentwillunmount) to clean up whatever `componentDidMount` was doing.
+
+```js {6-8}
+class ChatRoom extends Component {
+  state = {
+    serverUrl: 'https://localhost:1234'
+  };
+
+  componentDidMount() {
+    this.setupConnection();
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (
+      this.props.roomId !== prevProps.roomId ||
+      this.state.serverUrl !== prevState.serverUrl
+    ) {
+      this.destroyConnection();
+      this.setupConnection();
+    }
+  }
+
+  componentWillUnmount() {
+    this.destroyConnection();
+  }
+
+  // ...
+}
+```
+
+[See more examples.](#adding-lifecycle-methods-to-a-class-component)
+
+#### Parameters {/*componentdidmount-parameters*/}
+
+`componentDidMount` does not take any parameters.
+
+#### Returns {/*componentdidmount-returns*/}
+
+`componentDidMount` should not return anything.
+
+#### Caveats {/*componentdidmount-caveats*/}
+
+- When [Strict Mode](/reference/react/StrictMode) is on, in development React will call `componentDidMount`, then immediately call [`componentWillUnmount`,](#componentwillunmount) and then call `componentDidMount` again. This helps you notice if you forgot to implement `componentWillUnmount` or if its logic doesn't fully "mirror" what `componentDidMount` does.
+
+- Although you may call [`setState`](#setstate) immediately in `componentDidMount`, it's best to avoid that when you can. It will trigger an extra rendering, but it will happen before the browser updates the screen. This guarantees that even though the [`render`](#render) will be called twice in this case, the user won't see the intermediate state. Use this pattern with caution because it often causes performance issues. In most cases, you should be able to assign the initial state in the [`constructor`](#constructor) instead. It can, however, be necessary for cases like modals and tooltips when you need to measure a DOM node before rendering something that depends on its size or position.
+
+<Note>
+
+For many use cases, defining `componentDidMount`, `componentDidUpdate`, and `componentWillUnmount` together in class components is equivalent to calling [`useEffect`](/reference/react/useEffect) in function components. In the rare cases where it's important for the code to run before browser paint, [`useLayoutEffect`](/reference/react/useLayoutEffect) is a closer match.
+
+[See how to migrate.](#migrating-a-component-with-lifecycle-methods-from-a-class-to-a-function)
+
+</Note>
+
+---
+
+### `componentDidUpdate(prevProps, prevState, snapshot?)` {/*componentdidupdate*/}
+
+If you define the `componentDidUpdate` method, React will call it immediately after your component has been re-rendered with updated props or state.  This method is not called for the initial render.
+
+You can use it to manipulate the DOM after an update. This is also a common place to do network requests as long as you compare the current props to previous props (e.g. a network request may not be necessary if the props have not changed). Typically, you'd use it together with [`componentDidMount`](#componentdidmount) and [`componentWillUnmount`:](#componentwillunmount)
+
+```js {10-18}
+class ChatRoom extends Component {
+  state = {
+    serverUrl: 'https://localhost:1234'
+  };
+
+  componentDidMount() {
+    this.setupConnection();
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (
+      this.props.roomId !== prevProps.roomId ||
+      this.state.serverUrl !== prevState.serverUrl
+    ) {
+      this.destroyConnection();
+      this.setupConnection();
+    }
+  }
+
+  componentWillUnmount() {
+    this.destroyConnection();
+  }
+
+  // ...
+}
+```
+
+[See more examples.](#adding-lifecycle-methods-to-a-class-component)
+
+
+#### Parameters {/*componentdidupdate-parameters*/}
+
+* `prevProps`: Props before the update. Compare `prevProps` to [`this.props`](#props) to determine what changed.
+
+* `prevState`: State before the update. Compare `prevState` to [`this.state`](#state) to determine what changed.
+
+* `snapshot`: If you implemented [`getSnapshotBeforeUpdate`](#getsnapshotbeforeupdate), `snapshot` will contain the value you returned from that method. Otherwise, it will be `undefined`.
+
+#### Returns {/*componentdidupdate-returns*/}
+
+`componentDidUpdate` should not return anything.
+
+#### Caveats {/*componentdidupdate-caveats*/}
+
+- `componentDidUpdate` will not get called if [`shouldComponentUpdate`](#shouldcomponentupdate) is defined and returns `false`.
+
+- The logic inside `componentDidUpdate` should usually be wrapped in conditions comparing `this.props` with `prevProps`, and `this.state` with `prevState`. Otherwise, there's a risk of creating infinite loops.
+
+- Although you may call [`setState`](#setstate) immediately in `componentDidUpdate`, it's best to avoid that when you can. It will trigger an extra rendering, but it will happen before the browser updates the screen. This guarantees that even though the [`render`](#render) will be called twice in this case, the user won't see the intermediate state. This pattern often causes performance issues, but it may be necessary for rare cases like modals and tooltips when you need to measure a DOM node before rendering something that depends on its size or position.
+
+<Note>
+
+For many use cases, defining `componentDidMount`, `componentDidUpdate`, and `componentWillUnmount` together in class components is equivalent to calling [`useEffect`](/reference/react/useEffect) in function components. In the rare cases where it's important for the code to run before browser paint, [`useLayoutEffect`](/reference/react/useLayoutEffect) is a closer match.
+
+[See how to migrate.](#migrating-a-component-with-lifecycle-methods-from-a-class-to-a-function)
+
+</Note>
+---
+
+### `componentWillMount()` {/*componentwillmount*/}
+
+<Deprecated>
+
+This API has been renamed from `componentWillMount` to [`UNSAFE_componentWillMount`.](#unsafe_componentwillmount) The old name has been deprecated. In a future major version of React, only the new name will work.
+
+Run the [`rename-unsafe-lifecycles` codemod](https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles) to automatically update your components.
+
+</Deprecated>
+
+---
+
+### `componentWillReceiveProps(nextProps)` {/*componentwillreceiveprops*/}
+
+<Deprecated>
+
+This API has been renamed from `componentWillReceiveProps` to [`UNSAFE_componentWillReceiveProps`.](#unsafe_componentwillreceiveprops) The old name has been deprecated. In a future major version of React, only the new name will work.
+
+Run the [`rename-unsafe-lifecycles` codemod](https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles) to automatically update your components.
+
+</Deprecated>
+
+---
+
+### `componentWillUpdate(nextProps, nextState)` {/*componentwillupdate*/}
+
+<Deprecated>
+
+This API has been renamed from `componentWillUpdate` to [`UNSAFE_componentWillUpdate`.](#unsafe_componentwillupdate) The old name has been deprecated. In a future major version of React, only the new name will work.
+
+Run the [`rename-unsafe-lifecycles` codemod](https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles) to automatically update your components.
+
+</Deprecated>
+
+---
+
+### `componentWillUnmount()` {/*componentwillunmount*/}
+
+If you define the `componentWillUnmount` method, React will call it before your component is removed *(unmounted)* from the screen. This is a common place to cancel data fetching or remove subscriptions.
+
+The logic inside `componentWillUnmount` should "mirror" the logic inside [`componentDidMount`.](#componentdidmount) For example, if `componentDidMount` sets up a subscription, `componentWillUnmount` should clean up that subscription. If the cleanup logic your `componentWillUnmount` reads some props or state, you will usually also need to implement [`componentDidUpdate`](#componentdidupdate) to clean up resources (such as subscriptions) corresponding to the old props and state.
+
+```js {20-22}
+class ChatRoom extends Component {
+  state = {
+    serverUrl: 'https://localhost:1234'
+  };
+
+  componentDidMount() {
+    this.setupConnection();
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (
+      this.props.roomId !== prevProps.roomId ||
+      this.state.serverUrl !== prevState.serverUrl
+    ) {
+      this.destroyConnection();
+      this.setupConnection();
+    }
+  }
+
+  componentWillUnmount() {
+    this.destroyConnection();
+  }
+
+  // ...
+}
+```
+
+[See more examples.](#adding-lifecycle-methods-to-a-class-component)
+
+#### Parameters {/*componentwillunmount-parameters*/}
+
+`componentWillUnmount` does not take any parameters.
+
+#### Returns {/*componentwillunmount-returns*/}
+
+`componentWillUnmount` should not return anything.
+
+#### Caveats {/*componentwillunmount-caveats*/}
+
+- When [Strict Mode](/reference/react/StrictMode) is on, in development React will call [`componentDidMount`,](#componentdidmount) then immediately call `componentWillUnmount`, and then call `componentDidMount` again. This helps you notice if you forgot to implement `componentWillUnmount` or if its logic doesn't fully "mirror" what `componentDidMount` does.
+
+<Note>
+
+For many use cases, defining `componentDidMount`, `componentDidUpdate`, and `componentWillUnmount` together in class components is equivalent to calling [`useEffect`](/reference/react/useEffect) in function components. In the rare cases where it's important for the code to run before browser paint, [`useLayoutEffect`](/reference/react/useLayoutEffect) is a closer match.
+
+[See how to migrate.](#migrating-a-component-with-lifecycle-methods-from-a-class-to-a-function)
+
+</Note>
+
+---
+
+### `forceUpdate(callback?)` {/*forceupdate*/}
+
+Forces a component to re-render.
+
+Usually, this is not necessary. If your component's [`render`](#render) method only reads from [`this.props`](#props), [`this.state`](#state), or [`this.context`,](#context) it will re-render automatically when you call [`setState`](#setstate) inside your component or one of its parents. However, if your component's `render` method reads directly from an external data source, you have to tell React to update the user interface when that data source changes. That's what `forceUpdate` lets you do.
+
+Try to avoid all uses of `forceUpdate` and only read from `this.props` and `this.state` in `render`.
+
+#### Parameters {/*forceupdate-parameters*/}
+
+* **optional** `callback` If specified, React will call the `callback` you've provided after the update is committed.
+
+#### Returns {/*forceupdate-returns*/}
+
+`forceUpdate` does not return anything.
+
+#### Caveats {/*forceupdate-caveats*/}
+
+- If you call `forceUpdate`, React will re-render without calling [`shouldComponentUpdate`.](#shouldcomponentupdate)
+
+<Note>
+
+Reading an external data source and forcing class components to re-render in response to its changes with `forceUpdate` has been superseded by [`useSyncExternalStore`](/reference/react/useSyncExternalStore) in function components.
+
+</Note>
+
+---
+
+### `getChildContext()` {/*getchildcontext*/}
+
+<Deprecated>
+
+This API will be removed in a future major version of React. [Use `Context.Provider` instead.](/reference/react/createContext#provider)
+
+</Deprecated>
+
+Lets you specify the values for the [legacy context](https://reactjs.org/docs/legacy-context.html) is provided by this component.
+
+---
+
+### `getSnapshotBeforeUpdate(prevProps, prevState)` {/*getsnapshotbeforeupdate*/}
+
+If you implement `getSnapshotBeforeUpdate`, React will call it immediately before React updates the DOM. It enables your component to capture some information from the DOM (e.g. scroll position) before it is potentially changed. Any value returned by this lifecycle method will be passed as a parameter to [`componentDidUpdate`.](#componentdidupdate)
+
+For example, you can use it in a UI like a chat thread that needs to preserve its scroll position during updates:
+
+```js {7-15,17}
+class ScrollingList extends React.Component {
+  constructor(props) {
+    super(props);
+    this.listRef = React.createRef();
+  }
+
+  getSnapshotBeforeUpdate(prevProps, prevState) {
+    // Are we adding new items to the list?
+    // Capture the scroll position so we can adjust scroll later.
+    if (prevProps.list.length < this.props.list.length) {
+      const list = this.listRef.current;
+      return list.scrollHeight - list.scrollTop;
+    }
+    return null;
+  }
+
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    // If we have a snapshot value, we've just added new items.
+    // Adjust scroll so these new items don't push the old ones out of view.
+    // (snapshot here is the value returned from getSnapshotBeforeUpdate)
+    if (snapshot !== null) {
+      const list = this.listRef.current;
+      list.scrollTop = list.scrollHeight - snapshot;
+    }
+  }
+
+  render() {
+    return (
+      <div ref={this.listRef}>{/* ...contents... */}</div>
+    );
+  }
+}
+```
+
+In the above example, it is important to read the `scrollHeight` property directly in `getSnapshotBeforeUpdate`. It is not safe to read it in [`render`](#render), [`UNSAFE_componentWillReceiveProps`](#unsafe_componentwillreceiveprops), or [`UNSAFE_componentWillUpdate`](#unsafe_componentwillupdate) because there is a potential time gap between these methods getting called and React updating the DOM.
+
+#### Parameters {/*getsnapshotbeforeupdate-parameters*/}
+
+* `prevProps`: Props before the update. Compare `prevProps` to [`this.props`](#props) to determine what changed.
+
+* `prevState`: State before the update. Compare `prevState` to [`this.state`](#state) to determine what changed.
+
+#### Returns {/*getsnapshotbeforeupdate-returns*/}
+
+You should return a snapshot value of any type that you'd like, or `null`. The value you returned will be passed as the third argument to [`componentDidUpdate`.](#componentdidupdate)
+
+#### Caveats {/*getsnapshotbeforeupdate-caveats*/}
+
+- `getSnapshotBeforeUpdate` will not get called if [`shouldComponentUpdate`](#shouldcomponentupdate) is defined and returns `false`.
+
+<Note>
+
+At the moment, there is no equivalent to `getSnapshotBeforeUpdate` for function components. This use case is very uncommon, but if you have the need for it, for now you'll have to write a class component.
+
+</Note>
+
+---
+
+### `render()` {/*render*/}
+
+The `render` method is the only required method in a class component.
+
+The `render` method should specify what you want to appear on the screen, for example:
+
+```js {4-6}
+import { Component } from 'react';
+
+class Greeting extends Component {
+  render() {
+    return <h1>Hello, {this.props.name}!</h1>;
+  }
+}
+```
+
+React may call `render` at any moment, so you shouldn't assume that it runs at a particular time. Usually, the `render` method should return a piece of [JSX](/learn/writing-markup-with-jsx), but a few [other return types](#render-returns) (like strings) are supported. To calculate the returned JSX, the `render` method can read [`this.props`](#props), [`this.state`](#state), and [`this.context`](#context).
+
+You should write the `render` method as a pure function, meaning that it should return the same result if props, state, and context are the same. It also shouldn't contain side effects (like setting up subscriptions) or interact with the browser APIs. Side effects should happen either in event handlers or methods like [`componentDidMount`.](#componentdidmount)
+
+#### Parameters {/*render-parameters*/}
+
+* `prevProps`: Props before the update. Compare `prevProps` to [`this.props`](#props) to determine what changed.
+
+* `prevState`: State before the update. Compare `prevState` to [`this.state`](#state) to determine what changed.
+
+#### Returns {/*render-returns*/}
+
+`render` can return any valid React node. This includes React elements such as `<div />`, strings, numbers, [portals](/reference/react-dom/createPortal), empty nodes (`null`, `undefined`, `true`, and `false`), and arrays of React nodes.
+
+#### Caveats {/*render-caveats*/}
+
+- `render` should be written as a pure function of props, state, and context. It should not have side effects.
+
+- `render` will not get called if [`shouldComponentUpdate`](#shouldcomponentupdate) is defined and returns `false`.
+
+- When [Strict Mode](/reference/react/StrictMode) is on, React will call `render` twice in development and then throw away one of the results. This helps you notice the accidental side effects that need to be moved out of the `render` method.
+
+- There is no one-to-one correspondence between the `render` call and the subsequent `componentDidMount` or `componentDidUpdate` call. Some of the `render` call results may be discarded by React when it's beneficial.
+
+---
+
+### `setState(nextState, callback?)` {/*setstate*/}
+
+Call `setState` to update the state of your React component.
+
+```js {8-10}
+class Form extends Component {
+  state = {
+    name: 'Taylor',
+  };
+
+  handleNameChange = (e) => {
+    const newName = e.target.value;
+    this.setState({
+      name: newName
+    });
+  }
+
+  render() {
+    return (
+      <>
+        <input value={this.state.name} onChange={this.handleNameChange} />
+        <p>Hello, {this.state.name}.
+      </>
+    );
+  }
+}
+```
+
+`setState` enqueues changes to the component state. It tells React that this component and its children need to re-render with the new state. This is the main way you'll update the user interface in response to interactions.
+
+<Pitfall>
+
+Calling `setState` **does not** change the current state in the already executing code:
+
+```js {6}
+function handleClick() {
+  console.log(this.state.name); // "Taylor"
+  this.setState({
+    name: 'Robin'
+  });
+  console.log(this.state.name); // Still "Taylor"!
+}
+```
+
+It only affects what `this.state` will return starting from the *next* render.
+
+</Pitfall>
+
+You can also pass a function to `setState`. It lets you update state based on the previous state:
+
+```js {2-6}
+  handleIncreaseAge = () => {
+    this.setState(prevState => {
+      return {
+        age: prevState.age + 1
+      };
+    });
+  }
+```
+
+You don't have to do this, but it's handy if you want to update state multiple times during the same event.
+
+#### Parameters {/*setstate-parameters*/}
+
+* `nextState`: Either an object or a function.
+  * If you pass an object as `nextState`, it will be shallowly merged into `this.state`.
+  * If you pass a function as `nextState`, it will be treated as an _updater function_. It must be pure, should take the pending state and props as arguments, and should return the object to be shallowly merged into `this.state`. React will put your updater function in a queue and re-render your component. During the next render, React will calculate the next state by applying all of the queued updaters to the previous state.
+
+* **optional** `callback`: If specified, React will call the `callback` you've provided after the update is committed.
+
+#### Returns {/*setstate-returns*/}
+
+`setState` does not return anything.
+
+#### Caveats {/*setstate-caveats*/}
+
+- Think of `setState` as a *request* rather than an immediate command to update the component. When multiple components update their state in response to an event, React will batch their updates and re-render them together in a single pass at the end of the event. In the rare case that you need to force a particular state update to be applied synchronously, you may wrap it in [`flushSync`,](/reference/react-dom/flushSync) but this may hurt performance.
+
+- `setState` does not update `this.state` immediately. This makes reading `this.state` right after calling `setState` a potential pitfall. Instead, use [`componentDidUpdate`](#componentdidupdate) or the setState `callback` argument, either of which are guaranteed to fire after the update has been applied. If you need to set the state based on the previous state, you can pass a function to `nextState` as described above.
+
+<Note>
+
+Calling `setState` in class components is similar to calling a [`set` function](/reference/react/useState#setstate) in function components.
+
+[See how to migrate.](#migrating-a-component-with-state-from-a-class-to-a-function)
+
+</Note>
+
+---
+
+### `shouldComponentUpdate(nextProps, nextState, nextContext)` {/*shouldcomponentupdate*/}
+
+If you define `shouldComponentUpdate`, React will call it to determine whether a re-render can be skipped.
+
+If you are confident you want to write it by hand, you may compare `this.props` with `nextProps` and `this.state` with `nextState` and return `false` to tell React the update can be skipped.
+
+```js {6-18}
+class Rectangle extends Component {
+  state = {
+    isHovered: false
+  };
+
+  shouldComponentUpdate(nextProps, nextState) {
+    if (
+      nextProps.position.x === this.props.position.x &&
+      nextProps.position.y === this.props.position.y &&
+      nextProps.size.width === this.props.size.width &&
+      nextProps.size.height === this.props.size.height &&
+      nextState.isHovered === this.state.isHovered
+    ) {
+      // Nothing has changed, so a re-render is unnecessary
+      return false;
+    }
+    return true;
+  }
+
+  // ...
+}
+
+```
+
+React calls `shouldComponentUpdate` before rendering when new props or state are being received. Defaults to `true`. This method is not called for the initial render or when [`forceUpdate`](#forceupdate) is used.
+
+#### Parameters {/*shouldcomponentupdate-parameters*/}
+
+- `nextProps`: The next props that the component is about to render with. Compare `nextProps` to [`this.props`](#props) to determine what changed.
+- `nextState`: The next props that the component is about to render with. Compare `nextState` to [`this.state`](#props) to determine what changed.
+- `nextContext`: The next props that the component is about to render with. Compare `nextContext` to [`this.context`](#context) to determine what changed. Only available if you specify [`static contextType`](#static-contexttype) (modern) or [`static contextTypes`](#static-contexttypes) (legacy).
+
+#### Returns {/*shouldcomponentupdate-returns*/}
+
+Return `true` if you want the component to re-render. That's the default behavior.
+
+Return `false` to tell React that re-rendering can be skipped.
+
+#### Caveats {/*shouldcomponentupdate-caveats*/}
+
+- This method *only* exists as a performance optimization. If your component breaks without it, fix that first. 
+
+- Consider using [`PureComponent`](/reference/react/PureComponent) instead of writing `shouldComponentUpdate` by hand. `PureComponent` shallowly compares props and state, and reduces the chance that you'll skip a necessary update.
+
+- We do not recommend doing deep equality checks or using `JSON.stringify` in `shouldComponentUpdate`. It makes performance unpredictable and dependent on the data structure of every prop and state. In the best case, you risk introducing multi-second stalls to your application, and in the worst case you risk crashing it.
+
+- Returning `false` does not prevent child components from re-rendering when *their* state changes.
+
+- Returning `false` does not *guarantee* that the component will not re-render. React will use the return value as a hint but it may still choose to re-render your component if it makes sense to do for other reasons.
+
+<Note>
+
+Optimizing class components with `shouldComponentUpdate` is similar to optimizing function components with [`memo`.](/reference/react/memo) Function components also offer more granular optimization with [`useMemo`.](/reference/react/useMemo)
+
+</Note>
+
+---
+
+### `UNSAFE_componentWillMount()` {/*unsafe_componentwillmount*/}
+
+If you define `UNSAFE_componentWillMount`, React will call it immediately after the [`constructor`.](#constructor) It only exists for historical reasons and should not be used in any new code. Instead, use one of the alternatives:
+
+- To initialize state, declare [`state`](#state) as a class field or set `this.state` inside the [`constructor`.](#constructor)
+- If you need to run a side effect or set up a subscription, move that logic to [`componentDidMount`](#componentdidmount) instead.
+
+[See examples of migrating away from unsafe lifecycles.](/blog/2018/03/27/update-on-async-rendering#examples)
+
+#### Parameters {/*unsafe_componentwillmount-parameters*/}
+
+`UNSAFE_componentWillMount` does not take any parameters.
+
+#### Returns {/*unsafe_componentwillmount-returns*/}
+
+`UNSAFE_componentWillMount` should not return anything.
+
+#### Caveats {/*unsafe_componentwillmount-caveats*/}
+
+- `UNSAFE_componentWillMount` will not get called if the component implements [`static getDerivedStateFromProps`](getDerivedStateFromProps) or [`getSnapshotBeforeUpdate`.](#getsnapshotbeforeupdate)
+
+- Despite its naming, `UNSAFE_componentWillMount` does not guarantee that the component *will* get mounted if your app uses modern React features like [`Suspense`.](/reference/react/Suspense) If a render attempt is suspended (for example, because the code for some child component has not loaded yet), React will throw the in-progress tree away and attempt to construct the component from scratch during the next attempt. This is why this method is "unsafe". Code that relies on mounting (like adding a subscription) should go into [`componentDidMount`.](#componentdidmount)
+
+- `UNSAFE_componentWillMount` is the only lifecycle method that runs during [server rendering.](/reference/react-dom/server) For all practical purposes, it is identical to [`constructor`,](#constructor) so you should use the `constructor` for this type of logic instead.
+
+<Note>
+
+Calling [`setState`](#setstate) inside `UNSAFE_componentWillMount` in a class component to initialize state is equivalent to passing that state as the initial state to [`useState`](/reference/react/useState) in a function component.
+
+</Note>
+
+---
+
+### `UNSAFE_componentWillReceiveProps(nextProps, nextContext)` {/*unsafe_componentwillreceiveprops*/}
+
+If you define `UNSAFE_componentWillReceiveProps`, React will call it when the component receives new props. It only exists for historical reasons and should not be used in any new code. Instead, use one of the alternatives:
+
+- If you need to **run a side effect** (for example, fetch data, run an animation, or reinitialize a subscription) in response to prop changes, move that logic to [`componentDidUpdate`](#componentdidupdate) instead.
+- If you need to **avoid re-computing some data only when a prop changes,** use a [memoization helper](/blog/2018/06/07/you-probably-dont-need-derived-state#what-about-memoization) instead.
+- If you need to **"reset" some state when a prop changes,** consider either making a component [fully controlled](/blog/2018/06/07/you-probably-dont-need-derived-state#recommendation-fully-controlled-component) or [fully uncontrolled with a key](/blog/2018/06/07/you-probably-dont-need-derived-state#recommendation-fully-uncontrolled-component-with-a-key) instead.
+- If you need to **"adjust" some state when a prop changes,** check whether you can compute all the necessary information from props alone during rendering. If you can't, use [`static getDerivedStateFromProps`](/reference/react/Component#static-getderivedstatefromprops) instead.
+
+[See examples of migrating away from unsafe lifecycles.](/blog/2018/03/27/update-on-async-rendering#updating-state-based-on-props)
+
+#### Parameters {/*unsafe_componentwillreceiveprops-parameters*/}
+
+- `nextProps`: The next props that the component is about to receive from its parent component. Compare `nextProps` to [`this.props`](#props) to determine what changed.
+- `nextContext`: The next props that the component is about to receive from the closest provider. Compare `nextContext` to [`this.context`](#context) to determine what changed. Only available if you specify [`static contextType`](#static-contexttype) (modern) or [`static contextTypes`](#static-contexttypes) (legacy).
+
+#### Returns {/*unsafe_componentwillreceiveprops-returns*/}
+
+`UNSAFE_componentWillReceiveProps` should not return anything.
+
+#### Caveats {/*unsafe_componentwillreceiveprops-caveats*/}
+
+- `UNSAFE_componentWillReceiveProps` will not get called if the component implements [`static getDerivedStateFromProps`](getDerivedStateFromProps) or [`getSnapshotBeforeUpdate`.](#getsnapshotbeforeupdate)
+
+- Despite its naming, `UNSAFE_componentWillReceiveProps` does not guarantee that the component *will* receive those props if your app uses modern React features like [`Suspense`.](/reference/react/Suspense) If a render attempt is suspended (for example, because the code for some child component has not loaded yet), React will throw the in-progress tree away and attempt to construct the component from scratch during the next attempt. By the time of the next render attempt, the props might be different. This is why this method is "unsafe". Code that should run only for committed updates (like resetting a subscription) should go into [`componentDidUpdate`.](#componentdidupdate)
+
+- `UNSAFE_componentWillReceiveProps` does not mean that the component has received *different* props than the last time. You need to compare `nextProps` and `this.props` yourself to check if something changed.
+
+- React doesn't call `UNSAFE_componentWillReceiveProps` with initial props during mounting. It only calls this method if some of component's props are going to be updated. For example, calling [`setState`](#setstate) doesn't generally trigger `UNSAFE_componentWillReceiveProps` inside the same component.
+
+<Note>
+
+Calling [`setState`](#setstate) inside `UNSAFE_componentWillReceiveProps` in a class component to "adjust" state is equivalent to [calling the `set` function from `useState` during rendering](/reference/react/useState#storing-information-from-previous-renders) in a function component.
+
+</Note>
+
+---
+
+### `UNSAFE_componentWillUpdate(nextProps, nextState)` {/*unsafe_componentwillupdate*/}
+
+
+If you define `UNSAFE_componentWillUpdate`, React will call it before rendering with the new props or state. It only exists for historical reasons and should not be used in any new code. Instead, use one of the alternatives:
+
+- If you need to run a side effect (for example, fetch data, run an animation, or reinitialize a subscription) in response to prop or state changes, move that logic to [`componentDidUpdate`](#componentdidupdate) instead.
+- If you need to read some information from the DOM (for example, to save the current scroll position) so that you can use it in [`componentDidUpdate`](#componentdidupdate) later, read it inside [`getSnapshotBeforeUpdate`](#getsnapshotbeforeupdate) instead.
+
+[See examples of migrating away from unsafe lifecycles.](/blog/2018/03/27/update-on-async-rendering#examples)
+
+#### Parameters {/*unsafe_componentwillupdate-parameters*/}
+
+- `nextProps`: The next props that the component is about to render with. Compare `nextProps` to [`this.props`](#props) to determine what changed.
+- `nextState`: The next state that the component is about to render with. Compare `nextState` to [`this.state`](#state) to determine what changed.
+
+#### Returns {/*unsafe_componentwillupdate-returns*/}
+
+`UNSAFE_componentWillUpdate` should not return anything.
+
+#### Caveats {/*unsafe_componentwillupdate-caveats*/}
+
+- `UNSAFE_componentWillUpdate` will not get called if [`shouldComponentUpdate`](#shouldcomponentupdate) is defined and returns `false`.
+
+- `UNSAFE_componentWillUpdate` will not get called if the component implements [`static getDerivedStateFromProps`](getDerivedStateFromProps) or [`getSnapshotBeforeUpdate`.](#getsnapshotbeforeupdate)
+
+- It's not supported to call [`setState`](#setstate) (or any method that leads to `setState` being called, like dispatching a Redux action) during `componentWillUpdate`.
+
+- Despite its naming, `UNSAFE_componentWillUpdate` does not guarantee that the component *will* update if your app uses modern React features like [`Suspense`.](/reference/react/Suspense) If a render attempt is suspended (for example, because the code for some child component has not loaded yet), React will throw the in-progress tree away and attempt to construct the component from scratch during the next attempt. By the time of the next render attempt, the props and state might be different. This is why this method is "unsafe". Code that should run only for committed updates (like resetting a subscription) should go into [`componentDidUpdate`.](#componentdidupdate)
+
+- `UNSAFE_componentWillUpdate` does not mean that the component has received *different* props or state than the last time. You need to compare `nextProps` with `this.props` and `nextState` with `this.state` yourself to check if something changed.
+
+- React doesn't call `UNSAFE_componentWillUpdate` with initial props and state during mounting.
+
+<Note>
+
+There is no direct equivalent to `UNSAFE_componentWillUpdate` in function components.
+
+</Note>
+
+---
+
+### `static childContextTypes` {/*static-childcontexttypes*/}
+
+<Deprecated>
+
+This API will be removed in a future major version of React. [Use `static contextType` instead.](#static-contexttype)
+
+</Deprecated>
+
+Lets you specify which [legacy context](https://reactjs.org/docs/legacy-context.html) is provided by this component.
+
+---
+
+### `static contextTypes` {/*static-contexttypes*/}
+
+<Deprecated>
+
+This API will be removed in a future major version of React. [Use `static contextType` instead.](#static-contexttype)
+
+</Deprecated>
+
+Lets you specify which [legacy context](https://reactjs.org/docs/legacy-context.html) is consumed by this component.
+
+---
+
+### `static contextType` {/*static-contexttype*/}
+
+If you want to read [`this.context`](#context-instance-field) from your class component, you must specify which context it needs to read. The context you specify as the `static contextType` must be a value previously created by [`createContext`.](/reference/react/createContext)
+
+```js {2}
+class Button extends Component {
+  static contextType = ThemeContext;
+
+  render() {
+    const theme = this.context;
+    const className = 'button-' + theme;
+    return (
+      <button className={className}>
+        {this.props.children}
+      </button>
+    );
+  }
+}
+```
+
+<Note>
+
+Reading `this.context` in class components is equivalent to [`useContext`](/reference/react/useContext) in function components.
+
+[See how to migrate.](#migrating-a-component-with-context-from-a-class-to-a-function)
+
+</Note>
+
+---
+
+### `static defaultProps` {/*static-defaultprops*/}
+
+You can define `static defaultProps` to set the default props for the class. They will be used for `undefined` and missing props, but not for `null` props.
+
+For example, here is how you define that the `color` prop should default to `'blue'`:
+
+```js {2-4}
+class Button extends Component {
+  static defaultProps = {
+    color: 'blue'
+  };
+
+  render() {
+    return <button className={this.props.color}>click me</button>;
+  }
+}
+```
+
+If the `color` prop is not provided or is `undefined`, it will be set by default to `'blue'`:
+
+```js
+<>
+  {/* this.props.color is "blue" */}
+  <Button />
+
+  {/* this.props.color is "blue" */}
+  <Button color={undefined} />
+
+  {/* this.props.color is null */}
+  <Button color={null} />
+
+  {/* this.props.color is "red" */}
+  <Button color="red" />
+</>
+```
+
+<Note>
+
+Defining `defaultProps` in class components is similar to using [default values](/learn/passing-props-to-a-component#specifying-a-default-value-for-a-prop) in function components.
+
+</Note>
+
+---
+
+### `static getDerivedStateFromError(error)` {/*static-getderivedstatefromerror*/}
+
+If you define `static getDerivedStateFromError`, React will call it when a child component (including distant children) throws an error during rendering. This lets you display an error message instead of clearing the UI.
+
+Typically, it is used together with [`componentDidCatch`](#componentDidCatch) which lets you send the error report to some analytics service. A component with these methods is called an *error boundary.*
+
+```js {2-4,6-9,16-19}
+class ErrorBoundary extends React.Component {
+  state = {
+    hasError: false
+  };
+
+  static getDerivedStateFromError(error) {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true };
+  }
+
+  componentDidCatch(error, info) {
+    logErrorToMyService(error, info.componentStack);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      // You can render any custom fallback UI
+      return this.props.fallback;
+    }
+
+    return this.props.children;
+  }
+}
+```
+
+Then you can wrap a part of your component tree with it:
+
+```js {1,3}
+<ErrorBoundary fallback={<p>Something went wrong</p>}>
+  <Profile />
+</ErrorBoundary>
+```
+
+If `Profile` or its child component throws an error, `ErrorBoundary` will "catch" that error, display a fallback UI with the error message you've provided, and send a production error report to your error reporting service.
+
+You don't need to wrap every component into a separate error boundary. When you think about the [granularity of error boundaries,](https://aweary.dev/fault-tolerance-react/) consider where it makes sense to display an error message. For example, in a messaging app, it makes sense to place an error boundary around the list of conversations. It also makes sense to place one around every individual message. However, it wouldn't make sense to place a boundary around every avatar.
+
+#### Parameters {/*static-getderivedstatefromerror-parameters*/}
+
+* `error`: The error that was thrown. In practice, it will usually be an instance of [`Error`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error) but this is not guaranteed because JavaScript allows to [`throw`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/throw) any value, including strings or even `null`.
+
+#### Returns {/*static-getderivedstatefromerror-returns*/}
+
+`static getDerivedStateFromError` should return the state telling the component to display the error message.
+
+#### Caveats {/*static-getderivedstatefromerror-caveats*/}
+
+* `static getDerivedStateFromError` should be a pure function. If you want to perform a side effect (for example, to call an analytics service), you need to also implement [`componentDidCatch`.](#componentdidcatch)
+
+<Note>
+
+There is no direct equivalent for `static getDerivedStateFromError` in function components yet. If you'd like to avoid creating class components, write a single `ErrorBoundary` component like above and use it throughout your app. Alternatively, use the [`react-error-boundary`](https://github.com/bvaughn/react-error-boundary) package which does that.
+
+</Note>
+
+---
+
+### `static getDerivedStateFromProps(props, state)` {/*static-getderivedstatefromprops*/}
+
+If you define `static getDerivedStateFromProps`, React will call it right before calling [`render`,](#render) both on the initial mount and on subsequent updates. It should return an object to update the state, or `null` to update nothing.
+
+This method exists for [rare use cases](/blog/2018/06/07/you-probably-dont-need-derived-state#when-to-use-derived-state) where the state depends on changes in props over time. For example, this `Form` component resets the `email` state when the `userID` prop changes:
+
+```js {7-18}
+class Form extends Component {
+  state = {
+    email: this.props.defaultEmail,
+    prevUserID: this.props.userID
+  };
+
+  static getDerivedStateFromProps(props, state) {
+    // Any time the current user changes,
+    // Reset any parts of state that are tied to that user.
+    // In this simple example, that's just the email.
+    if (props.userID !== state.prevUserID) {
+      return {
+        prevUserID: props.userID,
+        email: props.defaultEmail
+      };
+    }
+    return null;
+  }
+
+  // ...
+}
+```
+
+Note that this pattern requires you to keep a previous value of the prop (like `userID`) in state (like `prevUserID`).
+
+<Pitfall>
+
+Deriving state leads to verbose code and makes your components difficult to think about. [Make sure you're familiar with simpler alternatives:](/blog/2018/06/07/you-probably-dont-need-derived-state.html)
+
+- If you need to **perform a side effect** (for example, data fetching or an animation) in response to a change in props, use [`componentDidUpdate`](#componentdidupdate) method instead.
+- If you want to **re-compute some data only when a prop changes,** [use a memoization helper instead.](/blog/2018/06/07/you-probably-dont-need-derived-state#what-about-memoization)
+- If you want to **"reset" some state when a prop changes,** consider either making a component [fully controlled](/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-controlled-component) or [fully uncontrolled with a key](/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key) instead.
+
+</Pitfall>
+
+#### Parameters {/*static-getderivedstatefromprops-parameters*/}
+
+- `props`: The next props that the component is about to render with.
+- `state`: The next state that the component is about to render with.
+
+#### Returns {/*static-getderivedstatefromprops-returns*/}
+
+`static getDerivedStateFromProps` return an object to update the state, or `null` to update nothing.
+
+#### Caveats {/*static-getderivedstatefromprops-caveats*/}
+
+- This method is fired on *every* render, regardless of the cause. This is different from [`UNSAFE_componentWillReceiveProps`](#unsafe_cmoponentwillreceiveprops), which only fires when the parent causes a re-render and not as a result of a local `setState`.
+
+- This method doesn't have access to the component instance. If you'd like, you can reuse some code between `static getDerivedStateFromProps` and the other class methods by extracting pure functions of the component props and state outside the class definition.
+
+<Note>
+
+Implementing `static getDerivedStateFromProps` in a class component is equivalent to [calling the `set` function from `useState` during rendering](/reference/react/useState#storing-information-from-previous-renders) in a function component.
+
+</Note>
+
+---
+
+## Usage {/*usage*/}
+
+### Defining a class component {/*defining-a-class-component*/}
+
+To define a React component as a class, extend the built-in `Component` class and define a [`render` method:](#render)
+
+```js
+import { Component } from 'react';
+
+class Greeting extends Component {
+  render() {
+    return <h1>Hello, {this.props.name}!</h1>;
+  }
+}
+```
+
+React will call your [`render`](#render) method whenever it needs to figure out what to display on the screen. Usually, you will return some [JSX](/learn/writing-markup-with-jsx) from it. Your `render` method should be a [pure function:](https://en.wikipedia.org/wiki/Pure_function) it should only calculate the JSX.
+
+Similarly to [function components,](/learn/your-first-component#defining-a-component) a class component can [receive information by props](/learn/your-first-component#defining-a-component) from its parent component. However, the syntax for reading props is different. For example, if the parent component renders `<Greeting name="Taylor" />`, then you can read the `name` prop from [`this.props`](#props), like `this.props.name`:
+
+<Sandpack>
+
+```js
+import { Component } from 'react';
+
+class Greeting extends Component {
+  render() {
+    return <h1>Hello, {this.props.name}!</h1>;
+  }
+}
+
+export default function App() {
+  return (
+    <>
+      <Greeting name="Sara" />
+      <Greeting name="Cahal" />
+      <Greeting name="Edite" />
+    </>
+  );
+}
+```
+
+</Sandpack>
+
+Note that Hooks (functions starting with `use`, like [`useState`](/reference/react/useState)) are not supported inside class components.
+
+<Pitfall>
+
+We recommend to define components as functions instead of classes. [See how to migrate.](#migrating-a-simple-component-from-a-class-to-a-function)
+
+</Pitfall>
+
+---
+
+### Adding state to a class component {/*adding-state-to-a-class-component*/}
+
+To add [state](/learn/state-a-components-memory) to a class, assign an object to a property called [`state`](#state). To update state, call [`this.setState`](#setstate).
+
+<Sandpack>
+
+```js
+import { Component } from 'react';
+
+export default class Counter extends Component {
+  state = {
+    name: 'Taylor',
+    age: 42,
+  };
+
+  handleNameChange = (e) => {
+    this.setState({
+      name: e.target.value
+    });
+  }
+
+  handleAgeChange = () => {
+    this.setState({
+      age: this.state.age + 1 
+    });
+  };
+
+  render() {
+    return (
+      <>
+        <input
+          value={this.state.name}
+          onChange={this.handleNameChange}
+        />
+        <button onClick={this.handleAgeChange}>
+          Increment age
+        </button>
+        <p>Hello, {this.state.name}. You are {this.state.age}.</p>
+      </>
+    );
+  }
+}
+```
+
+```css
+button { display: block; margin-top: 10px; }
+```
+
+</Sandpack> 
+
+<Pitfall>
+
+We recommend to define components as functions instead of classes. [See how to migrate.](#migrating-a-component-with-state-from-a-class-to-a-function)
+
+</Pitfall>
+
+---
+
+### Adding lifecycle methods to a class component {/*adding-lifecycle-methods-to-a-class-component*/}
+
+There are a few special methods you can define on your class.
+
+If you define the [`componentDidMount`](#componentdidmount) method, React will call it when your component is first added *(mounted)* to the screen. React will call [`componentDidUpdate`](#componentdidupdate) after your component re-renders due to changed props or state. React will call [`componentWillUnmount`](#componentwillunmount) after your component has been removed *(unmounted)* from the screen.
+
+If you implement `componentDidMount`, you usually need to implement all three lifecycles to avoid bugs. For example, if `componentDidMount` reads some state or props, you also have to implement `componentDidUpdate` to handle their changes, and `componentWillUnmount` to clean up whatever `componentDidMount` was doing.
+
+For example, this `ChatRoom` component keeps a chat connection synchronized with props and state:
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+import ChatRoom from './ChatRoom.js';
+
+export default function App() {
+  const [roomId, setRoomId] = useState('general');
+  const [show, setShow] = useState(false);
+  return (
+    <>
+      <label>
+        Choose the chat room:{' '}
+        <select
+          value={roomId}
+          onChange={e => setRoomId(e.target.value)}
+        >
+          <option value="general">general</option>
+          <option value="travel">travel</option>
+          <option value="music">music</option>
+        </select>
+      </label>
+      <button onClick={() => setShow(!show)}>
+        {show ? 'Close chat' : 'Open chat'}
+      </button>
+      {show && <hr />}
+      {show && <ChatRoom roomId={roomId} />}
+    </>
+  );
+}
+```
+
+```js ChatRoom.js active
+import { Component } from 'react';
+import { createConnection } from './chat.js';
+
+export default class ChatRoom extends Component {
+  state = {
+    serverUrl: 'https://localhost:1234'
+  };
+
+  componentDidMount() {
+    this.setupConnection();
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (
+      this.props.roomId !== prevProps.roomId ||
+      this.state.serverUrl !== prevState.serverUrl
+    ) {
+      this.destroyConnection();
+      this.setupConnection();
+    }
+  }
+
+  componentWillUnmount() {
+    this.destroyConnection();
+  }
+
+  setupConnection() {
+    this.connection = createConnection(
+      this.state.serverUrl,
+      this.props.roomId
+    );
+    this.connection.connect();    
+  }
+
+  destroyConnection() {
+    this.connection.disconnect();
+    this.connection = null;
+  }
+
+  render() {
+    return (
+      <>
+        <label>
+          Server URL:{' '}
+          <input
+            value={this.state.serverUrl}
+            onChange={e => {
+              this.setState({
+                serverUrl: e.target.value
+              });
+            }}
+          />
+        </label>
+        <h1>Welcome to the {this.props.roomId} room!</h1>
+      </>
+    );
+  }
+}
+```
+
+```js chat.js
+export function createConnection(serverUrl, roomId) {
+  // A real implementation would actually connect to the server
+  return {
+    connect() {
+      console.log('✅ Connecting to "' + roomId + '" room at ' + serverUrl + '...');
+    },
+    disconnect() {
+      console.log('❌ Disconnected from "' + roomId + '" room at ' + serverUrl);
+    }
+  };
+}
+```
+
+```css
+input { display: block; margin-bottom: 20px; }
+button { margin-left: 10px; }
+```
+
+</Sandpack>
+
+Note that in development when [Strict Mode](/reference/react/StrictMode) is on, React will call `componentDidMount`, immediately call `componentWillUnmount`, and then call `componentDidMount` again. This helps you notice if you forgot to implement `componentWillUnmount` or if its logic doesn't fully "mirror" what `componentDidMount` does.
+
+<Pitfall>
+
+We recommend to define components as functions instead of classes. [See how to migrate.](#migrating-a-component-with-lifecycle-methods-from-a-class-to-a-function)
+
+</Pitfall>
+
+---
+
+## Alternatives {/*alternatives*/}
+
+### Migrating a simple component from a class to a function {/*migrating-a-simple-component-from-a-class-to-a-function*/}
+
+Typically, you will [define components as functions](/learn/your-first-component#defining-a-component) instead.
+
+For example, suppose you're converting this `Greeting` class component to a function:
+
+<Sandpack>
+
+```js
+import { Component } from 'react';
+
+class Greeting extends Component {
+  render() {
+    return <h1>Hello, {this.props.name}!</h1>;
+  }
+}
+
+export default function App() {
+  return (
+    <>
+      <Greeting name="Sara" />
+      <Greeting name="Cahal" />
+      <Greeting name="Edite" />
+    </>
+  );
+}
+```
+
+</Sandpack>
+
+Define a function called `Greeting`. This is where you will move the body of your `render` function.
+
+```js
+function Greeting() {
+  // ... move the code from the render method here ...
+}
+```
+
+Instead of `this.props.name`, define the `name` prop [using the destructuring syntax](/learn/passing-props-to-a-component) and read it directly:
+
+```js
+function Greeting({ name }) {
+  return <h1>Hello, {name}!</h1>;
+}
+```
+
+Here is a complete example:
+
+<Sandpack>
+
+```js
+function Greeting({ name }) {
+  return <h1>Hello, {name}!</h1>;
+}
+
+export default function App() {
+  return (
+    <>
+      <Greeting name="Sara" />
+      <Greeting name="Cahal" />
+      <Greeting name="Edite" />
+    </>
+  );
+}
+```
+
+</Sandpack>
+
+---
+
+### Migrating a component with state from a class to a function {/*migrating-a-component-with-state-from-a-class-to-a-function*/}
+
+Suppose you're converting this `Counter` class component to a function:
+
+<Sandpack>
+
+```js
+import { Component } from 'react';
+
+export default class Counter extends Component {
+  state = {
+    name: 'Taylor',
+    age: 42,
+  };
+
+  handleNameChange = (e) => {
+    this.setState({
+      name: e.target.value
+    });
+  }
+
+  handleAgeChange = (e) => {
+    this.setState({
+      age: this.state.age + 1 
+    });
+  };
+
+  render() {
+    return (
+      <>
+        <input
+          value={this.state.name}
+          onChange={this.handleNameChange}
+        />
+        <button onClick={this.handleAgeChange}>
+          Increment age
+        </button>
+        <p>Hello, {this.state.name}. You are {this.state.age}.</p>
+      </>
+    );
+  }
+}
+```
+
+```css
+button { display: block; margin-top: 10px; }
+```
+
+</Sandpack>
+
+Start by declaring a function with the necessary [state variables:](/reference/react/useState#adding-state-to-a-component)
+
+```js {4-5}
+import { useState } from 'react';
+
+function Counter() {
+  const [name, setName] = useState('Taylor');
+  const [age, setAge] = useState(42);
+  // ...
+```
+
+Next, convert the event handlers:
+
+```js {5-7,9-11}
+function Counter() {
+  const [name, setName] = useState('Taylor');
+  const [age, setAge] = useState(42);
+
+  function handleNameChange(e) {
+    setName(e.target.value);
+  }
+
+  function handleAgeChange() {
+    setAge(age + 1);
+  }
+  // ...
+```
+
+Finally, replace all references starting with `this` with the variables and functions you defined in your component. For example, replace `this.state.age` with `age`, and replace `this.handleNameChange` with `handleNameChange`.
+
+Here is a fully converted component:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function Counter() {
+  const [name, setName] = useState('Taylor');
+  const [age, setAge] = useState(42);
+
+  function handleNameChange(e) {
+    setName(e.target.value);
+  }
+
+  function handleAgeChange() {
+    setAge(age + 1);
+  }
+
+  return (
+    <>
+      <input
+        value={name}
+        onChange={handleNameChange}
+      />
+      <button onClick={handleAgeChange}>
+        Increment age
+      </button>
+      <p>Hello, {name}. You are {age}.</p>
+    </>
+  )
+}
+```
+
+```css
+button { display: block; margin-top: 10px; }
+```
+
+</Sandpack>
+
+---
+
+### Migrating a component with lifecycle methods from a class to a function {/*migrating-a-component-with-lifecycle-methods-from-a-class-to-a-function*/}
+
+Suppose you're converting this `ChatRoom` class component with lifecycle methods to a function:
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+import ChatRoom from './ChatRoom.js';
+
+export default function App() {
+  const [roomId, setRoomId] = useState('general');
+  const [show, setShow] = useState(false);
+  return (
+    <>
+      <label>
+        Choose the chat room:{' '}
+        <select
+          value={roomId}
+          onChange={e => setRoomId(e.target.value)}
+        >
+          <option value="general">general</option>
+          <option value="travel">travel</option>
+          <option value="music">music</option>
+        </select>
+      </label>
+      <button onClick={() => setShow(!show)}>
+        {show ? 'Close chat' : 'Open chat'}
+      </button>
+      {show && <hr />}
+      {show && <ChatRoom roomId={roomId} />}
+    </>
+  );
+}
+```
+
+```js ChatRoom.js active
+import { Component } from 'react';
+import { createConnection } from './chat.js';
+
+export default class ChatRoom extends Component {
+  state = {
+    serverUrl: 'https://localhost:1234'
+  };
+
+  componentDidMount() {
+    this.setupConnection();
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (
+      this.props.roomId !== prevProps.roomId ||
+      this.state.serverUrl !== prevState.serverUrl
+    ) {
+      this.destroyConnection();
+      this.setupConnection();
+    }
+  }
+
+  componentWillUnmount() {
+    this.destroyConnection();
+  }
+
+  setupConnection() {
+    this.connection = createConnection(
+      this.state.serverUrl,
+      this.props.roomId
+    );
+    this.connection.connect();    
+  }
+
+  destroyConnection() {
+    this.connection.disconnect();
+    this.connection = null;
+  }
+
+  render() {
+    return (
+      <>
+        <label>
+          Server URL:{' '}
+          <input
+            value={this.state.serverUrl}
+            onChange={e => {
+              this.setState({
+                serverUrl: e.target.value
+              });
+            }}
+          />
+        </label>
+        <h1>Welcome to the {this.props.roomId} room!</h1>
+      </>
+    );
+  }
+}
+```
+
+```js chat.js
+export function createConnection(serverUrl, roomId) {
+  // A real implementation would actually connect to the server
+  return {
+    connect() {
+      console.log('✅ Connecting to "' + roomId + '" room at ' + serverUrl + '...');
+    },
+    disconnect() {
+      console.log('❌ Disconnected from "' + roomId + '" room at ' + serverUrl);
+    }
+  };
+}
+```
+
+```css
+input { display: block; margin-bottom: 20px; }
+button { margin-left: 10px; }
+```
+
+</Sandpack>
+
+First, verify that your [`componentWillUnmount`](#componentwillunmount) does the opposite of [`componentDidMount`.](#componentdidmount) In the above example, that's true: it disconnects the connection that `componentDidMount` sets up. If such logic is missing, add it first.
+
+Next, verify that your [`componentDidUpdate`](#componentdidupdate) method handles changes to any props and state you're using in `componentDidMount`. In the above example, `componentDidMount` calls `setupConnection` which reads `this.state.serverUrl` and `this.props.roomId`. This is why `componentDidUpdate` checks whether `this.state.serverUrl` and `this.props.roomId` have changed, and resets the connection if they did. If your `componentDidUpdate` logic is missing or doesn't handle changes to all relevant props and state, fix that first.
+
+In the above example, the logic inside the lifecycle methods connects the component to a system outside of React (a chat server). To connect a component to an external system, [describe this logic as a single Effect:](/reference/react/useEffect#connecting-to-an-external-system)
+
+```js {6-12}
+import { useState, useEffect } from 'react';
+
+function ChatRoom({ roomId }) {
+  const [serverUrl, setServerUrl] = useState('https://localhost:1234');
+
+  useEffect(() => {
+    const connection = createConnection(serverUrl, roomId);
+    connection.connect();
+    return () => {
+      connection.disconnect();
+    };
+  }, [serverUrl, roomId]);
+
+  // ...
+}
+```
+
+This [`useEffect`](/api/useEffect) call is equivalent to the logic in the lifecycle methods above. If your lifecycle methods do multiple unrelated things, [split them into multiple independent Effects.](/learn/removing-effect-dependencies#is-your-effect-doing-several-unrelated-things) Here is a complete example you can play with:
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+import ChatRoom from './ChatRoom.js';
+
+export default function App() {
+  const [roomId, setRoomId] = useState('general');
+  const [show, setShow] = useState(false);
+  return (
+    <>
+      <label>
+        Choose the chat room:{' '}
+        <select
+          value={roomId}
+          onChange={e => setRoomId(e.target.value)}
+        >
+          <option value="general">general</option>
+          <option value="travel">travel</option>
+          <option value="music">music</option>
+        </select>
+      </label>
+      <button onClick={() => setShow(!show)}>
+        {show ? 'Close chat' : 'Open chat'}
+      </button>
+      {show && <hr />}
+      {show && <ChatRoom roomId={roomId} />}
+    </>
+  );
+}
+```
+
+```js ChatRoom.js active
+import { useState, useEffect } from 'react';
+import { createConnection } from './chat.js';
+
+export default function ChatRoom({ roomId }) {
+  const [serverUrl, setServerUrl] = useState('https://localhost:1234');
+
+  useEffect(() => {
+    const connection = createConnection(serverUrl, roomId);
+    connection.connect();
+    return () => {
+      connection.disconnect();
+    };
+  }, [roomId, serverUrl]);
+
+  return (
+    <>
+      <label>
+        Server URL:{' '}
+        <input
+          value={serverUrl}
+          onChange={e => setServerUrl(e.target.value)}
+        />
+      </label>
+      <h1>Welcome to the {roomId} room!</h1>
+    </>
+  );
+}
+```
+
+```js chat.js
+export function createConnection(serverUrl, roomId) {
+  // A real implementation would actually connect to the server
+  return {
+    connect() {
+      console.log('✅ Connecting to "' + roomId + '" room at ' + serverUrl + '...');
+    },
+    disconnect() {
+      console.log('❌ Disconnected from "' + roomId + '" room at ' + serverUrl);
+    }
+  };
+}
+```
+
+```css
+input { display: block; margin-bottom: 20px; }
+button { margin-left: 10px; }
+```
+
+</Sandpack>
+
+<Note>
+
+If your component does not synchronize with any external systems, [you might not need an Effect.](/learn/you-might-not-need-an-effect)
+
+</Note>
+
+---
+
+### Migrating a component with context from a class to a function {/*migrating-a-component-with-context-from-a-class-to-a-function*/}
+
+In this example, the `Panel` and `Button` class components read [context](/learn/passing-data-deeply-with-context) from [`this.context`:](#context)
+
+<Sandpack>
+
+```js
+import { createContext, Component } from 'react';
+
+const ThemeContext = createContext(null);
+
+class Panel extends Component {
+  static contextType = ThemeContext;
+
+  render() {
+    const theme = this.context;
+    const className = 'panel-' + theme;
+    return (
+      <section className={className}>
+        <h1>{this.props.title}</h1>
+        {this.props.children}
+      </section>
+    );    
+  }
+}
+
+class Button extends Component {
+  static contextType = ThemeContext;
+
+  render() {
+    const theme = this.context;
+    const className = 'button-' + theme;
+    return (
+      <button className={className}>
+        {this.props.children}
+      </button>
+    );
+  }
+}
+
+function Form() {
+  return (
+    <Panel title="Welcome">
+      <Button>Sign up</Button>
+      <Button>Log in</Button>
+    </Panel>
+  );
+}
+
+export default function MyApp() {
+  return (
+    <ThemeContext.Provider value="dark">
+      <Form />
+    </ThemeContext.Provider>
+  )
+}
+```
+
+```css
+.panel-light,
+.panel-dark {
+  border: 1px solid black;
+  border-radius: 4px;
+  padding: 20px;
+}
+.panel-light {
+  color: #222;
+  background: #fff;
+}
+
+.panel-dark {
+  color: #fff;
+  background: rgb(23, 32, 42);
+}
+
+.button-light,
+.button-dark {
+  border: 1px solid #777;
+  padding: 5px;
+  margin-right: 10px;
+  margin-top: 10px;
+}
+
+.button-dark {
+  background: #222;
+  color: #fff;
+}
+
+.button-light {
+  background: #fff;
+  color: #222;
+}
+```
+
+</Sandpack>
+
+When you convert them to function components, replace `this.context` with [`useContext`](/reference/react/useContext) calls:
+
+<Sandpack>
+
+```js
+import { createContext, useContext } from 'react';
+
+const ThemeContext = createContext(null);
+
+function Panel({ title, children }) {
+  const theme = useContext(ThemeContext);
+  const className = 'panel-' + theme;
+  return (
+    <section className={className}>
+      <h1>{title}</h1>
+      {children}
+    </section>
+  )
+}
+
+function Button({ children }) {
+  const theme = useContext(ThemeContext);
+  const className = 'button-' + theme;
+  return (
+    <button className={className}>
+      {children}
+    </button>
+  );
+}
+
+function Form() {
+  return (
+    <Panel title="Welcome">
+      <Button>Sign up</Button>
+      <Button>Log in</Button>
+    </Panel>
+  );
+}
+
+export default function MyApp() {
+  return (
+    <ThemeContext.Provider value="dark">
+      <Form />
+    </ThemeContext.Provider>
+  )
+}
+```
+
+```css
+.panel-light,
+.panel-dark {
+  border: 1px solid black;
+  border-radius: 4px;
+  padding: 20px;
+}
+.panel-light {
+  color: #222;
+  background: #fff;
+}
+
+.panel-dark {
+  color: #fff;
+  background: rgb(23, 32, 42);
+}
+
+.button-light,
+.button-dark {
+  border: 1px solid #777;
+  padding: 5px;
+  margin-right: 10px;
+  margin-top: 10px;
+}
+
+.button-dark {
+  background: #222;
+  color: #fff;
+}
+
+.button-light {
+  background: #fff;
+  color: #222;
+}
+```
+
+</Sandpack>
diff --git a/beta/src/content/reference/react/Fragment.md b/beta/src/content/reference/react/Fragment.md
new file mode 100644
index 000000000..3538d4f08
--- /dev/null
+++ b/beta/src/content/reference/react/Fragment.md
@@ -0,0 +1,210 @@
+---
+title: <Fragment> (<>...</>)
+---
+
+<Intro>
+
+`<Fragment>`, often used via `<>...</>` syntax, lets you group elements without a wrapper node.
+
+```js
+<>
+  <OneChild />
+  <AnotherChild />
+</>
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `<Fragment>` {/*fragment*/}
+
+Wrap elements in `<Fragment>` to group them together in situations where you need a single element. Grouping elements in `Fragment` has no effect on the resulting DOM; it is the same as if the elements were not grouped. The empty JSX tag `<></>` is shorthand for `<Fragment></Fragment>` in most cases.
+
+#### Props {/*props*/}
+
+- **optional** `key`: Fragments declared with the explicit `<Fragment>` syntax may have [keys.](https://beta.reactjs.org/learn/rendering-lists#keeping-list-items-in-order-with-key)
+
+#### Caveats {/*caveats*/}
+
+- If you want to pass `key` to a Fragment, you can't use the `<>...</>` syntax. You have to explicitly import `Fragment` from `'react'` and render `<Fragment key={yourKey}>...</Fragment>`.
+
+- React does not [reset state](/learn/preserving-and-resetting-state) when you go from rendering `<><Child /></>` to `[<Child />]` or back, or when you go from rendering `<><Child /></>` to `<Child />` and back. This only works a single level deep: for example, going from `<><><Child /></></>` to `<Child />` resets the state. See the precise semantics [here.](https://gist.github.com/clemmy/b3ef00f9507909429d8aa0d3ee4f986b)
+
+---
+
+## Usage {/*usage*/}
+
+### Returning multiple elements {/*returning-multiple-elements*/}
+
+Use `Fragment`, or the equivalent `<>...</>` syntax, to group multiple elements together. You can use it to put multiple elements in any place where a single element can go. For example, a component can only return one element, but by using a Fragment you can group multiple elements together and then return them as a group:
+
+```js {3,6}
+function Post() {
+  return (
+    <>
+      <PostTitle />
+      <PostBody />
+    </>
+  );
+}
+```
+
+Fragments are useful because grouping elements with a Fragment has no effect on layout or styles, unlike if you wrapped the elements in some other container such as a DOM element. If you inspect this example with the browser tools, you'll see that all `<h1>` and `<p>` DOM nodes appear as siblings without wrappers around them:
+
+<Sandpack>
+
+```js
+export default function Blog() {
+  return (
+    <>
+      <Post title="An update" body="It's been a while since I posted..." />
+      <Post title="My new blog" body="I am starting a new blog!" />
+    </>
+  )
+}
+
+function Post({ title, body }) {
+  return (
+    <>
+      <PostTitle title={title} />
+      <PostBody body={body} />
+    </>
+  );
+}
+
+function PostTitle({ title }) {
+  return <h1>{title}</h1>
+}
+
+function PostBody({ body }) {
+  return (
+    <article>
+      <p>{body}</p>
+    </article>
+  );
+}
+```
+
+</Sandpack>
+
+<DeepDive>
+
+#### How to write a Fragment without the special syntax? {/*how-to-write-a-fragment-without-the-special-syntax*/}
+
+The example above is equivalent to importing `Fragment` from React:
+
+```js {1,5,8}
+import { Fragment } from 'react';
+
+function Post() {
+  return (
+    <Fragment>
+      <PostTitle />
+      <PostBody />
+    </Fragment>
+  );
+}
+```
+
+Usually you won't need this unless you need to [pass a `key` to your `Fragment`.](#rendering-a-list-of-fragments)
+
+</DeepDive>
+
+---
+
+### Assigning multiple elements to a variable {/*assigning-multiple-elements-to-a-variable*/}
+
+Like any other element, you can assign Fragment elements to variables, pass them as props, and so on:
+
+```js
+function CloseDialog() {
+  const buttons = (
+    <>
+      <OKButton />
+      <CancelButton />
+    </>
+  );
+  return (
+    <AlertDialog buttons={buttons}>
+      Are you sure you want to leave this page?
+    </AlertDialog>
+  );
+}
+```
+
+---
+
+### Grouping elements with text {/*grouping-elements-with-text*/}
+
+You can use `Fragment` to group text together with components:
+
+```js
+function DateRangePicker({ start, end }) {
+  return (
+    <>
+      From
+      <DatePicker date={start} />
+      to
+      <DatePicker date={end} />
+    </>
+  );
+}
+```
+
+---
+
+### Rendering a list of Fragments {/*rendering-a-list-of-fragments*/}
+
+Here's a situation where you need to write `Fragment` explicitly instead of using the `<></>` syntax. When you [render multiple elements in a loop](/learn/rendering-lists), you need to assign a `key` to each element. If the elements within the loop are Fragments, you need to use the normal JSX element syntax in order to provide the `key` attribute:
+
+```js {3,6}
+function Blog() {
+  return posts.map(post =>
+    <Fragment key={post.id}>
+      <PostTitle title={post.title} />
+      <PostBody body={post.body} />
+    </Fragment>
+  );
+}
+```
+
+You can inspect the DOM to verify that there are no wrapper elements around the Fragment children:
+
+<Sandpack>
+
+```js
+import { Fragment } from 'react';
+
+const posts = [
+  { id: 1, title: 'An update', body: "It's been a while since I posted..." },
+  { id: 2, title: 'My new blog', body: 'I am starting a new blog!' }
+];
+
+export default function Blog() {
+  return posts.map(post =>
+    <Fragment key={post.id}>
+      <PostTitle title={post.title} />
+      <PostBody body={post.body} />
+    </Fragment>
+  );
+}
+
+function PostTitle({ title }) {
+  return <h1>{title}</h1>
+}
+
+function PostBody({ body }) {
+  return (
+    <article>
+      <p>{body}</p>
+    </article>
+  );
+}
+```
+
+</Sandpack>
diff --git a/beta/src/content/reference/react/Profiler.md b/beta/src/content/reference/react/Profiler.md
new file mode 100644
index 000000000..c9bb42fa1
--- /dev/null
+++ b/beta/src/content/reference/react/Profiler.md
@@ -0,0 +1,132 @@
+---
+title: <Profiler>
+---
+
+<Intro>
+
+`<Profiler>` lets you measure rendering performance of a React tree programmatically.
+
+```js
+<Profiler id="App" onRender={onRender}>
+  <App />
+</Profiler>
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `<Profiler>` {/*profiler*/}
+
+Wrap a component tree in a `<Profiler>` to measure its rendering performance.
+
+```js
+<Profiler id="App" onRender={onRender}>
+  <App />
+</Profiler>
+```
+
+#### Props {/*props*/}
+
+* `id`: A string identifying the part of the UI you are measuring.
+* `onRender`: An [`onRender` callback](#onrender-callback) that React calls it every time components within the profiled tree update. It receives information about what was rendered and how much time it took.
+
+#### Caveats {/*caveats*/}
+
+* Profiling adds some additional overhead, so **it is disabled in the production build by default.** To opt into production profiling, you need to enable a [special production build with profiling enabled.](https://fb.me/react-profiling)
+
+---
+
+### `onRender` callback {/*onrender-callback*/}
+
+React will call your `onRender` callback with information about what was rendered.
+
+```js
+function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime) {
+  // Aggregate or log render timings...
+}
+```
+
+#### Parameters {/*onrender-parameters*/}
+
+* `id`: The string `id` prop of the `<Profiler>` tree that has just committed. This lets you identify which part of the tree was committed if you are using multiple profilers.
+* `phase`: Either `"mount"` or `"update"`. This lets you know whether the tree has just been mounted for the first time or re-rendered due to a change in props, state, or hooks.
+* `actualDuration`: The number of milliseconds spent rendering the `<Profiler>` and its descendants for the current update. This indicates how well the subtree makes use of memoization (e.g. [`memo`](/reference/react/memo) and [`useMemo`](/reference/react/useMemo)). Ideally this value should decrease significantly after the initial mount as many of the descendants will only need to re-render if their specific props change.
+* `baseDuration`: The number of milliseconds estimating how much time it would take to re-render the entire `<Profiler>` subtree without any optimizations. It is calculated by summing up the most recent render durations of each component in the tree. This value estimates a worst-case cost of rendering (e.g. the initial mount or a tree with no memoization). Compare `actualDuration` against it to see if memoization is working.
+* `startTime`: A numeric timestamp for when React began rendering the current update.
+* `endTime`: A numeric timestamp for when React committed the current update. This value is shared between all profilers in a commit, enabling them to be grouped if desirable.
+
+---
+
+## Usage {/*usage*/}
+
+### Measuring rendering performance programmatically {/*measuring-rendering-performance-programmatically*/}
+
+Wrap the `<Profiler>` component around a React tree to measure its rendering performance.
+
+```js {2,4}
+<App>
+  <Profiler id="Sidebar" onRender={onRender}>
+    <Sidebar />
+  </Profiler>
+  <PageContent />
+</App>
+```
+
+It requires two props: an `id` (string) and an `onRender` callback (function) which React calls any time a component within the tree "commits" an update.
+
+<Pitfall>
+
+Profiling adds some additional overhead, so **it is disabled in the production build by default.** To opt into production profiling, you need to enable a [special production build with profiling enabled.](https://fb.me/react-profiling)
+
+</Pitfall>
+
+<Note>
+
+`<Profiler>` lets you gather measurements programmatically. If you're looking for an interactive profiler, try the Profiler tab in [React Developer Tools](/learn/react-developer-tools). It exposes similar functionality as a browser extension.
+
+</Note>
+
+---
+
+### Measuring different parts of the application {/*measuring-different-parts-of-the-application*/}
+
+You can use multiple `<Profiler>` components to measure different parts of your application:
+
+```js {5,7}
+<App>
+  <Profiler id="Sidebar" onRender={onRender}>
+    <Sidebar />
+  </Profiler>
+  <Profiler id="Content" onRender={onRender}>
+    <Content />
+  </Profiler>
+</App>
+```
+
+You can also nest `<Profiler>` components:
+
+```js {5,7,9,12}
+<App>
+  <Profiler id="Sidebar" onRender={onRender}>
+    <Sidebar />
+  </Profiler>
+  <Profiler id="Content" onRender={onRender}>
+    <Content>
+      <Profiler id="Editor" onRender={onRender}>
+        <Editor />
+      </Profiler>
+      <Preview />
+    </Content>
+  </Profiler>
+</App>
+```
+
+Although `<Profiler>` is a lightweight component, it should be used only when necessary. Each use adds some CPU and memory overhead to an application.
+
+---
+
diff --git a/beta/src/content/reference/react/PureComponent.md b/beta/src/content/reference/react/PureComponent.md
new file mode 100644
index 000000000..a505131b7
--- /dev/null
+++ b/beta/src/content/reference/react/PureComponent.md
@@ -0,0 +1,208 @@
+---
+title: PureComponent
+---
+
+<Pitfall>
+
+We recommend to define components as functions instead of classes. [See how to migrate.](#alternatives)
+
+</Pitfall>
+
+<Intro>
+
+`PureComponent` is similar to [`Component`](/reference/react/Component) but it skips re-renders for same props and state. Class components are still supported by React, but we don't recommend using them in new code.
+
+```js
+class Greeting extends PureComponent {
+  render() {
+    return <h1>Hello, {this.props.name}!</h1>;
+  }
+}
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `PureComponent` {/*purecomponent*/}
+
+To skip re-rendering a class component for same props and state, extend `PureComponent` instead of [`Component`:](/reference/react/Component)
+
+```js
+import { PureComponent } from 'react';
+
+class Greeting extends PureComponent {
+  render() {
+    return <h1>Hello, {this.props.name}!</h1>;
+  }
+}
+```
+
+`PureComponent` is a subclass of `Component` and supports [all the `Component` APIs.](/reference/react/Component#reference) Extending `PureComponent` is equivalent to defining a custom [`shouldComponentUpdate`](/reference/react/Component#shouldcomponentupdate) method that shallowly compares props and state.
+
+
+[See more examples below.](#usage)
+
+---
+
+## Usage {/*usage*/}
+
+### Skipping unnecessary re-renders for class components {/*skipping-unnecessary-re-renders-for-class-components*/}
+
+React normally re-renders a component whenever its parent re-renders. As an optimization, you can create a component that React will not re-render when its parent re-renders so long as its new props and state are the same as the old props and state. [Class components](/reference/react/Component) can opt into this behavior by extending `PureComponent`:
+
+```js {1}
+class Greeting extends PureComponent {
+  render() {
+    return <h1>Hello, {this.props.name}!</h1>;
+  }
+}
+```
+
+A React component should always have [pure rendering logic.](/learn/keeping-components-pure) This means that it must return the same output if its props, state, and context haven't changed. By using `PureComponent`, you are telling React that your component complies with this requirement, so React doesn't need to re-render as long as its props and state haven't changed. However, your component will still re-render if a context that it's using changes.
+
+In this example, notice that the `Greeting` component re-renders whenever `name` is changed (because that's one of its props), but not when `address` is changed (because it's not passed to `Greeting` as a prop):
+
+<Sandpack>
+
+```js
+import { PureComponent, useState } from 'react';
+
+class Greeting extends PureComponent {
+  render() {
+    console.log("Greeting was rendered at", new Date().toLocaleTimeString());
+    return <h3>Hello{this.props.name && ', '}{this.props.name}!</h3>;
+  }
+}
+
+export default function MyApp() {
+  const [name, setName] = useState('');
+  const [address, setAddress] = useState('');
+  return (
+    <>
+      <label>
+        Name{': '}
+        <input value={name} onChange={e => setName(e.target.value)} />
+      </label>
+      <label>
+        Address{': '}
+        <input value={address} onChange={e => setAddress(e.target.value)} />
+      </label>
+      <Greeting name={name} />
+    </>
+  );
+}
+```
+
+```css
+label {
+  display: block;
+  margin-bottom: 16px;
+}
+```
+
+</Sandpack>
+
+<Pitfall>
+
+We recommend to define components as functions instead of classes. [See how to migrate.](#alternatives)
+
+</Pitfall>
+
+---
+
+## Alternatives {/*alternatives*/}
+
+### Migrating from a `PureComponent` class component to a function {/*migrating-from-a-purecomponent-class-component-to-a-function*/}
+
+We recommend to use function components instead of [class components](/reference/react/Component) in the new code. If you have some existing class components using `PureComponent`, here is how you can convert them. This is the original code:
+
+<Sandpack>
+
+```js
+import { PureComponent, useState } from 'react';
+
+class Greeting extends PureComponent {
+  render() {
+    console.log("Greeting was rendered at", new Date().toLocaleTimeString());
+    return <h3>Hello{this.props.name && ', '}{this.props.name}!</h3>;
+  }
+}
+
+export default function MyApp() {
+  const [name, setName] = useState('');
+  const [address, setAddress] = useState('');
+  return (
+    <>
+      <label>
+        Name{': '}
+        <input value={name} onChange={e => setName(e.target.value)} />
+      </label>
+      <label>
+        Address{': '}
+        <input value={address} onChange={e => setAddress(e.target.value)} />
+      </label>
+      <Greeting name={name} />
+    </>
+  );
+}
+```
+
+```css
+label {
+  display: block;
+  margin-bottom: 16px;
+}
+```
+
+</Sandpack>
+
+When you [convert this component from a class to a function,](/reference/react/Component#alternatives) wrap it in [`memo`:](/reference/react/memo)
+
+<Sandpack>
+
+```js
+import { memo, useState } from 'react';
+
+const Greeting = memo(function Greeting({ name }) {
+  console.log("Greeting was rendered at", new Date().toLocaleTimeString());
+  return <h3>Hello{name && ', '}{name}!</h3>;
+});
+
+export default function MyApp() {
+  const [name, setName] = useState('');
+  const [address, setAddress] = useState('');
+  return (
+    <>
+      <label>
+        Name{': '}
+        <input value={name} onChange={e => setName(e.target.value)} />
+      </label>
+      <label>
+        Address{': '}
+        <input value={address} onChange={e => setAddress(e.target.value)} />
+      </label>
+      <Greeting name={name} />
+    </>
+  );
+}
+```
+
+```css
+label {
+  display: block;
+  margin-bottom: 16px;
+}
+```
+
+</Sandpack>
+
+<Note>
+
+Unlike `PureComponent`, [`memo`](/reference/react/memo) does not compare the new and the old state. In function components, calling the [`set` function](/reference/react/useState#setstate) with the same state [already prevents re-renders by default,](/reference/react/memo#updating-a-memoized-component-using-state) even without `memo`.
+
+</Note>
diff --git a/beta/src/content/reference/react/StrictMode.md b/beta/src/content/reference/react/StrictMode.md
new file mode 100644
index 000000000..dab5e0614
--- /dev/null
+++ b/beta/src/content/reference/react/StrictMode.md
@@ -0,0 +1,830 @@
+---
+title: <StrictMode>
+---
+
+
+<Intro>
+
+`<StrictMode>` lets you find common bugs in your components early during development.
+
+
+```js
+<StrictMode>
+  <App />
+</StrictMode>
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `<StrictMode>` {/*strictmode*/}
+
+Use `StrictMode` to enable additional development behaviors and warnings for the entire component tree inside:
+
+```js
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+const root = createRoot(document.getElementById('root'));
+root.render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);
+```
+
+[See more examples below.](#usage)
+
+Strict Mode enables the following development-only behaviors:
+
+- Your components will [re-render an extra time](#fixing-bugs-found-by-double-rendering-in-development) to find bugs caused by impure rendering.
+- Your components will [re-run Effects an extra time](#fixing-bugs-found-by-re-running-effects-in-development) to find bugs caused by missing Effect cleanup.
+- Your components will [be checked for usage of deprecated APIs.](#fixing-deprecation-warnings-enabled-by-strict-mode)
+
+#### Props {/*props*/}
+
+`StrictMode` accepts no props.
+
+#### Caveats {/*caveats*/}
+
+* There is no way to opt out of Strict Mode inside a tree wrapped in `<StrictMode>`. This gives you confidence that all components inside `<StrictMode>` are checked. If two teams working on a product disagree whether they find the checks valuable, they need to either reach consensus or move `<StrictMode>` down in the tree.
+
+---
+
+## Usage {/*usage*/}
+
+### Enabling Strict Mode for entire app {/*enabling-strict-mode-for-entire-app*/}
+
+Strict Mode enables extra development-only checks for the entire component tree inside the `<StrictMode>` component. These checks help you find common bugs in your components early in the development process.
+
+
+To enable Strict Mode for your entire app, wrap your root component with `<StrictMode>` when you render it:
+
+```js {6,8}
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+const root = createRoot(document.getElementById('root'));
+root.render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);
+```
+
+We recommend to wrap your entire app in Strict Mode, especially for newly created apps. If you use a framework that calls [`createRoot`](/reference/react/createRoot) for you, check its documentation for how to enable Strict Mode.
+
+Although the Strict Mode checks **only run in development,** they help you find bugs that already exist in your code but can be tricky to reliably reproduce in production. Strict Mode lets you fix bugs before your users report them.
+
+<Note>
+
+Strict Mode enables the following checks in development:
+
+- Your components will [re-render an extra time](#fixing-bugs-found-by-double-rendering-in-development) to find bugs caused by impure rendering.
+- Your components will [re-run Effects an extra time](#fixing-bugs-found-by-re-running-effects-in-development) to find bugs caused by missing Effect cleanup.
+- Your components will [be checked for usage of deprecated APIs.](#fixing-deprecation-warnings-enabled-by-strict-mode)
+
+**All of these checks are development-only and do not impact the production build.**
+
+</Note>
+
+---
+
+### Enabling strict mode for a part of the app {/*enabling-strict-mode-for-a-part-of-the-app*/}
+
+You can also enable Strict Mode for any part of your application:
+
+```js {7,12}
+import { StrictMode } from 'react';
+
+function App() {
+  return (
+    <>
+      <Header />
+      <StrictMode>
+        <main>
+          <Sidebar />
+          <Content />
+        </main>
+      </StrictMode>
+      <Footer />
+    </>
+  );
+}
+```
+
+In this example, Strict Mode checks will not run against the `Header` and `Footer` components. However, they will run on `Sidebar` and `Content`, as well as all of the components inside them, no matter how deep.
+
+---
+
+### Fixing bugs found by double rendering in development {/*fixing-bugs-found-by-double-rendering-in-development*/}
+
+[React assumes that every component you write is a pure function.](/learn/keeping-components-pure) This means that React components you write must always return the same JSX given the same inputs (props, state, and context).
+
+Components breaking this rule behave unpredictably and cause bugs. To help you find accidentally impure code, Strict Mode calls some of your functions (only the ones that should be pure) **twice in development.** This includes:
+
+- Your component function body (only top-level logic, so this doesn't include code inside event handlers)
+- Functions that you pass to [`useState`](/reference/react/useState), [`set` functions](/reference/react/useState#setstate), [`useMemo`](/reference/react/useMemo), or [`useReducer`](/reference/react/useReducer)
+- Some class component methods like [`constructor`](/reference/react/Component#constructor), [`render`](/reference/react/Component#render), [`shouldComponentUpdate`](/reference/react/Component#shouldcomponentupdate) ([see the whole list](https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects))
+
+If a function is pure, running it twice does not change its behavior because a pure function produces the same result every time. However, if a function is impure (for example, it mutates the data it receives), running that impure code twice tends to be noticeable (that's what makes it impure!) This helps you spot and fix the bug early.
+
+**Here is an example to illustrate how double rendering in Strict Mode helps you find bugs early.**
+
+This `StoryTray` component takes an array of `stories` and adds one last "Create Story" item at the end:
+
+<Sandpack>
+
+```js index.js
+import { createRoot } from 'react-dom/client';
+import './styles.css';
+
+import App from './App';
+
+const root = createRoot(document.getElementById("root"));
+root.render(<App />);
+```
+
+```js App.js
+import { useState } from 'react';
+import StoryTray from './StoryTray.js';
+
+let initialStories = [
+  {id: 0, label: "Ankit's Story" },
+  {id: 1, label: "Taylor's Story" },
+];
+
+export default function App() {
+  let [stories, setStories] = useState(initialStories)
+  return (
+    <div
+      style={{
+        width: '100%',
+        height: '100%',
+        textAlign: 'center',
+      }}
+    >
+      <StoryTray stories={stories} />
+    </div>
+  );
+}
+```
+
+```js StoryTray.js active
+export default function StoryTray({ stories }) {
+  const items = stories;
+  items.push({ id: 'create', label: 'Create Story' });
+  return (
+    <ul>
+      {items.map(story => (
+        <li key={story.id}>
+          {story.label}
+        </li>
+      ))}
+    </ul>
+  );
+}
+```
+
+```css
+ul {
+  margin: 0;
+  list-style-type: none;
+  height: 100%;
+}
+
+li {
+  border: 1px solid #aaa;
+  border-radius: 6px;
+  float: left;
+  margin: 5px;
+  margin-bottom: 20px;
+  padding: 5px;
+  width: 70px;
+  height: 100px;
+}
+```
+
+</Sandpack>
+
+There is a mistake in the code above. However, it is easy to miss because the initial output appears correct.
+
+This mistake will become more noticeable if the `StoryTray` component re-renders multiple times. For example, let's make the `StoryTray` re-render with a different background color whenever you hover the pointer over it: 
+
+<Sandpack>
+
+```js index.js
+import { createRoot } from 'react-dom/client';
+import './styles.css';
+
+import App from './App';
+
+const root = createRoot(document.getElementById('root'));
+root.render(<App />);
+```
+
+```js App.js
+import { useState } from 'react';
+import StoryTray from './StoryTray.js';
+
+let initialStories = [
+  {id: 0, label: "Ankit's Story" },
+  {id: 1, label: "Taylor's Story" },
+];
+
+export default function App() {
+  let [stories, setStories] = useState(initialStories)
+  return (
+    <div
+      style={{
+        width: '100%',
+        height: '100%',
+        textAlign: 'center',
+      }}
+    >
+      <StoryTray stories={stories} />
+    </div>
+  );
+}
+```
+
+```js StoryTray.js active
+import { useState } from 'react';
+
+export default function StoryTray({ stories }) {
+  const [isHover, setIsHover] = useState(false);
+  const items = stories;
+  items.push({ id: 'create', label: 'Create Story' });
+  return (
+    <ul
+      onPointerEnter={() => setIsHover(true)}
+      onPointerLeave={() => setIsHover(false)}
+      style={{
+        backgroundColor: isHover ? '#ddd' : '#fff'
+      }}
+    >
+      {items.map(story => (
+        <li key={story.id}>
+          {story.label}
+        </li>
+      ))}
+    </ul>
+  );
+}
+```
+
+```css
+ul {
+  margin: 0;
+  list-style-type: none;
+  height: 100%;
+}
+
+li {
+  border: 1px solid #aaa;
+  border-radius: 6px;
+  float: left;
+  margin: 5px;
+  margin-bottom: 20px;
+  padding: 5px;
+  width: 70px;
+  height: 100px;
+}
+```
+
+</Sandpack>
+
+Notice how every time you hover over the `StoryTray` component, "Create Story" gets added to the list again. The intention of the code was to add it once at the end. But `StoryTray` directly modifies the `stories` array from the props. Every time `StoryTray` renders, it adds "Create Story" again at the end of the same array. In other words, `StoryTray` is not a pure function--running it multiple times produces different results.
+
+To fix this problem, you can make a copy of the array, and modify that copy instead of the original one:
+
+```js {2}
+export default function StoryTray({ stories }) {
+  const items = stories.slice(); // Clone the array
+  // ✅ Good: Pushing into a new array
+  items.push({ id: 'create', label: 'Create Story' });
+```
+
+This would [make the `StoryTray` function pure.](/learn/keeping-components-pure) Each time it is called, it would only modify a new copy of the array, and would not affect any external objects or variables. This solves the bug, but notice that you had to make the component re-render more often before it became obvious that something is wrong with its behavior.
+
+**In the original example, the bug wasn't obvious. Now let's wrap the original (buggy) code in `<StrictMode>`:**
+
+<Sandpack>
+
+```js index.js
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import './styles.css';
+
+import App from './App';
+
+const root = createRoot(document.getElementById("root"));
+root.render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);
+```
+
+```js App.js
+import { useState } from 'react';
+import StoryTray from './StoryTray.js';
+
+let initialStories = [
+  {id: 0, label: "Ankit's Story" },
+  {id: 1, label: "Taylor's Story" },
+];
+
+export default function App() {
+  let [stories, setStories] = useState(initialStories)
+  return (
+    <div
+      style={{
+        width: '100%',
+        height: '100%',
+        textAlign: 'center',
+      }}
+    >
+      <StoryTray stories={stories} />
+    </div>
+  );
+}
+```
+
+```js StoryTray.js active
+export default function StoryTray({ stories }) {
+  const items = stories;
+  items.push({ id: 'create', label: 'Create Story' });
+  return (
+    <ul>
+      {items.map(story => (
+        <li key={story.id}>
+          {story.label}
+        </li>
+      ))}
+    </ul>
+  );
+}
+```
+
+```css
+ul {
+  margin: 0;
+  list-style-type: none;
+  height: 100%;
+}
+
+li {
+  border: 1px solid #aaa;
+  border-radius: 6px;
+  float: left;
+  margin: 5px;
+  margin-bottom: 20px;
+  padding: 5px;
+  width: 70px;
+  height: 100px;
+}
+```
+
+</Sandpack>
+
+**Strict Mode *always* calls your rendering function twice, so you can see the mistake right away** ("Create Story" appears twice). Strict Mode lets you notice such mistakes early in the process. When you fix your component to render in Strict Mode, you *also* fix many possible future production bugs like the hover functionality from before:
+
+<Sandpack>
+
+```js index.js
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import './styles.css';
+
+import App from './App';
+
+const root = createRoot(document.getElementById('root'));
+root.render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);
+```
+
+```js App.js
+import { useState } from 'react';
+import StoryTray from './StoryTray.js';
+
+let initialStories = [
+  {id: 0, label: "Ankit's Story" },
+  {id: 1, label: "Taylor's Story" },
+];
+
+export default function App() {
+  let [stories, setStories] = useState(initialStories)
+  return (
+    <div
+      style={{
+        width: '100%',
+        height: '100%',
+        textAlign: 'center',
+      }}
+    >
+      <StoryTray stories={stories} />
+    </div>
+  );
+}
+```
+
+```js StoryTray.js active
+import { useState } from 'react';
+
+export default function StoryTray({ stories }) {
+  const [isHover, setIsHover] = useState(false);
+  const items = stories.slice(); // Clone the array
+  items.push({ id: 'create', label: 'Create Story' });
+  return (
+    <ul
+      onPointerEnter={() => setIsHover(true)}
+      onPointerLeave={() => setIsHover(false)}
+      style={{
+        backgroundColor: isHover ? '#ddd' : '#fff'
+      }}
+    >
+      {items.map(story => (
+        <li key={story.id}>
+          {story.label}
+        </li>
+      ))}
+    </ul>
+  );
+}
+```
+
+```css
+ul {
+  margin: 0;
+  list-style-type: none;
+  height: 100%;
+}
+
+li {
+  border: 1px solid #aaa;
+  border-radius: 6px;
+  float: left;
+  margin: 5px;
+  margin-bottom: 20px;
+  padding: 5px;
+  width: 70px;
+  height: 100px;
+}
+```
+
+</Sandpack>
+
+Without Strict Mode, it was easy to miss the bug until you added more re-renders. Strict Mode made the same bug appear right away. Strict Mode helps you find bugs before you push them to your team and to your users.
+
+[Read more about keeping components pure.](/learn/keeping-components-pure)
+
+<Note>
+
+If you have [React DevTools](/learn/react-developer-tools) installed, any `console.log` calls during the second render call will appear slightly dimmed. React DevTools also offers a setting (off by default) to suppress them completely.
+
+</Note>
+
+---
+
+### Fixing bugs found by re-running Effects in development {/*fixing-bugs-found-by-re-running-effects-in-development*/}
+
+Strict Mode can also help find bugs in [Effects.](/learn/synchronizing-with-effects)
+
+Every Effect has some setup code and may have some cleanup code. Normally, React calls setup when the component *mounts* (is added to the screen) and calls cleanup when the component *unmounts* (is removed from the screen). Additionally, React calls cleanup and setup again if its dependencies changed since the last render.
+
+When Strict Mode is on, React will also run **one extra setup+cleanup cycle in development for every Effect.** This may feel surprising, but it helps reveal subtle bugs that are hard to catch manually.
+
+**Here is an example to illustrate how re-running Effects in Strict Mode helps you find bugs early.**
+
+Consider this example that connects a component to a chat:
+
+<Sandpack>
+
+```js index.js
+import { createRoot } from 'react-dom/client';
+import './styles.css';
+
+import App from './App';
+
+const root = createRoot(document.getElementById("root"));
+root.render(<App />);
+```
+
+```js
+import { useState, useEffect } from 'react';
+import { createConnection } from './chat.js';
+
+const serverUrl = 'https://localhost:1234';
+const roomId = 'general';
+
+export default function ChatRoom() {
+  useEffect(() => {
+    const connection = createConnection(serverUrl, roomId);
+    connection.connect();
+  }, []);
+  return <h1>Welcome to the {roomId} room!</h1>;
+}
+```
+
+```js chat.js
+let connections = 0;
+
+export function createConnection(serverUrl, roomId) {
+  // A real implementation would actually connect to the server
+  return {
+    connect() {
+      console.log('✅ Connecting to "' + roomId + '" room at ' + serverUrl + '...');
+      connections++;
+      console.log('Active connections: ' + connections);
+    },
+    disconnect() {
+      console.log('❌ Disconnected from "' + roomId + '" room at ' + serverUrl);
+      connections--;
+      console.log('Active connections: ' + connections);
+    }
+  };
+}
+```
+
+```css
+input { display: block; margin-bottom: 20px; }
+button { margin-left: 10px; }
+```
+
+</Sandpack>
+
+There is an issue with this code, but it might not be immediately clear.
+
+To make the issue more obvious, let's implement a feature. In the example below, `roomId` is not hardcoded. Instead, the user can select the `roomId` that they want to connect to from a dropdown. Click "Open chat" and then select different chat rooms one by one. Keep track of the number of active connections in the console:
+
+<Sandpack>
+
+```js index.js
+import { createRoot } from 'react-dom/client';
+import './styles.css';
+
+import App from './App';
+
+const root = createRoot(document.getElementById("root"));
+root.render(<App />);
+```
+
+```js
+import { useState, useEffect } from 'react';
+import { createConnection } from './chat.js';
+
+const serverUrl = 'https://localhost:1234';
+
+function ChatRoom({ roomId }) {
+  useEffect(() => {
+    const connection = createConnection(serverUrl, roomId);
+    connection.connect();
+  }, [roomId]);
+
+  return <h1>Welcome to the {roomId} room!</h1>;
+}
+
+export default function App() {
+  const [roomId, setRoomId] = useState('general');
+  const [show, setShow] = useState(false);
+  return (
+    <>
+      <label>
+        Choose the chat room:{' '}
+        <select
+          value={roomId}
+          onChange={e => setRoomId(e.target.value)}
+        >
+          <option value="general">general</option>
+          <option value="travel">travel</option>
+          <option value="music">music</option>
+        </select>
+      </label>
+      <button onClick={() => setShow(!show)}>
+        {show ? 'Close chat' : 'Open chat'}
+      </button>
+      {show && <hr />}
+      {show && <ChatRoom roomId={roomId} />}
+    </>
+  );
+}
+```
+
+```js chat.js
+let connections = 0;
+
+export function createConnection(serverUrl, roomId) {
+  // A real implementation would actually connect to the server
+  return {
+    connect() {
+      console.log('✅ Connecting to "' + roomId + '" room at ' + serverUrl + '...');
+      connections++;
+      console.log('Active connections: ' + connections);
+    },
+    disconnect() {
+      console.log('❌ Disconnected from "' + roomId + '" room at ' + serverUrl);
+      connections--;
+      console.log('Active connections: ' + connections);
+    }
+  };
+}
+```
+
+```css
+input { display: block; margin-bottom: 20px; }
+button { margin-left: 10px; }
+```
+
+</Sandpack>
+
+You'll notice that the number of open connections always keeps growing. In a real app, this would cause performance and network problems. The issue is that [your Effect is missing a cleanup function:](/learn/synchronizing-with-effects#step-3-add-cleanup-if-needed)
+
+```js {4}
+  useEffect(() => {
+    const connection = createConnection(serverUrl, roomId);
+    connection.connect();
+    return () => connection.disconnect();
+  }, [roomId]);
+```
+
+Now that your Effect "cleans up" after itself and destroys the outdated connections, the leak is solved. However, notice that the problem did not become immediately visible until you've added more features (the select box).
+
+**In the original example, the bug wasn't obvious. Now let's wrap the original (buggy) code in `<StrictMode>`:**
+
+<Sandpack>
+
+```js index.js
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import './styles.css';
+
+import App from './App';
+
+const root = createRoot(document.getElementById("root"));
+root.render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);
+```
+
+```js
+import { useState, useEffect } from 'react';
+import { createConnection } from './chat.js';
+
+const serverUrl = 'https://localhost:1234';
+const roomId = 'general';
+
+export default function ChatRoom() {
+  useEffect(() => {
+    const connection = createConnection(serverUrl, roomId);
+    connection.connect();
+  }, []);
+  return <h1>Welcome to the {roomId} room!</h1>;
+}
+```
+
+```js chat.js
+let connections = 0;
+
+export function createConnection(serverUrl, roomId) {
+  // A real implementation would actually connect to the server
+  return {
+    connect() {
+      console.log('✅ Connecting to "' + roomId + '" room at ' + serverUrl + '...');
+      connections++;
+      console.log('Active connections: ' + connections);
+    },
+    disconnect() {
+      console.log('❌ Disconnected from "' + roomId + '" room at ' + serverUrl);
+      connections--;
+      console.log('Active connections: ' + connections);
+    }
+  };
+}
+```
+
+```css
+input { display: block; margin-bottom: 20px; }
+button { margin-left: 10px; }
+```
+
+</Sandpack>
+
+**With Strict Mode, you immediately see that there is a problem** (the number of active connections jumps to 2). This is because Strict Mode runs an extra setup+cleanup cycle for every Effect. This Effect has no cleanup logic, so it creates an extra connection but doesn't destroy it. This is a hint that you're missing a cleanup function.
+
+Strict Mode lets you notice such mistakes early in the process. When you fix your Effect by adding a cleanup function in Strict Mode, you *also* fix many possible future production bugs like the select box from before:
+
+<Sandpack>
+
+```js index.js
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import './styles.css';
+
+import App from './App';
+
+const root = createRoot(document.getElementById("root"));
+root.render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);
+```
+
+```js
+import { useState, useEffect } from 'react';
+import { createConnection } from './chat.js';
+
+const serverUrl = 'https://localhost:1234';
+
+function ChatRoom({ roomId }) {
+  useEffect(() => {
+    const connection = createConnection(serverUrl, roomId);
+    connection.connect();
+    return () => connection.disconnect();
+  }, [roomId]);
+
+  return <h1>Welcome to the {roomId} room!</h1>;
+}
+
+export default function App() {
+  const [roomId, setRoomId] = useState('general');
+  const [show, setShow] = useState(false);
+  return (
+    <>
+      <label>
+        Choose the chat room:{' '}
+        <select
+          value={roomId}
+          onChange={e => setRoomId(e.target.value)}
+        >
+          <option value="general">general</option>
+          <option value="travel">travel</option>
+          <option value="music">music</option>
+        </select>
+      </label>
+      <button onClick={() => setShow(!show)}>
+        {show ? 'Close chat' : 'Open chat'}
+      </button>
+      {show && <hr />}
+      {show && <ChatRoom roomId={roomId} />}
+    </>
+  );
+}
+```
+
+```js chat.js
+let connections = 0;
+
+export function createConnection(serverUrl, roomId) {
+  // A real implementation would actually connect to the server
+  return {
+    connect() {
+      console.log('✅ Connecting to "' + roomId + '" room at ' + serverUrl + '...');
+      connections++;
+      console.log('Active connections: ' + connections);
+    },
+    disconnect() {
+      console.log('❌ Disconnected from "' + roomId + '" room at ' + serverUrl);
+      connections--;
+      console.log('Active connections: ' + connections);
+    }
+  };
+}
+```
+
+```css
+input { display: block; margin-bottom: 20px; }
+button { margin-left: 10px; }
+```
+
+</Sandpack>
+
+Notice how the active connection count in the console doesn't keep growing anymore.
+
+Without Strict Mode, it was easy to miss that your Effect needed cleanup. By running *setup → cleanup → setup* instead of *setup* for your Effect in development, Strict Mode made the missing cleanup logic more noticeable.
+
+[Read more about implementing Effect cleanup.](/learn/synchronizing-with-effects#how-to-handle-the-effect-firing-twice-in-development)
+
+---
+
+### Fixing deprecation warnings enabled by Strict Mode {/*fixing-deprecation-warnings-enabled-by-strict-mode*/}
+
+React warns if some component anywhere inside a `<StrictMode>` tree uses one of these deprecated APIs:
+
+* [`findDOMNode`](/reference/react-dom/findDOMNode). [See alternatives.](https://reactjs.org/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage)
+* `UNSAFE_` class lifecycle methods like [`UNSAFE_componentWillMount`](/reference/react/Component#unsafe_componentwillmount). [See alternatives.](https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#migrating-from-legacy-lifecycles) 
+* Legacy context ([`childContextTypes`](/reference/react/Component#static-childcontexttypes), [`contextTypes`](/reference/react/Component#static-contexttypes), and [`getChildContext`](/reference/react/Component#getchildcontext)). [See alternatives.](/reference/react/createContext)
+* Legacy string refs ([`this.refs`](/reference/react/Component#refs)). [See alternatives.](https://reactjs.org/docs/strict-mode.html#warning-about-legacy-string-ref-api-usage)
+
+These APIs are primarily used in older [class components](/reference/react/Component) so they rarely appear in modern apps.
diff --git a/beta/src/content/reference/react/Suspense.md b/beta/src/content/reference/react/Suspense.md
new file mode 100644
index 000000000..6e4f44ff7
--- /dev/null
+++ b/beta/src/content/reference/react/Suspense.md
@@ -0,0 +1,2562 @@
+---
+title: <Suspense>
+---
+
+<Intro>
+
+`<Suspense>` lets you display a fallback until its children have finished loading.
+
+
+```js
+<Suspense fallback={<Loading />}>
+  <SomeComponent />
+</Suspense>
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `<Suspense>` {/*suspense*/}
+
+#### Props {/*props*/}
+* `children`: The actual UI you intend to render. If `children` suspends while rendering, the Suspense boundary will switch to rendering `fallback`.
+* `fallback`: An alternate UI to render in place of the actual UI if it has not finished loading. Any valid React node is accepted, though in practice, a fallback is a lightweight placeholder view, such as a loading spinner or skeleton. Suspense will automatically switch to `fallback` when `children` suspends, and back to `children` when the data is ready. If `fallback` suspends while rendering, it will activate the closest parent Suspense boundary.
+
+#### Caveats {/*caveats*/}
+
+- React does not preserve any state for renders that got suspended before they were able to mount for the first time. When the component has loaded, React will retry rendering the suspended tree from scratch.
+- If Suspense was displaying content for the tree, but then it suspended again, the `fallback` will be shown again unless the update causing it was caused by [`startTransition`](/reference/react/startTransition) or [`useDeferredValue`](/reference/react/useDeferredValue).
+- If React needs to hide the already visible content because it suspended again, it will clean up [layout Effects](/reference/react/useLayoutEffect) in the content tree. When the content is ready to be shown again, React will fire the layout Effects again. This lets you make sure that Effects measuring the DOM layout don't try to do this while the content is hidden.
+- React includes under-the-hood optimizations like *Streaming Server Rendering* and *Selective Hydration* that are integrated with Suspense. Read [an architectural overview](https://github.com/reactwg/react-18/discussions/37) and watch [a technical talk](https://www.youtube.com/watch?v=pj5N-Khihgc) to learn more.
+
+---
+
+## Usage {/*usage*/}
+
+### Displaying a fallback while content is loading {/*displaying-a-fallback-while-content-is-loading*/}
+
+You can wrap any part of your application with a Suspense boundary:
+
+```js [[1, 1, "<Loading />"], [2, 2, "<Albums />"]]
+<Suspense fallback={<Loading />}>
+  <Albums />
+</Suspense>
+```
+
+React will display your <CodeStep step={1}>loading fallback</CodeStep> until all the code and data needed by <CodeStep step={2}>the children</CodeStep> has been loaded.
+
+In the example below, the `Albums` component *suspends* while fetching the list of albums. Until it's ready to render, React switches the closest Suspense boundary above to show the fallback--your `Loading` component. Then, when the data loads, React hides the `Loading` fallback and renders the `Albums` component with data.
+
+<Sandpack>
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "experimental",
+    "react-dom": "experimental"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+```js App.js hidden
+import { useState } from 'react';
+import ArtistPage from './ArtistPage.js';
+
+export default function App() {
+  const [show, setShow] = useState(false);
+  if (show) {
+    return (
+      <ArtistPage
+        artist={{
+          id: 'the-beatles',
+          name: 'The Beatles',
+        }}
+      />
+    );
+  } else {
+    return (
+      <button onClick={() => setShow(true)}>
+        Open The Beatles artist page
+      </button>
+    );
+  }
+}
+```
+
+```js ArtistPage.js active
+import { Suspense } from 'react';
+import Albums from './Albums.js';
+
+export default function ArtistPage({ artist }) {
+  return (
+    <>
+      <h1>{artist.name}</h1>
+      <Suspense fallback={<Loading />}>
+        <Albums artistId={artist.id} />
+      </Suspense>
+    </>
+  );
+}
+
+function Loading() {
+  return <h2>🌀 Loading...</h2>;
+}
+```
+
+```js Albums.js hidden
+import { fetchData } from './data.js';
+
+// Note: this component is written using an experimental API
+// that's not yet available in stable versions of React.
+
+// For a realistic example you can follow today, try a framework
+// that's integrated with Suspense, like Relay or Next.js.
+
+export default function Albums({ artistId }) {
+  const albums = use(fetchData(`/${artistId}/albums`));
+  return (
+    <ul>
+      {albums.map(album => (
+        <li key={album.id}>
+          {album.title} ({album.year})
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+// This is a workaround for a bug to get the demo running.
+// TODO: replace with real implementation when the bug is fixed.
+function use(promise) {
+  if (promise.status === 'fulfilled') {
+    return promise.value;
+  } else if (promise.status === 'rejected') {
+    throw promise.reason;
+  } else if (promise.status === 'pending') {
+    throw promise;
+  } else {
+    promise.status = 'pending';
+    promise.then(
+      result => {
+        promise.status = 'fulfilled';
+        promise.value = result;
+      },
+      reason => {
+        promise.status = 'rejected';
+        promise.reason = reason;
+      },      
+    );
+    throw promise;
+  }
+}
+```
+
+```js data.js hidden
+// Note: the way you would do data fetching depends on
+// the framework that you use together with Suspense.
+// Normally, the caching logic would be inside a framework.
+
+let cache = new Map();
+
+export function fetchData(url) {
+  if (!cache.has(url)) {
+    cache.set(url, getData(url));
+  }
+  return cache.get(url);
+}
+
+async function getData(url) {
+  if (url === '/the-beatles/albums') {
+    return await getAlbums();
+  } else {
+    throw Error('Not implemented');
+  }
+}
+
+async function getAlbums() {
+  // Add a fake delay to make waiting noticeable.
+  await new Promise(resolve => {
+    setTimeout(resolve, 3000);
+  });
+
+  return [{
+    id: 13,
+    title: 'Let It Be',
+    year: 1970
+  }, {
+    id: 12,
+    title: 'Abbey Road',
+    year: 1969
+  }, {
+    id: 11,
+    title: 'Yellow Submarine',
+    year: 1969
+  }, {
+    id: 10,
+    title: 'The Beatles',
+    year: 1968
+  }, {
+    id: 9,
+    title: 'Magical Mystery Tour',
+    year: 1967
+  }, {
+    id: 8,
+    title: 'Sgt. Pepper\'s Lonely Hearts Club Band',
+    year: 1967
+  }, {
+    id: 7,
+    title: 'Revolver',
+    year: 1966
+  }, {
+    id: 6,
+    title: 'Rubber Soul',
+    year: 1965
+  }, {
+    id: 5,
+    title: 'Help!',
+    year: 1965
+  }, {
+    id: 4,
+    title: 'Beatles For Sale',
+    year: 1964
+  }, {
+    id: 3,
+    title: 'A Hard Day\'s Night',
+    year: 1964
+  }, {
+    id: 2,
+    title: 'With The Beatles',
+    year: 1963
+  }, {
+    id: 1,
+    title: 'Please Please Me',
+    year: 1963
+  }];
+}
+```
+
+</Sandpack>
+
+<Note>
+
+**Only Suspense-enabled data sources will activate the Suspense component.** They include:
+
+- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/advanced-features/react-18)
+- Lazy-loading component code with [`lazy`](/reference/react/lazy)
+
+Suspense **does not** detect when data is fetched inside an Effect or event handler.
+
+The exact way you would load data in the `Albums` component above depends on your framework. If you use a Suspense-enabled framework, you'll find the details in its data fetching documentation.
+
+Suspense-enabled data fetching without the use of an opinionated framework is not yet supported. The requirements for implementing a Suspense-enabled data source are unstable and undocumented. An official API for integrating data sources with Suspense will be released in a future version of React. 
+
+</Note>
+
+---
+
+### Revealing content together at once {/*revealing-content-together-at-once*/}
+
+By default, the whole tree inside Suspense is treated as a single unit. For example, even if *only one* of these components suspends waiting for some data, *all* of them together will be replaced by the loading indicator:
+
+```js {2-5}
+<Suspense fallback={<Loading />}>
+  <Biography />
+  <Panel>
+    <Albums />
+  </Panel>
+</Suspense>
+```
+
+Then, after all of them are ready to be displayed, they will all appear together at once.
+
+In the example below, both `Biography` and `Albums` fetch some data. However, because they are grouped under a single Suspense boundary, these components always "pop in" together at the same time.
+
+<Sandpack>
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "experimental",
+    "react-dom": "experimental"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+```js App.js hidden
+import { useState } from 'react';
+import ArtistPage from './ArtistPage.js';
+
+export default function App() {
+  const [show, setShow] = useState(false);
+  if (show) {
+    return (
+      <ArtistPage
+        artist={{
+          id: 'the-beatles',
+          name: 'The Beatles',
+        }}
+      />
+    );
+  } else {
+    return (
+      <button onClick={() => setShow(true)}>
+        Open The Beatles artist page
+      </button>
+    );
+  }
+}
+```
+
+```js ArtistPage.js active
+import { Suspense } from 'react';
+import Albums from './Albums.js';
+import Biography from './Biography.js';
+import Panel from './Panel.js';
+
+export default function ArtistPage({ artist }) {
+  return (
+    <>
+      <h1>{artist.name}</h1>
+      <Suspense fallback={<Loading />}>
+        <Biography artistId={artist.id} />
+        <Panel>
+          <Albums artistId={artist.id} />
+        </Panel>
+      </Suspense>
+    </>
+  );
+}
+
+function Loading() {
+  return <h2>🌀 Loading...</h2>;
+}
+```
+
+```js Panel.js
+export default function Panel({ children }) {
+  return (
+    <section className="panel">
+      {children}
+    </section>
+  );
+}
+```
+
+```js Biography.js hidden
+import { fetchData } from './data.js';
+
+// Note: this component is written using an experimental API
+// that's not yet available in stable versions of React.
+
+// For a realistic example you can follow today, try a framework
+// that's integrated with Suspense, like Relay or Next.js.
+
+export default function Biography({ artistId }) {
+  const bio = use(fetchData(`/${artistId}/bio`));
+  return (
+    <section>
+      <p className="bio">{bio}</p>
+    </section>
+  );
+}
+
+// This is a workaround for a bug to get the demo running.
+// TODO: replace with real implementation when the bug is fixed.
+function use(promise) {
+  if (promise.status === 'fulfilled') {
+    return promise.value;
+  } else if (promise.status === 'rejected') {
+    throw promise.reason;
+  } else if (promise.status === 'pending') {
+    throw promise;
+  } else {
+    promise.status = 'pending';
+    promise.then(
+      result => {
+        promise.status = 'fulfilled';
+        promise.value = result;
+      },
+      reason => {
+        promise.status = 'rejected';
+        promise.reason = reason;
+      },      
+    );
+    throw promise;
+  }
+}
+```
+
+```js Albums.js hidden
+import { fetchData } from './data.js';
+
+// Note: this component is written using an experimental API
+// that's not yet available in stable versions of React.
+
+// For a realistic example you can follow today, try a framework
+// that's integrated with Suspense, like Relay or Next.js.
+
+export default function Albums({ artistId }) {
+  const albums = use(fetchData(`/${artistId}/albums`));
+  return (
+    <ul>
+      {albums.map(album => (
+        <li key={album.id}>
+          {album.title} ({album.year})
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+// This is a workaround for a bug to get the demo running.
+// TODO: replace with real implementation when the bug is fixed.
+function use(promise) {
+  if (promise.status === 'fulfilled') {
+    return promise.value;
+  } else if (promise.status === 'rejected') {
+    throw promise.reason;
+  } else if (promise.status === 'pending') {
+    throw promise;
+  } else {
+    promise.status = 'pending';
+    promise.then(
+      result => {
+        promise.status = 'fulfilled';
+        promise.value = result;
+      },
+      reason => {
+        promise.status = 'rejected';
+        promise.reason = reason;
+      },      
+    );
+    throw promise;
+  }
+}
+```
+
+```js data.js hidden
+// Note: the way you would do data fetching depends on
+// the framework that you use together with Suspense.
+// Normally, the caching logic would be inside a framework.
+
+let cache = new Map();
+
+export function fetchData(url) {
+  if (!cache.has(url)) {
+    cache.set(url, getData(url));
+  }
+  return cache.get(url);
+}
+
+async function getData(url) {
+  if (url === '/the-beatles/albums') {
+    return await getAlbums();
+  } else if (url === '/the-beatles/bio') {
+    return await getBio();
+  } else {
+    throw Error('Not implemented');
+  }
+}
+
+async function getBio() {
+  // Add a fake delay to make waiting noticeable.
+  await new Promise(resolve => {
+    setTimeout(resolve, 1500);
+  });
+
+  return `The Beatles were an English rock band, 
+    formed in Liverpool in 1960, that comprised 
+    John Lennon, Paul McCartney, George Harrison 
+    and Ringo Starr.`;
+}
+
+async function getAlbums() {
+  // Add a fake delay to make waiting noticeable.
+  await new Promise(resolve => {
+    setTimeout(resolve, 3000);
+  });
+
+  return [{
+    id: 13,
+    title: 'Let It Be',
+    year: 1970
+  }, {
+    id: 12,
+    title: 'Abbey Road',
+    year: 1969
+  }, {
+    id: 11,
+    title: 'Yellow Submarine',
+    year: 1969
+  }, {
+    id: 10,
+    title: 'The Beatles',
+    year: 1968
+  }, {
+    id: 9,
+    title: 'Magical Mystery Tour',
+    year: 1967
+  }, {
+    id: 8,
+    title: 'Sgt. Pepper\'s Lonely Hearts Club Band',
+    year: 1967
+  }, {
+    id: 7,
+    title: 'Revolver',
+    year: 1966
+  }, {
+    id: 6,
+    title: 'Rubber Soul',
+    year: 1965
+  }, {
+    id: 5,
+    title: 'Help!',
+    year: 1965
+  }, {
+    id: 4,
+    title: 'Beatles For Sale',
+    year: 1964
+  }, {
+    id: 3,
+    title: 'A Hard Day\'s Night',
+    year: 1964
+  }, {
+    id: 2,
+    title: 'With The Beatles',
+    year: 1963
+  }, {
+    id: 1,
+    title: 'Please Please Me',
+    year: 1963
+  }];
+}
+```
+
+```css
+.bio { font-style: italic; }
+
+.panel {
+  border: 1px solid #aaa;
+  border-radius: 6px;
+  margin-top: 20px;
+  padding: 10px;
+}
+```
+
+</Sandpack>
+
+Components that load data don't have to be direct children of the Suspense boundary. For example, you can move `Biography` and `Albums` into a new `Details` component. This doesn't change the behavior. Because `Biography` and `Albums` share the same closest parent Suspense boundary, their reveal is coordinated together.
+
+```js {2,8-11}
+<Suspense fallback={<Loading />}>
+  <Details artistId={artist.id} />
+</Suspense>
+
+function Details({ artistId }) {
+  return (
+    <>
+      <Biography artistId={artistId} />
+      <Panel>
+        <Albums artistId={artistId} />
+      </Panel>
+    </>
+  );
+}
+```
+
+---
+
+### Revealing nested content as it loads {/*revealing-nested-content-as-it-loads*/}
+
+When a component suspends, the closest parent Suspense component shows the fallback. This lets you nest multiple Suspense components to create a loading sequence. Each Suspense boundary's fallback will be filled in as the next level of content becomes available. For example, you can give the album list its own loading fallback:
+
+```js {3,7}
+<Suspense fallback={<BigSpinner />}>
+  <Biography />
+  <Suspense fallback={<AlbumsGlimmer />}>
+    <Panel>
+      <Albums />
+    </Panel>
+  </Suspense>
+</Suspense>
+```
+
+With this change, displaying the `Biography` doesn't need to "wait" for the `Albums` to load.
+
+The sequence will be:
+
+1. If `Biography` hasn't loaded yet, `BigSpinner` is shown in place of the entire content area.
+1. Once `Biography` finishes loading, `BigSpinner` is replaced by the content.
+1. If `Albums` hasn't loaded yet, `AlbumsGlimmer` is shown in place of `Albums` and its parent `Panel`.
+1. Finally, once `Albums` finishes loading, it replaces `AlbumsGlimmer`.
+
+<Sandpack>
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "experimental",
+    "react-dom": "experimental"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+```js App.js hidden
+import { useState } from 'react';
+import ArtistPage from './ArtistPage.js';
+
+export default function App() {
+  const [show, setShow] = useState(false);
+  if (show) {
+    return (
+      <ArtistPage
+        artist={{
+          id: 'the-beatles',
+          name: 'The Beatles',
+        }}
+      />
+    );
+  } else {
+    return (
+      <button onClick={() => setShow(true)}>
+        Open The Beatles artist page
+      </button>
+    );
+  }
+}
+```
+
+```js ArtistPage.js active
+import { Suspense } from 'react';
+import Albums from './Albums.js';
+import Biography from './Biography.js';
+import Panel from './Panel.js';
+
+export default function ArtistPage({ artist }) {
+  return (
+    <>
+      <h1>{artist.name}</h1>
+      <Suspense fallback={<BigSpinner />}>
+        <Biography artistId={artist.id} />
+        <Suspense fallback={<AlbumsGlimmer />}>
+          <Panel>
+            <Albums artistId={artist.id} />
+          </Panel>
+        </Suspense>
+      </Suspense>
+    </>
+  );
+}
+
+function BigSpinner() {
+  return <h2>🌀 Loading...</h2>;
+}
+
+function AlbumsGlimmer() {
+  return (
+    <div className="glimmer-panel">
+      <div className="glimmer-line" />
+      <div className="glimmer-line" />
+      <div className="glimmer-line" />
+    </div>
+  );
+}
+```
+
+```js Panel.js
+export default function Panel({ children }) {
+  return (
+    <section className="panel">
+      {children}
+    </section>
+  );
+}
+```
+
+```js Biography.js hidden
+import { fetchData } from './data.js';
+
+// Note: this component is written using an experimental API
+// that's not yet available in stable versions of React.
+
+// For a realistic example you can follow today, try a framework
+// that's integrated with Suspense, like Relay or Next.js.
+
+export default function Biography({ artistId }) {
+  const bio = use(fetchData(`/${artistId}/bio`));
+  return (
+    <section>
+      <p className="bio">{bio}</p>
+    </section>
+  );
+}
+
+// This is a workaround for a bug to get the demo running.
+// TODO: replace with real implementation when the bug is fixed.
+function use(promise) {
+  if (promise.status === 'fulfilled') {
+    return promise.value;
+  } else if (promise.status === 'rejected') {
+    throw promise.reason;
+  } else if (promise.status === 'pending') {
+    throw promise;
+  } else {
+    promise.status = 'pending';
+    promise.then(
+      result => {
+        promise.status = 'fulfilled';
+        promise.value = result;
+      },
+      reason => {
+        promise.status = 'rejected';
+        promise.reason = reason;
+      },      
+    );
+    throw promise;
+  }
+}
+```
+
+```js Albums.js hidden
+import { fetchData } from './data.js';
+
+// Note: this component is written using an experimental API
+// that's not yet available in stable versions of React.
+
+// For a realistic example you can follow today, try a framework
+// that's integrated with Suspense, like Relay or Next.js.
+
+export default function Albums({ artistId }) {
+  const albums = use(fetchData(`/${artistId}/albums`));
+  return (
+    <ul>
+      {albums.map(album => (
+        <li key={album.id}>
+          {album.title} ({album.year})
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+// This is a workaround for a bug to get the demo running.
+// TODO: replace with real implementation when the bug is fixed.
+function use(promise) {
+  if (promise.status === 'fulfilled') {
+    return promise.value;
+  } else if (promise.status === 'rejected') {
+    throw promise.reason;
+  } else if (promise.status === 'pending') {
+    throw promise;
+  } else {
+    promise.status = 'pending';
+    promise.then(
+      result => {
+        promise.status = 'fulfilled';
+        promise.value = result;
+      },
+      reason => {
+        promise.status = 'rejected';
+        promise.reason = reason;
+      },      
+    );
+    throw promise;
+  }
+}
+```
+
+```js data.js hidden
+// Note: the way you would do data fetching depends on
+// the framework that you use together with Suspense.
+// Normally, the caching logic would be inside a framework.
+
+let cache = new Map();
+
+export function fetchData(url) {
+  if (!cache.has(url)) {
+    cache.set(url, getData(url));
+  }
+  return cache.get(url);
+}
+
+async function getData(url) {
+  if (url === '/the-beatles/albums') {
+    return await getAlbums();
+  } else if (url === '/the-beatles/bio') {
+    return await getBio();
+  } else {
+    throw Error('Not implemented');
+  }
+}
+
+async function getBio() {
+  // Add a fake delay to make waiting noticeable.
+  await new Promise(resolve => {
+    setTimeout(resolve, 500);
+  });
+
+  return `The Beatles were an English rock band, 
+    formed in Liverpool in 1960, that comprised 
+    John Lennon, Paul McCartney, George Harrison 
+    and Ringo Starr.`;
+}
+
+async function getAlbums() {
+  // Add a fake delay to make waiting noticeable.
+  await new Promise(resolve => {
+    setTimeout(resolve, 3000);
+  });
+
+  return [{
+    id: 13,
+    title: 'Let It Be',
+    year: 1970
+  }, {
+    id: 12,
+    title: 'Abbey Road',
+    year: 1969
+  }, {
+    id: 11,
+    title: 'Yellow Submarine',
+    year: 1969
+  }, {
+    id: 10,
+    title: 'The Beatles',
+    year: 1968
+  }, {
+    id: 9,
+    title: 'Magical Mystery Tour',
+    year: 1967
+  }, {
+    id: 8,
+    title: 'Sgt. Pepper\'s Lonely Hearts Club Band',
+    year: 1967
+  }, {
+    id: 7,
+    title: 'Revolver',
+    year: 1966
+  }, {
+    id: 6,
+    title: 'Rubber Soul',
+    year: 1965
+  }, {
+    id: 5,
+    title: 'Help!',
+    year: 1965
+  }, {
+    id: 4,
+    title: 'Beatles For Sale',
+    year: 1964
+  }, {
+    id: 3,
+    title: 'A Hard Day\'s Night',
+    year: 1964
+  }, {
+    id: 2,
+    title: 'With The Beatles',
+    year: 1963
+  }, {
+    id: 1,
+    title: 'Please Please Me',
+    year: 1963
+  }];
+}
+```
+
+```css
+.bio { font-style: italic; }
+
+.panel {
+  border: 1px solid #aaa;
+  border-radius: 6px;
+  margin-top: 20px;
+  padding: 10px;
+}
+
+.glimmer-panel {
+  border: 1px dashed #aaa;
+  background: linear-gradient(90deg, rgba(221,221,221,1) 0%, rgba(255,255,255,1) 100%);
+  border-radius: 6px;
+  margin-top: 20px;
+  padding: 10px;
+}
+
+.glimmer-line {
+  display: block;
+  width: 60%;
+  height: 20px;
+  margin: 10px;
+  border-radius: 4px;
+  background: #f0f0f0;
+}
+```
+
+</Sandpack>
+
+Suspense boundaries let you coordinate which parts of your UI should always "pop in" together at the same time, and which parts should progressively reveal more content in a sequence of loading states. You can add, move, or delete Suspense boundaries in any place in the tree without affecting the rest of your app's behavior.
+
+Don't put a Suspense boundary around every component. Suspense boundaries should not be more granular than the loading sequence that you want the user to experience. If you work with a designer, ask them where the loading states should be placed--it's likely that they've already included them in their design wireframes.
+
+---
+
+### Showing stale content while fresh content is loading {/*showing-stale-content-while-fresh-content-is-loading*/}
+
+In this example, the `SearchResults` component suspends while fetching the search results. Try typing `"a"`, waiting for the results, and then editing it to `"ab"`. The results for `"a"` will get replaced by the loading fallback.
+
+<Sandpack>
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "experimental",
+    "react-dom": "experimental"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+```js App.js
+import { Suspense, useState } from 'react';
+import SearchResults from './SearchResults.js';
+
+export default function App() {
+  const [query, setQuery] = useState('');
+  return (
+    <>
+      <label>
+        Search albums:
+        <input value={query} onChange={e => setQuery(e.target.value)} />
+      </label>
+      <Suspense fallback={<h2>Loading...</h2>}>
+        <SearchResults query={query} />
+      </Suspense>
+    </>
+  );
+}
+```
+
+```js SearchResults.js hidden
+import { fetchData } from './data.js';
+
+// Note: this component is written using an experimental API
+// that's not yet available in stable versions of React.
+
+// For a realistic example you can follow today, try a framework
+// that's integrated with Suspense, like Relay or Next.js.
+
+export default function SearchResults({ query }) {
+  if (query === '') {
+    return null;
+  }
+  const albums = use(fetchData(`/search?q=${query}`));
+  if (albums.length === 0) {
+    return <p>No matches for <i>"{query}"</i></p>;
+  }
+  return (
+    <ul>
+      {albums.map(album => (
+        <li key={album.id}>
+          {album.title} ({album.year})
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+// This is a workaround for a bug to get the demo running.
+// TODO: replace with real implementation when the bug is fixed.
+function use(promise) {
+  if (promise.status === 'fulfilled') {
+    return promise.value;
+  } else if (promise.status === 'rejected') {
+    throw promise.reason;
+  } else if (promise.status === 'pending') {
+    throw promise;
+  } else {
+    promise.status = 'pending';
+    promise.then(
+      result => {
+        promise.status = 'fulfilled';
+        promise.value = result;
+      },
+      reason => {
+        promise.status = 'rejected';
+        promise.reason = reason;
+      },      
+    );
+    throw promise;
+  }
+}
+```
+
+```js data.js hidden
+// Note: the way you would do data fetching depends on
+// the framework that you use together with Suspense.
+// Normally, the caching logic would be inside a framework.
+
+let cache = new Map();
+
+export function fetchData(url) {
+  if (!cache.has(url)) {
+    cache.set(url, getData(url));
+  }
+  return cache.get(url);
+}
+
+async function getData(url) {
+  if (url.startsWith('/search?q=')) {
+    return await getSearchResults(url.slice('/search?q='.length));
+  } else {
+    throw Error('Not implemented');
+  }
+}
+
+async function getSearchResults(query) {
+  // Add a fake delay to make waiting noticeable.
+  await new Promise(resolve => {
+    setTimeout(resolve, 500);
+  });
+
+  const allAlbums = [{
+    id: 13,
+    title: 'Let It Be',
+    year: 1970
+  }, {
+    id: 12,
+    title: 'Abbey Road',
+    year: 1969
+  }, {
+    id: 11,
+    title: 'Yellow Submarine',
+    year: 1969
+  }, {
+    id: 10,
+    title: 'The Beatles',
+    year: 1968
+  }, {
+    id: 9,
+    title: 'Magical Mystery Tour',
+    year: 1967
+  }, {
+    id: 8,
+    title: 'Sgt. Pepper\'s Lonely Hearts Club Band',
+    year: 1967
+  }, {
+    id: 7,
+    title: 'Revolver',
+    year: 1966
+  }, {
+    id: 6,
+    title: 'Rubber Soul',
+    year: 1965
+  }, {
+    id: 5,
+    title: 'Help!',
+    year: 1965
+  }, {
+    id: 4,
+    title: 'Beatles For Sale',
+    year: 1964
+  }, {
+    id: 3,
+    title: 'A Hard Day\'s Night',
+    year: 1964
+  }, {
+    id: 2,
+    title: 'With The Beatles',
+    year: 1963
+  }, {
+    id: 1,
+    title: 'Please Please Me',
+    year: 1963
+  }];
+
+  const lowerQuery = query.trim().toLowerCase();
+  return allAlbums.filter(album => {
+    const lowerTitle = album.title.toLowerCase();
+    return (
+      lowerTitle.startsWith(lowerQuery) ||
+      lowerTitle.indexOf(' ' + lowerQuery) !== -1
+    )
+  });
+}
+```
+
+```css
+input { margin: 10px; }
+```
+
+</Sandpack>
+
+A common alternative UI pattern is to *defer* updating the list of results and to keep showing the previous results until the new results are ready. The [`useDeferredValue`](/reference/react/useDeferredValue) Hook lets you pass a deferred version of the query down: 
+
+```js {3,11}
+export default function App() {
+  const [query, setQuery] = useState('');
+  const deferredQuery = useDeferredValue(query);
+  return (
+    <>
+      <label>
+        Search albums:
+        <input value={query} onChange={e => setQuery(e.target.value)} />
+      </label>
+      <Suspense fallback={<h2>Loading...</h2>}>
+        <SearchResults query={deferredQuery} />
+      </Suspense>
+    </>
+  );
+}
+```
+
+The `query` will update immediately, so the input will display the new value. However, the `deferredQuery` will keep its previous value until the data has loaded, so `SearchResults` will show the stale results for a bit.
+
+To make it more obvious to the user, you can add a visual indication when the stale result list is displayed:
+
+```js {2}
+<div style={{
+  opacity: query !== deferredQuery ? 0.5 : 1 
+}}>
+  <SearchResults query={deferredQuery} />
+</div>
+```
+
+Enter `"a"` in the example below, wait for the results to load, and then edit the input to `"ab"`. Notice how instead of the Suspense fallback, you now see the slightly dimmed stale result list until the new results have loaded:
+
+
+<Sandpack>
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "experimental",
+    "react-dom": "experimental"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+```js App.js
+import { Suspense, useState, useDeferredValue } from 'react';
+import SearchResults from './SearchResults.js';
+
+export default function App() {
+  const [query, setQuery] = useState('');
+  const deferredQuery = useDeferredValue(query);
+  const isStale = query !== deferredQuery;
+  return (
+    <>
+      <label>
+        Search albums:
+        <input value={query} onChange={e => setQuery(e.target.value)} />
+      </label>
+      <Suspense fallback={<h2>Loading...</h2>}>
+        <div style={{ opacity: isStale ? 0.5 : 1 }}>
+          <SearchResults query={deferredQuery} />
+        </div>
+      </Suspense>
+    </>
+  );
+}
+```
+
+```js SearchResults.js hidden
+import { fetchData } from './data.js';
+
+// Note: this component is written using an experimental API
+// that's not yet available in stable versions of React.
+
+// For a realistic example you can follow today, try a framework
+// that's integrated with Suspense, like Relay or Next.js.
+
+export default function SearchResults({ query }) {
+  if (query === '') {
+    return null;
+  }
+  const albums = use(fetchData(`/search?q=${query}`));
+  if (albums.length === 0) {
+    return <p>No matches for <i>"{query}"</i></p>;
+  }
+  return (
+    <ul>
+      {albums.map(album => (
+        <li key={album.id}>
+          {album.title} ({album.year})
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+// This is a workaround for a bug to get the demo running.
+// TODO: replace with real implementation when the bug is fixed.
+function use(promise) {
+  if (promise.status === 'fulfilled') {
+    return promise.value;
+  } else if (promise.status === 'rejected') {
+    throw promise.reason;
+  } else if (promise.status === 'pending') {
+    throw promise;
+  } else {
+    promise.status = 'pending';
+    promise.then(
+      result => {
+        promise.status = 'fulfilled';
+        promise.value = result;
+      },
+      reason => {
+        promise.status = 'rejected';
+        promise.reason = reason;
+      },      
+    );
+    throw promise;
+  }
+}
+```
+
+```js data.js hidden
+// Note: the way you would do data fetching depends on
+// the framework that you use together with Suspense.
+// Normally, the caching logic would be inside a framework.
+
+let cache = new Map();
+
+export function fetchData(url) {
+  if (!cache.has(url)) {
+    cache.set(url, getData(url));
+  }
+  return cache.get(url);
+}
+
+async function getData(url) {
+  if (url.startsWith('/search?q=')) {
+    return await getSearchResults(url.slice('/search?q='.length));
+  } else {
+    throw Error('Not implemented');
+  }
+}
+
+async function getSearchResults(query) {
+  // Add a fake delay to make waiting noticeable.
+  await new Promise(resolve => {
+    setTimeout(resolve, 500);
+  });
+
+  const allAlbums = [{
+    id: 13,
+    title: 'Let It Be',
+    year: 1970
+  }, {
+    id: 12,
+    title: 'Abbey Road',
+    year: 1969
+  }, {
+    id: 11,
+    title: 'Yellow Submarine',
+    year: 1969
+  }, {
+    id: 10,
+    title: 'The Beatles',
+    year: 1968
+  }, {
+    id: 9,
+    title: 'Magical Mystery Tour',
+    year: 1967
+  }, {
+    id: 8,
+    title: 'Sgt. Pepper\'s Lonely Hearts Club Band',
+    year: 1967
+  }, {
+    id: 7,
+    title: 'Revolver',
+    year: 1966
+  }, {
+    id: 6,
+    title: 'Rubber Soul',
+    year: 1965
+  }, {
+    id: 5,
+    title: 'Help!',
+    year: 1965
+  }, {
+    id: 4,
+    title: 'Beatles For Sale',
+    year: 1964
+  }, {
+    id: 3,
+    title: 'A Hard Day\'s Night',
+    year: 1964
+  }, {
+    id: 2,
+    title: 'With The Beatles',
+    year: 1963
+  }, {
+    id: 1,
+    title: 'Please Please Me',
+    year: 1963
+  }];
+
+  const lowerQuery = query.trim().toLowerCase();
+  return allAlbums.filter(album => {
+    const lowerTitle = album.title.toLowerCase();
+    return (
+      lowerTitle.startsWith(lowerQuery) ||
+      lowerTitle.indexOf(' ' + lowerQuery) !== -1
+    )
+  });
+}
+```
+
+```css
+input { margin: 10px; }
+```
+
+</Sandpack>
+
+<Note>
+
+Both deferred values and [transitions](#preventing-already-revealed-content-from-hiding) let you avoid showing Suspense fallback in favor of inline indicators. Transitions mark the whole update as non-urgent so they are typically used by frameworks and router libraries for navigation. Deferred values, on the other hand, are mostly useful in application code where you want to mark a part of UI as non-urgent, meaning that it's allowed to "lag behind" the rest of the UI.
+
+</Note>
+
+---
+
+### Preventing already revealed content from hiding {/*preventing-already-revealed-content-from-hiding*/}
+
+When a component suspends, the closest parent Suspense boundary switches to showing the fallback. This can lead to a jarring user experience if it was already displaying some content. Press the button in the example below:
+
+<Sandpack>
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "experimental",
+    "react-dom": "experimental"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+```js App.js
+import { Suspense, useState } from 'react';
+import IndexPage from './IndexPage.js';
+import ArtistPage from './ArtistPage.js';
+import Layout from './Layout.js';
+
+export default function App() {
+  return (
+    <Suspense fallback={<BigSpinner />}>
+      <Router />
+    </Suspense>
+  );
+}
+
+function Router() {
+  const [page, setPage] = useState('/');
+
+  function navigate(url) {
+    setPage(url);
+  }
+
+  let content;
+  if (page === '/') {
+    content = (
+      <IndexPage navigate={navigate} />
+    );
+  } else if (page === '/the-beatles') {
+    content = (
+      <ArtistPage
+        artist={{
+          id: 'the-beatles',
+          name: 'The Beatles',
+        }}
+      />
+    );
+  }
+  return (
+    <Layout>
+      {content}
+    </Layout>
+  );
+}
+
+function BigSpinner() {
+  return <h2>🌀 Loading...</h2>;
+}
+```
+
+```js Layout.js
+export default function Layout({ children }) {
+  return (
+    <div className="layout">
+      <section className="header">
+        Music Browser
+      </section>
+      <main>
+        {children}
+      </main>
+    </div>
+  );
+}
+```
+
+```js IndexPage.js
+export default function IndexPage({ navigate }) {
+  return (
+    <button onClick={() => navigate('/the-beatles')}>
+      Open The Beatles artist page
+    </button>
+  );
+}
+```
+
+```js ArtistPage.js
+import { Suspense } from 'react';
+import Albums from './Albums.js';
+import Biography from './Biography.js';
+import Panel from './Panel.js';
+
+export default function ArtistPage({ artist }) {
+  return (
+    <>
+      <h1>{artist.name}</h1>
+      <Biography artistId={artist.id} />
+      <Suspense fallback={<AlbumsGlimmer />}>
+        <Panel>
+          <Albums artistId={artist.id} />
+        </Panel>
+      </Suspense>
+    </>
+  );
+}
+
+function AlbumsGlimmer() {
+  return (
+    <div className="glimmer-panel">
+      <div className="glimmer-line" />
+      <div className="glimmer-line" />
+      <div className="glimmer-line" />
+    </div>
+  );
+}
+```
+
+```js Albums.js hidden
+import { fetchData } from './data.js';
+
+// Note: this component is written using an experimental API
+// that's not yet available in stable versions of React.
+
+// For a realistic example you can follow today, try a framework
+// that's integrated with Suspense, like Relay or Next.js.
+
+export default function Albums({ artistId }) {
+  const albums = use(fetchData(`/${artistId}/albums`));
+  return (
+    <ul>
+      {albums.map(album => (
+        <li key={album.id}>
+          {album.title} ({album.year})
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+// This is a workaround for a bug to get the demo running.
+// TODO: replace with real implementation when the bug is fixed.
+function use(promise) {
+  if (promise.status === 'fulfilled') {
+    return promise.value;
+  } else if (promise.status === 'rejected') {
+    throw promise.reason;
+  } else if (promise.status === 'pending') {
+    throw promise;
+  } else {
+    promise.status = 'pending';
+    promise.then(
+      result => {
+        promise.status = 'fulfilled';
+        promise.value = result;
+      },
+      reason => {
+        promise.status = 'rejected';
+        promise.reason = reason;
+      },      
+    );
+    throw promise;
+  }
+}
+```
+
+```js Biography.js hidden
+import { fetchData } from './data.js';
+
+// Note: this component is written using an experimental API
+// that's not yet available in stable versions of React.
+
+// For a realistic example you can follow today, try a framework
+// that's integrated with Suspense, like Relay or Next.js.
+
+export default function Biography({ artistId }) {
+  const bio = use(fetchData(`/${artistId}/bio`));
+  return (
+    <section>
+      <p className="bio">{bio}</p>
+    </section>
+  );
+}
+
+// This is a workaround for a bug to get the demo running.
+// TODO: replace with real implementation when the bug is fixed.
+function use(promise) {
+  if (promise.status === 'fulfilled') {
+    return promise.value;
+  } else if (promise.status === 'rejected') {
+    throw promise.reason;
+  } else if (promise.status === 'pending') {
+    throw promise;
+  } else {
+    promise.status = 'pending';
+    promise.then(
+      result => {
+        promise.status = 'fulfilled';
+        promise.value = result;
+      },
+      reason => {
+        promise.status = 'rejected';
+        promise.reason = reason;
+      },      
+    );
+    throw promise;
+  }
+}
+```
+
+```js Panel.js hidden
+export default function Panel({ children }) {
+  return (
+    <section className="panel">
+      {children}
+    </section>
+  );
+}
+```
+
+```js data.js hidden
+// Note: the way you would do data fetching depends on
+// the framework that you use together with Suspense.
+// Normally, the caching logic would be inside a framework.
+
+let cache = new Map();
+
+export function fetchData(url) {
+  if (!cache.has(url)) {
+    cache.set(url, getData(url));
+  }
+  return cache.get(url);
+}
+
+async function getData(url) {
+  if (url === '/the-beatles/albums') {
+    return await getAlbums();
+  } else if (url === '/the-beatles/bio') {
+    return await getBio();
+  } else {
+    throw Error('Not implemented');
+  }
+}
+
+async function getBio() {
+  // Add a fake delay to make waiting noticeable.
+  await new Promise(resolve => {
+    setTimeout(resolve, 500);
+  });
+
+  return `The Beatles were an English rock band, 
+    formed in Liverpool in 1960, that comprised 
+    John Lennon, Paul McCartney, George Harrison 
+    and Ringo Starr.`;
+}
+
+async function getAlbums() {
+  // Add a fake delay to make waiting noticeable.
+  await new Promise(resolve => {
+    setTimeout(resolve, 3000);
+  });
+
+  return [{
+    id: 13,
+    title: 'Let It Be',
+    year: 1970
+  }, {
+    id: 12,
+    title: 'Abbey Road',
+    year: 1969
+  }, {
+    id: 11,
+    title: 'Yellow Submarine',
+    year: 1969
+  }, {
+    id: 10,
+    title: 'The Beatles',
+    year: 1968
+  }, {
+    id: 9,
+    title: 'Magical Mystery Tour',
+    year: 1967
+  }, {
+    id: 8,
+    title: 'Sgt. Pepper\'s Lonely Hearts Club Band',
+    year: 1967
+  }, {
+    id: 7,
+    title: 'Revolver',
+    year: 1966
+  }, {
+    id: 6,
+    title: 'Rubber Soul',
+    year: 1965
+  }, {
+    id: 5,
+    title: 'Help!',
+    year: 1965
+  }, {
+    id: 4,
+    title: 'Beatles For Sale',
+    year: 1964
+  }, {
+    id: 3,
+    title: 'A Hard Day\'s Night',
+    year: 1964
+  }, {
+    id: 2,
+    title: 'With The Beatles',
+    year: 1963
+  }, {
+    id: 1,
+    title: 'Please Please Me',
+    year: 1963
+  }];
+}
+```
+
+```css
+main {
+  min-height: 200px;
+  padding: 10px;
+}
+
+.layout {
+  border: 1px solid black;
+}
+
+.header {
+  background: #222;
+  padding: 10px;
+  text-align: center;
+  color: white;
+}
+
+.bio { font-style: italic; }
+
+.panel {
+  border: 1px solid #aaa;
+  border-radius: 6px;
+  margin-top: 20px;
+  padding: 10px;
+}
+
+.glimmer-panel {
+  border: 1px dashed #aaa;
+  background: linear-gradient(90deg, rgba(221,221,221,1) 0%, rgba(255,255,255,1) 100%);
+  border-radius: 6px;
+  margin-top: 20px;
+  padding: 10px;
+}
+
+.glimmer-line {
+  display: block;
+  width: 60%;
+  height: 20px;
+  margin: 10px;
+  border-radius: 4px;
+  background: #f0f0f0;
+}
+```
+
+</Sandpack>
+
+When you pressed the button, the `Router` component rendered `ArtistPage` instead of `IndexPage`. A component inside the `ArtistPage` suspended, so the closest Suspense boundary started showing the fallback. The closest Suspense boundary was near the root, so the whole site layout got replaced by `BigSpinner`.
+
+To prevent this from happening, you can mark the navigation state update as a *transition* with [`startTransition`:](/reference/react/startTransition)
+
+```js {5,7}
+function Router() {
+  const [page, setPage] = useState('/');
+
+  function navigate(url) {
+    startTransition(() => {
+      setPage(url);      
+    });
+  }
+  // ...
+```
+
+This tells React that the state transition is not urgent, and it's better to keep showing the previous page instead of hiding any already revealed content. Notice how clicking the button now "waits" for the `Biography` to load:
+
+<Sandpack>
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "experimental",
+    "react-dom": "experimental"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+```js App.js
+import { Suspense, startTransition, useState } from 'react';
+import IndexPage from './IndexPage.js';
+import ArtistPage from './ArtistPage.js';
+import Layout from './Layout.js';
+
+export default function App() {
+  return (
+    <Suspense fallback={<BigSpinner />}>
+      <Router />
+    </Suspense>
+  );
+}
+
+function Router() {
+  const [page, setPage] = useState('/');
+
+  function navigate(url) {
+    startTransition(() => {
+      setPage(url);
+    });
+  }
+
+  let content;
+  if (page === '/') {
+    content = (
+      <IndexPage navigate={navigate} />
+    );
+  } else if (page === '/the-beatles') {
+    content = (
+      <ArtistPage
+        artist={{
+          id: 'the-beatles',
+          name: 'The Beatles',
+        }}
+      />
+    );
+  }
+  return (
+    <Layout>
+      {content}
+    </Layout>
+  );
+}
+
+function BigSpinner() {
+  return <h2>🌀 Loading...</h2>;
+}
+```
+
+```js Layout.js
+export default function Layout({ children }) {
+  return (
+    <div className="layout">
+      <section className="header">
+        Music Browser
+      </section>
+      <main>
+        {children}
+      </main>
+    </div>
+  );
+}
+```
+
+```js IndexPage.js
+export default function IndexPage({ navigate }) {
+  return (
+    <button onClick={() => navigate('/the-beatles')}>
+      Open The Beatles artist page
+    </button>
+  );
+}
+```
+
+```js ArtistPage.js
+import { Suspense } from 'react';
+import Albums from './Albums.js';
+import Biography from './Biography.js';
+import Panel from './Panel.js';
+
+export default function ArtistPage({ artist }) {
+  return (
+    <>
+      <h1>{artist.name}</h1>
+      <Biography artistId={artist.id} />
+      <Suspense fallback={<AlbumsGlimmer />}>
+        <Panel>
+          <Albums artistId={artist.id} />
+        </Panel>
+      </Suspense>
+    </>
+  );
+}
+
+function AlbumsGlimmer() {
+  return (
+    <div className="glimmer-panel">
+      <div className="glimmer-line" />
+      <div className="glimmer-line" />
+      <div className="glimmer-line" />
+    </div>
+  );
+}
+```
+
+```js Albums.js hidden
+import { fetchData } from './data.js';
+
+// Note: this component is written using an experimental API
+// that's not yet available in stable versions of React.
+
+// For a realistic example you can follow today, try a framework
+// that's integrated with Suspense, like Relay or Next.js.
+
+export default function Albums({ artistId }) {
+  const albums = use(fetchData(`/${artistId}/albums`));
+  return (
+    <ul>
+      {albums.map(album => (
+        <li key={album.id}>
+          {album.title} ({album.year})
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+// This is a workaround for a bug to get the demo running.
+// TODO: replace with real implementation when the bug is fixed.
+function use(promise) {
+  if (promise.status === 'fulfilled') {
+    return promise.value;
+  } else if (promise.status === 'rejected') {
+    throw promise.reason;
+  } else if (promise.status === 'pending') {
+    throw promise;
+  } else {
+    promise.status = 'pending';
+    promise.then(
+      result => {
+        promise.status = 'fulfilled';
+        promise.value = result;
+      },
+      reason => {
+        promise.status = 'rejected';
+        promise.reason = reason;
+      },      
+    );
+    throw promise;
+  }
+}
+```
+
+```js Biography.js hidden
+import { fetchData } from './data.js';
+
+// Note: this component is written using an experimental API
+// that's not yet available in stable versions of React.
+
+// For a realistic example you can follow today, try a framework
+// that's integrated with Suspense, like Relay or Next.js.
+
+export default function Biography({ artistId }) {
+  const bio = use(fetchData(`/${artistId}/bio`));
+  return (
+    <section>
+      <p className="bio">{bio}</p>
+    </section>
+  );
+}
+
+// This is a workaround for a bug to get the demo running.
+// TODO: replace with real implementation when the bug is fixed.
+function use(promise) {
+  if (promise.status === 'fulfilled') {
+    return promise.value;
+  } else if (promise.status === 'rejected') {
+    throw promise.reason;
+  } else if (promise.status === 'pending') {
+    throw promise;
+  } else {
+    promise.status = 'pending';
+    promise.then(
+      result => {
+        promise.status = 'fulfilled';
+        promise.value = result;
+      },
+      reason => {
+        promise.status = 'rejected';
+        promise.reason = reason;
+      },      
+    );
+    throw promise;
+  }
+}
+```
+
+```js Panel.js hidden
+export default function Panel({ children }) {
+  return (
+    <section className="panel">
+      {children}
+    </section>
+  );
+}
+```
+
+```js data.js hidden
+// Note: the way you would do data fetching depends on
+// the framework that you use together with Suspense.
+// Normally, the caching logic would be inside a framework.
+
+let cache = new Map();
+
+export function fetchData(url) {
+  if (!cache.has(url)) {
+    cache.set(url, getData(url));
+  }
+  return cache.get(url);
+}
+
+async function getData(url) {
+  if (url === '/the-beatles/albums') {
+    return await getAlbums();
+  } else if (url === '/the-beatles/bio') {
+    return await getBio();
+  } else {
+    throw Error('Not implemented');
+  }
+}
+
+async function getBio() {
+  // Add a fake delay to make waiting noticeable.
+  await new Promise(resolve => {
+    setTimeout(resolve, 500);
+  });
+
+  return `The Beatles were an English rock band, 
+    formed in Liverpool in 1960, that comprised 
+    John Lennon, Paul McCartney, George Harrison 
+    and Ringo Starr.`;
+}
+
+async function getAlbums() {
+  // Add a fake delay to make waiting noticeable.
+  await new Promise(resolve => {
+    setTimeout(resolve, 3000);
+  });
+
+  return [{
+    id: 13,
+    title: 'Let It Be',
+    year: 1970
+  }, {
+    id: 12,
+    title: 'Abbey Road',
+    year: 1969
+  }, {
+    id: 11,
+    title: 'Yellow Submarine',
+    year: 1969
+  }, {
+    id: 10,
+    title: 'The Beatles',
+    year: 1968
+  }, {
+    id: 9,
+    title: 'Magical Mystery Tour',
+    year: 1967
+  }, {
+    id: 8,
+    title: 'Sgt. Pepper\'s Lonely Hearts Club Band',
+    year: 1967
+  }, {
+    id: 7,
+    title: 'Revolver',
+    year: 1966
+  }, {
+    id: 6,
+    title: 'Rubber Soul',
+    year: 1965
+  }, {
+    id: 5,
+    title: 'Help!',
+    year: 1965
+  }, {
+    id: 4,
+    title: 'Beatles For Sale',
+    year: 1964
+  }, {
+    id: 3,
+    title: 'A Hard Day\'s Night',
+    year: 1964
+  }, {
+    id: 2,
+    title: 'With The Beatles',
+    year: 1963
+  }, {
+    id: 1,
+    title: 'Please Please Me',
+    year: 1963
+  }];
+}
+```
+
+```css
+main {
+  min-height: 200px;
+  padding: 10px;
+}
+
+.layout {
+  border: 1px solid black;
+}
+
+.header {
+  background: #222;
+  padding: 10px;
+  text-align: center;
+  color: white;
+}
+
+.bio { font-style: italic; }
+
+.panel {
+  border: 1px solid #aaa;
+  border-radius: 6px;
+  margin-top: 20px;
+  padding: 10px;
+}
+
+.glimmer-panel {
+  border: 1px dashed #aaa;
+  background: linear-gradient(90deg, rgba(221,221,221,1) 0%, rgba(255,255,255,1) 100%);
+  border-radius: 6px;
+  margin-top: 20px;
+  padding: 10px;
+}
+
+.glimmer-line {
+  display: block;
+  width: 60%;
+  height: 20px;
+  margin: 10px;
+  border-radius: 4px;
+  background: #f0f0f0;
+}
+```
+
+</Sandpack>
+
+A transition doesn't wait for *all* content to load. It only waits long enough to avoid hiding already revealed content. For example, the website `Layout` was already revealed, so it would be bad to hide it behind a loading spinner. However, the nested `Suspense` boundary around `Albums` is new, so the transition doesn't wait for it.
+
+<Note>
+
+Suspense-enabled routers are expected to wrap the navigation updates into transitions by default.
+
+</Note>
+
+---
+
+### Indicating that a transition is happening {/*indicating-that-a-transition-is-happening*/}
+
+In the above example, once you click the button, there is no visual indication that a navigation is in progress. To add an indicator, you can replace [`startTransition`](/reference/react/startTransition) with [`useTransition`](/reference/react/useTransition) which gives you a boolean `isPending` value. In the example below, it's used to change the website header styling while a transition is happening:
+
+<Sandpack>
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "experimental",
+    "react-dom": "experimental"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+```js App.js
+import { Suspense, useState, useTransition } from 'react';
+import IndexPage from './IndexPage.js';
+import ArtistPage from './ArtistPage.js';
+import Layout from './Layout.js';
+
+export default function App() {
+  return (
+    <Suspense fallback={<BigSpinner />}>
+      <Router />
+    </Suspense>
+  );
+}
+
+function Router() {
+  const [page, setPage] = useState('/');
+  const [isPending, startTransition] = useTransition();
+
+  function navigate(url) {
+    startTransition(() => {
+      setPage(url);
+    });
+  }
+
+  let content;
+  if (page === '/') {
+    content = (
+      <IndexPage navigate={navigate} />
+    );
+  } else if (page === '/the-beatles') {
+    content = (
+      <ArtistPage
+        artist={{
+          id: 'the-beatles',
+          name: 'The Beatles',
+        }}
+      />
+    );
+  }
+  return (
+    <Layout isPending={isPending}>
+      {content}
+    </Layout>
+  );
+}
+
+function BigSpinner() {
+  return <h2>🌀 Loading...</h2>;
+}
+```
+
+```js Layout.js
+export default function Layout({ children, isPending }) {
+  return (
+    <div className="layout">
+      <section className="header" style={{
+        opacity: isPending ? 0.7 : 1
+      }}>
+        Music Browser
+      </section>
+      <main>
+        {children}
+      </main>
+    </div>
+  );
+}
+```
+
+```js IndexPage.js
+export default function IndexPage({ navigate }) {
+  return (
+    <button onClick={() => navigate('/the-beatles')}>
+      Open The Beatles artist page
+    </button>
+  );
+}
+```
+
+```js ArtistPage.js
+import { Suspense } from 'react';
+import Albums from './Albums.js';
+import Biography from './Biography.js';
+import Panel from './Panel.js';
+
+export default function ArtistPage({ artist }) {
+  return (
+    <>
+      <h1>{artist.name}</h1>
+      <Biography artistId={artist.id} />
+      <Suspense fallback={<AlbumsGlimmer />}>
+        <Panel>
+          <Albums artistId={artist.id} />
+        </Panel>
+      </Suspense>
+    </>
+  );
+}
+
+function AlbumsGlimmer() {
+  return (
+    <div className="glimmer-panel">
+      <div className="glimmer-line" />
+      <div className="glimmer-line" />
+      <div className="glimmer-line" />
+    </div>
+  );
+}
+```
+
+```js Albums.js hidden
+import { fetchData } from './data.js';
+
+// Note: this component is written using an experimental API
+// that's not yet available in stable versions of React.
+
+// For a realistic example you can follow today, try a framework
+// that's integrated with Suspense, like Relay or Next.js.
+
+export default function Albums({ artistId }) {
+  const albums = use(fetchData(`/${artistId}/albums`));
+  return (
+    <ul>
+      {albums.map(album => (
+        <li key={album.id}>
+          {album.title} ({album.year})
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+// This is a workaround for a bug to get the demo running.
+// TODO: replace with real implementation when the bug is fixed.
+function use(promise) {
+  if (promise.status === 'fulfilled') {
+    return promise.value;
+  } else if (promise.status === 'rejected') {
+    throw promise.reason;
+  } else if (promise.status === 'pending') {
+    throw promise;
+  } else {
+    promise.status = 'pending';
+    promise.then(
+      result => {
+        promise.status = 'fulfilled';
+        promise.value = result;
+      },
+      reason => {
+        promise.status = 'rejected';
+        promise.reason = reason;
+      },      
+    );
+    throw promise;
+  }
+}
+```
+
+```js Biography.js hidden
+import { fetchData } from './data.js';
+
+// Note: this component is written using an experimental API
+// that's not yet available in stable versions of React.
+
+// For a realistic example you can follow today, try a framework
+// that's integrated with Suspense, like Relay or Next.js.
+
+export default function Biography({ artistId }) {
+  const bio = use(fetchData(`/${artistId}/bio`));
+  return (
+    <section>
+      <p className="bio">{bio}</p>
+    </section>
+  );
+}
+
+// This is a workaround for a bug to get the demo running.
+// TODO: replace with real implementation when the bug is fixed.
+function use(promise) {
+  if (promise.status === 'fulfilled') {
+    return promise.value;
+  } else if (promise.status === 'rejected') {
+    throw promise.reason;
+  } else if (promise.status === 'pending') {
+    throw promise;
+  } else {
+    promise.status = 'pending';
+    promise.then(
+      result => {
+        promise.status = 'fulfilled';
+        promise.value = result;
+      },
+      reason => {
+        promise.status = 'rejected';
+        promise.reason = reason;
+      },      
+    );
+    throw promise;
+  }
+}
+```
+
+```js Panel.js hidden
+export default function Panel({ children }) {
+  return (
+    <section className="panel">
+      {children}
+    </section>
+  );
+}
+```
+
+```js data.js hidden
+// Note: the way you would do data fetching depends on
+// the framework that you use together with Suspense.
+// Normally, the caching logic would be inside a framework.
+
+let cache = new Map();
+
+export function fetchData(url) {
+  if (!cache.has(url)) {
+    cache.set(url, getData(url));
+  }
+  return cache.get(url);
+}
+
+async function getData(url) {
+  if (url === '/the-beatles/albums') {
+    return await getAlbums();
+  } else if (url === '/the-beatles/bio') {
+    return await getBio();
+  } else {
+    throw Error('Not implemented');
+  }
+}
+
+async function getBio() {
+  // Add a fake delay to make waiting noticeable.
+  await new Promise(resolve => {
+    setTimeout(resolve, 500);
+  });
+
+  return `The Beatles were an English rock band, 
+    formed in Liverpool in 1960, that comprised 
+    John Lennon, Paul McCartney, George Harrison 
+    and Ringo Starr.`;
+}
+
+async function getAlbums() {
+  // Add a fake delay to make waiting noticeable.
+  await new Promise(resolve => {
+    setTimeout(resolve, 3000);
+  });
+
+  return [{
+    id: 13,
+    title: 'Let It Be',
+    year: 1970
+  }, {
+    id: 12,
+    title: 'Abbey Road',
+    year: 1969
+  }, {
+    id: 11,
+    title: 'Yellow Submarine',
+    year: 1969
+  }, {
+    id: 10,
+    title: 'The Beatles',
+    year: 1968
+  }, {
+    id: 9,
+    title: 'Magical Mystery Tour',
+    year: 1967
+  }, {
+    id: 8,
+    title: 'Sgt. Pepper\'s Lonely Hearts Club Band',
+    year: 1967
+  }, {
+    id: 7,
+    title: 'Revolver',
+    year: 1966
+  }, {
+    id: 6,
+    title: 'Rubber Soul',
+    year: 1965
+  }, {
+    id: 5,
+    title: 'Help!',
+    year: 1965
+  }, {
+    id: 4,
+    title: 'Beatles For Sale',
+    year: 1964
+  }, {
+    id: 3,
+    title: 'A Hard Day\'s Night',
+    year: 1964
+  }, {
+    id: 2,
+    title: 'With The Beatles',
+    year: 1963
+  }, {
+    id: 1,
+    title: 'Please Please Me',
+    year: 1963
+  }];
+}
+```
+
+```css
+main {
+  min-height: 200px;
+  padding: 10px;
+}
+
+.layout {
+  border: 1px solid black;
+}
+
+.header {
+  background: #222;
+  padding: 10px;
+  text-align: center;
+  color: white;
+}
+
+.bio { font-style: italic; }
+
+.panel {
+  border: 1px solid #aaa;
+  border-radius: 6px;
+  margin-top: 20px;
+  padding: 10px;
+}
+
+.glimmer-panel {
+  border: 1px dashed #aaa;
+  background: linear-gradient(90deg, rgba(221,221,221,1) 0%, rgba(255,255,255,1) 100%);
+  border-radius: 6px;
+  margin-top: 20px;
+  padding: 10px;
+}
+
+.glimmer-line {
+  display: block;
+  width: 60%;
+  height: 20px;
+  margin: 10px;
+  border-radius: 4px;
+  background: #f0f0f0;
+}
+```
+
+</Sandpack>
+
+---
+
+### Resetting Suspense boundaries on navigation {/*resetting-suspense-boundaries-on-navigation*/}
+
+During a transition, React will avoid hiding already revealed content. However, if you navigate to a route with different parameters, you might want to tell React it is *different* content. You can express this with a `key`:
+
+```js
+<ProfilePage key={queryParams.id} />
+```
+
+Imagine you're navigating within a user's profile page, and something suspends. If that update is wrapped in a transition, it will not trigger the fallback for already visible content. That's the expected behavior.
+
+However, now imagine you're navigating between two different user profiles. In that case, it makes sense to show the fallback. For example, one user's timeline is *different content* from another user's timeline. By specifying a `key`, you ensure that React treats different users' profiles as different components, and resets the Suspense boundaries during navigation. A Suspense-integrated routing framework should do this automatically.
+
+---
+
+### Providing a fallback for server errors and server-only content {/*providing-a-fallback-for-server-errors-and-server-only-content*/}
+
+If you use one of the [streaming server rendering APIs](/reference/react-dom/server) (or a framework that relies on them), React will also use your `<Suspense>` boundaries to handle errors on the server. If a component throws an error on the server, React will not abort the server render. Instead, it will find the closest `<Suspense>` component above it and include its fallback (such as a spinner) into the generated server HTML. The user will see a spinner instead of an error.
+
+On the client, React will attempt to render the same component again. If it errors on the client too, React will throw the error and display the closest [error boundary.](/reference/react/Component#static-getderivedstatefromerror) However, if it does not error on the client, React will not display the error to the user since the content was eventually displayed successfully.
+
+You can use this to opt out some components from rendering on the server. To do this, throw an error from them in the server environment and then wrap them in a `<Suspense>` boundary to replace their HTML with fallbacks:
+
+```js
+<Suspense fallback={<Loading />}>
+  <Chat />
+</Suspense>
+
+function Chat() {
+  if (typeof window === 'undefined') {
+    throw Error('Chat should only render on the client.');
+  }
+  // ...
+}
+```
+
+The server HTML will include the loading indicator. It will be replaced by the `Chat` component on the client.
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+
+### How do I prevent the UI from being replaced by a fallback during an update? {/*preventing-unwanted-fallbacks*/}
+
+Replacing visible UI with a fallback creates a jarring user experience. This can happen when an update causes a component to suspend, and the nearest Suspense boundary is already showing content to the user.
+
+To prevent this from happening, [mark the update as non-urgent using `startTransition`](#preventing-already-revealed-content-from-hiding). During a transition, React will wait until enough data has loaded to prevent an unwanted fallback from appearing:
+
+```js {2-3,5}
+function handleNextPageClick() {
+  // If this update suspends, don't hide the already displayed content
+  startTransition(() => {
+    setCurrentPage(currentPage + 1);
+  });
+}
+```
+
+This will avoid hiding existing content. However, any newly rendered `Suspense` boundaries will still immediately display fallbacks to avoid blocking the UI and let the user see the content as it becomes available.
+
+**React will only prevent unwanted fallbacks during non-urgent updates**. It will not delay a render if it's the result of an urgent update. You must opt in with an API like [`startTransition`](/reference/react/startTransition) or [`useDeferredValue`](/reference/react/useDeferredValue).
+
+If your router is integrated with Suspense, it should wrap its updates into [`startTransition`](/reference/react/startTransition) automatically.
diff --git a/beta/src/content/reference/react/apis.md b/beta/src/content/reference/react/apis.md
new file mode 100644
index 000000000..9c1437870
--- /dev/null
+++ b/beta/src/content/reference/react/apis.md
@@ -0,0 +1,17 @@
+---
+title: "Built-in React APIs"
+---
+
+<Intro>
+
+In addition to [Hooks](/reference/react) and [Components](/reference/react/components), the `react` package exports a few other APIs that are useful for defining components. This page lists all the remaining modern React APIs.
+
+</Intro>
+
+---
+
+* [`createContext`](/reference/react/createContext) lets you define and provide context to the child components. Used with [`useContext`.](/reference/react/useContext)
+* [`forwardRef`](/reference/react/forwardRef) lets your component expose a DOM node as a ref to the parent. Used with [`useRef`.](/reference/react/useRef)
+* [`lazy`](/reference/react/lazy) lets you defer loading a component's code until it's rendered for the first time.
+* [`memo`](/reference/react/memo) lets your component skip re-renders with same props. Used with [`useMemo`](/reference/react/useMemo) and [`useCallback`.](/reference/react/useCallback)
+* [`startTransition`](/reference/react/startTransition) lets you mark a state update as non-urgent. Similar to [`useTransition`.](/reference/react/useTransition)
diff --git a/beta/src/content/reference/react/cloneElement.md b/beta/src/content/reference/react/cloneElement.md
new file mode 100644
index 000000000..bdd5d9aaa
--- /dev/null
+++ b/beta/src/content/reference/react/cloneElement.md
@@ -0,0 +1,694 @@
+---
+title: cloneElement
+---
+
+<Pitfall>
+
+Using `cloneElement` is uncommon and can lead to fragile code. [See common alternatives.](#alternatives)
+
+</Pitfall>
+
+<Intro>
+
+`cloneElement` lets you create a new React element using another element as a starting point.
+
+```js
+const clonedElement = cloneElement(element, props, ...children)
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `cloneElement(element, props, ...children)` {/*cloneelement*/}
+
+Call `cloneElement` to create a React element based on the `element`, but with different `props` and `children`:
+
+```js
+import { cloneElement } from 'react';
+
+// ...
+const clonedElement = cloneElement(
+  <Row title="Cabbage">
+    Hello
+  </Row>,
+  { isHighlighted: true },
+  'Goodbye'
+);
+
+console.log(clonedElement); // <Row title="Cabbage">Goodbye</Row>
+```
+
+[See more examples below.](#usage)
+
+#### Parameters {/*parameters*/}
+
+* `element`: The `element` argument must be a valid React element. For example, it could be a JSX node like `<Something />`, the result of calling [`createElement`](/reference/react/createElement), or the result of another `cloneElement` call.
+
+* `props`: The `props` argument must either be an object or `null`. If you pass `null`, the cloned element will retain all of the original `element.props`. Otherwise, for every prop in the `props` object, the returned element will "prefer" the value from `props` over the value from `element.props`. The rest of the props will be filled from the original `element.props`. If you pass `props.key` or `props.ref`, they will replace the original ones.
+
+* **optional** `...children`: Zero or more child nodes. They can be any React nodes, including React elements, strings, numbers, [portals](/reference/react-dom/createPortal), empty nodes (`null`, `undefined`, `true`, and `false`), and arrays of React nodes. If you don't pass any `...children` arguments, the original `element.props.children` will be preserved.
+
+#### Returns {/*returns*/}
+
+`cloneElement` returns a React element object with a few properties:
+
+* `type`: Same as `element.type`.
+* `props`: The result of shallowly merging `element.props` with the overriding `props` you have passed.
+* `ref`: The original `element.ref`, unless it was overridden by `props.ref`.
+* `key`: The original `element.key`, unless it was overridden by `props.key`.
+
+Usually, you'll return the element from your component or make it a child of another element. Although you may read the element's properties, it's best to treat every element as opaque after it's created, and only render it.
+
+#### Caveats {/*caveats*/}
+
+* Cloning an element **does not modify the original element.**
+
+* You should only **pass children as multiple arguments to `cloneElement` if they are all statically known,** like `cloneElement(element, null, child1, child2, child3)`. If your children are dynamic, pass the entire array as the third argument: `cloneElement(element, null, listItems)`. This ensures that React will [warn you about missing `key`s](/learn/rendering-lists#keeping-list-items-in-order-with-key) for any dynamic lists. For static lists this is not necessary because they never reorder.
+
+* `cloneElement` makes it harder to trace the data flow, so **try the [alternatives](/#alternatives) instead.**
+
+---
+
+## Usage {/*usage*/}
+
+### Overriding props of an element {/*overriding-props-of-an-element*/}
+
+To override the props of some <CodeStep step={1}>React element</CodeStep>, pass it to `cloneElement` with the <CodeStep step={2}>props you want to override</CodeStep>:
+
+```js [[1, 5, "<Row title=\\"Cabbage\\" />"], [2, 6, "{ isHighlighted: true }"], [3, 4, "clonedElement"]]
+import { cloneElement } from 'react';
+
+// ...
+const clonedElement = cloneElement(
+  <Row title="Cabbage" />,
+  { isHighlighted: true }
+);
+```
+
+Here, the resulting <CodeStep step={3}>cloned element</CodeStep> will be `<Row title="Cabbage" isHighlighted={true} />`.
+
+**Let's walk through an example to see when it's useful.**
+
+Imagine a `List` component that renders its [`children`](/learn/passing-props-to-a-component#passing-jsx-as-children) as a list of selectable rows with a "Next" button that changes which row is selected. The `List` component needs to render the selected `Row` differently, so it clones every `<Row>` child that it has received, and adds an extra `isHighlighted: true` or `isHighlighted: false` prop:
+
+```js {6-8}
+export default function List({ children }) {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  return (
+    <div className="List">
+      {Children.map(children, (child, index) =>
+        cloneElement(child, {
+          isHighlighted: index === selectedIndex 
+        })
+      )}
+```
+
+Let's say the original JSX received by `List` looks like this:
+
+```js {2-4}
+<List>
+  <Row title="Cabbage" />
+  <Row title="Garlic" />
+  <Row title="Apple" />
+</List>
+```
+
+By cloning its children, the `List` can pass extra information to every `Row` inside. The result looks like this:
+
+```js {4,8,12}
+<List>
+  <Row
+    title="Cabbage"
+    isHighlighted={true} 
+  />
+  <Row
+    title="Garlic"
+    isHighlighted={false} 
+  />
+  <Row
+    title="Apple"
+    isHighlighted={false} 
+  />
+</List>
+```
+
+Notice how pressing "Next" updates the state of the `List`, and highlights a different row:
+
+<Sandpack>
+
+```js
+import List from './List.js';
+import Row from './Row.js';
+import { products } from './data.js';
+
+export default function App() {
+  return (
+    <List>
+      {products.map(product =>
+        <Row
+          key={product.id}
+          title={product.title} 
+        />
+      )}
+    </List>
+  );
+}
+```
+
+```js List.js active
+import { Children, cloneElement, useState } from 'react';
+
+export default function List({ children }) {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  return (
+    <div className="List">
+      {Children.map(children, (child, index) =>
+        cloneElement(child, {
+          isHighlighted: index === selectedIndex 
+        })
+      )}
+      <hr />
+      <button onClick={() => {
+        setSelectedIndex(i =>
+          (i + 1) % Children.count(children)
+        );
+      }}>
+        Next
+      </button>
+    </div>
+  );
+}
+```
+
+```js Row.js
+export default function Row({ title, isHighlighted }) {
+  return (
+    <div className={[
+      'Row',
+      isHighlighted ? 'RowHighlighted' : ''
+    ].join(' ')}>
+      {title}
+    </div>
+  );
+}
+```
+
+```js data.js
+export const products = [
+  { title: 'Cabbage', id: 1 },
+  { title: 'Garlic', id: 2 },
+  { title: 'Apple', id: 3 },
+];
+```
+
+```css
+.List {
+  display: flex;
+  flex-direction: column;
+  border: 2px solid grey;
+  padding: 5px;
+}
+
+.Row {
+  border: 2px dashed black;
+  padding: 5px;
+  margin: 5px;
+}
+
+.RowHighlighted {
+  background: #ffa;
+}
+
+button {
+  height: 40px;
+  font-size: 20px;
+}
+```
+
+</Sandpack>
+
+To summarize, the `List` cloned the `<Row />` elements it received and added an extra prop to them.
+
+<Pitfall>
+
+Cloning children makes it hard to tell how the data flows through your app. Try one of the [alternatives.](#alternatives)
+
+</Pitfall>
+
+---
+
+## Alternatives {/*alternatives*/}
+
+### Passing data with a render prop {/*passing-data-with-a-render-prop*/}
+
+Instead of using `cloneElement`, consider accepting a *render prop* like `renderItem`. Here, `List` receives `renderItem` as a prop. `List` calls `renderItem` for every item and passes `isHighlighted` as an argument: 
+
+```js {1,7}
+export default function List({ items, renderItem }) {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  return (
+    <div className="List">
+      {items.map((item, index) => {
+        const isHighlighted = index === selectedIndex;
+        return renderItem(item, isHighlighted);
+      })}
+```
+
+The `renderItem` prop is called a "render prop" because it's a prop that specifies how to render something. For example, you can pass a `renderItem` implementation that renders a `<Row>` with the given `isHighlighted` value:
+
+```js {3,7}
+<List
+  items={products}
+  renderItem={(product, isHighlighted) =>
+    <Row
+      key={product.id}
+      title={product.title}
+      isHighlighted={isHighlighted}
+    />
+  }
+/>
+```
+
+The end result is the same as with `cloneElement`:
+
+```js {4,8,12}
+<List>
+  <Row
+    title="Cabbage"
+    isHighlighted={true} 
+  />
+  <Row
+    title="Garlic"
+    isHighlighted={false} 
+  />
+  <Row
+    title="Apple"
+    isHighlighted={false} 
+  />
+</List>
+```
+
+However, you can clearly trace where the `isHighlighted` value is coming from.
+
+<Sandpack>
+
+```js
+import List from './List.js';
+import Row from './Row.js';
+import { products } from './data.js';
+
+export default function App() {
+  return (
+    <List
+      items={products}
+      renderItem={(product, isHighlighted) =>
+        <Row
+          key={product.id}
+          title={product.title}
+          isHighlighted={isHighlighted}
+        />
+      }
+    />
+  );
+}
+```
+
+```js List.js active
+import { useState } from 'react';
+
+export default function List({ items, renderItem }) {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  return (
+    <div className="List">
+      {items.map((item, index) => {
+        const isHighlighted = index === selectedIndex;
+        return renderItem(item, isHighlighted);
+      })}
+      <hr />
+      <button onClick={() => {
+        setSelectedIndex(i =>
+          (i + 1) % items.length
+        );
+      }}>
+        Next
+      </button>
+    </div>
+  );
+}
+```
+
+```js Row.js
+export default function Row({ title, isHighlighted }) {
+  return (
+    <div className={[
+      'Row',
+      isHighlighted ? 'RowHighlighted' : ''
+    ].join(' ')}>
+      {title}
+    </div>
+  );
+}
+```
+
+```js data.js
+export const products = [
+  { title: 'Cabbage', id: 1 },
+  { title: 'Garlic', id: 2 },
+  { title: 'Apple', id: 3 },
+];
+```
+
+```css
+.List {
+  display: flex;
+  flex-direction: column;
+  border: 2px solid grey;
+  padding: 5px;
+}
+
+.Row {
+  border: 2px dashed black;
+  padding: 5px;
+  margin: 5px;
+}
+
+.RowHighlighted {
+  background: #ffa;
+}
+
+button {
+  height: 40px;
+  font-size: 20px;
+}
+```
+
+</Sandpack>
+
+This pattern is preferred to `cloneElement` because it is more explicit.
+
+---
+
+### Passing data through context {/*passing-data-through-context*/}
+
+Another alternative to `cloneElement` is to [pass data through context.](/learn/passing-data-deeply-with-context)
+
+
+For example, you can call [`createContext`](/reference/react/createContext) to define a `HighlightContext`:
+
+```js
+export const HighlightContext = createContext(false);
+```
+
+Your `List` component can wrap every item it renders into a `HighlightContext` provider:
+
+```js {8,10}
+export default function List({ items, renderItem }) {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  return (
+    <div className="List">
+      {items.map((item, index) => {
+        const isHighlighted = index === selectedIndex;
+        return (
+          <HighlightContext.Provider key={item.id} value={isHighlighted}>
+            {renderItem(item)}
+          </HighlightContext.Provider>
+        );
+      })}
+```
+
+With this approach, `Row` does not need to receive an `isHighlighted` prop at all. Instead, it reads the context:
+
+```js Row.js {2}
+export default function Row({ title }) {
+  const isHighlighted = useContext(HighlightContext);
+  // ...
+````
+
+This allows the calling component to not know or worry about passing `isHighlighted` to `<Row>`:
+
+```js {4}
+<List
+  items={products}
+  renderItem={product =>
+    <Row title={product.title} />
+  }
+/>
+```
+
+Instead, `List` and `Row` coordinate the highlighting logic through context.
+
+<Sandpack>
+
+```js
+import List from './List.js';
+import Row from './Row.js';
+import { products } from './data.js';
+
+export default function App() {
+  return (
+    <List
+      items={products}
+      renderItem={(product) =>
+        <Row title={product.title} />
+      }
+    />
+  );
+}
+```
+
+```js List.js active
+import { useState } from 'react';
+import { HighlightContext } from './HighlightContext.js';
+
+export default function List({ items, renderItem }) {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  return (
+    <div className="List">
+      {items.map((item, index) => {
+        const isHighlighted = index === selectedIndex;
+        return (
+          <HighlightContext.Provider
+            key={item.id}
+            value={isHighlighted}
+          >
+            {renderItem(item)}
+          </HighlightContext.Provider>
+        );
+      })}
+      <hr />
+      <button onClick={() => {
+        setSelectedIndex(i =>
+          (i + 1) % items.length
+        );
+      }}>
+        Next
+      </button>
+    </div>
+  );
+}
+```
+
+```js Row.js
+import { useContext } from 'react';
+import { HighlightContext } from './HighlightContext.js';
+
+export default function Row({ title }) {
+  const isHighlighted = useContext(HighlightContext);
+  return (
+    <div className={[
+      'Row',
+      isHighlighted ? 'RowHighlighted' : ''
+    ].join(' ')}>
+      {title}
+    </div>
+  );
+}
+```
+
+```js HighlightContext.js
+import { createContext } from 'react';
+
+export const HighlightContext = createContext(false);
+```
+
+```js data.js
+export const products = [
+  { title: 'Cabbage', id: 1 },
+  { title: 'Garlic', id: 2 },
+  { title: 'Apple', id: 3 },
+];
+```
+
+```css
+.List {
+  display: flex;
+  flex-direction: column;
+  border: 2px solid grey;
+  padding: 5px;
+}
+
+.Row {
+  border: 2px dashed black;
+  padding: 5px;
+  margin: 5px;
+}
+
+.RowHighlighted {
+  background: #ffa;
+}
+
+button {
+  height: 40px;
+  font-size: 20px;
+}
+```
+
+</Sandpack>
+
+[Learn more about passing data through context.](/reference/react/useContext#passing-data-deeply-into-the-tree)
+
+---
+
+### Extracting logic into a custom Hook {/*extracting-logic-into-a-custom-hook*/}
+
+Another approach you can try is to extract the "non-visual" logic into your own Hook, and use the information returned by your Hook to decide what to render. For example, you could write a `useList` custom Hook like this:
+
+```js
+import { useState } from 'react';
+
+export default function useList(items) {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  function onNext() {
+    setSelectedIndex(i =>
+      (i + 1) % items.length
+    );
+  }
+
+  const selected = items[selectedIndex];
+  return [selected, onNext];
+}
+```
+
+Then you could use it like this:
+
+```js {2,9,13}
+export default function App() {
+  const [selected, onNext] = useList(products);
+  return (
+    <div className="List">
+      {products.map(product =>
+        <Row
+          key={product.id}
+          title={product.title}
+          isHighlighted={selected === product}
+        />
+      )}
+      <hr />
+      <button onClick={onNext}>
+        Next
+      </button>
+    </div>
+  );
+}
+```
+
+The data flow is explicit, but the state is inside the `useList` custom Hook that you can use from any component:
+
+<Sandpack>
+
+```js
+import Row from './Row.js';
+import useList from './useList.js';
+import { products } from './data.js';
+
+export default function App() {
+  const [selected, onNext] = useList(products);
+  return (
+    <div className="List">
+      {products.map(product =>
+        <Row
+          key={product.id}
+          title={product.title}
+          isHighlighted={selected === product}
+        />
+      )}
+      <hr />
+      <button onClick={onNext}>
+        Next
+      </button>
+    </div>
+  );
+}
+```
+
+```js useList.js
+import { useState } from 'react';
+
+export default function useList(items) {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  function onNext() {
+    setSelectedIndex(i =>
+      (i + 1) % items.length
+    );
+  }
+
+  const selected = items[selectedIndex];
+  return [selected, onNext];
+}
+```
+
+```js Row.js
+export default function Row({ title, isHighlighted }) {
+  return (
+    <div className={[
+      'Row',
+      isHighlighted ? 'RowHighlighted' : ''
+    ].join(' ')}>
+      {title}
+    </div>
+  );
+}
+```
+
+```js data.js
+export const products = [
+  { title: 'Cabbage', id: 1 },
+  { title: 'Garlic', id: 2 },
+  { title: 'Apple', id: 3 },
+];
+```
+
+```css
+.List {
+  display: flex;
+  flex-direction: column;
+  border: 2px solid grey;
+  padding: 5px;
+}
+
+.Row {
+  border: 2px dashed black;
+  padding: 5px;
+  margin: 5px;
+}
+
+.RowHighlighted {
+  background: #ffa;
+}
+
+button {
+  height: 40px;
+  font-size: 20px;
+}
+```
+
+</Sandpack>
+
+This approach is particularly useful if you want to reuse this logic between different components.
diff --git a/beta/src/content/reference/react/components.md b/beta/src/content/reference/react/components.md
new file mode 100644
index 000000000..25556230f
--- /dev/null
+++ b/beta/src/content/reference/react/components.md
@@ -0,0 +1,20 @@
+---
+title: "Built-in React Components"
+---
+
+<Intro>
+
+React exposes a few built-in components that you can use in your JSX.
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Built-in components {/*built-in-components*/}
+
+* [`<Fragment>`](/reference/react/Fragment), alternatively written as `<>...</>`, lets you group multiple JSX nodes together.
+* [`<Profiler>`](/reference/react/Profiler) lets you measure rendering performance of a React tree programmatically.
+* [`<Suspense>`](/reference/react/Suspense) lets you display a fallback while the child components are loading.
+* [`<StrictMode>`](/reference/react/StrictMode) enables extra development-only checks that help you find bugs early.
diff --git a/beta/src/content/reference/react/createContext.md b/beta/src/content/reference/react/createContext.md
new file mode 100644
index 000000000..4d719ac59
--- /dev/null
+++ b/beta/src/content/reference/react/createContext.md
@@ -0,0 +1,217 @@
+---
+title: createContext
+---
+
+<Intro>
+
+`createContext` lets you create a [context](/learn/passing-data-deeply-with-context) that components can provide or read.
+
+```js
+const SomeContext = createContext(defaultValue)
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `createContext(defaultValue)` {/*createcontext*/}
+
+Call `createContext` outside of any components to create a context.
+
+```js
+import { createContext } from 'react';
+
+const ThemeContext = createContext('light');
+```
+
+[See more examples below.](#usage)
+
+#### Parameters {/*parameters*/}
+
+* `defaultValue`: The value that you want the context to have when there is no matching context provider in the tree above the component that reads context. If you don't have any meaningful default value, specify `null`. The default value is meant as a "last resort" fallback. It is static and never changes over time.
+
+#### Returns {/*returns*/}
+
+`createContext` returns a context object.
+
+**The context object itself does not hold any information.** It represents _which_ context other components can read or provide. Typically, you will use [`SomeContext.Provider`](#provider) in components above to specify the context value, and call [`useContext(SomeContext)`](/reference/react/useContext) in components below to read it. The context object has a few properties:
+
+* `SomeContext.Provider` lets you provide the context value to components.
+* `SomeContext.Consumer` is an alternative and rarely used way to read the context value.
+
+---
+
+### `SomeContext.Provider` {/*provider*/}
+
+Wrap your components into a context provider to specify the value of this context for all components inside:
+
+```js
+function App() {
+  const [theme, setTheme] = useState('light');
+  // ...
+  return (
+    <ThemeContext.Provider value={theme}>
+      <Page />
+    </ThemeContext.Provider>
+  );
+}
+```
+
+#### Props {/*provider-props*/}
+
+* `value`: The value that you want to pass to all the components reading this context inside this provider, no matter how deep. The context value can be of any type. A component calling [`useContext(SomeContext)`](/reference/react/useContext) inside of the provider receives the `value` of the innermost corresponding context provider above it.
+
+---
+
+### `SomeContext.Consumer` {/*consumer*/}
+
+Before `useContext` existed, there was an older way to read context:
+
+```js
+function Button() {
+  // 🟡 Legacy way (not recommended)
+  return (
+    <ThemeContext.Consumer>
+      {theme => (
+        <button className={theme} />
+      )}
+    </ThemeContext.Consumer>
+  );
+}
+```
+
+Although this older way still works, but **newly written code should read context with [`useContext()`](/reference/react/useContext) instead:**
+
+```js
+function Button() {
+  // ✅ Recommended way
+  const theme = useContext(ThemeContext);
+  return <button className={theme} />;
+}
+```
+
+#### Props {/*consumer-props*/}
+
+* `children`: A function. React will call the function you pass with the current context value determined by the same algorithm as [`useContext()`](/reference/react/useContext) does, and render the result you return from this function. React will also re-run this function and update the UI whenever the context passed from the parent components have changed.
+
+---
+
+## Usage {/*usage*/}
+
+### Creating context {/*creating-context*/}
+
+Context lets components [pass information deep down](/learn/passing-data-deeply-with-context) without explicitly passing props.
+
+Call `createContext` outside any components to create one or more contexts.
+
+```js [[1, 3, "ThemeContext"], [1, 4, "AuthContext"], [3, 3, "'light'"], [3, 4, "null"]]
+import { createContext } from 'react';
+
+const ThemeContext = createContext('light');
+const AuthContext = createContext(null);
+```
+
+`createContext` returns a <CodeStep step={1}>context object</CodeStep>. Components can read context by passing it to [`useContext()`](/reference/react/useContext):
+
+```js [[1, 2, "ThemeContext"], [1, 7, "AuthContext"]]
+function Button() {
+  const theme = useContext(ThemeContext);
+  // ...
+}
+
+function Profile() {
+  const currentUser = useContext(AuthContext);
+  // ...
+}
+```
+
+By default, the values they receive will be the <CodeStep step={3}>default values</CodeStep> you have specified when creating the contexts. However, by itself this isn't useful because the default values never change.
+
+Context is useful because you can **provide other, dynamic values from your components:**
+
+```js {8-9,11-12}
+function App() {
+  const [theme, setTheme] = useState('dark');
+  const [currentUser, setCurrentUser] = useState({ name: 'Taylor' });
+
+  // ...
+
+  return (
+    <ThemeContext.Provider value={theme}>
+      <AuthContext.Provider value={currentUser}>
+        <Page />
+      </AuthContext.Provider>
+    </ThemeContext.Provider>
+  );
+}
+```
+
+Now the `Page` component and any components inside it, no matter how deep, will "see" the passed context values. If the passed context values change, React will re-render the components reading the context as well.
+
+[Read more about reading and providing context and see examples.](/reference/react/useContext)
+
+---
+
+### Importing and exporting context from a file {/*importing-and-exporting-context-from-a-file*/}
+
+Often, components in different files will need access to the same context. This is why it's common to declare contexts in a separate file. Then you can use the [`export` statement](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export) to make context available for other files:
+
+```js {4-5}
+// Contexts.js
+import { createContext } from 'react';
+
+export const ThemeContext = createContext('light');
+export const AuthContext = createContext(null);
+````
+
+Components declared in other files can then use the [`import`](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/import) statement to read or provide this context:
+
+```js {2}
+// Button.js
+import { ThemeContext } from './Contexts.js';
+
+function Button() {
+  const theme = useContext(ThemeContext);
+  // ...
+}
+```
+
+```js {2}
+// App.js
+import { ThemeContext, AuthContext } from './Contexts.js';
+
+function App() {
+  // ...
+  return (
+    <ThemeContext.Provider value={theme}>
+      <AuthContext.Provider value={currentUser}>
+        <Page />
+      </AuthContext.Provider>
+    </ThemeContext.Provider>
+  );
+}
+```
+
+This works similar to [importing and exporting components.](/learn/importing-and-exporting-components)
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+
+### I can't find a way to change the context value {/*i-cant-find-a-way-to-change-the-context-value*/}
+
+
+Code like this specifies the *default* context value:
+
+```js
+const ThemeContext = createContext('light');
+```
+
+This value never changes. React only uses this value as a fallback if it can't find a matching provider above.
+
+To make context change over time, [add state and wrap components in a context provider.](/reference/react/useContext#updating-data-passed-via-context)
+
diff --git a/beta/src/content/reference/react/createElement.md b/beta/src/content/reference/react/createElement.md
new file mode 100644
index 000000000..a5f684c66
--- /dev/null
+++ b/beta/src/content/reference/react/createElement.md
@@ -0,0 +1,205 @@
+---
+title: createElement
+---
+
+<Intro>
+
+`createElement` lets you create a React element. It serves as an alternative to writing [JSX.](/learn/writing-markup-with-jsx)
+
+```js
+const element = createElement(type, props, ...children)
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `createElement(type, props, ...children)` {/*createelement*/}
+
+Call `createElement` to create a React element with the given `type`, `props`, and `children`.
+
+```js
+import { createElement } from 'react';
+
+function Greeting({ name }) {
+  return createElement(
+    'h1',
+    { className: 'greeting' },
+    'Hello'
+  );
+}
+```
+
+[See more examples below.](#usage)
+
+#### Parameters {/*parameters*/}
+
+* `type`: The `type` argument must be a valid React component type. For example, it could be a tag name string (such as `'div'` or `'span'`), or a React component (a function, a class, or a special component like [`Fragment`](/reference/react/Fragment)).
+
+* `props`: The `props` argument must either be an object or `null`. If you pass `null`, it will be treated the same as an empty object. React will create an element with props matching the `props` you have passed. Note that `ref` and `key` from your `props` object are special and will *not* be available as `element.props.ref` and `element.props.key` on the returned `element`. They will be available as `element.ref` and `element.key`.
+
+* **optional** `...children`: Zero or more child nodes. They can be any React nodes, including React elements, strings, numbers, [portals](/reference/react-dom/createPortal), empty nodes (`null`, `undefined`, `true`, and `false`), and arrays of React nodes.
+
+#### Returns {/*returns*/}
+
+`createElement` returns a React element object with a few properties:
+
+* `type`: The `type` you have passed.
+* `props`: The `props` you have passed except for `ref` and `key`. If the `type` is a component with legacy `type.defaultProps`, then any missing or undefined `props` will get the values from `type.defaultProps`.
+* `ref`: The `ref` you have passed. If missing, `null`.
+* `key`: The `key` you have passed, coerced to a string. If missing, `null`.
+
+Usually, you'll return the element from your component or make it a child of another element. Although you may read the element's properties, it's best to treat every element as opaque after it's created, and only render it.
+
+#### Caveats {/*caveats*/}
+
+* You must **treat React elements and their props as [immutable](https://en.wikipedia.org/wiki/Immutable_object)** and never change their contents after creation. In development, React will [freeze](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) the returned element and its `props` property shallowly to enforce this.
+
+* When you use JSX, **you must start a tag with a capital letter to render your own custom component.** In other words, `<Something />` is equivalent to `createElement(Something)`, but `<something />` (lowercase) is equivalent to `createElement('something')` (note it's a string, so it will be treated as a built-in HTML tag).
+
+* You should only **pass children as multiple arguments to `createElement` if they are all statically known,** like `createElement('h1', {}, child1, child2, child3)`. If your children are dynamic, pass the entire array as the third argument: `createElement('ul', {}, listItems)`. This ensures that React will [warn you about missing `key`s](/learn/rendering-lists#keeping-list-items-in-order-with-key) for any dynamic lists. For static lists this is not necessary because they never reorder.
+
+---
+
+## Usage {/*usage*/}
+
+### Creating an element without JSX {/*creating-an-element-without-jsx*/}
+
+If you don't like [JSX](/learn/writing-markup-with-jsx) or can't use it in your project, you can use `createElement` as an alternative.
+
+To create an element without JSX, call `createElement` with some <CodeStep step={1}>type</CodeStep>, <CodeStep step={2}>props</CodeStep>, and <CodeStep step={3}>children</CodeStep>:
+
+```js [[1, 5, "'h1'"], [2, 6, "{ className: 'greeting' }"], [3, 7, "'Hello ',"], [3, 8, "createElement('i', null, name),"], [3, 9, "'. Welcome!'"]]
+import { createElement } from 'react';
+
+function Greeting({ name }) {
+  return createElement(
+    'h1',
+    { className: 'greeting' },
+    'Hello ',
+    createElement('i', null, name),
+    '. Welcome!'
+  );
+}
+```
+
+The <CodeStep step={3}>children</CodeStep> are optional, and you can pass as many as you need (the example above has three children). This code will display a `<h1>` header with a greeting. For comparison, here is the same example rewritten with JSX:
+
+```js [[1, 3, "h1"], [2, 3, "className=\\"greeting\\""], [3, 4, "Hello <i>{name}</i>. Welcome!"], [1, 5, "h1"]]
+function Greeting({ name }) {
+  return (
+    <h1 className="greeting">
+      Hello <i>{name}</i>. Welcome!
+    </h1>
+  );
+}
+```
+
+To render your own React component, pass a function like `Greeting` as the <CodeStep step={1}>type</CodeStep> instead of a string like `'h1'`:
+
+```js [[1, 2, "Greeting"], [2, 2, "{ name: 'Taylor' }"]]
+export default function App() {
+  return createElement(Greeting, { name: 'Taylor' });
+}
+```
+
+With JSX, it would look like this:
+
+```js [[1, 2, "Greeting"], [2, 2, "name=\\"Taylor\\""]]
+export default function App() {
+  return <Greeting name="Taylor" />;
+}
+```
+
+Here is a complete example written with `createElement`:
+
+<Sandpack>
+
+```js
+import { createElement } from 'react';
+
+function Greeting({ name }) {
+  return createElement(
+    'h1',
+    { className: 'greeting' },
+    'Hello ',
+    createElement('i', null, name),
+    '. Welcome!'
+  );
+}
+
+export default function App() {
+  return createElement(
+    Greeting,
+    { name: 'Taylor' }
+  );
+}
+```
+
+```css
+.greeting {
+  color: darkgreen;
+  font-family: Georgia;
+}
+```
+
+</Sandpack>
+
+And here is the same example written using JSX:
+
+<Sandpack>
+
+```js
+function Greeting({ name }) {
+  return (
+    <h1 className="greeting">
+      Hello <i>{name}</i>. Welcome!
+    </h1>
+  );
+}
+
+export default function App() {
+  return <Greeting name="Taylor" />;
+}
+```
+
+```css
+.greeting {
+  color: darkgreen;
+  font-family: Georgia;
+}
+```
+
+</Sandpack>
+
+Both coding styles are fine, so you can use whichever one you prefer for your project. The main benefit of using JSX compared to `createElement` is that it's easy to see which closing tag corresponds to which opening tag.
+
+<DeepDive>
+
+#### What is a React element, exactly? {/*what-is-a-react-element-exactly*/}
+
+An element is a lightweight description of a piece of the user interface. For example, both `<Greeting name="Taylor" />` and `createElement(Greeting, { name: 'Taylor' })` produce an object like this:
+
+```js
+// Slightly simplified
+{
+  type: Greeting,
+  props: {
+    name: 'Taylor'
+  },
+  key: null,
+  ref: null,
+}
+```
+
+**Note that creating this object does not render the `Greeting` component or create any DOM elements.**
+
+A React element is more like a description--an instruction for React to later render the `Greeting` component. By returning this object from your `App` component, you tell React what to do next.
+
+Creating elements is extremely cheap so you don't need to try to optimize or avoid it.
+
+</DeepDive>
diff --git a/beta/src/content/reference/react/createFactory.md b/beta/src/content/reference/react/createFactory.md
new file mode 100644
index 000000000..eb851ad97
--- /dev/null
+++ b/beta/src/content/reference/react/createFactory.md
@@ -0,0 +1,231 @@
+---
+title: createFactory
+---
+
+<Deprecated>
+
+This API will be removed in a future major version of React. [See the alternatives.](#alternatives)
+
+</Deprecated>
+
+<Intro>
+
+`createFactory` lets you create a function that produces React elements of a given type.
+
+```js
+const factory = createFactory(type)
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `createFactory(type)` {/*createfactory*/}
+
+Call `createFactory(type)` to create a factory function which produces React elements of a given `type`.
+
+```js
+import { createFactory } from 'react';
+
+const button = createFactory('button');
+```
+
+Then you can use it to create React elements without JSX:
+
+```js
+export default function App() {
+  return button({
+    onClick: () => {
+      alert('Clicked!')
+    }
+  }, 'Click me');
+}
+```
+
+[See more examples below.](#usage)
+
+#### Parameters {/*parameters*/}
+
+* `type`: The `type` argument must be a valid React component type. For example, it could be a tag name string (such as `'div'` or `'span'`), or a React component (a function, a class, or a special component like [`Fragment`](/reference/react/Fragment)).
+
+#### Returns {/*returns*/}
+
+Returns a factory function. That factory function receives a `props` object as the first argument, followed by a list of `...children` arguments, and returns a React element with the given `type`, `props` and `children`.
+
+---
+
+## Usage {/*usage*/}
+
+### Creating React elements with a factory {/*creating-react-elements-with-a-factory*/}
+
+Although most React projects use [JSX](/learn/writing-markup-with-jsx) to describe the user interface, JSX is not required. In the past, `createFactory` used to be one of the ways you could describe the user interface without JSX.
+
+Call `createFactory` to create a *factory function* for a specific element type like `'button'`:
+
+```js
+import { createFactory } from 'react';
+
+const button = createFactory('button');
+```
+
+Calling that factory function will produce React elements with the props and children you have provided:
+
+<Sandpack>
+
+```js App.js
+import { createFactory } from 'react';
+
+const button = createFactory('button');
+
+export default function App() {
+  return button({
+    onClick: () => {
+      alert('Clicked!')
+    }
+  }, 'Click me');
+}
+```
+
+</Sandpack>
+
+This is how `createFactory` was used as an alternative to JSX. However, `createFactory` is deprecated, and you should not call `createFactory` in any new code. See how to migrate away from `createFactory` below.
+
+---
+
+## Alternatives {/*alternatives*/}
+
+### Copying `createFactory` into your project {/*copying-createfactory-into-your-project*/}
+
+If your project has many `createFactory` calls, copy this `createFactory.js` implementation into your project:
+
+<Sandpack>
+
+```js App.js
+import { createFactory } from './createFactory.js';
+
+const button = createFactory('button');
+
+export default function App() {
+  return button({
+    onClick: () => {
+      alert('Clicked!')
+    }
+  }, 'Click me');
+}
+```
+
+```js createFactory.js
+import { createElement } from 'react';
+
+export function createFactory(type) {
+  return createElement.bind(null, type);
+}
+```
+
+</Sandpack>
+
+This lets you keep all of your code unchanged except the imports.
+
+---
+
+### Replacing `createFactory` with `createElement` {/*replacing-createfactory-with-createelement*/}
+
+If you have a few `createFactory` calls that you don't mind porting manually, and you don't want to use JSX, you can replace every call a factory function with a [`createElement`](/reference/react/createElement) call. For example, you can replace this code:
+
+```js {1,3,6}
+import { createFactory } from 'react';
+
+const button = createFactory('button');
+
+export default function App() {
+  return button({
+    onClick: () => {
+      alert('Clicked!')
+    }
+  }, 'Click me');
+}
+```
+
+with this code:
+
+
+```js {1,4}
+import { createElement } from 'react';
+
+export default function App() {
+  return createElement('button', {
+    onClick: () => {
+      alert('Clicked!')
+    }
+  }, 'Click me');
+}
+```
+
+Here is a complete example of using React without JSX:
+
+<Sandpack>
+
+```js App.js
+import { createElement } from 'react';
+
+export default function App() {
+  return createElement('button', {
+    onClick: () => {
+      alert('Clicked!')
+    }
+  }, 'Click me');
+}
+```
+
+</Sandpack>
+
+---
+
+### Replacing `createFactory` with JSX {/*replacing-createfactory-with-jsx*/}
+
+Finally, you can use JSX instead of `createFactory`. This is the most common way to use React:
+
+<Sandpack>
+
+```js App.js
+export default function App() {
+  return (
+    <button onClick={() => {
+      alert('Clicked!');
+    }}>
+      Click me
+    </button>
+  );
+};
+```
+
+</Sandpack>
+
+<Pitfall>
+
+Sometimes, your existing code might pass some variable as a `type` instead of a constant like `'button'`:
+
+```js {3}
+function Heading({ isSubheading, ...props }) {
+  const type = isSubheading ? 'h2' : 'h1';
+  const factory = createFactory(type);
+  return factory(props);
+}
+```
+
+To do the same in JSX, you need to rename your variable to start with an uppercase letter like `Type`:
+
+```js {2,3}
+function Heading({ isSubheading, ...props }) {
+  const Type = isSubheading ? 'h2' : 'h1';
+  return <Type {...props} />;
+}
+```
+
+Otherwise React will interpret `<type>` as a built-in HTML tag because it is lowercase.
+
+</Pitfall>
diff --git a/beta/src/content/reference/react/createRef.md b/beta/src/content/reference/react/createRef.md
new file mode 100644
index 000000000..7974659dc
--- /dev/null
+++ b/beta/src/content/reference/react/createRef.md
@@ -0,0 +1,174 @@
+---
+title: createRef
+---
+
+<Pitfall>
+
+`createRef` is mostly used for [class components.](/reference/react/Component) Function components typically rely on [`useRef`](/reference/react/useRef) instead.
+
+</Pitfall>
+
+<Intro>
+
+`createRef` creates a [ref](/learn/referencing-values-with-refs) object which can contain arbitrary value.
+
+```js
+class MyInput extends Component {
+  inputRef = createRef();
+  // ...
+}
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `createRef()` {/*createref*/}
+
+Call `createRef` to declare a [ref](/learn/referencing-values-with-refs) inside a [class component.](/reference/react/Component)
+
+```js
+import { createRef, Component } from 'react';
+
+class MyComponent extends Component {
+  intervalRef = createRef();
+  inputRef = createRef();
+  // ...
+```
+
+[See more examples below.](#usage)
+
+#### Parameters {/*parameters*/}
+
+`createRef` takes no parameters.
+
+#### Returns {/*returns*/}
+
+`createRef` returns an object with a single property:
+
+* `current`: Initially, it's set to the `null`. You can later set it to something else. If you pass the ref object to React as a `ref` attribute to a JSX node, React will set its `current` property.
+
+#### Caveats {/*caveats*/}
+
+* `createRef` always returns a *different* object. It's equivalent to writing `{ current: null }` yourself.
+* In a function component, you probably want [`useRef`](/reference/react/useRef) instead which always returns the same object.
+* `const ref = useRef()` is equivalent to `const [ref, _] = useState(() => createRef(null))`.
+
+---
+
+## Usage {/*usage*/}
+
+### Declaring a ref in a class component {/*declaring-a-ref-in-a-class-component*/}
+
+To declare a ref inside a [class component,](/reference/react/Component) call `createRef` and assign its result to a class field:
+
+```js {4}
+import { Component, createRef } from 'react';
+
+class Form extends Component {
+  inputRef = createRef();
+
+  // ...
+}
+```
+
+If you now pass `ref={this.inputRef}` to an `<input>` in your JSX, React will populate `this.inputRef.current` with the input DOM node. For example, here is how you make a button that focuses the input:
+
+<Sandpack>
+
+```js
+import { Component, createRef } from 'react';
+
+export default class Form extends Component {
+  inputRef = createRef();
+
+  handleClick = () => {
+    this.inputRef.current.focus();
+  }
+
+  render() {
+    return (
+      <>
+        <input ref={this.inputRef} />
+        <button onClick={this.handleClick}>
+          Focus the input
+        </button>
+      </>
+    );
+  }
+}
+```
+
+</Sandpack>
+
+<Pitfall>
+
+`createRef` is mostly used for [class components.](/reference/react/Component) Function components typically rely on [`useRef`](/reference/react/useRef) instead.
+
+</Pitfall>
+
+---
+
+## Alternatives {/*alternatives*/}
+
+### Migrating from a class with `createRef` to a function with `useRef` {/*migrating-from-a-class-with-createref-to-a-function-with-useref*/}
+
+We recommend to use function components instead of [class components](/reference/react/Component) in the new code. If you have some existing class components using `createRef`, here is how you can convert them. This is the original code:
+
+<Sandpack>
+
+```js
+import { Component, createRef } from 'react';
+
+export default class Form extends Component {
+  inputRef = createRef();
+
+  handleClick = () => {
+    this.inputRef.current.focus();
+  }
+
+  render() {
+    return (
+      <>
+        <input ref={this.inputRef} />
+        <button onClick={this.handleClick}>
+          Focus the input
+        </button>
+      </>
+    );
+  }
+}
+```
+
+</Sandpack>
+
+When you [convert this component from a class to a function,](/reference/react/Component#alternatives) replace calls to `createRef` with calls to [`useRef`:](/reference/react/useRef)
+
+<Sandpack>
+
+```js
+import { useRef } from 'react';
+
+export default function Form() {
+  const inputRef = useRef(null);
+
+  function handleClick() {
+    inputRef.current.focus();
+  }
+
+  return (
+    <>
+      <input ref={inputRef} />
+      <button onClick={handleClick}>
+        Focus the input
+      </button>
+    </>
+  );
+}
+```
+
+</Sandpack>
diff --git a/beta/src/content/reference/react/forwardRef.md b/beta/src/content/reference/react/forwardRef.md
new file mode 100644
index 000000000..66dd90e42
--- /dev/null
+++ b/beta/src/content/reference/react/forwardRef.md
@@ -0,0 +1,536 @@
+---
+title: forwardRef
+---
+
+<Intro>
+
+`forwardRef` lets your component expose a DOM node to parent component with a [ref.](/learn/manipulating-the-dom-with-refs)
+
+```js
+const SomeComponent = forwardRef(render)
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `forwardRef(render)` {/*forwardref*/}
+
+Call `forwardRef()` to let your component receive a ref and forward it to a child component:
+
+```js
+import { forwardRef } from 'react';
+
+const MyInput = forwardRef(function MyInput(props, ref) {
+  // ...
+});
+```
+
+[See more examples below.](#usage)
+
+#### Parameters {/*parameters*/}
+
+* `render`: The render function for your component. React calls this function with the props and `ref` that your component received from its parent. The JSX you return will be the output of your component.
+
+#### Returns {/*returns*/}
+
+`forwardRef` returns a React component that you can render in JSX. Unlike React components defined as plain functions, a component returned by `forwardRef` is also able to receive a `ref` prop.
+
+#### Caveats {/*caveats*/}
+
+* In Strict Mode, React will **call your render function twice** in order to [help you find accidental impurities.](#my-initializer-or-updater-function-runs-twice) This is development-only behavior and does not affect production. If your render function is pure (as it should be), this should not affect the logic of your component. The result from one of the calls will be ignored.
+
+
+---
+
+### `render` function {/*render-function*/}
+
+`forwardRef` accepts a render function as an argument. React calls this function with `props` and `ref`:
+
+```js
+const MyInput = forwardRef(function MyInput(props, ref) {
+  return (
+    <label>
+      {props.label}
+      <input ref={ref} />
+    </label>
+  );
+});
+```
+
+#### Parameters {/*render-parameters*/}
+
+* `props`: The props passed by the parent component.
+
+* `ref`:  The `ref` attribute passed by the parent component. The `ref` can be an object or a function. If the parent component has not passed a ref, it will be `null`. You should either pass the `ref` you receive to another component, or pass it to [`useImperativeHandle`.](/reference/react/useImperativeHandle)
+
+#### Returns {/*render-returns*/}
+
+`forwardRef` returns a React component that you can render in JSX. Unlike React components defined as plain functions, the component returned by `forwardRef` is able to take a `ref` prop.
+
+---
+
+## Usage {/*usage*/}
+
+### Exposing a DOM node to the parent component {/*exposing-a-dom-node-to-the-parent-component*/}
+
+By default, each component's DOM nodes are private. However, sometimes it's useful to expose a DOM node to the parent--for example, to allow focusing it. To opt in, wrap your component definition into `forwardRef()`:
+
+```js {3,11}
+import { forwardRef } from 'react';
+
+const MyInput = forwardRef(function MyInput(props, ref) {
+  const { label, ...otherProps } = props;
+  return (
+    <label>
+      {label}
+      <input {...otherProps} />
+    </label>
+  );
+});
+```
+
+You will receive a <CodeStep step={1}>ref</CodeStep> as the second argument after props. Pass it to the DOM node that you want to expose:
+
+```js {8} [[1, 3, "ref"], [1, 8, "ref", 30]]
+import { forwardRef } from 'react';
+
+const MyInput = forwardRef(function MyInput(props, ref) {
+  const { label, ...otherProps } = props;
+  return (
+    <label>
+      {label}
+      <input {...otherProps} ref={ref} />
+    </label>
+  );
+});
+```
+
+This lets the parent `Form` component access the <CodeStep step={2}>`<input>` DOM node</CodeStep> exposed by `MyInput`:
+
+```js [[1, 2, "ref"], [1, 10, "ref", 41], [2, 5, "ref.current"]]
+function Form() {
+  const ref = useRef(null);
+
+  function handleClick() {
+    ref.current.focus();
+  }
+
+  return (
+    <form>
+      <MyInput label="Enter your name:" ref={ref} />
+      <button type="button" onClick={handleClick}>
+        Edit
+      </button>
+    </form>
+  );
+}
+```
+
+This `Form` component [passes a ref](/reference/useref#manipulating-the-dom-with-a-ref) to `MyInput`. The `MyInput` component *forwards* that ref to the `<input>` browser tag. As a result, the `Form` component can access that `<input>` DOM node and call [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) on it.
+
+Keep in mind that by exposing a ref to the DOM node inside your component, you're making it harder to change your component's internals later. You will typically expose DOM nodes from reusable low-level components like buttons or text inputs, but you won't do it for application-level components like an avatar or a comment.
+
+<Recipes title="Examples of forwarding a ref">
+
+#### Focusing a text input {/*focusing-a-text-input*/}
+
+Clicking the button will focus the input. The `Form` component defines a ref and passes it to the `MyInput` component. The `MyInput` component fowards that ref to the browser `<input>`. This lets the `Form` component focus the `<input>`.
+
+<Sandpack>
+
+```js
+import { useRef } from 'react';
+import MyInput from './MyInput.js';
+
+export default function Form() {
+  const ref = useRef(null);
+
+  function handleClick() {
+    ref.current.focus();
+  }
+
+  return (
+    <form>
+      <MyInput label="Enter your name:" ref={ref} />
+      <button type="button" onClick={handleClick}>
+        Edit
+      </button>
+    </form>
+  );
+}
+```
+
+```js MyInput.js
+import { forwardRef } from 'react';
+
+const MyInput = forwardRef(function MyInput(props, ref) {
+  const { label, ...otherProps } = props;
+  return (
+    <label>
+      {label}
+      <input {...otherProps} ref={ref} />
+    </label>
+  );
+});
+
+export default MyInput;
+```
+
+```css
+input {
+  margin: 5px;
+}
+```
+
+</Sandpack>
+
+<Solution />
+
+#### Playing and pausing a video {/*playing-and-pausing-a-video*/}
+
+Clicking the button will call [`play()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play) and [`pause()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause) on a `<video>` DOM node. The `App` component defines a ref and passes it to the `MyVideoPlayer` component. The `MyVideoPlayer` component forwards that ref to the browser `<video>` node. This lets the `App` component play and pause the `<video>`.
+
+<Sandpack>
+
+```js
+import { useRef } from 'react';
+import MyVideoPlayer from './MyVideoPlayer.js';
+
+export default function App() {
+  const ref = useRef(null);
+  return (
+    <>
+      <button onClick={() => ref.current.play()}>
+        Play
+      </button>
+      <button onClick={() => ref.current.pause()}>
+        Pause
+      </button>
+      <br />
+      <MyVideoPlayer
+        ref={ref}
+        src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
+        type="video/mp4"
+        width="250"
+      />
+    </>
+  );
+}
+```
+
+```js MyVideoPlayer.js
+import { forwardRef } from 'react';
+
+const VideoPlayer = forwardRef(function VideoPlayer({ src, type, width }, ref) {
+  return (
+    <video width={width} ref={ref}>
+      <source
+        src={src}
+        type={type}
+      />
+    </video>
+  );
+});
+
+export default VideoPlayer;
+```
+
+```css
+button { margin-bottom: 10px; margin-right: 10px; }
+```
+
+</Sandpack>
+
+<Solution />
+
+</Recipes>
+
+---
+
+### Forwarding a ref through multiple components {/*forwarding-a-ref-through-multiple-components*/}
+
+Instead of forwarding a `ref` to a DOM node, you can forward it to your own component like `MyInput`:
+
+```js {1,5}
+const FormField = forwardRef(function FormField(props, ref) {
+  // ...
+  return (
+    <>
+      <MyInput ref={ref} />
+      ...
+    </>
+  );
+});
+```
+
+If that `MyInput` component forwards a ref to its `<input>`, a ref to `FormField` will give you that `<input>`:
+
+```js {2,5,10}
+function Form() {
+  const ref = useRef(null);
+
+  function handleClick() {
+    ref.current.focus();
+  }
+
+  return (
+    <form>
+      <FormField label="Enter your name:" ref={ref} isRequired={true} />
+      <button type="button" onClick={handleClick}>
+        Edit
+      </button>
+    </form>
+  );
+}
+```
+
+The `Form` component defines a ref and passes it to `FormField`. The `FormField` component forwards that ref to `MyInput`, which forwards this ref to a browser `<input>` DOM node. This is how `Form` accesses that DOM node.
+
+
+<Sandpack>
+
+```js
+import { useRef } from 'react';
+import FormField from './FormField.js';
+
+export default function Form() {
+  const ref = useRef(null);
+
+  function handleClick() {
+    ref.current.focus();
+  }
+
+  return (
+    <form>
+      <FormField label="Enter your name:" ref={ref} isRequired={true} />
+      <button type="button" onClick={handleClick}>
+        Edit
+      </button>
+    </form>
+  );
+}
+```
+
+```js FormField.js
+import { forwardRef, useState } from 'react';
+import MyInput from './MyInput.js';
+
+const FormField = forwardRef(function FormField({ label, isRequired }, ref) {
+  const [value, setValue] = useState('');
+  return (
+    <>
+      <MyInput
+        ref={ref}
+        label={label}
+        value={value}
+        onChange={e => setValue(e.target.value)} 
+      />
+      {(isRequired && value === '') &&
+        <i>Required</i>
+      }
+    </>
+  );
+});
+
+export default FormField;
+```
+
+
+```js MyInput.js
+import { forwardRef } from 'react';
+
+const MyInput = forwardRef((props, ref) => {
+  const { label, ...otherProps } = props;
+  return (
+    <label>
+      {label}
+      <input {...otherProps} ref={ref} />
+    </label>
+  );
+});
+
+export default MyInput;
+```
+
+```css
+input, button {
+  margin: 5px;
+}
+```
+
+</Sandpack>
+
+---
+
+### Exposing an imperative handle instead of a DOM node {/*exposing-an-imperative-handle-instead-of-a-dom-node*/}
+
+Instead of exposing an entire DOM node, you can expose a custom object, called an *imperative handle,* with a more constrained set of methods. To do this, you'd need to define a separate ref to hold the DOM node:
+
+```js {2,6}
+const MyInput = forwardRef(function MyInput(props, ref) {
+  const inputRef = useRef(null);
+
+  // ...
+
+  return <input {...props} ref={inputRef} />;
+});
+```
+
+Then pass the `ref` you received to [`useImperativeHandle`](/reference/react/useImperativeHandle) and specify the value you want to expose to the `ref`:
+
+```js {6-15}
+import { forwardRef, useRef, useImperativeHandle } from 'react';
+
+const MyInput = forwardRef(function MyInput(props, ref) {
+  const inputRef = useRef(null);
+
+  useImperativeHandle(ref, () => {
+    return {
+      focus() {
+        inputRef.current.focus();
+      },
+      scrollIntoView() {
+        inputRef.current.scrollIntoView();
+      },
+    };
+  }, []);
+
+  return <input {...props} ref={inputRef} />;
+});
+```
+
+If some component gets a ref to `MyInput` now, it will only receive your `{ focus, scrollIntoView }` object instead of the DOM node. This lets you limit the information you expose about your DOM node to the minimum.
+
+<Sandpack>
+
+```js
+import { useRef } from 'react';
+import MyInput from './MyInput.js';
+
+export default function Form() {
+  const ref = useRef(null);
+
+  function handleClick() {
+    ref.current.focus();
+    // This won't work because the DOM node isn't exposed:
+    // ref.current.style.opacity = 0.5;
+  }
+
+  return (
+    <form>
+      <MyInput label="Enter your name:" ref={ref} />
+      <button type="button" onClick={handleClick}>
+        Edit
+      </button>
+    </form>
+  );
+}
+```
+
+```js MyInput.js
+import { forwardRef, useRef, useImperativeHandle } from 'react';
+
+const MyInput = forwardRef(function MyInput(props, ref) {
+  const inputRef = useRef(null);
+
+  useImperativeHandle(ref, () => {
+    return {
+      focus() {
+        inputRef.current.focus();
+      },
+      scrollIntoView() {
+        inputRef.current.scrollIntoView();
+      },
+    };
+  }, []);
+
+  return <input {...props} ref={inputRef} />;
+});
+
+export default MyInput;
+```
+
+```css
+input {
+  margin: 5px;
+}
+```
+
+</Sandpack>
+
+[Read more about using imperative handles.](/reference/react/useImperativeHandle)
+
+<Pitfall>
+
+**Do not overuse refs.** You should only use refs for *imperative* behaviors that you can't express as props: for example, scrolling to a node, focusing a node, triggering an animation, selecting text, and so on.
+
+**If you can express something as a prop, you should not use a ref.** For example, instead of exposing an imperative handle like `{ open, close }` from a `Modal` component, it is better to take `isOpen` as a prop like `<Modal isOpen={isOpen} />`. [Effects](/learn/synchronizing-with-effects) can help you expose imperative behaviors via props.
+
+</Pitfall>
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+
+### My component is wrapped in `forwardRef`, but the `ref` to it is always `null` {/*my-component-is-wrapped-in-forwardref-but-the-ref-to-it-is-always-null*/}
+
+This usually means that you forgot to actually use the `ref` that you received.
+
+For example, this component doesn't do anything with its `ref`:
+
+```js {1}
+const MyInput = forwardRef(function MyInput({ label }, ref) {
+  return (
+    <label>
+      {label}
+      <input />
+    </label>
+  );
+});
+```
+
+To fix it, pass the `ref` down to a DOM node or another component that can accept a ref:
+
+```js {1,5}
+const MyInput = forwardRef(function MyInput({ label }, ref) {
+  return (
+    <label>
+      {label}
+      <input ref={ref} />
+    </label>
+  );
+});
+```
+
+The `ref` to `MyInput` could also be `null` if some of the logic is conditional:
+
+```js {1,5}
+const MyInput = forwardRef(function MyInput({ label, showInput }, ref) {
+  return (
+    <label>
+      {label}
+      {showInput && <input ref={ref} />}
+    </label>
+  );
+});
+```
+
+If `showInput` is `false`, then the ref won't be forwarded to any node, and a ref to `MyInput` will remain empty. This is particularly easy to miss if the condition is hidden inside another component, like `Panel` in this example:
+
+```js {5,7}
+const MyInput = forwardRef(function MyInput({ label, showInput }, ref) {
+  return (
+    <label>
+      {label}
+      <Panel isExpanded={showInput}>
+        <input ref={ref} />
+      </Panel>
+    </label>
+  );
+});
+```
diff --git a/beta/src/content/reference/react/index.md b/beta/src/content/reference/react/index.md
new file mode 100644
index 000000000..fb9d2652a
--- /dev/null
+++ b/beta/src/content/reference/react/index.md
@@ -0,0 +1,115 @@
+---
+title: "Built-in React Hooks"
+---
+
+<Intro>
+
+*Hooks* let you use different React features from your components. You can either use the built-in Hooks or combine them to build your own. This page lists all the built-in Hooks in React.
+
+</Intro>
+
+---
+
+## State Hooks {/*state-hooks*/}
+
+*State* lets a component ["remember" information like user input.](/learn/state-a-components-memory) For example, a form component can use state to store the input value, while an image gallery component can use state to store the selected image index.
+
+To add state to a component, use one of these Hooks:
+
+* [`useState`](/reference/react/useState) declares a state variable that you can update directly.
+* [`useReducer`](/reference/react/useReducer) declares a state variable with the update logic inside a [reducer function.](/learn/extracting-state-logic-into-a-reducer)
+
+```js
+function ImageGallery() {
+  const [index, setIndex] = useState(0);
+  // ...
+```
+
+---
+
+## Context Hooks {/*context-hooks*/}
+
+*Context* lets a component [receive information from distant parents without passing it as props.](/learn/passing-props-to-a-component) For example, your app's top-level component can pass the current UI theme to all components below, no matter how deep.
+
+* [`useContext`](/reference/react/useContext) reads and subscribes to a context.
+
+```js
+function Button() {
+  const theme = useContext(ThemeContext);
+  // ...
+```
+
+---
+
+## Ref Hooks {/*ref-hooks*/}
+
+*Refs* let a component [hold some information that isn't used for rendering,](/learn/referencing-values-with-refs) like a DOM node or a timeout ID. Unlike with state, updating a ref does not re-render your component. Refs are an "escape hatch" from the React paradigm. They are useful when you need to work with non-React systems, such as the built-in browser APIs.
+
+* [`useRef`](/reference/react/useRef) declares a ref. You can hold any value in it, but most often it's used to hold a DOM node.
+* [`useImperativeHandle`](/reference/react/useImperativeHandle) lets you customize the ref exposed by your component. This is rarely used.
+
+```js
+function Form() {
+  const inputRef = useRef(null);
+  // ...
+```
+
+---
+
+## Effect Hooks {/*effect-hooks*/}
+
+*Effects* let a component [connect to and synchronize with external systems.](/learn/synchronizing-with-effects) This includes dealing with network, browser DOM, animations, widgets written using a different UI library, and in general any non-React code.
+
+* [`useEffect`](/reference/react/useEffect) connects a component to an external system.
+
+```js
+function ChatRoom({ roomId }) {
+  useEffect(() => {
+    const connection = createConnection(roomId);
+    connection.connect();
+    return () => connection.disconnect();
+  }, [roomId]);
+  // ...
+```
+
+Effects are an "escape hatch" from the React paradigm. Don't use Effects to orchestrate the data flow of your application. If you're not interacting with an external system, [you might not need an Effect.](/learn/you-might-not-need-an-effect)
+
+There are two rarely used variations of `useEffect` with differences in timing:
+
+* [`useLayoutEffect`](/reference/react/useLayoutEffect) fires before the browser repaints the screen. You can measure layout here.
+* [`useInsertionEffect`](/reference/react/useInsertionEffect) fires before React makes changes to the DOM. Libraries can insert dynamic CSS here.
+
+---
+
+## Performance Hooks {/*performance-hooks*/}
+
+A common way to optimize re-rendering performance is to skip unnecessary work. For example, you can tell React to reuse a cached calculation or to skip a re-render if the data has not changed since the previous render.
+
+To skip calculations and unnecessary re-rendering, use one of these Hooks:
+
+- [`useMemo`](/reference/react/useMemo) lets you cache the result of an expensive calculation.
+- [`useCallback`](/reference/react/useCallback) lets you cache a function definition before passing it down to an optimized component.
+
+```js
+function TodoList({ todos, tab, theme }) {
+  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
+  // ...
+}
+```
+
+Sometimes, you can't skip re-rendering because the screen actually needs to update. In that case, you can improve performance by separating blocking updates that must be synchronous (like typing into an input) from non-blocking updates which don't need to block the user interface (like updating a chart).
+
+To prioritize rendering, use one of these Hooks:
+
+- [`useTransition`](/reference/react/useTransition) lets you mark a state transition as non-blocking and allow other updates to interrupt it.
+- [`useDeferredValue`](/reference/react/useDeferredValue) lets you defer updating a non-critical part of the UI and let other parts update first.
+
+---
+
+## Other Hooks {/*other-hooks*/}
+
+These Hooks are mostly useful to library authors and aren't commonly used in the application code.
+
+- [`useDebugValue`](/reference/react/useDebugValue) lets you customize the label React DevTools displays for your custom Hook.
+- [`useId`](/reference/react/useId) lets a component associate a unique ID with itself. Typically used with accessibility APIs.
+- [`useSyncExternalStore`](/reference/react/useSyncExternalStore) lets a component subscribe to an external store.
diff --git a/beta/src/content/reference/react/isValidElement.md b/beta/src/content/reference/react/isValidElement.md
new file mode 100644
index 000000000..d89988b8f
--- /dev/null
+++ b/beta/src/content/reference/react/isValidElement.md
@@ -0,0 +1,128 @@
+---
+title: isValidElement
+---
+
+<Intro>
+
+`isValidElement` checks whether a value is a React element.
+
+```js
+const isElement = isValidElement(value)
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `isValidElement(value)` {/*isvalidelement*/}
+
+Call `isValidElement(value)` to check whether `value` is a React element.
+
+```js
+import { isValidElement } from 'react';
+
+// ✅ React elements
+console.log(isValidElement(<p />)); // true
+console.log(isValidElement(createElement('p'))); // true
+
+// ❌ Not React elements
+console.log(isValidElement(25)); // false
+console.log(isValidElement('Hello')); // false
+console.log(isValidElement({ age: 42 })); // false
+```
+
+[See more examples below.](#usage)
+
+#### Parameters {/*parameters*/}
+
+* `value`: The `value` you want to check. It can be any a value of any type.
+
+#### Returns {/*returns*/}
+
+`isValidElement` returns `true` if the `value` is a React element. Otherwise, it returns `false`.
+
+#### Caveats {/*caveats*/}
+
+* **Only [JSX tags](/learn/writing-markup-with-jsx) and objects returned by [`createElement`](/reference/react/createElement) are considered to be React elements.** For example, even though a number like `42` is a valid React *node* (and can be returned from a component), it is not a valid React element. Arrays and portals created with [`createPortal`](/reference/react-dom/createPortal) are also *not* considered to be React elements.
+
+---
+
+## Usage {/*usage*/}
+
+### Checking if something is a React element {/*checking-if-something-is-a-react-element*/}
+
+Call `isValidElement` to check if some value is a *React element.*
+
+React elements are:
+
+- Values produced by writing a [JSX tag](/learn/writing-markup-with-jsx)
+- Values produced by calling [`createElement`](/reference/react/createElement)
+
+For React elements, `isValidElement` returns `true`:
+
+```js
+import { isValidElement, createElement } from 'react';
+
+// ✅ JSX tags are React elements
+console.log(isValidElement(<p />)); // true
+console.log(isValidElement(<MyComponent />)); // true
+
+// ✅ Values returned by createElement are React elements
+console.log(isValidElement(createElement('p'))); // true
+console.log(isValidElement(createElement(MyComponent))); // true
+```
+
+Any other values, such as strings, numbers, or arbitrary objects and arrays, are not React elements.
+
+For them, `isValidElement` returns `false`:
+
+```js
+// ❌ These are *not* React elements
+console.log(isValidElement(null)); // false
+console.log(isValidElement(25)); // false
+console.log(isValidElement('Hello')); // false
+console.log(isValidElement({ age: 42 })); // false
+console.log(isValidElement([<div />, <div />])); // false
+console.log(isValidElement(MyComponent)); // false
+```
+
+It is very uncommon to need `isValidElement`. It's mostly useful if you're calling another API that *only* accepts elements (like [`cloneElement`](/reference/react/cloneElement) does) and you want to avoid an error when your argument is not a React element.
+
+Unless you have some very specific reason to add an `isValidElement` check, you probably don't need it.
+
+<DeepDive>
+
+#### React elements vs React nodes {/*react-elements-vs-react-nodes*/}
+
+When you write a component, you can return any kind of *React node* from it:
+
+```js
+function MyComponent() {
+  // ... you can return any React node ...
+}
+```
+
+A React node can be:
+
+- A React element created like `<div />` or `createElement('div')`
+- A portal created with [`createPortal`](/reference/react-dom/createPortal)
+- A string
+- A number
+- `true`, `false`, `null`, or `undefined` (which are not displayed)
+- An array of other React nodes
+
+**Note `isValidElement` checks whether the argument is a *React element,* not whether it's a React node.** For example, `42` is not a valid React element. However, it is a perfectly valid React node:
+
+```js
+function MyComponent() {
+  return 42; // It's ok to return a number from component
+}
+```
+
+This is why you shouldn't use `isValidElement` as a way to check whether something can be rendered.
+
+</DeepDive>
diff --git a/beta/src/content/reference/react/lazy.md b/beta/src/content/reference/react/lazy.md
new file mode 100644
index 000000000..cd2850472
--- /dev/null
+++ b/beta/src/content/reference/react/lazy.md
@@ -0,0 +1,211 @@
+---
+title: lazy
+---
+
+<Intro>
+
+`lazy` lets you defer loading component's code until it is rendered for the first time.
+
+```js
+const SomeComponent = lazy(load)
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `lazy(load)` {/*lazy*/}
+
+Call `lazy` outside your components to declare a lazy-loaded React component:
+
+```js
+import { lazy } from 'react';
+
+const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));
+```
+
+[See more examples below.](#usage)
+
+#### Parameters {/*parameters*/}
+
+* `load`: A function that returns a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) or some other *thenable* (a Promise-like object with a `then` method). React will not call `load` until the first time you attempt to render the returned component. After React first calls `load`, it will wait for it to resolve, and then render the resolved value as a React component. Both the returned Promise and the Promise's resolved value will be cached, so React will not call `load` more than once. If the Promise rejects, React will `throw` the rejection reason to let the closest Error Boundary above handle it.
+
+#### Returns {/*returns*/}
+
+`lazy` returns a React component that you can render in your tree. While the code for the lazy component is still loading, attempting to render it will *suspend.* Use [`<Suspense>`](/reference/react/Suspense) to display a loading indicator while it's loading.
+
+---
+
+### `load` function {/*load*/}
+
+#### Parameters {/*load-parameters*/}
+
+`load` receives no parameters.
+
+#### Returns {/*load-returns*/}
+
+You need to return a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) or some other *thenable* (a Promise-like object with a `then` method). It needs to eventually resolve to a valid React component type, such as a function, [`memo`](/reference/react/memo), or a [`forwardRef`](/reference/react/forwardRef) component.
+
+---
+
+## Usage {/*usage*/}
+
+### Lazy-loading components with Suspense {/*suspense-for-code-splitting*/}
+
+Usually, you import components with the static [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) declaration:
+
+```js
+import MarkdownPreview from './MarkdownPreview.js';
+```
+
+To defer loading this component's code until it's rendered for the first time, replace this import with:
+
+```js
+import { lazy } from 'react';
+
+const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));
+```
+
+This code relies on [dynamic `import()`,](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) which might require support from your bundler or framework.
+
+Now that your component's code loads on demand, you also need to specify what should be displayed while it is loading. You can do this by wrapping the lazy component or any of its parents into a [`<Suspense>`](/reference/react/Suspense) boundary:
+
+```js {1,4}
+<Suspense fallback={<Loading />}>
+  <h2>Preview</h2>
+  <MarkdownPreview />
+ </Suspense>
+```
+
+In this example, the code for `MarkdownPreview` won't be loaded until you attempt to render it. If `MarkdownPreview` hasn't loaded yet, `Loading` will be shown in its place. Try ticking the checkbox:
+
+<Sandpack>
+
+```js App.js
+import { useState, Suspense, lazy } from 'react';
+import Loading from './Loading.js';
+
+const MarkdownPreview = lazy(() => delayForDemo(import('./MarkdownPreview.js')));
+
+export default function MarkdownEditor() {
+  const [showPreview, setShowPreview] = useState(false);
+  const [markdown, setMarkdown] = useState('Hello, **world**!');
+  return (
+    <>
+      <textarea value={markdown} onChange={e => setMarkdown(e.target.value)} />
+      <label>
+        <input type="checkbox" checked={showPreview} onChange={e => setShowPreview(e.target.checked)} />
+        Show preview
+      </label>
+      <hr />
+      {showPreview && (
+        <Suspense fallback={<Loading />}>
+          <h2>Preview</h2>
+          <MarkdownPreview markdown={markdown} />
+        </Suspense>
+      )}
+    </>
+  );
+}
+
+// Add a fixed delay so you can see the loading state
+function delayForDemo(promise) {
+  return new Promise(resolve => {
+    setTimeout(resolve, 2000);
+  }).then(() => promise);
+}
+```
+
+```js Loading.js
+export default function Loading() {
+  return <p><i>Loading...</i></p>;
+}
+```
+
+```js MarkdownPreview.js
+import { Remarkable } from 'remarkable';
+
+const md = new Remarkable();
+
+export default function MarkdownPreview({ markdown }) {
+  return (
+    <div
+      className="content"
+      dangerouslySetInnerHTML={{__html: md.render(markdown)}}
+    />
+  );
+}
+```
+
+```json package.json hidden
+{
+  "dependencies": {
+    "immer": "1.7.3",
+    "react": "latest",
+    "react-dom": "latest",
+    "react-scripts": "latest",
+    "remarkable": "2.0.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+```css
+label {
+  display: block;
+}
+
+input, textarea {
+  margin-bottom: 10px;
+}
+
+body {
+  min-height: 200px;
+}
+```
+
+</Sandpack>
+
+This demo loads with an artificial delay. The next time you untick and tick the checkbox, `Preview` will be cached, so there will be no loading state displayed. To see the loading state again, click "Reset" on the sandbox.
+
+[Learn more about managing loading states with Suspense.](/reference/react/Suspense)
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+
+### My `lazy` component's state gets reset unexpectedly {/*my-lazy-components-state-gets-reset-unexpectedly*/}
+
+Do not declare `lazy` components *inside* other components:
+
+```js {4-5}
+import { lazy } from 'react';
+
+function Editor() {
+  // 🔴 Bad: This will cause all state to be reset on re-renders
+  const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));
+  // ...
+}
+```
+
+Instead, always declare them at the top level of your module:
+
+```js {3-4}
+import { lazy } from 'react';
+
+// ✅ Good: Declare lazy components outside of your components
+const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));
+
+function Editor() {
+  // ...
+}
+```
diff --git a/beta/src/content/reference/react/legacy.md b/beta/src/content/reference/react/legacy.md
new file mode 100644
index 000000000..3e13c983e
--- /dev/null
+++ b/beta/src/content/reference/react/legacy.md
@@ -0,0 +1,34 @@
+---
+title: "Legacy React APIs"
+---
+
+<Intro>
+
+These APIs are exported from the `react` package, but they are not recommended for use in the newly written code. See the linked individual API pages for the suggested alternatives.
+
+</Intro>
+
+---
+
+## Legacy APIs {/*legacy-apis*/}
+
+* [`Children`](/reference/react/Children) lets you manipulate and transform the JSX received as the `children` prop. [See alternatives.](/reference/react/Children#alternatives)
+* [`cloneElement`](/reference/react/cloneElement) lets you create a React element using another element as a starting point. [See alternatives.](/reference/react/cloneElement#alternatives)
+* [`Component`](/reference/react/Component) lets you define a React component as a JavaScript class. [See alternatives.](/reference/react/Component#alternatives)
+* [`createElement`](/reference/react/createElement) lets you create a React element. Typically, you'll use JSX instead.
+* [`createRef`](/reference/react/createRef) creates a ref object which can contain arbitrary value. [See alternatives.](/reference/react/createRef#alternatives)
+* [`isValidElement`](/reference/react/isValidElement) checks whether a value is a React element. Typically used with [`cloneElement`.](/reference/react/cloneElement)
+* [`PureComponent`](/reference/react/PureComponent) is similar to [`Component`,](/reference/react/Component) but it skip re-renders with same props. [See alternatives.](/reference/react/PureComponent#alternatives)
+
+
+---
+
+## Deprecated APIs {/*deprecated-apis*/}
+
+<Deprecated>
+
+These APIs will be removed in a future major version of React.
+
+</Deprecated>
+
+* [`createFactory`](/reference/react/createFactory) lets you create a function that produces React elements of a certain type.
\ No newline at end of file
diff --git a/beta/src/content/reference/react/memo.md b/beta/src/content/reference/react/memo.md
new file mode 100644
index 000000000..25f656f6b
--- /dev/null
+++ b/beta/src/content/reference/react/memo.md
@@ -0,0 +1,363 @@
+---
+title: memo
+---
+
+<Intro>
+
+`memo` lets you skip re-rendering a component when its props are unchanged.
+
+```
+const MemoizedComponent = memo(SomeComponent, arePropsEqual?)
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `memo(Component, arePropsEqual?)` {/*memo*/}
+
+Wrap a component in `memo` to get a *memoized* version of that component. This memoized version of your component will usually not be re-rendered when its parent component is re-rendered as long as its props have not changed. But React may still re-render it: memoization is only a performance optimization, not a guarantee.
+
+```js
+import { memo } from 'react';
+
+const SomeComponent = memo(function SomeComponent(props) {
+  // ...
+});
+```
+
+[See more examples below.](#usage)
+
+#### Parameters {/*parameters*/}
+
+* `Component`: The component that you want to memoize. The `memo` does not modify this component, but returns a new, memoized component instead. Any valid React component, including functions and [`forwardRef`](/reference/react/forwardRef) components, is accepted.
+
+* **optional** `arePropsEqual`: A function that accepts two arguments: the component's previous props, and its new props. It should return `true` if the old and new props are equal: that is, if the component will render the same output and behave in the same way with the new props as with the old. Otherwise it should return `false`.
+
+#### Returns {/*returns*/}
+
+`memo` returns a new React component. It behaves the same as the component provided to `memo` except that React will not always re-render it when its parent is being re-rendered unless its props have changed.
+
+---
+
+## Usage {/*usage*/}
+
+### Skipping re-rendering when props are unchanged {/*skipping-re-rendering-when-props-are-unchanged*/}
+
+React normally re-renders a component whenever its parent re-renders. With `memo`, you can create a component that React will not re-render when its parent re-renders so long as its new props are the same as the old props. Such a component is said to be *memoized*.
+
+To memoize a component, wrap it in a call to `memo` and use the value that it returns in place of your original component:
+
+```js
+const Greeting = memo(function Greeting({ name }) {
+  return <h1>Hello, {name}!</h1>;
+});
+
+export default Greeting;
+```
+
+A React component should always have [pure rendering logic.](/learn/keeping-components-pure) This means that it must return the same output if its props, state, and context haven't changed. By using `memo`, you are telling React that your component complies with this requirement, so React doesn't need to re-render as long as its props haven't changed. When you use `memo`, your component will still re-render if its own state changes or if a context that it's using changes.
+
+In this example, notice that the `Greeting` component re-renders whenever `name` is changed (because that's one of its props), but not when `address` is changed (because it's not passed to `Greeting` as a prop):
+
+<Sandpack>
+
+```js
+import { memo, useState } from 'react';
+
+export default function MyApp() {
+  const [name, setName] = useState('');
+  const [address, setAddress] = useState('');
+  return (
+    <>
+      <label>
+        Name{': '}
+        <input value={name} onChange={e => setName(e.target.value)} />
+      </label>
+      <label>
+        Address{': '}
+        <input value={address} onChange={e => setAddress(e.target.value)} />
+      </label>
+      <Greeting name={name} />
+    </>
+  );
+}
+
+const Greeting = memo(function Greeting({ name }) {
+  console.log("Greeting was rendered at", new Date().toLocaleTimeString());
+  return <h3>Hello{name && ', '}{name}!</h3>;
+});
+```
+
+```css
+label {
+  display: block;
+  margin-bottom: 16px;
+}
+```
+
+</Sandpack>
+
+<Note>
+
+**You should only rely on `memo` as a performance optimization.** If your code doesn't work without it, find the underlying problem and fix it first. Then you may add `memo` to improve performance.
+
+</Note>
+
+<DeepDive>
+
+#### Should you add memo everywhere? {/*should-you-add-memo-everywhere*/}
+
+If your app is like this site, and most interactions are coarse (like replacing a page or an entire section), memoization is usually unnecessary. On the other hand, if your app is more like a drawing editor, and most interactions are granular (like moving shapes), then you might find memoization very helpful. 
+
+Optimizing with `memo`  is only valuable when your component re-renders often with the same exact props, and its re-rendering logic is expensive. If there is no perceptible lag when your component re-renders, `memo` is unnecessary. Keep in mind that `memo` is completely useless if the props passed to your component are *always different,* such as if you pass an object or a plain function defined during rendering. This is why you will often need [`useMemo`](/reference/react/useMemo#skipping-re-rendering-of-components) and [`useCallback`](/reference/react/useCallback#skipping-re-rendering-of-components) together with `memo`.
+
+There is no benefit to wrapping a component in `memo` in other cases. There is no significant harm to doing that either, so some teams choose to not think about individual cases, and memoize as much as possible. The downside of this approach is that code becomes less readable. Also, not all memoization is effective: a single value that's "always new" is enough to break memoization for an entire component.
+
+**In practice, you can make a lot of memoization unnecessary by following a few principles:**
+
+1. When a component visually wraps other components, let it [accept JSX as children.](/learn/passing-props-to-a-component#passing-jsx-as-children) This way, when the wrapper component updates its own state, React knows that its children don't need to re-render.
+1. Prefer local state and don't [lift state up](/learn/sharing-state-between-components) any further than necessary. For example, don't keep transient state like forms and whether an item is hovered at the top of your tree or in a global state library.
+1. Keep your [rendering logic pure.](/learn/keeping-components-pure) If re-rendering a component causes a problem or produces some noticeable visual artifact, it's a bug in your component! Fix the bug instead of adding memoization.
+1. Avoid [unnecessary Effects that update state.](/learn/you-might-not-need-an-effect) Most performance problems in React apps are caused by chains of updates originating from Effects that cause your components to render over and over.
+1. Try to [remove unnecessary dependencies from your Effects.](/learn/removing-effect-dependencies) For example, instead of memoization, it's often simpler to move some object or a function inside an Effect or outside the component.
+
+If a specific interaction still feels laggy, [use the React Developer Tools profiler](/blog/2018/09/10/introducing-the-react-profiler.html) to see which components would benefit the most from memoization, and add memoization where needed. These principles make your components easier to debug and understand, so it's good to follow them in any case. In the long term, we're researching [doing granular memoization automatically](https://www.youtube.com/watch?v=lGEMwh32soc) to solve this once and for all.
+
+</DeepDive>
+
+---
+
+### Updating a memoized component using state {/*updating-a-memoized-component-using-state*/}
+
+Even when a component is memoized, it will still re-render when its own state changes. Memoization only has to do with props that are passed to the component from its parent.
+
+<Sandpack>
+
+```js
+import { memo, useState } from 'react';
+
+export default function MyApp() {
+  const [name, setName] = useState('');
+  const [address, setAddress] = useState('');
+  return (
+    <>
+      <label>
+        Name{': '}
+        <input value={name} onChange={e => setName(e.target.value)} />
+      </label>
+      <label>
+        Address{': '}
+        <input value={address} onChange={e => setAddress(e.target.value)} />
+      </label>
+      <Greeting name={name} />
+    </>
+  );
+}
+
+const Greeting = memo(function Greeting({ name }) {
+  console.log('Greeting was rendered at', new Date().toLocaleTimeString());
+  const [greeting, setGreeting] = useState('Hello');
+  return (
+    <>
+      <h3>{greeting}{name && ', '}{name}!</h3>
+      <GreetingSelector value={greeting} onChange={setGreeting} />
+    </>
+  );
+});
+
+function GreetingSelector({ value, onChange }) {
+  return (
+    <>
+      <label>
+        <input
+          type="radio"
+          checked={value === 'Hello'}
+          onChange={e => onChange('Hello')}
+        />
+        Regular greeting
+      </label>
+      <label>
+        <input
+          type="radio"
+          checked={value === 'Hello and welcome'}
+          onChange={e => onChange('Hello and welcome')}
+        />
+        Enthusiastic greeting
+      </label>
+    </>
+  );
+}
+```
+
+```css
+label {
+  display: block;
+  margin-bottom: 16px;
+}
+```
+
+</Sandpack>
+
+If you set a state variable to its current value, React will skip re-rendering your component even without `memo`. You may still see your component function being called an extra time, but the result will be discarded.
+
+---
+
+### Updating a memoized component using a context {/*updating-a-memoized-component-using-a-context*/}
+
+Even when a component is memoized, it will still re-render when a context that it's using changes. Memoization only has to do with props that are passed to the component from its parent.
+
+<Sandpack>
+
+```js
+import { createContext, memo, useContext, useState } from 'react';
+
+const ThemeContext = createContext(null);
+
+export default function MyApp() {
+  const [theme, setTheme] = useState('dark');
+
+  function handleClick() {
+    setTheme(theme === 'dark' ? 'light' : 'dark'); 
+  }
+
+  return (
+    <ThemeContext.Provider value={theme}>
+      <button onClick={handleClick}>
+        Switch theme
+      </button>
+      <Greeting name="Taylor" />
+    </ThemeContext.Provider>
+  );
+}
+
+const Greeting = memo(function Greeting({ name }) {
+  console.log("Greeting was rendered at", new Date().toLocaleTimeString());
+  const theme = useContext(ThemeContext);
+  return (
+    <h3 className={theme}>Hello, {name}!</h3>
+  );
+});
+```
+
+```css
+label {
+  display: block;
+  margin-bottom: 16px;
+}
+
+.light {
+  color: black;
+  background-color: white;
+}
+
+.dark {
+  color: white;
+  background-color: black;
+}
+```
+
+</Sandpack>
+
+To make your component re-render only when a _part_ of some context changes, split your component in two. Read what you need from the context in the outer component, and pass it down to a memoized child as a prop.
+
+---
+
+### Minimizing props changes {/*minimizing-props-changes*/}
+
+When you use `memo`, your component re-renders whenever any prop is not *shallowly equal* to what it was previously. This means that React compares every prop in your component with the previous value of that prop using the [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison. Note that `Object.is(3, 3)` is `true`, but `Object.is({}, {})` is `false`.
+
+
+To get the most out of `memo`, minimize the times that the props change. For example, if the prop is an object, prevent the parent component from re-creating that object every time by using [`useMemo`:](/reference/react/useMemo)
+
+```js {5-8}
+function Page() {
+  const [name, setName] = useState('Taylor');
+  const [age, setAge] = useState(42);
+
+  const person = useMemo(
+    () => ({ name, age }),
+    [name, age]
+  );
+
+  return <Profile person={person} />;
+}
+
+const Profile = memo(function Profile({ person }) {
+  // ...
+});
+```
+
+A better way to minimize props changes is to make sure the component accepts the minimum necessary information in its props. For example, it could accept individual values instead of a whole object:
+
+```js {4,7}
+function Page() {
+  const [name, setName] = useState('Taylor');
+  const [age, setAge] = useState(42);
+  return <Profile name={name} age={age} />;
+}
+
+const Profile = memo(function Profile({ name, age }) {
+  // ...
+});
+```
+
+Even individual values can sometimes be projected to ones that change less frequently. For example, here a component accepts a boolean indicating the presence of a value rather than the value itself:
+
+```js {3}
+function GroupsLanding({ person }) {
+  const hasGroups = person.groups !== null;
+  return <CallToAction hasGroups={hasGroups} />;
+}
+
+const CallToAction = memo(function CallToAction({ hasGroups }) {
+  // ...
+});
+```
+
+When you need to pass a function to memoized component, either declare it outside your component so that it never changes, or [`useCallback`](/reference/react/useCallback#skipping-re-rendering-of-components) to cache its definition between re-renders.
+
+---
+
+### Specifying a custom comparison function {/*specifying-a-custom-comparison-function*/}
+
+In rare cases it may be infeasible to minimize the props changes of a memoized component. In that case, you can provide a custom comparison function, which React will use to compare the old and new props instead of using shallow equality. This function is passed as a second argument to `memo`. It should return `true` only if the new props would result in the same output as the old props; otherwise it should return `false`.
+
+```js {3}
+const Chart = memo(function Chart({ dataPoints }) {
+  // ...
+}, arePropsEqual);
+
+function arePropsEqual(oldProps, newProps) {
+  return (
+    oldProps.dataPoints.length === newProps.dataPoints.length &&
+    oldProps.dataPoints.every((oldPoint, index) => {
+      const newPoint = newProps.dataPoints[index];
+      return oldPoint.x === newPoint.x && oldPoint.y === newPoint.y;
+    })
+  );
+}
+```
+
+If you do this, use the Performance panel in your browser developer tools to make sure that your comparison function is actually faster than re-rendering the component. You might be surprised.
+
+When you do performance measurements, make sure that React is running in the production mode.
+
+<Pitfall>
+
+If you provide a custom `arePropsEqual` implementation, **you must compare every prop, including functions.** Functions often [close over](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) the props and state of parent components. If you return `true` when `oldProps.onClick !== newProps.onClick`, your component will keep "seeing" the props and state from a previous render inside its `onClick` handler, leading to very confusing bugs.
+
+Avoid doing deep equality checks inside `arePropsEqual` unless you are 100% sure that the data structure you're working with has a known limited depth. **Deep equality checks can become incredibly slow** and can freeze your app for many seconds if someone changes the data structure later.
+
+</Pitfall>
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+### My component re-renders when a prop is an object, array, or function {/*my-component-rerenders-when-a-prop-is-an-object-or-array*/}
+
+React compares old and new props by shallow equality: that is, it considers whether each new prop is reference-equal to the old prop. If you create a new object or array each time the parent is re-rendered, even if the individual elements are each the same, React will still consider it to be changed. Similarly, if you create a new function when rendering the parent component, React will consider it to have changed even if the function has the same definition.  Avoid this by [simplifying props or memoizing props in the parent component](#minimizing-props-changes).
diff --git a/beta/src/content/reference/react/startTransition.md b/beta/src/content/reference/react/startTransition.md
new file mode 100644
index 000000000..32fef7a97
--- /dev/null
+++ b/beta/src/content/reference/react/startTransition.md
@@ -0,0 +1,97 @@
+---
+title: startTransition
+---
+
+<Intro>
+
+`startTransition` lets you update the state without blocking the UI.
+
+```js
+startTransition(scope)
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `startTransition(scope)` {/*starttransitionscope*/}
+
+The `startTransition` function lets you mark a state update as a transition.
+
+```js {7,9}
+import { startTransition } from 'react';
+
+function TabContainer() {
+  const [tab, setTab] = useState('about');
+
+  function selectTab(nextTab) {
+    startTransition(() => {
+      setTab(nextTab);
+    });
+  }
+  // ...
+}
+```
+
+[See more examples below.](#usage)
+
+#### Parameters {/*parameters*/}
+
+* `scope`: A function that updates some state by calling one or more [`set` functions.](/reference/react/useState#setstate) React immediately calls `scope` with no parameters and marks all state updates scheduled synchronously during the `scope` function call as transitions. They will be [non-blocking](/reference/react/useTransition#marking-a-state-update-as-a-non-blocking-transition) and [will not display unwanted loading indicators.](/reference/react/useTransition#preventing-unwanted-loading-indicators)
+
+#### Returns {/*returns*/}
+
+`startTransition` does not return anything.
+
+#### Caveats {/*caveats*/}
+
+* `startTransition` does not provide a way to track whether a transition is pending. To show a pending indicator while the transition is ongoing, you need [`useTransition`](/reference/react/useTransition) instead.
+
+* You can wrap an update into a transition only if you have access to the `set` function of that state. If you want to start a transition in response to some prop or a custom Hook return value, try [`useDeferredValue`](/reference/react/usedeferredvalue) instead.
+
+* The function you pass to `startTransition` must be synchronous. React immediately executes this function, marking all state updates that happen while it executes as transitions. If you try to perform more state updates later (for example, in a timeout), they won't be marked as transitions.
+
+* A state update marked as a transition will be interrupted by other state updates. For example, if you update a chart component inside a transition, but then start typing into an input while the chart is in the middle of a re-render, React will restart the rendering work on the chart component after handling the input state update.
+
+* Transition updates can't be used to control text inputs.
+
+* If there are multiple ongoing transitions, React currently batches them together. This is a limitation that will likely be removed in a future release.
+
+---
+
+## Usage {/*usage*/}
+
+### Marking a state update as a non-blocking transition {/*marking-a-state-update-as-a-non-blocking-transition*/}
+
+You can mark a state update as a *transition* by wrapping it in a `startTransition` call:
+
+```js {7,9}
+import { startTransition } from 'react';
+
+function TabContainer() {
+  const [tab, setTab] = useState('about');
+
+  function selectTab(nextTab) {
+    startTransition(() => {
+      setTab(nextTab);
+    });
+  }
+  // ...
+}
+```
+
+Transitions let you keep the user interface updates responsive even on slow devices.
+
+With a transition, your UI stays responsive in the middle of a re-render. For example, if the user clicks a tab but then change their mind and click another tab, they can do that without waiting for the first re-render to finish.
+
+<Note>
+
+`startTransition` is very similar to [`useTransition`](/reference/react/useTransition), except that it does not provide the `isPending` flag to track whether a transition is ongoing. You can call `startTransition` when `useTransition` is not available. For example, `startTransition` works outside components, such as from a data library.
+
+[Learn about transitions and see examples on the `useTransition` page.](/reference/react/useTransition)
+
+</Note>
diff --git a/beta/src/content/reference/react/useCallback.md b/beta/src/content/reference/react/useCallback.md
new file mode 100644
index 000000000..de659d9ce
--- /dev/null
+++ b/beta/src/content/reference/react/useCallback.md
@@ -0,0 +1,931 @@
+---
+title: useCallback
+---
+
+<Intro>
+
+`useCallback` is a React Hook that lets you cache a function definition between re-renders.
+
+```js
+const cachedFn = useCallback(fn, dependencies)
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `useCallback(fn, dependencies)` {/*usecallback*/}
+
+Call `useCallback` at the top level of your component to cache a function definition between re-renders:
+
+```js {4,9}
+import { useCallback } from 'react';
+
+export default function ProductPage({ productId, referrer, theme }) {
+  const handleSubmit = useCallback((orderDetails) => {
+    post('/product/' + productId + '/buy', {
+      referrer,
+      orderDetails,
+    });
+  }, [productId, referrer]);
+```
+
+[See more examples below.](#usage)
+
+#### Parameters {/*parameters*/}
+
+* `fn`: The function value that you want to cache. It can take any arguments and return any values. React will return (not call!) your function back to you during the initial render. On subsequent renders, React will give you the same function again if the `dependencies` have not changed since the last render. Otherwise, it will give you the function that you have passed during the current render, and store it in case it can be reused later. React will not call your function. The function is returned to you so you can decide when and whether to call it.
+
+* `dependencies`: The list of all reactive values referenced inside of the `fn` code. Reactive values include props, state, and all the variables and functions declared directly inside your component body. If your linter is [configured for React](/learn/editor-setup#linting), it will verify that every reactive value is correctly specified as a dependency. The list of dependencies must have a constant number of items and be written inline like `[dep1, dep2, dep3]`. React will compare each dependency with its previous value using the [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison algorithm.
+
+#### Returns {/*returns*/}
+
+On the initial render, `useCallback` returns the `fn` function you have passed.
+
+During subsequent renders, it will either return an already stored `fn`  function from the last render (if the dependencies haven't changed), or return the `fn` function you have passed during this render.
+
+#### Caveats {/*caveats*/}
+
+* `useCallback` is a Hook, so you can only call it **at the top level of your component** or your own Hooks. You can't call it inside loops or conditions. If you need that, extract a new component and move the state into it.
+* React **will not throw away the cached function unless there is a specific reason to do that.** For example, in development, React throws away the cache when you edit the file of your component. Both in development and in production, React will throw away the cache if your component suspends during the initial mount. In the future, React may add more features that take advantage of throwing away the cache--for example, if React adds built-in support for virtualized lists in the future, it would make sense to throw away the cache for items that scroll out of the virtualized table viewport. This should match your expectations if you rely on `useCallback` as a performance optimization. Otherwise, a [state variable](/reference/react/useState#im-trying-to-set-state-to-a-function-but-it-gets-called-instead) or a [ref](/reference/react/useRef#avoiding-recreating-the-ref-contents) may be more appropriate.
+
+---
+
+## Usage {/*usage*/}
+
+### Skipping re-rendering of components {/*skipping-re-rendering-of-components*/}
+
+When you optimize rendering performance, you will sometimes need to cache the functions that you pass to child components. Let's first look at the syntax for how to do this, and then see in which cases it's useful.
+
+To cache a function between re-renders of your component, wrap its definition into the `useCallback` Hook:
+
+```js [[3, 4, "handleSubmit"], [2, 9, "[productId, referrer]"]]
+import { useCallback } from 'react';
+
+function ProductPage({ productId, referrer, theme }) {
+  const handleSubmit = useCallback((orderDetails) => {
+    post('/product/' + productId + '/buy', {
+      referrer,
+      orderDetails,
+    });
+  }, [productId, referrer]);
+  // ...
+```
+
+You need to pass two things to `useCallback`:
+
+1. A function definition that you want to cache between re-renders.
+2. A <CodeStep step={2}>list of dependencies</CodeStep> including every value within your component that's used inside your function.
+
+On the initial render, the <CodeStep step={3}>returned function</CodeStep> you'll get from `useCallback` will be the function you passed.
+
+On the following renders, React will compare the <CodeStep step={2}>dependencies</CodeStep> with the dependencies you passed during the previous render. If none of the dependencies have changed (compared with [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is)), `useCallback` will return the same function as before. Otherwise, `useCallback` will return the function you passed on *this* render.
+
+In other words, `useCallback` caches a function between re-renders until its dependencies change.
+
+**Let's walk through an example to see when this is useful.**
+
+Say you're passing a `handleSubmit` function down from the `ProductPage` to the `ShippingForm` component:
+
+```js {5}
+function ProductPage({ productId, referrer, theme }) {
+  // ...
+  return (
+    <div className={theme}>
+      <ShippingForm onSubmit={handleSubmit} />
+    </div>
+  );
+```
+
+You've noticed that toggling the `theme` prop freezes the app for a moment, but if you remove `<ShippingForm />` from your JSX, it feels fast. This tells you that it's worth trying to optimize the `ShippingForm` component.
+
+**By default, when a component re-renders, React re-renders all of its children recursively.** This is why, when `ProductPage` re-renders with a different `theme`, the `ShippingForm` component *also* re-renders. This is fine for components that don't require much calculation to re-render. But if you've verified that a re-render is slow, you can tell `ShippingForm` to skip re-rendering when its props are the same as on last render by wrapping it in [`memo`:](/reference/react/memo)
+
+```js {3,5}
+import { memo } from 'react';
+
+const ShippingForm = memo(function ShippingForm({ onSubmit }) {
+  // ...
+});
+```
+
+**With this change, `ShippingForm` will skip re-rendering if all of its props are the *same* as on the last render.** This is where caching a function becomes important! Imagine that you defined `handleSubmit` without `useCallback`:
+
+```js {2,3,8,12-13}
+function ProductPage({ productId, referrer, theme }) {
+  // Every time the theme changes, this will be a different function...
+  function handleSubmit(orderDetails) {
+    post('/product/' + productId + '/buy', {
+      referrer,
+      orderDetails,
+    });
+  }
+  
+  return (
+    <div className={theme}>
+      {/* ... so ShippingForm's props will never be the same, and it will re-render every time */}
+      <ShippingForm onSubmit={handleSubmit} />
+    </div>
+  );
+}
+```
+
+**In JavaScript, a `function () {}` or `() => {}` always creates a _different_ function,** similar to how the `{}` object literal always creates a new object. Normally, this wouldn't be a problem, but it means that `ShippingForm` props will never be the same, and your [`memo`](/reference/react/memo) optimization won't work. This is where `useCallback` comes in handy:
+
+```js {2,3,8,12-13}
+function ProductPage({ productId, referrer, theme }) {
+  // Tell React to cache your function between re-renders...
+  const handleSubmit = useCallback((orderDetails) => {
+    post('/product/' + productId + '/buy', {
+      referrer,
+      orderDetails,
+    });
+  }, [productId, referrer]); // ...so as long as these dependencies don't change...
+
+  return (
+    <div className={theme}>
+      {/* ...ShippingForm will receive the same props and can skip re-rendering */}
+      <ShippingForm onSubmit={handleSubmit} />
+    </div>
+  );
+}
+```
+
+**By wrapping `handleSubmit` in `useCallback`, you ensure that it's the *same* function between the re-renders** (until dependencies change). You don't *have to* wrap a function in `useCallback` unless you do it for some specific reason. In this example, the reason is that you pass it to a component wrapped in [`memo`,](/reference/react/memo) and this lets it skip re-rendering. There are a few other reasons you might need `useCallback` which are described further on this page.
+
+<Note>
+
+**You should only rely on `useCallback` as a performance optimization.** If your code doesn't work without it, find the underlying problem and fix it first. Then you may add `useCallback` to improve performance.
+
+</Note>
+
+<DeepDive>
+
+#### How is useCallback related to useMemo? {/*how-is-usecallback-related-to-usememo*/}
+
+You will often see [`useMemo`](/reference/react/useMemo) alongside `useCallback`. They are both useful when you're trying to optimize a child component. They let you [memoize](https://en.wikipedia.org/wiki/Memoization) (or, in other words, cache) something you're passing down:
+
+```js {6-8,10-15,19}
+import { useMemo, useCallback } from 'react';
+
+function ProductPage({ productId, referrer }) {
+  const product = useData('/product/' + productId);
+
+  const requirements = useMemo(() => { // Calls your function and caches its result
+    return computeRequirements(product);
+  }, [product]);
+
+  const handleSubmit = useCallback((orderDetails) => { // Caches your function itself
+    post('/product/' + productId + '/buy', {
+      referrer,
+      orderDetails,
+    });
+  }, [productId, referrer]);
+
+  return (
+    <div className={theme}>
+      <ShippingForm requirements={requirements} onSubmit={handleSubmit} />
+    </div>
+  );
+}
+```
+
+The difference is in *what* they're letting you cache:
+
+* **[`useMemo`](/reference/react/useMemo) caches the *result* of calling your function.** In this example, it caches the result of calling `computeRequirements(product)` so that it doesn't change unless `product` has changed. This lets you pass the `requirements` object down without unnecessarily re-rendering `ShippingForm`. When necessary, React will call the function you've passed during rendering to calculate the result.
+* **`useCallback` caches *the function itself.*** Unlike `useMemo`, it does not call the function you provide. Instead, it caches the function you provided so that `handleSubmit` *itself* doesn't change unless `productId` or `referrer` has changed. This lets you pass the `handleSubmit` function down without unnecessarily re-rendering `ShippingForm`. Your code won't be called until the user submits the form.
+
+If you're already familiar with [`useMemo`,](/reference/react/useMemo) you might find it helpful to think of `useCallback` as this:
+
+```js
+// Simplified implementation (inside React)
+function useCallback(fn, dependencies) {
+  return useMemo(() => fn, dependencies);
+}
+```
+
+[Read more about the difference between `useMemo` and `useCallback`.](/reference/react/useMemo#memoizing-a-function)
+
+</DeepDive>
+
+<DeepDive>
+
+#### Should you add useCallback everywhere? {/*should-you-add-usecallback-everywhere*/}
+
+If your app is like this site, and most interactions are coarse (like replacing a page or an entire section), memoization is usually unnecessary. On the other hand, if your app is more like a drawing editor, and most interactions are granular (like moving shapes), then you might find memoization very helpful. 
+
+Caching a function with `useCallback`  is only valuable in a few cases:
+
+- You pass it as a prop to a component wrapped in [`memo`.](/reference/react/memo) You want to skip re-rendering if the value hasn't changed. Memoization lets your component re-render only when dependencies aren't the same.
+- The function you're passing is later used as a dependency of some Hook. For example, another function wrapped in `useCallback` depends on it, or you depend on this function from [`useEffect.`](/reference/react/useEffect)
+
+There is no benefit to wrapping a function in `useCallback` in other cases. There is no significant harm to doing that either, so some teams choose to not think about individual cases, and memoize as much as possible. The downside of this approach is that code becomes less readable. Also, not all memoization is effective: a single value that's "always new" is enough to break memoization for an entire component.
+
+Note that `useCallback` does not prevent *creating* the function. You're always creating a function (and that's fine!), but React ignores it and gives you back a cached function if dependencies haven't changed.
+
+**In practice, you can make a lot of memoization unnecessary by following a few principles:**
+
+1. When a component visually wraps other components, let it [accept JSX as children.](/learn/passing-props-to-a-component#passing-jsx-as-children) This way, when the wrapper component updates its own state, React knows that its children don't need to re-render.
+1. Prefer local state and don't [lift state up](/learn/sharing-state-between-components) any further than necessary. For example, don't keep transient state like forms and whether an item is hovered at the top of your tree or in a global state library.
+1. Keep your [rendering logic pure.](/learn/keeping-components-pure) If re-rendering a component causes a problem or produces some noticeable visual artifact, it's a bug in your component! Fix the bug instead of adding memoization.
+1. Avoid [unnecessary Effects that update state.](/learn/you-might-not-need-an-effect) Most performance problems in React apps are caused by chains of updates originating from Effects that cause your components to render over and over.
+1. Try to [remove unnecessary dependencies from your Effects.](/learn/removing-effect-dependencies) For example, instead of memoization, it's often simpler to move some object or a function inside an Effect or outside the component.
+
+If a specific interaction still feels laggy, [use the React Developer Tools profiler](/blog/2018/09/10/introducing-the-react-profiler.html) to see which components would benefit the most from memoization, and add memoization where needed. These principles make your components easier to debug and understand, so it's good to follow them in any case. In the long term, we're researching [doing granular memoization automatically](https://www.youtube.com/watch?v=lGEMwh32soc) to solve this once and for all.
+
+</DeepDive>
+
+<Recipes titleText="The difference between useCallback and declaring a function directly" titleId="examples-rerendering">
+
+#### Skipping re-rendering with `useCallback` and `memo` {/*skipping-re-rendering-with-usecallback-and-memo*/}
+
+In this example, the `ShippingForm` component is **artificially slowed down** so that you can see what happens when a React component you're rendering is genuinely slow. Try incrementing the counter and toggling the theme.
+
+Incrementing the counter feels slow because it forces the slowed down `ShippingForm` to re-render. That's expected because the counter has changed, and so you need to reflect the user's new choice on the screen.
+
+Next, try toggling the theme. **Thanks to `useCallback` together with [`memo`](/reference/react/memo), it’s fast despite the artificial slowdown!** `ShippingForm` skipped re-rendering because the `handleSubmit` function has not changed. The `handleSubmit` function has not changed because both `productId` and `referral` (your `useCallback` dependencies) haven't changed since last render.
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+import ProductPage from './ProductPage.js';
+
+export default function App() {
+  const [isDark, setIsDark] = useState(false);
+  return (
+    <>
+      <label>
+        <input
+          type="checkbox"
+          checked={isDark}
+          onChange={e => setIsDark(e.target.checked)}
+        />
+        Dark mode
+      </label>
+      <hr />
+      <ProductPage
+        referrerId="wizard_of_oz"
+        productId={123}
+        theme={isDark ? 'dark' : 'light'}
+      />
+    </>
+  );
+}
+```
+
+```js ProductPage.js active
+import { useCallback } from 'react';
+import ShippingForm from './ShippingForm.js';
+
+export default function ProductPage({ productId, referrer, theme }) {
+  const handleSubmit = useCallback((orderDetails) => {
+    post('/product/' + productId + '/buy', {
+      referrer,
+      orderDetails,
+    });
+  }, [productId, referrer]);
+
+  return (
+    <div className={theme}>
+      <ShippingForm onSubmit={handleSubmit} />
+    </div>
+  );
+}
+
+function post(url, data) {
+  // Imagine this sends a request...
+  console.log('POST /' + url);
+  console.log(data);
+}
+```
+
+```js ShippingForm.js
+import { memo, useState } from 'react';
+
+const ShippingForm = memo(function ShippingForm({ onSubmit }) {
+  const [count, setCount] = useState(1);
+
+  console.log('[ARTIFICIALLY SLOW] Rendering <ShippingForm />');
+  let startTime = performance.now();
+  while (performance.now() - startTime < 500) {
+    // Do nothing for 500 ms to emulate extremely slow code
+  }
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    const formData = new FormData(e.target);
+    const orderDetails = {
+      ...Object.fromEntries(formData),
+      count
+    };
+    onSubmit(orderDetails);
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <p><b>Note: <code>ShippingForm</code> is artificially slowed down!</b></p>
+      <label>
+        Number of items:
+        <button type="button" onClick={() => setCount(count - 1)}>–</button>
+        {count}
+        <button type="button" onClick={() => setCount(count + 1)}>+</button>
+      </label>
+      <label>
+        Street:
+        <input name="street" />
+      </label>
+      <label>
+        City:
+        <input name="city" />
+      </label>
+      <label>
+        Postal code:
+        <input name="zipCode" />
+      </label>
+      <button type="submit">Submit</button>
+    </form>
+  );
+});
+
+export default ShippingForm;
+```
+
+```css
+label {
+  display: block; margin-top: 10px;
+}
+
+input {
+  margin-left: 5px;
+}
+
+button[type="button"] {
+  margin: 5px;
+}
+
+.dark {
+  background-color: black;
+  color: white;
+}
+
+.light {
+  background-color: white;
+  color: black;
+}
+```
+
+</Sandpack>
+
+<Solution />
+
+#### Always re-rendering a component {/*always-re-rendering-a-component*/}
+
+In this example, the `ShoppingForm` implementation is also **artificially slowed down** so that you can see what happens when some React component you're rendering is genuinely slow. Try incrementing the counter and toggling the theme.
+
+Unlike in the previous example, toggling the theme is also slow now! This is because **there is no `useCallback` call in this version,** so `handleSubmit` is always a new function, and the slowed down `ShoppingForm` component can't skip re-rendering.
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+import ProductPage from './ProductPage.js';
+
+export default function App() {
+  const [isDark, setIsDark] = useState(false);
+  return (
+    <>
+      <label>
+        <input
+          type="checkbox"
+          checked={isDark}
+          onChange={e => setIsDark(e.target.checked)}
+        />
+        Dark mode
+      </label>
+      <hr />
+      <ProductPage
+        referrerId="wizard_of_oz"
+        productId={123}
+        theme={isDark ? 'dark' : 'light'}
+      />
+    </>
+  );
+}
+```
+
+```js ProductPage.js active
+import ShippingForm from './ShippingForm.js';
+
+export default function ProductPage({ productId, referrer, theme }) {
+  function handleSubmit(orderDetails) {
+    post('/product/' + productId + '/buy', {
+      referrer,
+      orderDetails,
+    });
+  }
+
+  return (
+    <div className={theme}>
+      <ShippingForm onSubmit={handleSubmit} />
+    </div>
+  );
+}
+
+function post(url, data) {
+  // Imagine this sends a request...
+  console.log('POST /' + url);
+  console.log(data);
+}
+```
+
+```js ShippingForm.js
+import { memo, useState } from 'react';
+
+const ShippingForm = memo(function ShippingForm({ onSubmit }) {
+  const [count, setCount] = useState(1);
+
+  console.log('[ARTIFICIALLY SLOW] Rendering <ShippingForm />');
+  let startTime = performance.now();
+  while (performance.now() - startTime < 500) {
+    // Do nothing for 500 ms to emulate extremely slow code
+  }
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    const formData = new FormData(e.target);
+    const orderDetails = {
+      ...Object.fromEntries(formData),
+      count
+    };
+    onSubmit(orderDetails);
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <p><b>Note: <code>ShippingForm</code> is artificially slowed down!</b></p>
+      <label>
+        Number of items:
+        <button type="button" onClick={() => setCount(count - 1)}>–</button>
+        {count}
+        <button type="button" onClick={() => setCount(count + 1)}>+</button>
+      </label>
+      <label>
+        Street:
+        <input name="street" />
+      </label>
+      <label>
+        City:
+        <input name="city" />
+      </label>
+      <label>
+        Postal code:
+        <input name="zipCode" />
+      </label>
+      <button type="submit">Submit</button>
+    </form>
+  );
+});
+
+export default ShippingForm;
+```
+
+```css
+label {
+  display: block; margin-top: 10px;
+}
+
+input {
+  margin-left: 5px;
+}
+
+button[type="button"] {
+  margin: 5px;
+}
+
+.dark {
+  background-color: black;
+  color: white;
+}
+
+.light {
+  background-color: white;
+  color: black;
+}
+```
+
+</Sandpack>
+
+
+However, here is the same code **with the artificial slowdown removed.** Does the lack of `useCallback` feel noticeable or not?
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+import ProductPage from './ProductPage.js';
+
+export default function App() {
+  const [isDark, setIsDark] = useState(false);
+  return (
+    <>
+      <label>
+        <input
+          type="checkbox"
+          checked={isDark}
+          onChange={e => setIsDark(e.target.checked)}
+        />
+        Dark mode
+      </label>
+      <hr />
+      <ProductPage
+        referrerId="wizard_of_oz"
+        productId={123}
+        theme={isDark ? 'dark' : 'light'}
+      />
+    </>
+  );
+}
+```
+
+```js ProductPage.js active
+import ShippingForm from './ShippingForm.js';
+
+export default function ProductPage({ productId, referrer, theme }) {
+  function handleSubmit(orderDetails) {
+    post('/product/' + productId + '/buy', {
+      referrer,
+      orderDetails,
+    });
+  }
+
+  return (
+    <div className={theme}>
+      <ShippingForm onSubmit={handleSubmit} />
+    </div>
+  );
+}
+
+function post(url, data) {
+  // Imagine this sends a request...
+  console.log('POST /' + url);
+  console.log(data);
+}
+```
+
+```js ShippingForm.js
+import { memo, useState } from 'react';
+
+const ShippingForm = memo(function ShippingForm({ onSubmit }) {
+  const [count, setCount] = useState(1);
+
+  console.log('Rendering <ShippingForm />');
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    const formData = new FormData(e.target);
+    const orderDetails = {
+      ...Object.fromEntries(formData),
+      count
+    };
+    onSubmit(orderDetails);
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <label>
+        Number of items:
+        <button type="button" onClick={() => setCount(count - 1)}>–</button>
+        {count}
+        <button type="button" onClick={() => setCount(count + 1)}>+</button>
+      </label>
+      <label>
+        Street:
+        <input name="street" />
+      </label>
+      <label>
+        City:
+        <input name="city" />
+      </label>
+      <label>
+        Postal code:
+        <input name="zipCode" />
+      </label>
+      <button type="submit">Submit</button>
+    </form>
+  );
+});
+
+export default ShippingForm;
+```
+
+```css
+label {
+  display: block; margin-top: 10px;
+}
+
+input {
+  margin-left: 5px;
+}
+
+button[type="button"] {
+  margin: 5px;
+}
+
+.dark {
+  background-color: black;
+  color: white;
+}
+
+.light {
+  background-color: white;
+  color: black;
+}
+```
+
+</Sandpack>
+
+
+Quite often, code without memoization works fine. If your interactions are fast enough, you don't need memoization.
+
+Keep in mind that you need to run React in production mode, disable [React Developer Tools](/learn/react-developer-tools), and use devices similar to the ones your app's users have in order to get a realistic sense of what's actually slowing down your app.
+
+<Solution />
+
+</Recipes>
+
+---
+
+### Updating state from a memoized callback {/*updating-state-from-a-memoized-callback*/}
+
+Sometimes, you might need to update state based on previous state from a memoized callback.
+
+This `handleAddTodo` function specifies `todos` as a dependency because it computes the next todos from it:
+
+```js {6,7}
+function TodoList() {
+  const [todos, setTodos] = useState([]);
+
+  const handleAddTodo = useCallback((text) => {
+    const newTodo = { id: nextId++, text };
+    setTodos([...todos, newTodo]);
+  }, [todos]);
+  // ...
+```
+
+You'll usually want your memoized functions to have as few dependencies as possible. When you read some state only to calculate the next state, you can remove that dependency by passing an [updater function](/reference/react/useState#updating-state-based-on-the-previous-state) instead:
+
+```js {6,7}
+function TodoList() {
+  const [todos, setTodos] = useState([]);
+
+  const handleAddTodo = useCallback((text) => {
+    const newTodo = { id: nextId++, text };
+    setTodos(todos => [...todos, newTodo]);
+  }, []); // ✅ No need for the todos dependency
+  // ...
+```
+
+Here, instead of making `todos` a dependency of your function and reading it there, you pass an instruction about *how* to update the state (`todos => [...todos, newTodo]`) to React. [Read more about updater functions.](/reference/react/useState#updating-state-based-on-the-previous-state)
+
+---
+
+### Preventing an Effect from firing too often {/*preventing-an-effect-from-firing-too-often*/}
+
+Sometimes, you might want to call a function from inside an [Effect:](/learn/synchronizing-with-effects)
+
+```js {4-9,12}
+function ChatRoom({ roomId }) {
+  const [message, setMessage] = useState('');
+
+  function createOptions() {
+    return {
+      serverUrl: 'https://localhost:1234',
+      roomId: roomId
+    };
+  }
+
+  useEffect(() => {
+    const options = createOptions();
+    const connection = createConnection();
+    connection.connect();
+    // ...
+```
+
+This creates a problem. [Every reactive value must be declared as a dependency of your Effect.](/learn/lifecycle-of-reactive-effects#react-verifies-that-you-specified-every-reactive-value-as-a-dependency) However, if you declare `createOptions` as a dependency, it will cause your Effect to constantly reconnect to the chat room:
+
+
+```js {6}
+  useEffect(() => {
+    const options = createOptions();
+    const connection = createConnection();
+    connection.connect();
+    return () => connection.disconnect();
+  }, [createOptions]); // 🔴 Problem: This dependency changes on every render
+  // ...
+```
+
+To solve this, you can wrap the function you need to call from an Effect into `useCallback`:
+
+```js {4-9,16}
+function ChatRoom({ roomId }) {
+  const [message, setMessage] = useState('');
+
+  const createOptions = useCallback(() => {
+    return {
+      serverUrl: 'https://localhost:1234',
+      roomId: roomId
+    };
+  }, [roomId]); // ✅ Only changes when roomId changes
+
+  useEffect(() => {
+    const options = createOptions();
+    const connection = createConnection();
+    connection.connect();
+    return () => connection.disconnect();
+  }, [createOptions]); // ✅ Only changes when createOptions changes
+  // ...
+```
+
+This ensures that the `createOptions` function is the same between re-renders if the `roomId` is the same. **However, it's even better to remove the need for a function dependency.** Move your function *inside* the Effect:
+
+```js {5-10,16}
+function ChatRoom({ roomId }) {
+  const [message, setMessage] = useState('');
+
+  useEffect(() => {
+    function createOptions() { // ✅ No need for useCallback or function dependencies!
+      return {
+        serverUrl: 'https://localhost:1234',
+        roomId: roomId
+      };
+    }
+
+    const options = createOptions();
+    const connection = createConnection();
+    connection.connect();
+    return () => connection.disconnect();
+  }, [roomId]); // ✅ Only changes when roomId changes
+  // ...
+```
+
+Now your code is simpler and doesn't need `useCallback`. [Learn more about removing Effect dependencies.](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect)
+
+---
+
+### Optimizing a custom Hook {/*optimizing-a-custom-hook*/}
+
+If you're writing a [custom Hook,](/learn/reusing-logic-with-custom-hooks) it's recommended to wrap any functions that it returns into `useCallback`:
+
+```js {4-6,8-10}
+function useRouter() {
+  const { dispatch } = useContext(RouterStateContext);
+
+  const navigate = useCallback((url) => {
+    dispatch({ type: 'navigate', url });
+  }, [dispatch]);
+
+  const goBack = useCallback(() => {
+    dispatch({ type: 'back' });
+  }, [dispatch]);
+
+  return {
+    navigate,
+    goBack,
+  };
+}
+```
+
+This ensures that the consumers of your Hook can optimize their own code when needed.
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+
+### Every time my component renders, `useCallback` returns a different function {/*every-time-my-component-renders-usecallback-returns-a-different-function*/}
+
+Make sure you've specified the dependency array as a second argument!
+
+If you forget the dependency array, `useCallback` will return a new function every time:
+
+```js {7}
+function ProductPage({ productId, referrer }) {
+  const handleSubmit = useCallback((orderDetails) => {
+    post('/product/' + productId + '/buy', {
+      referrer,
+      orderDetails,
+    });
+  }); // 🔴 Returns a new function every time: no dependency array
+  // ...
+```
+
+This is the corrected version passing the dependency array as a second argument:
+
+```js {7}
+function ProductPage({ productId, referrer }) {
+  const handleSubmit = useCallback((orderDetails) => {
+    post('/product/' + productId + '/buy', {
+      referrer,
+      orderDetails,
+    });
+  }, [productId, referrer]); // ✅ Does not return a new function unnecessarily
+  // ...
+```
+
+If this doesn't help, then the problem is that at least one of your dependencies is different from the previous render. You can debug this problem by manually logging your dependencies to the console:
+
+```js {5}
+  const handleSubmit = useCallback((orderDetails) => {
+    // ..
+  }, [productId, referrer]);
+
+  console.log([productId, referrer]);
+```
+
+You can then right-click on the arrays from different re-renders in the console and select "Store as a global variable" for both of them. Assuming the first one got saved as `temp1` and the second one got saved as `temp2`, you can then use the browser console to check whether each dependency in both arrays is the same:
+
+```js
+Object.is(temp1[0], temp2[0]); // Is the first dependency the same between the arrays?
+Object.is(temp1[1], temp2[1]); // Is the second dependency the same between the arrays?
+Object.is(temp1[2], temp2[2]); // ... and so on for every dependency ...
+```
+
+When you find which dependency is breaking memoization, either find a way to remove it, or [memoize it as well.](/reference/react/useMemo#memoizing-a-dependency-of-another-hook)
+
+---
+
+### I need to call `useCallback` for each list item in a loop, but it's not allowed {/*i-need-to-call-usememo-for-each-list-item-in-a-loop-but-its-not-allowed*/}
+
+Suppose the `Chart` component is wrapped in [`memo`](/reference/react/memo). You want to skip re-rendering every `Chart` in the list when the `ReportList` component re-renders. However, you can't call `useCallback` in a loop:
+
+```js {5-14}
+function ReportList({ items }) {
+  return (
+    <article>
+      {items.map(item => {
+        // 🔴 You can't call useCallback in a loop like this:
+        const handleClick = useCallback(() => {
+          sendReport(item)
+        }, [item]);
+
+        return (
+          <figure key={item.id}>
+            <Chart onClick={handleClick} />
+          </figure>
+        );
+      })}
+    </article>
+  );
+}
+```
+
+Instead, extract a component for an individual item, and put `useCallback` there:
+
+```js {5,12-21}
+function ReportList({ items }) {
+  return (
+    <article>
+      {items.map(item =>
+        <Report key={item.id} item={item} />
+      )}
+    </article>
+  );
+}
+
+function Report({ item }) {
+  // ✅ Call useCallback at the top level:
+  const handleClick = useCallback(() => {
+    sendReport(item)
+  }, [item]);
+
+  return (
+    <figure>
+      <Chart onClick={handleClick} />
+    </figure>
+  );
+}
+```
+
+Alternatively, you could remove `useCallback` in the last snippet and instead wrap `Report` itself in [`memo`.](/reference/react/memo) If the `item` prop does not change, `Report` will skip re-rendering, so `Chart` will skip re-rendering too:
+
+```js {5,6-8,15}
+function ReportList({ items }) {
+  // ...
+}
+
+const Report = memo(function Report({ item }) {
+  function handleClick() {
+    sendReport(item);
+  }
+
+  return (
+    <figure>
+      <Chart data={data} />
+    </figure>
+  );
+});
+```
diff --git a/beta/src/content/reference/react/useContext.md b/beta/src/content/reference/react/useContext.md
new file mode 100644
index 000000000..0cf433512
--- /dev/null
+++ b/beta/src/content/reference/react/useContext.md
@@ -0,0 +1,1385 @@
+---
+title: useContext
+---
+
+<Intro>
+
+`useContext` is a React Hook that lets you read and subscribe to [context](/learn/passing-data-deeply-with-context) from your component.
+
+```js
+const value = useContext(SomeContext)
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `useContext(SomeContext)` {/*usecontext*/}
+
+Call `useContext` at the top level of your component to read and subscribe to [context.](/learn/passing-data-deeply-with-context)
+
+```js
+import { useContext } from 'react';
+
+function MyComponent() {
+  const theme = useContext(ThemeContext);
+  // ...
+```
+
+[See more examples below.](#usage)
+
+#### Parameters {/*parameters*/}
+
+* `SomeContext`: The context that you've previously created with [`createContext`](/reference/react/createContext). The context itself does not hold the information, it only represents the kind of information you can provide or read from components.
+
+#### Returns {/*returns*/}
+
+`useContext` returns the context value for the calling component. It is determined as the `value` passed to the closest `SomeContext.Provider` above the calling component in the tree. If there is no such provider, then the returned value will be the `defaultValue` you have passed to [`createContext`](/reference/react/createContext) for that context. The returned value is always up-to-date. React automatically re-renders components that read some context if it changes.
+
+#### Caveats {/*caveats*/}
+
+* `useContext()` call in a component is not affected by providers returned from the *same* component. The corresponding `<Context.Provider>` **needs to be *above*** the component doing the `useContext()` call.
+* React **automatically re-renders** all the children that use a particular context starting from the provider that receives a different `value`. The previous and the next values are compared with the [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison. Skipping re-renders with [`memo`](/reference/react/memo) does not prevent the children receiving fresh context values from above.
+* If your build system produces duplicates modules in the output (which can happen if you use symlinks), this can break context. Passing something via context only works if `SomeContext` that you use to provide context and `SomeContext` that you use to read it are ***exactly* the same object**, as determined by a `===` comparison.
+
+---
+
+## Usage {/*usage*/}
+
+
+### Passing data deeply into the tree {/*passing-data-deeply-into-the-tree*/}
+
+Call `useContext` at the top level of your component to read and subscribe to [context.](/learn/passing-data-deeply-with-context)
+
+```js [[2, 4, "theme"], [1, 4, "ThemeContext"]]
+import { useContext } from 'react';
+
+function Button() {
+  const theme = useContext(ThemeContext);
+  // ... 
+```
+
+`useContext` returns the <CodeStep step={2}>context value</CodeStep> for the <CodeStep step={1}>context</CodeStep> you passed. To determine the context value, React searches the component tree and finds **the closest context provider above** for that particular context.
+
+To pass context to a `Button`, wrap it or one of its parent components into the corresponding context provider:
+
+```js [[1, 3, "ThemeContext"], [2, 3, "\\"dark\\""], [1, 5, "ThemeContext"]]
+function MyPage() {
+  return (
+    <ThemeContext.Provider value="dark">
+      <Form />
+    </ThemeContext.Provider>
+  );
+}
+
+function Form() {
+  // ... renders buttons inside ...
+}
+```
+
+It doesn't matter how many layers of components there are between the provider and the `Button`. When a `Button` *anywhere* inside of `Form` calls `useContext(ThemeContext)`, it will receive `"dark"` as the value.
+
+<Pitfall>
+
+`useContext()` always looks for the closest provider *above* the component that calls it. It searches upwards and **does not** consider providers in the component from which you're calling `useContext()`.
+
+</Pitfall>
+
+<Sandpack>
+
+```js
+import { createContext, useContext } from 'react';
+
+const ThemeContext = createContext(null);
+
+export default function MyApp() {
+  return (
+    <ThemeContext.Provider value="dark">
+      <Form />
+    </ThemeContext.Provider>
+  )
+}
+
+function Form() {
+  return (
+    <Panel title="Welcome">
+      <Button>Sign up</Button>
+      <Button>Log in</Button>
+    </Panel>
+  );
+}
+
+function Panel({ title, children }) {
+  const theme = useContext(ThemeContext);
+  const className = 'panel-' + theme;
+  return (
+    <section className={className}>
+      <h1>{title}</h1>
+      {children}
+    </section>
+  )
+}
+
+function Button({ children }) {
+  const theme = useContext(ThemeContext);
+  const className = 'button-' + theme;
+  return (
+    <button className={className}>
+      {children}
+    </button>
+  );
+}
+```
+
+```css
+.panel-light,
+.panel-dark {
+  border: 1px solid black;
+  border-radius: 4px;
+  padding: 20px;
+}
+.panel-light {
+  color: #222;
+  background: #fff;
+}
+
+.panel-dark {
+  color: #fff;
+  background: rgb(23, 32, 42);
+}
+
+.button-light,
+.button-dark {
+  border: 1px solid #777;
+  padding: 5px;
+  margin-right: 10px;
+  margin-top: 10px;
+}
+
+.button-dark {
+  background: #222;
+  color: #fff;
+}
+
+.button-light {
+  background: #fff;
+  color: #222;
+}
+```
+
+</Sandpack>
+
+---
+
+### Updating data passed via context {/*updating-data-passed-via-context*/}
+
+Often, you'll want the context to change over time. To update context, you need to combine it with [state.](/reference/react/useState) Declare a state variable in the parent component, and pass the current state down as the <CodeStep step={2}>context value</CodeStep> to the provider.
+
+```js {2} [[1, 4, "ThemeContext"], [2, 4, "theme"], [1, 11, "ThemeContext"]]
+function MyPage() {
+  const [theme, setTheme] = useState('dark');
+  return (
+    <ThemeContext.Provider value={theme}>
+      <Form />
+      <Button onClick={() => {
+        setTheme('light');
+      }}>
+        Switch to light theme
+      </Button>
+    </ThemeContext.Provider>
+  );
+}
+```
+
+Now any `Button` inside of the provider will receive the current `theme` value. If you call `setTheme` to update the `theme` value that you pass to the provider, all `Button` components will re-render with the new `'light'` value.
+
+<Recipes titleText="Examples of updating context" titleId="examples-basic">
+
+#### Updating a value via context {/*updating-a-value-via-context*/}
+
+In this example, the `MyApp` component holds a state variable which is then passed to the `ThemeContext` provider. Checking the "Dark mode" checkbox updates the state. Changing the provided value re-renders all the components using that context.
+
+<Sandpack>
+
+```js
+import { createContext, useContext, useState } from 'react';
+
+const ThemeContext = createContext(null);
+
+export default function MyApp() {
+  const [theme, setTheme] = useState('light');
+  return (
+    <ThemeContext.Provider value={theme}>
+      <Form />
+      <label>
+        <input
+          type="checkbox"
+          checked={theme === 'dark'}
+          onChange={(e) => {
+            setTheme(e.target.checked ? 'dark' : 'light')
+          }}
+        />
+        Use dark mode
+      </label>
+    </ThemeContext.Provider>
+  )
+}
+
+function Form({ children }) {
+  return (
+    <Panel title="Welcome">
+      <Button>Sign up</Button>
+      <Button>Log in</Button>
+    </Panel>
+  );
+}
+
+function Panel({ title, children }) {
+  const theme = useContext(ThemeContext);
+  const className = 'panel-' + theme;
+  return (
+    <section className={className}>
+      <h1>{title}</h1>
+      {children}
+    </section>
+  )
+}
+
+function Button({ children }) {
+  const theme = useContext(ThemeContext);
+  const className = 'button-' + theme;
+  return (
+    <button className={className}>
+      {children}
+    </button>
+  );
+}
+```
+
+```css
+.panel-light,
+.panel-dark {
+  border: 1px solid black;
+  border-radius: 4px;
+  padding: 20px;
+  margin-bottom: 10px;
+}
+.panel-light {
+  color: #222;
+  background: #fff;
+}
+
+.panel-dark {
+  color: #fff;
+  background: rgb(23, 32, 42);
+}
+
+.button-light,
+.button-dark {
+  border: 1px solid #777;
+  padding: 5px;
+  margin-right: 10px;
+  margin-top: 10px;
+}
+
+.button-dark {
+  background: #222;
+  color: #fff;
+}
+
+.button-light {
+  background: #fff;
+  color: #222;
+}
+```
+
+</Sandpack>
+
+Note that `value="dark"` passes the `"dark"` string, but `value={theme}` passes the value of the JavaScript `theme` variable with [JSX curly braces.](/learn/javascript-in-jsx-with-curly-braces) Curly braces also let you pass context values that aren't strings.
+
+<Solution />
+
+#### Updating an object via context {/*updating-an-object-via-context*/}
+
+In this example, there is a `currentUser` state variable which holds an object. You combine `{ currentUser, setCurrentUser }` into a single object and pass it down through the context inside the `value={}`. This lets any component below, such as `LoginButton`, read both `currentUser` and `setCurrentUser`, and then call `setCurrentUser` when needed.
+
+<Sandpack>
+
+```js
+import { createContext, useContext, useState } from 'react';
+
+const CurrentUserContext = createContext(null);
+
+export default function MyApp() {
+  const [currentUser, setCurrentUser] = useState(null);
+  return (
+    <CurrentUserContext.Provider
+      value={{
+        currentUser,
+        setCurrentUser
+      }}
+    >
+      <Form />
+    </CurrentUserContext.Provider>
+  );
+}
+
+function Form({ children }) {
+  return (
+    <Panel title="Welcome">
+      <LoginButton />
+    </Panel>
+  );
+}
+
+function LoginButton() {
+  const {
+    currentUser,
+    setCurrentUser
+  } = useContext(CurrentUserContext);
+
+  if (currentUser !== null) {
+    return <p>You logged in as {currentUser.name}.</p>;
+  }
+
+  return (
+    <Button onClick={() => {
+      setCurrentUser({ name: 'Advika' })
+    }}>Log in as Advika</Button>
+  );
+}
+
+function Panel({ title, children }) {
+  return (
+    <section className="panel">
+      <h1>{title}</h1>
+      {children}
+    </section>
+  )
+}
+
+function Button({ children, onClick }) {
+  return (
+    <button className="button" onClick={onClick}>
+      {children}
+    </button>
+  );
+}
+```
+
+```css
+label {
+  display: block;
+}
+
+.panel {
+  border: 1px solid black;
+  border-radius: 4px;
+  padding: 20px;
+  margin-bottom: 10px;
+}
+
+.button {
+  border: 1px solid #777;
+  padding: 5px;
+  margin-right: 10px;
+  margin-top: 10px;
+}
+```
+
+</Sandpack>
+
+<Solution />
+
+#### Multiple contexts {/*multiple-contexts*/}
+
+In this example, there are two independent contexts. `ThemeContext` provides the current theme, which is a string, while `CurrentUserContext` holds the object representing the current user.
+
+<Sandpack>
+
+```js
+import { createContext, useContext, useState } from 'react';
+
+const ThemeContext = createContext(null);
+const CurrentUserContext = createContext(null);
+
+export default function MyApp() {
+  const [theme, setTheme] = useState('light');
+  const [currentUser, setCurrentUser] = useState(null);
+  return (
+    <ThemeContext.Provider value={theme}>
+      <CurrentUserContext.Provider
+        value={{
+          currentUser,
+          setCurrentUser
+        }}
+      >
+        <WelcomePanel />
+        <label>
+          <input
+            type="checkbox"
+            checked={theme === 'dark'}
+            onChange={(e) => {
+              setTheme(e.target.checked ? 'dark' : 'light')
+            }}
+          />
+          Use dark mode
+        </label>
+      </CurrentUserContext.Provider>
+    </ThemeContext.Provider>
+  )
+}
+
+function WelcomePanel({ children }) {
+  const {currentUser} = useContext(CurrentUserContext);
+  return (
+    <Panel title="Welcome">
+      {currentUser !== null ?
+        <Greeting /> :
+        <LoginForm />
+      }
+    </Panel>
+  );
+}
+
+function Greeting() {
+  const {currentUser} = useContext(CurrentUserContext);
+  return (
+    <p>You logged in as {currentUser.name}.</p>
+  )
+}
+
+function LoginForm() {
+  const {setCurrentUser} = useContext(CurrentUserContext);
+  const [firstName, setFirstName] = useState('');
+  const [lastName, setLastName] = useState('');
+  const canLogin = firstName !== '' && lastName !== '';
+  return (
+    <>
+      <label>
+        First name{': '}
+        <input
+          required
+          value={firstName}
+          onChange={e => setFirstName(e.target.value)}
+        />
+      </label>
+      <label>
+        Last name{': '}
+        <input
+        required
+          value={lastName}
+          onChange={e => setLastName(e.target.value)}
+        />
+      </label>
+      <Button
+        disabled={!canLogin}
+        onClick={() => {
+          setCurrentUser({
+            name: firstName + ' ' + lastName
+          });
+        }}
+      >
+        Log in
+      </Button>
+      {!canLogin && <i>Fill in both fields.</i>}
+    </>
+  );
+}
+
+function Panel({ title, children }) {
+  const theme = useContext(ThemeContext);
+  const className = 'panel-' + theme;
+  return (
+    <section className={className}>
+      <h1>{title}</h1>
+      {children}
+    </section>
+  )
+}
+
+function Button({ children, disabled, onClick }) {
+  const theme = useContext(ThemeContext);
+  const className = 'button-' + theme;
+  return (
+    <button
+      className={className}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+}
+```
+
+```css
+label {
+  display: block;
+}
+
+.panel-light,
+.panel-dark {
+  border: 1px solid black;
+  border-radius: 4px;
+  padding: 20px;
+  margin-bottom: 10px;
+}
+.panel-light {
+  color: #222;
+  background: #fff;
+}
+
+.panel-dark {
+  color: #fff;
+  background: rgb(23, 32, 42);
+}
+
+.button-light,
+.button-dark {
+  border: 1px solid #777;
+  padding: 5px;
+  margin-right: 10px;
+  margin-top: 10px;
+}
+
+.button-dark {
+  background: #222;
+  color: #fff;
+}
+
+.button-light {
+  background: #fff;
+  color: #222;
+}
+```
+
+</Sandpack>
+
+<Solution />
+
+#### Extracting providers to a component {/*extracting-providers-to-a-component*/}
+
+As your app grows, it is expected that you'll have a "pyramid" of contexts closer to the root of your app. There is nothing wrong with that. However, if you dislike the nesting aesthetically, you can extract the providers into a single component. In this example, `MyProviders` hides the "plumbing" and renders the children passed to it inside the necessary providers. Note that the `theme` and `setTheme` state is needed in `MyApp` itself, so `MyApp` still owns that piece of the state.
+
+<Sandpack>
+
+```js
+import { createContext, useContext, useState } from 'react';
+
+const ThemeContext = createContext(null);
+const CurrentUserContext = createContext(null);
+
+export default function MyApp() {
+  const [theme, setTheme] = useState('light');
+  return (
+    <MyProviders theme={theme} setTheme={setTheme}>
+      <WelcomePanel />
+      <label>
+        <input
+          type="checkbox"
+          checked={theme === 'dark'}
+          onChange={(e) => {
+            setTheme(e.target.checked ? 'dark' : 'light')
+          }}
+        />
+        Use dark mode
+      </label>
+    </MyProviders>
+  );
+}
+
+function MyProviders({ children, theme, setTheme }) {
+  const [currentUser, setCurrentUser] = useState(null);
+  return (
+    <ThemeContext.Provider value={theme}>
+      <CurrentUserContext.Provider
+        value={{
+          currentUser,
+          setCurrentUser
+        }}
+      >
+        {children}
+      </CurrentUserContext.Provider>
+    </ThemeContext.Provider>
+  );
+}
+
+function WelcomePanel({ children }) {
+  const {currentUser} = useContext(CurrentUserContext);
+  return (
+    <Panel title="Welcome">
+      {currentUser !== null ?
+        <Greeting /> :
+        <LoginForm />
+      }
+    </Panel>
+  );
+}
+
+function Greeting() {
+  const {currentUser} = useContext(CurrentUserContext);
+  return (
+    <p>You logged in as {currentUser.name}.</p>
+  )
+}
+
+function LoginForm() {
+  const {setCurrentUser} = useContext(CurrentUserContext);
+  const [firstName, setFirstName] = useState('');
+  const [lastName, setLastName] = useState('');
+  const canLogin = firstName !== '' && lastName !== '';
+  return (
+    <>
+      <label>
+        First name{': '}
+        <input
+          required
+          value={firstName}
+          onChange={e => setFirstName(e.target.value)}
+        />
+      </label>
+      <label>
+        Last name{': '}
+        <input
+        required
+          value={lastName}
+          onChange={e => setLastName(e.target.value)}
+        />
+      </label>
+      <Button
+        disabled={!canLogin}
+        onClick={() => {
+          setCurrentUser({
+            name: firstName + ' ' + lastName
+          });
+        }}
+      >
+        Log in
+      </Button>
+      {!canLogin && <i>Fill in both fields.</i>}
+    </>
+  );
+}
+
+function Panel({ title, children }) {
+  const theme = useContext(ThemeContext);
+  const className = 'panel-' + theme;
+  return (
+    <section className={className}>
+      <h1>{title}</h1>
+      {children}
+    </section>
+  )
+}
+
+function Button({ children, disabled, onClick }) {
+  const theme = useContext(ThemeContext);
+  const className = 'button-' + theme;
+  return (
+    <button
+      className={className}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+}
+```
+
+```css
+label {
+  display: block;
+}
+
+.panel-light,
+.panel-dark {
+  border: 1px solid black;
+  border-radius: 4px;
+  padding: 20px;
+  margin-bottom: 10px;
+}
+.panel-light {
+  color: #222;
+  background: #fff;
+}
+
+.panel-dark {
+  color: #fff;
+  background: rgb(23, 32, 42);
+}
+
+.button-light,
+.button-dark {
+  border: 1px solid #777;
+  padding: 5px;
+  margin-right: 10px;
+  margin-top: 10px;
+}
+
+.button-dark {
+  background: #222;
+  color: #fff;
+}
+
+.button-light {
+  background: #fff;
+  color: #222;
+}
+```
+
+</Sandpack>
+
+<Solution />
+
+#### Scaling up with context and a reducer {/*scaling-up-with-context-and-a-reducer*/}
+
+In larger apps, it is common to combine context with a [reducer](/reference/react/useReducer) to extract the logic related to some state out of components. In this example, all the "wiring" is hidden in the `TasksContext.js`, which contains a reducer and two separate contexts.
+
+Read a [full walkthrough](/learn/scaling-up-with-reducer-and-context) of this example.
+
+<Sandpack>
+
+```js App.js
+import AddTask from './AddTask.js';
+import TaskList from './TaskList.js';
+import { TasksProvider } from './TasksContext.js';
+
+export default function TaskApp() {
+  return (
+    <TasksProvider>
+      <h1>Day off in Kyoto</h1>
+      <AddTask />
+      <TaskList />
+    </TasksProvider>
+  );
+}
+```
+
+```js TasksContext.js
+import { createContext, useContext, useReducer } from 'react';
+
+const TasksContext = createContext(null);
+
+const TasksDispatchContext = createContext(null);
+
+export function TasksProvider({ children }) {
+  const [tasks, dispatch] = useReducer(
+    tasksReducer,
+    initialTasks
+  );
+
+  return (
+    <TasksContext.Provider value={tasks}>
+      <TasksDispatchContext.Provider value={dispatch}>
+        {children}
+      </TasksDispatchContext.Provider>
+    </TasksContext.Provider>
+  );
+}
+
+export function useTasks() {
+  return useContext(TasksContext);
+}
+
+export function useTasksDispatch() {
+  return useContext(TasksDispatchContext);
+}
+
+function tasksReducer(tasks, action) {
+  switch (action.type) {
+    case 'added': {
+      return [...tasks, {
+        id: action.id,
+        text: action.text,
+        done: false
+      }];
+    }
+    case 'changed': {
+      return tasks.map(t => {
+        if (t.id === action.task.id) {
+          return action.task;
+        } else {
+          return t;
+        }
+      });
+    }
+    case 'deleted': {
+      return tasks.filter(t => t.id !== action.id);
+    }
+    default: {
+      throw Error('Unknown action: ' + action.type);
+    }
+  }
+}
+
+const initialTasks = [
+  { id: 0, text: 'Philosopher’s Path', done: true },
+  { id: 1, text: 'Visit the temple', done: false },
+  { id: 2, text: 'Drink matcha', done: false }
+];
+```
+
+```js AddTask.js
+import { useState, useContext } from 'react';
+import { useTasksDispatch } from './TasksContext.js';
+
+export default function AddTask() {
+  const [text, setText] = useState('');
+  const dispatch = useTasksDispatch();
+  return (
+    <>
+      <input
+        placeholder="Add task"
+        value={text}
+        onChange={e => setText(e.target.value)}
+      />
+      <button onClick={() => {
+        setText('');
+        dispatch({
+          type: 'added',
+          id: nextId++,
+          text: text,
+        }); 
+      }}>Add</button>
+    </>
+  );
+}
+
+let nextId = 3;
+```
+
+```js TaskList.js
+import { useState, useContext } from 'react';
+import { useTasks, useTasksDispatch } from './TasksContext.js';
+
+export default function TaskList() {
+  const tasks = useTasks();
+  return (
+    <ul>
+      {tasks.map(task => (
+        <li key={task.id}>
+          <Task task={task} />
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function Task({ task }) {
+  const [isEditing, setIsEditing] = useState(false);
+  const dispatch = useTasksDispatch();
+  let taskContent;
+  if (isEditing) {
+    taskContent = (
+      <>
+        <input
+          value={task.text}
+          onChange={e => {
+            dispatch({
+              type: 'changed',
+              task: {
+                ...task,
+                text: e.target.value
+              }
+            });
+          }} />
+        <button onClick={() => setIsEditing(false)}>
+          Save
+        </button>
+      </>
+    );
+  } else {
+    taskContent = (
+      <>
+        {task.text}
+        <button onClick={() => setIsEditing(true)}>
+          Edit
+        </button>
+      </>
+    );
+  }
+  return (
+    <label>
+      <input
+        type="checkbox"
+        checked={task.done}
+        onChange={e => {
+          dispatch({
+            type: 'changed',
+            task: {
+              ...task,
+              done: e.target.checked
+            }
+          });
+        }}
+      />
+      {taskContent}
+      <button onClick={() => {
+        dispatch({
+          type: 'deleted',
+          id: task.id
+        });
+      }}>
+        Delete
+      </button>
+    </label>
+  );
+}
+```
+
+```css
+button { margin: 5px; }
+li { list-style-type: none; }
+ul, li { margin: 0; padding: 0; }
+```
+
+</Sandpack>
+
+<Solution />
+
+</Recipes>
+
+---
+
+### Specifying a fallback default value {/*specifying-a-fallback-default-value*/}
+
+If React can't find any providers of that particular <CodeStep step={1}>context</CodeStep> in the parent tree, the context value returned by `useContext()` will be equal to the <CodeStep step={3}>default value</CodeStep> that you specified when you [created that context](/reference/react/createContext):
+
+```js [[1, 1, "ThemeContext"], [3, 1, "null"]]
+const ThemeContext = createContext(null);
+```
+
+The default value **never changes**. If you want to update context, use it with state as [described above.](#updating-data-passed-via-context)
+
+Often, instead of `null`, there is some more meaningful value you can use as a default, for example:
+
+```js [[1, 1, "ThemeContext"], [3, 1, "light"]]
+const ThemeContext = createContext('light');
+```
+
+This way, if you accidentally render some component without a corresponding provider, it won't break. This also helps your components work well in a test environment without setting up a lot of providers in the tests.
+
+In the example below, the "Toggle theme" button is always light because it's **outside any theme context provider** and the default context theme value is `'light'`. Try editing the default theme to be `'dark'`.
+
+<Sandpack>
+
+```js
+import { createContext, useContext, useState } from 'react';
+
+const ThemeContext = createContext('light');
+
+export default function MyApp() {
+  const [theme, setTheme] = useState('light');
+  return (
+    <>
+      <ThemeContext.Provider value={theme}>
+        <Form />
+      </ThemeContext.Provider>
+      <Button onClick={() => {
+        setTheme(theme === 'dark' ? 'light' : 'dark');
+      }}>
+        Toggle theme
+      </Button>
+    </>
+  )
+}
+
+function Form({ children }) {
+  return (
+    <Panel title="Welcome">
+      <Button>Sign up</Button>
+      <Button>Log in</Button>
+    </Panel>
+  );
+}
+
+function Panel({ title, children }) {
+  const theme = useContext(ThemeContext);
+  const className = 'panel-' + theme;
+  return (
+    <section className={className}>
+      <h1>{title}</h1>
+      {children}
+    </section>
+  )
+}
+
+function Button({ children, onClick }) {
+  const theme = useContext(ThemeContext);
+  const className = 'button-' + theme;
+  return (
+    <button className={className} onClick={onClick}>
+      {children}
+    </button>
+  );
+}
+```
+
+```css
+.panel-light,
+.panel-dark {
+  border: 1px solid black;
+  border-radius: 4px;
+  padding: 20px;
+  margin-bottom: 10px;
+}
+.panel-light {
+  color: #222;
+  background: #fff;
+}
+
+.panel-dark {
+  color: #fff;
+  background: rgb(23, 32, 42);
+}
+
+.button-light,
+.button-dark {
+  border: 1px solid #777;
+  padding: 5px;
+  margin-right: 10px;
+  margin-top: 10px;
+}
+
+.button-dark {
+  background: #222;
+  color: #fff;
+}
+
+.button-light {
+  background: #fff;
+  color: #222;
+}
+```
+
+</Sandpack>
+
+---
+
+### Overriding context for a part of the tree {/*overriding-context-for-a-part-of-the-tree*/}
+
+You can override the context for a part of the tree by wrapping that part in a provider with a different value.
+
+```js {3,5}
+<ThemeContext.Provider value="dark">
+  ...
+  <ThemeContext.Provider value="light">
+    <Footer />
+  </ThemeContext.Provider>
+  ...
+</ThemeContext.Provider>
+```
+
+You can nest and override providers as many times as you need.
+
+<Recipes title="Examples of overriding context">
+
+#### Overriding a theme {/*overriding-a-theme*/}
+
+Here, the button *inside* the `Footer` receives a different context value (`"light"`) than the buttons outside (`"dark"`).
+
+<Sandpack>
+
+```js
+import { createContext, useContext } from 'react';
+
+const ThemeContext = createContext(null);
+
+export default function MyApp() {
+  return (
+    <ThemeContext.Provider value="dark">
+      <Form />
+    </ThemeContext.Provider>
+  )
+}
+
+function Form() {
+  return (
+    <Panel title="Welcome">
+      <Button>Sign up</Button>
+      <Button>Log in</Button>
+      <ThemeContext.Provider value="light">
+        <Footer />
+      </ThemeContext.Provider>
+    </Panel>
+  );
+}
+
+function Footer() {
+  return (
+    <footer>
+      <Button>Settings</Button>
+    </footer>
+  );
+}
+
+function Panel({ title, children }) {
+  const theme = useContext(ThemeContext);
+  const className = 'panel-' + theme;
+  return (
+    <section className={className}>
+      {title && <h1>{title}</h1>}
+      {children}
+    </section>
+  )
+}
+
+function Button({ children }) {
+  const theme = useContext(ThemeContext);
+  const className = 'button-' + theme;
+  return (
+    <button className={className}>
+      {children}
+    </button>
+  );
+}
+```
+
+```css
+footer {
+  margin-top: 20px;
+  border-top: 1px solid #aaa;
+}
+
+.panel-light,
+.panel-dark {
+  border: 1px solid black;
+  border-radius: 4px;
+  padding: 20px;
+}
+.panel-light {
+  color: #222;
+  background: #fff;
+}
+
+.panel-dark {
+  color: #fff;
+  background: rgb(23, 32, 42);
+}
+
+.button-light,
+.button-dark {
+  border: 1px solid #777;
+  padding: 5px;
+  margin-right: 10px;
+  margin-top: 10px;
+}
+
+.button-dark {
+  background: #222;
+  color: #fff;
+}
+
+.button-light {
+  background: #fff;
+  color: #222;
+}
+```
+
+</Sandpack>
+
+<Solution />
+
+#### Automatically nested headings {/*automatically-nested-headings*/}
+
+You can "accumulate" information when you nest context providers. In this example, the `Section` component keeps track of the `LevelContext` which specifies the depth of the section nesting. It reads the `LevelContext` from the parent section, and provides the `LevelContext` number increased by one to its children. As a result, the `Heading` component can automatically decide which of the `<h1>`, `<h2>`, `<h3>`, ..., tags to use based on how many `Section` components it is nested inside of.
+
+Read a [detailed walkthrough](/learn/passing-data-deeply-with-context) of this example.
+
+<Sandpack>
+
+```js
+import Heading from './Heading.js';
+import Section from './Section.js';
+
+export default function Page() {
+  return (
+    <Section>
+      <Heading>Title</Heading>
+      <Section>
+        <Heading>Heading</Heading>
+        <Heading>Heading</Heading>
+        <Heading>Heading</Heading>
+        <Section>
+          <Heading>Sub-heading</Heading>
+          <Heading>Sub-heading</Heading>
+          <Heading>Sub-heading</Heading>
+          <Section>
+            <Heading>Sub-sub-heading</Heading>
+            <Heading>Sub-sub-heading</Heading>
+            <Heading>Sub-sub-heading</Heading>
+          </Section>
+        </Section>
+      </Section>
+    </Section>
+  );
+}
+```
+
+```js Section.js
+import { useContext } from 'react';
+import { LevelContext } from './LevelContext.js';
+
+export default function Section({ children }) {
+  const level = useContext(LevelContext);
+  return (
+    <section className="section">
+      <LevelContext.Provider value={level + 1}>
+        {children}
+      </LevelContext.Provider>
+    </section>
+  );
+}
+```
+
+```js Heading.js
+import { useContext } from 'react';
+import { LevelContext } from './LevelContext.js';
+
+export default function Heading({ children }) {
+  const level = useContext(LevelContext);
+  switch (level) {
+    case 0:
+      throw Error('Heading must be inside a Section!');
+    case 1:
+      return <h1>{children}</h1>;
+    case 2:
+      return <h2>{children}</h2>;
+    case 3:
+      return <h3>{children}</h3>;
+    case 4:
+      return <h4>{children}</h4>;
+    case 5:
+      return <h5>{children}</h5>;
+    case 6:
+      return <h6>{children}</h6>;
+    default:
+      throw Error('Unknown level: ' + level);
+  }
+}
+```
+
+```js LevelContext.js
+import { createContext } from 'react';
+
+export const LevelContext = createContext(0);
+```
+
+```css
+.section {
+  padding: 10px;
+  margin: 5px;
+  border-radius: 5px;
+  border: 1px solid #aaa;
+}
+```
+
+</Sandpack>
+
+<Solution />
+
+</Recipes>
+
+---
+
+### Optimizing re-renders when passing objects and functions {/*optimizing-re-renders-when-passing-objects-and-functions*/}
+
+You can pass any values via context, including objects and functions.
+
+```js [[2, 10, "{ currentUser, login }"]] 
+function MyApp() {
+  const [currentUser, setCurrentUser] = useState(null);
+
+  function login(response) {
+    storeCredentials(response.credentials);
+    setCurrentUser(response.user);
+  }
+
+  return (
+    <AuthContext.Provider value={{ currentUser, login }}>
+      <Page />
+    </AuthContext.Provider>
+  );
+}
+```
+
+Here, the <CodeStep step={2}>context value</CodeStep> is a JavaScript object with two properties, one of which is a function. Whenever `MyApp` re-renders (for example, on a route update), this will be a *different* object pointing at a *different* function, so React will also have to re-render all components deep in the tree that call `useContext(AuthContext)`.
+
+In smaller apps, this is not a problem. However, there is no need to re-render them if the underlying data, like `currentUser`, has not changed. To help React take advantage of that fact, you may wrap the `login` function with [`useCallback`](/reference/react/useCallback) and wrap the object creation into [`useMemo`](/reference/react/useMemo). This is a performance optimization:
+
+```js {6,9,11,14,17}
+import { useCallback, useMemo } from 'react';
+
+function MyApp() {
+  const [currentUser, setCurrentUser] = useState(null);
+
+  const login = useCallback((response) => {
+    storeCredentials(response.credentials);
+    setCurrentUser(response.user);
+  }, []);
+
+  const contextValue = useMemo(() => ({
+    currentUser,
+    login
+  }), [currentUser, login]);
+
+  return (
+    <AuthContext.Provider value={contextValue}>
+      <Page />
+    </AuthContext.Provider>
+  );
+}
+```
+
+As a result of this change, even if `MyApp` needs to re-render, the components calling `useContext(AuthProvider)` won't need to re-render unless `currentUser` has changed. Read more about [`useMemo`](/reference/react/useMemo#skipping-re-rendering-of-components) and [`useCallback`.](/reference/react/useCallback#skipping-re-rendering-of-components)
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+
+### My component doesn't see the value from my provider {/*my-component-doesnt-see-the-value-from-my-provider*/}
+
+There are a few common ways that this can happen:
+
+1. You're rendering `<SomeContext.Provider>` in the same component (or below) as where you're calling `useContext()`. Move `<SomeContext.Provider>` *above and outside* the component calling `useContext()`.
+2. You may have forgotten to wrap your component with `<SomeContext.Provider>`, or you might have put it in a different part of the tree than you thought. Check whether the hierarchy is right using [React DevTools.](/learn/react-developer-tools)
+3. You might be running into some build issue with your tooling that causes `SomeContext` as seen from the providing component and `SomeContext` as seen by the reading component to be two different objects. This can happen if you use symlinks, for example. You can verify this by assigning them to globals like `window.SomeContext1` and `window.SomeContext2` and then checking whether `window.SomeContext1 === window.SomeContext2` in the console. If they're not the same, you need to fix that issue on the build tool level.
+
+### I am always getting `undefined` from my context although the default value is different {/*i-am-always-getting-undefined-from-my-context-although-the-default-value-is-different*/}
+
+You might have a provider without a `value` in the tree:
+
+```js {1,2}
+// 🚩 Doesn't work: no value prop
+<ThemeContext.Provider>
+   <Button />
+</ThemeContext.Provider>
+```
+
+If you forget to specify `value`, it's like passing `value={undefined}`.
+
+You may have also mistakingly used a different prop name by mistake:
+
+```js {1,2}
+// 🚩 Doesn't work: prop should be called "value"
+<ThemeContext.Provider theme={theme}>
+   <Button />
+</ThemeContext.Provider>
+```
+
+In both of these cases you should see a warning from React in the console. To fix them, call the prop `value`:
+
+```js {1,2}
+// ✅ Passing the value prop
+<ThemeContext.Provider value={theme}>
+   <Button />
+</ThemeContext.Provider>
+```
+
+Note that the [default value from your `createContext(defaultValue)` call](#specifying-a-fallback-default-value) is only used **if there is no matching provider above at all.** If there is a `<SomeContext.Provider value={undefined}>` component somewhere in the parent tree, the component calling `useContext(SomeContext)` *will* receive `undefined` as the context value.
diff --git a/beta/src/content/reference/react/useDebugValue.md b/beta/src/content/reference/react/useDebugValue.md
new file mode 100644
index 000000000..e30704a66
--- /dev/null
+++ b/beta/src/content/reference/react/useDebugValue.md
@@ -0,0 +1,122 @@
+---
+title: useDebugValue
+---
+
+<Intro>
+
+`useDebugValue` is a React Hook that lets you add a label to a custom Hook in [React DevTools.](/learn/react-developer-tools)
+
+```js
+useDebugValue(value, format?)
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `useDebugValue(value, format?)` {/*usedebugvalue*/}
+
+Call `useDebugValue` at the top level of your [custom Hook](/learn/reusing-logic-with-custom-hooks) to display a readable debug value:
+
+```js
+import { useDebugValue } from 'react';
+
+function useOnlineStatus() {
+  // ...
+  useDebugValue(isOnline ? 'Online' : 'Offline');
+  // ...
+}
+```
+
+[See more examples below.](#usage)
+
+#### Parameters {/*parameters*/}
+
+* `value`: The value you want to display in React DevTools. It can have any type.
+* **optional** `format`: A formatting function. When the component is inspected, React DevTools will call the formatting function with the `value` as the argument, and then display the returned formatted value (which may have any type). If you don't specify the formatting function, the original `value` itself will be displayed.
+
+#### Returns {/*returns*/}
+
+`useDebugValue` does not return anything.
+
+## Usage {/*usage*/}
+
+### Adding a label to a custom Hook {/*adding-a-label-to-a-custom-hook*/}
+
+Call `useDebugValue` at the top level of your [custom Hook](/learn/reusing-logic-with-custom-hooks) to display a readable <CodeStep step={1}>debug value</CodeStep> for [React DevTools.](/learn/react-developer-tools)
+
+```js [[1, 5, "isOnline ? 'Online' : 'Offline'"]]
+import { useDebugValue } from 'react';
+
+function useOnlineStatus() {
+  // ...
+  useDebugValue(isOnline ? 'Online' : 'Offline');
+  // ...
+}
+```
+
+This gives components calling `useOnlineStatus` a label like `OnlineStatus: "Online"` when you inspect them:
+
+![A screenshot of React DevTools showing the debug value](/images/docs/react-devtools-usedebugvalue.png)
+
+Without the `useDebugValue` call, only the underlying data (in this example, `true`) would be displayed.
+
+<Sandpack>
+
+```js
+import { useOnlineStatus } from './useOnlineStatus.js';
+
+function StatusBar() {
+  const isOnline = useOnlineStatus();
+  return <h1>{isOnline ? '✅ Online' : '❌ Disconnected'}</h1>;
+}
+
+export default function App() {
+  return <StatusBar />;
+}
+```
+
+```js useOnlineStatus.js active
+import { useSyncExternalStore, useDebugValue } from 'react';
+
+export function useOnlineStatus() {
+  const isOnline = useSyncExternalStore(subscribe, () => navigator.onLine, () => true);
+  useDebugValue(isOnline ? 'Online' : 'Offline');
+  return isOnline;
+}
+
+function subscribe(callback) {
+  window.addEventListener('online', callback);
+  window.addEventListener('offline', callback);
+  return () => {
+    window.removeEventListener('online', callback);
+    window.removeEventListener('offline', callback);
+  };
+}
+```
+
+</Sandpack>
+
+<Note>
+
+We don't recommend adding debug values to every custom Hook. It's most valuable for custom Hooks that are part of shared libraries and that have a complex internal data structure that's difficult to inspect.
+
+</Note>
+
+---
+
+### Deferring formatting of a debug value {/*deferring-formatting-of-a-debug-value*/}
+
+You can also pass a formatting function as the second argument to `useDebugValue`:
+
+```js [[1, 1, "date", 18], [2, 1, "date.toDateString()"]]
+useDebugValue(date, date => date.toDateString());
+```
+
+Your formatting function will receive the <CodeStep step={1}>debug value</CodeStep> as a parameter and should return a <CodeStep step={2}>formatted display value</CodeStep>. When your component is inspected, React DevTools will call the formatting function and display its result.
+
+This lets you avoid running potentially expensive formatting logic unless the component is actually inspected. For example, if `date` is a Date value, this avoids calling `toDateString()` on it for every render of your component.
diff --git a/beta/src/content/reference/react/useDeferredValue.md b/beta/src/content/reference/react/useDeferredValue.md
new file mode 100644
index 000000000..32fa09068
--- /dev/null
+++ b/beta/src/content/reference/react/useDeferredValue.md
@@ -0,0 +1,958 @@
+---
+title: useDeferredValue
+---
+
+<Intro>
+
+`useDeferredValue` is a React Hook that lets you defer updating a part of the UI.
+
+```js
+const deferredValue = useDeferredValue(value)
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `useDeferredValue(value)` {/*usedeferredvalue*/}
+
+Call `useDeferredValue` at the top level of your component to get a deferred version of that value.
+
+```js
+import { useState, useDeferredValue } from 'react';
+
+function SearchPage() {
+  const [query, setQuery] = useState('');
+  const deferredQuery = useDeferredValue(query);
+  // ...
+}
+```
+
+[See more examples below.](#usage)
+
+#### Parameters {/*parameters*/}
+
+* `value`: The value you want to defer. It can have any type.
+
+#### Returns {/*returns*/}
+
+During the initial render, the returned deferred value will be the same as the value you provided. During updates, React will first attempt a re-render with the old value (so the returned value will match the old value), and then try another re-render in background with the new value (so the returned value will match the updated value). 
+
+#### Caveats {/*caveats*/}
+
+- The values you pass to `useDeferredValue` should either be primitive values (like strings and numbers) or objects created outside of rendering. If you create a new object during rendering and immediately pass it to `useDeferredValue`, it will be different on every render, causing unnecessary background re-renders.
+
+- When `useDeferredValue` receives a different value (compared with [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is)), in addition to the current render (when it still uses the previous value), it schedules a re-render in the background with the new value. The background re-render is interruptible: if there's another update to the `value`, React will restart the background re-render from scratch. For example, if the user is typing into an input faster than a chart receiving its deferred value can re-render, the chart will only re-render after the user stops typing.
+
+- `useDeferredValue` is integrated with [`<Suspense>`.](/reference/react/Suspense) If the background update caused by a new value suspends the UI, the user will not see the fallback. They will keep seeing the old deferred value until the data loads.
+
+- `useDeferredValue` does not by itself prevent extra network requests.
+
+- There is no fixed delay caused by `useDeferredValue` itself. As soon as React finishes the original re-render, React will immediately start working on the background re-render with the new deferred value. However, any updates caused by events (like typing) will interrupt the background re-render and get prioritized over it.
+
+- The background re-render caused by `useDeferredValue` does not fire Effects until it's committed to the screen. If the background re-render suspends, its Effects will run after the data loads and the UI updates.
+
+---
+
+## Usage {/*usage*/}
+
+### Showing stale content while fresh content is loading {/*showing-stale-content-while-fresh-content-is-loading*/}
+
+Call `useDeferredValue` at the top level of your component to defer updating some part of your UI.
+
+```js [[1, 5, "query"], [2, 5, "deferredQuery"]]
+import { useState, useDeferredValue } from 'react';
+
+function SearchPage() {
+  const [query, setQuery] = useState('');
+  const deferredQuery = useDeferredValue(query);
+  // ...
+}
+```
+
+During the initial render, the <CodeStep step={2}>deferred value</CodeStep> will be the same as the <CodeStep step={1}>value</CodeStep> you provided.
+
+During updates, the <CodeStep step={2}>deferred value</CodeStep> will "lag behind" the latest <CodeStep step={1}>value</CodeStep>. In particular, React will first re-render *without* updating the deferred value, and then try to re-render with the newly received value in background.
+
+**Let's walk through an example to see when this is useful.**
+
+<Note>
+
+This example assumes you use one of Suspense-enabled data sources:
+
+- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/advanced-features/react-18)
+- Lazy-loading component code with [`lazy`](/reference/react/lazy)
+
+[Learn more about Suspense and its limitations.](/reference/react/Suspense)
+
+</Note>
+
+
+In this example, the `SearchResults` component [suspends](/reference/react/Suspense#displaying-a-fallback-while-content-is-loading) while fetching the search results. Try typing `"a"`, waiting for the results, and then editing it to `"ab"`. The results for `"a"` will get replaced by the loading fallback.
+
+<Sandpack>
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "experimental",
+    "react-dom": "experimental"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+```js App.js
+import { Suspense, useState } from 'react';
+import SearchResults from './SearchResults.js';
+
+export default function App() {
+  const [query, setQuery] = useState('');
+  return (
+    <>
+      <label>
+        Search albums:
+        <input value={query} onChange={e => setQuery(e.target.value)} />
+      </label>
+      <Suspense fallback={<h2>Loading...</h2>}>
+        <SearchResults query={query} />
+      </Suspense>
+    </>
+  );
+}
+```
+
+```js SearchResults.js hidden
+import { fetchData } from './data.js';
+
+// Note: this component is written using an experimental API
+// that's not yet available in stable versions of React.
+
+// For a realistic example you can follow today, try a framework
+// that's integrated with Suspense, like Relay or Next.js.
+
+export default function SearchResults({ query }) {
+  if (query === '') {
+    return null;
+  }
+  const albums = use(fetchData(`/search?q=${query}`));
+  if (albums.length === 0) {
+    return <p>No matches for <i>"{query}"</i></p>;
+  }
+  return (
+    <ul>
+      {albums.map(album => (
+        <li key={album.id}>
+          {album.title} ({album.year})
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+// This is a workaround for a bug to get the demo running.
+// TODO: replace with real implementation when the bug is fixed.
+function use(promise) {
+  if (promise.status === 'fulfilled') {
+    return promise.value;
+  } else if (promise.status === 'rejected') {
+    throw promise.reason;
+  } else if (promise.status === 'pending') {
+    throw promise;
+  } else {
+    promise.status = 'pending';
+    promise.then(
+      result => {
+        promise.status = 'fulfilled';
+        promise.value = result;
+      },
+      reason => {
+        promise.status = 'rejected';
+        promise.reason = reason;
+      },      
+    );
+    throw promise;
+  }
+}
+```
+
+```js data.js hidden
+// Note: the way you would do data fetching depends on
+// the framework that you use together with Suspense.
+// Normally, the caching logic would be inside a framework.
+
+let cache = new Map();
+
+export function fetchData(url) {
+  if (!cache.has(url)) {
+    cache.set(url, getData(url));
+  }
+  return cache.get(url);
+}
+
+async function getData(url) {
+  if (url.startsWith('/search?q=')) {
+    return await getSearchResults(url.slice('/search?q='.length));
+  } else {
+    throw Error('Not implemented');
+  }
+}
+
+async function getSearchResults(query) {
+  // Add a fake delay to make waiting noticeable.
+  await new Promise(resolve => {
+    setTimeout(resolve, 500);
+  });
+
+  const allAlbums = [{
+    id: 13,
+    title: 'Let It Be',
+    year: 1970
+  }, {
+    id: 12,
+    title: 'Abbey Road',
+    year: 1969
+  }, {
+    id: 11,
+    title: 'Yellow Submarine',
+    year: 1969
+  }, {
+    id: 10,
+    title: 'The Beatles',
+    year: 1968
+  }, {
+    id: 9,
+    title: 'Magical Mystery Tour',
+    year: 1967
+  }, {
+    id: 8,
+    title: 'Sgt. Pepper\'s Lonely Hearts Club Band',
+    year: 1967
+  }, {
+    id: 7,
+    title: 'Revolver',
+    year: 1966
+  }, {
+    id: 6,
+    title: 'Rubber Soul',
+    year: 1965
+  }, {
+    id: 5,
+    title: 'Help!',
+    year: 1965
+  }, {
+    id: 4,
+    title: 'Beatles For Sale',
+    year: 1964
+  }, {
+    id: 3,
+    title: 'A Hard Day\'s Night',
+    year: 1964
+  }, {
+    id: 2,
+    title: 'With The Beatles',
+    year: 1963
+  }, {
+    id: 1,
+    title: 'Please Please Me',
+    year: 1963
+  }];
+
+  const lowerQuery = query.trim().toLowerCase();
+  return allAlbums.filter(album => {
+    const lowerTitle = album.title.toLowerCase();
+    return (
+      lowerTitle.startsWith(lowerQuery) ||
+      lowerTitle.indexOf(' ' + lowerQuery) !== -1
+    )
+  });
+}
+```
+
+```css
+input { margin: 10px; }
+```
+
+</Sandpack>
+
+A common alternative UI pattern is to *defer* updating the list of results and to keep showing the previous results until the new results are ready. The `useDeferredValue` Hook lets you pass a deferred version of the query down: 
+
+```js {3,11}
+export default function App() {
+  const [query, setQuery] = useState('');
+  const deferredQuery = useDeferredValue(query);
+  return (
+    <>
+      <label>
+        Search albums:
+        <input value={query} onChange={e => setQuery(e.target.value)} />
+      </label>
+      <Suspense fallback={<h2>Loading...</h2>}>
+        <SearchResults query={deferredQuery} />
+      </Suspense>
+    </>
+  );
+}
+```
+
+The `query` will update immediately, so the input will display the new value. However, the `deferredQuery` will keep its previous value until the data has loaded, so `SearchResults` will show the stale results for a bit.
+
+Enter `"a"` in the example below, wait for the results to load, and then edit the input to `"ab"`. Notice how instead of the Suspense fallback, you now see the stale result list until the new results have loaded:
+
+<Sandpack>
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "experimental",
+    "react-dom": "experimental"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+```js App.js
+import { Suspense, useState, useDeferredValue } from 'react';
+import SearchResults from './SearchResults.js';
+
+export default function App() {
+  const [query, setQuery] = useState('');
+  const deferredQuery = useDeferredValue(query);
+  return (
+    <>
+      <label>
+        Search albums:
+        <input value={query} onChange={e => setQuery(e.target.value)} />
+      </label>
+      <Suspense fallback={<h2>Loading...</h2>}>
+        <SearchResults query={deferredQuery} />
+      </Suspense>
+    </>
+  );
+}
+```
+
+```js SearchResults.js hidden
+import { fetchData } from './data.js';
+
+// Note: this component is written using an experimental API
+// that's not yet available in stable versions of React.
+
+// For a realistic example you can follow today, try a framework
+// that's integrated with Suspense, like Relay or Next.js.
+
+export default function SearchResults({ query }) {
+  if (query === '') {
+    return null;
+  }
+  const albums = use(fetchData(`/search?q=${query}`));
+  if (albums.length === 0) {
+    return <p>No matches for <i>"{query}"</i></p>;
+  }
+  return (
+    <ul>
+      {albums.map(album => (
+        <li key={album.id}>
+          {album.title} ({album.year})
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+// This is a workaround for a bug to get the demo running.
+// TODO: replace with real implementation when the bug is fixed.
+function use(promise) {
+  if (promise.status === 'fulfilled') {
+    return promise.value;
+  } else if (promise.status === 'rejected') {
+    throw promise.reason;
+  } else if (promise.status === 'pending') {
+    throw promise;
+  } else {
+    promise.status = 'pending';
+    promise.then(
+      result => {
+        promise.status = 'fulfilled';
+        promise.value = result;
+      },
+      reason => {
+        promise.status = 'rejected';
+        promise.reason = reason;
+      },      
+    );
+    throw promise;
+  }
+}
+```
+
+```js data.js hidden
+// Note: the way you would do data fetching depends on
+// the framework that you use together with Suspense.
+// Normally, the caching logic would be inside a framework.
+
+let cache = new Map();
+
+export function fetchData(url) {
+  if (!cache.has(url)) {
+    cache.set(url, getData(url));
+  }
+  return cache.get(url);
+}
+
+async function getData(url) {
+  if (url.startsWith('/search?q=')) {
+    return await getSearchResults(url.slice('/search?q='.length));
+  } else {
+    throw Error('Not implemented');
+  }
+}
+
+async function getSearchResults(query) {
+  // Add a fake delay to make waiting noticeable.
+  await new Promise(resolve => {
+    setTimeout(resolve, 500);
+  });
+
+  const allAlbums = [{
+    id: 13,
+    title: 'Let It Be',
+    year: 1970
+  }, {
+    id: 12,
+    title: 'Abbey Road',
+    year: 1969
+  }, {
+    id: 11,
+    title: 'Yellow Submarine',
+    year: 1969
+  }, {
+    id: 10,
+    title: 'The Beatles',
+    year: 1968
+  }, {
+    id: 9,
+    title: 'Magical Mystery Tour',
+    year: 1967
+  }, {
+    id: 8,
+    title: 'Sgt. Pepper\'s Lonely Hearts Club Band',
+    year: 1967
+  }, {
+    id: 7,
+    title: 'Revolver',
+    year: 1966
+  }, {
+    id: 6,
+    title: 'Rubber Soul',
+    year: 1965
+  }, {
+    id: 5,
+    title: 'Help!',
+    year: 1965
+  }, {
+    id: 4,
+    title: 'Beatles For Sale',
+    year: 1964
+  }, {
+    id: 3,
+    title: 'A Hard Day\'s Night',
+    year: 1964
+  }, {
+    id: 2,
+    title: 'With The Beatles',
+    year: 1963
+  }, {
+    id: 1,
+    title: 'Please Please Me',
+    year: 1963
+  }];
+
+  const lowerQuery = query.trim().toLowerCase();
+  return allAlbums.filter(album => {
+    const lowerTitle = album.title.toLowerCase();
+    return (
+      lowerTitle.startsWith(lowerQuery) ||
+      lowerTitle.indexOf(' ' + lowerQuery) !== -1
+    )
+  });
+}
+```
+
+```css
+input { margin: 10px; }
+```
+
+</Sandpack>
+
+<DeepDive>
+
+#### How does deferring a value work under the hood? {/*how-does-deferring-a-value-work-under-the-hood*/}
+
+You can think of it as happening in two steps:
+
+1. **First, React re-renders with the new `query` (`"ab"`) but with the old `deferredQuery` (still `"a")`.** The `deferredQuery` value, which you pass to the result list, is *deferred:* it "lags behind" the `query` value.
+
+2. **In background, React tries to re-render with *both* `query` and `deferredQuery` updated to `"ab"`.** If this re-render completes, React will show it on the screen. However, if it suspends (the results for `"ab"` have not loaded yet), React will abandon this rendering attempt, and retry this re-render again after the data has loaded. The user will keep seeing the stale deferred value until the data is ready.
+
+The deferred "background" rendering is interruptible. For example, if you type into the input again, React will abandon it and restart with the new value. React will always use the latest provided value.
+
+Note that there is still a network request per each keystroke. What's being deferred here is displaying results (until they're ready), not the network requests themselves. Even if the user continues typing, responses for each keystroke get cached, so pressing Backspace is instant and doesn't fetch again.
+
+</DeepDive>
+
+---
+
+### Indicating that the content is stale {/*indicating-that-the-content-is-stale*/}
+
+In the example above, there is no indication that the result list for the latest query is still loading. This can be confusing to the user if the new results take a while to load. To make it more obvious to the user that the result list does not match the latest query, you can add a visual indication when the stale result list is displayed:
+
+```js {2}
+<div style={{
+  opacity: query !== deferredQuery ? 0.5 : 1,
+}}>
+  <SearchResults query={deferredQuery} />
+</div>
+```
+
+With this change, as soon as you start typing, the stale result list gets slightly dimmed until the new result list loads. You can also add a CSS transition to delay dimming so that it feels gradual, like in the example below:
+
+<Sandpack>
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "experimental",
+    "react-dom": "experimental"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+```js App.js
+import { Suspense, useState, useDeferredValue } from 'react';
+import SearchResults from './SearchResults.js';
+
+export default function App() {
+  const [query, setQuery] = useState('');
+  const deferredQuery = useDeferredValue(query);
+  const isStale = query !== deferredQuery;
+  return (
+    <>
+      <label>
+        Search albums:
+        <input value={query} onChange={e => setQuery(e.target.value)} />
+      </label>
+      <Suspense fallback={<h2>Loading...</h2>}>
+        <div style={{
+          opacity: isStale ? 0.5 : 1,
+          transition: isStale ? 'opacity 0.2s 0.2s linear' : 'opacity 0s 0s linear'
+        }}>
+          <SearchResults query={deferredQuery} />
+        </div>
+      </Suspense>
+    </>
+  );
+}
+```
+
+```js SearchResults.js hidden
+import { fetchData } from './data.js';
+
+// Note: this component is written using an experimental API
+// that's not yet available in stable versions of React.
+
+// For a realistic example you can follow today, try a framework
+// that's integrated with Suspense, like Relay or Next.js.
+
+export default function SearchResults({ query }) {
+  if (query === '') {
+    return null;
+  }
+  const albums = use(fetchData(`/search?q=${query}`));
+  if (albums.length === 0) {
+    return <p>No matches for <i>"{query}"</i></p>;
+  }
+  return (
+    <ul>
+      {albums.map(album => (
+        <li key={album.id}>
+          {album.title} ({album.year})
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+// This is a workaround for a bug to get the demo running.
+// TODO: replace with real implementation when the bug is fixed.
+function use(promise) {
+  if (promise.status === 'fulfilled') {
+    return promise.value;
+  } else if (promise.status === 'rejected') {
+    throw promise.reason;
+  } else if (promise.status === 'pending') {
+    throw promise;
+  } else {
+    promise.status = 'pending';
+    promise.then(
+      result => {
+        promise.status = 'fulfilled';
+        promise.value = result;
+      },
+      reason => {
+        promise.status = 'rejected';
+        promise.reason = reason;
+      },      
+    );
+    throw promise;
+  }
+}
+```
+
+```js data.js hidden
+// Note: the way you would do data fetching depends on
+// the framework that you use together with Suspense.
+// Normally, the caching logic would be inside a framework.
+
+let cache = new Map();
+
+export function fetchData(url) {
+  if (!cache.has(url)) {
+    cache.set(url, getData(url));
+  }
+  return cache.get(url);
+}
+
+async function getData(url) {
+  if (url.startsWith('/search?q=')) {
+    return await getSearchResults(url.slice('/search?q='.length));
+  } else {
+    throw Error('Not implemented');
+  }
+}
+
+async function getSearchResults(query) {
+  // Add a fake delay to make waiting noticeable.
+  await new Promise(resolve => {
+    setTimeout(resolve, 500);
+  });
+
+  const allAlbums = [{
+    id: 13,
+    title: 'Let It Be',
+    year: 1970
+  }, {
+    id: 12,
+    title: 'Abbey Road',
+    year: 1969
+  }, {
+    id: 11,
+    title: 'Yellow Submarine',
+    year: 1969
+  }, {
+    id: 10,
+    title: 'The Beatles',
+    year: 1968
+  }, {
+    id: 9,
+    title: 'Magical Mystery Tour',
+    year: 1967
+  }, {
+    id: 8,
+    title: 'Sgt. Pepper\'s Lonely Hearts Club Band',
+    year: 1967
+  }, {
+    id: 7,
+    title: 'Revolver',
+    year: 1966
+  }, {
+    id: 6,
+    title: 'Rubber Soul',
+    year: 1965
+  }, {
+    id: 5,
+    title: 'Help!',
+    year: 1965
+  }, {
+    id: 4,
+    title: 'Beatles For Sale',
+    year: 1964
+  }, {
+    id: 3,
+    title: 'A Hard Day\'s Night',
+    year: 1964
+  }, {
+    id: 2,
+    title: 'With The Beatles',
+    year: 1963
+  }, {
+    id: 1,
+    title: 'Please Please Me',
+    year: 1963
+  }];
+
+  const lowerQuery = query.trim().toLowerCase();
+  return allAlbums.filter(album => {
+    const lowerTitle = album.title.toLowerCase();
+    return (
+      lowerTitle.startsWith(lowerQuery) ||
+      lowerTitle.indexOf(' ' + lowerQuery) !== -1
+    )
+  });
+}
+```
+
+```css
+input { margin: 10px; }
+```
+
+</Sandpack>
+
+---
+
+### Deferring re-rendering for a part of the UI {/*deferring-re-rendering-for-a-part-of-the-ui*/}
+
+You can also apply `useDeferredValue` as a performance optimization. It is useful when a part of your UI is slow to re-render, there's no easy way to optimize it, and you want to prevent it from blocking the rest of the UI.
+
+Imagine you have a text field and a component (like a chart or a long list) that re-renders on every keystroke:
+
+```js
+function App() {
+  const [text, setText] = useState('');
+  return (
+    <>
+      <input value={text} onChange={e => setText(e.target.value)} />
+      <SlowList text={text} />
+    </>
+  );
+}
+```
+
+First, optimize `SlowList` to skip re-rendering when its props are the same. To do this, [wrap it in `memo`:](/reference/react/memo#skipping-re-rendering-when-props-are-unchanged)
+
+```js {1,3}
+const SlowList = memo(function SlowList({ text }) {
+  // ...
+});
+```
+
+However, this only helps if the `SlowList` props are *the same* as during the previous render. The problem you're facing now is that it's slow when they're *different,* and when you actually need to show different visual output.
+
+Concretely, the main performance problem is that whenever you type into the input, the `SlowList` receives new props, and re-rendering its entire tree makes the typing feel janky. In this case, `useDeferredValue` lets you prioritize updating the input (which must be fast) over updating the result list (which is allowed to be slower):
+
+```js {3,7}
+function App() {
+  const [text, setText] = useState('');
+  const deferredText = useDeferredValue(text);
+  return (
+    <>
+      <input value={text} onChange={e => setText(e.target.value)} />
+      <SlowList text={deferredText} />
+    </>
+  );
+}
+```
+
+This does not make re-rendering of the `SlowList` faster. However, it tells React that re-rendering the list can be deprioritized so that it doesn't block the keystrokes. The list will "lag behind" the input and then "catch up". Like before, React will attempt to update the list as soon as possible, but it will not block the user from typing again.
+
+<Recipes titleText="The difference between useDeferredValue and unoptimized re-rendering" titleId="examples">
+
+#### Deferred re-rendering of the list {/*deferred-re-rendering-of-the-list*/}
+
+In this example, each item in the `SlowList` component is **artificially slowed down** so that you can see how `useDeferredValue` lets you keep the input responsive. Type into the input and notice that typing feels snappy while the list "lags behind" it.
+
+<Sandpack>
+
+```js
+import { useState, useDeferredValue } from 'react';
+import SlowList from './SlowList.js';
+
+export default function App() {
+  const [text, setText] = useState('');
+  const deferredText = useDeferredValue(text);
+  return (
+    <>
+      <input value={text} onChange={e => setText(e.target.value)} />
+      <SlowList text={deferredText} />
+    </>
+  );
+}
+```
+
+```js SlowList.js
+import { memo } from 'react';
+
+const SlowList = memo(function SlowList({ text }) {
+  // Log once. The actual slowdown is inside SlowItem.
+  console.log('[ARTIFICIALLY SLOW] Rendering 250 <SlowItem />');
+
+  let items = [];
+  for (let i = 0; i < 250; i++) {
+    items.push(<SlowItem key={i} text={text} />);
+  }
+  return (
+    <ul className="items">
+      {items}
+    </ul>
+  );
+});
+
+function SlowItem({ text }) {
+  let startTime = performance.now();
+  while (performance.now() - startTime < 1) {
+    // Do nothing for 1 ms per item to emulate extremely slow code
+  }
+
+  return (
+    <li className="item">
+      Text: {text}
+    </li>
+  )
+}
+
+export default SlowList;
+```
+
+```css
+.items {
+  padding: 0;
+}
+
+.item {
+  list-style: none;
+  display: block;
+  height: 40px;
+  padding: 5px;
+  margin-top: 10px;
+  border-radius: 4px;
+  border: 1px solid #aaa;
+}
+```
+
+</Sandpack>
+
+<Solution />
+
+#### Unoptimized re-rendering of the list {/*unoptimized-re-rendering-of-the-list*/}
+
+In this example, each item in the `SlowList` component is **artificially slowed down**, but there is no `useDeferredValue`.
+
+Notice how typing into the input feels very janky. This is because without `useDeferredValue`, each keystroke forces the entire list to re-render immediately in a non-interruptible way.
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+import SlowList from './SlowList.js';
+
+export default function App() {
+  const [text, setText] = useState('');
+  return (
+    <>
+      <input value={text} onChange={e => setText(e.target.value)} />
+      <SlowList text={text} />
+    </>
+  );
+}
+```
+
+```js SlowList.js
+import { memo } from 'react';
+
+const SlowList = memo(function SlowList({ text }) {
+  // Log once. The actual slowdown is inside SlowItem.
+  console.log('[ARTIFICIALLY SLOW] Rendering 250 <SlowItem />');
+
+  let items = [];
+  for (let i = 0; i < 250; i++) {
+    items.push(<SlowItem key={i} text={text} />);
+  }
+  return (
+    <ul className="items">
+      {items}
+    </ul>
+  );
+});
+
+function SlowItem({ text }) {
+  let startTime = performance.now();
+  while (performance.now() - startTime < 1) {
+    // Do nothing for 1 ms per item to emulate extremely slow code
+  }
+
+  return (
+    <li className="item">
+      Text: {text}
+    </li>
+  )
+}
+
+export default SlowList;
+```
+
+```css
+.items {
+  padding: 0;
+}
+
+.item {
+  list-style: none;
+  display: block;
+  height: 40px;
+  padding: 5px;
+  margin-top: 10px;
+  border-radius: 4px;
+  border: 1px solid #aaa;
+}
+```
+
+</Sandpack>
+
+<Solution />
+
+</Recipes>
+
+<Pitfall>
+
+This optimization requires `SlowList` to be wrapped in [`memo`.](/reference/react/memo) This is because whenever the `text` changes, React needs to be able to re-render the parent component quickly. During that re-render, `deferredText` still has its previous value, so `SlowList` is able to skip re-rendering (its props have not changed). Without [`memo`,](/reference/react/memo) it would have to re-render anyway, defeating the point of the optimization.
+
+</Pitfall>
+
+<DeepDive>
+
+#### How is deferring a value different from debouncing and throttling? {/*how-is-deferring-a-value-different-from-debouncing-and-throttling*/}
+
+There are two common optimization techniques you might have used before in this scenario:
+
+- *Debouncing* means you'd wait for the user to stop typing (e.g. for a second) before updating the list.
+- *Throttling* means you'd update the list every once in a while (e.g. at most once a second).
+
+While these techniques are helpful in some cases, `useDeferredValue` is better suited to optimizing rendering because it is deeply integrated with React itself and adapts to the user's device.
+
+Unlike debouncing or throttling, it doesn't require choosing any fixed delay. If the user's device is fast (e.g. powerful laptop), the deferred re-render would happen almost immediately and wouldn't be noticeable. If the user's device is slow, the list would "lag behind" the input proportionally to how slow the device is.
+
+Also, unlike with debouncing or throttling, deferred re-renders done by `useDeferredValue` are interruptible by default. This means that if React is in the middle of re-rendering a large list, but the user makes another keystroke, React will abandon that re-render, handle the keystroke, and then start rendering in background again. By contrast, debouncing and throttling still produce a janky experience because they're *blocking:* they merely postpone the moment when rendering blocks the keystroke.
+
+If the work you're optimizing doesn't happen during rendering, debouncing and throttling are still useful. For example, they can let you fire fewer network requests. You can also use these techniques together.
+
+</DeepDive>
diff --git a/beta/src/content/reference/react/useEffect.md b/beta/src/content/reference/react/useEffect.md
new file mode 100644
index 000000000..41c65f1a4
--- /dev/null
+++ b/beta/src/content/reference/react/useEffect.md
@@ -0,0 +1,1863 @@
+---
+title: useEffect
+---
+
+<Intro>
+
+`useEffect` is a React Hook that lets you [synchronize a component with an external system.](/learn/synchronizing-with-effects)
+
+```js
+useEffect(setup, dependencies?)
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `useEffect(setup, dependencies?)` {/*useeffect*/}
+
+Call `useEffect` at the top level of your component to declare an Effect:
+
+```js
+import { useEffect } from 'react';
+import { createConnection } from './chat.js';
+
+function ChatRoom({ roomId }) {
+  const [serverUrl, setServerUrl] = useState('https://localhost:1234');
+
+  useEffect(() => {
+    const connection = createConnection(serverUrl, roomId);
+    connection.connect();
+    return () => {
+      connection.disconnect();
+    };
+  }, [serverUrl, roomId]);
+  // ...
+}
+```
+
+[See more examples below.](#usage)
+
+#### Parameters {/*parameters*/}
+
+* `setup`: The function with your Effect's logic. Your setup function may also optionally return a *cleanup* function. When your component is first added to the DOM, React will run your setup function. After every re-render with changed dependencies, React will first run the cleanup function (if you provided it) with the old values, and then run your setup function with the new values. After your component is removed from the DOM, React will run your cleanup function one last time.
+ 
+* **optional** `dependencies`: The list of all reactive values referenced inside of the `setup` code. Reactive values include props, state, and all the variables and functions declared directly inside your component body. If your linter is [configured for React](/learn/editor-setup#linting), it will verify that every reactive value is correctly specified as a dependency. The list of dependencies must have a constant number of items and be written inline like `[dep1, dep2, dep3]`. React will compare each dependency with its previous value using the [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison algorithm. If you don't specify the dependencies at all, your Effect will re-run after every re-render of the component. [See the difference between passing an array of dependencies, an empty array, and no dependencies at all.](#examples-dependencies)
+
+#### Returns {/*returns*/}
+
+`useEffect` returns `undefined`.
+
+#### Caveats {/*caveats*/}
+
+* `useEffect` is a Hook, so you can only call it **at the top level of your component** or your own Hooks. You can't call it inside loops or conditions. If you need that, extract a new component and move the state into it.
+
+* If you're **not trying to synchronize with some external system,** [you probably don't need an Effect.](/learn/you-might-not-need-an-effect)
+
+* When Strict Mode is on, React will **run one extra development-only setup+cleanup cycle** before the first real setup. This is a stress-test that ensures that your cleanup logic "mirrors" your setup logic and that it stops or undoes whatever the setup is doing. If this causes a problem, [you need to implement the cleanup function.](/learn/synchronizing-with-effects#how-to-handle-the-effect-firing-twice-in-development)
+
+* If some of your dependencies are objects or functions defined inside the component, there is a risk that they will **cause the Effect to re-run more often than needed.** To fix this, remove unnecessary [object](#removing-unnecessary-object-dependencies) and [function](#removing-unnecessary-function-dependencies) dependencies. You can also [extract state updates](#updating-state-based-on-previous-state-from-an-effect) and [non-reactive logic](#reading-the-latest-props-and-state-from-an-effect) outside of your Effect.
+
+* If your Effect wasn't caused by an interaction (like a click), React will let the browser **paint the updated screen first before running your Effect.** If your Effect is doing something visual (for example, positioning a tooltip), and the delay is noticeable (for example, it flickers), you need to replace `useEffect` with [`useLayoutEffect`.](/reference/react/useLayoutEffect)
+
+* Even if your Effect was caused by an interaction (like a click), **the browser may repaint the screen before processing the state updates inside your Effect.** Usually, that's what you want. However, if you must block the browser from repainting the screen, you need to replace `useEffect` with [`useLayoutEffect`.](/reference/react/useLayoutEffect)
+
+* Effects **only run on the client.** They don't run during server rendering.
+
+---
+
+## Usage {/*usage*/}
+
+### Connecting to an external system {/*connecting-to-an-external-system*/}
+
+Sometimes, your component might need to stay connected to the network, some browser API, or a third-party library, while it is displayed on the page. Such systems aren't controlled by React, so they are called *external.*
+
+To [connect your component to some external system,](/learn/synchronizing-with-effects) call `useEffect` at the top level of your component:
+
+```js [[1, 8, "const connection = createConnection(serverUrl, roomId);"], [1, 9, "connection.connect();"], [2, 11, "connection.disconnect();"], [3, 13, "[serverUrl, roomId]"]]
+import { useEffect } from 'react';
+import { createConnection } from './chat.js';
+
+function ChatRoom({ roomId }) {
+  const [serverUrl, setServerUrl] = useState('https://localhost:1234');
+
+  useEffect(() => {
+  	const connection = createConnection(serverUrl, roomId);
+    connection.connect();
+  	return () => {
+      connection.disconnect();
+  	};
+  }, [serverUrl, roomId]);
+  // ...
+}
+```
+
+You need to pass two arguments to `useEffect`:
+
+1. A *setup function* with <CodeStep step={1}>setup code</CodeStep> that connects to that system.
+   - It should return a *cleanup function* with <CodeStep step={2}>cleanup code</CodeStep> that disconnects from that system.
+2. A <CodeStep step={3}>list of dependencies</CodeStep> including every value from your component used inside of those functions.
+
+**React calls your setup and cleanup functions whenever it's necessary, which may happen multiple times:**
+
+1. Your <CodeStep step={1}>setup code</CodeStep> runs when your component is added to the page *(mounts)*.
+2. After every re-render of your component where the <CodeStep step={3}>dependencies</CodeStep> have changed:
+   - First, your <CodeStep step={2}>cleanup code</CodeStep> runs with the old props and state.
+   - Then, your <CodeStep step={1}>setup code</CodeStep> runs with the new props and state.
+3. Your <CodeStep step={2}>cleanup code</CodeStep> runs one final time after your component is removed from the page *(unmounts).*
+
+**Let's illustrate this sequence for the example above.**  
+
+When the `ChatRoom` component above gets added to the page, it will connect to the chat room with the initial `serverUrl` and `roomId`. If either `serverUrl` or `roomId` change as a result of a re-render (say, if the user picks a different chat room in a dropdown), your Effect will *disconnect from the previous room, and connect to the next one.* When the `ChatRoom` component is finally removed from the page, your Effect will disconnect one last time.
+
+**To [help you find bugs,](/learn/synchronizing-with-effects#step-3-add-cleanup-if-needed) in development React runs <CodeStep step={1}>setup</CodeStep> and <CodeStep step={2}>cleanup</CodeStep> one extra time before the actual <CodeStep step={1}>setup</CodeStep>.** This is a stress-test that verifies your Effect's logic is implemented correctly. If this causes visible issues, your cleanup function is missing some logic. The cleanup function should stop or undo whatever the setup function was doing. The rule of thumb is that the user shouldn't be able to distinguish between the setup being called once (as in production) and a *setup* → *cleanup* → *setup* sequence (as in development). [See common solutions.](/learn/synchronizing-with-effects#how-to-handle-the-effect-firing-twice-in-development)
+
+**Try to [write every Effect as an independent process](/learn/lifecycle-of-reactive-effects#each-effect-represents-a-separate-synchronization-process) and [only think about a single setup/cleanup cycle at a time.](/learn/lifecycle-of-reactive-effects#thinking-from-the-effects-perspective)** It shouldn't matter whether your component is mounting, updating, or unmounting. When your cleanup logic correctly "mirrors" the setup logic, your Effect will be resilient to running setup and cleanup as often as needed.
+
+<Note>
+
+An Effect lets you [keep your component synchronized](/learn/synchronizing-with-effects) with some external system (like a chat service). Here, *external system* means any piece of code that's not controlled by React, such as:
+
+* A timer managed with <CodeStep step={1}>[`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/setInterval)</CodeStep> and <CodeStep step={2}>[`clearInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/clearInterval)</CodeStep>.
+* An event subscription using <CodeStep step={1}>[`window.addEventListener()`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)</CodeStep> and <CodeStep step={2}>[`window.removeEventListener()`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener)</CodeStep>.
+* A third-party animation library with an API like <CodeStep step={1}>`animation.start()`</CodeStep> and <CodeStep step={2}>`animation.reset()`</CodeStep>.
+
+**If you're not connecting to any external system, [you probably don't need an Effect.](/learn/you-might-not-need-an-effect)**
+
+</Note>
+
+<Recipes titleText="Examples of connecting to an external system" titleId="examples-connecting">
+
+#### Connecting to a chat server {/*connecting-to-a-chat-server*/}
+
+In this example, the `ChatRoom` component uses an Effect to stay connected to an external system defined in `chat.js`. Press "Open chat" to make the `ChatRoom` component appear. This sandbox runs in development mode, so there is an extra connect-and-disconnect cycle, as [explained here.](/learn/synchronizing-with-effects#step-3-add-cleanup-if-needed) Try changing the `roomId` and `serverUrl` using the dropdown and the input, and see how the Effect re-connects to the chat. Press "Close chat" to see the Effect disconnect one last time.
+
+<Sandpack>
+
+```js
+import { useState, useEffect } from 'react';
+import { createConnection } from './chat.js';
+
+function ChatRoom({ roomId }) {
+  const [serverUrl, setServerUrl] = useState('https://localhost:1234');
+
+  useEffect(() => {
+    const connection = createConnection(serverUrl, roomId);
+    connection.connect();
+    return () => {
+      connection.disconnect();
+    };
+  }, [roomId, serverUrl]);
+
+  return (
+    <>
+      <label>
+        Server URL:{' '}
+        <input
+          value={serverUrl}
+          onChange={e => setServerUrl(e.target.value)}
+        />
+      </label>
+      <h1>Welcome to the {roomId} room!</h1>
+    </>
+  );
+}
+
+export default function App() {
+  const [roomId, setRoomId] = useState('general');
+  const [show, setShow] = useState(false);
+  return (
+    <>
+      <label>
+        Choose the chat room:{' '}
+        <select
+          value={roomId}
+          onChange={e => setRoomId(e.target.value)}
+        >
+          <option value="general">general</option>
+          <option value="travel">travel</option>
+          <option value="music">music</option>
+        </select>
+      </label>
+      <button onClick={() => setShow(!show)}>
+        {show ? 'Close chat' : 'Open chat'}
+      </button>
+      {show && <hr />}
+      {show && <ChatRoom roomId={roomId} />}
+    </>
+  );
+}
+```
+
+```js chat.js
+export function createConnection(serverUrl, roomId) {
+  // A real implementation would actually connect to the server
+  return {
+    connect() {
+      console.log('✅ Connecting to "' + roomId + '" room at ' + serverUrl + '...');
+    },
+    disconnect() {
+      console.log('❌ Disconnected from "' + roomId + '" room at ' + serverUrl);
+    }
+  };
+}
+```
+
+```css
+input { display: block; margin-bottom: 20px; }
+button { margin-left: 10px; }
+```
+
+</Sandpack>
+
+<Solution />
+
+#### Listening to a global browser event {/*listening-to-a-global-browser-event*/}
+
+In this example, the external system is the browser DOM itself. Normally, you'd specify event listeners with JSX, but you can't listen to the global [`window`](https://developer.mozilla.org/en-US/docs/Web/API/Window) object this way. An Effect lets you connect to the `window` object and listen to its events. Listening to the `pointermove` event lets you track the cursor (or finger) position and update the red dot to move with it.
+
+<Sandpack>
+
+```js
+import { useState, useEffect } from 'react';
+
+export default function App() {
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+
+  useEffect(() => {
+    function handleMove(e) {
+      setPosition({ x: e.clientX, y: e.clientY });
+    }
+    window.addEventListener('pointermove', handleMove);
+    return () => {
+      window.removeEventListener('pointermove', handleMove);
+    };
+  }, []);
+
+  return (
+    <div style={{
+      position: 'absolute',
+      backgroundColor: 'pink',
+      borderRadius: '50%',
+      opacity: 0.6,
+      transform: `translate(${position.x}px, ${position.y}px)`,
+      pointerEvents: 'none',
+      left: -20,
+      top: -20,
+      width: 40,
+      height: 40,
+    }} />
+  );
+}
+```
+
+```css
+body {
+  min-height: 300px;
+}
+```
+
+</Sandpack>
+
+<Solution />
+
+#### Triggering an animation {/*triggering-an-animation*/}
+
+In this example, the external system is the animation library in `animation.js`. It provides a JavaScript class called `FadeInAnimation` that takes a DOM node as an argument and exposes `start()` and `stop()` methods to control the animation. This component [uses a ref](/learn/manipulating-the-dom-with-refs) to access the underlying DOM node. The Effect reads the DOM node from the ref and automatically starts the animation for that node when the component appears.
+
+<Sandpack>
+
+```js
+import { useState, useEffect, useRef } from 'react';
+import { FadeInAnimation } from './animation.js';
+
+function Welcome() {
+  const ref = useRef(null);
+
+  useEffect(() => {
+    const animation = new FadeInAnimation(ref.current);
+    animation.start(1000);
+    return () => {
+      animation.stop();
+    };
+  }, []);
+
+  return (
+    <h1
+      ref={ref}
+      style={{
+        opacity: 0,
+        color: 'white',
+        padding: 50,
+        textAlign: 'center',
+        fontSize: 50,
+        backgroundImage: 'radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%)'
+      }}
+    >
+      Welcome
+    </h1>
+  );
+}
+
+export default function App() {
+  const [show, setShow] = useState(false);
+  return (
+    <>
+      <button onClick={() => setShow(!show)}>
+        {show ? 'Remove' : 'Show'}
+      </button>
+      <hr />
+      {show && <Welcome />}
+    </>
+  );
+}
+```
+
+```js animation.js
+export class FadeInAnimation {
+  constructor(node) {
+    this.node = node;
+  }
+  start(duration) {
+    this.duration = duration;
+    if (this.duration === 0) {
+      // Jump to end immediately
+      this.onProgress(1);
+    } else {
+      this.onProgress(0);
+      // Start animating
+      this.startTime = performance.now();
+      this.frameId = requestAnimationFrame(() => this.onFrame());
+    }
+  }
+  onFrame() {
+    const timePassed = performance.now() - this.startTime;
+    const progress = Math.min(timePassed / this.duration, 1);
+    this.onProgress(progress);
+    if (progress < 1) {
+      // We still have more frames to paint
+      this.frameId = requestAnimationFrame(() => this.onFrame());
+    }
+  }
+  onProgress(progress) {
+    this.node.style.opacity = progress;
+  }
+  stop() {
+    cancelAnimationFrame(this.frameId);
+    this.startTime = null;
+    this.frameId = null;
+    this.duration = 0;
+  }
+}
+```
+
+```css
+label, button { display: block; margin-bottom: 20px; }
+html, body { min-height: 300px; }
+```
+
+</Sandpack>
+
+<Solution />
+
+#### Controlling a modal dialog {/*controlling-a-modal-dialog*/}
+
+In this example, the external system is the browser DOM. The `ModalDialog` component renders a [`<dialog>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) element. It uses an Effect to synchronize the `isOpen` prop to the [`showModal()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal) and [`close()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/close) method calls.
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+import ModalDialog from './ModalDialog.js';
+
+export default function App() {
+  const [show, setShow] = useState(false);
+  return (
+    <>
+      <button onClick={() => setShow(true)}>
+        Open dialog
+      </button>
+      <ModalDialog isOpen={show}>
+        Hello there!
+        <br />
+        <button onClick={() => {
+          setShow(false);
+        }}>Close</button>
+      </ModalDialog>
+    </>
+  );
+}
+```
+
+```js ModalDialog.js active
+import { useEffect, useRef } from 'react';
+
+export default function ModalDialog({ isOpen, children }) {
+  const ref = useRef();
+
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+    const dialog = ref.current;
+    dialog.showModal();
+    return () => {
+      dialog.close();
+    };
+  }, [isOpen]);
+
+  return <dialog ref={ref}>{children}</dialog>;
+}
+```
+
+```css
+body {
+  min-height: 300px;
+}
+```
+
+</Sandpack>
+
+<Solution />
+
+#### Tracking element visibility {/*tracking-element-visibility*/}
+
+In this example, the external system is again the browser DOM. The `App` component displays a long list, then a `Box` component, and then another long list. Scroll the list down. Notice that when the `Box` component appears in the viewport, the background color changes to black. To implement this, the `Box` component uses an Effect to manage an [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API). This browser API notifies you when the DOM element is visible in the viewport.
+
+<Sandpack>
+
+```js
+import Box from './Box.js';
+
+export default function App() {
+  return (
+    <>
+      <LongSection />
+      <Box />
+      <LongSection />
+      <Box />
+      <LongSection />
+    </>
+  );
+}
+
+function LongSection() {
+  const items = [];
+  for (let i = 0; i < 50; i++) {
+    items.push(<li key={i}>Item #{i} (keep scrolling)</li>);
+  }
+  return <ul>{items}</ul>
+}
+```
+
+```js Box.js active
+import { useRef, useEffect } from 'react';
+
+export default function Box() {
+  const ref = useRef(null);
+
+  useEffect(() => {
+    const div = ref.current;
+    const observer = new IntersectionObserver(entries => {
+      const entry = entries[0];
+      if (entry.isIntersecting) {
+        document.body.style.backgroundColor = 'black';
+        document.body.style.color = 'white';
+      } else {
+        document.body.style.backgroundColor = 'white';
+        document.body.style.color = 'black';
+      }
+    });
+    observer.observe(div, {
+      threshold: 1.0
+    });
+    return () => {
+      observer.disconnect();
+    }
+  }, []);
+
+  return (
+    <div ref={ref} style={{
+      margin: 20,
+      height: 100,
+      width: 100,
+      border: '2px solid black',
+      backgroundColor: 'blue'
+    }} />
+  );
+}
+```
+
+</Sandpack>
+
+<Solution />
+
+</Recipes>
+
+---
+
+### Wrapping Effects in custom Hooks {/*wrapping-effects-in-custom-hooks*/}
+
+Effects are an ["escape hatch":](/learn/escape-hatches) you use them when you need to "step outside React" and when there is no better built-in solution for your use case. If you find yourself often needing to manually write Effects, it's usually a sign that you need to extract some [custom Hooks](/learn/reusing-logic-with-custom-hooks) for common behaviors that your components rely on.
+
+For example, this `useChatRoom` custom Hook "hides" the logic of your Effect behind a more declarative API:
+
+```js {1,11}
+function useChatRoom({ serverUrl, roomId }) {
+  useEffect(() => {
+    const options = {
+      serverUrl: serverUrl,
+      roomId: roomId
+    };
+    const connection = createConnection(options);
+    connection.connect();
+    return () => connection.disconnect();
+  }, [roomId, serverUrl]);
+}
+```
+
+Then you can use it from any component like this:
+
+```js {4-7}
+function ChatRoom({ roomId }) {
+  const [serverUrl, setServerUrl] = useState('https://localhost:1234');
+
+  useChatRoom({
+    roomId: roomId,
+    serverUrl: serverUrl
+  });
+  // ...
+````
+
+There are also many excellent custom Hooks for every purpose available in the React ecosystem.
+
+[Learn more about wrapping Effects in custom Hooks.](/learn/reusing-logic-with-custom-hooks)
+
+<Recipes titleText="Examples of wrapping Effects in custom Hooks" titleId="examples-custom-hooks">
+
+#### Custom `useChatRoom` Hook {/*custom-usechatroom-hook*/}
+
+This example is identical to one of the [earlier examples,](#examples-connecting) but the logic is extracted to a custom Hook.
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+import { useChatRoom } from './useChatRoom.js';
+
+function ChatRoom({ roomId }) {
+  const [serverUrl, setServerUrl] = useState('https://localhost:1234');
+
+  useChatRoom({
+    roomId: roomId,
+    serverUrl: serverUrl
+  });
+
+  return (
+    <>
+      <label>
+        Server URL:{' '}
+        <input
+          value={serverUrl}
+          onChange={e => setServerUrl(e.target.value)}
+        />
+      </label>
+      <h1>Welcome to the {roomId} room!</h1>
+    </>
+  );
+}
+
+export default function App() {
+  const [roomId, setRoomId] = useState('general');
+  const [show, setShow] = useState(false);
+  return (
+    <>
+      <label>
+        Choose the chat room:{' '}
+        <select
+          value={roomId}
+          onChange={e => setRoomId(e.target.value)}
+        >
+          <option value="general">general</option>
+          <option value="travel">travel</option>
+          <option value="music">music</option>
+        </select>
+      </label>
+      <button onClick={() => setShow(!show)}>
+        {show ? 'Close chat' : 'Open chat'}
+      </button>
+      {show && <hr />}
+      {show && <ChatRoom roomId={roomId} />}
+    </>
+  );
+}
+```
+
+```js useChatRoom.js
+import { useEffect } from 'react';
+import { createConnection } from './chat.js';
+
+export function useChatRoom({ serverUrl, roomId }) {
+  useEffect(() => {
+    const connection = createConnection(serverUrl, roomId);
+    connection.connect();
+    return () => {
+      connection.disconnect();
+    };
+  }, [roomId, serverUrl]);
+}
+```
+
+```js chat.js
+export function createConnection(serverUrl, roomId) {
+  // A real implementation would actually connect to the server
+  return {
+    connect() {
+      console.log('✅ Connecting to "' + roomId + '" room at ' + serverUrl + '...');
+    },
+    disconnect() {
+      console.log('❌ Disconnected from "' + roomId + '" room at ' + serverUrl);
+    }
+  };
+}
+```
+
+```css
+input { display: block; margin-bottom: 20px; }
+button { margin-left: 10px; }
+```
+
+</Sandpack>
+
+<Solution />
+
+#### Custom `useWindowListener` Hook {/*custom-usewindowlistener-hook*/}
+
+This example is identical to one of the [earlier examples,](#examples-connecting) but the logic is extracted to a custom Hook.
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+import { useWindowListener } from './useWindowListener.js';
+
+export default function App() {
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+
+  useWindowListener('pointermove', (e) => {
+    setPosition({ x: e.clientX, y: e.clientY });
+  });
+
+  return (
+    <div style={{
+      position: 'absolute',
+      backgroundColor: 'pink',
+      borderRadius: '50%',
+      opacity: 0.6,
+      transform: `translate(${position.x}px, ${position.y}px)`,
+      pointerEvents: 'none',
+      left: -20,
+      top: -20,
+      width: 40,
+      height: 40,
+    }} />
+  );
+}
+```
+
+```js useWindowListener.js
+import { useState, useEffect } from 'react';
+
+export function useWindowListener(eventType, listener) {
+  useEffect(() => {
+    window.addEventListener(eventType, listener);
+    return () => {
+      window.removeEventListener(eventType, listener);
+    };
+  }, [eventType, listener]);
+}
+```
+
+```css
+body {
+  min-height: 300px;
+}
+```
+
+</Sandpack>
+
+<Solution />
+
+#### Custom `useIntersectionObserver` Hook {/*custom-useintersectionobserver-hook*/}
+
+This example is identical to one of the [earlier examples,](#examples-connecting) but the logic is partially extracted to a custom Hook.
+
+<Sandpack>
+
+```js
+import Box from './Box.js';
+
+export default function App() {
+  return (
+    <>
+      <LongSection />
+      <Box />
+      <LongSection />
+      <Box />
+      <LongSection />
+    </>
+  );
+}
+
+function LongSection() {
+  const items = [];
+  for (let i = 0; i < 50; i++) {
+    items.push(<li key={i}>Item #{i} (keep scrolling)</li>);
+  }
+  return <ul>{items}</ul>
+}
+```
+
+```js Box.js active
+import { useRef, useEffect } from 'react';
+import { useIntersectionObserver } from './useIntersectionObserver.js';
+
+export default function Box() {
+  const ref = useRef(null);
+  const isIntersecting = useIntersectionObserver(ref);
+
+  useEffect(() => {
+   if (isIntersecting) {
+      document.body.style.backgroundColor = 'black';
+      document.body.style.color = 'white';
+    } else {
+      document.body.style.backgroundColor = 'white';
+      document.body.style.color = 'black';
+    }
+  }, [isIntersecting]);
+
+  return (
+    <div ref={ref} style={{
+      margin: 20,
+      height: 100,
+      width: 100,
+      border: '2px solid black',
+      backgroundColor: 'blue'
+    }} />
+  );
+}
+```
+
+```js useIntersectionObserver.js
+import { useState, useEffect } from 'react';
+
+export function useIntersectionObserver(ref) {
+  const [isIntersecting, setIsIntersecting] = useState(false);
+
+  useEffect(() => {
+    const div = ref.current;
+    const observer = new IntersectionObserver(entries => {
+      const entry = entries[0];
+      setIsIntersecting(entry.isIntersecting);
+    });
+    observer.observe(div, {
+      threshold: 1.0
+    });
+    return () => {
+      observer.disconnect();
+    }
+  }, [ref]);
+
+  return isIntersecting;
+}
+```
+
+</Sandpack>
+
+<Solution />
+
+</Recipes>
+
+---
+
+### Controlling a non-React widget {/*controlling-a-non-react-widget*/}
+
+Sometimes, you want to keep an external system synchronized to some prop or state of your component.
+
+For example, if you have a third-party map widget or a video player component written without React, you can use an Effect to call methods on it that make its state match the current state of your React component. This Effect creates an instance of a `MapWidget` class defined in `map-widget.js`. When you change the `zoomLevel` prop of the `Map` component, the Effect calls the `setZoom()` on the class instance to keep it synchronized:
+
+<Sandpack>
+
+```json package.json hidden
+{
+  "dependencies": {
+    "leaflet": "1.9.1",
+    "react": "latest",
+    "react-dom": "latest",
+    "react-scripts": "latest",
+    "remarkable": "2.0.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+```js App.js
+import { useState } from 'react';
+import Map from './Map.js';
+
+export default function App() {
+  const [zoomLevel, setZoomLevel] = useState(0);
+  return (
+    <>
+      Zoom level: {zoomLevel}x
+      <button onClick={() => setZoomLevel(zoomLevel + 1)}>+</button>
+      <button onClick={() => setZoomLevel(zoomLevel - 1)}>-</button>
+      <hr />
+      <Map zoomLevel={zoomLevel} />
+    </>
+  );
+}
+```
+
+```js Map.js active
+import { useRef, useEffect } from 'react';
+import { MapWidget } from './map-widget.js';
+
+export default function Map({ zoomLevel }) {
+  const containerRef = useRef(null);
+  const mapRef = useRef(null);
+
+  useEffect(() => {
+    if (mapRef.current === null) {
+      mapRef.current = new MapWidget(containerRef.current);
+    }
+
+    const map = mapRef.current;
+    map.setZoom(zoomLevel);
+  }, [zoomLevel]);
+
+  return (
+    <div
+      style={{ width: 200, height: 200 }}
+      ref={containerRef}
+    />
+  );
+}
+```
+
+```js map-widget.js
+import 'leaflet/dist/leaflet.css';
+import * as L from 'leaflet';
+
+export class MapWidget {
+  constructor(domNode) {
+    this.map = L.map(domNode, {
+      zoomControl: false,
+      doubleClickZoom: false,
+      boxZoom: false,
+      keyboard: false,
+      scrollWheelZoom: false,
+      zoomAnimation: false,
+      touchZoom: false,
+      zoomSnap: 0.1
+    });
+    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      maxZoom: 19,
+      attribution: '© OpenStreetMap'
+    }).addTo(this.map);
+    this.map.setView([0, 0], 0);
+  }
+  setZoom(level) {
+    this.map.setZoom(level);
+  }
+}
+```
+
+```css
+button { margin: 5px; }
+```
+
+</Sandpack>
+
+In this example, a cleanup function is not needed because the `MapWidget` class manages only the DOM node that was passed to it. After the `Map` React component is removed from the tree, both the DOM node and the `MapWidget` class instance will be automatically garbage-collected by the browser JavaScript engine.
+
+---
+
+### Fetching data with Effects {/*fetching-data-with-effects*/}
+
+You can use an Effect to fetch data for your component. Note that [if you use a framework,](/learn/start-a-new-react-project#building-with-a-full-featured-framework) using your framework's data fetching mechanism will be a lot more efficient than writing Effects manually.
+
+If you want to fetch data from an Effect manually, your code might look like this:
+
+```js
+import { useState, useEffect } from 'react';
+import { fetchBio } from './api.js';
+
+export default function Page() {
+  const [person, setPerson] = useState('Alice');
+  const [bio, setBio] = useState(null);
+
+  useEffect(() => {
+    let ignore = false;
+    setBio(null);
+    fetchBio(person).then(result => {
+      if (!ignore) {
+        setBio(result);
+      }
+    });
+    return () => {
+      ignore = true;
+    };
+  }, [person]);
+
+  // ...
+```
+
+Note the `ignore` variable which is initialized to `false`, and is set to `true` during cleanup. This ensures [your code doesn't suffer from "race conditions":](https://maxrozen.com/race-conditions-fetching-data-react-with-useeffect) network responses may arrive in a different order than you sent them.
+
+<Sandpack>
+
+```js App.js
+import { useState, useEffect } from 'react';
+import { fetchBio } from './api.js';
+
+export default function Page() {
+  const [person, setPerson] = useState('Alice');
+  const [bio, setBio] = useState(null);
+  useEffect(() => {
+    let ignore = false;
+    setBio(null);
+    fetchBio(person).then(result => {
+      if (!ignore) {
+        setBio(result);
+      }
+    });
+    return () => {
+      ignore = true;
+    }
+  }, [person]);
+
+  return (
+    <>
+      <select value={person} onChange={e => {
+        setPerson(e.target.value);
+      }}>
+        <option value="Alice">Alice</option>
+        <option value="Bob">Bob</option>
+        <option value="Taylor">Taylor</option>
+      </select>
+      <hr />
+      <p><i>{bio ?? 'Loading...'}</i></p>
+    </>
+  );
+}
+```
+
+```js api.js hidden
+export async function fetchBio(person) {
+  const delay = person === 'Bob' ? 2000 : 200;
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve('This is ' + person + '’s bio.');
+    }, delay);
+  })
+}
+```
+
+</Sandpack>
+
+You can also rewrite using the [`async` / `await`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) syntax, but you still need to provide a cleanup function:
+
+<Sandpack>
+
+```js App.js
+import { useState, useEffect } from 'react';
+import { fetchBio } from './api.js';
+
+export default function Page() {
+  const [person, setPerson] = useState('Alice');
+  const [bio, setBio] = useState(null);
+  useEffect(() => {
+    async function startFetching() {
+      setBio(null);
+      const result = await fetchBio(person);
+      if (!ignore) {
+        setBio(result);
+      }
+    }
+
+    let ignore = false;
+    startFetching();
+    return () => {
+      ignore = true;
+    }
+  }, [person]);
+
+  return (
+    <>
+      <select value={person} onChange={e => {
+        setPerson(e.target.value);
+      }}>
+        <option value="Alice">Alice</option>
+        <option value="Bob">Bob</option>
+        <option value="Taylor">Taylor</option>
+      </select>
+      <hr />
+      <p><i>{bio ?? 'Loading...'}</i></p>
+    </>
+  );
+}
+```
+
+```js api.js hidden
+export async function fetchBio(person) {
+  const delay = person === 'Bob' ? 2000 : 200;
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve('This is ' + person + '’s bio.');
+    }, delay);
+  })
+}
+```
+
+</Sandpack>
+
+Writing data fetching directly in Effects gets repetitive and makes it difficult to add optimizations like caching and server rendering later. [It's easier to use a custom Hook--either your own or maintained by the community.](/learn/reusing-logic-with-custom-hooks#when-to-use-custom-hooks)
+
+<DeepDive>
+
+#### What are good alternatives to data fetching in Effects? {/*what-are-good-alternatives-to-data-fetching-in-effects*/}
+
+Writing `fetch` calls inside Effects is a [popular way to fetch data](https://www.robinwieruch.de/react-hooks-fetch-data/), especially in fully client-side apps. This is, however, a very manual approach and it has significant downsides:
+
+- **Effects don't run on the server.** This means that the initial server-rendered HTML will only include a loading state with no data. The client computer will have to download all JavaScript and render your app only to discover that now it needs to load the data. This is not very efficient.
+- **Fetching directly in Effects makes it easy to create "network waterfalls".** You render the parent component, it fetches some data, renders the child components, and then they start fetching their data. If the network is not very fast, this is significantly slower than fetching all data in parallel.
+- **Fetching directly in Effects usually means you don't preload or cache data.** For example, if the component unmounts and then mounts again, it would have to fetch the data again.
+- **It's not very ergonomic.** There's quite a bit of boilerplate code involved when writing `fetch` calls in a way that doesn't suffer from bugs like [race conditions.](https://maxrozen.com/race-conditions-fetching-data-react-with-useeffect)
+
+This list of downsides is not specific to React. It applies to fetching data on mount with any library. Like with routing, data fetching is not trivial to do well, so we recommend the following approaches:
+
+- **If you use a [framework](/learn/start-a-new-react-project#building-with-a-full-featured-framework), use its built-in data fetching mechanism.** Modern React frameworks have integrated data fetching mechanisms that are efficient and don't suffer from the above pitfalls.
+- **Otherwise, consider using or building a client-side cache.** Popular open source solutions include [React Query](https://react-query.tanstack.com/), [useSWR](https://swr.vercel.app/), and [React Router 6.4+.](https://beta.reactrouter.com/en/main/start/overview) You can build your own solution too, in which case you would use Effects under the hood but also add logic for deduplicating requests, caching responses, and avoiding network waterfalls (by preloading data or hoisting data requirements to routes).
+
+You can continue fetching data directly in Effects if neither of these approaches suit you.
+
+</DeepDive>
+
+---
+
+### Specifying reactive dependencies {/*specifying-reactive-dependencies*/}
+
+**Notice that you can't "choose" the dependencies of your Effect.** Every <CodeStep step={2}>reactive value</CodeStep> used by your Effect's code must be declared as a dependency. Your Effect's dependency list is determined by the surrounding code:
+
+```js [[2, 1, "roomId"], [2, 2, "serverUrl"], [2, 5, "serverUrl"], [2, 5, "roomId"], [2, 8, "serverUrl"], [2, 8, "roomId"]]
+function ChatRoom({ roomId }) { // This is a reactive value
+  const [serverUrl, setServerUrl] = useState('https://localhost:1234'); // This is a reactive value too
+
+  useEffect(() => {
+    const connection = createConnection(serverUrl, roomId); // This Effect reads these reactive values
+    connection.connect();
+    return () => connection.disconnect();
+  }, [serverUrl, roomId]); // ✅ So you must specify them as dependencies of your Effect
+  // ...
+}
+```
+
+If either `serverUrl` or `roomId` change, your Effect will reconnect to the chat using the new values.
+
+**[Reactive values](/learn/lifecycle-of-reactive-effects#effects-react-to-reactive-values) include props and all variables and functions declared directly inside of your component.** Since `roomId` and `serverUrl` are reactive values, you can't remove them from the dependency list. If you try to omit them and [your linter is correctly configured for React,](/learn/editor-setup#linting) the linter will flag this as a mistake that you need to fix:
+
+```js {8}
+function ChatRoom({ roomId }) {
+  const [serverUrl, setServerUrl] = useState('https://localhost:1234');
+  
+  useEffect(() => {
+    const connection = createConnection(serverUrl, roomId);
+    connection.connect();
+    return () => connection.disconnect();
+  }, []); // 🔴 React Hook useEffect has missing dependencies: 'roomId' and 'serverUrl'
+  // ...
+}
+```
+
+**To remove a dependency, you need to ["prove" to the linter that it *doesn't need* to be a dependency.](/learn/removing-effect-dependencies#removing-unnecessary-dependencies)** For example, you can move `serverUrl` out of your component to prove that it's not reactive and won't change on re-renders:
+
+```js {1,8}
+const serverUrl = 'https://localhost:1234'; // Not a reactive value anymore
+
+function ChatRoom({ roomId }) {
+  useEffect(() => {
+    const connection = createConnection(serverUrl, roomId);
+    connection.connect();
+    return () => connection.disconnect();
+  }, [roomId]); // ✅ All dependencies declared
+  // ...
+}
+```
+
+Now that `serverUrl` is not a reactive value (and can't change on a re-render), it doesn't need to be a dependency. **If your Effect's code doesn't use any reactive values, its dependency list should be empty (`[]`):**
+
+```js {1,2,9}
+const serverUrl = 'https://localhost:1234'; // Not a reactive value anymore
+const roomId = 'music'; // Not a reactive value anymore
+
+function ChatRoom() {
+  useEffect(() => {
+    const connection = createConnection(serverUrl, roomId);
+    connection.connect();
+    return () => connection.disconnect();
+  }, []); // ✅ All dependencies declared
+  // ...
+}
+```
+
+[An Effect with empty dependencies](/learn/lifecycle-of-reactive-effects#what-an-effect-with-empty-dependencies-means) doesn't re-run when any of your component's props or state change.
+
+<Pitfall>
+
+If you have an existing codebase, you might have some Effects that suppress the linter like this:
+
+```js {3-4}
+useEffect(() => {
+  // ...
+  // 🔴 Avoid suppressing the linter like this:
+  // eslint-ignore-next-line react-hooks/exhaustive-dependencies
+}, []);
+```
+
+**When dependencies don't match the code, there is a high risk of introducing bugs.** By suppressing the linter, you "lie" to React about the values your Effect depends on. [Instead, prove they're unnecessary.](/learn/removing-effect-dependencies#removing-unnecessary-dependencies)
+
+</Pitfall>
+
+<Recipes titleText="Examples of passing reactive dependencies" titleId="examples-dependencies">
+
+#### Passing a dependency array {/*passing-a-dependency-array*/}
+
+If you specify the dependencies, your Effect runs **after the initial render _and_ after re-renders with changed dependencies.**
+
+```js {3}
+useEffect(() => {
+  // ...
+}, [a, b]); // Runs again if a or b are different
+```
+
+In the below example, `serverUrl` and `roomId` are [reactive values,](/learn/lifecycle-of-reactive-effects#effects-react-to-reactive-values) so they both must be specified as dependencies. As a result, selecting a different room in the dropdown or editing the server URL input causes the chat to re-connect. However, since `message` isn't used in the Effect (and so it isn't a dependency), editing the message doesn't re-connect to the chat.
+
+<Sandpack>
+
+```js
+import { useState, useEffect } from 'react';
+import { createConnection } from './chat.js';
+
+function ChatRoom({ roomId }) {
+  const [serverUrl, setServerUrl] = useState('https://localhost:1234');
+  const [message, setMessage] = useState('');
+
+  useEffect(() => {
+    const connection = createConnection(serverUrl, roomId);
+    connection.connect();
+    return () => {
+      connection.disconnect();
+    };
+  }, [serverUrl, roomId]);
+
+  return (
+    <>
+      <label>
+        Server URL:{' '}
+        <input
+          value={serverUrl}
+          onChange={e => setServerUrl(e.target.value)}
+        />
+      </label>
+      <h1>Welcome to the {roomId} room!</h1>
+      <label>
+        Your message:{' '}
+        <input value={message} onChange={e => setMessage(e.target.value)} />
+      </label>
+    </>
+  );
+}
+
+export default function App() {
+  const [show, setShow] = useState(false);
+  const [roomId, setRoomId] = useState('general');
+  return (
+    <>
+      <label>
+        Choose the chat room:{' '}
+        <select
+          value={roomId}
+          onChange={e => setRoomId(e.target.value)}
+        >
+          <option value="general">general</option>
+          <option value="travel">travel</option>
+          <option value="music">music</option>
+        </select>
+        <button onClick={() => setShow(!show)}>
+          {show ? 'Close chat' : 'Open chat'}
+        </button>
+      </label>
+      {show && <hr />}
+      {show && <ChatRoom />}
+    </>
+  );
+}
+```
+
+```js chat.js
+export function createConnection(serverUrl, roomId) {
+  // A real implementation would actually connect to the server
+  return {
+    connect() {
+      console.log('✅ Connecting to "' + roomId + '" room at ' + serverUrl + '...');
+    },
+    disconnect() {
+      console.log('❌ Disconnected from "' + roomId + '" room at ' + serverUrl);
+    }
+  };
+}
+```
+
+```css
+input { margin-bottom: 10px; }
+button { margin-left: 5px; }
+```
+
+</Sandpack>
+
+<Solution />
+
+#### Passing an empty dependency array {/*passing-an-empty-dependency-array*/}
+
+If your Effect truly doesn't use any reactive values, it will only run **after the initial render.**
+
+```js {3}
+useEffect(() => {
+  // ...
+}, []); // Does not run again (except once in development)
+```
+
+**Even with empty dependencies, setup and cleanup will [run one extra time in development](/learn/synchronizing-with-effects#how-to-handle-the-effect-firing-twice-in-development) to help you find bugs.**
+
+
+In this example, both `serverUrl` and `roomId` are hardcoded. Since they're declared outside the component, they are not reactive values, and so they aren't dependencies. The dependency list is empty, so the Effect doesn't re-run on re-renders.
+
+<Sandpack>
+
+```js
+import { useState, useEffect } from 'react';
+import { createConnection } from './chat.js';
+
+const serverUrl = 'https://localhost:1234';
+const roomId = 'music';
+
+function ChatRoom() {
+  const [message, setMessage] = useState('');
+
+  useEffect(() => {
+    const connection = createConnection(serverUrl, roomId);
+    connection.connect();
+    return () => connection.disconnect();
+  }, []);
+
+  return (
+    <>
+      <h1>Welcome to the {roomId} room!</h1>
+      <label>
+        Your message:{' '}
+        <input value={message} onChange={e => setMessage(e.target.value)} />
+      </label>
+    </>
+  );
+}
+
+export default function App() {
+  const [show, setShow] = useState(false);
+  return (
+    <>
+      <button onClick={() => setShow(!show)}>
+        {show ? 'Close chat' : 'Open chat'}
+      </button>
+      {show && <hr />}
+      {show && <ChatRoom />}
+    </>
+  );
+}
+```
+
+```js chat.js
+export function createConnection(serverUrl, roomId) {
+  // A real implementation would actually connect to the server
+  return {
+    connect() {
+      console.log('✅ Connecting to "' + roomId + '" room at ' + serverUrl + '...');
+    },
+    disconnect() {
+      console.log('❌ Disconnected from "' + roomId + '" room at ' + serverUrl);
+    }
+  };
+}
+```
+
+</Sandpack>
+
+<Solution />
+
+
+#### Passing no dependency array at all {/*passing-no-dependency-array-at-all*/}
+
+If you pass no dependency array at all, your Effect runs **after every single render (and re-render)** of your component.
+
+```js {3}
+useEffect(() => {
+  // ...
+}); // Always runs again
+```
+
+In this example, the Effect re-runs when you change `serverUrl` and `roomId`, which is sensible. However, it *also* re-runs when you change the `message`, which is probably undesirable. This is why usually you'll specify the dependency array.
+
+<Sandpack>
+
+```js
+import { useState, useEffect } from 'react';
+import { createConnection } from './chat.js';
+
+function ChatRoom({ roomId }) {
+  const [serverUrl, setServerUrl] = useState('https://localhost:1234');
+  const [message, setMessage] = useState('');
+
+  useEffect(() => {
+    const connection = createConnection(serverUrl, roomId);
+    connection.connect();
+    return () => {
+      connection.disconnect();
+    };
+  }); // No dependency array at all
+
+  return (
+    <>
+      <label>
+        Server URL:{' '}
+        <input
+          value={serverUrl}
+          onChange={e => setServerUrl(e.target.value)}
+        />
+      </label>
+      <h1>Welcome to the {roomId} room!</h1>
+      <label>
+        Your message:{' '}
+        <input value={message} onChange={e => setMessage(e.target.value)} />
+      </label>
+    </>
+  );
+}
+
+export default function App() {
+  const [show, setShow] = useState(false);
+  const [roomId, setRoomId] = useState('general');
+  return (
+    <>
+      <label>
+        Choose the chat room:{' '}
+        <select
+          value={roomId}
+          onChange={e => setRoomId(e.target.value)}
+        >
+          <option value="general">general</option>
+          <option value="travel">travel</option>
+          <option value="music">music</option>
+        </select>
+        <button onClick={() => setShow(!show)}>
+          {show ? 'Close chat' : 'Open chat'}
+        </button>
+      </label>
+      {show && <hr />}
+      {show && <ChatRoom />}
+    </>
+  );
+}
+```
+
+```js chat.js
+export function createConnection(serverUrl, roomId) {
+  // A real implementation would actually connect to the server
+  return {
+    connect() {
+      console.log('✅ Connecting to "' + roomId + '" room at ' + serverUrl + '...');
+    },
+    disconnect() {
+      console.log('❌ Disconnected from "' + roomId + '" room at ' + serverUrl);
+    }
+  };
+}
+```
+
+```css
+input { margin-bottom: 10px; }
+button { margin-left: 5px; }
+```
+
+</Sandpack>
+
+<Solution />
+
+</Recipes>
+
+---
+
+### Updating state based on previous state from an Effect {/*updating-state-based-on-previous-state-from-an-effect*/}
+
+When you want to update state based on previous state from an Effect, you might run into a problem:
+
+```js {6,9}
+function Counter() {
+  const [count, setCount] = useState(0);
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      setCount(count + 1); // You want to increment the counter every second...
+    }, 1000)
+    return () => clearInterval(intervalId);
+  }, [count]); // 🚩 ... but specifying `count` as a dependency always resets the interval.
+  // ...
+}
+```
+
+Since `count` is a reactive value, it must be specified in the list of dependencies. However, that causes the Effect to cleanup and setup again every time the `count` changes. This is not ideal. 
+
+To fix this, [pass the `c => c + 1` state updater](/reference/react/useState#updating-state-based-on-the-previous-state) to `setCount`:
+
+<Sandpack>
+
+```js
+import { useState, useEffect } from 'react';
+
+export default function Counter() {
+  const [count, setCount] = useState(0);
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      setCount(c => c + 1); // ✅ Pass a state updater
+    }, 1000);
+    return () => clearInterval(intervalId);
+  }, []); // ✅ Now count is not a dependency
+
+  return <h1>{count}</h1>;
+}
+```
+
+```css
+label {
+  display: block;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+body {
+  min-height: 150px;
+}
+```
+
+</Sandpack>
+
+Now that you're passing `c => c + 1` instead of `count + 1`, [your Effect no longer needs to depend on `count`.](/learn/removing-effect-dependencies#are-you-reading-some-state-to-calculate-the-next-state) As a result of this fix, it won't need to cleanup and setup the interval again every time the `count` changes.
+
+---
+
+
+### Removing unnecessary object dependencies {/*removing-unnecessary-object-dependencies*/}
+
+If your Effect depends on an object or a function created during rendering, it might run more often than needed. For example, this Effect re-connects after every render because the `options` object is [different for every render:](/learn/removing-effect-dependencies#does-some-reactive-value-change-unintentionally)
+
+```js {6-9,12,15}
+const serverUrl = 'https://localhost:1234';
+
+function ChatRoom({ roomId }) {
+  const [message, setMessage] = useState('');
+
+  const options = { // 🚩 This object is created from scratch on every re-render
+    serverUrl: serverUrl,
+    roomId: roomId
+  };
+
+  useEffect(() => {
+    const connection = createConnection(options); // It's used inside the Effect
+    connection.connect();
+    return () => connection.disconnect();
+  }, [options]); // 🚩 As a result, these dependencies are always different on a re-render
+  // ...
+```
+
+Avoid using an object created during rendering as a dependency. Instead, create the object inside the Effect:
+
+<Sandpack>
+
+```js
+import { useState, useEffect } from 'react';
+import { createConnection } from './chat.js';
+
+const serverUrl = 'https://localhost:1234';
+
+function ChatRoom({ roomId }) {
+  const [message, setMessage] = useState('');
+
+  useEffect(() => {
+    const options = {
+      serverUrl: serverUrl,
+      roomId: roomId
+    };
+    const connection = createConnection(options);
+    connection.connect();
+    return () => connection.disconnect();
+  }, [roomId]);
+
+  return (
+    <>
+      <h1>Welcome to the {roomId} room!</h1>
+      <input value={message} onChange={e => setMessage(e.target.value)} />
+    </>
+  );
+}
+
+export default function App() {
+  const [roomId, setRoomId] = useState('general');
+  return (
+    <>
+      <label>
+        Choose the chat room:{' '}
+        <select
+          value={roomId}
+          onChange={e => setRoomId(e.target.value)}
+        >
+          <option value="general">general</option>
+          <option value="travel">travel</option>
+          <option value="music">music</option>
+        </select>
+      </label>
+      <hr />
+      <ChatRoom roomId={roomId} />
+    </>
+  );
+}
+```
+
+```js chat.js
+export function createConnection({ serverUrl, roomId }) {
+  // A real implementation would actually connect to the server
+  return {
+    connect() {
+      console.log('✅ Connecting to "' + roomId + '" room at ' + serverUrl + '...');
+    },
+    disconnect() {
+      console.log('❌ Disconnected from "' + roomId + '" room at ' + serverUrl);
+    }
+  };
+}
+```
+
+```css
+input { display: block; margin-bottom: 20px; }
+button { margin-left: 10px; }
+```
+
+</Sandpack>
+
+Now that you create the `options` object inside the Effect, the Effect itself only depends on the `roomId` string.
+
+With this fix, typing into the input doesn't reconnect the chat. Unlike an object which gets re-created, a string like `roomId` doesn't change unless you set it to another value. [Read more about removing dependencies.](/learn/removing-effect-dependencies)
+
+---
+
+### Removing unnecessary function dependencies {/*removing-unnecessary-function-dependencies*/}
+
+If your Effect depends on an object or a function created during rendering, it might run more often than needed. For example, this Effect re-connects after every render because the `createOptions` function is [different for every render:](/learn/removing-effect-dependencies#does-some-reactive-value-change-unintentionally)
+
+```js {4-9,12,16}
+function ChatRoom({ roomId }) {
+  const [message, setMessage] = useState('');
+
+  function createOptions() { // 🚩 This function is created from scratch on every re-render
+    return {
+      serverUrl: serverUrl,
+      roomId: roomId
+    };
+  }
+
+  useEffect(() => {
+    const options = createOptions(); // It's used inside the Effect
+    const connection = createConnection();
+    connection.connect();
+    return () => connection.disconnect();
+  }, [createOptions]); // 🚩 As a result, these dependencies are always different on a re-render
+  // ...
+```
+
+By itself, creating a function from scratch on every re-render is not a problem. You don't need to optimize that. However, if you use it as a dependency of your Effect, it will cause your Effect to re-run after every re-render.
+
+Avoid using a function created during rendering as a dependency. Instead, declare it inside the Effect:
+
+<Sandpack>
+
+```js
+import { useState, useEffect } from 'react';
+import { createConnection } from './chat.js';
+
+const serverUrl = 'https://localhost:1234';
+
+function ChatRoom({ roomId }) {
+  const [message, setMessage] = useState('');
+
+  useEffect(() => {
+    function createOptions() {
+      return {
+        serverUrl: serverUrl,
+        roomId: roomId
+      };
+    }
+
+    const options = createOptions();
+    const connection = createConnection(options);
+    connection.connect();
+    return () => connection.disconnect();
+  }, [roomId]);
+
+  return (
+    <>
+      <h1>Welcome to the {roomId} room!</h1>
+      <input value={message} onChange={e => setMessage(e.target.value)} />
+    </>
+  );
+}
+
+export default function App() {
+  const [roomId, setRoomId] = useState('general');
+  return (
+    <>
+      <label>
+        Choose the chat room:{' '}
+        <select
+          value={roomId}
+          onChange={e => setRoomId(e.target.value)}
+        >
+          <option value="general">general</option>
+          <option value="travel">travel</option>
+          <option value="music">music</option>
+        </select>
+      </label>
+      <hr />
+      <ChatRoom roomId={roomId} />
+    </>
+  );
+}
+```
+
+```js chat.js
+export function createConnection({ serverUrl, roomId }) {
+  // A real implementation would actually connect to the server
+  return {
+    connect() {
+      console.log('✅ Connecting to "' + roomId + '" room at ' + serverUrl + '...');
+    },
+    disconnect() {
+      console.log('❌ Disconnected from "' + roomId + '" room at ' + serverUrl);
+    }
+  };
+}
+```
+
+```css
+input { display: block; margin-bottom: 20px; }
+button { margin-left: 10px; }
+```
+
+</Sandpack>
+
+Now that you define the `createOptions` function inside the Effect, the Effect itself only depends on the `roomId` string. With this fix, typing into the input doesn't reconnect the chat. Unlike a function which gets re-created, a string like `roomId` doesn't change unless you set it to another value. [Read more about removing dependencies.](/learn/removing-effect-dependencies)
+
+---
+
+### Reading the latest props and state from an Effect {/*reading-the-latest-props-and-state-from-an-effect*/}
+
+<Wip>
+
+This section describes an **experimental API that has not yet been added to React,** so you can't use it yet.
+
+</Wip>
+
+By default, when you read a reactive value from an Effect, you have to add it as a dependency. This ensures that your Effect "reacts" to every change of that value. For most dependencies, that's the behavior you want.
+
+**However, sometimes you'll want to read the *latest* props and state from an Effect without "reacting" to them.** For example, imagine you want to log the number of the items in the shopping cart for every page visit:
+
+```js {3}
+function Page({ url, shoppingCart }) {
+  useEffect(() => {
+    logVisit(url, shoppingCart.length);
+  }, [url, shoppingCart]); // ✅ All dependencies declared
+  // ...
+}
+```
+
+**What if you want to log a new page visit after every `url` change, but *not* if only the `shoppingCart` changes?** You can't exclude `shoppingCart` from dependencies without breaking the [reactivity rules.](#specifying-reactive-dependencies) However, you can express that you *don't want* a piece of code to "react" to changes even though it is called from inside an Effect. [Declare an *Effect Event*](/learn/separating-events-from-effects#declaring-an-effect-event) with the [`useEffectEvent`](/reference/react/useEffectEvent) Hook, and move the code that reads `shoppingCart` inside of it:
+
+```js {2-4,7,8}
+function Page({ url, shoppingCart }) {
+  const onVisit = useEffectEvent(visitedUrl => {
+    logVisit(visitedUrl, shoppingCart.length)
+  });
+
+  useEffect(() => {
+    onVisit(url);
+  }, [url]); // ✅ All dependencies declared
+  // ...
+}
+```
+
+**Effect Events are not reactive and must always be omitted from dependencies of your Effect.** This is what lets you put non-reactive code (where you can read the latest value of some props and state) inside of them. For example, by reading `shoppingCart` inside of `onVisit`, you ensure that `shoppingCart` won't re-run your Effect. In the future, the linter will support `useEffectEvent` and check that you omit Effect Events from dependencies.
+
+[Read more about how Effect Events let you separate reactive and non-reactive code.](/learn/separating-events-from-effects#reading-latest-props-and-state-with-effect-events)
+
+
+---
+
+### Displaying different content on the server and the client {/*displaying-different-content-on-the-server-and-the-client*/}
+
+If your app uses server rendering (either [directly](/reference/react-dom/server) or via a [framework](/learn/start-a-new-react-project#building-with-a-full-featured-framework)), your component will render in two different environments. On the server, it will render to produce the initial HTML. On the client, React will run the rendering code again so that it can attach your event handlers to that HTML. This is why, for [hydration](/reference/react-dom/client/hydrateRoot#hydrating-server-rendered-html) to work, your initial render output must be identical on the client and the server.
+
+In rare cases, you might need to display different content on the client. For example, if your app reads some data from [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage), it can't possibly do that on the server. Here is how you would typically implement this:
+
+```js
+function MyComponent() {
+  const [didMount, setDidMount] = useState(false);
+
+  useEffect(() => {
+    setDidMount(true);
+  }, []);
+
+  if (didMount) {
+    // ... return client-only JSX ...
+  }  else {
+    // ... return initial JSX ...
+  }
+}
+```
+
+While the app is loading, the user will see the initial render output. Then, when it's loaded and hydrated, your Effect will run and set `didMount` to `true`, triggering a re-render. This will switch to the client-only render output. Note that Effects don't run on the server, so this is why `didMount` was `false` during the initial server render.
+
+Use this pattern sparingly. Keep in mind that users with a slow connection will see the initial content for quite a bit of time--potentially, many seconds--so you don't want to make jarring changes to your component's appearance. In many cases, you can avoid the need for this by conditionally showing different things with CSS.
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+
+### My Effect runs twice when the component mounts {/*my-effect-runs-twice-when-the-component-mounts*/}
+
+When Strict Mode is on, in development, React runs setup and cleanup one extra time before the actual setup.
+
+This is a stress-test that verifies your Effect’s logic is implemented correctly. If this causes visible issues, your cleanup function is missing some logic. The cleanup function should stop or undo whatever the setup function was doing. The rule of thumb is that the user shouldn’t be able to distinguish between the setup being called once (as in production) and a setup → cleanup → setup sequence (as in development).
+
+Read more about [how this helps find bugs](/learn/synchronizing-with-effects#step-3-add-cleanup-if-needed) and [how to fix your logic.](/learn/synchronizing-with-effects#how-to-handle-the-effect-firing-twice-in-development)
+
+---
+
+### My Effect runs after every re-render {/*my-effect-runs-after-every-re-render*/}
+
+First, check that you haven't forgotten to specify the dependency array:
+
+```js {3}
+useEffect(() => {
+  // ...
+}); // 🚩 No dependency array: re-runs after every render!
+```
+
+If you've specified the dependency array but your Effect still re-runs in a loop, it's because one of your dependencies is different on every re-render.
+
+You can debug this problem by manually logging your dependencies to the console:
+
+```js {5}
+  useEffect(() => {
+    // ..
+  }, [serverUrl, roomId]);
+
+  console.log([serverUrl, roomId]);
+```
+
+You can then right-click on the arrays from different re-renders in the console and select "Store as a global variable" for both of them. Assuming the first one got saved as `temp1` and the second one got saved as `temp2`, you can then use the browser console to check whether each dependency in both arrays is the same:
+
+```js
+Object.is(temp1[0], temp2[0]); // Is the first dependency the same between the arrays?
+Object.is(temp1[1], temp2[1]); // Is the second dependency the same between the arrays?
+Object.is(temp1[2], temp2[2]); // ... and so on for every dependency ...
+```
+
+When you find the dependency that is different on every re-render, you can usually fix it in one of these ways:
+
+- [Updating state based on previous state from an Effect](#updating-state-based-on-previous-state-from-an-effect)
+- [Removing unnecessary object dependencies](#removing-unnecessary-object-dependencies)
+- [Removing unnecessary function dependencies](#removing-unnecessary-function-dependencies)
+- [Reading the latest props and state from an Effect](#reading-the-latest-props-and-state-from-an-effect)
+
+As a last resort (if these methods didn't help), wrap its creation with [`useMemo`](/reference/react/useMemo#memoizing-a-dependency-of-another-hook) or [`useCallback`](/reference/react/useCallback#preventing-an-effect-from-firing-too-often) (for functions).
+
+---
+
+### My Effect keeps re-running in an infinite cycle {/*my-effect-keeps-re-running-in-an-infinite-cycle*/}
+
+If your Effect runs in an infinite cycle, these two things must be true:
+
+- Your Effect is updating some state.
+- That state leads to a re-render, which causes the Effect's dependencies to change.
+
+Before you start fixing the problem, ask yourself whether your Effect is connecting to some external system (like DOM, network, a third-party widget, and so on). Why does your Effect need to set state? Does it synchronize some state with that external system? Or are you trying to manage your application's data flow with it?
+
+If there is no external system, consider whether [removing the Effect altogether](/learn/you-might-not-need-an-effect) would simplify your logic.
+
+If you're genuinely synchronizing with some external system, think about why and under what conditions your Effect should update the state. Has something changed that affects your component's visual output? If you need to keep track of some data that isn't used by rendering, a [ref](/reference/react/useRef#referencing-a-value-with-a-ref) (which doesn't trigger re-renders) might be more appropriate. Verify your Effect doesn't update the state (and trigger re-renders) more than needed.
+
+Finally, if your Effect is updating the state at the right time, but there is still a loop, it's because that state update leads to one of your Effect's dependencies changing. [Read how to debug and resolve dependency changes.](/reference/react/useEffect#my-effect-runs-after-every-re-render)
+
+---
+
+### My cleanup logic runs even though my component didn't unmount {/*my-cleanup-logic-runs-even-though-my-component-didnt-unmount*/}
+
+The cleanup function runs not only during unmount, but before every re-render with changed dependencies. Additionally, in development, React [runs setup+cleanup one extra time immediately after component mounts.](#my-effect-runs-twice-when-the-component-mounts)
+
+If you have cleanup code without corresponding setup code, it's usually a code smell:
+
+```js {2-5}
+useEffect(() => {
+  // 🔴 Avoid: Cleanup logic without corresponding setup logic
+  return () => {
+    doSomething();
+  };
+}, []);
+```
+
+Your cleanup logic should be "symmetrical" to the setup logic, and should stop or undo whatever setup did:
+
+```js {2-3,5}
+  useEffect(() => {
+    const connection = createConnection(serverUrl, roomId);
+    connection.connect();
+    return () => {
+      connection.disconnect();
+    };
+  }, [serverUrl, roomId]);
+```
+
+[Learn how the Effect lifecycle is different from the component's lifecycle.](/learn/lifecycle-of-reactive-effects#the-lifecycle-of-an-effect)
+
+---
+
+### My Effect does something visual, and I see a flicker before it runs {/*my-effect-does-something-visual-and-i-see-a-flicker-before-it-runs*/}
+
+If your Effect must block the browser from [painting the screen,](/learn/render-and-commit#epilogue-browser-paint) replace `useEffect` with [`useLayoutEffect`](/reference/react/useLayoutEffect). Note that **this shouldn't be needed for the vast majority of Effects.** You'll only need this if it's crucial to run your Effect before the browser paint: for example, to measure and position a tooltip before the user sees it for the first time.
diff --git a/beta/src/content/reference/react/useEffectEvent.md b/beta/src/content/reference/react/useEffectEvent.md
new file mode 100644
index 000000000..8541efc66
--- /dev/null
+++ b/beta/src/content/reference/react/useEffectEvent.md
@@ -0,0 +1,30 @@
+---
+title: useEffectEvent
+---
+
+<Wip>
+
+**This API is experimental and is not available in a stable version of React yet.**
+
+You can try it by upgrading React packages to the most recent experimental version:
+
+- `react@experimental`
+- `react-dom@experimental`
+- `eslint-plugin-react-hooks@experimental`
+
+Experimental versions of React may contain bugs. Don't use them in production.
+
+</Wip>
+
+
+<Intro>
+
+`useEffectEvent` is a React Hook that lets you extract non-reactive logic into an [Effect Event.](/learn/separating-events-from-effects#declaring-an-effect-event)
+
+```js
+const onSomething = useEffectEvent(callback)
+```
+
+</Intro>
+
+<InlineToc />
diff --git a/beta/src/content/reference/react/useId.md b/beta/src/content/reference/react/useId.md
new file mode 100644
index 000000000..59fae34d7
--- /dev/null
+++ b/beta/src/content/reference/react/useId.md
@@ -0,0 +1,305 @@
+---
+title: useId
+---
+
+<Intro>
+
+`useId` is a React Hook for generating unique IDs that can be passed to accessibility attributes.
+
+```js
+const id = useId()
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `useId()` {/*useid*/}
+
+Call `useId` at the top level of your component to generate a unique ID:
+
+```js
+import { useId } from 'react';
+
+function PasswordField() {
+  const passwordHintId = useId();
+  // ...
+```
+
+[See more examples below.](#usage)
+
+#### Parameters {/*parameters*/}
+
+`useId` does not take any parameters.
+
+#### Returns {/*returns*/}
+
+`useId` returns a unique ID string associated with this particular `useId` call in this particular component.
+
+#### Caveats {/*caveats*/}
+
+* `useId` is a Hook, so you can only call it **at the top level of your component** or your own Hooks. You can't call it inside loops or conditions. If you need that, extract a new component and move the state into it.
+
+* `useId` **should not be used to generate keys** in a list. [Keys should be generated from your data.](/learn/rendering-lists#where-to-get-your-key)
+
+---
+
+## Usage {/*usage*/}
+
+<Pitfall>
+
+**Do not call `useId` to generate keys in a list.** [Keys should be generated from your data.](/learn/rendering-lists#where-to-get-your-key)
+
+</Pitfall>
+
+### Generating unique IDs for accessibility attributes {/*generating-unique-ids-for-accessibility-attributes*/}
+
+Call `useId` at the top level of your component to generate a unique ID:
+
+```js [[1, 4, "passwordHintId"]]
+import { useId } from 'react';
+
+function PasswordField() {
+  const passwordHintId = useId();
+  // ...
+```
+
+You can then pass the <CodeStep step={1}>generated ID</CodeStep> to different attributes:
+
+```js [[1, 2, "passwordHintId"], [1, 3, "passwordHintId"]]
+<>
+  <input type="password" aria-describedby={passwordHintId} />
+  <p id={passwordHintId}>
+</>
+```
+
+**Let's walk through an example to see when this is useful.**
+
+[HTML accessibility attributes](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) like [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) let you specify that two tags are related to each other. For example, you can specify that a certain element (like an input) is described by another element (like a paragraph).
+
+In regular HTML, you would write it like this:
+
+```html {5,8}
+<label>
+  Password:
+  <input
+    type="password"
+    aria-describedby="password-hint"
+  />
+</label>
+<p id="password-hint">
+  The password should contain at least 18 characters
+</p>
+```
+
+However, hardcoding IDs like this is not a good practice in React. A component may be rendered more than once on the page--but IDs have to be unique! Instead of hardcoding an ID, you can generate a unique ID with `useId`:
+
+```js {4,11,14}
+import { useId } from 'react';
+
+function PasswordField() {
+  const passwordHintId = useId();
+  return (
+    <>
+      <label>
+        Password:
+        <input
+          type="password"
+          aria-describedby={passwordHintId}
+        />
+      </label>
+      <p id={passwordHintId}>
+        The password should contain at least 18 characters
+      </p>
+    </>
+  );
+}
+```
+
+Now, even if `PasswordField` appears multiple times on the screen, the generated IDs won't clash.
+
+<Sandpack>
+
+```js
+import { useId } from 'react';
+
+function PasswordField() {
+  const passwordHintId = useId();
+  return (
+    <>
+      <label>
+        Password:
+        <input
+          type="password"
+          aria-describedby={passwordHintId}
+        />
+      </label>
+      <p id={passwordHintId}>
+        The password should contain at least 18 characters
+      </p>
+    </>
+  );
+}
+
+export default function App() {
+  return (
+    <>
+      <h2>Choose password</h2>
+      <PasswordField />
+      <h2>Confirm password</h2>
+      <PasswordField />
+    </>
+  );
+}
+```
+
+```css
+input { margin: 5px; }
+```
+
+</Sandpack>
+
+[Watch this video](https://www.youtube.com/watch?v=0dNzNcuEuOo) to see the difference in the user experience with assistive technologies.
+
+<Pitfall>
+
+**`useId` requires an identical component tree on the server and the client** when you use [server rendering](/reference/react-dom/server). If the trees you render on the server and the client don't match exactly, the generated IDs won't match.
+
+</Pitfall>
+
+<DeepDive>
+
+#### Why is useId better than an incrementing counter? {/*why-is-useid-better-than-an-incrementing-counter*/}
+
+You might be wondering why `useId` is better than incrementing a global variable like `nextId++`.
+
+The primary benefit of `useId` is that React ensures that it works with [server rendering.](/reference/react-dom/server) During server rendering, your components generate HTML output. Later, on the client, [hydration](/reference/react-dom/client/hydrateRoot) attaches your event handlers to the generated HTML. For hydration to work, the client output must match the server HTML.
+
+This is very difficult to guarantee with an incrementing counter because the order in which the client components are hydrated may not match the order in which the server HTML was emitted. By calling `useId`, you ensure that hydration will work, and the output will match between the server and the client.
+
+Inside React, `useId` is generated from the "parent path" of the calling component. This is why, if the client and the server tree are the same, the "parent path" will match up regardless of rendering order.
+
+</DeepDive>
+
+---
+
+### Generating IDs for several related elements {/*generating-ids-for-several-related-elements*/}
+
+If you need to give IDs to multiple related elements, you can call `useId` to generate a shared prefix for them: 
+
+<Sandpack>
+
+```js
+import { useId } from 'react';
+
+export default function Form() {
+  const id = useId();
+  return (
+    <form>
+      <label htmlFor={id + '-firstName'}>First Name:</label>
+      <input id={id + '-firstName'} type="text" />
+      <hr />
+      <label htmlFor={id + '-lastName'}>Last Name:</label>
+      <input id={id + '-lastName'} type="text" />
+    </form>
+  );
+}
+```
+
+```css
+input { margin: 5px; }
+```
+
+</Sandpack>
+
+This lets you avoid calling `useId` for every single element that needs a unique ID.
+
+---
+
+### Specifying a shared prefix for all generated IDs {/*specifying-a-shared-prefix-for-all-generated-ids*/}
+
+If you render multiple independent React applications on a single page, you may pass `identifierPrefix` as an option to your [`createRoot`](/reference/react-dom/client/createRoot#parameters) or [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) calls. This ensures that the IDs generated by the two different apps never clash because every identifier generated with `useId` will start with the distinct prefix you've specified.
+
+<Sandpack>
+
+```html index.html
+<!DOCTYPE html>
+<html>
+  <head><title>My app</title></head>
+  <body>
+    <div id="root1"></div>
+    <div id="root2"></div>
+  </body>
+</html>
+```
+
+```js
+import { useId } from 'react';
+
+function PasswordField() {
+  const passwordHintId = useId();
+  console.log('Generated identifier:', passwordHintId)
+  return (
+    <>
+      <label>
+        Password:
+        <input
+          type="password"
+          aria-describedby={passwordHintId}
+        />
+      </label>
+      <p id={passwordHintId}>
+        The password should contain at least 18 characters
+      </p>
+    </>
+  );
+}
+
+export default function App() {
+  return (
+    <>
+      <h2>Choose password</h2>
+      <PasswordField />
+    </>
+  );
+}
+```
+
+```js index.js active
+import { createRoot } from 'react-dom/client';
+import App from './App.js';
+import './styles.css';
+
+const root1 = createRoot(document.getElementById('root1'), {
+  identifierPrefix: 'my-first-app-'
+});
+root1.render(<App />);
+
+const root2 = createRoot(document.getElementById('root2'), {
+  identifierPrefix: 'my-second-app-'
+});
+root2.render(<App />);
+```
+
+```css
+#root1 {
+  border: 5px solid blue;
+  padding: 10px;
+  margin: 5px;
+}
+
+#root2 {
+  border: 5px solid green;
+  padding: 10px;
+  margin: 5px;
+}
+
+input { margin: 5px; }
+```
+
+</Sandpack>
+
diff --git a/beta/src/content/reference/react/useImperativeHandle.md b/beta/src/content/reference/react/useImperativeHandle.md
new file mode 100644
index 000000000..bf09c4ef8
--- /dev/null
+++ b/beta/src/content/reference/react/useImperativeHandle.md
@@ -0,0 +1,288 @@
+---
+title: useImperativeHandle
+---
+
+<Intro>
+
+`useImperativeHandle` is a React Hook that lets you customize the handle exposed as a [ref.](/learn/manipulating-the-dom-with-refs)
+
+```js
+useImperativeHandle(ref, createHandle, dependencies?)
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `useImperativeHandle(ref, createHandle, dependencies?)` {/*useimperativehandle*/}
+
+Call `useImperativeHandle` at the top level of your component to customize the ref handle it exposes:
+
+```js
+import { forwardRef, useImperativeHandle } from 'react';
+
+const MyInput = forwardRef(function MyInput(props, ref) {
+  useImperativeHandle(ref, () => {
+    return {
+      // ... your methods ...
+    };
+  }, []);
+  // ...
+```
+
+[See more examples below.](#usage)
+
+#### Parameters {/*parameters*/}
+
+* `ref`: The `ref` you received as the second argument from the [`forwardRef` render function.](/reference/react/forwardRef#render-function)
+
+* `createHandle`: A function that takes no arguments and returns the ref handle you want to expose. The ref handle you return can have any type. Usually, you will return an object with the methods you want to expose.
+
+* **optional** `dependencies`: The list of all reactive values referenced inside of the `createHandle` code. Reactive values include props, state, and all the variables and functions declared directly inside your component body. If your linter is [configured for React](/learn/editor-setup#linting), it will verify that every reactive value is correctly specified as a dependency. The list of dependencies must have a constant number of items and be written inline like `[dep1, dep2, dep3]`. React will compare each dependency with its previous value using the [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison algorithm. If a re-render resulted in a change to some dependency, or if you did not specify the dependencies at all, your `createHandle` function will re-execute, and the newly created handle will be assigned to the ref.
+
+#### Returns {/*returns*/}
+
+`useImperativeHandle` returns `undefined`.
+
+---
+
+## Usage {/*usage*/}
+
+### Exposing a custom ref handle to the parent component {/*exposing-a-custom-ref-handle-to-the-parent-component*/}
+
+By default, components don't expose their DOM nodes to parent components. For example, if you want the parent component of `MyInput` to [have access](/learn/manipulating-the-dom-with-refs) to the `<input>` DOM node, you have to opt in with [`forwardRef`:](/reference/react/forwardRef)
+
+```js {4}
+import { forwardRef } from 'react';
+
+const MyInput = forwardRef(function MyInput(props, ref) {
+  return <input {...props} ref={ref} />;
+});
+```
+
+With the code above, [a ref to `MyInput` will receive the `<input>` DOM node.](/reference/react/forwardRef#exposing-a-dom-node-to-the-parent-component) However, you can expose a custom value instead. To customize the exposed handle, call `useImperativeHandle` at the top level of your component:
+
+```js {4-8}
+import { forwardRef, useImperativeHandle } from 'react';
+
+const MyInput = forwardRef(function MyInput(props, ref) {
+  useImperativeHandle(ref, () => {
+    return {
+      // ... your methods ...
+    };
+  }, []);
+
+  return <input {...props} />;
+});
+```
+
+Note that in the code above, the `ref` is no longer forwarded to the `<input>`.
+
+For example, suppose you don't want to expose the entire `<input>` DOM node, but you want to expose two of its methods: `focus` and `scrollIntoView`. To do this, keep the real browser DOM in a separate ref. Then use `useImperativeHandle` to expose a handle with only the methods that you want the parent component to call:
+
+```js {7-14}
+import { forwardRef, useRef, useImperativeHandle } from 'react';
+
+const MyInput = forwardRef(function MyInput(props, ref) {
+  const inputRef = useRef(null);
+
+  useImperativeHandle(ref, () => {
+    return {
+      focus() {
+        inputRef.current.focus();
+      },
+      scrollIntoView() {
+        inputRef.current.scrollIntoView();
+      },
+    };
+  }, []);
+
+  return <input {...props} ref={inputRef} />;
+});
+```
+
+Now, if the parent component gets a ref to `MyInput`, it will be able to call the `focus` and `scrollIntoView` methods on it. However, it will not have full access to the underlying `<input>` DOM node.
+
+<Sandpack>
+
+```js
+import { useRef } from 'react';
+import MyInput from './MyInput.js';
+
+export default function Form() {
+  const ref = useRef(null);
+
+  function handleClick() {
+    ref.current.focus();
+    // This won't work because the DOM node isn't exposed:
+    // ref.current.style.opacity = 0.5;
+  }
+
+  return (
+    <form>
+      <MyInput label="Enter your name:" ref={ref} />
+      <button type="button" onClick={handleClick}>
+        Edit
+      </button>
+    </form>
+  );
+}
+```
+
+```js MyInput.js
+import { forwardRef, useRef, useImperativeHandle } from 'react';
+
+const MyInput = forwardRef(function MyInput(props, ref) {
+  const inputRef = useRef(null);
+
+  useImperativeHandle(ref, () => {
+    return {
+      focus() {
+        inputRef.current.focus();
+      },
+      scrollIntoView() {
+        inputRef.current.scrollIntoView();
+      },
+    };
+  }, []);
+
+  return <input {...props} ref={inputRef} />;
+});
+
+export default MyInput;
+```
+
+```css
+input {
+  margin: 5px;
+}
+```
+
+</Sandpack>
+
+---
+
+### Exposing your own imperative methods {/*exposing-your-own-imperative-methods*/}
+
+The methods you expose via an imperative handle don't have to match the DOM methods exactly. For example, the `Post` component in the example below exposes a `scrollAndFocusAddComment` method via an imperative handle. This lets the parent `Page` scroll the list of comments *and* focus the input field when you click the button:
+
+<Sandpack>
+
+```js
+import { useRef } from 'react';
+import Post from './Post.js';
+
+export default function Page() {
+  const postRef = useRef(null);
+
+  function handleClick() {
+    postRef.current.scrollAndFocusAddComment();
+  }
+
+  return (
+    <>
+      <button onClick={handleClick}>
+        Write a comment
+      </button>
+      <Post ref={postRef} />
+    </>
+  );
+}
+```
+
+```js Post.js
+import { forwardRef, useRef, useImperativeHandle } from 'react';
+import CommentList from './CommentList.js';
+import AddComment from './AddComment.js';
+
+const Post = forwardRef((props, ref) => {
+  const commentsRef = useRef(null);
+  const addCommentRef = useRef(null);
+
+  useImperativeHandle(ref, () => {
+    return {
+      scrollAndFocusAddComment() {
+        commentsRef.current.scrollToBottom();
+        addCommentRef.current.focus();
+      }
+    };
+  }, []);
+
+  return (
+    <>
+      <article>
+        <p>Welcome to my blog!</p>
+      </article>
+      <CommentList ref={commentsRef} />
+      <AddComment ref={addCommentRef} />
+    </>
+  );
+});
+
+export default Post;
+```
+
+
+```js CommentList.js
+import { forwardRef, useRef, useImperativeHandle } from 'react';
+
+const CommentList = forwardRef(function CommentList(props, ref) {
+  const divRef = useRef(null);
+
+  useImperativeHandle(ref, () => {
+    return {
+      scrollToBottom() {
+        const node = divRef.current;
+        node.scrollTop = node.scrollHeight;
+      }
+    };
+  }, []);
+
+  let comments = [];
+  for (let i = 0; i < 50; i++) {
+    comments.push(<p key={i}>Comment #{i}</p>);
+  }
+
+  return (
+    <div className="CommentList" ref={divRef}>
+      {comments}
+    </div>
+  );
+});
+
+export default CommentList;
+```
+
+```js AddComment.js
+import { forwardRef, useRef, useImperativeHandle } from 'react';
+
+const AddComment = forwardRef(function AddComment(props, ref) {
+  return <input placeholder="Add comment..." ref={ref} />;
+});
+
+export default AddComment;
+```
+
+```css
+.CommentList {
+  height: 100px;
+  overflow: scroll;
+  border: 1px solid black;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+```
+
+</Sandpack>
+
+<Pitfall>
+
+**Do not overuse refs.** You should only use refs for *imperative* behaviors that you can't express as props: for example, scrolling to a node, focusing a node, triggering an animation, selecting text, and so on.
+
+**If you can express something as a prop, you should not use a ref.** For example, instead of exposing an imperative handle like `{ open, close }` from a `Modal` component, it is better to take `isOpen` as a prop like `<Modal isOpen={isOpen} />`. [Effects](/learn/synchronizing-with-effects) can help you expose imperative behaviors via props.
+
+</Pitfall>
diff --git a/beta/src/content/reference/react/useInsertionEffect.md b/beta/src/content/reference/react/useInsertionEffect.md
new file mode 100644
index 000000000..43b31a122
--- /dev/null
+++ b/beta/src/content/reference/react/useInsertionEffect.md
@@ -0,0 +1,139 @@
+---
+title: useInsertionEffect
+---
+
+<Pitfall>
+
+`useInsertionEffect` is aimed at CSS-in-JS library authors. Unless you are working on a CSS-in-JS library and need a place to inject the styles, you probably want [`useEffect`](/reference/react/useEffect) or [`useLayoutEffect`](/reference/react/useLayoutEffect) instead.
+
+</Pitfall>
+
+<Intro>
+
+`useInsertionEffect` is a version of [`useEffect`](/reference/react/useEffect) that fires before any DOM mutations.
+
+```js
+useInsertionEffect(setup, dependencies?)
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `useInsertionEffect(setup, dependencies?)` {/*useinsertioneffect*/}
+
+Call `useInsertionEffect` to insert the styles before any DOM mutations:
+
+```js
+import { useInsertionEffect } from 'react';
+
+// Inside your CSS-in-JS library
+function useCSS(rule) {
+  useInsertionEffect(() => {
+    // ... inject <style> tags here ...
+  });
+  return rule;
+}
+```
+
+[See more examples below.](#usage)
+
+#### Parameters {/*parameters*/}
+
+* `setup`: The function with your Effect's logic. Your setup function may also optionally return a *cleanup* function. Before your component is first added to the DOM, React will run your setup function. After every re-render with changed dependencies, React will first run the cleanup function (if you provided it) with the old values, and then run your setup function with the new values. Before your component is removed from the DOM, React will run your cleanup function one last time.
+ 
+* **optional** `dependencies`: The list of all reactive values referenced inside of the `setup` code. Reactive values include props, state, and all the variables and functions declared directly inside your component body. If your linter is [configured for React](/learn/editor-setup#linting), it will verify that every reactive value is correctly specified as a dependency. The list of dependencies must have a constant number of items and be written inline like `[dep1, dep2, dep3]`. React will compare each dependency with its previous value using the [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison algorithm. If you don't specify the dependencies at all, your Effect will re-run after every re-render of the component.
+
+#### Returns {/*returns*/}
+
+`useInsertionEffect` returns `undefined`.
+
+#### Caveats {/*caveats*/}
+
+* Effects only run on the client. They don't run during server rendering.
+* You can't update state from inside `useInsertionEffect`.
+* By the time `useInsertionEffect` runs, refs are not attached yet, and DOM is not yet updated.
+
+---
+
+## Usage {/*usage*/}
+
+### Injecting dynamic styles from CSS-in-JS libraries {/*injecting-dynamic-styles-from-css-in-js-libraries*/}
+
+Traditionally, you would style React components using plain CSS.
+
+```js
+// In your JS file:
+<button className="success" />
+
+// In your CSS file:
+.success { color: green; }
+```
+
+Some teams prefer to author styles directly in JavaScript code instead of writing CSS files. This usually requires using a CSS-in-JS library or a tool. There are three common approaches to CSS-in-JS you might encounter:
+
+1. Static extraction to CSS files with a compiler
+2. Inline styles, e.g. `<div style={{ opacity: 1 }}>`
+3. Runtime injection of `<style>` tags
+
+If you use CSS-in-JS, we recommend a combination of the first two approaches (CSS files for static styles, inline styles for dynamic styles). **We don't recommend runtime `<style>` tag injection for two reasons:**
+
+1. Runtime injection forces the browser to recalculate the styles a lot more often.
+2. Runtime injection can be very slow if it happens at the wrong time in the React lifecycle.
+
+The first problem is not solvable, but `useInsertionEffect` helps you solve the second problem.
+
+Call `useInsertionEffect` to insert the styles before any DOM mutations:
+
+```js {4-11}
+// Inside your CSS-in-JS library
+let isInserted = new Set();
+function useCSS(rule) {
+  useInsertionEffect(() => {
+    // As explained earlier, we don't recommend runtime injection of <style> tags.
+    // But if you have to do it, then it's important to do in useInsertionEffect.
+    if (!isInserted.has(rule)) {
+      isInserted.add(rule);
+      document.head.appendChild(getStyleForRule(rule));
+    }
+  });
+  return rule;
+}
+
+function Button() {
+  const className = useCSS('...');
+  return <div className={className} />;
+}
+```
+
+Similarly to `useEffect`, `useInsertionEffect` does not run on the server. If you need to collect which CSS rules have been used on the server, you can do it during rendering:
+
+```js {1,4-6}
+let collectedRulesSet = new Set();
+
+function useCSS(rule) {
+  if (typeof window === 'undefined') {
+    collectedRulesSet.add(rule);
+  }
+  useInsertionEffect(() => {
+    // ...
+  });
+  return rule;
+}
+```
+
+[Read more about upgrading CSS-in-JS libraries with runtime injection to `useInsertionEffect`.](https://github.com/reactwg/react-18/discussions/110)
+
+<DeepDive>
+
+#### How is this better than injecting styles during rendering or useLayoutEffect? {/*how-is-this-better-than-injecting-styles-during-rendering-or-uselayouteffect*/}
+
+If you insert styles during rendering and React is processing a [non-blocking update,](/reference/react/useTransition#marking-a-state-update-as-a-non-blocking-transition) the browser will recalculate the styles every single frame while rendering a component tree, which can be **extremely slow.**
+
+`useInsertionEffect` is better than inserting styles during [`useLayoutEffect`](/reference/react/useLayoutEffect) or [`useEffect`](/reference/react/useEffect) because it ensures that by the time other Effects run in your components, the `<style>` tags have already been inserted. Otherwise, layout calculations in regular Effects would be wrong due to outdated styles.
+
+</DeepDive>
diff --git a/beta/src/content/reference/react/useLayoutEffect.md b/beta/src/content/reference/react/useLayoutEffect.md
new file mode 100644
index 000000000..cfedd6719
--- /dev/null
+++ b/beta/src/content/reference/react/useLayoutEffect.md
@@ -0,0 +1,743 @@
+---
+title: useLayoutEffect
+---
+
+<Pitfall>
+
+`useLayoutEffect` can hurt performance. Prefer [`useEffect`](/reference/react/useEffect) when possible.
+
+</Pitfall>
+
+<Intro>
+
+`useLayoutEffect` is a version of [`useEffect`](/reference/react/useEffect) that fires before the browser repaints the screen.
+
+```js
+useLayoutEffect(setup, dependencies?)
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `useLayoutEffect(setup, dependencies?)` {/*useinsertioneffect*/}
+
+Call `useLayoutEffect` perform the layout measurements before the browser repaints the screen:
+
+```js
+import { useState, useRef, useLayoutEffect } from 'react';
+
+function Tooltip() {
+  const ref = useRef(null);
+  const [tooltipHeight, setTooltipHeight] = useState(0);
+
+  useLayoutEffect(() => {
+    const { height } = ref.current.getBoundingClientRect();
+    setTooltipHeight(height);
+  }, []);
+  // ...
+```
+
+
+[See more examples below.](#usage)
+
+#### Parameters {/*parameters*/}
+
+* `setup`: The function with your Effect's logic. Your setup function may also optionally return a *cleanup* function. Before your component is first added to the DOM, React will run your setup function. After every re-render with changed dependencies, React will first run the cleanup function (if you provided it) with the old values, and then run your setup function with the new values. Before your component is removed from the DOM, React will run your cleanup function one last time.
+ 
+* **optional** `dependencies`: The list of all reactive values referenced inside of the `setup` code. Reactive values include props, state, and all the variables and functions declared directly inside your component body. If your linter is [configured for React](/learn/editor-setup#linting), it will verify that every reactive value is correctly specified as a dependency. The list of dependencies must have a constant number of items and be written inline like `[dep1, dep2, dep3]`. React will compare each dependency with its previous value using the [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison algorithm. If you don't specify the dependencies at all, your Effect will re-run after every re-render of the component.
+
+#### Returns {/*returns*/}
+
+`useLayoutEffect` returns `undefined`.
+
+#### Caveats {/*caveats*/}
+
+* `useLayoutEffect` is a Hook, so you can only call it **at the top level of your component** or your own Hooks. You can't call it inside loops or conditions. If you need that, extract a new component and move the state into it.
+
+* When Strict Mode is on, React will **run one extra development-only setup+cleanup cycle** before the first real setup. This is a stress-test that ensures that your cleanup logic "mirrors" your setup logic and that it stops or undoes whatever the setup is doing. If this causes a problem, [you need to implement the cleanup function.](/learn/synchronizing-with-effects#how-to-handle-the-effect-firing-twice-in-development)
+
+* If some of your dependencies are objects or functions defined inside the component, there is a risk that they will **cause the Effect to re-run more often than needed.** To fix this, remove unnecessary [object](/reference/react/useEffect#removing-unnecessary-object-dependencies) and [function](/reference/react/useEffect#removing-unnecessary-function-dependencies) dependencies. You can also [extract state updates](/reference/react/useEffect#updating-state-based-on-previous-state-from-an-effect) and [non-reactive logic](/reference/react/useEffect#reading-the-latest-props-and-state-from-an-effect) outside of your Effect.
+
+* Effects **only run on the client.** They don't run during server rendering.
+
+* The code inside `useLayoutEffect` and all state updates scheduled from it **block the browser from repainting the screen.** When used excessively, this can make your app very slow. When possible, prefer [`useEffect`.](/reference/reac/useEffect)
+
+---
+
+## Usage {/*usage*/}
+
+### Measuring layout before the browser repaints the screen {/*measuring-layout-before-the-browser-repaints-the-screen*/}
+
+Most components don't need to know their position and size on the screen to decide what to render. They only return some JSX with CSS. Then the browser calculates their *layout* (position and size) and repaints the screen.
+
+Sometimes, that's not enough. Imagine a tooltip that appears next to some element on hover. If there's enough space, the tooltip should appear above the element, but if it doesn't fit, it should appear below. This means that in order to render the tooltip at the right final position, you need to know its height (i.e. whether it fits at the top).
+
+To do this, you need to render in two passes:
+
+1. Render the tooltip anywhere (even with a wrong position).
+2. Measure its height and decide where to place the tooltip.
+3. Render the tooltip *again* in the correct place.
+
+**All of this needs to happen before the browser repaints the screen.** You don't want the user to see the tooltip moving. Call `useLayoutEffect` to perform the layout measurements before the browser repaints the screen:
+
+```js {5-8}
+function Tooltip() {
+  const ref = useRef(null);
+  const [tooltipHeight, setTooltipHeight] = useState(0); // You don't know real height yet
+
+  useLayoutEffect(() => {
+    const { height } = ref.current.getBoundingClientRect();
+    setTooltipHeight(height); // Re-render now that you know the real height
+  }, []);
+
+  // ...use tooltipHeight in the rendering logic below...
+}
+```
+
+Here's how this works step by step:
+
+1. `Tooltip` renders with the initial `tooltipHeight = 0`  (so the tooltip may be wrongly positioned).
+2. React places it in the DOM and runs the code in `useLayoutEffect`.
+3. Your `useLayoutEffect` [measures the height](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) of the tooltip content and triggers an immediate re-render.
+4. `Tooltip` renders again with the real `tooltipHeight` (so the tooltip is correctly positioned).
+5. React updates it in the DOM, and the browser finally displays the tooltip.
+
+Hover over the buttons below and see how the tooltip adjusts its position depending on whether it fits:
+
+<Sandpack>
+
+```js
+import ButtonWithTooltip from './ButtonWithTooltip.js';
+
+export default function App() {
+  return (
+    <div>
+      <ButtonWithTooltip
+        tooltipContent={
+          <div>
+            This tooltip does not fit above the button.
+            <br />
+            This is why it's displayed below instead!
+          </div>
+        }
+      >
+        Hover over me (tooltip above)
+      </ButtonWithTooltip>
+      <div style={{ height: 50 }} />
+      <ButtonWithTooltip
+        tooltipContent={
+          <div>This tooltip fits above the button</div>
+        }
+      >
+        Hover over me (tooltip below)
+      </ButtonWithTooltip>
+      <div style={{ height: 50 }} />
+      <ButtonWithTooltip
+        tooltipContent={
+          <div>This tooltip fits above the button</div>
+        }
+      >
+        Hover over me (tooltip below)
+      </ButtonWithTooltip>
+    </div>
+  );
+}
+```
+
+```js ButtonWithTooltip.js
+import { useState, useRef } from 'react';
+import Tooltip from './Tooltip.js';
+
+export default function ButtonWithTooltip({ tooltipContent, ...rest }) {
+  const [targetRect, setTargetRect] = useState(null);
+  const buttonRef = useRef(null);
+  return (
+    <>
+      <button
+        {...rest}
+        ref={buttonRef}
+        onPointerEnter={() => {
+          const rect = buttonRef.current.getBoundingClientRect();
+          setTargetRect({
+            left: rect.left,
+            top: rect.top,
+            right: rect.right,
+            bottom: rect.bottom,
+          });
+        }}
+        onPointerLeave={() => {
+          setTargetRect(null);
+        }}
+      />
+      {targetRect !== null && (
+        <Tooltip targetRect={targetRect}>
+          {tooltipContent}
+        </Tooltip>
+      )
+    }
+    </>
+  );
+}
+```
+
+```js Tooltip.js active
+import { useRef, useLayoutEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import TooltipContainer from './TooltipContainer.js';
+
+export default function Tooltip({ children, targetRect }) {
+  const ref = useRef(null);
+  const [tooltipHeight, setTooltipHeight] = useState(0);
+
+  useLayoutEffect(() => {
+    const { height } = ref.current.getBoundingClientRect();
+    setTooltipHeight(height);
+    console.log('Measured tooltip height: ' + height);
+  }, []);
+
+  let tooltipX = 0;
+  let tooltipY = 0;
+  if (targetRect !== null) {
+    tooltipX = targetRect.left;
+    tooltipY = targetRect.top - tooltipHeight;
+    if (tooltipY < 0) {
+      // It doesn't fit above, so place below.
+      tooltipY = targetRect.bottom;
+    }
+  }
+
+  return createPortal(
+    <TooltipContainer x={tooltipX} y={tooltipY} contentRef={ref}>
+      {children}
+    </TooltipContainer>,
+    document.body
+  );
+}
+```
+
+```js TooltipContainer.js
+export default function TooltipContainer({ children, x, y, contentRef }) {
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        pointerEvents: 'none',
+        left: 0,
+        top: 0,
+        transform: `translate3d(${x}px, ${y}px, 0)`
+      }}
+    >
+      <div ref={contentRef} className="tooltip">
+        {children}
+      </div>
+    </div>
+  );
+}
+```
+
+```css
+.tooltip {
+  color: white;
+  background: #222;
+  border-radius: 4px;
+  padding: 4px;
+}
+```
+
+</Sandpack>
+
+Notice that even though the `Tooltip` component has to render in two passes (first, with `tooltipHeight` initialized to `0` and then with the real measured height), you only see the final result. This is why you need `useLayoutEffect` instead of [`useEffect`](/reference/react/useEffect) for this example. Let's look at the difference in detail below.
+
+<Recipes titleText="useLayoutEffect vs useEffect" titleId="examples">
+
+#### `useLayoutEffect` blocks the browser from repainting {/*uselayouteffect-blocks-the-browser-from-repainting*/}
+
+React guarantees that the code inside `useLayoutEffect` and any state updates scheduled inside it will be processed **before the browser repaints the screen.** This lets you render the tooltip, measure it, and re-render the tooltip again without the user noticing the first extra render. In other words, `useLayoutEffect` blocks the browser from painting.
+
+<Sandpack>
+
+```js
+import ButtonWithTooltip from './ButtonWithTooltip.js';
+
+export default function App() {
+  return (
+    <div>
+      <ButtonWithTooltip
+        tooltipContent={
+          <div>
+            This tooltip does not fit above the button.
+            <br />
+            This is why it's displayed below instead!
+          </div>
+        }
+      >
+        Hover over me (tooltip above)
+      </ButtonWithTooltip>
+      <div style={{ height: 50 }} />
+      <ButtonWithTooltip
+        tooltipContent={
+          <div>This tooltip fits above the button</div>
+        }
+      >
+        Hover over me (tooltip below)
+      </ButtonWithTooltip>
+      <div style={{ height: 50 }} />
+      <ButtonWithTooltip
+        tooltipContent={
+          <div>This tooltip fits above the button</div>
+        }
+      >
+        Hover over me (tooltip below)
+      </ButtonWithTooltip>
+    </div>
+  );
+}
+```
+
+```js ButtonWithTooltip.js
+import { useState, useRef } from 'react';
+import Tooltip from './Tooltip.js';
+
+export default function ButtonWithTooltip({ tooltipContent, ...rest }) {
+  const [targetRect, setTargetRect] = useState(null);
+  const buttonRef = useRef(null);
+  return (
+    <>
+      <button
+        {...rest}
+        ref={buttonRef}
+        onPointerEnter={() => {
+          const rect = buttonRef.current.getBoundingClientRect();
+          setTargetRect({
+            left: rect.left,
+            top: rect.top,
+            right: rect.right,
+            bottom: rect.bottom,
+          });
+        }}
+        onPointerLeave={() => {
+          setTargetRect(null);
+        }}
+      />
+      {targetRect !== null && (
+        <Tooltip targetRect={targetRect}>
+          {tooltipContent}
+        </Tooltip>
+      )
+    }
+    </>
+  );
+}
+```
+
+```js Tooltip.js active
+import { useRef, useLayoutEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import TooltipContainer from './TooltipContainer.js';
+
+export default function Tooltip({ children, targetRect }) {
+  const ref = useRef(null);
+  const [tooltipHeight, setTooltipHeight] = useState(0);
+
+  useLayoutEffect(() => {
+    const { height } = ref.current.getBoundingClientRect();
+    setTooltipHeight(height);
+  }, []);
+
+  let tooltipX = 0;
+  let tooltipY = 0;
+  if (targetRect !== null) {
+    tooltipX = targetRect.left;
+    tooltipY = targetRect.top - tooltipHeight;
+    if (tooltipY < 0) {
+      // It doesn't fit above, so place below.
+      tooltipY = targetRect.bottom;
+    }
+  }
+
+  return createPortal(
+    <TooltipContainer x={tooltipX} y={tooltipY} contentRef={ref}>
+      {children}
+    </TooltipContainer>,
+    document.body
+  );
+}
+```
+
+```js TooltipContainer.js
+export default function TooltipContainer({ children, x, y, contentRef }) {
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        pointerEvents: 'none',
+        left: 0,
+        top: 0,
+        transform: `translate3d(${x}px, ${y}px, 0)`
+      }}
+    >
+      <div ref={contentRef} className="tooltip">
+        {children}
+      </div>
+    </div>
+  );
+}
+```
+
+```css
+.tooltip {
+  color: white;
+  background: #222;
+  border-radius: 4px;
+  padding: 4px;
+}
+```
+
+</Sandpack>
+
+<Solution />
+
+#### `useEffect` does not block the browser {/*useeffect-does-not-block-the-browser*/}
+
+Here is the same example, but with [`useEffect`](/reference/react/useEffect) instead of `useLayoutEffect`. If you're on a slower device, you might notice that sometimes the tooltip "flickers" and you briefly see its initial position before the corrected position.
+
+<Sandpack>
+
+```js
+import ButtonWithTooltip from './ButtonWithTooltip.js';
+
+export default function App() {
+  return (
+    <div>
+      <ButtonWithTooltip
+        tooltipContent={
+          <div>
+            This tooltip does not fit above the button.
+            <br />
+            This is why it's displayed below instead!
+          </div>
+        }
+      >
+        Hover over me (tooltip above)
+      </ButtonWithTooltip>
+      <div style={{ height: 50 }} />
+      <ButtonWithTooltip
+        tooltipContent={
+          <div>This tooltip fits above the button</div>
+        }
+      >
+        Hover over me (tooltip below)
+      </ButtonWithTooltip>
+      <div style={{ height: 50 }} />
+      <ButtonWithTooltip
+        tooltipContent={
+          <div>This tooltip fits above the button</div>
+        }
+      >
+        Hover over me (tooltip below)
+      </ButtonWithTooltip>
+    </div>
+  );
+}
+```
+
+```js ButtonWithTooltip.js
+import { useState, useRef } from 'react';
+import Tooltip from './Tooltip.js';
+
+export default function ButtonWithTooltip({ tooltipContent, ...rest }) {
+  const [targetRect, setTargetRect] = useState(null);
+  const buttonRef = useRef(null);
+  return (
+    <>
+      <button
+        {...rest}
+        ref={buttonRef}
+        onPointerEnter={() => {
+          const rect = buttonRef.current.getBoundingClientRect();
+          setTargetRect({
+            left: rect.left,
+            top: rect.top,
+            right: rect.right,
+            bottom: rect.bottom,
+          });
+        }}
+        onPointerLeave={() => {
+          setTargetRect(null);
+        }}
+      />
+      {targetRect !== null && (
+        <Tooltip targetRect={targetRect}>
+          {tooltipContent}
+        </Tooltip>
+      )
+    }
+    </>
+  );
+}
+```
+
+```js Tooltip.js active
+import { useRef, useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import TooltipContainer from './TooltipContainer.js';
+
+export default function Tooltip({ children, targetRect }) {
+  const ref = useRef(null);
+  const [tooltipHeight, setTooltipHeight] = useState(0);
+
+  useEffect(() => {
+    const { height } = ref.current.getBoundingClientRect();
+    setTooltipHeight(height);
+  }, []);
+
+  let tooltipX = 0;
+  let tooltipY = 0;
+  if (targetRect !== null) {
+    tooltipX = targetRect.left;
+    tooltipY = targetRect.top - tooltipHeight;
+    if (tooltipY < 0) {
+      // It doesn't fit above, so place below.
+      tooltipY = targetRect.bottom;
+    }
+  }
+
+  return createPortal(
+    <TooltipContainer x={tooltipX} y={tooltipY} contentRef={ref}>
+      {children}
+    </TooltipContainer>,
+    document.body
+  );
+}
+```
+
+```js TooltipContainer.js
+export default function TooltipContainer({ children, x, y, contentRef }) {
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        pointerEvents: 'none',
+        left: 0,
+        top: 0,
+        transform: `translate3d(${x}px, ${y}px, 0)`
+      }}
+    >
+      <div ref={contentRef} className="tooltip">
+        {children}
+      </div>
+    </div>
+  );
+}
+```
+
+```css
+.tooltip {
+  color: white;
+  background: #222;
+  border-radius: 4px;
+  padding: 4px;
+}
+```
+
+</Sandpack>
+
+To make the bug easier to reproduce, this version adds an artificial delay during rendering. React will let the browser paint the screen before it processes the state update inside `useEffect`. As a result, the tooltip flickers:
+
+<Sandpack>
+
+```js
+import ButtonWithTooltip from './ButtonWithTooltip.js';
+
+export default function App() {
+  return (
+    <div>
+      <ButtonWithTooltip
+        tooltipContent={
+          <div>
+            This tooltip does not fit above the button.
+            <br />
+            This is why it's displayed below instead!
+          </div>
+        }
+      >
+        Hover over me (tooltip above)
+      </ButtonWithTooltip>
+      <div style={{ height: 50 }} />
+      <ButtonWithTooltip
+        tooltipContent={
+          <div>This tooltip fits above the button</div>
+        }
+      >
+        Hover over me (tooltip below)
+      </ButtonWithTooltip>
+      <div style={{ height: 50 }} />
+      <ButtonWithTooltip
+        tooltipContent={
+          <div>This tooltip fits above the button</div>
+        }
+      >
+        Hover over me (tooltip below)
+      </ButtonWithTooltip>
+    </div>
+  );
+}
+```
+
+```js ButtonWithTooltip.js
+import { useState, useRef } from 'react';
+import Tooltip from './Tooltip.js';
+
+export default function ButtonWithTooltip({ tooltipContent, ...rest }) {
+  const [targetRect, setTargetRect] = useState(null);
+  const buttonRef = useRef(null);
+  return (
+    <>
+      <button
+        {...rest}
+        ref={buttonRef}
+        onPointerEnter={() => {
+          const rect = buttonRef.current.getBoundingClientRect();
+          setTargetRect({
+            left: rect.left,
+            top: rect.top,
+            right: rect.right,
+            bottom: rect.bottom,
+          });
+        }}
+        onPointerLeave={() => {
+          setTargetRect(null);
+        }}
+      />
+      {targetRect !== null && (
+        <Tooltip targetRect={targetRect}>
+          {tooltipContent}
+        </Tooltip>
+      )
+    }
+    </>
+  );
+}
+```
+
+```js Tooltip.js active
+import { useRef, useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import TooltipContainer from './TooltipContainer.js';
+
+export default function Tooltip({ children, targetRect }) {
+  const ref = useRef(null);
+  const [tooltipHeight, setTooltipHeight] = useState(0);
+
+  // This artificially slows down rendering
+  let now = performance.now();
+  while (performance.now() - now < 100) {
+    // Do nothing for a bit...
+  }
+
+  useEffect(() => {
+    const { height } = ref.current.getBoundingClientRect();
+    setTooltipHeight(height);
+  }, []);
+
+  let tooltipX = 0;
+  let tooltipY = 0;
+  if (targetRect !== null) {
+    tooltipX = targetRect.left;
+    tooltipY = targetRect.top - tooltipHeight;
+    if (tooltipY < 0) {
+      // It doesn't fit above, so place below.
+      tooltipY = targetRect.bottom;
+    }
+  }
+
+  return createPortal(
+    <TooltipContainer x={tooltipX} y={tooltipY} contentRef={ref}>
+      {children}
+    </TooltipContainer>,
+    document.body
+  );
+}
+```
+
+```js TooltipContainer.js
+export default function TooltipContainer({ children, x, y, contentRef }) {
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        pointerEvents: 'none',
+        left: 0,
+        top: 0,
+        transform: `translate3d(${x}px, ${y}px, 0)`
+      }}
+    >
+      <div ref={contentRef} className="tooltip">
+        {children}
+      </div>
+    </div>
+  );
+}
+```
+
+```css
+.tooltip {
+  color: white;
+  background: #222;
+  border-radius: 4px;
+  padding: 4px;
+}
+```
+
+</Sandpack>
+
+Edit this example to `useLayoutEffect` and observe that it blocks the paint even if rendering is slowed down.
+
+<Solution />
+
+</Recipes>
+
+<Note>
+
+Rendering in two passes and blocking the browser hurts performance. Try to avoid this when you can.
+
+</Note>
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+
+### I'm getting an error: "`useLayoutEffect` does nothing on the server" {/*im-getting-an-error-uselayouteffect-does-nothing-on-the-server*/}
+
+The purpose of `useLayoutEffect` is to let your component [use layout information for rendering:](#measuring-layout-before-the-browser-repaints-the-screen)
+
+1. Render the initial content.
+2. Measure the layout *before the browser repaints the screen.*
+3. Render the final content using the layout information you've read.
+
+When you or your framework uses [server rendering](/reference/react-dom/server), your React app renders to HTML on the server for the initial render. This lets you show the initial HTML before the JavaScript code loads.
+
+The problem is that on the server, there is no layout information.
+
+In the [earlier example](#measuring-layout-before-the-browser-repaints-the-screen), the `useLayoutEffect` call in the `Tooltip` component lets it position itself correctly (either above or below content) depending on the content height. If you tried to render `Tooltip` as a part of the initial server HTML, this would be impossible to determine. On the server, there is no browser and no layout! So, even if you rendered it on the server, its position would "jump" on the client after the JavaScript loads and runs.
+
+Usually, components that rely on layout information don't need to render on the server anyway. For example, it probably doesn't make sense to show a `Tooltip` during the initial render. It is triggered by a client interaction.
+
+However, if you're running into this problem, you have a few options:
+
+1. You can replace `useLayoutEffect` with [`useEffect`.](/reference/react/useEffect) This tells React that it's okay to display the initial render result without blocking the paint (because the original HTML will become visible before your Effect runs).
+
+2. You can [mark your component as client-only.](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-server-only-content) This tells React to replace its content up to the closest [`<Suspense>`](/reference/react/Suspense) boundary with a loading fallback (for example, a spinner or a glimmer) during server rendering.
+
+3. You can display different components on the server and on the client. One way to do this is to keep a boolean `isMounted` state that's initialized to `false`, and set it to `true` inside a `useEffect` call. Your rendering logic can then be like `return isMounted ? <RealContent /> : <FallbackContent />`. On the server and during the hydration, the user will see `FallbackContent` which should not call `useLayoutEffect`. Then React will replace it with `RealContent` which runs on the client only and can include `useLayoutEffect` calls.
+
+4. If you synchronize your component with an external data store and rely on `useLayoutEffect` for different reasons than measuring layout, consider [`useSyncExternalStore`](/reference/react/useSyncExternalStore) instead which [supports server rendering.](/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
+
+
+
+
diff --git a/beta/src/content/reference/react/useMemo.md b/beta/src/content/reference/react/useMemo.md
new file mode 100644
index 000000000..754e79daa
--- /dev/null
+++ b/beta/src/content/reference/react/useMemo.md
@@ -0,0 +1,1348 @@
+---
+title: useMemo
+---
+
+<Intro>
+
+`useMemo` is a React Hook that lets you cache the result of a calculation between re-renders.
+
+```js
+const cachedValue = useMemo(calculateValue, dependencies)
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `useMemo(calculateValue, dependencies)` {/*usememo*/}
+
+Call `useMemo` at the top level of your component to cache a calculation between re-renders:
+
+```js
+import { useMemo } from 'react';
+
+function TodoList({ todos, tab }) {
+  const visibleTodos = useMemo(
+    () => filterTodos(todos, tab),
+    [todos, tab]
+  );
+  // ...
+}
+```
+
+[See more examples below.](#usage)
+
+#### Parameters {/*parameters*/}
+
+* `calculateValue`: The function calculating the value that you want to cache. It should be pure, should take no arguments, and should return a value of any type. React will call your function during the initial render. On subsequent renders, React will return the same value again if the `dependencies` have not changed since the last render. Otherwise, it will call `calculateValue`, return its result, and store it in case it can be reused later.
+
+* `dependencies`: The list of all reactive values referenced inside of the `calculateValue` code. Reactive values include props, state, and all the variables and functions declared directly inside your component body. If your linter is [configured for React](/learn/editor-setup#linting), it will verify that every reactive value is correctly specified as a dependency. The list of dependencies must have a constant number of items and be written inline like `[dep1, dep2, dep3]`. React will compare each dependency with its previous value using the [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison algorithm.
+
+#### Returns {/*returns*/}
+
+On the initial render, `useMemo` returns the result of calling `calculateValue` with no arguments.
+
+During subsequent renders, it will either return an already stored value from the last render (if the dependencies haven't changed), or call `calculateValue` again, and return the result that `calculateValue` has returned.
+
+#### Caveats {/*caveats*/}
+
+* `useMemo` is a Hook, so you can only call it **at the top level of your component** or your own Hooks. You can't call it inside loops or conditions. If you need that, extract a new component and move the state into it.
+* In Strict Mode, React will **call your calculation function twice** in order to [help you find accidental impurities.](#my-calculation-runs-twice-on-every-re-render) This is development-only behavior and does not affect production. If your calculation function is pure (as it should be), this should not affect the logic of your component. The result from one of the calls will be ignored.
+* React **will not throw away the cached value unless there is a specific reason to do that.** For example, in development, React throws away the cache when you edit the file of your component. Both in development and in production, React will throw away the cache if your component suspends during the initial mount. In the future, React may add more features that take advantage of throwing away the cache--for example, if React adds built-in support for virtualized lists in the future, it would make sense to throw away the cache for items that scroll out of the virtualized table viewport. This should match your expectations if you rely on `useMemo` solely as a performance optimization. Otherwise, a [state variable](/reference/react/useState#avoiding-recreating-the-initial-state) or a [ref](/reference/react/useRef#avoiding-recreating-the-ref-contents) may be more appropriate.
+
+<Note>
+
+Caching return values like this is also known as [*memoization*,](https://en.wikipedia.org/wiki/Memoization) which is why this Hook is called `useMemo`.
+
+</Note>
+
+---
+
+## Usage {/*usage*/}
+
+### Skipping expensive recalculations {/*skipping-expensive-recalculations*/}
+
+To cache a calculation between re-renders, wrap it in a `useMemo` call at the top level of your component:
+
+```js [[3, 4, "visibleTodos"], [1, 4, "() => filterTodos(todos, tab)"], [2, 4, "[todos, tab]"]]
+import { useMemo } from 'react';
+
+function TodoList({ todos, tab, theme }) {
+  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
+  // ...
+}
+```
+
+You need to pass two things to `useMemo`:
+
+1. A <CodeStep step={1}>calculation function</CodeStep> that takes no arguments, like `() =>`, and returns what you wanted to calculate.
+2. A <CodeStep step={2}>list of dependencies</CodeStep> including every value within your component that's used inside your calculation.
+
+On the initial render, the <CodeStep step={3}>value</CodeStep> you'll get from `useMemo` will be the result of calling your <CodeStep step={1}>calculation</CodeStep>.
+
+On every subsequent render, React will compare the <CodeStep step={2}>dependencies</CodeStep> with the dependencies you passed during the last render. If none of the dependencies have changed (compared with [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is)), `useMemo` will return the value you already calculated before. Otherwise, React will re-run your calculation and return the new value.
+
+In other words, `useMemo` caches a calculation result between re-renders until its dependencies change.
+
+**Let's walk through an example to see when this is useful.**
+
+By default, React will re-run the entire body of your component every time that it re-renders. For example, if this `TodoList` updates its state or receives new props from its parent, the `filterTodos` function will re-run:
+
+```js {2}
+function TodoList({ todos, tab, theme }) {
+  const visibleTodos = filterTodos(todos, tab);
+  // ...
+}
+```
+
+Usually, this isn't a problem because most calculations are very fast. However, if you're filtering or transforming a large array, or doing some expensive computation, you might want to skip doing it again if data hasn't changed. If both `todos` and `tab` are the same as they were during the last render, wrapping the calculation in `useMemo` like earlier lets you reuse `visibleTodos` you've already calculated before. This type of caching is called *[memoization.](https://en.wikipedia.org/wiki/Memoization)*
+
+<Note>
+
+**You should only rely on `useMemo` as a performance optimization.** If your code doesn't work without it, find the underlying problem and fix it first. Then you may add `useMemo` to improve performance.
+
+</Note>
+
+<DeepDive>
+
+#### How to tell if a calculation is expensive? {/*how-to-tell-if-a-calculation-is-expensive*/}
+
+In general, unless you're creating or looping over thousands of objects, it's probably not expensive. If you want to get more confidence, you can add a console log to measure the time spent in a piece of code:
+
+```js {1,3}
+console.time('filter array');
+const visibleTodos = filterTodos(todos, tab);
+console.timeEnd('filter array');
+```
+
+Perform the interaction you're measuring (for example, typing into the input). You will then see logs like `filter array: 0.15ms` in your console. If the overall logged time adds up to a significant amount (say, `1ms` or more), it might make sense to memoize that calculation. As an experiment, you can then wrap the calculation in `useMemo` to verify whether the total logged time has decreased for that interaction or not:
+
+```js
+console.time('filter array');
+const visibleTodos = useMemo(() => {
+  return filterTodos(todos, tab); // Skipped if todos and tab haven't changed
+}, [todos, tab]);
+console.timeEnd('filter array');
+```
+
+`useMemo` won't make the *first* render faster. It only helps you skip unnecessary work on updates.
+
+Keep in mind that your machine is probably faster than your users' so it's a good idea to test the performance with an artificial slowdown. For example, Chrome offers a [CPU Throttling](https://developer.chrome.com/blog/new-in-devtools-61/#throttling) option for this.
+
+Also note that measuring performance in development will not give you the most accurate results. (For example, when [Strict Mode](/reference/react/StrictMode) is on, you will see each component render twice rather than once.) To get the most accurate timings, build your app for production and test it on a device like your users have.
+
+</DeepDive>
+
+<DeepDive>
+
+#### Should you add useMemo everywhere? {/*should-you-add-usememo-everywhere*/}
+
+If your app is like this site, and most interactions are coarse (like replacing a page or an entire section), memoization is usually unnecessary. On the other hand, if your app is more like a drawing editor, and most interactions are granular (like moving shapes), then you might find memoization very helpful. 
+
+Optimizing with `useMemo`  is only valuable in a few cases:
+
+- The calculation you're putting in `useMemo` is noticeably slow, and its dependencies rarely change.
+- You pass it as a prop to a component wrapped in [`memo`.](/reference/react/memo) You want to skip re-rendering if the value hasn't changed. Memoization lets your component re-render only when dependencies aren't the same.
+- The value you're passing is later used as a dependency of some Hook. For example, maybe another `useMemo` calculation value depends on it. Or maybe you are depending on this value from [`useEffect.`](/reference/react/useEffect)
+
+There is no benefit to wrapping a calculation in `useMemo` in other cases. There is no significant harm to doing that either, so some teams choose to not think about individual cases, and memoize as much as possible. The downside of this approach is that code becomes less readable. Also, not all memoization is effective: a single value that's "always new" is enough to break memoization for an entire component.
+
+**In practice, you can make a lot of memoization unnecessary by following a few principles:**
+
+1. When a component visually wraps other components, let it [accept JSX as children.](/learn/passing-props-to-a-component#passing-jsx-as-children) This way, when the wrapper component updates its own state, React knows that its children don't need to re-render.
+1. Prefer local state and don't [lift state up](/learn/sharing-state-between-components) any further than necessary. For example, don't keep transient state like forms and whether an item is hovered at the top of your tree or in a global state library.
+1. Keep your [rendering logic pure.](/learn/keeping-components-pure) If re-rendering a component causes a problem or produces some noticeable visual artifact, it's a bug in your component! Fix the bug instead of adding memoization.
+1. Avoid [unnecessary Effects that update state.](/learn/you-might-not-need-an-effect) Most performance problems in React apps are caused by chains of updates originating from Effects that cause your components to render over and over.
+1. Try to [remove unnecessary dependencies from your Effects.](/learn/removing-effect-dependencies) For example, instead of memoization, it's often simpler to move some object or a function inside an Effect or outside the component.
+
+If a specific interaction still feels laggy, [use the React Developer Tools profiler](/blog/2018/09/10/introducing-the-react-profiler.html) to see which components would benefit the most from memoization, and add memoization where needed. These principles make your components easier to debug and understand, so it's good to follow them in any case. In the long term, we're researching [doing granular memoization automatically](https://www.youtube.com/watch?v=lGEMwh32soc) to solve this once and for all.
+
+</DeepDive>
+
+<Recipes titleText="The difference between useMemo and calculating a value directly" titleId="examples-recalculation">
+
+#### Skipping recalculation with `useMemo` {/*skipping-recalculation-with-usememo*/}
+
+In this example, the `filterTodos` implementation is **artificially slowed down** so that you can see what happens when some JavaScript function you're calling during rendering is genuinely slow. Try switching the tabs and toggling the theme.
+
+Switching the tabs feels slow because it forces the slowed down `filterTodos` to re-execute. That's expected because the `tab` has changed, and so the entire calculation *needs* to re-run. (If you're curious why it runs twice, it's explained [here.](#my-calculation-runs-twice-on-every-re-render))
+
+Next, try toggling the theme. **Thanks to `useMemo`, it's fast despite the artificial slowdown!** The slow `filterTodos` call was skipped because both `todos` and `tab` (which you pass as dependencies to `useMemo`) haven't changed since the last render.
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+import { createTodos } from './utils.js';
+import TodoList from './TodoList.js';
+
+const todos = createTodos();
+
+export default function App() {
+  const [tab, setTab] = useState('all');
+  const [isDark, setIsDark] = useState(false);
+  return (
+    <>
+      <button onClick={() => setTab('all')}>
+        All
+      </button>
+      <button onClick={() => setTab('active')}>
+        Active
+      </button>
+      <button onClick={() => setTab('completed')}>
+        Completed
+      </button>
+      <br />
+      <label>
+        <input
+          type="checkbox"
+          checked={isDark}
+          onChange={e => setIsDark(e.target.checked)}
+        />
+        Dark mode
+      </label>
+      <hr />
+      <TodoList
+        todos={todos}
+        tab={tab}
+        theme={isDark ? 'dark' : 'light'}
+      />
+    </>
+  );
+}
+
+```
+
+```js TodoList.js active
+import { useMemo } from 'react';
+import { filterTodos } from './utils.js'
+
+export default function TodoList({ todos, theme, tab }) {
+  const visibleTodos = useMemo(
+    () => filterTodos(todos, tab),
+    [todos, tab]
+  );
+  return (
+    <div className={theme}>
+      <p><b>Note: <code>filterTodos</code> is artificially slowed down!</b></p>
+      <ul>
+        {visibleTodos.map(todo => (
+          <li key={todo.id}>
+            {todo.completed ?
+              <s>{todo.text}</s> :
+              todo.text
+            }
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+```
+
+```js utils.js
+export function createTodos() {
+  const todos = [];
+  for (let i = 0; i < 50; i++) {
+    todos.push({
+      id: i,
+      text: "Todo " + (i + 1),
+      completed: Math.random() > 0.5
+    });
+  }
+  return todos;
+}
+
+export function filterTodos(todos, tab) {
+  console.log('[ARTIFICIALLY SLOW] Filtering ' + todos.length + ' todos for "' + tab + '" tab.');
+  let startTime = performance.now();
+  while (performance.now() - startTime < 500) {
+    // Do nothing for 500 ms to emulate extremely slow code
+  }
+
+  return todos.filter(todo => {
+    if (tab === 'all') {
+      return true;
+    } else if (tab === 'active') {
+      return !todo.completed;
+    } else if (tab === 'completed') {
+      return todo.completed;
+    }
+  });
+}
+```
+
+```css
+label {
+  display: block;
+  margin-top: 10px;
+}
+
+.dark {
+  background-color: black;
+  color: white;
+}
+
+.light {
+  background-color: white;
+  color: black;
+}
+```
+
+</Sandpack>
+
+<Solution />
+
+#### Always recalculating a value {/*always-recalculating-a-value*/}
+
+In this example, the `filterTodos` implementation is also **artificially slowed down** so that you can see what happens when some JavaScript function you're calling during rendering is genuinely slow. Try switching the tabs and toggling the theme.
+
+Unlike in the previous example, toggling the theme is also slow now! This is because **there is no `useMemo` call in this version,** so the artificially slowed down `filterTodos` gets called on every re-render. It is called even if only `theme` has changed.
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+import { createTodos } from './utils.js';
+import TodoList from './TodoList.js';
+
+const todos = createTodos();
+
+export default function App() {
+  const [tab, setTab] = useState('all');
+  const [isDark, setIsDark] = useState(false);
+  return (
+    <>
+      <button onClick={() => setTab('all')}>
+        All
+      </button>
+      <button onClick={() => setTab('active')}>
+        Active
+      </button>
+      <button onClick={() => setTab('completed')}>
+        Completed
+      </button>
+      <br />
+      <label>
+        <input
+          type="checkbox"
+          checked={isDark}
+          onChange={e => setIsDark(e.target.checked)}
+        />
+        Dark mode
+      </label>
+      <hr />
+      <TodoList
+        todos={todos}
+        tab={tab}
+        theme={isDark ? 'dark' : 'light'}
+      />
+    </>
+  );
+}
+
+```
+
+```js TodoList.js active
+import { filterTodos } from './utils.js'
+
+export default function TodoList({ todos, theme, tab }) {
+  const visibleTodos = filterTodos(todos, tab);
+  return (
+    <div className={theme}>
+      <ul>
+        <p><b>Note: <code>filterTodos</code> is artificially slowed down!</b></p>
+        {visibleTodos.map(todo => (
+          <li key={todo.id}>
+            {todo.completed ?
+              <s>{todo.text}</s> :
+              todo.text
+            }
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+```
+
+```js utils.js
+export function createTodos() {
+  const todos = [];
+  for (let i = 0; i < 50; i++) {
+    todos.push({
+      id: i,
+      text: "Todo " + (i + 1),
+      completed: Math.random() > 0.5
+    });
+  }
+  return todos;
+}
+
+export function filterTodos(todos, tab) {
+  console.log('[ARTIFICIALLY SLOW] Filtering ' + todos.length + ' todos for "' + tab + '" tab.');
+  let startTime = performance.now();
+  while (performance.now() - startTime < 500) {
+    // Do nothing for 500 ms to emulate extremely slow code
+  }
+
+  return todos.filter(todo => {
+    if (tab === 'all') {
+      return true;
+    } else if (tab === 'active') {
+      return !todo.completed;
+    } else if (tab === 'completed') {
+      return todo.completed;
+    }
+  });
+}
+```
+
+```css
+label {
+  display: block;
+  margin-top: 10px;
+}
+
+.dark {
+  background-color: black;
+  color: white;
+}
+
+.light {
+  background-color: white;
+  color: black;
+}
+```
+
+</Sandpack>
+
+However, here is the same code **with the artificial slowdown removed.** Does the lack of `useMemo` feel noticeable or not?
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+import { createTodos } from './utils.js';
+import TodoList from './TodoList.js';
+
+const todos = createTodos();
+
+export default function App() {
+  const [tab, setTab] = useState('all');
+  const [isDark, setIsDark] = useState(false);
+  return (
+    <>
+      <button onClick={() => setTab('all')}>
+        All
+      </button>
+      <button onClick={() => setTab('active')}>
+        Active
+      </button>
+      <button onClick={() => setTab('completed')}>
+        Completed
+      </button>
+      <br />
+      <label>
+        <input
+          type="checkbox"
+          checked={isDark}
+          onChange={e => setIsDark(e.target.checked)}
+        />
+        Dark mode
+      </label>
+      <hr />
+      <TodoList
+        todos={todos}
+        tab={tab}
+        theme={isDark ? 'dark' : 'light'}
+      />
+    </>
+  );
+}
+
+```
+
+```js TodoList.js active
+import { filterTodos } from './utils.js'
+
+export default function TodoList({ todos, theme, tab }) {
+  const visibleTodos = filterTodos(todos, tab);
+  return (
+    <div className={theme}>
+      <ul>
+        {visibleTodos.map(todo => (
+          <li key={todo.id}>
+            {todo.completed ?
+              <s>{todo.text}</s> :
+              todo.text
+            }
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+```
+
+```js utils.js
+export function createTodos() {
+  const todos = [];
+  for (let i = 0; i < 50; i++) {
+    todos.push({
+      id: i,
+      text: "Todo " + (i + 1),
+      completed: Math.random() > 0.5
+    });
+  }
+  return todos;
+}
+
+export function filterTodos(todos, tab) {
+  console.log('Filtering ' + todos.length + ' todos for "' + tab + '" tab.');
+
+  return todos.filter(todo => {
+    if (tab === 'all') {
+      return true;
+    } else if (tab === 'active') {
+      return !todo.completed;
+    } else if (tab === 'completed') {
+      return todo.completed;
+    }
+  });
+}
+```
+
+```css
+label {
+  display: block;
+  margin-top: 10px;
+}
+
+.dark {
+  background-color: black;
+  color: white;
+}
+
+.light {
+  background-color: white;
+  color: black;
+}
+```
+
+</Sandpack>
+
+Quite often, code without memoization works fine. If your interactions are fast enough, you might not need memoization.
+
+You can try increasing the number of todo items in `utils.js` and see how the behavior changes. This particular calculation wasn't very expensive to begin with, but if the number of todos grows significantly, most of the overhead will be in re-rendering rather than in the filtering. Keep reading below to see how you can optimize re-rendering with `useMemo`.
+
+<Solution />
+
+</Recipes>
+
+---
+
+### Skipping re-rendering of components {/*skipping-re-rendering-of-components*/}
+
+In some cases, `useMemo` can also help you optimize performance of re-rendering child components. To illustrate this, let's say this `TodoList` component passes the `visibleTodos` as a prop to the child `List` component:
+
+```js {5}
+export default function TodoList({ todos, tab, theme }) {
+  // ...
+  return (
+    <div className={theme}>
+      <List items={visibleTodos} />
+    </div>
+  );
+}
+```
+
+You've noticed that toggling the `theme` prop freezes the app for a moment, but if you remove `<List />` from your JSX, it feels fast. This tells you that it's worth trying to optimize the `List` component.
+
+**By default, when a component re-renders, React re-renders all of its children recursively.** This is why, when `TodoList` re-renders with a different `theme`, the `List` component *also* re-renders. This is fine for components that don't require much calculation to re-render. But if you've verified that a re-render is slow, you can tell `List` to skip re-rendering when its props are the same as on last render by wrapping it in [`memo`:](/reference/react/memo)
+
+```js {3,5}
+import { memo } from 'react';
+
+const List = memo(function List({ items }) {
+  // ...
+});
+```
+
+**With this change, `List` will skip re-rendering if all of its props are the *same* as on the last render.** This is where caching the calculation becomes important! Imagine that you calculated `visibleTodos` without `useMemo`:
+
+```js {2-3,6-7}
+export default function TodoList({ todos, tab, theme }) {
+  // Every time the theme changes, this will be a different array...
+  const visibleTodos = filterTodos(todos, tab);
+  return (
+    <div className={theme}>
+      {/* ... so List's props will never be the same, and it will re-render every time */}
+      <List items={visibleTodos} />
+    </div>
+  );
+}
+```
+
+**In the above example, the `filterTodos` function always creates a *different* array,** similar to how the `{}` object literal always creates a new object. Normally, this wouldn't be a problem, but it means that `List` props will never be the same, and your [`memo`](/reference/react/memo) optimization won't work. This is where `useMemo` comes in handy:
+
+```js {2-3,5,9-10}
+export default function TodoList({ todos, tab, theme }) {
+  // Tell React to cache your calculation between re-renders...
+  const visibleTodos = useMemo(
+    () => filterTodos(todos, tab),
+    [todos, tab] // ...so as long as these dependencies don't change...
+  );
+  return (
+    <div className={theme}>
+      {/* ...List will receive the same props and can skip re-rendering */}
+      <List items={visibleTodos} />
+    </div>
+  );
+}
+```
+
+
+**By wrapping the `visibleTodos` calculation in `useMemo`, you ensure that it has the *same* value between the re-renders** (until dependencies change). You don't *have to* wrap a calculation in `useMemo` unless you do it for some specific reason. In this example, the reason is that you pass it to a component wrapped in [`memo`,](/reference/react/memo) and this lets it skip re-rendering. There are a few other reasons to add `useMemo` which are described further on this page.
+
+<DeepDive>
+
+#### Memoizing individual JSX nodes {/*memoizing-individual-jsx-nodes*/}
+
+Instead of wrapping `List` in [`memo`](/reference/react/memo), you could wrap the `<List />` JSX node itself in `useMemo`:
+
+```js {3,6}
+export default function TodoList({ todos, tab, theme }) {
+  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
+  const children = useMemo(() => <List items={visibleTodos} />, [visibleTodos]);
+  return (
+    <div className={theme}>
+      {children}
+    </div>
+  );
+}
+```
+
+The behavior would be the same. If the `visibleTodos` haven't changed, `List` won't be re-rendered.
+
+A JSX node like `<List items={visibleTodos} />` is an object like `{ type: List, props: { items: visibleTodos } }`. Creating this object is very cheap, but React doesn't know whether its contents is the same as last time or not. This is why by default, React will re-render the `List` component.
+
+However, if React sees the same exact JSX as during the previous render, it won't try to re-render your component. This is because JSX nodes are [immutable.](https://en.wikipedia.org/wiki/Immutable_object) A JSX node object could not have changed over time, so React knows it's safe to skip a re-render. However, for this to work, the node has to *actually be the same object*, not merely look the same in code. This is what `useMemo` does in this example.
+
+Manually wrapping JSX nodes into `useMemo` is not convenient. For example, you can't do this conditionally. This is usually you would wrap components with [`memo`](/reference/react/memo) instead of wrapping JSX nodes.
+
+</DeepDive>
+
+<Recipes titleText="The difference between skipping re-renders and always re-rendering" titleId="examples-rerendering">
+
+#### Skipping re-rendering with `useMemo` and `memo` {/*skipping-re-rendering-with-usememo-and-memo*/}
+
+In this example, the `List` component is **artificially slowed down** so that you can see what happens when a React component you're rendering is genuinely slow. Try switching the tabs and toggling the theme.
+
+Switching the tabs feels slow because it forces the slowed down `List` to re-render. That's expected because the `tab` has changed, and so you need to reflect the user's new choice on the screen.
+
+Next, try toggling the theme. **Thanks to `useMemo` together with [`memo`](/reference/react/memo), it’s fast despite the artificial slowdown!** The `List` skipped re-rendering because the `visibleItems` array has not changed since the last render. The `visibleItems` array has not changed because both `todos` and `tab` (which you pass as dependencies to `useMemo`) haven't changed since the last render.
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+import { createTodos } from './utils.js';
+import TodoList from './TodoList.js';
+
+const todos = createTodos();
+
+export default function App() {
+  const [tab, setTab] = useState('all');
+  const [isDark, setIsDark] = useState(false);
+  return (
+    <>
+      <button onClick={() => setTab('all')}>
+        All
+      </button>
+      <button onClick={() => setTab('active')}>
+        Active
+      </button>
+      <button onClick={() => setTab('completed')}>
+        Completed
+      </button>
+      <br />
+      <label>
+        <input
+          type="checkbox"
+          checked={isDark}
+          onChange={e => setIsDark(e.target.checked)}
+        />
+        Dark mode
+      </label>
+      <hr />
+      <TodoList
+        todos={todos}
+        tab={tab}
+        theme={isDark ? 'dark' : 'light'}
+      />
+    </>
+  );
+}
+```
+
+```js TodoList.js active
+import { useMemo } from 'react';
+import List from './List.js';
+import { filterTodos } from './utils.js'
+
+export default function TodoList({ todos, theme, tab }) {
+  const visibleTodos = useMemo(
+    () => filterTodos(todos, tab),
+    [todos, tab]
+  );
+  return (
+    <div className={theme}>
+      <p><b>Note: <code>List</code> is artificially slowed down!</b></p>
+      <List items={visibleTodos} />
+    </div>
+  );
+}
+```
+
+```js List.js
+import { memo } from 'react';
+
+const List = memo(function List({ items }) {
+  console.log('[ARTIFICIALLY SLOW] Rendering <List /> with ' + items.length + ' items');
+  let startTime = performance.now();
+  while (performance.now() - startTime < 500) {
+    // Do nothing for 500 ms to emulate extremely slow code
+  }
+
+  return (
+    <ul>
+      {items.map(item => (
+        <li key={item.id}>
+          {item.completed ?
+            <s>{item.text}</s> :
+            item.text
+          }
+        </li>
+      ))}
+    </ul>
+  );
+});
+
+export default List;
+```
+
+```js utils.js
+export function createTodos() {
+  const todos = [];
+  for (let i = 0; i < 50; i++) {
+    todos.push({
+      id: i,
+      text: "Todo " + (i + 1),
+      completed: Math.random() > 0.5
+    });
+  }
+  return todos;
+}
+
+export function filterTodos(todos, tab) {
+  return todos.filter(todo => {
+    if (tab === 'all') {
+      return true;
+    } else if (tab === 'active') {
+      return !todo.completed;
+    } else if (tab === 'completed') {
+      return todo.completed;
+    }
+  });
+}
+```
+
+```css
+label {
+  display: block;
+  margin-top: 10px;
+}
+
+.dark {
+  background-color: black;
+  color: white;
+}
+
+.light {
+  background-color: white;
+  color: black;
+}
+```
+
+</Sandpack>
+
+<Solution />
+
+#### Always re-rendering a component {/*always-re-rendering-a-component*/}
+
+In this example, the `List` implementation is also **artificially slowed down** so that you can see what happens when some React component you're rendering is genuinely slow. Try switching the tabs and toggling the theme.
+
+Unlike in the previous example, toggling the theme is also slow now! This is because **there is no `useMemo` call in this version,** so the `visibleTodos` is always a different array, and the slowed down `List` component can't skip re-rendering.
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+import { createTodos } from './utils.js';
+import TodoList from './TodoList.js';
+
+const todos = createTodos();
+
+export default function App() {
+  const [tab, setTab] = useState('all');
+  const [isDark, setIsDark] = useState(false);
+  return (
+    <>
+      <button onClick={() => setTab('all')}>
+        All
+      </button>
+      <button onClick={() => setTab('active')}>
+        Active
+      </button>
+      <button onClick={() => setTab('completed')}>
+        Completed
+      </button>
+      <br />
+      <label>
+        <input
+          type="checkbox"
+          checked={isDark}
+          onChange={e => setIsDark(e.target.checked)}
+        />
+        Dark mode
+      </label>
+      <hr />
+      <TodoList
+        todos={todos}
+        tab={tab}
+        theme={isDark ? 'dark' : 'light'}
+      />
+    </>
+  );
+}
+```
+
+```js TodoList.js active
+import List from './List.js';
+import { filterTodos } from './utils.js'
+
+export default function TodoList({ todos, theme, tab }) {
+  const visibleTodos = filterTodos(todos, tab);
+  return (
+    <div className={theme}>
+      <p><b>Note: <code>List</code> is artificially slowed down!</b></p>
+      <List items={visibleTodos} />
+    </div>
+  );
+}
+```
+
+```js List.js
+import { memo } from 'react';
+
+const List = memo(function List({ items }) {
+  console.log('[ARTIFICIALLY SLOW] Rendering <List /> with ' + items.length + ' items');
+  let startTime = performance.now();
+  while (performance.now() - startTime < 500) {
+    // Do nothing for 500 ms to emulate extremely slow code
+  }
+
+  return (
+    <ul>
+      {items.map(item => (
+        <li key={item.id}>
+          {item.completed ?
+            <s>{item.text}</s> :
+            item.text
+          }
+        </li>
+      ))}
+    </ul>
+  );
+});
+
+export default List;
+```
+
+```js utils.js
+export function createTodos() {
+  const todos = [];
+  for (let i = 0; i < 50; i++) {
+    todos.push({
+      id: i,
+      text: "Todo " + (i + 1),
+      completed: Math.random() > 0.5
+    });
+  }
+  return todos;
+}
+
+export function filterTodos(todos, tab) {
+  return todos.filter(todo => {
+    if (tab === 'all') {
+      return true;
+    } else if (tab === 'active') {
+      return !todo.completed;
+    } else if (tab === 'completed') {
+      return todo.completed;
+    }
+  });
+}
+```
+
+```css
+label {
+  display: block;
+  margin-top: 10px;
+}
+
+.dark {
+  background-color: black;
+  color: white;
+}
+
+.light {
+  background-color: white;
+  color: black;
+}
+```
+
+</Sandpack>
+
+However, here is the same code **with the artificial slowdown removed.** Does the lack of `useMemo` feel noticeable or not?
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+import { createTodos } from './utils.js';
+import TodoList from './TodoList.js';
+
+const todos = createTodos();
+
+export default function App() {
+  const [tab, setTab] = useState('all');
+  const [isDark, setIsDark] = useState(false);
+  return (
+    <>
+      <button onClick={() => setTab('all')}>
+        All
+      </button>
+      <button onClick={() => setTab('active')}>
+        Active
+      </button>
+      <button onClick={() => setTab('completed')}>
+        Completed
+      </button>
+      <br />
+      <label>
+        <input
+          type="checkbox"
+          checked={isDark}
+          onChange={e => setIsDark(e.target.checked)}
+        />
+        Dark mode
+      </label>
+      <hr />
+      <TodoList
+        todos={todos}
+        tab={tab}
+        theme={isDark ? 'dark' : 'light'}
+      />
+    </>
+  );
+}
+```
+
+```js TodoList.js active
+import List from './List.js';
+import { filterTodos } from './utils.js'
+
+export default function TodoList({ todos, theme, tab }) {
+  const visibleTodos = filterTodos(todos, tab);
+  return (
+    <div className={theme}>
+      <List items={visibleTodos} />
+    </div>
+  );
+}
+```
+
+```js List.js
+import { memo } from 'react';
+
+function List({ items }) {
+  return (
+    <ul>
+      {items.map(item => (
+        <li key={item.id}>
+          {item.completed ?
+            <s>{item.text}</s> :
+            item.text
+          }
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+export default memo(List);
+```
+
+```js utils.js
+export function createTodos() {
+  const todos = [];
+  for (let i = 0; i < 50; i++) {
+    todos.push({
+      id: i,
+      text: "Todo " + (i + 1),
+      completed: Math.random() > 0.5
+    });
+  }
+  return todos;
+}
+
+export function filterTodos(todos, tab) {
+  return todos.filter(todo => {
+    if (tab === 'all') {
+      return true;
+    } else if (tab === 'active') {
+      return !todo.completed;
+    } else if (tab === 'completed') {
+      return todo.completed;
+    }
+  });
+}
+```
+
+```css
+label {
+  display: block;
+  margin-top: 10px;
+}
+
+.dark {
+  background-color: black;
+  color: white;
+}
+
+.light {
+  background-color: white;
+  color: black;
+}
+```
+
+</Sandpack>
+
+Quite often, code without memoization works fine. If your interactions are fast enough, you don't need memoization.
+
+Keep in mind that you need to run React in production mode, disable [React Developer Tools](/learn/react-developer-tools), and use devices similar to the ones your app's users have in order to get a realistic sense of what's actually slowing down your app.
+
+<Solution />
+
+</Recipes>
+
+---
+
+### Memoizing a dependency of another Hook {/*memoizing-a-dependency-of-another-hook*/}
+
+Suppose you have a calculation that depends on an object created directly in the component body:
+
+```js {2}
+function Dropdown({ allItems, text }) {
+  const searchOptions = { matchMode: 'whole-word', text };
+
+  const visibleItems = useMemo(() => {
+    return searchItems(allItems, searchOptions);
+  }, [allItems, searchOptions]); // 🚩 Caution: Dependency on an object created in the component body
+  // ...
+```
+
+Depending on an object like this defeats the point of memoization. When a component re-renders, all of the code directly inside the component body runs again. **The lines of code creating the `searchOptions` object will also run on every re-render.** Since `searchOptions` is a dependency of your `useMemo` call, and it's different every time, React will know the dependencies are different from the last time, and recalculate `searchItems` every time.
+
+To fix this, you could memoize the `searchOptions` object *itself* before passing it as a dependency:
+
+```js {2-4}
+function Dropdown({ allItems, text }) {
+  const searchOptions = useMemo(() => {
+    return { matchMode: 'whole-word', text };
+  }, [text]); // ✅ Only changes when text changes
+
+  const visibleItems = useMemo(() => {
+    return searchItems(allItems, searchOptions);
+  }, [allItems, searchOptions]); // ✅ Only changes when allItems or searchOptions changes
+  // ...
+```
+
+In the example above, if the `text` did not change, the `searchOptions` object also won't change. However, an even better fix is to move the `searchOptions` object declaration *inside* of the `useMemo` calculation function:
+
+```js {3}
+function Dropdown({ allItems, text }) {
+  const visibleItems = useMemo(() => {
+    const searchOptions = { matchMode: 'whole-word', text };
+    return searchItems(allItems, searchOptions);
+  }, [allItems, text]); // ✅ Only changes when allItems or text changes
+  // ...
+```
+
+**Now your calculation depends on `text` directly (which is a string and can't "accidentally" be new like an object).**
+ You can use a similar approach to prevent [`useEffect`](/reference/react/useEffect) from firing again unnecessarily. Before you try to optimize dependencies with `useMemo`, see if you can make them unnecessary. [Read about removing Effect dependencies.](/learn/removing-effect-dependencies)
+
+---
+
+### Memoizing a function {/*memoizing-a-function*/}
+
+Suppose the `Form` component is wrapped in [`memo`.](/reference/react/memo) You want to pass a function to it as a prop:
+
+```js {2-7}
+export default function ProductPage({ productId, referrer }) {
+  function handleSubmit(orderDetails) {
+    post('/product/' + productId + '/buy', {
+      referrer,
+      orderDetails
+    });
+  }
+
+  return <Form onSubmit={handleSubmit} />;
+}
+```
+
+Similar to how `{}` always creates a different object, function declarations like `function() {}` and expressions like `() => {}` produce a *different* function on every re-render. By itself, creating a new function is not a problem. This is not something to avoid! However, if the `Form` component is memoized, presumably you want to skip re-rendering it when no props have changed. A prop that is *always* different would defeat the point of memoization.
+
+To memoize a function with `useMemo`, your calculation function would have to return another function:
+
+```js {2-3,8-9}
+export default function Page({ productId, referrer }) {
+  const handleSubmit = useMemo(() => {
+    return (orderDetails) => {
+      post('/product/' + product.id + '/buy', {
+        referrer,
+        orderDetails
+      });
+    };
+  }, [productId, referrer]);
+
+  return <Form onSubmit={handleSubmit} />;
+}
+```
+
+This looks clunky! **Memoizing functions is common enough that React has a built-in Hook specifically for that. Wrap your functions into [`useCallback`](/reference/react/useCallback) instead of `useMemo`** to avoid having to write an extra nested function:
+
+```js {2,7}
+export default function Page({ productId, referrer }) {
+  const handleSubmit = useCallback((orderDetails) => {
+    post('/product/' + product.id + '/buy', {
+      referrer,
+      orderDetails
+    });
+  }, [productId, referrer]);
+
+  return <Form onSubmit={handleSubmit} />;
+}
+```
+
+The two examples above are completely equivalent. The only benefit to `useCallback` is that it lets you avoid writing an extra nested function inside. It doesn't do anything else. [Read more about `useCallback`.](/reference/react/useCallback)
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+
+### My calculation runs twice on every re-render {/*my-calculation-runs-twice-on-every-re-render*/}
+
+In [Strict Mode](/reference/react/StrictMode), React will call some of your functions twice instead of once:
+
+```js {2,5,6}
+function TodoList({ todos, tab }) {
+  // This component function will run twice for every render.
+
+  const visibleTodos = useMemo(() => {
+    // This calculation will run twice if any of the dependencies change.
+    return filterTodos(todos, tab);
+  }, [todos, tab]);
+
+  // ...
+```
+
+This is expected and shouldn't break your code.
+
+This **development-only** behavior helps you [keep components pure.](/learn/keeping-components-pure) React uses the result of one of the calls, and ignores the result of the other call. As long as your component and calculation functions are pure, this shouldn't affect your logic. However, if they are accidentally impure, this helps you notice the mistakes and fix it.
+
+For example, this impure calculation function mutates an array you received as a prop:
+
+```js {2-3}
+  const visibleTodos = useMemo(() => {
+    // 🚩 Mistake: mutating a prop
+    todos.push({ id: 'last', text: 'Go for a walk!' });
+    const filtered = filterTodos(todos, tab);
+    return filtered;
+  }, [todos, tab]);
+```
+
+Because React calls your calculation twice, you'll see the todo was added twice, so you'll know that there is a mistake. Your calculation can't change the objects that it received, but it can change any *new* objects you created during the calculation. For example, if `filterTodos` always returns a *different* array, you can mutate *that* array:
+
+```js {3,4}
+  const visibleTodos = useMemo(() => {
+    const filtered = filterTodos(todos, tab);
+    // ✅ Correct: mutating an object you created during the calculation
+    filtered.push({ id: 'last', text: 'Go for a walk!' });
+    return filtered;
+  }, [todos, tab]);
+```
+
+Read [keeping components pure](/learn/keeping-components-pure) to learn more about purity.
+
+Also, check out the guides on [updating objects](/learn/updating-objects-in-state) and [updating arrays](/learn/updating-arrays-in-state) without mutation.
+
+---
+
+### My `useMemo` call is supposed to return an object, but returns undefined {/*my-usememo-call-is-supposed-to-return-an-object-but-returns-undefined*/}
+
+This code doesn't work:
+
+```js {1-2,5}
+  // 🔴 You can't return an object from an arrow function with () => {
+  const searchOptions = useMemo(() => {
+    matchMode: 'whole-word',
+    text: text
+  }, [text]);
+```
+
+In JavaScript, `() => {` starts the arrow function body, so the `{` brace is not a part of your object. This is why it doesn't return an object, and leads to confusing mistakes. You could fix it by adding parentheses like `({` and `})`:
+
+```js {1-2,5}
+  // This works, but is easy for someone to break again
+  const searchOptions = useMemo(() => ({
+    matchMode: 'whole-word',
+    text: text
+  }), [text]);
+```
+
+However, this is still confusing and too easy for someone to break by removing the parentheses.
+
+To avoid this mistake, write a `return` statement explicitly:
+
+```js {1-3,6-7}
+  // ✅ This works and is explicit
+  const searchOptions = useMemo(() => {
+    return {
+      matchMode: 'whole-word',
+      text: text
+    };
+  }, [text]);
+```
+
+---
+
+### Every time my component renders, the calculation in `useMemo` re-runs {/*every-time-my-component-renders-the-calculation-in-usememo-re-runs*/}
+
+Make sure you've specified the dependency array as a second argument!
+
+If you forget the dependency array, `useMemo` will re-run the calculation every time:
+
+```js {2-3}
+function TodoList({ todos, tab }) {
+  // 🔴 Recalculates every time: no dependency array
+  const visibleTodos = useMemo(() => filterTodos(todos, tab));
+  // ...
+```
+
+This is the corrected version passing the dependency array as a second argument:
+
+```js {2-3}
+function TodoList({ todos, tab }) {
+  // ✅ Does not recalculate unnecessarily
+  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
+  // ...
+```
+
+If this doesn't help, then the problem is that at least one of your dependencies is different from the previous render. You can debug this problem by manually logging your dependencies to the console:
+
+```js
+  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
+  console.log([todos, tab]);
+```
+
+You can then right-click on the arrays from different re-renders in the console and select "Store as a global variable" for both of them. Assuming the first one got saved as `temp1` and the second one got saved as `temp2`, you can then use the browser console to check whether each dependency in both arrays is the same:
+
+```js
+Object.is(temp1[0], temp2[0]); // Is the first dependency the same between the arrays?
+Object.is(temp1[1], temp2[1]); // Is the second dependency the same between the arrays?
+Object.is(temp1[2], temp2[2]); // ... and so on for every dependency ...
+```
+
+When you find which dependency is breaking memoization, either find a way to remove it, or [memoize it as well.](#memoizing-a-dependency-of-another-hook)
+
+---
+
+### I need to call `useMemo` for each list item in a loop, but it's not allowed {/*i-need-to-call-usememo-for-each-list-item-in-a-loop-but-its-not-allowed*/}
+
+Suppose the `Chart` component is wrapped in [`memo`](/reference/react/memo). You want to skip re-rendering every `Chart` in the list when the `ReportList` component re-renders. However, you can't call `useMemo` in a loop:
+
+```js {5-11}
+function ReportList({ items }) {
+  return (
+    <article>
+      {items.map(item => {
+        // 🔴 You can't call useMemo in a loop like this:
+        const data = useMemo(() => calculateReport(item), [item]);
+        return (
+          <figure key={item.id}>
+            <Chart data={data} />
+          </figure>
+        );
+      })}
+    </article>
+  );
+}
+```
+
+Instead, extract a component for each item and memoize data for individual items:
+
+```js {5,12-18}
+function ReportList({ items }) {
+  return (
+    <article>
+      {items.map(item =>
+        <Report key={item.id} item={item} />
+      )}
+    </article>
+  );
+}
+
+function Report({ item }) {
+  // ✅ Call useMemo at the top level:
+  const data = useMemo(() => calculateReport(item), [item]);
+  return (
+    <figure>
+      <Chart data={data} />
+    </figure>
+  );
+}
+```
+
+Alternatively, you could remove `useMemo` and instead wrap `Report` itself in [`memo`.](/reference/react/memo) If the `item` prop does not change, `Report` will skip re-rendering, so `Chart` will skip re-rendering too:
+
+```js {5,6,12}
+function ReportList({ items }) {
+  // ...
+}
+
+const Report = memo(function Report({ item }) {
+  const data = calculateReport(item);
+  return (
+    <figure>
+      <Chart data={data} />
+    </figure>
+  );
+});
+```
diff --git a/beta/src/content/reference/react/useReducer.md b/beta/src/content/reference/react/useReducer.md
new file mode 100644
index 000000000..70c0b5a69
--- /dev/null
+++ b/beta/src/content/reference/react/useReducer.md
@@ -0,0 +1,1125 @@
+---
+title: useReducer
+---
+
+<Intro>
+
+`useReducer` is a React Hook that lets you add a [reducer](/learn/extracting-state-logic-into-a-reducer) to your component.
+
+```js
+const [state, dispatch] = useReducer(reducer, initialArg, init?)
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `useReducer(reducer, initialArg, init?)` {/*usereducer*/}
+
+Call `useReducer` at the top level of your component to manage its state with a [reducer.](/learn/extracting-state-logic-into-a-reducer)
+
+```js
+import { useReducer } from 'react';
+
+function reducer(state, action) {
+  // ...
+}
+
+function MyComponent() {
+  const [state, dispatch] = useReducer(reducer, { age: 42 });
+  // ...
+```
+
+[See more examples below.](#usage)
+
+#### Parameters {/*parameters*/}
+
+* `reducer`: The reducer function that specifies how the state gets updated. It must be pure, should take the state and action as arguments, and should return the next state. State and action can be of any types. 
+* `initialArg`: The value from which the initial state is calculated. It can be a value of any type. How the initial state is calculated from it depends on the next `init` argument.
+* **optional** `init`: The initializer function that specifies how the initial state is calculated. If it's not specified, the initial state is set to `initialArg`. Otherwise, the initial state is set to the result of calling `init(initialArg)`.
+
+#### Returns {/*returns*/}
+
+`useReducer` returns an array with exactly two values:
+
+1. The current state. During the first render, it's set to `init(initialArg)` or `initialArg` (if there's no `init`).
+2. The [`dispatch` function](#dispatch) that lets you update the state to a different value and trigger a re-render.
+
+#### Caveats {/*caveats*/}
+
+* `useReducer` is a Hook, so you can only call it **at the top level of your component** or your own Hooks. You can't call it inside loops or conditions. If you need that, extract a new component and move the state into it.
+* In Strict Mode, React will **call your reducer and initializer twice** in order to [help you find accidental impurities.](#my-initializer-or-updater-function-runs-twice) This is development-only behavior and does not affect production. If your reducer and initializer are pure (as they should be), this should not affect the logic of your component. The result from one of the calls is ignored.
+
+---
+
+### `dispatch` function {/*dispatch*/}
+
+The `dispatch` function returned by `useReducer` lets you update the state to a different value and trigger a re-render. You need to pass the action as the only argument to the `dispatch` function:
+
+```js
+const [state, dispatch] = useReducer(reducer, { age: 42 });
+
+function handleClick() {
+  dispatch({ type: 'incremented_age' });
+  // ...
+```
+
+React will set the next state to the result of calling the `reducer` function you've provided with the current `state` and the action you've passed to `dispatch`.
+
+#### Parameters {/*dispatch-parameters*/}
+
+* `action`: The action performed by the user. It can be a value of any type. By convention, an action is usually an object with a `type` property identifying it and, optionally, other properties with additional information.
+
+#### Returns {/*dispatch-returns*/}
+
+`dispatch` functions do not have a return value.
+
+#### Caveats {/*setstate-caveats*/}
+
+* The `dispatch` function **only updates the state variable for the *next* render**. If you read the state variable after calling the `dispatch` function, [you will still get the old value](#ive-dispatched-an-action-but-logging-gives-me-the-old-state-value) that was on the screen before your call.
+
+* If the new value you provide is identical to the current `state`, as determined by an [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison, React will **skip re-rendering the component and its children.** This is an optimization. React may still need to call your component before ignoring the result, but it shouldn't affect your code.
+
+* React [batches state updates.](/learn/queueing-a-series-of-state-updates) It updates the screen **after all the event handlers have run** and have called their `set` functions. This prevents multiple re-renders during a single event. In the rare case that you need to force React to update the screen earlier, for example to access the DOM, you can use [`flushSync`.](/reference/react-dom/flushsync)
+
+---
+
+## Usage {/*usage*/}
+
+### Adding a reducer to a component {/*adding-a-reducer-to-a-component*/}
+
+Call `useReducer` at the top level of your component to manage state with a [reducer.](/learn/extracting-state-logic-into-a-reducer)
+
+```js [[1, 8, "state"], [2, 8, "dispatch"], [4, 8, "reducer"], [3, 8, "{ age: 42 }"]]
+import { useReducer } from 'react';
+
+function reducer(state, action) {
+  // ...
+}
+
+function MyComponent() {
+  const [state, dispatch] = useReducer(reducer, { age: 42 });
+  // ...
+```
+
+`useReducer` returns an array with exactly two items:
+
+1. The <CodeStep step={1}>current state</CodeStep> of this state variable, initially set to the <CodeStep step={3}>initial state</CodeStep> you provided.
+2. The <CodeStep step={2}>`dispatch` function</CodeStep> that lets you change it in response to interaction.
+
+To update what's on the screen, call <CodeStep step={2}>`dispatch`</CodeStep> with an object representing what the user did, called an *action*:
+
+```js [[2, 2, "dispatch"]]
+function handleClick() {
+  dispatch({ type: 'incremented_age' });
+}
+```
+
+React will pass the current state and the action to your <CodeStep step={4}>reducer function</CodeStep>. Your reducer will calculate and return the next state. React will store that next state, render your component with it, and update the UI.
+
+<Sandpack>
+
+```js
+import { useReducer } from 'react';
+
+function reducer(state, action) {
+  if (action.type === 'incremented_age') {
+    return {
+      age: state.age + 1
+    };
+  }
+  throw Error('Unknown action.');
+}
+
+export default function Counter() {
+  const [state, dispatch] = useReducer(reducer, { age: 42 });
+
+  return (
+    <>
+      <button onClick={() => {
+        dispatch({ type: 'incremented_age' })
+      }}>
+        Increment age
+      </button>
+      <p>Hello! You are {state.age}.</p>
+    </>
+  );
+}
+```
+
+```css
+button { display: block; margin-top: 10px; }
+```
+
+</Sandpack>
+
+`useReducer` is very similar to [`useState`](/reference/react/useState), but it lets you move the state update logic from event handlers into a single function outside of your component. Read more about [choosing between `useState` and `useReducer`.](/learn/extracting-state-logic-into-a-reducer#comparing-usestate-and-usereducer)
+
+---
+
+### Writing the reducer function {/*writing-the-reducer-function*/}
+
+A reducer function is declared like this:
+
+```js
+function reducer(state, action) {
+  // ...
+}
+```
+
+Then you need to fill in the code that will calculate and return the next state. By convention, it is common to write it as a [`switch` statement.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch) For each `case` in the `switch`, you need to calculate and return some next state.
+
+```js {4-7,10-13}
+function reducer(state, action) {
+  switch (action.type) {
+    case 'incremented_age': {
+      return {
+        name: state.name,
+        age: state.age + 1
+      };
+    }
+    case 'changed_name': {
+      return {
+        name: action.nextName,
+        age: state.age
+      };
+    }
+  }
+  throw Error('Unknown action: ' + action.type);
+}
+```
+
+Actions can have any shape. By convention, it's common to pass objects with a `type` property identifying the action. It should include the minimal necessary information that the reducer needs to compute the next state.
+
+```js {5,9-12}
+function Form() {
+  const [state, dispatch] = useReducer(reducer, { name: 'Taylor', age: 42 });
+  
+  function handleButtonClick() {
+    dispatch({ type: 'incremented_age' });
+  }
+
+  function handleInputChange(e) {
+    dispatch({
+      type: 'changed_name',
+      nextName: e.target.value
+    });
+  }
+  // ...
+```
+
+The action type names are local to your component. [Each action describes a single interaction, even if that leads to multiple changes in data.](/learn/extracting-state-logic-into-a-reducer#writing-reducers-well) The shape of the state is arbitrary, but usually it'll be an object or an array.
+
+Read [extracting state logic into a reducer](/learn/extracting-state-logic-into-a-reducer) to learn more.
+
+<Pitfall>
+
+State is read-only. Don't modify any objects or arrays in state:
+
+```js {4,5}
+function reducer(state, action) {
+  switch (action.type) {
+    case 'incremented_age': {
+      // 🚩 Don't mutate an object in state like this:
+      state.age = state.age + 1;
+      return state;
+    }
+```
+
+Instead, always return new objects from your reducer:
+
+```js {4-8}
+function reducer(state, action) {
+  switch (action.type) {
+    case 'incremented_age': {
+      // ✅ Instead, return a new object
+      return {
+        ...state,
+        age: state.age + 1
+      };
+    }
+```
+
+Read [updating objects in state](/learn/updating-objects-in-state) and [updating arrays in state](/learn/updating-arrays-in-state) to learn more.
+
+</Pitfall>
+
+<Recipes titleText="Basic useReducer examples" titleId="examples-basic">
+
+#### Form (object) {/*form-object*/}
+
+In this example, the reducer manages a state object with two fields: `name` and `age`.
+
+<Sandpack>
+
+```js
+import { useReducer } from 'react';
+
+function reducer(state, action) {
+  switch (action.type) {
+    case 'incremented_age': {
+      return {
+        name: state.name,
+        age: state.age + 1
+      };
+    }
+    case 'changed_name': {
+      return {
+        name: action.nextName,
+        age: state.age
+      };
+    }
+  }
+  throw Error('Unknown action: ' + action.type);
+}
+
+const initialState = { name: 'Taylor', age: 42 };
+
+export default function Form() {
+  const [state, dispatch] = useReducer(reducer, initialState);
+
+  function handleButtonClick() {
+    dispatch({ type: 'incremented_age' });
+  }
+
+  function handleInputChange(e) {
+    dispatch({
+      type: 'changed_name',
+      nextName: e.target.value
+    }); 
+  }
+
+  return (
+    <>
+      <input
+        value={state.name}
+        onChange={handleInputChange}
+      />
+      <button onClick={handleButtonClick}>
+        Increment age
+      </button>
+      <p>Hello, {state.name}. You are {state.age}.</p>
+    </>
+  );
+}
+```
+
+```css
+button { display: block; margin-top: 10px; }
+```
+
+</Sandpack>
+
+<Solution />
+
+#### Todo list (array) {/*todo-list-array*/}
+
+In this example, the reducer manages an array of tasks. The array needs to be updated [without mutation.](/learn/updating-arrays-in-state)
+
+<Sandpack>
+
+```js App.js
+import { useReducer } from 'react';
+import AddTask from './AddTask.js';
+import TaskList from './TaskList.js';
+
+function tasksReducer(tasks, action) {
+  switch (action.type) {
+    case 'added': {
+      return [...tasks, {
+        id: action.id,
+        text: action.text,
+        done: false
+      }];
+    }
+    case 'changed': {
+      return tasks.map(t => {
+        if (t.id === action.task.id) {
+          return action.task;
+        } else {
+          return t;
+        }
+      });
+    }
+    case 'deleted': {
+      return tasks.filter(t => t.id !== action.id);
+    }
+    default: {
+      throw Error('Unknown action: ' + action.type);
+    }
+  }
+}
+
+export default function TaskApp() {
+  const [tasks, dispatch] = useReducer(
+    tasksReducer,
+    initialTasks
+  );
+
+  function handleAddTask(text) {
+    dispatch({
+      type: 'added',
+      id: nextId++,
+      text: text,
+    });
+  }
+
+  function handleChangeTask(task) {
+    dispatch({
+      type: 'changed',
+      task: task
+    });
+  }
+
+  function handleDeleteTask(taskId) {
+    dispatch({
+      type: 'deleted',
+      id: taskId
+    });
+  }
+
+  return (
+    <>
+      <h1>Prague itinerary</h1>
+      <AddTask
+        onAddTask={handleAddTask}
+      />
+      <TaskList
+        tasks={tasks}
+        onChangeTask={handleChangeTask}
+        onDeleteTask={handleDeleteTask}
+      />
+    </>
+  );
+}
+
+let nextId = 3;
+const initialTasks = [
+  { id: 0, text: 'Visit Kafka Museum', done: true },
+  { id: 1, text: 'Watch a puppet show', done: false },
+  { id: 2, text: 'Lennon Wall pic', done: false }
+];
+```
+
+```js AddTask.js hidden
+import { useState } from 'react';
+
+export default function AddTask({ onAddTask }) {
+  const [text, setText] = useState('');
+  return (
+    <>
+      <input
+        placeholder="Add task"
+        value={text}
+        onChange={e => setText(e.target.value)}
+      />
+      <button onClick={() => {
+        setText('');
+        onAddTask(text);
+      }}>Add</button>
+    </>
+  )
+}
+```
+
+```js TaskList.js hidden
+import { useState } from 'react';
+
+export default function TaskList({
+  tasks,
+  onChangeTask,
+  onDeleteTask
+}) {
+  return (
+    <ul>
+      {tasks.map(task => (
+        <li key={task.id}>
+          <Task
+            task={task}
+            onChange={onChangeTask}
+            onDelete={onDeleteTask}
+          />
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function Task({ task, onChange, onDelete }) {
+  const [isEditing, setIsEditing] = useState(false);
+  let taskContent;
+  if (isEditing) {
+    taskContent = (
+      <>
+        <input
+          value={task.text}
+          onChange={e => {
+            onChange({
+              ...task,
+              text: e.target.value
+            });
+          }} />
+        <button onClick={() => setIsEditing(false)}>
+          Save
+        </button>
+      </>
+    );
+  } else {
+    taskContent = (
+      <>
+        {task.text}
+        <button onClick={() => setIsEditing(true)}>
+          Edit
+        </button>
+      </>
+    );
+  }
+  return (
+    <label>
+      <input
+        type="checkbox"
+        checked={task.done}
+        onChange={e => {
+          onChange({
+            ...task,
+            done: e.target.checked
+          });
+        }}
+      />
+      {taskContent}
+      <button onClick={() => onDelete(task.id)}>
+        Delete
+      </button>
+    </label>
+  );
+}
+```
+
+```css
+button { margin: 5px; }
+li { list-style-type: none; }
+ul, li { margin: 0; padding: 0; }
+```
+
+</Sandpack>
+
+<Solution />
+
+#### Writing concise update logic with Immer {/*writing-concise-update-logic-with-immer*/}
+
+If updating arrays and objects without mutation feels tedious, you can use a library like [Immer](https://github.com/immerjs/use-immer#useimmerreducer) to reduce repetitive code. Immer lets you write concise code as if you were mutating objects, but under the hood it performs immutable updates:
+
+<Sandpack>
+
+```js App.js
+import { useImmerReducer } from 'use-immer';
+import AddTask from './AddTask.js';
+import TaskList from './TaskList.js';
+
+function tasksReducer(draft, action) {
+  switch (action.type) {
+    case 'added': {
+      draft.push({
+        id: action.id,
+        text: action.text,
+        done: false
+      });
+      break;
+    }
+    case 'changed': {
+      const index = draft.findIndex(t =>
+        t.id === action.task.id
+      );
+      draft[index] = action.task;
+      break;
+    }
+    case 'deleted': {
+      return draft.filter(t => t.id !== action.id);
+    }
+    default: {
+      throw Error('Unknown action: ' + action.type);
+    }
+  }
+}
+
+export default function TaskApp() {
+  const [tasks, dispatch] = useImmerReducer(
+    tasksReducer,
+    initialTasks
+  );
+
+  function handleAddTask(text) {
+    dispatch({
+      type: 'added',
+      id: nextId++,
+      text: text,
+    });
+  }
+
+  function handleChangeTask(task) {
+    dispatch({
+      type: 'changed',
+      task: task
+    });
+  }
+
+  function handleDeleteTask(taskId) {
+    dispatch({
+      type: 'deleted',
+      id: taskId
+    });
+  }
+
+  return (
+    <>
+      <h1>Prague itinerary</h1>
+      <AddTask
+        onAddTask={handleAddTask}
+      />
+      <TaskList
+        tasks={tasks}
+        onChangeTask={handleChangeTask}
+        onDeleteTask={handleDeleteTask}
+      />
+    </>
+  );
+}
+
+let nextId = 3;
+const initialTasks = [
+  { id: 0, text: 'Visit Kafka Museum', done: true },
+  { id: 1, text: 'Watch a puppet show', done: false },
+  { id: 2, text: 'Lennon Wall pic', done: false },
+];
+```
+
+```js AddTask.js hidden
+import { useState } from 'react';
+
+export default function AddTask({ onAddTask }) {
+  const [text, setText] = useState('');
+  return (
+    <>
+      <input
+        placeholder="Add task"
+        value={text}
+        onChange={e => setText(e.target.value)}
+      />
+      <button onClick={() => {
+        setText('');
+        onAddTask(text);
+      }}>Add</button>
+    </>
+  )
+}
+```
+
+```js TaskList.js hidden
+import { useState } from 'react';
+
+export default function TaskList({
+  tasks,
+  onChangeTask,
+  onDeleteTask
+}) {
+  return (
+    <ul>
+      {tasks.map(task => (
+        <li key={task.id}>
+          <Task
+            task={task}
+            onChange={onChangeTask}
+            onDelete={onDeleteTask}
+          />
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function Task({ task, onChange, onDelete }) {
+  const [isEditing, setIsEditing] = useState(false);
+  let taskContent;
+  if (isEditing) {
+    taskContent = (
+      <>
+        <input
+          value={task.text}
+          onChange={e => {
+            onChange({
+              ...task,
+              text: e.target.value
+            });
+          }} />
+        <button onClick={() => setIsEditing(false)}>
+          Save
+        </button>
+      </>
+    );
+  } else {
+    taskContent = (
+      <>
+        {task.text}
+        <button onClick={() => setIsEditing(true)}>
+          Edit
+        </button>
+      </>
+    );
+  }
+  return (
+    <label>
+      <input
+        type="checkbox"
+        checked={task.done}
+        onChange={e => {
+          onChange({
+            ...task,
+            done: e.target.checked
+          });
+        }}
+      />
+      {taskContent}
+      <button onClick={() => onDelete(task.id)}>
+        Delete
+      </button>
+    </label>
+  );
+}
+```
+
+```css
+button { margin: 5px; }
+li { list-style-type: none; }
+ul, li { margin: 0; padding: 0; }
+```
+
+```json package.json
+{
+  "dependencies": {
+    "immer": "1.7.3",
+    "react": "latest",
+    "react-dom": "latest",
+    "react-scripts": "latest",
+    "use-immer": "0.5.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+</Sandpack>
+
+<Solution />
+
+</Recipes>
+
+---
+
+### Avoiding recreating the initial state {/*avoiding-recreating-the-initial-state*/}
+
+React saves the initial state once and ignores it on the next renders.
+
+```js
+function createInitialState(username) {
+  // ...
+}
+
+function TodoList({ username }) {
+  const [state, dispatch] = useReducer(reducer, createInitialState(username));
+  // ...
+```
+
+Although the result of `createInitialState(username)` is only used for the initial render, you're still calling this function on every render. This can be wasteful if it's creating large arrays or performing expensive calculations.
+
+To solve this, you may **pass it as an _initializer_ function** to `useReducer` as the third argument instead:
+
+```js {6}
+function createInitialState(username) {
+  // ...
+}
+
+function TodoList({ username }) {
+  const [state, dispatch] = useReducer(reducer, username, createInitialState);
+  // ...
+```
+
+Notice that you’re passing `createInitialState`, which is the *function itself*, and not `createInitialState()`, which is the result of calling it. This way, the initial state does not get re-created after initialization.
+
+In the above example, `createInitialState` takes a `username` argument. If your initializer doesn't need any information to compute the initial state, you may pass `null` as the second argument to `useReducer`.
+
+<Recipes titleText="The difference between passing an initializer and passing the initial state directly" titleId="examples-initializer">
+
+#### Passing the initializer function {/*passing-the-initializer-function*/}
+
+This example passes the initializer function, so the `createInitialState` function only runs during initialization. It does not run when component re-renders, such as when you type into the input.
+
+<Sandpack>
+
+```js App.js hidden
+import TodoList from './TodoList.js';
+
+export default function App() {
+  return <TodoList username="Taylor" />;
+}
+```
+
+```js TodoList.js active
+import { useReducer } from 'react';
+
+function createInitialState(username) {
+  const initialTodos = [];
+  for (let i = 0; i < 50; i++) {
+    initialTodos.push({
+      id: i,
+      text: username + "'s task #" + (i + 1)
+    });
+  }
+  return {
+    draft: '',
+    todos: initialTodos,
+  };
+}
+
+function reducer(state, action) {
+  switch (action.type) {
+    case 'changed_draft': {
+      return {
+        draft: action.nextDraft,
+        todos: state.todos,
+      };
+    };
+    case 'added_todo': {
+      return {
+        draft: '',
+        todos: [{
+          id: state.todos.length,
+          text: state.draft
+        }, ...state.todos]
+      }
+    }
+  }
+  throw Error('Unknown action: ' + action.type);
+}
+
+export default function TodoList({ username }) {
+  const [state, dispatch] = useReducer(
+    reducer,
+    username,
+    createInitialState
+  );
+  return (
+    <>
+      <input
+        value={state.draft}
+        onChange={e => {
+          dispatch({
+            type: 'changed_draft',
+            nextDraft: e.target.value
+          })
+        }}
+      />
+      <button onClick={() => {
+        dispatch({ type: 'added_todo' });
+      }}>Add</button>
+      <ul>
+        {state.todos.map(item => (
+          <li key={item.id}>
+            {item.text}
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+}
+```
+
+</Sandpack>
+
+<Solution />
+
+#### Passing the initial state directly {/*passing-the-initial-state-directly*/}
+
+This example **does not** pass the initializer function, so the `createInitialState` function runs on every render, such as when you type into the input. There is no observable difference in behavior, but this code is less efficient.
+
+<Sandpack>
+
+```js App.js hidden
+import TodoList from './TodoList.js';
+
+export default function App() {
+  return <TodoList username="Taylor" />;
+}
+```
+
+```js TodoList.js active
+import { useReducer } from 'react';
+
+function createInitialState(username) {
+  const initialTodos = [];
+  for (let i = 0; i < 50; i++) {
+    initialTodos.push({
+      id: i,
+      text: username + "'s task #" + (i + 1)
+    });
+  }
+  return {
+    draft: '',
+    todos: initialTodos,
+  };
+}
+
+function reducer(state, action) {
+  switch (action.type) {
+    case 'changed_draft': {
+      return {
+        draft: action.nextDraft,
+        todos: state.todos,
+      };
+    };
+    case 'added_todo': {
+      return {
+        draft: '',
+        todos: [{
+          id: state.todos.length,
+          text: state.draft
+        }, ...state.todos]
+      }
+    }
+  }
+  throw Error('Unknown action: ' + action.type);
+}
+
+export default function TodoList({ username }) {
+  const [state, dispatch] = useReducer(
+    reducer,
+    createInitialState(username)
+  );
+  return (
+    <>
+      <input
+        value={state.draft}
+        onChange={e => {
+          dispatch({
+            type: 'changed_draft',
+            nextDraft: e.target.value
+          })
+        }}
+      />
+      <button onClick={() => {
+        dispatch({ type: 'added_todo' });
+      }}>Add</button>
+      <ul>
+        {state.todos.map(item => (
+          <li key={item.id}>
+            {item.text}
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+}
+```
+
+</Sandpack>
+
+<Solution />
+
+</Recipes>
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+
+### I've dispatched an action, but logging gives me the old state value {/*ive-dispatched-an-action-but-logging-gives-me-the-old-state-value*/}
+
+Calling the `dispatch` function **does not change state in the running code**:
+
+```js {4,5,8}
+function handleClick() {
+  console.log(state.age);  // 42
+
+  dispatch({ type: 'incremented_age' }); // Request a re-render with 43
+  console.log(state.age);  // Still 42!
+
+  setTimeout(() => {
+    console.log(state.age); // Also 42!
+  }, 5000);
+}
+```
+
+This is because [states behaves like a snapshot.](/learn/state-as-a-snapshot) Updating state requests another render with the new state value, but does not affect the `state` JavaScript variable in your already-running event handler.
+
+If you need to guess the next state value, you can calculate it manually by calling the reducer yourself:
+
+```js
+const action = { type: 'incremented_age' };
+dispatch(action);
+
+const nextState = reducer(state, action);
+console.log(state);     // { age: 42 }
+console.log(nextState); // { age: 43 }
+```
+
+---
+
+### I've dispatched an action, but the screen doesn't update {/*ive-dispatched-an-action-but-the-screen-doesnt-update*/}
+
+React will **ignore your update if the next state is equal to the previous state,** as determined by an [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison. This usually happens when you change an object or an array in state directly:
+
+```js {4-5,9-10}
+function reducer(state, action) {
+  switch (action.type) {
+    case 'incremented_age': {
+      // 🚩 Wrong: mutating existing object
+      state.age++;
+      return state;
+    }
+    case 'changed_name': {
+      // 🚩 Wrong: mutating existing object
+      state.name = action.nextName;
+      return state;
+    }
+    // ...
+  }
+}
+```
+
+You mutated an existing `state` object and returned it, so React ignored the update. To fix this, you need to ensure that you're always [_replacing_ objects and arrays in state instead of _mutating_ them](#updating-objects-and-arrays-in-state):
+
+```js {4-8,11-15}
+function reducer(state, action) {
+  switch (action.type) {
+    case 'incremented_age': {
+      // ✅ Correct: creating a new object
+      return {
+        ...state,
+        age: state.age + 1
+      };
+    }
+    case 'changed_name': {
+      // ✅ Correct: creating a new object
+      return {
+        ...state,
+        name: action.nextName
+      };
+    }
+    // ...
+  }
+}
+```
+
+---
+
+### A part of my reducer state becomes undefined after dispatching {/*a-part-of-my-reducer-state-becomes-undefined-after-dispatching*/}
+
+Make sure that every `case` branch **copies all of the existing fields** when returning the new state:
+
+```js {5}
+function reducer(state, action) {
+  switch (action.type) {
+    case 'incremented_age': {
+      return {
+        ...state, // Don't forget this!
+        age: state.age + 1
+      };
+    }
+    // ...
+```
+
+Without `...state` above, the returned next state would only contain the `age` field and nothing else.
+
+---
+
+### My entire reducer state becomes undefined after dispatching {/*my-entire-reducer-state-becomes-undefined-after-dispatching*/}
+
+If your state unexpectedly becomes `undefined`, you're likely forgetting to `return` state in one of the cases, or your action type doesn't match any of the `case` statements. To find why, throw an error outside the `switch`:
+
+```js {10}
+function reducer(state, action) {
+  switch (action.type) {
+    case 'incremented_age': {
+      // ...
+    }
+    case 'edited_name': {
+      // ...
+    }
+  }
+  throw Error('Unknown action: ' + action.type);
+}
+```
+
+You can also use a static type checker like TypeScript to catch such mistakes.
+
+---
+
+### I'm getting an error: "Too many re-renders" {/*im-getting-an-error-too-many-re-renders*/}
+
+You might get an error that says: `Too many re-renders. React limits the number of renders to prevent an infinite loop.` Typically, this means that you're unconditionally dispatching an action *during render*, so your component enters a loop: render, dispatch (which causes a render), render, dispatch (which causes a render), and so on. Very often, this is caused by a mistake in specifying an event handler:
+
+```js {1-2}
+// 🚩 Wrong: calls the handler during render
+return <button onClick={handleClick()}>Click me</button>
+
+// ✅ Correct: passes down the event handler
+return <button onClick={handleClick}>Click me</button>
+
+// ✅ Correct: passes down an inline function
+return <button onClick={(e) => handleClick(e)}>Click me</button>
+```
+
+If you can't find the cause of this error, click on the arrow next to the error in the console and look through the JavaScript stack to find the specific `dispatch` function call responsible for the error.
+
+---
+
+### My reducer or initializer function runs twice {/*my-reducer-or-initializer-function-runs-twice*/}
+
+In [Strict Mode](/reference/react/StrictMode), React will call your reducer and initializer functions twice. This shouldn't break your code.
+
+This **development-only** behavior helps you [keep components pure.](/learn/keeping-components-pure) React uses the result of one of the calls, and ignores the result of the other call. As long as your component, initializer, and reducer functions are pure, this shouldn't affect your logic. However, if they are accidentally impure, this helps you notice the mistakes and fix it.
+
+For example, this impure reducer function mutates an array in state:
+
+```js {4-6}
+function reducer(state, action) {
+  switch (action.type) {
+    case 'added_todo': {
+      // 🚩 Mistake: mutating state
+      state.todos.push({ id: nextId++, text: action.text });
+      return state;
+    }
+    // ...
+  }
+}
+```
+
+Because React calls your reducer function twice, you'll see the todo was added twice, so you'll know that there is a mistake. In this example, you can fix the mistake by [replacing the array instead of mutating it](#updating-objects-and-arrays-in-state):
+
+```js {4-11}
+function reducer(state, action) {
+  switch (action.type) {
+    case 'added_todo': {
+      // ✅ Correct: replacing with new state
+      return {
+        ...state,
+        todos: [
+          ...state.todos,
+          { id: nextId++, text: action.text }
+        ]
+      };
+    }
+    // ...
+  }
+}
+```
+
+Now that this reducer function is pure, calling it an extra time doesn't make a difference in behavior. This is why React calling it twice helps you find mistakes. **Only component, initializer, and reducer functions need to be pure.** Event handlers don't need to be pure, so React will never call your event handlers twice.
+
+Read [keeping components pure](/learn/keeping-components-pure) to learn more.
diff --git a/beta/src/content/reference/react/useRef.md b/beta/src/content/reference/react/useRef.md
new file mode 100644
index 000000000..af4371b38
--- /dev/null
+++ b/beta/src/content/reference/react/useRef.md
@@ -0,0 +1,596 @@
+---
+title: useRef
+---
+
+<Intro>
+
+`useRef` is a React Hook that lets you reference a value that's not needed for rendering.
+
+```js
+const ref = useRef(initialValue)
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `useRef(initialValue)` {/*useref*/}
+
+Call `useRef` at the top level of your component to declare a [ref.](/learn/referencing-values-with-refs)
+
+```js
+import { useRef } from 'react';
+
+function MyComponent() {
+  const intervalRef = useRef(0);
+  const inputRef = useRef(null);
+  // ...
+```
+
+[See more examples below.](#usage)
+
+#### Parameters {/*parameters*/}
+
+* `initialValue`: The value you want the ref object's `current` property to be initially. It can be a value of any type. This argument is ignored after the initial render.
+
+#### Returns {/*returns*/}
+
+`useRef` returns an object with a single property:
+
+* `current`: Initially, it's set to the `initialValue` you have passed. You can later set it to something else. If you pass the ref object to React as a `ref` attribute to a JSX node, React will set its `current` property.
+
+On the next renders, `useRef` will return the same object.
+
+#### Caveats {/*caveats*/}
+
+* You can mutate the `ref.current` property. Unlike state, it is mutable. However, if it holds an object that is used for rendering (for example, a piece of your state), then you shouldn't mutate that object.
+* When you change the `ref.current` property, React does not re-render your component. React is not aware of when you change it because a ref is a plain JavaScript object.
+* Do not write _or read_ `ref.current` during rendering, except for [initialization.](#avoiding-recreating-the-ref-contents) This makes your component's behavior unpredictable.
+* In Strict Mode, React will **call your component function twice** in order to [help you find accidental impurities.](#my-initializer-or-updater-function-runs-twice) This is development-only behavior and does not affect production. This means that each ref object will be created twice, and one of the versions will be discarded. If your component function is pure (as it should be), this should not affect the logic of your component.
+
+---
+
+## Usage {/*usage*/}
+
+### Referencing a value with a ref {/*referencing-a-value-with-a-ref*/}
+
+Call `useRef` at the top level of your component to declare one or more [refs.](/learn/referencing-values-with-refs)
+
+```js [[1, 4, "intervalRef"], [3, 4, "0"]]
+import { useRef } from 'react';
+
+function Stopwatch() {
+  const intervalRef = useRef(0);
+  // ...
+```
+
+`useRef` returns a <CodeStep step={1}>ref object</CodeStep> with a single <CodeStep step={2}>`current` property</CodeStep> initially set to the <CodeStep step={3}>initial value</CodeStep> you provided.
+
+On the next renders, `useRef` will return the same object. You can change its `current` property to store information and read it later. This might remind you of [state](/reference/react/useState), but there is an important difference.
+
+**Changing a ref does not trigger a re-render.** This means refs are perfect for storing information that doesn't affect the visual output of your component. For example, if you need to store an [interval ID](https://developer.mozilla.org/en-US/docs/Web/API/setInterval) and retrieve it later, you can put it in a ref. To update the value inside the ref, you need to manually change its <CodeStep step={2}>`current` property</CodeStep>:
+
+```js [[2, 5, "intervalRef.current"]]
+function handleStartClick() {
+  const intervalId = setInterval(() => {
+    // ...
+  }, 1000);
+  intervalRef.current = intervalId;
+}
+```
+
+Later, you can read that interval ID from the ref so that you can call [clear that interval](https://developer.mozilla.org/en-US/docs/Web/API/clearInterval):
+
+```js [[2, 2, "intervalRef.current"]]
+function handleStopClick() {
+  const intervalId = intervalRef.current;
+  clearInterval(intervalId);
+}
+```
+
+By using a ref, you ensure that:
+
+- You can **store information** between re-renders (unlike regular variables, which reset on every render).
+- Changing it **does not trigger a re-render** (unlike state variables, which trigger a re-render).
+- The **information is local** to each copy of your component (unlike the variables outside, which are shared).
+
+Changing a ref does not trigger a re-render, so refs are not appropriate for storing information that you want to display on the screen. Use state for that instead. Read more about [choosing between `useRef` and `useState`.](/learn/referencing-values-with-refs#differences-between-refs-and-state)
+
+<Recipes titleText="Examples of referencing a value with useRef" titleId="examples-value">
+
+#### Click counter {/*click-counter*/}
+
+This component uses a ref to keep track of how many times the button was clicked. Note that it's okay to use a ref instead of state here because the click count is only read and written in an event handler.
+
+<Sandpack>
+
+```js
+import { useRef } from 'react';
+
+export default function Counter() {
+  let ref = useRef(0);
+
+  function handleClick() {
+    ref.current = ref.current + 1;
+    alert('You clicked ' + ref.current + ' times!');
+  }
+
+  return (
+    <button onClick={handleClick}>
+      Click me!
+    </button>
+  );
+}
+```
+
+</Sandpack>
+
+If you show `{ref.current}` in the JSX, the number won't update on click. This is because setting `ref.current` does not trigger a re-render. Information that's used for rendering should be state instead.
+
+<Solution />
+
+#### A stopwatch {/*a-stopwatch*/}
+
+This example uses a combination of state and refs. Both `startTime` and `now` are state variables because they are used for rendering. But we also need to hold an [interval ID](https://developer.mozilla.org/en-US/docs/Web/API/setInterval) so that we can stop the interval on button press. Since the interval ID is not used for rendering, it's appropriate to keep it in a ref, and manually update it.
+
+<Sandpack>
+
+```js
+import { useState, useRef } from 'react';
+
+export default function Stopwatch() {
+  const [startTime, setStartTime] = useState(null);
+  const [now, setNow] = useState(null);
+  const intervalRef = useRef(null);
+
+  function handleStart() {
+    setStartTime(Date.now());
+    setNow(Date.now());
+
+    clearInterval(intervalRef.current);
+    intervalRef.current = setInterval(() => {
+      setNow(Date.now());
+    }, 10);
+  }
+
+  function handleStop() {
+    clearInterval(intervalRef.current);
+  }
+
+  let secondsPassed = 0;
+  if (startTime != null && now != null) {
+    secondsPassed = (now - startTime) / 1000;
+  }
+
+  return (
+    <>
+      <h1>Time passed: {secondsPassed.toFixed(3)}</h1>
+      <button onClick={handleStart}>
+        Start
+      </button>
+      <button onClick={handleStop}>
+        Stop
+      </button>
+    </>
+  );
+}
+```
+
+</Sandpack>
+
+<Solution />
+
+</Recipes>
+
+<Pitfall>
+
+**Do not write _or read_ `ref.current` during rendering.**
+
+React expects that the body of your component [behaves like a pure function](/learn/keeping-components-pure):
+
+- If the inputs ([props](/learn/passing-props-to-a-component), [state](/learn/state-a-components-memory), and [context](/learn/passing-data-deeply-with-context)) are the same, it should return exactly the same JSX.
+- Calling it in a different order or with different arguments should not affect the results of other calls.
+
+Reading or writing a ref **during rendering** breaks these expectations.
+
+```js {3-4,6-7}
+function MyComponent() {
+  // ...
+  // 🚩 Don't write a ref during rendering
+  myRef.current = 123;
+  // ...
+  // 🚩 Don't read a ref during rendering
+  return <h1>{myOtherRef.current}</h1>;
+}
+```
+
+You can read or write refs **from event handlers or effects instead**.
+
+```js {4-5,9-10}
+function MyComponent() {
+  // ...
+  useEffect(() => {
+    // ✅ You can read or write refs in effects
+    myRef.current = 123;
+  });
+  // ...
+  function handleClick() {
+    // ✅ You can read or write refs in event handlers
+    doSomething(myOtherRef.current);
+  }
+  // ...
+}
+```
+
+If you *have to* read [or write](/reference/react/useState#storing-information-from-previous-renders) something during rendering, [use state](/reference/react/useState) instead.
+
+When you break these rules, your component might still work, but most of the newer features we're adding to React will rely on these expectations. Read more about [keeping your components pure.](/learn/keeping-components-pure#where-you-can-cause-side-effects)
+
+</Pitfall>
+
+---
+
+### Manipulating the DOM with a ref {/*manipulating-the-dom-with-a-ref*/}
+
+It's particularly common to use a ref to manipulate the [DOM.](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) React has built-in support for this.
+
+First, declare a <CodeStep step={1}>ref object</CodeStep> with an <CodeStep step={3}>initial value</CodeStep> of `null`:
+
+```js [[1, 4, "inputRef"], [3, 4, "null"]]
+import { useRef } from 'react';
+
+function MyComponent() {
+  const inputRef = useRef(null);
+  // ...
+```
+
+Then pass your ref object as the `ref` attribute to the JSX of the DOM node you want to manipulate:
+
+```js [[1, 2, "inputRef"]]
+  // ...
+  return <input ref={inputRef} />;
+```
+
+After React creates the DOM node and puts it on the screen, React will set the <CodeStep step={2}>`current` property</CodeStep> of your ref object to that DOM node. Now you can access the `<input>`'s DOM node and call methods like [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus):
+
+```js [[2, 2, "inputRef.current"]]
+  function handleClick() {
+    inputRef.current.focus();
+  }
+```
+
+React will set the `current` property back to `null` when the node is removed from the screen.
+
+Read more about [manipulating the DOM with refs.](/learn/manipulating-the-dom-with-refs)
+
+<Recipes titleText="Examples of manipulating the DOM with useRef" titleId="examples-dom">
+
+#### Focusing a text input {/*focusing-a-text-input*/}
+
+In this example, clicking the button will focus the input:
+
+<Sandpack>
+
+```js
+import { useRef } from 'react';
+
+export default function Form() {
+  const inputRef = useRef(null);
+
+  function handleClick() {
+    inputRef.current.focus();
+  }
+
+  return (
+    <>
+      <input ref={inputRef} />
+      <button onClick={handleClick}>
+        Focus the input
+      </button>
+    </>
+  );
+}
+```
+
+</Sandpack>
+
+<Solution />
+
+#### Scrolling an image into view {/*scrolling-an-image-into-view*/}
+
+In this example, clicking the button will scroll an image into view. It uses a ref to the list DOM node, and then calls DOM [`querySelectorAll`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) API to find the image we want to scroll to.
+
+<Sandpack>
+
+```js
+import { useRef } from 'react';
+
+export default function CatFriends() {
+  const listRef = useRef(null);
+
+  function scrollToIndex(index) {
+    const listNode = listRef.current;
+    // This line assumes a particular DOM structure:
+    const imgNode = listNode.querySelectorAll('li > img')[index];
+    imgNode.scrollIntoView({
+      behavior: 'smooth',
+      block: 'nearest',
+      inline: 'center'
+    });
+  }
+
+  return (
+    <>
+      <nav>
+        <button onClick={() => scrollToIndex(0)}>
+          Tom
+        </button>
+        <button onClick={() => scrollToIndex(1)}>
+          Maru
+        </button>
+        <button onClick={() => scrollToIndex(2)}>
+          Jellylorum
+        </button>
+      </nav>
+      <div>
+        <ul ref={listRef}>
+          <li>
+            <img
+              src="https://placekitten.com/g/200/200"
+              alt="Tom"
+            />
+          </li>
+          <li>
+            <img
+              src="https://placekitten.com/g/300/200"
+              alt="Maru"
+            />
+          </li>
+          <li>
+            <img
+              src="https://placekitten.com/g/250/200"
+              alt="Jellylorum"
+            />
+          </li>
+        </ul>
+      </div>
+    </>
+  );
+}
+```
+
+```css
+div {
+  width: 100%;
+  overflow: hidden;
+}
+
+nav {
+  text-align: center;
+}
+
+button {
+  margin: .25rem;
+}
+
+ul,
+li {
+  list-style: none;
+  white-space: nowrap;
+}
+
+li {
+  display: inline;
+  padding: 0.5rem;
+}
+```
+
+</Sandpack>
+
+<Solution />
+
+#### Playing and pausing a video {/*playing-and-pausing-a-video*/}
+
+This example uses a ref to call [`play()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play) and [`pause()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause) on a `<video>` DOM node.
+
+<Sandpack>
+
+```js
+import { useState, useRef } from 'react';
+
+export default function VideoPlayer() {
+  const [isPlaying, setIsPlaying] = useState(false);
+  const ref = useRef(null);
+
+  function handleClick() {
+    const nextIsPlaying = !isPlaying;
+    setIsPlaying(nextIsPlaying);
+
+    if (nextIsPlaying) {
+      ref.current.play();
+    } else {
+      ref.current.pause();
+    }
+  }
+
+  return (
+    <>
+      <button onClick={handleClick}>
+        {isPlaying ? 'Pause' : 'Play'}
+      </button>
+      <video
+        width="250"
+        ref={ref}
+        onPlay={() => setIsPlaying(true)}
+        onPause={() => setIsPlaying(false)}
+      >
+        <source
+          src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
+          type="video/mp4"
+        />
+      </video>
+    </>
+  );
+}
+```
+
+```css
+button { display: block; margin-bottom: 20px; }
+```
+
+</Sandpack>
+
+<Solution />
+
+#### Exposing a ref to your own component {/*exposing-a-ref-to-your-own-component*/}
+
+Sometimes, you may want to let the parent component manipulate the DOM inside of your component. For example, maybe you're writing a `MyInput` component, but you want the parent to be able to focus the input (which the parent has no access to). You can use a combination of `useRef` to hold the input and [`forwardRef`](/reference/react/forwardRef) to expose it to the parent component. Read a [detailed walkthrough](/learn/manipulating-the-dom-with-refs#accessing-another-components-dom-nodes) here.
+
+<Sandpack>
+
+```js
+import { forwardRef, useRef } from 'react';
+
+const MyInput = forwardRef((props, ref) => {
+  return <input {...props} ref={ref} />;
+});
+
+export default function Form() {
+  const inputRef = useRef(null);
+
+  function handleClick() {
+    inputRef.current.focus();
+  }
+
+  return (
+    <>
+      <MyInput ref={inputRef} />
+      <button onClick={handleClick}>
+        Focus the input
+      </button>
+    </>
+  );
+}
+```
+
+</Sandpack>
+
+<Solution />
+
+</Recipes>
+
+---
+
+### Avoiding recreating the ref contents {/*avoiding-recreating-the-ref-contents*/}
+
+React saves the initial ref value once and ignores it on the next renders.
+
+```js
+function Video() {
+  const playerRef = useRef(new VideoPlayer());
+  // ...
+```
+
+Although the result of `new VideoPlayer()` is only used for the initial render, you're still calling this function on every render. This can be wasteful if it's creating expensive objects.
+
+To solve it, you may initialize the ref like this instead:
+
+```js
+function Video() {
+  const playerRef = useRef(null);
+  if (playerRef.current === null) {
+    playerRef.current = new VideoPlayer();
+  }
+  // ...
+```
+
+Normally, writing or reading `ref.current` during render is not allowed. However, it's fine in this case because the result is always the same, and the condition only executes during initialization so it's fully predictable.
+
+<DeepDive>
+
+#### How to avoid null checks when initializing useRef later {/*how-to-avoid-null-checks-when-initializing-use-ref-later*/}
+
+If you use a type checker and don't want to always check for `null`, you can try a pattern like this instead:
+
+```js
+function Video() {
+  const playerRef = useRef(null);
+
+  function getPlayer() {
+    if (playerRef.current !== null) {
+      return playerRef.current;
+    }
+    const player = new VideoPlayer();
+    playerRef.current = player;
+    return player;
+  }
+
+  // ...
+```
+
+Here, the `playerRef` itself is nullable. However, you should be able to convince your type checker that there is no case in which `getPlayer()` returns `null`. Then use `getPlayer()` in your event handlers.
+
+</DeepDive>
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+
+### I can't get a ref to a custom component {/*i-cant-get-a-ref-to-a-custom-component*/}
+
+If you try to pass a `ref` to your own component like this:
+
+```js
+const inputRef = useRef(null);
+
+return <MyInput ref={inputRef} />;
+```
+
+You might get an error in the console:
+
+<ConsoleBlock level="error">
+
+Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
+
+</ConsoleBlock>
+
+By default, your own components don't expose refs to the DOM nodes inside them.
+
+To fix this, find the component that you want to get a ref to:
+
+```js
+export default function MyInput({ value, onChange }) {
+  return (
+    <input
+      value={value}
+      onChange={onChange}
+    />
+  );
+}
+```
+
+And then wrap it in [`forwardRef`](/reference/react/forwardRef) like this:
+
+```js {3,8}
+import { forwardRef } from 'react';
+
+const MyInput = forwardRef(({ value, onChange }, ref) => {
+  return (
+    <input
+      value={value}
+      onChange={onChange}
+      ref={ref}
+    />
+  );
+});
+
+export default MyInput;
+```
+
+Then the parent component can get a ref to it.
+
+Read more about [accessing another component's DOM nodes.](/learn/manipulating-the-dom-with-refs#accessing-another-components-dom-nodes)
diff --git a/beta/src/content/reference/react/useState.md b/beta/src/content/reference/react/useState.md
new file mode 100644
index 000000000..86dd260b1
--- /dev/null
+++ b/beta/src/content/reference/react/useState.md
@@ -0,0 +1,1290 @@
+---
+title: useState
+---
+
+<Intro>
+
+`useState` is a React Hook that lets you add a [state variable](/learn/state-a-components-memory) to your component.
+
+```js
+const [state, setState] = useState(initialState)
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `useState(initialState)` {/*usestate*/}
+
+Call `useState` at the top level of your component to declare a [state variable.](/learn/state-a-components-memory)
+
+```js
+import { useState } from 'react';
+
+function MyComponent() {
+  const [age, setAge] = useState(28);
+  const [name, setName] = useState('Taylor');
+  const [todos, setTodos] = useState(() => createTodos());
+  // ...
+```
+
+The convention is to name state variables like `[something, setSomething]` using [array destructuring.](https://javascript.info/destructuring-assignment)
+
+[See more examples below.](#usage)
+
+#### Parameters {/*parameters*/}
+
+* `initialState`: The value you want the state to be initially. It can be a value of any type, but there is a special behavior for functions. This argument is ignored after the initial render.
+  * If you pass a function as `initialState`, it will be treated as an _initializer function_. It should be pure, should take no arguments, and should return a value of any type. React will call your initializer function when initializing the component, and store its return value as the initial state. [See an example below.](#avoiding-recreating-the-initial-state)
+
+#### Returns {/*returns*/}
+
+`useState` returns an array with exactly two values:
+
+1. The current state. During the first render, it will match the `initialState` you have passed.
+2. The [`set` function](#setstate) that lets you update the state to a different value and trigger a re-render.
+
+#### Caveats {/*caveats*/}
+
+* `useState` is a Hook, so you can only call it **at the top level of your component** or your own Hooks. You can't call it inside loops or conditions. If you need that, extract a new component and move the state into it.
+* In Strict Mode, React will **call your initializer function twice** in order to [help you find accidental impurities.](#my-initializer-or-updater-function-runs-twice) This is development-only behavior and does not affect production. If your initializer function is pure (as it should be), this should not affect the logic of your component. The result from one of the calls will be ignored.
+
+---
+
+### `set` functions, like `setSomething(nextState)` {/*setstate*/}
+
+The `set` function returned by `useState` lets you update the state to a different value and trigger a re-render. You can pass the next state directly, or a function that calculates it from the previous state:
+
+```js
+const [name, setName] = useState('Edward');
+
+function handleClick() {
+  setName('Taylor');
+  setAge(a => a + 1);
+  // ...
+```
+
+#### Parameters {/*setstate-parameters*/}
+
+* `nextState`: The value that you want the state to be. It can be a value of any type, but there is a special behavior for functions.
+  * If you pass a function as `nextState`, it will be treated as an _updater function_. It must be pure, should take the pending state as its only argument, and should return the next state. React will put your updater function in a queue and re-render your component. During the next render, React will calculate the next state by applying all of the queued updaters to the previous state. [See an example below.](#updating-state-based-on-the-previous-state)
+
+#### Returns {/*setstate-returns*/}
+
+`set` functions do not have a return value.
+
+#### Caveats {/*setstate-caveats*/}
+
+* The `set` function **only updates the state variable for the *next* render**. If you read the state variable after calling the `set` function, [you will still get the old value](#ive-updated-the-state-but-logging-gives-me-the-old-value) that was on the screen before your call.
+
+* If the new value you provide is identical to the current `state`, as determined by an [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison, React will **skip re-rendering the component and its children.** This is an optimization. Although in some cases React may still need to call your component before skipping the children, it shouldn't affect your code.
+
+* React [batches state updates.](/learn/queueing-a-series-of-state-updates) It updates the screen **after all the event handlers have run** and have called their `set` functions. This prevents multiple re-renders during a single event. In the rare case that you need to force React to update the screen earlier, for example to access the DOM, you can use [`flushSync`.](/reference/react-dom/flushSync)
+
+* Calling the `set` function *during rendering* is only allowed from within the currently rendering component. React will discard its output and immediately attempt to render it again with the new state. This pattern is rarely needed, but you can use it to **store information from the previous renders**. [See an example below.](#storing-information-from-previous-renders)
+
+* In Strict Mode, React will **call your updater function twice** in order to [help you find accidental impurities.](#my-initializer-or-updater-function-runs-twice) This is development-only behavior and does not affect production. If your updater function is pure (as it should be), this should not affect the logic of your component. The result from one of the calls will be ignored.
+
+---
+
+## Usage {/*usage*/}
+
+### Adding state to a component {/*adding-state-to-a-component*/}
+
+Call `useState` at the top level of your component to declare one or more [state variables.](/learn/state-a-components-memory)
+
+```js [[1, 4, "age"], [2, 4, "setAge"], [3, 4, "42"], [1, 5, "name"], [2, 5, "setName"], [3, 5, "'Taylor'"]]
+import { useState } from 'react';
+
+function MyComponent() {
+  const [age, setAge] = useState(42);
+  const [name, setName] = useState('Taylor');
+  // ...
+```
+
+The convention is to name state variables like `[something, setSomething]` using [array destructuring.](https://javascript.info/destructuring-assignment)
+
+`useState` returns an array with exactly two items:
+
+1. The <CodeStep step={1}>current state</CodeStep> of this state variable, initially set to the <CodeStep step={3}>initial state</CodeStep> you provided.
+2. The <CodeStep step={2}>`set` function</CodeStep> that lets you change it to any other value in response to interaction.
+
+To update what’s on the screen, call the `set` function with some next state:
+
+```js [[2, 2, "setName"]]
+function handleClick() {
+  setName('Robin');
+}
+```
+
+React will store the next state, render your component again with the new values, and update the UI.
+
+<Pitfall>
+
+Calling the `set` function [**does not** change the current state in the already executing code](#ive-updated-the-state-but-logging-gives-me-the-old-value):
+
+```js {3}
+function handleClick() {
+  setName('Robin');
+  console.log(name); // Still "Taylor"!
+}
+```
+
+It only affects what `useState` will return starting from the *next* render.
+
+</Pitfall>
+
+<Recipes titleText="Basic useState examples" titleId="examples-basic">
+
+#### Counter (number) {/*counter-number*/}
+
+In this example, the `count` state variable holds a number. Clicking the button increments it.
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function Counter() {
+  const [count, setCount] = useState(0);
+
+  function handleClick() {
+    setCount(count + 1);
+  }
+
+  return (
+    <button onClick={handleClick}>
+      You pressed me {count} times
+    </button>
+  );
+}
+```
+
+</Sandpack>
+
+<Solution />
+
+#### Text field (string) {/*text-field-string*/}
+
+In this example, the `text` state variable holds a string. When you type, `handleChange` reads the latest input value from the browser input DOM element, and calls `setText` to update the state. This allows you to display the current `text` below.
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function MyInput() {
+  const [text, setText] = useState('hello');
+
+  function handleChange(e) {
+    setText(e.target.value);
+  }
+
+  return (
+    <>
+      <input value={text} onChange={handleChange} />
+      <p>You typed: {text}</p>
+      <button onClick={() => setText('hello')}>
+        Reset
+      </button>
+    </>
+  );
+}
+```
+
+</Sandpack>
+
+<Solution />
+
+#### Checkbox (boolean) {/*checkbox-boolean*/}
+
+In this example, the `liked` state variable holds a boolean. When you click the input, `setLiked` updates the `liked` state variable with whether the browser checkbox input is checked. The `liked` variable is used to render the text below the checkbox.
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function MyCheckbox() {
+  const [liked, setLiked] = useState(true);
+
+  function handleChange(e) {
+    setLiked(e.target.checked);
+  }
+
+  return (
+    <>
+      <label>
+        <input
+          type="checkbox"
+          checked={liked}
+          onChange={handleChange}
+        />
+        I liked this
+      </label>
+      <p>You {liked ? 'liked' : 'did not like'} this.</p>
+    </>
+  );
+}
+```
+
+</Sandpack>
+
+<Solution />
+
+#### Form (two variables) {/*form-two-variables*/}
+
+You can declare more than one state variable in the same component. Each state variable is completely independent.
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function Form() {
+  const [name, setName] = useState('Taylor');
+  const [age, setAge] = useState(42);
+
+  return (
+    <>
+      <input
+        value={name}
+        onChange={e => setName(e.target.value)}
+      />
+      <button onClick={() => setAge(age + 1)}>
+        Increment age
+      </button>
+      <p>Hello, {name}. You are {age}.</p>
+    </>
+  );
+}
+```
+
+```css
+button { display: block; margin-top: 10px; }
+```
+
+</Sandpack>
+
+<Solution />
+
+</Recipes>
+
+---
+
+### Updating state based on the previous state {/*updating-state-based-on-the-previous-state*/}
+
+Suppose the `age` is `42`. This handler calls `setAge(age + 1)` three times:
+
+```js
+function handleClick() {
+  setAge(age + 1); // setAge(42 + 1)
+  setAge(age + 1); // setAge(42 + 1)
+  setAge(age + 1); // setAge(42 + 1)
+}
+```
+
+However, after one click, `age` will only be `43` rather than `45`! This is because calling the `set` function [does not update](/learn/state-as-a-snapshot) the `age` state variable in the already running code. So each `setAge(age + 1)` call becomes `setAge(43)`.
+
+To solve this problem, **you may pass an *updater function*** to `setAge` instead of the next state:
+
+```js [[1, 2, "a", 0], [2, 2, "a + 1"], [1, 3, "a", 0], [2, 3, "a + 1"], [1, 4, "a", 0], [2, 4, "a + 1"]]
+function handleClick() {
+  setAge(a => a + 1); // setAge(42 => 43)
+  setAge(a => a + 1); // setAge(43 => 44)
+  setAge(a => a + 1); // setAge(44 => 45)
+}
+```
+
+Here, `a => a + 1` is your updater function. It takes the <CodeStep step={1}>pending state</CodeStep> and calculates the <CodeStep step={2}>next state</CodeStep> from it.
+
+React puts your updater functions in a [queue.](/learn/queueing-a-series-of-state-updates) Then, during the next render, it will call them in the same order:
+
+1. `a => a + 1` will receive `42` as the pending state and return `43` as the next state.
+1. `a => a + 1` will receive `43` as the pending state and return `44` as the next state.
+1. `a => a + 1` will receive `44` as the pending state and return `45` as the next state.
+
+There are no other queued updates, so React will store `45` as the current state in the end.
+
+By convention, it's common to name the pending state argument for the first letter of the state variable name, like `a` for `age`. However, you may also call it like `prevAge` or something else that you find clearer.
+
+React may [call your updaters twice](#my-initializer-or-updater-function-runs-twice) in development to verify that they are [pure.](/learn/keeping-components-pure)
+
+<DeepDive>
+
+#### Is using an updater always preferred? {/*is-using-an-updater-always-preferred*/}
+
+You might hear a recommendation to always write code like `setAge(a => a + 1)` if the state you're setting is calculated from the previous state. There is no harm in it, but it is also not always necessary.
+
+In most cases, there is no difference between these two approaches. React always makes sure that for intentional user actions, like clicks, the `age` state variable would be updated before the next click. This means there is no risk of a click handler seeing a "stale" `age` at the beginning of the event handler.
+
+However, if you do multiple updates within the same event, updaters can be helpful. They're also helpful if accessing the state variable itself is inconvenient (you might run into this when optimizing re-renders).
+
+If you prefer consistency over slightly more verbose syntax, it's reasonable to always write an updater if the state you're setting is calculated from the previous state. If it's calculated from the previous state of some *other* state variable, you might want to combine them into one object and [use a reducer.](/learn/extracting-state-logic-into-a-reducer)
+
+</DeepDive>
+
+<Recipes titleText="The difference between passing an updater and passing the next state directly" titleId="examples-updater">
+
+#### Passing the updater function {/*passing-the-updater-function*/}
+
+This example passes the updater function, so the "+3" button works.
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function Counter() {
+  const [age, setAge] = useState(42);
+
+  function increment() {
+    setAge(a => a + 1);
+  }
+
+  return (
+    <>
+      <h1>Your age: {age}</h1>
+      <button onClick={() => {
+        increment();
+        increment();
+        increment();
+      }}>+3</button>
+      <button onClick={() => {
+        increment();
+      }}>+1</button>
+    </>
+  );
+}
+```
+
+```css
+button { display: block; margin: 10px; font-size: 20px; }
+h1 { display: block; margin: 10px; }
+```
+
+</Sandpack>
+
+<Solution />
+
+#### Passing the next state directly {/*passing-the-next-state-directly*/}
+
+This example **does not** pass the updater function, so the "+3" button **doesn't work as intended**.
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function Counter() {
+  const [age, setAge] = useState(42);
+
+  function increment() {
+    setAge(age + 1);
+  }
+
+  return (
+    <>
+      <h1>Your age: {age}</h1>
+      <button onClick={() => {
+        increment();
+        increment();
+        increment();
+      }}>+3</button>
+      <button onClick={() => {
+        increment();
+      }}>+1</button>
+    </>
+  );
+}
+```
+
+```css
+button { display: block; margin: 10px; font-size: 20px; }
+h1 { display: block; margin: 10px; }
+```
+
+</Sandpack>
+
+<Solution />
+
+</Recipes>
+
+---
+
+### Updating objects and arrays in state {/*updating-objects-and-arrays-in-state*/}
+
+You can put objects and arrays into state. In React, state is considered read-only, so **you should *replace* it rather than *mutate* your existing objects**. For example, if you have a `form` object in state, don't update it like this:
+
+```js
+// 🚩 Don't mutate an object in state like this:
+form.firstName = 'Taylor';
+```
+
+Instead, replace the whole object by creating a new one:
+
+```js
+// ✅ Replace state with a new object
+setForm({
+  ...form,
+  firstName: 'Taylor'
+});
+```
+
+Read [updating objects in state](/learn/updating-objects-in-state) and [updating arrays in state](/learn/updating-arrays-in-state) to learn more.
+
+<Recipes titleText="Examples of objects and arrays in state" titleId="examples-objects">
+
+#### Form (object) {/*form-object*/}
+
+In this example, the `form` state variable holds an object. Each input has a change handler that calls `setForm` with the next state of the entire form. The `{ ...form }` spread syntax ensures that the state object is replaced rather than mutated.
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function Form() {
+  const [form, setForm] = useState({
+    firstName: 'Barbara',
+    lastName: 'Hepworth',
+    email: 'bhepworth@sculpture.com',
+  });
+
+  return (
+    <>
+      <label>
+        First name:
+        <input
+          value={form.firstName}
+          onChange={e => {
+            setForm({
+              ...form,
+              firstName: e.target.value
+            });
+          }}
+        />
+      </label>
+      <label>
+        Last name:
+        <input
+          value={form.lastName}
+          onChange={e => {
+            setForm({
+              ...form,
+              lastName: e.target.value
+            });
+          }}
+        />
+      </label>
+      <label>
+        Email:
+        <input
+          value={form.email}
+          onChange={e => {
+            setForm({
+              ...form,
+              email: e.target.value
+            });
+          }}
+        />
+      </label>
+      <p>
+        {form.firstName}{' '}
+        {form.lastName}{' '}
+        ({form.email})
+      </p>
+    </>
+  );
+}
+```
+
+```css
+label { display: block; }
+input { margin-left: 5px; }
+```
+
+</Sandpack>
+
+<Solution />
+
+#### Form (nested object) {/*form-nested-object*/}
+
+In this example, the state is more nested. When you update nested state, you need to create a copy of the object you're updating, as well as any objects "containing" it on the way upwards. Read [updating a nested object](/learn/updating-objects-in-state#updating-a-nested-object) to learn more.
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function Form() {
+  const [person, setPerson] = useState({
+    name: 'Niki de Saint Phalle',
+    artwork: {
+      title: 'Blue Nana',
+      city: 'Hamburg',
+      image: 'https://i.imgur.com/Sd1AgUOm.jpg',
+    }
+  });
+
+  function handleNameChange(e) {
+    setPerson({
+      ...person,
+      name: e.target.value
+    });
+  }
+
+  function handleTitleChange(e) {
+    setPerson({
+      ...person,
+      artwork: {
+        ...person.artwork,
+        title: e.target.value
+      }
+    });
+  }
+
+  function handleCityChange(e) {
+    setPerson({
+      ...person,
+      artwork: {
+        ...person.artwork,
+        city: e.target.value
+      }
+    });
+  }
+
+  function handleImageChange(e) {
+    setPerson({
+      ...person,
+      artwork: {
+        ...person.artwork,
+        image: e.target.value
+      }
+    });
+  }
+
+  return (
+    <>
+      <label>
+        Name:
+        <input
+          value={person.name}
+          onChange={handleNameChange}
+        />
+      </label>
+      <label>
+        Title:
+        <input
+          value={person.artwork.title}
+          onChange={handleTitleChange}
+        />
+      </label>
+      <label>
+        City:
+        <input
+          value={person.artwork.city}
+          onChange={handleCityChange}
+        />
+      </label>
+      <label>
+        Image:
+        <input
+          value={person.artwork.image}
+          onChange={handleImageChange}
+        />
+      </label>
+      <p>
+        <i>{person.artwork.title}</i>
+        {' by '}
+        {person.name}
+        <br />
+        (located in {person.artwork.city})
+      </p>
+      <img 
+        src={person.artwork.image} 
+        alt={person.artwork.title}
+      />
+    </>
+  );
+}
+```
+
+```css
+label { display: block; }
+input { margin-left: 5px; margin-bottom: 5px; }
+img { width: 200px; height: 200px; }
+```
+
+</Sandpack>
+
+<Solution />
+
+#### List (array) {/*list-array*/}
+
+In this example, the `todos` state variable holds an array. Each button handler calls `setTodos` with the next version of that array. The `[...todos]` spread syntax, `todos.map()` and `todos.filter()` ensure the state array is replaced rather than mutated.
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+import AddTodo from './AddTodo.js';
+import TaskList from './TaskList.js';
+
+let nextId = 3;
+const initialTodos = [
+  { id: 0, title: 'Buy milk', done: true },
+  { id: 1, title: 'Eat tacos', done: false },
+  { id: 2, title: 'Brew tea', done: false },
+];
+
+export default function TaskApp() {
+  const [todos, setTodos] = useState(initialTodos);
+
+  function handleAddTodo(title) {
+    setTodos([
+      ...todos,
+      {
+        id: nextId++,
+        title: title,
+        done: false
+      }
+    ]);
+  }
+
+  function handleChangeTodo(nextTodo) {
+    setTodos(todos.map(t => {
+      if (t.id === nextTodo.id) {
+        return nextTodo;
+      } else {
+        return t;
+      }
+    }));
+  }
+
+  function handleDeleteTodo(todoId) {
+    setTodos(
+      todos.filter(t => t.id !== todoId)
+    );
+  }
+
+  return (
+    <>
+      <AddTodo
+        onAddTodo={handleAddTodo}
+      />
+      <TaskList
+        todos={todos}
+        onChangeTodo={handleChangeTodo}
+        onDeleteTodo={handleDeleteTodo}
+      />
+    </>
+  );
+}
+```
+
+```js AddTodo.js
+import { useState } from 'react';
+
+export default function AddTodo({ onAddTodo }) {
+  const [title, setTitle] = useState('');
+  return (
+    <>
+      <input
+        placeholder="Add todo"
+        value={title}
+        onChange={e => setTitle(e.target.value)}
+      />
+      <button onClick={() => {
+        setTitle('');
+        onAddTodo(title);
+      }}>Add</button>
+    </>
+  )
+}
+```
+
+```js TaskList.js
+import { useState } from 'react';
+
+export default function TaskList({
+  todos,
+  onChangeTodo,
+  onDeleteTodo
+}) {
+  return (
+    <ul>
+      {todos.map(todo => (
+        <li key={todo.id}>
+          <Task
+            todo={todo}
+            onChange={onChangeTodo}
+            onDelete={onDeleteTodo}
+          />
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function Task({ todo, onChange, onDelete }) {
+  const [isEditing, setIsEditing] = useState(false);
+  let todoContent;
+  if (isEditing) {
+    todoContent = (
+      <>
+        <input
+          value={todo.title}
+          onChange={e => {
+            onChange({
+              ...todo,
+              title: e.target.value
+            });
+          }} />
+        <button onClick={() => setIsEditing(false)}>
+          Save
+        </button>
+      </>
+    );
+  } else {
+    todoContent = (
+      <>
+        {todo.title}
+        <button onClick={() => setIsEditing(true)}>
+          Edit
+        </button>
+      </>
+    );
+  }
+  return (
+    <label>
+      <input
+        type="checkbox"
+        checked={todo.done}
+        onChange={e => {
+          onChange({
+            ...todo,
+            done: e.target.checked
+          });
+        }}
+      />
+      {todoContent}
+      <button onClick={() => onDelete(todo.id)}>
+        Delete
+      </button>
+    </label>
+  );
+}
+```
+
+```css
+button { margin: 5px; }
+li { list-style-type: none; }
+ul, li { margin: 0; padding: 0; }
+```
+
+</Sandpack>
+
+<Solution />
+
+#### Writing concise update logic with Immer {/*writing-concise-update-logic-with-immer*/}
+
+If updating arrays and objects without mutation feels tedious, you can use a library like [Immer](https://github.com/immerjs/use-immer) to reduce repetitive code. Immer lets you write concise code as if you were mutating objects, but under the hood it performs immutable updates:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+import { useImmer } from 'use-immer';
+
+let nextId = 3;
+const initialList = [
+  { id: 0, title: 'Big Bellies', seen: false },
+  { id: 1, title: 'Lunar Landscape', seen: false },
+  { id: 2, title: 'Terracotta Army', seen: true },
+];
+
+export default function BucketList() {
+  const [list, updateList] = useImmer(initialList);
+
+  function handleToggle(artworkId, nextSeen) {
+    updateList(draft => {
+      const artwork = draft.find(a =>
+        a.id === artworkId
+      );
+      artwork.seen = nextSeen;
+    });
+  }
+
+  return (
+    <>
+      <h1>Art Bucket List</h1>
+      <h2>My list of art to see:</h2>
+      <ItemList
+        artworks={list}
+        onToggle={handleToggle} />
+    </>
+  );
+}
+
+function ItemList({ artworks, onToggle }) {
+  return (
+    <ul>
+      {artworks.map(artwork => (
+        <li key={artwork.id}>
+          <label>
+            <input
+              type="checkbox"
+              checked={artwork.seen}
+              onChange={e => {
+                onToggle(
+                  artwork.id,
+                  e.target.checked
+                );
+              }}
+            />
+            {artwork.title}
+          </label>
+        </li>
+      ))}
+    </ul>
+  );
+}
+```
+
+```json package.json
+{
+  "dependencies": {
+    "immer": "1.7.3",
+    "react": "latest",
+    "react-dom": "latest",
+    "react-scripts": "latest",
+    "use-immer": "0.5.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+</Sandpack>
+
+<Solution />
+
+</Recipes>
+
+---
+
+### Avoiding recreating the initial state {/*avoiding-recreating-the-initial-state*/}
+
+React saves the initial state once and ignores it on the next renders.
+
+```js
+function TodoList() {
+  const [todos, setTodos] = useState(createInitialTodos());
+  // ...
+```
+
+Although the result of `createInitialTodos()` is only used for the initial render, you're still calling this function on every render. This can be wasteful if it's creating large arrays or performing expensive calculations.
+
+To solve this, you may **pass it as an _initializer_ function** to `useState` instead:
+
+```js
+function TodoList() {
+  const [todos, setTodos] = useState(createInitialTodos);
+  // ...
+```
+
+Notice that you’re passing `createInitialTodos`, which is the *function itself*, and not `createInitialTodos()`, which is the result of calling it. If you pass a function to `useState`, React will only call it during initialization.
+
+React may [call your initializers twice](#my-initializer-or-updater-function-runs-twice) in development to verify that they are [pure.](/learn/keeping-components-pure)
+
+<Recipes titleText="The difference between passing an initializer and passing the initial state directly" titleId="examples-initializer">
+
+#### Passing the initializer function {/*passing-the-initializer-function*/}
+
+This example passes the initializer function, so the `createInitialTodos` function only runs during initialization. It does not run when component re-renders, such as when you type into the input.
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+function createInitialTodos() {
+  const initialTodos = [];
+  for (let i = 0; i < 50; i++) {
+    initialTodos.push({
+      id: i,
+      text: 'Item ' + (i + 1)
+    });
+  }
+  return initialTodos;
+}
+
+export default function TodoList() {
+  const [todos, setTodos] = useState(createInitialTodos);
+  const [text, setText] = useState('');
+
+  return (
+    <>
+      <input
+        value={text}
+        onChange={e => setText(e.target.value)}
+      />
+      <button onClick={() => {
+        setText('');
+        setTodos([{
+          id: todos.length,
+          text: text
+        }, ...todos]);
+      }}>Add</button>
+      <ul>
+        {todos.map(item => (
+          <li key={item.id}>
+            {item.text}
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+}
+```
+
+</Sandpack>
+
+<Solution />
+
+#### Passing the initial state directly {/*passing-the-initial-state-directly*/}
+
+This example **does not** pass the initializer function, so the `createInitialTodos` function runs on every render, such as when you type into the input. There is no observable difference in behavior, but this code is less efficient.
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+function createInitialTodos() {
+  const initialTodos = [];
+  for (let i = 0; i < 50; i++) {
+    initialTodos.push({
+      id: i,
+      text: 'Item ' + (i + 1)
+    });
+  }
+  return initialTodos;
+}
+
+export default function TodoList() {
+  const [todos, setTodos] = useState(createInitialTodos());
+  const [text, setText] = useState('');
+
+  return (
+    <>
+      <input
+        value={text}
+        onChange={e => setText(e.target.value)}
+      />
+      <button onClick={() => {
+        setText('');
+        setTodos([{
+          id: todos.length,
+          text: text
+        }, ...todos]);
+      }}>Add</button>
+      <ul>
+        {todos.map(item => (
+          <li key={item.id}>
+            {item.text}
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+}
+```
+
+</Sandpack>
+
+<Solution />
+
+</Recipes>
+
+---
+
+### Resetting state with a key {/*resetting-state-with-a-key*/}
+
+Typically, you might encounter the `key` attribute when [rendering lists.](/learn/rendering-lists) However, it also serves another purpose.
+
+You can **reset a component's state by passing a different `key` to a component.** In this example, the Reset button changes the `version` state variable, which we pass as a `key` to the `Form`. When the `key` changes, React re-creates the `Form` component (and all of its children) from scratch, so its state gets reset.
+
+Read [preserving and resetting state](/learn/preserving-and-resetting-state) to learn more.
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+
+export default function App() {
+  const [version, setVersion] = useState(0);
+
+  function handleReset() {
+    setVersion(version + 1);
+  }
+
+  return (
+    <>
+      <button onClick={handleReset}>Reset</button>
+      <Form key={version} />
+    </>
+  );
+}
+
+function Form() {
+  const [name, setName] = useState('Taylor');
+
+  return (
+    <>
+      <input
+        value={name}
+        onChange={e => setName(e.target.value)}
+      />
+      <p>Hello, {name}.</p>
+    </>
+  );
+}
+```
+
+```css
+button { display: block; margin-bottom: 20px; }
+```
+
+</Sandpack>
+
+---
+
+### Storing information from previous renders {/*storing-information-from-previous-renders*/}
+
+Usually, you will update state in event handlers. However, in rare cases you might want to adjust state in response to rendering -- for example, you might want to change a state variable when a prop changes.
+
+In most cases, you don't need this:
+
+* **If the value you need can be computed entirely from the current props or other state, [remove that redundant state altogether.](/learn/choosing-the-state-structure#avoid-redundant-state)** If you're worried about recomputing too often, the [`useMemo` Hook](/reference/react/useMemo) can help.
+* If you want to reset the entire component tree's state, [pass a different `key` to your component.](#resetting-state-with-a-key)
+* If you can, update all the relevant state in the event handlers.
+
+In the rare case that none of these apply, there is a pattern you can use to update state based on the values that have been rendered so far, by calling a `set` function while your component is rendering.
+
+Here's an example. This `CountLabel` component displays the `count` prop passed to it:
+
+```js CountLabel.js
+export default function CountLabel({ count }) {
+  return <h1>{count}</h1>
+}
+```
+
+Say you want to show whether the counter has *increased or decreased* since the last change. The `count` prop doesn't tell you this -- you need to keep track of its previous value. Add the `prevCount` state variable to track it. Add another state variable called `trend` to hold whether the count has increased or decreased. Compare `prevCount` with `count`, and if they're not equal, update both `prevCount` and `trend`. Now you can show both the current count prop and *how it has changed since the last render*.
+
+<Sandpack>
+
+```js App.js
+import { useState } from 'react';
+import CountLabel from './CountLabel.js';
+
+export default function App() {
+  const [count, setCount] = useState(0);
+  return (
+    <>
+      <button onClick={() => setCount(count + 1)}>
+        Increment
+      </button>
+      <button onClick={() => setCount(count - 1)}>
+        Decrement
+      </button>
+      <CountLabel count={count} />
+    </>
+  );
+}
+```
+
+```js CountLabel.js active
+import { useState } from 'react';
+
+export default function CountLabel({ count }) {
+  const [prevCount, setPrevCount] = useState(count);
+  const [trend, setTrend] = useState(null);
+  if (prevCount !== count) {
+    setPrevCount(count);
+    setTrend(count > prevCount ? 'increasing' : 'decreasing');
+  }
+  return (
+    <>
+      <h1>{count}</h1>
+      {trend && <p>The count is {trend}</p>}
+    </>
+  );
+}
+```
+
+```css
+button { margin-bottom: 10px; }
+```
+
+</Sandpack>
+
+Note that if you call a `set` function while rendering, it must be inside a condition like `prevCount !== count`, and there must be a call like `setPrevCount(count)` inside of the condition. Otherwise, your component would re-render in a loop until it crashes. Also, you can only update the state of the *currently rendering* component like this. Calling the `set` function of *another* component during rendering is an error. Finally, your `set` call should still [update state without mutation](#updating-objects-and-arrays-in-state) -- this special case doesn't mean you can break other rules of [pure functions.](/learn/keeping-components-pure)
+
+This pattern can be hard to understand and is usually best avoided. However, it's better than updating state in an effect. When you call the `set` function during render, React will re-render that component immediately after your component exits with a `return` statement, and before rendering the children. This way, children don't need to render twice. The rest of your component function will still execute (and the result will be thrown away), but if your condition is below all the calls to Hooks, you may add an early `return;` inside it to restart rendering earlier.
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+
+### I've updated the state, but logging gives me the old value {/*ive-updated-the-state-but-logging-gives-me-the-old-value*/}
+
+Calling the `set` function **does not change state in the running code**:
+
+```js {4,5,8}
+function handleClick() {
+  console.log(count);  // 0
+
+  setCount(count + 1); // Request a re-render with 1
+  console.log(count);  // Still 0!
+
+  setTimeout(() => {
+    console.log(count); // Also 0!
+  }, 5000);
+}
+```
+
+This is because [states behaves like a snapshot.](/learn/state-as-a-snapshot) Updating state requests another render with the new state value, but does not affect the `count` JavaScript variable in your already-running event handler.
+
+If you need to use the next state, you can save it in a variable before passing it to the `set` function:
+
+```js
+const nextCount = count + 1;
+setCount(nextCount);
+
+console.log(count);     // 0
+console.log(nextCount); // 1
+```
+
+---
+
+### I've updated the state, but the screen doesn't update {/*ive-updated-the-state-but-the-screen-doesnt-update*/}
+
+React will **ignore your update if the next state is equal to the previous state,** as determined by an [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison. This usually happens when you change an object or an array in state directly:
+
+```js
+obj.x = 10;  // 🚩 Wrong: mutating existing object
+setObj(obj); // 🚩 Doesn't do anything
+```
+
+You mutated an existing `obj` object and passed it back to `setObj`, so React ignored the update. To fix this, you need to ensure that you're always [_replacing_ objects and arrays in state instead of _mutating_ them](#updating-objects-and-arrays-in-state):
+
+```js
+// ✅ Correct: creating a new object
+setObj({
+  ...obj,
+  x: 10
+});
+```
+
+---
+
+### I'm getting an error: "Too many re-renders" {/*im-getting-an-error-too-many-re-renders*/}
+
+You might get an error that says: `Too many re-renders. React limits the number of renders to prevent an infinite loop.` Typically, this means that you're unconditionally setting state *during render*, so your component enters a loop: render, set state (which causes a render), render, set state (which causes a render), and so on. Very often, this is caused by a mistake in specifying an event handler:
+
+```js {1-2}
+// 🚩 Wrong: calls the handler during render
+return <button onClick={handleClick()}>Click me</button>
+
+// ✅ Correct: passes down the event handler
+return <button onClick={handleClick}>Click me</button>
+
+// ✅ Correct: passes down an inline function
+return <button onClick={(e) => handleClick(e)}>Click me</button>
+```
+
+If you can't find the cause of this error, click on the arrow next to the error in the console and look through the JavaScript stack to find the specific `set` function call responsible for the error.
+
+---
+
+### My initializer or updater function runs twice {/*my-initializer-or-updater-function-runs-twice*/}
+
+In [Strict Mode](/reference/react/StrictMode), React will call some of your functions twice instead of once:
+
+```js {2,5-6,11-12}
+function TodoList() {
+  // This component function will run twice for every render.
+
+  const [todos, setTodos] = useState(() => {
+    // This initializer function will run twice during initialization.
+    return createTodos();
+  });
+
+  function handleClick() {
+    setTodos(prevTodos => {
+      // This updater function will run twice for every click.
+      return [...prevTodos, createTodo()];
+    });
+  }
+  // ...
+```
+
+This is expected and shouldn't break your code.
+
+This **development-only** behavior helps you [keep components pure.](/learn/keeping-components-pure) React uses the result of one of the calls, and ignores the result of the other call. As long as your component, initializer, and updater functions are pure, this shouldn't affect your logic. However, if they are accidentally impure, this helps you notice the mistakes and fix it.
+
+For example, this impure updater function mutates an array in state:
+
+```js {2,3}
+setTodos(prevTodos => {
+  // 🚩 Mistake: mutating state
+  prevTodos.push(createTodo());
+});
+```
+
+Because React calls your updater function twice, you'll see the todo was added twice, so you'll know that there is a mistake. In this example, you can fix the mistake by [replacing the array instead of mutating it](#updating-objects-and-arrays-in-state):
+
+```js {2,3}
+setTodos(prevTodos => {
+  // ✅ Correct: replacing with new state
+  return [...prevTodos, createTodo()];
+});
+```
+
+Now that this updater function is pure, calling it an extra time doesn't make a difference in behavior. This is why React calling it twice helps you find mistakes. **Only component, initializer, and updater functions need to be pure.** Event handlers don't need to be pure, so React will never call your event handlers twice.
+
+Read [keeping components pure](/learn/keeping-components-pure) to learn more.
+
+---
+
+### I'm trying to set state to a function, but it gets called instead {/*im-trying-to-set-state-to-a-function-but-it-gets-called-instead*/}
+
+You can't put a function into state like this:
+
+```js
+const [fn, setFn] = useState(someFunction);
+
+function handleClick() {
+  setFn(someOtherFunction);
+}
+```
+
+Because you're passing a function, React assumes that `someFunction` is an [initializer function](#avoiding-recreating-the-initial-state), and that `someOtherFunction` is an [updater function](#updating-state-based-on-the-previous-state), so it tries to call them and store the result. To actually *store* a function, you have to put `() =>` before them in both cases. Then React will store the functions you pass.
+
+```js {1,4}
+const [fn, setFn] = useState(() => someFunction);
+
+function handleClick() {
+  setFn(() => someOtherFunction);
+}
+```
diff --git a/beta/src/content/reference/react/useSyncExternalStore.md b/beta/src/content/reference/react/useSyncExternalStore.md
new file mode 100644
index 000000000..fc2932ed3
--- /dev/null
+++ b/beta/src/content/reference/react/useSyncExternalStore.md
@@ -0,0 +1,426 @@
+---
+title: useSyncExternalStore
+---
+
+<Intro>
+
+`useSyncExternalStore` is a React Hook that lets you subscribe to an external store.
+
+```js
+const snapshot = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?)
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?)` {/*usesyncexternalstore*/}
+
+Call `useSyncExternalStore` at the top level of your component to read a value from an external data store.
+
+```js
+import { useSyncExternalStore } from 'react';
+import { todosStore } from './todoStore.js';
+
+function TodosApp() {
+  const todos = useSyncExternalStore(todosStore.subscribe, todosStore.getSnapshot);
+  // ...
+}
+```
+
+It returns the snapshot of the data in the store. You need to pass two functions as arguments:
+
+1. The `subscribe` function should subscribe to the store and return a function that unsubscribes.
+2. The `getSnapshot` function should read a snapshot of the data from the store.
+
+[See more examples below.](#usage)
+
+#### Parameters {/*parameters*/}
+
+* `subscribe`: A function that takes a single `callback` argument and subscribes it to the store. When the store changes, it should invoke the provided `callback`. This will cause the component to re-render. The `subscribe` function should return a function that cleans up the subscription.
+
+* `getSnapshot`: A function that returns a snapshot of the data in the store that's needed by the component. While the store has not changed, repeated calls to `getSnapshot` must return the same value. If the store changes and the returned value is different (as compared by [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is)), React will re-render the component.
+
+* **optional** `getServerSnapshot`: A function that returns the initial snapshot of the data in the store. It will be used only during server rendering and during hydration of server-rendered content on the client. The server snapshot must be the same between the client and the server, and is usually serialized and passed from the server to the client. If this function is not provided, rendering the component on the server will throw an error.
+
+#### Returns {/*returns*/}
+
+The current snapshot of the store which you can use in your rendering logic.
+
+#### Caveats {/*caveats*/}
+
+* The store snapshot returned by `getSnapshot` must be immutable. If the underlying store has mutable data, return a new immutable snapshot if the data has changed. Otherwise, return a cached last snapshot.
+
+* If a different `subscribe` function is passed during a re-render, React will re-subscribe to the store using the newly passed `subscribe` function. You can prevent this by declaring `subscribe` outside the component.
+
+---
+
+## Usage {/*usage*/}
+
+### Subscribing to an external store {/*subscribing-to-an-external-store*/}
+
+Most of your React components will only read data from their [props,](/learn/passing-props-to-a-component) [state,](/reference/react/useState) and [context.](/reference/react/useContext) However, sometimes a component needs to read some data from some store outside of React that changes over time. This includes:
+
+* Third-party state management libraries that hold state outside of React.
+* Browser APIs that expose a mutable value and events to subscribe to its changes.
+
+Call `useSyncExternalStore` at the top level of your component to read a value from an external data store.
+
+```js [[1, 5, "todosStore.subscribe"], [2, 5, "todosStore.getSnapshot"], [3, 5, "todos", 0]]
+import { useSyncExternalStore } from 'react';
+import { todosStore } from './todoStore.js';
+
+function TodosApp() {
+  const todos = useSyncExternalStore(todosStore.subscribe, todosStore.getSnapshot);
+  // ...
+}
+```
+
+It returns the <CodeStep step={3}>snapshot</CodeStep> of the data in the store. You need to pass two functions as arguments:
+
+1. The <CodeStep step={1}>`subscribe` function</CodeStep> should subscribe to the store and return a function that unsubscribes.
+2. The <CodeStep step={2}>`getSnapshot` function</CodeStep> should read a snapshot of the data from the store.
+
+React will use these functions to keep your component subscribed to the store and re-render it on changes.
+
+For example, in the sandbox below, `todosStore` is implemented as an external store that stores data outside of React. The `TodosApp` component connects to that external store with the `useSyncExternalStore` Hook. 
+
+<Sandpack>
+
+```js
+import { useSyncExternalStore } from 'react';
+import { todosStore } from './todoStore.js';
+
+export default function TodosApp() {
+  const todos = useSyncExternalStore(todosStore.subscribe, todosStore.getSnapshot);
+  return (
+    <>
+      <button onClick={() => todosStore.addTodo()}>Add todo</button>
+      <hr />
+      <ul>
+        {todos.map(todo => (
+          <li key={todo.id}>{todo.text}</li>
+        ))}
+      </ul>
+    </>
+  );
+}
+```
+
+```js todoStore.js
+// This is an example of a third-party store
+// that you might need to integrate with React.
+
+// If your app is fully built with React,
+// we recommend using React state instead.
+
+let nextId = 0;
+let todos = [{ id: nextId++, text: 'Todo #1' }];
+let listeners = [];
+
+export const todosStore = {
+  addTodo() {
+    todos = [...todos, { id: nextId++, text: 'Todo #' + nextId }]
+    emitChange();
+  },
+  subscribe(listener) {
+    listeners = [...listeners, listener];
+    return () => {
+      listeners = listeners.filter(l => l !== listener);
+    };
+  },
+  getSnapshot() {
+    return todos;
+  }
+};
+
+function emitChange() {
+  for (let listener of listeners) {
+    listener();
+  }
+}
+```
+
+</Sandpack>
+
+<Note>
+
+When possible, we recommend to use the built-in React state with [`useState`](/reference/react/useState) and [`useReducer`](/reference/react/useReducer) instead. The `useExternalSyncStore` API is mostly useful if you need to integrate with existing non-React code.
+
+</Note>
+
+---
+
+### Subscribing to a browser API {/*subscribing-to-a-browser-api*/}
+
+Another reason to add `useSyncExternalStore` is when you want to subscribe to some value exposed by the browser that changes over time. For example, suppose that you want your component to display whether the network connection is active. The browser exposes this information via a property called [`navigator.onLine`.](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/onLine) This value can change over time without React's knowledge, so you need to read it with `useSyncExternalStore`.
+
+```js
+import { useSyncExternalStore } from 'react';
+
+function ChatIndicator() {
+  const isOnline = useSyncExternalStore(subscribe, getSnapshot);
+  // ...
+}
+```
+
+To implement the `getSnapshot` function, read the current value from the browser API:
+
+```js
+function getSnapshot() {
+  return navigator.onLine;
+}
+```
+
+Next, you need to implement the `subscribe` function. For example, when `navigator.onLine` changes, the browser fires the [`online`](https://developer.mozilla.org/en-US/docs/Web/API/Window/online_event) and [`offline`](https://developer.mozilla.org/en-US/docs/Web/API/Window/offline_event) events on the `window` object. You need to subscribe the `callback` argument to the corresponding events, and then return a function that cleans up the subscriptions:
+
+```js
+function subscribe(callback) {
+  window.addEventListener('online', callback);
+  window.addEventListener('offline', callback);
+  return () => {
+    window.removeEventListener('online', callback);
+    window.removeEventListener('offline', callback);
+  };
+}
+```
+
+Now React knows how to read the value from the external `navigator.onLine` API and how to subscribe to its changes. Try to disconnect your device from the network and notice that the component re-renders in response:
+
+<Sandpack>
+
+```js
+import { useSyncExternalStore } from 'react';
+
+export default function ChatIndicator() {
+  const isOnline = useSyncExternalStore(subscribe, getSnapshot);
+  return <h1>{isOnline ? '✅ Online' : '❌ Disconnected'}</h1>;
+}
+
+function getSnapshot() {
+  return navigator.onLine;
+}
+
+function subscribe(callback) {
+  window.addEventListener('online', callback);
+  window.addEventListener('offline', callback);
+  return () => {
+    window.removeEventListener('online', callback);
+    window.removeEventListener('offline', callback);
+  };
+}
+```
+
+</Sandpack>
+
+---
+
+### Extracting the logic to a custom Hook {/*extracting-the-logic-to-a-custom-hook*/}
+
+Usually you won't write `useSyncExternalStore` directly in your components. Instead, you'll typically call it from your own custom Hook. This lets you use the same external store from different components.
+
+For example, this custom `useOnlineStatus` Hook tracks whether the network is online:
+
+```js {3,6}
+import { useSyncExternalStore } from 'react';
+
+export function useOnlineStatus() {
+  const isOnline = useSyncExternalStore(subscribe, getSnapshot);
+  return isOnline;
+}
+
+function getSnapshot() {
+  // ...
+}
+
+function subscribe(callback) {
+  // ...
+}
+```
+
+Now different components can call `useOnlineStatus` without repeating the underlying implementation:
+
+<Sandpack>
+
+```js
+import { useOnlineStatus } from './useOnlineStatus.js';
+
+function StatusBar() {
+  const isOnline = useOnlineStatus();
+  return <h1>{isOnline ? '✅ Online' : '❌ Disconnected'}</h1>;
+}
+
+function SaveButton() {
+  const isOnline = useOnlineStatus();
+
+  function handleSaveClick() {
+    console.log('✅ Progress saved');
+  }
+
+  return (
+    <button disabled={!isOnline} onClick={handleSaveClick}>
+      {isOnline ? 'Save progress' : 'Reconnecting...'}
+    </button>
+  );
+}
+
+export default function App() {
+  return (
+    <>
+      <SaveButton />
+      <StatusBar />
+    </>
+  );
+}
+```
+
+```js useOnlineStatus.js
+import { useSyncExternalStore } from 'react';
+
+export function useOnlineStatus() {
+  const isOnline = useSyncExternalStore(subscribe, getSnapshot);
+  return isOnline;
+}
+
+function getSnapshot() {
+  return navigator.onLine;
+}
+
+function subscribe(callback) {
+  window.addEventListener('online', callback);
+  window.addEventListener('offline', callback);
+  return () => {
+    window.removeEventListener('online', callback);
+    window.removeEventListener('offline', callback);
+  };
+}
+```
+
+</Sandpack>
+
+---
+
+### Adding support for server rendering {/*adding-support-for-server-rendering*/}
+
+If your React app uses [server rendering,](/reference/react-dom/server) your React components will also run outside the browser environment to generate the initial HTML. This creates a few challenges when connecting to an external store:
+
+- If you're connecting to a browser-only API, it won't work because it does not exist on the server.
+- If you're connecting to a third-party data store, you'll need its data to match between the server and client.
+
+To solve these issues, pass a `getServerSnapshot` function as the third argument to `useSyncExternalStore`:
+
+```js {4,12-14}
+import { useSyncExternalStore } from 'react';
+
+export function useOnlineStatus() {
+  const isOnline = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  return isOnline;
+}
+
+function getSnapshot() {
+  return navigator.onLine;
+}
+
+function getServerSnapshot() {
+  return true; // Always show "Online" for server-generated HTML
+}
+
+function subscribe(callback) {
+  // ...
+}
+```
+
+The `getServerSnapshot` function is similar to `getSnapshot`, but it runs only in two situations:
+
+- It runs on the server when generating the HTML.
+- It runs on the client during [hydration](/reference/react-dom/client/hydrateRoot), i.e. when React takes the server HTML and makes it interactive.
+
+This lets you provide the initial snapshot value which will be used before the app becomes interactive. If there is no meaningful initial value for the server rendering, you can [force the component to render only on the client.](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-server-only-content)
+
+<Note>
+
+Make sure that `getServerSnapshot` returns the same exact data on the initial client render as it returned on the server. For example, if `getServerSnapshot` returned some prepopulated store content on the server, you need to transfer this content to the client. One common way to do this is to emit a `<script>` tag that sets a global like `window.MY_STORE_DATA` during server rendering, and then read from that global on the client in `getServerSnapshot`. Your external store should provide instructions on how to do that.
+
+</Note>
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+
+### I'm getting an error: "The result of `getSnapshot` should be cached" {/*im-getting-an-error-the-result-of-getsnapshot-should-be-cached*/}
+
+If you get this error, it means your `getSnapshot` function returns a new object every time it's called, for example:
+
+```js {2-5}
+function getSnapshot() {
+  // 🔴 Do not return always different objects from getSnapshot
+  return {
+    todos: myStore.todos
+  };
+}
+```
+
+React will re-render the component if `getSnapshot` return value is different from the last time. This is why, if you always return a different value, you will enter an infinite loop and get this error.
+
+Your `getSnapshot` object should only return a different object if something has actually changed. If your store contains immutable data, you can return that data directly:
+
+```js {2-3}
+function getSnapshot() {
+  // ✅ You can return immutable data
+  return myStore.todos;
+}
+```
+
+If your store data is mutable, your `getSnapshot` function should return an immutable snapshot of it. This means it *does* need to create new objects, but it shouldn't do this for every single call. Instead, it should store the last calculated snapshot, and return the same snapshot as the last time if the data in the store has not changed. How you determine whether mutable data has changed depends on how your mutable store is implemented.
+
+---
+
+### My `subscribe` function gets called after every re-render {/*my-subscribe-function-gets-called-after-every-re-render*/}
+
+This `subscribe` function is defined *inside* a component so it is different on every re-render:
+
+```js {4-7}
+function ChatIndicator() {
+  const isOnline = useSyncExternalStore(subscribe, getSnapshot);
+  
+  // 🚩 Always a different function, so React will resubscribe on every re-render
+  function subscribe() {
+    // ...
+  }
+
+  // ...
+}
+```
+  
+React will resubscribe to your store if you pass a different `subscribe` function between re-renders. If this causes performance issues and you'd like to avoid resubscribing to the store, move the `subscribe` function outside:
+
+```js {6-9}
+function ChatIndicator() {
+  const isOnline = useSyncExternalStore(subscribe, getSnapshot);
+  // ...
+}
+
+// ✅ Always the same function, so React won't need to resubscribe
+function subscribe() {
+  // ...
+}
+```
+
+Alternatively, wrap `subscribe` into [`useCallback`](/reference/react/useCallback) to only resubscribe when some argument changes:
+
+```js {4-8}
+function ChatIndicator({ userId }) {
+  const isOnline = useSyncExternalStore(subscribe, getSnapshot);
+  
+  // ✅ Same function as long as userId doesn't change
+  const subscribe = useCallback(() => {
+    // ...
+  }, [userId]);
+
+  // ...
+}
+```
\ No newline at end of file
diff --git a/beta/src/content/reference/react/useTransition.md b/beta/src/content/reference/react/useTransition.md
new file mode 100644
index 000000000..a94e1f7c3
--- /dev/null
+++ b/beta/src/content/reference/react/useTransition.md
@@ -0,0 +1,1626 @@
+---
+title: useTransition
+---
+
+<Intro>
+
+`useTransition` is a React Hook that lets you update the state without blocking the UI.
+
+```js
+const [isPending, startTransition] = useTransition()
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `useTransition()` {/*usetransition*/}
+
+Call `useTransition` at the top level of your component to mark some state updates as transitions.
+
+```js
+import { useTransition } from 'react';
+
+function TabContainer() {
+  const [isPending, startTransition] = useTransition();
+  // ...
+}
+```
+
+[See more examples below.](#usage)
+
+#### Parameters {/*parameters*/}
+
+`useTransition` does not take any parameters.
+
+#### Returns {/*returns*/}
+
+`useTransition` returns an array with exactly two items:
+
+1. The `isPending` flag that tells you whether there is a pending transition.
+2. The [`startTransition` function](#starttransition) that lets you mark a state update as a transition.
+
+---
+
+### `startTransition` function {/*starttransition*/}
+
+The `startTransition` function returned by `useTransition` lets you mark a state update as a transition.
+
+```js {6,8}
+function TabContainer() {
+  const [isPending, startTransition] = useTransition();
+  const [tab, setTab] = useState('about');
+
+  function selectTab(nextTab) {
+    startTransition(() => {
+      setTab(nextTab);
+    });
+  }
+  // ...
+}
+```
+
+#### Parameters {/*starttransition-parameters*/}
+
+* `scope`: A function that updates some state by calling one or more [`set` functions.](/reference/react/useState#setstate) React immediately calls `scope` with no parameters and marks all state updates scheduled synchronously during the `scope` function call as transitions. They will be [non-blocking](#marking-a-state-update-as-a-non-blocking-transition) and [will not display unwanted loading indicators.](#preventing-unwanted-loading-indicators)
+
+#### Returns {/*starttransition-returns*/}
+
+`startTransition` does not return anything.
+
+#### Caveats {/*starttransition-caveats*/}
+
+* `useTransition` is a Hook, so it can only be called inside components or custom Hooks. If you need to start a transition somewhere else (for example, from a data library), call the standalone [`startTransition`](/reference/react/startTransition) instead.
+
+* You can wrap an update into a transition only if you have access to the `set` function of that state. If you want to start a transition in response to some prop or a custom Hook return value, try [`useDeferredValue`](/reference/react/useDeferredValue) instead.
+
+* The function you pass to `startTransition` must be synchronous. React immediately executes this function, marking all state updates that happen while it executes as transitions. If you try to perform more state updates later (for example, in a timeout), they won't be marked as transitions.
+
+* A state update marked as a transition will be interrupted by other state updates. For example, if you update a chart component inside a transition, but then start typing into an input while the chart is in the middle of a re-render, React will restart the rendering work on the chart component after handling the input state update.
+
+* Transition updates can't be used to control text inputs.
+
+* If there are multiple ongoing transitions, React currently batches them together. This is a limitation that will likely be removed in a future release.
+
+---
+
+## Usage {/*usage*/}
+
+### Marking a state update as a non-blocking transition {/*marking-a-state-update-as-a-non-blocking-transition*/}
+
+Call `useTransition` at the top level of your component to mark some state updates as non-blocking *transitions*.
+
+```js [[1, 4, "isPending"], [2, 4, "startTransition"]]
+import { useState, useTransition } from 'react';
+
+function TabContainer() {
+  const [isPending, startTransition] = useTransition();
+  // ...
+}
+```
+
+`useTransition` returns an array with exactly two items:
+
+1. The <CodeStep step={1}>`isPending` flag</CodeStep> that tells you whether there is a pending transition.
+2. The <CodeStep step={2}>`startTransition` function</CodeStep> that lets you mark a state update as a transition.
+
+You can then mark a state update as a transition like this:
+
+```js {6,8}
+function TabContainer() {
+  const [isPending, startTransition] = useTransition();
+  const [tab, setTab] = useState('about');
+
+  function selectTab(nextTab) {
+    startTransition(() => {
+      setTab(nextTab);
+    });
+  }
+  // ...
+}
+```
+
+Transitions let you keep the user interface updates responsive even on slow devices.
+
+With a transition, your UI stays responsive in the middle of a re-render. For example, if the user clicks a tab but then change their mind and click another tab, they can do that without waiting for the first re-render to finish.
+
+<Recipes titleText="The difference between useTransition and regular state updates" titleId="examples">
+
+#### Updating the current tab in a transition {/*updating-the-current-tab-in-a-transition*/}
+
+In this example, the "Posts" tab is **artificially slowed down** so that it takes at least a second to render.
+
+Click "Posts" and then immediately click "Contact". Notice that this interrupts the slow render of "Posts". The "Contact" tab shows immediately. Because this state update is marked as a transition, a slow re-render did not freeze the user interface.
+
+<Sandpack>
+
+```js
+import { useState, useTransition } from 'react';
+import TabButton from './TabButton.js';
+import AboutTab from './AboutTab.js';
+import PostsTab from './PostsTab.js';
+import ContactTab from './ContactTab.js';
+
+export default function TabContainer() {
+  const [isPending, startTransition] = useTransition();
+  const [tab, setTab] = useState('about');
+
+  function selectTab(nextTab) {
+    startTransition(() => {
+      setTab(nextTab);      
+    });
+  }
+
+  return (
+    <>
+      <TabButton
+        isActive={tab === 'about'}
+        onClick={() => selectTab('about')}
+      >
+        About
+      </TabButton>
+      <TabButton
+        isActive={tab === 'posts'}
+        onClick={() => selectTab('posts')}
+      >
+        Posts (slow)
+      </TabButton>
+      <TabButton
+        isActive={tab === 'contact'}
+        onClick={() => selectTab('contact')}
+      >
+        Contact
+      </TabButton>
+      <hr />
+      {tab === 'about' && <AboutTab />}
+      {tab === 'posts' && <PostsTab />}
+      {tab === 'contact' && <ContactTab />}
+    </>
+  );
+}
+```
+
+```js TabButton.js
+import { useTransition } from 'react';
+
+export default function TabButton({ children, isActive, onClick }) {
+  if (isActive) {
+    return <b>{children}</b>
+  }
+  return (
+    <button onClick={() => {
+      onClick();
+    }}>
+      {children}
+    </button>
+  )
+}
+
+```
+
+```js AboutTab.js
+export default function AboutTab() {
+  return (
+    <p>Welcome to my profile!</p>
+  );
+}
+```
+
+```js PostsTab.js
+import { memo } from 'react';
+
+const PostsTab = memo(function PostsTab() {
+  // Log once. The actual slowdown is inside SlowPost.
+  console.log('[ARTIFICIALLY SLOW] Rendering 500 <SlowPost />');
+
+  let items = [];
+  for (let i = 0; i < 500; i++) {
+    items.push(<SlowPost key={i} index={i} />);
+  }
+  return (
+    <ul className="items">
+      {items}
+    </ul>
+  );
+});
+
+function SlowPost({ index }) {
+  let startTime = performance.now();
+  while (performance.now() - startTime < 1) {
+    // Do nothing for 1 ms per item to emulate extremely slow code
+  }
+
+  return (
+    <li className="item">
+      Post #{index + 1}
+    </li>
+  );
+}
+
+export default PostsTab;
+```
+
+```js ContactTab.js
+export default function ContactTab() {
+  return (
+    <>
+      <p>
+        You can find me online here:
+      </p>
+      <ul>
+        <li>admin@mysite.com</li>
+        <li>+123456789</li>
+      </ul>
+    </>
+  );
+}
+```
+
+```css
+button { margin-right: 10px }
+b { display: inline-block; margin-right: 10px; }
+```
+
+</Sandpack>
+
+<Solution />
+
+#### Updating the current tab without a transition {/*updating-the-current-tab-without-a-transition*/}
+
+In this example, the "Posts" tab is also **artificially slowed down** so that it takes at least a second to render. Unlike in the previous example, this state update is **not a transition.**
+
+Click "Posts" and then immediately click "Contact". Notice that the app freezes while rendering the slowed down tab, and the UI becomes unresponsive. This state update is not a transition, so a slow re-render freezed the user interface.
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+import TabButton from './TabButton.js';
+import AboutTab from './AboutTab.js';
+import PostsTab from './PostsTab.js';
+import ContactTab from './ContactTab.js';
+
+export default function TabContainer() {
+  const [tab, setTab] = useState('about');
+
+  function selectTab(nextTab) {
+    setTab(nextTab);
+  }
+
+  return (
+    <>
+      <TabButton
+        isActive={tab === 'about'}
+        onClick={() => selectTab('about')}
+      >
+        About
+      </TabButton>
+      <TabButton
+        isActive={tab === 'posts'}
+        onClick={() => selectTab('posts')}
+      >
+        Posts (slow)
+      </TabButton>
+      <TabButton
+        isActive={tab === 'contact'}
+        onClick={() => selectTab('contact')}
+      >
+        Contact
+      </TabButton>
+      <hr />
+      {tab === 'about' && <AboutTab />}
+      {tab === 'posts' && <PostsTab />}
+      {tab === 'contact' && <ContactTab />}
+    </>
+  );
+}
+```
+
+```js TabButton.js
+import { useTransition } from 'react';
+
+export default function TabButton({ children, isActive, onClick }) {
+  if (isActive) {
+    return <b>{children}</b>
+  }
+  return (
+    <button onClick={() => {
+      onClick();
+    }}>
+      {children}
+    </button>
+  )
+}
+
+```
+
+```js AboutTab.js
+export default function AboutTab() {
+  return (
+    <p>Welcome to my profile!</p>
+  );
+}
+```
+
+```js PostsTab.js
+import { memo } from 'react';
+
+const PostsTab = memo(function PostsTab() {
+  // Log once. The actual slowdown is inside SlowPost.
+  console.log('[ARTIFICIALLY SLOW] Rendering 500 <SlowPost />');
+
+  let items = [];
+  for (let i = 0; i < 500; i++) {
+    items.push(<SlowPost key={i} index={i} />);
+  }
+  return (
+    <ul className="items">
+      {items}
+    </ul>
+  );
+});
+
+function SlowPost({ index }) {
+  let startTime = performance.now();
+  while (performance.now() - startTime < 1) {
+    // Do nothing for 1 ms per item to emulate extremely slow code
+  }
+
+  return (
+    <li className="item">
+      Post #{index + 1}
+    </li>
+  );
+}
+
+export default PostsTab;
+```
+
+```js ContactTab.js
+export default function ContactTab() {
+  return (
+    <>
+      <p>
+        You can find me online here:
+      </p>
+      <ul>
+        <li>admin@mysite.com</li>
+        <li>+123456789</li>
+      </ul>
+    </>
+  );
+}
+```
+
+```css
+button { margin-right: 10px }
+b { display: inline-block; margin-right: 10px; }
+```
+
+</Sandpack>
+
+<Solution />
+
+</Recipes>
+
+---
+
+### Updating the parent component in a transition {/*updating-the-parent-component-in-a-transition*/}
+
+The `useTransition` call does not have to be in the same component whose state you're updating. You can also move it into a child component. For example, this `TabButton` component wraps its `onClick` logic in a transition:
+
+```js {8-10}
+export default function TabButton({ children, isActive, onClick }) {
+  const [isPending, startTransition] = useTransition();
+  if (isActive) {
+    return <b>{children}</b>
+  }
+  return (
+    <button onClick={() => {
+      startTransition(() => {
+        onClick();
+      });
+    }}>
+      {children}
+    </button>
+  );
+}
+```
+
+Because the parent component updates its state inside the `onClick` event handler, that state update gets marked as a transition. This is why, like in the earlier example, you can click on "Posts" and then immediately click "Contact". Updating the selected tab is marked as a transition, so it does not block further user interactions.
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+import TabButton from './TabButton.js';
+import AboutTab from './AboutTab.js';
+import PostsTab from './PostsTab.js';
+import ContactTab from './ContactTab.js';
+
+export default function TabContainer() {
+  const [tab, setTab] = useState('about');
+  return (
+    <>
+      <TabButton
+        isActive={tab === 'about'}
+        onClick={() => setTab('about')}
+      >
+        About
+      </TabButton>
+      <TabButton
+        isActive={tab === 'posts'}
+        onClick={() => setTab('posts')}
+      >
+        Posts (slow)
+      </TabButton>
+      <TabButton
+        isActive={tab === 'contact'}
+        onClick={() => setTab('contact')}
+      >
+        Contact
+      </TabButton>
+      <hr />
+      {tab === 'about' && <AboutTab />}
+      {tab === 'posts' && <PostsTab />}
+      {tab === 'contact' && <ContactTab />}
+    </>
+  );
+}
+```
+
+```js TabButton.js active
+import { useTransition } from 'react';
+
+export default function TabButton({ children, isActive, onClick }) {
+  const [isPending, startTransition] = useTransition();
+  if (isActive) {
+    return <b>{children}</b>
+  }
+  return (
+    <button onClick={() => {
+      startTransition(() => {
+        onClick();
+      });
+    }}>
+      {children}
+    </button>
+  );
+}
+```
+
+```js AboutTab.js
+export default function AboutTab() {
+  return (
+    <p>Welcome to my profile!</p>
+  );
+}
+```
+
+```js PostsTab.js
+import { memo } from 'react';
+
+const PostsTab = memo(function PostsTab() {
+  // Log once. The actual slowdown is inside SlowPost.
+  console.log('[ARTIFICIALLY SLOW] Rendering 500 <SlowPost />');
+
+  let items = [];
+  for (let i = 0; i < 500; i++) {
+    items.push(<SlowPost key={i} index={i} />);
+  }
+  return (
+    <ul className="items">
+      {items}
+    </ul>
+  );
+});
+
+function SlowPost({ index }) {
+  let startTime = performance.now();
+  while (performance.now() - startTime < 1) {
+    // Do nothing for 1 ms per item to emulate extremely slow code
+  }
+
+  return (
+    <li className="item">
+      Post #{index + 1}
+    </li>
+  );
+}
+
+export default PostsTab;
+```
+
+```js ContactTab.js
+export default function ContactTab() {
+  return (
+    <>
+      <p>
+        You can find me online here:
+      </p>
+      <ul>
+        <li>admin@mysite.com</li>
+        <li>+123456789</li>
+      </ul>
+    </>
+  );
+}
+```
+
+```css
+button { margin-right: 10px }
+b { display: inline-block; margin-right: 10px; }
+```
+
+</Sandpack>
+
+---
+
+### Displaying a pending visual state during the transition {/*displaying-a-pending-visual-state-during-the-transition*/}
+
+You can use the `isPending` boolean value returned by `useTransition` to indicate to the user that a transition is in progress. For example, the tab button can have a special "pending" visual state:
+
+```js {4-6}
+function TabButton({ children, isActive, onClick }) {
+  const [isPending, startTransition] = useTransition();
+  // ...
+  if (isPending) {
+    return <b className="pending">{children}</b>;
+  }
+  // ...
+```
+
+Notice how clicking "Posts" now feels more responsive because the tab button itself updates right away:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+import TabButton from './TabButton.js';
+import AboutTab from './AboutTab.js';
+import PostsTab from './PostsTab.js';
+import ContactTab from './ContactTab.js';
+
+export default function TabContainer() {
+  const [tab, setTab] = useState('about');
+  return (
+    <>
+      <TabButton
+        isActive={tab === 'about'}
+        onClick={() => setTab('about')}
+      >
+        About
+      </TabButton>
+      <TabButton
+        isActive={tab === 'posts'}
+        onClick={() => setTab('posts')}
+      >
+        Posts (slow)
+      </TabButton>
+      <TabButton
+        isActive={tab === 'contact'}
+        onClick={() => setTab('contact')}
+      >
+        Contact
+      </TabButton>
+      <hr />
+      {tab === 'about' && <AboutTab />}
+      {tab === 'posts' && <PostsTab />}
+      {tab === 'contact' && <ContactTab />}
+    </>
+  );
+}
+```
+
+```js TabButton.js active
+import { useTransition } from 'react';
+
+export default function TabButton({ children, isActive, onClick }) {
+  const [isPending, startTransition] = useTransition();
+  if (isActive) {
+    return <b>{children}</b>
+  }
+  if (isPending) {
+    return <b className="pending">{children}</b>;
+  }
+  return (
+    <button onClick={() => {
+      startTransition(() => {
+        onClick();
+      });
+    }}>
+      {children}
+    </button>
+  );
+}
+```
+
+```js AboutTab.js
+export default function AboutTab() {
+  return (
+    <p>Welcome to my profile!</p>
+  );
+}
+```
+
+```js PostsTab.js
+import { memo } from 'react';
+
+const PostsTab = memo(function PostsTab() {
+  // Log once. The actual slowdown is inside SlowPost.
+  console.log('[ARTIFICIALLY SLOW] Rendering 500 <SlowPost />');
+
+  let items = [];
+  for (let i = 0; i < 500; i++) {
+    items.push(<SlowPost key={i} index={i} />);
+  }
+  return (
+    <ul className="items">
+      {items}
+    </ul>
+  );
+});
+
+function SlowPost({ index }) {
+  let startTime = performance.now();
+  while (performance.now() - startTime < 1) {
+    // Do nothing for 1 ms per item to emulate extremely slow code
+  }
+
+  return (
+    <li className="item">
+      Post #{index + 1}
+    </li>
+  );
+}
+
+export default PostsTab;
+```
+
+```js ContactTab.js
+export default function ContactTab() {
+  return (
+    <>
+      <p>
+        You can find me online here:
+      </p>
+      <ul>
+        <li>admin@mysite.com</li>
+        <li>+123456789</li>
+      </ul>
+    </>
+  );
+}
+```
+
+```css
+button { margin-right: 10px }
+b { display: inline-block; margin-right: 10px; }
+.pending { color: #777; }
+```
+
+</Sandpack>
+
+---
+
+### Preventing unwanted loading indicators {/*preventing-unwanted-loading-indicators*/}
+
+In this example, the `PostsTab` component fetches some data using a [Suspense-enabled](/reference/react/Suspense) data source. When you click the "Posts" tab, the `PostsTab` component *suspends*, causing the closest loading fallback to be displayed:
+
+<Sandpack>
+
+```js
+import { Suspense, useState } from 'react';
+import TabButton from './TabButton.js';
+import AboutTab from './AboutTab.js';
+import PostsTab from './PostsTab.js';
+import ContactTab from './ContactTab.js';
+
+export default function TabContainer() {
+  const [tab, setTab] = useState('about');
+  return (
+    <Suspense fallback={<h1>🌀 Loading...</h1>}>
+      <TabButton
+        isActive={tab === 'about'}
+        onClick={() => setTab('about')}
+      >
+        About
+      </TabButton>
+      <TabButton
+        isActive={tab === 'posts'}
+        onClick={() => setTab('posts')}
+      >
+        Posts
+      </TabButton>
+      <TabButton
+        isActive={tab === 'contact'}
+        onClick={() => setTab('contact')}
+      >
+        Contact
+      </TabButton>
+      <hr />
+      {tab === 'about' && <AboutTab />}
+      {tab === 'posts' && <PostsTab />}
+      {tab === 'contact' && <ContactTab />}
+    </Suspense>
+  );
+}
+```
+
+```js TabButton.js
+export default function TabButton({ children, isActive, onClick }) {
+  if (isActive) {
+    return <b>{children}</b>
+  }
+  return (
+    <button onClick={() => {
+      onClick();
+    }}>
+      {children}
+    </button>
+  );
+}
+```
+
+```js AboutTab.js hidden
+export default function AboutTab() {
+  return (
+    <p>Welcome to my profile!</p>
+  );
+}
+```
+
+```js PostsTab.js hidden
+import { fetchData } from './data.js';
+
+// Note: this component is written using an experimental API
+// that's not yet available in stable versions of React.
+
+// For a realistic example you can follow today, try a framework
+// that's integrated with Suspense, like Relay or Next.js.
+
+function PostsTab() {
+  const posts = use(fetchData('/posts'));
+  return (
+    <ul className="items">
+      {posts.map(post =>
+        <Post key={post.id} title={post.title} />
+      )}
+    </ul>
+  );
+}
+
+function Post({ title }) {
+  return (
+    <li className="item">
+      {title}
+    </li>
+  );
+}
+
+export default PostsTab;
+
+// This is a workaround for a bug to get the demo running.
+// TODO: replace with real implementation when the bug is fixed.
+function use(promise) {
+  if (promise.status === 'fulfilled') {
+    return promise.value;
+  } else if (promise.status === 'rejected') {
+    throw promise.reason;
+  } else if (promise.status === 'pending') {
+    throw promise;
+  } else {
+    promise.status = 'pending';
+    promise.then(
+      result => {
+        promise.status = 'fulfilled';
+        promise.value = result;
+      },
+      reason => {
+        promise.status = 'rejected';
+        promise.reason = reason;
+      },      
+    );
+    throw promise;
+  }
+}
+```
+
+```js ContactTab.js hidden
+export default function ContactTab() {
+  return (
+    <>
+      <p>
+        You can find me online here:
+      </p>
+      <ul>
+        <li>admin@mysite.com</li>
+        <li>+123456789</li>
+      </ul>
+    </>
+  );
+}
+```
+
+
+```js data.js hidden
+// Note: the way you would do data fetching depends on
+// the framework that you use together with Suspense.
+// Normally, the caching logic would be inside a framework.
+
+let cache = new Map();
+
+export function fetchData(url) {
+  if (!cache.has(url)) {
+    cache.set(url, getData(url));
+  }
+  return cache.get(url);
+}
+
+async function getData(url) {
+  if (url.startsWith('/posts')) {
+    return await getPosts();
+  } else {
+    throw Error('Not implemented');
+  }
+}
+
+async function getPosts() {
+  // Add a fake delay to make waiting noticeable.
+  await new Promise(resolve => {
+    setTimeout(resolve, 1000);
+  });
+  let posts = [];
+  for (let i = 0; i < 500; i++) {
+    posts.push({
+      id: i,
+      title: 'Post #' + (i + 1)
+    });
+  }
+  return posts;
+}
+```
+
+```css
+button { margin-right: 10px }
+b { display: inline-block; margin-right: 10px; }
+.pending { color: #777; }
+```
+
+</Sandpack>
+
+Hiding the entire tab container to show a loading indicator leads to a jarring user experience. If you add `useTransition` to `TabButton`, you can instead indicate display the pending state in the tab button instead.
+
+Notice that clicking "Posts" no longer replaces the entire tab container with a spinner:
+
+<Sandpack>
+
+```js
+import { Suspense, useState } from 'react';
+import TabButton from './TabButton.js';
+import AboutTab from './AboutTab.js';
+import PostsTab from './PostsTab.js';
+import ContactTab from './ContactTab.js';
+
+export default function TabContainer() {
+  const [tab, setTab] = useState('about');
+  return (
+    <Suspense fallback={<h1>🌀 Loading...</h1>}>
+      <TabButton
+        isActive={tab === 'about'}
+        onClick={() => setTab('about')}
+      >
+        About
+      </TabButton>
+      <TabButton
+        isActive={tab === 'posts'}
+        onClick={() => setTab('posts')}
+      >
+        Posts
+      </TabButton>
+      <TabButton
+        isActive={tab === 'contact'}
+        onClick={() => setTab('contact')}
+      >
+        Contact
+      </TabButton>
+      <hr />
+      {tab === 'about' && <AboutTab />}
+      {tab === 'posts' && <PostsTab />}
+      {tab === 'contact' && <ContactTab />}
+    </Suspense>
+  );
+}
+```
+
+```js TabButton.js active
+import { useTransition } from 'react';
+
+export default function TabButton({ children, isActive, onClick }) {
+  const [isPending, startTransition] = useTransition();
+  if (isActive) {
+    return <b>{children}</b>
+  }
+  if (isPending) {
+    return <b className="pending">{children}</b>;
+  }
+  return (
+    <button onClick={() => {
+      startTransition(() => {
+        onClick();
+      });
+    }}>
+      {children}
+    </button>
+  );
+}
+```
+
+```js AboutTab.js hidden
+export default function AboutTab() {
+  return (
+    <p>Welcome to my profile!</p>
+  );
+}
+```
+
+```js PostsTab.js hidden
+import { fetchData } from './data.js';
+
+// Note: this component is written using an experimental API
+// that's not yet available in stable versions of React.
+
+// For a realistic example you can follow today, try a framework
+// that's integrated with Suspense, like Relay or Next.js.
+
+function PostsTab() {
+  const posts = use(fetchData('/posts'));
+  return (
+    <ul className="items">
+      {posts.map(post =>
+        <Post key={post.id} title={post.title} />
+      )}
+    </ul>
+  );
+}
+
+function Post({ title }) {
+  return (
+    <li className="item">
+      {title}
+    </li>
+  );
+}
+
+export default PostsTab;
+
+// This is a workaround for a bug to get the demo running.
+// TODO: replace with real implementation when the bug is fixed.
+function use(promise) {
+  if (promise.status === 'fulfilled') {
+    return promise.value;
+  } else if (promise.status === 'rejected') {
+    throw promise.reason;
+  } else if (promise.status === 'pending') {
+    throw promise;
+  } else {
+    promise.status = 'pending';
+    promise.then(
+      result => {
+        promise.status = 'fulfilled';
+        promise.value = result;
+      },
+      reason => {
+        promise.status = 'rejected';
+        promise.reason = reason;
+      },      
+    );
+    throw promise;
+  }
+}
+```
+
+```js ContactTab.js hidden
+export default function ContactTab() {
+  return (
+    <>
+      <p>
+        You can find me online here:
+      </p>
+      <ul>
+        <li>admin@mysite.com</li>
+        <li>+123456789</li>
+      </ul>
+    </>
+  );
+}
+```
+
+
+```js data.js hidden
+// Note: the way you would do data fetching depends on
+// the framework that you use together with Suspense.
+// Normally, the caching logic would be inside a framework.
+
+let cache = new Map();
+
+export function fetchData(url) {
+  if (!cache.has(url)) {
+    cache.set(url, getData(url));
+  }
+  return cache.get(url);
+}
+
+async function getData(url) {
+  if (url.startsWith('/posts')) {
+    return await getPosts();
+  } else {
+    throw Error('Not implemented');
+  }
+}
+
+async function getPosts() {
+  // Add a fake delay to make waiting noticeable.
+  await new Promise(resolve => {
+    setTimeout(resolve, 1000);
+  });
+  let posts = [];
+  for (let i = 0; i < 500; i++) {
+    posts.push({
+      id: i,
+      title: 'Post #' + (i + 1)
+    });
+  }
+  return posts;
+}
+```
+
+```css
+button { margin-right: 10px }
+b { display: inline-block; margin-right: 10px; }
+.pending { color: #777; }
+```
+
+</Sandpack>
+
+[Read more about using transitions with Suspense.](/reference/react/Suspense#preventing-already-revealed-content-from-hiding)
+
+<Note>
+
+Transitions will only "wait" long enough to avoid hiding *already revealed* content (like the tab container). For example, if the Posts tab had a [nested `<Suspense>` boundary,](/reference/react/Suspense#revealing-nested-content-as-it-loads) the transition would not "wait" for it.
+
+</Note>
+
+---
+
+### Building a Suspense-enabled router {/*building-a-suspense-enabled-router*/}
+
+If you're building your own React framework or a router, we recommend to mark page navigations as transitions.
+
+```js {3,6,8}
+function Router() {
+  const [page, setPage] = useState('/');
+  const [isPending, startTransition] = useTransition();
+
+  function navigate(url) {
+    startTransition(() => {
+      setPage(url);
+    });
+  }
+  // ...
+```
+
+This is recommended for two reasons:
+
+- [Transitions are interruptible,](#marking-a-state-update-as-a-non-blocking-transition) which lets the user click away without waiting for the re-render to complete.
+- [Transitions prevent unwanted loading indicators,](#preventing-unwanted-loading-indicators) which lets the user avoid jarring jumps on navigation.
+
+Here is a tiny simplified router example using transitions for navigations.
+
+<Sandpack>
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "experimental",
+    "react-dom": "experimental"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+```js App.js
+import { Suspense, useState, useTransition } from 'react';
+import IndexPage from './IndexPage.js';
+import ArtistPage from './ArtistPage.js';
+import Layout from './Layout.js';
+
+export default function App() {
+  return (
+    <Suspense fallback={<BigSpinner />}>
+      <Router />
+    </Suspense>
+  );
+}
+
+function Router() {
+  const [page, setPage] = useState('/');
+  const [isPending, startTransition] = useTransition();
+
+  function navigate(url) {
+    startTransition(() => {
+      setPage(url);
+    });
+  }
+
+  let content;
+  if (page === '/') {
+    content = (
+      <IndexPage navigate={navigate} />
+    );
+  } else if (page === '/the-beatles') {
+    content = (
+      <ArtistPage
+        artist={{
+          id: 'the-beatles',
+          name: 'The Beatles',
+        }}
+      />
+    );
+  }
+  return (
+    <Layout isPending={isPending}>
+      {content}
+    </Layout>
+  );
+}
+
+function BigSpinner() {
+  return <h2>🌀 Loading...</h2>;
+}
+```
+
+```js Layout.js
+export default function Layout({ children, isPending }) {
+  return (
+    <div className="layout">
+      <section className="header" style={{
+        opacity: isPending ? 0.7 : 1
+      }}>
+        Music Browser
+      </section>
+      <main>
+        {children}
+      </main>
+    </div>
+  );
+}
+```
+
+```js IndexPage.js
+export default function IndexPage({ navigate }) {
+  return (
+    <button onClick={() => navigate('/the-beatles')}>
+      Open The Beatles artist page
+    </button>
+  );
+}
+```
+
+```js ArtistPage.js
+import { Suspense } from 'react';
+import Albums from './Albums.js';
+import Biography from './Biography.js';
+import Panel from './Panel.js';
+
+export default function ArtistPage({ artist }) {
+  return (
+    <>
+      <h1>{artist.name}</h1>
+      <Biography artistId={artist.id} />
+      <Suspense fallback={<AlbumsGlimmer />}>
+        <Panel>
+          <Albums artistId={artist.id} />
+        </Panel>
+      </Suspense>
+    </>
+  );
+}
+
+function AlbumsGlimmer() {
+  return (
+    <div className="glimmer-panel">
+      <div className="glimmer-line" />
+      <div className="glimmer-line" />
+      <div className="glimmer-line" />
+    </div>
+  );
+}
+```
+
+```js Albums.js hidden
+import { fetchData } from './data.js';
+
+// Note: this component is written using an experimental API
+// that's not yet available in stable versions of React.
+
+// For a realistic example you can follow today, try a framework
+// that's integrated with Suspense, like Relay or Next.js.
+
+export default function Albums({ artistId }) {
+  const albums = use(fetchData(`/${artistId}/albums`));
+  return (
+    <ul>
+      {albums.map(album => (
+        <li key={album.id}>
+          {album.title} ({album.year})
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+// This is a workaround for a bug to get the demo running.
+// TODO: replace with real implementation when the bug is fixed.
+function use(promise) {
+  if (promise.status === 'fulfilled') {
+    return promise.value;
+  } else if (promise.status === 'rejected') {
+    throw promise.reason;
+  } else if (promise.status === 'pending') {
+    throw promise;
+  } else {
+    promise.status = 'pending';
+    promise.then(
+      result => {
+        promise.status = 'fulfilled';
+        promise.value = result;
+      },
+      reason => {
+        promise.status = 'rejected';
+        promise.reason = reason;
+      },      
+    );
+    throw promise;
+  }
+}
+```
+
+```js Biography.js hidden
+import { fetchData } from './data.js';
+
+// Note: this component is written using an experimental API
+// that's not yet available in stable versions of React.
+
+// For a realistic example you can follow today, try a framework
+// that's integrated with Suspense, like Relay or Next.js.
+
+export default function Biography({ artistId }) {
+  const bio = use(fetchData(`/${artistId}/bio`));
+  return (
+    <section>
+      <p className="bio">{bio}</p>
+    </section>
+  );
+}
+
+// This is a workaround for a bug to get the demo running.
+// TODO: replace with real implementation when the bug is fixed.
+function use(promise) {
+  if (promise.status === 'fulfilled') {
+    return promise.value;
+  } else if (promise.status === 'rejected') {
+    throw promise.reason;
+  } else if (promise.status === 'pending') {
+    throw promise;
+  } else {
+    promise.status = 'pending';
+    promise.then(
+      result => {
+        promise.status = 'fulfilled';
+        promise.value = result;
+      },
+      reason => {
+        promise.status = 'rejected';
+        promise.reason = reason;
+      },      
+    );
+    throw promise;
+  }
+}
+```
+
+```js Panel.js hidden
+export default function Panel({ children }) {
+  return (
+    <section className="panel">
+      {children}
+    </section>
+  );
+}
+```
+
+```js data.js hidden
+// Note: the way you would do data fetching depends on
+// the framework that you use together with Suspense.
+// Normally, the caching logic would be inside a framework.
+
+let cache = new Map();
+
+export function fetchData(url) {
+  if (!cache.has(url)) {
+    cache.set(url, getData(url));
+  }
+  return cache.get(url);
+}
+
+async function getData(url) {
+  if (url === '/the-beatles/albums') {
+    return await getAlbums();
+  } else if (url === '/the-beatles/bio') {
+    return await getBio();
+  } else {
+    throw Error('Not implemented');
+  }
+}
+
+async function getBio() {
+  // Add a fake delay to make waiting noticeable.
+  await new Promise(resolve => {
+    setTimeout(resolve, 500);
+  });
+
+  return `The Beatles were an English rock band, 
+    formed in Liverpool in 1960, that comprised 
+    John Lennon, Paul McCartney, George Harrison 
+    and Ringo Starr.`;
+}
+
+async function getAlbums() {
+  // Add a fake delay to make waiting noticeable.
+  await new Promise(resolve => {
+    setTimeout(resolve, 3000);
+  });
+
+  return [{
+    id: 13,
+    title: 'Let It Be',
+    year: 1970
+  }, {
+    id: 12,
+    title: 'Abbey Road',
+    year: 1969
+  }, {
+    id: 11,
+    title: 'Yellow Submarine',
+    year: 1969
+  }, {
+    id: 10,
+    title: 'The Beatles',
+    year: 1968
+  }, {
+    id: 9,
+    title: 'Magical Mystery Tour',
+    year: 1967
+  }, {
+    id: 8,
+    title: 'Sgt. Pepper\'s Lonely Hearts Club Band',
+    year: 1967
+  }, {
+    id: 7,
+    title: 'Revolver',
+    year: 1966
+  }, {
+    id: 6,
+    title: 'Rubber Soul',
+    year: 1965
+  }, {
+    id: 5,
+    title: 'Help!',
+    year: 1965
+  }, {
+    id: 4,
+    title: 'Beatles For Sale',
+    year: 1964
+  }, {
+    id: 3,
+    title: 'A Hard Day\'s Night',
+    year: 1964
+  }, {
+    id: 2,
+    title: 'With The Beatles',
+    year: 1963
+  }, {
+    id: 1,
+    title: 'Please Please Me',
+    year: 1963
+  }];
+}
+```
+
+```css
+main {
+  min-height: 200px;
+  padding: 10px;
+}
+
+.layout {
+  border: 1px solid black;
+}
+
+.header {
+  background: #222;
+  padding: 10px;
+  text-align: center;
+  color: white;
+}
+
+.bio { font-style: italic; }
+
+.panel {
+  border: 1px solid #aaa;
+  border-radius: 6px;
+  margin-top: 20px;
+  padding: 10px;
+}
+
+.glimmer-panel {
+  border: 1px dashed #aaa;
+  background: linear-gradient(90deg, rgba(221,221,221,1) 0%, rgba(255,255,255,1) 100%);
+  border-radius: 6px;
+  margin-top: 20px;
+  padding: 10px;
+}
+
+.glimmer-line {
+  display: block;
+  width: 60%;
+  height: 20px;
+  margin: 10px;
+  border-radius: 4px;
+  background: #f0f0f0;
+}
+```
+
+</Sandpack>
+
+<Note>
+
+[Suspense-enabled](/reference/react/Suspense) routers are expected to wrap the navigation updates into transitions by default.
+
+</Note>
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+
+### Updating an input in a transition doesn't work {/*updating-an-input-in-a-transition-doesnt-work*/}
+
+You can't use a transition for a state variable that controls an input:
+
+```js {4,10}
+const [text, setText] = useState('');
+// ...
+function handleChange(e) {
+  // ❌ Can't use transitions for controlled input state
+  startTransition(() => {
+    setText(e.target.value);
+  });
+}
+// ...
+return <input value={text} onChange={handleChange} />;
+```
+
+This is because transitions are non-blocking, but updating an input in response to the change event should happen synchronously. If you want to run a transition in response to typing, you have two options:
+
+1. You can declare two separate state variables: one for the input state (which always updates synchronously), and one that you will update in a transition. This lets you control the input using the synchronous state, and pass the transition state variable (which will "lag behind" the input) to the rest of your rendering logic.
+2. Alternatively, you can have one state variable, and add [`useDeferredValue`](/reference/react/useDeferredValue) which will "lag behind" the real value. It will trigger non-blocking re-renders to "catch up" with the new value automatically.
+
+---
+
+### React doesn't treat my state update as a transition {/*react-doesnt-treat-my-state-update-as-a-transition*/}
+
+When you wrap a state update in a transition, make sure that it happens *during* the `startTransition` call:
+
+```js
+startTransition(() => {
+  // ✅ Setting state *during* startTransition call
+  setPage('/about');
+});
+```
+
+The function you pass to `startTransition` must be synchronous.
+
+You can't mark an update as a transition like this:
+
+```js
+startTransition(() => {
+  // ❌ Setting state *after* startTransition call
+  setTimeout(() => {
+    setPage('/about');
+  }, 1000);
+});
+```
+
+Instead, you could do this:
+
+```js
+setTimeout(() => {
+  startTransition(() => {
+    // ✅ Setting state *during* startTransition call
+    setPage('/about');
+  });
+}, 1000);
+```
+
+Similarly, you can't mark an update as a transition like this:
+
+```js
+startTransition(async () => {
+  await someAsyncFunction();
+  // ❌ Setting state *after* startTransition call
+  setPage('/about');
+});
+```
+
+However, this works instead:
+
+```js
+await someAsyncFunction();
+startTransition(() => {
+  // ✅ Setting state *during* startTransition call
+  setPage('/about');
+});
+```
+
+---
+
+### I want to call `useTransition` from outside a component {/*i-want-to-call-usetransition-from-outside-a-component*/}
+
+You can't call `useTransition` outside a component because it's a Hook. In this case, use the standalone [`startTransition`](/reference/react/startTransition) method instead. It works the same way, but it doesn't provide the `isPending` indicator.
+
+---
+
+### The function I pass to `startTransition` executes immediately {/*the-function-i-pass-to-starttransition-executes-immediately*/}
+
+If you run this code, it will print 1, 2, 3:
+
+```js {1,3,6}
+console.log(1);
+startTransition(() => {
+  console.log(2);
+  setPage('/about');
+});
+console.log(3);
+```
+
+**It is expected to print 1, 2, 3.** The function you pass to `startTransition` does not get delayed. Unlike with the browser `setTimeout`, it does not run the callback later. React executes your function immediately, but any state updates scheduled *while it is running* will get marked as transitions. You can imagine that it works like this:
+
+```js
+// A simplified version of how React works
+
+let isInsideTransition = false;
+
+function startTransition(scope) {
+  isInsideTransition = true;
+  scope();
+  isInsideTransition = false;
+}
+
+function setState() {
+  if (isInsideTransition) {
+    // ... schedule a transition state update ...
+  } else {
+    // ... schedule an urgent state update ...
+  }
+}
+```
diff --git a/beta/src/hooks/useActiveSection.ts b/beta/src/hooks/useActiveSection.ts
new file mode 100644
index 000000000..bf7f4cf2f
--- /dev/null
+++ b/beta/src/hooks/useActiveSection.ts
@@ -0,0 +1,16 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {useRouter} from 'next/router';
+
+export function useActiveSection(): 'learn' | 'reference' | 'home' {
+  const {asPath} = useRouter();
+  if (asPath.startsWith('/reference')) {
+    return 'reference';
+  } else if (asPath.startsWith('/learn')) {
+    return 'learn';
+  } else {
+    return 'home';
+  }
+}
diff --git a/beta/src/hooks/usePathWithoutQuerystring.ts b/beta/src/hooks/usePathWithoutQuerystring.ts
new file mode 100644
index 000000000..156f4cddb
--- /dev/null
+++ b/beta/src/hooks/usePathWithoutQuerystring.ts
@@ -0,0 +1,16 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {useRouter} from 'next/router';
+
+export function useActiveSection(): 'learn' | 'reference' | 'home' {
+  const {asPath} = useRouter();
+  if (asPath.startsWith('/learn')) {
+    return 'learn';
+  } else if (asPath.startsWith('/reference')) {
+    return 'reference';
+  } else {
+    return 'home';
+  }
+}
diff --git a/beta/src/hooks/usePendingRoute.ts b/beta/src/hooks/usePendingRoute.ts
new file mode 100644
index 000000000..73ff0b8af
--- /dev/null
+++ b/beta/src/hooks/usePendingRoute.ts
@@ -0,0 +1,41 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {useRouter} from 'next/router';
+import {useState, useRef, useEffect} from 'react';
+
+const usePendingRoute = () => {
+  const {events} = useRouter();
+  const [pendingRoute, setPendingRoute] = useState<string | null>(null);
+  const currentRoute = useRef<string | null>(null);
+  useEffect(() => {
+    let routeTransitionTimer: any = null;
+
+    const handleRouteChangeStart = (url: string) => {
+      clearTimeout(routeTransitionTimer);
+      routeTransitionTimer = setTimeout(() => {
+        if (currentRoute.current !== url) {
+          currentRoute.current = url;
+          setPendingRoute(url);
+        }
+      }, 100);
+    };
+    const handleRouteChangeComplete = () => {
+      setPendingRoute(null);
+      clearTimeout(routeTransitionTimer);
+    };
+    events.on('routeChangeStart', handleRouteChangeStart);
+    events.on('routeChangeComplete', handleRouteChangeComplete);
+
+    return () => {
+      events.off('routeChangeStart', handleRouteChangeStart);
+      events.off('routeChangeComplete', handleRouteChangeComplete);
+      clearTimeout(routeTransitionTimer);
+    };
+  }, []);
+
+  return pendingRoute;
+};
+
+export default usePendingRoute;
diff --git a/beta/src/pages/404.js b/beta/src/pages/404.js
new file mode 100644
index 000000000..9b99f2a56
--- /dev/null
+++ b/beta/src/pages/404.js
@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {Page} from 'components/Layout/Page';
+import {MarkdownPage} from 'components/Layout/MarkdownPage';
+import {MDXComponents} from 'components/MDX/MDXComponents';
+
+const {Intro, MaxWidth, p: P, a: A} = MDXComponents;
+
+export default function NotFound() {
+  return (
+    <Page toc={[]}>
+      <MarkdownPage meta={{title: 'Not Found'}}>
+        <MaxWidth>
+          <Intro>
+            <P>This page doesn’t exist.</P>
+            <P>
+              Quite possibly, it hasn’t been written yet. This beta is a{' '}
+              <A href="/#how-much-content-is-ready">work in progress!</A>
+            </P>
+            <P>Please check back later.</P>
+          </Intro>
+        </MaxWidth>
+      </MarkdownPage>
+    </Page>
+  );
+}
diff --git a/beta/src/pages/500.js b/beta/src/pages/500.js
new file mode 100644
index 000000000..731b1ad94
--- /dev/null
+++ b/beta/src/pages/500.js
@@ -0,0 +1,30 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {Page} from 'components/Layout/Page';
+import {MarkdownPage} from 'components/Layout/MarkdownPage';
+import {MDXComponents} from 'components/MDX/MDXComponents';
+
+const {Intro, MaxWidth, p: P, a: A} = MDXComponents;
+
+export default function NotFound() {
+  return (
+    <Page toc={[]}>
+      <MarkdownPage meta={{title: 'Something Went Wrong'}}>
+        <MaxWidth>
+          <Intro>
+            <P>Something went very wrong.</P>
+            <P>Sorry about that.</P>
+            <P>
+              If you’d like, please{' '}
+              <A href="https://github.com/reactjs/reactjs.org/issues/new">
+                report a bug.
+              </A>
+            </P>
+          </Intro>
+        </MaxWidth>
+      </MarkdownPage>
+    </Page>
+  );
+}
diff --git a/beta/src/pages/[[...markdownPath]].js b/beta/src/pages/[[...markdownPath]].js
new file mode 100644
index 000000000..ccff50d83
--- /dev/null
+++ b/beta/src/pages/[[...markdownPath]].js
@@ -0,0 +1,255 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {Fragment, useMemo} from 'react';
+import {MDXComponents} from 'components/MDX/MDXComponents';
+import {MarkdownPage} from 'components/Layout/MarkdownPage';
+import {Page} from 'components/Layout/Page';
+
+export default function Layout({content, toc, meta}) {
+  const parsedContent = useMemo(
+    () => JSON.parse(content, reviveNodeOnClient),
+    [content]
+  );
+  const parsedToc = useMemo(() => JSON.parse(toc, reviveNodeOnClient), [toc]);
+  return (
+    <Page toc={parsedToc}>
+      <MarkdownPage meta={meta} toc={parsedToc}>
+        {parsedContent}
+      </MarkdownPage>
+    </Page>
+  );
+}
+
+// Deserialize a client React tree from JSON.
+function reviveNodeOnClient(key, val) {
+  if (Array.isArray(val) && val[0] == '$r') {
+    // Assume it's a React element.
+    let type = val[1];
+    let key = val[2];
+    let props = val[3];
+    if (type === 'wrapper') {
+      type = Fragment;
+      props = {children: props.children};
+    }
+    if (MDXComponents[type]) {
+      type = MDXComponents[type];
+    }
+    if (!type) {
+      console.error('Unknown type: ' + type);
+      type = Fragment;
+    }
+    return {
+      $$typeof: Symbol.for('react.element'),
+      type: type,
+      key: key,
+      ref: null,
+      props: props,
+      _owner: null,
+    };
+  } else {
+    return val;
+  }
+}
+
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+// ~~~~ IMPORTANT: BUMP THIS IF YOU CHANGE ANY CODE BELOW ~~~
+const DISK_CACHE_BREAKER = 7;
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+// Put MDX output into JSON for client.
+export async function getStaticProps(context) {
+  const fs = require('fs');
+  const {
+    prepareMDX,
+    PREPARE_MDX_CACHE_BREAKER,
+  } = require('../utils/prepareMDX');
+  const rootDir = process.cwd() + '/src/content/';
+  const mdxComponentNames = Object.keys(MDXComponents);
+
+  // Read MDX from the file.
+  let path = (context.params.markdownPath || []).join('/') || 'index';
+  let mdx;
+  try {
+    mdx = fs.readFileSync(rootDir + path + '.md', 'utf8');
+  } catch {
+    mdx = fs.readFileSync(rootDir + path + '/index.md', 'utf8');
+  }
+
+  // See if we have a cached output first.
+  const {FileStore, stableHash} = require('metro-cache');
+  const store = new FileStore({
+    root: process.cwd() + '/node_modules/.cache/react-docs-mdx/',
+  });
+  const hash = Buffer.from(
+    stableHash({
+      // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+      // ~~~~ IMPORTANT: Everything that the code below may rely on.
+      // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+      mdx,
+      mdxComponentNames,
+      DISK_CACHE_BREAKER,
+      PREPARE_MDX_CACHE_BREAKER,
+      lockfile: fs.readFileSync(process.cwd() + '/yarn.lock', 'utf8'),
+    })
+  );
+  const cached = await store.get(hash);
+  if (cached) {
+    console.log(
+      'Reading compiled MDX for /' + path + ' from ./node_modules/.cache/'
+    );
+    return cached;
+  }
+  if (process.env.NODE_ENV === 'production') {
+    console.log(
+      'Cache miss for MDX for /' + path + ' from ./node_modules/.cache/'
+    );
+  }
+
+  // If we don't add these fake imports, the MDX compiler
+  // will insert a bunch of opaque components we can't introspect.
+  // This will break the prepareMDX() call below.
+  let mdxWithFakeImports =
+    mdx +
+    '\n\n' +
+    mdxComponentNames
+      .map((key) => 'import ' + key + ' from "' + key + '";\n')
+      .join('\n');
+
+  // Turn the MDX we just read into some JS we can execute.
+  const {remarkPlugins} = require('../../plugins/markdownToHtml');
+  const {compile: compileMdx} = await import('@mdx-js/mdx');
+  const visit = (await import('unist-util-visit')).default;
+  const jsxCode = await compileMdx(mdxWithFakeImports, {
+    remarkPlugins: [
+      ...remarkPlugins,
+      (await import('remark-gfm')).default,
+      (await import('remark-frontmatter')).default,
+    ],
+    rehypePlugins: [
+      // Support stuff like ```js App.js {1-5} active by passing it through.
+      function rehypeMetaAsAttributes() {
+        return (tree) => {
+          visit(tree, 'element', (node) => {
+            if (node.tagName === 'code' && node.data && node.data.meta) {
+              node.properties.meta = node.data.meta;
+            }
+          });
+        };
+      },
+    ],
+  });
+  const {transform} = require('@babel/core');
+  const jsCode = await transform(jsxCode, {
+    plugins: ['@babel/plugin-transform-modules-commonjs'],
+    presets: ['@babel/preset-react'],
+  }).code;
+
+  // Prepare environment for MDX.
+  let fakeExports = {};
+  const fakeRequire = (name) => {
+    if (name === 'react/jsx-runtime') {
+      return require('react/jsx-runtime');
+    } else {
+      // For each fake MDX import, give back the string component name.
+      // It will get serialized later.
+      return name;
+    }
+  };
+  const evalJSCode = new Function('require', 'exports', jsCode);
+  // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+  // THIS IS A BUILD-TIME EVAL. NEVER DO THIS WITH UNTRUSTED MDX (LIKE FROM CMS)!!!
+  // In this case it's okay because anyone who can edit our MDX can also edit this file.
+  evalJSCode(fakeRequire, fakeExports);
+  // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+  const reactTree = fakeExports.default({});
+
+  // Pre-process MDX output and serialize it.
+  let {toc, children} = prepareMDX(reactTree.props.children);
+  if (path === 'index') {
+    toc = [];
+  }
+
+  // Parse Frontmatter headers from MDX.
+  const fm = require('gray-matter');
+  const meta = fm(mdx).data;
+
+  const output = {
+    props: {
+      content: JSON.stringify(children, stringifyNodeOnServer),
+      toc: JSON.stringify(toc, stringifyNodeOnServer),
+      meta,
+    },
+  };
+
+  // Serialize a server React tree node to JSON.
+  function stringifyNodeOnServer(key, val) {
+    if (val != null && val.$$typeof === Symbol.for('react.element')) {
+      // Remove fake MDX props.
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const {mdxType, originalType, parentName, ...cleanProps} = val.props;
+      return [
+        '$r',
+        typeof val.type === 'string' ? val.type : mdxType,
+        val.key,
+        cleanProps,
+      ];
+    } else {
+      return val;
+    }
+  }
+
+  // Cache it on the disk.
+  await store.set(hash, output);
+  return output;
+}
+
+// Collect all MDX files for static generation.
+export async function getStaticPaths() {
+  const {promisify} = require('util');
+  const {resolve} = require('path');
+  const fs = require('fs');
+  const readdir = promisify(fs.readdir);
+  const stat = promisify(fs.stat);
+  const rootDir = process.cwd() + '/src/content';
+
+  // Find all MD files recursively.
+  async function getFiles(dir) {
+    const subdirs = await readdir(dir);
+    const files = await Promise.all(
+      subdirs.map(async (subdir) => {
+        const res = resolve(dir, subdir);
+        return (await stat(res)).isDirectory()
+          ? getFiles(res)
+          : res.slice(rootDir.length + 1);
+      })
+    );
+    return files.flat().filter((file) => file.endsWith('.md'));
+  }
+
+  // 'foo/bar/baz.md' -> ['foo', 'bar', 'baz']
+  // 'foo/bar/qux/index.md' -> ['foo', 'bar', 'qux']
+  function getSegments(file) {
+    let segments = file.slice(0, -3).replace(/\\/g, '/').split('/');
+    if (segments[segments.length - 1] === 'index') {
+      segments.pop();
+    }
+    return segments;
+  }
+
+  const files = await getFiles(rootDir);
+  const paths = files.map((file) => ({
+    params: {
+      markdownPath: getSegments(file),
+      // ^^^ CAREFUL HERE.
+      // If you rename markdownPath, update patches/next-remote-watch.patch too.
+      // Otherwise you'll break Fast Refresh for all MD files.
+    },
+  }));
+
+  return {
+    paths: paths,
+    fallback: false,
+  };
+}
diff --git a/beta/src/pages/_app.tsx b/beta/src/pages/_app.tsx
new file mode 100644
index 000000000..18bd9b2f6
--- /dev/null
+++ b/beta/src/pages/_app.tsx
@@ -0,0 +1,55 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {useEffect} from 'react';
+import {AppProps} from 'next/app';
+import {useRouter} from 'next/router';
+import {ga} from '../utils/analytics';
+
+import '@docsearch/css';
+import '../styles/algolia.css';
+import '../styles/index.css';
+import '../styles/sandpack.css';
+
+if (typeof window !== 'undefined') {
+  if (process.env.NODE_ENV === 'production') {
+    ga('create', process.env.NEXT_PUBLIC_GA_TRACKING_ID, 'auto');
+  }
+  const terminationEvent = 'onpagehide' in window ? 'pagehide' : 'unload';
+  window.addEventListener(terminationEvent, function () {
+    ga('send', 'timing', 'JS Dependencies', 'unload');
+  });
+}
+
+export default function MyApp({Component, pageProps}: AppProps) {
+  const router = useRouter();
+
+  useEffect(() => {
+    // Taken from StackOverflow. Trying to detect both Safari desktop and mobile.
+    const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+    if (isSafari) {
+      // This is kind of a lie.
+      // We still rely on the manual Next.js scrollRestoration logic.
+      // However, we *also* don't want Safari grey screen during the back swipe gesture.
+      // Seems like it doesn't hurt to enable auto restore *and* Next.js logic at the same time.
+      history.scrollRestoration = 'auto';
+    } else {
+      // For other browsers, let Next.js set scrollRestoration to 'manual'.
+      // It seems to work better for Chrome and Firefox which don't animate the back swipe.
+    }
+  }, []);
+
+  useEffect(() => {
+    const handleRouteChange = (url: string) => {
+      ga('set', 'page', url);
+      ga('send', 'pageview');
+    };
+    router.events.on('routeChangeComplete', handleRouteChange);
+    return () => {
+      router.events.off('routeChangeComplete', handleRouteChange);
+    };
+  }, [router.events]);
+
+  return <Component {...pageProps} />;
+}
diff --git a/beta/src/pages/_document.tsx b/beta/src/pages/_document.tsx
new file mode 100644
index 000000000..9e37d6c61
--- /dev/null
+++ b/beta/src/pages/_document.tsx
@@ -0,0 +1,63 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {Html, Head, Main, NextScript} from 'next/document';
+
+const MyDocument = () => {
+  //  @todo specify language in HTML?
+  return (
+    <Html lang="en">
+      <Head />
+      <body className="font-sans antialiased text-lg bg-wash dark:bg-wash-dark text-secondary dark:text-secondary-dark leading-base">
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+                (function () {
+                  function setTheme(newTheme) {
+                    window.__theme = newTheme;
+                    if (newTheme === 'dark') {
+                      document.documentElement.classList.add('dark');
+                    } else if (newTheme === 'light') {
+                      document.documentElement.classList.remove('dark');
+                    }
+                  }
+
+                  var preferredTheme;
+                  try {
+                    preferredTheme = localStorage.getItem('theme');
+                  } catch (err) { }
+
+                  window.__setPreferredTheme = function(newTheme) {
+                    preferredTheme = newTheme;
+                    setTheme(newTheme);
+                    try {
+                      localStorage.setItem('theme', newTheme);
+                    } catch (err) { }
+                  };
+
+                  var initialTheme = preferredTheme;
+                  var darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+                  if (!initialTheme) {
+                    initialTheme = darkQuery.matches ? 'dark' : 'light';
+                  }
+                  setTheme(initialTheme);
+
+                  darkQuery.addEventListener('change', function (e) {
+                    if (!preferredTheme) {
+                      setTheme(e.matches ? 'dark' : 'light');
+                    }
+                  });
+                })();
+              `,
+          }}
+        />
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+};
+
+export default MyDocument;
diff --git a/beta/src/redirects.json b/beta/src/redirects.json
new file mode 100644
index 000000000..3c884c1de
--- /dev/null
+++ b/beta/src/redirects.json
@@ -0,0 +1,3 @@
+{
+  "redirects": []
+}
diff --git a/beta/src/sidebarLearn.json b/beta/src/sidebarLearn.json
new file mode 100644
index 000000000..de6c59414
--- /dev/null
+++ b/beta/src/sidebarLearn.json
@@ -0,0 +1,231 @@
+{
+  "title": "Learn React",
+  "heading": true,
+  "path": "/learn",
+  "routes": [
+    {
+      "heading": true,
+      "path": "",
+      "routes": [
+        {
+          "hasSectionHeader": true,
+          "sectionHeader": "Get Started"
+        },
+        {
+          "title": "Installation",
+          "path": "/learn/installation",
+          "routes": [
+            {
+              "title": "Start a New React Project",
+              "path": "/learn/start-a-new-react-project"
+            },
+            {
+              "title": "Add React to a Website",
+              "path": "/learn/add-react-to-a-website"
+            },
+            {
+              "title": "Editor Setup",
+              "path": "/learn/editor-setup"
+            },
+            {
+              "title": "React Developer Tools",
+              "path": "/learn/react-developer-tools"
+            }
+          ]
+        },
+        {
+          "title": "Quick Start",
+          "path": "/learn",
+          "routes": [
+            {
+              "title": "Tutorial: Tic-Tac-Toe",
+              "path": "/learn/tutorial-tic-tac-toe"
+            },
+            {
+              "title": "Thinking in React",
+              "path": "/learn/thinking-in-react"
+            }
+          ]
+        },
+        {
+          "hasSectionHeader": true,
+          "sectionHeader": "Learn React"
+        },
+        {
+          "title": "Describing the UI",
+          "tags": [],
+          "path": "/learn/describing-the-ui",
+          "routes": [
+            {
+              "title": "Your First Component",
+              "path": "/learn/your-first-component"
+            },
+            {
+              "title": "Importing and Exporting Components",
+              "path": "/learn/importing-and-exporting-components"
+            },
+            {
+              "title": "Writing Markup with JSX",
+              "path": "/learn/writing-markup-with-jsx"
+            },
+            {
+              "title": "JavaScript in JSX with Curly Braces",
+              "path": "/learn/javascript-in-jsx-with-curly-braces"
+            },
+            {
+              "title": "Passing Props to a Component",
+              "path": "/learn/passing-props-to-a-component"
+            },
+            {
+              "title": "Conditional Rendering",
+              "path": "/learn/conditional-rendering"
+            },
+            {
+              "title": "Rendering Lists",
+              "path": "/learn/rendering-lists"
+            },
+            {
+              "title": "Keeping Components Pure",
+              "path": "/learn/keeping-components-pure"
+            }
+          ]
+        },
+        {
+          "title": "Adding Interactivity",
+          "path": "/learn/adding-interactivity",
+          "tags": [],
+          "routes": [
+            {
+              "title": "Responding to Events",
+              "path": "/learn/responding-to-events"
+            },
+            {
+              "title": "State: A Component's Memory",
+              "path": "/learn/state-a-components-memory"
+            },
+            {
+              "title": "Render and Commit",
+              "path": "/learn/render-and-commit"
+            },
+            {
+              "title": "State as a Snapshot",
+              "path": "/learn/state-as-a-snapshot"
+            },
+            {
+              "title": "Queueing a Series of State Updates",
+              "path": "/learn/queueing-a-series-of-state-updates"
+            },
+            {
+              "title": "Updating Objects in State",
+              "path": "/learn/updating-objects-in-state"
+            },
+            {
+              "title": "Updating Arrays in State",
+              "path": "/learn/updating-arrays-in-state"
+            }
+          ]
+        },
+        {
+          "title": "Managing State",
+          "path": "/learn/managing-state",
+          "tags": ["intermediate"],
+          "routes": [
+            {
+              "title": "Reacting to Input with State",
+              "path": "/learn/reacting-to-input-with-state"
+            },
+            {
+              "title": "Choosing the State Structure",
+              "path": "/learn/choosing-the-state-structure"
+            },
+            {
+              "title": "Sharing State Between Components",
+              "path": "/learn/sharing-state-between-components"
+            },
+            {
+              "title": "Preserving and Resetting State",
+              "path": "/learn/preserving-and-resetting-state"
+            },
+            {
+              "title": "Extracting State Logic into a Reducer",
+              "path": "/learn/extracting-state-logic-into-a-reducer"
+            },
+            {
+              "title": "Passing Data Deeply with Context",
+              "path": "/learn/passing-data-deeply-with-context"
+            },
+            {
+              "title": "Scaling Up with Reducer and Context",
+              "path": "/learn/scaling-up-with-reducer-and-context"
+            }
+          ]
+        },
+        {
+          "title": "Escape Hatches",
+          "path": "/learn/escape-hatches",
+          "tags": ["advanced"],
+          "routes": [
+            {
+              "title": "Referencing Values with Refs",
+              "path": "/learn/referencing-values-with-refs"
+            },
+            {
+              "title": "Manipulating the DOM with Refs",
+              "path": "/learn/manipulating-the-dom-with-refs"
+            },
+            {
+              "title": "Synchronizing with Effects",
+              "path": "/learn/synchronizing-with-effects"
+            },
+            {
+              "title": "You Might Not Need an Effect",
+              "path": "/learn/you-might-not-need-an-effect"
+            },
+            {
+              "title": "Lifecycle of Reactive Effects",
+              "path": "/learn/lifecycle-of-reactive-effects"
+            },
+            {
+              "title": "Separating Events from Effects",
+              "path": "/learn/separating-events-from-effects"
+            },
+            {
+              "title": "Removing Effect Dependencies",
+              "path": "/learn/removing-effect-dependencies"              
+            },
+            {
+              "title": "Reusing Logic with Custom Hooks",
+              "path": "/learn/reusing-logic-with-custom-hooks"
+            }
+          ]
+        },
+        {
+          "hasSectionHeader": true,
+          "sectionHeader": "About React"
+        },
+        {
+          "title": "Community",
+          "path": "/learn/community",
+          "routes": [
+            {
+              "title": "Acknowledgements",
+              "path": "/learn/acknowledgements"
+            },
+            {
+              "title": "Docs Contributors",
+              "path": "/learn/docs-contributors"
+            },
+            {
+              "title": "Meet the Team",
+              "path": "/learn/meet-the-team"
+            }
+          ]
+        },
+        {
+          "title": "Blog",
+          "path": "https://reactjs.org/blog"
+        }
+      ]
+    }
+  ]
+}
diff --git a/beta/src/sidebarReference.json b/beta/src/sidebarReference.json
new file mode 100644
index 000000000..4510b35ef
--- /dev/null
+++ b/beta/src/sidebarReference.json
@@ -0,0 +1,281 @@
+{
+  "title": "API Reference",
+  "heading": true,
+  "path": "/reference/react",
+  "routes": [
+    {
+      "heading": true,
+      "path": "",
+      "routes": [
+        {
+          "hasSectionHeader": true,
+          "sectionHeader": "'react' package"
+        },
+        {
+          "title": "Components",
+          "path": "/reference/react/components",
+          "routes": [
+            {
+              "title": "<Fragment> (<>)",
+              "path": "/reference/react/Fragment"
+            },
+            {
+              "title": "<Profiler>",
+              "path": "/reference/react/Profiler"
+            },
+            {
+              "title": "<StrictMode>",
+              "path": "/reference/react/StrictMode"
+            },
+            {
+              "title": "<Suspense>",
+              "path": "/reference/react/Suspense"
+            }
+          ]
+        },
+        {
+          "title": "Hooks",
+          "path": "/reference/react",
+          "routes": [
+            {
+              "title": "useCallback",
+              "path": "/reference/react/useCallback"
+            },
+            {
+              "title": "useContext",
+              "path": "/reference/react/useContext"
+            },
+            {
+              "title": "useDebugValue",
+              "path": "/reference/react/useDebugValue"
+            },
+            {
+              "title": "useDeferredValue",
+              "path": "/reference/react/useDeferredValue"
+            },
+            {
+              "title": "useEffect",
+              "path": "/reference/react/useEffect"
+            },
+            {
+              "title": "useId",
+              "path": "/reference/react/useId"
+            },
+            {
+              "title": "useImperativeHandle",
+              "path": "/reference/react/useImperativeHandle"
+            },
+            {
+              "title": "useInsertionEffect",
+              "path": "/reference/react/useInsertionEffect"
+            },
+            {
+              "title": "useLayoutEffect",
+              "path": "/reference/react/useLayoutEffect"
+            },
+            {
+              "title": "useMemo",
+              "path": "/reference/react/useMemo"
+            },
+            {
+              "title": "useReducer",
+              "path": "/reference/react/useReducer"
+            },
+            {
+              "title": "useRef",
+              "path": "/reference/react/useRef"
+            },
+            {
+              "title": "useState",
+              "path": "/reference/react/useState"
+            },
+            {
+              "title": "useSyncExternalStore",
+              "path": "/reference/react/useSyncExternalStore"
+            },
+            {
+              "title": "useTransition",
+              "path": "/reference/react/useTransition"
+            }
+          ]
+        },
+        {
+          "title": "APIs",
+          "path": "/reference/react/apis",
+          "routes": [
+            {
+              "title": "createContext",
+              "path": "/reference/react/createContext"
+            },
+            {
+              "title": "forwardRef",
+              "path": "/reference/react/forwardRef"
+            },
+            {
+              "title": "lazy",
+              "path": "/reference/react/lazy"
+            },
+            {
+              "title": "memo",
+              "path": "/reference/react/memo"
+            },
+            {
+              "title": "startTransition",
+              "path": "/reference/react/startTransition"
+            }
+          ]
+        },
+        {
+          "hasSectionHeader": true,
+          "sectionHeader": "'react-dom' package"
+        },
+        {
+          "title": "Components",
+          "path": "/reference/react-dom/components",
+          "routes": [
+            {
+              "title": "Common (e.g. <div>)",
+              "path": "/reference/react-dom/components/common"
+            },
+            {
+              "title": "<input>",
+              "path": "/reference/react-dom/components/input"
+            },
+            {
+              "title": "<option>",
+              "path": "/reference/react-dom/components/option"
+            },
+            {
+              "title": "<progress>",
+              "path": "/reference/react-dom/components/progress"
+            },
+            {
+              "title": "<select>",
+              "path": "/reference/react-dom/components/select"
+            },
+            {
+              "title": "<textarea>",
+              "path": "/reference/react-dom/components/textarea"
+            }
+          ]
+        },
+        {
+          "title": "APIs",
+          "path": "/reference/react-dom",
+          "routes": [
+            {
+              "title": "createPortal",
+              "path": "/reference/react-dom/createPortal"
+            },
+            {
+              "title": "flushSync",
+              "path": "/reference/react-dom/flushSync"
+            },
+            {
+              "title": "findDOMNode",
+              "path": "/reference/react-dom/findDOMNode"
+            },
+            {
+              "title": "hydrate",
+              "path": "/reference/react-dom/hydrate"
+            },
+            {
+              "title": "render",
+              "path": "/reference/react-dom/render"
+            },
+            {
+              "title": "unmountComponentAtNode",
+              "path": "/reference/react-dom/unmountComponentAtNode"
+            }
+          ]
+        },
+        {
+          "title": "Client APIs",
+          "path": "/reference/react-dom/client",
+          "routes": [
+            {
+              "title": "createRoot",
+              "path": "/reference/react-dom/client/createRoot"
+            },
+            {
+              "title": "hydrateRoot",
+              "path": "/reference/react-dom/client/hydrateRoot"
+            }
+          ]
+        },
+        {
+          "title": "Server APIs",
+          "path": "/reference/react-dom/server",
+          "routes": [
+            {
+              "title": "renderToNodeStream",
+              "path": "/reference/react-dom/server/renderToNodeStream"
+            },
+            {
+              "title": "renderToPipeableStream",
+              "path": "/reference/react-dom/server/renderToPipeableStream"
+            },
+            {
+              "title": "renderToReadableStream",
+              "path": "/reference/react-dom/server/renderToReadableStream"
+            },
+            {
+              "title": "renderToStaticMarkup",
+              "path": "/reference/react-dom/server/renderToStaticMarkup"
+            },
+            {
+              "title": "renderToStaticNodeStream",
+              "path": "/reference/react-dom/server/renderToStaticNodeStream"
+            },
+            {
+              "title": "renderToString",
+              "path": "/reference/react-dom/server/renderToString"
+            }
+          ]
+        },
+        {
+          "hasSectionHeader": true,
+          "sectionHeader": "Legacy APIs"
+        },
+        {
+          "title": "Legacy React APIs",
+          "path": "/reference/react/legacy",
+          "routes": [
+            {
+              "title": "Children",
+              "path": "/reference/react/Children"
+            },
+            {
+              "title": "cloneElement",
+              "path": "/reference/react/cloneElement"
+            },
+            {
+              "title": "Component",
+              "path": "/reference/react/Component"
+            },
+            {
+              "title": "createElement",
+              "path": "/reference/react/createElement"
+            },
+            {
+              "title": "createFactory",
+              "path": "/reference/react/createFactory"
+            },
+            {
+              "title": "createRef",
+              "path": "/reference/react/createRef"
+            },
+            {
+              "title": "isValidElement",
+              "path": "/reference/react/isValidElement"
+            },
+            {
+              "title": "PureComponent",
+              "path": "/reference/react/PureComponent"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
diff --git a/beta/src/siteConfig.ts b/beta/src/siteConfig.ts
new file mode 100644
index 000000000..f82b2ddc6
--- /dev/null
+++ b/beta/src/siteConfig.ts
@@ -0,0 +1,15 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+export const siteConfig = {
+  editUrl: 'https://github.com/reactjs/reactjs.org/edit/beta/src/pages',
+  copyright: `Copyright © ${new Date().getFullYear()} Facebook Inc. All Rights Reserved.`,
+  repoUrl: 'https://github.com/facebook/react',
+  twitterUrl: 'https://twitter.com/reactjs',
+  algolia: {
+    appId: '1FCF9AYYAT',
+    apiKey: '861ccfb8707150c0e776b88357286123',
+    indexName: 'beta-react',
+  },
+};
diff --git a/beta/src/styles/algolia.css b/beta/src/styles/algolia.css
new file mode 100644
index 000000000..c5c7fb9d3
--- /dev/null
+++ b/beta/src/styles/algolia.css
@@ -0,0 +1,174 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+/* Algolia v3 overrides */
+:root {
+  --docsearch-modal-background: #fff;
+  --docsearch-highlight-color: #087ea4;
+  --docsearch-primary-color: #0074a6;
+  --docsearch-container-background: rgba(52, 58, 70, 0.8);
+  --docsearch-modal-shadow: none;
+  --docsearch-searchbox-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
+  --ifm-z-index-fixed: 1000;
+  --docsearch-hit-height: 48px;
+  --docsearch-searchbox-height: 72px;
+  --docsearch-footer-height: 108px;
+  --docsearch-icon-stroke-width: 1.4;
+  --hover-overlay: rgba(0, 0, 0, 0.05);
+  --fds-animation-fade-in: cubic-bezier(0, 0, 1, 1);
+  --fds-animation-fade-out: cubic-bezier(0, 0, 1, 1);
+}
+html.dark {
+  --docsearch-modal-background: #23272f;
+  --docsearch-hit-background: #23272f;
+  --docsearch-highlight-color: #149eca;
+}
+.DocSearch--active #__next {
+  -webkit-filter: blur(0px);
+  filter: blur(0px);
+}
+.DocSearch-SearchBar {
+  @apply py-4;
+  @apply px-5;
+}
+.DocSearch-Form {
+  @apply rounded-lg;
+  @apply shadow-inner;
+  @apply text-sm;
+  @apply bg-gray-10;
+  @apply outline-none;
+  @apply h-auto;
+  @apply focus-within:ring;
+}
+html.dark .DocSearch-Form {
+  @apply bg-gray-80;
+}
+.DocSearch-Dropdown {
+  @apply px-0;
+  @apply h-full;
+  @apply max-h-full;
+}
+.DocSearch-Commands {
+  @apply w-full;
+  @apply justify-between;
+  @apply border-t;
+  @apply border-border;
+  @apply pt-4;
+}
+html.dark .DocSearch-Commands {
+  @apply border-border-dark;
+}
+.DocSearch-Commands-Key {
+  @apply shadow-none;
+  @apply bg-gray-10;
+  @apply text-primary;
+}
+.DocSearch-Logo {
+  @apply pt-4;
+  @apply pb-2;
+}
+.DocSearch-Label {
+  @apply text-xs;
+}
+.DocSearch-Footer {
+  @apply flex-col-reverse;
+  @apply items-start;
+  @apply h-auto;
+  @apply pb-2;
+  @apply px-5;
+  @apply shadow-none;
+}
+html.dark .DocSearch-Footer {
+  @apply bg-wash-dark;
+}
+.DocSearch-Input {
+  @apply py-3;
+  @apply text-sm;
+  @apply leading-tight;
+  @apply text-primary;
+  @apply appearance-none !important;
+  @apply focus:outline-none;
+}
+html.dark .DocSearch-Input {
+  @apply text-primary-dark;
+}
+.DocSearch-Hit a {
+  @apply rounded-r-lg;
+  @apply rounded-l-none;
+  @apply shadow-none;
+  @apply pl-5;
+}
+.DocSearch-Hit-source {
+  @apply uppercase;
+  @apply tracking-wide;
+  @apply text-sm;
+  @apply text-secondary;
+  @apply font-bold;
+  @apply pt-0;
+  @apply pl-5;
+  @apply m-0;
+}
+html.dark .DocSearch-Hit-source {
+  @apply text-secondary-dark;
+}
+.DocSearch-Dropdown ul {
+  @apply mr-5;
+}
+.DocSearch-Hit-title {
+  @apply text-base;
+  @apply text-primary;
+  @apply font-normal;
+  @apply text-ellipsis;
+  @apply whitespace-nowrap;
+  @apply overflow-hidden;
+}
+html.dark .DocSearch-Hit-title {
+  @apply text-primary-dark;
+}
+.DocSearch-Hit-path {
+  @apply font-normal;
+}
+.DocSearch-LoadingIndicator svg,
+.DocSearch-MagnifierLabel svg {
+  width: 13px;
+  height: 13px;
+  @apply text-gray-30;
+  @apply mx-1;
+}
+.DocSearch-Modal {
+  margin: 0;
+  @apply flex;
+  @apply justify-between;
+  @apply h-full;
+  @apply max-w-xs;
+  @apply rounded-r-lg;
+  @apply rounded-l-none;
+}
+.DocSearch-Cancel {
+  @apply pl-5;
+  @apply ml-0;
+  @apply text-base;
+  @apply text-link;
+  @apply font-normal;
+}
+@media (max-width: 1024px) {
+  .DocSearch-Modal {
+    @apply max-w-full;
+  }
+  .DocSearch-Cancel {
+    @apply inline-block;
+  }
+  .DocSearch-Commands {
+    @apply hidden;
+  }
+  .DocSearch-Modal {
+    @apply rounded-none;
+  }
+}
+.DocSearch-Search-Icon {
+  height: 20px;
+  width: 20px;
+  stroke-width: 1.6;
+  @apply text-gray-60;
+}
diff --git a/beta/src/styles/index.css b/beta/src/styles/index.css
new file mode 100644
index 000000000..462e33fb9
--- /dev/null
+++ b/beta/src/styles/index.css
@@ -0,0 +1,324 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  @font-face {
+    font-family: 'Source Code Pro';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url('/fonts/Source-Code-Pro-Regular.woff2') format('woff2');
+  }
+
+  @font-face {
+    font-family: 'Optimistic Display';
+    src: url('https://beta.reactjs.org/fonts/Optimistic_Display_W_Lt.woff2')
+      format('woff2');
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: 'Optimistic Display';
+    src: url('https://beta.reactjs.org/fonts/Optimistic_Display_W_Md.woff2')
+      format('woff2');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: 'Optimistic Display';
+    src: url('https://beta.reactjs.org/fonts/Optimistic_Display_W_Bd.woff2')
+      format('woff2');
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+  }
+
+  /* Write your own custom base styles here */
+  html {
+    color-scheme: light;
+
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  html.dark {
+    color-scheme: dark;
+  }
+
+  html .dark-image {
+    display: none;
+  }
+
+  html .light-image {
+    display: block;
+  }
+
+  html.dark .dark-image {
+    display: block;
+  }
+
+  html.dark .light-image {
+    display: none;
+  }
+
+  html,
+  body {
+    padding: 0;
+    margin: 0;
+  }
+
+  @media screen and (max-width: 1023px) {
+    body {
+      overflow-x: hidden;
+    }
+  }
+
+  /* Start purging... */
+  /* Force GPU Accelerated scrolling, credit: Twitter Lite */
+  .scrolling-gpu {
+    transform: translateZ(0);
+  }
+
+  @layer utilities {
+    .text-7xl {
+      font-size: 5rem;
+    }
+
+    .text-8xl {
+      font-size: 6rem;
+    }
+  }
+
+  a > code {
+    color: #087ea4 !important; /* blue-50 */
+    text-decoration: none !important;
+  }
+
+  html.dark a > code {
+    color: #149eca !important; /* blue-40 */
+  }
+
+  .text-code {
+    font-size: calc(1em - 10%) !important;
+  }
+
+  .text-gradient {
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    box-decoration-break: clone;
+    background-repeat: no-repeat;
+    color: transparent;
+  }
+
+  .text-gradient-electric-blue {
+    background-image: linear-gradient(45deg, #61dafb, #0072ff);
+  }
+  /* Stop purging. */
+  /* Your own custom utilities */
+
+  details {
+    margin-bottom: 1rem;
+  }
+
+  table {
+    width: 100%;
+    margin-bottom: 1rem;
+    display: block;
+    overflow-x: auto;
+  }
+
+  table td,
+  table th {
+    padding: 0.75rem;
+    vertical-align: top;
+    border: 1px solid #dee2e6;
+    overflow: auto;
+  }
+
+  img {
+    max-width: calc(min(700px, 100%));
+  }
+
+  summary::-webkit-details-marker {
+    display: none;
+  }
+
+  /*
+   * Hopefully when scrollbar-color lands everywhere,
+   * (and not just in FF), we'll be able to keep just this.
+   */
+  html .no-bg-scrollbar {
+    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+  }
+  html.dark .no-bg-scrollbar {
+    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
+  }
+  /*
+   * Until then, we have ... this.
+   * If you're changing this, make sure you've tested:
+   * - Different browsers (Chrome, Safari, FF)
+   * - Dark and light modes
+   * - System scrollbar settings ("always on" vs "when scrolling")
+   * - Switching between modes should never jump width
+   * - When you interact with a sidebar, it should always be visible
+   * - For each combination, test overflowing and non-overflowing sidebar
+   * I've spent hours picking these so I expect no less diligence from you.
+   */
+  html .no-bg-scrollbar::-webkit-scrollbar,
+  html .no-bg-scrollbar::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+  html .no-bg-scrollbar:hover::-webkit-scrollbar-thumb,
+  html .no-bg-scrollbar:focus::-webkit-scrollbar-thumb,
+  html .no-bg-scrollbar:focus-within::-webkit-scrollbar-thumb,
+  html .no-bg-scrollbar:active::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.2);
+    border: 4px solid transparent;
+    background-clip: content-box;
+    border-radius: 10px;
+  }
+  html .no-bg-scrollbar::-webkit-scrollbar-thumb:hover,
+  html .no-bg-scrollbar::-webkit-scrollbar-thumb:active {
+    background-color: rgba(0, 0, 0, 0.35) !important;
+  }
+  html.dark .no-bg-scrollbar:hover::-webkit-scrollbar-thumb,
+  html.dark .no-bg-scrollbar:focus::-webkit-scrollbar-thumb,
+  html.dark .no-bg-scrollbar:focus-within::-webkit-scrollbar-thumb,
+  html.dark .no-bg-scrollbar:active::-webkit-scrollbar-thumb {
+    background-color: rgba(255, 255, 255, 0.2);
+  }
+  html.dark .no-bg-scrollbar::-webkit-scrollbar-thumb:hover,
+  html.dark .no-bg-scrollbar::-webkit-scrollbar-thumb:active {
+    background-color: rgba(255, 255, 255, 0.35) !important;
+  }
+}
+
+.code-step * {
+  color: inherit !important;
+}
+
+.code-step code {
+  background: none !important;
+  padding: 2px !important;
+}
+html.dark .code-step * {
+  color: inherit !important;
+}
+
+.mdx-heading {
+  scroll-margin-top: 3.5em;
+  /* Space for the anchor */
+  padding-right: 1em;
+}
+
+@media (min-width: 1024px) {
+  .mdx-heading {
+    scroll-margin-top: 1em;
+  }
+}
+
+.mdx-heading:before {
+  height: 6rem;
+  margin-top: -6rem;
+  visibility: hidden;
+  content: '';
+}
+.mdx-heading .mdx-header-anchor {
+  /* Prevent the anchor from
+     overflowing to its own line */
+  height: 0px;
+  width: 0px;
+}
+.mdx-heading .mdx-header-anchor svg {
+  display: inline;
+}
+.mdx-heading .mdx-header-anchor svg {
+  visibility: hidden;
+}
+.mdx-heading:hover .mdx-header-anchor svg {
+  visibility: visible;
+}
+.mdx-heading .mdx-header-anchor:focus svg {
+  visibility: visible;
+}
+
+.mdx-blockquote > span > p:first-of-type {
+  margin-bottom: 0;
+}
+.mdx-blockquote > span > p:last-of-type {
+  margin-bottom: 1rem;
+}
+.mdx-illustration-block {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-content: stretch;
+  align-items: stretch;
+  gap: 42px;
+}
+ol.mdx-illustration-block {
+  gap: 60px;
+}
+.mdx-illustration-block li {
+  display: flex;
+  align-items: flex-start;
+  align-content: stretch;
+  justify-content: space-around;
+  position: relative;
+  padding: 1rem;
+}
+.mdx-illustration-block figure {
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+  align-items: center;
+
+  justify-content: space-between;
+  position: relative;
+  height: 100%;
+}
+.mdx-illustration-block li:after {
+  content: ' ';
+  display: block;
+  position: absolute;
+  top: 50%;
+  right: 100%;
+  transform: translateY(-50%);
+  width: 60px;
+  height: 49px;
+  background: center / contain no-repeat url('/images/g_arrow.png');
+}
+.mdx-illustration-block li:first-child:after {
+  content: ' ';
+  display: none;
+}
+.mdx-illustration-block img {
+  max-height: 250px;
+  width: 100%;
+}
+@media (max-width: 680px) {
+  .mdx-illustration-block {
+    flex-direction: column;
+  }
+  .mdx-illustration-block img {
+    max-height: 200px;
+    width: auto;
+  }
+  .mdx-illustration-block li:after {
+    top: 0;
+    left: 50%;
+    right: auto;
+    transform: translateX(-50%) translateY(-100%) rotate(90deg);
+  }
+}
diff --git a/beta/src/styles/sandpack.css b/beta/src/styles/sandpack.css
new file mode 100644
index 000000000..d211c8ab0
--- /dev/null
+++ b/beta/src/styles/sandpack.css
@@ -0,0 +1,628 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+.sandpack {
+  color-scheme: inherit;
+  -webkit-font-smoothing: antialiased;
+
+  --sp-space-1: 4px;
+  --sp-space-2: 8px;
+  --sp-space-3: 12px;
+  --sp-space-4: 16px;
+  --sp-space-5: 20px;
+  --sp-space-6: 24px;
+  --sp-space-7: 28px;
+  --sp-space-8: 32px;
+  --sp-space-9: 36px;
+  --sp-space-10: 40px;
+  --sp-space-11: 44px;
+  --sp-border-radius: 4px;
+  --sp-layout-height: 300px;
+  --sp-layout-headerHeight: 40px;
+  --sp-transitions-default: 150ms ease;
+  --sp-zIndices-base: 1;
+  --sp-zIndices-overlay: 2;
+  --sp-zIndices-top: 3;
+
+  --sp-font-body: Optimistic Display, -apple-system, ui-sans-serif, system-ui,
+    -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial,
+    Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol,
+    Noto Color Emoji;
+  --sp-font-mono: Source Code Pro, ui-monospace, SFMono-Regular, Menlo, Monaco,
+    Consolas, Liberation Mono, Courier New, monospace;
+  --sp-font-size: calc(1em - 20%);
+  --sp-font-lineHeight: 24px;
+}
+
+/* Default theme */
+html .sandpack {
+  --sp-colors-accent: #087ea4;
+  --sp-colors-clickable: #959da5;
+  --sp-colors-disabled: #24292e;
+  --sp-colors-error: #811e18;
+  --sp-colors-error-surface: #ffcdca;
+  --sp-colors-surface1: #fff;
+  --sp-colors-surface2: #e4e7eb;
+
+  --sp-syntax-color-plain: #24292e;
+  --sp-syntax-color-comment: #6a737d;
+  --sp-syntax-color-keyword: #d73a49;
+  --sp-syntax-color-tag: #22863a;
+  --sp-syntax-color-punctuation: #24292e;
+  --sp-syntax-color-definition: #6f42c1;
+  --sp-syntax-color-property: #005cc5;
+  --sp-syntax-color-static: #032f62;
+  --sp-syntax-color-string: #032f62;
+}
+
+/* Dark theme */
+html.dark .sp-wrapper {
+  --sp-colors-accent: #149eca;
+  --sp-colors-clickable: #999;
+  --sp-colors-disabled: #fff;
+  --sp-colors-error: #811e18;
+  --sp-colors-error-surface: #ffcdca;
+  --sp-colors-surface1: #16181d;
+  --sp-colors-surface2: #343a46;
+
+  --sp-syntax-color-plain: #ffffff;
+  --sp-syntax-color-comment: #757575;
+  --sp-syntax-color-keyword: #77b7d7;
+  --sp-syntax-color-tag: #dfab5c;
+  --sp-syntax-color-punctuation: #ffffff;
+  --sp-syntax-color-definition: #86d9ca;
+  --sp-syntax-color-property: #77b7d7;
+  --sp-syntax-color-static: #c64640;
+  --sp-syntax-color-string: #977cdc;
+}
+
+/**
+ * Reset
+ */
+.sandpack .sp-wrapper {
+  width: 100%;
+
+  font-size: var(--sp-font-size);
+  font-family: var(--sp-font-body);
+  line-height: var(--sp-font-lineHeight);
+}
+
+/**
+ * Layout
+ */
+.sandpack .sp-layout {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  background-color: var(--sp-colors-surface2);
+
+  -webkit-mask-image: -webkit-radial-gradient(
+    var(--sp-colors-surface1),
+    var(--sp-colors-surface1)
+  ); /* safest way to make all corner rounded */
+
+  border-bottom-left-radius: 0.5rem;
+  border-bottom-right-radius: 0.5rem;
+  overflow: initial;
+
+  gap: 1px;
+}
+
+.sandpack .sp-stack {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  position: relative;
+}
+
+@media screen and (max-width: 768px) {
+  .sandpack .sp-layout > .sp-stack {
+    height: auto;
+    min-width: 100% !important;
+  }
+}
+
+.sandpack .sp-layout > .sp-stack {
+  flex: 1 1 0px;
+  height: var(--sp-layout-height);
+}
+
+/**
+ * Focus ring
+ */
+.sandpack--playground .sp-tab-button {
+  transition: none;
+}
+
+.sandpack--playground .sp-tab-button:focus {
+  outline: revert;
+}
+
+.sandpack--playground .sp-tab-button:focus-visible {
+  box-shadow: none;
+}
+
+.sandpack .sp-cm:focus-visible {
+  box-shadow: inset 0 0 0 4px rgba(20, 158, 202, 0.4);
+  outline: none;
+  height: 100%;
+}
+
+/**
+ * Navigation
+ */
+.sandpack .sp-tabs-scrollable-container {
+  overflow: auto;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: stretch;
+  min-height: 40px;
+  margin-bottom: -1px;
+}
+
+.sp-tabs .sp-tab-button {
+  padding: 0 6px;
+  border-bottom: 2px solid transparent;
+}
+
+@media (min-width: 768px) {
+  .sp-tabs .sp-tab-button {
+    margin: 0 12px 0 0;
+  }
+}
+
+.sp-tabs .sp-tab-button,
+.sp-tabs .sp-tab-button:hover:not(:disabled, [data-active='true']),
+.sp-tabs .sp-tab-button[data-active='true'] {
+  color: var(--sp-colors-accent);
+}
+
+.sp-tabs .sp-tab-button[data-active='true'] {
+  border-bottom: 2px solid var(--sp-colors-accent);
+}
+
+/**
+ * Code block
+ */
+.cm-line {
+  padding-left: var(--sp-space-5);
+}
+
+/**
+ * Editor
+ */
+.sandpack .sp-code-editor {
+  flex: 1 1;
+  position: relative;
+  overflow: auto;
+  background: var(--sp-colors-surface1);
+}
+
+.sandpack .sp-code-editor .cm-editor,
+.sandpack .sp-code-editor .cm-editor .cm-gutters {
+  background-color: transparent;
+}
+
+.sandpack .sp-code-editor .cm-content,
+.sandpack .sp-code-editor .cm-gutters,
+.sandpack .sp-code-editor .cm-gutterElement {
+  padding: 0;
+  -webkit-font-smoothing: auto; /* Improve the legibility */
+}
+
+.sandpack .sp-code-editor .cm-content {
+  overflow-x: auto;
+  padding-bottom: 18px;
+}
+
+.sandpack--playground .sp-code-editor .cm-line {
+  padding: 0 var(--sp-space-3);
+  width: max-content;
+}
+
+.sandpack--playground .sp-code-editor .cm-lineNumbers {
+  padding-left: var(--sp-space-3);
+  padding-right: var(--sp-space-1);
+  font-size: 13.6px;
+}
+
+.sandpack--playground .sp-code-editor .cm-line.cm-errorLine {
+  @apply bg-red-400;
+  --tw-bg-opacity: 0.1; /* Background tweak: base color + opacity */
+  position: relative;
+  padding-right: 2em;
+  display: inline-block;
+  min-width: 100%;
+}
+
+.sp-code-editor .cm-errorLine:after {
+  @apply text-red-500;
+  position: absolute;
+  right: 8px;
+  top: 0;
+  content: '\26A0';
+  font-size: 22px;
+  line-height: 20px;
+}
+
+.sp-code-editor .cm-tooltip {
+  border: 0;
+  max-width: 200px;
+}
+
+.sp-code-editor .cm-diagnostic-error {
+  @apply border-red-40;
+}
+
+.sandpack .sp-cm {
+  margin: 0px;
+  outline: none;
+  height: 100%;
+}
+
+.sp-code-editor .sp-cm .cm-scroller {
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding-top: 18px;
+}
+
+/**
+ * Syntax highlight (code editor + code block)
+ */
+.sandpack .sp-syntax-string {
+  color: var(--sp-syntax-color-string);
+}
+
+.sandpack .sp-syntax-plain {
+  color: var(--sp-syntax-color-plain);
+}
+
+.sandpack .sp-syntax-comment {
+  color: var(--sp-syntax-color-comment);
+}
+
+.sandpack .sp-syntax-keyword {
+  color: var(--sp-syntax-color-keyword);
+}
+
+.sandpack .sp-syntax-definition {
+  color: var(--sp-syntax-color-definition);
+}
+
+.sandpack .sp-syntax-punctuation {
+  color: var(--sp-syntax-color-punctuation);
+}
+
+.sandpack .sp-syntax-property {
+  color: var(--sp-syntax-color-property);
+}
+
+.sandpack .sp-syntax-tag {
+  color: var(--sp-syntax-color-tag);
+}
+
+.sandpack .sp-syntax-static {
+  color: var(--sp-syntax-color-static);
+}
+
+/**
+ * Loading & error overlay component
+ */
+.sandpack .sp-cube-wrapper {
+  background-color: var(--sp-colors-surface1);
+  position: absolute;
+  right: var(--sp-space-2);
+  bottom: var(--sp-space-2);
+  z-index: var(--sp-zIndices-top);
+  width: 32px;
+  height: 32px;
+  border-radius: var(--sp-border-radius);
+}
+
+.sandpack .sp-button {
+  display: flex;
+  align-items: center;
+  margin: auto;
+  width: 100%;
+  height: 100%;
+}
+
+.sandpack .sp-button svg {
+  min-width: var(--sp-space-5);
+  width: var(--sp-space-5);
+  height: var(--sp-space-5);
+  margin: auto;
+}
+
+.sandpack .sp-cube-wrapper .sp-cube {
+  display: flex;
+}
+
+.sandpack .sp-cube-wrapper .sp-button {
+  display: none;
+}
+
+.sandpack .sp-cube-wrapper:hover .sp-button {
+  display: block;
+}
+
+.sandpack .sp-cube-wrapper:hover .sp-cube {
+  display: none;
+}
+
+.sandpack .sp-cube {
+  transform: translate(-4px, 9px) scale(0.13, 0.13);
+}
+
+.sandpack .sp-cube * {
+  position: absolute;
+  width: 96px;
+  height: 96px;
+}
+
+@keyframes cubeRotate {
+  0% {
+    transform: rotateX(-25.5deg) rotateY(45deg);
+  }
+
+  100% {
+    transform: rotateX(-25.5deg) rotateY(405deg);
+  }
+}
+
+.sandpack .sp-sides {
+  animation: cubeRotate 1s linear infinite;
+  animation-fill-mode: forwards;
+  transform-style: preserve-3d;
+  transform: rotateX(-25.5deg) rotateY(45deg);
+}
+
+.sandpack .sp-sides * {
+  border: 10px solid var(--sp-colors-clickable);
+  border-radius: 8px;
+  background: var(--sp-colors-surface1);
+}
+
+.sandpack .sp-sides .top {
+  transform: rotateX(90deg) translateZ(44px);
+  transform-origin: 50% 50%;
+}
+.sandpack .sp-sides .bottom {
+  transform: rotateX(-90deg) translateZ(44px);
+  transform-origin: 50% 50%;
+}
+.sandpack .sp-sides .front {
+  transform: rotateY(0deg) translateZ(44px);
+  transform-origin: 50% 50%;
+}
+.sandpack .sp-sides .back {
+  transform: rotateY(-180deg) translateZ(44px);
+  transform-origin: 50% 50%;
+}
+.sandpack .sp-sides .left {
+  transform: rotateY(-90deg) translateZ(44px);
+  transform-origin: 50% 50%;
+}
+.sandpack .sp-sides .right {
+  transform: rotateY(90deg) translateZ(44px);
+  transform-origin: 50% 50%;
+}
+
+.sandpack .sp-overlay {
+  @apply bg-card;
+  position: absolute;
+  inset: 0;
+  z-index: var(--sp-zIndices-top);
+}
+
+.sandpack .sp-error {
+  padding: var(--sp-space-4);
+  white-space: pre-wrap;
+  font-family: var(--sp-font-mono);
+  background-color: var(--sp-colors-error-surface);
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.sandpack .sp-error-message {
+  animation: fadeIn 150ms ease;
+  color: var(--sp-colors-error);
+}
+
+html.dark .sandpack--playground .sp-overlay {
+  @apply bg-wash-dark;
+}
+
+/**
+ * Placeholder
+ */
+.sandpack .sp-code-editor .sp-pre-placeholder {
+  @apply font-mono;
+  font-size: 13.6px;
+  line-height: 24px;
+  padding: 18px 0;
+  -webkit-font-smoothing: auto;
+}
+
+.sandpack--playground .sp-code-editor .sp-pre-placeholder {
+  padding-left: 48px !important;
+  margin-left: 0px !important;
+}
+
+.text-xl .sp-pre-placeholder {
+  font-size: 16px !important;
+  line-height: 24px !important;
+}
+
+/**
+ * Expand button
+ */
+.sandpack .sp-layout {
+  min-height: 216px;
+}
+
+.sandpack .sp-layout > .sp-stack:nth-child(1) {
+  /* Force vertical if there isn't enough space. */
+  min-width: 431px;
+  /* No min height on mobile because we know code in advance. */
+  /* Max height is needed to avoid too long files. */
+  max-height: 40vh;
+}
+
+.sandpack .sp-layout > .sp-stack:nth-child(2) {
+  /* Force vertical if there isn't enough space. */
+  min-width: 431px;
+  /* Keep preview a fixed size on mobile to avoid jumps. */
+  /* This is because we don't know its content in advance. */
+  min-height: 40vh;
+  max-height: 40vh;
+}
+.sandpack .sp-layout.sp-layout-expanded > .sp-stack:nth-child(1) {
+  /* Clicking "show more" lets mobile editor go full height. */
+  max-height: unset;
+  height: auto;
+}
+
+.sandpack .sp-layout.sp-layout-expanded > .sp-stack:nth-child(2) {
+  /* Clicking "show more" lets mobile preview go full height. */
+  max-height: unset;
+  height: auto;
+}
+
+@media (min-width: 1280px) {
+  .sandpack .sp-layout > .sp-stack:nth-child(1) {
+    /* On desktop, clamp height by pixels instead. */
+    height: auto;
+    min-height: unset;
+    max-height: 406px;
+  }
+  .sandpack .sp-layout > .sp-stack:nth-child(2) {
+    /* On desktop, clamp height by pixels instead. */
+    height: auto;
+    min-height: unset;
+    max-height: 406px;
+  }
+  .sandpack .sp-layout.sp-layout-expanded > .sp-stack:nth-child(1) {
+    max-height: unset;
+  }
+  .sandpack .sp-layout.sp-layout-expanded > .sp-stack:nth-child(2) {
+    max-height: unset;
+  }
+}
+
+.sandpack .sp-layout .sandpack-expand {
+  border-left: none;
+  margin-left: 0;
+}
+
+.expandable-callout .sp-stack:nth-child(2) {
+  min-width: 431px;
+  min-height: 40vh;
+  max-height: 40vh;
+}
+
+/**
+ * Integrations: console
+ */
+.sandpack .console .sp-cm,
+.sandpack .console .sp-cm .cm-scroller,
+.sandpack .console .sp-cm .cm-line {
+  padding: 0px !important;
+}
+
+/**
+ * Integrations: eslint
+ */
+.sandpack .sp-code-editor .cm-diagnostic {
+  @apply text-secondary;
+}
+
+/**
+ * Integrations: React devtools inline
+ */
+.sandpack .sp-devtools {
+  border-bottom-left-radius: 0.5rem;
+  border-bottom-right-radius: 0.5rem;
+  overflow: hidden;
+}
+
+.sandpack .sp-wrapper .sp-layout-devtools {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+/**
+ * Overwrite inline sty
+ */
+.sandpack .sp-devtools > div {
+  --color-background: var(--sp-colors-surface1) !important;
+  --color-background-inactive: var(--sp-colors-surface2) !important;
+  --color-background-selected: var(--sp-colors-accent) !important;
+  --color-background-hover: transparent !important;
+  --color-modal-background: #ffffffd2 !important;
+
+  --color-tab-selected-border: #087ea4 !important;
+
+  --color-component-name: var(--sp-syntax-color-definition) !important;
+  --color-attribute-name: var(--sp-syntax-color-property) !important;
+  --color-attribute-value: var(--sp-syntax-color-string) !important;
+  --color-attribute-editable-value: var(--sp-syntax-color-property) !important;
+  --color-attribute-name-not-editable: var(--sp-colors-clickable) !important;
+  --color-button-background-focus: var(--sp-colors-surface2) !important;
+
+  --color-button-active: var(--sp-colors-accent) !important;
+  --color-button-background: transparent !important;
+  --color-button: var(--sp-colors-clickable) !important;
+  --color-button-hover: var(--sp-colors-disabled) !important;
+
+  --color-border: var(--sp-colors-surface2) !important;
+  --color-text: rgb(35, 39, 47) !important;
+}
+
+html.dark .sp-devtools > div {
+  --color-text: var(--sp-colors-clickable) !important;
+  --color-modal-background: #16181de0 !important;
+}
+
+.sandpack .sp-devtools table td {
+  border: 1px solid var(--sp-colors-surface2);
+}
+
+/**
+ * Hard fixes
+ */
+
+/**
+  * The text-size-adjust CSS property controls the text inflation
+  * algorithm used on some smartphones and tablets
+  */
+.sandpack .sp-cm {
+  -webkit-text-size-adjust: none;
+}
+
+/** 
+ * For iOS: prevent browser zoom when clicking on sandbox.
+ * Does NOT apply to code blocks.
+ */
+@media screen and (max-width: 768px) {
+  @supports (-webkit-overflow-scrolling: touch) {
+    .sandpack--playground .cm-content,
+    .sandpack--playground .sp-code-editor .sp-pre-placeholder {
+      font-size: initial;
+    }
+    .DocSearch-Input {
+      font-size: initial;
+    }
+  }
+}
diff --git a/beta/src/utils/analytics.ts b/beta/src/utils/analytics.ts
new file mode 100644
index 000000000..c2cc623b9
--- /dev/null
+++ b/beta/src/utils/analytics.ts
@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+let buffer: Array<any> = [];
+let galite: null | Function = null;
+let galitePromise: null | Promise<any> = null;
+
+export function ga(...args: any[]): void {
+  if (typeof galite === 'function') {
+    galite.apply(null, args);
+    return;
+  }
+  buffer.push(args);
+  if (!galitePromise) {
+    // @ts-ignore
+    galitePromise = import('ga-lite').then((mod) => {
+      galite = mod.default;
+      galitePromise = null;
+      buffer.forEach((args) => {
+        mod.default.apply(null, args);
+      });
+      buffer = [];
+    });
+  }
+}
diff --git a/beta/src/utils/emptyShim.js b/beta/src/utils/emptyShim.js
new file mode 100644
index 000000000..294b03de4
--- /dev/null
+++ b/beta/src/utils/emptyShim.js
@@ -0,0 +1,6 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+// We use this file to shim out dependencies that we don't need.
+// See next.config.js.
diff --git a/beta/src/utils/forwardRefWithAs.tsx b/beta/src/utils/forwardRefWithAs.tsx
new file mode 100644
index 000000000..a0e73370d
--- /dev/null
+++ b/beta/src/utils/forwardRefWithAs.tsx
@@ -0,0 +1,145 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+/**
+ * Copied from Reach UI utils...
+ *
+ * It fixes TypeScript type inferencing to work with <Comp as={AnotherComp} />
+ */
+
+import * as React from 'react';
+
+/**
+ * React.Ref uses the readonly type `React.RefObject` instead of
+ * `React.MutableRefObject`, We pretty much always assume ref objects are
+ * mutable (at least when we create them), so this type is a workaround so some
+ * of the weird mechanics of using refs with TS.
+ */
+export type AssignableRef<ValueType> =
+  | {
+      bivarianceHack(instance: ValueType | null): void;
+    }['bivarianceHack']
+  | React.MutableRefObject<ValueType | null>
+  | null;
+
+////////////////////////////////////////////////////////////////////////////////
+// The following types help us deal with the `as` prop.
+// I kind of hacked around until I got this to work using some other projects,
+// as a rough guide, but it does seem to work so, err, that's cool? Yay TS! 🙃
+// P = additional props
+// T = type of component to render
+
+export type As<BaseProps = any> = React.ElementType<BaseProps>;
+
+export type PropsWithAs<
+  ComponentType extends As,
+  ComponentProps
+> = ComponentProps &
+  Omit<
+    React.ComponentPropsWithRef<ComponentType>,
+    'as' | keyof ComponentProps
+  > & {
+    as?: ComponentType;
+  };
+
+export type PropsFromAs<
+  ComponentType extends As,
+  ComponentProps
+> = (PropsWithAs<ComponentType, ComponentProps> & {as: ComponentType}) &
+  PropsWithAs<ComponentType, ComponentProps>;
+
+export type ComponentWithForwardedRef<
+  ElementType extends React.ElementType,
+  ComponentProps
+> = React.ForwardRefExoticComponent<
+  ComponentProps &
+    React.HTMLProps<React.ElementType<ElementType>> &
+    React.ComponentPropsWithRef<ElementType>
+>;
+
+export interface ComponentWithAs<ComponentType extends As, ComponentProps> {
+  // These types are a bit of a hack, but cover us in cases where the `as` prop
+  // is not a JSX string type. Makes the compiler happy so 🤷‍♂️
+  <TT extends As>(
+    props: PropsWithAs<TT, ComponentProps>
+  ): React.ReactElement | null;
+  (
+    props: PropsWithAs<ComponentType, ComponentProps>
+  ): React.ReactElement | null;
+
+  displayName?: string;
+  propTypes?: React.WeakValidationMap<
+    PropsWithAs<ComponentType, ComponentProps>
+  >;
+  contextTypes?: React.ValidationMap<any>;
+  defaultProps?: Partial<PropsWithAs<ComponentType, ComponentProps>>;
+}
+
+/**
+ * This is a hack for sure. The thing is, getting a component to intelligently
+ * infer props based on a component or JSX string passed into an `as` prop is
+ * kind of a huge pain. Getting it to work and satisfy the constraints of
+ * `forwardRef` seems dang near impossible. To avoid needing to do this awkward
+ * type song-and-dance every time we want to forward a ref into a component
+ * that accepts an `as` prop, we abstract all of that mess to this function for
+ * the time time being.
+ *
+ * TODO: Eventually we should probably just try to get the type defs above
+ * working across the board, but ain't nobody got time for that mess!
+ *
+ * @param Comp
+ */
+export function forwardRefWithAs<Props, ComponentType extends As>(
+  comp: (
+    props: PropsFromAs<ComponentType, Props>,
+    ref: React.RefObject<any>
+  ) => React.ReactElement | null
+) {
+  return React.forwardRef(comp as any) as unknown as ComponentWithAs<
+    ComponentType,
+    Props
+  >;
+}
+
+/*
+Test components to make sure our dynamic As prop components work as intended 
+type PopupProps = {
+  lol: string;
+  children?: React.ReactNode | ((value?: number) => JSX.Element);
+};
+export const Popup = forwardRefWithAs<PopupProps, 'input'>(
+  ({ as: Comp = 'input', lol, className, children, ...props }, ref) => {
+    return (
+      <Comp ref={ref} {...props}>
+        {typeof children === 'function' ? children(56) : children}
+      </Comp>
+    );
+  }
+);
+export const TryMe1: React.FC = () => {
+  return <Popup as="input" lol="lol" name="me" />;
+};
+export const TryMe2: React.FC = () => {
+  let ref = React.useRef(null);
+  return <Popup ref={ref} as="div" lol="lol" />;
+};
+
+export const TryMe4: React.FC = () => {
+  return <Popup as={Whoa} lol="lol" test="123" name="boop" />;
+};
+export const Whoa: React.FC<{
+  help?: boolean;
+  lol: string;
+  name: string;
+  test: string;
+}> = props => {
+  return <input {...props} />;
+};
+*/
+// export const TryMe3: React.FC = () => {
+//   return <Popup as={Cool} lol="lol" name="me" test="123" />;
+// };
+// let Cool = styled(Whoa)`
+//   padding: 10px;
+// `
diff --git a/beta/src/utils/getAuthor.ts b/beta/src/utils/getAuthor.ts
new file mode 100644
index 000000000..637a8e21f
--- /dev/null
+++ b/beta/src/utils/getAuthor.ts
@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import authorsJson from 'authors.json';
+
+/** Return author info, */
+export function getAuthor(author: string) {
+  const person = authorsJson[author as keyof typeof authorsJson];
+  if (!person) {
+    console.warn('Invalid author. Did you add it to authors.json??');
+    return {
+      name: 'React Team',
+      url: 'https://twitter.com/reactjs',
+    };
+  }
+  return person;
+}
diff --git a/beta/src/utils/prepareMDX.js b/beta/src/utils/prepareMDX.js
new file mode 100644
index 000000000..639d7db90
--- /dev/null
+++ b/beta/src/utils/prepareMDX.js
@@ -0,0 +1,117 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {Children} from 'react';
+
+// TODO: This logic could be in MDX plugins instead.
+
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+export const PREPARE_MDX_CACHE_BREAKER = 2;
+// !!! IMPORTANT !!! Bump this if you change any logic.
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+export function prepareMDX(rawChildren) {
+  const toc = getTableOfContents(rawChildren, /* depth */ 10);
+  const children = wrapChildrenInMaxWidthContainers(rawChildren);
+  return {toc, children};
+}
+
+function wrapChildrenInMaxWidthContainers(children) {
+  // Auto-wrap everything except a few types into
+  // <MaxWidth> wrappers. Keep reusing the same
+  // wrapper as long as we can until we meet
+  // a full-width section which interrupts it.
+  let fullWidthTypes = [
+    'Sandpack',
+    'FullWidth',
+    'Illustration',
+    'IllustrationBlock',
+    'Challenges',
+    'Recipes',
+  ];
+  let wrapQueue = [];
+  let finalChildren = [];
+  function flushWrapper(key) {
+    if (wrapQueue.length > 0) {
+      const Wrapper = 'MaxWidth';
+      finalChildren.push(<Wrapper key={key}>{wrapQueue}</Wrapper>);
+      wrapQueue = [];
+    }
+  }
+  function handleChild(child, key) {
+    if (child == null) {
+      return;
+    }
+    if (typeof child !== 'object') {
+      wrapQueue.push(child);
+      return;
+    }
+    if (fullWidthTypes.includes(child.type)) {
+      flushWrapper(key);
+      finalChildren.push(child);
+    } else {
+      wrapQueue.push(child);
+    }
+  }
+  Children.forEach(children, handleChild);
+  flushWrapper('last');
+  return finalChildren;
+}
+
+function getTableOfContents(children, depth) {
+  const anchors = [];
+  extractHeaders(children, depth, anchors);
+  if (anchors.length > 0) {
+    anchors.unshift({
+      url: '#',
+      text: 'Overview',
+      depth: 2,
+    });
+  }
+  return anchors;
+}
+
+const headerTypes = new Set([
+  'h1',
+  'h2',
+  'h3',
+  'Challenges',
+  'Recap',
+  'TeamMember',
+]);
+function extractHeaders(children, depth, out) {
+  for (const child of Children.toArray(children)) {
+    if (child.type && headerTypes.has(child.type)) {
+      let header;
+      if (child.type === 'Challenges') {
+        header = {
+          url: '#challenges',
+          depth: 2,
+          text: 'Challenges',
+        };
+      } else if (child.type === 'Recap') {
+        header = {
+          url: '#recap',
+          depth: 2,
+          text: 'Recap',
+        };
+      } else if (child.type === 'TeamMember') {
+        header = {
+          url: '#' + child.props.permalink,
+          depth: 3,
+          text: child.props.name,
+        };
+      } else {
+        header = {
+          url: '#' + child.props.id,
+          depth: (child.type && parseInt(child.type.replace('h', ''), 0)) ?? 0,
+          text: child.props.children,
+        };
+      }
+      out.push(header);
+    } else if (child.children && depth > 0) {
+      extractHeaders(child.children, depth - 1, out);
+    }
+  }
+}
diff --git a/beta/src/utils/processShim.js b/beta/src/utils/processShim.js
new file mode 100644
index 000000000..7d8454988
--- /dev/null
+++ b/beta/src/utils/processShim.js
@@ -0,0 +1,9 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+// Used in next.config.js to remove the process transitive dependency.
+module.exports = {
+  env: {},
+  cwd() {},
+};
diff --git a/beta/src/utils/rafShim.js b/beta/src/utils/rafShim.js
new file mode 100644
index 000000000..9c3097d8f
--- /dev/null
+++ b/beta/src/utils/rafShim.js
@@ -0,0 +1,6 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+// Used in next.config.js to remove the raf transitive dependency.
+export default window.requestAnimationFrame;
diff --git a/beta/src/utils/removeFromLast.ts b/beta/src/utils/removeFromLast.ts
new file mode 100644
index 000000000..adcc33b61
--- /dev/null
+++ b/beta/src/utils/removeFromLast.ts
@@ -0,0 +1,13 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+/**
+ * Remove one string from another, from the end.
+ * @param path A string
+ * @param key Another string cursor
+ */
+export function removeFromLast(path: string, key: string) {
+  const i = path.lastIndexOf(key);
+  return i === -1 ? path : path.substring(0, i);
+}
diff --git a/beta/src/utils/toCommaSeparatedList.tsx b/beta/src/utils/toCommaSeparatedList.tsx
new file mode 100644
index 000000000..e95ee1799
--- /dev/null
+++ b/beta/src/utils/toCommaSeparatedList.tsx
@@ -0,0 +1,35 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import * as React from 'react';
+
+const addString = (list: React.ReactNode[], string: string) =>
+  list.push(<span key={`${list.length}-${string}`}>{string}</span>);
+
+function toCommaSeparatedList<Item>(
+  array: Item[],
+  renderCallback: (item: Item, index: number) => React.ReactNode
+): React.ReactNode[] {
+  if (array.length <= 1) {
+    return array.map(renderCallback);
+  }
+
+  const list: React.ReactNode[] = [];
+
+  array.forEach((item, index) => {
+    if (index === array.length - 1) {
+      addString(list, array.length === 2 ? ' and ' : ', and ');
+      list.push(renderCallback(item, index));
+    } else if (index > 0) {
+      addString(list, ', ');
+      list.push(renderCallback(item, index));
+    } else {
+      list.push(renderCallback(item, index));
+    }
+  });
+
+  return list;
+}
+
+export default toCommaSeparatedList;
diff --git a/beta/tailwind.config.js b/beta/tailwind.config.js
new file mode 100644
index 000000000..bcedbe064
--- /dev/null
+++ b/beta/tailwind.config.js
@@ -0,0 +1,79 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+const defaultTheme = require('tailwindcss/defaultTheme');
+const colors = require('./colors');
+
+module.exports = {
+  content: [
+    './src/components/**/*.{js,ts,jsx,tsx}',
+    './src/pages/**/*.{js,ts,jsx,tsx}',
+    './src/styles/**/*.{js,ts,jsx,tsx}',
+  ],
+  darkMode: 'class',
+  theme: {
+    // Override base screen sizes
+    screens: {
+      ...defaultTheme.screens,
+      betterhover: {raw: '(hover: hover)'},
+    },
+    boxShadow: {
+      sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+      DEFAULT:
+        '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+      md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+      lg: '0px 0.8px 2px rgba(0, 0, 0, 0.032), 0px 2.7px 6.7px rgba(0, 0, 0, 0.048), 0px 12px 30px rgba(0, 0, 0, 0.08)',
+      'lg-dark':
+        '0 0 0 1px rgba(255,255,255,.15), 0px 0.8px 2px rgba(0, 0, 0, 0.032), 0px 2.7px 6.7px rgba(0, 0, 0, 0.048), 0px 12px 30px rgba(0, 0, 0, 0.08)',
+      xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+      '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
+      '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
+      inner: 'inset 0 1px 4px 0 rgba(0, 0, 0, 0.05)',
+      none: 'none',
+    },
+    extend: {
+      maxWidth: {
+        xs: '21rem',
+      },
+      outline: {
+        blue: ['1px auto ' + colors.link, '3px'],
+      },
+      opacity: {
+        8: '0.08',
+      },
+      fontFamily: {
+        sans: [
+          'Optimistic Display',
+          '-apple-system',
+          ...defaultTheme.fontFamily.sans,
+        ],
+        mono: ['"Source Code Pro"', ...defaultTheme.fontFamily.mono],
+      },
+      lineHeight: {
+        base: '30px',
+        large: '38px',
+      },
+      fontSize: {
+        '6xl': '68px',
+        '5xl': '40px',
+        '4xl': '32px',
+        '3xl': '28px',
+        '2xl': '24px',
+        xl: '20px',
+        lg: '17px',
+        base: '15px',
+        sm: '13px',
+        xs: '11px',
+        code: 'calc(1em - 20%)',
+      },
+      colors,
+      gridTemplateColumns: {
+        'only-content': 'auto',
+        'sidebar-content': '20rem auto',
+        'sidebar-content-toc': '20rem auto 20rem',
+      },
+    },
+  },
+  plugins: [],
+};
diff --git a/beta/tsconfig.json b/beta/tsconfig.json
new file mode 100644
index 000000000..440b38510
--- /dev/null
+++ b/beta/tsconfig.json
@@ -0,0 +1,35 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noImplicitAny": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "strictNullChecks": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "baseUrl": "src",
+    "incremental": true
+  },
+  "include": [
+    "next-env.d.ts",
+    "src/**/*.ts",
+    "src/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}
diff --git a/beta/vercel.json b/beta/vercel.json
new file mode 100644
index 000000000..6d5e808f4
--- /dev/null
+++ b/beta/vercel.json
@@ -0,0 +1,274 @@
+{
+  "github": {
+    "silent": true
+  },
+  "trailingSlash": false,
+  "redirects": [
+    {
+      "source": "/tips/controlled-input-null-value.html",
+      "destination": "/docs/forms.html#controlled-input-null-value",
+      "permanent": false
+    },
+    {
+      "source": "/link/switch-to-createroot",
+      "destination": "https://github.com/reactwg/react-18/discussions/5",
+      "permanent": false
+    },
+    {
+      "source": "/server-components",
+      "destination": "/blog/2020/12/21/data-fetching-with-react-server-components.html",
+      "permanent": false
+    },
+    {
+      "source": "/concurrent",
+      "destination": "/docs/concurrent-mode-intro.html",
+      "permanent": false
+    },
+    {
+      "source": "/hooks",
+      "destination": "/docs/hooks-intro.html",
+      "permanent": false
+    },
+    {
+      "source": "/tutorial",
+      "destination": "/tutorial/tutorial.html",
+      "permanent": false
+    },
+    {
+      "source": "/your-story",
+      "destination": "https://www.surveymonkey.co.uk/r/MVQV2R9",
+      "permanent": false
+    },
+    {
+      "source": "/stories",
+      "destination": "https://medium.com/react-community-stories",
+      "permanent": false
+    },
+    {
+      "source": "/html-jsx.html",
+      "destination": "",
+      "permanent": false
+    },
+    {
+      "source": "/link/attribute-behavior",
+      "destination": "/blog/2017/09/08/dom-attributes-in-react-16.html#changes-in-detail",
+      "permanent": false
+    },
+    {
+      "source": "/link/controlled-components",
+      "destination": "/docs/forms.html#controlled-components",
+      "permanent": false
+    },
+    {
+      "source": "/link/crossorigin-error",
+      "destination": "/docs/cross-origin-errors.html",
+      "permanent": false
+    },
+    {
+      "source": "/link/dangerously-set-inner-html",
+      "destination": "/docs/dom-elements.html#dangerouslysetinnerhtml",
+      "permanent": false
+    },
+    {
+      "source": "/link/derived-state",
+      "destination": "/blog/2018/06/07/you-probably-dont-need-derived-state.html",
+      "permanent": false
+    },
+    {
+      "source": "/link/error-boundaries",
+      "destination": "/docs/error-boundaries.html",
+      "permanent": false
+    },
+    {
+      "source": "/link/event-pooling",
+      "destination": "/docs/legacy-event-pooling.html",
+      "permanent": false
+    },
+    {
+      "source": "/link/hooks-data-fetching",
+      "destination": "/docs/hooks-faq.html#how-can-i-do-data-fetching-with-hooks",
+      "permanent": false
+    },
+    {
+      "source": "/link/invalid-aria-props",
+      "destination": "/warnings/invalid-aria-prop.html",
+      "permanent": false
+    },
+    {
+      "source": "/link/invalid-hook-call",
+      "destination": "/warnings/invalid-hook-call-warning.html",
+      "permanent": false
+    },
+    {
+      "source": "/link/legacy-context",
+      "destination": "/docs/legacy-context.html",
+      "permanent": false
+    },
+    {
+      "source": "/link/legacy-factories",
+      "destination": "/warnings/legacy-factories.html",
+      "permanent": false
+    },
+    {
+      "source": "/link/mock-scheduler",
+      "destination": "",
+      "permanent": false
+    },
+    {
+      "source": "/link/perf-use-production-build",
+      "destination": "/docs/optimizing-performance.html#use-the-production-build",
+      "permanent": false
+    },
+    {
+      "source": "/link/react-devtools",
+      "destination": "/blog/2015/09/02/new-react-developer-tools.html#installation",
+      "permanent": false
+    },
+    {
+      "source": "/link/react-polyfills",
+      "destination": "/docs/javascript-environment-requirements.html",
+      "permanent": false
+    },
+    {
+      "source": "/link/refs-must-have-owner",
+      "destination": "/warnings/refs-must-have-owner.html",
+      "permanent": false
+    },
+    {
+      "source": "/link/rules-of-hooks",
+      "destination": "/docs/hooks-rules.html",
+      "permanent": false
+    },
+    {
+      "source": "/link/special-props",
+      "destination": "/warnings/special-props.html",
+      "permanent": false
+    },
+    {
+      "source": "/link/strict-mode-find-node",
+      "destination": "/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage",
+      "permanent": false
+    },
+    {
+      "source": "/link/strict-mode-string-ref",
+      "destination": "/docs/refs-and-the-dom.html#legacy-api-string-refs",
+      "permanent": false
+    },
+    {
+      "source": "/link/unsafe-component-lifecycles",
+      "destination": "/blog/2018/03/27/update-on-async-rendering.html",
+      "permanent": false
+    },
+    {
+      "source": "/link/warning-keys",
+      "destination": "/docs/lists-and-keys.html#keys",
+      "permanent": false
+    },
+    {
+      "source": "/link/wrap-tests-with-act",
+      "destination": "/docs/test-utils.html#act",
+      "permanent": false
+    },
+    {
+      "source": "/link/interaction-tracing",
+      "destination": "https://gist.github.com/bvaughn/8de925562903afd2e7a12554adcdda16",
+      "permanent": false
+    },
+    {
+      "source": "/link/profiling",
+      "destination": "https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977",
+      "permanent": false
+    },
+    {
+      "source": "/link/test-utils-mock-component",
+      "destination": "https://gist.github.com/bvaughn/fbf41b3f895bf2d297935faa5525eee9",
+      "permanent": false
+    },
+    {
+      "source": "/link/uselayouteffect-ssr",
+      "destination": "https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85",
+      "permanent": false
+    },
+    {
+      "source": "/link/react-devtools-faq",
+      "destination": "https://github.com/facebook/react/tree/main/packages/react-devtools#faq",
+      "permanent": false
+    },
+    {
+      "source": "/link/setstate-in-render",
+      "destination": "https://github.com/facebook/react/issues/18178#issuecomment-595846312",
+      "permanent": false
+    },
+    {
+      "source": "/version/15.6",
+      "destination": "https://react-legacy.netlify.app",
+      "permanent": false
+    },
+    {
+      "source": "/version/16.8",
+      "destination": "https://5d4b5feba32acd0008d0df98--reactjs.netlify.com/",
+      "permanent": false
+    },
+    {
+      "source": "/version/16.7",
+      "destination": "https://5c54aa429e16c80007af3cd2--reactjs.netlify.com/",
+      "permanent": false
+    },
+    {
+      "source": "/version/16.6",
+      "destination": "https://5c11762d4be4d10008916ab1--reactjs.netlify.com/",
+      "permanent": false
+    },
+    {
+      "source": "/version/16.5",
+      "destination": "https://5bcf5863c6aed64970d6de5b--reactjs.netlify.com/",
+      "permanent": false
+    },
+    {
+      "source": "/version/16.4",
+      "destination": "https://5b90c17ac9659241e7f4c938--reactjs.netlify.com",
+      "permanent": false
+    },
+    {
+      "source": "/version/16.3",
+      "destination": "https://5b05c94e0733d530fd1fafe0--reactjs.netlify.com",
+      "permanent": false
+    },
+    {
+      "source": "/version/16.2",
+      "destination": "https://5abc31d8be40f1556f06c4be--reactjs.netlify.com",
+      "permanent": false
+    },
+    {
+      "source": "/version/16.1",
+      "destination": "https://5a1dbcf14c4b93299e65b9a9--reactjs.netlify.com",
+      "permanent": false
+    },
+    {
+      "source": "/version/16.0",
+      "destination": "https://5a046bf5a6188f4b8fa4938a--reactjs.netlify.com",
+      "permanent": false
+    },
+    {
+      "source": "/apis/:path*",
+      "destination": "/reference/:path*",
+      "permanent": true
+    },
+    {
+      "source": "/reference",
+      "destination": "/reference/react",
+      "permanent": true
+    }
+  ],
+  "headers": [
+    {
+      "source": "/fonts/(.*).woff2",
+      "headers": [
+        {
+          "key": "Cache-Control",
+          "value": "public, max-age=31536000, immutable"
+        }
+      ]
+    }
+  ]
+}
diff --git a/beta/yarn.lock b/beta/yarn.lock
new file mode 100644
index 000000000..5aa76ffbe
--- /dev/null
+++ b/beta/yarn.lock
@@ -0,0 +1,6690 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@algolia/autocomplete-core@1.2.2":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@algolia/autocomplete-core/-/autocomplete-core-1.2.2.tgz#c121e70c78fd0175c989a219918124ad7758e48b"
+  integrity sha512-JOQaURze45qVa8OOFDh+ozj2a/ObSRsVyz6Zd0aiBeej+RSTqrr1hDVpGNbbXYLW26G5ujuc9QIdH+rBHn95nw==
+  dependencies:
+    "@algolia/autocomplete-shared" "1.2.2"
+
+"@algolia/autocomplete-preset-algolia@1.2.2":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@algolia/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.2.2.tgz#da734ef9e42a5f64cdad2dfc81c4e9fbf805d976"
+  integrity sha512-AZkh+bAMaJDzMZTelFOXJTJqkp5VPGH8W3n0B+Ggce7DdozlMRsDLguKTCQAkZ0dJ1EbBPyFL5ztL/JImB137Q==
+  dependencies:
+    "@algolia/autocomplete-shared" "1.2.2"
+
+"@algolia/autocomplete-shared@1.2.2":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@algolia/autocomplete-shared/-/autocomplete-shared-1.2.2.tgz#ff25dc308f2a296b2b9b325f1e3b57498eea3e0c"
+  integrity sha512-mLTl7d2C1xVVazHt/bqh9EE/u2lbp5YOxLDdcjILXmUqOs5HH1D4SuySblXaQG1uf28FhTqMGp35qE5wJQnqAw==
+
+"@algolia/cache-browser-local-storage@4.12.0":
+  version "4.12.0"
+  resolved "https://registry.yarnpkg.com/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.12.0.tgz#1f873e4f28a39d25b0a589ebe8f826509458e1fb"
+  integrity sha512-l+G560B6N1k0rIcOjTO1yCzFUbg2Zy2HCii9s03e13jGgqduVQmk79UUCYszjsJ5GPJpUEKcVEtAIpP7tjsXVA==
+  dependencies:
+    "@algolia/cache-common" "4.12.0"
+
+"@algolia/cache-common@4.12.0":
+  version "4.12.0"
+  resolved "https://registry.yarnpkg.com/@algolia/cache-common/-/cache-common-4.12.0.tgz#c1111a4d3e9ba2d52cadb4523152580db0887293"
+  integrity sha512-2Z8BV+NX7oN7RmmQbLqmW8lfN9aAjOexX1FJjzB0YfKC9ifpi9Jl4nSxlnbU+iLR6QhHo0IfuyQ7wcnucCGCGQ==
+
+"@algolia/cache-in-memory@4.12.0":
+  version "4.12.0"
+  resolved "https://registry.yarnpkg.com/@algolia/cache-in-memory/-/cache-in-memory-4.12.0.tgz#f4bdcbf8a6419f0166cfc7ef5594af871741e29e"
+  integrity sha512-b6ANkZF6vGAo+sYv6g25W5a0u3o6F549gEAgtTDTVA1aHcdWwe/HG/dTJ7NsnHbuR+A831tIwnNYQjRp3/V/Jw==
+  dependencies:
+    "@algolia/cache-common" "4.12.0"
+
+"@algolia/client-account@4.12.0":
+  version "4.12.0"
+  resolved "https://registry.yarnpkg.com/@algolia/client-account/-/client-account-4.12.0.tgz#b28445b47e2abf81dc76982d16ba8458f5c99521"
+  integrity sha512-gzXN75ZydNheNXUN3epS+aLsKnB/PHFVlGUUjXL8WHs4lJP3B5FtHvaA/NCN5DsM3aamhuY5p0ff1XIA+Lbcrw==
+  dependencies:
+    "@algolia/client-common" "4.12.0"
+    "@algolia/client-search" "4.12.0"
+    "@algolia/transporter" "4.12.0"
+
+"@algolia/client-analytics@4.12.0":
+  version "4.12.0"
+  resolved "https://registry.yarnpkg.com/@algolia/client-analytics/-/client-analytics-4.12.0.tgz#470f115517256c92a5605ae95762531c7906ec74"
+  integrity sha512-rO2cZCt00Opk66QBZb7IBGfCq4ZE3EiuGkXssf2Monb5urujy0r8CknK2i7bzaKtPbd2vlvhmLP4CEHQqF6SLQ==
+  dependencies:
+    "@algolia/client-common" "4.12.0"
+    "@algolia/client-search" "4.12.0"
+    "@algolia/requester-common" "4.12.0"
+    "@algolia/transporter" "4.12.0"
+
+"@algolia/client-common@4.12.0":
+  version "4.12.0"
+  resolved "https://registry.yarnpkg.com/@algolia/client-common/-/client-common-4.12.0.tgz#402395e2cffad89188d76b83615acffb3e45e658"
+  integrity sha512-fcrFN7FBmxiSyjeu3sF4OnPkC1l7/8oyQ8RMM8CHpVY8cad6/ay35MrfRfgfqdzdFA8LzcBYO7fykuJv0eOqxw==
+  dependencies:
+    "@algolia/requester-common" "4.12.0"
+    "@algolia/transporter" "4.12.0"
+
+"@algolia/client-personalization@4.12.0":
+  version "4.12.0"
+  resolved "https://registry.yarnpkg.com/@algolia/client-personalization/-/client-personalization-4.12.0.tgz#09c89c1558a91db3bfa60d17f7258ae63861352b"
+  integrity sha512-wCJfSQEmX6ZOuJBJGjy+sbXiW0iy7tMNAhsVMV9RRaJE4727e5WAqwFWZssD877WQ74+/nF/VyTaB1+wejo33Q==
+  dependencies:
+    "@algolia/client-common" "4.12.0"
+    "@algolia/requester-common" "4.12.0"
+    "@algolia/transporter" "4.12.0"
+
+"@algolia/client-search@4.12.0":
+  version "4.12.0"
+  resolved "https://registry.yarnpkg.com/@algolia/client-search/-/client-search-4.12.0.tgz#ac099ee9f8de85ec204d840bcac734224c7d150c"
+  integrity sha512-ik6dswcTQtOdZN+8aKntI9X2E6Qpqjtyda/+VANiHThY9GD2PBXuNuuC2HvlF26AbBYp5xaSE/EKxn1DIiIJ4Q==
+  dependencies:
+    "@algolia/client-common" "4.12.0"
+    "@algolia/requester-common" "4.12.0"
+    "@algolia/transporter" "4.12.0"
+
+"@algolia/logger-common@4.12.0":
+  version "4.12.0"
+  resolved "https://registry.yarnpkg.com/@algolia/logger-common/-/logger-common-4.12.0.tgz#0f9dbe7ace88194b395a2cb958490eb47ac91f8e"
+  integrity sha512-V//9rzLdJujA3iZ/tPhmKR/m2kjSZrymxOfUiF3024u2/7UyOpH92OOCrHUf023uMGYHRzyhBz5ESfL1oCdh7g==
+
+"@algolia/logger-console@4.12.0":
+  version "4.12.0"
+  resolved "https://registry.yarnpkg.com/@algolia/logger-console/-/logger-console-4.12.0.tgz#a40edeb989bf0d7ff79d989171dad64cd0f01225"
+  integrity sha512-pHvoGv53KXRIJHLk9uxBwKirwEo12G9+uo0sJLWESThAN3v5M+ycliU1AkUXQN8+9rds2KxfULAb+vfyfBKf8A==
+  dependencies:
+    "@algolia/logger-common" "4.12.0"
+
+"@algolia/requester-browser-xhr@4.12.0":
+  version "4.12.0"
+  resolved "https://registry.yarnpkg.com/@algolia/requester-browser-xhr/-/requester-browser-xhr-4.12.0.tgz#64e8e4d4f0724e477421454215195400351cfe61"
+  integrity sha512-rGlHNMM3jIZBwSpz33CVkeXHilzuzHuFXEEW1icP/k3KW7kwBrKFJwBy42RzAJa5BYlLsTCFTS3xkPhYwTQKLg==
+  dependencies:
+    "@algolia/requester-common" "4.12.0"
+
+"@algolia/requester-common@4.12.0":
+  version "4.12.0"
+  resolved "https://registry.yarnpkg.com/@algolia/requester-common/-/requester-common-4.12.0.tgz#b4d96f3cbd73206b6042e523d414a34cc005c2e2"
+  integrity sha512-qgfdc73nXqpVyOMr6CMTx3nXvud9dP6GcMGDqPct+fnxogGcJsp24cY2nMqUrAfgmTJe9Nmy7Lddv0FyHjONMg==
+
+"@algolia/requester-node-http@4.12.0":
+  version "4.12.0"
+  resolved "https://registry.yarnpkg.com/@algolia/requester-node-http/-/requester-node-http-4.12.0.tgz#8d8e1b67edbaec8e8e8b8c7c606945b969667267"
+  integrity sha512-mOTRGf/v/dXshBoZKNhMG00ZGxoUH9QdSpuMKYnuWwIgstN24uj3DQx+Ho3c+uq0TYfq7n2v71uoJWuiW32NMQ==
+  dependencies:
+    "@algolia/requester-common" "4.12.0"
+
+"@algolia/transporter@4.12.0":
+  version "4.12.0"
+  resolved "https://registry.yarnpkg.com/@algolia/transporter/-/transporter-4.12.0.tgz#e375e10731df95f1be3593b32e86b5c6452cc213"
+  integrity sha512-MOQVHZ4BcBpf3LtOY/3fqXHAcvI8MahrXDHk9QrBE/iGensQhDiZby5Dn3o2JN/zd9FMnVbdPQ8gnkiMwZiakQ==
+  dependencies:
+    "@algolia/cache-common" "4.12.0"
+    "@algolia/logger-common" "4.12.0"
+    "@algolia/requester-common" "4.12.0"
+
+"@ampproject/remapping@^2.1.0":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.2.0.tgz#56c133824780de3174aed5ab6834f3026790154d"
+  integrity sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.1.0"
+    "@jridgewell/trace-mapping" "^0.3.9"
+
+"@babel/code-frame@7.12.11":
+  version "7.12.11"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.12.11.tgz#f4ad435aa263db935b8f10f2c552d23fb716a63f"
+  integrity sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==
+  dependencies:
+    "@babel/highlight" "^7.10.4"
+
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.16.7.tgz#44416b6bd7624b998f5b1af5d470856c40138789"
+  integrity sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==
+  dependencies:
+    "@babel/highlight" "^7.16.7"
+
+"@babel/code-frame@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.18.6.tgz#3b25d38c89600baa2dcc219edfa88a74eb2c427a"
+  integrity sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==
+  dependencies:
+    "@babel/highlight" "^7.18.6"
+
+"@babel/compat-data@^7.19.0":
+  version "7.19.0"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.19.0.tgz#2a592fd89bacb1fcde68de31bee4f2f2dacb0e86"
+  integrity sha512-y5rqgTTPTmaF5e2nVhOxw+Ur9HDJLsWb6U/KpgUzRZEdPfE6VOubXBKLdbcUTijzRptednSBDQbYZBOSqJxpJw==
+
+"@babel/core@^7.12.9":
+  version "7.19.0"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.19.0.tgz#d2f5f4f2033c00de8096be3c9f45772563e150c3"
+  integrity sha512-reM4+U7B9ss148rh2n1Qs9ASS+w94irYXga7c2jaQv9RVzpS7Mv1a9rnYYwuDa45G+DkORt9g6An2k/V4d9LbQ==
+  dependencies:
+    "@ampproject/remapping" "^2.1.0"
+    "@babel/code-frame" "^7.18.6"
+    "@babel/generator" "^7.19.0"
+    "@babel/helper-compilation-targets" "^7.19.0"
+    "@babel/helper-module-transforms" "^7.19.0"
+    "@babel/helpers" "^7.19.0"
+    "@babel/parser" "^7.19.0"
+    "@babel/template" "^7.18.10"
+    "@babel/traverse" "^7.19.0"
+    "@babel/types" "^7.19.0"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.2"
+    json5 "^2.2.1"
+    semver "^6.3.0"
+
+"@babel/generator@^7.16.8":
+  version "7.16.8"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.16.8.tgz#359d44d966b8cd059d543250ce79596f792f2ebe"
+  integrity sha512-1ojZwE9+lOXzcWdWmO6TbUzDfqLD39CmEhN8+2cX9XkDo5yW1OpgfejfliysR2AWLpMamTiOiAp/mtroaymhpw==
+  dependencies:
+    "@babel/types" "^7.16.8"
+    jsesc "^2.5.1"
+    source-map "^0.5.0"
+
+"@babel/generator@^7.19.0":
+  version "7.19.0"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.19.0.tgz#785596c06425e59334df2ccee63ab166b738419a"
+  integrity sha512-S1ahxf1gZ2dpoiFgA+ohK9DIpz50bJ0CWs7Zlzb54Z4sG8qmdIrGrVqmy1sAtTVRb+9CU6U8VqT9L0Zj7hxHVg==
+  dependencies:
+    "@babel/types" "^7.19.0"
+    "@jridgewell/gen-mapping" "^0.3.2"
+    jsesc "^2.5.1"
+
+"@babel/helper-annotate-as-pure@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz#eaa49f6f80d5a33f9a5dd2276e6d6e451be0a6bb"
+  integrity sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
+"@babel/helper-compilation-targets@^7.19.0":
+  version "7.19.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.19.0.tgz#537ec8339d53e806ed422f1e06c8f17d55b96bb0"
+  integrity sha512-Ai5bNWXIvwDvWM7njqsG3feMlL9hCVQsPYXodsZyLwshYkZVJt59Gftau4VrE8S9IT9asd2uSP1hG6wCNw+sXA==
+  dependencies:
+    "@babel/compat-data" "^7.19.0"
+    "@babel/helper-validator-option" "^7.18.6"
+    browserslist "^4.20.2"
+    semver "^6.3.0"
+
+"@babel/helper-environment-visitor@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.16.7.tgz#ff484094a839bde9d89cd63cba017d7aae80ecd7"
+  integrity sha512-SLLb0AAn6PkUeAfKJCCOl9e1R53pQlGAfc4y4XuMRZfqeMYLE0dM1LMhqbGAlGQY0lfw5/ohoYWAe9V1yibRag==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
+"@babel/helper-environment-visitor@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz#0c0cee9b35d2ca190478756865bb3528422f51be"
+  integrity sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==
+
+"@babel/helper-function-name@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.16.7.tgz#f1ec51551fb1c8956bc8dd95f38523b6cf375f8f"
+  integrity sha512-QfDfEnIUyyBSR3HtrtGECuZ6DAyCkYFp7GHl75vFtTnn6pjKeK0T1DB5lLkFvBea8MdaiUABx3osbgLyInoejA==
+  dependencies:
+    "@babel/helper-get-function-arity" "^7.16.7"
+    "@babel/template" "^7.16.7"
+    "@babel/types" "^7.16.7"
+
+"@babel/helper-function-name@^7.19.0":
+  version "7.19.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.19.0.tgz#941574ed5390682e872e52d3f38ce9d1bef4648c"
+  integrity sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w==
+  dependencies:
+    "@babel/template" "^7.18.10"
+    "@babel/types" "^7.19.0"
+
+"@babel/helper-get-function-arity@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.16.7.tgz#ea08ac753117a669f1508ba06ebcc49156387419"
+  integrity sha512-flc+RLSOBXzNzVhcLu6ujeHUrD6tANAOU5ojrRx/as+tbzf8+stUCj7+IfRRoAbEZqj/ahXEMsjhOhgeZsrnTw==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
+"@babel/helper-hoist-variables@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.7.tgz#86bcb19a77a509c7b77d0e22323ef588fa58c246"
+  integrity sha512-m04d/0Op34H5v7pbZw6pSKP7weA6lsMvfiIAMeIvkY/R4xQtBSMFEigu9QTZ2qB/9l22vsxtM8a+Q8CzD255fg==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
+"@babel/helper-hoist-variables@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz#d4d2c8fb4baeaa5c68b99cc8245c56554f926678"
+  integrity sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
+"@babel/helper-module-imports@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz#1e3ebdbbd08aad1437b428c50204db13c5a3ca6e"
+  integrity sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
+"@babel/helper-module-transforms@^7.18.6", "@babel/helper-module-transforms@^7.19.0":
+  version "7.19.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.19.0.tgz#309b230f04e22c58c6a2c0c0c7e50b216d350c30"
+  integrity sha512-3HBZ377Fe14RbLIA+ac3sY4PTgpxHVkFrESaWhoI5PuyXPBBX8+C34qblV9G89ZtycGJCmCI/Ut+VUDK4bltNQ==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-module-imports" "^7.18.6"
+    "@babel/helper-simple-access" "^7.18.6"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+    "@babel/helper-validator-identifier" "^7.18.6"
+    "@babel/template" "^7.18.10"
+    "@babel/traverse" "^7.19.0"
+    "@babel/types" "^7.19.0"
+
+"@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.19.0":
+  version "7.19.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.19.0.tgz#4796bb14961521f0f8715990bee2fb6e51ce21bf"
+  integrity sha512-40Ryx7I8mT+0gaNxm8JGTZFUITNqdLAgdg0hXzeVZxVD6nFsdhQvip6v8dqkRHzsz1VFpFAaOCHNn0vKBL7Czw==
+
+"@babel/helper-simple-access@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.18.6.tgz#d6d8f51f4ac2978068df934b569f08f29788c7ea"
+  integrity sha512-iNpIgTgyAvDQpDj76POqg+YEt8fPxx3yaNBg3S30dxNKm2SWfYhD0TGrK/Eu9wHpUW63VQU894TsTg+GLbUa1g==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
+"@babel/helper-split-export-declaration@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.7.tgz#0b648c0c42da9d3920d85ad585f2778620b8726b"
+  integrity sha512-xbWoy/PFoxSWazIToT9Sif+jJTlrMcndIsaOKvTA6u7QEo7ilkRZpjew18/W3c7nm8fXdUDXh02VXTbZ0pGDNw==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
+"@babel/helper-split-export-declaration@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz#7367949bc75b20c6d5a5d4a97bba2824ae8ef075"
+  integrity sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
+"@babel/helper-string-parser@^7.18.10":
+  version "7.18.10"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.18.10.tgz#181f22d28ebe1b3857fa575f5c290b1aaf659b56"
+  integrity sha512-XtIfWmeNY3i4t7t4D2t02q50HvqHybPqW2ki1kosnvWCwuCMeo81Jf0gwr85jy/neUdg5XDdeFE/80DXiO+njw==
+
+"@babel/helper-validator-identifier@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz#e8c602438c4a8195751243da9031d1607d247cad"
+  integrity sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==
+
+"@babel/helper-validator-identifier@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.18.6.tgz#9c97e30d31b2b8c72a1d08984f2ca9b574d7a076"
+  integrity sha512-MmetCkz9ej86nJQV+sFCxoGGrUbU3q02kgLciwkrt9QqEB7cP39oKEY0PakknEO0Gu20SskMRi+AYZ3b1TpN9g==
+
+"@babel/helper-validator-option@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz#bf0d2b5a509b1f336099e4ff36e1a63aa5db4db8"
+  integrity sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw==
+
+"@babel/helpers@^7.19.0":
+  version "7.19.0"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.19.0.tgz#f30534657faf246ae96551d88dd31e9d1fa1fc18"
+  integrity sha512-DRBCKGwIEdqY3+rPJgG/dKfQy9+08rHIAJx8q2p+HSWP87s2HCrQmaAMMyMll2kIXKCW0cO1RdQskx15Xakftg==
+  dependencies:
+    "@babel/template" "^7.18.10"
+    "@babel/traverse" "^7.19.0"
+    "@babel/types" "^7.19.0"
+
+"@babel/highlight@^7.10.4", "@babel/highlight@^7.16.7":
+  version "7.16.10"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.16.10.tgz#744f2eb81579d6eea753c227b0f570ad785aba88"
+  integrity sha512-5FnTQLSLswEj6IkgVw5KusNUUFY9ZGqe/TRFnP/BKYHYgfh7tc+C7mwiy95/yNP7Dh9x580Vv8r7u7ZfTBFxdw==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.16.7"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
+
+"@babel/highlight@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.18.6.tgz#81158601e93e2563795adcbfbdf5d64be3f2ecdf"
+  integrity sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.18.6"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
+
+"@babel/parser@^7.16.10", "@babel/parser@^7.16.7", "@babel/parser@^7.7.0":
+  version "7.16.12"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.16.12.tgz#9474794f9a650cf5e2f892444227f98e28cdf8b6"
+  integrity sha512-VfaV15po8RiZssrkPweyvbGVSe4x2y+aciFCgn0n0/SJMR22cwofRV1mtnJQYcSB1wUTaA/X1LnA3es66MCO5A==
+
+"@babel/parser@^7.18.10", "@babel/parser@^7.19.0":
+  version "7.19.0"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.19.0.tgz#497fcafb1d5b61376959c1c338745ef0577aa02c"
+  integrity sha512-74bEXKX2h+8rrfQUfsBfuZZHzsEs6Eql4pqy/T4Nn6Y9wNPggQOqD6z6pn5Bl8ZfysKouFZT/UXEH94ummEeQw==
+
+"@babel/plugin-syntax-jsx@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.18.6.tgz#a8feef63b010150abd97f1649ec296e849943ca0"
+  integrity sha512-6mmljtAedFGTWu2p/8WIORGwy+61PLgOMPOdazc7YoJ9ZCWUyFy3A6CpPkRKLKD1ToAesxX8KGEViAiLo9N+7Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-transform-modules-commonjs@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.18.6.tgz#afd243afba166cca69892e24a8fd8c9f2ca87883"
+  integrity sha512-Qfv2ZOWikpvmedXQJDSbxNqy7Xr/j2Y8/KfijM0iJyKkBTmWuvCA1yeH1yDM7NJhBW/2aXxeucLj6i80/LAJ/Q==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-simple-access" "^7.18.6"
+    babel-plugin-dynamic-import-node "^2.3.3"
+
+"@babel/plugin-transform-react-display-name@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.18.6.tgz#8b1125f919ef36ebdfff061d664e266c666b9415"
+  integrity sha512-TV4sQ+T013n61uMoygyMRm+xf04Bd5oqFpv2jAEQwSZ8NwQA7zeRPg1LMVg2PWi3zWBz+CLKD+v5bcpZ/BS0aA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-transform-react-jsx-development@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.18.6.tgz#dbe5c972811e49c7405b630e4d0d2e1380c0ddc5"
+  integrity sha512-SA6HEjwYFKF7WDjWcMcMGUimmw/nhNRDWxr+KaLSCrkD/LMDBvWRmHAYgE1HDeF8KUuI8OAu+RT6EOtKxSW2qA==
+  dependencies:
+    "@babel/plugin-transform-react-jsx" "^7.18.6"
+
+"@babel/plugin-transform-react-jsx@^7.18.6":
+  version "7.19.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.19.0.tgz#b3cbb7c3a00b92ec8ae1027910e331ba5c500eb9"
+  integrity sha512-UVEvX3tXie3Szm3emi1+G63jyw1w5IcMY0FSKM+CRnKRI5Mr1YbCNgsSTwoTwKphQEG9P+QqmuRFneJPZuHNhg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.18.6"
+    "@babel/helper-module-imports" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.19.0"
+    "@babel/plugin-syntax-jsx" "^7.18.6"
+    "@babel/types" "^7.19.0"
+
+"@babel/plugin-transform-react-pure-annotations@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.18.6.tgz#561af267f19f3e5d59291f9950fd7b9663d0d844"
+  integrity sha512-I8VfEPg9r2TRDdvnHgPepTKvuRomzA8+u+nhY7qSI1fR2hRNebasZEETLyM5mAUr0Ku56OkXJ0I7NHJnO6cJiQ==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/preset-react@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.18.6.tgz#979f76d6277048dc19094c217b507f3ad517dd2d"
+  integrity sha512-zXr6atUmyYdiWRVLOZahakYmOBHtWc2WGCkP8PYTgZi0iJXDY2CN180TdrIW4OGOAdLc7TifzDIvtx6izaRIzg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-validator-option" "^7.18.6"
+    "@babel/plugin-transform-react-display-name" "^7.18.6"
+    "@babel/plugin-transform-react-jsx" "^7.18.6"
+    "@babel/plugin-transform-react-jsx-development" "^7.18.6"
+    "@babel/plugin-transform-react-pure-annotations" "^7.18.6"
+
+"@babel/runtime-corejs3@^7.10.2":
+  version "7.16.8"
+  resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.16.8.tgz#ea533d96eda6fdc76b1812248e9fbd0c11d4a1a7"
+  integrity sha512-3fKhuICS1lMz0plI5ktOE/yEtBRMVxplzRkdn6mJQ197XiY0JnrzYV0+Mxozq3JZ8SBV9Ecurmw1XsGbwOf+Sg==
+  dependencies:
+    core-js-pure "^3.20.2"
+    regenerator-runtime "^0.13.4"
+
+"@babel/runtime@^7.10.2", "@babel/runtime@^7.16.3":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.7.tgz#03ff99f64106588c9c403c6ecb8c3bafbbdff1fa"
+  integrity sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
+"@babel/template@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.7.tgz#8d126c8701fde4d66b264b3eba3d96f07666d155"
+  integrity sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==
+  dependencies:
+    "@babel/code-frame" "^7.16.7"
+    "@babel/parser" "^7.16.7"
+    "@babel/types" "^7.16.7"
+
+"@babel/template@^7.18.10":
+  version "7.18.10"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.18.10.tgz#6f9134835970d1dbf0835c0d100c9f38de0c5e71"
+  integrity sha512-TI+rCtooWHr3QJ27kJxfjutghu44DLnasDMwpDqCXVTal9RLp3RSYNh4NdBrRP2cQAoG9A8juOQl6P6oZG4JxA==
+  dependencies:
+    "@babel/code-frame" "^7.18.6"
+    "@babel/parser" "^7.18.10"
+    "@babel/types" "^7.18.10"
+
+"@babel/traverse@^7.19.0":
+  version "7.19.0"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.19.0.tgz#eb9c561c7360005c592cc645abafe0c3c4548eed"
+  integrity sha512-4pKpFRDh+utd2mbRC8JLnlsMUii3PMHjpL6a0SZ4NMZy7YFP9aXORxEhdMVOc9CpWtDF09IkciQLEhK7Ml7gRA==
+  dependencies:
+    "@babel/code-frame" "^7.18.6"
+    "@babel/generator" "^7.19.0"
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-function-name" "^7.19.0"
+    "@babel/helper-hoist-variables" "^7.18.6"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+    "@babel/parser" "^7.19.0"
+    "@babel/types" "^7.19.0"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
+"@babel/traverse@^7.7.0":
+  version "7.16.10"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.16.10.tgz#448f940defbe95b5a8029975b051f75993e8239f"
+  integrity sha512-yzuaYXoRJBGMlBhsMJoUW7G1UmSb/eXr/JHYM/MsOJgavJibLwASijW7oXBdw3NQ6T0bW7Ty5P/VarOs9cHmqw==
+  dependencies:
+    "@babel/code-frame" "^7.16.7"
+    "@babel/generator" "^7.16.8"
+    "@babel/helper-environment-visitor" "^7.16.7"
+    "@babel/helper-function-name" "^7.16.7"
+    "@babel/helper-hoist-variables" "^7.16.7"
+    "@babel/helper-split-export-declaration" "^7.16.7"
+    "@babel/parser" "^7.16.10"
+    "@babel/types" "^7.16.8"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
+"@babel/types@^7.16.7", "@babel/types@^7.16.8", "@babel/types@^7.7.0":
+  version "7.16.8"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.16.8.tgz#0ba5da91dd71e0a4e7781a30f22770831062e3c1"
+  integrity sha512-smN2DQc5s4M7fntyjGtyIPbRJv6wW4rU/94fmYJ7PKQuZkC0qGMHXJbg6sNGt12JmVr4k5YaptI/XtiLJBnmIg==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.16.7"
+    to-fast-properties "^2.0.0"
+
+"@babel/types@^7.18.10", "@babel/types@^7.18.6", "@babel/types@^7.19.0":
+  version "7.19.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.19.0.tgz#75f21d73d73dc0351f3368d28db73465f4814600"
+  integrity sha512-YuGopBq3ke25BVSiS6fgF49Ul9gH1x70Bcr6bqRLjWCkcX8Hre1/5+z+IiWOIerRMSSEfGZVB9z9kyq7wVs9YA==
+  dependencies:
+    "@babel/helper-string-parser" "^7.18.10"
+    "@babel/helper-validator-identifier" "^7.18.6"
+    to-fast-properties "^2.0.0"
+
+"@code-hike/classer@^0.0.0-aa6efee":
+  version "0.0.0-e48fa74"
+  resolved "https://registry.yarnpkg.com/@code-hike/classer/-/classer-0.0.0-e48fa74.tgz#17243ca84d5af303c51e62b378e8db65e01cd3f4"
+  integrity sha512-CyPYvfl4K5Hp9uyhLhUemul56eiGOF0FNXh5ALzzK9VNhRmRmj1O0mKtLDpoccI8W90r9kQES/nW2FC8jVVieg==
+
+"@codemirror/autocomplete@^0.19.0":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@codemirror/autocomplete/-/autocomplete-0.19.12.tgz#4c9e4487b45e6877807e4f16c1fffd5e7639ae52"
+  integrity sha512-zUQYo5gMdv7vhxlKoAY/vnNCGzlE9AU7+P649v3ovpQpoFdo3U1Nt01EJqFb4Sfaw6l1U/Elc9Iksd1lDy+MVw==
+  dependencies:
+    "@codemirror/language" "^0.19.0"
+    "@codemirror/state" "^0.19.4"
+    "@codemirror/text" "^0.19.2"
+    "@codemirror/tooltip" "^0.19.12"
+    "@codemirror/view" "^0.19.0"
+    "@lezer/common" "^0.15.0"
+
+"@codemirror/closebrackets@^0.19.0":
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/@codemirror/closebrackets/-/closebrackets-0.19.0.tgz#69fdcee85779d638a00a42becd9f53a33a26d77f"
+  integrity sha512-dFWX5OEVYWRNtGaifSbwIAlymnRRjxWMiMbffbAjF7p0zfGHDbdGkiT56q3Xud63h5/tQdSo5dK1iyNTzHz5vg==
+  dependencies:
+    "@codemirror/language" "^0.19.0"
+    "@codemirror/rangeset" "^0.19.0"
+    "@codemirror/state" "^0.19.0"
+    "@codemirror/text" "^0.19.0"
+    "@codemirror/view" "^0.19.0"
+
+"@codemirror/commands@^0.19.6":
+  version "0.19.7"
+  resolved "https://registry.yarnpkg.com/@codemirror/commands/-/commands-0.19.7.tgz#b55ccc7f3c1ad4cb0ec422d50c93568dbb05cc55"
+  integrity sha512-Mwh064xnuDbFw+9KJAi2Hmg8Va+YqQzgn6e/94/bSJavY3uuIBPr4vJp6pFEa1qPp40qs5/XJ01ty/0G3uLewA==
+  dependencies:
+    "@codemirror/language" "^0.19.0"
+    "@codemirror/matchbrackets" "^0.19.0"
+    "@codemirror/state" "^0.19.2"
+    "@codemirror/text" "^0.19.0"
+    "@codemirror/view" "^0.19.22"
+    "@lezer/common" "^0.15.0"
+
+"@codemirror/comment@^0.19.0":
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/@codemirror/comment/-/comment-0.19.0.tgz#4f23497924e9346898c2e0123011acc535a0bea6"
+  integrity sha512-3hqAd0548fxqOBm4khFMcXVIivX8p0bSlbAuZJ6PNoUn/0wXhxkxowPp0FmFzU2+y37Z+ZQF5cRB5EREWPRIiQ==
+  dependencies:
+    "@codemirror/state" "^0.19.0"
+    "@codemirror/text" "^0.19.0"
+    "@codemirror/view" "^0.19.0"
+
+"@codemirror/gutter@^0.19.4", "@codemirror/gutter@^0.19.9":
+  version "0.19.9"
+  resolved "https://registry.yarnpkg.com/@codemirror/gutter/-/gutter-0.19.9.tgz#bbb69f4d49570d9c1b3f3df5d134980c516cd42b"
+  integrity sha512-PFrtmilahin1g6uL27aG5tM/rqR9DZzZYZsIrCXA5Uc2OFTFqx4owuhoU9hqfYxHp5ovfvBwQ+txFzqS4vog6Q==
+  dependencies:
+    "@codemirror/rangeset" "^0.19.0"
+    "@codemirror/state" "^0.19.0"
+    "@codemirror/view" "^0.19.23"
+
+"@codemirror/highlight@^0.19.6", "@codemirror/highlight@^0.19.7":
+  version "0.19.7"
+  resolved "https://registry.yarnpkg.com/@codemirror/highlight/-/highlight-0.19.7.tgz#91a0c9994c759f5f153861e3aae74ff9e7c7c35b"
+  integrity sha512-3W32hBCY0pbbv/xidismw+RDMKuIag+fo4kZIbD7WoRj+Ttcaxjf+vP6RttRHXLaaqbWh031lTeON8kMlDhMYw==
+  dependencies:
+    "@codemirror/language" "^0.19.0"
+    "@codemirror/rangeset" "^0.19.0"
+    "@codemirror/state" "^0.19.3"
+    "@codemirror/view" "^0.19.0"
+    "@lezer/common" "^0.15.0"
+    style-mod "^4.0.0"
+
+"@codemirror/history@^0.19.0":
+  version "0.19.2"
+  resolved "https://registry.yarnpkg.com/@codemirror/history/-/history-0.19.2.tgz#25e3fda755f77ac1223a6ae6e9d7899f5919265e"
+  integrity sha512-unhP4t3N2smzmHoo/Yio6ueWi+il8gm9VKrvi6wlcdGH5fOfVDNkmjHQ495SiR+EdOG35+3iNebSPYww0vN7ow==
+  dependencies:
+    "@codemirror/state" "^0.19.2"
+    "@codemirror/view" "^0.19.0"
+
+"@codemirror/lang-css@^0.19.0", "@codemirror/lang-css@^0.19.3":
+  version "0.19.3"
+  resolved "https://registry.yarnpkg.com/@codemirror/lang-css/-/lang-css-0.19.3.tgz#7a17adf78c6fcdab4ad5ee4e360631c41e949e4a"
+  integrity sha512-tyCUJR42/UlfOPLb94/p7dN+IPsYSIzHbAHP2KQHANj0I+Orqp+IyIOS++M8TuCX4zkWh9dvi8s92yy/Tn8Ifg==
+  dependencies:
+    "@codemirror/autocomplete" "^0.19.0"
+    "@codemirror/highlight" "^0.19.6"
+    "@codemirror/language" "^0.19.0"
+    "@codemirror/state" "^0.19.0"
+    "@lezer/css" "^0.15.2"
+
+"@codemirror/lang-html@^0.19.4":
+  version "0.19.4"
+  resolved "https://registry.yarnpkg.com/@codemirror/lang-html/-/lang-html-0.19.4.tgz#e6eec28462f18842a0e108732a214a7416b5e333"
+  integrity sha512-GpiEikNuCBeFnS+/TJSeanwqaOfNm8Kkp9WpVNEPZCLyW1mAMCuFJu/3xlWYeWc778Hc3vJqGn3bn+cLNubgCA==
+  dependencies:
+    "@codemirror/autocomplete" "^0.19.0"
+    "@codemirror/highlight" "^0.19.6"
+    "@codemirror/lang-css" "^0.19.0"
+    "@codemirror/lang-javascript" "^0.19.0"
+    "@codemirror/language" "^0.19.0"
+    "@codemirror/state" "^0.19.0"
+    "@lezer/common" "^0.15.0"
+    "@lezer/html" "^0.15.0"
+
+"@codemirror/lang-javascript@^0.19.0", "@codemirror/lang-javascript@^0.19.3":
+  version "0.19.6"
+  resolved "https://registry.yarnpkg.com/@codemirror/lang-javascript/-/lang-javascript-0.19.6.tgz#bab4ea9ba65189e4bd77c9496275c82e2b6814e7"
+  integrity sha512-NgkoCIc3hdTNTBRIRuPqfUJ0WB798qEgwAgtjwYy6yoiK5CzbDS2z5CFW17h9RmaAx6t1m64iY2CZ3tC7r15Gw==
+  dependencies:
+    "@codemirror/autocomplete" "^0.19.0"
+    "@codemirror/highlight" "^0.19.7"
+    "@codemirror/language" "^0.19.0"
+    "@codemirror/lint" "^0.19.0"
+    "@codemirror/state" "^0.19.0"
+    "@codemirror/view" "^0.19.0"
+    "@lezer/javascript" "^0.15.1"
+
+"@codemirror/language@^0.19.0", "@codemirror/language@^0.19.7":
+  version "0.19.7"
+  resolved "https://registry.yarnpkg.com/@codemirror/language/-/language-0.19.7.tgz#9eef8e827692d93a701b18db9d46a42be34ecca6"
+  integrity sha512-pNNUtYWMIMG0lUSKyUXJr8U0rFiCKsKFXbA2Oj17PC+S1FY99hV0z1vcntW67ekAIZw9DMEUQnLsKBuIbAUX7Q==
+  dependencies:
+    "@codemirror/state" "^0.19.0"
+    "@codemirror/text" "^0.19.0"
+    "@codemirror/view" "^0.19.0"
+    "@lezer/common" "^0.15.5"
+    "@lezer/lr" "^0.15.0"
+
+"@codemirror/lint@^0.19.0":
+  version "0.19.3"
+  resolved "https://registry.yarnpkg.com/@codemirror/lint/-/lint-0.19.3.tgz#84101d0967fea8df114a8f0f79965c22ccd3b3cc"
+  integrity sha512-+c39s05ybD2NjghxkPFsUbH/qBL0cdzKmtHbzUm0RVspeL2OiP7uHYJ6J5+Qr9RjMIPWzcqSauRqxfmCrctUfg==
+  dependencies:
+    "@codemirror/gutter" "^0.19.4"
+    "@codemirror/panel" "^0.19.0"
+    "@codemirror/rangeset" "^0.19.1"
+    "@codemirror/state" "^0.19.4"
+    "@codemirror/tooltip" "^0.19.5"
+    "@codemirror/view" "^0.19.0"
+    crelt "^1.0.5"
+
+"@codemirror/matchbrackets@^0.19.0", "@codemirror/matchbrackets@^0.19.3":
+  version "0.19.3"
+  resolved "https://registry.yarnpkg.com/@codemirror/matchbrackets/-/matchbrackets-0.19.3.tgz#1f430ada6fa21af2205280ff344ef57bb95dd3cb"
+  integrity sha512-ljkrBxaLgh8jesroUiBa57pdEwqJamxkukXrJpL9LdyFZVJaF+9TldhztRaMsMZO1XnCSSHQ9sg32iuHo7Sc2g==
+  dependencies:
+    "@codemirror/language" "^0.19.0"
+    "@codemirror/state" "^0.19.0"
+    "@codemirror/view" "^0.19.0"
+    "@lezer/common" "^0.15.0"
+
+"@codemirror/panel@^0.19.0":
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/@codemirror/panel/-/panel-0.19.1.tgz#bf77d27b962cf16357139e50864d0eb69d634441"
+  integrity sha512-sYeOCMA3KRYxZYJYn5PNlt9yNsjy3zTNTrbYSfVgjgL9QomIVgOJWPO5hZ2sTN8lufO6lw0vTBsIPL9MSidmBg==
+  dependencies:
+    "@codemirror/state" "^0.19.0"
+    "@codemirror/view" "^0.19.0"
+
+"@codemirror/rangeset@^0.19.0", "@codemirror/rangeset@^0.19.1", "@codemirror/rangeset@^0.19.5":
+  version "0.19.6"
+  resolved "https://registry.yarnpkg.com/@codemirror/rangeset/-/rangeset-0.19.6.tgz#2562850cb4ce7dd30088f4d13a13860b67e7d384"
+  integrity sha512-wYtgGnW2Jtrh2nj7vpcBoEZib+jfyilrLN6w7YMTzzSRN8xXhYRorOUg4VQIa1JwFcMQrjSCkIdqXsDqOX1cYg==
+  dependencies:
+    "@codemirror/state" "^0.19.0"
+
+"@codemirror/state@^0.19.0", "@codemirror/state@^0.19.2", "@codemirror/state@^0.19.3", "@codemirror/state@^0.19.4", "@codemirror/state@^0.19.6":
+  version "0.19.6"
+  resolved "https://registry.yarnpkg.com/@codemirror/state/-/state-0.19.6.tgz#d631f041d39ce41b7891b099fca26cb1fdb9763e"
+  integrity sha512-sqIQZE9VqwQj7D4c2oz9mfLhlT1ElAzGB5lO1lE33BPyrdNy1cJyCIOecT4cn4VeJOFrnjOeu+IftZ3zqdFETw==
+  dependencies:
+    "@codemirror/text" "^0.19.0"
+
+"@codemirror/text@^0.19.0", "@codemirror/text@^0.19.2":
+  version "0.19.6"
+  resolved "https://registry.yarnpkg.com/@codemirror/text/-/text-0.19.6.tgz#9adcbd8137f69b75518eacd30ddb16fd67bbac45"
+  integrity sha512-T9jnREMIygx+TPC1bOuepz18maGq/92q2a+n4qTqObKwvNMg+8cMTslb8yxeEDEq7S3kpgGWxgO1UWbQRij0dA==
+
+"@codemirror/tooltip@^0.19.12", "@codemirror/tooltip@^0.19.5":
+  version "0.19.13"
+  resolved "https://registry.yarnpkg.com/@codemirror/tooltip/-/tooltip-0.19.13.tgz#4af381aead14d9d7091258bdd6a5de7dc5f56915"
+  integrity sha512-7vgvjQjwFQ9hPejw2s+w3UR1XAYjQ5M0F9HRwutXkZHP1tBFV7LnNJ3xBD7F9SR9kAh8WgdL3BpUsEwX1aqoQg==
+  dependencies:
+    "@codemirror/state" "^0.19.0"
+    "@codemirror/view" "^0.19.0"
+
+"@codemirror/view@^0.19.0", "@codemirror/view@^0.19.22", "@codemirror/view@^0.19.23", "@codemirror/view@^0.19.32":
+  version "0.19.40"
+  resolved "https://registry.yarnpkg.com/@codemirror/view/-/view-0.19.40.tgz#1be9cac1725568b7fba2252658a6f255b29339eb"
+  integrity sha512-0CQV99+/nIKTVVbDs0XjW4Rkp8TobzJBXRaUHF6mOroVjuIBBcolE1eAGVEU5LrCS44C798jiP4r/HhLDNS+rw==
+  dependencies:
+    "@codemirror/rangeset" "^0.19.5"
+    "@codemirror/state" "^0.19.3"
+    "@codemirror/text" "^0.19.0"
+    style-mod "^4.0.0"
+    w3c-keyname "^2.2.4"
+
+"@codesandbox/sandpack-client@^1.12.1":
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-client/-/sandpack-client-1.12.1.tgz#fa3b66ecb08547c47e1cdf6248f5004bf5be68fb"
+  integrity sha512-p79Sk41hrp5ojeHbgTU/JWNS3UcRJKewq+oRD6O6g3MzlhUnE+xO94ui79Td4aeU4fq0jGHeLHIHCW04WMK4Yg==
+  dependencies:
+    codesandbox-import-utils "^1.2.3"
+    lodash.isequal "^4.5.0"
+
+"@codesandbox/sandpack-react@1.15.5":
+  version "1.15.5"
+  resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-react/-/sandpack-react-1.15.5.tgz#6ac1b69e64ab66cad69e194df629a826140c3d2c"
+  integrity sha512-S5iVt9l36QzQfBAbk4mS+VUiVoHdwCFil5cdYHutCAfTAzPQn+vvR7ZYrwFl/LoBChh8nH4EAMN9XTowrzQJYw==
+  dependencies:
+    "@code-hike/classer" "^0.0.0-aa6efee"
+    "@codemirror/closebrackets" "^0.19.0"
+    "@codemirror/commands" "^0.19.6"
+    "@codemirror/comment" "^0.19.0"
+    "@codemirror/gutter" "^0.19.9"
+    "@codemirror/highlight" "^0.19.6"
+    "@codemirror/history" "^0.19.0"
+    "@codemirror/lang-css" "^0.19.3"
+    "@codemirror/lang-html" "^0.19.4"
+    "@codemirror/lang-javascript" "^0.19.3"
+    "@codemirror/language" "^0.19.7"
+    "@codemirror/matchbrackets" "^0.19.3"
+    "@codemirror/state" "^0.19.6"
+    "@codemirror/view" "^0.19.32"
+    "@codesandbox/sandpack-client" "^1.12.1"
+    "@react-hook/intersection-observer" "^3.1.1"
+    "@stitches/core" "^1.2.6"
+    clean-set "^1.1.2"
+    codesandbox-import-util-types "^2.2.3"
+    lodash.isequal "^4.5.0"
+    lz-string "^1.4.4"
+    react-devtools-inline "4.4.0"
+    react-is "^17.0.2"
+
+"@csstools/convert-colors@^1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7"
+  integrity sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==
+
+"@docsearch/css@3.0.0-alpha.41":
+  version "3.0.0-alpha.41"
+  resolved "https://registry.yarnpkg.com/@docsearch/css/-/css-3.0.0-alpha.41.tgz#c5c8e803541bd157ad86e764c2c1e9f1b5a68592"
+  integrity sha512-AP1jqcF/9jCrm4s0lcES3QAtHueyipKjd14L/pguk0CZYK7uI7hC0FWodmRmrgK3/HST9jiHa1waUMR6ZYedlQ==
+
+"@docsearch/react@3.0.0-alpha.41":
+  version "3.0.0-alpha.41"
+  resolved "https://registry.yarnpkg.com/@docsearch/react/-/react-3.0.0-alpha.41.tgz#07e85a664e85f251ce3d13153abce65a4d5997ab"
+  integrity sha512-UL0Gdter/NUea04lGuBGH0GzQ2/2q/hBfn7Rjo71rRKbjtfkQCM92leJ9tZ+9j9sFLoyuHb9XMm/B8vCjWwTEg==
+  dependencies:
+    "@algolia/autocomplete-core" "1.2.2"
+    "@algolia/autocomplete-preset-algolia" "1.2.2"
+    "@docsearch/css" "3.0.0-alpha.41"
+    algoliasearch "^4.0.0"
+
+"@eslint/eslintrc@^0.4.3":
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.3.tgz#9e42981ef035beb3dd49add17acb96e8ff6f394c"
+  integrity sha512-J6KFFz5QCYUJq3pf0mjEcCJVERbzv71PUIDczuh9JkwGEzced6CO5ADLHB1rbf/+oPBtoPfMYNOpGDzCANlbXw==
+  dependencies:
+    ajv "^6.12.4"
+    debug "^4.1.1"
+    espree "^7.3.0"
+    globals "^13.9.0"
+    ignore "^4.0.6"
+    import-fresh "^3.2.1"
+    js-yaml "^3.13.1"
+    minimatch "^3.0.4"
+    strip-json-comments "^3.1.1"
+
+"@headlessui/react@^1.7.0":
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.0.tgz#7e36e6bbc25a24b02011527ae157a000dda88b85"
+  integrity sha512-/nDsijOXRwXVLpUBEiYuWguIBSIN3ZbKyah+KPUiD8bdIKtX1U/k+qLYUEr7NCQnSF2e4w1dr8me42ECuG3cvw==
+
+"@humanwhocodes/config-array@^0.5.0":
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.5.0.tgz#1407967d4c6eecd7388f83acf1eaf4d0c6e58ef9"
+  integrity sha512-FagtKFz74XrTl7y6HCzQpwDfXP0yhxe9lHLD1UZxjvZIcbyRz8zTFF/yYNfSfzU414eDwZ1SrO0Qvtyf+wFMQg==
+  dependencies:
+    "@humanwhocodes/object-schema" "^1.2.0"
+    debug "^4.1.1"
+    minimatch "^3.0.4"
+
+"@humanwhocodes/object-schema@^1.2.0":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
+  integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
+
+"@jridgewell/gen-mapping@^0.1.0":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz#e5d2e450306a9491e3bd77e323e38d7aff315996"
+  integrity sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==
+  dependencies:
+    "@jridgewell/set-array" "^1.0.0"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+
+"@jridgewell/gen-mapping@^0.3.2":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz#c1aedc61e853f2bb9f5dfe6d4442d3b565b253b9"
+  integrity sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==
+  dependencies:
+    "@jridgewell/set-array" "^1.0.1"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+    "@jridgewell/trace-mapping" "^0.3.9"
+
+"@jridgewell/resolve-uri@^3.0.3":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz#2203b118c157721addfe69d47b70465463066d78"
+  integrity sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==
+
+"@jridgewell/set-array@^1.0.0", "@jridgewell/set-array@^1.0.1":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.2.tgz#7c6cf998d6d20b914c0a55a91ae928ff25965e72"
+  integrity sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==
+
+"@jridgewell/sourcemap-codec@^1.4.10":
+  version "1.4.14"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz#add4c98d341472a289190b424efbdb096991bb24"
+  integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==
+
+"@jridgewell/trace-mapping@^0.3.9":
+  version "0.3.15"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.15.tgz#aba35c48a38d3fd84b37e66c9c0423f9744f9774"
+  integrity sha512-oWZNOULl+UbhsgB51uuZzglikfIKSUBO/M9W2OfEjn7cmqoAiCgmv9lyACTUacZwBz0ITnJ2NqjU8Tx0DHL88g==
+  dependencies:
+    "@jridgewell/resolve-uri" "^3.0.3"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+
+"@lezer/common@^0.15.0", "@lezer/common@^0.15.5":
+  version "0.15.11"
+  resolved "https://registry.yarnpkg.com/@lezer/common/-/common-0.15.11.tgz#965b5067036305f12e8a3efc344076850be1d3a8"
+  integrity sha512-vv0nSdIaVCRcJ8rPuDdsrNVfBOYe/4Szr/LhF929XyDmBndLDuWiCCHooGlGlJfzELyO608AyDhVsuX/ZG36NA==
+
+"@lezer/css@^0.15.2":
+  version "0.15.2"
+  resolved "https://registry.yarnpkg.com/@lezer/css/-/css-0.15.2.tgz#e96995da67df90bb4b191aaa8a486349cca5d8e7"
+  integrity sha512-tnMOMZY0Zs6JQeVjqfmREYMV0GnmZR1NitndLWioZMD6mA7VQF/PPKPmJX1f+ZgVZQc5Am0df9mX3aiJnNJlKQ==
+  dependencies:
+    "@lezer/lr" "^0.15.0"
+
+"@lezer/html@^0.15.0":
+  version "0.15.0"
+  resolved "https://registry.yarnpkg.com/@lezer/html/-/html-0.15.0.tgz#572c9444bc39c1afc0529a70e089abf7254edf5d"
+  integrity sha512-ErmgP/Vv0AhYJvs/Ekb9oue4IzBHemKLi7K8tJ0jgS+20Y8FGC9foK6knCXtEHqdPaxVGQH9PVp7gecLnzLd9Q==
+  dependencies:
+    "@lezer/lr" "^0.15.0"
+
+"@lezer/javascript@^0.15.1":
+  version "0.15.2"
+  resolved "https://registry.yarnpkg.com/@lezer/javascript/-/javascript-0.15.2.tgz#50b70a02561b047947e050e0619b1aea7131dc5f"
+  integrity sha512-ytWvdJ1NAc0pfrNipGQs8otJVfjVibpIiFKH0fl99rKSA6cVlyQN/XTj/dEAQCfBfCBPAFdc30cuUe5CGZ0odA==
+  dependencies:
+    "@lezer/lr" "^0.15.0"
+
+"@lezer/lr@^0.15.0":
+  version "0.15.7"
+  resolved "https://registry.yarnpkg.com/@lezer/lr/-/lr-0.15.7.tgz#e7e6a8a106c6474b4586a66a3e60ba85f1faf368"
+  integrity sha512-rmUukgyKSm6xzXO4cK5hkpX3+ZTHF+bHDkEuhofAVUTS3J23YytUxGWsrDwBVvGbhvxW87kheb2mRYHRwKacDQ==
+  dependencies:
+    "@lezer/common" "^0.15.0"
+
+"@mdx-js/mdx@^2.1.3":
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/@mdx-js/mdx/-/mdx-2.1.3.tgz#d5821920ebe546b45192f4c7a64dcc68a658f7f9"
+  integrity sha512-ahbb47HJIJ4xnifaL06tDJiSyLEy1EhFAStO7RZIm3GTa7yGW3NGhZaj+GUCveFgl5oI54pY4BgiLmYm97y+zg==
+  dependencies:
+    "@types/estree-jsx" "^1.0.0"
+    "@types/mdx" "^2.0.0"
+    estree-util-build-jsx "^2.0.0"
+    estree-util-is-identifier-name "^2.0.0"
+    estree-util-to-js "^1.1.0"
+    estree-walker "^3.0.0"
+    hast-util-to-estree "^2.0.0"
+    markdown-extensions "^1.0.0"
+    periscopic "^3.0.0"
+    remark-mdx "^2.0.0"
+    remark-parse "^10.0.0"
+    remark-rehype "^10.0.0"
+    unified "^10.0.0"
+    unist-util-position-from-estree "^1.0.0"
+    unist-util-stringify-position "^3.0.0"
+    unist-util-visit "^4.0.0"
+    vfile "^5.0.0"
+
+"@next/env@12.3.2-canary.7":
+  version "12.3.2-canary.7"
+  resolved "https://registry.yarnpkg.com/@next/env/-/env-12.3.2-canary.7.tgz#98cf3ed5e7d6af93965c708799ac02cb46ca3831"
+  integrity sha512-uk5yDvh8ra8PlIczZBTZKyt5Rf6a6mH2tGB3hwRAXD5hVLd74LzBQza2aYMEcDlRafAknsbL0dnqI3CkFYat9w==
+
+"@next/eslint-plugin-next@12.0.3":
+  version "12.0.3"
+  resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-12.0.3.tgz#3945c251d551bacc3712d4a18d6ca56d2938f175"
+  integrity sha512-P7i+bMypneQcoRN+CX79xssvvIJCaw7Fndzbe7/lB0+LyRbVvGVyMUsFmLLbSxtZq4hvFMJ1p8wML/gsulMZWQ==
+  dependencies:
+    glob "7.1.7"
+
+"@next/swc-android-arm-eabi@12.3.2-canary.7":
+  version "12.3.2-canary.7"
+  resolved "https://registry.yarnpkg.com/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-12.3.2-canary.7.tgz#21811767685d8a58756bbfff23a4e61c8da65a15"
+  integrity sha512-pusM/ylasGBweiwhINtqWCgy5bOjLmIctFD0etpmh9+DqCg09yu58hJ1Dn/UTW8EbB1nkTP1z3dEoMKLh4fV2A==
+
+"@next/swc-android-arm64@12.3.2-canary.7":
+  version "12.3.2-canary.7"
+  resolved "https://registry.yarnpkg.com/@next/swc-android-arm64/-/swc-android-arm64-12.3.2-canary.7.tgz#278e709c31ac5aceebd5e7f66efb81dae40ccab6"
+  integrity sha512-x11T0ocPE9xrnqMeDzUMepN3P8CHIN8iiLgiFkbTbKTbSciuH3juOvKggJO9APZRG5Ch5eePWcCy2gHedAbhnA==
+
+"@next/swc-darwin-arm64@12.3.2-canary.7":
+  version "12.3.2-canary.7"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.3.2-canary.7.tgz#7858ecf88a4e252ef6b66c59e38449a79647e362"
+  integrity sha512-tcO9hDaMfcbiaZp1B+HZcLzGGs36dnmjQ0YXyn6C88HEUoKyxanYleVHtTmWHlgsxxjZdDd/RzOze1ycWs2oXw==
+
+"@next/swc-darwin-x64@12.3.2-canary.7":
+  version "12.3.2-canary.7"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-12.3.2-canary.7.tgz#9225324b6de548ce7fd21c31d4725910c5b7d136"
+  integrity sha512-WjAyU67zj69nRM2GNAnBLvghq4EHTyDzMO02GjG6yexVhDvkE0OFlvh0BQLI3DIOz+B3RjJRcW3OoHi8XzW9UA==
+
+"@next/swc-freebsd-x64@12.3.2-canary.7":
+  version "12.3.2-canary.7"
+  resolved "https://registry.yarnpkg.com/@next/swc-freebsd-x64/-/swc-freebsd-x64-12.3.2-canary.7.tgz#cf3374f2c3ddf370ed27cac84258760b282b6981"
+  integrity sha512-cQrdPCMhP1Mc+pIt16FlC5BVgcXzLXRlm7qZ7wBRKG6r/IIIn/qNRFgQQcB3iyvfNZo7lURLKcfsxNmMGclldQ==
+
+"@next/swc-linux-arm-gnueabihf@12.3.2-canary.7":
+  version "12.3.2-canary.7"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.3.2-canary.7.tgz#b8e82ec743ceadfce25b7e74dfb447913b603c44"
+  integrity sha512-LEL+dUe10FhQHyXq9Mul5pOJwKDtrAylh9chktWf8eFr14j/YrfPbkLHv1+tCK8brDV3afVJMl0IpoCo75Yfyg==
+
+"@next/swc-linux-arm64-gnu@12.3.2-canary.7":
+  version "12.3.2-canary.7"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.3.2-canary.7.tgz#1711f46f004553f3c8ab7546b49e65f88abbbfd6"
+  integrity sha512-mbDqHk3C76UGIzkOv+G5NslKiSYIXyWQwbkuty0+0wLVJttWjWi2dMN7DFJQPMNvBefU9/vxVJdUnGVGEZfUXw==
+
+"@next/swc-linux-arm64-musl@12.3.2-canary.7":
+  version "12.3.2-canary.7"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.3.2-canary.7.tgz#e20b71ce215280bc2cadcf94f9755fdf3ffc0b24"
+  integrity sha512-gJ3VQHuqb3ABiOKPxfWAJQdO4mp3yNnWIAPN8n52F7Zu38udbHXvcbIylWfQW/Qah+RRf7P7y2txH2kC07QOPA==
+
+"@next/swc-linux-x64-gnu@12.3.2-canary.7":
+  version "12.3.2-canary.7"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.3.2-canary.7.tgz#176cf50080f121537877dbdfb7d667be19333a8c"
+  integrity sha512-/PBLiC+JfMJIzwMCQaSQgnLoIOjdSjTA9zarj2Kk1eCLjH8/VnsfBWtmP7TdbgIRYnZ8QKb4HXSOq94ZQS/fkw==
+
+"@next/swc-linux-x64-musl@12.3.2-canary.7":
+  version "12.3.2-canary.7"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.3.2-canary.7.tgz#96b858043d76b87f90b7da43afe13c5942dbceea"
+  integrity sha512-Bf3goHoUd0SB58sVTMva0ByoLM+aEhm5YJRqsi7SsOAu9EAQwYfWgY2Hx60ah5i1N4ihYK0xjs8kwlfdDVOuow==
+
+"@next/swc-win32-arm64-msvc@12.3.2-canary.7":
+  version "12.3.2-canary.7"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.3.2-canary.7.tgz#dd1a36d4afbecc623e71426897cea683a3a75666"
+  integrity sha512-aPRQ4dY5MuLgHCVdY+/Grgg4oX38pG4S0sT8mpatK3oIdjhj3961cj33QpPAy6dhhCs8m0/eCWYmM9KKlAAUsg==
+
+"@next/swc-win32-ia32-msvc@12.3.2-canary.7":
+  version "12.3.2-canary.7"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.3.2-canary.7.tgz#a7455ea57f88345a92c0067e82aa1b7aa5728088"
+  integrity sha512-hr+TBDICVezyn0HDK4QootalbcuLj9F8qUzZZAw3gHz16rUDpqpnlRjw3RC99AzkKL7qMsdR/+SwnBlBY7ZK7Q==
+
+"@next/swc-win32-x64-msvc@12.3.2-canary.7":
+  version "12.3.2-canary.7"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.3.2-canary.7.tgz#4e0d6d567c254e2cf00738f876ddafe5b611ee03"
+  integrity sha512-1n29b6meb54h/Mw/1xPoJB682nWbtEsUQo7rFJ6G44Nj3fYFXe+XOWQxWu6Sl8yvdBXcZRhRCHuAZGqYtmqorQ==
+
+"@nodelib/fs.scandir@2.1.5":
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
+  integrity sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==
+  dependencies:
+    "@nodelib/fs.stat" "2.0.5"
+    run-parallel "^1.1.9"
+
+"@nodelib/fs.stat@2.0.5", "@nodelib/fs.stat@^2.0.2":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz#5bd262af94e9d25bd1e71b05deed44876a222e8b"
+  integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
+
+"@nodelib/fs.walk@^1.2.3":
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz#e95737e8bb6746ddedf69c556953494f196fe69a"
+  integrity sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==
+  dependencies:
+    "@nodelib/fs.scandir" "2.1.5"
+    fastq "^1.6.0"
+
+"@polka/url@^1.0.0-next.20":
+  version "1.0.0-next.21"
+  resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.21.tgz#5de5a2385a35309427f6011992b544514d559aa1"
+  integrity sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==
+
+"@react-hook/intersection-observer@^3.1.1":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@react-hook/intersection-observer/-/intersection-observer-3.1.1.tgz#6b8fdb80d133c9c28bc8318368ecb3a1f8befc50"
+  integrity sha512-OTDx8/wFaRvzFtKl1dEUEXSOqK2zVJHporiTTdC2xO++0e9FEx9wIrPis5q3lqtXeZH9zYGLbk+aB75qNFbbuw==
+  dependencies:
+    "@react-hook/passive-layout-effect" "^1.2.0"
+    intersection-observer "^0.10.0"
+
+"@react-hook/passive-layout-effect@^1.2.0":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@react-hook/passive-layout-effect/-/passive-layout-effect-1.2.1.tgz#c06dac2d011f36d61259aa1c6df4f0d5e28bc55e"
+  integrity sha512-IwEphTD75liO8g+6taS+4oqz+nnroocNfWVHWz7j+N+ZO2vYrc6PV1q7GQhuahL0IOR7JccFTsFKQ/mb6iZWAg==
+
+"@rushstack/eslint-patch@^1.0.6":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.1.0.tgz#7f698254aadf921e48dda8c0a6b304026b8a9323"
+  integrity sha512-JLo+Y592QzIE+q7Dl2pMUtt4q8SKYI5jDrZxrozEQxnGVOyYE+GWK9eLkwTaeN9DDctlaRAQ3TBmzZ1qdLE30A==
+
+"@stitches/core@^1.2.6":
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/@stitches/core/-/core-1.2.8.tgz#dce3b8fdc764fbc6dbea30c83b73bfb52cf96173"
+  integrity sha512-Gfkvwk9o9kE9r9XNBmJRfV8zONvXThnm1tcuojL04Uy5uRyqg93DC83lDebl0rocZCfKSjUv+fWYtMQmEDJldg==
+
+"@swc/helpers@0.4.11":
+  version "0.4.11"
+  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.4.11.tgz#db23a376761b3d31c26502122f349a21b592c8de"
+  integrity sha512-rEUrBSGIoSFuYxwBYtlUFMlE2CwGhmW+w9355/5oduSw8e5h2+Tj4UrAGNNgP9915++wj5vkQo0UuOBqOAq4nw==
+  dependencies:
+    tslib "^2.4.0"
+
+"@types/acorn@^4.0.0":
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/@types/acorn/-/acorn-4.0.6.tgz#d61ca5480300ac41a7d973dd5b84d0a591154a22"
+  integrity sha512-veQTnWP+1D/xbxVrPC3zHnCZRjSrKfhbMUlEA43iMZLu7EsnTtkJklIuwrCPbOi8YkvDQAiW05VQQFvvz9oieQ==
+  dependencies:
+    "@types/estree" "*"
+
+"@types/body-scroll-lock@^2.6.1":
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/@types/body-scroll-lock/-/body-scroll-lock-2.6.2.tgz#ce56d17e1bf8383c08a074733c4e9e536a59ae61"
+  integrity sha512-PhoQPbwPYspXqf7lkwtF7aJzAwL88t+9E/e0b2X84tlHpU8ZuS9UNnLtkT0XhyZJYHpET5qRfIdZ0HBIxuc7HQ==
+
+"@types/classnames@^2.2.10":
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/@types/classnames/-/classnames-2.3.1.tgz#3c2467aa0f1a93f1f021e3b9bcf938bd5dfdc0dd"
+  integrity sha512-zeOWb0JGBoVmlQoznvqXbE0tEC/HONsnoUNH19Hc96NFsTAwTXbTqb8FMYkru1F/iqp7a18Ws3nWJvtA1sHD1A==
+  dependencies:
+    classnames "*"
+
+"@types/debounce@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@types/debounce/-/debounce-1.2.1.tgz#79b65710bc8b6d44094d286aecf38e44f9627852"
+  integrity sha512-epMsEE85fi4lfmJUH/89/iV/LI+F5CvNIvmgs5g5jYFPfhO2S/ae8WSsLOKWdwtoaZw9Q2IhJ4tQ5tFCcS/4HA==
+
+"@types/debug@^4.0.0":
+  version "4.1.7"
+  resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.7.tgz#7cc0ea761509124709b8b2d1090d8f6c17aadb82"
+  integrity sha512-9AonUzyTjXXhEOa0DnqpzZi6VHlqKMswga9EXjpXnnqxwLtdvPPtlO8evrI5D9S6asFRCQ6v+wpiUKbw+vKqyg==
+  dependencies:
+    "@types/ms" "*"
+
+"@types/estree-jsx@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@types/estree-jsx/-/estree-jsx-1.0.0.tgz#7bfc979ab9f692b492017df42520f7f765e98df1"
+  integrity sha512-3qvGd0z8F2ENTGr/GG1yViqfiKmRfrXVx5sJyHGFu3z7m5g5utCQtGp/g29JnjflhtQJBv1WDQukHiT58xPcYQ==
+  dependencies:
+    "@types/estree" "*"
+
+"@types/estree@*", "@types/estree@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.0.tgz#5fb2e536c1ae9bf35366eed879e827fa59ca41c2"
+  integrity sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==
+
+"@types/github-slugger@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@types/github-slugger/-/github-slugger-1.3.0.tgz#16ab393b30d8ae2a111ac748a015ac05a1fc5524"
+  integrity sha512-J/rMZa7RqiH/rT29TEVZO4nBoDP9XJOjnbbIofg7GQKs4JIduEO3WLpte+6WeUz/TcrXKlY+bM7FYrp8yFB+3g==
+
+"@types/hast@^2.0.0", "@types/hast@^2.3.2":
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/@types/hast/-/hast-2.3.4.tgz#8aa5ef92c117d20d974a82bdfb6a648b08c0bafc"
+  integrity sha512-wLEm0QvaoawEDoTRwzTXp4b4jpwiJDvR5KMnFnVodm3scufTlBOWRD6N1OBf9TZMhjlNsSfcO5V+7AF4+Vy+9g==
+  dependencies:
+    "@types/unist" "*"
+
+"@types/json-schema@^7.0.9":
+  version "7.0.11"
+  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3"
+  integrity sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==
+
+"@types/json5@^0.0.29":
+  version "0.0.29"
+  resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
+  integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
+
+"@types/mdast@^3.0.0":
+  version "3.0.10"
+  resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-3.0.10.tgz#4724244a82a4598884cbbe9bcfd73dff927ee8af"
+  integrity sha512-W864tg/Osz1+9f4lrGTZpCSO5/z4608eUp19tbozkq2HJK6i3z1kT0H9tlADXuYIb1YYOBByU4Jsqkk75q48qA==
+  dependencies:
+    "@types/unist" "*"
+
+"@types/mdurl@^1.0.0":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@types/mdurl/-/mdurl-1.0.2.tgz#e2ce9d83a613bacf284c7be7d491945e39e1f8e9"
+  integrity sha512-eC4U9MlIcu2q0KQmXszyn5Akca/0jrQmwDRgpAMJai7qBWq4amIQhZyNau4VYGtCeALvW1/NtjzJJ567aZxfKA==
+
+"@types/mdx-js__react@^1.5.2":
+  version "1.5.5"
+  resolved "https://registry.yarnpkg.com/@types/mdx-js__react/-/mdx-js__react-1.5.5.tgz#fa6daa1a28336d77b6cf071aacc7e497600de9ee"
+  integrity sha512-k8pnaP6JXVlQh18HgL5X6sYFNC/qZnzO7R2+HsmwrwUd+JnnsU0d9lyyT0RQrHg1anxDU36S98TI/fsGtmYqqg==
+  dependencies:
+    "@types/react" "*"
+
+"@types/mdx@^2.0.0":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@types/mdx/-/mdx-2.0.2.tgz#64be19baddba4323ae7893e077e98759316fe279"
+  integrity sha512-mJGfgj4aWpiKb8C0nnJJchs1sHBHn0HugkVfqqyQi7Wn6mBRksLeQsPOFvih/Pu8L1vlDzfe/LidhVHBeUk3aQ==
+
+"@types/ms@*":
+  version "0.7.31"
+  resolved "https://registry.yarnpkg.com/@types/ms/-/ms-0.7.31.tgz#31b7ca6407128a3d2bbc27fe2d21b345397f6197"
+  integrity sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==
+
+"@types/node@^14.6.4":
+  version "14.18.9"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.18.9.tgz#0e5944eefe2b287391279a19b407aa98bd14436d"
+  integrity sha512-j11XSuRuAlft6vLDEX4RvhqC0KxNxx6QIyMXNb0vHHSNPXTPeiy3algESWmOOIzEtiEL0qiowPU3ewW9hHVa7Q==
+
+"@types/parse-json@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
+  integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
+
+"@types/parse-numeric-range@^0.0.1":
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/@types/parse-numeric-range/-/parse-numeric-range-0.0.1.tgz#1a807487565a753f486cb3ee4b2145937d49759d"
+  integrity sha512-nI3rPGKk8BxedokP2VilnW5JyZHYNjGCUDsAZ2JQgISgDflHNUO0wXMfGYP8CkihrKYDm5tilD52XfGhO/ZFCA==
+
+"@types/prop-types@*":
+  version "15.7.4"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11"
+  integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==
+
+"@types/react-dom@^18.0.5":
+  version "18.0.5"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.5.tgz#330b2d472c22f796e5531446939eacef8378444a"
+  integrity sha512-OWPWTUrY/NIrjsAPkAk1wW9LZeIjSvkXRhclsFO8CZcZGCOg2G0YZy4ft+rOyYxy8B7ui5iZzi9OkDebZ7/QSA==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react@*":
+  version "17.0.38"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.38.tgz#f24249fefd89357d5fa71f739a686b8d7c7202bd"
+  integrity sha512-SI92X1IA+FMnP3qM5m4QReluXzhcmovhZnLNm3pyeQlooi02qI7sLiepEYqT678uNiyc25XfCqxREFpy3W7YhQ==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
+"@types/react@^18.0.9":
+  version "18.0.9"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.9.tgz#d6712a38bd6cd83469603e7359511126f122e878"
+  integrity sha512-9bjbg1hJHUm4De19L1cHiW0Jvx3geel6Qczhjd0qY5VKVE2X5+x77YxAepuCwVh4vrgZJdgEJw48zrhRIeF4Nw==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
+"@types/scheduler@*":
+  version "0.16.2"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
+  integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
+
+"@types/unist@*", "@types/unist@^2.0.0", "@types/unist@^2.0.2":
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.6.tgz#250a7b16c3b91f672a24552ec64678eeb1d3a08d"
+  integrity sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==
+
+"@typescript-eslint/eslint-plugin@^5.36.2":
+  version "5.36.2"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.36.2.tgz#6df092a20e0f9ec748b27f293a12cb39d0c1fe4d"
+  integrity sha512-OwwR8LRwSnI98tdc2z7mJYgY60gf7I9ZfGjN5EjCwwns9bdTuQfAXcsjSB2wSQ/TVNYSGKf4kzVXbNGaZvwiXw==
+  dependencies:
+    "@typescript-eslint/scope-manager" "5.36.2"
+    "@typescript-eslint/type-utils" "5.36.2"
+    "@typescript-eslint/utils" "5.36.2"
+    debug "^4.3.4"
+    functional-red-black-tree "^1.0.1"
+    ignore "^5.2.0"
+    regexpp "^3.2.0"
+    semver "^7.3.7"
+    tsutils "^3.21.0"
+
+"@typescript-eslint/parser@^4.20.0":
+  version "4.33.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.33.0.tgz#dfe797570d9694e560528d18eecad86c8c744899"
+  integrity sha512-ZohdsbXadjGBSK0/r+d87X0SBmKzOq4/S5nzK6SBgJspFo9/CUDJ7hjayuze+JK7CZQLDMroqytp7pOcFKTxZA==
+  dependencies:
+    "@typescript-eslint/scope-manager" "4.33.0"
+    "@typescript-eslint/types" "4.33.0"
+    "@typescript-eslint/typescript-estree" "4.33.0"
+    debug "^4.3.1"
+
+"@typescript-eslint/parser@^5.36.2":
+  version "5.36.2"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.36.2.tgz#3ddf323d3ac85a25295a55fcb9c7a49ab4680ddd"
+  integrity sha512-qS/Kb0yzy8sR0idFspI9Z6+t7mqk/oRjnAYfewG+VN73opAUvmYL3oPIMmgOX6CnQS6gmVIXGshlb5RY/R22pA==
+  dependencies:
+    "@typescript-eslint/scope-manager" "5.36.2"
+    "@typescript-eslint/types" "5.36.2"
+    "@typescript-eslint/typescript-estree" "5.36.2"
+    debug "^4.3.4"
+
+"@typescript-eslint/scope-manager@4.33.0":
+  version "4.33.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.33.0.tgz#d38e49280d983e8772e29121cf8c6e9221f280a3"
+  integrity sha512-5IfJHpgTsTZuONKbODctL4kKuQje/bzBRkwHE8UOZ4f89Zeddg+EGZs8PD8NcN4LdM3ygHWYB3ukPAYjvl/qbQ==
+  dependencies:
+    "@typescript-eslint/types" "4.33.0"
+    "@typescript-eslint/visitor-keys" "4.33.0"
+
+"@typescript-eslint/scope-manager@5.36.2":
+  version "5.36.2"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.36.2.tgz#a75eb588a3879ae659514780831370642505d1cd"
+  integrity sha512-cNNP51L8SkIFSfce8B1NSUBTJTu2Ts4nWeWbFrdaqjmn9yKrAaJUBHkyTZc0cL06OFHpb+JZq5AUHROS398Orw==
+  dependencies:
+    "@typescript-eslint/types" "5.36.2"
+    "@typescript-eslint/visitor-keys" "5.36.2"
+
+"@typescript-eslint/type-utils@5.36.2":
+  version "5.36.2"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.36.2.tgz#752373f4babf05e993adf2cd543a763632826391"
+  integrity sha512-rPQtS5rfijUWLouhy6UmyNquKDPhQjKsaKH0WnY6hl/07lasj8gPaH2UD8xWkePn6SC+jW2i9c2DZVDnL+Dokw==
+  dependencies:
+    "@typescript-eslint/typescript-estree" "5.36.2"
+    "@typescript-eslint/utils" "5.36.2"
+    debug "^4.3.4"
+    tsutils "^3.21.0"
+
+"@typescript-eslint/types@4.33.0":
+  version "4.33.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.33.0.tgz#a1e59036a3b53ae8430ceebf2a919dc7f9af6d72"
+  integrity sha512-zKp7CjQzLQImXEpLt2BUw1tvOMPfNoTAfb8l51evhYbOEEzdWyQNmHWWGPR6hwKJDAi+1VXSBmnhL9kyVTTOuQ==
+
+"@typescript-eslint/types@5.36.2":
+  version "5.36.2"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.36.2.tgz#a5066e500ebcfcee36694186ccc57b955c05faf9"
+  integrity sha512-9OJSvvwuF1L5eS2EQgFUbECb99F0mwq501w0H0EkYULkhFa19Qq7WFbycdw1PexAc929asupbZcgjVIe6OK/XQ==
+
+"@typescript-eslint/typescript-estree@4.33.0":
+  version "4.33.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.33.0.tgz#0dfb51c2908f68c5c08d82aefeaf166a17c24609"
+  integrity sha512-rkWRY1MPFzjwnEVHsxGemDzqqddw2QbTJlICPD9p9I9LfsO8fdmfQPOX3uKfUaGRDFJbfrtm/sXhVXN4E+bzCA==
+  dependencies:
+    "@typescript-eslint/types" "4.33.0"
+    "@typescript-eslint/visitor-keys" "4.33.0"
+    debug "^4.3.1"
+    globby "^11.0.3"
+    is-glob "^4.0.1"
+    semver "^7.3.5"
+    tsutils "^3.21.0"
+
+"@typescript-eslint/typescript-estree@5.36.2":
+  version "5.36.2"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.36.2.tgz#0c93418b36c53ba0bc34c61fe9405c4d1d8fe560"
+  integrity sha512-8fyH+RfbKc0mTspfuEjlfqA4YywcwQK2Amcf6TDOwaRLg7Vwdu4bZzyvBZp4bjt1RRjQ5MDnOZahxMrt2l5v9w==
+  dependencies:
+    "@typescript-eslint/types" "5.36.2"
+    "@typescript-eslint/visitor-keys" "5.36.2"
+    debug "^4.3.4"
+    globby "^11.1.0"
+    is-glob "^4.0.3"
+    semver "^7.3.7"
+    tsutils "^3.21.0"
+
+"@typescript-eslint/utils@5.36.2":
+  version "5.36.2"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.36.2.tgz#b01a76f0ab244404c7aefc340c5015d5ce6da74c"
+  integrity sha512-uNcopWonEITX96v9pefk9DC1bWMdkweeSsewJ6GeC7L6j2t0SJywisgkr9wUTtXk90fi2Eljj90HSHm3OGdGRg==
+  dependencies:
+    "@types/json-schema" "^7.0.9"
+    "@typescript-eslint/scope-manager" "5.36.2"
+    "@typescript-eslint/types" "5.36.2"
+    "@typescript-eslint/typescript-estree" "5.36.2"
+    eslint-scope "^5.1.1"
+    eslint-utils "^3.0.0"
+
+"@typescript-eslint/visitor-keys@4.33.0":
+  version "4.33.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.33.0.tgz#2a22f77a41604289b7a186586e9ec48ca92ef1dd"
+  integrity sha512-uqi/2aSz9g2ftcHWf8uLPJA70rUv6yuMW5Bohw+bwcuzaxQIHaKFZCKGoGXIrc9vkTJ3+0txM73K0Hq3d5wgIg==
+  dependencies:
+    "@typescript-eslint/types" "4.33.0"
+    eslint-visitor-keys "^2.0.0"
+
+"@typescript-eslint/visitor-keys@5.36.2":
+  version "5.36.2"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.36.2.tgz#2f8f78da0a3bad3320d2ac24965791ac39dace5a"
+  integrity sha512-BtRvSR6dEdrNt7Net2/XDjbYKU5Ml6GqJgVfXT0CxTCJlnIqK7rAGreuWKMT2t8cFUT2Msv5oxw0GMRD7T5J7A==
+  dependencies:
+    "@typescript-eslint/types" "5.36.2"
+    eslint-visitor-keys "^3.3.0"
+
+"@yarnpkg/lockfile@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz#e77a97fbd345b76d83245edcd17d393b1b41fb31"
+  integrity sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==
+
+absolute-path@^0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/absolute-path/-/absolute-path-0.0.0.tgz#a78762fbdadfb5297be99b15d35a785b2f095bf7"
+  integrity sha512-HQiug4c+/s3WOvEnDRxXVmNtSG5s2gJM9r19BTcqjp7BWcE48PB+Y2G6jE65kqI0LpsQeMZygt/b60Gi4KxGyA==
+
+accepts@~1.3.8:
+  version "1.3.8"
+  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.8.tgz#0bf0be125b67014adcb0b0921e62db7bffe16b2e"
+  integrity sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==
+  dependencies:
+    mime-types "~2.1.34"
+    negotiator "0.6.3"
+
+acorn-jsx@^5.0.0, acorn-jsx@^5.3.1:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
+  integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
+
+acorn-node@^1.6.1:
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/acorn-node/-/acorn-node-1.8.2.tgz#114c95d64539e53dede23de8b9d96df7c7ae2af8"
+  integrity sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==
+  dependencies:
+    acorn "^7.0.0"
+    acorn-walk "^7.0.0"
+    xtend "^4.0.2"
+
+acorn-walk@^7.0.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc"
+  integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==
+
+acorn-walk@^8.0.0:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.2.0.tgz#741210f2e2426454508853a2f44d0ab83b7f69c1"
+  integrity sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==
+
+acorn@^7.0.0, acorn@^7.4.0:
+  version "7.4.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
+  integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
+
+acorn@^8.0.0:
+  version "8.8.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.0.tgz#88c0187620435c7f6015803f5539dae05a9dbea8"
+  integrity sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==
+
+acorn@^8.0.4:
+  version "8.7.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.7.0.tgz#90951fde0f8f09df93549481e5fc141445b791cf"
+  integrity sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==
+
+aggregate-error@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/aggregate-error/-/aggregate-error-3.1.0.tgz#92670ff50f5359bdb7a3e0d40d0ec30c5737687a"
+  integrity sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==
+  dependencies:
+    clean-stack "^2.0.0"
+    indent-string "^4.0.0"
+
+ajv@^6.10.0, ajv@^6.12.4:
+  version "6.12.6"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
+  integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
+
+ajv@^8.0.1:
+  version "8.9.0"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.9.0.tgz#738019146638824dea25edcf299dcba1b0e7eb18"
+  integrity sha512-qOKJyNj/h+OWx7s5DePL6Zu1KeM9jPZhwBqs+7DzP6bGOvqzVCSf0xueYmVuaC/oQ/VtS2zLMLHdQFbkka+XDQ==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    json-schema-traverse "^1.0.0"
+    require-from-string "^2.0.2"
+    uri-js "^4.2.2"
+
+algoliasearch@^4.0.0:
+  version "4.12.0"
+  resolved "https://registry.yarnpkg.com/algoliasearch/-/algoliasearch-4.12.0.tgz#30f2619b6e3a5b79b6aa0f18ab66fbce88240aba"
+  integrity sha512-fZOMMm+F3Bi5M/MoFIz7hiuyCitJza0Hu+r8Wzz4LIQClC6YGMRq7kT6NNU1fSSoFDSeJIwMfedbbi5G9dJoVQ==
+  dependencies:
+    "@algolia/cache-browser-local-storage" "4.12.0"
+    "@algolia/cache-common" "4.12.0"
+    "@algolia/cache-in-memory" "4.12.0"
+    "@algolia/client-account" "4.12.0"
+    "@algolia/client-analytics" "4.12.0"
+    "@algolia/client-common" "4.12.0"
+    "@algolia/client-personalization" "4.12.0"
+    "@algolia/client-search" "4.12.0"
+    "@algolia/logger-common" "4.12.0"
+    "@algolia/logger-console" "4.12.0"
+    "@algolia/requester-browser-xhr" "4.12.0"
+    "@algolia/requester-common" "4.12.0"
+    "@algolia/requester-node-http" "4.12.0"
+    "@algolia/transporter" "4.12.0"
+
+ansi-colors@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.1.tgz#cbb9ae256bf750af1eab344f229aa27fe94ba348"
+  integrity sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==
+
+ansi-escapes@^4.3.0:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-4.3.2.tgz#6b2291d1db7d98b6521d5f1efa42d0f3a9feb65e"
+  integrity sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==
+  dependencies:
+    type-fest "^0.21.3"
+
+ansi-regex@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
+  integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
+
+ansi-regex@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-6.0.1.tgz#3183e38fae9a65d7cb5e53945cd5897d0260a06a"
+  integrity sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==
+
+ansi-styles@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
+  integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
+  dependencies:
+    color-convert "^1.9.0"
+
+ansi-styles@^4.0.0, ansi-styles@^4.1.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
+  integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
+  dependencies:
+    color-convert "^2.0.1"
+
+ansi-styles@^6.0.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.1.0.tgz#87313c102b8118abd57371afab34618bf7350ed3"
+  integrity sha512-VbqNsoz55SYGczauuup0MFUyXNQviSpFTj1RQtFzmQLk18qbVSpTFFGMT293rmDaQuKCT6InmbuEyUne4mTuxQ==
+
+anymatch@~3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716"
+  integrity sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
+arg@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.1.tgz#eb0c9a8f77786cad2af8ff2b862899842d7b6adb"
+  integrity sha512-e0hDa9H2Z9AwFkk2qDlwhoMYE4eToKarchkQHovNdLTCYMHZHeRjI71crOh+dio4K6u1IcwubQqo79Ga4CyAQA==
+
+argparse@^1.0.7:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
+  integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
+  dependencies:
+    sprintf-js "~1.0.2"
+
+aria-query@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-4.2.2.tgz#0d2ca6c9aceb56b8977e9fed6aed7e15bbd2f83b"
+  integrity sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==
+  dependencies:
+    "@babel/runtime" "^7.10.2"
+    "@babel/runtime-corejs3" "^7.10.2"
+
+array-flatten@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
+  integrity sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==
+
+array-includes@^3.1.3, array-includes@^3.1.4:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.4.tgz#f5b493162c760f3539631f005ba2bb46acb45ba9"
+  integrity sha512-ZTNSQkmWumEbiHO2GF4GmWxYVTiQyJy2XOTa15sdQSrvKn7l+180egQMqlrMOUMCyLMD7pmyQe4mMDUT6Behrw==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.19.1"
+    get-intrinsic "^1.1.1"
+    is-string "^1.0.7"
+
+array-iterate@^1.0.0:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/array-iterate/-/array-iterate-1.1.4.tgz#add1522e9dd9749bb41152d08b845bd08d6af8b7"
+  integrity sha512-sNRaPGh9nnmdC8Zf+pT3UqP8rnWj5Hf9wiFGsX3wUQ2yVSIhO2ShFwCoceIPpB41QF6i2OEmrHmCo36xronCVA==
+
+array-union@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
+  integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==
+
+array.prototype.flat@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.2.5.tgz#07e0975d84bbc7c48cd1879d609e682598d33e13"
+  integrity sha512-KaYU+S+ndVqyUnignHftkwc58o3uVU1jzczILJ1tN2YaIZpFIKBiP/x/j97E5MVPsaCloPbqWLB/8qCTVvT2qg==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.19.0"
+
+array.prototype.flatmap@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.2.5.tgz#908dc82d8a406930fdf38598d51e7411d18d4446"
+  integrity sha512-08u6rVyi1Lj7oqWbS9nUxliETrtIROT4XGTA4D/LWGten6E3ocm7cy9SIrmNHOL5XVbVuckUp3X6Xyg8/zpvHA==
+  dependencies:
+    call-bind "^1.0.0"
+    define-properties "^1.1.3"
+    es-abstract "^1.19.0"
+
+ast-types-flow@^0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.7.tgz#f70b735c6bca1a5c9c22d982c3e39e7feba3bdad"
+  integrity sha1-9wtzXGvKGlycItmCw+Oef+ujva0=
+
+astral-regex@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-2.0.0.tgz#483143c567aeed4785759c0865786dc77d7d2e31"
+  integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==
+
+astring@^1.8.0:
+  version "1.8.3"
+  resolved "https://registry.yarnpkg.com/astring/-/astring-1.8.3.tgz#1a0ae738c7cc558f8e5ddc8e3120636f5cebcb85"
+  integrity sha512-sRpyiNrx2dEYIMmUXprS8nlpRg2Drs8m9ElX9vVEXaCB4XEAJhKfs7IcX0IwShjuOAjLR6wzIrgoptz1n19i1A==
+
+asyncro@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/asyncro/-/asyncro-3.0.0.tgz#3c7a732e263bc4a42499042f48d7d858e9c0134e"
+  integrity sha512-nEnWYfrBmA3taTiuiOoZYmgJ/CNrSoQLeLs29SeLcPu60yaw/mHDBHV0iOZ051fTvsTHxpCY+gXibqT9wbQYfg==
+
+at-least-node@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/at-least-node/-/at-least-node-1.0.0.tgz#602cd4b46e844ad4effc92a8011a3c46e0238dc2"
+  integrity sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==
+
+autoprefixer@^10.4.2:
+  version "10.4.2"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.2.tgz#25e1df09a31a9fba5c40b578936b90d35c9d4d3b"
+  integrity sha512-9fOPpHKuDW1w/0EKfRmVnxTDt8166MAnLI3mgZ1JCnhNtYWxcJ6Ud5CO/AVOZi/AvFa8DY9RTy3h3+tFBlrrdQ==
+  dependencies:
+    browserslist "^4.19.1"
+    caniuse-lite "^1.0.30001297"
+    fraction.js "^4.1.2"
+    normalize-range "^0.1.2"
+    picocolors "^1.0.0"
+    postcss-value-parser "^4.2.0"
+
+autoprefixer@^9.6.1:
+  version "9.8.8"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.8.8.tgz#fd4bd4595385fa6f06599de749a4d5f7a474957a"
+  integrity sha512-eM9d/swFopRt5gdJ7jrpCwgvEMIayITpojhkkSMRsFHYuH5bkSQ4p/9qTEHtmNudUZh22Tehu7I6CxAW0IXTKA==
+  dependencies:
+    browserslist "^4.12.0"
+    caniuse-lite "^1.0.30001109"
+    normalize-range "^0.1.2"
+    num2fraction "^1.2.2"
+    picocolors "^0.2.1"
+    postcss "^7.0.32"
+    postcss-value-parser "^4.1.0"
+
+axe-core@^4.3.5:
+  version "4.3.5"
+  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.3.5.tgz#78d6911ba317a8262bfee292aeafcc1e04b49cc5"
+  integrity sha512-WKTW1+xAzhMS5dJsxWkliixlO/PqC4VhmO9T4juNYcaTg9jzWiJsou6m5pxWYGfigWbwzJWeFY6z47a+4neRXA==
+
+axobject-query@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
+  integrity sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==
+
+babel-eslint@10.x:
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-10.1.0.tgz#6968e568a910b78fb3779cdd8b6ac2f479943232"
+  integrity sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@babel/parser" "^7.7.0"
+    "@babel/traverse" "^7.7.0"
+    "@babel/types" "^7.7.0"
+    eslint-visitor-keys "^1.0.0"
+    resolve "^1.12.0"
+
+babel-plugin-dynamic-import-node@^2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz#84fda19c976ec5c6defef57f9427b3def66e17a3"
+  integrity sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ==
+  dependencies:
+    object.assign "^4.1.0"
+
+bail@^1.0.0:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/bail/-/bail-1.0.5.tgz#b6fa133404a392cbc1f8c4bf63f5953351e7a776"
+  integrity sha512-xFbRxM1tahm08yHBP16MMjVUAvDaBMD38zsM9EMAUN61omwLmKlOpB/Zku5QkjZ8TZ4vn53pj+t518cH0S03RQ==
+
+bail@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/bail/-/bail-2.0.2.tgz#d26f5cd8fe5d6f832a31517b9f7c356040ba6d5d"
+  integrity sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==
+
+balanced-match@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
+  integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
+
+binary-extensions@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
+  integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
+
+binaryextensions@2:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/binaryextensions/-/binaryextensions-2.3.0.tgz#1d269cbf7e6243ea886aa41453c3651ccbe13c22"
+  integrity sha512-nAihlQsYGyc5Bwq6+EsubvANYGExeJKHDO3RjnvwU042fawQTQfM3Kxn7IHUXQOz4bzfwsGYYHGSvXyW4zOGLg==
+
+body-parser@1.20.0, body-parser@^1.19.0:
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.20.0.tgz#3de69bd89011c11573d7bfee6a64f11b6bd27cc5"
+  integrity sha512-DfJ+q6EPcGKZD1QWUjSpqp+Q7bDQTsQIF4zfUAtZ6qk+H/3/QRhg9CEp39ss+/T2vw0+HaidC0ecJj/DRLIaKg==
+  dependencies:
+    bytes "3.1.2"
+    content-type "~1.0.4"
+    debug "2.6.9"
+    depd "2.0.0"
+    destroy "1.2.0"
+    http-errors "2.0.0"
+    iconv-lite "0.4.24"
+    on-finished "2.4.1"
+    qs "6.10.3"
+    raw-body "2.5.1"
+    type-is "~1.6.18"
+    unpipe "1.0.0"
+
+body-scroll-lock@^3.1.3:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/body-scroll-lock/-/body-scroll-lock-3.1.5.tgz#c1392d9217ed2c3e237fee1e910f6cdd80b7aaec"
+  integrity sha512-Yi1Xaml0EvNA0OYWxXiYNqY24AfWkbA6w5vxE7GWxtKfzIbZM+Qw+aSmkgsbWzbHiy/RCSkUZBplVxTA+E4jJg==
+
+brace-expansion@^1.1.7:
+  version "1.1.11"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
+  integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
+braces@^3.0.1, braces@~3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
+  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
+  dependencies:
+    fill-range "^7.0.1"
+
+browserslist@^4.12.0, browserslist@^4.19.1, browserslist@^4.6.4:
+  version "4.19.1"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.19.1.tgz#4ac0435b35ab655896c31d53018b6dd5e9e4c9a3"
+  integrity sha512-u2tbbG5PdKRTUoctO3NBD8FQ5HdPh1ZXPHzp1rwaa5jTc+RV9/+RlWiAIKmjRPQF+xbGM9Kklj5bZQFa2s/38A==
+  dependencies:
+    caniuse-lite "^1.0.30001286"
+    electron-to-chromium "^1.4.17"
+    escalade "^3.1.1"
+    node-releases "^2.0.1"
+    picocolors "^1.0.0"
+
+browserslist@^4.20.2:
+  version "4.21.3"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.3.tgz#5df277694eb3c48bc5c4b05af3e8b7e09c5a6d1a"
+  integrity sha512-898rgRXLAyRkM1GryrrBHGkqA5hlpkV5MhtZwg9QXeiyLUYs2k00Un05aX5l2/yJIOObYKOpS2JNo8nJDE7fWQ==
+  dependencies:
+    caniuse-lite "^1.0.30001370"
+    electron-to-chromium "^1.4.202"
+    node-releases "^2.0.6"
+    update-browserslist-db "^1.0.5"
+
+bytes@3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.2.tgz#8b0beeb98605adf1b128fa4386403c009e0221a5"
+  integrity sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==
+
+call-bind@^1.0.0, call-bind@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.2.tgz#b1d4e89e688119c3c9a903ad30abb2f6a919be3c"
+  integrity sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==
+  dependencies:
+    function-bind "^1.1.1"
+    get-intrinsic "^1.0.2"
+
+callsites@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
+  integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
+
+camelcase-css@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
+  integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
+
+caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001286, caniuse-lite@^1.0.30001297:
+  version "1.0.30001301"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001301.tgz#ebc9086026534cab0dab99425d9c3b4425e5f450"
+  integrity sha512-csfD/GpHMqgEL3V3uIgosvh+SVIQvCh43SNu9HRbP1lnxkKm1kjDG4f32PP571JplkLjfS+mg2p1gxR7MYrrIA==
+
+caniuse-lite@^1.0.30001370:
+  version "1.0.30001390"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001390.tgz#158a43011e7068ef7fc73590e9fd91a7cece5e7f"
+  integrity sha512-sS4CaUM+/+vqQUlCvCJ2WtDlV81aWtHhqeEVkLokVJJa3ViN4zDxAGfq9R8i1m90uGHxo99cy10Od+lvn3hf0g==
+
+caniuse-lite@^1.0.30001406:
+  version "1.0.30001410"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001410.tgz#b5a86366fbbf439d75dd3db1d21137a73e829f44"
+  integrity sha512-QoblBnuE+rG0lc3Ur9ltP5q47lbguipa/ncNMyyGuqPk44FxbScWAeEO+k5fSQ8WekdAK4mWqNs1rADDAiN5xQ==
+
+ccount@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/ccount/-/ccount-1.1.0.tgz#246687debb6014735131be8abab2d93898f8d043"
+  integrity sha512-vlNK021QdI7PNeiUh/lKkC/mNHHfV0m/Ad5JoI0TYtlBnJAslM/JIkm/tGC88bkLIwO6OQ5uV6ztS6kVAtCDlg==
+
+ccount@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/ccount/-/ccount-2.0.1.tgz#17a3bf82302e0870d6da43a01311a8bc02a3ecf5"
+  integrity sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==
+
+chalk@^2.0.0, chalk@^2.4.1, chalk@^2.4.2:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
+  integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
+  dependencies:
+    ansi-styles "^3.2.1"
+    escape-string-regexp "^1.0.5"
+    supports-color "^5.3.0"
+
+chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
+  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
+character-entities-html4@^1.0.0:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/character-entities-html4/-/character-entities-html4-1.1.4.tgz#0e64b0a3753ddbf1fdc044c5fd01d0199a02e125"
+  integrity sha512-HRcDxZuZqMx3/a+qrzxdBKBPUpxWEq9xw2OPZ3a/174ihfrQKVsFhqtthBInFy1zZ9GgZyFXOatNujm8M+El3g==
+
+character-entities-html4@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/character-entities-html4/-/character-entities-html4-2.1.0.tgz#1f1adb940c971a4b22ba39ddca6b618dc6e56b2b"
+  integrity sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==
+
+character-entities-legacy@^1.0.0:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz#94bc1845dce70a5bb9d2ecc748725661293d8fc1"
+  integrity sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==
+
+character-entities-legacy@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz#76bc83a90738901d7bc223a9e93759fdd560125b"
+  integrity sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==
+
+character-entities@^1.0.0:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/character-entities/-/character-entities-1.2.4.tgz#e12c3939b7eaf4e5b15e7ad4c5e28e1d48c5b16b"
+  integrity sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==
+
+character-entities@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/character-entities/-/character-entities-2.0.2.tgz#2d09c2e72cd9523076ccb21157dff66ad43fcc22"
+  integrity sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==
+
+character-reference-invalid@^1.0.0:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz#083329cda0eae272ab3dbbf37e9a382c13af1560"
+  integrity sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==
+
+character-reference-invalid@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz#85c66b041e43b47210faf401278abf808ac45cb9"
+  integrity sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==
+
+chokidar@^3.4.0, chokidar@^3.5.3:
+  version "3.5.3"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
+  integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
+  dependencies:
+    anymatch "~3.1.2"
+    braces "~3.0.2"
+    glob-parent "~5.1.2"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.6.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
+ci-info@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46"
+  integrity sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==
+
+ci-info@^3.2.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.3.0.tgz#b4ed1fb6818dea4803a55c623041f9165d2066b2"
+  integrity sha512-riT/3vI5YpVH6/qomlDnJow6TBee2PBKSEpx3O32EGPYbWGIRsIlGRms3Sm74wYE1JMo8RnO04Hb12+v1J5ICw==
+
+classnames@*, classnames@^2.2.6:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
+  integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
+
+clean-set@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/clean-set/-/clean-set-1.1.2.tgz#76d8bf238c3e27827bfa73073ecdfdc767187070"
+  integrity sha512-cA8uCj0qSoG9e0kevyOWXwPaELRPVg5Pxp6WskLMwerx257Zfnh8Nl0JBH59d7wQzij2CK7qEfJQK3RjuKKIug==
+
+clean-stack@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"
+  integrity sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==
+
+cli-cursor@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-3.1.0.tgz#264305a7ae490d1d03bf0c9ba7c925d1753af307"
+  integrity sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==
+  dependencies:
+    restore-cursor "^3.1.0"
+
+cli-truncate@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/cli-truncate/-/cli-truncate-2.1.0.tgz#c39e28bf05edcde5be3b98992a22deed5a2b93c7"
+  integrity sha512-n8fOixwDD6b/ObinzTrp1ZKFzbgvKZvuz/TvejnLn1aQfC6r52XEx85FmuC+3HI+JM7coBRXUvNqEU2PHVrHpg==
+  dependencies:
+    slice-ansi "^3.0.0"
+    string-width "^4.2.0"
+
+cli-truncate@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/cli-truncate/-/cli-truncate-3.1.0.tgz#3f23ab12535e3d73e839bb43e73c9de487db1389"
+  integrity sha512-wfOBkjXteqSnI59oPcJkcPl/ZmwvMMOj340qUIY1SKZCv0B9Cf4D4fAucRkIKQmsIuYK3x1rrgU7MeGRruiuiA==
+  dependencies:
+    slice-ansi "^5.0.0"
+    string-width "^5.0.0"
+
+codesandbox-import-util-types@^1.3.7:
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/codesandbox-import-util-types/-/codesandbox-import-util-types-1.3.7.tgz#7a6097e248a75424d13b06b74368cd76bd2b3e10"
+  integrity sha512-8oP3emA0jyEuVOM2FBTpo/AF4C9vxHn14saVWZf2CQ/QhMtonBlNPE98ElrHkW+PFNXiO7Ad52Qr73b03n8qlA==
+
+codesandbox-import-util-types@^2.2.3:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/codesandbox-import-util-types/-/codesandbox-import-util-types-2.2.3.tgz#b354b2f732ad130e119ebd9ead3bda3be5981a54"
+  integrity sha512-Qj00p60oNExthP2oR3vvXmUGjukij+rxJGuiaKM6tyUmSyimdZsqHI/TUvFFClAffk9s7hxGnQgWQ8KCce27qQ==
+
+codesandbox-import-utils@^1.2.3:
+  version "1.3.8"
+  resolved "https://registry.yarnpkg.com/codesandbox-import-utils/-/codesandbox-import-utils-1.3.8.tgz#5576786439c5f37ebd3fee5751e06027a1edef84"
+  integrity sha512-S12zO49QEkldoYLGh5KbkHRLOacg5BCNTue2vlyZXSpuK3oQdArwC/G1hCLKryV460bW3Ecn5xdkpfkUcFeOwQ==
+  dependencies:
+    codesandbox-import-util-types "^1.3.7"
+    istextorbinary "2.2.1"
+    lz-string "^1.4.4"
+
+collapse-white-space@^1.0.2:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-1.0.6.tgz#e63629c0016665792060dbbeb79c42239d2c5287"
+  integrity sha512-jEovNnrhMuqyCcjfEJA56v0Xq8SkIoPKDyaHahwo3POf4qcSXqMYuwNcOTzp74vTsR9Tn08z4MxWqAhcekogkQ==
+
+color-convert@^1.9.0:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
+  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
+  dependencies:
+    color-name "1.1.3"
+
+color-convert@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
+  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
+  dependencies:
+    color-name "~1.1.4"
+
+color-name@1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
+  integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
+
+color-name@^1.1.4, color-name@~1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+
+colorette@^2.0.16:
+  version "2.0.16"
+  resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.16.tgz#713b9af84fdb000139f04546bd4a93f62a5085da"
+  integrity sha512-hUewv7oMjCp+wkBv5Rm0v87eJhq4woh5rSR+42YSQJKecCqgIqNkZ6lAlQms/BwHPJA5NKMRlpxPRv0n8HQW6g==
+
+comma-separated-tokens@^1.0.0:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz#632b80b6117867a158f1080ad498b2fbe7e3f5ea"
+  integrity sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==
+
+comma-separated-tokens@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-2.0.2.tgz#d4c25abb679b7751c880be623c1179780fe1dd98"
+  integrity sha512-G5yTt3KQN4Yn7Yk4ed73hlZ1evrFKXeUW3086p3PRFNp7m2vIjI6Pg+Kgb+oyzhd9F2qdcoj67+y3SdxL5XWsg==
+
+commander@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-5.1.0.tgz#46abbd1652f8e059bddaef99bbdcb2ad9cf179ae"
+  integrity sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==
+
+commander@^7.2.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
+  integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
+
+commander@^8.3.0:
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66"
+  integrity sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==
+
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+  integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
+
+confusing-browser-globals@^1.0.9:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/confusing-browser-globals/-/confusing-browser-globals-1.0.11.tgz#ae40e9b57cdd3915408a2805ebd3a5585608dc81"
+  integrity sha512-JsPKdmh8ZkmnHxDk55FZ1TqVLvEQTvoByJZRN9jzI0UjxK/QgAmsphz7PGtqgPieQZ/CQcHWXCR7ATDNhGe+YA==
+
+content-disposition@0.5.4:
+  version "0.5.4"
+  resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.4.tgz#8b82b4efac82512a02bb0b1dcec9d2c5e8eb5bfe"
+  integrity sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==
+  dependencies:
+    safe-buffer "5.2.1"
+
+content-type@~1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
+  integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==
+
+convert-source-map@^1.7.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.8.0.tgz#f3373c32d21b4d780dd8004514684fb791ca4369"
+  integrity sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==
+  dependencies:
+    safe-buffer "~5.1.1"
+
+cookie-signature@1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
+  integrity sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==
+
+cookie@0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.5.0.tgz#d1f5d71adec6558c58f389987c366aa47e994f8b"
+  integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==
+
+core-js-pure@^3.20.2:
+  version "3.20.3"
+  resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.20.3.tgz#6cc4f36da06c61d95254efc54024fe4797fd5d02"
+  integrity sha512-Q2H6tQ5MtPtcC7f3HxJ48i4Q7T9ybPKgvWyuH7JXIoNa2pm0KuBnycsET/qw1SLLZYfbsbrZQNMeIOClb+6WIA==
+
+cosmiconfig@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.0.1.tgz#714d756522cace867867ccb4474c5d01bbae5d6d"
+  integrity sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ==
+  dependencies:
+    "@types/parse-json" "^4.0.0"
+    import-fresh "^3.2.1"
+    parse-json "^5.0.0"
+    path-type "^4.0.0"
+    yaml "^1.10.0"
+
+crelt@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/crelt/-/crelt-1.0.5.tgz#57c0d52af8c859e354bace1883eb2e1eb182bb94"
+  integrity sha512-+BO9wPPi+DWTDcNYhr/W90myha8ptzftZT+LwcmUbbok0rcP/fequmFYCw8NMoH7pkAZQzU78b3kYrlua5a9eA==
+
+cross-spawn@^6.0.5:
+  version "6.0.5"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
+  integrity sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==
+  dependencies:
+    nice-try "^1.0.4"
+    path-key "^2.0.1"
+    semver "^5.5.0"
+    shebang-command "^1.2.0"
+    which "^1.2.9"
+
+cross-spawn@^7.0.2, cross-spawn@^7.0.3:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
+  integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
+  dependencies:
+    path-key "^3.1.0"
+    shebang-command "^2.0.0"
+    which "^2.0.1"
+
+css-blank-pseudo@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/css-blank-pseudo/-/css-blank-pseudo-0.1.4.tgz#dfdefd3254bf8a82027993674ccf35483bfcb3c5"
+  integrity sha512-LHz35Hr83dnFeipc7oqFDmsjHdljj3TQtxGGiNWSOsTLIAubSm4TEz8qCaKFpk7idaQ1GfWscF4E6mgpBysA1w==
+  dependencies:
+    postcss "^7.0.5"
+
+css-has-pseudo@^0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/css-has-pseudo/-/css-has-pseudo-0.10.0.tgz#3c642ab34ca242c59c41a125df9105841f6966ee"
+  integrity sha512-Z8hnfsZu4o/kt+AuFzeGpLVhFOGO9mluyHBaA2bA8aCGTwah5sT3WV/fTHH8UNZUytOIImuGPrl/prlb4oX4qQ==
+  dependencies:
+    postcss "^7.0.6"
+    postcss-selector-parser "^5.0.0-rc.4"
+
+css-prefers-color-scheme@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/css-prefers-color-scheme/-/css-prefers-color-scheme-3.1.1.tgz#6f830a2714199d4f0d0d0bb8a27916ed65cff1f4"
+  integrity sha512-MTu6+tMs9S3EUqzmqLXEcgNRbNkkD/TGFvowpeoWJn5Vfq7FMgsmRQs9X5NXAURiOBmOxm/lLjsDNXDE6k9bhg==
+  dependencies:
+    postcss "^7.0.5"
+
+cssdb@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/cssdb/-/cssdb-4.4.0.tgz#3bf2f2a68c10f5c6a08abd92378331ee803cddb0"
+  integrity sha512-LsTAR1JPEM9TpGhl/0p3nQecC2LJ0kD8X5YARu1hk/9I1gril5vDtMZyNxcEpxxDj34YNck/ucjuoUd66K03oQ==
+
+cssesc@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-2.0.0.tgz#3b13bd1bb1cb36e1bcb5a4dcd27f54c5dcb35703"
+  integrity sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg==
+
+cssesc@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
+  integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
+
+csstype@^3.0.2:
+  version "3.0.10"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.10.tgz#2ad3a7bed70f35b965707c092e5f30b327c290e5"
+  integrity sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==
+
+d@1, d@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/d/-/d-1.0.1.tgz#8698095372d58dbee346ffd0c7093f99f8f9eb5a"
+  integrity sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==
+  dependencies:
+    es5-ext "^0.10.50"
+    type "^1.0.1"
+
+damerau-levenshtein@^1.0.7:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
+  integrity sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==
+
+date-fns@^2.16.1:
+  version "2.28.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.28.0.tgz#9570d656f5fc13143e50c975a3b6bbeb46cd08b2"
+  integrity sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==
+
+debounce@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.1.tgz#38881d8f4166a5c5848020c11827b834bcb3e0a5"
+  integrity sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==
+
+debug@2.6.9, debug@^2.6.9:
+  version "2.6.9"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
+  integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
+  dependencies:
+    ms "2.0.0"
+
+debug@^3.2.7:
+  version "3.2.7"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
+  integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
+  dependencies:
+    ms "^2.1.1"
+
+debug@^4.0.0, debug@^4.3.4:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
+  integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
+  dependencies:
+    ms "2.1.2"
+
+debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.3:
+  version "4.3.3"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.3.tgz#04266e0b70a98d4462e6e288e38259213332b664"
+  integrity sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==
+  dependencies:
+    ms "2.1.2"
+
+decode-named-character-reference@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/decode-named-character-reference/-/decode-named-character-reference-1.0.2.tgz#daabac9690874c394c81e4162a0304b35d824f0e"
+  integrity sha512-O8x12RzrUF8xyVcY0KJowWsmaJxQbmy0/EtnNtHRpsOcT7dFk5W598coHqBVpmWo1oQQfsCqfCmkZN5DJrZVdg==
+  dependencies:
+    character-entities "^2.0.0"
+
+deep-is@^0.1.3:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
+  integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
+
+define-properties@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1"
+  integrity sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==
+  dependencies:
+    object-keys "^1.0.12"
+
+define-properties@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.4.tgz#0b14d7bd7fbeb2f3572c3a7eda80ea5d57fb05b1"
+  integrity sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==
+  dependencies:
+    has-property-descriptors "^1.0.0"
+    object-keys "^1.1.1"
+
+defined@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
+  integrity sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=
+
+depd@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-2.0.0.tgz#b696163cc757560d09cf22cc8fad1571b79e76df"
+  integrity sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==
+
+dequal@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be"
+  integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==
+
+destroy@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.2.0.tgz#4803735509ad8be552934c67df614f94e66fa015"
+  integrity sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==
+
+detective@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/detective/-/detective-5.2.0.tgz#feb2a77e85b904ecdea459ad897cc90a99bd2a7b"
+  integrity sha512-6SsIx+nUUbuK0EthKjv0zrdnajCCXVYGmbYYiYjFVpzcjwEs/JMDZ8tPRG29J/HhN56t3GJp2cGSWDRjjot8Pg==
+  dependencies:
+    acorn-node "^1.6.1"
+    defined "^1.0.0"
+    minimist "^1.1.1"
+
+didyoumean@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037"
+  integrity sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==
+
+diff@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-5.1.0.tgz#bc52d298c5ea8df9194800224445ed43ffc87e40"
+  integrity sha512-D+mk+qE8VC/PAUrlAU34N+VfXev0ghe5ywmpqrawphmVZc1bEfn56uo9qpyGp1p4xpzOHkSW4ztBd6L7Xx4ACw==
+
+dir-glob@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f"
+  integrity sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==
+  dependencies:
+    path-type "^4.0.0"
+
+dlv@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/dlv/-/dlv-1.1.3.tgz#5c198a8a11453596e751494d49874bc7732f2e79"
+  integrity sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==
+
+doctrine@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d"
+  integrity sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==
+  dependencies:
+    esutils "^2.0.2"
+
+doctrine@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-3.0.0.tgz#addebead72a6574db783639dc87a121773973961"
+  integrity sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==
+  dependencies:
+    esutils "^2.0.2"
+
+duplexer@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6"
+  integrity sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==
+
+eastasianwidth@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb"
+  integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
+
+editions@^1.3.3:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/editions/-/editions-1.3.4.tgz#3662cb592347c3168eb8e498a0ff73271d67f50b"
+  integrity sha512-gzao+mxnYDzIysXKMQi/+M1mjy/rjestjg6OPoYTtI+3Izp23oiGZitsl9lPDPiTGXbcSIk1iJWhliSaglxnUg==
+
+ee-first@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
+  integrity sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==
+
+electron-to-chromium@^1.4.17:
+  version "1.4.51"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.51.tgz#a432f5a5d983ace79278a33057300cf949627e63"
+  integrity sha512-JNEmcYl3mk1tGQmy0EvL5eik/CKSBuzAyGP0QFdG6LIgxQe3II0BL1m2zKc2MZMf3uGqHWE1TFddJML0RpjSHQ==
+
+electron-to-chromium@^1.4.202:
+  version "1.4.241"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.241.tgz#5aa03ab94db590d8269f4518157c24b1efad34d6"
+  integrity sha512-e7Wsh4ilaioBZ5bMm6+F4V5c11dh56/5Jwz7Hl5Tu1J7cnB+Pqx5qIF2iC7HPpfyQMqGSvvLP5bBAIDd2gAtGw==
+
+emoji-regex@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
+  integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
+
+emoji-regex@^9.2.2:
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
+  integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
+
+encodeurl@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
+  integrity sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==
+
+enquirer@^2.3.5:
+  version "2.3.6"
+  resolved "https://registry.yarnpkg.com/enquirer/-/enquirer-2.3.6.tgz#2a7fe5dd634a1e4125a975ec994ff5456dc3734d"
+  integrity sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==
+  dependencies:
+    ansi-colors "^4.1.1"
+
+error-ex@^1.3.1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
+  integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==
+  dependencies:
+    is-arrayish "^0.2.1"
+
+es-abstract@^1.19.0, es-abstract@^1.19.1:
+  version "1.19.1"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.19.1.tgz#d4885796876916959de78edaa0df456627115ec3"
+  integrity sha512-2vJ6tjA/UfqLm2MPs7jxVybLoB8i1t1Jd9R3kISld20sIxPcTbLuggQOUxeWeAvIUkduv/CfMjuh4WmiXr2v9w==
+  dependencies:
+    call-bind "^1.0.2"
+    es-to-primitive "^1.2.1"
+    function-bind "^1.1.1"
+    get-intrinsic "^1.1.1"
+    get-symbol-description "^1.0.0"
+    has "^1.0.3"
+    has-symbols "^1.0.2"
+    internal-slot "^1.0.3"
+    is-callable "^1.2.4"
+    is-negative-zero "^2.0.1"
+    is-regex "^1.1.4"
+    is-shared-array-buffer "^1.0.1"
+    is-string "^1.0.7"
+    is-weakref "^1.0.1"
+    object-inspect "^1.11.0"
+    object-keys "^1.1.1"
+    object.assign "^4.1.2"
+    string.prototype.trimend "^1.0.4"
+    string.prototype.trimstart "^1.0.4"
+    unbox-primitive "^1.0.1"
+
+es-to-primitive@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
+  integrity sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==
+  dependencies:
+    is-callable "^1.1.4"
+    is-date-object "^1.0.1"
+    is-symbol "^1.0.2"
+
+es5-ext@^0.10.35, es5-ext@^0.10.50:
+  version "0.10.62"
+  resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.62.tgz#5e6adc19a6da524bf3d1e02bbc8960e5eb49a9a5"
+  integrity sha512-BHLqn0klhEpnOKSrzn/Xsz2UIW8j+cGmo9JLzr8BiUapV8hPL9+FliFqjwr9ngW7jWdnxv6eO+/LqyhJVqgrjA==
+  dependencies:
+    es6-iterator "^2.0.3"
+    es6-symbol "^3.1.3"
+    next-tick "^1.1.0"
+
+es6-iterator@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.3.tgz#a7de889141a05a94b0854403b2d0a0fbfa98f3b7"
+  integrity sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==
+  dependencies:
+    d "1"
+    es5-ext "^0.10.35"
+    es6-symbol "^3.1.1"
+
+es6-symbol@^3, es6-symbol@^3.1.1, es6-symbol@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.3.tgz#bad5d3c1bcdac28269f4cb331e431c78ac705d18"
+  integrity sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==
+  dependencies:
+    d "^1.0.1"
+    ext "^1.1.2"
+
+escalade@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
+  integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
+
+escape-html@~1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
+  integrity sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==
+
+escape-string-regexp@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
+  integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
+
+escape-string-regexp@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
+  integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
+
+escape-string-regexp@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz#4683126b500b61762f2dbebace1806e8be31b1c8"
+  integrity sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==
+
+eslint-config-next@12.0.3:
+  version "12.0.3"
+  resolved "https://registry.yarnpkg.com/eslint-config-next/-/eslint-config-next-12.0.3.tgz#a85ad423997f098b41b61c279472e0642e200a9e"
+  integrity sha512-q+mX6jhk3HrCo39G18MLhiC6f8zJnTA00f30RSuVUWsv45SQUm6r62oXVqrbAgMEybe0yx/GDRvfA6LvSolw6Q==
+  dependencies:
+    "@next/eslint-plugin-next" "12.0.3"
+    "@rushstack/eslint-patch" "^1.0.6"
+    "@typescript-eslint/parser" "^4.20.0"
+    eslint-import-resolver-node "^0.3.4"
+    eslint-import-resolver-typescript "^2.4.0"
+    eslint-plugin-import "^2.22.1"
+    eslint-plugin-jsx-a11y "^6.4.1"
+    eslint-plugin-react "^7.23.1"
+    eslint-plugin-react-hooks "^4.2.0"
+
+eslint-config-react-app@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/eslint-config-react-app/-/eslint-config-react-app-5.2.1.tgz#698bf7aeee27f0cea0139eaef261c7bf7dd623df"
+  integrity sha512-pGIZ8t0mFLcV+6ZirRgYK6RVqUIKRIi9MmgzUEmrIknsn3AdO0I32asO86dJgloHq+9ZPl8UIg8mYrvgP5u2wQ==
+  dependencies:
+    confusing-browser-globals "^1.0.9"
+
+eslint-import-resolver-node@^0.3.4, eslint-import-resolver-node@^0.3.6:
+  version "0.3.6"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.6.tgz#4048b958395da89668252001dbd9eca6b83bacbd"
+  integrity sha512-0En0w03NRVMn9Uiyn8YRPDKvWjxCWkslUEhGNTdGx15RvPJYQ+lbOlqrlNI2vEAs4pDYK4f/HN2TbDmk5TP0iw==
+  dependencies:
+    debug "^3.2.7"
+    resolve "^1.20.0"
+
+eslint-import-resolver-typescript@^2.4.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-2.5.0.tgz#07661966b272d14ba97f597b51e1a588f9722f0a"
+  integrity sha512-qZ6e5CFr+I7K4VVhQu3M/9xGv9/YmwsEXrsm3nimw8vWaVHRDrQRp26BgCypTxBp3vUp4o5aVEJRiy0F2DFddQ==
+  dependencies:
+    debug "^4.3.1"
+    glob "^7.1.7"
+    is-glob "^4.0.1"
+    resolve "^1.20.0"
+    tsconfig-paths "^3.9.0"
+
+eslint-module-utils@^2.7.2:
+  version "2.7.2"
+  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.7.2.tgz#1d0aa455dcf41052339b63cada8ab5fd57577129"
+  integrity sha512-zquepFnWCY2ISMFwD/DqzaM++H+7PDzOpUvotJWm/y1BAFt5R4oeULgdrTejKqLkz7MA/tgstsUMNYc7wNdTrg==
+  dependencies:
+    debug "^3.2.7"
+    find-up "^2.1.0"
+
+eslint-plugin-flowtype@4.x:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-4.7.0.tgz#903a6ea3eb5cbf4c7ba7fa73cc43fc39ab7e4a70"
+  integrity sha512-M+hxhSCk5QBEValO5/UqrS4UunT+MgplIJK5wA1sCtXjzBcZkpTGRwxmLHhGpbHcrmQecgt6ZL/KDdXWqGB7VA==
+  dependencies:
+    lodash "^4.17.15"
+
+eslint-plugin-import@2.x, eslint-plugin-import@^2.22.1:
+  version "2.25.4"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.25.4.tgz#322f3f916a4e9e991ac7af32032c25ce313209f1"
+  integrity sha512-/KJBASVFxpu0xg1kIBn9AUa8hQVnszpwgE7Ld0lKAlx7Ie87yzEzCgSkekt+le/YVhiaosO4Y14GDAOc41nfxA==
+  dependencies:
+    array-includes "^3.1.4"
+    array.prototype.flat "^1.2.5"
+    debug "^2.6.9"
+    doctrine "^2.1.0"
+    eslint-import-resolver-node "^0.3.6"
+    eslint-module-utils "^2.7.2"
+    has "^1.0.3"
+    is-core-module "^2.8.0"
+    is-glob "^4.0.3"
+    minimatch "^3.0.4"
+    object.values "^1.1.5"
+    resolve "^1.20.0"
+    tsconfig-paths "^3.12.0"
+
+eslint-plugin-jsx-a11y@6.x, eslint-plugin-jsx-a11y@^6.4.1:
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.5.1.tgz#cdbf2df901040ca140b6ec14715c988889c2a6d8"
+  integrity sha512-sVCFKX9fllURnXT2JwLN5Qgo24Ug5NF6dxhkmxsMEUZhXRcGg+X3e1JbJ84YePQKBl5E0ZjAH5Q4rkdcGY99+g==
+  dependencies:
+    "@babel/runtime" "^7.16.3"
+    aria-query "^4.2.2"
+    array-includes "^3.1.4"
+    ast-types-flow "^0.0.7"
+    axe-core "^4.3.5"
+    axobject-query "^2.2.0"
+    damerau-levenshtein "^1.0.7"
+    emoji-regex "^9.2.2"
+    has "^1.0.3"
+    jsx-ast-utils "^3.2.1"
+    language-tags "^1.0.5"
+    minimatch "^3.0.4"
+
+eslint-plugin-react-hooks@^0.0.0-experimental-fabef7a6b-20221215:
+  version "0.0.0-experimental-fabef7a6b-20221215"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-0.0.0-experimental-fabef7a6b-20221215.tgz#ceb8c59f1c363cc2f733b0be36661a8a722a89a1"
+  integrity sha512-y1lJAS4gWXyP6kXl2jA9ZJdFFfcMwNjMEZEEXn9LHOWEhnAgKgcqZ/NhNWAphiJLYOZ33kne1hbhDlGCcrdx5g==
+
+eslint-plugin-react-hooks@^4.2.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.3.0.tgz#318dbf312e06fab1c835a4abef00121751ac1172"
+  integrity sha512-XslZy0LnMn+84NEG9jSGR6eGqaZB3133L8xewQo3fQagbQuGt7a63gf+P1NGKZavEYEC3UXaWEAA/AqDkuN6xA==
+
+eslint-plugin-react@7.x, eslint-plugin-react@^7.23.1:
+  version "7.28.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.28.0.tgz#8f3ff450677571a659ce76efc6d80b6a525adbdf"
+  integrity sha512-IOlFIRHzWfEQQKcAD4iyYDndHwTQiCMcJVJjxempf203jnNLUnW34AXLrV33+nEXoifJE2ZEGmcjKPL8957eSw==
+  dependencies:
+    array-includes "^3.1.4"
+    array.prototype.flatmap "^1.2.5"
+    doctrine "^2.1.0"
+    estraverse "^5.3.0"
+    jsx-ast-utils "^2.4.1 || ^3.0.0"
+    minimatch "^3.0.4"
+    object.entries "^1.1.5"
+    object.fromentries "^2.0.5"
+    object.hasown "^1.1.0"
+    object.values "^1.1.5"
+    prop-types "^15.7.2"
+    resolve "^2.0.0-next.3"
+    semver "^6.3.0"
+    string.prototype.matchall "^4.0.6"
+
+eslint-scope@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
+  integrity sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==
+  dependencies:
+    esrecurse "^4.3.0"
+    estraverse "^4.1.1"
+
+eslint-utils@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-2.1.0.tgz#d2de5e03424e707dc10c74068ddedae708741b27"
+  integrity sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==
+  dependencies:
+    eslint-visitor-keys "^1.1.0"
+
+eslint-utils@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-3.0.0.tgz#8aebaface7345bb33559db0a1f13a1d2d48c3672"
+  integrity sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==
+  dependencies:
+    eslint-visitor-keys "^2.0.0"
+
+eslint-visitor-keys@^1.0.0, eslint-visitor-keys@^1.1.0, eslint-visitor-keys@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz#30ebd1ef7c2fdff01c3a4f151044af25fab0523e"
+  integrity sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==
+
+eslint-visitor-keys@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303"
+  integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==
+
+eslint-visitor-keys@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz#f6480fa6b1f30efe2d1968aa8ac745b862469826"
+  integrity sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==
+
+eslint@7.x:
+  version "7.32.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.32.0.tgz#c6d328a14be3fb08c8d1d21e12c02fdb7a2a812d"
+  integrity sha512-VHZ8gX+EDfz+97jGcgyGCyRia/dPOd6Xh9yPv8Bl1+SoaIwD+a/vlrOmGRUyOYu7MwUhc7CxqeaDZU13S4+EpA==
+  dependencies:
+    "@babel/code-frame" "7.12.11"
+    "@eslint/eslintrc" "^0.4.3"
+    "@humanwhocodes/config-array" "^0.5.0"
+    ajv "^6.10.0"
+    chalk "^4.0.0"
+    cross-spawn "^7.0.2"
+    debug "^4.0.1"
+    doctrine "^3.0.0"
+    enquirer "^2.3.5"
+    escape-string-regexp "^4.0.0"
+    eslint-scope "^5.1.1"
+    eslint-utils "^2.1.0"
+    eslint-visitor-keys "^2.0.0"
+    espree "^7.3.1"
+    esquery "^1.4.0"
+    esutils "^2.0.2"
+    fast-deep-equal "^3.1.3"
+    file-entry-cache "^6.0.1"
+    functional-red-black-tree "^1.0.1"
+    glob-parent "^5.1.2"
+    globals "^13.6.0"
+    ignore "^4.0.6"
+    import-fresh "^3.0.0"
+    imurmurhash "^0.1.4"
+    is-glob "^4.0.0"
+    js-yaml "^3.13.1"
+    json-stable-stringify-without-jsonify "^1.0.1"
+    levn "^0.4.1"
+    lodash.merge "^4.6.2"
+    minimatch "^3.0.4"
+    natural-compare "^1.4.0"
+    optionator "^0.9.1"
+    progress "^2.0.0"
+    regexpp "^3.1.0"
+    semver "^7.2.1"
+    strip-ansi "^6.0.0"
+    strip-json-comments "^3.1.0"
+    table "^6.0.9"
+    text-table "^0.2.0"
+    v8-compile-cache "^2.0.3"
+
+espree@^7.3.0, espree@^7.3.1:
+  version "7.3.1"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-7.3.1.tgz#f2df330b752c6f55019f8bd89b7660039c1bbbb6"
+  integrity sha512-v3JCNCE64umkFpmkFGqzVKsOT0tN1Zr+ueqLZfpV1Ob8e+CEgPWa+OxCoGH3tnhimMKIaBm4m/vaRpJ/krRz2g==
+  dependencies:
+    acorn "^7.4.0"
+    acorn-jsx "^5.3.1"
+    eslint-visitor-keys "^1.3.0"
+
+esprima@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
+  integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
+
+esquery@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.4.0.tgz#2148ffc38b82e8c7057dfed48425b3e61f0f24a5"
+  integrity sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==
+  dependencies:
+    estraverse "^5.1.0"
+
+esrecurse@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.3.0.tgz#7ad7964d679abb28bee72cec63758b1c5d2c9921"
+  integrity sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==
+  dependencies:
+    estraverse "^5.2.0"
+
+estraverse@^4.1.1:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
+  integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
+
+estraverse@^5.1.0, estraverse@^5.2.0, estraverse@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.3.0.tgz#2eea5290702f26ab8fe5370370ff86c965d21123"
+  integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
+
+estree-util-attach-comments@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/estree-util-attach-comments/-/estree-util-attach-comments-2.1.0.tgz#47d69900588bcbc6bf58c3798803ec5f1f3008de"
+  integrity sha512-rJz6I4L0GaXYtHpoMScgDIwM0/Vwbu5shbMeER596rB2D1EWF6+Gj0e0UKzJPZrpoOc87+Q2kgVFHfjAymIqmw==
+  dependencies:
+    "@types/estree" "^1.0.0"
+
+estree-util-build-jsx@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/estree-util-build-jsx/-/estree-util-build-jsx-2.2.0.tgz#d4307bbeee28c14eb4d63b75c9aad28fa61d84f5"
+  integrity sha512-apsfRxF9uLrqosApvHVtYZjISPvTJ+lBiIydpC+9wE6cF6ssbhnjyQLqaIjgzGxvC2Hbmec1M7g91PoBayYoQQ==
+  dependencies:
+    "@types/estree-jsx" "^1.0.0"
+    estree-util-is-identifier-name "^2.0.0"
+    estree-walker "^3.0.0"
+
+estree-util-is-identifier-name@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/estree-util-is-identifier-name/-/estree-util-is-identifier-name-2.0.1.tgz#cf07867f42705892718d9d89eb2d85eaa8f0fcb5"
+  integrity sha512-rxZj1GkQhY4x1j/CSnybK9cGuMFQYFPLq0iNyopqf14aOVLFtMv7Esika+ObJWPWiOHuMOAHz3YkWoLYYRnzWQ==
+
+estree-util-to-js@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/estree-util-to-js/-/estree-util-to-js-1.1.0.tgz#3bd9bb86354063537cc3d81259be2f0d4c3af39f"
+  integrity sha512-490lbfCcpLk+ofK6HCgqDfYs4KAfq6QVvDw3+Bm1YoKRgiOjKiKYGAVQE1uwh7zVxBgWhqp4FDtp5SqunpUk1A==
+  dependencies:
+    "@types/estree-jsx" "^1.0.0"
+    astring "^1.8.0"
+    source-map "^0.7.0"
+
+estree-util-visit@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/estree-util-visit/-/estree-util-visit-1.2.0.tgz#aa0311a9c2f2aa56e9ae5e8b9d87eac14e4ec8f8"
+  integrity sha512-wdsoqhWueuJKsh5hqLw3j8lwFqNStm92VcwtAOAny8g/KS/l5Y8RISjR4k5W6skCj3Nirag/WUCMS0Nfy3sgsg==
+  dependencies:
+    "@types/estree-jsx" "^1.0.0"
+    "@types/unist" "^2.0.0"
+
+estree-walker@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-3.0.1.tgz#c2a9fb4a30232f5039b7c030b37ead691932debd"
+  integrity sha512-woY0RUD87WzMBUiZLx8NsYr23N5BKsOMZHhu2hoNRVh6NXGfoiT1KOL8G3UHlJAnEDGmfa5ubNA/AacfG+Kb0g==
+
+esutils@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
+  integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
+
+etag@~1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
+  integrity sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==
+
+execa@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-5.1.1.tgz#f80ad9cbf4298f7bd1d4c9555c21e93741c411dd"
+  integrity sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==
+  dependencies:
+    cross-spawn "^7.0.3"
+    get-stream "^6.0.0"
+    human-signals "^2.1.0"
+    is-stream "^2.0.0"
+    merge-stream "^2.0.0"
+    npm-run-path "^4.0.1"
+    onetime "^5.1.2"
+    signal-exit "^3.0.3"
+    strip-final-newline "^2.0.0"
+
+express@^4.17.1:
+  version "4.18.1"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.18.1.tgz#7797de8b9c72c857b9cd0e14a5eea80666267caf"
+  integrity sha512-zZBcOX9TfehHQhtupq57OF8lFZ3UZi08Y97dwFCkD8p9d/d2Y3M+ykKcwaMDEL+4qyUolgBDX6AblpR3fL212Q==
+  dependencies:
+    accepts "~1.3.8"
+    array-flatten "1.1.1"
+    body-parser "1.20.0"
+    content-disposition "0.5.4"
+    content-type "~1.0.4"
+    cookie "0.5.0"
+    cookie-signature "1.0.6"
+    debug "2.6.9"
+    depd "2.0.0"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    etag "~1.8.1"
+    finalhandler "1.2.0"
+    fresh "0.5.2"
+    http-errors "2.0.0"
+    merge-descriptors "1.0.1"
+    methods "~1.1.2"
+    on-finished "2.4.1"
+    parseurl "~1.3.3"
+    path-to-regexp "0.1.7"
+    proxy-addr "~2.0.7"
+    qs "6.10.3"
+    range-parser "~1.2.1"
+    safe-buffer "5.2.1"
+    send "0.18.0"
+    serve-static "1.15.0"
+    setprototypeof "1.2.0"
+    statuses "2.0.1"
+    type-is "~1.6.18"
+    utils-merge "1.0.1"
+    vary "~1.1.2"
+
+ext@^1.1.2:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/ext/-/ext-1.7.0.tgz#0ea4383c0103d60e70be99e9a7f11027a33c4f5f"
+  integrity sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==
+  dependencies:
+    type "^2.7.2"
+
+extend-shallow@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-2.0.1.tgz#51af7d614ad9a9f610ea1bafbb989d6b1c56890f"
+  integrity sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=
+  dependencies:
+    is-extendable "^0.1.0"
+
+extend@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
+  integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
+
+fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
+  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
+
+fast-glob@^3.2.11, fast-glob@^3.2.9:
+  version "3.2.11"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.11.tgz#a1172ad95ceb8a16e20caa5c5e56480e5129c1d9"
+  integrity sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.4"
+
+fast-json-stable-stringify@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
+  integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
+
+fast-levenshtein@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
+  integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
+
+fastq@^1.6.0:
+  version "1.13.0"
+  resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.13.0.tgz#616760f88a7526bdfc596b7cab8c18938c36b98c"
+  integrity sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==
+  dependencies:
+    reusify "^1.0.4"
+
+fault@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/fault/-/fault-2.0.1.tgz#d47ca9f37ca26e4bd38374a7c500b5a384755b6c"
+  integrity sha512-WtySTkS4OKev5JtpHXnib4Gxiurzh5NCGvWrFaZ34m6JehfTUhKZvn9njTfw48t6JumVQOmrKqpmGcdwxnhqBQ==
+  dependencies:
+    format "^0.2.0"
+
+file-entry-cache@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027"
+  integrity sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==
+  dependencies:
+    flat-cache "^3.0.4"
+
+fill-range@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
+  integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
+  dependencies:
+    to-regex-range "^5.0.1"
+
+finalhandler@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.2.0.tgz#7d23fe5731b207b4640e4fcd00aec1f9207a7b32"
+  integrity sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==
+  dependencies:
+    debug "2.6.9"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    on-finished "2.4.1"
+    parseurl "~1.3.3"
+    statuses "2.0.1"
+    unpipe "~1.0.0"
+
+find-up@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
+  integrity sha1-RdG35QbHF93UgndaK3eSCjwMV6c=
+  dependencies:
+    locate-path "^2.0.0"
+
+find-yarn-workspace-root@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/find-yarn-workspace-root/-/find-yarn-workspace-root-2.0.0.tgz#f47fb8d239c900eb78179aa81b66673eac88f7bd"
+  integrity sha512-1IMnbjt4KzsQfnhnzNd8wUEgXZ44IzZaZmnLYx7D5FZlaHt2gW20Cri8Q+E/t5tIj4+epTBub+2Zxu/vNILzqQ==
+  dependencies:
+    micromatch "^4.0.2"
+
+flat-cache@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-3.0.4.tgz#61b0338302b2fe9f957dcc32fc2a87f1c3048b11"
+  integrity sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==
+  dependencies:
+    flatted "^3.1.0"
+    rimraf "^3.0.2"
+
+flatted@^3.1.0:
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.4.tgz#28d9969ea90661b5134259f312ab6aa7929ac5e2"
+  integrity sha512-8/sOawo8tJ4QOBX8YlQBMxL8+RLZfxMQOif9o0KUKTNTjMYElWPE0r/m5VNFxTRd0NSw8qSy8dajrwX4RYI1Hw==
+
+flatten@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.3.tgz#c1283ac9f27b368abc1e36d1ff7b04501a30356b"
+  integrity sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg==
+
+format@^0.2.0:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/format/-/format-0.2.2.tgz#d6170107e9efdc4ed30c9dc39016df942b5cb58b"
+  integrity sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==
+
+forwarded@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
+  integrity sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==
+
+fraction.js@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.1.2.tgz#13e420a92422b6cf244dff8690ed89401029fbe8"
+  integrity sha512-o2RiJQ6DZaR/5+Si0qJUIy637QMRudSi9kU/FFzx9EZazrIdnBgpU+3sEWCxAVhH2RtxW2Oz+T4p2o8uOPVcgA==
+
+fresh@0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
+  integrity sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==
+
+fs-extra@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-7.0.1.tgz#4f189c44aa123b895f722804f55ea23eadc348e9"
+  integrity sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==
+  dependencies:
+    graceful-fs "^4.1.2"
+    jsonfile "^4.0.0"
+    universalify "^0.1.0"
+
+fs-extra@^9.0.1:
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-9.1.0.tgz#5954460c764a8da2094ba3554bf839e6b9a7c86d"
+  integrity sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==
+  dependencies:
+    at-least-node "^1.0.0"
+    graceful-fs "^4.2.0"
+    jsonfile "^6.0.1"
+    universalify "^2.0.0"
+
+fs.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+  integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
+
+fsevents@~2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+
+function-bind@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
+  integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
+
+functional-red-black-tree@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
+  integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
+
+ga-lite@^2.1.4:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/ga-lite/-/ga-lite-2.1.4.tgz#f0c1fd3234bc44d8b15db640a93b34dbce84d43a"
+  integrity sha512-OJqPbutD8SfgF8SebyLh0uHdpQH32d5TuviXao5yPjyO2sGW3Gm+ooDmOhvXITgPepwwKxzv7ZMVKk2/hg/+lg==
+
+gensync@^1.0.0-beta.2:
+  version "1.0.0-beta.2"
+  resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
+  integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
+
+get-intrinsic@^1.0.2, get-intrinsic@^1.1.0, get-intrinsic@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.1.1.tgz#15f59f376f855c446963948f0d24cd3637b4abc6"
+  integrity sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==
+  dependencies:
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.1"
+
+get-stream@^6.0.0:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-6.0.1.tgz#a262d8eef67aced57c2852ad6167526a43cbf7b7"
+  integrity sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==
+
+get-symbol-description@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/get-symbol-description/-/get-symbol-description-1.0.0.tgz#7fdb81c900101fbd564dd5f1a30af5aadc1e58d6"
+  integrity sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==
+  dependencies:
+    call-bind "^1.0.2"
+    get-intrinsic "^1.1.1"
+
+github-slugger@^1.0.0, github-slugger@^1.3.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/github-slugger/-/github-slugger-1.4.0.tgz#206eb96cdb22ee56fdc53a28d5a302338463444e"
+  integrity sha512-w0dzqw/nt51xMVmlaV1+JRzN+oCa1KfcgGEWhxUG16wbdA+Xnt/yoFO8Z8x/V82ZcZ0wy6ln9QDup5avbhiDhQ==
+
+glob-parent@^5.1.2, glob-parent@~5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+  dependencies:
+    is-glob "^4.0.1"
+
+glob-parent@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.2.tgz#6d237d99083950c79290f24c7642a3de9a28f9e3"
+  integrity sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==
+  dependencies:
+    is-glob "^4.0.3"
+
+glob@7.1.7:
+  version "7.1.7"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.7.tgz#3b193e9233f01d42d0b3f78294bbeeb418f94a90"
+  integrity sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+glob@^7.1.3, glob@^7.1.7:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.0.tgz#d15535af7732e02e948f4c41628bd910293f6023"
+  integrity sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+globals@^11.1.0:
+  version "11.12.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
+  integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
+
+globals@^13.6.0, globals@^13.9.0:
+  version "13.12.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-13.12.0.tgz#4d733760304230a0082ed96e21e5c565f898089e"
+  integrity sha512-uS8X6lSKN2JumVoXrbUz+uG4BYG+eiawqm3qFcT7ammfbUHeCBoJMlHcec/S3krSk73/AE/f0szYFmgAA3kYZg==
+  dependencies:
+    type-fest "^0.20.2"
+
+globby@^11.0.1, globby@^11.0.3, globby@^11.1.0:
+  version "11.1.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-11.1.0.tgz#bd4be98bb042f83d796f7e3811991fbe82a0d34b"
+  integrity sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==
+  dependencies:
+    array-union "^2.1.0"
+    dir-glob "^3.0.1"
+    fast-glob "^3.2.9"
+    ignore "^5.2.0"
+    merge2 "^1.4.1"
+    slash "^3.0.0"
+
+graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0:
+  version "4.2.9"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.9.tgz#041b05df45755e587a24942279b9d113146e1c96"
+  integrity sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==
+
+gray-matter@^4.0.2:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/gray-matter/-/gray-matter-4.0.3.tgz#e893c064825de73ea1f5f7d88c7a9f7274288798"
+  integrity sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==
+  dependencies:
+    js-yaml "^3.13.1"
+    kind-of "^6.0.2"
+    section-matter "^1.0.0"
+    strip-bom-string "^1.0.0"
+
+gzip-size@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-6.0.0.tgz#065367fd50c239c0671cbcbad5be3e2eeb10e462"
+  integrity sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==
+  dependencies:
+    duplexer "^0.1.2"
+
+has-bigints@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.1.tgz#64fe6acb020673e3b78db035a5af69aa9d07b113"
+  integrity sha512-LSBS2LjbNBTf6287JEbEzvJgftkF5qFkmCo9hDRpAzKhUOlJ+hx8dd4USs00SgsUNwc4617J9ki5YtEClM2ffA==
+
+has-flag@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
+  integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0=
+
+has-flag@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
+  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
+
+has-property-descriptors@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz#610708600606d36961ed04c196193b6a607fa861"
+  integrity sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==
+  dependencies:
+    get-intrinsic "^1.1.1"
+
+has-symbols@^1.0.1, has-symbols@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.2.tgz#165d3070c00309752a1236a479331e3ac56f1423"
+  integrity sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==
+
+has-symbols@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.3.tgz#bb7b2c4349251dce87b125f7bdf874aa7c8b39f8"
+  integrity sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==
+
+has-tostringtag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-tostringtag/-/has-tostringtag-1.0.0.tgz#7e133818a7d394734f941e73c3d3f9291e658b25"
+  integrity sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==
+  dependencies:
+    has-symbols "^1.0.2"
+
+has@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
+  integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
+  dependencies:
+    function-bind "^1.1.1"
+
+hast-util-is-element@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/hast-util-is-element/-/hast-util-is-element-1.1.0.tgz#3b3ed5159a2707c6137b48637fbfe068e175a425"
+  integrity sha512-oUmNua0bFbdrD/ELDSSEadRVtWZOf3iF6Lbv81naqsIV99RnSCieTbWuWCY8BAeEfKJTKl0gRdokv+dELutHGQ==
+
+hast-util-sanitize@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/hast-util-sanitize/-/hast-util-sanitize-3.0.2.tgz#b0b783220af528ba8fe6999f092d138908678520"
+  integrity sha512-+2I0x2ZCAyiZOO/sb4yNLFmdwPBnyJ4PBkVTUMKMqBwYNA+lXSgOmoRXlJFazoyid9QPogRRKgKhVEodv181sA==
+  dependencies:
+    xtend "^4.0.0"
+
+hast-util-to-estree@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/hast-util-to-estree/-/hast-util-to-estree-2.1.0.tgz#aeac70aad0102ae309570907b3f56a08231d5323"
+  integrity sha512-Vwch1etMRmm89xGgz+voWXvVHba2iiMdGMKmaMfYt35rbVtFDq8JNwwAIvi8zHMkO6Gvqo9oTMwJTmzVRfXh4g==
+  dependencies:
+    "@types/estree" "^1.0.0"
+    "@types/estree-jsx" "^1.0.0"
+    "@types/hast" "^2.0.0"
+    "@types/unist" "^2.0.0"
+    comma-separated-tokens "^2.0.0"
+    estree-util-attach-comments "^2.0.0"
+    estree-util-is-identifier-name "^2.0.0"
+    hast-util-whitespace "^2.0.0"
+    mdast-util-mdx-expression "^1.0.0"
+    mdast-util-mdxjs-esm "^1.0.0"
+    property-information "^6.0.0"
+    space-separated-tokens "^2.0.0"
+    style-to-object "^0.3.0"
+    unist-util-position "^4.0.0"
+    zwitch "^2.0.0"
+
+hast-util-to-html@^7.0.0:
+  version "7.1.3"
+  resolved "https://registry.yarnpkg.com/hast-util-to-html/-/hast-util-to-html-7.1.3.tgz#9f339ca9bea71246e565fc79ff7dbfe98bb50f5e"
+  integrity sha512-yk2+1p3EJTEE9ZEUkgHsUSVhIpCsL/bvT8E5GzmWc+N1Po5gBw+0F8bo7dpxXR0nu0bQVxVZGX2lBGF21CmeDw==
+  dependencies:
+    ccount "^1.0.0"
+    comma-separated-tokens "^1.0.0"
+    hast-util-is-element "^1.0.0"
+    hast-util-whitespace "^1.0.0"
+    html-void-elements "^1.0.0"
+    property-information "^5.0.0"
+    space-separated-tokens "^1.0.0"
+    stringify-entities "^3.0.1"
+    unist-util-is "^4.0.0"
+    xtend "^4.0.0"
+
+hast-util-whitespace@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/hast-util-whitespace/-/hast-util-whitespace-1.0.4.tgz#e4fe77c4a9ae1cb2e6c25e02df0043d0164f6e41"
+  integrity sha512-I5GTdSfhYfAPNztx2xJRQpG8cuDSNt599/7YUn7Gx/WxNMsG+a835k97TDkFgk123cwjfwINaZknkKkphx/f2A==
+
+hast-util-whitespace@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/hast-util-whitespace/-/hast-util-whitespace-2.0.0.tgz#4fc1086467cc1ef5ba20673cb6b03cec3a970f1c"
+  integrity sha512-Pkw+xBHuV6xFeJprJe2BBEoDV+AvQySaz3pPDRUs5PNZEMQjpXJJueqrpcHIXxnWTcAGi/UOCgVShlkY6kLoqg==
+
+hosted-git-info@^2.1.4:
+  version "2.8.9"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
+  integrity sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==
+
+html-void-elements@^1.0.0:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/html-void-elements/-/html-void-elements-1.0.5.tgz#ce9159494e86d95e45795b166c2021c2cfca4483"
+  integrity sha512-uE/TxKuyNIcx44cIWnjr/rfIATDH7ZaOMmstu0CwhFG1Dunhlp4OC6/NMbhiwoq5BpW0ubi303qnEk/PZj614w==
+
+http-errors@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-2.0.0.tgz#b7774a1486ef73cf7667ac9ae0858c012c57b9d3"
+  integrity sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==
+  dependencies:
+    depd "2.0.0"
+    inherits "2.0.4"
+    setprototypeof "1.2.0"
+    statuses "2.0.1"
+    toidentifier "1.0.1"
+
+human-signals@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
+  integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==
+
+husky@^7.0.4:
+  version "7.0.4"
+  resolved "https://registry.yarnpkg.com/husky/-/husky-7.0.4.tgz#242048245dc49c8fb1bf0cc7cfb98dd722531535"
+  integrity sha512-vbaCKN2QLtP/vD4yvs6iz6hBEo6wkSzs8HpRah1Z6aGmF2KW5PdYuAd7uX5a+OyBZHBhd+TFLqgjUgytQr4RvQ==
+
+iconv-lite@0.4.24:
+  version "0.4.24"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
+  integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3"
+
+ignore@^4.0.6:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
+  integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==
+
+ignore@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.0.tgz#6d3bac8fa7fe0d45d9f9be7bac2fc279577e345a"
+  integrity sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==
+
+import-fresh@^3.0.0, import-fresh@^3.2.1:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
+  integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==
+  dependencies:
+    parent-module "^1.0.0"
+    resolve-from "^4.0.0"
+
+imurmurhash@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
+  integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
+
+indent-string@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-4.0.0.tgz#624f8f4497d619b2d9768531d58f4122854d7251"
+  integrity sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==
+
+indexes-of@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
+  integrity sha1-8w9xbI4r00bHtn0985FVZqfAVgc=
+
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  integrity sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+inherits@2, inherits@2.0.4, inherits@^2.0.0:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
+  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
+
+inline-style-parser@0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/inline-style-parser/-/inline-style-parser-0.1.1.tgz#ec8a3b429274e9c0a1f1c4ffa9453a7fef72cea1"
+  integrity sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==
+
+internal-slot@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.3.tgz#7347e307deeea2faac2ac6205d4bc7d34967f59c"
+  integrity sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==
+  dependencies:
+    get-intrinsic "^1.1.0"
+    has "^1.0.3"
+    side-channel "^1.0.4"
+
+intersection-observer@^0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/intersection-observer/-/intersection-observer-0.10.0.tgz#4d11d63c1ff67e21e62987be24d55218da1a1a69"
+  integrity sha512-fn4bQ0Xq8FTej09YC/jqKZwtijpvARlRp6wxL5WTA6yPe2YWSJ5RJh7Nm79rK2qB0wr6iDQzH60XGq5V/7u8YQ==
+
+ipaddr.js@1.9.1:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.1.tgz#bff38543eeb8984825079ff3a2a8e6cbd46781b3"
+  integrity sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==
+
+is-absolute-url@^3.0.0:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-3.0.3.tgz#96c6a22b6a23929b11ea0afb1836c36ad4a5d698"
+  integrity sha512-opmNIX7uFnS96NtPmhWQgQx6/NYFgsUXYMllcfzwWKUMwfo8kku1TvE6hkNcH+Q1ts5cMVrsY7j0bxXQDciu9Q==
+
+is-alphabetical@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-alphabetical/-/is-alphabetical-1.0.4.tgz#9e7d6b94916be22153745d184c298cbf986a686d"
+  integrity sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==
+
+is-alphabetical@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-alphabetical/-/is-alphabetical-2.0.1.tgz#01072053ea7c1036df3c7d19a6daaec7f19e789b"
+  integrity sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==
+
+is-alphanumeric@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-alphanumeric/-/is-alphanumeric-1.0.0.tgz#4a9cef71daf4c001c1d81d63d140cf53fd6889f4"
+  integrity sha1-Spzvcdr0wAHB2B1j0UDPU/1oifQ=
+
+is-alphanumerical@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz#7eb9a2431f855f6b1ef1a78e326df515696c4dbf"
+  integrity sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==
+  dependencies:
+    is-alphabetical "^1.0.0"
+    is-decimal "^1.0.0"
+
+is-alphanumerical@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz#7c03fbe96e3e931113e57f964b0a368cc2dfd875"
+  integrity sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==
+  dependencies:
+    is-alphabetical "^2.0.0"
+    is-decimal "^2.0.0"
+
+is-arrayish@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
+  integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
+
+is-bigint@^1.0.1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.4.tgz#08147a1875bc2b32005d41ccd8291dffc6691df3"
+  integrity sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==
+  dependencies:
+    has-bigints "^1.0.1"
+
+is-binary-path@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
+  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
+  dependencies:
+    binary-extensions "^2.0.0"
+
+is-boolean-object@^1.1.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.1.2.tgz#5c6dc200246dd9321ae4b885a114bb1f75f63719"
+  integrity sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==
+  dependencies:
+    call-bind "^1.0.2"
+    has-tostringtag "^1.0.0"
+
+is-buffer@^2.0.0:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.5.tgz#ebc252e400d22ff8d77fa09888821a24a658c191"
+  integrity sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==
+
+is-callable@^1.1.4, is-callable@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.4.tgz#47301d58dd0259407865547853df6d61fe471945"
+  integrity sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==
+
+is-ci@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
+  integrity sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==
+  dependencies:
+    ci-info "^2.0.0"
+
+is-ci@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-3.0.1.tgz#db6ecbed1bd659c43dac0f45661e7674103d1867"
+  integrity sha512-ZYvCgrefwqoQ6yTyYUbQu64HsITZ3NfKX1lzaEYdkTDcfKzzCI/wthRRYKkdjHKFVgNiXKAKm65Zo1pk2as/QQ==
+  dependencies:
+    ci-info "^3.2.0"
+
+is-core-module@^2.2.0, is-core-module@^2.8.0, is-core-module@^2.8.1:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.8.1.tgz#f59fdfca701d5879d0a6b100a40aa1560ce27211"
+  integrity sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA==
+  dependencies:
+    has "^1.0.3"
+
+is-date-object@^1.0.1:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.5.tgz#0841d5536e724c25597bf6ea62e1bd38298df31f"
+  integrity sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==
+  dependencies:
+    has-tostringtag "^1.0.0"
+
+is-decimal@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-decimal/-/is-decimal-1.0.4.tgz#65a3a5958a1c5b63a706e1b333d7cd9f630d3fa5"
+  integrity sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==
+
+is-decimal@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-decimal/-/is-decimal-2.0.1.tgz#9469d2dc190d0214fd87d78b78caecc0cc14eef7"
+  integrity sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==
+
+is-docker@^2.0.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.2.1.tgz#33eeabe23cfe86f14bde4408a02c0cfb853acdaa"
+  integrity sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==
+
+is-extendable@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
+  integrity sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik=
+
+is-extglob@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
+  integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=
+
+is-fullwidth-code-point@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
+  integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
+
+is-fullwidth-code-point@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-4.0.0.tgz#fae3167c729e7463f8461ce512b080a49268aa88"
+  integrity sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ==
+
+is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
+  integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
+  dependencies:
+    is-extglob "^2.1.1"
+
+is-hexadecimal@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz#cc35c97588da4bd49a8eedd6bc4082d44dcb23a7"
+  integrity sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==
+
+is-hexadecimal@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz#86b5bf668fca307498d319dfc03289d781a90027"
+  integrity sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==
+
+is-negative-zero@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.2.tgz#7bf6f03a28003b8b3965de3ac26f664d765f3150"
+  integrity sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==
+
+is-number-object@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.6.tgz#6a7aaf838c7f0686a50b4553f7e54a96494e89f0"
+  integrity sha512-bEVOqiRcvo3zO1+G2lVMy+gkkEm9Yh7cDMRusKKu5ZJKPUYSJwICTKZrNKHA2EbSP0Tu0+6B/emsYNHZyn6K8g==
+  dependencies:
+    has-tostringtag "^1.0.0"
+
+is-number@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
+  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
+
+is-plain-obj@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-2.1.0.tgz#45e42e37fccf1f40da8e5f76ee21515840c09287"
+  integrity sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==
+
+is-plain-obj@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-4.0.0.tgz#06c0999fd7574edf5a906ba5644ad0feb3a84d22"
+  integrity sha512-NXRbBtUdBioI73y/HmOhogw/U5msYPC9DAtGkJXeFcFWSFZw0mCUsPxk/snTuJHzNKA8kLBK4rH97RMB1BfCXw==
+
+is-reference@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-reference/-/is-reference-3.0.0.tgz#b1380c03d96ddf7089709781e3208fceb0c92cd6"
+  integrity sha512-Eo1W3wUoHWoCoVM4GVl/a+K0IgiqE5aIo4kJABFyMum1ZORlPkC+UC357sSQUL5w5QCE5kCC9upl75b7+7CY/Q==
+  dependencies:
+    "@types/estree" "*"
+
+is-regex@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.4.tgz#eef5663cd59fa4c0ae339505323df6854bb15958"
+  integrity sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==
+  dependencies:
+    call-bind "^1.0.2"
+    has-tostringtag "^1.0.0"
+
+is-shared-array-buffer@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.1.tgz#97b0c85fbdacb59c9c446fe653b82cf2b5b7cfe6"
+  integrity sha512-IU0NmyknYZN0rChcKhRO1X8LYz5Isj/Fsqh8NJOSf+N/hCOTwy29F32Ik7a+QszE63IdvmwdTPDd6cZ5pg4cwA==
+
+is-stream@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.1.tgz#fac1e3d53b97ad5a9d0ae9cef2389f5810a5c077"
+  integrity sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==
+
+is-string@^1.0.5, is-string@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.7.tgz#0dd12bf2006f255bb58f695110eff7491eebc0fd"
+  integrity sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==
+  dependencies:
+    has-tostringtag "^1.0.0"
+
+is-symbol@^1.0.2, is-symbol@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.4.tgz#a6dac93b635b063ca6872236de88910a57af139c"
+  integrity sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==
+  dependencies:
+    has-symbols "^1.0.2"
+
+is-url@^1.2.2:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/is-url/-/is-url-1.2.4.tgz#04a4df46d28c4cff3d73d01ff06abeb318a1aa52"
+  integrity sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww==
+
+is-weakref@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-weakref/-/is-weakref-1.0.2.tgz#9529f383a9338205e89765e0392efc2f100f06f2"
+  integrity sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==
+  dependencies:
+    call-bind "^1.0.2"
+
+is-whitespace-character@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-whitespace-character/-/is-whitespace-character-1.0.4.tgz#0858edd94a95594c7c9dd0b5c174ec6e45ee4aa7"
+  integrity sha512-SDweEzfIZM0SJV0EUga669UTKlmL0Pq8Lno0QDQsPnvECB3IM2aP0gdx5TrU0A01MAPfViaZiI2V1QMZLaKK5w==
+
+is-word-character@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-word-character/-/is-word-character-1.0.4.tgz#ce0e73216f98599060592f62ff31354ddbeb0230"
+  integrity sha512-5SMO8RVennx3nZrqtKwCGyyetPE9VDba5ugvKLaD4KopPG5kR4mQ7tNt/r7feL5yt5h3lpuBbIUmCOG2eSzXHA==
+
+is-wsl@^2.1.1:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-2.2.0.tgz#74a4c76e77ca9fd3f932f290c17ea326cd157271"
+  integrity sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==
+  dependencies:
+    is-docker "^2.0.0"
+
+isexe@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
+  integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=
+
+istextorbinary@2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/istextorbinary/-/istextorbinary-2.2.1.tgz#a5231a08ef6dd22b268d0895084cf8d58b5bec53"
+  integrity sha512-TS+hoFl8Z5FAFMK38nhBkdLt44CclNRgDHWeMgsV8ko3nDlr/9UI2Sf839sW7enijf8oKsZYXRvM8g0it9Zmcw==
+  dependencies:
+    binaryextensions "2"
+    editions "^1.3.3"
+    textextensions "2"
+
+"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
+  integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
+
+js-yaml@^3.13.1:
+  version "3.14.1"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.14.1.tgz#dae812fdb3825fa306609a8717383c50c36a0537"
+  integrity sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^4.0.0"
+
+jsesc@^2.5.1:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
+  integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==
+
+json-parse-better-errors@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
+  integrity sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==
+
+json-parse-even-better-errors@^2.3.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
+  integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
+
+json-schema-traverse@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
+  integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==
+
+json-schema-traverse@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz#ae7bcb3656ab77a73ba5c49bf654f38e6b6860e2"
+  integrity sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==
+
+json-stable-stringify-without-jsonify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
+  integrity sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=
+
+json5@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.2.tgz#63d98d60f21b313b77c4d6da18bfa69d80e1d593"
+  integrity sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==
+  dependencies:
+    minimist "^1.2.0"
+
+json5@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.1.tgz#655d50ed1e6f95ad1a3caababd2b0efda10b395c"
+  integrity sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==
+
+jsonfile@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb"
+  integrity sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=
+  optionalDependencies:
+    graceful-fs "^4.1.6"
+
+jsonfile@^6.0.1:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-6.1.0.tgz#bc55b2634793c679ec6403094eb13698a6ec0aae"
+  integrity sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==
+  dependencies:
+    universalify "^2.0.0"
+  optionalDependencies:
+    graceful-fs "^4.1.6"
+
+"jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.2.1.tgz#720b97bfe7d901b927d87c3773637ae8ea48781b"
+  integrity sha512-uP5vu8xfy2F9A6LGC22KO7e2/vGTS1MhP+18f++ZNlf0Ohaxbc9nIEwHAsejlJKyzfZzU5UIhe5ItYkitcZnZA==
+  dependencies:
+    array-includes "^3.1.3"
+    object.assign "^4.1.2"
+
+kind-of@^6.0.0, kind-of@^6.0.2:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
+  integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
+
+klaw-sync@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/klaw-sync/-/klaw-sync-6.0.0.tgz#1fd2cfd56ebb6250181114f0a581167099c2b28c"
+  integrity sha512-nIeuVSzdCCs6TDPTqI8w1Yre34sSq7AkZ4B3sfOBbI2CgVSB4Du4aLQijFU2+lhAFCwt9+42Hel6lQNIv6AntQ==
+  dependencies:
+    graceful-fs "^4.1.11"
+
+kleur@^4.0.3:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/kleur/-/kleur-4.1.5.tgz#95106101795f7050c6c650f350c683febddb1780"
+  integrity sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==
+
+language-subtag-registry@~0.3.2:
+  version "0.3.21"
+  resolved "https://registry.yarnpkg.com/language-subtag-registry/-/language-subtag-registry-0.3.21.tgz#04ac218bea46f04cb039084602c6da9e788dd45a"
+  integrity sha512-L0IqwlIXjilBVVYKFT37X9Ih11Um5NEl9cbJIuU/SwP/zEEAbBPOnEeeuxVMf45ydWQRDQN3Nqc96OgbH1K+Pg==
+
+language-tags@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/language-tags/-/language-tags-1.0.5.tgz#d321dbc4da30ba8bf3024e040fa5c14661f9193a"
+  integrity sha1-0yHbxNowuovzAk4ED6XBRmH5GTo=
+  dependencies:
+    language-subtag-registry "~0.3.2"
+
+levn@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade"
+  integrity sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==
+  dependencies:
+    prelude-ls "^1.2.1"
+    type-check "~0.4.0"
+
+lilconfig@2.0.4, lilconfig@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.0.4.tgz#f4507d043d7058b380b6a8f5cb7bcd4b34cee082"
+  integrity sha512-bfTIN7lEsiooCocSISTWXkiWJkRqtL9wYtYy+8EK3Y41qh3mpwPU0ycTOgjdY9ErwXCc8QyrQp82bdL0Xkm9yA==
+
+lines-and-columns@^1.1.6:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
+  integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
+
+lint-staged@>=10:
+  version "12.3.1"
+  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-12.3.1.tgz#d475b0c0d0a12d91dde58a429ac6268dea485f06"
+  integrity sha512-Ocht/eT+4/siWOZDJpNUKcKX2UeWW/pDbohJ4gRsrafAjBi79JK8kiNVk2ciIVNKdw0Q4ABptl2nr6uQAlRImw==
+  dependencies:
+    cli-truncate "^3.1.0"
+    colorette "^2.0.16"
+    commander "^8.3.0"
+    debug "^4.3.3"
+    execa "^5.1.1"
+    lilconfig "2.0.4"
+    listr2 "^4.0.1"
+    micromatch "^4.0.4"
+    normalize-path "^3.0.0"
+    object-inspect "^1.12.0"
+    string-argv "^0.3.1"
+    supports-color "^9.2.1"
+    yaml "^1.10.2"
+
+listr2@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/listr2/-/listr2-4.0.1.tgz#e050c1fd390276e191f582603d6e3531cd6fd2b3"
+  integrity sha512-D65Nl+zyYHL2jQBGmxtH/pU8koPZo5C8iCNE8EoB04RwPgQG1wuaKwVbeZv9LJpiH4Nxs0FCp+nNcG8OqpniiA==
+  dependencies:
+    cli-truncate "^2.1.0"
+    colorette "^2.0.16"
+    log-update "^4.0.0"
+    p-map "^4.0.0"
+    rfdc "^1.3.0"
+    rxjs "^7.5.2"
+    through "^2.3.8"
+    wrap-ansi "^7.0.0"
+
+load-json-file@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-4.0.0.tgz#2f5f45ab91e33216234fd53adab668eb4ec0993b"
+  integrity sha1-L19Fq5HjMhYjT9U62rZo607AmTs=
+  dependencies:
+    graceful-fs "^4.1.2"
+    parse-json "^4.0.0"
+    pify "^3.0.0"
+    strip-bom "^3.0.0"
+
+locate-path@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
+  integrity sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=
+  dependencies:
+    p-locate "^2.0.0"
+    path-exists "^3.0.0"
+
+lodash.isequal@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
+  integrity sha1-QVxEePK8wwEgwizhDtMib30+GOA=
+
+lodash.merge@^4.6.2:
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
+  integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
+
+lodash.throttle@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
+  integrity sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==
+
+lodash.truncate@^4.4.2:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/lodash.truncate/-/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193"
+  integrity sha1-WjUNoLERO4N+z//VgSy+WNbq4ZM=
+
+lodash@^4.17.15, lodash@^4.17.20:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
+log-update@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/log-update/-/log-update-4.0.0.tgz#589ecd352471f2a1c0c570287543a64dfd20e0a1"
+  integrity sha512-9fkkDevMefjg0mmzWFBW8YkFP91OrizzkW3diF7CpG+S2EYdy4+TVfGwz1zeF8x7hCx1ovSPTOE9Ngib74qqUg==
+  dependencies:
+    ansi-escapes "^4.3.0"
+    cli-cursor "^3.1.0"
+    slice-ansi "^4.0.0"
+    wrap-ansi "^6.2.0"
+
+longest-streak@^2.0.1:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/longest-streak/-/longest-streak-2.0.4.tgz#b8599957da5b5dab64dee3fe316fa774597d90e4"
+  integrity sha512-vM6rUVCVUJJt33bnmHiZEvr7wPT78ztX7rojL+LW51bHtLh6HTjx84LA5W4+oa6aKEJA7jJu5LR6vQRBpA5DVg==
+
+longest-streak@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/longest-streak/-/longest-streak-3.0.1.tgz#c97315b7afa0e7d9525db9a5a2953651432bdc5d"
+  integrity sha512-cHlYSUpL2s7Fb3394mYxwTYj8niTaNHUCLr0qdiCXQfSjfuA7CKofpX2uSwEfFDQ0EB7JcnMnm+GjbqqoinYYg==
+
+loose-envify@^1.1.0, loose-envify@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
+  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
+  dependencies:
+    js-tokens "^3.0.0 || ^4.0.0"
+
+lru-cache@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94"
+  integrity sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==
+  dependencies:
+    yallist "^4.0.0"
+
+lz-string@^1.4.4:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.4.4.tgz#c0d8eaf36059f705796e1e344811cf4c498d3a26"
+  integrity sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY=
+
+markdown-escapes@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/markdown-escapes/-/markdown-escapes-1.0.4.tgz#c95415ef451499d7602b91095f3c8e8975f78535"
+  integrity sha512-8z4efJYk43E0upd0NbVXwgSTQs6cT3T06etieCMEg7dRbzCbxUCK/GHlX8mhHRDcp+OLlHkPKsvqQTCvsRl2cg==
+
+markdown-extensions@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/markdown-extensions/-/markdown-extensions-1.1.1.tgz#fea03b539faeaee9b4ef02a3769b455b189f7fc3"
+  integrity sha512-WWC0ZuMzCyDHYCasEGs4IPvLyTGftYwh6wIEOULOF0HXcqZlhwRzrK0w2VUlxWA98xnvb/jszw4ZSkJ6ADpM6Q==
+
+markdown-table@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-2.0.0.tgz#194a90ced26d31fe753d8b9434430214c011865b"
+  integrity sha512-Ezda85ToJUBhM6WGaG6veasyym+Tbs3cMAw/ZhOPqXiYsr0jgocBV3j3nx+4lk47plLlIqjwuTm/ywVI+zjJ/A==
+  dependencies:
+    repeat-string "^1.0.0"
+
+markdown-table@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-3.0.2.tgz#9b59eb2c1b22fe71954a65ff512887065a7bb57c"
+  integrity sha512-y8j3a5/DkJCmS5x4dMCQL+OR0+2EAq3DOtio1COSHsmW2BGXnNCK3v12hJt1LrUz5iZH5g0LmuYOjDdI+czghA==
+
+mdast-util-compact@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/mdast-util-compact/-/mdast-util-compact-2.0.1.tgz#cabc69a2f43103628326f35b1acf735d55c99490"
+  integrity sha512-7GlnT24gEwDrdAwEHrU4Vv5lLWrEer4KOkAiKT9nYstsTad7Oc1TwqT2zIMKRdZF7cTuaf+GA1E4Kv7jJh8mPA==
+  dependencies:
+    unist-util-visit "^2.0.0"
+
+mdast-util-definitions@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/mdast-util-definitions/-/mdast-util-definitions-3.0.1.tgz#06af6c49865fc63d6d7d30125569e2f7ae3d0a86"
+  integrity sha512-BAv2iUm/e6IK/b2/t+Fx69EL/AGcq/IG2S+HxHjDJGfLJtd6i9SZUS76aC9cig+IEucsqxKTR0ot3m933R3iuA==
+  dependencies:
+    unist-util-visit "^2.0.0"
+
+mdast-util-definitions@^5.0.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/mdast-util-definitions/-/mdast-util-definitions-5.1.1.tgz#2c1d684b28e53f84938bb06317944bee8efa79db"
+  integrity sha512-rQ+Gv7mHttxHOBx2dkF4HWTg+EE+UR78ptQWDylzPKaQuVGdG4HIoY3SrS/pCp80nZ04greFvXbVFHT+uf0JVQ==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    "@types/unist" "^2.0.0"
+    unist-util-visit "^4.0.0"
+
+mdast-util-find-and-replace@^2.0.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/mdast-util-find-and-replace/-/mdast-util-find-and-replace-2.2.1.tgz#249901ef43c5f41d6e8a8d446b3b63b17e592d7c"
+  integrity sha512-SobxkQXFAdd4b5WmEakmkVoh18icjQRxGy5OWTCzgsLRm1Fu/KCtwD1HIQSsmq5ZRjVH0Ehwg6/Fn3xIUk+nKw==
+  dependencies:
+    escape-string-regexp "^5.0.0"
+    unist-util-is "^5.0.0"
+    unist-util-visit-parents "^5.0.0"
+
+mdast-util-from-markdown@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/mdast-util-from-markdown/-/mdast-util-from-markdown-1.2.0.tgz#84df2924ccc6c995dec1e2368b2b208ad0a76268"
+  integrity sha512-iZJyyvKD1+K7QX1b5jXdE7Sc5dtoTry1vzV28UZZe8Z1xVnB/czKntJ7ZAkG0tANqRnBF6p3p7GpU1y19DTf2Q==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    "@types/unist" "^2.0.0"
+    decode-named-character-reference "^1.0.0"
+    mdast-util-to-string "^3.1.0"
+    micromark "^3.0.0"
+    micromark-util-decode-numeric-character-reference "^1.0.0"
+    micromark-util-decode-string "^1.0.0"
+    micromark-util-normalize-identifier "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+    unist-util-stringify-position "^3.0.0"
+    uvu "^0.5.0"
+
+mdast-util-frontmatter@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/mdast-util-frontmatter/-/mdast-util-frontmatter-1.0.0.tgz#ef12469379782e4a0fd995fed60cc3b871e6c819"
+  integrity sha512-7itKvp0arEVNpCktOET/eLFAYaZ+0cNjVtFtIPxgQ5tV+3i+D4SDDTjTzPWl44LT59PC+xdx+glNTawBdF98Mw==
+  dependencies:
+    micromark-extension-frontmatter "^1.0.0"
+
+mdast-util-gfm-autolink-literal@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/mdast-util-gfm-autolink-literal/-/mdast-util-gfm-autolink-literal-1.0.2.tgz#4032dcbaddaef7d4f2f3768ed830475bb22d3970"
+  integrity sha512-FzopkOd4xTTBeGXhXSBU0OCDDh5lUj2rd+HQqG92Ld+jL4lpUfgX2AT2OHAVP9aEeDKp7G92fuooSZcYJA3cRg==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    ccount "^2.0.0"
+    mdast-util-find-and-replace "^2.0.0"
+    micromark-util-character "^1.0.0"
+
+mdast-util-gfm-footnote@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/mdast-util-gfm-footnote/-/mdast-util-gfm-footnote-1.0.1.tgz#11d2d40a1a673a399c459e467fa85e00223191fe"
+  integrity sha512-p+PrYlkw9DeCRkTVw1duWqPRHX6Ywh2BNKJQcZbCwAuP/59B0Lk9kakuAd7KbQprVO4GzdW8eS5++A9PUSqIyw==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    mdast-util-to-markdown "^1.3.0"
+    micromark-util-normalize-identifier "^1.0.0"
+
+mdast-util-gfm-strikethrough@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/mdast-util-gfm-strikethrough/-/mdast-util-gfm-strikethrough-1.0.1.tgz#a4a74c36864ec6a6e3bbd31e1977f29beb475789"
+  integrity sha512-zKJbEPe+JP6EUv0mZ0tQUyLQOC+FADt0bARldONot/nefuISkaZFlmVK4tU6JgfyZGrky02m/I6PmehgAgZgqg==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    mdast-util-to-markdown "^1.3.0"
+
+mdast-util-gfm-table@^1.0.0:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/mdast-util-gfm-table/-/mdast-util-gfm-table-1.0.6.tgz#184e900979fe790745fc3dabf77a4114595fcd7f"
+  integrity sha512-uHR+fqFq3IvB3Rd4+kzXW8dmpxUhvgCQZep6KdjsLK4O6meK5dYZEayLtIxNus1XO3gfjfcIFe8a7L0HZRGgag==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    markdown-table "^3.0.0"
+    mdast-util-from-markdown "^1.0.0"
+    mdast-util-to-markdown "^1.3.0"
+
+mdast-util-gfm-task-list-item@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/mdast-util-gfm-task-list-item/-/mdast-util-gfm-task-list-item-1.0.1.tgz#6f35f09c6e2bcbe88af62fdea02ac199cc802c5c"
+  integrity sha512-KZ4KLmPdABXOsfnM6JHUIjxEvcx2ulk656Z/4Balw071/5qgnhz+H1uGtf2zIGnrnvDC8xR4Fj9uKbjAFGNIeA==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    mdast-util-to-markdown "^1.3.0"
+
+mdast-util-gfm@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/mdast-util-gfm/-/mdast-util-gfm-2.0.1.tgz#16fcf70110ae689a06d77e8f4e346223b64a0ea6"
+  integrity sha512-42yHBbfWIFisaAfV1eixlabbsa6q7vHeSPY+cg+BBjX51M8xhgMacqH9g6TftB/9+YkcI0ooV4ncfrJslzm/RQ==
+  dependencies:
+    mdast-util-from-markdown "^1.0.0"
+    mdast-util-gfm-autolink-literal "^1.0.0"
+    mdast-util-gfm-footnote "^1.0.0"
+    mdast-util-gfm-strikethrough "^1.0.0"
+    mdast-util-gfm-table "^1.0.0"
+    mdast-util-gfm-task-list-item "^1.0.0"
+    mdast-util-to-markdown "^1.0.0"
+
+mdast-util-mdx-expression@^1.0.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/mdast-util-mdx-expression/-/mdast-util-mdx-expression-1.3.0.tgz#fed063cc6320da1005c8e50338bb374d6dac69ba"
+  integrity sha512-9kTO13HaL/ChfzVCIEfDRdp1m5hsvsm6+R8yr67mH+KS2ikzZ0ISGLPTbTswOFpLLlgVHO9id3cul4ajutCvCA==
+  dependencies:
+    "@types/estree-jsx" "^1.0.0"
+    "@types/hast" "^2.0.0"
+    "@types/mdast" "^3.0.0"
+    mdast-util-from-markdown "^1.0.0"
+    mdast-util-to-markdown "^1.0.0"
+
+mdast-util-mdx-jsx@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/mdast-util-mdx-jsx/-/mdast-util-mdx-jsx-2.1.0.tgz#029f5a9c38485dbb5cf482059557ee7d788f1947"
+  integrity sha512-KzgzfWMhdteDkrY4mQtyvTU5bc/W4ppxhe9SzelO6QUUiwLAM+Et2Dnjjprik74a336kHdo0zKm7Tp+n6FFeRg==
+  dependencies:
+    "@types/estree-jsx" "^1.0.0"
+    "@types/hast" "^2.0.0"
+    "@types/mdast" "^3.0.0"
+    ccount "^2.0.0"
+    mdast-util-to-markdown "^1.3.0"
+    parse-entities "^4.0.0"
+    stringify-entities "^4.0.0"
+    unist-util-remove-position "^4.0.0"
+    unist-util-stringify-position "^3.0.0"
+    vfile-message "^3.0.0"
+
+mdast-util-mdx@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/mdast-util-mdx/-/mdast-util-mdx-2.0.0.tgz#dd4f6c993cf27da32725e50a04874f595b7b63fb"
+  integrity sha512-M09lW0CcBT1VrJUaF/PYxemxxHa7SLDHdSn94Q9FhxjCQfuW7nMAWKWimTmA3OyDMSTH981NN1csW1X+HPSluw==
+  dependencies:
+    mdast-util-mdx-expression "^1.0.0"
+    mdast-util-mdx-jsx "^2.0.0"
+    mdast-util-mdxjs-esm "^1.0.0"
+
+mdast-util-mdxjs-esm@^1.0.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/mdast-util-mdxjs-esm/-/mdast-util-mdxjs-esm-1.3.0.tgz#137345ef827169aeeeb6069277cd3e090830ce9a"
+  integrity sha512-7N5ihsOkAEGjFotIX9p/YPdl4TqUoMxL4ajNz7PbT89BqsdWJuBC9rvgt6wpbwTZqWWR0jKWqQbwsOWDBUZv4g==
+  dependencies:
+    "@types/estree-jsx" "^1.0.0"
+    "@types/hast" "^2.0.0"
+    "@types/mdast" "^3.0.0"
+    mdast-util-from-markdown "^1.0.0"
+    mdast-util-to-markdown "^1.0.0"
+
+mdast-util-to-hast@^12.1.0:
+  version "12.2.2"
+  resolved "https://registry.yarnpkg.com/mdast-util-to-hast/-/mdast-util-to-hast-12.2.2.tgz#2bd8cf985a67c90c181eadcfdd8d31b8798ed9a1"
+  integrity sha512-lVkUttV9wqmdXFtEBXKcepvU/zfwbhjbkM5rxrquLW55dS1DfOrnAXCk5mg1be1sfY/WfMmayGy1NsbK1GLCYQ==
+  dependencies:
+    "@types/hast" "^2.0.0"
+    "@types/mdast" "^3.0.0"
+    "@types/mdurl" "^1.0.0"
+    mdast-util-definitions "^5.0.0"
+    mdurl "^1.0.0"
+    micromark-util-sanitize-uri "^1.0.0"
+    trim-lines "^3.0.0"
+    unist-builder "^3.0.0"
+    unist-util-generated "^2.0.0"
+    unist-util-position "^4.0.0"
+    unist-util-visit "^4.0.0"
+
+mdast-util-to-hast@^9.0.0:
+  version "9.1.2"
+  resolved "https://registry.yarnpkg.com/mdast-util-to-hast/-/mdast-util-to-hast-9.1.2.tgz#10fa5ed9d45bf3755891e5801d0f32e2584a9423"
+  integrity sha512-OpkFLBC2VnNAb2FNKcKWu9FMbJhQKog+FCT8nuKmQNIKXyT1n3SIskE7uWDep6x+cA20QXlK5AETHQtYmQmxtQ==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    "@types/unist" "^2.0.0"
+    mdast-util-definitions "^3.0.0"
+    mdurl "^1.0.0"
+    unist-builder "^2.0.0"
+    unist-util-generated "^1.0.0"
+    unist-util-position "^3.0.0"
+    unist-util-visit "^2.0.0"
+
+mdast-util-to-markdown@^1.0.0, mdast-util-to-markdown@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/mdast-util-to-markdown/-/mdast-util-to-markdown-1.3.0.tgz#38b6cdc8dc417de642a469c4fc2abdf8c931bd1e"
+  integrity sha512-6tUSs4r+KK4JGTTiQ7FfHmVOaDrLQJPmpjD6wPMlHGUVXoG9Vjc3jIeP+uyBWRf8clwB2blM+W7+KrlMYQnftA==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    "@types/unist" "^2.0.0"
+    longest-streak "^3.0.0"
+    mdast-util-to-string "^3.0.0"
+    micromark-util-decode-string "^1.0.0"
+    unist-util-visit "^4.0.0"
+    zwitch "^2.0.0"
+
+mdast-util-to-string@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/mdast-util-to-string/-/mdast-util-to-string-1.1.0.tgz#27055500103f51637bd07d01da01eb1967a43527"
+  integrity sha512-jVU0Nr2B9X3MU4tSK7JP1CMkSvOj7X5l/GboG1tKRw52lLF1x2Ju92Ms9tNetCcbfX3hzlM73zYo2NKkWSfF/A==
+
+mdast-util-to-string@^3.0.0, mdast-util-to-string@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/mdast-util-to-string/-/mdast-util-to-string-3.1.0.tgz#56c506d065fbf769515235e577b5a261552d56e9"
+  integrity sha512-n4Vypz/DZgwo0iMHLQL49dJzlp7YtAJP+N07MZHpjPf/5XJuHUWstviF4Mn2jEiR/GNmtnRRqnwsXExk3igfFA==
+
+mdurl@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
+  integrity sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=
+
+media-typer@0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
+  integrity sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==
+
+memorystream@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/memorystream/-/memorystream-0.3.1.tgz#86d7090b30ce455d63fbae12dda51a47ddcaf9b2"
+  integrity sha1-htcJCzDORV1j+64S3aUaR93K+bI=
+
+merge-descriptors@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
+  integrity sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==
+
+merge-stream@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
+  integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
+
+merge2@^1.3.0, merge2@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
+  integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
+
+methods@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
+  integrity sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==
+
+metro-cache@0.72.2:
+  version "0.72.2"
+  resolved "https://registry.yarnpkg.com/metro-cache/-/metro-cache-0.72.2.tgz#114e62dad3539c41cf5625045b9a6e5181499f20"
+  integrity sha512-0Yw3J32eYTp7x7bAAg+a9ScBG/mpib6Wq4WPSYvhoNilPFHzh7knLDMil3WGVCQlI1r+5xtpw/FDhNVKuypQqg==
+  dependencies:
+    metro-core "0.72.2"
+    rimraf "^2.5.4"
+
+metro-core@0.72.2:
+  version "0.72.2"
+  resolved "https://registry.yarnpkg.com/metro-core/-/metro-core-0.72.2.tgz#ca975cfebce5c89f51dca905777bc3877008ae69"
+  integrity sha512-OXNH8UbKIhvpyHGJrdQYnPUmyPHSuVY4OO6pQxODdTW+uiO68PPPgIIVN67vlCAirZolxRFpma70N7m0sGCZyg==
+  dependencies:
+    lodash.throttle "^4.1.1"
+    metro-resolver "0.72.2"
+
+metro-resolver@0.72.2:
+  version "0.72.2"
+  resolved "https://registry.yarnpkg.com/metro-resolver/-/metro-resolver-0.72.2.tgz#332ecd646d683a47923fc403e3df37a7cf96da3b"
+  integrity sha512-5KTWolUgA6ivLkg3DmFS2WltphBPQW7GT7An+6Izk/NU+y/6crmsoaLmNxjpZo4Fv+i/FxDSXqpbpQ6KrRWvlQ==
+  dependencies:
+    absolute-path "^0.0.0"
+
+micromark-core-commonmark@^1.0.0, micromark-core-commonmark@^1.0.1:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/micromark-core-commonmark/-/micromark-core-commonmark-1.0.6.tgz#edff4c72e5993d93724a3c206970f5a15b0585ad"
+  integrity sha512-K+PkJTxqjFfSNkfAhp4GB+cZPfQd6dxtTXnf+RjZOV7T4EEXnvgzOcnp+eSTmpGk9d1S9sL6/lqrgSNn/s0HZA==
+  dependencies:
+    decode-named-character-reference "^1.0.0"
+    micromark-factory-destination "^1.0.0"
+    micromark-factory-label "^1.0.0"
+    micromark-factory-space "^1.0.0"
+    micromark-factory-title "^1.0.0"
+    micromark-factory-whitespace "^1.0.0"
+    micromark-util-character "^1.0.0"
+    micromark-util-chunked "^1.0.0"
+    micromark-util-classify-character "^1.0.0"
+    micromark-util-html-tag-name "^1.0.0"
+    micromark-util-normalize-identifier "^1.0.0"
+    micromark-util-resolve-all "^1.0.0"
+    micromark-util-subtokenize "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.1"
+    uvu "^0.5.0"
+
+micromark-extension-frontmatter@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/micromark-extension-frontmatter/-/micromark-extension-frontmatter-1.0.0.tgz#612498e6dad87c132c95e25f0918e7cc0cd535f6"
+  integrity sha512-EXjmRnupoX6yYuUJSQhrQ9ggK0iQtQlpi6xeJzVD5xscyAI+giqco5fdymayZhJMbIFecjnE2yz85S9NzIgQpg==
+  dependencies:
+    fault "^2.0.0"
+    micromark-util-character "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+
+micromark-extension-gfm-autolink-literal@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/micromark-extension-gfm-autolink-literal/-/micromark-extension-gfm-autolink-literal-1.0.3.tgz#dc589f9c37eaff31a175bab49f12290edcf96058"
+  integrity sha512-i3dmvU0htawfWED8aHMMAzAVp/F0Z+0bPh3YrbTPPL1v4YAlCZpy5rBO5p0LPYiZo0zFVkoYh7vDU7yQSiCMjg==
+  dependencies:
+    micromark-util-character "^1.0.0"
+    micromark-util-sanitize-uri "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+    uvu "^0.5.0"
+
+micromark-extension-gfm-footnote@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/micromark-extension-gfm-footnote/-/micromark-extension-gfm-footnote-1.0.4.tgz#cbfd8873b983e820c494498c6dac0105920818d5"
+  integrity sha512-E/fmPmDqLiMUP8mLJ8NbJWJ4bTw6tS+FEQS8CcuDtZpILuOb2kjLqPEeAePF1djXROHXChM/wPJw0iS4kHCcIg==
+  dependencies:
+    micromark-core-commonmark "^1.0.0"
+    micromark-factory-space "^1.0.0"
+    micromark-util-character "^1.0.0"
+    micromark-util-normalize-identifier "^1.0.0"
+    micromark-util-sanitize-uri "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+    uvu "^0.5.0"
+
+micromark-extension-gfm-strikethrough@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/micromark-extension-gfm-strikethrough/-/micromark-extension-gfm-strikethrough-1.0.4.tgz#162232c284ffbedd8c74e59c1525bda217295e18"
+  integrity sha512-/vjHU/lalmjZCT5xt7CcHVJGq8sYRm80z24qAKXzaHzem/xsDYb2yLL+NNVbYvmpLx3O7SYPuGL5pzusL9CLIQ==
+  dependencies:
+    micromark-util-chunked "^1.0.0"
+    micromark-util-classify-character "^1.0.0"
+    micromark-util-resolve-all "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+    uvu "^0.5.0"
+
+micromark-extension-gfm-table@^1.0.0:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/micromark-extension-gfm-table/-/micromark-extension-gfm-table-1.0.5.tgz#7b708b728f8dc4d95d486b9e7a2262f9cddbcbb4"
+  integrity sha512-xAZ8J1X9W9K3JTJTUL7G6wSKhp2ZYHrFk5qJgY/4B33scJzE2kpfRL6oiw/veJTbt7jiM/1rngLlOKPWr1G+vg==
+  dependencies:
+    micromark-factory-space "^1.0.0"
+    micromark-util-character "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+    uvu "^0.5.0"
+
+micromark-extension-gfm-tagfilter@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/micromark-extension-gfm-tagfilter/-/micromark-extension-gfm-tagfilter-1.0.1.tgz#fb2e303f7daf616db428bb6a26e18fda14a90a4d"
+  integrity sha512-Ty6psLAcAjboRa/UKUbbUcwjVAv5plxmpUTy2XC/3nJFL37eHej8jrHrRzkqcpipJliuBH30DTs7+3wqNcQUVA==
+  dependencies:
+    micromark-util-types "^1.0.0"
+
+micromark-extension-gfm-task-list-item@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/micromark-extension-gfm-task-list-item/-/micromark-extension-gfm-task-list-item-1.0.3.tgz#7683641df5d4a09795f353574d7f7f66e47b7fc4"
+  integrity sha512-PpysK2S1Q/5VXi72IIapbi/jliaiOFzv7THH4amwXeYXLq3l1uo8/2Be0Ac1rEwK20MQEsGH2ltAZLNY2KI/0Q==
+  dependencies:
+    micromark-factory-space "^1.0.0"
+    micromark-util-character "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+    uvu "^0.5.0"
+
+micromark-extension-gfm@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/micromark-extension-gfm/-/micromark-extension-gfm-2.0.1.tgz#40f3209216127a96297c54c67f5edc7ef2d1a2a2"
+  integrity sha512-p2sGjajLa0iYiGQdT0oelahRYtMWvLjy8J9LOCxzIQsllMCGLbsLW+Nc+N4vi02jcRJvedVJ68cjelKIO6bpDA==
+  dependencies:
+    micromark-extension-gfm-autolink-literal "^1.0.0"
+    micromark-extension-gfm-footnote "^1.0.0"
+    micromark-extension-gfm-strikethrough "^1.0.0"
+    micromark-extension-gfm-table "^1.0.0"
+    micromark-extension-gfm-tagfilter "^1.0.0"
+    micromark-extension-gfm-task-list-item "^1.0.0"
+    micromark-util-combine-extensions "^1.0.0"
+    micromark-util-types "^1.0.0"
+
+micromark-extension-mdx-expression@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/micromark-extension-mdx-expression/-/micromark-extension-mdx-expression-1.0.3.tgz#cd3843573921bf55afcfff4ae0cd2e857a16dcfa"
+  integrity sha512-TjYtjEMszWze51NJCZmhv7MEBcgYRgb3tJeMAJ+HQCAaZHHRBaDCccqQzGizR/H4ODefP44wRTgOn2vE5I6nZA==
+  dependencies:
+    micromark-factory-mdx-expression "^1.0.0"
+    micromark-factory-space "^1.0.0"
+    micromark-util-character "^1.0.0"
+    micromark-util-events-to-acorn "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+    uvu "^0.5.0"
+
+micromark-extension-mdx-jsx@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/micromark-extension-mdx-jsx/-/micromark-extension-mdx-jsx-1.0.3.tgz#9f196be5f65eb09d2a49b237a7b3398bba2999be"
+  integrity sha512-VfA369RdqUISF0qGgv2FfV7gGjHDfn9+Qfiv5hEwpyr1xscRj/CiVRkU7rywGFCO7JwJ5L0e7CJz60lY52+qOA==
+  dependencies:
+    "@types/acorn" "^4.0.0"
+    estree-util-is-identifier-name "^2.0.0"
+    micromark-factory-mdx-expression "^1.0.0"
+    micromark-factory-space "^1.0.0"
+    micromark-util-character "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+    uvu "^0.5.0"
+    vfile-message "^3.0.0"
+
+micromark-extension-mdx-md@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/micromark-extension-mdx-md/-/micromark-extension-mdx-md-1.0.0.tgz#382f5df9ee3706dd120b51782a211f31f4760d22"
+  integrity sha512-xaRAMoSkKdqZXDAoSgp20Azm0aRQKGOl0RrS81yGu8Hr/JhMsBmfs4wR7m9kgVUIO36cMUQjNyiyDKPrsv8gOw==
+  dependencies:
+    micromark-util-types "^1.0.0"
+
+micromark-extension-mdxjs-esm@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/micromark-extension-mdxjs-esm/-/micromark-extension-mdxjs-esm-1.0.3.tgz#630d9dc9db2c2fd470cac8c1e7a824851267404d"
+  integrity sha512-2N13ol4KMoxb85rdDwTAC6uzs8lMX0zeqpcyx7FhS7PxXomOnLactu8WI8iBNXW8AVyea3KIJd/1CKnUmwrK9A==
+  dependencies:
+    micromark-core-commonmark "^1.0.0"
+    micromark-util-character "^1.0.0"
+    micromark-util-events-to-acorn "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+    unist-util-position-from-estree "^1.1.0"
+    uvu "^0.5.0"
+    vfile-message "^3.0.0"
+
+micromark-extension-mdxjs@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/micromark-extension-mdxjs/-/micromark-extension-mdxjs-1.0.0.tgz#772644e12fc8299a33e50f59c5aa15727f6689dd"
+  integrity sha512-TZZRZgeHvtgm+IhtgC2+uDMR7h8eTKF0QUX9YsgoL9+bADBpBY6SiLvWqnBlLbCEevITmTqmEuY3FoxMKVs1rQ==
+  dependencies:
+    acorn "^8.0.0"
+    acorn-jsx "^5.0.0"
+    micromark-extension-mdx-expression "^1.0.0"
+    micromark-extension-mdx-jsx "^1.0.0"
+    micromark-extension-mdx-md "^1.0.0"
+    micromark-extension-mdxjs-esm "^1.0.0"
+    micromark-util-combine-extensions "^1.0.0"
+    micromark-util-types "^1.0.0"
+
+micromark-factory-destination@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/micromark-factory-destination/-/micromark-factory-destination-1.0.0.tgz#fef1cb59ad4997c496f887b6977aa3034a5a277e"
+  integrity sha512-eUBA7Rs1/xtTVun9TmV3gjfPz2wEwgK5R5xcbIM5ZYAtvGF6JkyaDsj0agx8urXnO31tEO6Ug83iVH3tdedLnw==
+  dependencies:
+    micromark-util-character "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+
+micromark-factory-label@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/micromark-factory-label/-/micromark-factory-label-1.0.2.tgz#6be2551fa8d13542fcbbac478258fb7a20047137"
+  integrity sha512-CTIwxlOnU7dEshXDQ+dsr2n+yxpP0+fn271pu0bwDIS8uqfFcumXpj5mLn3hSC8iw2MUr6Gx8EcKng1dD7i6hg==
+  dependencies:
+    micromark-util-character "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+    uvu "^0.5.0"
+
+micromark-factory-mdx-expression@^1.0.0:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/micromark-factory-mdx-expression/-/micromark-factory-mdx-expression-1.0.6.tgz#917e17d16e6e9c2551f3a862e6a9ebdd22056476"
+  integrity sha512-WRQIc78FV7KrCfjsEf/sETopbYjElh3xAmNpLkd1ODPqxEngP42eVRGbiPEQWpRV27LzqW+XVTvQAMIIRLPnNA==
+  dependencies:
+    micromark-factory-space "^1.0.0"
+    micromark-util-character "^1.0.0"
+    micromark-util-events-to-acorn "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+    unist-util-position-from-estree "^1.0.0"
+    uvu "^0.5.0"
+    vfile-message "^3.0.0"
+
+micromark-factory-space@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/micromark-factory-space/-/micromark-factory-space-1.0.0.tgz#cebff49968f2b9616c0fcb239e96685cb9497633"
+  integrity sha512-qUmqs4kj9a5yBnk3JMLyjtWYN6Mzfcx8uJfi5XAveBniDevmZasdGBba5b4QsvRcAkmvGo5ACmSUmyGiKTLZew==
+  dependencies:
+    micromark-util-character "^1.0.0"
+    micromark-util-types "^1.0.0"
+
+micromark-factory-title@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/micromark-factory-title/-/micromark-factory-title-1.0.2.tgz#7e09287c3748ff1693930f176e1c4a328382494f"
+  integrity sha512-zily+Nr4yFqgMGRKLpTVsNl5L4PMu485fGFDOQJQBl2NFpjGte1e86zC0da93wf97jrc4+2G2GQudFMHn3IX+A==
+  dependencies:
+    micromark-factory-space "^1.0.0"
+    micromark-util-character "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+    uvu "^0.5.0"
+
+micromark-factory-whitespace@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/micromark-factory-whitespace/-/micromark-factory-whitespace-1.0.0.tgz#e991e043ad376c1ba52f4e49858ce0794678621c"
+  integrity sha512-Qx7uEyahU1lt1RnsECBiuEbfr9INjQTGa6Err+gF3g0Tx4YEviPbqqGKNv/NrBaE7dVHdn1bVZKM/n5I/Bak7A==
+  dependencies:
+    micromark-factory-space "^1.0.0"
+    micromark-util-character "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+
+micromark-util-character@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-character/-/micromark-util-character-1.1.0.tgz#d97c54d5742a0d9611a68ca0cd4124331f264d86"
+  integrity sha512-agJ5B3unGNJ9rJvADMJ5ZiYjBRyDpzKAOk01Kpi1TKhlT1APx3XZk6eN7RtSz1erbWHC2L8T3xLZ81wdtGRZzg==
+  dependencies:
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+
+micromark-util-chunked@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-chunked/-/micromark-util-chunked-1.0.0.tgz#5b40d83f3d53b84c4c6bce30ed4257e9a4c79d06"
+  integrity sha512-5e8xTis5tEZKgesfbQMKRCyzvffRRUX+lK/y+DvsMFdabAicPkkZV6gO+FEWi9RfuKKoxxPwNL+dFF0SMImc1g==
+  dependencies:
+    micromark-util-symbol "^1.0.0"
+
+micromark-util-classify-character@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-classify-character/-/micromark-util-classify-character-1.0.0.tgz#cbd7b447cb79ee6997dd274a46fc4eb806460a20"
+  integrity sha512-F8oW2KKrQRb3vS5ud5HIqBVkCqQi224Nm55o5wYLzY/9PwHGXC01tr3d7+TqHHz6zrKQ72Okwtvm/xQm6OVNZA==
+  dependencies:
+    micromark-util-character "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+
+micromark-util-combine-extensions@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-combine-extensions/-/micromark-util-combine-extensions-1.0.0.tgz#91418e1e74fb893e3628b8d496085639124ff3d5"
+  integrity sha512-J8H058vFBdo/6+AsjHp2NF7AJ02SZtWaVUjsayNFeAiydTxUwViQPxN0Hf8dp4FmCQi0UUFovFsEyRSUmFH3MA==
+  dependencies:
+    micromark-util-chunked "^1.0.0"
+    micromark-util-types "^1.0.0"
+
+micromark-util-decode-numeric-character-reference@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-decode-numeric-character-reference/-/micromark-util-decode-numeric-character-reference-1.0.0.tgz#dcc85f13b5bd93ff8d2868c3dba28039d490b946"
+  integrity sha512-OzO9AI5VUtrTD7KSdagf4MWgHMtET17Ua1fIpXTpuhclCqD8egFWo85GxSGvxgkGS74bEahvtM0WP0HjvV0e4w==
+  dependencies:
+    micromark-util-symbol "^1.0.0"
+
+micromark-util-decode-string@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/micromark-util-decode-string/-/micromark-util-decode-string-1.0.2.tgz#942252ab7a76dec2dbf089cc32505ee2bc3acf02"
+  integrity sha512-DLT5Ho02qr6QWVNYbRZ3RYOSSWWFuH3tJexd3dgN1odEuPNxCngTCXJum7+ViRAd9BbdxCvMToPOD/IvVhzG6Q==
+  dependencies:
+    decode-named-character-reference "^1.0.0"
+    micromark-util-character "^1.0.0"
+    micromark-util-decode-numeric-character-reference "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+
+micromark-util-encode@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/micromark-util-encode/-/micromark-util-encode-1.0.1.tgz#2c1c22d3800870ad770ece5686ebca5920353383"
+  integrity sha512-U2s5YdnAYexjKDel31SVMPbfi+eF8y1U4pfiRW/Y8EFVCy/vgxk/2wWTxzcqE71LHtCuCzlBDRU2a5CQ5j+mQA==
+
+micromark-util-events-to-acorn@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-events-to-acorn/-/micromark-util-events-to-acorn-1.2.0.tgz#65785cb77299d791bfefdc6a5213ab57ceead115"
+  integrity sha512-WWp3bf7xT9MppNuw3yPjpnOxa8cj5ACivEzXJKu0WwnjBYfzaBvIAT9KfeyI0Qkll+bfQtfftSwdgTH6QhTOKw==
+  dependencies:
+    "@types/acorn" "^4.0.0"
+    "@types/estree" "^1.0.0"
+    estree-util-visit "^1.0.0"
+    micromark-util-types "^1.0.0"
+    uvu "^0.5.0"
+    vfile-location "^4.0.0"
+    vfile-message "^3.0.0"
+
+micromark-util-html-tag-name@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-html-tag-name/-/micromark-util-html-tag-name-1.1.0.tgz#eb227118befd51f48858e879b7a419fc0df20497"
+  integrity sha512-BKlClMmYROy9UiV03SwNmckkjn8QHVaWkqoAqzivabvdGcwNGMMMH/5szAnywmsTBUzDsU57/mFi0sp4BQO6dA==
+
+micromark-util-normalize-identifier@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-normalize-identifier/-/micromark-util-normalize-identifier-1.0.0.tgz#4a3539cb8db954bbec5203952bfe8cedadae7828"
+  integrity sha512-yg+zrL14bBTFrQ7n35CmByWUTFsgst5JhA4gJYoty4Dqzj4Z4Fr/DHekSS5aLfH9bdlfnSvKAWsAgJhIbogyBg==
+  dependencies:
+    micromark-util-symbol "^1.0.0"
+
+micromark-util-resolve-all@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-resolve-all/-/micromark-util-resolve-all-1.0.0.tgz#a7c363f49a0162e931960c44f3127ab58f031d88"
+  integrity sha512-CB/AGk98u50k42kvgaMM94wzBqozSzDDaonKU7P7jwQIuH2RU0TeBqGYJz2WY1UdihhjweivStrJ2JdkdEmcfw==
+  dependencies:
+    micromark-util-types "^1.0.0"
+
+micromark-util-sanitize-uri@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-1.0.0.tgz#27dc875397cd15102274c6c6da5585d34d4f12b2"
+  integrity sha512-cCxvBKlmac4rxCGx6ejlIviRaMKZc0fWm5HdCHEeDWRSkn44l6NdYVRyU+0nT1XC72EQJMZV8IPHF+jTr56lAg==
+  dependencies:
+    micromark-util-character "^1.0.0"
+    micromark-util-encode "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+
+micromark-util-subtokenize@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/micromark-util-subtokenize/-/micromark-util-subtokenize-1.0.2.tgz#ff6f1af6ac836f8bfdbf9b02f40431760ad89105"
+  integrity sha512-d90uqCnXp/cy4G881Ub4psE57Sf8YD0pim9QdjCRNjfas2M1u6Lbt+XZK9gnHL2XFhnozZiEdCa9CNfXSfQ6xA==
+  dependencies:
+    micromark-util-chunked "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+    uvu "^0.5.0"
+
+micromark-util-symbol@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/micromark-util-symbol/-/micromark-util-symbol-1.0.1.tgz#b90344db62042ce454f351cf0bebcc0a6da4920e"
+  integrity sha512-oKDEMK2u5qqAptasDAwWDXq0tG9AssVwAx3E9bBF3t/shRIGsWIRG+cGafs2p/SnDSOecnt6hZPCE2o6lHfFmQ==
+
+micromark-util-types@^1.0.0, micromark-util-types@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/micromark-util-types/-/micromark-util-types-1.0.2.tgz#f4220fdb319205812f99c40f8c87a9be83eded20"
+  integrity sha512-DCfg/T8fcrhrRKTPjRrw/5LLvdGV7BHySf/1LOZx7TzWZdYRjogNtyNq885z3nNallwr3QUKARjqvHqX1/7t+w==
+
+micromark@^3.0.0:
+  version "3.0.10"
+  resolved "https://registry.yarnpkg.com/micromark/-/micromark-3.0.10.tgz#1eac156f0399d42736458a14b0ca2d86190b457c"
+  integrity sha512-ryTDy6UUunOXy2HPjelppgJ2sNfcPz1pLlMdA6Rz9jPzhLikWXv/irpWV/I2jd68Uhmny7hHxAlAhk4+vWggpg==
+  dependencies:
+    "@types/debug" "^4.0.0"
+    debug "^4.0.0"
+    decode-named-character-reference "^1.0.0"
+    micromark-core-commonmark "^1.0.1"
+    micromark-factory-space "^1.0.0"
+    micromark-util-character "^1.0.0"
+    micromark-util-chunked "^1.0.0"
+    micromark-util-combine-extensions "^1.0.0"
+    micromark-util-decode-numeric-character-reference "^1.0.0"
+    micromark-util-encode "^1.0.0"
+    micromark-util-normalize-identifier "^1.0.0"
+    micromark-util-resolve-all "^1.0.0"
+    micromark-util-sanitize-uri "^1.0.0"
+    micromark-util-subtokenize "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.1"
+    uvu "^0.5.0"
+
+micromatch@^4.0.2, micromatch@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.4.tgz#896d519dfe9db25fce94ceb7a500919bf881ebf9"
+  integrity sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==
+  dependencies:
+    braces "^3.0.1"
+    picomatch "^2.2.3"
+
+mime-db@1.52.0:
+  version "1.52.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
+  integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
+
+mime-db@~1.25.0:
+  version "1.25.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.25.0.tgz#c18dbd7c73a5dbf6f44a024dc0d165a1e7b1c392"
+  integrity sha1-wY29fHOl2/b0SgJNwNFloeexw5I=
+
+mime-types@2.1.13:
+  version "2.1.13"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.13.tgz#e07aaa9c6c6b9a7ca3012c69003ad25a39e92a88"
+  integrity sha1-4HqqnGxrmnyjASxpADrSWjnpKog=
+  dependencies:
+    mime-db "~1.25.0"
+
+mime-types@~2.1.24, mime-types@~2.1.34:
+  version "2.1.35"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
+  integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
+  dependencies:
+    mime-db "1.52.0"
+
+mime@1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
+  integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
+
+mimic-fn@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
+  integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
+
+minimatch@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
+  integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
+  dependencies:
+    brace-expansion "^1.1.7"
+
+minimist@^1.1.1, minimist@^1.2.0:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.7.tgz#daa1c4d91f507390437c6a8bc01078e7000c4d18"
+  integrity sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==
+
+mri@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/mri/-/mri-1.2.0.tgz#6721480fec2a11a4889861115a48b6cbe7cc8f0b"
+  integrity sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==
+
+mrmime@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/mrmime/-/mrmime-1.0.0.tgz#14d387f0585a5233d291baba339b063752a2398b"
+  integrity sha512-a70zx7zFfVO7XpnQ2IX1Myh9yY4UYvfld/dikWRnsXxbyvMcfz+u6UfgNAtH+k2QqtJuzVpv6eLTx1G2+WKZbQ==
+
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+  integrity sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=
+
+ms@2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
+  integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
+
+ms@2.1.3, ms@^2.1.1:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
+  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
+
+nanoid@^3.2.0:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.1.tgz#6347a18cac88af88f58af0b3594b723d5e99bb35"
+  integrity sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw==
+
+nanoid@^3.3.4:
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
+  integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
+
+natural-compare@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
+  integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
+
+negotiator@0.6.3:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.3.tgz#58e323a72fedc0d6f9cd4d31fe49f51479590ccd"
+  integrity sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==
+
+next-remote-watch@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/next-remote-watch/-/next-remote-watch-1.0.0.tgz#34c5a015b1bd191f906479c00baabd1a33cf04f5"
+  integrity sha512-kV+pglCwcnKyqJIXPHUUrnZr9d3rCqCIEQWBkFYC02GDXHyKVmcFytoY6q0+wMIQqh/izIAQL1x6OKXZhksjLA==
+  dependencies:
+    body-parser "^1.19.0"
+    chalk "^4.0.0"
+    chokidar "^3.4.0"
+    commander "^5.0.0"
+    express "^4.17.1"
+
+next-tick@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.1.0.tgz#1836ee30ad56d67ef281b22bd199f709449b35eb"
+  integrity sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==
+
+next@12.3.2-canary.7:
+  version "12.3.2-canary.7"
+  resolved "https://registry.yarnpkg.com/next/-/next-12.3.2-canary.7.tgz#c739348174a3d7d97a638aa409376a96577a31d8"
+  integrity sha512-zUosveWzpeRVy7j4ANoJ4gu0TBrkLYwPlIUEXrqqs/zLpHMu+tanxA1R1ts2d7h/2dSmeVZgGcHiVcHj5uspEA==
+  dependencies:
+    "@next/env" "12.3.2-canary.7"
+    "@swc/helpers" "0.4.11"
+    caniuse-lite "^1.0.30001406"
+    postcss "8.4.14"
+    styled-jsx "5.0.7"
+    use-sync-external-store "1.2.0"
+  optionalDependencies:
+    "@next/swc-android-arm-eabi" "12.3.2-canary.7"
+    "@next/swc-android-arm64" "12.3.2-canary.7"
+    "@next/swc-darwin-arm64" "12.3.2-canary.7"
+    "@next/swc-darwin-x64" "12.3.2-canary.7"
+    "@next/swc-freebsd-x64" "12.3.2-canary.7"
+    "@next/swc-linux-arm-gnueabihf" "12.3.2-canary.7"
+    "@next/swc-linux-arm64-gnu" "12.3.2-canary.7"
+    "@next/swc-linux-arm64-musl" "12.3.2-canary.7"
+    "@next/swc-linux-x64-gnu" "12.3.2-canary.7"
+    "@next/swc-linux-x64-musl" "12.3.2-canary.7"
+    "@next/swc-win32-arm64-msvc" "12.3.2-canary.7"
+    "@next/swc-win32-ia32-msvc" "12.3.2-canary.7"
+    "@next/swc-win32-x64-msvc" "12.3.2-canary.7"
+
+nice-try@^1.0.4:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
+  integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==
+
+nlcst-to-string@^2.0.0:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/nlcst-to-string/-/nlcst-to-string-2.0.4.tgz#9315dfab80882bbfd86ddf1b706f53622dc400cc"
+  integrity sha512-3x3jwTd6UPG7vi5k4GEzvxJ5rDA7hVUIRNHPblKuMVP9Z3xmlsd9cgLcpAMkc5uPOBna82EeshROFhsPkbnTZg==
+
+node-releases@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.1.tgz#3d1d395f204f1f2f29a54358b9fb678765ad2fc5"
+  integrity sha512-CqyzN6z7Q6aMeF/ktcMVTzhAHCEpf8SOarwpzpf8pNBY2k5/oM34UHldUwp8VKI7uxct2HxSRdJjBaZeESzcxA==
+
+node-releases@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.6.tgz#8a7088c63a55e493845683ebf3c828d8c51c5503"
+  integrity sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==
+
+normalize-package-data@^2.3.2:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
+  integrity sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==
+  dependencies:
+    hosted-git-info "^2.1.4"
+    resolve "^1.10.0"
+    semver "2 || 3 || 4 || 5"
+    validate-npm-package-license "^3.0.1"
+
+normalize-path@^3.0.0, normalize-path@~3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
+  integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
+
+normalize-range@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
+  integrity sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=
+
+npm-run-all@^4.1.5:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/npm-run-all/-/npm-run-all-4.1.5.tgz#04476202a15ee0e2e214080861bff12a51d98fba"
+  integrity sha512-Oo82gJDAVcaMdi3nuoKFavkIHBRVqQ1qvMb+9LHk/cF4P6B2m8aP04hGf7oL6wZ9BuGwX1onlLhpuoofSyoQDQ==
+  dependencies:
+    ansi-styles "^3.2.1"
+    chalk "^2.4.1"
+    cross-spawn "^6.0.5"
+    memorystream "^0.3.1"
+    minimatch "^3.0.4"
+    pidtree "^0.3.0"
+    read-pkg "^3.0.0"
+    shell-quote "^1.6.1"
+    string.prototype.padend "^3.0.0"
+
+npm-run-path@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-4.0.1.tgz#b7ecd1e5ed53da8e37a55e1c2269e0b97ed748ea"
+  integrity sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==
+  dependencies:
+    path-key "^3.0.0"
+
+num2fraction@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede"
+  integrity sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=
+
+object-assign@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+  integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
+
+object-hash@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-2.2.0.tgz#5ad518581eefc443bd763472b8ff2e9c2c0d54a5"
+  integrity sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==
+
+object-inspect@^1.11.0, object-inspect@^1.12.0, object-inspect@^1.9.0:
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.0.tgz#6e2c120e868fd1fd18cb4f18c31741d0d6e776f0"
+  integrity sha512-Ho2z80bVIvJloH+YzRmpZVQe87+qASmBUKZDWgx9cu+KDrX2ZDH/3tMy+gXbZETVGs2M8YdxObOh7XAtim9Y0g==
+
+object-keys@^1.0.12, object-keys@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
+  integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
+
+object.assign@^4.1.0:
+  version "4.1.4"
+  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.4.tgz#9673c7c7c351ab8c4d0b516f4343ebf4dfb7799f"
+  integrity sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    has-symbols "^1.0.3"
+    object-keys "^1.1.1"
+
+object.assign@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.2.tgz#0ed54a342eceb37b38ff76eb831a0e788cb63940"
+  integrity sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==
+  dependencies:
+    call-bind "^1.0.0"
+    define-properties "^1.1.3"
+    has-symbols "^1.0.1"
+    object-keys "^1.1.1"
+
+object.entries@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.5.tgz#e1acdd17c4de2cd96d5a08487cfb9db84d881861"
+  integrity sha512-TyxmjUoZggd4OrrU1W66FMDG6CuqJxsFvymeyXI51+vQLN67zYfZseptRge703kKQdo4uccgAKebXFcRCzk4+g==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.19.1"
+
+object.fromentries@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.5.tgz#7b37b205109c21e741e605727fe8b0ad5fa08251"
+  integrity sha512-CAyG5mWQRRiBU57Re4FKoTBjXfDoNwdFVH2Y1tS9PqCsfUTymAohOkEMSG3aRNKmv4lV3O7p1et7c187q6bynw==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.19.1"
+
+object.hasown@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/object.hasown/-/object.hasown-1.1.0.tgz#7232ed266f34d197d15cac5880232f7a4790afe5"
+  integrity sha512-MhjYRfj3GBlhSkDHo6QmvgjRLXQ2zndabdf3nX0yTyZK9rPfxb6uRpAac8HXNLy1GpqWtZ81Qh4v3uOls2sRAg==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.19.1"
+
+object.values@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.5.tgz#959f63e3ce9ef108720333082131e4a459b716ac"
+  integrity sha512-QUZRW0ilQ3PnPpbNtgdNV1PDbEqLIiSFB3l+EnGtBQ/8SUTLj1PZwtQHABZtLgwpJZTSZhuGLOGk57Drx2IvYg==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.19.1"
+
+on-finished@2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.4.1.tgz#58c8c44116e54845ad57f14ab10b03533184ac3f"
+  integrity sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==
+  dependencies:
+    ee-first "1.1.1"
+
+once@^1.3.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
+  dependencies:
+    wrappy "1"
+
+onetime@^5.1.0, onetime@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-5.1.2.tgz#d0e96ebb56b07476df1dd9c4806e5237985ca45e"
+  integrity sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==
+  dependencies:
+    mimic-fn "^2.1.0"
+
+open@^7.4.2:
+  version "7.4.2"
+  resolved "https://registry.yarnpkg.com/open/-/open-7.4.2.tgz#b8147e26dcf3e426316c730089fd71edd29c2321"
+  integrity sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==
+  dependencies:
+    is-docker "^2.0.0"
+    is-wsl "^2.1.1"
+
+opener@^1.5.2:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/opener/-/opener-1.5.2.tgz#5d37e1f35077b9dcac4301372271afdeb2a13598"
+  integrity sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==
+
+optionator@^0.9.1:
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.1.tgz#4f236a6373dae0566a6d43e1326674f50c291499"
+  integrity sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==
+  dependencies:
+    deep-is "^0.1.3"
+    fast-levenshtein "^2.0.6"
+    levn "^0.4.1"
+    prelude-ls "^1.2.1"
+    type-check "^0.4.0"
+    word-wrap "^1.2.3"
+
+os-tmpdir@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
+  integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=
+
+p-limit@^1.1.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.3.0.tgz#b86bd5f0c25690911c7590fcbfc2010d54b3ccb8"
+  integrity sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==
+  dependencies:
+    p-try "^1.0.0"
+
+p-locate@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-2.0.0.tgz#20a0103b222a70c8fd39cc2e580680f3dde5ec43"
+  integrity sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=
+  dependencies:
+    p-limit "^1.1.0"
+
+p-map@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/p-map/-/p-map-4.0.0.tgz#bb2f95a5eda2ec168ec9274e06a747c3e2904d2b"
+  integrity sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==
+  dependencies:
+    aggregate-error "^3.0.0"
+
+p-try@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-try/-/p-try-1.0.0.tgz#cbc79cdbaf8fd4228e13f621f2b1a237c1b207b3"
+  integrity sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=
+
+parent-module@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
+  integrity sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==
+  dependencies:
+    callsites "^3.0.0"
+
+parse-entities@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-2.0.0.tgz#53c6eb5b9314a1f4ec99fa0fdf7ce01ecda0cbe8"
+  integrity sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==
+  dependencies:
+    character-entities "^1.0.0"
+    character-entities-legacy "^1.0.0"
+    character-reference-invalid "^1.0.0"
+    is-alphanumerical "^1.0.0"
+    is-decimal "^1.0.0"
+    is-hexadecimal "^1.0.0"
+
+parse-entities@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-4.0.0.tgz#f67c856d4e3fe19b1a445c3fabe78dcdc1053eeb"
+  integrity sha512-5nk9Fn03x3rEhGaX1FU6IDwG/k+GxLXlFAkgrbM1asuAFl3BhdQWvASaIsmwWypRNcZKHPYnIuOSfIWEyEQnPQ==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    character-entities "^2.0.0"
+    character-entities-legacy "^3.0.0"
+    character-reference-invalid "^2.0.0"
+    decode-named-character-reference "^1.0.0"
+    is-alphanumerical "^2.0.0"
+    is-decimal "^2.0.0"
+    is-hexadecimal "^2.0.0"
+
+parse-json@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0"
+  integrity sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=
+  dependencies:
+    error-ex "^1.3.1"
+    json-parse-better-errors "^1.0.1"
+
+parse-json@^5.0.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.2.0.tgz#c76fc66dee54231c962b22bcc8a72cf2f99753cd"
+  integrity sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    error-ex "^1.3.1"
+    json-parse-even-better-errors "^2.3.0"
+    lines-and-columns "^1.1.6"
+
+parse-latin@^4.0.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/parse-latin/-/parse-latin-4.3.0.tgz#1a70fc5601743baa06c5f12253c334fc94b4a917"
+  integrity sha512-TYKL+K98dcAWoCw/Ac1yrPviU8Trk+/gmjQVaoWEFDZmVD4KRg6c/80xKqNNFQObo2mTONgF8trzAf2UTwKafw==
+  dependencies:
+    nlcst-to-string "^2.0.0"
+    unist-util-modify-children "^2.0.0"
+    unist-util-visit-children "^1.0.0"
+
+parse-numeric-range@^1.2.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/parse-numeric-range/-/parse-numeric-range-1.3.0.tgz#7c63b61190d61e4d53a1197f0c83c47bb670ffa3"
+  integrity sha512-twN+njEipszzlMJd4ONUYgSfZPDxgHhT9Ahed5uTigpQn90FggW4SA/AIPq/6a149fTbE9qBEcSwE3FAEp6wQQ==
+
+parseurl@~1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
+  integrity sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==
+
+patch-package@^6.2.2:
+  version "6.4.7"
+  resolved "https://registry.yarnpkg.com/patch-package/-/patch-package-6.4.7.tgz#2282d53c397909a0d9ef92dae3fdeb558382b148"
+  integrity sha512-S0vh/ZEafZ17hbhgqdnpunKDfzHQibQizx9g8yEf5dcVk3KOflOfdufRXQX8CSEkyOQwuM/bNz1GwKvFj54kaQ==
+  dependencies:
+    "@yarnpkg/lockfile" "^1.1.0"
+    chalk "^2.4.2"
+    cross-spawn "^6.0.5"
+    find-yarn-workspace-root "^2.0.0"
+    fs-extra "^7.0.1"
+    is-ci "^2.0.0"
+    klaw-sync "^6.0.0"
+    minimist "^1.2.0"
+    open "^7.4.2"
+    rimraf "^2.6.3"
+    semver "^5.6.0"
+    slash "^2.0.0"
+    tmp "^0.0.33"
+
+path-exists@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
+  integrity sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=
+
+path-is-absolute@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+  integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
+
+path-key@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
+  integrity sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=
+
+path-key@^3.0.0, path-key@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
+  integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
+
+path-parse@^1.0.6, path-parse@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
+  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
+
+path-to-regexp@0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
+  integrity sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==
+
+path-type@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-3.0.0.tgz#cef31dc8e0a1a3bb0d105c0cd97cf3bf47f4e36f"
+  integrity sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==
+  dependencies:
+    pify "^3.0.0"
+
+path-type@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
+  integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
+
+performance-now@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
+  integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
+
+periscopic@^3.0.0:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/periscopic/-/periscopic-3.0.4.tgz#b3fbed0d1bc844976b977173ca2cd4a0ef4fa8d1"
+  integrity sha512-SFx68DxCv0Iyo6APZuw/AKewkkThGwssmU0QWtTlvov3VAtPX+QJ4CadwSaz8nrT5jPIuxdvJWB4PnD2KNDxQg==
+  dependencies:
+    estree-walker "^3.0.0"
+    is-reference "^3.0.0"
+
+picocolors@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-0.2.1.tgz#570670f793646851d1ba135996962abad587859f"
+  integrity sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==
+
+picocolors@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
+  integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
+
+picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
+  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
+
+pidtree@^0.3.0:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/pidtree/-/pidtree-0.3.1.tgz#ef09ac2cc0533df1f3250ccf2c4d366b0d12114a"
+  integrity sha512-qQbW94hLHEqCg7nhby4yRC7G2+jYHY4Rguc2bjw7Uug4GIJuu1tvf2uHaZv5Q8zdt+WKJ6qK1FOI6amaWUo5FA==
+
+pify@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
+  integrity sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=
+
+postcss-attribute-case-insensitive@^4.0.1:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-4.0.2.tgz#d93e46b504589e94ac7277b0463226c68041a880"
+  integrity sha512-clkFxk/9pcdb4Vkn0hAHq3YnxBQ2p0CGD1dy24jN+reBck+EWxMbxSUqN4Yj7t0w8csl87K6p0gxBe1utkJsYA==
+  dependencies:
+    postcss "^7.0.2"
+    postcss-selector-parser "^6.0.2"
+
+postcss-color-functional-notation@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-color-functional-notation/-/postcss-color-functional-notation-2.0.1.tgz#5efd37a88fbabeb00a2966d1e53d98ced93f74e0"
+  integrity sha512-ZBARCypjEDofW4P6IdPVTLhDNXPRn8T2s1zHbZidW6rPaaZvcnCS2soYFIQJrMZSxiePJ2XIYTlcb2ztr/eT2g==
+  dependencies:
+    postcss "^7.0.2"
+    postcss-values-parser "^2.0.0"
+
+postcss-color-gray@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-color-gray/-/postcss-color-gray-5.0.0.tgz#532a31eb909f8da898ceffe296fdc1f864be8547"
+  integrity sha512-q6BuRnAGKM/ZRpfDascZlIZPjvwsRye7UDNalqVz3s7GDxMtqPY6+Q871liNxsonUw8oC61OG+PSaysYpl1bnw==
+  dependencies:
+    "@csstools/convert-colors" "^1.4.0"
+    postcss "^7.0.5"
+    postcss-values-parser "^2.0.0"
+
+postcss-color-hex-alpha@^5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/postcss-color-hex-alpha/-/postcss-color-hex-alpha-5.0.3.tgz#a8d9ca4c39d497c9661e374b9c51899ef0f87388"
+  integrity sha512-PF4GDel8q3kkreVXKLAGNpHKilXsZ6xuu+mOQMHWHLPNyjiUBOr75sp5ZKJfmv1MCus5/DWUGcK9hm6qHEnXYw==
+  dependencies:
+    postcss "^7.0.14"
+    postcss-values-parser "^2.0.1"
+
+postcss-color-mod-function@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/postcss-color-mod-function/-/postcss-color-mod-function-3.0.3.tgz#816ba145ac11cc3cb6baa905a75a49f903e4d31d"
+  integrity sha512-YP4VG+xufxaVtzV6ZmhEtc+/aTXH3d0JLpnYfxqTvwZPbJhWqp8bSY3nfNzNRFLgB4XSaBA82OE4VjOOKpCdVQ==
+  dependencies:
+    "@csstools/convert-colors" "^1.4.0"
+    postcss "^7.0.2"
+    postcss-values-parser "^2.0.0"
+
+postcss-color-rebeccapurple@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-color-rebeccapurple/-/postcss-color-rebeccapurple-4.0.1.tgz#c7a89be872bb74e45b1e3022bfe5748823e6de77"
+  integrity sha512-aAe3OhkS6qJXBbqzvZth2Au4V3KieR5sRQ4ptb2b2O8wgvB3SJBsdG+jsn2BZbbwekDG8nTfcCNKcSfe/lEy8g==
+  dependencies:
+    postcss "^7.0.2"
+    postcss-values-parser "^2.0.0"
+
+postcss-custom-media@^7.0.8:
+  version "7.0.8"
+  resolved "https://registry.yarnpkg.com/postcss-custom-media/-/postcss-custom-media-7.0.8.tgz#fffd13ffeffad73621be5f387076a28b00294e0c"
+  integrity sha512-c9s5iX0Ge15o00HKbuRuTqNndsJUbaXdiNsksnVH8H4gdc+zbLzr/UasOwNG6CTDpLFekVY4672eWdiiWu2GUg==
+  dependencies:
+    postcss "^7.0.14"
+
+postcss-custom-properties@^8.0.11:
+  version "8.0.11"
+  resolved "https://registry.yarnpkg.com/postcss-custom-properties/-/postcss-custom-properties-8.0.11.tgz#2d61772d6e92f22f5e0d52602df8fae46fa30d97"
+  integrity sha512-nm+o0eLdYqdnJ5abAJeXp4CEU1c1k+eB2yMCvhgzsds/e0umabFrN6HoTy/8Q4K5ilxERdl/JD1LO5ANoYBeMA==
+  dependencies:
+    postcss "^7.0.17"
+    postcss-values-parser "^2.0.1"
+
+postcss-custom-selectors@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/postcss-custom-selectors/-/postcss-custom-selectors-5.1.2.tgz#64858c6eb2ecff2fb41d0b28c9dd7b3db4de7fba"
+  integrity sha512-DSGDhqinCqXqlS4R7KGxL1OSycd1lydugJ1ky4iRXPHdBRiozyMHrdu0H3o7qNOCiZwySZTUI5MV0T8QhCLu+w==
+  dependencies:
+    postcss "^7.0.2"
+    postcss-selector-parser "^5.0.0-rc.3"
+
+postcss-dir-pseudo-class@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-5.0.0.tgz#6e3a4177d0edb3abcc85fdb6fbb1c26dabaeaba2"
+  integrity sha512-3pm4oq8HYWMZePJY+5ANriPs3P07q+LW6FAdTlkFH2XqDdP4HeeJYMOzn0HYLhRSjBO3fhiqSwwU9xEULSrPgw==
+  dependencies:
+    postcss "^7.0.2"
+    postcss-selector-parser "^5.0.0-rc.3"
+
+postcss-double-position-gradients@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-double-position-gradients/-/postcss-double-position-gradients-1.0.0.tgz#fc927d52fddc896cb3a2812ebc5df147e110522e"
+  integrity sha512-G+nV8EnQq25fOI8CH/B6krEohGWnF5+3A6H/+JEpOncu5dCnkS1QQ6+ct3Jkaepw1NGVqqOZH6lqrm244mCftA==
+  dependencies:
+    postcss "^7.0.5"
+    postcss-values-parser "^2.0.0"
+
+postcss-env-function@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-env-function/-/postcss-env-function-2.0.2.tgz#0f3e3d3c57f094a92c2baf4b6241f0b0da5365d7"
+  integrity sha512-rwac4BuZlITeUbiBq60h/xbLzXY43qOsIErngWa4l7Mt+RaSkT7QBjXVGTcBHupykkblHMDrBFh30zchYPaOUw==
+  dependencies:
+    postcss "^7.0.2"
+    postcss-values-parser "^2.0.0"
+
+postcss-flexbugs-fixes@4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-4.2.1.tgz#9218a65249f30897deab1033aced8578562a6690"
+  integrity sha512-9SiofaZ9CWpQWxOwRh1b/r85KD5y7GgvsNt1056k6OYLvWUun0czCvogfJgylC22uJTwW1KzY3Gz65NZRlvoiQ==
+  dependencies:
+    postcss "^7.0.26"
+
+postcss-focus-visible@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-focus-visible/-/postcss-focus-visible-4.0.0.tgz#477d107113ade6024b14128317ade2bd1e17046e"
+  integrity sha512-Z5CkWBw0+idJHSV6+Bgf2peDOFf/x4o+vX/pwcNYrWpXFrSfTkQ3JQ1ojrq9yS+upnAlNRHeg8uEwFTgorjI8g==
+  dependencies:
+    postcss "^7.0.2"
+
+postcss-focus-within@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-focus-within/-/postcss-focus-within-3.0.0.tgz#763b8788596cee9b874c999201cdde80659ef680"
+  integrity sha512-W0APui8jQeBKbCGZudW37EeMCjDeVxKgiYfIIEo8Bdh5SpB9sxds/Iq8SEuzS0Q4YFOlG7EPFulbbxujpkrV2w==
+  dependencies:
+    postcss "^7.0.2"
+
+postcss-font-variant@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-font-variant/-/postcss-font-variant-4.0.1.tgz#42d4c0ab30894f60f98b17561eb5c0321f502641"
+  integrity sha512-I3ADQSTNtLTTd8uxZhtSOrTCQ9G4qUVKPjHiDk0bV75QSxXjVWiJVJ2VLdspGUi9fbW9BcjKJoRvxAH1pckqmA==
+  dependencies:
+    postcss "^7.0.2"
+
+postcss-gap-properties@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-gap-properties/-/postcss-gap-properties-2.0.0.tgz#431c192ab3ed96a3c3d09f2ff615960f902c1715"
+  integrity sha512-QZSqDaMgXCHuHTEzMsS2KfVDOq7ZFiknSpkrPJY6jmxbugUPTuSzs/vuE5I3zv0WAS+3vhrlqhijiprnuQfzmg==
+  dependencies:
+    postcss "^7.0.2"
+
+postcss-image-set-function@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-image-set-function/-/postcss-image-set-function-3.0.1.tgz#28920a2f29945bed4c3198d7df6496d410d3f288"
+  integrity sha512-oPTcFFip5LZy8Y/whto91L9xdRHCWEMs3e1MdJxhgt4jy2WYXfhkng59fH5qLXSCPN8k4n94p1Czrfe5IOkKUw==
+  dependencies:
+    postcss "^7.0.2"
+    postcss-values-parser "^2.0.0"
+
+postcss-initial@^3.0.0:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-initial/-/postcss-initial-3.0.4.tgz#9d32069a10531fe2ecafa0b6ac750ee0bc7efc53"
+  integrity sha512-3RLn6DIpMsK1l5UUy9jxQvoDeUN4gP939tDcKUHD/kM8SGSKbFAnvkpFpj3Bhtz3HGk1jWY5ZNWX6mPta5M9fg==
+  dependencies:
+    postcss "^7.0.2"
+
+postcss-js@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-4.0.0.tgz#31db79889531b80dc7bc9b0ad283e418dce0ac00"
+  integrity sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==
+  dependencies:
+    camelcase-css "^2.0.1"
+
+postcss-lab-function@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-lab-function/-/postcss-lab-function-2.0.1.tgz#bb51a6856cd12289ab4ae20db1e3821ef13d7d2e"
+  integrity sha512-whLy1IeZKY+3fYdqQFuDBf8Auw+qFuVnChWjmxm/UhHWqNHZx+B99EwxTvGYmUBqe3Fjxs4L1BoZTJmPu6usVg==
+  dependencies:
+    "@csstools/convert-colors" "^1.4.0"
+    postcss "^7.0.2"
+    postcss-values-parser "^2.0.0"
+
+postcss-load-config@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-3.1.1.tgz#2f53a17f2f543d9e63864460af42efdac0d41f87"
+  integrity sha512-c/9XYboIbSEUZpiD1UQD0IKiUe8n9WHYV7YFe7X7J+ZwCsEKkUJSFWjS9hBU1RR9THR7jMXst8sxiqP0jjo2mg==
+  dependencies:
+    lilconfig "^2.0.4"
+    yaml "^1.10.2"
+
+postcss-logical@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-logical/-/postcss-logical-3.0.0.tgz#2495d0f8b82e9f262725f75f9401b34e7b45d5b5"
+  integrity sha512-1SUKdJc2vuMOmeItqGuNaC+N8MzBWFWEkAnRnLpFYj1tGGa7NqyVBujfRtgNa2gXR+6RkGUiB2O5Vmh7E2RmiA==
+  dependencies:
+    postcss "^7.0.2"
+
+postcss-media-minmax@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-media-minmax/-/postcss-media-minmax-4.0.0.tgz#b75bb6cbc217c8ac49433e12f22048814a4f5ed5"
+  integrity sha512-fo9moya6qyxsjbFAYl97qKO9gyre3qvbMnkOZeZwlsW6XYFsvs2DMGDlchVLfAd8LHPZDxivu/+qW2SMQeTHBw==
+  dependencies:
+    postcss "^7.0.2"
+
+postcss-nested@5.0.6:
+  version "5.0.6"
+  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-5.0.6.tgz#466343f7fc8d3d46af3e7dba3fcd47d052a945bc"
+  integrity sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==
+  dependencies:
+    postcss-selector-parser "^6.0.6"
+
+postcss-nesting@^7.0.0:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-nesting/-/postcss-nesting-7.0.1.tgz#b50ad7b7f0173e5b5e3880c3501344703e04c052"
+  integrity sha512-FrorPb0H3nuVq0Sff7W2rnc3SmIcruVC6YwpcS+k687VxyxO33iE1amna7wHuRVzM8vfiYofXSBHNAZ3QhLvYg==
+  dependencies:
+    postcss "^7.0.2"
+
+postcss-overflow-shorthand@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-overflow-shorthand/-/postcss-overflow-shorthand-2.0.0.tgz#31ecf350e9c6f6ddc250a78f0c3e111f32dd4c30"
+  integrity sha512-aK0fHc9CBNx8jbzMYhshZcEv8LtYnBIRYQD5i7w/K/wS9c2+0NSR6B3OVMu5y0hBHYLcMGjfU+dmWYNKH0I85g==
+  dependencies:
+    postcss "^7.0.2"
+
+postcss-page-break@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-page-break/-/postcss-page-break-2.0.0.tgz#add52d0e0a528cabe6afee8b46e2abb277df46bf"
+  integrity sha512-tkpTSrLpfLfD9HvgOlJuigLuk39wVTbbd8RKcy8/ugV2bNBUW3xU+AIqyxhDrQr1VUj1RmyJrBn1YWrqUm9zAQ==
+  dependencies:
+    postcss "^7.0.2"
+
+postcss-place@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-place/-/postcss-place-4.0.1.tgz#e9f39d33d2dc584e46ee1db45adb77ca9d1dcc62"
+  integrity sha512-Zb6byCSLkgRKLODj/5mQugyuj9bvAAw9LqJJjgwz5cYryGeXfFZfSXoP1UfveccFmeq0b/2xxwcTEVScnqGxBg==
+  dependencies:
+    postcss "^7.0.2"
+    postcss-values-parser "^2.0.0"
+
+postcss-preset-env@^6.7.0:
+  version "6.7.0"
+  resolved "https://registry.yarnpkg.com/postcss-preset-env/-/postcss-preset-env-6.7.0.tgz#c34ddacf8f902383b35ad1e030f178f4cdf118a5"
+  integrity sha512-eU4/K5xzSFwUFJ8hTdTQzo2RBLbDVt83QZrAvI07TULOkmyQlnYlpwep+2yIK+K+0KlZO4BvFcleOCCcUtwchg==
+  dependencies:
+    autoprefixer "^9.6.1"
+    browserslist "^4.6.4"
+    caniuse-lite "^1.0.30000981"
+    css-blank-pseudo "^0.1.4"
+    css-has-pseudo "^0.10.0"
+    css-prefers-color-scheme "^3.1.1"
+    cssdb "^4.4.0"
+    postcss "^7.0.17"
+    postcss-attribute-case-insensitive "^4.0.1"
+    postcss-color-functional-notation "^2.0.1"
+    postcss-color-gray "^5.0.0"
+    postcss-color-hex-alpha "^5.0.3"
+    postcss-color-mod-function "^3.0.3"
+    postcss-color-rebeccapurple "^4.0.1"
+    postcss-custom-media "^7.0.8"
+    postcss-custom-properties "^8.0.11"
+    postcss-custom-selectors "^5.1.2"
+    postcss-dir-pseudo-class "^5.0.0"
+    postcss-double-position-gradients "^1.0.0"
+    postcss-env-function "^2.0.2"
+    postcss-focus-visible "^4.0.0"
+    postcss-focus-within "^3.0.0"
+    postcss-font-variant "^4.0.0"
+    postcss-gap-properties "^2.0.0"
+    postcss-image-set-function "^3.0.1"
+    postcss-initial "^3.0.0"
+    postcss-lab-function "^2.0.1"
+    postcss-logical "^3.0.0"
+    postcss-media-minmax "^4.0.0"
+    postcss-nesting "^7.0.0"
+    postcss-overflow-shorthand "^2.0.0"
+    postcss-page-break "^2.0.0"
+    postcss-place "^4.0.1"
+    postcss-pseudo-class-any-link "^6.0.0"
+    postcss-replace-overflow-wrap "^3.0.0"
+    postcss-selector-matches "^4.0.0"
+    postcss-selector-not "^4.0.0"
+
+postcss-pseudo-class-any-link@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-6.0.0.tgz#2ed3eed393b3702879dec4a87032b210daeb04d1"
+  integrity sha512-lgXW9sYJdLqtmw23otOzrtbDXofUdfYzNm4PIpNE322/swES3VU9XlXHeJS46zT2onFO7V1QFdD4Q9LiZj8mew==
+  dependencies:
+    postcss "^7.0.2"
+    postcss-selector-parser "^5.0.0-rc.3"
+
+postcss-replace-overflow-wrap@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-3.0.0.tgz#61b360ffdaedca84c7c918d2b0f0d0ea559ab01c"
+  integrity sha512-2T5hcEHArDT6X9+9dVSPQdo7QHzG4XKclFT8rU5TzJPDN7RIRTbO9c4drUISOVemLj03aezStHCR2AIcr8XLpw==
+  dependencies:
+    postcss "^7.0.2"
+
+postcss-selector-matches@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-selector-matches/-/postcss-selector-matches-4.0.0.tgz#71c8248f917ba2cc93037c9637ee09c64436fcff"
+  integrity sha512-LgsHwQR/EsRYSqlwdGzeaPKVT0Ml7LAT6E75T8W8xLJY62CE4S/l03BWIt3jT8Taq22kXP08s2SfTSzaraoPww==
+  dependencies:
+    balanced-match "^1.0.0"
+    postcss "^7.0.2"
+
+postcss-selector-not@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-selector-not/-/postcss-selector-not-4.0.1.tgz#263016eef1cf219e0ade9a913780fc1f48204cbf"
+  integrity sha512-YolvBgInEK5/79C+bdFMyzqTg6pkYqDbzZIST/PDMqa/o3qtXenD05apBG2jLgT0/BQ77d4U2UK12jWpilqMAQ==
+  dependencies:
+    balanced-match "^1.0.0"
+    postcss "^7.0.2"
+
+postcss-selector-parser@^5.0.0-rc.3, postcss-selector-parser@^5.0.0-rc.4:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-5.0.0.tgz#249044356697b33b64f1a8f7c80922dddee7195c"
+  integrity sha512-w+zLE5Jhg6Liz8+rQOWEAwtwkyqpfnmsinXjXg6cY7YIONZZtgvE0v2O0uhQBs0peNomOJwWRKt6JBfTdTd3OQ==
+  dependencies:
+    cssesc "^2.0.0"
+    indexes-of "^1.0.1"
+    uniq "^1.0.1"
+
+postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.6, postcss-selector-parser@^6.0.9:
+  version "6.0.9"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.9.tgz#ee71c3b9ff63d9cd130838876c13a2ec1a992b2f"
+  integrity sha512-UO3SgnZOVTwu4kyLR22UQ1xZh086RyNZppb7lLAKBFK8a32ttG5i87Y/P3+2bRSjZNyJ1B7hfFNo273tKe9YxQ==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
+postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
+  integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
+
+postcss-values-parser@^2.0.0, postcss-values-parser@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-values-parser/-/postcss-values-parser-2.0.1.tgz#da8b472d901da1e205b47bdc98637b9e9e550e5f"
+  integrity sha512-2tLuBsA6P4rYTNKCXYG/71C7j1pU6pK503suYOmn4xYrQIzW+opD+7FAFNuGSdZC/3Qfy334QbeMu7MEb8gOxg==
+  dependencies:
+    flatten "^1.0.2"
+    indexes-of "^1.0.1"
+    uniq "^1.0.1"
+
+postcss@8.4.14:
+  version "8.4.14"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.14.tgz#ee9274d5622b4858c1007a74d76e42e56fd21caf"
+  integrity sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==
+  dependencies:
+    nanoid "^3.3.4"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
+postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.2, postcss@^7.0.26, postcss@^7.0.32, postcss@^7.0.5, postcss@^7.0.6:
+  version "7.0.39"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.39.tgz#9624375d965630e2e1f2c02a935c82a59cb48309"
+  integrity sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==
+  dependencies:
+    picocolors "^0.2.1"
+    source-map "^0.6.1"
+
+postcss@^8.4.5, postcss@^8.4.6:
+  version "8.4.6"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.6.tgz#c5ff3c3c457a23864f32cb45ac9b741498a09ae1"
+  integrity sha512-OovjwIzs9Te46vlEx7+uXB0PLijpwjXGKXjVGGPIGubGpq7uh5Xgf6D6FiJ/SzJMBosHDp6a2hiXOS97iBXcaA==
+  dependencies:
+    nanoid "^3.2.0"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
+prelude-ls@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
+  integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
+
+prettier@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.5.1.tgz#fff75fa9d519c54cf0fce328c1017d94546bc56a"
+  integrity sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==
+
+progress@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
+  integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
+
+prop-types@^15.7.2:
+  version "15.8.1"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
+  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.13.1"
+
+property-information@^5.0.0:
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/property-information/-/property-information-5.6.0.tgz#61675545fb23002f245c6540ec46077d4da3ed69"
+  integrity sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA==
+  dependencies:
+    xtend "^4.0.0"
+
+property-information@^6.0.0:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/property-information/-/property-information-6.1.1.tgz#5ca85510a3019726cb9afed4197b7b8ac5926a22"
+  integrity sha512-hrzC564QIl0r0vy4l6MvRLhafmUowhO/O3KgVSoXIbbA2Sz4j8HGpJc6T2cubRVwMwpdiG/vKGfhT4IixmKN9w==
+
+proxy-addr@~2.0.7:
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.7.tgz#f19fe69ceab311eeb94b42e70e8c2070f9ba1025"
+  integrity sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==
+  dependencies:
+    forwarded "0.2.0"
+    ipaddr.js "1.9.1"
+
+punycode@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
+  integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
+
+qs@6.10.3:
+  version "6.10.3"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.10.3.tgz#d6cde1b2ffca87b5aa57889816c5f81535e22e8e"
+  integrity sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ==
+  dependencies:
+    side-channel "^1.0.4"
+
+queue-microtask@^1.2.2:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
+  integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
+
+quick-lru@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-5.1.1.tgz#366493e6b3e42a3a6885e2e99d18f80fb7a8c932"
+  integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==
+
+raf@^3.4.1:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
+  integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
+  dependencies:
+    performance-now "^2.1.0"
+
+range-parser@~1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
+  integrity sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==
+
+raw-body@2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.5.1.tgz#fe1b1628b181b700215e5fd42389f98b71392857"
+  integrity sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==
+  dependencies:
+    bytes "3.1.2"
+    http-errors "2.0.0"
+    iconv-lite "0.4.24"
+    unpipe "1.0.0"
+
+"react-collapsed@npm:@gaearon/react-collapsed@3.1.0-forked.1":
+  version "3.1.0-forked.1"
+  resolved "https://registry.yarnpkg.com/@gaearon/react-collapsed/-/react-collapsed-3.1.0-forked.1.tgz#b287b81fc2af2971d7d7b523dc40b6cf116822ac"
+  integrity sha512-QkW55Upl4eeOtnDMOxasafDtDwaF+DpYKvHq8KZoNz9P477iUH8Ik1YFYuqtI7UA8mHm1/z66LD678dZCXwEEg==
+  dependencies:
+    raf "^3.4.1"
+    tiny-warning "^1.0.3"
+
+react-devtools-inline@4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/react-devtools-inline/-/react-devtools-inline-4.4.0.tgz#e032a6eb17a9977b682306f84b46e683adf4bf68"
+  integrity sha512-ES0GolSrKO8wsKbsEkVeiR/ZAaHQTY4zDh1UW8DImVmm8oaGLl3ijJDvSGe+qDRKPZdPRnDtWWnSvvrgxXdThQ==
+  dependencies:
+    es6-symbol "^3"
+
+react-dom@0.0.0-experimental-cb5084d1c-20220924:
+  version "0.0.0-experimental-cb5084d1c-20220924"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-0.0.0-experimental-cb5084d1c-20220924.tgz#7a8334c5cf4baeb5651ca76fc9eb92ebbaf223bf"
+  integrity sha512-0IHzPGHESn3uu8nI1w5596GX8bCGCE94DpaHkKSGWOlB6uhoVecU0fyOCkkNuB4cMc9WeOWiH2gsM100EWZDPQ==
+  dependencies:
+    loose-envify "^1.1.0"
+    scheduler "0.0.0-experimental-cb5084d1c-20220924"
+
+react-is@^16.13.1:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
+  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
+
+react-is@^17.0.2:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
+  integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
+
+react@0.0.0-experimental-cb5084d1c-20220924:
+  version "0.0.0-experimental-cb5084d1c-20220924"
+  resolved "https://registry.yarnpkg.com/react/-/react-0.0.0-experimental-cb5084d1c-20220924.tgz#ab661af674be824ae2989467506443b8bc4318d3"
+  integrity sha512-66AdfxkJrwCaCEKT0LQRd9J9GQ9T+yN7Wx9XT+tNxKycYQ0Exm+DZxOTedagWDlsFMXroyhrTWzgdC18R2PaOQ==
+  dependencies:
+    loose-envify "^1.1.0"
+
+read-pkg@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-3.0.0.tgz#9cbc686978fee65d16c00e2b19c237fcf6e38389"
+  integrity sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k=
+  dependencies:
+    load-json-file "^4.0.0"
+    normalize-package-data "^2.3.2"
+    path-type "^3.0.0"
+
+readdirp@~3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
+  integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
+  dependencies:
+    picomatch "^2.2.1"
+
+reading-time@^1.2.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/reading-time/-/reading-time-1.5.0.tgz#d2a7f1b6057cb2e169beaf87113cc3411b5bc5bb"
+  integrity sha512-onYyVhBNr4CmAxFsKS7bz+uTLRakypIe4R+5A824vBSkQy/hB3fZepoVEf8OVAxzLvK+H/jm9TzpI3ETSm64Kg==
+
+regenerator-runtime@^0.13.4:
+  version "0.13.9"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
+  integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
+
+regexp.prototype.flags@^1.3.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.4.1.tgz#b3f4c0059af9e47eca9f3f660e51d81307e72307"
+  integrity sha512-pMR7hBVUUGI7PMA37m2ofIdQCsomVnas+Jn5UPGAHQ+/LlwKm/aTLJHdasmHRzlfeZwHiAOaRSo2rbBDm3nNUQ==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+
+regexpp@^3.1.0, regexpp@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2"
+  integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==
+
+remark-external-links@^7.0.0:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/remark-external-links/-/remark-external-links-7.0.1.tgz#c71ca81ea4cca48f067a9659645e4e87a94e54d5"
+  integrity sha512-a98JnTMRln8GseQq0buE4Aq6yYjYF4aRIlrPVxL9PT1pcy+yMJij24dEYAqvdluF9GHgNs/De+8y6kzqsjH1jQ==
+  dependencies:
+    extend "^3.0.0"
+    is-absolute-url "^3.0.0"
+    mdast-util-definitions "^3.0.0"
+    space-separated-tokens "^1.0.0"
+    unist-util-visit "^2.0.0"
+
+remark-frontmatter@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/remark-frontmatter/-/remark-frontmatter-4.0.1.tgz#84560f7ccef114ef076d3d3735be6d69f8922309"
+  integrity sha512-38fJrB0KnmD3E33a5jZC/5+gGAC2WKNiPw1/fdXJvijBlhA7RCsvJklrYJakS0HedninvaCYW8lQGf9C918GfA==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    mdast-util-frontmatter "^1.0.0"
+    micromark-extension-frontmatter "^1.0.0"
+    unified "^10.0.0"
+
+remark-gfm@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/remark-gfm/-/remark-gfm-3.0.1.tgz#0b180f095e3036545e9dddac0e8df3fa5cfee54f"
+  integrity sha512-lEFDoi2PICJyNrACFOfDD3JlLkuSbOa5Wd8EPt06HUdptv8Gn0bxYTdbU/XXQ3swAPkEaGxxPN9cbnMHvVu1Ig==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    mdast-util-gfm "^2.0.0"
+    micromark-extension-gfm "^2.0.0"
+    unified "^10.0.0"
+
+remark-html@^12.0.0:
+  version "12.0.0"
+  resolved "https://registry.yarnpkg.com/remark-html/-/remark-html-12.0.0.tgz#f39d2a5e173cce777981cb4171b4ea860313d72a"
+  integrity sha512-M104NMHs48+uswChJkCDXCdabzxAinpHikpt6kS3gmGMyIvPZ5kn53tB9shFsL2O4HUJ9DIEsah1SX1Ve5FXHA==
+  dependencies:
+    hast-util-sanitize "^3.0.0"
+    hast-util-to-html "^7.0.0"
+    mdast-util-to-hast "^9.0.0"
+    xtend "^4.0.1"
+
+remark-images@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/remark-images/-/remark-images-2.0.0.tgz#7621a406364c3a0a6e4250c3ee63909cc14a2388"
+  integrity sha512-1X6XTBQZW489HSwU0k+aU3xAlVe3TyPll6N2Mt1onwINTIqcTk9QTC57937Z8NQDJ8h7gKGXy9d4TJug2dm8lg==
+  dependencies:
+    is-url "^1.2.2"
+    unist-util-is "^4.0.0"
+    unist-util-visit-parents "^3.0.0"
+
+remark-mdx@^2.0.0:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/remark-mdx/-/remark-mdx-2.1.3.tgz#6273e8b94d27ade35407a63bc8cdd04592f7be9f"
+  integrity sha512-3SmtXOy9+jIaVctL8Cs3VAQInjRLGOwNXfrBB9KCT+EpJpKD3PQiy0x8hUNGyjQmdyOs40BqgPU7kYtH9uoR6w==
+  dependencies:
+    mdast-util-mdx "^2.0.0"
+    micromark-extension-mdxjs "^1.0.0"
+
+remark-parse@^10.0.0:
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-10.0.1.tgz#6f60ae53edbf0cf38ea223fe643db64d112e0775"
+  integrity sha512-1fUyHr2jLsVOkhbvPRBJ5zTKZZyD6yZzYaWCS6BPBdQ8vEMBCH+9zNCDA6tET/zHCi/jLqjCWtlJZUPk+DbnFw==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    mdast-util-from-markdown "^1.0.0"
+    unified "^10.0.0"
+
+remark-parse@^8.0.0:
+  version "8.0.3"
+  resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-8.0.3.tgz#9c62aa3b35b79a486454c690472906075f40c7e1"
+  integrity sha512-E1K9+QLGgggHxCQtLt++uXltxEprmWzNfg+MxpfHsZlrddKzZ/hZyWHDbK3/Ap8HJQqYJRXP+jHczdL6q6i85Q==
+  dependencies:
+    ccount "^1.0.0"
+    collapse-white-space "^1.0.2"
+    is-alphabetical "^1.0.0"
+    is-decimal "^1.0.0"
+    is-whitespace-character "^1.0.0"
+    is-word-character "^1.0.0"
+    markdown-escapes "^1.0.0"
+    parse-entities "^2.0.0"
+    repeat-string "^1.5.4"
+    state-toggle "^1.0.0"
+    trim "0.0.1"
+    trim-trailing-lines "^1.0.0"
+    unherit "^1.0.4"
+    unist-util-remove-position "^2.0.0"
+    vfile-location "^3.0.0"
+    xtend "^4.0.1"
+
+remark-rehype@^10.0.0:
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/remark-rehype/-/remark-rehype-10.1.0.tgz#32dc99d2034c27ecaf2e0150d22a6dcccd9a6279"
+  integrity sha512-EFmR5zppdBp0WQeDVZ/b66CWJipB2q2VLNFMabzDSGR66Z2fQii83G5gTBbgGEnEEA0QRussvrFHxk1HWGJskw==
+  dependencies:
+    "@types/hast" "^2.0.0"
+    "@types/mdast" "^3.0.0"
+    mdast-util-to-hast "^12.1.0"
+    unified "^10.0.0"
+
+remark-slug@^7.0.0:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/remark-slug/-/remark-slug-7.0.1.tgz#9827ce6d6ee81ca82b79891b0e5931a8123ce63b"
+  integrity sha512-NRvYePr69LdeCkEGwL4KYAmq7kdWG5rEavCXMzUR4qndLoXHJAOLSUmPY6Qm4NJfKix7/EmgObyVaYivONAFhg==
+  dependencies:
+    "@types/hast" "^2.3.2"
+    "@types/mdast" "^3.0.0"
+    github-slugger "^1.0.0"
+    mdast-util-to-string "^3.0.0"
+    unified "^10.0.0"
+    unist-util-visit "^4.0.0"
+
+remark-stringify@^8.0.0:
+  version "8.1.1"
+  resolved "https://registry.yarnpkg.com/remark-stringify/-/remark-stringify-8.1.1.tgz#e2a9dc7a7bf44e46a155ec78996db896780d8ce5"
+  integrity sha512-q4EyPZT3PcA3Eq7vPpT6bIdokXzFGp9i85igjmhRyXWmPs0Y6/d2FYwUNotKAWyLch7g0ASZJn/KHHcHZQ163A==
+  dependencies:
+    ccount "^1.0.0"
+    is-alphanumeric "^1.0.0"
+    is-decimal "^1.0.0"
+    is-whitespace-character "^1.0.0"
+    longest-streak "^2.0.1"
+    markdown-escapes "^1.0.0"
+    markdown-table "^2.0.0"
+    mdast-util-compact "^2.0.0"
+    parse-entities "^2.0.0"
+    repeat-string "^1.5.4"
+    state-toggle "^1.0.0"
+    stringify-entities "^3.0.0"
+    unherit "^1.0.4"
+    xtend "^4.0.1"
+
+remark-unwrap-images@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/remark-unwrap-images/-/remark-unwrap-images-2.1.0.tgz#1dda005e8397c6f1792e4c8d38ed29602f9284cc"
+  integrity sha512-DpM7oEIXNjS3aDQpzxWrTWhUJcd5b8LznbSZnSPi1Yc3fJgLYJlx9uzkj5ekyp01PSBbSbPM2jq4959mcIetvA==
+  dependencies:
+    hast-util-whitespace "^1.0.0"
+    unist-util-visit "^2.0.0"
+
+remark@^12.0.1:
+  version "12.0.1"
+  resolved "https://registry.yarnpkg.com/remark/-/remark-12.0.1.tgz#f1ddf68db7be71ca2bad0a33cd3678b86b9c709f"
+  integrity sha512-gS7HDonkdIaHmmP/+shCPejCEEW+liMp/t/QwmF0Xt47Rpuhl32lLtDV1uKWvGoq+kxr5jSgg5oAIpGuyULjUw==
+  dependencies:
+    remark-parse "^8.0.0"
+    remark-stringify "^8.0.0"
+    unified "^9.0.0"
+
+repeat-string@^1.0.0, repeat-string@^1.5.4:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
+  integrity sha1-jcrkcOHIirwtYA//Sndihtp15jc=
+
+require-from-string@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.2.tgz#89a7fdd938261267318eafe14f9c32e598c36909"
+  integrity sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==
+
+resolve-from@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
+  integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
+
+resolve@^1.10.0, resolve@^1.12.0, resolve@^1.20.0, resolve@^1.22.0:
+  version "1.22.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.0.tgz#5e0b8c67c15df57a89bdbabe603a002f21731198"
+  integrity sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==
+  dependencies:
+    is-core-module "^2.8.1"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
+resolve@^2.0.0-next.3:
+  version "2.0.0-next.3"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.3.tgz#d41016293d4a8586a39ca5d9b5f15cbea1f55e46"
+  integrity sha512-W8LucSynKUIDu9ylraa7ueVZ7hc0uAgJBxVsQSKOXOyle8a93qXhcz+XAXZ8bIq2d6i4Ehddn6Evt+0/UwKk6Q==
+  dependencies:
+    is-core-module "^2.2.0"
+    path-parse "^1.0.6"
+
+restore-cursor@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-3.1.0.tgz#39f67c54b3a7a58cea5236d95cf0034239631f7e"
+  integrity sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==
+  dependencies:
+    onetime "^5.1.0"
+    signal-exit "^3.0.2"
+
+retext-latin@^2.0.0:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/retext-latin/-/retext-latin-2.0.4.tgz#ef5d34ae7641ae56b0675ea391095e8ee762b251"
+  integrity sha512-fOoSSoQgDZ+l/uS81oxI3alBghDUPja0JEl0TpQxI6MN+dhM6fLFumPJwMZ4PJTyL5FFAgjlsdv8IX+6IRuwMw==
+  dependencies:
+    parse-latin "^4.0.0"
+    unherit "^1.0.4"
+
+retext-smartypants@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/retext-smartypants/-/retext-smartypants-4.0.0.tgz#77478bd9775b4d7505122b0799594339e08d4fda"
+  integrity sha512-Mknd05zuIycr4Z/hNDxA8ktqv7pG7wYdTZc68a2MJF+Ibg/WloR5bbyrEjijwNwHRR+xWsovkLH4OQIz/mghdw==
+  dependencies:
+    nlcst-to-string "^2.0.0"
+    unist-util-visit "^2.0.0"
+
+retext-stringify@^2.0.0:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/retext-stringify/-/retext-stringify-2.0.4.tgz#496d6c532f7dc6d15e4b262de0266e828f72efa9"
+  integrity sha512-xOtx5mFJBoT3j7PBtiY2I+mEGERNniofWktI1cKXvjMEJPOuqve0dghLHO1+gz/gScLn4zqspDGv4kk2wS5kSA==
+  dependencies:
+    nlcst-to-string "^2.0.0"
+
+retext@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/retext/-/retext-7.0.1.tgz#04b7965ab78fe6e5e3a489304545b460d41bf5aa"
+  integrity sha512-N0IaEDkvUjqyfn3/gwxVfI51IxfGzOiVXqPLWnKeCDbiQdxSg0zebzHPxXWnL7TeplAJ+RE4uqrXyYN//s9HjQ==
+  dependencies:
+    retext-latin "^2.0.0"
+    retext-stringify "^2.0.0"
+    unified "^8.0.0"
+
+reusify@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
+  integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
+
+rfdc@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/rfdc/-/rfdc-1.3.0.tgz#d0b7c441ab2720d05dc4cf26e01c89631d9da08b"
+  integrity sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA==
+
+rimraf@^2.5.4, rimraf@^2.6.3:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
+  integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
+  dependencies:
+    glob "^7.1.3"
+
+rimraf@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
+  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
+  dependencies:
+    glob "^7.1.3"
+
+rss@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/rss/-/rss-1.2.2.tgz#50a1698876138133a74f9a05d2bdc8db8d27a921"
+  integrity sha1-UKFpiHYTgTOnT5oF0r3I240nqSE=
+  dependencies:
+    mime-types "2.1.13"
+    xml "1.0.1"
+
+run-parallel@^1.1.9:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.2.0.tgz#66d1368da7bdf921eb9d95bd1a9229e7f21a43ee"
+  integrity sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==
+  dependencies:
+    queue-microtask "^1.2.2"
+
+rxjs@^7.5.2:
+  version "7.5.2"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.5.2.tgz#11e4a3a1dfad85dbf7fb6e33cbba17668497490b"
+  integrity sha512-PwDt186XaL3QN5qXj/H9DGyHhP3/RYYgZZwqBv9Tv8rsAaiwFH1IsJJlcgD37J7UW5a6O67qX0KWKS3/pu0m4w==
+  dependencies:
+    tslib "^2.1.0"
+
+sade@^1.7.3:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/sade/-/sade-1.8.1.tgz#0a78e81d658d394887be57d2a409bf703a3b2701"
+  integrity sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==
+  dependencies:
+    mri "^1.1.0"
+
+safe-buffer@5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
+  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
+
+safe-buffer@~5.1.1:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
+  integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
+
+"safer-buffer@>= 2.1.2 < 3":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
+  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
+
+scheduler@0.0.0-experimental-cb5084d1c-20220924:
+  version "0.0.0-experimental-cb5084d1c-20220924"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.0.0-experimental-cb5084d1c-20220924.tgz#9986680e1fbf7e4ccfe7606fef5920939d3a1abe"
+  integrity sha512-SeszKCdhM5OHxNMStjpKIAaloARUMZqIpDZjkZeGuRsyr7YlAqvlsCXyee4ZQOOU1pbr7BIvQntKy5Hil+DQJA==
+  dependencies:
+    loose-envify "^1.1.0"
+
+section-matter@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/section-matter/-/section-matter-1.0.0.tgz#e9041953506780ec01d59f292a19c7b850b84167"
+  integrity sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==
+  dependencies:
+    extend-shallow "^2.0.1"
+    kind-of "^6.0.0"
+
+"semver@2 || 3 || 4 || 5", semver@^5.5.0, semver@^5.6.0:
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
+  integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
+
+semver@^6.3.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
+  integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
+
+semver@^7.2.1, semver@^7.3.5:
+  version "7.3.5"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.5.tgz#0b621c879348d8998e4b0e4be94b3f12e6018ef7"
+  integrity sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==
+  dependencies:
+    lru-cache "^6.0.0"
+
+semver@^7.3.7:
+  version "7.3.7"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.7.tgz#12c5b649afdbf9049707796e22a4028814ce523f"
+  integrity sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==
+  dependencies:
+    lru-cache "^6.0.0"
+
+send@0.18.0:
+  version "0.18.0"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.18.0.tgz#670167cc654b05f5aa4a767f9113bb371bc706be"
+  integrity sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==
+  dependencies:
+    debug "2.6.9"
+    depd "2.0.0"
+    destroy "1.2.0"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    etag "~1.8.1"
+    fresh "0.5.2"
+    http-errors "2.0.0"
+    mime "1.6.0"
+    ms "2.1.3"
+    on-finished "2.4.1"
+    range-parser "~1.2.1"
+    statuses "2.0.1"
+
+serve-static@1.15.0:
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.15.0.tgz#faaef08cffe0a1a62f60cad0c4e513cff0ac9540"
+  integrity sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==
+  dependencies:
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    parseurl "~1.3.3"
+    send "0.18.0"
+
+setprototypeof@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424"
+  integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==
+
+shebang-command@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
+  integrity sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=
+  dependencies:
+    shebang-regex "^1.0.0"
+
+shebang-command@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
+  integrity sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==
+  dependencies:
+    shebang-regex "^3.0.0"
+
+shebang-regex@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
+  integrity sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=
+
+shebang-regex@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
+  integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
+
+shell-quote@^1.6.1:
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.7.3.tgz#aa40edac170445b9a431e17bb62c0b881b9c4123"
+  integrity sha512-Vpfqwm4EnqGdlsBFNmHhxhElJYrdfcxPThu+ryKS5J8L/fhAwLazFZtq+S+TWZ9ANj2piSQLGj6NQg+lKPmxrw==
+
+side-channel@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"
+  integrity sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==
+  dependencies:
+    call-bind "^1.0.0"
+    get-intrinsic "^1.0.2"
+    object-inspect "^1.9.0"
+
+signal-exit@^3.0.2, signal-exit@^3.0.3:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.6.tgz#24e630c4b0f03fea446a2bd299e62b4a6ca8d0af"
+  integrity sha512-sDl4qMFpijcGw22U5w63KmD3cZJfBuFlVNbVMKje2keoKML7X2UzWbc4XrmEbDwg0NXJc3yv4/ox7b+JWb57kQ==
+
+sirv@^1.0.7:
+  version "1.0.19"
+  resolved "https://registry.yarnpkg.com/sirv/-/sirv-1.0.19.tgz#1d73979b38c7fe91fcba49c85280daa9c2363b49"
+  integrity sha512-JuLThK3TnZG1TAKDwNIqNq6QA2afLOCcm+iE8D1Kj3GA40pSPsxQjjJl0J8X3tsR7T+CP1GavpzLwYkgVLWrZQ==
+  dependencies:
+    "@polka/url" "^1.0.0-next.20"
+    mrmime "^1.0.0"
+    totalist "^1.0.0"
+
+slash@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-2.0.0.tgz#de552851a1759df3a8f206535442f5ec4ddeab44"
+  integrity sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==
+
+slash@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
+  integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
+
+slice-ansi@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-3.0.0.tgz#31ddc10930a1b7e0b67b08c96c2f49b77a789787"
+  integrity sha512-pSyv7bSTC7ig9Dcgbw9AuRNUb5k5V6oDudjZoMBSr13qpLBG7tB+zgCkARjq7xIUgdz5P1Qe8u+rSGdouOOIyQ==
+  dependencies:
+    ansi-styles "^4.0.0"
+    astral-regex "^2.0.0"
+    is-fullwidth-code-point "^3.0.0"
+
+slice-ansi@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-4.0.0.tgz#500e8dd0fd55b05815086255b3195adf2a45fe6b"
+  integrity sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==
+  dependencies:
+    ansi-styles "^4.0.0"
+    astral-regex "^2.0.0"
+    is-fullwidth-code-point "^3.0.0"
+
+slice-ansi@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-5.0.0.tgz#b73063c57aa96f9cd881654b15294d95d285c42a"
+  integrity sha512-FC+lgizVPfie0kkhqUScwRu1O/lF6NOgJmlCgK+/LYxDCTk8sGelYaHDhFcDN+Sn3Cv+3VSa4Byeo+IMCzpMgQ==
+  dependencies:
+    ansi-styles "^6.0.0"
+    is-fullwidth-code-point "^4.0.0"
+
+source-map-js@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
+  integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
+
+source-map@^0.5.0:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+  integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
+
+source-map@^0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
+
+source-map@^0.7.0:
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.4.tgz#a9bbe705c9d8846f4e08ff6765acf0f1b0898656"
+  integrity sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==
+
+space-separated-tokens@^1.0.0:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz#85f32c3d10d9682007e917414ddc5c26d1aa6899"
+  integrity sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==
+
+space-separated-tokens@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-2.0.1.tgz#43193cec4fb858a2ce934b7f98b7f2c18107098b"
+  integrity sha512-ekwEbFp5aqSPKaqeY1PGrlGQxPNaq+Cnx4+bE2D8sciBQrHpbwoBbawqTN2+6jPs9IdWxxiUcN0K2pkczD3zmw==
+
+spdx-correct@^3.0.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.1.tgz#dece81ac9c1e6713e5f7d1b6f17d468fa53d89a9"
+  integrity sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==
+  dependencies:
+    spdx-expression-parse "^3.0.0"
+    spdx-license-ids "^3.0.0"
+
+spdx-exceptions@^2.1.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz#3f28ce1a77a00372683eade4a433183527a2163d"
+  integrity sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==
+
+spdx-expression-parse@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz#cf70f50482eefdc98e3ce0a6833e4a53ceeba679"
+  integrity sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==
+  dependencies:
+    spdx-exceptions "^2.1.0"
+    spdx-license-ids "^3.0.0"
+
+spdx-license-ids@^3.0.0:
+  version "3.0.11"
+  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.11.tgz#50c0d8c40a14ec1bf449bae69a0ea4685a9d9f95"
+  integrity sha512-Ctl2BrFiM0X3MANYgj3CkygxhRmr9mi6xhejbdO960nF6EDJApTYpn0BQnDKlnNBULKiCN1n3w9EBkHK8ZWg+g==
+
+sprintf-js@~1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
+  integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
+
+state-toggle@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/state-toggle/-/state-toggle-1.0.3.tgz#e123b16a88e143139b09c6852221bc9815917dfe"
+  integrity sha512-d/5Z4/2iiCnHw6Xzghyhb+GcmF89bxwgXG60wjIiZaxnymbyOmI8Hk4VqHXiVVp6u2ysaskFfXg3ekCj4WNftQ==
+
+statuses@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-2.0.1.tgz#55cb000ccf1d48728bd23c685a063998cf1a1b63"
+  integrity sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==
+
+string-argv@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.1.tgz#95e2fbec0427ae19184935f816d74aaa4c5c19da"
+  integrity sha512-a1uQGz7IyVy9YwhqjZIZu1c8JO8dNIe20xBmSS6qu9kv++k3JGzCVmprbNN5Kn+BgzD5E7YYwg1CcjuJMRNsvg==
+
+string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.0.tgz#5ab00980cfb29f43e736b113a120a73a0fb569d3"
+  integrity sha512-7x54QnN21P+XL/v8SuNKvfgsUre6PXpN7mc77N3HlZv+f1SBRGmjxtOud2Z6FZ8DmdkD/IdjCaf9XXbnqmTZGQ==
+  dependencies:
+    eastasianwidth "^0.2.0"
+    emoji-regex "^9.2.2"
+    strip-ansi "^7.0.1"
+
+string.prototype.matchall@^4.0.6:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.6.tgz#5abb5dabc94c7b0ea2380f65ba610b3a544b15fa"
+  integrity sha512-6WgDX8HmQqvEd7J+G6VtAahhsQIssiZ8zl7zKh1VDMFyL3hRTJP4FTNA3RbIp2TOQ9AYNDcc7e3fH0Qbup+DBg==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.19.1"
+    get-intrinsic "^1.1.1"
+    has-symbols "^1.0.2"
+    internal-slot "^1.0.3"
+    regexp.prototype.flags "^1.3.1"
+    side-channel "^1.0.4"
+
+string.prototype.padend@^3.0.0:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/string.prototype.padend/-/string.prototype.padend-3.1.3.tgz#997a6de12c92c7cb34dc8a201a6c53d9bd88a5f1"
+  integrity sha512-jNIIeokznm8SD/TZISQsZKYu7RJyheFNt84DUPrh482GC8RVp2MKqm2O5oBRdGxbDQoXrhhWtPIWQOiy20svUg==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.19.1"
+
+string.prototype.trimend@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz#e75ae90c2942c63504686c18b287b4a0b1a45f80"
+  integrity sha512-y9xCjw1P23Awk8EvTpcyL2NIr1j7wJ39f+k6lvRnSMz+mz9CGz9NYPelDk42kOz6+ql8xjfK8oYzy3jAP5QU5A==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+
+string.prototype.trimstart@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.4.tgz#b36399af4ab2999b4c9c648bd7a3fb2bb26feeed"
+  integrity sha512-jh6e984OBfvxS50tdY2nRZnoC5/mLFKOREQfw8t5yytkoUsJRNxvI/E39qu1sD0OtWI3OC0XgKSmcWwziwYuZw==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+
+stringify-entities@^3.0.0, stringify-entities@^3.0.1:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/stringify-entities/-/stringify-entities-3.1.0.tgz#b8d3feac256d9ffcc9fa1fefdcf3ca70576ee903"
+  integrity sha512-3FP+jGMmMV/ffZs86MoghGqAoqXAdxLrJP4GUdrDN1aIScYih5tuIO3eF4To5AJZ79KDZ8Fpdy7QJnK8SsL1Vg==
+  dependencies:
+    character-entities-html4 "^1.0.0"
+    character-entities-legacy "^1.0.0"
+    xtend "^4.0.0"
+
+stringify-entities@^4.0.0:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/stringify-entities/-/stringify-entities-4.0.3.tgz#cfabd7039d22ad30f3cc435b0ca2c1574fc88ef8"
+  integrity sha512-BP9nNHMhhfcMbiuQKCqMjhDP5yBCAxsPu4pHFFzJ6Alo9dZgY4VLDPutXqIjpRiMoKdp7Av85Gr73Q5uH9k7+g==
+  dependencies:
+    character-entities-html4 "^2.0.0"
+    character-entities-legacy "^3.0.0"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.0.1.tgz#61740a08ce36b61e50e65653f07060d000975fb2"
+  integrity sha512-cXNxvT8dFNRVfhVME3JAe98mkXDYN2O1l7jmcwMnOslDeESg1rF/OZMtK0nRAhiari1unG5cD4jG3rapUAkLbw==
+  dependencies:
+    ansi-regex "^6.0.1"
+
+strip-bom-string@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom-string/-/strip-bom-string-1.0.0.tgz#e5211e9224369fbb81d633a2f00044dc8cedad92"
+  integrity sha1-5SEekiQ2n7uB1jOi8ABE3IztrZI=
+
+strip-bom@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
+  integrity sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=
+
+strip-final-newline@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad"
+  integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==
+
+strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
+  integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
+
+style-mod@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/style-mod/-/style-mod-4.0.0.tgz#97e7c2d68b592975f2ca7a63d0dd6fcacfe35a01"
+  integrity sha512-OPhtyEjyyN9x3nhPsu76f52yUGXiZcgvsrFVtvTkyGRQJ0XK+GPc6ov1z+lRpbeabka+MYEQxOYRnt5nF30aMw==
+
+style-to-object@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/style-to-object/-/style-to-object-0.3.0.tgz#b1b790d205991cc783801967214979ee19a76e46"
+  integrity sha512-CzFnRRXhzWIdItT3OmF8SQfWyahHhjq3HwcMNCNLn+N7klOOqPjMeG/4JSu77D7ypZdGvSzvkrbyeTMizz2VrA==
+  dependencies:
+    inline-style-parser "0.1.1"
+
+styled-jsx@5.0.7:
+  version "5.0.7"
+  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.0.7.tgz#be44afc53771b983769ac654d355ca8d019dff48"
+  integrity sha512-b3sUzamS086YLRuvnaDigdAewz1/EFYlHpYBP5mZovKEdQQOIIYq8lApylub3HHZ6xFjV051kkGU7cudJmrXEA==
+
+supports-color@^5.3.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
+  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
+  dependencies:
+    has-flag "^3.0.0"
+
+supports-color@^7.1.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
+  integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
+  dependencies:
+    has-flag "^4.0.0"
+
+supports-color@^9.2.1:
+  version "9.2.1"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-9.2.1.tgz#599dc9d45acf74c6176e0d880bab1d7d718fe891"
+  integrity sha512-Obv7ycoCTG51N7y175StI9BlAXrmgZrFhZOb0/PyjHBher/NmsdBgbbQ1Inhq+gIhz6+7Gb+jWF2Vqi7Mf1xnQ==
+
+supports-preserve-symlinks-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
+  integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
+
+table@^6.0.9:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/table/-/table-6.8.0.tgz#87e28f14fa4321c3377ba286f07b79b281a3b3ca"
+  integrity sha512-s/fitrbVeEyHKFa7mFdkuQMWlH1Wgw/yEXMt5xACT4ZpzWFluehAxRtUUQKPuWhaLAWhFcVx6w3oC8VKaUfPGA==
+  dependencies:
+    ajv "^8.0.1"
+    lodash.truncate "^4.4.2"
+    slice-ansi "^4.0.0"
+    string-width "^4.2.3"
+    strip-ansi "^6.0.1"
+
+tailwindcss@^3.0.22:
+  version "3.0.23"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.0.23.tgz#c620521d53a289650872a66adfcb4129d2200d10"
+  integrity sha512-+OZOV9ubyQ6oI2BXEhzw4HrqvgcARY38xv3zKcjnWtMIZstEsXdI9xftd1iB7+RbOnj2HOEzkA0OyB5BaSxPQA==
+  dependencies:
+    arg "^5.0.1"
+    chalk "^4.1.2"
+    chokidar "^3.5.3"
+    color-name "^1.1.4"
+    cosmiconfig "^7.0.1"
+    detective "^5.2.0"
+    didyoumean "^1.2.2"
+    dlv "^1.1.3"
+    fast-glob "^3.2.11"
+    glob-parent "^6.0.2"
+    is-glob "^4.0.3"
+    normalize-path "^3.0.0"
+    object-hash "^2.2.0"
+    postcss "^8.4.6"
+    postcss-js "^4.0.0"
+    postcss-load-config "^3.1.0"
+    postcss-nested "5.0.6"
+    postcss-selector-parser "^6.0.9"
+    postcss-value-parser "^4.2.0"
+    quick-lru "^5.1.1"
+    resolve "^1.22.0"
+
+text-table@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
+  integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
+
+textextensions@2:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/textextensions/-/textextensions-2.6.0.tgz#d7e4ab13fe54e32e08873be40d51b74229b00fc4"
+  integrity sha512-49WtAWS+tcsy93dRt6P0P3AMD2m5PvXRhuEA0kaXos5ZLlujtYmpmFsB+QvWUSxE1ZsstmYXfQ7L40+EcQgpAQ==
+
+through@^2.3.8:
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
+  integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=
+
+tiny-warning@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
+  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
+
+tmp@^0.0.33:
+  version "0.0.33"
+  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
+  integrity sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==
+  dependencies:
+    os-tmpdir "~1.0.2"
+
+to-fast-properties@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
+  integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=
+
+to-regex-range@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
+  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+  dependencies:
+    is-number "^7.0.0"
+
+toidentifier@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"
+  integrity sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==
+
+totalist@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/totalist/-/totalist-1.1.0.tgz#a4d65a3e546517701e3e5c37a47a70ac97fe56df"
+  integrity sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g==
+
+trim-lines@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/trim-lines/-/trim-lines-3.0.1.tgz#d802e332a07df861c48802c04321017b1bd87338"
+  integrity sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==
+
+trim-trailing-lines@^1.0.0:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/trim-trailing-lines/-/trim-trailing-lines-1.1.4.tgz#bd4abbec7cc880462f10b2c8b5ce1d8d1ec7c2c0"
+  integrity sha512-rjUWSqnfTNrjbB9NQWfPMH/xRK1deHeGsHoVfpxJ++XeYXE0d6B1En37AHfw3jtfTU7dzMzZL2jjpe8Qb5gLIQ==
+
+trim@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/trim/-/trim-0.0.1.tgz#5858547f6b290757ee95cccc666fb50084c460dd"
+  integrity sha1-WFhUf2spB1fulczMZm+1AITEYN0=
+
+trough@^1.0.0:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/trough/-/trough-1.0.5.tgz#b8b639cefad7d0bb2abd37d433ff8293efa5f406"
+  integrity sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA==
+
+trough@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/trough/-/trough-2.0.2.tgz#94a3aa9d5ce379fc561f6244905b3f36b7458d96"
+  integrity sha512-FnHq5sTMxC0sk957wHDzRnemFnNBvt/gSY99HzK8F7UP5WAbvP70yX5bd7CjEQkN+TjdxwI7g7lJ6podqrG2/w==
+
+tsconfig-paths@^3.12.0, tsconfig-paths@^3.9.0:
+  version "3.12.0"
+  resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.12.0.tgz#19769aca6ee8f6a1a341e38c8fa45dd9fb18899b"
+  integrity sha512-e5adrnOYT6zqVnWqZu7i/BQ3BnhzvGbjEjejFXO20lKIKpwTaupkCPgEfv4GZK1IBciJUEhYs3J3p75FdaTFVg==
+  dependencies:
+    "@types/json5" "^0.0.29"
+    json5 "^1.0.1"
+    minimist "^1.2.0"
+    strip-bom "^3.0.0"
+
+tslib@^1.8.1:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
+  integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
+
+tslib@^2.1.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
+  integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
+
+tslib@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
+  integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
+
+tsutils@^3.21.0:
+  version "3.21.0"
+  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"
+  integrity sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==
+  dependencies:
+    tslib "^1.8.1"
+
+type-check@^0.4.0, type-check@~0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"
+  integrity sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==
+  dependencies:
+    prelude-ls "^1.2.1"
+
+type-fest@^0.20.2:
+  version "0.20.2"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
+  integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
+
+type-fest@^0.21.3:
+  version "0.21.3"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.21.3.tgz#d260a24b0198436e133fa26a524a6d65fa3b2e37"
+  integrity sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==
+
+type-is@~1.6.18:
+  version "1.6.18"
+  resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.18.tgz#4e552cd05df09467dcbc4ef739de89f2cf37c131"
+  integrity sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==
+  dependencies:
+    media-typer "0.3.0"
+    mime-types "~2.1.24"
+
+type@^1.0.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/type/-/type-1.2.0.tgz#848dd7698dafa3e54a6c479e759c4bc3f18847a0"
+  integrity sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg==
+
+type@^2.7.2:
+  version "2.7.2"
+  resolved "https://registry.yarnpkg.com/type/-/type-2.7.2.tgz#2376a15a3a28b1efa0f5350dcf72d24df6ef98d0"
+  integrity sha512-dzlvlNlt6AXU7EBSfpAscydQ7gXB+pPGsPnfJnZpiNJBDj7IaJzQlBZYGdEi4R9HmPdBv2XmWJ6YUtoTa7lmCw==
+
+typescript@^4.0.2:
+  version "4.5.5"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.5.5.tgz#d8c953832d28924a9e3d37c73d729c846c5896f3"
+  integrity sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==
+
+unbox-primitive@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.1.tgz#085e215625ec3162574dc8859abee78a59b14471"
+  integrity sha512-tZU/3NqK3dA5gpE1KtyiJUrEB0lxnGkMFHptJ7q6ewdZ8s12QrODwNbhIJStmJkd1QDXa1NRA8aF2A1zk/Ypyw==
+  dependencies:
+    function-bind "^1.1.1"
+    has-bigints "^1.0.1"
+    has-symbols "^1.0.2"
+    which-boxed-primitive "^1.0.2"
+
+unherit@^1.0.4:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/unherit/-/unherit-1.1.3.tgz#6c9b503f2b41b262330c80e91c8614abdaa69c22"
+  integrity sha512-Ft16BJcnapDKp0+J/rqFC3Rrk6Y/Ng4nzsC028k2jdDII/rdZ7Wd3pPT/6+vIIxRagwRc9K0IUX0Ra4fKvw+WQ==
+  dependencies:
+    inherits "^2.0.0"
+    xtend "^4.0.0"
+
+unified@^10.0.0:
+  version "10.1.1"
+  resolved "https://registry.yarnpkg.com/unified/-/unified-10.1.1.tgz#345e349e3ab353ab612878338eb9d57b4dea1d46"
+  integrity sha512-v4ky1+6BN9X3pQrOdkFIPWAaeDsHPE1svRDxq7YpTc2plkIqFMwukfqM+l0ewpP9EfwARlt9pPFAeWYhHm8X9w==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    bail "^2.0.0"
+    extend "^3.0.0"
+    is-buffer "^2.0.0"
+    is-plain-obj "^4.0.0"
+    trough "^2.0.0"
+    vfile "^5.0.0"
+
+unified@^8.0.0:
+  version "8.4.2"
+  resolved "https://registry.yarnpkg.com/unified/-/unified-8.4.2.tgz#13ad58b4a437faa2751a4a4c6a16f680c500fff1"
+  integrity sha512-JCrmN13jI4+h9UAyKEoGcDZV+i1E7BLFuG7OsaDvTXI5P0qhHX+vZO/kOhz9jn8HGENDKbwSeB0nVOg4gVStGA==
+  dependencies:
+    bail "^1.0.0"
+    extend "^3.0.0"
+    is-plain-obj "^2.0.0"
+    trough "^1.0.0"
+    vfile "^4.0.0"
+
+unified@^9.0.0:
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/unified/-/unified-9.2.2.tgz#67649a1abfc3ab85d2969502902775eb03146975"
+  integrity sha512-Sg7j110mtefBD+qunSLO1lqOEKdrwBFBrR6Qd8f4uwkhWNlbkaqwHse6e7QvD3AP/MNoJdEDLaf8OxYyoWgorQ==
+  dependencies:
+    bail "^1.0.0"
+    extend "^3.0.0"
+    is-buffer "^2.0.0"
+    is-plain-obj "^2.0.0"
+    trough "^1.0.0"
+    vfile "^4.0.0"
+
+uniq@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"
+  integrity sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=
+
+unist-builder@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/unist-builder/-/unist-builder-2.0.3.tgz#77648711b5d86af0942f334397a33c5e91516436"
+  integrity sha512-f98yt5pnlMWlzP539tPc4grGMsFaQQlP/vM396b00jngsiINumNmsY8rkXjfoi1c6QaM8nQ3vaGDuoKWbe/1Uw==
+
+unist-builder@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/unist-builder/-/unist-builder-3.0.0.tgz#728baca4767c0e784e1e64bb44b5a5a753021a04"
+  integrity sha512-GFxmfEAa0vi9i5sd0R2kcrI9ks0r82NasRq5QHh2ysGngrc6GiqD5CDf1FjPenY4vApmFASBIIlk/jj5J5YbmQ==
+  dependencies:
+    "@types/unist" "^2.0.0"
+
+unist-util-generated@^1.0.0:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/unist-util-generated/-/unist-util-generated-1.1.6.tgz#5ab51f689e2992a472beb1b35f2ce7ff2f324d4b"
+  integrity sha512-cln2Mm1/CZzN5ttGK7vkoGw+RZ8VcUH6BtGbq98DDtRGquAAOXig1mrBQYelOwMXYS8rK+vZDyyojSjp7JX+Lg==
+
+unist-util-generated@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unist-util-generated/-/unist-util-generated-2.0.0.tgz#86fafb77eb6ce9bfa6b663c3f5ad4f8e56a60113"
+  integrity sha512-TiWE6DVtVe7Ye2QxOVW9kqybs6cZexNwTwSMVgkfjEReqy/xwGpAXb99OxktoWwmL+Z+Epb0Dn8/GNDYP1wnUw==
+
+unist-util-is@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-4.1.0.tgz#976e5f462a7a5de73d94b706bac1b90671b57797"
+  integrity sha512-ZOQSsnce92GrxSqlnEEseX0gi7GH9zTJZ0p9dtu87WRb/37mMPO2Ilx1s/t9vBHrFhbgweUwb+t7cIn5dxPhZg==
+
+unist-util-is@^5.0.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-5.1.1.tgz#e8aece0b102fa9bc097b0fef8f870c496d4a6236"
+  integrity sha512-F5CZ68eYzuSvJjGhCLPL3cYx45IxkqXSetCcRgUXtbcm50X2L9oOWQlfUfDdAf+6Pd27YDblBfdtmsThXmwpbQ==
+
+unist-util-modify-children@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unist-util-modify-children/-/unist-util-modify-children-2.0.0.tgz#9c9c30d4e32502aabb3fde10d7872a17c86801e2"
+  integrity sha512-HGrj7JQo9DwZt8XFsX8UD4gGqOsIlCih9opG6Y+N11XqkBGKzHo8cvDi+MfQQgiZ7zXRUiQREYHhjOBHERTMdg==
+  dependencies:
+    array-iterate "^1.0.0"
+
+unist-util-position-from-estree@^1.0.0, unist-util-position-from-estree@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/unist-util-position-from-estree/-/unist-util-position-from-estree-1.1.1.tgz#96f4d543dfb0428edc01ebb928570b602d280c4c"
+  integrity sha512-xtoY50b5+7IH8tFbkw64gisG9tMSpxDjhX9TmaJJae/XuxQ9R/Kc8Nv1eOsf43Gt4KV/LkriMy9mptDr7XLcaw==
+  dependencies:
+    "@types/unist" "^2.0.0"
+
+unist-util-position@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/unist-util-position/-/unist-util-position-3.1.0.tgz#1c42ee6301f8d52f47d14f62bbdb796571fa2d47"
+  integrity sha512-w+PkwCbYSFw8vpgWD0v7zRCl1FpY3fjDSQ3/N/wNd9Ffa4gPi8+4keqt99N3XW6F99t/mUzp2xAhNmfKWp95QA==
+
+unist-util-position@^4.0.0:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/unist-util-position/-/unist-util-position-4.0.3.tgz#5290547b014f6222dff95c48d5c3c13a88fadd07"
+  integrity sha512-p/5EMGIa1qwbXjA+QgcBXaPWjSnZfQ2Sc3yBEEfgPwsEmJd8Qh+DSk3LGnmOM4S1bY2C0AjmMnB8RuEYxpPwXQ==
+  dependencies:
+    "@types/unist" "^2.0.0"
+
+unist-util-remove-position@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/unist-util-remove-position/-/unist-util-remove-position-2.0.1.tgz#5d19ca79fdba712301999b2b73553ca8f3b352cc"
+  integrity sha512-fDZsLYIe2uT+oGFnuZmy73K6ZxOPG/Qcm+w7jbEjaFcJgbQ6cqjs/eSPzXhsmGpAsWPkqZM9pYjww5QTn3LHMA==
+  dependencies:
+    unist-util-visit "^2.0.0"
+
+unist-util-remove-position@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/unist-util-remove-position/-/unist-util-remove-position-4.0.1.tgz#d5b46a7304ac114c8d91990ece085ca7c2c135c8"
+  integrity sha512-0yDkppiIhDlPrfHELgB+NLQD5mfjup3a8UYclHruTJWmY74je8g+CIFr79x5f6AkmzSwlvKLbs63hC0meOMowQ==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    unist-util-visit "^4.0.0"
+
+unist-util-stringify-position@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz#cce3bfa1cdf85ba7375d1d5b17bdc4cada9bd9da"
+  integrity sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==
+  dependencies:
+    "@types/unist" "^2.0.2"
+
+unist-util-stringify-position@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/unist-util-stringify-position/-/unist-util-stringify-position-3.0.0.tgz#d517d2883d74d0daa0b565adc3d10a02b4a8cde9"
+  integrity sha512-SdfAl8fsDclywZpfMDTVDxA2V7LjtRDTOFd44wUJamgl6OlVngsqWjxvermMYf60elWHbxhuRCZml7AnuXCaSA==
+  dependencies:
+    "@types/unist" "^2.0.0"
+
+unist-util-visit-children@^1.0.0:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/unist-util-visit-children/-/unist-util-visit-children-1.1.4.tgz#e8a087e58a33a2815f76ea1901c15dec2cb4b432"
+  integrity sha512-sA/nXwYRCQVRwZU2/tQWUqJ9JSFM1X3x7JIOsIgSzrFHcfVt6NkzDtKzyxg2cZWkCwGF9CO8x4QNZRJRMK8FeQ==
+
+unist-util-visit-parents@^3.0.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/unist-util-visit-parents/-/unist-util-visit-parents-3.1.1.tgz#65a6ce698f78a6b0f56aa0e88f13801886cdaef6"
+  integrity sha512-1KROIZWo6bcMrZEwiH2UrXDyalAa0uqzWCxCJj6lPOvTve2WkfgCytoDTPaMnodXh1WrXOq0haVYHj99ynJlsg==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    unist-util-is "^4.0.0"
+
+unist-util-visit-parents@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/unist-util-visit-parents/-/unist-util-visit-parents-5.1.0.tgz#44bbc5d25f2411e7dfc5cecff12de43296aa8521"
+  integrity sha512-y+QVLcY5eR/YVpqDsLf/xh9R3Q2Y4HxkZTp7ViLDU6WtJCEcPmRzW1gpdWDCDIqIlhuPDXOgttqPlykrHYDekg==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    unist-util-is "^5.0.0"
+
+unist-util-visit@^2.0.0, unist-util-visit@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-2.0.3.tgz#c3703893146df47203bb8a9795af47d7b971208c"
+  integrity sha512-iJ4/RczbJMkD0712mGktuGpm/U4By4FfDonL7N/9tATGIF4imikjOuagyMY53tnZq3NP6BcmlrHhEKAfGWjh7Q==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    unist-util-is "^4.0.0"
+    unist-util-visit-parents "^3.0.0"
+
+unist-util-visit@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-4.1.0.tgz#f41e407a9e94da31594e6b1c9811c51ab0b3d8f5"
+  integrity sha512-n7lyhFKJfVZ9MnKtqbsqkQEk5P1KShj0+//V7mAcoI6bpbUjh3C/OG8HVD+pBihfh6Ovl01m8dkcv9HNqYajmQ==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    unist-util-is "^5.0.0"
+    unist-util-visit-parents "^5.0.0"
+
+universalify@^0.1.0:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
+  integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==
+
+universalify@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.0.tgz#75a4984efedc4b08975c5aeb73f530d02df25717"
+  integrity sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==
+
+unpipe@1.0.0, unpipe@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
+  integrity sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==
+
+update-browserslist-db@^1.0.5:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.7.tgz#16279639cff1d0f800b14792de43d97df2d11b7d"
+  integrity sha512-iN/XYesmZ2RmmWAiI4Z5rq0YqSiv0brj9Ce9CfhNE4xIW2h+MFxcgkxIzZ+ShkFPUkjU3gQ+3oypadD3RAMtrg==
+  dependencies:
+    escalade "^3.1.1"
+    picocolors "^1.0.0"
+
+uri-js@^4.2.2:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"
+  integrity sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==
+  dependencies:
+    punycode "^2.1.0"
+
+use-sync-external-store@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
+  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
+
+util-deprecate@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
+  integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
+
+utils-merge@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
+  integrity sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==
+
+uvu@^0.5.0:
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/uvu/-/uvu-0.5.6.tgz#2754ca20bcb0bb59b64e9985e84d2e81058502df"
+  integrity sha512-+g8ENReyr8YsOc6fv/NVJs2vFdHBnBNdfE49rshrTzDWOlUx4Gq7KOS2GD8eqhy2j+Ejq29+SbKH8yjkAqXqoA==
+  dependencies:
+    dequal "^2.0.0"
+    diff "^5.0.0"
+    kleur "^4.0.3"
+    sade "^1.7.3"
+
+v8-compile-cache@^2.0.3:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"
+  integrity sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==
+
+validate-npm-package-license@^3.0.1:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"
+  integrity sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==
+  dependencies:
+    spdx-correct "^3.0.0"
+    spdx-expression-parse "^3.0.0"
+
+vary@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
+  integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==
+
+vfile-location@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/vfile-location/-/vfile-location-3.2.0.tgz#d8e41fbcbd406063669ebf6c33d56ae8721d0f3c"
+  integrity sha512-aLEIZKv/oxuCDZ8lkJGhuhztf/BW4M+iHdCwglA/eWc+vtuRFJj8EtgceYFX4LRjOhCAAiNHsKGssC6onJ+jbA==
+
+vfile-location@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/vfile-location/-/vfile-location-4.0.1.tgz#06f2b9244a3565bef91f099359486a08b10d3a95"
+  integrity sha512-JDxPlTbZrZCQXogGheBHjbRWjESSPEak770XwWPfw5mTc1v1nWGLB/apzZxsx8a0SJVfF8HK8ql8RD308vXRUw==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    vfile "^5.0.0"
+
+vfile-message@^2.0.0:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/vfile-message/-/vfile-message-2.0.4.tgz#5b43b88171d409eae58477d13f23dd41d52c371a"
+  integrity sha512-DjssxRGkMvifUOJre00juHoP9DPWuzjxKuMDrhNbk2TdaYYBNMStsNhEOt3idrtI12VQYM/1+iM0KOzXi4pxwQ==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    unist-util-stringify-position "^2.0.0"
+
+vfile-message@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/vfile-message/-/vfile-message-3.1.0.tgz#5437035aa43185ff4b9210d32fada6c640e59143"
+  integrity sha512-4QJbBk+DkPEhBXq3f260xSaWtjE4gPKOfulzfMFF8ZNwaPZieWsg3iVlcmF04+eebzpcpeXOOFMfrYzJHVYg+g==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    unist-util-stringify-position "^3.0.0"
+
+vfile@^4.0.0:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/vfile/-/vfile-4.2.1.tgz#03f1dce28fc625c625bc6514350fbdb00fa9e624"
+  integrity sha512-O6AE4OskCG5S1emQ/4gl8zK586RqA3srz3nfK/Viy0UPToBc5Trp9BVFb1u0CjsKrAWwnpr4ifM/KBXPWwJbCA==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    is-buffer "^2.0.0"
+    unist-util-stringify-position "^2.0.0"
+    vfile-message "^2.0.0"
+
+vfile@^5.0.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/vfile/-/vfile-5.3.0.tgz#4990c78cb3157005590ee8c930b71cd7fa6a006e"
+  integrity sha512-Tj44nY/48OQvarrE4FAjUfrv7GZOYzPbl5OD65HxVKwLJKMPU7zmfV8cCgCnzKWnSfYG2f3pxu+ALqs7j22xQQ==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    is-buffer "^2.0.0"
+    unist-util-stringify-position "^3.0.0"
+    vfile-message "^3.0.0"
+
+w3c-keyname@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/w3c-keyname/-/w3c-keyname-2.2.4.tgz#4ade6916f6290224cdbd1db8ac49eab03d0eef6b"
+  integrity sha512-tOhfEwEzFLJzf6d1ZPkYfGj+FWhIpBux9ppoP3rlclw3Z0BZv3N7b7030Z1kYth+6rDuAsXUFr+d0VE6Ed1ikw==
+
+webpack-bundle-analyzer@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.5.0.tgz#1b0eea2947e73528754a6f9af3e91b2b6e0f79d5"
+  integrity sha512-GUMZlM3SKwS8Z+CKeIFx7CVoHn3dXFcUAjT/dcZQQmfSZGvitPfMob2ipjai7ovFFqPvTqkEZ/leL4O0YOdAYQ==
+  dependencies:
+    acorn "^8.0.4"
+    acorn-walk "^8.0.0"
+    chalk "^4.1.0"
+    commander "^7.2.0"
+    gzip-size "^6.0.0"
+    lodash "^4.17.20"
+    opener "^1.5.2"
+    sirv "^1.0.7"
+    ws "^7.3.1"
+
+which-boxed-primitive@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6"
+  integrity sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==
+  dependencies:
+    is-bigint "^1.0.1"
+    is-boolean-object "^1.1.0"
+    is-number-object "^1.0.4"
+    is-string "^1.0.5"
+    is-symbol "^1.0.3"
+
+which@^1.2.9:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
+  integrity sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==
+  dependencies:
+    isexe "^2.0.0"
+
+which@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
+  integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
+  dependencies:
+    isexe "^2.0.0"
+
+word-wrap@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
+  integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
+
+wrap-ansi@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-6.2.0.tgz#e9393ba07102e6c91a3b221478f0257cd2856e53"
+  integrity sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+  integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
+
+ws@^7.3.1:
+  version "7.5.6"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.6.tgz#e59fc509fb15ddfb65487ee9765c5a51dec5fe7b"
+  integrity sha512-6GLgCqo2cy2A2rjCNFlxQS6ZljG/coZfZXclldI8FB/1G3CCI36Zd8xy2HrFVACi8tfk5XrgLQEk+P0Tnz9UcA==
+
+xml@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/xml/-/xml-1.0.1.tgz#78ba72020029c5bc87b8a81a3cfcd74b4a2fc1e5"
+  integrity sha1-eLpyAgApxbyHuKgaPPzXS0ovweU=
+
+xtend@^4.0.0, xtend@^4.0.1, xtend@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
+  integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
+
+yallist@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
+  integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
+
+yaml@^1.10.0, yaml@^1.10.2:
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
+  integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
+
+zwitch@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-2.0.2.tgz#91f8d0e901ffa3d66599756dde7f57b17c95dce1"
+  integrity sha512-JZxotl7SxAJH0j7dN4pxsTV6ZLXoLdGME+PsjkL/DaBrVryK9kTGq06GfKrwcSOqypP+fdXGoCHE36b99fWVoA==
diff --git a/content/authors.yml b/content/authors.yml
index b5e14fb25..39864f894 100644
--- a/content/authors.yml
+++ b/content/authors.yml
@@ -1,6 +1,9 @@
 # Map of short name to more information. `name` will be used but if you don't
 # want to use your real name, just use whatever. If url is included, your name
 # will be a link to the provided url.
+abernathyca:
+  name: Christine Abernathy
+  url: https://twitter.com/abernathyca
 acdlite:
   name: Andrew Clark
   url: https://twitter.com/acdlite
@@ -28,6 +31,12 @@ flarnie:
 gaearon:
   name: Dan Abramov
   url: https://twitter.com/dan_abramov
+gsathya:
+  name: Sathya Gunasekaran
+  url: https://twitter.com/_gsathya
+huxpro:
+  name: Xuan Huang
+  url: https://twitter.com/Huxpro
 jaredly:
   name: Jared Forsyth
   url: https://twitter.com/jaredforsyth
@@ -43,6 +52,15 @@ jingc:
 josephsavona:
   name: Joseph Savona
   url: https://twitter.com/en_JS
+joshcstory:
+  name: Josh Story
+  url: https://twitter.com/joshcstory
+jtannady:
+  name: Jesslyn Tannady
+  url: https://twitter.com/jtannady
+kassens:
+  name: Jan Kassens
+  url: https://twitter.com/kassens
 keyanzhang:
   name: Keyan Zhang
   url: https://twitter.com/keyanzhang
@@ -51,13 +69,16 @@ kmeht:
   url: https://github.com/kmeht
 laurentan:
   name: Lauren Tan
-  url: https://twitter.com/sugarpirate_
+  url: https://twitter.com/potetotes
 LoukaN:
   name: Lou Husson
   url: https://twitter.com/loukan42
 lunaruan:
   name: Luna Ruan
   url: https://twitter.com/lunaruan
+mengdichen:
+  name: Mengdi Chen
+  url: https://twitter.com/mengdi_en
 matthewjohnston4:
   name: Matthew Johnston
   url: https://github.com/matthewathome
@@ -70,12 +91,24 @@ petehunt:
 rachelnabors:
   name: Rachel Nabors
   url: https://twitter.com/rachelnabors
+reactteam:
+  name: The React Team
+  url: https://reactjs.org/community/team.html
+rickhanlonii:
+  name: Rick Hanlon
+  url: https://twitter.com/rickhanlonii
+robertzhang:
+  name: Robert Zhang
+  url: https://twitter.com/jiaxuanzhang01
 schrockn:
   name: Nick Schrock
   url: https://twitter.com/schrockn
 sebmarkbage:
   name: Sebastian Markbåge
   url: https://twitter.com/sebmarkbage
+sethwebster:
+  name: Seth Webster
+  url: https://twitter.com/sethwebster
 sophiebits:
   name: Sophie Alpert
   url: https://sophiebits.com/
diff --git a/content/blog/2013-10-16-react-v0.5.0.md b/content/blog/2013-10-16-react-v0.5.0.md
index bb8fa7a8b..81629c459 100644
--- a/content/blog/2013-10-16-react-v0.5.0.md
+++ b/content/blog/2013-10-16-react-v0.5.0.md
@@ -5,7 +5,7 @@ author: [zpao]
 
 This release is the result of several months of hard work from members of the team and the community. While there are no groundbreaking changes in core, we've worked hard to improve performance and memory usage. We've also worked hard to make sure we are being consistent in our usage of DOM properties.
 
-The biggest change you'll notice as a developer is that we no longer support `class` in JSX as a way to provide CSS classes. Since this prop was being converted to `className` at the transform step, it caused some confusion when trying to access it in composite components. As a result we decided to make our DOM properties mirror their counterparts in the JS DOM API. There are [a few exceptions](https://github.com/facebook/react/blob/master/src/dom/DefaultDOMPropertyConfig.js#L156) where we deviate slightly in an attempt to be consistent internally.
+The biggest change you'll notice as a developer is that we no longer support `class` in JSX as a way to provide CSS classes. Since this prop was being converted to `className` at the transform step, it caused some confusion when trying to access it in composite components. As a result we decided to make our DOM properties mirror their counterparts in the JS DOM API. There are [a few exceptions](https://github.com/facebook/react/blob/main/src/dom/DefaultDOMPropertyConfig.js#L156) where we deviate slightly in an attempt to be consistent internally.
 
 The other major change in v0.5 is that we've added an additional build - `react-with-addons` - which adds support for some extras that we've been working on including animations and two-way binding. [Read more about these addons in the docs](/docs/addons.html).
 
diff --git a/content/blog/2014-02-16-react-v0.9-rc1.md b/content/blog/2014-02-16-react-v0.9-rc1.md
index afc3822ba..d57699f2d 100644
--- a/content/blog/2014-02-16-react-v0.9-rc1.md
+++ b/content/blog/2014-02-16-react-v0.9-rc1.md
@@ -51,7 +51,7 @@ React.DOM.div(null,
 
 We believe this new behavior is more helpful and eliminates cases where unwanted whitespace was previously added.
 
-In cases where you want to preserve the space adjacent to a newline, you can write a JS string like `{"Monkeys: "}` in your JSX source. We've included a script to do an automated codemod of your JSX source tree that preserves the old whitespace behavior by adding and removing spaces appropriately. You can [install jsx\_whitespace\_transformer from npm](https://github.com/facebook/react/blob/master/npm-jsx_whitespace_transformer/README.md) and run it over your source tree to modify files in place. The transformed JSX files will preserve your code's existing whitespace behavior.
+In cases where you want to preserve the space adjacent to a newline, you can write a JS string like `{"Monkeys: "}` in your JSX source. We've included a script to do an automated codemod of your JSX source tree that preserves the old whitespace behavior by adding and removing spaces appropriately. You can [install jsx\_whitespace\_transformer from npm](https://github.com/facebook/react/blob/main/npm-jsx_whitespace_transformer/README.md) and run it over your source tree to modify files in place. The transformed JSX files will preserve your code's existing whitespace behavior.
 
 ## Changelog {#changelog}
 
diff --git a/content/blog/2014-02-20-react-v0.9.md b/content/blog/2014-02-20-react-v0.9.md
index bcb02397c..95bff4c78 100644
--- a/content/blog/2014-02-20-react-v0.9.md
+++ b/content/blog/2014-02-20-react-v0.9.md
@@ -59,7 +59,7 @@ React.DOM.div(null,
 
 We believe this new behavior is more helpful and eliminates cases where unwanted whitespace was previously added.
 
-In cases where you want to preserve the space adjacent to a newline, you can write `{'Monkeys: '}` or `Monkeys:{' '}` in your JSX source. We've included a script to do an automated codemod of your JSX source tree that preserves the old whitespace behavior by adding and removing spaces appropriately. You can [install jsx\_whitespace\_transformer from npm](https://github.com/facebook/react/blob/master/npm-jsx_whitespace_transformer/README.md) and run it over your source tree to modify files in place. The transformed JSX files will preserve your code's existing whitespace behavior.
+In cases where you want to preserve the space adjacent to a newline, you can write `{'Monkeys: '}` or `Monkeys:{' '}` in your JSX source. We've included a script to do an automated codemod of your JSX source tree that preserves the old whitespace behavior by adding and removing spaces appropriately. You can [install jsx\_whitespace\_transformer from npm](https://github.com/facebook/react/blob/main/npm-jsx_whitespace_transformer/README.md) and run it over your source tree to modify files in place. The transformed JSX files will preserve your code's existing whitespace behavior.
 
 ## Changelog {#changelog}
 
diff --git a/content/blog/2014-05-06-flux.md b/content/blog/2014-05-06-flux.md
index f4460545c..149c7d5fc 100644
--- a/content/blog/2014-05-06-flux.md
+++ b/content/blog/2014-05-06-flux.md
@@ -13,4 +13,4 @@ In Flux, the Dispatcher is a singleton that directs the flow of data and ensures
 
 When a user interacts with a React view, the view sends an action (usually represented as a JavaScript object with some fields) through the dispatcher, which notifies the various stores that hold the application's data and business logic. When the stores change state, they notify the views that something has updated. This works especially well with React's declarative model, which allows the stores to send updates without specifying how to transition views between states.
 
-Flux is more of a pattern than a formal framework, so you can start using Flux immediately without a lot of new code. An [example of this architecture](https://github.com/facebook/flux/tree/master/examples/flux-todomvc) is available, along with more [detailed documentation](https://facebook.github.io/flux/docs/overview.html) and a [tutorial](https://facebook.github.io/flux/docs/todo-list.html). Look for more examples to come in the future.
+Flux is more of a pattern than a formal framework, so you can start using Flux immediately without a lot of new code. An [example of this architecture](https://github.com/facebook/flux/tree/master/examples/flux-todomvc) is available, along with more [detailed documentation](https://facebook.github.io/flux/docs/overview.html) and a [tutorial](https://github.com/facebook/flux/tree/main/examples/flux-todomvc). Look for more examples to come in the future.
diff --git a/content/blog/2014-10-28-react-v0.12.md b/content/blog/2014-10-28-react-v0.12.md
index 824b2d6b0..661e6995a 100644
--- a/content/blog/2014-10-28-react-v0.12.md
+++ b/content/blog/2014-10-28-react-v0.12.md
@@ -48,7 +48,7 @@ As a result of this update, we no longer need to expose several internal modules
 
 We updated the license on React to the BSD 3-Clause license with an explicit patent grant. Previously we used the Apache 2 license. These licenses are very similar and our extra patent grant is equivalent to the grant provided in the Apache license. You can still use React with the confidence that we have granted the use of any patents covering it. This brings us in line with the same licensing we use across the majority of our open source projects at Facebook.
 
-You can read the full text of the [LICENSE](https://github.com/facebook/react/blob/master/LICENSE) and [`PATENTS`](https://github.com/facebook/react/blob/master/PATENTS) files on GitHub.
+You can read the full text of the [LICENSE](https://github.com/facebook/react/blob/main/LICENSE) and [`PATENTS`](https://github.com/facebook/react/blob/main/PATENTS) files on GitHub.
 
 - - -
 
@@ -66,7 +66,7 @@ You can read the full text of the [LICENSE](https://github.com/facebook/react/bl
 
 #### New Features {#new-features}
 
-* Spread operator (`{...}`) introduced to deprecate `this.transferPropsTo`
+* Spread syntax (`{...}`) introduced to deprecate `this.transferPropsTo`
 * Added support for more HTML attributes: `acceptCharset`, `classID`, `manifest`
 
 #### Deprecations {#deprecations}
diff --git a/content/blog/2015-02-24-react-v0.13-rc1.md b/content/blog/2015-02-24-react-v0.13-rc1.md
index 6bf6e84f5..ac2dd4c5c 100644
--- a/content/blog/2015-02-24-react-v0.13-rc1.md
+++ b/content/blog/2015-02-24-react-v0.13-rc1.md
@@ -69,7 +69,7 @@ We've also published version `0.13.0-rc1` of the `react` and `react-tools` packa
 * `--target` option is available on the jsx command, allowing users to specify and ECMAScript version to target.
   * `es5` is the default.
   * `es3` restored the previous default behavior. An additional transform is added here to ensure the use of reserved words as properties is safe (eg `this.static` will become `this['static']` for IE8 compatibility).
-* The transform for the call spread operator has also been enabled.
+* The transform for the call spread syntax has also been enabled.
 
 
 ### JSX {#jsx}
diff --git a/content/blog/2015-03-10-react-v0.13.md b/content/blog/2015-03-10-react-v0.13.md
index 47a450d2e..df0064c32 100644
--- a/content/blog/2015-03-10-react-v0.13.md
+++ b/content/blog/2015-03-10-react-v0.13.md
@@ -81,7 +81,7 @@ We've also published version `0.13.0` of the `react` and `react-tools` packages
 * `--target` option is available on the jsx command, allowing users to specify and ECMAScript version to target.
   * `es5` is the default.
   * `es3` restores the previous default behavior. An additional transform is added here to ensure the use of reserved words as properties is safe (eg `this.static` will become `this['static']` for IE8 compatibility).
-* The transform for the call spread operator has also been enabled.
+* The transform for the call spread syntax has also been enabled.
 
 
 ### JSX {#jsx}
diff --git a/content/blog/2015-09-10-react-v0.14-rc1.md b/content/blog/2015-09-10-react-v0.14-rc1.md
index e69c93ab4..277fa807e 100644
--- a/content/blog/2015-09-10-react-v0.14-rc1.md
+++ b/content/blog/2015-09-10-react-v0.14-rc1.md
@@ -137,7 +137,7 @@ And these two changes did not warn in 0.13 but should be easy to find and clean
 
 - Due to the DOM node refs change mentioned above, `this.getDOMNode()` is now deprecated and `ReactDOM.findDOMNode(this)` can be used instead. Note that in most cases, calling `findDOMNode` is now unnecessary – see the example above in the “DOM node refs” section.
 
-    If you have a large codebase, you can use our [automated codemod script](https://github.com/facebook/react/blob/master/packages/react-codemod/README.md) to change your code automatically.
+    If you have a large codebase, you can use our [automated codemod script](https://github.com/facebook/react/blob/main/packages/react-codemod/README.md) to change your code automatically.
 
 - `setProps` and `replaceProps` are now deprecated. Instead, call ReactDOM.render again at the top level with the new props.
 - ES6 component classes must now extend `React.Component` in order to enable stateless function components. The [ES3 module pattern](/blog/2015/01/27/react-v0.13.0-beta-1.html#other-languages) will continue to work.
diff --git a/content/blog/2016-07-11-introducing-reacts-error-code-system.md b/content/blog/2016-07-11-introducing-reacts-error-code-system.md
index b2d83a9c4..26b695e14 100644
--- a/content/blog/2016-07-11-introducing-reacts-error-code-system.md
+++ b/content/blog/2016-07-11-introducing-reacts-error-code-system.md
@@ -9,7 +9,7 @@ Prior to this release, we stripped out error messages at build-time and this is
 
 > Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.
 
-In order to make debugging in production easier, we're introducing an Error Code System in [15.2.0](https://github.com/facebook/react/releases/tag/v15.2.0). We developed a [script](https://github.com/facebook/react/blob/master/scripts/error-codes/extract-errors.js) that collects all of our `invariant` error messages and folds them to a [JSON file](https://github.com/facebook/react/blob/master/scripts/error-codes/codes.json), and at build-time Babel uses the JSON to [rewrite](https://github.com/facebook/react/blob/master/scripts/error-codes/transform-error-messages.js) our `invariant` calls in production to reference the corresponding error IDs. Now when things go wrong in production, the error that React throws will contain a URL with an error ID and relevant information. The URL will point you to a page in our documentation where the original error message gets reassembled.
+In order to make debugging in production easier, we're introducing an Error Code System in [15.2.0](https://github.com/facebook/react/releases/tag/v15.2.0). We developed a [script](https://github.com/facebook/react/blob/main/scripts/error-codes/extract-errors.js) that collects all of our `invariant` error messages and folds them to a [JSON file](https://github.com/facebook/react/blob/main/scripts/error-codes/codes.json), and at build-time Babel uses the JSON to [rewrite](https://github.com/facebook/react/blob/main/scripts/error-codes/transform-error-messages.js) our `invariant` calls in production to reference the corresponding error IDs. Now when things go wrong in production, the error that React throws will contain a URL with an error ID and relevant information. The URL will point you to a page in our documentation where the original error message gets reassembled.
 
 While we hope you don't see errors often, you can see how it works [here](/docs/error-decoder.html?invariant=109&args[]=Foo). This is what the same error from above will look like:
 
diff --git a/content/blog/2016-11-16-react-v15.4.0.md b/content/blog/2016-11-16-react-v15.4.0.md
index 4c9284595..9648dd497 100644
--- a/content/blog/2016-11-16-react-v15.4.0.md
+++ b/content/blog/2016-11-16-react-v15.4.0.md
@@ -5,7 +5,7 @@ author: [gaearon]
 
 Today we are releasing React 15.4.0.
 
-We didn't announce the [previous](https://github.com/facebook/react/blob/master/CHANGELOG.md#1510-may-20-2016) [minor](https://github.com/facebook/react/blob/master/CHANGELOG.md#1520-july-1-2016) [releases](https://github.com/facebook/react/blob/master/CHANGELOG.md#1530-july-29-2016) on the blog because most of the changes were bug fixes. However, 15.4.0 is a special release, and we would like to highlight a few notable changes in it.
+We didn't announce the [previous](https://github.com/facebook/react/blob/main/CHANGELOG.md#1510-may-20-2016) [minor](https://github.com/facebook/react/blob/main/CHANGELOG.md#1520-july-1-2016) [releases](https://github.com/facebook/react/blob/main/CHANGELOG.md#1530-july-29-2016) on the blog because most of the changes were bug fixes. However, 15.4.0 is a special release, and we would like to highlight a few notable changes in it.
 
 ### Separating React and React DOM {#separating-react-and-react-dom}
 
diff --git a/content/blog/2017-05-18-whats-new-in-create-react-app.md b/content/blog/2017-05-18-whats-new-in-create-react-app.md
index 9446de7e9..5fe30e07f 100644
--- a/content/blog/2017-05-18-whats-new-in-create-react-app.md
+++ b/content/blog/2017-05-18-whats-new-in-create-react-app.md
@@ -54,7 +54,7 @@ Newly created projects are built as [Progressive Web Apps](https://developers.go
 
 New apps automatically have these features, but you can easily convert an existing project to a Progressive Web App  by following [our migration guide](https://github.com/facebookincubator/create-react-app/releases/tag/v1.0.0).
 
-We will be adding [more documentation](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#making-a-progressive-web-app) on this topic in the coming weeks. Please feel free to [ask any questions](https://github.com/facebookincubator/create-react-app/issues/new) on the issue tracker!
+We will be adding [more documentation](https://github.com/facebookincubator/create-react-app/blob/main/packages/react-scripts/template/README.md#making-a-progressive-web-app) on this topic in the coming weeks. Please feel free to [ask any questions](https://github.com/facebookincubator/create-react-app/issues/new) on the issue tracker!
 
 
 ### Jest 20 {#jest-20}
diff --git a/content/blog/2017-09-08-dom-attributes-in-react-16.md b/content/blog/2017-09-08-dom-attributes-in-react-16.md
index 03172bc00..21a6e3032 100644
--- a/content/blog/2017-09-08-dom-attributes-in-react-16.md
+++ b/content/blog/2017-09-08-dom-attributes-in-react-16.md
@@ -165,7 +165,7 @@ Below is a detailed list of them.
     React 15: Converts `NaN`s to strings and passes them through.  
     React 16: Converts `NaN`s to strings and passes them through with a warning.
 
-While testing this release, we have also [created an automatically generated table](https://github.com/facebook/react/blob/master/fixtures/attribute-behavior/AttributeTableSnapshot.md) for all known attributes to track potential regressions.
+While testing this release, we have also [created an automatically generated table](https://github.com/facebook/react/blob/main/fixtures/attribute-behavior/AttributeTableSnapshot.md) for all known attributes to track potential regressions.
 
 ## Try It! {#try-it}
 
diff --git a/content/blog/2017-11-28-react-v16.2.0-fragment-support.md b/content/blog/2017-11-28-react-v16.2.0-fragment-support.md
index a8db2b0bd..6d0454a3e 100644
--- a/content/blog/2017-11-28-react-v16.2.0-fragment-support.md
+++ b/content/blog/2017-11-28-react-v16.2.0-fragment-support.md
@@ -127,7 +127,7 @@ render() {
 
 In React, this desugars to a `<React.Fragment/>` element, as in the example from the previous section. (Non-React frameworks that use JSX may compile to something different.)
 
-Fragment syntax in JSX was inspired by prior art such as the `XMLList() <></>` constructor in [E4X](https://developer.mozilla.org/en-US/docs/Archive/Web/E4X/E4X_for_templating). Using a pair of empty tags is meant to represent the idea it won't add an actual element to the DOM.
+Fragment syntax in JSX was inspired by prior art such as the `XMLList() <></>` constructor in [E4X](https://web.archive.org/web/20201019115828/https://developer.mozilla.org/en-US/docs/Archive/Web/E4X/E4X_for_templating). Using a pair of empty tags is meant to represent the idea it won't add an actual element to the DOM.
 
 ### Keyed Fragments {#keyed-fragments}
 
diff --git a/content/blog/2017-12-15-improving-the-repository-infrastructure.md b/content/blog/2017-12-15-improving-the-repository-infrastructure.md
index ae3cad65c..8c75e2c6f 100644
--- a/content/blog/2017-12-15-improving-the-repository-infrastructure.md
+++ b/content/blog/2017-12-15-improving-the-repository-infrastructure.md
@@ -215,7 +215,7 @@ To implement this, we have created a [second Jest config](https://github.com/fac
 
 This lets us run the same exact tests that we normally run against the source, but execute them using both development and production pre-built React bundles produced with Rollup and Google Closure Compiler.
 
-Unlike the normal test run, the bundle test run depends on the build products so it is not great for quick iteration. However, it still runs on the CI server so if something breaks, the test will display as failed, and we will know it's not safe to merge into master.
+Unlike the normal test run, the bundle test run depends on the build products so it is not great for quick iteration. However, it still runs on the CI server so if something breaks, the test will display as failed, and we will know it's not safe to merge into main.
 
 There are still some test files that we intentionally don't run against the bundles. Sometimes we want to mock an internal module or override a feature flag that isn't exposed to the public yet. For those cases, we blacklist a test file by renaming it from `MyModule-test.js` to `MyModule-test.internal.js`.
 
@@ -239,7 +239,7 @@ We could get away with this because the code that touches the DOM is consolidate
 
 Still, it was hard to review DOM-related changes, and occasionally we would make mistakes. In particular, it was hard to remember all the edge cases that the code had to handle, why they were added, and when it was safe to remove them. We considered adding some automatic tests that run in the browser but we didn't want to slow down the development cycle and deal with a fragile CI. Additionally, automatic tests don't always catch DOM issues. For example, an input value displayed by the browser may not match what it reports as a DOM property.
 
-We've chatted about this with [Brandon Dail](https://github.com/aweary), [Jason Quense](https://github.com/jquense), and [Nathan Hunzaker](https://github.com/nhunzaker). They were sending substantial patches to React DOM but were frustrated that we failed to review them timely. We decided to give them commit access, but asked them to [create a set of manual tests](https://github.com/facebook/react/pull/8589) for DOM-related areas like input management. The initial set of manual fixtures [kept growing](https://github.com/facebook/react/commits/master/fixtures/dom) over the year.
+We've chatted about this with [Brandon Dail](https://github.com/aweary), [Jason Quense](https://github.com/jquense), and [Nathan Hunzaker](https://github.com/nhunzaker). They were sending substantial patches to React DOM but were frustrated that we failed to review them timely. We decided to give them commit access, but asked them to [create a set of manual tests](https://github.com/facebook/react/pull/8589) for DOM-related areas like input management. The initial set of manual fixtures [kept growing](https://github.com/facebook/react/commits/main/fixtures/dom) over the year.
 
 These fixtures are implemented as a React app located in [`fixtures/dom`](https://github.com/facebook/react/tree/d906de7f602df810c38aa622c83023228b047db6/fixtures/dom). Adding a fixture involves writing a React component with a description of the expected behavior, and links to the appropriate issues and browser quirks, like [in this example](https://github.com/facebook/react/pull/11760):
 
@@ -350,15 +350,15 @@ We like to release updates to the open source community often. Unfortunately, th
 
 ### Branching Strategy {#branching-strategy}
 
-Most of the time spent in the old release process was due to our branching strategy. The `master` branch was assumed to be unstable and would often contain breaking changes. Releases were done from a `stable` branch, and changes were manually cherry-picked into this branch prior to a release. We had [tooling to help automate](https://github.com/facebook/react/pull/7330) some of this process, but it was still [pretty complicated to use](https://github.com/facebook/react/blob/b5a2a1349d6e804d534f673612357c0be7e1d701/scripts/release-manager/Readme.md).
+Most of the time spent in the old release process was due to our branching strategy. The `main` branch was assumed to be unstable and would often contain breaking changes. Releases were done from a `stable` branch, and changes were manually cherry-picked into this branch prior to a release. We had [tooling to help automate](https://github.com/facebook/react/pull/7330) some of this process, but it was still [pretty complicated to use](https://github.com/facebook/react/blob/b5a2a1349d6e804d534f673612357c0be7e1d701/scripts/release-manager/Readme.md).
 
-As of version 16, we now release from the `master` branch. Experimental features and breaking changes are allowed, but must be hidden behind [feature flags](https://github.com/facebook/react/blob/cc52e06b490e0dc2482b345aa5d0d65fae931095/packages/shared/ReactFeatureFlags.js) so they can be removed during the build process. The new flat bundles and dead code elimination make it possible for us to do this without fear of leaking unwanted code into open source builds.
+As of version 16, we now release from the `main` branch. Experimental features and breaking changes are allowed, but must be hidden behind [feature flags](https://github.com/facebook/react/blob/cc52e06b490e0dc2482b345aa5d0d65fae931095/packages/shared/ReactFeatureFlags.js) so they can be removed during the build process. The new flat bundles and dead code elimination make it possible for us to do this without fear of leaking unwanted code into open source builds.
 
 ### Automated Scripts {#automated-scripts}
 
-After changing to a stable `master`, we created a new [release process checklist](https://github.com/facebook/react/issues/10620). Although much simpler than the previous process, this still involved dozens of steps and forgetting one could result in a broken release.
+After changing to a stable `main`, we created a new [release process checklist](https://github.com/facebook/react/issues/10620). Although much simpler than the previous process, this still involved dozens of steps and forgetting one could result in a broken release.
 
-To address this, we created a new [automated release process](https://github.com/facebook/react/pull/11223) that is [much easier to use](https://github.com/facebook/react/tree/master/scripts/release#react-release-script) and has several built-in checks to ensure that we release a working build. The new process is split into two steps: _build_ and _publish_. Here's what it looks like the first time you run it:
+To address this, we created a new [automated release process](https://github.com/facebook/react/pull/11223) that is [much easier to use](https://github.com/facebook/react/tree/main/scripts/release#react-release-script) and has several built-in checks to ensure that we release a working build. The new process is split into two steps: _build_ and _publish_. Here's what it looks like the first time you run it:
 
 ![Release Script overview](../images/blog/release-script-build-overview.png)
 
diff --git a/content/blog/2018-03-27-update-on-async-rendering.md b/content/blog/2018-03-27-update-on-async-rendering.md
index 16ff0d6d0..cc8556f77 100644
--- a/content/blog/2018-03-27-update-on-async-rendering.md
+++ b/content/blog/2018-03-27-update-on-async-rendering.md
@@ -122,7 +122,7 @@ People often assume that `componentWillMount` and `componentWillUnmount` are alw
 For this reason, the recommended way to add listeners/subscriptions is to use the `componentDidMount` lifecycle:
 `embed:update-on-async-rendering/adding-event-listeners-after.js`
 
-Sometimes it is important to update subscriptions in response to property changes. If you're using a library like Redux or MobX, the library's container component should handle this for you. For application authors, we've created a small library, [`create-subscription`](https://github.com/facebook/react/tree/master/packages/create-subscription), to help with this. We'll publish it along with React 16.3.
+Sometimes it is important to update subscriptions in response to property changes. If you're using a library like Redux or MobX, the library's container component should handle this for you. For application authors, we've created a small library, [`create-subscription`](https://github.com/facebook/react/tree/main/packages/create-subscription), to help with this. We'll publish it along with React 16.3.
 
 Rather than passing a subscribable `dataSource` prop as we did in the example above, we could use `create-subscription` to pass in the subscribed value:
 
diff --git a/content/blog/2018-11-27-react-16-roadmap.md b/content/blog/2018-11-27-react-16-roadmap.md
index 248a95647..fbb08d133 100644
--- a/content/blog/2018-11-27-react-16-roadmap.md
+++ b/content/blog/2018-11-27-react-16-roadmap.md
@@ -130,7 +130,7 @@ There is no documentation written for the Concurrent Mode yet. It is important t
 
 Concurrent Mode is *much* less polished than Hooks. Some APIs aren't properly "wired up" yet and don't do what they're expected to. At the time of writing this post, we don't recommend using it for anything except very early experimentation. We don't expect many bugs in Concurrent Mode itself, but note that components that produce warnings in [`<React.StrictMode>`](https://reactjs.org/docs/strict-mode.html) may not work correctly. On a separate note, we've seen that Concurrent Mode *surfaces* performance problems in other code which can sometimes be mistaken for performance issues in Concurrent Mode itself. For example, a stray `setInterval(fn, 1)` call that runs every millisecond would have a worse effect in Concurrent Mode. We plan to publish more guidance about diagnosing and fixing issues like this as part of this release's documentation.
 
-Concurrent Mode is a big part of our vision for React. For CPU-bound work, it allows non-blocking rendering and keeps your app responsive while rendering complex component trees. That's demoed in the first part of [our JSConf Iceland talk](/blog/2018/03/01/sneak-peek-beyond-react-16.html). Concurrent Mode also makes Suspense better. It lets you avoid flickering a loading indicator if the network is fast enough. It's hard to explain without seeing so [Andrew's talk](https://www.youtube.com/watch?v=ByBPyMBTzM0) is the best resource available today. Concurrent Mode relies on a cooperative main thread [scheduler](https://github.com/facebook/react/tree/master/packages/scheduler), and we are [collaborating with the Chrome team](https://www.youtube.com/watch?v=mDdgfyRB5kg) to eventually move this functionality into the browser itself.
+Concurrent Mode is a big part of our vision for React. For CPU-bound work, it allows non-blocking rendering and keeps your app responsive while rendering complex component trees. That's demoed in the first part of [our JSConf Iceland talk](/blog/2018/03/01/sneak-peek-beyond-react-16.html). Concurrent Mode also makes Suspense better. It lets you avoid flickering a loading indicator if the network is fast enough. It's hard to explain without seeing so [Andrew's talk](https://www.youtube.com/watch?v=ByBPyMBTzM0) is the best resource available today. Concurrent Mode relies on a cooperative main thread [scheduler](https://github.com/facebook/react/tree/main/packages/scheduler), and we are [collaborating with the Chrome team](https://www.youtube.com/watch?v=mDdgfyRB5kg) to eventually move this functionality into the browser itself.
 
 **Status in React DOM:** A *very* unstable version of Concurrent Mode is available behind an `unstable_` prefix in React 16.6 but we don't recommend trying it unless you're willing to often run into walls or missing features. The 16.7 alphas include `React.ConcurrentMode` and `ReactDOM.createRoot` without an `unstable_` prefix, but we'll likely keep the prefix in 16.7, and only document and mark Concurrent Mode as stable in this future minor release.
 
@@ -175,7 +175,7 @@ function App() {
 // provide Suspense integrations with similar APIs.
 ```
 
-There is no official documentation for how to fetch data with Suspense yet, but you can find some early information in [this talk](https://youtu.be/ByBPyMBTzM0?t=1312) and [this small demo](https://github.com/facebook/react/blob/master/packages/react-devtools/CHANGELOG.md#suspense-toggle). We'll write documentation for React Cache (and how to write your own Suspense-compatible library) closer to this React release, but if you're curious, you can find its very early source code [here](https://github.com/facebook/react/blob/master/packages/react-cache/src/ReactCache.js).
+There is no official documentation for how to fetch data with Suspense yet, but you can find some early information in [this talk](https://youtu.be/ByBPyMBTzM0?t=1312) and [this small demo](https://github.com/facebook/react/blob/main/packages/react-devtools/CHANGELOG.md#suspense-toggle). We'll write documentation for React Cache (and how to write your own Suspense-compatible library) closer to this React release, but if you're curious, you can find its very early source code [here](https://github.com/facebook/react/blob/main/packages/react-cache/src/ReactCache.js).
 
 The low-level Suspense mechanism (suspending rendering and showing a fallback) is expected to be stable even in React 16.6. We've used it for code splitting in production for months. However, the higher-level APIs for data fetching are very unstable. React Cache is rapidly changing, and will change at least a few more times. There are some low-level APIs that are [missing](https://github.com/reactjs/rfcs/pull/89) for a good higher-level API to be possible. We don't recommend using React Cache anywhere except very early experiments. Note that React Cache itself isn't strictly tied to React releases, but the current alphas lack basic features as cache invalidation, and you'll run into a wall very soon. We expect to have something usable with this React release.
 
diff --git a/content/blog/2019-02-23-is-react-translated-yet.md b/content/blog/2019-02-23-is-react-translated-yet.md
index 7c3d69f5f..66e410ff5 100644
--- a/content/blog/2019-02-23-is-react-translated-yet.md
+++ b/content/blog/2019-02-23-is-react-translated-yet.md
@@ -41,7 +41,7 @@ This approach appealed to us for several reasons:
 
 We started off with an initial trial period of three languages: Spanish, Japanese, and Simplified Chinese. This allowed us to work out any kinks in our process and make sure future translations are set up for success. I wanted to give the translation teams freedom to choose whatever tools they felt comfortable with. The only requirement is a [checklist](https://github.com/reactjs/reactjs.org-translation/blob/master/PROGRESS.template.md) that outlines the order of importance for translating pages. 
 
-After the trial period, we were ready to accept more languages. I created [a script](https://github.com/reactjs/reactjs.org-translation/blob/master/scripts/create.js) to automate the creation of the new language repo, and a site, [Is React Translated Yet?](https://isreacttranslatedyet.com), to track progress on the different translations. We started *10* new translations on our first day alone!
+After the trial period, we were ready to accept more languages. I created [a script](https://github.com/reactjs/reactjs.org-translation/blob/master/scripts/create.js) to automate the creation of the new language repo, and a site, [Is React Translated Yet?](https://translations.reactjs.org), to track progress on the different translations. We started *10* new translations on our first day alone!
 
 Because of the automation, the rest of the maintenance went mostly smoothly. We eventually created a [Slack channel](https://rt-slack-invite.herokuapp.com) to make it easier for translators to share information, and I released a guide solidifying the [responsibilities of maintainers](https://github.com/reactjs/reactjs.org-translation/blob/master/maintainer-guide.md). Allowing translators to talk with each other was a great boon -- for example, the Arabic, Persian, and Hebrew translations were able to talk to each other in order to get [right-to-left text](https://en.wikipedia.org/wiki/Right-to-left) working!
 
diff --git a/content/blog/2019-08-15-new-react-devtools.md b/content/blog/2019-08-15-new-react-devtools.md
index 9981c349d..84ac0ac73 100644
--- a/content/blog/2019-08-15-new-react-devtools.md
+++ b/content/blog/2019-08-15-new-react-devtools.md
@@ -12,7 +12,7 @@ It also offers full support for React Hooks, including inspecting nested objects
 
 ![DevTools version 4 screenshot](../images/blog/devtools-v4-screenshot.png)
 
-[Visit the interactive tutorial](https://react-devtools-tutorial.now.sh/) to try out the new version or [see the changelog](https://github.com/facebook/react/blob/master/packages/react-devtools/CHANGELOG.md#400-august-15-2019) for demo videos and more details.
+[Visit the interactive tutorial](https://react-devtools-tutorial.now.sh/) to try out the new version or [see the changelog](https://github.com/facebook/react/blob/main/packages/react-devtools/CHANGELOG.md#400-august-15-2019) for demo videos and more details.
 
 ## Which versions of React are supported? {#which-versions-of-react-are-supported}
 
diff --git a/content/blog/2019-10-22-react-release-channels.md b/content/blog/2019-10-22-react-release-channels.md
index c52c98c7d..2b65f752b 100644
--- a/content/blog/2019-10-22-react-release-channels.md
+++ b/content/blog/2019-10-22-react-release-channels.md
@@ -20,8 +20,8 @@ We would like to make it even easier for developers to test prerelease builds of
 Each of React's release channels is designed for a distinct use case:
 
 - [**Latest**](#latest-channel) is for stable, semver React releases. It's what you get when you install React from npm. This is the channel you're already using today. **Use this for all user-facing React applications.**
-- [**Next**](#next-channel) tracks the master branch of the React source code repository. Think of these as release candidates for the next minor semver release. Use this for integration testing between React and third party projects.
-- [**Experimental**](#experimental-channel) includes experimental APIs and features that aren't available in the stable releases. These also track the master branch, but with additional feature flags turned on. Use this to try out upcoming features before they are released.
+- [**Next**](#next-channel) tracks the main branch of the React source code repository. Think of these as release candidates for the next minor semver release. Use this for integration testing between React and third party projects.
+- [**Experimental**](#experimental-channel) includes experimental APIs and features that aren't available in the stable releases. These also track the main branch, but with additional feature flags turned on. Use this to try out upcoming features before they are released.
 
 All releases are published to npm, but only Latest uses [semantic versioning](/docs/faq-versioning.html). Prereleases (those in the Next and Experimental channels) have versions generated from a hash of their contents, e.g. `0.0.0-1022ee0ec` for Next and `0.0.0-experimental-1022ee0ec` for Experimental.
 
@@ -39,7 +39,7 @@ You can expect updates to Latest to be extremely stable. Versions follow the sem
 
 ### Next Channel {#next-channel}
 
-The Next channel is a prerelease channel that tracks the master branch of the React repository. We use prereleases in the Next channel as release candidates for the Latest channel. You can think of Next as a superset of Latest that is updated more frequently.
+The Next channel is a prerelease channel that tracks the main branch of the React repository. We use prereleases in the Next channel as release candidates for the Latest channel. You can think of Next as a superset of Latest that is updated more frequently.
 
 The degree of change between the most recent Next release and the most recent Latest release is approximately the same as you would find between two minor semver releases. However, **the Next channel does not conform to semantic versioning.** You should expect occasional breaking changes between successive releases in the Next channel.
 
@@ -58,13 +58,13 @@ If you're the author of a third party React framework, library, developer tool,
 - Set up a cron job using your preferred continuous integration platform. Cron jobs are supported by both [CircleCI](https://circleci.com/docs/2.0/triggers/#scheduled-builds) and [Travis CI](https://docs.travis-ci.com/user/cron-jobs/).
 - In the cron job, update your React packages to the most recent React release in the Next channel, using `next` tag on npm. Using the npm cli:
 
-  ```
+  ```console
   npm update react@next react-dom@next
   ```
 
   Or yarn:
 
-  ```
+  ```console
   yarn upgrade react@next react-dom@next
   ```
 - Run your test suite against the updated packages.
@@ -75,7 +75,7 @@ A project that uses this workflow is Next.js. (No pun intended! Seriously!) You
 
 ### Experimental Channel {#experimental-channel}
 
-Like Next, the Experimental channel is a prerelease channel that tracks the master branch of the React repository. Unlike Next, Experimental releases include additional features and APIs that are not ready for wider release.
+Like Next, the Experimental channel is a prerelease channel that tracks the main branch of the React repository. Unlike Next, Experimental releases include additional features and APIs that are not ready for wider release.
 
 Usually, an update to Next is accompanied by a corresponding update to Experimental. They are based on the same source revision, but are built using a different set of feature flags.
 
@@ -99,4 +99,4 @@ If a feature is not documented, they may be accompanied by an [RFC](https://gith
 
 We will post to the React blog when we're ready to announce new experiments, but that doesn't mean we will publicize every experiment.
 
-You can always refer to our public GitHub repository's [history](https://github.com/facebook/react/commits/master) for a comprehensive list of changes.
+You can always refer to our public GitHub repository's [history](https://github.com/facebook/react/commits/main) for a comprehensive list of changes.
diff --git a/content/blog/2020-02-26-react-v16.13.0.md b/content/blog/2020-02-26-react-v16.13.0.md
index 4fb534042..3a1700952 100644
--- a/content/blog/2020-02-26-react-v16.13.0.md
+++ b/content/blog/2020-02-26-react-v16.13.0.md
@@ -34,7 +34,7 @@ When dynamically applying a `style` that contains longhand and shorthand version
 </div> 
 ```
 
-You might expect this `<div>` to always have a red background, no matter the value of `toggle`. However, on alternating the value of `toggle` between `true` and `false`, the background color start as `red`, then alternates between `transparent` and `blue`, [as you can see in this demo](https://codesandbox.io/s/suspicious-sunset-g3jub).
+You might expect this `<div>` to always have a red background, no matter the value of `toggle`. However, on alternating the value of `toggle` between `true` and `false`, the background color start as `red`, then alternates between `transparent` and `blue`, [as you can see in this demo](https://codesandbox.io/s/serene-dijkstra-dr0vev).
   
 **React now detects conflicting style rules and logs a warning.** To fix the issue, don't mix shorthand and longhand versions of the same CSS property in the `style` prop.
 
diff --git a/content/blog/2020-08-10-react-v17-rc.md b/content/blog/2020-08-10-react-v17-rc.md
index d9d38119f..c6abdd2ee 100644
--- a/content/blog/2020-08-10-react-v17-rc.md
+++ b/content/blog/2020-08-10-react-v17-rc.md
@@ -199,7 +199,7 @@ useEffect(() => {
 });
 ```
 
-We don't expect this to be a common problem because [our `eslint-plugin-react-hooks/exhaustive-deps` lint rule](https://github.com/facebook/react/tree/master/packages/eslint-plugin-react-hooks) (make sure you use it!) has always warned about this.
+We don't expect this to be a common problem because [our `eslint-plugin-react-hooks/exhaustive-deps` lint rule](https://github.com/facebook/react/tree/main/packages/eslint-plugin-react-hooks) (make sure you use it!) has always warned about this.
 
 ### Consistent Errors for Returning Undefined {#consistent-errors-for-returning-undefined}
 
diff --git a/content/blog/2021-06-08-the-plan-for-react-18.md b/content/blog/2021-06-08-the-plan-for-react-18.md
new file mode 100644
index 000000000..795159da5
--- /dev/null
+++ b/content/blog/2021-06-08-the-plan-for-react-18.md
@@ -0,0 +1,63 @@
+---
+title: "The Plan for React 18"
+author: [acdlite, bvaughn, abernathyca, gaearon, rachelnabors, rickhanlonii, sebmarkbage, sethwebster]
+---
+
+> Update Nov. 15th, 2021
+>
+> React 18 is now in beta. More information about the status of the release is [available in the React 18 Working Group post](https://github.com/reactwg/react-18/discussions/112).
+
+The React team is excited to share a few updates:
+
+1. We’ve started work on the React 18 release, which will be our next major version.
+2. We’ve created a Working Group to prepare the community for gradual adoption of new features in React 18.
+3. We’ve published a React 18 Alpha so that library authors can try it and provide feedback.
+
+These updates are primarily aimed at maintainers of third-party libraries. If you’re learning, teaching, or using React to build user-facing applications, you can safely ignore this post. But you are welcome to follow the discussions in the React 18 Working Group if you're curious!
+
+## What’s coming in React 18 {#whats-coming-in-react-18}
+
+When it’s released, React 18 will include out-of-the-box improvements (like [automatic batching](https://github.com/reactwg/react-18/discussions/21)), new APIs (like [`startTransition`](https://github.com/reactwg/react-18/discussions/41)), and a [new streaming server renderer](https://github.com/reactwg/react-18/discussions/37) with built-in support for `React.lazy`.
+
+These features are possible thanks to a new opt-in mechanism we’re adding in React 18. It’s called “concurrent rendering” and it lets React prepare multiple versions of the UI at the same time. This change is mostly behind-the-scenes, but it unlocks new possibilities to improve both real and perceived performance of your app.
+
+If you've been following our research into the future of React (we don't expect you to!), you might have heard of something called “concurrent mode” or that it might break your app. In response to this feedback from the community, we’ve redesigned the upgrade strategy for gradual adoption. Instead of an all-or-nothing “mode”, concurrent rendering will only be enabled for updates triggered by one of the new features. In practice, this means **you will be able to adopt React 18 without rewrites and try the new features at your own pace.**
+
+## A gradual adoption strategy {#a-gradual-adoption-strategy}
+
+Since concurrency in React 18 is opt-in, there are no significant out-of-the-box breaking changes to component behavior. **You can upgrade to React 18 with minimal or no changes to your application code, with a level of effort comparable to a typical major React release**. Based on our experience converting several apps to React 18, we expect that many users will be able to upgrade within a single afternoon.
+
+We successfully shipped concurrent features to tens of thousands of components at Facebook, and in our experience, we've found that most React components “just work” without additional changes. We're committed to making sure this is a smooth upgrade for the entire community, so today we're announcing the React 18 Working Group.
+
+## Working with the community {#working-with-the-community}
+
+We’re trying something new for this release: We've invited a panel of experts, developers, library authors, and educators from across the React community to participate in our [React 18 Working Group](https://github.com/reactwg/react-18) to provide feedback, ask questions, and collaborate on the release. We couldn't invite everyone we wanted to this initial, small group, but if this experiment works out, we hope there will be more in the future!
+
+**The goal of the React 18 Working Group is to prepare the ecosystem for a smooth, gradual adoption of React 18 by existing applications and libraries.** The Working Group is hosted on [GitHub Discussions](https://github.com/reactwg/react-18/discussions) and is available for the public to read. Members of the working group can leave feedback, ask questions, and share ideas. The core team will also use the discussions repo to share our research findings. As the stable release gets closer, any important information will also be posted on this blog.
+
+For more information on upgrading to React 18, or additional resources about the release, see the [React 18 announcement post](https://github.com/reactwg/react-18/discussions/4).
+
+## Accessing the React 18 Working Group {#accessing-the-react-18-working-group}
+
+Everyone can read the discussions in the [React 18 Working Group repo](https://github.com/reactwg/react-18).
+
+Because we expect an initial surge of interest in the Working Group, only invited members will be allowed to create or comment on threads. However, the threads are fully visible to the public, so everyone has access to the same information. We believe this is a good compromise between creating a productive environment for working group members, while maintaining transparency with the wider community.
+
+As always, you can submit bug reports, questions, and general feedback to our [issue tracker](https://github.com/facebook/react/issues).
+
+## How to try React 18 Alpha today {#how-to-try-react-18-alpha-today}
+
+New alphas are [regularly published to npm using the `@alpha` tag](https://github.com/reactwg/react-18/discussions/9). These releases are built using the most recent commit to our main repo. When a feature or bugfix is merged, it will appear in an alpha the following weekday.
+
+There may be significant behavioral or API changes between alpha releases. Please remember that **alpha releases are not recommended for user-facing, production applications**.
+
+## Projected React 18 release timeline {#projected-react-18-release-timeline}
+
+We don't have a specific release date scheduled, but we expect it will take several months of feedback and iteration before React 18 is ready for most production applications.
+
+* Library Alpha: Available today
+* Public Beta: At least several months
+* Release Candidate (RC): At least several weeks after Beta
+* General Availability: At least several weeks after RC
+
+More details about our projected release timeline are [available in the Working Group](https://github.com/reactwg/react-18/discussions/9). We'll post updates on this blog when we're closer to a public release.
diff --git a/content/blog/2021-12-17-react-conf-2021-recap.md b/content/blog/2021-12-17-react-conf-2021-recap.md
new file mode 100644
index 000000000..f5ccd245c
--- /dev/null
+++ b/content/blog/2021-12-17-react-conf-2021-recap.md
@@ -0,0 +1,148 @@
+---
+title: "React Conf 2021 Recap"
+author: [jtannady, rickhanlonii]
+---
+
+Last week we hosted our 6th React Conf.  In previous years, we've used the React Conf stage to deliver industry changing announcements such as [_React Native_](https://engineering.fb.com/2015/03/26/android/react-native-bringing-modern-web-techniques-to-mobile/) and [_React Hooks_](https://reactjs.org/docs/hooks-intro.html). This year, we shared our multi-platform vision for React, starting with the release of React 18 and gradual adoption of concurrent features.
+
+This was the first time React Conf was hosted online, and it was streamed for free, translated to 8 different languages. Participants from all over the world joined our conference Discord and the replay event for accessibility in all timezones. Over 50,000 people registered, with over 60,000 views of 19 talks, and 5,000 participants in Discord across both events.
+
+All the talks are [available to stream online](https://www.youtube.com/watch?v=FZ0cG47msEk&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa).
+
+Here’s a summary of what was shared on stage:
+
+## React 18 and concurrent features {#react-18-and-concurrent-features}
+
+In the keynote, we shared our vision for the future of React starting with React 18.
+
+React 18 adds the long-awaited concurrent renderer and updates to Suspense without any major breaking changes. Apps can upgrade to React 18 and begin gradually adopting concurrent features with the amount of effort on par with any other major release.
+
+**This means there is no concurrent mode, only concurrent features.**
+
+In the keynote, we also shared our vision for Suspense, Server Components, new React working groups, and our long-term many-platform vision for React Native.
+
+Watch the full keynote from [Andrew Clark](https://twitter.com/acdlite), [Juan Tejada](https://twitter.com/_jstejada), [Lauren Tan](https://twitter.com/potetotes), and [Rick Hanlon](https://twitter.com/rickhanlonii) here:
+
+<iframe style="margin-top:10px" width="560" height="315" src="https://www.youtube.com/embed/FZ0cG47msEk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+## React 18 for Application Developers {#react-18-for-application-developers}
+
+In the keynote, we also announced that the React 18 RC is available to try now. Pending further feedback, this is the exact version of React that we will publish to stable early next year.
+
+To try the React 18 RC, upgrade your dependencies:
+
+```bash
+npm install react@rc react-dom@rc
+```
+
+and switch to the new `createRoot` API:
+
+```js
+// before
+const container = document.getElementById('root');
+ReactDOM.render(<App />, container);
+
+// after
+const container = document.getElementById('root');
+const root = ReactDOM.createRoot(container);
+root.render(<App/>);
+```
+
+For a demo of upgrading to React 18, see [Shruti Kapoor](https://twitter.com/shrutikapoor08)’s talk here:
+
+<iframe style="margin-top:10px" width="560" height="315" src="https://www.youtube.com/embed/ytudH8je5ko" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+## Streaming Server Rendering with Suspense {#streaming-server-rendering-with-suspense}
+
+React 18 also includes improvements to server-side rendering performance using Suspense.
+
+Streaming server rendering lets you generate HTML from React components on the server, and stream that HTML to your users. In React 18, you can use `Suspense` to break down your app into smaller independent units which can be streamed independently of each other without blocking the rest of the app. This means users will see your content sooner and be able to start interacting with it much faster.
+
+For a deep dive, see [Shaundai Person](https://twitter.com/shaundai)’s talk here:
+
+<iframe style="margin-top:10px" width="560" height="315" src="https://www.youtube.com/embed/pj5N-Khihgc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+## The first React working group {#the-first-react-working-group}
+
+For React 18, we created our first Working Group to collaborate with a panel of experts, developers, library maintainers, and educators. Together we worked to create our gradual adoption strategy and refine new APIs such as `useId`, `useSyncExternalStore`, and `useInsertionEffect`.
+
+For an overview of this work, see [Aakansha' Doshi](https://twitter.com/aakansha1216)'s talk:
+
+<iframe style="margin-top:10px" width="560" height="315" src="https://www.youtube.com/embed/qn7gRClrC9U" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+## React Developer Tooling {#react-developer-tooling}
+
+To support the new features in this release, we also announced the newly formed React DevTools team and a new Timeline Profiler to help developers debug their React apps.
+
+For more information and a demo of new DevTools features, see [Brian Vaughn](https://twitter.com/brian_d_vaughn)’s talk:
+
+<iframe style="margin-top:10px" width="560" height="315" src="https://www.youtube.com/embed/oxDfrke8rZg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+## React without memo {#react-without-memo}
+
+Looking further into the future, [Xuan Huang (黄玄)](https://twitter.com/Huxpro) shared an update from our React Labs research into an auto-memoizing compiler. Check out this talk for more information and a demo of the compiler prototype:
+
+<iframe style="margin-top:10px" width="560" height="315" src="https://www.youtube.com/embed/lGEMwh32soc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+## React docs keynote {#react-docs-keynote}
+
+[Rachel Nabors](https://twitter.com/rachelnabors) kicked off a section of talks about learning and designing with React with a keynote about our investment in React's [new docs](https://beta.reactjs.org/):
+
+<iframe style="margin-top:10px" width="560" height="315" src="https://www.youtube.com/embed/mneDaMYOKP8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+# And more... {#and-more}
+
+**We also heard talks on learning and designing with React:**
+
+* Debbie O'Brien: [Things I learnt from the new React docs](https://youtu.be/-7odLW_hG7s).
+* Sarah Rainsberger: [Learning in the Browser](https://youtu.be/5X-WEQflCL0).
+* Linton Ye: [The ROI of Designing with React](https://youtu.be/7cPWmID5XAk).
+* Delba de Oliveira: [Interactive playgrounds with React](https://youtu.be/zL8cz2W0z34).
+
+**Talks from the Relay, React Native, and PyTorch teams:**
+
+* Robert Balicki: [Re-introducing Relay](https://youtu.be/lhVGdErZuN4).
+* Eric Rozell and Steven Moyes: [React Native Desktop](https://youtu.be/9L4FFrvwJwY).
+* Roman Rädle: [On-device Machine Learning for React Native](https://youtu.be/NLj73vrc2I8)
+
+**And talks from the community on accessibility, tooling, and Server Components:**
+
+* Daishi Kato: [React 18 for External Store Libraries](https://youtu.be/oPfSC5bQPR8).
+* Diego Haz: [Building Accessible Components in React 18](https://youtu.be/dcm8fjBfro8).
+* Tafu Nakazaki: [Accessible Japanese Form Components with React](https://youtu.be/S4a0QlsH0pU).
+* Lyle Troxell: [UI tools for artists](https://youtu.be/b3l4WxipFsE).
+* Helen Lin: [Hydrogen + React 18](https://youtu.be/HS6vIYkSNks).
+
+# Thank you {#thank-you}
+
+This was our first year planning a conference ourselves, and we have a lot of people to thank.
+
+First, thanks to all of our speakers [Aakansha Doshi](https://twitter.com/aakansha1216), [Andrew Clark](https://twitter.com/acdlite), [Brian Vaughn](https://twitter.com/brian_d_vaughn), [Daishi Kato](https://twitter.com/dai_shi), [Debbie O'Brien](https://twitter.com/debs_obrien), [Delba de Oliveira](https://twitter.com/delba_oliveira), [Diego Haz](https://twitter.com/diegohaz), [Eric Rozell](https://twitter.com/EricRozell), [Helen Lin](https://twitter.com/wizardlyhel), [Juan Tejada](https://twitter.com/_jstejada), [Lauren Tan](https://twitter.com/potetotes), [Linton Ye](https://twitter.com/lintonye), [Lyle Troxell](https://twitter.com/lyle), [Rachel Nabors](https://twitter.com/rachelnabors), [Rick Hanlon](https://twitter.com/rickhanlonii), [Robert Balicki](https://twitter.com/StatisticsFTW), [Roman Rädle](https://twitter.com/raedle), [Sarah Rainsberger](https://twitter.com/sarah11918), [Shaundai Person](https://twitter.com/shaundai), [Shruti Kapoor](https://twitter.com/shrutikapoor08), [Steven Moyes](https://twitter.com/moyessa), [Tafu Nakazaki](https://twitter.com/hawaiiman0), and  [Xuan Huang (黄玄)](https://twitter.com/Huxpro).
+
+Thanks to everyone who helped provide feedback on talks including [Andrew Clark](https://twitter.com/acdlite), [Dan Abramov](https://twitter.com/dan_abramov), [Dave McCabe](https://twitter.com/mcc_abe), [Eli White](https://twitter.com/Eli_White), [Joe Savona](https://twitter.com/en_JS),  [Lauren Tan](https://twitter.com/potetotes), [Rachel Nabors](https://twitter.com/rachelnabors), and [Tim Yung](https://twitter.com/yungsters).
+
+Thanks to [Lauren Tan](https://twitter.com/potetotes) for setting up the conference Discord and serving as our Discord admin.
+
+Thanks to [Seth Webster](https://twitter.com/sethwebster) for feedback on overall direction and making sure we were focused on diversity and inclusion.
+
+Thanks to [Rachel Nabors](https://twitter.com/rachelnabors) for spearheading our moderation effort, and [Aisha Blake](https://twitter.com/AishaBlake) for creating our moderation guide, leading our moderation team, training the translators and moderators, and helping to moderate both events.
+
+Thanks to our moderators [Jesslyn Tannady](https://twitter.com/jtannady), [Suzie Grange](https://twitter.com/missuze), [Becca Bailey](https://twitter.com/beccaliz), [Luna Wei](https://twitter.com/lunaleaps), [Joe Previte](https://twitter.com/jsjoeio), [Nicola Corti](https://twitter.com/Cortinico), [Gijs Weterings](https://twitter.com/gweterings), [Claudio Procida](https://twitter.com/claudiopro), Julia Neumann, Mengdi Chen, Jean Zhang, Ricky Li, and [Xuan Huang (黄玄)](https://twitter.com/Huxpro).
+
+Thanks to [Manjula Dube](https://twitter.com/manjula_dube), [Sahil Mhapsekar](https://twitter.com/apheri0), and Vihang Patel from [React India](https://www.reactindia.io/), and [Jasmine Xie](https://twitter.com/jasmine_xby), [QiChang Li](https://twitter.com/QCL15), and [YanLun Li](https://twitter.com/anneincoding) from [React China](https://twitter.com/ReactChina) for helping moderate our replay event and keep it engaging for the community.
+
+Thanks to Vercel for publishing their [Virtual Event Starter Kit](https://vercel.com/virtual-event-starter-kit), which the conference website was built on, and to [Lee Robinson](https://twitter.com/leeerob) and [Delba de Oliveira](https://twitter.com/delba_oliveira) for sharing their experience running Next.js Conf.
+
+Thanks to [Leah Silber](https://twitter.com/wifelette) for sharing her experience running conferences, learnings from running [RustConf](https://rustconf.com/), and for her book [Event Driven](https://leanpub.com/eventdriven/) and the advice it contains for running conferences.
+
+Thanks to [Kevin Lewis](https://twitter.com/_phzn) and [Rachel Nabors](https://twitter.com/rachelnabors) for sharing their experience running Women of React Conf.
+
+Thanks to [Aakansha Doshi](https://twitter.com/aakansha1216), [Laurie Barth](https://twitter.com/laurieontech), [Michael Chan](https://twitter.com/chantastic), and [Shaundai Person](https://twitter.com/shaundai) for their advice and ideas throughout planning.
+
+Thanks to [Dan Lebowitz](https://twitter.com/lebo) for help designing and building the conference website and tickets.
+
+Thanks to Laura Podolak Waddell, Desmond Osei-Acheampong, Mark Rossi, Josh Toberman and others on the Facebook Video Productions team for recording the videos for the Keynote and Meta employee talks.
+
+Thanks to our partner HitPlay for helping to organize the conference, editing all the videos in the stream, translating all the talks, and moderating the Discord in multiple languages.
+
+Finally, thanks to all of our participants for making this a great React Conf!
diff --git a/content/blog/2022-03-08-react-18-upgrade-guide.md b/content/blog/2022-03-08-react-18-upgrade-guide.md
new file mode 100644
index 000000000..40637eacd
--- /dev/null
+++ b/content/blog/2022-03-08-react-18-upgrade-guide.md
@@ -0,0 +1,303 @@
+---
+title: "How to Upgrade to React 18"
+author: [rickhanlonii]
+---
+
+As we shared in the [release post](/blog/2022/03/29/react-v18.html), React 18 introduces features powered by our new concurrent renderer, with a gradual adoption strategy for existing applications. In this post, we will guide you through the steps for upgrading to React 18.
+
+Please [report any issues](https://github.com/facebook/react/issues/new/choose) you encounter while upgrading to React 18.
+
+*Note for React Native users: React 18 will ship in a future version of React Native. This is because React 18 relies on the New React Native Architecture to benefit from the new capabilities presented in this blogpost. For more information, see the [React Conf keynote here](https://www.youtube.com/watch?v=FZ0cG47msEk&t=1530s).*
+
+## Installing {#installing}
+
+To install the latest version of React:
+
+```bash
+npm install react react-dom
+```
+
+Or if you’re using yarn:
+
+```bash
+yarn add react react-dom
+```
+
+## Updates to Client Rendering APIs {#updates-to-client-rendering-apis}
+
+When you first install React 18, you will see a warning in the console:
+
+> ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot
+
+React 18 introduces a new root API which provides better ergonomics for managing roots. The new root API also enables the new concurrent renderer, which allows you to opt-into concurrent features.
+
+```js
+// Before
+import { render } from 'react-dom';
+const container = document.getElementById('app');
+render(<App tab="home" />, container);
+
+// After
+import { createRoot } from 'react-dom/client';
+const container = document.getElementById('app');
+const root = createRoot(container); // createRoot(container!) if you use TypeScript
+root.render(<App tab="home" />);
+```
+
+We’ve also changed `unmountComponentAtNode` to `root.unmount`:
+
+```js
+// Before
+unmountComponentAtNode(container);
+
+// After
+root.unmount();
+```
+
+We've also removed the callback from render, since it usually does not have the expected result when using Suspense:
+
+```js
+// Before
+const container = document.getElementById('app');
+render(<App tab="home" />, container, () => {
+  console.log('rendered');
+});
+
+// After
+function AppWithCallbackAfterRender() {
+  useEffect(() => {
+    console.log('rendered');
+  });
+
+  return <App tab="home" />
+}
+
+const container = document.getElementById('app');
+const root = createRoot(container);
+root.render(<AppWithCallbackAfterRender />);
+```
+
+> Note:
+> 
+> There is no one-to-one replacement for the old render callback API — it depends on your use case. See the working group post for [Replacing render with createRoot](https://github.com/reactwg/react-18/discussions/5) for more information.
+
+Finally, if your app uses server-side rendering with hydration, upgrade `hydrate` to `hydrateRoot`:
+
+```js
+// Before
+import { hydrate } from 'react-dom';
+const container = document.getElementById('app');
+hydrate(<App tab="home" />, container);
+
+// After
+import { hydrateRoot } from 'react-dom/client';
+const container = document.getElementById('app');
+const root = hydrateRoot(container, <App tab="home" />);
+// Unlike with createRoot, you don't need a separate root.render() call here.
+```
+
+For more information, see the [working group discussion here](https://github.com/reactwg/react-18/discussions/5).
+
+> Note
+> 
+> **If your app doesn't work after upgrading, check whether it's wrapped in `<StrictMode>`.** [Strict Mode has gotten stricter in React 18](#updates-to-strict-mode), and not all your components may be resilient to the new checks it adds in development mode. If removing Strict Mode fixes your app, you can remove it during the upgrade, and then add it back (either at the top or for a part of the tree) after you fix the issues that it's pointing out.
+
+## Updates to Server Rendering APIs {#updates-to-server-rendering-apis}
+
+In this release, we’re revamping our `react-dom/server` APIs to fully support Suspense on the server and Streaming SSR. As part of these changes, we're deprecating the old Node streaming API, which does not support incremental Suspense streaming on the server.
+
+Using this API will now warn:
+
+* `renderToNodeStream`: **Deprecated ⛔️️**
+
+Instead, for streaming in Node environments, use:
+* `renderToPipeableStream`: **New ✨**
+
+We're also introducing a new API to support streaming SSR with Suspense for modern edge runtime environments, such as Deno and Cloudflare workers:
+* `renderToReadableStream`: **New ✨**
+
+The following APIs will continue working, but with limited support for Suspense:
+* `renderToString`: **Limited** ⚠️
+* `renderToStaticMarkup`: **Limited** ⚠️
+
+Finally, this API will continue to work for rendering e-mails:
+* `renderToStaticNodeStream`
+
+For more information on the changes to server rendering APIs, see the working group post on [Upgrading to React 18 on the server](https://github.com/reactwg/react-18/discussions/22), a [deep dive on the new Suspense SSR Architecture](https://github.com/reactwg/react-18/discussions/37), and [Shaundai Person’s](https://twitter.com/shaundai) talk on [Streaming Server Rendering with Suspense](https://www.youtube.com/watch?v=pj5N-Khihgc) at React Conf 2021.
+
+## Updates to TypeScript definitions
+
+If your project uses TypeScript, you will need to update your `@types/react` and `@types/react-dom` dependencies to the latest versions. The new types are safer and catch issues that used to be ignored by the type checker. The most notable change is that the `children` prop now needs to be listed explicitly when defining props, for example:
+
+```typescript{3}
+interface MyButtonProps {
+  color: string;
+  children?: React.ReactNode;
+}
+```
+
+See the [React 18 typings pull request](https://github.com/DefinitelyTyped/DefinitelyTyped/pull/56210) for a full list of type-only changes. It links to example fixes in library types so you can see how to adjust your code. You can use the [automated migration script](https://github.com/eps1lon/types-react-codemod) to help port your application code to the new and safer typings faster.
+
+If you find a bug in the typings, please [file an issue](https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/new?category=issues-with-a-types-package) in the DefinitelyTyped repo.
+
+## Automatic Batching {#automatic-batching}
+
+React 18 adds out-of-the-box performance improvements by doing more batching by default. Batching is when React groups multiple state updates into a single re-render for better performance. Before React 18, we only batched updates inside React event handlers. Updates inside of promises, setTimeout, native event handlers, or any other event were not batched in React by default:
+
+```js
+// Before React 18 only React events were batched
+
+function handleClick() {
+  setCount(c => c + 1);
+  setFlag(f => !f);
+  // React will only re-render once at the end (that's batching!)
+}
+
+setTimeout(() => {
+  setCount(c => c + 1);
+  setFlag(f => !f);
+  // React will render twice, once for each state update (no batching)
+}, 1000);
+```
+
+
+Starting in React 18 with `createRoot`, all updates will be automatically batched, no matter where they originate from. This means that updates inside of timeouts, promises, native event handlers or any other event will batch the same way as updates inside of React events:
+
+```js
+// After React 18 updates inside of timeouts, promises,
+// native event handlers or any other event are batched.
+
+function handleClick() {
+  setCount(c => c + 1);
+  setFlag(f => !f);
+  // React will only re-render once at the end (that's batching!)
+}
+
+setTimeout(() => {
+  setCount(c => c + 1);
+  setFlag(f => !f);
+  // React will only re-render once at the end (that's batching!)
+}, 1000);
+```
+
+This is a breaking change, but we expect this to result in less work rendering, and therefore better performance in your applications. To opt-out of automatic batching, you can use `flushSync`:
+
+```js
+import { flushSync } from 'react-dom';
+
+function handleClick() {
+  flushSync(() => {
+    setCounter(c => c + 1);
+  });
+  // React has updated the DOM by now
+  flushSync(() => {
+    setFlag(f => !f);
+  });
+  // React has updated the DOM by now
+}
+```
+
+For more information, see the [Automatic batching deep dive](https://github.com/reactwg/react-18/discussions/21).
+
+## New APIs for Libraries {#new-apis-for-libraries}
+
+In the React 18 Working Group we worked with library maintainers to create new APIs needed to support concurrent rendering for use cases specific to their use case in areas like styles, and external stores. To support React 18, some libraries may need to switch to one of the following APIs:
+
+* `useSyncExternalStore` is a new hook that allows external stores to support concurrent reads by forcing updates to the store to be synchronous. This new API is recommended for any library that integrates with state external to React. For more information, see the [useSyncExternalStore overview post](https://github.com/reactwg/react-18/discussions/70) and [useSyncExternalStore API details](https://github.com/reactwg/react-18/discussions/86).
+* `useInsertionEffect` is a new hook that allows CSS-in-JS libraries to address performance issues of injecting styles in render. Unless you've already built a CSS-in-JS library we don't expect you to ever use this. This hook will run after the DOM is mutated, but before layout effects read the new layout. This solves an issue that already exists in React 17 and below, but is even more important in React 18 because React yields to the browser during concurrent rendering, giving it a chance to recalculate layout. For more information, see the [Library Upgrade Guide for `<style>`](https://github.com/reactwg/react-18/discussions/110).
+
+React 18 also introduces new APIs for concurrent rendering such as `startTransition`, `useDeferredValue` and `useId`, which we share more about in the [release post](/blog/2022/03/29/react-v18.html).
+
+## Updates to Strict Mode {#updates-to-strict-mode}
+
+In the future, we'd like to add a feature that allows React to add and remove sections of the UI while preserving state. For example, when a user tabs away from a screen and back, React should be able to immediately show the previous screen. To do this, React would unmount and remount trees using the same component state as before.
+
+This feature will give React better performance out-of-the-box, but requires components to be resilient to effects being mounted and destroyed multiple times. Most effects will work without any changes, but some effects assume they are only mounted or destroyed once.
+
+To help surface these issues, React 18 introduces a new development-only check to Strict Mode. This new check will automatically unmount and remount every component, whenever a component mounts for the first time, restoring the previous state on the second mount.
+
+Before this change, React would mount the component and create the effects:
+
+```
+* React mounts the component.
+    * Layout effects are created.
+    * Effect effects are created.
+```
+
+With Strict Mode in React 18, React will simulate unmounting and remounting the component in development mode:
+
+```
+* React mounts the component.
+    * Layout effects are created.
+    * Effect effects are created.
+* React simulates unmounting the component.
+    * Layout effects are destroyed.
+    * Effects are destroyed.
+* React simulates mounting the component with the previous state.
+    * Layout effect setup code runs
+    * Effect setup code runs
+```
+
+For more information, see the Working Group posts for [Adding Reusable State to StrictMode](https://github.com/reactwg/react-18/discussions/19) and [How to support Reusable State in Effects](https://github.com/reactwg/react-18/discussions/18).
+
+## Configuring Your Testing Environment {#configuring-your-testing-environment}
+
+When you first update your tests to use `createRoot`, you may see this warning in your test console:
+
+> The current testing environment is not configured to support act(...)
+
+To fix this, set `globalThis.IS_REACT_ACT_ENVIRONMENT` to `true` before running your test:
+
+```js
+// In your test setup file
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+```
+
+The purpose of the flag is to tell React that it's running in a unit test-like environment. React will log helpful warnings if you forget to wrap an update with `act`.
+
+You can also set the flag to `false` to tell React that `act` isn't needed. This can be useful for end-to-end tests that simulate a full browser environment.
+
+Eventually, we expect testing libraries will configure this for you automatically. For example, the [next version of React Testing Library has built-in support for React 18](https://github.com/testing-library/react-testing-library/issues/509#issuecomment-917989936) without any additional configuration.
+
+[More background on the `act` testing API and related changes](https://github.com/reactwg/react-18/discussions/102) is available in the working group.
+
+## Dropping Support for Internet Explorer {#dropping-support-for-internet-explorer}
+
+In this release, React is dropping support for Internet Explorer, which is [going out of support on June 15, 2022](https://blogs.windows.com/windowsexperience/2021/05/19/the-future-of-internet-explorer-on-windows-10-is-in-microsoft-edge). We’re making this change now because new features introduced in React 18 are built using modern browser features such as microtasks which cannot be adequately polyfilled in IE.
+
+If you need to support Internet Explorer we recommend you stay with React 17.
+
+## Deprecations {#deprecations}
+
+* `react-dom`: `ReactDOM.render` has been deprecated. Using it will warn and run your app in React 17 mode.
+* `react-dom`: `ReactDOM.hydrate` has been deprecated. Using it will warn and run your app in React 17 mode.
+* `react-dom`: `ReactDOM.unmountComponentAtNode` has been deprecated.
+* `react-dom`: `ReactDOM.renderSubtreeIntoContainer` has been deprecated.
+* `react-dom/server`: `ReactDOMServer.renderToNodeStream` has been deprecated.
+
+## Other Breaking Changes {#other-breaking-changes}
+
+* **Consistent useEffect timing**: React now always synchronously flushes effect functions if the update was triggered during a discrete user input event such as a click or a keydown event. Previously, the behavior wasn't always predictable or consistent.
+* **Stricter hydration errors**: Hydration mismatches due to missing or extra text content are now treated like errors instead of warnings. React will no longer attempt to "patch up" individual nodes by inserting or deleting a node on the client in an attempt to match the server markup, and will revert to client rendering up to the closest `<Suspense>` boundary in the tree. This ensures the hydrated tree is consistent and avoids potential privacy and security holes that can be caused by hydration mismatches.
+* **Suspense trees are always consistent:** If a component suspends before it's fully added to the tree, React will not add it to the tree in an incomplete state or fire its effects. Instead, React will throw away the new tree completely, wait for the asynchronous operation to finish, and then retry rendering again from scratch. React will render the retry attempt concurrently, and without blocking the browser.
+* **Layout Effects with Suspense**: When a tree re-suspends and reverts to a fallback, React will now clean up layout effects, and then re-create them when the content inside the boundary is shown again. This fixes an issue which prevented component libraries from correctly measuring layout when used with Suspense.
+* **New JS Environment Requirements**: React now depends on modern browsers features including `Promise`, `Symbol`, and `Object.assign`. If you support older browsers and devices such as Internet Explorer which do not provide modern browser features natively or have non-compliant implementations, consider including a global polyfill in your bundled application.
+
+## Other Notable Changes {#other-notable-changes}
+
+### React {#react}
+
+* **Components can now render `undefined`:** React no longer warns if you return `undefined` from a component. This makes the allowed component return values consistent with values that are allowed in the middle of a component tree. We suggest to use a linter to prevent mistakes like forgetting a `return` statement before JSX.
+* **In tests, `act` warnings are now opt-in:** If you're running end-to-end tests, the `act` warnings are unnecessary. We've introduced an [opt-in](https://github.com/reactwg/react-18/discussions/102) mechanism so you can enable them only for unit tests where they are useful and beneficial.
+* **No warning about `setState` on unmounted components:** Previously, React warned about memory leaks when you call `setState` on an unmounted component. This warning was added for subscriptions, but people primarily run into it in scenarios where setting state is fine, and workarounds make the code worse. We've [removed](https://github.com/facebook/react/pull/22114) this warning.
+* **No suppression of console logs:** When you use Strict Mode, React renders each component twice to help you find unexpected side effects. In React 17, we've suppressed console logs for one of the two renders to make the logs easier to read. In response to [community feedback](https://github.com/facebook/react/issues/21783) about this being confusing, we've removed the suppression. Instead, if you have React DevTools installed, the second log's renders will be displayed in grey, and there will be an option (off by default) to suppress them completely.
+* **Improved memory usage:** React now cleans up more internal fields on unmount, making the impact from unfixed memory leaks that may exist in your application code less severe.
+
+### React DOM Server {#react-dom-server}
+
+* **`renderToString`:** Will no longer error when suspending on the server. Instead, it will emit the fallback HTML for the closest `<Suspense>` boundary and then retry rendering the same content on the client. It is still recommended that you switch to a streaming API like `renderToPipeableStream` or `renderToReadableStream` instead.
+* **`renderToStaticMarkup`:** Will no longer error when suspending on the server. Instead, it will emit the fallback HTML for the closest `<Suspense>` boundary.
+
+## Changelog {#changelog}
+
+You can view the [full changelog here](https://github.com/facebook/react/blob/main/CHANGELOG.md).
diff --git a/content/blog/2022-03-29-react-v18.md b/content/blog/2022-03-29-react-v18.md
new file mode 100644
index 000000000..5a5020df2
--- /dev/null
+++ b/content/blog/2022-03-29-react-v18.md
@@ -0,0 +1,331 @@
+---
+title: "React v18.0"
+author: [reactteam]
+---
+
+React 18 is now available on npm!
+
+In our last post, we shared step-by-step instructions for [upgrading your app to React 18](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html). In this post, we'll give an overview of what's new in React 18, and what it means for the future.
+
+Our latest major version includes out-of-the-box improvements like automatic batching, new APIs like startTransition, and streaming server-side rendering with support for Suspense.
+
+Many of the features in React 18 are built on top of our new concurrent renderer, a behind-the-scenes change that unlocks powerful new capabilities. Concurrent React is opt-in — it's only enabled when you use a concurrent feature — but we think it will have a big impact on the way people build applications.
+
+We've spent years researching and developing support for concurrency in React, and we've taken extra care to provide a gradual adoption path for existing users. Last summer, [we formed the React 18 Working Group](https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html) to gather feedback from experts in the community and ensure a smooth upgrade experience for the entire React ecosystem.
+
+In case you missed it, we shared a lot of this vision at React Conf 2021:
+
+* In [the keynote](https://www.youtube.com/watch?v=FZ0cG47msEk&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa), we explain how React 18 fits into our mission to make it easy for developers to build great user experiences
+* [Shruti Kapoor](https://twitter.com/shrutikapoor08) [demonstrated how to use the new features in React 18](https://www.youtube.com/watch?v=ytudH8je5ko&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=2)
+* [Shaundai Person](https://twitter.com/shaundai) gave us an overview of [streaming server rendering with Suspense](https://www.youtube.com/watch?v=pj5N-Khihgc&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=3)
+
+Below is a full overview of what to expect in this release, starting with Concurrent Rendering.
+
+*Note for React Native users: React 18 will ship in React Native with the New React Native Architecture. For more information, see the [React Conf keynote here](https://www.youtube.com/watch?v=FZ0cG47msEk&t=1530s).*
+
+## What is Concurrent React? {#what-is-concurrent-react}
+
+The most important addition in React 18 is something we hope you never have to think about: concurrency. We think this is largely true for application developers, though the story may be a bit more complicated for library maintainers.
+
+Concurrency is not a feature, per se. It's a new behind-the-scenes mechanism that enables React to prepare multiple versions of your UI at the same time. You can think of concurrency as an implementation detail — it's valuable because of the features that it unlocks. React uses sophisticated techniques in its internal implementation, like priority queues and multiple buffering. But you won't see those concepts anywhere in our public APIs.
+
+When we design APIs, we try to hide implementation details from developers. As a React developer, you focus on *what* you want the user experience to look like, and React handles *how* to deliver that experience. So we don’t expect React developers to know how concurrency works under the hood.
+
+However, Concurrent React is more important than a typical implementation detail — it's a foundational update to React's core rendering model. So while it's not super important to know how concurrency works, it may be worth knowing what it is at a high level.
+
+A key property of Concurrent React is that rendering is interruptible. When you first upgrade to React 18, before adding any concurrent features, updates are rendered the same as in previous versions of React — in a single, uninterrupted, synchronous transaction. With synchronous rendering, once an update starts rendering, nothing can interrupt it until the user can see the result on screen.
+
+In a concurrent render, this is not always the case. React may start rendering an update, pause in the middle, then continue later. It may even abandon an in-progress render altogether. React guarantees that the UI will appear consistent even if a render is interrupted. To do this, it waits to perform DOM mutations until the end, once the entire tree has been evaluated. With this capability, React can prepare new screens in the background without blocking the main thread. This means the UI can respond immediately to user input even if it’s in the middle of a large rendering task, creating a fluid user experience.
+
+Another example is reusable state. Concurrent React can remove sections of the UI from the screen, then add them back later while reusing the previous state. For example, when a user tabs away from a screen and back, React should be able to restore the previous screen in the same state it was in before. In an upcoming minor, we're planning to add a new component called `<Offscreen>` that implements this pattern. Similarly, you’ll be able to use Offscreen to prepare new UI in the background so that it’s ready before the user reveals it.
+
+Concurrent rendering is a powerful new tool in React and most of our new features are built to take advantage of it, including Suspense, transitions, and streaming server rendering. But React 18 is just the beginning of what we aim to build on this new foundation.
+
+## Gradually Adopting Concurrent Features {#gradually-adopting-concurrent-features}
+
+Technically, concurrent rendering is a breaking change. Because concurrent rendering is interruptible, components behave slightly differently when it is enabled.
+
+In our testing, we've upgraded thousands of components to React 18. What we've found is that nearly all existing components "just work" with concurrent rendering, without any changes. However, some of them may require some additional migration effort. Although the changes are usually small, you'll still have the ability to make them at your own pace. The new rendering behavior in React 18 is **only enabled in the parts of your app that use new features.**
+
+The overall upgrade strategy is to get your application running on React 18 without breaking existing code. Then you can gradually start adding concurrent features at your own pace. You can use [`<StrictMode>`](/docs/strict-mode.html) to help surface concurrency-related bugs during development. Strict Mode doesn't affect production behavior, but during development it will log extra warnings and double-invoke functions that are expected to be idempotent. It won't catch everything, but it's effective at preventing the most common types of mistakes.
+
+After you upgrade to React 18, you’ll be able to start using concurrent features immediately. For example, you can use startTransition to navigate between screens without blocking user input. Or useDeferredValue to throttle expensive re-renders.
+
+However, long term, we expect the main way you’ll add concurrency to your app is by using a concurrent-enabled library or framework. In most cases, you won’t interact with concurrent APIs directly. For example, instead of developers calling startTransition whenever they navigate to a new screen, router libraries will automatically wrap navigations in startTransition.
+
+It may take some time for libraries to upgrade to be concurrent compatible. We’ve provided new APIs to make it easier for libraries to take advantage of concurrent features. In the meantime, please be patient with maintainers as we work to gradually migrate the React ecosystem.
+
+For more info, see our previous post: [How to upgrade to React 18](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html).
+
+## Suspense in Data Frameworks {#suspense-in-data-frameworks}
+
+In React 18, you can start using Suspense for data fetching in opinionated frameworks like Relay, Next.js, Hydrogen, or Remix. Ad hoc data fetching with Suspense is technically possible, but still not recommended as a general strategy.
+
+In the future, we may expose additional primitives that could make it easier to access your data with Suspense, perhaps without the use of an opinionated framework. However, Suspense works best when it’s deeply integrated into your application’s architecture: your router, your data layer, and your server rendering environment. So even long term, we expect that libraries and frameworks will play a crucial role in the React ecosystem.
+
+As in previous versions of React, you can also use Suspense for code splitting on the client with React.lazy. But our vision for Suspense has always been about much more than loading code — the goal is to extend support for Suspense so that eventually, the same declarative Suspense fallback can handle any asynchronous operation (loading code, data, images, etc).
+
+## Server Components is Still in Development {#server-components-is-still-in-development}
+
+[**Server Components**](https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html) is an upcoming feature that allows developers to build apps that span the server and client, combining the rich interactivity of client-side apps with the improved performance of traditional server rendering. Server Components is not inherently coupled to Concurrent React, but it’s designed to work best with concurrent features like Suspense and streaming server rendering.
+
+Server Components is still experimental, but we expect to release an initial version in a minor 18.x release. In the meantime, we’re working with frameworks like Next.js, Hydrogen, and Remix to advance the proposal and get it ready for broad adoption.
+
+## What's New in React 18 {#whats-new-in-react-18}
+
+### New Feature: Automatic Batching {#new-feature-automatic-batching}
+
+Batching is when React groups multiple state updates into a single re-render for better performance. Without automatic batching, we only batched updates inside React event handlers. Updates inside of promises, setTimeout, native event handlers, or any other event were not batched in React by default. With automatic batching, these updates will be batched automatically:
+
+
+```js
+// Before: only React events were batched.
+setTimeout(() => {
+  setCount(c => c + 1);
+  setFlag(f => !f);
+  // React will render twice, once for each state update (no batching)
+}, 1000);
+
+// After: updates inside of timeouts, promises,
+// native event handlers or any other event are batched.
+setTimeout(() => {
+  setCount(c => c + 1);
+  setFlag(f => !f);
+  // React will only re-render once at the end (that's batching!)
+}, 1000);
+```
+
+For more info, see this post for [Automatic batching for fewer renders in React 18](https://github.com/reactwg/react-18/discussions/21).
+
+### New Feature: Transitions {#new-feature-transitions}
+
+A transition is a new concept in React to distinguish between urgent and non-urgent updates.
+
+* **Urgent updates** reflect direct interaction, like typing, clicking, pressing, and so on.
+* **Transition updates** transition the UI from one view to another.
+
+Urgent updates like typing, clicking, or pressing, need immediate response to match our intuitions about how physical objects behave. Otherwise they feel "wrong". However, transitions are different because the user doesn’t expect to see every intermediate value on screen.
+
+For example, when you select a filter in a dropdown, you expect the filter button itself to respond immediately when you click. However, the actual results may transition separately. A small delay would be imperceptible and often expected. And if you change the filter again before the results are done rendering, you only care to see the latest results.
+
+Typically, for the best user experience, a single user input should result in both an urgent update and a non-urgent one. You can use startTransition API inside an input event to inform React which updates are urgent and which are "transitions":
+
+
+```js
+import {startTransition} from 'react';
+
+// Urgent: Show what was typed
+setInputValue(input);
+
+// Mark any state updates inside as transitions
+startTransition(() => {
+  // Transition: Show the results
+  setSearchQuery(input);
+});
+```
+
+
+Updates wrapped in startTransition are handled as non-urgent and will be interrupted if more urgent updates like clicks or key presses come in. If a transition gets interrupted by the user (for example, by typing multiple characters in a row), React will throw out the stale rendering work that wasn’t finished and render only the latest update.
+
+
+* `useTransition`: a hook to start transitions, including a value to track the pending state.
+* `startTransition`: a method to start transitions when the hook cannot be used.
+
+Transitions will opt in to concurrent rendering, which allows the update to be interrupted. If the content re-suspends, transitions also tell React to continue showing the current content while rendering the transition content in the background (see the [Suspense RFC](https://github.com/reactjs/rfcs/blob/main/text/0213-suspense-in-react-18.md) for more info).
+
+[See docs for transitions here](/docs/react-api.html#transitions).
+
+### New Suspense Features {#new-suspense-features}
+
+Suspense lets you declaratively specify the loading state for a part of the component tree if it's not yet ready to be displayed:
+
+```js
+<Suspense fallback={<Spinner />}>
+  <Comments />
+</Suspense>
+```
+
+Suspense makes the "UI loading state" a first-class declarative concept in the React programming model. This lets us build higher-level features on top of it.
+
+We introduced a limited version of Suspense several years ago. However, the only supported use case was code splitting with React.lazy, and it wasn't supported at all when rendering on the server.
+
+In React 18, we've added support for Suspense on the server and expanded its capabilities using concurrent rendering features.
+
+Suspense in React 18 works best when combined with the transition API. If you suspend during a transition, React will prevent already-visible content from being replaced by a fallback. Instead, React will delay the render until enough data has loaded to prevent a bad loading state.
+
+For more, see the RFC for [Suspense in React 18](https://github.com/reactjs/rfcs/blob/main/text/0213-suspense-in-react-18.md).
+
+### New Client and Server Rendering APIs {#new-client-and-server-rendering-apis}
+
+In this release we took the opportunity to redesign the APIs we expose for rendering on the client and server. These changes allow users to continue using the old APIs in React 17 mode while they upgrade to the new APIs in React 18.
+
+#### React DOM Client {#react-dom-client}
+
+These new APIs are now exported from `react-dom/client`:
+
+* `createRoot`: New method to create a root to `render` or `unmount`. Use it instead of `ReactDOM.render`. New features in React 18 don't work without it.
+* `hydrateRoot`: New method to hydrate a server rendered application. Use it instead of  `ReactDOM.hydrate` in conjunction with the new React DOM Server APIs. New features in React 18 don't work without it.
+
+Both `createRoot` and `hydrateRoot` accept a new option called `onRecoverableError` in case you want to be notified when React recovers from errors during rendering or hydration for logging. By default, React will use [`reportError`](https://developer.mozilla.org/en-US/docs/Web/API/reportError), or `console.error` in the older browsers.
+
+[See docs for React DOM Client here](/docs/react-dom-client.html).
+
+#### React DOM Server {#react-dom-server}
+
+These new APIs are now exported from `react-dom/server` and have full support for streaming Suspense on the server:
+
+* `renderToPipeableStream`: for streaming in Node environments.
+* `renderToReadableStream`: for modern edge runtime environments, such as Deno and Cloudflare workers.
+
+The existing `renderToString` method keeps working but is discouraged.
+
+[See docs for React DOM Server here](/docs/react-dom-server.html).
+
+### New Strict Mode Behaviors {#new-strict-mode-behaviors}
+
+In the future, we’d like to add a feature that allows React to add and remove sections of the UI while preserving state. For example, when a user tabs away from a screen and back, React should be able to immediately show the previous screen. To do this, React would unmount and remount trees using the same component state as before.
+
+This feature will give React apps better performance out-of-the-box, but requires components to be resilient to effects being mounted and destroyed multiple times. Most effects will work without any changes, but some effects assume they are only mounted or destroyed once.
+
+To help surface these issues, React 18 introduces a new development-only check to Strict Mode. This new check will automatically unmount and remount every component, whenever a component mounts for the first time, restoring the previous state on the second mount.
+
+Before this change, React would mount the component and create the effects:
+
+```
+* React mounts the component.
+  * Layout effects are created.
+  * Effects are created.
+```
+
+
+With Strict Mode in React 18, React will simulate unmounting and remounting the component in development mode:
+
+```
+* React mounts the component.
+  * Layout effects are created.
+  * Effects are created.
+* React simulates unmounting the component.
+  * Layout effects are destroyed.
+  * Effects are destroyed.
+* React simulates mounting the component with the previous state.
+  * Layout effects are created.
+  * Effects are created.
+```
+
+[See docs for ensuring reusable state here](/docs/strict-mode.html#ensuring-reusable-state).
+
+### New Hooks {#new-hooks}
+
+#### useId {#useid}
+
+`useId` is a new hook for generating unique IDs on both the client and server, while avoiding hydration mismatches. It is primarily useful for component libraries integrating with accessibility APIs that require unique IDs. This solves an issue that already exists in React 17 and below, but it's even more important in React 18 because of how the new streaming server renderer delivers HTML out-of-order. [See docs here](/docs/hooks-reference.html#useid).
+
+> Note
+>
+> `useId` is **not** for generating [keys in a list](/docs/lists-and-keys.html#keys). Keys should be generated from your data.
+
+#### useTransition {#usetransition}
+
+`useTransition` and `startTransition` let you mark some state updates as not urgent. Other state updates are considered urgent by default. React will allow urgent state updates (for example, updating a text input) to interrupt non-urgent state updates (for example, rendering a list of search results). [See docs here](/docs/hooks-reference.html#usetransition)
+
+#### useDeferredValue {#usedeferredvalue}
+
+`useDeferredValue` lets you defer re-rendering a non-urgent part of the tree. It is similar to debouncing, but has a few advantages compared to it. There is no fixed time delay, so React will attempt the deferred render right after the first render is reflected on the screen. The deferred render is interruptible and doesn't block user input. [See docs here](/docs/hooks-reference.html#usedeferredvalue).
+
+#### useSyncExternalStore {#usesyncexternalstore}
+
+`useSyncExternalStore` is a new hook that allows external stores to support concurrent reads by forcing updates to the store to be synchronous. It removes the need for useEffect when implementing subscriptions to external data sources, and is recommended for any library that integrates with state external to React. [See docs here](/docs/hooks-reference.html#usesyncexternalstore).
+
+> Note
+>
+> `useSyncExternalStore` is intended to be used by libraries, not application code.
+
+#### useInsertionEffect {#useinsertioneffect}
+
+`useInsertionEffect` is a new hook that allows CSS-in-JS libraries to address performance issues of injecting styles in render. Unless you’ve already built a CSS-in-JS library we don’t expect you to ever use this. This hook will run after the DOM is mutated, but before layout effects read the new layout. This solves an issue that already exists in React 17 and below, but is even more important in React 18 because React yields to the browser during concurrent rendering, giving it a chance to recalculate layout. [See docs here](/docs/hooks-reference.html#useinsertioneffect).
+
+> Note
+>
+> `useInsertionEffect` is intended to be used by libraries, not application code.
+
+## How to Upgrade {#how-to-upgrade}
+
+See [How to Upgrade to React 18](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html) for step-by-step instructions and a full list of breaking and notable changes.
+
+## Changelog {#changelog}
+
+### React {#react}
+
+* Add `useTransition` and `useDeferredValue` to separate urgent updates from transitions. ([#10426](https://github.com/facebook/react/pull/10426), [#10715](https://github.com/facebook/react/pull/10715), [#15593](https://github.com/facebook/react/pull/15593), [#15272](https://github.com/facebook/react/pull/15272), [#15578](https://github.com/facebook/react/pull/15578), [#15769](https://github.com/facebook/react/pull/15769), [#17058](https://github.com/facebook/react/pull/17058), [#18796](https://github.com/facebook/react/pull/18796), [#19121](https://github.com/facebook/react/pull/19121), [#19703](https://github.com/facebook/react/pull/19703), [#19719](https://github.com/facebook/react/pull/19719), [#19724](https://github.com/facebook/react/pull/19724), [#20672](https://github.com/facebook/react/pull/20672), [#20976](https://github.com/facebook/react/pull/20976) by [@acdlite](https://github.com/acdlite), [@lunaruan](https://github.com/lunaruan), [@rickhanlonii](https://github.com/rickhanlonii), and [@sebmarkbage](https://github.com/sebmarkbage))
+* Add `useId` for generating unique IDs. ([#17322](https://github.com/facebook/react/pull/17322), [#18576](https://github.com/facebook/react/pull/18576), [#22644](https://github.com/facebook/react/pull/22644), [#22672](https://github.com/facebook/react/pull/22672), [#21260](https://github.com/facebook/react/pull/21260) by [@acdlite](https://github.com/acdlite), [@lunaruan](https://github.com/lunaruan), and [@sebmarkbage](https://github.com/sebmarkbage))
+* Add `useSyncExternalStore` to help external store libraries integrate with React. ([#15022](https://github.com/facebook/react/pull/15022), [#18000](https://github.com/facebook/react/pull/18000), [#18771](https://github.com/facebook/react/pull/18771), [#22211](https://github.com/facebook/react/pull/22211), [#22292](https://github.com/facebook/react/pull/22292), [#22239](https://github.com/facebook/react/pull/22239), [#22347](https://github.com/facebook/react/pull/22347), [#23150](https://github.com/facebook/react/pull/23150) by [@acdlite](https://github.com/acdlite), [@bvaughn](https://github.com/bvaughn), and [@drarmstr](https://github.com/drarmstr))
+* Add `startTransition` as a version of `useTransition` without pending feedback. ([#19696](https://github.com/facebook/react/pull/19696)  by [@rickhanlonii](https://github.com/rickhanlonii))
+* Add `useInsertionEffect` for CSS-in-JS libraries. ([#21913](https://github.com/facebook/react/pull/21913)  by [@rickhanlonii](https://github.com/rickhanlonii))
+* Make Suspense remount layout effects when content reappears.  ([#19322](https://github.com/facebook/react/pull/19322), [#19374](https://github.com/facebook/react/pull/19374), [#19523](https://github.com/facebook/react/pull/19523), [#20625](https://github.com/facebook/react/pull/20625), [#21079](https://github.com/facebook/react/pull/21079) by [@acdlite](https://github.com/acdlite), [@bvaughn](https://github.com/bvaughn), and [@lunaruan](https://github.com/lunaruan))
+* Make `<StrictMode>` re-run effects to check for restorable state. ([#19523](https://github.com/facebook/react/pull/19523) , [#21418](https://github.com/facebook/react/pull/21418)  by [@bvaughn](https://github.com/bvaughn) and [@lunaruan](https://github.com/lunaruan))
+* Assume Symbols are always available. ([#23348](https://github.com/facebook/react/pull/23348)  by [@sebmarkbage](https://github.com/sebmarkbage))
+* Remove `object-assign` polyfill. ([#23351](https://github.com/facebook/react/pull/23351)  by [@sebmarkbage](https://github.com/sebmarkbage))
+* Remove unsupported `unstable_changedBits` API.  ([#20953](https://github.com/facebook/react/pull/20953)  by [@acdlite](https://github.com/acdlite))
+* Allow components to render undefined. ([#21869](https://github.com/facebook/react/pull/21869)  by [@rickhanlonii](https://github.com/rickhanlonii))
+* Flush `useEffect` resulting from discrete events like clicks synchronously. ([#21150](https://github.com/facebook/react/pull/21150)  by [@acdlite](https://github.com/acdlite))
+* Suspense `fallback={undefined}` now behaves the same as `null` and isn't ignored. ([#21854](https://github.com/facebook/react/pull/21854)  by [@rickhanlonii](https://github.com/rickhanlonii))
+* Consider all `lazy()` resolving to the same component equivalent. ([#20357](https://github.com/facebook/react/pull/20357)  by [@sebmarkbage](https://github.com/sebmarkbage))
+* Don't patch console during first render. ([#22308](https://github.com/facebook/react/pull/22308)  by [@lunaruan](https://github.com/lunaruan))
+* Improve memory usage. ([#21039](https://github.com/facebook/react/pull/21039)  by [@bgirard](https://github.com/bgirard))
+* Improve messages if string coercion throws (Temporal.*, Symbol, etc.) ([#22064](https://github.com/facebook/react/pull/22064)  by [@justingrant](https://github.com/justingrant))
+* Use `setImmediate` when available over `MessageChannel`. ([#20834](https://github.com/facebook/react/pull/20834)  by [@gaearon](https://github.com/gaearon))
+* Fix context failing to propagate inside suspended trees. ([#23095](https://github.com/facebook/react/pull/23095)  by [@gaearon](https://github.com/gaearon))
+* Fix `useReducer` observing incorrect props by removing the eager bailout mechanism. ([#22445](https://github.com/facebook/react/pull/22445)  by [@josephsavona](https://github.com/josephsavona))
+* Fix `setState` being ignored in Safari when appending iframes. ([#23111](https://github.com/facebook/react/pull/23111)  by [@gaearon](https://github.com/gaearon))
+* Fix a crash when rendering `ZonedDateTime` in the tree. ([#20617](https://github.com/facebook/react/pull/20617)  by [@dimaqq](https://github.com/dimaqq))
+* Fix a crash when document is set to `null` in tests. ([#22695](https://github.com/facebook/react/pull/22695)  by [@SimenB](https://github.com/SimenB))
+* Fix `onLoad` not triggering when concurrent features are on. ([#23316](https://github.com/facebook/react/pull/23316)  by [@gnoff](https://github.com/gnoff))
+* Fix a warning when a selector returns `NaN`.  ([#23333](https://github.com/facebook/react/pull/23333)  by [@hachibeeDI](https://github.com/hachibeeDI))
+* Fix a crash when document is set to `null` in tests. ([#22695](https://github.com/facebook/react/pull/22695) by [@SimenB](https://github.com/SimenB))
+* Fix the generated license header. ([#23004](https://github.com/facebook/react/pull/23004)  by [@vitaliemiron](https://github.com/vitaliemiron))
+* Add `package.json` as one of the entry points. ([#22954](https://github.com/facebook/react/pull/22954)  by [@Jack](https://github.com/Jack-Works))
+* Allow suspending outside a Suspense boundary. ([#23267](https://github.com/facebook/react/pull/23267)  by [@acdlite](https://github.com/acdlite))
+* Log a recoverable error whenever hydration fails. ([#23319](https://github.com/facebook/react/pull/23319)  by [@acdlite](https://github.com/acdlite))
+
+### React DOM {#react-dom}
+
+* Add `createRoot` and `hydrateRoot`. ([#10239](https://github.com/facebook/react/pull/10239), [#11225](https://github.com/facebook/react/pull/11225), [#12117](https://github.com/facebook/react/pull/12117), [#13732](https://github.com/facebook/react/pull/13732), [#15502](https://github.com/facebook/react/pull/15502), [#15532](https://github.com/facebook/react/pull/15532), [#17035](https://github.com/facebook/react/pull/17035), [#17165](https://github.com/facebook/react/pull/17165), [#20669](https://github.com/facebook/react/pull/20669), [#20748](https://github.com/facebook/react/pull/20748), [#20888](https://github.com/facebook/react/pull/20888), [#21072](https://github.com/facebook/react/pull/21072), [#21417](https://github.com/facebook/react/pull/21417), [#21652](https://github.com/facebook/react/pull/21652), [#21687](https://github.com/facebook/react/pull/21687), [#23207](https://github.com/facebook/react/pull/23207), [#23385](https://github.com/facebook/react/pull/23385) by [@acdlite](https://github.com/acdlite), [@bvaughn](https://github.com/bvaughn), [@gaearon](https://github.com/gaearon), [@lunaruan](https://github.com/lunaruan), [@rickhanlonii](https://github.com/rickhanlonii), [@trueadm](https://github.com/trueadm), and [@sebmarkbage](https://github.com/sebmarkbage))
+* Add selective hydration. ([#14717](https://github.com/facebook/react/pull/14717), [#14884](https://github.com/facebook/react/pull/14884), [#16725](https://github.com/facebook/react/pull/16725), [#16880](https://github.com/facebook/react/pull/16880), [#17004](https://github.com/facebook/react/pull/17004), [#22416](https://github.com/facebook/react/pull/22416), [#22629](https://github.com/facebook/react/pull/22629), [#22448](https://github.com/facebook/react/pull/22448), [#22856](https://github.com/facebook/react/pull/22856), [#23176](https://github.com/facebook/react/pull/23176) by [@acdlite](https://github.com/acdlite), [@gaearon](https://github.com/gaearon), [@salazarm](https://github.com/salazarm), and [@sebmarkbage](https://github.com/sebmarkbage))
+* Add `aria-description` to the list of known ARIA attributes. ([#22142](https://github.com/facebook/react/pull/22142)  by [@mahyareb](https://github.com/mahyareb))
+* Add `onResize` event to video elements. ([#21973](https://github.com/facebook/react/pull/21973)  by [@rileyjshaw](https://github.com/rileyjshaw))
+* Add `imageSizes` and `imageSrcSet` to known props. ([#22550](https://github.com/facebook/react/pull/22550)  by [@eps1lon](https://github.com/eps1lon))
+* Allow non-string `<option>` children if `value` is provided.  ([#21431](https://github.com/facebook/react/pull/21431)  by [@sebmarkbage](https://github.com/sebmarkbage))
+* Fix `aspectRatio` style not being applied. ([#21100](https://github.com/facebook/react/pull/21100)  by [@gaearon](https://github.com/gaearon))
+* Warn if `renderSubtreeIntoContainer` is called. ([#23355](https://github.com/facebook/react/pull/23355)  by [@acdlite](https://github.com/acdlite))
+
+### React DOM Server {#react-dom-server-1}
+
+* Add the new streaming renderer. ([#14144](https://github.com/facebook/react/pull/14144), [#20970](https://github.com/facebook/react/pull/20970), [#21056](https://github.com/facebook/react/pull/21056), [#21255](https://github.com/facebook/react/pull/21255), [#21200](https://github.com/facebook/react/pull/21200), [#21257](https://github.com/facebook/react/pull/21257), [#21276](https://github.com/facebook/react/pull/21276), [#22443](https://github.com/facebook/react/pull/22443), [#22450](https://github.com/facebook/react/pull/22450), [#23247](https://github.com/facebook/react/pull/23247), [#24025](https://github.com/facebook/react/pull/24025), [#24030](https://github.com/facebook/react/pull/24030) by [@sebmarkbage](https://github.com/sebmarkbage))
+* Fix context providers in SSR when handling multiple requests. ([#23171](https://github.com/facebook/react/pull/23171)  by [@frandiox](https://github.com/frandiox))
+* Revert to client render on text mismatch. ([#23354](https://github.com/facebook/react/pull/23354)  by [@acdlite](https://github.com/acdlite))
+* Deprecate `renderToNodeStream`. ([#23359](https://github.com/facebook/react/pull/23359)  by [@sebmarkbage](https://github.com/sebmarkbage))
+* Fix a spurious error log in the new server renderer. ([#24043](https://github.com/facebook/react/pull/24043)  by [@eps1lon](https://github.com/eps1lon))
+* Fix a bug in the new server renderer. ([#22617](https://github.com/facebook/react/pull/22617)  by [@shuding](https://github.com/shuding))
+* Ignore function and symbol values inside custom elements on the server. ([#21157](https://github.com/facebook/react/pull/21157)  by [@sebmarkbage](https://github.com/sebmarkbage))
+
+### React DOM Test Utils {#react-dom-test-utils}
+
+* Throw when `act` is used in production. ([#21686](https://github.com/facebook/react/pull/21686)  by [@acdlite](https://github.com/acdlite))
+* Support disabling spurious act warnings with `global.IS_REACT_ACT_ENVIRONMENT`. ([#22561](https://github.com/facebook/react/pull/22561)  by [@acdlite](https://github.com/acdlite))
+* Expand act warning to cover all APIs that might schedule React work. ([#22607](https://github.com/facebook/react/pull/22607)  by [@acdlite](https://github.com/acdlite))
+* Make `act` batch updates. ([#21797](https://github.com/facebook/react/pull/21797)  by [@acdlite](https://github.com/acdlite))
+* Remove warning for dangling passive effects. ([#22609](https://github.com/facebook/react/pull/22609)  by [@acdlite](https://github.com/acdlite))
+
+### React Refresh {#react-refresh}
+
+* Track late-mounted roots in Fast Refresh. ([#22740](https://github.com/facebook/react/pull/22740)  by [@anc95](https://github.com/anc95))
+* Add `exports` field to `package.json`. ([#23087](https://github.com/facebook/react/pull/23087)  by [@otakustay](https://github.com/otakustay))
+
+### Server Components (Experimental) {#server-components-experimental}
+
+* Add Server Context support. ([#23244](https://github.com/facebook/react/pull/23244)  by [@salazarm](https://github.com/salazarm))
+* Add `lazy` support. ([#24068](https://github.com/facebook/react/pull/24068)  by [@gnoff](https://github.com/gnoff))
+* Update webpack plugin for webpack 5 ([#22739](https://github.com/facebook/react/pull/22739)  by [@michenly](https://github.com/michenly))
+* Fix a mistake in the Node loader. ([#22537](https://github.com/facebook/react/pull/22537)  by [@btea](https://github.com/btea))
+* Use `globalThis` instead of `window` for edge environments. ([#22777](https://github.com/facebook/react/pull/22777)  by [@huozhi](https://github.com/huozhi))
+
diff --git a/content/blog/2022-06-15-react-labs-what-we-have-been-working-on-june-2022.md b/content/blog/2022-06-15-react-labs-what-we-have-been-working-on-june-2022.md
new file mode 100644
index 000000000..110c51c46
--- /dev/null
+++ b/content/blog/2022-06-15-react-labs-what-we-have-been-working-on-june-2022.md
@@ -0,0 +1,70 @@
+---
+title: "React Labs: What We've Been Working On – June 2022"
+author: [acdlite,gaearon,kassens,josephsavona,joshcstory,laurentan,lunaruan,mengdichen,rickhanlonii,robertzhang,gsathya,sebmarkbage,huxpro]
+---
+
+[React 18](https://reactjs.org/blog/2022/03/29/react-v18.html) was years in the making, and with it brought valuable lessons for the React team. Its release was the result of many years of research and exploring many paths. Some of those paths were successful; many more were dead-ends that led to new insights. One lesson we’ve learned is that it’s frustrating for the community to wait for new features without having insight into these paths that we’re exploring.
+
+We typically have a number of projects being worked on at any time, ranging from the more experimental to the clearly defined. Looking ahead, we’d like to start regularly sharing more about what we’ve been working on with the community across these projects.
+
+To set expectations, this is not a roadmap with clear timelines. Many of these projects are under active research and are difficult to put concrete ship dates on. They may possibly never even ship in their current iteration depending on what we learn. Instead, we want to share with you the problem spaces we’re actively thinking about, and what we’ve learned so far.
+
+## Server Components {#server-components}
+
+We announced an [experimental demo of React Server Components](https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html) (RSC) in December 2020. Since then we’ve been finishing up its dependencies in React 18, and working on changes inspired by experimental feedback.
+
+In particular, we’re abandoning the idea of having forked I/O libraries (eg react-fetch), and instead adopting an async/await model for better compatibility. This doesn’t technically block RSC’s release because you can also use routers for data fetching. Another change is that we’re also moving away from the file extension approach in favor of [annotating boundaries](https://github.com/reactjs/rfcs/pull/189#issuecomment-1116482278).
+
+We’re working together with Vercel and Shopify to unify bundler support for shared semantics in both Webpack and Vite. Before launch, we want to make sure that the semantics of RSCs are the same across the whole React ecosystem. This is the major blocker for reaching stable.
+
+## Asset Loading {#asset-loading}
+
+Currently, assets like scripts, external styles, fonts, and images are typically preloaded and loaded using external systems. This can make it tricky to coordinate across new environments like streaming, server components, and more.
+We’re looking at adding APIs to preload and load deduplicated external assets through React APIs that work in all React environments.
+
+We’re also looking at having these support Suspense so you can have images, CSS, and fonts that block display until they’re loaded but don’t block streaming and concurrent rendering. This can help avoid [“popcorning“](https://twitter.com/sebmarkbage/status/1516852731251724293) as the visuals pop and layout shifts.
+
+## Static Server Rendering Optimizations {#static-server-rendering-optimizations}
+
+Static Site Generation (SSG) and Incremental Static Regeneration (ISR) are great ways to get performance for cacheable pages, but we think we can add features to improve performance of dynamic Server Side Rendering (SSR) – especially when most but not all of the content is cacheable. We're exploring ways to optimize server rendering utilizing compilation and static passes.
+
+## React Optimizing Compiler {#react-compiler}
+
+We gave an [early preview](https://www.youtube.com/watch?v=lGEMwh32soc) of React Forget at React Conf 2021. It’s a compiler that automatically generates the equivalent of `useMemo` and `useCallback` calls to minimize the cost of re-rendering, while retaining React’s programming model.
+
+Recently, we finished a rewrite of the compiler to make it more reliable and capable. This new architecture allows us to analyze and memoize more complex patterns such as the use of [local mutations](https://beta.reactjs.org/learn/keeping-components-pure#local-mutation-your-components-little-secret), and opens up many new compile-time optimization opportunities beyond just being on par with memoization hooks.
+
+We’re also working on a playground for exploring many aspects of the compiler. While the goal of the playground is to make development of the compiler easier, we think that it will make it easier to try it out and build intuition for what the compiler does. It reveals various insights into how it works under the hood, and live renders the compiler’s outputs as you type. This will be shipped together with the compiler when it’s released.
+
+## Offscreen {#offscreen}
+
+Today, if you want to hide and show a component, you have two options. One is to add or remove it from the tree completely. The problem with this approach is that the state of your UI is lost each time you unmount, including state stored in the DOM, like scroll position.
+
+The other option is to keep the component mounted and toggle the appearance visually using CSS. This preserves the state of your UI, but it comes at a performance cost, because React must keep rendering the hidden component and all of its children whenever it receives new updates.
+
+Offscreen introduces a third option: hide the UI visually, but deprioritize its content. The idea is similar in spirit to the `content-visibility` CSS property: when content is hidden, it doesn't need to stay in sync with the rest of the UI. React can defer the rendering work until the rest of the app is idle, or until the content becomes visible again.
+
+Offscreen is a low level capability that unlocks high level features. Similar to React's other concurrent features like `startTransition`, in most cases you won't interact with the Offscreen API directly, but instead via an opinionated framework to implement patterns like:
+
+* **Instant transitions.** Some routing frameworks already prefetch data to speed up subsequent navigations, like when hovering over a link. With Offscreen, they'll also be able to prerender the next screen in the background.
+* **Reusable state.** Similarly, when navigating between routes or tabs, you can use Offscreen to preserve the state of the previous screen so you can switch back and pick up where you left off.
+* **Virtualized list rendering.** When displaying large lists of items, virtualized list frameworks will prerender more rows than are currently visible. You can use Offscreen to prerender the hidden rows at a lower priority than the visible items in the list.
+* **Backgrounded content.** We're also exploring a related feature for deprioritizing content in the background without hiding it, like when displaying a modal overlay.
+
+## Transition Tracing {#transition-tracing}
+
+Currently, React has two profiling tools. The [original Profiler](https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html) shows an overview of all the commits in a profiling session. For each commit, it also shows all components that rendered and the amount of time it took for them to render. We also have a beta version of a [Timeline Profiler](https://github.com/reactwg/react-18/discussions/76) introduced in React 18 that shows when components schedule updates and when React works on these updates. Both of these profilers help developers identify performance problems in their code.
+
+We’ve realized that developers don’t find knowing about individual slow commits or components out of context that useful. It’s more useful to know about what actually causes the slow commits. And that developers want to be able to track specific interactions (eg a button click, an initial load, or a page navigation) to watch for performance regressions and to understand why an interaction was slow and how to fix it.
+
+We previously tried to solve this issue by creating an [Interaction Tracing API](https://gist.github.com/bvaughn/8de925562903afd2e7a12554adcdda16), but it had some fundamental design flaws that reduced the accuracy of tracking why an interaction was slow and sometimes resulted in interactions never ending. We ended up [removing this API](https://github.com/facebook/react/pull/20037) because of these issues.
+
+We are working on a new version for the Interaction Tracing API (tentatively called Transition Tracing because it is initiated via `startTransition`) that solves these problems.
+
+## New React Docs {#new-react-docs}
+
+Last year, we announced the [beta version](https://beta.reactjs.org/) of the new React documentation website. The new learning materials teach Hooks first and has new diagrams, illustrations, as well as many interactive examples and challenges. We took a break from that work to focus on the React 18 release, but now that React 18 is out, we’re actively working to finish and ship the new documentation.
+
+We are currently writing a detailed section about effects, as we’ve heard that is one of the more challenging topics for both new and experienced React users. [Synchronizing with Effects](https://beta.reactjs.org/learn/synchronizing-with-effects) is the first published page in the series, and there are more to come in the following weeks. When we first started writing a detailed section about effects, we’ve realized that many common effect patterns can be simplified by adding a new primitive to React. We’ve shared some initial thoughts on that in the [useEvent RFC](https://github.com/reactjs/rfcs/pull/220). It is currently in early research, and we are still iterating on the idea. We appreciate the community’s comments on the RFC so far, as well as the [feedback](https://github.com/reactjs/reactjs.org/issues/3308) and contributions to the ongoing documentation rewrite. We’d specifically like to thank [Harish Kumar](https://github.com/harish-sethuraman) for submitting and reviewing many improvements to the new website implementation.
+
+*Thanks to [Sophie Alpert](https://twitter.com/sophiebits) for reviewing this blog post!*
diff --git a/content/community/conferences.md b/content/community/conferences.md
index 27fc9c0b6..455e932da 100644
--- a/content/community/conferences.md
+++ b/content/community/conferences.md
@@ -12,22 +12,200 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c
 
 ## Upcoming Conferences {#upcoming-conferences}
 
-### render(ATL) 2021 {#render-atlanta-2021} 
-September 13-15, 2021. Atlanta, GA, USA
+### React Global Online Summit 22.2 by Geekle {#react-global-v2-2022}
+November 8 - 9, 2022 - Online Summit
 
-[Website](https://renderatl.com) - [Twitter](https://twitter.com/renderATL) - [Instagram](https://www.instagram.com/renderatl/) - [Facebook](https://www.facebook.com/renderatl/) - [LinkedIn](https://www.linkedin.com/company/renderatl)
+[Website](https://events.geekle.us/react3/) - [LinkedIn](https://www.linkedin.com/posts/geekle-us_event-react-reactjs-activity-6964904611207864320-gpDx?utm_source=share&utm_medium=member_desktop)
 
-### React Advanced 2021 {#react-advanced-2021}
-October 22-23, 2021. In-person in London, UK + remote (hybrid event)
+### Remix Conf Europe 2022 {#remixconfeu-2022}
+November 18, 2022, 7am PST / 10am EST / 4pm CET - remote event
 
-[Website](https://reactadvanced.com) - [Twitter](http://twitter.com/reactadvanced) - [Facebook](https://www.facebook.com/ReactAdvanced) - [Videos](https://youtube.com/c/ReactConferences)
+[Website](https://remixconf.eu/) - [Twitter](https://twitter.com/remixconfeu)
+
+### React Day Berlin 2022 {#react-day-berlin-2022}
+December 2, 2022. In-person in Berlin, Germany + remote (hybrid event)
+
+[Website](https://reactday.berlin) - [Twitter](https://twitter.com/reactdayberlin) - [Facebook](https://www.facebook.com/reactdayberlin/) - [Videos](https://www.youtube.com/c/ReactConferences)
+
+### RemixConf 2023 {#remixconf-2023}
+May, 2023. Salt Lake City, UT
+
+[Website](https://remix.run/conf/2023) - [Twitter](https://twitter.com/remix_run)
+
+### App.js Conf 2023 {#appjs-conf-2023}
+May 10 - 12, 2023. In-person in Kraków, Poland + remote
+
+[Website](https://appjs.co) - [Twitter](https://twitter.com/appjsconf)
+
+### Render(ATL) 2023 🍑 {#render-atlanta-2023} 
+May 31 - June 2, 2023. Atlanta, GA, USA
+
+[Website](https://renderatl.com) - [Discord](https://www.renderatl.com/discord) - [Twitter](https://twitter.com/renderATL) - [Instagram](https://www.instagram.com/renderatl/) - [Facebook](https://www.facebook.com/renderatl/) - [LinkedIn](https://www.linkedin.com/company/renderatl) - [Podcast](https://www.renderatl.com/culture-and-code#/)
+
+### React Summit 2023 {#react-summit-2023}
+June 2 & 6, 2023. In-person in Amsterdam, Netherlands + remote first interactivity (hybrid event)
+
+[Website](https://reactsummit.com) - [Twitter](https://twitter.com/reactsummit) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://youtube.com/c/ReactConferences)
+
+### ReactNext 2023 {#reactnext}
+June 27th, 2023. Tel Aviv, Israel
+
+[Website](https://www.react-next.com/) - [Facebook](https://www.facebook.com/ReactNextConf) - [Youtube](https://www.youtube.com/@ReactNext)
+
+## Past Conferences {#past-conferences}
+
+### React Advanced 2022 {#react-advanced-2022}
+October 21 & 25, 2022. In-person in London, UK + remote (hybrid event)
+
+[Website](https://www.reactadvanced.com/) - [Twitter](https://twitter.com/ReactAdvanced) - [Facebook](https://www.facebook.com/ReactAdvanced) - [Videos](https://www.youtube.com/c/ReactConferences)
+
+### ReactJS Day 2022 {#reactjs-day-2022}
+October 21, 2022 in Verona, Italy
+
+[Website](https://2022.reactjsday.it/) - [Twitter](https://twitter.com/reactjsday) - [LinkedIn](https://www.linkedin.com/company/grusp/) - [Facebook](https://www.facebook.com/reactjsday/) - [Videos](https://www.youtube.com/c/grusp)
+
+### React Brussels 2022 {#react-brussels-2022} 
+October 14, 2022. In-person in Brussels, Belgium + remote (hybrid event)
+
+[Website](https://www.react.brussels/) - [Twitter](https://twitter.com/BrusselsReact) - [LinkedIn](https://www.linkedin.com/events/6938421827153088512/) - [Facebook](https://www.facebook.com/events/1289080838167252/) - [Videos](https://www.youtube.com/channel/UCvES7lMpnx-t934qGxD4w4g)
+
+### React Alicante 2022 {#react-alicante-2022}
+September 29 - October 1, 2022. In-person in Alicante, Spain + remote (hybrid event)
+
+[Website](https://reactalicante.es/) - [Twitter](https://twitter.com/reactalicante) - [Facebook](https://www.facebook.com/ReactAlicante) - [Videos](https://www.youtube.com/channel/UCaSdUaITU1Cz6PvC97A7e0w)
+### React India 2022 {#react-india-2022}
+September 22 - 24, 2022. In-person in Goa, India + remote (hybrid event)
+
+[Website](https://www.reactindia.io) - [Twitter](https://twitter.com/react_india) - [Facebook](https://www.facebook.com/ReactJSIndia) - [Videos](https://www.youtube.com/channel/UCaFbHCBkPvVv1bWs_jwYt3w)
+
+### React Finland 2022 {#react-finland-2022}
+September 12 - 16, 2022. In-person in Helsinki, Finland
+
+[Website](https://react-finland.fi/) - [Twitter](https://twitter.com/ReactFinland) - [Schedule](https://react-finland.fi/schedule/) - [Speakers](https://react-finland.fi/speakers/)
+
+### React Native EU 2022: Powered by {callstack} {#react-native-eu-2022-powered-by-callstack}
+September 1-2, 2022 - Remote event
+
+[Website](https://www.react-native.eu/?utm_campaign=React_Native_EU&utm_source=referral&utm_content=reactjs_community_conferences) -
+[Twitter](https://twitter.com/react_native_eu) -
+[Linkedin](https://www.linkedin.com/showcase/react-native-eu) -
+[Facebook](https://www.facebook.com/reactnativeeu/) - 
+[Instagram](https://www.instagram.com/reactnative_eu/)
+
+### ReactNext 2022 {#react-next-2022}
+June 28, 2022. Tel-Aviv, Israel
+
+[Website](https://react-next.com) - [Twitter](https://twitter.com/ReactNext) - [Videos](https://www.youtube.com/c/ReactNext)
+
+### React Norway 2022 {#react-norway-2022}
+June 24, 2022. In-person at Farris Bad Hotel in Larvik, Norway and online (hybrid event).
+
+[Website](https://reactnorway.com/) - [Twitter](https://twitter.com/ReactNorway)
+
+### React Summit 2022 {#react-summit-2022}
+June 17 & 21, 2022. In-person in Amsterdam, Netherlands + remote first interactivity (hybrid event)
+
+[Website](https://reactsummit.com) - [Twitter](https://twitter.com/reactsummit) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://youtube.com/c/ReactConferences)
+
+### App.js Conf 2022 {#appjs-conf-2022}
+June 8 - 10, 2022. In-person in Kraków, Poland + remote
+
+[Website](https://appjs.co) - [Twitter](https://twitter.com/appjsconf)
+
+### React Day Bangalore 2022 {#reactday-bangalore-2022}
+June 8 - 9, 2022.  Remote
+
+[Website](https://reactday.in/) - [Twitter](https://twitter.com/ReactDayIn) - [Linkedin](https://www.linkedin.com/company/react-day/) - [YouTube](https://www.youtube.com/reactify_in)
+
+### render(ATL) 2022 🍑 {#render-atlanta-2022} 
+June 1 - 4, 2022. Atlanta, GA, USA
+
+[Website](https://renderatl.com) - [Discord](https://www.renderatl.com/discord) - [Twitter](https://twitter.com/renderATL) - [Instagram](https://www.instagram.com/renderatl/) - [Facebook](https://www.facebook.com/renderatl/) - [LinkedIn](https://www.linkedin.com/company/renderatl) - [Podcast](https://www.renderatl.com/culture-and-code#/)
+
+### RemixConf 2022 {#remixconf-2022}
+May 24 - 25, 2022. Salt Lake City, UT
+
+[Website](https://remix.run/conf/2022) - [Twitter](https://twitter.com/remix_run) - [YouTube](https://www.youtube.com/playlist?list=PLXoynULbYuEC36XutMMWEuTu9uuh171wx)
+
+### Reactathon 2022 {#reactathon-2022} 
+May 3 - 5, 2022. Berkeley, CA
+
+[Website](https://reactathon.com) - [Twitter](https://twitter.com/reactathon) -[YouTube](https://www.youtube.com/watch?v=-YG5cljNXIA)
+
+### < React Global > Online Summit 2022 by Geekle {#react-global-2022}
+April 20 - 21, 2022 - Online Summit
+
+[Website](https://events.geekle.us/react2/) - [LinkedIn](https://www.linkedin.com/events/reactglobalonlinesummit-226887417664541614081/)
+
+### React Miami 2022 🌴 {#react-miami-2022}
+April 18 - 19, 2022. Miami, Florida
+[Website](https://www.reactmiami.com/)
+
+### React Live 2022 {#react-live-2022}
+April 1, 2022. Amsterdam, The Netherlands
+
+[Website](https://www.reactlive.nl/) - [Twitter](https://twitter.com/reactlivenl)
+
+### AgentConf 2022 {#agent-conf-2022} 
+
+January 27 - 30, 2022. In-person in Dornbirn and Lech Austria
+
+[Website](https://agent.sh/) - [Twitter](https://twitter.com/AgentConf) - [Instagram](https://www.instagram.com/teamagent/)
+
+### React Conf 2021 {#react-conf-2021}
+December 8, 2021 - remote event (replay event on December 9)
+
+[Website](https://conf.reactjs.org/)
+
+### ReactEurope 2021 {#reacteurope-2021}
+December 9-10, 2021 - remote event
+
+[Videos](https://www.youtube.com/c/ReacteuropeOrgConf)
+
+### ReactNext 2021 {#react-next-2021}
+December 15, 2021. Tel-Aviv, Israel
+
+[Website](https://react-next.com) - [Twitter](https://twitter.com/ReactNext) - [Videos](https://www.youtube.com/channel/UC3BT8hh3yTTYxbLQy_wbk2w)
 
 ### React India 2021 {#react-india-2021}
-November 12-13, 2021 in Mumbai, India
+November 12-13, 2021 - remote event
 
 [Website](https://www.reactindia.io) - [Twitter](https://twitter.com/react_india) - [Facebook](https://www.facebook.com/ReactJSIndia/) - [LinkedIn](https://www.linkedin.com/showcase/14545585) - [YouTube](https://www.youtube.com/channel/UCaFbHCBkPvVv1bWs_jwYt3w/videos)
 
-## Past Conferences {#past-conferences}
+### < React Global > by Geekle {#react-global-2021}
+November 3-4, 2021 - remote event
+
+[Website](https://geekle.us/react) - [LinkedIn](https://www.linkedin.com/events/javascriptglobalsummit6721691514176720896/) - [YouTube](https://www.youtube.com/watch?v=0HhWIvPhbu0)
+
+### React Advanced 2021 {#react-advanced-2021}
+October 22-23, 2021. In-person in London, UK + remote (hybrid event)
+
+[Website](https://reactadvanced.com) - [Twitter](https://twitter.com/reactadvanced) - [Facebook](https://www.facebook.com/ReactAdvanced) - [Videos](https://youtube.com/c/ReactConferences)
+
+### React Conf Brasil 2021 {#react-conf-brasil-2021}
+October 16, 2021 - remote event
+
+[Website](http://reactconf.com.br) - [Twitter](https://twitter.com/reactconfbr) - [Slack](https://react.now.sh) - [Facebook](https://facebook.com/reactconf) - [Instagram](https://instagram.com/reactconfbr) - [YouTube](https://www.youtube.com/channel/UCJL5eorStQfC0x1iiWhvqPA/videos)
+
+### React Brussels 2021 {#react-brussels-2021} 
+October 15, 2021 - remote event
+
+[Website](https://www.react.brussels/) - [Twitter](https://twitter.com/BrusselsReact) - [LinkedIn](https://www.linkedin.com/events/6805708233819336704/)
+
+### render(ATL) 2021 {#render-atlanta-2021} 
+September 13-15, 2021. Atlanta, GA, USA
+
+[Website](https://renderatl.com) - [Twitter](https://twitter.com/renderATL) - [Instagram](https://www.instagram.com/renderatl/) - [Facebook](https://www.facebook.com/renderatl/) - [LinkedIn](https://www.linkedin.com/company/renderatl)
+
+### React Native EU 2021 {#react-native-eu-2021}
+September 1-2, 2021 - remote event
+
+[Website](https://www.react-native.eu/) - [Twitter](https://twitter.com/react_native_eu) - [Facebook](https://www.facebook.com/reactnativeeu/) - [Instagram](https://www.instagram.com/reactnative_eu/)
+
+### React Finland 2021 {#react-finland-2021} 
+August 30 - September 3, 2021 - remote event
+
+[Website](https://react-finland.fi/) - [Twitter](https://twitter.com/ReactFinland) - [LinkedIn](https://www.linkedin.com/company/react-finland/)
 
 ### React Case Study Festival 2021 {#react-case-study-festival-2021}
 April 27-28, 2021 - remote event
@@ -67,7 +245,7 @@ September 3-4, 2020 - remote event
 ### ReactEurope 2020 {#reacteurope-2020}
 May 14-15, 2020 in Paris, France
 
-[Website](https://www.react-europe.org) - [Twitter](https://twitter.com/ReactEurope) - [Facebook](https://www.facebook.com/ReactEurope) - [Videos](https://www.youtube.com/c/ReacteuropeOrgConf)
+[Videos](https://www.youtube.com/c/ReacteuropeOrgConf)
 
 ### Byteconf React 2020 {#byteconf-react-2020}
 May 1, 2020. Streamed online on YouTube.
@@ -192,7 +370,7 @@ May 25, 2019 in Yerevan, Armenia
 ### ReactEurope 2019 {#reacteurope-2019}
 May 23-24, 2019 in Paris, France
 
-[Website](https://www.react-europe.org) - [Twitter](https://twitter.com/ReactEurope) - [Facebook](https://www.facebook.com/ReactEurope) - [Videos](https://www.youtube.com/c/ReacteuropeOrgConf)
+[Videos](https://www.youtube.com/c/ReacteuropeOrgConf)
 
 ### <React.NotAConf /> 2019 {#reactnotaconf--2019}
 May 11 in Sofia, Bulgaria
@@ -303,7 +481,7 @@ May 26 in Mumbai, India
 ### ReactEurope 2018 {#reacteurope-2018}
 May 17-18 in Paris, France
 
-[Website](https://www.react-europe.org) - [Twitter](https://twitter.com/ReactEurope) - [Facebook](https://www.facebook.com/ReactEurope)
+[Videos](https://www.youtube.com/c/ReacteuropeOrgConf)
 
 ### <React.NotAConf /> 2018 {#reactnotaconf--2018}
 April 28 in Sofia, Bulgaria
@@ -418,7 +596,7 @@ July 10-11 in Portland, Oregon USA
 ### ReactEurope 2017 {#reacteurope-2017}
 May 18th & 19th in Paris, France
 
-[Website](http://www.react-europe.org/) - [Schedule](http://www.react-europe.org/#schedule) - [Videos](https://www.youtube.com/channel/UCorlLn2oZfgOJ-FUcF2eZ1A/playlists)
+[Videos](https://www.youtube.com/c/ReacteuropeOrgConf)
 
 ### React Amsterdam 2017 {#react-amsterdam-2017}
 April 21st in Amsterdam, The Netherlands
@@ -468,7 +646,7 @@ August 25-26 in Salt Lake City, UT
 ### ReactEurope 2016 {#reacteurope-2016}
 June 2 & 3 in Paris, France
 
-[Website](http://www.react-europe.org/) - [Schedule](http://www.react-europe.org/#schedule) - [Videos](https://www.youtube.com/channel/UCorlLn2oZfgOJ-FUcF2eZ1A/playlists)
+[Videos](https://www.youtube.com/c/ReacteuropeOrgConf)
 
 ### React Amsterdam 2016 {#react-amsterdam-2016}
 April 16 in Amsterdam, The Netherlands
@@ -488,7 +666,7 @@ November 2-4 in Bratislava, Slovakia
 ### ReactEurope 2015 {#reacteurope-2015}
 July 2 & 3 in Paris, France
 
-[Website](http://www.react-europe.org/) - [Schedule](http://www.react-europe.org/#schedule) - [Videos](https://www.youtube.com/channel/UCorlLn2oZfgOJ-FUcF2eZ1A/playlists)
+[Videos](https://www.youtube.com/c/ReacteuropeOrgConf)
 
 ### React.js Conf 2015 {#reactjs-conf-2015}
 January 28 & 29 in Facebook HQ, CA
diff --git a/content/community/courses.md b/content/community/courses.md
index 1a9e66e5a..7e532bbd1 100644
--- a/content/community/courses.md
+++ b/content/community/courses.md
@@ -24,8 +24,13 @@ permalink: community/courses.html
 
 - [Scrimba: Learn React for free](https://scrimba.com/g/glearnreact) - 48 hands-on video tutorials building react apps.
 
+- [University of Helsinki: Full Stack Open MOOC](https://fullstackopen.com/en/) - Learn to build web applications with React. Available in English, Spanish, Chinese and Finnish.
+
+
 ## Paid Courses {#paid-courses}
 
+- [Meta Front-End Developer Professional Certificate](https://www.coursera.org/professional-certificates/meta-front-end-developer) - Launch your career as a front-end developer. Build job-ready skills for an in-demand career and earn a credential from Meta. No degree or prior experience required to get started.
+
 - [Egghead.io](https://egghead.io/browse/frameworks/react) - Short instructional videos on React and many other topics.
 
 - [Frontend Masters](https://frontendmasters.com/learn/react/) - Video courses on React.
@@ -44,7 +49,7 @@ permalink: community/courses.html
 
 - [React Training: Advanced React.js](https://courses.reacttraining.com/p/advanced-react) - Take your React skills to the next level.
 
-- [Tyler McGinnis](https://tylermcginnis.com/courses) - Tyler McGinnis provides access to his courses for a monthly fee. Courses include "React Fundamentals" and "Universal React".
+- [Tyler McGinnis](https://ui.dev/) - Tyler McGinnis provides access to his courses for a monthly fee. Courses include "React Fundamentals" and "Universal React".
 
 - [Mastering React](https://codewithmosh.com/p/mastering-react/) - Build professional interactive apps with React.
 
diff --git a/content/community/meetups.md b/content/community/meetups.md
index 8403d6d8a..c969bbe90 100644
--- a/content/community/meetups.md
+++ b/content/community/meetups.md
@@ -65,9 +65,13 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
 * [Aalborg](https://www.meetup.com/Aalborg-React-React-Native-Meetup/)
 * [Aarhus](https://www.meetup.com/Aarhus-ReactJS-Meetup/)
 
+## Egypt {#egypt}
+* [Cairo](https://www.meetup.com/react-cairo/)
+
 ## England (UK) {#england-uk}
 * [Manchester](https://www.meetup.com/Manchester-React-User-Group/)
 * [React.JS Girls London](https://www.meetup.com/ReactJS-Girls-London/)
+* [React London : Bring Your Own Project](https://www.meetup.com/React-London-Bring-Your-Own-Project/)
 
 ## France {#france}
 * [Nantes](https://www.meetup.com/React-Nantes/)
@@ -111,6 +115,9 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
 ## Italy {#italy}
 * [Milan](https://www.meetup.com/React-JS-Milano/)
 
+## Kenya {#kenya}
+* [Nairobi - Reactdevske](https://kommunity.com/reactjs-developer-community-kenya-reactdevske)
+
 ## Malaysia {#malaysia}
 * [Kuala Lumpur](https://www.kl-react.com/)
 * [Penang](https://www.facebook.com/groups/reactpenang/)
@@ -141,6 +148,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
 
 ## Poland {#poland}
 * [Warsaw](https://www.meetup.com/React-js-Warsaw/)
+* [Wrocław](https://www.meetup.com/ReactJS-Wroclaw/)
 
 ## Portugal {#portugal}
 * [Lisbon](https://www.meetup.com/JavaScript-Lisbon/)
@@ -148,15 +156,13 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
 ## Scotland (UK) {#scotland-uk}
 * [Edinburgh](https://www.meetup.com/React-Scotland/)
 
-## Singapore {#singapore}
-* [Singapore - React Knowledgeable](https://reactknowledgeable.org/)
-
 ## Spain {#spain}
 * [Barcelona](https://www.meetup.com/ReactJS-Barcelona/)
 * [Canarias](https://www.meetup.com/React-Canarias/)
 
 ## Sweden {#sweden}
 * [Goteborg](https://www.meetup.com/ReactJS-Goteborg/)
+* [Stockholm](https://www.meetup.com/Stockholm-ReactJS-Meetup/)
 
 ## Switzerland {#switzerland}
 * [Zurich](https://www.meetup.com/Zurich-ReactJS-Meetup/)
@@ -181,6 +187,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
 * [Dallas, TX - ReactJS](https://www.meetup.com/ReactDallas/)
 * [Dallas, TX - [Remote] React JS](https://www.meetup.com/React-JS-Group/)
 * [Detroit, MI - Detroit React User Group](https://www.meetup.com/Detroit-React-User-Group/)
+* [Indianapolis, IN - React.Indy](https://www.meetup.com/React-Indy)
 * [Irvine, CA - ReactJS](https://www.meetup.com/ReactJS-OC/)
 * [Kansas City, MO - ReactJS](https://www.meetup.com/Kansas-City-React-Meetup/)
 * [Las Vegas, NV - ReactJS](https://www.meetup.com/ReactVegas/)
@@ -193,6 +200,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
 * [New York, NY - React Ladies](https://www.meetup.com/React-Ladies/)
 * [New York, NY - React Native](https://www.meetup.com/React-Native-NYC/)
 * [New York, NY - useReactNYC](https://www.meetup.com/useReactNYC/)
+* [Omaha, NE - ReactJS/React Native](https://www.meetup.com/omaha-react-meetup-group/)
 * [Palo Alto, CA - React Native](https://www.meetup.com/React-Native-Silicon-Valley/)
 * [Philadelphia, PA - ReactJS](https://www.meetup.com/Reactadelphia/)
 * [Phoenix, AZ - ReactJS](https://www.meetup.com/ReactJS-Phoenix/)
diff --git a/content/community/podcasts.md b/content/community/podcasts.md
index 55fca0abb..012caa315 100644
--- a/content/community/podcasts.md
+++ b/content/community/podcasts.md
@@ -20,6 +20,8 @@ Podcasts dedicated to React and individual podcast episodes with React discussio
 
 - [React Wednesdays](https://www.telerik.com/react-wednesdays) - Weekly live streams with the best and brightest in the React world
 
+- [The React Native Show](https://callstack.com/podcast-react-native-show) - Discuss everything React Native, hosted by [Callstack](https://callstack.com/?utm_campaign=Podcast&utm_source=reactjs_org&utm_medium=community_podcasts)
+
 ## Episodes {#episodes}
 
 - [CodeWinds Episode 4](https://codewinds.com/podcast/004.html) - Pete Hunt talks with Jeff Barczewski about React.
diff --git a/content/community/support.md b/content/community/support.md
index cb31a529b..e6ec00f64 100644
--- a/content/community/support.md
+++ b/content/community/support.md
@@ -12,7 +12,7 @@ React has a community of millions of developers.
 
 On this page we've listed some React-related communities that you can be a part of; see the other pages in this section for additional online and in-person learning materials.
 
-Before participating in React's communities, [please read our Code of Conduct](https://github.com/facebook/react/blob/master/CODE_OF_CONDUCT.md). We have adopted the [Contributor Covenant](https://www.contributor-covenant.org/) and we expect that all community members adhere to the guidelines within.
+Before participating in React's communities, [please read our Code of Conduct](https://github.com/facebook/react/blob/main/CODE_OF_CONDUCT.md). We have adopted the [Contributor Covenant](https://www.contributor-covenant.org/) and we expect that all community members adhere to the guidelines within.
 
 ## Stack Overflow {#stack-overflow}
 
@@ -28,7 +28,6 @@ Each community consists of many thousands of React users.
 * [Hashnode's React community](https://hashnode.com/n/reactjs)
 * [Reactiflux online chat](https://discord.gg/reactiflux)
 * [Reddit's React community](https://www.reddit.com/r/reactjs/)
-* [Spectrum's React community](https://spectrum.chat/react)
 
 ## News {#news}
 
diff --git a/content/community/team.md b/content/community/team.md
index 096341d1b..acd38b590 100644
--- a/content/community/team.md
+++ b/content/community/team.md
@@ -6,7 +6,7 @@ sectionid: community
 permalink: community/team.html
 ---
 
-React development is led by a small dedicated team working full time at Facebook. It also receives contributions from people all over the world.
+React development is led by a small dedicated team working full time at Meta. It also receives contributions from people all over the world.
 
 ## Meet the React Team {#meet-the-react-team}
 
@@ -22,14 +22,6 @@ Current members of the React team are listed in alphabetical order below.
 
 Andrew got started with web development by making sites with WordPress, and eventually tricked himself into doing JavaScript. His favorite pastime is karaoke. Andrew is either a Disney villain or a Disney princess, depending on the day.
 
-### Brian Vaughn {#brian-vaughn}
-
-![Brian Vaughn](../images/team/bvaughn.jpg)
-
-[@bvaughn on GitHub](https://github.com/bvaughn) &middot; [@brian\_d\_vaughn on Twitter](https://twitter.com/brian_d_vaughn)
-
-Brian studied art in college and did programming on the side to pay for his education. Eventually, he realized that he enjoys working on open source. Brian has one [one-person band](https://soundcloud.com/brianvaughn/) and two [two-person](https://soundcloud.com/pilotlessdrone) [bands](https://soundcloud.com/pinwurm). He also takes care of the cutest cat in the world.
-
 ### Dan Abramov {#dan-abramov}
 
 ![Dan Abramov](../images/team/gaearon.jpg)
@@ -38,6 +30,36 @@ Brian studied art in college and did programming on the side to pay for his educ
 
 Dan got into programming after he accidentally discovered Visual Basic inside Microsoft PowerPoint. He has found his true calling in turning [Sebastian](#sebastian-markbage)'s tweets into long-form blog posts. Dan occasionally wins at Fortnite by hiding in a bush until the game ends.
 
+### Jason Bonta {#jason-bonta}
+
+![Jason Bonta](../images/team/jasonbonta.jpg)
+
+Jason likes having large volumes of Amazon packages delivered to the office so that he can build forts. Despite literally walling himself off from his team at times and not understanding how for-of loops work, we appreciate him for the unique qualities he brings to his work. 
+
+### Joe Savona {#joe-savona}
+
+![Joe Savona](../images/team/joe.jpg)
+
+[@josephsavona on GitHub](https://github.com/josephsavona) &middot; [@en_JS on Twitter](https://twitter.com/en_JS)
+
+Joe was planning to major in math and philosophy but got into computer science after writing physics simulations in Matlab. Prior to React, he worked on Relay, RSocket.js, and the Skip programming language. While he’s not building some sort of reactive system he enjoys running, studying Japanese, and spending time with his family.
+
+### Josh Story {#josh-story}
+
+![Josh Story](../images/team/josh.jpg)
+
+[@gnoff on GitHub](https://github.com/gnoff) &middot; [@joshcstory on Twitter](https://twitter.com/joshcstory)
+
+Josh majored in Mathematics and discovered programming while in college. His first professional developer job was to program insurance rate calculations in Microsoft Excel, the paragon of Reactive Programming which must be why he now works on React. In between that time Josh has been an IC, Manager, and Executive at a few startups. outside of work he likes to push his limits with cooking.
+
+### Lauren Tan {#lauren-tan}
+
+![Lauren](../images/team/lauren.jpg)
+
+[@poteto on GitHub](https://github.com/poteto) &middot; [@potetotes on Twitter](https://twitter.com/potetotes)
+
+Lauren’s programming career peaked when she first discovered the `<marquee>` tag. She’s been chasing that high ever since. When she’s not adding bugs into React, she enjoys dropping cheeky memes in chat, and playing all too many video games with her partner, and her dog Zelda.
+
 ### Luna Ruan {#luna-ruan}
 
 ![Luna](../images/team/lunaruan.jpg)
@@ -46,13 +68,13 @@ Dan got into programming after he accidentally discovered Visual Basic inside Mi
 
 Luna learned programming because she thought it meant creating video games. Instead, she ended up working on the Pinterest web app, and now on React itself. Luna doesn't want to make video games anymore, but she plans to do creative writing if she ever gets bored.
 
-### Rachel Nabors {#rachel-nabors}
+### Mofei Zhang {#mofei-zhang}
 
-![Rachel](../images/team/rnabors.jpg)
+![Mofei](../images/team/mofei-zhang.png)
 
-[@rachelnabors on GitHub](https://github.com/rachelnabors) &middot; [@rachelnabors on Twitter](https://twitter.com/rachelnabors)
+[@mofeiZ on GitHub](https://github.com/mofeiZ)]
 
-Rachel wrote a [book about UI animation](https://abookapart.com/products/animation-at-work) once and worked with MDN and the W3C on the web animations API. Now she is busy with education materials and community engineering on the React team. Secretly, she is an award-winning cartoonist for teenage girls. Catch her making fancy tea with lukewarm water in the microkitchen.
+Mofei started programming when she realized it can help her cheat in video games. She focused on operating systems in undergrad / grad school, but now finds herself happily tinkering on React. Outside of work, she enjoys debugging bouldering problems and planning her next backpacking trip(s).
 
 ### Rick Hanlon {#rick-hanlon}
 
@@ -62,6 +84,22 @@ Rachel wrote a [book about UI animation](https://abookapart.com/products/animati
 
 Ricky majored in theoretical math and somehow found himself on the React Native team for a couple years before joining the React team. When he's not programming you can find him snowboarding, biking, climbing, golfing, or closing GitHub issues that do not match the issue template.
 
+### Samuel Susla {#samuel-susla}
+
+![Samuel Susla](../images/team/sam.jpg)
+
+[@sammy-SC on GitHub](https://github.com/sammy-SC) &middot; [@SamuelSusla on Twitter](https://twitter.com/SamuelSusla)
+
+Samuel’s interest in programming started with the movie Matrix. He still has Matrix screen saver. Before working on React, he was focused on writing iOS apps. Outside of work, Samuel enjoys playing beach volleyball, squash, badminton and spending time with his family.
+
+### Sathya Gunasekaran {#sathya-gunasekaran}
+
+![Sathya Gunasekaran](../images/team/sathya.jpg)
+
+[@gsathya on GitHub](https://github.com/gsathya) &middot; [@_gsathya on Twitter](https://twitter.com/_gsathya)
+
+Sathya hated the Dragon Book in school but somehow ended up working on compilers all his career. When he's not compiling React components, he's either drinking coffee or eating yet another Dosa.
+
 ### Sebastian Markbåge {#sebastian-markbage}
 
 ![Sebastian](../images/team/sebmarkbage.jpg)
@@ -70,14 +108,46 @@ Ricky majored in theoretical math and somehow found himself on the React Native
 
 Sebastian majored in psychology. He's usually quiet. Even when he says something, it often doesn't make sense to the rest of us until a few months later. The correct way to pronounce his surname is "mark-boa-geh" but he settled for "mark-beige" out of pragmatism -- and that's how he approaches React.
 
+### Sebastian Silbermann {#sebastian-silbermann}
+
+![Sebastian Silbermann](../images/team/sebsilbermann.jpg)
+
+[@eps1lon on GitHub](https://github.com/eps1lon) &middot; [@sebsilbermann on Twitter](https://twitter.com/sebsilbermann)
+
+Sebastian learned programming to make the browser games he played during class more enjoyable. Eventually this lead to contributing to as much open source code as possible. Outside of coding he's busy making sure people don't confuse him with the other Sebastians and Zilberman of the React community.
+
 ### Seth Webster {#seth-webster}
 
-![Seth](../images/team/sethwebster.jpg)
+![Seth](../images/team/seth.jpg)
 
 [@sethwebster on GitHub](https://github.com/sethwebster) &middot; [@sethwebster on Twitter](https://twitter.com/sethwebster)
 
 Seth started programming as a kid growing up in Tucson, AZ. After school, he was bitten by the music bug and was a touring musician for about 10 years before returning to *work*, starting with Intuit. In his spare time, he loves [taking pictures](https://www.sethwebster.com) and flying for animal rescues in the northeastern United States.
 
+### Sophie Alpert {#sophie-alpert}
+
+![Sophie](../images/team/sophiebits.jpg)
+
+[@sophiebits on GitHub](https://github.com/sophiebits) &middot; [@sophiebits on Twitter](https://twitter.com/sophiebits)
+
+Four days after React was released, Sophie rewrote the entirety of her then-current project to use it, which she now realizes was perhaps a bit reckless. After she became the project's #1 committer, she wondered why she wasn't getting paid by Facebook like everyone else was and joined the team officially to lead React through its adolescent years. Though she quit that job years ago, somehow she's still in the team's group chats and “providing value”.
+
+### Tianyu Yao {#tianyu-yao}
+
+![Tianyu Yao](../images/team/tianyu.jpg)
+
+[@tyao1 on GitHub](https://github.com/tyao1) &middot; [@tianyu0 on Twitter](https://twitter.com/tianyu0)
+
+Tianyu’s interest in computers started as a kid because he loves video games. So he majored in computer science and still plays childish games like League of Legends. When he is not in front of a computer, he enjoys playing with his two kittens, hiking and kayaking.
+
+### Yuzhi Zheng {#yuzhi-zheng}
+
+![Yuzhi](../images/team/yuzhi.jpg)
+
+[@yuzhi on GitHub](https://github.com/yuzhi) &middot; [@yuzhiz on Twitter](https://twitter.com/yuzhiz)
+
+Yuzhi studied Computer Science in school. She liked the instant gratification of seeing code come to life without having to physically be in a laboratory. Now she’s a manager in the React org. Before management, she used to work on the Relay data fetching framework. In her spare time, Yuzhi enjoys optimizing her life via gardening and home improvement projects.
+
 ## Acknowledgements {#acknowledgements}
 
 React was originally created by [Jordan Walke](https://github.com/jordwalke). Today, React has over a thousand open source contributors. We'd like to recognize a few people who have made significant contributions to React and its documentation in the past and have helped maintain them over the years:
@@ -87,6 +157,7 @@ React was originally created by [Jordan Walke](https://github.com/jordwalke). To
 * [Alex Krolick](https://github.com/alexkrolick)
 * [Alexey Pyltsyn](https://github.com/lex111)
 * [Brandon Dail](https://github.com/aweary)
+* [Brian Vaughn](https://github.com/bvaughn)
 * [Caleb Meredith](https://github.com/calebmer)
 * [Chang Yan](https://github.com/cyan33)
 * [Cheng Lou](https://github.com/chenglou)
@@ -103,20 +174,22 @@ React was originally created by [Jordan Walke](https://github.com/jordwalke). To
 * [Joe Critchley](https://github.com/joecritch)
 * [Jeff Morrison](https://github.com/jeffmo)
 * [Keyan Zhang](https://github.com/keyz)
+* [Marco Salazar](https://github.com/salazarm)
 * [Nat Alison](https://github.com/tesseralis)
 * [Nathan Hunzaker](https://github.com/nhunzaker)
 * [Nicolas Gallagher](https://github.com/necolas)
 * [Paul O'Shannessy](https://github.com/zpao)
 * [Pete Hunt](https://github.com/petehunt)
 * [Philipp Spiess](https://github.com/philipp-spiess)
+* [Rachel Nabors](https://github.com/rachelnabors)
+* [Robert Zhang](https://github.com/robertzhidealx)
 * [Sander Spies](https://github.com/sanderspies)
 * [Sasha Aickin](https://github.com/aickin)
 * [Sophia Shoemaker](https://github.com/mrscobbler)
-* [Sophie Alpert](https://github.com/sophiebits)
 * [Sunil Pai](https://github.com/threepointone)
 * [Tim Yung](https://github.com/yungsters)
-* [Yuzhi Zheng](https://github.com/yuzhi)
+* [Xuan Huang](https://github.com/huxpro)
 
 This list is not exhaustive.
 
-We'd like to give special thanks to [Tom Occhino](https://github.com/tomocchino) and [Adam Wolff](https://github.com/wolffiex) for their guidance and support over the years. We'd also like to thank all the volunteers who [translated React into other languages](https://isreacttranslatedyet.com/).
+We'd like to give special thanks to [Tom Occhino](https://github.com/tomocchino) and [Adam Wolff](https://github.com/wolffiex) for their guidance and support over the years. We'd also like to thank all the volunteers who [translated React into other languages](https://translations.reactjs.org/).
diff --git a/content/community/videos.md b/content/community/videos.md
index b59ddfb98..d0c99e4da 100644
--- a/content/community/videos.md
+++ b/content/community/videos.md
@@ -10,6 +10,11 @@ redirect_from:
 
 Videos dedicated to the discussion of React and the React ecosystem.
 
+### React Conf 2021 {#react-conf-2021}
+
+A playlist of videos from React Conf 2021.
+<iframe title="React Conf 2021" width="650" height="366" src="https://www.youtube-nocookie.com/embed/videoseries?list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa" frameborder="0" allowfullscreen></iframe>
+
 ### React Conf 2019 {#react-conf-2019}
 
 A playlist of videos from React Conf 2019.
diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index 19878166a..6f0e93281 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -226,7 +226,7 @@ class Parent extends React.Component {
 this.inputElement.current.focus();
 ```
 
-When using a HOC to extend components, it is recommended to [forward the ref](/docs/forwarding-refs.html) to the wrapped component using the `forwardRef` function of React. If a third party HOC does not implement ref forwarding, the above pattern can still be used as a fallback.
+When using a [HOC](/docs/higher-order-components.html) to extend components, it is recommended to [forward the ref](/docs/forwarding-refs.html) to the wrapped component using the `forwardRef` function of React. If a third party HOC does not implement ref forwarding, the above pattern can still be used as a fallback.
 
 A great focus management example is the [react-aria-modal](https://github.com/davidtheclark/react-aria-modal). This is a relatively rare example of a fully accessible modal window. Not only does it set initial focus on
 the cancel button (preventing the keyboard user from accidentally activating the success action) and trap keyboard focus inside the modal, it also resets focus back to the element that initially triggered the modal.
@@ -376,7 +376,7 @@ These are toolboxes filled with HTML attributes that are fully supported in JSX
 
 Each type of widget has a specific design pattern and is expected to function in a certain way by users and user agents alike:
 
-- [WAI-ARIA Authoring Practices - Design Patterns and Widgets](https://www.w3.org/TR/wai-aria-practices/#aria_ex)
+- [ARIA Authoring Practices Guide (APG) - Design Patterns and Examples](https://www.w3.org/WAI/ARIA/apg/patterns/)
 - [Heydon Pickering - ARIA Examples](https://heydonworks.com/article/practical-aria-examples/)
 - [Inclusive Components](https://inclusive-components.design/)
 
@@ -404,7 +404,7 @@ Ensure that all readable text on your website has sufficient color contrast to r
 - [Everything About Color Contrast And Why You Should Rethink It](https://www.smashingmagazine.com/2014/10/color-contrast-tips-and-tools-for-accessibility/)
 - [A11yProject - What is Color Contrast](https://a11yproject.com/posts/what-is-color-contrast/)
 
-It can be tedious to manually calculate the proper color combinations for all cases in your website so instead, you can [calculate an entire accessible color palette with Colorable](https://jxnblk.com/colorable/).
+It can be tedious to manually calculate the proper color combinations for all cases in your website so instead, you can [calculate an entire accessible color palette with Colorable](https://colorable.jxnblk.com/).
 
 Both the aXe and WAVE tools mentioned below also include color contrast tests and will report on contrast errors.
 
@@ -454,7 +454,7 @@ Deque Systems offers [aXe-core](https://github.com/dequelabs/axe-core) for autom
 
 [The Accessibility Engine](https://www.deque.com/products/axe/) or aXe, is an accessibility inspector browser extension built on `aXe-core`.
 
-You can also use the [react-axe](https://github.com/dylanb/react-axe) module to report these accessibility findings directly to the console while developing and debugging.
+You can also use the [@axe-core/react](https://github.com/dequelabs/axe-core-npm/tree/develop/packages/react) module to report these accessibility findings directly to the console while developing and debugging.
 
 #### WebAIM WAVE {#webaim-wave}
 
diff --git a/content/docs/add-react-to-a-website.md b/content/docs/add-react-to-a-website.md
index f314928b4..d842556f5 100644
--- a/content/docs/add-react-to-a-website.md
+++ b/content/docs/add-react-to-a-website.md
@@ -25,7 +25,7 @@ In this section, we will show how to add a React component to an existing HTML p
 
 There will be no complicated tools or install requirements -- **to complete this section, you only need an internet connection, and a minute of your time.**
 
-Optional: [Download the full example (2KB zipped)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip)
+Optional: [Download the full example (2KB zipped)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/87f0b6f34238595b44308acfb86df6ea43669c08.zip)
 
 ### Step 1: Add a DOM Container to the HTML {#step-1-add-a-dom-container-to-the-html}
 
@@ -54,8 +54,8 @@ Next, add three `<script>` tags to the HTML page right before the closing `</bod
 
   <!-- Load React. -->
   <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
-  <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
-  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
+  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
+  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
 
   <!-- Load our React component. -->
   <script src="like_button.js"></script>
@@ -75,16 +75,17 @@ Open **[this starter code](https://gist.github.com/gaearon/0b180827c190fe4fd98b4
 >
 >This code defines a React component called `LikeButton`. Don't worry if you don't understand it yet -- we'll cover the building blocks of React later in our [hands-on tutorial](/tutorial/tutorial.html) and [main concepts guide](/docs/hello-world.html). For now, let's just get it showing on the screen!
 
-After **[the starter code](https://gist.github.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)**, add two lines to the bottom of `like_button.js`:
+After **[the starter code](https://gist.github.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)**, add three lines to the bottom of `like_button.js`:
 
-```js{3,4}
+```js{3,4,5}
 // ... the starter code you pasted ...
 
 const domContainer = document.querySelector('#like_button_container');
-ReactDOM.render(e(LikeButton), domContainer);
+const root = ReactDOM.createRoot(domContainer);
+root.render(e(LikeButton));
 ```
 
-These two lines of code find the `<div>` we added to our HTML in the first step, and then display our "Like" button React component inside of it.
+These three lines of code find the `<div>` we added to our HTML in the first step, create a React app with it, and then display our "Like" button React component inside of it.
 
 ### That's It! {#thats-it}
 
@@ -94,7 +95,7 @@ Check out the next sections for more tips on integrating React.
 
 **[View the full example source code](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605)**
 
-**[Download the full example (2KB zipped)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip)**
+**[Download the full example (2KB zipped)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/87f0b6f34238595b44308acfb86df6ea43669c08.zip)**
 
 ### Tip: Reuse a Component {#tip-reuse-a-component}
 
@@ -102,7 +103,7 @@ Commonly, you might want to display React components in multiple places on the H
 
 [View the full example source code](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda)
 
-[Download the full example (2KB zipped)](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda/archive/9d0dd0ee941fea05fd1357502e5aa348abb84c12.zip)
+[Download the full example (2KB zipped)](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda/archive/279839cb9891bd41802ebebc5365e9dec08eeb9f.zip)
 
 >Note
 >
@@ -115,15 +116,15 @@ Before deploying your website to production, be mindful that unminified JavaScri
 If you already minify the application scripts, **your site will be production-ready** if you ensure that the deployed HTML loads the versions of React ending in `production.min.js`:
 
 ```js
-<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
-<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
+<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
+<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
 ```
 
 If you don't have a minification step for your scripts, [here's one way to set it up](https://gist.github.com/gaearon/42a2ffa41b8319948f9be4076286e1f3).
 
 ## Optional: Try React with JSX {#optional-try-react-with-jsx}
 
-In the examples above, we only relied on features that are natively supported by the browsers. This is why we used a JavaScript function call to tell React what to display:
+In the examples above, we only relied on features that are natively supported by browsers. This is why we used a JavaScript function call to tell React what to display:
 
 ```js
 const e = React.createElement;
@@ -149,7 +150,7 @@ return (
 
 These two code snippets are equivalent. While **JSX is [completely optional](/docs/react-without-jsx.html)**, many people find it helpful for writing UI code -- both with React and with other libraries.
 
-You can play with JSX using [this online converter](https://babeljs.io/en/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=DwIwrgLhD2B2AEcDCAbAlgYwNYF4DeAFAJTw4B88EAFmgM4B0tAphAMoQCGETBe86WJgBMAXJQBOYJvAC-RGWQBQ8FfAAyaQYuAB6cFDhkgA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=7.4.3).
+You can play with JSX using [this online converter](https://babeljs.io/en/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=DwIwrgLhD2B2AEcDCAbAlgYwNYF4DeAFAJTw4B88EAFmgM4B0tAphAMoQCGETBe86WJgBMAXJQBOYJvAC-RGWQBQ8FfAAyaQYuAB6cFDhkgA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=7.15.7).
 
 ### Quickly Try JSX {#quickly-try-jsx}
 
@@ -159,7 +160,7 @@ The quickest way to try JSX in your project is to add this `<script>` tag to you
 <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
 ```
 
-Now you can use JSX in any `<script>` tag by adding `type="text/babel"` attribute to it. Here is [an example HTML file with JSX](https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html) that you can download and play with.
+Now you can use JSX in any `<script>` tag by adding `type="text/babel"` attribute to it. Here is [an example HTML file with JSX](https://raw.githubusercontent.com/reactjs/reactjs.org/main/static/html/single-file-example.html) that you can download and play with.
 
 This approach is fine for learning and creating simple demos. However, it makes your website slow and **isn't suitable for production**. When you're ready to move forward, remove this new `<script>` tag and the `type="text/babel"` attributes you've added. Instead, in the next section you will set up a JSX preprocessor to convert all your `<script>` tags automatically.
 
@@ -183,7 +184,7 @@ Congratulations! You just added a **production-ready JSX setup** to your project
 
 Create a folder called `src` and run this terminal command:
 
-```
+```console
 npx babel --watch src --out-dir . --presets react-app/prod
 ```
 
diff --git a/content/docs/addons-pure-render-mixin.md b/content/docs/addons-pure-render-mixin.md
index 872445309..264f3e3db 100644
--- a/content/docs/addons-pure-render-mixin.md
+++ b/content/docs/addons-pure-render-mixin.md
@@ -39,6 +39,6 @@ Under the hood, the mixin implements [shouldComponentUpdate](/docs/component-spe
 
 > Note:
 >
-> This only shallowly compares the objects. If these contain complex data structures, it may produce false-negatives for deeper differences. Only mix into components which have simple props and state, or use `forceUpdate()` when you know deep data structures have changed. Or, consider using [immutable objects](https://facebook.github.io/immutable-js/) to facilitate fast comparisons of nested data.
+> This only shallowly compares the objects. If these contain complex data structures, it may produce false-negatives for deeper differences. Only mix into components which have simple props and state, or use `forceUpdate()` when you know deep data structures have changed. Or, consider using [immutable objects](https://immutable-js.com/) to facilitate fast comparisons of nested data.
 >
 > Furthermore, `shouldComponentUpdate` skips updates for the whole component subtree. Make sure all the children components are also "pure".
diff --git a/content/docs/addons-shallow-renderer.md b/content/docs/addons-shallow-renderer.md
index 7b7f29f3c..324e61d7a 100644
--- a/content/docs/addons-shallow-renderer.md
+++ b/content/docs/addons-shallow-renderer.md
@@ -59,7 +59,7 @@ Shallow testing currently has some limitations, namely not supporting refs.
 
 You can think of the shallowRenderer as a "place" to render the component you're testing, and from which you can extract the component's output.
 
-`shallowRenderer.render()` is similar to [`ReactDOM.render()`](/docs/react-dom.html#render) but it doesn't require DOM and only renders a single level deep. This means you can test components isolated from how their children are implemented.
+`shallowRenderer.render()` is similar to [`root.render()`](/docs/react-dom-client.html#createroot) but it doesn't require DOM and only renders a single level deep. This means you can test components isolated from how their children are implemented.
 
 ### `shallowRenderer.getRenderOutput()` {#shallowrenderergetrenderoutput}
 
diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md
index ea92f3eb9..49075a087 100644
--- a/content/docs/addons-test-utils.md
+++ b/content/docs/addons-test-utils.md
@@ -89,7 +89,7 @@ Here is how we can test it:
 
 ```js{3,20-22,29-31}
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import { act } from 'react-dom/test-utils';
 import Counter from './Counter';
 
@@ -108,7 +108,7 @@ afterEach(() => {
 it('can render and update a counter', () => {
   // Test first render and componentDidMount
   act(() => {
-    ReactDOM.render(<Counter />, container);
+    ReactDOM.createRoot(container).render(<Counter />);
   });
   const button = container.querySelector('button');
   const label = container.querySelector('p');
@@ -143,7 +143,7 @@ Pass a mocked component module to this method to augment it with useful methods
 
 > Note:
 >
-> `mockComponent()` is a legacy API. We recommend using [`jest.mock()`](https://facebook.github.io/jest/docs/en/tutorial-react-native.html#mock-native-modules-using-jestmock) instead.
+> `mockComponent()` is a legacy API. We recommend using [`jest.mock()`](https://jestjs.io/docs/tutorial-react-native#mock-native-modules-using-jestmock) instead.
 
 * * *
 
@@ -304,7 +304,7 @@ Render a React element into a detached DOM node in the document. **This function
 
 ```js
 const domContainer = document.createElement('div');
-ReactDOM.render(element, domContainer);
+ReactDOM.createRoot(domContainer).render(element);
 ```
 
 > Note:
diff --git a/content/docs/addons-update.md b/content/docs/addons-update.md
index 0e0241074..4e9a37d4b 100644
--- a/content/docs/addons-update.md
+++ b/content/docs/addons-update.md
@@ -21,7 +21,7 @@ var update = require('react-addons-update'); // ES5 with npm
 
 React lets you use whatever style of data management you want, including mutation. However, if you can use immutable data in performance-critical parts of your application it's easy to implement a fast [`shouldComponentUpdate()`](/docs/react-component.html#shouldcomponentupdate) method to significantly speed up your app.
 
-Dealing with immutable data in JavaScript is more difficult than in languages designed for it, like [Clojure](https://clojure.org/). However, we've provided a simple immutability helper, `update()`, that makes dealing with this type of data much easier, *without* fundamentally changing how your data is represented. You can also take a look at Facebook's [Immutable-js](https://facebook.github.io/immutable-js/docs/) and the [Advanced Performance](/docs/advanced-performance.html) section for more detail on Immutable-js.
+Dealing with immutable data in JavaScript is more difficult than in languages designed for it, like [Clojure](https://clojure.org/). However, we've provided a simple immutability helper, `update()`, that makes dealing with this type of data much easier, *without* fundamentally changing how your data is represented. You can also take a look at Facebook's [Immutable-js](https://immutable-js.com/docs/latest@main/) and the [Advanced Performance](/docs/advanced-performance.html) section for more detail on Immutable-js.
 
 ### The Main Idea {#the-main-idea}
 
diff --git a/content/docs/cdn-links.md b/content/docs/cdn-links.md
index e357811de..d959108ff 100644
--- a/content/docs/cdn-links.md
+++ b/content/docs/cdn-links.md
@@ -9,18 +9,18 @@ next: release-channels.html
 Both React and ReactDOM are available over a CDN.
 
 ```html
-<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
-<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
+<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
+<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
 ```
 
 The versions above are only meant for development, and are not suitable for production. Minified and optimized production versions of React are available at:
 
 ```html
-<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
-<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
+<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
+<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
 ```
 
-To load a specific version of `react` and `react-dom`, replace `17` with the version number.
+To load a specific version of `react` and `react-dom`, replace `18` with the version number.
 
 ### Why the `crossorigin` Attribute? {#why-the-crossorigin-attribute}
 
diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md
index 0d1a90b98..10c745b2c 100644
--- a/content/docs/code-splitting.md
+++ b/content/docs/code-splitting.md
@@ -81,10 +81,6 @@ When using [Babel](https://babeljs.io/), you'll need to make sure that Babel can
 
 ## `React.lazy` {#reactlazy}
 
-> Note:
->
-> `React.lazy` and Suspense are not yet available for server-side rendering. If you want to do code-splitting in a server rendered app, we recommend [Loadable Components](https://github.com/gregberge/loadable-components). It has a nice [guide for bundle splitting with server-side rendering](https://loadable-components.com/docs/server-side-rendering/).
-
 The `React.lazy` function lets you render a dynamic import as a regular component.
 
 **Before:**
@@ -143,6 +139,52 @@ function MyComponent() {
 }
 ```
 
+### Avoiding fallbacks {#avoiding-fallbacks}
+Any component may suspend as a result of rendering, even components that were already shown to the user. In order for screen content to always be consistent, if an already shown component suspends, React has to hide its tree up to the closest `<Suspense>` boundary. However, from the user's perspective, this can be disorienting.
+
+Consider this tab switcher:
+
+```js
+import React, { Suspense } from 'react';
+import Tabs from './Tabs';
+import Glimmer from './Glimmer';
+
+const Comments = React.lazy(() => import('./Comments'));
+const Photos = React.lazy(() => import('./Photos'));
+
+function MyComponent() {
+  const [tab, setTab] = React.useState('photos');
+  
+  function handleTabSelect(tab) {
+    setTab(tab);
+  };
+
+  return (
+    <div>
+      <Tabs onTabSelect={handleTabSelect} />
+      <Suspense fallback={<Glimmer />}>
+        {tab === 'photos' ? <Photos /> : <Comments />}
+      </Suspense>
+    </div>
+  );
+}
+
+```
+
+In this example, if tab gets changed from `'photos'` to `'comments'`, but `Comments` suspends, the user will see a glimmer. This makes sense because the user no longer wants to see `Photos`, the `Comments` component is not ready to render anything, and React needs to keep the user experience consistent, so it has no choice but to show the `Glimmer` above.
+
+However, sometimes this user experience is not desirable. In particular, it is sometimes better to show the "old" UI while the new UI is being prepared. You can use the new [`startTransition`](/docs/react-api.html#starttransition) API to make React do this:
+
+```js
+function handleTabSelect(tab) {
+  startTransition(() => {
+    setTab(tab);
+  });
+}
+```
+
+Here, you tell React that setting tab to `'comments'` is not an urgent update, but is a [transition](/docs/react-api.html#transitions) that may take some time. React will then keep the old UI in place and interactive, and will switch to showing `<Comments />` when it is ready. See [Transitions](/docs/react-api.html#transitions) for more info.
+
 ### Error boundaries {#error-boundaries}
 
 If the other module fails to load (for example, due to network failure), it will trigger an error. You can handle these errors to show a nice user experience and manage recovery with [Error Boundaries](/docs/error-boundaries.html). Once you've created your Error Boundary, you can use it anywhere above your lazy components to display an error state when there's a network error.
@@ -174,11 +216,11 @@ Deciding where in your app to introduce code splitting can be a bit tricky. You
 
 A good place to start is with routes. Most people on the web are used to page transitions taking some amount of time to load. You also tend to be re-rendering the entire page at once so your users are unlikely to be interacting with other elements on the page at the same time.
 
-Here's an example of how to setup route-based code splitting into your app using libraries like [React Router](https://reacttraining.com/react-router/) with `React.lazy`.
+Here's an example of how to setup route-based code splitting into your app using libraries like [React Router](https://reactrouter.com/) with `React.lazy`.
 
 ```js
 import React, { Suspense, lazy } from 'react';
-import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 
 const Home = lazy(() => import('./routes/Home'));
 const About = lazy(() => import('./routes/About'));
@@ -186,10 +228,10 @@ const About = lazy(() => import('./routes/About'));
 const App = () => (
   <Router>
     <Suspense fallback={<div>Loading...</div>}>
-      <Switch>
-        <Route exact path="/" component={Home}/>
-        <Route path="/about" component={About}/>
-      </Switch>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/about" element={<About />} />
+      </Routes>
     </Suspense>
   </Router>
 );
diff --git a/content/docs/codebase-overview.md b/content/docs/codebase-overview.md
index 2d4198040..5203c47e7 100644
--- a/content/docs/codebase-overview.md
+++ b/content/docs/codebase-overview.md
@@ -19,8 +19,8 @@ We don't necessarily recommend any of these conventions in React apps. Many of t
 
 After cloning the [React repository](https://github.com/facebook/react), you will see a few top-level folders in it:
 
-* [`packages`](https://github.com/facebook/react/tree/master/packages) contains metadata (such as `package.json`) and the source code (`src` subdirectory) for all packages in the React repository. **If your change is related to the code, the `src` subdirectory of each package is where you'll spend most of your time.**
-* [`fixtures`](https://github.com/facebook/react/tree/master/fixtures) contains a few small React test applications for contributors.
+* [`packages`](https://github.com/facebook/react/tree/main/packages) contains metadata (such as `package.json`) and the source code (`src` subdirectory) for all packages in the React repository. **If your change is related to the code, the `src` subdirectory of each package is where you'll spend most of your time.**
+* [`fixtures`](https://github.com/facebook/react/tree/main/fixtures) contains a few small React test applications for contributors.
 * `build` is the build output of React. It is not in the repository but it will appear in your React clone after you [build it](/docs/how-to-contribute.html#development-workflow) for the first time.
 
 The documentation is hosted [in a separate repository from React](https://github.com/reactjs/reactjs.org).
@@ -98,7 +98,7 @@ React is a [monorepo](https://danluu.com/monorepo/). Its repository contains mul
 
 ### React Core {#react-core}
 
-The "core" of React includes all the [top-level `React` APIs](/docs/top-level-api.html#react), for example:
+The "core" of React includes all the [top-level `React` APIs](/docs/react-api.html#react), for example:
 
 * `React.createElement()`
 * `React.Component`
@@ -106,7 +106,7 @@ The "core" of React includes all the [top-level `React` APIs](/docs/top-level-ap
 
 **React core only includes the APIs necessary to define components.** It does not include the [reconciliation](/docs/reconciliation.html) algorithm or any platform-specific code. It is used both by React DOM and React Native components.
 
-The code for React core is located in [`packages/react`](https://github.com/facebook/react/tree/master/packages/react) in the source tree. It is available on npm as the [`react`](https://www.npmjs.com/package/react) package. The corresponding standalone browser build is called `react.js`, and it exports a global called `React`.
+The code for React core is located in [`packages/react`](https://github.com/facebook/react/tree/main/packages/react) in the source tree. It is available on npm as the [`react`](https://www.npmjs.com/package/react) package. The corresponding standalone browser build is called `react.js`, and it exports a global called `React`.
 
 ### Renderers {#renderers}
 
@@ -114,17 +114,17 @@ React was originally created for the DOM but it was later adapted to also suppor
 
 **Renderers manage how a React tree turns into the underlying platform calls.**
 
-Renderers are also located in [`packages/`](https://github.com/facebook/react/tree/master/packages/):
+Renderers are also located in [`packages/`](https://github.com/facebook/react/tree/main/packages/):
 
-* [React DOM Renderer](https://github.com/facebook/react/tree/master/packages/react-dom) renders React components to the DOM. It implements [top-level `ReactDOM` APIs](/docs/react-dom.html) and is available as [`react-dom`](https://www.npmjs.com/package/react-dom) npm package. It can also be used as standalone browser bundle called `react-dom.js` that exports a `ReactDOM` global.
-* [React Native Renderer](https://github.com/facebook/react/tree/master/packages/react-native-renderer) renders React components to native views. It is used internally by React Native.
-* [React Test Renderer](https://github.com/facebook/react/tree/master/packages/react-test-renderer) renders React components to JSON trees. It is used by the [Snapshot Testing](https://facebook.github.io/jest/blog/2016/07/27/jest-14.html) feature of [Jest](https://facebook.github.io/jest) and is available as [react-test-renderer](https://www.npmjs.com/package/react-test-renderer) npm package.
+* [React DOM Renderer](https://github.com/facebook/react/tree/main/packages/react-dom) renders React components to the DOM. It implements [top-level `ReactDOM` APIs](/docs/react-dom.html) and is available as [`react-dom`](https://www.npmjs.com/package/react-dom) npm package. It can also be used as standalone browser bundle called `react-dom.js` that exports a `ReactDOM` global.
+* [React Native Renderer](https://github.com/facebook/react/tree/main/packages/react-native-renderer) renders React components to native views. It is used internally by React Native.
+* [React Test Renderer](https://github.com/facebook/react/tree/main/packages/react-test-renderer) renders React components to JSON trees. It is used by the [Snapshot Testing](https://facebook.github.io/jest/blog/2016/07/27/jest-14.html) feature of [Jest](https://facebook.github.io/jest) and is available as [react-test-renderer](https://www.npmjs.com/package/react-test-renderer) npm package.
 
-The only other officially supported renderer is [`react-art`](https://github.com/facebook/react/tree/master/packages/react-art). It used to be in a separate [GitHub repository](https://github.com/reactjs/react-art) but we moved it into the main source tree for now.
+The only other officially supported renderer is [`react-art`](https://github.com/facebook/react/tree/main/packages/react-art). It used to be in a separate [GitHub repository](https://github.com/reactjs/react-art) but we moved it into the main source tree for now.
 
 >**Note:**
 >
->Technically the [`react-native-renderer`](https://github.com/facebook/react/tree/master/packages/react-native-renderer) is a very thin layer that teaches React to interact with React Native implementation. The real platform-specific code managing the native views lives in the [React Native repository](https://github.com/facebook/react-native) together with its components.
+>Technically the [`react-native-renderer`](https://github.com/facebook/react/tree/main/packages/react-native-renderer) is a very thin layer that teaches React to interact with React Native implementation. The real platform-specific code managing the native views lives in the [React Native repository](https://github.com/facebook/react-native) together with its components.
 
 ### Reconcilers {#reconcilers}
 
@@ -152,11 +152,11 @@ Its main goals are:
 
 You can read more about React Fiber Architecture [here](https://github.com/acdlite/react-fiber-architecture) and [here](https://blog.ag-grid.com/inside-fiber-an-in-depth-overview-of-the-new-reconciliation-algorithm-in-react). While it has shipped with React 16, the async features are not enabled by default yet.
 
-Its source code is located in [`packages/react-reconciler`](https://github.com/facebook/react/tree/master/packages/react-reconciler).
+Its source code is located in [`packages/react-reconciler`](https://github.com/facebook/react/tree/main/packages/react-reconciler).
 
 ### Event System {#event-system}
 
-React implements a layer over native events to smooth out cross-browser differences. Its source code is located in [`packages/react-dom/src/events`](https://github.com/facebook/react/tree/master/packages/react-dom/src/events).
+React implements a layer over native events to smooth out cross-browser differences. Its source code is located in [`packages/react-dom/src/events`](https://github.com/facebook/react/tree/main/packages/react-dom/src/events).
 
 ### What Next? {#what-next}
 
diff --git a/content/docs/components-and-props.md b/content/docs/components-and-props.md
index 0efc123bf..92661b9dc 100644
--- a/content/docs/components-and-props.md
+++ b/content/docs/components-and-props.md
@@ -64,23 +64,21 @@ When React sees an element representing a user-defined component, it passes JSX
 
 For example, this code renders "Hello, Sara" on the page:
 
-```js{1,5}
+```js{1,6}
 function Welcome(props) {
   return <h1>Hello, {props.name}</h1>;
 }
 
+const root = ReactDOM.createRoot(document.getElementById('root'));
 const element = <Welcome name="Sara" />;
-ReactDOM.render(
-  element,
-  document.getElementById('root')
-);
+root.render(element);
 ```
 
-[](codepen://components-and-props/rendering-a-component)
+**[Try it on CodePen](https://codepen.io/gaearon/pen/YGYmEG?editors=1010)**
 
 Let's recap what happens in this example:
 
-1. We call `ReactDOM.render()` with the `<Welcome name="Sara" />` element.
+1. We call `root.render()` with the `<Welcome name="Sara" />` element.
 2. React calls the `Welcome` component with `{name: 'Sara'}` as the props.
 3. Our `Welcome` component returns a `<h1>Hello, Sara</h1>` element as the result.
 4. React DOM efficiently updates the DOM to match `<h1>Hello, Sara</h1>`.
@@ -111,14 +109,9 @@ function App() {
     </div>
   );
 }
-
-ReactDOM.render(
-  <App />,
-  document.getElementById('root')
-);
 ```
 
-[](codepen://components-and-props/composing-components)
+**[Try it on CodePen](https://codepen.io/gaearon/pen/KgQKPr?editors=1010)**
 
 Typically, new React apps have a single `App` component at the very top. However, if you integrate React into an existing app, you might start bottom-up with a small component like `Button` and gradually work your way to the top of the view hierarchy.
 
@@ -152,7 +145,7 @@ function Comment(props) {
 }
 ```
 
-[](codepen://components-and-props/extracting-components)
+**[Try it on CodePen](https://codepen.io/gaearon/pen/VKQwEo?editors=1010)**
 
 It accepts `author` (an object), `text` (a string), and `date` (a date) as props, and describes a comment on a social media website.
 
@@ -231,7 +224,7 @@ function Comment(props) {
 }
 ```
 
-[](codepen://components-and-props/extracting-components-continued)
+**[Try it on CodePen](https://codepen.io/gaearon/pen/rrJNJY?editors=1010)**
 
 Extracting components might seem like grunt work at first, but having a palette of reusable components pays off in larger apps. A good rule of thumb is that if a part of your UI is used several times (`Button`, `Panel`, `Avatar`), or is complex enough on its own (`App`, `FeedStory`, `Comment`), it is a good candidate to be extracted to a separate component.
 
diff --git a/content/docs/composition-vs-inheritance.md b/content/docs/composition-vs-inheritance.md
index c86735ef7..28c8426ab 100644
--- a/content/docs/composition-vs-inheritance.md
+++ b/content/docs/composition-vs-inheritance.md
@@ -169,4 +169,4 @@ At Facebook, we use React in thousands of components, and we haven't found any u
 
 Props and composition give you all the flexibility you need to customize a component's look and behavior in an explicit and safe way. Remember that components may accept arbitrary props, including primitive values, React elements, or functions.
 
-If you want to reuse non-UI functionality between components, we suggest extracting it into a separate JavaScript module. The components may import it and use that function, object, or a class, without extending it.
+If you want to reuse non-UI functionality between components, we suggest extracting it into a separate JavaScript module. The components may import it and use that function, object, or class, without extending it.
diff --git a/content/docs/concurrent-mode-adoption.md b/content/docs/concurrent-mode-adoption.md
deleted file mode 100644
index f5b8d9db1..000000000
--- a/content/docs/concurrent-mode-adoption.md
+++ /dev/null
@@ -1,145 +0,0 @@
----
-id: concurrent-mode-adoption
-title: Adopting Concurrent Mode (Experimental)
-permalink: docs/concurrent-mode-adoption.html
-prev: concurrent-mode-patterns.html
-next: concurrent-mode-reference.html
----
-
-<style>
-.scary > blockquote {
-  background-color: rgba(237, 51, 21, 0.2);
-  border-left-color: #ed3315;
-}
-</style>
-
-<div class="scary">
-
->Caution:
->
->This page describes **experimental features that are not yet available in a stable release**. Don't rely on experimental builds of React in production apps. These features may change significantly and without a warning before they become a part of React.
->
->This documentation is aimed at early adopters and people who are curious. **If you're new to React, don't worry about these features** -- you don't need to learn them right now.
-
->Caution:
->
->All references below to "blocking mode" and `createBlockingRoot` are outdated and should be ignored.
-
-</div>
-
-- [Installation](#installation)
-  - [Who Is This Experimental Release For?](#who-is-this-experimental-release-for)
-  - [Enabling Concurrent Mode](#enabling-concurrent-mode)
-- [What to Expect](#what-to-expect)
-  - [Migration Step: Blocking Mode](#migration-step-blocking-mode)
-  - [Why So Many Modes?](#why-so-many-modes)
-  - [Feature Comparison](#feature-comparison)
-
-## Installation {#installation}
-
-Concurrent Mode is only available in the [experimental builds](/blog/2019/10/22/react-release-channels.html#experimental-channel) of React. To install them, run:
-
-```
-npm install react@experimental react-dom@experimental
-```
-
-**There are no semantic versioning guarantees for the experimental builds.**  
-APIs may be added, changed, or removed with any `@experimental` release.
-
-**Experimental releases will have frequent breaking changes.**
-
-You can try these builds on personal projects or in a branch, but we don't recommend running them in production. At Facebook, we *do* run them in production, but that's because we're also there to fix bugs when something breaks. You've been warned!
-
-### Who Is This Experimental Release For? {#who-is-this-experimental-release-for}
-
-This release is primarily aimed at early adopters, library authors, and curious people.
-
-We're using this code in production (and it works for us) but there are still some bugs, missing features, and gaps in the documentation. We'd like to hear more about what breaks in Concurrent Mode so we can better prepare it for an official stable release in the future.
-
-### Enabling Concurrent Mode {#enabling-concurrent-mode}
-
-Normally, when we add features to React, you can start using them immediately. Fragments, Context, and even Hooks are examples of such features. You can use them in new code without making any changes to the existing code.
-
-Concurrent Mode is different. It introduces semantic changes to how React works. Otherwise, the [new features](/docs/concurrent-mode-patterns.html) enabled by it *wouldn't be possible*. This is why they're grouped into a new "mode" rather than released one by one in isolation.
-
-You can't opt into Concurrent Mode on a per-subtree basis. Instead, to opt in, you have to do it in the place where today you call `ReactDOM.render()`.
-
-**This will enable Concurrent Mode for the whole `<App />` tree:**
-
-```js
-import ReactDOM from 'react-dom';
-
-// If you previously had:
-//
-// ReactDOM.render(<App />, document.getElementById('root'));
-//
-// You can opt into Concurrent Mode by writing:
-
-ReactDOM.unstable_createRoot(
-  document.getElementById('root')
-).render(<App />);
-```
-
->Note:
->
->Concurrent Mode APIs such as `createRoot` only exist in the experimental builds of React.
-
-In Concurrent Mode, the lifecycle methods [previously marked](/blog/2018/03/27/update-on-async-rendering.html) as "unsafe" actually *are* unsafe, and lead to bugs even more than in today's React. We don't recommend trying Concurrent Mode until your app is [Strict Mode](/docs/strict-mode.html)-compatible.
-
-## What to Expect {#what-to-expect}
-
-If you have a large existing app, or if your app depends on a lot of third-party packages, please don't expect that you can use the Concurrent Mode immediately. **For example, at Facebook we are using Concurrent Mode for the new website, but we're not planning to enable it on the old website.** This is because our old website still uses unsafe lifecycle methods in the product code, incompatible third-party libraries, and patterns that don't work well with the Concurrent Mode.
-
-In our experience, code that uses idiomatic React patterns and doesn't rely on external state management solutions is the easiest to get running in the Concurrent Mode. We will describe common problems we've seen and the solutions to them separately in the coming weeks.
-
-### Migration Step: Blocking Mode {#migration-step-blocking-mode}
-
-For older codebases, Concurrent Mode might be a step too far. This is why we also provide a new "Blocking Mode" in the experimental React builds. You can try it by substituting `createRoot` with `createBlockingRoot`. It only offers a *small subset* of the Concurrent Mode features, but it is closer to how React works today and can serve as a migration step.
-
-To recap:
-
-* **Legacy Mode:** `ReactDOM.render(<App />, rootNode)`. This is what React apps use today. There are no plans to remove the legacy mode in the observable future — but it won't be able to support these new features.
-* **Blocking Mode:** `ReactDOM.createBlockingRoot(rootNode).render(<App />)`. It is currently experimental. It is intended as a first migration step for apps that want to get a subset of Concurrent Mode features.
-* **Concurrent Mode:** `ReactDOM.createRoot(rootNode).render(<App />)`. It is currently experimental. In the future, after it stabilizes, we intend to make it the default React mode. This mode enables *all* the new features.
-
-### Why So Many Modes? {#why-so-many-modes}
-
-We think it is better to offer a [gradual migration strategy](/docs/faq-versioning.html#commitment-to-stability) than to make huge breaking changes — or to let React stagnate into irrelevance.
-
-In practice, we expect that most apps using Legacy Mode today should be able to migrate at least to the Blocking Mode (if not Concurrent Mode). This fragmentation can be annoying for libraries that aim to support all Modes in the short term. However, gradually moving the ecosystem away from the Legacy Mode will also *solve* problems that affect major libraries in the React ecosystem, such as [confusing Suspense behavior when reading layout](https://github.com/facebook/react/issues/14536) and [lack of consistent batching guarantees](https://github.com/facebook/react/issues/15080). There's a number of bugs that can't be fixed in Legacy Mode without changing semantics, but don't exist in Blocking and Concurrent Modes.
-
-You can think of the Blocking Mode as a "gracefully degraded" version of the Concurrent Mode. **As a result, in longer term we should be able to converge and stop thinking about different Modes altogether.** But for now, Modes are an important migration strategy. They let everyone decide when a migration is worth it, and upgrade at their own pace.
-
-### Feature Comparison {#feature-comparison}
-
-<style>
-  #feature-table table { border-collapse: collapse; }
-  #feature-table th { padding-right: 30px; }
-  #feature-table tr { border-bottom: 1px solid #eee; }
-</style>
-
-<div id="feature-table">
-
-|   |Legacy Mode  |Blocking Mode  |Concurrent Mode  |
-|---  |---  |---  |---  |
-|[String Refs](/docs/refs-and-the-dom.html#legacy-api-string-refs)  |✅  |🚫**  |🚫**  |
-|[Legacy Context](/docs/legacy-context.html) |✅  |🚫**  |🚫**  |
-|[findDOMNode](/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage)  |✅  |🚫**  |🚫**  |
-|[Suspense](/docs/concurrent-mode-suspense.html#what-is-suspense-exactly) |✅  |✅  |✅  |
-|[SuspenseList](/docs/concurrent-mode-patterns.html#suspenselist) |🚫  |✅  |✅  |
-|Suspense SSR + Hydration |🚫  |✅  |✅  |
-|Progressive Hydration  |🚫  |✅  |✅  |
-|Selective Hydration  |🚫  |🚫  |✅  |
-|Cooperative Multitasking |🚫  |🚫  |✅  |
-|Automatic batching of multiple setStates     |🚫* |✅  |✅  |
-|[Priority-based Rendering](/docs/concurrent-mode-patterns.html#splitting-high-and-low-priority-state) |🚫  |🚫  |✅  |
-|[Interruptible Prerendering](/docs/concurrent-mode-intro.html#interruptible-rendering) |🚫  |🚫  |✅  |
-|[useTransition](/docs/concurrent-mode-patterns.html#transitions)  |🚫  |🚫  |✅  |
-|[useDeferredValue](/docs/concurrent-mode-patterns.html#deferring-a-value) |🚫  |🚫  |✅  |
-|[Suspense Reveal "Train"](/docs/concurrent-mode-patterns.html#suspense-reveal-train)  |🚫  |🚫  |✅  |
-
-</div>
-
-\*: Legacy mode has automatic batching in React-managed events but it's limited to one browser task. Non-React events must opt-in using `unstable_batchedUpdates`. In Blocking Mode and Concurrent Mode, all `setState`s are batched by default.
-
-\*\*: Warns in development.
diff --git a/content/docs/concurrent-mode-intro.md b/content/docs/concurrent-mode-intro.md
deleted file mode 100644
index b2980ce3d..000000000
--- a/content/docs/concurrent-mode-intro.md
+++ /dev/null
@@ -1,100 +0,0 @@
----
-id: concurrent-mode-intro
-title: Introducing Concurrent Mode (Experimental)
-permalink: docs/concurrent-mode-intro.html
-next: concurrent-mode-suspense.html
----
-
-<style>
-.scary > blockquote {
-  background-color: rgba(237, 51, 21, 0.2);
-  border-left-color: #ed3315;
-}
-</style>
-
-<div class="scary">
-
->Caution:
->
->This page describes **experimental features that are [not yet available](/docs/concurrent-mode-adoption.html) in a stable release**. Don't rely on experimental builds of React in production apps. These features may change significantly and without a warning before they become a part of React.
->
->This documentation is aimed at early adopters and people who are curious. **If you're new to React, don't worry about these features** -- you don't need to learn them right now.
-
-</div>
-
-This page provides a theoretical overview of Concurrent Mode. **For a more practical introduction, you might want to check out the next sections:**
-
-* [Suspense for Data Fetching](/docs/concurrent-mode-suspense.html) describes a new mechanism for fetching data in React components.
-* [Concurrent UI Patterns](/docs/concurrent-mode-patterns.html) shows some UI patterns made possible by Concurrent Mode and Suspense.
-* [Adopting Concurrent Mode](/docs/concurrent-mode-adoption.html) explains how you can try Concurrent Mode in your project.
-* [Concurrent Mode API Reference](/docs/concurrent-mode-reference.html) documents the new APIs available in experimental builds.
-
-## What Is Concurrent Mode? {#what-is-concurrent-mode}
-
-Concurrent Mode is a set of new features that help React apps stay responsive and gracefully adjust to the user's device capabilities and network speed.
-
-These features are still experimental and are subject to change. They are not yet a part of a stable React release, but you can try them in an experimental build.
-
-## Blocking vs Interruptible Rendering {#blocking-vs-interruptible-rendering}
-
-**To explain Concurrent Mode, we'll use version control as a metaphor.** If you work on a team, you probably use a version control system like Git and work on branches. When a branch is ready, you can merge your work into master so that other people can pull it.
-
-Before version control existed, the development workflow was very different. There was no concept of branches. If you wanted to edit some files, you had to tell everyone not to touch those files until you've finished your work. You couldn't even start working on them concurrently with that person — you were literally *blocked* by them.
-
-This illustrates how UI libraries, including React, typically work today. Once they start rendering an update, including creating new DOM nodes and running the code inside components, they can't interrupt this work. We'll call this approach "blocking rendering".
-
-In Concurrent Mode, rendering is not blocking. It is interruptible. This improves the user experience. It also unlocks new features that weren't possible before. Before we look at concrete examples in the [next](/docs/concurrent-mode-suspense.html) [chapters](/docs/concurrent-mode-patterns.html), we'll do a high-level overview of new features.
-
-### Interruptible Rendering {#interruptible-rendering}
-
-Consider a filterable product list. Have you ever typed into a list filter and felt that it stutters on every key press? Some of the work to update the product list might be unavoidable, such as creating new DOM nodes or the browser performing layout. However, *when* and *how* we perform that work plays a big role.
-
-A common way to work around the stutter is to "debounce" the input. When debouncing, we only update the list *after* the user stops typing. However, it can be frustrating that the UI doesn't update while we're typing. As an alternative, we could "throttle" the input, and update the list with a certain maximum frequency. But then on lower-powered devices we'd still end up with stutter. Both debouncing and throttling create a suboptimal user experience.
-
-The reason for the stutter is simple: once rendering begins, it can't be interrupted. So the browser can't update the text input right after the key press. No matter how good a UI library (such as React) might look on a benchmark, if it uses blocking rendering, a certain amount of work in your components will always cause stutter. And, often, there is no easy fix.
-
-**Concurrent Mode fixes this fundamental limitation by making rendering interruptible.** This means when the user presses another key, React doesn't need to block the browser from updating the text input. Instead, it can let the browser paint an update to the input, and then continue rendering the updated list *in memory*. When the rendering is finished, React updates the DOM, and changes are reflected on the screen.
-
-Conceptually, you can think of this as React preparing every update "on a branch". Just like you can abandon work in branches or switch between them, React in Concurrent Mode can interrupt an ongoing update to do something more important, and then come back to what it was doing earlier. This technique might also remind you of [double buffering](https://wiki.osdev.org/Double_Buffering) in video games.
-
-Concurrent Mode techniques reduce the need for debouncing and throttling in UI. Because rendering is interruptible, React doesn't need to artificially *delay* work to avoid stutter. It can start rendering right away, but interrupt this work when needed to keep the app responsive.
-
-### Intentional Loading Sequences {#intentional-loading-sequences}
-
-We've said before that Concurrent Mode is like React working "on a branch". Branches are useful not only for short-term fixes, but also for long-running features. Sometimes you might work on a feature, but it could take weeks before it's in a "good enough state" to merge into master. This side of our version control metaphor applies to rendering too.
-
-Imagine we're navigating between two screens in an app. Sometimes, we might not have enough code and data loaded to show a "good enough" loading state to the user on the new screen. Transitioning to an empty screen or a large spinner can be a jarring experience. However, it's also common that the necessary code and data doesn't take too long to fetch. **Wouldn't it be nicer if React could stay on the old screen for a little longer, and "skip" the "bad loading state" before showing the new screen?**
-
-While this is possible today, it can be difficult to orchestrate. In Concurrent Mode, this feature is built-in. React starts preparing the new screen in memory first — or, as our metaphor goes, "on a different branch". So React can wait before updating the DOM so that more content can load. In Concurrent Mode, we can tell React to keep showing the old screen, fully interactive, with an inline loading indicator. And when the new screen is ready, React can take us to it.
-
-### Concurrency {#concurrency}
-
-Let's recap the two examples above and see how Concurrent Mode unifies them. **In Concurrent Mode, React can work on several state updates *concurrently*** — just like branches let different team members work independently:
-
-* For CPU-bound updates (such as creating DOM nodes and running component code), concurrency means that a more urgent update can "interrupt" rendering that has already started.
-* For IO-bound updates (such as fetching code or data from the network), concurrency means that React can start rendering in memory even before all the data arrives, and skip showing jarring empty loading states.
-
-Importantly, the way you *use* React is the same. Concepts like components, props, and state fundamentally work the same way. When you want to update the screen, you set the state.
-
-React uses a heuristic to decide how "urgent" an update is, and lets you adjust it with a few lines of code so that you can achieve the desired user experience for every interaction.
-
-## Putting Research into Production {#putting-research-into-production}
-
-There is a common theme around Concurrent Mode features. **Its mission is to help integrate the findings from the Human-Computer Interaction research into real UIs.**
-
-For example, research shows that displaying too many intermediate loading states when transitioning between screens makes a transition feel *slower*. This is why Concurrent Mode shows new loading states on a fixed "schedule" to avoid jarring and too frequent updates.
-
-Similarly, we know from research that interactions like hover and text input need to be handled within a very short period of time, while clicks and page transitions can wait a little longer without feeling laggy. The different "priorities" that Concurrent Mode uses internally roughly correspond to the interaction categories in the human perception research.
-
-Teams with a strong focus on user experience sometimes solve similar problems with one-off solutions. However, those solutions rarely survive for a long time, as they're hard to maintain. With Concurrent Mode, our goal is to bake the UI research findings into the abstraction itself, and provide idiomatic ways to use them. As a UI library, React is well-positioned to do that.
-
-## Next Steps {#next-steps}
-
-Now you know what Concurrent Mode is all about!
-
-On the next pages, you'll learn more details about specific topics:
-
-* [Suspense for Data Fetching](/docs/concurrent-mode-suspense.html) describes a new mechanism for fetching data in React components.
-* [Concurrent UI Patterns](/docs/concurrent-mode-patterns.html) shows some UI patterns made possible by Concurrent Mode and Suspense.
-* [Adopting Concurrent Mode](/docs/concurrent-mode-adoption.html) explains how you can try Concurrent Mode in your project.
-* [Concurrent Mode API Reference](/docs/concurrent-mode-reference.html) documents the new APIs available in experimental builds.
diff --git a/content/docs/concurrent-mode-patterns.md b/content/docs/concurrent-mode-patterns.md
deleted file mode 100644
index f38fe595f..000000000
--- a/content/docs/concurrent-mode-patterns.md
+++ /dev/null
@@ -1,937 +0,0 @@
----
-id: concurrent-mode-patterns
-title: Concurrent UI Patterns (Experimental)
-permalink: docs/concurrent-mode-patterns.html
-prev: concurrent-mode-suspense.html
-next: concurrent-mode-adoption.html
----
-
-<style>
-.scary > blockquote {
-  background-color: rgba(237, 51, 21, 0.2);
-  border-left-color: #ed3315;
-}
-</style>
-
-<div class="scary">
-
->Caution:
->
->This page describes **experimental features that are [not yet available](/docs/concurrent-mode-adoption.html) in a stable release**. Don't rely on experimental builds of React in production apps. These features may change significantly and without a warning before they become a part of React.
->
->This documentation is aimed at early adopters and people who are curious. **If you're new to React, don't worry about these features** -- you don't need to learn them right now. For example, if you're looking for a data fetching tutorial that works today, read [this article](https://www.robinwieruch.de/react-hooks-fetch-data/) instead.
-
-</div>
-
-Usually, when we update the state, we expect to see changes on the screen immediately. This makes sense because we want to keep our app responsive to user input. However, there are cases where we might prefer to **defer an update from appearing on the screen**.
-
-For example, if we switch from one page to another, and none of the code or data for the next screen has loaded yet, it might be frustrating to immediately see a blank page with a loading indicator. We might prefer to stay longer on the previous screen. Implementing this pattern has historically been difficult in React. Concurrent Mode offers a new set of tools to do that.
-
-- [Transitions](#transitions)
-  - [Wrapping setState in a Transition](#wrapping-setstate-in-a-transition)
-  - [Adding a Pending Indicator](#adding-a-pending-indicator)
-  - [Reviewing the Changes](#reviewing-the-changes)
-  - [Where Does the Update Happen?](#where-does-the-update-happen)
-  - [Transitions Are Everywhere](#transitions-are-everywhere)
-  - [Baking Transitions Into the Design System](#baking-transitions-into-the-design-system)
-- [The Three Steps](#the-three-steps)
-  - [Default: Receded → Skeleton → Complete](#default-receded-skeleton-complete)
-  - [Preferred: Pending → Skeleton → Complete](#preferred-pending-skeleton-complete)
-  - [Wrap Lazy Features in `<Suspense>`](#wrap-lazy-features-in-suspense)
-  - [Suspense Reveal “Train”](#suspense-reveal-train)
-  - [Delaying a Pending Indicator](#delaying-a-pending-indicator)
-  - [Recap](#recap)
-- [Other Patterns](#other-patterns)
-  - [Splitting High and Low Priority State](#splitting-high-and-low-priority-state)
-  - [Deferring a Value](#deferring-a-value)
-  - [SuspenseList](#suspenselist)
-- [Next Steps](#next-steps)
-
-## Transitions {#transitions}
-
-Let's revisit [this demo](https://codesandbox.io/s/infallible-feather-xjtbu) from the previous page about [Suspense for Data Fetching](/docs/concurrent-mode-suspense.html).
-
-When we click the "Next" button to switch the active profile, the existing page data immediately disappears, and we see the loading indicator for the whole page again. We can call this an "undesirable" loading state. **It would be nice if we could "skip" it and wait for some content to load before transitioning to the new screen.**
-
-React offers a new built-in `useTransition()` Hook to help with this.
-
-We can use it in three steps.
-
-First, we'll make sure that we're actually using Concurrent Mode. We'll talk more about [adopting Concurrent Mode](/docs/concurrent-mode-adoption.html) later, but for now it's sufficient to know that we need to use `ReactDOM.createRoot()` rather than `ReactDOM.render()` for this feature to work:
-
-```js
-const rootElement = document.getElementById("root");
-// Opt into Concurrent Mode
-ReactDOM.createRoot(rootElement).render(<App />);
-```
-
-Next, we'll add an import for the `useTransition` Hook from React:
-
-```js
-import React, { useState, useTransition, Suspense } from "react";
-```
-
-Finally, we'll use it inside the `App` component:
-
-```js{3-5}
-function App() {
-  const [resource, setResource] = useState(initialResource);
-  const [startTransition, isPending] = useTransition({
-    timeoutMs: 3000
-  });
-  // ...
-```
-
-**By itself, this code doesn't do anything yet.** We will need to use this Hook's return values to set up our state transition. There are two values returned from `useTransition`:
-
-* `startTransition` is a function. We'll use it to tell React *which* state update we want to defer.
-* `isPending` is a boolean. It's React telling us whether that transition is ongoing at the moment.
-
-We will use them right below.
-
-Note we passed a configuration object to `useTransition`. Its `timeoutMs` property specifies **how long we're willing to wait for the transition to finish**. By passing `{timeoutMs: 3000}`, we say "If the next profile takes more than 3 seconds to load, show the big spinner -- but before that timeout it's okay to keep showing the previous screen".
-
-### Wrapping setState in a Transition {#wrapping-setstate-in-a-transition}
-
-Our "Next" button click handler sets the state that switches the current profile in the state:
-
-```js{4}
-<button
-  onClick={() => {
-    const nextUserId = getNextId(resource.userId);
-    setResource(fetchProfileData(nextUserId));
-  }}
->
-```
-
- We'll wrap that state update into `startTransition`. That's how we tell React **we don't mind React delaying that state update** if it leads to an undesirable loading state:
-
-```js{3,6}
-<button
-  onClick={() => {
-    startTransition(() => {
-      const nextUserId = getNextId(resource.userId);
-      setResource(fetchProfileData(nextUserId));
-    });
-  }}
->
-```
-
-**[Try it on CodeSandbox](https://codesandbox.io/s/musing-driscoll-6nkie)**
-
-Press "Next" a few times. Notice it already feels very different. **Instead of immediately seeing an empty screen on click, we now keep seeing the previous page for a while.** When the data has loaded, React transitions us to the new screen.
-
-If we make our API responses take 5 seconds, [we can confirm](https://codesandbox.io/s/relaxed-greider-suewh) that now React "gives up" and transitions anyway to the next screen after 3 seconds. This is because we passed `{timeoutMs: 3000}` to `useTransition()`. For example, if we passed `{timeoutMs: 60000}` instead, it would wait a whole minute.
-
-### Adding a Pending Indicator {#adding-a-pending-indicator}
-
-There's still something that feels broken about [our last example](https://codesandbox.io/s/musing-driscoll-6nkie). Sure, it's nice not to see a "bad" loading state. **But having no indication of progress at all feels even worse!** When we click "Next", nothing happens and it feels like the app is broken.
-
-Our `useTransition()` call returns two values: `startTransition` and `isPending`.
-
-```js
-  const [startTransition, isPending] = useTransition({ timeoutMs: 3000 });
-```
-
-We've already used `startTransition` to wrap the state update. Now we're going to use `isPending` too. React gives this boolean to us so we can tell whether **we're currently waiting for this transition to finish**. We'll use it to indicate that something is happening:
-
-```js{4,14}
-return (
-  <>
-    <button
-      disabled={isPending}
-      onClick={() => {
-        startTransition(() => {
-          const nextUserId = getNextId(resource.userId);
-          setResource(fetchProfileData(nextUserId));
-        });
-      }}
-    >
-      Next
-    </button>
-    {isPending ? " Loading..." : null}
-    <ProfilePage resource={resource} />
-  </>
-);
-```
-
-**[Try it on CodeSandbox](https://codesandbox.io/s/jovial-lalande-26yep)**
-
-Now, this feels a lot better! When we click Next, it gets disabled because clicking it multiple times doesn't make sense. And the new "Loading..." tells the user that the app didn't freeze.
-
-### Reviewing the Changes {#reviewing-the-changes}
-
-Let's take another look at all the changes we've made since the [original example](https://codesandbox.io/s/infallible-feather-xjtbu):
-
-```js{3-5,9,11,14,19}
-function App() {
-  const [resource, setResource] = useState(initialResource);
-  const [startTransition, isPending] = useTransition({
-    timeoutMs: 3000
-  });
-  return (
-    <>
-      <button
-        disabled={isPending}
-        onClick={() => {
-          startTransition(() => {
-            const nextUserId = getNextId(resource.userId);
-            setResource(fetchProfileData(nextUserId));
-          });
-        }}
-      >
-        Next
-      </button>
-      {isPending ? " Loading..." : null}
-      <ProfilePage resource={resource} />
-    </>
-  );
-}
-```
-
-**[Try it on CodeSandbox](https://codesandbox.io/s/jovial-lalande-26yep)**
-
-It took us only seven lines of code to add this transition:
-
-* We've imported the `useTransition` Hook and used it in the component that updates the state.
-* We've passed `{timeoutMs: 3000}` to stay on the previous screen for at most 3 seconds.
-* We've wrapped our state update into `startTransition` to tell React it's okay to delay it.
-* We're using `isPending` to communicate the state transition progress to the user and to disable the button.
-
-As a result, clicking "Next" doesn't perform an immediate state transition to an "undesirable" loading state, but instead stays on the previous screen and communicates progress there.
-
-### Where Does the Update Happen? {#where-does-the-update-happen}
-
-This wasn't very difficult to implement. However, if you start thinking about how this could possibly work, it might become a little mindbending. If we set the state, how come we don't see the result right away? *Where* is the next `<ProfilePage>` rendering?
-
-Clearly, both "versions" of `<ProfilePage>` exist at the same time. We know the old one exists because we see it on the screen and even display a progress indicator on it. And we know the new version also exists *somewhere*, because it's the one that we're waiting for!
-
-**But how can two versions of the same component exist at the same time?**
-
-This gets at the root of what Concurrent Mode is. We've [previously said](/docs/concurrent-mode-intro.html#intentional-loading-sequences) it's a bit like React working on state update on a "branch". Another way we can conceptualize is that wrapping a state update in `startTransition` begins rendering it *"in a different universe"*, much like in science fiction movies. We don't "see" that universe directly -- but we can get a signal from it that tells us something is happening (`isPending`). When the update is ready, our "universes" merge back together, and we see the result on the screen!
-
-Play a bit more with the [demo](https://codesandbox.io/s/jovial-lalande-26yep), and try to imagine it happening.
-
-Of course, two versions of the tree rendering *at the same time* is an illusion, just like the idea that all programs run on your computer at the same time is an illusion. An operating system switches between different applications very fast. Similarly, React can switch between the version of the tree you see on the screen and the version that it's "preparing" to show next.
-
-An API like `useTransition` lets you focus on the desired user experience, and not think about the mechanics of how it's implemented. Still, it can be a helpful metaphor to imagine that updates wrapped in `startTransition` happen "on a branch" or "in a different world".
-
-### Transitions Are Everywhere {#transitions-are-everywhere}
-
-As we learned from the [Suspense walkthrough](/docs/concurrent-mode-suspense.html), any component can "suspend" any time if some data it needs is not ready yet. We can strategically place `<Suspense>` boundaries in different parts of the tree to handle this, but it won't always be enough.
-
-Let's get back to our [first Suspense demo](https://codesandbox.io/s/frosty-hermann-bztrp) where there was just one profile. Currently, it fetches the data only once. We'll add a "Refresh" button to check for server updates.
-
-Our first attempt might look like this:
-
-```js{6-8,13-15}
-const initialResource = fetchUserAndPosts();
-
-function ProfilePage() {
-  const [resource, setResource] = useState(initialResource);
-
-  function handleRefreshClick() {
-    setResource(fetchUserAndPosts());
-  }
-
-  return (
-    <Suspense fallback={<h1>Loading profile...</h1>}>
-      <ProfileDetails resource={resource} />
-      <button onClick={handleRefreshClick}>
-        Refresh
-      </button>
-      <Suspense fallback={<h1>Loading posts...</h1>}>
-        <ProfileTimeline resource={resource} />
-      </Suspense>
-    </Suspense>
-  );
-}
-```
-
-**[Try it on CodeSandbox](https://codesandbox.io/s/boring-shadow-100tf)**
-
-In this example, we start data fetching at the load *and* every time you press "Refresh". We put the result of calling `fetchUserAndPosts()` into state so that components below can start reading the new data from the request we just kicked off.
-
-We can see in [this example](https://codesandbox.io/s/boring-shadow-100tf) that pressing "Refresh" works. The `<ProfileDetails>` and `<ProfileTimeline>` components receive a new `resource` prop that represents the fresh data, they "suspend" because we don't have a response yet, and we see the fallbacks. When the response loads, we can see the updated posts (our fake API adds them every 3 seconds).
-
-However, the experience feels really jarring. We were browsing a page, but it got replaced by a loading state right as we were interacting with it. It's disorienting. **Just like before, to avoid showing an undesirable loading state, we can wrap the state update in a transition:**
-
-```js{2-5,9-11,21}
-function ProfilePage() {
-  const [startTransition, isPending] = useTransition({
-    // Wait 10 seconds before fallback
-    timeoutMs: 10000
-  });
-  const [resource, setResource] = useState(initialResource);
-
-  function handleRefreshClick() {
-    startTransition(() => {
-      setResource(fetchProfileData());
-    });
-  }
-
-  return (
-    <Suspense fallback={<h1>Loading profile...</h1>}>
-      <ProfileDetails resource={resource} />
-      <button
-        onClick={handleRefreshClick}
-        disabled={isPending}
-      >
-        {isPending ? "Refreshing..." : "Refresh"}
-      </button>
-      <Suspense fallback={<h1>Loading posts...</h1>}>
-        <ProfileTimeline resource={resource} />
-      </Suspense>
-    </Suspense>
-  );
-}
-```
-
-**[Try it on CodeSandbox](https://codesandbox.io/s/sleepy-field-mohzb)**
-
-This feels a lot better! Clicking "Refresh" doesn't pull us away from the page we're browsing anymore. We see something is loading "inline", and when the data is ready, it's displayed.
-
-### Baking Transitions Into the Design System {#baking-transitions-into-the-design-system}
-
-We can now see that the need for `useTransition` is *very* common. Pretty much any button click or interaction that can lead to a component suspending needs to be wrapped in `useTransition` to avoid accidentally hiding something the user is interacting with.
-
-This can lead to a lot of repetitive code across components. This is why **we generally recommend to bake `useTransition` into the *design system* components of your app**. For example, we can extract the transition logic into our own `<Button>` component:
-
-```js{7-9,20,24}
-function Button({ children, onClick }) {
-  const [startTransition, isPending] = useTransition({
-    timeoutMs: 10000
-  });
-
-  function handleClick() {
-    startTransition(() => {
-      onClick();
-    });
-  }
-
-  const spinner = (
-    // ...
-  );
-
-  return (
-    <>
-      <button
-        onClick={handleClick}
-        disabled={isPending}
-      >
-        {children}
-      </button>
-      {isPending ? spinner : null}
-    </>
-  );
-}
-```
-
-**[Try it on CodeSandbox](https://codesandbox.io/s/modest-ritchie-iufrh)**
-
-Note that the button doesn't care *what* state we're updating. It's wrapping *any* state updates that happen during its `onClick` handler into a transition. Now that our `<Button>` takes care of setting up the transition, the `<ProfilePage>` component doesn't need to set up its own:
-
-```js{4-6,11-13}
-function ProfilePage() {
-  const [resource, setResource] = useState(initialResource);
-
-  function handleRefreshClick() {
-    setResource(fetchProfileData());
-  }
-
-  return (
-    <Suspense fallback={<h1>Loading profile...</h1>}>
-      <ProfileDetails resource={resource} />
-      <Button onClick={handleRefreshClick}>
-        Refresh
-      </Button>
-      <Suspense fallback={<h1>Loading posts...</h1>}>
-        <ProfileTimeline resource={resource} />
-      </Suspense>
-    </Suspense>
-  );
-}
-```
-
-**[Try it on CodeSandbox](https://codesandbox.io/s/modest-ritchie-iufrh)**
-
-When a button gets clicked, it starts a transition and calls `props.onClick()` inside of it -- which triggers `handleRefreshClick` in the `<ProfilePage>` component. We start fetching the fresh data, but it doesn't trigger a fallback because we're inside a transition, and the 10 second timeout specified in the `useTransition` call hasn't passed yet. While a transition is pending, the button displays an inline loading indicator.
-
-We can see now how Concurrent Mode helps us achieve a good user experience without sacrificing isolation and modularity of components. React coordinates the transition.
-
-## The Three Steps {#the-three-steps}
-
-By now we have discussed all of the different visual states that an update may go through. In this section, we will give them names and talk about the progression between them.
-
-<br>
-
-<img src="../images/docs/cm-steps-simple.png" alt="Three steps" />
-
-At the very end, we have the **Complete** state. That's where we want to eventually get to. It represents the moment when the next screen is fully rendered and isn't loading more data.
-
-But before our screen can be Complete, we might need to load some data or code. When we're on the next screen, but some parts of it are still loading, we call that a **Skeleton** state.
-
-Finally, there are two primary ways that lead us to the Skeleton state. We will illustrate the difference between them with a concrete example.
-
-### Default: Receded → Skeleton → Complete {#default-receded-skeleton-complete}
-
-Open [this example](https://codesandbox.io/s/prod-grass-g1lh5) and click "Open Profile". You will see several visual states one by one:
-
-* **Receded**: For a second, you will see the `<h1>Loading the app...</h1>` fallback.
-* **Skeleton:** You will see the `<ProfilePage>` component with `<h2>Loading posts...</h2>` inside.
-* **Complete:** You will see the `<ProfilePage>` component with no fallbacks inside. Everything was fetched.
-
-How do we separate the Receded and the Skeleton states? The difference between them is that the **Receded** state feels like "taking a step back" to the user, while the **Skeleton** state feels like "taking a step forward" in our progress to show more content.
-
-In this example, we started our journey on the `<HomePage>`:
-
-```js
-<Suspense fallback={...}>
-  {/* previous screen */}
-  <HomePage />
-</Suspense>
-```
-
-After the click, React started rendering the next screen:
-
-```js
-<Suspense fallback={...}>
-  {/* next screen */}
-  <ProfilePage>
-    <ProfileDetails />
-    <Suspense fallback={...}>
-      <ProfileTimeline />
-    </Suspense>
-  </ProfilePage>
-</Suspense>
-```
-
-Both `<ProfileDetails>` and `<ProfileTimeline>` need data to render, so they suspend:
-
-```js{4,6}
-<Suspense fallback={...}>
-  {/* next screen */}
-  <ProfilePage>
-    <ProfileDetails /> {/* suspends! */}
-    <Suspense fallback={<h2>Loading posts...</h2>}>
-      <ProfileTimeline /> {/* suspends! */}
-    </Suspense>
-  </ProfilePage>
-</Suspense>
-```
-
-When a component suspends, React needs to show the closest fallback. But the closest fallback to `<ProfileDetails>` is at the top level:
-
-```js{2,3,7}
-<Suspense fallback={
-  // We see this fallback now because of <ProfileDetails>
-  <h1>Loading the app...</h1>
-}>
-  {/* next screen */}
-  <ProfilePage>
-    <ProfileDetails /> {/* suspends! */}
-    <Suspense fallback={...}>
-      <ProfileTimeline />
-    </Suspense>
-  </ProfilePage>
-</Suspense>
-```
-
-This is why when we click the button, it feels like we've "taken a step back". The `<Suspense>` boundary which was previously showing useful content (`<HomePage />`) had to "recede" to showing the fallback (`<h1>Loading the app...</h1>`). We call that a **Receded** state.
-
-As we load more data, React will retry rendering, and `<ProfileDetails>` can render successfully. Finally, we're in the **Skeleton** state. We see the new page with missing parts:
-
-```js{6,7,9}
-<Suspense fallback={...}>
-  {/* next screen */}
-  <ProfilePage>
-    <ProfileDetails />
-    <Suspense fallback={
-      // We see this fallback now because of <ProfileTimeline>
-      <h2>Loading posts...</h2>
-    }>
-      <ProfileTimeline /> {/* suspends! */}
-    </Suspense>
-  </ProfilePage>
-</Suspense>
-```
-
-Eventually, they load too, and we get to the **Complete** state.
-
-This scenario (Receded → Skeleton → Complete) is the default one. However, the Receded state is not very pleasant because it "hides" existing information. This is why React lets us opt into a different sequence (**Pending** → Skeleton → Complete) with `useTransition`.
-
-### Preferred: Pending → Skeleton → Complete {#preferred-pending-skeleton-complete}
-
-When we `useTransition`, React will let us "stay" on the previous screen -- and show a progress indicator there. We call that a **Pending** state. It feels much better than the Receded state because none of our existing content disappears, and the page stays interactive.
-
-You can compare these two examples to feel the difference:
-
-* Default: [Receded → Skeleton → Complete](https://codesandbox.io/s/prod-grass-g1lh5)
-* **Preferred: [Pending → Skeleton → Complete](https://codesandbox.io/s/focused-snow-xbkvl)**
-
-The only difference between these two examples is that the first uses regular `<button>`s, but the second one uses our custom `<Button>` component with `useTransition`.
-
-### Wrap Lazy Features in `<Suspense>` {#wrap-lazy-features-in-suspense}
-
-Open [this example](https://codesandbox.io/s/nameless-butterfly-fkw5q). When you press a button, you'll see the Pending state for a second before moving on. This transition feels nice and fluid.
-
-We will now add a brand new feature to the profile page -- a list of fun facts about a person:
-
-```js{8,13-25}
-function ProfilePage({ resource }) {
-  return (
-    <>
-      <ProfileDetails resource={resource} />
-      <Suspense fallback={<h2>Loading posts...</h2>}>
-        <ProfileTimeline resource={resource} />
-      </Suspense>
-      <ProfileTrivia resource={resource} />
-    </>
-  );
-}
-
-function ProfileTrivia({ resource }) {
-  const trivia = resource.trivia.read();
-  return (
-    <>
-      <h2>Fun Facts</h2>
-      <ul>
-        {trivia.map(fact => (
-          <li key={fact.id}>{fact.text}</li>
-        ))}
-      </ul>
-    </>
-  );
-}
-```
-
-**[Try it on CodeSandbox](https://codesandbox.io/s/focused-mountain-uhkzg)**
-
-If you press "Open Profile" now, you can tell something is wrong. It takes a whole seven seconds to make the transition now! This is because our trivia API is too slow. Let's say we can't make the API faster. How can we improve the user experience with this constraint?
-
-If we don't want to stay in the Pending state for too long, our first instinct might be to set `timeoutMs` in `useTransition` to something smaller, like `3000`. You can try this [here](https://codesandbox.io/s/practical-kowalevski-kpjg4). This lets us escape the prolonged Pending state, but we still don't have anything useful to show!
-
-There is a simpler way to solve this. **Instead of making the transition shorter, we can "disconnect" the slow component from the transition** by wrapping it into `<Suspense>`:
-
-```js{8,10}
-function ProfilePage({ resource }) {
-  return (
-    <>
-      <ProfileDetails resource={resource} />
-      <Suspense fallback={<h2>Loading posts...</h2>}>
-        <ProfileTimeline resource={resource} />
-      </Suspense>
-      <Suspense fallback={<h2>Loading fun facts...</h2>}>
-        <ProfileTrivia resource={resource} />
-      </Suspense>
-    </>
-  );
-}
-```
-
-**[Try it on CodeSandbox](https://codesandbox.io/s/condescending-shape-s6694)**
-
-This reveals an important insight. React always prefers to go to the Skeleton state as soon as possible. Even if we use transitions with long timeouts everywhere, React will not stay in the Pending state for longer than necessary to avoid the Receded state.
-
-**If some feature isn't a vital part of the next screen, wrap it in `<Suspense>` and let it load lazily.** This ensures we can show the rest of the content as soon as possible. Conversely, if a screen is *not worth showing* without some component, such as `<ProfileDetails>` in our example, do *not* wrap it in `<Suspense>`. Then the transitions will "wait" for it to be ready.
-
-### Suspense Reveal "Train" {#suspense-reveal-train}
-
-When we're already on the next screen, sometimes the data needed to "unlock" different `<Suspense>` boundaries arrives in quick succession. For example, two different responses might arrive after 1000ms and 1050ms, respectively. If you've already waited for a second, waiting another 50ms is not going to be perceptible. This is why React reveals `<Suspense>` boundaries on a schedule, like a "train" that arrives periodically. This trades a small delay for reducing the layout thrashing and the number of visual changes presented to the user.
-
-You can see a demo of this [here](https://codesandbox.io/s/admiring-mendeleev-y54mk). The "posts" and "fun facts" responses come within 100ms of each other. But React coalesces them and "reveals" their Suspense boundaries together. 
-
-### Delaying a Pending Indicator {#delaying-a-pending-indicator}
-
-Our `Button` component will immediately show the Pending state indicator on click:
-
-```js{2,13}
-function Button({ children, onClick }) {
-  const [startTransition, isPending] = useTransition({
-    timeoutMs: 10000
-  });
-
-  // ...
-
-  return (
-    <>
-      <button onClick={handleClick} disabled={isPending}>
-        {children}
-      </button>
-      {isPending ? spinner : null}
-    </>
-  );
-}
-```
-
-**[Try it on CodeSandbox](https://codesandbox.io/s/floral-thunder-iy826)**
-
-This signals to the user that some work is happening. However, if the transition is relatively short (less than 500ms), it might be too distracting and make the transition itself feel *slower*.
-
-One possible solution to this is to *delay the spinner itself* from displaying:
-
-```css
-.DelayedSpinner {
-  animation: 0s linear 0.5s forwards makeVisible;
-  visibility: hidden;
-}
-
-@keyframes makeVisible {
-  to {
-    visibility: visible;
-  }
-}
-```
-
-```js{2-4,10}
-const spinner = (
-  <span className="DelayedSpinner">
-    {/* ... */}
-  </span>
-);
-
-return (
-  <>
-    <button onClick={handleClick}>{children}</button>
-    {isPending ? spinner : null}
-  </>
-);
-```
-
-**[Try it on CodeSandbox](https://codesandbox.io/s/gallant-spence-l6wbk)**
-
-With this change, even though we're in the Pending state, we don't display any indication to the user until 500ms has passed. This may not seem like much of an improvement when the API responses are slow. But compare how it feels [before](https://codesandbox.io/s/thirsty-liskov-1ygph) and [after](https://codesandbox.io/s/hardcore-http-s18xr) when the API call is fast. Even though the rest of the code hasn't changed, suppressing a "too fast" loading state improves the perceived performance by not calling attention to the delay.
-
-### Recap {#recap}
-
-The most important things we learned so far are:
-
-* By default, our loading sequence is Receded → Skeleton → Complete.
-* The Receded state doesn't feel very nice because it hides existing content.
-* With `useTransition`, we can opt into showing a Pending state first instead. This will keep us on the previous screen while the next screen is being prepared.
-* If we don't want some component to delay the transition, we can wrap it in its own `<Suspense>` boundary.
-* Instead of doing `useTransition` in every other component, we can build it into our design system.
-
-## Other Patterns {#other-patterns}
-
-Transitions are probably the most common Concurrent Mode pattern you'll encounter, but there are a few more patterns you might find useful.
-
-### Splitting High and Low Priority State {#splitting-high-and-low-priority-state}
-
-When you design React components, it is usually best to find the "minimal representation" of state. For example, instead of keeping `firstName`, `lastName`, and `fullName` in state, it's usually better keep only `firstName` and `lastName`, and then calculate `fullName` during rendering. This lets us avoid mistakes where we update one state but forget the other state.
-
-However, in Concurrent Mode there are cases where you might *want* to "duplicate" some data in different state variables. Consider this tiny translation app:
-
-```js
-const initialQuery = "Hello, world";
-const initialResource = fetchTranslation(initialQuery);
-
-function App() {
-  const [query, setQuery] = useState(initialQuery);
-  const [resource, setResource] = useState(initialResource);
-
-  function handleChange(e) {
-    const value = e.target.value;
-    setQuery(value);
-    setResource(fetchTranslation(value));
-  }
-
-  return (
-    <>
-      <input
-        value={query}
-        onChange={handleChange}
-      />
-      <Suspense fallback={<p>Loading...</p>}>
-        <Translation resource={resource} />
-      </Suspense>
-    </>
-  );
-}
-
-function Translation({ resource }) {
-  return (
-    <p>
-      <b>{resource.read()}</b>
-    </p>
-  );
-}
-```
-
-**[Try it on CodeSandbox](https://codesandbox.io/s/brave-villani-ypxvf)**
-
-Notice how when you type into the input, the `<Translation>` component suspends, and we see the `<p>Loading...</p>` fallback until we get fresh results. This is not ideal. It would be better if we could see the *previous* translation for a bit while we're fetching the next one.
-
-In fact, if we open the console, we'll see a warning:
-
-```
-Warning: App triggered a user-blocking update that suspended.
-
-The fix is to split the update into multiple parts: a user-blocking update to provide immediate feedback, and another update that triggers the bulk of the changes.
-
-Refer to the documentation for useTransition to learn how to implement this pattern.
-```
-
-As we mentioned earlier, if some state update causes a component to suspend, that state update should be wrapped in a transition. Let's add `useTransition` to our component:
-
-```js{4-6,10,13}
-function App() {
-  const [query, setQuery] = useState(initialQuery);
-  const [resource, setResource] = useState(initialResource);
-  const [startTransition, isPending] = useTransition({
-    timeoutMs: 5000
-  });
-
-  function handleChange(e) {
-    const value = e.target.value;
-    startTransition(() => {
-      setQuery(value);
-      setResource(fetchTranslation(value));
-    });
-  }
-
-  // ...
-
-}
-```
-
-**[Try it on CodeSandbox](https://codesandbox.io/s/zen-keldysh-rifos)**
-
-Try typing into the input now. Something's wrong! The input is updating very slowly.
-
-We've fixed the first problem (suspending outside of a transition). But now because of the transition, our state doesn't update immediately, and it can't "drive" a controlled input!
-
-The answer to this problem **is to split the state in two parts:** a "high priority" part that updates immediately, and a "low priority" part that may wait for a transition.
-
-In our example, we already have two state variables. The input text is in `query`, and we read the translation from `resource`. We want changes to the `query` state to happen immediately, but changes to the `resource` (i.e. fetching a new translation) should trigger a transition.
-
-So the correct fix is to put `setQuery` (which doesn't suspend) *outside* the transition, but `setResource` (which will suspend) *inside* of it.
-
-```js{4,5}
-function handleChange(e) {
-  const value = e.target.value;
-  
-  // Outside the transition (urgent)
-  setQuery(value);
-
-  startTransition(() => {
-    // Inside the transition (may be delayed)
-    setResource(fetchTranslation(value));
-  });
-}
-```
-
-**[Try it on CodeSandbox](https://codesandbox.io/s/lively-smoke-fdf93)**
-
-With this change, it works as expected. We can type into the input immediately, and the translation later "catches up" to what we have typed.
-
-### Deferring a Value {#deferring-a-value}
-
-By default, React always renders a consistent UI. Consider code like this:
-
-```js
-<>
-  <ProfileDetails user={user} />
-  <ProfileTimeline user={user} />
-</>
-```
-
-React guarantees that whenever we look at these components on the screen, they will reflect data from the same `user`. If a different `user` is passed down because of a state update, you would see them changing together. You can't ever record a screen and find a frame where they would show values from different `user`s. (If you ever run into a case like this, file a bug!)
-
-This makes sense in the vast majority of situations. Inconsistent UI is confusing and can mislead users. (For example, it would be terrible if a messenger's Send button and the conversation picker pane "disagreed" about which thread is currently selected.)
-
-However, sometimes it might be helpful to intentionally introduce an inconsistency. We could do it manually by "splitting" the state like above, but React also offers a built-in Hook for this:
-
-```js
-import { useDeferredValue } from 'react';
-
-const deferredValue = useDeferredValue(value, {
-  timeoutMs: 5000
-});
-```
-
-To demonstrate this feature, we'll use [the profile switcher example](https://codesandbox.io/s/musing-ramanujan-bgw2o). Click the "Next" button and notice how it takes 1 second to do a transition.
-
-Let's say that fetching the user details is very fast and only takes 300 milliseconds. Currently, we're waiting a whole second because we need both user details and posts to display a consistent profile page. But what if we want to show the details faster?
-
-If we're willing to sacrifice consistency, we could **pass potentially stale data to the components that delay our transition**. That's what `useDeferredValue()` lets us do:
-
-```js{2-4,10,11,21}
-function ProfilePage({ resource }) {
-  const deferredResource = useDeferredValue(resource, {
-    timeoutMs: 1000
-  });
-  return (
-    <Suspense fallback={<h1>Loading profile...</h1>}>
-      <ProfileDetails resource={resource} />
-      <Suspense fallback={<h1>Loading posts...</h1>}>
-        <ProfileTimeline
-          resource={deferredResource}
-          isStale={deferredResource !== resource}
-        />
-      </Suspense>
-    </Suspense>
-  );
-}
-
-function ProfileTimeline({ isStale, resource }) {
-  const posts = resource.posts.read();
-  return (
-    <ul style={{ opacity: isStale ? 0.7 : 1 }}>
-      {posts.map(post => (
-        <li key={post.id}>{post.text}</li>
-      ))}
-    </ul>
-  );
-}
-```
-
-**[Try it on CodeSandbox](https://codesandbox.io/s/vigorous-keller-3ed2b)**
-
-The tradeoff we're making here is that `<ProfileTimeline>` will be inconsistent with other components and potentially show an older item. Click "Next" a few times, and you'll notice it. But thanks to that, we were able to cut down the transition time from 1000ms to 300ms.
-
-Whether or not it's an appropriate tradeoff depends on the situation. But it's a handy tool, especially when the content doesn't change noticeably between items, and the user might not even realize they were looking at a stale version for a second.
-
-It's worth noting that `useDeferredValue` is not *only* useful for data fetching. It also helps when an expensive component tree causes an interaction (e.g. typing in an input) to be sluggish. Just like we can "defer" a value that takes too long to fetch (and show its old value despite other components updating), we can do this with trees that take too long to render.
-
-For example, consider a filterable list like this:
-
-```js
-function App() {
-  const [text, setText] = useState("hello");
-
-  function handleChange(e) {
-    setText(e.target.value);
-  }
-
-  return (
-    <div className="App">
-      <label>
-        Type into the input:{" "}
-        <input value={text} onChange={handleChange} />
-      </label>
-      ...
-      <MySlowList text={text} />
-    </div>
-  );
-}
-```
-
-**[Try it on CodeSandbox](https://codesandbox.io/s/pensive-shirley-wkp46)**
-
-In this example, **every item in `<MySlowList>` has an artificial slowdown -- each of them blocks the thread for a few milliseconds**. We'd never do this in a real app, but this helps us simulate what can happen in a deep component tree with no single obvious place to optimize.
-
-We can see how typing in the input causes stutter. Now let's add `useDeferredValue`:
-
-```js{3-5,18}
-function App() {
-  const [text, setText] = useState("hello");
-  const deferredText = useDeferredValue(text, {
-    timeoutMs: 5000
-  });
-
-  function handleChange(e) {
-    setText(e.target.value);
-  }
-
-  return (
-    <div className="App">
-      <label>
-        Type into the input:{" "}
-        <input value={text} onChange={handleChange} />
-      </label>
-      ...
-      <MySlowList text={deferredText} />
-    </div>
-  );
-}
-```
-
-**[Try it on CodeSandbox](https://codesandbox.io/s/infallible-dewdney-9fkv9)**
-
-Now typing has a lot less stutter -- although we pay for this by showing the results with a lag.
-
-How is this different from debouncing? Our example has a fixed artificial delay (3ms for every one of 80 items), so there is always a delay, no matter how fast our computer is. However, the `useDeferredValue` value only "lags behind" if the rendering takes a while. There is no minimal lag imposed by React. With a more realistic workload, you can expect the lag to adjust to the user’s device. On fast machines, the lag would be smaller or non-existent, and on slow machines, it would be more noticeable. In both cases, the app would remain responsive. That’s the advantage of this mechanism over debouncing or throttling, which always impose a minimal delay and can't avoid blocking the thread while rendering.
-
-Even though there is an improvement in responsiveness, this example isn't as compelling yet because Concurrent Mode is missing some crucial optimizations for this use case. Still, it is interesting to see that features like `useDeferredValue` (or `useTransition`) are useful regardless of whether we're waiting for network or for computational work to finish.
-
-### SuspenseList {#suspenselist}
-
-`<SuspenseList>` is the last pattern that's related to orchestrating loading states.
-
-Consider this example:
-
-```js{5-10}
-function ProfilePage({ resource }) {
-  return (
-    <>
-      <ProfileDetails resource={resource} />
-      <Suspense fallback={<h2>Loading posts...</h2>}>
-        <ProfileTimeline resource={resource} />
-      </Suspense>
-      <Suspense fallback={<h2>Loading fun facts...</h2>}>
-        <ProfileTrivia resource={resource} />
-      </Suspense>
-    </>
-  );
-}
-```
-
-**[Try it on CodeSandbox](https://codesandbox.io/s/proud-tree-exg5t)**
-
-The API call duration in this example is randomized. If you keep refreshing it, you will notice that sometimes the posts arrive first, and sometimes the "fun facts" arrive first.
-
-This presents a problem. If the response for fun facts arrives first, we'll see the fun facts below the `<h2>Loading posts...</h2>` fallback for posts. We might start reading them, but then the *posts* response will come back, and shift all the facts down. This is jarring.
-
-One way we could fix it is by putting them both in a single boundary:
-
-```js
-<Suspense fallback={<h2>Loading posts and fun facts...</h2>}>
-  <ProfileTimeline resource={resource} />
-  <ProfileTrivia resource={resource} />
-</Suspense>
-```
-
-**[Try it on CodeSandbox](https://codesandbox.io/s/currying-violet-5jsiy)**
-
-The problem with this is that now we *always* wait for both of them to be fetched. However, if it's the *posts* that came back first, there's no reason to delay showing them. When fun facts load later, they won't shift the layout because they're already below the posts.
-
-Other approaches to this, such as composing Promises in a special way, are increasingly difficult to pull off when the loading states are located in different components down the tree.
-
-To solve this, we will import `SuspenseList`:
-
-```js
-import { SuspenseList } from 'react';
-```
-
-`<SuspenseList>` coordinates the "reveal order" of the closest `<Suspense>` nodes below it:
-
-```js{3,11}
-function ProfilePage({ resource }) {
-  return (
-    <SuspenseList revealOrder="forwards">
-      <ProfileDetails resource={resource} />
-      <Suspense fallback={<h2>Loading posts...</h2>}>
-        <ProfileTimeline resource={resource} />
-      </Suspense>
-      <Suspense fallback={<h2>Loading fun facts...</h2>}>
-        <ProfileTrivia resource={resource} />
-      </Suspense>
-    </SuspenseList>
-  );
-}
-```
-
-**[Try it on CodeSandbox](https://codesandbox.io/s/black-wind-byilt)**
-
-The `revealOrder="forwards"` option means that the closest `<Suspense>` nodes inside this list **will only "reveal" their content in the order they appear in the tree -- even if the data for them arrives in a different order**. `<SuspenseList>` has other interesting modes: try changing `"forwards"` to `"backwards"` or `"together"` and see what happens.
-
-You can control how many loading states are visible at once with the `tail` prop. If we specify `tail="collapsed"`, we'll see *at most one* fallback at a time. You can play with it [here](https://codesandbox.io/s/adoring-almeida-1zzjh).
-
-Keep in mind that `<SuspenseList>` is composable, like anything in React. For example, you can create a grid by putting several `<SuspenseList>` rows inside a `<SuspenseList>` table.
-
-## Next Steps {#next-steps}
-
-Concurrent Mode offers a powerful UI programming model and a set of new composable primitives to help you orchestrate delightful user experiences.
-
-It's a result of several years of research and development, but it's not finished. In the section on [adopting Concurrent Mode](/docs/concurrent-mode-adoption.html), we'll describe how you can try it and what you can expect.
diff --git a/content/docs/concurrent-mode-reference.md b/content/docs/concurrent-mode-reference.md
deleted file mode 100644
index e36bb0532..000000000
--- a/content/docs/concurrent-mode-reference.md
+++ /dev/null
@@ -1,201 +0,0 @@
----
-id: concurrent-mode-reference
-title: Concurrent Mode API Reference (Experimental)
-permalink: docs/concurrent-mode-reference.html
-prev: concurrent-mode-adoption.html
----
-
-<style>
-.scary > blockquote {
-  background-color: rgba(237, 51, 21, 0.2);
-  border-left-color: #ed3315;
-}
-</style>
-
-<div class="scary">
-
->Caution:
->
->This page describes **experimental features that are [not yet available](/docs/concurrent-mode-adoption.html) in a stable release**. Don't rely on experimental builds of React in production apps. These features may change significantly and without a warning before they become a part of React.
->
->This documentation is aimed at early adopters and people who are curious. **If you're new to React, don't worry about these features** -- you don't need to learn them right now.
-
-</div>
-
-This page is an API reference for the React [Concurrent Mode](/docs/concurrent-mode-intro.html). If you're looking for a guided introduction instead, check out [Concurrent UI Patterns](/docs/concurrent-mode-patterns.html).
-
-**Note: This is a Community Preview and not the final stable version. There will likely be future changes to these APIs. Use at your own risk!**
-
-- [Enabling Concurrent Mode](#concurrent-mode)
-    - [`createRoot`](#createroot)
-- [Suspense](#suspense)
-    - [`Suspense`](#suspensecomponent)
-    - [`SuspenseList`](#suspenselist)
-    - [`useTransition`](#usetransition)
-    - [`useDeferredValue`](#usedeferredvalue)
-
-## Enabling Concurrent Mode {#concurrent-mode}
-
-### `createRoot` {#createroot}
-
-```js
-ReactDOM.createRoot(rootNode).render(<App />);
-```
-
-Replaces `ReactDOM.render(<App />, rootNode)` and enables Concurrent Mode.
-
-For more information on Concurrent Mode, check out the [Concurrent Mode documentation.](/docs/concurrent-mode-intro.html)
-
-## Suspense API {#suspense}
-
-### `Suspense` {#suspensecomponent}
-
-```js
-<Suspense fallback={<h1>Loading...</h1>}>
-  <ProfilePhoto />
-  <ProfileDetails />
-</Suspense>
-```
-
-`Suspense` lets your components "wait" for something before they can render, showing a fallback while waiting.
-
-In this example, `ProfileDetails` is waiting for an asynchronous API call to fetch some data. While we wait for `ProfileDetails` and `ProfilePhoto`, we will show the `Loading...` fallback instead. It is important to note that until all children inside `<Suspense>` has loaded, we will continue to show the fallback.
-
-`Suspense` takes two props:
-* **fallback** takes a loading indicator. The fallback is shown until all of the children of the `Suspense` component have finished rendering.
-* **unstable_avoidThisFallback** takes a boolean. It tells React whether to "skip" revealing this boundary during the initial load. This API will likely be removed in a future release.
-
-### `<SuspenseList>` {#suspenselist}
-
-```js
-<SuspenseList revealOrder="forwards">
-  <Suspense fallback={'Loading...'}>
-    <ProfilePicture id={1} />
-  </Suspense>
-  <Suspense fallback={'Loading...'}>
-    <ProfilePicture id={2} />
-  </Suspense>
-  <Suspense fallback={'Loading...'}>
-    <ProfilePicture id={3} />
-  </Suspense>
-  ...
-</SuspenseList>
-```
-
-`SuspenseList` helps coordinate many components that can suspend by orchestrating the order in which these components are revealed to the user.
-
-When multiple components need to fetch data, this data may arrive in an unpredictable order. However, if you wrap these items in a `SuspenseList`, React will not show an item in the list until previous items have been displayed (this behavior is adjustable).
-
-`SuspenseList` takes two props:
-* **revealOrder (forwards, backwards, together)** defines the order in which the `SuspenseList` children should be revealed.
-  * `together` reveals *all* of them when they're ready instead of one by one.
-* **tail (collapsed, hidden)** dictates how unloaded items in a `SuspenseList` is shown. 
-    * By default, `SuspenseList` will show all fallbacks in the list.
-    * `collapsed` shows only the next fallback in the list.
-    * `hidden` doesn't show any unloaded items.
-
-Note that `SuspenseList` only operates on the closest `Suspense` and `SuspenseList` components below it. It does not search for boundaries deeper than one level. However, it is possible to nest multiple `SuspenseList` components in each other to build grids.
-
-### `useTransition` {#usetransition}
-
-```js
-const SUSPENSE_CONFIG = { timeoutMs: 2000 };
-
-const [startTransition, isPending] = useTransition(SUSPENSE_CONFIG);
-```
-
-`useTransition` allows components to avoid undesirable loading states by waiting for content to load before **transitioning to the next screen**. It also allows components to defer slower, data fetching updates until subsequent renders so that more crucial updates can be rendered immediately.
-
-The `useTransition` hook returns two values in an array.
-* `startTransition` is a function that takes a callback. We can use it to tell React which state we want to defer.
-* `isPending` is a boolean. It's React's way of informing us whether we're waiting for the transition to finish.
-
-**If some state update causes a component to suspend, that state update should be wrapped in a transition.**
-
-```js
-const SUSPENSE_CONFIG = { timeoutMs: 2000 };
-
-function App() {
-  const [resource, setResource] = useState(initialResource);
-  const [startTransition, isPending] = useTransition(SUSPENSE_CONFIG);
-  return (
-    <>
-      <button
-        disabled={isPending}
-        onClick={() => {
-          startTransition(() => {
-            const nextUserId = getNextId(resource.userId);
-            setResource(fetchProfileData(nextUserId));
-          });
-        }}
-      >
-        Next
-      </button>
-      {isPending ? " Loading..." : null}
-      <Suspense fallback={<Spinner />}>
-        <ProfilePage resource={resource} />
-      </Suspense>
-    </>
-  );
-}
-```
-
-In this code, we've wrapped our data fetching with `startTransition`. This allows us to start fetching the profile data right away, while deferring the render of the next profile page and its associated `Spinner` for 2 seconds (the time shown in `timeoutMs`).
-
-The `isPending` boolean lets React know that our component is transitioning, so we are able to let the user know this by showing some loading text on the previous profile page.
-
-**For an in-depth look at transitions, you can read [Concurrent UI Patterns](/docs/concurrent-mode-patterns.html#transitions).**
-
-#### useTransition Config {#usetransition-config}
-
-```js
-const SUSPENSE_CONFIG = { timeoutMs: 2000 };
-```
-
-`useTransition` accepts an **optional Suspense Config** with a `timeoutMs`. This timeout (in milliseconds) tells React how long to wait before showing the next state (the new Profile Page in the above example).
-
-**Note: We recommend that you share Suspense Config between different modules.**
-
-
-### `useDeferredValue` {#usedeferredvalue}
-
-```js
-const deferredValue = useDeferredValue(value, { timeoutMs: 2000 });
-```
-
-Returns a deferred version of the value that may "lag behind" it for at most `timeoutMs`.
-
-This is commonly used to keep the interface responsive when you have something that renders immediately based on user input and something that needs to wait for a data fetch.
-
-A good example of this is a text input.
-
-```js
-function App() {
-  const [text, setText] = useState("hello");
-  const deferredText = useDeferredValue(text, { timeoutMs: 2000 }); 
-
-  return (
-    <div className="App">
-      {/* Keep passing the current text to the input */}
-      <input value={text} onChange={handleChange} />
-      ...
-      {/* But the list is allowed to "lag behind" when necessary */}
-      <MySlowList text={deferredText} />
-    </div>
-  );
- }
-```
-
-This allows us to start showing the new text for the `input` immediately, which allows the webpage to feel responsive. Meanwhile, `MySlowList` "lags behind" for up to 2 seconds according to the `timeoutMs` before updating, allowing it to render with the current text in the background.
-
-**For an in-depth look at deferring values, you can read [Concurrent UI Patterns](/docs/concurrent-mode-patterns.html#deferring-a-value).**
-
-#### useDeferredValue Config {#usedeferredvalue-config}
-
-```js
-const SUSPENSE_CONFIG = { timeoutMs: 2000 };
-```
-
-`useDeferredValue` accepts an **optional Suspense Config** with a `timeoutMs`. This timeout (in milliseconds) tells React how long the deferred value is allowed to lag behind.
-
-React will always try to use a shorter lag when network and device allows it.
diff --git a/content/docs/concurrent-mode-suspense.md b/content/docs/concurrent-mode-suspense.md
deleted file mode 100644
index 12ad112b2..000000000
--- a/content/docs/concurrent-mode-suspense.md
+++ /dev/null
@@ -1,736 +0,0 @@
----
-id: concurrent-mode-suspense
-title: Suspense for Data Fetching (Experimental)
-permalink: docs/concurrent-mode-suspense.html
-prev: concurrent-mode-intro.html
-next: concurrent-mode-patterns.html
----
-
-<style>
-.scary > blockquote {
-  background-color: rgba(237, 51, 21, 0.2);
-  border-left-color: #ed3315;
-}
-</style>
-
-<div class="scary">
-
->Caution:
->
->This page describes **experimental features that are [not yet available](/docs/concurrent-mode-adoption.html) in a stable release**. Don't rely on experimental builds of React in production apps. These features may change significantly and without a warning before they become a part of React.
->
->This documentation is aimed at early adopters and people who are curious. **If you're new to React, don't worry about these features** -- you don't need to learn them right now. For example, if you're looking for a data fetching tutorial that works today, read [this article](https://www.robinwieruch.de/react-hooks-fetch-data/) instead.
-
-</div>
-
-React 16.6 added a `<Suspense>` component that lets you "wait" for some code to load and declaratively specify a loading state (like a spinner) while we're waiting:
-
-```jsx
-const ProfilePage = React.lazy(() => import('./ProfilePage')); // Lazy-loaded
-
-// Show a spinner while the profile is loading
-<Suspense fallback={<Spinner />}>
-  <ProfilePage />
-</Suspense>
-```
-
-Suspense for Data Fetching is a new feature that lets you also use `<Suspense>` to **declaratively "wait" for anything else, including data.** This page focuses on the data fetching use case, but it can also wait for images, scripts, or other asynchronous work.
-
-- [What Is Suspense, Exactly?](#what-is-suspense-exactly)
-  - [What Suspense Is Not](#what-suspense-is-not)
-  - [What Suspense Lets You Do](#what-suspense-lets-you-do)
-- [Using Suspense in Practice](#using-suspense-in-practice)
-  - [What If I Don’t Use Relay?](#what-if-i-dont-use-relay)
-  - [For Library Authors](#for-library-authors)
-- [Traditional Approaches vs Suspense](#traditional-approaches-vs-suspense)
-  - [Approach 1: Fetch-on-Render (not using Suspense)](#approach-1-fetch-on-render-not-using-suspense)
-  - [Approach 2: Fetch-Then-Render (not using Suspense)](#approach-2-fetch-then-render-not-using-suspense)
-  - [Approach 3: Render-as-You-Fetch (using Suspense)](#approach-3-render-as-you-fetch-using-suspense)
-- [Start Fetching Early](#start-fetching-early)
-  - [We’re Still Figuring This Out](#were-still-figuring-this-out)
-- [Suspense and Race Conditions](#suspense-and-race-conditions)
-  - [Race Conditions with useEffect](#race-conditions-with-useeffect)
-  - [Race Conditions with componentDidUpdate](#race-conditions-with-componentdidupdate)
-  - [The Problem](#the-problem)
-  - [Solving Race Conditions with Suspense](#solving-race-conditions-with-suspense)
-- [Handling Errors](#handling-errors)
-- [Next Steps](#next-steps)
-
-## What Is Suspense, Exactly? {#what-is-suspense-exactly}
-
-Suspense lets your components "wait" for something before they can render. In [this example](https://codesandbox.io/s/frosty-hermann-bztrp), two components wait for an asynchronous API call to fetch some data:
-
-```js
-const resource = fetchProfileData();
-
-function ProfilePage() {
-  return (
-    <Suspense fallback={<h1>Loading profile...</h1>}>
-      <ProfileDetails />
-      <Suspense fallback={<h1>Loading posts...</h1>}>
-        <ProfileTimeline />
-      </Suspense>
-    </Suspense>
-  );
-}
-
-function ProfileDetails() {
-  // Try to read user info, although it might not have loaded yet
-  const user = resource.user.read();
-  return <h1>{user.name}</h1>;
-}
-
-function ProfileTimeline() {
-  // Try to read posts, although they might not have loaded yet
-  const posts = resource.posts.read();
-  return (
-    <ul>
-      {posts.map(post => (
-        <li key={post.id}>{post.text}</li>
-      ))}
-    </ul>
-  );
-}
-```
-
-**[Try it on CodeSandbox](https://codesandbox.io/s/frosty-hermann-bztrp)**
-
-This demo is a teaser. Don't worry if it doesn't quite make sense yet. We'll talk more about how it works below. Keep in mind that Suspense is more of a *mechanism*, and particular APIs like `fetchProfileData()` or `resource.posts.read()` in the above example are not very important. If you're curious, you can find their definitions right in the [demo sandbox](https://codesandbox.io/s/frosty-hermann-bztrp).
-
-Suspense is not a data fetching library. It's a **mechanism for data fetching libraries** to communicate to React that *the data a component is reading is not ready yet*. React can then wait for it to be ready and update the UI. At Facebook, we use Relay and its [new Suspense integration](https://relay.dev/docs/en/experimental/step-by-step). We expect that other libraries like Apollo can provide similar integrations.
-
-In the long term, we intend Suspense to become the primary way to read asynchronous data from components -- no matter where that data is coming from.
-
-### What Suspense Is Not {#what-suspense-is-not}
-
-Suspense is significantly different from existing approaches to these problems, so reading about it for the first time often leads to misconceptions. Let's clarify the most common ones:
-
- * **It is not a data fetching implementation.** It does not assume that you use GraphQL, REST, or any other particular data format, library, transport, or protocol.
-
- * **It is not a ready-to-use client.** You can't "replace" `fetch` or Relay with Suspense. But you can use a library that's integrated with Suspense (for example, [new Relay APIs](https://relay.dev/docs/en/experimental/api-reference)).
-
- * **It does not couple data fetching to the view layer.** It helps orchestrate displaying the loading states in your UI, but it doesn't tie your network logic to React components.
-
-### What Suspense Lets You Do {#what-suspense-lets-you-do}
-
-So what's the point of Suspense? There are a few ways we can answer this:
-
-* **It lets data fetching libraries deeply integrate with React.** If a data fetching library implements Suspense support, using it from React components feels very natural.
-
-* **It lets you orchestrate intentionally designed loading states.** It doesn't say _how_ the data is fetched, but it lets you closely control the visual loading sequence of your app.
-
-* **It helps you avoid race conditions.** Even with `await`, asynchronous code is often error-prone. Suspense feels more like reading data *synchronously* — as if it were already loaded.
-
-## Using Suspense in Practice {#using-suspense-in-practice}
-
-At Facebook, so far we have only used the Relay integration with Suspense in production. **If you're looking for a practical guide to get started today, [check out the Relay Guide](https://relay.dev/docs/en/experimental/step-by-step)!** It demonstrates patterns that have already worked well for us in production.
-
-**The code demos on this page use a "fake" API implementation rather than Relay.** This makes them easier to understand if you're not familiar with GraphQL, but they won't tell you the "right way" to build an app with Suspense. This page is more conceptual and is intended to help you see *why* Suspense works in a certain way, and which problems it solves.
-
-### What If I Don't Use Relay? {#what-if-i-dont-use-relay}
-
-If you don't use Relay today, you might have to wait before you can really try Suspense in your app. So far, it's the only implementation that we tested in production and are confident in.
-
-Over the next several months, many libraries will appear with different takes on Suspense APIs. **If you prefer to learn when things are more stable, you might prefer to ignore this work for now, and come back when the Suspense ecosystem is more mature.**
-
-You can also write your own integration for a data fetching library, if you'd like.
-
-### For Library Authors {#for-library-authors}
-
-We expect to see a lot of experimentation in the community with other libraries. There is one important thing to note for data fetching library authors.
-
-Although it's technically doable, Suspense is **not** currently intended as a way to start fetching data when a component renders. Rather, it lets components express that they're "waiting" for data that is *already being fetched*. **[Building Great User Experiences with Concurrent Mode and Suspense](/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense.html) describes why this matters and how to implement this pattern in practice.**
-
-Unless you have a solution that helps prevent waterfalls, we suggest to prefer APIs that favor or enforce fetching before render. For a concrete example, you can look at how [Relay Suspense API](https://relay.dev/docs/en/experimental/api-reference#usepreloadedquery) enforces preloading. Our messaging about this hasn't been very consistent in the past. Suspense for Data Fetching is still experimental, so you can expect our recommendations to change over time as we learn more from production usage and understand the problem space better.
-
-## Traditional Approaches vs Suspense {#traditional-approaches-vs-suspense}
-
-We could introduce Suspense without mentioning the popular data fetching approaches. However, this makes it more difficult to see which problems Suspense solves, why these problems are worth solving, and how Suspense is different from the existing solutions.
-
-Instead, we'll look at Suspense as a logical next step in a sequence of approaches:
-
-* **Fetch-on-render (for example, `fetch` in `useEffect`):** Start rendering components. Each of these components may trigger data fetching in their effects and lifecycle methods. This approach often leads to "waterfalls".
-* **Fetch-then-render (for example, Relay without Suspense):** Start fetching all the data for the next screen as early as possible. When the data is ready, render the new screen. We can't do anything until the data arrives.
-* **Render-as-you-fetch (for example, Relay with Suspense):** Start fetching all the required data for the next screen as early as possible, and start rendering the new screen *immediately — before we get a network response*. As data streams in, React retries rendering components that still need data until they're all ready.
-
->Note
->
->This is a bit simplified, and in practice solutions tend to use a mix of different approaches. Still, we will look at them in isolation to better contrast their tradeoffs.
-
-To compare these approaches, we'll implement a profile page with each of them.
-
-### Approach 1: Fetch-on-Render (not using Suspense) {#approach-1-fetch-on-render-not-using-suspense}
-
-A common way to fetch data in React apps today is to use an effect:
-
-```js
-// In a function component:
-useEffect(() => {
-  fetchSomething();
-}, []);
-
-// Or, in a class component:
-componentDidMount() {
-  fetchSomething();
-}
-```
-
-We call this approach "fetch-on-render" because it doesn't start fetching until *after* the component has rendered on the screen. This leads to a problem known as a "waterfall".
-
-Consider these `<ProfilePage>` and `<ProfileTimeline>` components:
-
-```js{4-6,22-24}
-function ProfilePage() {
-  const [user, setUser] = useState(null);
-
-  useEffect(() => {
-    fetchUser().then(u => setUser(u));
-  }, []);
-
-  if (user === null) {
-    return <p>Loading profile...</p>;
-  }
-  return (
-    <>
-      <h1>{user.name}</h1>
-      <ProfileTimeline />
-    </>
-  );
-}
-
-function ProfileTimeline() {
-  const [posts, setPosts] = useState(null);
-
-  useEffect(() => {
-    fetchPosts().then(p => setPosts(p));
-  }, []);
-
-  if (posts === null) {
-    return <h2>Loading posts...</h2>;
-  }
-  return (
-    <ul>
-      {posts.map(post => (
-        <li key={post.id}>{post.text}</li>
-      ))}
-    </ul>
-  );
-}
-```
-
-**[Try it on CodeSandbox](https://codesandbox.io/s/fragrant-glade-8huj6)**
-
-If you run this code and watch the console logs, you'll notice the sequence is:
-
-1. We start fetching user details
-2. We wait...
-3. We finish fetching user details
-4. We start fetching posts
-5. We wait...
-6. We finish fetching posts
-
-If fetching user details takes three seconds, we'll only *start* fetching the posts after three seconds! That's a "waterfall": an unintentional *sequence* that should have been parallelized.
-
-Waterfalls are common in code that fetches data on render. They're possible to solve, but as the product grows, many people prefer to use a solution that guards against this problem.
-
-### Approach 2: Fetch-Then-Render (not using Suspense) {#approach-2-fetch-then-render-not-using-suspense}
-
-Libraries can prevent waterfalls by offering a more centralized way to do data fetching. For example, Relay solves this problem by moving the information about the data a component needs to statically analyzable *fragments*, which later get composed into a single query.
-
-On this page, we don't assume knowledge of Relay, so we won't be using it for this example. Instead, we'll write something similar manually by combining our data fetching methods:
-
-```js
-function fetchProfileData() {
-  return Promise.all([
-    fetchUser(),
-    fetchPosts()
-  ]).then(([user, posts]) => {
-    return {user, posts};
-  })
-}
-```
-
-In this example, `<ProfilePage>` waits for both requests but starts them in parallel:
-
-```js{1,2,8-13}
-// Kick off fetching as early as possible
-const promise = fetchProfileData();
-
-function ProfilePage() {
-  const [user, setUser] = useState(null);
-  const [posts, setPosts] = useState(null);
-
-  useEffect(() => {
-    promise.then(data => {
-      setUser(data.user);
-      setPosts(data.posts);
-    });
-  }, []);
-
-  if (user === null) {
-    return <p>Loading profile...</p>;
-  }
-  return (
-    <>
-      <h1>{user.name}</h1>
-      <ProfileTimeline posts={posts} />
-    </>
-  );
-}
-
-// The child doesn't trigger fetching anymore
-function ProfileTimeline({ posts }) {
-  if (posts === null) {
-    return <h2>Loading posts...</h2>;
-  }
-  return (
-    <ul>
-      {posts.map(post => (
-        <li key={post.id}>{post.text}</li>
-      ))}
-    </ul>
-  );
-}
-```
-
-**[Try it on CodeSandbox](https://codesandbox.io/s/wandering-morning-ev6r0)**
-
-The event sequence now becomes like this:
-
-1. We start fetching user details
-2. We start fetching posts
-3. We wait...
-4. We finish fetching user details
-5. We finish fetching posts
-
-We've solved the previous network "waterfall", but accidentally introduced a different one. We wait for *all* data to come back with `Promise.all()` inside `fetchProfileData`, so now we can't render profile details until the posts have been fetched too. We have to wait for both.
-
-Of course, this is possible to fix in this particular example. We could remove the `Promise.all()` call, and wait for both Promises separately. However, this approach gets progressively more difficult as the complexity of our data and component tree grows. It's hard to write reliable components when arbitrary parts of the data tree may be missing or stale. So fetching all data for the new screen and *then* rendering is often a more practical option.
-
-### Approach 3: Render-as-You-Fetch (using Suspense) {#approach-3-render-as-you-fetch-using-suspense}
-
-In the previous approach, we fetched data before we called `setState`:
-
-1. Start fetching
-2. Finish fetching
-3. Start rendering
-
-With Suspense, we still start fetching first, but we flip the last two steps around:
-
-1. Start fetching
-2. **Start rendering**
-3. **Finish fetching**
-
-**With Suspense, we don't wait for the response to come back before we start rendering.** In fact, we start rendering *pretty much immediately* after kicking off the network request:
-
-```js{2,17,23}
-// This is not a Promise. It's a special object from our Suspense integration.
-const resource = fetchProfileData();
-
-function ProfilePage() {
-  return (
-    <Suspense fallback={<h1>Loading profile...</h1>}>
-      <ProfileDetails />
-      <Suspense fallback={<h1>Loading posts...</h1>}>
-        <ProfileTimeline />
-      </Suspense>
-    </Suspense>
-  );
-}
-
-function ProfileDetails() {
-  // Try to read user info, although it might not have loaded yet
-  const user = resource.user.read();
-  return <h1>{user.name}</h1>;
-}
-
-function ProfileTimeline() {
-  // Try to read posts, although they might not have loaded yet
-  const posts = resource.posts.read();
-  return (
-    <ul>
-      {posts.map(post => (
-        <li key={post.id}>{post.text}</li>
-      ))}
-    </ul>
-  );
-}
-```
-
-**[Try it on CodeSandbox](https://codesandbox.io/s/frosty-hermann-bztrp)**
-
-Here's what happens when we render `<ProfilePage>` on the screen:
-
-1. We've already kicked off the requests in `fetchProfileData()`. It gave us a special "resource" instead of a Promise. In a realistic example, it would be provided by our data library's Suspense integration, like Relay.
-2. React tries to render `<ProfilePage>`. It returns `<ProfileDetails>` and `<ProfileTimeline>` as children.
-3. React tries to render `<ProfileDetails>`. It calls `resource.user.read()`. None of the data is fetched yet, so this component "suspends". React skips over it, and tries rendering other components in the tree.
-4. React tries to render `<ProfileTimeline>`. It calls `resource.posts.read()`. Again, there's no data yet, so this component also "suspends". React skips over it too, and tries rendering other components in the tree.
-5. There's nothing left to try rendering. Because `<ProfileDetails>` suspended, React shows the closest `<Suspense>` fallback above it in the tree: `<h1>Loading profile...</h1>`. We're done for now.
-
-This `resource` object represents the data that isn't there yet, but might eventually get loaded. When we call `read()`, we either get the data, or the component "suspends".
-
-**As more data streams in, React will retry rendering, and each time it might be able to progress "deeper".** When `resource.user` is fetched, the `<ProfileDetails>` component will render successfully and we'll no longer need the `<h1>Loading profile...</h1>` fallback. Eventually, we'll get all the data, and there will be no fallbacks on the screen.
-
-This has an interesting implication. Even if we use a GraphQL client that collects all data requirements in a single request, *streaming the response lets us show more content sooner*. Because we render-*as-we-fetch* (as opposed to *after* fetching), if `user` appears in the response earlier than `posts`, we'll be able to "unlock" the outer `<Suspense>` boundary before the response even finishes. We might have missed this earlier, but even the fetch-then-render solution contained a waterfall: between fetching and rendering. Suspense doesn't inherently suffer from this waterfall, and libraries like Relay take advantage of this.
-
-Note how we eliminated the `if (...)` "is loading" checks from our components. This doesn't only remove boilerplate code, but it also simplifies making quick design changes. For example, if we wanted profile details and posts to always "pop in" together, we could delete the `<Suspense>` boundary between them. Or we could make them independent from each other by giving each *its own* `<Suspense>` boundary. Suspense lets us change the granularity of our loading states and orchestrate their sequencing without invasive changes to our code.
-
-## Start Fetching Early {#start-fetching-early}
-
-If you're working on a data fetching library, there's a crucial aspect of Render-as-You-Fetch you don't want to miss. **We kick off fetching _before_ rendering.** Look at this code example closer:
-
-```js
-// Start fetching early!
-const resource = fetchProfileData();
-
-// ...
-
-function ProfileDetails() {
-  // Try to read user info
-  const user = resource.user.read();
-  return <h1>{user.name}</h1>;
-}
-```
-
-**[Try it on CodeSandbox](https://codesandbox.io/s/frosty-hermann-bztrp)**
-
-Note that the `read()` call in this example doesn't *start* fetching. It only tries to read the data that is **already being fetched**. This difference is crucial to creating fast applications with Suspense. We don't want to delay loading data until a component starts rendering. As a data fetching library author, you can enforce this by making it impossible to get a `resource` object without also starting a fetch. Every demo on this page using our "fake API" enforces this.
-
-You might object that fetching "at the top level" like in this example is impractical. What are we going to do if we navigate to another profile's page? We might want to fetch based on props. The answer to this is **we want to start fetching in the event handlers instead**. Here is a simplified example of navigating between user's pages:
-
-```js{1,2,10,11}
-// First fetch: as soon as possible
-const initialResource = fetchProfileData(0);
-
-function App() {
-  const [resource, setResource] = useState(initialResource);
-  return (
-    <>
-      <button onClick={() => {
-        const nextUserId = getNextId(resource.userId);
-        // Next fetch: when the user clicks
-        setResource(fetchProfileData(nextUserId));
-      }}>
-        Next
-      </button>
-      <ProfilePage resource={resource} />
-    </>
-  );
-}
-```
-
-**[Try it on CodeSandbox](https://codesandbox.io/s/infallible-feather-xjtbu)**
-
-With this approach, we can **fetch code and data in parallel**. When we navigate between pages, we don't need to wait for a page's code to load to start loading its data. We can start fetching both code and data at the same time (during the link click), delivering a much better user experience.
-
-This poses a question of how do we know *what* to fetch before rendering the next screen. There are several ways to solve this (for example, by integrating data fetching closer with your routing solution). If you work on a data fetching library, [Building Great User Experiences with Concurrent Mode and Suspense](/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense.html) presents a deep dive on how to accomplish this and why it's important.
-
-### We're Still Figuring This Out {#were-still-figuring-this-out}
-
-Suspense itself as a mechanism is flexible and doesn't have many constraints. Product code needs to be more constrained to ensure no waterfalls, but there are different ways to provide these guarantees. Some questions that we're currently exploring include:
-
-* Fetching early can be cumbersome to express. How do we make it easier to avoid waterfalls?
-* When we fetch data for a page, can the API encourage including data for instant transitions *from* it?
-* What is the lifetime of a response? Should caching be global or local? Who manages the cache?
-* Can Proxies help express lazy-loaded APIs without inserting `read()` calls everywhere?
-* What would the equivalent of composing GraphQL queries look like for arbitrary Suspense data?
-
-Relay has its own answers to some of these questions. There is certainly more than a single way to do it, and we're excited to see what new ideas the React community comes up with.
-
-## Suspense and Race Conditions {#suspense-and-race-conditions}
-
-Race conditions are bugs that happen due to incorrect assumptions about the order in which our code may run. Fetching data in the `useEffect` Hook or in class lifecycle methods like `componentDidUpdate` often leads to them. Suspense can help here, too — let's see how.
-
-To demonstrate the issue, we will add a top-level `<App>` component that renders our `<ProfilePage>` with a button that lets us **switch between different profiles**:
-
-```js{9-11}
-function getNextId(id) {
-  // ...
-}
-
-function App() {
-  const [id, setId] = useState(0);
-  return (
-    <>
-      <button onClick={() => setId(getNextId(id))}>
-        Next
-      </button>
-      <ProfilePage id={id} />
-    </>
-  );
-}
-```
-
-Let's compare how different data fetching strategies deal with this requirement.
-
-### Race Conditions with `useEffect` {#race-conditions-with-useeffect}
-
-First, we'll try a version of our original "fetch in effect" example. We'll modify it to pass an `id` parameter from the `<ProfilePage>` props to `fetchUser(id)` and `fetchPosts(id)`:
-
-```js{1,5,6,14,19,23,24}
-function ProfilePage({ id }) {
-  const [user, setUser] = useState(null);
-
-  useEffect(() => {
-    fetchUser(id).then(u => setUser(u));
-  }, [id]);
-
-  if (user === null) {
-    return <p>Loading profile...</p>;
-  }
-  return (
-    <>
-      <h1>{user.name}</h1>
-      <ProfileTimeline id={id} />
-    </>
-  );
-}
-
-function ProfileTimeline({ id }) {
-  const [posts, setPosts] = useState(null);
-
-  useEffect(() => {
-    fetchPosts(id).then(p => setPosts(p));
-  }, [id]);
-
-  if (posts === null) {
-    return <h2>Loading posts...</h2>;
-  }
-  return (
-    <ul>
-      {posts.map(post => (
-        <li key={post.id}>{post.text}</li>
-      ))}
-    </ul>
-  );
-}
-```
-
-**[Try it on CodeSandbox](https://codesandbox.io/s/nervous-glade-b5sel)**
-
-Note how we also changed the effect dependencies from `[]` to `[id]` — because we want the effect to re-run when the `id` changes. Otherwise, we wouldn't refetch new data.
-
-If we try this code, it might seem like it works at first. However, if we randomize the delay time in our "fake API" implementation and press the "Next" button fast enough, we'll see from the console logs that something is going very wrong. **Requests from the previous profiles may sometimes "come back" after we've already switched the profile to another ID -- and in that case they can overwrite the new state with a stale response for a different ID.**
-
-This problem is possible to fix (you could use the effect cleanup function to either ignore or cancel stale requests), but it's unintuitive and difficult to debug.
-
-### Race Conditions with `componentDidUpdate` {#race-conditions-with-componentdidupdate}
-
-One might think that this is a problem specific to `useEffect` or Hooks. Maybe if we port this code to classes or use convenient syntax like `async` / `await`, it will solve the problem?
-
-Let's try that:
-
-```js
-class ProfilePage extends React.Component {
-  state = {
-    user: null,
-  };
-  componentDidMount() {
-    this.fetchData(this.props.id);
-  }
-  componentDidUpdate(prevProps) {
-    if (prevProps.id !== this.props.id) {
-      this.fetchData(this.props.id);
-    }
-  }
-  async fetchData(id) {
-    const user = await fetchUser(id);
-    this.setState({ user });
-  }
-  render() {
-    const { id } = this.props;
-    const { user } = this.state;
-    if (user === null) {
-      return <p>Loading profile...</p>;
-    }
-    return (
-      <>
-        <h1>{user.name}</h1>
-        <ProfileTimeline id={id} />
-      </>
-    );
-  }
-}
-
-class ProfileTimeline extends React.Component {
-  state = {
-    posts: null,
-  };
-  componentDidMount() {
-    this.fetchData(this.props.id);
-  }
-  componentDidUpdate(prevProps) {
-    if (prevProps.id !== this.props.id) {
-      this.fetchData(this.props.id);
-    }
-  }
-  async fetchData(id) {
-    const posts = await fetchPosts(id);
-    this.setState({ posts });
-  }
-  render() {
-    const { posts } = this.state;
-    if (posts === null) {
-      return <h2>Loading posts...</h2>;
-    }
-    return (
-      <ul>
-        {posts.map(post => (
-          <li key={post.id}>{post.text}</li>
-        ))}
-      </ul>
-    );
-  }
-}
-```
-
-**[Try it on CodeSandbox](https://codesandbox.io/s/trusting-clarke-8twuq)**
-
-This code is deceptively easy to read.
-
-Unfortunately, neither using a class nor the `async` / `await` syntax helped us solve this problem. This version suffers from exactly the same race conditions, for the same reasons.
-
-### The Problem {#the-problem}
-
-React components have their own "lifecycle". They may receive props or update state at any point in time. However, each asynchronous request *also* has its own "lifecycle". It starts when we kick it off, and finishes when we get a response. The difficulty we're experiencing is "synchronizing" several processes in time that affect each other. This is hard to think about.
-
-### Solving Race Conditions with Suspense {#solving-race-conditions-with-suspense}
-
-Let's rewrite this example again, but using Suspense only:
-
-```js
-const initialResource = fetchProfileData(0);
-
-function App() {
-  const [resource, setResource] = useState(initialResource);
-  return (
-    <>
-      <button onClick={() => {
-        const nextUserId = getNextId(resource.userId);
-        setResource(fetchProfileData(nextUserId));
-      }}>
-        Next
-      </button>
-      <ProfilePage resource={resource} />
-    </>
-  );
-}
-
-function ProfilePage({ resource }) {
-  return (
-    <Suspense fallback={<h1>Loading profile...</h1>}>
-      <ProfileDetails resource={resource} />
-      <Suspense fallback={<h1>Loading posts...</h1>}>
-        <ProfileTimeline resource={resource} />
-      </Suspense>
-    </Suspense>
-  );
-}
-
-function ProfileDetails({ resource }) {
-  const user = resource.user.read();
-  return <h1>{user.name}</h1>;
-}
-
-function ProfileTimeline({ resource }) {
-  const posts = resource.posts.read();
-  return (
-    <ul>
-      {posts.map(post => (
-        <li key={post.id}>{post.text}</li>
-      ))}
-    </ul>
-  );
-}
-```
-
-**[Try it on CodeSandbox](https://codesandbox.io/s/infallible-feather-xjtbu)**
-
-In the previous Suspense example, we only had one `resource`, so we held it in a top-level variable. Now that we have multiple resources, we moved it to the `<App>`'s component state:
-
-```js{4}
-const initialResource = fetchProfileData(0);
-
-function App() {
-  const [resource, setResource] = useState(initialResource);
-```
-
-When we click "Next", the `<App>` component kicks off a request for the next profile, and passes *that* object down to the `<ProfilePage>` component:
-
-```js{4,8}
-  <>
-    <button onClick={() => {
-      const nextUserId = getNextId(resource.userId);
-      setResource(fetchProfileData(nextUserId));
-    }}>
-      Next
-    </button>
-    <ProfilePage resource={resource} />
-  </>
-```
-
-Again, notice that **we're not waiting for the response to set the state. It's the other way around: we set the state (and start rendering) immediately after kicking off a request**. As soon as we have more data, React "fills in" the content inside `<Suspense>` components.
-
-This code is very readable, but unlike the examples earlier, the Suspense version doesn't suffer from race conditions. You might be wondering why. The answer is that in the Suspense version, we don't have to think about *time* as much in our code. Our original code with race conditions needed to set the state *at the right moment later*, or otherwise it would be wrong. But with Suspense, we set the state *immediately* -- so it's harder to mess it up.
-
-## Handling Errors {#handling-errors}
-
-When we write code with Promises, we might use `catch()` to handle errors. How does this work with Suspense, given that we don't *wait* for Promises to start rendering?
-
-With Suspense, handling fetching errors works the same way as handling rendering errors -- you can render an [error boundary](/docs/error-boundaries.html) anywhere to "catch" errors in components below.
-
-First, we'll define an error boundary component to use across our project:
-
-```js
-// Error boundaries currently have to be classes.
-class ErrorBoundary extends React.Component {
-  state = { hasError: false, error: null };
-  static getDerivedStateFromError(error) {
-    return {
-      hasError: true,
-      error
-    };
-  }
-  render() {
-    if (this.state.hasError) {
-      return this.props.fallback;
-    }
-    return this.props.children;
-  }
-}
-```
-
-And then we can put it anywhere in the tree to catch errors:
-
-```js{5,9}
-function ProfilePage() {
-  return (
-    <Suspense fallback={<h1>Loading profile...</h1>}>
-      <ProfileDetails />
-      <ErrorBoundary fallback={<h2>Could not fetch posts.</h2>}>
-        <Suspense fallback={<h1>Loading posts...</h1>}>
-          <ProfileTimeline />
-        </Suspense>
-      </ErrorBoundary>
-    </Suspense>
-  );
-}
-```
-
-**[Try it on CodeSandbox](https://codesandbox.io/s/adoring-goodall-8wbn7)**
-
-It would catch both rendering errors *and* errors from Suspense data fetching. We can have as many error boundaries as we like but it's best to [be intentional](https://aweary.dev/fault-tolerance-react/) about their placement.
-
-## Next Steps {#next-steps}
-
-We've now covered the basics of Suspense for Data Fetching! Importantly, we now better understand *why* Suspense works this way, and how it fits into the data fetching space.
-
-Suspense answers some questions, but it also poses new questions of its own:
-
-* If some component "suspends", does the app freeze? How to avoid this?
-* What if we want to show a spinner in a different place than "above" the component in a tree?
-* If we intentionally *want* to show an inconsistent UI for a small period of time, can we do that?
-* Instead of showing a spinner, can we add a visual effect like "greying out" the current screen?
-* Why does our [last Suspense example](https://codesandbox.io/s/infallible-feather-xjtbu) log a warning when clicking the "Next" button?
-
-To answer these questions, we will refer to the next section on [Concurrent UI Patterns](/docs/concurrent-mode-patterns.html).
diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md
index 8c85ee840..d8c01b1e9 100644
--- a/content/docs/conditional-rendering.md
+++ b/content/docs/conditional-rendering.md
@@ -35,11 +35,9 @@ function Greeting(props) {
   return <GuestGreeting />;
 }
 
-ReactDOM.render(
-  // Try changing to isLoggedIn={true}:
-  <Greeting isLoggedIn={false} />,
-  document.getElementById('root')
-);
+const root = ReactDOM.createRoot(document.getElementById('root')); 
+// Try changing to isLoggedIn={true}:
+root.render(<Greeting isLoggedIn={false} />);
 ```
 
 [**Try it on CodePen**](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011)
@@ -110,10 +108,8 @@ class LoginControl extends React.Component {
   }
 }
 
-ReactDOM.render(
-  <LoginControl />,
-  document.getElementById('root')
-);
+const root = ReactDOM.createRoot(document.getElementById('root')); 
+root.render(<LoginControl />);
 ```
 
 [**Try it on CodePen**](https://codepen.io/gaearon/pen/QKzAgB?editors=0010)
@@ -140,10 +136,9 @@ function Mailbox(props) {
 }
 
 const messages = ['React', 'Re: React', 'Re:Re: React'];
-ReactDOM.render(
-  <Mailbox unreadMessages={messages} />,
-  document.getElementById('root')
-);
+
+const root = ReactDOM.createRoot(document.getElementById('root')); 
+root.render(<Mailbox unreadMessages={messages} />);
 ```
 
 [**Try it on CodePen**](https://codepen.io/gaearon/pen/ozJddz?editors=0010)
@@ -159,7 +154,7 @@ render() {
   const count = 0;
   return (
     <div>
-      { count && <h1>Messages: {count}</h1>}
+      {count && <h1>Messages: {count}</h1>}
     </div>
   );
 }
@@ -244,10 +239,8 @@ class Page extends React.Component {
   }
 }
 
-ReactDOM.render(
-  <Page />,
-  document.getElementById('root')
-);
+const root = ReactDOM.createRoot(document.getElementById('root')); 
+root.render(<Page />);
 ```
 
 [**Try it on CodePen**](https://codepen.io/gaearon/pen/Xjoqwm?editors=0010)
diff --git a/content/docs/create-a-new-react-app.md b/content/docs/create-a-new-react-app.md
index 12afba206..80b28ff6d 100644
--- a/content/docs/create-a-new-react-app.md
+++ b/content/docs/create-a-new-react-app.md
@@ -39,7 +39,7 @@ The React team primarily recommends these solutions:
 
 [Create React App](https://github.com/facebookincubator/create-react-app) is a comfortable environment for **learning React**, and is the best way to start building **a new [single-page](/docs/glossary.html#single-page-application) application** in React.
 
-It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. You’ll need to have [Node >= 10.16 and npm >= 5.6](https://nodejs.org/en/) on your machine. To create a project, run:
+It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. You’ll need to have [Node >= 14.0.0 and npm >= 5.6](https://nodejs.org/en/) on your machine. To create a project, run:
 
 ```bash
 npx create-react-app my-app
@@ -75,7 +75,7 @@ The following toolchains offer more flexibility and choice. We recommend them to
 
 - **[Nx](https://nx.dev/react)** is a toolkit for full-stack monorepo development, with built-in support for React, Next.js, [Express](https://expressjs.com/), and more.
 
-- **[Parcel](https://parceljs.org/)** is a fast, zero configuration web application bundler that [works with React](https://parceljs.org/recipes.html#react).
+- **[Parcel](https://parceljs.org/)** is a fast, zero configuration web application bundler that [works with React](https://parceljs.org/recipes/react/).
 
 - **[Razzle](https://github.com/jaredpalmer/razzle)** is a server-rendering framework that doesn't require any configuration, but offers more flexibility than Next.js.
 
diff --git a/content/docs/design-principles.md b/content/docs/design-principles.md
index 244e1b749..97a6ce91f 100644
--- a/content/docs/design-principles.md
+++ b/content/docs/design-principles.md
@@ -92,7 +92,7 @@ There is an internal joke in the team that React should have been called "Schedu
 
 Providing a good developer experience is important to us.
 
-For example, we maintain [React DevTools](https://github.com/facebook/react/tree/master/packages/react-devtools) which let you inspect the React component tree in Chrome and Firefox. We have heard that it brings a big productivity boost both to the Facebook engineers and to the community.
+For example, we maintain [React DevTools](https://github.com/facebook/react/tree/main/packages/react-devtools) which let you inspect the React component tree in Chrome and Firefox. We have heard that it brings a big productivity boost both to the Facebook engineers and to the community.
 
 We also try to go an extra mile to provide helpful developer warnings. For example, React warns you in development if you nest tags in a way that the browser doesn't understand, or if you make a common typo in the API. Developer warnings and the related checks are the main reason why the development version of React is slower than the production version.
 
diff --git a/content/docs/error-boundaries.md b/content/docs/error-boundaries.md
index ef9a6d58f..a3f4b61f0 100644
--- a/content/docs/error-boundaries.md
+++ b/content/docs/error-boundaries.md
@@ -62,11 +62,11 @@ Then you can use it as a regular component:
 
 Error boundaries work like a JavaScript `catch {}` block, but for components. Only class components can be error boundaries. In practice, most of the time you’ll want to declare an error boundary component once and use it throughout your application.
 
-Note that **error boundaries only catch errors in the components below them in the tree**. An error boundary can’t catch an error within itself. If an error boundary fails trying to render the error message, the error will propagate to the closest error boundary above it. This, too, is similar to how catch {} block works in JavaScript.
+Note that **error boundaries only catch errors in the components below them in the tree**. An error boundary can’t catch an error within itself. If an error boundary fails trying to render the error message, the error will propagate to the closest error boundary above it. This, too, is similar to how the `catch {}` block works in JavaScript.
 
 ## Live Demo {#live-demo}
 
-Check out [this example of declaring and using an error boundary](https://codepen.io/gaearon/pen/wqvxGa?editors=0010) with [React 16](/blog/2017/09/26/react-v16.0.html).
+Check out [this example of declaring and using an error boundary](https://codepen.io/gaearon/pen/wqvxGa?editors=0010).
 
 
 ## Where to Place Error Boundaries {#where-to-place-error-boundaries}
diff --git a/content/docs/faq-functions.md b/content/docs/faq-functions.md
index d3aa6f7f8..807d5fc60 100644
--- a/content/docs/faq-functions.md
+++ b/content/docs/faq-functions.md
@@ -37,14 +37,13 @@ class Foo extends Component {
 }
 ```
 
-#### Class Properties (Stage 3 Proposal) {#class-properties-stage-3-proposal}
+#### Class Properties (ES2022) {#class-properties-es2022}
 
 ```jsx
 class Foo extends Component {
-  // Note: this syntax is experimental and not standardized yet.
   handleClick = () => {
     console.log('Click happened');
-  }
+  };
   render() {
     return <button onClick={this.handleClick}>Click Me</button>;
   }
diff --git a/content/docs/faq-styling.md b/content/docs/faq-styling.md
index 678ea5264..30936a0ec 100644
--- a/content/docs/faq-styling.md
+++ b/content/docs/faq-styling.md
@@ -48,4 +48,4 @@ _Note that this functionality is not a part of React, but provided by third-part
 
 ### Can I do animations in React? {#can-i-do-animations-in-react}
 
-React can be used to power animations. See [React Transition Group](https://reactcommunity.org/react-transition-group/) and [React Motion](https://github.com/chenglou/react-motion) or [React Spring](https://github.com/react-spring/react-spring), for example.
+React can be used to power animations. See [React Transition Group](https://reactcommunity.org/react-transition-group/), [React Motion](https://github.com/chenglou/react-motion), [React Spring](https://github.com/react-spring/react-spring), or [Framer Motion](https://framer.com/motion), for example.
diff --git a/content/docs/forms.md b/content/docs/forms.md
index 82a0ab99b..08344f4b9 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -9,7 +9,7 @@ redirect_from:
   - "docs/forms-zh-CN.html"
 ---
 
-HTML form elements work a little bit differently from other DOM elements in React, because form elements naturally keep some internal state. For example, this form in plain HTML accepts a single name:
+HTML form elements work a bit differently from other DOM elements in React, because form elements naturally keep some internal state. For example, this form in plain HTML accepts a single name:
 
 ```html
 <form>
@@ -270,15 +270,15 @@ Also, since `setState()` automatically [merges a partial state into the current
 
 ## Controlled Input Null Value {#controlled-input-null-value}
 
-Specifying the value prop on a [controlled component](/docs/forms.html#controlled-components) prevents the user from changing the input unless you desire so. If you've specified a `value` but the input is still editable, you may have accidentally set `value` to `undefined` or `null`.
+Specifying the `value` prop on a [controlled component](/docs/forms.html#controlled-components) prevents the user from changing the input unless you desire so. If you've specified a `value` but the input is still editable, you may have accidentally set `value` to `undefined` or `null`.
 
 The following code demonstrates this. (The input is locked at first but becomes editable after a short delay.)
 
 ```javascript
-ReactDOM.render(<input value="hi" />, mountNode);
+ReactDOM.createRoot(mountNode).render(<input value="hi" />);
 
 setTimeout(function() {
-  ReactDOM.render(<input value={null} />, mountNode);
+  ReactDOM.createRoot(mountNode).render(<input value={null} />);
 }, 1000);
 
 ```
diff --git a/content/docs/getting-started.md b/content/docs/getting-started.md
index 32eaf22b0..f35f5bf0f 100644
--- a/content/docs/getting-started.md
+++ b/content/docs/getting-started.md
@@ -38,7 +38,7 @@ React has been designed from the start for gradual adoption, and **you can use a
 
 If you're interested in playing around with React, you can use an online code playground. Try a Hello World template on [CodePen](codepen://hello-world), [CodeSandbox](https://codesandbox.io/s/new), or [Stackblitz](https://stackblitz.com/fork/react).
 
-If you prefer to use your own text editor, you can also [download this HTML file](https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html), edit it, and open it from the local filesystem in your browser. It does a slow runtime code transformation, so we'd only recommend using this for simple demos.
+If you prefer to use your own text editor, you can also [download this HTML file](https://raw.githubusercontent.com/reactjs/reactjs.org/main/static/html/single-file-example.html), edit it, and open it from the local filesystem in your browser. It does a slow runtime code transformation, so we'd only recommend using this for simple demos.
 
 ### Add React to a Website {#add-react-to-a-website}
 
@@ -115,7 +115,7 @@ The [React blog](/blog/) is the official source for the updates from the React t
 
 You can also follow the [@reactjs account](https://twitter.com/reactjs) on Twitter, but you won't miss anything essential if you only read the blog.
 
-Not every React release deserves its own blog post, but you can find a detailed changelog for every release in the [`CHANGELOG.md` file in the React repository](https://github.com/facebook/react/blob/master/CHANGELOG.md), as well as on the [Releases](https://github.com/facebook/react/releases) page.
+Not every React release deserves its own blog post, but you can find a detailed changelog for every release in the [`CHANGELOG.md` file in the React repository](https://github.com/facebook/react/blob/main/CHANGELOG.md), as well as on the [Releases](https://github.com/facebook/react/releases) page.
 
 ## Versioned Documentation {#versioned-documentation}
 
diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md
index 5a746ee61..6f2e6ed6d 100644
--- a/content/docs/handling-events.md
+++ b/content/docs/handling-events.md
@@ -84,11 +84,6 @@ class Toggle extends React.Component {
     );
   }
 }
-
-ReactDOM.render(
-  <Toggle />,
-  document.getElementById('root')
-);
 ```
 
 [**Try it on CodePen**](https://codepen.io/gaearon/pen/xEmzGg?editors=0010)
@@ -97,15 +92,14 @@ You have to be careful about the meaning of `this` in JSX callbacks. In JavaScri
 
 This is not React-specific behavior; it is a part of [how functions work in JavaScript](https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/). Generally, if you refer to a method without `()` after it, such as `onClick={this.handleClick}`, you should bind that method.
 
-If calling `bind` annoys you, there are two ways you can get around this. If you are using the experimental [public class fields syntax](https://babeljs.io/docs/plugins/transform-class-properties/), you can use class fields to correctly bind callbacks:
+If calling `bind` annoys you, there are two ways you can get around this. You can use [public class fields syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Public_class_fields#public_instance_fields) to correctly bind callbacks:
 
 ```js{2-6}
 class LoggingButton extends React.Component {
   // This syntax ensures `this` is bound within handleClick.
-  // Warning: this is *experimental* syntax.
   handleClick = () => {
     console.log('this is:', this);
-  }
+  };
 
   render() {
     return (
diff --git a/content/docs/hello-world.md b/content/docs/hello-world.md
index 9477fd354..9c47bc08a 100644
--- a/content/docs/hello-world.md
+++ b/content/docs/hello-world.md
@@ -8,16 +8,14 @@ next: introducing-jsx.html
 
 React ရဲ့ အသေးငယ်ဆုံး ဥပမာဟာဆိုရင် အောက်ပါအတိုင်းဖြစ်ပါတယ်။
 
-```js
-ReactDOM.render(
-  <h1>Hello, world!</h1>,
-  document.getElementById('root')
-);
+```jsx
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<h1>Hello, world!</h1>);
 ```
 
 ၎င်းဥပမာဟာဆိုရင် "Hello, world!" ဆိုတဲ့စာသားလေးကို heading အနေနဲ့ ဖော်ပြပေးပါတယ်။
 
-[](codepen://hello-world)
+**[Try it on CodePen](https://codepen.io/gaearon/pen/rrpgNB?editors=1010)**
 
 Online editor တွင်စမ်းသပ်နိုင်ရန် အထက်ပါ link ကို နှိပ်ပါ။ မိမိကိုယ်တိုင် အပြောင်းအလဲများလုပ်နိုင်ပြီး ဘယ်လို output မျိူးပြန်ပြပေးတယ်ဆိုတာ လွပ်လွပ်လပ်လပ်စမ်းသပ်နိုင်ပါတယ်။ ဆက်လက်ဖော်ပြမည့် အသုံးပြုနည်းလမ်းညွန်မှာလည်း ယခုကဲ့သို့ ပြင်ဆင်စမ်းသပ်နိုင်သော ဥပမာများကို ဖော်ပြပေးသွားမှာ ဖြစ်ပါတယ်။ 
 
@@ -40,7 +38,11 @@ React ဟာဆိုရင် JavaScript library တစ်ခုဖြစ်ပ
 
 >မှတ်သားရန်
 >
+<<<<<<< HEAD
 >ယခုလမ်းညွန်ဟာဆိုရင် အသစ်ဖြစ်တဲ့ JavaScript syntax တွေကို ဥပမာအများစုမှာသုံးထားတာဖြစ်ပါတယ်။ သင့်အနေနဲ့ လွန်ခဲ့တဲ့နှစ်အနည်ငယ်ကစလို့ JavaScript ကိုအကျွမ်းတဝင်မရှိဘူးဆိုရင်  [ဤအချက်သုံးချက်](https://gist.github.com/gaearon/683e676101005de0add59e8bb345340c) ကိုစလေ့လာခြင်းဟာနည်းလမ်းမှန်ကန်စေမှာပါ။
+=======
+>This guide occasionally uses some newer JavaScript syntax in the examples. If you haven't worked with JavaScript in the last few years, [these three points](https://gist.github.com/gaearon/683e676101005de0add59e8bb345340c) should get you most of the way.
+>>>>>>> 38bf76a4a7bec6072d086ce8efdeef9ebb7af227
 
 
 ## ကဲစပြီးလေ့လာကြပါဆို့! {#lets-get-started}
diff --git a/content/docs/higher-order-components.md b/content/docs/higher-order-components.md
index 07dc90c38..9e56b7dea 100644
--- a/content/docs/higher-order-components.md
+++ b/content/docs/higher-order-components.md
@@ -297,7 +297,7 @@ The `compose` utility function is provided by many third-party libraries includi
 
 ## Convention: Wrap the Display Name for Easy Debugging {#convention-wrap-the-display-name-for-easy-debugging}
 
-The container components created by HOCs show up in the [React Developer Tools](https://github.com/facebook/react-devtools) like any other component. To ease debugging, choose a display name that communicates that it's the result of a HOC.
+The container components created by HOCs show up in the [React Developer Tools](https://github.com/facebook/react/tree/main/packages/react-devtools) like any other component. To ease debugging, choose a display name that communicates that it's the result of a HOC.
 
 The most common technique is to wrap the display name of the wrapped component. So if your higher-order component is named `withSubscription`, and the wrapped component's display name is `CommentList`, use the display name `WithSubscription(CommentList)`:
 
diff --git a/content/docs/hooks-faq.md b/content/docs/hooks-faq.md
index 2de3ef6b9..bb88abc99 100644
--- a/content/docs/hooks-faq.md
+++ b/content/docs/hooks-faq.md
@@ -97,8 +97,6 @@ You can't use Hooks *inside* a class component, but you can definitely mix class
 
 Our goal is for Hooks to cover all use cases for classes as soon as possible. There are no Hook equivalents to the uncommon `getSnapshotBeforeUpdate`, `getDerivedStateFromError` and `componentDidCatch` lifecycles yet, but we plan to add them soon.
 
-It is an early time for Hooks, and some third-party libraries might not be compatible with Hooks at the moment.
-
 ### Do Hooks replace render props and higher-order components? {#do-hooks-replace-render-props-and-higher-order-components}
 
 Often, render props and higher-order components render only a single child. We think Hooks are a simpler way to serve this use case. There is still a place for both patterns (for example, a virtual scroller component might have a `renderItem` prop, or a visual container component might have its own DOM structure). But in most cases, Hooks will be sufficient and can help reduce nesting in your tree.
@@ -150,7 +148,7 @@ We'll test it using React DOM. To make sure that the behavior matches what happe
 
 ```js{3,20-22,29-31}
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import { act } from 'react-dom/test-utils';
 import Counter from './Counter';
 
@@ -169,7 +167,7 @@ afterEach(() => {
 it('can render and update a counter', () => {
   // Test first render and effect
   act(() => {
-    ReactDOM.render(<Counter />, container);
+    ReactDOM.createRoot(container).render(<Counter />);
   });
   const button = container.querySelector('button');
   const label = container.querySelector('p');
@@ -333,54 +331,22 @@ This is a rare use case. If you need it, you can [use a mutable ref](#is-there-s
 
 ### How to get the previous props or state? {#how-to-get-the-previous-props-or-state}
 
-Currently, you can do it manually [with a ref](#is-there-something-like-instance-variables):
-
-```js{6,8}
-function Counter() {
-  const [count, setCount] = useState(0);
-
-  const prevCountRef = useRef();
-  useEffect(() => {
-    prevCountRef.current = count;
-  });
-  const prevCount = prevCountRef.current;
+There are two cases in which you might want to get previous props or state.
 
-  return <h1>Now: {count}, before: {prevCount}</h1>;
-}
-```
-
-This might be a bit convoluted but you can extract it into a custom Hook:
-
-```js{3,7}
-function Counter() {
-  const [count, setCount] = useState(0);
-  const prevCount = usePrevious(count);
-  return <h1>Now: {count}, before: {prevCount}</h1>;
-}
+Sometimes, you need previous props to **clean up an effect.** For example, you might have an effect that subscribes to a socket based on the `userId` prop. If the `userId` prop changes, you want to unsubscribe from the _previous_ `userId` and subscribe to the _next_ one. You don't need to do anything special for this to work:
 
-function usePrevious(value) {
-  const ref = useRef();
-  useEffect(() => {
-    ref.current = value;
-  });
-  return ref.current;
-}
+```js
+useEffect(() => {
+  ChatAPI.subscribeToSocket(props.userId);
+  return () => ChatAPI.unsubscribeFromSocket(props.userId);
+}, [props.userId]);
 ```
 
-Note how this would work for props, state, or any other calculated value.
+In the above example, if `userId` changes from `3` to `4`, `ChatAPI.unsubscribeFromSocket(3)` will run first, and then `ChatAPI.subscribeToSocket(4)` will run. There is no need to get "previous" `userId` because the cleanup function will capture it in a closure.
 
-```js{5}
-function Counter() {
-  const [count, setCount] = useState(0);
-
-  const calculation = count + 100;
-  const prevCalculation = usePrevious(calculation);
-  // ...
-```
-
-It's possible that in the future React will provide a `usePrevious` Hook out of the box since it's a relatively common use case.
+Other times, you might need to **adjust state based on a change in props or other state**. This is rarely needed and is usually a sign you have some duplicate or redundant state. However, in the rare case that you need this pattern, you can [store previous state or props in state and update them during rendering](#how-do-i-implement-getderivedstatefromprops).
 
-See also [the recommended pattern for derived state](#how-do-i-implement-getderivedstatefromprops).
+We have previously suggested a custom Hook called `usePrevious` to hold the previous value. However, we've found that most use cases fall into the two patterns described above. If your use case is different, you can [hold a value in a ref](#is-there-something-like-instance-variables) and manually update it when needed. Avoid reading and updating refs during rendering because this makes your component's behavior difficult to predict and understand.
 
 ### Why am I seeing stale props or state inside my function? {#why-am-i-seeing-stale-props-or-state-inside-my-function}
 
@@ -914,8 +880,6 @@ Note that you can still choose whether to pass the application *state* down as p
 >Note
 >
 >We recommend to [pass `dispatch` down in context](#how-to-avoid-passing-callbacks-down) rather than individual callbacks in props. The approach below is only mentioned here for completeness and as an escape hatch.
->
->Also note that this pattern might cause problems in the [concurrent mode](/blog/2018/03/27/update-on-async-rendering.html). We plan to provide more ergonomic alternatives in the future, but the safest solution right now is to always invalidate the callback if some value it depends on changes.
 
 In some rare cases you might need to memoize a callback with [`useCallback`](/docs/hooks-reference.html#usecallback) but the memoization doesn't work very well because the inner function has to be re-created too often. If the function you're memoizing is an event handler and isn't used during rendering, you can use [ref as an instance variable](#is-there-something-like-instance-variables), and save the last committed value into it manually:
 
diff --git a/content/docs/hooks-intro.md b/content/docs/hooks-intro.md
index a277dc17f..b6c8f22a3 100644
--- a/content/docs/hooks-intro.md
+++ b/content/docs/hooks-intro.md
@@ -32,7 +32,7 @@ This new function `useState` is the first "Hook" we'll learn about, but this exa
 >Note
 >
 >React 16.8.0 is the first release to support Hooks. When upgrading, don't forget to update all packages, including React DOM.
->React Native supports Hooks since [the 0.59 release of React Native](https://reactnative.dev/blog/2019/03/12/releasing-react-native-059).
+>React Native has supported Hooks since [the 0.59 release of React Native](https://reactnative.dev/blog/2019/03/12/releasing-react-native-059).
 
 ## Video Introduction {#video-introduction}
 
@@ -80,7 +80,7 @@ We'll discuss this more in [Using the Effect Hook](/docs/hooks-effect.html#tip-u
 
 ### Classes confuse both people and machines {#classes-confuse-both-people-and-machines}
 
-In addition to making code reuse and code organization more difficult, we've found that classes can be a large barrier to learning React. You have to understand how `this` works in JavaScript, which is very different from how it works in most languages. You have to remember to bind the event handlers. Without unstable [syntax proposals](https://babeljs.io/docs/en/babel-plugin-transform-class-properties/), the code is very verbose. People can understand props, state, and top-down data flow perfectly well but still struggle with classes. The distinction between function and class components in React and when to use each one leads to disagreements even between experienced React developers.
+In addition to making code reuse and code organization more difficult, we've found that classes can be a large barrier to learning React. You have to understand how `this` works in JavaScript, which is very different from how it works in most languages. You have to remember to bind the event handlers. Without [ES2022 public class fields](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Public_class_fields#public_instance_fields), the code is very verbose. People can understand props, state, and top-down data flow perfectly well but still struggle with classes. The distinction between function and class components in React and when to use each one leads to disagreements even between experienced React developers.
 
 Additionally, React has been out for about five years, and we want to make sure it stays relevant in the next five years. As [Svelte](https://svelte.dev/), [Angular](https://angular.io/), [Glimmer](https://glimmerjs.com/), and others show, [ahead-of-time compilation](https://en.wikipedia.org/wiki/Ahead-of-time_compilation) of components has a lot of future potential. Especially if it's not limited to templates. Recently, we've been experimenting with [component folding](https://github.com/facebook/react/issues/7323) using [Prepack](https://prepack.io/), and we've seen promising early results. However, we found that class components can encourage unintentional patterns that make these optimizations fall back to a slower path. Classes present issues for today's tools, too. For example, classes don't minify very well, and they make hot reloading flaky and unreliable. We want to present an API that makes it more likely for code to stay on the optimizable path.
 
@@ -96,9 +96,9 @@ To solve these problems, **Hooks let you use more of React's features without cl
 
 We know that React developers are focused on shipping products and don't have time to look into every new API that's being released. Hooks are very new, and it might be better to wait for more examples and tutorials before considering learning or adopting them.
 
-We also understand that the bar for adding a new primitive to React is extremely high. For curious readers, we have prepared a [detailed RFC](https://github.com/reactjs/rfcs/pull/68) that dives into motivation with more details, and provides extra perspective on the specific design decisions and related prior art.
+We also understand that the bar for adding a new primitive to React is extremely high. For curious readers, we have prepared a [detailed RFC](https://github.com/reactjs/rfcs/pull/68) that dives into the motivation with more details, and provides extra perspective on the specific design decisions and related prior art.
 
-**Crucially, Hooks work side-by-side with existing code so you can adopt them gradually.** There is no rush to migrate to Hooks. We recommend avoiding any "big rewrites", especially for existing, complex class components. It takes a bit of a mindshift to start "thinking in Hooks". In our experience, it's best to practice using Hooks in new and non-critical components first, and ensure that everybody on your team feels comfortable with them. After you give Hooks a try, please feel free to [send us feedback](https://github.com/facebook/react/issues/new), positive or negative.
+**Crucially, Hooks work side-by-side with existing code so you can adopt them gradually.** There is no rush to migrate to Hooks. We recommend avoiding any "big rewrites", especially for existing, complex class components. It takes a bit of a mind shift to start "thinking in Hooks". In our experience, it's best to practice using Hooks in new and non-critical components first, and ensure that everybody on your team feels comfortable with them. After you give Hooks a try, please feel free to [send us feedback](https://github.com/facebook/react/issues/new), positive or negative.
 
 We intend for Hooks to cover all existing use cases for classes, but **we will keep supporting class components for the foreseeable future.** At Facebook, we have tens of thousands of components written as classes, and we have absolutely no plans to rewrite them. Instead, we are starting to use Hooks in the new code side by side with classes.
 
diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md
index 1343cc90c..2a439d397 100644
--- a/content/docs/hooks-reference.md
+++ b/content/docs/hooks-reference.md
@@ -24,6 +24,12 @@ If you're new to Hooks, you might want to check out [the overview](/docs/hooks-o
   - [`useImperativeHandle`](#useimperativehandle)
   - [`useLayoutEffect`](#uselayouteffect)
   - [`useDebugValue`](#usedebugvalue)
+  - [`useDeferredValue`](#usedeferredvalue)
+  - [`useTransition`](#usetransition)
+  - [`useId`](#useid)
+- [Library Hooks](#library-hooks)
+  - [`useSyncExternalStore`](#usesyncexternalstore)
+  - [`useInsertionEffect`](#useinsertioneffect)
 
 ## Basic Hooks {#basic-hooks}
 
@@ -102,6 +108,14 @@ If you update a State Hook to the same value as the current state, React will ba
 
 Note that React may still need to render that specific component again before bailing out. That shouldn't be a concern because React won't unnecessarily go "deeper" into the tree. If you're doing expensive calculations while rendering, you can optimize them with `useMemo`.
 
+#### Batching of state updates {#batching-of-state-updates}
+
+React may group several state updates into a single re-render to improve performance. Normally, this improves performance and shouldn't affect your application's behavior.
+
+Before React 18, only updates inside React event handlers were batched. Starting with React 18, [batching is enabled for all updates by default](/blog/2022/03/08/react-18-upgrade-guide.html#automatic-batching). Note that React makes sure that updates from several *different* user-initiated events -- for example, clicking a button twice -- are always processed separately and do not get batched. This prevents logical mistakes.
+
+In the rare case that you need to force the DOM update to be applied synchronously, you may wrap it in [`flushSync`](/docs/react-dom.html#flushsync). However, this can hurt performance so do this only where needed.
+
 ### `useEffect` {#useeffect}
 
 ```js
@@ -138,7 +152,13 @@ Unlike `componentDidMount` and `componentDidUpdate`, the function passed to `use
 
 However, not all effects can be deferred. For example, a DOM mutation that is visible to the user must fire synchronously before the next paint so that the user does not perceive a visual inconsistency. (The distinction is conceptually similar to passive versus active event listeners.) For these types of effects, React provides one additional Hook called [`useLayoutEffect`](#uselayouteffect). It has the same signature as `useEffect`, and only differs in when it is fired.
 
-Although `useEffect` is deferred until after the browser has painted, it's guaranteed to fire before any new renders. React will always flush a previous render's effects before starting a new update.
+Additionally, starting in React 18, the function passed to `useEffect` will fire synchronously **before** layout and paint when it's the result of a discrete user input such as a click, or when it's the result of an update wrapped in [`flushSync`](/docs/react-dom.html#flushsync). This behavior allows the result of the effect to be observed by the event system, or by the caller of [`flushSync`](/docs/react-dom.html#flushsync).
+
+> Note
+> 
+> This only affects the timing of when the function passed to `useEffect` is called - updates scheduled inside these effects are still deferred. This is different than [`useLayoutEffect`](#uselayouteffect), which fires the function and processes the updates inside of it immediately.
+
+Even in cases where `useEffect` is deferred until after the browser has painted, it's guaranteed to fire before any new renders. React will always flush a previous render's effects before starting a new update.
 
 #### Conditionally firing an effect {#conditionally-firing-an-effect}
 
@@ -508,3 +528,199 @@ For example a custom Hook that returned a `Date` value could avoid calling the `
 ```js
 useDebugValue(date, date => date.toDateString());
 ```
+
+### `useDeferredValue` {#usedeferredvalue}
+
+```js
+const deferredValue = useDeferredValue(value);
+```
+
+`useDeferredValue` accepts a value and returns a new copy of the value that will defer to more urgent updates. If the current render is the result of an urgent update, like user input, React will return the previous value and then render the new value after the urgent render has completed.
+
+This hook is similar to user-space hooks which use debouncing or throttling to defer updates. The benefits to using `useDeferredValue` is that React will work on the update as soon as other work finishes (instead of waiting for an arbitrary amount of time), and like [`startTransition`](/docs/react-api.html#starttransition), deferred values can suspend without triggering an unexpected fallback for existing content.
+
+#### Memoizing deferred children {#memoizing-deferred-children}
+`useDeferredValue` only defers the value that you pass to it. If you want to prevent a child component from re-rendering during an urgent update, you must also memoize that component with [`React.memo`](/docs/react-api.html#reactmemo) or [`React.useMemo`](/docs/hooks-reference.html#usememo):
+
+```js
+function Typeahead() {
+  const query = useSearchQuery('');
+  const deferredQuery = useDeferredValue(query);
+
+  // Memoizing tells React to only re-render when deferredQuery changes,
+  // not when query changes.
+  const suggestions = useMemo(() =>
+    <SearchSuggestions query={deferredQuery} />,
+    [deferredQuery]
+  );
+
+  return (
+    <>
+      <SearchInput query={query} />
+      <Suspense fallback="Loading results...">
+        {suggestions}
+      </Suspense>
+    </>
+  );
+}
+```
+
+Memoizing the children tells React that it only needs to re-render them when `deferredQuery` changes and not when `query` changes. This caveat is not unique to `useDeferredValue`, and it's the same pattern you would use with similar hooks that use debouncing or throttling.
+
+### `useTransition` {#usetransition}
+
+```js
+const [isPending, startTransition] = useTransition();
+```
+
+Returns a stateful value for the pending state of the transition, and a function to start it.
+
+`startTransition` lets you mark updates in the provided callback as transitions:
+
+```js
+startTransition(() => {
+  setCount(count + 1);
+});
+```
+
+`isPending` indicates when a transition is active to show a pending state:
+
+```js
+function App() {
+  const [isPending, startTransition] = useTransition();
+  const [count, setCount] = useState(0);
+  
+  function handleClick() {
+    startTransition(() => {
+      setCount(c => c + 1);
+    });
+  }
+
+  return (
+    <div>
+      {isPending && <Spinner />}
+      <button onClick={handleClick}>{count}</button>
+    </div>
+  );
+}
+```
+
+> Note:
+>
+> Updates in a transition yield to more urgent updates such as clicks.
+>
+> Updates in a transition will not show a fallback for re-suspended content. This allows the user to continue interacting with the current content while rendering the update.
+
+### `useId` {#useid}
+
+```js
+const id = useId();
+```
+
+`useId` is a hook for generating unique IDs that are stable across the server and client, while avoiding hydration mismatches.
+
+> Note
+>
+> `useId` is **not** for generating [keys in a list](/docs/lists-and-keys.html#keys). Keys should be generated from your data.
+
+For a basic example, pass the `id` directly to the elements that need it:
+
+```js
+function Checkbox() {
+  const id = useId();
+  return (
+    <>
+      <label htmlFor={id}>Do you like React?</label>
+      <input id={id} type="checkbox" name="react"/>
+    </>
+  );
+};
+```
+
+For multiple IDs in the same component, append a suffix using the same `id`:
+
+```js
+function NameFields() {
+  const id = useId();
+  return (
+    <div>
+      <label htmlFor={id + '-firstName'}>First Name</label>
+      <div>
+        <input id={id + '-firstName'} type="text" />
+      </div>
+      <label htmlFor={id + '-lastName'}>Last Name</label>
+      <div>
+        <input id={id + '-lastName'} type="text" />
+      </div>
+    </div>
+  );
+}
+```
+
+> Note:
+> 
+> `useId` generates a string that includes the `:` token. This helps ensure that the token is unique, but is not supported in CSS selectors or APIs like `querySelectorAll`.
+> 
+> `useId` supports an `identifierPrefix` to prevent collisions in multi-root apps. To configure, see the options for [`hydrateRoot`](/docs/react-dom-client.html#hydrateroot) and [`ReactDOMServer`](/docs/react-dom-server.html).
+
+## Library Hooks {#library-hooks}
+
+The following Hooks are provided for library authors to integrate libraries deeply into the React model, and are not typically used in application code.
+
+### `useSyncExternalStore` {#usesyncexternalstore}
+
+```js
+const state = useSyncExternalStore(subscribe, getSnapshot[, getServerSnapshot]);
+```
+
+`useSyncExternalStore` is a hook recommended for reading and subscribing from external data sources in a way that's compatible with concurrent rendering features like selective hydration and time slicing.
+
+This method returns the value of the store and accepts three arguments:
+- `subscribe`: function to register a callback that is called whenever the store changes.
+- `getSnapshot`: function that returns the current value of the store.
+- `getServerSnapshot`: function that returns the snapshot used during server rendering.
+
+The most basic example simply subscribes to the entire store:
+
+```js
+const state = useSyncExternalStore(store.subscribe, store.getSnapshot);
+```
+
+However, you can also subscribe to a specific field:
+
+```js
+const selectedField = useSyncExternalStore(
+  store.subscribe,
+  () => store.getSnapshot().selectedField,
+);
+```
+
+When server rendering, you must serialize the store value used on the server, and provide it to `useSyncExternalStore`. React will use this snapshot during hydration to prevent server mismatches:
+
+```js
+const selectedField = useSyncExternalStore(
+  store.subscribe,
+  () => store.getSnapshot().selectedField,
+  () => INITIAL_SERVER_SNAPSHOT.selectedField,
+);
+```
+
+> Note:
+>
+> `getSnapshot` must return a cached value. If getSnapshot is called multiple times in a row, it must return the same exact value unless there was a store update in between.
+> 
+> A shim is provided for supporting multiple React versions published as `use-sync-external-store/shim`. This shim will prefer `useSyncExternalStore` when available, and fallback to a user-space implementation when it's not.
+> 
+> As a convenience, we also provide a version of the API with automatic support for memoizing the result of getSnapshot published as `use-sync-external-store/with-selector`.
+
+### `useInsertionEffect` {#useinsertioneffect}
+
+```js
+useInsertionEffect(didUpdate);
+```
+
+The signature is identical to `useEffect`, but it fires synchronously _before_ all DOM mutations. Use this to inject styles into the DOM before reading layout in [`useLayoutEffect`](#uselayouteffect). Since this hook is limited in scope, this hook does not have access to refs and cannot schedule updates.
+
+> Note:
+>
+> `useInsertionEffect` should be limited to css-in-js library authors. Prefer [`useEffect`](#useeffect) or [`useLayoutEffect`](#uselayouteffect) instead.
diff --git a/content/docs/how-to-contribute.md b/content/docs/how-to-contribute.md
index e85683041..2286084c1 100644
--- a/content/docs/how-to-contribute.md
+++ b/content/docs/how-to-contribute.md
@@ -11,9 +11,9 @@ redirect_from:
 
 React is one of Facebook's first open source projects that is both under very active development and is also being used to ship code to everybody on [facebook.com](https://www.facebook.com). We're still working out the kinks to make contributing to this project as easy and transparent as possible, but we're not quite there yet. Hopefully this document makes the process for contributing clear and answers some questions that you may have.
 
-### [Code of Conduct](https://github.com/facebook/react/blob/master/CODE_OF_CONDUCT.md) {#code-of-conduct}
+### [Code of Conduct](https://github.com/facebook/react/blob/main/CODE_OF_CONDUCT.md) {#code-of-conduct}
 
-Facebook has adopted the [Contributor Covenant](https://www.contributor-covenant.org/) as its Code of Conduct, and we expect project participants to adhere to it. Please read [the full text](https://github.com/facebook/react/blob/master/CODE_OF_CONDUCT.md) so that you can understand what actions will and will not be tolerated.
+Facebook has adopted the [Contributor Covenant](https://www.contributor-covenant.org/) as its Code of Conduct, and we expect project participants to adhere to it. Please read [the full text](https://github.com/facebook/react/blob/main/CODE_OF_CONDUCT.md) so that you can understand what actions will and will not be tolerated.
 
 ### Open Development {#open-development}
 
@@ -23,19 +23,19 @@ All work on React happens directly on [GitHub](https://github.com/facebook/react
 
 React follows [semantic versioning](https://semver.org/). We release patch versions for critical bugfixes, minor versions for new features or non-essential changes, and major versions for any breaking changes. When we make breaking changes, we also introduce deprecation warnings in a minor version so that our users learn about the upcoming changes and migrate their code in advance. Learn more about our commitment to stability and incremental migration in [our versioning policy](/docs/faq-versioning.html).
 
-Every significant change is documented in the [changelog file](https://github.com/facebook/react/blob/master/CHANGELOG.md).
+Every significant change is documented in the [changelog file](https://github.com/facebook/react/blob/main/CHANGELOG.md).
 
 ### Branch Organization {#branch-organization}
 
-Submit all changes directly to the [`master branch`](https://github.com/facebook/react/tree/master). We don't use separate branches for development or for upcoming releases. We do our best to keep `master` in good shape, with all tests passing.
+Submit all changes directly to the [`main branch`](https://github.com/facebook/react/tree/main). We don't use separate branches for development or for upcoming releases. We do our best to keep `main` in good shape, with all tests passing.
 
-Code that lands in `master` must be compatible with the latest stable release. It may contain additional features, but no breaking changes. We should be able to release a new minor version from the tip of `master` at any time.
+Code that lands in `main` must be compatible with the latest stable release. It may contain additional features, but no breaking changes. We should be able to release a new minor version from the tip of `main` at any time.
 
 ### Feature Flags {#feature-flags}
 
-To keep the `master` branch in a releasable state, breaking changes and experimental features must be gated behind a feature flag.
+To keep the `main` branch in a releasable state, breaking changes and experimental features must be gated behind a feature flag.
 
-Feature flags are defined in [`packages/shared/ReactFeatureFlags.js`](https://github.com/facebook/react/blob/master/packages/shared/ReactFeatureFlags.js). Some builds of React may enable different sets of feature flags; for example, the React Native build may be configured differently than React DOM. These flags are found in [`packages/shared/forks`](https://github.com/facebook/react/tree/master/packages/shared/forks). Feature flags are statically typed by Flow, so you can run `yarn flow` to confirm that you've updated all the necessary files.
+Feature flags are defined in [`packages/shared/ReactFeatureFlags.js`](https://github.com/facebook/react/blob/main/packages/shared/ReactFeatureFlags.js). Some builds of React may enable different sets of feature flags; for example, the React Native build may be configured differently than React DOM. These flags are found in [`packages/shared/forks`](https://github.com/facebook/react/tree/main/packages/shared/forks). Feature flags are statically typed by Flow, so you can run `yarn flow` to confirm that you've updated all the necessary files.
 
 React's build system will strip out disabled feature branches before publishing. A continuous integration job runs on every commit to check for changes in bundle size. You can use the change in size as a signal that a feature was gated correctly.
 
@@ -70,7 +70,7 @@ If you're only fixing a bug, it's fine to submit a pull request right away but w
 
 Working on your first Pull Request? You can learn how from this free video series:
 
-**[How to Contribute to an Open Source Project on GitHub](https://app.egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github)**
+**[How to Contribute to an Open Source Project on GitHub](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github)**
 
 To help you get your feet wet and get you familiar with our contribution process, we have a list of **[good first issues](https://github.com/facebook/react/issues?q=is:open+is:issue+label:"good+first+issue")** that contain bugs that have a relatively limited scope. This is a great place to get started.
 
@@ -84,7 +84,7 @@ The core team is monitoring for pull requests. We will review your pull request
 
 **Before submitting a pull request,** please make sure the following is done:
 
-1. Fork [the repository](https://github.com/facebook/react) and create your branch from `master`.
+1. Fork [the repository](https://github.com/facebook/react) and create your branch from `main`.
 2. Run `yarn` in the repository root.
 3. If you've fixed a bug or added code that should be tested, add tests!
 4. Ensure the test suite passes (`yarn test`). Tip: `yarn test --watch TestName` is helpful in development.
@@ -103,7 +103,7 @@ In order to accept your pull request, we need you to submit a CLA. You only need
 
 ### Contribution Prerequisites {#contribution-prerequisites}
 
-* You have [Node](https://nodejs.org) installed at v8.0.0+ and [Yarn](https://yarnpkg.com/en/) at v1.2.0+.
+* You have [Node](https://nodejs.org) installed at LTS and [Yarn](https://yarnpkg.com/en/) at v1.2.0+.
 * You have [JDK](https://www.oracle.com/technetwork/java/javase/downloads/index.html) installed.
 * You have `gcc` installed or are comfortable installing a compiler if needed. Some of our dependencies may require a compilation step. On OS X, the Xcode Command Line Tools will cover this. On Ubuntu, `apt-get install build-essential` will install the required packages. Similar commands should work on other Linux distros. Windows will require some additional steps, see the [`node-gyp` installation instructions](https://github.com/nodejs/node-gyp#installation) for details.
 * You are familiar with Git.
diff --git a/content/docs/implementation-notes.md b/content/docs/implementation-notes.md
index b345f7d5d..ff67f062f 100644
--- a/content/docs/implementation-notes.md
+++ b/content/docs/implementation-notes.md
@@ -32,10 +32,11 @@ The reconciler itself doesn't have a public API. [Renderers](/docs/codebase-over
 Let's consider the first time you mount a component:
 
 ```js
-ReactDOM.render(<App />, rootEl);
+const root = ReactDOM.createRoot(rootEl);
+root.render(<App />);
 ```
 
-React DOM will pass `<App />` along to the reconciler. Remember that `<App />` is a React element, that is, a description of *what* to render. You can think about it as a plain object:
+`root.render` will pass `<App />` along to the reconciler. Remember that `<App />` is a React element, that is, a description of *what* to render. You can think about it as a plain object:
 
 ```js
 console.log(<App />);
@@ -236,9 +237,9 @@ This is working but still far from how the reconciler is really implemented. The
 The key feature of React is that you can re-render everything, and it won't recreate the DOM or reset the state:
 
 ```js
-ReactDOM.render(<App />, rootEl);
+root.render(<App />);
 // Should reuse the existing DOM:
-ReactDOM.render(<App />, rootEl);
+root.render(<App />);
 ```
 
 However, our implementation above only knows how to mount the initial tree. It can't perform updates on it because it doesn't store all the necessary information, such as all the `publicInstance`s, or which DOM `node`s correspond to which components.
@@ -412,7 +413,7 @@ If you're struggling to imagine how an internal instance tree is structured in m
 
  <img src="../images/docs/implementation-notes-tree.png" width="500" style="max-width: 100%" alt="React DevTools tree" />
 
-To complete this refactoring, we will introduce a function that mounts a complete tree into a container node, just like `ReactDOM.render()`. It returns a public instance, also like `ReactDOM.render()`:
+To complete this refactoring, we will introduce a function that mounts a complete tree into a container node and a public instance:
 
 ```js
 function mountTree(element, containerNode) {
diff --git a/content/docs/integrating-with-other-libraries.md b/content/docs/integrating-with-other-libraries.md
index 5bc8b2570..78a49b46c 100644
--- a/content/docs/integrating-with-other-libraries.md
+++ b/content/docs/integrating-with-other-libraries.md
@@ -190,9 +190,9 @@ class Chosen extends React.Component {
 
 ## Integrating with Other View Libraries {#integrating-with-other-view-libraries}
 
-React can be embedded into other applications thanks to the flexibility of [`ReactDOM.render()`](/docs/react-dom.html#render).
+React can be embedded into other applications thanks to the flexibility of [`createRoot()`](/docs/react-dom-client.html#createRoot).
 
-Although React is commonly used at startup to load a single root React component into the DOM, `ReactDOM.render()` can also be called multiple times for independent parts of the UI which can be as small as a button, or as large as an app.
+Although React is commonly used at startup to load a single root React component into the DOM, `createRoot()` can also be called multiple times for independent parts of the UI which can be as small as a button, or as large as an app.
 
 In fact, this is exactly how React is used at Facebook. This lets us write applications in React piece by piece, and combine them with our existing server-generated templates and other client-side code.
 
@@ -216,15 +216,9 @@ function Button() {
   return <button id="btn">Say Hello</button>;
 }
 
-ReactDOM.render(
-  <Button />,
-  document.getElementById('container'),
-  function() {
-    $('#btn').click(function() {
-      alert('Hello!');
-    });
-  }
-);
+$('#btn').click(function() {
+  alert('Hello!');
+});
 ```
 
 From here you could start moving more logic into the component and begin adopting more common React practices. For example, in components it is best not to rely on IDs because the same component can be rendered multiple times. Instead, we will use the [React event system](/docs/handling-events.html) and register the click handler directly on the React `<button>` element:
@@ -240,36 +234,34 @@ function HelloButton() {
   }
   return <Button onClick={handleClick} />;
 }
-
-ReactDOM.render(
-  <HelloButton />,
-  document.getElementById('container')
-);
 ```
 
 [**Try it on CodePen**](https://codepen.io/gaearon/pen/RVKbvW?editors=1010)
 
-You can have as many such isolated components as you like, and use `ReactDOM.render()` to render them to different DOM containers. Gradually, as you convert more of your app to React, you will be able to combine them into larger components, and move some of the `ReactDOM.render()` calls up the hierarchy.
+You can have as many such isolated components as you like, and use `ReactDOM.createRoot()` to render them to different DOM containers. Gradually, as you convert more of your app to React, you will be able to combine them into larger components, and move some of the `ReactDOM.createRoot()` calls up the hierarchy.
 
 ### Embedding React in a Backbone View {#embedding-react-in-a-backbone-view}
 
 [Backbone](https://backbonejs.org/) views typically use HTML strings, or string-producing template functions, to create the content for their DOM elements. This process, too, can be replaced with rendering a React component.
 
-Below, we will create a Backbone view called `ParagraphView`. It will override Backbone's `render()` function to render a React `<Paragraph>` component into the DOM element provided by Backbone (`this.el`). Here, too, we are using [`ReactDOM.render()`](/docs/react-dom.html#render):
+Below, we will create a Backbone view called `ParagraphView`. It will override Backbone's `render()` function to render a React `<Paragraph>` component into the DOM element provided by Backbone (`this.el`). Here, too, we are using [`ReactDOM.createRoot()`](/docs/react-dom-client.html#createroot):
 
-```js{1,5,8,12}
+```js{7,11,15}
 function Paragraph(props) {
   return <p>{props.text}</p>;
 }
 
 const ParagraphView = Backbone.View.extend({
+  initialize(options) {
+    this.reactRoot = ReactDOM.createRoot(this.el);
+  },
   render() {
     const text = this.model.get('text');
-    ReactDOM.render(<Paragraph text={text} />, this.el);
+    this.reactRoot.render(<Paragraph text={text} />);
     return this;
   },
   remove() {
-    ReactDOM.unmountComponentAtNode(this.el);
+    this.reactRoot.unmount();
     Backbone.View.prototype.remove.call(this);
   }
 });
@@ -277,7 +269,7 @@ const ParagraphView = Backbone.View.extend({
 
 [**Try it on CodePen**](https://codepen.io/gaearon/pen/gWgOYL?editors=0010)
 
-It is important that we also call `ReactDOM.unmountComponentAtNode()` in the `remove` method so that React unregisters event handlers and other resources associated with the component tree when it is detached.
+It is important that we also call `root.unmount()` in the `remove` method so that React unregisters event handlers and other resources associated with the component tree when it is detached.
 
 When a component is removed *from within* a React tree, the cleanup is performed automatically, but because we are removing the entire tree by hand, we must call this method.
 
@@ -428,10 +420,8 @@ function Example(props) {
 }
 
 const model = new Backbone.Model({ firstName: 'Frodo' });
-ReactDOM.render(
-  <Example model={model} />,
-  document.getElementById('root')
-);
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<Example model={model} />);
 ```
 
 [**Try it on CodePen**](https://codepen.io/gaearon/pen/PmWwwa?editors=0010)
diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index 535f18b54..e78852265 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -35,11 +35,6 @@ In the example below, we declare a variable called `name` and then use it inside
 ```js{1,2}
 const name = 'Josh Perez';
 const element = <h1>Hello, {name}</h1>;
-
-ReactDOM.render(
-  element,
-  document.getElementById('root')
-);
 ```
 
 You can put any valid [JavaScript expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions) inside the curly braces in JSX. For example, `2 + 2`, `user.firstName`, or `formatName(user)` are all valid JavaScript expressions.
@@ -61,14 +56,9 @@ const element = (
     Hello, {formatName(user)}!
   </h1>
 );
-
-ReactDOM.render(
-  element,
-  document.getElementById('root')
-);
 ```
 
-[](codepen://introducing-jsx)
+**[Try it on CodePen](https://codepen.io/gaearon/pen/PGEjdG?editors=1010)**
 
 We split JSX over multiple lines for readability. While it isn't required, when doing this, we also recommend wrapping it in parentheses to avoid the pitfalls of [automatic semicolon insertion](https://stackoverflow.com/q/2846283).
 
@@ -92,7 +82,7 @@ function getGreeting(user) {
 You may use quotes to specify string literals as attributes:
 
 ```js
-const element = <div tabIndex="0"></div>;
+const element = <a href="https://www.reactjs.org"> link </a>;
 ```
 
 You may also use curly braces to embed a JavaScript expression in an attribute:
diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index c46a66246..04a3858c1 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -231,7 +231,7 @@ In general, we don't recommend *not* passing a value for a prop, because it can
 
 ### Spread Attributes {#spread-attributes}
 
-If you already have `props` as an object, and you want to pass it in JSX, you can use `...` as a "spread" operator to pass the whole props object. These two components are equivalent:
+If you already have `props` as an object, and you want to pass it in JSX, you can use `...` as a "spread" syntax to pass the whole props object. These two components are equivalent:
 
 ```js{7}
 function App1() {
@@ -244,7 +244,7 @@ function App2() {
 }
 ```
 
-You can also pick specific props that your component will consume while passing all other props using the spread operator.
+You can also pick specific props that your component will consume while passing all other props using the spread syntax.
 
 ```js{2}
 const Button = props => {
diff --git a/content/docs/lifting-state-up.md b/content/docs/lifting-state-up.md
index bba7f02be..d3325472d 100644
--- a/content/docs/lifting-state-up.md
+++ b/content/docs/lifting-state-up.md
@@ -324,7 +324,7 @@ Lifting state involves writing more "boilerplate" code than two-way binding appr
 
 If something can be derived from either props or state, it probably shouldn't be in the state. For example, instead of storing both `celsiusValue` and `fahrenheitValue`, we store just the last edited `temperature` and its `scale`. The value of the other input can always be calculated from them in the `render()` method. This lets us clear or apply rounding to the other field without losing any precision in the user input.
 
-When you see something wrong in the UI, you can use [React Developer Tools](https://github.com/facebook/react/tree/master/packages/react-devtools) to inspect the props and move up the tree until you find the component responsible for updating the state. This lets you trace the bugs to their source:
+When you see something wrong in the UI, you can use [React Developer Tools](https://github.com/facebook/react/tree/main/packages/react-devtools) to inspect the props and move up the tree until you find the component responsible for updating the state. This lets you trace the bugs to their source:
 
 <img src="../images/docs/react-devtools-state.gif" alt="Monitoring State in React DevTools" max-width="100%" height="100%">
 
diff --git a/content/docs/lists-and-keys.md b/content/docs/lists-and-keys.md
index 65f52af19..0f70aab94 100644
--- a/content/docs/lists-and-keys.md
+++ b/content/docs/lists-and-keys.md
@@ -33,13 +33,10 @@ const listItems = numbers.map((number) =>
 );
 ```
 
-We include the entire `listItems` array inside a `<ul>` element, and [render it to the DOM](/docs/rendering-elements.html#rendering-an-element-into-the-dom):
+Then, we can include the entire `listItems` array inside a `<ul>` element:
 
 ```javascript{2}
-ReactDOM.render(
-  <ul>{listItems}</ul>,
-  document.getElementById('root')
-);
+<ul>{listItems}</ul>
 ```
 
 [**Try it on CodePen**](https://codepen.io/gaearon/pen/GjPyQr?editors=0011)
@@ -64,10 +61,8 @@ function NumberList(props) {
 }
 
 const numbers = [1, 2, 3, 4, 5];
-ReactDOM.render(
-  <NumberList numbers={numbers} />,
-  document.getElementById('root')
-);
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<NumberList numbers={numbers} />);
 ```
 
 When you run this code, you'll be given a warning that a key should be provided for list items. A "key" is a special string attribute you need to include when creating lists of elements. We'll discuss why it's important in the next section.
@@ -86,12 +81,6 @@ function NumberList(props) {
     <ul>{listItems}</ul>
   );
 }
-
-const numbers = [1, 2, 3, 4, 5];
-ReactDOM.render(
-  <NumberList numbers={numbers} />,
-  document.getElementById('root')
-);
 ```
 
 [**Try it on CodePen**](https://codepen.io/gaearon/pen/jrXYRR?editors=0011)
@@ -130,7 +119,7 @@ const todoItems = todos.map((todo, index) =>
 );
 ```
 
-We don't recommend using indexes for keys if the order of items may change. This can negatively impact performance and may cause issues with component state. Check out Robin Pokorny's article for an [in-depth explanation on the negative impacts of using an index as a key](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318). If you choose not to assign an explicit key to list items then React will default to using indexes as keys.
+We don't recommend using indexes for keys if the order of items may change. This can negatively impact performance and may cause issues with component state. Check out Robin Pokorny's article for an [in-depth explanation on the negative impacts of using an index as a key](https://robinpokorny.com/blog/index-as-a-key-is-an-anti-pattern/). If you choose not to assign an explicit key to list items then React will default to using indexes as keys.
 
 Here is an [in-depth explanation about why keys are necessary](/docs/reconciliation.html#recursing-on-children) if you're interested in learning more.
 
@@ -165,12 +154,6 @@ function NumberList(props) {
     </ul>
   );
 }
-
-const numbers = [1, 2, 3, 4, 5];
-ReactDOM.render(
-  <NumberList numbers={numbers} />,
-  document.getElementById('root')
-);
 ```
 
 **Example: Correct Key Usage**
@@ -193,12 +176,6 @@ function NumberList(props) {
     </ul>
   );
 }
-
-const numbers = [1, 2, 3, 4, 5];
-ReactDOM.render(
-  <NumberList numbers={numbers} />,
-  document.getElementById('root')
-);
 ```
 
 [**Try it on CodePen**](https://codepen.io/gaearon/pen/ZXeOGM?editors=0010)
@@ -207,7 +184,7 @@ A good rule of thumb is that elements inside the `map()` call need keys.
 
 ### Keys Must Only Be Unique Among Siblings {#keys-must-only-be-unique-among-siblings}
 
-Keys used within arrays should be unique among their siblings. However they don't need to be globally unique. We can use the same keys when we produce two different arrays:
+Keys used within arrays should be unique among their siblings. However, they don't need to be globally unique. We can use the same keys when we produce two different arrays:
 
 ```js{2,5,11,12,19,21}
 function Blog(props) {
@@ -239,10 +216,9 @@ const posts = [
   {id: 1, title: 'Hello World', content: 'Welcome to learning React!'},
   {id: 2, title: 'Installation', content: 'You can install React from npm.'}
 ];
-ReactDOM.render(
-  <Blog posts={posts} />,
-  document.getElementById('root')
-);
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<Blog posts={posts} />);
 ```
 
 [**Try it on CodePen**](https://codepen.io/gaearon/pen/NRZYGN?editors=0010)
diff --git a/content/docs/nav.yml b/content/docs/nav.yml
index 09f73ca6a..d0acf873b 100644
--- a/content/docs/nav.yml
+++ b/content/docs/nav.yml
@@ -92,6 +92,8 @@
           title: React.Component
     - id: react-dom
       title: ReactDOM
+    - id: react-dom-client
+      title: ReactDOMClient
     - id: react-dom-server
       title: ReactDOMServer
     - id: dom-elements
@@ -133,19 +135,6 @@
       title: Testing Recipes
     - id: testing-environments
       title: Testing Environments
-- title: Concurrent Mode (Experimental)
-  isOrdered: true
-  items:
-    - id: concurrent-mode-intro
-      title: Introducing Concurrent Mode
-    - id: concurrent-mode-suspense
-      title: Suspense for Data Fetching
-    - id: concurrent-mode-patterns
-      title: Concurrent UI Patterns
-    - id: concurrent-mode-adoption
-      title: Adopting Concurrent Mode
-    - id: concurrent-mode-reference
-      title: Concurrent Mode API Reference
 - title: Contributing
   items:
     - id: how-to-contribute
diff --git a/content/docs/optimizing-performance.md b/content/docs/optimizing-performance.md
index a78a7904a..c32023555 100644
--- a/content/docs/optimizing-performance.md
+++ b/content/docs/optimizing-performance.md
@@ -43,8 +43,8 @@ Remember that this is only necessary before deploying to production. For normal
 We offer production-ready versions of React and React DOM as single files:
 
 ```html
-<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
-<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
+<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
+<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
 ```
 
 Remember that only React files ending with `.production.min.js` are suitable for production.
@@ -175,12 +175,12 @@ If you haven't yet installed the React DevTools, you can find them here:
 
 > Note
 >
-> Before React 17, we use the standard [User Timing API](https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API) to profile components with the chrome performance tab. 
+> Before React 17, we use the standard [User Timing API](https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API) to profile components with the chrome performance tab.
 > For a more detailed walkthrough, check out [this article by Ben Schwarz](https://calibreapp.com/blog/react-performance-profiling-optimization).
 
 ## Virtualize Long Lists {#virtualize-long-lists}
 
-If your application renders long lists of data (hundreds or thousands of rows), we recommended using a technique known as "windowing". This technique only renders a small subset of your rows at any given time, and can dramatically reduce the time it takes to re-render the components as well as the number of DOM nodes created.
+If your application renders long lists of data (hundreds or thousands of rows), we recommend using a technique known as "windowing". This technique only renders a small subset of your rows at any given time, and can dramatically reduce the time it takes to re-render the components as well as the number of DOM nodes created.
 
 [react-window](https://react-window.now.sh/) and [react-virtualized](https://bvaughn.github.io/react-virtualized/) are popular windowing libraries. They provide several reusable components for displaying lists, grids, and tabular data. You can also create your own windowing component, like [Twitter did](https://medium.com/@paularmstrong/twitter-lite-and-high-performance-react-progressive-web-apps-at-scale-d28a00e780a3), if you want something more tailored to your application's specific use case.
 
diff --git a/content/docs/portals.md b/content/docs/portals.md
index 16e90b2e6..73e768fb5 100644
--- a/content/docs/portals.md
+++ b/content/docs/portals.md
@@ -46,7 +46,7 @@ A typical use case for portals is when a parent component has an `overflow: hidd
 >
 > When working with portals, remember that [managing keyboard focus](/docs/accessibility.html#programmatically-managing-focus) becomes very important.
 >
-> For modal dialogs, ensure that everyone can interact with them by following the [WAI-ARIA Modal Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal).
+> For modal dialogs, ensure that everyone can interact with them by following the [WAI-ARIA Modal Authoring Practices](https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/).
 
 [**Try it on CodePen**](https://codepen.io/gaearon/pen/yzMaBd)
 
@@ -146,7 +146,8 @@ function Child() {
   );
 }
 
-ReactDOM.render(<Parent />, appRoot);
+const root = ReactDOM.createRoot(appRoot);
+root.render(<Parent />);
 ```
 
 [**Try it on CodePen**](https://codepen.io/gaearon/pen/jGBWpE)
diff --git a/content/docs/react-without-es6.md b/content/docs/react-without-es6.md
index 8b54d0981..bb2276f6f 100644
--- a/content/docs/react-without-es6.md
+++ b/content/docs/react-without-es6.md
@@ -134,7 +134,7 @@ var SayHello = createReactClass({
 
 This means writing ES6 classes comes with a little more boilerplate code for event handlers, but the upside is slightly better performance in large applications.
 
-If the boilerplate code is too unattractive to you, you may enable the **experimental** [Class Properties](https://babeljs.io/docs/plugins/transform-class-properties/) syntax proposal with Babel:
+If the boilerplate code is too unattractive to you, you may use [ES2022 Class Properties](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Public_class_fields#public_instance_fields) syntax:
 
 
 ```javascript
@@ -143,11 +143,11 @@ class SayHello extends React.Component {
     super(props);
     this.state = {message: 'Hello!'};
   }
-  // WARNING: this syntax is experimental!
+  
   // Using an arrow here binds the method:
   handleClick = () => {
     alert(this.state.message);
-  }
+  };
 
   render() {
     return (
@@ -159,9 +159,7 @@ class SayHello extends React.Component {
 }
 ```
 
-Please note that the syntax above is **experimental** and the syntax may change, or the proposal might not make it into the language.
-
-If you'd rather play it safe, you have a few options:
+You also have a few other options:
 
 * Bind methods in the constructor.
 * Use arrow functions, e.g. `onClick={(e) => this.handleClick(e)}`.
@@ -216,10 +214,8 @@ var TickTock = createReactClass({
   }
 });
 
-ReactDOM.render(
-  <TickTock />,
-  document.getElementById('example')
-);
+const root = ReactDOM.createRoot(document.getElementById('example'));
+root.render(<TickTock />);
 ```
 
 If a component is using multiple mixins and several mixins define the same lifecycle method (i.e. several mixins want to do some cleanup when the component is destroyed), all of the lifecycle methods are guaranteed to be called. Methods defined on mixins run in the order mixins were listed, followed by a method call on the component.
diff --git a/content/docs/react-without-jsx.md b/content/docs/react-without-jsx.md
index 95a5ca967..1187e0bc0 100644
--- a/content/docs/react-without-jsx.md
+++ b/content/docs/react-without-jsx.md
@@ -17,10 +17,8 @@ class Hello extends React.Component {
   }
 }
 
-ReactDOM.render(
-  <Hello toWhat="World" />,
-  document.getElementById('root')
-);
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<Hello toWhat="World" />);
 ```
 
 can be compiled to this code that does not use JSX:
@@ -32,10 +30,8 @@ class Hello extends React.Component {
   }
 }
 
-ReactDOM.render(
-  React.createElement(Hello, {toWhat: 'World'}, null),
-  document.getElementById('root')
-);
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(React.createElement(Hello, {toWhat: 'World'}, null));
 ```
 
 If you're curious to see more examples of how JSX is converted to JavaScript, you can try out [the online Babel compiler](babel://jsx-simple-example).
@@ -47,10 +43,8 @@ If you get tired of typing `React.createElement` so much, one common pattern is
 ```js
 const e = React.createElement;
 
-ReactDOM.render(
-  e('div', null, 'Hello World'),
-  document.getElementById('root')
-);
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(e('div', null, 'Hello World'));
 ```
 
 If you use this shorthand form for `React.createElement`, it can be almost as convenient to use React without JSX.
diff --git a/content/docs/reconciliation.md b/content/docs/reconciliation.md
index 86b19cdd2..d333adf97 100644
--- a/content/docs/reconciliation.md
+++ b/content/docs/reconciliation.md
@@ -45,7 +45,7 @@ This will destroy the old `Counter` and remount a new one.
 
 >Note:
 >
->These methods are considered legacy and you should [avoid them](/blog/2018/03/27/update-on-async-rendering.html) in new code:
+>This method is considered legacy and you should [avoid it](/blog/2018/03/27/update-on-async-rendering.html) in new code:
 >
 >- `UNSAFE_componentWillMount()`
 
diff --git a/content/docs/reference-dom-elements.md b/content/docs/reference-dom-elements.md
index 3353eefcf..5235a081d 100644
--- a/content/docs/reference-dom-elements.md
+++ b/content/docs/reference-dom-elements.md
@@ -117,7 +117,7 @@ Normally, there is a warning when an element with children is also marked as `co
 
 If you use server-side React rendering, normally there is a warning when the server and the client render different content. However, in some rare cases, it is very hard or impossible to guarantee an exact match. For example, timestamps are expected to differ on the server and on the client.
 
-If you set `suppressHydrationWarning` to `true`, React will not warn you about mismatches in the attributes and the content of that element. It only works one level deep, and is intended to be used as an escape hatch. Don't overuse it. You can read more about hydration in the [`ReactDOM.hydrate()` documentation](/docs/react-dom.html#hydrate).
+If you set `suppressHydrationWarning` to `true`, React will not warn you about mismatches in the attributes and the content of that element. It only works one level deep, and is intended to be used as an escape hatch. Don't overuse it. You can read more about hydration in the [`ReactDOM.hydrateRoot()` documentation](/docs/react-dom-client.html#hydrateroot).
 
 ### value {#value}
 
diff --git a/content/docs/reference-glossary.md b/content/docs/reference-glossary.md
index bdf3587a5..eb008b226 100644
--- a/content/docs/reference-glossary.md
+++ b/content/docs/reference-glossary.md
@@ -39,13 +39,9 @@ JSX is a syntax extension to JavaScript. It is similar to a template language, b
 
 React DOM uses camelCase property naming convention instead of HTML attribute names. For example, `tabindex` becomes `tabIndex` in JSX. The attribute `class` is also written as `className` since `class` is a reserved word in JavaScript:
 
-```js
-const name = 'Clementine';
-ReactDOM.render(
-  <h1 className="hello">My name is {name}!</h1>,
-  document.getElementById('root')
-);
-```  
+```jsx
+<h1 className="hello">My name is Clementine!</h1>
+```
 
 ## [Elements](/docs/rendering-elements.html) {#elements}
 
diff --git a/content/docs/reference-javascript-environment-requirements.md b/content/docs/reference-javascript-environment-requirements.md
index f26f2f7a4..c47cd37dc 100644
--- a/content/docs/reference-javascript-environment-requirements.md
+++ b/content/docs/reference-javascript-environment-requirements.md
@@ -6,26 +6,13 @@ category: Reference
 permalink: docs/javascript-environment-requirements.html
 ---
 
-React 16 depends on the collection types [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) and [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set). If you support older browsers and devices which may not yet provide these natively (e.g. IE < 11) or which have non-compliant implementations (e.g. IE 11), consider including a global polyfill in your bundled application, such as [core-js](https://github.com/zloirock/core-js).
+React 18 supports all modern browsers (Edge, Firefox, Chrome, Safari, etc).
 
-A polyfilled environment for React 16 using core-js to support older browsers might look like:
+If you support older browsers and devices such as Internet Explorer which do not provide modern browser features natively or have non-compliant implementations, consider including a global polyfill in your bundled application.
 
-```js
-import 'core-js/es/map';
-import 'core-js/es/set';
+Here is a list of the modern features React 18 uses:
+- [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
+- [`Symbol`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol)
+- [`Object.assign`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)
 
-import React from 'react';
-import ReactDOM from 'react-dom';
-
-ReactDOM.render(
-  <h1>Hello, world!</h1>,
-  document.getElementById('root')
-);
-```
-
-React also depends on `requestAnimationFrame` (even in test environments).  
-You can use the [raf](https://www.npmjs.com/package/raf) package to shim `requestAnimationFrame`:
-
-```js
-import 'raf/polyfill';
-```
+The correct polyfill for these features depend on your environment. For many users, you can configure your [Browserlist](https://github.com/browserslist/browserslist) settings. For others, you may need to import polyfills like [`core-js`](https://github.com/zloirock/core-js) directly.
diff --git a/content/docs/reference-pure-render-mixin.md b/content/docs/reference-pure-render-mixin.md
index 1b5b56b9c..8f1ac1217 100644
--- a/content/docs/reference-pure-render-mixin.md
+++ b/content/docs/reference-pure-render-mixin.md
@@ -46,6 +46,6 @@ Under the hood, the mixin implements [shouldComponentUpdate](/docs/component-spe
 
 > Note:
 >
-> This only shallowly compares the objects. If these contain complex data structures, it may produce false-negatives for deeper differences. Only mix into components which have simple props and state, or use `forceUpdate()` when you know deep data structures have changed. Or, consider using [immutable objects](https://facebook.github.io/immutable-js/) to facilitate fast comparisons of nested data.
+> This only shallowly compares the objects. If these contain complex data structures, it may produce false-negatives for deeper differences. Only mix into components which have simple props and state, or use `forceUpdate()` when you know deep data structures have changed. Or, consider using [immutable objects](https://immutable-js.com/) to facilitate fast comparisons of nested data.
 >
 > Furthermore, `shouldComponentUpdate` skips updates for the whole component subtree. Make sure all the children components are also "pure".
diff --git a/content/docs/reference-react-component.md b/content/docs/reference-react-component.md
index a5dabb5d8..58710ede4 100644
--- a/content/docs/reference-react-component.md
+++ b/content/docs/reference-react-component.md
@@ -52,7 +52,7 @@ These methods are called in the following order when an instance of a component
 
 >Note:
 >
->These methods are considered legacy and you should [avoid them](/blog/2018/03/27/update-on-async-rendering.html) in new code:
+>This method is considered legacy and you should [avoid it](/blog/2018/03/27/update-on-async-rendering.html) in new code:
 >
 >- [`UNSAFE_componentWillMount()`](#unsafe_componentwillmount)
 
@@ -125,7 +125,7 @@ When called, it should examine `this.props` and `this.state` and return one of t
 - **Arrays and fragments.** Let you return multiple elements from render. See the documentation on [fragments](/docs/fragments.html) for more details.
 - **Portals**. Let you render children into a different DOM subtree. See the documentation on [portals](/docs/portals.html) for more details.
 - **String and numbers.** These are rendered as text nodes in the DOM.
-- **Booleans or `null`**. Render nothing. (Mostly exists to support `return test && <Child />` pattern, where `test` is boolean.)
+- **Booleans or `null` or `undefined`**. Render nothing. (Mostly exists to support `return test && <Child />` pattern, where `test` is boolean).
 
 The `render()` function should be pure, meaning that it does not modify component state, it returns the same result each time it's invoked, and it does not directly interact with the browser.
 
@@ -507,12 +507,12 @@ There are just two of them: `setState()` and `forceUpdate()`.
 ### `setState()` {#setstate}
 
 ```javascript
-setState(updater, [callback])
+setState(updater[, callback])
 ```
 
 `setState()` enqueues changes to the component state and tells React that this component and its children need to be re-rendered with the updated state. This is the primary method you use to update the user interface in response to event handlers and server responses.
 
-Think of `setState()` as a *request* rather than an immediate command to update the component. For better perceived performance, React may delay it, and then update several components in a single pass. React does not guarantee that the state changes are applied immediately.
+Think of `setState()` as a *request* rather than an immediate command to update the component. For better perceived performance, React may delay it, and then update several components in a single pass. In the rare case that you need to force the DOM update to be applied synchronously, you may wrap it in [`flushSync`](/docs/react-dom.html#flushsync), but this may hurt performance.
 
 `setState()` does not always immediately update the component. It may batch or defer the update until later. This makes reading `this.state` right after calling `setState()` a potential pitfall. Instead, use `componentDidUpdate` or a `setState` callback (`setState(updater, callback)`), either of which are guaranteed to fire after the update has been applied. If you need to set the state based on the previous state, read about the `updater` argument below.
 
diff --git a/content/docs/reference-react-dom-client.md b/content/docs/reference-react-dom-client.md
new file mode 100644
index 000000000..e7640c114
--- /dev/null
+++ b/content/docs/reference-react-dom-client.md
@@ -0,0 +1,86 @@
+---
+id: react-dom-client
+title: ReactDOMClient
+layout: docs
+category: Reference
+permalink: docs/react-dom-client.html
+---
+
+The `react-dom/client` package provides client-specific methods used for initializing an app on the client. Most of your components should not need to use this module.
+
+```js
+import * as ReactDOM from 'react-dom/client';
+```
+
+If you use ES5 with npm, you can write:
+
+```js
+var ReactDOM = require('react-dom/client');
+```
+
+## Overview {#overview}
+
+The following methods can be used in client environments:
+
+- [`createRoot()`](#createroot)
+- [`hydrateRoot()`](#hydrateroot)
+
+### Browser Support {#browser-support}
+
+React supports all modern browsers, although [some polyfills are required](/docs/javascript-environment-requirements.html) for older versions.
+
+> Note
+>
+> We do not support older browsers that don't support ES5 methods or microtasks such as Internet Explorer. You may find that your apps do work in older browsers if polyfills such as [es5-shim and es5-sham](https://github.com/es-shims/es5-shim) are included in the page, but you're on your own if you choose to take this path.
+
+## Reference {#reference}
+
+### `createRoot()` {#createroot}
+
+```javascript
+createRoot(container[, options]);
+```
+
+Create a React root for the supplied `container` and return the root. The root can be used to render a React element into the DOM with `render`:
+
+```javascript
+const root = createRoot(container);
+root.render(element);
+```
+
+`createRoot` accepts two options:
+- `onRecoverableError`: optional callback called when React automatically recovers from errors.
+- `identifierPrefix`: optional prefix React uses for ids generated by `React.useId`. Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix used on the server.
+
+The root can also be unmounted with `unmount`:
+
+```javascript
+root.unmount();
+```
+
+> Note:
+>
+> `createRoot()` controls the contents of the container node you pass in. Any existing DOM elements inside are replaced when render is called. Later calls use React’s DOM diffing algorithm for efficient updates.
+>
+> `createRoot()` does not modify the container node (only modifies the children of the container). It may be possible to insert a component to an existing DOM node without overwriting the existing children.
+>
+> Using `createRoot()` to hydrate a server-rendered container is not supported. Use [`hydrateRoot()`](#hydrateroot) instead.
+
+* * *
+
+### `hydrateRoot()` {#hydrateroot}
+
+```javascript
+hydrateRoot(container, element[, options])
+```
+
+Same as [`createRoot()`](#createroot), but is used to hydrate a container whose HTML contents were rendered by [`ReactDOMServer`](/docs/react-dom-server.html). React will attempt to attach event listeners to the existing markup.
+
+`hydrateRoot` accepts two options:
+- `onRecoverableError`: optional callback called when React automatically recovers from errors.
+- `identifierPrefix`: optional prefix React uses for ids generated by `React.useId`. Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix used on the server.
+
+
+> Note
+> 
+> React expects that the rendered content is identical between the server and the client. It can patch up differences in text content, but you should treat mismatches as bugs and fix them. In development mode, React warns about mismatches during hydration. There are no guarantees that attribute differences will be patched up in case of mismatches. This is important for performance reasons because in most apps, mismatches are rare, and so validating all markup would be prohibitively expensive.
diff --git a/content/docs/reference-react-dom-server.md b/content/docs/reference-react-dom-server.md
index 80c030377..f43dfd4dd 100644
--- a/content/docs/reference-react-dom-server.md
+++ b/content/docs/reference-react-dom-server.md
@@ -10,60 +10,151 @@ The `ReactDOMServer` object enables you to render components to static markup. T
 
 ```js
 // ES modules
-import ReactDOMServer from 'react-dom/server';
+import * as ReactDOMServer from 'react-dom/server';
 // CommonJS
 var ReactDOMServer = require('react-dom/server');
 ```
 
 ## Overview {#overview}
 
-The following methods can be used in both the server and browser environments:
+These methods are only available in the **environments with [Node.js Streams](https://nodejs.org/api/stream.html):**
+
+- [`renderToPipeableStream()`](#rendertopipeablestream)
+- [`renderToNodeStream()`](#rendertonodestream) (Deprecated)
+- [`renderToStaticNodeStream()`](#rendertostaticnodestream)
+
+These methods are only available in the **environments with [Web Streams](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API)** (this includes browsers, Deno, and some modern edge runtimes):
+
+- [`renderToReadableStream()`](#rendertoreadablestream)
+
+The following methods can be used in the environments that don't support streams:
 
 - [`renderToString()`](#rendertostring)
 - [`renderToStaticMarkup()`](#rendertostaticmarkup)
 
-These additional methods depend on a package (`stream`) that is **only available on the server**, and won't work in the browser.
+## Reference {#reference}
 
-- [`renderToNodeStream()`](#rendertonodestream)
-- [`renderToStaticNodeStream()`](#rendertostaticnodestream)
+### `renderToPipeableStream()` {#rendertopipeablestream}
 
-* * *
+```javascript
+ReactDOMServer.renderToPipeableStream(element, options)
+```
 
-## Reference {#reference}
+Render a React element to its initial HTML. Returns a stream with a `pipe(res)` method to pipe the output and `abort()` to abort the request. Fully supports Suspense and streaming of HTML with "delayed" content blocks "popping in" via inline `<script>` tags later. [Read more](https://github.com/reactwg/react-18/discussions/37)
 
-### `renderToString()` {#rendertostring}
+If you call [`ReactDOM.hydrateRoot()`](/docs/react-dom-client.html#hydrateroot) on a node that already has this server-rendered markup, React will preserve it and only attach event handlers, allowing you to have a very performant first-load experience.
 
 ```javascript
-ReactDOMServer.renderToString(element)
+let didError = false;
+const stream = renderToPipeableStream(
+  <App />,
+  {
+    onShellReady() {
+      // The content above all Suspense boundaries is ready.
+      // If something errored before we started streaming, we set the error code appropriately.
+      res.statusCode = didError ? 500 : 200;
+      res.setHeader('Content-type', 'text/html');
+      stream.pipe(res);
+    },
+    onShellError(error) {
+      // Something errored before we could complete the shell so we emit an alternative shell.
+      res.statusCode = 500;
+      res.send(
+        '<!doctype html><p>Loading...</p><script src="clientrender.js"></script>'
+      );
+    },
+    onAllReady() {
+      // If you don't want streaming, use this instead of onShellReady.
+      // This will fire after the entire page content is ready.
+      // You can use this for crawlers or static generation.
+
+      // res.statusCode = didError ? 500 : 200;
+      // res.setHeader('Content-type', 'text/html');
+      // stream.pipe(res);
+    },
+    onError(err) {
+      didError = true;
+      console.error(err);
+    },
+  }
+);
 ```
 
-Render a React element to its initial HTML. React will return an HTML string. You can use this method to generate HTML on the server and send the markup down on the initial request for faster page loads and to allow search engines to crawl your pages for SEO purposes.
+See the [full list of options](https://github.com/facebook/react/blob/14c2be8dac2d5482fda8a0906a31d239df8551fc/packages/react-dom/src/server/ReactDOMFizzServerNode.js#L36-L46).
 
-If you call [`ReactDOM.hydrate()`](/docs/react-dom.html#hydrate) on a node that already has this server-rendered markup, React will preserve it and only attach event handlers, allowing you to have a very performant first-load experience.
+> Note:
+>
+> This is a Node.js-specific API. Environments with [Web Streams](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API), like Deno and modern edge runtimes, should use [`renderToReadableStream`](#rendertoreadablestream) instead.
+>
 
 * * *
 
-### `renderToStaticMarkup()` {#rendertostaticmarkup}
+### `renderToReadableStream()` {#rendertoreadablestream}
 
 ```javascript
-ReactDOMServer.renderToStaticMarkup(element)
+ReactDOMServer.renderToReadableStream(element, options);
 ```
 
-Similar to [`renderToString`](#rendertostring), except this doesn't create extra DOM attributes that React uses internally, such as `data-reactroot`. This is useful if you want to use React as a simple static page generator, as stripping away the extra attributes can save some bytes.
+Streams a React element to its initial HTML. Returns a Promise that resolves to a [Readable Stream](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream). Fully supports Suspense and streaming of HTML. [Read more](https://github.com/reactwg/react-18/discussions/127)
 
-If you plan to use React on the client to make the markup interactive, do not use this method. Instead, use [`renderToString`](#rendertostring) on the server and [`ReactDOM.hydrate()`](/docs/react-dom.html#hydrate) on the client.
+If you call [`ReactDOM.hydrateRoot()`](/docs/react-dom-client.html#hydrateroot) on a node that already has this server-rendered markup, React will preserve it and only attach event handlers, allowing you to have a very performant first-load experience.
+
+```javascript
+let controller = new AbortController();
+let didError = false;
+try {
+  let stream = await renderToReadableStream(
+    <html>
+      <body>Success</body>
+    </html>,
+    {
+      signal: controller.signal,
+      onError(error) {
+        didError = true;
+        console.error(error);
+      }
+    }
+  );
+  
+  // This is to wait for all Suspense boundaries to be ready. You can uncomment
+  // this line if you want to buffer the entire HTML instead of streaming it.
+  // You can use this for crawlers or static generation:
+
+  // await stream.allReady;
+
+  return new Response(stream, {
+    status: didError ? 500 : 200,
+    headers: {'Content-Type': 'text/html'},
+  });
+} catch (error) {
+  return new Response(
+    '<!doctype html><p>Loading...</p><script src="clientrender.js"></script>',
+    {
+      status: 500,
+      headers: {'Content-Type': 'text/html'},
+    }
+  );
+}
+```
+
+See the [full list of options](https://github.com/facebook/react/blob/14c2be8dac2d5482fda8a0906a31d239df8551fc/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js#L27-L35).
+
+> Note:
+>
+> This API depends on [Web Streams](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API). For Node.js, use [`renderToPipeableStream`](#rendertopipeablestream) instead.
+>
 
 * * *
 
-### `renderToNodeStream()` {#rendertonodestream}
+### `renderToNodeStream()`  (Deprecated) {#rendertonodestream}
 
 ```javascript
 ReactDOMServer.renderToNodeStream(element)
 ```
 
-Render a React element to its initial HTML. Returns a [Readable stream](https://nodejs.org/api/stream.html#stream_readable_streams) that outputs an HTML string. The HTML output by this stream is exactly equal to what [`ReactDOMServer.renderToString`](#rendertostring) would return. You can use this method to generate HTML on the server and send the markup down on the initial request for faster page loads and to allow search engines to crawl your pages for SEO purposes.
+Render a React element to its initial HTML. Returns a [Node.js Readable stream](https://nodejs.org/api/stream.html#stream_readable_streams) that outputs an HTML string. The HTML output by this stream is exactly equal to what [`ReactDOMServer.renderToString`](#rendertostring) would return. You can use this method to generate HTML on the server and send the markup down on the initial request for faster page loads and to allow search engines to crawl your pages for SEO purposes.
 
-If you call [`ReactDOM.hydrate()`](/docs/react-dom.html#hydrate) on a node that already has this server-rendered markup, React will preserve it and only attach event handlers, allowing you to have a very performant first-load experience.
+If you call [`ReactDOM.hydrateRoot()`](/docs/react-dom-client.html#hydrateroot) on a node that already has this server-rendered markup, React will preserve it and only attach event handlers, allowing you to have a very performant first-load experience.
 
 > Note:
 >
@@ -83,10 +174,40 @@ Similar to [`renderToNodeStream`](#rendertonodestream), except this doesn't crea
 
 The HTML output by this stream is exactly equal to what [`ReactDOMServer.renderToStaticMarkup`](#rendertostaticmarkup) would return.
 
-If you plan to use React on the client to make the markup interactive, do not use this method. Instead, use [`renderToNodeStream`](#rendertonodestream) on the server and [`ReactDOM.hydrate()`](/docs/react-dom.html#hydrate) on the client.
+If you plan to use React on the client to make the markup interactive, do not use this method. Instead, use [`renderToNodeStream`](#rendertonodestream) on the server and [`ReactDOM.hydrateRoot()`](/docs/react-dom-client.html#hydrateroot) on the client.
 
 > Note:
 >
 > Server-only. This API is not available in the browser.
 >
 > The stream returned from this method will return a byte stream encoded in utf-8. If you need a stream in another encoding, take a look at a project like [iconv-lite](https://www.npmjs.com/package/iconv-lite), which provides transform streams for transcoding text.
+
+* * *
+
+### `renderToString()` {#rendertostring}
+
+```javascript
+ReactDOMServer.renderToString(element)
+```
+
+Render a React element to its initial HTML. React will return an HTML string. You can use this method to generate HTML on the server and send the markup down on the initial request for faster page loads and to allow search engines to crawl your pages for SEO purposes.
+
+If you call [`ReactDOM.hydrateRoot()`](/docs/react-dom-client.html#hydrateroot) on a node that already has this server-rendered markup, React will preserve it and only attach event handlers, allowing you to have a very performant first-load experience.
+
+> Note
+>
+> This API has limited Suspense support and does not support streaming.
+>
+> On the server, it is recommended to use either [`renderToPipeableStream`](#rendertopipeablestream) (for Node.js) or [`renderToReadableStream`](#rendertoreadablestream) (for Web Streams) instead.
+
+* * *
+
+### `renderToStaticMarkup()` {#rendertostaticmarkup}
+
+```javascript
+ReactDOMServer.renderToStaticMarkup(element)
+```
+
+Similar to [`renderToString`](#rendertostring), except this doesn't create extra DOM attributes that React uses internally, such as `data-reactroot`. This is useful if you want to use React as a simple static page generator, as stripping away the extra attributes can save some bytes.
+
+If you plan to use React on the client to make the markup interactive, do not use this method. Instead, use [`renderToString`](#rendertostring) on the server and [`ReactDOM.hydrateRoot()`](/docs/react-dom-client.html#hydrateroot) on the client.
diff --git a/content/docs/reference-react-dom.md b/content/docs/reference-react-dom.md
index f440ef7ed..1c995b3c6 100644
--- a/content/docs/reference-react-dom.md
+++ b/content/docs/reference-react-dom.md
@@ -6,36 +6,92 @@ category: Reference
 permalink: docs/react-dom.html
 ---
 
-If you load React from a `<script>` tag, these top-level APIs are available on the `ReactDOM` global. If you use ES6 with npm, you can write `import ReactDOM from 'react-dom'`. If you use ES5 with npm, you can write `var ReactDOM = require('react-dom')`.
+The `react-dom` package provides DOM-specific methods that can be used at the top level of your app and as an escape hatch to get outside the React model if you need to.
+
+```js
+import * as ReactDOM from 'react-dom';
+```
+
+If you use ES5 with npm, you can write:
+
+```js
+var ReactDOM = require('react-dom');
+```
+
+The `react-dom` package also provides modules specific to client and server apps:
+- [`react-dom/client`](/docs/react-dom-client.html)
+- [`react-dom/server`](/docs/react-dom-server.html)
 
 ## Overview {#overview}
 
-The `react-dom` package provides DOM-specific methods that can be used at the top level of your app and as an escape hatch to get outside of the React model if you need to. Most of your components should not need to use this module.
+The `react-dom` package exports these methods:
+- [`createPortal()`](#createportal)
+- [`flushSync()`](#flushsync)
 
+These `react-dom` methods are also exported, but are considered legacy:
 - [`render()`](#render)
 - [`hydrate()`](#hydrate)
-- [`unmountComponentAtNode()`](#unmountcomponentatnode)
 - [`findDOMNode()`](#finddomnode)
-- [`createPortal()`](#createportal)
+- [`unmountComponentAtNode()`](#unmountcomponentatnode)
+
+> Note: 
+> 
+> Both `render` and `hydrate` have been replaced with new [client methods](/docs/react-dom-client.html) in React 18. These methods will warn that your app will behave as if it's running React 17 (learn more [here](https://reactjs.org/link/switch-to-createroot)).
 
 ### Browser Support {#browser-support}
 
-React supports all popular browsers, including Internet Explorer 9 and above, although [some polyfills are required](/docs/javascript-environment-requirements.html) for older browsers such as IE 9 and IE 10.
+React supports all modern browsers, although [some polyfills are required](/docs/javascript-environment-requirements.html) for older versions.
 
 > Note
 >
-> We don't support older browsers that don't support ES5 methods, but you may find that your apps do work in older browsers if polyfills such as [es5-shim and es5-sham](https://github.com/es-shims/es5-shim) are included in the page. You're on your own if you choose to take this path.
-
-* * *
+> We do not support older browsers that don't support ES5 methods or microtasks such as Internet Explorer. You may find that your apps do work in older browsers if polyfills such as [es5-shim and es5-sham](https://github.com/es-shims/es5-shim) are included in the page, but you're on your own if you choose to take this path.
 
 ## Reference {#reference}
 
-### `render()` {#render}
+### `createPortal()` {#createportal}
+
+```javascript
+createPortal(child, container)
+```
+
+Creates a portal. Portals provide a way to [render children into a DOM node that exists outside the hierarchy of the DOM component](/docs/portals.html).
+
+### `flushSync()` {#flushsync}
+
+```javascript
+flushSync(callback)
+```
+
+Force React to flush any updates inside the provided callback synchronously. This ensures that the DOM is updated immediately.
+
+```javascript
+// Force this state update to be synchronous.
+flushSync(() => {
+  setCount(count + 1);
+});
+// By this point, DOM is updated.
+```
 
+> Note:
+> 
+> `flushSync` can significantly hurt performance. Use sparingly.
+> 
+> `flushSync` may force pending Suspense boundaries to show their `fallback` state.
+> 
+> `flushSync` may also run pending effects and synchronously apply any updates they contain before returning.
+> 
+> `flushSync` may also flush updates outside the callback when necessary to flush the updates inside the callback. For example, if there are pending updates from a click, React may flush those before flushing the updates inside the callback.
+
+## Legacy Reference {#legacy-reference}
+### `render()` {#render}
 ```javascript
-ReactDOM.render(element, container[, callback])
+render(element, container[, callback])
 ```
 
+> Note:
+>
+> `render` has been replaced with `createRoot` in React 18. See [createRoot](/docs/react-dom-client.html#createroot) for more info.
+
 Render a React element into the DOM in the supplied `container` and return a [reference](/docs/more-about-refs.html) to the component (or returns `null` for [stateless components](/docs/components-and-props.html#function-and-class-components)).
 
 If the React element was previously rendered into `container`, this will perform an update on it and only mutate the DOM as necessary to reflect the latest React element.
@@ -44,24 +100,28 @@ If the optional callback is provided, it will be executed after the component is
 
 > Note:
 >
-> `ReactDOM.render()` controls the contents of the container node you pass in. Any existing DOM elements inside are replaced when first called. Later calls use React’s DOM diffing algorithm for efficient updates.
+> `render()` controls the contents of the container node you pass in. Any existing DOM elements inside are replaced when first called. Later calls use React’s DOM diffing algorithm for efficient updates.
 >
-> `ReactDOM.render()` does not modify the container node (only modifies the children of the container). It may be possible to insert a component to an existing DOM node without overwriting the existing children.
+> `render()` does not modify the container node (only modifies the children of the container). It may be possible to insert a component to an existing DOM node without overwriting the existing children.
 >
-> `ReactDOM.render()` currently returns a reference to the root `ReactComponent` instance. However, using this return value is legacy
+> `render()` currently returns a reference to the root `ReactComponent` instance. However, using this return value is legacy
 > and should be avoided because future versions of React may render components asynchronously in some cases. If you need a reference to the root `ReactComponent` instance, the preferred solution is to attach a
-> [callback ref](/docs/more-about-refs.html#the-ref-callback-attribute) to the root element.
+> [callback ref](/docs/refs-and-the-dom.html#callback-refs) to the root element.
 >
-> Using `ReactDOM.render()` to hydrate a server-rendered container is deprecated and will be removed in React 17. Use [`hydrate()`](#hydrate) instead.
+> Using `render()` to hydrate a server-rendered container is deprecated. Use [`hydrateRoot()`](/docs/react-dom-client.html#hydrateroot) instead.
 
 * * *
 
 ### `hydrate()` {#hydrate}
 
 ```javascript
-ReactDOM.hydrate(element, container[, callback])
+hydrate(element, container[, callback])
 ```
 
+> Note:
+>
+> `hydrate` has been replaced with `hydrateRoot` in React 18. See [hydrateRoot](/docs/react-dom-client.html#hydrateroot) for more info.
+
 Same as [`render()`](#render), but is used to hydrate a container whose HTML contents were rendered by [`ReactDOMServer`](/docs/react-dom-server.html). React will attempt to attach event listeners to the existing markup.
 
 React expects that the rendered content is identical between the server and the client. It can patch up differences in text content, but you should treat mismatches as bugs and fix them. In development mode, React warns about mismatches during hydration. There are no guarantees that attribute differences will be patched up in case of mismatches. This is important for performance reasons because in most apps, mismatches are rare, and so validating all markup would be prohibitively expensive.
@@ -77,9 +137,13 @@ Remember to be mindful of user experience on slow connections. The JavaScript co
 ### `unmountComponentAtNode()` {#unmountcomponentatnode}
 
 ```javascript
-ReactDOM.unmountComponentAtNode(container)
+unmountComponentAtNode(container)
 ```
 
+> Note:
+>
+> `unmountComponentAtNode` has been replaced with `root.unmount()` in React 18. See [createRoot](/docs/react-dom-client.html#createroot) for more info.
+
 Remove a mounted React component from the DOM and clean up its event handlers and state. If no component was mounted in the container, calling this function does nothing. Returns `true` if a component was unmounted and `false` if there was no component to unmount.
 
 * * *
@@ -91,7 +155,7 @@ Remove a mounted React component from the DOM and clean up its event handlers an
 > `findDOMNode` is an escape hatch used to access the underlying DOM node. In most cases, use of this escape hatch is discouraged because it pierces the component abstraction. [It has been deprecated in `StrictMode`.](/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage)
 
 ```javascript
-ReactDOM.findDOMNode(component)
+findDOMNode(component)
 ```
 If this component has been mounted into the DOM, this returns the corresponding native browser DOM element. This method is useful for reading values out of the DOM, such as form field values and performing DOM measurements. **In most cases, you can attach a ref to the DOM node and avoid using `findDOMNode` at all.**
 
@@ -104,11 +168,3 @@ When a component renders to `null` or `false`, `findDOMNode` returns `null`. Whe
 > `findDOMNode` cannot be used on function components.
 
 * * *
-
-### `createPortal()` {#createportal}
-
-```javascript
-ReactDOM.createPortal(child, container)
-```
-
-Creates a portal. Portals provide a way to [render children into a DOM node that exists outside the hierarchy of the DOM component](/docs/portals.html).
diff --git a/content/docs/reference-react.md b/content/docs/reference-react.md
index 36d6cddfb..d24c8cfd5 100644
--- a/content/docs/reference-react.md
+++ b/content/docs/reference-react.md
@@ -65,6 +65,13 @@ Suspense lets components "wait" for something before rendering. Today, Suspense
 - [`React.lazy`](#reactlazy)
 - [`React.Suspense`](#reactsuspense)
 
+### Transitions {#transitions}
+
+*Transitions* are a new concurrent feature introduced in React 18. They allow you to mark updates as transitions, which tells React that they can be interrupted and avoid going back to Suspense fallbacks for already visible content.
+
+- [`React.startTransition`](#starttransition)
+- [`React.useTransition`](/docs/hooks-reference.html#usetransition)
+
 ### Hooks {#hooks}
 
 *Hooks* are a new addition in React 16.8. They let you use state and other React features without writing a class. Hooks have a [dedicated docs section](/docs/hooks-intro.html) and a separate API reference:
@@ -81,6 +88,12 @@ Suspense lets components "wait" for something before rendering. Today, Suspense
   - [`useImperativeHandle`](/docs/hooks-reference.html#useimperativehandle)
   - [`useLayoutEffect`](/docs/hooks-reference.html#uselayouteffect)
   - [`useDebugValue`](/docs/hooks-reference.html#usedebugvalue)
+  - [`useDeferredValue`](/docs/hooks-reference.html#usedeferredvalue)
+  - [`useTransition`](/docs/hooks-reference.html#usetransition)
+  - [`useId`](/docs/hooks-reference.html#useid)
+- [Library Hooks](/docs/hooks-reference.html#library-hooks)
+  - [`useSyncExternalStore`](/docs/hooks-reference.html#usesyncexternalstore)
+  - [`useInsertionEffect`](/docs/hooks-reference.html#useinsertioneffect)
 
 * * *
 
@@ -110,7 +123,7 @@ If your React component's `render()` function renders the same result given the
 
 > Note
 >
-> `React.PureComponent`'s `shouldComponentUpdate()` only shallowly compares the objects. If these contain complex data structures, it may produce false-negatives for deeper differences. Only extend `PureComponent` when you expect to have simple props and state, or use [`forceUpdate()`](/docs/react-component.html#forceupdate) when you know deep data structures have changed. Or, consider using [immutable objects](https://facebook.github.io/immutable-js/) to facilitate fast comparisons of nested data.
+> `React.PureComponent`'s `shouldComponentUpdate()` only shallowly compares the objects. If these contain complex data structures, it may produce false-negatives for deeper differences. Only extend `PureComponent` when you expect to have simple props and state, or use [`forceUpdate()`](/docs/react-component.html#forceupdate) when you know deep data structures have changed. Or, consider using [immutable objects](https://immutable-js.com/) to facilitate fast comparisons of nested data.
 >
 > Furthermore, `React.PureComponent`'s `shouldComponentUpdate()` skips prop updates for the whole component subtree. Make sure all the children components are also "pure".
 
@@ -175,12 +188,12 @@ Code written with [JSX](/docs/introducing-jsx.html) will be converted to use `Re
 ```
 React.cloneElement(
   element,
-  [props],
+  [config],
   [...children]
 )
 ```
 
-Clone and return a new React element using `element` as the starting point. The resulting element will have the original element's props with the new props merged in shallowly. New children will replace existing children. `key` and `ref` from the original element will be preserved.
+Clone and return a new React element using `element` as the starting point. `config` should contain all new props, `key`, or `ref`. The resulting element will have the original element's props with the new props merged in shallowly. New children will replace existing children. `key` and `ref` from the original element will be preserved if no `key` and `ref` present in the `config`.
 
 `React.cloneElement()` is almost equivalent to:
 
@@ -188,7 +201,7 @@ Clone and return a new React element using `element` as the starting point. The
 <element.type {...element.props} {...props}>{children}</element.type>
 ```
 
-However, it also preserves `ref`s. This means that if you get a child with a `ref` on it, you won't accidentally steal it from your ancestor. You will get the same `ref` attached to your new element.
+However, it also preserves `ref`s. This means that if you get a child with a `ref` on it, you won't accidentally steal it from your ancestor. You will get the same `ref` attached to your new element. The new `ref` or `key` will replace old ones if present.
 
 This API was introduced as a replacement of the deprecated `React.addons.cloneWithProps()`.
 
@@ -329,13 +342,11 @@ const SomeComponent = React.lazy(() => import('./SomeComponent'));
 
 Note that rendering `lazy` components requires that there's a `<React.Suspense>` component higher in the rendering tree. This is how you specify a loading indicator.
 
-> **Note**
->
-> Using `React.lazy`with dynamic import requires Promises to be available in the JS environment. This requires a polyfill on IE11 and below.
-
 ### `React.Suspense` {#reactsuspense}
 
-`React.Suspense` lets you specify the loading indicator in case some components in the tree below it are not yet ready to render. Today, lazy loading components is the **only** use case supported by `<React.Suspense>`:
+`React.Suspense` lets you specify the loading indicator in case some components in the tree below it are not yet ready to render. In the future we plan to let `Suspense` handle more scenarios such as data fetching. You can read about this in [our roadmap](/blog/2018/11/27/react-16-roadmap.html).
+
+Today, lazy loading components is the **only** use case supported by `<React.Suspense>`:
 
 ```js
 // This component is loaded dynamically
@@ -355,8 +366,28 @@ function MyComponent() {
 
 It is documented in our [code splitting guide](/docs/code-splitting.html#reactlazy). Note that `lazy` components can be deep inside the `Suspense` tree -- it doesn't have to wrap every one of them. The best practice is to place `<Suspense>` where you want to see a loading indicator, but to use `lazy()` wherever you want to do code splitting.
 
-While this is not supported today, in the future we plan to let `Suspense` handle more scenarios such as data fetching. You can read about this in [our roadmap](/blog/2018/11/27/react-16-roadmap.html).
+> Note
+>
+> For content that is already shown to the user, switching back to a loading indicator can be disorienting. It is sometimes better to show the "old" UI while the new UI is being prepared. To do this, you can use the new transition APIs [`startTransition`](#starttransition) and [`useTransition`](/docs/hooks-reference.html#usetransition) to mark updates as transitions and avoid unexpected fallbacks.
+
+#### `React.Suspense` in Server Side Rendering {#reactsuspense-in-server-side-rendering}
+During server side rendering Suspense Boundaries allow you to flush your application in smaller chunks by suspending.
+When a component suspends we schedule a low priority task to render the closest Suspense boundary's fallback. If the component unsuspends before we flush the fallback then we send down the actual content and throw away the fallback.
+
+#### `React.Suspense` during hydration {#reactsuspense-during-hydration}
+Suspense boundaries depend on their parent boundaries being hydrated before they can hydrate, but they can hydrate independently from sibling boundaries. Events on a boundary before it is hydrated will cause the boundary to hydrate at a higher priority than neighboring boundaries. [Read more](https://github.com/reactwg/react-18/discussions/130)
+
+### `React.startTransition` {#starttransition}
 
->Note:
+```js
+React.startTransition(callback)
+```
+`React.startTransition` lets you mark updates inside the provided callback as transitions. This method is designed to be used when [`React.useTransition`](/docs/hooks-reference.html#usetransition) is not available.
+
+> Note:
+>
+> Updates in a transition yield to more urgent updates such as clicks.
+>
+> Updates in a transition will not show a fallback for re-suspended content, allowing the user to continue interacting while rendering the update.
 >
->`React.lazy()` and `<React.Suspense>` are not yet supported by `ReactDOMServer`. This is a known limitation that will be resolved in the future.
+> `React.startTransition` does not provide an `isPending` flag. To track the pending status of a transition see [`React.useTransition`](/docs/hooks-reference.html#usetransition).
diff --git a/content/docs/release-channels.md b/content/docs/release-channels.md
index 910649943..aa05985e5 100644
--- a/content/docs/release-channels.md
+++ b/content/docs/release-channels.md
@@ -15,10 +15,10 @@ React relies on a thriving open source community to file bug reports, open pull
 Each of React's release channels is designed for a distinct use case:
 
 - [**Latest**](#latest-channel) is for stable, semver React releases. It's what you get when you install React from npm. This is the channel you're already using today. **Use this for all user-facing React applications.**
-- [**Next**](#next-channel) tracks the master branch of the React source code repository. Think of these as release candidates for the next minor semver release. Use this for integration testing between React and third party projects.
-- [**Experimental**](#experimental-channel) includes experimental APIs and features that aren't available in the stable releases. These also track the master branch, but with additional feature flags turned on. Use this to try out upcoming features before they are released.
+- [**Next**](#next-channel) tracks the main branch of the React source code repository. Think of these as release candidates for the next minor semver release. Use this for integration testing between React and third party projects.
+- [**Experimental**](#experimental-channel) includes experimental APIs and features that aren't available in the stable releases. These also track the main branch, but with additional feature flags turned on. Use this to try out upcoming features before they are released.
 
-All releases are published to npm, but only Latest uses [semantic versioning](/docs/faq-versioning.html). Prereleases (those in the Next and Experimental channels) have versions generated from a hash of their contents, e.g. `0.0.0-1022ee0ec` for Next and `0.0.0-experimental-1022ee0ec` for Experimental.
+All releases are published to npm, but only Latest uses [semantic versioning](/docs/faq-versioning.html). Prereleases (those in the Next and Experimental channels) have versions generated from a hash of their contents and the commit date, e.g. `0.0.0-68053d940-20210623` for Next and `0.0.0-experimental-68053d940-20210623` for Experimental.
 
 **The only officially supported release channel for user-facing applications is Latest**. Next and Experimental releases are provided for testing purposes only, and we provide no guarantees that behavior won't change between releases. They do not follow the semver protocol that we use for releases from Latest.
 
@@ -34,13 +34,13 @@ You can expect updates to Latest to be extremely stable. Versions follow the sem
 
 ### Next Channel {#next-channel}
 
-The Next channel is a prerelease channel that tracks the master branch of the React repository. We use prereleases in the Next channel as release candidates for the Latest channel. You can think of Next as a superset of Latest that is updated more frequently.
+The Next channel is a prerelease channel that tracks the main branch of the React repository. We use prereleases in the Next channel as release candidates for the Latest channel. You can think of Next as a superset of Latest that is updated more frequently.
 
 The degree of change between the most recent Next release and the most recent Latest release is approximately the same as you would find between two minor semver releases. However, **the Next channel does not conform to semantic versioning.** You should expect occasional breaking changes between successive releases in the Next channel.
 
 **Do not use prereleases in user-facing applications.**
 
-Releases in Next are published with the `next` tag on npm. Versions are generated from a hash of the build's contents, e.g. `0.0.0-1022ee0ec`.
+Releases in Next are published with the `next` tag on npm. Versions are generated from a hash of the build's contents and the commit date, e.g. `0.0.0-68053d940-20210623`.
 
 #### Using the Next Channel for Integration Testing {#using-the-next-channel-for-integration-testing}
 
@@ -53,13 +53,13 @@ If you're the author of a third party React framework, library, developer tool,
 - Set up a cron job using your preferred continuous integration platform. Cron jobs are supported by both [CircleCI](https://circleci.com/docs/2.0/triggers/#scheduled-builds) and [Travis CI](https://docs.travis-ci.com/user/cron-jobs/).
 - In the cron job, update your React packages to the most recent React release in the Next channel, using `next` tag on npm. Using the npm cli:
 
-  ```
+  ```console
   npm update react@next react-dom@next
   ```
 
   Or yarn:
 
-  ```
+  ```console
   yarn upgrade react@next react-dom@next
   ```
 - Run your test suite against the updated packages.
@@ -70,13 +70,13 @@ A project that uses this workflow is Next.js. (No pun intended! Seriously!) You
 
 ### Experimental Channel {#experimental-channel}
 
-Like Next, the Experimental channel is a prerelease channel that tracks the master branch of the React repository. Unlike Next, Experimental releases include additional features and APIs that are not ready for wider release.
+Like Next, the Experimental channel is a prerelease channel that tracks the main branch of the React repository. Unlike Next, Experimental releases include additional features and APIs that are not ready for wider release.
 
 Usually, an update to Next is accompanied by a corresponding update to Experimental. They are based on the same source revision, but are built using a different set of feature flags.
 
 Experimental releases may be significantly different than releases to Next and Latest. **Do not use Experimental releases in user-facing applications.** You should expect frequent breaking changes between releases in the Experimental channel.
 
-Releases in Experimental are published with the `experimental` tag on npm. Versions are generated from a hash of the build's contents, e.g. `0.0.0-experimental-1022ee0ec`.
+Releases in Experimental are published with the `experimental` tag on npm. Versions are generated from a hash of the build's contents and the commit date, e.g. `0.0.0-experimental-68053d940-20210623`.
 
 #### What Goes Into an Experimental Release? {#what-goes-into-an-experimental-release}
 
@@ -94,4 +94,4 @@ If a feature is not documented, they may be accompanied by an [RFC](https://gith
 
 We will post to the [React blog](/blog) when we're ready to announce new experiments, but that doesn't mean we will publicize every experiment.
 
-You can always refer to our public GitHub repository's [history](https://github.com/facebook/react/commits/master) for a comprehensive list of changes.
+You can always refer to our public GitHub repository's [history](https://github.com/facebook/react/commits/main) for a comprehensive list of changes.
diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md
index ebffa3524..007cca0bd 100644
--- a/content/docs/rendering-elements.md
+++ b/content/docs/rendering-elements.md
@@ -34,11 +34,15 @@ HTML ဖိုင်တစ်ခုမှာ `<div>` တစ်ခုရှိန
 
 React နည်းပညာတစ်မျိုးတည်း အသုံးပြု့ထားတဲ့ application အများစုမှာတော့ root DOM node ကတစ်ခုပဲရှိတက်ပါတယ်။ အကယ်၍ သင့်အနေနဲ့ရှိနေပြီးသား application ထဲကို React ကိုထည့်သွင်းအသုံးပြု့တာဆိုရင်တော့ root DOM node တွေအများကြီးကို သင်စိတ်ကြိုက် ဖန်တီးနိုင်ပါတယ်။
 
+<<<<<<< HEAD
 React element တစ်ခု့ကို root DOM node မှာ ထည့်သွင်းဖော်ပြဖို့ဆိုရင်၊ ဖော်ပြလိုသော element နှင့် root DOM node နှစ်ခုလုံးကို [`ReactDOM.render()`](/docs/react-dom.html#render) မှာ parameter အနေနဲ့ထည့်ပေးရမှာဖြစ်ပါတယ်။
+=======
+To render a React element, first pass the DOM element to [`ReactDOM.createRoot()`](/docs/react-dom-client.html#createroot), then pass the React element to `root.render()`:
+>>>>>>> 38bf76a4a7bec6072d086ce8efdeef9ebb7af227
 
 `embed:rendering-elements/render-an-element.js`
 
-[](codepen://rendering-elements/render-an-element)
+**[Try it on CodePen](https://codepen.io/gaearon/pen/ZpvBNJ?editors=1010)**
 
 အထက်ပါ ဥပမာဟာဆိုရင် page မှာ "Hello, world" ဆိုတဲ့စာသားကိုဖော်ပြပေးပါတယ်။
 
@@ -46,19 +50,31 @@ React element တစ်ခု့ကို root DOM node မှာ ထည့်
 
 React elements တွေဟာဆိုရင် [immutable](https://en.wikipedia.org/wiki/Immutable_object) ဖြစ်ကြပါတယ်။ ဆိုလိုတာကတော့ သင့်အနေနဲ့ element တစ်ခုကို ဖန်တီးပြီးတိုင်းမှာ သူ့ရဲ့ attributes တွေနဲ့ children node တွေကိုပြောင်းလဲ့လို့မရပါဘူး။
 
+<<<<<<< HEAD
 လောလောဆယ် ကျွန်တော်တို့သိ့ထားသလောက်နဲ့ဆိုရင် UI ကို update လုပ်ဖို့ဆိုရင် new element တွေကို တည်ဆောက်ပြီး [`ReactDOM.render()`](/docs/react-dom.html#render) နဲ့ပြန်ပြီး render လုပ်တဲ့နည်းပဲရှိပါတယ်။
+=======
+With our knowledge so far, the only way to update the UI is to create a new element, and pass it to `root.render()`.
+>>>>>>> 38bf76a4a7bec6072d086ce8efdeef9ebb7af227
 
 အောက်ပါ ticking clock ဥပမာကိုလေ့လာကြည့်ပါ:
 
 `embed:rendering-elements/update-rendered-element.js`
 
-[](codepen://rendering-elements/update-rendered-element)
+**[Try it on CodePen](https://codepen.io/gaearon/pen/gwoJZk?editors=1010)**
 
+<<<<<<< HEAD
 ၎င်း ဥပမာဟာဆိုရင် [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval) ရဲ့ callback ကနေတစ်ဆင့် [`ReactDOM.render()`](/docs/react-dom.html#render) ကို UI update လုပ်ရန် စက္ကန့်တိုင်းမှာခေါ်နေရတာပဲဖြစ်ပါတယ်။
 
 >**Note:**
 >
 >တစ်ကယ်တမ်း React apps တွေရေးတဲ့ အခါမှာတော့ [`ReactDOM.render()`](/docs/react-dom.html#render) ကိုတစ်ခါပဲခေါ် ပြီး အသုံးပြု့ကြပါတယ်။  နောက်လာမည့် sections တွေမှာတော့ ယခုကဲသို့သော code တွေကို ဘယ်လို [stateful components](/docs/state-and-lifecycle.html) တွေဖြစ်အောင်ဖန်တီးသွာမည့်ဆိုတာတွေ့ရှိရမှာဖြစ်ပါတယ်။
+=======
+It calls [`root.render()`](/docs/react-dom.html#render) every second from a [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval) callback.
+
+>**Note:**
+>
+>In practice, most React apps only call `root.render()` once. In the next sections we will learn how such code gets encapsulated into [stateful components](/docs/state-and-lifecycle.html).
+>>>>>>> 38bf76a4a7bec6072d086ce8efdeef9ebb7af227
 >
 >သင့်အနေနဲ့ topics တွေကို ကျော်ပြီးမဖတ်ဖို့ အကြံပြု့ပါတယ်။ ဘာဖြစ်လို့လဲဆိုတော့ topics တွေက တစ်ခုကိုတစ်ခု အခြေခံ့ထားကြလို့ဖြစ်ပါတယ်။
 
@@ -66,7 +82,11 @@ React elements တွေဟာဆိုရင် [immutable](https://en.wikipedi
 
 React DOM ဟာဆိုရင် element တစ်ခု့ကို update လုပ်တဲ့နေရာမှာ element ရဲ့ အရင်ရှိပြီးသား attributes တွေနဲ့ children elements တွေကို နှိုင်းယှဉ်မှု့တွေလုပ်ပြီး လိုအပ်တဲ့နေရာကိုပဲကွက်ပြီး update လုပ်ပေးပါတယ်။
 
+<<<<<<< HEAD
 သင့်အနေနဲ့ ဒါကို [ယခင်ဥပမာ](codepen://rendering-elements/update-rendered-element) မှာ browser tools တွင် inspect ထောက်ပြီးစစ်ဆေးနိုင်ပါတယ်။
+=======
+You can verify by inspecting the [last example](https://codepen.io/gaearon/pen/gwoJZk?editors=1010) with the browser tools:
+>>>>>>> 38bf76a4a7bec6072d086ce8efdeef9ebb7af227
 
 ![DOM inspector showing granular updates](../images/docs/granular-dom-updates.gif)
 
diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index 8b98f711c..ddd6c1c6a 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -10,9 +10,11 @@ next: handling-events.html
 
 This page introduces the concept of state and lifecycle in a React component. You can find a [detailed component API reference here](/docs/react-component.html).
 
-Consider the ticking clock example from [one of the previous sections](/docs/rendering-elements.html#updating-the-rendered-element). In [Rendering Elements](/docs/rendering-elements.html#rendering-an-element-into-the-dom), we have only learned one way to update the UI. We call `ReactDOM.render()` to change the rendered output:
+Consider the ticking clock example from [one of the previous sections](/docs/rendering-elements.html#updating-the-rendered-element). In [Rendering Elements](/docs/rendering-elements.html#rendering-an-element-into-the-dom), we have only learned one way to update the UI. We call `root.render()` to change the rendered output:
 
-```js{8-11}
+```js{10}
+const root = ReactDOM.createRoot(document.getElementById('root'));
+  
 function tick() {
   const element = (
     <div>
@@ -20,10 +22,7 @@ function tick() {
       <h2>It is {new Date().toLocaleTimeString()}.</h2>
     </div>
   );
-  ReactDOM.render(
-    element,
-    document.getElementById('root')
-  );
+  root.render(element);
 }
 
 setInterval(tick, 1000);
@@ -35,7 +34,9 @@ In this section, we will learn how to make the `Clock` component truly reusable
 
 We can start by encapsulating how the clock looks:
 
-```js{3-6,12}
+```js{5-8,13}
+const root = ReactDOM.createRoot(document.getElementById('root'));
+
 function Clock(props) {
   return (
     <div>
@@ -46,10 +47,7 @@ function Clock(props) {
 }
 
 function tick() {
-  ReactDOM.render(
-    <Clock date={new Date()} />,
-    document.getElementById('root')
-  );
+  root.render(<Clock date={new Date()} />);
 }
 
 setInterval(tick, 1000);
@@ -62,10 +60,7 @@ However, it misses a crucial requirement: the fact that the `Clock` sets up a ti
 Ideally we want to write this once and have the `Clock` update itself:
 
 ```js{2}
-ReactDOM.render(
-  <Clock />,
-  document.getElementById('root')
-);
+root.render(<Clock />);
 ```
 
 To implement this, we need to add "state" to the `Clock` component.
@@ -158,10 +153,7 @@ Class components should always call the base constructor with `props`.
 3) Remove the `date` prop from the `<Clock />` element:
 
 ```js{2}
-ReactDOM.render(
-  <Clock />,
-  document.getElementById('root')
-);
+root.render(<Clock />);
 ```
 
 We will later add the timer code back to the component itself.
@@ -185,10 +177,8 @@ class Clock extends React.Component {
   }
 }
 
-ReactDOM.render(
-  <Clock />,
-  document.getElementById('root')
-);
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<Clock />);
 ```
 
 [**Try it on CodePen**](https://codepen.io/gaearon/pen/KgQpJd?editors=0010)
@@ -294,10 +284,8 @@ class Clock extends React.Component {
   }
 }
 
-ReactDOM.render(
-  <Clock />,
-  document.getElementById('root')
-);
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<Clock />);
 ```
 
 [**Try it on CodePen**](https://codepen.io/gaearon/pen/amqdNA?editors=0010)
@@ -306,7 +294,7 @@ Now the clock ticks every second.
 
 Let's quickly recap what's going on and the order in which the methods are called:
 
-1) When `<Clock />` is passed to `ReactDOM.render()`, React calls the constructor of the `Clock` component. Since `Clock` needs to display the current time, it initializes `this.state` with an object including the current time. We will later update this state.
+1) When `<Clock />` is passed to `root.render()`, React calls the constructor of the `Clock` component. Since `Clock` needs to display the current time, it initializes `this.state` with an object including the current time. We will later update this state.
 
 2) React then calls the `Clock` component's `render()` method. This is how React learns what should be displayed on the screen. React then updates the DOM to match the `Clock`'s render output.
 
@@ -447,11 +435,6 @@ function App() {
     </div>
   );
 }
-
-ReactDOM.render(
-  <App />,
-  document.getElementById('root')
-);
 ```
 
 [**Try it on CodePen**](https://codepen.io/gaearon/pen/vXdGmd?editors=0010)
diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md
index c95820240..41af5570e 100644
--- a/content/docs/static-type-checking.md
+++ b/content/docs/static-type-checking.md
@@ -312,15 +312,15 @@ declare module 'querystring' {
 
 You are now ready to code! We recommend to check out the following resources to learn more about TypeScript:
 
-* [TypeScript Documentation: Basic Types](https://www.typescriptlang.org/docs/handbook/basic-types.html)
-* [TypeScript Documentation: Migrating from Javascript](https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html)
+* [TypeScript Documentation: Everyday Types](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html)
+* [TypeScript Documentation: Migrating from JavaScript](https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html)
 * [TypeScript Documentation: React and Webpack](https://www.typescriptlang.org/docs/handbook/react-&-webpack.html)
 
-## Reason {#reason}
+## ReScript {#rescript}
 
-[Reason](https://reasonml.github.io/) is not a new language; it's a new syntax and toolchain powered by the battle-tested language, [OCaml](https://ocaml.org/). Reason gives OCaml a familiar syntax geared toward JavaScript programmers, and caters to the existing NPM/Yarn workflow folks already know.
+[ReScript](https://rescript-lang.org/) is a typed language that compiles to JavaScript. Some of its core features are  guaranteed 100% type coverage, first-class JSX support and [dedicated React bindings](https://rescript-lang.org/docs/react/latest/introduction) to allow integration in existing JS / TS React codebases.
 
-Reason is developed at Facebook, and is used in some of its products like Messenger. It is still somewhat experimental but it has [dedicated React bindings](https://reasonml.github.io/reason-react/) maintained by Facebook and a [vibrant community](https://reasonml.github.io/docs/en/community.html).
+You can find more infos on integrating ReScript in your existing JS / React codebase [here](https://rescript-lang.org/docs/manual/latest/installation#integrate-into-an-existing-js-project).
 
 ## Kotlin {#kotlin}
 
diff --git a/content/docs/strict-mode.md b/content/docs/strict-mode.md
index 590ed7b7d..d06e2d58c 100644
--- a/content/docs/strict-mode.md
+++ b/content/docs/strict-mode.md
@@ -21,6 +21,7 @@ In the above example, strict mode checks will *not* be run against the `Header`
 * [Warning about deprecated findDOMNode usage](#warning-about-deprecated-finddomnode-usage)
 * [Detecting unexpected side effects](#detecting-unexpected-side-effects)
 * [Detecting legacy context API](#detecting-legacy-context-api)
+* [Ensuring reusable state](#ensuring-reusable-state)
 
 Additional functionality will be added with future releases of React.
 
@@ -118,7 +119,9 @@ By intentionally double-invoking methods like the component constructor, strict
 
 > Note:
 >
-> Starting with React 17, React automatically modifies the console methods like `console.log()` to silence the logs in the second call to lifecycle functions. However, it may cause undesired behavior in certain cases where [a workaround can be used](https://github.com/facebook/react/issues/20090#issuecomment-715927125).
+> In React 17, React automatically modifies the console methods like `console.log()` to silence the logs in the second call to lifecycle functions. However, it may cause undesired behavior in certain cases where [a workaround can be used](https://github.com/facebook/react/issues/20090#issuecomment-715927125).
+>
+> Starting from React 18, React does not suppress any logs. However, if you have React DevTools installed, the logs from the second call will appear slightly dimmed. React DevTools also offers a setting (off by default) to suppress them completely.
 
 ### Detecting legacy context API {#detecting-legacy-context-api}
 
@@ -127,3 +130,59 @@ The legacy context API is error-prone, and will be removed in a future major ver
 ![](../images/blog/warn-legacy-context-in-strict-mode.png)
 
 Read the [new context API documentation](/docs/context.html) to help migrate to the new version.
+
+
+### Ensuring reusable state {#ensuring-reusable-state}
+
+In the future, we’d like to add a feature that allows React to add and remove sections of the UI while preserving state. For example, when a user tabs away from a screen and back, React should be able to immediately show the previous screen. To do this, React will support remounting trees using the same component state used before unmounting.
+
+This feature will give React better performance out-of-the-box, but requires components to be resilient to effects being mounted and destroyed multiple times. Most effects will work without any changes, but some effects do not properly clean up subscriptions in the destroy callback, or implicitly assume they are only mounted or destroyed once.
+
+To help surface these issues, React 18 introduces a new development-only check to Strict Mode. This new check will automatically unmount and remount every component, whenever a component mounts for the first time, restoring the previous state on the second mount.
+
+To demonstrate the development behavior you'll see in Strict Mode with this feature, consider what happens when React mounts a new component. Without this change, when a component mounts, React creates the effects:
+
+```
+* React mounts the component.
+  * Layout effects are created.
+  * Effects are created.
+```
+
+With Strict Mode starting in React 18, whenever a component mounts in development, React will simulate immediately unmounting and remounting the component:
+
+```
+* React mounts the component.
+    * Layout effects are created.
+    * Effects are created.
+* React simulates effects being destroyed on a mounted component.
+    * Layout effects are destroyed.
+    * Effects are destroyed.
+* React simulates effects being re-created on a mounted component.
+    * Layout effects are created
+    * Effect setup code runs
+```
+
+On the second mount, React will restore the state from the first mount. This feature simulates user behavior such as a user tabbing away from a screen and back, ensuring that code will properly handle state restoration.
+
+When the component unmounts, effects are destroyed as normal:
+
+```
+* React unmounts the component.
+  * Layout effects are destroyed.
+  * Effects are destroyed.
+```
+
+Unmounting and remounting includes:
+
+- `componentDidMount`
+- `componentWillUnmount`
+- `useEffect`
+- `useLayoutEffect`
+- `useInsertionEffect`
+
+> Note:
+>
+> This only applies to development mode, _production behavior is unchanged_.
+
+For help supporting common issues, see:
+  - [How to support Reusable State in Effects](https://github.com/reactwg/react-18/discussions/18)
diff --git a/content/docs/testing-environments.md b/content/docs/testing-environments.md
index 3f1eee570..cd2d3a7cc 100644
--- a/content/docs/testing-environments.md
+++ b/content/docs/testing-environments.md
@@ -47,7 +47,7 @@ On Node.js, runners like Jest [support mocking modules](https://jestjs.io/docs/e
 
 ### Mocking timers {#mocking-timers}
 
-Components might be using time-based functions like `setTimeout`, `setInterval`, or `Date.now`. In testing environments, it can be helpful to mock these functions out with replacements that let you manually "advance" time. This is great for making sure your tests run fast! Tests that are dependent on timers would still resolve in order, but quicker [<small>(example)</small>](/docs/testing-recipes.html#timers). Most frameworks, including [Jest](https://jestjs.io/docs/en/timer-mocks), [sinon](https://sinonjs.org/releases/v7.3.2/fake-timers/) and [lolex](https://github.com/sinonjs/lolex), let you mock timers in your tests.
+Components might be using time-based functions like `setTimeout`, `setInterval`, or `Date.now`. In testing environments, it can be helpful to mock these functions out with replacements that let you manually "advance" time. This is great for making sure your tests run fast! Tests that are dependent on timers would still resolve in order, but quicker [<small>(example)</small>](/docs/testing-recipes.html#timers). Most frameworks, including [Jest](https://jestjs.io/docs/en/timer-mocks), [sinon](https://sinonjs.org/releases/latest/fake-timers) and [lolex](https://github.com/sinonjs/lolex), let you mock timers in your tests.
 
 Sometimes, you may not want to mock timers. For example, maybe you're testing an animation, or interacting with an endpoint that's sensitive to timing (like an API rate limiter). Libraries with timer mocks let you enable and disable them on a per test/suite basis, so you can explicitly choose how these tests would run.
 
@@ -55,4 +55,4 @@ Sometimes, you may not want to mock timers. For example, maybe you're testing an
 
 End-to-end tests are useful for testing longer workflows, especially when they're critical to your business (such as payments or signups). For these tests, you'd probably want to test how a real browser renders the whole app, fetches data from the real API endpoints, uses sessions and cookies, navigates between different links. You might also likely want to make assertions not just on the DOM state, but on the backing data as well (e.g. to verify whether the updates have been persisted to the database).
 
-In this scenario, you would use a framework like [Cypress](https://www.cypress.io/) or a library like [puppeteer](https://github.com/GoogleChrome/puppeteer) so you can navigate between multiple routes and assert on side effects not just in the browser, but potentially on the backend as well.
+In this scenario, you would use a framework like [Cypress](https://www.cypress.io/), [Playwright](https://playwright.dev) or a library like [Puppeteer](https://pptr.dev/) so you can navigate between multiple routes and assert on side effects not just in the browser, but potentially on the backend as well.
diff --git a/content/docs/testing-recipes.md b/content/docs/testing-recipes.md
index 45669d127..73654835e 100644
--- a/content/docs/testing-recipes.md
+++ b/content/docs/testing-recipes.md
@@ -605,7 +605,7 @@ It's typically better to make more specific assertions than to use snapshots. Th
 
 ### Multiple Renderers {#multiple-renderers}
 
-In rare cases, you may be running a test on a component that uses multiple renderers. For example, you may be running snapshot tests on a component with `react-test-renderer`, that internally uses `ReactDOM.render` inside a child component to render some content. In this scenario, you can wrap updates with `act()`s corresponding to their renderers.
+In rare cases, you may be running a test on a component that uses multiple renderers. For example, you may be running snapshot tests on a component with `react-test-renderer`, that internally uses `render` from `react-dom` inside a child component to render some content. In this scenario, you can wrap updates with `act()`s corresponding to their renderers.
 
 ```jsx
 import { act as domAct } from "react-dom/test-utils";
diff --git a/content/docs/thinking-in-react.md b/content/docs/thinking-in-react.md
index 6e5e7ed94..4d00b7772 100644
--- a/content/docs/thinking-in-react.md
+++ b/content/docs/thinking-in-react.md
@@ -39,9 +39,9 @@ But how do you know what should be its own component? Use the same techniques fo
 
 Since you're often displaying a JSON data model to a user, you'll find that if your model was built correctly, your UI (and therefore your component structure) will map nicely. That's because UI and data models tend to adhere to the same *information architecture*. Separate your UI into components, where each component matches one piece of your data model.
 
-![Component diagram](../images/blog/thinking-in-react-components.png)
+![Diagram showing nesting of components](../images/blog/thinking-in-react-components.png)
 
-You'll see here that we have five components in our app. We've italicized the data each component represents.
+You'll see here that we have five components in our app. We've italicized the data each component represents. The numbers in the image correspond to the numbers below.
 
   1. **`FilterableProductTable` (orange):** contains the entirety of the example
   2. **`SearchBar` (blue):** receives all *user input*
@@ -70,9 +70,9 @@ To build a static version of your app that renders your data model, you'll want
 
 You can build top-down or bottom-up. That is, you can either start with building the components higher up in the hierarchy (i.e. starting with `FilterableProductTable`) or with the ones lower in it (`ProductRow`). In simpler examples, it's usually easier to go top-down, and on larger projects, it's easier to go bottom-up and write tests as you build.
 
-At the end of this step, you'll have a library of reusable components that render your data model. The components will only have `render()` methods since this is a static version of your app. The component at the top of the hierarchy (`FilterableProductTable`) will take your data model as a prop. If you make a change to your underlying data model and call `ReactDOM.render()` again, the UI will be updated. You can see how your UI is updated and where to make changes. React's **one-way data flow** (also called *one-way binding*) keeps everything modular and fast.
+At the end of this step, you'll have a library of reusable components that render your data model. The components will only have `render()` methods since this is a static version of your app. The component at the top of the hierarchy (`FilterableProductTable`) will take your data model as a prop. If you make a change to your underlying data model and call `root.render()` again, the UI will be updated. You can see how your UI is updated and where to make changes. React's **one-way data flow** (also called *one-way binding*) keeps everything modular and fast.
 
-Refer to the [React docs](/docs/) if you need help executing this step.
+Refer to the [React docs](/docs/getting-started.html) if you need help executing this step.
 
 ### A Brief Interlude: Props vs State {#a-brief-interlude-props-vs-state}
 
@@ -84,7 +84,7 @@ To make your UI interactive, you need to be able to trigger changes to your unde
 
 To build your app correctly, you first need to think of the minimal set of mutable state that your app needs. The key here is [DRY: *Don't Repeat Yourself*](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself). Figure out the absolute minimal representation of the state your application needs and compute everything else you need on-demand. For example, if you're building a TODO list, keep an array of the TODO items around; don't keep a separate state variable for the count. Instead, when you want to render the TODO count, take the length of the TODO items array.
 
-Think of all of the pieces of data in our example application. We have:
+Think of all the pieces of data in our example application. We have:
 
   * The original list of products
   * The search text the user has entered
@@ -137,10 +137,10 @@ So far, we've built an app that renders correctly as a function of props and sta
 
 React makes this data flow explicit to help you understand how your program works, but it does require a little more typing than traditional two-way data binding.
 
-If you try to type or check the box in the current version of the example, you'll see that React ignores your input. This is intentional, as we've set the `value` prop of the `input` to always be equal to the `state` passed in from `FilterableProductTable`.
+If you try to type or check the box in the previous version of the example (step 4), you'll see that React ignores your input. This is intentional, as we've set the `value` prop of the `input` to always be equal to the `state` passed in from `FilterableProductTable`.
 
 Let's think about what we want to happen. We want to make sure that whenever the user changes the form, we update the state to reflect the user input. Since components should only update their own state, `FilterableProductTable` will pass callbacks to `SearchBar` that will fire whenever the state should be updated. We can use the `onChange` event on the inputs to be notified of it. The callbacks passed by `FilterableProductTable` will call `setState()`, and the app will be updated.
 
 ## And That's It {#and-thats-it}
 
-Hopefully, this gives you an idea of how to think about building components and applications with React. While it may be a little more typing than you're used to, remember that code is read far more than it's written, and it's less difficult to read this modular, explicit code. As you start to build large libraries of components, you'll appreciate this explicitness and modularity, and with code reuse, your lines of code will start to shrink. :)
+Hopefully, this gives you an idea of how to think about building components and applications with React. While it may be a little more typing than you're used to, remember that code is read far more often than it's written, and it's less difficult to read this modular, explicit code. As you start to build large libraries of components, you'll appreciate this explicitness and modularity, and with code reuse, your lines of code will start to shrink. :)
diff --git a/content/docs/typechecking-with-proptypes.md b/content/docs/typechecking-with-proptypes.md
index 76cfbaff3..63d4a3fdc 100644
--- a/content/docs/typechecking-with-proptypes.md
+++ b/content/docs/typechecking-with-proptypes.md
@@ -173,13 +173,11 @@ Greeting.defaultProps = {
 };
 
 // Renders "Hello, Stranger":
-ReactDOM.render(
-  <Greeting />,
-  document.getElementById('example')
-);
+const root = ReactDOM.createRoot(document.getElementById('example')); 
+root.render(<Greeting />);
 ```
 
-If you are using a Babel transform like [transform-class-properties](https://babeljs.io/docs/plugins/transform-class-properties/) , you can also declare `defaultProps` as static property within a React component class. This syntax has not yet been finalized though and will require a compilation step to work within a browser. For more information, see the [class fields proposal](https://github.com/tc39/proposal-class-fields).
+Since ES2022 you can also declare `defaultProps` as static property within a React component class. For more information, see the [class public static fields](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Public_class_fields#public_static_fields). This modern syntax will require a compilation step to work within older browsers. 
 
 ```javascript
 class Greeting extends React.Component {
diff --git a/content/docs/web-components.md b/content/docs/web-components.md
index 1c5dcd278..c8394d20e 100644
--- a/content/docs/web-components.md
+++ b/content/docs/web-components.md
@@ -50,7 +50,8 @@ class XSearch extends HTMLElement {
 
     const name = this.getAttribute('name');
     const url = 'https://www.google.com/search?q=' + encodeURIComponent(name);
-    ReactDOM.render(<a href={url}>{name}</a>, mountPoint);
+    const root = ReactDOM.createRoot(mountPoint);
+    root.render(<a href={url}>{name}</a>);
   }
 }
 customElements.define('x-search', XSearch);
diff --git a/content/home/examples/a-component-using-external-plugins.js b/content/home/examples/a-component-using-external-plugins.js
index 99d86baad..0d0650146 100644
--- a/content/home/examples/a-component-using-external-plugins.js
+++ b/content/home/examples/a-component-using-external-plugins.js
@@ -36,7 +36,4 @@ class MarkdownEditor extends React.Component {
   }
 }
 
-ReactDOM.render(
-  <MarkdownEditor />,
-  document.getElementById('markdown-example')
-);
+root.render(<MarkdownEditor />);
diff --git a/content/home/examples/a-simple-component.js b/content/home/examples/a-simple-component.js
index 0f6b395a8..b18114f1a 100644
--- a/content/home/examples/a-simple-component.js
+++ b/content/home/examples/a-simple-component.js
@@ -1,5 +1,6 @@
 class HelloMessage extends React.Component {
   render() {
+<<<<<<< HEAD
     return (
       <div>
         မင်္ဂလာပါ {this.props.name}
@@ -11,4 +12,11 @@ class HelloMessage extends React.Component {
 ReactDOM.render(
   <HelloMessage name="မောင်မောင်" />,
   document.getElementById('hello-example')
-);
\ No newline at end of file
+);
+=======
+    return <div>Hello {this.props.name}</div>;
+  }
+}
+
+root.render(<HelloMessage name="Taylor" />);
+>>>>>>> 38bf76a4a7bec6072d086ce8efdeef9ebb7af227
diff --git a/content/home/examples/a-stateful-component.js b/content/home/examples/a-stateful-component.js
index 25d5a9145..bc329253b 100644
--- a/content/home/examples/a-stateful-component.js
+++ b/content/home/examples/a-stateful-component.js
@@ -27,7 +27,4 @@ class Timer extends React.Component {
   }
 }
 
-ReactDOM.render(
-  <Timer />,
-  document.getElementById('timer-example')
-);
\ No newline at end of file
+root.render(<Timer />);
diff --git a/content/home/examples/an-application.js b/content/home/examples/an-application.js
index 33d34aef9..9a3bc2ee1 100644
--- a/content/home/examples/an-application.js
+++ b/content/home/examples/an-application.js
@@ -60,7 +60,4 @@ class TodoList extends React.Component {
   }
 }
 
-ReactDOM.render(
-  <TodoApp />,
-  document.getElementById('todos-example')
-);
+root.render(<TodoApp />);
diff --git a/content/images/blog/thinking-in-react-components.png b/content/images/blog/thinking-in-react-components.png
index c71a86bcb..a8b2b2e12 100644
Binary files a/content/images/blog/thinking-in-react-components.png and b/content/images/blog/thinking-in-react-components.png differ
diff --git a/content/images/team/acdlite.jpg b/content/images/team/acdlite.jpg
index ab54b793b..19ddb901f 100644
Binary files a/content/images/team/acdlite.jpg and b/content/images/team/acdlite.jpg differ
diff --git a/content/images/team/bvaughn.jpg b/content/images/team/bvaughn.jpg
deleted file mode 100644
index 227fe8d94..000000000
Binary files a/content/images/team/bvaughn.jpg and /dev/null differ
diff --git a/content/images/team/gaearon.jpg b/content/images/team/gaearon.jpg
index e152143b7..dff5a5173 100644
Binary files a/content/images/team/gaearon.jpg and b/content/images/team/gaearon.jpg differ
diff --git a/content/images/team/jasonbonta.jpg b/content/images/team/jasonbonta.jpg
new file mode 100644
index 000000000..139eb5ece
Binary files /dev/null and b/content/images/team/jasonbonta.jpg differ
diff --git a/content/images/team/joe.jpg b/content/images/team/joe.jpg
new file mode 100644
index 000000000..0a533830b
Binary files /dev/null and b/content/images/team/joe.jpg differ
diff --git a/content/images/team/josh.jpg b/content/images/team/josh.jpg
new file mode 100644
index 000000000..a3d1ff10d
Binary files /dev/null and b/content/images/team/josh.jpg differ
diff --git a/content/images/team/lauren.jpg b/content/images/team/lauren.jpg
new file mode 100644
index 000000000..1485cf8ff
Binary files /dev/null and b/content/images/team/lauren.jpg differ
diff --git a/content/images/team/lunaruan.jpg b/content/images/team/lunaruan.jpg
index 91daa3d17..f6de76d4e 100644
Binary files a/content/images/team/lunaruan.jpg and b/content/images/team/lunaruan.jpg differ
diff --git a/content/images/team/mofei-zhang.png b/content/images/team/mofei-zhang.png
new file mode 100644
index 000000000..9f957ada3
Binary files /dev/null and b/content/images/team/mofei-zhang.png differ
diff --git a/content/images/team/necolas.jpg b/content/images/team/necolas.jpg
deleted file mode 100644
index b7caaac06..000000000
Binary files a/content/images/team/necolas.jpg and /dev/null differ
diff --git a/content/images/team/rickhanlonii.jpg b/content/images/team/rickhanlonii.jpg
index eb04614c5..9165db5bc 100644
Binary files a/content/images/team/rickhanlonii.jpg and b/content/images/team/rickhanlonii.jpg differ
diff --git a/content/images/team/rnabors.jpg b/content/images/team/rnabors.jpg
deleted file mode 100644
index 4425c90db..000000000
Binary files a/content/images/team/rnabors.jpg and /dev/null differ
diff --git a/content/images/team/sam.jpg b/content/images/team/sam.jpg
new file mode 100644
index 000000000..1a23eb1d5
Binary files /dev/null and b/content/images/team/sam.jpg differ
diff --git a/content/images/team/sathya.jpg b/content/images/team/sathya.jpg
new file mode 100644
index 000000000..3d8ca7d58
Binary files /dev/null and b/content/images/team/sathya.jpg differ
diff --git a/content/images/team/sebmarkbage.jpg b/content/images/team/sebmarkbage.jpg
index 56a480ff4..b73e13cd7 100644
Binary files a/content/images/team/sebmarkbage.jpg and b/content/images/team/sebmarkbage.jpg differ
diff --git a/content/images/team/sebsilbermann.jpg b/content/images/team/sebsilbermann.jpg
new file mode 100644
index 000000000..f6fa04b37
Binary files /dev/null and b/content/images/team/sebsilbermann.jpg differ
diff --git a/content/images/team/seth.jpg b/content/images/team/seth.jpg
new file mode 100644
index 000000000..c665a0b00
Binary files /dev/null and b/content/images/team/seth.jpg differ
diff --git a/content/images/team/sophiebits.jpg b/content/images/team/sophiebits.jpg
new file mode 100644
index 000000000..da5548aca
Binary files /dev/null and b/content/images/team/sophiebits.jpg differ
diff --git a/content/images/team/threepointone.jpg b/content/images/team/threepointone.jpg
deleted file mode 100644
index 9ad860171..000000000
Binary files a/content/images/team/threepointone.jpg and /dev/null differ
diff --git a/content/images/team/tianyu.jpg b/content/images/team/tianyu.jpg
new file mode 100644
index 000000000..68e423527
Binary files /dev/null and b/content/images/team/tianyu.jpg differ
diff --git a/content/images/team/trueadm.jpg b/content/images/team/trueadm.jpg
deleted file mode 100644
index 33a6b838f..000000000
Binary files a/content/images/team/trueadm.jpg and /dev/null differ
diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md
index a79c91584..fe73a7653 100644
--- a/content/tutorial/tutorial.md
+++ b/content/tutorial/tutorial.md
@@ -106,7 +106,7 @@ cd ..
 
 ```js
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import './index.css';
 ```
 
@@ -235,7 +235,7 @@ First, change the button tag that is returned from the Square component's `rende
 class Square extends React.Component {
   render() {
     return (
-      <button className="square" onClick={function() { alert('click'); }}>
+      <button className="square" onClick={function() { console.log('click'); }}>
         {this.props.value}
       </button>
     );
@@ -243,7 +243,7 @@ class Square extends React.Component {
 }
 ```
 
-If you click on a Square now, you should see an alert in your browser.
+If you click on a Square now, you should see 'click' in your browser's devtools console.
 
 >Note
 >
@@ -253,7 +253,7 @@ If you click on a Square now, you should see an alert in your browser.
 >class Square extends React.Component {
 >  render() {
 >    return (
->      <button className="square" onClick={() => alert('click')}>
+>      <button className="square" onClick={() => console.log('click')}>
 >        {this.props.value}
 >      </button>
 >    );
@@ -261,7 +261,7 @@ If you click on a Square now, you should see an alert in your browser.
 >}
 >```
 >
->Notice how with `onClick={() => alert('click')}`, we're passing *a function* as the `onClick` prop. React will only call this function after a click. Forgetting `() =>` and writing `onClick={alert('click')}` is a common mistake, and would fire the alert every time the component re-renders.
+>Notice how with `onClick={() => console.log('click')}`, we're passing *a function* as the `onClick` prop. React will only call this function after a click. Forgetting `() =>` and writing `onClick={console.log('click')}` is a common mistake, and would fire every time the component re-renders.
 
 As a next step, we want the Square component to "remember" that it got clicked, and fill it with an "X" mark. To "remember" things, components use **state**.
 
@@ -280,7 +280,7 @@ class Square extends React.Component {
 
   render() {
     return (
-      <button className="square" onClick={() => alert('click')}>
+      <button className="square" onClick={() => console.log('click')}>
         {this.props.value}
       </button>
     );
@@ -454,7 +454,7 @@ When a Square is clicked, the `onClick` function provided by the Board is called
 1. The `onClick` prop on the built-in DOM `<button>` component tells React to set up a click event listener.
 2. When the button is clicked, React will call the `onClick` event handler that is defined in Square's `render()` method.
 3. This event handler calls `this.props.onClick()`. The Square's `onClick` prop was specified by the Board.
-4. Since the Board passed `onClick={() => this.handleClick(i)}` to Square, the Square calls `this.handleClick(i)` when clicked.
+4. Since the Board passed `onClick={() => this.handleClick(i)}` to Square, the Square calls the Board's `handleClick(i)` when clicked.
 5. We have not defined the `handleClick()` method yet, so our code crashes. If you click a square now, you should see a red error screen saying something like "this.handleClick is not a function".
 
 >Note
@@ -524,7 +524,7 @@ Note how in `handleClick`, we call `.slice()` to create a copy of the `squares`
 
 ### Why Immutability Is Important {#why-immutability-is-important}
 
-In the previous code example, we suggested that you use the `.slice()` method to create a copy of the `squares` array to copy instead of modifying the existing array. We'll now discuss immutability and why immutability is important to learn.
+In the previous code example, we suggested that you create a copy of the `squares` array using the `slice()` method instead of modifying the existing array. We'll now discuss immutability and why immutability is important to learn.
 
 There are generally two approaches to changing data. The first approach is to *mutate* the data by directly changing the data's values. The second approach is to replace the data with a new copy which has the desired changes.
 
@@ -542,7 +542,7 @@ var player = {score: 1, name: 'Jeff'};
 var newPlayer = Object.assign({}, player, {score: 2});
 // Now player is unchanged, but newPlayer is {score: 2, name: 'Jeff'}
 
-// Or if you are using object spread syntax proposal, you can write:
+// Or if you are using object spread syntax, you can write:
 // var newPlayer = {...player, score: 2};
 ```
 
@@ -1045,6 +1045,8 @@ Let's `map` over the `history` in the Game's `render` method:
 
 **[View the full code at this point](https://codepen.io/gaearon/pen/EmmGEa?editors=0010)**
 
+As we iterate through `history` array, `step` variable refers to the current `history` element value, and `move` refers to the current `history` element index. We are only interested in `move` here, hence `step` is not getting assigned to anything.
+
 For each move in the tic-tac-toe game's history, we create a list item `<li>` which contains a button `<button>`. The button has a `onClick` handler which calls a method called `this.jumpTo()`. We haven't implemented the `jumpTo()` method yet. For now, we should see a list of the moves that have occurred in the game and a warning in the developer tools console that says:
 
 >  Warning:
@@ -1146,11 +1148,13 @@ Next, we'll define the `jumpTo` method in Game to update that `stepNumber`. We a
   }
 ```
 
+Notice in `jumpTo` method, we haven't updated `history` property of the state. That is because state updates are merged or in more simple words React will update only the properties mentioned in `setState` method leaving the remaining state as is. For more info **[see the documentation](/docs/state-and-lifecycle.html#state-updates-are-merged)**.
+
 We will now make a few changes to the Game's `handleClick` method which fires when you click on a square.
 
 The `stepNumber` state we've added reflects the move displayed to the user now. After we make a new move, we need to update `stepNumber` by adding `stepNumber: history.length` as part of the `this.setState` argument. This ensures we don't get stuck showing the same move after a new one has been made.
 
-We will also replace reading `this.state.history` with `this.state.history.slice(0, this.state.stepNumber + 1)`. This ensures that if we "go back in time" and then make a new move from that point, we throw away all the "future" history that would now become incorrect.
+We will also replace reading `this.state.history` with `this.state.history.slice(0, this.state.stepNumber + 1)`. This ensures that if we "go back in time" and then make a new move from that point, we throw away all the "future" history that would now be incorrect.
 
 ```javascript{2,13}
   handleClick(i) {
diff --git a/content/versions.yml b/content/versions.yml
index 510d4a3db..b8fd08a78 100644
--- a/content/versions.yml
+++ b/content/versions.yml
@@ -1,64 +1,51 @@
+- title: '18.2.0'
+  changelog: https://github.com/facebook/react/blob/main/CHANGELOG.md#1820-june-14-2022
+- title: '18.1.0'
+  changelog: https://github.com/facebook/react/blob/main/CHANGELOG.md#1810-april-26-2022
+- title: '18.0.0'
+  changelog: https://github.com/facebook/react/blob/main/CHANGELOG.md#1800-march-29-2022
 - title: '17.0.2'
-  changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#1702-march-22-2021
+  changelog: https://github.com/facebook/react/blob/main/CHANGELOG.md#1702-march-22-2021
+  url: https://17.reactjs.org
 - title: '17.0.1'
-  changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#1701-october-22-2020
+  changelog: https://github.com/facebook/react/blob/main/CHANGELOG.md#1701-october-22-2020
 - title: '17.0.0'
-  changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#1700-october-20-2020
+  changelog: https://github.com/facebook/react/blob/main/CHANGELOG.md#1700-october-20-2020
 - title: '16.14.0'
-  changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#16140-october-14-2020
+  changelog: https://github.com/facebook/react/blob/main/CHANGELOG.md#16140-october-14-2020
 - title: '16.13.1'
-  changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#16131-march-19-2020
+  changelog: https://github.com/facebook/react/blob/main/CHANGELOG.md#16131-march-19-2020
 - title: '16.13.0'
-  changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#16130-february-26-2020
+  changelog: https://github.com/facebook/react/blob/main/CHANGELOG.md#16130-february-26-2020
 - title: '16.12.0'
-  changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#16120-november-14-2019
+  changelog: https://github.com/facebook/react/blob/main/CHANGELOG.md#16120-november-14-2019
 - title: '16.11'
-  changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#16110-october-22-2019
+  changelog: https://github.com/facebook/react/blob/main/CHANGELOG.md#16110-october-22-2019
 - title: '16.10.2'
-  changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#16102-october-3-2019
+  changelog: https://github.com/facebook/react/blob/main/CHANGELOG.md#16102-october-3-2019
 - title: '16.10.1'
-  changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#16101-september-28-2019
+  changelog: https://github.com/facebook/react/blob/main/CHANGELOG.md#16101-september-28-2019
 - title: '16.10'
-  changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#16100-september-27-2019
+  changelog: https://github.com/facebook/react/blob/main/CHANGELOG.md#16100-september-27-2019
 - title: '16.9'
-  changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#1690-august-8-2019
+  changelog: https://github.com/facebook/react/blob/main/CHANGELOG.md#1690-august-8-2019
 - title: '16.8'
-  path: /version/16.8
-  changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#1680-february-6-2019
-  url: https://5d4b5feba32acd0008d0df98--reactjs.netlify.com/
+  changelog: https://github.com/facebook/react/blob/main/CHANGELOG.md#1680-february-6-2019
 - title: '16.7'
-  path: /version/16.7
-  changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#1670-december-19-2018
-  url: https://5c54aa429e16c80007af3cd2--reactjs.netlify.com/
+  changelog: https://github.com/facebook/react/blob/main/CHANGELOG.md#1670-december-19-2018
 - title: '16.6'
-  path: /version/16.6
-  changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#1660-october-23-2018
-  url: https://5c11762d4be4d10008916ab1--reactjs.netlify.com/
+  changelog: https://github.com/facebook/react/blob/main/CHANGELOG.md#1660-october-23-2018
 - title: '16.5'
-  path: /version/16.5
-  changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#1650-september-5-2018
-  url: https://5bcf5863c6aed64970d6de5b--reactjs.netlify.com/
+  changelog: https://github.com/facebook/react/blob/main/CHANGELOG.md#1650-september-5-2018
 - title: '16.4'
-  path: /version/16.4
-  changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#1640-may-23-2018
-  url: https://5b90c17ac9659241e7f4c938--reactjs.netlify.com
+  changelog: https://github.com/facebook/react/blob/main/CHANGELOG.md#1640-may-23-2018
 - title: '16.3'
-  path: /version/16.3
-  url: https://5b05c94e0733d530fd1fafe0--reactjs.netlify.com
-  changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#1632-april-16-2018
+  changelog: https://github.com/facebook/react/blob/main/CHANGELOG.md#1632-april-16-2018
 - title: '16.2'
-  path: /version/16.2
-  url: https://5abc31d8be40f1556f06c4be--reactjs.netlify.com
-  changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#1620-november-28-2017
+  changelog: https://github.com/facebook/react/blob/main/CHANGELOG.md#1620-november-28-2017
 - title: '16.1'
-  path: /version/16.1
-  url: https://5a1dbcf14c4b93299e65b9a9--reactjs.netlify.com
-  changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#1611-november-13-2017
+  changelog: https://github.com/facebook/react/blob/main/CHANGELOG.md#1611-november-13-2017
 - title: '16.0'
-  path: /version/16.0
-  url: https://5a046bf5a6188f4b8fa4938a--reactjs.netlify.com
-  changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#1600-september-26-2017
+  changelog: https://github.com/facebook/react/blob/main/CHANGELOG.md#1600-september-26-2017
 - title: '15.6'
-  path: /version/15.6
-  url: https://react-legacy.netlify.com
-  changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#1562-september-25-2017
+  changelog: https://github.com/facebook/react/blob/main/CHANGELOG.md#1562-september-25-2017
diff --git a/content/warnings/invalid-aria-prop.md b/content/warnings/invalid-aria-prop.md
index 53ebdd9bc..4aa18a0fd 100644
--- a/content/warnings/invalid-aria-prop.md
+++ b/content/warnings/invalid-aria-prop.md
@@ -8,4 +8,6 @@ The invalid-aria-prop warning will fire if you attempt to render a DOM element w
 
 1. If you feel that you are using a valid prop, check the spelling carefully. `aria-labelledby` and `aria-activedescendant` are often misspelled.
 
-2. React does not yet recognize the attribute you specified. This will likely be fixed in a future version of React. However, React currently strips all unknown attributes, so specifying them in your React app will not cause them to be rendered
\ No newline at end of file
+2. If you wrote `aria-role`, you may have meant `role`.
+
+3. Otherwise, if you're on the latest version of React DOM and verified that you're using a valid property name listed in the ARIA specification, please [report a bug](https://github.com/facebook/react/issues/new/choose).
diff --git a/content/warnings/unknown-prop.md b/content/warnings/unknown-prop.md
index 783d1b385..5b36059c8 100644
--- a/content/warnings/unknown-prop.md
+++ b/content/warnings/unknown-prop.md
@@ -33,7 +33,7 @@ function MyDiv(props) {
 }
 ```
 
-**Good:** The spread operator can be used to pull variables off props, and put the remaining props into a variable.
+**Good:** The spread syntax can be used to pull variables off props, and put the remaining props into a variable.
 
 ```js
 function MyDiv(props) {
diff --git a/examples/context/theme-detailed-app.js b/examples/context/theme-detailed-app.js
index 7edfe4db7..2e092d0d8 100644
--- a/examples/context/theme-detailed-app.js
+++ b/examples/context/theme-detailed-app.js
@@ -46,4 +46,7 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, document.root);
+const root = ReactDOM.createRoot(
+  document.getElementById('root')
+);
+root.render(<App />);
diff --git a/examples/context/updating-nested-context-app.js b/examples/context/updating-nested-context-app.js
index 3644e89a6..883d35802 100644
--- a/examples/context/updating-nested-context-app.js
+++ b/examples/context/updating-nested-context-app.js
@@ -42,4 +42,7 @@ function Content() {
   );
 }
 
-ReactDOM.render(<App />, document.root);
+const root = ReactDOM.createRoot(
+  document.getElementById('root')
+);
+root.render(<App />);
diff --git a/examples/hello-world.js b/examples/hello-world.js
index d0f87a59b..ea2dcf16a 100644
--- a/examples/hello-world.js
+++ b/examples/hello-world.js
@@ -1,4 +1,4 @@
-ReactDOM.render(
-  <h1>Hello, world!</h1>,
+const root = ReactDOM.createRoot(
   document.getElementById('root')
 );
+root.render(<h1>Hello, world!</h1>);
diff --git a/examples/introducing-jsx.js b/examples/introducing-jsx.js
index 3f1a07f35..54d58b12a 100644
--- a/examples/introducing-jsx.js
+++ b/examples/introducing-jsx.js
@@ -9,4 +9,7 @@ const user = {
 
 const element = <h1>Hello, {formatName(user)}!</h1>;
 
-ReactDOM.render(element, document.getElementById('root'));
+const root = ReactDOM.createRoot(
+  document.getElementById('root')
+);
+root.render(element);
diff --git a/examples/rendering-elements/render-an-element.js b/examples/rendering-elements/render-an-element.js
index 024b35876..315b33cb9 100644
--- a/examples/rendering-elements/render-an-element.js
+++ b/examples/rendering-elements/render-an-element.js
@@ -1,2 +1,5 @@
+const root = ReactDOM.createRoot(
+  document.getElementById('root')
+);
 const element = <h1>Hello, world</h1>;
-ReactDOM.render(element, document.getElementById('root'));
+root.render(element);
diff --git a/examples/rendering-elements/update-rendered-element.js b/examples/rendering-elements/update-rendered-element.js
index a4dabafc7..290e4edaa 100644
--- a/examples/rendering-elements/update-rendered-element.js
+++ b/examples/rendering-elements/update-rendered-element.js
@@ -1,3 +1,7 @@
+const root = ReactDOM.createRoot(
+  document.getElementById('root')
+);
+
 function tick() {
   const element = (
     <div>
@@ -6,7 +10,7 @@ function tick() {
     </div>
   );
   // highlight-next-line
-  ReactDOM.render(element, document.getElementById('root'));
+  root.render(element);
 }
 
 setInterval(tick, 1000);
diff --git a/examples/uncontrolled-components/input-type-file.js b/examples/uncontrolled-components/input-type-file.js
index 742d6dcd5..023f8a8be 100644
--- a/examples/uncontrolled-components/input-type-file.js
+++ b/examples/uncontrolled-components/input-type-file.js
@@ -28,7 +28,7 @@ class FileInput extends React.Component {
   }
 }
 
-ReactDOM.render(
-  <FileInput />,
+const root = ReactDOM.createRoot(
   document.getElementById('root')
 );
+root.render(<FileInput />);
diff --git a/package.json b/package.json
index ac897667c..201601466 100644
--- a/package.json
+++ b/package.json
@@ -46,7 +46,7 @@
     "mdast-util-to-string": "^1.0.5",
     "normalize.css": "^8.0.0",
     "prettier": "^1.7.4",
-    "prismjs": "^1.15.0",
+    "prismjs": "^1.27.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-helmet": "^5.2.0",
@@ -58,13 +58,11 @@
     "unist-util-visit": "^1.1.3"
   },
   "engines": {
-    "node": "12.x.x || 14.x.x || 15.x.x",
+    "node": "12.x.x || 14.x.x || 15.x.x || 16.x.x",
     "yarn": "^1.3.2"
   },
   "homepage": "https://reactjs.org/",
-  "keywords": [
-    "gatsby"
-  ],
+  "keywords": [],
   "license": "CC",
   "main": "n/a",
   "repository": {
@@ -96,5 +94,8 @@
     "npm-run-all": "^4.1.5",
     "recursive-readdir": "^2.2.1",
     "unist-util-map": "^1.0.3"
+  },
+  "resolutions": {
+    "**/sharp": "^0.30.3"
   }
 }
diff --git a/plugins/gatsby-source-react-error-codes/gatsby-node.js b/plugins/gatsby-source-react-error-codes/gatsby-node.js
index b3c04722e..414e50d46 100644
--- a/plugins/gatsby-source-react-error-codes/gatsby-node.js
+++ b/plugins/gatsby-source-react-error-codes/gatsby-node.js
@@ -5,7 +5,7 @@
 const request = require('request-promise');
 
 const errorCodesUrl =
-  'https://raw.githubusercontent.com/facebook/react/master/scripts/error-codes/codes.json';
+  'https://raw.githubusercontent.com/facebook/react/main/scripts/error-codes/codes.json';
 
 exports.sourceNodes = async ({actions}) => {
   const {createNode} = actions;
diff --git a/plugins/gatsby-transformer-home-example-code/gatsby-node.js b/plugins/gatsby-transformer-home-example-code/gatsby-node.js
index e67f42dad..cf689036f 100644
--- a/plugins/gatsby-transformer-home-example-code/gatsby-node.js
+++ b/plugins/gatsby-transformer-home-example-code/gatsby-node.js
@@ -3,7 +3,6 @@
  */
 
 const crypto = require('crypto');
-const path = require('path');
 
 const createContentDigest = obj =>
   crypto
diff --git a/plugins/gatsby-transformer-versions-yaml/create-redirects.js b/plugins/gatsby-transformer-versions-yaml/create-redirects.js
index 29a25c327..3314efaaf 100644
--- a/plugins/gatsby-transformer-versions-yaml/create-redirects.js
+++ b/plugins/gatsby-transformer-versions-yaml/create-redirects.js
@@ -2,9 +2,9 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-const {appendFile, exists, readFile, writeFile} = require('fs-extra');
-
-const HEADER_COMMENT = `## Created with gatsby-transformer-versions-yaml`;
+const readFileSync = require('fs').readFileSync;
+const resolve = require('path').resolve;
+const {writeFile} = require('fs-extra');
 
 // Patterned after the 'gatsby-plugin-netlify' plug-in:
 // https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-netlify/src/create-redirects.js
@@ -16,56 +16,53 @@ module.exports = async function writeRedirectsFile(
     return null;
   }
 
-  // Map redirect data to the format Netlify expects
-  // https://www.netlify.com/docs/redirects/
-  redirects = redirects.map(redirect => {
-    const {
-      fromPath,
-      isPermanent,
-      redirectInBrowser, // eslint-disable-line no-unused-vars
-      toPath,
-      ...rest
-    } = redirect;
-
-    // The order of these parameters is significant.
-    const pieces = [
-      fromPath,
-      toPath,
-      isPermanent ? 301 : 302, // Status
-    ];
+  /**
+   * We will first read the old config to validate if the redirect already exists in the json
+   */
+  const vercelConfigPath = resolve(__dirname, '../../vercel.json');
+  const vercelConfigFile = readFileSync(vercelConfigPath);
+  const oldConfigContent = JSON.parse(vercelConfigFile);
+  /**
+   * Map data as vercel expects it to be
+   */
 
-    for (let key in rest) {
-      const value = rest[key];
+  let vercelRedirects = {};
 
-      if (typeof value === `string` && value.indexOf(` `) >= 0) {
-        console.warn(
-          `Invalid redirect value "${value}" specified for key "${key}". ` +
-            `Values should not contain spaces.`,
-        );
-      } else {
-        pieces.push(`${key}=${value}`);
-      }
-    }
+  redirects.forEach(redirect => {
+    const {fromPath, isPermanent, toPath} = redirect;
 
-    return pieces.join(`  `);
+    vercelRedirects[fromPath] = {
+      destination: toPath,
+      permanent: !!isPermanent,
+    };
   });
-
-  let appendToFile = false;
-
-  // Websites may also have statically defined redirects
-  // In that case we should append to them (not overwrite)
-  // Make sure we aren't just looking at previous build results though
-  const fileExists = await exists(redirectsFilePath);
-  if (fileExists) {
-    const fileContents = await readFile(redirectsFilePath);
-    if (fileContents.indexOf(HEADER_COMMENT) < 0) {
-      appendToFile = true;
+  /**
+   * Make sure we dont have the same redirect already
+   */
+  oldConfigContent.redirects.forEach(data => {
+    if (vercelRedirects[data.source]) {
+      delete vercelRedirects[data.source];
     }
-  }
+  });
 
-  const data = `${HEADER_COMMENT}\n\n${redirects.join(`\n`)}`;
+  /**
+   * Serialize the object to array of objects
+   */
+  let newRedirects = [];
+  Object.keys(vercelRedirects).forEach(value =>
+    newRedirects.push({
+      source: value,
+      destination: vercelRedirects[value].destination,
+      permanent: !!vercelRedirects[value].isPermanent,
+    }),
+  );
 
-  return appendToFile
-    ? appendFile(redirectsFilePath, `\n\n${data}`)
-    : writeFile(redirectsFilePath, data);
+  /**
+   * We already have a vercel.json so we spread the new contents along with old ones
+   */
+  const newContents = {
+    ...oldConfigContent,
+    redirects: [...oldConfigContent.redirects, ...newRedirects],
+  };
+  return writeFile(redirectsFilePath, JSON.stringify(newContents, null, 2));
 };
diff --git a/plugins/gatsby-transformer-versions-yaml/gatsby-node.js b/plugins/gatsby-transformer-versions-yaml/gatsby-node.js
index 6ef517902..a71244a8a 100644
--- a/plugins/gatsby-transformer-versions-yaml/gatsby-node.js
+++ b/plugins/gatsby-transformer-versions-yaml/gatsby-node.js
@@ -16,11 +16,7 @@ exports.onPostBuild = async ({store}) => {
   const versions = safeLoad(file);
 
   const {program} = store.getState();
-  const redirectsFilePath = path.join(
-    program.directory,
-    'public',
-    '_redirects',
-  );
+  const redirectsFilePath = path.join(program.directory, 'vercel.json');
 
   // versions.yml structure is [{path: string, url: string, ...}, ...]
   await createRedirects(
diff --git a/src/components/CodeEditor/CodeEditor.js b/src/components/CodeEditor/CodeEditor.js
index 881865bca..dbf21abde 100644
--- a/src/components/CodeEditor/CodeEditor.js
+++ b/src/components/CodeEditor/CodeEditor.js
@@ -248,14 +248,23 @@ class CodeEditor extends Component {
 
   _render() {
     const {compiled} = this.state;
+    const {containerNodeID} = this.props;
+
+    // Until we upgrade Gatsby to React 18, fake the new root API.
+    const root = {
+      render: element => {
+        ReactDOM.render(element, document.getElementById(containerNodeID));
+      },
+    };
 
     try {
       // Example code requires React, ReactDOM, and Remarkable to be within scope.
       // It also requires a "mountNode" variable for ReactDOM.render()
       // eslint-disable-next-line no-new-func
-      new Function('React', 'ReactDOM', 'Remarkable', compiled)(
+      new Function('React', 'ReactDOM', 'root', 'Remarkable', compiled)(
         React,
         ReactDOM,
+        root,
         Remarkable,
       );
     } catch (error) {
diff --git a/src/components/Layout/Layout.js b/src/components/Layout/Layout.js
index 82e2e1287..143fb7dda 100644
--- a/src/components/Layout/Layout.js
+++ b/src/components/Layout/Layout.js
@@ -48,12 +48,15 @@ class Template extends Component<Props> {
           valign="stretch"
           css={{
             flex: '1 0 auto',
-            marginTop: 60,
-            [media.between('medium', 'large')]: {
-              marginTop: 50,
+            marginTop:
+              'calc(var(--header-height-large) + var(--survey-banner-height-normal) + var(--social-banner-height-normal))',
+            [media.size('medium')]: {
+              marginTop:
+                'calc(var(--header-height-normal) + var(--survey-banner-height-normal) + var(--social-banner-height-normal))',
             },
-            [media.lessThan('medium')]: {
-              marginTop: 40,
+            [media.lessThan('small')]: {
+              marginTop:
+                'calc(var(--header-height-small) + var(--survey-banner-height-small) + var(--social-banner-height-small))',
             },
           }}>
           {children}
diff --git a/src/components/LayoutFooter/Footer.js b/src/components/LayoutFooter/Footer.js
index afa7eeb9e..06bc37697 100644
--- a/src/components/LayoutFooter/Footer.js
+++ b/src/components/LayoutFooter/Footer.js
@@ -86,7 +86,7 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
           <FooterNav layoutHasSidebar={layoutHasSidebar}>
             <MetaTitle onDark={true}>{navFooter.community.title}</MetaTitle>
             <ExternalFooterLink
-              href={`https://github.com/facebook/react/blob/master/CODE_OF_CONDUCT.md`}>
+              href={`https://github.com/facebook/react/blob/main/CODE_OF_CONDUCT.md`}>
               Code of Conduct
             </ExternalFooterLink>
             {sectionListCommunity.map(section => (
@@ -145,7 +145,7 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
               color: colors.subtleOnDark,
               paddingTop: 15,
             }}>
-            {`Copyright © ${new Date().getFullYear()} Facebook Inc.`}
+            {`Copyright © ${new Date().getFullYear()} Meta Platforms, Inc.`}
           </p>
         </section>
       </div>
diff --git a/src/components/LayoutHeader/Header.js b/src/components/LayoutHeader/Header.js
index 82fa2c888..e4ac955fd 100644
--- a/src/components/LayoutHeader/Header.js
+++ b/src/components/LayoutHeader/Header.js
@@ -5,7 +5,8 @@
  * @flow
  */
 
-import Banner from 'components/Banner';
+import SurveyBanner from 'components/SurveyBanner';
+import SocialBanner from 'components/SocialBanner';
 import Container from 'components/Container';
 import HeaderLink from './HeaderLink';
 import {Link} from 'gatsby';
@@ -46,7 +47,8 @@ const Header = ({location}: {location: Location}) => (
     <ContainerWrapper>
       <Container>
         <div style={{position: 'relative'}}>
-          <Banner />
+          <SurveyBanner />
+          <SocialBanner />
         </div>
       </Container>
     </ContainerWrapper>
@@ -56,12 +58,12 @@ const Header = ({location}: {location: Location}) => (
           display: 'flex',
           flexDirection: 'row',
           alignItems: 'center',
-          height: 60,
-          [media.between('small', 'large')]: {
-            height: 50,
+          height: 'var(--header-height-large)',
+          [media.size('medium')]: {
+            height: 'var(--header-height-normal)',
           },
           [media.lessThan('small')]: {
-            height: 40,
+            height: 'var(--header-height-small)',
           },
         }}>
         <Link
diff --git a/src/components/MarkdownHeader/MarkdownHeader.js b/src/components/MarkdownHeader/MarkdownHeader.js
index 0ddc20cc8..b04beda10 100644
--- a/src/components/MarkdownHeader/MarkdownHeader.js
+++ b/src/components/MarkdownHeader/MarkdownHeader.js
@@ -17,19 +17,15 @@ const MarkdownHeader = ({title}: {title: string}) => {
         css={{
           color: colors.dark,
           marginBottom: 0,
-          marginTop: 'calc(40px + var(--banner-height-normal))',
+          marginTop: 80,
           ...fonts.header,
 
-          [media.lessThan('small')]: {
-            marginTop: 'calc(40px + var(--banner-height-small))',
-          },
-
           [media.size('medium')]: {
-            marginTop: 'calc(60px + var(--banner-height-normal))',
+            marginTop: 60,
           },
 
-          [media.greaterThan('large')]: {
-            marginTop: 'calc(80px + var(--banner-height-normal))',
+          [media.lessThan('small')]: {
+            marginTop: 40,
           },
         }}>
         {title}
diff --git a/src/components/MarkdownPage/MarkdownPage.js b/src/components/MarkdownPage/MarkdownPage.js
index ab1f3af3a..df754178c 100644
--- a/src/components/MarkdownPage/MarkdownPage.js
+++ b/src/components/MarkdownPage/MarkdownPage.js
@@ -16,9 +16,8 @@ import TitleAndMetaTags from 'components/TitleAndMetaTags';
 import FeedbackForm from 'components/FeedbackForm';
 import findSectionForPath from 'utils/findSectionForPath';
 import toCommaSeparatedList from 'utils/toCommaSeparatedList';
-import {sharedStyles} from 'theme';
 import createCanonicalUrl from 'utils/createCanonicalUrl';
-import {colors, media} from 'theme';
+import {sharedStyles, colors, media, fonts} from 'theme';
 
 import type {Node} from 'types';
 
@@ -75,9 +74,10 @@ const MarkdownPage = ({
         position: 'relative',
         zIndex: 0,
         '& h1, & h2, & h3, & h4, & h5, & h6': {
-          scrollMarginTop: 'var(--banner-height-normal)',
-          [media.lessThan('small')]: {
-            scrollMarginTop: 'var(--banner-height-small)',
+          scrollMarginTop: fonts.header.fontSize,
+
+          [media.lessThan('medium')]: {
+            scrollMarginTop: fonts.header[media.lessThan('medium')].fontSize,
           },
         },
       }}>
@@ -97,7 +97,7 @@ const MarkdownPage = ({
                 <div css={{marginTop: 15}}>
                   {date}{' '}
                   {hasAuthors && (
-                    <span>
+                    <span css={{lineHeight: 1.75}}>
                       by{' '}
                       {toCommaSeparatedList(authors, author => (
                         <a
@@ -132,7 +132,7 @@ const MarkdownPage = ({
                     </span>
                     <a
                       css={sharedStyles.articleLayout.editLink}
-                      href={`https://github.com/reactjs/reactjs.org/tree/master/${markdownRemark.fields.path}`}>
+                      href={`https://github.com/reactjs/reactjs.org/tree/main/${markdownRemark.fields.path}`}>
                       Edit this page
                     </a>
                   </div>
diff --git a/src/components/SocialBanner/SocialBanner.js b/src/components/SocialBanner/SocialBanner.js
new file mode 100644
index 000000000..23613013c
--- /dev/null
+++ b/src/components/SocialBanner/SocialBanner.js
@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * @emails react-core
+ * @flow
+ */
+
+// $FlowFixMe Update Flow
+import React from 'react';
+import {colors, media} from 'theme';
+
+const linkProps = {
+  href: 'https://beta.reactjs.org',
+  target: '_blank',
+  rel: 'noopener',
+};
+
+const bannerText = 'Try out a preview of the new React Docs!';
+const bannerLink = '👉 beta.reactjs.org';
+
+export default function SocialBanner() {
+  return (
+    <div
+      css={{
+        display: 'var(--social-banner-display)',
+        height: 'var(--social-banner-height-normal)',
+        fontSize: 18,
+        fontWeight: 'bold',
+        [media.lessThan('large')]: {
+          fontSize: 16,
+        },
+        [media.lessThan('small')]: {
+          height: 'var(--social-banner-height-small)',
+          fontSize: 14,
+        },
+      }}>
+      <div
+        css={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          height: '100%',
+        }}>
+        <span
+          css={{
+            display: 'flex',
+            [media.lessThan('small')]: {
+              flexDirection: 'column',
+              lineHeight: 1.5,
+              textAlign: 'center',
+            },
+          }}>
+          <span
+            css={{
+              marginRight: '0.5rem',
+            }}>
+            {bannerText}
+          </span>
+
+          <a
+            css={{
+              color: colors.brand,
+            }}
+            {...linkProps}
+            target="_blank"
+            rel="noopener">
+            <span css={{color: colors.brand}}>{bannerLink}</span>
+          </a>
+        </span>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Banner/index.js b/src/components/SocialBanner/index.js
similarity index 54%
rename from src/components/Banner/index.js
rename to src/components/SocialBanner/index.js
index 3e286dd74..f1cb9778c 100644
--- a/src/components/Banner/index.js
+++ b/src/components/SocialBanner/index.js
@@ -4,6 +4,6 @@
  * @emails react-core
  */
 
-import Banner from './Banner';
+import SocialBanner from './SocialBanner';
 
-export default Banner;
+export default SocialBanner;
diff --git a/src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js b/src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js
index 93cea504d..cdcbbfd14 100644
--- a/src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js
+++ b/src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js
@@ -43,7 +43,8 @@ class StickyResponsiveSidebar extends Component<Props, State> {
   render() {
     const {open} = this.state;
     const smallScreenSidebarStyles = {
-      top: 'var(--banner-height-small)',
+      top:
+        'calc(var(--survey-banner-height-small) + var(--social-banner-height-small))',
       left: 0,
       bottom: 0,
       right: 0,
@@ -117,18 +118,18 @@ class StickyResponsiveSidebar extends Component<Props, State> {
               transition: 'transform 0.5s ease',
             }}
             css={{
-              marginTop: 'calc(60px + var(--banner-height-normal))',
+              marginTop: 60,
 
               [media.size('xsmall')]: {
                 marginTop: 40,
               },
 
               [media.between('small', 'medium')]: {
-                marginTop: 'calc(20px + var(--banner-height-normal))',
+                marginTop: 20,
               },
 
               [media.between('medium', 'large')]: {
-                marginTop: 'calc(50px + var(--banner-height-normal))',
+                marginTop: 50,
               },
 
               [media.greaterThan('small')]: {
diff --git a/src/components/Banner/Banner.js b/src/components/SurveyBanner/SurveyBanner.js
similarity index 94%
rename from src/components/Banner/Banner.js
rename to src/components/SurveyBanner/SurveyBanner.js
index 9c7b2ed68..ee871afad 100644
--- a/src/components/Banner/Banner.js
+++ b/src/components/SurveyBanner/SurveyBanner.js
@@ -11,23 +11,23 @@ import {colors, fonts, media} from 'theme';
 import ExternalLinkSvg from 'templates/components/ExternalLinkSvg';
 
 const linkProps = {
-  href: 'https://www.surveymonkey.co.uk/r/673TZ7T',
+  href: 'https://surveys.savanta.com/survey/selfserve/21e3/210643?list=2',
   target: '_blank',
   rel: 'noopener',
 };
 
-export default function Banner() {
+export default function SurveyBanner() {
   return (
     <div
       css={{
-        display: 'var(--banner-display)',
-        height: 'var(--banner-height-normal)',
+        display: 'var(--survey-banner-display)',
+        height: 'var(--survey-banner-height-normal)',
         fontSize: 18,
         [media.lessThan('large')]: {
           fontSize: 16,
         },
         [media.lessThan('small')]: {
-          height: 'var(--banner-height-small)',
+          height: 'var(--survey-banner-height-small)',
           fontSize: 14,
         },
       }}>
@@ -135,7 +135,7 @@ export default function Banner() {
             target="_blank"
             rel="noopener">
             <span css={{color: colors.brand}}>
-              Take our 2020 Community Survey!
+              Take our 2021 Community Survey!
             </span>
             <ExternalLinkSvg
               cssProps={{
@@ -167,7 +167,7 @@ export default function Banner() {
             }}
             onClick={() => {
               // See html.js
-              window.__dismissBanner();
+              window.__dismissSurveyBanner();
             }}>
             <svg
               xmlns="http://www.w3.org/2000/svg"
diff --git a/src/components/SurveyBanner/index.js b/src/components/SurveyBanner/index.js
new file mode 100644
index 000000000..bdb84cdfb
--- /dev/null
+++ b/src/components/SurveyBanner/index.js
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * @emails react-core
+ */
+
+import SurveyBanner from './SurveyBanner';
+
+export default SurveyBanner;
diff --git a/src/html.js b/src/html.js
index 0452c5981..482fa4372 100644
--- a/src/html.js
+++ b/src/html.js
@@ -51,7 +51,8 @@ export default class HTML extends React.Component<Props> {
                     so it needs to stay compatible with older browsers.
                   */
 
-                  var activeBanner = null;
+                  var activeSurveyBanner = null;
+                  var socialBanner = null;
                   var snoozeStartDate = null;
                   var today = new Date();
 
@@ -61,20 +62,20 @@ export default class HTML extends React.Component<Props> {
                     return time;
                   }
 
-                  activeBanner = {
-                    storageId: 'reactjs_banner_2020survey',
+                  activeSurveyBanner = {
+                    storageId: 'reactjs_banner_2021survey',
                     normalHeight: 50,
                     smallHeight: 75,
-                    campaignStartDate: '2020-10-05T00:00:00Z', // the Z is for UTC
-                    campaignEndDate: '2020-10-19T00:00:00Z', // the Z is for UTC
+                    campaignStartDate: '2021-08-16T00:00:00Z', // the Z is for UTC
+                    campaignEndDate: '2021-08-31T00:00:00Z', // the Z is for UTC
                     snoozeForDays: 7,
                   };
 
-                  if (activeBanner) {
+                  if (activeSurveyBanner) {
                     try {
-                      if (localStorage[activeBanner.storageId]) {
+                      if (localStorage[activeSurveyBanner.storageId]) {
                         snoozeStartDate = new Date(
-                          parseInt(localStorage.getItem(activeBanner.storageId), 10),
+                          parseInt(localStorage.getItem(activeSurveyBanner.storageId), 10),
                         );
                       }
                     } catch (err) {
@@ -84,44 +85,61 @@ export default class HTML extends React.Component<Props> {
                     try {
                       // If it's too early or long past the campaign, don't show the banner:
                       if (
-                        today < new Date(activeBanner.campaignStartDate) ||
-                        today > new Date(activeBanner.campaignEndDate)
+                        today < new Date(activeSurveyBanner.campaignStartDate) ||
+                        today > new Date(activeSurveyBanner.campaignEndDate)
                       ) {
-                        activeBanner = null;
+                        activeSurveyBanner = null;
                         // If we're in the campaign window, but the snooze has been set and it hasn't expired:
                       } else if (
                         snoozeStartDate &&
-                        addTimes(snoozeStartDate, activeBanner.snoozeForDays) >= today
+                        addTimes(snoozeStartDate, activeSurveyBanner.snoozeForDays) >= today
                       ) {
-                        activeBanner = null;
+                        activeSurveyBanner = null;
                       }
                     } catch (err) {
                       // Ignore.
                     }
                   }
 
+                  activeSocialBanner = {
+                    normalHeight: 50,
+                    smallHeight: 75
+                  };
+
                   function updateStyles() {
-                    if (activeBanner) {
-                      document.documentElement.style.setProperty('--banner-display', 'block');
-                      document.documentElement.style.setProperty('--banner-height-normal', activeBanner.normalHeight + 'px');
-                      document.documentElement.style.setProperty('--banner-height-small', activeBanner.smallHeight + 'px');
+                    document.documentElement.style.setProperty('--header-height-large', '60px');
+                    document.documentElement.style.setProperty('--header-height-normal', '50px');
+                    document.documentElement.style.setProperty('--header-height-small', '40px');
+                    if (activeSurveyBanner) {
+                      document.documentElement.style.setProperty('--survey-banner-display', 'block');
+                      document.documentElement.style.setProperty('--survey-banner-height-normal', activeSurveyBanner.normalHeight + 'px');
+                      document.documentElement.style.setProperty('--survey-banner-height-small', activeSurveyBanner.smallHeight + 'px');
+                    } else {
+                      document.documentElement.style.setProperty('--survey-banner-display', 'none');
+                      document.documentElement.style.setProperty('--survey-banner-height-normal', '0px');
+                      document.documentElement.style.setProperty('--survey-banner-height-small', '0px');
+                    }
+                    if (activeSocialBanner) {
+                      document.documentElement.style.setProperty('--social-banner-display', 'block');
+                      document.documentElement.style.setProperty('--social-banner-height-normal', activeSocialBanner.normalHeight + 'px');
+                      document.documentElement.style.setProperty('--social-banner-height-small', activeSocialBanner.smallHeight + 'px');
                     } else {
-                      document.documentElement.style.setProperty('--banner-display', 'none');
-                      document.documentElement.style.setProperty('--banner-height-normal', '0px');
-                      document.documentElement.style.setProperty('--banner-height-small', '0px');
+                      document.documentElement.style.setProperty('--social-banner-display', 'none');
+                      document.documentElement.style.setProperty('--social-banner-height-normal', '0px');
+                      document.documentElement.style.setProperty('--social-banner-height-small', '0px');
                     }
                   }
 
                   updateStyles();
-                  window.__dismissBanner = function() {
-                    if (activeBanner) {
+                  window.__dismissSurveyBanner = function() {
+                    if (activeSurveyBanner) {
                       try {
-                        localStorage.setItem(activeBanner.storageId, Date.now().toString());
+                        localStorage.setItem(activeSurveyBanner.storageId, Date.now().toString());
                       } catch (err) {
                         // Ignore.
                       }
                       // Don't show for next navigations within the session.
-                      activeBanner = null;
+                      activeSurveyBanner = null;
                       updateStyles();
                     }
                   };
diff --git a/src/pages/index.js b/src/pages/index.js
index acf7ae0b5..a638a38a2 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -56,11 +56,6 @@ class Home extends Component {
         <div
           css={{
             width: '100%',
-            marginTop: 'var(--banner-height-normal)',
-
-            [media.lessThan('small')]: {
-              marginTop: 'var(--banner-height-small)',
-            },
           }}>
           <header
             css={{
diff --git a/src/pages/versions.js b/src/pages/versions.js
index 3c85c02fa..9df25fb89 100644
--- a/src/pages/versions.js
+++ b/src/pages/versions.js
@@ -40,8 +40,15 @@ const Versions = ({location}: Props) => (
                 on GitHub
               </a>
               .<br />
-              Documentation for recent releases can also be found below.
+              Changelogs for recent releases can also be found below.
             </p>
+            <blockquote>
+              <p>Note</p>
+              <p>
+                The current docs are for React 18. For React 17, see{' '}
+                <a href="https://17.reactjs.org">https://17.reactjs.org.</a>
+              </p>
+            </blockquote>
             <p>
               See our FAQ for information about{' '}
               <a href="/docs/faq-versioning.html">
diff --git a/src/site-constants.js b/src/site-constants.js
index e9f79d431..2ee603580 100644
--- a/src/site-constants.js
+++ b/src/site-constants.js
@@ -8,7 +8,7 @@
 // NOTE: We can't just use `location.toString()` because when we are rendering
 // the SSR part in node.js we won't have a proper location.
 const urlRoot = 'https://reactjs.org';
-const version = '17.0.2';
+const version = '18.2.0';
 const babelURL = 'https://unpkg.com/babel-standalone@6.26.0/babel.min.js';
 
 export {babelURL, urlRoot, version};
diff --git a/src/theme.js b/src/theme.js
index 5e3c30417..65071aae6 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -18,7 +18,7 @@ const colors = {
   brand: '#61dafb', // electric blue
   brandLight: '#bbeffd',
   text: '#1a1a1a', // very dark grey / black substitute
-  subtle: '#6d6d6d', // light grey for text
+  subtle: '#6B6B6B', // light grey for text
   subtleOnDark: '#999',
   divider: '#ececec', // very light grey
   note: '#ffe564', // yellow
diff --git a/static/_redirects b/static/_redirects
deleted file mode 100644
index 992353033..000000000
--- a/static/_redirects
+++ /dev/null
@@ -1,43 +0,0 @@
-# Ensure English site redirects to Apex. While not used directly by us, may be linked elsewhere.
-http://en.reactjs.org/* https://reactjs.org/:splat 301!
-https://en.reactjs.org/* https://reactjs.org/:splat 301!
-
-/tips/controlled-input-null-value.html  /docs/forms.html#controlled-input-null-value
-/concurrent           /docs/concurrent-mode-intro.html
-/hooks                /docs/hooks-intro.html
-/server-components    /blog/2020/12/21/data-fetching-with-react-server-components.html
-/tutorial             /tutorial/tutorial.html
-/your-story           https://www.surveymonkey.co.uk/r/MVQV2R9    301
-/stories              https://medium.com/react-community-stories  301
-/html-jsx.html        https://magic.reactjs.net/htmltojsx.htm     301
-
-/link/attribute-behavior            /blog/2017/09/08/dom-attributes-in-react-16.html#changes-in-detail
-/link/controlled-components         /docs/forms.html#controlled-components
-/link/crossorigin-error             /docs/cross-origin-errors.html
-/link/dangerously-set-inner-html    /docs/dom-elements.html#dangerouslysetinnerhtml
-/link/derived-state                 /blog/2018/06/07/you-probably-dont-need-derived-state.html
-/link/error-boundaries              /docs/error-boundaries.html
-/link/event-pooling                 /docs/legacy-event-pooling.html
-/link/hooks-data-fetching           /docs/hooks-faq.html#how-can-i-do-data-fetching-with-hooks
-/link/invalid-aria-props            /warnings/invalid-aria-prop.html
-/link/invalid-hook-call             /warnings/invalid-hook-call-warning.html
-/link/legacy-context                /docs/legacy-context.html
-/link/legacy-factories              /warnings/legacy-factories.html
-/link/mock-scheduler                /docs/testing-environments.html#mocking-a-rendering-surface
-/link/perf-use-production-build     /docs/optimizing-performance.html#use-the-production-build
-/link/react-devtools                /blog/2015/09/02/new-react-developer-tools.html#installation
-/link/react-polyfills                /docs/javascript-environment-requirements.html
-/link/refs-must-have-owner          /warnings/refs-must-have-owner.html
-/link/rules-of-hooks                /docs/hooks-rules.html
-/link/special-props                 /warnings/special-props.html
-/link/strict-mode-find-node          /docs/strict-mode.html#warning-about-deprecated-finddomnode-usage
-/link/strict-mode-string-ref        /docs/refs-and-the-dom.html#legacy-api-string-refs
-/link/unsafe-component-lifecycles   /blog/2018/03/27/update-on-async-rendering.html
-/link/warning-keys                  /docs/lists-and-keys.html#keys
-/link/wrap-tests-with-act           /docs/test-utils.html#act
-/link/interaction-tracing           https://gist.github.com/bvaughn/8de925562903afd2e7a12554adcdda16  301
-/link/profiling                      https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977  301
-/link/test-utils-mock-component     https://gist.github.com/bvaughn/fbf41b3f895bf2d297935faa5525eee9  301
-/link/uselayouteffect-ssr           https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85  301
-/link/react-devtools-faq            https://github.com/facebook/react/tree/master/packages/react-devtools#faq 301
-/link/setstate-in-render            https://github.com/facebook/react/issues/18178#issuecomment-595846312 301
diff --git a/static/html/single-file-example.html b/static/html/single-file-example.html
index 569b9de4d..a89a8d4d8 100644
--- a/static/html/single-file-example.html
+++ b/static/html/single-file-example.html
@@ -3,8 +3,8 @@
   <head>
     <meta charset="UTF-8" />
     <title>Hello World</title>
-    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
-    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
 
     <!-- Don't use this in production: -->
     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
@@ -12,11 +12,14 @@
   <body>
     <div id="root"></div>
     <script type="text/babel">
+    
+      function MyApp() {
+        return <h1>Hello, world!</h1>;
+      }
 
-      ReactDOM.render(
-        <h1>Hello, world!</h1>,
-        document.getElementById('root')
-      );
+      const container = document.getElementById('root');
+      const root = ReactDOM.createRoot(container);
+      root.render(<MyApp />);
 
     </script>
     <!--
diff --git a/vercel.json b/vercel.json
index a3f4f7cb7..064ec2639 100644
--- a/vercel.json
+++ b/vercel.json
@@ -1,44 +1,278 @@
 {
-  "github": { "silent": true },
+  "github": {
+    "silent": true
+  },
   "trailingSlash": false,
   "redirects": [
-    { "source": "/tips/controlled-input-null-value.html", "destination": "/docs/forms.html#controlled-input-null-value", "permanent": false },
-    { "source": "/concurrent", "destination": "/docs/concurrent-mode-intro.html", "permanent": false },
-    { "source": "/hooks", "destination": "/docs/hooks-intro.html", "permanent": false },
-    { "source": "/tutorial", "destination": "/tutorial/tutorial.html", "permanent": false },
-    { "source": "/your-story", "destination": "https://www.surveymonkey.co.uk/r/MVQV2R9", "permanent": false },
-    { "source": "/stories", "destination": "https://medium.com/react-community-stories", "permanent": false },
-    { "source": "/html-jsx.html", "destination": "https://magic.reactjs.net/htmltojsx.htm", "destination": "", "permanent": false },
-    { "source": "/link/attribute-behavior", "destination": "/blog/2017/09/08/dom-attributes-in-react-16.html#changes-in-detail", "permanent": false },
-    { "source": "/link/controlled-components", "destination": "/docs/forms.html#controlled-components", "permanent": false },
-    { "source": "/link/crossorigin-error", "destination": "/docs/cross-origin-errors.html", "permanent": false },
-    { "source": "/link/dangerously-set-inner-html", "destination": "/docs/dom-elements.html#dangerouslysetinnerhtml", "permanent": false },
-    { "source": "/link/derived-state", "destination": "/blog/2018/06/07/you-probably-dont-need-derived-state.html", "permanent": false },
-    { "source": "/link/error-boundaries", "destination": "/docs/error-boundaries.html", "permanent": false },
-    { "source": "/link/event-pooling", "destination": "/docs/legacy-event-pooling.html", "permanent": false },
-    { "source": "/link/hooks-data-fetching", "destination": "/docs/hooks-faq.html#how-can-i-do-data-fetching-with-hooks", "permanent": false },
-    { "source": "/link/invalid-aria-props", "destination": "/warnings/invalid-aria-prop.html", "permanent": false },
-    { "source": "/link/invalid-hook-call", "destination": "/warnings/invalid-hook-call-warning.html", "permanent": false },
-    { "source": "/link/legacy-context", "destination": "/docs/legacy-context.html", "permanent": false },
-    { "source": "/link/legacy-factories", "destination": "/warnings/legacy-factories.html", "permanent": false },
-    { "source": "/link/mock-scheduler", "destination": "/docs/testing-environments.html#mocking-a-rendering-surface", "destination": "", "permanent": false },
-    { "source": "/link/perf-use-production-build", "destination": "/docs/optimizing-performance.html#use-the-production-build", "permanent": false },
-    { "source": "/link/react-devtools", "destination": "/blog/2015/09/02/new-react-developer-tools.html#installation", "permanent": false },
-    { "source": "/link/react-polyfills", "destination": "/docs/javascript-environment-requirements.html", "permanent": false },
-    { "source": "/link/refs-must-have-owner", "destination": "/warnings/refs-must-have-owner.html", "permanent": false },
-    { "source": "/link/rules-of-hooks", "destination": "/docs/hooks-rules.html", "permanent": false },
-    { "source": "/link/special-props", "destination": "/warnings/special-props.html", "permanent": false },
-    { "source": "/link/strict-mode-find-node", "destination": "/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage", "permanent": false },
-    { "source": "/link/strict-mode-string-ref", "destination": "/docs/refs-and-the-dom.html#legacy-api-string-refs", "permanent": false },
-    { "source": "/link/unsafe-component-lifecycles", "destination": "/blog/2018/03/27/update-on-async-rendering.html", "permanent": false },
-    { "source": "/link/warning-keys", "destination": "/docs/lists-and-keys.html#keys", "permanent": false },
-    { "source": "/link/wrap-tests-with-act", "destination": "/docs/test-utils.html#act", "permanent": false },
-    { "source": "/link/interaction-tracing", "destination": "https://gist.github.com/bvaughn/8de925562903afd2e7a12554adcdda16", "permanent": false },
-    { "source": "/link/profiling", "destination": "https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977", "permanent": false },
-    { "source": "/link/test-utils-mock-component", "destination": "https://gist.github.com/bvaughn/fbf41b3f895bf2d297935faa5525eee9", "permanent": false },
-    { "source": "/link/uselayouteffect-ssr", "destination": "https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85", "permanent": false },
-    { "source": "/link/react-devtools-faq", "destination": "https://github.com/facebook/react/tree/master/packages/react-devtools#faq", "permanent": false },
-    { "source": "/link/setstate-in-render", "destination": "https://github.com/facebook/react/issues/18178#issuecomment-595846312", "permanent": false },
-    { "source": "/version/15.6", "destination": "https://react-legacy.netlify.app", "permanent": false }
+    {
+      "source": "/tips/controlled-input-null-value.html",
+      "destination": "/docs/forms.html#controlled-input-null-value",
+      "permanent": false
+    },
+    {
+      "source": "/link/switch-to-createroot",
+      "destination": "https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis",
+      "permanent": false
+    },
+    {
+      "source": "/server-components",
+      "destination": "/blog/2020/12/21/data-fetching-with-react-server-components.html",
+      "permanent": false
+    },
+    {
+      "source": "/concurrent",
+      "destination": "/docs/concurrent-mode-intro.html",
+      "permanent": false
+    },
+    {
+      "source": "/hooks",
+      "destination": "/docs/hooks-intro.html",
+      "permanent": false
+    },
+    {
+      "source": "/tutorial",
+      "destination": "/tutorial/tutorial.html",
+      "permanent": false
+    },
+    {
+      "source": "/your-story",
+      "destination": "https://www.surveymonkey.co.uk/r/MVQV2R9",
+      "permanent": false
+    },
+    {
+      "source": "/stories",
+      "destination": "https://medium.com/react-community-stories",
+      "permanent": false
+    },
+    {
+      "source": "/html-jsx.html",
+      "destination": "",
+      "permanent": false
+    },
+    {
+      "source": "/link/attribute-behavior",
+      "destination": "/blog/2017/09/08/dom-attributes-in-react-16.html#changes-in-detail",
+      "permanent": false
+    },
+    {
+      "source": "/link/controlled-components",
+      "destination": "/docs/forms.html#controlled-components",
+      "permanent": false
+    },
+    {
+      "source": "/link/crossorigin-error",
+      "destination": "/docs/cross-origin-errors.html",
+      "permanent": false
+    },
+    {
+      "source": "/link/dangerously-set-inner-html",
+      "destination": "/docs/dom-elements.html#dangerouslysetinnerhtml",
+      "permanent": false
+    },
+    {
+      "source": "/link/derived-state",
+      "destination": "/blog/2018/06/07/you-probably-dont-need-derived-state.html",
+      "permanent": false
+    },
+    {
+      "source": "/link/error-boundaries",
+      "destination": "/docs/error-boundaries.html",
+      "permanent": false
+    },
+    {
+      "source": "/link/event-pooling",
+      "destination": "/docs/legacy-event-pooling.html",
+      "permanent": false
+    },
+    {
+      "source": "/link/hooks-data-fetching",
+      "destination": "/docs/hooks-faq.html#how-can-i-do-data-fetching-with-hooks",
+      "permanent": false
+    },
+    {
+      "source": "/link/invalid-aria-props",
+      "destination": "/warnings/invalid-aria-prop.html",
+      "permanent": false
+    },
+    {
+      "source": "/link/invalid-hook-call",
+      "destination": "/warnings/invalid-hook-call-warning.html",
+      "permanent": false
+    },
+    {
+      "source": "/link/legacy-context",
+      "destination": "/docs/legacy-context.html",
+      "permanent": false
+    },
+    {
+      "source": "/link/legacy-factories",
+      "destination": "/warnings/legacy-factories.html",
+      "permanent": false
+    },
+    {
+      "source": "/link/mock-scheduler",
+      "destination": "",
+      "permanent": false
+    },
+    {
+      "source": "/link/perf-use-production-build",
+      "destination": "/docs/optimizing-performance.html#use-the-production-build",
+      "permanent": false
+    },
+    {
+      "source": "/link/react-devtools",
+      "destination": "/blog/2015/09/02/new-react-developer-tools.html#installation",
+      "permanent": false
+    },
+    {
+      "source": "/link/react-polyfills",
+      "destination": "/docs/javascript-environment-requirements.html",
+      "permanent": false
+    },
+    {
+      "source": "/link/refs-must-have-owner",
+      "destination": "/warnings/refs-must-have-owner.html",
+      "permanent": false
+    },
+    {
+      "source": "/link/rules-of-hooks",
+      "destination": "/docs/hooks-rules.html",
+      "permanent": false
+    },
+    {
+      "source": "/link/special-props",
+      "destination": "/warnings/special-props.html",
+      "permanent": false
+    },
+    {
+      "source": "/link/strict-mode-find-node",
+      "destination": "/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage",
+      "permanent": false
+    },
+    {
+      "source": "/link/strict-mode-string-ref",
+      "destination": "/docs/refs-and-the-dom.html#legacy-api-string-refs",
+      "permanent": false
+    },
+    {
+      "source": "/link/unsafe-component-lifecycles",
+      "destination": "/blog/2018/03/27/update-on-async-rendering.html",
+      "permanent": false
+    },
+    {
+      "source": "/link/warning-keys",
+      "destination": "/docs/lists-and-keys.html#keys",
+      "permanent": false
+    },
+    {
+      "source": "/link/wrap-tests-with-act",
+      "destination": "/docs/test-utils.html#act",
+      "permanent": false
+    },
+    {
+      "source": "/link/interaction-tracing",
+      "destination": "https://gist.github.com/bvaughn/8de925562903afd2e7a12554adcdda16",
+      "permanent": false
+    },
+    {
+      "source": "/link/profiling",
+      "destination": "https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977",
+      "permanent": false
+    },
+    {
+      "source": "/link/test-utils-mock-component",
+      "destination": "https://gist.github.com/bvaughn/fbf41b3f895bf2d297935faa5525eee9",
+      "permanent": false
+    },
+    {
+      "source": "/link/uselayouteffect-ssr",
+      "destination": "https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85",
+      "permanent": false
+    },
+    {
+      "source": "/link/react-devtools-faq",
+      "destination": "https://github.com/facebook/react/tree/main/packages/react-devtools#faq",
+      "permanent": false
+    },
+    {
+      "source": "/link/setstate-in-render",
+      "destination": "https://github.com/facebook/react/issues/18178#issuecomment-595846312",
+      "permanent": false
+    },
+    {
+      "source": "/version/15.6",
+      "destination": "https://react-legacy.netlify.app",
+      "permanent": false
+    },
+    {
+      "source": "/version/16.8",
+      "destination": "https://5d4b5feba32acd0008d0df98--reactjs.netlify.com/",
+      "permanent": false
+    },
+    {
+      "source": "/version/16.7",
+      "destination": "https://5c54aa429e16c80007af3cd2--reactjs.netlify.com/",
+      "permanent": false
+    },
+    {
+      "source": "/version/16.6",
+      "destination": "https://5c11762d4be4d10008916ab1--reactjs.netlify.com/",
+      "permanent": false
+    },
+    {
+      "source": "/version/16.5",
+      "destination": "https://5bcf5863c6aed64970d6de5b--reactjs.netlify.com/",
+      "permanent": false
+    },
+    {
+      "source": "/version/16.4",
+      "destination": "https://5b90c17ac9659241e7f4c938--reactjs.netlify.com",
+      "permanent": false
+    },
+    {
+      "source": "/version/16.3",
+      "destination": "https://5b05c94e0733d530fd1fafe0--reactjs.netlify.com",
+      "permanent": false
+    },
+    {
+      "source": "/version/16.2",
+      "destination": "https://5abc31d8be40f1556f06c4be--reactjs.netlify.com",
+      "permanent": false
+    },
+    {
+      "source": "/version/16.1",
+      "destination": "https://5a1dbcf14c4b93299e65b9a9--reactjs.netlify.com",
+      "permanent": false
+    },
+    {
+      "source": "/version/16.0",
+      "destination": "https://5a046bf5a6188f4b8fa4938a--reactjs.netlify.com",
+      "permanent": false
+    },
+    {
+      "source": "/docs/concurrent-mode-adoption.html",
+      "destination": "https://17.reactjs.org/docs/concurrent-mode-adoption.html",
+      "permanent": true
+    },
+    {
+      "source": "/docs/concurrent-mode-intro.html",
+      "destination": "https://17.reactjs.org/docs/concurrent-mode-intro.html",
+      "permanent": true
+    },
+    {
+      "source": "/docs/concurrent-mode-patterns.html",
+      "destination": "https://17.reactjs.org/docs/concurrent-mode-patterns.html",
+      "permanent": true
+    },
+    {
+      "source": "/docs/concurrent-mode-reference.html",
+      "destination": "https://17.reactjs.org/docs/concurrent-mode-reference.html",
+      "permanent": true
+    },
+    {
+      "source": "/docs/concurrent-mode-suspense.html",
+      "destination": "https://17.reactjs.org/docs/concurrent-mode-suspense.html",
+      "permanent": true
+    }
   ]
 }
diff --git a/yarn.lock b/yarn.lock
index 47b33bb97..c0b5ad996 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3874,11 +3874,6 @@ chownr@^1.1.1:
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
   integrity sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==
 
-chownr@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/chownr/-/chownr-2.0.0.tgz#15bfbe53d2eab4cf70f18a8cd68ebe5b3cb1dece"
-  integrity sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==
-
 chrome-trace-event@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.2.tgz#234090ee97c7d4ad1a2c4beae27505deffc608a4"
@@ -3971,15 +3966,6 @@ cli-width@^3.0.0:
   resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-3.0.0.tgz#a2f48437a2caa9a22436e794bf071ec9e61cedf6"
   integrity sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==
 
-clipboard@^2.0.0:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.6.tgz#52921296eec0fdf77ead1749421b21c968647376"
-  integrity sha512-g5zbiixBRk/wyKakSwCKd7vQXDjFnAMGHoEyBogG/bw9kTD9GvdAvaoRR1ALcEzt3pVKxZR0pViekPMIS0QyGg==
-  dependencies:
-    good-listener "^1.2.2"
-    select "^1.1.2"
-    tiny-emitter "^2.0.0"
-
 clipboardy@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/clipboardy/-/clipboardy-2.3.0.tgz#3c2903650c68e46a91b388985bc2774287dba290"
@@ -4078,7 +4064,15 @@ color-string@^1.5.2:
     color-name "^1.0.0"
     simple-swizzle "^0.2.2"
 
-color@^3.0.0, color@^3.1.2:
+color-string@^1.9.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.9.0.tgz#63b6ebd1bec11999d1df3a79a7569451ac2be8aa"
+  integrity sha512-9Mrz2AQLefkH1UvASKj6v6hj/7eWgjnT/cVsR8CumieLoT+g900exWeNogqtweI8dxloXN9BDQTYro1oWu/5CQ==
+  dependencies:
+    color-name "^1.0.0"
+    simple-swizzle "^0.2.2"
+
+color@^3.0.0:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/color/-/color-3.1.2.tgz#68148e7f85d41ad7649c5fa8c8106f098d229e10"
   integrity sha512-vXTJhHebByxZn3lDvDJYw4lR5+uB3vuoHsuYA5AKuxRVn5wzzIfQKGLBmgdVRHKTJYeK5rvJcHnrd0Li49CFpg==
@@ -4086,6 +4080,14 @@ color@^3.0.0, color@^3.1.2:
     color-convert "^1.9.1"
     color-string "^1.5.2"
 
+color@^4.2.1:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/color/-/color-4.2.3.tgz#d781ecb5e57224ee43ea9627560107c0e0c6463a"
+  integrity sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==
+  dependencies:
+    color-convert "^2.0.1"
+    color-string "^1.9.0"
+
 colorette@^1.2.1, colorette@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.2.tgz#cbcc79d5e99caea2dbf10eb3a26fd8b3e6acfa94"
@@ -4802,13 +4804,6 @@ decompress-response@^3.2.0, decompress-response@^3.3.0:
   dependencies:
     mimic-response "^1.0.0"
 
-decompress-response@^4.2.0:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/decompress-response/-/decompress-response-4.2.1.tgz#414023cc7a302da25ce2ec82d0d5238ccafd8986"
-  integrity sha512-jOSne2qbyE+/r8G1VU+G/82LBs2Fs4LAsTiLSHOCOMZQl2OKZ6i8i4IyHemTe+/yIXOtTcRQMzPcgyhoFlqPkw==
-  dependencies:
-    mimic-response "^2.0.0"
-
 decompress-response@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/decompress-response/-/decompress-response-5.0.0.tgz#7849396e80e3d1eba8cb2f75ef4930f76461cb0f"
@@ -4987,11 +4982,6 @@ delayed-stream@~1.0.0:
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
   integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=
 
-delegate@^3.1.2:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166"
-  integrity sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==
-
 delegates@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
@@ -5027,10 +5017,10 @@ detect-indent@^6.0.0:
   resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-6.0.0.tgz#0abd0f549f69fc6659a254fe96786186b6f528fd"
   integrity sha512-oSyFlqaTHCItVRGK5RmrmjB+CmaMOW7IaNA/kdxqhoa6d17j/5ce9O9eWXmV/KEdRwqpQA+Vqe8a8Bsybu4YnA==
 
-detect-libc@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
-  integrity sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=
+detect-libc@^2.0.0, detect-libc@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-2.0.1.tgz#e1897aa88fa6ad197862937fbc0441ef352ee0cd"
+  integrity sha512-463v3ZeIrcWtdgIg6vI6XUncguvr2TnGl4SzDXinkt9mSLpBJKXT3mW6xT3VQdDN11+WVs29pgvivTc4Lp8v+w==
 
 detect-newline@^1.0.3:
   version "1.0.3"
@@ -5121,9 +5111,9 @@ dns-equal@^1.0.0:
   integrity sha1-s55/HabrCnW6nBcySzR1PEfgZU0=
 
 dns-packet@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/dns-packet/-/dns-packet-1.3.1.tgz#12aa426981075be500b910eedcd0b47dd7deda5a"
-  integrity sha512-0UxfQkMhYAUaZI+xrNZOz/as5KgDU0M/fQ9b6SpkyLbk3GEswDi6PADJVaYJradtRVsRIlF1zLyOodbcTCDzUg==
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/dns-packet/-/dns-packet-1.3.4.tgz#e3455065824a2507ba886c55a89963bb107dec6f"
+  integrity sha512-BQ6F4vycLXBvdrJZ6S3gZewt6rcrks9KBgM9vrhW+knGRqc8uEdT7fuCwloc7nny5xNoMJ17HGH0R/6fpo8ECA==
   dependencies:
     ip "^1.1.0"
     safe-buffer "^5.0.1"
@@ -6673,13 +6663,6 @@ fs-extra@^9.0.1:
     jsonfile "^6.0.1"
     universalify "^1.0.0"
 
-fs-minipass@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-2.1.0.tgz#7f5036fdbf12c63c169190cbe4199c852271f9fb"
-  integrity sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==
-  dependencies:
-    minipass "^3.0.0"
-
 fs-write-stream-atomic@^1.0.8:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz#b47df53493ef911df75731e70a9ded0189db40c9"
@@ -7646,13 +7629,6 @@ globby@^6.1.0:
     pify "^2.0.0"
     pinkie-promise "^2.0.0"
 
-good-listener@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
-  integrity sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=
-  dependencies:
-    delegate "^3.1.2"
-
 got@8.3.2, got@^8.3.1:
   version "8.3.2"
   resolved "https://registry.yarnpkg.com/got/-/got-8.3.2.tgz#1d23f64390e97f776cac52e5b936e5f514d2e937"
@@ -9907,6 +9883,11 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
+lru-cache@^7.4.0:
+  version "7.7.3"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-7.7.3.tgz#98cd19eef89ce6a4a3c4502c17c833888677c252"
+  integrity sha512-WY9wjJNQt9+PZilnLbuFKM+SwDull9+6IAguOrarOMoOHTcJ9GnXSO11+Gw6c7xtDkBkthR57OZMtZKYr+1CEw==
+
 lz-string@^1.4.4:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.4.4.tgz#c0d8eaf36059f705796e1e344811cf4c498d3a26"
@@ -10349,21 +10330,6 @@ minimist@^1.1.0, minimist@^1.1.3, minimist@^1.2.0, minimist@^1.2.3, minimist@^1.
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
   integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
 
-minipass@^3.0.0:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/minipass/-/minipass-3.1.3.tgz#7d42ff1f39635482e15f9cdb53184deebd5815fd"
-  integrity sha512-Mgd2GdMVzY+x3IJ+oHnVM+KG3lA5c8tnabyJKmHSaG2kAGpudxuOf8ToDkhumF7UzME7DecbQE9uOZhNm7PuJg==
-  dependencies:
-    yallist "^4.0.0"
-
-minizlib@^2.1.1:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-2.1.2.tgz#e90d3466ba209b932451508a11ce3d3632145931"
-  integrity sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==
-  dependencies:
-    minipass "^3.0.0"
-    yallist "^4.0.0"
-
 mississippi@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/mississippi/-/mississippi-3.0.0.tgz#ea0a3291f97e0b5e8776b363d5f0a12d94c67022"
@@ -10393,7 +10359,7 @@ mixin-deep@^1.2.0:
     for-in "^1.0.2"
     is-extendable "^1.0.1"
 
-mkdirp-classic@^0.5.2:
+mkdirp-classic@^0.5.2, mkdirp-classic@^0.5.3:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz#fa10c9115cc6d8865be221ba47ee9bed78601113"
   integrity sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==
@@ -10405,7 +10371,7 @@ mkdirp@^0.5, mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@^0.5.5, mkdirp@~0.5.1:
   dependencies:
     minimist "^1.2.5"
 
-mkdirp@^1.0.3, mkdirp@^1.0.4:
+mkdirp@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
   integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
@@ -10556,17 +10522,17 @@ no-case@^3.0.3:
     lower-case "^2.0.1"
     tslib "^1.10.0"
 
-node-abi@^2.7.0:
-  version "2.19.1"
-  resolved "https://registry.yarnpkg.com/node-abi/-/node-abi-2.19.1.tgz#6aa32561d0a5e2fdb6810d8c25641b657a8cea85"
-  integrity sha512-HbtmIuByq44yhAzK7b9j/FelKlHYISKQn0mtvcBrU5QBkhoCMp5bu8Hv5AI34DcKfOAcJBcOEMwLlwO62FFu9A==
+node-abi@^3.3.0:
+  version "3.8.0"
+  resolved "https://registry.yarnpkg.com/node-abi/-/node-abi-3.8.0.tgz#679957dc8e7aa47b0a02589dbfde4f77b29ccb32"
+  integrity sha512-tzua9qWWi7iW4I42vUPKM+SfaF0vQSLAm4yO5J83mSwB7GeoWrDKC/K+8YCnYNwqP5duwazbw2X9l4m8SC2cUw==
   dependencies:
-    semver "^5.4.1"
+    semver "^7.3.5"
 
-node-addon-api@^3.0.0:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-3.0.2.tgz#04bc7b83fd845ba785bb6eae25bc857e1ef75681"
-  integrity sha512-+D4s2HCnxPd5PjjI0STKwncjXTUKKqm74MDMz9OPXavjsGmjkvwgLtA5yoxJUdmpj52+2u+RrXgPipahKczMKg==
+node-addon-api@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-4.3.0.tgz#52a1a0b475193e0928e98e0426a0d1254782b77f"
+  integrity sha512-73sE9+3UaLYYFmDsFZnqCInzPyh3MqIwZO9cw58yIqAZhONrrabrYyYe3TuIqtIiOuTXVhsGau8hcrhhwSsDIQ==
 
 node-emoji@^1.10.0:
   version "1.10.0"
@@ -10650,11 +10616,6 @@ noms@0.0.0:
     inherits "^2.0.1"
     readable-stream "~1.0.31"
 
-noop-logger@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/noop-logger/-/noop-logger-0.1.1.tgz#94a2b1633c4f1317553007d8966fd0e841b6a4c2"
-  integrity sha1-lKKxYzxPExdVMAfYlm/Q6EG2pMI=
-
 normalize-package-data@^2.3.2, normalize-package-data@^2.3.4:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
@@ -10763,7 +10724,7 @@ npm-run-path@^4.0.0:
   dependencies:
     path-key "^3.0.0"
 
-npmlog@^4.0.1, npmlog@^4.1.2:
+npmlog@^4.0.1:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
   integrity sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==
@@ -10851,9 +10812,9 @@ object-keys@^1.0.12, object-keys@^1.1.1:
   integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
 
 object-path@^0.11.2, object-path@^0.11.4:
-  version "0.11.5"
-  resolved "https://registry.yarnpkg.com/object-path/-/object-path-0.11.5.tgz#d4e3cf19601a5140a55a16ad712019a9c50b577a"
-  integrity sha512-jgSbThcoR/s+XumvGMTMf81QVBmah+/Q7K7YduKeKVWL7N111unR2d6pZZarSk6kY/caeNxUDyxOvMWyzoU2eg==
+  version "0.11.8"
+  resolved "https://registry.yarnpkg.com/object-path/-/object-path-0.11.8.tgz#ed002c02bbdd0070b78a27455e8ae01fc14d4742"
+  integrity sha512-YJjNZrlXJFM42wTBn6zgOJVar9KFJvzx6sTWDte8sWZF//cnjl0BxHNpfZx+ZffXX63A9q0b1zsFiBX4g4X5KA==
 
 object-visit@^1.0.0:
   version "1.0.1"
@@ -11503,9 +11464,9 @@ path-key@^3.0.0, path-key@^3.1.0:
   integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
 
 path-parse@^1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
-  integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
+  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
 
 path-to-regexp@0.1.7:
   version "0.1.7"
@@ -12041,26 +12002,24 @@ potrace@^2.1.8:
   dependencies:
     jimp "^0.14.0"
 
-prebuild-install@^5.3.4:
-  version "5.3.5"
-  resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-5.3.5.tgz#e7e71e425298785ea9d22d4f958dbaccf8bb0e1b"
-  integrity sha512-YmMO7dph9CYKi5IR/BzjOJlRzpxGGVo1EsLSUZ0mt/Mq0HWZIHOKHHcHdT69yG54C9m6i45GpItwRHpk0Py7Uw==
+prebuild-install@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-7.0.1.tgz#c10075727c318efe72412f333e0ef625beaf3870"
+  integrity sha512-QBSab31WqkyxpnMWQxubYAHR5S9B2+r81ucocew34Fkl98FhvKIF50jIJnNOBmAZfyNV7vE5T6gd3hTVWgY6tg==
   dependencies:
-    detect-libc "^1.0.3"
+    detect-libc "^2.0.0"
     expand-template "^2.0.3"
     github-from-package "0.0.0"
     minimist "^1.2.3"
-    mkdirp "^0.5.1"
+    mkdirp-classic "^0.5.3"
     napi-build-utils "^1.0.1"
-    node-abi "^2.7.0"
-    noop-logger "^0.1.1"
+    node-abi "^3.3.0"
     npmlog "^4.0.1"
     pump "^3.0.0"
     rc "^1.2.7"
-    simple-get "^3.0.3"
+    simple-get "^4.0.0"
     tar-fs "^2.0.0"
     tunnel-agent "^0.6.0"
-    which-pm-runs "^1.0.0"
 
 prelude-ls@~1.1.2:
   version "1.1.2"
@@ -12110,12 +12069,10 @@ pretty-format@^25.5.0:
     ansi-styles "^4.0.0"
     react-is "^16.12.0"
 
-prismjs@^1.15.0, prismjs@^1.6.0:
-  version "1.21.0"
-  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.21.0.tgz#36c086ec36b45319ec4218ee164c110f9fc015a3"
-  integrity sha512-uGdSIu1nk3kej2iZsLyDoJ7e9bnPzIgY0naW/HdknGj61zScaprVEVGHrPoXqI+M9sP0NDnTK2jpkvmldpuqDw==
-  optionalDependencies:
-    clipboard "^2.0.0"
+prismjs@^1.27.0, prismjs@^1.6.0:
+  version "1.27.0"
+  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.27.0.tgz#bb6ee3138a0b438a3653dd4d6ce0cc6510a45057"
+  integrity sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==
 
 probe-image-size@^5.0.0:
   version "5.0.0"
@@ -13488,11 +13445,6 @@ select-hose@^2.0.0:
   resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
   integrity sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo=
 
-select@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
-  integrity sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=
-
 selfsigned@^1.10.7:
   version "1.10.8"
   resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.8.tgz#0d17208b7d12c33f8eac85c41835f27fc3d81a30"
@@ -13539,6 +13491,13 @@ semver@^7.3.2:
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.2.tgz#604962b052b81ed0786aae84389ffba70ffd3938"
   integrity sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==
 
+semver@^7.3.5:
+  version "7.3.6"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.6.tgz#5d73886fb9c0c6602e79440b97165c29581cbb2b"
+  integrity sha512-HZWqcgwLsjaX1HBD31msI/rXktuIhS+lWvdE4kN9z+8IVT4Itc7vqU2WvYsyD6/sjYCt4dEKH/m1M3dwI9CC5w==
+  dependencies:
+    lru-cache "^7.4.0"
+
 send@0.17.1:
   version "0.17.1"
   resolved "https://registry.yarnpkg.com/send/-/send-0.17.1.tgz#c1d8b059f7900f7466dd4938bdc44e11ddb376c8"
@@ -13641,19 +13600,18 @@ shallowequal@^1.0.1, shallowequal@^1.1.0:
   resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
   integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
 
-sharp@^0.25.4:
-  version "0.25.4"
-  resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.25.4.tgz#1a8e542144a07ab7e9316ab89de80182b827c363"
-  integrity sha512-umSzJJ1oBwIOfwFFt/fJ7JgCva9FvrEU2cbbm7u/3hSDZhXvkME8WE5qpaJqLIe2Har5msF5UG4CzYlEg5o3BQ==
-  dependencies:
-    color "^3.1.2"
-    detect-libc "^1.0.3"
-    node-addon-api "^3.0.0"
-    npmlog "^4.1.2"
-    prebuild-install "^5.3.4"
-    semver "^7.3.2"
-    simple-get "^4.0.0"
-    tar "^6.0.2"
+sharp@^0.25.4, sharp@^0.30.3:
+  version "0.30.3"
+  resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.30.3.tgz#315a1817423a4d1cde5119a21c99c234a7a6fb37"
+  integrity sha512-rjpfJFK58ZOFSG8sxYSo3/JQb4ej095HjXp9X7gVu7gEn1aqSG8TCW29h/Rr31+PXrFADo1H/vKfw0uhMQWFtg==
+  dependencies:
+    color "^4.2.1"
+    detect-libc "^2.0.1"
+    node-addon-api "^4.3.0"
+    prebuild-install "^7.0.1"
+    semver "^7.3.5"
+    simple-get "^4.0.1"
+    tar-fs "^2.1.1"
     tunnel-agent "^0.6.0"
 
 shebang-command@^1.2.0:
@@ -13713,15 +13671,6 @@ simple-concat@^1.0.0:
   resolved "https://registry.yarnpkg.com/simple-concat/-/simple-concat-1.0.1.tgz#f46976082ba35c2263f1c8ab5edfe26c41c9552f"
   integrity sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==
 
-simple-get@^3.0.3:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/simple-get/-/simple-get-3.1.0.tgz#b45be062435e50d159540b576202ceec40b9c6b3"
-  integrity sha512-bCR6cP+aTdScaQCnQKbPKtJOKDp/hj9EDLJo3Nw4y1QksqaovlW/bnptB6/c1e+qmNIDHRK+oXFDdEqBT8WzUA==
-  dependencies:
-    decompress-response "^4.2.0"
-    once "^1.3.1"
-    simple-concat "^1.0.0"
-
 simple-get@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/simple-get/-/simple-get-4.0.0.tgz#73fa628278d21de83dadd5512d2cc1f4872bd675"
@@ -13731,6 +13680,15 @@ simple-get@^4.0.0:
     once "^1.3.1"
     simple-concat "^1.0.0"
 
+simple-get@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/simple-get/-/simple-get-4.0.1.tgz#4a39db549287c979d352112fa03fd99fd6bc3543"
+  integrity sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==
+  dependencies:
+    decompress-response "^6.0.0"
+    once "^1.3.1"
+    simple-concat "^1.0.0"
+
 simple-swizzle@^0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
@@ -14584,6 +14542,16 @@ tar-fs@^2.0.0:
     pump "^3.0.0"
     tar-stream "^2.0.0"
 
+tar-fs@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/tar-fs/-/tar-fs-2.1.1.tgz#489a15ab85f1f0befabb370b7de4f9eb5cbe8784"
+  integrity sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==
+  dependencies:
+    chownr "^1.1.1"
+    mkdirp-classic "^0.5.2"
+    pump "^3.0.0"
+    tar-stream "^2.1.4"
+
 tar-stream@^1.5.2:
   version "1.6.2"
   resolved "https://registry.yarnpkg.com/tar-stream/-/tar-stream-1.6.2.tgz#8ea55dab37972253d9a9af90fdcd559ae435c555"
@@ -14608,17 +14576,16 @@ tar-stream@^2.0.0:
     inherits "^2.0.3"
     readable-stream "^3.1.1"
 
-tar@^6.0.2:
-  version "6.0.5"
-  resolved "https://registry.yarnpkg.com/tar/-/tar-6.0.5.tgz#bde815086e10b39f1dcd298e89d596e1535e200f"
-  integrity sha512-0b4HOimQHj9nXNEAA7zWwMM91Zhhba3pspja6sQbgTpynOJf+bkjBnfybNYzbpLbnwXnbyB4LOREvlyXLkCHSg==
-  dependencies:
-    chownr "^2.0.0"
-    fs-minipass "^2.0.0"
-    minipass "^3.0.0"
-    minizlib "^2.1.1"
-    mkdirp "^1.0.3"
-    yallist "^4.0.0"
+tar-stream@^2.1.4:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/tar-stream/-/tar-stream-2.2.0.tgz#acad84c284136b060dc3faa64474aa9aebd77287"
+  integrity sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==
+  dependencies:
+    bl "^4.0.3"
+    end-of-stream "^1.4.1"
+    fs-constants "^1.0.0"
+    inherits "^2.0.3"
+    readable-stream "^3.1.1"
 
 temp-dir@^1.0.0:
   version "1.0.0"
@@ -14723,11 +14690,6 @@ timsort@^0.3.0:
   resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
-tiny-emitter@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
-  integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
-
 tiny-warning@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
@@ -15347,9 +15309,9 @@ uri-js@^4.2.2:
     punycode "^2.1.0"
 
 urijs@^1.19.2:
-  version "1.19.2"
-  resolved "https://registry.yarnpkg.com/urijs/-/urijs-1.19.2.tgz#f9be09f00c4c5134b7cb3cf475c1dd394526265a"
-  integrity sha512-s/UIq9ap4JPZ7H1EB5ULo/aOUbWqfDi7FKzMC2Nz+0Si8GiT1rIEaprt8hy3Vy2Ex2aJPpOQv4P4DuOZ+K1c6w==
+  version "1.19.10"
+  resolved "https://registry.yarnpkg.com/urijs/-/urijs-1.19.10.tgz#8e2fe70a8192845c180f75074884278f1eea26cb"
+  integrity sha512-EzauQlgKuJgsXOqoMrCiePBf4At5jVqRhXykF3Wfb8ZsOBMxPcfiVBcsHXug4Aepb/ICm2PIgqAUGMelgdrWEg==
 
 urix@^0.1.0:
   version "0.1.0"
@@ -15380,9 +15342,9 @@ url-parse-lax@^3.0.0:
     prepend-http "^2.0.0"
 
 url-parse@^1.1.8, url-parse@^1.4.3:
-  version "1.4.7"
-  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.4.7.tgz#a8a83535e8c00a316e403a5db4ac1b9b853ae278"
-  integrity sha512-d3uaVyzDB9tQoSXFvuSUNFibTd9zxd2bkVrDRvF5TmvWWQwqE4lgYJ5m+x1DbecWkw+LK4RNl2CU1hHuOKPVlg==
+  version "1.5.10"
+  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.10.tgz#9d3c2f736c1d75dd3bd2be507dcc111f1e2ea9c1"
+  integrity sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==
   dependencies:
     querystringify "^2.1.1"
     requires-port "^1.0.0"
@@ -15807,11 +15769,6 @@ which-module@^2.0.0:
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
   integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=
 
-which-pm-runs@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/which-pm-runs/-/which-pm-runs-1.0.0.tgz#670b3afbc552e0b55df6b7780ca74615f23ad1cb"
-  integrity sha1-Zws6+8VS4LVd9rd4DKdGFfI60cs=
-
 which@^1.2.14, which@^1.2.9:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
@@ -15921,9 +15878,9 @@ write@^0.2.1:
     mkdirp "^0.5.1"
 
 ws@^5.2.0:
-  version "5.2.2"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-5.2.2.tgz#dffef14866b8e8dc9133582514d1befaf96e980f"
-  integrity sha512-jaHFD6PFv6UgoIVda6qZllptQsMlDEJkTQcybzzXDYM1XO9Y8em691FGMPmM46WGyLU4z9KMgQN+qrux/nhlHA==
+  version "5.2.3"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-5.2.3.tgz#05541053414921bc29c63bee14b8b0dd50b07b3d"
+  integrity sha512-jZArVERrMsKUatIdnLzqvcfydI85dvd/Fp1u/VOpfdDWQ4c9qWXe+VIeAbQ5FrDwciAkr+lzofXLz3Kuf26AOA==
   dependencies:
     async-limiter "~1.0.0"
 
@@ -15934,10 +15891,10 @@ ws@^6.2.1:
   dependencies:
     async-limiter "~1.0.0"
 
-ws@^7.3.0:
-  version "7.3.1"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-7.3.1.tgz#d0547bf67f7ce4f12a72dfe31262c68d7dc551c8"
-  integrity sha512-D3RuNkynyHmEJIpD2qrgVkc9DQ23OrN/moAwZX4L8DfvszsJxpjQuUq3LMx6HoYji9fbIOBY18XWBsAux1ZZUA==
+ws@^7.3.0, ws@~7.4.2:
+  version "7.4.2"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-7.4.2.tgz#782100048e54eb36fe9843363ab1c68672b261dd"
+  integrity sha512-T4tewALS3+qsrpGI/8dqNMLIVdq/g/85U98HPMa6F0m6xTbvhXU6RCQLqPH3+SlomNV/LdY6RXEbBpMH6EOJnA==
 
 ws@~6.1.0:
   version "6.1.4"
@@ -15946,11 +15903,6 @@ ws@~6.1.0:
   dependencies:
     async-limiter "~1.0.0"
 
-ws@~7.4.2:
-  version "7.4.2"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-7.4.2.tgz#782100048e54eb36fe9843363ab1c68672b261dd"
-  integrity sha512-T4tewALS3+qsrpGI/8dqNMLIVdq/g/85U98HPMa6F0m6xTbvhXU6RCQLqPH3+SlomNV/LdY6RXEbBpMH6EOJnA==
-
 x-is-string@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/x-is-string/-/x-is-string-0.1.0.tgz#474b50865af3a49a9c4657f05acd145458f77d82"