На старом или новом React больше работал

Опыт работы с React

Я работал с React на протяжении всей его современной эволюции, начиная с классических классовых компонентов и заканчивая современным React с функциональными компонентами и хуками. Если говорить о "старом" (React до версии 16.8) и "новом" React (React 16.8+ с хуками), то мой опыт распределён примерно 60% на новый React и 40% на старый, поскольку многие проекты мигрировали постепенно, и приходилось поддерживать legacy-код.

Ключевые различия в моём опыте

Работа со "старым" React (до хуков):

• Разработка на классовых компонентах с жизненным циклом componentDidMount, componentDidUpdate, componentWillUnmount
• Использование HOC (Higher-Order Components) и render props для повторного использования логики
• Управление состоянием через this.setState() и пропсы
• Работа с контекстом через Context.Consumer и Context.Provider

Пример классового компонента:

class OldComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  componentDidMount() {
    console.log('Component mounted');
  }

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  };

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

Работа с "новым" React (хуки и современные фичи):

• Активное использование функциональных компонентов с хуками (useState, useEffect, useContext, useReducer, кастомные хуки)
• Применение React.memo, useMemo, useCallback для оптимизации производительности
• Работа с Concurrent Features (Suspense, useTransition, useDeferredValue)
• Использование Server Components в Next.js и подобных фреймворках

Пример функционального компонента с хуками:

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

function NewComponent() {
  const [count, setCount] = useState(0);
  const [data, setData] = useState(null);

  useEffect(() => {
    console.log('Component mounted or count changed');
    
    // Cleanup функция
    return () => {
      console.log('Cleanup before unmount or re-run');
    };
  }, [count]); // Зависимость от count

  const handleClick = () => {
    setCount(prevCount => prevCount + 1);
  };

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

Эволюция подходов в моей практике

1. Миграция проектов: Участвовал в постепенной миграции крупных проектов с классовых компонентов на функциональные с хуками, применяя стратегию incremental adoption.

2. Кастомные хуки: Активно создаю кастомные хуки для:

   • Управления состоянием форм (useForm)
   • Работы с API (useFetch, useMutation)
   • Логики модальных окон (useModal)
   • Управления темами (useTheme)

// Пример кастомного хука useLocalStorage
function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error(error);
      return initialValue;
    }
  });

  const setValue = (value) => {
    try {
      const valueToStore = value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      console.error(error);
    }
  };

  return [storedValue, setValue];
}

1. Оптимизация производительности: С внедрением хуков стал чаще использовать:

   • React.memo для мемоизации компонентов
   • useMemo для тяжёлых вычислений
   • useCallback для стабильных ссылок на функции

2. Управление состоянием: Перешёл от Redux с классовыми компонентами к комбинации Context API + useReducer или современным решениям типа Zustand, Jotai для новых проектов.

Преимущества современного React в моей работе

• Лучшая читаемость и организация кода: Логика группируется по функциональности, а не по методам жизненного цикла
• Повторное использование логики: Кастомные хуки решают проблему "wrapper hell", характерную для HOC
• Более предсказуемое тестирование: Функциональные компоненты с хуками легче тестировать
• Лучшая оптимизация: Более тонкий контроль над ререндерами

Вывод

Хотя я активно работаю с современным React и предпочитаю его для новых проектов, опыт со "старым" React остаётся ценным, так как:

• Позволяет поддерживать и модернизировать legacy-проекты
• Даёт глубокое понимание эволюции React и причин введения хуков
• Помогает принимать обоснованные архитектурные решения

Современный React с его декларативным подходом, хуками и постоянными улучшениями (как Server Components) делает разработку более эффективной, но понимание классических паттернов остаётся важной частью expertise React-разработчика.