Hogyan lehet helyesen módosítani a komponensek…

A React állapotának változása a setState módszerrel történik osztálykomponensek esetén vagy a useState hook használatával funkcionális komponensekben.

Osztálykomponensek:

// React importálása
import React, { Component } from 'react';

// Osztálykomponens létrehozása
class MyComponent extends Component {
  // Állapot inicializálása
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  // Metódus az állapot módosítására
  incrementCount = () => {
    // setState használata
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Számláló: {this.state.count}</p>
        <button onClick={this.incrementCount}>Növel</button>
      </div>
    );
  }
}

// Komponens exportálása
export default MyComponent;

A setState aszinkron.
A setState egyesíti az új állapotot a meglévővel (shallow merge).
A setState elfogadhat egy függvényt, amely a korábbi állapoton alapulva adja vissza az új állapotot:

// Függvény használatával az állapot módosítása
incrementCountFunction = () => {
  this.setState((prevState) => ({
    count: prevState.count + 1
  }));
};

Funkcionális komponensek (useState):

// React és useState importálása
import React, { useState } from 'react';

// Funkcionális komponens létrehozása
function MyFunctionComponent() {
  // Állapot inicializálása a useState segítségével
  const [count, setCount] = useState(0); // [aktuális állapot, frissítő függvény]

  // Állapot módosító függvény
  const incrementCount = () => {
    // Függvény használata a frissítéshez
    setCount(count + 1);
  };

  return (
    <div>
      <p>Számláló: {count}</p>
      <button onClick={incrementCount}>Növel</button>
    </div>
  );
}

// Komponens exportálása
export default MyFunctionComponent;

A useState egy tömböt ad vissza két elemmel: az aktuális állapotot és a frissítő függvényt.
A useState által visszaadott frissítő függvény felülírja az aktuális állapotot, nem egyesíti.
Át lehet adni egy függvényt a frissítő függvénynek, ha az új állapot a korábbi függvénye:

// Állapot módosítása függvénnyel
const incrementCountFunction = () => {
  setCount(prevCount => prevCount + 1);
};

Fontos megjegyzések az állapot módosításakor:

Ne módosítsa közvetlenül az állapotot: Soha ne rendelje hozzá az új értéket a state tulajdonsághoz (pl. this.state.count = 5 vagy count = 5). A React nem fogja észrevenni ezt a változást, és a komponens nem fog újra renderelni.
Objektumok és tömbök módosítása: Az állapotban lévő objektumokat vagy tömböket mindig új másolatként kell létrehozni. A React a referenciákat hasonlítja össze, és ha a referencia nem változik, feltételezi, hogy az adatok nem változtak, és nem hajt végre újrarenderelést.

// Objektum módosítása osztálykomponensben
this.setState(prevState => ({
  user: {
    ...prevState.user, // Régi tulajdonságok másolása
    name: 'Új név' // Szükséges tulajdonság frissítése
  }
}));

// Tömb módosítása funkcionális komponensben
setItems(prevItems => [...prevItems, 'Új elem']); // Új elem hozzáadása

A setState aszinkron: Ha azt szeretné, hogy valami történjen, miután az állapot frissült és a komponens újra renderelődött, használja a setState második argumentumát (egy callback függvényt) vagy a useEffect hook-ot funkcionális komponensekben.

// Callback a `setState`-ben
this.setState({ count: this.state.count + 1 }, () => {
  console.log('Az állapot frissült!');
});

// `useEffect` az állapot változására való reagáláshoz
useEffect(() => {
  console.log('A count állapot megváltozott:', count);
}, [count]); // Függőség: a hook akkor fut, amikor a count változik

Metódusok összehasonlítása:

Jellemző	Osztálykomponens (`setState`)	Funkcionális komponens (`useState`)
Szintaxis	`this.setState(újÁllapot[, callback])`	`const [state, setState] = useState(kezdetiÁllapot)`
Egyesítés/Váltás	Egyesíti az új állapotot a meglévővel (shallow merge)	Felülírja a meglévő állapotot az újszerűvel
Aszinkron	Aszinkron	Aszinkron a handler-ekből való híváskor, de szinkron a React renderelési fázisában
Függőség a korábbi állapottól	Függvény átadása a `setState`-nek: `this.setState(prevState => ({...}))`	Függvény átadása a frissítési függvénynek: `setState(prev => ({...}))`

Hogyan lehet helyesen módosítani a komponensek állapotát a React-ben?