Simple examples to write cleaner React code
-
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 isfalse
, don't use a ternary, use the&&
operator. -
Conditional rendering on either condition: If you need to conditionally render one thing when a condition is
true
and render a different thing when a condition isfalse
, use a ternary. -
Boolean props: A truthy prop can be provided to a component with just the prop name like
myTruthyProp
. Writing it likemyTruthyProp={true}
is unnecessary. -
String props: A string value can be provided as a prop value in double quotes without the use of curly braces or backticks.
-
Unnecessary anonymous 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 likeonChange={handleChange}
. You don't need to wrap the function in an anonymous function likeonChange={e => handleChange(e)}
. -
Unnecessary anonymous function components: When passing a component as a prop to another component, you don't need to wrap this passed component in a function if the component does not accept any props.
-
Undefined props: Undefined props are excluded, so don't worry about providing an
undefined
fallback if it's ok for the prop to be undefined. -
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.
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