diff --git a/content/authors.yml b/content/authors.yml index 5848c65e8..e636436c5 100644 --- a/content/authors.yml +++ b/content/authors.yml @@ -76,6 +76,9 @@ steveluscher: tesseralis: name: Nat Alison url: https://twitter.com/tesseralis +threepointone: + name: Sunil Pai + url: https://twitter.com/threepointone timer: name: Joe Haddad url: https://twitter.com/timer150 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 b6bc9be3d..53871b92f 100644 --- a/content/blog/2015-09-02-new-react-developer-tools.md +++ b/content/blog/2015-09-02-new-react-developer-tools.md @@ -20,8 +20,8 @@ It contains a handful of new features, including: ## Installation {#installation} -Download the new devtools from the [Chrome Web Store](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) and on [Firefox Add-ons](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) for Firefox. If you're developing using React, we highly recommend installing these devtools. +Download the new devtools from the [Chrome Web Store](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi), [Firefox Add-ons](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) for Firefox, and [Microsoft Edge Addons](https://microsoftedge.microsoft.com/addons/detail/gpphkfbcpidddadnkolkpfckpihlkkil) for Edge. If you're developing using React, we highly recommend installing these devtools. If you already have the Chrome extension installed, it should autoupdate within the next week. You can also head to `chrome://extensions` and click "Update extensions now" if you'd like to get the new version today. If you installed the devtools beta, please remove it and switch back to the version from the store to make sure you always get the latest updates and bug fixes. -If you run into any issues, please post them on our [react-devtools GitHub repo](https://github.com/facebook/react-devtools). +If you run into any issues, please post them on the [React GitHub repo](https://github.com/facebook/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 new file mode 100644 index 000000000..a893093c8 --- /dev/null +++ b/content/blog/2020-02-26-react-v16.13.0.md @@ -0,0 +1,209 @@ +--- +title: "React v16.13.0" +author: [threepointone] +redirect_from: + - "blog/2020/03/02/react-v16.13.0.html" +--- + +Today we are releasing React 16.13.0. It contains bugfixes and new deprecation warnings to help prepare for a future major release. + +## New Warnings {#new-warnings} + +### Warnings for some updates during render {#warnings-for-some-updates-during-render} + +A React component should not cause side effects in other components during rendering. + +It is supported to call `setState` during render, but [only for *the same component*](/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops). If you call `setState` during a render on a different component, you will now see a warning: + +``` +Warning: Cannot update a component from inside the function body of a different component. +``` + +**This warning will help you find application bugs caused by unintentional state changes.** In the rare case that you intentionally want to change the state of another component as a result of rendering, you can wrap the `setState` call into `useEffect`. + +### Warnings for conflicting style rules + +When dynamically applying a `style` that contains longhand and shorthand versions of CSS properties, particular combinations of updates can cause inconsistent styling. For example: + +```js +
+ ... +
+``` + +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). + +**React now detects conflicting style rules and logs a warning.** To fix the issue, don't mix shorthand and longhand versions of the same CSS property in the `style` prop. + +### Warnings for some deprecated string refs {#warnings-for-some-deprecated-string-refs} + +[String Refs is an old legacy API](/docs/refs-and-the-dom.html#legacy-api-string-refs) which is discouraged and is going to be deprecated in the future: + +```js + } } ``` diff --git a/content/docs/nav.yml b/content/docs/nav.yml index b19a03933..d6d5645ad 100644 --- a/content/docs/nav.yml +++ b/content/docs/nav.yml @@ -100,8 +100,6 @@ title: SyntheticEvent - id: test-utils title: Narzędzia do testowania - - id: shallow-renderer - title: Renderowanie płytkie - id: test-renderer title: Test Renderer - id: javascript-environment-requirements diff --git a/content/docs/reconciliation.md b/content/docs/reconciliation.md index 1624bfbde..ab8886b8d 100644 --- a/content/docs/reconciliation.md +++ b/content/docs/reconciliation.md @@ -142,7 +142,7 @@ As a last resort, you can pass an item's index in the array as a key. This can w Reorders can also cause issues with component state when indexes are used as keys. Component instances are updated and reused based on their key. If the key is an index, moving an item changes it. As a result, component state for things like uncontrolled inputs can get mixed up and updated in unexpected ways. -[Here](codepen://reconciliation/index-used-as-key) is an example of the issues that can be caused by using indexes as keys on CodePen, and [here](codepen://reconciliation/no-index-used-as-key) is an updated version of the same example showing how not using indexes as keys will fix these reordering, sorting, and prepending issues. +Here is [an example of the issues that can be caused by using indexes as keys](codepen://reconciliation/index-used-as-key) on CodePen, and here is [an updated version of the same example showing how not using indexes as keys will fix these reordering, sorting, and prepending issues](codepen://reconciliation/no-index-used-as-key). ## Tradeoffs {#tradeoffs} diff --git a/content/docs/strict-mode.md b/content/docs/strict-mode.md index 89fe15133..77fab16f2 100644 --- a/content/docs/strict-mode.md +++ b/content/docs/strict-mode.md @@ -32,7 +32,7 @@ Gdy tryb rygorystyczny jest włączony, React tworzy listę wszystkich komponent ![](../images/blog/strict-mode-unsafe-lifecycles-warning.png) -Rozwiązanie _teraz_ problemów zidentyfikowanych przez tryb rygorystyczny ułatwi użycie asynchronicznego renderowania w przyszłych wydaniach Reacta. +Rozwiązanie _teraz_ problemów zidentyfikowanych przez tryb rygorystyczny ułatwi użycie współbieżnego renderowania w przyszłych wydaniach Reacta. ### Ostrzeganiu o użyciu przestarzałego API tekstowych referencji {#warning-about-legacy-string-ref-api-usage} @@ -83,7 +83,7 @@ Zasadniczo, React działa w dwóch fazach: * Faza **renderowania** określa, jakie zmiany należy zaaplikować w np. drzewie DOM. Podczas tej fazy React wywołuje metodę `render` i porównuje jej wynik z poprzednim. * Faza **aktualizacji** następuje wtedy, gdy React aplikuje zmiany. (W przypadku React DOM następuje to, gdy React dodaje, aktualizuje i usuwa węzły DOM.) Podczas tej fazy React wywołuje również metody cyklu życia komponentu tj. `componentDidMount` czy `componentDidUpdate`. -Faza aktualizacji jest zazwyczaj bardzo szybka, jednak renderowanie może być powolne. Z tego powodu nadchodzący tryb asynchroniczny (który nie jest jeszcze domyślnie włączony), rozbija pracę związaną z renderowaniem na części, zatrzymując i wznawiając pracę, aby uniknąć blokowania przeglądarki. To oznacza, że React może wywołać metody cyklu życia w fazie renderowania więcej niż raz przed aktualizacją lub może je wywołać nawet bez aktualizacji (z powodu błędu lub przerwania o wyższym priorytecie). +Faza aktualizacji jest zazwyczaj bardzo szybka, jednak renderowanie może być powolne. Z tego powodu nadchodzący tryb współbieżny (który nie jest jeszcze domyślnie włączony), rozbija pracę związaną z renderowaniem na części, zatrzymując i wznawiając pracę, aby uniknąć blokowania przeglądarki. To oznacza, że React może wywołać metody cyklu życia w fazie renderowania więcej niż raz przed aktualizacją lub może je wywołać nawet bez aktualizacji (z powodu błędu lub przerwania o wyższym priorytecie). Cykl życia fazy renderowania odnosi się do poniższych metod z komponentu klasowego: * `constructor` diff --git a/content/images/blog/react-v16.13.0/hydration-warning-after.png b/content/images/blog/react-v16.13.0/hydration-warning-after.png new file mode 100644 index 000000000..92b6c9919 Binary files /dev/null and b/content/images/blog/react-v16.13.0/hydration-warning-after.png differ diff --git a/content/images/blog/react-v16.13.0/hydration-warning-before.png b/content/images/blog/react-v16.13.0/hydration-warning-before.png new file mode 100644 index 000000000..381ab8677 Binary files /dev/null and b/content/images/blog/react-v16.13.0/hydration-warning-before.png differ diff --git a/content/versions.yml b/content/versions.yml index 22a95aa48..2fd124a5f 100644 --- a/content/versions.yml +++ b/content/versions.yml @@ -1,3 +1,5 @@ +- title: '16.13.0' + changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#16130-february-26-2020 - title: '16.12.0' changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#16120-november-14-2019 - title: '16.11' diff --git a/package.json b/package.json index 15e12b0e4..bbf3c0a75 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": "^16.12.0", - "react-dom": "^16.12.0", + "react": "^16.13.0", + "react-dom": "^16.13.0", "react-helmet": "^5.2.0", "react-live": "1.8.0-0", "remarkable": "^1.7.1", diff --git a/src/site-constants.js b/src/site-constants.js index ba35df700..b3e967c36 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://pl.reactjs.org'; -const version = '16.12.0'; +const version = '16.13.0'; 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 fe8a5a65b..bfea8a90a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10241,15 +10241,15 @@ react-dev-utils@^4.2.1: strip-ansi "3.0.1" text-table "0.2.0" -react-dom@^16.12.0: - version "16.12.0" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.12.0.tgz#0da4b714b8d13c2038c9396b54a92baea633fe11" - integrity sha512-LMxFfAGrcS3kETtQaCkTKjMiifahaMySFDn71fZUNpPHZQEzmk/GiAeIT8JSOrHB23fnuCOMruL2a8NYlw+8Gw== +react-dom@^16.13.0: + version "16.13.0" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.0.tgz#cdde54b48eb9e8a0ca1b3dc9943d9bb409b81866" + integrity sha512-y09d2c4cG220DzdlFkPTnVvGTszVvNpC73v+AaLGLHbkpy3SSgvYq8x0rNwPJ/Rk/CicTNgk0hbHNw1gMEZAXg== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" prop-types "^15.6.2" - scheduler "^0.18.0" + scheduler "^0.19.0" react-error-overlay@^3.0.0: version "3.0.0" @@ -10303,10 +10303,10 @@ react-side-effect@^1.1.0: exenv "^1.2.1" shallowequal "^1.0.1" -react@^16.12.0: - version "16.12.0" - resolved "https://registry.yarnpkg.com/react/-/react-16.12.0.tgz#0c0a9c6a142429e3614834d5a778e18aa78a0b83" - integrity sha512-fglqy3k5E+81pA8s+7K0/T3DBCF0ZDOher1elBFzF7O6arXJgzyu/FW+COxFvAWXJoJN9KIZbT2LXlukwphYTA== +react@^16.13.0: + version "16.13.0" + resolved "https://registry.yarnpkg.com/react/-/react-16.13.0.tgz#d046eabcdf64e457bbeed1e792e235e1b9934cf7" + integrity sha512-TSavZz2iSLkq5/oiE7gnFzmURKZMltmi193rm5HEoUDAXpzT9Kzw6oNZnGoai/4+fUnm7FqS5dwgUL34TujcWQ== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" @@ -11019,10 +11019,10 @@ sax@>=0.6.0, sax@^1.2.4, sax@~1.2.1, sax@~1.2.4: resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9" integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw== -scheduler@^0.18.0: - version "0.18.0" - resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.18.0.tgz#5901ad6659bc1d8f3fdaf36eb7a67b0d6746b1c4" - integrity sha512-agTSHR1Nbfi6ulI0kYNK0203joW2Y5W4po4l+v03tOoiJKpTBbxpNhWDvqc/4IcOw+KLmSiQLTasZ4cab2/UWQ== +scheduler@^0.19.0: + version "0.19.0" + resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.0.tgz#a715d56302de403df742f4a9be11975b32f5698d" + integrity sha512-xowbVaTPe9r7y7RUejcK73/j8tt2jfiyTednOvHbA8JoClvMYCp+r8QegLwK/n8zWQAtZb1fFnER4XLBZXrCxA== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1"