title: Access React Context outside of render function
body: <p>I am developing a new app using the new React Context API instead of Redux, and before, with <code>Redux</code>, when I needed to get a list of users for example, I simply call in <code>componentDidMount</code> my action, but now with React Context, my actions live inside my Consumer which is inside my render function, which means that every time my render function is called, it will call my action to get my users list and that is not good because I will be doing a lot of unecessary requests.</p>
  
  <p>So, how I can call only one time my action, like in <code>componentDidMount</code> instead of calling in render?</p>
  
  <p>Just to exemplify, look at this code:</p>
  
  <p>Let's suppose that I am wrapping all my <code>Providers</code> in one component, like this:</p>
  
  <pre><code>import React from 'react';
  
  import UserProvider from './UserProvider';
  import PostProvider from './PostProvider';
  
  export default class Provider extends React.Component {
    render(){
      return(
        &lt;UserProvider&gt;
          &lt;PostProvider&gt;
            {this.props.children}
          &lt;/PostProvider&gt;
        &lt;/UserProvider&gt;
      )
    }
  }
  </code></pre>
  
  <p>Then I put this Provider component wrapping all my app, like this:</p>
  
  <pre><code>import React from 'react';
  import Provider from './providers/Provider';
  import { Router } from './Router';
  
  export default class App extends React.Component {
    render() {
      const Component = Router();
      return(
        &lt;Provider&gt;
          &lt;Component /&gt;
        &lt;/Provider&gt;
      )
    }
  }
  </code></pre>
  
  <p>Now, at my users view for example, it will be something like this:</p>
  
  <pre><code>import React from 'react';
  import UserContext from '../contexts/UserContext';
  
  export default class Users extends React.Component {
    render(){
      return(
        &lt;UserContext.Consumer&gt;
          {({getUsers, users}) =&gt; {
            getUsers();
            return(
              &lt;h1&gt;Users&lt;/h1&gt;
              &lt;ul&gt;
                {users.map(user) =&gt; (
                  &lt;li&gt;{user.name}&lt;/li&gt;
                )}
              &lt;/ul&gt;
            )
          }}
        &lt;/UserContext.Consumer&gt;
      )
    }
  }
  </code></pre>
  
  <p>What I want is this:</p>
  
  <pre><code>import React from 'react';
  import UserContext from '../contexts/UserContext';
  
  export default class Users extends React.Component {
    componentDidMount(){
      this.props.getUsers();
    }
  
    render(){
      return(
        &lt;UserContext.Consumer&gt;
          {({users}) =&gt; {
            getUsers();
            return(
              &lt;h1&gt;Users&lt;/h1&gt;
              &lt;ul&gt;
                {users.map(user) =&gt; (
                  &lt;li&gt;{user.name}&lt;/li&gt;
                )}
              &lt;/ul&gt;
            )
          }}
        &lt;/UserContext.Consumer&gt;
      )
    }
  }
  </code></pre>
  
  <p>But ofcourse that the example above don't work because the <code>getUsers</code> don't live in my Users view props. What is the right way to do it if this is possible at all?</p>