Hooks allow using state inside of React functions, that was previously only allowed to be used in classes. There are multiple hooks that can be used. But, there are some important hooks that we would have to use more often in any application.

In this post, we will be learning about the following react hooks.

1. useState()

2. useEffect()

useState()

This hook is used to store state inside of functional components. This has a kind of flow of using it in an app.

First, we import the useState hook from the react library.

import { useState }from 'react'

Then, you need to have some things to store the data using useState, it is the name of the state variable, and a variable to set the state (updating the value stored in the state)

const [name,setName] = useState("")

The way showed above is the conventional way of using useState hook. name is the name of the state variable, and setName is a method to update the state variable. It is a good practice to name that with the word set together with the name of the state variable. Now, I have passed empty strings inside of useState(), this means that I want the default value of the variable name, to be equals to nothing and the type of the variable to be a string.

You could change the value of the variable name to John with the way below.

setName("John")

You could call this method inside of a function, or on a button click or any way. That is the useState() hook. Now let's get to the other type of hook.

useEffect()

This is a hook that allows you to run a piece of code only when something happens. For example, you would want to make an API call only when the user changes the search input or etc.

First, you would import useEffect().

import { useEffect } from 'react'

Then let's just say for example you want to console log the input value every time the user changes the input.

useEffect(() => {
    console.log(inputValue)
},[inputValue])

This means that you are running an arrow function that console logs the input of the user every time there is a change in the input value.

useEffect(() => {
    console.log(inputValue)
},[])

You could put empty brackets in the area that says inputValue to the only console log the input once when the website loads, meaning that you want to run the piece of code inside of the useEffect hook only once when the website loads.

This would be a basic but fundamental introduction on hooks that are used more often. If you want to learn more and expand your knowledge on React hooks, I have many tutorials on my YouTube channel that cover React hooks, and I have built many projects that involve React hooks.

So, if you think you need more understanding of React hooks, I would suggest watching the tutorial and learning more.

📰 News website using React - Context API & Hooks

📞 Contact form using React and Firebase - Hooks and Cloud firestore

😀 That is going to be it for this post.

I hope you understood the fundamentals of React hooks and are able to use it on your own projects as well. If you have any questions, leave a comment and I will get back to you as soon as possible. If you liked this post, leaving a like would be appreciated.

I would appreciate if you follow me online.

🐦 Twitter - twitter.com/shanjai_raj

💼 Linkedin - linkedin.com/in/shanjai-raj-290b631bb

👩‍💻 Github - github.com/shanjairaj7

Thank you! I'll see you next time. 👋