React.js useCallback

useCallback() is used to:

Store function

Prevents function recreation on every render.

Syntex:

const myFunction = useCallback(() => {
  // code
}, []);

Without useCallback

function App() {
  const handleClick = () => {
    console.log("Clicked");
  };

  return <Button onClick={handleClick} />;
}

Problem:

Function recreates every render

With useCallback:

import { useCallback } from "react";

function App() {
  const handleClick = useCallback(() => {
    console.log("Clicked");
  }, []);

  return <Button onClick={handleClick} />;
}

Now function stays same between renders.\