tessl/npm-react-hot-loader

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

—

Pending

Overview

Eval results

Files

Configuration

Name: tessl/npm-react-hot-loader
Author: tessl

React Hot Loader provides a comprehensive configuration system that allows customization of hot reload behavior, error handling, performance optimizations, and debugging features.

Capabilities

Configuration Function

Sets global configuration options for React Hot Loader behavior.

/**
 * Configures how React Hot Loader works
 * @param config - Partial configuration object with options to override
 */
function setConfig(config: Partial<Config>): void;

interface Config {
  /** Specify logLevel, default to 'error', set it to false to disable logs */
  logLevel: string;
  
  /** Callback for component registration */
  onComponentRegister: (type: any, uniqueLocalName: string, fileName: string) => any;
  
  /** Callback for component creation */
  onComponentCreate: (type: any, displayName: string) => any;
  
  /** Allows using SFC without changes, leading to some components not updated */
  pureSFC: boolean;
  
  /** Keep render method unpatched, moving sideEffect to componentDidUpdate */
  pureRender: boolean;
  
  /** Allows SFC to be used, enables "intermediate" components used by Relay */
  allowSFC: boolean;
  
  /** Disable "hot-replacement-render" */
  disableHotRenderer: boolean;
  
  /** Disable "hot-replacement-render" when injection into react-dom are made */
  disableHotRendererWhenInjected: boolean;
  
  /** Show "hot-loader/react-dom" warning */
  showReactDomPatchNotification: boolean;
  
  /** Flag to completely disable RHL for SFC */
  ignoreSFC: boolean;
  
  /** Flag to completely disable RHL for Components */
  ignoreComponents: boolean;
  
  /** Enables or disables hooks treatment */
  reloadHooks: boolean;
  
  /** Default value for AppContainer errorOverlay */
  errorReporter: React.ComponentType<HotError>;
  
  /** Global error overlay */
  ErrorOverlay: React.ComponentType<{ errors: Array<HotError> }>;
  
  /** Controls tail(deferred) update checking */
  trackTailUpdates: boolean;
}

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

Usage Examples:

// Basic configuration
import { setConfig } from 'react-hot-loader';

setConfig({
  logLevel: 'debug',
  reloadHooks: true,
  trackTailUpdates: false
});

// Advanced configuration with callbacks
import { setConfig } from 'react-hot-loader';

setConfig({
  // Logging configuration
  logLevel: 'warn', // 'debug', 'log', 'warn', 'error', or false
  
  // Component lifecycle callbacks
  onComponentRegister: (type, name, filename) => {
    console.log(`Registered component ${name} from ${filename}`);
  },
  
  onComponentCreate: (type, displayName) => {
    console.log(`Created component ${displayName}`);
  },
  
  // Performance optimizations
  pureSFC: true,
  pureRender: false,
  allowSFC: true,
  
  // Feature toggles
  reloadHooks: true,
  trackTailUpdates: true,
  
  // Error handling
  showReactDomPatchNotification: true
});

Configuration Categories

Logging Configuration

Control logging output and verbosity:

import { setConfig } from 'react-hot-loader';

// Disable all logging
setConfig({ logLevel: false });

// Show only errors
setConfig({ logLevel: 'error' });

// Show warnings and errors
setConfig({ logLevel: 'warn' });

// Show all logs (debug mode)
setConfig({ logLevel: 'debug' });

Component Lifecycle Callbacks

Monitor component registration and creation:

setConfig({
  onComponentRegister: (type, uniqueLocalName, fileName) => {
    // Called when a component is registered for hot reloading
    console.log(`🔥 Registered: ${uniqueLocalName} in ${fileName}`);
    
    // Example: Track component registrations
    if (window.__DEV_TOOLS__) {
      window.__DEV_TOOLS__.trackComponent(uniqueLocalName, fileName);
    }
  },
  
  onComponentCreate: (type, displayName) => {
    // Called when a component instance is created
    console.log(`⚛️ Created: ${displayName}`);
    
    // Example: Performance monitoring
    if (displayName.includes('Expensive')) {
      console.time(`${displayName} render`);
    }
  }
});

Performance Optimization

Configure hot reload performance settings:

setConfig({
  // Pure SFC optimization
  pureSFC: true, // Treat stateless functional components as pure
  
  // Render method optimization  
  pureRender: false, // Keep render method patching for better compatibility
  
  // SFC handling
  allowSFC: true, // Enable stateless functional component support
  ignoreSFC: false, // Don't ignore SFC components
  
  // Component handling
  ignoreComponents: false, // Don't ignore class components
  
  // Hook reloading
  reloadHooks: true, // Enable hook hot reloading
  
  // Update tracking
  trackTailUpdates: true // Track deferred updates for better reliability
});

