Warning: componentWillMount has been renamed

[devxbasit]

Hi jacek, can you please tell me how to get rid of this warning and what this warning really mean. Any useful article for beginners related to this warning

react-dom.development.js:89 Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.

• Move code with side effects to componentDidMount, and set initial state in the constructor.
• Rename componentWillMount to UNSAFEcomponentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

Please update the following components: app.core.app, app.nav.views.nav.nav

[jacekschae]

Hi! Thanks for reaching out!

This sounds like a warning from React (Reagent). I don't think this is anything you need to worry about and I understand that it's bothering you since you see it in the console.

Did you maybe change any dependencies in package.json?

[devxbasit]

No, I did nothing like that. I'm receiving this warning from almost the beginning.

here is my package.json

{ "name": "Cheffy", "version": "0.0.1", "description": "Cheffy - AirBnB for Chefs", "private": true, "repository": { "type": "git", "url": "https://github.com/jacekschae/learn-re-frame-course-files" }, "scripts": { "dev": "shadow-cljs watch app", "release": "shadow-cljs release app", "server": "shadow-cljs server", "clean": "rm -rf target && rm -rf public/js", "clean-win": "rmdir /s /q public/js & rmdir /s /q target" }, "dependencies": { "@smooth-ui/core-sc": "9.0.2", "create-react-class": "^15.6.3", "react": "^16.5.2", "react-dom": "^16.5.2", "styled-components": "^4.1.2", "styled-icons": "^5.4.0" }, "devDependencies": { "react-flip-move": "^3.0.2", "react-highlight.js": "^1.0.7", "shadow-cljs": "2.7.25" } }

And shadow-cljs.edn

{:source-paths ["src"]

:dependencies [[proto-repl "0.3.1"] [binaryage/devtools "0.9.10"] [reagent "0.8.1"] [re-frame "0.10.6"] [day8.re-frame/re-frame-10x "0.3.6-react16"] [bidi "2.1.5"] [kibu/pushy "0.3.8"] [com.andrewmcveigh/cljs-time "0.5.2"]]

:nrepl {:port 3333}

:builds {:app {:target :browser :output-dir "public/js" :asset-path "/js" :modules {:main {:init-fn app.core/init}}:compiler-options {:closure-defines {re-frame.trace/trace-enabled? true day8.re-frame.tracing/trace-enabled? true}} :devtools {:http-root "public" :http-port 3000 :preloads [day8.re-frame-10x.preload]}}}}

[jacekschae]

After diving into this and figuring out what exactly is causing this problem I had to update couple of things and dependencies.

Here is a rundown:

Update shadow.cljs:

CHANGELOG:
[binaryage/devtools "1.0.2"]
[reagent "0.10.0"]
[re-frame "1.0.0-rc6"]
[day8.re-frame/re-frame-10x "0.7.0"]

shadow-cljs.edn

{:source-paths ["src"]

 :dependencies [[proto-repl "0.3.1"]
                [binaryage/devtools "1.0.2"]
                [reagent "0.10.0"]
                [re-frame "1.0.0-rc6"]
                [day8.re-frame/re-frame-10x "0.7.0"]
                [bidi "2.1.5"]
                [kibu/pushy "0.3.8"]
                [com.andrewmcveigh/cljs-time "0.5.2"]]

 :nrepl        {:port 3333}

 :builds {:app {:target :browser
                :output-dir "public/js"
                :asset-path "/js"

                :modules {:main {:init-fn app.core/init}}

                :compiler-options {:closure-defines {re-frame.trace/trace-enabled? true
                                                     day8.re-frame.tracing/trace-enabled? true}}

                :devtools {:http-root   "public"
                           :http-port   3000
                           :preloads    [day8.re-frame-10x.preload]}}}}

Update package.json

CHANGELOG:
"highlight.js": "9.18.1",
"react": "^16.13.0",
"react-dom": "^16.13.0",
"shadow-cljs": "2.10.15"

package.json

{
  "name": "Cheffy",
  "version": "0.0.1",
  "description": "Cheffy - AirBnB for Chefs",
  "private": true,
  "repository": {
    "type": "git",
    "url": "https://github.com/jacekschae/learn-re-frame-course-files"
  },
  "scripts": {
    "dev": "shadow-cljs watch app",
    "release": "shadow-cljs release app",
    "server": "shadow-cljs server",
    "clean": "rm -rf target && rm -rf public/js",
    "clean-win": "rmdir /s /q public/js & rmdir /s /q target"
  },
  "dependencies": {
    "@smooth-ui/core-sc": "9.0.2",
    "create-react-class": "^15.6.3",
    "highlight.js": "9.18.1",
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "styled-components": "^4.1.2",
    "styled-icons": "^5.4.0"
  },
  "devDependencies": {
    "react-flip-move": "^3.0.2",
    "react-highlight.js": "^1.0.7",
    "shadow-cljs": "2.10.15"
  }
}

With Reagent 0.10.0 there was a breaking change how you grab render function. BEFORE

(:require [reagent.core :as r]))

NOW (with Reagent 0.10.0)

(:require [reagent.dom :as r])) ; notice `.core` vs `.dom`

So whenever in the course I use render function you need t require reagent.dom and not reagent.core I just run through the completed project and it's only in core.cljs. All the other places when I use r/atom or r/reactify-component it's all from reagent.core.

I hope that helps, if you would have any problems or questions feel free to reach out.

[devxbasit]

Thank you, It worked 🤗