Hmm for pagination, I’m seeing that in handleRightArrowClick(), you are modifying slicePosition the variable directly. Instead, slicePosition should be part of your component state…
This will kick off a re-render of the component (setting state always does, so you don’t need forceUpdate() anymore), and the next time your component is rendered, the slicePosition will be updated to the new value.
Every time the component renders, all the local variables are gone; the only things that are persisted from render to render are things stored in state (via useState() ) and in ref.current (via useRef())
For re-rendering, it is hard to tell without working with the code… In React, though, by default, when a component is re-rendered, its entire subtree is re-rendered (so if you have a high-level component that’s doing data fetching and setting its state, then you’ll see your app getting re-rendered a lot). The “fix” is to memoize your components so the descendant components only re-render if their own props have changed
tried React.memo before.
Doesn’t change anything in my case. just starting the app causes 3 renders. then fetching the playlists with React Query causes 5 renders (meaning the same top level comments are shown 5x) :man-shrugging: I’ll let you know once I figure the culprits.
also, fwiw regarding the Section component not stretching out:
perhaps it helps to know, that it is living inside a div with only these attributes:
adding a width of 100% to this div doesn’t change the fact that the Section component has an innate urge to shrink down to the smallest passible size. Here’s the css of it again:
I’ve figured out, that justifyContent: center on the parent div (whose only purpose is to center it’s children) made it’s children want to be as small as possible.
I removed it.
And put margin: 0 auto on the .root of the SectionComponent
→ works
but it seems I have to make a style override to make this happen
for some reason, the margin is not accessible in the Plasmic UI on the root of the Section Component