Знакомство с 5 самыми популярными хуками React. - UPROGER

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

@react_tg – react в телеграме!

1. useState

Это самый простой в использовании и наиболее часто используемый Hook в React. Он позволяет вам добавлять состояние к вашим функциональным компонентам. Это всё равно что

рецепт, который вы можете изменять и сохранять по ходу дела. Hook useState возвращает массив с двумя значениями, первое из которых является текущим состоянием, а второе – функцией для обновления состояния.

Пример:

const [count, setCount] = useState(0);

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

Пример использования: Распространённым вариантом использования useState является отслеживание пользовательских вводимых данных, например, в форме.

2. useEffect

Хук useEffect позволяет управлять различными сопутствующими действиями в функциональном компоненте или то, что называется “side effects” (побочные эффекты), например, извлечение данных, ручное изменение структуры DOM, использование таймеров, логгирование и т.д. Это всё равно что иметь су-шефа, который поможет вам с более утомительными задачами. Hook принимает два аргумента, первый из которых является функцией, содержащей ваш эффект, а второй – массивом зависимостей.

Получение данных из API или добавление / удаление событий – вот некоторые примеры использования useEffect.

Вот как мы можем использовать этот Hook для обновления заголовка документа на основе значения count:

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

const Counter = () => {
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};
export default Counter;

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

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

3. useContext

Хук useContext – сквозь пространство Чтобы передать какие-то данные в компонент, мы можем использовать props. Но есть и альтернативный способ – context. Если вы ранее его не использовали, то контекст позволяет передавать данные от родительского компонента к дочернему, минуя промежуточные.

Hook useContext упрощает использование контекстных данных в ваших компонентах. Это всё равно что иметь нож шеф-повара, позволяющий легко нарезать ингредиенты кубиками. Перехватчик принимает объект контекста в качестве аргумента и возвращает текущее значение контекста.

Распространённым вариантом использования useContext является передача данных вниз по дереву компонентов без необходимости передавать реквизиты вручную.

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

import React, { createContext, useContext, useState } from 'react';
const ThemeContext = createContext({
  theme: 'light',
  toggleTheme: () => {},
});

const ThemeToggler = () => {
  const { theme, toggleTheme } = useContext(ThemeContext);

return (
    <button onClick={toggleTheme}>
      Toggle to {theme === 'light' ? 'dark' : 'light'}
    </button>
  );
};
const Layout = ({ children }) => {
  const [theme, setTheme] = useState('light');
  const toggleTheme = () => {
    setTheme(theme === 'light' ? 'dark' : 'light');
  };
  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      <header>
        <ThemeToggler />
      </header>
      <main>{children}</main>
    </ThemeContext.Provider>
  );
};
const App = () => {
  const { theme } = useContext(ThemeContext);
  return (
    <div style={{ background: theme === 'light' ? 'white' : 'black', color: theme === 'light' ? 'black' : 'white' }}>
      <Layout>
        <p>This is some content.</p>
      </Layout>
    </div>
  );
};
export default App;

Компонент Layout оборачивает свои дочерние элементы ThemeContext.Provider и устанавливает состояние темы и функцию переключения в качестве значения. Компонент ThemeToggler использует useContext для доступа к теме и функции переключения из контекста. Компонент приложения также использует useContext для доступа к теме из контекста и установки её стиля на основе темы.

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

4. useReducer

Hook useReducer подобен книге рецептов, он позволяет вам управлять сложными переходами состояний. Перехватчик принимает функцию-редуктор и начальное состояние в качестве аргументов и возвращает массив с двумя значениями, первое из которых является текущим состоянием, а второе – функцией отправки.

Пример:

const [state, dispatch] = useReducer(reducer, initialState);

return (
  <div>
    <p>The count is {state.count}</p>
    <button onClick={() => dispatch({ type: 'increment' })}>
      Increment
    </button>
    <button onClick={() => dispatch({ type: 'decrement' })}>
      Decrement
    </button>
  </div>
);

Пример использования: Распространённым вариантом использования useReducer является централизованное и предсказуемое управление переходами состояний.

5. useCallback

useCallback возвращает сохраненную в памяти версию функции. Это означает, что он повторно отображает компонент только в том случае, если изменилась одна из его зависимостей. Это всё равно что иметь список покупок, гарантирующий, что вы покупаете только то, что вам нужно, и ничего больше. Перехватчик принимает функцию и массив зависимостей в качестве аргументов и возвращает сохранённую в памяти функцию.

Пример использования: Распространённым вариантом использования useCallback является оптимизация производительности за счёт предотвращения ненужных повторных отображений.

Допустим, у вас есть компонент, который отображает список элементов и соответствующее подробное представление для каждого элемента. Отображение подробного представления обходится дорого, поскольку оно выполняет сложные вычисления на основе выбранного элемента. Вы можете использовать useCallback для запоминания функции renderDetail, чтобы она повторно отображалась только при изменении выбранного элемента, а не при повторном отображении всего компонента.

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

const DetailView = ({ item }) => {
  // perform expensive computation
  return <div>{item.id} - {item.name}</div>;
};
const List = () => {
  const [selectedItem, setSelectedItem] = useState(null);
  const [items, setItems] = useState([
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' },
  ]);
  const renderDetail = useCallback(() => {
    if (!selectedItem) return null;
    return <DetailView item={selectedItem} />;
  }, [selectedItem]);
  return (
    <div>
      <ul>
        {items.map(item => (
          <li key={item.id} onClick={() => setSelectedItem(item)}>
            {item.name}
          </li>
        ))}
      </ul>
      {renderDetail()}
    </div>
  );
};
export default List;

В этом примере функция renderDetail создаётся повторно только при изменении SelectedItem, как указано в её массиве зависимостей. Это предотвращает ненужное выполнение дорогостоящих вычислений и приводит к повышению производительности компонента.

Эти пять Hooks формируют основу React и предоставляют разработчикам инструменты для создания мощных и динамичных приложений. Независимо от того, являетесь ли вы опытным разработчиком React или только начинаете, понимание этих хуков просто необходимо. Так что идите вперед и опробуйте их в своих собственных проектах.