React.memo 和 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

Actually It expects the boolean to return so this might help

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

Answer 2

(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
}