Question:

Why component isn’t rendering each time form is submitted in React

Solution:

The problem you might be facing would undefined variable for example, isValidEmail when data is being sent to the NotifyUser for the first time. Therefore, the component NotifyUser loads and is mounted when it becomes truthy.

The NotifyUser component is already loaded (mounted) when you change the state of the variable or click the second time, so it doesn't display. However, this time, the component receives the new props and you aren't hooking it to the useEffect to perform a state update, so the update doesn't occur.

You can use either of the two methods to remedy this, but I would prefer the second because, unlike the first, it limits the modifications to just one component and doesn't impact the other.

Approach 1:

Reset the isValidEmail to null or undefined (never use undefined here or in the initial state; always use null). By doing this, the component will be unmounted and the state will change after the timeout. If this manual method isn't evident, the trick is to mount and remount the components.

useEffect(() => {

console.log(isValidEmail);

if (isValidEmail) {

setTimeout(() => {

window.location = "https://www.google.com";

}, 5000);

} else {

setTimeout(() => setIsValidEmail(undefined), 2500); // reset it back at the end time

}

}, [isValidEmail]);

Approach 2:

simply include the properties in the NotifyUser's useEffect, and it will ensure that the