useMemo Flashcards
useMemo
useMemo это перехват реакции, который позволяет вам кэшировать результат вычисления между повторными визуализациями.
На практике это значит следующее: когда происходит первичный рендер вашего компонента, то результат вычислений useMemo помещается в кэш, и при последующих рендерах, если соблюдены определенные условия, эти данные не вычисляются заново, а достаются из кэша.
Хук принимает два параметра:
- функцию, которая вычисляет значение, которое нужно кэшировать. Функция должна быть чистой, не принимать аргументов и обязательно возвращать значение.
- массив всех значений, которые используются в вычислении и могут меняться. Это могут быть свойства (props), состояния (state), переменные и функции, объявленые непосредственно внутри вашего компонента.
const filtredTasksData = useMemo(() => {
let filteredTask = tasks
if (filter === ‘Active’) {
filteredTask = tasks.filter (task => !task.isDone)
}
if (filter === ‘Completed’) {
filteredTask = tasks.filter (task => task.isDone)
}
return filteredTask
}, [filter])
