Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/oleystack/state
🚀 Tiny and powerful React hook-based state management library.
https://github.com/oleystack/state
constate context-api hook hooks mobx react react-hooks react-native reactjs redux state state-management
Last synced: about 8 hours ago
JSON representation
🚀 Tiny and powerful React hook-based state management library.
- Host: GitHub
- URL: https://github.com/oleystack/state
- Owner: oleystack
- License: mit
- Created: 2022-03-28T21:00:06.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-03-15T00:32:43.000Z (almost 2 years ago)
- Last Synced: 2025-01-08T04:09:11.374Z (2 days ago)
- Topics: constate, context-api, hook, hooks, mobx, react, react-hooks, react-native, reactjs, redux, state, state-management
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@bit-about/state
- Size: 5.63 MB
- Stars: 55
- Watchers: 3
- Forks: 2
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
## Install
```bash
npm i @bit-about/state
```
## Features
- 100% **Idiomatic React**
- 100% Typescript with state types deduction
- Efficient **sub-states selectors**
- Get state from a hook...
- ...or utilise static access
- No centralized state provider
- Tiny - only **1.4kB**
- **Just works** ™
### ➡️ [Check demo](https://bit-about.github.io/state/)
## Usage
```tsx
import { useState } from 'react'
import { state } from '@bit-about/state'
// 1️⃣ Create a hook-based store
const [Provider, useStore] = state(() => {
const [alice, setAlice] = useState('Alice')
const [bob, setBob] = useState('Bob')
return { alice, setAlice, bob, setBob }
})
// 2️⃣ Wrap tree with Provider
const App = () => (
)
```
and then
```tsx
// 3️⃣ Use the selector hook in component
const Child = () => {
const alice = useStore(state => state.alice)
return
{alice}
}
```
## State selectors
Access fine-grained control to the specific part of your state to re-render **only when necessary**.
```tsx
// 👍 Re-render when anything changed
const { alice, bob } = useStore()
// 💪 Re-render when alice changed
const alice = useStore(state => state.alice)
// 🤌 Re-render when alice or bob changed
const [alice, bob] = useStore(state => [state.alice, state.bob])
// or
const { alice, bob } = useStore(
state => ({ alice: state.alice, bob: state.bob })
)
```
> NOTE: **Values** in objects and arrays created on the fly are shallow compared.
## Static store
The third element of the `state()` result tuple is a `store` object. Store is a static helper which provides access to the state **without a hook**.
```tsx
const [Provider, useStore, store] = state(/* ... */)
```
and then
```tsx
// 👍 Get whole state
const { alice } = store.get()
// 💪 Get substate
const alice = store
.select(state => state.alice)
.get()
// 🤌 Subscribe to the store and listen for changes
const subscription = store
.select(state => state.alice)
.subscribe(alice => console.log(alice))
// remember to unsubscribe!
subscription.unsubscribe()
```
## State props
The state hook allows you to pass any arguments into the context. It can be some initial state or you could even return it and pass it through to the components. All state prop changes will update the context and trigger component re-rendering **only when necessary**.
```tsx
import { useState } from 'react'
import { getUserById } from '../utils'
const [UserProvider, useUser] = state(props => {
const [user] = useState(() => getUserById(props.id))
return user
})
const UserProfile = () => (
{/* ... */}
)
```
## 👉 Functions in state
Please remember that functions defined without `React.useCallback` create themselves from scratch every time - which results in incorrect comparisons and components think the state has changed so they re-render themselves.
```tsx
import { useState, useCallback } from 'react'
const [Provider, useStore] = state(() => {
const [counter, setCounter] = useState(0);
// ✖️ It will re-render components every time
// const incrementCounter = () => setCounter(value => value + 1)
const incrementCounter = useCallback(
() => setCounter(value => value + 1),
[setCounter]
)
return { counter, incrementCounter }
})
```
## BitAboutState 💛 [BitAboutEvent](https://github.com/bit-about/event)
Are you tired of sending logic to the related components?
Move your bussiness logic to the hook-based state using `@bit-about/state` + `@bit-about/event`.
Now you've got **completely type-safe side-effects**. Isn't that cool?
```tsx
import { useState } from 'react'
import { state } from '@bit-about/state'
import { useEvent } from './auth-events' // @bit-about/event hook
import User from '../models/user'
const [UserProvider, useUser] = state(() => {
const [user, setUser] = useState(null)
useEvent({
userLogged: (user: User) => setUser(user),
userLoggout: () => setUser(null)
})
return user
})
```
## BitAboutState 💛 [React Query](https://github.com/tannerlinsley/react-query)
```tsx
import { useQuery } from 'react-query'
import { fetchUser } from './user'
const useUserQuery = (id) => useQuery(['user', id], () => fetchUser(id))
const [UserProvider, useUser] = state(props => {
const { data: user } = useUserQuery(props.id)
return user
})
const UserProfile = () => (
{/* ... */}
)
// 🧠 Re-render ONLY when user avatar changed (no matter if isLoading changes)
const avatar = useUser(state => state.user.avatar)
```
## Partners
## Credits
- [Constate](https://github.com/diegohaz/constate) - approach main inspiration
- [use-context-selector](https://github.com/dai-shi/use-context-selector) & [FluentUI](https://github.com/microsoft/fluentui) - fancy re-render avoiding tricks and code main inspiration
## License
MIT © [Maciej Olejnik 🇵🇱](https://github.com/macoley)
## Support me
If you use my library and you like it...
it would be nice if you put the name `BitAboutState` in the work experience section of your resume.
Thanks 🙇🏻!
---
🇺🇦 Slava Ukraini