Section 1.1: Understanding useCallback

The useCallback hook is designed for memoizing callback functions that might be invoked multiple times. By utilizing useCallback, we can cache these callbacks within a component, preventing their recreation on every render unless a specific state or prop changes.

For example, instead of writing:

import React from "react";

export default function App() {

const handleClick = () => {

console.log("Clicked");

};

return <button onClick={handleClick}>Click Me</button>;

}

We can refactor it to:

import React, { useCallback } from "react";

export default function App() {

const handleClick = useCallback(() => console.log("Clicked"), []);

return <button onClick={handleClick}>Click Me</button>;

}

By passing our callback into the useCallback hook, the function is created only once throughout the component's lifecycle, rather than on each render. The second parameter is an array that allows us to specify which variables to monitor for changes.

For instance, consider this scenario:

import React, { useCallback, useState } from "react";

export default function App() {

const [num, setNum] = useState(0);

const increment = useCallback(() => setNum((c) => c + 1), []);

const handleClick = useCallback(() => console.log(num), []);

return (

<>

<button onClick={increment}>Increment</button>

<button onClick={handleClick}>Click Me</button>

</>

);

}

In this case, the handleClick function will always log 0, as it is created only once when the component mounts, due to the empty array passed as the second argument. However, if we modify it to include [num]:

import React, { useCallback, useState } from "react";

export default function App() {

const [num, setNum] = useState(0);

const increment = useCallback(() => setNum((c) => c + 1), []);

const handleClick = useCallback(() => console.log(num), [num]);

return (

<>

<button onClick={increment}>Increment</button>

<button onClick={handleClick}>Click Me</button>

</>

);

}

Now, when we click "Click Me," the console will display the latest value of num. This change occurs because the handleClick function is recreated whenever num changes, thanks to the dependency array.

Section 1.2: Exploring useMemo

The useMemo hook allows us to compute values based on existing states, recalculating them only when one of their dependencies changes. For instance:

import React, { useCallback, useMemo, useState } from "react";

export default function App() {

const [num1, setNum1] = useState(0);

const [num2, setNum2] = useState(0);

const increment1 = useCallback(() => setNum1((c) => c + 1), []);

const increment2 = useCallback(() => setNum2((c) => c + 1), []);

const sum = useMemo(() => num1 + num2, [num1, num2]);

return (

<>

<button onClick={increment1}>Increment 1</button>

<button onClick={increment2}>Increment 2</button>

<p>num1: {num1}</p>

<p>num2: {num2}</p>

<p>sum: {sum}</p>

</>

);

}

Here, num1 and num2 states are modified upon button clicks. The sum variable is generated using the useMemo hook, which computes the sum of num1 and num2 based on their respective states. By including num1 and num2 in the dependency array of useMemo, we ensure that the sum is recalculated whenever either number changes.