Update README.md

Author: computerjazz

README.md

@@ -59,74 +59,73 @@ Example snack: https://snack.expo.io/@computerjazz/rndfl-example
 Example snack with scale effect on hover: https://snack.expo.io/@computerjazz/rndfl-dragwithhovereffect
 
 ```typescript
-import React, { Component } from "react";
-import { View, TouchableOpacity, Text } from "react-native";
-import DraggableFlatList, { RenderItemParams } from "react-native-draggable-flatlist";
+import React, { useState, useCallback } from 'react';
+import { View, TouchableOpacity, Text } from 'react-native';
+import DraggableFlatList, {
+  RenderItemParams,
+} from 'react-native-draggable-flatlist';
 
-const NUM_ITEMS = 10
+const NUM_ITEMS = 10;
 
 function getColor(i: number) {
   const multiplier = 255 / (NUM_ITEMS - 1);
   const colorVal = i * multiplier;
   return `rgb(${colorVal}, ${Math.abs(128 - colorVal)}, ${255 - colorVal})`;
 }
 
+const exampleData: Item[] = [...Array(20)].map((d, index) => {
+  const backgroundColor = getColor(index);
+  return {
+    key: `item-${backgroundColor}`,
+    label: String(index),
+    backgroundColor,
+  };
+});
+
 type Item = {
   key: string;
   label: string;
   backgroundColor: string;
-}
+};
 
-const exampleData: Item[] = [...Array(20)].map((d, index) => {
-  const backgroundColor = getColor(index)
-  return {
-  key: `item-${backgroundColor}`,
-  label: String(index),
-  backgroundColor,
-  }
-});
-
-class Example extends Component {
-  state = {
-    data: exampleData
-  };
+function Example() {
+  const [data, setData] = useState(exampleData);
 
-  renderItem = ({ item, index, drag, isActive }: RenderItemParams<Item>) => {
-    return (
-      <TouchableOpacity
-        style={{
-          height: 100,
-          backgroundColor: isActive ? "red" : item.backgroundColor,
-          alignItems: "center",
-          justifyContent: "center"
-        }}
-        onLongPress={drag}
-      >
-        <Text
+  const renderItem = useCallback(
+    ({ item, index, drag, isActive }: RenderItemParams<Item>) => {
+      return (
+        <TouchableOpacity
           style={{
-            fontWeight: "bold",
-            color: "white",
-            fontSize: 32
+            height: 100,
+            backgroundColor: isActive ? 'red' : item.backgroundColor,
+            alignItems: 'center',
+            justifyContent: 'center',
           }}
-        >
-          {item.label}
-        </Text>
-      </TouchableOpacity>
-    );
-  };
-
-  render() {
-    return (
-      <View style={{ flex: 1 }}>
-        <DraggableFlatList
-          data={this.state.data}
-          renderItem={this.renderItem}
-          keyExtractor={(item, index) => `draggable-item-${item.key}`}
-          onDragEnd={({ data }) => this.setState({ data })}
-        />
-      </View>
-    );
-  }
+          onLongPress={drag}>
+          <Text
+            style={{
+              fontWeight: 'bold',
+              color: 'white',
+              fontSize: 32,
+            }}>
+            {item.label}
+          </Text>
+        </TouchableOpacity>
+      );
+    },
+    []
+  );
+
+  return (
+    <View style={{ flex: 1 }}>
+      <DraggableFlatList
+        data={data}
+        renderItem={renderItem}
+        keyExtractor={(item, index) => `draggable-item-${item.key}`}
+        onDragEnd={({ data }) => setData(data)}
+      />
+    </View>
+  );
 }
 
 export default Example;