reduce rerendering cost as much possible

apps/mobile/src/components/Container/index.js

@@ -47,7 +47,7 @@ export const Container = ({
   noSelectionHeader = false,
   headerColor = null,
   type = null,
-  route
+  route,
 }) => {
   // State
   const [state, dispatch] = useTracked();
@@ -123,7 +123,7 @@ export const Container = ({
     if (searchResults.results && searchResults.results.length > 0) {
       searchResult = null;
       if (text) {
-      setText(null);
+        setText(null);
       }
       inputRef.current?.setNativeProps({
         text: '',
@@ -137,12 +137,17 @@ export const Container = ({
         },
       });
     }
-  
-
   };
 
   useEffect(() => {
     eSubscribeEvent(eClearSearch, clearSearch);
+
+    return () => {
+      eUnSubscribeEvent(eClearSearch, clearSearch);
+    };
+  }, []);
+
+  useEffect(() => {
     Keyboard.addListener('keyboardDidShow', () => {
       setTimeout(() => {
         if (DDS.isTab) return;
@@ -156,7 +161,6 @@ export const Container = ({
       }, 0);
     });
     return () => {
-      eUnSubscribeEvent(eClearSearch, clearSearch);
       Keyboard.removeListener('keyboardDidShow', () => {
         setTimeout(() => {
           if (DDS.isTab) return;
@@ -173,7 +177,6 @@ export const Container = ({
   }, []);
 
   useEffect(() => {
-
     selection.data = data;
     selection.type = type;
     eSubscribeEvent(eScrollEvent, onScroll);
@@ -181,10 +184,10 @@ export const Container = ({
     return () => {
       eUnSubscribeEvent(eScrollEvent, onScroll);
     };
-  },[]);
+  }, []);
 
   // Render
-
+console.log('rerendering');
   return (
     <KeyboardAvoidingView
       behavior="padding"

apps/mobile/src/components/Menu/index.js

@@ -1,4 +1,4 @@
-import React, {useEffect} from 'react';
+import React, {useEffect, useState} from 'react';
 import {
   ActivityIndicator,
   Platform,
@@ -47,12 +47,10 @@ export const Menu = ({
   noTextMode = false,
   onButtonLongPress = () => {},
 }) => {
-  let currentScreen = '';
-  let colors = COLOR_SCHEME_LIGHT;
-  let tags = [];
-  let colorNotes = [];
-  let user = null
-  let syncing = false
+  const [state, dispatch] = useTracked();
+  const {currentScreen,colors,tags,colorNotes,user,syncing} = state;
+
+
   // todo
 
   function changeColorScheme(colors = COLOR_SCHEME, accent = ACCENT) {
@@ -77,10 +75,7 @@ export const Menu = ({
       name: 'Notebooks',
       icon: 'book-outline',
       func: () =>
-        NavigationService.navigate('Folders', {
-          title: 'Notebooks',
-          canGoBack: false,
-        }),
+        NavigationService.navigate('Folders'),
       close: true,
     },
 

apps/mobile/src/provider/reducer.js

@@ -64,7 +64,7 @@ export const reducer = (state, action) => {
     case ACTIONS.THEME: {
       return {
         ...state,
-        colors: {...action.colors},
+        colors: action.colors,
       };
     }
     case ACTIONS.USER: {
@@ -83,7 +83,7 @@ export const reducer = (state, action) => {
     case ACTIONS.SETTINGS: {
       return {
         ...state,
-        settings: {...action.settings},
+        settings: action.settings,
       };
     }
     case ACTIONS.TRASH: {

apps/mobile/src/services/Navigator.js

@@ -17,7 +17,7 @@ const Stack = createStackNavigator();
 
 export const NavigationStack = () => {
   return (
-    <NavigationContainer independent={true} ref={rootNavigatorRef}>
+    <NavigationContainer  ref={rootNavigatorRef}>
       <Stack.Navigator
         initialRouteName="Home"
         screenOptions={{

apps/mobile/src/views/Folders/index.js

@@ -35,6 +35,7 @@ export const Folders = ({route, navigation}) => {
   };
 
   useEffect(() => {
+   
     if (isFocused) {
       dispatch({type: ACTIONS.PINNED});
       dispatch({type: ACTIONS.NOTEBOOKS});

apps/mobile/src/views/Home/index.js

@@ -17,7 +17,6 @@ let count = 0;
 
 export const Home = ({navigation}) => {
   const [state, dispatch] = useTracked();
-
   const {
     colors,
     selectionMode,

apps/mobile/src/views/Notebook/index.js

@@ -20,30 +20,30 @@ import {
 } from '../../services/events';
 import {db, ToastEvent, w} from '../../utils/utils';
 
-export const Notebook = ({navigation}) => {
+export const Notebook = ({route,navigation}) => {
   const [state, dispatch] = useTracked();
   const {colors, selectionMode, preventDefaultMargins} = state;
   const [topics, setTopics] = useState([]);
   const [refreshing, setRefreshing] = useState(false);
 
-  let params = navigation.state.params;
+  let params = route.params;
   let notebook;
   let isFocused = useIsFocused();
 
   const onLoad = () => {
     let allTopics;
 
-    allTopics = db.notebooks.notebook(navigation.state.params.notebook.id).data
+    allTopics = db.notebooks.notebook(route.params.notebook.id).data
       .topics;
 
-    notebook = db.notebooks.notebook(navigation.state.params.notebook.id);
+    notebook = db.notebooks.notebook(route.params.notebook.id);
 
     setTopics(allTopics);
   };
 
   useEffect(() => {
     eSendEvent(eScrollEvent, 0);
-    params = navigation.state.params;
+    params = route.params;
     let topic = params.notebook.topics;
     notebook = params.notebook;
     setTopics([...topic]);
@@ -94,7 +94,6 @@ export const Notebook = ({navigation}) => {
               enabled: !selectionMode,
             });
           }
-
           dispatch({
             type: ACTIONS.SELECTED_ITEMS,
             item: item,