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] +/beta/.* /content/.* /node_modules/.* /public/.* diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index e34dda4af..150dc2ff0 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/main/CONTRIBUTING.md +https://github.com/reactjs/legacy.reactjs.org/blob/main/CONTRIBUTING.md If your PR references an existing issue, please add the issue number below 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 19f7230bf..b59dd107a 100644 --- a/.gitignore +++ b/.gitignore @@ -3,5 +3,5 @@ .idea .history 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 e88229b01..dbd42002b 100644 --- a/README.md +++ b/README.md @@ -1,70 +1,20 @@ -# vi.reactjs.org +# vi.legacy.reactjs.org -This repo contains the source code and documentation powering [vi.reactjs.org](https://reactjs.org/). +This repo contains the source code and documentation powering [vi.legacy.reactjs.org](https://vi.legacy.reactjs.org/). -## Getting started +## Not actively maintained -### Prerequisites +This site is archived and not maintained. For new React docs, go to [vi.react.dev](https://vi.react.dev) ([repository](https://github.com/reactjs/vi.react.dev)). -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 [vi.reactjs.org repo](https://github.com/reactjs/vi.reactjs.org) on your local machine +## Installation -### Installation - -1. `cd vi.reactjs.org` to go into the project root +1. `cd legacy.reactjs.org` to go into the project root 1. `yarn` to install the website's npm dependencies -### Running locally +## Running locally -1. `yarn dev` to start the hot-reloading development server (powered by [Gatsby](https://www.gatsbyjs.org)) +1. `yarn dev` to start the development server (powered by [Gatsby](https://www.gatsbyjs.org)) 1. `open http://localhost:8000` 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 `vi.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. -1. Run `yarn check-all` from the project root. (This will run Prettier, ESLint, and Flow.) - -### 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 [vi.reactjs.org repo](https://github.com/reactjs/vi.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. - -## 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/main/LICENSE-DOCS.md) file. +Content at [vi.legacy.reactjs.org](https://vi.legacy.reactjs.org/) is CC-BY-4.0 licensed, as found in the [LICENSE-DOCS.md](LICENSE-DOCS.md) file. diff --git a/content/authors.yml b/content/authors.yml index af35c620a..39864f894 100644 --- a/content/authors.yml +++ b/content/authors.yml @@ -31,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 @@ -46,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 @@ -54,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 @@ -73,9 +91,15 @@ 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 diff --git a/content/blog/2013-06-02-jsfiddle-integration.md b/content/blog/2013-06-02-jsfiddle-integration.md index 2b9d9053b..c7de6fffc 100644 --- a/content/blog/2013-06-02-jsfiddle-integration.md +++ b/content/blog/2013-06-02-jsfiddle-integration.md @@ -3,6 +3,12 @@ title: Tích hợp JSFiddle author: [vjeux] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ [JSFiddle](https://jsfiddle.net) vừa mới thông báo hỗ trợ cho React. Đây là một tin thú vị vì nó giúp cho việc cộng tác với các đoạn code trở nên dễ dàng hơn rất nhiều. Bạn có thể làm việc với **[nền tảng React JSFiddle](http://jsfiddle.net/vjeux/kb3gN/)**, sửa đổi và chia sẻ nó! Một [fiddle không cần JSX](http://jsfiddle.net/vjeux/VkebS/) cũng đã có. diff --git a/content/blog/2013-06-05-why-react.md b/content/blog/2013-06-05-why-react.md index 88e4116e5..30cb94bdf 100644 --- a/content/blog/2013-06-05-why-react.md +++ b/content/blog/2013-06-05-why-react.md @@ -3,6 +3,12 @@ title: Tại sao chúng tôi xây dựng React? author: [petehunt] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ Có rất nhiều thư viện JavaScript MVC. Tại sao chúng tôi xây dựng React và tại sao bạn muốn sử dụng nó? ## React không phải là một MVC framework. {#react-isnt-an-mvc-framework} diff --git a/content/blog/2013-06-12-community-roundup.md b/content/blog/2013-06-12-community-roundup.md index ff7103e8b..1ba8ced1c 100644 --- a/content/blog/2013-06-12-community-roundup.md +++ b/content/blog/2013-06-12-community-roundup.md @@ -3,6 +3,12 @@ title: "Community Round-up #1" author: [vjeux] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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} diff --git a/content/blog/2013-06-19-community-roundup-2.md b/content/blog/2013-06-19-community-roundup-2.md index 1612134b0..932930e4d 100644 --- a/content/blog/2013-06-19-community-roundup-2.md +++ b/content/blog/2013-06-19-community-roundup-2.md @@ -3,6 +3,12 @@ title: "Community Round-up #2" author: [vjeux] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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} diff --git a/content/blog/2013-06-21-react-v0-3-3.md b/content/blog/2013-06-21-react-v0-3-3.md index 9ca92d4ff..c390a6029 100644 --- a/content/blog/2013-06-21-react-v0-3-3.md +++ b/content/blog/2013-06-21-react-v0-3-3.md @@ -3,6 +3,12 @@ title: "React v0.3.3" author: [zpao] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ Chúng tôi có rất nhiều thứ tuyệt vời sắp ra mắt trong phiên bản v0.4, nhưng trong thời gian chờ đợi, chúng tôi sẽ phát hành phiên bản v0.3.3. Bản phát hành này giải quyết một số vấn đề nhỏ mà mọi người đang gặp phải và đơn giản hóa các công cụ của chúng tôi để giúp chúng dễ sử dụng hơn. diff --git a/content/blog/2013-06-27-community-roundup-3.md b/content/blog/2013-06-27-community-roundup-3.md index 371da7ed6..8f39abff8 100644 --- a/content/blog/2013-06-27-community-roundup-3.md +++ b/content/blog/2013-06-27-community-roundup-3.md @@ -3,6 +3,12 @@ title: "Community Round-up #3" author: [vjeux] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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} diff --git a/content/blog/2013-07-02-react-v0-4-autobind-by-default.md b/content/blog/2013-07-02-react-v0-4-autobind-by-default.md index 9c98fd9b2..74826321f 100644 --- a/content/blog/2013-07-02-react-v0-4-autobind-by-default.md +++ b/content/blog/2013-07-02-react-v0-4-autobind-by-default.md @@ -3,6 +3,12 @@ title: "New in React v0.4: Autobind by Default" author: [zpao] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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. diff --git a/content/blog/2013-07-03-community-roundup-4.md b/content/blog/2013-07-03-community-roundup-4.md index 957df86a1..a75f71839 100644 --- a/content/blog/2013-07-03-community-roundup-4.md +++ b/content/blog/2013-07-03-community-roundup-4.md @@ -3,6 +3,12 @@ title: "Community Round-up #4" author: [vjeux] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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} diff --git a/content/blog/2013-07-11-react-v0-4-prop-validation-and-default-values.md b/content/blog/2013-07-11-react-v0-4-prop-validation-and-default-values.md index 8a5cc18c5..d77f54694 100644 --- a/content/blog/2013-07-11-react-v0-4-prop-validation-and-default-values.md +++ b/content/blog/2013-07-11-react-v0-4-prop-validation-and-default-values.md @@ -3,6 +3,12 @@ title: "New in React v0.4: Prop Validation and Default Values" author: [zpao] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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. diff --git a/content/blog/2013-07-17-react-v0-4-0.md b/content/blog/2013-07-17-react-v0-4-0.md index 2a50e8b1e..3c6eefee9 100644 --- a/content/blog/2013-07-17-react-v0-4-0.md +++ b/content/blog/2013-07-17-react-v0-4-0.md @@ -3,6 +3,12 @@ title: "React v0.4.0" author: [zpao] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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! diff --git a/content/blog/2013-07-23-community-roundup-5.md b/content/blog/2013-07-23-community-roundup-5.md index 02e0d5355..79b7d379e 100644 --- a/content/blog/2013-07-23-community-roundup-5.md +++ b/content/blog/2013-07-23-community-roundup-5.md @@ -3,6 +3,12 @@ title: "Community Round-up #5" author: [vjeux] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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} diff --git a/content/blog/2013-07-26-react-v0-4-1.md b/content/blog/2013-07-26-react-v0-4-1.md index 0287ac12a..8735ac133 100644 --- a/content/blog/2013-07-26-react-v0-4-1.md +++ b/content/blog/2013-07-26-react-v0-4-1.md @@ -3,6 +3,12 @@ title: "React v0.4.1" author: [zpao] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ React v0.4.1 là một thay đổi nhỏ, hầu hết bao gồm các bản sửa lỗi về tính đúng đắn. Một số đoạn mã đã được cấu trúc lại bên trong nhưng những thay đổi đó không ảnh hưởng đến bất kỳ API công khai nào của chúng tôi. diff --git a/content/blog/2013-07-30-use-react-and-jsx-in-ruby-on-rails.md b/content/blog/2013-07-30-use-react-and-jsx-in-ruby-on-rails.md index 60529a4ce..3fe895938 100644 --- a/content/blog/2013-07-30-use-react-and-jsx-in-ruby-on-rails.md +++ b/content/blog/2013-07-30-use-react-and-jsx-in-ruby-on-rails.md @@ -3,6 +3,12 @@ title: "Use React and JSX in Ruby on Rails" author: [zpao] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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). diff --git a/content/blog/2013-08-05-community-roundup-6.md b/content/blog/2013-08-05-community-roundup-6.md index 3d0984b7a..dad568d07 100644 --- a/content/blog/2013-08-05-community-roundup-6.md +++ b/content/blog/2013-08-05-community-roundup-6.md @@ -3,6 +3,12 @@ title: "Community Round-up #6" author: [vjeux] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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} diff --git a/content/blog/2013-08-19-use-react-and-jsx-in-python-applications.md b/content/blog/2013-08-19-use-react-and-jsx-in-python-applications.md index 7fd32b3f2..832ccdfc2 100644 --- a/content/blog/2013-08-19-use-react-and-jsx-in-python-applications.md +++ b/content/blog/2013-08-19-use-react-and-jsx-in-python-applications.md @@ -3,6 +3,12 @@ title: "Use React and JSX in Python Applications" author: [kmeht] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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} diff --git a/content/blog/2013-08-26-community-roundup-7.md b/content/blog/2013-08-26-community-roundup-7.md index 17f895001..219946ed7 100644 --- a/content/blog/2013-08-26-community-roundup-7.md +++ b/content/blog/2013-08-26-community-roundup-7.md @@ -3,6 +3,12 @@ title: "Community Round-up #7" author: [vjeux] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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 diff --git a/content/blog/2013-09-24-community-roundup-8.md b/content/blog/2013-09-24-community-roundup-8.md index d94649e0f..1f3cc484c 100644 --- a/content/blog/2013-09-24-community-roundup-8.md +++ b/content/blog/2013-09-24-community-roundup-8.md @@ -3,6 +3,12 @@ title: "Community Round-up #8" author: [vjeux] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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! 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 81629c459..649081e81 100644 --- a/content/blog/2013-10-16-react-v0.5.0.md +++ b/content/blog/2013-10-16-react-v0.5.0.md @@ -3,6 +3,12 @@ title: "React v0.5" author: [zpao] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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/main/src/dom/DefaultDOMPropertyConfig.js#L156) where we deviate slightly in an attempt to be consistent internally. diff --git a/content/blog/2013-10-29-react-v0-5-1.md b/content/blog/2013-10-29-react-v0-5-1.md index ea1af3deb..571a358c7 100644 --- a/content/blog/2013-10-29-react-v0-5-1.md +++ b/content/blog/2013-10-29-react-v0-5-1.md @@ -3,6 +3,12 @@ title: "React v0.5.1" author: [zpao] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ Bản phát hành này tập trung vào việc sửa một số lỗi nhỏ đã được phát hiện trong hai tuần qua. Tôi muốn cảm ơn tất cả những người đã tham gia, đặc biệt là các thành viên của cộng đồng, họ đã khắc phục một nửa số vấn đề được tìm thấy. Cảm ơn tới [Sophie Alpert][1], [Andrey Popp][2], và [Laurence Rowe][3] vì những đóng góp của họ! ## Nhật ký thay đổi {#changelog} diff --git a/content/blog/2013-10-3-community-roundup-9.md b/content/blog/2013-10-3-community-roundup-9.md index 9eb3d2d1a..97675d76a 100644 --- a/content/blog/2013-10-3-community-roundup-9.md +++ b/content/blog/2013-10-3-community-roundup-9.md @@ -3,6 +3,12 @@ title: "Community Round-up #9" author: [vjeux] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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) diff --git a/content/blog/2013-11-06-community-roundup-10.md b/content/blog/2013-11-06-community-roundup-10.md index 8611174f0..6a2d5e1f2 100644 --- a/content/blog/2013-11-06-community-roundup-10.md +++ b/content/blog/2013-11-06-community-roundup-10.md @@ -3,6 +3,12 @@ title: "Community Round-up #10" author: [vjeux] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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. diff --git a/content/blog/2013-11-18-community-roundup-11.md b/content/blog/2013-11-18-community-roundup-11.md index 7fe40e47a..804bd6d0c 100644 --- a/content/blog/2013-11-18-community-roundup-11.md +++ b/content/blog/2013-11-18-community-roundup-11.md @@ -3,6 +3,12 @@ title: "Community Round-up #11" author: [vjeux] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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} diff --git a/content/blog/2013-12-18-react-v0.5.2-v0.4.2.md b/content/blog/2013-12-18-react-v0.5.2-v0.4.2.md index 52bad8a46..72cabc55a 100644 --- a/content/blog/2013-12-18-react-v0.5.2-v0.4.2.md +++ b/content/blog/2013-12-18-react-v0.5.2-v0.4.2.md @@ -3,6 +3,12 @@ title: "React v0.5.2, v0.4.2" author: [zpao] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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. diff --git a/content/blog/2013-12-19-react-v0.8.0.md b/content/blog/2013-12-19-react-v0.8.0.md index 71c384d0e..9d5a931fa 100644 --- a/content/blog/2013-12-19-react-v0.8.0.md +++ b/content/blog/2013-12-19-react-v0.8.0.md @@ -3,6 +3,12 @@ title: "React v0.8" author: [zpao] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ I'll start by answering the obvious question: > What happened to 0.6 and 0.7? diff --git a/content/blog/2013-12-23-community-roundup-12.md b/content/blog/2013-12-23-community-roundup-12.md index 994975227..3c633b579 100644 --- a/content/blog/2013-12-23-community-roundup-12.md +++ b/content/blog/2013-12-23-community-roundup-12.md @@ -3,6 +3,12 @@ title: "Community Round-up #12" author: [vjeux] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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} diff --git a/content/blog/2013-12-30-community-roundup-13.md b/content/blog/2013-12-30-community-roundup-13.md index fad6b1e01..9442a5c3a 100644 --- a/content/blog/2013-12-30-community-roundup-13.md +++ b/content/blog/2013-12-30-community-roundup-13.md @@ -3,6 +3,12 @@ title: "Community Round-up #13" author: [vjeux] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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! diff --git a/content/blog/2014-01-02-react-chrome-developer-tools.md b/content/blog/2014-01-02-react-chrome-developer-tools.md index da4ed069c..6f4001d25 100644 --- a/content/blog/2014-01-02-react-chrome-developer-tools.md +++ b/content/blog/2014-01-02-react-chrome-developer-tools.md @@ -3,6 +3,12 @@ title: "React Chrome Developer Tools" author: [sebmarkbage] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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).
diff --git a/content/blog/2014-01-06-community-roundup-14.md b/content/blog/2014-01-06-community-roundup-14.md index 75395546a..55cb5629a 100644 --- a/content/blog/2014-01-06-community-roundup-14.md +++ b/content/blog/2014-01-06-community-roundup-14.md @@ -3,6 +3,12 @@ title: "Community Round-up #14" author: [vjeux] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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} diff --git a/content/blog/2014-02-05-community-roundup-15.md b/content/blog/2014-02-05-community-roundup-15.md index 165746b71..0dedd8d76 100644 --- a/content/blog/2014-02-05-community-roundup-15.md +++ b/content/blog/2014-02-05-community-roundup-15.md @@ -3,6 +3,12 @@ title: "Community Round-up #15" author: [jgebhardt] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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. diff --git a/content/blog/2014-02-15-community-roundup-16.md b/content/blog/2014-02-15-community-roundup-16.md index 064cbb8cc..e97f167fb 100644 --- a/content/blog/2014-02-15-community-roundup-16.md +++ b/content/blog/2014-02-15-community-roundup-16.md @@ -3,6 +3,12 @@ title: "Community Round-up #16" author: [jgebhardt] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ There have been many posts recently covering the why and how 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. 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 d57699f2d..b7c9d983d 100644 --- a/content/blog/2014-02-16-react-v0.9-rc1.md +++ b/content/blog/2014-02-16-react-v0.9-rc1.md @@ -3,6 +3,12 @@ title: React v0.9 RC author: [sophiebits] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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: diff --git a/content/blog/2014-02-20-react-v0.9.md b/content/blog/2014-02-20-react-v0.9.md index 95bff4c78..0486276e3 100644 --- a/content/blog/2014-02-20-react-v0.9.md +++ b/content/blog/2014-02-20-react-v0.9.md @@ -3,6 +3,12 @@ title: React v0.9 author: [sophiebits] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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. diff --git a/content/blog/2014-02-24-community-roundup-17.md b/content/blog/2014-02-24-community-roundup-17.md index 41dd68a08..a0af05434 100644 --- a/content/blog/2014-02-24-community-roundup-17.md +++ b/content/blog/2014-02-24-community-roundup-17.md @@ -3,6 +3,12 @@ title: "Community Round-up #17" author: [jgebhardt] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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. diff --git a/content/blog/2014-03-14-community-roundup-18.md b/content/blog/2014-03-14-community-roundup-18.md index f803a1fee..a9e601587 100644 --- a/content/blog/2014-03-14-community-roundup-18.md +++ b/content/blog/2014-03-14-community-roundup-18.md @@ -3,6 +3,12 @@ title: "Community Round-up #18" author: [jgebhardt] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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} diff --git a/content/blog/2014-03-19-react-v0.10-rc1.md b/content/blog/2014-03-19-react-v0.10-rc1.md index cc065e087..3a0b55657 100644 --- a/content/blog/2014-03-19-react-v0.10-rc1.md +++ b/content/blog/2014-03-19-react-v0.10-rc1.md @@ -3,6 +3,12 @@ title: React v0.10 RC author: [zpao] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ [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: diff --git a/content/blog/2014-03-21-react-v0.10.md b/content/blog/2014-03-21-react-v0.10.md index 121c88a22..2b6f410eb 100644 --- a/content/blog/2014-03-21-react-v0.10.md +++ b/content/blog/2014-03-21-react-v0.10.md @@ -3,6 +3,12 @@ title: React v0.10 author: [zpao] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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: diff --git a/content/blog/2014-03-28-the-road-to-1.0.md b/content/blog/2014-03-28-the-road-to-1.0.md index 2e9f3ac0b..f1022d6c9 100644 --- a/content/blog/2014-03-28-the-road-to-1.0.md +++ b/content/blog/2014-03-28-the-road-to-1.0.md @@ -3,6 +3,12 @@ title: The Road to 1.0 author: [zpao] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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. diff --git a/content/blog/2014-04-04-reactnet.md b/content/blog/2014-04-04-reactnet.md index 1c9d921d1..59de67566 100644 --- a/content/blog/2014-04-04-reactnet.md +++ b/content/blog/2014-04-04-reactnet.md @@ -3,6 +3,12 @@ title: "Use React and JSX in ASP.NET MVC" author: [Daniel15] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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. diff --git a/content/blog/2014-05-06-flux.md b/content/blog/2014-05-06-flux.md index 99d07d728..34b298b2d 100644 --- a/content/blog/2014-05-06-flux.md +++ b/content/blog/2014-05-06-flux.md @@ -3,6 +3,12 @@ title: "Flux: An Application Architecture for React" author: [fisherwebdev, jingc] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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:
@@ -13,4 +19,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/main/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/main/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-05-29-one-year-of-open-source-react.md b/content/blog/2014-05-29-one-year-of-open-source-react.md index e1fcd9d7f..d128de58f 100644 --- a/content/blog/2014-05-29-one-year-of-open-source-react.md +++ b/content/blog/2014-05-29-one-year-of-open-source-react.md @@ -3,6 +3,12 @@ title: "One Year of Open-Source React" author: [chenglou] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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! diff --git a/content/blog/2014-06-27-community-roundup-19.md b/content/blog/2014-06-27-community-roundup-19.md index 2e6bfc01d..81342ddac 100644 --- a/content/blog/2014-06-27-community-roundup-19.md +++ b/content/blog/2014-06-27-community-roundup-19.md @@ -3,6 +3,12 @@ title: "Community Round-up #19" author: [chenglou] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ ## 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/). diff --git a/content/blog/2014-07-13-react-v0.11-rc1.md b/content/blog/2014-07-13-react-v0.11-rc1.md index 08b34c453..87027029c 100644 --- a/content/blog/2014-07-13-react-v0.11-rc1.md +++ b/content/blog/2014-07-13-react-v0.11-rc1.md @@ -3,6 +3,12 @@ title: React v0.11 RC author: [zpao] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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: diff --git a/content/blog/2014-07-17-react-v0.11.md b/content/blog/2014-07-17-react-v0.11.md index 6a0c6c3bc..a4b96fbac 100644 --- a/content/blog/2014-07-17-react-v0.11.md +++ b/content/blog/2014-07-17-react-v0.11.md @@ -3,6 +3,12 @@ title: React v0.11 author: [zpao] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ **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). - - - diff --git a/content/blog/2014-07-25-react-v0.11.1.md b/content/blog/2014-07-25-react-v0.11.1.md index a13780af9..6ccde4b8b 100644 --- a/content/blog/2014-07-25-react-v0.11.1.md +++ b/content/blog/2014-07-25-react-v0.11.1.md @@ -3,6 +3,12 @@ title: React v0.11.1 author: [zpao] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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. diff --git a/content/blog/2014-07-28-community-roundup-20.md b/content/blog/2014-07-28-community-roundup-20.md index 93b91c529..aa2fc1ad2 100644 --- a/content/blog/2014-07-28-community-roundup-20.md +++ b/content/blog/2014-07-28-community-roundup-20.md @@ -3,6 +3,12 @@ title: "Community Round-up #20" author: [LoukaN] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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} diff --git a/content/blog/2014-07-30-flux-actions-and-the-dispatcher.md b/content/blog/2014-07-30-flux-actions-and-the-dispatcher.md index 3e11f4bb6..b8b45dbe9 100644 --- a/content/blog/2014-07-30-flux-actions-and-the-dispatcher.md +++ b/content/blog/2014-07-30-flux-actions-and-the-dispatcher.md @@ -3,6 +3,12 @@ title: "Flux: Actions and the Dispatcher" author: [fisherwebdev] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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/main/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. @@ -11,12 +17,24 @@ Flux is more of a pattern than a full-blown framework, and you can start using i Where the Dispatcher Fits in the Flux Data Flow ----------------------------------------------- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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 -------------------------- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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. @@ -29,6 +47,12 @@ Letting the stores update themselves eliminates many entanglements typically fou Why We Need a Dispatcher ------------------------ +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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. @@ -41,6 +65,12 @@ Problems arise, however, if we have circular dependencies. That is, if Store A n Example Chat App ---------------- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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/main/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/content/blog/2014-08-03-community-roundup-21.md b/content/blog/2014-08-03-community-roundup-21.md index 33eaeffc8..bbaf8ba5b 100644 --- a/content/blog/2014-08-03-community-roundup-21.md +++ b/content/blog/2014-08-03-community-roundup-21.md @@ -3,6 +3,12 @@ title: "Community Round-up #21" author: [LoukaN] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ ## 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! diff --git a/content/blog/2014-09-03-introducing-the-jsx-specification.md b/content/blog/2014-09-03-introducing-the-jsx-specification.md index 76e08130d..9a51b52a7 100644 --- a/content/blog/2014-09-03-introducing-the-jsx-specification.md +++ b/content/blog/2014-09-03-introducing-the-jsx-specification.md @@ -3,6 +3,12 @@ title: "Introducing the JSX Specification" author: [sebmarkbage] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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. diff --git a/content/blog/2014-09-12-community-round-up-22.md b/content/blog/2014-09-12-community-round-up-22.md index 316706e30..164c991ec 100644 --- a/content/blog/2014-09-12-community-round-up-22.md +++ b/content/blog/2014-09-12-community-round-up-22.md @@ -4,6 +4,12 @@ layout: post author: [LoukaN] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ This has been an exciting summer as four big companies: Yahoo, Mozilla, Airbnb and Reddit announced that they were using React!
diff --git a/content/blog/2014-09-16-react-v0.11.2.md b/content/blog/2014-09-16-react-v0.11.2.md index c7e2cbc10..8ecf4653b 100644 --- a/content/blog/2014-09-16-react-v0.11.2.md +++ b/content/blog/2014-09-16-react-v0.11.2.md @@ -3,6 +3,12 @@ title: React v0.11.2 author: [zpao] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ Today we're releasing React v0.11.2 to add a few small features. We're adding support for two more DOM elements, `` and ``, 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. diff --git a/content/blog/2014-09-24-testing-flux-applications.md b/content/blog/2014-09-24-testing-flux-applications.md index 7ad8cf0ce..cf99cc609 100644 --- a/content/blog/2014-09-24-testing-flux-applications.md +++ b/content/blog/2014-09-24-testing-flux-applications.md @@ -3,6 +3,13 @@ title: "Testing Flux Applications" author: [fisherwebdev] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ + **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. diff --git a/content/blog/2014-10-14-introducing-react-elements.md b/content/blog/2014-10-14-introducing-react-elements.md index fb343cc53..d8ab6c867 100644 --- a/content/blog/2014-10-14-introducing-react-elements.md +++ b/content/blog/2014-10-14-introducing-react-elements.md @@ -5,6 +5,12 @@ redirect_from: - "blog/2014/10/14/introducting-react-elements.html" --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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. diff --git a/content/blog/2014-10-16-react-v0.12-rc1.md b/content/blog/2014-10-16-react-v0.12-rc1.md index 9a6202a00..a92aefb90 100644 --- a/content/blog/2014-10-16-react-v0.12-rc1.md +++ b/content/blog/2014-10-16-react-v0.12-rc1.md @@ -3,6 +3,12 @@ title: "React v0.12 RC" author: [sebmarkbage] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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. diff --git a/content/blog/2014-10-17-community-roundup-23.md b/content/blog/2014-10-17-community-roundup-23.md index 2088c9332..6bd0f4227 100644 --- a/content/blog/2014-10-17-community-roundup-23.md +++ b/content/blog/2014-10-17-community-roundup-23.md @@ -4,6 +4,12 @@ layout: post author: [LoukaN] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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} diff --git a/content/blog/2014-10-27-react-js-conf.md b/content/blog/2014-10-27-react-js-conf.md index cc9efe7fc..c4847ebf0 100644 --- a/content/blog/2014-10-27-react-js-conf.md +++ b/content/blog/2014-10-27-react-js-conf.md @@ -3,6 +3,12 @@ title: React.js Conf author: [vjeux] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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.** diff --git a/content/blog/2014-10-28-react-v0.12.md b/content/blog/2014-10-28-react-v0.12.md index eb49f83d6..22f02e1eb 100644 --- a/content/blog/2014-10-28-react-v0.12.md +++ b/content/blog/2014-10-28-react-v0.12.md @@ -3,6 +3,12 @@ title: React v0.12 author: [zpao] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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. @@ -66,7 +72,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/2014-11-24-react-js-conf-updates.md b/content/blog/2014-11-24-react-js-conf-updates.md index f7cecc043..5f78c419c 100644 --- a/content/blog/2014-11-24-react-js-conf-updates.md +++ b/content/blog/2014-11-24-react-js-conf-updates.md @@ -3,6 +3,12 @@ title: React.js Conf Updates author: [vjeux] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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! diff --git a/content/blog/2014-11-25-community-roundup-24.md b/content/blog/2014-11-25-community-roundup-24.md index 42dcd82a4..bcfc0b78a 100644 --- a/content/blog/2014-11-25-community-roundup-24.md +++ b/content/blog/2014-11-25-community-roundup-24.md @@ -4,6 +4,12 @@ layout: post author: [steveluscher] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ ## 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. diff --git a/content/blog/2014-12-18-react-v0.12.2.md b/content/blog/2014-12-18-react-v0.12.2.md index 75f78277f..bf4ef6023 100644 --- a/content/blog/2014-12-18-react-v0.12.2.md +++ b/content/blog/2014-12-18-react-v0.12.2.md @@ -3,6 +3,12 @@ title: React v0.12.2 author: [zpao] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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. diff --git a/content/blog/2014-12-19-react-js-conf-diversity-scholarship.md b/content/blog/2014-12-19-react-js-conf-diversity-scholarship.md index 6b6b85c13..07b08ca2c 100644 --- a/content/blog/2014-12-19-react-js-conf-diversity-scholarship.md +++ b/content/blog/2014-12-19-react-js-conf-diversity-scholarship.md @@ -3,6 +3,12 @@ title: React.js Conf Diversity Scholarship author: [zpao] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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: diff --git a/content/blog/2015-01-27-react-v0.13.0-beta-1.md b/content/blog/2015-01-27-react-v0.13.0-beta-1.md index d6cdd6c5c..2d088a51f 100644 --- a/content/blog/2015-01-27-react-v0.13.0-beta-1.md +++ b/content/blog/2015-01-27-react-v0.13.0-beta-1.md @@ -3,6 +3,12 @@ title: React v0.13.0 Beta 1 author: [sebmarkbage] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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. diff --git a/content/blog/2015-02-18-react-conf-roundup-2015.md b/content/blog/2015-02-18-react-conf-roundup-2015.md index 5adcf96b5..a527005ec 100644 --- a/content/blog/2015-02-18-react-conf-roundup-2015.md +++ b/content/blog/2015-02-18-react-conf-roundup-2015.md @@ -4,6 +4,12 @@ layout: post author: [steveluscher] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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} diff --git a/content/blog/2015-02-20-introducing-relay-and-graphql.md b/content/blog/2015-02-20-introducing-relay-and-graphql.md index 4bd8809ce..459df3471 100644 --- a/content/blog/2015-02-20-introducing-relay-and-graphql.md +++ b/content/blog/2015-02-20-introducing-relay-and-graphql.md @@ -4,6 +4,12 @@ layout: post author: [wincent] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ ## 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. 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..5ddc229ef 100644 --- a/content/blog/2015-02-24-react-v0.13-rc1.md +++ b/content/blog/2015-02-24-react-v0.13-rc1.md @@ -4,6 +4,12 @@ author: [zpao] date: 2015-02-24 14:00 --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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. @@ -69,7 +75,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-02-24-streamlining-react-elements.md b/content/blog/2015-02-24-streamlining-react-elements.md index a5bb93277..fb1e76e3f 100644 --- a/content/blog/2015-02-24-streamlining-react-elements.md +++ b/content/blog/2015-02-24-streamlining-react-elements.md @@ -4,6 +4,12 @@ author: [sebmarkbage] date: 2015-02-24 11:00 --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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! diff --git a/content/blog/2015-03-03-react-v0.13-rc2.md b/content/blog/2015-03-03-react-v0.13-rc2.md index 10ab150a4..fb0b3f1c5 100644 --- a/content/blog/2015-03-03-react-v0.13-rc2.md +++ b/content/blog/2015-03-03-react-v0.13-rc2.md @@ -3,6 +3,12 @@ title: "React v0.13 RC2" author: [sebmarkbage] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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). diff --git a/content/blog/2015-03-04-community-roundup-25.md b/content/blog/2015-03-04-community-roundup-25.md index c5a23249c..24e2907c6 100644 --- a/content/blog/2015-03-04-community-roundup-25.md +++ b/content/blog/2015-03-04-community-roundup-25.md @@ -4,6 +4,12 @@ layout: post author: [matthewjohnston4] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ ## 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. diff --git a/content/blog/2015-03-10-react-v0.13.md b/content/blog/2015-03-10-react-v0.13.md index 47a450d2e..f81a0c774 100644 --- a/content/blog/2015-03-10-react-v0.13.md +++ b/content/blog/2015-03-10-react-v0.13.md @@ -3,6 +3,12 @@ title: "React v0.13" author: [sophiebits] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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`. @@ -81,7 +87,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-03-16-react-v0.13.1.md b/content/blog/2015-03-16-react-v0.13.1.md index 89243418a..236760a96 100644 --- a/content/blog/2015-03-16-react-v0.13.1.md +++ b/content/blog/2015-03-16-react-v0.13.1.md @@ -3,6 +3,12 @@ title: "React v0.13.1" author: [zpao] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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! diff --git a/content/blog/2015-03-19-building-the-facebook-news-feed-with-relay.md b/content/blog/2015-03-19-building-the-facebook-news-feed-with-relay.md index ffc443ae0..621ce17d9 100644 --- a/content/blog/2015-03-19-building-the-facebook-news-feed-with-relay.md +++ b/content/blog/2015-03-19-building-the-facebook-news-feed-with-relay.md @@ -3,6 +3,12 @@ title: "Building The Facebook News Feed With Relay" author: [josephsavona] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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. diff --git a/content/blog/2015-03-26-introducing-react-native.md b/content/blog/2015-03-26-introducing-react-native.md index ea46742d0..44343ea50 100644 --- a/content/blog/2015-03-26-introducing-react-native.md +++ b/content/blog/2015-03-26-introducing-react-native.md @@ -3,6 +3,12 @@ title: "Introducing React Native" author: [sophiebits] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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/): diff --git a/content/blog/2015-03-30-community-roundup-26.md b/content/blog/2015-03-30-community-roundup-26.md index c4e23d8a4..ebaa2a5a4 100644 --- a/content/blog/2015-03-30-community-roundup-26.md +++ b/content/blog/2015-03-30-community-roundup-26.md @@ -4,6 +4,12 @@ layout: post author: [vjeux] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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! diff --git a/content/blog/2015-04-17-react-native-v0.4.md b/content/blog/2015-04-17-react-native-v0.4.md index 6b3a2a627..784a7a486 100644 --- a/content/blog/2015-04-17-react-native-v0.4.md +++ b/content/blog/2015-04-17-react-native-v0.4.md @@ -4,6 +4,12 @@ layout: post author: [vjeux] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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 diff --git a/content/blog/2015-04-18-react-v0.13.2.md b/content/blog/2015-04-18-react-v0.13.2.md index c188fc378..5e16fb11f 100644 --- a/content/blog/2015-04-18-react-v0.13.2.md +++ b/content/blog/2015-04-18-react-v0.13.2.md @@ -3,6 +3,12 @@ title: "React v0.13.2" author: [zpao] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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: diff --git a/content/blog/2015-05-01-graphql-introduction.md b/content/blog/2015-05-01-graphql-introduction.md index ab2a9e2ac..ef8ff5524 100644 --- a/content/blog/2015-05-01-graphql-introduction.md +++ b/content/blog/2015-05-01-graphql-introduction.md @@ -3,6 +3,12 @@ title: "GraphQL Introduction" author: [schrockn] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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. diff --git a/content/blog/2015-05-08-react-v0.13.3.md b/content/blog/2015-05-08-react-v0.13.3.md index 00c72fede..87efdc427 100644 --- a/content/blog/2015-05-08-react-v0.13.3.md +++ b/content/blog/2015-05-08-react-v0.13.3.md @@ -3,6 +3,12 @@ title: "React v0.13.3" author: [zpao] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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: diff --git a/content/blog/2015-05-22-react-native-release-process.md b/content/blog/2015-05-22-react-native-release-process.md index e2e853580..05946ff12 100644 --- a/content/blog/2015-05-22-react-native-release-process.md +++ b/content/blog/2015-05-22-react-native-release-process.md @@ -3,6 +3,12 @@ title: "React Native Release Process" author: [vjeux] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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. diff --git a/content/blog/2015-06-12-deprecating-jstransform-and-react-tools.md b/content/blog/2015-06-12-deprecating-jstransform-and-react-tools.md index 07b092fec..4324ed500 100644 --- a/content/blog/2015-06-12-deprecating-jstransform-and-react-tools.md +++ b/content/blog/2015-06-12-deprecating-jstransform-and-react-tools.md @@ -3,6 +3,12 @@ title: "Deprecating JSTransform and react-tools" author: [zpao] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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). diff --git a/content/blog/2015-07-03-react-v0.14-beta-1.md b/content/blog/2015-07-03-react-v0.14-beta-1.md index e4171f077..604e81ddd 100644 --- a/content/blog/2015-07-03-react-v0.14-beta-1.md +++ b/content/blog/2015-07-03-react-v0.14-beta-1.md @@ -3,6 +3,12 @@ title: React v0.14 Beta 1 author: [sophiebits] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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. diff --git a/content/blog/2015-08-03-new-react-devtools-beta.md b/content/blog/2015-08-03-new-react-devtools-beta.md index 97e60181f..d5be25798 100644 --- a/content/blog/2015-08-03-new-react-devtools-beta.md +++ b/content/blog/2015-08-03-new-react-devtools-beta.md @@ -3,6 +3,12 @@ title: "New React Devtools Beta" author: [jaredly] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ We've made an entirely new version of the devtools, and we want you to try it out! diff --git a/content/blog/2015-08-11-relay-technical-preview.md b/content/blog/2015-08-11-relay-technical-preview.md index 65b1ac5fb..e55b3bf54 100644 --- a/content/blog/2015-08-11-relay-technical-preview.md +++ b/content/blog/2015-08-11-relay-technical-preview.md @@ -3,6 +3,12 @@ title: "Relay Technical Preview" author: [josephsavona] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ # 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). diff --git a/content/blog/2015-08-13-reacteurope-roundup.md b/content/blog/2015-08-13-reacteurope-roundup.md index 22ff1bfa6..c9d0acb14 100644 --- a/content/blog/2015-08-13-reacteurope-roundup.md +++ b/content/blog/2015-08-13-reacteurope-roundup.md @@ -4,6 +4,12 @@ layout: post author: [matthewjohnston4] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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: diff --git a/content/blog/2015-09-02-new-react-developer-tools.md b/content/blog/2015-09-02-new-react-developer-tools.md index 53871b92f..c9e2ee0b0 100644 --- a/content/blog/2015-09-02-new-react-developer-tools.md +++ b/content/blog/2015-09-02-new-react-developer-tools.md @@ -4,6 +4,12 @@ layout: post author: [sophiebits] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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) 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 398b07758..c142c9e42 100644 --- a/content/blog/2015-09-10-react-v0.14-rc1.md +++ b/content/blog/2015-09-10-react-v0.14-rc1.md @@ -3,6 +3,12 @@ title: "React v0.14 Release Candidate" author: [sophiebits] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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). diff --git a/content/blog/2015-09-14-community-roundup-27.md b/content/blog/2015-09-14-community-roundup-27.md index 01e4b394a..2a6cfc650 100644 --- a/content/blog/2015-09-14-community-roundup-27.md +++ b/content/blog/2015-09-14-community-roundup-27.md @@ -4,6 +4,12 @@ layout: post author: [steveluscher] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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} diff --git a/content/blog/2015-10-01-react-render-and-top-level-api.md b/content/blog/2015-10-01-react-render-and-top-level-api.md index 10d8e94a5..62e4b77c5 100644 --- a/content/blog/2015-10-01-react-render-and-top-level-api.md +++ b/content/blog/2015-10-01-react-render-and-top-level-api.md @@ -3,6 +3,12 @@ title: "ReactDOM.render and the Top Level React API" author: ["jimfb", "sebmarkbage"] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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. diff --git a/content/blog/2015-10-07-react-v0.14.md b/content/blog/2015-10-07-react-v0.14.md index c0366829a..3c8b3569f 100644 --- a/content/blog/2015-10-07-react-v0.14.md +++ b/content/blog/2015-10-07-react-v0.14.md @@ -3,6 +3,12 @@ title: "React v0.14" author: [sophiebits] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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. diff --git a/content/blog/2015-10-19-reactiflux-is-moving-to-discord.md b/content/blog/2015-10-19-reactiflux-is-moving-to-discord.md index 522ac658f..96cc057f9 100644 --- a/content/blog/2015-10-19-reactiflux-is-moving-to-discord.md +++ b/content/blog/2015-10-19-reactiflux-is-moving-to-discord.md @@ -3,6 +3,12 @@ title: "Reactiflux is moving to Discord" author: [benigeri] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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} diff --git a/content/blog/2015-10-28-react-v0.14.1.md b/content/blog/2015-10-28-react-v0.14.1.md index cf7fc2713..75aaa8981 100644 --- a/content/blog/2015-10-28-react-v0.14.1.md +++ b/content/blog/2015-10-28-react-v0.14.1.md @@ -3,6 +3,12 @@ title: "React v0.14.1" author: [zpao] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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: diff --git a/content/blog/2015-11-02-react-v0.14.2.md b/content/blog/2015-11-02-react-v0.14.2.md index abc2df4af..3e5dd1721 100644 --- a/content/blog/2015-11-02-react-v0.14.2.md +++ b/content/blog/2015-11-02-react-v0.14.2.md @@ -3,6 +3,12 @@ title: "React v0.14.2" author: [zpao] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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: diff --git a/content/blog/2015-11-18-react-v0.14.3.md b/content/blog/2015-11-18-react-v0.14.3.md index 19efc7576..919a2ade7 100644 --- a/content/blog/2015-11-18-react-v0.14.3.md +++ b/content/blog/2015-11-18-react-v0.14.3.md @@ -3,6 +3,12 @@ title: "React v0.14.3" author: [zpao] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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: diff --git a/content/blog/2015-12-04-react-js-conf-2016-diversity-scholarship.md b/content/blog/2015-12-04-react-js-conf-2016-diversity-scholarship.md index 7f0da6aa0..2c3ac5cdb 100644 --- a/content/blog/2015-12-04-react-js-conf-2016-diversity-scholarship.md +++ b/content/blog/2015-12-04-react-js-conf-2016-diversity-scholarship.md @@ -3,6 +3,12 @@ title: React.js Conf 2016 Diversity Scholarship author: [zpao] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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. diff --git a/content/blog/2015-12-16-ismounted-antipattern.md b/content/blog/2015-12-16-ismounted-antipattern.md index 3fc654621..22e98fc19 100644 --- a/content/blog/2015-12-16-ismounted-antipattern.md +++ b/content/blog/2015-12-16-ismounted-antipattern.md @@ -3,6 +3,12 @@ title: "isMounted is an Antipattern" author: [jimfb] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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! diff --git a/content/blog/2015-12-18-react-components-elements-and-instances.md b/content/blog/2015-12-18-react-components-elements-and-instances.md index aea0411d0..d3ffa4ecf 100644 --- a/content/blog/2015-12-18-react-components-elements-and-instances.md +++ b/content/blog/2015-12-18-react-components-elements-and-instances.md @@ -3,6 +3,12 @@ title: "React Components, Elements, and Instances" author: [gaearon] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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} diff --git a/content/blog/2015-12-29-react-v0.14.4.md b/content/blog/2015-12-29-react-v0.14.4.md index 38161766a..a84afb683 100644 --- a/content/blog/2015-12-29-react-v0.14.4.md +++ b/content/blog/2015-12-29-react-v0.14.4.md @@ -3,6 +3,12 @@ title: "React v0.14.4" author: [sophiebits] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ Happy December! We have a minor point release today. It has just a few small bug fixes. The release is now available for download: diff --git a/content/blog/2016-01-08-A-implies-B-does-not-imply-B-implies-A.md b/content/blog/2016-01-08-A-implies-B-does-not-imply-B-implies-A.md index 5d91dc130..f9046ae61 100644 --- a/content/blog/2016-01-08-A-implies-B-does-not-imply-B-implies-A.md +++ b/content/blog/2016-01-08-A-implies-B-does-not-imply-B-implies-A.md @@ -3,6 +3,12 @@ title: "(A => B) !=> (B => A)" author: [jimfb] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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: diff --git a/content/blog/2016-01-12-discontinuing-ie8-support.md b/content/blog/2016-01-12-discontinuing-ie8-support.md index 35ba1b30d..7e6340a37 100644 --- a/content/blog/2016-01-12-discontinuing-ie8-support.md +++ b/content/blog/2016-01-12-discontinuing-ie8-support.md @@ -3,6 +3,12 @@ title: "Discontinuing IE 8 Support in React DOM" author: [sophiebits] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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.) diff --git a/content/blog/2016-02-19-new-versioning-scheme.md b/content/blog/2016-02-19-new-versioning-scheme.md index 375854eb0..abe336a01 100644 --- a/content/blog/2016-02-19-new-versioning-scheme.md +++ b/content/blog/2016-02-19-new-versioning-scheme.md @@ -3,6 +3,12 @@ title: "New Versioning Scheme" author: [sebmarkbage] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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. diff --git a/content/blog/2016-03-07-react-v15-rc1.md b/content/blog/2016-03-07-react-v15-rc1.md index 49066ef0c..97e5412e9 100644 --- a/content/blog/2016-03-07-react-v15-rc1.md +++ b/content/blog/2016-03-07-react-v15-rc1.md @@ -3,6 +3,12 @@ title: "React v15.0 Release Candidate" author: [zpao] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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 ████████████████████████████████████. 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. diff --git a/content/blog/2016-03-16-react-v15-rc2.md b/content/blog/2016-03-16-react-v15-rc2.md index c6711dca2..ac0ec005b 100644 --- a/content/blog/2016-03-16-react-v15-rc2.md +++ b/content/blog/2016-03-16-react-v15-rc2.md @@ -3,6 +3,12 @@ title: "React v15.0 Release Candidate 2" author: [zpao] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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 ``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). diff --git a/content/blog/2016-03-29-react-v0.14.8.md b/content/blog/2016-03-29-react-v0.14.8.md index 1e1cf6310..45382dd2e 100644 --- a/content/blog/2016-03-29-react-v0.14.8.md +++ b/content/blog/2016-03-29-react-v0.14.8.md @@ -3,6 +3,12 @@ title: "React v0.14.8" author: [gaearon] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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. diff --git a/content/blog/2016-04-07-react-v15.md b/content/blog/2016-04-07-react-v15.md index c847aa9d5..7b2006491 100644 --- a/content/blog/2016-04-07-react-v15.md +++ b/content/blog/2016-04-07-react-v15.md @@ -3,6 +3,12 @@ title: "React v15.0" author: [gaearon] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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. diff --git a/content/blog/2016-04-08-react-v15.0.1.md b/content/blog/2016-04-08-react-v15.0.1.md index 6db9cc422..c34025e2b 100644 --- a/content/blog/2016-04-08-react-v15.0.1.md +++ b/content/blog/2016-04-08-react-v15.0.1.md @@ -3,6 +3,12 @@ title: "React v15.0.1" author: [zpao] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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. 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 26b695e14..1c493c326 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 @@ -3,6 +3,12 @@ title: "Introducing React's Error Code System" author: [keyanzhang] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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: diff --git a/content/blog/2016-07-13-mixins-considered-harmful.md b/content/blog/2016-07-13-mixins-considered-harmful.md index b1108400f..e3946c8e6 100644 --- a/content/blog/2016-07-13-mixins-considered-harmful.md +++ b/content/blog/2016-07-13-mixins-considered-harmful.md @@ -3,6 +3,12 @@ title: "Mixins Considered Harmful" author: [gaearon] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ “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. diff --git a/content/blog/2016-07-22-create-apps-with-no-configuration.md b/content/blog/2016-07-22-create-apps-with-no-configuration.md index f7ae42730..f6b45474c 100644 --- a/content/blog/2016-07-22-create-apps-with-no-configuration.md +++ b/content/blog/2016-07-22-create-apps-with-no-configuration.md @@ -3,6 +3,12 @@ title: "Create Apps with No Configuration" author: [gaearon] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ **[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} diff --git a/content/blog/2016-08-05-relay-state-of-the-state.md b/content/blog/2016-08-05-relay-state-of-the-state.md index 7ed34e9c0..713452aa4 100644 --- a/content/blog/2016-08-05-relay-state-of-the-state.md +++ b/content/blog/2016-08-05-relay-state-of-the-state.md @@ -3,6 +3,12 @@ title: "Relay: State of the State" author: [josephsavona] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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} diff --git a/content/blog/2016-09-28-our-first-50000-stars.md b/content/blog/2016-09-28-our-first-50000-stars.md index de9f9c822..3b83b5df7 100644 --- a/content/blog/2016-09-28-our-first-50000-stars.md +++ b/content/blog/2016-09-28-our-first-50000-stars.md @@ -3,6 +3,12 @@ title: "Our First 50,000 Stars" author: [vjeux] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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} 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 9648dd497..c2324afe9 100644 --- a/content/blog/2016-11-16-react-v15.4.0.md +++ b/content/blog/2016-11-16-react-v15.4.0.md @@ -3,6 +3,12 @@ title: "React v15.4.0" author: [gaearon] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ Today we are releasing React 15.4.0. 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. @@ -94,6 +100,12 @@ You can learn more about snapshot testing in [this Jest blog post](https://faceb --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ ## 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. diff --git a/content/blog/2017-04-07-react-v15.5.0.md b/content/blog/2017-04-07-react-v15.5.0.md index b5741f9ab..527053ed6 100644 --- a/content/blog/2017-04-07-react-v15.5.0.md +++ b/content/blog/2017-04-07-react-v15.5.0.md @@ -3,6 +3,12 @@ title: "React v15.5.0" author: [acdlite] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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.html#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. @@ -147,6 +153,12 @@ import { createRenderer } from 'react-test-renderer/shallow'; --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ ## Acknowledgements {#acknowledgements} A special thank you to these folks for transferring ownership of npm package names: @@ -157,6 +169,12 @@ A special thank you to these folks for transferring ownership of npm package nam --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ ## 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. @@ -196,6 +214,12 @@ We've also published version `15.5.0` of the `react`, `react-dom`, and addons pa --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ ## Changelog {#changelog} ## 15.5.0 (April 7, 2017) {#1550-april-7-2017} 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 5fe30e07f..199ad5b48 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 @@ -3,6 +3,12 @@ title: "What's New in Create React App" author: [gaearon] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ Less than a year ago, we introduced [Create React App](/blog/2016/07/22/create-apps-with-no-configuration.html) 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. diff --git a/content/blog/2017-06-13-react-v15.6.0.md b/content/blog/2017-06-13-react-v15.6.0.md index 55aeccd51..e3f3d5f45 100644 --- a/content/blog/2017-06-13-react-v15.6.0.md +++ b/content/blog/2017-06-13-react-v15.6.0.md @@ -3,6 +3,12 @@ title: "React v15.6.0" author: [flarnie] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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} @@ -26,6 +32,12 @@ After the last release, we got valuable community feedback that deprecation warn --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ ## 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. @@ -65,6 +77,12 @@ We've also published version `15.6.0` of `react` and `react-dom` on npm, and the --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ ## Changelog {#changelog} ## 15.6.0 (June 13, 2017) {#1560-june-13-2017} diff --git a/content/blog/2017-07-26-error-handling-in-react-16.md b/content/blog/2017-07-26-error-handling-in-react-16.md index 455fd001a..35cfa692f 100644 --- a/content/blog/2017-07-26-error-handling-in-react-16.md +++ b/content/blog/2017-07-26-error-handling-in-react-16.md @@ -3,6 +3,12 @@ title: "Error Handling in React 16" author: [gaearon] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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)** 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 21a6e3032..ea0206143 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 @@ -3,6 +3,12 @@ title: "DOM Attributes in React 16" author: [gaearon] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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 diff --git a/content/blog/2017-09-25-react-v15.6.2.md b/content/blog/2017-09-25-react-v15.6.2.md index 71ddd7346..9093f8f0f 100644 --- a/content/blog/2017-09-25-react-v15.6.2.md +++ b/content/blog/2017-09-25-react-v15.6.2.md @@ -3,6 +3,12 @@ title: "React v15.6.2" author: [nhunzaker] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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. @@ -46,6 +52,12 @@ We've also published version `15.6.2` of `react` and `react-dom` on npm, and the --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ ## Changelog {#changelog} ## 15.6.2 (September 25, 2017) {#1562-september-25-2017} diff --git a/content/blog/2017-09-26-react-v16.0.md b/content/blog/2017-09-26-react-v16.0.md index b9f377851..2a5cf5a18 100644 --- a/content/blog/2017-09-26-react-v16.0.md +++ b/content/blog/2017-09-26-react-v16.0.md @@ -3,6 +3,12 @@ title: "React v16.0" author: [acdlite] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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} 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 e346629db..996411ef7 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 @@ -3,6 +3,12 @@ title: "React v16.2.0: Improved Support for Fragments" author: [clemmy] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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: @@ -127,7 +133,7 @@ render() { In React, this desugars to a `` 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-07-introducing-the-react-rfc-process.md b/content/blog/2017-12-07-introducing-the-react-rfc-process.md index ebae906d7..b5dca88e6 100644 --- a/content/blog/2017-12-07-introducing-the-react-rfc-process.md +++ b/content/blog/2017-12-07-introducing-the-react-rfc-process.md @@ -3,6 +3,12 @@ title: "Introducing the React RFC Process" author: [acdlite] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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: 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 8c75e2c6f..f3771817c 100644 --- a/content/blog/2017-12-15-improving-the-repository-infrastructure.md +++ b/content/blog/2017-12-15-improving-the-repository-infrastructure.md @@ -3,6 +3,12 @@ title: "Behind the Scenes: Improving the Repository Infrastructure" author: [gaearon, bvaughn] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ As we worked on [React 16](/blog/2017/09/26/react-v16.0.html), 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! diff --git a/content/blog/2018-03-01-sneak-peek-beyond-react-16.md b/content/blog/2018-03-01-sneak-peek-beyond-react-16.md index cc853aec6..1858fedd3 100644 --- a/content/blog/2018-03-01-sneak-peek-beyond-react-16.md +++ b/content/blog/2018-03-01-sneak-peek-beyond-react-16.md @@ -3,6 +3,12 @@ title: "Sneak Peek: Beyond React 16" author: [sophiebits] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ [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: 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 cc8556f77..f4531ddc6 100644 --- a/content/blog/2018-03-27-update-on-async-rendering.md +++ b/content/blog/2018-03-27-update-on-async-rendering.md @@ -3,6 +3,12 @@ title: Update on Async Rendering author: [bvaughn] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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.html). 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: @@ -36,6 +42,12 @@ Learn more about this codemod on the [16.9.0 release post.](https://reactjs.org/ --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ ## 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. diff --git a/content/blog/2018-03-29-react-v-16-3.md b/content/blog/2018-03-29-react-v-16-3.md index 9d43b68f6..082d9832a 100644 --- a/content/blog/2018-03-29-react-v-16-3.md +++ b/content/blog/2018-03-29-react-v-16-3.md @@ -3,6 +3,12 @@ title: "React v16.3.0: New lifecycles and context API" author: [bvaughn] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ A few days ago, we [wrote a post about upcoming changes to our legacy lifecycle methods](/blog/2018/03/27/update-on-async-rendering.html), 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. diff --git a/content/blog/2018-05-23-react-v-16-4.md b/content/blog/2018-05-23-react-v-16-4.md index dd1edf4ca..40f5443af 100644 --- a/content/blog/2018-05-23-react-v-16-4.md +++ b/content/blog/2018-05-23-react-v-16-4.md @@ -3,6 +3,12 @@ title: "React v16.4.0: Pointer Events" author: [acdlite] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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. diff --git a/content/blog/2018-06-07-you-probably-dont-need-derived-state.md b/content/blog/2018-06-07-you-probably-dont-need-derived-state.md index 6223548e3..692e609d3 100644 --- a/content/blog/2018-06-07-you-probably-dont-need-derived-state.md +++ b/content/blog/2018-06-07-you-probably-dont-need-derived-state.md @@ -3,6 +3,12 @@ title: "You Probably Don't Need Derived State" author: [bvaughn] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ React 16.4 included a [bugfix for getDerivedStateFromProps](/blog/2018/05/23/react-v-16-4.html#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.html#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. @@ -206,6 +212,12 @@ Refs can be useful in certain cases like this one, but generally we recommend yo ----- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ ### Recap {#recap} To recap, when designing a component, it is important to decide whether its data will be controlled or uncontrolled. diff --git a/content/blog/2018-08-01-react-v-16-4-2.md b/content/blog/2018-08-01-react-v-16-4-2.md index 9514b2700..215ef9f3c 100644 --- a/content/blog/2018-08-01-react-v-16-4-2.md +++ b/content/blog/2018-08-01-react-v-16-4-2.md @@ -3,6 +3,12 @@ title: "React v16.4.2: Server-side vulnerability fix" author: [gaearon] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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} diff --git a/content/blog/2018-10-01-create-react-app-v2.md b/content/blog/2018-10-01-create-react-app-v2.md index cc5f52a73..2ae050439 100644 --- a/content/blog/2018-10-01-create-react-app-v2.md +++ b/content/blog/2018-10-01-create-react-app-v2.md @@ -3,6 +3,12 @@ title: "Create React App 2.0: Babel 7, Sass, and More" author: [timer, gaearon] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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. diff --git a/content/blog/2018-10-23-react-v-16-6.md b/content/blog/2018-10-23-react-v-16-6.md index 456bcd0c2..548ee7ca9 100644 --- a/content/blog/2018-10-23-react-v-16-6.md +++ b/content/blog/2018-10-23-react-v-16-6.md @@ -3,6 +3,12 @@ title: "React v16.6.0: lazy, memo and contextType" author: [sebmarkbage] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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. diff --git a/content/blog/2018-11-13-react-conf-recap.md b/content/blog/2018-11-13-react-conf-recap.md index dec8ab17a..dd0e88aa8 100644 --- a/content/blog/2018-11-13-react-conf-recap.md +++ b/content/blog/2018-11-13-react-conf-recap.md @@ -3,6 +3,12 @@ title: "React Conf recap: Hooks, Suspense, and Concurrent Rendering" author: [tomocchino] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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.
diff --git a/content/blog/2018-11-27-react-16-roadmap.md b/content/blog/2018-11-27-react-16-roadmap.md index fbb08d133..d391aaeca 100644 --- a/content/blog/2018-11-27-react-16-roadmap.md +++ b/content/blog/2018-11-27-react-16-roadmap.md @@ -3,6 +3,12 @@ title: "React 16.x Roadmap" author: [gaearon] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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 @@ -199,6 +205,12 @@ We started designing a new server renderer that supports Suspense (including wai ----- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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. diff --git a/content/blog/2018-12-19-react-v-16-7.md b/content/blog/2018-12-19-react-v-16-7.md index e6e4f8a34..e588533fa 100644 --- a/content/blog/2018-12-19-react-v-16-7.md +++ b/content/blog/2018-12-19-react-v-16-7.md @@ -3,6 +3,12 @@ title: "React v16.7: No, This Is Not the One With Hooks" author: [acdlite] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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} diff --git a/content/blog/2019-02-06-react-v16.8.0.md b/content/blog/2019-02-06-react-v16.8.0.md index 2c2b0a441..3f45cfc98 100644 --- a/content/blog/2019-02-06-react-v16.8.0.md +++ b/content/blog/2019-02-06-react-v16.8.0.md @@ -3,6 +3,12 @@ title: "React v16.8: The One With Hooks" author: [gaearon] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ With React 16.8, [React Hooks](/docs/hooks-intro.html) are available in a stable release! ## What Are Hooks? {#what-are-hooks} 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 ab7918b83..baedfc300 100644 --- a/content/blog/2019-02-23-is-react-translated-yet.md +++ b/content/blog/2019-02-23-is-react-translated-yet.md @@ -3,6 +3,12 @@ title: "Is React Translated Yet? ¡Sí! Sim! はい！" author: [tesseralis] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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! 🎉 @@ -41,7 +47,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/main/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/main/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/main/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/main/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-08-react-v16.9.0.md b/content/blog/2019-08-08-react-v16.9.0.md index aa2adcd95..43f28388c 100644 --- a/content/blog/2019-08-08-react-v16.9.0.md +++ b/content/blog/2019-08-08-react-v16.9.0.md @@ -3,6 +3,12 @@ title: "React v16.9.0 and the Roadmap Update" author: [gaearon, bvaughn] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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} diff --git a/content/blog/2019-10-22-react-release-channels.md b/content/blog/2019-10-22-react-release-channels.md index cb2f18519..af1615634 100644 --- a/content/blog/2019-10-22-react-release-channels.md +++ b/content/blog/2019-10-22-react-release-channels.md @@ -3,6 +3,12 @@ title: "Preparing for the Future with React Prereleases" author: [acdlite] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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. @@ -58,13 +64,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. diff --git a/content/blog/2019-11-06-building-great-user-experiences-with-concurrent-mode-and-suspense.md b/content/blog/2019-11-06-building-great-user-experiences-with-concurrent-mode-and-suspense.md index a41e613c6..977fa2737 100644 --- a/content/blog/2019-11-06-building-great-user-experiences-with-concurrent-mode-and-suspense.md +++ b/content/blog/2019-11-06-building-great-user-experiences-with-concurrent-mode-and-suspense.md @@ -3,6 +3,12 @@ title: "Building Great User Experiences with Concurrent Mode and Suspense" author: [josephsavona] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ At React Conf 2019 we announced an [experimental release](/docs/concurrent-mode-adoption.html#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. 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..ca00f3cf2 100644 --- a/content/blog/2020-02-26-react-v16.13.0.md +++ b/content/blog/2020-02-26-react-v16.13.0.md @@ -5,6 +5,12 @@ redirect_from: - "blog/2020/03/02/react-v16.13.0.html" --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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} @@ -34,7 +40,7 @@ When dynamically applying a `style` that contains longhand and shorthand version ``` -You might expect this `
` 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 `
` 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 c6abdd2ee..bc829ee17 100644 --- a/content/blog/2020-08-10-react-v17-rc.md +++ b/content/blog/2020-08-10-react-v17-rc.md @@ -3,6 +3,12 @@ title: "React v17.0 Release Candidate: No New Features" author: [gaearon,rachelnabors] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 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} diff --git a/content/blog/2020-09-22-introducing-the-new-jsx-transform.md b/content/blog/2020-09-22-introducing-the-new-jsx-transform.md index f509089d6..1beffc78f 100644 --- a/content/blog/2020-09-22-introducing-the-new-jsx-transform.md +++ b/content/blog/2020-09-22-introducing-the-new-jsx-transform.md @@ -3,6 +3,12 @@ title: "Introducing the New JSX Transform" author: [lunaruan] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ Although React 17 [doesn't contain new features](/blog/2020/08/10/react-v17-rc.html), it will provide support for a new version of the JSX transform. In this post, we will describe what it is and how to try it. ## What's a JSX Transform? {#whats-a-jsx-transform} diff --git a/content/blog/2020-10-20-react-v17.md b/content/blog/2020-10-20-react-v17.md index e25282140..31f259776 100644 --- a/content/blog/2020-10-20-react-v17.md +++ b/content/blog/2020-10-20-react-v17.md @@ -3,6 +3,12 @@ title: "React v17.0" author: [gaearon,rachelnabors] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ Today, we are releasing React 17! We've written at length about the role of the React 17 release and the changes it contains in [the React 17 RC blog post](/blog/2020/08/10/react-v17-rc.html). This post is a brief summary of it, so if you've already read the RC post, you can skip this one. ## No New Features {#no-new-features} diff --git a/content/blog/2020-12-21-data-fetching-with-react-server-components.md b/content/blog/2020-12-21-data-fetching-with-react-server-components.md index 80727a98c..f41ca8161 100644 --- a/content/blog/2020-12-21-data-fetching-with-react-server-components.md +++ b/content/blog/2020-12-21-data-fetching-with-react-server-components.md @@ -3,6 +3,12 @@ title: "Giới thiệu Zero-Bundle-Size React Server Components" author: [gaearon,laurentan,josephsavona,sebmarkbage] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ 2020 là một năm dài. Năm cũ sắp hết, chúng tôi muốn mang đến một cập nhật đặc biệt cho mùa lễ hội này, đó là nghiên cứu của chúng tôi về zero-bundle-size **React Server Components**. Để giới thiệu về React Server Components, chúng tôi đã chuẩn bị một buổi talk và một đoạn demo. Bạn có thể xem ngay trong mùa lễ hội này, hoặc năm sau khi lịch làm việc quay trở lại. 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 index 764ff9524..dbf85248a 100644 --- a/content/blog/2021-06-08-the-plan-for-react-18.md +++ b/content/blog/2021-06-08-the-plan-for-react-18.md @@ -3,6 +3,16 @@ title: "The Plan for React 18" author: [acdlite, bvaughn, abernathyca, gaearon, rachelnabors, rickhanlonii, sebmarkbage, sethwebster] --- +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ +> 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. 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..edea3e392 --- /dev/null +++ b/content/blog/2021-12-17-react-conf-2021-recap.md @@ -0,0 +1,154 @@ +--- +title: "React Conf 2021 Recap" +author: [jtannady, rickhanlonii] +--- + +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ +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: + + + +## 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(, container); + +// after +const container = document.getElementById('root'); +const root = ReactDOM.createRoot(container); +root.render(); +``` + +For a demo of upgrading to React 18, see [Shruti Kapoor](https://twitter.com/shrutikapoor08)’s talk here: + + + +## 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: + + + +## 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: + + + +## 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: + + + +## 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: + + + +## 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://react.dev/): + + + +# 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..e32526c8f --- /dev/null +++ b/content/blog/2022-03-08-react-18-upgrade-guide.md @@ -0,0 +1,309 @@ +--- +title: "How to Upgrade to React 18" +author: [rickhanlonii] +--- + +
+ +> This blog site has been archived. Go to [react.dev/blog](https://react.dev/blog) to see the recent posts. + +
+ +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(, 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(); +``` + +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(, container, () => { + console.log('rendered'); +}); + +// After +function AppWithCallbackAfterRender() { + useEffect(() => { + console.log('rendered'); + }); + + return +} + +const container = document.getElementById('app'); +const root = createRoot(container); +root.render(); +``` + +> 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(, container); + +// After +import { hydrateRoot } from 'react-dom/client'; +const container = document.getElementById('app'); +const root = hydrateRoot(container, ); +// 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 ``.** [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 ` - -
- ->Caution: -> ->This page was about experimental features that aren't yet available in a stable release. It was aimed at early adopters and people who are curious. -> ->Much of the information on this page is now outdated and exists only for archival purposes. **Please refer to the [React 18 Alpha announcement post](/blog/2021/06/08/the-plan-for-react-18.html -) for the up-to-date information.** -> ->Before React 18 is released, we will replace this page with stable documentation. - -
- -- [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 `` tree:** - -```js -import ReactDOM from 'react-dom'; - -// If you previously had: -// -// ReactDOM.render(, document.getElementById('root')); -// -// You can opt into Concurrent Mode by writing: - -ReactDOM.unstable_createRoot( - document.getElementById('root') -).render(); -``` - ->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(, 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()`. 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()`. 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} - - - -
- -| |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) |🚫 |🚫 |✅ | - -
- -\*: 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 6a29cc44e..000000000 --- a/content/docs/concurrent-mode-intro.md +++ /dev/null @@ -1,103 +0,0 @@ ---- -id: concurrent-mode-intro -title: Introducing Concurrent Mode (Experimental) -permalink: docs/concurrent-mode-intro.html -next: concurrent-mode-suspense.html ---- - - - -
- ->Caution: -> ->This page was about experimental features that aren't yet available in a stable release. It was aimed at early adopters and people who are curious. -> ->Much of the information on this page is now outdated and exists only for archival purposes. **Please refer to the [React 18 Alpha announcement post](/blog/2021/06/08/the-plan-for-react-18.html -) for the up-to-date information.** -> ->Before React 18 is released, we will replace this page with stable documentation. - -
- -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 main 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 main. 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 ac5e29173..000000000 --- a/content/docs/concurrent-mode-patterns.md +++ /dev/null @@ -1,940 +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 ---- - - - -
- ->Caution: -> ->This page was about experimental features that aren't yet available in a stable release. It was aimed at early adopters and people who are curious. -> ->Much of the information on this page is now outdated and exists only for archival purposes. **Please refer to the [React 18 Alpha announcement post](/blog/2021/06/08/the-plan-for-react-18.html -) for the up-to-date information.** -> ->Before React 18 is released, we will replace this page with stable documentation. - -
- -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 ``](#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(); -``` - -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} - - {isPending ? " Loading..." : null} - - -); -``` - -**[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 ( - <> - - {isPending ? " Loading..." : null} - - - ); -} -``` - -**[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 `` rendering? - -Clearly, both "versions" of `` 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 `` 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 ( - Loading profile...}> - - - Loading posts...}> - - - - ); -} -``` - -**[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 `` and `` 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 ( - Loading profile...}> - - - Loading posts...}> - - - - ); -} -``` - -**[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 ` - {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 ` - Loading posts...}> - - - - ); -} -``` - -**[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 `` 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. - -
- -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 `

Loading the app...

` fallback. -* **Skeleton:** You will see the `` component with `

Loading posts...

` inside. -* **Complete:** You will see the `` 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 ``: - -```js - - {/* previous screen */} - - -``` - -After the click, React started rendering the next screen: - -```js - - {/* next screen */} - - - - - - - -``` - -Both `` and `` need data to render, so they suspend: - -```js{4,6} - - {/* next screen */} - - {/* suspends! */} - Loading posts...}> - {/* suspends! */} - - - -``` - -When a component suspends, React needs to show the closest fallback. But the closest fallback to `` is at the top level: - -```js{2,3,7} - -

Loading the app...

-}> - {/* next screen */} - - {/* suspends! */} - - - - - -``` - -This is why when we click the button, it feels like we've "taken a step back". The `` boundary which was previously showing useful content (``) had to "recede" to showing the fallback (`

Loading the app...

`). We call that a **Receded** state. - -As we load more data, React will retry rendering, and `` can render successfully. Finally, we're in the **Skeleton** state. We see the new page with missing parts: - -```js{6,7,9} - - {/* next screen */} - - - -

Loading posts...

- }> - {/* suspends! */} - - - -``` - -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 ` - {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 = ( - - {/* ... */} - -); - -return ( - <> - - {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 `` 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 ( - <> - - Loading...

}> - - - - ); -} - -function Translation({ resource }) { - return ( -

- {resource.read()} -

- ); -} -``` - -**[Try it on CodeSandbox](https://codesandbox.io/s/brave-villani-ypxvf)** - -Notice how when you type into the input, the `` component suspends, and we see the `

Loading...

` 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 -<> - - - -``` - -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 ( - Loading profile...}> - - Loading posts...}> - - - - ); -} - -function ProfileTimeline({ isStale, resource }) { - const posts = resource.posts.read(); - return ( -
    - {posts.map(post => ( -
  • {post.text}
    • - ))} -
- ); -} -``` - -**[Try it on CodeSandbox](https://codesandbox.io/s/vigorous-keller-3ed2b)** - -The tradeoff we're making here is that `` 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 ( -
- - ... - -
- ); -} -``` - -**[Try it on CodeSandbox](https://codesandbox.io/s/pensive-shirley-wkp46)** - -In this example, **every item in `` 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 ( -
- - ... - -
- ); -} -``` - -**[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} - -`` is the last pattern that's related to orchestrating loading states. - -Consider this example: - -```js{5-10} -function ProfilePage({ resource }) { - return ( - <> - - Loading posts...}> - - - Loading fun facts...}> - - - - ); -} -``` - -**[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 `

