Backset

A minimalist state tool for React apps.

• Very few APIs.
• Based on React Hooks and Context.
• Tracking and eliminate unnecessary re-renders.
• No redundant template code.
• Gzipped ≈ 1.5kb.

Easy to use

• backset is based on React.Context.
• backset is designed to let you write less code.

This is the simplest implementation of count under backset and React.Context, Obviously, backset is shorter and easier to read, if you have multiple components or pass more values, the advantage of backset will be more obvious.

You also can see their differences in the codesandbox editor.

Count example with backset

Count example with Native Context

Performance & Optimization

We all know that the native React.Context will render repeatedly, unless you use the React.Memo wrap component or the useMemo wrap render function, this requires a lot of repetitive code.

You don't have to think about these problems when using backset, it provides the useTracked API to automatically track state, this means:

• Better performance without changing any code.
• Still hooks, still your favorite style.
• Switch at any time, no duplicate code.

Click to view this example online.

Automatically avoids unnecessary rendering

Experience & API Design

Although backset looks magical, it doesn't make any hacks.

backset can intelligently provide all types of inference, it can even check your properties by type, Using backset in your project is definitely a pleasure!

Automatically tips and constraints

Quick start

1. Run yarn add backset or yarn i backset install it.
2. Create a store and use it:

import { create } from 'backset'
const { useStores, useUpdates, withContext } = create({ title: 'Hello World' })

const Child = () => {
  const updates = useUpdates()
  return <button onClick={() => updates.title('Hello Backset')}>Edit</button>
}

const App = () => {
  const { title } = useStores()
  return <div>{title} <Child /></div>
}

export default withContext(App)

Edit this example on codesandbox.

Documentation

• Document Site

LICENSE

MIT