Как правильно хранить данные и создавать новые блоки без перерисовки всего компонента при скролле?

Question

[Boris007]

При загрузке страницы в useEffect идет запрос для получения первых 10 продуктов
При скролле вниз, за 300px до конца происходит вызов функции async getProducts(query), который мы изначально запускали в useEffect
Как я понимаю, все предыдущие данные всегда нужно сохранять в useRef, но при обновления стейта при получении новых, у нас все равно обновляется весь компонент списка, а не добавляется еще 10 записей.
Как в реакте правильно реализовывается бесконечный скролл с добавлением блоков?

Comments

[godsplane]

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

Answer 1

[fkk]

В общем виде, я бы делал как-то так:

const LIMIT = 10;

const getProducts = async (offset, limit) => { ... }

function App () {
  const [offset, setOffset] = useState(0);
  const [products, setProducts] = useState([])

  useEffect(() => {
    getProducts(offset, LIMIT).then(products => setProducts(v => [...v, ...products]))
  }, [offset]);

  return <RenderProducts onScroll={() => { // increment offset }} />
}

Конечно, ваш бекенд должен уметь отдавать данные по limit & offset.
И лучше вынести всю работу с данными в стор, тогда не нужен будет уродливый useEffect.

Что-то вроде (nanostores):

// store.ts
const LIMIT = 30;

export const $products = map({
  offset: 0,
  products: [],
  isLoading: true
})

onMount($products, () => {
  fetchProducts()
})

const fetchProducts = action($products, "fetchProducts", async store => {
  const { products, offset } = store.get();

  // TODO: add error handling
  store.setKey("isLoading", true);
  const newPartOfProducts = await api.getProducts(offset, LIMIT);
  store.setKey("products", [...products, ...newPartOfProducts ]);
  store.setKey("isLoading", false);
});

const incrementOffset = action($products, "incrementOffset", store => {
  const { offset } = store.get();
  store.setKey("offset", offset + LIMIT);
  fetchProducts()
})

export const $productsMutations = { incrementOffset }

// App.tsx

function App () {
  const { isLoading, products } = useStore($products)

  return (
    <Fragment>
      <RenderProducts onScroll={$productsMutations.incrementOffset} products={products} />
      {isLoading && <LoadingIndicator />}
    </Fragment>
  )
}

Comments

[Boris007]

const LIMIT = 10;

const getProducts = async (offset, limit) => { ... }

function App () {
  const [offset, setOffset] = useState(0);
  const [products, setProducts] = useState([])

  useEffect(() => {
    getProducts(offset, LIMIT).then(products => setProducts(v => [...v, ...products]))
  }, [offset]);

  return <RenderProducts onScroll={() => { // increment offset }} />
}

Немного не понял, как они тут будут добавлять блоки
v => [...v, ...products] зачем мы здесь делаем так, а не просто setProducts(pdoducts)?
В onscroll будет у нас так же setProducts(v => [...v, ...products]?
Я делал похожий сценарий, но с setProducts(pdoducts) и в useEffect был пустой массив

useEffect(() => {
    getProducts(offset, LIMIT).then(products => setProducts(products))
  }, []);

Подскажи пожалуйста, для чего мы в useEffect в массив добавляем products?
Когда я читал об этом, понял, что вроде он кэширует это значение и что при повторных срабатываниях useEffect, если значение у products осталось тем же, что компонент не перерисовывается
И для чего setProductsнужно через колбек значение передавать?
setProducts(v => [...v, ...products]

[fkk]

Boris007, ну дупостим у тебя щас первые 10 продуктов в стейте, потом ты доскролил и делается запрос на продукты с 10 до LIMIT и массивы сливаются в один:

const v = ["product1", "products2"]
const v2 = ["product3", "products4"]

console.log([...v, ...v2])
/// ['product1', 'products2', 'product3', 'products4']

[Boris007]

fkk, спасибо!
Подскажи еще пожалуйста

useEffect(() => {
    getProducts(offset, LIMIT).then(products => setProducts(v => [...v, ...products]))
  }, [offset]);

Что нам дает добавление в массив[offset] в концу useEffect?
Я просто так и не понял его смысл, что я оставляю всегда пустой массив и меняю просто значение в стейте, что добавлял сюда значение стейта, разницы никакой.

[fkk]

Boris007, то, что, при изменении offset у тебя отрабатывает заново useEffect.

[Boris007]

fkk, Спасибо!!
т.е. это на тот случай, что я вешаю useState на кнопку и при обновлении стейта я еще раз запускаю useEffect, чтобы подгрузить данные, для этого?
Или в каких случаях это используется?

[fkk]

Boris007, Да, именно для этого

Answer 2

[Mikhail Osher]

setState(prevItem => [...prevItems, ...newItems]) 
<ItemComponent key={item.id}>...</ItemComponent>

Comments

[Boris007]

Как у тебя запускается это выражение?
setState(prevItem => [...prevItems, ...newItems])

У меня похожий пример

const response = await fetch(url + query).then(data => data.json())
setData(v => [...v, response])

Но вылетает ошибка

Argument of type '(v: never[]) => any[]' is not assignable to parameter of type 'SetStateAction<never[]>'.
  Type '(v: never[]) => any[]' is not assignable to type '(prevState: never[]) => never[]'.
    Type 'any[]' is not assignable to type 'never[]'.
      Type 'any' is not assignable to type 'never'.

[Mikhail Osher]

Надо типизировать useState и fetch.