perf: deterministik dekor memo'ları ve küçük render süpürmeleri (Faz 7)

- pixel-decor: PixelField/PixelDivider piksel üretimi useMemo([seed]) — 504 iterasyon + ~150 element çekmece reorder'ının her karesinde yeniden üretiliyordu - rapor-listesi: acikSira effect'i önceki-prop desenine döndü (çift render ve eslint-disable kalktı), Set lazy init, tekIl useMemo - program-tablosu: 3 dilimin spread'i useMemo - typing-animation: displayedText state yerine türetme; kaynak reset'i render sırasında — tick başına state yazımı ve effect bağımlılığı azaldı - site-top-banner: saniyelik geri sayım tiki startTransition'da - program-liste-verileri: sparkline 6 dizi geçişi tek döngüde - secimlerim-paneli: SecimSatiri profili prop'tan alır + memo (24 ayrı store aboneliği kalktı) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-08-08 14:29:14 +03:00
parent f3d8bf9b94
commit 78d7c51a7a
7 changed files with 129 additions and 86 deletions
--- a/src/components/pixel-decor.tsx
+++ b/src/components/pixel-decor.tsx
@@ -1,6 +1,6 @@
 "use client";

-import { useRef, type ReactNode } from "react";
+import { useMemo, useRef, type ReactNode } from "react";
 import { cn } from "@/lib/utils";
 import { usePixelHeat } from "@/components/use-pixel-heat";

