Optimizing performance react-native component containing an image

Question

I have a component in my app that uses an image as a background. The component is a chat screen where users can view previous messages and send new ones. The component is connected to redux store. The component looks like this at a high level

// Chat screen
<Image>
  <Messages />
  <TextInput />
</Image>

The chat screen component will be re-rendered every time user types anything. Sometimes, users have reported a lag in typing and seeing the typed character on screen. I am thinking if it is due to the fact that Image is also re-rendered every time user types something and if it would make sense to extract the Messages and TextInput into a separate component and connect that to the redux store such that the Image is not re-rendered when user is typing.

I don't want to make this change if it is not going to affect the performance and I don't have a sure shot way to measuring if that change has affected the performance as the lag is very intermittent.

Let me know if you think this would affect the performance of the component.

Answer 1

Using an image as a background can make performance issue, especially on Android. Use minified images as a background. Also, Try to capsulate the state change to the TextInput component by making a wrapper for it. It's a good idea to use FlatList for Messages component too.