[all] submodules sync

apps/web/src/__generated__/questions/quiz/list.en-US.json

@@ -4751,7 +4751,7 @@
   {
     "info": {
       "excerpt": null,
-      "title": "What do you think of AMD vs CommonJS?",
+      "title": "What do you think of CommonJS vs ESM?",
       "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-do-you-think-of-amd-vs-commonjs/en-US.mdx"
     },
     "metadata": {
@@ -7605,7 +7605,7 @@
   {
     "info": {
       "excerpt": null,
-      "title": "Explain what happens when `setState` is called in React",
+      "title": "Explain what happens when the `useState` setter function is called in React",
       "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/explain-what-happens-when-setstate-is-called-in-react/en-US.mdx"
     },
     "metadata": {

apps/web/src/__generated__/questions/quiz/list.pt-BR.json

@@ -7605,7 +7605,7 @@
   {
     "info": {
       "excerpt": null,
-      "title": "Explain what happens when `setState` is called in React",
+      "title": "Explain what happens when the `useState` setter function is called in React",
       "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/explain-what-happens-when-setstate-is-called-in-react/en-US.mdx"
     },
     "metadata": {

apps/web/src/__generated__/questions/quiz/list.zh-CN.json

@@ -4751,7 +4751,7 @@
   {
     "info": {
       "excerpt": null,
-      "title": "你如何看待 AMD 与 CommonJS？",
+      "title": "你如何看待 CommonJS 与 ESM？",
       "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-do-you-think-of-amd-vs-commonjs/zh-CN.mdx"
     },
     "metadata": {
@@ -7605,7 +7605,7 @@
   {
     "info": {
       "excerpt": null,
-      "title": "解释在 React 中调用 `setState` 时会发生什么",
+      "title": "解释在 React 中调用 `useState` 设置器函数时会发生什么",
       "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/explain-what-happens-when-setstate-is-called-in-react/zh-CN.mdx"
     },
     "metadata": {

apps/web/src/__generated__/questions/quiz/what-are-the-benefits-of-using-hooks-in-react/locales/en-US.json

@@ -5,5 +5,5 @@
     "title": "What are the benefits of using hooks in React?",
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-are-the-benefits-of-using-hooks-in-react/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),k=(t,e)=>{for(var o in e)s(t,o,{get:e[o],enumerable:!0})},a=(t,e,o,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of m(e))!f.call(t,c)&&c!==o&&s(t,c,{get:()=>e[c],enumerable:!(i=u(e,c))||i.enumerable});return t};var y=(t,e,o)=>(o=t!=null?h(p(t)):{},a(e||!t||!t.__esModule?s(o,\"default\",{value:t,enumerable:!0}):o,t)),b=t=>a(s({},\"__esModule\",{value:!0}),t);var l=g((R,r)=>{r.exports=_jsx_runtime});var x={};k(x,{default:()=>H,frontmatter:()=>j});var n=y(l()),j={title:\"What are the benefits of using hooks in React?\"};function d(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",pre:\"pre\",ul:\"ul\",li:\"li\",a:\"a\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Hooks in React allow you to use state and other React features without writing a class. They make it easier to reuse stateful logic between components, improve code readability, and simplify the codebase by reducing the need for lifecycle methods. Hooks like \",(0,n.jsx)(e.code,{children:\"useState\"}),\" and \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" are commonly used to manage state and side effects in functional components.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Benefits of using hooks in React\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Simplified state management\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Hooks like \",(0,n.jsx)(e.code,{children:\"useState\"}),\" allow you to add state to functional components without converting them to class components. This makes the code more concise and easier to read.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const [count, setCount] = useState(0);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Improved code readability\"}),`\n`,(0,n.jsx)(e.p,{children:\"Hooks help in breaking down complex components into smaller, reusable pieces of logic. This makes the code more modular and easier to understand.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Reusable logic\"}),`\n`,(0,n.jsx)(e.p,{children:\"Custom hooks allow you to extract and reuse stateful logic across multiple components. This promotes code reuse and reduces duplication.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`function useCustomHook() {\n  const [state, setState] = useState(initialState);\n  // Custom logic here\n  return [state, setState];\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Reduced need for lifecycle methods\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Hooks like \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" can replace lifecycle methods such as \",(0,n.jsx)(e.code,{children:\"componentDidMount\"}),\", \",(0,n.jsx)(e.code,{children:\"componentDidUpdate\"}),\", and \",(0,n.jsx)(e.code,{children:\"componentWillUnmount\"}),\". This simplifies the component lifecycle management.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`useEffect(() => {\n  // Side effect logic here\n  return () => {\n    // Cleanup logic here\n  };\n}, [dependencies]);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Better separation of concerns\"}),`\n`,(0,n.jsx)(e.p,{children:\"Hooks allow you to separate concerns by grouping related logic together. This makes the codebase more maintainable and easier to debug.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Enhanced testing\"}),`\n`,(0,n.jsx)(e.p,{children:\"Functional components with hooks are generally easier to test compared to class components. Hooks can be tested in isolation, making unit tests more straightforward.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://reactjs.org/docs/hooks-intro.html\",children:\"React Hooks documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://reactjs.org/docs/hooks-state.html\",children:\"Using the State Hook\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://reactjs.org/docs/hooks-effect.html\",children:\"Using the Effect Hook\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://reactjs.org/docs/hooks-custom.html\",children:\"Building Your Own Hooks\"})}),`\n`]})]})}function w(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(d,t)})):d(t)}var H=w;return b(x);})();\n;return Component;"
+  "solution": "var Component=(()=>{var h=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),k=(t,e)=>{for(var o in e)i(t,o,{get:e[o],enumerable:!0})},s=(t,e,o,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of m(e))!f.call(t,c)&&c!==o&&i(t,c,{get:()=>e[c],enumerable:!(a=u(e,c))||a.enumerable});return t};var y=(t,e,o)=>(o=t!=null?h(p(t)):{},s(e||!t||!t.__esModule?i(o,\"default\",{value:t,enumerable:!0}):o,t)),b=t=>s(i({},\"__esModule\",{value:!0}),t);var l=g((v,r)=>{r.exports=_jsx_runtime});var S={};k(S,{default:()=>x,frontmatter:()=>w});var n=y(l()),w={title:\"What are the benefits of using hooks in React?\"};function d(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",pre:\"pre\",ul:\"ul\",li:\"li\",a:\"a\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Hooks in React allow you to use state and other React features without writing a class. They make it easier to reuse stateful logic between components, improve code readability, and simplify the codebase by reducing the need for lifecycle methods. Hooks like \",(0,n.jsx)(e.code,{children:\"useState\"}),\" and \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" are commonly used to manage state and side effects in functional components.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Benefits of using hooks in React\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Simplified state management\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Hooks like \",(0,n.jsx)(e.code,{children:\"useState\"}),\" allow you to add state to functional components without converting them to class components. This makes the code more concise and easier to read.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`const [count, setCount] = useState(0);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Improved code readability\"}),`\n`,(0,n.jsx)(e.p,{children:\"Hooks help in breaking down complex components into smaller, reusable pieces of logic. This makes the code more modular and easier to understand.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Reusable logic\"}),`\n`,(0,n.jsx)(e.p,{children:\"Custom hooks allow you to extract and reuse stateful logic across multiple components. This promotes code reuse and reduces duplication.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`function useCustomHook() {\n  const [state, setState] = useState(initialState);\n  // Custom logic here\n  return [state, setState];\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Reduced need for lifecycle methods\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Hooks like \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\" can replace lifecycle methods such as \",(0,n.jsx)(e.code,{children:\"componentDidMount\"}),\", \",(0,n.jsx)(e.code,{children:\"componentDidUpdate\"}),\", and \",(0,n.jsx)(e.code,{children:\"componentWillUnmount\"}),\". This simplifies the component lifecycle management.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`useEffect(() => {\n  // Side effect logic here\n  return () => {\n    // Cleanup logic here\n  };\n}, [dependencies]);\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Better separation of concerns\"}),`\n`,(0,n.jsx)(e.p,{children:\"Hooks allow you to separate concerns by grouping related logic together. This makes the codebase more maintainable and easier to debug.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Enhanced testing\"}),`\n`,(0,n.jsx)(e.p,{children:\"Functional components with hooks are generally easier to test compared to class components. Hooks can be tested in isolation, making unit tests more straightforward.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react/hooks\",children:\"React Hooks documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react/useState\",children:\"Using the State Hook\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react/useEffect\",children:\"Using the Effect Hook\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/reusing-logic-with-custom-hooks\",children:\"Building Your Own Hooks\"})}),`\n`]})]})}function H(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(d,t)})):d(t)}var x=H;return b(S);})();\n;return Component;"
 }

apps/web/src/__generated__/questions/quiz/what-are-the-rules-of-react-hooks/locales/en-US.json

@@ -5,5 +5,5 @@
     "title": "What are the rules of React hooks?",
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-are-the-rules-of-react-hooks/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var u=Object.create;var c=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var k=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),g=(o,e)=>{for(var t in e)c(o,t,{get:e[t],enumerable:!0})},l=(o,e,t,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of p(e))!m.call(o,s)&&s!==t&&c(o,s,{get:()=>e[s],enumerable:!(r=d(e,s))||r.enumerable});return o};var y=(o,e,t)=>(t=o!=null?u(f(o)):{},l(e||!o||!o.__esModule?c(t,\"default\",{value:o,enumerable:!0}):t,o)),C=o=>l(c({},\"__esModule\",{value:!0}),o);var h=k((b,i)=>{i.exports=_jsx_runtime});var x={};g(x,{default:()=>j,frontmatter:()=>v});var n=y(h()),v={title:\"What are the rules of React hooks?\"};function a(o){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",pre:\"pre\",code:\"code\",ul:\"ul\",li:\"li\",a:\"a\"},o.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"React hooks have a few essential rules to ensure they work correctly. Always call hooks at the top level of your React function, never inside loops, conditions, or nested functions. Only call hooks from React function components or custom hooks. These rules ensure that hooks maintain the correct state and lifecycle behavior.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What are the rules of React hooks?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Always call hooks at the top level\"}),`\n`,(0,n.jsx)(e.p,{children:\"Hooks should always be called at the top level of your React function. This means you should not call hooks inside loops, conditions, or nested functions. This rule ensures that hooks are called in the same order each time a component renders, which is crucial for maintaining the correct state and lifecycle behavior.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// Correct\nfunction MyComponent() {\n  const [count, setCount] = useState(0);\n\n  if (count > 0) {\n    // Do something\n  }\n}\n\n// Incorrect\nfunction MyComponent() {\n  if (someCondition) {\n    const [count, setCount] = useState(0); // This will break the rules of hooks\n  }\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Only call hooks from React function components or custom hooks\"}),`\n`,(0,n.jsx)(e.p,{children:\"Hooks should only be called from React function components or custom hooks. This rule ensures that hooks are used in the appropriate context where React can manage their state and lifecycle.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// Correct\nfunction MyComponent() {\n  const [count, setCount] = useState(0);\n  return <div>{count}</div>;\n}\n\n// Correct (custom hook)\nfunction useCustomHook() {\n  const [state, setState] = useState(null);\n  return [state, setState];\n}\n\n// Incorrect\nfunction regularFunction() {\n  const [count, setCount] = useState(0); // This will break the rules of hooks\n}\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Use the \",(0,n.jsx)(e.code,{children:\"eslint-plugin-react-hooks\"}),\" linter\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"To enforce these rules, you can use the \",(0,n.jsx)(e.code,{children:\"eslint-plugin-react-hooks\"}),\" linter. This plugin will help you identify and fix violations of the rules of hooks in your code.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-bash\",children:`npm install eslint-plugin-react-hooks --save-dev\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"Add the plugin to your ESLint configuration:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-json\",children:`{\n  \"plugins\": [\"react-hooks\"],\n  \"rules\": {\n    \"react-hooks/rules-of-hooks\": \"error\", // Checks rules of hooks\n    \"react-hooks/exhaustive-deps\": \"warn\" // Checks effect dependencies\n  }\n}\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://reactjs.org/docs/hooks-intro.html\",children:\"React hooks documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://reactjs.org/docs/hooks-rules.html\",children:\"Rules of hooks\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://www.npmjs.com/package/eslint-plugin-react-hooks\",children:[\"Using the \",(0,n.jsx)(e.code,{children:\"eslint-plugin-react-hooks\"}),\" linter\"]})}),`\n`]})]})}function w(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(a,o)})):a(o)}var j=w;return C(x);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var m=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),g=(o,e)=>{for(var t in e)r(o,t,{get:e[t],enumerable:!0})},l=(o,e,t,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of f(e))!k.call(o,s)&&s!==t&&r(o,s,{get:()=>e[s],enumerable:!(c=d(e,s))||c.enumerable});return o};var y=(o,e,t)=>(t=o!=null?u(p(o)):{},l(e||!o||!o.__esModule?r(t,\"default\",{value:o,enumerable:!0}):t,o)),v=o=>l(r({},\"__esModule\",{value:!0}),o);var i=m((b,a)=>{a.exports=_jsx_runtime});var R={};g(R,{default:()=>x,frontmatter:()=>C});var n=y(i()),C={title:\"What are the rules of React hooks?\"};function h(o){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",pre:\"pre\",code:\"code\",ul:\"ul\",li:\"li\",a:\"a\"},o.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"React hooks have a few essential rules to ensure they work correctly. Always call hooks at the top level of your React function, never inside loops, conditions, or nested functions. Only call hooks from React function components or custom hooks. These rules ensure that hooks maintain the correct state and lifecycle behavior.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What are the rules of React hooks?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Always call hooks at the top level\"}),`\n`,(0,n.jsx)(e.p,{children:\"Hooks should always be called at the top level of your React function. This means you should not call hooks inside loops, conditions, or nested functions. This rule ensures that hooks are called in the same order each time a component renders, which is crucial for maintaining the correct state and lifecycle behavior.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// Correct\nfunction MyComponent() {\n  const [count, setCount] = useState(0);\n\n  if (count > 0) {\n    // Do something\n  }\n}\n\n// Incorrect\nfunction MyComponent() {\n  if (someCondition) {\n    const [count, setCount] = useState(0); // This will break the rules of hooks\n  }\n}\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Only call hooks from React function components or custom hooks\"}),`\n`,(0,n.jsx)(e.p,{children:\"Hooks should only be called from React function components or custom hooks. This rule ensures that hooks are used in the appropriate context where React can manage their state and lifecycle.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`// Correct\nfunction MyComponent() {\n  const [count, setCount] = useState(0);\n  return <div>{count}</div>;\n}\n\n// Correct (custom hook)\nfunction useCustomHook() {\n  const [state, setState] = useState(null);\n  return [state, setState];\n}\n\n// Incorrect\nfunction regularFunction() {\n  const [count, setCount] = useState(0); // This will break the rules of hooks\n}\n`})}),`\n`,(0,n.jsxs)(e.h3,{children:[\"Use the \",(0,n.jsx)(e.code,{children:\"eslint-plugin-react-hooks\"}),\" linter\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"To enforce these rules, you can use the \",(0,n.jsx)(e.code,{children:\"eslint-plugin-react-hooks\"}),\" linter. This plugin will help you identify and fix violations of the rules of hooks in your code.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-bash\",children:`npm install eslint-plugin-react-hooks --save-dev\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"Add the plugin to your ESLint configuration:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-json\",children:`{\n  \"plugins\": [\"react-hooks\"],\n  \"rules\": {\n    \"react-hooks/rules-of-hooks\": \"error\", // Checks rules of hooks\n    \"react-hooks/exhaustive-deps\": \"warn\" // Checks effect dependencies\n  }\n}\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react/hooks\",children:\"React hooks documentation\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/reference/rules/rules-of-hooks\",children:\"Rules of hooks\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://www.npmjs.com/package/eslint-plugin-react-hooks\",children:[\"Using the \",(0,n.jsx)(e.code,{children:\"eslint-plugin-react-hooks\"}),\" linter\"]})}),`\n`]})]})}function w(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(h,o)})):h(o)}var x=w;return v(R);})();\n;return Component;"
 }

apps/web/src/__generated__/questions/quiz/what-is-react-strict-mode-and-what-are-its-benefits/locales/en-US.json

@@ -5,5 +5,5 @@
     "title": "What is React strict mode and what are its benefits?",
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-is-react-strict-mode-and-what-are-its-benefits/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var l=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var y=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),g=(n,e)=>{for(var c in e)a(n,c,{get:e[c],enumerable:!0})},r=(n,e,c,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of p(e))!f.call(n,i)&&i!==c&&a(n,i,{get:()=>e[i],enumerable:!(o=u(e,i))||o.enumerable});return n};var R=(n,e,c)=>(c=n!=null?l(m(n)):{},r(e||!n||!n.__esModule?a(c,\"default\",{value:n,enumerable:!0}):c,n)),b=n=>r(a({},\"__esModule\",{value:!0}),n);var d=y((v,s)=>{s.exports=_jsx_runtime});var M={};g(M,{default:()=>I,frontmatter:()=>w});var t=R(d()),w={title:\"What is React strict mode and what are its benefits?\"};function h(n){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",code:\"code\",pre:\"pre\",h4:\"h4\",ul:\"ul\",li:\"li\",a:\"a\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,t.jsx)(e.p,{children:\"React strict mode is a development tool that helps identify potential problems in an application. It activates additional checks and warnings for its descendants. It doesn't render any visible UI and doesn't affect the production build. The benefits include identifying unsafe lifecycle methods, warning about legacy string ref API usage, detecting unexpected side effects, and ensuring that components are resilient to future changes.\"}),`\n`,(0,t.jsx)(e.hr,{}),`\n`,(0,t.jsx)(e.h2,{children:\"What is React strict mode and what are its benefits?\"}),`\n`,(0,t.jsx)(e.h3,{children:\"What is React strict mode?\"}),`\n`,(0,t.jsx)(e.p,{children:\"React strict mode is a feature in React that helps developers identify potential problems in their applications. It is a wrapper component that you can use to wrap parts of your application to enable additional checks and warnings. It does not render any visible UI and does not affect the production build.\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"To use React strict mode, you can wrap your component tree with the \",(0,t.jsx)(e.code,{children:\"StrictMode\"}),\" component:\"]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-jsx\",children:`import React from 'react';\nimport ReactDOM from 'react-dom';\n\nReactDOM.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n  document.getElementById('root'),\n);\n`})}),`\n`,(0,t.jsx)(e.h3,{children:\"Benefits of React strict mode\"}),`\n`,(0,t.jsx)(e.h4,{children:\"Identifying unsafe lifecycle methods\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"React strict mode helps identify components that use unsafe lifecycle methods, such as \",(0,t.jsx)(e.code,{children:\"componentWillMount\"}),\", \",(0,t.jsx)(e.code,{children:\"componentWillReceiveProps\"}),\", and \",(0,t.jsx)(e.code,{children:\"componentWillUpdate\"}),\". These methods are considered unsafe because they can lead to bugs and unexpected behavior. React strict mode will warn you if any of your components use these methods.\"]}),`\n`,(0,t.jsx)(e.h4,{children:\"Warning about legacy string ref API usage\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"React strict mode warns you if you are using the legacy string ref API. The string ref API is considered legacy and is not recommended for use in new code. Instead, you should use the callback ref API or the \",(0,t.jsx)(e.code,{children:\"React.createRef\"}),\" API.\"]}),`\n`,(0,t.jsx)(e.h4,{children:\"Detecting unexpected side effects\"}),`\n`,(0,t.jsx)(e.p,{children:\"React strict mode helps detect unexpected side effects by intentionally double-invoking certain lifecycle methods and functions. This helps ensure that your components are resilient to future changes and that they do not rely on side effects that may not always be executed.\"}),`\n`,(0,t.jsx)(e.h4,{children:\"Ensuring components are resilient to future changes\"}),`\n`,(0,t.jsx)(e.p,{children:\"By enabling React strict mode, you can ensure that your components are more resilient to future changes in React. The additional checks and warnings help you identify potential issues early, making it easier to maintain and update your codebase.\"}),`\n`,(0,t.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://reactjs.org/docs/strict-mode.html\",children:\"React Strict Mode Documentation\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://reactjs.org/docs/react-component.html#the-component-lifecycle\",children:\"React Lifecycle Methods\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://reactjs.org/docs/refs-and-the-dom.html\",children:\"Refs and the DOM\"})}),`\n`]})]})}function x(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(h,n)})):h(n)}var I=x;return b(M);})();\n;return Component;"
+  "solution": "var Component=(()=>{var l=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var y=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),g=(n,e)=>{for(var i in e)a(n,i,{get:e[i],enumerable:!0})},o=(n,e,i,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of p(e))!m.call(n,c)&&c!==i&&a(n,c,{get:()=>e[c],enumerable:!(r=u(e,c))||r.enumerable});return n};var R=(n,e,i)=>(i=n!=null?l(f(n)):{},o(e||!n||!n.__esModule?a(i,\"default\",{value:n,enumerable:!0}):i,n)),b=n=>o(a({},\"__esModule\",{value:!0}),n);var d=y((j,s)=>{s.exports=_jsx_runtime});var M={};g(M,{default:()=>I,frontmatter:()=>w});var t=R(d()),w={title:\"What is React strict mode and what are its benefits?\"};function h(n){let e=Object.assign({h2:\"h2\",p:\"p\",hr:\"hr\",h3:\"h3\",code:\"code\",pre:\"pre\",h4:\"h4\",ul:\"ul\",li:\"li\",a:\"a\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,t.jsx)(e.p,{children:\"React strict mode is a development tool that helps identify potential problems in an application. It activates additional checks and warnings for its descendants. It doesn't render any visible UI and doesn't affect the production build. The benefits include identifying unsafe lifecycle methods, warning about legacy string ref API usage, detecting unexpected side effects, and ensuring that components are resilient to future changes.\"}),`\n`,(0,t.jsx)(e.hr,{}),`\n`,(0,t.jsx)(e.h2,{children:\"What is React strict mode and what are its benefits?\"}),`\n`,(0,t.jsx)(e.h3,{children:\"What is React strict mode?\"}),`\n`,(0,t.jsx)(e.p,{children:\"React strict mode is a feature in React that helps developers identify potential problems in their applications. It is a wrapper component that you can use to wrap parts of your application to enable additional checks and warnings. It does not render any visible UI and does not affect the production build.\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"To use React strict mode, you can wrap your component tree with the \",(0,t.jsx)(e.code,{children:\"StrictMode\"}),\" component:\"]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-jsx\",children:`import React from 'react';\nimport ReactDOM from 'react-dom';\n\nReactDOM.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n  document.getElementById('root'),\n);\n`})}),`\n`,(0,t.jsx)(e.h3,{children:\"Benefits of React strict mode\"}),`\n`,(0,t.jsx)(e.h4,{children:\"Identifying unsafe lifecycle methods\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"React strict mode helps identify components that use unsafe lifecycle methods, such as \",(0,t.jsx)(e.code,{children:\"componentWillMount\"}),\", \",(0,t.jsx)(e.code,{children:\"componentWillReceiveProps\"}),\", and \",(0,t.jsx)(e.code,{children:\"componentWillUpdate\"}),\". These methods are considered unsafe because they can lead to bugs and unexpected behavior. React strict mode will warn you if any of your components use these methods.\"]}),`\n`,(0,t.jsx)(e.h4,{children:\"Warning about legacy string ref API usage\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"React strict mode warns you if you are using the legacy string ref API. The string ref API is considered legacy and is not recommended for use in new code. Instead, you should use the callback ref API or the \",(0,t.jsx)(e.code,{children:\"React.createRef\"}),\" API.\"]}),`\n`,(0,t.jsx)(e.h4,{children:\"Detecting unexpected side effects\"}),`\n`,(0,t.jsx)(e.p,{children:\"React strict mode helps detect unexpected side effects by intentionally double-invoking certain lifecycle methods and functions. This helps ensure that your components are resilient to future changes and that they do not rely on side effects that may not always be executed.\"}),`\n`,(0,t.jsx)(e.h4,{children:\"Ensuring components are resilient to future changes\"}),`\n`,(0,t.jsx)(e.p,{children:\"By enabling React strict mode, you can ensure that your components are more resilient to future changes in React. The additional checks and warnings help you identify potential issues early, making it easier to maintain and update your codebase.\"}),`\n`,(0,t.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://react.dev/reference/react/StrictMode\",children:\"React Strict Mode Documentation\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://react.dev/reference/react/Component#adding-lifecycle-methods-to-a-class-component\",children:\"React Lifecycle Methods\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://react.dev/learn/manipulating-the-dom-with-refs\",children:\"Refs and the DOM\"})}),`\n`]})]})}function x(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(h,n)})):h(n)}var I=x;return b(M);})();\n;return Component;"
 }

apps/web/src/__generated__/questions/quiz/what-is-the-consequence-of-using-array-indices-as-the-value-for-key-s-in-react/locales/en-US.json

@@ -5,5 +5,5 @@
     "title": "What is the consequence of using array indices as the value for `key`s in React?",
     "gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/what-is-the-consequence-of-using-array-indices-as-the-value-for-key-s-in-react/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var l=Object.create;var r=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var f=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),g=(t,e)=>{for(var i in e)r(t,i,{get:e[i],enumerable:!0})},c=(t,e,i,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of u(e))!y.call(t,a)&&a!==i&&r(t,a,{get:()=>e[a],enumerable:!(s=m(e,a))||s.enumerable});return t};var k=(t,e,i)=>(i=t!=null?l(p(t)):{},c(e||!t||!t.__esModule?r(i,\"default\",{value:t,enumerable:!0}):i,t)),x=t=>c(r({},\"__esModule\",{value:!0}),t);var o=f((w,d)=>{d.exports=_jsx_runtime});var j={};g(j,{default:()=>I,frontmatter:()=>b});var n=k(o()),b={title:\"What is the consequence of using array indices as the value for `key`s in React?\"};function h(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",pre:\"pre\",ul:\"ul\",li:\"li\",a:\"a\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Using array indices as the value for \",(0,n.jsx)(e.code,{children:\"key\"}),\"s in React can lead to performance issues and bugs. When the order of items changes, React may not correctly identify which items have changed, leading to unnecessary re-renders or incorrect component updates. It's better to use unique identifiers for \",(0,n.jsx)(e.code,{children:\"key\"}),\"s to ensure React can efficiently manage and update the DOM.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"Consequence of using array indices as the value for \",(0,n.jsx)(e.code,{children:\"key\"}),\"s in React\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Performance issues\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"When array indices are used as \",(0,n.jsx)(e.code,{children:\"key\"}),\"s, React may not efficiently update the DOM. If the order of items in the array changes, React will not be able to correctly identify which items have been added, removed, or moved. This can lead to unnecessary re-renders and decreased performance.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Incorrect component updates\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Using array indices as \",(0,n.jsx)(e.code,{children:\"key\"}),\"s can cause bugs in your application. For example, if the order of items changes, React may reuse the same component instances for different items, leading to incorrect state and props being passed to components. This can result in unexpected behavior and hard-to-debug issues.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Consider the following example where array indices are used as \",(0,n.jsx)(e.code,{children:\"key\"}),\"s:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`const items = ['Item 1', 'Item 2', 'Item 3'];\n\nconst List = () => (\n  <ul>\n    {items.map((item, index) => (\n      <li key={index}>{item}</li>\n    ))}\n  </ul>\n);\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"If the order of \",(0,n.jsx)(e.code,{children:\"items\"}),\" changes, React may not correctly update the DOM, leading to performance issues and potential bugs.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Better approach\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Instead of using array indices, use unique identifiers for \",(0,n.jsx)(e.code,{children:\"key\"}),\"s. This ensures that React can efficiently manage and update the DOM.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`const items = [\n  { id: 1, name: 'Item 1' },\n  { id: 2, name: 'Item 2' },\n  { id: 3, name: 'Item 3' },\n];\n\nconst List = () => (\n  <ul>\n    {items.map((item) => (\n      <li key={item.id}>{item.name}</li>\n    ))}\n  </ul>\n);\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, using \",(0,n.jsx)(e.code,{children:\"item.id\"}),\" as the \",(0,n.jsx)(e.code,{children:\"key\"}),\" ensures that React can correctly identify and update items when the order changes.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://reactjs.org/docs/lists-and-keys.html#keys\",children:\"React documentation on keys\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318\",children:\"Why using array index as a key is an anti-pattern\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://kentcdodds.com/blog/understanding-reacts-key-prop\",children:\"React performance optimization with keys\"})}),`\n`]})]})}function R(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(h,t)})):h(t)}var I=R;return x(j);})();\n;return Component;"
+  "solution": "var Component=(()=>{var l=Object.create;var r=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var f=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),g=(t,e)=>{for(var i in e)r(t,i,{get:e[i],enumerable:!0})},s=(t,e,i,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of u(e))!y.call(t,a)&&a!==i&&r(t,a,{get:()=>e[a],enumerable:!(c=m(e,a))||c.enumerable});return t};var x=(t,e,i)=>(i=t!=null?l(p(t)):{},s(e||!t||!t.__esModule?r(i,\"default\",{value:t,enumerable:!0}):i,t)),k=t=>s(r({},\"__esModule\",{value:!0}),t);var o=f((w,d)=>{d.exports=_jsx_runtime});var j={};g(j,{default:()=>I,frontmatter:()=>b});var n=x(o()),b={title:\"What is the consequence of using array indices as the value for `key`s in React?\"};function h(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",pre:\"pre\",ul:\"ul\",li:\"li\",a:\"a\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Using array indices as the value for \",(0,n.jsx)(e.code,{children:\"key\"}),\"s in React can lead to performance issues and bugs. When the order of items changes, React may not correctly identify which items have changed, leading to unnecessary re-renders or incorrect component updates. It's better to use unique identifiers for \",(0,n.jsx)(e.code,{children:\"key\"}),\"s to ensure React can efficiently manage and update the DOM.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.h2,{children:[\"Consequence of using array indices as the value for \",(0,n.jsx)(e.code,{children:\"key\"}),\"s in React\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Performance issues\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"When array indices are used as \",(0,n.jsx)(e.code,{children:\"key\"}),\"s, React may not efficiently update the DOM. If the order of items in the array changes, React will not be able to correctly identify which items have been added, removed, or moved. This can lead to unnecessary re-renders and decreased performance.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Incorrect component updates\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Using array indices as \",(0,n.jsx)(e.code,{children:\"key\"}),\"s can cause bugs in your application. For example, if the order of items changes, React may reuse the same component instances for different items, leading to incorrect state and props being passed to components. This can result in unexpected behavior and hard-to-debug issues.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Example\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Consider the following example where array indices are used as \",(0,n.jsx)(e.code,{children:\"key\"}),\"s:\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`const items = ['Item 1', 'Item 2', 'Item 3'];\n\nconst List = () => (\n  <ul>\n    {items.map((item, index) => (\n      <li key={index}>{item}</li>\n    ))}\n  </ul>\n);\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"If the order of \",(0,n.jsx)(e.code,{children:\"items\"}),\" changes, React may not correctly update the DOM, leading to performance issues and potential bugs.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Better approach\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Instead of using array indices, use unique identifiers for \",(0,n.jsx)(e.code,{children:\"key\"}),\"s. This ensures that React can efficiently manage and update the DOM.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-jsx\",children:`const items = [\n  { id: 1, name: 'Item 1' },\n  { id: 2, name: 'Item 2' },\n  { id: 3, name: 'Item 3' },\n];\n\nconst List = () => (\n  <ul>\n    {items.map((item) => (\n      <li key={item.id}>{item.name}</li>\n    ))}\n  </ul>\n);\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, using \",(0,n.jsx)(e.code,{children:\"item.id\"}),\" as the \",(0,n.jsx)(e.code,{children:\"key\"}),\" ensures that React can correctly identify and update items when the order changes.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://react.dev/learn/rendering-lists#why-does-react-need-keys\",children:\"React documentation on keys\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318\",children:\"Why using array index as a key is an anti-pattern\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://kentcdodds.com/blog/understanding-reacts-key-prop\",children:\"React performance optimization with keys\"})}),`\n`]})]})}function R(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(h,t)})):h(t)}var I=R;return k(j);})();\n;return Component;"
 }