add why-did-you-render

packages/app/src/Components/Event/Note.tsx

@@ -1,7 +1,7 @@
 import "./Note.css";
 
 import { EventKind, NostrEvent, TaggedNostrEvent } from "@snort/system";
-import { ReactNode } from "react";
+import { memo, ReactNode } from "react";
 
 import PubkeyList from "@/Components/Embed/PubkeyList";
 import ZapstrEmbed from "@/Components/Embed/ZapstrEmbed";
@@ -47,7 +47,7 @@ export interface NoteProps {
   waitUntilInView?: boolean;
 }
 
-export default function Note(props: NoteProps) {
+export default memo(function Note(props: NoteProps) {
   const { data: ev, className } = props;
 
   let content;
@@ -90,4 +90,4 @@ export default function Note(props: NoteProps) {
   }
 
   return <ErrorBoundary>{content}</ErrorBoundary>;
-}
+});

packages/app/src/Components/Event/NoteInner.tsx

@@ -26,7 +26,7 @@ import { NoteContextMenu, NoteTranslation } from "./NoteContextMenu";
 import NoteFooter from "./NoteFooter";
 import NoteTime from "./NoteTime";
 import Poll from "./Poll";
-import Reactions from "./Reactions";
+import ReactionsModal from "./ReactionsModal";
 import Reveal from "./Reveal";
 
 const TEXT_TRUNCATE_LENGTH = 400;
@@ -388,7 +388,7 @@ export function NoteInner(props: NoteProps) {
             replies={props.threadChains?.get(chainKey(ev))?.length}
           />
         )}
-        <Reactions
+        <ReactionsModal
           show={showReactions}
           setShow={setShowReactions}
           positive={reactions.positive}

packages/app/src/Components/Feed/TimelineFragment.tsx

@@ -19,6 +19,10 @@ export interface TimelineFragProps {
   noteContext?: (ev: TaggedNostrEvent) => ReactNode;
 }
 
+const options = {
+  truncate: true,
+};
+
 export function TimelineFragment(props: TimelineFragProps) {
   const relatedFeed = useCallback(
     (id: string) => {
@@ -39,9 +43,7 @@ export function TimelineFragment(props: TimelineFragProps) {
               depth={0}
               onClick={props.noteOnClick}
               context={props.noteContext?.(e)}
-              options={{
-                truncate: true,
-              }}
+              options={options}
               waitUntilInView={props.index > 10}
             />
           ),

packages/app/src/index.tsx

@@ -1,6 +1,7 @@
 import "./index.css";
 import "@szhsin/react-menu/dist/index.css";
 import "@/assets/fonts/inter.css";
+import "./wdyr";
 
 import { encodeTLVEntries } from "@snort/system";
 import { SnortContext } from "@snort/system-react";

packages/app/src/lang.json

@@ -168,9 +168,6 @@
   "3gOsZq": {
     "defaultMessage": "Translators"
   },
-  "3natuV": {
-    "defaultMessage": "Cashu mint wallet"
-  },
   "3qnJlS": {
     "defaultMessage": "You are voting with {amount} sats"
   },

packages/app/src/translations/en.json

@@ -55,7 +55,6 @@
   "3QwfJR": "~{amount}",
   "3cc4Ct": "Light",
   "3gOsZq": "Translators",
-  "3natuV": "Cashu mint wallet",
   "3qnJlS": "You are voting with {amount} sats",
   "3t3kok": "{n,plural,=1{{n} new note} other{{n} new notes}}",
   "3tVy+Z": "{n} Followers",

packages/app/src/wdyr.ts

@@ -0,0 +1,8 @@
+import whyDidYouRender from "@welldone-software/why-did-you-render";
+import * as React from "react";
+
+if (import.meta.env.DEV) {
+  whyDidYouRender(React, {
+    trackAllPureComponents: true,
+  });
+}

packages/app/vite.config.ts

@@ -7,7 +7,9 @@ import { vitePluginVersionMark } from "vite-plugin-version-mark";
 
 export default defineConfig({
   plugins: [
-    react(),
+    react({
+      jsxImportSource: "@welldone-software/why-did-you-render",
+    }),
     VitePWA({
       strategies: "injectManifest",
       srcDir: "src",