Cheat Sheet React
O Cheat Sheet React em React é um guia de referência avançado criado para desenvolvedores que desejam dominar a construção de aplicações modernas utilizando componentes reutilizáveis, gerenciamento eficiente de estado e fluxos de dados previsíveis. Ele oferece uma visão condensada das melhores práticas e padrões de desenvolvimento React, permitindo acesso rápido a conceitos essenciais e técnicas de otimização.
O Cheat Sheet é especialmente útil em projetos de aplicações web modernas e Single Page Applications (SPAs), onde a performance, a manutenibilidade e a escalabilidade do código são críticas. Com ele, os desenvolvedores aprendem a implementar corretamente components funcionais, hooks como useState e useEffect, e a gerenciar o ciclo de vida dos componentes sem introduzir re-renders desnecessários ou prop drilling.
Ao utilizar o Cheat Sheet React, o leitor irá adquirir habilidades práticas para construir interfaces de usuário consistentes e performáticas, lidar com atualizações de estado de forma segura e integrar fluxos de dados complexos. Além disso, compreenderá estratégias de tratamento de erros e otimização de performance que são essenciais para aplicações de nível profissional. Esse guia serve tanto como ferramenta de estudo quanto como referência rápida no desenvolvimento diário em React, oferecendo exemplos práticos e padrões aplicáveis imediatamente em projetos reais.
Exemplo Básico
jsximport React, { useState } from 'react';
function Contador() {
const [contador, setContador] = useState(0);
const incrementar = () => setContador(prev => prev + 1);
const decrementar = () => setContador(prev => prev - 1);
return (
<div style={{ textAlign: 'center', marginTop: '50px' }}> <h2>Contador Simples</h2> <p>Valor atual: {contador}</p> <button onClick={incrementar}>Incrementar</button> <button onClick={decrementar}>Decrementar</button> </div>
);
}
export default Contador;No exemplo acima, o componente Contador demonstra conceitos centrais do React. O hook useState é utilizado para gerenciar o estado local do componente de forma segura, prevenindo mutações diretas. As funções incrementar e decrementar atualizam o estado com base no valor anterior, garantindo consistência e evitando re-renders desnecessários.
O componente segue boas práticas ao manter a lógica separada da interface, tornando-o reutilizável e facilmente testável. A renderização automática do React garante que a interface reflita o estado atual sem necessidade de manipulação manual do DOM. Esse padrão serve como base para a construção de componentes mais complexos, mantendo o código limpo, previsível e performático.
Exemplo Prático
jsximport React, { useState, useEffect } from 'react';
function PerfilUsuario({ userId }) {
const [usuario, setUsuario] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
async function fetchUsuario() {
setLoading(true);
try {
const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
const data = await response.json();
setUsuario(data);
} catch (error) {
console.error('Erro ao carregar usuário:', error);
} finally {
setLoading(false);
}
}
fetchUsuario();
}, [userId]);
if (loading) return <p>Carregando...</p>;
if (!usuario) return <p>Usuário não encontrado</p>;
return ( <div> <h2>Perfil do Usuário</h2> <p>Nome: {usuario.name}</p> <p>Email: {usuario.email}</p> </div>
);
}
export default PerfilUsuario;Advanced React Implementation
jsximport React, { useState, useEffect, useCallback } from 'react';
function TodoApp() {
const [todos, setTodos] = useState([]);
const [tarefa, setTarefa] = useState('');
const adicionarTodo = useCallback(() => {
if (tarefa.trim() === '') return;
setTodos(prev => [...prev, { id: Date.now(), text: tarefa }]);
setTarefa('');
}, [tarefa]);
const removerTodo = useCallback((id) => {
setTodos(prev => prev.filter(todo => todo.id !== id));
}, []);
useEffect(() => {
console.log('Todos atualizados:', todos);
}, [todos]);
return ( <div> <h2>Aplicativo Todo</h2>
<input
type="text"
value={tarefa}
onChange={(e) => setTarefa(e.target.value)}
placeholder="Adicionar nova tarefa"
/> <button onClick={adicionarTodo}>Adicionar</button> <ul>
{todos.map(todo => ( <li key={todo.id}>
{todo.text} <button onClick={() => removerTodo(todo.id)}>Remover</button> </li>
))} </ul> </div>
);
}
export default TodoApp;As melhores práticas no React incluem criar componentes modulares e reutilizáveis, gerenciar o estado usando hooks e manter o fluxo de dados unidirecional. Erros comuns incluem prop drilling, mutações diretas do estado e re-renders desnecessários.
Para depuração, recomenda-se o uso do React DevTools, que permite inspecionar a hierarquia de componentes, alterações de estado e o desempenho do rendering. Técnicas de otimização incluem React.memo, useMemo e useCallback para reduzir renderizações desnecessárias. Aspectos de segurança envolvem validação e sanitização de dados antes de atualizar o estado ou renderizar na interface, garantindo aplicações performáticas, seguras e fáceis de manter.
📊 Referência Completa
| React Element/Method | Description | Syntax | Example | Notes |
|---|---|---|---|---|
| Component | Blocos reutilizáveis de UI | function MyComponent() {} | function MyComponent() { return <div>Olá</div>; } | Elemento base de construção de UI |
| useState | Gerencia estado local | const [state, setState] = useState(initial); | const [count, setCount] = useState(0); | Evita prop drilling |
| useEffect | Efeitos colaterais e lifecycle | useEffect(() => {}, [deps]); | useEffect(() => { console.log(count); }, [count]); | Controla ciclo de vida |
| useReducer | Gerencia estado complexo | const [state, dispatch] = useReducer(reducer, initial); | const [state, dispatch] = useReducer(reducer, {}); | Substitui useState |
| props | Passagem de dados para componente | <Component propName={value} /> | <Greeting name="Ana" /> | Somente leitura |
| context | Compartilhamento global de dados | React.createContext() | const ThemeContext = React.createContext(); | Evita prop drilling |
| React.memo | Otimização de performance | export default React.memo(Component); | export default React.memo(MyComponent); | Previne re-renders desnecessários |
| useCallback | Memoriza funções | const memoFn = useCallback(fn, [deps]); | const add = useCallback(() => {}, []); | Evita redefinição de funções |
| useMemo | Memoriza valores | const memoValue = useMemo(() => compute(), [deps]); | const total = useMemo(() => calcTotal(), [items]); | Otimiza cálculos pesados |
| key | Identificador único para listas | <li key={id}>Item</li> | <li key={todo.id}>{todo.text}</li> | Necessário para rendering de listas |
| event handling | Manipulação de eventos | onClick, onChange | <button onClick={handleClick}>Clique</button> | Usar funções separadas |
| refs | Acesso direto ao DOM ou componente | const ref = useRef(); | const inputRef = useRef(); | Acesso direto |
| lazy | Carregamento preguiçoso de componente | React.lazy(() => import('./Component')) | const LazyComp = React.lazy(() => import('./Comp')); | Reduz tamanho do bundle |
| Suspense | Fallback para componentes lazy | <Suspense fallback={<Loading />}><LazyComp /></Suspense> | <Suspense fallback={<p>Carregando...</p>}><LazyComp /></Suspense> | Usar com lazy |
| forwardRef | Encaminha ref | React.forwardRef((props, ref) => {}) | const Input = React.forwardRef((props, ref) => <input ref={ref} />) | Permite acesso externo |
| error boundaries | Gerenciamento de erros | class ErrorBoundary extends React.Component {} | class ErrorBoundary extends React.Component { render() { return this.props.children; }} | Captura erros em componentes |
📊 Complete React Properties Reference
| Property | Values | Default | Description | React Support |
|---|---|---|---|---|
| useState | any | null | Gerencia estado local | v16.8+ |
| useEffect | function | null | Efeitos colaterais e lifecycle | v16.8+ |
| useReducer | function | null | Gerencia estado complexo | v16.8+ |
| props | any | {} | Passagem de dados para componente | v0.14+ |
| context | object | null | Compartilhamento global de dados | v16.3+ |
| key | string/number | null | Identificador único para lista | v0.14+ |
| ref | object | null | Acesso direto ao DOM ou componente | v16.3+ |
| memo | HOC | null | Otimização de performance | v16.6+ |
| lazy | function | null | Carregamento preguiçoso | v16.6+ |
| Suspense | component | null | Fallback para lazy components | v16.6+ |
| forwardRef | function | null | Encaminha ref | v16.3+ |
| ErrorBoundary | class | null | Captura erros em componentes | v16+ |
Resumo e próximos passos:
O Cheat Sheet React fornece referência prática e rápida para criar aplicações performáticas, escaláveis e fáceis de manter. Ele enfatiza components reutilizáveis, gestão segura do estado, fluxo de dados unidirecional e controle do ciclo de vida.
Os próximos passos recomendados incluem explorar gerenciamento de estado global com Redux ou Zustand, otimizações avançadas usando React Profiler e desenvolvimento de SPA complexas com React Router e Axios. A aplicação prática dos exemplos do Cheat Sheet em projetos reais consolida o aprendizado e aumenta a experiência prática.
🧠 Teste Seu Conhecimento
Teste Seu Conhecimento
Desafie-se com este questionário interativo e veja o quão bem você entende o tópico
📝 Instruções
- Leia cada pergunta cuidadosamente
- Selecione a melhor resposta para cada pergunta
- Você pode refazer o quiz quantas vezes quiser
- Seu progresso será mostrado no topo