Constate

Basic example

importReact,{useState}from"react";importconstatefrom"constate";// 1️⃣ Create a custom hook as usualfunctionuseCounter(){const[count,setCount]=useState(0);constincrement=()=>setCount(prevCount=>prevCount+1);return{ count, increment};}// 2️⃣ Wrap your hook with the constate factoryconst[CounterProvider,useCounterContext]=constate(useCounter);functionButton(){// 3️⃣ Use context instead of custom hookconst{ increment}=useCounterContext();return<buttononClick={increment}>+</button>;}functionCount(){// 4️⃣ Use context in other componentsconst{ count}=useCounterContext();return<span>{count}</span>;}functionApp(){// 5️⃣ Wrap your components with Providerreturn(<CounterProvider><Count/><Button/></CounterProvider>);}

Advanced example

importReact,{useState,useCallback}from"react";importconstatefrom"constate";// 1️⃣ Create a custom hook that receives propsfunctionuseCounter({ initialCount=0}){const[count,setCount]=useState(initialCount);// 2️⃣ Wrap your updaters with useCallback or use dispatch from useReducerconstincrement=useCallback(()=>setCount(prev=>prev+1),[]);return{ count, increment};}// 3️⃣ Wrap your hook with the constate factory splitting the valuesconst[CounterProvider,useCount,useIncrement]=constate(useCounter,value=>value.count,// becomes useCountvalue=>value.increment// becomes useIncrement);functionButton(){// 4️⃣ Use the updater context that will never trigger a re-renderconstincrement=useIncrement();return<buttononClick={increment}>+</button>;}functionCount(){// 5️⃣ Use the state context in other componentsconstcount=useCount();return<span>{count}</span>;}functionApp(){// 6️⃣ Wrap your components with Provider passing props to your hookreturn(<CounterProviderinitialCount={10}><Count/><Button/></CounterProvider>);}

Installation

npm i constate

yarn add constate

API

constate(useValue[, ...selectors])

useValue

import{useState}from"react";importconstatefrom"constate";const[CountProvider,useCountContext]=constate(()=>{const[count]=useState(0);returncount;});

const[CountProvider,useCountContext]=constate(({ initialCount=0})=>{const[count]=useState(initialCount);returncount;});functionApp(){return(<CountProviderinitialCount={10}>      ...</CountProvider>);}

functionCount(){constcount=useCountContext();console.log(count);// 10}

selectors

importReact,{useState,useCallback}from"react";importconstatefrom"constate";functionuseCounter(){const[count,setCount]=useState(0);// increment's reference identity will never changeconstincrement=useCallback(()=>setCount(prev=>prev+1),[]);return{ count, increment};}const[Provider,useCount,useIncrement]=constate(useCounter,value=>value.count,// becomes useCountvalue=>value.increment// becomes useIncrement);functionButton(){// since increment never changes, this will never trigger a re-renderconstincrement=useIncrement();return<buttononClick={increment}>+</button>;}functionCount(){constcount=useCount();return<span>{count}</span>;}

Contributing

License