reactjsHow can I use the useEffect hook to handle asynchronous operations in React?

The useEffect hook is a powerful tool for handling asynchronous operations in React. It allows you to define a callback function that will be executed after the component has been mounted and whenever the component's props or state have changed. This callback function can be used to perform asynchronous operations such as fetching data from an API or making a request to a server.

Example

import React, { useEffect } from 'react';

const App = () => {
  useEffect(() => {
    fetch('https://example.com/data')
      .then(res => res.json())
      .then(data => console.log(data))
  }, [])

  return <div>My App</div>;
}

Output example

[
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' }
]

In the example above, the useEffect hook is used to make an asynchronous request to an API and log the response data to the console. The second argument of the useEffect hook is an empty array, which tells React that the callback function should only be executed once (when the component is mounted). If the array contains any values, the callback function will be executed whenever those values change.

The useEffect hook provides a great way to handle asynchronous operations in React, allowing you to keep your code clean and organized.

Parts of the code and explanation:

• import React, { useEffect } from 'react';: This line imports the useEffect hook from the React library.

• useEffect(() => {: This line declares the useEffect hook, which takes a callback function as its first argument.

• fetch('https://example.com/data'): This line makes an asynchronous request to an API.

• .then(res => res.json()): This line parses the response data as JSON.

• .then(data => console.log(data)): This line logs the response data to the console.

• }, []): This line is the second argument of the useEffect hook, which tells React that the callback function should only be executed once (when the component is mounted).

Helpful links

• React useEffect Hook
• Fetch API

Edit this code on GitHub