vite-plugin-react-fallback-throttle #

Vite plugin for configuring FALLBACK_THROTTLE_MS in React 19 in development and production builds.

tl;dr #

• Install by executing npm install vite-plugin-react-fallback-throttle or yarn add vite-plugin-react-fallback-throttle.
• Import by adding import reactFallbackThrottlePlugin from 'vite-plugin-react-fallback-throttle'.
• Use it by adding reactFallbackThrottlePlugin(<throttleMs>) to plugins section of your Vite config.

Usage #

Here's an example of basic configuration:

import { defineConfig } from 'vite';
import reactFallbackThrottlePlugin from 'vite-plugin-react-fallback-throttle';

export default defineConfig({
  plugins: [
    reactFallbackThrottlePlugin(),
  ],
});

But why? #

React 19 introduced a notable change in Suspense behavior, setting a minimum delay of 300ms between displaying and hiding a Suspense fallback. This behavior is governed by the FALLBACK_THROTTLE_MS constant in React's source code. While this change aims to improve user experience in certain scenarios, preventing rapid Suspense fallback flashes, it can also negatively impact applications that rely on Suspense-based state management libraries, such as Jotai. Additionally, some developers have reported significantly increased test execution times as a result of this change.

License #

The MIT License.

Author #

Wojciech Maj