20

I have read up on the context API and it looks like an elegant way to solve the uni-directional data communication issues of react.

However there is also Redux which does a good job of sharing a global state.

Are there any performance benefits I will get if I use the context API and hooks?

PS: I read that with the context API we will have to keep the rendering in check since, it even make the entire app re-render at times.

  • Possible duplicate of https://stackoverflow.com/questions/49568073/react-context-vs-react-redux-when-should-i-use-each-one – user9408899 Sep 08 '19 at 10:23
  • I'm actually concerned with the performance, not the differences or when to use it. –  Sep 08 '19 at 10:25
  • 2
    Redux uses Context under the hood so possibly not. – Andy Sep 08 '19 at 10:32
  • Context API has bad performance, for a simple reason, when context changes, every part of the app tree that consume contexts re-renders no matter if context is used or not. – albanx Mar 18 '23 at 14:34

3 Answers3

15

Context API was originally designed for high amount of read, low amount of write operations (like changing the theme between light and dark)

You should use props for 1, 2 or 3 level deep data

Thanks for the downvotes, here is the source

From reactjs.org:

Context is designed to share data that can be considered “global” for a tree of React components, such as the current authenticated user, theme, or preferred language.

Context is primarily used when some data needs to be accessible by many components at different nesting levels. Apply it sparingly because it makes component reuse more difficult.

If you only want to avoid passing some props through many levels, component composition is often a simpler solution than context.

tomitheninja
  • 497
  • 2
  • 13
  • 3
    The text you quoted says nothing about contexts being meant for “high reads and low writes” – ICW Jun 10 '21 at 12:40
5

Use-context with Use-reducer to replace redux is not a good practice. Context will cause reloading of the pages, this will be identified if we look into the profiler provided by react dev tools, where as redux won't do that. Redux is better than use-context for global state management

Ajay Ghosh
  • 439
  • 2
  • 11
  • 2
    Thanks for your answer Ajay. Could you add some links to the sources that explain your answer? Or add relevant demo examples or screenshots perhaps? – Jayant Bhawal Apr 08 '20 at 07:17
  • 3
    But the redux provider is based on React Context. So How do you support that argument Ajay? Does exist any benchmark about redux vs context + useReducer? – Mauricio Rivera Sep 19 '21 at 23:50
  • 1
    I'm seeing a lot of unverified information. It's making me want to run some tests. – jscul Apr 15 '22 at 04:17
5

With Redux you can fine-tune performance with 4 helper functions:
areStatesEqual
areOwnPropsEqual
areStatePropsEqual
areMergedPropsEqual
All four helpers have some reasonable default functionality you benefit from by default.

With hooks you can use React.memo as explained here to improve performance, it obviously doesn't come as a default option so you need to explicitly use it.

With Context API I wish I could say that you can use shouldComponentUpdate but I probably cannot because it belongs to React class components which are out of fashion.

winwiz1
  • 2,906
  • 11
  • 24