feat: improve perfs with use-context-selector

Author: julienc91

frontend/components/game/article.tsx

@@ -5,6 +5,7 @@ import {
   parse,
 } from "node-html-parser";
 import React, { Key, ReactNode, useContext, useEffect, useMemo } from "react";
+import { useContextSelector } from "use-context-selector";
 
 import CustomGameBanner from "@caviardeul/components/game/customGameBanner";
 import { GameContext } from "@caviardeul/components/game/gameManager";
@@ -18,7 +19,10 @@ import {
 } from "@caviardeul/utils/caviarding";
 
 const WordContainer_: React.FC<{ word: string }> = ({ word }) => {
-  const { revealedWords, isOver, selection } = useContext(GameContext);
+  const [isOver, revealedWords, selection] = useContextSelector(
+    GameContext,
+    (context) => [context.isOver, context.revealedWords, context.selection],
+  );
   if (word === undefined) {
     return null;
   }
@@ -118,7 +122,10 @@ const parseText = (text: string): ReactNode => {
 };
 
 const ArticleContainer = () => {
-  const { article, selection } = useContext(GameContext);
+  const [article, selection] = useContextSelector(GameContext, (context) => [
+    context.article,
+    context.selection,
+  ]);
   const { settings } = useContext(SettingsContext);
   const { autoScroll } = settings;
 

frontend/components/game/attemptHistory.tsx

@@ -1,10 +1,18 @@
-import React, { useContext, useEffect, useRef } from "react";
+import React, { useEffect, useRef } from "react";
+import { useContextSelector } from "use-context-selector";
 
 import { GameContext } from "@caviardeul/components/game/gameManager";
 
 const AttemptHistory = () => {
-  const { isOver, history, selection, updateSelection } =
-    useContext(GameContext);
+  const [isOver, history, selection, updateSelection] = useContextSelector(
+    GameContext,
+    (context) => [
+      context.isOver,
+      context.history,
+      context.selection,
+      context.updateSelection,
+    ],
+  );
   const selectedRow = useRef<HTMLTableRowElement>(null);
   const selectedWord = selection ? selection[0] : null;
 

frontend/components/game/gameInformation.tsx

@@ -1,12 +1,21 @@
 import Link from "next/link";
-import React, { useContext } from "react";
+import React from "react";
+import { useContextSelector } from "use-context-selector";
 
 import { GameContext } from "@caviardeul/components/game/gameManager";
 import ExternalLink from "@caviardeul/components/utils/externalLink";
 import ShareAction from "@caviardeul/components/utils/shareAction";
 
 const GameInformation = () => {
-  const { article, userScore, isOver, history } = useContext(GameContext);
+  const [article, userScore, isOver, history] = useContextSelector(
+    GameContext,
+    (context) => [
+      context.article,
+      context.userScore,
+      context.isOver,
+      context.history,
+    ],
+  );
   if (!isOver || !article) {
     return null;
   }

frontend/components/game/gameManager.tsx

@@ -1,10 +1,5 @@
-import React, {
-  createContext,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { createContext } from "use-context-selector";
 
 import { saveGameScore } from "@caviardeul/lib/queries";
 import { Article, GameHistory } from "@caviardeul/types";

frontend/components/game/input.tsx

@@ -1,11 +1,15 @@
-import React, { ChangeEvent, useCallback, useContext, useState } from "react";
+import React, { ChangeEvent, useCallback, useState } from "react";
 import { FaArrowUp } from "react-icons/fa";
+import { useContextSelector } from "use-context-selector";
 
 import { GameContext } from "@caviardeul/components/game/gameManager";
 import { isWord, splitWords } from "@caviardeul/utils/caviarding";
 
 const Input = () => {
-  const { canPlay, makeAttempt } = useContext(GameContext);
+  const [canPlay, makeAttempt] = useContextSelector(GameContext, (context) => [
+    context.canPlay,
+    context.makeAttempt,
+  ]);
   const [value, setValue] = useState<string>("");
   const [lastValue, setLastValue] = useState<string>("");
 

frontend/package.json

@@ -20,7 +20,8 @@
     "react": "19.0.0-rc.1",
     "react-dom": "19.0.0-rc.1",
     "react-icons": "^5.0.1",
-    "swr": "^2.2.4"
+    "swr": "^2.2.4",
+    "use-context-selector": "^2.0.0"
   },
   "devDependencies": {
     "@eslint/compat": "^1.2.3",

frontend/yarn.lock

@@ -2804,6 +2804,11 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/urlsafe-base64/-/urlsafe-base64-1.0.0.tgz#23f89069a6c62f46cf3a1d3b00169cefb90be0c6"
   integrity sha512-RtuPeMy7c1UrHwproMZN9gN6kiZ0SvJwRaEzwZY0j9MypEkFqyBaKv176jvlPtg58Zh36bOkS0NFABXMHvvGCA==
 
+use-context-selector@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/use-context-selector/-/use-context-selector-2.0.0.tgz#3b5dafec7aa947c152d4f0aa7f250e99a205df3d"
+  integrity sha512-owfuSmUNd3eNp3J9CdDl0kMgfidV+MkDvHPpvthN5ThqM+ibMccNE0k+Iq7TWC6JPFvGZqanqiGCuQx6DyV24g==
+
 use-sync-external-store@^1.2.0:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz#c3b6390f3a30eba13200d2302dcdf1e7b57b2ef9"