Prerequisite: Basic knowledge about React
Cover photo by Danika Perkinson on Unsplash
When I start to write this blog, I ask myself w...
For further actions, you may consider blocking this person and/or reporting abuse
Hi TrinhDinhHuy great post, really helped me to understand about memoization on react.
Just a typo, on Counter component that u render a button, you're closing this buttton with
divand not abuttontag.Keep writing!
Thanks for shared, it's very helpful, but i have a case, can you please help me clear
blog.axlight.com/posts/four-patter...
const App = props => {
const [stateA, dispatchA] = useReducer(reducerA, initialStateA);
const [stateB, dispatchB] = useReducer(reducerB, initialStateB);
const [stateC, dispatchC] = useReducer(reducerC, initialStateC);
const valueA = useMemo(() => [stateA, dispatchA], [stateA]);
const valueB = useMemo(() => [stateB, dispatchB], [stateB]);
const valueC = useMemo(() => [stateC, dispatchC], [stateC]);
return (
{props.children}
);
};
how the useMemo work? many thanks
React.memo() is a HOC. You can use it with class components as well with functional ones. It's not true that it comes handy only on functional components. useMemo i a hook and it goes only to functional components.
Hi TrinhDinhHuy, well put buddy, it helped me to clear out a few doubts that I had.
Moreover, I guess there's a type in the following code:
const myReply = React.memo(() => decideWhatToSay (girlFriendWords), [girlFriendWords])
I feel, instead of React.memo, it should be React.useMemo.
Keep writing!
Thank you! I updated it
wow :D thankiu "Bác Huy"
One of the great post wow
Why Counter doesn't update its own value after we update count1 ? increaseCounter2 remember count1 value equal 1 after first update using increaseCounter2
I believe you figured out why in meantime but I will answer anyway.
const increaseCounter2 = React.useCallback(() => {
setCount2(count2 => count1 + 1)
}, [])
Because when state is set author uses count1 + 1. I believe he wanted to write count2 + 1 and that this is syntax error.
Will useCallback useless if passed to children that not using React.memo?
Good Article! Thank you, Huy!
You are welcome
Hi Huy,
Do you think about React.memo must used together with useCallback?
Because the component wrap by React.memo always re-render with props is reference type.
If you pass something with reference type such as function then YES we can use useCallback to prevent the re-render. Otherwise it's not necessary if you pass primitive values (boolean, string, ..)