diff --git a/results/derivving-state.png b/results/derivving-state.png
new file mode 100644
index 0000000..9af5c6b
Binary files /dev/null and b/results/derivving-state.png differ
diff --git a/results/only-effects.png b/results/only-effects.png
new file mode 100644
index 0000000..6f53da9
Binary files /dev/null and b/results/only-effects.png differ
diff --git a/results/useMemo.png b/results/useMemo.png
new file mode 100644
index 0000000..d4f53d6
Binary files /dev/null and b/results/useMemo.png differ
diff --git a/src/App.tsx b/src/App.tsx
index 781c617..1b911c6 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -35,6 +35,7 @@ const Category = () => (
     </Helmet>
     <h2>Category</h2>
     <h1>under Category</h1>
+    <h1>kykelyn</h1>
     <A/>
   </div>
 );
diff --git a/src/Home.tsx b/src/Home.tsx
index 475ec0a..31ee8a4 100644
--- a/src/Home.tsx
+++ b/src/Home.tsx
@@ -1,16 +1,100 @@
 
-import React from 'react';
+import React,{useEffect, useState, useMemo, useCallback} from 'react';
 import logo from './logo.svg';
 import Sebas from 'component-sebas'
 import {Helmet} from "react-helmet";
 
 
+function simulateSync(time:number){
+    const s = new Date().getSeconds();
+
+// setTimeout(function() {
+//   // prints out "2", meaning that the callback is not called immediately after 500 milliseconds.
+//   console.log("Ran after " + (new Date().getSeconds() - s) + " seconds");
+// }, 500);
+
+    while(true) {
+      if(new Date().getSeconds() - s >= time) {
+        console.log(`Good, looped for ${time} seconds`);
+        break;
+      }
+    }
+
+}
+
+function simulateP(time:number){
+    return new Promise<number>((resolve, reject) => {
+            setTimeout(()=> {
+                resolve(1)},
+                 time*1000)
+    })
+}
+
 const Home =() =>{
+
+    const [number , setNumber]= useState(1)
+    const [number2 , setNumber2]= useState(0)
+    // const [number3 , setNumber3]= useState(0)
+    const [toggle , setToggle]= useState(false)
+
+    const myFn = useCallback((n) => {
+        console.info('from usecallabck im -->', n)
+    }, [])
+    // const myFn = useMemo(() => ()=>{}, [])
+    // const myFn = () => {}
+    
+    
+    console.count('renderinghome')
+
+    useEffect(()=>{
+        console.count('first effect :')
+        /* sync */
+        // simulateSync(3)
+
+        /*  promise */
+        simulateP(5).then(()=>{
+            console.info('promise resolve')
+            setNumber2(number + 1)
+        })
+
+        /* async await */
+        // async function papa(){
+        //     await simulateP(5)
+        //     console.info('promise resolve')
+        //     setNumber2(number)
+        // }
+        // papa()
+    },[number])
+
+    useEffect(()=>{
+        console.count('second effect :')
+    },)
+
+
+    // useEffect(()=>{
+    //     if(!number2) return
+    //     console.count('third effect:')
+    //     setNumber3(number2 + 1)
+    // }, [number2])
+
+    const number3 = useMemo(() =>number2 ? number2 +1 : 0 , [number2] )
+
+    useEffect(()=>{
+        console.count('myFn')
+    },[myFn])
+
+
+    myFn(number3)
+
     return (
     <div className="App">
         <Helmet>
             <title>Home title</title>
         </Helmet>
+        <h1>first Number :  {number}</h1>
+        <h2>Second NUmber : {number2}</h2>
+        <h3>third Number :  {number3}</h3>
+        <button onClick={()=>setToggle(c=> !c)}>{toggle ? 'on' : 'off'}</button>
         <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
         <p>
@@ -25,6 +109,7 @@ const Home =() =>{
         >
             Learn React
         </a>
+
         </header>
     </div>
     )
diff --git a/src/index.tsx b/src/index.tsx
index 9f8b15b..e37495c 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -5,9 +5,10 @@ import App from './App';
 import reportWebVitals from './reportWebVitals';
 
 ReactDOM.hydrate(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
+  // <React.StrictMode>
+  //   <App />
+  // </React.StrictMode>,
+  <App />,
   document.getElementById('root')
 );
 
diff --git a/src/server/index.tsx b/src/server/index.tsx
index fc2d6c9..21ffa61 100644
--- a/src/server/index.tsx
+++ b/src/server/index.tsx
@@ -6,6 +6,8 @@ Helmet.canUseDOM = false
 
 
 const renderK = (extractor: any, location?: string) =>{
+
+    console.log('kykelyn 45456')
    
     const reactDom = renderToString(<App extractor={extractor} location={location}/>)
     const helmet = Helmet.renderStatic();