React.memo and typescript

Question

I am working on a react native app. I am currently using Item component to display data in flatlist. But editor gives me an error for the second parameter of React.memo like below.

Type 'boolean | undefined' is not assignable to type 'boolean'.

Type 'undefined' is not assignable to type 'boolean'.

const Item = React.memo(
    ({ icon, title }: any) => {
        return (
            <Box
                flexDirection="row"
                paddingHorizontal="l"
                justifyContent="space-between"
                alignItems="center"
                style={{ marginTop: 35 }}
            >
                <Box flexDirection="row" alignItems="center" flex={1}>
                    {icon}

                    <Box marginLeft="l">
                        <Text  variant="stackHeader">{title}</Text>
                        <Text
                            fontSize={15}
                            fontFamily="CrimsonRegular"
                            style={{ color: '#575757' }}
                        >
                            Last update: 03/06/2020
                        </Text>
                    </Box>
                </Box>
                <TouchableOpacity onPress={() => Clipboard.setString(title as string)}>
                <FontAwesome5 name="copy" size={28} color="white" />
                </TouchableOpacity>
            </Box>
        );
    },
    (prev, next) => { // error here
        if (prev.title === next.title) {
            return true;
        }
    }
);

Answer 1

(prev, next) => { // error here
    if (prev.title === next.title) {
        return true;
    }
}

Typescript is expecting this function to return boolean. But it only sometimes does. If the condition is not satisfied, then no return statement is executed, which results in the function returning undefined. And even though undefined is falsy, it is not the boolean value of false.

So to fix this, you need to make your function always return a boolean value on all conditional branches.

For example, you could add an else clause to your conditional that returns false.

(prev, next) => {
    if (prev.title === next.title) {
        return true;
    } else {
        return false;
    }
}

Which should be simplified to just:

(prev, next) => {
    return prev.title === next.title
}