Getting started with React 16

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

Completely backwards compatible with React 15!

Ships with the new MIT license

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

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

render() {
return “Just a string”;
}

Strings cannot be returned from the render method in React 15

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Custom DOM attributes
Pass custom attributes to your React components

render() {
return <div data-attr="10" attr="20">App</div>
}

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

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

• No more attribute matching with the whitelist
• Reduced ﬁle sizes

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

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

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

Async rendering
requestIdleCallback()
bit.ly/ﬁber-talk

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

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

Reduced ﬁle size
32% size decrease compared to the previous version

> 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

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

Getting started with React 16

More Related Content

What's hot

Similar to Getting started with React 16

Recently uploaded

Getting started with React 16