🤔 Что делает setstate()?

Это метод в React, который используется для обновления состояния компонента. Когда состояние компонента изменяется, React запускает процесс обновления (рендеринга) компонента и всех его дочерних компонентов, чтобы отобразить актуальные данные.

🚩Основные концепции

🟠АсинхронностьВызов setState() может быть асинхронным. Это означает, что состояние компонента не обязательно будет обновлено сразу после вызова setState(). Вместо этого, React может сгруппировать несколько вызовов setState() для оптимизации производительности.
🟠Мерджинг состояния
При вызове setState() React сливает (мерджит) новый объект состояния с текущим состоянием. Это позволяет обновлять только те части состояния, которые изменились, без перезаписи всего состояния.

🚩Синтаксис

🟠Первый аргумент
Может быть объектом или функцией. Объект: Новый фрагмент состояния, который нужно объединить с текущим состоянием Функция: Функция, которая принимает текущее состояние и пропсы и возвращает новый фрагмент состояния.

🟠Второй аргумент (необязательный)
Колбэк-функция, которая будет вызвана после того, как состояние обновится и компонент перерисуется.

🚩Примеры использования

Объект как аргумент

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0
        };
    }
    incrementCount = () => {
        this.setState({ count: this.state.count + 1 });
    }
    render() {
        return (
            <div>
                <p>Count: {this.state.count}</p>
                <button onClick={this.incrementCount}>Increment</button>
            </div>
        );
    }
}

🟠Функция как аргумент
Использование функции вместо объекта рекомендуется, когда новое состояние зависит от предыдущего состояния, чтобы избежать потенциальных проблем с асинхронностью.

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0
        };
    }
    incrementCount = () => {
        this.setState((prevState, props) => ({
            count: prevState.count + 1
        }));
    }
    render() {
        return (
            <div>
                <p>Count: {this.state.count}</p>
                <button onClick={this.incrementCount}>Increment</button>
            </div>
        );
    }
}

🟠Колбэк-функция
Второй аргумент setState() — это колбэк, который вызывается после того, как состояние было обновлено и компонент перерисован.

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0
        };
    }
    incrementCount = () => {
        this.setState({ count: this.state.count + 1 }, () => {
            console.log('Состояние обновлено:', this.state.count);
        });
    }
    render() {
        return (
            <div>
                <p>Count: {this.state.count}</p>
                <button onClick={this.incrementCount}>Increment</button>
            </div>
        );
    }
}

🚩Важные замечания

🟠Не изменяйте состояние напрямую
Изменение состояния напрямую (например, this.state.count = 1) не вызовет перерисовку компонента. Всегда используйте setState().
🟠Batching (группировка)
React может группировать несколько вызовов setState() для повышения производительности. Поэтому состояние может быть обновлено асинхронно.
🟠Компоненты-классы и хуки
В функциональных компонентах для управления состоянием используются хуки, такие как useState. setState() используется только в компонентах-классах.

Ставь 👍 и забирай 📚 Базу знаний