> High-performance React state management with fine-grained reactivity
> High-performance React state management with fine-grained reactivity
Mesa provides automatic dependency tracking and path-based subscriptions, ensuring only the components that need updates actually re-render. Zero dependencies, minimal bundle size, maximum performance.
Only re-render components that use changed data. Mesa automatically tracks dependencies and updates only what's necessary.
Three core functions: proxy(), useStore(), and useInitSync(). No complex selectors, no manual optimizations.
~1KB gzipped with no external dependencies. Built for modern React applications.
``bash`
npm install mesa-react
`tsx
import { proxy, useStore, useInitSync } from "mesa-react";
// Create a reactive store
const store = proxy({
count: 0,
user: {
name: "John",
age: 30,
},
});
// Use in components
function Counter() {
const count = useStore(store, (s) => s.count);
return (
Count: {count}
function UserInfo() {
const userName = useStore(store, (s) => s.user.name);
const userAge = useStore(store, (s) => s.user.age);
return (
Name: {userName}
Age: {userAge}
How It Works
$3
Mesa uses JavaScript Proxies to automatically track which properties your components access. When you use
, Mesa creates a subscription to only the specific paths you read.`tsx
function MyComponent() {
const userName = useStore(store, (s) => s.user.name);
// Only subscribes to 'user.name' property return
{userName};
// Will re-render only when user.name changes
}
`$3
Mesa tracks deep object access automatically:
tsx
function DeepComponent() {
const theme = useStore(store, (s) => s.user.profile.settings.theme);
// Only subscribes to this specific path return
{theme};
}
`$3
Mesa handles immutable updates automatically:
tsx
// These all work seamlessly
store.count = 5;
store.user.name = "Jane";
store.items.push(newItem);
store.nested.deep.value = "updated";
`Advanced Patterns
$3
tsx
const store = proxy({
items: [],
get totalCount() {
return this.items.length;
},
get expensiveValue() {
return this.items.reduce((sum, item) => sum + item.value, 0);
},
});function Summary() {
const totalCount = useStore(store, (s) => s.totalCount);
const expensiveValue = useStore(store, (s) => s.expensiveValue);
return (
Total Items: {totalCount}
Total Value: {expensiveValue}
);
}
`$3
tsx
const store = proxy({
data: null,
loading: false,
error: null,
});function DataComponent() {
// Declarative initialization - runs once per component tree
useInitSync(store, async (state) => {
state.loading = true;
try {
const response = await fetch("/api/data");
state.data = await response.json();
} catch (err) {
state.error = err.message;
} finally {
state.loading = false;
}
});
const data = useStore(store, (s) => s.data);
const loading = useStore(store, (s) => s.loading);
const error = useStore(store, (s) => s.error);
if (loading) return
Loading...;
if (error) return Error: {error};
if (!data) return No data; return
{JSON.stringify(data)};
}
`$3
tsx
function LocalCounter() {
const localStore = useMemo(() => proxy({ count: 0 }), []);
const count = useStore(localStore, (s) => s.count); return ;
}
`Performance Benefits
$3
Mesa tracks only the specific paths your components access:
tsx
function Header() {
const userName = useStore(store, (s) => s.user.name);
// Only subscribes to 'user.name' path
return Welcome, {userName}! ;
}function Sidebar() {
const sidebarContent = useStore(store, (s) => s.sidebar.content);
// Only subscribes to 'sidebar.content' path
return ;
}
function Main() {
const content = useStore(store, (s) => s.content);
// Only subscribes to 'content' path
return {content} ;
}
`$3
Only components that actually use changed data will re-render:
tsx
function CountComponent() {
const count = useStore(store, (s) => s.count);
// Only re-renders when count changes
return Count: {count};
}function NameComponent() {
const name = useStore(store, (s) => s.name);
// Only re-renders when name changes
return
Name: {name};
}// When store.count changes, only CountComponent re-renders
// When store.name changes, only NameComponent re-renders
`API Reference
$3
Creates a reactive store from an initial state object.
tsx
const store = proxy({
count: 0,
user: { name: "John" },
});
`$3
Hook to subscribe to store changes. Returns the selected value.
tsx
const count = useStore(store, (s) => s.count);
const userName = useStore(store, (s) => s.user.name);
`$3
Hook for declarative state initialization with atomic updates.
tsx
// Object initialization
useInitSync(store, {
data: initialData,
initialized: true,
});// Function initialization
useInitSync(store, async (state) => {
const data = await fetchData();
state.data = data;
state.loading = false;
});
// With dependency tracking
useInitSync(store, async (state) => {
const userData = await fetchUser(userId);
state.user = userData;
}, { deps: [userId] });
`Migration Guide
$3
tsx
// Before (Redux)
const mapStateToProps = (state) => ({
count: state.counter.count,
user: state.user,
});// After (Mesa)
const count = useStore(store, (s) => s.count);
const user = useStore(store, (s) => s.user);
`$3
tsx
// Before (Zustand)
const count = useStore((state) => state.count);
const increment = useStore((state) => state.increment);// After (Mesa)
const count = useStore(store, (s) => s.count);
const increment = () => store.count++;
`$3
tsx
// Before (Context)
const { state, dispatch } = useContext(MyContext);// After (Mesa)
const count = useStore(store, (s) => s.count);
``MIT License - see LICENSE for details.
---
Built with ❤️ for the React community.