Data Structure React Hooks

A collection of React hooks for working with data structures like Arrays, Maps, Sets, Queues, and Stacks with automatic re-rendering.

Why This Library Exists

The Problem

When working with JavaScript's built-in data structures (Array, Map, Set) in React, mutations don't trigger re-renders. This leads to:

  • • Manual state management for every operation
  • • Inconsistent UI updates
  • • Complex state synchronization
  • • Performance issues with large datasets

The Solution

Our hooks provide a seamless way to work with data structures:

  • • Automatic re-rendering on mutations
  • • Familiar native API methods
  • • TypeScript support
  • • Zero configuration required

Available Hooks

A

useArray

Reactive array with all native methods (push, pop, splice, etc.) that automatically trigger re-renders.

Learn more →
M

useMap

Reactive Map with set, delete, and clear operations that automatically trigger re-renders.

Learn more →
S

useSet

Reactive Set with add, delete, and clear operations that automatically trigger re-renders.

Learn more →
Q

useQueue

Reactive Queue implementation with enqueue, dequeue, peek, and isEmpty operations.

Learn more →
S

useStack

Reactive Stack implementation with push, pop, peek, and isEmpty operations.

Learn more →

Ready to Get Started?

Install the package and start using reactive data structures in your React components.

npm install data-strcture-react-hooks