React's useState & useEffect Hooks

Interestingly, Reactjs is still relevant in 2024 even though people are migrating to Nextjs. The reason is simple, all the basics of Reactjs inspired new frameworks like Nextjs.

let's discuss Reactjs Hooks, an amazing feature that reduces the burden on developers.

What is a hook in Reactjs - Basically, it is a simple and interesting feature that allows you to "hook" your functions into a function-based component or a Reactjs component, and thanks to hooks, the lifecycle functions in a class-based component are gone for good. If we take an analogy, hooks will sound simpler - Imagine that you are the captain of a spaceship and Hooks in React are like special tools on your spaceship that will make your journey through the galaxies smoother.

Two superstar hooks are popular in the Reactjs world

useState & useEffect

let's discuss useState first -

So what is useState - useState allows you to manage state (information or data that can change over time) within functional components.
It gives you a way to create and update state variables (data or any information) without the need for class components.

Let's take an analogy, we can continue from the spaceship analogy to better understand useState

Imagine having a fuel gauge that shows you the fuel availability (state) of your spaceship. useState is like a fuel gauge that shows how much fuel you have, plus in useState function you get a special tool (setFuel) to adjust fuel availability.

below is a sample code:

// Import React and useState hook from React library
import React, { useState } from 'react';

// Functional component for the fuel gauge
function FuelGauge() {
  // State variable 'fuel' and its corresponding 'setFuel' function initialized with an initial value of 20
  const [fuel, setFuel] = useState(20);

  // Render the component
  return (
    <div>
      {/* Display the current fuel consumption */}
      <p>Fuel consumption {fuel} liters</p>

      {/* Button to decrement the fuel when clicked */}
      <button onClick={() => setFuel(fuel - 1)}>Use fuel</button>
    </div>
  );
}

In this piece of code, fuel represents the current fuel availability status, which is 20 by default, and setFuel() is a utility, if there are changes, setFuel() will update the fuel availability status. onClick is a property, when you click on "Use Fuel" button, onClick will run the function and setFuel() will update the value of fuel.

Now it's time to discuss useEffect:

What is useEffect - The useEffect hook allows you to perform side effects in functional components. Side effects are actions that affect things outside of directly rendering the component, something like data loading where you fetch data using an API.

Again let me explain this with an analogy, yes it is a spaceship analogy.

Imagine your spaceship has this incredible star map (data or information) to guide you through the vast galaxy. Now the Star Map Tracker (useEffect) is your special crew member whose sole job is to keep a close eye on changes to the star map. Whenever a new star appears (data change) it will help you update the Star map.

below is a sample code:

// Import React, useState, and useEffect hooks from the React library
import React, { useState, useEffect } from 'react';
// Functional component for the space map
function spaceMap(){
// State variable 'starMapped' and its corresponding 'setStarMapped' function
const [starMapped, setStarMapped] = useState()
 // useEffect hook to perform side effects after component renders
useEffect(() => {
  // Tracker does something
  console.log('Map update!');
};, [starMapped]);

 return (
    <div>
      <p>The star is located in space: {starMapped} </p>
      <button onClick={() => setStarMapped(starMapped + 1)}>Click if star is located</button>
    </div>
  );
};

Something interesting is happening in the code above because you understand the concept of useState. Inside the spaceMap() function, whenever you click the "Click if star is located" button, then setStarMapped() updates the starMapped value, which creates a side effect and the useEffect hook goes into action. The useEffect hook then updates the map.

A few things to remember:

By default, React runs the effect function every time a component is rendered. However, you can control when it fires with a dependency array, something like setMapped used in an useEffect function in above code.
if there is no dependency, you can use an empty array something like this [].

Thanks for reading I hope you enjoyed it.