React Memo: Küresel Uygulamalar için Optimizasyon Tekniklerine Derinlemesine Bakış

React, kullanıcı arayüzleri oluşturmak için güçlü bir JavaScript kütüphanesidir, ancak uygulamalar karmaşıklaştıkça performans optimizasyonu kritik hale gelir. React optimizasyon araç setindeki temel araçlardan biri React.memo'dur. Bu blog yazısı, küresel bir kitle için yüksek performanslı React uygulamaları oluşturmak amacıyla React.memo ve ilgili teknikleri anlamak ve etkili bir şekilde kullanmak için kapsamlı bir rehber sunmaktadır.

`React.memo` Nedir?

React.memo, bir fonksiyonel bileşeni memoize eden (belleğe alan) bir yüksek mertebeli bileşendir (HOC). Daha basit bir ifadeyle, props'ları değişmediyse bir bileşenin yeniden render edilmesini engeller. Varsayılan olarak, props'ların yüzeysel bir karşılaştırmasını yapar. Bu, özellikle render edilmesi hesaplama açısından maliyetli olan veya props'ları aynı kaldığında bile sık sık yeniden render edilen bileşenler için performansı önemli ölçüde artırabilir.

Bir kullanıcının profilini gösteren bir bileşen düşünün. Kullanıcının bilgileri (örneğin, adı, avatarı) değişmediyse, bileşeni yeniden render etmeye gerek yoktur. React.memo, bu gereksiz yeniden render işlemini atlayarak değerli işlem süresinden tasarruf etmenizi sağlar.

`React.memo` Neden Kullanılmalı?

İşte React.memo kullanmanın temel faydaları:

Performans İyileştirmesi: Gereksiz yeniden render'ları önleyerek daha hızlı ve akıcı kullanıcı arayüzleri sağlar.
Azaltılmış CPU Kullanımı: Daha az yeniden render, daha az CPU kullanımı anlamına gelir; bu da özellikle mobil cihazlar ve sınırlı bant genişliğine sahip bölgelerdeki kullanıcılar için önemlidir.
Daha İyi Kullanıcı Deneyimi: Daha duyarlı bir uygulama, özellikle yavaş internet bağlantısına veya eski cihazlara sahip kullanıcılar için daha iyi bir kullanıcı deneyimi sunar.

`React.memo`'nun Temel Kullanımı

React.memo'yu kullanmak oldukça basittir. Fonksiyonel bileşeninizi onunla sarmalamanız yeterlidir:

import React from 'react';

const MyComponent = (props) => {
 console.log('MyComponent render edildi');
 return (
 {props.data}
 );
};

export default React.memo(MyComponent);

Bu örnekte, MyComponent yalnızca data prop'u değişirse yeniden render edilecektir. console.log ifadesi, bileşenin ne zaman gerçekten yeniden render edildiğini doğrulamanıza yardımcı olacaktır.

Yüzeysel Karşılaştırmayı Anlamak

Varsayılan olarak, React.memo props'ların yüzeysel bir karşılaştırmasını yapar. Bu, değerlerin kendilerini değil, props'lara olan referansların değişip değişmediğini kontrol ettiği anlamına gelir. Nesneler ve dizilerle uğraşırken bunu anlamak önemlidir.

Aşağıdaki örneği düşünün:

import React, { useState } from 'react';

const MyComponent = (props) => {
 console.log('MyComponent render edildi');
 return (
 {props.data.name}
 );
};

const MemoizedComponent = React.memo(MyComponent);

const App = () => {
 const [user, setUser] = useState({ name: 'John', age: 30 });

 const handleClick = () => {
 setUser({ ...user }); // Aynı değerlere sahip yeni bir nesne oluşturuluyor
 };

 return (
 
 
 
 
 );
};

export default App;

