Best practices for using React

Getting help Questions
,
1

I am evaluating use of Handsontable for my employer. I want to use the React wrapper but I am struggling to get it to work for our use case. I have reviewed both the documentation and forums extensively, and have not found clear answers about how best to use Handsontable with React. I will summarize our use case and explain the questions I have.

Our use case:

  • React app
  • Data is loaded using React hooks
  • State is managed using Mobx or React hooks
  • Multiple users can make changes to the same table at the same time, so data needs to be updated in the table after the table renders. These changes are pushed using webhooks.
  • Hiding columns / filter data is enabled and tracked not only within the table but using other components next to the table. For instance, show a “Reset Columns” button when the user has hidden columns.

Problems / Questions:

  • It seems like the HotTable implicitly expects the table to never rerender (not mentioned in the docs?). And if a rerender does occur then the table may reset completely. Is that correct? If so, how do you suggest to nest the table within a parent that may rerender?
  • It appears that you cannot use the useState hook in the same component as the HotTable component, because changes to state will trigger a rerender of the HotTable. If the table is used to set the state then that will create an endless loop. I would like to track columns hidden in the table, and allow the user to select / deselect columns using a dropdown outside of the table. Can you suggest how to do this?
  • What happens when props to the HotTable change? Are those expected to be static?
  • What is the difference between data and source data? If I reorder the columns which will return the data as it was originally provided to the data?
  • Do you have example code where the HotTable loads non-static data? And updates data after first-rendering? That would be enlightening.
2

Hi @jthompson

I’ll try to dispel your doubts:

  1. A React re-render of the parent/component is not inherently a problem. The big problem is when the table gets re-mounted (destroyed and created again), because that can reset internal state.

For data changes after render, Handsontable explicitly supports updating data without resetting the state via updateData() (preferred for real-time updates) vs loadData() (will reset some states).

  1. You can use useState in the same component. The loop only happens if Handsontable hook updates React state, and that state change causes props/settings to change in a way that triggers the same hook again, repeatedly.

  2. We recommend using our data-loading API methods to replace data in an already initialized instance, especially updateData() when you want to avoid resetting the state. Those are two approaches that are most commonly used:

- updateData()- for full data update;

- setDataAtRowProp / populateFromArray (imperative, targeted) for small patches;

  1. Those differences can be summarized as followed:

  • getData() returns data in the current visual layout (after moves/reorders/trimming);

  • The source data refers to the underlying dataset in physical order (what you originally loaded);

When columns/rows are moved, you often need translations like visual to physical indexes (toPhysicalColumn).

  1. We don’t have any example currently but we see the need for such so we plan to create more life-like usage examples for React.