You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
*Hooks*let you use different React features from your components. You can either use the built-in Hooks or combine them to build your own. This page lists all built-in Hooks in React.
7
+
Gli *Hooks*ti consentono di utilizzare diverse funzionalità di React attraverso i tuoi componenti. Puoi utilizzare gli Hooks integrati oppure puoi combinarli per crearne uno tuo. Questa pagina pagina elenca tutti gli Hooks già integrati in React.
8
8
9
9
</Intro>
10
10
11
11
---
12
12
13
13
## State Hooks {/*state-hooks*/}
14
14
15
-
*State*lets a component ["remember" information like user input.](/learn/state-a-components-memory)For example, a form component can use state to store the input value, while an image gallery component can use state to store the selected image index.
15
+
Lo *State*consente a un componente di ["ricordare" informazioni come l'input di un utente.](/learn/state-a-components-memory)Ad esempio, un componente form può utilizzare lo State per memorizzare il valore di un input, mentre un componente galleria di immagini può utilizzare lo State per memorizzare l'indice dell'immagine attualmente selezionata.
16
16
17
-
To add state to a component, use one of these Hooks:
17
+
Per aggiungere lo State ad un componente, utilizza uno di questi Hooks:
18
18
19
-
*[`useState`](/reference/react/useState)declares a state variable that you can update directly.
20
-
*[`useReducer`](/reference/react/useReducer)declares a state variable with the update logic inside a [reducer function.](/learn/extracting-state-logic-into-a-reducer)
19
+
*[`useState`](/reference/react/useState)dichiara una variabile di stato che puoi aggiornare direttamente.
20
+
*[`useReducer`](/reference/react/useReducer)dichiara una variabile di stato con la logica di aggiornamento all'interno di una [funzione reducer.](/learn/extracting-state-logic-into-a-reducer)
21
21
22
22
```js
23
23
functionImageGallery() {
@@ -29,9 +29,9 @@ function ImageGallery() {
29
29
30
30
## Context Hooks {/*context-hooks*/}
31
31
32
-
*Context* lets a component [receive information from distant parents without passing it as props.](/learn/passing-props-to-a-component) For example, your app's top-level component can pass the current UI theme to all components below, no matter how deep.
32
+
Il *Context* consente a un componente di [ricevere informazioni da elementi genitori lontani senza che vengano passate tramite props.](/learn/passing-props-to-a-component) Ad esempio, il componente di primo livello della tua app può passare il tema dell'interfaccia utente corrente a tutti i componenti sottostanti, indipendentemente dalla profondità.
33
33
34
-
* [`useContext`](/reference/react/useContext) reads and subscribes to a context.
34
+
* [`useContext`](/reference/react/useContext) legge ed aderisce a un contesto.
35
35
36
36
```js
37
37
functionButton() {
@@ -43,10 +43,10 @@ function Button() {
43
43
44
44
## Ref Hooks {/*ref-hooks*/}
45
45
46
-
*Refs* let a component [hold some information that isn't used for rendering,](/learn/referencing-values-with-refs) like a DOM node or a timeout ID. Unlike with state, updating a ref does not re-render your component. Refs are an "escape hatch" from the React paradigm. They are useful when you need to work with non-React systems, such as the built-in browser APIs.
46
+
I *Ref* consentono a un componente di [conservare alcune informazioni che non vengono usate per il rendering,](/learn/referencing-values-with-refs) come un nodo DOM o un timeout ID. A differenza dello State, l'aggiornamento di un Ref non esegue nuovamente il rendering del componente. I Ref sono una "via di fuga" dal paradigma React. Sono utili quando devi lavorare con sistemi non React, come le API del browser integrate.
47
47
48
-
* [`useRef`](/reference/react/useRef) declares a ref. You can hold any value in it, but most often it's used to hold a DOM node.
49
-
* [`useImperativeHandle`](/reference/react/useImperativeHandle) lets you customize the ref exposed by your component. This is rarely used.
48
+
* [`useRef`](/reference/react/useRef) dichiara un Ref. Puoi assegnare qualsiasi valore, ma molto spesso viene utilizzato per contenere un nodo DOM.
49
+
* [`useImperativeHandle`](/reference/react/useImperativeHandle) ti consente di personalizzare il Ref esposto dal tuo componente. Questo viene usato raramente.
50
50
51
51
```js
52
52
functionForm() {
@@ -58,9 +58,9 @@ function Form() {
58
58
59
59
## Effect Hooks {/*effect-hooks*/}
60
60
61
-
*Effects* let a component [connect to and synchronize with external systems.](/learn/synchronizing-with-effects) This includes dealing with network, browser DOM, animations, widgets written using a different UI library, and other non-React code.
61
+
Gli *Effects* consentono a un componente di [connettersi e sincronizzarsi con sistemi esterni.](/learn/synchronizing-with-effects) Ciò include la gestione della rete, il DOM del browser, animazioni, widgets scritti utilizzando diverse librerie di UI e per altro codice non-React.
62
62
63
-
* [`useEffect`](/reference/react/useEffect) connects a component to an external system.
63
+
* [`useEffect`](/reference/react/useEffect) collega un componente a un sistema esterno.
64
64
65
65
```js
66
66
functionChatRoom({ roomId }) {
@@ -72,23 +72,23 @@ function ChatRoom({ roomId }) {
72
72
// ...
73
73
```
74
74
75
-
Effects are an "escape hatch" from the React paradigm. Don't use Effects to orchestrate the data flow of your application. If you're not interacting with an external system, [you might not need an Effect.](/learn/you-might-not-need-an-effect)
75
+
Gli Effects sono una "via di fuga" dal paradigma React. Non utilizzare gli Effects per orchestrare il flusso di dati della tua applicazione. Se non stai interagendo con un sistema esterno, [potresti non aver bisogno di un Effect.](/learn/you-might-not-need-an-effect)
76
76
77
-
There are two rarely used variations of `useEffect` with differences in timing:
77
+
Ci sono due varianti di `useEffect`, usate raramente e con differenze di temporizzazione:
78
78
79
-
* [`useLayoutEffect`](/reference/react/useLayoutEffect) fires before the browser repaints the screen. You can measure layout here.
80
-
* [`useInsertionEffect`](/reference/react/useInsertionEffect) fires before React makes changes to the DOM. Libraries can insert dynamic CSS here.
79
+
* [`useLayoutEffect`](/reference/react/useLayoutEffect) si attiva prima che il browser ridisegni lo schermo. Qui Puoi misurare il layout.
80
+
* [`useInsertionEffect`](/reference/react/useInsertionEffect) attiva prima che React apporti modifiche al DOM. Le librerie possono inserire CSS dinamici qui.
81
81
82
82
---
83
83
84
84
## Performance Hooks {/*performance-hooks*/}
85
85
86
-
A common way to optimize re-rendering performance is to skip unnecessary work. For example, you can tell React to reuse a cached calculation or to skip a re-render if the data has not changed since the previous render.
86
+
Un metodo comune per ottimizzare le prestazioni del nuovo rendering consiste nell'evitare il lavoro non necessario. Ad esempio, puoi dire a React di riutilizzare un calcolo memorizzato nella cache o di saltare un nuovo rendering se i dati non sono cambiati dal rendering precedente.
87
87
88
-
To skip calculations and unnecessary re-rendering, use one of these Hooks:
88
+
Per saltare i calcoli e il re-rendering non necessario, usa uno di questi Hooks:
89
89
90
-
- [`useMemo`](/reference/react/useMemo) lets you cache the result of an expensive calculation.
91
-
- [`useCallback`](/reference/react/useCallback) lets you cache a function definition before passing it down to an optimized component.
90
+
- [`useMemo`](/reference/react/useMemo) permette di salvare nella cache il risultato di un calcolo dispendioso.
91
+
- [`useCallback`](/reference/react/useCallback) permette di conservare nella cache la definizione di una funzione prima di passarla a un componente ottimizzato.
Sometimes, you can't skip re-rendering because the screen actually needs to update. In that case, you can improve performance by separating blocking updates that must be synchronous (like typing into an input) from non-blocking updates which don't need to block the user interface (like updating a chart).
100
+
A volte, non puoi saltare il nuovo rendering perché lo schermo deve effettivamente essere aggiornato. In questo caso, puoi migliorare le prestazioni separando gli aggiornamenti bloccanti che devono essere sincroni (come la digitazione in un input) dagli aggiornamenti non bloccanti che non devono bloccare l'interfaccia utente (come l'aggiornamento di un grafico).
101
101
102
-
To prioritize rendering, use one of these Hooks:
102
+
Per dare la priorità al rendering, utilizza uno di questi Hooks:
103
103
104
-
- [`useTransition`](/reference/react/useTransition) lets you mark a state transition as non-blocking and allow other updates to interrupt it.
105
-
- [`useDeferredValue`](/reference/react/useDeferredValue) lets you defer updating a non-critical part of the UI and let other parts update first.
104
+
- [`useTransition`](/reference/react/useTransition) consente di contrassegnare una transizione di stato come non bloccante e di permettere ad altri aggiornamenti di interromperla.
105
+
- [`useDeferredValue`](/reference/react/useDeferredValue) consente di posticipare l'aggiornamento di una parte non critica dell'interfaccia utente e di permettere l'aggiornamento delle altre parti per prime.
106
106
107
107
---
108
108
109
-
## Other Hooks {/*other-hooks*/}
109
+
## Altri Hooks {/*other-hooks*/}
110
110
111
-
These Hooks are mostly useful to library authors and aren't commonly used in the application code.
111
+
Questi Hooks sono per lo più utili agli autori di librerie e non sono comunemente usati nel codice dell'applicazione.
112
112
113
-
- [`useDebugValue`](/reference/react/useDebugValue) lets you customize the label React DevTools displays for your custom Hook.
114
-
- [`useId`](/reference/react/useId) lets a component associate a unique ID with itself. Typically used with accessibility APIs.
115
-
- [`useSyncExternalStore`](/reference/react/useSyncExternalStore) lets a component subscribe to an external store.
113
+
- [`useDebugValue`](/reference/react/useDebugValue) consente di personalizzare l'etichetta visualizzata da React DevTools per il tuo Hook personalizzato.
114
+
- [`useId`](/reference/react/useId) consente a un componente di associare un ID univoco a se stesso. Generalmente utilizzato con le API di accessibilità.
115
+
- [`useSyncExternalStore`](/reference/react/useSyncExternalStore) consente a un componente di iscriversi a un archivio esterno.
116
116
117
117
---
118
118
119
-
## Your own Hooks {/*your-own-hooks*/}
119
+
## I tuoi Hooks {/*your-own-hooks*/}
120
120
121
-
You can also [define your own custom Hooks](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component) as JavaScript functions.
121
+
Puoi anche [definire i tuoi Hooks personalizzati](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component) come funzioni JavaScript.
0 commit comments