Bu durumda, user nesnesinin değerleri (name ve age) aynı kalsa bile, handleClick fonksiyonu her çağrıldığında yeni bir nesne referansı oluşturur. Bu nedenle, React.memo data prop'unun değiştiğini (çünkü nesne referansı farklı) görecek ve MyComponent'i yeniden render edecektir.

Özel Karşılaştırma Fonksiyonu

Nesneler ve dizilerle ilgili yüzeysel karşılaştırma sorununu çözmek için React.memo, ikinci argümanı olarak özel bir karşılaştırma fonksiyonu sağlamanıza olanak tanır. Bu fonksiyon iki argüman alır: prevProps ve nextProps. Bileşenin yeniden render edilmemesi gerekiyorsa (yani, props'lar etkili bir şekilde aynıysa) true, yeniden render edilmesi gerekiyorsa false döndürmelidir.

Önceki örnekte özel bir karşılaştırma fonksiyonunu nasıl kullanabileceğiniz aşağıda gösterilmiştir:

import React, { useState, memo } from 'react';

const MyComponent = (props) => {
 console.log('MyComponent render edildi');
 return (
 {props.data.name}
 );
};

const areEqual = (prevProps, nextProps) => {
 return prevProps.data.name === nextProps.data.name && prevProps.data.age === nextProps.data.age;
};

const MemoizedComponent = memo(MyComponent, areEqual);

const App = () => {
 const [user, setUser] = useState({ name: 'John', age: 30 });

 const handleClick = () => {
 setUser({ ...user });
 };

 return (
 
 
 
 
 );
};

export default App;

Bu güncellenmiş örnekte, areEqual fonksiyonu user nesnelerinin name ve age özelliklerini karşılaştırır. MemoizedComponent artık yalnızca name veya age değiştiğinde yeniden render edilecektir.

`React.memo` Ne Zaman Kullanılmalı

React.memo aşağıdaki senaryolarda en etkilidir:

Sık sık aynı props'ları alan bileşenler: Bir bileşenin props'ları nadiren değişiyorsa, React.memo kullanmak gereksiz yeniden render'ları önleyebilir.
Render edilmesi hesaplama açısından maliyetli olan bileşenler: Karmaşık hesaplamalar yapan veya büyük miktarda veri render eden bileşenler için, yeniden render'ları atlamak performansı önemli ölçüde artırabilir.
Saf fonksiyonel bileşenler: Aynı girdi için aynı çıktıyı üreten bileşenler, React.memo için ideal adaylardır.

Ancak, React.memo'nun her derde deva bir çözüm olmadığını belirtmek önemlidir. Ayırt etmeksizin kullanmak performansa zarar verebilir çünkü yüzeysel karşılaştırmanın kendisinin bir maliyeti vardır. Bu nedenle, uygulamanızı profillemek ve memoization'dan en çok fayda sağlayacak bileşenleri belirlemek çok önemlidir.

`React.memo` Alternatifleri

React.memo güçlü bir araç olsa da, React bileşen performansını optimize etmek için tek seçenek değildir. İşte bazı alternatifler ve tamamlayıcı teknikler:

1. `PureComponent`

Sınıf bileşenleri için, PureComponent React.memo'ya benzer işlevsellik sağlar. Hem props'ların hem de state'in yüzeysel bir karşılaştırmasını yapar ve yalnızca değişiklikler varsa yeniden render eder.

import React from 'react';

class MyComponent extends React.PureComponent {
 render() {
 console.log('MyComponent render edildi');
 return (
 {this.props.data}
 );
 }
}

export default MyComponent;

PureComponent, sınıf bileşenlerinde gereksiz yeniden render'ları önlemenin geleneksel yolu olan shouldComponentUpdate'i manuel olarak uygulamaya uygun bir alternatiftir.

2. `shouldComponentUpdate`

shouldComponentUpdate, sınıf bileşenlerinde bir bileşenin yeniden render edilip edilmeyeceğini belirlemek için özel mantık tanımlamanıza olanak tanıyan bir yaşam döngüsü metodudur. En fazla esnekliği sağlar, ancak aynı zamanda daha fazla manuel çaba gerektirir.

import React from 'react';

class MyComponent extends React.Component {
 shouldComponentUpdate(nextProps, nextState) {
 return nextProps.data !== this.props.data;
 }

 render() {
 console.log('MyComponent render edildi');
 return (
 {this.props.data}
 );
 }
}

export default MyComponent;

shouldComponentUpdate hala mevcut olsa da, PureComponent ve React.memo genellikle basitlikleri ve kullanım kolaylıkları nedeniyle tercih edilir.

3. `useCallback`

useCallback, bir fonksiyonu memoize eden bir React hook'udur. Fonksiyonun, yalnızca bağımlılıklarından biri değiştiğinde değişen memoize edilmiş bir versiyonunu döndürür. Bu, memoize edilmiş bileşenlere callback'leri prop olarak geçirmek için özellikle yararlıdır.

Aşağıdaki örneği düşünün:

import React, { useState, useCallback, memo } from 'react';

const MyComponent = (props) => {
 console.log('MyComponent render edildi');
 return (
 
 );
};

const MemoizedComponent = memo(MyComponent);

const App = () => {
 const [count, setCount] = useState(0);

 const handleClick = useCallback(() => {
 setCount(count + 1);
 }, [count]);

 return (
 
 
 Sayı: {count}
 
 );
};

export default App;

Bu örnekte, useCallback handleClick fonksiyonunun yalnızca count state'i değiştiğinde değişmesini sağlar. useCallback olmadan, App'in her render'ında yeni bir fonksiyon oluşturulur ve bu da MemoizedComponent'in gereksiz yere yeniden render edilmesine neden olur.

4. `useMemo`

useMemo, bir değeri memoize eden bir React hook'udur. Yalnızca bağımlılıklarından biri değiştiğinde değişen memoize edilmiş bir değer döndürür. Bu, her render'da yeniden çalıştırılması gerekmeyen maliyetli hesaplamalardan kaçınmak için kullanışlıdır.

import React, { useState, useMemo } from 'react';

const App = () => {
 const [input, setInput] = useState('');

 const expensiveCalculation = (str) => {
 console.log('Hesaplanıyor...');
 let result = 0;
 for (let i = 0; i < str.length * 1000000; i++) {
 result++;
 }
 return result;
 };

 const memoizedResult = useMemo(() => expensiveCalculation(input), [input]);

 return (
 
  setInput(e.target.value)} />
 Sonuç: {memoizedResult}
 
 );
};

