CODEWITHSUNDEEP
performancereactjsfrontendreact-router
Cohars
Cohars

Reputation: 4012

React - delay heavy sub components rendering

I'm using React and React Router, and on some pages, I have some big lists rendered (as sub components) of the pages. When clicking on a link to change the page, it waits for all the subcomponents to be rendered which implies a delay between the click and the visual feedback. Is there a simple way not to wait for some sub components to be rendered?

I'm looking for a best practice, but maybe using a boolean and a setTimeout() is the only way. Thx.

Upvotes: 3

Views: 1240

Answers (3)

Leif John
Leif John

Reputation: 818

I had the same challenges. Finally I discovered this wonderful library, doing the trick for me: https://github.com/seatgeek/react-infinite

Upvotes: 0

Manolo Santos
Manolo Santos

Reputation: 1913

Check the code below:

const LightComponent = () => <div>LightComponent</div>
const HeavyComponent = () => <div>HeavyComponent</div>

class App extends React.Component {

  constructor(props) {
    super();
    this.state = { shouldRenderHeavyComponent: false };
  }
  
  componentDidMount() {
    this.setState({ shouldRenderHeavyComponent: true });
  }
  
  render() {
    console.log("Render", this.state.shouldRenderHeavyComponent);
    return (
      <div>
        <LightComponent/>
        { this.state.shouldRenderHeavyComponent && <HeavyComponent/> }
      </div>
    );
  }
}

ReactDOM.render(<App/>, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="app"></div>

Upvotes: 1

Anthony Dugois
Anthony Dugois

Reputation: 2052

When you have big lists of components, you often don't see all of them at the same time. You can use React Virtualized to actually render only visible components.

Upvotes: 1

Related Questions