The document discusses React features including fragments for flattening component hierarchy, component return types allowing arrays or strings, simplified component lifecycle with error handling, context for passing data to children without props, portals for rendering outside the root node, and improved refs with forwarding and createRef.

1. Ilya Ivanov
Mobile team lead at Ciklum

2.  1.5 years in react-native
 3 years in react
 7+ in software developement
Back-end
Web
front-end
Mobile
front-end
Ilya Ivanov

3.  Fragments
 Component return types
 Component Lifecycle
 Context
 Portals
 Minor
 Improved refs

4.  Fragments
 Component return types
 Component Lifecycle
 Context
 Portals
 Minor
 Improved refs

5. <div class="App">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
const Items = () => [
<li key="item1">Item 1</li>,
<li key="item2">Item 2</li>,
<li key="item3">Item 3</li>,
];
<div className="App">
<ul>
<Items/>
</ul>
</div>
HTML
JSX

6. <div className="App">
<ul>
<Items/>
</ul>
</div>
const Items = () => (
<Fragment>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</Fragment>
);
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
HTML

7. <ul>
<Items>
<Items>
<Items/>
</Items>
</Items>
</ul>
const Items = ({children}) => (
<Fragment>
{children}
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</Fragment>
);
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
HTML
are like Array.flatten()

