Is not providing deps array for useEffect ok?
in attached image you can see I have used
// eslint-disable-next-line react-hooks/exhaustive-deps to disable deps array eslint annoying warning.
I don't want to provide a deps array because it will blow my code up is there any way of doing this without disabling eslint rule
18 Replies
hard to know what you're intended functionality is here without seeing the rest of the code, but is there a reason you can't pass in
getTemplate and form ?it willl start an infinite loop of cleaning up...
yeah makes sense, my gut tells me you're doing something else wrong so youre adding this as a "hack" so i think its "fine" to have this
if its a temporary thing
ok i will share my code, it's not just this time actually I skipped deps many times 😅 so i guess it would be better to get some help about it
Wouldn't a boolean state solve that problem?
Or maybe just some condition control in the useEffect
i feel you should have the
form.resetFields return affect in the use affect above as that is what is setting the fields and also the getTemplate.remote() should be in the useGetTemplate() hookAnd maybe destruct the data from the query
Actually, you could simply eliminate all useEffects, I think I can help you with that
I've also used antd forms with initial values before
i didnt look at the code but i asked this exact question to chatgpt and it gave a suprisingly nuanced answer. i then checked it in #tech-discussion and people seemed to agree with it
that said, in practice i was able to cleanup virtually all but one of my useEffect()s so that the the linter was happy
and the one that was left was weird cause i was trying to play an animation when an array of props changed
(in the pictures above, the first 2 questions were about my specific scenario for context, then the last 2 were more general)
that would be great, I removed the form.setFields and moved it to the query onSuccess, but what about the other useEffect. or if u have any other suggestions or ideas about this I would like to hear
I removed the userEffect for the initial values by adding them to the props of the component
But then you have to be careful when naming the Form.Items because they need to have the same hierarchy and nomenclature as the object
For example, in my object:
Then I name the fields like this:
I honestly think it's an amazingly simple solution that the antd provides for the form, and eliminates the complexity of the useEffect.
Everything flows in a much more convenient and understandable flow, imo
thank you very much that's great I will try that out 🤝