React-də komponentlərin vəziyyətini düzgün şəkildə…

React-də vəziyyətin dəyişdirilməsi setState metodu ilə sinif komponentləri üçün və ya useState hook-u ilə funksional komponentlər üçün baş verir.

Sinif komponentləri:

// React-i idxal edirik
import React, { Component } from 'react';

// Sinif komponenti yaradırıq
class MyComponent extends Component {
  // Vəziyyəti ilkinləşdiririk
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  // Vəziyyəti dəyişdirmək üçün metod
  incrementCount = () => {
    // setState istifadə edirik
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Saya: {this.state.count}</p>
        <button onClick={this.incrementCount}>Artır</button>
      </div>
    );
  }
}

// Komponenti ixrac edirik
export default MyComponent;

setState asinxron işləyir.
setState yeni vəziyyəti mövcud ilə birləşdirir (shallow merge).
setState funksiyanı qəbul edə bilər ki, bu da əvvəlki vəziyyətə əsaslanan yeni vəziyyəti geri qaytarır:

// Funksiya istifadə edərək vəziyyəti dəyişdirmək
incrementCountFunction = () => {
  this.setState((prevState) => ({
    count: prevState.count + 1
  }));
};

Funksional komponentlər (useState ilə):

// React və useState-i idxal edirik
import React, { useState } from 'react';

// Funksional komponent yaradırıq
function MyFunctionComponent() {
  // Vəziyyəti useState ilə ilkinləşdiririk
  const [count, setCount] = useState(0); // [mövcud vəziyyət, yeniləmə funksiyası]

  // Vəziyyəti dəyişdirmək üçün funksiya
  const incrementCount = () => {
    // Funksiya istifadə edirik
    setCount(count + 1);
  };

  return (
    <div>
      <p>Saya: {count}</p>
      <button onClick={incrementCount}>Artır</button>
    </div>
  );
}

// Komponenti ixrac edirik
export default MyFunctionComponent;

useState iki elementli massiv qaytarır: cari vəziyyət və onu yeniləmək üçün funksiya.
useState-in qaytardığı yeniləmə funksiyası mövcud vəziyyəti əvəz edir, onu birləşdirmir.
Əgər yeni vəziyyət əvvəlki vəziyyətə bağlıdırsa, funksiyanı ötürmək olar:

// Vəziyyəti dəyişdirmək üçün funksiya
const incrementCountFunction = () => {
  setCount(prevCount => prevCount + 1);
};

Vəziyyətin dəyişdirilməsi zamanı vacib məqamlar:

Vəziyyəti birbaşa dəyişdirməyin: Heç vaxt state xüsusiyyətinə yeni dəyər təyin etməyin (this.state.count = 5 və ya count = 5). React bu dəyişiklikləri izləməyəcək və komponent yenidən render olunmayacaq.
Obyektlər və massivlər ilə dəyişiklik: Vəziyyətdə obyekt və ya massiv dəyişdirərkən, həmişə yeni nüsxələr yaradın. React referansları müqayisə edir və əgər referans dəyişməzsə, məlumatların dəyişmədiyini qəbul edir və yenidən render etmir.

// Sinif komponentində obyektin dəyişdirilməsi
this.setState(prevState => ({
  user: {
    ...prevState.user, // Köhnə xüsusiyyətləri kopyalayırıq
    name: 'Yeni ad' // Lazımi xüsusiyyəti yeniləyirik
  }
}));

// Funksional komponentdə massiv dəyişdirmək
setItems(prevItems => [...prevItems, 'Yeni element']); // Yeni element əlavə edirik

setState-in asinxronluğu: Əgər vəziyyət yeniləndikdən və komponent yenidən render olunduqdan sonra bir əməliyyat həyata keçirmək istəyirsinizsə, setState-in ikinci arqumenti (callback funksiyası) və ya funksional komponentlərdə useEffect hook-u istifadə edin.

// `setState`-də callback
this.setState({ count: this.state.count + 1 }, () => {
  console.log('Vəziyyət yeniləndi!');
});

// Vəziyyət dəyişikliklərinə reaksiya üçün `useEffect`
useEffect(() => {
  console.log('Count vəziyyəti dəyişdi:', count);
}, [count]); // Asılılıq: hook count dəyişdikdə işə düşəcək

Yöntemlərin müqayisəsi:

Xüsusiyyət	Sinif komponenti (`setState`)	Funkcional komponent (`useState`)
Sintaksis	`this.setState(yeniState[, callback])` metodu	`const [state, setState] = useState(başlangıçState)` hook-u
Birleştirme/Əvəz etmə	Yeni vəziyyəti mövcud ilə birləşdirir (shallow merge)	Mövcud vəziyyəti yeni ilə əvəz edir
Asinxron	Asinxron işləyir	Handler-lərdən çağırıldıqda asinxron, React-in render mərhələsində isə sinxron
Əvvəlki vəziyyətə bağlılıq	`this.setState(prevState => ({...}))` funksiyasını ötürürük	`setState(prev => ({...}))` funksiyasını ötürürük

React-də komponentlərin vəziyyətini düzgün şəkildə necə dəyişdirmək olar?