From 1bc2e883a1e975204fc6d6fea0ea903f26b9fdfa Mon Sep 17 00:00:00 2001
From: Laktionov Anton <tavres@gmail.com>
Date: Tue, 5 May 2026 20:58:27 +0300
Subject: [PATCH] =?UTF-8?q?=D0=A1=D0=B4=D0=B5=D0=BB=D0=B0=D0=BB=D0=B8=20?=
 =?UTF-8?q?=D1=85=D1=83=D0=BA=D0=B8=20=D0=B8=20=D0=BA=D0=B0=D0=BB=D0=B1?=
 =?UTF-8?q?=D1=8D=D0=BA=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.jsx | 52 +++++++++++++++-------------------------------------
 1 file changed, 15 insertions(+), 37 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 5772f98..e15052d 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,49 +1,27 @@
 import styles from './styles/App.module.scss'
-import React from 'react'
+import React, { useState } from 'react'
 
-function Person({ name, age }) {
+function Parent() {
+    const [count,setCount] = useState(0);
+    //const handleCallback = () => setCount(count + 1)
+    const increment = React.useCallback(() => setCount(count + 1));
     return (
-        <div className={styles.container}>
-            <p>Имя: {name}</p>
-            <p>Возраст: {age}</p>
-        </div>
-    )
+        <>
+        <div>{count}</div>
+        <Child onClick={increment} />
+        </>
+    );
 }
 
-function ProductCard({title, price, background}) {
-    return (
-        <div style={{
-                backgroundColor: background,
-                border: '1px solid gray',
-                padding: '10px',
-                borderRadius: '10px',
-                width: '250px',
-                marginTop: '15px',
-            }}>
-            <h3>{title}</h3>
-            <p>Цена: {price}</p>
-        </div>
-    )
-}
+const Child = React.memo(({ onClick }) => {
+    console.log('child rendered');
+    return <button onClick={onClick}>Нажми меня</button>
+})
 
 function App() {
-    const [price1, setPrice1] = React.useState(1000);
-    const [bgColor2, setBgColor2] = React.useState('#ffe6e6');
-    
-    const changePrice1 = () => setPrice1(cur => cur + 100);
-    const changeBgColor2 = () => {
-        const colors = ['#ffe6e6','#00e6e6','#ffefe6','#00f6f6'];
-        const random = colors[Math.floor(Math.random() * colors.length)];
-        setBgColor2(random);
-    }
-    
 	return (
 		<>
-            <h2>Практика Props</h2>
-            <button onClick={changePrice1}>Изменить цену товара 1</button>
-            <button onClick={changeBgColor2}>Изменить цвет товара 2</button>
-            <ProductCard title="Товар 1" price={price1} background="#ffffff" />
-            <ProductCard title="Товар 2" price={500} background={bgColor2} />
+            <Parent />
 		</>
 	)
 }