Код прежде всего падает из-за необъявленного user; кроме того, новые function/object props мешают memo, а постоянный value не даёт редактировать поле.
import React, { useState, memo } from 'react'
Код прежде всего падает из-за необъявленного user; кроме того, новые function/object props мешают memo, а постоянный value не даёт редактировать поле.
Короткий ответ
Что ответить на собеседовании
Подробный разбор
Ответ с пояснениями
Условие
import React, { useState, memo } from 'react'
const LastName = memo(({ pattern, onChange, style }) => { return ( Пользователь: {user.name} <input id="lastName" name="lastName" type="text" value="Sasha" pattern={pattern} onChange={onChange} style={style} /> ) })
export default function App() { const [count, setCount] = useState(0)
const pattern = /^[a-zA-Z]+$/
const handleChange = () => console.log('Значение изменено')
return ( Счётчик кликов: {count} <button onClick={() => setCount(count + 1)}>+1 <LastName pattern={pattern} onChange={handleChange} style={{ color: 'red' }} /> ) }
Ответ
Код прежде всего падает из-за необъявленного user; кроме того, новые function/object props мешают memo, а постоянный value не даёт редактировать поле.
Передайте user явно либо удалите обращение. Для изменяемого input храните значение в state и обновляйте onChange. HTML pattern ожидает строку, например [a-zA-Z]+, а не RegExp-объект. Статический style можно вынести за компонент, обработчик при необходимости стабилизировать useCallback. Исправляйте функциональные ошибки до оптимизации рендеров.