i want to use one useMemo instead of many React.useMemo blocks.

below is my code,

const App = () => {
    const isChecked = React.useMemo(() => {
        const source = get(data, 'somesource');
        return source === 'source1' ||
            source === 'source2';
    }, [data]);
    const details = React.useMemo(() => {
        return get(data, 'details');
    }, [data]);
    const types = React.useMemo(() => {
        return get(data, 'types', []);
    }, [data]);
   
    return (
        //some jsx
    );
}

How can i rewrite the above code to use one useMemo. could someone help me with this. i am new to using react. thanks.

i want to use one useMemo instead of many React.useMemo blocks.

below is my code,

const App = () => {
    const isChecked = React.useMemo(() => {
        const source = get(data, 'somesource');
        return source === 'source1' ||
            source === 'source2';
    }, [data]);
    const details = React.useMemo(() => {
        return get(data, 'details');
    }, [data]);
    const types = React.useMemo(() => {
        return get(data, 'types', []);
    }, [data]);
   
    return (
        //some jsx
    );
}

How can i rewrite the above code to use one useMemo. could someone help me with this. i am new to using react. thanks.

• javascript
• reactjs

1 Answer 1

Like any react hook, you can return an array of values or an object of values from useMemo.

Array version

const App = () => {
    const [isChecked, details, types] = React.useMemo(() => {
        const source = get(data, 'somesource');
        const details = get(data, 'details');
        const types = get(data, 'types', []);

        return [source === 'source1' || source === 'source2', details, types];
    }, [data]);

    return (
        //some jsx
    );
}

Object version

const App = () => {
    const {isChecked, details, types} = React.useMemo(() => {
        const source = get(data, 'somesource');
        const details = get(data, 'details');
        const types = get(data, 'types', []);

        return {
            isChecked = (source === 'source1' || source === 'source2'),
            details,
            types
        };
    }, [data]);

    return (
        //some jsx
    );
}