Sometimes, we want to clear browser cache in React.

In this article, we’ll look at how to clear browser cache in React.

How to clear browser cache in React?

To clear browser cache in React, we can get the cache data from the window.caches property.

Then we call then with a callback that calls delete to clear the cache.
For instance, we weite:

import React, { useEffect } from "react";

export default function App() {
  useEffect(() => {
    if ("caches" in window) {
      caches.keys().then((names) => {
        names.forEach((name) => {
          caches.delete(name);
        });
      });
    }
  }, []);

  return <div>hello world</div>;
}

We call caches.keys to get the cache object.

Then we call then with a callback that takes the names array with the which is set to the cache keys array.

Next, we call names.forEach with a callback that calls caches.delete with name to delete the cache entry.

Conclusion

To clear browser cache in React, we can get the cache data from the window.caches property.

Then we call then with a callback that calls delete to clear the cache.