A Guide to Hooks in Terms of Classes

Andrew Givens — Wed, 01 May 2019 01:24:26 +0000

With the introduction of Hooks, it seems that the React team is trying to push developers away from using Class Components that implement state and lifecycle. Understanding how to use these new features may prove to be a little bit challenging to someone who is so used to Class Components. Hopefully this guide will help bridge the gap between how hooks are used to replace classes.

For this I will just be going over the basic hooks: useState and useEffect.

useState

So, let's start with the easier of the two. The useState hook replaces, well, state. Pretty obvious there. The only kicker is how it allows us to interact with state. Previously, our state was a class variable of our component.

class MyComponent extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = { count: 0 }
  }
}

Which could then simple be accessed with this.state and mutated with React's this.setState() method.

class MyComponent extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = { count: 0 }
  }

  render() {
    const { count } = this.state;

    return (
      <button type="button" onClick={() => this.setState({ count: count + 1})}>
        Add One
      </button>
    )
  }
}

With hooks, instead of our state being a single object that is accessed with a single method, each piece of state appears to us as individual components.

const MyComponent = () => {
  const [count, setCount] = React.useState(0);
  const [myName, setMyName] = React.useState('Andrew');
}

The value that is passed to useState is the value state will be initialized with, and, as you could probably guess, setCount(count + 1) would increment my count state variable by 1 and trigger an update of MyComponent.

The cool part with the use of hook's state is how it can interact with the useEffect hook.

useEffect

The useEffect hook has a little bit more to it than useState. Remember those awesome lifecycle methods we used to use?

class MyComponent extends React.PureComponent {
  constructor(props) {
    this.state = { channelId: 12345, message: '' }
  }

  this.componentDidMount() {
    discordClient.login(token);
  }

  this.componentDidUpdate() {
    { channelId, message } = this.state;
    discordClient.channels.get(channelId).send(message);
  }

  this.componentWillUnmount() {
    discordClient.destroy();
  }
}

const MyComponent = () => {
  const isInitialMount = React.useRef(true);
  const [channelId, setChannelId] = React.useState(12345);
  const [message, setMessage] = React.useState('');

  React.useEffect(() => {
    discordClient.login(token);

    return function cleanup() {
      discordClient.destroy();
    }
  }, []);

  React.useEffect(() => {
    if (isInitialMount.current) {
      isInitialMount.current = false;
      discordClient.login(token);
    } else {
      discordClient.channels.get(channelId).send(message);
    }

    return function cleanup() {
      discordClient.destroy();
    };
  }, [message]);

  this.componentDidUpdate() {
    { channelId, message } = this.state;
    discordClient.channels.get(channelId).send(message);
  }
}

Now, let's mash them all into a single function useEffect(). By default this acts as componentDidMount and componentDidUpdate. So, something like this would run on mount and each time the component updates.

const MyComponent = () => {
  React.useEffect(() => {
    console.log('yeehaw');
  });
}

If you want something to run on willUnmount, simple return a function from your useEffect like so...

const MyComponent = () => {
  React.useEffect(() => {
    console.log('yeehaw');

    return function unmount() {
      console.log('componentWillUnmount');
    };
  });
}

Whenever the component will unmount from the dom, React will execute the code in the function returned by useEffect. Easy enough, right?

Here comes the cool part, you know how in redux you can subscribe to certain elements of your store. Well, with useEffects you can do the same thing with your state.

Let's say we have a couple state variables, but we only want this effect to happen when one of them updates. Easy peasy.

const MyComponent = () => {
  const [howdy, setHowdy] = React.useState('partner');
  const [count, setCount] = React.useState(0);

  React.useEffect(() => {
    console.log('yeehaw');
  }, [count]);
}

This useEffect will now only run whenever the value of count changes.

Say you want a useEffect to only run on mount, just pass it an empty Array as the condition.

const MyComponent = () => {
  const [howdy, setHowdy] = React.useState('partner');
  const [count, setCount] = React.useState(0);

  React.useEffect(() => {
    console.log('yeehaw');
  }, []);
}

Now, lets try to re-implement that mock discord bot with a useEffect. We want the client to login on mount, send a message when the message updates, and the destroy the client on willUnmount. In order to make the client login only on mount, we'll have to utilize a useRef to determine if it's the initial mount. This is the suggested implementation by the React team.

const MyComponent = () => {
  const isInitialMount = React.useRef(true);
  const [channelId, setChannelId] = React.useState(12345);
  const [message, setMessage] = React.useState('yeehaw!');

  React.useEffect(() => {
    if (isInitialMount.current) {
      isInitialMount.current = false;
      discordClient.login(token);
    } else {
      discordClient.channels.get(channelId).send(message);
    }

    return function cleanup() {
      discordClient.destroy();
    };
  }, [message]);
}

Now get to hookin'!

Testing React Hook State Changes

Andrew Givens — Thu, 25 Apr 2019 02:08:07 +0000

Edit (2020): I would recommend switching over to react-testing-library, and changing your testing approach to test how your component changes with state rather than that state changed. While this approach works, it is not the ideal solution to the problem. I originally came up with this solution because I started React work using class components and being able to use the enzyme helpers to directly test my values of state against what I expected. With hooks, the testing approach has changed and that is no longer ideal. We should be testing our full component and how the component responds to the state change, not that state has changed.

With the introduction of React Hooks, testing our components state changes is not as straight forward as it used to be. However, it is still possible to test these state changes directly. It just requires a little mocking. 🤠

Testing state change with a class component

Previously, if you used a React Class Component, you could simply read and manipulate the component state from the shallow object enzyme provides us through shallow rendering.

Testing state change with hooks

However, with the introduction of hooks, you can now give state to functional components through React.useState. This means that our enzyme shallow render object will not have a state() method.

Implementations I've found around this subject before talked about testing the repercussions of changing state. For example, state updates and we test that the displayed count value is what we expect, or we test that a function is called with the correct parameter from state, etc.

Which, I would say is a completely valid way to test your state change. However, it feels like it goes against the isolation we should consider when unit testing.

If I'm testing my onClick event, all I really care about for my test is that is calls setCount with whatever variable it should. We trust that React works correctly; so, my test shouldn't rely on useState updating my state variable and re-rendering my component for my unit test.

So, why don't we mock it?

Conclusion

With this implementation, we are mocking React.useState to return an Array with the initial value passed to the method and a jest mock function. This will set the states setter to our mock function and allow us to test that it was called with the expected value to set state to.

Pretty neat! Now there is no need for us to dig through props to check that our state gets set correctly. 👌