React JS: “🖥 5 вещей, которые сделают ваш React проект лучше *️⃣Используйте JSX-…”

🖥 5 вещей, которые сделают ваш React проект лучше

*️⃣Используйте JSX-сокращения
Допустим, вам нужно управлять видимостью компонента Navbar с помощью пропса showTitle:
Плохо

return (
  <Navbar showTitle={true} />
);

Хорошо

return(
  <Navbar showTitle />  
);

*️⃣Используйте тернарные операторы
Отличный способ для выбора между двумя компонентами по некоторому условию
Плохо

const { role } = user;

if(role === ADMIN) {
  return <AdminUser />
}else{
  return <NormalUser />
}

Хорошо

const { role } = user;

return role === ADMIN ? <AdminUser /> : <NormalUser />

*️⃣Используйте преимущества объектных литералов
Если у вас выбор между тремя и более компонентами, литералы объектов могут сделать код более читаемым – используйте их вместо сложных условий.
Плохо

const {role} = user

switch(role){
  case ADMIN:
    return <AdminUser />
  case EMPLOYEE:
    return <EmployeeUser />
  case USER:
    return <NormalUser />
}

Хорошо

const {role} = user

const components = {
  ADMIN: AdminUser,
  EMPLOYEE: EmployeeUser,
  USER: NormalUser
};

const Component = components[role];

return <Component />;

*️⃣Используйте фрагменты
Нет никакого преимущества в использовании div вместо Fragment. Зачем нам лишний элемент в DOM?
Плохо

return (
  <div>
     <Component1 />
     <Component2 />
     <Component3 />
  </div>  
)

Хорошо

return (
  <>
     <Component1 />
     <Component2 />
     <Component3 />
  </>  
)

*️⃣Не определяйте функцию внутри рендера
Лучше не смешивать логику и рендер внутри компонента.
Плохо

return (
    <button onClick={() => dispatch(ACTION_TO_SEND_DATA)}>    // NOTICE HERE
      This is a bad example 
    </button>  
)

Хорошо

const submitData = () => dispatch(ACTION_TO_SEND_DATA)

return (
  <button onClick={submitData}>  
    This is a good example 
  </button>  
)

📎 Ещё больше полезных советов

@react_tg