Merge branch 'main' into yuhang/update-react-links

Author: xquisite0

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

@@ -82,5 +82,5 @@ function App() {
 
 ## Further reading
 
-- [React patterns: Composition](https://reactpatterns.com/#composition)
+- [Composition in React](https://krasimir.gitbooks.io/react-in-patterns/content/chapter-04/)
 - [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://react.dev/learn/preserving-and-resetting-state)
-- [Understanding the virtual DOM](https://medium.com/@deathmood/how-to-write-your-own-virtual-dom-ee74acc13060)
-- [React memo performance optimization](https://react.dev/reference/react/memo#skipping-re-rendering-when-props-are-unchanged)
+- [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>
+  </>
 );
 ```