ReactJSRe-rendering pages in the age of the mutable DOM

React re-renders entire component

whenever data changes

• 80s/90s — user input caused re-render of entire

web page. Why is this best?

• Immutable vs Mutable — mutations can cause

complexity to a point where an app is no longer

maintainable

“React components are idempotent functions.

They describe your UI at any point in time, just

like a server-rendered application.”

What does React do about

Mutable vs Immutable state?

• React isolates mutable state as much as possible.

• Re-rendering on every change makes things simple -

data is guaranteed to be up-to-date

• This is w/out magical data-binding, w/out model dirty

checking, and w/out explicit DOM operations

• Extra note: Why is dirty checking bad? It’s expensive

and as your application grows in complexity, it can

cause your code to get out of hand quickly

Everything is

declarative!

But how can you re-render every

time data changes?

Isn’t this too expensive?

… Enter the Virtual

DOM

What is the v-DOM and how

does it work?

• The v-DOM is a virtualized representation of the

DOM at different points in time (before and after

state change)

• This virtualization is made up of lightweight

JavaScript objects that represent the DOM tree.

As such - it is inexpensive to store in memory and

allows the diffing algorithm to execute in

milliseconds

On every update…

• React builds a new v-DOM subtree

• diffs it with the old one

• computes the minimal set of DOM mutations and

puts them in queue

• and batch executes all updates

It does this in

milliseconds

• React is fast because it computes minimal DOM

operations — the DOM is slow, JavaScript is

actually very, very fast

• React batches read/writes for optimal

performance automatically. It does this through

use of the v-DOM which is inherently faster than

the actual DOM.

Some other points of interest

• Automatic top-level event delegation with cross-

browser HTML5 events

• React also has a virtual event system in addition

to the v-DOM system

What else matters?

Web crawlers!

• One of the big drawbacks to single-page

applications that rely on user input is that web

crawlers can’t index them the same way they can

static pages

• React can generate a static HTML page and send

it down to the client, and then when render

component is called, it looks at the DOM - checks

with what was rendered on server... fast initial page

load experience and Google web-bots can crawl

What does that mean…

the long paragraph there?

“React can generate a static HTML page and

send it down to the client, and then when render

component is called, it looks at the DOM -

checks with what was rendered on server... fast

initial page load experience and Google web-

bots can crawl.”

What this means…

• You can generate a static html page and send it

down — something that can be crawled and

indexed

• Then, when JS boots up, it will replace DOM

elements as needed to boot up the UI

• Resulting in an indexable page that is fully built

on JavaScript

Let’s pause for a minute to note

some key takeaways so far

• Build components, not templates

• Re-render, don’t mutate

• V-DOM is simple and fast

So where does Flux come

in? … also, Relay is

coming soon

As you build apps on React,

you will remove models• In most MV* JS frameworks, model is just a JS object

that allows you to know when something changes —

when data changes (enter two-way data-binding)

• Example:

• You have a model with Title and Subtitle. When something changes you manually

wire up the views to have a node change when the Title changes.

• You change the inner text on some node when the Title changes

• You have to wire this up yourself completely — in Backbone, you have to

wire both ways. In some other frameworks, you only have to wire one way,

but this is still a lot of code.

How is React different

in this example?

With React…

• You trigger a state change.

• Re-render happens.

• Diff happens in background automatically.

• View updates without any flashing in the DOM and

it happens very, very quickly.

• This shortens the amount of code you have to

write.

React can be most powerful

without models

• This does not mean you don’t have data structure

• You use the Flux design pattern (or coming soon,

the Relay framework)

• This is where stores come in…

What is a Store?

Everything’s in Flux

• Centralized stores represent UI components

• The store is your source of truth for the data of

your application

• When you ask a store for data, if it doesn’t have

it, it fetches it and invokes your callback after it

gets it

This centralizes validation

and update logic in one

place.

Think about it.. mutation

all over the place is not

ideal.

More on Relay when it

becomes available to the

public as open-source