Nope. useEffect has never been a life-cycle hook in the first-place!

We've been using useEffect for about 5 years now, yet, the mental model that many developers have about it is still wrong...

& to make things worse, I constantly see this wrong mental modal being taught to the new devs.

So what is this "wrong" mental model I'm talking about??

It's that: "useEffect is a life-cycle hook" Or that: "It's the functional components' version of componentDidMount, componentDidUpdate, & componentWillUnmount"

But in reality... This was never really the case!!

When the React team introduced useEffect hook, their goal wasn't to add lifecycles to functional components. Their goal was to fundementaly improve the way we think & deal with application side-effects.

So if useEffect wasn't meant to be a life-cycle hook, what was it meant to be then??

useEffect is a mechanism to sync a component's state with some external system.

The word "external system" includes things like: logging something, accessing the browser API, fetching data, opening some RT connection to a server,...etc.

I think there is no better way to phrase it than what Ryan Florence once said in a tweet: ` The question is NOT: "when does this effect run??", the question is: "with which state does this effect synchronize with??"

useEffect(fn) // sync with all state useEffect(fn, []) // don't sync with any state useEffect(fn, [s1, s2])// sync with states s1 & s2

Luckily, the new React.js beta docs have been doing a great job in explaining this concept the right way & in great details. So I would strongly recommend everyone to give it a quick read (even if you are someone with 5+ years of exp in React!!)

This page here is a good one to start with: Synchronizing with Effects

& that's everything folks!

Until next time,
And have a great day! 👋