Skip to main content

​
Utility Functions

GlyphUI exports utility functions that are used internally for virtual DOM diffing and can also be used in your application code for object comparisons.

​
isShallowEqual()

Performs a shallow equality check between two objects. Returns true if both objects have the same keys and values, where values are compared with strict equality (===). 
function isShallowEqual(obj1, obj2)
​
obj1
object
required
First object to compare
​
obj2
object
required
Second object to compare
​
return
boolean
true if objects are shallowly equal, false otherwise

​
Behavior

  • Returns true if both references are identical (obj1 === obj2)
  • Returns false if either object is null or undefined
  • Compares the number of keys in both objects
  • Compares each key’s value using strict equality (===)
  • Special handling for on property (event listeners) - only checks existence
  • Skips the key property in comparison

​
Usage

import { isShallowEqual } from 'glyphui';

const obj1 = { a: 1, b: 2 };
const obj2 = { a: 1, b: 2 };
const obj3 = { a: 1, b: 3 };

console.log(isShallowEqual(obj1, obj2)); // true
console.log(isShallowEqual(obj1, obj3)); // false

// Nested objects are compared by reference
const obj4 = { a: 1, nested: { x: 1 } };
const obj5 = { a: 1, nested: { x: 1 } };
console.log(isShallowEqual(obj4, obj5)); // false (different nested object references)
This function is used internally by GlyphUI’s virtual DOM diffing algorithm to determine if component props have changed.

​
isDeepEqual()

Performs a deep equality check between two values. Recursively compares nested objects and arrays. 
function isDeepEqual(obj1, obj2)
​
obj1
any
required
First value to compare
​
obj2
any
required
Second value to compare
​
return
boolean
true if values are deeply equal, false otherwise

​
Behavior

  • Handles primitives (strings, numbers, booleans)
  • Returns true if both references are identical
  • Returns false if either value is null or undefined
  • Returns false if types don’t match
  • Recursively compares arrays element by element
  • Recursively compares object properties
  • Skips function comparisons (always returns true for function properties)

​
Usage

import { isDeepEqual } from 'glyphui';

// Primitives
console.log(isDeepEqual(1, 1)); // true
console.log(isDeepEqual('hello', 'hello')); // true

// Arrays
console.log(isDeepEqual([1, 2, 3], [1, 2, 3])); // true
console.log(isDeepEqual([1, 2], [1, 2, 3])); // false

// Nested objects
const obj1 = { a: 1, nested: { x: 1, y: 2 } };
const obj2 = { a: 1, nested: { x: 1, y: 2 } };
const obj3 = { a: 1, nested: { x: 1, y: 3 } };

console.log(isDeepEqual(obj1, obj2)); // true
console.log(isDeepEqual(obj1, obj3)); // false

// Mixed structures
const complex1 = { a: [1, 2], b: { c: 3 } };
const complex2 = { a: [1, 2], b: { c: 3 } };
console.log(isDeepEqual(complex1, complex2)); // true
This function is primarily useful for testing. It’s not used in the core virtual DOM diffing algorithm since shallow comparison is sufficient for most cases.

​
When to Use

Use isShallowEqual

  • Comparing component props
  • Checking if re-render is needed
  • Performance-critical paths
  • Flat object structures

Use isDeepEqual

  • Testing deeply nested structures
  • Verifying complex state changes
  • Non-performance-critical code
  • Debugging and assertions

​
Performance Considerations

  • Shallow comparison is O(n) where n is the number of keys
  • Deep comparison can be O(n×m) for nested structures
  • For performance-critical code, prefer shallow comparison
  • Deep comparison should be used sparingly in production code

Build docs developers (and LLMs) love

Get started for freeTalk to us