Leveraging WebAssembly in React for High-Performance Applications

---
description: Enforce best practices for integrating WebAssembly with React to optimize performance-intensive tasks.
globs: ['**/*.jsx', '**/*.tsx']
tags: [react, webassembly, performance]
priority: 3
version: 1.0.0
---

# Leveraging WebAssembly in React for High-Performance Applications

## Context
- Applicable when incorporating WebAssembly modules into React applications to handle performance-critical operations.
- Assumes familiarity with React and WebAssembly fundamentals.

## Requirements
- **Modularization**: Encapsulate WebAssembly logic within dedicated modules to maintain separation of concerns.
- **Efficient Loading**: Utilize `WebAssembly.instantiateStreaming` for optimal module loading and instantiation.
- **Memory Management**: Ensure proper memory allocation and deallocation to prevent leaks and optimize performance.
- **Error Handling**: Implement robust error handling for WebAssembly module loading and execution failures.
- **Interoperability**: Use appropriate data serialization and deserialization methods for seamless communication between JavaScript and WebAssembly.
- **Performance Testing**: Benchmark WebAssembly functions to verify performance improvements over JavaScript equivalents.

## Examples

<example>
**Good Example**: Integrating a WebAssembly module for complex calculations in a React component.

import React, { useState, useEffect } from 'react';

const Calculator = () => {
  const [result, setResult] = useState(null);

  useEffect(() => {
    const loadWasm = async () => {
      try {
        const response = await fetch('calculator.wasm');
        const { instance } = await WebAssembly.instantiateStreaming(response);
        const add = instance.exports.add;
        setResult(add(2, 3));
      } catch (error) {
        console.error('Failed to load WebAssembly module:', error);
      }
    };

    loadWasm();
  }, []);

  return <div>Result: {result}</div>;
};

export default Calculator;
</example>

<example type="invalid">
**Bad Example**: Loading a WebAssembly module without error handling and using synchronous instantiation.

import React, { useState, useEffect } from 'react';

const Calculator = () => {
  const [result, setResult] = useState(null);

  useEffect(() => {
    fetch('calculator.wasm')
      .then(response => response.arrayBuffer())
      .then(bytes => WebAssembly.instantiate(bytes))
      .then(instance => {
        const add = instance.exports.add;
        setResult(add(2, 3));
      });
  }, []);

  return <div>Result: {result}</div>;
};

export default Calculator;
</example>