DEV Community

Discussion on: How to manage global data with Context API, without Redux on React

Collapse
 
faiwer profile image
Stepan Zubashev

Thx, for the article. But there's 2 things you probably should to worry about (especially if you want to use it in production for big applications):

  1. When you write code like <Provider value={{ something }}> you're creating a performance issue. Because { something } is always a new object. It automatically rerenders all the useContext(context) consumers whenever the provider is rendered. So, plz take a look at useMemo ;-)

  2. There's a reason why no mature solutions use React context for stored values. They use it only to keep the store itself (that's the same object always). Because otherwise any change of the store will rerender all the children that use the context. I highly recommend you to take a look at useSelector code in react-redux. Or at any other similar solution. At now there's no simple way to avoid using own-implemented observable model, to make a performant solution. Context API is too simple to do it properly. But I hope soon we will seen something that solves the problem.

Collapse
 
jamesthomson profile image
James Thomson

This. Context is fine for small isolated use cases, but any mid to large app is guaranteed to suffer performance issues.

Collapse
 
taishi profile image
Taishi

Thank you, Stepan!

Ok, so there is an issue from a performance perspective.
That is what I didn't know.

Yeah, useMemo is good for optimizing performance 👍

I will take a look at useSelector code!