Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update useDimensionsChanged hook so that it causes re-render #387

Merged
merged 3 commits into from
Dec 18, 2020

Conversation

timmydoza
Copy link
Contributor

@timmydoza timmydoza commented Dec 16, 2020

Contributing to Twilio

All third party contributors acknowledge that any contributions they provide will be made under the same open source license that the open source project is provided under.

  • I acknowledge that all my contributions will be made under the project's license.

Pull Request Details

JIRA link(s):

  • N/A

Description

This pull request contains a bugfix submitted by Github user @tomhicks. I've pulled his changes into a new PR so that the Circle CI tests can run on it. Here is the original PR: #376

This PR fixes an issue found in the useDimensionsChanged hook, where the handleDimensionsChanged function would set the same object reference as the one already stored in the hook's state. This means that component that use this hook would not re-render when a track's dimensions have changed.

handleDimensionsChanged now returns a new object reference when a track's dimensions have changed, which will correctly cause components to re-render.

Burndown

Before review

  • Updated CHANGELOG.md if necessary
  • Added unit tests if necessary
  • Updated affected documentation
  • Verified locally with npm test
  • Manually sanity tested running locally
  • Included screenshot as PR comment (if needed)
  • Ready for review

Before merge

  • Got one or more +1s
  • Re-tested if necessary

tomhicks and others added 3 commits December 2, 2020 13:57
The track.dimensions object remains the same throughout the lifespan of the track, but its values are updated. This means that the setter always receives the same object and therefore doesn't result in the state actually changing.

By copying the dimension values into a new object, we ensure that consumers of this hook are always kept up to date with the new dimensions.
@timmydoza timmydoza changed the title Patch 1 Update useDimensionsChanged hook so that it causes re-render Dec 16, 2020
@timmydoza timmydoza requested a review from mhuynh5757 December 17, 2020 16:22
@@ -10,7 +10,10 @@ export default function useVideoTrackDimensions(track?: TrackType) {
setDimensions(track?.dimensions);

if (track) {
const handleDimensionsChanged = (track: TrackType) => setDimensions(track?.dimensions);
const handleDimensionsChanged = (track: TrackType) => setDimensions({
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we still need the ? postfix operator on track here? We could also do something like setDimensions({ ...track?.dimensions }) so we get all of the properties like we used to, just in case something relied on any other track properties.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you need the null coaslescing, the types are wrong, so change those rather than reinstating what appears to be a redundant operator.

You're probably right about cloning the track dimensions to keep other properties, although you might have other deeply-nested objects that will suffer from the 'same reference' problem.

It might be better to specify exactly the return shape of this hook, rather than have it infer it from elsewhere.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we still need the ? postfix operator on track here?

No - it isn't needed inside the if (track) { block.

if (track) {
  // track will never be undefined in here
}

We could also do something like setDimensions({ ...track?.dimensions }) so we get all of the properties like we used to, just in case something relied on any other track properties.

We could, but width and height are the only properties on this object, so I think the code is fine as is. https://media.twiliocdn.com/sdk/js/video/releases/2.10.0/docs/VideoTrack.html#.Dimensions

@timmydoza timmydoza merged commit 5d9d28c into master Dec 18, 2020
@timmydoza timmydoza deleted the patch-1 branch December 18, 2020 18:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants