My react native app with expo takes a long time to load - react-native

I developed an application in react native using expo and I have a problem, the app takes a long time on the splash screen before starting, I didn't use any method to make the splash visible for a longer time. The issue occurs in both the development version and the production version.
Another point is that I read in an article that IIFE functions should be avoided inside useEffect, and so I removed the ones I used but I still have the performance problem, does anyone have any ideas on how to improve?

If the connection is made but bundle building is very slow - Try disconnecting from the network both devices, and reconnect your system . Also, don't forget to clear the 'recently in development' projects, terminals and start the project again. It will increase the speed of building , especially for windows it works very well.

Related

Expo debug remote JS causes unresponsiveness in UI

I upgraded a react native project recently from expo SDK 36 to 38. It compiles now, but anytime I click on "Debug Remote JS", it causes the UI to become slow and unresponsive, only occasionally picking up the on click events. I created a bare bones project to duplicate it. To verify, either run expo init from cli or here's a project https://github.com/seniordevops/tab-application.git. Click the tabs without the debugger on, then turn on debug remote JS and watch the slow down. Happens on both Mac and PC. Any ideas on the root cause?
This is mostly due to the fact that the clock on your PC and mobile are not synchronized.
You either have to synchronize them or have the phone clock one second earlier than your PC/Mac.
I suspect the reason could be an upstream problem of react-native. Please check this expo-cli issue:
https://github.com/expo/expo-cli/issues/2405
a maintainer reports:
when you are debugging on your device, the javascript is being
executed in your browser on your computer :(

Need to restart computer when developping

I try to make apps in react native (not with expo, I created my code with react-native init and run with react-native run-android) and when I make changes in the code they are not always taken into account : to take them into account I have to restart computer.
I have to do it several times a day, it is time consuming. I have tested to remove to app tested from the device, to make yarn cache clean, but it doesn't work, the only thing that works is to restart (I am using a Mac if it makes a difference).
Is there a command I can make to reset a cache that I don't know and save previous state of my app ?
You may have a caching issue, try the cache clearing solutions in this link
How to clear react-native cache?
And also, you may want to try the Hot Reloading or Live Reloading options in the dev menu.
What is the difference between Hot Reloading and Live Reloading in React Native?

Why deploying and debugging are so slow (React-Native)

I have started to develop with react-native and i am struggling on technical issues all the time when deploying or debugging my application.
I tried running the app in two ways:
With expo (expo start)
With this option expo extract+compile+run my app on my local android simulator which takes 60-70 secodns for every change (via hot-reloading)
Running on my iPhone with expo client
That takes me also 60-70 seconds and debugging is not convenient.
Is there any way developing faster with react-native?
It takes me one hour for creting a simple screen with Form and AsyncStorage + checking the logic (insted of 10 minutes)
Thanks !
Could be many factors. Slow computer, hard drive full.... Perhaps clean your build folders. Very hard to diagnose from what little information you privide.

React native application starting performance issue

I'm new to React Native developement and currently have performance issue when user launches app.
It takes like 5-10 second on both Nexus 6P emulator and my Samsung tablet to render content of the application.
Currently I have tab navigator as main component and three stack navigators inside of tab navigator and seems like react native tries to mount\render all of those components at once. Can you please tell me how I can solve this issue to create smoother user experience with my app ? Because all of my components are pretty lightweight and it's strange that I have any performance issues.
This slowness is natural because you are in the develop mode and you may showing some consoles on the console log. The problem will be disappeared if you publish the app and install the apk you will not have that problem. I hope it helps you.
Go to Android Virtual Device Manager, select your AVD, select "Edit this AVD", in the new window (Virtual Device Configuration), goto Emulated Performance > Graphics and select the "Software (GLS)"
This may enhance your performance issues, it worked well for me

React native takes very long to load on device

I've been developing a react-native app using the simulator for a while. On the simulator (iOS), the app loads very fast (on reload for eg). However, when I tried to load the app to the device, it spends between 1-3 minutes in the splash screen before loading into the app.
My project is fairly small, and has no extra resources other than the javascript. Looking at the documentation I couldn't find what might be the cause of the issue, though I suspect it has to do with the fact that it is not getting the JS from the packager local server.
What am I doing wrong?
(btw - react-native v0.31)
I ran into the same issue and discovered that it was because I was running my app on device in development mode. To get the performance you're looking for, you'll need to build and run the app in production or "release" mode. You can do this by passing in a --configuration option and setting it to Release using the React Native CLI:
$ react-native run-ios --configuration Release
If that doesn't do the trick, then you may need to build your app in "Release" mode from Xcode. To do that, navigate to your projects /ios directory and open the .xcodeproj file in Xcode. Choose your build target in the Toolbar. Scroll to the bottom and choose "Edit Scheme...". Then under Build Configuration, switch from "Debug" to "Release". Now build your app on your target device and it should be much more performant than before.
You can read more in the official React Native documentation under Running on Device: Building your app for production.
For me the issue was related to the wifi network of my development machine. I was using WPA2 Enterprise auth to connect to wifi on my development machine. I found that if I used a wired connection to connect to my network or if I used another wifi connection that used a different form of auth then the delay went away. I think the delay is a network timeout.