Сделали компоненты с useEffect и useLayoutEffect

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"
+        }
+    ]
+}

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 .",

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 />
 		</>
 	)
 }