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

Help is just around the corner

why did you update

 

 

 

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

By ofird

Blame it on React Native

  • 1,179