Hello everyone and welcome to another video. In this video we are going to explore hooks! First we're going to go through the introductory concepts of React Hooks. Immediately after, we will dive deeper in Hooks and further improve our knowledge with not one, but two demo application projects we're going to refactor to use hooks.

The best way to learn something new is to do it in practice, so that's exactly what we're going to do.

The first one is going to be a demo app that will fully cover all the most important concepts. For the second one, we're going to refactor a YouTube Clone Application, since that was the most requested comment on the corresponding youtube video of that project.

If the app stops working for you at a certain step, it is possible that a small typo occurred. Feel free to refer to this GitHub repository for the first demo app, and to this GitHub repository for the YouTube Clone App. You can copy the code, so you can continue working on the project immediately without trying to solve errors for hours. Also, feel free to give them a star! ⭐ :)

Introduction

Recently the React team decided to bring Hooks into our lives. I am pretty sure that you have heard of Hooks, though there are still a lot of people that haven’t taken the time or gotten the chance to experiment with them.

In this post, I will be showing you reasons why you should be using the new Hooks in your future work. Furthermore, I will be explaining how you can use them best and hopefully motivate you to build awesome things with Hooks.

Table of contents

  1. Why would you want to use hooks
  2. React without Hooks
  3. Why do we need hooks
  4. Rules of Hooks
  5. useState and useEffect Hooks
  6. Custom hooks
  7. Summary and next steps

Just a note

Along with writing this article, I have also created a YouTube video!

In the video, we will first refactor the demo app and explain the most important React Hooks concepts, and then we're going to test our knowledge on refactoring the YouTube Clone App previously built using class based components.

Here's a link to the full video: https://www.youtube.com/watch?v=-9M9CGSd69I.

React Without Hooks

If we wanted to get a quick overview of different possibilities current React components offer us, we could summarize it simply:

Class based components are smart, they offer state management and lifecycle methods.

Function based components are dumb, they practically don't do much, other than returning some JSX.

Everytime that we write a functional component, and we figure that we might need to use state or lifecycle methods in it, we need to completely refactor it to a class based component. Why isn't there a simpler way? Now there is.

What are Hooks and why do we need them

With the introduction of Hooks, functional components finally get some of the features that they deserved. So, what exactly are hooks?

Hooks are functions that let you "hook into" React state and lifecycle features from function components. React provides a few built-in Hooks like useState and useEffect. You can also create your own Hooks to reuse stateful behavior between different components.

Hooks are completely opt-in. You can try Hooks in a few components without rewriting any existing code.

What do Hooks solve? In class components it’s hard to reuse stateful logic between components. Also, complex class components become hard to understand and even harder to read.

Motivation for using Hooks: We saw the rise and fall of Functional Programming, but in the past few years, we are witnessing a steep rise in Functional Programming over OOP. This changing trend brought our focus on functional programming making our code:

  1. Easier to read and test
  2. Less code
  3. Performance boost for functional component

Hooks: Making our lives simpler:

  1. Introduction to hooks have allowed reusing of stateful logic between components: This can be achieved by writing our own custom hooks that can be used inside any components. For eg. creating a custom hook for API calls.
  2. Writing complex components will become easier: Many a times a lot of business logics are written in our life cycle method making it difficult to understand and debug. Hooks instead allows us to separate these logics into smaller, isolated functions.

TL;DR: Hooks give us the possibility to extract stateful logic which before could only be used in Class components and allow us to test this logic separately and reuse this logic.

Rules of Hooks

Hooks are simple. They are nothing more than JavaScript functions. But there are two important rules that React team imposed so that hooks can work properly.

First rule is that we can: Only call Hooks at the top level.
Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function. By following this rule, you ensure that Hooks are called in the same order each time a component renders. That’s what allows React to correctly preserve the state of Hooks between multiple useState and useEffect calls.

Second rule is that we can Call Hooks from React function components.
Don’t call Hooks from regular JavaScript functions. Instead, you can:

  • ✅ Call Hooks from React function components.
  • ✅ Call Hooks from custom Hooks.

By following this rule, you ensure that all stateful logic in a component is clearly visible from its source code.

Built in Hooks

As I previously mentioned, React already provided us with some built in hooks. In this article, were going to cover two most used built in hooks: useState and useEffect.

useState Hook:

In order to use states in Functional Component, React has now introduced useState. Let’s see how to use this hook:

const [count, setCount] = useState(0);

Here useState declares a state variable which is named count (name can be anything), useState accepts none or one argument which is the initial state value, here I am passing a default value as 0, unlike Class component we don’t need to set value of state in form of an object, it can be of any data type like string, number and so on.

useState returns an array which includes the current state and a function that updates it. In the above syntax setCount is the function returned that allows us to update the value of the state count. Example: setCount(20), value of count is updated from 0 to 20.

useEffect Hook:

useEffect is a lifecycle Hook for functional components that combines componentDidMount, componentDidUpdate and componentWillUnmount. useEffect is named useEffect because this is where you carry out your side effects, e.g., API Fetching, Subscriptions or Events.

Even though it is a lifecycle method like the others, in a way it’s better than the rest. The reason for it being better is that you can make use of useEffect multiple times within a single component, which allows you to split up and keep related logic grouped together and maintaining readability of your code.

Custom hooks:

When we want to share logic between two JavaScript functions, we extract it to a third function. Both components and Hooks are functions, so this works for them too!

A custom Hook is a JavaScript function whose name starts with ”use” and that may call other Hooks. More on that in the video.

Summary:

Hooks are the new trend in the React world. They will not replace Classes, but the idea is to use them more and more, because of its simplicity yet added functionality. Use them as much as possible, and try the Custom Hooks, since there is probably somebody who struggled with a problem and uploaded the solution as a React Hook.

Want to put this knowledge to the test

Now is the time that you use the knowledge you just gained about React Hooks. Coding concepts should be done first in theory and then in practice. Because of that, I've created a video where you can follow and code along. In the video, we're going to refactor a demo application to further explain all the different concepts of hooks, and we're going to refactor a real app from class based components to hooks.

Link of the video: https://www.youtube.com/watch?v=-9M9CGSd69I

That’s it!

You made it all the way until the end! Feel free to ask any questions and leave feedback or critique.

Most helpful would be the support on YouTube since I recently created a channel! Click here, there is a lot of interesting stuff coming soon! :)

If you're wondering how to put this project on GitHub so you can display it on your portfolio, here's the video I did on: Git Commands.