Early returns in React sub render function: return null, [], or React.Fragment?

Returning null is recommended by the React team:

In rare cases you might want a component to hide itself even though it was rendered by another component. To do this return null instead of its render output.


You dont need to create an extra function for it.

This will do the job:

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