Ce trebuie să știi înainte: React și TS

Înainte de a te cufunda în Next.js, este crucial să stăpânești bazele React și TypeScript, deoarece framework-ul se bazează direct pe aceste tehnologii. În practică, majoritatea joburilor cer combinarea lor pentru a asigura scalabilitatea și menținerea codului în proiectele enterprise. Fără o înțelegere solidă a componentelor React și a tipurilor statice TS, vei întâmpina dificultăți majore în debugging și în integrarea API-urilor complexe. Investește timp în înțelegerea fluxului de date și a sistemului de tipuri, deoarece acestea sunt fundamentul oricărei aplicații moderne Next.js.

Concepte cheie

• Componente Funcționale: Structura de bază a UI-ului în React modern; trebuie să știi cum să gestionezi starea locală folosind useState și efectele secundare cu useEffect.
• Props și Tipare: Transmiterea datelor între componente trebuie făcută tipizat în TypeScript pentru a preveni erorile de runtime și a îmbunătăți experiența de dezvoltare prin IntelliSense.
• Hook-uri Avansate: Pe lângă cele standard, familiarizează-te cu useContext pentru gestionarea stării globale și useReducer pentru logici complexe de stare.
• Interfețe vs. Tipuri: În TypeScript, preferă interface pentru obiecte și forme de date, deoarece pot fi extinse mai ușor, în timp ce type este util pentru uniuni sau tipuri complexe.
• Generics: Folosește genericele pentru a crea componente reutilizabile care funcționează cu diverse tipuri de date, menținând totodată siguranța tipurilor.
• Conditional Rendering: Înțelege cum să redai condiționat elemente JSX bazat pe starea aplicației, evitând randările inutile pentru performanță.

Exemplu practic

Să creăm o componentă simplă de listă de utilizatori, demonstrând tiparea corectă a props-urilor.

import React from 'react';

// Definim interfața pentru un utilizator
interface User {
  id: number;
  name: string;
  email: string;
}

// Props-ul componentei este tipizat explicit
interface UserListProps {
  users: User[];
  onUserClick: (userId: number) => void;
}

export const UserList: React.FC<UserListProps> = ({ users, onUserClick }) => {
  if (users.length === 0) {
    return <p>Nu există utilizatori.</p>;
  }

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id} onClick={() => onUserClick(user.id)}>
          {user.name} - {user.email}
        </li>
      ))}
    </ul>
  );
};

Acest exemplu arată cum TypeScript ne protejează de erori (de ex., dacă am trimite un array de stringuri în loc de User[]) și cum key este esențial pentru performanța listelor.

Greșeli frecvente

1. Ignorarea tipării props-urilor: Utilizarea any sau lipsa definițiilor de tip duce la cod fragil și dificultăți în refactoring.
2. Abuzul de useEffect: Mulți începători pun logica de fetch de date în useEffect când ar trebui să folosească hook-uri specifice sau server components în Next.js.
3. Starea duplicată: Menținerea aceleiași date atât în starea locală, cât și în URL sau context, ceea ce creează inconsistențe.
4. Neînțelegerea ciclului de viață: Confundarea momentului în care componenta este montată cu cel în care este actualizată, ducând la bucle infinite sau randări ineficiente.

Întrebări de interviu

1. Care este diferența dintre interface și type în TypeScript? Răspuns: interface este concepută pentru obiecte și poate fi extinsă (extends) sau fuzionată, în timp ce type este o aliasare a unui tip și poate descrie uniuni, tupluri sau tipuri funcționale.

2. De ce este importantă prop-ul key în listele React? Răspuns: key ajută React să identifice ce elemente s-au schimbat, au fost adăugate sau șterse, optimizând astfel procesul de reconciliere a DOM-ului.

3. Cum gestionezi dependențele în useEffect? Răspuns: Prin al doilea argument al hook-ului, un array care specifică variabilele ale căror schimbări declanșează executarea efectului; un array gol rulează efectul o singură dată la montare.

Exercițiu

Creează o componentă TodoItem care primește un task (titlu, completat sau nu) și un callback onToggle. Apoi, creează un container TodoList care primește un array de task-uri și afișează lista. Asigură-te că toate structurile de date sunt tipizate corect în TypeScript și testează componenta cu date mock. Timp estimat: 45 minute.