random TS notes

• For objects to be implicitly returned, wrap in paraentheses

const implicit = () => {
  value: 1;
};
implicit(); // undefined

const implicit = () => ({ value: 1 });
implicit(); // { value: 1 }

• React throws a hissy fit if you use .map() without specifying a key property
• DO NOT DIRECTLY MODIFY STATE. ALWAYS MODIFY THROUGH THE SETTER FUNCTION

---

React Forms

• They seem to have some secret internal state that gets changed everytime it gets interacted with? Not sure how this is happening
• Note: controlled components are preferred since it ensures HTML rendered has parody with react state
• Always need:
  1. A name field that matches the formData (for controlled components)
  2. a onChange handler that changes the react state
  3. value/checked/whatever way that form element stores data (should be assigned to react state for controlled components)
  4. Other misc stuff (place holder, id, etc)
• Another note: buttons are type submit by default in react <form/> elements

---

Infinite loops

useEffect can cause infinite loops when querying:

const component = () => {
  const [starWarsData, setStarWarsData] = React.useState({});
  fetch("https://swapi.dev/api/people/1")
    .then((res) => res.json())
    .then((data) => setStarWarsData(data));

  return <p>{starWarsData}</p>;
};

1. Component is called, fetch runs
2. setStarWarsData is called in .then
3. Component data is updated, component is called
4. repeat

Can avoid this by using useEffect!