Estou desenvolvendo um novo aplicativo usando a nova API do React Context em vez do Redux e, antes, comRedux, quando eu precisava obter uma lista de usuários, por exemplo, eu simplesmente chamavacomponentDidMount minha ação, mas agora com o React Context, minhas ações vivem dentro do consumidor, que está dentro da minha função de renderização, o que significa que toda vez que minha função de renderização é chamada, ela chama minha ação para obter a lista de usuários e isso não é bom porque eu fará muitos pedidos desnecessários.

Então, como posso chamar apenas uma vez minha ação, como emcomponentDidMount em vez de chamar render?

Apenas para exemplificar, veja este código:

Vamos supor que estou envolvendo todos os meusProviders em um componente, assim:

import React from 'react';

import UserProvider from './UserProvider';
import PostProvider from './PostProvider';

export default class Provider extends React.Component {
  render(){
    return(
      <UserProvider>
        <PostProvider>
          {this.props.children}
        </PostProvider>
      </UserProvider>
    )
  }
}

Em seguida, coloquei esse componente do provedor, agrupando todo o meu aplicativo, assim:

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(
      <Provider>
        <Component />
      </Provider>
    )
  }
}

Agora, na minha opinião dos usuários, por exemplo, será algo como isto:

import React from 'react';
import UserContext from '../contexts/UserContext';

export default class Users extends React.Component {
  render(){
    return(
      <UserContext.Consumer>
        {({getUsers, users}) => {
          getUsers();
          return(
            <h1>Users</h1>
            <ul>
              {users.map(user) => (
                <li>{user.name}</li>
              )}
            </ul>
          )
        }}
      </UserContext.Consumer>
    )
  }
}

O que eu quero é isso:

import React from 'react';
import UserContext from '../contexts/UserContext';

export default class Users extends React.Component {
  componentDidMount(){
    this.props.getUsers();
  }

  render(){
    return(
      <UserContext.Consumer>
        {({users}) => {
          getUsers();
          return(
            <h1>Users</h1>
            <ul>
              {users.map(user) => (
                <li>{user.name}</li>
              )}
            </ul>
          )
        }}
      </UserContext.Consumer>
    )
  }
}

Mas é claro que o exemplo acima não funciona porque ogetUsers não mora nos meus adereços de exibição de Usuários. Qual é a maneira correta de fazer isso, se for possível?