Reset Select Item - React Native - react-native

Question

I have a form which includes a select dropdown (items are populated via an api call). When I leave the screen I would like to be able to reset this back to it's initial state (Default state is a placeholder - Select Event)
I can clear text and textarea inputs within a useFocusEffect() but struggling with understanding how to reset a select dropdown
To reset the select dropdown i have tried setEventTypeData([]); but when navigating back to the screen, the last selected option is still selected (text inputs have been cleared though)
export const CreateNewEvent = ({navigation}) => {
const globalContext = useContext(AppContext);
const userId = globalContext.userInfo.id;
// dropdown populated with this
const [eventTypeData, setEventTypeData] = useState([]);
const [newEventDescription, setEventDescription] = useState('');
const [newEventLimit, setEventLimit] = useState(0);
const clearFormData = () => {
setEventTypeData([]); // tried setting back to original state but does not work
setEventDescription('');
setEventLimit(0);
};
useFocusEffect(
React.useCallback(() => {
const body = JSON.stringify({userId});
fetch(eventTypesUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Accept: 'application/json',
},
body: body,
})
.then(response => response.json())
.then(json => setEventTypeData(json))
.catch(error => console.error(error))
.finally(() => setLoading(false));
return () => {
// Run logic when the user leaves screen,
// Clear form
clearFormData();
};
}, [userId]),
);
// Select Dropdown
{/* Event Name Select Field */}
<FormControl isRequired isInvalid={'eventName' in errors}>
<FormControl.Label>Select Event</FormControl.Label>
<Select
onValueChange={newEventName =>
updateEventNameAndDescription(newEventName)
}
placeholder="Select Event"
{eventTypeData.map(event => (
<Select.Item
key={event.id}
label={event.name}
value={event.name}
/>
))}
</Select>
}
How can i ensure that when navigating back to this screen that the Select dropdown is reset to its original state
Thanks

Answer 1

I rewrite your example. I hope this help. You forget to unsubscribe
from API call
import { useIsFocused } from '#react-navigation/native';
const isFocused = useIsFocused();
useEffect(() => {
if (!isFocused) {
clearFormData()
}
}, [isFocused]);
useFocusEffect(
React.useCallback(() => {
const body = JSON.stringify({ userId });
const unsubscribe = fetch(eventTypesUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
},
body: body,
})
.then((response) => response.json())
.then((json) => setEventTypeData(json))
.catch((error) => console.error(error))
.finally(() => setLoading(false));
return () => unsubscribe();
};
}, [userId]),
);

Answer 2

export const CreateNewEvent = ({navigation}) => {
const globalContext = useContext(AppContext);
const userId = globalContext.userInfo.id;
// dropdown populated with this
const [eventTypeData, setEventTypeData] = useState([]);
const [newEventDescription, setEventDescription] = useState('');
const [newEventLimit, setEventLimit] = useState(0);
const [selectedEventName, setSelectedEventName] = useState();
const clearFormData = () => {
setSelectedEventName();
setEventDescription('');
setEventLimit(0);
};
useEffect(() => {
selectedEventName ? updateEventNameAndDescription(selectedEventName) : clearFormData();
}, [selectedEventName])
useFocusEffect(
React.useCallback(() => {
const body = JSON.stringify({userId});
fetch(eventTypesUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Accept: 'application/json',
},
body: body,
})
.then(response => response.json())
.then(json => setEventTypeData(json))
.catch(error => console.error(error))
.finally(() => setLoading(false));
return () => {
// Run logic when the user leaves screen,
// Clear form
clearFormData();
};
}, [userId]),
);
// Select Dropdown
{/* Event Name Select Field */}
<FormControl isRequired isInvalid={'eventName' in errors}>
<FormControl.Label>Select Event</FormControl.Label>
<Select
value={selectedEventName}
onValueChange={newEventName =>
setSelectedEventName(newEventName)
}
placeholder="Select Event"
{eventTypeData.map(event => (
<Select.Item
key={event.id}
label={event.name}
value={event.name}
/>
))}
</Select>
}

Answer 3

If you're using React Native Picker or something related, That picker is bound to the device native Select component, This has more performance benefit as it's not run on JavaScript thread, React rerendering will not affect that component.
But in this situation, we need to force this component to unmount when the user leaves the screen or mount when the screen is focused.
// Top-level import
import { useIsFocused } from '#react-navigation/native';
// Inside functional component
const isFocused = useIsFocused();
// Force <Select> to unmount or mount when screen focused
{ isFocused && <Select
value={selectedEventName}
onValueChange={newEventName =>
setSelectedEventName(newEventName)
}
placeholder="Select Event"
{eventTypeData.map(event => (
<Select.Item
key={event.id}
label={event.name}
value={event.name}
/>
))}
</Select>}