React-хук для эффективного рендеринга сторов хранящих массивы данных. Каждый элемент будет мемоизирован и обновлен только при изменении его данных

Когда нужно использовать useList?

useList решает конкретную задачу эффективного рендера списков, с useList можно не проставлять key у списков компонентов и там реализован более оптимальный ререндер. Если есть ощущение что требуется что-то еще, то значит фича переросла useList и стоит использовать useStoreMap. С useStoreMap можно взять конкретные данные из store оптимальным образом, если нужен не весь store а только его часть

API

Сокращённая запись

Формула

function useList(store: Store<T[]>, fn: (item: T, key: number) => React.ReactNode): React.ReactNode;

Аргументы

1. store: Стор с массивом данных

2. fn: (item: T, key: number) => React.ReactNode

   Рендер-функция для отображения в ui отдельного элемента массива. Явная простановка key реакт-элементам внутри рендер-функции не требуется, ключ элемента проставляется автоматически

   Аргументы

   • item: Элемент массива
   • key: Индекс элемента, выступает как ключ для React

   Возвращает: React.ReactNode

Возвращает

React.ReactNode

Полная запись

Используется, когда необходимо вычислять ключ элемента или обновлять элементы при изменении какого-либо внешнего значения, доступного только через React (например, поля props из замыкания компонента или состояния другого стора)

По умолчанию useList обновляется только тогда, когда некоторые из его элементов были изменены. Однако иногда необходимо обновлять элементы при изменении какого-либо внешнего значения (например, поля props или состояния другого стора). В таком случае нужно сообщить React о дополнительных зависимостях, в таком случае элемент будет перерендерен и в случае их изменения

Формула

function useList(
  store: Store<T[]>,
  config: {
    keys: any[];
    fn: (item: T, key: React.Key) => React.ReactNode;
    getKey?: (item: T) => React.Key;
  },
): React.ReactNode;

Аргументы

1. store: Стор с массивом данных

2. config: Объект конфигурации

   • keys: Массив зависимостей, которые будут переданы в React

   • fn: (item: T, key: React.Key) => React.ReactNode

     Рендер-функция для отображения в ui отдельного элемента массива. Явная простановка key реакт-элементам внутри рендер-функции не требуется, ключ элемента проставляется автоматически

     Аргументы

     • item: Элемент массива
     • key: Ключ элемента, вычисляется с помощью getKey, если есть, в противном случае используется индекс элемента

     Возвращает: React.ReactNode

   • getKey?: (item: T) => React.Key

     Функция для вычисления ключа элемента на основе данных. Полученный ключ будет передан в React

     Аргументы

     • item: Элемент массива

     Возвращает: React.Key

   • placeholder?: React.ReactNode Опциональный реакт-элемент который будет использован в случае пустого массива

Возвращает

React.ReactNode

Примеры

Пример 1

import { createStore } from "effector";
import { useList } from "effector-react";

const $users = createStore([
  { id: 1, name: "Yung" },
  { id: 2, name: "Lean" },
  { id: 3, name: "Kyoto" },
  { id: 4, name: "Sesh" },
]);

const App = () => {
  const list = useList($users, ({ name }, index) => (
    <li>
      [{index}] {name}
    </li>
  ));

  return <ul>{list}</ul>;
};

Запустить пример

Пример 2

import { createStore, createEvent } from "effector";
import { useList } from "effector-react";

const addTodo = createEvent();
const toggleTodo = createEvent();

const $todoList = createStore([
  { text: "write useList example", done: true },
  { text: "update readme", done: false },
])
  .on(toggleTodo, (list, id) =>
    list.map((todo, i) => {
      if (i === id)
        return {
          ...todo,
          done: !todo.done,
        };
      return todo;
    }),
  )
  .on(addTodo, (list, e) => [
    ...list,
    {
      text: e.currentTarget.elements.content.value,
      done: false,
    },
  ]);

addTodo.watch((e) => {
  e.preventDefault();
});

const TodoList = () =>
  useList($todoList, ({ text, done }, i) => {
    const todo = done ? (
      <del>
        <span>{text}</span>
      </del>
    ) : (
      <span>{text}</span>
    );
    return <li onClick={() => toggleTodo(i)}>{todo}</li>;
  });
const App = () => (
  <div>
    <h1>todo list</h1>
    <form onSubmit={addTodo}>
      <label htmlFor="content">New todo</label>
      <input type="text" name="content" required />
      <input type="submit" value="Add" />
    </form>
    <ul>
      <TodoList />
    </ul>
  </div>
);

Запустить пример

Пример с конфигурацией

import ReactDOM from "react-dom";
import { createEvent, createStore, restore } from "effector";
import { useUnit, useList } from "effector-react";

const renameUser = createEvent();
const $user = restore(renameUser, "alice");
const $friends = createStore(["bob"]);

const App = () => {
  const user = useUnit($user);
  return useList($friends, {
    keys: [user],
    fn: (friend) => (
      <div>
        {friend} is a friend of {user}
      </div>
    ),
  });
};

ReactDOM.render(<App />, document.getElementById("root"));
// => <div> bob is a friend of alice </div>

setTimeout(() => {
  renameUser("carol");
  // => <div> bob is a friend of carol </div>
}, 500);

Запустить пример