In this article i am gone to share Coursera Course: Advanced React by Meta All Weeks Quiz Answers with you | Advanced React Coursera Quiz Answers

Enroll Link: Advanced React

Advanced React Coursera Quiz Answers

---

 

Week 1 Quiz Answers

Knowledge check: Rendering Lists in React Quiz Answer

Question 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?

Answer

[  {    
    title: 'Chocolate Cake',    
    description: 'Chocolate cake is a cake flavored with melted chocolate',    
    calories: 500,    kCal: 0.5,  
}]

 

Question 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.

Question 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.

Question 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=”myKey” id={todo.id} />
))}

 

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

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

 

Knowledge check: Forms in React Quiz Answer

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

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

Question 2)
What are some of the features of controlled components? Select all that apply

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

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

• 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.
• 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.

Question 4)
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.

Question 5)
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

Question 1)
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.

Question 2)
What is the problem of props drilling? Select all that apply.

• Components receiving more props than they should.
• Components not knowing the local state of their parents.
• Components having to pass down props all the way to the children that need to consume them.

Question 3)
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.

Question 4)
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.

Question 5)
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.
• Whether the component should re-render could be determined by some custom logic that uses the previous props and the current props.
• React provides a performance optimization.

 

Visit this link:  Module quiz: Components Quiz Answers

 

---

 

Week 2 Quiz Answers

Knowledge check: Getting started with hooks

Question 1)
Imagine you have to log into the console a state variable, whenever the variable gets updated. What’s the best place to perform such operation in a React component?

• Before the return statement of the component
• the useEffect hook

Question 2)
The useEffect hook accepts…

• a callback function and an array
• two callback functions
• a callback function and an object

Question 3)
What is a pure React component?

• A component that doesn’t have any side effects
• A component that has at least one side effect

Question 4)
What is the name of the second argument of the useEffect() call?

• the dependency array
• the callback function
• the destructured object
• the dependencies object

Question 5)
This code is incomplete:

React.useEffect(()=> {
console.log('The value of the toggle variable is',toggle)
}, [])

 

You need to update the dependecies array so that the useEffect hook is invoked whenever the toggle variable updates. Choose the correct solution from the choices below.

• The dependencies array should receive the toggle variable as its single member.
• The dependencies array should be removed.
• The dependencies array should be updated to: [{toggle}].
• The dependencies array should be replaced with: {toggle}.

 

Knowledge check: Rules of Hooks and Fetching Data with Hooks Quiz Answers

Question 1)
True or false: You should not call hooks inside loops.

• True
• False

Question 2)
True or false: You should call hooks inside if statements.

• True
• False

Question 3)
True or false: You should call hooks inside nested functions.

• True
• False

Question 4)
You are allowed to:

• only call a single effect hook inside a component.
• call multiple state hooks and effect hooks inside a component
• only call a single state hook inside a component

Question 5)
True or false: You don’t have to always make multiple hook calls in the same sequence.

• True
• False

 

Knowledge check: Advanced Hooks Quiz Answer

Question 1)
True or false: useReducer is a reducer function that takes in the initial state and an action and returns the new state.

• True
• False

Question 2)
True or false: The useState hook is best suited for complex state logic or when the next state depends on the previous one.

• True
• False

Question 3)
A common scenario for using the useRef hook is to…

• …focus the cursor into an input field.
• …control a component’s state.
• …handle side effects.
• …memorize expensive operations.

Question 4)
True or false: Building your own Hooks lets you extract component logic into reusable functions

• True
• False

Question 5)
The useState hook gives us a reliable way to…

• … deal with state updates in React components.
• … deal with state updates in React prompts.
• … deal with state updates in React dependency arrays.
• … deal with state updates in React useEffect invocations.

 

Visit this link:  Module quiz: React Hooks and Custom Hooks Quiz Answers

 

---

 

Week 3 Quiz Answers

Knowledge check: JSX Quiz Answer

Question 1)
Let’s suppose you have the below JSX that gets returned from a component, what would be the equivalent object representation (Element) that React will create internally?

<button className='button-primary'>
<div>
Submit
</div>
</button>

 

Answer:

