Functional components are very popular, mainly because of their simplicity and ease of reading. Until few years ago, functional components only served presentational purpose. Meaning that they were useful as small, self-contained pieces of UI, but not for anything related to logic. The introduction of hooks has changed that, and now functional components are as capable as their class counterparts.
If you’re a beginner learning React, writing functional components is the best way to go. Syntax is much more straightforward and overall structure of the component is easy to understand. Every function has a return statement that returns JSX code that describes layout of the UI. Above the return statement, in body of the function, you can also write JavaScript code that will be executed every time component renders (or re-renders). This is an easy way to add side-effects to your React component.
So, without further ado, let’s dive into React hooks. First, let’s discuss two of the most commonly used hooks in React – useState and useEffect hooks.
useState
As you can probably guess, this hook allows you to add state functionality to functional components. It works a little differently than in class components, because useState allows you to create one variable to store a state value, and also create a function that updates it. For example, here’s how you would create a count state variable, and a setCount variable to update it.
const [count, setCount] = useState()
In this case, count will be a state variable. As you already know, you can not directly change the state in React. in class components, you must use setState() to update it. In this case, useState gives us a function to update this one particular state variable.
We need brackets around count and setCount to store two values returned by the useState() hook. One is an empty variable to store the state value, and another is the function to update it. You could also customize the initial value of count variable by passing argument to the useState() hook. The argument would become the initial value for the state variable. This functionality is useful if you want to set a default value for an input or any other temporary figure in your app. At this point, our count state variable is not restricted to any type. It can be a string, integer, Boolean, or even an object. You can use TypeScript to bind state variables to a certain type.
Once defined, you can use the count variable throughout the app. You can even embed it inside JSX, so your component actually displays the latest count figure. You can also use setCount with a button, so clicking it would increase the amount stored in count variable.
That code would look something like this:
setCount(count + 1)}>Click me to increase count
As you can see, the overall code looks pretty similar to HTML. It’s actually JSX, templating language for React. It is intentionally similar to HTML, but has several key advantages. One is the ability to include JavaScript code inside regular layout. In this example, whenever a button is clicked, our app is going to call the onClick function. To do this, we need to wrap JavaScript expressions with curly braces, so JSX knows to interpret it dynamically. This guide is a great resource on how to handle changes to input elements in React.
useState hook provides an easy alternative to managing state in class components. Beginners often struggle to understand the setState method and using it to update only one of many properties in the state. With useState, they can update just a single variable, which corresponds to property in the state object.
Generally, state is very useful for managing forms and all things related to forms. For example, here's how to clean up the form after it is submitted.
useEffect
Second most important is the useEffect hook. As the name suggests, it allows us React developers to implement effects inside our React components. Side effects are useful for a number of reasons. The most common is loading external data or other asynchronous operations with external APIs.
If you’re coming from class components, you probably know that useEffect is like componentDidMount, componentDidUpdate, and even componentWillUnmount all rolled into one. useEffect decides when to run a side effect depending on the dependency array.
The useEffect hooks takes two arguments – the function that runs the side effect and the dependency array. The second argument controls how often the side effect runs. Dependency array is essentially the list of all state variables useEffect should ‘look out for’. For example, you might want to customize it so that changes to state variable A don’t automatically run the side effect. An empty dependency array means that side effect runs only once, when the component mounts. For example, you might want to show user bottom of the page. In that case, you would implement a scroll-to-bottom feature when the component mounts. This article breaks down necessary steps for implementing this feature.
Finally, third optional argument to the useEffect hook allows you to unsubscribe when the component dismounts. This is an advance feature, but generally think of subscriptions as making a connection to a third party API during the lifetime of your app. Unsubscribing means stopping the connection before the component shuts down, so there are no bugs.
Other hooks
There are plenty of other important hooks in React. You can, and developers often create their own custom hooks. In fact, many of the supporting libraries for React now use hooks to implement certain important features, from navigation to tables and much more.
useRef is an important one, used for creating references to DOM elements in React. It is central to implementing a scroll to bottom feature, for example. useContext is alternative to props and allows you to make data available throughout your app without manual prop drilling.
Summary
In short, hooks are an incredibly important aspect of React. If you’re new to React, you are probably learning by writing functional components. So you need to know about hooks, especially useState and useEffect, two most important hooks in React.
Top comments (0)