feat: frontend perf improvement

Author: julienc91

frontend/components/game/article.tsx

@@ -9,42 +9,9 @@ import { useContextSelector } from "use-context-selector";
 
 import CustomGameBanner from "@caviardeul/components/game/customGameBanner";
 import { GameContext } from "@caviardeul/components/game/gameManager";
+import WordContainer from "@caviardeul/components/game/word";
 import { SettingsContext } from "@caviardeul/components/settings/manager";
-import {
-  isCommonWord,
-  isSelected,
-  isWord,
-  splitWords,
-  standardizeText,
-} from "@caviardeul/utils/caviarding";
-
-const WordContainer_: React.FC<{ word: string }> = ({ word }) => {
-  const [isOver, revealedWords, selection] = useContextSelector(
-    GameContext,
-    (context) => [context.isOver, context.revealedWords, context.selection],
-  );
-  if (word === undefined) {
-    return null;
-  }
-
-  const standardizedWord = standardizeText(word);
-  const revealed = isOver || revealedWords.has(standardizedWord);
-  const selected = selection && isSelected(standardizedWord, selection[0]);
-
-  if (revealed) {
-    return (
-      <span className={`word` + (selected ? " selected" : "")}>{word}</span>
-    );
-  } else {
-    return (
-      <span className="word caviarded" data-word-length={word.length}>
-        {"█".repeat(word.length)}
-      </span>
-    );
-  }
-};
-
-const WordContainer = React.memo(WordContainer_);
+import { isCommonWord, isWord, splitWords } from "@caviardeul/utils/caviarding";
 
 const parseHTML = (content: string): ReactNode => {
   const doc = parse(content);
@@ -121,17 +88,12 @@ const parseText = (text: string): ReactNode => {
   });
 };
 
-const ArticleContainer = () => {
-  const [article, selection] = useContextSelector(GameContext, (context) => [
-    context.article,
-    context.selection,
-  ]);
+const AutoScrollerManager = () => {
   const { settings } = useContext(SettingsContext);
   const { autoScroll } = settings;
-
-  const inner = useMemo(
-    () => (article ? parseHTML(article.content) : null),
-    [article],
+  const selection = useContextSelector(
+    GameContext,
+    (context) => context.selection,
   );
 
   // Scroll to selection
@@ -141,7 +103,7 @@ const ArticleContainer = () => {
       const articleContainer =
         document.querySelector<HTMLElement>(".article-container");
       const elements =
-        articleContainer?.querySelectorAll<HTMLElement>(".word.selected");
+        articleContainer?.querySelectorAll<HTMLElement>(".word .selected");
       if (elements?.length) {
         const element = elements[index % elements.length];
         const y = element.offsetTop;
@@ -153,6 +115,16 @@ const ArticleContainer = () => {
     }
   }, [selection, autoScroll]);
 
+  return null;
+};
+
+const ArticleContainer = () => {
+  const article = useContextSelector(GameContext, (context) => context.article);
+  const inner = useMemo(
+    () => (article ? parseHTML(article.content) : null),
+    [article],
+  );
+
   if (!article) {
     return null;
   }
@@ -162,6 +134,7 @@ const ArticleContainer = () => {
   return (
     <div className="article-container">
       {custom && <CustomGameBanner safetyLevel={safety} />}
+      <AutoScrollerManager />
       {inner}
     </div>
   );

frontend/components/game/word.tsx

@@ -0,0 +1,74 @@
+import React, { useMemo } from "react";
+import { useContextSelector } from "use-context-selector";
+
+import { GameContext } from "@caviardeul/components/game/gameManager";
+import { isSelected, standardizeText } from "@caviardeul/utils/caviarding";
+
+const useStandardizedWord = (word: string) => {
+  return useMemo(() => standardizeText(word), [word]);
+};
+
+const useIsSelected = (word: string) => {
+  const standardizedWord = useStandardizedWord(word);
+  const selection = useContextSelector(
+    GameContext,
+    (context) => context.selection?.[0],
+  );
+  return !!(selection && isSelected(standardizedWord, selection));
+};
+
+const useIsRevealed = (word: string) => {
+  const standardizedWord = useStandardizedWord(word);
+  return useContextSelector(GameContext, (context) =>
+    context.revealedWords.has(standardizedWord),
+  );
+};
+
+const SelectedWrapper: React.FC<{
+  word: string;
+  children: React.ReactNode;
+}> = React.memo(({ word, children }) => {
+  const selected = useIsSelected(word);
+  if (!selected) {
+    return children;
+  }
+  return <span className="selected">{children}</span>;
+});
+
+const RevealedWord = React.memo<{ word: string }>(({ word }) => {
+  return (
+    <span className="word">
+      <SelectedWrapper word={word}>{word}</SelectedWrapper>
+    </span>
+  );
+});
+
+const CaviardedWord = React.memo<{ word: string }>(({ word }) => {
+  return (
+    <span className="word caviarded" data-word-length={word.length}>
+      {"█".repeat(word.length)}
+    </span>
+  );
+});
+
+const MaybeRevealedWord = React.memo<{ word: string }>(({ word }) => {
+  const revealed = useIsRevealed(word);
+  if (revealed) {
+    return <RevealedWord word={word} />;
+  }
+  return <CaviardedWord word={word} />;
+});
+
+const WordContainer = React.memo<{ word: string }>(({ word }) => {
+  const isOver = useContextSelector(GameContext, (context) => context.isOver);
+  if (word === undefined) {
+    return null;
+  }
+
+  if (isOver) {
+    return <RevealedWord word={word} />;
+  }
+  return <MaybeRevealedWord word={word} />;
+});
+
+export default WordContainer;

frontend/eslint.config.mjs

@@ -34,6 +34,8 @@ const config = [
 
     rules: {
       "prettier/prettier": "error",
+      "react/display-name": "off",
+      "react/prop-types": "off",
       "no-unused-vars": [
         "error",
         {

frontend/styles/style.scss

@@ -465,7 +465,7 @@ main {
       border: 1px solid transparent;
       white-space: nowrap;
 
-      &.selected {
+      .selected {
         color: $lightBlue;
       }
     }

frontend/utils/caviarding.ts

@@ -127,6 +127,9 @@ export const buildAlternatives = (standardizedWord: string): string[] =>
  * @param selection
  */
 export const isSelected = (word: string, selection: string): boolean => {
+  if (!word.startsWith(selection)) {
+    return false;
+  }
   if (word === selection) {
     return true;
   } else {