Немного матчасти, стэйт это JS Объект который хранит в себе информацию о компоненте страницы в текущем ее состоянии. Изменять стэйт или состояние объекта можно только с помощью специальных функций, и как вы уже догадались одна из таких функций useState. useState это функция, она возвращает массив из двух элементов первый используется для чтения состояния объекта а второй для обновления или замены значения и прежде чем перейдем к примеру использования Давайте попробуем понять как все-таки работать useState и напишем сами подобную функцию только более примитивном виде.

[↓↓↓ Пропустить текст, смотреть видео ↓↓↓](#watch-now)

## Пишем свою функцию useState

В пустом JavaScript файлe создадим функцию. Как это сказано в определении эта функция, которая принимает один аргумент это стартовое значение для нашего стейта, и эта функция должна вернуть нам два объекта в массиве, первый это объект который будет хранить значение назовем ее стэйт и второй это функция которая будет обновлять значение нашего стейта пусть это будет updateState

    function useState(initialValue){
        return [state, updateState];
    }

Теперь давайте создадим эти переменные скажем что state будет объект - очень важно чтобы это был именно объект. Потому что это не будет работать с примитивными типами например числами или строками. Это работает в React потому что как я уже сказал мы будем делать примитивную версию стейта. К объекту добавим ключ value и передадим в него значение по-умолчанию.

И также у нас будет функция которая обновляет стэйт. Она будет принимать какое-то новое значение для нашего стейта и обновлять его.

    function useState(initialValue){
        сonst state = { value: initialValue };
        const updateState = newValue => state.value = newValue
        return [state, updateState];
    }

Таким образом мы получили `closure` или замыкание. То есть мы не можем поменять никак значение стейта и вообще мы не можем к нему никак достучаться пока мы не вызовем функцию. И эти два объекта они для нас скрыты (state и updateState) они есть внутри функции но за ее пределами нам к ним напрямую никак не достучатся.

## Настоящий useState из React

Если вы написали и поиграли с функцией выше, вы должны были понять как она работает. Подобным образом работает и хук useState в React. В него точно также можно передать один аргумент (как значение по-умолчанию) и возвращает он массив с двумя элементами (переменной в которой хранится состояние и функция которая меняет это состояние)

Зачем он нужен? Если обьяснять по-простому то страница в браузере это по сути статический HTML файл. Мы можем делать какие-то изменения с ним с помощью JS, но на чистом JS если вдуматься, это сделать не то чтобы сложно, просто для этого понадобиться сделать определенные шаги:
1. Запустить код каким-то действием (например onclick)
2. Найти желаемый тег
3. Обновить его состояние 

Если это нужно сделать для группы тегов тогда придется все делать в цикле, скорее всего.
React использует JSX который в последствии переводится в HTML, CSS и JS. Когда страница отрисована все данные с этой страницы храняться в JS объекте. Поэтому если мы используем переменную для какого-нибудь текста. Даже если мы поменяем ее значение при  клике это не отобразиться на странице. Для этого в React есть специальные функции для обносления состояния страници, или ее отдельных частей, как useState.

## Ислользуем useState в React

В данном примере показана кнопка при клике на которую будет меняться значение `count`

    import { useState } from 'react'

    function Counter(){
        const [count, setCount] = useState(0)

        const handleClick = _ => setCount(count + 1)

        return (
            <>
                <h2> Вы нажали на кнопку {count} раз</h2>
                <button> Нажал: {count} </button>
            </>)

    }

Как видите, не смотря на то что переменная состояния `count`  используется несколько раз. Нам достаточно один раз обновить ее используя `setCount` чтобы значение поменялось во всех местах

## Watch now

Лучше один раз увидеть чем 100 раз услышать. Больше примеров в видео :)


Что такое стэйт

как использовать useState ReactJS

Software development

Здесь вы узнаете про самый распространенный и довольно простой реакт хук useState и научитесь управлять состоянием страницы в React.

Примеры с объяснением useState и close в JS. Смотри видео и копируй код

OB Web Dev

OB Web Dev

ReactJS хуки - как работает useState в реакт js

ReactJS хуки - как работает useState в реакт js

Получить скидку на курс основы WebDev