Merhabalar.
Bu yazımla birlikte biraz React’te optimizasyon işleri nasıl yapılır bunlara bakacağız.
Biliyorsunuz ki, React’in temel mantığı component’ler oluşturma ve ilgili yerlerde bu componentleri çağırma şeklindedir. Çoğu zaman gerçek hayat projelerinde bir çok component iç içe yazılır. Bir component’in state’i güncellendiğinde iç içe yazıldığı diğer component’ler de bir güncelleme olmamasına rağmen sadece orada çağrıldığı için render edilirler.
İşte bunun gibi performans sorunlarımız vardır ve bunlara çözüm bulmaya çalışacağız.
Bu yazımda memo() fonksiyonundan bahsedeceğim.
memo() Nedir?
React.memo, React’in bir bileşenin yeniden renderlanmasını atlamasını sağlayan bir fonksiyondur. Bu, bir bileşenin props’ları değişmediğinde yeniden renderlanmasını önler ve performansı artırır. Ancak, bu fonksiyonu tüm bileşenlerde kullanmak zorunda değilsiniz. Performansınızı etkilemeyen durumlarda kullanımını önermiyorum.
import { Fragment, memo } from "react";
const Todos = ({ todos }) => {
return (
<Fragment>
<h2>My Todos</h2>
{todos.map((todo, index) => {
return <p key={index}>{todo}</p>;
})}
</ Fragment>
);
};
export default memo(Todos);
Bu örnekte, Todos
bileşeni sadece todos
props’unun güncellendiği zaman yeniden renderlanır.
import { Fragment, memo } from "react";
Fragment
: Bu, bir React fragmentini bildirmek için kısaltılmış bir sözdizimidir. Fragmentler, ekstra düğümler eklemeden birden fazla çocuğu gruplamak için kullanılır.
memo
: Bu, bir bileşenin render edilmiş çıkışını hafızaya alarak işlevselliği optimize etmeye yarayan bir yüksek dereceli bir bileşen. Gereksiz renderları önler.
const Todos = ({ todos }) => {
Bu, Todos
adında bir fonksiyonel bileşendir.
todos
adında bir prop alır, bu da todo öğelerini içeren bir dizi.
return (
<Fragment>
<h2>Benim Görevlerim</h2>
{todos.map((todo, index) => {
return <p key={index}>{todo}</p>;
})}
</Fragment>
);
Bileşen, bir fragment <Fragment>
kullanarak birden fazla öğeyi ekstra bir div eklemeden gruplar.
“Benim Görevlerim” diyen bir <h2>
başlık içerir.
Ardından, todos
dizisi üzerinde haritalama yapar ve her todo öğesi için bir <p>
(paragraf) öğesi render eder. key
özelliği, her öğenin benzersiz bir tanımlayıcıya sahip olmasını sağlar.
export default memo(Todos);
memo
fonksiyonu, Todos
bileşenini sarmalar ve çıktısını hafızaya alarak gereksiz yeniden render’ları önler. Tüm bileşen, varsayılan olarak dışa aktarılır.
Yani, bu bileşen, bir prop olarak geçirilen todo öğelerini görüntülemek için basit bir sunum bileşenidir. Fragment
kullanımı gereksiz DOM düğümlerini önlerken, memo
performansı optimize etmeye yardımcı olur.
memo’nun 2. Parametresi Yardımıyla Ne Zaman Render Edileceğini Belirleme
React.memo’nun ikinci parametresi olarak bir karşılaştırma fonksiyonu alabilir. Bu fonksiyon, bileşenin önceki ve yeni props’larını kabul eder ve eşitse true
, eşit değilse false
döndürür. Bu, bileşenin yeniden renderlanmasını kontrol etmenize olanak sağlar.
const areEqual = (prevProps, nextProps) => {
return prevProps.title === nextProps.title;
};
const MemoizedComponent = React.memo(SomeComponent, areEqual);
Bu örnekte, SomeComponent
bileşeni sadece title
props’unun değişmediği zaman yeniden renderlanır.
React.memo’yu kullanırken dikkat etmeniz gereken birkaç önemli nokta vardır. Öncelikle, bileşeniniz zor olmadığında ve genellikle farklı props ile render edildiğinde, muhtemelen React.memo’yu kullanmanıza gerek yoktur. İkinci olarak, performansla ilgili değişiklikler yanlış uygulandığında bileşenin performansını etkileyebilir. Son olarak, sınıf tabanlı bileşenleri React.memo ile sarmamak isteyebilirsiniz. Bunun yerine, PureComponent
sınıfını genişletmelisiniz veya shouldComponentUpdate()
yöntemini tanımlayabilirsiniz.
memo ile Component render yönetimi böyleydi.
Bir sonraki yazımda görüşmek üzere.