From 2e05fc9d6da35c68285aa7c0378e116ded886577 Mon Sep 17 00:00:00 2001
From: mudabbir-ahmad <mudabbira.uk@gmail.com>
Date: Sat, 25 Oct 2025 22:15:08 +0100
Subject: [PATCH] Added Render component in UI folder

---
 src/components/UI/RenderCount.js           | 24 ++++++++++++++++++++++
 src/components/screens/ModuleListScreen.js |  3 ++-
 2 files changed, 26 insertions(+), 1 deletion(-)
 create mode 100644 src/components/UI/RenderCount.js

diff --git a/src/components/UI/RenderCount.js b/src/components/UI/RenderCount.js
new file mode 100644
index 0000000..1fdce24
--- /dev/null
+++ b/src/components/UI/RenderCount.js
@@ -0,0 +1,24 @@
+import { useRef } from "react";
+import { Text, StyleSheet } from "react-native";
+
+const RenderCount = ({backgroundColor = 'dodgerblue', fontColor = 'white'}) => {
+//     Initialisation -------------
+//     State ----------------------
+    const renderCount = useRef(0);
+    renderCount.current += 1;
+//     Handlers -------------------
+//     View -----------------------
+    return (
+        <Text style={[styles.count, { backgroundColor, color: fontColor}]}>
+            Number of renders: {renderCount.current}
+        </Text>
+    );
+};
+
+const styles = StyleSheet.create({
+    count: {
+        padding: 5,
+    },
+});
+
+export default RenderCount;
\ No newline at end of file
diff --git a/src/components/screens/ModuleListScreen.js b/src/components/screens/ModuleListScreen.js
index 0cbe4c1..7e8df26 100644
--- a/src/components/screens/ModuleListScreen.js
+++ b/src/components/screens/ModuleListScreen.js
@@ -3,7 +3,7 @@ import { StyleSheet } from "react-native";
 import Screen from "../layout/Screen";
 import ModuleList from "../entity/modules/ModuleList";
 import initialModules from "../../data/modules.js";
-
+import RenderCount from "../UI/RenderCount";
 
 const ModuleListScreen = () => {
 //   Initialisation -------------
@@ -22,6 +22,7 @@ const ModuleListScreen = () => {
 
   return (
     <Screen>
+        <RenderCount />
         <ModuleList modules={modules} onSelect={handleDelete} />
     </Screen>
   );