Browse Source

feat(stories): add story for `usePrevious` (#78042)

turns out we can stack `usePrevious` to get even older states.

added a story for `usePrevious` to demonstrate this behavior:


https://github.com/user-attachments/assets/5992e309-e0e5-4622-8be9-f70ba767c01f
Michelle Zhang 5 months ago
parent
commit
2749d1b118
1 changed files with 39 additions and 0 deletions
  1. 39 0
      static/app/utils/usePrevious.stories.tsx

+ 39 - 0
static/app/utils/usePrevious.stories.tsx

@@ -0,0 +1,39 @@
+import {Fragment, useState} from 'react';
+
+import StructuredEventData from 'sentry/components/structuredEventData';
+import storyBook from 'sentry/stories/storyBook';
+import usePrevious from 'sentry/utils/usePrevious';
+
+export default storyBook('usePrevious', story => {
+  story('Default', () => {
+    const [count, setCount] = useState(0);
+    const prevCount = usePrevious(count);
+
+    return (
+      <Fragment>
+        <p>
+          Use <code>usePrevious</code> to keep track of the previous state.
+        </p>
+        <button onClick={() => setCount(prev => prev + 1)}>Add 1</button>
+        <StructuredEventData data={{count, prevCount}} />;
+      </Fragment>
+    );
+  });
+
+  story('Stacked', () => {
+    const [count, setCount] = useState(0);
+    const prevCount = usePrevious(count);
+    const penultimateCount = usePrevious(prevCount);
+
+    return (
+      <Fragment>
+        <p>
+          You can even stack <code>usePrevious</code> to keep track of the penultimate
+          states.
+        </p>
+        <button onClick={() => setCount(prev => prev + 1)}>Add 1</button>
+        <StructuredEventData data={{count, prevCount, penultimateCount}} />;
+      </Fragment>
+    );
+  });
+});