Оптимизация React-приложений помогает уменьшить количество ненужных рендеров, ускорить загрузку и улучшить общую производительность. В этой статье рассмотрим использование React.memo и Server Components.

1. React.memo

Что такое `React.memo`?

`React.memo` — это HOC (Higher-Order Component), который мемоизирует компонент, предотвращая его повторный рендер, если props не изменились.

Синтаксис

```javascript const MemoizedComponent = React.memo(Component); ```

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

```javascript import React from 'react';

function Child({ count }) { console.log('Child rendered'); return

Count: {count}

; }

const MemoizedChild = React.memo(Child);

function Parent() { const [count, setCount] = React.useState(0); const [text, setText] = React.useState('');

return (

<button onClick={() => setCount(count + 1)}>Increment <input value={text} onChange={(e) => setText(e.target.value)} />

); }

text


<h3 id="когда-использовать-reactmemo">Когда использовать `React.memo`?</h3>
- Компоненты рендерятся часто с одинаковыми props.
- Рендер компонента затратный по времени.

<h3 id="особенности">Особенности</h3>
- `React.memo` сравнивает props поверхностно. Для глубокого сравнения используйте вторую аргумент-функцию.

<h4 id="пример-с-кастомным-сравнением">Пример с кастомным сравнением</h4>
```javascript
const MemoizedChild = React.memo(Child, (prevProps, nextProps) => {
  return prevProps.count === nextProps.count;
});

2. Server Components

Что такое Server Components?

Server Components (Серверные компоненты) — это новая возможность React, которая позволяет выполнять рендеринг компонентов на сервере. Это снижает нагрузку на клиент и улучшает производительность за счёт отправки минимального JavaScript на клиентскую сторону.

Основные преимущества

- Улучшение производительности за счёт рендеринга на сервере. - Уменьшение размера загружаемого JavaScript. - Возможность использования серверных ресурсов (например, базы данных) напрямую внутри компонентов.

Пример структуры проекта

``` src/ components/ Header.server.js Footer.client.js ```

Как работают Server Components?

1. Сервер рендерит компоненты и отправляет их в виде готовой HTML-структуры. 2. Клиентская часть React обрабатывает и монтирует компоненты.

Пример

```javascript // Header.server.js export default function Header() { return

This is rendered on the server

; }

// Footer.client.js export default function Footer() { return

This is rendered on the client

; }

// App.js import Header from './components/Header.server'; import Footer from './components/Footer.client';

function App() { return (