Skip to content

doc: more clear statement about code splitting #963

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 7, 2018
Merged

doc: more clear statement about code splitting #963

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 19 additions & 8 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,25 +203,36 @@ Using React Hot Loader with React Native can cause unexpected issues (see #824)

### Code Splitting

Most of modern React component-loader libraries ([loadable-components](https://github.com/smooth-code/loadable-components/),
[react-loadable](https://github.com/thejameskyle/react-loadable)...) are compatible with React Hot Loader.
Most of modern React component-loader libraries are not "100%" compatible with React-Hot-Loader, as long
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should discourage using react-loadable.

they load deferred component on `componentWillMount`, but never reload it again.
As result - you can update the code, webpack will ship that code the the client, but nothing will be updated.

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

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

```js
// AsyncHello.js
import loadable from 'loadable-components'
const AsyncHello = loadable(() => import('./Hello.js'))
import asyncComponent from 'react-async-component'
const AsyncHello = asyncComponent({
resolve: () => import('./Hello.js'),
})

// Hello.js
import { hot } from 'react-hot-loader'
const Hello = () => 'Hello'
export default hot(module)(Hello) // <-- the only change to do
export default hot(module)(Hello) // <-- module will reload itself
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You should use loadable-components or react-imported-component. They provide the best support for RHL.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

They are in a section about "friendly" loaders, and dont require any workaround example, as long just works.
We could swap sections, displaying an easy path first.

```

Marking component as `hot` will make it self-reloadable. But this require altering your code, and sometimes
is not possible.

For a better expirence you could use more React-Hot-Loader "compatible" loaders:

* [loadable-components](https://github.com/smooth-code/loadable-components/) - always reloads and preloads component in development.
* [react-imported-component](https://github.com/theKashey/react-imported-component) - reloads component on HMR (React 16.3 compatible).
* [react-universal-component](https://github.com/faceyspacey/react-universal-component) - reloads component on HMR.

### Checking Element `type`s

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