What does useCallback/useMemo do in React?

Question

As said in docs, useCallback Returns a memoized callback.

Pass an inline callback and an array of inputs. useCallback will return a memoized version of the callback that

Answer 1

I've made a small example to help others understand better how it behaves. You can run the demo here or read the code bellow:

import React, { useState, useCallback, useMemo } from 'react';
import { render } from 'react-dom';

const App = () => {
    const [state, changeState] = useState({});
    const memoizedValue = useMemo(() => Math.random(), []);
    const memoizedCallback = useCallback(() => console.log(memoizedValue), []);
    const unMemoizedCallback = () => console.log(memoizedValue);
    const {prevMemoizedCallback, prevUnMemoizedCallback} = state;
    return (
      <>
        
Memoized value: {memoizedValue}
        
New update {Math.random()}
        
is prevMemoizedCallback === to memoizedCallback: { String(prevMemoizedCallback === memoizedCallback)}
        
is prevUnMemoizedCallback === to unMemoizedCallback: { String(prevUnMemoizedCallback === unMemoizedCallback) }
        
memoizedCallback
        
unMemoizedCallback
        
 changeState({ prevMemoizedCallback: memoizedCallback, prevUnMemoizedCallback: unMemoizedCallback })}>update State
      
    );
};

render(, document.getElementById('root'));