Lazy Loading with Preact Router #135
Conversation
src/index.js
Outdated
| } | ||
| componentDidMount(){ | ||
| const componentData = this.props.component(); | ||
| if (componentData instanceof Promise) { |
There was a problem hiding this comment.
I usually just check for componentData && componentData.then so that any promise lib works without necessarily being global.
src/index.js
Outdated
| if (componentData instanceof Promise) { | ||
| componentData.then(promiseData => { | ||
| this.setState({ | ||
| componentData: h(promiseData, { url: this.props.url, matches: this.props.matches }) |
There was a problem hiding this comment.
Suggestion: call promiseData "component" and store that in state, then invoke h() on it in render() instead of here. That will work for updates after initial loading.
src/index.js
Outdated
| }; | ||
| } | ||
| componentDidMount(){ | ||
| const componentData = this.props.component(); |
There was a problem hiding this comment.
Random thought (not sure what the best approach to implement it would be): we could cache the promise return value here using the promise-returning function as a key. That would work really nicely with bundle-loader?async.
There was a problem hiding this comment.
Ok you need to explain me this a little.
componentDidMount runs only once a lifecycle of a Component.
so 2 questions:
1.) Even if I cache when do you expect me to use it? (next time the same component gets mounted?)
2.) Caching obviously cannot be done on the scope of this as it will be destroyed when you change route, so you wanna cache at Router level or a global level in this file?
|
Just some random musings on there for you while I had a second to look at it. Nice stuff. |
test/index.js
Outdated
| }; | ||
| render(<AsyncRoute component={getComponent} />, containerTag); | ||
|
|
||
| setTimeout(() => { |
There was a problem hiding this comment.
@developit I wonder if there's a way to avoid such small timeouts... not a big fan
Without a small timeout it fails...
There was a problem hiding this comment.
You can turn off async rendering:
import { options } from 'preact';
options.syncComponentUpdates = false;
options.debounceRendering = f => f();
|
@developit yeah now AsyncRouter supports returning a P.S. Tests included with the PR :) |
prateekbh
changed the title
|
@developit this is ready for round 2 of review |
package.json
Outdated
| @@ -81,5 +81,8 @@ | |||
| "sinon-chai": "^2.8.0", | |||
| "uglify-js": "^2.6.1", | |||
| "webpack": "^1.13.1" | |||
| }, | |||
| "dependencies": { | |||
| "Promise": "^1.0.5" | |||
|
Still thinking we might want to make this separate from the main bundle. There are a bunch of differing use-cases people might have, different caching semantics, etc. Might be a bit much to push a single async component on people. Thoughts? |
|
Yes the idea sounds 💯 .
For this I can add an Let me know if this sounds cool, code is ready as always 😄. will push and ping you P.S. Anybody wanting es5 code directly would need to use |
|
I can't think of any other addons - might be simpler just to call it "async" and have the export be your component ( |
|
done :) |
|
@developit, shall we go ahead with this? |
|
@developit would be awesome if we can highlight the same in README |
|
You want to PR, or should I? |
|
I'll send u the updated readme |
Hey!
Opening this PR to track the work for Lazy Loading in Preact Router.
Adding new Component
AsyncRoutewhich takes a propcomponent.Prop
componentcan either be a function returning a Component or returning a promise which eventually resolve in a Component.I still have to play with Webpack and see if this works out of the box.