Телеграмм чат группы javascript

Size: a a a

JavaScript.Ninja

2021 April 19

const [state, change] = useState({}); 
const [actions, changeActions] = useState([
  (state) => state
]); 


const cb = useMemo(
  () => (data) => actions.reduce((prev, f) => Object.assign({}, prev, f(data)), {}),
  [actions],
)

const changeState = useCallback(
  () => change(state => cb(state)),
  [change, cb],
)

источник

23:46пожаловаться #1

Arthur Irgashev in JavaScript.Ninja

вот тебе небольшой псевдокод с одного проекта (я, правда, не помню, так я его воспроизвёл или нет)

источник

23:47пожаловаться #2

Arthur Irgashev in JavaScript.Ninja

но суть короче в том, что при формировании коллбека у тебя может происходить какой-то набор операций

источник

23:48пожаловаться #3

Arthur Irgashev in JavaScript.Ninja

вот, так должно быть правильно, с useMemo

источник

23:48пожаловаться #4

Arthur Irgashev in JavaScript.Ninja

если у тебя actions будет много, то при формировании редьюсера итогового (cb который) у тебя тоже может уйти какое-то время. код с редьюсом самый простой, но там может быть что-то более хитрое и сложное

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

источник

23:49пожаловаться #5

Yuri Strelets in JavaScript.Ninja

если взять пример выше

const cb = useCallback(() => {}, [])

return <Comp cb={cb} />

внутри Comp есть затратные вычисления, и если его обернуть в мемо то cb БЕЗ useCallback каждый раз при ререндере текущего компонента будет вызывать ререндер Comp

источник

23:50пожаловаться #6

Arthur Irgashev in JavaScript.Ninja

я уже сам чутка запутался, но он вроде спрашивал про тот компонент, к-ый содержит сам useMemo )

источник

23:52пожаловаться #7

Arthur Irgashev in JavaScript.Ninja

> Но не понимаю, как мемоизация самой функции через useMemo влияет на выполнение затратных вычислений в теле этой функции

в теле этой функции - это та, которая внутри useMemo ?

источник

23:52пожаловаться #8

Anton Kalodzich in JavaScript.Ninja

Это я сам перепутал

источник

23:53пожаловаться #9

Anton Kalodzich in JavaScript.Ninja

Там имелся ввиду useCallback

источник

23:53пожаловаться #10

Yuri Strelets in JavaScript.Ninja

ааа, ну именно тому компоненту он вряд ли поможет если в useCallback заворачивается хендлер для дочернего компонента

источник

23:53пожаловаться #11

Arthur Irgashev in JavaScript.Ninja

короче, вот эти ваши оптимизации в час ночи обсуждать .. )))

источник

23:53пожаловаться #12

Yuri Strelets in JavaScript.Ninja

бери выше, вот этот ваш реакт 😂

источник

23:54пожаловаться #13

Arthur Irgashev in JavaScript.Ninja

пожалуй, откланяюсь. всем доброй ночи %)
если что, то можем продолжить завтра ))

источник

23:54пожаловаться #14

Arthur Irgashev in JavaScript.Ninja

да-да, так будет правильнее )

источник

23:54пожаловаться #15

Anton Kalodzich in JavaScript.Ninja

Да, получается useCallback нужен, если функция передается в компонент с memo/SCU или попадает в зависимости useMemo/useEffect и подобные

источник

23:54пожаловаться #16

Anton Kalodzich in JavaScript.Ninja

Но тогда опять получается, что в реакте проблемы с сокрытием в компонентах :)

источник

23:55пожаловаться #17

Yuri Strelets in JavaScript.Ninja

угу, есть еще контекст например ))

источник

23:56пожаловаться #18

Arthur Irgashev in JavaScript.Ninja

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

источник

23:56пожаловаться #19

Arthur Irgashev in JavaScript.Ninja

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

источник

23:56пожаловаться #20