Blogpost for v16.13.0

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

content/blog/2020-03-02-react-v16.13.0.md

@@ -0,0 +1,173 @@
+---
+title: "React v16.13.0"
+author: [threepointone]
+---
+
+Today we are releasing React 16.13.0. It contains bugfixes and new deprecation warnings to help prepare for a future major release.
+
+### 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. We do support a local update during a render to [derive state from props](/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops). However, this only works on the same Component/Hook. If you call it during a render on a different component, this will now issue a warning.
+
+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 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. This release adds a new warning to some unusual edge cases that can't be fixed automatically. For example using a string ref in a render prop:
+
+```jsx
+class ClassWithRenderProp extends React.Component {
+  componentDidMount() {
+    something(this.refs.foo);
+  }
+  render() {
+    return this.props.children();
+  }
+}
+
+class ClassParent extends React.Component {
+  render() {
+    return (
+      <ClassWithRenderProp>{() => <View ref="foo" />}</ClassWithRenderProp>
+    );
+  }
+}
+```
+
+You most likely don't have code like this but if you do, we recommend that you convert it to [`React.createRef()`](/docs/refs-and-the-dom.html#creating-refs) instead:
+
+```jsx
+class ClassWithRenderProp extends React.Component {
+  foo = React.createRef();
+  componentDidMount() {
+    something(this.foo.current);
+  }
+  render() {
+    return this.props.children(this.foo);
+  }
+}
+
+class ClassParent extends React.Component {
+  render() {
+    return (
+      <ClassWithRenderProp>{foo => <View ref={foo} />}</ClassWithRenderProp>
+    );
+  }
+}
+```
+
+In the future, we will provide an automated script (a “codemod”) to migrate away from String Refs. We are enabling this warning first so that you can fix the cases that can’t be safely converted by the codemod.
+
+> To get 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, and it must _only_ be enabled in development mode. 
+> 
+> If you use the “react” preset you should already have this installed by default!
+
+### Renaming `ReactDOM.unstable_createPortal` to `ReactDOM.createPortal` {#renaming-reactdomunstable_createportal-to-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. It has exactly the same signature.
+
+### 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, and 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);
+```
+
+### Component stacks in more warnings {#component-stacks-in-more-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 in 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:
+
+- When dynamically applying a `style` that contains longhand and shorthand versions, particular combinations of updates can cause inconsistent styles for that element. For example: 
+
+  ```jsx
+  <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`, you'll be surprised to see the background color start as `red`, then alternate between `transparent` and `blue` ([Try this example](https://codesandbox.io/s/suspicious-sunset-g3jub) on codesandbox). React now detects this pattern and logs a warning. The workaround is to avoid mixing both shorthand and longhand versions of a style for the same value. You can find more details on this React issue - [#6348](https://github.com/facebook/react/issues/6348)
+
+
+- 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))
+- Flush all passive effect (`useEffect`) destroy functions before calling subsequent create functions ([@bvaughn](https://github.com/bvaughn) in [#17925](https://github.com/facebook/react/pull/17925), [#17947](https://github.com/facebook/react/pull/17947))
+- 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))

content/versions.yml

@@ -1,3 +1,5 @@
+- title: '16.13.0'
+  changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#16130-march-2-2020
 - title: '16.12.0'
   changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#16120-november-14-2019
 - title: '16.11'

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 = '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};