Понимание хука React useState

Прежде чем понять, что такое хук react useState, давайте сначала узнаем, что такое хук?

Что такое хук?
Хуки — это функция react, которая позволяет нам использовать состояние и другие возможности React без написания класса. Хуки React можно использовать только в функциональных компонентах.

Что такое хук useState?
useState — это хук react, который используется для добавления переменной состояния в наши компоненты. Это означает, что теперь мы можем объявлять переменные состояния в функциональных компонентах.

Синтаксис для объявления хука useState

const [state, setState] = useState('Initial Value');

Где использовать хук useState
Давайте разберемся в этом на примере. Допустим, мы работаем над меню гамбургера.

import React from 'react';

export const MyComponent = () => {
    // BAD ❌ - this way it won't work, We need to use useState hook in such situation
    let openHamburger = false;

    const toggle = () => {
        openHamburger = !openHamburger;
    }

    return (
        // ...
    )
}

Когда мы хотим изменить значение переменной, а затем использовать его, нам нужно использовать хук useState.

import React, { useState } from 'react';

export const MyComponent = () => {
    // GOOD ✅
    const [openHamburger, setOpenHamburger] = useState(false);

    const toggle = () => {
        setOpenHamburger(!openHamburger);
    }

    return (
        // ...
    )
}

Где мы можем использовать хук useState?

• Хук useState можно использовать только в функциональных компонентах, но не в компонентах класса.
• Мы хотим изменить значение переменной и после этого использовать ее.
• Каждый раз, когда выполняется компонент, хук useState также запускается в том же порядке, в котором он написан.
• Мы не можем помещать хуки внутри операторов if, или внутри каких-либо функций, или внутри циклов, или он не должен быть вложен в какие-либо вещи. Он должен присутствовать на верхнем уровне функциональных компонентов.

Как использовать хук useState?

• Функция, которую возвращает useState, используется для изменения состояния.
• Каждый раз, когда мы вызываем функцию обновления useState, она перерисовывает компоненты с обновленным значением состояния.
• Каждый раз, когда нам нужно использовать предыдущее значение для создания нового значения, нам нужно использовать версию функции установки состояния.

const [count, setCount] = useState(6);

const inc = () => {
  setCount(prevCount => prevCount + 1); // setCount(6 => 6 + 1)
}

const [state, setState] = useState(()=> 6); // by doing this way, whenever we update the state value, the component will not re-renders.

Надеюсь, этот блог поможет вам понять хук useState.