Why Choose React Foam?
Built for modern React applications with performance and simplicity in mind.
Lightning Fast
Built on React's useSyncExternalStore for optimal performance with automatic memoization.
Type Safe
TypeScript-first design with full type inference and IntelliSense support out of the box.
Zero Boilerplate
Simple API that eliminates reducers, actions, and complex setup. Just create and use.
Tiny Bundle
Less than 2KB gzipped with zero dependencies. Perfect for performance-conscious applications.
Selective Updates
Components only re-render when their selected state changes, not the entire store.
Developer Friendly
Intuitive API that feels natural to React developers with excellent debugging support.
Simple Yet Powerful
See how easy it is to create and use stores with React Foam.
Create a Store
Define your state shape and create a store in seconds.
ts
1import { createStore } from 'react-foam';2
3interface CounterState {4 count: number;5 step: number;6}7
8const useCounterStore = createStore<CounterState>({9 count: 0,10 step: 111});Use in Components
Access and update state with a simple hook interface.
tsx
1function Counter() {2 const { count, step } = useCounterStore();3 4 const increment = () => {5 useCounterStore.setState(state => ({6 ...state,7 count: state.count + state.step8 }));9 };10 11 return (12 <div>13 <p>Count: {count}</p>14 <button onClick={increment}>15 +{step}16 </button>17 </div>18 );19}