useState крюк предназначен для замены this.state в компонентах класса:
this.state = { foo: 1, bar: 2 };
становится либо
const [foo, setFoo] = useState(1);
const [bar, setBar] = useState(2);
или
const [state, setState] = useState({ foo: 1, bar: 2 });
Во втором случае следует учитывать, что setState не объединит свойства состояния с предыдущим состоянием , если это не будет сделано явно:
В отличие от метода setState, найденного в компонентах класса, useState делает
не автоматически объединять объекты обновления. Вы можете повторить это
поведение путем объединения формы средства обновления функций с распространением объекта
Синтаксис:
setState(prevState => ({...prevState, ...updatedValues});
Как объясняется в другом ответе, ограничение состоит в том, что порядок вызовов useState должен быть одинаковым при каждом вызове функционального компонента, потому что этот порядок является единственным способом для структуры идентифицировать состояния компонента.
Могут возникнуть проблемы, если по каким-либо причинам необходимо получить доступ к состоянию вне компонента, например отладка, тестирование или конкретные случаи. Как поясняет документация , предполагается, что состояние функционального компонента проверяется его побочными эффектами, а не утверждается непосредственно.