Задача на React (3 подзадачи): 1) Починить форму редактирования пользователя — при клике на имя пользователя в списке, имя должно подставляться в input формы редактирования. 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, чтобы не перерендериваться при изменении поля поиска.
• При выборе пользователя поле поиска очищается.