React Performance Optimization Assessment

Welcome to the React Performance Optimization Assessment! This project is designed to evaluate your ability to identify and resolve performance bottlenecks in a real-world React application, as well as implement smooth, user-friendly task editing. Please read the instructions carefully and follow all requirements.

Project Overview

This is a Next.js application that displays a list of tasks in a table. The application intentionally contains performance issues when rendering, searching, or updating a large number of tasks (e.g., 500+). Your goal is to optimize the application so that it remains smooth and responsive, even with a large dataset, and to implement inline editing for task names, status, and priority, with all changes persisted to a backend JSON file.

Assessment Goals

You will be assessed on the following:

• Performance Optimization: Ability to identify and fix React performance bottlenecks (scrolling, searching, updating rows, etc.).
• Feature Implementation: Implementing smooth, inline editing for task names, as well as updating status and priority.
• Code Quality: Writing clean, maintainable, and idiomatic React/JavaScript/TypeScript code.
• Technical Communication: Explaining your optimization approach and reasoning clearly in your pull request.
• Adherence to Constraints: Following the rules and limitations described below.

The Challenge

• The app displays all tasks in a single table (no pagination).
• When the number of tasks is small (e.g., 50), the UI is smooth.
• When the number of tasks is large (e.g., 500+), the UI becomes laggy when scrolling, searching, or updating a task.
• Your task is to make the UI smooth and responsive for large numbers of tasks, without changing the UI or introducing pagination.
• You must also implement inline editing for the task name: Double-click the task name to edit it.
• When editing, the name should be replaced with an input field pre-filled with the current name. On pressing Enter or losing focus, if the new name is at least 3 characters, the change should be saved by calling the update task endpoint.
• Updates to task name, status, and priority must all work smoothly and efficiently, even with 500+ tasks. Double-click the name to edit it, and ensure status and priority can be updated inline as well.

Backend/Data Requirements

• The GET /api/tasks endpoint must first create a JSON file containing 600 tasks (if it does not exist), and use this file as a database for all GET and PUT operations. Do not use in-memory storage.
• All task updates (name, status, priority) must update the JSON file and be reflected in subsequent GET requests.
• The endpoint should support limiting the number of returned tasks via a limit query parameter, and updating a task by its id.
• The PUT /api/tasks endpoint must update the relevant task in the JSON file by id.
• No changes should be lost on server restart.

Task Table Inline Editing Requirements

• Task Name Editing:
  • Double-click the task name cell to enter edit mode.
  • The cell should be replaced with an input field, automatically populated with the current task name.
  • When the user presses the Return/Enter key or the input loses focus, if the new name is at least 3 characters, save the change by calling the update task endpoint.
  • The UI should update immediately and the change should persist in the backend JSON file.
• Status and Priority Updates:
  • Status and priority should be editable inline (e.g., via dropdown/select in the table row).
  • Changes to status or priority should call the update task endpoint and persist in the backend JSON file.
• All updates (name, status, priority) must work smoothly and efficiently, even with 500+ tasks.
• All updates must trigger an API call and persist to the backend JSON file.

Allowed and Disallowed Solutions

• You may install and use only ONE npm package to help with performance optimization (e.g., a virtualization library).
• You may NOT:
  • Change the UI/UX (no pagination, no infinite scroll, no redesigns)
  • Remove features (search, update, etc. must remain functional)
  • Use more than one third-party npm package for optimization
  • Use any AI/LLM tools (e.g., ChatGPT, Copilot) to generate your solution
• You SHOULD:
  • Focus on optimizing rendering and state management
  • Write clear, well-documented code
  • Ensure all updates are persisted to the backend JSON file
  • Make sure the UI remains smooth and responsive for large datasets

Getting Started

1. Fork this repository to your own GitHub account.
2. Clone your forked repo:

   git clone <your-fork-url>

3. Install dependencies:

   npm install

4. Run the development server:

   npm run dev

5. Open http://localhost:3000 in your browser to view the app.

Reproducing the Performance Issue

• By default, the app loads 600 tasks. You can change the limit in app/page.tsx for testing.
• Try searching, scrolling, or updating a task with 500+ tasks loaded. Notice the lag.
• Reduce the limit to 50 and observe the difference in performance.

Your Task

• Optimize the application so that it works smoothly with 500+ tasks.
• You may only install one npm package (e.g., react-window, react-virtualized, etc.).
• Do not change the UI or remove any features.
• Make sure all features (search, update, etc.) work as before, but with improved performance.
• Implement inline editing for the task name:
  • Double-click the task name to edit it.
  • The update should be reflected in the UI and persisted in the backend JSON file.
• Updating status and priority must also work smoothly and persist changes.
• All updates (name, status, priority) must be smooth, user-friendly, and efficient, even with 500+ tasks.
• All updates must trigger an API call and persist to the backend JSON file.

Troubleshooting & Common Mistakes

• If double-clicking the task name does not show an input, check your event handler and ensure the cell is replaced with an input field on double-click.
• If changes are not saved after editing, ensure you are making a PUT request to /api/tasks and persisting to the JSON file.
• If the JSON file is not created or updated, review your backend logic to ensure file operations are implemented (not just in-memory storage).
• If updates are lost on server restart, you are not persisting to disk.

Submission Guidelines

1. Push your changes to your forked repository.
2. Create a pull request to the original repository.
3. In your pull request description, include:
   • A detailed explanation of the performance issues you found
   • Anything else you think is relevant to your approach

Assessment Criteria

• Smooth performance with 500+ tasks (scroll, search, update)
• Clean, maintainable, and idiomatic code
• Smooth, user-friendly inline editing for task name, status, and priority
• Clear and thorough technical explanation in your PR
• Adherence to the rules (one package, no UI changes, etc.)

Additional Notes

• Use TypeScript where possible.
• Follow existing code style and conventions.
• You may add comments to explain your changes.
• If you have questions, please clarify them in your pull request.

Good luck! We look forward to seeing your solution.