title: How to prevent component to re-render every time?
body: <p>I have a custom component where I want to prevent the <code>useEffect</code> to fire every time the component is rendering.</p>
  <p>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.</p>
  <p>Here's what I tried, but it doesn't work as expected, it's not updating the state after getting the value from API (<code>getValue()</code> not called).</p>
  <pre><code>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}) =&gt; {
    const isMounted = useRef(false);
    const [fontFamily, setFontFamily] = useState('Helvetica-Bold');
  
    const getValue = useCallback(() =&gt; {
      // mock API 
      setTimeout(() =&gt; {
        console.log('AppText: get font family name from API!!');
        setFontFamily('HelveticaNeue');
      }, 200);
    }, []);
  
    useEffect(() =&gt; {
      if (isMounted.current) {
        getValue();
      } else {
        isMounted.current = true;
        return;
      }
    }, [getValue]);
  
    return (
      &lt;Text
        style={[
          styles.text,
          style,
          {
            fontFamily: fontFamily,
          },
        ]}
        {...rest}&gt;
        {children}
      &lt;/Text&gt;
    );
  };
  
  export {AppText};
  </code></pre>
  <p>using:</p>
  <pre><code>Home/About/etc // other screens
  
  
  const Home = () =&gt; {
     return(
       &lt;View&gt;
          &lt;AppText&gt; Hey from home &lt;/AppText&gt;
      &lt;/View&gt;
     );
  }
  </code></pre>