New Era of React JS : useMemo and useCallback

Photo by Anne Nygård on Unsplash

React JS is one of the best framework for create websites. In last decade it grew rapidly and does not look like the growth will be stop in near future.

You must be stay tuned with the new changes and latest features to keep yourself up to date with others.

In this text i will mention about 2 hooks that i believe especially newlearners of React JS does not know enough.

1. useMemo
2. useCallback

useMemo: Handle calculating operations over states to better optimization and lead rerenders related to dependencies

useMemo is using to perform calculations over state(s). Most of the time we are not using the states directly. Mutating or destructing them to gather expected value.

// This is expensive and will be calculated every single rerender of the page
const expensiveCalculation = state1 * state2.value

// useMemo way

const expensiveCalvulationWithHook = useMemo(() => {
      // it must return something to assign
      return state1 * state2.value
 
}, [state,state2.value] // dependencies array to instruct which states are related to that calculation

useMemo will recalculate the value either state1 or state2.value changes. On the other hand, exampleCalculation will be recalculated whenever a state changes.

useCallback: An effect function that you can call whenever you want

The effect function can easily describe as a function that was called when the dependencies changes. For example: useEffect and useLayouttEffect is one of the most popular effect hooks of Core React JS.

useEffect(()=>{
     // call effect or perform type of mutations
     effect()
      
     // dependencies to recall effect
},[...dependencies])

As you can see changing the dependencies will recall the effect. However, if you want to call the effect that directly related to user interaction such as : onClick, onPress etc.

What would you do ?

The wrong answer: create handler. pass event as parameter. Use the handler as event function.

The correct answer: create handler with useCallback. pass event as parameter. Pass dependencies in dependencies array. Use the callbsck as event function.

So what is the difference ? Let’s see:

The Wrong Scenario

const handleClick = (e) => {
    e.preventDefault()
    form.submit() // as an example
}

This is the worst thing that you can do. If you are using react for long time you must be faced with the situations like: why the state change is not effected my callback. This is old value of that state. Come on dev console what is happening, Refresh, refresh, refresh…

The reason behind that is react did not recalculate your callback. It is a simple javascript variable or function not more than that. Created once then your state change does not cared.

To fix this you can use useCallback hook.

The Correct Scenario

const handleClick = useCallback((e)=>{

     e.preventDefault()
     form.submit() // as an example

// We passed form as dependency for callback. It is reacting and recalculating the inside of the function when form state change. Yeaay

},[form])

This is better because

1. It will be affected by the state change.
2. It will not be rerendered in every state change.

3. Easier to understand

Thank You for your reading. If you capture any mistake in that text, do not hesitate to inform me. Good Bye

Photo by ThisisEngineering RAEng on Unsplash