React Custom Hooks

Более года назад Sophie Alpert и Dan Abramov представили одну из самых интересных новых функций в React - Hooks. Релиз 16.8 представил несколько альтернатив, которые можно использовать напрямую (например, useState, useEffect и некоторые другие), но также предоставил возможность создавать свои собственные хуки - Custom Hooks.

Custom Hooks

Предположим, ты хочешь создать приложение, которое отслеживает значение даже после обновления страницы. Это легко сделать, воспользовавшись localStorage браузера. Custom Hook для этого может выглядеть следующим образом:

import React, { useState, useEffect } from 'react';

function useLocalStorage = (key, initialValue) => {
  const [value, setValue] = useState(
    () => window.localStorage.getItem(key) || initialValue
  );

  useEffect(() => {
    window.localStorage.setItem(key, value);
  }, [key, value]);

  return [value, setValue];
};

Как и все предопределенные хуки в React, имя пользовательского хука всегда должно начинаться с фразы use, чтобы их можно было отличить от других понятий в приложении (помни: хуки не работают в классовых компонентах).

Если ты хочешь использовать хук useLocalStorage, то можешь легко сделать это следующим образом:

const [value, setValue] = useLocalStorage("day", 2);

value;         // day: 2
setValue(24);  // day: 15

Идея Custom Hook заключается в том, чтобы поддерживать повторное использование логики с отслеживанием состояния и абстрагировать реализацию чего-то часто используемого в приложении.

Популярные пользовательские хуки

• react-hook-form (useForm);
• react-use;
• useHooks.com;
• awesome-react-hooks:
• react-hooks.