Как использовать хук useMemo React

Узнайте, для чего полезен хук useMemo React и как с ним работать!

Посмотри мойВведение в React Hooksво-первых, если вы новичок в них.

Один хук React, который я иногда использую, этоuseMemo.

import React, { useMemo } from 'react'

Этот хук используется для создания мемоизированного значения.

Этот хук очень похож наuseCallback, разница в том, чтоuseCallbackвозвращает мемоизированный обратный вызов иuseMemoвозвращает мемоизированное значение, результат вызова этой функции. Вариант использования тоже другой.useCallbackиспользуется для обратных вызовов, передаваемых дочерним компонентам.

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

Используя этот хук, эта операция выполняется только один раз, затем значение будет сохранено в мемоизированном значении, и в следующий раз, когда вы захотите сослаться на него, вы получите его намного быстрее.

Вот как им пользоваться:

const memoizedValue = useMemo(() => expensiveOperation())

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

Если вам нужно передать аргументы, вам также необходимо передать их в массиве:

const memoizedValue = useMemo(() => expensiveOperation(param1, param2), [param1, param2])

Если один из параметров изменится, когда вы попытаетесь получить доступ к значению, значение, конечно, будет рассчитано без мемоизации.

Скачать мою бесплатнуюСправочник по React


Больше руководств по реакции: