Ref Patterns

Direct DOM manipulation patterns with zero React re-renders for high-performance UI.

Overview

Ref patterns provide hardware-accelerated DOM manipulation without triggering React re-renders, perfect for animations, real-time interactions, and singleton object management.

🚀 Quick Start: Begin with RefContext Setup for complete setup patterns and type definitions.

Prerequisites

Essential Setup Guide: RefContext Setup provides:

• Type Definitions: DOM elements, services, workers, and WASM modules
• Context Creation: Basic and advanced RefContext patterns
• Provider Setup: Single, multiple, and conditional provider patterns
• Initialization: Lazy loading and service initialization strategies

Available Ref Patterns

All patterns use types and setups from RefContext Setup:

• Basic Usage - Fundamental RefContext pattern with UIRefs setup
• Context Singleton Handling - ServiceRefs and DatabaseRefs management
• Multi-Context - Multi-Domain RefContext composition patterns
• Performance - WorkerRefs and WASMRefs optimization overview

Performance Optimization Guides

Advanced patterns building on RefContext Setup:

• Canvas Optimization - CanvasRefs performance with WorkerRefs integration
• Hardware Acceleration - GPU-accelerated DOM Element Refs
• Memory Optimization - Service and Library Refs cleanup patterns

Setup-Based Quick Reference

Pattern	Setup Types Used	Provider Pattern	Best For
Basic Usage	UIRefs, FormRefs	Single RefContext Provider	Mouse tracking, simple animations
Context Singleton Handling	ServiceRefs, DatabaseRefs, AnalyticsRefs	Service Initialization	User databases, external services, testing mocks
Multi-Context	PerformanceRefs, MediaRefs, ExternalRefs	Multi-Domain RefContext Setup	Complex UI, separation of concerns
Canvas Optimization	CanvasRefs, WorkerRefs	Worker Initialization	Drawing apps, real-time graphics
Hardware Acceleration	UIRefs, MediaRefs	DOM Element Refs	Smooth animations, high-frequency updates
Memory Optimization	ServiceRefs, WASMRefs	Lazy Initialization	Large apps, leak prevention

When to Use Ref Patterns

Ref patterns are ideal for scenarios defined in RefContext Setup:

• High-Performance UI: 60fps animations using DOM Element Refs
• Direct DOM Manipulation: CanvasRefs, MediaRefs bypass React rendering
• Hardware Acceleration: GPU-accelerated transforms with UIRefs patterns
• Real-time Interactions: Mouse tracking, gesture recognition via FormRefs
• Canvas/SVG Operations: Direct manipulation using Canvas and Graphics Refs
• Context Singleton Management: Service and Library Refs for user-specific connections, testing isolation
• Heavy Computation: Web Workers and WebAssembly integration

Key Features

RefContext provides all features through RefContext Setup patterns:

• ✅ Zero React re-renders for DOM manipulation via direct ref access
• ✅ Hardware-accelerated transforms using GPU-optimized DOM Element Refs
• ✅ Type-safe ref management with comprehensive type definitions
• ✅ Automatic lifecycle management through Provider Setup Patterns
• ✅ Perfect separation of concerns via Multi-Domain RefContext
• ✅ Memory efficient with Lazy Initialization and automatic cleanup

Performance Comparison

Approach	React Re-renders	Performance	Memory	Setup Complexity
useState	Every update	~30fps	High GC	Simple
useRef	Manual checks	~45fps	Medium	Medium
RefContext	Zero	60fps+	Low	Setup Guide

Integration with Other Patterns

Ref patterns integrate seamlessly using RefContext Setup provider composition:

• Store Patterns for state management via Integrated MVVM Setup
• Action Patterns for business logic through Provider Composition
• Async Patterns for safe async operations with Service Initialization

Setup Integration Examples

All integration patterns are detailed in RefContext Setup:

• Single Provider Setup - Basic integration
• Multiple Providers - Complex applications
• Conditional Setup - Feature-based loading
• MVVM Integration - Full architecture