Нужно ли мемоизировать функцию, которая передается как параметр в хук

Question

const Component = () => {
    const fn = () => {};
    const fromHook = useSomething(fn);
}

хук:

const useSomething = callback => {
    const hookFn = useCallback(() => callback(), [callback])
    return hookFn;
};

нужно ли завернуть fn в компоненте в useCallback, чтобы избежать лишних рендеров или это не поможет и сделает только хуже ?

Answer 1

Нужно оборачивать. Каждый раз когда создается новая функция, это новый объект, даже если тело функции не изменилось, поэтому если ее не обернуть в useCallback, useCallback в хуке будет отдавать новую функцию на каждый ререндер родителя, что может вызвать ненужный ререндер детей или перезапуск других хуков, куда будет передаваться эта функция. Если же ее обернуть, на каждый ререндер будет отдаваться та же функция и не будет ненужного ререндера

как пример, в консоли видно, что после ререндера компонента, функция не поменялась https://codesandbox.io/s/still-river-t9hwm?file=/src/App.js

БЛОГ НА HUSL

Нужно ли мемоизировать функцию, которая передается как параметр в хук

Ответы (1 шт):