Clean Code II: React

Hello everyone, it’s me again! This post can be thought of as a continuation of the previous one. So, without further ado, let’s return to our subject.

I love removing dead codes and writing as simple as possible. It satisfies me as a developer and also provides convenience in many ways. For this reason, I wanted to share with you a few suggestions that made my React development life easier and cleaner. However, I must warn you that some suggestions are not the best scenario for every situation. Therefore, there will be several points open to interpretation.

1.Conditional Rendering: One Condition

In programming we always need conditions but if we only need one for conditional rendering, then it is better to use && operator instead of the ternary operators.

isGreetingVisible ? "Hello!" : null   -- Bad
isGreetingVisible && "Hello!"   -- Good

Warning: This also appears to be a controversial issue because falsy values need more attention.

2.Conditional Rendering: Either Condition

If you have one condition and you want to render different things due to its satisfaction, then it is better to use a ternary operator instead of the&& operator. Also, by splitting these out into two separate conditionals using the && operator, it obfuscates the fact that the two pieces of UI are related and that they are opposites of each other.

isConditionSatisfied && "Yes!"   
!isConditionSatisfied && "No!"   -- Bad
isConditionSatisfied ? "Yes!" : "No!"   -- Good

3. Props: Boolean

If you need a boolean props parameter and its value is true then there is no need to write its value.

<TurkishMessage isTurkish={true} />  -- Bad
<TurkishMessage isTurkish />   -- Good

4. Props: String

If you need a string props parameter then you don’t need to use curly braces or backticks. Double quotes will be enough.

<GreetingMessage name={"Sude"} />  -- Bad
<GreetingMessage name={'Sude'} />  -- Bad
<GreetingMessage name={`Sude`} />  -- Bad
<GreetingMessage name="Sude"/>   -- Good

5. Props: Event Handler Functions

If you need an event handler that needs a single argument for the Event, then you don’t need to wrap the function.

<NameInput onChange={e => handleChange(e)} />  -- Bad
<NameInput onChange={handleChange} />   -- Good

6. Props: Component

If you need to pass a component as a props to another component and it is the only props, then you don’t need to wrap the passed component.

<ComponentWithOtherComponent OtherComponent={Other} />  -- Bad
<ComponentWithOtherComponent OtherComponent={() => <Other/>}/> -Good

7. Setting state that depends on the previous state

In React, state updates can be batch processed. Therefore, if the new state is dependent on the previous state, then set state as a function of the previous state.

const [isDisabled, setIsDisabled] = useState(false)
const disableButton = () => setIsDisabled(!isDisabled) --Bad
const disableButton = () => setIsDisabled(isDisabled => !isDisabled) --Good

8. Fragment Shortcut

<React.Fragment></React.Fragment>  --Long
<></>   --Short

9. super() in Constructor

You can safely remove your super() from your constructor if you’re not doing anything with your props in it.

Warning: However, pay attention to the derived state warnings.

10. Functional Components

This is definitely something that most developers won’t like but this is like a trick. If you have functional components, then you can call them like functions.

<SomeComponent/> => SomeComponent()

11. Assigning Keys to Children

In React, when creating a list of elements key is necessary to identify them, but you can also use React.Children.toArray()which has a built-in method that automatically assigns the keys.

{someData.map(element => <div key={element.id}>Hello!</div>)}
{React.Children.toArray(someData.map(element => <div>Hello!</div>)}

Warning: map() index not recommended.

12. Code Format: Prettier

Prettier is a tool that makes it easier for you and your team to maintain code formatting consistency. It also enforces clean code practices, which you can customize based on your opinion.

This gif of Adeel Imran pretty much explains the context:

13. Order Imports

Although ordering varies from person to person, it will also be beneficial to standardize it. Order can also be decided within the team, but generally, preferred ordering is as follows:

1. React import
2. Library imports
3. Absolute imports from the project
4. Relative imports
5. import * as
6. import './somefile.ext'

That’s all, I really hope you have enjoyed reading it. Please feel free to share some of your tips and tricks with me :)