Рекомендуемые шаблоны для подключения поставщиков контекста в React?

Question

У меня есть приложение React, использующее несколько провайдеров контекста для передачи данных в компоненты, аналогично следующему (упрощенному) коду.

Вот пример провайдера контекста, который потребляет контекст издругой провайдер:

import React from 'react'
import {useAuth} from './auth-context'

const UserContext = React.createContext()

function UserProvider(props) {
  const {
    data: {user},
  } = useAuth()
  return <UserContext.Provider value={user} {...props} />
}

function useUser() {
  const context = React.useContext(UserContext)
  if (context === undefined) {
    throw new Error(`useUser must be used within a UserProvider`)
  }
  return context
}

export {UserProvider, useUser}

Вот вложенные поставщики контекста, экспортированные вместе:

import React from 'react'
import {AuthProvider} from './auth-context'
import {UserProvider} from './user-context'

function AppProviders({children}) {
  return (
    <AuthProvider>
      <UserProvider>{children}</UserProvider>
    </AuthProvider>
  )
}

export default AppProviders

Вот провайдеры, подключенные к приложению. <App /> содержит все компоненты приложения:

import React from 'react'
import ReactDOM from 'react-dom'
import App from './app'
import AppProviders from './context'

ReactDOM.render(
  <AppProviders>
    <App />
  </AppProviders>,
  document.getElementById('root'),
)

Существует ли рекомендуемый шаблон для предоставления вашему приложению React доступа к нескольким поставщикам контекста? Это так?

Дополнительный вопрос: когда поставщики контекста не зависят от другого, это влияет на вашу рекомендацию? Например, если UserProvider в приведенном выше примере не полагался на AuthProvider и вместо этого выглядел примерно так:

import React from 'react'
import userClient from './userClient'

const UserContext = React.createContext()

function UserProvider(props) {
  const [ user, setUser ] = React.useState(null);
  return (
    <UserContext.Provider value={user} {...props} />
  );
}

function useUser() {
  const context = React.useContext(UserContext)

  if (context === undefined) {
    throw new Error(`useUser must be used within a UserProvider`)
  }
  return context
}

function loadUser() {
  return userClient.loadUser().then(data => {
    setUser(data);
  });
}


export {UserProvider, useUser, loadUser}

В этом (втором) сценарии, есть ли минусы для сохранения UserProvider вложено в AuthProvider против разделения провайдеров и где они отображаются в иерархии компонентов?