Как получить и записать данные в стейт из Firebase, перед рендером?

Question

[Sneiksus]

Так как await не даёт никакого эффекта в записи стейта, я вызываю асинхронно только функцию получения данных, но рендер происходит перед получением данных в стейт. Как записать в стейт данные, перед рендером?

App

import './services/firebase';
import { firebase } from './services/firebasedb';
import * as Font from 'expo-font';
import * as SplashScreen from 'expo-splash-screen';
import { StatusBar } from 'expo-status-bar';
import React, { useState, useEffect, useCallback } from 'react';
import AntDesign from '@expo/vector-icons/AntDesign';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import Moment from 'react-moment';
import 'moment/locale/uk';
import DateSlider from './components/date_slider';
import LessonList from './components/lesson_list'
import Lessons_local from './components/data.json';
import theme from './assets/themes';
// import { lessons } from './services/lessonsService'


export default function App() {
  const [appIsReady, setAppIsReady] = useState(false);
  const [index, setIndex] = useState(0);
  const [lessons, setLessons] = useState();

  useEffect(() => {
    async function prepare() {
      try {
        await SplashScreen.preventAutoHideAsync();
        await Font.loadAsync(AntDesign.font);
        await setLessons(await firebase());   // Вызов данных з бази данных
      } catch (e) {
        console.warn(e);
      } finally {
        setAppIsReady(true);
      }
    } 

    prepare();
  }, []);

  const onLayoutRootView = useCallback(async () => {
    if (appIsReady) {
      await SplashScreen.hideAsync();
    }
  }, [appIsReady]);

  if (!appIsReady) {
    return null;
  }

  return (
    <View style={styles.container} onLayout={onLayoutRootView}>
      <StatusBar style='auto'/>
      <View style={styles.today}>
        <Moment element={Text} style={styles.today_day} format='D'></Moment>
        <View style={styles.today_column}>
          <Moment element={Text} style={styles.today_day_week} format='dddd'></Moment>
          <Moment element={Text} style={styles.today_month_year} format='MMMM YYYY'></Moment>
        </View>
        <TouchableOpacity style={styles.today_button_conteiner} onPress={() => { setIndex(1) }}>
          <Text style={styles.today_button_text}>Text</Text>
        </TouchableOpacity>
      </View>
      <View style={styles.lesson_conteiner}>
        <DateSlider data={lessons} index={index} setIndex={setIndex} />
        <LessonList data={lessons} index={index} setIndex={setIndex} />
      </View>
    </View>
  );
}

firebase

import { getDatabase, ref, onValue } from "firebase/database";

export async function firebase() { 
  const db = getDatabase();
  const LessonsRef = ref(db, 'days');
  let data;

  onValue(LessonsRef, (snapshot) => {
    data = snapshot.val();
  });

  return data;
}

Comments

[Антон Горецкий]

зачем бежать впереди паровоза? Не хотите делать рендер пока не установился нужный стейт - выводите лоадер. Установится нужный стейт, меняйте лоадер на полный код рендера.

[Sneiksus]

Антон Горецкий, Так оно так и работает