title: Should you use State when a component will Re-Render regardless due to a Props change?
body: <p>App.js:</p>
  
  <pre><code>class App extends React.Component {
    state = {
      pokemons: [
        { name: 'Charmander_Managed_By_State', level: 5 }
      ]
    }
  
    propsLevel = 5;
  
    levelPokemonHandler = () =&gt; {
      this.setState({
        pokemons: [
          { name: 'Charmander_Managed_By_State', level: (this.state.pokemons[0].level +1) }
        ]
      })
      this.propsLevel++;
    }
  
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;h1&gt;Hi, I'm a React App&lt;/h1&gt;
          &lt;button onClick={this.levelPokemonHandler}&gt;Level Pokemon&lt;/button&gt;
          &lt;Pokemon name={this.state.pokemons[0].name} level={this.state.pokemons[0].level}/&gt;
          &lt;Pokemon name="Charmander_Managed_By_Props" level={this.propsLevel}/&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>Pokemon.js</p>
  
  <pre><code>const pokemon = (props) =&gt; {
      return (
          &lt;div&gt;
              &lt;p&gt;I'm {props.name} and I'm level {props.level}&lt;/p&gt;
              &lt;p&gt;{props.children}&lt;/p&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>
  
  <p>Given the code above, is changing the Pokemon level via state appropriate or not?
  Since level will be passed as a property to the Pokemon component having it explicitly in state is redundant, but it does add some clarity.</p>
  
  <p>What way is generally considered best practice?</p>