Loading posts...

` 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 -Loading posts and fun facts...}> - - - -``` - -**[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'; -``` - -`` coordinates the "reveal order" of the closest `` nodes below it: - -```js{3,11} -function ProfilePage({ resource }) { - return ( - - - Loading posts...}> - - - Loading fun facts...}> - - - - ); -} -``` - -**[Try it on CodeSandbox](https://codesandbox.io/s/black-wind-byilt)** - -The `revealOrder="forwards"` option means that the closest `` 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**. `` 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 `` is composable, like anything in React. For example, you can create a grid by putting several `` rows inside a `` 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 09fb109f7..000000000 --- a/content/docs/concurrent-mode-reference.md +++ /dev/null @@ -1,204 +0,0 @@ ---- -id: concurrent-mode-reference -title: Concurrent Mode API Reference (Experimental) -permalink: docs/concurrent-mode-reference.html -prev: concurrent-mode-adoption.html ---- - - - -
- ->Caution: -> ->This page was about experimental features that aren't yet available in a stable release. It was aimed at early adopters and people who are curious. -> ->Much of the information on this page is now outdated and exists only for archival purposes. **Please refer to the [React 18 Alpha announcement post](/blog/2021/06/08/the-plan-for-react-18.html -) for the up-to-date information.** -> ->Before React 18 is released, we will replace this page with stable documentation. - -
- -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(); -``` - -Replaces `ReactDOM.render(, 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 -Loading...}> - - - -``` - -`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 `` have 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} - -```js - - - - - - - - - - - ... - -``` - -`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 ( - <> - - {isPending ? " Loading..." : null} - }> - - - - ); -} -``` - -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 ( -
- {/* Keep passing the current text to the input */} - - ... - {/* But the list is allowed to "lag behind" when necessary */} - -
- ); - } -``` - -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 51e1e0cb7..000000000 --- a/content/docs/concurrent-mode-suspense.md +++ /dev/null @@ -1,739 +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 ---- - - - -
- ->Caution: -> ->This page was about experimental features that aren't yet available in a stable release. It was aimed at early adopters and people who are curious. -> ->Much of the information on this page is now outdated and exists only for archival purposes. **Please refer to the [React 18 Alpha announcement post](/blog/2021/06/08/the-plan-for-react-18.html -) for the up-to-date information.** -> ->Before React 18 is released, we will replace this page with stable documentation. - -
- -React 16.6 added a `` 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 for Data Fetching is a new feature that lets you also use `` 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 ( - Loading profile...}> - - Loading posts...}> - - - - ); -} - -function ProfileDetails() { - // Try to read user info, although it might not have loaded yet - const user = resource.user.read(); - return

{user.name}

; -} - -function ProfileTimeline() { - // Try to read posts, although they might not have loaded yet - const posts = resource.posts.read(); - return ( -
    - {posts.map(post => ( -
  • {post.text}
    • - ))} -
- ); -} -``` - -**[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/getting-started/step-by-step-guide/). 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/api-reference/relay-environment-provider/)). - - * **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/getting-started/step-by-step-guide/)!** 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/api-reference/use-preloaded-query/) 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 `` and `` components: - -```js{4-6,22-24} -function ProfilePage() { - const [user, setUser] = useState(null); - - useEffect(() => { - fetchUser().then(u => setUser(u)); - }, []); - - if (user === null) { - return

Loading profile...

; - } - return ( - <> -

{user.name}

- - - ); -} - -function ProfileTimeline() { - const [posts, setPosts] = useState(null); - - useEffect(() => { - fetchPosts().then(p => setPosts(p)); - }, []); - - if (posts === null) { - return

Loading posts...

; - } - return ( -
    - {posts.map(post => ( -
  • {post.text}
    • - ))} -
- ); -} -``` - -**[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, `` 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

Loading profile...

; - } - return ( - <> -

{user.name}

- - - ); -} - -// The child doesn't trigger fetching anymore -function ProfileTimeline({ posts }) { - if (posts === null) { - return

