From 7e1c4bb2e2f7f8bf8a4e1507ff93cb8a3c267a4e Mon Sep 17 00:00:00 2001
From: Laktionov Anton <tavres@gmail.com>
Date: Thu, 30 Apr 2026 20:32:26 +0300
Subject: [PATCH] =?UTF-8?q?=D0=A1=D0=B4=D0=B5=D0=BB=D0=B0=D0=BB=D0=B8=20?=
 =?UTF-8?q?=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD=D1=82=D1=8B=20?=
 =?UTF-8?q?=D1=81=20useEffect=20=D0=B8=20useLayoutEffect?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 db.json      | 25 ++++++++++++++
 package.json |  1 +
 src/App.jsx  | 96 ++++++++++++++++++++++++++++++++++++++++++++++++++--
 3 files changed, 119 insertions(+), 3 deletions(-)
 create mode 100644 db.json

diff --git a/db.json b/db.json
new file mode 100644
index 0000000..8c31a69
--- /dev/null
+++ b/db.json
@@ -0,0 +1,25 @@
+{
+    "products": [
+        {
+            "id":1,
+            "name":"Sneakers Red & White 2025",
+            "brand":"NIKE",
+            "price":38.0,
+            "imageUrl":"./assets/images/sneakers-image.jpg"
+        },
+        {
+            "id":2,
+            "name":"Sneakers Red & White 2025",
+            "brand":"NIKE",
+            "price":40.0,
+            "imageUrl":"./assets/images/sneakers-image.jpg"
+        },
+        {
+            "id":3,
+            "name":"Sneakers Red & White 2025",
+            "brand":"NIKE",
+            "price":46.0,
+            "imageUrl":"./assets/images/sneakers-image.jpg"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index d79c61a..ad4f519 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
+    "server": "json-server --watch db.json --port 8000",
     "dev": "vite",
     "build": "vite build",
     "lint": "eslint .",
diff --git a/src/App.jsx b/src/App.jsx
index c144e38..aaf6c13 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -3,6 +3,67 @@ import SneakersImage from './assets/images/sneakers-image.jpg'
 import { FaRegUser } from 'react-icons/fa'
 import React from 'react'
 
+function EffectComponent() {
+    const [size, setSize] = React.useState(100);
+    const boxRef = React.useRef(null);
+    
+    React.useEffect(() => {
+        const box = boxRef.current
+        if (box) {
+            const { width, height } = box.getBoundingClientRect()
+            console.log('[useEffect] Размеры (EffectComponent):', { width, height })
+        }
+    }, [size]);
+    
+    return (
+    <div style={{ marginBottom: '30px' }}>
+      <h3>useEffect</h3>
+      <div
+        ref={boxRef}
+        style={{
+          width: size,
+          height: size,
+          backgroundColor: 'lightblue',
+          transition: 'all 1.3s',
+        }}
+      />
+      <button onClick={() => setSize(prev => prev + 20)}>Увеличить</button>
+    </div>
+  )
+}
+
+function LayoutEffectComponent() {
+  const [size, setSize] = React.useState(100)
+  const boxRef = React.useRef(null)
+
+  React.useLayoutEffect(() => {
+    const box = boxRef.current
+    if (box) {
+      const { width, height } = box.getBoundingClientRect()
+      console.log('[useLayoutEffect] Размеры (LayoutEffectComponent):', {
+        width,
+        height,
+      })
+    }
+  }, [size])
+
+  return (
+    <div>
+      <h3>useLayoutEffect</h3>
+      <div
+        ref={boxRef}
+        style={{
+          width: size,
+          height: size,
+          backgroundColor: 'lightgreen',
+          transition: 'all 1.3s',
+        }}
+      />
+      <button onClick={() => setSize(prev => prev + 20)}>Увеличить</button>
+    </div>
+  )
+}
+
 function Header() {
 	const handleChange = event => {
 		const newValue = event.target.value
@@ -13,7 +74,7 @@ function Header() {
 		<header className={styles.header}>
 			<div>
 				<h2>Store</h2>
-				<input type='text	' placeholder='Search...' onChange={handleChange} />
+				<input type='text' placeholder='Search...' onChange={handleChange} />
 			</div>
 			<div>
 				<FaRegUser size={24} color='#3258e3' />
@@ -23,9 +84,23 @@ function Header() {
 	)
 }
 
+function ToolTip() {
+    const ref = React.useRef(null);
+    const [height,setHeight] = React.useState(0);
+    
+    React.useLayoutEffect(()=>{
+        if (ref.current) {
+            const rect = ref.current.getBoundingClientRect();
+            setHeight(rect.height);
+        }
+    },[])
+    
+    return <div ref={ref} style={{height: '40px'}}>Высота: {height}</div>
+}
+
 function Product() {
 	const [isLiked, setIsLiked] = React.useState(false)
-
+    
 	const toggleLike = () => {
 		setIsLiked(!isLiked)
 	}
@@ -37,6 +112,7 @@ function Product() {
 	return (
 		<div className={styles.product}>
 			<img src={SneakersImage} alt='' />
+			<ToolTip />
 			<div className={styles.content}>
 				<div className={styles.title}>
 					<h4>Sneakers Red & White 2025</h4>
@@ -68,7 +144,19 @@ function Product() {
 }
 
 function App() {
-	return (
+    const [products,setProducts] = React.useState([]);
+    
+    const getProducts = async () => {
+        const responce = await fetch('http://localhost:8000/products');
+        const data = await responce.json();
+        setProducts(data);
+    }
+	React.useEffect(() => {
+        getProducts();
+    },[]);
+    
+    
+    return (
 		<>
 			<div className={styles.container}>
 				<Header />
@@ -86,6 +174,8 @@ function App() {
 					</li>
 				</ul>
 			</div>
+            <EffectComponent />
+            <LayoutEffectComponent />
 		</>
 	)
 }