Returning a function from custom hook with useQuery

I have an api to retrieve a list of todos, and I want to create a helper to retrieve their names.
I ended up doing this:

custom hook:

const useTodoName = () => {
  const { data: todos } = useQuery(...)
  const todoNameHelper = useCallback((todoId) => todos?.[todoId].name /* Helper is a little bit more complicated, and I don't want to duplicate it */, [todos])
  return todoNameHelper
}

const useTodoName = () => {
  const { data: todos } = useQuery(...)
  const todoNameHelper = useCallback((todoId) => todos?.[todoId].name /* Helper is a little bit more complicated, and I don't want to duplicate it */, [todos])
  return todoNameHelper
}

component:

const MyComp = (todoIds) => {
  const getTodoName = useTodoName()
  return (
    <div>
      {todoIds.map((id) => getTodoName(id))}
    </div>
  )
}

const MyComp = (todoIds) => {
  const getTodoName = useTodoName()
  return (
    <div>
      {todoIds.map((id) => getTodoName(id))}
    </div>
  )
}

My question is simple: is it OK to do that? If it isn't, why not?
Thanks

TanStack•3y ago•

1 reply

ill-bronze

Returning a function from custom hook with useQuery

I have an api to retrieve a list of todos, and I want to create a helper to retrieve their names.
I ended up doing this:

custom hook:

const useTodoName = () => {
  const { data: todos } = useQuery(...)
  const todoNameHelper = useCallback((todoId) => todos?.[todoId].name /* Helper is a little bit more complicated, and I don't want to duplicate it */, [todos])
  return todoNameHelper
}

const useTodoName = () => {
  const { data: todos } = useQuery(...)
  const todoNameHelper = useCallback((todoId) => todos?.[todoId].name /* Helper is a little bit more complicated, and I don't want to duplicate it */, [todos])
  return todoNameHelper
}

component:

const MyComp = (todoIds) => {
  const getTodoName = useTodoName()
  return (
    <div>
      {todoIds.map((id) => getTodoName(id))}
    </div>
  )
}

const MyComp = (todoIds) => {
  const getTodoName = useTodoName()
  return (
    <div>
      {todoIds.map((id) => getTodoName(id))}
    </div>
  )
}

My question is simple: is it OK to do that? If it isn't, why not?
Thanks

Returning a function from custom hook with useQuery

Similar Threads

Returning a function from custom hook with useQuery

Similar Threads

Similar Threads

Similar Threads