ZenReactHigh-performance React optimization framework

Automatically improve your React app's performance with minimal code changes

Get Started

View on GitHub

API Reference

🚀

Zero Configuration

Just import and use. No complex setup or configuration needed.

⚡️

Instant Results

See immediate performance gains with minimal code changes.

📦

Tiny Bundle Size

Less than 3KB gzipped. No bloat added to your application.

🧠

Automatic Optimization

Automatically detects and fixes performance issues in your components.

💡

Simple API

Just two main functions to learn - withOptimization and useOptimizedState.

🛠

Production Ready

Built for scale, tested in production environments.

Quick Start

bash

# Install using your preferred package manager
pnpm add @zenreact/core

Optimize a Component

jsx

import { withOptimization } from '@zenreact/core';

function MyComponent({ data }) {
  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.content}</p>
    </div>
  );
}

// That's it! Now your component is optimized
export default withOptimization(MyComponent);

Optimize State Updates

jsx

import { useOptimizedState } from '@zenreact/core';

function SearchBox() {
  // Automatically debounces search input
  const [search, setSearch] = useOptimizedState('');

  return <input value={search} onChange={(e) => setSearch(e.target.value)} />;
}

Why ZenReact?

🎯 30-50% fewer re-renders out of the box
🔧 No configuration needed
📚 5-minute learning curve
🤝 Easy team adoption
🛠 Works with any React version

Get started now with our comprehensive guide, or check out our API reference for detailed documentation.