Interviu React junior: state și evenimente

La un interviu React de nivel junior trebuie să explici legătura dintre date, randare și acțiunile utilizatorului. Începem cu o componentă mică: un contor care adaugă două puncte la fiecare apăsare. Exemplul dezvăluie o diferență importantă între o variabilă obișnuită și starea unei componente.

Ce pregătești la acest nivel

Ai nevoie de funcții JavaScript, obiecte, array-uri și funcții săgeată. Parcurge apoi componente și props, state și evenimente, liste cu chei stabile, formulare și accesibilitate de bază. Acest articol dezvoltă actualizările de state și calcularea datelor derivate. Exemplul folosește React 19 și JSX, fără alte biblioteci.

Nu trebuie să cunoști un framework de randare pe server ca să rezolvi exercițiul. Trebuie însă să poți spune ce date deține componenta, ce primește de la părinte și ce se schimbă la un click. Separarea acestor responsabilități este mai utilă decât memorarea unei liste de hooks.

State este o fotografie a randării

La fiecare randare, funcția componentei primește valorile de state pentru acea randare. Un apel la setter cere o actualizare; nu rescrie imediat variabila pe care o citește handlerul curent. Dacă score este zero și apelezi de două ori setScore(score + 1), ambele apeluri cer valoarea unu.

Când următoarea valoare depinde de precedenta, poți transmite o funcție de actualizare. React pune funcțiile în coadă și aplică fiecare funcție rezultatului precedent. Această diferență este explicată în state ca snapshot și useState.

Exemplu: două actualizări în același eveniment

import { useState } from 'react';

export default function Score() {
  const [score, setScore] = useState(0);
  const doubled = score * 2;

  function addTwo() {
    setScore(current => current + 1);
    setScore(current => current + 1);
  }

  return (
    <section aria-label="Scor de exercițiu">
      <p>Scor: <output>{score}</output></p>
      <p>Dublul scorului: {doubled}</p>
      <button type="button" onClick={addTwo}>Adaugă două puncte</button>
      <button type="button" onClick={() => setScore(0)}>Resetează</button>
    </section>
  );
}

Montează componenta într-un proiect React care compilează JSX. Inițial vezi scorul zero și dublul zero. După un click vezi doi și patru. După al doilea click vezi patru și opt. Resetarea readuce ambele valori la zero. Într-un proiect cu React Server Components, fișierul interactiv trebuie declarat componentă client conform frameworkului folosit.

Funcțiile de actualizare trebuie să fie pure. Nu trimite cereri sau evenimente de analiză din interiorul lor. În dezvoltare, verificările React pot reapela aceste funcții pentru a detecta impurități; corectitudinea nu trebuie să depindă de apelarea lor exact o dată.

Ce date păstrăm și ce calculăm

Păstrăm doar score. Valoarea doubled se calculează direct la randare. Dacă am stoca ambele valori separat, ar trebui să le sincronizăm la fiecare modificare și am putea afișa accidental un scor și un dublu care nu corespund.

Nu avem nevoie de useEffect pentru o înmulțire. Efectele sunt pentru sincronizarea cu sisteme externe, nu pentru orice calcul. La fel, nu avem nevoie de memoizare pentru această operație trivială. Simplitatea modelului de date elimină o întreagă clasă de erori.

Butonul are type="button", astfel încât să nu trimită accidental un formular dacă exemplul este mutat într-unul. Folosim elemente native interactive, care oferă comportament de tastatură. O interfață corectă nu se verifică doar prin click cu mouse-ul.

Exersează

1. Prezice rezultatul după trei clickuri: scor șase, dublu doisprezece. Verifică apoi prin rulare.
2. Înlocuiește cele două funcții de actualizare cu două apeluri setScore(score + 1). De la zero, un click produce unu. Explică rezultatul folosind snapshotul handlerului.
3. Adaugă un buton care scade un punct fără să coboare sub zero. Folosește o funcție de actualizare și verifică apăsarea la zero, la unu și după resetare.

Autoevaluare și pasul următor

Poți continua dacă explici de ce setterul nu schimbă variabila curentă și de ce dublul nu este state separat. Verifică și navigarea cu Tab, activarea butoanelor de la tastatură și resetarea repetată. Urmează React mid: efecte și răspunsuri întârziate.

Întrebări frecvente

Folosesc mereu o funcție în setter?

Folosește-o când noua valoare depinde de starea precedentă. Pentru o valoare explicită, precum resetarea la zero, poți transmite direct acea valoare.

Props și state sunt același lucru?

Nu. Props vin de la părinte, iar state este memoria deținută de componentă. Ambele participă la calculul interfeței.

Pot modifica direct un array din state?

Construiește o valoare nouă pentru actualizare. Modificarea directă poate păstra aceeași referință și poate încălca ipotezele componentelor care primesc acele date.

Am nevoie de useEffect pentru doubled?

Nu. Este un calcul direct din state existent. Un efect ar adăuga sincronizare inutilă.

Exemplul dovedește că sunt pregătit pentru orice interviu junior?

Nu. Este un prim articol din parcurs. Continuă cu liste, formulare, JavaScript și explicarea unui proiect propriu.

Surse și versiuni

React 19. Consultă și alegerea structurii de state. Documentație consultată la 12 octombrie 2026.