React Hooks: useState & useEffect

Hooks are functions that let developers "hook into" React state and lifecycle features from function components.These Hook features were introduced in React version 16.8.

React Hooks Rules

👉 Hooks should be called inside a React function

Don’t call Hooks from regular JavaScript functions.

👉 Hooks can only be called at the top level of a component

Don’t call Hooks inside loops, conditions, nested functions, or try/catch/finally blocks

How to use the useState Hook

To use the useState Hook in your project you must first import it into your project.

import { useState } from 'react';

Then following the rules mentioned above, call useState at the top level of your component to declare a state variable.

const [state, setState] = useState(intialState);

state -> The first variable is known as the value of the state.

setState -> The second variable is a function used to update the state.

intialState -> The value you want the state to be initially. It can be a value of any type, but there is a special behavior for functions.

Example :-

import React, { useState } from 'react';

function App() { 

    const [count, setCount] = useState(0); 

return ( 
    <div>
        <p>You clicked {count} times</p>
        <button onClick={() => setCount(count + 1)}> Click me
        </button>
    </div>
    ); 
}

According to the above example count and setCount are the two variables of the state Hook, where count is the current value of the state and setCount is used to update the value of the state. Also, the initial value of the state is set to 0. Therefore, whenever the button is clicked, setCount will update the value of the count.

How to use the useEffect Hook

The useEffect hook in React is a useful tool for functional components. It helps manage tasks that aren't directly related to displaying content, like fetching data from the internet, retrieving data from API endpoints, or setting up timers. It can also be used to update components after they've been rendered, making your app more dynamic.

To use the useState Hook in your project you must first import it into your project.

import { useEffect } from 'react';

useEffect accepts two arguments. The second argument is optional. Also the function that we pass as the first argument could be an arrow function.

useEffect(<function>, <dependency>)

If there are no dependencies passed to the hook, it will Run on every render.

If we pass an empty array as the dependency, it will Run only on the first render.

If we pass props or state values as the dependencies, it will Run on the first render and also Any time any dependency value changes.

Example :-

import { useState, useEffect } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  const [calculation, setCalculation] = useState(0);

  useEffect(() => {
    setCalculation(() => count * 2);
  }, [count]); // <- add the count variable here

  return (
    <>
      <p>Count: {count}</p>
      <button onClick={() => setCount((c) => c + 1)}>+</button>
      <p>Calculation: {calculation}</p>
    </>
  );
}

In the code example above, we already know how the useState Hook works by now! As for the process of the useEffect in the above code, it will run on the first render and also every time the value of count changes.

Thank you for taking the time to read this article. I hope you found the information useful and that it helped you understand how the useState & useEffect hook works in React.

I will look forward to sharing more insights with you in future articles. Happy Coding 😊!!!

References

https://www.freecodecamp.org/news/how-to-use-the-usestate-and-useeffect-hooks-in-your-project/

https://www.w3schools.com/react/react_useeffect.asp

https://react.dev/reference/react/useState#avoiding-recreating-the-initial-state

React Hooks ( useState & useEffect )

React Hooks Rules

How to use the useState Hook

How to use the useEffect Hook

References