React is developed by Meta, formerly known as Facebook. It is a free and open-source front-end JavaScript library for building user interfaces based on UI components.
In the React application, hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don’t work inside classes; they let you use React without classes.
“useMemo” and “useCallback” are both hooks in React that help optimize the performance of your components by memoizing values and functions. While they are similar in nature and share some similarities, they are used in different contexts and have different purposes.
| useMemo | useCallback |
|---|---|
| useMemo is used to memoize values, which means it remembers the result of an expensive computation so that it doesn’t need to be recalculated every time the component renders. | useCallback is used to memoize functions, ensuring that the same function instance is retained across renders unless its dependencies change. |
| The function you pass to ‘useMemo’ will be called during rendering, and its return value will be memoized. The memoized value will only change if any of the dependencies in the array change. | The function you pass to ‘useCallback’ will be memoized, and it will only be recreated if any of the dependencies in the array change. |
| It’s particularly useful when you have a calculation or transformation that depends on some values, and you want to avoid recalculating it on every render. | This is helpful when you need to pass functions as props to child components, especially in cases where those functions are used as dependencies for other hooks. |
useMemo
const memoizedValue = useMemo(() => { expensiveCalculation(a,b) },[a, b])
useCallback
const memoizedFunction = useCallback(() => { // function logic },[depedency1, depedency2])
Thanks for reading!
If you like our content, please do not forget to subscribe our channel.
