useCallback with React.memo
This commit is contained in:
+11
-17
@@ -1,31 +1,25 @@
|
|||||||
import memo, { useMemo, useCallback, useState } from 'react'
|
import React, { useMemo, useCallback, useState } from 'react'
|
||||||
|
|
||||||
/*
|
const Button = React.memo(({ onClick }) => {
|
||||||
function MyComponent() {
|
console.log('Button rendred');
|
||||||
const memorizetCallback = useCallback(()=>{
|
return <button onClick={onClick}>Click me</button>
|
||||||
//тут код хука
|
})
|
||||||
},[dep1,dep2])
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
const Parent = () => {
|
function Parent() {
|
||||||
const [count,setCount] = useState(0);
|
const [count,setCount] = useState(0);
|
||||||
|
|
||||||
const handleClick = useCallback(()=>{
|
const handlerClick = useCallback(()=>{
|
||||||
setCount(prev => prev + 1)
|
setCount(prev => prev + 1);
|
||||||
},[]);
|
},[]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<h3>{count}</h3>
|
<h3>Counter: {count}</h3>
|
||||||
<Child onClick={handleClick} />
|
<Button onClick={handlerClick} />
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
const Child = (props) => {
|
|
||||||
return <button onClick={props.onClick}>Add</button>
|
|
||||||
}
|
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
|||||||
@@ -4,7 +4,5 @@ import { createRoot } from 'react-dom/client'
|
|||||||
import App from './App.jsx'
|
import App from './App.jsx'
|
||||||
|
|
||||||
createRoot(document.getElementById('root')).render(
|
createRoot(document.getElementById('root')).render(
|
||||||
<StrictMode>
|
|
||||||
<App />
|
<App />
|
||||||
</StrictMode>
|
|
||||||
)
|
)
|
||||||
|
|||||||
Reference in New Issue
Block a user