example.js

import React, { useState } from 'react'
import Header from './components/Header.js'
import Game from './components/Game.js'
import LeaderBoard from './components/LeaderBoard.js'
import Spinner from './components/Spinner.js'

// Don't hardcode strings, use constants
const DEFAULT_NAME = 'jeff'

export default function App(){
    const [opponentName, setOpponentName] = useState(DEFAULT_NAME) 
    const [loading, setLoading] = useState(false)

    // Fine, but could be shorter
    const showGame = () => setOpponentName(opponentName || DEFAULT_NAME)
    
    // Prefer not to use functions to return components
    let content = null
    if (loading) {
      // Page is loading.
      content = <Spinner/>
    } else if (opponentName) {
      // A game is running.
      content = <Game/>
    } else {
      // Prompt user to start a new game.
      content = <button onClick={showGame}>click</button>
    }
    return [<Header/>, content]
}