- Worked from 10:45pm to 12:15am
- Made it through Part 1: Lesson 3
Lesson 3: State Management
In this lesson, I learned more about state management in React. There are three main parts of state management:
- With props
- With function components
- With controlled components
Section 3.1: Passing Data with Props
Section 3.2-3.6: Functional Components
From Tyler McGinnis’s article, I learned that there are three ways to describe React components:
- Stateless Components
- Stateless Functional Components
- Functional Components
Tyler makes a really great point at the end of his article. I couldn’t say it better myself.
…clearly understanding the vocabulary for technical topics will make learning and teaching said topics much easier.
It truly is important to know the proper terminology. It prevents confusion.
In contrast to props, states are mutable. In React, your UI is just a function of your state. Check out this nifty GIF from the video:
Stateless function components are really useful if all you need to do is render some UI. Less code and less complexity. For example, instead of writing
we can write,
PRO-TIP! Avoid defining a component’s initial state with
props. This is an error-prone anti-pattern since state will only be initialized with
props when the component is first created. If props were to update, the current state will not change unless we “refresh” the component.
Don’t do this:
One possible solution is to write a separate handler to update your state using
this.setState(). Here’s a short article that explains a bit more about why setting initial state with props is a bad idea.
Section 3.7: Controlled Components
Nothing new here except learning what the proper term is for these components and the benefits:
- Instant input validation
- Ability to conditionally disable/enable buttons
- Enforce input formats
More about it here.
Object destructuring introduced with ES6 helps keep code clean. Instead of using
this.props.value everywhere, we can create new variables with
React UI is just a function of mutable states!