HMR breaks when modifying React context provider
Problem
Describe the bug Vite HMR breaks when modifying React context provider Related: https://github.com/vitejs/vite-plugin-react/issues/24 Reproduction selrond/vite-react-usecontext System Info Output of `npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers`: [code block] Used package manager: npm Logs --- Before submitting the issue, please make sure you do the following - [x] Read the Contributing Guidelines. - [x] Read the docs. - [x] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate. - [x] Provide a description in this issue that describes the bug. - [x] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead. - [x] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
Error Output
error message) and has no reproduction, it will receive a "need reproduction" label. If no reproduction is provided after 3 days, it will be auto-closed.
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Fix HMR Breakage with React Context Provider in Vite
The Hot Module Replacement (HMR) in Vite can break when the React context provider is modified because it does not properly handle the state updates and re-renders that occur when the context value changes. This can lead to stale or inconsistent context values being used in components that rely on the provider, causing unexpected behavior during development.
Awaiting Verification
Be the first to verify this fix
- 1
Update Vite and React Plugin
Ensure that you are using the latest versions of Vite and the Vite React plugin, as updates may contain bug fixes related to HMR and context handling.
bashnpm install vite@latest @vitejs/plugin-react@latest - 2
Wrap Context Provider with React.memo
Wrap your context provider component with React.memo to prevent unnecessary re-renders and ensure that the context value is stable across HMR updates.
typescriptconst MemoizedProvider = React.memo(({ children }) => <MyContext.Provider value={contextValue}>{children}</MyContext.Provider>); - 3
Use a Stable Context Value
Ensure that the context value passed to the provider is stable by using useMemo or useCallback to memoize the value. This prevents HMR from breaking when the context value changes.
typescriptconst contextValue = React.useMemo(() => ({ /* context values */ }), [/* dependencies */]); - 4
Test HMR Functionality
Run your Vite development server and modify the context provider to ensure that HMR works as expected. Check that the application updates without a full reload and that the context values are correctly reflected in the components.
bashnpm run dev
Validation
Confirm that modifying the context provider does not break HMR by observing that changes are reflected in the application without a full reload. Additionally, check that the context values are consistent across component re-renders.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep