add managing lists recipe

docs/recipes/CodeSandbox.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+export default function CodeSandbox({ id }: { id: string }) {
+  return (
+    <iframe
+      src={`https://codesandbox.io/embed/${id}?fontsize=14&hidenavigation=1&theme=dark`}
+      style={{
+        width: '100%',
+        height: '80vh',
+        border: '0',
+        borderRadius: 4,
+        overflow: 'hidden',
+      }}
+      title="managing-lists-simple"
+      allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+      sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+    ></iframe>
+  )
+}

docs/recipes/managing-lists.md

@@ -0,0 +1,31 @@
+---
+title: Managing lists
+---
+
+import CodeSandbox from "./CodeSandbox"
+
+These recipes cover a good way of optimally rendering lists by using React-RxJS. Only the instances that have updated will rerender.
+
+These recipes mainly show an example of how to use [partitionByKey](api/utils/partitionByKey.md) together with [combineKeys](api/utils/combineKeys.md)
+
+## Simple
+
+We'll start by getting a list of stocks with the latest price from each one of them, and rendering them as they update.
+
+<CodeSandbox id="managing-lists-simple-cvwyu" />
+
+## Medium
+
+Now let's imagine we need to calculate an aggregate value from all instances. In this case, we want to calculate a market index based on the price and the volume for each stock.
+
+To do that, we don't need to change much: We can calculate the contribution for the index from each stock in `partitionByKey`, and we can use `combineKeys` to sum all of them up.
+
+<CodeSandbox id="managing-lists-vwz8l" />
+
+## Advanced
+
+Let's consider instead that we want the user to subscribe or unsubscribe from stocks, so that we can add a bit of interactivity.
+
+`partitionByKey` keeps each instance alive until the inner observable completes. This example shows how to use it so we can remove stocks when the user presses on the button.
+
+<CodeSandbox id="managing-lists-advanced-vf8y8" />

sidebars.js

@@ -1,7 +1,7 @@
 module.exports = {
   someSidebar: {
     Introduction: ["motivation", "quick-start", "features"],
-    Recipes: ["recipes/invalidate-query"],
+    Recipes: ["recipes/managing-lists", "recipes/invalidate-query"],
     "API Reference": [
       {
         type: "category",