React Native + Firestore infinite l oop, используя хуки

Question

только начинаю изучать хуки здесь.

Я получаю данные из firestore и пытаюсь установить их в состояние с помощью хуков. когда я раскомментирую строку, делая это, я застреваю в бесконечном l oop. ошибки нет, но консоль сходит с ума, регистрируя состояние тысячи раз.

Дайте мне знать, если вам нужна дополнительная информация!

function Lists(props) {

    const [lists, setLists] = useState([])
    const [loading, setLoading] = useState(true)

    useEffect(() => {
        const subscriber = 
            firestore().collection('users').doc(props.user).collection('lists')
              .onSnapshot(QuerySnapshot => {
                  const items = []
                  QuerySnapshot.forEach(documentSnapshot => {
                      items.push({
                          ...documentSnapshot.data(),
                          key: documentSnapshot.id,
                      });
                    //setLists(items)

                    setLoading(false)

                    console.log(lists)
                  })

            })
            // unsubscribe from firestore
            return () => subscriber();
    })

//rest of func..

Answer 1

эта проблема возникает из-за того, что useEffect вызывается снова и снова. useEffect похож на componentDidMount и componentDidUpdate, если вы знакомы с компонентами класса React.

поэтому всякий раз, когда вы устанавливаете состояние внутри useEffect, вы запускаете обновление, а затем useEffect вызывается снова, и, таким образом, бесконечный l oop.

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

 useEffect(() => {
        const subscriber = 
            firestore().collection('users').doc(props.user).collection('lists')
              .onSnapshot(QuerySnapshot => {
                  const items = []
                  QuerySnapshot.forEach(documentSnapshot => {
                      items.push({
                          ...documentSnapshot.data(),
                          key: documentSnapshot.id,
                      });
                    //setLists(items)

                    setLoading(false)

                    console.log(lists)
                  })

            })
            // unsubscribe from firestore
            return () => subscriber();
    }, []) // <------------ the second argument we talked about