useMemo

Question 1

useMemo

Answer 1

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])

[] - если оставим зависимость пустой, то означает, что useMemo запомнится один раз и будет возвращаться одно и то же значение.

Помогает React.memo - useMemo
Если используем внутри компоненты, фильтрацию, мапы, новый массив, то произойдет перерисовка, в результате чего может начать виснуть приложение, чтобы ее не было используем useMemo

import React, {useMemo, useState} from ‘react’;

export default {
title: ‘React.memo and UseMemo demo’
}

const NewMessageCounter = (props: {count: number}) => {
return <div>{props.count}</div>
}

const UsersSecret = (props: {users: Array<string>}) => {
console.log('USERS')
return <div>
{props.users.map((u, i) =>
<div key={i}>{u}</div>)}
</div>
}
const Users = React.memo(UsersSecret)
//
export const HelpReactMemo = () => {
console.log('HelpReactMemo')
const [counter, setCounter] = useState(0);
const [users, setUsers] = useState(['eliza', 'nick', 'esl']);</string>

const addUser = () => {
    const newUser = [...users, 'Sveta' + new Date().getTime()]
    setUsers(newUser)
}

const newUser = useMemo(() => {
    return users.filter(el => el.toLowerCase().indexOf('a') > -1)
}, [users])

return <>
    <button onClick={()=> {setCounter(counter+1)}}>+</button>
    <button onClick= {addUser} >add user</button>
    <NewMessageCounter count={counter}/>
    <Users users={newUser}/>
</> }