time-entry-component-issue.md

Author

Carlos Martinez

Context

Rendering the TimeEntry component is having a huge impact in the performance of the application, the render times (using the development build) look like this:

Inclusive render time:

https://www.dropbox.com/s/5eehg0brvpi7pl8/Screenshot%202016-09-14%2019.20.18.png?dl=0

Exclusive render time:

https://www.dropbox.com/s/csy1zgwk4ho9jtj/Screenshot%202016-09-14%2019.23.24.png?dl=0

We are rendering a datepicker, 2 buttons and inputs for each of the entry rows.

Solution

The issue with this component is that we are rendering all of those children components even though we don't need them to be rendered. For example, the select field:

render() {
    const { text } = this.props;
    const { entryActive } = this.props;

    return (
      <div>
        <SelectProject ref="selectInput" projects={this.props.projects} inputError={false} selectedProjectId={this.props.projectId} hidden={entryActive} editableInput={true} onSelectChange={this.inputChange} />
        <div className="entry-label">{text}</div>
      </div>
    );
  }

This renders the SelectProject component together with the text even though we only need to display the text in the unactive state. To solve this, we render conditionally each state:

render() {
  const { text } = this.props;
  const { entryActive } = this.props;

  const component = entryActive ? (
    <SelectProject ref="selectInput" projects={this.props.projects} inputError={false} selectedProjectId={this.props.projectId} hidden={false} editableInput={true} onSelectChange={this.inputChange} />
  ) : (
    <div className="entry-label">{text}</div>
  );

  return (
    <div>
      { component }
    </div>
  );
}