How to multiply images and font size by a factor?

aside from that, I would be very grateful, if you could help me figure out something else:
https://www.loom.com/share/e1c8d207178145dea00b8645133bc2fe

Basically I’m confused bout why the section component is re-rendered so often / showing me so many console.logs

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…

const [slicePosition, setSlicePosition] = React.useState(0);
const handleRightArrowClick: () => {
  setSlicePosition(slicePosition + maxItems);
}

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())

Yes, that was so obvious :man-facepalming::joy:

But thanks. And I hope you find time to answer my other questions, not just the embarrassing one :smile:

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:

display: "grid",
justifyContent: "center",
margin: 10,
gap: 10,

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:

(if min-width was removed it would get as small as the SectionHeader could be)

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

image.png

Yeah margin not available on the component root; instead, you should set it on the component instance where you want the margin to be.