I just wanted to know if something like this is possible with React Context API as I couldn't find a way to achieve this.
I have an App component that is at the highest level, which renders a component wrapped inside a provider.
I wanted to a component further down a tree to re-render based on a consumed Context value without re-rendering the middle parent, example:
App Component:
<AppContext.Provider>
<MiddleComponent {...someProps} />
<AppContext.Provider>
MiddleComponent:
<div>
<SomeJSX>
...
<AppContext.Consumer>
{ value => <SmallComponent>{value.something}</SmallComponent> }
<AppContext.Consumer>
...
</div>
Now I only wanted the SmallComponent to re-render with Context changes but when the context value changes, React seems to do a forced render on the entire MiddleComponent.