The developer experience of svelte is miles better than react, apart from pre-planned request layout structures and less cognitive work on that area

This is due to the fact that react by default does not have any “stores” by default, so unless you are relying on libraries mentioned below – you likely will have to create a huge amount of inheritance and prop-drilling – which quickly gets messy and becomes a maintenance nightmare

for example, lets say you have a simple react function with children

function App() {
    return (
        <div>
            <h1>Apph1>
            <Child />
        div>
    )
}

function Child() {
    return (
        <div>
            <h2>Childh2>
        div>
    )
}

and the way you use it is

function App() {
    const [count, setCount] = useState(0)
    return (
        <div>
            <h1>Apph1>
            <Child count={count} setCount={setCount} />
        div>
    )
}

now imagine doing this for a complex state driven project, it clearly doesn’t work

function App() {
    const [count, setCount] = useState(0)
    const [place, setPlace] = useState("alaska")
    const [name, setName] = useState("river")
    

    
    <UserRepresentation count={count} setCount={setCount}, place={place} setPlace={setPlace}, name={name} setName={setName} />
}

This is probably not a “realistic” example, but in a practical sense, it is a nightmare to manage

So people turn to other libraries like zustand

here you use something similar to

import { create } from 'zustand'

const useBearStore = create((set) => ({