refactor: use memoization and native NextJS router queries to reduce re-renders (#85)

Co-authored-by: Eric Fennis <eric.fennis@gmail.com>

packages/site/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["next/babel"]
+}

packages/site/jest.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  testPathIgnorePatterns: ['<rootDir>/.next/', '<rootDir>/node_modules/'],
+  setupFilesAfterEnv: ['<rootDir>/setupTests.js'],
+  transform: {
+    '^.+\\.(js|jsx|ts|tsx)$': '<rootDir>/../../node_modules/babel-jest',
+  },
+};

packages/site/package.json

@@ -7,7 +7,8 @@
     "dev": "next dev",
     "build": "next build",
     "export": "next export -o build",
-    "deploy": "yarn build && yarn export"
+    "deploy": "yarn build && yarn export",
+    "test": "jest"
   },
   "dependencies": {
     "@chakra-ui/core": "^0.8.0",
@@ -18,15 +19,20 @@
     "fuse.js": "^6.0.4",
     "jszip": "^3.4.0",
     "next": "^9.4.4",
-    "query-string": "^6.13.0",
     "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "react-dom": "^16.13.1"
-    "use-query-params": "^1.1.3"
   },
   "devDependencies": {
+    "@testing-library/dom": "^7.24.4",
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.0.4",
+    "@testing-library/react-hooks": "^3.4.2",
     "@types/node": "^14.0.11",
     "@types/react": "^16.9.35",
     "@types/react-dom": "^16.9.8",
+    "babel-jest": "^26.5.2",
+    "jest": "^26.5.2",
+    "react-test-renderer": "^16.13.1",
     "typescript": "^3.9.5"
   }
 }

packages/site/setupTests.js

@@ -0,0 +1 @@
+import "@testing-library/jest-dom/extend-expect";

packages/site/src/components/Layout.tsx

@@ -1,11 +1,17 @@
 import { Box, Divider, Flex, Text, Link, Icon, useColorMode } from "@chakra-ui/core";
-import { StringParam, useQueryParam } from "use-query-params";
 import { useKeyBindings } from "../lib/key";
+import {useRouter} from "next/router";
 
 const Layout = ({ children }) => {
-  const [, setQuery] = useQueryParam("query", StringParam);
+  const router = useRouter();
   const { colorMode, toggleColorMode } = useColorMode();
 
+  function setQuery(query){
+    router.push({
+      pathname: '/',
+      query: { query: query }
+    }).then();
+  }
   useKeyBindings({
     Escape: {
       fn: () => setQuery(""),

packages/site/src/lib/search.tsx

@@ -1,21 +1,31 @@
-import Fuse from "fuse.js";
+import { useEffect, useMemo, useState } from 'react';
-import { useEffect, useState } from "react";
+import { useDebounce } from './useDebounce';
 
-function useSearch(icons, query) {
+function useSearch(icons: Object, query: string | string[]) {
-  const fuse = new Fuse(Object.values(icons), {
+  let iconList = useMemo(() => Object.values(icons), [icons]);
-    threshold: 0.2,
+  const [results, setResults] = useState(iconList);
-    keys: ["name", "tags"],
+  // query can be an array because this is a valid query string ?query=xyz&query=abc
-  });
+  const debouncedQuery = useDebounce(
+    typeof query === 'string' ? query.trim() : typeof query === 'undefined' ? '' : query[0].trim(),
+    300
+  );
 
-  const [results, setResults] = useState(Object.values(icons));
+  async function doSearch() {
+    if (debouncedQuery) {
+      const Fuse = (await import('fuse.js')).default;
+      const fuse = new Fuse(iconList, {
+        threshold: 0.2,
+        keys: ['name', 'tags'],
+      });
+      return fuse.search(debouncedQuery);
+    } else {
+      return iconList;
+    }
+  }
 
   useEffect(() => {
-    if (query.trim()) {
+    doSearch().then(setResults);
-      setResults(fuse.search(query.trim()));
+  }, [debouncedQuery]);
-    } else {
-      setResults(Object.values(icons));
-    }
-  }, [query]);
 
   return results;
 }

packages/site/src/lib/useDebounce.tsx

@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react';
+
+export function useDebounce<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value]);
+
+  return debouncedValue;
+}

packages/site/src/pages/_app.tsx

