Update example: immutable state

Author: letrungduong113

example/Test.tsx

@@ -5,16 +5,21 @@ import {
 } from 'flatlist-view-control-rn';
 import React, {useEffect, useState} from 'react';
 import {Text, View} from 'react-native';
+import {useImmer} from 'use-immer';
 import {getVideoList} from './API';
-
+type State = {
+  data: any[];
+};
 let pageSize = 10;
 export default function Test1() {
-  const [data, setData] = useState<any[]>([]);
+  const [data, setData] = useImmer<State>({data: []});
   const [currentPage, setCurrentPage] = useState(1);
   useEffect(() => {
     (async function () {
       let arr = await getVideoList(1, pageSize);
-      setData(arr);
+      setData(draft => {
+        draft.data = arr;
+      });
     })();
   }, []);
   const onFooterRefresh = async (endRefreshing: EndRefreshing) => {
@@ -23,21 +28,29 @@ export default function Test1() {
     let arr = await getVideoList(next, pageSize);
 
     if (arr.length === pageSize) {
-      setData(data.concat(arr));
+      setData(draft => {
+        draft.data.push(...arr);
+      });
       endRefreshing(RefreshState.CanLoadMore);
     } else {
-      setData(data.concat(arr));
+      setData(draft => {
+        draft.data.push(...arr);
+      });
       endRefreshing(RefreshState.NoMoreData);
     }
     setCurrentPage(next);
   };
   const onHeaderRefresh = async (endRefreshing: EndRefreshing) => {
     let arr = await getVideoList(1, pageSize);
     if (arr.length === pageSize) {
-      setData(arr);
+      setData(draft => {
+        draft.data = arr;
+      });
       endRefreshing(RefreshState.CanLoadMore);
     } else {
-      setData(arr);
+      setData(draft => {
+        draft.data = arr;
+      });
       endRefreshing(RefreshState.NoMoreData);
     }
     setCurrentPage(1);
@@ -48,7 +61,7 @@ export default function Test1() {
       <RefreshListView
         onFooterRefresh={onFooterRefresh}
         onHeaderRefresh={onHeaderRefresh}
-        data={data}
+        data={data.data}
         renderItem={({item}) => <Text style={{height: 50}}>{item.title}</Text>}
       />
     </View>

example/package.json

@@ -11,8 +11,10 @@
   },
   "dependencies": {
     "flatlist-view-control-rn": "^1.0.1",
+    "immer": "^9.0.2",
     "react": "17.0.1",
-    "react-native": "0.64.0"
+    "react-native": "0.64.0",
+    "use-immer": "^0.5.1"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",