Can I not call a "useEffect" inside a function in React? - reactjs

Question

Here's my usecase for which I would really want useEffect be called within a function but I'm unable to do so.
I have a dropdown which gets it's data from an API call that I call at the start of the page load. Based on the selection from this dropdown, I do a setState for the ID of the selected value taken from the dropdown. I then have another dropdown which is part of a library called React QueryBuilder for which I need to pass an onChange function. Within this onChange function, I call useEffect and then pass the ID that I got from the previously mentioned setState - When I do this, I get an error message telling me I cannot call useEffect within a function but I need it to be called here because I need to make an API call and pass the ID to the API.
If i have the function name in all small cases, I get the below error:
React Hook "useEffect" is called in function "functionname" which is neither a React function component or a custom React Hook
If i rename the function as "FunctionName", I get the below error:
*
Invalid hook call. Hooks can only be called inside the body of a
function component
If i don't use useEffect, that API call goes into a continuous loop!
I'm unable to think of any other way - Can someone shed some light or help me in the right direction on what to do here ?
Update:
For API Calls, I am currently using "useEffect" and "axios" - is that wrong? I add the "useEffect" if there's a continuos loop problem. See below example:
const ABCFunction = (event) => {
axios.get("APIURL/Getsomething").then((response) => { setState(response.data);
});
In one part of the code, the above did not go into a continuous loop, but in another part where I had called my API the same way, it went into a continuos loop, so I added useEffect which gave me my issue.
Here's the API call which I did with the useEffect hook - this Function is located inside the page.
import abc
import cdf
..
..
const pageView =() => {
.
.
.
.
const getFunction = (fieldName) => {
const field = filteredIfData.find(fld => fld.name === fieldName);
useEffect(() => {
axios.get(`$apiURL`).then((response) => {
setState(response.data);
},[]);
.
.
.
};
export default pageView

Answer 1

From your description and error message, I got two key things what you did wrong:
Calling useEffect hook from onChange handler:
onChange={FunctionThatCallsUseEFfectHook}
Without useEffect hook, getting infinite loop through immediate call
onChange={FunctionThatCallsImmediately()}
Solutions:
You can't use the useEffect hook from event handlers. Rather, use the useEffect hook based the value change:
useEffect(() => { // not inside onChange handler
//...
}, [ValueThatChangesOnSelection])
Without useEffect hook, call the function only on change but not immediately:
onChange={() => onChangeHandler()}
Or,
onChange={onChangeHandler}
But not this:
onChange={onChangeHandler()}