Было бы не плохо рассказать фишки (как было в одном твоём видосе про собес), где и как правильно юзать мемоизацию. Я, честно сказать, сам порой теряюсь где надо и нет, поэтому сначала пишу код без неё, если где-то прям очевидно вылазит, то добавляю
тема интересная ) но как же ты разгоняешься именно в разговоре, про пример undo/redo рассказывал с нормальной скоростью, потом к useReducer перешел и тра татататата ) как автомат. прикольно выглядит просто.Не в укор, понимаю что информации много и хочется уложить в минимальное время. просто особенность заметил ;) инфа полезная очень, спасибо.
очень часто встречаюсь с проблемами из видео было очень интересно посмотреть как useReducer/useMethods их решает ( я в таких случаях просто использовал стейт менеджер(mobx) но если состояние с которым мы хотим работать локальное(каждый инстанс этого компонента имеет свой личный стейт) приходится использовать костыльный хук который создаёт инстанс mobx-стора при маунте компонента такой костыль я мог позволить себе поскольку я был 1 в команде и у меня был mobx сейчас когда у меня редакс и команда перед которой надо объяснять каждый костыль альтернативные способы становятся ещё актуальнее... )
Пример с undo как-то слишком притянут за уши, если состояние нельзя описать одним значением - значит надо их объединить и хранить в одном стейте, и уже это решение сравнивать с редьюсером, вообще добавление редьюсера в ядро реакта вызывает вопросы, можно же и через стейт использовать редьюсер dispatch = action => setState(state => reducer(state, action))
Хммм, а как ты считаешь надо это все писать? Да, хук useReducer - заменяем, я как-то писал про это пост в ТГ. Но у него по мимо объединения стейта есть и другая фича - это то, что сам редьюсер не надо мемоизировать и dispatch имеет всегда одну и ту же ссылку. Уже с такими условиями его реализовать было бы чуть сложнее, чем ты показываешь) Касательно сравнения тоже не согласен, никто не пишет несколько стейтов в один объект просто так. Обычно если так и делают, то только из-за неудобство хука useReducer.
@@ayub_begimkulov обернуть dispatch в useCallback, редьюсер - чистая функция, не вижу ни одной причины ее заносить в компонент, опять же это решаемо и всегда можно сделать кастомный хук, вопрос в том нафига это в ядре, где код хуков мягко говоря запутанный, имхо, в ядре должны быть только базовые.
А можешь раскрыть мысль? Где именно? Тут просто есть особенность в том, что большинство примеров в данном видео - переиспользуемые хуки. И ты не знаешь, где они будут использоваться. Поэтому нужно все мемоизировать.
![Eminem - Fuel (feat. JID) [Official Lyric Video]](http://i.ytimg.com/vi/t5H_CewqpKA/mqdefault.jpg)
Аюб, ты освящаешь очень много жизненных проблем в React, формат мне очень нравится, продолжай!!!
Спасибо за фидбэк!
Привет, хотел бы от тебя увидеть видео про веб-сокеты, тема не особо популярная, но лично мне интересна.
Спасибо.
на моей памяти использовал useReducer раза 2 за 2 года работы, очень понравилось видео, спасибо
спасибо за фидбэк!
спасибо большое, очень полезную инфу освещаешь)
Рад помочь!
Лайк, посмотрел, хорошее и подробное разъяснение. 👍
Спасибо за фидбэк!
Было бы не плохо рассказать фишки (как было в одном твоём видосе про собес), где и как правильно юзать мемоизацию. Я, честно сказать, сам порой теряюсь где надо и нет, поэтому сначала пишу код без неё, если где-то прям очевидно вылазит, то добавляю
тема интересная ) но как же ты разгоняешься именно в разговоре, про пример undo/redo рассказывал с нормальной скоростью, потом к useReducer перешел и тра татататата ) как автомат. прикольно выглядит просто.Не в укор, понимаю что информации много и хочется уложить в минимальное время. просто особенность заметил ;) инфа полезная очень, спасибо.
хахаха, да, есть такое.
Полный вперёд! 🎉
Спасибо!
комментарий в поддержку канала
Спасибо!
Лучший
Спасибо!
очень часто встречаюсь с проблемами из видео
было очень интересно посмотреть как useReducer/useMethods их решает
(
я в таких случаях просто использовал стейт менеджер(mobx)
но если состояние с которым мы хотим работать локальное(каждый инстанс этого компонента имеет свой личный стейт)
приходится использовать костыльный хук который создаёт инстанс mobx-стора при маунте компонента
такой костыль я мог позволить себе поскольку я был 1 в команде и у меня был mobx
сейчас когда у меня редакс и команда перед которой надо объяснять каждый костыль
альтернативные способы становятся ещё актуальнее...
)
Ну, если в проект везде mobx, то можно и к такому решению прийти. Главное, чтобы везде консистентность была.
👍👍👍
мб расскажешь про нюансы и случаи использования useEffect, а то в новой доке реакта рекомендуют не злоупотреблять этим хуком
Аюб, привет. Какой смысл завязываться на 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];
}
```
👍👍👍👍
Не совсем понял, как можно useEvent'ом решить проблему во втором примере? Можешь показать, пожалуйста?
Просто завернуть колбэк в хук useEvent, и все) Я подробнее о нем рассказываю в отдельном видео - можешь посмотреть.
@@ayub_begimkulov , ах, точно, тупанул)
14:06 как получить такие комментарии с выводом типа?
vscode-twoslash-queries
я узнал что-то новое. я не знаю реакт )))
Вех живи - век учись!
Пример с undo как-то слишком притянут за уши, если состояние нельзя описать одним значением - значит надо их объединить и хранить в одном стейте, и уже это решение сравнивать с редьюсером, вообще добавление редьюсера в ядро реакта вызывает вопросы, можно же и через стейт использовать редьюсер dispatch = action => setState(state => reducer(state, action))
Хммм, а как ты считаешь надо это все писать? Да, хук useReducer - заменяем, я как-то писал про это пост в ТГ.
Но у него по мимо объединения стейта есть и другая фича - это то, что сам редьюсер не надо мемоизировать и dispatch имеет всегда одну и ту же ссылку. Уже с такими условиями его реализовать было бы чуть сложнее, чем ты показываешь)
Касательно сравнения тоже не согласен, никто не пишет несколько стейтов в один объект просто так. Обычно если так и делают, то только из-за неудобство хука useReducer.
@@ayub_begimkulov обернуть dispatch в useCallback, редьюсер - чистая функция, не вижу ни одной причины ее заносить в компонент, опять же это решаемо и всегда можно сделать кастомный хук, вопрос в том нафига это в ядре, где код хуков мягко говоря запутанный, имхо, в ядре должны быть только базовые.
не могу понять, зачем столько лепить useCallback() и useMemo()? Неужели они здесь оправданы?
А можешь раскрыть мысль? Где именно?
Тут просто есть особенность в том, что большинство примеров в данном видео - переиспользуемые хуки. И ты не знаешь, где они будут использоваться. Поэтому нужно все мемоизировать.
👏👍