{"pageProps":{"code":{"memo1.js":{"name":"memo1.js","content":"import { memo, useState } from 'react';\r\n\r\nconst Greeting = memo(function Greeting({ name }) {\r\n  console.log(\"Greeting was rendered at\", new Date().toLocaleTimeString());\r\n  return <h3>Hello{name && ', '}{name}!</h3>;\r\n});\r\n\r\nexport default function MyApp() {\r\n  const [name, setName] = useState('');\r\n  const [address, setAddress] = useState('');\r\n  return (\r\n    <>\r\n      <label>\r\n        Name{': '}\r\n        <input value={name} onChange={e => setName(e.target.value)} />\r\n      </label>\r\n      <label>\r\n        Address{': '}\r\n        <input value={address} onChange={e => setAddress(e.target.value)} />\r\n      </label>\r\n      <Greeting name={name} />\r\n    </>\r\n  );\r\n}\r\n","path":"code/6080/26T1/memo/memo1.js","fileext":"js"},"memo2.js":{"name":"memo2.js","content":"memo(..., (prevProps, nextProps) => true);","path":"code/6080/26T1/memo/memo2.js","fileext":"js"},"useCallback1.js":{"name":"useCallback1.js","content":"const MyComponent = ({ onClick }) => {\r\n  return <button onClick={onClick}>Click Me</button>;\r\n};\r\n\r\nconst ParentComponent = () => {\r\n  const [count, setCount] = useState(0);\r\n\r\n  // Without useCallback, a new function is created on every render\r\n  const handleClick = () => {\r\n    setCount(count + 1);\r\n  };\r\n\r\n  // With useCallback, handleClick will only be recreated if 'count' changes\r\n  const memoizedHandleClick = useCallback(() => {\r\n    setCount(count + 1);\r\n  }, [count]);\r\n\r\n  return <MyComponent onClick={memoizedHandleClick} />;\r\n};","path":"code/6080/26T1/memo/useCallback1.js","fileext":"js"},"useMemo1.js":{"name":"useMemo1.js","content":"const App = () => {\r\n  const [toolTipShow, setToolTipShow] = useState(false);\r\n\r\n  const filteredList = useMemo(() => {\r\n    filteredListOfItmes(list, filter);\r\n  }, []);\r\n\r\n  return (\r\n    <>\r\n      <ToolTip set={setToolTipShow} show={toolTipShow} />\r\n      <List items={filteredList}>\r\n    </>\r\n  );\r\n};","path":"code/6080/26T1/memo/useMemo1.js","fileext":"js"},"useMemo2.js":{"name":"useMemo2.js","content":"const filteredList = useMemo(() => {\r\n    filteredListOfItmes(list, filter);\r\n  }, [filter, list]);","path":"code/6080/26T1/memo/useMemo2.js","fileext":"js"}}},"__N_SSG":true}