Способы реализации условного рендеринга в React

Вот несколько способов реализовать условный рендеринг в React:

1. Использование оператора if-else в renderметоде:

render() {
  if (this.state.isLoading) {
    return <div>Loading...</div>;
  } else {
    return <div>Hello, World!</div>;
  }
}

render() {
  return this.state.isLoading ? <div>Loading...</div> : <div>Hello, World!</div>;
}

render() {
  return this.state.isLoading && <div>Loading...</div>;
}

renderContent() {
  if (this.state.isLoading) {
    return <div>Loading...</div>;
  }
  return <div>Hello, World!</div>;
}

render() {
  return <div>{this.renderContent()}</div>;
}
//
getContent() {
  if (this.state.isLoading) {
    return <div>Loading...</div>;
  }
  return <div>Hello, World!</div>;
}

render() {
  const content = this.getContent();
  return <div>{content}</div>;
}