Объяснение: React Hooks

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

Использование хуков

useState: один из самых распространенных хуков. useState возвращает начальное значение состояния и метод обновления для этого состояния. (функции метода обновления очень похожи на setState в компонентах класса)

import { useState } from 'react';

function Example() {
    // Declare a new state variable, which we'll call "count"
    const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Обратите внимание на строку, в которой мы объявили переменную count. Если бы мы не использовали хуки, наш код выглядел бы так:

import React, { Component } from 'react';

export class ReactWithoutHooks extends Component {
    constructor(props) {
        super(props;
        this.state = {
            count: 0
        }
    }
    
    render() {
        const { count} = this.state;
        return (
            <div className="App">
                <header className="App-header">
                    You clicked the button: { count} times.
                    <button
                        onClick={() => this.setState({ count: count+ 1 }) }
                    >
                        Click me!
                    </button>
                </header>
            </div>
        ) 
    }
}

Хуки позволяют нам определять/манипулировать состоянием, не заставляя нас менять много кода. Не говоря уже о том, что код намного чище и короче.

Если требуется несколько состояний, и они используются в разных местах вашей формы, хук useState будет чрезвычайно полезен.

const LoginForm = () => {
    const [login, setLogin] = useState({ email: '', password: '' });

    return (
        const { handleSubmit } = this.props;
        <div className="App">
            <header className="App-header">
                <form onSubmit={handleSubmit}>
                    <input value={ login.email } onChange={(e) => setLogin(prevState => { ...prevState, email: e.target.value }) } />
                    <input value={ login.password } onChange={(e) => setLogin(prevState => { ...prevState, password: e.target.value }) } />
                    <button type="submit">Submit</button>
                </form>
            </header>
        </div>
    )
}

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