Как визуализировать данные без эффектов

UseEffect — это хук, предоставляемый React. В основном разработчики используют этот хук для реализации логики и запуска ее при изменении состояния или свойств. Я очевиден и видел так много кодовой базы, где они использовали количество эффектов на первом месте. Когда вы обновляете состояние вашего компонента, React сначала вызывает методы вашего компонента, чтобы вычислить, что должно быть на экране. Позже React отрисовывает эти изменения в DOM, обновляя экран. Затем React запускает ваши эффекты. Если ваш эффект немедленно обновляет состояние, алгоритм реагирования перезапускает весь процесс с нуля. Ниже приведен код, использующий несколько хуков Effects.

Чтобы избежать ненужных рендеров, делайте все данные на верхнем уровне ваших компонентов. Этот код будет автоматически перезапускаться всякий раз, когда ваши реквизиты или состояние меняются.

Теперь наша цель — удалить все хуки UseEffect и бесполезное состояние и заставить код работать так же, как он работал с эффектами.

Итак, вы уже заметили, что мы удалили все хуки UseEffect и бесполезные состояния. Теперь наш код автоматически перезапускается при изменении реквизита, поэтому мы используем механизм естественного рендеринга. Мы можем использовать этот хук, когда есть особая необходимость, но для рендеринга компонента это неоптимальный способ.

Если вам понравилась эта статья, не забудьте поставить лайк и поделиться.