Лучшие подходы и решения для уменьшения кода на React. Часть 2

Привет. Это перевод второй статьи из серии “Лучшие подходы и решения для уменьшения кода на React” автора Rahul Sharma.

Всего в данной серии 3 статьи, и найти их все вы можете по ссылкам ниже:

• Часть 1

• Часть 2

• Часть 3

Не будем терять время, давайте продолжим рассмотри лучших подходов и решений для уменьшения кода. Мы начнем с простого примера.

Если в компонент не передаются дочерние элементы, используйте самозакрывающийся тэг.

Плохой код:

return <Component></Component>;

Хороший код:

return <Component />;

---

Не пишите функции внутри jsx элементов.

Плохой код:

return (   <div>     <button       onClick={() => {         setCount(1);         // ...       }}     >       Click     </button>   </div> );

Хороший код:

const onClick = useCallback(() => {   setCount(1);   // ... }, [deps]);  return (   <div>     <button onClick={onClick}>Click</button>   </div> );

---

Используйте объект в хуке useState, если вам необходимо обновлять несколько состояний приложения вместе.

Избегайте использование нескольких вызов setState подряд. Это стандартная ошибка, которая может привести к ненужным ререндерам. Лучше использовать один вызов.

Плохой код:

const [count, setCount] = useState(0); const [name, setName] = useState("");  const onClick = () => {   setTimeout(() => {     setName("John");     setCount(count + 1);   }, 1000); };

Хороший код:

const [state, setState] = useState({   count: 0,   name: "", });  const onClick = () => {   setTimeout(() => {     setState((prevState) => ({       ...prevState,       name: "John",       count: prevState.count + 1,     }));   }, 1000); };

Примечание: React 18 добавил автоматическую группировку, так что реакт теперь сам решает проблему нескольких одновременных обновлений.

---

Используйте styled-components для стилей ваших компонентов. Это хороший выбор для избегания написания css в jsx и также убирает необходимость настройки css для приложения.

Это полностью основано на личном мнении

Плохой код:

return <div style={{ backgroundColor: "red" }}></div>;

Хороший код:

const Container = styled.div`   background-color: ${({ theme }) => theme.colors.background};   padding: 1rem; `;

Лучший код:

const getPrimaryColor = ({ theme }) => theme.colors.primary; const getDefaultColor = ({ theme }) => theme.colors.secondary;  const Button = styled.button`   background-color: ${getPrimaryColor};   color: ${getDefaultColor}; `;

Примечание: создайте функцию для получения цвета и других стилей из темы приложения и указывайте их при стилизации компонента. Это также поможет уменьшить код.

---

Старайтесь избегать классовых компонентов и используйте функциональные.

Плохой код:

class Counter extends Component {   constructor(props) {     super(props);     this.state = {       count: 0,     };     this.onClick = this.onClick.bind(this);   }    onClick = () => {     this.setState({       count: this.state.count + 1,     });   };    render() {     return <button onClick>Click me</button>;   } }

Хороший код:

const Counter = () => {   const [count, setCount] = useState(0);   const onClick = () => setCount(count + 1);   return <button>Click me</button>; };

Примечание: функциональные компоненты не только уменьшают время написание кода, но также и уменьшают вес собранного приложения почти на 60%.

---

React.memo поможет избежать ненужные ререндеры.

Плохой код:

return (   <ui>     {items.map((item) => (       <Component>{item}</Component>     ))}   </ui> );

Хороший код:

const MemoComponent = React.memo(Component); return (   <ui>     {items.map((item) => (       <MemoComponent>{item}</MemoComponent>     ))}   </ui> );

Примечание: Используйте React.memo() с умом. Не используйте useMemo когда компонент должен часто меняться из-за изменения пропсов.

---

Используйте JSX сокращения при передаче Boolean переменных.

Плохой код:

return <button disabled={true}>Submit</button>;

Хороший код:

return <button disabled>Submit</button>;

---

Используйте тернарный оператор вместо блока if-else.

Плохой код:

if (isLoading) {   return <div>Loading...</div>; } else {   return <div>Data</div>; }

Хороший код:

return isLoading ? <div>Loading...</div> : <div>Data</div>;

---

Используйте объекты вместо switch. Я уже упоминал это в прошлой статье для reducers.

Плохой код:

switch (props.type) {   case "ADMIN":     return <Admin />;   case "USER":     return <User />;   default:     return <NotFound />; }

Хороший код:

const componentMap = {   ADMIN: Admin,   USER: User,   NOT_FOUND: NotFound, };  const Component = componentMap[props.type]; return <Component />;

Лучший код:

const componentMap = {   ADMIN: React.lazy(() => import("../components/Admin")),   USER: React.lazy(() => import("../components/User")),   NOT_FOUND: React.lazy(() => import("../components/NotFound")), };  const Component = componentMap[props.type]; return <Component />;

---

Используйте деструктуризацию вместо передачи нескольких пропсов по имени в компонент.

(от переводчика: спорный момент, для помощи в отладке приложения лучше передавать пропсы по отдельности)

Плохой код:

const { name, age, role } = props; return (   <>     <Component name={name} age={age} role={role} />   </> );

Хороший код:

return (   <>     <Component {...props} />   </> );

---

Нет необходимости указывать фигурные скобки при передаче строчек в компонет.

Плохой код:

return <Component name={"John"} />;

Хороший код:

return <Component name="John" />;

---

Не называйте пропсы как встроенные названия у react элементов, к примеру className, style.

Плохой код:

return (   <Component style="bordered"> );

Хороший код:

return (   <Component variant="bordered"> );

---

Не используйте else часть, если if что-то возвращает.

Плохой код:

if (props.name) {   return <div>{props.name}</div>; } else {   return <div>No name</div>; }

Хороший код:

if (props.name) {   return <div>{props.name}</div>; } return <div>No name</div>;

---

Используйте React.Fragment вместо создания обертки из div, span, и т.п.

Плохой код:

return (   <div>     <span>{props.name}</span>     <span>{props.age}</span>   </div> );

Хороший код:

return (   <>     <span>{props.name}</span>     <span>{props.age}</span>   </> );

---

Вы также можете передавать key проп в React.Fragment.

Плохой код:

return (   <container>     {list.map((item) => (       <div key={item.id}>         <SomeComponent />         <SomeAnotherComponent />       </div>     ))}   </container> );

Хороший код:

return (   <>     {list.map((item) => (       <React.Fragment key={item.id}>         <SomeComponent />         <SomeAnotherComponent />       </React.Fragment>     ))}   </> );

Спасибо за прочтение!