React Hooks: A Quick Introduction
When learning about React for the first time one of the very first decisions you’re faced with is which way to write your components. React gives you two different variants for this choice: Class Components & Functional components. Initially when I was trying to wrap my head around this and learn why to use one and not the other I figured a good rule of thumb was to always base my decision off whether or not my component would need to make use of state. If it did then it had to be a Class component, if not then a functional component worked just fine. When React was first introduced this was convention, that is until Hooks were introduced!
The React Dev team introduced Hooks for a number of reasons, but I’ll go ahead and focus on just one because its the one I related to the most and was very much looking for an answer to. The dreaded ‘this’. After having come from Ruby and diving into JavaScript it was a Struggleeee to wrap my head around the way ‘this’ was used throughout JS. How it must be bound within class components still trips me up. So from my perspective one of the great pluses of using Hooks within functional components is not having to deal ‘this’.
Now I’ll go ahead and examine what will be the two most familiar features that Hooks adopt to make them behave like Class Components. Right out of the box React has two methods
useStateanduseEffectwhich as you might have already guessed allow for the use of State and mimic Lifecycle methods.
The first method useState has a syntax that is super easy to adopt. You begin by declaring your functional component as you normally would. Be sure to remember to import useState from react! Then simply declare a variable and set it equal to useState. In the example above num represents a number but could be any data type (Object, String, Array, etc.) and setNum is a callback function. By declaring num here and useState React will now be able to preserve the state of this function even after it’s been run. Using it in this way is nearly identical to this.state within a Class Component.
Next we simply add the appropriate JSX. For this example we have a <p> tag that displays the number of the times the button has been clicked. You can also see the button is being passed the callback function we declared earlier, setNum.
Now onClick the button will call the function setNum, which will then increment our num by 1 and then re-render to reflect the functional state. Simple right?!
Lets take a look at our other familiar out of the box method useEffect. Those who are comfortable with using componentDidMount, componentDidUpdate & componentDidUnmount know their use case is super useful for making things like fetch calls or setting intervals. Well, with the useEffect Hook you are then able to mimic the behavior of these lifecycle methods within your functional components.
Here we have mock fetch within the method useEffect. You can see that we don’t have to declare variables to call useEffect, it simply lives inside your functional component. React docs tell us to always make sure that the useEffect hook lives top level so as not to cause any strange behavior. By having it here you can also affect state and have access to props. This method is called immediately after render, just like DidMount and DidUpdate do because often times you will want to affect something not only on the first render but also after every update. The useEffect method also has functionality to unMount or end something that runs until a component gets removed from the DOM. By returning a function you would be able to end anything currently running, ie a setInterval or a subscription, useEffect will run that returned function once the component unMounts.
These are just two examples of ways to use Hooks within a functional component. There are a few more ‘out of the box’ hooks that do very specific things that I encourage you to checkout. If you’d like to see more examples or ways on how to use these Hooks, the React docs have quite good documentation covering Hooks. I hope these short examples and explanations help in furthering your React journey.
[1]: React Docs (https://reactjs.org/docs/hooks-intro.html)
