#React

🚩 Почему ваш компонент не видит обновления Props?

Props — это read-only канал от родителя к ребёнку. Главное: вы не можете их менять. Попытка мутировать Props приведёт к тому, что обновления не произойдут.

// Плохо - Props read-only
function UserCard(props) {
  props.name = "Bob"; // ❌ Не сработает!
  return <h1>{props.name}</h1>;
}

// Хорошо - Используйте callback
function UserCard({ name, onNameChange }) {
  return (
    <>
      <h1>{name}</h1>
      <button onClick={() => onNameChange("Bob")}>Change</button>
    </>
  );
}

📎 Основные проблемы:

🟣 Props read-only, но разработчики их мутируют
🟣 Передача всего объекта вместо деструктуризации
🟣 Забывают про dependency в useEffect при изменении props

Props — это контракт: родитель передаёт данные, ребёнок их использует, но не меняет. Если нужно обновить — вызови callback.

Пример:

function Button({ label = "Click", onClick }) {
  return <button onClick={onClick}>{label}</button>;
}

function Shop() {
  const [cart, setCart] = React.useState([]);
  const products = [{ id: 1, name: "Laptop", price: 1000 }];

  return (
    <div>
      {products.map(p => (
        <Button key={p.id} label="Add" onClick={() => setCart([...cart, p.name])} />
      ))}
      <p>Cart: {cart.length}</p>
    </div>
  );
}

✅ Props для:
- Передачи данных сверху вниз
- Callback функций для событий
- Конфигурации компонента
- Переиспользуемых компонентов

❌ Не делайте:
- Мутацию Props
- Props drilling (5+ уровней)
- Передачу целого объекта

Props — основа React!


🔎🔎🔎🔎🔄

#⃣Вопрос

#⃣Новости

#⃣База вопросов

#React #JavaScript
🚩 Почему props drilling разрушает вашу архитектуру React?

Redux — это предсказуемый контейнер состояния для JavaScript-приложений. Вместо передачи данных через множество слоёв компонентов (prop drilling), Redux хранит всё состояние в одном центральном месте, и любой компонент может получить нужные данные напрямую.

Блок "Проблема/Решение":

// Плохо: props drilling - передача через 5+ компонентов
<App user={user}>
  <Header user={user}>
    <Nav user={user}>
      <Profile user={user} />
    </Nav>
  </Header>
</App>

// Хорошо: Redux - компонент берёт данные напрямую из store
import { useSelector } from 'react-redux';

function Profile() {
  const user = useSelector(state => state.user);
  return <div>{user.name}</div>;
}

📎 Основные проблемы без Redux:

🟣 Props drilling — данные передаются через десятки компонентов
🟣 Состояние разбросано по всем компонентам — сложно отследить изменения
🟣 Один компонент обновляется — перерисовывается всё дерево
🟣 Сложная отладка — откуда пришли данные в компонент?


🔴Как работает Redux?

Store — одно центральное хранилище состояния всего приложения. Это единственный источник правды.

Action — простой объект, описывающий, что произошло: { type: 'ADD_TODO', payload: 'Купить молоко' }.

Reducer — чистая функция, принимающая старое состояние и action, возвращающая новое состояние: (state, action) => newState.

Dispatch — отправляет action в reducer: dispatch({ type: 'ADD_TODO' }).

Поток данных: User Action → Dispatch → Reducer → New State → UI Update.

// Пример: счётчик
const initialState = { count: 0 };

function counterReducer(state = initialState, action) {
  switch(action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

// В компоненте
function Counter() {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();
  
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>
    </div>
  );
}

✅Правильное решение:
- Используйте Redux для сложных приложений с множеством общего состояния
- Применяйте Redux Toolkit для упрощения кода (createSlice вместо reducers)
- Разделяйте состояние на логические слайсы (auth, products, cart)
- Используйте useSelector для получения данных и useDispatch для отправки actions
- Оборачивайте приложение в <Provider store={store}>


❌ Чего избегать:
- Не используйте Redux для простых приложений (используйте useState)
- Не мутируйте состояние напрямую — reducers должны быть чистыми функциями
- Не складывайте в Redux всё подряд — только глобальное состояние
- Не забывайте про мемоизацию селекторов для оптимизации

Когда использовать Redux: большое приложение (100+ компонентов), часто меняющееся состояние, несколько разработчиков, нужна хорошая отладка. 60% React-приложений используют Redux!


🔎🔎🔎🔎🔄

#⃣Вопрос

#⃣Новости

#⃣База вопросов

🖥 TypeScript — как его стоит изучать

Есть важный момент: в реальной работе разработчик использует далеко не весь TypeScript — зачастую лишь 20–30% его возможностей. Поэтому новичку совершенно не обязательно сразу пытаться охватить всю технологию. Это только замедлит процесс, усложнит обучение и снизит эффективность.

К тому же теория без практики даётся тяжело, изолированные примеры часто непонятны, а задачи по TS поначалу кажутся перегруженными. В результате уходит много времени, а прогресс ощущается слабым. Классическое правило 20/80 здесь работает идеально: небольшой, но правильно выбранный набор знаний даёт максимальный результат.

🔹 Этап 1 — База + поверхностное знакомство с продвинутыми темами

На старте важно понять только основу типизации:
- примитивные типы
- type
- interface
- union-типы
- type aliases

И всё! Поверьте, большинство опытных разработчиков не держат в голове сложные типизации событий или утилит — всё это гуглится за 10 секунд.

Главное — практика. Получать ошибки TypeScript, гуглить их, разбираться — именно так и формируется настоящее понимание логики TS.

Что делать на этом этапе?

1. Посмотреть 1–2 курса (любые):
Полный курс TypeScript за час — https://www.youtube.com/watch?v=V7hBejCH1HI

TypeScript с 0 до Профи. Полный курс + Практика — https://www.youtube.com/watch?v=PYWaUwjofJo

2. Сразу начать проект:
Туду-лист, работа с API, калькулятор — неважно. Главное, чтобы был реальный код, а не только теория.

Идеальная длительность этапа — примерно 2 недели.

🔹 Этап 2 — Продвинутые темы (после освоения React, RTK)

Этот этап точно не нужен новичку. Продвинутый TS лучше изучать тогда, когда уже освоен весь React-стек и есть несколько пет-проектов.

Что входит в продвинутую часть?
- Generics
- Utility Types
- Type Guards
- Маппинг типов
- Сложные паттерны типизации

Как изучать?

1. Посмотреть фундаментальный курс:
TypeScript ФУНДАМЕНТАЛЬНЫЙ КУРС от А до Я — https://youtu.be/LWtHl__oEWc?si=JQidflBDL61By3mS

2. Начать решать задачи:
https://bigfrontend.dev/typenoscript
https://github.com/type-challenges/type-challenges

⭐️ Почему так?

Проблема большинства курсов в том, что они вываливают всю информацию сразу. Новичку это не помогает — он просто не может усвоить продвинутые концепции без опыта.

Точно так же, как нет смысла проходить весь React от и до при первом знакомстве, нет смысла полностью изучать TypeScript на старте.

Кстати, начал внедрять такие практики на менторстве. Снова все улучшать и переделывать курсы свои😅

#typenoscript