✋Hi Five Fiber!Lo que viene en React

Leonardo Garcia Crespo

(Lenny)

slack.meetupjs.com.ar

leogcrespo

leoasis

React hoy

Re-renderizar toda la app

class Message extends Component { render() { return <p>Hello {this.props.who}</p>; } }

ReactDOM.render(<Message who="World" />, mountNode); ReactDOM.render(<Message who="Planet" />, mountNode);

React decide cómo re-renderizar

class Increment extends Component { state = { value: 0 };

handleIncrement() { this.setState({ value: this.state.value + 1 }); }

render() { return ( <div> {this.state.value} <button onClick={this.handleIncrement.bind(this)}> +1 </button> </div> ); } }

React decide cuándo re-renderizar

Pero renderiza todo sincrónicamente

Problema para árboles de componentes grandes

Posibles optimizaciones

Priorizar actualizaciones

Qué actualización es más importante?

• Llegada de datos por AJAX

• Animaciones

• Dispatch de Redux

• Eventos causados por el usuario

Qué actualización es más importante?

• Llegada de datos por AJAX

• Animaciones

• Dispatch de Redux

• Eventos causados por el usuario

Ejecutar cuando sea más conveniente

• requestAnimationFrame

• requestIdleCallback

Ejecutar en partes (chunks)

• Pausar actualización si hay otra más importante

• Reanudar actualizaciones pausadas

• Abortar actualizaciones que ya no tienen sentido

• Reusar trabajo parcial anterior de otras actualizaciones

FiberAprovechando el modelo de React al mango

Qué es Fiber?O, cómo parte el trabajo React?

function work(arg1, arg2) { let i = 0; while (i < 1000) i++; //Hacemos algo // ... const fooRes = foo(arg1); const barRes = bar(arg2);

return baz(fooRes, barRes); }

function Work(props) { let i = 0; while (i < 1000) i++; //Hacemos algo // ... const fooRes = <Foo arg1={props.arg1} />; const barRes = <Bar arg2={props.arg2} />;

return <Baz>{fooRes}{barRes}</Baz>; }

function Work(props) { let i = 0; while (i < 1000) i++; //Hacemos algo // ... const fooRes = React.createElement(Foo, { arg1: props.arg1 }); const barRes = React.createElement(Bar, { arg2: props.arg2 });

return React.createElement(Baz, null, fooRes, barRes); }

Y si pudiéramos reimplementar el call stack?

Fiber, “virtual stack frame”

Stack frame Fiber (virtual stack frame)

Función Componente

Sub funciones children

Dirección de retorno Componente Padre

Parámetros props

Valor de retorno Cambios en el DOM

• Unidad de concurrencia

• “Virtual call stack” especializado para UIs

• No interactuamos con Fibers a nivel API en React (detalle de implementacion)

React mañana

Mejor performance con scheduling y concurrencia

Misma API*

Cambios semánticos en el ciclo de vida

• componentWillMount, componentWillUpdate, componentWillReceiveProps NO deben tener side effects.

• componentWillReceiveProps puede tener setState, pero solo sobre la misma instancia

• componentDidMount, componentDidUpdate y componentWillUnmount son los UNICOS que permiten side effects

Nueva API para especificar prioridades (TBD)

Demo: Sierpinksy Triangle

Nuevos features

Render de strings y numbers

function Strings(props) { return `Hello, ${props.world}`; }

class Double extends Component { render() { return this.props.number * 2; } }

Render de arrays

function Items() { return [ <li>Item 1</li>, <li>Item 2</li>, <li>Item 3</li>, ] }

Portals

class CreateThing extends Component { state = { showConfirmation: false };

render() { return ( <button onClick={() => this.setState({ showConfirmation: true }) }> Create Thing </button> <Modal isOpen={this.state.showConfirmation} title="Create Thing" content="Are you sure?" /> ) } }

const node = document.getElementById('modal');

function ModalContent(props) { return ( <div> <h1>{props.title}</h1> <p>{props.content}</p> </div> ); }

function Modal(props) { return ReactDOM.unstable_createPortal( props.isOpen && ( <ModalContent title={props.title} content={props.content} /> ), node ); }

Error boundaries

try catch para componentes

try { renderChildren(); } catch(e) { handleError(e); renderChildren(); }

Demo

Co-routines

Intercomunicación entre padre e hijo

Demo de Co-routines

Cuándo?

Primero como reemplazo de implementación, sincrónico, manteniendo feature parity

Luego con modo “incremental” (Scheduling y concurrencia)

Links

• React Design Principles

• Fiber Principles: Contributing To Fiber

• React Fiber Architecture

• Andrew Clark: What's Next for React — ReactNext 2016

React pasado mañana

Nuevo lenguaje?

https://facebook.github.io/reason/

ReasonML?

Gracias.