HOC React.memo

Question 1

HOC (React.memo)

Answer 1

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

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

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

const UsersSecret = (props: {users: Array<string>}) => {
return <div>
{props.users.map((u, i) =>
<div key={i}>{u}</div>)}
</div>
}
const Users = React.memo(UsersSecret)</string>

export const Example = () => {
const [counter, setCounter] = useState(0);
const [users, setUsers] = useState([‘eliza’, ‘nick’, ‘esl’]);

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

Так как перерисовываются пользователи, а они у нас не меняются, то необходимо использовать React.memo (Контрейнерная компонента не будет перезапускать UserSecret, если пропсы не изменились)