Кастомные React-Хуки, useToggle, useLocalStorage

  Рет қаралды 20,120

Михаил Непомнящий

Михаил Непомнящий

Күн бұрын

Пікірлер: 45
@ekaterinaskrynnik6932
@ekaterinaskrynnik6932 Жыл бұрын
Большое спасибо за ваш труд! Всё становится супер понятно после просмотра ваших уроков!
@mykolatokariev8260
@mykolatokariev8260 12 күн бұрын
Супер пример и супер объяснение 👍🏻
@ВладимирКолесников-э6д
@ВладимирКолесников-э6д 2 жыл бұрын
Красивая реализация, доступное и грамотное объяснение. Спасибо!
@fo_ortuna1213
@fo_ortuna1213 3 ай бұрын
Приятный голос, и подача классная. Пока что нравится.
@LeontinKremer
@LeontinKremer Жыл бұрын
Спасибо тебе добрый человек.
@ПавелГ-р1п
@ПавелГ-р1п 3 жыл бұрын
Спасибо добрый человек. Первое видео, в котором я понял не много принцип работы кастомных хуков, и как их создавать. И localstorage скорее всего скоро придётся работать. Я джун джуновский, месяц только поработал, стажируюсь.
@ri4an598
@ri4an598 Жыл бұрын
как дела спустя 2 года? Стало более понятно?)
@ПавелГ-р1п
@ПавелГ-р1п Жыл бұрын
@@ri4an598 Да, вполне понятно.
@ri4an598
@ri4an598 Жыл бұрын
@@ПавелГ-р1п кем щас работаешь? По скиллам мидл+- уже?)
@ПавелГ-р1п
@ПавелГ-р1п Жыл бұрын
@@ri4an598 Фронт. По скилам наверное близко к миндлу, но там ещё пахать и пахать)))
@Eugeney-i6l
@Eugeney-i6l 7 ай бұрын
@@ПавелГ-р1п неееет, я только джун
@ЕвгенийЕ-б9б
@ЕвгенийЕ-б9б Жыл бұрын
Спасибо! Очень полезное видео👍
@miniDRO4ER
@miniDRO4ER Жыл бұрын
хвала тебе, мне как раз по заданию из курса надо было localstorage запилить)))) у меня всё котелок не мог сообразить как сделать это, а тут твоё видео)))) всё получилось!!!! огромное спасибо
@phoenixbeard8543
@phoenixbeard8543 2 жыл бұрын
Красота! Спасибо
@lentsd
@lentsd 3 жыл бұрын
Отличный видеоролик! Успехов! 🚀🚀🚀
@magerrrr
@magerrrr 3 жыл бұрын
Миша, спасибо) я как раз написал месяц назад хук для работы с lacalstorage, но он не такой изящный получился что ли) взял на вооружение твой пример и очень за это благодарен!
@AndranikArshakyan
@AndranikArshakyan 2 жыл бұрын
Лучший, спасибо, очень детально и понятно
@dimalukashenko4865
@dimalukashenko4865 2 жыл бұрын
Очень хороший урок
@Drezerak
@Drezerak 2 жыл бұрын
Какая запоминающаяся фамилия)))
@СергейПетров-б4щ4ч
@СергейПетров-б4щ4ч 2 жыл бұрын
Спасибо!
@yakut54
@yakut54 3 жыл бұрын
Спасибо! Помогло ))
@valeramischenko9391
@valeramischenko9391 3 жыл бұрын
💣🔥💣 супер!!!
@VitalyKuznetsov-kd7wp
@VitalyKuznetsov-kd7wp Жыл бұрын
Спасибо за урок. Единственное толковое объяснение.
@silverlira
@silverlira Жыл бұрын
А в тогле получается то что экспортится и то что используем в аппе никак по названиям не матчися?
@mishanep
@mishanep Жыл бұрын
Это тема деструктуризации массивов - там имена не важны, только порядок. В случае с деструктуризацией объекта - наоборот.
@bebeto123g
@bebeto123g 3 жыл бұрын
А useCallback не нужно использовать для addToOrder?
@mishanep
@mishanep 3 жыл бұрын
Это уже вопрос оптимизации. Его надо рассматривать отдельно. В текущем варианте он не требуется.
@ВладимирГугин-ш7щ
@ВладимирГугин-ш7щ 3 жыл бұрын
Подскажите пожалуйста, а что означают квадратные скобки в кастомном хуке? " return [value, toggle]; "
@mishanep
@mishanep 3 жыл бұрын
Возвращаемое значение это массив, где первым элементом передаётся значение, а вторым - функция.
@ВладимирГугин-ш7щ
@ВладимирГугин-ш7щ 3 жыл бұрын
@@mishanep Спасибо вам!
@flogger2367
@flogger2367 Жыл бұрын
За счёт чего идёт перерисовка компоненты App..?.. Ведь как я понимаю по клику по бтн просто запускается функция useToggle.. А реакт рендерится когда меняется стейт или родительский компонент
@mishanep
@mishanep Жыл бұрын
Так useToggle содержит стейт, который меняется при клике. Следовательно и компонент, работающий с этим стейтом, рендерится.
@flogger2367
@flogger2367 Жыл бұрын
@@mishanep , спасибо за ответ и урок, как всегда топ...До это мне сказали, что кастомный хук нужно называть только с use, поэтому react тогда будет делать рирендер... )
@aliicomua1369
@aliicomua1369 8 ай бұрын
Только начал ТС и возникла проблема с типизацией useToggle, оба значения из картежа обозначает boolean или void. Как исправить?
@ГеоргийНовицкий-ф3в
@ГеоргийНовицкий-ф3в 7 ай бұрын
function useToggle(inititalValue: boolean): [boolean, () => void]
@Eugeney-i6l
@Eugeney-i6l 7 ай бұрын
кидаешь в чатгпт он все делает
@РомаЧирский
@РомаЧирский 3 жыл бұрын
Супер! Только Вы наверное все же забыли указать ссылку на codesandbox.
@mishanep
@mishanep 3 жыл бұрын
Исправился))
@romanmed9035
@romanmed9035 2 жыл бұрын
сделал я хук для поиска, как у Вас показано. все работает. но потом я решил из него вынести обращение к серверу. сделал хук и для этого, а оно не стало работать, посокльку так нельзя пишет. спросил в телеграме и мне показали фразу в которой написано что хук не может быть вызван из хука. но в другом видео показано что хук вызывается из хука. но там несколько не так сделан обмен переменными. у Вас показано ретурн в квадратных скобках и прием так же. а там показан ретурн в фигурных, прием либо так же, либо просто присваивание переменной из хука. можете ли показать как хук из хука будет вызываться при Вашем способе создания?
@mishanep
@mishanep 2 жыл бұрын
Приветствую. Не совсем понимаю суть вопроса. Хук из хука - это, вероятно про реакт хуки, что из коробки идут. Там есть своя логика почему - хуки на верхнем уровне должны вызываться, не в колбеках, ни по условию, ни в цикле. А кастомные хуки чаще всего используют вместе с реакт хуками и часто с другими кастомными хуками. Вернуть же можно что угодно из хука.
@romanmed9035
@romanmed9035 2 жыл бұрын
@@mishanep спасибо за ответ. по поводу вернуть я уже нашел такое же в других местах. позже еще раз попробую вызвать один хук из другого, как будет время на эксперименты и постараюсь написать что получилось.
@ЕвгенийЖ-н6м
@ЕвгенийЖ-н6м 3 жыл бұрын
Миша почему ты не отвечаешь на комментарии
@mishanep
@mishanep 3 жыл бұрын
Разве?
@velikorossnationalist4259
@velikorossnationalist4259 Жыл бұрын
Здравствуйте! Почему в локал сторадж не сохраняет значения после перезагрузки или обновления приложения? import React, { useEffect, useState } from "react"; import "./styles.css"; export default function App() { const [radioValue, setRadioValue] = useState(""); useEffect(() => { window.localStorage.setItem("language", radioValue); }, [radioValue]); useEffect(() => { setRadioValue(JSON.parse(window.localStorage.getItem("radioValue"))); }, []); function changeHandler(event) { setRadioValue(event.target.value); } return ( Hello! ); }
@user-888azim-97
@user-888azim-97 Жыл бұрын
Спасибо!
Новые хуки useTransition и useDeferredValue в React 18
22:17
Михаил Непомнящий
Рет қаралды 23 М.
React-приложение на TypeScript
41:29
Михаил Непомнящий
Рет қаралды 69 М.
The Singing Challenge #joker #Harriet Quinn
00:35
佐助与鸣人
Рет қаралды 47 МЛН
When u fight over the armrest
00:41
Adam W
Рет қаралды 32 МЛН
React Custom Hooks: useLocalStorage - Simply Explained!
10:27
Cosden Solutions
Рет қаралды 28 М.
Зачем на самом деле нужен хук useCallback
8:33
Михаил Непомнящий
Рет қаралды 44 М.
CSS-модули, SASS/SCSS и сброс стилей в React-приложении
18:28
Михаил Непомнящий
Рет қаралды 37 М.
Авторизация в React-приложении с Firebase и Redux-Toolkit
47:24
Михаил Непомнящий
Рет қаралды 88 М.
React Hooks - Полный Курс (Про Все Хуки в 1 видео!)
1:47:00
Владилен Минин
Рет қаралды 448 М.
Клиент Apollo GraphQL для React-приложений
44:11
Михаил Непомнящий
Рет қаралды 30 М.
Custom Hooks in React (Design Patterns)
12:56
Cosden Solutions
Рет қаралды 52 М.
#26 Погружаемся в useEffect - ReactJS Полный курс
26:55
Евгений Паромов | Front-end
Рет қаралды 9 М.