During a CRUD operation on an HTML table, is it customary for the entire table to be re-rendered or is it more common for just the affected row to be rendered, e.g., updated, deleted or inserted?

For example, in JQuery (or plain Javascript), you add a row like this without rendering the entire table similar to this:

$('#myTable').append('<tr><td>some data</td><td>more data</td></tr>');

Deleting and updating a specific row is just a bit harder because you usually target the current row but still very easy. I've never used React and am curious to know if the entire table is generally re-rendered during a CRUD operation or not. Thank you.

CodePudding user response：

The default behavior in react is that when you set state in a component, all of its child components will render too. So most likely, your data is stored in some parent component that's responsible for the entire table, and then when you change that data, the whole table rerenders.

However, two things to note:

1. "Render" in this context just means the react virtual dom process. It may result in few or even no changes to the actual dom
2. Rerendering all children is just the default. If you're having performance issues, you can add code to skip rendering for portions of the component tree that have not changed. In particular, the main tools are React.memo for function components and shouldComponentUpdate for class components.

CodePudding user response：

React follows a virtual DOM diffing algorithm to determine which components need to be re-rendered. when component's state or props changes react will compare the current virtual DOM tree with previous one and determine which elements have been changed, if the entire table component need to be re-renderd then all of the child components including all of the rows will be re-rendered.