export default App;

Bu örnekte, useMemo expensiveCalculation fonksiyonunun yalnızca input state'i değiştiğinde çağrılmasını sağlar. Bu, hesaplamanın her render'da yeniden çalıştırılmasını önler ve bu da performansı önemli ölçüde artırabilir.

Küresel Uygulamalar için Pratik Örnekler

React.memo ve ilgili tekniklerin küresel uygulamalarda nasıl uygulanabileceğine dair bazı pratik örneklere bakalım:

1. Dil Seçici

Bir dil seçici bileşeni genellikle mevcut dillerin bir listesini render eder. Liste nispeten statik olabilir, yani sık sık değişmez. React.memo kullanmak, uygulamanın diğer bölümleri güncellendiğinde dil seçicinin gereksiz yere yeniden render edilmesini önleyebilir.

import React, { memo } from 'react';

const LanguageItem = ({ language, onSelect }) => {
 console.log(`LanguageItem ${language} render edildi`);
 return (
  onSelect(language)}>{language}
 );
};

const MemoizedLanguageItem = memo(LanguageItem);

const LanguageSelector = ({ languages, onSelect }) => {
 return (
 
 {languages.map((language) => (
 
 ))}
 
 );
};

export default LanguageSelector;

Bu örnekte, MemoizedLanguageItem yalnızca language veya onSelect prop'u değiştiğinde yeniden render edilecektir. Bu, dil listesi uzunsa veya onSelect işleyicisi karmaşıksa özellikle faydalı olabilir.

