Especialização Frontend com React & TypeScript • Demonstrações Práticas Executáveis

🎯 Contexto e Objetivo Prático

Sincronização com Web APIs, controle de timers e prevenção de vazamento de memória com função de cleanup e AbortController.

💻 Código Fonte React 19 (TSX)

// RealTimeClock.tsx
import React, { useState, useEffect } from "react";

export interface ClockOptions {
  locale?: string;
  timeZone?: string;
  syncIntervalMs?: number;
}

export function RealTimeClock({
  locale = "pt-BR",
  timeZone = "America/Sao_Paulo",
  syncIntervalMs = 1000
}: ClockOptions) {
  const [currentDate, setCurrentDate] = useState<Date>(new Date());
  const [tickCount, setTickCount] = useState<number>(0);

  useEffect(() => {
    // 1. Configuração do Efeito Colateral (Timer)
    const intervalTimer = setInterval(() => {
      setCurrentDate(new Date());
      setTickCount(prev => prev + 1);
    }, syncIntervalMs);

    // 2. Função de Limpeza (Cleanup): executada na desmontagem
    return () => {
      clearInterval(intervalTimer);
      console.log("[CLEANUP] Timer desalocado com sucesso.");
    };
  }, [syncIntervalMs]);

  const formattedTime = new Intl.DateTimeFormat(locale, {
    timeZone,
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit"
  }).format(currentDate);

  return (
    <div className="p-4 bg-slate-950 text-emerald-400 font-mono rounded-lg inline-block shadow-lg">
      <div className="text-2xl font-bold tracking-widest">{formattedTime}</div>
      <div className="text-xs text-slate-500 mt-1">
        Fuso: {timeZone} | Ciclos: {tickCount}
      </div>
    </div>
  );
}

🖥️ Saída de Renderização Visual e Comportamento

[Relógio Digital Ativo]
14:32:01
Fuso: America/Sao_Paulo | Ciclos: 42
(Ao desmontar o componente, o timer é cancelado automaticamente via clearInterval)