⚛️🧹 React без воды: 20 техник чистого кода

Условный рендеринг с оператором &&

Вместо полной if-конструкции можно использовать логический оператор &&, чтобы отобразить компонент только при выполнении определенного условия. Здесь компонент LogoutButton отобразится только тогда, когда isLoggedIn равен true.

        {isLoggedIn && <LogoutButton />}
    

Деструктуризация пропсов и состояния

Этот способ упрощает доступ к значениям из props и state, делая код более лаконичным:

        const { value } = props; 
const { user, isLoggedIn } = this.state;

    

Сокращенный синтаксис фрагментов

Чтобы не оборачивать элементы в лишние div, используйте фрагменты. Этот пример добавляет элементы без создания дополнительных тегов в DOM.

        <>
  <ComponentA />
  <ComponentB />
</>

    

Стрелочные функции в обработчиках событий

Стрелочные функции позволяют избегать использования .bind(this) в конструкторах, а также избавляют от создания экземпляра функции при каждом рендере, что положительно сказывается на производительности объемных компонентов:

        <button onClick={() => this.handleClick()}>Click</button>
    

Функциональные компоненты

Это упрощенная форма создания компонентов, не использующих методы жизненного цикла:

        const Welcome = ({ name }) => <h1>Hello, {name}</h1>;
    

Опциональная цепочка (?.)

Позволяет безопасно обращаться к вложенным свойствам объекта без проверки на null или undefined на каждом уровне:

        const name = props.user?.name;
    

Оператор распространения

Позволяет передать все пропсы в компонент без необходимости перечислять их вручную:

        <MyComponent {...props} />
    

Оператор нулевого слияния (??)

Устанавливает значение по умолчанию, если пропс равен null или undefined:

        const username = props.username ?? 'Guest';
    

Значения по умолчанию в параметрах функций

Можно задать значение по умолчанию для пропсов прямо в параметрах функции:

        const MyComponent = ({ prop = 'default' }) => <div>{prop}</div>;
    

Короткая запись через логическое ИЛИ (||) для значений по умолчанию

Используйте оператор ||, чтобы задать значение по умолчанию, если переменная имеет ложное значение:

        const value = props.value || 'default';
    

Шаблонные литералы для динамических классов

Позволяют легко динамически присваивать CSS-классы в зависимости от условий:

        const className = `btn ${isActive ? 'active' : ''}`;
    

Инлайн стили на основе условий

Стили можно менять динамически прямо в коде, используя объект:

        const style = { color: isActive ? 'red' : 'blue' };
    

Динамические ключи в литералах объектов

Можно создавать объекты с переменными ключами:

        const key = 'name';
const obj = { [key]: 'value' };

    

Метод .map() для рендеринга списков

Используйте .map() для эффективного рендеринга списков компонентов:

        const listItems = items.map(item => <li key={item.id}>{item.name}</li>);
    

Тернарный оператор для условного рендеринга

Это лаконичная альтернатива if-else для рендеринга компонентов:

        const button = isLoggedIn ? <LogoutButton /> : <LoginButton />;
    

Логическое ИЛИ (||) для значений по умолчанию

Позволяет задать резервные значения в случае, если основной параметр имеет ложное значение:

        const displayName = user.name || 'Guest';
    

Деструктуризация в параметрах функций

Можно деструктурировать пропсы прямо в параметрах функции:

        const MyComponent = ({ prop1, prop2 }) => <div>{prop1} {prop2}</div>;
    

Сокращенные имена свойств объектов

Если имя переменной совпадает с именем свойства объекта, можно использовать сокращенную запись:

        const name = 'John';
const user = { name };

    

Деструктуризация массивов

Позволяет легко извлекать значения из массива:

        const [first, second] = array;
    

Псевдонимы для импортов

Можно переименовать импортируемый компонент или модуль, чтобы избежать конфликтов или добавить ясности в код:

        import { Component as MyComponent } from 'library';
    

Какими ещё приёмами для улучшения React-кода вы пользуетесь в своей практике?"

🚀 Для тех, кто хочет войти во frontend-разработку

Собрали курс Frontend Basic, где только практика и реальные кейсы:

• 26 видеоуроков от действующих разработчиков Газпромбанка и Аэрофлота
• Создадите 4 полноценных проекта для портфолио
• Освоите стек: HTML, CSS, JavaScript, React, Git
• Формат: 2 месяца обучения в своем темпе
• Пожизненный доступ к материалам

Особенность курса — фокус на практике: каждую технологию изучаете на реальных задачах, которые встречаются в работе.