chore: format all files

Author: yangshun

questions/explain-one-way-data-flow-of-react-and-its-benefits/en-US.mdx

@@ -76,4 +76,3 @@ One-way data flow can lead to better performance because it reduces the complexi
 - [React documentation on components and props](https://reactjs.org/docs/components-and-props.html)
 - [React documentation on state and lifecycle](https://reactjs.org/docs/state-and-lifecycle.html)
 - [React documentation on lifting state up](https://reactjs.org/docs/lifting-state-up.html)
-

questions/explain-server-side-rendering-of-react-applications-and-its-benefits/en-US.mdx

@@ -67,4 +67,3 @@ export default Home;
 - [Next.js Documentation](https://nextjs.org/docs)
 - [React Server Components](https://reactjs.org/docs/react-server.html)
 - [Server-side rendering in React](https://reactjs.org/docs/react-dom-server.html)
-

questions/explain-static-generation-of-react-applications-and-its-benefits/en-US.mdx

@@ -79,4 +79,3 @@ In this example, the `getStaticProps` function fetches data at build time, and t
 - [Next.js documentation on static generation](https://nextjs.org/docs/basic-features/pages#static-generation-recommended)
 - [React official documentation](https://reactjs.org/docs/getting-started.html)
 - [Static site generators comparison](https://www.staticgen.com/)
-

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

@@ -17,11 +17,7 @@ function WelcomeDialog() {
 }
 
 function Dialog(props) {
-  return (
-    <div className="dialog">
-      {props.children}
-    </div>
-  );
+  return <div className="dialog">{props.children}</div>;
 }
 ```
 
@@ -41,11 +37,7 @@ One common way to use composition is by passing components as children to other
 
 ```jsx
 function Dialog(props) {
-  return (
-    <div className="dialog">
-      {props.children}
-    </div>
-  );
+  return <div className="dialog">{props.children}</div>;
 }
 
 function WelcomeDialog() {
@@ -66,23 +58,14 @@ Another way to achieve composition is by passing components as props. This allow
 function SplitPane(props) {
   return (
     <div className="split-pane">
-      <div className="split-pane-left">
-        {props.left}
-      </div>
-      <div className="split-pane-right">
-        {props.right}
-      </div>
+      <div className="split-pane-left">{props.left}</div>
+      <div className="split-pane-right">{props.right}</div>
     </div>
   );
 }
 
 function App() {
-  return (
-    <SplitPane
-      left={<Contacts />}
-      right={<Chat />}
-    />
-  );
+  return <SplitPane left={<Contacts />} right={<Chat />} />;
 }
 ```
 
@@ -102,4 +85,3 @@ function App() {
 - [React documentation on composition vs inheritance](https://reactjs.org/docs/composition-vs-inheritance.html)
 - [React patterns: Composition](https://reactpatterns.com/#composition)
 - [Medium article on React composition](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0)
-

questions/explain-the-presentational-vs-container-component-pattern-in-react/en-US.mdx

@@ -26,9 +26,7 @@ Presentational components are primarily concerned with the UI. They receive data
 
 ```jsx
 const Button = ({ onClick, label }) => (
-  <button onClick={onClick}>
-    {label}
-  </button>
+  <button onClick={onClick}>{label}</button>
 );
 ```
 
@@ -62,12 +60,7 @@ class ButtonContainer extends Component {
   };
 
   render() {
-    return (
-      <Button
-        onClick={this.handleClick}
-        label="Click me"
-      />
-    );
+    return <Button onClick={this.handleClick} label="Click me" />;
   }
 }
 
@@ -89,4 +82,3 @@ export default connect(null, mapDispatchToProps)(ButtonContainer);
 - [React documentation on components and props](https://reactjs.org/docs/components-and-props.html)
 - [Dan Abramov's article on presentational and container components](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0)
 - [Redux documentation on presentational and container components](https://redux.js.org/basics/usage-with-react#presentational-and-container-components)
-

questions/explain-what-happens-when-setstate-is-called-in-react/en-US.mdx

@@ -56,4 +56,3 @@ this.setState({ count: this.state.count + 1 }, () => {
 - [React documentation on setState](https://reactjs.org/docs/react-component.html#setstate)
 - [Understanding setState in React](https://medium.com/@baphemot/understanding-react-setstate-a4640451865b)
 - [React's setState explained](https://daveceddia.com/where-fetch-data-componentwillmount-vs-componentdidmount/)
-

questions/explain-what-react-hydration-is/en-US.mdx

@@ -28,30 +28,28 @@ Here's a simple example to illustrate the concept:
 
 1. **Server-side rendering**: The server generates the following HTML:
 
-    ```html
-    <div id="root">
-      <button>Click me</button>
-    </div>
-    ```
+   ```html
+   <div id="root">
+     <button>Click me</button>
+   </div>
+   ```
 
 2. **Client-side hydration**: When the HTML is sent to the client, React hydrates it with the following code:
 
-    ```jsx
-    import React from 'react';
-    import ReactDOM from 'react-dom';
+   ```jsx
+   import React from 'react';
+   import ReactDOM from 'react-dom';
 
-    function App() {
-      const handleClick = () => {
-        alert('Button clicked!');
-      };
+   function App() {
+     const handleClick = () => {
+       alert('Button clicked!');
+     };
 
-      return (
-        <button onClick={handleClick}>Click me</button>
-      );
-    }
+     return <button onClick={handleClick}>Click me</button>;
+   }
 
-    ReactDOM.hydrate(<App />, document.getElementById('root'));
-    ```
+   ReactDOM.hydrate(<App />, document.getElementById('root'));
+   ```
 
 In this example, the server sends the static HTML with a button to the client. React then hydrates the button by attaching the `onClick` event listener, making it interactive.
 
@@ -71,4 +69,3 @@ In this example, the server sends the static HTML with a button to the client. R
 - [React documentation on hydration](https://reactjs.org/docs/react-dom.html#hydrate)
 - [Server-side rendering in React](https://reactjs.org/docs/react-dom-server.html)
 - [Next.js documentation on hydration](https://nextjs.org/docs/basic-features/pages#hydration)
-

questions/how-do-you-debug-react-applications/en-US.mdx

@@ -97,4 +97,3 @@ function MyComponent() {
 - [Error boundaries in React](https://reactjs.org/docs/error-boundaries.html)
 - [Using the Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools)
 - [Debugging JavaScript](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Debugging)
-

questions/how-do-you-decide-between-using-react-state-context-and-external-state-managers/en-US.mdx

@@ -162,4 +162,3 @@ function App() {
 - [React documentation on context](https://reactjs.org/docs/context.html)
 - [Redux documentation](https://redux.js.org/)
 - [MobX documentation](https://mobx.js.org/README.html)
-

questions/how-do-you-handle-asynchronous-data-loading-in-react-applications/en-US.mdx

@@ -160,4 +160,3 @@ function DataFetchingComponent() {
 - [Using the Effect Hook](https://reactjs.org/docs/hooks-effect.html)
 - [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
 - [Handling errors in async functions](https://javascript.info/async-await#error-handling)
-