In some cases where we don't require to call multiple API calls for the same result.
Using a Map object can be more efficient than using a plain object as a cache, especially when dealing with a large amount of data, as Map objects are optimized for handling key-value pairs. Additionally, using a hash map allows for faster lookup times than using an array or other data structures for caching.
In a real-world application, you may want to implement more advanced caching strategies or use a dedicated caching solution like Redis or Memcached.
But for the simple use case, we can use the in-memory cache mechanism.
Here is example
//using cahed object
import React, { useEffect, useState } from 'react';
const cache = {};
function App() {
const [data, setData] = useState(null);
useEffect(() => {
const fetchData = async () => {
const response = await fetch('https://example.com/api/data');
const jsonData = await response.json();
setData(jsonData);
};
// Check if the data is in the cache
if (cache['cachedData']) {
setData(cache['cachedData']);
} else {
fetchData();
}
}, []);
useEffect(() => {
// Store the data in the cache
cache['cachedData'] = data;
}, [data]);
return (
<div>
{data ? (
<ul>
{data.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
) : (
<p>Loading...</p>
)}
</div>
);
}
export default App;
//using Map
import React, { useEffect, useState } from 'react';
const cache = new Map();
function App() {
const [data, setData] = useState(null);
useEffect(() => {
const fetchData = async () => {
const response = await fetch('https://example.com/api/data');
const jsonData = await response.json();
setData(jsonData);
};
// Check if the data is in the cache
if (cache.has('cachedData')) {
setData(cache.get('cachedData'));
} else {
fetchData();
}
}, []);
useEffect(() => {
// Store the data in the cache
cache.set('cachedData', data);
}, [data]);
return (
<div>
{data ? (
<ul>
{data.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
) : (
<p>Loading...</p>
)}
</div>
);
}
export default App;
Top comments (0)