Как использовать React.memo и useCallback

В этой статье расскажу о том когда и как использовать React.memo и хук useCallback. После этой статьи поймете в каких случаях используют useCallback. Узнаете как работает между собой React.Memo и useCallback.

Кратко о React.memo и useCallback

React.Memo — компонент высшего порядка. Похож на React.PureComponent, но предназначен для функциональных компонентов.

Компонент высшего порядка — функция принимает дочерний компонент и параметры, и затем создаёт контейнер поверх дочернего компонента.

React.PureComponent — схож с React.Component, но единственная разница в методе shouldComponentUpdate.

useCallback — хук вернёт мемоизированную функцию колбэка, который изменяется только, если изменяются значения из зависимостей.

Примеры использования

Base — не использует React.Memo. Компонент будет рендерится каждый раз

let count = 0
export default function Base({ action }) {
.log(`${++count} Base component`)
return <h3 onClick={action}>Base</h3>
}

Memo — использует React.Memo. Компонент будет рендерится каждый раз когда меняются свойства

let count = 0
export default React.memo(function Memo({ action }) {
.log(`${++count} Memo component`)
return <h3 onClick={action}>Memo</h3>
})

NoUseCallback — не используем useCallback. Рендерится Base и Memo компоненты каждый раз

export default function NoUseCallback() {
const [a, setA] = useState('')
const [b, setB] = useState('')

useEffect(() => {
setTimeout(() => {
.log('change value not related to action')
setA('a')
}, 1000)

setTimeout(() => {
.log('change value related to action')
setB('b')
}, 3000)
}, [])

const action = () => .log(b)
return (
<>
<Base action={action} />
<Memo action={action} />
</>
);
}

Console:

1 Base component
1 Memo component
change value not related to action
2 Base component
2 Memo component
change value related to action
3 Base component
3 Memo component

UseCallback — используем useCallback метод. Рендерится Base 3 и Memo 2 раза

export default function UseCallback() {
const [a, setA] = useState('')
const [b, setB] = useState('')

useEffect(() => {
setTimeout(() => {
.log('change value not related to action')
setA('a')
}, 1000)

setTimeout(() => {
.log('change value related to action')
setB('b')
}, 3000)
}, [])

const action = useCallback(() => {
.log(b)
}, [b]);

return (
<>
<Memo action={action} />
<Base action={action} />
</>
);
}

Console:

1 Memo component
1 Base component
change value not related to action
2 Base component
change value related to action
2 Memo component
3 Base component

Заключение

Используем React.Memo когда хотим что бы компонент ререндерился когда меняются props или конкретные props.
Оборачиваем функцию в useCallback когда передаем другим компонентам или когда используются внешние переменные

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store