How to use Hooks (useState and useEffect) in Reactjs

#javascript #react #webdev #frontend

React hooks are a powerful feature introduced in React 16.8 that allow you to use state and other React features without writing a class component. Hooks make it easier to reuse stateful logic and share it across your components, and they can make your code simpler and more expressive.

In this article, we'll look at how to use some of the most common React hooks, including useState, useEffect, and useContext. We'll also discuss some best practices and tips for using hooks effectively in your own projects.

useState
The useState hook is the most basic hook in React, and it allows you to add state to functional components. To use useState, you need to import it from the react package and call it inside your component. Here's an example of how to use useState to add a count to a component:

import { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

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

The first argument to useState is the initial state, and the second argument is a function that you can use to update the state. In this example, we're using an arrow function to increment the count by 1 every time the button is clicked.

useState returns an array with two elements: the current state value and a function to update it. You can use destructuring assignment to assign these values to separate variables, as we've done in the example above.

You can use useState multiple times to add multiple pieces of state to a component. For example, you might have a component with both a count and a name state variable:

import { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('Alice');

  return (
    <div>
      <p>Hello, {name}! You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
      <button onClick={() => setName('Bob')}>
        Change name
      </button>
    </div>
  );
}

useEffect
The useEffect hook is another important hook in React that allows you to perform side effects in functional components. Side effects are actions that have an impact outside of the component itself, such as making an HTTP request or interacting with the DOM.

To use useEffect, you need to import it from the react package and call it inside your component. Here's an example of how to use useEffect to fetch data from an API and update the component's state:

import { useState, useEffect } from 'react';

function Example() {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      const response = await fetch('https://api.example.com/data');