React Training Orlando Notes

2.md

useState

A component has a stack, and adds hooks based like:

const Component = () => {
  const [value, setValue] = React.useState(5)
}

const stack = [
  { type: 'useState', value: 5, updater: fn }
]

This is why hooks need to be in the same order always (no conditionals).

const Component = () => {
  const [value, setValue] = React.useState(5)
  const [error, setError] = React.useState(null)
}

const stack = [
  { type: 'useState', value: 5, updater: fn },
  { type: 'useState', value: null, updater: fn },
]

By default React does a "shallow" compare to figure out if it needs to rerender.

If you give it objects, it will always rerender, because the objects are different.

Setting state is more or less "asynchronus". You might think of it as:

1. set state
2. console log state is still the "previous" state
3. render happens