← All tasksReact · Senior

Unnecessary row renders

The code in the editor works, but every click on the counter re-renders every row of the list - you can check that with onRowRender, which a row calls on each of its renders.

Make a row render only when its own props change: clicking the counter must not render the rows, and removing one row must not render the others. Don't change the markup or the texts.

// 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 runs the tests. Tab indents; to leave the editor with the keyboard, press Esc and then Tab. Your code is saved in this browser.

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