Utilities

Utility functions used internally by React Signify for object manipulation and comparison.

Description

React Signify includes several utility functions that handle deep cloning, object comparison, and cookie management. While these are primarily used internally, understanding them helps explain how the library works.

deepClone

Deep clones JavaScript objects with support for circular references.

Input/Output

Input	Type	Description
source	T	Object to be cloned
options	object (optional)	Configuration for custom constructors

Output	Type	Description
Returns	T	Deep clone of the source object

Example

import { signify } from 'react-signify';

const original = {
  user: { name: 'John', preferences: { theme: 'dark' } },
  items: [1, 2, 3]
};

// Used internally when setting state
const sMyState = signify(original);

// When you call set with a callback, it provides a cloned value
sMyState.set(({ value }) => {
  // 'value' is a deep clone, changes don't affect original
  value.user.name = 'Jane';
  value.items.push(4);
});

deepCompare

Compares two values for deep equality.

Input/Output

Input	Type	Description
a	any	First value to compare
b	any	Second value to compare

Output	Type	Description
Returns	boolean	True if values are deeply equal

Example

// Used internally to determine if state has actually changed
const state1 = { user: { name: 'John' }, count: 5 };
const state2 = { user: { name: 'John' }, count: 5 };
const state3 = { user: { name: 'Jane' }, count: 5 };

// deepCompare(state1, state2) returns true
// deepCompare(state1, state3) returns false

// This prevents unnecessary re-renders when state hasn't actually changed
const sMyState = signify({ name: 'John' });
sMyState.set({ name: 'John' }); // No re-render - same value
sMyState.set({ name: 'Jane' }); // Re-render - different value

Cookie Utilities

Functions for managing browser cookies, used by DevTool for persistence.

setCookie

Input	Type	Description
name	string	Cookie name
value	string	Cookie value
exdays	number	Expiration days (default: 30)

getCookie

Input	Type	Description
name	string	Cookie name to retrieve

Output	Type	Description
Returns	string | null	Cookie value or null if not found

Example

// Used internally by DevTool to save window position
// You typically won't use these directly

// Save DevTool window position
setCookie('devtool-position', JSON.stringify({ x: 100, y: 200 }));

// Restore DevTool window position
const position = getCookie('devtool-position');
if (position) {
  const { x, y } = JSON.parse(position);
  // Apply position to DevTool window
}

Internal Usage

These utilities are used throughout React Signify for:

• State Updates: deepClone ensures immutability when modifying state
• Change Detection: deepCompare prevents unnecessary re-renders
• DevTool Persistence: Cookie functions save DevTool window preferences
• Performance: Efficient comparison and cloning for optimal React updates

Note: While these utilities are exported, you typically won't need to use them directly. They're included here for completeness and to help understand the library's internals.