or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

app-container.mdbuild-integration.mdcomponent-utilities.mdconfiguration.mdhot-wrapper.mdindex.md
tile.json

tessl/npm-react-hot-loader

Tweak React components in real time during development with Hot Module Replacement while preserving component state.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/react-hot-loader@4.13.x

To install, run

npx @tessl/cli install tessl/npm-react-hot-loader@4.13.0

index.mddocs/

React Hot Loader

React Hot Loader enables live editing of React components during development without losing component state. It provides seamless Hot Module Replacement (HMR) integration that preserves React component state across code changes, making development faster and more efficient.

Package Information

  • Package Name: react-hot-loader
  • Package Type: npm
  • Language: JavaScript with TypeScript definitions
  • Installation: npm install react-hot-loader

Core Imports

import { hot, AppContainer, setConfig, cold, areComponentsEqual, configureComponent } from 'react-hot-loader';

TypeScript with full imports:

import { 
  hot, 
  AppContainer, 
  setConfig, 
  cold, 
  areComponentsEqual, 
  configureComponent,
  type AppContainerProps,
  type Config,
  type HotError 
} from 'react-hot-loader';

CommonJS:

const { hot, AppContainer, setConfig, cold, areComponentsEqual } = require('react-hot-loader');

Alternative Entry Points:

// Simplified hot function (auto-detects module)
import { hot } from 'react-hot-loader/root';

// Build integrations
import 'react-hot-loader/patch';  // Patching utilities
require('react-hot-loader/babel'); // Babel plugin
require('react-hot-loader/webpack'); // Webpack loader

Basic Usage

import React from 'react';
import { hot } from 'react-hot-loader/root';

const App = () => {
  const [count, setCount] = React.useState(0);
  
  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
};

export default hot(App);

Manual AppContainer usage (legacy approach):

import React from 'react';
import ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import App from './App';

const render = (Component) => {
  ReactDOM.render(
    <AppContainer>
      <Component />
    </AppContainer>,
    document.getElementById('root')
  );
};

render(App);

if (module.hot) {
  module.hot.accept('./App', () => {
    render(App);
  });
}

Architecture

React Hot Loader consists of several key components:

  • Hot HOC: Higher-order component that wraps React components for hot reloading
  • AppContainer: Error boundary that manages hot reload lifecycle and displays errors
  • Proxy System: Internal component proxying for state preservation during updates
  • Build Integration: Babel plugin and Webpack loader for automatic component registration
  • Configuration System: Customizable options for hot reloading behavior
  • React Patching: Runtime modification of React methods for hot reload compatibility

Capabilities

Hot Higher-Order Component

Core functionality for enabling hot reloading on React components. Wraps components to preserve state during hot module replacement.

function hot(module: any): <T = React.ComponentType<any>>(Component: T, props?: AppContainerProps) => T;

interface AppContainerProps {
  errorBoundary?: boolean;
  errorReporter?: React.ComponentType<ErrorReporterProps>;
}

interface ErrorReporterProps {
  error: any;
  errorInfo?: React.ErrorInfo;
  component?: AppContainer;
}

Hot Component Wrapper

App Container

Error boundary component that manages hot reload lifecycle, catches errors during development, and provides error reporting.

class AppContainer extends React.Component<AppContainerProps & AppChildren> {
  constructor(props: AppContainerProps & AppChildren);
  render(): React.ReactElement;
}

interface AppChildren {
  children?: React.ReactElement<any>;
}

App Container

Configuration Management

Comprehensive configuration system for customizing hot reload behavior, error handling, and performance optimizations.

function setConfig(config: Partial<Config>): void;

interface Config {
  logLevel: string;
  onComponentRegister: (type: any, uniqueLocalName: string, fileName: string) => any;
  onComponentCreate: (type: any, displayName: string) => any;
  pureSFC: boolean;
  pureRender: boolean;
  allowSFC: boolean;
  disableHotRenderer: boolean;
  disableHotRendererWhenInjected: boolean;
  showReactDomPatchNotification: boolean;
  ignoreSFC: boolean;
  ignoreComponents: boolean;
  reloadHooks: boolean;
  errorReporter: React.ComponentType<HotError>;
  ErrorOverlay: React.ComponentType<{ errors: Array<HotError> }>;
  trackTailUpdates: boolean;
}

interface HotError {
  error: Error;
  errorInfo?: React.ErrorInfo;
}

Configuration

Component Utilities

Utility functions for component comparison, cold component marking, component configuration, and hot reload control.

function areComponentsEqual<T>(typeA: React.ComponentType<T>, typeB: React.ComponentType<T>): boolean;
function cold<T = React.ComponentType<any>>(component: T): T;
function configureComponent(component: React.ComponentType<any>, options: any): React.ComponentType<any>;

Component Utilities

Build Integration

Build-time integration tools including Babel plugin and Webpack loader for automatic component registration and hot reload setup.

// Babel plugin usage in .babelrc
{
  "plugins": ["react-hot-loader/babel"]
}

// Webpack loader usage
{
  test: /\.jsx?$/,
  use: ['react-hot-loader/webpack']
}

Build Integration

Alternative Entry Points

Root Import

Provides pre-configured hot function that automatically detects the calling module:

import { hot } from 'react-hot-loader/root';

Babel Plugin

For build-time component registration:

require('react-hot-loader/babel')

Webpack Loader

For webpack-based component registration:

require('react-hot-loader/webpack')

Patch Utility

For runtime React method patching (same functionality as main entry point):

import 'react-hot-loader/patch';

Development-only Exports

Internal functions available only in development mode:

function enterModule(moduleId: string): void;
function leaveModule(moduleId: string): void; 
function compareOrSwap(oldComponent: any, newComponent: any): boolean;

Types

interface AppContainerProps {
  errorBoundary?: boolean;
  errorReporter?: React.ComponentType<ErrorReporterProps>;
}

interface AppChildren {
  children?: React.ReactElement<any>;
}

interface ErrorReporterProps {
  error: any;
  errorInfo?: React.ErrorInfo;
  component?: AppContainer;
}

interface HotError {
  error: Error;
  errorInfo?: React.ErrorInfo;
}

interface Config {
  logLevel: string;
  onComponentRegister: (type: any, uniqueLocalName: string, fileName: string) => any;
  onComponentCreate: (type: any, displayName: string) => any;
  pureSFC: boolean;
  pureRender: boolean;
  allowSFC: boolean;
  disableHotRenderer: boolean;
  disableHotRendererWhenInjected: boolean;
  showReactDomPatchNotification: boolean;
  ignoreSFC: boolean;
  ignoreComponents: boolean;
  reloadHooks: boolean;
  errorReporter: React.ComponentType<HotError>;
  ErrorOverlay: React.ComponentType<{ errors: Array<HotError> }>;
  trackTailUpdates: boolean;
}