gitwtfhub

wtf is babel-plugin-functional-hmr?

gaearon/babel-plugin-functional-hmr — explained in plain English

Analysis updated 2026-07-17 · repo last pushed 2019-10-14

★ 6Audience · developerComplexity · 2/5DormantSetup · moderate

TL;DR

A Babel plugin that fixes hot reloading for functional components in React Native, so code changes show up instantly during development.

Mindmap

mindmap
  root((repo))
    What it does
      Fixes hot reloading
      Transforms functions to classes
      Instant dev updates
    Tech stack
      Babel
      React Native
      JavaScript
    Limitations
      Arrow functions only
      No Hooks support
      Needs cache reset
    Audience
      React Native developers

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Why would anyone build with this?

REASON 1

See UI tweaks like color or layout changes appear instantly while developing a React Native app

REASON 2

Add this plugin to a Babel config to fix broken hot module reloading for functional components

REASON 3

Speed up the dev feedback loop when you're not yet using React Hooks

REASON 4

Debug why HMR isn't reflecting changes by understanding the class-component transform it does

What's in the stack?

JavaScriptBabelReact Native

How it stacks up

gaearon/babel-plugin-functional-hmrabderazak-py/retro-homepageaclark4life/home-depot-crawl
Stars666
Language—HTMLPython
Last pushed2019-10-14—2014-08-10
MaintenanceDormant—Dormant
Setup difficultymoderateeasymoderate
Complexity2/52/52/5
Audiencedeveloperops devopsdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you spin it up?

Difficulty · moderate Time to first run · 30min

Only works with arrow-function components without Hooks, Babel config changes need a packager cache reset.

Yoink these prompts

Prompt 1
Help me add babel-plugin-functional-hmr to my Babel config for a React Native project.
Prompt 2
Explain how this plugin transforms an arrow function component into a class component for HMR.
Prompt 3
Why isn't hot reloading working after I changed my Babel config, and how do I reset the packager cache?
Prompt 4
What are the limitations of this HMR plugin if my components use React Hooks?

Frequently asked questions

wtf is babel-plugin-functional-hmr?

A Babel plugin that fixes hot reloading for functional components in React Native, so code changes show up instantly during development.

Is babel-plugin-functional-hmr actively maintained?

Dormant — no commits in 2+ years (last push 2019-10-14).

How hard is babel-plugin-functional-hmr to set up?

Setup difficulty is rated moderate, with roughly 30min to a first successful run.

Who is babel-plugin-functional-hmr for?

Mainly developer.

View the repo → Decode another repo

This repo across BitVibe Labs

Don't trust strangers blindly. Verify against the repo.

Other repos in this lane