Context API sem Provider

[ggviana]

Na minha aplicação, vou precisar de uma API imutável que deve estar disponível globalmente dentro dos componentes.

Pesquisei, e é possivel usar a Context API do React sem definir um Provider na árvore de elementos.

The defaultValue argument is only used when a component does not have a matching Provider above it in the tree. This can be helpful for testing components in isolation without wrapping them. Note: passing undefined as a Provider value does not cause consuming components to use defaultValue.

Portanto, esse código seria válido:

// contexts/api.js
const Context = React.createContext({ api: new API() })

export default Context

// App.js
import Context from 'contexts/api'

export default function App() {
  return (
    <div>
      <Context.Consumer>
        {({ api }) => {
          const user = api.getUser()
          
          return (
            <h1>Hello {user.name}!</h1>
          )
        }}
      </Context.Consumer>
    </div>
  )
}

Porém, da seguinte forma também funcionaria:

// contexts/api.js
const Context = React.createContext( )

export default Context
export const api = new API()

// App.js
import Context, { api } from 'contexts/api'

export default function App() {
  return (
    <Context.Provider value={{ api }}>
      <div>
        <Context.Consumer>
          {({ api }) => {
            const user = api.getUser()
  
            return (
              <h1>Hello {user.name}!</h1>
            )
          }}
        </Context.Consumer>
      </div>
    </Context.Provider>
  )
}

Considerando que o valor de api nunca muda, e contexts/api deve controlar a instanciação da API, seria uma má prática não usar Provider e se aproveitar do defaultValue?

[fdaciuk]

Se você só vai precisar instanciar a API uma única vez na aplicação, por que você precisaria da Context API? Nesse caso, você pode só ter um arquivo que instancia a API, e pode importar esse arquivo diretamente nos componentes onde você vai precisar dela :)

Você só precisaria da Context se tivesse algum método que fizesse alguma alteração nas informações compartilhadas da API.

Se for só pra consumir ela como está, não precisa da Context :)

[ggviana]

Realmente @fdaciuk, essa solução parece bem melhor já que eu já teria que fazer algumas abstrações para a camada de apresentação.

[salatielsql]

Da uma olhada no hook do context: https://reactjs.org/docs/hooks-reference.html#usecontext

[fdaciuk]

@salatielq o useContext é pra substituir o Consumer, não o Provider :)

[Juuhz]

Se você só vai precisar instanciar a API uma única vez na aplicação, por que você precisaria da Context API? Nesse caso, você pode só ter um arquivo que instancia a API, e pode importar esse arquivo diretamente nos componentes onde você vai precisar dela :)

Você só precisaria da Context se tivesse algum método que fizesse alguma alteração nas informações compartilhadas da API.

Se for só pra consumir ela como está, não precisa da Context :)

Eu Faço exatamente isso, sempre crio um "utils/api" onde importo os dados que eu irei usar em meus componentes.