Comrades .. There was a problem, I can not understand the chips of UseCallback hooks and Usememo. I already read a dock and a couple of different articles, but there is no clear picture for what it is necessary, which is from this benefit, in which phase it happens. I will be grateful for any intelligent explanation.

Answer 1, Authority 100%

Let’s start with UseCallback

Let’s write the simplest function counter.

Function App () {
 Const [Count, SetCount] = Ussestate (0);
 Return (
  & lt; div classname = "app" & gt;
   & lt; p & gt; counter: {count} & lt; / p & gt;
   & lt; button
   OnClick = {_ = & gt; SetCount (PrevCount = & GT; PrevCount + 1)} & gt;
    Increment & lt; / Button & gt;
  & lt; / div & gt;
 );
}

Add a function there that displays the text

to the console

Function App () {
 Const [Count, SetCount] = Ussestate (0);
 Const Helloconsole = _ = & gt; {
  Console.log ("Hi Chaps :)");
 };
 Helloconsole ();
 Return (
  & lt; div classname = "app" & gt;
   & lt; p & gt; counter: {count} & lt; / p & gt;
   & lt; button
   OnClick = {_ = & gt; SetCount (PrevCount = & GT; PrevCount + 1)} & gt;
    Increment & lt; / Button & gt;
  & lt; / div & gt;
 );
}

Now every time you increasing the meter, this Helloconsole function will be re-created.
That is

First Render

Function App () {
 const Count = 0;
 Const Helloconsole = _ = & gt; {
  Console.log ("Hi Chaps :)");
 };
 Helloconsole ();
 // ...

Second Render

Function App () {
 Const Count = 1;
 Const Helloconsole = _ = & gt; {
  Console.log ("Hi Chaps :)");
 };
 Helloconsole ();
 // ...

Third Render

Function App () {
 Const Count = 2;
 Const Helloconsole = _ = & gt; {
  Console.log ("Hi Chaps :)");
 };
 Helloconsole ();
 // ...

and the Helloconsole function from the first render is not equal to the function from the second render-a, etc. Each render is created by a new Helloconsole function with a new link.

// 1 count ------- 2 count //
Helloconsole! == Helloconsole

And here you have to think that it will be if you have such a function on the real project that each time is relaxed and within 500 lines of code makes certain calculations. I think the performance of this component will fall. And even depending on the situation and code it will be possible to notice it with a naked eye.

Solution USCallback

You need to wrap your feature in UseCallback and add an array of dependencies.

const anyfunc = usechallback (() = & gt; {
  // 500 lines of code
 }, [Dependencies]);

Important remark

1. It is necessary to use USCallback without an array of dependencies.

const anyfunc = usechallback (() = & gt; {
  // Any Code
 }, []);

So do not write. Here you will lose more than you get. If there is no dependency array simply write the function beyond the component. Something like this.

const anyfunc = () = & gt; {
  // Any Code
 };
Function APP () {// Our Component

This code is identical to UseCallback without an array of dependencies. I advise you to use the second approach if an array usecallback empty.

2. It is necessary to use UseCallback everywhere where you can use.

const handleclick = USCallback (() = & gt; {
  // Processing Events Click
 }, []);

Again in this code you lose more than, get. Your component will become slower.

Here here you can see how the component with and without Usecallback

Hook Usememo

Unlike USCallback which only the CallBakes Usememo Memoisters everything.

const list = react.usememo (() = & gt;
 ListOfiTems.map (Item = & GT; ({
  ... Item,
  ItemPROP1: ExpenSiveFunction (Props.first),
  ItemPROP2: AnotherPriceFunction (Pros.Second)
 })), [ListOfItems]
)

Example taken From here

In this case, Usememo Returns an array.

in the link upstairs which I specified written

If You Implement Usememo Too Often In An Application, It Can Harm The
Performance.

If you use Usememo often & nbsp; This may harm the performance of the application.

It means the second remark that I wrote at the top for USCallback Actually and for Usememo .

Also, if you try to make a Callback to Usememo, it will be identical to the use of Usecallback

USCallback (FN, DEPS) is an equivalent of usememo (() = & gt; fn, DEPS).

Answer 2, Authority 33%

UseCallback remembers the function and does not re-create it to optimize it.

Usememo remembers the value and does not recount it (complex mathematical calculations), also for optimization.

is applied depending on what needs: function or value.