I want to make an API call to the backend with the click of a button in ReactJs. I have found 3 ways that I can do that by reading stackoverflow, tutorials and articles.

1. Add a simple function inside or outside the functional component that will make the API call (found many tutorials that use this method)

2. Add a state variable that when changed, it will trigger the useEffect hook (with dependency to the state variable) that will make the API call

3. Add a useCallback hook on a function and call that to make the API call

My thoughts are that the 1st is easy, simple but is it correct? And the 3rd might be wrong because you are not using the useCallback as intended (passing it to a child component and prevent re-rendering) Which way is correct (if there is another way please suggest) and why?