Breaking News: Grepper is joining You.com. Read the official announcement!

caching in react without hook

Amjad Saeed answered on February 3, 2024 Popularity 1/10 Helpfulness 1/10

answer caching in react without hook

caching in react without hook

Comment

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

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

  useEffect(() => {
    // Function to fetch data from the API
    const fetchData = async () => {
      try {
        // Fetch data from the API
        const response = await axios.get('https://api.example.com/data');
        
        // Check if the fetched data is different from the cached data
        const cachedData = localStorage.getItem('cachedData');
        if (!cachedData || cachedData !== JSON.stringify(response.data)) {
          setData(response.data); // Update state only if data has changed
          // Cache the updated data in localStorage
          localStorage.setItem('cachedData', JSON.stringify(response.data));
        }
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData(); // Invoke the function to fetch data
  }, []); // Empty dependency array ensures that this effect runs only once

  return (
    <div className="App">
      <h1>API Data</h1>
      {data ? (
        <div>
          {/* Display the fetched data */}
          <p>{data}</p>
        </div>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}

export default App;

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: caching hook javascript

Link to this answer
Share Copy Link

Contributed on Feb 03 2024

Amjad Saeed

0 Answers Avg Quality 2/10

caching in react without hook

Contents

More Related Answers

caching in react without hook

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.