From b7851ee88fe1961da8b8ed5a1d51434d6e1a8b48 Mon Sep 17 00:00:00 2001 From: Eduardo Jesus do Nascimento Date: Fri, 16 Jun 2023 15:55:11 -0300 Subject: [PATCH 1/8] wip: add initial translations --- src/content/reference/react/useLayoutEffect.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/content/reference/react/useLayoutEffect.md b/src/content/reference/react/useLayoutEffect.md index 5af3ec5a6..900a58119 100644 --- a/src/content/reference/react/useLayoutEffect.md +++ b/src/content/reference/react/useLayoutEffect.md @@ -4,13 +4,13 @@ title: useLayoutEffect -`useLayoutEffect` can hurt performance. Prefer [`useEffect`](/reference/react/useEffect) when possible. +`useLayoutEffect` pode prejudicar o desempenho. Use [`useEffect`](/reference/react/useEffect) sempre que possível. -`useLayoutEffect` is a version of [`useEffect`](/reference/react/useEffect) that fires before the browser repaints the screen. +`useLayoutEffect` é uma versão de [`useEffect`](/reference/react/useEffect) que é executada antes do navegador exibir a tela. ```js useLayoutEffect(setup, dependencies?) @@ -22,11 +22,11 @@ useLayoutEffect(setup, dependencies?) --- -## Reference {/*reference*/} +## Referência {/*reference*/} ### `useLayoutEffect(setup, dependencies?)` {/*useinsertioneffect*/} -Call `useLayoutEffect` to perform the layout measurements before the browser repaints the screen: +Chame `useLayoutEffect` para executar as medidas de layout antes que o navegador exiba a tela: ```js import { useState, useRef, useLayoutEffect } from 'react'; @@ -43,9 +43,9 @@ function Tooltip() { ``` -[See more examples below.](#usage) +[Veja mais exemplos abaixo.](#usage) -#### Parameters {/*parameters*/} +#### Parâmetros {/*parameters*/} * `setup`: The function with your Effect's logic. Your setup function may also optionally return a *cleanup* function. Before your component is added to the DOM, React will run your setup function. After every re-render with changed dependencies, React will first run the cleanup function (if you provided it) with the old values, and then run your setup function with the new values. Before your component is removed from the DOM, React will run your cleanup function. @@ -69,7 +69,7 @@ function Tooltip() { --- -## Usage {/*usage*/} +## Uso {/*usage*/} ### Measuring layout before the browser repaints the screen {/*measuring-layout-before-the-browser-repaints-the-screen*/} From 54bb9efb0acd5c17896c047d8f5c1bfb3df7d395 Mon Sep 17 00:00:00 2001 From: Eduardo Jesus do Nascimento Date: Sat, 1 Jul 2023 15:24:40 -0300 Subject: [PATCH 2/8] wip: add translation of the lines 50~68 --- .../reference/react/useLayoutEffect.md | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/content/reference/react/useLayoutEffect.md b/src/content/reference/react/useLayoutEffect.md index 900a58119..22aba9858 100644 --- a/src/content/reference/react/useLayoutEffect.md +++ b/src/content/reference/react/useLayoutEffect.md @@ -47,25 +47,25 @@ function Tooltip() { #### Parâmetros {/*parameters*/} -* `setup`: The function with your Effect's logic. Your setup function may also optionally return a *cleanup* function. Before your component is added to the DOM, React will run your setup function. After every re-render with changed dependencies, React will first run the cleanup function (if you provided it) with the old values, and then run your setup function with the new values. Before your component is removed from the DOM, React will run your cleanup function. +* `setup`: A função com a lógica do seu efeito (*Effect*). Sua função de configuração também pode opcionalmente retornar uma função de limpeza (*cleanup*). Antes que o seu componente seja adicionado ao DOM, o React executará a sua função de configuração. Após cada re-renderização com dependências alteradas, o React primeiro executará a função de limpeza (se fornecida) com os valores antigos e, em seguida, executará a sua função de configuração com os novos valores. Antes que o seu componente seja removido do DOM, o React executará a sua função de limpeza. -* **optional** `dependencies`: The list of all reactive values referenced inside of the `setup` code. Reactive values include props, state, and all the variables and functions declared directly inside your component body. If your linter is [configured for React](/learn/editor-setup#linting), it will verify that every reactive value is correctly specified as a dependency. The list of dependencies must have a constant number of items and be written inline like `[dep1, dep2, dep3]`. React will compare each dependency with its previous value using the [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison. If you omit this argument, your Effect will re-run after every re-render of the component. +* **opcional** `dependencies`: A lista de todos os valores reativos referenciados dentro do código de `setup`. Valores reativos incluem *props*, *states* e todas as variáveis e funções declaradas diretamente no *body* do seu componente. Se o seu linter estiver [configurado para o React](/learn/editor-setup#linting), ele verificará se cada valor reativo está corretamente especificado como uma dependência. A lista de dependências deve ter um número constante de itens e ser escrita inline, como por exemplo: `[dep1, dep2, dep3]`. O React fará uma comparação de cada dependência com seu valor anterior usando o [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is). Se você omitir esse argumento, seu efeito (*Effect*) será executado novamente após cada nova re-renderização do componente. -#### Returns {/*returns*/} +#### Retorno {/*returns*/} -`useLayoutEffect` returns `undefined`. +`useLayoutEffect` retorna `undefined`. -#### Caveats {/*caveats*/} +#### Observações {/*caveats*/} -* `useLayoutEffect` is a Hook, so you can only call it **at the top level of your component** or your own Hooks. You can't call it inside loops or conditions. If you need that, extract a component and move the Effect there. +* `useLayoutEffect` é um Hook, então você só pode chamá-lo **no nível superior do seu componente** ou nos seus próprios Hooks. Não é possível chamá-lo dentro de loops ou condições. Se você precisar fazer isso, crie um componente e mova seu efeito (*Effect*) para lá. -* When Strict Mode is on, React will **run one extra development-only setup+cleanup cycle** before the first real setup. This is a stress-test that ensures that your cleanup logic "mirrors" your setup logic and that it stops or undoes whatever the setup is doing. If this causes a problem, [implement the cleanup function.](/learn/synchronizing-with-effects#how-to-handle-the-effect-firing-twice-in-development) +* Quando o Modo Estrito (*Strict Mode*) está ativado, o React **executará um ciclo extra de configuração+limpeza (*setup+cleanup*) exclusivamente para modo de desenvolvimento** antes do primeiro ciclo de configuração real. Isso é um teste de estresse que garante que sua lógica de limpeza "espelhe" sua lógica de configuração e que ela interrompa ou desfaça qualquer coisa que a configuração esteja fazendo. Se isso lhe causar um problema, [implemente a função de limpeza.](/learn/synchronizing-with-effects#how-to-handle-the-effect-firing-twice-in-development) -* If some of your dependencies are objects or functions defined inside the component, there is a risk that they will **cause the Effect to re-run more often than needed.** To fix this, remove unnecessary [object](/reference/react/useEffect#removing-unnecessary-object-dependencies) and [function](/reference/react/useEffect#removing-unnecessary-function-dependencies) dependencies. You can also [extract state updates](/reference/react/useEffect#updating-state-based-on-previous-state-from-an-effect) and [non-reactive logic](/reference/react/useEffect#reading-the-latest-props-and-state-from-an-effect) outside of your Effect. +* Se algumas de suas dependências são objetos ou funções definidas dentro do componente, há o risco de que elas **façam o efeito (*Effect*) ser executado mais vezes do que o necessário**. Para corrigir isso, remova as dependências com [objetos](/reference/react/useEffect#removing-unnecessary-object-dependencies) e [funções](/reference/react/useEffect#removing-unnecessary-function-dependencies) desnecessárias. Você também pode [extrair as atualizações de estado (*state*)](/reference/react/useEffect#updating-state-based-on-previous-state-from-an-effect) e sua [lógica não reativa](/reference/react/useEffect#reading-the-latest-props-and-state-from-an-effect) para fora do seu efeito (*Effect*). -* Effects **only run on the client.** They don't run during server rendering. +* Os efeitos (*Effects*) **só são executados no cliente.** Eles não são executados durante a renderização no servidor. -* The code inside `useLayoutEffect` and all state updates scheduled from it **block the browser from repainting the screen.** When used excessively, this makes your app slow. When possible, prefer [`useEffect`.](/reference/react/useEffect) +* O código executado dentro do `useLayoutEffect` e todas as atualizações de estado (*state*) agendadas a partir dele **bloqueiam o navegador de redesenhar a tela**. Quando usado em excesso, acaba tornando sua aplicação lenta. Sempre que possível, prefira o [`useEffect`.](/reference/react/useEffect) --- From 7e7c3756228c85d80bdfa12d73fbf36619b25c42 Mon Sep 17 00:00:00 2001 From: Eduardo Jesus do Nascimento Date: Sun, 16 Jul 2023 14:11:42 -0300 Subject: [PATCH 3/8] wip: add translation of the lines 69~86 and update another lines --- .../reference/react/useLayoutEffect.md | 33 ++++++++++--------- 1 file changed, 17 insertions(+), 16 deletions(-) diff --git a/src/content/reference/react/useLayoutEffect.md b/src/content/reference/react/useLayoutEffect.md index 22aba9858..926d6b97d 100644 --- a/src/content/reference/react/useLayoutEffect.md +++ b/src/content/reference/react/useLayoutEffect.md @@ -26,7 +26,7 @@ useLayoutEffect(setup, dependencies?) ### `useLayoutEffect(setup, dependencies?)` {/*useinsertioneffect*/} -Chame `useLayoutEffect` para executar as medidas de layout antes que o navegador exiba a tela: +Chame o `useLayoutEffect` para executar as medidas de layout antes do navegador exibir a tela: ```js import { useState, useRef, useLayoutEffect } from 'react'; @@ -47,9 +47,9 @@ function Tooltip() { #### Parâmetros {/*parameters*/} -* `setup`: A função com a lógica do seu efeito (*Effect*). Sua função de configuração também pode opcionalmente retornar uma função de limpeza (*cleanup*). Antes que o seu componente seja adicionado ao DOM, o React executará a sua função de configuração. Após cada re-renderização com dependências alteradas, o React primeiro executará a função de limpeza (se fornecida) com os valores antigos e, em seguida, executará a sua função de configuração com os novos valores. Antes que o seu componente seja removido do DOM, o React executará a sua função de limpeza. +* `setup`: A função com a lógica do seu *Effect* (efeito). Sua função de configuração também pode opcionalmente retornar uma função de limpeza (*cleanup*). Antes que o seu componente seja adicionado ao DOM, o React executará a sua função de configuração. Após cada re-renderização por meio das dependências alteradas, o React primeiro executará a função de limpeza (se fornecida) com os valores antigos e, em seguida, executará a sua função de configuração com os novos valores. Antes que o seu componente seja removido do DOM, o React executará a sua função de limpeza. -* **opcional** `dependencies`: A lista de todos os valores reativos referenciados dentro do código de `setup`. Valores reativos incluem *props*, *states* e todas as variáveis e funções declaradas diretamente no *body* do seu componente. Se o seu linter estiver [configurado para o React](/learn/editor-setup#linting), ele verificará se cada valor reativo está corretamente especificado como uma dependência. A lista de dependências deve ter um número constante de itens e ser escrita inline, como por exemplo: `[dep1, dep2, dep3]`. O React fará uma comparação de cada dependência com seu valor anterior usando o [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is). Se você omitir esse argumento, seu efeito (*Effect*) será executado novamente após cada nova re-renderização do componente. +* **opcional** `dependencies`: A lista de todos os valores reativos referenciados dentro do código de `setup`. Valores reativos incluem *props*, *states* e todas as variáveis e funções declaradas diretamente no *body* do seu componente. Se o seu linter estiver [configurado para o React](/learn/editor-setup#linting), ele verificará se cada valor reativo está corretamente especificado como uma dependência. A lista de dependências deve ter um número constante de itens e ser escrita inline, como por exemplo: `[dep1, dep2, dep3]`. O React fará uma comparação de cada dependência com seu valor anterior usando o [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is). Se você omitir esse argumento, seu *Effect* (efeito) será executado novamente após cada nova re-renderização do componente. #### Retorno {/*returns*/} @@ -57,33 +57,34 @@ function Tooltip() { #### Observações {/*caveats*/} -* `useLayoutEffect` é um Hook, então você só pode chamá-lo **no nível superior do seu componente** ou nos seus próprios Hooks. Não é possível chamá-lo dentro de loops ou condições. Se você precisar fazer isso, crie um componente e mova seu efeito (*Effect*) para lá. +* `useLayoutEffect` é um Hook, então você só pode chamá-lo **no nível superior do seu componente** ou nos seus próprios Hooks. Não é possível chamá-lo dentro de loops ou condições. Se você precisar fazer isso, crie um componente e mova seu *Effect* (efeito) para lá. -* Quando o Modo Estrito (*Strict Mode*) está ativado, o React **executará um ciclo extra de configuração+limpeza (*setup+cleanup*) exclusivamente para modo de desenvolvimento** antes do primeiro ciclo de configuração real. Isso é um teste de estresse que garante que sua lógica de limpeza "espelhe" sua lógica de configuração e que ela interrompa ou desfaça qualquer coisa que a configuração esteja fazendo. Se isso lhe causar um problema, [implemente a função de limpeza.](/learn/synchronizing-with-effects#how-to-handle-the-effect-firing-twice-in-development) +* Quando o *Strict Mode* (Modo Estrito) está ativado, o React **executará um ciclo extra de setup+cleanup (*configuração+limpeza*) exclusivamente para modo de desenvolvimento** antes do primeiro ciclo de configuração real. Isso é um teste de estresse que garante que sua lógica de *cleanup* (limpeza) "espelhe" sua lógica de *setup* (configuração) e que ela interrompa ou desfaça qualquer coisa que o *setup* (configuração) esteja fazendo. Se isso lhe causar um problema, [implemente a função de *cleanup* (limpeza).](/learn/synchronizing-with-effects#how-to-handle-the-effect-firing-twice-in-development) -* Se algumas de suas dependências são objetos ou funções definidas dentro do componente, há o risco de que elas **façam o efeito (*Effect*) ser executado mais vezes do que o necessário**. Para corrigir isso, remova as dependências com [objetos](/reference/react/useEffect#removing-unnecessary-object-dependencies) e [funções](/reference/react/useEffect#removing-unnecessary-function-dependencies) desnecessárias. Você também pode [extrair as atualizações de estado (*state*)](/reference/react/useEffect#updating-state-based-on-previous-state-from-an-effect) e sua [lógica não reativa](/reference/react/useEffect#reading-the-latest-props-and-state-from-an-effect) para fora do seu efeito (*Effect*). +* Se algumas de suas dependências são objetos ou funções definidas dentro do componente, há o risco de que elas **façam o *Effect* (efeito) ser executado mais vezes do que o necessário**. Para corrigir isso, remova as dependências com [objetos](/reference/react/useEffect#removing-unnecessary-object-dependencies) e [funções](/reference/react/useEffect#removing-unnecessary-function-dependencies) desnecessárias. Você também pode [extrair as atualizações de *state* (estado)](/reference/react/useEffect#updating-state-based-on-previous-state-from-an-effect) e sua [lógica não reativa](/reference/react/useEffect#reading-the-latest-props-and-state-from-an-effect) para fora do seu *Effect* (efeito). -* Os efeitos (*Effects*) **só são executados no cliente.** Eles não são executados durante a renderização no servidor. +* Os *Effects* (efeitos) **só são executados no lado do cliente.** Eles não são executados durante a renderização no lado do servidor. -* O código executado dentro do `useLayoutEffect` e todas as atualizações de estado (*state*) agendadas a partir dele **bloqueiam o navegador de redesenhar a tela**. Quando usado em excesso, acaba tornando sua aplicação lenta. Sempre que possível, prefira o [`useEffect`.](/reference/react/useEffect) +* O código executado dentro do `useLayoutEffect` e todas as atualizações de *state* (estado) agendadas a partir dele **bloqueiam o navegador de exibir a tela**. Quando usado em excesso, acaba tornando sua aplicação lenta. Sempre que possível, prefira usar o [`useEffect`.](/reference/react/useEffect) --- ## Uso {/*usage*/} -### Measuring layout before the browser repaints the screen {/*measuring-layout-before-the-browser-repaints-the-screen*/} +### Medindo o layout antes do navegador exibir a tela {/*measuring-layout-before-the-browser-repaints-the-screen*/} -Most components don't need to know their position and size on the screen to decide what to render. They only return some JSX. Then the browser calculates their *layout* (position and size) and repaints the screen. +A maioria dos componentes não precisa saber sua posição e tamanho na tela para decidir o que renderizar. Eles apenas retornam algum JSX. Em seguida, o navegador calcula o *layout* deles (posição e tamanho) e exibe a tela. -Sometimes, that's not enough. Imagine a tooltip that appears next to some element on hover. If there's enough space, the tooltip should appear above the element, but if it doesn't fit, it should appear below. In order to render the tooltip at the right final position, you need to know its height (i.e. whether it fits at the top). +Às vezes, somente isso não é suficiente. Imagine uma ferramenta de dica que aparece ao lado de algum elemento quando o mouse está sobre ele. Se houver espaço suficiente, a ferramenta de dica deve aparecer acima do elemento, mas se não couber, ela deve aparecer abaixo. Para renderizar a ferramenta de dica na posição final correta, você precisa saber a altura dela (ou seja, se ela se encaixa na parte superior). -To do this, you need to render in two passes: +Para fazer isso, é necessário renderizar duas vezes: -1. Render the tooltip anywhere (even with a wrong position). -2. Measure its height and decide where to place the tooltip. -3. Render the tooltip *again* in the correct place. +1. Renderize a ferramenta de dica em qualquer lugar (mesmo com uma posição incorreta). +2. Meça sua altura e decida onde colocar a ferramenta de dica. +3. Renderize a ferramenta de dica *novamente* no local correto. + +**Tudo isso precisa acontecer antes do navegador exibir a tela.** Você não quer que o usuário veja a ferramenta de dica se movendo. Chame o `useLayoutEffect` para realizar as medições de layout antes do navegador exibir a tela: -**All of this needs to happen before the browser repaints the screen.** You don't want the user to see the tooltip moving. Call `useLayoutEffect` to perform the layout measurements before the browser repaints the screen: ```js {5-8} function Tooltip() { From 3287f0a0db7893e4ac719f30c64ef6d9ea541a17 Mon Sep 17 00:00:00 2001 From: Eduardo Jesus do Nascimento Date: Sat, 5 Aug 2023 22:25:32 -0300 Subject: [PATCH 4/8] wip: add translation of the lines 87~253 --- .../reference/react/useLayoutEffect.md | 38 +++++++++---------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/src/content/reference/react/useLayoutEffect.md b/src/content/reference/react/useLayoutEffect.md index 926d6b97d..ba3ef64d8 100644 --- a/src/content/reference/react/useLayoutEffect.md +++ b/src/content/reference/react/useLayoutEffect.md @@ -89,26 +89,26 @@ Para fazer isso, é necessário renderizar duas vezes: ```js {5-8} function Tooltip() { const ref = useRef(null); - const [tooltipHeight, setTooltipHeight] = useState(0); // You don't know real height yet + const [tooltipHeight, setTooltipHeight] = useState(0); // Você ainda não sabe qual a altura real useLayoutEffect(() => { const { height } = ref.current.getBoundingClientRect(); - setTooltipHeight(height); // Re-render now that you know the real height + setTooltipHeight(height); // Re-renderize novamente agora já que você conhece a altura real }, []); - // ...use tooltipHeight in the rendering logic below... + // ...use o tooltipHeight na lógica de renderização em seguida... } ``` -Here's how this works step by step: +Aqui está a explicação de como o código acima funciona passo a passo: -1. `Tooltip` renders with the initial `tooltipHeight = 0` (so the tooltip may be wrongly positioned). -2. React places it in the DOM and runs the code in `useLayoutEffect`. -3. Your `useLayoutEffect` [measures the height](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) of the tooltip content and triggers an immediate re-render. -4. `Tooltip` renders again with the real `tooltipHeight` (so the tooltip is correctly positioned). -5. React updates it in the DOM, and the browser finally displays the tooltip. +1. O `Tooltip` renderiza com o valor inicial do *state* (estado) `tooltipHeight = 0` (portanto, a ferramenta de dica pode estar posicionada incorretamente). +2. O React o adiciona no DOM e executa o código do `useLayoutEffect`. +3. Seu `useLayoutEffect` [mede a altura](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) do conteúdo da ferramenta de dica e altera o valor do *state*, desencadeando uma nova renderização imediatamente. +4. O `Tooltip` renderiza novamente com o *state* (estado) `tooltipHeight` contendo o valor correto da altura (então a ferramenta de dica é posicionada corretamente). +5. O React a atualiza o DOM e finalmente o navegador exibe a ferramenta de dica. -Hover over the buttons below and see how the tooltip adjusts its position depending on whether it fits: +Passe o mouse sobre os botões abaixo e observe como a ferramenta de dica ajusta a sua posição conforme a disponibilidade de espaço: @@ -121,29 +121,29 @@ export default function App() { - This tooltip does not fit above the button. + Esta ferramenta de dica não cabe acima do botão.
- This is why it's displayed below instead! + Por isso, ela é exibida abaixo! } > - Hover over me (tooltip above) + Passe o mouse sobre mim (ferramenta de dica abaixo)
This tooltip fits above the button
+
Esta ferramenta de dica cabe acima do botão
} > - Hover over me (tooltip below) + Passe o mouse sobre mim (ferramenta de dica acima)
This tooltip fits above the button
+
Esta ferramenta de dica cabe acima do botão
} > - Hover over me (tooltip below) + Passe o mouse sobre mim (ferramenta de dica acima) ); @@ -198,7 +198,7 @@ export default function Tooltip({ children, targetRect }) { useLayoutEffect(() => { const { height } = ref.current.getBoundingClientRect(); setTooltipHeight(height); - console.log('Measured tooltip height: ' + height); + console.log('Medida da altura da ferramenta de dica: ' + height); }, []); let tooltipX = 0; @@ -207,7 +207,7 @@ export default function Tooltip({ children, targetRect }) { tooltipX = targetRect.left; tooltipY = targetRect.top - tooltipHeight; if (tooltipY < 0) { - // It doesn't fit above, so place below. + // Não cabe acima, então coloque abaixo. tooltipY = targetRect.bottom; } } From e2660502d2c11f923969f70bae3bac25a8ef8c8b Mon Sep 17 00:00:00 2001 From: Eduardo Jesus do Nascimento Date: Sun, 27 Aug 2023 15:42:50 -0300 Subject: [PATCH 5/8] wip: add translation of the lines 254~403 --- .../reference/react/useLayoutEffect.md | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/content/reference/react/useLayoutEffect.md b/src/content/reference/react/useLayoutEffect.md index ba3ef64d8..b218d817b 100644 --- a/src/content/reference/react/useLayoutEffect.md +++ b/src/content/reference/react/useLayoutEffect.md @@ -252,13 +252,13 @@ export default function TooltipContainer({ children, x, y, contentRef }) { -Notice that even though the `Tooltip` component has to render in two passes (first, with `tooltipHeight` initialized to `0` and then with the real measured height), you only see the final result. This is why you need `useLayoutEffect` instead of [`useEffect`](/reference/react/useEffect) for this example. Let's look at the difference in detail below. +Observe que, mesmo o componente `Tooltip` precisando ser renderizado em duas etapas (primeiro, com o `tooltipHeight` inicializado com o valor `0` e em seguida, com a medida da altura real), você só visualiza o resultado final. Isso é o por que precisamos usar `useLayoutEffect` ao invés de [`useEffect`](/reference/react/useEffect) para este cenário de exemplo. Vamos visualizar as diferenças com mais detalhes abaixo. -#### `useLayoutEffect` blocks the browser from repainting {/*uselayouteffect-blocks-the-browser-from-repainting*/} +#### `useLayoutEffect` impede o navegador de exibir a tela {/*uselayouteffect-blocks-the-browser-from-repainting*/} -React guarantees that the code inside `useLayoutEffect` and any state updates scheduled inside it will be processed **before the browser repaints the screen.** This lets you render the tooltip, measure it, and re-render the tooltip again without the user noticing the first extra render. In other words, `useLayoutEffect` blocks the browser from painting. +O React garante que o código dentro de `useLayoutEffect` e quaisquer atualizações de *state* (estado) agendadas dentro dele serão processados **antes do navegador exibir a tela**. Isso permite que você renderize a ferramenta de dica, tire sua medida e renderize novamente sem que o usuário perceba a primeira renderização extra. Em outras palavras, o `useLayoutEffect` bloqueia o navegador de realizar a construção da tela. @@ -271,29 +271,29 @@ export default function App() { - This tooltip does not fit above the button. + Esta ferramenta de dica não cabe acima do botão.
- This is why it's displayed below instead! + Por isso, ela é exibida abaixo! } > - Hover over me (tooltip above) + Passe o mouse sobre mim (ferramenta de dica abaixo)
This tooltip fits above the button
+
Esta ferramenta de dica cabe acima do botão
} > - Hover over me (tooltip below) + Passe o mouse sobre mim (ferramenta de dica acima)
This tooltip fits above the button
+
Esta ferramenta de dica cabe acima do botão
} > - Hover over me (tooltip below) + Passe o mouse sobre mim (ferramenta de dica acima) ); @@ -356,7 +356,7 @@ export default function Tooltip({ children, targetRect }) { tooltipX = targetRect.left; tooltipY = targetRect.top - tooltipHeight; if (tooltipY < 0) { - // It doesn't fit above, so place below. + // Não cabe acima, então coloque abaixo. tooltipY = targetRect.bottom; } } From 3789b01698c1e80020fdecaadc17cc056cd8dcc1 Mon Sep 17 00:00:00 2001 From: Eduardo Jesus do Nascimento Date: Sun, 10 Sep 2023 18:11:49 -0300 Subject: [PATCH 6/8] wip: add translation of the lines 403~698 --- .../reference/react/useLayoutEffect.md | 44 +++++++++---------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/src/content/reference/react/useLayoutEffect.md b/src/content/reference/react/useLayoutEffect.md index b218d817b..ae3f9026d 100644 --- a/src/content/reference/react/useLayoutEffect.md +++ b/src/content/reference/react/useLayoutEffect.md @@ -403,9 +403,9 @@ export default function TooltipContainer({ children, x, y, contentRef }) { -#### `useEffect` does not block the browser {/*useeffect-does-not-block-the-browser*/} +#### `useEffect` não bloqueia o navegador {/*useeffect-does-not-block-the-browser*/} -Here is the same example, but with [`useEffect`](/reference/react/useEffect) instead of `useLayoutEffect`. If you're on a slower device, you might notice that sometimes the tooltip "flickers" and you briefly see its initial position before the corrected position. +Aqui está o mesmo exemplo, mas com [`useEffect`](/reference/react/useEffect) ao invés de `useLayoutEffect`. Se estiver em um dispositivo mais lento, talvez você perceba que às vezes a ferramenta de dica "pisca" e durante um instante você vê sua posição inicial antes da correção de posição ser aplicada. @@ -418,29 +418,29 @@ export default function App() { - This tooltip does not fit above the button. + Esta ferramenta de dica não cabe acima do botão.
- This is why it's displayed below instead! + Por isso, ela é exibida abaixo! } > - Hover over me (tooltip above) + Passe o mouse sobre mim (ferramenta de dica abaixo)
This tooltip fits above the button
+
Esta ferramenta de dica cabe acima do botão
} > - Hover over me (tooltip below) + Passe o mouse sobre mim (ferramenta de dica acima)
This tooltip fits above the button
+
Esta ferramenta de dica cabe acima do botão
} > - Hover over me (tooltip below) + Passe o mouse sobre mim (ferramenta de dica acima) ); @@ -503,7 +503,7 @@ export default function Tooltip({ children, targetRect }) { tooltipX = targetRect.left; tooltipY = targetRect.top - tooltipHeight; if (tooltipY < 0) { - // It doesn't fit above, so place below. + // Não cabe acima, então coloque abaixo. tooltipY = targetRect.bottom; } } @@ -548,7 +548,7 @@ export default function TooltipContainer({ children, x, y, contentRef }) { -To make the bug easier to reproduce, this version adds an artificial delay during rendering. React will let the browser paint the screen before it processes the state update inside `useEffect`. As a result, the tooltip flickers: +Para tornar o bug mais fácil de reproduzir, esta versão adiciona um atraso artificial durante a renderização. O React permitirá que o navegador construa a tela antes de processar a atualização do *state* (estado) dentro do `useEffect`. Como resultado, a dica de ferramenta piscará: @@ -557,33 +557,33 @@ import ButtonWithTooltip from './ButtonWithTooltip.js'; export default function App() { return ( -
+
- This tooltip does not fit above the button. + Esta ferramenta de dica não cabe acima do botão.
- This is why it's displayed below instead! + Por isso, ela é exibida abaixo!
} > - Hover over me (tooltip above) + Passe o mouse sobre mim (ferramenta de dica abaixo)
This tooltip fits above the button
+
Esta ferramenta de dica cabe acima do botão
} > - Hover over me (tooltip below) + Passe o mouse sobre mim (ferramenta de dica acima)
This tooltip fits above the button
+
Esta ferramenta de dica cabe acima do botão
} > - Hover over me (tooltip below) + Passe o mouse sobre mim (ferramenta de dica acima)
); @@ -635,10 +635,10 @@ export default function Tooltip({ children, targetRect }) { const ref = useRef(null); const [tooltipHeight, setTooltipHeight] = useState(0); - // This artificially slows down rendering + // Isso artificialmente retarda a renderização let now = performance.now(); while (performance.now() - now < 100) { - // Do nothing for a bit... + // Não faça nada por um tempo... } useEffect(() => { @@ -652,7 +652,7 @@ export default function Tooltip({ children, targetRect }) { tooltipX = targetRect.left; tooltipY = targetRect.top - tooltipHeight; if (tooltipY < 0) { - // It doesn't fit above, so place below. + // Não cabe acima, então coloque abaixo. tooltipY = targetRect.bottom; } } From 80786d6827e20ed0a5030daecaa531c38e508e9e Mon Sep 17 00:00:00 2001 From: Eduardo Jesus do Nascimento Date: Sun, 1 Oct 2023 17:41:11 -0300 Subject: [PATCH 7/8] wip: add translation of the lines 699~741 --- .../reference/react/useLayoutEffect.md | 34 +++++++++---------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/src/content/reference/react/useLayoutEffect.md b/src/content/reference/react/useLayoutEffect.md index ae3f9026d..40ff99476 100644 --- a/src/content/reference/react/useLayoutEffect.md +++ b/src/content/reference/react/useLayoutEffect.md @@ -697,7 +697,7 @@ export default function TooltipContainer({ children, x, y, contentRef }) { -Edit this example to `useLayoutEffect` and observe that it blocks the paint even if rendering is slowed down. +Edite esse exemplo usando `useLayoutEffect` e veja que ele bloqueia a construção mesmo se a renderização for retardada. @@ -705,36 +705,36 @@ Edit this example to `useLayoutEffect` and observe that it blocks the paint even -Rendering in two passes and blocking the browser hurts performance. Try to avoid this when you can. +Renderizar em duas etapas bloqueando o navegador prejudica o desempenho. Tente evitar isso sempre que for possível. --- -## Troubleshooting {/*troubleshooting*/} +## Solução de Problemas {/*troubleshooting*/} -### I'm getting an error: "`useLayoutEffect` does nothing on the server" {/*im-getting-an-error-uselayouteffect-does-nothing-on-the-server*/} +### Estou recebendo o erro: "`useLayoutEffect` does nothing on the server" {/*im-getting-an-error-uselayouteffect-does-nothing-on-the-server*/} -The purpose of `useLayoutEffect` is to let your component [use layout information for rendering:](#measuring-layout-before-the-browser-repaints-the-screen) +O propósito do `useLayoutEffect` é permitir que seu componente [use informações de layout para a renderização:](#measuring-layout-before-the-browser-repaints-the-screen) -1. Render the initial content. -2. Measure the layout *before the browser repaints the screen.* -3. Render the final content using the layout information you've read. +1. Renderize o conteúdo inicial. +2. Meça o layout *antes do navegador exibir a tela*. +3. Renderize o conteúdo final usando as informações de layout que você recebeu. -When you or your framework uses [server rendering](/reference/react-dom/server), your React app renders to HTML on the server for the initial render. This lets you show the initial HTML before the JavaScript code loads. +Quando você ou seu framework utilizam a [renderização no lado do servidor](/reference/react-dom/server), sua aplicação React gera o HTML no servidor para a renderização inicial. Isso permite que você exiba o HTML inicial antes que o código JavaScript seja carregado. -The problem is that on the server, there is no layout information. +O problema é que no lado do servidor não há informações de layout disponíveis. -In the [earlier example](#measuring-layout-before-the-browser-repaints-the-screen), the `useLayoutEffect` call in the `Tooltip` component lets it position itself correctly (either above or below content) depending on the content height. If you tried to render `Tooltip` as a part of the initial server HTML, this would be impossible to determine. On the server, there is no layout yet! So, even if you rendered it on the server, its position would "jump" on the client after the JavaScript loads and runs. +No [exemplo anterior](#measuring-layout-before-the-browser-repaints-the-screen), a chamada do `useLayoutEffect` no componente `Tooltip` permite que ele se posicione corretamente (acima ou abaixo do conteúdo) dependendo da altura do conteúdo. Se você tentasse renderizar o `Tooltip` como parte do HTML inicial do servidor, isso seria impossível de determinar. No servidor, ainda não há layout! Portanto, mesmo que você o renderizasse no lado do servidor, sua posição "pularia" no lado do cliente após o carregamento e execução do JavaScript. -Usually, components that rely on layout information don't need to render on the server anyway. For example, it probably doesn't make sense to show a `Tooltip` during the initial render. It is triggered by a client interaction. +Normalmente, componentes que dependem de informações de layout não precisam ser renderizados no lado do servidor. Por exemplo, é provável que não se faça muito sentido mostrar um `Tooltip` durante a renderização inicial, pois ele é acionado por meio de uma interação do usuário no lado do cliente. -However, if you're running into this problem, you have a few different options: +No entanto, se encontrar esse problema, você possui essas opções: -- Replace `useLayoutEffect` with [`useEffect`.](/reference/react/useEffect) This tells React that it's okay to display the initial render result without blocking the paint (because the original HTML will become visible before your Effect runs). +- Substituir o `useLayoutEffect` pelo [`useEffect`.](/reference/react/useEffect) Isso informa ao React que é aceitável exibir o resultado da renderização inicial sem bloquear a construção (porque o HTML original ficará visível antes de seu *Effect* (efeito) ser executado). -- Alternatively, [mark your component as client-only.](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-server-only-content) This tells React to replace its content up to the closest [``](/reference/react/Suspense) boundary with a loading fallback (for example, a spinner or a glimmer) during server rendering. +- [Marque seu componente como exclusivo para o cliente.](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-server-only-content) Isso diz ao React para substituir seu conteúdo até o limite mais próximo de [``](/reference/react/Suspense) por uma carga de fallback (por exemplo, um *spinner* ou um *glimmer*) durante a renderização no lado do servidor. -- Alternatively, you can render a component with `useLayoutEffect` only after hydration. Keep a boolean `isMounted` state that's initialized to `false`, and set it to `true` inside a `useEffect` call. Your rendering logic can then be like `return isMounted ? : `. On the server and during the hydration, the user will see `FallbackContent` which should not call `useLayoutEffect`. Then React will replace it with `RealContent` which runs on the client only and can include `useLayoutEffect` calls. +- Você também pode renderizar um componente com `useLayoutEffect` somente após a hidratação. Mantenha um *state* (estado) booleano `isMounted` que é iniciado como `false`, e defina-o como `true` dentro de uma chamada de `useEffect`. Sua lógica de renderização pode ser algo semelhante a isso: `return isMounted ? : `. No lado servidor e durante a hidratação, o usuário verá `FallbackContent` que não deve chamar o `useLayoutEffect`. Então, o React substituirá isso por `RealContent` que é executado apenas no lado do cliente e pode incluir chamadas de `useLayoutEffect`. -- If you synchronize your component with an external data store and rely on `useLayoutEffect` for different reasons than measuring layout, consider [`useSyncExternalStore`](/reference/react/useSyncExternalStore) instead which [supports server rendering.](/reference/react/useSyncExternalStore#adding-support-for-server-rendering) +- Se você sincronizar seu componente com uma loja de dados externa e depender de `useLayoutEffect` por razões diferentes da medição de layout, considere usar [`useSyncExternalStore`](/reference/react/useSyncExternalStore) que oferece [suporte a renderização no lado servidor.](/reference/react/useSyncExternalStore#adding-support-for-server-rendering) From 00bcec5cd3f0f4d9fba3055b1710713f65cefb75 Mon Sep 17 00:00:00 2001 From: Eduardo Jesus do Nascimento Date: Sun, 1 Oct 2023 17:57:14 -0300 Subject: [PATCH 8/8] refactor: update caveats translation --- src/content/reference/react/useLayoutEffect.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/useLayoutEffect.md b/src/content/reference/react/useLayoutEffect.md index 40ff99476..fad564f85 100644 --- a/src/content/reference/react/useLayoutEffect.md +++ b/src/content/reference/react/useLayoutEffect.md @@ -55,7 +55,7 @@ function Tooltip() { `useLayoutEffect` retorna `undefined`. -#### Observações {/*caveats*/} +#### Ressalvas {/*caveats*/} * `useLayoutEffect` é um Hook, então você só pode chamá-lo **no nível superior do seu componente** ou nos seus próprios Hooks. Não é possível chamá-lo dentro de loops ou condições. Se você precisar fazer isso, crie um componente e mova seu *Effect* (efeito) para lá.