2. Para Birimi Dönüştürücü

Bir para birimi dönüştürücü bileşeni, para birimlerinin bir listesini ve döviz kurlarını görüntüleyebilir. Döviz kurları periyodik olarak güncellenebilir, ancak para birimleri listesi nispeten sabit kalabilir. React.memo kullanmak, döviz kurları güncellendiğinde para birimi listesinin gereksiz yere yeniden render edilmesini önleyebilir.

import React, { memo } from 'react';

const CurrencyItem = ({ currency, rate, onSelect }) => {
 console.log(`CurrencyItem ${currency} render edildi`);
 return (
  onSelect(currency)}>{currency} - {rate}
 );
};

const MemoizedCurrencyItem = memo(CurrencyItem);

const CurrencyConverter = ({ currencies, onSelect }) => {
 return (
 
 {Object.entries(currencies).map(([currency, rate]) => (
 
 ))}
 
 );
};

export default CurrencyConverter;

Bu örnekte, MemoizedCurrencyItem yalnızca currency, rate veya onSelect prop'u değiştiğinde yeniden render edilecektir. Bu, para birimi listesi uzunsa veya döviz kuru güncellemeleri sık ise performansı artırabilir.

3. Kullanıcı Profili Gösterimi

Bir kullanıcı profilini görüntülemek, ad, profil resmi ve potansiyel olarak bir biyografi gibi statik bilgileri göstermeyi içerir. `React.memo` kullanmak, bileşenin her üst bileşen güncellemesinde değil, yalnızca kullanıcı verileri gerçekten değiştiğinde yeniden render edilmesini sağlar.

import React, { memo } from 'react';

const UserProfile = ({ user }) => {
 console.log('UserProfile render edildi');
 return (
 
 {user.name}
 
 {user.bio}
 
 );
};

export default memo(UserProfile);

Bu, `UserProfile`'ın daha büyük, sık güncellenen bir kontrol panelinin veya uygulamanın bir parçası olduğu ve kullanıcı verilerinin kendisinin sık değişmediği durumlarda özellikle yararlıdır.

Sık Karşılaşılan Tuzaklar ve Bunlardan Kaçınma Yolları

React.memo değerli bir optimizasyon aracı olsa da, sık karşılaşılan tuzakların ve bunlardan nasıl kaçınılacağının farkında olmak önemlidir:

Aşırı memoization: React.memo'yu ayırt etmeksizin kullanmak, yüzeysel karşılaştırmanın kendisinin bir maliyeti olduğu için performansa zarar verebilir. Yalnızca bundan fayda görme olasılığı yüksek olan bileşenleri memoize edin.
Yanlış bağımlılık dizileri: useCallback ve useMemo kullanırken, doğru bağımlılık dizilerini sağladığınızdan emin olun. Bağımlılıkları atlamak veya gereksiz bağımlılıklar eklemek, beklenmedik davranışlara ve performans sorunlarına yol açabilir.
Props'ları değiştirmek: Props'ları doğrudan değiştirmekten kaçının, çünkü bu React.memo'nun yüzeysel karşılaştırmasını atlayabilir. Props'ları güncellerken her zaman yeni nesneler veya diziler oluşturun.
Karmaşık karşılaştırma mantığı: Özel karşılaştırma fonksiyonlarında karmaşık karşılaştırma mantığından kaçının, çünkü bu React.memo'nun performans avantajlarını ortadan kaldırabilir. Karşılaştırma mantığını olabildiğince basit ve verimli tutun.

Uygulamanızı Profilleme

React.memo'nun performansı gerçekten iyileştirip iyileştirmediğini belirlemenin en iyi yolu, uygulamanızı profillemektir. React, React DevTools Profiler ve React.Profiler API'si dahil olmak üzere profil oluşturma için birkaç araç sunar.

