React and immutability

What?

Why?

Lessons learned

https://facebook.github.io/react/

One-way data flow

Data

DOM

<div id="container"></div>
var Hello = (props) => React.createElement(
    'div', null, "Hello ", props.name);
 
ReactDOM.render(
    React.createElement(Hello, {name: "World"}),
    document.getElementById('container')
);

JSX?

<div id="container"></div>
var Hello = (props) => React.createElement(
    'div', null, "Hello ", props.name);
 
ReactDOM.render(
    React.createElement(Hello, {name: "World"}),
    document.getElementById('container')
);
var Hello = (props) => 
    <div>Hello {props.name}</div>;
 
ReactDOM.render( 
    <Hello name="World" />,
    document.getElementById('container')
);

What about the M and C?

Async events

State over time

+

Old Data

DOM

Data

Event

+

(Action)

(Reducer)

{ type: 'ADD_TODO', text: 'Learn React' }
{ type: 'REMOVE_TODO', id: 42 }
{ type: 'LOAD_ARTICLE', response: { ... } }

Actions

const reducer = (previousState, action) => {
    switch (action.type) {
        case ADD_TODO:
            return handleAdd(previousState, action);
        case REMOVE_TODO:
            return handleRemove(previousState, action);   
        default:
            return previousState
    }
}

Reducers

Isn't this all really, really slow??

Virtual DOM

shouldComponentUpdate()

(oldProps, newProps) => boolean

Immutability!

// Mutable case
let list = [1, 2, 3];
list.push(4);
console.log(list); // [1, 2, 3, 4]
// Immutable case
let list = [1, 2, 3];
let list2 = list.push(4);
console.log(list); // [1, 2, 3]
console.log(list2); // [1, 2, 3, 4]

Isn't this slow?!

shouldComponentUpdate() is now fast!

(oldProps, newProps) => (oldProps === newProps);

Simplicity

Concurrency

+

If it's so great why do we use mutable data at all?!

https://facebook.github.io/immutable-js/

// Lists
const list1 = Immutable.List.of(1, 2, 3);
const list2 = list1.push(4);
list1.get(0); // 1

// Maps
const map1 = Immutable.Map({a:1, b:2, c:3});
const map2 = map1.set('b', 50);
map1.get('b'); // 2
map2.get('b'); // 50

// Back to JS
list1.toJS(); // [1, 2, 3]
map1.toJS(); // {a:1, b:2, c:3}

Lessons learned

Immature

...yet robust

Immutable JS

// Mutable props
var Hello = (props) => React.createElement(
    'div', null, "Hello ", props.name);



ReactDOM.render(
    React.createElement(Hello, {name: "World"}),
    document.getElementById('container')
);
// Immutable props
var Hello = (props) => React.createElement(
    'div', null, "Hello ", props.data.name);

const data = Immutable.Map({name: "World"});

ReactDOM.render(
    React.createElement(Hello, {data: data}),
    document.getElementById('container')
);

Conclusion

More info

  • https://facebook.github.io/react/
  • https://facebook.github.io/immutable-js/
  • Immutability and React - https://www.youtube.com/watch?v=I7IdS-PbEgI
  • http://join.reactiflux.com/
  • http://rackt.org/redux/

React and Immutability

By virtualdtor

Made with Slides.com

React and Immutability

Intro to React and some lessons learned using React with immutable data.

  • 806

More from virtualdtor