📌 Mention Hooks As Accepted on the Website
The React Hooks RFC has recently been merged. Thanks to Jamie (jamiebuilds), the website is now updated to reflect this as well.
https://github.com/reactjs/reactjs.org/pull/1485
The React Hooks RFC has recently been merged. Thanks to Jamie (jamiebuilds), the website is now updated to reflect this as well.
https://github.com/reactjs/reactjs.org/pull/1485
🔎 Add <Suspense> and lazy() to react-is
Pleun Vanderbauwhede (pleunv) added support for <Suspense> and lazy() to react-is. This package is used to test for particular React element types.
https://github.com/facebook/react/pull/14423
Pleun Vanderbauwhede (pleunv) added support for <Suspense> and lazy() to react-is. This package is used to test for particular React element types.
https://github.com/facebook/react/pull/14423
GitHub
Add support for Suspense & lazy() to the react-is package by pleunv · Pull Request #14423 · facebook/react
The "react-is" package appears to lack checks for React.Suspense & React.lazy(). Since libraries like enzyme depend on this to implement proper support for these element types I figur...
💉 Inject overrideProps() into DevTools
Development builds are now exposing a new function to the DevTools which is required to allow editing props of more component types.
https://github.com/facebook/react/pull/14427
Development builds are now exposing a new function to the DevTools which is required to allow editing props of more component types.
https://github.com/facebook/react/pull/14427
GitHub
Inject overrideProps() fn to DevTools by bvaughn · Pull Request #14427 · facebook/react
This function will enable editing props for function components, host nodes, and special types like memo and forwardRef.
Copying the update logic into React will also enable us to add more complex ...
Copying the update logic into React will also enable us to add more complex ...
🎉 React 16.7 Release
No, This Is Not The One With Hooks, but this release contains non-trivial changes to fix various performance issues. Read the accompanying release blog post for more details.
https://reactjs.org/blog/2018/12/19/react-v-16-7.html
No, This Is Not The One With Hooks, but this release contains non-trivial changes to fix various performance issues. Read the accompanying release blog post for more details.
https://reactjs.org/blog/2018/12/19/react-v-16-7.html
📋 Memoize Promise Listeners
Previously, React attached new listeners whenever a promise was thrown. This was causing special headaches in non-concurrent mode, where React re-renders immediately after a promise is thrown, causing exponential growth of promise listeners.
https://github.com/facebook/react/pull/14429
Previously, React attached new listeners whenever a promise was thrown. This was causing special headaches in non-concurrent mode, where React re-renders immediately after a promise is thrown, causing exponential growth of promise listeners.
https://github.com/facebook/react/pull/14429
🛠 DevTools: Support Editable Props for More Component Types
In the upcoming DevTools release, you’ll be able to edit the props of more component types including function components, host elements, and special types like context providers, memo, and forwardRef. Check out the pre-release build.
https://github.com/facebook/react-devtools/pull/1249
In the upcoming DevTools release, you’ll be able to edit the props of more component types including function components, host elements, and special types like context providers, memo, and forwardRef. Check out the pre-release build.
https://github.com/facebook/react-devtools/pull/1249
📌 WIP: Support Hooks in DevTools
Support for Hooks in DevTools allows you to inspect useState state values, useCallback functions, and even deeply nested custom hooks.
While the core team is getting hooks ready for a stable release, this work in progress pull request gives an early glimpse of the new DevTools integration.
https://github.com/facebook/react-devtools/pull/1272
Support for Hooks in DevTools allows you to inspect useState state values, useCallback functions, and even deeply nested custom hooks.
While the core team is getting hooks ready for a stable release, this work in progress pull request gives an early glimpse of the new DevTools integration.
https://github.com/facebook/react-devtools/pull/1272
➡️ 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
