diff --git a/content/authors.yml b/content/authors.yml index 5848c65e892..e636436c5ed 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/2020-03-02-react-v16.13.0.md b/content/blog/2020-03-02-react-v16.13.0.md new file mode 100644 index 00000000000..9a724320358 --- /dev/null +++ b/content/blog/2020-03-02-react-v16.13.0.md @@ -0,0 +1,208 @@ +--- +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. + +## 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 +