useCallback
useCallback
av Ole Petter den 17. mars 2023
Sist oppdatert: 17 mars, 2023 kl 15:25useCallback er en hook i React som returnerer en memorisert callback funksjon. Det sparer minne i applikasjonen fordi funksjonens verdier ikke trenger å rekalkuleres. useCallback kjøres kun når en av de avhengige variablene endres, som vist i tabellen til slutt i useCallback hooken, i dette tilfellet count og count2.
const sum = useCallback(() => count + count2, [count, count2]);
Kilde:
https://stackblitz.com/edit/vitejs-vite-bvtgfy?file=src/App.tsx
I koden i App.tsx er det tre variabler som kan endres, count, count2 og result, som er summen av count og count2. For å unngå unødvendig re-rendering, kan useCallback brukes til å oppdatere summen når enten count eller count2 endres.
const [count, setCount] = useState(0);
const [count2, setCount2] = useState(3);
const [result, setResult] = useState(0);
For å oppdatere summen av count og count2, kan vi bruke useEffect, en annen React hook.
useEffect(() => {
setResult(sum);
}, [sum]);
Siden useCallback forhindrer unødvendige ekstra oppdateringer, kan vi legge til variabelen sum returnert fra useCallback som en avhengig variabel, og få korrekt sum hver gang.
App.tsx
import { useCallback, useEffect, useState } from 'react';
import reactLogo from './assets/react.svg';
import viteLogo from '/vite.svg';
import './App.css';
function App() {
const [count, setCount] = useState(0);
const [count2, setCount2] = useState(3);
const [result, setResult] = useState(0);
const sum = useCallback(() => count + count2, [count, count2]);
useEffect(() => {
setResult(count + count2);
}, [sum]);
return (
<div className="App">
<div>
<a href="https://vitejs.dev" target="_blank">
<img src={viteLogo} className="logo" alt="Vite logo" />
</a>
<a href="https://reactjs.org" target="_blank">
<img src={reactLogo} className="logo react" alt="React logo" />
</a>
</div>
<h1>Vite + React</h1>
<div className="card">
<button onClick={() => setCount((count) => count + 1)}>
count is {count}
</button>
<button onClick={() => setCount2((count2) => count2 + 1)}>
count 2 is {count2}
</button>
<p>Sum count + count2 = {result}</p>
<p>
Edit <code>src/App.tsx</code> and save to test HMR
</p>
</div>
<p className="read-the-docs">
Click on the Vite and React logos to learn more
</p>
</div>
);
}
export default App;
