Типизация хуков в React

Типизация хуков в React с TypeScript позволяет точно описывать данные, с которыми работают useRef, useContext и другие встроенные хуки. Это повышает надёжность кода и упрощает его поддержку.

Типизация useRef

Хук useRef принимает generic-параметр, указывающий тип значения, хранящегося в .current:

const inputRef = useRef<HTMLInputElement>(null);

Теперь при обращении к inputRef.current доступны только методы и свойства HTMLInputElement. Например:

inputRef.current?.focus(); // TypeScript знает, что focus существует

Если не указать тип, .current будет иметь тип any | null, и проверки типов не будет.

Для хранения обычных значений (не DOM-элементов) указывается нужный тип:

const renderCount = useRef<number>(0);
renderCount.current += 1;

Типизация useContext

При использовании контекста необходимо указать тип значения, которое передаётся через Provider:

interface Theme {
  primary: string;
  background: string;
}

const ThemeContext = createContext<Theme | null>(null);

// В компоненте:
const theme = useContext(ThemeContext); // тип Theme | null

Если не указать тип при создании контекста, TypeScript не сможет проверить корректность использования значений из контекста.

Примечание: если контекст всегда инициализирован (например, через createContext с дефолтным значением), можно не использовать | null.

Типизация useEffect и зависимостей

Сам useEffect не требует явной типизации — он работает с функцией без возвращаемого значения. Однако зависимости (deps) должны соответствовать реальным используемым переменным. TypeScript не проверяет содержимое массива зависимостей напрямую, но поскольку все переменные внутри эффекта уже имеют строгие типы (из useState, props и т.д.), это обеспечивает косвенную безопасность.

Общее правило

Все хуки, которые хранят или передают данные, должны иметь явно указанный тип. Это гарантирует:

  • корректную работу с DOM-элементами,
  • защиту от обращения к несуществующим свойствам,
  • чёткое понимание структуры данных при чтении кода.