Learn to use useState and useEffect hooks in React to create dynamic user interfaces

React is a widely used JavaScript library for building user interfaces, with useState and useEffect being two of its most important features

What is useState?

Imagine you have a toy box with many toys in it. Sometimes you want to play with a specific toy, so you take it out of the box and play with it. When you're done playing with it, you put it back in the box. This is how useState works in React!
**useState **is a way to store and update values (like toys in a toy box) within a component. You can use it to keep track of things like whether a button has been clicked or the value of a form input.
Here's an example:

import { useState } from 'react';

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

  function handleClick() {
    setCount(count + 1);
  }

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

This example uses useState in React to keep track of the number of times a button has been clicked. We start the count at 0 by passing it as an argument to useState, and we update the count using the setCount function whenever the button is clicked.

What is useEffect?

In React, useEffect is like watering a plant every day to keep it healthy.
useEffect is a hook that enables us to execute side effects in a component. Side effects include tasks that interact with external systems, such as fetching data from an API, updating the document title, or setting up event listeners. With "useEffect", you can guarantee that your side effects are executed at the appropriate times during the component's lifecycle, such as after it has mounted or updated. This makes it a valuable tool for managing state and behavior in React applications.
Here's an example:

import { useState, useEffect } from 'react';

function Greeting({ name }) {
  const [message, setMessage] = useState('Loading...');

  useEffect(() => {
    fetch(`https://api.example.com/greeting?name=${name}`)
      .then(response => response.json())
      .then(data => setMessage(data.message));
  }, [name]);

  return <p>{message}</p>;
}

We're using useEffect to fetch a greeting from an API and update the message state whenever the name prop changes. We pass an array containing the name prop to useEffect, which tells React to re-run the effect whenever the prop changes.

Conclusion

useState and useEffect are important features in React. useState stores and updates component values, while useEffect runs side effects. Together, they create dynamic and interactive user interfaces that respond to user input and update automatically.

I hope this helped you understand useState and useEffect in React!

My name is Tochukwu Nwosa, a junior frontend developer with React