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

Improve rendering time using shouldComponentUpdate and PureComponent #389

Closed
gpbl opened this Issue Jun 11, 2017 · 1 comment

Comments

1 participant
@gpbl
Owner

gpbl commented Jun 11, 2017

Analyzing #374 I've found we can optimize the re-rending of the components by using shouldComponentUpdate or PureComponent.

  • Caption component – should be using shouldComponentUpdate to avoid useless re-rendering. Should update only if locale and date's year/month change.
  • NavBar component – can extend PureComponent
  • Weekday component – can extend PureComponent
  • Weekdays component – can extend PureComponent
  • Day component – should be using shouldComponentUpdate to avoid useless re-rendering. Should update only if the day's modifiers change.

The Month component uses its child as function to render Day, this is a weird pattern and makes optimization harder:

  • move renderDayInMonth and renderDay method from DayPicker to Month
  • Month component should be using shouldComponentUpdate to avoid useless re-rendering. Should update if modifiers change.

@gpbl gpbl added the performance label Jun 11, 2017

@gpbl gpbl added this to the v5.6.0 milestone Jun 11, 2017

@gpbl

This comment has been minimized.

Show comment
Hide comment
@gpbl

gpbl Jun 11, 2017

Owner

Implementing shouldComponentUpdate in Month is more difficult as the modifiers may have different values which are harder to compare. Anyway, after the optimization above we can see less wasted time on re-rendering components.

This is more visible when rendering multiple months, e.g. with numberOfMonths={24} and selecting one day in the calendar:

Before we see a wasted re-rendering of 874 out of 875 days, and for the other components like Caption and Weekdays:
screen shot 2017-06-11 at 14 11 10

After no wasted rendering for days and other components:
screen shot 2017-06-11 at 14 11 31

Optimization is less visible when selecting one day in a one-month calendar, e.g. before:

screen shot 2017-06-11 at 14 24 11

and after (no wasted time re-rendering the calendar):
screen shot 2017-06-11 at 14 23 47

Owner

gpbl commented Jun 11, 2017

Implementing shouldComponentUpdate in Month is more difficult as the modifiers may have different values which are harder to compare. Anyway, after the optimization above we can see less wasted time on re-rendering components.

This is more visible when rendering multiple months, e.g. with numberOfMonths={24} and selecting one day in the calendar:

Before we see a wasted re-rendering of 874 out of 875 days, and for the other components like Caption and Weekdays:
screen shot 2017-06-11 at 14 11 10

After no wasted rendering for days and other components:
screen shot 2017-06-11 at 14 11 31

Optimization is less visible when selecting one day in a one-month calendar, e.g. before:

screen shot 2017-06-11 at 14 24 11

and after (no wasted time re-rendering the calendar):
screen shot 2017-06-11 at 14 23 47

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