Skip to content
CS 484: Secure Web Application Development

Homework 5: Optimization

Due: Friday, December 6, 2024 at 2:00:00 PM

Quickstart

Create a new private repository under your own GitHub account from this template.

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

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

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

Your submission should properly implement optimization techniques according to the instructions for each of the problems.

Testing

To test your implementation, run npm run test.

Points Breakdown

ProblemPoints
Web Workers25
useMemo25
useCallback25
List Virtualization25

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

This homework is due on Friday, December 6, 2024 at 2:00:00 PM.