A talk about React 16 and react-call-return

1. The exciting future of…

2. React

3. React 16

4. Angular 1 👉 Angular 2 👉 JustAngular™

5. v0.14 👉 v15

6. React Fiber - THE CORE REACT
ALGORITHM HAS
BEEN COMPLETELY
REWRITTEN!!! 🔥 🔥 🔥
Error boundaries
Rendering multiple elements
without a wrapper
Portals
Custom dom attributes
Render only a string
Improved server-side rendering

7. Fiber, whatever
¯_(ツ)_/¯
Rendering multiple elements
without a wrapper 😍
Other things

8. Rendering multiple elements
without a wrapper

9. Understand how JSX compilation works

10. Nope #1

11. Nope #2
const ListItems = () => {
return <li> hello </li>
return <li> world </li>
}

12. Nope #3
const ListItems = () => {
return <div>
<li> hello </li>
<li> world </li>
</div>
}

13. const ListItems = () => {
return [
<li> hello </li>,
<li> world </li>,
<li> how are ya </li>
]
}
Yup, but ugly

14. const Aux = ({children}) => children;
Ofc people wrote this

15. Usage
const ListItems = () => {
return <Aux>
<li> hello </li>
<li> world </li>
<li> how are ya </li>
</Aux>
}

16. Verified live footage of the React
team after seeing the Aux component

17. import {Fragment} from ‘react’;
Fragments
const ListItem = () => {
return <Fragment>
<li> hello </li>
<li> world </li>
<li> how are ya </li>
</Fragment>
}

18. JSX Fragment syntax
const MultipleThings = () => {
return <>
<li> hello </li>
<li> world </li>
<li> how are ya </li>
</>
}
(a.k.a why people switch to Vue)

19. Use cases
const pairs = [
['React', 'Vue'],
['Redux', 'MobX'],
['jQuery', 'MooTools'],
['Sass', 'Less'],
['Hillary', 'Trump']
];
const MyList = () => {
return <ul>
{pairs.map(([first, second]) => <Fragment>
<li>{first} </li>
<li>{second} </li>
</Fragment>)}
</ul>
}

20. Use cases
const celebrities = ['Trump', 'Jake Paul', 'Justin
Timberlake', 'Dan Abramov', 'Me'];
const CelebritiesList = () => {
return <div>
{celebrities.map((celebrity, index) => <Fragment>
<div> {celebrity} </div>
{index !== celebrities.length - 1 && <hr />}
</Fragment>}
</div>
}

21. A component that renders a string
const ConvertTextToEmoji = ({children}) => {
//insert text-to-emoji algorithm here
return 'The world has enough emoji already.'
}
<ConvertTextToEmoji>
This text should be converted to emoji.
</ConvertTextToEmoji>

22. Portals
Provide a first-class way to render
children into a DOM node that exists
outside the DOM hierarchy of the
parent component.

23. Me reading about Portals

24. Portals
//index.html
<div>
<div id="root"> </div>
<div id="modal"> </div>
</div>
const Modal = ({children}) => {
return ReactDOM.createPortal(
children,
document.getElementById('modal')
);
};

25. class AboutPage extends Component {
state = {modalOpened: true}
toggleModal = () => this.setState({
modalOpened: !this.state.modalOpened
})
render() {
return (
<div>
<h1>About Us </h1>
<button onClick={this.toggleModal}>
toggle modal
</button>
{this.state.modalOpened && <Modal>
Content inside of modal
</Modal>}
</div>
);
}
}

26. How far is too far?

27. Demo time 🤓

28. Thinking of practical use-cases of Portals

29. Error boundaries
Handling JavaScript errors in components

30. Method #1
Don’t have any errors in
your components

31. Method #2
Don’t open the console, and
you won’t see any errors

32. Method #3
componentDidCatch

33. componentDidCatch
• If a class component defines this method,
it becomes an error boundary.
• Error boundaries only catch errors in the
components below them in the tree.
• An error boundary can’t catch an error
within itself.

34. class ErrorBoundary extends React.Component {
state = { hasError: false }
componentDidCatch(error, info) {
this.setState({ hasError: true });
logErrorToMyService(error, info);
}
render() {
if (this.state.hasError) {
return <h1>Something went wrong. </h1>;
}
return this.props.children;
}
}

35. const App = () => (
<div>
<h1> This is our app </h1>
<ErrorBoundary>
<GalleryWidget />
</ErrorBoundary>
</div>
);

36. Wrap the entire app in
<ErrorBoundary/>

38. React Fiber

39. Fiber = fast
TL;DR
Not Fiber = slow

40. React Fiber
It is responsible for most of the new features in
React 16, like error boundaries and fragments.
Async rendering - apps are more responsive
because React avoids blocking the main
thread.

42. createRef
(isn't meant to replace callback refs)
class MyComponent extends Component {
divRef = React.createRef();
render() {
return (
<div>
<input type="text" ref={this.divRef} />
</div>
);
}
componentDidMount() {
this.divRef.value.focus();
}
}

43. New Context API 🎉 🎉 🎉 🎉

44. 2018 is gonna be
remembered for 2 things
Tide Pods & Context

45. Demo time 🤓

46. getDerivedStateFromProps
getPropsAndUpdateTheStateOn
EveryUpdateOfTheProps

47. getDerivedStateFromProps
• A static method
• Exists on the class, not on the instance
• Updates state based on change of props

48. getDerivedStateFromProps
static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.currentRow === prevState.lastRow) {
return null;
}
const isScrolling = nextProps.currentRow > prevState.lastRow;
return {
lastRow: nextProps.currentRow,
isScrollingDown: isScrolling
};
}

49. Will be deprecated in React 16.4
☠ componentWillMount
☠ componentWillUpdate
☠ componentWillReceiveProps

50. MAYBE in React 16.4
😱 New component API (no
classes)
(take with a grain of salt)

51. IT’S STABLE ENOUGH FOR PRODUCTION
ALSO PLS SHOW A DEMO OF IT
AT CONFERENCES 😍

52. react-call-return
import {
unstable_createCall, unstable_createReturn
} from 'react-call-return';

53. Make it stable
import {
unstable_createCall as createCall,
unstable_createReturn as createReturn
} from 'react-call-return';

54. Demo time 🤓

55. ✅ kitze.io
😞 @thekitze on Twitter
✅ @kitze on GitHub
✅ @kitze on Medium

56. Please ask me anything except:
- What font is that?
- What font size is that?
- What editor is that?
- What theme do you use?
☢

57. Bedankt en tot ziens 🙏
@thekitze
reactacademy.io
@kitze
@kitze