# react-hooks-global-states ๐
**Zero setup. Zero complexity. Maximum performance.** ๐
_One line of code. Infinite possibilities._ โจ
[](https://www.npmjs.com/package/react-hooks-global-states)
[](https://www.npmjs.com/package/react-hooks-global-states)
[](https://github.com/johnny-quesada-developer/react-hooks-global-states/blob/main/LICENSE)
[**Live Demo**](https://johnny-quesada-developer.github.io/global-hooks-example/) โข [**Video Tutorial**](https://www.youtube.com/watch?v=1UBqXk2MH8I/) โข [**CodePen**](https://codepen.io/johnnynabetes/pen/WNmeGwb?editors=0010)
---
## ๐ฏ The One-Liner
```tsx
import { createGlobalState } from 'react-hooks-global-states';
export const useCounter = createGlobalState(0);
```
**That's it.** No providers. No context boilerplate. No configuration files. Just pure, beautiful state management. ๐จ
```tsx
// Use it anywhere, instantly
function Counter() {
const [count, setCount] = useCounter();
return ;
}
```
---
## ๐ Why Developers Love This Library
### ๐ **Zero Learning Curve**
```tsx
// If you know this...
const [state, setState] = useState(0);
// You know this!
const [state, setState] = useGlobalState();
```
### โก **Blazing Fast**
Only components that care about a slice re-render. Surgical precision, maximum performance.
```tsx
// Only re-renders when name changes
const [name] = useStore((s) => s.user.name);
```
;
}
// Alternative: use.select() when you only need the value (not setState)
function UserNameAlt() {
const name = useStore.select((state) => state.user.name);
return
{name}
;
}
// This ONLY re-renders when theme changes
function ThemeSwitcher() {
const [theme, setStore] = useStore((state) => state.theme);
const toggleTheme = () => {
setStore((s) => ({ ...s, theme: theme === 'dark' ? 'light' : 'dark' }));
};
return ;
}
// This ONLY re-renders when notifications array changes
function NotificationCount() {
const [notifications] = useStore((state) => state.notifications);
return {notifications.length};
}
```
**Performance comparison:**
| Approach | Re-renders when ANY state changes? |
| --------------- | ---------------------------------- |
| Context (naive) | โ YES (performance killer) |
| This library | โ NO (only selected slices) |
#### โก Computed Values with Dependencies
Derive values efficiently with automatic recomputation control! - selectors can depend on external state (like `useState`)!
```tsx
const useStore = createGlobalState({
todos: [
{ id: 1, text: 'Task 1', completed: false, priority: 'high' },
{ id: 2, text: 'Task 2', completed: true, priority: 'low' },
{ id: 3, text: 'Task 3', completed: false, priority: 'high' },
],
});
function FilteredTodoList() {
// These are regular useState - NOT in the global store!
const [filter, setFilter] = useState('all'); // 'all' | 'active' | 'completed'
const [priorityFilter, setPriorityFilter] = useState('all'); // 'all' | 'high' | 'low'
// ๐ฅ The magic: selector recomputes when EITHER store OR external state changes!
const [filteredTodos] = useStore(
(state) => {
let todos = state.todos;
// Filter by completion
if (filter === 'active') todos = todos.filter((t) => !t.completed);
if (filter === 'completed') todos = todos.filter((t) => t.completed);
// Filter by priority
if (priorityFilter !== 'all') {
todos = todos.filter((t) => t.priority === priorityFilter);
}
return todos;
},
[filter, priorityFilter], // Recompute when these external dependencies change!
);
return (
{filteredTodos.map((todo) => (
{todo.text}
))}
);
}
// Advanced: use config object with custom equality
function AdvancedFiltered() {
const [filter, setFilter] = useState('all');
const [filteredTodos] = useStore(
(state) =>
state.todos.filter((t) => (filter === 'all' ? true : t.completed === (filter === 'completed'))),
{
dependencies: [filter],
// Custom equality - only recompute if todos array changed
isEqualRoot: (prev, next) => prev.todos === next.todos,
},
);
return
{/* ... */}
;
}
```
#### ๐ Reusable Selector Hooks (The Game Changer!)
Create hooks from hooks! Chain them! Compose them! This is where it gets fun! ๐
```tsx
const useStore = createGlobalState({
users: [
{ id: 1, name: 'Alice', role: 'admin', active: true },
{ id: 2, name: 'Bob', role: 'user', active: true },
{ id: 3, name: 'Charlie', role: 'admin', active: false },
],
currentUserId: 1,
});
// Create a reusable hook for users array
const useUsers = useStore.createSelectorHook((state) => state.users);
// Chain it! Create a hook for active users only
const useActiveUsers = useUsers.createSelectorHook((users) => users.filter((u) => u.active));
// Chain it again! Create a hook for active admins
const useActiveAdmins = useActiveUsers.createSelectorHook((users) => users.filter((u) => u.role === 'admin'));
// Create a hook for the current user
const useCurrentUser = useStore.createSelectorHook((state) => {
return state.users.find((u) => u.id === state.currentUserId);
});
// Now use them anywhere!
function UserStats() {
const [totalUsers] = useUsers();
const [activeUsers] = useActiveUsers();
const [activeAdmins] = useActiveAdmins();
return (
Total: {totalUsers.length}
Active: {activeUsers.length}
Active Admins: {activeAdmins.length}
);
}
function CurrentUserProfile() {
const [user] = useCurrentUser();
return
{user?.name}
;
}
// ๐ฏ Key insight: All these hooks share the SAME setState!
function AnyComponent() {
const [, setFromUsers] = useUsers();
const [, setFromAdmins] = useActiveAdmins();
const [, setFromStore] = useStore();
console.log(setFromUsers === setFromAdmins); // true!
console.log(setFromUsers === setFromStore); // true!
console.log(setFromUsers === useStore.setState); // true!
}
```
**Why this is powerful:**
| Feature | Benefit |
| -------------------- | ------------------------------------------ |
| ๐ฏ **Precision** | Each hook subscribes to only what it needs |
| ๐ **Composability** | Build complex selectors from simple ones |
| โป๏ธ **Reusability** | Define once, use everywhere |
| ๐จ **Clean Code** | No repetitive selector logic in components |
| โก **Performance** | Automatic memoization and change detection |
#### ๐ฌ Actions - When You Need Structure
Actions aren't required, but they're awesome for organizing mutations!
```tsx
const useStore = createGlobalState(
{
todos: new Map(), // Map
filter: 'all',
},
{
actions: {
addTodo(text) {
return ({ setState, getState }) => {
const id = Date.now();
const newTodo = { id, text, completed: false };
setState((s) => ({
...s,
todos: new Map(s.todos).set(id, newTodo),
}));
};
},
toggleTodo(id) {
return ({ setState, getState }) => {
const { todos } = getState();
const todo = todos.get(id);
if (!todo) return;
setState((s) => ({
...s,
todos: new Map(s.todos).set(id, { ...todo, completed: !todo.completed }),
}));
};
},
clearCompleted() {
return ({ setState, getState }) => {
const { todos } = getState();
// Filter out completed todos, create new Map
const newTodos = new Map();
todos.forEach((todo, id) => {
if (!todo.completed) newTodos.set(id, todo);
});
setState((s) => ({ ...s, todos: newTodos }));
// Actions can call other actions!
this.updateStats();
};
},
updateStats() {
return ({ getState }) => {
const { todos } = getState();
const completed = Array.from(todos.values()).filter((t) => t.completed).length;
console.log(`${completed} completed`);
};
},
// Async actions? No problem!
syncWithServer() {
return async ({ setState }) => {
const todosArray = await api.fetchTodos();
const todosMap = new Map(todosArray.map((t) => [t.id, t]));
setState((s) => ({ ...s, todos: todosMap }));
};
},
},
},
);
// When actions are defined, the second element is the actions object!
function TodoApp() {
const [state, actions] = useStore();
return (
{Array.from(state.todos.values()).map((todo) => (
actions.toggleTodo(todo.id)}>
{todo.text}
))}
);
}
// ๏ฟฝ Don't worry, you can still go rogue with setState!
const handleQuickFix = () => {
useStore.setState((s) => ({ ...s, filter: 'all' }));
};
```
#### ๐ Non-Reactive API (Use Outside React!)
Access your state from _anywhere_ - even outside components!
```tsx
const useAuth = createGlobalState({ user: null, token: null });
// โจ In a utility file
export async function loginUser(email, password) {
try {
const { user, token } = await api.login(email, password);
useAuth.setState({ user, token });
return { success: true };
} catch (error) {
return { success: false, error };
}
}
// โจ In an API interceptor
axios.interceptors.request.use((config) => {
const { token } = useAuth.getState();
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
});
// โจ In a WebSocket handler
socket.on('user-updated', (user) => {
useAuth.setState((state) => ({ ...state, user }));
});
// โจ Subscribe to changes (even outside React!)
const unsubscribe = useAuth.subscribe(
// Selector
(state) => state.user,
// Callback
function onChange(newUser) {
console.log('User changed:', user);
analytics.identify(user?.id);
},
);
```
#### ๐ญ Observable Fragments (RxJS-style)
Create observable slices of your state for reactive programming!
```tsx
const useStore = createGlobalState({
count: 0,
user: { name: 'John' },
});
// Create an observable that tracks just the count
const countObservable = useStore.createObservable((state) => state.count);
// Use it outside React
countObservable.subscribe((count) => {
console.log('Count is now:', count);
if (count > 10) {
alert('Count is high!');
}
});
// Observables also have getState
console.log(countObservable.getState()); // Current count value
// Chain observables!
const doubledObservable = countObservable.createObservable((count) => count * 2);
```
#### ๐ Metadata - Non-Reactive Side Info
Store data that doesn't need to trigger re-renders!
```tsx
const useStore = createGlobalState(
{ items: [] },
{
metadata: {
isLoading: false,
lastFetch: null,
error: null,
retryCount: 0,
},
},
);
// Metadata changes don't trigger re-renders!
useStore.setMetadata({ isLoading: true });
// But you can access it anytime
const meta = useStore.getMetadata();
console.log(meta.isLoading); // true
// Perfect for loading states, error tracking, etc.
async function fetchData() {
useStore.setMetadata({ isLoading: true, error: null });
try {
const items = await api.fetch();
useStore.setState({ items });
useStore.setMetadata({
isLoading: false,
lastFetch: new Date(),
});
} catch (error) {
useStore.setMetadata({
isLoading: false,
error: error.message,
retryCount: useStore.getMetadata().retryCount + 1,
});
}
}
```
---
### 2๏ธโฃ Scoped State with `createContext`
Sometimes you need state scoped to a component tree. That's what `createContext` is for!
#### ๐ช The Basics
```tsx
import { createContext } from 'react-hooks-global-states';
// Create a context
const UserFormContext = createContext({
name: '',
email: '',
age: 0,
});
function App() {
return (
);
}
function FormFields() {
const [form, setForm] = UserFormContext.use();
return (
);
}
```
#### ๐งช What About Testing?
Do you need to access the context to spy on state changes, inject test data, or manipulate state directly? No problem!
```tsx
import { renderHook } from '@testing-library/react';
import CounterContext from './CounterContext'; // { count: 0 } with increment() action
describe('CounterContext', () => {
it('should manipulate state from tests', () => {
// Create wrapper with direct access to context
const { wrapper, context } = CounterContext.Provider.makeProviderWrapper();
// Render the hook
const { result } = renderHook(() => CounterContext.use(), { wrapper });
// Read initial state
expect(result.current[0].count).toBe(0);
// Call the action through the wrapper
context.current.actions.increment();
// Verify state updated
expect(result.current[0].count).toBe(1);
});
});
```
#### ๐ฌ Lifecycle Hooks
React to context lifecycle events!
```tsx
const DataContext = createContext([], {
callbacks: {
onCreated: (store) => {
console.log('Context created with:', store.getState());
},
onMounted: (store) => {
console.log('Provider mounted!');
// Fetch data on mount
fetchData().then((data) => store.setState(data));
// Return cleanup
return () => {
console.log('Provider unmounting!');
};
},
},
});
// Or per-provider
function App() {
return (
console.log('Created!')}
onMounted={(store) => {
console.log('Mounted!');
return () => console.log('Cleanup!');
}}
>
);
}
```
---
### 3๏ธโฃ External Actions with `actions`
Extend any store with additional actions without modifying it! Perfect for separating concerns! ๐ฏ
#### ๐ช Direct Binding
```tsx
import { createGlobalState, actions } from 'react-hooks-global-states';
const useCounter = createGlobalState(0);
// Create actions for the store
const counterActions = actions(useCounter, {
increment(amount = 1) {
return ({ setState, getState }) => {
setState(getState() + amount);
};
},
decrement(amount = 1) {
return ({ setState, getState }) => {
setState(getState() - amount);
};
},
double() {
return ({ setState, getState }) => {
setState(getState() * 2);
};
},
});
// Use them anywhere!
counterActions.increment(5); // count = 5
counterActions.double(); // count = 10
counterActions.decrement(3); // count = 7
```
#### ๐จ Action Templates (Define Before Ready!)
Need actions in contexts or lifecycle hooks (onInit) before the store API is available? Create action templates first, bind them later!
```tsx
import { actions, InferAPI, createContext } from 'react-hooks-global-states';
type SessionAPI = InferAPI;
// Create internal actions template
const internalActions = actions()({
loadData() {
return async ({ setState }) => {
...
};
},
});
const SessionContext = createContext(
{ user: null, preferences: {}, lastSync: null },
{
callbacks: {
onInit: (api) => {
const { loadData } = internalActions(api);
// Load data on init
loadData();
// Sync every 5 minutes
const interval = setInterval(loadData, 5 * 60 * 1000);
// Cleanup on unmount
return () => clearInterval(interval);
},
},
// public actions
actions: {
logout() {
return (api) => {
const { setState } = api as SessionAPI;
setState({ user: null, preferences: {}, lastSync: null });
};
},
},
},
);
// Internal actions are not expose through the context
const { loadData } = SessionContext.use.actions();
console.log(loadData); // undefined
```
#### ๐ Actions Calling Actions
Actions can call each other in multiple ways!
```tsx
const useStore = createGlobalState({ count: 0, history: [] }, {
actions: {
clearHistory() {
return ({ setState }) => {
...
};
},
},
});
const storeActions = actions(useStore, {
logAction(message) {
return ({ setState, getState }) => {
...
};
},
increment(amount = 1) {
return ({ setState, getState }) => {
setState((s) => ({ ...s, count: s.count + amount }));
// Call another action in this group with 'this'
this.logAction(`Incremented by ${amount}`);
};
},
incrementTwice(amount = 1) {
return ({ actions }) => {
// Call actions with 'this'
this.increment(amount);
this.increment(amount);
// Or directly from storeActions
storeActions.logAction(`Incremented twice by ${amount}`);
// Access store's public actions via 'actions' parameter
actions.clearHistory();
};
},
});
storeActions.incrementTwice(5);
```
#### ๐ญ Access Store Actions
External actions can call each other with `this` and access the store's public actions!
```tsx
const useStore = createGlobalState(
{ count: 0, logs: [] },
{
actions: {
log(message) {
return ({ setState }) => {
...
};
},
},
},
);
const extraActions = actions(useStore, {
addToHistory(message) {
return ({ setState }) => {
...
};
},
incrementAndLog(amount = 1) {
return ({ setState, actions }) => {
setState((s) => ({ ...s, count: s.count + amount }));
// Call sibling actions with 'this'
this.addToHistory(`Incremented by ${amount}`);
// Access store's public actions
actions.log(`Count increased by ${amount}`);
};
},
});
extraActions.incrementAndLog(5);
```
#### ๐ช Works with Context!
```tsx
import { actions, InferAPI } from 'react-hooks-global-states';
const CounterContext = createContext(0);
type CounterAPI = InferAPI;
// Define action template outside - reusable domain actions
const counterActionsTemplate = actions()({
increment() {
return ({ setState, getState }) => {
setState(getState() + 1);
};
},
decrement() {
return ({ setState, getState }) => {
setState(getState() - 1);
};
},
});
function App() {
return (
);
}
function Counter() {
const api = CounterContext.use.api();
// Bind template to context instance
const { increment, decrement } = useMemo(() => counterActionsTemplate(api), [api]);
return (
);
}
```
---
## ๐ฅ Advanced Patterns
### ๐๏ธ Production Architecture (File Organization)
Real-world large-scale applications need clean separation! Here's how to organize a store with actions in separate files, custom hooks, observables, and a namespace pattern:
**File Structure:**
```
src/stores/todos/
โโโ index.ts // Namespace - bundles everything
โโโ store.ts // Store definition
โโโ constants/ // Initial state & metadata
โ โโโ initialValue.ts
โ โโโ metadata.ts
โโโ types/ // Type definitions
โ โโโ TodosAPI.ts
โ โโโ Todo.ts
โโโ hooks/ // Custom selector hooks
โ โโโ useActiveTodos.ts
โ โโโ useCompletedTodos.ts
โโโ observables/ // Observable fragments
โ โโโ activeTodos$.ts
โโโ helpers/ // Utility functions
โ โโโ createTodo.ts
โโโ actions/
โโโ index.ts // Export all actions
โโโ addTodo.ts
โโโ toggleTodo.ts
โโโ internal/
โโโ syncWithServer.ts
```
**Store Definition (`store.ts`):**
```tsx
import { createGlobalState, actions, type InferAPI } from 'react-hooks-global-states';
import { addTodo, toggleTodo, removeTodo } from './actions';
import { syncWithServer } from './actions/internal';
import { initialValue, metadata } from './constants';
type TodosAPI = InferAPI;
// Internal actions template
const internalActions = actions()({
syncWithServer,
});
const todosStore = createGlobalState(initialValue, {
metadata,
// Public actions - exposed to consumers
actions: {
addTodo,
toggleTodo,
removeTodo,
},
callbacks: {
onInit: (api) => {
// Bind and extend with internal actions (not exposed publicly)
const { syncWithServer } = internalActions(api);
// Auto-sync every 30 seconds
const interval = setInterval(() => syncWithServer(), 30000);
return () => clearInterval(interval);
},
},
});
// Export types (defined in types/ folder)
export type { TodosAPI } from './types';
export default todosStore;
```
**Type Files (`types/TodosAPI.ts`):**
```tsx
// types/TodosAPI.ts
// prevents circular type references
export type TodosAPI = import('../store').TodosAPI;
```
**Action File (`actions/addTodo.ts`):**
```tsx
import type { TodosAPI } from '../types';
/**
* Adds a new todo and syncs with server
*/
function addTodo(this: TodosAPI['actions'], text: string) {
return async ({ setState }: TodosAPI): Promise => {
const newTodo = {
id: crypto.randomUUID(),
text,
completed: false,
createdAt: new Date(),
};
setState((s) => ({
...s,
todos: [...s.todos, newTodo],
}));
// Call internal action to sync
await this.syncWithServer();
};
}
export default addTodo;
```
**Custom Hook (`hooks/useActiveTodos.ts`):**
```tsx
import todosStore from '../store';
export const useActiveTodos = todosStore.createSelectorHook((state) =>
state.todos.filter((t) => !t.completed),
);
```
**Observable (`observables/activeTodos$.ts`):**
```tsx
import { useActiveTodos } from '../hooks/useActiveTodos';
// Derive from hook - reuses the filter logic
export const activeTodos$ = useActiveTodos.createObservable((s) => s);
```
**Namespace Pattern (`index.ts`):**
```tsx
import store from './store';
import { useActiveTodos, useCompletedTodos } from './hooks';
import { activeTodos$, completedTodos$ } from './observables';
// Bundle everything into a clean namespace
const todos$ = Object.assign(store, {
// Custom hooks
useActiveTodos,
useCompletedTodos,
// Observables
activeTodos$,
completedTodos$,
});
export default todos$;
```
**Usage:**
```tsx
import todos$ from './stores/todos';
function TodoApp() {
// Use the namespace
const activeTodos = todos$.useActiveTodos();
// Subscribe to observable outside React
useEffect(() => {
const sub = todos$.activeTodos$.subscribe((todos) => {
console.log('Active todos changed:', todos.length);
});
return () => sub();
}, []);
return (
{activeTodos.map((todo) => (
{todo.text}
))}
);
}
```
**Why this pattern rocks:**
- โ **KISS** - Keep It Simple, Stupid! Easy to navigate
- โ **Type-safe** - Everything is strongly typed
- โ **Public/Private APIs** - Internal actions don't pollute public interface
- โ **Namespace pattern** - Everything bundled: `todos$.useActiveTodos()`, `todos$.activeTodos$`
- โ **Scalable** - Easy to find, test, and maintain individual pieces
### ๐ง Smart Subscriptions
Subscribe to specific slices outside React!
```tsx
const useStore = createGlobalState({
user: { name: 'John', role: 'admin' },
theme: 'dark',
notifications: [],
});
// Subscribe to just the theme
const unsubTheme = useStore.subscribe(
(state) => state.theme,
(theme) => {
document.body.className = theme;
localStorage.setItem('theme', theme);
},
);
// Subscribe to user role changes
const unsubRole = useStore.subscribe(
(state) => state.user.role,
(role) => {
console.log('User role changed to:', role);
analytics.track('role_changed', { role });
},
);
// Cleanup
unsubTheme();
unsubRole();
```
---
## ๐จ `uniqueId` - Type-Safe Unique IDs
Generate branded unique identifiers with compile-time safety!
### ๐ท๏ธ Basic Usage
```tsx
import { uniqueId } from 'react-hooks-global-states';
// Simple IDs
const id1 = uniqueId(); // "a1b2c3d4-e5f6-7890-abcd-ef1234567890"
const id2 = uniqueId('user:'); // "user:a1b2c3d4-e5f6-7890-abcd-ef1234567890"
const id3 = uniqueId('session:'); // "session:a1b2c3d4-e5f6-7890-abcd-ef1234567890"
```
### ๐ Branded IDs (Type Safety!)
Create ID generators with compile-time type checking!
```tsx
// Create branded generators
const generateUserId = uniqueId.for('user:');
const generatePostId = uniqueId.for('post:');
type UserId = ReturnType;
type PostId = ReturnType;
const userId: UserId = generateUserId(); // โ "user:a1b2c3d4-e5f6-7890-abcd-ef1234567890"
const postId: PostId = generatePostId(); // โ "post:a1b2c3d4-e5f6-7890-abcd-ef1234567890"
// TypeScript prevents mixing!
const wrong: UserId = generatePostId(); // โ Type error!
```
### ๐ก๏ธ Runtime Validation
```tsx
const generateUserId = uniqueId.for('user:');
const id = generateUserId(); // "user:a1b2c3d4-e5f6-7890-abcd-ef1234567890"
// Check if a string is a valid user ID
if (generateUserId.is(id)) {
console.log('Valid user ID!');
}
generateUserId.is('user:a1b2c3d4-e5f6-7890-abcd-ef1234567890'); // โ true
generateUserId.is('post:a1b2c3d4-e5f6-7890-abcd-ef1234567890'); // โ false
// Assert (throws if invalid)
generateUserId.assert('user:a1b2c3d4-e5f6-7890-abcd-ef1234567890'); // โ OK
generateUserId.assert('post:a1b2c3d4-e5f6-7890-abcd-ef1234567890'); // โ Throws error!
```
### ๐ฏ Strict Branding
Maximum type safety with symbol branding!
```tsx
declare const UserBrand: unique symbol;
declare const PostBrand: unique symbol;
const generateUserId = uniqueId.for('user:').strict();
const generatePostId = uniqueId.for('post:').strict();
// Even with same prefix, types are incompatible!
const generateUserId2 = uniqueId.for('user:').strict();
type UserId = ReturnType;
type UserId2 = ReturnType;
const id1: UserId = generateUserId(); // โ
const id2: UserId = generateUserId2(); // โ Different brands!
```
### ๐ผ Real-World Example
```tsx
import { createGlobalState, uniqueId } from 'react-hooks-global-states';
// Create typed ID generators
const generateUserId = uniqueId.for('user:');
const generateTodoId = uniqueId.for('todo:');
type UserId = ReturnType;
type TodoId = ReturnType;
interface User {
id: UserId;
name: string;
}
interface Todo {
id: TodoId;
text: string;
assignedTo: UserId | null;
}
const useApp = createGlobalState(
{
users: [] as User[],
todos: [] as Todo[],
},
{
actions: {
addUser(name: string) {
return ({ setState, getState }) => {
const user: User = {
id: generateUserId(), // Type-safe!
name,
};
setState((s) => ({
...s,
users: [...s.users, user],
}));
};
},
addTodo(text: string, assignedTo: UserId | null = null) {
return ({ setState, getState }) => {
const todo: Todo = {
id: generateTodoId(), // Type-safe!
text,
assignedTo,
};
setState((s) => ({
...s,
todos: [...s.todos, todo],
}));
};
},
assignTodo(todoId: TodoId, userId: UserId) {
return ({ setState, getState }) => {
// TypeScript ensures correct ID types!
setState((s) => ({
...s,
todos: s.todos.map((t) => (t.id === todoId ? { ...t, assignedTo: userId } : t)),
}));
};
},
},
},
);
// Usage
const [, actions] = useApp();
// Create a new user
const userId = generateUserId();
actions.addUser('John');
actions.addTodo('Build feature', userId);
```
---
## ๐ Learning Resources
| Resource | Description |
| ------------------------------------------------------------------------------------ | --------------------------------- |
| ๐ฎ [**Live Demo**](https://johnny-quesada-developer.github.io/global-hooks-example/) | Interactive examples |
| ๐ฅ [**Video Tutorial**](https://www.youtube.com/watch?v=1UBqXk2MH8I/) | Full walkthrough |
| ๐ป [**CodePen**](https://codepen.io/johnnynabetes/pen/WNmeGwb?editors=0010) | Try it online |
| ๐ **400+ Tests** | Check the test suite for patterns |
---
## ๐ Platform-Specific Versions
| Package | Platform | Special Feature |
| -------------------------------------------------------------------------------------------------- | -------------------- | ------------------------ |
| [`react-hooks-global-states`](https://www.npmjs.com/package/react-hooks-global-states) | React / React Native | Core library |
| [`react-global-state-hooks`](https://www.npmjs.com/package/react-global-state-hooks) | Web | localStorage integration |
| [`react-native-global-state-hooks`](https://www.npmjs.com/package/react-native-global-state-hooks) | React Native | AsyncStorage integration |
---
## ๐ Why Developers Choose This
```tsx
"I replaced 500 lines of Redux with 50 lines of this. Mind blown." ๐คฏ
- Every developer who tries it
"The useState I always wanted." โค๏ธ
- React developers everywhere
"Finally, state management that doesn't fight me." ๐ฅ
- Tired developers worldwide
```
### The Bottom Line
| What You Get | What You Don't |
| --------------------------- | --------------------- |
| โ `useState` API | โ Boilerplate |
| โ Surgical re-renders | โ Whole-tree updates |
| โ Chainable selectors | โ Repetitive code |
| โ TypeScript inference | โ Manual typing |
| โ Global + Context | โ Either/or choice |
| โ Actions (optional) | โ Required structure |
| โ 30-second learning curve | โ Week-long training |
---
## ๐ Get Started Now
```bash
npm install react-hooks-global-states
```
Then in your app:
```tsx
import { createGlobalState } from 'react-hooks-global-states';
const useTheme = createGlobalState('light');
function App() {
const [theme, setTheme] = useTheme();
return ;
}
```
**That's it. You're done.** ๐
---
### Built with โค๏ธ for developers who value simplicity
**[โญ Star on GitHub](https://github.com/johnny-quesada-developer/react-hooks-global-states)** โข **[๐ Report Issues](https://github.com/johnny-quesada-developer/react-hooks-global-states/issues)** โข **[๐ฌ Discussions](https://github.com/johnny-quesada-developer/react-hooks-global-states/discussions)**