React.js ~The best practice for conditional statement~

We tend to write React as functional programming because the functional component is the mainstream.
In this era, one of the issues we often encounter is conditional statements. There are a variety of conditional statements, such as if, switch, and ternary operator.
We confuse when to use them properly.

Assign the result of the conditional statement into a variable
This makes it easy to read, test, and modify codebases.

The representative case is ternary operator

const userName = user ? user.name : 'No user found';

Enter fullscreen mode Exit fullscreen mode

Of course, we can write the code another way.

const point = 80;
let result;

if (point >= 70) {
  result = 'passed';
} else {
  result = 'failed';
}

console.log(result);
// passed

Enter fullscreen mode Exit fullscreen mode

In this way, we can not ensure the immutability of let, and this section with the conditional branch is written in a procedural style.

To solve this issue, we have to wrap this in a function.

const judge = (point: number) => {
  if (point >= 70) {
    return 'passed';
  }

  return 'failed';
};

Enter fullscreen mode Exit fullscreen mode

In addition to wrapping that statement,
I suggest that you use early return to save the else statement.

Do not write conditional statements in the return value of tsx (the UI rendering portion)

** When there is only a single conditional statement, or there is no need for any execution in the conditional statement.

Let’s use the ternary operation simply.

import { FC } from 'react';
import { useQuery } from '@tanstack/react-query';
import getUser from 'domains/getUser';

type Props = {
  userId: number;
};

const Profile: FC<Props> = (props) => {
  const { userId } = props;
  const getSpecificUser = async () => {
    const specificUser = await getUser(userId);

    return specificUser;
  };
  const { data: user } = useQuery(['user', userId], getSpecificUser);

  const userName = user ? user.name : 'User not found';

  return <p>User：{userName}</p>;
};

export default Profile;

Enter fullscreen mode Exit fullscreen mode

const userName = user ? user.name : 'User not found';

Enter fullscreen mode Exit fullscreen mode

In this statement, you only have to watch user, and you don’t have any other execution.

Avoid writing this code in the <p> tag.

return <p>User：{user ? user.name : 'User not found'}</p>;

Enter fullscreen mode Exit fullscreen mode

This code is unreadable. And this makes JSx complex to understand.
You have to separate logic from UI.

If conditional statements are later or more than 3 statements.
In this case, you had better use ifstatement.

/* eslint-disable no-nested-ternary */
import { FC } from 'react';
import { useQuery } from '@tanstack/react-query';
import getUser from 'domains/getUser';

type Props = {
  userId: number;
};

const Profile: FC<Props> = (props) => {
  const { userId } = props;
  const getSpecificUser = async () => {
    const specificUser = await getUser(userId);

    return specificUser;
  };
  const { data: user } = useQuery(['user', userId], getSpecificUser);

  const userName = user ? user.name : 'User not found';
  const genderColor = user ? (user.gender === 'male ? 'blue' : 'pink') : '';

  return <p className={genderColor}>User：{userName}</p>;
};

export default Profile;

Enter fullscreen mode Exit fullscreen mode

It is unreadable if you write the ternary operator.
In this case, you had better wrap two layers of statements.

import { FC } from 'react';
import { useQuery } from '@tanstack/react-query';
import getUser from 'domains/getUser';

type Props = {
  userId: number;
};

const Profile: FC<Props> = (props) => {
  const { userId } = props;
  const getSpecificUser = async () => {
    const specificUser = await getUser(userId);

    return specificUser;
  };
  const { data: user } = useQuery(['user', userId], getSpecificUser);

  const userName = user ? user.name : 'User not found';
  const genderColor = () => {
    if (!user) {
      return '';
    }

    if (user.gender === 'male') {
      return 'blue';
    }

    return 'pink';
  };

  return <p className={genderColor()}>User：{userName}</p>;
};

export default Profile;

Enter fullscreen mode Exit fullscreen mode

You can execute conditional statements within genderColor
In fact, you don’t have to write code as a nest with return.
This is another merit of extracting a responsibility from the codebase.

When you want to display another UI
You should switch UI with if statement.

import { FC } from 'react';
import { useQuery } from '@tanstack/react-query';
import getUser from 'domains/getUser';

type Props = {
  userId: number;
};

const Profile: FC<Props> = (props) => {
  const { userId } = props;
  const getSpecificUser = async () => {
    const specificUser = await getUser(userId);

    return specificUser;
  };
  const { data: user } = useQuery(['user', userId], getSpecificUser);

  if (!user) {
    return <p>User notfound</p>;
  }

  const { name, gender, age } = user;
  const genderColor = gender === 'male' ? 'blue' : 'pink';

  return (
    <div className={genderColor}>
      <p>User：{name}</p>
      <p>Sex：{gender}</p>
      <p>Age：{age}</p>
    </div>
  );
};

export default Profile;

Enter fullscreen mode Exit fullscreen mode

You can define UI that is displayed if user is undefined.