Finally Hooked! What's New in React v16.8

joshtronic

Seems like only yesterday we anticipated the release of React v16.7 and subsequently were let down because Hooks didn’t make it into the release. Fast forward a couple of months and React v16.8 is here with Hook finally arriving to the stable channel!

The inclusion of Hooks in React comes with some additional updates to help support them. React DevTools has been updated to support Hooks as well as the latest TypeScript and Flow definitions for React including the updates.

This major update is not without issues though. The now stable Hooks implementation is still only mostly complete.

There are two life cycle methods that have yet to be implemented, componentDidCatch() and getSnapshotBeforeUpdate(). If you don’t need those particular methods, you should be off to the races.

Also, React Native won’t include support for Hooks until v0.59.

✨ Black Friday - 50% off all of Wes Bos' courses

Recommended React and GraphQL course

Testing Hooks with ReactTestUtils.act()

This release comes with a new API method ReactTestUtils.act(). This method helps to ensure that your tests that include rendering and updating components better match the component behavior in the browser.

It’s recommended that any code you’re testing that renders or updates a component should be wrapped up in the ReactTestUtils.act() method. It accepts a function as the first parameter.

Let’s say we have this simple component (using Hooks) that keeps track of how many times a button has been clicked:

import React, { useEffect, useState } from 'react';

function AlliCounter() {
  // Sets up our Hook state, defaulting to 0
  const [counter, setCounter] = useState(0);

  // Hook event fired when our button is clicked
  useEffect(() => {
    document.title = `Clicks: ${counter}`;
  });

  return (
    <button onClick={() => setCounter(counter + 1)}>
      Clicks: {counter}
    </button>
  );
}

We can then test the initial render and update using ReactTestUtils.act():

import React from 'react';
import { render } from 'react-dom';
import { act } from 'react-dom/test-utils';
import AlliCounter from './components/AlliCounter';

const container = document.createElement('div');
document.body.appendChild(container);

describe('Component:AlliCounter', () => {
  it('should render and update', () => {
    // First render, counter is 0
    act(() => {
      render(<AlliCounter />, container);
    });

    const button = container.querySelector('button');

    expect(button.textContent).toBe('Clicks: 0');
    expect(document.title).toBe('Clicks: 0');

    // Click event, triggering an update
    act(() => {
      button.dispatchEvent(
        new MouseEvent('click', { bubbles: true })
      );
    });

    expect(button.textContent).toBe('Clicks: 1');
    expect(document.title).toBe('Clicks: 1');
  });
});

Lint-free Hooks with ESLint

In addition to the new API test method, the React team has bestowed upon us a new ESLint plug-in which covers the rules of React Hooks.

If you’re already an ESLint user, simply install the new plug-in:

# Via npm
$ npm install eslint-plugin-react-hooks@next --save-dev

# Via Yarn
$ yarn add eslint-plugin-react-hooks@next --dev

And update your ESLint configuration to include the plug-in and rules:

{
  "plugins": [
    // Your existing plugins...
    "react-hooks"
  ],
  "rules": {
    // Your existing rules...
    "react-hooks/rules-of-hooks": "error"
  }
}

But Wait, There’s More

Hooks were definitely the major inclusion to this particular React release with most of the change log entries relating to Hooks in one way or another.

One change not related to Hooks did make it in though. Up until React v16.8, React.lazy() only worked in asynchronous scenarios and has been updated to also include support for synchronous thenables.

Ready to start using React v16.8?

React v16.8 is generally available so all you will need to do is install it:

# Via npm
$ npm install --save react@^16.8.0 react-dom@^16.8.0

# Via Yarn
$ yarn add react@^16.8.0 react-dom@^16.8.0

🎣 Stay tuned for some more tutorials on using and/or creating your own React hooks!

  Tweet It

🕵 Search Results

🔎 Searching...

Sponsored by #native_company# — Learn More
#native_title# #native_desc#
#native_cta#