Sobes.tech
Middle

import { useState, useCallback } from 'react' const Блок = () => { const [сана, setСана] = useState(0); const handleClick = useCallback(() => { console.log(сана); }, []); return ( <div> <div onClick={() => setСана((prev) => prev + 1)}>Сана: {сана}</div> <div onClick={handleClick}>Тавсиф</div> </div> ); };

sobes.tech AI

Ҷавоб аз AI

Дар ин мисол, handleClick бо истифода аз useCallback бо рӯйхати холии вобастагиҳо [] сохта шудааст. Ин маъно дорад, ки функсия як бор дар вақти монтажи компонент сохта мешавад ва дар вақти тағйирёбии count навсозӣ намешавад.

Аз ин рӯ, дар вақти клик ба тугмаи "Log" дар консол ҳамеша арзиши count нишон дода мешавад, ки дар аввалин рендер (дар ин ҳолат 0) буд, на арзиши воқеии ҳозира.

Барои он, ки функсия ҳамеша арзиши актуалии count-ро дошта бошад, бояд count-ро ба рӯйхати вобастагиҳо илова кард:

const handleClick = useCallback(() => {
  console.log(count);
}, [count]);

Ё истифодаи функсияи навсозии ҳолат бо callback, агар хоҳед, ки аз навсозии бефоъидаи функсия худдорӣ кунед.

Инчунин, муҳим аст, ки вобастагиҳоро дар useCallback дуруст нишон диҳед, то аз баста шудани функсия ба арзишҳои кӯҳна пешгирӣ кунед.