Можно ли вызвать код перед отрисовкой?

Можно ли выполнить код до отрисовки компонента?

Да, в React существует несколько способов выполнить код до того, как компонент будет отрисован (смонтирован) в DOM. Этот процесс называется "pre-mount" или выполнение кода на этапе инициализации компонента. Рассмотрим основные подходы:

1. Constructor класса (для классовых компонентов)

В классовых компонентах код в конструкторе выполняется до первого рендера render().

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    // Этот код выполняется ДО отрисовки
    console.log('Конструктор: код перед рендером');
    this.state = { data: null };
    
    // Пример инициализации данных
    this.initializeData();
  }

  initializeData() {
    // Предварительные вычисления или проверки
    const initialData = localStorage.getItem('appData');
    if (initialData) {
      this.state.data = JSON.parse(initialData);
    }
  }

  render() {
    console.log('Рендер компонента');
    return <div>{this.state.data}</div>;
  }
}

2. Static getDerivedStateFromProps (классовые компоненты)

Этот статический метод вызывается как перед первым рендером, так и перед каждым обновлением.

class MyComponent extends React.Component {
  state = { derivedValue: null };

  static getDerivedStateFromProps(props, state) {
    // Выполняется ПЕРЕД каждым рендером, включая первый
    console.log('getDerivedStateFromProps: подготовка к рендеру');
    
    // Вычисляем производное состояние на основе пропсов
    return {
      derivedValue: props.inputValue * 2
    };
  }

  render() {
    return <div>{this.state.derivedValue}</div>;
  }
}

3. Функциональные компоненты и логика до рендера

В функциональных компонентах вся логика, написанная непосредственно в теле компонента, выполняется до возврата JSX.

function FunctionalComponent(props) {
  // Весь этот код выполняется ДО возврата JSX (до рендера)
  
  // 1. Предварительные вычисления
  const calculatedValue = expensiveCalculation(props.input);
  
  // 2. Работа с хуками (но осторожно!)
  const [state, setState] = useState(() => {
    // Ленивая инициализация useState - выполняется один раз перед первым рендером
    console.log('Ленивая инициализация состояния');
    return calculateInitialState(props);
  });

  // 3. Побочные эффекты до рендера (но это антипаттерн!)
  // Внимание: не делайте side effects здесь!
  
  console.log('Код перед возвратом JSX');

  // Только после всей этой логики происходит возврат JSX
  return <div>{calculatedValue}</div>;
}

4. useMemo и useCallback для оптимизации

Эти хуки позволяют выполнять вычисления до рендера и мемоизировать результаты:

function OptimizedComponent({ list, filter }) {
  // useMemo выполнит вычисление ДО рендера и запомнит результат
  const filteredList = useMemo(() => {
    console.log('Вычисление отфильтрованного списка до рендера');
    return list.filter(item => item.includes(filter));
  }, [list, filter]);

  // useCallback мемоизирует функцию до рендера
  const handleClick = useCallback(() => {
    console.log('Мемоизированная функция');
  }, []);

  return (
    <ul>
      {filteredList.map(item => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
}

5. Пользовательские хуки для предварительной логики

Можно создать кастомный хук, который выполняет логику до рендера:

function usePreRenderLogic(initialValue) {
  const [processedValue, setProcessedValue] = useState(null);

  // Эта логика выполнится при первом рендере компонента
  useEffect(() => {
    // Но useEffect вызывается ПОСЛЕ рендера!
    // Для кода ДО рендера используем useState с ленивой инициализацией
  }, []);

  // Альтернатива: ленивая инициализация useState
  const [value] = useState(() => {
    // Этот код выполнится только один раз перед первым рендером
    console.log('Предварительная обработка в кастомном хуке');
    return processInitialValue(initialValue);
  });

  return value;
}

function MyComponent() {
  const preparedData = usePreRenderLogic(rawData);
  // preparedData готова к использованию ДО рендера
  
  return <div>{preparedData}</div>;
}

Важные ограничения и рекомендации:

1. Не выполняйте side effects (запросы к API, изменения DOM) в конструкторе или теле функционального компонента перед рендером
2. Для side effects используйте useEffect с пустым массивом зависимостей (выполнится после первого рендера)
3. Ленивая инициализация useState - единственный "законный" способ выполнить код один раз перед первым рендером в функциональных компонентах
4. Помните, что render-фаза в React должна быть чистой (без побочных эффектов)

Практический пример: инициализация перед рендером

function UserProfile({ userId }) {
  // Инициализируем состояние с ленивым вычислением
  const [userData, setUserData] = useState(() => {
    // Получаем кэшированные данные ДО рендера
    const cached = sessionStorage.getItem(`user_${userId}`);
    return cached ? JSON.parse(cached) : null;
  });

  // Получаем свежие данные ПОСЛЕ рендера
  useEffect(() => {
    if (!userData) {
      fetchUserData(userId).then(data => {
        setUserData(data);
        sessionStorage.setItem(`user_${userId}`, JSON.stringify(data));
      });
    }
  }, [userId, userData]);

  // Если данных нет, показываем заглушку
  if (!userData) return <div>Загрузка...</div>;

  // Рендер с готовыми данными
  return (
    <div>
      <h2>{userData.name}</h2>
      <p>{userData.email}</p>
    </div>
  );
}

Вывод: Да, вызвать код перед отрисовкой можно и иногда нужно, но важно понимать разницу между инициализацией (допустимо до рендера) и побочными эффектами (должны выполняться после рендера через useEffect).