Project 21: Music Player UI

React Engineer

Builds on these lessons

Step 1 of 2

Project

Skipping Re-renders with React.memo

Wrap TrackRow in React.memo(TrackRow). Normally, when a parent re-renders, every child re-renders with it — memo skips a child's re-render entirely if its props are shallow-equal to last time, which matters once a playlist has hundreds of rows.

🎯 Your Task

Please add the exact code shown in the light gray box below to your editor.Do not delete your previous code, just insert these new lines in the correct place!

import { memo } from "react";

const TrackRow = memo(function TrackRow({ title, artist }) {
  return (
    <div>
      {title} — {artist}
    </div>
  );
});

export default function Playlist({ tracks }) {
  return (
    <div>
      {tracks.map((track) => (
        <TrackRow key={track.id} title={track.title} artist={track.artist} />
      ))}
    </div>
  );
}

← Previous Next →