Fork me on GitHub
#reagent
<
2020-04-16
>
Lucy Wang00:04:32

created a pr to improve the doc about using react portals https://github.com/reagent-project/reagent/pull/488 (from the discussion in https://github.com/reagent-project/reagent/issues/418)

Oz08:04:26

Hi, :spock-hand: a question about form 3 components. My app have a tabbed view of data for three little robots. I have a component, that renders a tab, and triggers a polling of some relevant data for the currently viewed robot. The active tab is an atom, so when I change it it re-renders the component:

(defn robot-panel []
           (let [active-tab (re-frame/subscribe [::subs/active-tab])]
           ;;some other stuff
              [robot-tab @active-tab]
           ;;some other stuff
           ))
Then, the robot-tab component, when mounted starts polling, and when unmounted stops polling
(defn robot-tab [n]
  "renders a tab displaying fish feeding robot data"
  (reagent/create-class 
    {:component-did-mount
     (fn [this]
       (request-robot n))
     :component-will-unmount
     (fn [this]
       (release-robot n))
     :reagent-render
     (fn [n] [:<> 
     ;;Some robot things that get rendered
      ])}))

Oz08:04:57

However, when switching a robot tab,the component doesn't unmount and remount, so the polling don't update. I need to tell it to run (release-robot old-n) (request-robot new-n) When it updates.. So I should probably store them in local state and use them in :component-did-update

Oz08:04:36

Thank you, that might be the solution https://emojipedia.org/face-with-tears-of-joy/

juhoteperi08:04:36

@ozfraier You can control when the component is unmounted and remounted by changing its identity - React key. If you only change the props, the component is the same, but it is just re-rendered. ^{:key robot-id} [robot-tab n] would unmount the old robot-tab component and create new when the robot-id value changes.

juhoteperi08:04:15

(robot-id = n probably here)

Oz09:04:22

Thank you @juhoteperi, It works! Edited: I had a bug here but it was caused by something else...

Lucy Wang14:04:49

@ozfraier If you're using a client side router like reitit, another way is to bind these tabs to different urls (for instance ) and use the mechanism provided by the router to start/stop the poller when switching routes

💡 4