The warning speaks for itself, I think. home has to be a proper function component. Given that you cannot use reactify-component with a function component, I see two options: - Wrap home in a regular Reagent component and use reactify-component on it - Use the old way to create a proper function component: https://github.com/reagent-project/reagent/blob/master/doc/ReactFeatures.md#pre-10-workaround

@U2FRKM4TW what do you mean by “Wrap `home` in a regular Reagent component”?

(defn wrapped-home []
  [:f> home])

(defn home []
  ...)

@U2FRKM4TW that gives the following error:

Rendered more hooks than during the previous render

No idea.

I changed the useRef hook to useCallable, and now I get the same error:

Invalid Hook call. Hooks can only be called inside of the body of a function component...

In that case we can’t use reactify-component at all

> all the parents of the component that contains the hook must be functional This is false.

@U01F1TM2FD5 calling reactify-component on home won't work, since Reagent will create a class component to wrap home

instead, treat home like a React component:

(defn home [props]
  (dispatch [:load-videos 1])
  (as-element
   [safe-area-view ,,,]))

this way you can use hooks inside of it

That was my very first message in this thread. :)

I was thinking you would then pass home in directly to the Screen Stack. the extra layer and reactify-component to convert props makes sense tho

@U01F1TM2FD5 another thing I noticed: you're using useRef here to wrap the callback passed to onViewableItemsChanged. why is that?

@U4YGF4NGM This is what I have now:

(defn home [{:keys [navigation] :as props}]
  (dispatch [:load-videos 1])
  (as-element [safe-area-view {:backgroundColor :white :flex 1}
   [:<>
    (if-not @(subscribe [:videos-loaded])
      ;; gif requires fresco library for android
      [image {:source (js/require "../resources/images/loading.gif")
              :style {:top 80 :left -115 :resizeMode :cover}}]
      [flat-list {:refreshControl
                  (as-element
                   [refresh-control {:refreshing @(subscribe [:refreshing])
                                     :onRefresh #(dispatch [:load-videos 1])}])
                  :data @(subscribe [:videos])
                  :renderItem (fn [item]
                                (as-element
                                 [video-press (get (js->clj item) "item")
                                  navigation]))
                  :keyExtractor (fn [item]
                                  (.-uri item))
                  :initialNumberToRender 4
                  :maxToRenderPerBatch 2
                  :windowSize 5
                  :onViewableItemsChanged viewable-ref
                  ;;#(dispatch [:load-if-at-last %1 %2])
                  :style {:paddingLeft 10
                          :paddingRight 10}}])]]))

I’m following the second answer in this to use onViewableItemsChange properly: https://stackoverflow.com/questions/48045696/flatlist-scrollview-error-on-any-state-change-invariant-violation-changing-on

yes, apologies. if you're passing home in like this then it won't subscribe to your re-frame subs

basically I was trying to do in the flatlist:

:onViewableItemsChange #(dispatch […])

that's frustrating

so I wrapped it around useCallable

and that’s where we’re at

let's try what @U2FRKM4TW suggested with a couple modifications:

(defn home [{:keys [navigation] :as props}]
  (let [on-viewable-items-change (.-current (useRef ,,,))]
    (dispatch [:load-videos 1])
    [safe-area-view {:backgroundColor :white :flex 1}
     [:<>
      (if-not @(subscribe [:videos-loaded])
        ,,,)]]))

(defn wrapped-home [props]
  [:f> home])

the error you were seeing before about "Rendered more hooks than during the previous render" was due to having the useRef call inside of the if expression

hooks calls must be static across renders - you cannot put them inside loops or conditionals

the wrapped-home can be reactify-component and passed in like you did before

thanks @U4YGF4NGM @U2FRKM4TW

How is regular-cells used?

If it's used as (regular-cells ...), then replace () with []. If it's used with [], then it's probably because the :on-click function get recreated on each render of regular-cells. I don't know all the inner workings of this particular issue, but there have been numerous discussions about it. I believe there are hooks that fix it, but I'm not sure whether using them for such a simple component would be worth it. It could also be fixed by using a cache manually, which is also more trouble than it might be worth in this particular case.

If you confirm that it's indeed the latter, you can @ lilactown - I remember him having this discussion with someone else recently.

Thank you @U2FRKM4TW, I'll check how regular-cells and continue my investigation 🙂

I finally nailed it

What was it?

I had something like this:

(into [:div]
         (cond-> [[regular-cells :entity @entity]]
                       @show? (merge [:div "..."] [:div "..."])))

Not sure either. But this particular code makes me squint in suspicion. The contract of merge says that it's to be used only with maps. But you're passing it vectors. I have no clue what you want to get out of it, but it's definitely not a correct usage.

Perhaps, you want to use into instead.

(cond-> [:div [regular-cells ...]]
  @show? (conj [:div ...] [:div ...]))

Using into instead of merge if for sure a better practice. It doesn't resolve the issue though (tested)

Sure, I didn't mean that it would help with the initial problem. It's just that using merge on anything other than maps is an undefined behavior.

Oh ok, thank you for pointing that out 🙂