I am learning reactjs and I wrote component with the method componentWillReceiveProps (cWRP) but I read that it is deprecated and it must replace with getDerivedStateFromProps (gDSFP) - <https://en.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html>.  

Please note that the following code has the sole purpose of illustrating my problem and questions. It is not a full code.  

App.js file :

```
import React from 'react';
import './App.css';

import Display from './component.js'

class App extends React.Component {

  state={resetCounter:false}

  resetCounter= () => this.setState( {resetCounter: true} );

  render() {
      return (
      <div className="App">
        <header className="App-header">
          <Display resetCounter={this.state.resetCounter}></Display>
          <div>
           <p></p><p></p>
           <button onClick={this.resetCounter}>Reset</button>
          </div>
        </header>
      </div>
    );
  }

  componentDidUpdate () {
    if (this.state.resetCounter!==false)
      this.setState( {resetCounter: false} );
  }

}

export default App;

```

component.js file   

```
import React from 'react'

class Display extends React.Component {

  constructor() {
    super();
    this.state = this.resetState();
    this.state.generalCounter=0;
  } 

  /* method to avoid code duplication in constructor and cWRP
   could not be used with getDerivedStateFromProps */
  resetState = () => ({resettableCounter: 0,}); 

  componentWillReceiveProps(nextProps) {
    if (nextProps.resetCounter===true) 
      this.setState(this.resetState())
  }

  render() {
    return (
        <>
        <div>
        <div>general counter : {this.state.generalCounter}</div>
        <div>resettable counter : {this.state.resettableCounter}</div>
        </div>
        <div>
            <button onClick={this.incCounters}>+</button>
            <button onClick={this.decCounters}>-</button>
        </div>
        </>
    )
  }

  incCounters= () => this.setState(
    {
      resettableCounter: this.state.resettableCounter+1,
      generalCounter: this.state.generalCounter+1 
    }
  )

  decCounters= () => this.setState(
    {
      resettableCounter: this.state.resettableCounter-1,
      generalCounter: this.state.generalCounter-1
    }
  )

}

export default Display

```

In the state of the component, there is a resettable part and a non resettable one. A method `resetState` is used to avoid code duplication in the constructor and in cWRP.  

To replace cWRP by gDSFP, I wrote a class method because instance method could NOT be called in gDSFP (`this` is not usable)

```
... 

  constructor() {
    super();
    this.state = Display.resetState();
    this.state.generalCounter=0;
  } 

  static resetState () {
    return ({resettableCounter: 0,}); 
  }

  static getDerivedStateFromProps(nextProps) {
    if (nextProps.resetCounter === true) {
      return Display.resetState();
    } else {
      return null;
    }
  }

...

```

With this solution, it is very easy to modify all my components but I am not sure that it is a good mean.  

I wonder if I have a misconception and if I should rewrite my components to separate them into Fully controlled components and Fully uncontrolled components with a key ( <https://en.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#preferred-solutions>).   

For example, in this case, do I have to write :

1. One Fully uncontrolled components for the resettable counter
2. One Fully controlled one for the non resettable counter
3. A parent component with the +/- buttons to render them.

I ask this question because in some cases, it will be much work, so I want to be sure before continuing.