Использование перехватчика useCallback
в React - это просто оболочка вокруг useMemo
, специально предназначенная для функций, чтобы избежать постоянного создания новых экземпляров функций в рамках компонентов. Мой вопрос возникает, когда вам нужно передать аргумент в обратный вызов, созданный из памятки.
Например, обратный вызов, созданный так ...
const Button: React.FunctionComponent = props => {
const onClick = React.useCallback(() => alert('Clicked!'), [])
return <button onClick={onClick}>{props.children}</button>
}
- простой пример запомненный обратный вызов и не требующий передачи внешних значений в него для выполнения sh своей работы. Тем не менее, если я хочу создать шаблонный обратный вызов c для типа функции React.Dipatch<React.SetStateAction>
, тогда потребуются аргументы ... например:
const Button: React.FunctionComponent = props => {
const [loading, setLoading] = React.useState(false)
const genericSetLoadingCb = React.useCallback((x: boolean) => () => setLoading(x), [])
return <button onClick={genericSetLoadingCb(!loading)}>{props.children}</button>
}
В моей голове это выглядит как точно так же, как делать следующее ...
const Button: React.FunctionComponent = props => {
const [loading, setLoading] = React.useState(false)
return <button onClick={() => setLoading(!loading)}>{props.children}</button>
}
, что позволило бы победить цель запоминания функции, потому что она все равно будет создавать новую функцию при каждом рендеринге, поскольку genericSetLoadingCb(false)
будет просто возвращать новая функция также для каждого рендера.
Правильно ли это понимание или шаблон, описанный с аргументами, все еще сохраняет преимущества запоминания?