Почему я не использую хук useReducer? | React Hooks

[@роматарасов-о8л]

Аюб, ты освящаешь очень много жизненных проблем в React, формат мне очень нравится, продолжай!!!

[@ayub_begimkulov]

Спасибо за фидбэк!

[@deantek]

на моей памяти использовал useReducer раза 2 за 2 года работы, очень понравилось видео, спасибо

[@ayub_begimkulov]

спасибо за фидбэк!

[@harrisonwinston2850]

Привет, хотел бы от тебя увидеть видео про веб-сокеты, тема не особо популярная, но лично мне интересна. Спасибо.

[@nafanya3733]

спасибо большое, очень полезную инфу освещаешь)

[@ayub_begimkulov]

Рад помочь!

[@2difficult2do]

Лайк, посмотрел, хорошее и подробное разъяснение. 👍

[@ayub_begimkulov]

Спасибо за фидбэк!

[@artyomtaranenko2267]

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

[@МарияЧерешня-у2й]

Полный вперёд! 🎉

[@ayub_begimkulov]

Спасибо!

[@hrustalevdev]

Аюб, привет. Какой смысл завязываться на useReducer, если то же самое можено сделать вокруг useState? ```ts import { produce } from 'immer'; import { useMemo, useRef, useState } from 'react'; type WithoutFirstParam = Params extends readonly [unknown, ...infer Rest] ? Rest : []; type AnyAction = { type: string; payload?: any }; type Method = (state: S, payload?: any) => void; type BoundMethod = (...args: WithoutFirstParam) => void; type MethodsMap = Record; type BoundMethodsMap = { [K in keyof M]: BoundMethod }; type Options = { initialState: S; methods: M }; type VariantOptions = Options | (() => Options); export function useModel(options: VariantOptions): [S, BoundMethodsMap] { const initialOptions = useRef(typeof options === 'function' ? options() : options).current; // Используем useState вместо useReducer const [state, setState] = useState(initialOptions.initialState); const methods = useMemo( () => Object.keys(initialOptions.methods).reduce( (_methods, methodName) => { _methods[methodName] = (payload?: unknown) => { setState(prevState => produce(prevState, (draft: S) => initialOptions.methods[methodName](draft, payload)) ); }; return _methods; }, {} as Record, ), [initialOptions], ); return [state, methods as BoundMethodsMap]; } ```

[@oWeRQ666]

14:06 как получить такие комментарии с выводом типа?

[@ayub_begimkulov]

vscode-twoslash-queries

[@mercury_2379]

комментарий в поддержку канала

[@ayub_begimkulov]

Спасибо!

[@rudinandrey]

тема интересная ) но как же ты разгоняешься именно в разговоре, про пример undo/redo рассказывал с нормальной скоростью, потом к useReducer перешел и тра татататата ) как автомат. прикольно выглядит просто.Не в укор, понимаю что информации много и хочется уложить в минимальное время. просто особенность заметил ;) инфа полезная очень, спасибо.

[@ayub_begimkulov]

хахаха, да, есть такое.

[@dr.livesey5157]

Лучший

[@ayub_begimkulov]

Спасибо!

[@роматарасов-о8л]

очень часто встречаюсь с проблемами из видео было очень интересно посмотреть как useReducer/useMethods их решает ( я в таких случаях просто использовал стейт менеджер(mobx) но если состояние с которым мы хотим работать локальное(каждый инстанс этого компонента имеет свой личный стейт) приходится использовать костыльный хук который создаёт инстанс mobx-стора при маунте компонента такой костыль я мог позволить себе поскольку я был 1 в команде и у меня был mobx сейчас когда у меня редакс и команда перед которой надо объяснять каждый костыль альтернативные способы становятся ещё актуальнее... )

[@ayub_begimkulov]

Ну, если в проект везде mobx, то можно и к такому решению прийти. Главное, чтобы везде консистентность была.

[@magnific8930]

👍👍👍

[@СергейГолованов-й7я]

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

[@romandeveloper7720]

Не совсем понял, как можно useEvent'ом решить проблему во втором примере? Можешь показать, пожалуйста?

[@ayub_begimkulov]

Просто завернуть колбэк в хук useEvent, и все) Я подробнее о нем рассказываю в отдельном видео - можешь посмотреть.

[@romandeveloper7720]

@@ayub_begimkulov , ах, точно, тупанул)

[@malsagov6331]

👍👍👍👍

[@oWeRQ666]

Пример с undo как-то слишком притянут за уши, если состояние нельзя описать одним значением - значит надо их объединить и хранить в одном стейте, и уже это решение сравнивать с редьюсером, вообще добавление редьюсера в ядро реакта вызывает вопросы, можно же и через стейт использовать редьюсер dispatch = action => setState(state => reducer(state, action))

[@ayub_begimkulov]

Хммм, а как ты считаешь надо это все писать? Да, хук useReducer - заменяем, я как-то писал про это пост в ТГ. Но у него по мимо объединения стейта есть и другая фича - это то, что сам редьюсер не надо мемоизировать и dispatch имеет всегда одну и ту же ссылку. Уже с такими условиями его реализовать было бы чуть сложнее, чем ты показываешь) Касательно сравнения тоже не согласен, никто не пишет несколько стейтов в один объект просто так. Обычно если так и делают, то только из-за неудобство хука useReducer.

[@oWeRQ666]

​@@ayub_begimkulov обернуть dispatch в useCallback, редьюсер - чистая функция, не вижу ни одной причины ее заносить в компонент, опять же это решаемо и всегда можно сделать кастомный хук, вопрос в том нафига это в ядре, где код хуков мягко говоря запутанный, имхо, в ядре должны быть только базовые.

[@albertrain7093]

я узнал что-то новое. я не знаю реакт )))

[@ayub_begimkulov]

Вех живи - век учись!

[@МихаилВолков-й6м]

не могу понять, зачем столько лепить useCallback() и useMemo()? Неужели они здесь оправданы?

[@ayub_begimkulov]

А можешь раскрыть мысль? Где именно? Тут просто есть особенность в том, что большинство примеров в данном видео - переиспользуемые хуки. И ты не знаешь, где они будут использоваться. Поэтому нужно все мемоизировать.

[@АлександрКос-р3щ]

тараторщик, блин

[@jamjam3337]

👏👍