timer-form-issue.md

Author

Carlos Martinez

Context

To update the timer when started, we are setting an interval that runs each second and updates the state with the new values for the timer.

The problem is that this doing this, is causing the whole Timer component to rerender each second. And because that component acts as a parent for the TimeEntriesList component this rerender will cause performance issues.

Solution

The timer form is currently being rendered like this:

class Timer {
  render() {
    return (
      <div>
        <input />
        <input />
        <input />

        <TimeEntriesList />
      </div>
    );
  }
}

If we extract the form to its own component, when the interval updates the state we won't be updating the state for the sibling components anymore:

class Timer {
  render () {
    return (
      <div>
        <TimerForm />
        <TimeEntryList />
      </div>
    );
  }
}