useList

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

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

Формула

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

note

Опция getKey добавлена в effector-react 21.3.0

note

Опция placeholder добавлена в effector-react 22.1.0

Примеры

Пример 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 {useStore, useList} from 'effector-react'

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

const App = () => {
  const user = useStore($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)

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