Media Player - Limit Unnecessary re-renders

[ryanmccombe]

Resolves bbc/simorgh#5528

Overall change:
Limit unnecessary re-rendering of the component, to prevent the iframe from resetting

This was due to upstream components creating new mediaInfo objects that contain the same content as the previous object

Code changes:

• Memoise the component based on a deep equality check

---

• I have assigned myself to this PR and the corresponding issues
• Automated jest tests added (for new features) or updated (for existing features)
• This PR requires manual testing

[RichardPK]

This may be unnecessarily explicit, as I'm describing essentially what ramda equals does implicitly, but, for future readability - I'm not sure it's clear that equals is being passed prevProps and nextProps?

I quite like the model of passing a function isEqual as the second argument in the memo and then declaring the function along these lines: (though I realise === may always evaluate to false even if the objects are principally 'the same', so may need rearranging)

const isEqual = (prevProps, nextProps) => {
  return prevProps === nextProps
}

I think this makes it clearer what's going on and maybe negates the need for adding comments?

[ryanmccombe]

cheers 👍 added wrapping function

we still need the deep equality check as === just checks if the objects are the same instance, ie, the same place in memory

the bug we're dealing with is parent components creating an entirely new object and passing it down - but that object has all the same values as the previous one

different objects will fail the === check but, if they have the same content, they'll pass the ramda equals check

[ryanmccombe]

CI is failing because this wrapping function doesn't have test coverage 🤣

[RichardPK]

-0.1% you naughty boy.

[RichardPK]

🚢