React - Context API
Fala devs, neste post vamos conversar um pouco sobre a Context API do React e como ela pode tornar mais fácil o compartilhamento de dados entre os componentes da sua aplicação. Vamos precisar que você tenha conhecimento básico em React, tranquilo?
📑 Sobre
Em uma aplicação React, a passagem de dados entre componentes acontece de cima para baixo, ou seja, de pai para filho, via props. Agora, você já imaginou como seria passar uma propriedade, por exemplo, dados de usuário ou configurações de tema, entre todos os componentes da sua aplicação que precisariam dela? Seria um desafio e tanto, não acha?
O contexto nasceu para ajudar com essas situações, pois fornece uma maneira de compartilhar dados entre componentes de forma fácil, vamos ver?
Obs: Usaremos a versão mais recente disponível, no dia desta publicação, que é a 18.2.0.
📚 React - Passagem de propriedades
Primeiramente, vamos dar uma olhada na passagem de propriedades entre componentes com um exemplo, assim compreenderemos o que a Context API vai resolver.
import React from 'react'
/**
* App (main) component.
*/
function App() {
return (
<div className="App">
<Header user={{ name: 'Rafael' }} />
</div>
)
}
/**
* Header component.
*/
const Header = ({ user }) => (
<>
<MenuBar />
<UserBar user={user} />
</>
)
/**
* MenuBar component.
*/
const MenuBar = () => <div> Menu Bar </div>
/**
* UserBar component.
*/
const UserBar = ({ user }) => <div> Usuário: {user.name} </div>
export default App
Podemos perceber que a propriedade user é passada para o Header, que consequentemente passa para o UserBar e só então é utilizada.
Em uma aplicação pequena, você não enfrentaria tantos problemas, porém, é só ela crescer um pouco… e você viveria um pequeno caos.
Visto este exemplo, vamos seguir para a melhor parte? Vamos alterar este mesmo exemplo, mas usaremos o contexto agora.
📚 React - Context API
import React from 'react'
/**
* Context.
*/
export const UserContext = React.createContext()
/**
* App (main) component.
*/
function App() {
return (
<UserContext.Provider value={{ name: 'Rafael' }}>
<div className="App">
<Header />
</div>
</UserContext.Provider>
)
}
/**
* Header component.
*/
const Header = () => (
<>
<MenuBar />
<UserBar />
</>
)
/**
* MenuBar component.
*/
const MenuBar = () => <div> Menu Bar </div>
/**
* UserBar component.
*/
const UserBar = () => {
/**
* Acessing user context.
*/
const user = React.useContext(UserContext)
/**
* Print username.
*/
return <div> Usuário: {user.name} </div>
}
export default App
Notaram a diferença entre os dois exemplos? Vamos detalhar um pouco mais…
Primeiramente criamos o UserContext, que é o contexto.
Posteriormente envolvemos os componentes nele, todos os componentes envolvidos terão acesso ao valor do contexto.
<UserContext.Provider> .... </UserContext.Provider>
Inicializamos, então, o contexto com um valor, sendo => value={{ name: 'Rafael' }}.
Feito isso, você deve estar se perguntando, como acessamos o valor do contexto?
Bom, é simples… o React fornece um hook para isso, que é o useContext.
Podemos observar seu uso no componente UserBar, vamos detalhar?
Armazenamos o valor que está no contexto na variável user => const user = React.useContext(UserContext)
Depois é só sair usando… => {user.name}
Simples, não?
📚 React - Quando não usar contexto…
Bom, esse será um assunto para um próximo post, nos vemos em breve!
🔗 Referências
Você pode obter mais informações nos links a seguir:
“O caminho mais curto é sempre tentar mais uma vez” (Thomas Edison)
comments powered by DisqusRafael Withoeft.