@@ -1,30 +1,6 @@
-import { CSSReset, ThemeProvider, ColorModeProvider } from "@chakra-ui/core";
+import { CSSReset, ThemeProvider, ColorModeProvider } from '@chakra-ui/core';
-import { useRouter } from "next/router";
+import customTheme from '../lib/theme';
-import { QueryParamProvider } from "use-query-params";
+import Head from 'next/head';
-import customTheme from "../lib/theme";
-import Head from "next/head";
-
-const QueryProvider = ({ children }) => {
-  const router = useRouter();
-
-  const history = {
-    push: ({ search }: Location) =>
-      router.push({ search, pathname: router.pathname }),
-
-    replace: ({ search }: Location) =>
-      router.replace({ search, pathname: router.pathname }),
-  };
-
-  const location = {
-    search: router.asPath.replace(/[^?]+/u, ""),
-  } as Location;
-
-  return (
-    <QueryParamProvider history={history} location={location}>
-      {children}
-    </QueryParamProvider>
-  );
-};
 
 const App = ({ Component, pageProps }) => {
   return (
@@ -32,14 +8,12 @@ const App = ({ Component, pageProps }) => {
       <Head>
         <title>Featherity</title>
       </Head>
-      <QueryProvider>
+      <ThemeProvider theme={customTheme}>
-        <ThemeProvider theme={customTheme}>
+        <ColorModeProvider>
-          <ColorModeProvider>
+          <CSSReset />
-            <CSSReset />
+          <Component {...pageProps} />
-            <Component {...pageProps} />
+        </ColorModeProvider>
-          </ColorModeProvider>
+      </ThemeProvider>
-        </ThemeProvider>
-      </QueryProvider>
     </>
   );
 };

packages/site/src/pages/index.tsx

@@ -9,15 +9,16 @@ import {
   Stack,
   Text,
   useToast,
-} from "@chakra-ui/core";
+} from '@chakra-ui/core';
-import copy from "copy-to-clipboard";
+import copy from 'copy-to-clipboard';
-import download from "downloadjs";
+import download from 'downloadjs';
-import JSZip from "jszip";
+import JSZip from 'jszip';
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from 'react';
-import { StringParam, useQueryParam } from "use-query-params";
+import Layout from '../components/Layout';
-import Layout from "../components/Layout";
+import { getAllData } from '../lib/icons';
-import { getAllData } from "../lib/icons";
+import useSearch from '../lib/search';
-import useSearch from "../lib/search";
+import { useRouter } from 'next/router';
+import { useDebounce } from '../lib/useDebounce';
 
 function generateZip(icons) {
   const zip = new JSZip();
@@ -25,25 +26,39 @@ function generateZip(icons) {
     // @ts-ignore
     zip.file(`${icon.name}.svg`, icon.src)
   );
-  return zip.generateAsync({ type: "blob" });
+  return zip.generateAsync({ type: 'blob' });
 }
 
 const IndexPage = ({ data }) => {
-  const [query, setQuery] = useQueryParam("query", StringParam);
+  const router = useRouter();
-  const results = useSearch(data, query || "");
+  const { query } = router.query;
+  const [queryText, setQueryText] = useState(query || '');
   const toast = useToast();
+  const debouncedQuery = useDebounce(queryText, 1000);
+  const results = useSearch(data, queryText);
+
+  useEffect(() => {
+    setQueryText(query);
+  }, [query]);
+
+  useEffect(() => {
+    router.push({
+      pathname: '/',
+      query: { query: debouncedQuery },
+    });
+  }, [debouncedQuery]);
 
   const inputElement = useRef(null);
   function handleKeyDown(event) {
-    if (event.key === "/" && inputElement.current !== document.activeElement) {
+    if (event.key === '/' && inputElement.current !== document.activeElement) {
       event.preventDefault();
       inputElement.current.focus();
     }
   }
 
   useEffect(() => {
-    window.addEventListener("keydown", handleKeyDown);
+    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
   }, []);
 
   return (
@@ -56,7 +71,7 @@ const IndexPage = ({ data }) => {
           <Button
             onClick={async () => {
               const zip = await generateZip(data);
-              download(zip, "feather.zip");
+              download(zip, 'feather.zip');
             }}
           >
             Download all
@@ -67,19 +82,14 @@ const IndexPage = ({ data }) => {
         <InputLeftElement children={<Icon name="search" />} />
         <Input
           ref={inputElement}
-          placeholder={`Search ${
+          placeholder={`Search ${Object.keys(data).length} icons (Press "/" to focus)`}
-            Object.keys(data).length
+          value={queryText}
-          } icons (Press "/" to focus)`}
+          onChange={(event) => setQueryText(event.target.value)}
-          value={query}
-          onChange={(event) => setQuery(event.target.value)}
           marginBottom={5}
         />
       </InputGroup>
       {results.length > 0 ? (
-        <Grid
+        <Grid templateColumns={`repeat(auto-fill, minmax(160px, 1fr))`} gap={5}>
-          templateColumns={`repeat(auto-fill, minmax(160px, 1fr))`}
-          gap={5}
-        >
           {results.map((icon) => {
             // @ts-ignore
             const actualIcon = icon.item ? icon.item : icon;
@@ -93,17 +103,13 @@ const IndexPage = ({ data }) => {
                   if (event.shiftKey) {
                     copy(actualIcon.src);
                     toast({
-                      title: "Copied!",
+                      title: 'Copied!',
                       description: `Icon "${actualIcon.name}" copied to clipboard.`,
-                      status: "success",
+                      status: 'success',
                       duration: 1500,
                     });
                   } else {
-                    download(
+                    download(actualIcon.src, `${actualIcon.name}.svg`, 'image/svg+xml');
-                      actualIcon.src,
-                      `${actualIcon.name}.svg`,
-                      "image/svg+xml"
-                    );
                   }
                 }}
                 key={actualIcon.name}
@@ -122,7 +128,7 @@ const IndexPage = ({ data }) => {
           fontSize="2xl"
           fontWeight="bold"
           textAlign="center"
-          style={{ wordBreak: "break-word" }}
+          style={{ wordBreak: 'break-word' }}
         >
           No results found for "{query}"
         </Text>

packages/site/src/tests/index.test.tsx

@@ -0,0 +1,30 @@
+import { act, fireEvent, screen } from '@testing-library/react';
+import Index from '../pages/index';
+import React from 'react';
+import { render } from './test-utils';
+import { getAllData } from '../lib/icons';
+import App from '../pages/_app';
+import { renderHook } from '@testing-library/react-hooks';
+import useSearch from '../lib/search';
+
+describe('App', () => {
+  it('renders without crashing', () => {
+    let allData = getAllData();
+    render(<App Component={Index} pageProps={{ data: allData }} />);
+    expect(
+      screen.getByText('Simply beautiful open source icons, community-sourced')
+    ).toBeInTheDocument();
+  });
+  it('can search filter icons', async () => {
+    let allData = getAllData();
+
+    const { result: result1, waitForNextUpdate: wait1 } = renderHook(() => useSearch(allData, ''));
+    expect(result1.current).toHaveLength(allData.length);
+
+    const { result: result2, waitForNextUpdate: wait2 } = renderHook(() =>
+      useSearch(allData, 'airplay')
+    );
+    await wait2();
+    expect(result2.current).toHaveLength(2);
+  });
+});

packages/site/src/tests/test-utils.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { render as defaultRender } from '@testing-library/react';
+import { RouterContext } from 'next/dist/next-server/lib/router-context';
+import { NextRouter } from 'next/router';
+
+export * from '@testing-library/react';
+
+// --------------------------------------------------
+// Override the default test render with our own
+//
+// You can override the router mock like this:
+//
+// const { baseElement } = render(<MyComponent />, {
+//   router: { pathname: '/my-custom-pathname' },
+// });
+// --------------------------------------------------
+type DefaultParams = Parameters<typeof defaultRender>;
+type RenderUI = DefaultParams[0];
+type RenderOptions = DefaultParams[1] & { router?: Partial<NextRouter> };
+
+export function render(ui: RenderUI, { wrapper, router, ...options }: RenderOptions = {}) {
+  if (!wrapper) {
+    wrapper = ({ children }) => (
+      <RouterContext.Provider value={{ ...mockRouter, ...router }}>
+        {children}
+      </RouterContext.Provider>
+    );
+  }
+
+  return defaultRender(ui, { wrapper, ...options });
+}
+
+const mockRouter: NextRouter = {
+  basePath: '',
+  pathname: '/',
+  route: '/',
+  asPath: '/',
+  query: {},
+  push: jest.fn(),
+  replace: jest.fn(),
+  reload: jest.fn(),
+  back: jest.fn(),
+  prefetch: jest.fn(),
+  beforePopState: jest.fn(),
+  events: {
+    on: jest.fn(),
+    off: jest.fn(),
+    emit: jest.fn(),
+  },
+  isFallback: false,
+};