@@ -221,25 +221,36 @@ Using React Hot Loader with React Native can cause unexpected issues (see #824)
221
221
222
222
### Code Splitting
223
223
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.
226
227
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_ .
228
229
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 ) ...)
231
231
232
232
``` js
233
233
// 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
+ })
236
238
237
239
// Hello.js
238
240
import { hot } from ' react-hot-loader'
239
241
const Hello = () => ' Hello'
240
- export default hot (module )(Hello) // <-- the only change to do
242
+ export default hot (module )(Hello) // <-- module will reload itself
241
243
```
242
244
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
+
243
254
### Checking Element ` type ` s
244
255
245
256
Because React Hot Loader creates proxied versions of your components, comparing
0 commit comments