@zenreact/core

Core optimization features for ZenReact - High-performance React state management and rendering optimization

Installation

pnpm add @zenreact/core

Peer Dependencies

• React 17.0.0+ or 18.0.0+
• ReactDOM 17.0.0+ or 18.0.0+

API

withOptimization

Higher-order component (HOC) that automatically optimizes React component rendering:

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

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

export default withOptimization(MyComponent);

The HOC:

• Prevents unnecessary re-renders
• Implements smart prop comparison
• Maintains component display name for debugging
• Zero configuration required

useOptimizedState

Hook that provides optimized state management:

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

function SearchBox() {
  const [search, setSearch] = useOptimizedState("");

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

Features:

• Automatic debouncing of rapid updates
• Smart value comparison
• Memory efficient
• Type-safe (TypeScript support)

Package Details

• Side Effects: None (sideEffects: false)
• Module Formats:
  • CommonJS: dist/index.js
  • ESM: dist/index.esm.js
  • TypeScript types: dist/index.d.ts
• Bundle Size: < 3KB minified + gzipped
• Browser Support: All modern browsers, IE11 with polyfills

Development

Build

pnpm build

Builds the package using TypeScript and Rollup.

Test

# Run tests
pnpm test

# Watch mode
pnpm test:watch

# Coverage report
pnpm test:coverage

Uses Jest with React Testing Library.

Type Check

pnpm typecheck

Runs TypeScript type checking without emission.

Contributing

Please see the Contributing Guide.

Documentation

• Full Documentation
• API Reference
• Examples

License

MIT © Zen Development Team