refactor all "UNSAFE_" calls to newer react lifecycle calls

[cindyloo]

No description provided.

[cindyloo]

the following are deprecated:
componentWillMount
componentWillRecieveProps
componentWillUpdate

according to this link
we should implement
componentWillReceiveProps -> getDerivedStateFromProps

componentWillUpdate -> getSnapshotBeforeUpdate
getSnapshotBeforeUpdate handles what componentWillUpdate and componentDidUpdate would have done just before the DOM gets updated.

componentWillMount -> componentDidMount

this affect 36 matches across 27 files. Do we feel it is necessary at this point to do? When we move to React v17, it will be....

[rahulbot]

When that deprecation got release, I ran the script that marked them all as UNSAFE_. At that point I was daunted by refactoring to fix all of them, because we had ongoing features in development. It is technical debt we will have to pay in order to keep up with React updates soon, lest we fall behind like we have with react-router (#562). When to pay it is the tricky question.

[dsjen]

Thanks for digging up info on how to do it and I agree that it's a big endeavor. We don't have to tackle this all at once and can pick a file at a time. I bet once we establish a pattern the task will be less daunting, and we can divide and conquer.

[cindyloo]

I propose sectioning off
first:
common/ && common/mediapicker (10 files or so)
in tandem or one then the other:
sources && explorer (10 files or so)
topics (13 files or so)

[cindyloo]

I found this article very helpful for refactoring https://itnext.io/react17-or-how-to-get-rid-of-componentwillreceiveprops-c91f9a6f6f03

[cindyloo]

mediapicker, topics, explorer now refactored and spot tested. sources will be the last section