Skip to main content
AI Assist is now on Stack Overflow. Start a chat to get instant answers from across the network. Sign up to save and share your chats.

You are not logged in. Your edit will be placed in a queue until it is peer reviewed.

We welcome edits that make the post easier to understand and more valuable for readers. Because community members review edits, please try to make the post substantially better than how you found it, for example, by fixing grammar or adding additional resources and hyperlinks.

Required fields*

4
  • I ran your example on stackblitz and looked at the console they have and it still prints and empty array. Then I looked at the actual browser console and now I see the element. This is the correct answer. Commented Oct 21, 2020 at 7:06
  • Still boggles my mind as to why the devtool shows that as an empty array but when you expand it, there is an element in there with length 1. See gfycat.com/faroffwanfairyfly Commented Oct 21, 2020 at 7:20
  • 1
    @SamR. Yes, this was the last little bit of my answer which briefly says that the console logging ins't lock-step with the code execution and the mutation populates the array after the log was scheduled but before it is flushed to the output (console/terminal/etc..). It certainly causes a lot of confusion when coupled with the inexperience of the react component lifecycle. Commented Oct 21, 2020 at 7:26
  • @DrewReese From the doc it mentioned "The commit phase is usually very fast, but rendering can be slow.". Since ``` {console.log(temp)} ``` is in the rendering phase, this line of code hasn't been run but the commit phase has already completed, by the time this line is run, ``` temp ``` has been mutated due to the commit phase, that's why it won't print an empty array. Am I understanding it correctly? Commented Oct 21, 2020 at 7:29