Skip Classes with Hooks!
Well, not ACTUAL classes…
For anyone who has had experience with creating a React app, the question of whether to use a Functional component versus a Class component is a familiar one. The traditional way of thinking went something like this: if you have a simple component, go ahead and make it Functional; anything else should essentially be a Class component. Class components were more versatile, allowing you to take advantage of LifeCycle methods and to hold state.
There were a few problems with this system, though. First and foremost, Class components can often start out small…and then morph into large, unruly messes with complicated stateful logic and methods that end up being responsible for different tasks. One way of dealing with this is to attempt to break the larger component down into smaller components, but the complex stateful logic in many of these cases would necessitate calling in a separate state management library. The other problem with the “old” system is that JavaScript’s this confuses quite a bit of developers (even more advanced ones) and using this is essential to the proper function of Class components.
In 2018, React Hooks were introduced to deal with the frustrations of that old system. Hooks are meant to give Functional components the versatility of Class components without the added messiness.
There are a number of hooks, but the two main ones that are used most often are useState() and useEffect().
useState()
In order to manage state when using Class components, we use this.setState; but how do we handle state in a Functional component without being able to use this? Enter probably the most important React Hook, useState().
The above example is one of the most common to illustrate useState(): a simple counter. Remember that you will need to import useState (Line 1).
Within our Functional component, “Counter”, we implement our useState() by passing in one argument, the initial state (in this case, 0). Through array destructuring, useState returns two things (variable names can be whatever you choose…but you should make them descriptive and informative):
- the actual name of the state variable (“count” in the example above)
- the function that updates the state by providing a new state (“setCount” in the example above)
When rendered, we will see a button that when clicked will increase the count on the page:
And the cool thing (or at least, one of the cool things) about useState is that you can declare multiple state variables (along with their updating functions) within the same Functional component:
useEffect()
The potential to use LifeCycle methods with Class components made them incredibly appealing. If not for anything else, we’ve all needed to fetch data from some source to improve our React apps, either to display something immediately upon loading a page or to update information on our pages. The hook that gives Functional components this power is useEffect(). According to the React documentation, useEffect “serves the same purpose as componentDidMount, componentDidUpdate, and componentWillUnmount in React classes, but unified into a single API.”
On line 10 above, notice that an empty array is being passed into useEffect. This is incredibly important! Because useEffect also acts as componentDidUpdate, which gets called every time a component gets new props, or a state change happens, you will get stuck in an infinite loop without that array. In essence, the array is there to contain any variables on which useEffect depends in order to re-run; if the array is empty, useEffect runs only once.
Hooks are INCREDIBLY useful and more and more applications are taking advantage of them. In order to use them, you need to keep in mind two important rules:
- Only call them at the top level and NEVER use them inside of loops, conditions or nested functions.
- Do NOT call them from from regular JavaScript functions, only from React function components.
Follow those conditions and hooks can add significant functionality, flexibility and overall elegance to your React apps.