title: React Native: optimizing flatlist render item with useCallback
body: <p>I am trying to figure out as many ways as possible to optimize flatlist since my flatlist component complains my flat list items takes too long to render (I am already using removeClippedSubviews, windowSize, maxToRenderPerBatch, React.memo etc.).</p>
  
  <p>Is it good idea to wrap render function with useCallback?</p>
  
  <p>For example, lets say I have function component originally in form:</p>
  
  <pre><code>const FlatListItem = ({ color1, color2, color3, color4 }) =&gt; {
    function renderViewWithColorLogic(color) {
      // do some computationally heavy process
      // ...
  
      return &lt;View&gt;{/* some components */}&lt;/View&gt;;
    }
  
    return (
      &lt;View&gt;
        {renderViewWithColorLogic(color1)}
        {renderViewWithColorLogic(color2)}
        {renderViewWithColorLogic(color3)}
        {renderViewWithColorLogic(color4)}
      &lt;/View&gt;
    );
  };
  </code></pre>
  
  <p>If i wrap the render function with useCallback as:</p>
  
  <pre><code>const FlatListItem = ({ color1, color2, color3, color4 }) =&gt; {
    function _renderViewWithColorLogic(color) {
      // do some computationally heavy process
      // ...
  
      return &lt;View&gt;{/* some components */}&lt;/View&gt;;
    }
    const renderViewWithColorLogic1 = useCallback(()=&gt;_renderViewWithColorLogic(color1), [color1])
    const renderViewWithColorLogic2 = useCallback(()=&gt;_renderViewWithColorLogic(color2), [color2])
    const renderViewWithColorLogic3 = useCallback(()=&gt;_renderViewWithColorLogic(color3), [color3])
    const renderViewWithColorLogic4 = useCallback(()=&gt;_renderViewWithColorLogic(color4), [color4])
  
    return (
      &lt;View&gt;
        {renderViewWithColorLogic1()}
        {renderViewWithColorLogic2()}
        {renderViewWithColorLogic3()}
        {renderViewWithColorLogic4()}
      &lt;/View&gt;
    );
  };
  </code></pre>
  
  <p>Will it enhance the performance of the flatlist?
  Any other suggestion to optimize flatlist will be appreciated as well.</p>
  
  <hr>
  
  <p>So far as Andres says, I think better way to implement flatlist item component with some computation is as follow:</p>
  
  <pre><code>const FlatListItem = ({ color1, color2, color3, color4 }) =&gt; (
    const viewWithColorLogic1 = useMemo(()=&gt;_renderViewWithColorLogic(color1), [color1]);
    const viewWithColorLogic2 = useMemo(()=&gt;_renderViewWithColorLogic(color2), [color2]);
    const viewWithColorLogic3 = useMemo(()=&gt;_renderViewWithColorLogic(color3), [color3]);
    const viewWithColorLogic4 = useMemo(()=&gt;_renderViewWithColorLogic(color4), [color4]);
  
    return (
      &lt;View&gt;
        {viewWithColorLogic1}
        {viewWithColorLogic2}
        {viewWithColorLogic3}
        {viewWithColorLogic4}
      &lt;/View&gt;
    );
  );
  
  function renderViewWithColorLogic(color) {
      // do some computationally heavy process
      // ...
  
      return &lt;View&gt;{/* some components */}&lt;/View&gt;;
  }
  </code></pre>