title: React Hook Search Input Filter | When i update my object arrays of items, the useEffect not reload the items
body: <p>Everyone!</p>
  <p>Im i little bit locked, in the implementation of React Hook input search filter field.</p>
  <p>I have an array of objects and when I update it, the filter I defined does not update and generates the illusion that it does not work, but it works after entering a word in the search input,
  I am not being able to update the item list.</p>
  <p>I am new to react hooks and I would not be understanding how to update this field so that it finally works for me.</p>
  <p>Can you give me a hand</p>
  <pre><code>export function HomeScreen({ navigation }) {
    const userData = useContext(UserContext);
    const dataDelivery = userData.dataDelivery.filter(re =&gt; re.task_status === 'Pendiente')
    const [searchTerm, setSearchTerm] = React.useState(&quot;&quot;);
    const [searchResults, setSearchResults] = React.useState(dataDelivery);
  
    React.useEffect(() =&gt; {
      const results = dataDelivery.filter(delivery =&gt; (
        // delivery.id.includes(searchTerm) ||
        delivery.firstname.toLowerCase().includes(searchTerm.toLowerCase()) ||
        delivery.lastname.toLowerCase().includes(searchTerm.toLowerCase()) ||
        String(delivery.document).includes(searchTerm) ||
        String(delivery.door).includes(searchTerm) ||
        delivery.street.toLowerCase().includes(searchTerm.toLowerCase())
      ));
      console.log(results.length)
      setSearchResults(results);
      
    }, [searchTerm]);
  
    return (
      &lt;View style={styles.container}&gt;
        &lt;HeaderBar navigation={navigation} /&gt;
  
        &lt;View style={[styles.updateIcon]}&gt;
          &lt;Text style={{ color: '#fff', fontSize: 20, alignSelf: 'center', marginVertical: 10 }}&gt; Hola {userData.firstname}! &lt;/Text&gt;
          {/* &lt;Feather name=&quot;refresh-ccw&quot; size={50} color=&quot;#fff&quot; /&gt; */}
          &lt;Text style={{ color: '#eee', fontSize: 20 }}&gt;TENES {dataDelivery.length} CUPOS DE ALIMENTOS&lt;/Text&gt;
          &lt;Text style={{ color: '#eee', fontSize: 20 }}&gt;&lt;Text style={{ color: '#eee', fontSize: 20, fontStyle: 'italic', fontWeight: '700' }}&gt;pendientes&lt;/Text&gt; POR REPARTIR &lt;/Text&gt;
          &lt;SearchFilterBox value={searchTerm} handleChange={text =&gt; setSearchTerm(text)} /&gt;
        &lt;/View&gt;
  
        {/* {searchResults.map(delivery =&gt; (
          &lt;DeliveryBox item={delivery} /&gt;
        ))} */}
  
        &lt;DeliveryBox dataset={searchResults} /&gt;
      &lt;/View&gt;
    );
  }
  
  export function DeliveryBox({ dataset }) {
      // console.log('dataset de items:',dataset)
      const handlePersonEntityDelivery = async () =&gt; new Promise((resolve) =&gt; {
          Alert.alert(
              &quot;Iniciar entrega : Paso 1&quot;,
              &quot;Seleccione el destinatario de la entrega&quot;,
              [
                  {
                      text: &quot;Titular&quot;,
                      onPress: () =&gt; resolve('Titular')
  
                  },
                  {
                      text: &quot;No Titular/Familiar&quot;,
                      onPress: () =&gt; resolve('No Titular/Familiar')
                  },
                  // {
                  //     text: &quot;Institución&quot;,
                  //     onPress: () =&gt; resolve('Institucion')
                  // },
                  {
                      text: &quot;Cancelar&quot;,
                      onPress: () =&gt; resolve('Salir')
                  }
              ],
              { cancelable: false }
          );
      });
      const handleItHasDocument = async () =&gt; new Promise((resolve) =&gt; {
          Alert.alert(
              &quot;Iniciar entrega : Paso 2&quot;,
              &quot;Seleccione Si posee o no documento&quot;,
              [
                  {
                      text: &quot;Escanear DNI&quot;,
                      onPress: () =&gt; resolve(true)
                  },
                  {
                      text: &quot;Sin DNI&quot;,
                      onPress: () =&gt; resolve(false)
                  },
                  {
                      text: &quot;Cancelar&quot;,
                      onPress: () =&gt; resolve('Salir')
                  }
              ],
              { cancelable: false }
          );
      });
  
      const handleSelectedDelivery = async (item) =&gt; {
          const person_entity = await handlePersonEntityDelivery();
          
          if(person_entity === 'Salir' || hasDocument === 'Salir')
              return;
  
          const hasDocument = await handleItHasDocument();
          
          if(hasDocument === 'Salir' || hasDocument === 'Salir')
              return;
  
          hasDocument
              ? RootNavigation.navigate('Barcode', { ...item, hasDocument, person_entity })
              : RootNavigation.navigate('Camara', { ...item, delivery_detail:{}, hasDocument, person_entity })
      }
      
      const renderItemDelivery = ({ item }) =&gt; (
          &lt;View style={styles.container}&gt;
              &lt;View style={styles.card}&gt;
                  &lt;TouchableOpacity
                      onPress={() =&gt; (Alert.prompt(&quot;Asignar Número de bolsa&quot;, &quot;Indicar un ID&quot;))}
                  &gt;
                      &lt;Image source={require('../assets/box_icon.png')} style={{ width: 50, height: 50, borderRadius: 10 }} /&gt;
                      &lt;Text style={styles.boxId}&gt;ID:{item.id}&lt;/Text&gt;
                  &lt;/TouchableOpacity&gt;
                  &lt;View style={{ flex: 1, flexDirection: 'column', paddingLeft: 10 }}&gt;
                      &lt;Text&gt;Titular: {item.firstname} {item.lastname}&lt;/Text&gt;
                      &lt;Text&gt;Domicilio: {item.street} {item.door}&lt;/Text&gt;
                      &lt;Text&gt;DNI: {item.document}&lt;/Text&gt;
                  &lt;/View&gt;
                  &lt;TouchableOpacity style={{ alignItems: 'center' }} onPress={() =&gt; (handleSelectedDelivery(item))}&gt;
                      &lt;Entypo name={'hand'} size={30} color='#4A8FC7' /&gt;
                      &lt;Text style={{ alignSelf: 'flex-end' }}&gt;Entregar&lt;/Text&gt;
                  &lt;/TouchableOpacity&gt;
              &lt;/View&gt;
          &lt;/View&gt;
      )
  
  
      return (
          &lt;FlatList
              scrollEnabled
              data={dataset}
              renderItem={renderItemDelivery}
              keyExtractor={item =&gt; item.id}
          /&gt;
      );
  
  }
  
  </code></pre>
  <p>Thanki u</p>