{
type: "button",
props: {
className: "button-primary",
children: {
type: "div",
props: {
children: "Submit",
}
},

 

Question 2)
What is the concept of component specialization?

• A component defined as a special case of another more generic component.
• A component that is designed to fulfill one specific purpose and nothing else.
• A component that doesn’t know its children ahead of time and acts as a generic box.

Question 3)
You would like to clone a React element by using the React.cloneElement API, where the particular element has the below structure:

const buttonElement = {
type: SubmitButton,
props: {
color: "green",
children: "Submit!",
},
};

What would be the value of the variable output when using the API with the following parameters?

Answer:

const output = React.cloneElement(buttonElement, {disabled: true, color: “blue” });

{
type: SubmitButton,
props: {
color: "blue",
children: "Submit!",
disabled: true,
},
};

 

Question 4)
Imagine you are using the spread operator in the below component as follows:

const props = { title: “tiramisu”, cal: 400 };
const element = <Component title=”cake” {…props} cal={500} />;

What would be the value of element.props?

• { title: “cake”, cal: 500 }
• { title: “tiramisu”, cal: 400 }
• { title: “cake”, cal: 400 }
• { title: “tiramisu”, cal: 500 }

Question 5)
Amongst the below expressions, select all that will not render anything on the screen when being used in JSX.

• <div>{null}</div>
• <div>{false}</div>
• <div>{(() => true)()}</div>
• <div>{undefined}</div>

 

Knowledge check: Reusing behavior Quiz Answer

Question 1)
When dealing with cross-cutting data in your React applications, what are some of the problems of using a custom hook to encapsulate that logic? Select all that apply.

• There are no problems at all with hooks, being the best suited tool for the job.
• The fact that you would have to alter the implementation of each component that needs that specific data.
• That it turns a stateless component into a stateful one.

Question 2)
Here, you can find the APIs of some higher-order components that have been already implemented. Amongst all the options, which ones present an invalid signature that doesn’t follow the convention? Select all that apply.

• withSubscription(() => getData())(Component)
• withSubscription(() => getData(), Component)
• withSubscription(Component, options)

Question 3)
What are some of the best practices to follow when implementing the higher-order component pattern? Select all that apply.

• Passed unrelated props through to the Wrapped Component.
• Mutate the original component
• Always use HOCs and create your enhanced components inside other components.
• Maximize composability.

Question 4)
What are some of the differences between higher-order components and render props? Select all that apply.

• Render props provide the new data as a function parameter, whereas components wrapped with an HOC get the new data as a new prop.
• They inject the new props in the component to be enhanced in a different way.
• Higher-order components modify the original implementation of the component, whereas the Render Props pattern doesn’t.

Question 5)
True or false. A component with a render prop as renderer can do anything a higher-order component can do.

• True
• False

 

Knowledge check: Automated testing Quiz Answer

Question 1)
Why is automated testing important? Select all that apply.

• It saves time to development teams.
• It reduces human error.
• It offers a faster feedback cycle, bringing faster validation and helping the development team to detect problems or bugs early.

Question 2)
What are some of the best practices when writing your automated tests? Select all that apply

• Your tests need to be focused on the implementation details of your components.
• They should be maintainable in the long run.
• They should resemble the way your software is used.

Question 3)
Imagine you have a component that renders both an input tag and a label tag with the exact text Comments:. Inside your test, you have the below piece of code:

const element = screen.getByLabelText(/Comments:/);
What would be the type of element returned by getByLabelText?

• The input element
• The document object
• The label element

Question 4)
In a particular test that’s been written for a form component, you encounter the below two lines of code. What kind of data would the handleSubmit variable represent?

const handleSubmit = jest.fn();
render(<FeedbackForm onSubmit={handleSubmit} />);

• A copy of the real function that’s used in the parent component that renders the FeedbackForm.
• A specific function jest provides to handle form submissions
• A mock function to track how is called by external code and thus explore the arguments passed in.

Question 5)
What are some of the benefits of Continuous Integration (CI)? Select all that apply.

• Find bugs earlier and fix them faster.
• Improved developer productivity.
• Faster manual integrations.
• Deliver working software more often.

 

Visit this link:  Module quiz: JSX and Testing Quiz Answers

 

---

 

Week 4 Quiz Answers

Visit this link:  Final graded quiz: Advanced React Quiz Answers

 

Visit this link:  Peer-graded Assignment: Review a peer’s portfolio Solution