useDispatch.jsx

import React, { useCallback } from 'react';
import { useDispatch } from 'react-redux';
import { increaseCounterAction } from './actions';
import ExpensiveComponent from './ExpensiveComponent';

// normal way
const Component = props => {
  const dispatch = useDispatch();
  return (
    <button onClick={() => dispatch(increaseCounterAction()}>
      Increase the Counter
    </button>
  )
}

// performance optimised way
const Component = props => {
  const dispatch = useDispatch();
  const handleIncreaseCounter = useCallback(
    () => dispatch(increaseCounterAction()), 
    [dispatch]
  );
  
  return <ExpensiveComponent onClick={handleIncreaseCounter} />
}

-import React from 'react';
+import React, { useCallback } from 'react';


-import { useCallback, useDispatch } from 'react-redux';
+import { useDispatch } from 'react-redux';

-import React from 'react';
+import React, { useCallback } from 'react';


-import { useCallback, useDispatch } from 'react-redux';
+import { useDispatch } from 'react-redux';

Yup, you are right! Thanks for spotting that out; I updated the gist

@3nvi 😉