Search code examples
reactjsreact-hooksjsdoc

How to document useCallback with jsdoc?

If I have my arrow function, wrapped in a React useCallback, how am I supposed to document it with JSDoc?

const floopPig = useCallback((pigKey, floopCost) => {
  const pigAbility = pigs[pigKey];
  if (pigAbility.floopCost < magicPoints) {
    return pigAbility.activate()
  } else {
    throw new Error('Not enough magic points');
  }
}, [pigs, magicPoints])

I have been trying this in VSCode, but I haven't gotten anything to show up on hover over:

/**
 * Floops a pig
 * @callback
 * @param {number} pigKey unique key for each pig
 * @param {number} floopCost how much the ability costs to activate
 */

I think I've followed the documentation for @callback correctly. But based on this answer perhaps I'm using @callback for the wrong purpose?

How am I supposed to document this?

Solution

  • I've had success documenting the callback function itself.

    const getNewToken = useCallback(
    /**
     * Requests a token, either by the normal flow or with a refresh token
     * @param {URLSearchParams} axiosBody The body of the axios request
     */
    async (axiosBody) => {
        //Function
    }, [myVar]);

    Lower in the code, I can see intellisense working its magic when I call my function. I'm not 100% sure this is the best answer, but this is the best answer I've found Intellisense screenshot