Today we are releasing React . .0. It contains bugfixes and new deprecation warnings to help prepare for a future major release.
) New Warnings
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 . 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 .
When dynamically applying a style that contains longhand and shorthand versions of CSS properties, particular combinations of updates can cause inconsistent styling. For example:
( style
=
({ toggle
{(background ): ‘blue’
, (backgroundColor :
‘red’ } : {backgroundColor : ‘red’
}
>
…
( (div
>
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 .
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.
String Refs is an old legacy API which is discouraged and is going to be deprecated in the future:
(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:
(class (ClassWithRenderProp) (extends) (React
Component
{{ componentDidMount (
)
({ doSomething ( (this refs
(myRef) )
;
render (
)
({
return
this
(props)
children (
) ;
class (ClassParent (extends) (React) . (Component) {
render (
)
({
return (
({) (
=>
(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 () 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 (
({
myRef)==( Button ref
(
({
myRef) }
/>
}
( ClassWithRenderProp
>
Note
To see this warning, you need to have the 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
React.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:
(let (createFactory
=(type
=> React (createElement
bind
(
null
, (type
) ;
It does exactly the same thing.
Deprecating ReactDOM.unstable_createPortal in favor of ReactDOM. createPortal
When React 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 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:
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:
This makes it clear where the problem is, and lets you locate and fix the bug faster.
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 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 use 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 disabled elements.
-
ReactDOM was missing a version export since we published v 41. 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.
-
. Installation React
React v . . 0 is available on the npm registry.
To install React 41 with Yarn, run:
yarn add react @ ^ . . 0 react-dom @ ^ . (0
)
To install React 41 with npm, run:
npm install
–save react @ ^
0 react- dom @ ^ . .0
We also provide UMD builds of React via a CDN:
( script
(crossorigin) (src)
=
https://unpkg.com/react@ / umd / react.production.min.js
>
/
script () src
“
https: // unpkg.com/react-dom@ / umd / react-dom.production.min.js
>
/
script ()
Refer to the documentation for (detailed installation instructions) .
Changelog React (Warn when a string ref is used in a manner that’s not amenable to a future codemod (
@ lunaruan
in (#) (Deprecate React.createFactory () ( @ trueadm in (#) )
shouldComponentUpdate twice when developing in (StrictMode) () @ bvaughn in (#) ) (Add (version) (property to ReactDOM ( @ ealush (in) (#)
Don’t call toString () of dangerouslySetInnerHTML (
@ sebmarkbage in
(Show component stacks in more warnings) @ gaearon in (#) , (#)
callback params and added warnings on usage ( @ bvaughn (in
# )
Don't group Idle / Offscreen work with other work ( @ sebmarkbage in (#) (Adjust) (SuspenseList) (CPU bound heuristic) @sebmarkbage in # )
- (Add missing event pluginident) @ trueadm in #
Fix
isPending
only being true when transitioning from inside an input event ( @ acdlite in (#)
Fix React.memo components dropping updates when interrupted by a higher priority update ( @ acdlite in #
Don't warn when suspending at the wrong priority ( @ gaearon in (#) )
Fix a bug with rebasing updates ( @ acdlite and @ sebmarkbage in (#) , (#) , # , (#) () ) Read More
{(background ): ‘blue’
, (backgroundColor :
‘red’ } : {backgroundColor : ‘red’
}
>
…
( (div
>
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 .
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.
String Refs is an old legacy API which is discouraged and is going to be deprecated in the future:
(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:
(class (ClassWithRenderProp) (extends) (React
Component
{{ componentDidMount (
)
({ doSomething ( (this refs
(myRef) )
;
render (
)
({
return
this
(props)
children (
) ;
class (ClassParent (extends) (React) . (Component) {
render (
)
({
return (
({) (
=>
(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 () 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 (
({
myRef)==( Button ref
(
({
myRef) }
/>
}
( ClassWithRenderProp
>
Note
To see this warning, you need to have the 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
React.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:
(let (createFactory
=(type
=> React (createElement
bind
(
null
, (type
) ;
It does exactly the same thing.
Deprecating ReactDOM.unstable_createPortal in favor of ReactDOM. createPortal
When React 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 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:
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:
This makes it clear where the problem is, and lets you locate and fix the bug faster.
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 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 use 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 disabled elements.
-
ReactDOM was missing a version export since we published v 41. 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.
-
. Installation React
React v . . 0 is available on the npm registry.
To install React 41 with Yarn, run:
yarn add react @ ^ . . 0 react-dom @ ^ . (0
)
To install React 41 with npm, run:
npm install
–save react @ ^
0 react- dom @ ^ . .0
We also provide UMD builds of React via a CDN:
( script
(crossorigin) (src)
=
https://unpkg.com/react@ / umd / react.production.min.js
>
/
script () src
“
https: // unpkg.com/react-dom@ / umd / react-dom.production.min.js
>
/
script ()
Refer to the documentation for (detailed installation instructions) .
Changelog React (Warn when a string ref is used in a manner that’s not amenable to a future codemod (
@ lunaruan
in (#) (Deprecate React.createFactory () ( @ trueadm in (#) )
shouldComponentUpdate twice when developing in (StrictMode) () @ bvaughn in (#) ) (Add (version) (property to ReactDOM ( @ ealush (in) (#)
Don’t call toString () of dangerouslySetInnerHTML (
@ sebmarkbage in
(Show component stacks in more warnings) @ gaearon in (#) , (#)
callback params and added warnings on usage ( @ bvaughn (in
# )
Don't group Idle / Offscreen work with other work ( @ sebmarkbage in (#) (Adjust) (SuspenseList) (CPU bound heuristic) @sebmarkbage in # )
- (Add missing event pluginident) @ trueadm in #
Fix
isPending
only being true when transitioning from inside an input event ( @ acdlite in (#)
Fix React.memo components dropping updates when interrupted by a higher priority update ( @ acdlite in #
Don't warn when suspending at the wrong priority ( @ gaearon in (#) )
Fix a bug with rebasing updates ( @ acdlite and @ sebmarkbage in (#) , (#) , # , (#) () ) Read More
>
…
( (div
>
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 .
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.
String Refs is an old legacy API which is discouraged and is going to be deprecated in the future:
(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:
(class (ClassWithRenderProp) (extends) (React
Component
{{ componentDidMount (
)
({ doSomething ( (this refs
(myRef) )
;
render (
)
({
return
this
(props)
children (
) ;
class (ClassParent (extends) (React) . (Component) {
render (
)
({
return (
({) (
=>
(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 () 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 (
({
myRef)==( Button ref
(
({
myRef) }
/>
}
( ClassWithRenderProp
>
Note
To see this warning, you need to have the 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
React.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:
(let (createFactory
=(type
=> React (createElement
bind
(
null
, (type
) ;
It does exactly the same thing.
Deprecating ReactDOM.unstable_createPortal in favor of ReactDOM. createPortal
When React 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 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:
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:
This makes it clear where the problem is, and lets you locate and fix the bug faster.
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 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 use 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 disabled elements.
-
ReactDOM was missing a version export since we published v 41. 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.
-
. Installation React
React v . . 0 is available on the npm registry.
To install React 41 with Yarn, run:
yarn add react @ ^ . . 0 react-dom @ ^ . (0
)
To install React 41 with npm, run:
npm install
–save react @ ^
0 react- dom @ ^ . .0
We also provide UMD builds of React via a CDN:
( script
(crossorigin) (src)
=
https://unpkg.com/react@ / umd / react.production.min.js
>
/
script () src
“
https: // unpkg.com/react-dom@ / umd / react-dom.production.min.js
>
/
script ()
Refer to the documentation for (detailed installation instructions) .
Changelog React (Warn when a string ref is used in a manner that’s not amenable to a future codemod (
@ lunaruan
in (#) (Deprecate React.createFactory () ( @ trueadm in (#) )
shouldComponentUpdate twice when developing in (StrictMode) () @ bvaughn in (#) ) (Add (version) (property to ReactDOM ( @ ealush (in) (#)
Don’t call toString () of dangerouslySetInnerHTML (
@ sebmarkbage in
(Show component stacks in more warnings) @ gaearon in (#) , (#)
callback params and added warnings on usage ( @ bvaughn (in
# )
Don't group Idle / Offscreen work with other work ( @ sebmarkbage in (#) (Adjust) (SuspenseList) (CPU bound heuristic) @sebmarkbage in # )
- (Add missing event pluginident) @ trueadm in #
Fix
isPending
only being true when transitioning from inside an input event ( @ acdlite in (#)
Fix React.memo components dropping updates when interrupted by a higher priority update ( @ acdlite in #
Don't warn when suspending at the wrong priority ( @ gaearon in (#) )
Fix a bug with rebasing updates ( @ acdlite and @ sebmarkbage in (#) , (#) , # , (#) () ) Read More
( (div
>
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 .
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.
String Refs is an old legacy API which is discouraged and is going to be deprecated in the future:
(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:
(class (ClassWithRenderProp) (extends) (React
Component
{{ componentDidMount (
)
({ doSomething ( (this refs
(myRef) )
;
render (
)
({
return
this
(props)
children (
) ;
class (ClassParent (extends) (React) . (Component) {
render (
)
({
return (
({) (
=>
(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 () 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 (
({
myRef)==( Button ref
(
({
myRef) }
/>
}
( ClassWithRenderProp
>
Note
To see this warning, you need to have the 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
React.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:
(let (createFactory
=(type
=> React (createElement
bind
(
null
, (type
) ;
It does exactly the same thing.
Deprecating ReactDOM.unstable_createPortal in favor of ReactDOM. createPortal
When React 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 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:
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:
This makes it clear where the problem is, and lets you locate and fix the bug faster.
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 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 use 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 disabled elements.
-
ReactDOM was missing a version export since we published v 41. 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.
-
. Installation React
React v . . 0 is available on the npm registry.
To install React 41 with Yarn, run:
yarn add react @ ^ . . 0 react-dom @ ^ . (0
)
To install React 41 with npm, run:
npm install
–save react @ ^
0 react- dom @ ^ . .0
We also provide UMD builds of React via a CDN:
( script
(crossorigin) (src)
=
https://unpkg.com/react@ / umd / react.production.min.js
>
/
script () src
“
https: // unpkg.com/react-dom@ / umd / react-dom.production.min.js
>
/
script ()
Refer to the documentation for (detailed installation instructions) .
Changelog React (Warn when a string ref is used in a manner that’s not amenable to a future codemod (
@ lunaruan
in (#) (Deprecate React.createFactory () ( @ trueadm in (#) )
shouldComponentUpdate twice when developing in (StrictMode) () @ bvaughn in (#) ) (Add (version) (property to ReactDOM ( @ ealush (in) (#)
Don’t call toString () of dangerouslySetInnerHTML (
@ sebmarkbage in
(Show component stacks in more warnings) @ gaearon in (#) , (#)
callback params and added warnings on usage ( @ bvaughn (in
# )
Don't group Idle / Offscreen work with other work ( @ sebmarkbage in (#) (Adjust) (SuspenseList) (CPU bound heuristic) @sebmarkbage in # )
- (Add missing event pluginident) @ trueadm in #
Fix
isPending
only being true when transitioning from inside an input event ( @ acdlite in (#)
Fix React.memo components dropping updates when interrupted by a higher priority update ( @ acdlite in #
Don't warn when suspending at the wrong priority ( @ gaearon in (#) )
Fix a bug with rebasing updates ( @ acdlite and @ sebmarkbage in (#) , (#) , # , (#) () ) Read More
You might expect this
red , then alternates between transparent and blue , as you can see in this demo .
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.
String Refs is an old legacy API which is discouraged and is going to be deprecated in the future:
(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:
(class (ClassWithRenderProp) (extends) (React
Component
{{ componentDidMount (
)
({ doSomething ( (this refs
(myRef) )
;
render (
)
({
return
this
(props)
children (
) ;
class (ClassParent (extends) (React) . (Component) {
render (
)
({
return (
({) (
=>
(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 () 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 (
({
myRef)==( Button ref
(
({
myRef) }
/>
}
( ClassWithRenderProp
>
Note
To see this warning, you need to have the 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
React.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:
(let (createFactory
=(type
=> React (createElement
bind
(
null
, (type
) ;
It does exactly the same thing.
Deprecating ReactDOM.unstable_createPortal in favor of ReactDOM. createPortal
When React 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 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:
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:
This makes it clear where the problem is, and lets you locate and fix the bug faster.
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 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 use 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 disabled elements.
-
ReactDOM was missing a version export since we published v 41. 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.
-
. Installation React
React v . . 0 is available on the npm registry.
To install React 41 with Yarn, run:
yarn add react @ ^ . . 0 react-dom @ ^ . (0
)
To install React 41 with npm, run:
npm install
–save react @ ^
0 react- dom @ ^ . .0
We also provide UMD builds of React via a CDN:
( script
(crossorigin) (src)
=
https://unpkg.com/react@ / umd / react.production.min.js
>
/
script () src
“
https: // unpkg.com/react-dom@ / umd / react-dom.production.min.js
>
/
script ()
Refer to the documentation for (detailed installation instructions) .
Changelog React (Warn when a string ref is used in a manner that’s not amenable to a future codemod (
@ lunaruan
in (#) (Deprecate React.createFactory () ( @ trueadm in (#) )
shouldComponentUpdate twice when developing in (StrictMode) () @ bvaughn in (#) ) (Add (version) (property to ReactDOM ( @ ealush (in) (#)
Don’t call toString () of dangerouslySetInnerHTML (
@ sebmarkbage in
(Show component stacks in more warnings) @ gaearon in (#) , (#)
callback params and added warnings on usage ( @ bvaughn (in
# )
Don't group Idle / Offscreen work with other work ( @ sebmarkbage in (#) (Adjust) (SuspenseList) (CPU bound heuristic) @sebmarkbage in # )
- (Add missing event pluginident) @ trueadm in #
Fix
isPending
only being true when transitioning from inside an input event ( @ acdlite in (#)
Fix React.memo components dropping updates when interrupted by a higher priority update ( @ acdlite in #
Don't warn when suspending at the wrong priority ( @ gaearon in (#) )
Fix a bug with rebasing updates ( @ acdlite and @ sebmarkbage in (#) , (#) , # , (#) () ) Read More
({ doSomething ( (this refs
(myRef) )
;
render (
)
({
return
this
(props)
children (
) ;
class (ClassParent (extends) (React) . (Component) {
render (
)
({
return (
({) (
=>
(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 () 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 (
({
myRef)==( Button ref
(
({
myRef) }
/>
}
( ClassWithRenderProp
>
Note
To see this warning, you need to have the 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
React.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:
(let (createFactory
=(type
=> React (createElement
bind
(
null
, (type
) ;
It does exactly the same thing.
Deprecating ReactDOM.unstable_createPortal in favor of ReactDOM. createPortal
When React 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 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:
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:
This makes it clear where the problem is, and lets you locate and fix the bug faster.
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 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 use 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 disabled elements.
-
ReactDOM was missing a version export since we published v 41. 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.
-
. Installation React
React v . . 0 is available on the npm registry.
To install React 41 with Yarn, run:
yarn add react @ ^ . . 0 react-dom @ ^ . (0
)
To install React 41 with npm, run:
npm install
–save react @ ^
0 react- dom @ ^ . .0
We also provide UMD builds of React via a CDN:
( script
(crossorigin) (src)
=
https://unpkg.com/react@ / umd / react.production.min.js
>
/
script () src
“
https: // unpkg.com/react-dom@ / umd / react-dom.production.min.js
>
/
script ()
Refer to the documentation for (detailed installation instructions) .
Changelog React (Warn when a string ref is used in a manner that’s not amenable to a future codemod (
@ lunaruan
in (#) (Deprecate React.createFactory () ( @ trueadm in (#) )
shouldComponentUpdate twice when developing in (StrictMode) () @ bvaughn in (#) ) (Add (version) (property to ReactDOM ( @ ealush (in) (#)
Don’t call toString () of dangerouslySetInnerHTML (
@ sebmarkbage in
(Show component stacks in more warnings) @ gaearon in (#) , (#)
callback params and added warnings on usage ( @ bvaughn (in
# )
Don't group Idle / Offscreen work with other work ( @ sebmarkbage in (#) (Adjust) (SuspenseList) (CPU bound heuristic) @sebmarkbage in # )
- (Add missing event pluginident) @ trueadm in #
Fix
isPending
only being true when transitioning from inside an input event ( @ acdlite in (#)
Fix React.memo components dropping updates when interrupted by a higher priority update ( @ acdlite in #
Don't warn when suspending at the wrong priority ( @ gaearon in (#) )
Fix a bug with rebasing updates ( @ acdlite and @ sebmarkbage in (#) , (#) , # , (#) () ) Read More
;
render (
)
({
return
this
(props)
children (
) ;
class (ClassParent (extends) (React) . (Component) {
render (
)
({
return (
({) (
=>
(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 () 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 (
({
myRef)==( Button ref
(
({
myRef) }
/>
}
( ClassWithRenderProp
>
Note
To see this warning, you need to have the 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
React.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:
(let (createFactory
=(type
=> React (createElement
bind
(
null
, (type
) ;
It does exactly the same thing.
Deprecating ReactDOM.unstable_createPortal in favor of ReactDOM. createPortal
When React 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 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:
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:
This makes it clear where the problem is, and lets you locate and fix the bug faster.
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 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 use 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 disabled elements.
-
ReactDOM was missing a version export since we published v 41. 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.
-
. Installation React
React v . . 0 is available on the npm registry.
To install React 41 with Yarn, run:
yarn add react @ ^ . . 0 react-dom @ ^ . (0
)
To install React 41 with npm, run:
npm install
–save react @ ^
0 react- dom @ ^ . .0
We also provide UMD builds of React via a CDN:
( script
(crossorigin) (src)
=
https://unpkg.com/react@ / umd / react.production.min.js
>
/
script () src
“
https: // unpkg.com/react-dom@ / umd / react-dom.production.min.js
>
/
script ()
Refer to the documentation for (detailed installation instructions) .
Changelog React (Warn when a string ref is used in a manner that’s not amenable to a future codemod (
@ lunaruan
in (#) (Deprecate React.createFactory () ( @ trueadm in (#) )
shouldComponentUpdate twice when developing in (StrictMode) () @ bvaughn in (#) ) (Add (version) (property to ReactDOM ( @ ealush (in) (#)
Don’t call toString () of dangerouslySetInnerHTML (
@ sebmarkbage in
(Show component stacks in more warnings) @ gaearon in (#) , (#)
callback params and added warnings on usage ( @ bvaughn (in
# )
Don't group Idle / Offscreen work with other work ( @ sebmarkbage in (#) (Adjust) (SuspenseList) (CPU bound heuristic) @sebmarkbage in # )
- (Add missing event pluginident) @ trueadm in #
Fix
isPending
only being true when transitioning from inside an input event ( @ acdlite in (#)
Fix React.memo components dropping updates when interrupted by a higher priority update ( @ acdlite in #
Don't warn when suspending at the wrong priority ( @ gaearon in (#) )
Fix a bug with rebasing updates ( @ acdlite and @ sebmarkbage in (#) , (#) , # , (#) () ) Read More
({
return
this
children (
) ;
class (ClassParent (extends) (React) . (Component) {
render (
)
({
return (
({) (
=>
(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 () 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 (
({
myRef)==( Button ref
(
({
myRef) }
/>
}
( ClassWithRenderProp
>
Note
To see this warning, you need to have the 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
React.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:
(let (createFactory
=(type
=> React (createElement
bind
(
null
, (type
) ;
It does exactly the same thing.
Deprecating ReactDOM.unstable_createPortal in favor of ReactDOM. createPortal
When React 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 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:
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:
This makes it clear where the problem is, and lets you locate and fix the bug faster.
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 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 use 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 disabled elements.
-
ReactDOM was missing a version export since we published v 41. 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.
-
. Installation React
React v . . 0 is available on the npm registry.
To install React 41 with Yarn, run:
yarn add react @ ^ . . 0 react-dom @ ^ . (0
)
To install React 41 with npm, run:
npm install
–save react @ ^
0 react- dom @ ^ . .0
We also provide UMD builds of React via a CDN:
( script
(crossorigin) (src)
=
https://unpkg.com/react@ / umd / react.production.min.js
>
/
script () src
“
https: // unpkg.com/react-dom@ / umd / react-dom.production.min.js
>
/
script ()
Refer to the documentation for (detailed installation instructions) .
Changelog React (Warn when a string ref is used in a manner that’s not amenable to a future codemod (
@ lunaruan
in (#) (Deprecate React.createFactory () ( @ trueadm in (#) )
shouldComponentUpdate twice when developing in (StrictMode) () @ bvaughn in (#) ) (Add (version) (property to ReactDOM ( @ ealush (in) (#)
Don’t call toString () of dangerouslySetInnerHTML (
@ sebmarkbage in
(Show component stacks in more warnings) @ gaearon in (#) , (#)
callback params and added warnings on usage ( @ bvaughn (in
# )
Don't group Idle / Offscreen work with other work ( @ sebmarkbage in (#) (Adjust) (SuspenseList) (CPU bound heuristic) @sebmarkbage in # )
- (Add missing event pluginident) @ trueadm in #
Fix
isPending
only being true when transitioning from inside an input event ( @ acdlite in (#)
Fix React.memo components dropping updates when interrupted by a higher priority update ( @ acdlite in #
Don't warn when suspending at the wrong priority ( @ gaearon in (#) )
Fix a bug with rebasing updates ( @ acdlite and @ sebmarkbage in (#) , (#) , # , (#) () ) Read More
) ;
class (ClassParent (extends) (React) . (Component) {
render (
)
({
return (
({) (
=>
(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 () 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 (
({
myRef)==( Button ref
(
({
myRef) }
/>
}
( ClassWithRenderProp
>
Note
To see this warning, you need to have the 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
React.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:
(let (createFactory
=(type
=> React (createElement
bind
(
null
, (type
) ;
It does exactly the same thing.
Deprecating ReactDOM.unstable_createPortal in favor of ReactDOM. createPortal
When React 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 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:
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:
This makes it clear where the problem is, and lets you locate and fix the bug faster.
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 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 use 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 disabled elements.
-
ReactDOM was missing a version export since we published v 41. 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.
-
. Installation React
React v . . 0 is available on the npm registry.
To install React 41 with Yarn, run:
yarn add react @ ^ . . 0 react-dom @ ^ . (0
)
To install React 41 with npm, run:
npm install
–save react @ ^
0 react- dom @ ^ . .0
We also provide UMD builds of React via a CDN:
( script
(crossorigin) (src)
=
https://unpkg.com/react@ / umd / react.production.min.js
>
/
script () src
“
https: // unpkg.com/react-dom@ / umd / react-dom.production.min.js
>
/
script ()
Refer to the documentation for (detailed installation instructions) .
Changelog React (Warn when a string ref is used in a manner that’s not amenable to a future codemod (
@ lunaruan
in (#) (Deprecate React.createFactory () ( @ trueadm in (#) )
shouldComponentUpdate twice when developing in (StrictMode) () @ bvaughn in (#) ) (Add (version) (property to ReactDOM ( @ ealush (in) (#)
Don’t call toString () of dangerouslySetInnerHTML (
@ sebmarkbage in
(Show component stacks in more warnings) @ gaearon in (#) , (#)
callback params and added warnings on usage ( @ bvaughn (in
# )
Don't group Idle / Offscreen work with other work ( @ sebmarkbage in (#) (Adjust) (SuspenseList) (CPU bound heuristic) @sebmarkbage in # )
- (Add missing event pluginident) @ trueadm in #
Fix
isPending
only being true when transitioning from inside an input event ( @ acdlite in (#)
Fix React.memo components dropping updates when interrupted by a higher priority update ( @ acdlite in #
Don't warn when suspending at the wrong priority ( @ gaearon in (#) )
Fix a bug with rebasing updates ( @ acdlite and @ sebmarkbage in (#) , (#) , # , (#) () ) Read More
({
return (
({) (
=>
(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 () 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 (
({
myRef)==( Button ref
(
({
myRef) }
/>
}
( ClassWithRenderProp
>
Note
To see this warning, you need to have the 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
React.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:
(let (createFactory
=(type
=> React (createElement
bind
(
null
, (type
) ;
It does exactly the same thing.
Deprecating ReactDOM.unstable_createPortal in favor of ReactDOM. createPortal
When React 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 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:
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:
This makes it clear where the problem is, and lets you locate and fix the bug faster.
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 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 use 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 disabled elements.
-
ReactDOM was missing a version export since we published v 41. 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.
-
. Installation React
React v . . 0 is available on the npm registry.
To install React 41 with Yarn, run:
yarn add react @ ^ . . 0 react-dom @ ^ . (0
)
To install React 41 with npm, run:
npm install
–save react @ ^
0 react- dom @ ^ . .0
We also provide UMD builds of React via a CDN:
( script
(crossorigin) (src)
=
https://unpkg.com/react@ / umd / react.production.min.js
>
/
script () src
“
https: // unpkg.com/react-dom@ / umd / react-dom.production.min.js
>
/
script ()
Refer to the documentation for (detailed installation instructions) .
Changelog React (Warn when a string ref is used in a manner that’s not amenable to a future codemod (
@ lunaruan
in (#) (Deprecate React.createFactory () ( @ trueadm in (#) )
shouldComponentUpdate twice when developing in (StrictMode) () @ bvaughn in (#) ) (Add (version) (property to ReactDOM ( @ ealush (in) (#)
Don’t call toString () of dangerouslySetInnerHTML (
@ sebmarkbage in
(Show component stacks in more warnings) @ gaearon in (#) , (#)
callback params and added warnings on usage ( @ bvaughn (in
# )
Don't group Idle / Offscreen work with other work ( @ sebmarkbage in (#) (Adjust) (SuspenseList) (CPU bound heuristic) @sebmarkbage in # )
- (Add missing event pluginident) @ trueadm in #
Fix
isPending
only being true when transitioning from inside an input event ( @ acdlite in (#)
Fix React.memo components dropping updates when interrupted by a higher priority update ( @ acdlite in #
Don't warn when suspending at the wrong priority ( @ gaearon in (#) )
Fix a bug with rebasing updates ( @ acdlite and @ sebmarkbage in (#) , (#) , # , (#) () ) Read More
(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 () 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 (
({
myRef)==( Button ref
(
({
myRef) }
/>
}
( ClassWithRenderProp
>
Note
To see this warning, you need to have the 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
React.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:
(let (createFactory
=(type
=> React (createElement
bind
(
null
, (type
) ;
It does exactly the same thing.
Deprecating ReactDOM.unstable_createPortal in favor of ReactDOM. createPortal
When React 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 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:
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:
This makes it clear where the problem is, and lets you locate and fix the bug faster.
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 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 use 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 disabled elements.
-
ReactDOM was missing a version export since we published v 41. 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.
-
. Installation React
React v . . 0 is available on the npm registry.
To install React 41 with Yarn, run:
yarn add react @ ^ . . 0 react-dom @ ^ . (0
)
To install React 41 with npm, run:
npm install
–save react @ ^
0 react- dom @ ^ . .0
We also provide UMD builds of React via a CDN:
( script
(crossorigin) (src)
=
https://unpkg.com/react@ / umd / react.production.min.js
>
/
script () src
“
https: // unpkg.com/react-dom@ / umd / react-dom.production.min.js
>
/
script ()
Refer to the documentation for (detailed installation instructions) .
Changelog React (Warn when a string ref is used in a manner that’s not amenable to a future codemod (
@ lunaruan
in (#) (Deprecate React.createFactory () ( @ trueadm in (#) )
shouldComponentUpdate twice when developing in (StrictMode) () @ bvaughn in (#) ) (Add (version) (property to ReactDOM ( @ ealush (in) (#)
Don’t call toString () of dangerouslySetInnerHTML (
@ sebmarkbage in
(Show component stacks in more warnings) @ gaearon in (#) , (#)
callback params and added warnings on usage ( @ bvaughn (in
# )
Don't group Idle / Offscreen work with other work ( @ sebmarkbage in (#) (Adjust) (SuspenseList) (CPU bound heuristic) @sebmarkbage in # )
- (Add missing event pluginident) @ trueadm in #
Fix
isPending
only being true when transitioning from inside an input event ( @ acdlite in (#)
Fix React.memo components dropping updates when interrupted by a higher priority update ( @ acdlite in #
Don't warn when suspending at the wrong priority ( @ gaearon in (#) )
Fix a bug with rebasing updates ( @ acdlite and @ sebmarkbage in (#) , (#) , # , (#) () ) Read More
>
( 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 () 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 (
({
myRef)==( Button ref
(
({
myRef) }
/>
}
( ClassWithRenderProp
>
Note
To see this warning, you need to have the 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
React.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:
(let (createFactory
=(type
=> React (createElement
bind
(
null
, (type
) ;
It does exactly the same thing.
Deprecating ReactDOM.unstable_createPortal in favor of ReactDOM. createPortal
When React 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 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:
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:
This makes it clear where the problem is, and lets you locate and fix the bug faster.
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 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 use 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 disabled elements.
-
ReactDOM was missing a version export since we published v 41. 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.
-
. Installation React
React v . . 0 is available on the npm registry.
To install React 41 with Yarn, run:
yarn add react @ ^ . . 0 react-dom @ ^ . (0
)
To install React 41 with npm, run:
npm install
–save react @ ^
0 react- dom @ ^ . .0
We also provide UMD builds of React via a CDN:
( script
(crossorigin) (src)
=
https://unpkg.com/react@ / umd / react.production.min.js
>
/
script () src
“
https: // unpkg.com/react-dom@ / umd / react-dom.production.min.js
>
/
script ()
Refer to the documentation for (detailed installation instructions) .
Changelog React (Warn when a string ref is used in a manner that’s not amenable to a future codemod (
@ lunaruan
in (#) (Deprecate React.createFactory () ( @ trueadm in (#) )
shouldComponentUpdate twice when developing in (StrictMode) () @ bvaughn in (#) ) (Add (version) (property to ReactDOM ( @ ealush (in) (#)
Don’t call toString () of dangerouslySetInnerHTML (
@ sebmarkbage in
(Show component stacks in more warnings) @ gaearon in (#) , (#)
callback params and added warnings on usage ( @ bvaughn (in
# )
Don't group Idle / Offscreen work with other work ( @ sebmarkbage in (#) (Adjust) (SuspenseList) (CPU bound heuristic) @sebmarkbage in # )
- (Add missing event pluginident) @ trueadm in #
Fix
isPending
only being true when transitioning from inside an input event ( @ acdlite in (#)
Fix React.memo components dropping updates when interrupted by a higher priority update ( @ acdlite in #
Don't warn when suspending at the wrong priority ( @ gaearon in (#) )
Fix a bug with rebasing updates ( @ acdlite and @ sebmarkbage in (#) , (#) , # , (#) () ) Read More
( 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 () 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 (
({
myRef)==( Button ref
(
({
myRef) }
/>
}
( ClassWithRenderProp
>
Note
To see this warning, you need to have the 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
React.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:
(let (createFactory
=(type
=> React (createElement
bind
(
null
, (type
) ;
It does exactly the same thing.
Deprecating ReactDOM.unstable_createPortal in favor of ReactDOM. createPortal
When React 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 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:
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:
This makes it clear where the problem is, and lets you locate and fix the bug faster.
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 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 use 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 disabled elements.
-
ReactDOM was missing a version export since we published v 41. 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.
-
. Installation React
React v . . 0 is available on the npm registry.
To install React 41 with Yarn, run:
yarn add react @ ^ . . 0 react-dom @ ^ . (0
)
To install React 41 with npm, run:
npm install
–save react @ ^
0 react- dom @ ^ . .0
We also provide UMD builds of React via a CDN:
( script
(crossorigin) (src)
=
https://unpkg.com/react@ / umd / react.production.min.js
>
/
script () src
“
https: // unpkg.com/react-dom@ / umd / react-dom.production.min.js
>
/
script ()
Refer to the documentation for (detailed installation instructions) .
Changelog React (Warn when a string ref is used in a manner that’s not amenable to a future codemod (
@ lunaruan
in (#) (Deprecate React.createFactory () ( @ trueadm in (#) )
shouldComponentUpdate twice when developing in (StrictMode) () @ bvaughn in (#) ) (Add (version) (property to ReactDOM ( @ ealush (in) (#)
Don’t call toString () of dangerouslySetInnerHTML (
@ sebmarkbage in
(Show component stacks in more warnings) @ gaearon in (#) , (#)
callback params and added warnings on usage ( @ bvaughn (in
# )
Don't group Idle / Offscreen work with other work ( @ sebmarkbage in (#) (Adjust) (SuspenseList) (CPU bound heuristic) @sebmarkbage in # )
- (Add missing event pluginident) @ trueadm in #
Fix
isPending
only being true when transitioning from inside an input event ( @ acdlite in (#)
Fix React.memo components dropping updates when interrupted by a higher priority update ( @ acdlite in #
Don't warn when suspending at the wrong priority ( @ gaearon in (#) )
Fix a bug with rebasing updates ( @ acdlite and @ sebmarkbage in (#) , (#) , # , (#) () ) Read More
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 () 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 (
({
myRef)==( Button ref
(
({
myRef) }
/>
}
( ClassWithRenderProp
>
Note
To see this warning, you need to have the 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
React.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:
(let (createFactory
=(type
=> React (createElement
bind
(
null
, (type
) ;
It does exactly the same thing.
Deprecating ReactDOM.unstable_createPortal in favor of ReactDOM. createPortal
When React 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 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:
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:
This makes it clear where the problem is, and lets you locate and fix the bug faster.
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 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 use 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 disabled elements.
-
ReactDOM was missing a version export since we published v 41. 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.
-
. Installation React
React v . . 0 is available on the npm registry.
To install React 41 with Yarn, run:
yarn add react @ ^ . . 0 react-dom @ ^ . (0
)
To install React 41 with npm, run:
npm install
–save react @ ^
0 react- dom @ ^ . .0
We also provide UMD builds of React via a CDN:
( script
(crossorigin) (src)
=
https://unpkg.com/react@ / umd / react.production.min.js
>
/
script () src
“
https: // unpkg.com/react-dom@ / umd / react-dom.production.min.js
>
/
script ()
Refer to the documentation for (detailed installation instructions) .
Changelog React (Warn when a string ref is used in a manner that’s not amenable to a future codemod (
@ lunaruan
in (#) (Deprecate React.createFactory () ( @ trueadm in (#) )
shouldComponentUpdate twice when developing in (StrictMode) () @ bvaughn in (#) ) (Add (version) (property to ReactDOM ( @ ealush (in) (#)
Don’t call toString () of dangerouslySetInnerHTML (
@ sebmarkbage in
(Show component stacks in more warnings) @ gaearon in (#) , (#)
callback params and added warnings on usage ( @ bvaughn (in
# )
Don't group Idle / Offscreen work with other work ( @ sebmarkbage in (#) (Adjust) (SuspenseList) (CPU bound heuristic) @sebmarkbage in # )
- (Add missing event pluginident) @ trueadm in #
Fix
isPending
only being true when transitioning from inside an input event ( @ acdlite in (#)
Fix React.memo components dropping updates when interrupted by a higher priority update ( @ acdlite in #
Don't warn when suspending at the wrong priority ( @ gaearon in (#) )
Fix a bug with rebasing updates ( @ acdlite and @ sebmarkbage in (#) , (#) , # , (#) () ) Read More
;
componentDidMount (
)
({ doSomething ( (this myRef
(current) )
;
render (
)
({
return
this
(props)
children (
(this
. (myRef
)
;
class (ClassParent (extends) (React) . (Component) {
render (
)
({
return (
({
myRef)==( Button ref
(
({
myRef) }
/>
}
( ClassWithRenderProp
>
Note
To see this warning, you need to have the 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
React.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:
(let (createFactory
=(type
=> React (createElement
bind
(
null
, (type
) ;
It does exactly the same thing.
Deprecating ReactDOM.unstable_createPortal in favor of ReactDOM. createPortal
When React 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 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:
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:
This makes it clear where the problem is, and lets you locate and fix the bug faster.
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 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 use 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 disabled elements.
-
ReactDOM was missing a version export since we published v 41. 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.
-
. Installation React
React v . . 0 is available on the npm registry.
To install React 41 with Yarn, run:
yarn add react @ ^ . . 0 react-dom @ ^ . (0
)
To install React 41 with npm, run:
npm install
–save react @ ^
0 react- dom @ ^ . .0
We also provide UMD builds of React via a CDN:
( script
(crossorigin) (src)
=
https://unpkg.com/react@ / umd / react.production.min.js
>
/
script () src
“
https: // unpkg.com/react-dom@ / umd / react-dom.production.min.js
>
/
script ()
Refer to the documentation for (detailed installation instructions) .
Changelog React (Warn when a string ref is used in a manner that’s not amenable to a future codemod (
@ lunaruan
in (#) (Deprecate React.createFactory () ( @ trueadm in (#) )
shouldComponentUpdate twice when developing in (StrictMode) () @ bvaughn in (#) ) (Add (version) (property to ReactDOM ( @ ealush (in) (#)
Don’t call toString () of dangerouslySetInnerHTML (
@ sebmarkbage in
(Show component stacks in more warnings) @ gaearon in (#) , (#)
callback params and added warnings on usage ( @ bvaughn (in
# )
Don't group Idle / Offscreen work with other work ( @ sebmarkbage in (#) (Adjust) (SuspenseList) (CPU bound heuristic) @sebmarkbage in # )
- (Add missing event pluginident) @ trueadm in #
Fix
isPending
only being true when transitioning from inside an input event ( @ acdlite in (#)
Fix React.memo components dropping updates when interrupted by a higher priority update ( @ acdlite in #
Don't warn when suspending at the wrong priority ( @ gaearon in (#) )
Fix a bug with rebasing updates ( @ acdlite and @ sebmarkbage in (#) , (#) , # , (#) () ) Read More
({ doSomething ( (this myRef
(current) )
;
render (
)
({
return
this
(props)
children (
(this
. (myRef
)
;
class (ClassParent (extends) (React) . (Component) {
render (
)
({
return (
({
myRef)==( Button ref
(
({
myRef) }
/>
}
( ClassWithRenderProp
>
Note
To see this warning, you need to have the 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
React.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:
(let (createFactory
=(type
=> React (createElement
bind
(
null
, (type
) ;
It does exactly the same thing.
Deprecating ReactDOM.unstable_createPortal in favor of ReactDOM. createPortal
When React 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 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:
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:
This makes it clear where the problem is, and lets you locate and fix the bug faster.
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 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 use 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 disabled elements.
-
ReactDOM was missing a version export since we published v 41. 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.
-
. Installation React
React v . . 0 is available on the npm registry.
To install React 41 with Yarn, run:
yarn add react @ ^ . . 0 react-dom @ ^ . (0
)
To install React 41 with npm, run:
npm install
–save react @ ^
0 react- dom @ ^ . .0
We also provide UMD builds of React via a CDN:
( script
(crossorigin) (src)
=
https://unpkg.com/react@ / umd / react.production.min.js
>
/
script () src
“
https: // unpkg.com/react-dom@ / umd / react-dom.production.min.js
>
/
script ()
Refer to the documentation for (detailed installation instructions) .
Changelog React (Warn when a string ref is used in a manner that’s not amenable to a future codemod (
@ lunaruan
in (#) (Deprecate React.createFactory () ( @ trueadm in (#) )
shouldComponentUpdate twice when developing in (StrictMode) () @ bvaughn in (#) ) (Add (version) (property to ReactDOM ( @ ealush (in) (#)
Don’t call toString () of dangerouslySetInnerHTML (
@ sebmarkbage in
(Show component stacks in more warnings) @ gaearon in (#) , (#)
callback params and added warnings on usage ( @ bvaughn (in
# )
Don't group Idle / Offscreen work with other work ( @ sebmarkbage in (#) (Adjust) (SuspenseList) (CPU bound heuristic) @sebmarkbage in # )
- (Add missing event pluginident) @ trueadm in #
Fix
isPending
only being true when transitioning from inside an input event ( @ acdlite in (#)
Fix React.memo components dropping updates when interrupted by a higher priority update ( @ acdlite in #
Don't warn when suspending at the wrong priority ( @ gaearon in (#) )
Fix a bug with rebasing updates ( @ acdlite and @ sebmarkbage in (#) , (#) , # , (#) () ) Read More
;
render (
)
({
return
this
(props)
children (
(this
. (myRef
)
;
class (ClassParent (extends) (React) . (Component) {
render (
)
({
return (
({
myRef)==( Button ref
(
({
myRef) }
/>
}
( ClassWithRenderProp
>
Note
To see this warning, you need to have the 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
React.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:
(let (createFactory
=(type
=> React (createElement
bind
(
null
, (type
) ;
It does exactly the same thing.
Deprecating ReactDOM.unstable_createPortal in favor of ReactDOM. createPortal
When React 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 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:
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:
This makes it clear where the problem is, and lets you locate and fix the bug faster.
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 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 use 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 disabled elements.
-
ReactDOM was missing a version export since we published v 41. 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.
-
. Installation React
React v . . 0 is available on the npm registry.
To install React 41 with Yarn, run:
yarn add react @ ^ . . 0 react-dom @ ^ . (0
)
To install React 41 with npm, run:
npm install
–save react @ ^
0 react- dom @ ^ . .0
We also provide UMD builds of React via a CDN:
( script
(crossorigin) (src)
=
https://unpkg.com/react@ / umd / react.production.min.js
>
/
script () src
“
https: // unpkg.com/react-dom@ / umd / react-dom.production.min.js
>
/
script ()
Refer to the documentation for (detailed installation instructions) .
Changelog React (Warn when a string ref is used in a manner that’s not amenable to a future codemod (
@ lunaruan
in (#) (Deprecate React.createFactory () ( @ trueadm in (#) )
shouldComponentUpdate twice when developing in (StrictMode) () @ bvaughn in (#) ) (Add (version) (property to ReactDOM ( @ ealush (in) (#)
Don’t call toString () of dangerouslySetInnerHTML (
@ sebmarkbage in
(Show component stacks in more warnings) @ gaearon in (#) , (#)
callback params and added warnings on usage ( @ bvaughn (in
# )
Don't group Idle / Offscreen work with other work ( @ sebmarkbage in (#) (Adjust) (SuspenseList) (CPU bound heuristic) @sebmarkbage in # )
- (Add missing event pluginident) @ trueadm in #
Fix
isPending
only being true when transitioning from inside an input event ( @ acdlite in (#)
Fix React.memo components dropping updates when interrupted by a higher priority update ( @ acdlite in #
Don't warn when suspending at the wrong priority ( @ gaearon in (#) )
Fix a bug with rebasing updates ( @ acdlite and @ sebmarkbage in (#) , (#) , # , (#) () ) Read More
({
return
this
children (
(this
. (myRef
)
;
class (ClassParent (extends) (React) . (Component) {
render (
)
({
return (
({
myRef)==( Button ref
(
({
myRef) }
/>
}
( ClassWithRenderProp
>
Note
To see this warning, you need to have the 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
React.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:
(let (createFactory
=(type
=> React (createElement
bind
(
null
, (type
) ;
It does exactly the same thing.
Deprecating ReactDOM.unstable_createPortal in favor of ReactDOM. createPortal
When React 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 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:
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:
This makes it clear where the problem is, and lets you locate and fix the bug faster.
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 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 use 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 disabled elements.
-
ReactDOM was missing a version export since we published v 41. 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.
-
. Installation React
React v . . 0 is available on the npm registry.
To install React 41 with Yarn, run:
yarn add react @ ^ . . 0 react-dom @ ^ . (0
)
To install React 41 with npm, run:
npm install
–save react @ ^
0 react- dom @ ^ . .0
We also provide UMD builds of React via a CDN:
( script
(crossorigin) (src)
=
https://unpkg.com/react@ / umd / react.production.min.js
>
/
script () src
“
https: // unpkg.com/react-dom@ / umd / react-dom.production.min.js
>
/
script ()
Refer to the documentation for (detailed installation instructions) .
Changelog React (Warn when a string ref is used in a manner that’s not amenable to a future codemod (
@ lunaruan
in (#) (Deprecate React.createFactory () ( @ trueadm in (#) )
shouldComponentUpdate twice when developing in (StrictMode) () @ bvaughn in (#) ) (Add (version) (property to ReactDOM ( @ ealush (in) (#)
Don’t call toString () of dangerouslySetInnerHTML (
@ sebmarkbage in
(Show component stacks in more warnings) @ gaearon in (#) , (#)
callback params and added warnings on usage ( @ bvaughn (in
# )
Don't group Idle / Offscreen work with other work ( @ sebmarkbage in (#) (Adjust) (SuspenseList) (CPU bound heuristic) @sebmarkbage in # )
- (Add missing event pluginident) @ trueadm in #
Fix
isPending
only being true when transitioning from inside an input event ( @ acdlite in (#)
Fix React.memo components dropping updates when interrupted by a higher priority update ( @ acdlite in #
Don't warn when suspending at the wrong priority ( @ gaearon in (#) )
Fix a bug with rebasing updates ( @ acdlite and @ sebmarkbage in (#) , (#) , # , (#) () ) Read More
({
return (
({
myRef)==( Button ref
(
({
myRef) }
/>
}
( ClassWithRenderProp
>
Note
To see this warning, you need to have the 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
React.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:
(let (createFactory
=(type
=> React (createElement
bind
(
null
, (type
) ;
It does exactly the same thing.
Deprecating ReactDOM.unstable_createPortal in favor of ReactDOM. createPortal
When React 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 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:
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:
This makes it clear where the problem is, and lets you locate and fix the bug faster.
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 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 use 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 disabled elements.
-
ReactDOM was missing a version export since we published v 41. 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.
-
. Installation React
React v . . 0 is available on the npm registry.
To install React 41 with Yarn, run:
yarn add react @ ^ . . 0 react-dom @ ^ . (0
)
To install React 41 with npm, run:
npm install
–save react @ ^
0 react- dom @ ^ . .0
We also provide UMD builds of React via a CDN:
( script
(crossorigin) (src)
=
https://unpkg.com/react@ / umd / react.production.min.js
>
/
script () src
“
https: // unpkg.com/react-dom@ / umd / react-dom.production.min.js
>
/
script ()
Refer to the documentation for (detailed installation instructions) .
Changelog React (Warn when a string ref is used in a manner that’s not amenable to a future codemod (
@ lunaruan
in (#) (Deprecate React.createFactory () ( @ trueadm in (#) )
shouldComponentUpdate twice when developing in (StrictMode) () @ bvaughn in (#) ) (Add (version) (property to ReactDOM ( @ ealush (in) (#)
Don’t call toString () of dangerouslySetInnerHTML (
@ sebmarkbage in
(Show component stacks in more warnings) @ gaearon in (#) , (#)
callback params and added warnings on usage ( @ bvaughn (in
# )
Don't group Idle / Offscreen work with other work ( @ sebmarkbage in (#) (Adjust) (SuspenseList) (CPU bound heuristic) @sebmarkbage in # )
- (Add missing event pluginident) @ trueadm in #
Fix
isPending
only being true when transitioning from inside an input event ( @ acdlite in (#)
Fix React.memo components dropping updates when interrupted by a higher priority update ( @ acdlite in #
Don't warn when suspending at the wrong priority ( @ gaearon in (#) )
Fix a bug with rebasing updates ( @ acdlite and @ sebmarkbage in (#) , (#) , # , (#) () ) Read More
(
({
/>
}
( ClassWithRenderProp
>
Note
To see this warning, you need to have the 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
React.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:
(let (createFactory
=(type
=> React (createElement
bind
(
null
, (type
) ;
It does exactly the same thing.
Deprecating ReactDOM.unstable_createPortal in favor of ReactDOM. createPortal
When React 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 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:
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:
This makes it clear where the problem is, and lets you locate and fix the bug faster.
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 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 use 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 disabled elements.
-
ReactDOM was missing a version export since we published v 41. 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.
-
. Installation React
React v . . 0 is available on the npm registry.
To install React 41 with Yarn, run:
yarn add react @ ^ . . 0 react-dom @ ^ . (0
)
To install React 41 with npm, run:
npm install
–save react @ ^
0 react- dom @ ^ . .0
We also provide UMD builds of React via a CDN:
( script
(crossorigin) (src)
=
https://unpkg.com/react@ / umd / react.production.min.js
>
/
script () src
“
https: // unpkg.com/react-dom@ / umd / react-dom.production.min.js
>
/
script ()
Refer to the documentation for (detailed installation instructions) .
Changelog React (Warn when a string ref is used in a manner that’s not amenable to a future codemod (
@ lunaruan
in (#) (Deprecate React.createFactory () ( @ trueadm in (#) )
shouldComponentUpdate twice when developing in (StrictMode) () @ bvaughn in (#) ) (Add (version) (property to ReactDOM ( @ ealush (in) (#)
Don’t call toString () of dangerouslySetInnerHTML (
@ sebmarkbage in
(Show component stacks in more warnings) @ gaearon in (#) , (#)
callback params and added warnings on usage ( @ bvaughn (in
# )
Don't group Idle / Offscreen work with other work ( @ sebmarkbage in (#) (Adjust) (SuspenseList) (CPU bound heuristic) @sebmarkbage in # )
- (Add missing event pluginident) @ trueadm in #
Fix
isPending
only being true when transitioning from inside an input event ( @ acdlite in (#)
Fix React.memo components dropping updates when interrupted by a higher priority update ( @ acdlite in #
Don't warn when suspending at the wrong priority ( @ gaearon in (#) )
Fix a bug with rebasing updates ( @ acdlite and @ sebmarkbage in (#) , (#) , # , (#) () ) Read More
( ClassWithRenderProp
>
Note
To see this warning, you need to have the 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
React.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:
(let (createFactory
=(type
=> React (createElement
bind
(
null
, (type
) ;
It does exactly the same thing.
Deprecating ReactDOM.unstable_createPortal in favor of ReactDOM. createPortal
When React 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 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:
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:
This makes it clear where the problem is, and lets you locate and fix the bug faster.
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 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 use 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 disabled elements.
-
ReactDOM was missing a version export since we published v 41. 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.
-
. Installation React
React v . . 0 is available on the npm registry.
To install React 41 with Yarn, run:
yarn add react @ ^ . . 0 react-dom @ ^ . (0
)
To install React 41 with npm, run:
npm install
–save react @ ^
0 react- dom @ ^ . .0
We also provide UMD builds of React via a CDN:
( script
(crossorigin) (src)
=
https://unpkg.com/react@ / umd / react.production.min.js
>
/
script () src
“
https: // unpkg.com/react-dom@ / umd / react-dom.production.min.js
>
/
script ()
Refer to the documentation for (detailed installation instructions) .
Changelog React (Warn when a string ref is used in a manner that’s not amenable to a future codemod (
@ lunaruan
in (#) (Deprecate React.createFactory () ( @ trueadm in (#) )
shouldComponentUpdate twice when developing in (StrictMode) () @ bvaughn in (#) ) (Add (version) (property to ReactDOM ( @ ealush (in) (#)
Don’t call toString () of dangerouslySetInnerHTML (
@ sebmarkbage in
(Show component stacks in more warnings) @ gaearon in (#) , (#)
callback params and added warnings on usage ( @ bvaughn (in
# )
Don't group Idle / Offscreen work with other work ( @ sebmarkbage in (#) (Adjust) (SuspenseList) (CPU bound heuristic) @sebmarkbage in # )
- (Add missing event pluginident) @ trueadm in #
Fix
isPending
only being true when transitioning from inside an input event ( @ acdlite in (#)
Fix React.memo components dropping updates when interrupted by a higher priority update ( @ acdlite in #
Don't warn when suspending at the wrong priority ( @ gaearon in (#) )
Fix a bug with rebasing updates ( @ acdlite and @ sebmarkbage in (#) , (#) , # , (#) () ) Read More
( ClassWithRenderProp
>
Note
To see this warning, you need to have the 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
React.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:
(let (createFactory
=(type
=> React (createElement
bind
(
null
, (type
) ;
It does exactly the same thing.
Deprecating ReactDOM.unstable_createPortal in favor of ReactDOM. createPortal
When React 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 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:
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:
This makes it clear where the problem is, and lets you locate and fix the bug faster.
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 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 use 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 disabled elements.
-
ReactDOM was missing a version export since we published v 41. 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.
-
. Installation React
React v . . 0 is available on the npm registry.
To install React 41 with Yarn, run:
yarn add react @ ^ . . 0 react-dom @ ^ . (0
)
To install React 41 with npm, run:
npm install
–save react @ ^
0 react- dom @ ^ . .0
We also provide UMD builds of React via a CDN:
( script
(crossorigin) (src)
=
https://unpkg.com/react@ / umd / react.production.min.js
>
/
script () src
“
https: // unpkg.com/react-dom@ / umd / react-dom.production.min.js
>
/
script ()
Refer to the documentation for (detailed installation instructions) .
Changelog React (Warn when a string ref is used in a manner that’s not amenable to a future codemod (
@ lunaruan
in (#) (Deprecate React.createFactory () ( @ trueadm in (#) )
shouldComponentUpdate twice when developing in (StrictMode) () @ bvaughn in (#) ) (Add (version) (property to ReactDOM ( @ ealush (in) (#)
Don’t call toString () of dangerouslySetInnerHTML (
@ sebmarkbage in
(Show component stacks in more warnings) @ gaearon in (#) , (#)
callback params and added warnings on usage ( @ bvaughn (in
# )
Don't group Idle / Offscreen work with other work ( @ sebmarkbage in (#) (Adjust) (SuspenseList) (CPU bound heuristic) @sebmarkbage in # )
- (Add missing event pluginident) @ trueadm in #
Fix
isPending
only being true when transitioning from inside an input event ( @ acdlite in (#)
Fix React.memo components dropping updates when interrupted by a higher priority update ( @ acdlite in #
Don't warn when suspending at the wrong priority ( @ gaearon in (#) )
Fix a bug with rebasing updates ( @ acdlite and @ sebmarkbage in (#) , (#) , # , (#) () ) Read More
Note
To see this warning, you need to have the 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
React.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:
(let (createFactory
=(type
=> React (createElement
bind
(
null
, (type
) ;
It does exactly the same thing.
Deprecating ReactDOM.unstable_createPortal in favor of ReactDOM. createPortal
When React 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 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:
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:
This makes it clear where the problem is, and lets you locate and fix the bug faster.
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 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 use 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 disabled elements.
-
ReactDOM was missing a version export since we published v 41. 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.
-
. Installation React
React v . . 0 is available on the npm registry.
To install React 41 with Yarn, run:
yarn add react @ ^ . . 0 react-dom @ ^ . (0
)
To install React 41 with npm, run:
npm install
–save react @ ^
0 react- dom @ ^ . .0
We also provide UMD builds of React via a CDN:
( script
(crossorigin) (src)
=
https://unpkg.com/react@ / umd / react.production.min.js
>
/
script () src
“
https: // unpkg.com/react-dom@ / umd / react-dom.production.min.js
>
/
script ()
Refer to the documentation for (detailed installation instructions) .
Changelog React (Warn when a string ref is used in a manner that’s not amenable to a future codemod (
@ lunaruan
in (#) (Deprecate React.createFactory () ( @ trueadm in (#) )
shouldComponentUpdate twice when developing in (StrictMode) () @ bvaughn in (#) ) (Add (version) (property to ReactDOM ( @ ealush (in) (#)
Don’t call toString () of dangerouslySetInnerHTML (
@ sebmarkbage in
(Show component stacks in more warnings) @ gaearon in (#) , (#)
callback params and added warnings on usage ( @ bvaughn (in
# )
Don't group Idle / Offscreen work with other work ( @ sebmarkbage in (#) (Adjust) (SuspenseList) (CPU bound heuristic) @sebmarkbage in # )
- (Add missing event pluginident) @ trueadm in #
Fix
isPending
only being true when transitioning from inside an input event ( @ acdlite in (#)
Fix React.memo components dropping updates when interrupted by a higher priority update ( @ acdlite in #
Don't warn when suspending at the wrong priority ( @ gaearon in (#) )
Fix a bug with rebasing updates ( @ acdlite and @ sebmarkbage in (#) , (#) , # , (#) () ) Read More
bind
(
null
, (type
) ;
It does exactly the same thing.
Deprecating ReactDOM.unstable_createPortal in favor of ReactDOM. createPortal
When React 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 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:
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:
This makes it clear where the problem is, and lets you locate and fix the bug faster.
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 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 use 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 disabled elements.
-
ReactDOM was missing a version export since we published v 41. 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.
-
. Installation React
React v . . 0 is available on the npm registry.
To install React 41 with Yarn, run:
yarn add react @ ^ . . 0 react-dom @ ^ . (0
)
To install React 41 with npm, run:
npm install
–save react @ ^
0 react- dom @ ^ . .0
We also provide UMD builds of React via a CDN:
( script
(crossorigin) (src)
=
https://unpkg.com/react@ / umd / react.production.min.js
>
/
script () src
“
https: // unpkg.com/react-dom@ / umd / react-dom.production.min.js
>
/
script ()
Refer to the documentation for (detailed installation instructions) .
Changelog React (Warn when a string ref is used in a manner that’s not amenable to a future codemod (
@ lunaruan
in (#) (Deprecate React.createFactory () ( @ trueadm in (#) )
shouldComponentUpdate twice when developing in (StrictMode) () @ bvaughn in (#) ) (Add (version) (property to ReactDOM ( @ ealush (in) (#)
Don’t call toString () of dangerouslySetInnerHTML (
@ sebmarkbage in
(Show component stacks in more warnings) @ gaearon in (#) , (#)
callback params and added warnings on usage ( @ bvaughn (in
# )
Don't group Idle / Offscreen work with other work ( @ sebmarkbage in (#) (Adjust) (SuspenseList) (CPU bound heuristic) @sebmarkbage in # )
- (Add missing event pluginident) @ trueadm in #
Fix
isPending
only being true when transitioning from inside an input event ( @ acdlite in (#)
Fix React.memo components dropping updates when interrupted by a higher priority update ( @ acdlite in #
Don't warn when suspending at the wrong priority ( @ gaearon in (#) )
Fix a bug with rebasing updates ( @ acdlite and @ sebmarkbage in (#) , (#) , # , (#) () ) Read More
null
, (type
) ;
It does exactly the same thing.
Deprecating ReactDOM.unstable_createPortal in favor of ReactDOM. createPortal
When React 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 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:
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:
This makes it clear where the problem is, and lets you locate and fix the bug faster.
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 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 use 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 disabled elements.
-
ReactDOM was missing a version export since we published v 41. 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.
-
. Installation React
React v . . 0 is available on the npm registry.
To install React 41 with Yarn, run:
yarn add react @ ^ . . 0 react-dom @ ^ . (0
)
To install React 41 with npm, run:
npm install
–save react @ ^
0 react- dom @ ^ . .0
We also provide UMD builds of React via a CDN:
( script
(crossorigin) (src)
=
https://unpkg.com/react@ / umd / react.production.min.js
>
/
script () src
“
https: // unpkg.com/react-dom@ / umd / react-dom.production.min.js
>
/
script ()
Refer to the documentation for (detailed installation instructions) .
Changelog React (Warn when a string ref is used in a manner that’s not amenable to a future codemod (
@ lunaruan
in (#) (Deprecate React.createFactory () ( @ trueadm in (#) )
shouldComponentUpdate twice when developing in (StrictMode) () @ bvaughn in (#) ) (Add (version) (property to ReactDOM ( @ ealush (in) (#)
Don’t call toString () of dangerouslySetInnerHTML (
@ sebmarkbage in
(Show component stacks in more warnings) @ gaearon in (#) , (#)
callback params and added warnings on usage ( @ bvaughn (in
# )
Don't group Idle / Offscreen work with other work ( @ sebmarkbage in (#) (Adjust) (SuspenseList) (CPU bound heuristic) @sebmarkbage in # )
- (Add missing event pluginident) @ trueadm in #
Fix
isPending
only being true when transitioning from inside an input event ( @ acdlite in (#)
Fix React.memo components dropping updates when interrupted by a higher priority update ( @ acdlite in #
Don't warn when suspending at the wrong priority ( @ gaearon in (#) )
Fix a bug with rebasing updates ( @ acdlite and @ sebmarkbage in (#) , (#) , # , (#) () ) Read More
It does exactly the same thing.
Deprecating ReactDOM.unstable_createPortal in favor of ReactDOM. createPortal
When React 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 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:
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:
This makes it clear where the problem is, and lets you locate and fix the bug faster.
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 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 use 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 disabled elements.
-
ReactDOM was missing a version export since we published v 41. 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.
-
. Installation React
React v . . 0 is available on the npm registry.
To install React 41 with Yarn, run:
yarn add react @ ^ . . 0 react-dom @ ^ . (0
)
To install React 41 with npm, run:
npm install
–save react @ ^
0 react- dom @ ^ . .0
We also provide UMD builds of React via a CDN:
( script
(crossorigin) (src)
=
https://unpkg.com/react@ / umd / react.production.min.js
>
/
script () src
“
https: // unpkg.com/react-dom@ / umd / react-dom.production.min.js
>
/
script ()
Refer to the documentation for (detailed installation instructions) .
Changelog React (Warn when a string ref is used in a manner that’s not amenable to a future codemod (
@ lunaruan
in (#) (Deprecate React.createFactory () ( @ trueadm in (#) )
shouldComponentUpdate twice when developing in (StrictMode) () @ bvaughn in (#) ) (Add (version) (property to ReactDOM ( @ ealush (in) (#)
Don’t call toString () of dangerouslySetInnerHTML (
@ sebmarkbage in
(Show component stacks in more warnings) @ gaearon in (#) , (#)
callback params and added warnings on usage ( @ bvaughn (in
# )
Don't group Idle / Offscreen work with other work ( @ sebmarkbage in (#) (Adjust) (SuspenseList) (CPU bound heuristic) @sebmarkbage in # )
- (Add missing event pluginident) @ trueadm in #
Fix
isPending
only being true when transitioning from inside an input event ( @ acdlite in (#)
Fix React.memo components dropping updates when interrupted by a higher priority update ( @ acdlite in #
Don't warn when suspending at the wrong priority ( @ gaearon in (#) )
Fix a bug with rebasing updates ( @ acdlite and @ sebmarkbage in (#) , (#) , # , (#) () ) Read More
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:
This makes it clear where the problem is, and lets you locate and fix the bug faster.
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 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 use 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 disabled elements.
-
ReactDOM was missing a version export since we published v 41. 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.
-
. Installation React
React v . . 0 is available on the npm registry.
To install React 41 with Yarn, run:
yarn add react @ ^ . . 0 react-dom @ ^ . (0
)
To install React 41 with npm, run:
npm install
–save react @ ^
0 react- dom @ ^ . .0
We also provide UMD builds of React via a CDN:
( script
(crossorigin) (src)
=
https://unpkg.com/react@ / umd / react.production.min.js
>
/
script () src
“
https: // unpkg.com/react-dom@ / umd / react-dom.production.min.js
>
/
script ()
Refer to the documentation for (detailed installation instructions) .
Changelog React (Warn when a string ref is used in a manner that’s not amenable to a future codemod (
@ lunaruan
in (#) (Deprecate React.createFactory () ( @ trueadm in (#) )
shouldComponentUpdate twice when developing in (StrictMode) () @ bvaughn in (#) ) (Add (version) (property to ReactDOM ( @ ealush (in) (#)
Don’t call toString () of dangerouslySetInnerHTML (
@ sebmarkbage in
(Show component stacks in more warnings) @ gaearon in (#) , (#)
callback params and added warnings on usage ( @ bvaughn (in
# )
Don't group Idle / Offscreen work with other work ( @ sebmarkbage in (#) (Adjust) (SuspenseList) (CPU bound heuristic) @sebmarkbage in # )
- (Add missing event pluginident) @ trueadm in #
Fix
isPending
only being true when transitioning from inside an input event ( @ acdlite in (#)
Fix React.memo components dropping updates when interrupted by a higher priority update ( @ acdlite in #
Don't warn when suspending at the wrong priority ( @ gaearon in (#) )
Fix a bug with rebasing updates ( @ acdlite and @ sebmarkbage in (#) , (#) , # , (#) () ) Read More
This makes it clear where the problem is, and lets you locate and fix the bug faster.
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 shouldn’t affect most code, unless you have side effects in shouldComponentUpdate . To fix this, move the code with side effects into componentDidUpdate .
-
-
ReactDOM was missing a version export since we published v 41. 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.
onMouseEnter now does not trigger on disabled elements.
-
In Strict Development Mode, the warnings for use 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.
. Installation React
React v . . 0 is available on the npm registry.
To install React 41 with Yarn, run:
yarn add react @ ^ . . 0 react-dom @ ^ . (0
)
To install React 41 with npm, run:
npm install
–save react @ ^
0 react- dom @ ^ . .0
We also provide UMD builds of React via a CDN:
( script
(crossorigin) (src)
=
https://unpkg.com/react@ / umd / react.production.min.js
>
/
script () src
“
https: // unpkg.com/react-dom@ / umd / react-dom.production.min.js
>
/
script ()
Refer to the documentation for (detailed installation instructions) .
Changelog React (Warn when a string ref is used in a manner that’s not amenable to a future codemod (
@ lunaruan
in (#) (Deprecate React.createFactory () ( @ trueadm in (#) )
shouldComponentUpdate twice when developing in (StrictMode) () @ bvaughn in (#) ) (Add (version) (property to ReactDOM ( @ ealush (in) (#)
Don’t call toString () of dangerouslySetInnerHTML (
@ sebmarkbage in
(Show component stacks in more warnings) @ gaearon in (#) , (#)
callback params and added warnings on usage ( @ bvaughn (in
# )
Don't group Idle / Offscreen work with other work ( @ sebmarkbage in (#) (Adjust) (SuspenseList) (CPU bound heuristic) @sebmarkbage in # )
- (Add missing event pluginident) @ trueadm in #
Fix
isPending
only being true when transitioning from inside an input event ( @ acdlite in (#)
Fix React.memo components dropping updates when interrupted by a higher priority update ( @ acdlite in #
Don't warn when suspending at the wrong priority ( @ gaearon in (#) )
Fix a bug with rebasing updates ( @ acdlite and @ sebmarkbage in (#) , (#) , # , (#) () ) Read More
We also provide UMD builds of React via a CDN:
( script
(crossorigin) (src)
=
https://unpkg.com/react@ / umd / react.production.min.js
>
/
script () src
“
https: // unpkg.com/react-dom@ / umd / react-dom.production.min.js
>
/
script ()
Refer to the documentation for (detailed installation instructions) .
Changelog React (Warn when a string ref is used in a manner that’s not amenable to a future codemod (
@ lunaruan
in (#) (Deprecate React.createFactory () ( @ trueadm in (#) )
shouldComponentUpdate twice when developing in (StrictMode) () @ bvaughn in (#) ) (Add (version) (property to ReactDOM ( @ ealush (in) (#)
Don’t call toString () of dangerouslySetInnerHTML (
@ sebmarkbage in
(Show component stacks in more warnings) @ gaearon in (#) , (#)
callback params and added warnings on usage ( @ bvaughn (in
# )
Don't group Idle / Offscreen work with other work ( @ sebmarkbage in (#) (Adjust) (SuspenseList) (CPU bound heuristic) @sebmarkbage in # )
- (Add missing event pluginident) @ trueadm in #
Fix
isPending
only being true when transitioning from inside an input event ( @ acdlite in (#)
Fix React.memo components dropping updates when interrupted by a higher priority update ( @ acdlite in #
Don't warn when suspending at the wrong priority ( @ gaearon in (#) )
Fix a bug with rebasing updates ( @ acdlite and @ sebmarkbage in (#) , (#) , # , (#) () ) Read More
>
/
script () src
“
https: // unpkg.com/react-dom@ / umd / react-dom.production.min.js
>
/
script ()
Refer to the documentation for (detailed installation instructions) .
Changelog React (Warn when a string ref is used in a manner that’s not amenable to a future codemod (
@ lunaruan
in (#) (Deprecate React.createFactory () ( @ trueadm in (#) )
shouldComponentUpdate twice when developing in (StrictMode) () @ bvaughn in (#) ) (Add (version) (property to ReactDOM ( @ ealush (in) (#)
Don’t call toString () of dangerouslySetInnerHTML (
@ sebmarkbage in
(Show component stacks in more warnings) @ gaearon in (#) , (#)
callback params and added warnings on usage ( @ bvaughn (in
# )
Don't group Idle / Offscreen work with other work ( @ sebmarkbage in (#) (Adjust) (SuspenseList) (CPU bound heuristic) @sebmarkbage in # )
- (Add missing event pluginident) @ trueadm in #
Fix
isPending
only being true when transitioning from inside an input event ( @ acdlite in (#)
Fix React.memo components dropping updates when interrupted by a higher priority update ( @ acdlite in #
Don't warn when suspending at the wrong priority ( @ gaearon in (#) )
Fix a bug with rebasing updates ( @ acdlite and @ sebmarkbage in (#) , (#) , # , (#) () ) Read More
/
>
/
script ()
Refer to the documentation for (detailed installation instructions) .
Changelog React (Warn when a string ref is used in a manner that’s not amenable to a future codemod (
@ lunaruan
in (#) (Deprecate React.createFactory () ( @ trueadm in (#) )
shouldComponentUpdate twice when developing in (StrictMode) () @ bvaughn in (#) ) (Add (version) (property to ReactDOM ( @ ealush (in) (#)
Don’t call toString () of dangerouslySetInnerHTML (
@ sebmarkbage in
(Show component stacks in more warnings) @ gaearon in (#) , (#)
callback params and added warnings on usage ( @ bvaughn (in
# )
Don't group Idle / Offscreen work with other work ( @ sebmarkbage in (#) (Adjust) (SuspenseList) (CPU bound heuristic) @sebmarkbage in # )
- (Add missing event pluginident) @ trueadm in #
Fix
isPending
only being true when transitioning from inside an input event ( @ acdlite in (#)
Fix React.memo components dropping updates when interrupted by a higher priority update ( @ acdlite in #
Don't warn when suspending at the wrong priority ( @ gaearon in (#) )
Fix a bug with rebasing updates ( @ acdlite and @ sebmarkbage in (#) , (#) , # , (#) () ) Read More
/
Refer to the documentation for (detailed installation instructions) .
Changelog
@ lunaruan
in (#) (Deprecate React.createFactory () ( @ trueadm in (#) )
shouldComponentUpdate twice when developing in (StrictMode) () @ bvaughn in (#) ) (Add (version) (property to ReactDOM ( @ ealush (in) (#)
- Don’t call toString () of
- (Add missing event pluginident) @ trueadm in #
- Fix
dangerouslySetInnerHTML (
@ sebmarkbage in
(Show component stacks in more warnings) @ gaearon in (#) , (#)
callback params and added warnings on usage ( @ bvaughn (in
# )
Don't group Idle / Offscreen work with other work ( @ sebmarkbage in (#) (Adjust) (SuspenseList) (CPU bound heuristic) @sebmarkbage in # )
isPending
only being true when transitioning from inside an input event ( @ acdlite in (#)
Fix React.memo components dropping updates when interrupted by a higher priority update ( @ acdlite in #
Don't warn when suspending at the wrong priority ( @ gaearon in (#) )
Fix a bug with rebasing updates ( @ acdlite and @ sebmarkbage in (#) , (#) , # , (#) () ) Read More
GIPHY App Key not set. Please check settings