React Typescript boolean props typed as optional with default value set to 'false'-CodePudding

I joined a large team of developers on a big project were, in their guidelines, it is mandatory to type every boolean props as optional and then default them to fault; the reason for that : "Good practice". However, no one was able to give me a good explanation and the people who were around when the guideline was written are no longer in the team.

here is a small exemple:

type ButtonProps = {
    isChecked?: boolean
}

const Button: FC<ButtonProps> = ({isChecked = false}) => {
   ...

Does anyone have encountered similar practices or knows a good reason to write boolean this way?

CodePudding user response：

This is related to the boolean shortcut of jsx syntax :

    type ButtonOptionnalProps = {
        isChecked?: boolean
    };
    
    export const ButtonWithDefaultWithOptionnal: React.FC<ButtonOptionnalProps> = ({ isChecked = false }) => (
        <button className={isChecked ?
            "checked" :
            "unchecked"} />
    );
    
    export const ATestComponent1: React.FC<{}> = ({}) => (<>
        <ButtonWithDefaultWithOptionnal isChecked={false} />
        <ButtonWithDefaultWithOptionnal isChecked={true} />
        <ButtonWithDefaultWithOptionnal isChecked />
        <ButtonWithDefaultWithOptionnal />
    </>);

This way every syntaxes are valid and isChecked has type boolean inside the control.

On the other hand you have :

    type ButtonProps = {
        isChecked: boolean
    };
    
    export const ButtonWithoutDefaultWithoutOptionnal: React.FC<ButtonProps> = ({ isChecked }) => (
        <button className={isChecked ?
            "checked" :
            "unchecked"} />
    );
    
    export const ATestComponent2: React.FC<{}> = ({}) => (<>
        <ButtonWithoutDefaultWithoutOptionnal isChecked={false} />
        <ButtonWithoutDefaultWithoutOptionnal isChecked={true} />
        <ButtonWithoutDefaultWithoutOptionnal isChecked />
        <ButtonWithoutDefaultWithoutOptionnal />
    </>);

this way there the last syntax is wrong.

The last way :

    type ButtonOptionnalProps = {
        isChecked?: boolean
    };
    
    export const ButtonWithoutDefaultWithOptionnal: React.FC<ButtonOptionnalProps> = ({ isChecked }) => (
        <button className={isChecked ?
            "checked" :
            "unchecked"} />
    );
    
    export const ATestComponent3: React.FC<{}> = ({}) => (<>
        <ButtonWithoutDefaultWithOptionnal isChecked={false} />
        <ButtonWithoutDefaultWithOptionnal isChecked={true} />
        <ButtonWithoutDefaultWithOptionnal isChecked />
        <ButtonWithoutDefaultWithOptionnal />
    </>);

This way the syntax is good but isChecked is boolean | undefined it could lead to subtil errors with conditions like isChecked === false.

CodePudding user response：

It is good practice because you can call the component easier including isChecked or not as a prop, since the prop is a boolean. Or you control it with a state if there is.

const [open, setOpen] = useState<boolean>(false); 

// it is not checked (in a simple way)
<Button />

// it is checked (again in a simple way)
<Button isChecked />

// you can use a state variable, which is a boolean
<Button isChecked={open} />

This is why the practice could be considered as a better practice.