React: Introducción a Componentes

questions

[
  {
    "id": "6688e2b3-7112-4ac5-8a7d-4b6babaa7f86",
    "statement": "Diferencia entre componentes funcionales y componentes de clase en React a nivel sintáctico",
    "shuffleAnswers": true,
    "experiencePoints": null,
    "answers": [
      {
        "id": "e3daefba-d311-4f9e-b07a-b3b810c5782e",
        "statement": "Los componentes de clase no pueden manejar estados"
      },
      {
        "id": "ea1309cb-12ca-470e-9d9a-f783a261d2d4",
        "statement": "Los componentes funcionales requieren más código que los componentes de clase"
      },
      {
        "id": "ea02e3d3-0090-40fd-a6a6-d45494616efe",
        "statement": "Los componentes funcionales tienen una sintaxis más simple y concisa comparados con los componentes de clase",
        "correct": true
      },
      {
        "id": "1a5bddef-43b9-487c-811f-6c046f10b449",
        "statement": "Los componentes de clase siempre utilizan hooks para manejar el estado"
      }
    ]
  },
  {
    "id": "a6ec3f02-e580-436c-be53-c61e1eb33b9f",
    "statement": "¿Cuál es la manera correcta de pasar propiedades (props) a un componente funcional?",
    "shuffleAnswers": true,
    "experiencePoints": null,
    "answers": [
      {
        "id": "60edba1d-0cb7-4eaa-a9ca-a490f598a7bf",
        "statement": "Declarándolas como variables locales dentro del componente"
      },
      {
        "id": "28686cd6-7071-428d-8f5f-b9c3c8bf62f5",
        "statement": "Usando el objeto global window"
      },
      {
        "id": "68a5c7c0-3b49-4133-b9cf-e5c82fd6e513",
        "statement": "Pasándolas como argumentos a la función del componente",
        "correct": true
      },
      {
        "id": "602e85c9-e386-42cc-b86e-14e97ed3daaa",
        "statement": "No es posible pasar propiedades a los componentes funcionales"
      }
    ]
  },
  {
    "id": "c6fd2ff3-81e7-4765-bc66-ffaa877cc5f9",
    "statement": "¿Qué es un componente en React?",
    "shuffleAnswers": true,
    "experiencePoints": null,
    "answers": [
      {
        "id": "29627242-2719-47aa-9945-f6c7602ec173",
        "statement": "Un mecanismo interno de React que gestiona el ciclo de vida de la aplicación"
      },
      {
        "id": "44464af9-ac86-48ca-ab92-ab386c062ec4",
        "statement": "Una pieza fundamental de la arquitectura que permite dividir la interfaz de usuario en partes independientes, reutilizables y manejables",
        "correct": true
      },
      {
        "id": "945714fd-1a26-4ac0-9479-57438610c4a5",
        "statement": "Un archivo CSS que da estilo a la aplicación"
      },
      {
        "id": "ff750d98-dc8e-4619-9864-93d08897afe4",
        "statement": "Una función de JavaScript que siempre retorna 'Hola, mundo'"
      }
    ]
  },
  {
    "id": "6155f042-c977-45ec-9b7b-8484f2456c63",
    "statement": "¿Cuál de las siguientes opciones es un ejemplo de un componente funcional en React?",
    "shuffleAnswers": true,
    "experiencePoints": null,
    "answers": [
      {
        "id": "b2e0d799-1ca2-4296-82e0-ba9a9296dff4",
        "statement": "```jsx\nfunction MiComponente() {\n    return <input type=\"text\" />;\n}\nexport default MiComponente;\n```"
      },
      {
        "id": "c539fe1d-25a9-416d-a326-b31817a74c65",
        "statement": "```jsx\nimport { useMemo } from 'react';\n```"
      },
      {
        "id": "6c92f9e0-b1c6-401b-b0d7-e83538fc7880",
        "statement": "```jsx\nconst MiComponente = new Function() {\n    console.log('Hola, mundo');\n}\n```"
      },
      {
        "id": "6e75cff3-83c7-4464-9de1-a2725d7635fc",
        "statement": "```jsx\nexport default function MiComponente() {\n  return (\n    <div>\n      <h1>Hola, mundo</h1>\n      <p>Este es mi primer componente en React.</p>\n    </div>\n  );\n}\n```",
        "correct": true
      }
    ]
  },
  {
    "id": "7512e0ae-9934-4c97-9eeb-c2cf2bf61ae2",
    "statement": "¿Cuál es un ejemplo válido de un componente de clase en React?",
    "shuffleAnswers": true,
    "experiencePoints": null,
    "answers": [
      {
        "id": "d6a2b1d0-98eb-4919-8eaf-ef06fcc2b319",
        "statement": "```jsx\nimport { Component } from 'react';\n\nexport default class MiComponenteDeClase extends Component {\n    constructor(props) {\n        super(props);\n        this.state = { contador: 0 };\n    }\n\n    render() {\n        return (\n            <div>\n                <p>Has hecho clic {this.state.contador} veces</p>\n                <button onClick={this.incrementarContador}>Incrementar</button>\n            </div>\n        );\n    }\n}\n```",
        "correct": true
      },
      {
        "id": "e81af006-9314-4ac0-ada4-6236bb5aaf88",
        "statement": "```jsx\nnew Component() {\n    return <h1>Hola, clase</h1>;\n}\n```"
      },
      {
        "id": "1395c3c4-6068-4d4e-bcc0-7a63cb1efe47",
        "statement": "```jsx\nclass MiComponente extends React.Component {\n    render() {\n        return ( \n            <div>\n                <h1>Hola, mundo</h1>\n                <p>Este es mi primer componente en React.</p>\n            </div>\n        );\n    }\n}\n```"
      },
      {
        "id": "44a97ee2-c74e-4cec-a91b-042ad69b6a0c",
        "statement": "```jsx\nexport default function MiComponente() {\n    return <Fragment>Test</Fragment>;\n}\n```"
      }
    ]
  },
  {
    "id": "0d8739ab-5d99-4ed3-aeda-1824da0cfe70",
    "statement": "¿Qué hook de React se utiliza para manejar efectos secundarios dentro de un componente funcional?",
    "shuffleAnswers": true,
    "experiencePoints": null,
    "answers": [
      {
        "id": "e3987c4e-5238-4ddd-a964-124929910694",
        "statement": "`useSecondary`"
      },
      {
        "id": "2c2d88c6-f567-458a-8f04-2f6205dc963e",
        "statement": "`useEffect`",
        "correct": true
      },
      {
        "id": "6051316b-9a29-47f8-ad61-1dbc1d4a5060",
        "statement": "`useQuery`"
      },
      {
        "id": "65d19040-6a66-4ff7-b250-dcefd45d0466",
        "statement": "`useReducer`"
      }
    ]
  },
  {
    "id": "3cda1c8d-981c-47d4-b35d-5e883dc1fb3c",
    "statement": "¿Qué función se utiliza para renderizar un componente en el DOM en React?",
    "shuffleAnswers": true,
    "experiencePoints": null,
    "answers": [
      {
        "id": "c3d37915-c04f-4974-b4f7-b15ed778a621",
        "statement": "`renderDOM`"
      },
      {
        "id": "efeeeeb2-dc33-4258-8f16-cd2d9a87dbd2",
        "statement": "`mountRoot`"
      },
      {
        "id": "0d81a3fa-16f1-4c73-9e0a-aa59b36b4448",
        "statement": "`ReactDOM.render`"
      },
      {
        "id": "7f5fa246-58a0-4a8f-bb4d-886d8f66409c",
        "statement": "`createRoot`",
        "correct": true
      }
    ]
  },
  {
    "id": "77b0e858-f53d-4a31-bec4-9e180bdc2dff",
    "statement": "¿Cuál es una diferencia clave entre `useState` y `setState` en la gestión del estado de componentes en React?",
    "shuffleAnswers": true,
    "experiencePoints": null,
    "answers": [
      {
        "id": "0c088681-5f0f-43ac-824e-860efe7c4520",
        "statement": "`setState` solo se puede utilizar en componentes funcionales"
      },
      {
        "id": "a4fb4136-0bb5-49ce-b1bc-ca502763b497",
        "statement": "`useState` es utilizado en componentes funcionales mientras `setState` es utilizado en componentes de clase",
        "correct": true
      },
      {
        "id": "28d34879-9654-4842-90e6-ad23f4adb6f4",
        "statement": "`setState` ya no es usado en React"
      },
      {
        "id": "384d10d0-acf0-4f7e-9ae8-d4358b304972",
        "statement": "`useState` solo se puede utilizar en componentes de clase"
      }
    ]
  },
  {
    "id": "85d52861-2e3a-477b-a20d-5ee17192643f",
    "statement": "¿Cuál es la forma correcta de incrementar un contador en un componente de clase?",
    "shuffleAnswers": true,
    "experiencePoints": null,
    "answers": [
      {
        "id": "902b55e5-db9d-46fb-b9f3-a91db3f0dc20",
        "statement": "Usando `this.props.contador++`"
      },
      {
        "id": "84dbbdfd-2860-4d4a-8ddf-eaed15c40153",
        "statement": "Usando `this.setState({ contador: this.state.contador++ })`"
      },
      {
        "id": "587eb822-a281-487d-887d-ef5c11f74740",
        "statement": "Usando `this.state.contador++`"
      },
      {
        "id": "7a9a3010-fd0d-4db9-8992-ee365524c7cd",
        "statement": "Usando `this.setState((prevState) => ({ contador: prevState.contador + 1 }))`",
        "correct": true
      }
    ]
  },
  {
    "id": "47b93c06-ae2f-4fe2-8d99-75e39f4d78a1",
    "statement": "¿Qué función en React se utiliza para definir un componente como un punto de entrada principal de la aplicación?",
    "shuffleAnswers": true,
    "experiencePoints": null,
    "answers": [
      {
        "id": "cb932e5d-1f86-421d-a0e3-145a06ce9620",
        "statement": "`renderApp`"
      },
      {
        "id": "37c364c5-34bb-4684-b53d-2cb902909956",
        "statement": "`createRoot`",
        "correct": true
      },
      {
        "id": "6d01dd6e-5f98-4531-a9a2-33cf68768fde",
        "statement": "`createComponent`"
      },
      {
        "id": "715c92e3-5928-4ad7-b378-4e724916aff5",
        "statement": "`useApp`"
      }
    ]
  },
  {
    "id": "597a0940-dea4-4b8e-a349-b2b5dc3ce604",
    "statement": "¿Cuál es la ventaja de usar `StrictMode` en React?",
    "shuffleAnswers": true,
    "experiencePoints": null,
    "answers": [
      {
        "id": "470b0fc6-6772-4620-9e16-e8f9713a803a",
        "statement": "Evita el uso de `useEffect` en los componentes"
      },
      {
        "id": "d7bcf62e-781c-4908-808c-8de68999f493",
        "statement": "Mejora el rendimiento en producción"
      },
      {
        "id": "f589e07a-3ff0-4ddb-8117-391ff3c63aa0",
        "statement": "Hace que el código sea compatible con versiones anteriores de React"
      },
      {
        "id": "f55f9a84-2e41-4f8d-a457-160dcb976742",
        "statement": "Ayuda a identificar problemas potenciales durante el desarrollo",
        "correct": true
      }
    ]
  },
  {
    "id": "bc92d918-f368-451e-b8eb-1fdaac6ebedc",
    "statement": "¿Qué prop en el siguiente componente funcional define una acción al hacer clic en un botón?\n\n```jsx\nexport default function Boton({ onClick }) {\n  return <button onClick={onClick}>Hacer clic</button>;\n}\n```",
    "shuffleAnswers": true,
    "experiencePoints": null,
    "answers": [
      {
        "id": "15e639a4-87e8-4be1-a386-ec0e5bc2a058",
        "statement": "`props.name`"
      },
      {
        "id": "8c60b3bd-e9b5-4b6f-91b5-80201adf5823",
        "statement": "`props.onClick`",
        "correct": true
      },
      {
        "id": "01163774-20ef-4360-9e1f-763fb85ed3fc",
        "statement": "`props.clickEvent`"
      },
      {
        "id": "8fd075c3-ef88-4648-951c-af730f7c0cda",
        "statement": "`props.label`"
      }
    ]
  },
  {
    "id": "adb235a1-091a-4dbf-a725-2271320ba6ae",
    "statement": "En el siguiente componente funcional, ¿qué `prop` se está utilizando?\n\n```javascript\nexport default function Saludo(props) {\n  return <h1>Hola, {props.nombre}</h1>;\n}\n```",
    "shuffleAnswers": true,
    "experiencePoints": null,
    "answers": [
      {
        "id": "e68fe2f5-df39-45ee-9fac-6c38bd2a22d2",
        "statement": "props.greeting"
      },
      {
        "id": "478a2595-2838-4490-a37f-947a407a517f",
        "statement": "props.surname"
      },
      {
        "id": "6c5895b4-92f5-40f0-966e-7ed9f46dd6f2",
        "statement": "props.nombre",
        "correct": true
      },
      {
        "id": "2bc502cd-8411-4f56-9b33-f65a4ce0d7fb",
        "statement": "props.age"
      }
    ]
  },
  {
    "id": "fdd7a9d1-e8fc-46e3-9b8a-88101b9d0c02",
    "statement": "¿Cuál es la mejor forma de encapsular lógica repetida en componentes funcionales en React?",
    "shuffleAnswers": true,
    "experiencePoints": null,
    "answers": [
      {
        "id": "5b080fea-d8d5-4d98-ba0c-f9f444403d3e",
        "statement": "Usando hooks personalizados",
        "correct": true
      },
      {
        "id": "a070ab55-ef4d-48be-adaa-70af3b738f93",
        "statement": "Reescribiendo la lógica en cada componente"
      },
      {
        "id": "0284c493-c9b1-457a-b736-47b5b203272f",
        "statement": "Usando funciones de clase"
      },
      {
        "id": "c1033301-f0e6-495d-a714-f6e677740d0a",
        "statement": "Usando `setState`"
      }
    ]
  },
  {
    "id": "7f71af54-18ca-4078-802e-29bc4f1eb98e",
    "statement": "¿Qué método del ciclo de vida de un componente de clase se utiliza para actualizar el título del documento después de que el componente se ha actualizado?",
    "shuffleAnswers": true,
    "experiencePoints": null,
    "answers": [
      {
        "id": "da7e1331-168b-4235-b3f9-36e3183aa5a3",
        "statement": "`componentDidUpdate`",
        "correct": true
      },
      {
        "id": "b802b62c-f94b-4279-9a37-f428547f51a7",
        "statement": "`componentWillMount`"
      },
      {
        "id": "36e66ecd-0bd6-4fb4-815f-573028eddd86",
        "statement": "`componentShouldUpdate`"
      },
      {
        "id": "7fcdef09-6224-4656-b651-15301af29f41",
        "statement": "`componentWillUnmount`"
      }
    ]
  },
  {
    "id": "fc769d2b-f92d-4e4e-ab27-7b3f19a6da71",
    "statement": "¿Cómo se define el estado inicial en un componente de clase en React?",
    "shuffleAnswers": true,
    "experiencePoints": null,
    "answers": [
      {
        "id": "994f3f9a-e34a-434a-ac8c-4e4e7bd56e77",
        "statement": "Usando `this.props`"
      },
      {
        "id": "c8a1e42f-3cbe-4e63-9ab2-ae928a9b4119",
        "statement": "Utilizando `static state`"
      },
      {
        "id": "2a067aaf-e764-4abb-b7a4-4bb7d4729b2f",
        "statement": "Mediante `useState`"
      },
      {
        "id": "5e59e340-9928-45fa-9611-700c209e3c49",
        "statement": "Asignándolo al `this.state` en el constructor de la clase",
        "correct": true
      }
    ]
  },
  {
    "id": "d7fdf00a-eb02-4049-b27e-cd1d7cef5716",
    "statement": "¿Cuál de las siguientes afirmaciones es correcta respecto a la modularidad y reutilización de componentes en React?",
    "shuffleAnswers": true,
    "experiencePoints": null,
    "answers": [
      {
        "id": "e319914b-216c-417b-a707-f94518b29161",
        "statement": "No se deben reutilizar componentes en aplicaciones diferentes"
      },
      {
        "id": "543ea665-82d6-4041-9199-3ef4627c0838",
        "statement": "Los componentes no deben pasar datos entre ellos"
      },
      {
        "id": "9049bb63-4056-40fd-92a2-470a6ac51227",
        "statement": "Se recomienda tener un componente muy grande para manejar toda la interfaz"
      },
      {
        "id": "38a822fb-f4bf-4f93-9d2f-f86105028103",
        "statement": "Crear componentes pequeños y específicos para una única responsabilidad",
        "correct": true
      }
    ]
  },
  {
    "id": "1ed3c196-03be-46e7-b514-74d54ce6e93a",
    "statement": "¿Cómo se puede definir una prop con valor por defecto en React?",
    "shuffleAnswers": true,
    "experiencePoints": null,
    "answers": [
      {
        "id": "bb56654a-420b-4bc6-a2be-3b558e4d2f76",
        "statement": "A través del hook `useDefaults`"
      },
      {
        "id": "54fe4cfa-25b0-40f1-ab96-a61e61fbdc49",
        "statement": "Usando `defaultProperties`"
      },
      {
        "id": "5c529805-4975-4f10-9925-5ddd4d36dea6",
        "statement": "Utilizando `defaultProps` en la definición del componente",
        "correct": true
      },
      {
        "id": "68304fbe-ab8b-4c76-8b8f-6056c2f5c479",
        "statement": "Mediante `React.defaultProps`"
      }
    ]
  },
  {
    "id": "8077f6d0-8e41-47d1-9f5d-41cbb6937cc8",
    "statement": "¿Qué método de un componente de clase se utiliza para manejar acciones justo antes de que un componente se monte en el DOM?",
    "shuffleAnswers": true,
    "experiencePoints": null,
    "answers": [
      {
        "id": "ff5a17e1-e349-42fa-aad9-a8e037f0a72f",
        "statement": "`componentWillUnmount`"
      },
      {
        "id": "66de5d8f-31f5-4e7b-9982-47fa7736087c",
        "statement": "`componentShouldUpdate`"
      },
      {
        "id": "485c8a73-21d7-411a-ad66-d958fa6e476b",
        "statement": "`componentDidMount`"
      },
      {
        "id": "313e1a63-91b5-4dea-beae-359cc2ade216",
        "statement": "`componentWillMount`",
        "correct": true
      }
    ]
  },
  {
    "id": "22c51ccb-11c5-4ae9-85bc-ebb03b06b1d1",
    "statement": "¿Cómo se puede inicializar el estado en un componente de clase?",
    "shuffleAnswers": true,
    "experiencePoints": null,
    "answers": [
      {
        "id": "849a0ac1-35b9-4540-ad9c-716556080eb8",
        "statement": "Mediante `defaultProps`"
      },
      {
        "id": "15255093-3ad1-49ba-a8c5-f0e6972fddc0",
        "statement": "Con `initializeState`"
      },
      {
        "id": "2f619e27-70b1-4994-9a64-496f79476392",
        "statement": "En el constructor usando `this.state`",
        "correct": true
      },
      {
        "id": "9df050bc-ddcd-4e6d-be6b-778741e25a3b",
        "statement": "Mediante `useState`"
      }
    ]
  },
  {
    "id": "c7ff741c-2461-4bf8-a95e-2e5529bee0b5",
    "statement": "¿Qué hook se utiliza para manejar el estado en componentes funcionales en React?",
    "shuffleAnswers": true,
    "experiencePoints": null,
    "answers": [
      {
        "id": "1decd18a-2969-4a88-818b-1168aecf9dad",
        "statement": "`useState`",
        "correct": true
      },
      {
        "id": "bc63525f-91c4-4028-bde3-e134f84c2def",
        "statement": "`useEffect`"
      },
      {
        "id": "2ca1ba26-961f-48df-aa26-752cc0f96a70",
        "statement": "`useReducer`"
      },
      {
        "id": "5ba2ec81-fb20-43c9-ab8c-b48be08fea34",
        "statement": "`useContext`"
      }
    ]
  },
  {
    "id": "554745ed-2cf8-4480-aaa6-34e4c592bd42",
    "statement": "¿Cuál es una característica de los hooks personalizados en React?",
    "shuffleAnswers": true,
    "experiencePoints": null,
    "answers": [
      {
        "id": "834ce052-8b35-4b17-afb0-02529c48c109",
        "statement": "Solo se pueden usar en componentes de clase"
      },
      {
        "id": "93b4ccf9-eced-4e7c-aa51-26d05eb2a9fa",
        "statement": "Pueden encapsular y reutilizar lógica de estado",
        "correct": true
      },
      {
        "id": "86cc2295-0588-4ade-bed1-755eea89727b",
        "statement": "No pueden manejar efectos secundarios"
      },
      {
        "id": "74ef5ee4-b10c-4d14-9040-1c39bf15f122",
        "statement": "Son obsoletos en la última versión de React"
      }
    ]
  },
  {
    "id": "7ff4a6de-f3cd-4fe0-a5eb-4e68ab515cee",
    "statement": "¿Cuál es el comportamiento por defecto de `useState` con estados complejos?",
    "shuffleAnswers": true,
    "experiencePoints": null,
    "answers": [
      {
        "id": "7066466f-8bc0-426b-bfc5-c0fa997b9c42",
        "statement": "Fusiona el nuevo estado con el estado anterior"
      },
      {
        "id": "0fb7e723-590a-4f27-b76e-307aa493d08c",
        "statement": "Muestra una advertencia en la consola"
      },
      {
        "id": "56455066-d2d6-4f8a-ae49-4b40449b1b6a",
        "statement": "No permite estados complejos"
      },
      {
        "id": "5960ae12-6ebb-48f8-8202-e2b222f4edb7",
        "statement": "Reemplaza completamente el estado con el nuevo estado proporcionado",
        "correct": true
      }
    ]
  },
  {
    "id": "1f5c39aa-67c5-4623-a1a3-d04913f736eb",
    "statement": "¿Qué hook se utiliza para ejecutar una función una sola vez cuando el componente se monta?",
    "shuffleAnswers": true,
    "experiencePoints": null,
    "answers": [
      {
        "id": "fe3fe09c-f7f6-4224-a386-641cb197619f",
        "statement": "`useReducer`"
      },
      {
        "id": "b5008978-e676-4e9f-8acd-6e85219176c9",
        "statement": "`useContext`"
      },
      {
        "id": "bdfe3c18-7784-4e3d-913e-0acd4316665e",
        "statement": "`useEffect` con una lista de dependencias vacía",
        "correct": true
      },
      {
        "id": "f392ae1f-b612-4ffa-9360-3b7be15872bd",
        "statement": " `useState`"
      }
    ]
  },
  {
    "id": "bd0d2a01-7a42-45e6-bb7d-ecfdc8077030",
    "statement": "¿Qué código se utiliza para renderizar el componente raíz en React?",
    "shuffleAnswers": true,
    "experiencePoints": null,
    "answers": [
      {
        "id": "b667d724-ac1f-48e4-a36a-f7a719921515",
        "statement": "`React.mount(<App />, '#root');`"
      },
      {
        "id": "a6f3bd65-2f2b-4739-b2ba-9756887c168e",
        "statement": "`React.create(<App />, document.getElementById('main'));`"
      },
      {
        "id": "431c25ec-9fc5-4480-b9c9-2c46cb1044e6",
        "statement": "```jsx\nimport { StrictMode } from 'react'\nimport { createRoot } from 'react-dom/client'\nimport App from './App.jsx'\ncreateRoot(document.getElementById('root')).render(\n  <StrictMode>\n    <App />\n  </StrictMode>,\n);\n```",
        "correct": true
      },
      {
        "id": "487d203c-1e6f-4fe8-b0c3-642173e752c4",
        "statement": "`ReactDOM.render(<App />, document.getElementById('root'));`"
      }
    ]
  },
  {
    "id": "861efc3b-12da-4ae3-81f1-66c6a54ed6f8",
    "statement": "¿Qué técnica es recomendada para el manejo del estado en componentes funcionales?",
    "shuffleAnswers": true,
    "experiencePoints": null,
    "answers": [
      {
        "id": "a7b19fd5-5532-4af4-b1af-e267ee2360ee",
        "statement": "`this.state`"
      },
      {
        "id": "7254bae6-74bb-41e8-aed9-bcb7afebf699",
        "statement": "`useState`",
        "correct": true
      },
      {
        "id": "5314c560-b35f-4208-8529-c8f793d32372",
        "statement": "`useLifecycle`"
      },
      {
        "id": "5be7dfe8-8c27-485d-8746-8782b3f09658",
        "statement": "`initializeState`"
      }
    ]
  },
  {
    "id": "e7c9a871-48f4-4cd4-b184-01539b0f99ac",
    "statement": "¿En qué escenario `componentWillUnmount` es útil en un componente de clase?",
    "shuffleAnswers": true,
    "experiencePoints": null,
    "answers": [
      {
        "id": "cc6c6019-5b21-4586-ba1a-7c1898fd6fe6",
        "statement": "Antes de que el componente se monte en el DOM"
      },
      {
        "id": "35b64f8f-c975-4449-ba21-a8028d87f4e1",
        "statement": "Cuando se inicializa el estado"
      },
      {
        "id": "53ed41cb-f922-4b3f-a397-772350515734",
        "statement": "Para actualizar el estado del componente"
      },
      {
        "id": "d63090c2-9c2a-444d-9705-7aeb926c135a",
        "statement": "Para realizar limpieza antes de que el componente sea desmontado",
        "correct": true
      }
    ]
  },
  {
    "id": "6685959a-6c6f-4a91-a7ee-25432ee0bd4e",
    "statement": "¿Cuál es una ventaja de la composición de componentes en React?",
    "shuffleAnswers": true,
    "experiencePoints": null,
    "answers": [
      {
        "id": "9417e3c6-0a1b-45df-9ec8-29fda33f3423",
        "statement": "Obliga a los desarrolladores a reescribir código"
      },
      {
        "id": "b0d8a6fc-57d2-49ef-b597-daeb5d3a8cf3",
        "statement": "Sólo puede usarse con componentes de clase"
      },
      {
        "id": "946e5f47-1350-4754-b9d5-205caba1b7d9",
        "statement": "Permite construir interfaces complejas a partir de partes más pequeñas y manejables",
        "correct": true
      },
      {
        "id": "4cd3ef2c-3549-4072-8605-6426bcee862f",
        "statement": "No permite la reutilización de componentes"
      }
    ]
  },
  {
    "id": "a150431b-b156-48e5-b8db-c66f3552c92a",
    "statement": "¿Cuál es el propósito principal de usar `componentDidMount` en un componente de clase?",
    "shuffleAnswers": true,
    "experiencePoints": null,
    "answers": [
      {
        "id": "3e84c310-0a91-4719-aa98-d6d8d6351486",
        "statement": "Renderizar el componente"
      },
      {
        "id": "6996e032-3b1a-4442-9af5-63431640f87d",
        "statement": "Desmontar el componente"
      },
      {
        "id": "1e1ffd8f-2ece-4877-9a3a-6db5e90b1276",
        "statement": "Ejecutar código después de que el componente ha sido montado en el DOM",
        "correct": true
      },
      {
        "id": "9e48671b-f274-4a4c-ad2e-2c5cb9b5e385",
        "statement": "Actualizar el estado inicial"
      }
    ]
  },
  {
    "id": "0f85d95b-b8b5-43b2-abe1-9945dbd2d059",
    "statement": "¿Qué tipo de componentes deben usar hooks para manejar estado y efectos secundarios?",
    "shuffleAnswers": true,
    "experiencePoints": null,
    "answers": [
      {
        "id": "abc65d2d-318b-444f-9fcf-a44237a0a7e4",
        "statement": "Ambas opciones"
      },
      {
        "id": "d5c2edeb-f546-4ab9-a0d3-8091d81ac80f",
        "statement": "Componentes de clase"
      },
      {
        "id": "44ee1ab3-00e5-48cd-895d-803c41aa2074",
        "statement": "Componentes funcionales",
        "correct": true
      },
      {
        "id": "3ad06290-cd79-490d-8fa4-59a75efa0d46",
        "statement": "Ninguna opción"
      }
    ]
  }
]