Translate useInsertionEffect #642
Conversation
carlos-garcia-dev
changed the title
There was a problem hiding this comment.
¡Hola, @carlos-garcia-dev! ¡Gracias por la contribución! Te he dejado algunos comentarios. Cuando puedas revísalos y comenta si no estás de acuerdo con alguno.
| * By the time `useInsertionEffect` runs, refs are not attached yet, and DOM is not yet updated. | ||
| #### Advertencias {/*caveats*/} | ||
|
|
||
| * Effect que sólo se ejecuta en el cliente. No se ejecutan durante el renderizado en el servidor. |
There was a problem hiding this comment.
| * Effect que sólo se ejecuta en el cliente. No se ejecutan durante el renderizado en el servidor. | |
| * Los Efectos sólo se ejecutan en el cliente. No se ejecutan durante el renderizado en el servidor. |
|
|
||
| ### Injecting dynamic styles from CSS-in-JS libraries {/*injecting-dynamic-styles-from-css-in-js-libraries*/} | ||
| ### Inyectando estilos dinámicos desde librerías CSS-in-JS {/*injecting-dynamic-styles-from-css-in-js-libraries*/} |
There was a problem hiding this comment.
https://github.com/reactjs/es.reactjs.org/blob/main/TRANSLATION.md#el-gerundio
| ### Inyectando estilos dinámicos desde librerías CSS-in-JS {/*injecting-dynamic-styles-from-css-in-js-libraries*/} | |
| ### Inyección de estilos dinámicos desde bibliotecas de CSS-in-JS {/*injecting-dynamic-styles-from-css-in-js-libraries*/} |
| @@ -4,13 +4,13 @@ title: useInsertionEffect | |||
|
|
|||
| <Pitfall> | |||
|
|
|||
| `useInsertionEffect` is aimed at CSS-in-JS library authors. Unless you are working on a CSS-in-JS library and need a place to inject the styles, you probably want [`useEffect`](/reference/react/useEffect) or [`useLayoutEffect`](/reference/react/useLayoutEffect) instead. | |||
| `useInsertionEffect` está orientado a autores de librerías CSS-in-JS. A menos que estés trabajando en una librería CSS-in-JS y necesites un lugar donde inyectar los estilos, probablemente busques [`useEffect`](/reference/react/useEffect) o [`useLayoutEffect`](/reference/react/useLayoutEffect) en su lugar. | |||
There was a problem hiding this comment.
- En esta traducción solemos usar «biblioteca» como traducción de «library».
- Creo que no habría daño en traducir CSS-in-JS a CSS-en-JS.
(Esto aplica a otras partes del documento en que se repiten estas situaciones).
| * `setup`: The function with your Effect's logic. Your setup function may also optionally return a *cleanup* function. Before your component is first 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 one last time. | ||
|
|
||
| * **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 algorithm. If you don't specify the dependencies at all, your Effect will re-run after every re-render of the component. | ||
| * `setup`: La función con la lógica de tu Effect. Tu función setup puede opcionalmente devolver una función de *limpieza*. Antes de que tu componente sea añadido primero al DOM, React ejecutará tu función setup. Después de cada re-renderizado con dependencias modificadas, React ejecutará primero la función de limpieza (si es que la habías incluido) con los valores antiguos y entonces ejecutará tu función setup con los nuevos valores. Antes de que tu componente sea eliminado del DOM, React ejecutará tu función de limpieza una última vez. |
There was a problem hiding this comment.
Effect lo hemos traducido como Efecto en las demás páginas, respetando el uso de mayúsculas del original.
| * `setup`: La función con la lógica de tu Effect. Tu función setup puede opcionalmente devolver una función de *limpieza*. Antes de que tu componente sea añadido primero al DOM, React ejecutará tu función setup. Después de cada re-renderizado con dependencias modificadas, React ejecutará primero la función de limpieza (si es que la habías incluido) con los valores antiguos y entonces ejecutará tu función setup con los nuevos valores. Antes de que tu componente sea eliminado del DOM, React ejecutará tu función de limpieza una última vez. | |
| * `setup`: La función con la lógica de tu Effect. Tu función setup puede opcionalmente devolver una función de *limpieza*. Antes de que tu componente sea añadido primero al DOM, React ejecutará tu función setup. Después de cada re-renderizado con dependencias modificadas, React ejecutará primero la función de limpieza (si es que la habías incluido) con los valores antiguos y entonces ejecutará tu función setup con los nuevos valores. Antes de que tu componente sea eliminado del DOM, React ejecutará tu función de limpieza una última vez. |
Size Changes📦 Next.js Bundle AnalysisThis analysis was generated by the next.js bundle analysis action 🤖 🎉 Global Bundle Size Decreased
DetailsThe global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster. Any third party scripts you have added directly to your app using the If you want further insight into what is behind the changes, give @next/bundle-analyzer a try! Three Pages Changed SizeThe following pages changed size from the code in this PR compared to its base branch:
DetailsOnly the gzipped size is provided here based on an expert tip. First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If Any third party scripts you have added directly to your app using the Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 10% or more, there will be a red status indicator applied, indicating that special attention should be given to this. |
|
¡Hola, @carlos-garcia-dev! ¿Podrías confirmarme que ya no estás trabajando en tus PRs para asignárselos a alguien más que haga los cambios necesarios para terminarlos? |
|
¡Hola @carburo! Perdona, que me surgieron unos imprevistos y se retrasó. Este fin de semana subo las dos PR con todos los cambios que comentaste. ¡Muchas gracias por mencionarme! |
|
¡Gracias por la respuesta! Cuando vayas a subir los cambios ten en cuenta que además del feedback la rama tiene conflictos que se necesitan resolver. ¡Saludos! |
¡Hola @carburo! He actualizado e incluido los cambios que comentabas. ¡Muchas gracias por tus comentarios tan detallados! Estoy pendiente por si hay que hacer nuevas correcciones.
|
@carlos-garcia-dev ¡Gracias por atender a la revisión! Sin embargo aún permanecen los conflictos con nuestra rama |
¡Hola! He creado una nueva rama para la traducción que hice para la página del hook
useInsertionEffect.Me dí cuenta que no la había creado en la PR #634 y sólo la había traducido.
Lamento el trabajo extra. Si hay que hacer alguna modificación más, no dudéis en decirme.