🖥 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> ) 📎 Ещё больше полезных советов @javascript_react