Check my React understanding - Day 1

check-my-understanding-1.md

Do I understand...

1. What is state?

2. What is setState() and what does it do?

3. What happens when I call setState()?

4. How do the values inside the state get rendered?

5. Why does the lifecycle matter?

6. Why do we have to use className instead of class and backgroundColor instead of background-color?

Answers below

---

Do I understand...

1. What is state?

• An object
• that contains information that controls the output of render, i.e., state influences how does the UI look

2. What is setState() and what does it do?

• setState() is a function that updates the state

3. What happens when I call setState()?

• render() gets called, which results in a change in UI if there is a difference between the current and previous state

4. How do the values inside the state get rendered?

• The value gets passed into the JSX elements like so,
  <div> { this.state.value } </div>

5. Why does the lifecycle matter?

• We want to control what happens when each component renders, updates, re-renders and disappears.

• Lifecycle:

  1. Creation (birth of an element)
  2. Mounting (displaying of the element)
  3. Updating (change in the state of the element)
  4. Unmounting (removal of the element)

• To learn more about the various lifecycle methods available, see here: https://programmingwithmosh.com/javascript/react-lifecycle-methods/

6. Why do we have to use className instead of class and backgroundColor instead of background-color?

• Because JSX is still Javascript, so we need to use camelCase
• HOWEVER, our components should use PascalCase, i.e., the first letter of each word should start be capitalised