React and Easybase - Invalid hook call. Hooks can only be called inside of the body of a function component

Solution 1:

As per React's documentation:

Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function, before any early returns.

Currently, you're attempting to call a hook inside the onClick handler - AddUser is a custom hook since it also uses hooks and the better name for it should be useAddUser.

I suggest to make some improvements by returning a function from your custom hook that you can call to add a new user, e.g.:

export const useAddUser = () => {
  const {db} = useEasybase()

  const addUser = React.useCallback(() => {
    db('OMEGABB')
      .insert(/*...*/)
      .then(/*...*/)
      .catch(/*...*/)
  }, [db])

  return {
    addUser,
    /*...*/
  }
}

Then, you can use useAddUser in the following way:

const {useAddUser} from './mainstorage'

const SignMessageButton: FC = () => {
  const {publicKey, signMessage} = useWallet()
  const {addUser} = useAddUser();

  const onClick = React.useCallback(
    async () => {
      try {
        // ...
        addUser()
      } catch (error) {/*...*/}
    }, 
    [publicKey, signMessage, addUser]
  )

  /*...*/
}