1

I have a settings page which allow the user to enable/disable various settings. Currently I am using a single settings context provider to pass on all the settings.

Would it actually be better to isolate all the settings in separate contexts, so that only the components which use a particular setting would rerender when that setting changes. In my current implementation it seems like even if a unrelated setting changes, the consumers would be rerendered.

Is it true even if they are not consuming the changed value?

gaurav5430
  • 9,899
  • 5
  • 32
  • 73
  • 1
    https://stackoverflow.com/questions/50817672/does-new-react-context-api-trigger-re-renders Might be some relevant reading. – CollinD Mar 02 '19 at 04:51
  • Thanks for the link. I used the mobile app to post this question and it does not show relevant links as it does on the web app while posting. The link is very relevant, though I would want to discuss more in terms of why that is so, so leaving the question open. – gaurav5430 Mar 02 '19 at 05:04
  • Here is another similar question: https://stackoverflow.com/questions/54119268/how-to-use-react-hooks-context-with-multiple-values-for-providers/54119534#54119534 – Ryan Cogswell Mar 02 '19 at 05:32

1 Answers1

2

As far as what React knows, you aren't consuming particular values from the context, you are just consuming a particular type of context. If the value (provided by the provider for that type of context) changes, all the consumers need to be re-rendered. If the value is an object and you only use one part of it, the context API doesn't currently provide any way for you to tell React which parts a particular component is using.

My answer here provides some guidance on deciding what to group together.

Ryan Cogswell
  • 43,837
  • 6
  • 114
  • 117