Everything You Need to Know About React Hooks

Everything You Need to Know About React Hooks

One of the best things about React is the use of class and functional components to build websites. Before the introduction of React Hooks, we had to make every class that we wanted to change a state or use a component life cycle method a class component. However, this changed with React 16.8 and the introduction of Hooks.

React hooks allow the developers to use state and other lifecycle methods in a functional component. React recommends using as many functional components as possible in the place of class components. The performance difference may be negligible in small projects. However, it will help big projects quite a bit.

React developers at Morean often work with advanced hooks. However, hooks are not the easiest concepts to learn in React. In this article, we’ll see some of the commonly used React hooks and their implementations. We’ll also discuss where you, as a developer, can use these hooks to make the best of your React application.

Commonly Used React Hooks

1. The useState Hook

The useState hook is one of the most popular and commonly used hooks in React. The function of this hook is to create a state along with a method to update that state variable. So, instead of using getstate and setstate, we can use the variables we declare with this hook to get the work done.

Here is a usage example of the useState hook

In the above function, we declare two variables counter and setCounter with the useState hook and initialize the value to 0. But, of course, we can also specify an initial value by replacing the 0 with that number.

The use of ‘[ ]’ indicates that the useState() hook returns multiple variables.

Now, we can call the above state variable ‘counter’ by doing the below.

We can also change the value of the counter variable with the code below.

The setCounter method updates the value to a value that’s one more than the previous number.

However, since we’re using a previous state and React state updates are not immediate, we could run into errors or unexpected behavior. To solve this, we can update the code to the one below.

2. The useEffect Hook

The useEffect hook is another majorly used hook in React development. We can use this hook to trigger functions that we want to run when the render is complete. The useEffect hook is the functional equivalent of the componentDidUpdate hook and a few other hooks.

Let us now see an example of the useEffect hook.

The above code will get the data from the given URL when the page loads and prints the data to the console. We can also use the useEffect hook to send data, authentication checks, and authorization. Understanding the usage of this hook is essential to be a React developer as we need it for any major operation on the website.

Usually, the useEffect hook runs whenever the page renders. However, we can change it to run only when a specific component changes. Let us see how that would work.

The above code only runs when the ‘inputDataRetrieve’ state variable changes. Thus, we can take advantage of this feature and prevent the hook from running every time the page reloads.

Sometimes, we only want a hook to run once when the page first loads. We often come across such situations when getting data from an external source. We can do that with the below code.

By leaving the ‘[]’ empty, we’re telling React that we only want this to run when the page loads. We can then get the data and store it in a state variable to reduce the load on our servers. Moreover, this method will be helpful if we’re running into an infinite loop error with the state variables.

3. The useContext Hook

The useContext hook is one of the lesser-used hooks among the most popular ones. However, if you only worked on small to medium-sized websites without too many variables to manage, you probably don’t know of this hook at all. The useContext hook accepts a context object. Moreover, it can also return the current value of that context. We call this value the context value.

The usage of the useContext hook is a bit complicated compared to the other hooks. Let us see how to call the hook first.

The above code calls the context and gets the context value of ‘TestContext’. It then stores this value in the ‘contextValue’ variable. Now, let us see the full context code in usage.

In the above code, we first defined the ‘themes’ object with two variables: theme1 and theme2. Then, using the ‘createContext’ hook, we created the context variable, ‘NavbarThemeContext’. In the App function, we then used the NavbarThemeContext.Provider to provide a theme value of 2 to our Navbar.

The above code may be a tad difficult to comprehend. Don’t worry, though. You will get used to it when we start using the hook in our websites.

4. Other Hooks

Along with the ones mentioned in this article, there are a few more hooks that we don’t use as much. These hooks are specific and you can know more about such hooks in the Hooks API reference on React.js’ official website.

Conclusion

Hooks are one of the essential concepts in React. We need to understand hooks in order to use the functional components effectively and take advantage of the flexibility.