What are some effective data fetching strategies in React?

What are some effective data fetching strategies in React?

There are several strategies for data fetching in React, including using hooks like useEffect, context API, and libraries like Axios or Fetch API.

Can you explain how to use the Fetch API with useEffect?

Sure! You can use the Fetch API inside the useEffect hook to fetch data when the component mounts. Here's a basic example:

import React, { useEffect, useState } from 'react';

const MyComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
};

What about using Axios instead of Fetch?

Using Axios is quite similar! You can install it via npm and then use it in your useEffect like this:

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const MyComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    axios.get('https://api.example.com/data')
      .then(response => setData(response.data));
  }, []);

  return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
};