CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-mobx-react-lite

Lightweight React bindings for MobX based on React 16.8+ and Hooks

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

MobX React Lite

MobX React Lite provides lightweight React bindings for MobX state management, specifically designed for React 16.8+ functional components using Hooks. It offers a smaller and faster alternative to mobx-react by focusing exclusively on functional components and modern React patterns.

Package Information

  • Package Name: mobx-react-lite
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install mobx-react-lite
  • Peer Dependencies: mobx ^6.1.0, react ^16.8.0 || ^17 || ^18

Core Imports

import { observer, Observer, useLocalObservable } from "mobx-react-lite";

For CommonJS:

const { observer, Observer, useLocalObservable } = require("mobx-react-lite");

Basic Usage

import { observer, Observer, useLocalObservable } from "mobx-react-lite";
import { observable } from "mobx";
import { useState } from "react";

// Create an observable component
const Counter = observer(() => {
  const store = useLocalObservable(() => ({
    count: 0,
    increment() {
      this.count++;
    }
  }));

  return (
    <div>
      <p>Count: {store.count}</p>
      <button onClick={store.increment}>Increment</button>
    </div>
  );
});

// Use the Observer component for specific regions
const App = () => {
  const [state] = useState(() => observable({ count: 0 }));
  
  return (
    <div>
      <Observer>
        {() => <div>Reactive count: {state.count}</div>}
      </Observer>
      <button onClick={() => state.count++}>Update</button>
    </div>
  );
};

Architecture

MobX React Lite is built around several key components:

  • Observer HOC: The observer function wraps functional components to make them reactive to MobX observables
  • Observer Component: The <Observer> component enables reactive regions within non-reactive components
  • Local Observable State: Hooks like useLocalObservable create component-local observable state
  • Static Rendering Support: SSR-friendly APIs for server-side rendering environments
  • Automatic Batching: Integration with React's batching mechanisms for optimal performance

Capabilities

Component Observers

Core functionality for making React components reactive to MobX observable changes. The observer pattern automatically tracks observable access and triggers re-renders when dependencies change.

function observer<P extends object>(
  baseComponent: React.FunctionComponent<P>
): React.FunctionComponent<P>;

interface IObserverOptions {
  readonly forwardRef?: boolean;
}

Component Observers

Local Observable State

Hooks for creating and managing observable state within React components. Provides component-local observable state that integrates seamlessly with the component lifecycle.

function useLocalObservable<TStore extends Record<string, any>>(
  initializer: () => TStore,
  annotations?: AnnotationsMap<TStore, never>
): TStore;

Local Observable State

Static Rendering Support

Server-side rendering utilities that control reactive behavior in SSR environments. These APIs ensure components render correctly on the server without memory leaks.

function enableStaticRendering(enable: boolean): void;
function isUsingStaticRendering(): boolean;

Static Rendering

Advanced Features

Advanced configuration and utilities including observer batching, memory management, and deprecated APIs for migration purposes.

function observerBatching(reactionScheduler: any): void;
function clearTimers(): void;

Advanced Features

Types

// Observer component props
interface IObserverProps {
  children?(): React.ReactElement | null;
  render?(): React.ReactElement | null;
}

// Observer options for function overloads
interface IObserverOptions {
  readonly forwardRef?: boolean;
}

// MobX annotations from mobx package
type Annotation = {
  annotationType_: string;
  make_(adm: any, key: PropertyKey, descriptor: PropertyDescriptor, source: object): any;
  extend_(adm: any, key: PropertyKey, descriptor: PropertyDescriptor, proxyTrap: boolean): boolean | null;
  options_?: any;
};

type AnnotationMapEntry = Annotation | true | false;

type AnnotationsMap<T, AdditionalKeys extends PropertyKey> = {
  [K in keyof T | AdditionalKeys]?: AnnotationMapEntry;
};
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/mobx-react-lite@3.4.x
Publish Source
CLI
Badge
tessl/npm-mobx-react-lite badge