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