hot-module-replacement

9 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Hot Module Replacement overview

Hot Module Replacement (HMR) is a technique for updating modules in an app without needing to reload the page. React Router supports HMR when using Vite. HMR preserves browser state across updates, so form data in modals and other component state remain intact when code changes are saved, unlike traditional live reload which hard refreshes the page.

React Fast Refresh and component exports

React Fast Refresh only handles hot updates for exported React components. React Router handles route exports like action, headers, links, loader, and meta for HMR compatibility. User-defined exports that are not component exports or recognized route module exports will cause full reloads.

Class components do not preserve state with React Fast Refresh

React Fast Refresh does not preserve state for class components. This includes higher-order components that internally return class components. Only function components preserve state across HMR updates.

Function components must be named for React Fast Refresh

Function components must be named, not anonymous, for React Fast Refresh to track changes and preserve state. Anonymous default exports like 'export default () => {}' will not work. Named exports or assigning to a named variable before exporting work correctly.

Adding or removing hooks causes HMR to trigger full reload

React Fast Refresh cannot track changes when hooks are being added or removed from a component, causing full reloads for the next render. After the hooks have been updated, changes should result in hot updates again. Adding a useState to a component may lose that component's local state for the next render.

Renaming destructured hook return values breaks state preservation

If you destructure a hook's return value and then remove or rename the destructured key, React Fast Refresh will not preserve state for the component. For example, changing 'const { pet } = useMyCustomHook()' to 'const { dog } = useMyCustomHook()' will prevent state preservation for that component in the next HMR update.

Use keys on sibling components for reliable HMR tracking

React cannot always distinguish between existing components being changed and new components being added. React needs keys on sibling elements to disambiguate these cases and track changes reliably when sibling elements are modified during HMR updates.

Route exports handled by React Router for HMR

React Router Vite plugin handles these route module exports for HMR compatibility: meta, links, headers, loader, and action. These exports are either processed by the plugin to be HMR-compatible or removed before HMR evaluation, so they do not cause full reloads.

Shared values should be in separate modules, not route exports

If you want to reuse values across routes, stick them in their own non-route module rather than exporting them from route modules. Exporting random non-route values from route modules will cause full reloads.

Give your agent this brain