Skip to content
/ state Public
forked from oleystack/state

πŸš€ Tiny and powerful React hook-based state management library.

License

Notifications You must be signed in to change notification settings

xkrsz/state

Β 
Β 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation



Bundle size

Install

npm i @bit-about/state

Features

  • 100% Idiomatic React
  • 100% Typescript with state types deduction
  • Efficient sub-states selectors
  • State on hook
  • ...with static access
  • No centralized state provider
  • Tiny - only 2.6kB
  • Just works β„’

Usage

import * as React from 'react'
import { state } from '@bit-about/state'

// 1️⃣ Create your hook-like store
const [Provider, useStore] = state(
  () => {
    const [alice, setAlice] = React.useState('Alice')
    return { alice, setAlice }
  }
)

// 3️⃣ Use the selector hook in component
const Child = () => {
  const alice = useStore(state => state.alice)
  return <p>{alice}</p>
}

// 2️⃣ Wrap the tree with the Provider
const App = () => (
  <Provider>
    <Child />
  </Provider>
)

State selectors

Choose your own way to select state and rerender component only when necessary.

// πŸ‘ Rerender when anything changed
const { alice, bob } = useStore()

// πŸ’ͺ Rerender when alice changed
const alice = useStore(state => state.alice)

// 🀌 Rerender 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 store object. Store is static helper which provides access to the state without hook.

const [Provider, useStore, store] = state(...)

and then

// πŸ‘ Get whole state
const { alice } = store.get()

// πŸ’ͺ Get substate
const alice = store
  .select(state => state.alice)
  .get()

// 🀌 Subscribe store and listen on changes
const subscriber = store
  .select(state => state.alice)
  .subscribe(alice => console.log(alice))
  
// remember to unsubscribe!
subscriber.unsubscribe()

NOTE: It's not necessary to fetch state inside of the Provider - but it still needs to be placed somewhere to init the state.

State props

The state hook allows you to pass any arguments into the context. It can be some initial state or you can even return it and pass it through to the components. Any state props change will update the context and trigger components rerendering when necessary.

const [UserProvider, useUser] = state(
  ({ id }) => {
    const [user] = React.useState(() => getMyUserBy(id))
    return user
  }
)

const UserProfile = ({ id }) => (
  <UserProvider id={id}>
    ...
  </UserProvider>
)

πŸ‘‰ 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 rerender themselves.

const [Provider, useStore] = state(
  () => {
    const [counter, setCounter] = React.useState(0);
   
    // βœ–οΈ It will rerender components every time
    // const incrementCounter = () => setCounter(value => value + 1)

    const incrementCounter = React.useCallback(
      () => setCounter(value => value + 1),
      [setCounter]
    )

    return { counter, incrementCounter }
  }
)

BitAboutState πŸ’› BitAboutEvent

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 cool?

import { state } from '@bit-about/state'
import { useEvent } from './auth-events' // Hook generated from events()
import User from '../models/user'

const [UserProvider, useUser] = state(
  () => {
    const [user, setUser] = React.useState<User | null>(null)
    
    useEvent({
      userLogged: (user: User) => setUser(user),
      userLoggout: () => setUser(null)
    })
    
    return user
  }
)

BitAboutState πŸ’› React Query

import { useQuery } from 'react-query'
import { fetchUser } from './user'

const [UserProvider, useUser] = state(
  ({ id }) => {
    const { data: user } = useQuery(['user', id], () => fetchUser(id))
    return user
  }
)

const UserProfile = ({ id }) => (
  <UserProvider id={id}>
    ...
  </UserProvider>
)

// 🧠 Rerender ONLY when user changed (no matter if isLoading changes)
const avatar = useUser(state => state.user.avatar)

Partners

wayfdigital.com

Credits

License

MIT Β© Maciej Olejnik πŸ‡΅πŸ‡±

Support me

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

About

πŸš€ Tiny and powerful React hook-based state management library.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 95.5%
  • HTML 4.5%