➡️ Rename
The hook to customize the instance value that is exposed to parent components when using
https://github.com/facebook/react/pull/14565
useImperativeMethods to useImperativeHandleThe hook to customize the instance value that is exposed to parent components when using
ref is now called useImperativeHandle.https://github.com/facebook/react/pull/14565
👀 DevTools: Better Display for String Contexts
Context values that hold a primitive data type are now properly formatted in DevTools.
https://github.com/facebook/react-devtools/pull/1256
Context values that hold a primitive data type are now properly formatted in DevTools.
https://github.com/facebook/react-devtools/pull/1256
🛠 Separate Current Owner and Dispatcher
These two private APIs give deep access to React internals and a few external libraries depend on them. If your library does, check out the pull request for a migration strategy.
https://github.com/facebook/react/pull/14548
These two private APIs give deep access to React internals and a few external libraries depend on them. If your library does, check out the pull request for a migration strategy.
https://github.com/facebook/react/pull/14548
🌀 Release 16.8.0-alpha.0
If you’ve played around with hooks before using the alpha release, make sure to upgrade to 16.8.0-alpha.0 and benefit from all bug fixes that were published with 16.7.0.
https://twitter.com/dan_abramov/status/1083139151720001543
If you’ve played around with hooks before using the alpha release, make sure to upgrade to 16.8.0-alpha.0 and benefit from all bug fixes that were published with 16.7.0.
https://twitter.com/dan_abramov/status/1083139151720001543
🛑 Allow
Bailing out from state changes was a long requested feature for hooks. With a recent change, returning the same state from a useReducer call will now avoid re-rendering the component.
https://github.com/facebook/react/pull/14569
useReducer to Bail OutBailing out from state changes was a long requested feature for hooks. With a recent change, returning the same state from a useReducer call will now avoid re-rendering the component.
https://github.com/facebook/react/pull/14569
🎉 React DevTools 3.6
A new version of the React DevTools browser plugin is out adding support for hooks and a lot more.
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
A new version of the React DevTools browser plugin is out adding support for hooks and a lot more.
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
📌 Labels for Custom Hooks
Together with the new hook support in the DevTools,
https://github.com/facebook/react/pull/14559
Together with the new hook support in the DevTools,
useDebugValue allows to configure labels for custom hooks. Make sure to check out the docs entry.https://github.com/facebook/react/pull/14559
🐞 Support Hooks in Shallow Renderer
If you’re using React’s shallow renderer for testing your components, you can now continue to do so even when working with hooks.
https://github.com/facebook/react/pull/14567
If you’re using React’s shallow renderer for testing your components, you can now continue to do so even when working with hooks.
https://github.com/facebook/react/pull/14567
🛠 DevTools:
When selecting a React element in DevTools and typing
https://github.com/facebook/react-devtools/pull/1281
$r for Function ComponentsWhen selecting a React element in DevTools and typing
$r in the console, you can access the selected component instance. For function components, this will now return a useful fallback.https://github.com/facebook/react-devtools/pull/1281
📝 Creating Expensive Objects
The documentation now contains a new section on how to create expensive objects. The useMemo paragraph was also updated to make it clear that you can not rely on it being called exactly once.
https://reactjs.org/docs/hooks-faq.html#how-to-create-expensive-objects-lazily
The documentation now contains a new section on how to create expensive objects. The useMemo paragraph was also updated to make it clear that you can not rely on it being called exactly once.
https://reactjs.org/docs/hooks-faq.html#how-to-create-expensive-objects-lazily
🌀 Release 16.8.0-alpha.1
A new alpha with hooks support is out including the new
https://twitter.com/dan_abramov/status/1083139151720001543
A new alpha with hooks support is out including the new
useDebugValue API and a lot of other fixes. Make sure to update if you’re on the pre-release build.https://twitter.com/dan_abramov/status/1083139151720001543
👀 Add ESLint Rule Playground
Working on linter rules can be frustrating as editors want to avoid reloading it. This new playground rule acts as a proxy to your in-development rule and will reload it on every recheck.
https://github.com/facebook/react/pull/14609
Working on linter rules can be frustrating as editors want to avoid reloading it. This new playground rule acts as a proxy to your in-development rule and will reload it on every recheck.
https://github.com/facebook/react/pull/14609
⚠️ Error When Using Hooks Inside Hooks
React now properly warns you when you use hooks inside some other hooks.
https://github.com/facebook/react/pull/14608
React now properly warns you when you use hooks inside some other hooks.
https://github.com/facebook/react/pull/14608
📌 Enable Hooks
Hooks are now turned on by default and will be part of the next release 🎉. The release is also very close.
https://github.com/facebook/react/pull/14679
Hooks are now turned on by default and will be part of the next release 🎉. The release is also very close.
https://github.com/facebook/react/pull/14679
🏫 Warn When Hooks Type Change
React will now warn when you are returning different hooks on subsequent re-renders. Don’t forget the first Rule of Hooks.
https://github.com/facebook/react/pull/14585
React will now warn when you are returning different hooks on subsequent re-renders. Don’t forget the first Rule of Hooks.
https://github.com/facebook/react/pull/14585
🥢 Double-render Function Component With Hooks in Strict Dev Mode
If you’re using <StrictMode> in DEV builds, function components that call hooks will now be called twice to make it easier to spot side effects.
https://github.com/facebook/react/pull/14654
If you’re using <StrictMode> in DEV builds, function components that call hooks will now be called twice to make it easier to spot side effects.
https://github.com/facebook/react/pull/14654
🔄 Support Sync Thenables for lazy()
You can now pass a synchronous thenable (an object where the then property callback is executed synchronously) into lazy().
https://github.com/facebook/react/pull/14626
You can now pass a synchronous thenable (an object where the then property callback is executed synchronously) into lazy().
https://github.com/facebook/react/pull/14626
✌️ Warn When Passing Second Callback to setState/dispatch in Hooks
In class components, you can pass in a second callback to this.setState() that is run when the update is applied. When using hooks, this is not supported.
https://github.com/facebook/react/pull/14625
In class components, you can pass in a second callback to this.setState() that is run when the update is applied. When using hooks, this is not supported.
https://github.com/facebook/react/pull/14625
🛑 Disallow Reading Context During useMemo, etc.
The callback functions of useMemo, use(Layout)Effect, useReducer, and useState can no longer read context by accessing the internal dispatcher.
https://github.com/facebook/react/pull/14653
The callback functions of useMemo, use(Layout)Effect, useReducer, and useState can no longer read context by accessing the internal dispatcher.
https://github.com/facebook/react/pull/14653