@@ -88,35 +88,41 @@ export function PixelField({

  const COLS = 42;
  const ROWS = 12;
-  const cx = (COLS - 1) / 2;
-  const cy = (ROWS - 1) / 2;
-  const maxD = Math.sqrt(cx * cx + cy * cy);

-  const pixels: ReactNode[] = [];
-  let accentIdx = 0;
+  // Çıktı seed'e göre deterministik; 504 iterasyon + ~150 element üretimini
+  // her render'da (ör. çekmece reorder'ında) tekrarlama (rendering-hoist-jsx)
+  const pixels = useMemo(() => {
+    const cx = (COLS - 1) / 2;
+    const cy = (ROWS - 1) / 2;
+    const maxD = Math.sqrt(cx * cx + cy * cy);

-  // Hero serpintisiyle aynı kural: içeriğin oturduğu orta kolon
-  // (genişliğin %22–78 bandı) tüm yükseklik boyunca tamamen boş kalır
-  const BAND_MIN = COLS * 0.22;
-  const BAND_MAX = COLS * 0.78;
+    const sonuc: ReactNode[] = [];
+    let accentIdx = 0;

-  for (let y = 0; y < ROWS; y++) {
-    for (let x = 0; x < COLS; x++) {
-      if (x > BAND_MIN && x < BAND_MAX) continue;
-      // Kenarlara doğru artan doluluk
-      const d = Math.sqrt((x - cx) ** 2 + (y - cy) ** 2) / maxD;
-      const density = 0.1 + 0.42 * d * d;
-      if (hash(x, y, seed) > density) continue;
-      const accent = hash(x, y, seed + 99) > 0.96;
-      pixels.push(
-        pixelRect(x, y, {
-          key: `${x}-${y}`,
-          accent,
-          accentDelay: accent ? (accentIdx++ % 8) * 0.45 : 0,
-        }),
-      );
+    // Hero serpintisiyle aynı kural: içeriğin oturduğu orta kolon
+    // (genişliğin %22–78 bandı) tüm yükseklik boyunca tamamen boş kalır
+    const BAND_MIN = COLS * 0.22;
+    const BAND_MAX = COLS * 0.78;
+
+    for (let y = 0; y < ROWS; y++) {
+      for (let x = 0; x < COLS; x++) {
+        if (x > BAND_MIN && x < BAND_MAX) continue;
+        // Kenarlara doğru artan doluluk
+        const d = Math.sqrt((x - cx) ** 2 + (y - cy) ** 2) / maxD;
+        const density = 0.1 + 0.42 * d * d;
+        if (hash(x, y, seed) > density) continue;
+        const accent = hash(x, y, seed + 99) > 0.96;
+        sonuc.push(
+          pixelRect(x, y, {
+            key: `${x}-${y}`,
+            accent,
+            accentDelay: accent ? (accentIdx++ % 8) * 0.45 : 0,
+          }),
+        );
+      }
    }
-  }
+    return sonuc;
+  }, [seed]);

  return (
    <svg
@@ -149,28 +155,32 @@ export function PixelDivider({

  const COLS = 12;
  const ROWS = 2;
-  const cx = (COLS - 1) / 2;

-  const pixels: ReactNode[] = [];
-  let accentPlaced = false;
+  // Deterministik çıktı — render başına yeniden üretme (PixelField ile aynı)
+  const pixels = useMemo(() => {
+    const cx = (COLS - 1) / 2;
+    const sonuc: ReactNode[] = [];
+    let accentPlaced = false;

-  for (let y = 0; y < ROWS; y++) {
-    for (let x = 0; x < COLS; x++) {
-      // Az sayıda, iri piksel: ortada yoğun, kenara doğru seyrelen küçük küme
-      const dx = Math.abs(x - cx) / cx;
-      const rowFalloff = y === 0 ? 0.9 : 0.35;
-      const density = (1 - dx) ** 1.1 * rowFalloff;
-      if (hash(x, y, seed) > density) continue;
-      const accent = !accentPlaced && hash(x, y, seed + 99) > 0.8;
-      if (accent) accentPlaced = true;
-      pixels.push(
-        pixelRect(x, y, {
-          key: `${x}-${y}`,
-          accent,
-        }),
-      );
+    for (let y = 0; y < ROWS; y++) {
+      for (let x = 0; x < COLS; x++) {
+        // Az sayıda, iri piksel: ortada yoğun, kenara doğru seyrelen küçük küme
+        const dx = Math.abs(x - cx) / cx;
+        const rowFalloff = y === 0 ? 0.9 : 0.35;
+        const density = (1 - dx) ** 1.1 * rowFalloff;
+        if (hash(x, y, seed) > density) continue;
+        const accent = !accentPlaced && hash(x, y, seed + 99) > 0.8;
+        if (accent) accentPlaced = true;
+        sonuc.push(
+          pixelRect(x, y, {
+            key: `${x}-${y}`,
+            accent,
+          }),
+        );
+      }
    }
-  }
+    return sonuc;
+  }, [seed]);

  return (
    <svg
--- a/src/components/program-liste-verileri.tsx
+++ b/src/components/program-liste-verileri.tsx
@@ -26,22 +26,32 @@ export function programEtkinSira(program: SiraSerisi): number | null {

 /** 2021–2025 taban sıralamasını sonuç listesindeki kompakt çizgiyle gösterir. */
 export function ProgramSiraGecmisi({ program }: { program: SiraSerisi }) {
-  const yillar = [
+  // Satır başına render edilen bileşen: filter/map/min/max/map/map'in 6 ayrı
+  // geçişi tek döngüde toplanır (js-combine-iterations, js-min-max-loop)
+  const yillar: [number, number][] = [];
+  let min = Infinity;
+  let max = -Infinity;
+  const ozetParcalari: string[] = [];
+  for (const [yil, sira] of [
    [2021, program.sira2021],
    [2022, program.sira2022],
    [2023, program.sira2023],
    [2024, program.sira2024],
    [2025, program.sira2025],
-  ].filter((yil): yil is [number, number] => yil[1] != null);
+  ] as const) {
+    if (sira == null) continue;
+    yillar.push([yil, sira]);
+    if (sira < min) min = sira;
+    if (sira > max) max = sira;
+    ozetParcalari.push(`${yil}: ~${sira.toLocaleString("tr-TR")}.`);
+  }

  if (yillar.length < 2) return <span className="text-slate-400">—</span>;

-  const siralar = yillar.map(([, sira]) => sira);
-  const min = Math.min(...siralar);
-  const max = Math.max(...siralar);
  const genislik = 56;
  const yukseklik = 18;
  const bosluk = 2;
+  // min/max'a bağımlı olduğu için ikinci kısa döngü
  const noktalar = yillar.map(([yil, sira], index) => {
    const x =
      bosluk +
@@ -54,9 +64,7 @@ export function ProgramSiraGecmisi({ program }: { program: SiraSerisi }) {
    return { x, y, yil, sira };
  });
  const son = noktalar[noktalar.length - 1];
-  const ozet = yillar
-    .map(([yil, sira]) => `${yil}: ~${sira.toLocaleString("tr-TR")}.`)
-    .join("\n");
+  const ozet = ozetParcalari.join("\n");

  return (
    <svg
--- a/src/components/site-top-banner.tsx
+++ b/src/components/site-top-banner.tsx
@@ -1,6 +1,6 @@
 "use client";

-import { useEffect, useState } from "react";
+import { startTransition, useEffect, useState } from "react";
 import NumberFlow, { NumberFlowGroup } from "@number-flow/react";
 import { CalendarDays, Clock3 } from "lucide-react";

@@ -47,7 +47,9 @@ export function SiteTopBanner() {
  const [geriSayim, setGeriSayim] = useState<GeriSayim | null>(null);

  useEffect(() => {
-    const guncelle = () => setGeriSayim(geriSayimiHesapla(Date.now()));
+    // Saniyelik tik acil değil — layout'ta her sayfada monte; urgent şeritten çık
+    const guncelle = () =>
+      startTransition(() => setGeriSayim(geriSayimiHesapla(Date.now())));

    guncelle();
    const zamanlayici = window.setInterval(guncelle, 1_000);
--- a/src/components/ui/typing-animation.tsx
+++ b/src/components/ui/typing-animation.tsx
@@ -81,7 +81,6 @@ export function TypingAnimation({
    Component
  ] as TypingAnimationMotionComponent

-  const [displayedText, setDisplayedText] = useState<string>("")
  const [currentWordIndex, setCurrentWordIndex] = useState(0)
  const [currentCharIndex, setCurrentCharIndex] = useState(0)
  const [phase, setPhase] = useState<"typing" | "pause" | "deleting">("typing")
@@ -109,21 +108,32 @@ export function TypingAnimation({
    [words, children]
  )

-  // Kaynak metin değişince animasyon baştan başlar — bilinçli reset
-  useEffect(() => {
-    // eslint-disable-next-line react-hooks/set-state-in-effect
-    setDisplayedText("")
+  // Kaynak metin değişince animasyon baştan başlar — önceki-prop deseniyle
+  // render sırasında (effect'te setState çift render yaratıyordu)
+  const [oncekiKaynak, setOncekiKaynak] = useState(animationSourceKey)
+  if (animationSourceKey !== oncekiKaynak) {
+    setOncekiKaynak(animationSourceKey)
    setCurrentWordIndex(0)
    setCurrentCharIndex(0)
    setPhase("typing")
-  }, [animationSourceKey])
+  }
+
+  // Görünen metin state değil türetme: tick başına ekstra state yazımı ve
+  // grapheme dizisi allocation'ı kalkar (rerender-derived-state-no-effect)
+  const displayedText = useMemo(
+    () =>
+      Array.from(wordsToAnimate[currentWordIndex] || "")
+        .slice(0, currentCharIndex)
+        .join(""),
+    [wordsToAnimate, currentWordIndex, currentCharIndex]
+  )

  useEffect(() => {
    let timeout: ReturnType<typeof setTimeout> | null = null

    if (!azMotion && shouldStart && wordsToAnimate.length > 0) {
      const timeoutDelay =
-        delay > 0 && displayedText === ""
+        delay > 0 && currentCharIndex === 0
          ? delay
          : phase === "typing"
            ? typingSpeed
@@ -138,9 +148,6 @@ export function TypingAnimation({
        switch (phase) {
          case "typing":
            if (currentCharIndex < graphemes.length) {
-              setDisplayedText(
-                graphemes.slice(0, currentCharIndex + 1).join("")
-              )
              setCurrentCharIndex(currentCharIndex + 1)
            } else {
              if (hasMultipleWords || loop) {
@@ -159,9 +166,6 @@ export function TypingAnimation({

          case "deleting":
            if (currentCharIndex > 0) {
-              setDisplayedText(
-                graphemes.slice(0, currentCharIndex - 1).join("")
-              )
              setCurrentCharIndex(currentCharIndex - 1)
            } else {
              const nextIndex = (currentWordIndex + 1) % wordsToAnimate.length
@@ -184,7 +188,6 @@ export function TypingAnimation({
    phase,
    currentCharIndex,
    currentWordIndex,
-    displayedText,
    wordsToAnimate,
    hasMultipleWords,
    loop,