Bu yazımda React’ın anlaması güç kısımlarından, parçalarından bazı kısımları sizlere anlatacağım. Konularımız:

• useCallback
• useMemo
• useRef
• useLayoutEffect
• React.memo

useCallback

React öğrenirken öğrenmesi en zor hookslardan birisi useCallback idi. Ne yapacağını umarım size düzgünce anlatabilirim.

useCallback ne yapardan önce size aşağıda size basit bir App.js göstermek istiyorum.

Yukarıda ki componentda handleClick’e her tıklandığın da age artar ve props olarak verildiği componentında “Today I am xx Years of Age” metni güncellenir. Ve age her değiştiğinde , ve componentı yenilenir. componentını React.memo ile kullandığımız halde age her güncellendiğinde props’u memo tarafından memorize edilmiş olmasına rağmen tekrar render edilir.

Peki niye?

Javascriptte her obje bellekte bir referans değerine sahiptir. Örnek veriyorum biz bir Obje veya Array veya bir fonksiyon oluşturduğumuzda bunların hepsi bellekte bir referans değerleri ile tutuluyorlar.

Yukarıda ki age statesi ile hiçbir allakası olmayan React.memo ile memorize edilmiş componentinin render edilme sebebi de, yukarıda bahsettiğim referans değeri her renderda değişen doSomething fonksiyonudur. age statesi her arttığında yeniden render edilir ve doSomething yeni bir referans koduna sahip bir fonksiyon olarak yeniden oluşur. Ve yeni referans koduna sahip bu props componentına atandığında React.memo yeni bir props atandığını düşünerek tekrar componentinin yeniden render edilmesini sağlar.

Peki useCallback ne yapar?

• useCallaback 2 argument alır. Birincisi memorize edeceği fonksiyon, ikincisi hangi değerler değiştiğinde bu fonksiyonun yeniden oluşturulacağını belirten bir array. Bu array içinde, hangi değerler olarak bahsettiğim değerleri arrayin bir elemanı olarak vereceksiniz.

• Örnek olarak aşağıda yukarıda ki örnekten giderek doSomething fonksiyonunu useCallback ile memorize ediyoruz. 2. argument olarakda someValue’yu veriyoruz. Buradaki someValue state’de olan bir değer olabilirdi veya bu componente pushlanmış bir propsda olabilirdi. Ve ne zaman bu someValue değişirse useCallback, memoryde yeni bir referans koduna sahip doSomething fonksiyonu oluşturur. Ve componenti o zaman yeniden render edilir. Eğer someValue değişmez ise age statesinin değişip ’i rerender etmesi hiçbir zaman useCallback içinde ki doSomething fonksiyonunu yeniden yeniden oluşturtamaz. Ve doSomethıng her seferınde yeniden oluşmadığı için componenti tekrar tekrar render edilmez. İşte useCallback bize bu avantajı sağlar.

• Yukarıda ki örneği birde aşağıda ki kaynaktan incelemenizi tavsiye ederim.

useMemo

• Bir fonksiyondan dönen objectleri memorize eder. useCallback memorize edilmiş fonksiyon return ederken useMemo memorize edilmiş object return döner bize.
• Kullanım şekli: const memoizedValue = useMemo(functionThatReturnsValue, arrayDepencies)
• Documentation

Aşağıda useMemo kullanmadığımız basit bir yapımız var. Bir inputumuz var ve inputa birşeyler yazdığımızda text statesi değişecek ve App komple render edilecektir. Ve App her render edildiğinde List ve içindeki ListItem componentleride rerender yani yeniden render edilecektir.

Peki useMemo ne yapar?

• useMemo işte burada inputa birşey yazdığımız da App rerender oluyor ama List ve ListItem hiçbir şey değişmemesine rağmen niye yeniden rerender ediliyor, onun çözümünü bize sağlıyor.
• useMemo içine 2 argument alır. Birincisi bir object veya array return eden bir fonksiyon, ikincisi hangi değerler değiştiğinde bu return edilecek objectin yeniden hesaplanıp ve oluşturulacağını belirten bir array.

• Aslında yukarıda ki örneğe eklememiz gereken tek şey aşağıda ki gibi useMemo ile filteredUser değişkenimizdeki değeri useMemo ile sarmaktır. Dependencies olarakda search veriyoruz çünkü inputa değerler girildikten sonra butona tıklanıp ne zaman aranmak istenirse o zaman, filteredUsers’ın tekrar hesaplanıp oluşturulmasını ve List ve ListItem’ın o tekrar yeniden hesaplanma sonrası oluşturulmasını istiyoruz.

