This document discusses recent changes and new features in React, including fragments, lifecycle method deprecations, the Context API, React.memo for function components, lazy loading with Suspense, and the introduction of React hooks. Key changes include fragments for returning multiple elements without a wrapping div, deprecation of unsafe lifecycle methods, the Context API for sharing data across components without prop drilling, memo for optimizing function components, and lazy loading and Suspense for code splitting. Hooks are also introduced as the future of React for adding local state and logic to function components.

1. What'snewinReact?
HTGrenoble November 2018 - @sabativi

2. VictorSabatier
Freelance Web and mobile
developper.
Build stuff using Meteor,
GraphQL, React and React native.
Love learning and sharing
victor@reactivic.com
HTGrenoble November 2018 - @sabativi

3. Thisisnot
HTGrenoble November 2018 - @sabativi

4. May2017
HTGrenoble November 2018 - @sabativi

5. React was invented as an alternative to manual
DOM manipulation.
HTGrenoble November 2018 - @sabativi

6. · Virtual DOM.
· One way data flow.
· Reconciliation
HTGrenoble November 2018 - @sabativi

7. Reactchangelog
HTGrenoble November 2018 - @sabativi

8. · Fragments
· LifeCycle deprecation
· Context API
· Memo
· Lazy with Suspense
HTGrenoble November 2018 - @sabativi

9. Fragments
import React, { Fragment } from 'react';
...
render() {
return (
<Fragment>
Some text.
<h2>A heading</h2>
</Fragment>
);
}
HTGrenoble November 2018 - @sabativi

10. LifeCycledeprecation
· UNSAFE_componentWillMount
· UNSAFE_componentWillReceiveProps
· UNSAFE_componentWillUpdate
HTGrenoble November 2018 - @sabativi

11. LifeCyclemethodsthatreplacemostusecases
· getSnapshotBeforeUpdate
· componentDidUpdate
· getDerivateStateFromProps
HTGrenoble November 2018 - @sabativi

12. ContextAPI
· Avoid props drilling
· Avoid using redux when hitting this problem.
· Example
HTGrenoble November 2018 - @sabativi

13. Memo
It is React.PureComponent for function
component.
const MyComponent = React.memo(function MyComponent(props) {
/* render using props */
});
HTGrenoble November 2018 - @sabativi

14. Lazy
Before
import OtherComponent from './OtherComponent';
function MyComponent() {
return (
<div>
<OtherComponent />
</div>
);
}
HTGrenoble November 2018 - @sabativi

15. Lazy
A!er
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
return (
<div>
<OtherComponent />
</div>
);
}
HTGrenoble November 2018 - @sabativi

16. Applyitnow1
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import React, { Suspense, lazy } from 'react';
const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));
const App = () => (
<Router>
<Suspense fallback={<div>Loading...</div>}>
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
</Switch>
</Suspense>
</Router>
);
1
If not using SSR, if so ReactLoadable
HTGrenoble November 2018 - @sabativi

17. Bonus:hooks2
2
In react 16.7.alpha. Not production ready.
HTGrenoble November 2018 - @sabativi

18. Add local state to function component
import { useState } from 'react';
function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
return (
<Fragment>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</Fragment>
);
}
HTGrenoble November 2018 - @sabativi

19. Reusestatefullogicnotstate.
import { useState, useEffect } from 'react';
function useFriendStatus(friendID) {
const [isOnline, setIsOnline] = useState(null);
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
useEffect(() => {
ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
return () => {
ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
};
});
return isOnline;
}
HTGrenoble November 2018 - @sabativi

20. function FriendStatus(props) {
const isOnline = useFriendStatus(props.friend.id);
if (isOnline === null) {
return 'Loading...';
}
return isOnline ? 'Online' : 'Offline';
}
function FriendListItem(props) {
const isOnline = useFriendStatus(props.friend.id);
return (
<li style={{ color: isOnline ? 'green' : 'black' }}>
{props.friend.name}
</li>
);
}
HTGrenoble November 2018 - @sabativi

21. HooksisthefutureofReact
HTGrenoble November 2018 - @sabativi

22. Thanks
HTGrenoble November 2018 - @sabativi