Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
February 22, 2021 05:22 pm GMT

React Clean Code - Simple ways to write better and cleaner code

Clean code is more than just working code. Clean code is easy to read, simple to understand, and neatly organized. In this article well look at eight ways we can write cleaner React code.

In going through these suggestions, its important to remember that thats exactly what these are: suggestions. If you disagree with any of them, thats completely fine. However, these are practices that Ive found helpful in writing my own React code. Lets dive in!

1. Conditional rendering only for one condition

If you need to conditionally render something when a condition is true and not render anything when a condition is false, dont use a ternary operator. Use the && operator instead.

Bad example:

Good example:

2. Conditional rendering on either condition

If you need to conditionally render one thing when a condition is true and render a different thing when the condition is false, use a ternary operator.

Bad example:

Good example:

3. Boolean props

A truthy prop can be provided to a component with just the prop name without a value like this: myTruthyProp. Writing it like myTruthyProp={true} is unnecessary.

Bad example:

Good example:

4. String props

A string prop value can be provided in double quotes without the use of curly braces or backticks.

Bad example:

Good example:

5. Event handler functions

If an event handler only takes a single argument for the Event object, you can just provide the function as the event handler like this: onChange={handleChange}. You don't need to wrap the function in an anonymous function like this: onChange={e => handleChange(e)}.

Bad example:

Good example:

6. Passing components as props

When passing a component as a prop to another component, you dont need to wrap this passed component in a function if the component does not accept any props.

Bad example:

Good example:

7. Undefined props

Undefined props are excluded, so dont worry about providing an undefined fallback if it's ok for the prop to be undefined.

Bad example:

Good example:

8. Setting state that relies on the previous state

Always set state as a function of the previous state if the new state relies on the previous state. React state updates can be batched, and not writing your updates this way can lead to unexpected results.

Bad example:

Good example:

Honorable Mention

The following practices are not React-specific but rather are good practices for writing clean code in JavaScript (and any programming language, for that matter).

  • Extract complex logic into clearly-named functions
  • Extract magic numbers into constants
  • Use clearly named variables

Happy coding!


Original Link: https://dev.to/thawkin3/react-clean-code-simple-ways-to-write-better-and-cleaner-code-2loa

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To