Loading posts...

; - } - return ( -
    - {posts.map(post => ( -
  • {post.text}
    • - ))} -
- ); -} -``` - -**[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 ( - Loading profile...}> - - Loading posts...}> - - - - ); -} - -function ProfileDetails() { - // Try to read user info, although it might not have loaded yet - const user = resource.user.read(); - return

{user.name}

; -} - -function ProfileTimeline() { - // Try to read posts, although they might not have loaded yet - const posts = resource.posts.read(); - return ( -
    - {posts.map(post => ( -
  • {post.text}
    • - ))} -
- ); -} -``` - -**[Try it on CodeSandbox](https://codesandbox.io/s/frosty-hermann-bztrp)** - -Here's what happens when we render `` 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 ``. It returns `` and `` as children. -3. React tries to render ``. 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 ``. 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 `` suspended, React shows the closest `` fallback above it in the tree: `

Loading profile...

`. 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 `` component will render successfully and we'll no longer need the `

Loading profile...

` 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 `` 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 `` boundary between them. Or we could make them independent from each other by giving each *its own* `` 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

{user.name}

; -} -``` - -**[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 ( - <> - - - - ); -} -``` - -**[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 `` component that renders our `` with a button that lets us **switch between different profiles**: - -```js{9-11} -function getNextId(id) { - // ... -} - -function App() { - const [id, setId] = useState(0); - return ( - <> - - - - ); -} -``` - -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 `` 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

Loading profile...

; - } - return ( - <> -

{user.name}

- - - ); -} - -function ProfileTimeline({ id }) { - const [posts, setPosts] = useState(null); - - useEffect(() => { - fetchPosts(id).then(p => setPosts(p)); - }, [id]); - - if (posts === null) { - return

Loading posts...

; - } - return ( -
    - {posts.map(post => ( -
  • {post.text}
    • - ))} -
- ); -} -``` - -**[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

Loading profile...

; - } - return ( - <> -

{user.name}

- - - ); - } -} - -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

Loading posts...

; - } - return ( -
    - {posts.map(post => ( -
  • {post.text}
    • - ))} -
- ); - } -} -``` - -**[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 ( - <> - - - - ); -} - -function ProfilePage({ resource }) { - return ( - Loading profile...}> - - Loading posts...}> - - - - ); -} - -function ProfileDetails({ resource }) { - const user = resource.user.read(); - return

{user.name}

; -} - -function ProfileTimeline({ resource }) { - const posts = resource.posts.read(); - return ( -
    - {posts.map(post => ( -
  • {post.text}
    • - ))} -
- ); -} -``` - -**[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 ``'s component state: - -```js{4} -const initialResource = fetchProfileData(0); - -function App() { - const [resource, setResource] = useState(initialResource); -``` - -When we click "Next", the `` component kicks off a request for the next profile, and passes *that* object down to the `` component: - -```js{4,8} - <> - - - -``` - -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 `` 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 ( - Loading profile...}> - - Could not fetch posts.}> - Loading posts...}> - - - - - ); -} -``` - -**[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 254e965ec..e4f69a552 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -8,6 +8,17 @@ redirect_from: - "tips/false-in-jsx.html" --- +
+ +> These docs are old and won't be updated. Go to [react.dev](https://react.dev/) for the new React docs. +> +> These new documentation pages teach modern React and include live examples: +> +> - [Conditional Rendering](https://react.dev/learn/conditional-rendering) + +
+ + Trong React, bạn có thể tạo ra các component riêng biệt chứa đựng hành vi mà bạn cần. Tiếp đến, dựa trên trạng thái (state) hiện tại của ứng dụng (application), bạn sẽ chỉ định việc các component đó có nên xuất hiện hay không. Render có điều kiện trong React hoạt động tương tự như cách mà chúng ta vẫn thường thấy trong Javascript. Đó là dùng câu lệnh [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) hay [conditional operator](https://developer.mozilla.org/vi/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) trong Javascript để tạo ra các element ứng với state hiện tại, React sau đó sẽ cập nhật giao diện người dùng (UI) phù hợp với state đó. @@ -35,11 +46,9 @@ function Greeting(props) { return ; } -ReactDOM.render( - // Thử thay đổi prop isLoggedIn={true}: - , - document.getElementById('root') -); +const root = ReactDOM.createRoot(document.getElementById('root')); +// Thử thay đổi prop isLoggedIn={true}: +root.render(); ``` [**Thử trên CodePen**](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011) @@ -111,10 +120,8 @@ class LoginControl extends React.Component { } } -ReactDOM.render( - , - document.getElementById('root') -); +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); ``` [**Thử trên CodePen**](https://codepen.io/gaearon/pen/QKzAgB?editors=0010) @@ -142,10 +149,9 @@ function Mailbox(props) { } const messages = ['React', 'Re: React', 'Re:Re: React']; -ReactDOM.render( - , - document.getElementById('root') -); + +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); ``` [**Thử trên CodePen**](https://codepen.io/gaearon/pen/ozJddz?editors=0010) @@ -161,7 +167,7 @@ render() { const count = 0; return (
- { count &&

Messages: {count}

} + {count &&

Messages: {count}

}
); } @@ -246,10 +252,8 @@ class Page extends React.Component { } } -ReactDOM.render( - , - document.getElementById('root') -); +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); ``` [**Thử trên CodePen**](https://codepen.io/gaearon/pen/Xjoqwm?editors=0010) diff --git a/content/docs/context.md b/content/docs/context.md index 97a961b2a..e869a8c3e 100644 --- a/content/docs/context.md +++ b/content/docs/context.md @@ -4,6 +4,17 @@ title: Context permalink: docs/context.html --- +
+ +> These docs are old and won't be updated. Go to [react.dev](https://react.dev/) for the new React docs. +> +> These new documentation pages teach modern React and include live examples: +> +> - [Passing Data Deeply with Context](https://react.dev/learn/passing-data-deeply-with-context) +> - [`useContext`](https://react.dev/reference/react/useContext) + +
+ Context cung cấp phương pháp truyền data xuyên suốt component tree mà không cần phải truyền props một cách thủ công qua từng level. Thông thường với một ứng dụng React, data được truyền từ trên xuống (cha tới con) thông qua props, điều này có vẻ khá cồng kềnh đối với một số loại props (Ví dụ như locale preference, UI theme) chúng thường được sử dụng bởi rất nhiều component trong ứng dụng. Context cung cấp một cách làm cho phép chúng ta chia sẽ values giống như vậy giữa các components mà không cần truyền giá trị tới tất cả level trong component tree. diff --git a/content/docs/create-a-new-react-app.md b/content/docs/create-a-new-react-app.md index 6a1486d64..d387b9139 100644 --- a/content/docs/create-a-new-react-app.md +++ b/content/docs/create-a-new-react-app.md @@ -8,6 +8,15 @@ prev: add-react-to-a-website.html next: cdn-links.html --- +
+ +> +> These docs are old and won't be updated. Go to [react.dev](https://react.dev/) for the new React docs. +> +> See [Start a New React Project](https://react.dev/learn/start-a-new-react-project) for the recommended ways to create an app. + +
+ Sử dụng chuỗi công cụ tích hợp để có trải nghiệm tốt nhất cho người dùng và nhà phát triển. Trang này mô tả một số công cụ React phổ biến giúp thực hiện các tác vụ như: @@ -75,7 +84,7 @@ Các công cụ sau cung cấp nhiều sự lựa chọn và linh hoạt hơn. C - **[Nx](https://nx.dev/react)** là một bộ công cụ để phát triển full-stack monorepo, với hỗ trợ tích hợp cho React, Next.js, [Express](https://expressjs.com/), và nhiều hơn nữa. -- **[Parcel](https://parceljs.org/)** là một gói ứng dụng web nhanh, không cấu hình [hoạt động với React](https://parceljs.org/recipes.html#react). +- **[Parcel](https://parceljs.org/)** là một gói ứng dụng web nhanh, không cấu hình [hoạt động với React](https://parceljs.org/recipes/react/). - **[Razzle](https://github.com/jaredpalmer/razzle)** là một framework kết xuất máy chủ không yêu cầu bất kỳ cấu hình nào, nhưng cung cấp tính linh hoạt hơn Next.js. diff --git a/content/docs/error-boundaries.md b/content/docs/error-boundaries.md index 93ca1e7e7..6a9ba5712 100644 --- a/content/docs/error-boundaries.md +++ b/content/docs/error-boundaries.md @@ -4,6 +4,16 @@ title: Error Boundaries permalink: docs/error-boundaries.html --- +
+ +> These docs are old and won't be updated. Go to [react.dev](https://react.dev/) for the new React docs. +> +> These new documentation pages teach modern React: +> +> - [`React.Component`: Catching rendering errors with an error boundary](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary) + +
+ Trước đây, các lỗi JavaScript bên trong các thành phần được sử dụng để làm hỏng trạng thái bên trong của React và khiến nó [emit](https://github.com/facebook/react/issues/4026) [cryptic](https://github.com/facebook/react/issues/6895) [errors](https://github.com/facebook/react/issues/8579) vào lần hiển thị tiếp theo. Những lỗi này luôn do lỗi trước đó trong mã ứng dụng gây ra, nhưng React không cung cấp cách @@ -81,7 +91,7 @@ Nếu một ranh giới lỗi không cố gắng hiển thị thông báo lỗi, ## 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). +. ## 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 a0f6d1ef3..221e9b579 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 ; } diff --git a/content/docs/forms.md b/content/docs/forms.md index adfa03ca5..bc5713ccf 100644 --- a/content/docs/forms.md +++ b/content/docs/forms.md @@ -9,6 +9,18 @@ redirect_from: - "docs/forms-zh-CN.html" --- +
+ +> These docs are old and won't be updated. Go to [react.dev](https://react.dev/) for the new React docs. +> +> These new documentation pages teach modern React and include live examples: +> +> - [``](https://react.dev/reference/react-dom/components/input) +> - [`