Reputation: 1
I have to implement new UI to existing application with React js. This is react component which is rendered after menu item is clicked. I noticed that chrome dev tools plugin for react shows new component created each time the menu is clicked. Isn't it waste of memory? this is menu activation code by Sammy.js
this.get('#/security',function(){
this.swap("");
React.render(
<MainComponent/>,
document.getElementById('content')
);
});
Upvotes: 0
Views: 2294
Reputation: 1739
forceUpdate() after state had changed might solve the problem of manual rendering the components.
this.forceUpdate();//manually renders components of each time the state changed
Upvotes: 0
Reputation: 2290
According to the React top-level API documentation:
If the ReactElement was previously rendered into container, this will perform an update on it and only mutate the DOM as necessary to reflect the latest React component.
So re-rendering shouldn't create a new component, but rather update the previous one.
Depending on your use-case you may want to handle the menu click inside your React app or component and update state internally and re-render, but that may not be possible in your case.
Upvotes: 0
Reputation: 1412
Yea you should only React.render
once. Try something like:
React.render(<App />, document.getElementById('content'));
const App = React.createClass({
getInitialState() {
return { loaded: false };
},
componentDidMount() {
this.get('#/security',function(){
this.swap("");
this.setState({ loaded: true });
});
},
render() {
return (
<div>
{this.state.loaded ? <MainComponent /> : null}
</div>
);
}
});
Upvotes: 5