1. useCallback

useCallback is React Hook which prevent it from being created on every render unless its dependency changes.


2. Before useCallback

import logo from './logo.svg';
import './App.css';
import React from 'react';
import { useState, useEffect, useRef, useMemo, useCallback, memo} from 'react';
import Timer from './component/Timer';
import Page from './component/Page.jsx'
import {ThemeContext} from './context/ThemeContext'

const ChildComponent = memo(({name, value, onChange}) => {
useEffect(() => {
console.log('rerendering')
})

return (
<>
<h1>
{name} {value ? 'on' : 'off'}
</h1>
<button onClick={onChange}>toggle</button>
</>
)
})

function App() {
const [status1, setStatus1] = useState(false)
const [status2, setStatus2] = useState(false)

const toggle1 = () => {
setStatus1(!status1)
}

const toggle2 = () => {
setStatus2(!status2)
}

return (
<>
<ChildComponent name="1" value={status1} onChange={toggle1}/>
<ChildComponent name="2" value={status2} onChange={toggle2}/>
</>
)


}

export default App;

Before using useCallback, toggle1 and toggle2 is reassigned.

So, Both ChildComponents is rerendered when you click button


3. After useCallback

import logo from './logo.svg';
import './App.css';
import React from 'react';
import { useState, useEffect, useRef, useMemo, useCallback, memo} from 'react';
import Timer from './component/Timer';
import Page from './component/Page.jsx'
import {ThemeContext} from './context/ThemeContext'

const ChildComponent = memo(({name, value, onChange}) => {
useEffect(() => {
console.log('rerendering')
})

return (
<>
<h1>
{name} {value ? 'on' : 'off'}
</h1>
<button onClick={onChange}>toggle</button>
</>
)
})

function App() {
const [status1, setStatus1] = useState(false)
const [status2, setStatus2] = useState(false)

const toggle1 = useCallback(
function toggle1() {
setStatus1(!status1)
}, [status1]
)

const toggle2 = useCallback(
function toggle2() {
setStatus2(!status2)
}, [status2]
)

return (
<>
<ChildComponent name="1" value={status1} onChange={toggle1}/>
<ChildComponent name="2" value={status2} onChange={toggle2}/>
</>
)


}

export default App;

After using useCallback, only one ChildComponent is rerendered when you click button.