Knowledge check: React Context
11. What of the below scenarios are valid for choosing context instead of local state? Select all that apply.
- The current selection of a group of radio buttons.
- The visibility state of an alert that overlays into the whole application.
- The locale or language that should be used in the application’s text.
12. What is the problem of props drilling? Select all that apply.
- Components having to pass down props all the way to the children that need to consume them.
- Components not knowing the local state of their parents.
- Components receiving more props than they should.
13. When creating a new piece of application state, what is the bare minimum of React APIs you would need to define it?
- Context and local state.
- Context and props.
- Context, props and local state.
14. What happens when the value prop of the Context Provider changes?
- The whole component tree under the Context Provider gets re-rendered.
- The Context Provider component gets recreated.
- All the consumer components re-render with the updated value.
15. What happens when you wrap a component with the React.memo API, such as React.memo(Component). Select all that apply.
- The component never gets updated no matter if there was a change in its local state or the props it receives.
- React provides a performance optimization.
- Whether the component should re-render could be determined by some custom logic that uses the previous props and the current props.
Module quiz: Components
16. When using a key for your list items, what’s the best general choice?
- Using an ID generated by a library that guarantees no duplications.
- Using an ID coming from the data, that points to the database ID.
- Using an index.
17. Imagine you have a specification for rendering the following list item:
< li>Ice cream - 200 cal< /li>, where the name and the number of calories are coming as dynamic data. Select all the options that would correctly render the desired output:
- <li>{Ice cream – 200 {item.cal}}</li>
- <li>{item.name} – {item.cal} cal</li>
- <li>{`${item.name} – ${item.cal} cal`}</li>
18. Let’s suppose you have a list of two items and a new item is added to the list. From the point of view of the React diffing algorithm, what’s the most optimal position for the new element added? Select all that apply
- The new element added at the beginning.
- The new element added in the 2nd position, in between the existing list items.
- The new element added at the end.
Shuffle Q/A 2
19. What are controlled components?
- A set of components whose internal state is controlled by the DOM.
- A set of components whose internal state is controlled by React.
- A set of components whose value is determined by React refs.
20. What are the features you can still achieve with uncontrolled components? Select all that apply
- One time value retrieval on submit using a React ref.
- Validation on submit.
- Conditionally disabling the submit button.