React İle Web Uygulamaları İçin Dinamik Bir Yazı Yazdırma Efekti Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Bu uygulamayı hayata geçirmek için bilgisayarınızda Node.js yüklü olması ve temel bir React projesine sahip olmanız gerekmektedir. 2026 standartlarına uygun olarak, Vite kullanarak hızlı bir kurulum yapmanızı öneririz.

• Node.js (LTS sürümü)
• Vite veya Next.js tabanlı bir React çalışma ortamı
• Temel React kancaları (useState, useEffect) bilgisi

Projenizi oluşturmak için terminalinizde şu komutu çalıştırabilirsiniz:

npm create vite@latest typing-effect-app -- --template react
cd typing-effect-app
npm install

Bu komut seti, modern bir React geliştirme ortamını saniyeler içinde kurmanıza olanak tanır. Kurulumdan sonra projenizi npm run dev komutu ile başlatarak tarayıcınızda görüntüleyebilirsiniz.

Temel Yazdırma Mantığını Kurma

Yazdırma efekti, aslında bir dizenin (string) karakter karakter parçalanıp, belirli aralıklarla bir durum (state) değişkenine eklenmesi işlemidir. Bu işlem için useEffect kancasını kullanarak bir zamanlayıcı (timer) oluşturmamız gerekir.

Aşağıdaki kod örneği, basit bir metnin ekrana harf harf yazılmasını sağlar:

import { useState, useEffect } from 'react';

const TypingEffect = ({ text }) => {
  const [displayedText, setDisplayedText] = useState('');

  useEffect(() => {
    let index = 0;
    const interval = setInterval(() => {
      if (index < text.length) {
        setDisplayedText((prev) => prev + text.charAt(index));
        index++;
      } else {
        clearInterval(interval);
      }
    }, 100);
    return () => clearInterval(interval);
  }, [text]);

  return 


{displayedText}
;
};

Bu kodda, setInterval kullanarak her 100 milisaniyede bir metnin bir sonraki karakterini mevcut duruma ekliyoruz. useEffect içerisindeki temizleme fonksiyonu (cleanup function), bileşen ekrandan kaldırıldığında zamanlayıcının durmasını sağlayarak bellek sızıntılarını (memory leak) önler.

Performanslı ve Dinamik Bir Bileşen Tasarımı

Basit bir yazdırma efekti yeterli olsa da, profesyonel projelerde metinlerin değişmesi veya silinip tekrar yazılması (loop) gerekebilir. Bu adımda, daha esnek bir yapı kuracağız.

import { useState, useEffect } from 'react';

const DynamicTyping = ({ phrases }) => {
  const [index, setIndex] = useState(0);
  const [subIndex, setSubIndex] = useState(0);
  const [isDeleting, setIsDeleting] = useState(false);

  useEffect(() => {
    const timeout = setTimeout(() => {
      setSubIndex((prev) => prev + (isDeleting ? -1 : 1));
    }, isDeleting ? 50 : 150);

    if (!isDeleting && subIndex === phrases[index].length) {
      setTimeout(() => setIsDeleting(true), 1000);
    } else if (isDeleting && subIndex === 0) {
      setIsDeleting(false);
      setIndex((prev) => (prev + 1) % phrases.length);
    }

    return () => clearTimeout(timeout);
  }, [subIndex, isDeleting, index, phrases]);

  return {phrases[index].substring(0, subIndex)};
};

Burada setTimeout kullanarak hem yazma hem de silme hızlarını birbirinden bağımsız kontrol edebiliyoruz. isDeleting durumu, metnin sonuna gelindiğinde silme işleminin başlamasını tetikler.

Yöntem Karşılaştırması

Yazdırma efektini uygularken kullanabileceğiniz farklı yöntemlerin karşılaştırması aşağıdadır:

Erişilebilirlik ve Kullanıcı Deneyimi

Animasyonlar, ekran okuyucu kullanan kullanıcılar için kafa karıştırıcı olabilir. Yazdırma efekti kullanırken, metnin tamamının erişilebilir olduğundan emin olmalısınız. aria-live özniteliğini kullanarak ekran okuyuculara metnin güncellendiğini bildirebilirsiniz.

return (
  



    {phrases[index].substring(0, subIndex)}
    |
  
);

aria-live="polite" kullanımı, ekran okuyucunun metin tamamlandığında veya değiştiğinde kullanıcıyı nazikçe bilgilendirmesini sağlar. Ayrıca, imleç (cursor) efektini CSS ile yanıp sönecek şekilde ayarlamak kullanıcı deneyimini iyileştirir.

Güvenlik Uyarısı: Dinamik içerik oluştururken kullanıcıdan alınan verileri doğrudan DOM'a basmayın. Eğer metin kaynağınız dışarıdan geliyorsa, XSS (Cross-Site Scripting) saldırılarına karşı veriyi mutlaka temizleyin. Bu uygulamada sadece metin (text) verisi kullandığımız için textContent mantığıyla güvenli bir şekilde render alıyoruz.

Sıkça Sorulan Sorular

Yazı yazdırma efekti SEO'yu etkiler mi?

