I am new to web development and was trying my luck with React.js.
I started exploring the Context API where I realised that re-renders (if mounted)/update happens when a component is subscribed to a context and the value of the context is changed.
So I tried understanding the situation by writing some snippets, here is the full code-base.
In the example, I created two components (BucketVegies.jsx and BucketFruits.jsx) with a common parent (Fridge.jsx)
Then I created two context, ContextVegies and ContextFruits with their own providers and consumers. I exposed the consumers using custom hooks (useVegiesContext and useFruitsContext)
My Question is:
Why are sibling components re-rendering upon changing the values in either of the context? From what I read, only the component subscribed to a context must re-render/update when only its context values is changed. (In our example we "add" an item on button click hence change of value)