Writing cleaner/easier-to-read code in ReactJS
❌
function App(props) {
return <>example</>
}
✅ const App = props => <>example</>
❌
const App = props => {
return <div>example</div>
}
✅
const App = props =>
<div>example</div>
❌
const App = props => {
<>
{props.name}
{props.age}
</>
}
✅
const App = ({name, age}) => {
<>
{name}
{age}
</>
}
❌
const App = data => {
<>
{data && data.name}
</>
}
✅
const App = data => {
<>
{data?.name}
</>
}
❌
const App = () => {
<>
{examples.map(example => {
return <p>{example?.name}
})}
</>
}
✅
const App = () => {
<>
{examples.map(({name}) => {
return <p>{name}
})}
</>
}
❌
const App = props => {
<div {...props}>{props?.name}</div>
}
✅
const App = ({ name, ...rest }) => {
<div {...rest}>{name}</div>
}
❌
let user = getUser();
if(!user) {
user = "name";
}
✅
const user = getUser() ?? "name";