import React, { useState, useEffect } from 'react';
import axios from 'axios';
function App() {
const [data, setData] = useState(null);
useEffect(() => {
const fetchData = async () => {
try {
const response = await axios.get('https://api.example.com/data');
const cachedData = localStorage.getItem('cachedData');
if (!cachedData || cachedData !== JSON.stringify(response.data)) {
setData(response.data);
localStorage.setItem('cachedData', JSON.stringify(response.data));
}
} catch (error) {
console.error('Error fetching data:', error);
}
};
fetchData();
}, []);
return (
<div className="App">
<h1>API Data</h1>
{data ? (
<div>
{}
<p>{data}</p>
</div>
) : (
<p>Loading...</p>
)}
</div>
);
}
export default App;