Qué es lo que se viene en la próxima version de React. Qué es Fiber? Qué problemas son los que tiene hoy React, y cómo Fiber los intenta solucionar? Qué nuevas features permite? Cuándo va a estar disponible?

1. ✋Hi Five Fiber!
Lo que viene en React

2. Leonardo
Garcia Crespo
(Lenny)
slack.meetupjs.com.ar
leogcrespo
leoasis

3. React hoy

4. Re-renderizar toda la app

5. class Message extends Component {
render() {
return <p>Hello {this.props.who}</p>;
}
}
ReactDOM.render(<Message who="World" />, mountNode);
ReactDOM.render(<Message who="Planet" />, mountNode);

6. React decide cómo re-renderizar

7. 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>
);
}
}

8. React decide cuándo re-renderizar

9. Pero renderiza todo sincrónicamente

10. Problema para árboles de componentes
grandes

11. Posibles optimizaciones

12. Priorizar actualizaciones

13. Qué actualización es más
importante?
• Llegada de datos por AJAX
• Animaciones
• Dispatch de Redux
• Eventos causados por el usuario

14. Qué actualización es más
importante?
• Llegada de datos por AJAX
• Animaciones
• Dispatch de Redux
• Eventos causados por el usuario

15. Ejecutar cuando sea más conveniente

16. • requestAnimationFrame
• requestIdleCallback

17. Ejecutar en partes (chunks)

18. • 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

19. Fiber
Aprovechando el modelo de React al mango

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

21. 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);
}

22. 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>;
}

23. 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);
}

24. Y si pudiéramos reimplementar el call stack?

25. Fiber, “virtual stack frame”

26. 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

27. • Unidad de concurrencia
• “Virtual call stack” especializado para UIs
• No interactuamos con Fibers a nivel API en React
(detalle de implementacion)

28. React mañana

29. Mejor performance con scheduling y
concurrencia

30. Misma API*

31. Cambios semánticos en el ciclo de vida

32. • 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

33. Nueva API para especificar prioridades
(TBD)

34. Demo: Sierpinksy Triangle

35. Nuevos features

36. Render de strings y numbers

37. function Strings(props) {
return `Hello, ${props.world}`;
}
class Double extends Component {
render() {
return this.props.number * 2;
}
}

38. Render de arrays

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

40. Portals

41. 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?"
/>
)
}
}

42. 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
);
}

43. Error boundaries

44. try catch para componentes

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

46. Demo

47. Co-routines

48. Intercomunicación entre padre e hijo

49. Demo de Co-routines

50. Cuándo?

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

52. Luego con modo “incremental”
(Scheduling y concurrencia)

53. Links
• React Design Principles
• Fiber Principles: Contributing To Fiber
• React Fiber Architecture
• Andrew Clark: What's Next for React — ReactNext
2016

54. React pasado mañana

63. Nuevo lenguaje?

64. https://facebook.github.io/reason/
ReasonML?

65. Gracias.