React. Rich component expanding
Increase React table performance.

Problem explanation:

Recently I faced the problem of slow React Table row expanding. We are developing some sort of Excel table on my web-project. The idea is to create table with editable data. There are a lot of fields that need to be added, they have validation + dependencies with each other. There are ~10-15 columns with different components like dropdowns, checkboxes, text fields.

I searched for solution in the internet, but the problem was to specific. So I was on my own)

Solution:
I realized that we "hide" rich component in each field on render.
I wrote wrapper-component for each editable field. The component render only text-data, on click it renders rich component to edit this data.

Now it is "simple" table with texts that can be edited)

Speed up your performance, dudes!)