From fb7a49a59beefed07a773c9ba5e34ea6ac8948b8 Mon Sep 17 00:00:00 2001 From: Rick Hanlon Date: Sun, 20 Mar 2022 13:37:24 -0400 Subject: [PATCH 1/2] [18] Update browser requirements --- .../docs/reference-javascript-environment-requirements.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/content/docs/reference-javascript-environment-requirements.md b/content/docs/reference-javascript-environment-requirements.md index 61854e90b38..b7e68a86cf4 100644 --- a/content/docs/reference-javascript-environment-requirements.md +++ b/content/docs/reference-javascript-environment-requirements.md @@ -6,9 +6,11 @@ category: Reference permalink: docs/javascript-environment-requirements.html --- -React 16 depends on the collection types [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) and [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set). If you support older browsers and devices which may not yet provide these natively (e.g. IE < 11) or which have non-compliant implementations (e.g. IE 11), consider including a global polyfill in your bundled application, such as [core-js](https://github.com/zloirock/core-js). +React 18 depends on modern browser features including [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise), [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) and [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set). -A polyfilled environment for React 16 using core-js to support older browsers might look like: +If you support older browsers and devices which do not provide a native microtask-based Promise implementation such as Internet Explorer, we recommend you stay with React 17, because microtasks cannot be polyfilled without impacting performance in React 18. + +To support older browsers which do not include `Map` or `Set`, consider using [core-js](https://github.com/zloirock/core-js): ```js import 'core-js/es/map'; From 9b7ca11b9bc79d660fcd2b127352398f123ea8cb Mon Sep 17 00:00:00 2001 From: Rick Hanlon Date: Sun, 20 Mar 2022 17:20:53 -0400 Subject: [PATCH 2/2] Update based on feedback --- ...nce-javascript-environment-requirements.md | 27 +++++-------------- 1 file changed, 7 insertions(+), 20 deletions(-) diff --git a/content/docs/reference-javascript-environment-requirements.md b/content/docs/reference-javascript-environment-requirements.md index b7e68a86cf4..c47cd37dc17 100644 --- a/content/docs/reference-javascript-environment-requirements.md +++ b/content/docs/reference-javascript-environment-requirements.md @@ -6,26 +6,13 @@ category: Reference permalink: docs/javascript-environment-requirements.html --- -React 18 depends on modern browser features including [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise), [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) and [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set). +React 18 supports all modern browsers (Edge, Firefox, Chrome, Safari, etc). -If you support older browsers and devices which do not provide a native microtask-based Promise implementation such as Internet Explorer, we recommend you stay with React 17, because microtasks cannot be polyfilled without impacting performance in React 18. +If you support older browsers and devices such as Internet Explorer which do not provide modern browser features natively or have non-compliant implementations, consider including a global polyfill in your bundled application. -To support older browsers which do not include `Map` or `Set`, consider using [core-js](https://github.com/zloirock/core-js): +Here is a list of the modern features React 18 uses: +- [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) +- [`Symbol`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol) +- [`Object.assign`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) -```js -import 'core-js/es/map'; -import 'core-js/es/set'; - -import React from 'react'; -import ReactDOM from 'react-dom/client'; - -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(

Hello, world!

); -``` - -React also depends on `requestAnimationFrame` (even in test environments). -You can use the [raf](https://www.npmjs.com/package/raf) package to shim `requestAnimationFrame`: - -```js -import 'raf/polyfill'; -``` +The correct polyfill for these features depend on your environment. For many users, you can configure your [Browserlist](https://github.com/browserslist/browserslist) settings. For others, you may need to import polyfills like [`core-js`](https://github.com/zloirock/core-js) directly.