Что такое состояние в Реакте?

Состояние компонента (state) — это объект, в котором хранится необходимая компоненту информация, пока он существует. Важно, что состояние контролируется только самим компонентом, другие компоненты не имеют к нему доступа, если только не передать данные из состояния через пропы дочерним компонентам. Состояние может меняться, при этом происходит перерисовка компонента.

Состояние в компоненте не является обязательным, если в компоненте используется состояние, то он называется Statefull Component, если же хранить состояние в проекте не требуется — Stateless Component. В большом проекте рекомендуется снижать количество Statefull Component к минимуму.

Пример компонента, хранящего состояние:

class Login extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isLogin: false
        };
    }
    
    render() {
        return this.state.isLogin
            ? <div className="message">Приветствуем Вас на сайте!</div>
            : <button>Войти</button>
    }
}

Начальное состояние компонента задается в конструкторе (задание начального состояния возможно и без конструктора в более коротком синтаксисе). Менять состояние нужно при помощи метода setState, чтобы после изменения состояния выполнилась перерисовка компонента.

Рекомендуемая структура состояния

При создании состояния нужно придерживаться принципа, что оно должно быть максимально простым: чем меньше уровней вложенности, тем удобнее с ним работать.

Пример неоптимальной структуры состояния:

{
    categories: [
        {
            id: 1,
            name: 'Бакалея',
            products: []
        },
        {
            id: 2,
            name: 'Овощи и фрукты',
            products: [
                { id: 1, name: 'Апельсин' },
                { id: 2, name: 'Морковь' },
            ]
        },
        {
            id: 3,
            name: 'Мясо',
            products: [
                { id: 3, name: 'Корейка' },
            ]
        }
    ]
}

Пример оптимальной структуры:

{
    categories: [
        { id: 1, name: 'Бакалея' },
        { id: 2, name: 'Овощи и фрукты' },
        { id: 3, name: 'Мясо' },
    ],
    products: [
        { id: 1, name: 'Апельсин', categoryId: 2 },
        { id: 2, name: 'Морковь', categoryId: 2 },
        { id: 3, name: 'Корейка', categoryId: 3 },
    ]
}