umma.dev

Writing cleaner/easier-to-read code in ReactJS

Arrow Functions

❌

function App(props) {
  return <>example</>
}

✅ const App = props => <>example</>

Automatic Return

❌
const App = props => {
  return <div>example</div>
}

✅
const App = props =>
  <div>example</div>

Destructure Props

❌
const App = props => {
  <>
    {props.name}
    {props.age}
  </>
}

✅
const App = ({name, age}) => {
  <>
    {name}
    {age}
  </>
}

Handle Undefined

❌
const App = data => {
  <>
    {data && data.name}
  </>
}

✅
const App = data => {
  <>
    {data?.name}
  </>
}

Destructure Arrays

❌
const App = () => {
  <>
    {examples.map(example => {
      return <p>{example?.name}
    })}
  </>
}

✅
const App = () => {
  <>
    {examples.map(({name}) => {
      return <p>{name}
    })}
  </>
}

Pass all Props

❌
const App = props => {
  <div {...props}>{props?.name}</div>
}

✅
const App = ({ name, ...rest }) => {
  <div {...rest}>{name}</div>
}

Default Values

❌
let user = getUser();
if(!user) {
  user = "name";
}

✅
const user = getUser() ?? "name";