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
54
Taming AutoLayout
sergioutama
0
46
10 Things I learned while freelancing
sergioutama
0
58
iOS Video Player
sergioutama
0
80
Tribute to Mantle
sergioutama
0
29
Mobile Analytics
sergioutama
0
44
Other Decks in Programming
See All in Programming
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
2
11k
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
2
15k
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
270
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
240
PipeCDのプラグイン化で目指すところ
warashi
1
290
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
97
35k
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
1k
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
12
6.9k
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
220
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
210
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
410
Featured
See All Featured
Become a Pro
speakerdeck
PRO
29
5.4k
Building Applications with DynamoDB
mza
95
6.5k
The World Runs on Bad Software
bkeepers
PRO
69
11k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
How to train your dragon (web standard)
notwaldorf
96
6.1k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Writing Fast Ruby
sferik
628
62k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
830
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Adopting Sorbet at Scale
ufuk
77
9.5k
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