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';

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

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';
};

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;

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

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>;

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;

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;

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;

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