Флажок React list child задерживается при изменении родительского состояния

Question

Уверен, я здесь упускаю что-то очевидное!

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

Parent:

const Results = ({results}) => {
  const [selected, setSelected] = React.useState([])
  return (
    <div>
      <h2>Results</h2>
      {results.map((result) => (
        <Card
          key={result.id}
          selected={selected.includes(result.id)}
          onChange={() => {
            if (selected.includes(result.id) {
              setSelected(selected.filter((id) => id !== result.id))
            } else {
              setSelected([...selected, result.id])
            }
          }
        />
      )}
    </div>
  )
}

Child:

const Card = ({selected, onChange}) => (
  <div>
    <input
      type="checkbox"
      selected={selected}
      onChange={onChange}
    />
  </div>
)

Это потому, что каждый раз, когда флажок меняется, он заставляет родителя перерисовывать себя и своих детей? Я вижу, что фактическое обновление списка в состоянии родителей происходит быстро, но визуальное изменение флажка затем задерживается. Каков наилучший способ обеспечить быстрое изменение флажка при нажатии, а также обновление списка отмеченных элементов в родительском элементе?

РЕДАКТИРОВАТЬ

Я также пытался с useEffect ...

Родитель:

const Results = ({results}) => {
  const [selected, setSelected] = React.useState([])
  return (
    <div>
      <h2>Results</h2>
      {results.map((result) => (
        <Card
          key={result.id}
          onChange={() => {
            if (selected.includes(result.id) {
              setSelected(selected.filter((id) => id !== result.id))
            } else {
              setSelected([...selected, result.id])
            }
          }
        />
      )}
    </div>
  )
}

Ребенок:

const Card = ({onChange}) => {
  const [selected, setSelected] = React.useState(false)

  React.useEffect(() => {
    onChange(fault.faultUuid)
  }, [selected])

  return (
    <div>
      <input
        type="checkbox"
        selected={selected}
        onChange={() => setSelected(!selected)}
      />
    </div>
  )
}

РЕШЕНИЕ

Я нашел это каждый компонент в списке делал запрос GraphQL каждый раз, когда был установлен / снят любой флажок.

Answer 1

Вы сможете решить эту проблему, используя памятку для ваших Card компонентов.

Примерно так:

import React, { memo } from 'react'

const Card = memo(({selected, onChange}) => (
  <div>
    <input
      type="checkbox"
      selected={selected}
      onChange={onChange}
    />
  </div>
))

Это означает, что ваши Card компоненты будут только повторно рендер при смене реквизита.