Keskitaso🔧 Refaktorointi

React-komponentin memoization

Optimoi komponentin uudelleenrenderöintiä React.memo, useMemo ja useCallback avulla.

Prompti

Optimoi komponentin uudelleenrenderöintiä.

Komponentti:
[KOODI]

Ongelma: [ONGELMA]

Optimoi käyttäen:
- React.memo tarvittaessa
- useMemo laskennallisille arvoille
- useCallback funktioille
- Selitä milloin kukin on tarpeen

Vältä liiallista optimointia.

Suomenkieliset vinkit

Suomenkieliset promptit tuottavat suomenkielisiä koodikommentteja
Voit sekoittaa suomea ja englantia — teknisiä termejä ei tarvitse kääntää

Muuttujat

Korvaa nämä hakasulkeissa olevat muuttujat omilla tiedoillasi:

[KOODI]
[ONGELMA]

Esimerkki

Täytetty prompti

Optimoi komponentin uudelleenrenderöintiä.

Komponentti:
function ProductList({ products, onProductClick, filter }) {
  const filteredProducts = products.filter(p => p.category === filter);

  return (
    <div>
      {filteredProducts.map(product => (
        <ProductCard
          key={product.id}
          product={product}
          onClick={() => onProductClick(product.id)}
        />
      ))}
    </div>
  );
}

function ProductCard({ product, onClick }) {
  return (
    <div onClick={onClick}>
      <h3>{product.name}</h3>
      <p>{product.price}€</p>
    </div>
  );
}

Ongelma: ProductCard renderöityy turhaan kun parent päivittyy

Optimoi React.memo, useMemo, useCallback avulla.