Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Easy Way to Improve ReactNative
Search
Sergio Utama
July 12, 2018
Programming
0
270
Easy Way to Improve ReactNative
5 easy way to improve ReactNative project
Sergio Utama
July 12, 2018
Tweet
Share
More Decks by Sergio Utama
See All by Sergio Utama
From try! Swift Tokyo 2017
sergioutama
0
63
Migrating to Swift 3
sergioutama
0
51
Taming AutoLayout
sergioutama
0
43
10 Things I learned while freelancing
sergioutama
0
57
iOS Video Player
sergioutama
0
78
Tribute to Mantle
sergioutama
0
29
Mobile Analytics
sergioutama
0
44
Other Decks in Programming
See All in Programming
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
100
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
240
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
1
710
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
170
Result型で“失敗”を型にするPHPコードの書き方
kajitack
4
520
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
Select API from Kotlin Coroutine
jmatsu
1
190
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
460
5つのアンチパターンから学ぶLT設計
narihara
1
120
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
110
NPOでのDevinの活用
codeforeveryone
0
450
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
250
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
710
We Have a Design System, Now What?
morganepeng
53
7.7k
The Language of Interfaces
destraynor
158
25k
Music & Morning Musume
bryan
46
6.6k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Faster Mobile Websites
deanohume
307
31k
Automating Front-end Workflow
addyosmani
1370
200k
Raft: Consensus for Rubyists
vanstee
140
7k
Transcript
Easy way to improve your ReactNative Project by @sergioutama @sergioutama
$ whoami Sergio Utama Just your friendly programmer @sergioutama
Don't Use ReactNative @sergioutama
The end @sergioutama
Just kidding ! @sergioutama
1. Fix your project structure @sergioutama
Why — Easier to navigate and maintain — Mental image
how code should be structured @sergioutama
How ~ components for reusable globaly ~ Split based on
screen OR module ~ each screen has its component @sergioutama
2. Stop using arrow function @sergioutama
Arrow function ( () => {}) is a necessary evil
of js world. It make easy to ignore this @sergioutama
However, arrow function actually assigning a new value. Calling it
within render() function will give significant impact on your app performance @sergioutama
Solution? bind early or declare it outside render() @sergioutama
3. Own your component lifecycle @sergioutama
React gave us PureComponent and shouldComponentUpdate to use. Use it!
@sergioutama
Understand how React lifecycle and avoid unecessary render by extending
PureComponent or implementing shouldComponentUpdate. Be!er: fully utilize the whole lifecycle functions. @sergioutama
@sergioutama
4. Component everything @sergioutama
Keep your component small. It's not a dick measuring contents
If more than 6 elements, move it to a component @sergioutama
5. It's either Component OR PureComponent @sergioutama
const modalClosed = ()=>{} const LoadingOverlay = (props) => {
const { loading, message, ...attributes } = props; const defaultMessage = message || ''; return ( <Modal transparent animationType={'none'} visible={loading} onRequestClose={modalClosed} > <View style={styles.modalBackground}> <View style={styles.activityIndicatorWrapper}> <ActivityIndicator animating={loading} /> <Text style={styles.loadingText}>{defaultMessage}</Text> </View> </View> </Modal> ); }; @sergioutama
const modalClose = () => {}; export default class LoadingOverlay
extends React.Component<Props> { render() { const { loading, message, style } = this.props; const defaultMessage = message || ""; return ( <Modal transparent animationType={"none"} visible={loading} onRequestClose={modalClose} > <View style={styles.modalBackground}> <View style={styles.activityIndicatorWrapper}> <ActivityIndicator animating={loading} /> <Text style={styles.loadingText}>{defaultMessage}</Text> </View> </View> </Modal> ); } } @sergioutama
Why Similar but not the same It makes sense on
web or React to use functional stateless component It doesn't make sense on ReactNative Component make it easier to debug view hierarchy @sergioutama
Learn Native and its tools Not so easy way @sergioutama
ReactNative is not a crossplatform. It's not meant that way.
— Sergio Utama @sergioutama
Native Concept: Navigation, Containtment, Signing, Activty vs Fragments, Permission, etc
Tools: Xcode, Gradle, Fastlane @sergioutama
Q&A @sergioutama
The end? Thank you — @sergioutama @sergioutama