Reactive

Overview:

The @pago/reactive library is a reactive component model for React and Preact. It aims to provide automatic performance optimizations and a simple API to help developers achieve their goals. Based on the Vue Composition API, this library allows developers to avoid bugs, errors, and unnecessary ceremony caused by the Hooks API. However, it is still in its early stages and may cause pain and changes to the API. Therefore, it should not be used in production. Feedback and observations from experiments are welcomed.

Features:

• Reactive component model on top of React and Preact
• Automatic performance optimizations
• Simple and predictable API
• Works with Suspense
• Works with React.Context
• Concurrent Mode Safe
• Reuse existing Hooks in a Reactive Component through fromHook
• Reuse ref values in Hooks components through useRefValue
• Doesn’t show any wrapper components in React DevTools
• Perfect for incremental adoption into existing projects

Installation:

To set up the @pago/reactive library for React or Preact, follow these steps:

1. Install React 17 or later, or Preact.
2. Install Babel or TypeScript.
3. Specify @pago/reactive as the JSX factory using a comment at the beginning of each file.

Example code for setting up @pago/reactive with React:

// @jsxImportSource @pago/reactive

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Example code for setting up @pago/reactive with Preact:

// @jsxImportSource @pago/reactive

import { h, render } from 'preact';
import App from './App';

render(
  <App />,
  document.getElementById('root')
);

Summary:

The @pago/reactive library provides a reactive component model for React and Preact. It aims to simplify state management and improve performance by providing automatic optimizations. While still in early development, it shows promise but should not yet be used in production. Feedback and experimentation are encouraged to refine the API.