or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

babel-plugin.mdfamilies.mdindex.mdregistration.mdruntime.md
tile.json

tessl/npm-react-refresh

React Refresh runtime and Babel plugin for Fast Refresh functionality that enables live editing of React components without losing state

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/react-refresh@0.9.x

To install, run

npx @tessl/cli install tessl/npm-react-refresh@0.9.0

index.mddocs/

React Refresh

React Refresh provides the runtime and Babel plugin necessary to integrate Fast Refresh functionality into bundlers. Fast Refresh enables developers to edit React components in a running application without losing component state, offering a superior alternative to traditional hot reloading with official React team support.

Package Information

  • Package Name: react-refresh
  • Package Type: npm
  • Language: JavaScript (with Flow types)
  • Installation: npm install react-refresh

Core Imports

Runtime API:

import * as ReactRefreshRuntime from 'react-refresh/runtime';

For CommonJS:

const ReactRefreshRuntime = require('react-refresh/runtime');

Babel Plugin:

// babel.config.js
{
  plugins: [
    ['react-refresh/babel', options]
  ]
}

Basic Usage

Runtime Setup

import * as ReactRefreshRuntime from 'react-refresh/runtime';

// Initialize React Refresh
ReactRefreshRuntime.injectIntoGlobalHook(window);

// Register a component
function MyComponent() {
  const [count, setCount] = React.useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

// Register the component for refresh tracking
ReactRefreshRuntime.register(MyComponent, 'MyComponent');

// Perform refresh after code changes
ReactRefreshRuntime.performReactRefresh();

Babel Plugin Setup

// babel.config.js
module.exports = {
  plugins: [
    ['react-refresh/babel', {
      skipEnvCheck: true, // Skip environment check if needed
      refreshReg: '$RefreshReg$', // Custom registration function name
      refreshSig: '$RefreshSig$'  // Custom signature function name
    }]
  ]
};

Architecture

React Refresh is built around several key components:

  • Runtime System: Core refresh logic managing component families, signatures, and state preservation
  • Component Registration: Tracking system that assigns unique IDs to components for refresh decisions
  • Hook Signatures: System for detecting Hook usage changes to determine if state can be preserved
  • Babel Transform: Code instrumentation that automatically adds refresh support during compilation
  • DevTools Integration: Hooks into React DevTools infrastructure for renderer communication

Capabilities

Runtime API

Core runtime functionality for managing Fast Refresh state and performing component updates. Essential for bundler integrations and development servers.

function performReactRefresh(): RefreshUpdate | null;
function register(type: any, id: string): void;
function injectIntoGlobalHook(globalObject: any): void;

Runtime API

Component Registration & Signatures

System for tracking components and their Hook usage patterns to enable intelligent refresh decisions.

function setSignature(
  type: any, 
  key: string, 
  forceReset?: boolean, 
  getCustomHooks?: () => Array<Function>
): void;

function collectCustomHooksForSignature(type: any): void;
function createSignatureFunctionForTransform(): Function;

Registration & Signatures

Family & Instance Management

Advanced APIs for querying component families and finding affected DOM instances during refresh operations.

function getFamilyByID(id: string): Family | void;
function getFamilyByType(type: any): Family | void;
function findAffectedHostInstances(families: Array<Family>): Set<Instance>;

Family Management

Babel Plugin

Babel transformation plugin that automatically instruments React components for Fast Refresh support.

function BabelPlugin(babel: any, opts?: BabelPluginOptions): BabelPluginConfig;

interface BabelPluginOptions {
  refreshReg?: string;
  refreshSig?: string;
  skipEnvCheck?: boolean;
  emitFullSignatures?: boolean;
}

Babel Plugin

Types

interface RefreshUpdate {
  updatedFamilies: Set<Family>;
  staleFamilies: Set<Family>;
}

interface Family {
  current: any;
}

interface Signature {
  ownKey: string;
  forceReset: boolean;
  fullKey: string | null;
  getCustomHooks: () => Array<Function>;
}