```
-With this change, as soon as you start typing, the stale result list gets slightly dimmed until the new result list loads. You can also add a CSS transition to delay dimming so that it feels gradual, like in the example below:
+Con questa modifica, non appena inizi a digitare, l'elenco obsoleto dei risultati viene leggermente attenuato finché il nuovo elenco non si carica. Puoi anche aggiungere una transizione CSS per ritardare l'attenuazione in modo che risulti graduale, come nell'esempio sotto:
@@ -496,9 +503,9 @@ export default function SearchResults({ query }) {
```
```js src/data.js hidden
-// Note: the way you would do data fetching depends on
-// the framework that you use together with Suspense.
-// Normally, the caching logic would be inside a framework.
+// Nota: il modo in cui fai data fetching dipende dal
+// framework che usi insieme a Suspense.
+// Di solito, la logica di caching sarebbe dentro un framework.
let cache = new Map();
@@ -518,7 +525,7 @@ async function getData(url) {
}
async function getSearchResults(query) {
- // Add a fake delay to make waiting noticeable.
+ // Aggiunge un ritardo fittizio per evidenziare l'attesa.
await new Promise(resolve => {
setTimeout(resolve, 1000);
});
@@ -596,11 +603,11 @@ input { margin: 10px; }
---
-### Deferring re-rendering for a part of the UI {/*deferring-re-rendering-for-a-part-of-the-ui*/}
+### Differire la ri-renderizzazione di una parte dell'UI {/*deferring-re-rendering-for-a-part-of-the-ui*/}
-You can also apply `useDeferredValue` as a performance optimization. It is useful when a part of your UI is slow to re-render, there's no easy way to optimize it, and you want to prevent it from blocking the rest of the UI.
+Puoi anche usare `useDeferredValue` come ottimizzazione delle prestazioni. È utile quando una parte dell'UI è lenta da ri-renderizzare, non c'è un modo semplice per ottimizzarla, e vuoi evitare che blocchi il resto dell'UI.
-Imagine you have a text field and a component (like a chart or a long list) that re-renders on every keystroke:
+Immagina di avere un campo di testo e un componente (come un grafico o un elenco lungo) che si ri-renderizza a ogni pressione di tasto:
```js
function App() {
@@ -614,7 +621,7 @@ function App() {
}
```
-First, optimize `SlowList` to skip re-rendering when its props are the same. To do this, [wrap it in `memo`:](/reference/react/memo#skipping-re-rendering-when-props-are-unchanged)
+Per prima cosa, ottimizza `SlowList` per saltare la ri-renderizzazione quando le sue props sono le stesse. Per farlo, [avvolgilo in `memo`:](/reference/react/memo#skipping-re-rendering-when-props-are-unchanged)
```js {1,3}
const SlowList = memo(function SlowList({ text }) {
@@ -622,9 +629,9 @@ const SlowList = memo(function SlowList({ text }) {
});
```
-However, this only helps if the `SlowList` props are *the same* as during the previous render. The problem you're facing now is that it's slow when they're *different,* and when you actually need to show different visual output.
+Tuttavia, questo aiuta solo se le props di `SlowList` sono *le stesse* rispetto alla renderizzazione precedente. Il problema che affronti ora è che è lento quando sono *diverse*, e quando devi effettivamente mostrare un output visivo diverso.
-Concretely, the main performance problem is that whenever you type into the input, the `SlowList` receives new props, and re-rendering its entire tree makes the typing feel janky. In this case, `useDeferredValue` lets you prioritize updating the input (which must be fast) over updating the result list (which is allowed to be slower):
+In concreto, il problema principale di prestazioni è che ogni volta che digiti nell'input, `SlowList` riceve nuove props, e ri-renderizzare l'intero albero rende la digitazione a scatti. In questo caso, `useDeferredValue` ti permette di dare priorità all'aggiornamento dell'input (che deve essere veloce) rispetto all'aggiornamento dell'elenco dei risultati (che può essere più lento):
```js {3,7}
function App() {
@@ -639,13 +646,13 @@ function App() {
}
```
-This does not make re-rendering of the `SlowList` faster. However, it tells React that re-rendering the list can be deprioritized so that it doesn't block the keystrokes. The list will "lag behind" the input and then "catch up". Like before, React will attempt to update the list as soon as possible, but will not block the user from typing.
+Questo non rende più veloce la ri-renderizzazione di `SlowList`. Tuttavia, dice a React che la ri-renderizzazione dell'elenco può essere deprioritizzata in modo da non bloccare le pressioni di tasto. L'elenco resterà "indietro" rispetto all'input e poi "recupererà". Come prima, React proverà ad aggiornare l'elenco il prima possibile, ma non bloccherà l'utente dalla digitazione.
-
+
-#### Deferred re-rendering of the list {/*deferred-re-rendering-of-the-list*/}
+#### Ri-renderizzazione differita dell'elenco {/*deferred-re-rendering-of-the-list*/}
-In this example, each item in the `SlowList` component is **artificially slowed down** so that you can see how `useDeferredValue` lets you keep the input responsive. Type into the input and notice that typing feels snappy while the list "lags behind" it.
+In questo esempio, ogni elemento del componente `SlowList` è **artificialmente rallentato** così puoi vedere come `useDeferredValue` ti permette di mantenere l'input reattivo. Digita nell'input e nota come la digitazione resta fluida mentre l'elenco resta "indietro".
@@ -669,7 +676,7 @@ export default function App() {
import { memo } from 'react';
const SlowList = memo(function SlowList({ text }) {
- // Log once. The actual slowdown is inside SlowItem.
+ // Log una volta. Il rallentamento effettivo è dentro SlowItem.
console.log('[ARTIFICIALLY SLOW] Rendering 250 ');
let items = [];
@@ -686,7 +693,7 @@ const SlowList = memo(function SlowList({ text }) {
function SlowItem({ text }) {
let startTime = performance.now();
while (performance.now() - startTime < 1) {
- // Do nothing for 1 ms per item to emulate extremely slow code
+ // Non fa nulla per 1 ms per elemento per emulare codice estremamente lento
}
return (
@@ -721,11 +728,11 @@ export default SlowList;
-#### Unoptimized re-rendering of the list {/*unoptimized-re-rendering-of-the-list*/}
+#### Ri-renderizzazione non ottimizzata dell'elenco {/*unoptimized-re-rendering-of-the-list*/}
-In this example, each item in the `SlowList` component is **artificially slowed down**, but there is no `useDeferredValue`.
+In questo esempio, ogni elemento del componente `SlowList` è **artificialmente rallentato**, ma non c'è `useDeferredValue`.
-Notice how typing into the input feels very janky. This is because without `useDeferredValue`, each keystroke forces the entire list to re-render immediately in a non-interruptible way.
+Nota come digitare nell'input risulta molto a scatti. Questo perché senza `useDeferredValue`, ogni pressione di tasto costringe l'intero elenco a ri-renderizzarsi subito in modo non interrompibile.
@@ -748,7 +755,7 @@ export default function App() {
import { memo } from 'react';
const SlowList = memo(function SlowList({ text }) {
- // Log once. The actual slowdown is inside SlowItem.
+ // Log una volta. Il rallentamento effettivo è dentro SlowItem.
console.log('[ARTIFICIALLY SLOW] Rendering 250 ');
let items = [];
@@ -765,7 +772,7 @@ const SlowList = memo(function SlowList({ text }) {
function SlowItem({ text }) {
let startTime = performance.now();
while (performance.now() - startTime < 1) {
- // Do nothing for 1 ms per item to emulate extremely slow code
+ // Non fa nulla per 1 ms per elemento per emulare codice estremamente lento
}
return (
@@ -804,25 +811,25 @@ export default SlowList;
-This optimization requires `SlowList` to be wrapped in [`memo`.](/reference/react/memo) This is because whenever the `text` changes, React needs to be able to re-render the parent component quickly. During that re-render, `deferredText` still has its previous value, so `SlowList` is able to skip re-rendering (its props have not changed). Without [`memo`,](/reference/react/memo) it would have to re-render anyway, defeating the point of the optimization.
+Questa ottimizzazione richiede che `SlowList` sia avvolto in [`memo`.](/reference/react/memo) Questo perché ogni volta che `text` cambia, React deve poter ri-renderizzare rapidamente il componente genitore. Durante quella ri-renderizzazione, `deferredText` ha ancora il valore precedente, quindi `SlowList` può saltare la ri-renderizzazione (le sue props non sono cambiate). Senza [`memo`,](/reference/react/memo) dovrebbe ri-renderizzarsi comunque, vanificando lo scopo dell'ottimizzazione.
-#### How is deferring a value different from debouncing and throttling? {/*how-is-deferring-a-value-different-from-debouncing-and-throttling*/}
+#### In che modo differire un valore è diverso da debouncing e throttling? {/*how-is-deferring-a-value-different-from-debouncing-and-throttling*/}
-There are two common optimization techniques you might have used before in this scenario:
+Ci sono due tecniche di ottimizzazione comuni che potresti aver usato prima in questo scenario:
-- *Debouncing* means you'd wait for the user to stop typing (e.g. for a second) before updating the list.
-- *Throttling* means you'd update the list every once in a while (e.g. at most once a second).
+- *Debouncing* significa che aspetteresti che l'utente smetta di digitare (per esempio per un secondo) prima di aggiornare l'elenco.
+- *Throttling* significa che aggiorneresti l'elenco ogni tanto (per esempio al massimo una volta al secondo).
-While these techniques are helpful in some cases, `useDeferredValue` is better suited to optimizing rendering because it is deeply integrated with React itself and adapts to the user's device.
+Se queste tecniche sono utili in alcuni casi, `useDeferredValue` è più adatto a ottimizzare la renderizzazione perché è profondamente integrato con React e si adatta al dispositivo dell'utente.
-Unlike debouncing or throttling, it doesn't require choosing any fixed delay. If the user's device is fast (e.g. powerful laptop), the deferred re-render would happen almost immediately and wouldn't be noticeable. If the user's device is slow, the list would "lag behind" the input proportionally to how slow the device is.
+A differenza di debouncing o throttling, non richiede di scegliere un ritardo fisso. Se il dispositivo dell'utente è veloce (per esempio un laptop potente), la ri-renderizzazione differita avverrebbe quasi subito e non sarebbe percettibile. Se il dispositivo dell'utente è lento, l'elenco resterà "indietro" rispetto all'input in proporzione a quanto è lento il dispositivo.
-Also, unlike with debouncing or throttling, deferred re-renders done by `useDeferredValue` are interruptible by default. This means that if React is in the middle of re-rendering a large list, but the user makes another keystroke, React will abandon that re-render, handle the keystroke, and then start rendering in the background again. By contrast, debouncing and throttling still produce a janky experience because they're *blocking:* they merely postpone the moment when rendering blocks the keystroke.
+Inoltre, a differenza di debouncing o throttling, le ri-renderizzazioni differite fatte da `useDeferredValue` sono interrompibili per impostazione predefinita. Questo significa che se React è nel mezzo della ri-renderizzazione di un elenco grande, ma l'utente preme un altro tasto, React abbandonerà quella ri-renderizzazione, gestirà la pressione di tasto, e poi ricomincerà a renderizzare in background. Al contrario, debouncing e throttling producono comunque un'esperienza a scatti perché sono *bloccanti:* posticipano solo il momento in cui la renderizzazione blocca la pressione di tasto.
-If the work you're optimizing doesn't happen during rendering, debouncing and throttling are still useful. For example, they can let you fire fewer network requests. You can also use these techniques together.
+Se il lavoro che stai ottimizzando non avviene durante la renderizzazione, debouncing e throttling restano utili. Per esempio, possono farti effettuare meno richieste di rete. Puoi anche usare queste tecniche insieme.