Rethinking in React 16

New Features in React 16. x

Transcript

2. H !!
3. Developer,Works on React, Javascript Blogger & Podcaster Instructor @ Geekabyte M D
4. @manjula_dube
6. • Split separable work into chunks. • Pause work and come back to it later. • Reuse previously completed work. • Abort work.
8. React 16 runs in compatibility mode that for the most part is equivalent to how React 15 scheduled rendering.
9. Problem #1 Adjacent JSX Tags should be wrapped with another parent element.
10. import React, { Component } from "react" class MyComponent extends Component { render() { return ( <button radius="4" className="cart”> <span>Add to Cart</span> </button> <span className="buyWrapper">Buy</span> ) } } export default MyComponent
11. Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag
12. Solution Using React Fragment
13. import React, { Fragment } from "react"; render() { return ( <Fragment> <button radius="4" className="cart"> <span>Add to Cart</span> </button> <span className="buyWrapper"> Buy </span> </Fragment> ) }
14. React.createElement(Fragment, null, React.createElement("button", { radius: "4", className: "cart" }, React.createElement("span", null, "Add to Cart")), React.createElement("span", { className: "buyWrapper" }, "Buy"));
15. Problem #2 JavaScript errors inside components used to corrupt React’s internal state and cause it to emit cryptic errors on next renders.
16. Solution Using Error Boundaries
17. class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } componentDidCatch(error, info) { this.setState({ hasError: true }); logErrorToMyService(error, info); } render() { if (this.state.hasError) { return <h1>Something wentwrong.</h1> } return this.props.children; } } <ErrorBoundary> <MyComponent /> </ErrorBoundary>
19. unstable_handleError componentDidCatch React 15 React 16.2
20. Error Boundaries
21. Problem #3 Custom DOM attributes
22. <div boxname="test" /> // will be displayed in React 15 as: <div /> <div boxname="test" /> // will be displayed in React 16 as: <div boxname="test" />
23. React’s new Context API
25. Context API
26. I SWEAR YOU CAN USE IT….
27. Its no longer experimental...
28. const myContext = React.createContext(“hello”); console.log(myContext)
30. import React from 'react'; import ReactDOM from 'react-dom'; const myContext = React.createContext('hello') const myProvider = ({children})=> <myContext.Provider value="world"> {children} </myContext.Provider> Provider
31. import React from 'react'; import ReactDOM from 'react-dom'; const myContext = React.createContext('hello') const myProvider = ({children})=> <myContext.Provider value="hello world"> {children} </myContext.Provider>)
32. import React from 'react'; import ReactDOM from 'react-dom'; const myContext = React.createContext('hello') const myProvider = ({children})=> <myContext.Provider value="world"> {children} </myContext.Provider>
33. import React from 'react'; import ReactDOM from 'react-dom'; const myContext = React.createContext('hello') const myProvider = ({children})=> <myContext.Provider value="world"> {children} </myContext.Provider>) const App = () => ( <myProvider
34. Consumer const App = () => ( <myProvider> </myContext.Consumer> {context => <h1> Hello, {context}! </h1>} </myContext.Consumer> </myProvider> )
35. Consumer const App = () => ( <myProvider> <myContext.Consumer> {context => <h1> Hello, {context}! </h1>} </myContext.Consumer> </myProvider> )
36. Consumer const App = () => ( <myProvider> <myContext.Consumer> {context => <h1> Hello, {context}! </h1>} </myContext.Consumer> </myProvider> )
37. Demo
38. Yuse Use Cases Reduce Prop Drilling Data flow (Unstated) Theming
39. In smaller apps, let it go…..
40. The old context API will keep working for all React 16.x releases, so you will have time to migrate. Dont Worry
42. Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
43. ReactDOM.createPortal(child, container)
44. When would you use them?
45. Demo
46. New Refs API
47. Types of API Legacy String Refs Newer Callback Refs Amazing Object Refs Super amazing forwardRef API
48. Legacy String Ref class Hello extends Component { componentDidMount (){ this.refs.myRef.focus(); } render() { return ( <div className="App"> <input type="text" ref="myRef"/> </div> ); } }
49. class Hello extends Component { componentDidMount(){ this.refs.myRef.focus(); } render() { return ( <div className="App"> <input type="text" ref="myRef"/> </div> ); } }
50. class Hello extends Component { componentDidMount(){ this.refs.myRef.focus(); } render() { return ( <div className="App"> <input type="text" ref="myRef"/> </div> ); } }
51. Design seems to be problem Async Problems Render Prop Problems Static Typing Problems
52. Newer Callback Refs
53. class Hello extends Component { componentDidMount(){ this.myRef.focus(); } render() { return ( <div className="App"> <input type="text" ref="{element => this.myRef = element}"/> </div> ); } }
54. class Hello extends Component { componentDidMount(){ this.myRef.focus(); } render() { return ( <div className="App"> <input type="text" ref="{element => this.myRef = element}"/> </div> ); } }
55. Better Design but less user friendly
56. Lets have a look at Object Refs
57. class Hello extends Component { myRef = React.createRef() componentDidMount(){ this.myRef.current.focus(); } render() { return ( <div className="App"> <input type="text" ref={this.myRef}/> </div> ); } }
58. class Hello extends Component { myRef = React.createRef() componentDidMount(){ this.myRef.current.focus(); } render() { return ( <div className="App"> <input type="text" ref={this.myRef}/> </div> ); } }
59. class Hello extends Component { myRef = React.createRef() componentDidMount(){ this.myRef.current.focus(); } render() { return ( <div className="App"> <input type="text" ref={this.myRef}/> </div> ); } }
60. They are simple without problems
61. Forward Refs API
62. const MyInput = React.forwardRef((props, ref) => <input ref={ref} {...props} />); class App extends React.Component { textInput = React.createRef(); componentDidMount() { this.textInput.current.focus() } render() { return ( <div style={styles}> <MyInput ref={this.textInput} /> </div> ); }}
63. TAKE AWAYS String Refs will get deprecated Object Refs should fit most of our cases Callback Refs can be used for advanced usecase Use forwardsRefs to access nested element
64. UNCONTROLLED COMPONENTS
65. Stores its own state internally, and you query the DOM using A ref to find its current value when you need it. This is a bit more like traditional HTML
66. Refs are bad :(
67. Its Non React way of doing things :(
68. Contradictory????
69. They are not... Just Don’t Overuse Refs
71. Render Props
72. sharing code between React components using a prop whose value is a function.
73. <DataProvider render={ data => ( <h1>Hello {data.target}</h1> )}/>
74. When to use render props?
76. export default class RepoList extends React.Component { _fetch = async () => { const res = await fetch("api/url"); const json = await res.json(); this.setState({repos: json, isLoading: false }); }; componentDidMount() {this.setState({ isLoading: true }, this._fetch); }}
77. render() { const {repos, isLoading } = this.state; return ( <div> <h3>My Repo List</h3> {isLoading && repos.length > 0 && ( {repos.map(repo => ( <li key={repo.id}> {repo.title} </li> )} )} </div> ); }
78. class List extends React.Component { _fetch = async () => { const res = await fetch(this.props.url); const json = await res.json(); this.setState({ list: json, isLoading: false, }); } componentDidMount() {this.setState({ isLoading: true }, this._fetch);} render(){ this.props.render(this.state);} }
79. const App = () => ( <div> <List url="https://api.github.com/users/manjula91/repos" render={({ repoList, isLoading }) => ( <div> {isLoading && <h2>Loading...</h2>} {repoList.length > 0 && repoList.map(repo => ( <li key={repo.id}> {repo.full_name} </li> ))} </div> )} /> </div> );
80. Demo
82. Update on Life Cycle Methods
83. componentWillMount  —  please use componentDidMount instead componentWillUpdate  —  please use componentDidUpdate instead componentWillReceiveProps  — a new function, static getDerivedStateFromProps is introduced
84. componentWillMount  —  please use componentDidMount instead componentWillUpdate  —  please use componentDidUpdate instead componentWillReceiveProps  — a new function, static getDerivedStateFromProps is introduced
85. componentWillMount  —  please use componentDidMount instead componentWillUpdate  —  please use componentDidUpdate instead componentWillReceiveProps  — a new function, static getDerivedStateFromProps is introduced
87. WHY DEPRECATION ? RFC To React
88. class MyClass extends Component { static getDerivedStateFromProps(nextProps, prevState){ if(nextProps.value !== prevState.value){ return ({value:nextProps.value}) } } } getDerivedStateFromProps
89. getSnapshotBeforeUpdate
90. class MySample extends Component { listRef = React.createRef() getSnapshotBeforeUpdate (prevProps,prevState){ return prevProps.list.length < this.props.length ? this.listRef.scrollHeight : null; } componentDidUpdate (prevProps,prevState, snapshot){ if(snapshot != null){ const listRef = this.listRef listRef.scrollTop += listRef.scrollHeight - snapshot } } render (){return <div ref={this.listRef}>{/* ... */}</div>} }
91. class MySample extends Component { listRef = React.createRef() getSnapshotBeforeUpdate(prevProps,prevState){ return prevProps.list.length < this.props.length ? this.listRef.scrollHeight : null; } componentDidUpdate(prevProps,prevState, snapshot){ if(snapshot != null){ const listRef = this.listRef listRef.scrollTop += listRef.scrollHeight - snapshot } } render (){return <div ref={this.listRef}>{/* ... */}</div>} }
92. class MySample extends Component { listRef = React.createRef() getSnapshotBeforeUpdate(prevProps,prevState){ return prevProps.list.length < this.props.length ? this.listRef.scrollHeight : null; } componentDidUpdate(prevProps,prevState, snapshot){ if(snapshot != null){ const listRef = this.listRef listRef.scrollTop += listRef.scrollHeight - snapshot } } render (){return <div ref={this.listRef}>{/* ... */}</div>} }
93. class MySample extends Component { listRef = React.createRef() getSnapshotBeforeUpdate(prevProps,prevState){ return prevProps.list.length < this.props.length ? this.listRef.scrollHeight : null; } componentDidUpdate(prevProps,prevState, snapshot){ if(snapshot != null){ const listRef = this.listRef listRef.scrollTop += listRef.scrollHeight - snapshot } } render (){return <div ref={this.listRef}>{/* ... */}</div>} }
94. Timeline // will be deprecated in future version of React 16.x release componentWillReceiveProps(nextProps){} // UNSAFE_ introduced in React 16.3 and will be available till 17.0 UNSAFE_componentWillReceiveProps(nextProps){} // instead use… static getDerivedStateFromProps(nextprops,prevState){}
95. Timeline // will be deprecated in future version of React 16.x release componentWillReceiveProps(nextProps){} // UNSAFE_ introduced in React 16.3 and will be available till 17.0 UNSAFE_componentWillReceiveProps(nextProps){} // instead use… static getDerivedStateFromProps(nextprops,prevState){}
96. Timeline // will be deprecated in future version of React 16.x release componentWillReceiveProps(nextProps){} // UNSAFE_ introduced in React 16.3 and will be available till 17.0 UNSAFE_componentWillReceiveProps(nextProps){} // instead use… static getDerivedStateFromProps(nextprops,prevState){}
97. CODEMOD REACT-CODEMOD
98. React LifeCycle Compat Polyfill import React from 'react'; import polyfill from 'react-lifecycles-compat'; class MyComponent extends React.Component { static getDerivedStateFromProps(nextProps,prevState){} } polyfill(MyComponent); export default MyComponent;
99. React LifeCycle Compat Polyfill import React from 'react'; import polyfill from 'react-lifecycles-compat'; class MyComponent extends React.Component { static getDerivedStateFromProps(nextProps,prevState){} } polyfill(MyComponent); export default MyComponent;
100. React LifeCycle Compat Polyfill import React from 'react'; import polyfill from 'react-lifecycles-compat'; class MyComponent extends React.Component { static getDerivedStateFromProps(nextProps,prevState){} } polyfill(MyComponent); export default MyComponent;
101. React LifeCycle Compat Polyfill import React from 'react'; import polyfill from 'react-lifecycles-compat'; class MyComponent extends React.Component { static getDerivedStateFromProps(nextProps,prevState){} } polyfill(MyComponent); export default MyComponent;
102. STRICT MODE
103. import React, { StrictMode } from 'react'; function ExampleApplication () { return ( <div> <Header /> <StrictMode><div><ComponentOne /><ComponentTwo /></div> <StrictMode> <Footer /> </div> ); }
105. Identifying components with unsafe lifecycles Warning about legacy string ref API usage Detecting unexpected side effects
106. ASYNC MODE
107. ASYNC MODE import React , {unstable_AsyncMode as AsyncMode} OR const AsyncMode = React.unstable_AsyncMode
108. IDEA OF ASYNC MODE IS import React , {unstable_AsyncMode as AsyncMode} const LowPriority = () => <AsyncMode> <SomeComponent/> </AsyncMode>
109. UPDATED REACT DEV TOOLS
110. The future is yet to come
112. Beyond React 16 by Dan Abramov at JSConf