It adds a lot of value if you are doing daily React development. But doesnt add any value in cljs land

You can use hooks in Reagent, this article explains clearly https://juxt.pro/blog/posts/react-hooks-raw.html

Also this is a an snippet from one of my projects. It uses MUI v4 and makeStyles hook.

(ns app.navigation
  (:require
   [reagent.core :as r]
   ["@material-ui/core" :refer [List ListItem Button]]
   ["@material-ui/styles" :refer [makeStyles]]
   ["@material-ui/icons" :refer [ExpandMore ExpandLess BarChart] :rename {ExpandMore ExpandMoreIcon
                                                                          ExpandLess ExpandLessIcon}]))

;;
(defn custom-styles [^js/Mui.Theme theme]
  #js {:root   #js {:margin-bottom (.spacing theme 3)}})

(def with-custom-styles (makeStyles custom-styles))

(defn navigation-item
  [{:keys [title icon label]}]
  [:> ListItem
   [:> Button
    [:> icon]
    title
    (when label
      [:> label])]])

;;
(def nav-list
  [{:title "Home" :href "/" :icon BarChart}
   {:title "Dashboard" :href "/dashboard" :icon BarChart}
   {:title "Projects" :href "/projects" :icon BarChart}
   {:title "Calendar" :href "/calendar" :icon BarChart}
   {:title "Clients" :href "/clients" :icon BarChart}
   {:title "Template Manager" :href "/templates" :icon BarChart}])

(defn navigation
  []
  (let [styles (with-custom-styles)]
    (r/as-element
     [:div {:class [(.-root styles)]}
      [:> List
       (for [nav nav-list]
         ^{:key (:title nav)}
         [navigation-item nav])]])))

Wow! Which version of reagent/MUI? Did you use webpack for bundle? You didn't get warnings about ReactDOM incompatibilties?

Ah I see. Thank you @UGMEQUCTV for the explanation on the hooks. I can see how they would be quite valuable in daily React land.

does this method

(ns app.navigation
  (:require
   [reagent.core :as r]
   ["@material-ui/core" :refer [List ListItem Button]]
   ["@material-ui/styles" :refer [makeStyles]]
   ["@material-ui/icons" :refer [ExpandMore ExpandLess BarChart] :rename {ExpandMore ExpandMoreIcon
                                                                          ExpandLess ExpandLessIcon}]))

You don't need hooks at all if you just use cljs with reagent/re-frame, but when you start doing interop and use js libraries, sometimes hooks are unavoidable. For example graphql lib apollo relies on hooks for the queries, and in react-native world you are missing a lot in react-navigation without effects, such as useIsFocused, useSafeArea, useHeaderHeight, useScrollToTop, and all the hooks related to animations

Also maybe I was doing something wrong but in previous versions of reagent I found it pretty hard to use hooks in components without losing some params in the clj->js->clj conversions (not losing completely but losing namespaces in keywords and sets in vectors)

FWIW, I'm using reagent 0.10 and material-ui 4.9.5 (via the cljsjs packages), works just fine. Not using any hooks, though.

@U077MDEDS gotcha. I'm including material-ui v4 in with npm via webpack/figwheel and I'm getting an error with reactDOM stuff. Let me see if I can replicate real quick...

Here's the issue. I get this error: https://reactjs.org/docs/error-decoder.html/?invariant=321 The minimal code that causes this is:

(def text-area (reagent/adapt-react-class js/window.MaterialUI.TextareaAutosize))

(def main-panel []
  [text-area])

yarn add material-ui
yarn webpack

import * as MaterialUI from "@material-ui/core";
window.MaterialUI = MaterialUI;

^{:watch-dirs ["src"]
  :css-dirs   ["resources/public/css"]
  :npm        {:bundles {"dist/index.bundle.js" "src/js/index.js"}}}
{:main            project.core
 :closure-defines {DEBUG true}
 :output-to       "resources/public/js/compiled/app.js" }

So based on the docs here: https://material-ui.com/getting-started/installation/ you need react >= 16.8 and the version in my /target/public/cljs-out/dev/cljsjs/react-dom/development/react-dom.inc.js is var

ReactVersion = '16.13.0';

wait... I still don't see why that's an issue

anyway I fixed it with the following workaround

import * as MaterialUI from "@material-ui/core";
import * as React from "react";
import * as ReactDOM from "react-dom";

window.MaterialUI = MaterialUI;
window.React = React;
window.ReactDOM = ReactDOM;

and it works now ¯\(ツ)/¯

What figwheel version are you using? I get an error when passing from figwheel-main 0.2.0 to 0.2.1

squint that's a good question. I'm using cider-jack-in-cljs so I'm not sure what it's using

I'm using the Material-UI packages from cljsjs and classical figwheel-main via leiningen. So not via yarn, so that might be why I've never run into a problem there.