- Notifications
You must be signed in to change notification settings - Fork0
A Mutative extension for Jotai
License
mutativejs/jotai-mutative
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
AMutative extension for Jotai
With the Mutative extension, you can simplify the handling of immutable data in Jotai in a mutable way, allowing you to use immutable state more conveniently.
jotai-mutative is more than 10x faster thanjotai-immer.Read more about the performance comparison in Mutative.
In order to use the Mutative extension in Jotai, you will need to install Mutative and Jotai as a direct dependency.
npm install jotai mutative jotai-mutative# Or use any package manager of your choice.atomWithMutative creates a new atom similar to the regular atom with a differentwriteFunction. In this bundle, we don't have read-only atoms, because the point of these functions is the mutative create(mutability) function. The signature of writeFunction is(get, set, update: (draft: Draft<Value>) => void) => void.
import{useAtom}from'jotai';import{atomWithMutative}from'jotai-mutative';constcountAtom=atomWithMutative({value:0});constCounter=()=>{const[count]=useAtom(countAtom);return<div>count:{count.value}</div>;};constControls=()=>{const[,setCount]=useAtom(countAtom);// setCount === update : (draft: Draft<Value>) => voidconstinc=()=>setCount((draft)=>{++draft.value;});return<buttononClick={inc}>+1</button>;};
withMutative takes an atom and returns a derived atom, same asatomWithMutative it has a differentwriteFunction.
import{useAtom,atom}from'jotai';import{withMutative}from'jotai-mutative';constprimitiveAtom=atom({value:0});constcountAtom=withMutative(primitiveAtom);constCounter=()=>{const[count]=useAtom(countAtom);return<div>count:{count.value}</div>;};constControls=()=>{const[,setCount]=useAtom(countAtom);// setCount === update : (draft: Draft<Value>) => voidconstinc=()=>setCount((draft)=>{++draft.value;});return<buttononClick={inc}>+1</button>;};
This hook takes an atom and replaces the atom'swriteFunction with the new mutative-likewriteFunction like the previous helpers.
import{useAtom}from'jotai';import{useMutativeAtom}from'jotai-mutative';constprimitiveAtom=atom({value:0});constCounter=()=>{const[count]=useMutativeAtom(primitiveAtom);return<div>count:{count.value}</div>;};constControls=()=>{const[,setCount]=useMutativeAtom(primitiveAtom);// setCount === update : (draft: Draft<Value>) => voidconstinc=()=>setCount((draft)=>{++draft.value;});return<buttononClick={inc}>+1</button>;};
It would be better if you don't use
withMutativeandatomWithMutativewithuseMutativeAtombecause they provide the mutative-likewriteFunctionand we don't need to create a new one.You can useuseSetMutativeAtomif you need only the setter part ofuseMutativeAtom.
jotai-mutative is inspired byjotai-immer.
It uses the same API asjotai-immer but uses Mutative under the hood. The repository is based on thejotai-immer repository.
jotai-mutative isMIT licensed.
About
A Mutative extension for Jotai
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.