Ответ
React предоставляет несколько встроенных хуков:
useState - управление состоянием:
const [count, setCount] = useState(0);useEffect - side effects:
useEffect(() => {
document.title = `Count: ${count}`;
}, [count]);useContext - доступ к контексту:
const theme = useContext(ThemeContext);useReducer - сложное состояние:
const [state, dispatch] = useReducer(reducer, initialState);useMemo/useCallback - оптимизация:
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]);useRef - ссылки и мутируемые значения:
const inputRef = useRef(null);useLayoutEffect - аналогичен useEffect, но срабатывает синхронно после рендера, но до отрисовки в браузере.
Также есть хуки для работы с пользовательскими хуками и хуки для Suspense (экспериментальные).
Ответ 18+ 🔞
А, ну вот, смотри, опять эти React-хуки, блядь. Как будто без них жизнь кончилась, ёпта. Ну ладно, раз уж начал, давай по полочкам разложу, а то ты опять всё перепутаешь, как в прошлый раз.
useState — это типа твоя базовая таблетка от головной боли, когда нужно просто что-то запомнить и поменять. Всё просто, как три копейки:
const [count, setCount] = useState(0);Вот и всё, блядь. count — это твоё текущее число, а setCount — это такая волшебная пиздюлина, которая это число меняет. Вызвал setCount(5) — и всё, уже не ноль, а пять. Магия, сука.
useEffect — это уже для более хитрожопых дел. Ну, типа «сделай что-нибудь, когда что-нибудь изменится». Загрузить данные, подписаться на событие, заголовок вкладки поменять — вот это всё его епархия.
useEffect(() => {
document.title = `Count: ${count}`;
}, [count]);Смотри, сука, зависимость [count] — это важно. Если её забыть, он будет срабатывать на каждый чих, как идиот, и ты потом будешь гадать, почему всё лагает. А если оставить пустой массив [], то он выполнится один раз, при монтировании, и забудет, как страшный сон.
useContext — ну, это если тебе лень прокидывать пропсы через десять компонентов, как горячую картошку. Создал контекст, обернул всё в провайдера — и таскай данные откуда угодно, как из кармана.
const theme = useContext(ThemeContext);Взял и прочитал, что там в ThemeContext лежит. Главное, чтобы провайдер выше по дереву был, а то получишь undefined и будешь чесать репу.
useReducer — это для тех случаев, когда useState уже не справляется, и состояние твое стало похоже на швейцарский сыр — дырок дохуя. Вместо прямого изменения состояния ты посылаешь «действия» (actions), а редюсер решает, как на них реагировать.
const [state, dispatch] = useReducer(reducer, initialState);Вызвал dispatch({ type: 'INCREMENT' }) — и редюсер, этот тихий санитар, сам всё аккуратно обработает. Удобно для сложной логики, а то в setState уже мозг сломаешь.
useMemo / useCallback — это наши спасатели от лишних перерисовок, блядь. Когда компонент пересчитывается чаще, чем ты моргаешь, а тяжёлая функция внутри него каждый раз вызывается заново — вот тут они и нужны.
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]);useMemo запоминает результат вычислений, а useCallback — саму функцию. Массивы зависимостей — святое! Не накосячь там, а то оптимизация превратится в её полную противоположность, и будет тебе пиздец, а не скорость.
useRef — это такая палочка-выручалочка. Нужно получить ссылку на DOM-элемент? Пожалуйста. Нужно хранить мутируемое значение между рендерами, которое не вызывает перерисовку? Изи.
const inputRef = useRef(null);Просто создал реф, прицепил его к элементу через ref={inputRef} — и вот он, твой инпут, прямо в кармане. Можешь фокус ему ставить, значения читать — властвуй, блядь.
useLayoutEffect — брат-близнец useEffect, но более резкий. Он срабатывает синхронно после того, как React всё отрендерил в DOM, но до того, как браузер это всё нарисовал на экране. Нужен для измерений DOM или для действий, после которых не должно быть видимого «мигания». Используй осторожно, а то всю производительность в трубу вылетишь, ёпта.
Ну и есть ещё куча экспериментальных хуков для Suspense и прочей чертовщины, но туда лучше без бутылки не соваться, пока они официально не вышли. А то опять накосячишь, и придётся всё переделывать, в рот меня чих-пых!
Вот, вроде всё основное. Запомнил, блядь? А то опять будешь useEffect без зависимостей писать и удивляться, почему сервер API заDDOSил.