Re-calling react hook "useEffect" problem - reactjs

Question

I am working on a new small project in React and I am using React hooks. The ultimate target of this app is to fetch the data of the weather of a certain city from openweather API and display it on the screen. I have created a custom hook to fetch the data from the endpoint and passed in three arguments as shown below :
export const useHttp = (baseURL, dependancies, isSubmit) => {
// Inizialize isLoading to false
const [isLoading, setLoading] = useState(false);
// Initialize the fetched data to an empty string
const [fetchedData, setFetchedData] = useState('');
useEffect(() => {
/*Check if isSubmit is true before fetching the corresponding
data*/
if (isSubmit) {
// set isLoading to true until we get the data
setLoading(true);
// Start fetching the data from the url received
fetch(baseURL)
.then(response => {
if (!response.ok) {
throw new Error('Failed to fetch. ');
}
return response.json();
})
// Return the data when fetched successfully
.then(data => {
setLoading(false);
setFetchedData(data);
})
/*Show an alert when fetching encounters an error and stop the
loader accordingly*/
.catch(err => {
alert("Please insert a valid name")
setLoading(false);
})
}
}, dependancies)
// Returning the data to use them later in displaying the weather
return [isLoading, fetchedData];
};
And here is how my form component works :
// initialized the input to an empty string
const [searchTerm, setSearchTerm] = useState('');
// Initialize the state of submit to false
const [isSubmit, setIsSubmit] = useState(false);
// Use array destruction to get isLoading and fetchedData from the imported userHttp hook
const [isLoading, fetchedData] = useHttp(`http://api.openweathermap.org/data/2.5/weather?q=${searchTerm}
&APPID=b8c1572d189de60f5480324c6b53d9ab`, [isSubmit], isSubmit);
// Use object destruction to get the desired properties out of the fetched data
const { name, sys, weather, main } = fetchedData ? fetchedData : '';
// Get the user input in the search bar to pass it to submitInput function
const getSearchTerm = (e) => {
setSearchTerm(e.target.value);
}
// Submit the userinput and call the custom hook to fetch the data matched with the input
const submitInput = (event) => {
// Prevent the form from actually submitting
event.preventDefault();
// Change the state of isSubmit so that useEffect can be re-called
setIsSubmit(!isSubmit);
}
As you can see, I wanted to change the value of the state "isSubmit" whenever the user submits in order to recall useEffect as "isSubmit" is also passed as a dependency. Moreover, I created a condition to prevent useEffect from working whenever the app is rendered because I want it to work only when the user submits.
The thing is, it works perfectly the first time but when I enter another value, I have to click twice on the button to make it work. I spent a while thinking about this issue but I came to nothing in the end. Hopefully, someone can help me with this. Thanks in advance.
Here is also a link to the project rep on GitHub :
https://github.com/Saifsamirk/weatherApp

Answer 1

Your useEffect hook only fires when isSubmit = true. When you call submitInput you only change the value of isSubmit to !isSubmit. It will only be true every second time. You might wanna reset your isSubmit state to false after firing the event.