From f5784cb1386c5568b0007019a60e0a6e4e666544 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Mon, 22 Mar 2021 23:00:32 +0000 Subject: [PATCH 1/9] Use React 17.0.2 (#3590) --- content/versions.yml | 2 ++ package.json | 6 +++--- src/site-constants.js | 2 +- yarn.lock | 26 +++++++++++++------------- 4 files changed, 19 insertions(+), 17 deletions(-) diff --git a/content/versions.yml b/content/versions.yml index ffbc479ed..510d4a3db 100644 --- a/content/versions.yml +++ b/content/versions.yml @@ -1,3 +1,5 @@ +- title: '17.0.2' + changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#1702-march-22-2021 - title: '17.0.1' changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#1701-october-22-2020 - title: '17.0.0' diff --git a/package.json b/package.json index 0d9566128..ac897667c 100644 --- a/package.json +++ b/package.json @@ -47,8 +47,8 @@ "normalize.css": "^8.0.0", "prettier": "^1.7.4", "prismjs": "^1.15.0", - "react": "^17.0.1", - "react-dom": "^17.0.1", + "react": "^17.0.2", + "react-dom": "^17.0.2", "react-helmet": "^5.2.0", "react-live": "1.8.0-0", "remarkable": "^1.7.1", @@ -58,7 +58,7 @@ "unist-util-visit": "^1.1.3" }, "engines": { - "node": "12.x.x || 14.x.x", + "node": "12.x.x || 14.x.x || 15.x.x", "yarn": "^1.3.2" }, "homepage": "https://reactjs.org/", diff --git a/src/site-constants.js b/src/site-constants.js index 54870ab1d..e9f79d431 100644 --- a/src/site-constants.js +++ b/src/site-constants.js @@ -8,7 +8,7 @@ // NOTE: We can't just use `location.toString()` because when we are rendering // the SSR part in node.js we won't have a proper location. const urlRoot = 'https://reactjs.org'; -const version = '17.0.1'; +const version = '17.0.2'; const babelURL = 'https://unpkg.com/babel-standalone@6.26.0/babel.min.js'; export {babelURL, urlRoot, version}; diff --git a/yarn.lock b/yarn.lock index 8a13aaf70..be08f8d6c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12448,14 +12448,14 @@ react-dev-utils@^4.2.3: strip-ansi "3.0.1" text-table "0.2.0" -react-dom@^17.0.1: - version "17.0.1" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.1.tgz#1de2560474ec9f0e334285662ede52dbc5426fc6" - integrity sha512-6eV150oJZ9U2t9svnsspTMrWNyHc6chX0KzDeAOXftRa8bNeOKTTfCJ7KorIwenkHd2xqVTBTCZd79yk/lx/Ug== +react-dom@^17.0.2: + version "17.0.2" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23" + integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" - scheduler "^0.20.1" + scheduler "^0.20.2" react-error-overlay@^3.0.0: version "3.0.0" @@ -12601,10 +12601,10 @@ react@^16.8.0: object-assign "^4.1.1" prop-types "^15.6.2" -react@^17.0.1: - version "17.0.1" - resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127" - integrity sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w== +react@^17.0.2: + version "17.0.2" + resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037" + integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" @@ -13433,10 +13433,10 @@ scheduler@^0.19.1: loose-envify "^1.1.0" object-assign "^4.1.1" -scheduler@^0.20.1: - version "0.20.1" - resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.1.tgz#da0b907e24026b01181ecbc75efdc7f27b5a000c" - integrity sha512-LKTe+2xNJBNxu/QhHvDR14wUXHRQbVY5ZOYpOGWRzhydZUqrLb2JBvLPY7cAqFmqrWuDED0Mjk7013SZiOz6Bw== +scheduler@^0.20.2: + version "0.20.2" + resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91" + integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" From 8aee286cc8c63a9d2794a8a2f4574f6a44d0917c Mon Sep 17 00:00:00 2001 From: Pradip Date: Tue, 23 Mar 2021 09:59:26 +0100 Subject: [PATCH 2/9] Testing Recipes - Timers: call useFakeTimers/userRealTimers before/after each test (#3591) --- content/docs/testing-recipes.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/testing-recipes.md b/content/docs/testing-recipes.md index 875522591..1fa4a6969 100644 --- a/content/docs/testing-recipes.md +++ b/content/docs/testing-recipes.md @@ -465,13 +465,12 @@ import { act } from "react-dom/test-utils"; import Card from "./card"; -jest.useFakeTimers(); - let container = null; beforeEach(() => { // setup a DOM element as a render target container = document.createElement("div"); document.body.appendChild(container); + jest.useFakeTimers(); }); afterEach(() => { @@ -479,6 +478,7 @@ afterEach(() => { unmountComponentAtNode(container); container.remove(); container = null; + jest.useRealTimers(); }); it("should select null after timing out", () => { From 7626d6ce8233f5ce583522621a01af19c107538d Mon Sep 17 00:00:00 2001 From: OliverPrada <49795876+OliverPradaLara@users.noreply.github.com> Date: Tue, 23 Mar 2021 19:15:56 -0300 Subject: [PATCH 3/9] Add Chile Meetup Group (#3584) --- content/community/meetups.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/content/community/meetups.md b/content/community/meetups.md index cff04ae1f..8403d6d8a 100644 --- a/content/community/meetups.md +++ b/content/community/meetups.md @@ -50,6 +50,9 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet * [Ottawa, ON](https://www.meetup.com/Ottawa-ReactJS-Meetup/) * [Toronto, ON](https://www.meetup.com/Toronto-React-Native/events/) +## Chile {#chile} +* [Santiago](https://www.meetup.com/es-ES/react-santiago/) + ## China {#china} * [Beijing](https://www.meetup.com/Beijing-ReactJS-Meetup/) From c970f75a0ac3513f50e7a4989757c50cde0b7396 Mon Sep 17 00:00:00 2001 From: vikram menon Date: Fri, 26 Mar 2021 12:30:18 -0700 Subject: [PATCH 4/9] Fix 404 broken link for createFragmentContainer (#3598) --- content/docs/higher-order-components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/higher-order-components.md b/content/docs/higher-order-components.md index 8d97b61ce..07dc90c38 100644 --- a/content/docs/higher-order-components.md +++ b/content/docs/higher-order-components.md @@ -14,7 +14,7 @@ const EnhancedComponent = higherOrderComponent(WrappedComponent); Whereas a component transforms props into UI, a higher-order component transforms a component into another component. -HOCs are common in third-party React libraries, such as Redux's [`connect`](https://github.com/reduxjs/react-redux/blob/master/docs/api/connect.md#connect) and Relay's [`createFragmentContainer`](http://facebook.github.io/relay/docs/en/fragment-container.html). +HOCs are common in third-party React libraries, such as Redux's [`connect`](https://github.com/reduxjs/react-redux/blob/master/docs/api/connect.md#connect) and Relay's [`createFragmentContainer`](https://relay.dev/docs/v10.1.3/fragment-container/#createfragmentcontainer). In this document, we'll discuss why higher-order components are useful, and how to write your own. From c9efa5e2661ad9cd7a07021a429e063e410afe03 Mon Sep 17 00:00:00 2001 From: ilovepullrequests <79510995+ilovepullrequests@users.noreply.github.com> Date: Mon, 5 Apr 2021 09:29:48 +0000 Subject: [PATCH 5/9] Correct grammar (#3608) Change 'was' to 'were'. --- content/docs/strict-mode.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/strict-mode.md b/content/docs/strict-mode.md index 5e213d9e3..590ed7b7d 100644 --- a/content/docs/strict-mode.md +++ b/content/docs/strict-mode.md @@ -55,7 +55,7 @@ Since object refs were largely added as a replacement for string refs, strict mo React used to support `findDOMNode` to search the tree for a DOM node given a class instance. Normally you don't need this because you can [attach a ref directly to a DOM node](/docs/refs-and-the-dom.html#creating-refs). -`findDOMNode` can also be used on class components but this was breaking abstraction levels by allowing a parent to demand that certain children was rendered. It creates a refactoring hazard where you can't change the implementation details of a component because a parent might be reaching into its DOM node. `findDOMNode` only returns the first child, but with the use of Fragments, it is possible for a component to render multiple DOM nodes. `findDOMNode` is a one time read API. It only gave you an answer when you asked for it. If a child component renders a different node, there is no way to handle this change. Therefore `findDOMNode` only worked if components always return a single DOM node that never changes. +`findDOMNode` can also be used on class components but this was breaking abstraction levels by allowing a parent to demand that certain children were rendered. It creates a refactoring hazard where you can't change the implementation details of a component because a parent might be reaching into its DOM node. `findDOMNode` only returns the first child, but with the use of Fragments, it is possible for a component to render multiple DOM nodes. `findDOMNode` is a one time read API. It only gave you an answer when you asked for it. If a child component renders a different node, there is no way to handle this change. Therefore `findDOMNode` only worked if components always return a single DOM node that never changes. You can instead make this explicit by passing a ref to your custom component and pass that along to the DOM using [ref forwarding](/docs/forwarding-refs.html#forwarding-refs-to-dom-components). From 49fd7d5f115378e3663b049f108a2d29b31290c8 Mon Sep 17 00:00:00 2001 From: Niklas P Date: Mon, 5 Apr 2021 11:31:03 +0200 Subject: [PATCH 6/9] Update reference-caveats-solution.js (#3609) As referenced in https://reactjs.org/docs/context.html update the example to use the naming conventions used across the page. --- examples/context/reference-caveats-solution.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/context/reference-caveats-solution.js b/examples/context/reference-caveats-solution.js index deefabd46..a06f5da21 100644 --- a/examples/context/reference-caveats-solution.js +++ b/examples/context/reference-caveats-solution.js @@ -10,9 +10,9 @@ class App extends React.Component { render() { // highlight-range{2} return ( - + - + ); } } From 3bff1ac3fb87d4757ba069bcd9ae229b1bdb0327 Mon Sep 17 00:00:00 2001 From: Pavlos Vinieratos Date: Thu, 8 Apr 2021 14:53:23 +0100 Subject: [PATCH 7/9] update on RN and react 17 (#3620) --- content/blog/2020-10-20-react-v17.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/blog/2020-10-20-react-v17.md b/content/blog/2020-10-20-react-v17.md index 83a1f7481..e25282140 100644 --- a/content/blog/2020-10-20-react-v17.md +++ b/content/blog/2020-10-20-react-v17.md @@ -58,7 +58,7 @@ React 17 supports the [new JSX transform](/blog/2020/09/22/introducing-the-new-j ## React Native {#react-native} -React Native has a separate release schedule. We currently expect the support for React 17 to land in React Native 0.65, but the exact version is subject to change. As always, you can track the release discussions on the React Native Community releases [issue tracker](https://github.com/react-native-community/releases). +React Native has a separate release schedule. We landed the support for React 17 in React Native 0.64. As always, you can track the release discussions on the React Native Community releases [issue tracker](https://github.com/react-native-community/releases). ## Installation {#installation} From 968f09159512b59afd5246a928789ae52592c923 Mon Sep 17 00:00:00 2001 From: Yuxiang Yang Date: Mon, 12 Apr 2021 14:46:51 +0800 Subject: [PATCH 8/9] update Optimizing Performance section (#3605) (#3623) Co-authored-by: Ethan Yang --- content/docs/optimizing-performance.md | 31 +++++--------------------- 1 file changed, 5 insertions(+), 26 deletions(-) diff --git a/content/docs/optimizing-performance.md b/content/docs/optimizing-performance.md index a3270959c..a78a7904a 100644 --- a/content/docs/optimizing-performance.md +++ b/content/docs/optimizing-performance.md @@ -156,32 +156,6 @@ You can learn more about this in [webpack documentation](https://webpack.js.org/ Remember that you only need to do this for production builds. You shouldn't apply `TerserPlugin` in development because it will hide useful React warnings, and make the builds much slower. -## Profiling Components with the Chrome Performance Tab {#profiling-components-with-the-chrome-performance-tab} - -In the **development** mode, you can visualize how components mount, update, and unmount, using the performance tools in supported browsers. For example: - -
React components in Chrome timeline
- -To do this in Chrome: - -1. Temporarily **disable all Chrome extensions, especially React DevTools**. They can significantly skew the results! - -2. Make sure you're running the application in the development mode. - -3. Open the Chrome DevTools **[Performance](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/timeline-tool)** tab and press **Record**. - -4. Perform the actions you want to profile. Don't record more than 20 seconds or Chrome might hang. - -5. Stop recording. - -6. React events will be grouped under the **User Timing** label. - -For a more detailed walkthrough, check out [this article by Ben Schwarz](https://calibreapp.com/blog/react-performance-profiling-optimization). - -Note that **the numbers are relative so components will render faster in production**. Still, this should help you realize when unrelated UI gets updated by mistake, and how deep and how often your UI updates occur. - -Currently Chrome, Edge, and IE are the only browsers supporting this feature, but we use the standard [User Timing API](https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API) so we expect more browsers to add support for it. - ## Profiling Components with the DevTools Profiler {#profiling-components-with-the-devtools-profiler} `react-dom` 16.5+ and `react-native` 0.57+ provide enhanced profiling capabilities in DEV mode with the React DevTools Profiler. @@ -199,6 +173,11 @@ If you haven't yet installed the React DevTools, you can find them here: > A production profiling bundle of `react-dom` is also available as `react-dom/profiling`. > Read more about how to use this bundle at [fb.me/react-profiling](https://fb.me/react-profiling) +> Note +> +> Before React 17, we use the standard [User Timing API](https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API) to profile components with the chrome performance tab. +> For a more detailed walkthrough, check out [this article by Ben Schwarz](https://calibreapp.com/blog/react-performance-profiling-optimization). + ## Virtualize Long Lists {#virtualize-long-lists} If your application renders long lists of data (hundreds or thousands of rows), we recommended using a technique known as "windowing". This technique only renders a small subset of your rows at any given time, and can dramatically reduce the time it takes to re-render the components as well as the number of DOM nodes created. From 2531ac42f2be26b1e3330eaaff92d68a813ce8fb Mon Sep 17 00:00:00 2001 From: Linh Le Date: Mon, 12 Apr 2021 22:59:59 -0400 Subject: [PATCH 9/9] resolve conflict --- package.json | 6 ------ 1 file changed, 6 deletions(-) diff --git a/package.json b/package.json index 239e07d87..ac897667c 100644 --- a/package.json +++ b/package.json @@ -46,15 +46,9 @@ "mdast-util-to-string": "^1.0.5", "normalize.css": "^8.0.0", "prettier": "^1.7.4", -<<<<<<< HEAD - "prismjs": "^1.23.0", - "react": "^17.0.1", - "react-dom": "^17.0.1", -======= "prismjs": "^1.15.0", "react": "^17.0.2", "react-dom": "^17.0.2", ->>>>>>> 968f09159512b59afd5246a928789ae52592c923 "react-helmet": "^5.2.0", "react-live": "1.8.0-0", "remarkable": "^1.7.1",