React Native what's Next?

It’s almost the end of 2018 and while we’re waiting for 2019 to come, let’s prepare ourselves for the changes that are happening in React and React Native ecosystem in the following year.

Core teams from both technologies have introduced very interesting roadmaps. A lot of good stuff is expected, some has already come unnoticed, some is yet to come.

Transcript

1. What’s Next? (in React Native)
2. React Native Next pavlo.babenko@gmail.com @babenkop Pavlo Babenko
3. React Native Next
4. What? React Native Next React.memo
5. React Native Next Performant Function components Why?
6. React Native Next import React, { Component } from 'react'; import { TouchableOpacity, Text } from 'react-native'; class Button extends Component { render() { const { text, onPress } = this.props; return <TouchableOpacity onPress={onPress}> <Text>{text}</Text> </TouchableOpacity>; } }
7. React Native Next import React, { PureComponent } from 'react'; import { TouchableOpacity, Text } from 'react-native'; class Button extends PureComponent { render() { const { text, onPress } = this.props; return <TouchableOpacity onPress={onPress}> <Text>{text}</Text> </TouchableOpacity>; } }
8. React Native Next import React from 'react'; import { TouchableOpacity, Text } from 'react-native'; const Button = React.memo(function Button(props) { const { text, onPress } = this.props; return <TouchableOpacity onPress={onPress}> <Text>{text}</Text> </TouchableOpacity>; });
9. No need to write Class components anymore! React Native Next
10. React Native Next YES! Can I use it in RN?
11. React Native Next
12. React Native Next React.lazy && Suspense What?
13. React Native Next lazy loading Why?
14. React Native Next import React from 'react'; const HeavyComponent = React.lazy(() => import('./HeavyComponent')); function RegularComponent() { return ( <React.Suspense fallback={<LoadingIndicator/>} > <View> <HeavyComponent /> </View> </React.Suspense> ); }
15. React Native Next but what for? YES! Can I use it in RN?
16. When? React 16.6.0 (Oct, 23, 2018) React Native Next
17. React Native Next Hooks What?
18. React Native Next no need to use Class anymore Why?
19. React Native Next import React from 'react'; import { TouchableOpacity, Text } from 'react-native'; function HookedComponent() { const [isLightsOn, setLights] = useState(false); return ( <TouchableOpacity onPress={() => setLights(!isLightsOn)}> <Text>Turn lights {isLightsOn ? 'Off' : 'On'}</Text> </TouchableOpacity> ); }
20. React Native Next function HookedComponent() { const [isLightsOn, setLights] = useState(false); return ( <TouchableOpacity onPress={() => setLights(!isLightsOn)}> <Text>Turn lights {isLightsOn ? 'Off' : 'On'}</Text> </TouchableOpacity> ); } class NotHookedComponent extends React.Component { state = { isLightsOn: false }; toggleLights = () => { const { isLightsOn } = this.state; this.setState({isLightsOn: !isLightsOn}); } render() { const { isLightsOn } = this.state; return ( <TouchableOpacity onPress={this.toggleLights}> <Text>Turn lights {isLightsOn ? 'Off' : 'On'}</Text> </TouchableOpacity> ); } }
21. React Native Next function HookedComponent() { const [isLightsOn, setLights] = useState(() => { waitForItFunction(); return false; }); return ( <TouchableOpacity onPress={() => setLights(!isLightsOn)}> <Text>Turn lights {isLightsOn ? 'Off' : 'On'}</Text> </TouchableOpacity> ); }
22. React Native Next
23. React Native Next useState, that’s all? • useState • useEffect • useContext • useReducer • useCallback • useMemo • useRef • useImperativeMethods • useLayoutEffects
24. useEffect React Native Next
25. React Native Next function Comments(props) { const { postId } = props const [comments, setComments] = useState([]); useEffect(() => { // componentDidMount / componentWillUpdate subscribeToCommentsFor(postId, setComment); // componentWillUnmount return () => { unsubscribeFromCommentsFor(postId); } }, [postId]); return <FlatList data={comments} />; }
26. React Native Next function Comments(props) { const { postId } = props const [comments, setComments] = useState([]); useEffect(() => { subscribeToCommentsFor(postId, setComments); return () => { unsubscribeFromCommentsFor(postId); } }, [postId]); return <FlatList data={comments} />; } class Comments extends React.Component { state = { comments: [] }; setComments = (comments) => { this.setState({comments}); } componentWillMount() { const { postId } = this.props; subscribeToCommentsFor(postId, this.setComments); } componentWillReceiveProps(nextProps) { const { postId } = nextProps; subscribeToCommentsFor(postId, this.setComments); } componentWillUnmount() { unsubscribeFromCommentsFor(this.props.postId); } render() { return <FlatList data={this.state.comments}/>; } }
27. useReducer React Native Next
28. React Native Next const initialState = { count: 0 }; function reducer(state, action) { switch (action.type) { case 'reset': return initialState; case 'increment': return { count: state.count + 1 }; case 'decrement': return { count: state.count - 1 }; default: return state; } } function Counter({ initialCount }) { const [state, dispatch] = useReducer(reducer, { count: initialCount }); return ( <Fragment> <Text>Count: {state.count}</Text> <Button text="Reset" onPress={() => dispatch({ type: 'reset' })} /> <Button text="+" onPress={() => dispatch({ type: 'increment' })} /> <Button text="-" onPress={() => dispatch({ type: 'decrement' })} /> </Fragment> ); }
29. build your own React Native Next
30. React Native Next function checkPostingPermissions() { const [canPost, setCanPost] = useState(false); function handlePermissions(permissions) { setCanPost(permissions.writer); } useEffect(() => { const userPermissions = fetchCurrentUserPermissions(); handlePermissions(userPermissions); }); return canPost; } function FeedInput() { const [text, setText] = useState(""); const canPost = checkPostingPermissions(); return canPost ? <TextInput onChangeText={setText} /> : null; } function CommentInput() { const [text, setText] = useState(""); const canPost = checkPostingPermissions(); return canPost ? <TextInput onChangeText={setText} /> : null; }
31. no more HOCs React Native Next
32. Can I use it in RN? YES! React Native Next
33. When? React 16.x (Q1, 2019) React Native Next
34. What? Concurrent Mode React Native Next
35. Why? rendering components w/out blocking main thread React Native Next
36. React Native Next @acdlite
37. React Native Next @acdlite
38. React Native Next @acdlite
39. React Native Next @acdlite
40. React Native Next @acdlite
41. React Native Next // 1. Part of an app (not final API) <React.unstable_ConcurrentMode> <Something /> </React.unstable_ConcurrentMode> // 2. Whole app (not final API) ReactDOM.unstable_createRoot(domNode).render(<App />);
42. React Native Next
43. When? React 16.x (Q2, 2019) React Native Next
44. What? Fragment React Native Next
45. Why? no need to create additional element React Native Next
46. React Native Next function Counter({ initialCount }) { const [state, dispatch] = useReducer(reducer, { count: initialCount }); return ( <Text>Count: {state.count}</Text> <Button text="Reset" onPress={() => dispatch({ type: 'reset' })} /> <Button text="+" onPress={() => dispatch({ type: 'increment' })} /> <Button text="-" onPress={() => dispatch({ type: 'decrement' })} /> ); }
47. React Native Next
48. React Native Next function Counter({ initialCount }) { const [state, dispatch] = useReducer(reducer, { count: initialCount }); return ( <View> <Text>Count: {state.count}</Text> <Button text="Reset" onPress={() => dispatch({ type: 'reset' })} /> <Button text="+" onPress={() => dispatch({ type: 'increment' })} /> <Button text="-" onPress={() => dispatch({ type: 'decrement' })} /> </View> ); }
49. React Native Next function Counter({ initialCount }) { const [state, dispatch] = useReducer(reducer, { count: initialCount }); return ( <React.Fragment> <Text>Count: {state.count}</Text> <Button text="Reset" onPress={() => dispatch({ type: 'reset' })} /> <Button text="+" onPress={() => dispatch({ type: 'increment' })} /> <Button text="-" onPress={() => dispatch({ type: 'decrement' })} /> </React.Fragment> ); }
50. When? React 16.2 (November 28, 2017) React Native Next
51. React Native Next yeah, but what’s new in React Native?
52. React Native Next
53. React Native Next
54. Fabric JSI TurboModule React Native Next
55. JSI Javascript interface React Native Next
56. React Native Next @nparashuram
57. React Native Next @nparashuram
58. React Native Next @nparashuram
59. React Native Next @nparashuram
60. React Native Next @nparashuram
61. TurboModules C++ implementation for native modules React Native Next
62. React Native Next @nparashuram
63. Fabric UI layer re-architecture React Native Next
64. React Native Next React Native Today
65. React Native Next React Native Tomorrow
66. View Flattening React Native Next
67. React Native Next
68. What is Layout-only views? React Native Next - Pure <View> (not a subclass) - No associated event listeners - No associated `nativeId` - Not accessible - Overflow visible - Full opacity - No background color - No transform - No shadow - No zIndex
69. The Slimmening Extracting some of the core RN modules into its own repos React Native Next
70. React Native Next
71. React Native Next
72. React Native Next Bonus
73. React Native Next Remember Expo?
74. React Native Next @sjchmiela
75. React Native Next Thank You byteconf.com/react-native-2018