Doğru uygulandığında etkilemez. Google botları metni okuyabilir, ancak animasyonun çok yavaş olması veya metnin tamamen JS ile oluşturulup sunucuda hiç bulunmaması durumunda içerik dizine eklenirken sorun yaşanabilir. Metnin bir kısmını statik olarak HTML'de tutmak en güvenli yoldur.

Mobil cihazlarda bu efekt performans sorunu yaratır mı?

Hayır, ancak çok fazla re-render (yeniden çizim) işlemine neden olmamak için useMemo veya useCallback gibi optimizasyonları kullanmanız gerekebilir. Basit bir metin animasyonu için standart state yönetimi yeterlidir.

İmleç (cursor) efektini nasıl eklerim?

CSS kullanarak bir span elemanına animation: blink 1s infinite özelliği vererek kolayca ekleyebilirsiniz.

Birden fazla metin arasında nasıl geçiş yaparım?

Makalede gösterilen index ve subIndex mantığı ile bir dizi içerisindeki metinleri modülo operatörü (%) kullanarak sonsuz döngüye sokabilirsiniz.

Kütüphane kullanmak daha mı iyi?

Eğer çok karmaşık bir animasyon yapısına ihtiyacınız yoksa, kendi bileşeninizi yazmak projenin boyutunu küçültür ve gereksiz bağımlılıklardan kurtarır.

İleri Seviye Özelleştirme: Callback ve Event Tetikleyicileri

Yazı yazdırma efektini sadece görsel bir öğe olarak değil, uygulamanızın akışını yöneten bir tetikleyici olarak kullanmak, kullanıcı etkileşimini artırmanın en etkili yollarından biridir. Örneğin, metin tamamen yazıldığında bir butonun görünür olmasını veya bir animasyonun başlamasını isteyebilirsiniz.

Bunu başarmak için bileşenimize onComplete adında bir prop ekleyerek, metin döngüsü tamamlandığında veya belirli bir metin dizisi bittiğinde dışarıya bilgi gönderebiliriz.

const Typewriter = ({ text, speed = 100, onComplete }) => {
  const [displayedText, setDisplayedText] = useState("");

  useEffect(() => {
    let i = 0;
    const timer = setInterval(() => {
      setDisplayedText(text.substring(0, i + 1));
      i++;
      if (i === text.length) {
        clearInterval(timer);
        if (onComplete) onComplete();
      }
    }, speed);
    return () => clearInterval(timer);
  }, [text, speed, onComplete]);

  return {displayedText};
};

Performans Optimizasyonu ve Bellek Yönetimi

Dinamik efektlerde en sık karşılaşılan sorun, bileşenin her render döngüsünde gereksiz yere yeniden hesaplama yapmasıdır. useEffect içerisinde kullanılan setInterval veya setTimeout fonksiyonlarının temizlenmemesi (cleanup function), bellek sızıntılarına ve tarayıcı performansının düşmesine neden olur.

Performansı artırmak için şu stratejileri izlemelisiniz:

• Cleanup Fonksiyonu: useEffect içerisinde mutlaka clearInterval kullanarak zamanlayıcıyı durdurun.
• useCallback Kullanımı: Eğer metin geçişleri için bir fonksiyon kullanıyorsanız, bu fonksiyonu useCallback ile sarmalayarak referansının değişmesini engelleyin.
• React.memo: Yazı yazdırılan bileşenin, üst bileşen render olduğunda gereksiz yere tekrar render edilmesini önlemek için React.memo ile sarmalayın.

Aşağıdaki örnekte, React.memo ile bileşenin sadece metin değiştiğinde güncellenmesini sağlıyoruz:

import React, { memo } from 'react';

const TypewriterDisplay = memo(({ text }) => {
  return 
{text}
;
});

export default TypewriterDisplay;

Hata Ayıklama ve Kenar Durumları (Edge Cases)

Dinamik metin efektlerinde en çok karşılaşılan hata, metin dizisi (array) boşken veya yüklenirken bileşenin çökmesidir. Bu durumları yönetmek için "Guard Clause" (Koruma Maddesi) kullanmak projenizi daha dayanıklı hale getirir.

Özellikle aria-live kullanımı, ekran okuyucu kullanan kullanıcıların metnin değiştiğini fark etmesini sağlar. Yazılım geliştirme sürecinde bu küçük detaylar, uygulamanızın profesyonellik seviyesini belirleyen temel unsurlardır.

Sonuç

React ile dinamik bir yazı yazdırma efekti yapmak, hem React kancalarını (hooks) anlamak hem de kullanıcı arayüzünde görsel bir derinlik yaratmak için mükemmel bir egzersizdir. Bu makalede adım adım, basit bir metin yazdırıcıdan, silme ve döngü özelliklerine sahip profesyonel bir bileşene geçiş yaptık. Bir sonraki adım olarak, bu bileşene farklı yazı tipleri, renk değişimleri veya metin bittiğinde tetiklenen callback fonksiyonları ekleyerek projenizi daha da geliştirebilirsiniz.

Kodunuzun her zaman temiz, okunabilir ve erişilebilir olduğundan emin olun. Yazılım geliştirmede en iyi pratik, ihtiyacınız olan kadarını inşa etmek ve performansı her zaman ön planda tutmaktır.