React DevTools Profiler, uygulamanızın performans izlerini kaydetmenize ve sık sık yeniden render edilen bileşenleri belirlemenize olanak tanır. React.Profiler API'si, belirli bileşenlerin render süresini programatik olarak ölçmenizi sağlar.

Uygulamanızı profillerek, memoization'dan en çok fayda sağlayacak bileşenleri belirleyebilir ve React.memo'nun performansı gerçekten iyileştirdiğinden emin olabilirsiniz.

Sonuç

React.memo, React bileşen performansını optimize etmek için güçlü bir araçtır. Gereksiz yeniden render'ları önleyerek uygulamalarınızın hızını ve duyarlılığını artırabilir, bu da daha iyi bir kullanıcı deneyimi sağlar. Ancak, React.memo'yu akıllıca kullanmak ve performansı gerçekten iyileştirdiğinden emin olmak için uygulamanızı profillemek önemlidir.

Bu blog yazısında tartışılan kavramları ve teknikleri anlayarak, küresel bir kitle için yüksek performanslı React uygulamaları oluşturmak üzere React.memo ve ilgili teknikleri etkili bir şekilde kullanabilir, uygulamalarınızın dünyanın dört bir yanındaki kullanıcılar için hızlı ve duyarlı olmasını sağlayabilirsiniz.

React uygulamalarınızı optimize ederken ağ gecikmesi ve cihaz yetenekleri gibi küresel faktörleri göz önünde bulundurmayı unutmayın. Performans ve erişilebilirliğe odaklanarak, konumları veya cihazları ne olursa olsun tüm kullanıcılar için harika bir deneyim sunan uygulamalar oluşturabilirsiniz.

MLOG

React Memo: Küresel Uygulamalar için Optimizasyon Tekniklerine Derinlemesine Bakış

`React.memo` Nedir?

`React.memo` Neden Kullanılmalı?

`React.memo`'nun Temel Kullanımı

Yüzeysel Karşılaştırmayı Anlamak

Özel Karşılaştırma Fonksiyonu

`React.memo` Ne Zaman Kullanılmalı

`React.memo` Alternatifleri

1. `PureComponent`

2. `shouldComponentUpdate`

3. `useCallback`

4. `useMemo`

Küresel Uygulamalar için Pratik Örnekler

1. Dil Seçici

2. Para Birimi Dönüştürücü

3. Kullanıcı Profili Gösterimi

{user.name}

Sık Karşılaşılan Tuzaklar ve Bunlardan Kaçınma Yolları

Uygulamanızı Profilleme

Sonuç

İleri Okuma ve Kaynaklar

React Memo: Küresel Uygulamalar için Optimizasyon Tekniklerine Derinlemesine Bakış

React.memo Nedir?

React.memo Neden Kullanılmalı?

React.memo'nun Temel Kullanımı

Yüzeysel Karşılaştırmayı Anlamak

Özel Karşılaştırma Fonksiyonu

React.memo Ne Zaman Kullanılmalı

React.memo Alternatifleri

1. PureComponent

2. shouldComponentUpdate

3. useCallback

4. useMemo

Küresel Uygulamalar için Pratik Örnekler

1. Dil Seçici

2. Para Birimi Dönüştürücü

3. Kullanıcı Profili Gösterimi

{user.name}

Sık Karşılaşılan Tuzaklar ve Bunlardan Kaçınma Yolları

Uygulamanızı Profilleme

Sonuç

İleri Okuma ve Kaynaklar

`React.memo` Nedir?

`React.memo` Neden Kullanılmalı?

`React.memo`'nun Temel Kullanımı

`React.memo` Ne Zaman Kullanılmalı

`React.memo` Alternatifleri

1. `PureComponent`

2. `shouldComponentUpdate`

3. `useCallback`

4. `useMemo`