React Proxy
A generic React component proxy useful for hot reloading.
Requirements
Usage
Intended to be used from hot reloading tools like React Hot Loader.
If you’re an application developer, it’s unlikely you’ll want to use it directly.
You will need something like react-deep-force-update to re-render the component tree after applying the update.
import React, { Component } from 'react';
class ComponentVersion1 extends Component {
render() {
return <div>Before hot update.</div>;
}
}
class ComponentVersion2 extends Component {
render() {
return <div>After hot update.</div>;
}
}
Without React Proxy:
const rootEl = document.getElementById('root');
React.render(<ComponentVersion1 />, rootEl);
React.render(<ComponentVersion2 />, rootEl);
With React Proxy:
import React from 'react';
import { render } from 'react-dom';
import createProxy from 'react-proxy';
import deepForceUpdate from 'react-deep-force-update';
const proxy = createProxy(ComponentVersion1);
const Proxy = proxy.get();
const rootInstance = render(<Proxy />, rootEl);
proxy.update(ComponentVersion2);
deepForceUpdate(rootInstance);
Features
- Supports both classic (
React.createClass()
) and modern (ES6 classes) style - Supports inherited and base classes (although you shouldn’t use inheritance with React)
- Supports classic
createClass()
autobinding and modern autobind-decorator
- Contains an extensive test suite to avoid regressions
- Preserves
displayName
- Preserves enumerability and writability of methods
- Preserves
toString()
of methods - Replaces instance getters and setters
- Replaces instance methods preserving their identity
- Replaces bound instance methods preserving their identity
- Because identity is preserved, instance methods already scheduled for
setInterval
or setTimeout
are updated - Replaces static getters and setters
- Replaces unbound static methods
- Replaces static properties unless they were overwritten by code
- Sets up
this.constructor
to match the most recent class
Known Limitations
- Does not replace ES7 instance properties
- Replacing a method using
autobind-decorator
causes its identity to change
Contributing
- Clone the repository
- Run
npm install
- Run
npm run test:watch
- Take a look at the existing tests
- Add tests for the failing case you aim to fix and make them pass
- Submit a PR!
License
MIT