Error Handling Configuration

Customize error reporting and overlay behavior:

import { setConfig } from 'react-hot-loader';

// Custom error reporter component
const CustomErrorReporter = ({ error, errorInfo }) => (
  <div style={{ 
    position: 'fixed', 
    top: 0, 
    left: 0, 
    right: 0, 
    bottom: 0, 
    backgroundColor: 'rgba(255, 0, 0, 0.1)',
    padding: '20px',
    zIndex: 9999
  }}>
    <h2>🚨 Hot Reload Error</h2>
    <p>{error.message}</p>
    <details>
      <summary>Stack Trace</summary>
      <pre>{error.stack}</pre>
    </details>
  </div>
);

// Global error overlay
const GlobalErrorOverlay = ({ errors }) => (
  <div className="global-error-overlay">
    <h1>Multiple Errors Detected</h1>
    {errors.map((error, index) => (
      <div key={index} className="error-item">
        <h3>Error {index + 1}</h3>
        <p>{error.error.message}</p>
      </div>
    ))}
  </div>
);

setConfig({
  errorReporter: CustomErrorReporter,
  ErrorOverlay: GlobalErrorOverlay,
  showReactDomPatchNotification: true
});

Advanced Hot Renderer Configuration

Fine-tune hot rendering behavior:

setConfig({
  // Disable hot renderer entirely
  disableHotRenderer: false,
  
  // Disable hot renderer only when react-dom patches are detected
  disableHotRendererWhenInjected: true,
  
  // Show notification about react-dom patching
  showReactDomPatchNotification: true
});

Common Configuration Patterns

Development vs Production

// Development configuration
if (process.env.NODE_ENV === 'development') {
  setConfig({
    logLevel: 'debug',
    reloadHooks: true,
    trackTailUpdates: true,
    showReactDomPatchNotification: true,
    onComponentRegister: (type, name, file) => {
      console.log(`🔥 Hot: ${name} @ ${file}`);
    }
  });
}

// Production - configuration is ignored but safe to call
setConfig({
  logLevel: false // No effect in production
});

Performance-Focused Configuration

// Optimize for performance
setConfig({
  pureSFC: true,
  pureRender: true,
  allowSFC: true,
  trackTailUpdates: false, // Disable for better performance
  logLevel: false, // Disable logging overhead
  reloadHooks: false // Disable if not using hooks heavily
});

Debug-Focused Configuration

// Maximum debugging information
setConfig({
  logLevel: 'debug',
  trackTailUpdates: true,
  showReactDomPatchNotification: true,
  
  onComponentRegister: (type, name, fileName) => {
    console.group(`🔥 Component Registration`);
    console.log(`Name: ${name}`);
    console.log(`File: ${fileName}`);
    console.log(`Type:`, type);
    console.groupEnd();
  },
  
  onComponentCreate: (type, displayName) => {
    console.log(`⚛️ Component Created: ${displayName}`, type);
  }
});

Error-Focused Configuration

// Enhanced error handling
const DetailedErrorReporter = ({ error, errorInfo }) => {
  // Send error to logging service
  if (window.errorLogger) {
    window.errorLogger.log({
      message: error.message,
      stack: error.stack,
      componentStack: errorInfo?.componentStack,
      timestamp: new Date().toISOString()
    });
  }
  
  return (
    <div className="hot-reload-error">
      <h2>Hot Reload Error</h2>
      <p>{error.message}</p>
      <button onClick={() => window.location.reload()}>
        Reload Page
      </button>
    </div>
  );
};

setConfig({
  errorReporter: DetailedErrorReporter,
  showReactDomPatchNotification: true,
  logLevel: 'error'
});

Configuration Timing

Configuration should be set early in the application lifecycle:

// ✅ Good: Set configuration before importing components
import { setConfig } from 'react-hot-loader';

setConfig({
  logLevel: 'debug',
  reloadHooks: true
});

// Import components after configuration
import App from './App';
import './styles.css';

// ❌ Less effective: Setting configuration after component imports
import App from './App'; // Components already processed
import { setConfig } from 'react-hot-loader';

setConfig({ logLevel: 'debug' }); // May not affect already processed components

Default Configuration

React Hot Loader ships with sensible defaults:

// Default configuration (reference only)
const defaultConfig = {
  logLevel: 'error',
  onComponentRegister: null,
  onComponentCreate: null,
  pureSFC: false,
  pureRender: false,
  allowSFC: true,
  disableHotRenderer: false,
  disableHotRendererWhenInjected: true,
  showReactDomPatchNotification: true,
  ignoreSFC: false,
  ignoreComponents: false,
  reloadHooks: true,
  errorReporter: null, // Uses built-in error reporter
  ErrorOverlay: null,
  trackTailUpdates: true
};

Install with Tessl CLI