{"id":2852,"date":"2024-11-03T19:45:13","date_gmt":"2024-11-03T16:45:13","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/reactte-usememo-ve-usecallback-performans-optimizasyonu-icin-iki-guclu-arac\/"},"modified":"2024-11-03T19:45:13","modified_gmt":"2024-11-03T16:45:13","slug":"reactte-usememo-ve-usecallback-performans-optimizasyonu-icin-iki-guclu-arac","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/reactte-usememo-ve-usecallback-performans-optimizasyonu-icin-iki-guclu-arac\/","title":{"rendered":"React’te useMemo ve useCallback: Performans Optimizasyonu i\u00e7in \u0130ki G\u00fc\u00e7l\u00fc Ara\u00e7"},"content":{"rendered":"

React’te useMemo ve useCallback: Performans Optimizasyonu i\u00e7in \u0130ki G\u00fc\u00e7l\u00fc Ara\u00e7<\/p>\n

React uygulamalar\u0131nda performans \u00f6nemli bir husustur. \u00d6zellikle karma\u015f\u0131k bile\u015fenler ve s\u0131k g\u00fcncellemelerle performans sorunlar\u0131 ya\u015fanabilir. React, bu sorunlar\u0131 ele almak i\u00e7in **useMemo** ve **useCallback** gibi performans optimizasyon ara\u00e7lar\u0131 sunmaktad\u0131r. Bu makalede, **useMemo** ve **useCallback**’in ne oldu\u011funu, ne zaman kullan\u0131laca\u011f\u0131n\u0131 ve nas\u0131l kullan\u0131laca\u011f\u0131n\u0131 detayl\u0131 olarak inceleyece\u011fiz.<\/p>\n

## useMemo: Yinelenen Hesaplamalar\u0131 \u00d6nlemek<\/p>\n

**useMemo**, bir fonksiyonun sonucunu bellek i\u00e7erisinde saklar ve ayn\u0131 girdilerle tekrar \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda hesaplama yapmaktan ka\u00e7\u0131narak performans\u0131 art\u0131r\u0131r. Bu, \u00f6zellikle karma\u015f\u0131k hesaplamalar\u0131n oldu\u011fu durumlarda faydal\u0131d\u0131r. **useMemo**’nun kullan\u0131m senaryolar\u0131 \u015funlard\u0131r:<\/p>\n

* **Karma\u015f\u0131k Hesaplamalar:** E\u011fer bir bile\u015fende karma\u015f\u0131k bir hesaplama yap\u0131l\u0131yorsa ve bu hesaplama sonucu s\u0131k s\u0131k kullan\u0131l\u0131yorsa, **useMemo**’yu kullanarak hesaplama sonucunu belle\u011fe kaydedebilir ve tekrarlanmas\u0131n\u0131 engelleyebilirsiniz.
\n* **S\u0131k G\u00fcncellenen Veriler:** Bir bile\u015fen i\u00e7erisinde s\u0131k g\u00fcncellenen verilerin oldu\u011fu durumlarda, **useMemo** kullanarak bu verileri bellek i\u00e7erisinde saklayabilir ve tekrar hesaplanmas\u0131n\u0131 engelleyebilirsiniz.<\/p>\n

**useMemo** kullan\u0131m\u0131:<\/p>\n

“`javascript
\nconst MyComponent = () => {
\n const expensiveCalculation = useMemo(() => {
\n \/\/ Karma\u015f\u0131k hesaplama burada yap\u0131l\u0131r.
\n return calculateSomethingComplex();
\n }, [dependency1, dependency2]);<\/p>\n

return (<\/p>\n

\n {\/* Hesaplama sonucu burada kullan\u0131l\u0131r. *\/}<\/p>\n

{expensiveCalculation}<\/p>\n<\/p><\/div>\n

);
\n};
\n“`<\/p>\n

**dependency1** ve **dependency2** ba\u011f\u0131ml\u0131l\u0131klar\u0131d\u0131r. Bu ba\u011f\u0131ml\u0131l\u0131klardan biri de\u011fi\u015fti\u011finde **useMemo** yeni bir hesaplama yapar.<\/p>\n

## useCallback: Fonksiyon Belle\u011fi ve Yeniden Olu\u015fturma \u00d6nleme<\/p>\n

**useCallback**, bir fonksiyonu bellek i\u00e7erisinde saklar ve ayn\u0131 ba\u011f\u0131ml\u0131l\u0131klarla tekrar \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda yeniden olu\u015fturulmas\u0131n\u0131 engeller. Bu, \u00f6zellikle bir fonksiyonun bir alt bile\u015fene bir prop olarak ge\u00e7irilip, alt bile\u015fenin bu prop’u s\u0131k s\u0131k kulland\u0131\u011f\u0131 durumlarda faydal\u0131d\u0131r. **useCallback**’\u0131n kullan\u0131m senaryolar\u0131 \u015funlard\u0131r:<\/p>\n

* **Alt Bile\u015fenlere Prop Olarak Fonksiyon Ge\u00e7irme:** Bir fonksiyonu alt bile\u015fenlere prop olarak ge\u00e7iriyorsan\u0131z ve bu fonksiyon s\u0131k s\u0131k tekrar render edilmesini tetikliyorsa, **useCallback**’\u0131 kullanarak bu fonksiyonu bellek i\u00e7erisinde saklayabilir ve yeniden olu\u015fturulmas\u0131n\u0131 engelleyebilirsiniz.
\n* **Fonksiyonlar\u0131 Olay Dinleyicilerine Ba\u011flama:** Bir fonksiyonu bir olay dinleyicisine ba\u011flad\u0131\u011f\u0131n\u0131zda, **useCallback**’\u0131 kullanarak fonksiyonun bellek i\u00e7erisinde saklanmas\u0131n\u0131 ve yeniden olu\u015fturulmas\u0131n\u0131 engelleyebilirsiniz.<\/p>\n

**useCallback** kullan\u0131m\u0131:<\/p>\n

“`javascript
\nconst MyComponent = () => {
\n const handleButtonClick = useCallback(() => {
\n \/\/ Fonksiyon burada tan\u0131mlan\u0131r.
\n console.log(“Button clicked!”);
\n }, []);<\/p>\n

return (<\/p>\n

\n