my route looks like this:

<Route path="game/:room_id" element={
        <GameProvider>
          <Game />
        </GameProvider>
        } />

Game.jsx(partial) looks like this:

const Game = () => {
  useHoo()
const {
  currentPlayer,
  players,
  guessedPlayersId,
  roundInfo,
  messages,
  timer,
  joinedRoom,
  socket,
  socketReady,
  room_id
}=useGameContext();
useEffect(()=>{
  console.log('hello from game')
},[])

In my GameProvider.jsx i have created a useEffect hook with empty dependency with console.log('hello from provider')
and same in game.jsx console.log('hello from game');
and in useHoo hook i have also defined useEffect which console.log('hello from hoo');

Now here in Game.jsx i have called useHoo first then useGameContext which calls useContext(gameContext); and when i run it i get console.log output in this order:

1)hello from useHoo
2)hello from game
3)hello from provider

I am in confusion why hello from provider is printing at last when it is called before game's useEffect which should technically register that hook first.But it isn't

my route looks like this:

<Route path="game/:room_id" element={
        <GameProvider>
          <Game />
        </GameProvider>
        } />

Game.jsx(partial) looks like this:

const Game = () => {
  useHoo()
const {
  currentPlayer,
  players,
  guessedPlayersId,
  roundInfo,
  messages,
  timer,
  joinedRoom,
  socket,
  socketReady,
  room_id
}=useGameContext();
useEffect(()=>{
  console.log('hello from game')
},[])

In my GameProvider.jsx i have created a useEffect hook with empty dependency with console.log('hello from provider')
and same in game.jsx console.log('hello from game');
and in useHoo hook i have also defined useEffect which console.log('hello from hoo');

Now here in Game.jsx i have called useHoo first then useGameContext which calls useContext(gameContext); and when i run it i get console.log output in this order:

1)hello from useHoo
2)hello from game
3)hello from provider

I am in confusion why hello from provider is printing at last when it is called before game's useEffect which should technically register that hook first.But it isn't

• reactjs
• react-hooks

1 Answer 1

It makes sense why hello from useHoo runs before hello from game - they're run in sequence. But why is hello from provider after both, considering it's higher up in the tree?

Consider that when you write JSX, it gets parsed into React.createElement calls. So

<GameProvider>
  <Game />
</GameProvider>

actually gets parsed into something like:

React.createElement(
  GameProvider,
  {},
  React.createElement(Game, {})
)

so it makes sense why the child has to run first - the function that renders the parent needs the results from the rendering of the child to run, similarly to something like this:

const useHoo = () => {
  console.log('hello from hoo')
}

const Game = () => {
  useHoo()
  console.log('hello from game')
}

const GameProvider = (child) => {
  console.log('hello from provider')

  return child
}

GameProvider(Game())