Frontend | Вопросы собесов on Telegram: “📌 Что не стоит писать в рендере? 💬 Спрашивают…”

📌 Что не стоит писать в рендере?

💬 Спрашивают в 3% собеседований

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

1️⃣ Выполнение побочных эффектов

Побочные эффекты включают операции, которые изменяют состояние, делают запросы к серверу, подписываются на события или манипулируют DOM напрямую. Для этих целей следует использовать хуки, такие как useEffect, или методы жизненного цикла классовых компонентов, такие как componentDidMount и componentDidUpdate.

🤔 Что не делать:

class MyComponent extends React.Component {
  render() {
    // Не делайте запросы в render
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        this.setState({ data });
      });

    return <div>Rendering...</div>;
  }
}

🤔 Правильный подход:

class MyComponent extends React.Component {
  componentDidMount() {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        this.setState({ data });
      });
  }

  render() {
    return <div>Rendering...</div>;
  }
}

2️⃣ Изменение состояния (setState)

Изменение состояния компонента внутри метода render приведет к бесконечному циклу рендеринга.

🤔 Что не делать:

class MyComponent extends React.Component {
  render() {
    // Не вызывайте setState в render
    this.setState({ someState: 'newValue' });

    return <div>Rendering...</div>;
  }
}

🤔 Правильный подход:

class MyComponent extends React.Component {
  someMethod() {
    this.setState({ someState: 'newValue' });
  }

  render() {
    return <div onClick={() => this.someMethod()}>Rendering...</div>;
  }
}

3️⃣ Выполнение дорогостоящих вычислений

Метод render должен быть быстрым и легким, чтобы поддерживать высокую производительность. Дорогостоящие вычисления могут замедлить рендеринг.

🤔 Что не делать:

class MyComponent extends React.Component {
  render() {
    // Избегайте долгих вычислений в render
    let result = 0;
    for (let i = 0; i < 1000000000; i++) {
      result += i;
    }

    return <div>Result: {result}</div>;
  }
}

🤔 Правильный подход:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { result: this.expensiveCalculation() };
  }

  expensiveCalculation() {
    let result = 0;
    for (let i = 0; i < 1000000000; i++) {
      result += i;
    }
    return result;
  }

  render() {
    return <div>Result: {this.state.result}</div>;
  }
}

4️⃣ Прямое манипулирование DOM
React управляет DOM за вас, поэтому вам не нужно и не следует манипулировать DOM напрямую в методе render. Вместо этого используйте состояние и пропсы для управления рендерингом.

🤔 Что не делать:

class MyComponent extends React.Component {
  render() {
    // Не манипулируйте DOM напрямую в render
    document.getElementById('some-id').textContent = 'New Text';

    return <div>Rendering...</div>;
  }
}

🤔 Правильный подход:

class MyComponent extends React.Component {
  render() {
    return <div id="some-id">New Text</div>;
  }
}

🤔 Заключение

Метод render должен быть чистым и идемпотентным. Это означает, что он должен только возвращать JSX для рендеринга и не выполнять побочные эффекты, такие как изменения состояния, запросы к серверу, дорогостоящие вычисления или манипуляции с DOM. Для этих целей следует использовать хуки (например, useEffect) или методы жизненного цикла классовых компонентов.

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых