DEV Community

Discussion on: Flawless React State Management: useReducer and Context API

sanderdebr profile image
sanderdebr Author • Edited

True, but I've noticed that React is very smart in comparing and updating, it only updates the components that actually are affected by a state difference, even before memoizing them. I'm using this technique in a production app and only the affected components seem to be re-rendering.

However, I would advise to only store your app-wide state with the context api, otherwise use local state - for example for input forms. So the app would be a combination of context stores and local stores then. Otherwise switch to a state management lib like Redux.

How are you managing state currently?

droidmakk profile image
Afroze Kabeer Khan. M

I'd say you can use html and native JavaScript implementations for input fields since state updates are async the user feedback can be sometimes bad. But in special cases you can use it, I suppose...

polaroidkidd profile image
Daniel Einars

Even for friends the context API becomes a performance issue when your form is split over multiple components.

markerikson profile image
Mark Erikson

it only updates the components that actually are affected by a state difference

Depends on what you mean by "update" here.

Yes, React only modifies the DOM if your component's render output changes.

However, React always re-renders components recursively by default, even if the props and state haven't changed. It's a very common misconception that React automatically skips rendering if the props are the same - that's an optimization you have to apply.

See my post A (Mostly) Complete Guide to React Rendering Behavior for details.