mirror of
https://github.com/ChenQihan666/MyBlog-Next.git
synced 2026-08-14 11:29:33 +08:00
perf: memoize fuse search results with useMemo (#71)
Memoise the value of fuse based off of the search list to prevent reinstantiating it on search keypress.
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
import Fuse from "fuse.js";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useEffect, useRef, useState, useMemo } from "react";
|
||||
import Card from "@components/Card";
|
||||
import slugify from "@utils/slugify";
|
||||
import type { BlogFrontmatter } from "@content/_schemas";
|
||||
@@ -30,12 +30,16 @@ export default function SearchBar({ searchList }: Props) {
|
||||
setInputVal(e.currentTarget.value);
|
||||
};
|
||||
|
||||
const fuse = new Fuse(searchList, {
|
||||
const fuse = useMemo(
|
||||
() =>
|
||||
new Fuse(searchList, {
|
||||
keys: ["title", "description"],
|
||||
includeMatches: true,
|
||||
minMatchCharLength: 2,
|
||||
threshold: 0.5,
|
||||
});
|
||||
}),
|
||||
[searchList]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
// if URL has search query,
|
||||
|
||||
Reference in New Issue
Block a user