Add React hooks package for improved developer experience and state management

[ivaylonikolov7]

Problem

Current Developer Pain Points

1. Extensive Boilerplate Code

Every component needs manual state management:

function AccountBalance({ accountId }) {
  const [balance, setBalance] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [client, setClient] = useState(null);

  // 40+ lines of useEffect, error handling, client setup...
  
  return <div>Balance: {balance?.hbars.toString()}</div>;
}

2. Manual State Synchronization

After transactions, developers must manually refresh related data:

const handleTransfer = async () => {
  await executeTransfer();
  // Manual refresh of multiple data sources
  await refreshBalance();
  await refreshTokens();
  await refreshTransactionHistory();
};

3. No Real-time Updates

Developers must implement polling and caching mechanisms manually:

useEffect(() => {
  const interval = setInterval(fetchBalance, 10000);
  return () => clearInterval(interval);
}, []);

Solution

Add a React hooks package (@hashgraph/sdk/react) that provides declarative, state-managed interfaces for common Hiero SDK operations. Create hooks for common transactions like useAccountInfo, useAccountBalance, useAccountTokens. Which hooks would be added is due to discussion and it would need to pass through the collaboration hub. This would be a huge feature that would require some work from us, the maintainers, so I would propose a three-phase solution.

Phase 1: Core Hooks

• Account management hooks
• Basic transaction hooks
• Provider setup and context

Phase 2: Advanced Features

• Smart contract hooks
• HTS token hooks
• Real-time capabilities

Benefits

Key Benefits

1. Dramatic Code Reduction

• Before: 50+ lines for basic balance display
• After: 5 lines for same functionality

Automatic State Management## Built-in loading, error, and success states

• Automatic data synchronization after transactions
• Smart cache invalidation

3. Real-time Updates

• WebSocket support for instant updates
• Configurable polling intervals
• Background refresh without UI disruption

4. Better Error HandlingStandardized error messages for common SDK errors

• Automatic retry with exponential backoff
• React Error Boundary integration

Alternatives

No response