Cum se modifică corect starea componentelor în React?

Schimbarea stării în React are loc prin metoda setState pentru componentele de clasă sau cu ajutorul hook-ului useState pentru componentele funcționale.

Componente de clasă:

// Importăm React
import React, { Component } from 'react';

// Creăm o componentă de clasă
class MyComponent extends Component {
  // Inițializăm starea
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  // Metodă pentru modificarea stării
  incrementCount = () => {
    // Folosim setState
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Contor: {this.state.count}</p>
        <button onClick={this.incrementCount}>Crește</button>
      </div>
    );
  }
}

// Exportăm componenta
export default MyComponent;

• setState este asincron.
• setState unește noua stare cu cea existentă (shallow merge).
• setState poate primi o funcție care returnează noua stare, bazată pe cea anterioară:

// Metodă pentru modificarea stării folosind o funcție
incrementCountFunction = () => {
  this.setState((prevState) => ({
    count: prevState.count + 1
  }));
};

Componente funcționale (cu useState):

// Importăm React și useState
import React, { useState } from 'react';

// Creăm o componentă funcțională
function MyFunctionComponent() {
  // Inițializăm starea cu useState
  const [count, setCount] = useState(0); // [starea curentă, funcție de actualizare]

  // Funcție pentru modificarea stării
  const incrementCount = () => {
    // Folosim o funcție pentru actualizare
    setCount(count + 1);
  };

  return (
    <div>
      <p>Contor: {count}</p>
      <button onClick={incrementCount}>Crește</button>
    </div>
  );
}

// Exportăm componenta
export default MyFunctionComponent;

• useState returnează un array cu două elemente: starea curentă și funcția de actualizare.
• Funcția de actualizare, returnată de useState, înlocuiește starea curentă, nu o combină.
• Se poate transmite o funcție în funcția de actualizare dacă noua stare depinde de cea anterioară:

// Funcție pentru modificarea stării folosind o funcție
const incrementCountFunction = () => {
  setCount(prevCount => prevCount + 1);
};

Puncte importante la modificarea stării:

• Nu modificați starea direct: Niciodată nu atribuiți o nouă valoare proprietății state direct (de exemplu, this.state.count = 5 sau count = 5). React nu va detecta această modificare și componenta nu se va rerenderiza.
• Modificarea obiectelor și array-urilor: La modificarea obiectelor sau array-urilor în stare, creați întotdeauna copii noi. React compară referințele și dacă referința nu se schimbă, consideră că datele nu s-au modificat și nu va face rerender.

// Modificarea unui obiect în componenta de clasă
this.setState(prevState => ({
  user: {
    ...prevState.user, // Copiem proprietățile vechi
    name: 'Nume nou' // Actualizăm proprietatea necesară
  }
}));

// Modificarea unui array în componenta funcțională
setItems(prevItems => [...prevItems, 'Element nou']); // Adăugăm un element nou

• Asincronicitatea lui setState: Dacă doriți să executați o acțiune după ce starea a fost actualizată și componenta rerenderizată, folosiți al doilea argument al setState (o funcție callback) sau hook-ul useEffect în componentele funcționale.

// Callback în setState
this.setState({ count: this.state.count + 1 }, () => {
  console.log('Starea a fost actualizată!');
});

// useEffect pentru a reacționa la schimbarea stării
useEffect(() => {
  console.log('Starea count s-a schimbat:', count);
}, [count]); // Dependență: hook-ul va fi declanșat la schimbarea lui count

Compararea metodelor:

Caracteristică	Componente de clasă (setState)	Componente funcționale (useState)
Sintaxă	Metoda this.setState(newState[, callback])	Hook-ul const [state, setState] = useState(initialState)
Combinare/Înlocuire	Combină noua stare cu cea existentă (shallow merge)	Înlocuiește starea curentă cu cea nouă
Asincron	Este asincron	Este asincron la apelarea din handler-ele de evenimente, dar sincron în faza de render a React
Dependență de starea anterioară	Se transmite o funcție în setState: this.setState(prevState => ({...}))	Se transmite o funcție în funcția de actualizare: setState(prev => ({...}))