Blame it on React Native


I'm not gonna lie
to you
React Native Is Hard
Why?
I hate RN because:
- Adds an abstraction over native
- Performance sucks
- Single Threaded
- Many more...
But you already know that
Our only option is to write pure native app
It's an option
But not the only one
What if I told you that 90% of our performance issues we can solve on the js side only
Example #1
send button disable / enable
it turned out we rendered the entire chatroom list even when we were in the chatroom screen
and the code didn't look bad. it's just the way react works
Example #2
Messages arrive in delay and app is not functioning when there's a lot of activity in a chatroom
Turns out a call for componentWillReceiveProps was called way too many times and each time it triggered a lot of renders (due to setState)
Example #3
Typing Animation
We tried JS
It sucked
We went native
It sucked (b/c we're hybrid)
and native layout didn't play nicely with RN layout
*Ask Aaron for more info
Turns out we could achieve same slickness using layoutAnimations
Example #4
module load time
Turns out using lazy require can save A LOT of time
And the list go on:
engage index prop change
react native tracking view
duplicate network requests
and I'm sure u can think of examples of your own
It's not RN fault!
That's just how React and JS works
It's just a lot easier to see the consequences in RN
We need to be much more careful and responsible react developers
Want proof?
I can hazz desktop suck
Desktop Demo
It only up to us
Key Takeaways
Never write Anonymous Functions as props
Know your components
not just "pure" it w/o thinking
Know your component lifecycle
Know your reducers
do a comparence between db/reducer
Fuck this!
It's too hard
Demo
* make sure to filter it to your components only
Performance Cheatsheet
- Never write Anonymous Functions as props
- Know your components
- know your components lifecycle
- know your reducers
- Use tools (like why-did-you-update)
Let's kill some performance bug!
Thank You!
Blame it on React Native
Blame it on React Native
By ofird
Blame it on React Native
- 1,324