{"id":18697,"date":"2025-04-20T14:45:16","date_gmt":"2025-04-20T11:45:16","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/reactte-usetransition-ile-yuksek-performansli-arama-50-000-kayit-ornegi\/"},"modified":"2025-04-20T14:45:16","modified_gmt":"2025-04-20T11:45:16","slug":"reactte-usetransition-ile-yuksek-performansli-arama-50-000-kayit-ornegi","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/reactte-usetransition-ile-yuksek-performansli-arama-50-000-kayit-ornegi\/","title":{"rendered":"React’te useTransition ile Y\u00fcksek Performansl\u0131 Arama: 50.000 Kay\u0131t \u00d6rne\u011fi"},"content":{"rendered":"

<\/p>\n

React’te useTransition ile Y\u00fcksek Performansl\u0131 Arama: 50.000 Kay\u0131t \u00d6rne\u011fi<\/p>\n

Merhaba! Ben Fatih Soysal ve bug\u00fcn React’te performans optimizasyonu i\u00e7in olduk\u00e7a g\u00fc\u00e7l\u00fc bir ara\u00e7 olan useTransition<\/code> hook’unu ele alaca\u011f\u0131z. \u00d6zellikle b\u00fcy\u00fck veri k\u00fcmeleriyle \u00e7al\u0131\u015f\u0131rken, arama i\u015flemlerinin performans\u0131 kritik \u00f6nem ta\u015f\u0131maktad\u0131r. Bu makalede, yakla\u015f\u0131k 50.000 kay\u0131t i\u00e7eren bir veri setinde y\u00fcksek performansl\u0131 bir arama olu\u015fturmak i\u00e7in useTransition<\/code>‘\u0131 nas\u0131l kullanabilece\u011fimizi detayl\u0131 bir \u015fekilde inceleyece\u011fiz. Bu sayede kullan\u0131c\u0131lar, arama sonu\u00e7lar\u0131n\u0131 beklemek zorunda kalmadan h\u0131zl\u0131 ve ak\u0131c\u0131 bir deneyim ya\u015fayacaklar. Web sitemi<\/a> \u00fczerinden di\u011fer makalelerime de g\u00f6z atabilirsiniz.<\/p>\n

Sorun: B\u00fcy\u00fck Veri K\u00fcmeleri ve Performans<\/h2>\n

B\u00fcy\u00fck veri k\u00fcmelerinde arama yapmak, performans sorunlar\u0131na yol a\u00e7abilir. Kullan\u0131c\u0131 arama yapt\u0131\u011f\u0131nda, taray\u0131c\u0131 t\u00fcm verileri filtrelemek ve g\u00f6r\u00fcnt\u00fclemek i\u00e7in zaman harcar. Bu s\u00fcre\u00e7, \u00f6zellikle mobil cihazlarda veya daha az g\u00fc\u00e7l\u00fc makinelerde, \u00f6nemli \u00f6l\u00e7\u00fcde gecikmeye neden olabilir. Kullan\u0131c\u0131 deneyimini olumsuz etkileyen bu gecikmeleri \u00f6nlemek i\u00e7in \u00e7\u00f6z\u00fcmler \u00fcretmemiz \u015fartt\u0131r. Bu nedenle, useTransition<\/code> gibi performans optimizasyon tekniklerini kullanmak son derece \u00f6nemlidir.<\/p>\n

useTransition’\u0131n G\u00fcc\u00fc: Ak\u0131c\u0131 Aray\u00fcz<\/h2>\n

React’in useTransition<\/code> hook’u, arka planda uzun s\u00fcren i\u015flemler i\u00e7in m\u00fckemmel bir \u00e7\u00f6z\u00fcmd\u00fcr. Bu hook, arama i\u015flemini ba\u015flat\u0131rken aray\u00fcz\u00fcn donmas\u0131n\u0131 engeller. Arama sonucu haz\u0131r olana kadar, kullan\u0131c\u0131 aray\u00fcz\u00fcyle etkile\u015fimde kalabilir. useTransition<\/code>, i\u015flemi arka planda \u00e7al\u0131\u015ft\u0131r\u0131r ve sonu\u00e7lar haz\u0131r oldu\u011funda aray\u00fcz\u00fc g\u00fcnceller. Bu sayede, kullan\u0131c\u0131lar bekleme s\u00fcresini fark etmezler ve ak\u0131c\u0131 bir aray\u00fcz deneyimi ya\u015farlar. \u00d6rne\u011fin, 50.000 kay\u0131ttan olu\u015fan bir veride arama i\u015flemi, useTransition<\/code> olmadan aray\u00fcz\u00fcn donmas\u0131na neden olabilirdi. Ancak, useTransition<\/code> ile bu sorun ortadan kalkar.<\/p>\n

Uygulama: 50.000 Kay\u0131t \u0130\u00e7in Y\u00fcksek Performansl\u0131 Arama<\/h2>\n

\u0130\u015fte 50.000 kay\u0131tl\u0131 bir veri setinde useTransition<\/code> kullanarak y\u00fcksek performansl\u0131 arama olu\u015fturmak i\u00e7in \u00f6rnek bir React bile\u015feni:<\/p>\n

\nimport { useState, useTransition } from 'react';\n\nconst data = Array.from({ length: 50000 }, (_, i) => ({ id: i, name: \u00dcr\u00fcn ${i} })); \/\/ \u00d6rnek veri\n\nfunction Search() {\n  const [searchTerm, setSearchTerm] = useState('');\n  const [isPending, startTransition] = useTransition();\n  const [searchResults, setSearchResults] = useState([]);\n\n  const handleSearch = (e) => {\n    setSearchTerm(e.target.value);\n    startTransition(() => {\n      const results = data.filter(item => item.name.toLowerCase().includes(searchTerm.toLowerCase()));\n      setSearchResults(results);\n    });\n  };\n\n  return (\n    <div>\n      <input type=\"text\" value={searchTerm} onChange={handleSearch} \/>\n      {isPending ? <p>Ara\u015ft\u0131r\u0131l\u0131yor...<\/p> : null}\n      <ul>\n        {searchResults.map(item => (\n          <li key={item.id}>{item.name}<\/li>\n        ))}\n      <\/ul>\n    <\/div>\n  );\n}\n\nexport default Search;\n<\/code><\/pre>\n
Bu \u00f6rnekte,  useTransition<\/code>, arama i\u015flemini arka planda \u00e7al\u0131\u015ft\u0131r\u0131r ve aray\u00fcz\u00fcn g\u00fcncellenmesini beklemeden kullan\u0131c\u0131ya geri bildirim sa\u011flar.  isPending<\/code> de\u011fi\u015fkeni, arama i\u015fleminin devam edip etmedi\u011fini g\u00f6sterir.  Bu sayede, kullan\u0131c\u0131ya bir geri bildirim sa\u011flanm\u0131\u015f olur.  Arama sonu\u00e7lar\u0131 haz\u0131r oldu\u011funda, setSearchResults<\/code> fonksiyonu ile aray\u00fcz g\u00fcncellenir.<\/p>\n
Sonu\u00e7<\/h2>\n
React’in useTransition<\/code> hook’u, b\u00fcy\u00fck veri k\u00fcmeleriyle \u00e7al\u0131\u015f\u0131rken aray\u00fcz performans\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r.  Bu makalede, 50.000 kay\u0131tl\u0131 bir veri setinde y\u00fcksek performansl\u0131 arama olu\u015fturmak i\u00e7in useTransition<\/code>‘\u0131 nas\u0131l kullanabilece\u011finizi g\u00f6sterdik.  Bu teknik, kullan\u0131c\u0131 deneyimini iyile\u015ftirmek ve uygulaman\u0131z\u0131n genel performans\u0131n\u0131 art\u0131rmak i\u00e7in hayati \u00f6nem ta\u015f\u0131r.  Daha fazla React performans optimizasyonu ipucu i\u00e7in web sitemi<\/a>ni ziyaret edebilirsiniz.  Umar\u0131m bu makale, React uygulamalar\u0131n\u0131z\u0131n performans\u0131n\u0131 iyile\u015ftirmenize yard\u0131mc\u0131 olur. Ba\u015fka sorular\u0131n\u0131z varsa yorumlarda payla\u015fabilirsiniz.<\/p>\n
Faydal\u0131 bulabilece\u011finiz kaynaklar:<\/p>\n