An early return exits a React component before later statements run when rendering is unnecessary. Returning null renders nothing and avoids extra calculations or JSX creation. section 3.2.6
Countdown that stops at zero
Check the stopping condition first: if remaining time is zero, return null. Otherwise, calculate minutes and seconds, then return the countdown paragraph. section 3.2.6
class Countdown extends Component {
render() {
if (this.props.remaining === 0) {
return null;
}
const seconds = this.props.remaining % 60;
const minutes = Math.floor(this.props.remaining / 60);
return <p>{minutes}:{seconds}</p>;
}
}
Compare the early-return version with the longer conditional version to see how the failed condition implicitly skips the remaining render code. section 3.2.6
