docs(ComponentExample): replace deprecated lifecycle methods

[GreenTeaCake]

Relates to #2732: Removes componentWillMount and componentWillReceiveProps from docs/src/components/ComponentDoc/ComponentExample/ComponentExample.js.

[layershifter]

Wow, that's great ❤️

[codecov-io]

Codecov Report

Merging #3533 into master will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master    #3533   +/-   ##
=======================================
  Coverage   99.81%   99.81%           
=======================================
  Files         174      174           
  Lines        2725     2725           
=======================================
  Hits         2720     2720           
  Misses          5        5

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update eb55ca5...201bf72. Read the comment docs.

[layershifter]

We can move anchorName to constructor() as we need it only once

[GreenTeaCake]

We can do that only in case if examplePath property is never changed. Current usage of ComponentExample implies such usage. But it is a little bit confusing from general perspective.

[layershifter]

Based on nature of ComponentExample it's impossible in production and almost impossible in development, so actually we can do this :)

[GreenTeaCake]

Ok. I got it. Another reason to have anchorName in state is the ability to use it in static context during derived state computation. If the point for having it as a class field is to perform a computation just once I can do a conditional assignment to the non-empty anchorName.

[layershifter]

getDerivedStateFromProps() will be dispatcher right after constructor(), we don't need this

[GreenTeaCake]

We use computation for state here to be able to enable source code displaying and set initial value for source code (see an assignment below).

[layershifter]

I understand what you mean, but I prefer separation of concerns there: if we will change something in getDerivedStateFromProps() it will break constructor.

Other confusion is placed around lifecycle: https://code.likeagirl.io/understanding-react-component-life-cycle-49bf4b8674de (we call constructor(), getDerivedStateFromProps() and then again getDerivedStateFromProps())

const originalSourceCode = props.exampleSources[props.examplePath]

this.state = {
  anchorName: examplePathToHash(props.examplePath),
  originalSourceCode,
  showCode: anchorName === props.location.hash,
  sourceCode: originalSourceCode,
}

[GreenTeaCake]

I can just remove line n93 (...state,).

[layershifter]

@grumblerchester I've pushed some changes and merged master, can you please check them? 🙄

[GreenTeaCake]

@layershifter Hey! I've checked the code locally. Everything works fine