Сделали колбэк с кнопками и именами

This commit is contained in:
2026-05-05 21:10:47 +03:00
parent 1bc2e883a1
commit 3d34262203
+13 -8
View File
@@ -1,21 +1,26 @@
import styles from './styles/App.module.scss'
import React, { useState } from 'react'
import React, { useState, useCallback } from 'react'
function Parent() {
const [count,setCount] = useState(0);
//const handleCallback = () => setCount(count + 1)
const increment = React.useCallback(() => setCount(count + 1));
const names = ['Alex','Bob','Deniel'];
const handleNameClick = useCallback( name => {
alert(`Вы нажали на ${name}`);
},[]);
return (
<>
<div>{count}</div>
<Child onClick={increment} />
<h2>Проверка React.useCallback</h2>
{names.map(name => (
<Child key={name} name={name} onClick={handleNameClick} />
))}
</>
);
}
const Child = React.memo(({ onClick }) => {
const Child = React.memo(({ name, onClick }) => {
console.log('child rendered');
return <button onClick={onClick}>Нажми меня</button>
const handleClick = useCallback(()=>onClick(name),[name, onClick]);
return <button onClick={handleClick}>{name}</button>
})
function App() {