Categories
Development

How to efficiently design components / configure store when using react-redux

If I have a component tree such that,

const App = () => (
  <React.Fragment>
    <A />
    <B />
    <C />
  </React.Fragment>
)

Now, lets say all three components A, B, C are connected to store using connect().
The problem is if I update the store with data only relevant to component A, then B, C will also be re-rendered. One of the possible solution would be to configure the options parameter to avoid re-renders as mentioned in docs.

Does creating multiple reducer functions for each mutually exclusive components solve this problem ? If yes, how and if No, then what could be done to minimise unnecessary re-rendering.

Leave a Reply

Your email address will not be published. Required fields are marked *