• Version 4.13.1
  • Published
  • 198 kB
  • 8 dependencies
  • MIT license


npm i react-hot-loader
yarn add react-hot-loader
pnpm add react-hot-loader


Tweak React components in real time.



function areComponentsEqual

areComponentsEqual: <T>(
typeA: React.ComponentType<T>,
typeB: React.ComponentType<T>
) => boolean;
  • Tests are types of two components equal

    Parameter typeA

    Parameter typeB

    {boolean} are they equal

    Example 1

    test that some rendered component(ReactElement), has the same type as BaseComponent areComponentEqual(RenderedComponent.type, BaseComponent)

function cold

cold: <T = React.ComponentType<any>>(component: T) => T;
  • Marks component as cold, and making it invisible for React-Hot-Loader. Any changes to that component will cause local state loss.

    Parameter component

    to chill {React.ComponentType} component, as it was passed in.

    Example 1

    marks some component as cold export default cold(MyComponent)

function hot

hot: (
module: any
) => <T = React.ComponentType<any>>(Component: T, props?: AppContainerProps) => T;
  • Marks module and a returns a HOC to mark a Component inside it as hot-exported

    Parameter module

    ALWAYS should be just "module". {function} "hot" HOC.

    Example 1

    marks current module as hot, and export MyComponent as HotExportedMyComponent export default hot(module)(MyComponent)

function setConfig

setConfig: (config: Partial<Config>) => void;
  • Confugures how React Hot Loader works

    Parameter config


class AppContainer

class AppContainer extends React.Component<AppContainerProps & AppChildren> {}


    interface AppChildren

    interface AppChildren {}

      property children

      children?: React.ReactElement<any>;

        interface AppContainerProps

        interface AppContainerProps {}

          property errorBoundary

          errorBoundary?: boolean;

            property errorReporter

            errorReporter?: React.ComponentType<ErrorReporterProps>;

              interface Config

              interface Config {}

                property allowSFC

                allowSFC: boolean;
                • Allows SFC to be used, enables "intermediate" components used by Relay, should be disabled for Preact

                property disableHotRenderer

                disableHotRenderer: boolean;
                • Disable "hot-replacement-render"

                property disableHotRendererWhenInjected

                disableHotRendererWhenInjected: boolean;
                • Disable "hot-replacement-render" when injection into react-dom are made

                property ErrorOverlay

                ErrorOverlay: React.ComponentType<{ errors: Array<HotError> }>;
                • Global error overlay

                property errorReporter

                errorReporter: React.ComponentType<HotError>;
                • default value for AppContainer errorOverlay

                property ignoreComponents

                ignoreComponents: boolean;
                • flag to completely disable RHL for Components

                property ignoreSFC

                ignoreSFC: boolean;
                • flag to completely disable RHL for SFC

                property logLevel

                logLevel: string;
                • Specify loglLevel, default to 'error', set it to false to disable logs. Available levels: ['debug', 'log', 'warn', 'error']

                property onComponentCreate

                onComponentCreate: (type: any, displayName: string) => any;
                • Parameter type

                  type being rendered. The first argument of React.createElement

                  Parameter displayName

                  type display name (if exists)

                property onComponentRegister

                onComponentRegister: (
                type: any,
                uniqueLocalName: string,
                fileName: string
                ) => any;
                • Parameter type

                  being registered. This could be ANY top level variable among project.

                  Parameter uniqueLocalName

                  variable name

                  Parameter fileName

                  origin file {any}

                property pureRender

                pureRender: boolean;
                • keep render method unpatched, moving sideEffect to componentDidUpdate

                property pureSFC

                pureSFC: boolean;
                • Allows using SFC without changes. leading to some components not updated

                property reloadHooks

                reloadHooks: boolean;
                • enables or disables hooks treatment

                property showReactDomPatchNotification

                showReactDomPatchNotification: boolean;
                • Show "hot-loader/react-dom" warning

                property trackTailUpdates

                trackTailUpdates: boolean;
                • Controls tail(deferred) update checking

                interface ErrorReporterProps

                interface ErrorReporterProps {}

                  property error

                  error: any;

                    interface HotError

                    interface HotError {}

                      property error

                      error: Error;

                        property errorInfo

                        errorInfo?: React.ErrorInfo;

                          Package Files (1)

                          Dependencies (8)

                          Dev Dependencies (46)

                          Peer Dependencies (3)


                          To add a badge like this badgeto your package's README, use the codes available below.

                          You may also use to create a custom badge linking to

                          • Markdown
                          • HTML
                            <a href=""><img src="" alt=""></a>