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.

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

Tab switch re-render the page on every switch #2062

Closed
agarwalvinit opened this Issue Jul 18, 2016 · 3 comments

Comments

Projects
None yet
2 participants
@agarwalvinit
Copy link

agarwalvinit commented Jul 18, 2016

I am using Tab component of react-bootstrap@0.29.5, When I am switching the tab, it is calling render method of the component containing the tab. Ex-
Tab component:-
MainTab.js:-

var React = require('react');
var ReactDOM = require('react-dom');
import { Tab, Tabs } from 'react-bootstrap';
import Test1 from "./test1";
import Test2 from "./test2";
var Test3 = React.createClass({
  render: function() {
    return (
     <Tabs defaultActiveKey={2} id="uncontrolled-tab-example">
      <Tab eventKey={1} title="Tab 1"><Test1 /></Tab>
      <Tab eventKey={2} title="Tab 2"><Test2 /></Tab>
      <Tab eventKey={3} title="Tab 3" disabled>Tab 3 content</Tab>
    </Tabs>
      );
  }
});
ReactDOM.render(<Test3 />, document.getElementById('main'));

test1.js:-

import React from "react";
var Test1 = React.createClass({
    render: function() {
        return (
            <div>
                Test1
            </div>
        );
    }
});
module.exports = Test1;

test2.js:-

import React from "react";
var Test2 = React.createClass({
    render: function() {
        return(
            <div>
                Test2
            </div>  
        )
    }
});
module.exports = Test2;

switching from test1 to test2 it calls the test1 render function first and then test2. This happens twice. Is it correct ? Why on tab switch the render function is getting called if there is no state change ?

@jquense

This comment has been minimized.

Copy link
Member

jquense commented Jul 18, 2016

it is correct. the tab state changes when you switch tabs and so rerenders (to hide one tab and show the other). React works by rerendering entire trees so you inner components also rerender. This is really normal in React, rerenders happen all the time, which is fine because they are very cheap since react only changes the DOM when your component actually changes

@jquense jquense closed this Jul 18, 2016

@agarwalvinit

This comment has been minimized.

Copy link

agarwalvinit commented Jul 19, 2016

But why is it happening twice in same component i.e 2 times per tab. It should only render it once. right ?

@jquense

This comment has been minimized.

Copy link
Member

jquense commented Jul 19, 2016

there are a bunch of different updates happen, the main point tho here is that you shouldn't be checking how many times render() is called, its an irrelevant metric in React.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment