React Signify API Reference

Complete reference documentation for all React Signify features and methods.

Core Functions

signify

Main factory function to create reactive state instances.

set

Update state values with direct assignment or callback functions.

use

React hook for consuming state in components with automatic re-rendering.

value

Direct access to current state value without subscribing to changes.

State Management

watch

Subscribe to state changes for side effects without component re-renders.

subscribe

Manual subscription management with direct control over unsubscribe lifecycle.

slice

Create derived state slices that automatically update when parent state changes.

reset

Reset state back to its initial value.

Rendering Control

stop

Temporarily disable re-rendering for performance optimization.

resume

Re-enable rendering after being stopped.

Wrap

Wrapper component for conditional rendering based on state.

HardWrap

Optimized wrapper component that prevents parent re-renders.

html

Render string/number state values as HTML content.

Conditional Logic

conditionUpdating

Set conditions for when state updates should occur.

conditionRendering

Control when components should re-render based on state.

Advanced Features

DevTool

Development debugging component for monitoring state changes.

Cache

Persist state in browser storage (localStorage/sessionStorage).

Sync

Synchronize state across multiple browser tabs in real-time.

Utilities

Internal utility functions for object manipulation and comparison.

Quick Start

import { signify } from 'react-signify';

// Create a reactive state
const sCounter = signify(0);

// Use in components
function Counter() {
  const count = sCounter.use();
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => sCounter.set(count + 1)}>
        Increment
      </button>
    </div>
  );
}

Type Definitions

TSignifyConfig

type TSignifyConfig = {
  cache?: TCacheConfig;
  syncKey?: string;
};

TCacheConfig

type TCacheConfig = {
  type?: 'LocalStorage' | 'SesionStorage';
  key: string;
};

TSetterCallback

type TSetterCallback<T> = (params: { value: T }) => void;

Best Practices

1. Initialize state early: Create signify instances outside components
2. Use slices for complex objects: Extract only the data you need
3. Leverage conditions: Use conditionUpdating and conditionRendering for optimization
4. Cache user preferences: Use cache feature for settings that should persist
5. Sync shared data: Use sync for data that should be consistent across tabs
6. Use HardWrap for performance: Prevent unnecessary parent re-renders
7. Debug with DevTool: Monitor state changes during development