'initiate action in another component takes a long time because of the whole app re-render

I have an App with this simplified component structure

Application
  --Sidebar
  --AnotherComponets
  --Display
      --Charts
          --Chart (might be multiple Chart components, amount not strictly given) 
      --Tables
          --Table (might be multiple Table components, amount not strictly given)

For example Tables can be expensive to re-render, as they can display tens of thousands of rows and there can be multiple tables and charts in the app.

The Sidebar component serves for controlling each of the Chart and Table appearance (simplified: to be visible/invisible), so I believe they have to have common state in the Application.

When a button is clicked in Sidebar, the action should be made in the related Chart/Table component (show/hide). The issue here is, that the whole app re-renders and depending on the amount of data it can take even tens of seconds, so this simple action is super long.

Is there any simple way, how to achieve fast reaction here? I thought about something more difficult like Redux(Toolkit), but as I have never used it before, I am not sure if it is possible to make it work for dynamic number of components (charts, tables). The app has a lot of components, so setting up Memo seems to be a last resort for me.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'initiate action in another component takes a long time because of the whole app re-render

Sources

Related Questions