Frontend Developer Coding Assignment
Objective
The goal of this assignment is to evaluate the candidate's understanding of
JavaScript and React, particularly focusing on optimisation techniques to avoid
unnecessary re-renders and improve performance.
Assignment Overview
You will create a simple React application that displays a list of items and allows
users to filter these items based on a search input. The application should be
optimized to minimize re-renders using React best practices, including the use of
hooks, memoization, and Redux Toolkit for state management.
Requirements
1. Setup
- Use Create React App to set up the project.
- Install `@reduxjs/toolkit` and `react-redux`.
2. Application Structure
- Create a Redux slice for managing the state of the items and the search filter.
- The application should consist of the following components:
- `ItemList`: Displays the list of items.
- `SearchBar`: Input field for filtering items.
- `Item`: Represents a single item in the list.
3. Functionality
- The `ItemList` component should display a list of items passed from the Redux
store.
- The `SearchBar` component should allow users to type in a search term that
filters the displayed items in real-time.
- Implement memoization to avoid unnecessary re-renders of the `ItemList` and
`Item` components when the search term changes but the list of items does not.
4. Optimization Techniques
- Use `[Link]` to memoize the `Item` component.
- Use `useSelector` from `react-redux` to select only the necessary state slices.
- Implement a custom hook to handle the search input state and filtering logic,
ensuring that the filtering does not cause re-renders of the entire list.
5. Code Quality
- Ensure that the code is clean, well-organized, and follows best practices.
- Write comments to explain the logic, especially around optimization techniques
used.
6. Testing
- Write unit tests for the Redux slice and components using a testing library of your
choice (e.g., Jest, React Testing Library).
Submission Guidelines
- Submit your code as a GitHub repository.
- Include a README file with instructions on how to run the application and any
additional notes about your implementation.
Evaluation Criteria
- Correctness: Does the application meet the functional requirements?
- Optimization: Are appropriate techniques used to minimise re-renders?
- Code Quality: Is the code clean, organised, and well-documented?
- Testing: Are there sufficient tests covering the functionality?
Bonus Challenge (Optional but can be a Differentiating factor for selection)
- Implement pagination for the item list to further enhance performance.
- Use React's `useCallback` and `useMemo` hooks where appropriate to optimize
performance.