A new approach to state? Introducing Legend-State for React

There are many state managers for React and its metaframeworks. You may use Redux, Recoil, Jotai, Zustand, or even just React Context. You get it - there are a lot of state managers for React. So why do we have another one now, aren't there enought?

What even is Legend State?

Legend State is a state library for Javascript environments that focuses on ease of use, being fast, having minimal renders and being powerfully persistent.

What makes Legend so amazing?

Whether you write big or small applications, Legend provides a great developer and user experience. It is very easy to use - no boilerplate, contexts, reducers, etc. - and is exceptionally fast.

Benchmark provided by Krausest

How to use it?

First, you need to install Legend State

npm i @legendapp/state

Once it has been added to your project, you need to understand the main principle of Legend - observables. Imagine observables as a normal state, just like in React. You can modify the state with the provided get() and set(...) functions.

const state$ = observable({ message: "Hello world!" })

// Get the state with get()
const message = state$.message.get() // "Hello world!"

// Setting the state
state$.message.set("New state")

// Modifying the state
state$.message.set(message => message + ' modified')

You now got the basic state set up. This state can now be observed. Legend provides an onChange(...), obervable(...) and wait(...) function

const state$ = observable({ message: "Hello world!" })

// Using the onChange function to listen to the state directly
state$.message.onChange(({ value }) => console.log('Message is "' + value + '"'))

// This will re-run whenever accessed observables change
observe(() => {
    console.log('Message is "' + state$.message.get() + '"')
})

// when waits for a value to become truthy.
await when(() => state$.message.get() === 'Not hello world!')

// an observable can be computed based on other observables
const notHelloWorld$ = observable(() => state$.message.get() === 'Not hello world!')

Example of using it with React

import { Memo, useObservable } from "@legendapp/state/react"

function MemoExample() {
    const state$ = useObservable({ count: 0 })

    useInterval(() => {
        state$.count.set(v => v + 1)
    }, 500)

    return (
        <div>
            // Memo re-renders itself when count changes
            <div>Count: <Memo>{state$.count}</Memo></div>
        </div>
    )
}

Read more about it on their React focused documentation.

Summary

Legend State is an amazing library and you should totally try it out for yourself. If you are interested in a more in-depth depscription of the library, go look at the documentation of Legend State