The New React Lifecycles @raphamorims 

Hi, I’m Raphael アモリム 

No content

^[email protected] 

• Official Context API • createRef API • forwardRef API • Component Lifecycle Changes What’s New? 

• Official Context API • createRef API • forwardRef API • Component Lifecycle Changes What’s New? 

• Official Context API • createRef API • forwardRef API • Component Lifecycle Changes What’s New? 

• Official Context API • createRef API • forwardRef API • Component Lifecycle Changes What’s New? 

• Official Context API • createRef API • forwardRef API • Component Lifecycle Changes • Strict Mode What’s New? 

• Official Context API • createRef API • forwardRef API • Component Lifecycle Changes • Strict Mode • React Hooks What’s New? 

New context API const ThemeContext = React.createContext('light'); 

New context API const ThemeContext = React.createContext('light'); class ThemeProvider extends React.Component { state = {theme: 'light'}; render() { return ( {this.props.children} ); } } 

New context API class ThemedButton extends React.Component { render() { return ( {theme => } ); } } 

createRef class InputComponent extends Component { constructor(props) { super(props); this.inputRef = React.createRef(); } componentDidMount() { this.inputRef.current.focus(); } render() { return ; } } 

Callback refs will continue to be supported in addition to the new createRef API. You don’t need to replace callback refs in your components. 

const FancyButton = React.forwardRef((props, ref) => ( {props.children} )); // You can now get a ref directly to the DOM button: const ref = React.createRef(); Click me!; fowardRef 

import React from 'react'; function Application() { return ( ); } StrictMode * StrictMode is a tool for highlighting potential problems in an application. Like Fragment, StrictMode does not render any visible UI. 
 It activates additional checks and warnings for its descendants. 

• Identifying components with unsafe lifecycles • Warning about legacy string ref API usage • Warning about deprecated findDOMNode usage • Detecting unexpected side effects • Detecting legacy context API StrictMode 

StrictMode 

StrictMode You probably are like this: 

StrictMode No one likes a lint error, but it is useful. 

New and the Old React Lifecycles 

Legacy lifecycles will continue to work until version 17. New and the Old React Lifecycles 

• componentWillMount • componentWillReceiveProps • componentWillUpdate Deprecated now and will be removed in React 17 

• UNSAFE_componentWillMount • UNSAFE_componentWillReceiveProps • UNSAFE_componentWillUpdate Works on React 17 * Works with some bugs 

• getDerivedStateFromProps • getSnapshotBeforeUpdate New lifecycles 

getDerivedStateFromProps 

getDerivedStateFromProps // Before class ExampleComponent extends React.Component { state = { isScrollingDown: false, }; componentWillReceiveProps(nextProps) { if (this.props.currentRow !== nextProps.currentRow) { this.setState({ isScrollingDown: nextProps.currentRow > this.props.currentRow, }); } } } 

// After class ExampleComponent extends React.Component { // Initialize state in constructor, // Or with a property initializer. state = { isScrollingDown: false, lastRow: null, }; static getDerivedStateFromProps(props, state) { if (props.currentRow !== state.lastRow) { return { isScrollingDown: props.currentRow > state.lastRow, lastRow: props.currentRow, }; } // Return null to indicate no change to state. return null; } } 

getSnapshotBeforeUpdate 

// Before class ScrollingList extends Component { listRef = null; previousScrollOffset = null; componentWillUpdate(nextProps, nextState) { // Are we adding new items to the list? // Capture the scroll position so we can adjust scroll later. if (this.props.list.length < nextProps.list.length) { this.previousScrollOffset = this.listRef.scrollHeight - this.listRef.scrollTop; } } componentDidUpdate(prevProps, prevState) { // If previousScrollOffset is set, we've just added new items. // Adjust scroll so these new items don't push the old ones out of view. if (this.previousScrollOffset !== null) { this.listRef.scrollTop = this.listRef.scrollHeight - this.previousScrollOffset; this.previousScrollOffset = null; } } ... 

class ScrollingList extends Component { listRef = null; getSnapshotBeforeUpdate(prevProps, prevState) { // Are we adding new items to the list? // Capture the scroll position so we can adjust scroll later. if (prevProps.list.length < this.props.list.length) { return ( this.listRef.scrollHeight - this.listRef.scrollTop ); } return null; } componentDidUpdate(prevProps, prevState, snapshot) { // If we have a snapshot value, we've just added new items. // Adjust scroll so these new items don't push the old ones out of view. // (snapshot here is the value returned from getSnapshotBeforeUpdate) if (snapshot !== null) { this.listRef.scrollTop = this.listRef.scrollHeight - snapshot; } } ... 

No content

reactjs.org/blog/2018/03/27/update-on-async-rendering.html Further Reading 

migrating it. 

github.com/facebook/jscodeshift 

github.com/reactjs/react-codemod 

$ jscodeshift -t ./unsafe-mod.js ./src --parser=flow -t 

$ jscodeshift -t ./unsafe-mod.js ./src --parser=flow files or directory to transform -t 

$ jscodeshift -t ./unsafe-mod.js ./src --parser=flow files or directory to transform -t 

- "enzyme": "^3.3.0", - "enzyme-adapter-react-16": “^1.1.1” - "react-test-renderer": "^16.2.0", + "enzyme": "^3.6.0", + "enzyme-adapter-react-16": “^1.5.0", + "react-test-renderer": “^16.5.1", 

- wrapper.instance().componentWillMount(); + wrapper.instance().UNSAFE_componentWillMount(); 

Hooks 

No content

https://reactjs.org/docs/ hooks-intro.html 

Hooks import { useState } from 'react'; function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); return ( ); } 

Looks like Recompose. Feels like Recompose. 

import { useState, useEffect } from 'react'; function Example() { const [count, setCount] = useState(0); // Similar to componentDidMount and componentDidUpdate: useEffect(() => { // Update the document title using the browser API document.title = `You clicked ${count} times`; }); return ( ); } 

class Example extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } componentDidMount() { document.title = `You clicked ${this.state.count} times`; } componentDidUpdate() { document.title = `You clicked ${this.state.count} times`; } render() { return ( ); } } 

Cleanup 

class FriendStatus extends React.Component { constructor(props) { super(props); this.state = { isOnline: null }; this.handleStatusChange = this.handleStatusChange.bind(this); } componentDidMount() { ChatAPI.subscribeToFriendStatus( this.props.friend.id, this.handleStatusChange ); } componentWillUnmount() { ChatAPI.unsubscribeFromFriendStatus( this.props.friend.id, this.handleStatusChange ); } handleStatusChange(status) { this.setState({ isOnline: status.isOnline }); } render() { 

import { useState, useEffect } from 'react'; function FriendStatus(props) { const [isOnline, setIsOnline] = useState(null); function handleStatusChange(status) { setIsOnline(status.isOnline); } useEffect(() => { ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange); // Specify how to clean up after this effect: return function cleanup() { ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange); }; }); if (isOnline === null) { return 'Loading...'; } return isOnline ? 'Online' : 'Offline'; } 

Cleanup 

// Create a Context const NumberContext = React.createContext(); // It returns an object with 2 values: // { Provider, Consumer } const context = useContext(Context); 

Basic Hooks useState useEffect useContext Additional Hooks useReducer useCallback useMemo useRef useImperativeMethods useMutationEffect useLayoutEffect 

https:// reactjs.org/blog/2018/03/29/ react-v-16-3.html 

https://reactjs.org/docs/ hooks-reference.html