Handling add fields, edit fields and delete fields with React JS and Rails

Question

I have a React App for handling the front-end, and Rails for back-end. So I have a Forms Manager, in which a field can be added, previously added fields can be edited or deleted. Once made all the changes, the user can click on the Save button to send the data to the back-end.

When sending the data, which method would be more efficient?

• The component keeping track of the newly added fields, removed fields, and the modified in separate arrays and send them all to the server and let the server handle it?
• Send the fields both modified and newly added (not the deleted fields). The existing fields would have the ids associated to them, this tells the back-end app that it's an already existing item. This method requires the server to do a diffs method against the previously existing fields with the currently submitted fields to remove the deleted items

or is there a better alternative?

Answer 1

Here's what I think:

So, I would push for your first method, because sending the whole thing again just doesn't seem right and would put a huge load on the server.

But instead like you said, have a separate array of objects containing the new/removed/modified array's of further objects and send that using a POST call to the server and let it handle it.

But make sure it's not the component alone, but a redux module that handles the data throughout!

Once made all the changes, the user can click on the Save button to send the data to the back-end.

^This statement is the reason for the above proposed method.

Otherwise, I would just treat each form field as a separate data entry and call an API to save/delete/edit using the POST/REMOVE/PUT respectively, which is much more convenient. KISS Principle! (google!)

PS: If you are going with the first method, make sure to save the data that the user is typing in your big form locally somewhere, so that even if he switches page accidentally, he can retrieve all the lost data at ease.