8. <div className="App">
<ul>
<Items/>
</ul>
</div>
const Items = () => (
<>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</>
);
Failed to compile
./src/App.js
Syntax error: Unexpected token (5:3)
3 |
4 | const Items = () => (
> 5 | <>
| ^
6 | <li>Item 1</li>
7 | <li>Item 2</li>
8 | <li>Item 3</li>

9. <div class="App">
<ul>
<li>ITEM 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
const Items = () => [
<li key="item1">
<ToUpper>Item 1</ToUpper>
</li>,
<li key="item2">Item 2</li>,
<li key="item3">Item 3</li>
];
HTMLJSX
const ToUpper = ({children}) =>
children ? children.toUpperCase() : '';

10.  Fragments
 Component return types
 Component Lifecycle
 Context
 Portals
 Minor
 Improved refs

11. Birth Growth Death

12. Mount Update Unmount

13. Mount Update Unmount

14. Mount Update Unmount
constructor
componentWillMount
render
componentDidMount

15. Mount Update Unmount
constructor
componentWillMount
render
componentDidMount

16. Mount Update Unmount
constructor
getDerivedStateFromProps
render
componentDidMount

17. class ToggleButton extends Component {
state = {
checked: false,
};
onToggle = () =>
this.setState({checked: !this.state.checked});
render = () => (
<div>
<Switch onChange={this.onToggle} checked={this.state.checked}/>
</div>
);
}

18. class ToggleButton extends Component {
//...
static getDerivedStateFromProps(nextProps, prevState) {
return {
checked: nextProps.state &&
nextProps.state.toLowerCase() === 'on',
};
}
//...
}
<ToggleButton state="ON"/>
<ToggleButton />

19. Mount Update Unmount
constructor
getDerivedStateFromProps
render
componentDidMount

20. Mount Update Unmount
componentWillReceiveProps shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate
statesprops

21. Mount Update Unmount
componentWillReceiveProps shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate
statesprops

22. Mount Update Unmount
getDerivedStateFromProps shouldComponentUpdate
render
getSnapshotBeforeUpdate
componentDidUpdate
statesprops

23. class ToggleButton extends Component {
//...
getSnapshotBeforeUpdate(prevProps, prevState) {
//capture state from DOM
return {height: 42};
}
componentDidUpdate(prevProps, prevState, snapshot){
//snapshot {height: 42}
//update DOM after render if needed
}
//...
}

24. Mount Update Unmount
getDerivedStateFromProps shouldComponentUpdate
render
getSnapshotBeforeUpdate
componentDidUpdate
statesprops

25. Mount Update Unmount
componentWillUnmount

26. Mount Update Unmount
getDerivedStateFromProps shouldComponentUpdate
render
getSnapshotBeforeUpdate
componentDidUpdate
statesprops
constructor
getDerivedStateFromProps
render
componentDidMount

27. Mount Update Unmount
statesprops
getDerivedStateFromProps shouldComponentUpdate
getSnapshotBeforeUpdate
componentDidUpdate
constructor
render
componentDidMount

28. Mount Update Unmount
statesprops
getDerivedStateFromProps
shouldComponentUpdate
getSnapshotBeforeUpdatecomponentDidUpdate
constructor
render
componentDidMount

29. Mount Update Unmount
getDerivedStateFromProps
shouldComponentUpdate
componentDidUpdate
constructor
render
componentDidMount

30. Mount Update Unmount
getDerivedStateFromProps
shouldComponentUpdate
componentDidUpdate
constructor
render
componentDidMount
Pure
Unpure

31. Mount Update Unmount
componentDidCatch (in parent)

32. class ToggleButton extends Component {
componentDidCatch() {
//not going to be called
}
componentDidMount() {
({}).nonExistingMethod();
}
}
class App extends Component {
render = () => (
<div className="App">
<ToggleButton/>
</div>
);
}

33. class ToggleButton extends Component {
componentDidMount() {
({}).nonExistingMethod();
}
}
class App extends Component {
state = {};
componentDidCatch() {
this.setState({error: true});
}
render = () => (
<div className="App">
{
this.state.error ?
<div>Error occured</div> :
<ToggleButton/>
}
</div>
);
}

34. class ErrorBoundary extends Component {
state = {};
componentDidCatch() {
this.setState({error: true});
}
render = () =>
this.state.error ?
<div>Error occured</div> :
this.props.children;
}
class App extends Component {
render = () => (
<div className="App">
<ErrorBoundary>
<ToggleButton/>
</ErrorBoundary>
</div>
);
}

35. class ToggleButton extends Component {
render = () => (
<div className="center">
<Switch onChange={() => ({}).nonExistingMethod()}/>
</div>
);
}

36. class ToggleButton extends React.Component {
componentDidMount() {
({}).nonExistingMethod();
}
}

37.  Simplified flow
 Error handling for lifecycle stages
 Pure/unpure division is required before migrating to async render

38.  Fragments
 Component return types
 Component Lifecycle
 Context
 Portals
 Minor
 Improved refs

39. const ThemeContext = React.createContext();
class ThemeProvider extends React.Component {
state = {color: 'red'};
render() {
return (
<ThemeContext.Provider value={this.state}>
{this.props.children}
</ThemeContext.Provider>
);
}
}

40. class ToggleButton extends React.Component {
///...
render = () => (
<ThemeContext.Consumer>
{
theme => <span style={{color: theme.color}}>Toggle</span>
}
</ThemeContext.Consumer>
);
}

41. class App extends Component {
render = () => (
<div className="App">
<ThemeProvider>
<ToggleButton/>
</ThemeProvider>
</div>
);
}

43.  Fragments
 Component return types
 Component Lifecycle
 Context
 Portals
 Minor
 Improved refs

44.  Used to update DOM outside of react root
<div id="root"></div>
<div id="logs"></div>
index.html

45. class App extends Component {
state = {
logs: [],
};
onToggle = () =>
this.setState({logs: this.state.logs.concat('Toggled a button')});
render() {
return (
<div className="App">
<ToggleButton onToggle={this.onToggle}/>
{ReactDOM.createPortal(
this.state.logs.map(log => <div>{log}</div>),
document.getElementById('logs'),
)}
</div>
);
}
} <div id="root"></div>
<div id="logs"></div>
index.html:

46.  Fragments
 Component return types
 Component Lifecycle
 Context
 Portals
 Minor
 Improved refs

47. const Label = ({text, innerRef}) => (
<span ref={innerRef} style={{color: 'red'}}>
{text}
</span>
);
const element = <Label text="JS Evening"/>;
const element =
<Label
text="JS Evening"
innerRef={instance => this.instance = instance)}
/>

48. instance = React.createRef();
const element =
<Label
text="JS Evening"
innerRef={this.instance}
/>
const Label = ({text, innerRef}) => (
<span ref={innerRef} style={{color: 'red'}}>
{text}
</span>
);

49. instance = React.createRef();
const element =
<Label
text="JS Evening"
ref={this.instance}
/>
const Label = React.forwardRef(({text}, ref) => (
<span ref={ref} style={{color: 'red'}}>
{text}
</span>)
);

50.  Fragments – provides a way to flatten component hierarchy
 Component may return array or string
 Component Lifecycle
 Simplified flow
 Error handling for lifecycle stages
 Pure/unpure division is required before migrating to async render
 Context –pass data to children without props
 Portals – render component outside of the root
 Minor
 Improved refs – forwarding and createRef