CODEWITHSUNDEEP
javascriptreactjsrerender
user3057477
user3057477

Reputation: 1

rerender React js component

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

Answers (3)

Chiranjhivi Ghimire
Chiranjhivi Ghimire

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

jaybee
jaybee

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

Dylan
Dylan

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

Related Questions