​Какие есть способы оптимизации рендеринга в react?

Это процесс снижения количества лишних перерисовок компонентов, что улучшает производительность приложения. React повторно рендерит компоненты, когда их состояние (state) или свойства (props) изменяются. Однако часто это приводит к ненужным рендерам, которые можно избежать.

Производительность
Чем больше компонентов рендерится без необходимости, тем больше времени тратится на вычисления и обновления DOM.

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

Лучший UX
Плавная работа интерфейса критична для сложных приложений с большим количеством данных.

Мемоизация компонентов
React предоставляет утилиту React.memo, чтобы предотвращать ререндеринг компонента, если его props не изменились.

import React from 'react';

const MyComponent = React.memo(({ count }) => {
  console.log('Рендер компонента');
  return <div>Счётчик: {count}</div>;
});

// Использование
export default function App() {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <MyComponent count={count} />
      <button onClick={() => setCount(count + 1)}>Увеличить</button>
    </div>
  );
}

Использование `useMemo` и `useCallback`
Эти хуки используются для предотвращения повторных вычислений и создания функций при каждом рендере.

import React, { useMemo } from 'react';

function ExpensiveCalculationComponent({ number }) {
  const calculatedValue = useMemo(() => {
    console.log('Выполняются сложные вычисления...');
    return number ** 2;
  }, [number]); // Пересчитывается только если `number` изменился

  return <div>Результат: {calculatedValue}</div>;
}

Пример useCallback

import React, { useCallback, useState } from 'react';

const Child = React.memo(({ onClick }) => {
  console.log('Рендер дочернего компонента');
  return <button onClick={onClick}>Кликни меня</button>;
});

function Parent() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    console.log('Кнопка нажата');
  }, []); // Создаётся одна и та же функция между рендерами

  return (
    <div>
      <Child onClick={handleClick} />
      <button onClick={() => setCount(count + 1)}>Увеличить {count}</button>
    </div>
  );
}

Разделение кода и ленивый рендеринг
Использование React.lazy и Suspense позволяет загружать компоненты только тогда, когда они необходимы.

import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Загрузка...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

Проверка зависимости в `useEffect`
Избегайте запуска побочных эффектов, если зависимости не изменились.

React.useEffect(() => {
  console.log('Эффект сработал!');
}, [/* следите только за нужными зависимостями */]);

Избегайте анонимных функций и объектов в `props`
Передача новых объектов и функций через props вызывает лишние рендеры.

<ChildComponent data={{ key: 'value' }} />

Лучше так

const data = { key: 'value' };
<ChildComponent data={data} />;

Разделение больших компонентов
Если компонент слишком сложный, разделите его на более мелкие, чтобы React мог эффективно управлять состоянием и перерисовкой.

Использование ключей при рендере списков
Каждый элемент списка должен иметь уникальный ключ, чтобы React мог правильно отслеживать изменения.

{items.map(item => (
  <div key={item.id}>{item.name}</div>
))}

👉 @frontendInterview

👉 @frontendInterview

​Как повернуть блок на 45 градусов?

Чтобы повернуть блок на 45 градусов, используется свойство CSS transform с функцией rotate. Это свойство позволяет применять различные трансформации к элементам, включая вращение, масштабирование, смещение и наклон.

Пример использования

.rotated-box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    transform: rotate(45deg);
}

Основной синтаксис
Угол поворота элемента. Может быть положительным или отрицательным значением в градусах (deg), радианах (rad), градусах (grad) или оборотах (turn).

transform: rotate(угол);   

Параметры
Угол поворота элемента. В данном случае элемент поворачивается на 45 градусов по часовой стрелке.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .rotated-box {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            transform: rotate(45deg);
        }
    </style>
</head>
<body>
    <div class="rotated-box"></div>
</body>
</html>

Свойство transform
Позволяет применять различные визуальные эффекты к элементу, такие как вращение, масштабирование и смещение.
Функция rotate
Используется для вращения элемента на заданный угол. Положительные значения поворачивают элемент по часовой стрелке, отрицательные — против часовой стрелки.

Использование в реальных проектах
Вращение элементов может использоваться для создания интересных визуальных эффектов, таких как поворот иконок, изображений или блоков текста.

В комбинации с анимацией (@keyframes и transition), вращение может создавать динамичные и интерактивные пользовательские интерфейсы.

👉 @frontendInterview

JavaScript: массивы от А до Я для тех, кто только начал

Кажется, пришло время поговорить о массивах. Не просто поговорить, но еще и разобрать полезные примеры, которые помогут узнать о них больше. В этой статье я доступно расскажу, что такое массивы, какие у них особенности и для чего они вообще нужны. Заваривайте чай, открывайте редактор кода на своем компьютере для экспериментов — начнем разбираться!

👉 @frontendInterview

Начните карьеру в IT с профессии Frontend-разработчика

Frontend-разработчик создает визуальную часть сайтов и приложений, с которой взаимодействуют пользователи. Это востребованная профессия с отличными перспективами роста и высоким уровнем дохода.

Преимущества профессии:
— Высокий доход: от 70 000 рублей для начинающих специалистов, до 300 000 рублей для опытных разработчиков
— Широкие возможности для работы: IT-компании, банки, стриминговые сервисы, фриланс
— Гибкий график: 50% вакансий предлагают удаленный формат работы

Чем занимается Frontend-разработчик:
— Создает адаптивные интерфейсы, которые корректно отображаются на любых устройствах
— Разрабатывает интерактивные элементы: формы, кнопки, анимации
— Оптимизирует производительность сайтов и приложений
— Работает с современными технологиями: HTML, CSS, JavaScript, React, Vue.js

С чего начать обучение:
— Освоить основы HTML и CSS
— Изучить JavaScript и принципы работы с DOM
— Практиковаться на реальных проектах
— Изучить популярные фреймворки (React, Vue.js, Angular)

Получите подробную карту развития (Skill-map) для frontend-разработчика и узнайте, как построить успешную карьеру в IT.

Зарегистрируйтесь и скачайте гайд → https://clck.ru/3Nu7sK

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru
erid 2SDnjdwxYn2