Как разрешить useEffect запускаться только один раз, как в React 18?

У меня была такая же проблема, пока я не прочитал раздел «Глубокое погружение» в Извлечение данных с помощью эффектов в документации React.

Соответствующий бит:

Этот список недостатков не относится только к React. Это относится к получение данных при монтировании с помощью любой библиотеки. Как и в случае с маршрутизацией, данные извлечение не является тривиальной задачей, поэтому мы рекомендуем следующее подходы:

• Если вы используете фреймворк, используйте его встроенный механизм получения данных. Современные фреймворки React имеют интегрированные механизмы получения данных, которые эффективны и не страдают от вышеперечисленных недостатков.
• В противном случае рассмотрите возможность использования или создания кэша на стороне клиента. Популярные решения с открытым исходным кодом включают React Query, useSWR и React Router. 6,4+. Вы также можете создать свое собственное решение, и в этом случае вы будете использовать эффекты «под капотом», а также добавить логику для дедупликации запросов. кэширование ответов и избежание сетевых водопадов (путем предварительной загрузки данных или повышение требований к данным для маршрутов).

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

import useSWR from 'swr'
 
function Profile() {
  const { data, error, isLoading } = useSWR('/api/user', fetcher)
 
  if (error) return <div>failed to load</div>
  if (isLoading) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}

Впоследствии я убедился, что Извлечение происходит только один раз, счастливых дней...

Итак, для вашего кода это будет что-то вроде:

import useSWR from 'swr'

const App => {
    const [image, SetImage] = useState('');

    async function fetchImage(url) {
        //...
        await response = fetch(url);
        SetImage(response);
    }

    const { data, error, isLoading } = useSWR('API-to-get-base64image', fetchImage)

    return (
        <div><img src = {image}/> </div>
    )
}