No módulo 3 - Estados e ciclos de vida:
poderiamos aplicar a seguinte lógica inicializando o import da função da interface CarregaTopo() --> LoadHeader() e CarregaProdutores() --> LoadProducers() da sequinte maneira:
- A principal razão por preferencialmente utilizar hooks é a prevista depreciação (anunciada pela equipe do React) do suporte ao Class Components no futuro.
- Tenha sempre em mente que o Hooks (atualmente) ainda não é bala de prata, tem muito a evoluir.
import React, {useState, useEffect} from 'react';
import { Text, View, Image, StyleSheet } from 'react-native';
import logo from '../../../assets/logo.png';
import { LoadHeader } from '../../../services/LoadingData';
export default function Header() {
const [headerInfo, setHeaderInfo] = useState({});
useEffect(() => {
// Chamando a função para popular o estado:
setHeaderInfo(LoadHeader());
})
return <View style={styles.headerComponent}>
<Image
style={styles.logo}
source={logo}
/>
<Text style={styles.textHeader}>{headerInfo.welcomeTitle}</Text>
<Text style={styles.subtitle}>{headerInfo.subtitle} </Text>
</View>
}
...
...
Ou chamando diretamente a função em um estado, assim respeitando a ordem do ciclo de vida do componente:
import React, {useState} from 'react';
import { Text, View, Image, StyleSheet } from 'react-native';
import logo from '../../../assets/logo.png';
import { LoadHeader } from '../../../services/LoadingData';
export default function Header() {
const [headerInfo, setHeaderInfo] = useState(LoadHeader());
return <View style={styles.headerComponent}>
<Image
style={styles.logo}
source={logo}
/>
<Text style={styles.textHeader}>{headerInfo.welcomeTitle}</Text>
<Text style={styles.subtitle}>{headerInfo.subtitle} </Text>
</View>
}
...
...
Em conclusão é possível utilizar ambas abordagens, qual delas utilizar já uma discussão na comunidade React.js, o importante é conhecer cada uma delas.
Obrigado por ler até aqui, e você? Me conte o que acha sobre Class vs. Hooks? :D
PS: Obrigado Natalia K. pelo conhecimento passado e Grupo Alura pelo ambiente enriquecedor.
Forte abraço e até a próxima!