Learning React Hooks: What are Hooks?
By: Bruno Silva
Tags: Reactive Programming, React, Front End Development, React Hook, Reactjs

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:

const [count, setCount] = useState(0)

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 useEffect below 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:

document.title = `You have clicked ${count} times`; window.addEventListener("mousemove", handleMouseMove);

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:

componentWillUnmount() { window.removeEventListener('mousemove', this.handleMouseMove); }

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:

return () => { window.removeEventListener("mousemove", handleMouseMove); };

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 useEffect hook should look like this:

useEffect(

() => {

document.title = `You have clicked ${count} times`;

window.addEventListener("mousemove", handleMouseMove); return () => {

window.removeEventListener("mousemove", handleMouseMove);

};

},[count]);

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 useReducer hooks, 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: