Upgrade from 0.x to 9.x in react- filter and sort removing

Tags: #<Tag:0x00007f8b2b0d2510>

Hi,
I was using handson table 0.x version from last 4 years. I have done a lot of customization there. where I was using react typescript version. So needed to modify handsontable, a bit.
Now I needed to convert to to 9.x version and I needed to modify a bit . Basic handsontable is appeared now. But I used statechange for react in handsontable afterfilter or many cases I needed to use statechange, which is removing the filter and sort in table. Which is not good at all for my end users. I can see that this is a known issue in 9.0.1. But is there any alternative there? or I am missing something. I could not use @handsontable/react as I am working on typescript version, I needed to use a modified version of handsontable package. Please help. I am searching it for last 3 weeks, but no luck. Advance thanks for any help. I will add if some more information needed

Hi @joydeep.ghosh
First of all, we’re glad to see you upgrade to v9 after a few years of using v0.x. :blue_heart:

HotTable element inside the state-full component will be revalidated (rerendered) every time the parent’s state changes (even if you do not attach this state to the HotTable). In our wrapper, we collect these changes and invoke updateSettings on the internal Handsontable’s instance that guides devs to one of the variants of the problem reported on our issue board, as you mentioned - https://github.com/handsontable/handsontable/issues/7567.
To work around this problem, you can wrap our wrapper into the PureComponent. Thanks to the different way how PureComponent.shouldComponentUpdate works, changing the state of its parent will not invoke settings update in HotTable, which shows the following example: https://stackblitz.com/edit/react-myig6u?file=src%2FApp.js
To read more about React’s kinds of components, you can reach out to this link: https://reactjs.org/docs/react-api.html#reference.
You can also consider using React.memo (higher-order component), where you can put your comparison function to avoid over-rerendering.
In React’s documentation, you can also find a great article about performance optimisation. You will see a section for shouldComponentUpdate where they explain in detail how you can adjust React’s components to your needs in the meaning of re-rendering or vDOMEq comprising.

Thanks @piotr.laszczkowski, will check these

As mentioned there 7.4.2 is working for filter, but sorting is hampering there on state change.

Yes, it worked (more or less) until v8, but v8 introduced indexMappers, and we stopped basing on references (and many other changes). That change was necessary to start working on upgrading the settings management system and further work to solve the problem I reported here: https://github.com/handsontable/handsontable/issues/8372.

hi @piotr.laszczkowski ,
Can you tell me one thing is 9.0.1 will work fine with react functional component with redux? where I will use typescript?
Then I will make a POC on that, cause 9.0.1 is not working for me in stateful component where I am working typescript.
I need to know the stable version with react, and for that which react version will work?
Thanks in advance

In our documentation, you might find an example where we use functional components with redux: https://handsontable.com/docs/react-redux-example/.

We develop React’s wrapper using .tsx.
Importing npm’s package, you might use definitions for all interfaces we generate from development files.

@handsontable/react@9.0.1 uses the following React’s version: "react": "^16.10.2"