react-rerendering-benchmarks · SpitfireSatya · Oct 2, 2024
diff --git a/App.js b/App.js
@@ -1,3 +1,4 @@
+import { memo } from "react";
 import React, { useContext } from "react";
 import { Provider } from "react-redux";
 import "react-native-gesture-handler";
@@ -9,20 +10,17 @@ import { modules, reducers, hooks, initialRoute } from "@modules";
 import { connectors } from "@store";
 const Stack = createStackNavigator();
 import { GlobalOptionsContext, OptionsContext, getOptions } from "@options";
-
 const getNavigation = (modules, screens, initialRoute) => {
-  const Navigation = () => {
+  const Navigation = memo(() => {
     const routes = modules.concat(screens).map(mod => {
       const pakage = mod.package;
       const name = mod.value.title;
       const Navigator = mod.value.navigator;
-
       const Component = props => {
         return <OptionsContext.Provider value={getOptions(pakage)}>
             <Navigator {...props} />
           </OptionsContext.Provider>;
       };
-
       return <Stack.Screen key={name} name={name} component={Component} />;
     });
     const screenOptions = {
@@ -33,11 +31,9 @@ const getNavigation = (modules, screens, initialRoute) => {
           {routes}
         </Stack.Navigator>
       </NavigationContainer>;
-  };
-
+  });
   return Navigation;
 };
-
 const getStore = globalState => {
   const appReducer = createReducer(globalState, _ => {
     return globalState;
@@ -52,8 +48,7 @@ const getStore = globalState => {
     middleware: getDefaultMiddleware => getDefaultMiddleware()
   });
 };
-
-const App = () => {
+const App = memo(() => {
   const global = useContext(GlobalOptionsContext);
   const Navigation = getNavigation(modules, screens, initialRoute);
   const store = getStore(global);
@@ -64,6 +59,5 @@ const App = () => {
   return <Provider store={store}>
       <Navigation />
     </Provider>;
-};
-
+});
 export default App;
diff --git a/modules/app-menu/index.js b/modules/app-menu/index.js
@@ -1,9 +1,9 @@
+import { memo } from "react";
 import React, { useContext } from "react";
 import { OptionsContext, GlobalOptionsContext } from "@options";
 import { SafeAreaView, ScrollView, View, Text, Pressable } from "react-native";
 import { useNavigation, useNavigationState } from "@react-navigation/native";
-
-function AppMenu() {
+const AppMenu = memo(function AppMenu() {
   const options = useContext(OptionsContext);
   return <SafeAreaView style={options.styles.container}>
       <ScrollView>
@@ -12,18 +12,15 @@ function AppMenu() {
         <GlobalOptions options={options} />
       </ScrollView>
     </SafeAreaView>;
-}
-
+});
 function AppRoutes({
   options
 }) {
   const navigation = useNavigation();
   const routes = useNavigationState(state => state.routeNames.filter(name => name !== options.title));
-
   const pressed = ({
     pressed
   }) => [pressed ? options.styles.buttonPressed : options.styles.buttonNotPressed, options.styles.button];
-
   const links = routes.map(route => {
     return <Pressable onPress={() => navigation.navigate(route)} style={pressed} key={route}>
         <Text style={options.styles.buttonText}>{route}</Text>
@@ -36,7 +33,6 @@ function AppRoutes({
       {links}
     </View>;
 }
-
 function GlobalOptions({
   options
 }) {
@@ -54,7 +50,6 @@ function GlobalOptions({
       {globalInfo}
     </View>;
 }
-
 export default {
   title: "App Menu",
   navigator: AppMenu

diff --git a/modules/yourapp.js b/modules/yourapp.js
@@ -1,12 +1,11 @@
+import { memo } from "react";
 import React from "react";
 import { StyleSheet, View, Text } from "react-native";
-
-const YourApp = () => {
+const YourApp = memo(() => {
   return <View style={styles.container}>
       <Text style={styles.text}>Welcome to your brand new app!</Text>
     </View>;
-};
-
+});
 const styles = StyleSheet.create({
   container: {
     flex: 1,

diff --git a/screens/event-details/index.js b/screens/event-details/index.js
@@ -1,7 +1,7 @@
+import { memo } from "react";
 import React, { useState, useEffect } from "react";
 import { Text, View, StyleSheet, ScrollView, Image, Pressable } from "react-native";
-
-const EventDetails = () => {
+const EventDetails = memo(() => {
   const [event, setEvent] = useState({});
   useEffect(() => {
     setEvent({
@@ -61,8 +61,7 @@ const EventDetails = () => {
         </View>
       </ScrollView>
     </View>;
-};
-
+});
 const styles = StyleSheet.create({
   container: {
     flex: 1,
@@ -173,7 +172,6 @@ const styles = StyleSheet.create({
   }
 });
 export default EventDetails;
-
 const Button = params => {
   const backgroundColor = params.color ? params.color : "#000";
   const textColor = params.textColor ? params.textColor : "#fff";
@@ -196,7 +194,6 @@ const Button = params => {
       </View>
     </View>;
 };
-
 const buttonStyles = StyleSheet.create({
   btnContainer: {
     paddingHorizontal: 40,

diff --git a/screens/event-home/index.js b/screens/event-home/index.js
@@ -1,10 +1,12 @@
+import { useRef } from "react";
+import { useCallback } from "react";
+import { memo } from "react";
 import React, { useState, useEffect } from "react";
 import { Text, View, StyleSheet, Image, FlatList, Pressable, TextInput } from "react-native";
-
-const EventHome = () => {
+const EventHome = memo(() => {
   const [upcomingEvents, setUpcomingEvents] = useState([]);
   const [events, setEvents] = useState([]);
-  const [search, setSearch] = useState("");
+  const search = useRef("");
   const [selectedTab, setSelectedTab] = useState(0);
   const [user, setUser] = useState({});
   useEffect(() => {
@@ -64,22 +66,21 @@ const EventHome = () => {
       <FlatList style={styles.list} ListHeaderComponent={() => <View>
             <Text style={styles.greetingText}>Good Morning,</Text>
             <Text style={styles.username}>{user.name}</Text>
-            <Input text="Search" value={search} onChange={text => setSearch(text)} containerStyle={styles.inputContainer} />
+            <Input text="Search" ref={search} containerStyle={styles.inputContainer} />
             <View style={styles.listHeader}>
               <Text style={styles.headerHeading}>Upcoming Event</Text>
               <Text style={styles.headerSubText}>View All</Text>
             </View>
             <FlatList data={upcomingEvents} renderItem={({
         item
       }) => <UpcomingEvent event={item} />} keyExtractor={item => item.id.toString()} horizontal={true} showsHorizontalScrollIndicator={false} />
-            <TabView tabTitles={["Event", "Event", "Event", "Event"]} selected={selectedTab} onPress={index => setSelectedTab(index)} style={styles.tabView} />
+            <TabView tabTitles={["Event", "Event", "Event", "Event"]} selected={selectedTab} onPress={useCallback(index => setSelectedTab(index), [setSelectedTab])} style={styles.tabView} />
           </View>} data={events} renderItem={({
       item
     }) => <Event event={item} />} keyExtractor={item => item.id} showsVerticalScrollIndicator={false} />
       <Footer images={[require("./assets/homeIconActive.png"), require("./assets/starIcon.png"), require("./assets/taskIcon.png"), require("./assets/mapIcon.png")]} titles={["Home", "Sponsors", "Tasks", "Map"]} active={0} activeColor="#7C7C7C" />
     </View>;
-};
-
+});
 const styles = StyleSheet.create({
   container: {
     flex: 1,
@@ -123,7 +124,6 @@ const styles = StyleSheet.create({
   }
 });
 export default EventHome;
-
 const Footer = props => {
   const generator = props.hideTitle ? props.images : props.titles;
   const bgColor = {
@@ -144,7 +144,6 @@ const Footer = props => {
         </View>)}
     </View>;
 };
-
 const footerStyles = StyleSheet.create({
   footer: {
     position: "absolute",
@@ -174,8 +173,7 @@ const footerStyles = StyleSheet.create({
     resizeMode: "contain"
   }
 });
-
-const Input = props => {
+const Input = memo(props => {
   return <View style={[inputStyles.inputContainer, props.containerStyle]}>
       {props.text ? <Text style={inputStyles.inputText}>{props.text}</Text> : null}
 
@@ -184,14 +182,13 @@ const Input = props => {
       {props.icon ? <Image source={props.icon} style={props.text ? inputStyles.iconWithText : inputStyles.iconWithoutText} /> : null}
       <View style={styles.children}>{props.children}</View>
     </View>;
-};
-
+});
 const inputStyles = StyleSheet.create({
   inputContainer: {
     flexDirection: "column",
     justifyContent: "center" // flex: 1
-
   },
+
   inputText: {
     fontSize: 14,
     marginLeft: 20,
@@ -228,8 +225,7 @@ const inputStyles = StyleSheet.create({
   },
   children: {}
 });
-
-const TabView = ({
+const TabView = memo(({
   tabTitles,
   selected,
   onPress,
@@ -249,8 +245,7 @@ const TabView = ({
           <Text>{title}</Text>
         </Pressable>)}
     </View>;
-};
-
+});
 const tabViewStyles = StyleSheet.create({
   paletteContainer: {
     width: "80%",
@@ -281,7 +276,6 @@ const tabViewStyles = StyleSheet.create({
     borderRadius: 10
   }
 });
-
 const Event = ({
   event
 }) => {
@@ -299,7 +293,6 @@ const Event = ({
       </Pressable>
     </View>;
 };
-
 const eventStyles = StyleSheet.create({
   container: {
     flexDirection: "row",
@@ -350,7 +343,6 @@ const eventStyles = StyleSheet.create({
     fontWeight: "bold"
   }
 });
-
 const UpcomingEvent = ({
   event
 }) => {
@@ -368,7 +360,6 @@ const UpcomingEvent = ({
       </View>
     </View>;
 };
-
 const upcomingEventStyles = StyleSheet.create({
   container: {
     width: 220,