Utilizando useContext no React

Mais um padrão essencial a ser empregado em projetos React, especialmente se você tem propriedades comuns que deseja reutilizar em seus componentes, e acaba escrevendo muitos props duplicados, é usar o React Context.

Por exemplo, se queremos compartilhar dados do usuário entre vários componentes, em vez de utilizar vários props repetidos (props drilling), poderíamos usar o recurso de contexto que está embutido na biblioteca React.

Primeiramente, temos que criar um contexto com React.createContext(). No caso abaixo a referência desse contexto é o UserContext:

const UserContext = React.createContext();

Depois deve-se envolver o App inteiro em um provider (Para esse exemplo foi envolvido o App inteiro, mas se for o caso de apenas um componente consumir o recurso pode ser envolvido apenas o componente):

    const user = {name: 'Gustavo'} 

    <UserContext.Provider value={user}>
        <App />          
    </UserContext.Provider>

No código acima o recurso compartilhado é um objeto user. Para compartilhar um recurso basta que seja atribuído ao atributo value.

Em seguida, podemos consumir esse contexto em nossos componentes individuais utilizando o hook useContext:

  const user = useContext(UserContext);
  return <div>Olá, {user.name} </div>;
 );

Concluindo, essa é uma forma de tornar o seu código mais limpo evitando a necessidade de utilizar várias e várias props.

Referências:
https://pt-br.reactjs.org/docs/hooks-reference.html#usecontext