React docs themselves recommend starting with Next, Remix, or Gatsby. I can't imagine how Next or Remix is supposed to be a beginner friendly option. Imagine learning about state and JSX, and then now having to decide whether to use Next App Router or Pages router.

Devs should be able progressively _add_ stuff to a React app easily when they need it rather than having to make those decisions at the time of `npm init`

React with its component ideas was a smart and the first of its kind, yes. But its evolution is regrettable. The idea of hooks is so.... that it would be considered spaghetti code in any other realm of software engineering.

I have switched to Svelte. I don't like everything about SvelteKit but it is better than NextJS and simpler to reason about with its page, layout load functions and error components.

With Svelte, I am rarely thinking about framework at all. I am thinking about my business domain.

EDIT: Fixed typos

Disclaimer: All opinions are subjective.

React on the other hand is insane. SolidJS is what react should've evolved in.

The main difference is that Spring side is handled by the same company.

Tldr: React is just a port (the original version).

Just as an FYI, The main concepts of react were first created in PHP. It was called XHP and was latter ported to JavaScript by Facebook. This is why old React was class-based (because php is a class-based OO language).

https://web.archive.org/web/20130821190221/https://github.co...

Function components removed stuff like getDerivedStateFromProps and many other things, introduced clear and simple way of component updating (as in "prop reference changed, I'm gonna render now").

For state we got redux toolkit, which simplified reducers, zustand and recoil/jotai and mobx which allow you to pick based on your needs instead of writing million reducers or passing state to children when you don't really need it.

Its not "react got hard", its people unable to adapt to changing world. Every mainstream framework in reality got streamlined, simpler and more effecient to create apps.

This to me is exactly the problem actually. React was an object oriented framework; it leaned into that for managing state for components. Then they introduced stateful functional components in 16.8, and React became an entirely new paradigm. 16.8 should have been an entirely new framework, and yet it was merely a minor version bump. I can't find myself blaming users for finding it difficult to keep up with the whims of Facebook.

I was always particularly aggrieved by "mapStateToProps", which obfuscates that it's referring to the Redux state rather than the thing that's actually called "state" in the component. And why the heck are we mapping it into the props? (Not that "useSelector" is any great model of clarity, but at least it's a compact verb-noun pair.)

You may want to consider HTMx and its hx-boost which is akin to Turbolinks if you've ever used that.

The addition of Hooks, HOC, Redux, etc. are for large teams, complex apps and/or varying skill levels.

Keep in mind plain js means no enforcement of standard patterns. This may cause problems with onboarding new devs and/or keeping the app manageable as complexity grows.

Also React and plain js are not mutually exclusive.

I also started around 2007ish, MooTools, jQuery, Backbone, Ember, Angular JS, Angular, React and now Nextjs. But for basic projects I usually start with plain js.

I had to use new Angular on a project recently, it's come a long way and it's actually not too bad especially with GPT-4 explaining the reasoning behind Angular, etc. However, it's no React! It's still just too complex, and I can't be bothered to get into decorators, and other quirks that come along with the Angular world.

If you're liking vanilla JS right now, you might like Node - do some backend stuff. It's just regular JavaScript. I think it's always good to stay brushed up on vanilla JS, I do one-off FE stuff all the time in classic HTML/CSS/JS, but for websites my go-to is definitely still React (Next.js typically). I prefer the declarative style, think it works well for FE state, you end up needing some kind of state management usually.

The closest is probably that Angular is batteries-included, whereas React is just a view library. This argument I would be more sympathetic with if those batteries did not include observables for (almost) everything.

(I know about Signals. Not a fan of that either)

First thing which came to my mind was „huh, angular was right“.

And yes, vite and vanilla react is still possible…

But Signals? That's just what everybody is converging on, hence making Angular no worse and no better than the competition in that regard.

I'm using Alpine right now and it's still feel like React (in a conceptual manner), but that's because I've never liked to introduce processing in my own code base, preferring services and other stateful stuff to be outside of my React components.

  function SearchComponent() {
    const [query, setQuery] = useState('')
    const resultList = useItems(query)
    return (
      <>
        <SearchInput value={query} onChange={setQuery} />
        <ResultList items={resultList} />
      <>
    )
  }

Over the years, I used quite a few frameworks and Vanilla JS, and today, I would start a new project with React. It's not perfect, but it's the best choice for most projects since a decade.

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.

* something about reinventing wheels

* easier

* mvp in 30ms

To me it’s always sounded like whiny bullshit. How do you get your MVP up fast? You build a starter template and then copy/paste from it. How do you make it easier? You avoid the bad practices. How do you avoid reinventing wheels? You build libraries.

These giant abstractions are created to appeal to people who are emotionally insecure about how to proceed. If you want to create the next big super framework that’s both your premise and your audience. This was the exact original sales pitch for Angular, btw.

"Using libraries considered baby behavior"

this.setState({this.state: val})

which was already pushing limit of normal behavior which is

state.A = val

just to be revise

i went from having to do

state.onlineStatus = 'active'

to

const [onlineStatus, setOnlineStatus] = useState('active')

Instead of being able to get autocomplete and normal refactoring you would get from plain js.. now you need to add typescript to supplement the mess...

const obj = {

onlineStatus: 'inactive', shoppingCart: '3899x', lastActive: 1834393939 }

obj. [autocomplete anywhere in the project]

vs MORE Boilerplate