1. Best key choice for list items

❌ Using an ID generated by a library
✔️ Using a stable ID coming from the data (DB ID)
❌ Using an index

---

2. Correct ways to render: <li>Ice cream - 200 cal</li>

❌ <li>{Ice cream - 200 {item.cal}}</li>
✔️ <li>{item.name} - {item.cal} cal</li>
✔️ <li>{${item.name} – ${item.cal} cal}</li>

---

3. Best place to add a new element for React diffing efficiency

❌ Beginning
❌ Middle
✔️ End

---

4. Controlled components

❌ Controlled by the DOM
✔️ Controlled by React
❌ Controlled by refs

---

5. What can you achieve with uncontrolled components?

✔️ One-time value retrieval on submit using a ref
✔️ Validation on submit
❌ Conditionally disabling the submit button (requires state → controlled component)

---

6. Argument passed to useContext

✔️ The Context object returned by createContext
❌ The global React state
❌ The Context.Provider component

---

7. Re-render sequence

❌ App → ComponentA → ComponentB → ComponentC
❌ App → ComponentB → ComponentC
✔️ App only

Reason: ComponentA is wrapped in React.memo() and receives no props, so it does NOT re-render.

---

8. Areas where props and state overlap

✔️ Both are plain JS objects
✔️ Both trigger a render when changed
✔️ Both are deterministic

---

9. Hook to preserve object reference for context value

❌ useCallback
✔️ useMemo
❌ useRef

---

10. Examples suitable for React context

✔️ Application theme
✔️ Locale preferences
✔️ Current authenticated user
❌ Value of a text input (should be local state)

---

📘 Summary Table

---