This presentation focuses on some of the more newer and promising features in the React JS library - everything from enhanced server side rendering to building robust components for your applications.

1. Getting started with React 16
Arun Michael Dsouza
Software Engineer, AdPushup Inc.
github.com/ArunMichaelDsouza
twitter.com/amdsouza92

2. Completely backwards compatible with React 15!

3. Ships with the new MIT license

4. Fragments and Strings
• Return elements in an array from the render method
• Return strings from the render method

5. Fragments and Strings
render() {
return [
<h1 key="1">This is h1</h1>,
<h2 key="2">This is h2</h2>,
<h3 key="3">This is h3</h3>
];
}

6. Fragments and Strings

8. Fragments and Strings
render() {
return “Just a string”;
}

9. Strings cannot be returned from the render method in React 15

10. The render( ) method can return -
• React elements
• Strings and numbers
• Portals
• null
• Booleans

11. Error Boundaries
• Catch run time errors
• Display a fallback UI

12. Why not try/catch ?

13. Error Boundaries
componentDidCatch(error, info) {
// Render fallback UI
// Log error
}

14. Error Boundaries
Parent
Child
Error occurs in any
lifecycle method of
Child and is caught
by Parent
Error is caught in
componentDidCatch()
of Parent
Fallback UI

15. Error Boundaries
class Child extends Component {
constructor(props) {
super(props);
this.state = {
error: false
};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState({ error: true });
}
render() {
if (this.state.error) {
throw new Error('I crashed!');
}
return <button onClick = { this.handleClick }>Error</button>;
}
}
Child.jsx

16. Error Boundaries
Parent.jsx
class Parent extends Component {
constructor(props) {
super(props);
this.state = {
errorInChild: false
};
}
componentDidCatch() {
this.setState({ errorInChild: true });
}
render() {
return this.state.errorInChild ?
<div>Error</div> : <Child />;
}
}

18. Error Boundaries

19. Why unmount whole react
component tree ?
bit.ly/react-uncaught-error-behaviour

20. Component Stack Traces
create-react-app
babel-plugin-transform-react-jsx-source
bit.ly/react-stack-trace-lines

21. Portals
Render children into a DOM node that exists in
some other DOM hierarchy

22. Portals
render() {
return ReactDom.createPortal(child, node);
}

23. Portals
app
<Form>
<Input> <Button>
<Text>
<Modal>
<Info>
- DOM node
- React component
<Text>

24. <Text>
Portals
- DOM node
- React component
app
<Form>
<Input> <Button>
<Text>
<Info>
<Text>
body
modal
<Modal>

25. Portals
class Info extends Component {
constructor(props) {
super(props);
}
render() {
return <Modal><Text text=“This is the text” /></Modal>;
}
}
class Modal extends Component {
constructor(props) {
super(props);
}
render() {
const node = document.getElementById(‘modal’);
return ReactDOM.createPortal(this.props.children, node);
}
}

26. Why not ReactDOM.render() ?

27. Portals
render() {
return ReactDom.render(child, node);
}

28. Portals

29. Event Bubbling in Portals
class Modal extends Component {
constructor(props) {
super(props);
}
render() {
const node = document.getElementById(‘modal’);
return ReactDOM.createPortal(this.props.children, node);
}
}

30. Event Bubbling in Portals
class Info extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div onClick={this.handleClick}>
<Modal>
<div>
Modal
<button>click</button>
</div>
</Modal>
</div>
);
}
}

31. Custom DOM attributes
Pass custom attributes to your React components

32. Custom DOM attributes
render() {
return <div data-attr="10" attr="20">App</div>
}

33. DOM attributes whitelist

34. DOM attributes whitelist
render() {
return <div custom-attr=“20">App</div>
}
React 15
<div>App</div>
React 16
<div custom-attr=“20">App</div>

35. Data in custom attributes ?
Well, not really.
Still lets you pass data- and
aria- attributes
Yay!

36. Custom DOM attributes
• No more attribute matching with the whitelist
• Reduced file sizes

37. New core architecture
Completely re-written architecture codenamed “Fiber”

38. Async rendering
• Priority based scheduling of events
• Fully backwards compatible

39. Async rendering
• High priority updates
Eg - Typing
• Low priority updates
Eg - Fetching data from server

40. Async rendering
requestIdleCallback()
bit.ly/fiber-talk

41. Improved SSR
Faster streaming of components down the wire,
to the client

42. Improved SSR
• Gets rid of process.env checks (which are really slow)
• Supports streaming of components via renderToNodeStream

43. bit.ly/react-16-ssr

44. Reduced file size
32% size decrease compared to the previous version

45. > npm i react react-dom —save
> npm i react@16 react-dom@16 —save
> yarn add react@16 react-dom@16
Installation
bit.ly/react-16-deprecations

46. Thank you
Arun Michael Dsouza
Software Engineer, AdPushup Inc.
github.com/ArunMichaelDsouza
twitter.com/amdsouza92