❌ 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. ↓

A more simple approach in this case is to derive the value during render const isValid = isYearOfBirthValid(yearOfBirth)

I just launched an all-in-one template for cross-platform development, based on the stack I use myself everyday. Expo, NextJS, TypeScript, Tailwind, Firebase, AppsFlyer, Authentication, Analytics, In-App Purchases, Stripe and a lot more, setup by default.

is it valid to replace all of that (useEffect + useState) with an useMemo? it still tracks each change on yearOfBirth, applies the validation, returns 'isValid' but also drops the extra useState on isValid and it's much cleaner (also setYearOfBirth is moved to onChange)

This is as much as an antipattern as the useEffect solution, just derive during the render and add useMemo if needed (only if needed)

As a self learned coder, I didn't know this. Or many other best practices. Your content is gold for me.

@Rhoy__b @ibr9heem

I avoid useEffect whenever I can

useMemo is gonna blow your mind

deriving state in event handlers is a smart move. it cuts down on extra renders, making your app run smoother. keep it efficient, especially in complex components.

This is a great insight. The animation in your post is super clean—may I ask which tool you used to create it?

The official documentation explains this in detail.