This message was deleted.
# helpdesk
s
This message was deleted.
b
you can try to use “useMemo” to prevent the refresh of the specific component inside the participantRenderer
n
@bulky-animal-7027 how I would use this since participantRenderer is a function witch returns a ReactElement?
maybe u wanna say useCallback, perhaps?
b
I used stageRenderer, but its basically the same:
Copy code
stageRenderer={(props: StageProps) => {
          return <StageView {...props} params={params} />}</>;
        }}
then inside StageView you can use:
const localParticipant = useMemo(() => room?.localParticipant, [room]);
n
Ok, let me try
Did you had the same issue or
?
b
But yes, Livekit component has some issues with re-render multiple times
yes, we did
n
Damn
The thing is not using in my case a custom UI the unmount behavior is not obvious, or maybe is not happening but can't confirm since I'm not sure abou this
@bulky-animal-7027 is not working :))
because even if I use useMemo let’s say I render with participantRenderer a component witch returns a <img/> tag
the unmount happends with the component witch is returned from the
participantRender
function
so this does not solve our probblem
b
humm.. I didn’t have a problem with unmount, but with re-render.. the image was blinking, that was caused by the participant state change, so that solved for us. 😕
another option was to remove the component from stageRender and render outside livekit, passing the state
n
the ideea is what I’m trying to achieve is having a custom design for the user cameras
an this is a big issue because this would have saved a lot of time using participantRender 😞
in the GridStage component from the lib is decided what is rendered
Copy code
const ParticipantRenderer = participantRenderer ?? ParticipantView;
so around here may be the “bug”