title: slow animation in a react native flatlist card
body: <p>I have a FlatList that contains cards, and in each card I have a nested component that shows a button with animation on click (similar to instagram like), when I added a dispatch to OnPress event I manage to update the GlobalContext but I noticed that the animation become too slow, and after debugging, I found that all the cards are re-rendered, can someone guide me to resolve this performence issue</p>
  <p>Here is the code</p>
  <p>FlatList.js</p>
  <pre><code>class FlatListScreen extends Component {
    static contextType = GlobalContext;
    constructor(props) {
      super(props);
    }
  
     addItemToFavoriteList = (item) =&gt; {
      let { favoriteDispatch } = this.context;
      favoriteDispatch({
      type: ADD_TO_FAVORITE,
      payload: item,
    });
    };
  
    renderRow = ({ item }) =&gt; {
      return (
        &lt;CardItem
          addToFavoriteList={() =&gt; this.addItemToFavoriteList(item)}
        /&gt;
      );
    };
    ...
  
  }
  </code></pre>
  <p>FavoriteButton.js</p>
  <pre><code>const FavoriteButton = ({
    itemClicked,
    color = &quot;red&quot;,
   
  }) =&gt; {
    const [favorite, setFavorite] = useState(false);
  
    const toggleFavorite = () =&gt; {
      setFavorite(!favorite);
      itemClicked();
    };
  
    return (
      &lt;TouchableOpacity
        onPress={() =&gt; toggleFavorite()}
      &gt;
        &lt;MaterialCommunityIcons
          name={favorite ? &quot;heart&quot; : &quot;heart-outline&quot;}
          color={favorite ? &quot;green&quot; : &quot;red&quot;}
        /&gt;
      &lt;/TouchableOpacity&gt;
  
      ...
  }
  </code></pre>
  <p>CardItem.js</p>
  <pre><code>class CardItem extends React.PureComponent {
    constructor(props) {
      super(props);
    }
  
  
     render() {
      return (
        &lt;TouchableWithoutFeedback&gt;
          &lt;View&gt;
            &lt;Image source={{ uri: this.props.image }} /&gt;
            &lt;View&gt;
                &lt;FavoriteButton
                  itemClicked={this.props.addToFavoriteList}
                  
                /&gt;
  
                ...
  
        &lt;/TouchableWithoutFeedback&gt;
  
     }
  }
  </code></pre>
  <p>Provider.js</p>
  <pre><code>export const GlobalContext = createContext({});
  
  const GlobalProvider = ({ children }) =&gt; {
    const [favorites, favoriteDispatch] = useReducer(favoriteReducer, []);
  
    const contextValue = useMemo(
      () =&gt; [favorites, favoriteDispatch],
      [favorites, favoriteDispatch]
    );
  
    return (
      &lt;GlobalContext.Provider value={contextValue}&gt;
        {children}
      &lt;/GlobalContext.Provider&gt;
    );
  };
  
  export default GlobalProvider;
  </code></pre>