title: fetch Data when context changes in React
body: <p>I need to make a new api request to fetch data for a given dataId.
  this value lives in the Context. </p>
  
  <pre><code>import { MyContext } from './Context'
  
  class MyComponent extends Component {
  
      constructor(props) {
          super(props)
  
          this.state = {
              dataId: this.context.state.dataId // tried setting state first but didn´t work.
          }
  
          this.details = this.details.bind(this)
      }
  
      details() {
  
          fetch('https://api.mydomain.com/' + this.context.state.dataId)
              .then(response =&gt; response.json())
              .then(data =&gt; this.setState({ data: data }));
      }
  
      componentDidMount() {
          this.details()
      }
  
      render() {
  
          return(
  
          &lt;MyContext.Consumer&gt;
              {(context) =&gt; (
                  &lt;div&gt;data: {JSON.stringify(data)} dataId: {context.state.dataId}&lt;/div&gt;
  
              )}
          &lt;/MyContext.Consumer&gt;
  
          )
      }
  }
  
  MyComponent.contextType = MyContext;
  export default MyComponent
  </code></pre>
  
  <p>from others components I can set new values like</p>
  
  <pre><code>this.context.setDataId(1)
  </code></pre>
  
  <p>and this will show up correctly but the problem is that is not making a new fetch to get new data for the dataId that changed in the Context.
  not sure what´s the correct lifecycle method I can use to detect changes in the context and make a new call to <strong>this.details()</strong></p>
  
  <p>I didn´t add the <em>Context</em> code here because it works fine. but if you need to see it please let me know.</p>