React Typescript: Object is possibly 'undefined'

Question

I'm using react with typescript and was getting Object is possibly 'undefined' error when return language.toLowerCase().includes(selectedCategory) so I added a checking as in below. Error is gone but I'm not sure whether It can impact the performance. Please advice.

import { filter } from 'lodash';
...
return filter(channels, ({
    language
}: Channels) => {
    if (
        language &&
        language.toLowerCase() !== selectedCategory &&
        selectedCategory !== 'all'
    ) {
        return false;
    }
    return (
        language && language.toLowerCase().includes(selectedCategory)
    );
});

DariushStony · Accepted Answer · 2022-07-31 06:19:37Z

2

You can use Optional Chaining instead.

If the language is not null or undefined (nullish) it will access the property or method you want otherwise it will return undefined

answered Jul 31, 2022 at 6:19

DariushStony

17310 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sanket Shah · Accepted Answer · 2022-07-31 06:29:24Z

1

If you're damn sure about language that it can't be null or undefined then use ! operator (non-null assertion operator) and rewrite your code like this:

import { filter } from 'lodash';
...
return filter(channels, ({
    language
}: Channels) => {
    return language!.toLowerCase().includes(selectedCategory);
});

Or You can use Optional Chaining instead.

edited Jul 31, 2022 at 6:29

answered Jul 31, 2022 at 6:21

Sanket Shah

3,1091 gold badge13 silver badges24 bronze badges

Comments

Nathan · Accepted Answer · 2022-07-31 06:31:12Z

1

No, that will not impact performance in any way, that's an incredibly inexpensive and common type of check to performance.

You can simplify it though with optional chaining

If you write language?.toLowercase(), it will evaluate to undefined if language is undefined, and a lowercase language if it is defined. So:

if (
        language?.toLowerCase() !== selectedCategory &&
        selectedCategory !== 'all'
    ) {
        return false;
    } else { 
       return language?.toLowerCase().includes(selectedCategory)
    }

edited Jul 31, 2022 at 6:31

answered Jul 31, 2022 at 6:20

Nathan

79.4k15 gold badges55 silver badges103 bronze badges

2 Comments

Nicholas Obert Over a year ago

In the second line, you misplaced the ?

Nathan Over a year ago

I actually misplaced it on the first line, good catch. Fixed.

Hamed Siaban · Accepted Answer · 2022-07-31 06:24:51Z

0

If you are sure that the object value is never null or undefined, You can use ! mark:

language!.toLowerCase().includes(selectedCategory)

answered Jul 31, 2022 at 6:24

Hamed Siaban

1,6911 gold badge13 silver badges22 bronze badges

Comments

Nicholas Obert · Accepted Answer · 2022-07-31 06:22:57Z

-1

If you are sure that language will never be undefined, you can use the ! non-null assertion operator to remove that warning.

language!.toLowerCase()

This is the best option in terms of runtime performance since when the code is transpiled into JavaScript the assertion operator is just removed.

answered Jul 31, 2022 at 6:22

Nicholas Obert

1,6822 gold badges17 silver badges36 bronze badges

1 Comment

Nathan Over a year ago

I wouldn't recommend this. It's possible it'll lead to a slight performance benefit in older browsers (see here), but optional chaining realistically is never going to be a performance bottlneck. Working with the compiler instead of against it, and getting type safety, is much more important in practice.

Collectives™ on Stack Overflow

React Typescript: Object is possibly 'undefined'

5 Answers 5

Comments

Comments

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related