React Native - Re-render Variabel Object atau Array yang Sudah Dimodifikasi

Halo semua... Di postingan kali ini, kita akan bahas tentang masalah render yang ada di React Native. Saya pernah mengalami dimana aplikasi tidak ter-render setelah saya melakukan modifikasi variabel. React Native yang saya gunakan untuk percobaan ini adalah untuk membuat aplikasi Android.

Sebagai demonstrasi, kita akan membuat sebuah tombol yang akan mengubah nilai dari variabel data. Variabel data bertipe data Array. Untuk mempermudah penjelasan, bisa langsung lihat code di bawah.

import React from 'react';

import { View, Text, Button } from 'react-native';

const App = () => {

  const [data, setData] = React.useState([1, 2, 3]);

  const onPressFunction = () => {

    data[0] = data[0] + 1;

    console.log(data);

    setData(data);

  };

  return (

    <View style={{marginRight: 10, marginLeft: 10, marginTop: 25}}>

      <Text>{ JSON.stringify(data) }</Text>

      <Button title="Button" onPress={() => onPressFunction()} />

    </View>

  );

}

export default App;

Tampilan hasilnya akan tertampil seperti:

Dengan code di atas, ketika kita menekan tombol, tidak terjadi perubahan pada aplikasi namun nilai data yang tertampil di console.log akan berubah. Hal ini disebabkan karena fungsi setState tidak mendeteksi adanya perubahan. Fungsi setState menganggap data yang di set adalah data yang sama seperti sebelumnya. 

 

Untuk menangani hal di atas, kita perlu membuat agar fungsi setState mengetahui jika ada data baru. Hal ini bisa dilakukan dengan mengganti variabel atau referencenya, misalnya dengan menggunakan salah satu dari ketiga cara yang ada di postingan Javascript - Cara Clone Object. Untuk mudahnya, berikut akan saya contohkan salah satu cara penyelesainnya.

import React from 'react';

import { View, Text, Button } from 'react-native';

const App = () => {

  const [data, setData] = React.useState([1, 2, 3]);

  const onPressFunction = () => {

    data[0] = data[0] + 1;

    console.log(data);

    setData([...data]);

  };

  return (

    <View style={{marginRight: 10, marginLeft: 10, marginTop: 25}}>

      <Text>{ JSON.stringify(data) }</Text>

      <Button title="Button" onPress={() => onPressFunction()} />

    </View>

  );

}

export default App;

Singkatnya, perbedaan code baru dengan code sebelumnya adalah pada penggunaan cara spread untuk mengduplikasi data. Dengan begini, fungsi setState akan mendeteksi nilai baru, sehingga membuat aplikasi akan ter-render ketika button ditekan. Penyelesaian ini bisa dilakukan untuk variabel Array dan Object.

Sekian untuk postingan kali ini. Semoga membantu kalian yang kebingungan kenapa aplikasi kalian tidak ter-render otomatis walaupun datanya sudah berubah. Semoga membantu.

Salam Share,

Funtastic Share