I have a bug in my form which only appear when a specific condition is met. To be more specific, I work with an Api which is a loop for now. Something like this :
data 1 => data 2 => data 3 => data 3 => data 1 => data 2 => data 3 => …
If my form is data 3 and we are in this loop state :
I submit my form => data 1 is loaded => data 2 is loaded => I come back to my form.
When I come back to my form component, I want all my component states to be reinitialize but only half of it do so.
To summary, I would like something like this :
But instead I got this :
In other cases, the component works just fine. So I think maybe it is a problem with when my states are updated. But I don’t know for now where is the bug origin.
What are the first things I need to check when there is a bug like this ? Or do you know of some ways I could test my component to find the bug origin ? I admit I am just a rookie and for me, it is the first time I have something so subtle to debug alone (because I do not have anyone specialize in React working with me).