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)
-

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

@@ -61,19 +61,17 @@ import { initReactI18next } from 'react-i18next';
 import en from './locales/en.json';
 import fr from './locales/fr.json';
 
-i18n
-  .use(initReactI18next)
-  .init({
-    resources: {
-      en: { translation: en },
-      fr: { translation: fr },
-    },
-    lng: 'en', // default language
-    fallbackLng: 'en',
-    interpolation: {
-      escapeValue: false, // react already safes from xss
-    },
-  });
+i18n.use(initReactI18next).init({
+  resources: {
+    en: { translation: en },
+    fr: { translation: fr },
+  },
+  lng: 'en', // default language
+  fallbackLng: 'en',
+  interpolation: {
+    escapeValue: false, // react already safes from xss
+  },
+});
 
 export default i18n;
 ```
@@ -94,7 +92,7 @@ ReactDOM.render(
   <I18nextProvider i18n={i18n}>
     <App />
   </I18nextProvider>,
-  document.getElementById('root')
+  document.getElementById('root'),
 );
 ```
 
@@ -147,4 +145,3 @@ export default LanguageSwitcher;
 - [react-i18next documentation](https://react.i18next.com/)
 - [i18next documentation](https://www.i18next.com/)
 - [react-intl documentation](https://formatjs.io/docs/react-intl/)
-

questions/how-do-you-reset-a-components-state-in-react/en-US.mdx

@@ -117,4 +117,3 @@ export default MyComponent;
 - [React useState Hook](https://reactjs.org/docs/hooks-state.html)
 - [React Component State](https://reactjs.org/docs/state-and-lifecycle.html)
 - [React Functional Components](https://reactjs.org/docs/components-and-props.html#function-and-class-components)
-

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

@@ -88,4 +88,3 @@ test('matches the snapshot', () => {
 - [React Testing Library documentation](https://testing-library.com/docs/react-testing-library/intro)
 - [Cypress documentation](https://docs.cypress.io/guides/overview/why-cypress)
 - [Snapshot testing with Jest](https://jestjs.io/docs/snapshot-testing)
-

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

@@ -78,4 +78,3 @@ In this example, when the button is clicked, the state changes, triggering a new
 - [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)
-

questions/what-are-error-boundaries-in-react-for/en-US.mdx

@@ -39,7 +39,7 @@ class ErrorBoundary extends Component {
 
   componentDidCatch(error, errorInfo) {
     // You can also log the error to an error reporting service
-    console.error("Error caught by ErrorBoundary: ", error, errorInfo);
+    console.error('Error caught by ErrorBoundary: ', error, errorInfo);
   }
 
   render() {
@@ -48,7 +48,7 @@ class ErrorBoundary extends Component {
       return <h1>Something went wrong.</h1>;
     }
 
-    return this.props.children; 
+    return this.props.children;
   }
 }
 
@@ -85,4 +85,3 @@ Error boundaries have some limitations:
 - [React documentation on error boundaries](https://reactjs.org/docs/error-boundaries.html)
 - [Handling errors in React](https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html)
 - [Error boundaries in React 16](https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html)
-

questions/what-are-higher-order-components-in-react/en-US.mdx

@@ -85,4 +85,3 @@ In this example, `withExtraProps` is an HOC that adds an `extraProp` to `MyCompo
 - [React documentation on higher order components](https://reactjs.org/docs/higher-order-components.html)
 - [Understanding higher order components in React](https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e)
 - [HOCs vs Render Props vs Hooks](https://blog.logrocket.com/hooks-vs-render-props-vs-hocs/)
-

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

@@ -33,25 +33,25 @@ There are two ways to use React Fragments:
 
 1. **Shorthand syntax**: This is the most concise way to use fragments. It uses empty tags `<>...</>`.
 
-    ```jsx
-    return (
-      <>
-        <ChildComponent1 />
-        <ChildComponent2 />
-      </>
-    );
-    ```
+   ```jsx
+   return (
+     <>
+       <ChildComponent1 />
+       <ChildComponent2 />
+     </>
+   );
+   ```
 
 2. **Full syntax**: This uses `React.Fragment` and can be useful if you need to add keys to the fragment.
 
-    ```jsx
-    return (
-      <React.Fragment>
-        <ChildComponent1 />
-        <ChildComponent2 />
-      </React.Fragment>
-    );
-    ```
+   ```jsx
+   return (
+     <React.Fragment>
+       <ChildComponent1 />
+       <ChildComponent2 />
+     </React.Fragment>
+   );
+   ```
 
 ### Adding keys to fragments
 
@@ -60,7 +60,7 @@ If you need to add keys to the elements within a fragment, you must use the full
 ```jsx
 return (
   <React.Fragment>
-    {items.map(item => (
+    {items.map((item) => (
       <ChildComponent key={item.id} />
     ))}
   </React.Fragment>
@@ -78,4 +78,3 @@ return (
 - [React Fragments - Official Documentation](https://reactjs.org/docs/fragments.html)
 - [React Fragments - A Complete Guide](https://www.freecodecamp.org/news/react-fragments-complete-guide/)
 - [When to use React Fragments](https://blog.logrocket.com/when-to-use-react-fragments/)
-

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

@@ -28,10 +28,8 @@ const Modal = ({ isOpen, children }) => {
   if (!isOpen) return null;
 
   return ReactDOM.createPortal(
-    <div className="modal">
-      {children}
-    </div>,
-    document.getElementById('modal-root')
+    <div className="modal">{children}</div>,
+    document.getElementById('modal-root'),
   );
 };
 ```
@@ -55,7 +53,7 @@ const Tooltip = ({ text, targetRef }) => {
     <div className="tooltip" style={tooltipStyle}>
       {text}
     </div>,
-    document.body
+    document.body,
   );
 };
 ```
@@ -72,10 +70,8 @@ const Dropdown = ({ isOpen, children }) => {
   if (!isOpen) return null;
 
   return ReactDOM.createPortal(
-    <div className="dropdown">
-      {children}
-    </div>,
-    document.body
+    <div className="dropdown">{children}</div>,
+    document.body,
   );
 };
 ```
@@ -99,4 +95,3 @@ ReactDOM.createPortal(child, container);
 - [React Portals documentation](https://reactjs.org/docs/portals.html)
 - [Building a modal with React Portals](https://blog.logrocket.com/building-a-modal-with-react-portals/)
 - [Using React Portals for better accessibility](https://www.smashingmagazine.com/2020/03/react-portals-accessibility/)
-