[React 18+] Tips for new version of React

[reboottime]

General tips

• Group related state

  • Bad Practice:

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

  • Good practice

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

  • The why: you won’t forget to always keep them in sync

• Best practice on organizating state

  • flat state

[reboottime]

State Structure Tips

• Group related state

  • Bad Practice:

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

  • Good practice

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

  • The why: you won’t forget to always keep them in sync

• Avoid contradictions in state: In short, Prefer to use state machine

• Avoid redundant state:

  • Bad:

     const [firstName, setFirstName] = useState("");
     const [lastName, setLastName] = useState("");
     const [fullName, setFullName] = useState('');

  • Good:

      const [firstName, setFirstName] = useState("");
      const [lastName, setLastName] = useState("");
      
      const fullName = `${firstName} ${lastName}`

• Avoid duplication in state: ( do not store the same information at two places)

  • Bad: copy cuts an object and store its whole content
  • Good: store the identifier

• Avoid deeply nested state: example

  • ben:
    • code maintainbility
    • performance benefits: reduce memory usage