Quick Start Guide
This guide will help you get started with ZenReact in under 5 minutes.
Installation
Install ZenReact using your package manager:
bash
pnpm add @zenreact/core
bash
yarn add @zenreact/core
bash
npm install @zenreact/core
Basic Usage
1. Optimize a Component
The easiest way to improve performance is to wrap any slow component with withOptimization
:
jsx
import { withOptimization } from '@zenreact/core';
function MyComponent({ data }) {
return (
<div>
<h1>{data.title}</h1>
<p>{data.content}</p>
</div>
);
}
// That's it! Your component is now optimized
export default withOptimization(MyComponent);
How it works
withOptimization
automatically:
- Prevents unnecessary re-renders
- Optimizes prop comparisons
- Handles memoization
2. Optimize State Updates
Use useOptimizedState
for smoother 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)}
placeholder="Start typing..."
/>
);
}
Smart Updates
useOptimizedState
automatically:
- Debounces rapid updates
- Batches state changes
- Optimizes re-renders
That's It!
You've learned the two main features that handle 90% of common performance issues:
withOptimization
- Stops unnecessary re-rendersuseOptimizedState
- Makes state updates more efficient
Additional Features
For more specific needs, ZenReact offers additional packages:
bash
# For monitoring performance
pnpm add @zenreact/monitor
# For code splitting
pnpm add @zenreact/bundle
# For server optimization
pnpm add @zenreact/server
bash
# For monitoring performance
yarn add @zenreact/monitor
# For code splitting
yarn add @zenreact/bundle
# For server optimization
yarn add @zenreact/server
bash
# For monitoring performance
npm install @zenreact/monitor
# For code splitting
npm install @zenreact/bundle
# For server optimization
npm install @zenreact/server
Next Steps
- Check out our detailed API Reference for advanced features
- Read our Best Practices Guide for optimization tips
- Join our Discord Community for support
- View Example Projects to see ZenReact in action
Philosophy
ZenReact aims to be simple first - start with just the core optimization features and add more as needed. Most applications see significant performance improvements with just the basic features.