Оптимизируем React-приложение

Данное свойство основывается на нечастом повторении редко-обновляющихся событий. К примеру, у нас есть каталог товаров на сайте. При каждой загрузке страницы мы обращаемся к бэкенду(чтобы вытащить данные товаров). Во время большого онлайна нагрузка будет слишком большая. Этого мы должны избежать.

👉 React.useState кэширует данные один раз и вместо сервера достаёт их из кэша. Нагрузка будет значительно ниже. Опять же, всё зависит от логики вашего кода.

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

Вам нравится такой подход к обучению?

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

import React, { useMemo } from 'react';

const Component = ({ data }) => {
  const heavyCalculation = useMemo(() => {
    // Некоторые затратные вычисления
    return data.filter(/* ... */);
  }, [data]); // зависимость - массив данных

  return <div>{heavyCalculation}</div>;
};

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

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

const MemoizedComponent = () => {
  const [count, setCount] = useState(0);

  // Функция обработчика onClick, мемоизированная с помощью useCallback
  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]); // Массив зависимостей

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

Осталось 4...🫡

React routing

Для примера возьмём ссылку http://my_shop. Допустим, мы хотим зайти в каталог товаров. Ссылка для каталога изменится на http://my_shop/catalog. Нажав на определённый товар в нём будет ссылка http://my_shop/catalog/product. Через каждый "/" добавляется дополнительный путь(ключевые слова). Это и есть маршрутизация или роуты.

Роуты демонстрируют навигацию на сайте.

Сегодня выпущу видео с практикой по данной теме🔥

Routing в React

Буду очень рад вашим реакциям, я старался❤️

Данный видео-урок также опубликован в Дзен👇.

Также в планах создать канал на YouTube, нравится идейка?)

Завтра выйдет вторая часть, ждите🔥

Плюсы и минусы технологии SPA

✅ Плюсы:

👉 Высокая скорость работы очень важна для всех пользователей. Приложение загружается всего лишь один раз и не требует дополнительных подгрузок для работы с ним.

👉 Продвинутое кэширование cнижает нагрузку вашего устройства благодаря хранению данных в кэше.

👉 Крутые возможности пользовательского интерфейса. Более широкий круг технологий для прокачки вашего контента.

❌ Минусы:

👉 SEO-оптимизация - один из важных недостатков данной технологии. Для поисковых систем становится трудно черпать информацию с одностраничных приложений, но любая проблема решается.

👉 Безопасность. JavaScript очень часто любят атаковать, поэтому, важно позаботиться о защите вашего проекта.

Было полезно - поставь "❤️".

Инструменты React для SPA

👇 Link отличается от тега "a" тем, что позволяет переключать роуты без обновления страниц.

import { Link } from 'react-router-dom';

const MyComponent = () => {

  return (

    <div>

      <Link to="/some-page">Перейти на страницу</Link>
    
    </div>
  );
};

👇 useNavigate такой же как и Link, но для кнопок.

import { useNavigate } from 'react-router-dom';

const MyComponent = () => {
  const navigate = useNavigate();

  const handleClick = () => {
    // Программная навигация с использованием useNavigate
    navigate('/another-page');
  };

  return (
    <div>
      {/* Обработчик клика, использующий программную навигацию */}
      <button onClick={handleClick}>Перейти на другую страницу</button>
    </div>
  );
};

Давайте уже добьём оставшиеся 3❤️ в закреплённом посте, буду делать контент вам в ленту🔥

Процесс запущен🔥

Сегодня-завтра поищу дизайн для проекта

Routing в React: Часть 2

Всех с наступающим❤️

Данный видео-урок также опубликован в Дзен👇.