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.
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...
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.
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?
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...
Even for friends the context API becomes a performance issue when your form is split over multiple components.
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.