Requirements
- Target platform
- OpenClaw
- Install method
- Manual import
- Extraction
- Extract archive
- Prerequisites
- OpenClaw
- Primary doc
- SKILL.md
Tencent SkillHub ยท Developer Tools
Realtime React Hooks
React hooks for real-time data with SSE, WebSocket, and SWR integration. Covers connection management, reconnection logic, and optimistic updates. Use when building React apps with real-time features. Triggers on SSE hook, WebSocket hook, real-time React, useEventSource, live updates.
skill openclawclawhub Free
React hooks for real-time data with SSE, WebSocket, and SWR integration. Covers connection management, reconnection logic, and optimistic updates. Use when building React apps with real-time features. Triggers on SSE hook, WebSocket hook, real-time React, useEventSource, live updates.
โฌ 0 downloads โ
0 stars Unverified but indexed
Install for OpenClaw
Quick setup
- Download the package from Yavira.
- Extract the archive and review SKILL.md first.
- Import or place the package into your OpenClaw setup.
Package facts
- Download mode
- Yavira redirect
- Package format
- ZIP package
- Source platform
- Tencent SkillHub
- What's included
- README.md, SKILL.md
Validation
- Use the Yavira download entry.
- Review SKILL.md after the package is downloaded.
- Confirm the extracted package contains the expected setup assets.
Install with your agent
Agent handoff
Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.
- Download the package from Yavira.
- Extract it into a folder your agent can access.
- Paste one of the prompts below and point your agent at the extracted folder.
New install
I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Then review README.md for any prerequisites, environment setup, or post-install checks. Tell me what you changed and call out any manual steps you could not complete.
Upgrade existing
I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Then review README.md for any prerequisites, environment setup, or post-install checks. Summarize what changed and any follow-up checks I should run.
Trust & source
Release facts
- Source
- Tencent SkillHub
- Verification
- Indexed source record
- Version
- 1.0.0
Provenance
- Publisher
- wpank
- Source page
- View original listing
- Canonical URL
- Open canonical page
Documentation
Real-Time React Hooks
Production patterns for real-time data in React applications using SSE, WebSocket, and SWR.
OpenClaw / Moltbot / Clawbot
npx clawhub@latest install realtime-react-hooks
When to Use
React apps needing live data updates Dashboards with real-time metrics Chat interfaces, notifications Any UI that should update without refresh
Pattern 1: SSE Hook
import { useEffect, useRef, useState, useCallback } from 'react'; interface UseSSEOptions<T> { url: string; onMessage?: (data: T) => void; onError?: (error: Event) => void; enabled?: boolean; } export function useSSE<T>({ url, onMessage, onError, enabled = true, }: UseSSEOptions<T>) { const [data, setData] = useState<T | null>(null); const [isConnected, setIsConnected] = useState(false); const eventSourceRef = useRef<EventSource | null>(null); useEffect(() => { if (!enabled) return; const eventSource = new EventSource(url); eventSourceRef.current = eventSource; eventSource.onopen = () => { setIsConnected(true); }; eventSource.onmessage = (event) => { try { const parsed = JSON.parse(event.data) as T; setData(parsed); onMessage?.(parsed); } catch (e) { console.error('SSE parse error:', e); } }; eventSource.onerror = (error) => { setIsConnected(false); onError?.(error); }; return () => { eventSource.close(); eventSourceRef.current = null; }; }, [url, enabled]); const close = useCallback(() => { eventSourceRef.current?.close(); setIsConnected(false); }, []); return { data, isConnected, close }; }
Pattern 2: WebSocket Hook with Reconnection
interface UseWebSocketOptions { url: string; onMessage?: (data: unknown) => void; reconnect?: boolean; maxRetries?: number; } export function useWebSocket({ url, onMessage, reconnect = true, maxRetries = 5, }: UseWebSocketOptions) { const [isConnected, setIsConnected] = useState(false); const wsRef = useRef<WebSocket | null>(null); const retriesRef = useRef(0); const connect = useCallback(() => { const ws = new WebSocket(url); wsRef.current = ws; ws.onopen = () => { setIsConnected(true); retriesRef.current = 0; }; ws.onmessage = (event) => { try { const data = JSON.parse(event.data); onMessage?.(data); } catch { onMessage?.(event.data); } }; ws.onclose = () => { setIsConnected(false); if (reconnect && retriesRef.current < maxRetries) { retriesRef.current++; const delay = Math.min(1000 * 2 ** retriesRef.current, 30000); setTimeout(connect, delay); } }; ws.onerror = () => { ws.close(); }; }, [url, onMessage, reconnect, maxRetries]); useEffect(() => { connect(); return () => wsRef.current?.close(); }, [connect]); const send = useCallback((data: unknown) => { if (wsRef.current?.readyState === WebSocket.OPEN) { wsRef.current.send(JSON.stringify(data)); } }, []); return { isConnected, send }; }
Pattern 3: SWR with Real-Time Updates
import useSWR from 'swr'; import { useEffect } from 'react'; export function useRealtimeData<T>( key: string, fetcher: () => Promise<T> ) { const { data, mutate, ...rest } = useSWR(key, fetcher); // Subscribe to real-time updates useEffect(() => { const eventSource = new EventSource(`/api/events/${key}`); eventSource.onmessage = (event) => { const update = JSON.parse(event.data); // Optimistically update cache mutate((current) => { if (!current) return update; return { ...current, ...update }; }, false); // false = don't revalidate }; return () => eventSource.close(); }, [key, mutate]); return { data, mutate, ...rest }; }
Pattern 4: Subscription Hook
interface UseSubscriptionOptions { channels: string[]; onEvent: (channel: string, data: unknown) => void; } export function useSubscription({ channels, onEvent }: UseSubscriptionOptions) { const { send, isConnected } = useWebSocket({ url: '/api/ws', onMessage: (msg: any) => { if (msg.type === 'event') { onEvent(msg.channel, msg.data); } }, }); useEffect(() => { if (!isConnected) return; // Subscribe to channels channels.forEach((channel) => { send({ type: 'subscribe', channel }); }); return () => { channels.forEach((channel) => { send({ type: 'unsubscribe', channel }); }); }; }, [channels, isConnected, send]); return { isConnected }; }
Pattern 5: Connection Status Indicator
export function ConnectionStatus({ isConnected }: { isConnected: boolean }) { return ( <div className="flex items-center gap-2"> <span className={cn( 'size-2 rounded-full', isConnected ? 'bg-success animate-pulse' : 'bg-destructive' )} /> <span className="text-xs text-muted-foreground"> {isConnected ? 'Live' : 'Disconnected'} </span> </div> ); }
Related Skills
Meta-skill: ai/skills/meta/realtime-dashboard/ โ Complete realtime dashboard guide resilient-connections โ Retry logic design-systems/animated-financial-display โ Number animations
NEVER Do
NEVER forget cleanup โ Always close connections on unmount NEVER reconnect infinitely โ Use max retries with exponential backoff NEVER parse without try/catch โ Server might send malformed data NEVER mutate and revalidate โ Use mutate(data, false) for optimistic updates NEVER ignore connection state โ Show users when they're disconnected
Quick Reference
// SSE const { data, isConnected } = useSSE({ url: '/api/events' }); // WebSocket const { isConnected, send } = useWebSocket({ url: 'wss://api.example.com/ws', onMessage: (data) => console.log(data), }); // SWR + Real-time const { data } = useRealtimeData('metrics', fetchMetrics); // Subscriptions useSubscription({ channels: ['user:123', 'global'], onEvent: (channel, data) => updateState(channel, data), });
Category context
Code helpers, APIs, CLIs, browser automation, testing, and developer operations.
Source: Tencent SkillHub
Largest current source with strong distribution and engagement signals.
Package contents
Included in package
2 Docs
- SKILL.md
- README.md