Хуки, зависимости и устаревшие замыкания
Замыкание очень часто используется в функциональных компонентах, когда внутри компонента объявляется функция и в ней используются пропсы компонента:
function Counter({ count }) {
const logCount = () => {
// переменной count берется из внешнего окружения
console.log('count', count)
}
return <button onClick={logCount}>Show me the count</button>
}
Замыкание- это когда функция может взаимодействовать с окружающими переменными. Само замыкание создается каждый раз, когда создается функция, в момент создания функции.
В функциональных компонентах замыкание работает как надо, при каждом рендере компонента объявленные внутри компонента функции создаются заново и получают в свое окружение новые пропсы.
Чаще всего это не вызывает никаких проблем, однако, если понадобится мемоизация функции, то нужно будет оборачивать функцию в useCallback.
При работе с хуками рекомендуется использовать линтер react-hooks/exhaustive-deps, который подсвечивает неопределенные зависимости для хука useCallback. Если игнорировать список зависимостей useCallback, то используемые внутри него переменные компонента будут устаревшими.
tkdodo.eu/blog/ho…closures
