Add react hooks `use-state` and `use-memo` (#19016)

* feat: added use-state and use-memo

* feat: add reagent functional compiler

* test: fixed recovery-phrase tests

src/quo/components/inputs/recovery_phrase/component_spec.cljs

@@ -39,7 +39,7 @@
             {:keys [ok-words error-words]} (group-by #(if (string? %) :ok-words :error-words)
                                                      children-text-nodes)]
         (h/is-equal (apply str ok-words) "Text with some   that   the ")
-        (h/is-truthy (= (map #(-> % :props :argv second) error-words)
+        (h/is-truthy (= (map #(-> % :props :argv first) error-words)
                         ["error" "words" "don't" "satisfy" "predicate"]))))
 
     (h/test "Marked when words exceed the limit given"
@@ -55,7 +55,7 @@
         (h/is-equal (string/trim (apply str ok-words))
                     "these are ok words,")
         (h/is-equal (->> error-words
-                         (map #(-> % :props :argv second))
+                         (map #(-> % :props :argv first))
                          (interpose " ")
                          (apply str))
                     "these words exceed the limit")))))

src/react_native/core.cljs

@@ -122,6 +122,8 @@
 
 (def memo react/memo)
 
+(def use-state react/useState)
+
 (def create-ref react/createRef)
 
 (def use-ref react/useRef)
@@ -179,6 +181,10 @@
   ([handler deps]
    (react/useCallback handler (get-js-deps deps))))
 
+(defn use-memo
+  [handler deps]
+  (react/useMemo handler (get-js-deps deps)))
+
 (def layout-animation (.-LayoutAnimation ^js react-native))
 (def configure-next (.-configureNext ^js layout-animation))
 

src/status_im/navigation/view.cljs

@@ -17,6 +17,8 @@
     [status-im.setup.hot-reload :as reloader]
     [utils.re-frame :as rf]))
 
+(def functional-compiler (reagent/create-compiler {:function-components true}))
+
 (defn get-screens
   []
   (reduce
@@ -72,7 +74,8 @@
         (when js/goog.DEBUG
           [:<>
            [reloader/reload-view]
-           [schema.view/view]])]))))
+           [schema.view/view]])]))
+   functional-compiler))
 
 (def bottom-sheet
   (reagent/reactify-component
@@ -90,7 +93,8 @@
           :keyboard-vertical-offset (- (max 20 (:bottom insets)))}
          (when sheet
            [bottom-sheet/view {:insets insets :hide? hide?}
-            sheet])]]))))
+            sheet])]]))
+   functional-compiler))
 
 (def toasts (reagent/reactify-component toasts/toasts))
 
@@ -103,7 +107,8 @@
       [inactive]
       [popover/popover]
       (when js/goog.DEBUG
-        [reloader/reload-view])])))
+        [reloader/reload-view])])
+   functional-compiler))
 
 (def visibility-status-popover-comp
   (reagent/reactify-component
@@ -113,7 +118,8 @@
       [inactive]
       [visibility-status-views/visibility-status-popover]
       (when js/goog.DEBUG
-        [reloader/reload-view])])))
+        [reloader/reload-view])])
+   functional-compiler))
 
 (def sheet-comp-old
   (reagent/reactify-component
@@ -121,7 +127,8 @@
      ^{:key (str "sheet-old" @reloader/cnt)}
      [:<>
       [inactive]
-      [bottom-sheets-old/bottom-sheet]])))
+      [bottom-sheets-old/bottom-sheet]])
+   functional-compiler))
 
 (def signing-comp
   (reagent/reactify-component
@@ -131,4 +138,5 @@
       [inactive]
       [signing/signing]
       (when js/goog.DEBUG
-        [reloader/reload-view])])))
+        [reloader/reload-view])])
+   functional-compiler))

src/test_helpers/component_tests_preload.cljs

@@ -1,6 +1,7 @@
 (ns test-helpers.component-tests-preload
   {:dev/always true}
   (:require
+    [reagent.core :as reagent]
     ;; NOTE: Do NOT sort i18n-resources because it MUST be loaded first.
     [status-im.setup.i18n-resources :as i18n-resources]
     #_{:clj-kondo/ignore [:unsorted-required-namespaces]}
@@ -15,6 +16,7 @@
   should never be directly required. However, it will be loaded automatically
   before any component test runs."
   []
+  (reagent/set-default-compiler! (reagent/create-compiler {:function-components true}))
   (interceptors/register-global-interceptors)
   (i18n/set-language "en")
   (i18n-resources/load-language "en"))