20 REACT ХУКОВ за 1 ЧАС + Custom хуки // React для начинающих

В этом крутом ролике я покажу около 20 React хуков для начинающих и не только.

Надеюсь Вы оцените мои старания, с Вас лайк и подписка.

Если есть какие то фишки по этой теме - дай знать в 💬 комментариях!

#React #ReactHooks #Hooks #RedGroup

В этом базовом ролике я постарался собрать самые полезные хуки (useState, useEffect, useRef...), также хуки для оптимизации (useMemo, useCallback), самое крутое что есть в этом ролике, это кастомные хуки - то, что применяется каждый день в реальных проектах (useFetch, useInput, useOutside, useCookie, useLocalStorage...) и немного хуков с TypeScript (useTypedSelector, useActions...). Разобрали необычные хуки (useLayoutEffect, useDebugValue). Видео получилось максимально базовым и обязательным к просмотру всем новичкам.

Тайм коды:
00:00 - Начало
00:50 - Установка проекта
04:09 - useState
09:07 - useState (TypeScript)
10:02 - useEffect
12:12 - useLayoutEffect + useRef
14:47 - useRef (TypeScript)
15:18 - useMemo
16:33 - useCallback
17:12 - useDebugValue
19:35 - useReducer
26:10 - useContext
30:00 - useAuth
30:43 - useSelector
32:31 - useTypedSelector
33:30 - useDispatch
34:18 - useActions
35:11 - useLocalStorage
40:53 - useOutside
43:01 - useInput
47:14 - useCookie
54:18 - useFetch
58:45 - Спасибо за просмотр!

👉 Смотрите видео ДО КОНЦА, подписывайтесь на канал, ставьте 👍 и колокольчик 🔔

[REDGroup]

Если есть какие то фишки по этой теме - дай знать в 💬 комментариях!


Тайм коды:
00:00 - Начало
00:50 - Установка проекта
04:09 - useState
09:07 - useState (TypeScript)
10:02 - useEffect
12:12 - useLayoutEffect + useRef
14:47 - useRef (TypeScript)
15:18 - useMemo
16:33 - useCallback
17:12 - useDebugValue
19:35 - useReducer
26:10 - useContext
30:00 - useAuth
30:43 - useSelector
32:31 - useTypedSelector
33:30 - useDispatch
34:18 - useActions
35:11 - useLocalStorage
40:53 - useOutside
43:01 - useInput
47:14 - useCookie
54:18 - useFetch
58:45 - Спасибо за просмотр!

[maxet]

понятное объяснение + автор осветил важные практические моменты

[danila_egorenko]

22:20 нужно добавить return i в блок с case 'UNCOMPLETE', как это сделано в 'COMPLETE'

[sichouli]

Класс! Действительно необычный метод преподавания. Это как раз мой стиль, мне нравится.

[avel]

Сразу спасибо на автомате, надо как раз сейчас хуки и редакс основы понять)

[elenbaking]

Класс! 👍 Очень подробно и понятно! ❤️❤️❤️

[elenbaking]

Браво! 👏👏👏У тебя безусловно талант! 👍👍👍

[h_worker]

Очень понравилось. Топ!🔥
Можешь тему подсказать?

[mihailkozlov]

Лайк поставился автоматически, можно приступать к просмотру 🙏✌️

[zergzerg]

А для чего пишем предыдущее значение в useState такой записью onChange={(e) => setData((prev) => ({ ...prev, name: e.target.value }))} ? Типа перезаписанный объект уже будет хранить и новое и старое значение?

[danilkin]

Спасибо большое за контент. То что нужно! лайк!

[bslv]

Был у меня проект где чуваки-индусики использовали встроенные SSR ReactA (не Nest.js) и useLayoutEffect помогает очень быстро до прорисовки компонентов получить данные и после полной прорисовки их можно намного быстрее зарендерить. Даже при получении обычных данных с сервера это прикольная фича.
Клиент жаловался на долгий рендер и благодаря этому хуку получилось рендерить быстрее.

[xPycx]

Спасибо тебе огромное за такой супер топовый контент🖤🤘🏿

[tylllehka]

а можешь пожалуйста разобрать на видео как запрашивать разрешения на использование координат/камеры/файлы
я не могу разобраться, делаю приложение погоды и понять не могу как получить место положение и разрешение использования

[kostyafrompiter]

Можно видео как типизировать редакс тулкит или МобX? Ладно реакт типизировать еще можно по доке, но стейт менеджеры типизировать очень тяжело.

[ramisvakazov]

Привет, спасибо за крутую подборку, некоторые реально упростили жизнь! Я бы только посоветовал немного исправить хук useActions, добавить в него useMemo вот так

export const useActions = () => {
const dispatch = useDispatch();

return useMemo(() => bindActionCreators(allActions, dispatch), [dispatch])
}

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

[JdImfhjLgdWRhn]

скажите название темы для vs code из видео

[semenburov]

Приветствую. Не знал где задать вопрос, но в этом ролике упоминалось про спонсорство и решил задать его тут.
Я пишу свое приложение и параллельно изучаю React Native и близкие к нему технологии, которые мне необходимы в моем приложении.
Информации много, изучаю, за что в т.ч. спасибо и твоим роликам.

Но пытаясь применить некоторые примеры, найденные в интернете или переделать их под нужды своего приложения периодически сталкиваюсь с проблемами, которые не удается решить быстро (отсутствие опыта все же дает о себе знать). Но решив все же задачу я понимаю, что ответ был на поверхности и вместо нескольких дней его можно было решить за 5-10 минут и заниматься уже другой частью функционала приложения.

Суть вопроса: возможно тебе будет интересен формат спонсорства, по которому с тобой можно будет связаться, проконсультироваться, продемонстрировать проблему в коде и совместно с тобой ее устранить? Скажем так "онлайн-поддержка в разработке".

[telepuzik]

Тут многим все нравится, но лично мне тяжело воспринимать автора. Очень скомкано и будто бы автор куда-то спешит. В итоге я хорошо понял из видео только те хуки, которые уже разбирал. Хотя я даже перематывал. Сомнительно.