Homework 5: Optimization
Due: Friday, December 6, 2024 at 2:00:00 PM
Quickstart
Section titled “Quickstart”Create a new private repository under your own GitHub account from this template.
Installing required packages
Section titled “Installing required packages”Open the terminal window and type in npm install. This will install all the
dependencies listed in the package.json file.
Skeleton code
Section titled “Skeleton code”The homework provided is focused on optimizing React applications using various
performance-enhancing techniques. You will work through four problems, each located in the /src/components folder.
- Prevent UI blocking with Web Workers
- Memoize expensive calculation results with useMemo
- Optimize event handlers with useCallback and memo
- Virtualize long lists with react-window
Running the application
Section titled “Running the application”To run the application, type npm run dev in the terminal. This will start the development server and open the application in your default web browser.
Deliverables
Section titled “Deliverables”Your submission should properly implement optimization techniques according to the instructions for each of the problems.
Testing
Section titled “Testing”To test your implementation, run npm run test.
Points Breakdown
Section titled “Points Breakdown”| Problem | Points |
|---|---|
| Web Workers | 25 |
| useMemo | 25 |
| useCallback | 25 |
| List Virtualization | 25 |
Extra Credit
Section titled “Extra Credit”You can earn extra credit by implementing meaningful test cases and submitting them to the TA before Wednesday, December 4, 2024 at 2:00:00 PM.
Due Date
Section titled “Due Date”This homework is due on Friday, December 6, 2024 at 2:00:00 PM.