keepalive-for-react

To improve production application development, you can enable type-aware lint rules by configuring parserOptions and using stricter TypeScript ESLint configurations.

1. Update languageOptions.parserOptions to include your project's tsconfig files and the current directory.
2. Replace tseslint.configs.recommended with tseslint.configs.recommendedTypeChecked or tseslint.configs.strictTypeChecked.
3. (Optional) Add ...tseslint.configs.stylisticTypeChecked.

This ensures ESLint can leverage TypeScript's type information for more accurate linting.

export default tseslint.config({
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})

To use recommended React linting rules, install eslint-plugin-react and update your eslint.config.js. You must specify the React version in the settings object and include the plugin and its recommended rules in the configuration.

// eslint.config.js
import react from 'eslint-plugin-react'

export default tseslint.config({
  // Set the react version
  settings: { react: { version: '18.3' } },
  plugins: {
    // Add the react plugin
    react,
  },
  rules: {
    // other rules...
    // Enable its recommended rules
    ...react.configs.recommended.rules,
    ...react.configs['jsx-runtime'].rules,
  },
})

For production applications, it is recommended to enable type-aware linting by updating the ESLint configuration.

1. Configure parserOptions within languageOptions to point to your tsconfig files.
2. Replace standard recommended configs with type-checked versions:
   • Use tseslint.configs.recommendedTypeChecked or tseslint.configs.strictTypeChecked instead of tseslint.configs.recommended.
   • Optionally add ...tseslint.configs.stylisticTypeChecked.

export default tseslint.config({
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})

To use React-specific linting rules, install eslint-plugin-react and update your eslint.config.js. You must set the react.version in the settings object and include the recommended rules and jsx-runtime rules in the rules object.

// eslint.config.js
import react from 'eslint-plugin-react'

export default tseslint.config({
  // Set the react version
  settings: { react: { version: '18.3' } },
  plugins: {
    // Add the react plugin
    react,
  },
  rules: {
    // other rules...
    // Enable its recommended rules
    ...react.configs.recommended.rules,
    ...react.configs['jsx-runtime'].rules,
  },
})

Install the core package using your preferred package manager:

npm install keepalive-for-react

yarn add keepalive-for-react

pnpm add keepalive-for-react

To use KeepAlive with React Router, you must install both keepalive-for-react and keepalive-for-react-router. The version of keepalive-for-react-router you need depends on your version of React Router.

For React Router v6+

Use react-router-dom and keepalive-for-react-router version 1.x.x.

For React Router v7+

Use react-router and keepalive-for-react-router version 2.x.x.

# For v6+
npm install react-router-dom keepalive-for-react keepalive-for-react-router@1.x.x

# For v7+
npm install react-router keepalive-for-react keepalive-for-react-router@2.x.x

To integrate with React Router, you should use the keepalive-for-react-router package.

For React Router v6+: Install react-router-dom, keepalive-for-react, and keepalive-for-react-router@1.x.x.

For React Router v7+: Install react-router, keepalive-for-react, and keepalive-for-react-router@2.x.x.

Option 1: Using KeepAliveRouteOutlet (Simplest)

Use the pre-built outlet component within your layout.

Option 2: Manual Configuration

For more control, use the KeepAlive component with useKeepAliveRef and useLocation to manage the activeCacheKey based on the current route.

// v6+ example
import KeepAliveRouteOutlet from "keepalive-for-react-router";

function Layout() {
    return (
        <div className="layout">
            <KeepAliveRouteOutlet />
        </div>
    );
}

The KeepAlive component maintains an internal list of CacheNode objects. Each node represents a cached component state.

A CacheNode contains:

• cacheKey: The unique identifier for the node.
• ele: The cached React elements.
• lastActiveTime: Timestamp of the last time this key became active.
• renderCount: How many times this component has been refreshed.

Before using keepalive-for-react, observe these critical constraints:

• React Versioning:
  • For React 18, use keepalive-for-react@4.x.x.
  • For React 19.2+, use keepalive-for-react@5.x.x.
• Strict Mode: Do NOT use <React.StrictMode />. It causes unexpected behavior when used with this library.
• Routing: When using with React Router, only react-router-dom v6+ is supported.

Before using keepalive-for-react, note the following critical requirements:

• React Versioning:
  • For React 18, use keepalive-for-react@4.x.x.
  • For React 19.2+, use keepalive-for-react@5.x.x.
• StrictMode: DO NOT use <React.StrictMode /> in development mode. It causes unexpected behavior with the keepalive mechanism.
• Router Support: The keepalive-for-react-router package only supports react-router-dom v6+.

For a tabbed interface, use the KeepAlive component and provide a unique activeCacheKey corresponding to the currently selected tab.

const tabs = [
    { key: "tab1", label: "Tab 1", component: Tab1 },
    { key: "tab2", label: "Tab 2", component: Tab2 },
    { key: "tab3", label: "Tab 3", component: Tab3 },
];

function App() {
    const [currentTab, setCurrentTab] = useState<string>("tab1");

    const tab = useMemo(() => {
        return tabs.find(t => t.key === currentTab);
    }, [currentTab]);

    return (
        <div>
            {/* ... tab switching UI ... */}
            <KeepAlive transition={true} activeCacheKey={currentTab} exclude={["tab3"]}>
                {tab && <tab.component />}
            </KeepAlive>
        </div>
    );
}