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={{
+              options={options}
-                truncate: true,
-              }}
               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",

packages/system/package.json

@@ -25,6 +25,7 @@
     "@types/node": "^20.5.9",
     "@types/uuid": "^9.0.2",
     "@types/ws": "^8.5.5",
+    "@welldone-software/why-did-you-render": "^8.0.1",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "ts-jest": "^29.1.0",

yarn.lock

@@ -3080,6 +3080,7 @@ __metadata:
     "@types/node": ^20.5.9
     "@types/uuid": ^9.0.2
     "@types/ws": ^8.5.5
+    "@welldone-software/why-did-you-render": ^8.0.1
     debug: ^4.3.4
     eventemitter3: ^5.0.1
     isomorphic-ws: ^5.0.0
@@ -4071,6 +4072,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@welldone-software/why-did-you-render@npm:^8.0.1":
+  version: 8.0.1
+  resolution: "@welldone-software/why-did-you-render@npm:8.0.1"
+  dependencies:
+    lodash: ^4
+  peerDependencies:
+    react: ^18
+  checksum: cabb08e49a241b44208fc2acc60c34af2885b98feaa3e80c21b34d45c77cac72c83fc914645cc1cfa253b4a6272ac6d21327ec76d4c54b5b9387d8be576240c9
+  languageName: node
+  linkType: hard
+
 "abab@npm:^2.0.6":
   version: 2.0.6
   resolution: "abab@npm:2.0.6"
@@ -8172,7 +8184,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash@npm:^4.17.19, lodash@npm:^4.17.20, lodash@npm:^4.17.21":
+"lodash@npm:^4, lodash@npm:^4.17.19, lodash@npm:^4.17.20, lodash@npm:^4.17.21":
   version: 4.17.21
   resolution: "lodash@npm:4.17.21"
   checksum: eb835a2e51d381e561e508ce932ea50a8e5a68f4ebdd771ea240d3048244a8d13658acbd502cd4829768c56f2e16bdd4340b9ea141297d472517b83868e677f7