{"id":5672,"date":"2025-04-28T16:54:15","date_gmt":"2025-04-28T21:54:15","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=5672"},"modified":"2025-10-15T18:15:09","modified_gmt":"2025-10-15T23:15:09","slug":"react-internals-which-useeffect-runs-first","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/react-internals-which-useeffect-runs-first\/","title":{"rendered":"React Internals: Which useEffect runs first?"},"content":{"rendered":"\n

useEffect<\/a><\/code> is one of the most commonly used hooks in the React community. Regardless of how much experience you have with React, you\u2019ve probably used it before.<\/p>\n\n\n\n

But have you ever run into situations where useEffect<\/code> hooks run in an unexpected order<\/strong> when multiple layers of components are involved?<\/p>\n\n\n\n

Let\u2019s start with a quick quiz. What\u2019s the correct order of these console.log<\/code> statements in the console?<\/strong><\/p>\n\n\n

function<\/span> Parent<\/span>({ children }<\/span>) <\/span>{\n  console<\/span>.log(\"Parent is rendered\"<\/span>);\n  useEffect(()<\/span> =><\/span> {\n    console<\/span>.log(\"Parent committed effect\"<\/span>);\n  }, []);\n\n  return<\/span> <div<\/span>><\/span>{children}<\/div<\/span>><\/span><\/span>;\n}\n\nfunction<\/span> Child<\/span>(<\/span>) <\/span>{\n  console<\/span>.log(\"Child is rendered\"<\/span>);\n  useEffect(()<\/span> =><\/span> {\n    console<\/span>.log(\"Child committed effect\"<\/span>);\n  }, []);\n\n  return<\/span> <p<\/span>><\/span>Child<\/p<\/span>><\/span><\/span>;\n}\n\nexport<\/span> default<\/span> function<\/span> App<\/span>(<\/span>) <\/span>{\n  return<\/span> (\n    <Parent<\/span>><\/span>\n      <Child<\/span> \/><\/span>\n    <\/Parent<\/span>><\/span><\/span>\n  );\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Answer<\/summary>\n
\/\/ initial render
Parent is rendered
Child is rendered

\/\/ useEffects
Child committed effect
Parent committed effect<\/pre>\n<\/details>\n\n\n\n
If you got it right\u2014nice job! If not, no worries\u2014most React devs get this wrong too. In fact, this isn\u2019t something that\u2019s clearly documented or explained on the official React website.<\/p>\n\n\n\n
Let\u2019s explore why children components are rendered last but their effects are committed first. We\u2019ll dive into how and when React renders components and commits effects (useEffect<\/code>). We\u2019ll touch on a few React internal concepts like the React Fiber architecture<\/strong> and its traversal algorithm<\/strong>.<\/p>\n\n\n\n
Frontend Masters offers lots of courses on React, like Complete Intro to React and Intermediate React<\/a> by Brian Holt<\/a>.<\/p>\n\n\n\n
Overview of React Internals<\/h2>\n\n\n\n
According to React official documentation<\/a>, the entire React\u2019s component lifecycle can be roughly divided into 3 phases: Trigger \u2192 Render \u2192 Commit<\/strong><\/em><\/p>\n\n\n\n
Triggering a render<\/h3>\n\n\n\n