Key Prop

• Key, React için özel bir prop’tur.
• Elementlerin birbirinden ayrı olduğunu bilmesini sağlar ve render performansını optimize eder.
• Özellikle aynı türden birden fazla çocuk element olduğunda kesinlikle kullanılmalıdır.

Notlar:

• Aynı component ve aynı pozisyonda render edilse bile farklı key kullanılırsa, React elementi baştan render eder.
• Key kullanılmazsa, eski state’ler korunur ve yeni öğede gözükebilir.

// Örnek
{items.map(item => (
  <ListItem key={item.id} value={item.text} />
))}

⚡ Varsayılan Props

• Eski yöntem: defaultProps kullanımı artık önerilmiyor.

Row.defaultProps = {
  type: "vertical",
};

• Yeni ve modern yöntem: destructuring ile varsayılan değer atamak

const Row = styled.div`
  display: flex;

  ${(props) => {
    const type = props.type || 'vertical';
    return type === 'horizontal'
      ? css`
          justify-content: space-between;
          align-items: center;
        `
      : css`
          flex-direction: column;
          gap: 1.6rem;
        `;
  }}
`;

Avantajları:

• Kod daha okunabilir ve temiz olur.
• React’in modern işleyişine uygundur.
• Props tanımsız olduğunda otomatik olarak varsayılan değer atanır.