Skip to content

Instantly share code, notes, and snippets.

@3nvi
Last active February 3, 2020 13:05
Show Gist options
  • Save 3nvi/91fad50be082f9c43fd19eeab9ea3460 to your computer and use it in GitHub Desktop.
Save 3nvi/91fad50be082f9c43fd19eeab9ea3460 to your computer and use it in GitHub Desktop.
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} />
}
@3nvi
Copy link
Author

3nvi commented Feb 3, 2020

-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

@BennyBzH
Copy link

BennyBzH commented Feb 3, 2020

@3nvi 😉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment