From a4e74707f14553d657193841397457157e31fcff Mon Sep 17 00:00:00 2001 From: Maria Eduarda Date: Wed, 28 Jan 2026 17:39:38 -0300 Subject: [PATCH 1/3] =?UTF-8?q?docs:=20adiciona=20introdu=C3=A7=C3=A3o=20a?= =?UTF-8?q?o=20useState?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/Controle de estado/4-useState.md | 87 +++++++++++++++++++++++++++ 1 file changed, 87 insertions(+) create mode 100644 docs/Controle de estado/4-useState.md diff --git a/docs/Controle de estado/4-useState.md b/docs/Controle de estado/4-useState.md new file mode 100644 index 0000000..b4d1122 --- /dev/null +++ b/docs/Controle de estado/4-useState.md @@ -0,0 +1,87 @@ +

+ + + +

+ +## useState + +O `useState` é um Hook do React que permite adicionar **estado** a componentes funcionais. + +Ele retorna um array com duas posições: +- o **valor atual do estado** +- uma **função para atualizar esse estado** + +--- + +### Como se lê a sintaxe? + +``` + const [estado, setEstado] = useState(valorInicial); +``` + + +*estado*: valor atual do estado (por exemplo: count, nome, loading). + +*setEstado*: função que você chama pra atualizar esse valor e disparar a re-renderização (por exemplo setCount, setName, etc). + +Aqui o useState(valorInicial) é chamado apenas *na primeira renderização*; nas próximas, ele retorna o valor atual do estado. + +--- + +### Exemplo simples + +``` +import { useState } from "react"; + +function Contador() { + const [contador, setContador] = useState(0); + + return ( +
+

Valor: {contador}

+ +
+ ); +} + +export default Contador; + + +``` + +Nesse exemplo, o estado **contador** começa com valor **0** e é atualizado sempre que o botão é clicado. + + +--- + +### Erros comuns + +- Esquecer de importar o *useState* +- Tentar alterar o estado diretamente (estado = novoValor) +- Esperar que o estado seja atualizado imediatamente + + +--- + +## Conclusão + +O *useState* é um dos Hooks mais importantes do React e geralmente é o primeiro contato de quem está começando com gerenciamento de estado em componentes funcionais. + + +[Documentação Oficial do useState](https://react.dev/reference/react/useState) + + +Achou algo de errado? Algo que possa melhorar? Fique a vontade para [abrir uma issue](https://github.com/he4rt/react4noobs/issues). Vejo você na próxima seção! + +[Ir para Próxima Seção](../Estilizacao/1.Preprocessadores%20CSS.md) + +

Made with :purple_heart:

+ +

+ + + +

\ No newline at end of file From 38d61b842ad6ac7028fef8cc56a53b162f59a4ee Mon Sep 17 00:00:00 2001 From: Maria Eduarda Date: Thu, 29 Jan 2026 13:22:23 -0300 Subject: [PATCH 2/3] =?UTF-8?q?docs:=20acrescenta=20informa=C3=A7=C3=B5es?= =?UTF-8?q?=20na=20se=C3=A7=C3=A3o=20de=20erros=20comuns=20do=20useState?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/Controle de estado/4-useState.md | 87 ------------------------ docs/Iniciando com React/8.1-useState.md | 21 ++++++ 2 files changed, 21 insertions(+), 87 deletions(-) delete mode 100644 docs/Controle de estado/4-useState.md diff --git a/docs/Controle de estado/4-useState.md b/docs/Controle de estado/4-useState.md deleted file mode 100644 index b4d1122..0000000 --- a/docs/Controle de estado/4-useState.md +++ /dev/null @@ -1,87 +0,0 @@ -

- - - -

- -## useState - -O `useState` é um Hook do React que permite adicionar **estado** a componentes funcionais. - -Ele retorna um array com duas posições: -- o **valor atual do estado** -- uma **função para atualizar esse estado** - ---- - -### Como se lê a sintaxe? - -``` - const [estado, setEstado] = useState(valorInicial); -``` - - -*estado*: valor atual do estado (por exemplo: count, nome, loading). - -*setEstado*: função que você chama pra atualizar esse valor e disparar a re-renderização (por exemplo setCount, setName, etc). - -Aqui o useState(valorInicial) é chamado apenas *na primeira renderização*; nas próximas, ele retorna o valor atual do estado. - ---- - -### Exemplo simples - -``` -import { useState } from "react"; - -function Contador() { - const [contador, setContador] = useState(0); - - return ( -
-

Valor: {contador}

- -
- ); -} - -export default Contador; - - -``` - -Nesse exemplo, o estado **contador** começa com valor **0** e é atualizado sempre que o botão é clicado. - - ---- - -### Erros comuns - -- Esquecer de importar o *useState* -- Tentar alterar o estado diretamente (estado = novoValor) -- Esperar que o estado seja atualizado imediatamente - - ---- - -## Conclusão - -O *useState* é um dos Hooks mais importantes do React e geralmente é o primeiro contato de quem está começando com gerenciamento de estado em componentes funcionais. - - -[Documentação Oficial do useState](https://react.dev/reference/react/useState) - - -Achou algo de errado? Algo que possa melhorar? Fique a vontade para [abrir uma issue](https://github.com/he4rt/react4noobs/issues). Vejo você na próxima seção! - -[Ir para Próxima Seção](../Estilizacao/1.Preprocessadores%20CSS.md) - -

Made with :purple_heart:

- -

- - - -

\ No newline at end of file diff --git a/docs/Iniciando com React/8.1-useState.md b/docs/Iniciando com React/8.1-useState.md index 44aed41..80e8ce5 100644 --- a/docs/Iniciando com React/8.1-useState.md +++ b/docs/Iniciando com React/8.1-useState.md @@ -57,6 +57,8 @@ function Counter() { setClicks((oldState) => oldState + valorInputNumber); } + --- + return (

{clicks}

@@ -69,6 +71,25 @@ function Counter() { } ``` +### Erros comuns + + **Esquecer de importar o _useState_** + + O hook precisa ser importado do React antes de ser utilizado: + ```js + import { useState } from "react"; + ``` + + **Tentar alterar o estado diretamente (estado = novoValor)** + + O estado nunca deve ser alterado diretamente. Sempre utilize a função retornada pelo _useState_ para atualizar o valor, garantindo a re-renderização correta do componente. + + + **Esperar que o estado seja atualizado imediatamente** + + A atualização de estado no React pode ser assíncrona. Por isso, o novo valor pode não estar disponível logo após a chamada da função de atualização. + + [Ir para a próxima seção](./8.2-useEffect.md)

