React представил хуки в версии 16.8, и вы можете реализовывать состояния или другие функции в функциональных компонентах без необходимости писать класс благодаря хукам…

Узнайте больше о хуках React: https://reactjs.org/docs/hooks-intro.html

Это здорово… Могу я создать свой собственный крючок?

Хорошие новости. Мой ответ: ДА… вы можете создать свой собственный хук и отделить логику компонента от пользовательского интерфейса…! но не стоит спешить и писать кастомные хуки ни к чему 😉

Давайте подробнее рассмотрим пользовательский хук:

const usePost = (postID) => {
  const [post, setPost] = useState(null);
  useEffect(() => {
    fetch(`${URL}/post/${postID}`)
    .then(response => response.json())
    .then(data => setPost(data));
  }, [postID]);
  return post;
}

В приведенном выше коде упоминается пользовательский хук с именем usePost(), который получает postID в качестве аргумента и возвращает данные извлеченного сообщения. Фактически, этот пользовательский хук помогает нам отделить сценарий получения нашего основного компонента и создать повторно используемое действие для нашего приложения…

Вы можете создать состояние, чтобы сохранить postID и передать его для обработки повторной выборки и повторного рендеринга для данных нового поста, учитывая, что useEffect этот хук получает новые идентификаторы и выполняет повторную выборку для каждого из них.

На самом деле, я упомянул основное преимущество пользовательских хуков, я имею в виду повторный рендеринг для каждого изменения состояния, и вы можете использовать его во многих случаях, и это полезно…

Мы можем создать другие пользовательские хуки с тем же сценарием, что и usePost, и использовать их везде, где это удобно… но учтите, что вам не нужны повторные рендеры где угодно, и это именно то время, когда вы должны решить, создавать пользовательский хук или простая вспомогательная функция ??!! 🤨

Давайте посмотрим на другой пример:

const useMobile = () => {
  const [isMobile, setIsMobile] = useState(null);
  useEffect(() => {
    let detect = /Android|iPhone|BlackBerry/i.test(navigator.userAgent);
    setIsMobile(detect);
  }, []);
  return isMobile;
}

Мы создали собственный хук с именем useMobile для обнаружения устройства клиента. На самом деле, код работает хорошо, и этот хук возвращает true / false, когда клиент использует мобильное устройство или нет… но есть проблема 🧐

Но… в чем тут проблема?!

На самом деле, устройство клиента не меняется во время просмотра нашего приложения, и если кто-то начнет с мобильного, это будет мобильное устройство, и они не смогут изменить свое устройство во время обычного просмотра веб-страниц…

Итак, лучше написать простую вспомогательную функцию, чем собственный хук:

function isMobileHelper() {
  let detect = /Android|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
  return detect;
}

Вы знаете, кастомные хуки или другие паттерны действительно потрясающие 👌, но сначала мы должны изучить их точный вариант использования и нигде их не использовать… если мы не будем использовать вещи для места костюма, мы будем ошибаться и привносить сложность…

Удачи.