Повторное использование функции React.useCallback () в нескольких компонентах

Question

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

function MyComponent () {
  const dispatch = useDispatch()

  const updateThing = React.useCallback((thingId: string) => {
    dispatch(someActionCreator(thingId))
    someGlobalFunction(thingId)
  }, [dispatch])

  return (
    <View>
      <NestedComponent onUpdate={updateThing} />
    </View>
  )
}

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

const updateThing = React.useCallback(myFunction)

Однако у него есть зависимость dispatch, которую мне нужно передать и добавить в массив зависимостей.

Как я могу разбить эту функцию для повторного использования, одновременно получая прирост производительности от useCallback?

Answer 1

Вы можете написать собственный хук, например

export const useUpdateThinkg = () => {
  const dispatch = useDispatch()

  const updateThing = React.useCallback((thingId: string) => {
    dispatch(someActionCreator(thingId))
    someGlobalFunction(thingId)
  }, [dispatch])
  return { updateThing };
}

---

, а затем использовать его как

import { useUpdateThing } from 'path/to/updateThing'
function MyComponent () {
  const { updateThing} = useUpdateThing();

  return (
    <View>
      <NestedComponent onUpdate={updateThing} />
    </View>
  )
}