Babel Plugin Functional Hmr

babel-plugin-functional-hmr

A [Babel](http://babeljs.io) plugin allows HMR for functional components in React Native.


Limitations

If you try to use [hooks](https://reactjs.org/docs/hooks-intro.html) in your source they won't work (you will get an "Hooks can only be called inside the body of a function component").

Why?

Hot module reload (HMR) has been [broken for functional components](https://github.com/facebook/react-native/issues/8465) in [React Native](http://www.reactnative.com).

The "hot loading" message appears, but the changes don't show up.

Installation

In most cases, you should install `babel-plugin-functional-hmr` as a development dependency (with `--save-dev`).

npm install --save-dev babel-plugin-functional-hmr

or

yarn add babel-plugin-functional-hmr -D

The transformation plugin is typically used only in development. See the examples below for more details.

Usage

Via `.babelrc` (Recommended)

Add the following line to your `.babelrc` file:

Without options:

{
  "plugins": ["functional-hmr"]
}

With options:

{
  "plugins": [
    ["functional-hmr"]
  ]
}

Via CLI

babel --plugins functional-hmr script.js

Via Node API

require("babel-core").transform("code", {
  plugins: ["functional-hmr"]
});

Important Note

From [Issue #5](https://github.com/bvic23/babel-plugin-functional-hmr/issues/5#issuecomment-333309618): *"Editing the `.babelrc` won't actually change the setup, unless you start the packager with `yarn start --reset-cache` to clean the transform cache."*

Technical details

Class

The plugin does not transform components defined as classes, such as:

export default class Button extends Component {
    render() {
        return (