reactjs - Why is useEffect running in unexpected manner? - Stack Overflow

admin管理员组

文章数量:1356294

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

Share Improve this question Follow edited Mar 28 at 9:25 Steven 2,12133 gold badges2323 silver badges3535 bronze badges asked Mar 28 at 9:21 Call_Me_RhinoCall_Me_Rhino 711 silver badge11 bronze badge

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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())

本文标签： reactjsWhy is useEffect running in unexpected mannerStack Overflow