add solution #760
add solution #760
Conversation
There was a problem hiding this comment.
Great job on your code! There are a few areas for improvement but they don't significantly impact the functionality of your code. Keep up the good work! 😊
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
|
|
||
| const filteredPeople = useMemo(() => { | ||
| return people.filter(person => | ||
| person.name |
There was a problem hiding this comment.
You are directly interacting with DOM here. It's recommended to use React as much as possible. You can use the trim() function when setting the state of appliedQuery instead of using it here.
| {filteredPeople.length > 0 ? ( | ||
| filteredPeople.map(person => ( | ||
| <div | ||
| key={person.slug} |
There was a problem hiding this comment.
You are generating a key on render. This can lead to performance issues. It's recommended to generate keys during the creation of items. Here is a link explaining why.
|
|
||
| const applyQuery = debounce(setAppliedQuery, delay); | ||
|
|
||
| const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => { |
There was a problem hiding this comment.
The naming convention for this method could be improved. According to the conventions, it's better to name the function onInputChange instead of handleInputChange.
| onSelected(null); | ||
| }; | ||
|
|
||
| const handleSelectPerson = (person: Person) => { |
There was a problem hiding this comment.
The naming convention for this method could be improved. According to the conventions, it's better to name the function onSelectPerson instead of handleSelectPerson.
| const value = event.target.value; | ||
|
|
||
| setQuery(value); | ||
| applyQuery(value); |
There was a problem hiding this comment.
You are not checking if the user entered spaces only. This can lead to unnecessary function calls. You should add a condition to check if the value is not empty or doesn't contain spaces only before calling applyQuery(value).
DEMO LINK