rivetkit-client-react

The rivetkit-client-react skill provides standardized guidance and patterns for integrating Rivet Actors into React applications. It is designed for frontend developers building collaborative environments, realtime dashboards, or multiplayer game interfaces that require persistent, stateful actor communication. By utilizing the @rivetkit/react package, developers can maintain realtime synchronization between their UI state and server-side actor state with minimal boilerplate.

• Streamlines React integration using the createRivetKit factory to initialize client instances and provide context to child components.

• Simplifies actor lifecycle management and connection status tracking through the useActor hook, which handles automatic WebSocket connection and event subscription.

• Supports compound actor keys and hierarchical addressing, ensuring robust routing for complex multi-tenant applications.

• Enables reactive event handling, allowing UI components to subscribe to specific actor broadcasts and triggers efficiently.

• Provides built-in support for connection parameters, authentication tokens, and lifecycle state monitoring for robust error handling and connectivity UI.

• Offers seamless interoperability between React hooks for stateful interactions and the underlying JavaScript client for one-off HTTP/WebSocket requests.

• Use createRivetKit at the top level of your component tree to inject the configuration once, avoiding repeated initialization.

• Prefer the useActor hook for persistent connections; for one-off SSR requests or utility functions, use the standard createClient from rivetkit/client.

• Implement fail-fast error handling by checking the connStatus and error properties returned by hooks rather than wrapping logic in complex try/catch blocks.

• Use arrays for actor keys to prevent key injection attacks, especially when keys are derived from user-provided data.

• Integrate environment variables like RIVET_ENDPOINT and RIVET_NAMESPACE to manage configurations across development, staging, and production environments.

• Ensure appropriate access control is configured on the backend, as this skill focuses on the React frontend implementation of authorized actor access.