Questão nº 55
Questão de Tecnologia da Informação · FGV TRF1 2024 (nº 55)
Considere o seguinte código de um componente funcional do
React Native:
```
function printTheme(props) {
const theme = useState(props?.index?0:1);
try { console.log(theme); }
catch (e) { console.log(e); }
return <Text>{theme}</Text>;
}
```
Considere feitas as importações necessárias.
Ao ser utilizado em uma aplicação React Native, o componente
acima apresentará:
- Ao valor do state theme;
- Bfalha, pois há uma ou mais falhas de sintaxe no interior do componente;
- Cfalha, pois o argumento passado ao hook useState não pode conter expressões;
- Dfalha, pois o nome de um componente funcional deve ser iniciado com letra maiúscula; (alternativa correta)
- Efalha, pois o fluxo principal de um componente funcional não deve conter um bloco try-catch.
Resposta comentada
Gabarito Alternativa D
No React Native, para que o sistema reconheça uma função como um componente (um bloco de UI reutilizável), o nome dessa função precisa começar com uma letra maiúscula.
- (A) Incorreta: O componente nem seria reconhecido e renderizado devido à convenção de nomenclatura, então não chegaria a apresentar o valor do
state theme(que, por si só, é um array retornado pelouseState, não o valor direto). - (B) Incorreta: O código dentro do componente é sintaticamente válido em JavaScript/JSX. A falha não é de sintaxe, mas de uma convenção fundamental do React.
- (C) Incorreta: O argumento
props?.index?0:1é uma expressão JavaScript válida e ouseStateaceita expressões para definir o estado inicial. - (D) Correta: O nome
printThemecomeça com letra minúscula. No React (e React Native), componentes funcionais devem ter seus nomes iniciados com letra maiúscula (ex:PrintTheme) para serem diferenciados de elementos HTML nativos ou componentes internos do React Native. Se o nome começa com minúscula, o React tenta tratá-lo como um elemento nativo (como<text>ou<view>), o que causa falha. - (E) Incorreta: Embora não seja a forma mais comum de lidar com erros de renderização (para isso, usa-se Error Boundaries), um bloco
try-catché perfeitamente válido em JavaScript e pode ser usado dentro de um componente funcional sem causar uma falha por si só.
Fonte: FGV TRF1 2024 Analista Judiciário - Análise de Sistemas de Informação (Caderno Tipo 1). Reproduzida para fins de estudo.