From 97bc61763e37453eb12ced79471718aa68115a4f Mon Sep 17 00:00:00 2001
From: tahachm <97478750+tahachm@users.noreply.github.com>
Date: Fri, 18 Apr 2025 19:11:50 +0500
Subject: [PATCH 1/4] fix: 0378c6eb-331b-4161-8cff-e64b45cab3c5

---
 questions/what-are-react-fragments-used-for/en-US.mdx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/questions/what-are-react-fragments-used-for/en-US.mdx b/questions/what-are-react-fragments-used-for/en-US.mdx
index 72c7fe7..353bead 100644
--- a/questions/what-are-react-fragments-used-for/en-US.mdx
+++ b/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>
+  </>
 );
 ```
 

From df02ad2d1834f777a66fa68fc06bc6091a223c72 Mon Sep 17 00:00:00 2001
From: tahachm <97478750+tahachm@users.noreply.github.com>
Date: Fri, 18 Apr 2025 19:28:25 +0500
Subject: [PATCH 2/4] fix: d05aeb46-48f6-4126-9e91-ecd16babe287

---
 .../en-US.mdx                                                   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/questions/what-is-the-useref-hook-in-react-and-when-should-it-be-used/en-US.mdx b/questions/what-is-the-useref-hook-in-react-and-when-should-it-be-used/en-US.mdx
index cc4930f..4f5539f 100644
--- a/questions/what-is-the-useref-hook-in-react-and-when-should-it-be-used/en-US.mdx
+++ b/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)

From 103fb9971e1a349b4e40817d181c1e711918a240 Mon Sep 17 00:00:00 2001
From: tahachm <97478750+tahachm@users.noreply.github.com>
Date: Fri, 18 Apr 2025 21:22:47 +0500
Subject: [PATCH 3/4] fix: eb9fc00c-35ab-424e-9fbc-c5329814a7b8

---
 questions/explain-the-composition-pattern-in-react/en-US.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/questions/explain-the-composition-pattern-in-react/en-US.mdx b/questions/explain-the-composition-pattern-in-react/en-US.mdx
index e6b6526..6cb3aed 100644
--- a/questions/explain-the-composition-pattern-in-react/en-US.mdx
+++ b/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)

From e7fd7545e675ce172c8946c074f52c82a0fc4dee Mon Sep 17 00:00:00 2001
From: tahachm <97478750+tahachm@users.noreply.github.com>
Date: Fri, 18 Apr 2025 21:48:21 +0500
Subject: [PATCH 4/4] fix: 3a08e1e2-fbe9-49c8-b260-6e61cae14553

---
 .../en-US.mdx                                 | 36 ++++++++-----------
 1 file changed, 15 insertions(+), 21 deletions(-)

diff --git a/questions/how-does-virtual-dom-in-react-work-what-are-its-benefits-and-downsides/en-US.mdx b/questions/how-does-virtual-dom-in-react-work-what-are-its-benefits-and-downsides/en-US.mdx
index 5c90e45..380a824 100644
--- a/questions/how-does-virtual-dom-in-react-work-what-are-its-benefits-and-downsides/en-US.mdx
+++ b/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/)