CODEWITHSUNDEEP
react-native
user11469230
user11469230

Reputation:

How do I know my react-native app is working smoothly and is not at risk?

Is there a good way to know our react-native app is working well?

although I know there is a perf monitor When I enable Perf Monitor, here is some options which I dont know what do they mean.

  1. UI: 60.0 fps ==> here 60.0 sometime is deceasing when I am working with my app.
  2. X dopped so far ==> here x is the number which is increasing for mine it reached even 150 like:

150 dropped so far

  1. X stutters (4+) so far ==> here x too is increasing

like: 12 stutters (4+) so far

  1. JS: 60.0 fps ==> here 60.0 decreased when I am working with app.

and finally what is fps it self in react-native?

Upvotes: 7

Views: 3219

Answers (1)

VulfCompressor
VulfCompressor

Reputation: 1410

FPS means "Frame per Second". A "smooth" app should run at 60fps, most of the time. Most phones nowadays have 60hz displays (meaning they only refresh 60 times per second), and thus only high-end phones will be able to display more than 60 frames in a second. There's a few things you can do to ensure your RN app is running at optimal speed.

  • As you may already know crossing the "bridge" (Javascript -> Native) is slow, and causes stuttering / low FPS. There's a lot of material out there explaining how this bridge works in detail, so I won't talk much about it. Try to minimise the amount of work being done (specially bridge crosses) during screen transitions or animations. You can do this by using the InteractionManager API. Read more about it here.

  • Don't forget to read the official documentation on Performance.

  • If you're noticing lag right after opening a new screen, try deferring the rendering until the screen has fully transitioned into the viewport. An example of how to do this:

import { View, InteractionManager } from 'react-native';

class Example extends Component {
    constructor(props) {
        super(props);

        this.state = { ready: false };
    }

    componentDidMount() {
        // After all interactions have been finished we swich the "ready" state variable to true, and only then your component will be rendered.
        InteractionManager.runAfterInteractions(() => {
            this.setState({ ready: true });
        })
    }

    render() {
        if (!this.state.ready) { 
            return; 
        }

        // Render only when this.state.ready is true (after all interactions have been finalised);
        return (
            <View></View>
        );
    }
}

Upvotes: 5

Related Questions