React Cache Refresh 🚀

A modern, lightweight React utility that automatically detects new app versions and clears browser caches to ensure users always get the latest version of your application.

✨ Features

- Automatic Version Detection: Compares current app version with latest deployed version
- Smart Cache Clearing: Clears all browser caches (Service Worker caches, HTTP caches)
- React 19 Compatible: Built with modern React patterns and hooks
- TypeScript Support: Full TypeScript support with type definitions
- Reload Protection: Prevents infinite reload loops with built-in cooldown mechanism
- Error Resilient: Gracefully handles missing meta.json or network errors
- Configurable Logging: Hide console logs in production with hideConsoleLogs option
- Custom Loading States: Show custom loading components during version checks
- Zero Dependencies: Only requires React as a peer dependency

📦 Installation

``bash
npm install react-cache-refresh


or

First, create a meta.json file in your public directory with your app version:

`json
{
"version": "1.0.0"
}
`

$3

`tsx
import React from "react";
import { CacheBuster } from "react-cache-refresh";
import App from "./App";

const VERSION = "1.0.0"; // This should match your package.json version

function Root() {
return (
currentAppVersion={VERSION}
loadingComponent={

export default Root;
`

$3

Make sure to update the meta.json file with the new version number whenever you deploy:

`json
{
"version": "1.0.1"
}
`

📖 API Reference

$3

The main component that wraps your application and handles version checking.

#### Props

| Prop | Type | Required | Default | Description |
| ------------------- | ----------- | -------- | ------- | ----------------------------------------------------- |
| children | ReactNode | ✅ | - | Your app components |
| currentAppVersion | string | ✅ | - | Current version of your app |
| loadingComponent | ReactNode | ❌ | null | Custom loading component (shown during version check) |
| hideConsoleLogs | boolean | ❌ | false | Hide console logs for version checking process |

#### Example with Custom Loading and Options

`tsx
import React from "react";
import { CacheBuster } from "react-cache-refresh";
import App from "./App";
import LoadingSpinner from "./components/LoadingSpinner";

const VERSION = "1.0.0";

function Root() {
return (
currentAppVersion={VERSION}
loadingComponent={}
hideConsoleLogs={process.env.NODE_ENV === "production"}
>


);
}
`

$3

#### clearAllCaches()

Manually clear all browser caches.

`tsx
import { clearAllCaches } from "react-cache-refresh/utils";

const handleClearCache = async () => {
try {
await clearAllCaches();
console.log("All caches cleared successfully");
} catch (error) {
console.error("Error clearing caches:", error);
}
};
`

🔧 Advanced Usage

$3

For production environments, you might want to hide the version checking console logs:

`tsx
import React from "react";
import { CacheBuster } from "react-cache-refresh";
import App from "./App";

const VERSION = "1.0.0";

function Root() {
return (
currentAppVersion={VERSION}
hideConsoleLogs={process.env.NODE_ENV === "production"}
>


);
}
`

$3

`tsx
import React from "react";
import { CacheBuster } from "react-cache-refresh";
import App from "./App";

// Get version from environment variable or package.json
const VERSION = process.env.REACT_APP_VERSION || "1.0.0";

function Root() {
return (
currentAppVersion={VERSION}
hideConsoleLogs={process.env.NODE_ENV === "production"}
>


);
}
`

$3

`tsx
import React from "react";
import { CacheBuster } from "react-cache-refresh";
import App from "./App";

const LoadingComponent = () => (
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "100vh",
}}
>