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

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

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

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

import React, { useCallback } from 'react'

Этот хук полезен, когда у вас есть компонент с дочерним элементом, который часто повторно рендерится, и вы передаете ему обратный вызов:

import React, { useState, useCallback } from 'react'

const Counter = () => { const [count, setCount] = useState(0) const [otherCounter, setOtherCounter] = useState(0)

const increment = () => { setCount(count + 1) } const decrement = () => { setCount(count - 1) } const incrementOtherCounter = () => { setOtherCounter(otherCounter + 1) }

return ( <> Count: {count} <button onClick={increment}>+</button> <button onClick={decrement}>-</button> <button onClick={incrementOtherCounter}>incrementOtherCounter</button> </> ) }

ReactDOM.render(<Counter />, document.getElementById(‘app’))

Проблема здесь в том, что каждый раз, когда счетчик обновляется, все 3 функции создаются заново.

Вы можете визуализировать это, создав экземплярУстановить структуру данных, и добавив к нему каждую функцию. Зачем ставить? потому что он хранит только уникальные элементы, что в нашем случае означает разные (уникально созданные) функции.

import React, { useState, useCallback } from 'react'

const functionsCounter = new Set()

const Counter = () => { const [count, setCount] = useState(0) const [otherCounter, setOtherCounter] = useState(0)

const increment = () => { setCount(count + 1) } const decrement = () => { setCount(count - 1) } const incrementOtherCounter = () => { setOtherCounter(otherCounter + 1) }

functionsCounter.add(increment) functionsCounter.add(decrement) functionsCounter.add(incrementOtherCounter)

alert(functionsCounter)

return ( <> Count: {count} <button onClick={increment}>+</button> <button onClick={decrement}>-</button> <button onClick={incrementOtherCounter}>incrementOtherCounter</button> </> ) }

ReactDOM.render(<Counter />, document.getElementById(‘app’))

Если вы попробуете этот код, вы увидите, что предупреждение увеличивается на 3 за раз.

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

Если другое значение состояния не изменилось, трогать его не следует.

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

Если это проблема, вы можете использоватьuseCallback.

Вот как мы это делаем. Вместо:

const increment = (() => {
  setCount(count + 1)
})
const decrement = (() => {
  setCount(count - 1)
})
const incrementOtherCounter = (() => {
  setOtherCounter(otherCounter + 1)
})

Вы оборачиваете все эти звонки в:

const increment = useCallback(() => {
  setCount(count + 1)
}, [count])
const decrement = useCallback(() => {
  setCount(count - 1)
}, [count])
const incrementOtherCounter = useCallback(() => {
  setOtherCounter(otherCounter + 1)
}, [otherCounter])

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

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

Вы можете попробовать этот пример на Codepen:

См. ПероРеагировать на хук useCallbackАвтор: Флавио Коупс (@flaviocopes) наCodePen.

Tech Wiki Online!