React уходит от React.memo в пользу useMemo?

Question

И то и другое React.memo и useMemohook позволяет оптимизировать производительность за счет сокращения пересчета и повторной отрисовки. Однако они определенно работают в том смысле, что React.memo используется для обертывания функционального компонента иuseMemohook можно использовать практически для любой функции, даже для чистых вычислений. Важнее,useMemo обычно вызывается от родительского к дочернему компоненту, а React.memo обычно вызывается при объявлении самого дочернего элемента.

Хотя оба имеют разные преимущества, одно преимущество React.memoв том, что его не нужно вызывать из каждого родительско-дочернего отношения. Однако с выпуском хуков кажется очевидным, что разработка React хочет перейти к функциональным компонентам, которые используют хуки для работы с состоянием, событиями побочных эффектов и другими эффектами. Хотя я не думаю, что у команды разработчиков React хватило бы смелости или пренебрежения своей пользовательской базой удалитьReact.memoВ любой момент в ближайшие 2 года я задаюсь вопросом, хотят ли они, чтобы конечные пользователи перестали использовать React.memo по стилистическим причинам. Так же, как они пассивно-агрессивно отошли от классовых компонентов в пользу функциональных компонентов с хуками.

При использовании функциональных компонентов с хуками происходит ли отход фреймворка React от React.memo? Не лучше ли привыкнуть к использованию версии с крючком, если кто-то хочет идти в ногу с лучшими практиками React в будущем?

Answer 1

Короткий ответ: нет.

Оба используются для оптимизации производительности в отношении уменьшения ненужного повторного рендеринга, но React.memo а также useMemo используются для двух разных сценариев...

React.memo - это HOOC, информирующий, что нужно выполнить поверхностное сравнение переданных реквизитов, чтобы определить, нужно ли выполнять повторный рендеринг.

https://reactjs.org/docs/react-api.html

Пример:

export const Component = React.memo(({name}) => `Hello ${name}`)

Здесь будет реагировать на неглубокое сравнение и будет выполнен повторный рендеринг, только если имя изменилось.

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

https://reactjs.org/docs/hooks-reference.html

Пример:

export const MyComponent = ({firstName, lastName, age}) => {

    const fullName = useMemo(() => `${firstName} ${lastName}`, [firstName, lastName]);

    return <Profile fullName={fullName} />

}

Вы можете взломать useMemo, чтобы сделать что-то вроде React.memo, но он не предназначен для такого использования.

useCallback Существует такжеuseCallback крючок, который часто используется с React.memo.

Если ваш родительский компонент передает обратный вызов дочернему элементу, заключенному в React.memo, рекомендуется создать обратный вызов, используя useCallback в противном случае дочерний элемент все равно будет повторно визуализироваться из-за повторного создания обратного вызова каждый раз, когда родительский повторный рендеринг.

useCallback также принимает массив зависимостей, например useMemo чтобы его можно было воссоздать при изменении зависимости.

https://reactjs.org/docs/hooks-reference.html

Пример:

export const MyComponent = ({firstName, lastName, age}) => {

    const handleClick = useCallback((e) => {
        e.preventDefault();
        // doSomething
    }, []);

    return <Profile onClick={handleClick} />

}

const Profile = React.memo((onClick) => (
    <button onClick={onClick)>Click me!</button>
));