𝗥𝗲𝗮𝗰𝘁 𝗝𝘀 𝗨𝘀𝗲𝗦𝘁𝗮𝘁𝗲 𝗔𝗻𝘁𝗶𝗽𝗮𝘁𝘁𝗲𝗿𝗻𝘀

Scrivere codice React pulito richiede una gestione intelligente dello stato. Pattern di stato errati portano a bug e codice complesso.

Evita questi quattro errori comuni:

  1. Raggruppa i dati correlati

Non creare hook di stato separati per valori che cambiano insieme.

Invece di:

  • const [x, setX] = useState(0);
  • const [y, setY] = useState(0);

Usa un oggetto:

  • const [position, setPosition] = useState({ x: 0, y: 0 });

Questo mantiene i tuoi aggiornamenti puliti e organizzati.

  1. Evita stati in conflitto

Quando più booleani monitorano lo stesso processo, crei dei bug.

Invece di avere:

  • isSubmitting
  • isSubmit

Usa una singola stringa di stato:

  • status: 'TYPING'
  • status: 'SUBMITTING'
  • status: 'SUBMITTED'

Deriva la logica della tua UI da questa singola fonte di verità.

  1. Rimuovi lo stato ridondante

Se puoi calcolare un valore durante il render, non inserirlo nello stato.

Non memorizzare:

  • firstName
  • lastName
  • fullName

Memorizza solo il nome e il cognome. Calcola il nome completo al volo:

  • const fullName = firstName + " " + lastName;

Inoltre, non memorizzare mai le prop nello stato. Lo stato si inizializza solo una volta. Se la prop cambia, lo stato non si aggiornerà. Usa la prop direttamente.

  1. Smetti di duplicare i dati

Non memorizzare gli stessi dati in due stati diversi.

Se hai una lista di task e un task selezionato, non memorizzare l'intero oggetto task in entrambi i posti. Questo rende difficili gli aggiornamenti.

Invece:

  • Memorizza la lista dei task.
  • Memorizza solo il selectedTaskId.
  • Trova il task dalla lista usando quell'ID durante il render.

Questo assicura che il task selezionato corrisponda sempre ai dati più recenti della tua lista.

Fonte: https://dev.to/kkr0423/reactjs-usestate-antipatterns-58i9