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

Het schrijven van schone React-code vereist slimme state management. Slechte state-patronen leiden tot bugs en complexe code.

Vermijd deze vier veelvoorkomende fouten:

  1. Groepeer gerelateerde gegevens

Maak geen aparte state hooks aan voor waarden die tegelijkertijd veranderen.

In plaats van:

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

Gebruik een object:

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

Dit houdt je updates schoon en georganiseerd.

  1. Vermijd conflicterende states

Wanneer meerdere booleans hetzelfde proces bijhouden, creëer je bugs.

In plaats van het hebben van:

  • isSubmitting
  • isSubmit

Gebruik een enkele status-string:

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

Leid je UI-logica af van deze enkele bron van waarheid.

  1. Verwijder overbodige state

Als je een waarde tijdens het renderen kunt berekenen, zet deze dan niet in de state.

Sla het volgende niet op:

  • firstName
  • lastName
  • fullName

Sla alleen de voor- en achternaam op. Bereken de volledige naam on the fly:

  • const fullName = firstName + " " + lastName;

Sla ook nooit props op in de state. State wordt slechts één keer geïnitialiseerd. Als je prop verandert, wordt de state niet bijgewerkt. Gebruik de prop direct.

  1. Stop met het dupliceren van gegevens

Sla niet dezelfde gegevens op in twee verschillende states.

Als je een lijst met taken hebt en een geselecteerde taak, sla dan niet het volledige taakobject op beide plaatsen op. Dit maakt updates moeilijk.

In plaats daarvan:

  • Sla de lijst met taken op.
  • Sla alleen de selectedTaskId op.
  • Zoek de taak in de lijst met behulp van die ID tijdens het renderen.

Dit zorgt ervoor dat je geselecteerde taak altijd overeenkomt met de nieuwste gegevens in je lijst.

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