• Aşağıda ise useMemo örneği için tüm kod örneğini bırakıyorum.

useRef

• state ile en büyük farklarından birisi state değiştiğin de sayfa rerender edilir fakat useRef de bu olmaz.
• useRef içine argument olarak initial bir value tanımlarız ve bu initial value’yi .current ile yakalarız.

Burada butona tıkladığımızda inputa focus olduğumuz bir örnek görüyoruz.

• Aşağıda bir mesaj penceresinde durmandan gelen mesajların penceresinin useRef ile kontrol edilerek, pencerenin yeni mesajlar geldikçe sürekli aşağı otomatikmen scroll olmasını sağladığımız bir yapı kuruyoruz.
• Aşağıda mesajların olduğu dive ref vererek divi seçiyoruz bir nevi. Daha sonra bu ref’in current yani şimdiki scrollTop değerini alıyoruz ve şimdi ki scrollHeight değerine eşitliyoruz. Böylece her yeni mesajda scrollumuz otomatikmen aşağıya kayacaktır.

useLayoutEffect

• useEffect ile kullanımı aynıdır.
• Örnek kullanımı: useLayoutEffect(effectFunction, arrayDependencies)
• Documentation

useEffect vs useLayoutEffect

• Aralarında ki en büyük fark useEffect render bittikten sonra çalışırken, useLayouteffect render bitmeden çalışır. Tabi çoğu durumda renderdan sonra işlerin yapılmasını istediğimiz için genellikle useEffect kullanımı yeterli olur.
• Ama bazı durumlarda useeffectle yaptığımız bazı çalışmalar bize side effektler doğurur. Bu side effektleri kullanıcının görmemesi için useLayoutEffect ile render işleminden önce useLayoutEffect ile çalıştırır ve kullanabiliriz.

React.memo()

• Bir componenti wrap eden yani saran HOC(Higher Order Component)’dır.

• Görevi componentda olan propsları memorize eder ve bu componentdeki propslar değişmediği sürece, wrap ettiği componentin rerender edilmemesini sağlar.

• Yukarıda ki componentda one ve two propsu değişmediği sürece Counts componenti asla rerender olmayacaktır. one ve two propslarını number dönen bir props olarak düşünebilirsiniz.

Yardımcı Kaynaklar

[React Hooks Cheatsheets
A cheatsheet with live editable examples 💪react-hooks-cheatsheet.com](https://react-hooks-cheatsheet.com/ "react-hooks-cheatsheet.com")

[Hook'ların API Kaynağı - React
Hook'lar React 16.8'deki yeni bir eklentidir. Bir sınıf yazmadan state ve diğer React özelliklerini kullanmanıza olanak…tr.reactjs.org](https://tr.reactjs.org/docs/hooks-reference.html "tr.reactjs.org/docs/hooks-reference.html")

[React — Memoization Nedir ? React’ta Nasıl Kullanılır ?
Merhaba arkadaşlar bugün sizlere React’ta optimizasyonu arttırmak için kullanılan React.memo, useMemo ve useCallback…tsafaelmali.medium.com](https://tsafaelmali.medium.com/react-memoization-nedir-reactta-nas%C4%B1l-kullan%C4%B1l%C4%B1r-453035a3630f "tsafaelmali.medium.com/react-memoization-ne..")

[React.memo, useMemo ve useCallback Nedir?
Bu özellikleri açıklamaya başlamadan önce Memoization ne olduğundan bahsetmekte yarar var.aykutkardas.medium.com](https://aykutkardas.medium.com/react-memo-usememo-ve-usecallback-nedir-31ccbdcb76c6 "aykutkardas.medium.com/react-memo-usememo-v..")

[React Hooks: useCallback and useMemo
In this blog post, I will introduce the React Hooks ‘useCallback’ and ‘useMemo’. These Hooks prevent unnecessary…blog.hackages.io](https://blog.hackages.io/react-hooks-usecallback-and-usememo-8d5bb2b67231 "blog.hackages.io/react-hooks-usecallback-an..")

[How to useMemo in React - RWieruch
React's useMemo Hook can be used to optimize the computation costs of your React function components. We will go…robinwieruch.de](https://www.robinwieruch.de/react-usememo-hook "robinwieruch.de/react-usememo-hook")

[useEffect vs. useLayoutEffect in plain, approachable language - LogRocket Blog
Before you dismiss this as another "basic" React article, I suggest you slow down for a bit. Assuming you really…blog.logrocket.com](https://blog.logrocket.com/useeffect-vs-uselayouteffect/ "blog.logrocket.com/useeffect-vs-uselayoutef..")