React Hooks are the functions which "hook into" React state and lifecycle features from function components. Hooks allows you to manipulate state and other React feature without writing a class. Let's talk about widely used hook

useEffect hook at a glance 🧵👇🏻

useEffect hook is the heart of React functional components

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
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

3/15
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

{ 4 / 15 }
As you can see in the output the function is executed every single time my component re-render

{ 5 / 15 }
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

{ 6 / 15 }
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

{ 7 / 15 }
🚨 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

{ 8 / 15 }
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.

{ 9 / 15 }
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

10/15
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

{ 11 / 15 }
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

{ 12 / 15 }
- 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

{ 13 / 15 }
Check out the source code on this link in more accessible form

https://t.co/r9G6i7EAIW

{ 14 / 15 }
Awesome! I think we have covered everything related to useEffect hook. It is little tough so try to play around with the code. I hope you like this thread ❤️

Peace out 😉

More from Pratham

5 amazing GitHub repositories for every self taught developer

A Thread 🧵

1️⃣ Computer Science

🎓 Path to a free self-taught education in Computer Science!

🔗
https://t.co/67jB5zqIes


2️⃣ Free Certifications

Curated list of free courses & certifications

🔗 https://t.co/4XtlAVlovs


3️⃣ Free Programming Books

📚 Freely available programming books

🔗 https://t.co/eOWLCtwtIV


4️⃣ JavaScript Question

A long list of (advanced) JavaScript questions, and their explanations ✨

🔗 https://t.co/UvEl1Esvh3
6 websites that are so fantastic you'll wonder how they even exist (for developers):

1. ScribeHow (@ScribeHow)

Turn any process into a step-by-step guide, instantly.

• Click record
• Do the thing you want to show someone (like how to reset a password)
• Get a beautiful auto-generated guide

No manual screenshots.

🔗
https://t.co/8EnpUIvIeR


2. SourceAI

Explain what you want in plain English, and AI will generate a code snippet for you.

🔗 https://t.co/KFLbBBjllm


3. Blackbox

Turn any questions into a code snippet or extract a code snippet from a video.

🔗 https://t.co/6Z4fM5ieWn


4. Figstack

One-stop for developers.

• Understand code in any programming language
• Translate programming languages
• Automate documentation for your functions
• Get the time complexity of your program

🔗 https://t.co/koY4cmciR3
Use these 5 websites to learn web development for free in 2023 (take a look):

1. Codedamn

All-in-one platform for learning web development:

• Hands-on practice and projects bundled
• Video content along with interactive labs, quizzes, and articles
• Every course comes with a certificate
• code brushes AI in playgrounds

🔗
https://t.co/mXmUtJZnOU


2. Codepip

Codepip is the platform for your favorite web development games. Gain an edge in your following interview or project.

🔗 https://t.co/MjHNsLvkiL


3. RapidAPI Comics

Learn API development with RapidAPI Comics (sketch notes and fun analogies).

🔗 https://t.co/KONorFomgu


4. JS Visualizer 9000

Learn JavaScript by visualizing your code.

🔗 https://t.co/9NId4GjGAq

More from Webdev

You May Also Like

Still wondering about this 🤔


save as q