mockfirebase | Firebase mock library for writing unit tests | Mock library

The problem is not in useEffect. It's about mutating a global userIngredientsList array.

1. from useEffect you set initial component state to be userIngredientsList.
2. Then inside addIngredienHandler you call Post(). This function does two things: 2a. pushes the new ingredient to the global userIngredientsList array`. Since it's the same instance as you saved in your state in step 1, your state now contains this ingredient already. 2a. Returns this ingredient
3. Then, addIngredienHandler adds this ingredient to the state again - so you end up having it in the state twice.

Fix 1 Remove userIngredientsList.push(ingredient); line from your Post function.

Fix 2 Or, if you need this global list of ingredients for further usage, you should make sure you don't store it in your component state directly, and instead create a shallow copy in your state: