React დავალება (3 მცირე დავალება): 1) გამოასწორეთ მომხმარებლის რედაქტირების ფორმა — როდესაც კლიკს აკეთებთ სიაში მომხმარებლის სახელზე, სახელი უნდა შეიყვანოს რედაქტირების ფორმის ინპუტში. 2) რედაქტირების ფორმა არ უნდა გადახალისდეს ტექსტის შეტანისას საძიებო ველში (React.memo-ის ოპტიმიზაციით). 3) როდესაც მომხმარებელი ირჩევა სიიდან, საძიებო ველი უნდა განულდეს.

Для решения задачи с формой редактирования пользователя в React:

1. Подстановка имени пользователя в input при клике:

   • В списке пользователей при клике на имя вызывайте функцию, которая обновляет состояние выбранного пользователя.
   • В форме редактирования используйте это состояние для установки значения input.

2. Оптимизация формы редактирования с React.memo:

   • Оберните компонент формы редактирования в React.memo, чтобы предотвратить лишние перерендеры.
   • Убедитесь, что props, передаваемые в форму, не меняются без необходимости (например, используйте useCallback и useMemo для функций и данных).

3. Сброс поля поиска при выборе пользователя:

   • При выборе пользователя вызывайте функцию, которая очищает состояние поля поиска.

Пример кода:

import React, { useState, useCallback } from 'react';

const UserForm = React.memo(({ userName, onChange }) => {
  console.log('Form render');
  return (
    <input value={userName} onChange={onChange} />
  );
});

export default function UserList() {
  const [users] = useState(['Alice', 'Bob', 'Charlie']);
  const [selectedUser, setSelectedUser] = useState('');
  const [search, setSearch] = useState('');

  const handleUserClick = useCallback((name) => {
    setSelectedUser(name);
    setSearch(''); // сброс поиска
  }, []);

  const handleInputChange = useCallback((e) => {
    setSelectedUser(e.target.value);
  }, []);

  const handleSearchChange = useCallback((e) => {
    setSearch(e.target.value);
  }, []);

  const filteredUsers = users.filter(u => u.toLowerCase().includes(search.toLowerCase()));

  return (
    <div>
      <input
        placeholder="Search users"
        value={search}
        onChange={handleSearchChange}
      />
      <ul>
        {filteredUsers.map(user => (
          <li key={user} onClick={() => handleUserClick(user)}>{user}</li>
        ))}
      </ul>
      <UserForm userName={selectedUser} onChange={handleInputChange} />
    </div>
  );
}

В этом примере:

• При клике на имя пользователя оно подставляется в форму.
• Форма обернута в React.memo, чтобы не перерендериваться при изменении поля поиска.
• При выборе пользователя поле поиска очищается.