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

Кастомные хуки в React-приложении позволяют вынести часть логики в отдельные функции для многократного использования. Под капотом, как правило, они используют обычные React-хуки, один или несколько, плюс добавляют к ним определенную функциональность.
▶ Пример из видео: codesandbox.io/s/relaxed-khay...
#react
_
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
/ mishanep
www.tinkoff.ru/rm/nepomnyasch...
paypal.me/mishanep

[@ekaterinaskrynnik6932]

Большое спасибо за ваш труд! Всё становится супер понятно после просмотра ваших уроков!

[@user-yy3fw5mv7s]

Красивая реализация, доступное и грамотное объяснение. Спасибо!

[@lentsd]

Отличный видеоролик! Успехов! 🚀🚀🚀

[@magerrrr]

Миша, спасибо) я как раз написал месяц назад хук для работы с lacalstorage, но он не такой изящный получился что ли) взял на вооружение твой пример и очень за это благодарен!

[@AndranikArshakyan]

Лучший, спасибо, очень детально и понятно

[@miniDRO4ER]

хвала тебе, мне как раз по заданию из курса надо было localstorage запилить)))) у меня всё котелок не мог сообразить как сделать это, а тут твоё видео)))) всё получилось!!!! огромное спасибо

[@user-fj8cu3nq9h]

Спасибо! Очень полезное видео👍

[@LeontinKremer]

Спасибо тебе добрый человек.

[@phoenixbeard8543]

Красота! Спасибо

[@yakut54]

Спасибо! Помогло ))

[@user-zn7uy9cy6h]

Спасибо добрый человек. Первое видео, в котором я понял не много принцип работы кастомных хуков, и как их создавать. И localstorage скорее всего скоро придётся работать. Я джун джуновский, месяц только поработал, стажируюсь.

[@ri4an598]

как дела спустя 2 года? Стало более понятно?)

[@user-zn7uy9cy6h]

@@ri4an598 Да, вполне понятно.

[@ri4an598]

@@user-zn7uy9cy6h кем щас работаешь? По скиллам мидл+- уже?)

[@user-zn7uy9cy6h]

@@ri4an598 Фронт. По скилам наверное близко к миндлу, но там ещё пахать и пахать)))

[@user-pc6bg2mr6g]

@@user-zn7uy9cy6h неееет, я только джун

[@dimalukashenko4865]

Очень хороший урок

[@valeramischenko9391]

💣🔥💣 супер!!!

[@user-ht4es2nw7k]

Спасибо!

[@Drezerak]

Какая запоминающаяся фамилия)))

[@user-rp8oy2kf5d]

Подскажите пожалуйста, а что означают квадратные скобки в кастомном хуке? " return [value, toggle]; "

[@mishanep]

Возвращаемое значение это массив, где первым элементом передаётся значение, а вторым - функция.

[@user-rp8oy2kf5d]

@@mishanep Спасибо вам!

[@user-nv7pp6jy9p]

Супер! Только Вы наверное все же забыли указать ссылку на codesandbox.

[@mishanep]

Исправился))

[@bebeto123g]

А useCallback не нужно использовать для addToOrder?

[@mishanep]

Это уже вопрос оптимизации. Его надо рассматривать отдельно. В текущем варианте он не требуется.

[@silverlira]

А в тогле получается то что экспортится и то что используем в аппе никак по названиям не матчися?

[@mishanep]

Это тема деструктуризации массивов - там имена не важны, только порядок. В случае с деструктуризацией объекта - наоборот.

[@flogger2367]

За счёт чего идёт перерисовка компоненты App..?.. Ведь как я понимаю по клику по бтн просто запускается функция useToggle.. А реакт рендерится когда меняется стейт или родительский компонент

[@mishanep]

Так useToggle содержит стейт, который меняется при клике. Следовательно и компонент, работающий с этим стейтом, рендерится.

[@flogger2367]

@@mishanep , спасибо за ответ и урок, как всегда топ...До это мне сказали, что кастомный хук нужно называть только с use, поэтому react тогда будет делать рирендер... )

[@aliicomua1369]

Только начал ТС и возникла проблема с типизацией useToggle, оба значения из картежа обозначает boolean или void. Как исправить?

[@user-qe3hr7ve3c]

function useToggle(inititalValue: boolean): [boolean, () => void]

[@user-pc6bg2mr6g]

кидаешь в чатгпт он все делает

[@VitalyKuznetsov-kd7wp]

Спасибо за урок. Единственное толковое объяснение.

[@romanmed9035]

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

[@mishanep]

Приветствую. Не совсем понимаю суть вопроса. Хук из хука - это, вероятно про реакт хуки, что из коробки идут. Там есть своя логика почему - хуки на верхнем уровне должны вызываться, не в колбеках, ни по условию, ни в цикле. А кастомные хуки чаще всего используют вместе с реакт хуками и часто с другими кастомными хуками. Вернуть же можно что угодно из хука.

[@romanmed9035]

@@mishanep спасибо за ответ. по поводу вернуть я уже нашел такое же в других местах. позже еще раз попробую вызвать один хук из другого, как будет время на эксперименты и постараюсь написать что получилось.

[@user-vv6jx8qg4v]

Миша почему ты не отвечаешь на комментарии

[@mishanep]

Разве?

[@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]

Спасибо!