This is an easy to read guide, where we will cover
- What is React
useCallback
? - When to use React
useCallback
? (use-cases) - Real world examples of
useCallback
- TroubleShooting Tips
What is React useCallback
useCallback is a React Hook. (Hooks are JS functions that let's you add additional pre-built functionality to your component)
useCallback
is a hook that lets you cache a function definition between renders.
useCallback
does not call the function and cache the return value. It caches the function definition itself.
useCallBack Reference
useCallback(function, [dependencies]);
As useCallback
is a react Hook you need to call it at the top level of your component
import { useCallback } from 'react';
export default function ReactCommentsSection({ postId, username }) {
const handleCommentSubmission = useCallback((Text) => {
post('/post/' + postId + '/comment', {
username,
comment: commentText,
});
}, [postId, username]);
}
Parameters
fn : (function to memorize)
This is the function that you want to cache.
This function can take any arguments and can return any data
The React will return this function definition (but not call it) during the first render.
On the next renders:
- If the
dependencies
are not changed then the react will give you the same cached function - Else if, dependencies have changed the react will give you the current function that you have passed it. That is if the dependencies have changed.
Dependencies
An array of reactive values that the function depends on or are referenced by the fn
Reactive values are props, state and all the variables/ functions that are inside your component
The react will do a shallow check to with the Object.is
method to check if the dependencies have changed
You can use code linter to verify if all the dependencies are listed in the dependencies array
The list of depencies should remain constant and will be written in line in an array like [dep1, dep2, dep3]
What does useCallback Return
- initial Render : On initial render the
useCallback
hook returns the function that you have passed it - Subsequent Renders :
- If the dependencies have not changed, it will return the cacheed function
- If the dependencies have changed, it will return the new function, that is the function you have passed during this render
Caveat
Always declare useCallback
at the top of your component because it is a hook
useCallback
should never be used inside loops or conditionals. If you need to use it inside loops or conditions, extract the code into a new component
Cache Management
- React will not throw away a cached function unless there is a very good reason to do that
- like: during development react will through a cached function, if you edit the component
- If a component suspends the during initial mounting phase then the react will discard the cached
Examples and Use-cases
Use-Case : Skipping Re- rendering of components for performance optimization
1. un-unessessory re-renders
When developing large scale application or applications with complex logic, it becomes necessary to optimize performance.
Because of resource limitations the logic or the scale of component and prop drilling can cause the UI to not perform optimally
Caching the Values or Function
One of the methods of optimizing performance is caching the values that require a lot of computation and that don't change much from one re render to another
you can use the useMemo
for caching the values, but what about functions.
As {}
notation creates a new Object, the function notation like function () {}
or () => {}
creates a new function
Normally this isn't an issue but creating new function on every re render defeats the purpose of caching
So, we need to cache the functions that we are passing down as props here useCallback
comes in handy
Example 1 : The Comment section
Consider a comment section on a website. Here we have CommentSection
Component
Here we have a CommentSection
Component. Our component takes three props : 1. userName
, userToken
, and postId
Then we have the handleCommentSection
function that has the useCallback
hook to which checks if any of the dependencies in the dependencies array has changed
the dependencies are : [postId, userName, userToken]
If the dependencies have not changed then the useCallback
returns the cached function otherwise the useCallback
returns the new function
Preventing unnecessary re-rendering of child components
When to use useCallback vs useMemo?
Both useCallback and useMemo are used to cache something to optimize performance
useMemo is used to cache values and useCallback is used to cache function definitions
So, as to prevent unnecessary re-renders
Difference of useMemo with useCallback
The useMemo
hook takes a function and a dependency array as arguments
The useMemo
calls the function and caches its returned value, the function is then only called when any of the dependencies change
const ComponentCompute = useMemo(() => {
return calculateReq(product);
}, [product]);
here the returned value of calculateReq
will be cached and this will only be re-calculated when the product
changes
useCallback
also takes a function and a dependency array, but instead of caching the return value of the function it caches the function declaration itself
useMemo
const requirements = useMemo(() => { // Calls your function and caches its result return computeRequirements(product); }, [product]);
useCallback
import { useCallback } from 'react';
export default function CommentSection({ userName, userToken, postId, }) {
const handleCommentSubmission = useCallback((textOfTheComment) => {
post('/post/' + postId + '/comment', {
username,
comment: textOfTheComment,
token: userToken,
});
}, [postId, userName, userToken]);
}
When the handleCommentSubmission
function gets called, useMemo calls the cached version and that remains the same across renders except when one of the dependencies change
If you are familiar with useMemo then you can think of useCallback as a wrapper around useMemo with built in functionality
you can use useMemo instead of useCallback by adding a callback function like so
function useCallback(fn, dependencies) {
return useMemo(() => fn, dependencies);
}
When to use useCallback
It depends on what type of app or website you have. If you have an app that is more like a website, that is you are changing Big parts or your UI at once then memorization of caching is not that useful
And if you only need to change small parts of your overall UI like in a drawing application or some other app
Where you load a whole lot of UI at once and then need to make small changes to the UI then caching would be a good strategy
Here are a few cases where useCallback is a good idea'
- If you are using
useMemo
in a component and you want to pass a function to that component as prop. - If you are using the function inside other React Hooks. For example another function wrapped in useCallback depends on itor you depend on this function from
useEffect
Note: The useCallback
does not prevent from creating a function. the function is always created and that is all good, React just ignores the created function and provides you with the cached version instead
Making Memorization and caching unnecessary by following a few principles:
- Wrap a component visually
When a component is visually wrapping other components like a big web page component containing smaller UI components like buttons etc
Let it accept JSX as its children. like so,
<div>
<img />
<button />
</div>
Then if the wrapper component updates react know not to update the child components.
2. Local State
Always prefer local state and do not lift the state. Only lift the state when necessarily required.
So this importantly with short lived data like when a user is hovering over a button or there is a small form
3. Keeping the rendering logic pure
The component should always be pure. Meaning for a given input props the output should always remain the same
or re-rendering the component should never give different outputs
Fix the bug instead of caching the component
4. Avoid unnecessary effects that update state
Effects are updates that the application asks react to perform after the UI update is over. However if there are lots of updates then it makes the app run in circles and causes performance issues
hence, only use updates when necessary
5. Removing unnecessary dependencies from your effects
instead of caching the values and the function declaration, you can try to reduce the dependencies like move out some object or function
IF the interaction is still laggy use the React dev tools profiler to find out which components can benefit from memorization
The difference between useCallback and declaring a function directly
- Declaring a function directly
Directly declaring a function inside a component, creates a new instance of the function every time the component re renders. This is because as {}
creates a new Object a new functional declaration like function (){}
or ()=>{}
creates a new function
function SomeComponent(props) {
function handleClick() {
console.log('Somebody clicked the button');
}
return <button onClick={handleClick}>Click the button </button>;
}
Here everytime the SomeComponent is rendered on screeen a new handleClick
button is created.
2. useCallback
the useCallback
hook memorizes the function defination itself. Now, when the SomeComponent
is rendered on the screen the useCallback gives you the cached version of the handleClick
method
import { useCallback } from 'react';
function SomeComponent(props) {
const handleClick = useCallback(() => {
console.log('user clicked button');
}, []); // function get recreated when dependencies change, here the array is empty meaning the function will never be recreated
return <button onClick={handleClick}>Click the Button!</button>;
}
Using the useCallback the handleClick method is only created once and cached by the react and the cached copy will always be used thus improving performance
This article is brought to you by DeadSimpleChat, Chat API and SDK for your website and apps.
Main Difference
- Directly creating a function will create a new instance of the function every time the component re renders
- useCallback will cache the function and reuse the function definition thus giving the cached copy every time
Updating state from a memoized callback
In React you can update the state of a component using the setState function.
There are two options when you need to update the state based on the previous state
- Reading the current state from inside the callback
- using an updater function
Reading the current state from inside the callback
const handleTodo = useCallback((todoText) => {
const newTodo = { id: nextId++, todoText };
setTodos([...todos, newTodo]);
}, [todos]);
Here
- We are memorizing or caching the handleTodo function with
useCallback
- the
todos
state variable is specified as a dependency because we are reading the state directly - Here every time the todos change a new version of handleTodo will be created
using an updater function without direct dependency on state
const handleAddTodo = useCallback((text) => {
const newTodo = { id: nextId++, text };
setTodos(todos => [...todos, newTodo]);
}, []);
- Here instead of reading the
todos
inside of reading the todos directly and hence creating the nessissity of adding it as a dependency in the the dependencies array of useCallback - we are providing an updater function. This updater
func
takes the previous todos as an argument and calculates the new todos state - Thus the benefit here is that the handleTodo now no longer needs to update whenever todos changes thus using the cached version more and improving the performance
Preventing an Effect from firing too often
Many times you have use the useEffect hook and you need to call a function inside the hook
This creates a problem, every value must be declared in the dependency array.
To optimize the useEffect
and component rendering for performance purposes you can wrap the function that you are calling from useEffect into useCallback
.
Optimizing a custom Hook
Hooks are functions designed to encapsulate reusable functionality. This is why you can also create custom hooks of your own, this promotes code reusability and maintainability
- Need for optimization in custom Hooks
There is a need for optimization in custom hooks that return functions.
This is because these hooks can become problematic for components that have the returned function as a dependency.
The re creation of these functions at every render of the component could cause performance issues
2. useCallback
for stable functions
You can use the useCallback
hook to cache these functions thus optimizing performance.
You might be interested in some of our other articles
- React useMemo Vs useCallback
- React Hooks: Cheat Sheet, with examples
- React useDeferredValue
- useLayoutEffect vs useEffect with examples
Conclusion
In this article we learned about the useCallback
react hook with use-cases and examples
I hope you liked the article. Thank you for reading.