Reacts Hooks are basically used to maintain state of in a React App. React Hooks are introduced in latest version of React which is 16.8, before that state existed only in Class components. When React 16.8 was released, we were able to manage state in functional components as well. Hooks are introduced for functional components only and so cannot be used inside of class components. Today we’ll be talking about two main React Hooks, useState and useEffect.

useState:

useState hook implementation and syntax:

import React, {useState} from "react";const[currState, setState()] = useState(initialState);

In the above implementation initialState can be anything, that is, a number, string, array, object or a Null value.

Some examples using useState() are:

import React, {useState} from "react";function Counter(){const[count, setCount] = useState(0);return{
<div>
<p>Count: {count}</p>
<button onClick={() => {setCount(count+1)}}>Increment</button>
</div> }
}

useEffect:

So what are side effects in React?

Side effects are all those logic or calculations that do not contribute directly to the output. These can be fetch requests, manipulating the DOM directly, or can be timer functions implemented etc.

function Greet({ name }) {
const message = `Hello, ${name}!`; // Calculates output

// Bad!
document.title = 'Greetings page'; // Side-effect!
return <div>{message}</div>; // Calculates output
}

In the above example we can see that document.title isn’t contributing to the output so it’s a bad practice. So we can correct it using useEffect Hook.

import React, {useEffect} from 'react';function Greet({ name }) {
const message = `Hello, ${name}!`; // Calculates output
useEffect(() => {
//Good
document.title = 'Greetings page';
}, [])
return <div>{message}</div>; // Calculates output
}

This is a good practice as the document.title will now render once when the whole app renders and not again and again.

So we’ve seen useEffect in action, now let’s see it’s implementation. useEffect has the following basic syntax:

useEffect(callback, [dependencies])

callback is the function which executes the side effect logic and dependencies is an optional array of variables. useEffect only executes callback if any dependency changes it’s value.

So basically we put our side-effect logic in callback function and dependency, if any, in the dependency array and can control when to execute the useEffect depending on the dependencies passed.

Now let’s see how useEffect depends on the dependency array.

  1. If no dependency array is passed:
import React, {useEffect} from 'react';
function Greet(){
useEffect(() => {
// Runs after every rendering
})}

As you can see I’ve not passed any array to the useEffect Hook, so now what happens is that the callback function is executed every time the app renders.

2. If we pass an empty array:

import React, {useEffect} from 'react';
function Greet(){
useEffect(() => {
// Runs only once
}, [])}

In this case when I passed an empty array, the callback function runs only once when the app renders initially and that’s it.

3. When we pass certain variables.

import React, {useEffect} from 'react';
function Greet(){
useEffect(() => {
// Runs as and when any prop changes
}, [var1, var2, var3,...])}

In this case we passed certain variables or props, so the callback is executed every time a variable changes it’s state.

This is some pretty basic stuff about the two React Hooks useState and useEffect, soon I’ll post about more React Hooks, so stay tuned. If you like this blog do comment or like and visit my youtube channel where I post Leetcode solutions. Link is mentioned below. See you next time.

Still have questions about useEffect() and useState()hook? Ask in the comments below!

Youtube: https://www.youtube.com/channel/UCD_Al-U9pUeQOXDkhYc_otg