❌ Avoid deriving state in useEffect in React, this can create multiple unnecessary render phases. ✅ Instead derive the state directly in the event handler, this way you'll have one single render phase. ↓

I've been working professionally with React for more than 8 years and I compiled all my knowledge into 100+ infographics and 70+ video animations just like this one. Check them out ↓

Informative as always. Thank you

Glad you found it informative!

Sometime overuse of useEffect cause extra re-render we should avoid useEffect where ever possible. Nice sharing.

But this would only work if the state that’s being updating is supposed to be updated by an event handler. For example, a piece of state you want updated on first render would still have to be the effect, right?

Do you have an example I can take a look? Unless you are fetching data or connecting to an external system first why would you need to update a state variable in first render?

great

Hey do you have an email or contact where I can send you the PP discount?

@Setback_King 😊