What you’ve written really hits on why so many developers are starting to feel “done” with React. It solved real problems when it came out, but over time it’s become heavy with complexity. Hooks were supposed to simplify state management, but in reality they introduced their own set of quirks (useState not updating immediately, dependency arrays in useEffect, endless gotchas). Add on top of that the constant churn with new features like Concurrent Mode, Suspense, and Server Components, and you’re spending more energy keeping up with React’s way of doing things than building features.
Svelte flips that around because it doesn’t carry the weight of a virtual DOM or endless libraries for basics. Instead of a fragmented ecosystem where you have to pick Redux vs. Zustand vs. Context, Svelte has stores built in. Instead of spending time fighting performance issues and wrapping everything in memo, Svelte compiles down to efficient vanilla JS. The difference in bundle size and build time isn’t just theoretical it’s something you feel day to day as the app grows.
Another underrated part is readability. The example you gave with async data fetching says it all: in React, even a “simple” component often feels verbose and boilerplate-heavy, while in Svelte it’s literally a few lines. This matters not just for speed, but for onboarding new developers, reducing bugs, and making codebases maintainable long term. And then you add built-in animations and transitions that just work, without pulling in half a dozen external libraries that’s a huge quality-of-life win.
I think the biggest point is that React has become the “default” because of its ecosystem and corporate backing, not because it’s the most productive choice anymore. For existing codebases with massive teams, React still makes sense because migration cost is too high. But for new projects, Svelte (and in some cases, frameworks like Solid or Qwik) simply let you move faster and keep the codebase smaller. Companies like GitHub, Apple, and The New York Times adopting it prove it’s not just hype.
So yeah, React isn’t trash, but it does feel like jQuery in its late days widely used, still fine for many cases, but no longer the most elegant or future-facing solution. Svelte shows that web dev can actually be simpler again, and that’s why so many devs who try it don’t want to go back.

Man, I know you are a real dev and have real projects experience, so you know how react feels!But, as a learner just switched from svelte to vue to now react and feeling it as awesome! Don't take me wrong, but for learning, react helps in understanding concepts!

I don't agree with this. React is a mature and powerful library with a well-established ecosystem. While Svelte offers an interesting approach with its templating and compile-time optimizations, it can become cluttered in larger projects, especially when complex logic gets mixed with templates. React, on the other hand, encourages a more modular and component-based structure, and it's actively evolving based on feedback from the developer community. That kind of community-driven development is what keeps a framework alive and relevant. React isn’t going anywhere anytime soon.

I’ve personally switched to Juris, and I couldn’t be happier with it.

Here’s a simple example of building a 3-layer architecture application on the frontend—no bundler required. The code runs directly in the browser, as is.

I’m sharing this because it fits my brain. If it doesn’t resonate with you, that’s totally fine and comprehensible, just please avoid turning it into a heated debate

I precise that I am not the author of Juris, and I have absolutely no financial interest in promoting it.

Beware, if adopted, Juris can be very addictive, I have already experienced it.

Article

Demo

Here is the code, pure vanilla Javascript, totally comprehensible to newcomers :

    // ------------------------
    // 1. Services (pure)
    // ------------------------
    const Services = {
      fetchUsers: async () => {
        const res = await fetch("https://randomuser.me/api/?results=5");
        if (!res.ok) throw new Error("Failed to fetch users");
        return res.json();
      }
    };

    // ------------------------
    // 2. HeadlessComponent
    // ------------------------
    const UserFetcher = (props, { setState, svc }) => {
      const componentApi = {
        fetchUsers: async () => {
          setState("userState.loading", true);
          setState("userState.error", null);
          try {
            const data = await svc.fetchUsers();
            setState("userState.users", data.results);
          } catch (err) {
            setState("userState.error", err.message);
            setState("userState.users", []);
          } finally {
            setState("userState.loading", false);
          }
        }
      };

      return {
        api: componentApi,
        hooks: {
          onRegister: () => {
            componentApi.fetchUsers();
          }
        }
      };
    };

    // ------------------------
    // 3. UI Components
    // ------------------------
    const Skeleton = () => ({ div: { className: "skeleton" } });

    const Card = (user) => {
      const { name, picture, login } = user;
      return {
        div: {
          className: "card",
          'data-user-id': login.uuid,
          children: [
            { img: { src: picture.thumbnail, alt: `${name.first} ${name.last}` } },
            { h2: { text: `${name.first} ${name.last}` } }
          ]
        }
      };
    };

    const EmptyState = () => ({ div: { className: "empty-state", text: "Click the button to load new users!" } });

    const ErrorState = (msg, ctx) => ({
      div: {
        className: "error-state",
        children: [
          { div: { text: `⚠️ ${msg}` } },
          { button: { text: "Retry", onclick: () => ctx.UserFetcher.fetchUsers() } }
        ]
      }
    });

    const renderContent = (ctx) => {
      const { users, loading, error } = ctx.getState("userState");
      if (error) return ErrorState(error, ctx);
      if (loading) return Array(5).fill().map(Skeleton);
      if (users.length === 0) return EmptyState();
      return users.map(Card);
    };

    const App = (props, ctx) => ({
      div: {
        children: [
          { h1: { text: "JurisJS Random Users" } },
          {
            div: {
              className: 'content-area',
              children: () => renderContent(ctx)
            }
          },
          {
            button: {
              text: () => ctx.getState("userState.loading") ? "Loading..." : "Load More Users",
              disabled: () => ctx.getState("userState.loading"),
              onclick: () => ctx.UserFetcher.fetchUsers()
            }
          }
        ]
      }
    });

    // ------------------------
    // 4. Bootstrapping Juris
    // ------------------------
    const app = new Juris({
      services: { svc: Services },
      headlessComponents: {
        UserFetcher: { fn: UserFetcher, options: { autoInit: true } }
      },
      states: {
        userState: {
          users: [],
          loading: false,
          error: null
        }
      },
      components: { App, Skeleton, Card, EmptyState, ErrorState },
      layout: { App }
    });

    app.render();

    app.enhance(".card", (ctx) => ({
      onclick: (e) => {
        const userId = e.currentTarget.dataset.userId;
        const users = ctx.getState("userState.users", []);
        const user = users.find(u => u.login.uuid === userId);

        if (user) {
          alert(`Hello from ${user.name.first} ${user.name.last}!\n(Email: ${user.email})`);  
        }
      }
    }));