useDispatch.jsx

import React from 'react';
import { useCallback, 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} />
}