Introduction

Welcome to Mesa, a lightweight React state management library with fine-grained reactivity.

Welcome to Mesa! A lightweight, high-performance React state management library that provides fine-grained reactivity for optimal rendering performance.

Why Mesa?

Traditional state management solutions often cause unnecessary re-renders, leading to performance bottlenecks. Mesa solves this by tracking exactly which parts of your state each component depends on, ensuring minimal updates and maximum performance.

Key Insight:

Mesa only re-renders components that actually need updates, not every component that subscribes to the store.

Core Principles

Mesa is built on three fundamental principles:

  • Fine-Grained Reactivity: Track dependencies at the property level, not the object level
  • Minimal API Surface: Three core functions - proxy(), useStore(), and useInitSync()
  • Zero Dependencies: Lightweight with no external dependencies

Key Features

FeatureDescription
Fine-Grained UpdatesOnly re-render components that use changed data
Proxy-Based TrackingEfficient state change detection using JavaScript Proxy
TypeScript SupportFull type safety out of the box
Nested Object SupportDeep object tracking with path-based subscriptions
Minimal Bundle SizeZero dependencies, minimal footprint
React 18+ CompatibleUses useSyncExternalStore for optimal React integration

Basic Example

import { proxy, useStore } from "mesa-react";

// Create a proxy state
const state = proxy({
  count: 0,
  user: { name: "John", age: 25 },
});

function Counter() {
  // Only re-renders when count changes
  const count = useStore(state, (s) => s.count);
  return <button onClick={() => state.count++}>Count: {count}</button>;
}

function UserProfile() {
  // Only re-renders when user.name changes
  const name = useStore(state, (s) => s.user.name);
  return <div>User: {name}</div>;
}

Performance Benefits

Mesa's fine-grained reactivity means:

  • Fewer Re-renders: Components only update when their specific dependencies change
  • Better Performance: Reduced computation and DOM updates
  • Predictable Updates: Clear understanding of what triggers each component update
  • Scalable: Performance stays consistent as your app grows

Getting Started

Ready to optimize your React app's performance? Check out our Installation Guide to get started with Mesa.