Getting Started

Let's start using use-less-react!

Installation

npm install @dxbox/use-less-react

ESLint Plugin (Recommended)

The library includes an ESLint plugin that helps catch common mistakes and ensures proper usage patterns.

Installation

npm install --save-dev @dxbox/eslint-plugin-use-less-react

Configuration

Using the preset configuration is recommended - it includes all rules with sensible defaults. You can customize individual rules later if needed.

eslint.config.js (ESLint 9+ flat config):

import useLessReact from '@dxbox/eslint-plugin-use-less-react';

export default [
  ...useLessReact.configs.recommended,
];

The recommended preset includes:

• exhaustive-deps - Ensures all ReactiveValues used in callbacks are included in dependency arrays
• computed-value-exhaustive-deps - Ensures all ReactiveValues used in ComputedValue are included in dependencies
• require-auto-dispose - Ensures classes with Disposable properties are marked with @AutoDispose

Customizing individual rules:

If you need to customize specific rules, you can override them after extending the recommended config:

// eslint.config.js
import useLessReact from '@dxbox/eslint-plugin-use-less-react';

export default [
  ...useLessReact.configs.recommended,
  {
    rules: {
      'use-less-react/require-auto-dispose': 'warn', // Override to warning instead of error
    },
  },
];

This helps prevent memory leaks and ensures your code follows best practices.

Entry Points

The library is organized into three main entry points:

Client (@dxbox/use-less-react/client)

Hooks and utilities for React (client-side only).

import {
  useReactiveValues,
  useReactiveStoreValues,
  useDisposable,
  createGenericContext,
  createHydrationContext,
} from "@dxbox/use-less-react/client";

Classes (@dxbox/use-less-react/classes)

Reactive classes and utilities (work anywhere - client, server, workers, etc.).

import {
  ReactiveValue,
  ReactiveObject,
  ReactiveArray,
  ReactiveStore,
  ComputedValue,
  ReactiveReference,
  Disposable,
  AutoDispose,
  IgnoreDisposable,
  makeDisposableObject,
} from "@dxbox/use-less-react/classes";

DevTools (@dxbox/use-less-react/devtools)

DevTools for monitoring and debugging reactive instances.

import {
  monitor,
  initDevTools,
  DevToolsProvider,
  DevToolsPanel,
  useMonitorReactiveValue,
  useMonitorReactiveStore,
} from "@dxbox/use-less-react/devtools";

Your First Example

Let's create a simple counter to see how it works:

import { useDisposable } from '@dxbox/use-less-react/client';
import { useReactiveValues } from '@dxbox/use-less-react/client';
import { ReactiveValue, AutoDispose } from '@dxbox/use-less-react/classes';

// Define your business logic in a class
@AutoDispose
class Counter implements Disposable {
  count = new ReactiveValue(0);
  // count is automatically detected and disposed (has Symbol.dispose)

  [Symbol.dispose](): void {
    // Custom cleanup logic if needed
  }

  increment() {
    this.count.set(c => c + 1);
  }

  decrement() {
    this.count.set(c => c - 1);
  }
}

// Use it in your React component
function CounterComponent() {
  // Automatically disposed when component unmounts
  const counter = useDisposable(() => new Counter());
  
  // Subscribe to reactive values
  const { count } = useReactiveValues({ count: counter.count });

  return (
    <div>
      <span>{count}</span>
      <button onClick={() => counter.increment()}>+</button>
      <button onClick={() => counter.decrement()}>-</button>
    </div>
  );
}

That's it! The counter logic lives in a plain JavaScript class, completely independent of React. The component just subscribes to changes and renders the UI.

Key Concepts

1. Reactive Values: ReactiveValue, ReactiveObject, ReactiveArray - these hold your data and notify subscribers when they change
2. Stores: ReactiveStore - coordinates multiple reactive values together
3. Computed Values: ComputedValue - automatically calculated from other reactive values
4. Disposal: useDisposable - automatically cleans up reactive instances when components unmount
5. Hooks: useReactiveValues, useReactiveStoreValues - connect reactive values to React components

Next Steps

• Learn about the Reactivity Model to understand how it works under the hood
• Check out the API Reference for detailed documentation
• See Best Practices for common patterns and use cases
• Explore Prefabs for advanced patterns like Memento, FSM, and CQRS