Пустой массив в useEffect vs useCallback в родительском для вызова API сервера

Question

Я делаю вызов api на свой сервер при монтировании компонента, поэтому сначала я сделал это с пустым массивом в useEffect:

useEffect(() =>  {
    fetch('http://localhost:8080/api/chat/auth/getChats?pageSize=3',{
        headers: {
            'Authorization': localStorage.getItem('Authorization')
        }
    }).then(data => data.json())
      .then(data => setUserChats(data))              
}
}, [])

Но есть предупреждение о зависимостях, и в нем говорится об использовании обратного вызова в родительском, но я не понимаю, в чем разница между запоминанием метода с пустым массивом в родительском и просто пустым массивом в действительности:

Родитель. js:

const setChatsCallback = useCallback(chats => {
    setChats(chats)
  }, [])

Child. js:

useEffect(() =>  {
    fetch('http://localhost:8080/api/chat/auth/getChats?pageSize=3',{
        headers: {
            'Authorization': localStorage.getItem('Authorization')
        }
    }).then(data => data.json())
      .then(data => setUserChats(data))         
}, [setChatsContainer])

Также я видел места, где они сначала определяют метод в useEffect, а затем вызывают его, есть ли разница между ними, и просто помещают logi c в useEffect напрямую:

useEffect(() =>  {
    async function doRequest() {
        fetch('http://localhost:8080/api/chat/auth/getChats?pageSize=3',{
            headers: {
                'Authorization': localStorage.getItem('Authorization')
            }
        }).then(data => data.json())
          .then(data => setUserChats(data))               
    }
    doRequest()
}, [setChatsContainer])

И если есть разница, могу ли я просто сделать это с помощью функции самовыполнения:

useEffect(() =>  {
    (async() => {
        fetch('http://localhost:8080/api/chat/auth/getChats?pageSize=3',{
            headers: {
                'Authorization': localStorage.getItem('Authorization')
            }
        }).then(data => data.json())
          .then(data => setUserChats(data))

          smoothscroll.polyfill()
          setChatsContainer(chatsContainer)                
    })()
}, [setChatsContainer])

Answer 1

Ваш useEffect использует setUserChats, полученный из props. Поскольку свойства могут измениться, реакция предполагает, что ваш эффект должен запускаться всякий раз, когда изменяется этот обратный вызов. Таким образом, предупреждение об отсутствии зависимостей.

Определение асинхронного обратного вызова c в строке и вызов его в useEffect требуется, если вы хотите использовать синтаксис async/await вместо Promise.then() в качестве заданного обратного вызова to useEffect не может быть асинхронным c. Если вы используете только .then(), он вам не нужен. Нет практической разницы между определением анонимной стрелочной функции и ее прямым вызовом, а также определением именованной функции и ее вызовом.

Они оба делают то же самое:

useEffect(() =>  {
    fetch('http://localhost:8080/api/chat/auth/getChats?pageSize=3',{
        headers: {
            'Authorization': localStorage.getItem('Authorization')
        }
    }).then(data => data.json())
      .then(data => setUserChats(data))         
}, [setUserChats])

и

useEffect(() =>  {
    (async() => {
        const response = await fetch(
            'http://localhost:8080/api/chat/auth/getChats?pageSize=3',
            {
                headers: {
                    'Authorization': localStorage.getItem('Authorization')
                }
            }
        )

        const data = await response.json()

        setUserChats(data) 
    })()
}, [setUserChats])

Некоторые люди (включая меня) предпочитают синтаксис async/await, так как им легче следить за потоком управления. Обратите внимание, что это мнение.