droneshire / dealanalyzer

Analyze deals using in PA
0 stars 0 forks source link

Immediately reverting state changes? #12

Closed jvandermey closed 1 year ago

jvandermey commented 1 year ago

This seems like it's immediately reverting submit state changes?

https://github.com/droneshire/dealanalyzer/blob/42c14590838684bfc521270ac0ea08dae8c975ba/src/components/DealInput.tsx#L75

droneshire commented 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.

jvandermey commented 1 year ago

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.

droneshire commented 1 year ago

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

droneshire commented 1 year ago

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.

droneshire commented 1 year ago

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.

jvandermey commented 1 year ago

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

jvandermey commented 1 year ago

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

droneshire commented 1 year ago

Makes sense :+1: