← Усі задачіReact · Senior

Зайві рендери рядків

Код у редакторі працює, але кожне натискання лічильника перерендерює всі рядки списку - перевірити це допомагає onRowRender, який рядок викликає на кожному своєму рендері.

Зробіть так, щоб рядок рендерився лише тоді, коли змінилися його власні пропси: натискання лічильника не повинне рендерити рядки, а видалення одного рядка - решту. Розмітку й тексти не змінюйте.

// Works, but every click on the counter re-renders every row.
// Make the rows re-render only when their own props change.
function Row({ item, onRemove, onRender }) {
  onRender(item);
  return (
    <li data-testid="row">
      <span>{item}</span>
      <button onClick={() => onRemove(item)}>Remove {item}</button>
    </li>
  );
}

function App({ onRowRender }) {
  const [count, setCount] = useState(0);
  const [items, setItems] = useState(["a", "b", "c"]);

  const remove = (item) => setItems(items.filter((x) => x !== item));

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Clicked {count}</button>
      <ul>
        {items.map((item) => (
          <Row key={item} item={item} onRemove={remove} onRender={onRowRender} />
        ))}
      </ul>
    </div>
  );
}

Ctrl+Enter - запустити тести. Tab - відступ; щоб вийти з редактора клавіатурою, натисніть Esc, а потім Tab. Код зберігається в цьому браузері.

Тести (4)

const onRowRender = fn();
render(<App onRowRender={onRowRender} />);
expect(onRowRender).toHaveBeenCalledTimes(3);

const onRowRender = fn();
render(<App onRowRender={onRowRender} />);
fireEvent.click(screen.getByRole('button', { name: 'Clicked 0' }));
fireEvent.click(screen.getByRole('button', { name: 'Clicked 1' }));
expect(screen.getByRole('button', { name: 'Clicked 2' })).toBeTruthy();
expect(onRowRender).toHaveBeenCalledTimes(3);

const onRowRender = fn();
render(<App onRowRender={onRowRender} />);
fireEvent.click(screen.getByRole('button', { name: 'Remove b' }));
expect(screen.getAllByTestId('row').map((row) => row.firstChild.textContent)).toEqual(['a', 'c']);
expect(onRowRender).toHaveBeenCalledTimes(3);

const onRowRender = fn();
render(<App onRowRender={onRowRender} />);
fireEvent.click(screen.getByRole('button', { name: 'Remove a' }));
fireEvent.click(screen.getByRole('button', { name: 'Remove c' }));
expect(screen.getAllByTestId('row').map((row) => row.firstChild.textContent)).toEqual(['b']);