useProtocolData Hook

React hook for fetching live protocol TVL and APY data with auto-refresh

Overview

The useProtocolData hook provides a React-friendly interface to fetch and auto-refresh DeFi protocol data from DefiLlama. It handles loading states, error management, and automatic updates every 5 minutes.

Location: src/hooks/useProtocolData.js

Import

import { useProtocolData } from '../hooks/useProtocolData';

Signature

function useProtocolData(): {
  protocols: Array<ProtocolData>;
  loading: boolean;
  error: string | null;
  lastUpdated: Date | null;
}

Return Values

protocols · Array<ProtocolData> · required

Array of protocol data objects with live TVL and APY

Show ProtocolData Structure

id · string

Protocol identifier

name · string

Protocol display name

slug · string

DefiLlama API slug

type · string

Protocol category (Stacking, Lending, DEX, etc.)

tvl · string

Formatted TVL string (e.g., $45.2M)

tvlRaw · number

Raw TVL in USD

apy · number

APY percentage

apyDisplay · string

Formatted APY string (e.g., 9.5%)

apySource · string

Data source: live or fallback

asset · string

Primary asset type

risk · string

Risk level (Low, Medium, High)

audited · boolean

Security audit status

color · string

Brand color hex code

logo · string

Logo URL

url · string

Protocol website

loading · boolean · required

true during initial data fetch, false once complete

error · string | null · required

Error message if fetch failed, otherwise null

lastUpdated · Date | null · required

Timestamp of last successful data refresh, null before first load

Usage Examples

Basic Usage

import { useProtocolData } from '../hooks/useProtocolData';

function ProtocolDashboard() {
  const { protocols, loading, error, lastUpdated } = useProtocolData();

  if (loading) return <div>Loading protocols...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      <p>Last updated: {lastUpdated?.toLocaleTimeString()}</p>
      
      {protocols.map(protocol => (
        <div key={protocol.id}>
          <h3>{protocol.name}</h3>
          <p>TVL: {protocol.tvl}</p>
          <p>APY: {protocol.apyDisplay}</p>
        </div>
      ))}
    </div>
  );
}

Features

Auto-Refresh

Automatically refetches data every 5 minutes to keep protocol data current

Static Fallback

Starts with static PROTOCOL_META data for instant UI rendering

Error Handling

Captures and exposes fetch errors without breaking the UI

Cleanup Safe

Cancels pending updates when component unmounts to prevent memory leaks

Behavior

Initial Load

1. Hook starts with static protocol metadata from PROTOCOL_META
2. loading is true
3. Immediately fetches live data from DefiLlama
4. Updates protocols with enriched data
5. Sets loading to false and lastUpdated to current time

Auto-Refresh

• Sets up 5-minute interval timer on mount
• Silently refetches data in background
• Updates protocols and lastUpdated on success
• Does not show loading spinner during refresh (UX optimization)

Cleanup

return () => { 
  cancelled = true; 
  clearInterval(interval); 
};

Prevents state updates if component unmounts during fetch.

Implementation Details

Source Code

import { useState, useEffect } from 'react';
import { fetchAllProtocolData, PROTOCOL_META } from '../services/defiLlamaService';

export function useProtocolData() {
    const [protocols, setProtocols] = useState(PROTOCOL_META);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
    const [lastUpdated, setLastUpdated] = useState(null);

    useEffect(() => {
        let cancelled = false;
        async function load() {
            try {
                setLoading(true);
                const data = await fetchAllProtocolData();
                if (!cancelled) {
                    setProtocols(data);
                    setLastUpdated(new Date());
                }
            } catch (err) {
                if (!cancelled) setError(err.message);
            } finally {
                if (!cancelled) setLoading(false);
            }
        }
        load();
        // Refresh every 5 minutes
        const interval = setInterval(load, 5 * 60 * 1000);
        return () => { cancelled = true; clearInterval(interval); };
    }, []);

    return { protocols, loading, error, lastUpdated };
}

Performance

Initial Render: Instant with static data
First Load: ~1-2s for parallel API calls
Refresh Interval: 5 minutes (300,000ms)
Memory: Cleaned up on unmount

Comparison with Service

Feature	useProtocolData Hook	fetchAllProtocolData Service
Usage	React components	Any JavaScript context
State Management	Built-in with useState	Manual
Auto-Refresh	Yes (5 min interval)	No
Error Handling	Exposed as state	Try/catch required
Loading State	Built-in	Manual
Cleanup	Automatic	N/A

Related

DefiLlama Service

Underlying service that fetches protocol data

useWalletProtocols Hook

Detect wallet positions in protocols