Legend-state: High performance state and local first sync

1 month ago 4

⚡️ Fine-grained reactivity in React

Achieve incredible performance by minimizing the number and size of renders.
Legend State makes apps fast by default because they just do less work.

🦄 Incredibly easy to use

When you get() values while observing, it tracks them and re-runs when they change. No boilerplate, no selectors, no dependency arrays, just easy reactivity.

const settings$ = observable({ ui: { theme: 'dark' }}) // Infinitely nested observables const theme$ = settings$.ui.theme // get returns the raw data theme$.get() // 'dark' // set sets theme$.set('light') // Computed observables with just a function const isDark$ = observable(() => theme$.get() === 'dark' ) // observe re-runs when observables change observe(() => { console.log(theme$.get()) }) // use$ re-renders when observables change const Component = () => { const theme = use$(settings$.ui.theme) return <div>{theme}</div> })

🚀 The fastest React state library

Legend-State is so fast that it even outperforms vanilla JS in some benchmarks. It's extremely optimized with fine-grained reactivity and massively reduces re-rendering.

🤝 Local State = Remote State

Just get and set observables and they sync themselves with a powerful sync engine. Your UI code doesn't need any querying, creating mutations, or synchronizing with local state.

You can even bind UI components directly to synced observables.

You don't need any sync code in your components. You can just focus on making great apps.

const profile$ = observable(syncedFetch({ get: 'https://myurl/my-profile', set: 'https://myurl/my-profile', persist: { plugin: ObservablePersistLocalStorage, name: 'profile', }, })) const Component = () => { // get triggers fetch and updates on change const name = use$(profile$.name) const onClick = () => { // set sets the local state and syncs profile$.name.set('Annyong') } // Two-way bind to remote data return <$React.input $value={profile$.name} /> }

Local First with any backend

Use one of our ever-expanding library of sync plugins or build your own on top of the CRUD plugin or the basic synced plugin.

Backend

Persistence

const { mutations, queries } = client.api const messages$ = observable(syncedKeel({ list: queries.listMessages, create: mutations.createMessages, update: mutations.updateMessages, delete: mutations.deleteMessages, // Persist locally persist: { plugin: ObservablePersistLocalStorage, name: 'messages', retrySync: true // Retry sync after reload }, changesSince: 'last-sync' // Sync only diffs }))

Both an expertly crafted collection of tools and an intelligent coding assistant, it's the perfect starting point to build great apps even faster.

One time purchase

Promotional launch pricing

Lifetime access

🛠️ A powerful CLI tool

The Legend Kit CLI makes it easy to enhance your projects with high-performance reactive components, observables, and hooks. Simply run a command and select what you need from our growing library of tools.

Simplified Integration

Install exactly what you need with a simple command. Our CLI handles dependencies, configurations, and setups so you can focus on building your app.

Fully Customizable

Each component, observable, and hook is added directly to your project so you can customize and extend them to fit your specific requirements.

Free & Premium Tools

Browse and install from our collection of both free and premium tools. Unlock more powerful features with your Legend Kit subscription.

Install it now

This will bootstrap and configure itself into your project, adding a "legend" script for easy access.

npx @legendapp/kit

📚 Tons of tools to get started quickly (Coming soon)

Legend Kit includes tons of high performance headless components, general purpose observables, transformer computeds, React hooks that don't re-render, and observable tools for popular frameworks. The core packages are free and the more advanced ones are premium.

Integrations between Legend tools

Legend State
Legend List
Legend Motion
More...

Observable helpers

currentDate
createDraft
stringAsNumber
setAsString
More...

React hooks

useMeasure
usePosition
useScrolled
useHover
More...

Framework hooks

useRoutes
useRouteHistory
useCanRender
usePauseProvider
More...

🧑‍💻 VS Code Extension

A contextually aware coding assistant to accelerate your development speed

Snippets

Easily add Legend-State features by hotkey

Smart Generation

Quickly generate full components

Auto Imports

Automatically adds imports as needed

Context-Aware Sidebar

Quick access to tools most useful in any moment

Linter

Detect and fix common issues like missing observer

Extensive Customization

Customize to your workflow and create your own snippets

VS Code Extension

🤗 Reactive Components for your favorite UI kit

Augment your UI kit with reactive props and two-way binding

👩‍🏫 Example projects

Full open-source apps built with Legend-State that you can use as a starting point or for reference for best practices.

Lifetime access to an ever-growing library of helpers, components, hooks, example projects, and reactive components.

Now available with promotional launch pricing for a limited time.

First version with CLI tools is available now, with more features coming soon after Legend-State 3.0.

Legend Kit

Get lifetime access to everything in Legend Kit for a single one-time purchase, including all future updates. Get started now to save $200 and accelerate Legend Kit's development.

Save $200 (50% off) with promotional pricing!

Read Entire Article