add solution#1180
Conversation
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
Your implementation has two critical missing features that violate explicit task requirements. First, you need to add an onSelected callback prop that receives the selected person when the user clicks on a suggestion - this is a required feature per the task description. Second, the debounce delay must be customizable via props with a 300ms default value, but it's currently hardcoded to 300ms in applyDebounce. To fix this: add onSelected?: (person: Person) => void prop and call it in the click handler, and add delay?: number prop (default 300) using it instead of the hardcoded value. These are blocking issues that will cause test failures.
✨ Please rate this review in the Platform's notification center1. I will be grateful for your feedback! ✨
Important
Fix the issues, commit the changes, and then re-request my review using the Re-request review button2 in the Reviewers tab.
Tip
If you have any comments about this review, please leave a message in the Add a comment section below and mention me with the @mateacademy-ai-mentor tag3.
I will read your message during my next review of your pull request. Please do not reply directly to my comments, as that feature is not supported yet.
Caution
Do not close the pull request until the review is complete. Closing it early can lead to unexpected behavior and disrupt the review process.
Footnotes
| export const App: React.FC = () => { | ||
| const { name, born, died } = peopleFromServer[0]; | ||
| const [query, setQuery] = useState(''); |
There was a problem hiding this comment.
Missing required onSelected callback prop. The task requires passing the selected person to the onSelected callback passed via props, but this prop is not defined.
| const applyDebounce = useMemo(() => { | ||
| return debounce((value: string) => { | ||
| setDebouncedQuery(value); | ||
| }, 300); |
There was a problem hiding this comment.
The delay prop for debounce is missing. The task requires the delay to be customizable via props with a default value of 300ms, but applyDebounce is hardcoded to 300ms.
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
The implementation meets all functional requirements and the identified issues are optimization opportunities rather than functional blockers.
✨ Please rate this review in the Platform's notification center1. I will be grateful for your feedback! ✨
Footnotes
|
|
||
| const applyDebounce = useMemo(() => { | ||
| return debounce((value: string) => { | ||
| setDebouncedQuery(value); | ||
| }, delay); |
There was a problem hiding this comment.
The useMemo for applyDebounce has an empty dependency array but uses delay in its factory function. If delay prop changes, this won't recreate the debounce. Either include delay in the dependency array or use a different pattern.
|
|
||
| let filteredPeople = peopleFromServer; | ||
|
|
||
| if (normalizedQuery) { | ||
| filteredPeople = peopleFromServer.filter(person => { | ||
| return person.name.toLowerCase().includes(normalizedQuery); | ||
| }); |
There was a problem hiding this comment.
The filteredPeople computation runs on every render without memoization. Consider using useMemo since it depends on debouncedQuery and the filtering operation could be expensive.
2 participants
DEMO LINK