Kaip teisingai keisti React komponentų būseną…

React būdu keitimas įvyksta per setState metodą klasės komponentuose arba naudojant useState kabliuką funkciniuose komponentuose.

Klasės komponentai:

// Importuojame React
import React, { Component } from 'react';

// Sukuriame klasės komponentą
class MyComponent extends Component {
  // Inicijuojame būseną
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  // Būsenos keitimo metodas
  incrementCount = () => {
    // Naudojame `setState`
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Skaitiklis: {this.state.count}</p>
        <button onClick={this.incrementCount}>Padidinti</button>
      </div>
    );
  }
}

// Eksportuojame komponentą
export default MyComponent;

setState yra asinchroninis.
setState sujungia naują būseną su esama (shallow merge).
setState gali priimti funkciją, kuri grąžina naują būseną, pagrįstą ankstesne:

// Būsenos keitimo metodas naudojant funkciją
incrementCountFunction = () => {
  this.setState((prevState) => ({
    count: prevState.count + 1
  }));
};

Funkciniai komponentai (useState naudojimas):

// Importuojame React ir useState
import React, { useState } from 'react';

// Sukuriame funkcionalų komponentą
function MyFunctionComponent() {
  // Inicijuojame būseną naudojant `useState`
  const [count, setCount] = useState(0); // [dabartinė būseną, atnaujinimo funkcija]

  // Būsenos keitimo funkcija
  const incrementCount = () => {
    // Naudojame atnaujinimo funkciją
    setCount(count + 1);
  };

  return (
    <div>
      <p>Skaitiklis: {count}</p>
      <button onClick={incrementCount}>Padidinti</button>
    </div>
  );
}

// Eksportuojame komponentą
export default MyFunctionComponent;

useState grąžina masyvą iš dviejų elementų: dabartinę būseną ir funkciją ją atnaujinti.
Funkcija atnaujinti būseną, kurią grąžina useState, pakeičia dabartinę būseną, o ne sujungia.
Galima perduoti funkciją į atnaujinimo funkciją, jei nauja būseną priklauso nuo ankstesnės:

// Būsenos keitimo funkcija, naudojant funkciją
const incrementCountFunction = () => {
  setCount(prevCount => prevCount + 1);
};

Svarbūs dalykai keičiant būseną:

Nekeičiame būsenos tiesiogiai: Niekada ne priskirkite naują reikšmę state savybei tiesiogiai (pavyzdžiui, this.state.count = 5 arba count = 5). React nepastebės šios pakeitimo ir komponentas neperkraus.
Objektų ir masyvų keitimas: Keičiant objektus ar masyvus būsenos, visada kurkite naujas kopijas. React lygina nuorodas į objektus/masyvus, ir jei nuoroda nesikeičia, React mano, kad duomenys nepasikeitė ir neperkraus.

// Objekto keitimas klasės komponente
this.setState(prevState => ({
  user: {
    ...prevState.user, // Senų savybių kopija
    name: 'Naujas vardas' // Reikalingos savybės atnaujinimas
  }
}));

// Masyvo keitimas funkciniame komponente
setItems(prevItems => [...prevItems, 'Naujas elementas']); // Pridedame naują elementą

setState asinchroniškumas: Jei norite atlikti veiksmą po to, kai būsenos atnaujinimas įvyksta ir komponentas perkraunamas, naudokite antrą setState argumentą (callback funkciją) arba useEffect hook'ą funkciniuose komponentuose.

// Callback `setState`-e
this.setState({ count: this.state.count + 1 }, () => {
  console.log('Būsena atnaujinta!');
});

// `useEffect` reakcijai į būsenos pokyčius
useEffect(() => {
  console.log('Count pasikeitė:', count);
}, [count]); // priklausomybė: `count` pasikeis, kai jis keisis

Metodų palyginimas:

Savybė	Klasės komponentas (`setState`)	Funkcinis komponentas (`useState`)
Sintaksė	`this.setState(newState[, callback])`	`const [state, setState] = useState(initialState)` hook'as
Sujungimas/Naujinimas	Sujungia naują būseną su esama (shallow merge)	Pakeičia esamą būseną nauja
Asinchroniškumas	Asinchroninis	Funkcija atnaujinti asinchroninė, kai iškviečiama į įvykių tvarkyklę, bet sinchroninė render fazėje React
Priklausomybė nuo ankstesnės būsenos	Funkciją perduoti `setState`: `this.setState(prevState => ({...}))`	Funkciją perduoti atnaujinimo funkcijai: `setState(prev => ({...}))`

Kaip teisingai keisti React komponentų būseną?