How to update state react native hooks from other screen using react navigation hook param?

Question

How to update state react native hooks from other screen using react navigation hook param?

I am trying to update state selectedHotel in screen 1 from screen 2 that provide the data, so i save data from screen 2 in parameter using react navigation hooks params, the data is update but i can't update state selectHotel if data is exist in useEffect screen 1, here the code:

screen 1:

import {useNavigation, useNavigationParam} from 'react-navigation-hooks';

const TransportScreen = () => {
    const hotelParam = useNavigationParam('hotel');
    const [baseLoading, setBaseLoading] = useState(true);
    const [selectedHotel, setSelectedHotel] = useState(
        hotelParam ? hotelParam.id : '',
    );
    const {navigate} = useNavigation();
    useEffect(() => {
        setTimeout(() => {
            setBaseLoading(false);
        }, 1000);
        if (hotelParam) {
            setSelectedHotel(hotelParam.id);
            console.log('update selected hotel', selectedHotel);
        }
    }, []);
    const redirectTransportSelectHotel = () => {
        console.log('select hotel');
        navigate('TransportSelectHotel');
    };
    const submitTransport = () => {
        console.log('getHotelId ', selectedHotel);
    };
    const renderContent = () => {
        console.log('hotelId: ', selectedHotel);
        if (!baseLoading) {
            return (
                <View
                    style={{
                        flex: 1,
                        flexDirection: 'column',
                        justifyContent: 'flex-start',
                    }}>
                    <MenuCard
                        expandRight
                        onPress={() => redirectTransportSelectHotel()}>
                        {hotelParam ? hotelParam.name : 'Select Hotel'}
                    </MenuCard>
                    <View
                        style={{
                            flex: 1,
                            flexDirection: 'column',
                            justifyContent: 'flex-end',
                        }}>
                        <View
                            style={{
                                flexDirection: 'row',
                                marginHorizontal: 40,
                                marginVertical: 20,
                            }}>
                            <Button onPress={() => submitTransport()}>Submit</Button>
                        </View>
                    </View>
                </View>
            );
        }
        return <LoaderScreen visible={baseLoading} />;
    };
};

screen 2:

import {useNavigation, useNavigationParam} from 'react-navigation-hooks';
import {useSelector, useDispatch} from 'react-redux';
import {getHotels} from './actions';
import _ from 'lodash';

const TransportSelectHotelScreen = () => {
    const {navigate} = useNavigation();
    const dispatch = useDispatch();
    const [baseLoading, setBaseLoading] = useState(true);
    const {hotel} = useSelector(state => ({
        hotel: state.transportHotelReducer,
    }));
    useEffect(() => {
        setTimeout(() => {
            setBaseLoading(false);
        }, 1000);
        loadHotels();
    }, [loadHotels]);
    const handleRefresh = () => {
        console.log('refresh');
        loadHotels();
    };
    const loadHotels = async () => {
        dispatch(getHotels());
    };
    const redirectTransportCallback = hotel => {
        console.log('hotel detail', hotel);
        navigate('Transport', {hotel: hotel});
    };
    const renderItem = item => {
        return (
            <MenuCard
                expandRight
                onPress={() => redirectTransportCallback(item.item)}>
                {item.item.name}
            </MenuCard>
        );
    };
    const renderContent = () => {
        if (!baseLoading) {
            if (!hotel.hotels.baseLoading) {
                if (!_.isEmpty(hotel.hotels)) {
                    return (
                        <View style={globalStyles.menuContainer}>
                            <FlatList
                                data={hotel.hotels}
                                renderItem={renderItem}
                                keyExtractor={(item, index) => index.toString()}
                                refreshing={hotel.isRefreshing}
                                onRefresh={handleRefresh}
                                // onEndReached={handleLoadMore}
                                // onEndReachedThreshold={0.1}
                            />
                        </View>
                    );
                } else {
                    return (
                        <View style={globalStyles.wrapperContent}>
                            <Text>{Lang.no_data}</Text>
                        </View>
                    );
                }
            }
            return <LoaderScreen visible={hotel.baseLoading} />;
        }
        return <LoaderScreen visible={baseLoading} />;
    };
};

Answer 1

You could try

useEffect(() => {
  setSelectedHotel(hotelParam ? hotelParam.id : '')
}, [hotelParam])