Introduction

Getting Started

Reactive aims to provide concise, intuitive way of writing react applications with high performance, embracing a reactivity system and mutations. By taking advantage of reactivity, it also introduces a new way of creating functional components addressing many of the mental complexity brought by functional components with hooks api.

That means no useEffect, no useMemo/useCallback no useState and no redundant repeated renders!!

Reactive is based on a reactivity system. It tracks mutations on a reactive data, making sure only necessary components are re rendered, which eventually leads to a highly optimized application out of the box without worrying about pure components, memoization or immutability.

Reactive also introduces a new but familiar way of defining components (component) heavily inspired by Vue 3 composition API. As a matter of fact, reactivity system is based on @vue/reactivity package which is a very light library powering Vue3. It's also standalone and completely decoupled with Vue.js.

Installation

npm i @re-active/react

Example

import { computed, component, reactive } from '@re-active/react';

export const UserCard = component(() => {
  const user = reactive({
    name: 'John',
    lastName: 'Doe',
  });

  const fullName = computed(() => `${user.name} ${user.lastName}`);

  return () => (
    <div>
      <h2>Welcome {fullName.value} !</h2>
      <label>
        Name:
        <input
          value={user.name}
          onChange={(e) => (user.name = e.target.value)}
        />
      </label>
      <label>
        LastName:
        <input
          value={user.lastName}
          onChange={(e) => (user.lastName = e.target.value)}
        />
      </label>
    </div>
  );
});