An Introduction to React Latest Version
React Latest Version 16.13.0 is the latest. Update in the line of the React.js. software. The new update contains bug fixes and new deprecation warnings to help prepare for any future major releases.
New Warnings to React Latest Version-
There are a few warnings for some updates during render.
It is essential that a react component does not cause side effects in other components during rendering.
It is supported to call setState during render but only for the same component. If the setState is called during a render on a different component, the below warning will now appear:
Warning: Cannot update a component from inside the function body of a different component.
This warning allows us to find unintentional application bugs caused by state changes. In the rare and extreme case that you do intentionally want to change the state of another component as a result of rendering, you can do so by wrapping the setState call into useEffect.
Warnings for conflicting style rules-
When dynamically applying a style that contains longhand and shorthand versions of CSS properties a particular few combinations of updates can cause inconsistent styling. For example:
<div style={toggle ?
{ background: ‘blue’, backgroundColor: ‘red’ } :
{ backgroundColor: ‘red’ }
}>
…
</div>
It is possible that you expect this <div> to always have a red background, no matter the value of toggle, but this is not necessary.
However, on alternating the value of toggle between true and false, the background colors start as red the goes on to alternate between transparent and blue.
React now detects conflicting style rules and logs a warning.
In order to fix this issue, do not mix shorthand and longhand versions of the same CSS property in the style prop.
Warnings for some deprecated string refs-
String Refs is an old legacy API which is discouraged and is going to be deprecated in the future:
<Button ref=”myRef“ />
It is important that we note that String Refs and refs in general are not the same. Refs remain fully supported in React js.
In the future, an automated script will be provided to help migrate away from String Refs. However, in some rare cases, the migration does not happen automatically. This release adds a new warning specifically for those cases in advance of deprecation.
For example, it will fire if you use String Refs together with the render prop pattern.
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>
);
}
}
Codes like the one above often indicate bugs. You might expect the ref to be available on ClassParent, but instead it gets placed on ClassWithRenderProp.
You most likely will not have a code like this. If you do have it, and it is intentional, convert it to React.createRef() instead:
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 must have the babel-plugin-transform-react-jsx-self installed in your Babel plugins.
Deprecating React.createFactory
React.createFactory is a legacy helper for creating React elements. This release adds a deprecation warning to the method. It will be removed in the future major version.
Replace usages of React.createFactory with regular JSX. Alternatively, you can copy-paste the code given below. It has the same effect.
let createFactory = type => React.createElement.bind(null, type);
Deprecating ReactDOM.unstable_createPortal in favor of ReactDOM.createPortal
When React 16 was released, create portal 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 create portal directly instead of unstable_createPortal. It has exactly the same signature.
Other notable improvements include-
1) Component stacks in hydration warnings- React adds component stacks to its development warnings, enabling developers to isolate bugs and debug their programs efficiently. This release adds component stacks to a number of development warnings that did not previously have them. As an example, consider this hydration warning from the previous versions-
While it is pointing out an error in the code, it is not clear whether the error exists and how to go about in solving it. This release adds a component stack to this warning, which makes it look like this:
This makes it clear where the problem lies and lets you locate and solve the bug faster.
2) 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 behavior to shouldComponentUpdate. This should not affect most of the code. To fix the side effects in shouldComponentUpdate, 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 does not trigger on the use of the disable <button> elements.
- ReactDOM was missing a version export since we published v16. This release adds the feature back. We do not recommend using it in your application logic, but it is useful while debugging issues with mismatching/ multiple versions of ReactDOM on the same page.
Installation-
React
React v16.13.0 is available on the npm registry.
To install React 16 with Yarn run:
yarn add react@^16.13.0 react-dom@^16.13.0
To install React 16 with npm, run:
npm install –save react@^16.13.0 react-dom@^16.13.0
UMD builds of React via a CDN:
<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>
Changelog
React
– Warn when a string ref is used in a manner that’s not amenable to a future condemned
– Deprecate React.createFactory()
React DOM-
– Warn when changes in style may cause an unexpected collision
– Warn when a function component is updated during another component’s render phase
– Deprecate unstable_createPortal
– Fix onMouseEnter being fired on disabled buttons
– Call shouldComponentUpdate twice when developing in StrictMode
– Add version property to ReactDOM
– Don’t call toString() of dangerouslySetInnerHTML
– Show component stacks in more warnings