Skip to content

Sync with reactjs.org @ 2ab1ca50 #188

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 18 commits into from
Mar 3, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions content/authors.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions content/blog/2015-09-02-new-react-developer-tools.md
Original file line number Diff line number Diff line change
Expand Up @@ -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).
209 changes: 209 additions & 0 deletions content/blog/2020-02-26-react-v16.13.0.md
Original file line number Diff line number Diff line change
@@ -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
<div style={toggle ?
{ background: 'blue', backgroundColor: 'red' } :
{ backgroundColor: 'red' }
}>
...
</div>
```

You might expect this `<div>` to always have a red background, no matter the value of `toggle`. However, on alternating the value of `toggle` between `true` and `false`, the background color start as `red`, then alternates between `transparent` and `blue`, [as you can see in this demo](https://codesandbox.io/s/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
<Button ref="myRef" />
```

(Don't confuse String Refs with refs in general, which **remain fully supported**.)

In the future, we will provide an automated script (a "codemod") to migrate away from String Refs. However, some rare cases can't be migrated automatically. This release adds a new warning **only for those cases** in advance of the deprecation.

For example, it will fire if you use String Refs together with the Render Prop pattern:

```jsx
class ClassWithRenderProp extends React.Component {
componentDidMount() {
doSomething(this.refs.myRef);
}
render() {
return this.props.children();
}
}

class ClassParent extends React.Component {
render() {
return (
<ClassWithRenderProp>
{() => <Button ref="myRef" />}
</ClassWithRenderProp>
);
}
}
```

Code like this often indicates bugs. (You might expect the ref to be available on `ClassParent`, but instead it gets placed on `ClassWithRenderProp`).

**You most likely don't have code like this**. If you do and it is intentional, convert it to [`React.createRef()`](/docs/refs-and-the-dom.html#creating-refs) instead:

```jsx
class ClassWithRenderProp extends React.Component {
myRef = React.createRef();
componentDidMount() {
doSomething(this.myRef.current);
}
render() {
return this.props.children(this.myRef);
}
}

class ClassParent extends React.Component {
render() {
return (
<ClassWithRenderProp>
{myRef => <Button ref={myRef} />}
</ClassWithRenderProp>
);
}
}
```

> Note
>
> To see this warning, you need to have the [babel-plugin-transform-react-jsx-self](https://babeljs.io/docs/en/babel-plugin-transform-react-jsx-self) installed in your Babel plugins. It must _only_ be enabled in development mode.
>
> If you use Create React App or have the "react" preset with Babel 7+, you already have this plugin installed by default.
### Deprecating `React.createFactory` {#deprecating-reactcreatefactory}

[`React.createFactory`](/docs/react-api.html#createfactory) is a legacy helper for creating React elements. This release adds a deprecation warning to the method. It will be removed in a future major version.

Replace usages of `React.createFactory` with regular JSX. Alternately, you can copy and paste this one-line helper or publish it as a library:

```jsx
let createFactory = type => React.createElement.bind(null, type);
```

It does exactly the same thing.

### Deprecating `ReactDOM.unstable_createPortal` in favor of `ReactDOM.createPortal` {#deprecating-reactdomunstable_createportal-in-favor-of-reactdomcreateportal}

When React 16 was released, `createPortal` became an officially supported API.

However, we kept `unstable_createPortal` as a supported alias to keep the few libraries that adopted it working. We are now deprecating the unstable alias. Use `createPortal` directly instead of `unstable_createPortal`. It has exactly the same signature.

## Other Improvements {#other-improvements}

### Component stacks in hydration warnings {#component-stacks-in-hydration-warnings}

React adds component stacks to its development warnings, enabling developers to isolate bugs and debug their programs. This release adds component stacks to a number of development warnings that didn't previously have them. As an example, consider this hydration warning from the previous versions:

![A screenshot of the console warning, simply stating the nature of the hydration mismatch: "Warning: Expected server HTML to contain a matching div in div."](../images/blog/react-v16.13.0/hydration-warning-before.png)

While it's pointing out an error with the code, it's not clear where the error exists, and what to do next. This release adds a component stack to this warning, which makes it look like this:

![A screenshot of the console warning, stating the nature of the hydration mismatch, but also including a component stack : "Warning: Expected server HTML to contain a matching div in div, in div (at pages/index.js:4)..."](../images/blog/react-v16.13.0/hydration-warning-after.png)

This makes it clear where the problem is, and lets you locate and fix the bug faster.

### Notable bugfixes {#notable-bugfixes}

This release contains a few other notable improvements:

- In Strict Development Mode, React calls lifecycle methods twice to flush out any possible unwanted side effects. This release adds that behaviour to `shouldComponentUpdate`. This shouldn't affect most code, unless you have side effects in `shouldComponentUpdate`. To fix this, move the code with side effects into `componentDidUpdate`.

- In Strict Development Mode, the warnings for usage of the legacy context API didn't include the stack for the component that triggered the warning. This release adds the missing stack to the warning.

- `onMouseEnter` now doesn't trigger on disabled `<button>` elements.

- ReactDOM was missing a `version` export since we published v16. This release adds it back. We don't recommend using it in your application logic, but it's useful when debugging issues with mismatching / multiple versions of ReactDOM on the same page.

We’re thankful to all the contributors who helped surface and fix these and other issues. You can find the full changelog [below](#changelog).

## Installation {#installation}

### React {#react}

React v16.13.0 is available on the npm registry.

To install React 16 with Yarn, run:

```bash
yarn add react@^16.13.0 react-dom@^16.13.0
```

To install React 16 with npm, run:

```bash
npm install --save react@^16.13.0 react-dom@^16.13.0
```

We also provide UMD builds of React via a CDN:

```html
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
```

Refer to the documentation for [detailed installation instructions](/docs/installation.html).

## Changelog {#changelog}

### React {#react}

- Warn when a string ref is used in a manner that's not amenable to a future codemod ([@lunaruan](https://github.com/lunaruan) in [#17864](https://github.com/facebook/react/pull/17864))
- Deprecate `React.createFactory()` ([@trueadm](https://github.com/trueadm) in [#17878](https://github.com/facebook/react/pull/17878))

### React DOM {#react-dom}

- Warn when changes in `style` may cause an unexpected collision ([@sophiebits](https://github.com/sophiebits) in [#14181](https://github.com/facebook/react/pull/14181), [#18002](https://github.com/facebook/react/pull/18002))
- Warn when a function component is updated during another component's render phase ([@acdlite](<(https://github.com/acdlite)>) in [#17099](https://github.com/facebook/react/pull/17099))
- Deprecate `unstable_createPortal` ([@trueadm](https://github.com/trueadm) in [#17880](https://github.com/facebook/react/pull/17880))
- Fix `onMouseEnter` being fired on disabled buttons ([@AlfredoGJ](https://github.com/AlfredoGJ) in [#17675](https://github.com/facebook/react/pull/17675))
- Call `shouldComponentUpdate` twice when developing in `StrictMode` ([@bvaughn](https://github.com/bvaughn) in [#17942](https://github.com/facebook/react/pull/17942))
- Add `version` property to ReactDOM ([@ealush](https://github.com/ealush) in [#15780](https://github.com/facebook/react/pull/15780))
- Don't call `toString()` of `dangerouslySetInnerHTML` ([@sebmarkbage](https://github.com/sebmarkbage) in [#17773](https://github.com/facebook/react/pull/17773))
- Show component stacks in more warnings ([@gaearon](https://github.com/gaearon) in [#17922](https://github.com/facebook/react/pull/17922), [#17586](https://github.com/facebook/react/pull/17586))

### Concurrent Mode (Experimental) {#concurrent-mode-experimental}

- Warn for problematic usages of `ReactDOM.createRoot()` ([@trueadm](https://github.com/trueadm) in [#17937](https://github.com/facebook/react/pull/17937))
- Remove `ReactDOM.createRoot()` callback params and added warnings on usage ([@bvaughn](https://github.com/bvaughn) in [#17916](https://github.com/facebook/react/pull/17916))
- Don't group Idle/Offscreen work with other work ([@sebmarkbage](https://github.com/sebmarkbage) in [#17456](https://github.com/facebook/react/pull/17456))
- Adjust `SuspenseList` CPU bound heuristic ([@sebmarkbage](https://github.com/sebmarkbage) in [#17455](https://github.com/facebook/react/pull/17455))
- Add missing event plugin priorities ([@trueadm](https://github.com/trueadm) in [#17914](https://github.com/facebook/react/pull/17914))
- Fix `isPending` only being true when transitioning from inside an input event ([@acdlite](https://github.com/acdlite) in [#17382](https://github.com/facebook/react/pull/17382))
- Fix `React.memo` components dropping updates when interrupted by a higher priority update ([@acdlite](<(https://github.com/acdlite)>) in [#18091](https://github.com/facebook/react/pull/18091))
- Don't warn when suspending at the wrong priority ([@gaearon](https://github.com/gaearon) in [#17971](https://github.com/facebook/react/pull/17971))
- Fix a bug with rebasing updates ([@acdlite](https://github.com/acdlite) and [@sebmarkbage](https://github.com/sebmarkbage) in [#17560](https://github.com/facebook/react/pull/17560), [#17510](https://github.com/facebook/react/pull/17510), [#17483](https://github.com/facebook/react/pull/17483), [#17480](https://github.com/facebook/react/pull/17480))
2 changes: 1 addition & 1 deletion content/community/conferences.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ February 27 & 28, 2020 in Sydney, Australia
### ReactConf Japan 2020 {#reactconfjp-2020}
March 21, 2020 in Tokyo, Japan

[Website](https://reactconf.jp/) - [Twitter](https://twitter.com/reactjapanconf)
[Website](https://reactconf.jp/) - [Twitter](https://twitter.com/reactjp)

### Reactathon 2020 {#reactathon-2020}
March 30 - 31, 2020 in San Francisco, CA
Expand Down
3 changes: 3 additions & 0 deletions content/community/meetups.md
Original file line number Diff line number Diff line change
Expand Up @@ -144,6 +144,9 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
## Switzerland {#switzerland}
* [Zurich](https://www.meetup.com/Zurich-ReactJS-Meetup/)

## Turkey {#turkey}
* [Istanbul](https://www.meetup.com/ReactJS-Istanbul/)

## Ukraine {#ukraine}
* [Kyiv](https://www.meetup.com/Kyiv-ReactJS-Meetup)

Expand Down
2 changes: 1 addition & 1 deletion content/docs/accessibility.md
Original file line number Diff line number Diff line change
Expand Up @@ -382,7 +382,7 @@ Są to "skrzynki narzędziowe" wypełnione atrybutami HTML, które są w pełni
Każdy typ widżetu ma określone wzorce i zarówno użytkownicy, jak i przeglądarki oczekują, że będzie działał w określony sposób.

- [Dobre praktyki WAI-ARIA - Wzorce projektowe i widżety](https://www.w3.org/TR/wai-aria-practices/#aria_ex)
- [Heydon Pickering - ARIA w praktyce](https://heydonworks.com/practical_aria_examples/)
- [Heydon Pickering - ARIA w praktyce](https://heydonworks.com/article/practical-aria-examples/)
- [Inclusive Components](https://inclusive-components.design/)

## Inne punkty do rozważenia {#other-points-for-consideration}
Expand Down
2 changes: 1 addition & 1 deletion content/docs/concurrent-mode-patterns.md
Original file line number Diff line number Diff line change
Expand Up @@ -507,7 +507,7 @@ function ProfileTrivia({ resource }) {

**[Try it on CodeSandbox](https://codesandbox.io/s/focused-mountain-uhkzg)**

If you press "Open Profile" now, you can tell something is wrong. It takes whole seven seconds to make the transition now! This is because our trivia API is too slow. Let's say we can't make the API faster. How can we improve the user experience with this constraint?
If you press "Open Profile" now, you can tell something is wrong. It takes a whole seven seconds to make the transition now! This is because our trivia API is too slow. Let's say we can't make the API faster. How can we improve the user experience with this constraint?

If we don't want to stay in the Pending state for too long, our first instinct might be to set `timeoutMs` in `useTransition` to something smaller, like `3000`. You can try this [here](https://codesandbox.io/s/practical-kowalevski-kpjg4). This lets us escape the prolonged Pending state, but we still don't have anything useful to show!

Expand Down
2 changes: 1 addition & 1 deletion content/docs/error-boundaries.md
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@ class MyComponent extends React.Component {
if (this.state.error) {
return <h1>Caught an error.</h1>
}
return <div onClick={this.handleClick}>Click Me</div>
return <button onClick={this.handleClick}>Click Me</button>
}
}
```
Expand Down
2 changes: 0 additions & 2 deletions content/docs/nav.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion content/docs/reconciliation.md
Original file line number Diff line number Diff line change
Expand Up @@ -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}

Expand Down
4 changes: 2 additions & 2 deletions content/docs/strict-mode.md
Original file line number Diff line number Diff line change
Expand Up @@ -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}

Expand Down Expand Up @@ -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`
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions content/versions.yml
Original file line number Diff line number Diff line change
@@ -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'
Expand Down
Loading