diff --git a/src/content/reference/react/apis.md b/src/content/reference/react/apis.md
index 9c1437870..453ceb160 100644
--- a/src/content/reference/react/apis.md
+++ b/src/content/reference/react/apis.md
@@ -1,17 +1,17 @@
---
-title: "Built-in React APIs"
+title: "APIs React Integradas"
---
-In addition to [Hooks](/reference/react) and [Components](/reference/react/components), the `react` package exports a few other APIs that are useful for defining components. This page lists all the remaining modern React APIs.
+Em adição aos [Hooks](/reference/react) e [Componentes](/reference/react/components), o pacote `react` exporta algumas outras APIs que são úteis para definir componentes. Essa página lista todas as APIs modernas restantes do React.
---
-* [`createContext`](/reference/react/createContext) lets you define and provide context to the child components. Used with [`useContext`.](/reference/react/useContext)
-* [`forwardRef`](/reference/react/forwardRef) lets your component expose a DOM node as a ref to the parent. Used with [`useRef`.](/reference/react/useRef)
-* [`lazy`](/reference/react/lazy) lets you defer loading a component's code until it's rendered for the first time.
-* [`memo`](/reference/react/memo) lets your component skip re-renders with same props. Used with [`useMemo`](/reference/react/useMemo) and [`useCallback`.](/reference/react/useCallback)
-* [`startTransition`](/reference/react/startTransition) lets you mark a state update as non-urgent. Similar to [`useTransition`.](/reference/react/useTransition)
+* [`createContext`](/reference/react/createContext) permite que você defina e forneça contexto aos componentes filhos. Utilizado com [`useContext`.](/reference/react/useContext)
+* [`forwardRef`](/reference/react/forwardRef) permite que seu componente exponha um nó do DOM como uma referência para o pai. Utilizado com [`useRef`.](/reference/react/useRef)
+* [`lazy`](/reference/react/lazy) permite adiar o carregamento do código de um componente até que ele seja renderizado pela primeira vez.
+* [`memo`](/reference/react/memo) permite que seu componente evite re-renderizações se as propriedades (`props`) forem as mesmas. Utilizado com [`useMemo`](/reference/react/useMemo) e [`useCallback`.](/reference/react/useCallback)
+* [`startTransition`](/reference/react/startTransition) permite marcar uma atualização de estado como não urgente. Semelhante a [`useTransition`.](/reference/react/useTransition)
diff --git a/src/content/reference/react/createContext.md b/src/content/reference/react/createContext.md
index ff9032aac..2bf8941f8 100644
--- a/src/content/reference/react/createContext.md
+++ b/src/content/reference/react/createContext.md
@@ -4,7 +4,7 @@ title: createContext
-`createContext` lets you create a [context](/learn/passing-data-deeply-with-context) that components can provide or read.
+`createContext` permite que você crie um [contexto](/learn/passing-data-deeply-with-context) que componentes podem fornecer ou consumir.
```js
const SomeContext = createContext(defaultValue)
@@ -16,11 +16,11 @@ const SomeContext = createContext(defaultValue)
---
-## Reference {/*reference*/}
+## Referência {/*reference*/}
### `createContext(defaultValue)` {/*createcontext*/}
-Call `createContext` outside of any components to create a context.
+Invoque `createContext` fora de qualquer componente para criar um contexto.
```js
import { createContext } from 'react';
@@ -28,26 +28,26 @@ import { createContext } from 'react';
const ThemeContext = createContext('light');
```
-[See more examples below.](#usage)
+[Veja mais exemplos abaixo.](#usage)
-#### Parameters {/*parameters*/}
+#### Parâmetros {/*parameters*/}
-* `defaultValue`: The value that you want the context to have when there is no matching context provider in the tree above the component that reads context. If you don't have any meaningful default value, specify `null`. The default value is meant as a "last resort" fallback. It is static and never changes over time.
+* `defaultValue`: O valor que você quer que o contexto tenha quando não há um provedor de contexto correspondente na árvore acima do componente que lê o contexto. Se você não tem um valor padrão significativo, especifique `null`. O valor padrão é um "último recurso" reserva. Ele é estático e nunca muda com o tempo.
-#### Returns {/*returns*/}
+#### Retornos {/*returns*/}
-`createContext` returns a context object.
+`createContext` retorna um objeto de contexto.
-**The context object itself does not hold any information.** It represents _which_ context other components read or provide. Typically, you will use [`SomeContext.Provider`](#provider) in components above to specify the context value, and call [`useContext(SomeContext)`](/reference/react/useContext) in components below to read it. The context object has a few properties:
+**O objeto de contexto em si, não possui nenhuma informação.** Ele representa _qual_ contexto outros componentes irão consumir ou fornecer. Geralmente, você vai usar[`SomeContext.Provider`](#provider) em um componente acima para especificar um valor para o contexto, e invocar [`useContext(SomeContext)`](/reference/react/useContext) em componentes abaixo pra consumi-lo. O objeto de contexto possui algumas propriedades:
-* `SomeContext.Provider` lets you provide the context value to components.
-* `SomeContext.Consumer` is an alternative and rarely used way to read the context value.
+* `SomeContext.Provider` permite que você forneça o valor do contexto aos seus componentes.
+* `SomeContext.Consumer` é uma alternativa raramanete usada como uma forma de consumir o valor de um contexto.
---
### `SomeContext.Provider` {/*provider*/}
-Wrap your components into a context provider to specify the value of this context for all components inside:
+Envolva seus componente em um provedor de contexto para especificar o valor desse contexto para todos os componentes dentro dele:
```js
function App() {
@@ -63,17 +63,17 @@ function App() {
#### Props {/*provider-props*/}
-* `value`: The value that you want to pass to all the components reading this context inside this provider, no matter how deep. The context value can be of any type. A component calling [`useContext(SomeContext)`](/reference/react/useContext) inside of the provider receives the `value` of the innermost corresponding context provider above it.
+* `value`: O valor que você deseja passar para todos os componentes que estão consumindo esse contexto dentro deste provedor, não importa o quão profundo. O valor do contexto pode ser de qualquer tipo. Um componente invocando [`useContext(SomeContext)`](/reference/react/useContext) dentro do provedor recebe o `value` do provedor de contexto correspondente mais próximo acima dele.
---
### `SomeContext.Consumer` {/*consumer*/}
-Before `useContext` existed, there was an older way to read context:
+Antes do `useContext` existir, havia uma forma mais arcaica de consumir um contexto:
```js
function Button() {
- // 🟡 Legacy way (not recommended)
+ // 🟡 Jeito legado (não recomendado)
return (
{theme => (
@@ -83,12 +83,11 @@ function Button() {
);
}
```
-
-Although this older way still works, but **newly written code should read context with [`useContext()`](/reference/react/useContext) instead:**
+Apesar dessa forma mais antiga ainda funcionar, **códigos recém escritos devem consumir o contexto com [`useContext()`](/reference/react/useContext) ao invés disso:**
```js
function Button() {
- // ✅ Recommended way
+ // ✅ Jeito recomendado
const theme = useContext(ThemeContext);
return ;
}
@@ -96,17 +95,17 @@ function Button() {
#### Props {/*consumer-props*/}
-* `children`: A function. React will call the function you pass with the current context value determined by the same algorithm as [`useContext()`](/reference/react/useContext) does, and render the result you return from this function. React will also re-run this function and update the UI whenever the context from the parent components changes.
+* `children`: Uma função. O React invocará a função que você passar com o valor do contexto atual determinado pelo mesmo algoritmo que o [`useContext()`](/reference/react/useContext) utiliza, e renderizará o resultado que você retornar dessa função. O React também irá re-executar essa função e atualizar a UI sempre que o contexto dos componentes pais mudar.
---
-## Usage {/*usage*/}
+## Uso {/*usage*/}
-### Creating context {/*creating-context*/}
+### Criando um contexto {/*creating-context*/}
-Context lets components [pass information deep down](/learn/passing-data-deeply-with-context) without explicitly passing props.
+Contextos permitem [passar informação profundamente](/learn/passing-data-deeply-with-context) sem precisar passar props manualmente em cada nível.
-Call `createContext` outside any components to create one or more contexts.
+Invoque `createContext` fora de qualquer componente para criar um ou mais contextos.
```js [[1, 3, "ThemeContext"], [1, 4, "AuthContext"], [3, 3, "'light'"], [3, 4, "null"]]
import { createContext } from 'react';
@@ -115,7 +114,7 @@ const ThemeContext = createContext('light');
const AuthContext = createContext(null);
```
-`createContext` returns a context object. Components can read context by passing it to [`useContext()`](/reference/react/useContext):
+`createContext` retorna um objeto de contexto. Componentes podem consumir esse contexto passando-o para o hook [`useContext()`](/reference/react/useContext):
```js [[1, 2, "ThemeContext"], [1, 7, "AuthContext"]]
function Button() {
@@ -129,9 +128,9 @@ function Profile() {
}
```
-By default, the values they receive will be the default values you have specified when creating the contexts. However, by itself this isn't useful because the default values never change.
+Por padrão, os valores que receberão são os valores padrão que você especificou quando criava os contextos. Porém, por si só isso não é útil porque os valores padrão nunca mudam.
-Context is useful because you can **provide other, dynamic values from your components:**
+Contextos são úteis porque você pode **fornecer outros valores dinâmicos de seus componentes:**
```js {8-9,11-12}
function App() {
@@ -150,15 +149,15 @@ function App() {
}
```
-Now the `Page` component and any components inside it, no matter how deep, will "see" the passed context values. If the passed context values change, React will re-render the components reading the context as well.
+Agora o componente `Page` e qualquer componente dentro dele, não importa o quão profundo esteja, irão "ver" os valores do contexto passados. Se os valores do contexto mudarem, o React também irá re-renderizar os componentes que estão lendo o contexto.
-[Read more about reading and providing context and see examples.](/reference/react/useContext)
+[Leia mais sobre consumir e providenciar contexto e veja exemplos.](/reference/react/useContext)
---
-### Importing and exporting context from a file {/*importing-and-exporting-context-from-a-file*/}
+### Importando e exportando contextos de um arquivo {/*importing-and-exporting-context-from-a-file*/}
-Often, components in different files will need access to the same context. This is why it's common to declare contexts in a separate file. Then you can use the [`export` statement](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export) to make context available for other files:
+Frequentemente, componentens em arquivos diferentes irão precisar acessar o mesmo contexto. É por isso que é comum declarar contextos em um arquivo separado. Então você pode usar o [`export` statement](https://developer.mozilla.org/pt-BR/docs/web/javascript/reference/statements/export) para tornar o contexto disponível para outros arquivos:
```js {4-5}
// Contexts.js
@@ -166,9 +165,9 @@ import { createContext } from 'react';
export const ThemeContext = createContext('light');
export const AuthContext = createContext(null);
-````
+```
-Components declared in other files can then use the [`import`](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/import) statement to read or provide this context:
+Componentes declarados em outros arquivos podem usar o [`import`](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/import) para ler ou providenciar esse contexto:
```js {2}
// Button.js
@@ -195,23 +194,20 @@ function App() {
);
}
```
-
-This works similar to [importing and exporting components.](/learn/importing-and-exporting-components)
+Isso funciona de forma similar com a [importação e exportação de componentes.](/learn/importing-and-exporting-components)
---
-## Troubleshooting {/*troubleshooting*/}
+## Resolução de problemas {/*troubleshooting*/}
-### I can't find a way to change the context value {/*i-cant-find-a-way-to-change-the-context-value*/}
+### Não consigo encontrar uma forma de mudar o valor do contexto {/*i-cant-find-a-way-to-change-the-context-value*/}
-
-Code like this specifies the *default* context value:
+Código como esse especifica o valor *padrão* do contexto:
```js
const ThemeContext = createContext('light');
```
-This value never changes. React only uses this value as a fallback if it can't find a matching provider above.
-
-To make context change over time, [add state and wrap components in a context provider.](/reference/react/useContext#updating-data-passed-via-context)
+Esse valor nunca muda. React só usa esse valor como um fallback (reserva) se ele não conseguir encontrar um provedor correspondente acima.
+Para fazer o valor do contexto mudar com o tempo, [adicione estado e envolva os componentes em um provedor de contexto (context provider).](/reference/react/useContext#updating-data-passed-via-context)