5

I'm working on a website with fast changing states and many broadcasts, and I'm trying to create my own global state management with hooks and Context. The only solution I've found to avoid useless rendering is to create two context per state, one for the state updaters methods and one for the state itself. I ended up having dozens of contexts.

It doesn't look like a good design, but I don't have any other ideas and I'm still thinking that it could be possible to create a complex react app without a third party library to handle state management.

Do you have any suggestion? Thanks

0xChqrles
  • 433
  • 1
  • 5
  • 10

1 Answers1

4

Firstly notice, Context API is not a state management tool.

Currently (v17) there is no bailout for Context consumers.

If you don't know what does it mean, check out this answer

You are right, you need to have multiple Context providers to reduce the useless renders.

As for your other question:

"Could be possible to create a complex react app without a third-party library to handle state management?"

I'm working on a very complicated project on Facebook, and we manage it only with Context API (we have situations of useless renders too, and that's OK), so basically the answer is "Yes".

As a general suggestion before going on the "Context Only" way or any state management solution, you should profile application performance, mostly it's just premature optimization, and having "useless" renders is meaningless.

Dennis Vash
  • 50,196
  • 9
  • 100
  • 118
  • Thanks for the answer and resources! This topic got me thinking: say there's children-contexts that are reliant on a parent-context. Would an update to the parent-context force all the components reliant on the children-contexts to rerender? – Michael Hoobler Apr 12 '21 at 09:25
  • 1
    @MichaelHoobler If a context provider triggers an update, each consumers and their children will re-render – 0xChqrles Apr 12 '21 at 09:33
  • Thanks for your answer, the premature optimization is kinda interesting. So you suggest to keep creating multiple contexts but not necessary two contexts per state? As an example, I can wrap the modal state and the popup state in the same context. – 0xChqrles Apr 12 '21 at 09:36
  • 1
    I suggest to tackle optimizations after you having traffic, ie keep working, finish your project, then have a phase of profiling and see if you really got a bottle neck somewhere, if not you earned a valuable time to work on more impactful targets – Dennis Vash Apr 12 '21 at 09:41
  • Indeed it seems logical, thanks for your time – 0xChqrles Apr 12 '21 at 09:50
  • I have a last question Let's admit that I share my states through contexts by wrapping them in a Store object. Is it a good practice to use the Store as the state itself? I've seen both but I can't decide which one is better. – 0xChqrles Apr 12 '21 at 10:02
  • Don't know what "Store" object means, I would prefer you to open a new question for it, feel free accepting answer in current context if was helpful – Dennis Vash Apr 12 '21 at 12:00
  • Sorry, I though I've already accepted the answer – 0xChqrles Apr 12 '21 at 12:12