react-native: Letters disappear after re-rendering On the current page in react-native

Question

It was successful to display the data received through axios after moving the page. But when it is re-rendered, the letters disappear. I don't know which one is the problem.

const MyPage = ({ navigation, info }) => {
  const [userInfo, setUserInfo] = useState();
  const getData = async () => {
    try {
      axios
        .get(
          "http://everyweardev-env.eba-azpdvh2m.ap-northeast-2.elasticbeanstalk.com/api/v1/user"
        )
        .then((res) => res)
        .then((data) => {
          setUserInfo(data.data.data.result);
        })
        .catch((err) => console.log(err));
    } catch (error) {}
  };
  useEffect(() => {
    const unsubscribe = navigation.addListener("focus", () => {
      getData();
    });
    return unsubscribe;
  }, [navigation]);

 
  return (
    <View style={styles.container}>
      {/*프로필*/}
      <View style={styles.profileContainer}>
        <Image source={require("../../images/profile.png")} />
        <View style={styles.profileName}>
          <TouchableHighlight>
            <>
              <Text
                style={{
                  fontWeight: "bold",
                  marginBottom: hp("1%"),
                  fontSize: wp("7%"),
                }}
              >
                {userInfo?._name} 님
              </Text>
              <Text
                style={{
                  fontSize: wp("5%"),
                }}
              >
                {userInfo?._mail}
              </Text>

After page is moved

After re-rending

Answer 1

i think your case in not re-rendering but it refreshing.

what's the difference?
re-rendering occur after update state.
refreshing occur after edit files in your editor.

if your case is really refreshing don't worry about it just happened during development in debug build, and not happened in release build.