Add local DB recommendation for reactions and replies (#778)

* first pass

* inc edits from Naomi and Ry <3

docs/build/local-first.md

@@ -1,25 +1,36 @@
 ---
-sidebar_label: Local-first cache
+sidebar_label: Local-first architecture
 sidebar_position: 3
 description: "If you're building a production-grade app, be sure to use a local-first architecture to help you build a performant app."
 ---
 
 # Use local-first architecture
 
-If you're building a production-grade app, be sure to use a local-first architecture to help you build a performant app. Using this local-first architecture, the client prioritizes using the local cache on the device where it’s running.
+If you're building a production-grade app, be sure to use a local-first architecture to help you build a performant app. Using a local-first architecture means building your app so a client prioritizes using local storage on the device where it’s running.
 
-For example, use the XMTP SDK to initially retrieve existing message data from the XMTP network and place it in the local cache. Asynchronously load new and updated message data as needed. Build your app to get message data from the local cache.
+For example, use the XMTP SDK to initially retrieve existing message data from the XMTP network and place it in local storage. Then, asynchronously load new and updated message data as needed.
 
-**When building a web app with the [React SDK](https://github.com/xmtp/xmtp-web/tree/main/packages/react-sdk), the local-first architecture is automatically provided by the SDK.**
-
-Here’s an overview of how your app frontend, local cache, client SDK, and the XMTP network work together in this local-first approach:
+Here’s an overview of how your app frontend, local storage, client SDK, and the XMTP network work together in this local-first approach:
 
 import localfirst from '/docs/build/img/local-first-arch.jpeg';
 
 <img src={localfirst} style={{width:"450px"}}/>
 
-- When building a web app with the [xmtp-js SDK](https://github.com/xmtp/xmtp-js), you can use the browser `localStorage` as the local cache to store encrypted data, decrypting data each time before display. You might also consider [using Dexie to manage your web app's local data](#manage-local-data-with-dexie-in-a-web-app-built-with-xmtp-js).
+## Mobile apps
+
+When building a mobile app with the XMTP V3 [React Native](https://github.com/xmtp/xmtp-react-native), [Android](https://github.com/xmtp/xmtp-android), and [iOS](https://github.com/xmtp/xmtp-ios) SDKs, LibXMTP will [create and manage a local database](/docs/concepts/v3/group-chat#local-database-and-syncing) for you.
+
+However, you should create and manage an additional separate local database if your app:
+
+- Supports [reactions](./messages/reaction) and [replies](./messages/reply)
+- Supports 1:1 messaging backed by [XMTP V2 infrastructure](/docs/concepts/v2/architectural-overview.md)
 
-- When building native iOS and Android mobile apps, you can use the device's encrypted container as the local cache to store decrypted data.
+Use this separate local database to store reactions and replies content types, enabling your app to performantly display them with their referenced messages when rendering message lists.
+
+## Web apps
+
+- When building a web app with the [React SDK](https://github.com/xmtp/xmtp-web/tree/main/packages/react-sdk), the local-first architecture is automatically provided by the SDK.
+
+- When building a web app with the [xmtp-js SDK](https://github.com/xmtp/xmtp-js), you can use the browser `localStorage` as the local cache to store encrypted data, decrypting data each time before display. You might also consider [using Dexie to manage your web app's local data](#manage-local-data-with-dexie-in-a-web-app-built-with-xmtp-js).
 
 For more performance best practices, see [Optimize performance of your app](/docs/get-featured)

docs/build/messages/reaction.mdx

@@ -9,7 +9,7 @@ import TabItem from "@theme/TabItem";
 
 # Support reactions in your app built with XMTP
 
-![Status](https://img.shields.io/badge/Content_type_status-Standards--track-yellow) ![Status](https://img.shields.io/badge/Reference_implementation_status-Beta-yellow)
+![Status](https://img.shields.io/badge/Content_type_status-Standards--track-yellow) ![Status](https://img.shields.io/badge/Reference_implementation_status-Stable-31CA54)
 
 Use the reaction content type to support reactions in your app. A reaction is a quick and often emoji-based way to respond to a message. Reactions are usually limited to a predefined set of emojis or symbols provided by the messaging app.
 
@@ -19,6 +19,12 @@ You're welcome to provide feedback by commenting on the [Proposal for emoji reac
 
 :::
 
+## Use a local database for performance
+
+Use a local database to store reactions. This will enable your app to performantly display a reaction with its [referenced message](#send-a-reaction) when rendering message lists.
+
+To learn more about using a local database, see [Use local-first architecture](/docs/build/local-first).
+
 ## Configure the content type
 
 In some SDKs, the `ReactionCodec` is already included in the SDK. If not, you can install the package using the following command:

docs/build/messages/reply.mdx

@@ -9,7 +9,7 @@ import TabItem from "@theme/TabItem";
 
 # Support replies in your app built with XMTP
 
-![Status](https://img.shields.io/badge/Content_type_status-Standards--track-yellow) ![Status](https://img.shields.io/badge/Reference_implementation_status-Beta-yellow)
+![Status](https://img.shields.io/badge/Content_type_status-Standards--track-yellow) ![Status](https://img.shields.io/badge/Reference_implementation_status-Stable-31CA54)
 
 Use the reply content type to support quote replies in your app. A reply is a method to directly respond to a specific message in a conversation. Users can select and reply to a particular message instead of sending a new one.
 
@@ -19,6 +19,12 @@ You're welcome to provide feedback by commenting on the [Proposal for Reply cont
 
 :::
 
+## Use a local database for performance
+
+Use a local database to store replies. This will enable your app to performantly display a reply with its [referenced message](#send-a-reply) when rendering message lists.
+
+To learn more about using a local database, see [Use local-first architecture](/docs/build/local-first).
+
 ## Configure the content type
 
 In some SDKs, the `ReplyCodec` is already included in the SDK. If not, you can install the package using the following command:

docs/concepts/v3/group-chat.md

@@ -204,6 +204,10 @@ Calling the `sync()` method on the Conversations protocol checks for welcome mes
 
 In some cases, LibXMTP will perform a sync automatically. This currently includes calls to add/remove members to a group or using the stream functions. Outside of those methods, apps can call `sync()` when they choose to efficiently manage network traffic.
 
+:::info
+If your app supports [reactions](/docs/build/messages/reaction) or [replies](/docs/build/messages/reply), you should create and manage a separate [local database](/docs/build/local-first) to store these content types. For example, you can use the device's encrypted container as the local cache to store decrypted data. This local database is key to performantly displaying reactions and replies with their referenced messages when rendering message lists.
+:::
+
 ## Group protocol
 
 The Group protocol contains methods specific to individual groups, identified by their `group_id`. These methods allow a user to communicate with the group. Each SDK has its own version of this protocol, using the underlying implementation in [LibXMTP](https://github.com/xmtp/libxmtp).