📌 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

➡️ Rename useImperativeMethods to useImperativeHandle

The 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

🛠 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

🌀 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

🛑 Allow useReducer to Bail Out

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

🎉 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

📌 Labels for Custom Hooks

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

🛠 DevTools: $r for Function Components

When 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

🌀 Release 16.8.0-alpha.1

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

⚠️ 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

📌 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

🏫 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

🥢 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

🔄 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

✌️ 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

🛑 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