Ранние возвращения в функцию рендера React: return null, [] или React.Fragment?

Question

Допустим, у меня есть простой компонент, который может отображать или не отображать счетчик.

Какова лучшая практика в React для выражения пути заблокированного кода?Должен ли он возвращать null, [] или Fragment?

class App extends Component {
  renderCounter() {
    if (!this.props.shouldRenderCounter) {
      // // which should I return?
      // return; 
      // return null; 
      // return []; 
      // return <React.Fragment />; 
    }
    return <Counter />;
  }

  render() {
    return (
      <div>
        {this.renderCounter()}
      </div>
    );
  }
}

Я думаю, null - самое ясное, но я могу себе представить, что это вызывает проблемы, если контекст вокруг функции возврата ожидаеткомпонент.[] и Fragment оба кажутся мне хорошими вариантами, за исключением того, что Fragment немного легче читать.Какая разница?

Answer 1

Вам не нужно создавать для него дополнительную функцию.

Это сделает работу:

class App extends Component {
  render() {
    return (
      <div>
        {this.props.shouldRenderCounter && <Counter />}
      </div>
    );
  }
}