Skip to content

Commit b22f37e

Browse files
authored
Merge pull request #963 from gaearon/impove-async-loader-readme
doc: more clear statement about code splitting
2 parents df8ddae + ac53309 commit b22f37e

File tree

1 file changed

+19
-8
lines changed

1 file changed

+19
-8
lines changed

README.md

+19-8
Original file line numberDiff line numberDiff line change
@@ -221,25 +221,36 @@ Using React Hot Loader with React Native can cause unexpected issues (see #824)
221221

222222
### Code Splitting
223223

224-
Most of modern React component-loader libraries ([loadable-components](https://github.com/smooth-code/loadable-components/),
225-
[react-loadable](https://github.com/thejameskyle/react-loadable)...) are compatible with React Hot Loader.
224+
Most of modern React component-loader libraries are not "100%" compatible with React-Hot-Loader, as long
225+
they load deferred component on `componentWillMount`, but never reload it again.
226+
As result - you can update the code, webpack will ship that code the the client, but nothing will be updated.
226227

227-
You have to mark your "loaded components" as _hot-exported_.
228+
In this case, you have to setup "reloading" by your self - you have to mark your "loaded components" as _hot-exported_.
228229

229-
Example using
230-
[loadable-components](https://github.com/smooth-code/loadable-components/):
230+
Example using [react-async-component](https://github.com/ctrlplusb/react-async-component)...)
231231

232232
```js
233233
// AsyncHello.js
234-
import loadable from 'loadable-components'
235-
const AsyncHello = loadable(() => import('./Hello.js'))
234+
import asyncComponent from 'react-async-component'
235+
const AsyncHello = asyncComponent({
236+
resolve: () => import('./Hello.js'),
237+
})
236238

237239
// Hello.js
238240
import { hot } from 'react-hot-loader'
239241
const Hello = () => 'Hello'
240-
export default hot(module)(Hello) // <-- the only change to do
242+
export default hot(module)(Hello) // <-- module will reload itself
241243
```
242244

245+
Marking component as `hot` will make it self-reloadable. But this require altering your code, and sometimes
246+
is not possible.
247+
248+
For a better expirence you could use more React-Hot-Loader "compatible" loaders:
249+
250+
* [loadable-components](https://github.com/smooth-code/loadable-components/) - always reloads and preloads component in development.
251+
* [react-imported-component](https://github.com/theKashey/react-imported-component) - reloads component on HMR (React 16.3 compatible).
252+
* [react-universal-component](https://github.com/faceyspacey/react-universal-component) - reloads component on HMR.
253+
243254
### Checking Element `type`s
244255

245256
Because React Hot Loader creates proxied versions of your components, comparing

0 commit comments

Comments
 (0)