Closed jvandermey closed 1 year ago
My understanding was the useEffect()
would only trigger after a render if that variable changed?
I used this to clear the forms within the form components but then also to aggregate the data in the formInput
object.
there doesn't necessarily have to be a render in-between the events. But it will happen as a separate frame on the event loop. So this is basically saying that as soon as didSubmit
becomes true, set false.
What's the "right way" to do this then? I basically need to send a signal/one shot to the components to clear/reset their forms upon submit and this was my hack way of doing that
When I just setDidSubmit(true)
outside of a useEffect()
hook, I would get an infinite loop b/c nothing would clear it once the forms are reset before continually forcing re-rendering.
So this is basically saying that as soon as didSubmit becomes true, set false.
Yeah this was my poor man's "signal" since there's no feedback from the sub components on knowing when they are cleared. I guess I could pass in a callback that aggregates the components that have cleared their fields and then clear didSubmit
once they have all signaled that they've taken action on the the didSubmit
change? Still seems like there's a better way to do this that I'm not aware of.
I think that the more typical way of doing this would be to manage the field values in the parent class rather than in the actual input components. So each input would take a onChange
callback along with a value
that the parent would pass in. That way you don't have to worry about trying to pass state back up (generally an anti-pattern) through what you have as the handleInput
prop right now
You are already managing the full state in the parent, so might as well make the fields dumb pass-throughs. Then on submit, you just update all the values in the parent
Makes sense :+1:
This seems like it's immediately reverting submit state changes?
https://github.com/droneshire/dealanalyzer/blob/42c14590838684bfc521270ac0ea08dae8c975ba/src/components/DealInput.tsx#L75