Lesson 3: State Management

Question 1

When is it appropriate to use a Stateless Functional Component?

Answer 1

If a component is only using a render method to display content, then it can be converted into a Stateless Functional Component.

Question 2

If the <ingredientlist></ingredientlist> Component in the following code is a Stateless Functional Component, how would you access the items prop inside the Component?

<ingredientlist></ingredientlist>

Answer 2

props.items

Stateless Functional Components do away with the thiskeyword.

Question 3

How would you refactor the following code as a Stateless Functional Component?

class Email extends React.Component {

render() {

return (

{this.props.text}

);

}

}

Answer 3

const Email = (props) => (

{props.text}

);

Question 4

Why do you never change state by writing this.state.whatever = so_and_so; and what substitute does React offer us?

Answer 4

You never want to change state manually using this.state because then React will not know what the previous state was. It’s overwriting it.

React gives us setState() to update state. Using the functional setState gives us access to the previous state.

Question 5

What’s the difference between the functional and object setState methods?

Answer 5

Object is simpler and easier to read, but functional gives us access to the previous state.

Question 6

Which is true about setting state in components?

1. Whenever setState() is called, the component also calls render() with the new state
2. State updates can be merged by passing in an object to setState()
3. Updating state directly is ideal when you want to re-render a component (i.e., preferring this.state.message = ‘Hi there’; rather than this.setState({ message: ‘Hi there’ });
4. State updates can be asynchronous (i.e., setState() can accept a function with the previous state as its first argument)
5. setState() should be called within the component’s render() method

Answer 6

1, 2, and 4 are true.

At the end of the day, your UI is just a function of your state. Being able to leverage React’s automatic re-renders when resetting state can give your app’s users a truly dynamic experience.