diff --git a/src/App.jsx b/src/App.jsx index d973d7f..0310352 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -2,28 +2,48 @@ import styles from './styles/App.module.scss' import React, { useState, useCallback } from 'react' function Parent() { - const [text,setText] = useState('') + const [selectedId,setSelectedId] = useState(null); - const handlerChange = useCallback( event => { - setText(event.target.value); + const items = [ + {id:1, name: 'Первый'}, + {id:2, name: 'Второй'}, + {id:3, name: 'Третий'}, + {id:4, name: 'Четвертый'}, + ]; + + const handleSelect = useCallback( id => { + setSelectedId(id); },[]); return ( <> -

Проверка события onChange

+

Проверка события select

- -

Вы ввели текст: {text}

+ + {selectedId &&

Выбран элемент с ID: {selectedId}

}
); } -function Child({ value, onChange }) { - console.log('rendred'); - return +function ItemList({items, onSelect}) { + return ( + + ) } +const Item = React.memo(({ item, onSelect }) => { + console.log(`rendred ${item.name}`); + const handleClick = useCallback(() => { + onSelect(item.id) + }) + return
  • {item.name}
  • +}); + function App() { return ( <>