useCallback and useEffect

[xp1632]

useCallback() and useEffect():

- Both useEffect and useCallback only re-run 
when their dependencies change. 
However, the difference between them is in what they return.

-useEffect returns a function that can be used clean up the effect.
The function inside this hook us called when the components unmounts
or when the dependencies change and the effect is re-run.
So we can see useEffect is used in fetch outside data's a lot, and also
used to unmount and clean up resource.

-callback function is a function that is passed as an argument
to another function and is executed inside that function.
The purpose of callback function is to allow the calling function
to perform some actions after the callback function has finished executing

-useCallback returns a memorized callback function. This function 
is only re-created if the dependencies change. This optimizes the performance
by preventing unnecessary re-renders if child components that 
depend on the function.
---------------------------------------------
in the code: 

const search = useCallback(
(searchKeyword: string) => {
  keyword.current = searchKeyword;
  setItemList(nodeConfigsToItemList(nodeExtensions, keyword.current));
},
[nodeExtensions]
);

The useCallback hook is used to memoize a function that sets the
search keyword and updates the item list.
The function is only-recreated if the nodeExtensions dependencies
changes, This can help optimize performance by preventing unnecessary
re-renders of NodeLibraryList component.

---------------------------------------