Thread by @Prathkum

Beginner's guide to the most widely used hooks of React

The useState and useEffect hook

A long thread🧵👇🏻

Start with the useState hook

- You will use it almost 100% in your component. The useState hook is not so tough to understand but there is some hiddent concepts, Let's start 👇🏻

{ 2 / 27 }

Working with React hooks, first thing you need to do is to import the particular hook

It's quite easy👇

📌 import { useState } from "react";

{ 3 / 27 }

useState hook takes a parameter as initial value of state and return an array having two values

- The first value is the current state
- The second value is the function that allow us to change our state

Let me show you the return value by printing it out on console👇

Now we know what useState hook return, it's time to destruct the value

const [currentState, setCurrentState] = useState(0);

🔹 currentState is the value of our state
🔹 setCurrentState is the function using which we can change our state value

{ 5 / 27 }

Let's build a simple counter so that we can understand it effectively.
Though, useState has a very powerful use from this small counters to handling the large forms

Basic boilerplate code for counter👇

{ 6 / 27 }

Now we want to increase our counter by one by user clicks on the "PLUS" button and decrease the value by one when user clicks on the "MINUS" button

Here value/counter is nothing but our current state which we want to change accordingly

{ 7 / 27 }

Here setCurrentState function comes into play

- We will write a handlePlusButton function in order to increase the counter by 1 every time user click plus button

This is pretty easy just call the setCurrentState function and increase counter value just like this👇

{ 8 / 27 }

As now you can see, everytime I click the "PLUS" button my counter increases by one (see attached video)

Here we are changing our counter(state) using setCurrentState(setState) function

{ 9 / 27 }

The other way of updating our state is passing a function inside setCurrentState function.

The function that we pass inside setCurrentState will take one param which is nothing but the previous value of counter

Something like this👇

{ 10 / 27 }

Similarly we can write function for "MINUS" button

{ 11 / 27 }

Let's see what is a problem with updating our state like this 👇

setCurrentState(currentState + 1);

If you call setCurrentState function two times like this, it will still increase our counter by 1 (see attached image)

{ 12 / 27 }

There is an other way to passing our initial state inside useState hook. Like this👇

📌useState(() => 0);

This prevent running our useState hook every single time we render our component. Hence by passing the value like this can speed up our app performance

{ 13 / 27 }

Alright that was pretty much it for useState hook. Let's move onto useEffect hook now 😍

{ 14 / 27 }

If you're familiar with class components then you might know that we have various lifecycle methods but in functional components, we don't have any lifecycle methods.

Instead we have a powerful hook called useEffect💪

{ 15 / 27 }

By using useEffect, you tell React that your component needs to do something after render. React will remember the function you passed (we'll refer to it as our “effect”), and call it later after performing the DOM updates

So let's start by understanding the syntax first👇

useEffect take two parameters, first is a function and second is an array.

The function inside the useEffect will run every single time component re-render.

Consider this piece of code and check the output in next tweet

{ 17 / 27 }

As you can see in the output the function is executed every single time my component re-render👇

{ 18 / 27 }

But let's say if I add some dependency in the array and pass the array as second parameter then useEffect will only run when the value of dependency array change. 

For example let me modify the code little bit so that you can understand it better

{ 19 / 27 }

As you can see when I click on the re-render button, our useEffect run this is because I have passed render state inside dependency array👇

{ 20 / 27 }

📌 Here's an important thing to note is that if you pass an empty array then it will only run on once. 
No matter how many times you render your component, the useEffect will run only once because the value of empty array never going to change 

{ 21 / 27 }

In useEffect we can also perform clean up

If we return a function within the method, this function perform basically a clean up of what we did last time.

{ 22 / 27 }

For example, consider this piece of code

useEffect(() => {

    console.log({ render });

    return () => {
      console.log("I'm cleanup function");
    };
  }, [render]);

Everytime I click the button, first our useEffect perform clean up then run the effect function

23/27

So far we have discussed the basics of useEffect. 

Let's build something useful using it. We will be using useEffect for fetching some COVID data

{ 24 / 27 }

We will print total number of confirmed COVID cases of a specific country enter by user in the input field.

On the basis of the value entered by user we will store that in "country" and change that value in our API link

{ 25 / 27 }

- Make an input field  
- on form submit, store the input value in "country" 

Print the confirmed cases on screen as simple as that🤩

check the entire code👇

{ 26 / 27 }

Great! that's pretty much it for this thread. 

I hope you get a basic overview of both the hooks. Did I miss something? Feel free to add your suggestions down below😉

Peace out ❤️