The React ecosystem moves really quickly, and likes to re-invent wheels.

But React core APIs remain relatively stable, I've been using React the same way for many years at this point, and you can ignore the parts you don't like, like I'm ignoring hooks and haven't found a single use case where I needed them.

I learned React before hooks. Came from a mostly forgotten framework called ExtJS that used base JavaScript classes, so it was an easy transition.

Class based React is great. My old projects are cleanly structured, but harder to change. Class based React also lacks the composability you get with hooks.

Could you please tell me how are you avoiding hooks? You're not using useState or useEffects?

One of the projects I sometimes work on uses class components + mobx; it runs circles around hooks in speed/debuggability/convenience IMHO.

When I want to memoize something slightly complex, for simplicity's sake let's say sorting an array of objects based on one of it's keys. I can put that in a useMemo and it won't sort it again when the page eventually rerenders for some reason.

Usually that array is mapped elsewhere and those child components might also re render if the array is recalculated.

useEffects are when I need to call something outside of react, or when the page gets mounted or I need to call a function when something changes.

I'm still fairly new to this, the above examples may scream bad architecture to those more experienced, all criticisms welcome :)

> all criticisms welcome :)

No criticism really. Your useMemo example is the right use. Your useEffect use is fine, but for things like api calls (which 'call something outside of react' may refer to), you're often better leaning on something like react-query, which is of course built on top of useEffect. So still the right tool, but let others handle many of the sharp edges around that problem.

Thanks. I've started with rtk and saga hence the useEffect. I've since moved to rtk query.

> I can put that in a useMemo and it won't sort it again when the page eventually rerenders for some reason

useMemo dependency smell. This is almost always because your dependencies are wrong. This can often happen if you put a dependency as [object] instead of [object.field] due to how JavaScript maps objects to memory.

Never thought of it that way. What if it's an array though, how will I put it as a dependency?

useMemo is quite nice when you're doing data transformation against some API call or other big data structure.

Yes, it is, but you still have to declare your dependencies correctly.

class components (which do not use hooks) are still supported by React with no scheduled deprecation AFAIK.