React Hooks: useMemo and useCallback

Introduction

React Hooks are functions that let you use state and other React features without writing a class. Among these hooks, useMemo and useCallback serve specific purposes in optimizing performance.

useMemo

The useMemo hook is used to memoize expensive calculations. It returns a memoized value that will only change if one of the dependencies has changed.

**Syntax:**

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

Example Usage:

import React, { useMemo } from 'react';

const ExpensiveComponent = ({ a, b }) => {
    const computeExpensiveValue = (a, b) => {
        console.log("Calculating...");
        return a + b;
    };

    const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

    return 
Computed Value: {memoizedValue}
;
};

useCallback

The useCallback hook is used to return a memoized version of a callback function that only changes if one of the dependencies has changed.

**Syntax:**

const memoizedCallback = useCallback(() => { /* ... */ }, [dependencies]);

Example Usage:

import React, { useCallback } from 'react';

const Button = ({ onClick }) => {
    console.log("Rendering Button");
    return Click Me;
};

const ParentComponent = () => {
    const [count, setCount] = React.useState(0);

    const memoizedCallback = useCallback(() => {
        setCount(count + 1);
    }, [count]);

    return ;
};

Best Practices

• Only use useMemo and useCallback when necessary. Overusing these can lead to more complexity.
• Use useMemo for expensive calculations that need to be reused.
• Use useCallback to prevent unnecessary renders of child components.
• Keep dependencies in the dependency array up-to-date to avoid stale closures.