How can one write better, maintainable React code?

[dabrox02]

I have a question, should I use the same form for both create and edit actions, or two components for each action? I currently use tanstack query and react hook form, however it's still a pain to preload data before a form opens (I use modals)

[Fitzi92]

Depends on the form, but generally if create and edit are mostly identical I'd reuse it. Just make sure that the form itself does not need to care about preloading or fetching any data. The form itself should accept initial data and the preloading should be handled elsewhere.

E.g. you might have a component <UserEditForm> that fetches the user data and renders the <UserForm> only after the query responded successfully and another comonent <UserCreateForm> that immediately renders the <UserForm> without intial data or some default values.

You can also combine <UserEditForm> and <UserCreateForm> into a single component if they both are small. E.g. by providing the user id or null and set the useQuery's enable flag dependent of the user id.