Hello Guys I am almost new to react-native, I have been working in Unity, Asp.net, and WinForms previously and hence my thinking about react is quite biased based on my that experience. I have below a hierarchy of components:

• Search tab(Class component):

                       -- Search Component
                       -- Carousel 
                       -- Popular searches
                       -- Search results(Fetched on Search component keyword)
  

I have implemented all sub-components as functional components and all of them are fetching data in the Useffect hook and using redux store(using connect function).

The data are being fetched correctly but the component is rendered partially, anything static is rendered but the FlatList part isn't rendered until I hit ctrl+s.

I am facing the issue of "FlatList not rendered" but I have one question too, "Am I doing it the right way?" or "Who should take responsibility for data fetching from API a container or a child?"

Thanks in advance, sample code:

 const [popularSearhesList, setPopularSearhesList] = useState([]);
const [extraData, setExtraData] = React.useState(new Date())
const token = useSelector(state => state.auth.token)

useEffect(() => {
    async function fetchPopularEvents() {
        if (props.getPopularSearches != undefined && popularSearhesList.length==0) {
            props.getPopularSearches(token).then(() => {
                if (props.dashboardData.PopularSearches != undefined) {
                    setPopularSearhesList(props.dashboardData.PopularSearches);
                    setExtraData(new Date());
                }

            }).catch((error) => {
                console.log(error);
            });

        } else {
            console.log("props.getPopularSearches is undefined");
        }
        setIsLoading(false);
    }
    fetchPopularEvents();
}, [])