diff --git a/apps/storybook/stories/Review5555.stories.tsx b/apps/storybook/stories/Review5555.stories.tsx
new file mode 100644
index 00000000000..14521261931
--- /dev/null
+++ b/apps/storybook/stories/Review5555.stories.tsx
@@ -0,0 +1,312 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {Profiler, useMemo, useState} from 'react';
+import type {Meta, StoryObj} from '@storybook/react';
+import {
+  BaseTypeahead,
+  Typeahead,
+  type SearchableItem,
+  type SearchSource,
+} from '@astryxdesign/core/Typeahead';
+import {Tokenizer} from '@astryxdesign/core/Tokenizer';
+
+interface ReviewHarness {
+  calls: Record<string, number>;
+  commits: Record<string, number>;
+  pending: Record<string, () => void>;
+  tokenRenders: number;
+  resetCommits: () => void;
+  resetTokenRenders: () => void;
+  settleAll: () => void;
+}
+
+declare global {
+  interface Window {
+    __review5555?: ReviewHarness;
+  }
+}
+
+const items: SearchableItem[] = [
+  {id: 'apple', label: 'Apple'},
+  {id: 'banana', label: 'Banana'},
+  {id: 'alice', label: 'Alice Johnson'},
+  {id: 'bob', label: 'Bob Smith'},
+];
+
+function harness(): ReviewHarness {
+  if (window.__review5555 == null) {
+    const state: ReviewHarness = {
+      calls: {},
+      commits: {},
+      pending: {},
+      tokenRenders: 0,
+      resetCommits() {
+        state.commits = {};
+      },
+      resetTokenRenders() {
+        state.tokenRenders = 0;
+      },
+      settleAll() {
+        const pending = Object.values(state.pending);
+        state.pending = {};
+        pending.forEach(resolve => resolve());
+      },
+    };
+    window.__review5555 = state;
+  }
+  return window.__review5555;
+}
+
+function deferredSource(key: string): SearchSource {
+  return {
+    search: query => {
+      const state = harness();
+      state.calls[key] = (state.calls[key] ?? 0) + 1;
+      return new Promise(resolve => {
+        state.pending[key] = () =>
+          resolve(
+            items.filter(item =>
+              item.label.toLowerCase().includes(query.toLowerCase()),
+            ),
+          );
+      });
+    },
+    bootstrap: () => Promise.resolve(items),
+  };
+}
+
+function countCommit(id: string): void {
+  const state = harness();
+  state.commits[id] = (state.commits[id] ?? 0) + 1;
+}
+
+function RenderScaleCase({count}: {count: number}) {
+  const source = useMemo(() => deferredSource(`scale-${count}`), [count]);
+  const [value, setValue] = useState<SearchableItem[]>(
+    Array.from({length: count}, (_, index) => ({
+      id: `selected-${index}`,
+      label: `Selected ${index + 1}`,
+    })),
+  );
+  return (
+    <main
+      data-review-root={`render-scale-${count}`}
+      style={{
+        background: 'var(--color-background-surface)',
+        color: 'var(--color-text-primary)',
+        padding: 12,
+        width: 560,
+      }}>
+      <Tokenizer
+        label={`${count} selected people`}
+        searchSource={source}
+        value={value}
+        onChange={setValue}
+        renderToken={item => {
+          harness().tokenRenders += 1;
+          return <span>{item.label}</span>;
+        }}
+        debounceMs={0}
+      />
+    </main>
+  );
+}
+
+const meta: Meta = {
+  title: 'Review/PR5555',
+  parameters: {layout: 'padded'},
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const BusyPair: Story = {
+  render: () => {
+    const typeaheadSource = useMemo(
+      () => deferredSource('typeahead'),
+      [],
+    );
+    const tokenizerSource = useMemo(
+      () => deferredSource('tokenizer'),
+      [],
+    );
+    const baseSource = useMemo(() => deferredSource('base'), []);
+    const [typeaheadValue, setTypeaheadValue] =
+      useState<SearchableItem | null>(items[0]);
+    const [tokenizerValue, setTokenizerValue] = useState<SearchableItem[]>([
+      items[2],
+    ]);
+
+    return (
+      <main
+        data-review-root="busy-pair"
+        style={{
+          background: 'var(--color-background-surface)',
+          color: 'var(--color-text-primary)',
+          display: 'grid',
+          gap: 16,
+          padding: 12,
+          width: 280,
+        }}>
+        <section data-review-field="typeahead">
+          <Profiler id="typeahead" onRender={() => countCommit('typeahead')}>
+            <Typeahead
+              data-testid="review-typeahead"
+              label="Fruit"
+              searchSource={typeaheadSource}
+              value={typeaheadValue}
+              onChange={setTypeaheadValue}
+              hasClear
+              debounceMs={0}
+            />
+          </Profiler>
+        </section>
+
+        <section data-review-field="tokenizer">
+          <Profiler id="tokenizer" onRender={() => countCommit('tokenizer')}>
+            <Tokenizer
+              data-testid="review-tokenizer"
+              label="Team members"
+              searchSource={tokenizerSource}
+              value={tokenizerValue}
+              onChange={setTokenizerValue}
+              hasClear
+              endContent={<span data-testid="selected-count">1 selected</span>}
+              debounceMs={0}
+            />
+          </Profiler>
+        </section>
+
+        <section
+          data-review-field="base"
+          style={{border: '1px solid var(--color-border)', padding: 8}}>
+          <span id="review-base-label">Direct BaseTypeahead consumer</span>
+          <Profiler id="base" onRender={() => countCommit('base')}>
+            <BaseTypeahead
+              searchSource={baseSource}
+              value={null}
+              onChange={() => {}}
+              ariaLabelledBy="review-base-label"
+              debounceMs={0}
+            />
+          </Profiler>
+        </section>
+      </main>
+    );
+  },
+};
+
+export const RenderCounts: Story = {
+  render: () => {
+    const typeaheadSource = useMemo(
+      () => deferredSource('count-typeahead'),
+      [],
+    );
+    const tokenizerSource = useMemo(
+      () => deferredSource('count-tokenizer'),
+      [],
+    );
+    const [typeaheadValue, setTypeaheadValue] =
+      useState<SearchableItem | null>(null);
+    const [tokenizerValue, setTokenizerValue] = useState<SearchableItem[]>([]);
+
+    return (
+      <main
+        data-review-root="render-counts"
+        style={{
+          background: 'var(--color-background-surface)',
+          color: 'var(--color-text-primary)',
+          display: 'grid',
+          gap: 16,
+          padding: 12,
+          width: 280,
+        }}>
+        <section data-review-field="count-typeahead">
+          <Profiler id="typeahead" onRender={() => countCommit('typeahead')}>
+            <Typeahead
+              label="Counted fruit"
+              searchSource={typeaheadSource}
+              value={typeaheadValue}
+              onChange={setTypeaheadValue}
+              debounceMs={0}
+            />
+          </Profiler>
+        </section>
+        <section data-review-field="count-tokenizer">
+          <Profiler id="tokenizer" onRender={() => countCommit('tokenizer')}>
+            <Tokenizer
+              label="Counted people"
+              searchSource={tokenizerSource}
+              value={tokenizerValue}
+              onChange={setTokenizerValue}
+              debounceMs={0}
+            />
+          </Profiler>
+        </section>
+      </main>
+    );
+  },
+};
+
+export const RenderScale1: Story = {
+  render: () => <RenderScaleCase count={1} />,
+};
+
+export const RenderScale6: Story = {
+  render: () => <RenderScaleCase count={6} />,
+};
+
+export const RenderScale20: Story = {
+  render: () => <RenderScaleCase count={20} />,
+};
+
+export const ThresholdCreate: Story = {
+  render: () => {
+    const typeaheadSource = useMemo(
+      () => deferredSource('threshold-typeahead'),
+      [],
+    );
+    const tokenizerSource = useMemo(
+      () => deferredSource('threshold-tokenizer'),
+      [],
+    );
+    const [typeaheadValue, setTypeaheadValue] =
+      useState<SearchableItem | null>(null);
+    const [tokens, setTokens] = useState<SearchableItem[]>([]);
+
+    return (
+      <main
+        data-review-root="threshold-create"
+        style={{
+          background: 'var(--color-background-surface)',
+          color: 'var(--color-text-primary)',
+          display: 'grid',
+          gap: 16,
+          padding: 12,
+          width: 280,
+        }}>
+        <section data-review-field="threshold-typeahead">
+          <Typeahead
+            label="Fruit threshold"
+            searchSource={typeaheadSource}
+            value={typeaheadValue}
+            onChange={setTypeaheadValue}
+            minQueryLength={3}
+            debounceMs={0}
+          />
+        </section>
+        <section data-review-field="threshold-tokenizer">
+          <Tokenizer
+            label="Create tags"
+            searchSource={tokenizerSource}
+            value={tokens}
+            onChange={setTokens}
+            hasCreate
+            minQueryLength={3}
+            debounceMs={0}
+          />
+        </section>
+      </main>
+    );
+  },
+};