1. Question 1 – Which principle helps you identify errors well?

❌ Unidirectional data flow
❌ Customization
❌ Composition
✅ Reusability

Explanation:
Reusability encourages writing small, predictable components that are easier to test and debug, helping identify errors quickly.

---

2. Question 2 – Purpose of higher-order function component composition

❌ Arranging components in a hierarchy
❌ Transferring data between components
❌ Passing data from a parent to child
✅ Adding features without rewriting code

Explanation:
Higher-order components (HOCs) wrap another component to add functionality without modifying the original component.

---

3. Question 3 – Benefit of hierarchy principle in React

✅ It provides modular design using parent–child components.
❌ It enables efficient data passing.
❌ It allows easy manipulation of states.
❌ It enables manipulation by virtual DOM.

Explanation:
Hierarchy organizes UI into a clean parent-child structure, improving modularity and readability.

---

4. Question 4 – Which hook function updates the user’s name?

❌ setButtonClicked(“Marie Torres”)
❌ updateName(“Marie Torres”)
❌ useState(“Marie Torres”)
✅ setName(“Marie Torres”)

Explanation:
setName is the state-setter function returned by useState; it’s used to update state values.

---

5. Question 5 – Best UX approach for collapsible sections

❌ Create a separate component with a toggle button.
❌ Use setName to update information.
✅ Use useState for rendering conditional information.
❌ Display the information alongside other content.

Explanation:
useState allows showing/hiding content dynamically, giving better control over screen clutter.

---

6. Question 6 – Which phase initializes a functional component?

❌ Updating phase
❌ Unmounting phase
✅ Mounting phase
❌ Error-handling phase

Explanation:
The mounting phase is when the component is created and first added to the DOM.

---

7. Question 7 – Purpose of empty dependency array in useEffect

❌ Responds to user actions and state changes
❌ Triggers a re-render when data changes
✅ Fetches the data only once when the component mounts
❌ Declares and initializes state variables

Explanation:
useEffect(..., []) runs only on the initial render, perfect for one-time API calls.

---

8. Question 8 – Method that modifies original array

❌ map
❌ filter
✅ splice
❌ slice

Explanation:
splice() mutates the original array by adding/removing elements.

---

9. Question 9 – Provides additional data about an HTML element

❌ Props
✅ Attributes
❌ Nodes
❌ Events

Explanation:
HTML attributes store additional information (e.g., id, class, data-*).

---

10. Question 10 – Key benefit of React’s virtual DOM

✅ Re-rendering only the updated component
❌ Cross-platform compatibility
❌ Simple development
❌ Debugging and testing

Explanation:
Virtual DOM enables React to update only changed parts, improving efficiency.

---

🧾 Summary Table

---