Using require() to load functional component

Question

My app takes a lot of time(15 secs 2GB RAM/10 secs 3GB RAM/ 5 secs 4GB RAM) for cold startup and I am trying to reduce this time. Inspired by Inline Requires and this I am trying to load some functional components on-demand. So I am doing this as -

DatePicker.tsx

import React from 'react';
import DateTimePicker, { DateTimePickerProps } from 'react-native-modal-datetime-picker';

...

export const DatePicker: React.FC<DatePickerProps> = (props) => {

return (
  <DateTimePicker
   date={props.date}
   isVisible={props.isDateTimePickerVisible}
   ...
  />
);

};

AddRecord.tsx

 //Intentionally commented import 
 //import { DatePicker } from '@aph/mobile-patients/src/components/ui/DatePicker';
 
 ...

 let DatePicker: any = null;

 export const AddRecord: React.FC<AddRecordProps> = (props) => {
    const [isDateTimePickerVisible, setIsDateTimePickerVisible] = useState<boolean>(false);

    return(
      <View>
        <Text  onPress={() => {
            setIsDateTimePickerVisible(true);

            if (DatePicker == null) {
              DatePicker = require('@aph/mobile-patients/src/components/ui/DatePicker');
            }

            Alert.alert('Clicked');

            console.log('check DatePicker ', DatePicker);
          }}> Click Me </Text>

          {isDateTimePickerVisible ? (
            <DatePicker
               isDateTimePickerVisible={isDateTimePickerVisible}
                ...
             />
          ) : null}
      </View>
    );
 }

But simulator is reporting an error

Logging DatePicker object -

Answer 1

setIsDateTimePickerVisible is setting true before DatePicker has been loaded.

I am not sure but I guess it might be:

<Text  onPress={() => {
            if (DatePicker == null) {
              DatePicker = require('@aph/mobile-patients/src/components/ui/DatePicker');
            }

            Alert.alert('Clicked');
 
            console.log('check DatePicker ', DatePicker);
            setIsDateTimePickerVisible(true); // <- update the state after


          }}> Click Me </Text>