What's new in React

What'snewinReact?
HTGrenoble November 2018 - @sabativi

VictorSabatier
Freelance Web and mobile
developper.
Build stuﬀ using Meteor,
GraphQL, React and React native.
Love learning and sharing
victor@reactivic.com

Thisisnot

May2017

React was invented as an alternative to manual
DOM manipulation.

· Virtual DOM.
· One way data flow.
· Reconciliation

Reactchangelog

· Fragments
· LifeCycle deprecation
· Context API
· Memo
· Lazy with Suspense

Fragments
import React, { Fragment } from 'react';
...
render() {
return (
<Fragment>
Some text.
<h2>A heading</h2>
</Fragment>
);
}

LifeCycledeprecation
· UNSAFE_componentWillMount
· UNSAFE_componentWillReceiveProps
· UNSAFE_componentWillUpdate

LifeCyclemethodsthatreplacemostusecases
· getSnapshotBeforeUpdate
· componentDidUpdate
· getDerivateStateFromProps

ContextAPI
· Avoid props drilling
· Avoid using redux when hitting this problem.
· Example

Memo
It is React.PureComponent for function
component.
const MyComponent = React.memo(function MyComponent(props) {
/* render using props */
});

Lazy
Before
import OtherComponent from './OtherComponent';
function MyComponent() {
return (
<div>
<OtherComponent />
</div>
);
}

Lazy
A!er
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
return (
<div>
<OtherComponent />
</div>
);
}

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

Bonus:hooks2
2
In react 16.7.alpha. Not production ready.

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

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;
}

HooksisthefutureofReact

Thanks

What's new in React

More Related Content

What's hot (20)

Similar to What's new in React (20)

More from sabativi (9)

Recently uploaded (20)

What's new in React