尝试设置状态时出现无效的挂钩调用错误

Question

I have a scenario where I am forced to call a trigger method to show a modal from two different places, one using a hotkey combination and another by clicking on a toolbar button. In order to do so I have the following code, where I call the triggerCustomLinkModal to set the state but then I am hit with the Invalid Hook call error .

import { useState, useCallback, useEffect } from "react"
import { Dialog } from "@blueprintjs/core"

const useLocalState = () => {
  const [isShown, setIsShown] = useState(false)

  const setState = useCallback((state) => {
    setIsShown(state)
  })

  const getState = useCallback(() => {
    return isShown
  })

  return {
    setState,
    getState
  }
}

export const CustomLinkModalUI = () => {
  const { getState } = useLocalState()

  return (
    <>
      <Dialog isOpen={getState()} />
    </>
  )
}

export const triggerCustomLinkModal = () => {
  const { setState } = useLocalState()

  setState()
}

Answer 1

Expanding from Chris answer in the comments ( You can't use hooks outside React components . -> so you can't call useLocalState() inside triggerCustomLinkModal since triggerCustomLinkModal is not a React component ):

You don't really need the useCallback hook or even the functions itself. Aaccording to react docs :

Note

React guarantees that setState function identity is stable and won't change on re-renders. This is why it's safe to omit from the useEffect or useCallback dependency list.

This also means that using useCallback hook to set a state it doesn't really make sense (because useCallback role is just to return a memoized callback )

What you basically need is a state set up in the closest parrent component and pass the setIsShown as a prop as well as the isShown function.

Your current implementation, even if it weren't for the error, it wouldn't refer to the same state since on each useLocalState() you are initializing a fresh new state (so you are not pointing to the same state in CustomLinkModalUI and triggerCustomLinkModal )