0

I am trying to call a function that contains hooks from a button's event handler. I thought that using useCallback would work well for this, but I seem to be getting an error with this.

Below is a rough version of what I am attempting and have verified this to also cause my issue:

component.jsx

import React, { useCallback } from 'react';
import { testCall } from "./hooks"


const content = () => {
  const callOtherFunc = useCallback(async () => {testCall("test")},[],)

  return (
    <div>
      <button onClick={callOtherFunc()}>Click me</button>
    </div>
  )

}

hooks.jsx

import React from 'react';


export function testCall(props){
    const [value, setValue] = React.useState("");
    setValue(props)

    console.log(value)
}

Error:

Unhandled Rejection (Error): Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
Jake
  • 89
  • 1
  • 7
  • 1
    You can't use hooks in `testCall` unless you use it as a hook or a component function. Your `useEffect` code is doing neither. More in [the documentation](https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level). – T.J. Crowder Dec 18 '21 at 12:47
  • 1
    Also I do believe that your `callOtherFunc` function is being called immediately when the component renders, therefore placing a value of `undefined` onto the buttons click handler. You should either remove the parenthesis, so the button looks like this: ``, or use an inline arrow function, like this: ` – Denno Dec 18 '21 at 13:25

0 Answers0