loadData on mount instead of setting data prop

Questions
,
1

I’m trying to implement Handsontable + react-wrapper but I’m running into issues regarding the most fundamental concepts.

My app is loaded with initial data and can be updated with data coming from both user input as well as external (via sockets) updates from other users.

To achieve this I’m setting initial data via the data prop on HotTable and then updating it using the updateData function. But when the component re-renders the data I add via updateData gets removed but the data from “local changes” remain. From what I can read in the docs this is the recommended way, but I’m hoping I have just missed something.

I managed to get something resembling what I want if I instead skip providing the initial data and just do a loadData on mount. But from docs I read that this would mean that I first get an empty 5x5 grid (because no data passed to HotTable) and THEN I would get my big table with data.

It seems like when the component with HotTable re-renders (not un-mount, see the useEffect with clean-up that does NOT fire). I’ve created a small demo that showcases my confusion. You can see both approaches here: initial data and loading it via loadData, but the one passing initial data clears the data set from updateData when updating the parent state.

Best regards,
Kristoffer Linderman

2

Hi @kristoffer.linderman

Thank you for contacting us. You got the idea of the data handling correctly. To resolve the issue you encountered recently we introduced the initialState option that prevents the unwanted changes in such situations.

I’ve modified your example so it implements this method: handsontable (duplicated) - StackBlitz

1 Like
3

Hello @adrian.szymanski,

Ahhh, thank you very much for the explanation and provided example! We’ve spent hours reading guides/API/source code but didn’t find this. As this scenario ought to be quite common when working with React+Handsontable it might be worthwhile to add information about this under the ‘Introduction’ or at least ‘Binding to data’ sections of the guides.

Br
Kristoffer

4

@kristoffer.linderman

I’m glad it helped! Yes, I agree we should make this information more clear and add it to the this section.

1 Like