Skip to content

Commit d3aed6f

Browse files
Added call back for react setState hook (#729)
When react's set state hook depends on past values, a callback is recommendend
1 parent 90982ee commit d3aed6f

File tree

2 files changed

+22
-26
lines changed

2 files changed

+22
-26
lines changed

Example/index.js

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -82,24 +82,22 @@ const Example = (props) => {
8282
const _onParticipantAddedVideoTrack = ({ participant, track }) => {
8383
console.log("onParticipantAddedVideoTrack: ", participant, track);
8484

85-
setVideoTracks(
86-
new Map([
87-
...videoTracks,
88-
[
89-
track.trackSid,
90-
{ participantSid: participant.sid, videoTrackSid: track.trackSid },
91-
],
92-
])
93-
);
85+
setVideoTracks((originalVideoTracks) => {
86+
originalVideoTracks.set(track.trackSid, {
87+
participantSid: participant.sid,
88+
videoTrackSid: track.trackSid,
89+
});
90+
return new Map(originalVideoTracks);
91+
});
9492
};
9593

9694
const _onParticipantRemovedVideoTrack = ({ participant, track }) => {
9795
console.log("onParticipantRemovedVideoTrack: ", participant, track);
9896

99-
const newVideoTracks = new Map(videoTracks);
100-
newVideoTracks.delete(track.trackSid);
101-
102-
setVideoTracks(newVideoTracks);
97+
setVideoTracks((originalVideoTracks) => {
98+
originalVideoTracks.delete(track.trackSid);
99+
return new Map(originalVideoTracks);
100+
});
103101
};
104102

105103
const _onNetworkLevelChanged = ({ participant, isLocalUser, quality }) => {

README.md

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -302,24 +302,22 @@ const Example = (props) => {
302302
const _onParticipantAddedVideoTrack = ({ participant, track }) => {
303303
console.log("onParticipantAddedVideoTrack: ", participant, track);
304304

305-
setVideoTracks(
306-
new Map([
307-
...videoTracks,
308-
[
309-
track.trackSid,
310-
{ participantSid: participant.sid, videoTrackSid: track.trackSid },
311-
],
312-
])
313-
);
305+
setVideoTracks((originalVideoTracks) => {
306+
originalVideoTracks.set(track.trackSid, {
307+
participantSid: participant.sid,
308+
videoTrackSid: track.trackSid,
309+
});
310+
return new Map(originalVideoTracks);
311+
});
314312
};
315313

316314
const _onParticipantRemovedVideoTrack = ({ participant, track }) => {
317315
console.log("onParticipantRemovedVideoTrack: ", participant, track);
318316

319-
const videoTracksLocal = videoTracks;
320-
videoTracksLocal.delete(track.trackSid);
321-
322-
setVideoTracks(videoTracksLocal);
317+
setVideoTracks((originalVideoTracks) => {
318+
originalVideoTracks.delete(track.trackSid);
319+
return new Map(originalVideoTracks);
320+
});
323321
};
324322

325323
return (

0 commit comments

Comments
 (0)