Создайте свой собственный пользовательский хук в React

Что такое пользовательский хук в React?

Пользовательский хук — это такая же функция JavaScript, имя которой начинается с «use» и которая может вызывать другие хуки.

Давайте создадим новый пользовательский хук React

Итак, давайте создадим пользовательский хук для получения данных из API. Мы создадим хук «useLoremipsum» для генерации данных lorem ipsum. Традиционно мы поступим следующим образом:

function App() {
  const [loremipsum, setLoremipsum] = React.useState('');
  console.log(loremipsum)
    React.useEffect(() => {
        const fetchLoremipsum = async () => {
            axios.get(`https://baconipsum.com/api/?type=meat-and-filler&paras=20`)
            .then(res => {
                setLoremipsum(res.data);
            })
        }
        fetchLoremipsum();

    },[])

}

Теперь давайте сделаем то же самое с крючком «useLoremipsum»;
В нашем файле App.js измените код на:

function App() {
  const baconIpsum = useLoremipsum(2);
  console.log(baconIpsum);
}

Давайте создадим функцию «useLoremipsum», которая принимает аргумент в виде длины текста lorem-ipsum в новом файле «useLoremipsum.js».

import React from 'react';
import axios from 'axios';

function useLoremipsum(length) {
    const [loremipsum, setLoremipsum] = React.useState('');

    // Call the function whenever the "length" changes

    React.useEffect(() => {

        const fetchLoremipsum = async () => {

            // Note that we are passing "length" as the argument to "paras" in the URL

            axios.get(`https://baconipsum.com/api/?type=meat-and-filler&paras=${length}`, {
              "Content-Type": 'application/json',
            })
            .then(res => {
                setLoremipsum(res.data);
            })
        }

        fetchLoremipsum();

    },[length])

    // At last, return the data
    return loremipsum;
}

export default useLoremipsum

Итак, должен ли я называть свои пользовательские хуки, начинающиеся с «use»? Нет, но это хорошее соглашение о присвоении имен.
Будет ли приведенный выше код работать так же, как и традиционный подход? Да, но создание собственных Hooks позволяет извлечь логику компонента в функции многократного использования.

Заключение

Пользовательские Hooks обеспечивают гибкость совместного использования логики, которая раньше была невозможна в компонентах React. В следующий раз, когда вы будете работать над проектом React, постарайтесь найти случаи, когда пользовательский хук может скрыть сложную логику за простым интерфейсом или помочь распутать запутанный компонент. Счастливого кодинга!