← Wszystkie zadaniaReact · Senior

Zbędne rendery wierszy

Kod w edytorze działa, ale każde kliknięcie licznika renderuje ponownie wszystkie wiersze listy - można to sprawdzić przez onRowRender, który wiersz wywołuje przy każdym swoim renderze.

Spraw, żeby wiersz renderował się tylko wtedy, gdy zmienią się jego własne propsy: kliknięcie licznika nie może renderować wierszy, a usunięcie jednego wiersza - pozostałych. Nie zmieniaj znaczników ani tekstów.

// 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 uruchamia testy. Tab robi wcięcie; aby wyjść z edytora klawiaturą, naciśnij Esc, a potem Tab. Kod zapisuje się w tej przeglądarce.

Testy (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']);