title: How to avoid rendering FlatList after change state
body: <p>I have an array of objects that I display using FlatList .</p>
  <p>In my parent component, I have a state <code>isModalDeleteVisible</code> and a button that allows to change this state .</p>
  <p>When I press the button (= that I change the state), the whole FlatList is rendering again (I see it at <code>console.log()</code> which is redisplayed).</p>
  <p>I understood that a change of state rerend the whole component; I also know that <code>useCallback()</code> helps prevent this by memorizing a function . But in this specific situation I cannot prevent the re-rendering of FlatList</p>
  <p><code>IndexScreen.js</code> :</p>
  <pre><code>... 
  const IndexScreen = () =&gt; {
    const [isModalDeleteVisible, setModalDeleteVisible] = useState(false)
  
    const onDelete = useCallback(
      () =&gt; setModalDeleteVisible(!isModalDeleteVisible),
      [isModalDeleteVisible]
    )
  
    const listRenderItem = ({ item, index }) =&gt; {
      return (
        &lt;Children
          item={item}
          index={index}
        /&gt;
      )
    }
  
    return (
      &lt;Template&gt;
        &lt;Button
          onPress={onDelete}
        /&gt;
        &lt;FlatList
          data={dataList}
          renderItem={listRenderItem}
          keyExtractor={(item) =&gt; item.id}
        /&gt;
      &lt;/Template&gt;
    )
  }
  
  export default IndexScreen
  </code></pre>
  <p><code>Children.js</code> :</p>
  <pre><code>...
  
  const Children = ({ item }) =&gt; {
  
    console.log(item.id)
  
    return (
       ...
    )
  }
  
  export default Children
  </code></pre>