How to prevent component to re-render every time?

I have a custom component where I want to prevent the useEffect to fire every time the component is rendering.

The main idea is to get the font-family name from the API and then pass it to the style value, so I want to get the font family just once - not every time the component renders in other screens.

Here's what I tried, but it doesn't work as expected, it's not updating the state after getting the value from API (getValue() not called).

import React, {useCallback, useEffect, useRef} from 'react';import {useState} from 'react';import {Text, StyleSheet, Platform} from 'react-native';import {COLORS} from '../../common';const AppText = ({children, style, ...rest}) => {  const isMounted = useRef(false);  const [fontFamily, setFontFamily] = useState('Helvetica-Bold');  const getValue = useCallback(() => {    // mock API     setTimeout(() => {      console.log('AppText: get font family name from API!!');      setFontFamily('HelveticaNeue');    }, 200);  }, []);  useEffect(() => {    if (isMounted.current) {      getValue();    } else {      isMounted.current = true;      return;    }  }, [getValue]);  return (<Text      style={[        styles.text,        style,        {          fontFamily: fontFamily,        },      ]}      {...rest}>      {children}</Text>  );};export {AppText};

using:

Home/About/etc // other screensconst Home = () => {   return(<View><AppText> Hey from home </AppText></View>   );}