I learned vanilla Javascript first. Spent a few years building various frontends / websites that way.
Then came React. I thought knowing Javascript meant I'd know React. Oh boy was I wrong.
I started around the time that class-based components were replaced with hooks and function-based components only.
That meant I had to work in the latter, while all the SO posts were about the former, so I couldn't find any solutions to problems I was facing.
About three years in, I still couldn't explain to you wtf a hook is. I've looked at countless tutorials, used countless hooks from various libraries, but I've never felt the need to make one. Which tells me that I still don't know what problem is fundamentally solved by using / making a hook specifically.
All I understand is writing a function that returns a value or a function that returns a bunch of JSX. I've never needed some sort of mystical third concept that somehow requires me to call it 'use'-something, before I'm allowed to call other things called 'use'-something within it. I wish I could somehow wrap my head around it.
Anyway, learning React, I felt I spent more time trying to work out why things sometimes got updated and sometimes not. It felt insanely arbitrary.
Then comes the joy of trying to force the incredibly non-deterministic rendering of the stack of components into something reasonably deterministic. If you have to call multiple endpoints and track the state of those calls and ensure a component only renders when that data is available in its correct form (which has to happen in a specific sequence), you will spend what seems like an insane amount of time forcing something that is inherently non-sequential into executing sequentially. Seems wild to me.
The amount of time some component tries to access 'undefined' is just astounding.
How about closures? It took me so long to finally understand that useEffect doesn't have access to updated state variables unless they are in the dependency array. So much time spent banging my head against the wall, wondering why my variable is always 'behind' by exactly one state update.
Let's assume you've managed to set all this up, you suddenly find out that React literally re-renders the ENTIRE tree of components sitting on top of any child component, every time anything changes.
Let's imagine a form with multiple inputs:
<form>
<input1>
<input2>
<input3>
</form>
If I make a change to input2, the form and all the other inputs are re-rendered. Unless, of course, I wrap each and every input in React.Memo(). If I want my form to handle errors properly, for example by using react-hook-form, I then need to add a custom compare-function for each prop handed into the input, to ensure it updates correctly, but only when needed. What used to be a one-liner <input> has suddenly become 15 lines of code dedicated to working out when to re-render this one input instead of the entire form.
I still haven't used useCallback successfully anywhere in any of my applications, because I'm still not sure I understand what it does or how it works.
Suspense makes sense. Error boundaries are still elusive. I've tried implementing them, but most of the time the only error boundary that really triggers is the one all the way up the tree, which is only one step better than crashing the whole interface when a component encounters an error.
Anyway, so you've finished that whole journey, good job. Enter Next.js. Guess when I started using Next.js? Yup, right around when page-router became the app-router. Same story again, all SO issues are about page-router, so none of the problems I'm encountering have been addressed yet.
How about initialising a Next.JS app in dark-mode to start with? Not possible, because half your app is now server-based components that don't have access to cookies, so it always flashes white first before jumping to dark mode. I suppose I could build my app dark-mode first or save the user's preference in the DB.
Sometimes, it is nice to just store something in localStorage. But, persisting state with Zustand is suddenly hopelessly broken and no amount of hacks around delaying hydration have worked for me so far.
How about changing meta-data of pages, especially if the meta-data relies on a fetch call? How about the fact that the data from that fetch call can't be used in your components, meaning that the fetch call has to be repeated in your component? (But don't worry, Next.js includes black magic to deduplicate fetch calls, pinky-promise that we won't hit every endpoint twice, blowing up your free-tier quota on [insert platform here]).
Caching? Completely arbitrary. Some parts of your app will fetch new data from the server every time, other parts of the app will never update correctly. All depends on who's doing the fetching. If it's a 3rd party service (say, google firebase), then you have to force your api-routes into dynamic rendering before you actually see updated data coming back from fetch calls.
To this day, I haven't managed to get caching working predictably in my app. I literally have no idea when things will revalidate and when not. I've managed to force it into never caching, but a combination of caching when I need it to cache or revalidating every time seems to be impossible to achieve.
So now I am sitting on top of a framework, for a framework, for Javascript, where I neither know when components will update, nor when data will be cached, all because these things are hiding behind magic that is extremely poorly documented (and never seems to include real-world examples of sufficient complexity). It's quite a frustrating experience.
I wouldn't know what the solution to this is. Feels like we've arrived here through years of developer effort and I don't feel qualified to judge it. Therefore, I just put up with it and hope to learn more about it as I build more apps.