React Tutorial 2023 54 – Optimizasyon Teknikleri 1 – React.memo() Fonksiyonu

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.