Custom render() Methods and Components

Separate render() methods

Another way to increase the readability during complex conditional rendering is to move parts from the regular render() method to separate renderXY() methods. The regular render() method still forms the core of the component and decides which parts of the user interface to show to the user. Therefore, this method should not become overly complex or contain any unnecessary logic.

It is not uncommon to move parts of long and complex render() methods into much smaller, more digestible chunks and implement these as custom class methods. If proper naming is used, this technique usually aids readability and understanding. Often these custom render() blocks are combined with if blocks:

class Countdown extends React.Component {
  renderTimeLeft() {
    // […]
  }

  renderTimePassed()

...