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
Top comments (1)
Show! Ótimo post.