advanced react coursera week 1 quiz answers

Knowledge check: Rendering Lists in React

1. Imagine you have an array with one object that represents a dessert. You would like to apply some transformation to the item to output a different structure using the map function as per the code below. What would be the value of the newDesserts variable?

const desserts = [
{
title: 'Chocolate Cake',
description: 'Chocolate cake is a cake flavored with melted chocolate',
calories: 500,
}
];

const newDesserts = desserts.map((dessert) => {
return {
title: dessert.title.toUpperCase(),
...dessert,
kCal: dessert.calories / 1000,
};
});

  • [
    {
    title: ‘CHOCOLATE CAKE’,
    description: ‘Chocolate cake is a cake flavored with melted chocolate’,
    kCal: 0.5,
    }
    ]
  • [
    {
    title: ‘Chocolate Cake’,
    description: ‘Chocolate cake is a cake flavored with melted chocolate’,
    calories: 500,
    kCal: 0.5,
    }
    ]
  • [
    {
    title: ‘CHOCOLATE CAKE’,
    description: ‘Chocolate cake is a cake flavored with melted chocolate’,
    calories: 500,
    kCal: 0.5,
    }
    ]

2. How do you access dynamic data inside the JSX from the render function?

  • Using local state in the component.
  • Using component props.
  • Wrapping the variable in question with curly braces.

3. What could be a potential problem of using a randomiser function that generates an integer number from 0 to 10 as a key for your list items, having a list of only eight items? Select all that apply

  • The randomiser function does not entirely guarantee that the keys it generates will be different per item and a collision could happen, having two items with the same integer as keys.
  • There is no persistence of the keys generated since the moment the component re-renders the keys will vary and that could cause unexpected UI changes.
  • The randomiser function is a potential performance bottleneck since it has to run every re-render and it’s an unnecessary computation.

4. The todos array contains a list of todo objects, where each object has an id property that is unique. Which of the following code snippets will throw a React warning when opening up the browser console? Select all that apply

  • {todos.map((todo, index) => (
    <ToDo id={todo.id} />
    ))}
  • {todos.map((todo, index) => (
    <ToDo key={index} id={todo.id} />
    ))}
  • {todos.map((todo, index) => (
    <ToDo key={todo.id} id={todo.id} />
    ))}
  • {todos.map((todo, index) => (
    <ToDo key=”myKey” id={todo.id} />
    ))}

5. What are the potential problems of using indexes as keys?

  • An index is not guaranteed to be unique.
  • If the order of items may change, that can negatively impact performance and may cause issues with component state.
  • The index is not persisted and will change the moment the component re-renders.

Knowledge check: Forms in React

6. What of the next input types doesn’t have a controlled version when they are used in React?

  • <textarea />
  • <input type=”file” />
  • <input type=”text” />

7. What are some of the features of controlled components? Select all that apply

  • Enforcing a specific input format.
  • Validating all values in the client side when a submission occurs in the form, before calling the server endpoint.
  • Conditionally disabling the submit button.

8. How do you get the value of an input when its state is handled by the DOM (Uncontrolled)? Select all that apply.

  • Using local state and initializing it to an empty string. Then, reading the input value from the event object when the submission happens and finally setting the local state with that value.
  • Using a ref via useRef hook, assigning it to the input and then reading the input value when the submission happens via ref.current.value.
  • Using a combination of useEffect and useRef hooks, where a ref is used on the uncontrolled input and then its value can be read on useEffect after a re-render cycle happens.

9. What happens when you click on the submit button in the below code snippet?

< form onSubmit={() => alert("Submitting")}>
< input type="text" value={text} onChange={e =>
setText(e.target.value)} / >
< input type="button" value="Submit" / >
< /form>

  • The onSubmit callback is executed and an alert is shown with the text “Submitting”.
  • An error is thrown.
  • Nothing happens when the button is clicked.

10. What is missing in the below code for the select component to work properly?

< select onChange={handleChange}>
< option value="grapefruit">Grapefruit< /option>
< option value="lime">Lime< /option>
< option value="coconut">Coconut< /option>
< option value="mango">Mango< /option>
< /select>

  • Each option tag should be accompanied by a label tag.
  • Each option tag should have an onChange handler.
  • The select tag is missing a value prop.

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.

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.

21. When creating an API for context consumers via useContext, what’s the argument you have to provide to the useContext call?

  • The Context.Provider component.
  • The Context object obtained via the createContext call.
  • The React state that defines the global state to be injected.

22. Imagine the below component structure, where all components ComponentA, ComponentB and ComponentC are simple presentational components that hold no props or state:

const App = () => {
return(
< AppContext.Provider>
< ComponentA />
< /AppContext.Provider>
);
};

const ComponentA = React.memo(() => < ComponentB />);
const ComponentB = () => < ComponentC / >;
const ComponentC = () => null;

If the App component re-rendered for whatever reason, what would be the sequence of component re-renders that would take place?

  • App -> ComponentA -> ComponentB -> ComponentC.
  • App -> ComponentB -> ComponentC
  • App

23. Even though props and state are inherently different, what are areas where they overlap? Select all that apply.

  • Both props and state are plain JS objects.
  • Both props and state changes trigger a render update.
  • Both props and state are deterministic, meaning that your component always generates the same output for the same combination of props and state.

24. When defining a JavaScript object as a piece of local React state that will be injected as context, what is the specific React hook that allows you to keep the same object reference in memory and prevent unnecessary re-renders if the object itself hasn’t changed any values?

  • useCallback
  • useMemo
  • useRef

25. What are some possible examples of application features that are well suited to be defined as React context? Select all that apply

  • The application theme.
  • Locale preferences.
  • The current authenticated user.
  • The value of a text input.

Leave a Reply