CODEWITHSUNDEEP
javascriptreactjsscalabilityreactjs-flux
nanobar
nanobar

Reputation: 66395

ReactJS: How to optimise top-down render flow

Looking at Facebook's Flux TodoMVC example (https://github.com/facebook/flux/tree/master/examples/flux-todomvc/) makes me wonder how this approach scales.

In the example the store is updated onBlur/Enter keypress of a new entry, but what if we wanted to update an existing entry on keypress? i.e. you type something in an input and this is persisted to the store.

The store's contents (todo list) is set as state at the highest level since the whole app needs it, this is re-set whenever the store changes.

How does this scale? It seems like it would be inefficient to check if every component needs to re-render when in all likelihood probably nothing does (you're just editing text and that item is the only thing which needs updating).

Is this approach OK to use for a real app, or are there optimisations to keep in mind to make this scale efficiently?

enter image description here

Upvotes: 0

Views: 1433

Answers (1)

Crob
Crob

Reputation: 15185

Every component has the shouldComponentUpdate method that will run to determine if a component actually should update when it receives new props. By default, this just returns true.

If you implement that method well on your components, then the architecture you laid out is very efficient and will scale well as your app grows.

See also: PureRenderMixin https://facebook.github.io/react/docs/pure-render-mixin.html

Upvotes: 1

Related Questions