React Hooks: An Informal Introduction

As of version 16.8, React released its Hooks API. This gives functional components access to lifecycle and state methods. This addition has been a great win for code quality and productivity, as stateless functional components are a preferred option in React projects. With that being said, if you aren’t familiar it could be somewhat of a small adjustment if you’re used to the old way of doing things. But fret not! As with most times when you’re reintroducing how to do something in a new and improved way, a brief informal cover of the main points to know should be great to get you rolling.

useState

Now being that this is the hook you’ll use the most, let’s start here. useState is the hook that allows you to create a React state variable to your component. Using useState requires two declarations, the variable storing the value and a method to update it. Below you’ll find an example:

const [value, setValue] = useState<boolean>();

It’s really that simple! You can declare whatever type of variable you want, primitive, object, array, etc.

useEffect

Now with you’re familiar with implementing state, let’s look at an actual “hook”. useEffect is the new method that you can say is giving functional components access to lifecycle methods. This hook is responsible for recreating componentDidMount, componentDidUpdate, and “side effects” for whenever a specified value is updated. Let’s take a look!

// componentDidMount and componentDidUpdate
useEffect(
  () => {
    console.log('We started!');
  }, []);

In the example above, this is where you would be any logic relating to when a component just mounts. You may be wondering what’s up with the second parameter being an empty array. If you are that’s a good catch, and an important one. useEffect expects a second parameter to listen for so it knows when to run. In this case, we pass an empty array so that it is aware to only run once. If not, it will run continuously without stoping.

Now, earlier we mentioned that useEffect can also be used to call logic when a passed in value(name state or passed props) is changed. What would that look like? Well, not much different!

// componentDidMount and componentDidUpdate
useEffect(
  () => {
    console.log('We updated!');
  }, [value]);

As mentioned earlier, useEffect takes a second parameter that tells it when it needs to run. In this case, we’re calling this hook whenever are value variable is updated. And yes, just like useState, useEffect can be used many times in functional components.

Some Good To Knows

• Never call hooks inside loops, conditions, or nested functions. Only the top level of your functional components
• Only call them from React functional components

Going Forward

Obviously there are a few more hooks we could dig into, and even building our own(exciting!), but that’s better suited for later articles. For now, you have enough direct knowledge to replace your old PureComponent or Component class definitions of components to something cleaner and more modern.