Fork me on GitHub
#reagent
<
2021-10-18
>
pmooser10:10:04

I'm trying to start using some function components, but as soon as I have one and unmount it, I get an error log from react Warning: Can't perform a React state update on an unmounted component.

pmooser10:10:24

It isn't obvious to me what I'm doing to cause that, even from the stack trace ... any pointers on how to track it down and resolve it?

pmooser11:10:18

This seems suuuper annoying. Like as soon as you have a function component somewhere, it starts whining about otherwise legal/ok operations elsewhere in your app.

p-himik13:10:30

Coming up with a minimal reproducible example could help figure out what's wrong.

pmooser15:10:36

It isn't clear to me that something is wrong, since this seems to be a fairly common category of error (along with the error message I included) when people start using function components. I haven't found many non-trivial examples of people using functional components in reagent in general, so it is hard to judge, but I'm guessing it's hard to just dip your toes into the pool of functional components without changing the rest of your app.

pmooser15:10:20

I will see if it is possible to extract a minimal example, but that isn't trivial.

p-himik15:10:41

I have no idea what you mean. Here's a very simple example where f is a function component (notice how I use it via :f>):

(ns app.core
  (:require [clojure.browser.dom]
            [reagent.core :as r]
            [reagent.dom]))

(defn f [x]
  [:span "Hello " x])

(defn app []
  (r/with-let [n (r/atom 0)]
    [:div
     [:f> f @n]
     [:button {:on-click #(swap! n inc)}
      "inc"]]))

(defn ^:export main []
  (reagent.dom/render [app] (clojure.browser.dom/get-element :app)))

pmooser15:10:12

I will try to create a minimal example.

👍 1