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.