From b3b8b590f0c763d9b1201f7d042a37253f2dba66 Mon Sep 17 00:00:00 2001 From: Maria Eduarda Date: Fri, 30 Jan 2026 17:15:28 -0300 Subject: [PATCH 3/3] =?UTF-8?q?Retirada=20da=20Linha=20no=20meio=20do=20c?= =?UTF-8?q?=C3=B3digo=20e=20atualiza=C3=A7=C3=A3o=20dos=20espa=C3=A7os?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/Iniciando com React/8.1-useState.md | 23 ++++++++--------------- 1 file changed, 8 insertions(+), 15 deletions(-) diff --git a/docs/Iniciando com React/8.1-useState.md b/docs/Iniciando com React/8.1-useState.md index 80e8ce5..7f9d341 100644 --- a/docs/Iniciando com React/8.1-useState.md +++ b/docs/Iniciando com React/8.1-useState.md @@ -57,9 +57,7 @@ function Counter() { setClicks((oldState) => oldState + valorInputNumber); } - --- - - return ( + return (

{clicks}

Diferença: @@ -70,29 +68,24 @@ function Counter() { ); } ``` - ### Erros comuns - **Esquecer de importar o _useState_** O hook precisa ser importado do React antes de ser utilizado: ```js import { useState } from "react"; ``` - - **Tentar alterar o estado diretamente (estado = novoValor)** - + **Tentar alterar o estado diretamente (estado = novoValor)** + O estado nunca deve ser alterado diretamente. Sempre utilize a função retornada pelo _useState_ para atualizar o valor, garantindo a re-renderização correta do componente. - - + **Esperar que o estado seja atualizado imediatamente** - + A atualização de estado no React pode ser assíncrona. Por isso, o novo valor pode não estar disponível logo após a chamada da função de atualização. - -[Ir para a próxima seção](./8.2-useEffect.md) -

+ [Ir para a próxima seção](./8.2-useEffect.md) +

-

+