SoCal React presentation about React 16 componentDidCatch

1. React 16: Error Handling

2. David Slone
Front-End Engineer @ Stem
Twitter @dbslone
Github @dbslone

3. REACT 16

4. REACT 16
It’s finally here…almost

5. What’s New?https://github.com/facebook/react/issues/10294

6. What’s New?
• Fiber
https://github.com/facebook/react/issues/10294

7. What’s New?
• Fiber
• Error Boundaries
https://github.com/facebook/react/issues/10294

8. What’s New?
• Fiber
• Error Boundaries
• Returning arrays from render
https://github.com/facebook/react/issues/10294

9. What’s New?
• Fiber
• Error Boundaries
• Returning arrays from render
• Lots of other stuff
https://github.com/facebook/react/issues/10294

10. What’s New?
• Fiber
• Error Boundaries
• Returning arrays from render
• Lots of other stuff
https://github.com/facebook/react/issues/10294

11. Fiberhttps://github.com/acdlite/react-fiber-architecture

12. Fiber
• Complete rewrite of the React core
https://github.com/acdlite/react-fiber-architecture

13. Fiber
• Complete rewrite of the React core
• Unfortunately async render isn’t here yet
https://github.com/acdlite/react-fiber-architecture

14. Fiber
• Complete rewrite of the React core
• Unfortunately async render isn’t here yet
• https://www.youtube.com/watch?v=Qu_6ItnlDQg
https://github.com/acdlite/react-fiber-architecture

15. Inefficient Renders

16. Inefficient Renders
• React uses recursive diff’ing

17. Inefficient Renders
// Before
render() {
return (
<ul>
<li>Hollywood</li>
<li>Pasadena</li>
</ul>
)
}
// After
render() {
return (
<ul>
<li>Santa Monica</li>
<li>Hollywood</li>
<li>Pasadena</li>
</ul>
)
}
• React uses recursive diff’ing
• Inserting at the beginning of the list means
rendering the whole tree again

18. Inefficient Renders
// Before
render() {
return (
<ul>
<li>Hollywood</li>
<li>Pasadena</li>
</ul>
)
}
// After
render() {
return (
<ul>
<li>Santa Monica</li>
<li>Hollywood</li>
<li>Pasadena</li>
</ul>
)
}
• React uses recursive diff’ing
• Inserting at the beginning of the list means
rendering the whole tree again
• Best algorithms have a time complexity O(n3)

19. Inefficient Renders
// Before
render() {
return (
<ul>
<li>Hollywood</li>
<li>Pasadena</li>
</ul>
)
}
// After
render() {
return (
<ul>
<li>Santa Monica</li>
<li>Hollywood</li>
<li>Pasadena</li>
</ul>
)
}
• React uses recursive diff’ing
• Inserting at the beginning of the list means
rendering the whole tree again
• Best algorithms have a time complexity O(n3)
• 1000 elements === 1billion comparisons

20. The Solution?
https://facebook.github.io/react/docs/reconciliation.html

21. The Solution?
• Heuristics - using shortcuts today to
solve the problems of tomorrow
https://facebook.github.io/react/docs/reconciliation.html

22. The Solution?
// Before
render() {
return (
<ul>
<li key="Hollywood">Hollywood</li>
<li key="Pasadena">Pasadena</li>
</ul>
)
}
// After
render() {
return (
<ul>
<li key="Santa Monica">Santa Monica</li>
<li key="Hollywood">Hollywood</li>
<li key="Pasadena">Pasadena</li>
</ul>
)
}
• Heuristics - using shortcuts today to
solve the problems of tomorrow
• Using “key” allows React to match
children in the original tree with
children in the subsequent tree
https://facebook.github.io/react/docs/reconciliation.html

23. The Solution?
// Before
render() {
return (
<ul>
<li key="Hollywood">Hollywood</li>
<li key="Pasadena">Pasadena</li>
</ul>
)
}
// After
render() {
return (
<ul>
<li key="Santa Monica">Santa Monica</li>
<li key="Hollywood">Hollywood</li>
<li key="Pasadena">Pasadena</li>
</ul>
)
}
• Heuristics - using shortcuts today to
solve the problems of tomorrow
• Using “key” allows React to match
children in the original tree with
children in the subsequent tree
• Keys only need to be unique to
siblings not the global scope
https://facebook.github.io/react/docs/reconciliation.html

24. How is Fiber Different?

25. How is Fiber Different?
• A fiber is a JavaScript object that contains information
about a component, its input, and its output.

26. How is Fiber Different?
• A fiber is a JavaScript object that contains information
about a component, its input, and its output.
• Allows delaying the render of components by using a
priority system

27. Returning arrays

28. Returning arrays
render() {
return (
<div>Studio City</div>
<div>Century City</div>
)
}

29. Returning arrays
render() {
return this.props.item.map((item) => (
<li>{item}</li>
))
}

30. Error Handling
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
componentDidCatch(error, info) {
// Display fallback UI
this.setState({ hasError: true });
// You can also log the error to an error reporting service
logErrorToMyService(error, info);
}
render() {
if (this.state.hasError) {
// You can render any custom fallback UI
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}

31. TIME FOR A DEMO