Avoid recursive rendering with promises?

Heres my simplified React component:

import React from "react"
import {useSelector, useDispatch} from "react-redux"
import { useRouteMatch } from "react-router-dom"
import gameService from "../services/game"
import {setGame} from "../reducers/game" //action creator

const Game = () => {
    const game = useSelector(state => state.game)
    const dispatch = useDispatch()

    const match = useRouteMatch('/games/:id')
    gameService.oneGame(match.params.id).then(g => dispatch(setGame(g)))

    const gameInfo = (game) => {
        ...some proceessing
        return(JSX containig info about the game)
    }

    return(
        game ? <div>
            <h2>{game.name}</h2>
            {gameInfo(game)}
         </div> :
         loading
    )
} 

export default Game

Component is called from App.js:

    <Route path="/games/:id">
        <Game />
    </Route>

Everything works but the site renders infinitely. Does the promise resolve after the component has rendered and this renders the component again, or what is happenig here? And what is the easiest fix?

import React, { useEffect } from "react"
import {useSelector, useDispatch} from "react-redux"
import { useRouteMatch } from "react-router-dom"
import gameService from "../services/game"
import {setGame} from "../reducers/game" //action creator

const Game = () => {
    const game = useSelector(state => state.game)
    const dispatch = useDispatch()

    const match = useRouteMatch('/games/:id')
    useEffect(() => {
         gameService.oneGame(match.params.id).then(g => dispatch(setGame(g)))
    }, [match.params.id, dispatch]);

    const gameInfo = (game) => {
        ...some proceessing
        return(JSX containig info about the game)
    }

    return(
        game ? <div>
            <h2>{game.name}</h2>
            {gameInfo(game)}
         </div> :
         loading
    )
} 

export default Game