qns: address user feedback (#4)

Addressed quiz questions' user feedback.
Each commit is labelled with an `id` pointing to the User Feedback
google sheet.

Author: tahachm

questions/explain-the-composition-pattern-in-react/en-US.mdx

@@ -82,6 +82,6 @@ function App() {
 
 ## Further reading
 
-- [React documentation on composition vs inheritance](https://reactjs.org/docs/composition-vs-inheritance.html)
+- [Composition in React](https://krasimir.gitbooks.io/react-in-patterns/content/chapter-04/)
 - [React patterns: Composition](https://reactpatterns.com/#composition)
 - [Medium article on React composition](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0)

questions/how-does-virtual-dom-in-react-work-what-are-its-benefits-and-downsides/en-US.mdx

@@ -24,24 +24,19 @@ The virtual DOM is a concept where a virtual representation of the UI is kept in
 ### Code example
 
 ```jsx
-class MyComponent extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { count: 0 };
-  }
-
-  increment = () => {
-    this.setState({ count: this.state.count + 1 });
-  };
-
-  render() {
-    return (
-      <div>
-        <p>{this.state.count}</p>
-        <button onClick={this.increment}>Increment</button>
-      </div>
-    );
-  }
+import { useState } from 'react';
+
+function MyComponent() {
+  const [count, setCount] = useState(0);
+
+  const increment = () => setCount(count + 1);
+
+  return (
+    <div>
+      <p>{count}</p>
+      <button onClick={increment}>Increment</button>
+    </div>
+  );
 }
 ```
 
@@ -75,6 +70,5 @@ In this example, when the button is clicked, the state changes, triggering a new
 
 ## Further reading
 
-- [React documentation on reconciliation](https://reactjs.org/docs/reconciliation.html)
-- [Understanding the virtual DOM](https://medium.com/@deathmood/how-to-write-your-own-virtual-dom-ee74acc13060)
-- [React performance optimization](https://reactjs.org/docs/optimizing-performance.html)
+- [React Docs on Reconciliation](https://react.dev/learn/render-and-commit)
+- [What is the Virtual DOM in React?](https://www.freecodecamp.org/news/what-is-the-virtual-dom-in-react/)

questions/what-are-react-fragments-used-for/en-US.mdx

@@ -59,11 +59,13 @@ If you need to add keys to the elements within a fragment, you must use the full
 
 ```jsx
 return (
-  <React.Fragment>
+  <>
     {items.map((item) => (
-      <ChildComponent key={item.id} />
+      <React.Fragment key={item.id}>
+        <ChildComponent />
+      </React.Fragment>
     ))}
-  </React.Fragment>
+  </>
 );
 ```
 

questions/what-is-the-useref-hook-in-react-and-when-should-it-be-used/en-US.mdx

@@ -108,4 +108,4 @@ In this example, `prevCountRef` is used to keep a reference to the previous valu
 
 - [React documentation on `useRef`](https://reactjs.org/docs/hooks-reference.html#useref)
 - [Using the `useRef` hook](https://reactjs.org/docs/hooks-faq.html#is-there-something-like-instance-variables)
-- [Common use cases for `useRef`](https://blog.logrocket.com/how-to-use-react-useref-hook/)
+- [Common use cases for `useRef`](https://dev.to/kirubelkinfe/mastering-useref-in-react-with-typescript-4-different-use-cases-for-useref-2a87)