docs(blog): update usecallback post (#6371)

documentation/blog/2024-01-25-react-use-callback.md → documentation/blog/2024-09-26-react-use-callback.md

@@ -4,11 +4,11 @@ description: Improve app performance with React useCallback() hook.
 slug: react-usecallback-guide
 authors: abdullah_numan
 tags: [react]
-image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-09-20-react-use-callback/social.png
+image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-09-20-react-use-callback/social-2.png
 hide_table_of_contents: false
 ---
 
-**_This article was last updated on January 25, 2024 to expand code examples add more real use-cases for React useCallback hook._**
+**_This article was last updated on January 25, 2024 to include comparisons between useCallback and useMeme and how to use useCallback with other hooks._**
 
 ## Introduction
 
@@ -25,14 +25,13 @@ In this post, we explore how to use React `useCallback` in order to memoize a fu
 
 Steps we'll cover:
 
+- [Introduction](#introduction)
 - [What is React `useCallback` ?](#what-is-react-usecallback-)
-  - [Why Use React `useCallback` Hook?](#why-use-react-usecallback-hook)
-- [Memoize Functions with React `useCallback`: Ensuring A Callback's Referential Equality](#memoize-functions-with-react-usecallback-ensuring-a-callbacks-referential-equality)
-  - [Referential Inequality of Callbacks: Observing Unnecessary Re-renders](#referential-inequality-of-callbacks-observing-unnecessary-re-renders)
-  - [Memoizing an Event Listener with `useCallback()`](#memoizing-an-event-listener-with-usecallback)
-  - [React `useCallback` with Dependencies](#react-usecallback-with-dependencies)
+- [useCallback vs useMemo](#usecallback-vs-usememo)
 - [When to Use React `useCallback`](#when-to-use-react-usecallback)
 - [When Not to Use React's `useCallback` Hook](#when-not-to-use-reacts-usecallback-hook)
+- [Bonus:useCallback with Other Hooks](#bonususecallback-with-other-hooks)
+- [Example](#example)
 
 ## What is React `useCallback` ?
 
@@ -92,7 +91,7 @@ const UserPostsIndex = ({ signedIn }) => {
   }, []);
 
   return (
-    <div className="my-1 p-2 box">
+    <div className="box my-1 p-2">
       <div className="m-1 py-1">
         <h2 className="heading-md">Your Posts</h2>
         <p className="m-1 p-1">{signedIn ? `Signed in` : `Signed out `}</p>
@@ -125,7 +124,7 @@ const UserPostsList = ({ userPosts, deletePost }) => {
   return (
     <div className="px-1">
       {userPosts.map((post) => (
-        <div key={post.id} className="my-1 box flex-row">
+        <div key={post.id} className="box my-1 flex-row">
           <UserPost post={post} />
           <button
             className="btn btn-danger"
@@ -154,9 +153,9 @@ const UserPost = ({ post }) => {
   // console.log('Rendering UserPost component')
 
   return (
-    <div className="my-1 flex-row-left">
+    <div className="flex-row-left my-1">
       <a href={`#${post.title}`} className="">
-        <h4 id={post.title} className="px-2 font-sm font-bold">
+        <h4 id={post.title} className="font-sm px-2 font-bold">
           {post.title}
         </h4>
       </a>
@@ -238,6 +237,90 @@ This is because `useCallback()` caches and produces the same copy of `deletePost
 
 Notice we are passing a dependency in the array passed as the second argument of `useCallback`. With `userPosts` as a dependency, we want a change in `userPosts` to trigger a renewal of the function memo. So, every time the value of `userPosts` changes, a new `deletePost` function object will be created in `<UserPostsIndex />` and `<UserPostsList />` will be re-rendered.
 
+## useCallback vs useMemo
+
+Many devs, including myself from time to time, get confused as to when to use which.
+
+Understanding the difference between `useCallback` and `useMemo` goes a long way in optimizing React applications. What follows is a simple comparison that should make their purposes clear and when each should be used.
+
+#### **useCallback**
+
+`useCallback` memoizes a function definition so that it doesn't get recreated on every render unless its dependencies change.
+
+Comes in handy when you want to pass some callback functions to a child component wrapped with `React.memo` to avoid unnecessary re-renders.
+
+```jsx
+let handleClick = useCallback(() => {
+  // Function logic here
+}, [dependencies]);
+```
+
+In the example, `handleClick` will have the same reference on every render unless dependencies change.
+
+#### **useMemo**
+
+`useMemo` memoizes the result of a function call, caching the value that would be returned.
+Perfect for expensive calculations that you don't want to recompute on every render unless certain dependencies change.
+
+```jsx
+const computedValue = useMemo(() => {
+  return expensiveCalculation(data);
+}, [data]);
+```
+
+Here, `computedValue` would only be re-evaluated when `data` changes.
+
+#### **Key Differences**
+
+- **What They Return**:
+  - `useCallback` returns a memoized **function**.
+  - `useMemo` returns a memoized **value**.
+- **Main Usefulness**:
+  - `useCallback` prevents unnecessary re-creations of functions.
+  - `useMemo` avoids recalculating a value when it is not necessary.
+
+#### **When to Use useCallback**
+
+- **Preventing Re-renders of Children**: When implementing the `useCallback` hook with a function passed as a prop to a child that is optimized by `React.memo`, it ensures the reference of that function does not get recreated unnecessarily.
+- **Event Handlers**: If functions are created on every render—event handlers, for example—you can keep its reference by using `useCallback`.
+
+#### **When to Use useMemo**
+
+- **Expensive Computations**: When you have a function that performs a heavy computation, and you want to avoid it running on each render.
+- **Derived Data**: Computed result based on props or state which should not re-run unless the dependencies change.
+
+#### **Analogy**
+
+- Think of `useCallback` as memoizing the **function itself**, whereas `useMemo` memoizes the **result of the function**.
+
+#### **Practical Example**
+
+For instance, consider the following filtering list scenario:
+
+- **Using useMemo**:
+
+  ```jsx
+  const filteredItems = useMemo(() => {
+    return items.filter((item) => item.active);
+  }, [items]);
+
+  return <ItemList items={filteredItems} />;
+  ```
+
+  Here, `filteredItems` is re-evaluated only when `items` change.
+
+- **With useCallback**:
+
+  ```jsx
+  const getFilteredItems = useCallback(() => {
+    return items.filter((item) => item.active);
+  }, [items]);
+
+  return <ItemList getItems={getFilteredItems} />;
+  ```
+
+  In this case, `getFilteredItems` doesn't change its function reference if `items` haven't changed.
+
 ## When to Use React `useCallback`
 
 React `useCallback` hook is intended to memoize a callback function by maintaining its referential integrity. It should not be confused with `useMemo` which is used to cache the value of a function.`useCallback` is commonly used for memoizing functions between re-renders.
@@ -250,6 +333,102 @@ React `useCallback()` is also used to cache callbacks in debouncing, as well as
 
 We should not use the `useCallback` hook for memoizing the value of a function. We should also avoid overusing `useCallback` since the hook itself contributes to the component's cost. It is recommended to use the `useCallback` hook only in cases referential equality of the function is important.
 
+## Bonus:useCallback with Other Hooks
+
+I thought it would be worth adding a section to our article about how `useCallback` can be used with other React Hooks.
+
+Knowing how `useCallback` works with other React Hooks will make it easier to write good-performing, efficient components. Following are ways that we can combine `useCallback` with other Hooks.
+
+#### **useCallback and useEffect**
+
+When we use `useEffect`, we need to include functions in the dependency array as well. If this function changes at each render, that also will make the `useEffect` run unnecessarily. This is where we wrap up the function with `useCallback`.
+
+```jsx
+import React, { useState, useEffect, useCallback } from "react";
+
+function SearchComponent() {
+  const [query, setQuery] = useState("");
+
+  const fetchResults = useCallback(() => {
+    // Fetch data based on query
+  }, [query]);
+
+  useEffect(() => {
+    fetchResults();
+  }, [fetchResults]);
+
+  return <input value={query} onChange={(e) => setQuery(e.target.value)} />;
+}
+```
+
+Above, in the example, `fetchResults` is memoized with `useCallback`, which means that it only changes when `query` changes, so `useEffect` does not run on every render.
+
+#### **useCallback and useMemo**
+
+While `useCallback` memoizes functions, `useMemo` memoizes values. Sometimes, we may want to use both to optimize our components.
+
+```jsx
+const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
+
+const handleClick = useCallback(() => {
+  doSomethingWith(memoizedValue);
+}, [memoizedValue]);
+```
+
+Here, we memoize an expensive computation using `useMemo`, then take that value and memoize a function that uses it with `useCallback`.
+
+#### **useCallback and useContext**
+
+With context, passing down functions may cause re-renders when the function reference changes. Using `useCallback` allows us to prevent unnecessary updates in context consumers.
+
+```jsx
+const MyContext = React.createContext();
+
+function MyProvider({ children }) {
+  const [state, setState] = useState(0);
+
+  const increment = useCallback(() => {
+    setState((prev) => prev + 1);
+  }, []);
+
+  return (
+    <MyContext.Provider value={{ state, increment }}>
+      {children}
+    </MyContext.Provider>
+  );
+}
+
+function ChildComponent() {
+  const { state, increment } = useContext(MyContext);
+  // ChildComponent won't re-render unless state or increment changes
+}
+```
+
+By memoizing `increment`, we make sure that the context value isn't changed when it doesn't need to be, thereby optimizing the components consuming the context.
+
+#### **useCallback and Custom Hooks**
+
+When writing custom Hooks, we can always use `useCallback` to memoize functions returned by the hook so that consuming components get stable function references.
+
+```jsx
+function useWindowWidth() {
+  const [width, setWidth] = useState(window.innerWidth);
+
+  const handleResize = useCallback(() => {
+    setWidth(window.innerWidth);
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [handleResize]);
+
+  return width;
+}
+```
+
+In this custom hook, we memoize `handleResize` with `useCallback`, so that the event listener isn't set anew after every render.
+
 ## Summary
 
 In this post, we demonstrated how to leverage the React `useCallback` hook in preventing unnecessary re-renderings originating from a callback function's referential inequality.