1

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.

iQ.
  • 3,263
  • 5
  • 33
  • 54
  • What might be happening in you case is that you would have a state that is being updated and sent to AppContext.Provider and in that Provider you have MiddleComponent which would get re-rendered because of this update. Check this post which answers you question and also has a demo on how to use it to prevent the render in your case https://stackoverflow.com/questions/50817672/does-new-react-context-api-trigger-re-renders/50817822#50817822 – Shubham Khatri Nov 19 '18 at 12:31
  • Thank you, I will check it out – iQ. Nov 19 '18 at 12:49

0 Answers0