← Alle AufgabenReact · Senior

Unnötige Renders von Zeilen

Der Code im Editor funktioniert, aber jeder Klick auf den Zähler rendert jede Zeile der Liste neu: das lässt sich mit onRowRender prüfen, das eine Zeile bei jedem ihrer Renders aufruft.

Sorge dafür, dass eine Zeile nur rendert, wenn sich ihre eigenen Props ändern: ein Klick auf den Zähler darf die Zeilen nicht rendern, und das Entfernen einer Zeile darf die anderen nicht rendern. Markup und Texte bleiben unverändert.

// 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>
  );
}

Strg+Enter führt die Tests aus. Tab rückt ein; um den Editor per Tastatur zu verlassen, drücke Esc und dann Tab. Der Code wird in diesem Browser gespeichert.

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