The cleanest way I found is to use types.d.ts, since we're likely gonna need to type out more than just a useState and we can keep a lot of the code there for cleanliness:

// types.d.ts:
declare type State = string;
declare type SetState = (stateParam: State) => void;
declare type UseState = [State, SetState];

// component.jsx:
   * @type {UseState}
  const [state, setstate] = useState("");


The actual best solution to be found here is by using parentheses. Otherwise jsdoc does not seem to catch it:

const [authFormInput, setAuthFormInput] = useState(/** @type {AuthFormInput} */({..}));


You can try this:

/** @type {boolean} */
const initialState = false
const [isLoading, setIsLoading] = React.useState(initialState)


It would help:

     * @typedef {Boolean} LoadingState — documentation for isLoading
     * @description Additional doc
     * @typedef {Function} LoadingStateSetter — documentation for setIsLoading
     * @type {[LoadingState, LoadingStateSetter]} Loading
    const [isLoading, setIsLoading] = React.useState();

In this example we declare two additional types: LoadingState and LoadingStateSetter. Then we add some description for them and finally, we declare the Loading type for the result of React.useState()

You also can declare it in a more simple way like this:

      * @type {[Boolean, Function]} Loading
    const [isLoading, setIsLoading] = React.useState();

But I didn't find a way to add a description in this case.

I've checked the description of such way of documentation in VSCode

Related Query

More Query from same tag