React Native Optimization Techniques (Part 1)

It is essential to focus on how the UI re-renders in React Native development to deliver a smoother user experience. In such cases, we start talking about controlled and uncontrolled components.

Each of them has its own benefits and can be used in several scenarios; so understanding these things will help you know whenever you should apply them thus improving application performance. Supposing that there was this magical notepad that allowed you scribble anything on it.

Controlled vs. Uncontrolled Components

Imagine you have a magic notebook where you can write anything. There are two ways you can write in it:

1. Controlled Writing:

• You have a supervisor (React) who checks everything you write (state).

• Every time you write a letter, you tell the supervisor (React) who then decides if you can keep it or not.

• This means there's a tiny delay because the supervisor needs to approve every letter.

• This is how controlled components work. React keeps track of the input value.

2. Uncontrolled Writing:

• You write directly in the notebook without asking the supervisor.

• Everything you write appears immediately because there’s no delay.

• This is how uncontrolled components work. The input value is not controlled by React.

Example of a Controlled Component

import React, { useState } from 'react'
import { TextInput, StyleSheet } from 'react-native'

const ControlledTextInput = () => {
  const [value, setValue] = useState('Text')

  const onChangeText = (text) => {
    setValue(text)
  }

  return (
    <TextInput
      style={styles.textInput}
      onChangeText={onChangeText}
      value={value}
    />
  )
}

const styles = StyleSheet.create({
  textInput: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
  },
})

export default ControlledTextInput

In this example:

• You type a letter.
• React (the supervisor) checks it.
• The letter appears in the TextInput after React approves it.

This method allows for real-time validation, input masking, and modification as the user types.

Example of an Uncontrolled Component

import React, { useState } from 'react'
import { Text, TextInput, View, StyleSheet } from 'react-native'

const UncontrolledTextInput = () => {
  const [value, setValue] = useState('')

  const onChangeText = (text) => {
    setValue(text)
  }

  return (
    <View style={styles.container}>
      <TextInput
        placeholder="Type here to translate!"
        onChangeText={onChangeText}
        defaultValue={value}
        style={styles.textInput}
      />
      <Text style={styles.label}>
        {value
          .split(' ')
          .map((word) => word && '🍕')
          .join(' ')}
      </Text>
    </View>
  )
}

export default UncontrolledTextInput

const styles = StyleSheet.create({
  container: {
    padding: 10,
  },
  textInput: {
    height: 40,
  },
  label: {
    padding: 10,
    fontSize: 42,
  },
})

In this example:

• You type a letter directly in the TextInput.
• There’s no supervisor checking each letter, so it appears immediately.

Even though uncontrolled components are faster because they don't have the delay of asking React to approve each letter, controlled components are important when you need to do something with the input data.

When to Use Uncontrolled Components

Uncontrolled components are particularly useful in scenarios where performance is critical and the input does not require real-time validation or modifications. Here are a few specific use cases:

1. Simple Forms: For forms that do not require extensive validation or dynamic input modifications.
2. Large Forms: In forms with many fields, where managing the state of each input could lead to performance bottlenecks.
3. Performance-Critical Applications: In applications targeting low-end devices or requiring high input responsiveness.

Hybrid Approach

In some cases, a hybrid approach can be adopted where certain fields are controlled for validation purposes, while others remain uncontrolled for performance benefits. This ensures that you get the best of both worlds, maintaining performance while still validating critical fields.

For efficient optimization and writing of good code in applications developed using React Native platform, it is important to know differences between controlled and uncontrolled forms. Controlled forms have lots of orderliness and manageability for situations which require checking or editing data by a user while uncontrolled forms have the possibilities of enhancing code execution speed through reducing its complexity, hence these controls are better applied in cases involving critical information input only or just simple forms.

By carefully choosing the right approach based on the specific needs of your application, you can ensure a smooth and responsive user experience, even on resource-constrained devices.