Avançando com React: Hooks, Estado e Efeitos em Componentes Funcionais

Introdução

React é uma biblioteca que tornou a criação de interfaces de usuário mais simples e eficaz. Com sua abordagem baseada em componentes, ela permite que os desenvolvedores criem interfaces dinâmicas e reutilizáveis. Neste post, vamos abordar conceitos intermediários que são essenciais para quem já tem uma base e quer melhorar a organização e a funcionalidade de seus componentes.

Nosso foco será em como usar hooks, estado e efeitos dentro de componentes funcionais para tornar sua aplicação React mais dinâmica e reativa.

Pré-requisitos

Antes de seguir com o conteúdo, é necessário que você tenha:

• Conhecimento básico de JavaScript e React
• Familiaridade com a criação de componentes funcionais em React
• Entendimento básico do que são hooks no React

Conceitos principais com exemplos

1. useState: Gerenciando o estado em componentes funcionais

O hook useState é fundamental para criar e gerenciar o estado de um componente funcional.

import { useState } from 'react'

function Contador() {
	const [contador, setContador] = useState(0)

	return (
		<div>
			<p>Contador: {contador}</p>
			<button onClick={() => setContador(contador + 1)}>Incrementar</button>
		</div>
	)
}

• Explicação: useState recebe o valor inicial do estado e retorna um array com o valor atual e uma função para atualizar esse valor.

2. useEffect: Efeitos colaterais no React

O hook useEffect é utilizado para lidar com efeitos colaterais, como a manipulação de dados, assinaturas e atualização de dom.

import { useState, useEffect } from 'react'

function Timer() {
	const [tempo, setTempo] = useState(0)

	useEffect(() => {
		const intervalo = setInterval(() => setTempo(tempo + 1), 1000)
		return () => clearInterval(intervalo) // Limpa o intervalo ao desmontar o componente
	}, [tempo])

	return <p>Tempo: {tempo} segundos</p>
}

• Explicação: useEffect permite que você realize ações após a renderização do componente, como fazer requisições de API ou manipular o DOM.

3. useContext: Gerenciamento de estado global com Context API

À medida que sua aplicação cresce, você pode precisar compartilhar dados entre diferentes componentes. O useContext é ideal para isso.

import React, { createContext, useContext, useState } from 'react'

const TemaContext = createContext()

function TemaProvider({ children }) {
	const [tema, setTema] = useState('Claro')
	return <TemaContext.Provider value={{ tema, setTema }}>{children}</TemaContext.Provider>
}

function MudarTema() {
	const { tema, setTema } = useContext(TemaContext)
	return (
		<div>
			<p>Tema atual: {tema}</p>
			<button onClick={() => setTema(tema === 'Claro' ? 'Escuro' : 'Claro')}>Mudar Tema</button>
		</div>
	)
}

• Explicação: O useContext permite acessar valores do Contexto diretamente dentro de componentes, sem a necessidade de prop drilling.

Mini-projeto: Contador com tema alternável

Agora que você já conhece os hooks básicos, vamos criar um mini-projeto que utiliza useState, useEffect e useContext.

Estrutura

1. Crie um novo projeto React:

npx create-react-app contador-tema
cd contador-tema
npm start

1. Implemente os componentes Contador e MudarTema dentro de um componente principal App.

Código Completo

import React, { useState, useEffect, useContext, createContext } from 'react'

const TemaContext = createContext()

function TemaProvider({ children }) {
	const [tema, setTema] = useState('Claro')
	return <TemaContext.Provider value={{ tema, setTema }}>{children}</TemaContext.Provider>
}

function Contador() {
	const [contador, setContador] = useState(0)
	const { tema } = useContext(TemaContext)

	return (
		<div
			style={{
				background: tema === 'Claro' ? '#fff' : '#333',
				color: tema === 'Claro' ? '#000' : '#fff'
			}}
		>
			<p>Contador: {contador}</p>
			<button onClick={() => setContador(contador + 1)}>Incrementar</button>
		</div>
	)
}

function MudarTema() {
	const { tema, setTema } = useContext(TemaContext)
	return (
		<div>
			<p>Tema atual: {tema}</p>
			<button onClick={() => setTema(tema === 'Claro' ? 'Escuro' : 'Claro')}>Mudar Tema</button>
		</div>
	)
}

function App() {
	return (
		<TemaProvider>
			<Contador />
			<MudarTema />
		</TemaProvider>
	)
}

export default App

Próximos passos

Para continuar aprofundando seus conhecimentos em React, considere estudar:

• React Router: para navegação entre páginas
• React Query ou Axios: para requisições HTTP eficientes
• React Performance: como melhorar a performance de sua aplicação
• Styled Components ou Tailwind CSS: para estilização de componentes

Materiais de apoio

• 📘 Documentação Oficial do React
• 📚 Curso de React - Platzi
• 📺 Curso Gratuito de React - YouTube
• 📝 Artigo sobre useContext - DigitalOcean

---

Com esses fundamentos, você está mais preparado para construir aplicações dinâmicas e reutilizáveis com React! Bons estudos e boas práticas! 🚀