React Native doesn't trigger useEffect when updating data (Screen isn't rerendered)

mr-woodapple 0
Viewed 55

I'm stuck at a problem - I'm building a receipes app with Firebase Realtime. I've a working prototype, but I'm stuck with an issue where useEffect won't trigger a reload after editing the array [presentIngredients].

This how my presentIngredients is defined (note that presentIngredient is used to store the current user input before the user adds the ingredient. After that, the presentIngredient get's added to the presentIngredients!):

const [ presentIngredients, setPresentIngredients ] = useState([]);
const [ presentIngredient, setPresentIngredient ] = useState('');

My useEffect hook looks like that:

useEffect(() => {
    console.log('useEffect called!')
    return onValue(ref(db, databasePath), querySnapshot => {
      let data = querySnapshot.val() || {};
      let receipeItems = {...data};
      setReceipes(receipeItems);
      setPresentIngredients(presentIngredients);
    })
  }, [])

Here's my code to render the UI for adding/removing existing ingredients:

{ /* adding a to-do list for the ingredients */ }
<View style={styles.ingredientsWrapper}>
  {presentIngredients.length > 0 ? (

    presentIngredients.map((key, value) => (


        <View style={styles.addIngredient} key={value}>
          <Text>{key} + {value}</Text>
          <TouchableOpacity onPress={() => removeIngredient(key)}>
            <Feather name="x" size={24} color="black" /> 
          </TouchableOpacity>
        </View>
    ))
  ) : (
    <Text style={styles.text}>No ingredients, add your first one.</Text>
  )}

  <View style={styles.addIngredientWrapper}>
    <TextInput 
      placeholder='Add ingredients...'
      value={presentIngredient}
      style={styles.text}
      onChangeText={text => {setPresentIngredient(text)}}
      onSubmitEditing={addIngredient} />

    <TouchableOpacity onPress={() => addIngredient()}>
      <Feather name="plus" size={20} color="black" />
    </TouchableOpacity>
  </View>

</View>

And this is my function to delete the selected entry from my presentIngredients array or add one:

  // update the ingredients array after each input
  function addIngredient() {
    Keyboard.dismiss();
    setPresentIngredients(presentIngredients => [...presentIngredients, presentIngredient]);
    setPresentIngredient('');
  }

  // remove items by their key
  function removeIngredient(id) {
    Keyboard.dismiss();
    // splice (remove) the 1st element after the id
    presentIngredients.splice(id, 1);
    setPresentIngredients(presentIngredients);

  }

The useEffect hook isn't triggered when adding an ingredient, however the change is instantly rendered on the screen. If I delete an item, the change isn't noticeable until I reload the screen - what am I doing wrong?

Note that all this is happening before data is send to Firebase.

react-hooks react-native reactjs arrays javascript
2 Answers

Issues

There are a few overt issues I see with the code:

  1. The code uses the array index as the React key, so if you mutate the array, i.e. add, remove, reorder, etc... the index values won't be the same as they were on a previous render cycle per array element. In other words, the React key is the same regardless what value is now at any given index and React likely bails on rerendering.
  2. The removeIngredient callback handler is mutating the existing state instead of creating a new array reference.

Solution

Using the array index as a React key is bad if you are actively mutating the array. You want to use React keys that are intrinsically related to the data so it's "sticky" and remains with the data, not the position in the array being mapped. GUIDs and other object properties that provide sufficient uniqueness within the data set are great candidates.

presentIngredients.map((el, index) => (
  <View style={styles.addIngredient} key={el.id}>
    <Text>{el.key} + {index}</Text>
    <TouchableOpacity onPress={() => removeIngredient(el.id)}>
      <Feather name="x" size={24} color="black" /> 
    </TouchableOpacity>
  </View>
));

Use Array.prototype.filter to remove an element from an array and return a new array reference.

function removeIngredient(id) {
  Keyboard.dismiss();
  setPresentIngredients(presentIngredients => presentIngredients.filter(
    el => el.id !== id
  ));
}

Note above that I'm assuming the presentIngredients data element objects have a GUID named id.

Listening for state updates

The useEffect hook isn't triggered when adding an ingredient, however the change is instantly rendered on the screen.

The single useEffect only exists to run once when the component mounts to fetch the data and populate the local state. If you want to then issue side-effects when the state updates later you'll need a second useEffect hook with a dependency on the state to issue the side-effect.

Example:

useEffect(() => {
  console.log("presentIngredients updated", { presentIngredients });
  // handle side-effect like updating the fire store
}, [presentIngredients]);
Drew Reese0
CristianDTツ0
Related