Kako pravilno menjati stanje komponenti u React-u…

Promena stanja u React-u dešava se putem metode setState za klasične komponente ili pomoću hook-a useState za funkcionalne komponente.

Klasične komponente:

// Uvoz React-a
import React, { Component } from 'react';

// Kreiranje klasične komponente
class MyComponent extends Component {
  // Inicijalizacija stanja
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  // Metod za promenu stanja
  incrementCount = () => {
    // Koristi se setState
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Brojač: {this.state.count}</p>
        <button onClick={this.incrementCount}>Povećaj</button>
      </div>
    );
  }
}

// Eksportovanje komponente
export default MyComponent;

setState je asinhron.
setState spaja novo stanje sa trenutnim (shallow merge).
setState može da primi funkciju koja vraća novo stanje, zasnovano na prethodnom:

// Metod za promenu stanja korišćenjem funkcije
incrementCountFunction = () => {
  this.setState((prevState) => ({
    count: prevState.count + 1
  }));
};

Funkcionalne komponente (sa useState):

// Uvoz React i useState
import React, { useState } from 'react';

// Kreiranje funkcionalne komponente
function MyFunctionComponent() {
  // Inicijalizacija stanja pomoću useState
  const [count, setCount] = useState(0); // [trenutno stanje, funkcija za ažuriranje]

  // Funkcija za promenu stanja
  const incrementCount = () => {
    // Koristi se funkcija za ažuriranje
    setCount(count + 1);
  };

  return (
    <div>
      <p>Brojač: {count}</p>
      <button onClick={incrementCount}>Povećaj</button>
    </div>
  );
}

// Eksportovanje komponente
export default MyFunctionComponent;

useState vraća niz od dva elementa: trenutno stanje i funkciju za njegovo ažuriranje.
Funkcija za ažuriranje, koju vraća useState, zamenjuje trenutno stanje, a ne ga spaja.
Može se proslediti funkcija u funkciju za ažuriranje ako novo stanje zavisi od prethodnog:

// Funkcija za promenu stanja korišćenjem funkcije
const incrementCountFunction = () => {
  setCount(prevCount => prevCount + 1);
};

Važni napomene pri promeni stanja:

Nemojte direktno menjati stanje: Nikada ne dodeljujte novu vrednost svojstvu state (npr. this.state.count = 5 ili count = 5). React neće detektovati ovu promenu i komponenta se neće rerender-ovati.
Promena objekata i nizova: Pri promeni objekata ili nizova u stanju, uvek kreirajte njihove nove kopije. React poredi reference i ako se referenca ne menja, pretpostavlja da podaci nisu promenjeni i ne vrši rerender.

// Promena objekta u klasičnoj komponenti
this.setState(prevState => ({
  user: {
    ...prevState.user, // Kopiranje starih svojstava
    name: 'Novi naziv' // Ažuriranje potrebnog svojstva
  }
}));

// Promena niza u funkcionalnoj komponenti
setItems(prevItems => [...prevItems, 'Novi element']); // Dodavanje novog elementa

Asinhronost setState: Ako želite da izvršite radnju nakon što se stanje ažurira i komponenta rerender-uje, koristite drugi argument setState (callback funkciju) ili hook useEffect u funkcionalnim komponentama.

// Callback u `setState`
this.setState({ count: this.state.count + 1 }, () => {
  console.log('Stanje je ažurirano!');
});

// `useEffect` za reakciju na promenu stanja
useEffect(() => {
  console.log('Stanje count se promenilo:', count);
}, [count]); // Zavisnost: hook će se aktivirati pri promeni count

Uporedba metoda:

Karakteristika	Klasična (`setState`)	Funkcionalna (`useState`)
Sintaksa	Metoda `this.setState(newState[, callback])`	Hook `const [state, setState] = useState(initialState)`
Spajanje/Zamena	Spaja novo stanje sa trenutnim (shallow merge)	Zamenjuje trenutno stanje novim
Asinhrono	Asinhrono	Asinhrono pri pozivu iz handler-a, ali sinhrono u React render fazi
Zavisnost od prethodnog stanja	Prosledite funkciju u `setState`: `this.setState(prevState => ({...}))`	Prosledite funkciju u `setState(prev => ({...}))`

Kako pravilno menjati stanje komponenti u React-u?