Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Sugestão - OFF] Também seria possivel aplicar contextos de hooks ao inicializar valores no React

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!

1 resposta
solução!

Olá, Guilherme!

Agradeço por compartilhar sua sugestão e código com a comunidade. É sempre bom explorar diferentes abordagens e discutir as vantagens e desvantagens de cada uma delas.

No caso específico que você apresentou, ambas as abordagens são válidas e podem ser utilizadas. A primeira abordagem utiliza o hook useEffect para chamar a função LoadHeader e atualizar o estado headerInfo quando o componente é montado. Já a segunda abordagem chama diretamente a função LoadHeader ao inicializar o estado headerInfo.

A escolha entre as duas abordagens pode depender de diversos fatores, como a complexidade da lógica de inicialização, a necessidade de atualização do estado em outros momentos além da montagem do componente, entre outros.

Quanto à discussão entre Class Components e Hooks, é interessante observar que os Hooks foram introduzidos no React como uma alternativa aos Class Components, visando simplificar o código e promover a reutilização de lógica. Os Hooks têm se mostrado uma opção mais moderna e recomendada pela equipe do React, principalmente considerando a depreciação futura do suporte aos Class Components.

No entanto, é importante ressaltar que cada abordagem tem suas vantagens e desvantagens, e a escolha entre elas pode depender do contexto e das necessidades específicas do projeto.

Espero ter ajudado a esclarecer suas dúvidas! Se tiver mais alguma pergunta, estou à disposição. Bons estudos!

Forte abraço e até mais!