Learning React Hooks: What are Hooks?

Image for post
Image for post

I have recently had the pleasure of graduating from Flatiron a couple of weeks ago and for my final project, I was using React for my frontend. Now, of course, it’s up to me to continue my development and to be constantly learning. There is so much out there to learn and there are so many things I want to do, but I have to start somewhere.

Which lead me to Hooks. Up until now, much of my components would be class components, that would hold my state and pass down props. But with the introduction to hooks in React 16.8, you can use state and other React features without writing a class. Class components were previously the only kind of components that had state in React, the same applied for interacting with an API, say an external API, or a browser API. We needed to use a lifecycle hook, likecomponentDidMount() to reach out to those APIs.

By comparison, functional components were imported for displaying our markup and the data stored in state. We passed down state from class components to be rendered in function components through props and these functions helped us break up our application in a more readable and logical component tree.

Now React Hooks gives to functional components all of the functionality we previously relied on class components for. So why not explore these hooks?

Class and Function components:

By the end of this blog, I’ll be showing you a React application that is comprised of a functional component that utilises Hooks. But firstly let us compare a class and function component where it’s only functionality is to increment a number and ‘listen’ to your mouse position.

This is our class component. It currently has a state that will store our default count value, and our X and Y mouse position. Upon our lifecycle hooks:

We set our document.title with the interpolated state of the count, and create an EventListerner for when the mouse moves when the component mounts. We want that to update whenever the state changes, with our Update lifecycle hook, and whenever the component unmounts we want to remove our EventListerner. With our two functions at the bottom that sets our state. Now, what would this look like if we used hooks in a function component?

Everything we sought out to achieve in our class component has been achieved in our Function component as well. We still have our event listener and our document title, with our two functions at the bottom.

You can see we have imported from React useState and UseEffect. These are hooks. But what are these hooks specifically and how can they be used?

UseState:

useState is actually a function and we need to execute it at the top of our component. All that it needs to work as we want is to provide an initial state, just like we did in our class component with the state of count. So we will pass in 0 as the default value and for our mouse position, we will pass in an object that stores an x and y position, with a default of null. From this function call, we get a couple of things that we need to initialise using a variable keyword like const. We’ll get in square brackets two values, which will first be the value in state we want to create, and we know that value is count and for our second value, we get the ability to set state. But this isn’t a general method like this.setState() for our class components. This is a set state function specifically for the state value we create. It will be responsible for only updating the piece of state and we can call this set function whatever we like, but in our case it would make the most sense to call it setCount. We can now use useState for our count like so:

UseEffect:

So what is this useEffect hook and what does the word Effect refer to. Effect refers to the term ‘side effect’. If you have worked with React before it’s very likely you have used side effects before. Things like interacting with an API through data fetching. In essence side effects are when we want to interact with the outside world in our application. As the React documentation states: ‘you can think of useEffect Hook as componentDidMount, componentDidUpdate, and componentWillUnmount combined.’ We can use useEffectbelow our useStates, and it takes a function that will write as an arrow function, and by default useEffect is executed after every render, particularly the function within. So after a state change, for example when our counter is incremented, after the re-render that the change in state causes, the effect function is called and here we can specify what needs to be done. To update our document title and add an eventListerner we can say:

This is equivalent to our componentDidMount in our class component. Now how do we clean up any side effects? Our mouse move listener is a side effect. In this case when our component mounts we’re setting up an active listener. But when our component unmounts we want to get rid of it. If we don’t remove it when we don’t need to listen to it anymore it could cause problems in our application. In our class component we used:

In terms of our Effect function, we can clear up the side effect as well. We can create a new function that will be returned. Like so:

This return method, is our way of replicating, so to speak, our componentWillUnmount.In addition to this function being called on unmount, it is also called every time before an effect runs to clean up from the last render. If we want to run our effects less frequently, we can provide a second argument, which is an array of values. So if there is a value that one of our side effects depends on we can put it in the array, and if this value changes and only when that value changes, will our side effect be run again. Since in our case we’re updating the title every time the value changes we need to tell useEffect that this side effect relies on the count. So to this array, we will add our dependent value of count. Our useEffecthook should look like this:

Creating the React News application:

Now that you have seen the difference between a class and function component and how to implement useState and useEffect. Here’s my code of how I created a small application that utilises an API to search for articles and websites related to any search query.

This is only the beginning and there is still more to learn about hooks, In my next blog, I’ll be going over useContext and useReducerhooks, and walk through building a complete CRUD App with React Hooks and replacing Redux. But for now,

Why don’t you have a go and try it out for yourself? Here’s a link to ‘React News’ :

Gif of the week:

FlatIron student — Software Engineering

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store