App SDK

React Hooks

Meet some of the most important hooks from the React SDK package.

The Sanity App SDK comes with a range of hooks available for interacting with your content. A full reference is available for your perusal here:

While visiting every hook, type and component is beyond the scope of this article, a few of the most important hooks are briefly introduced below to give you a sense of how you'll be interacting with your Sanity content using the App SDK.

For the sake of legibility, assume that each example is invoked with a proper DocumentHandle, which is a valid combination of a document ID and document type, and an optional project ID and dataset name indicating the source of the document.

Data Retrieval Hooks

useDocuments - Getting collections of documents

The useDocuments hook is your primary tool for retrieving collections of documents from your Sanity dataset. It returns Document Handles for documents matching your specified document type (and optional filters and parameters), making it ideal for building document lists and overviews.

usePaginatedDocuments - Paginated document lists

The usePaginatedDocuments hook provides a more traditional pagination interface compared to the infinite scroll pattern of useDocuments. This makes it ideal for building interfaces with discrete pages of content and explicit navigation controls:

useDocument - Reading individual documents

The useDocument hook provides real-time access to individual document content. It's designed for reading and subscribing to a document's state, incorporating both local and remote changes:

The hook automatically handles displaying local-first, optimistic updates made via the useEditDocument hook, making it ideal for building collaborative editing interfaces that need to stay synchronized with remote changes. However, for static displays where local-first, optimistic updates aren't needed, consider using useDocumentProjection (which still return content that's live by default).

useDocumentProjection - Accessing specific document fields

The useDocumentProjection hook allows you to efficiently retrieve specific fields from a document using GROQ projections:

Document Manipulation Hooks

useEditDocument - Modifying documents

This hook is particularly useful for building forms and collaborative editing interfaces. It provides a simple way to update document fields in real-time:

useApplyDocumentActions - Document operations

The useApplyDocumentActions hook provides a way to perform document operations like publishing, unpublishing, creating, and deleting documents:

useDocumentEvent - Handling document events

The useDocumentEvent hook allows you to subscribe to document events like creation, deletion, and updates. This is useful for building features that need to react to changes in your content:

This hook is particularly valuable when building interfaces that need to maintain consistency with document state changes, such as notification systems or live collaboration features.

Here's an example of using useDocumentEvent to build a simple notification system that alerts users when documents are modified:

Was this page helpful?