функция уменьшения продолжает обновлять значения при монтировании

#reactjs

Вопрос:

Я пытаюсь объединить все идентификаторы в один и добавить 1 акцию, как это

 const products = [{_id: 1, stock: 0, name: xxx}, {_id: 2, stock: 0, name: yyy}, {_id: 2, stock: 0, name: yyy}, {_id: 1, stock: 0, name: xxx}]
 

Я хочу получить результат:

 const products = [{_id: 1, stock: 2, name: xxx}, {_id: 2, stock: 2, name: yyy}]
 

Я попытался добиться этого с помощью reduce, это работает, но каждый раз, когда компонент монтируется, он снова добавляет запас, поэтому после 5 повторных отправок я получаю

 const products = [{_id: 1, stock: 10, name: xxx}, {_id: 2, stock: 10, name: yyy}]
 

Мой код сокращения:

 const [products, setProducts] = useState<any>([])

const mapProducts = () => {
        const output = authenticatedUser.products.reduce((acc: any, next: any) => {
            // Check if an item with the given date exists
            const existingItem = acc.find((item: any) => item._id === next._id)
            // If not, add the new one to the array
            if (!existingItem) {
                return [...acc, next]
            }
            // If there's one already, mutate the value property and return everything
            existingItem.stock  = next.stock
            return acc
        }, [])
        setProducts(output)
    }

useEffect(() => {
        mapProducts()
    }, [])
 

Я знаю, что функция повторяется, потому что она используется эффективно

Но даже если я установлю продукты в качестве пустого массива при демонтаже

 //on demount
useEffect(() => () => {setProducts([])},[])
 

Я все еще получаю в наличии.

Поэтому, когда я запускаю свое приложение, все выглядит нормально, но я меняю страницу (меняю компонент), а затем возвращаюсь, запас всегда обновляется новыми значениями. Я хочу, чтобы функция запускалась только один раз, когда