From 4845b96209834badced8e201e45a4c89acc12ca4 Mon Sep 17 00:00:00 2001
From: yeranyang <yeranyang@tencent.com>
Date: Tue, 28 Apr 2026 12:16:27 +0800
Subject: [PATCH] perf(blog): derive search results with useMemo instead of
 useState+useEffect

Fixes #1246

Replace the useState/useEffect pattern that synced fuzzy search results
into local state on every search or searcher change with a single useMemo
that derives results directly during render.

Before:
  const [results, setResults] = useState(allBlogs);
  useEffect(() => {
    setResults(searcher.search(search));
  }, [search, searcher]);

After:
  const gridItems = useMemo(() => {
    const results = search.trim() ? searcher.search(search) : allBlogs;
    ...
  }, [search, searcher, allBlogs, featuredSlug]);

This removes an extra re-render per keystroke and eliminates the stale
intermediate state that occurred between the search input change and the
effect firing.
---
 surfsense_web/app/(home)/blog/blog-magazine.tsx | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/surfsense_web/app/(home)/blog/blog-magazine.tsx b/surfsense_web/app/(home)/blog/blog-magazine.tsx
index 96c7f6789..02e5045a9 100644
--- a/surfsense_web/app/(home)/blog/blog-magazine.tsx
+++ b/surfsense_web/app/(home)/blog/blog-magazine.tsx
@@ -3,7 +3,7 @@
 import { format } from "date-fns";
 import FuzzySearch from "fuzzy-search";
 import Link from "next/link";
-import { useEffect, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import { Container } from "@/components/container";
 import type { BlogEntry } from "./page";
 
@@ -127,17 +127,13 @@ function MagazineSearchGrid({
 		[allBlogs]
 	);
 
-	const [results, setResults] = useState(allBlogs);
-	useEffect(() => {
-		setResults(searcher.search(search));
-	}, [search, searcher]);
-
 	const gridItems = useMemo(() => {
+		const results = search.trim() ? searcher.search(search) : allBlogs;
 		if (search.trim()) {
 			return results;
 		}
 		return results.filter((b) => b.slug !== featuredSlug);
-	}, [results, search, featuredSlug]);
+	}, [search, searcher, allBlogs, featuredSlug]);
 
 	return (
 		<section aria-labelledby="archive-heading">