Comments (8)
Indeed it calls a second rendor.
from react-async-bootstrapper.
Walking the render tree as a collection step is common - react-async-component, react-apollo, loadable-components, and isomorphic-relay all take this approach. In the case of this library, it's capable of doing other work (collecting data fetch queries, for instance) in addition to bundle splitting, just like the Relay clients.
There's a performance tradeoff to this, so you'll have to measure the impact and decide if the combination of walking the tree + rendering to string is worth the cost. It's not double the time, but it's still more than rendering alone.
from react-async-bootstrapper.
would be cool to have an intendifier to know the render "phase". At the moment I use a variable
private async asyncBootstrap()
{
this.asyncBootstrapPhase = true;
...
}
public render(): JSX.Element
{
if (this.asyncBootstrapPhase) return null;
...
}
because I only use async things at my router... ne tree check needed for me.
thx!
from react-async-bootstrapper.
I dont think its a good thing 😕
from react-async-bootstrapper.
Clever little trick @crazyx13th 👍
from react-async-bootstrapper.
sorry not working for my, i use code splitting and react-async-component.
from react-async-bootstrapper.
It is never calling componentWillUnmount in my application. Since we are using style-loader with the useable styles it will never call styles.unuse on the Component causing my document head to be filled with unused styles causes all sorts of problems. Is there any way arround this? Or should it call componentWillUnmount?
My solution for now is to do this:
toggleStyleLoader(false);
asyncBootstrapper(nextApp).then(() => {
toggleStyleLoader(true);
hydrate(nextApp, element);
});
The toggleStyleLoader will add some property to the window that my wrapped component checks for.
from react-async-bootstrapper.
@crazyx13th the API has been updated to allow you to inject a custom context that will be available to all your components during bootstrapping. This can be helpful for cases where you want to make the distinction, like in your example.
class Foo extends Component {
bootstrap() {
console.log(this.context.asyncBootstrapPhase)
}
render() {
return <div>foo</div>
}
}
bootstrapper(<Foo />, null, { asyncBootstrapPhase: true })
.then(() => console.log('done'))
As you can see it's a new third parameter to the bootstrapper.
That being said, I would like to remind you that this is just an implementation of react-tree-walker
and therefore obeys all of it's rules. So therefore if you only want to execute the bottom level instances that have a bootstrap
method on them, like in your routes, you can simply have your bootstrap
functions resolve a false
value. This indicates that the bootstrapper should not render the route or attempt to traverse its children. i.e. an early bail out clause much like you are trying to achieve in your example.
class Foo extends Component {
bootstrap() {
return fetch('/data')
.then(doSomethingWithData)
// resolve a "false" value to stop bootstrapper from traversing this component
.then(() => false)
}
You may have noticed I am using `bootstrap` instead of `asyncBootstrap`. Both work, however, `asyncBootstrap` will be removed in next major release.
from react-async-bootstrapper.
Related Issues (11)
- Adjust API so that anything but a `false` will continue tree traversal HOT 2
- in material-ui v1.0 has some wrong
- example with react-router-dom HOT 1
- When using this library, use axios to make requests in the bootstrap() method of the component. If the url is a full full path, you can request it. If you use node to forward, you can't ask.
- Bootstrap not passing proper context on SSR HOT 5
- Cannot read property 'dense' of undefined in development env HOT 1
- can not use dynamic import
- asyncBootstrap is not called when using create-react-app HOT 2
- SSR does not work correctly after upgrading to 2.0.0 HOT 3
- Renamed asyncBootsrap to bootstrap for v2 but still see warning HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-async-bootstrapper.