Тёмный

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

Михаил Непомнящий
Подписаться 68 тыс.
Просмотров 20 тыс.
50% 1

Опубликовано:

 

28 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 44   
@fo_ortuna1213
@fo_ortuna1213 Месяц назад
Приятный голос, и подача классная. Пока что нравится.
@ПавелГ-р1п
@ПавелГ-р1п 3 года назад
Спасибо добрый человек. Первое видео, в котором я понял не много принцип работы кастомных хуков, и как их создавать. И localstorage скорее всего скоро придётся работать. Я джун джуновский, месяц только поработал, стажируюсь.
@ri4an598
@ri4an598 Год назад
как дела спустя 2 года? Стало более понятно?)
@ПавелГ-р1п
@ПавелГ-р1п Год назад
@@ri4an598 Да, вполне понятно.
@ri4an598
@ri4an598 Год назад
@@ПавелГ-р1п кем щас работаешь? По скиллам мидл+- уже?)
@ПавелГ-р1п
@ПавелГ-р1п Год назад
@@ri4an598 Фронт. По скилам наверное близко к миндлу, но там ещё пахать и пахать)))
@Eugeney-i6l
@Eugeney-i6l 5 месяцев назад
@@ПавелГ-р1п неееет, я только джун
@phoenixbeard8543
@phoenixbeard8543 2 года назад
Красота! Спасибо
@user-888azim-97
@user-888azim-97 Год назад
Спасибо!
@valeramischenko9391
@valeramischenko9391 2 года назад
💣🔥💣 супер!!!
@ekaterinaskrynnik6932
@ekaterinaskrynnik6932 Год назад
Большое спасибо за ваш труд! Всё становится супер понятно после просмотра ваших уроков!
@aliicomua1369
@aliicomua1369 6 месяцев назад
Только начал ТС и возникла проблема с типизацией useToggle, оба значения из картежа обозначает boolean или void. Как исправить?
@ГеоргийНовицкий-ф3в
@ГеоргийНовицкий-ф3в 5 месяцев назад
function useToggle(inititalValue: boolean): [boolean, () => void]
@Eugeney-i6l
@Eugeney-i6l 5 месяцев назад
кидаешь в чатгпт он все делает
@ВладимирКолесников-э6д
Красивая реализация, доступное и грамотное объяснение. Спасибо!
@silverlira
@silverlira Год назад
А в тогле получается то что экспортится и то что используем в аппе никак по названиям не матчися?
@mishanep
@mishanep Год назад
Это тема деструктуризации массивов - там имена не важны, только порядок. В случае с деструктуризацией объекта - наоборот.
@magerrrr
@magerrrr 3 года назад
Миша, спасибо) я как раз написал месяц назад хук для работы с lacalstorage, но он не такой изящный получился что ли) взял на вооружение твой пример и очень за это благодарен!
@lentsd
@lentsd 3 года назад
Отличный видеоролик! Успехов! 🚀🚀🚀
@LeontinKremer
@LeontinKremer Год назад
Спасибо тебе добрый человек.
@bebeto123g
@bebeto123g 3 года назад
А useCallback не нужно использовать для addToOrder?
@mishanep
@mishanep 3 года назад
Это уже вопрос оптимизации. Его надо рассматривать отдельно. В текущем варианте он не требуется.
@Drezerak
@Drezerak Год назад
Какая запоминающаяся фамилия)))
@miniDRO4ER
@miniDRO4ER Год назад
хвала тебе, мне как раз по заданию из курса надо было localstorage запилить)))) у меня всё котелок не мог сообразить как сделать это, а тут твоё видео)))) всё получилось!!!! огромное спасибо
@ВладимирГугин-ш7щ
@ВладимирГугин-ш7щ 3 года назад
Подскажите пожалуйста, а что означают квадратные скобки в кастомном хуке? " return [value, toggle]; "
@mishanep
@mishanep 3 года назад
Возвращаемое значение это массив, где первым элементом передаётся значение, а вторым - функция.
@ВладимирГугин-ш7щ
@ВладимирГугин-ш7щ 3 года назад
@@mishanep Спасибо вам!
@VitalyKuznetsov-kd7wp
@VitalyKuznetsov-kd7wp Год назад
Спасибо за урок. Единственное толковое объяснение.
@ЕвгенийЕ-б9б
@ЕвгенийЕ-б9б 11 месяцев назад
Спасибо! Очень полезное видео👍
@AndranikArshakyan
@AndranikArshakyan 2 года назад
Лучший, спасибо, очень детально и понятно
@РомаЧирский
@РомаЧирский 3 года назад
Супер! Только Вы наверное все же забыли указать ссылку на codesandbox.
@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! ); }
@flogger2367
@flogger2367 Год назад
За счёт чего идёт перерисовка компоненты App..?.. Ведь как я понимаю по клику по бтн просто запускается функция useToggle.. А реакт рендерится когда меняется стейт или родительский компонент
@mishanep
@mishanep Год назад
Так useToggle содержит стейт, который меняется при клике. Следовательно и компонент, работающий с этим стейтом, рендерится.
@flogger2367
@flogger2367 Год назад
@@mishanep , спасибо за ответ и урок, как всегда топ...До это мне сказали, что кастомный хук нужно называть только с use, поэтому react тогда будет делать рирендер... )
@romanmed9035
@romanmed9035 2 года назад
сделал я хук для поиска, как у Вас показано. все работает. но потом я решил из него вынести обращение к серверу. сделал хук и для этого, а оно не стало работать, посокльку так нельзя пишет. спросил в телеграме и мне показали фразу в которой написано что хук не может быть вызван из хука. но в другом видео показано что хук вызывается из хука. но там несколько не так сделан обмен переменными. у Вас показано ретурн в квадратных скобках и прием так же. а там показан ретурн в фигурных, прием либо так же, либо просто присваивание переменной из хука. можете ли показать как хук из хука будет вызываться при Вашем способе создания?
@mishanep
@mishanep 2 года назад
Приветствую. Не совсем понимаю суть вопроса. Хук из хука - это, вероятно про реакт хуки, что из коробки идут. Там есть своя логика почему - хуки на верхнем уровне должны вызываться, не в колбеках, ни по условию, ни в цикле. А кастомные хуки чаще всего используют вместе с реакт хуками и часто с другими кастомными хуками. Вернуть же можно что угодно из хука.
@romanmed9035
@romanmed9035 2 года назад
@@mishanep спасибо за ответ. по поводу вернуть я уже нашел такое же в других местах. позже еще раз попробую вызвать один хук из другого, как будет время на эксперименты и постараюсь написать что получилось.
@СергейПетров-б4щ4ч
Спасибо!
@dimalukashenko4865
@dimalukashenko4865 2 года назад
Очень хороший урок
@yakut54
@yakut54 3 года назад
Спасибо! Помогло ))
@ЕвгенийЖ-н6м
@ЕвгенийЖ-н6м 3 года назад
Миша почему ты не отвечаешь на комментарии
@mishanep
@mishanep 3 года назад
Разве?
Далее
Witch changes monster hair color 👻🤣 #shorts
00:51
Новый вид животных Supertype
00:59
Просмотров 176 тыс.
Custom Hooks in React (Design Patterns)
12:56
Просмотров 45 тыс.
React-приложение на TypeScript
41:29
Просмотров 67 тыс.
Witch changes monster hair color 👻🤣 #shorts
00:51