Почему React ре-рендерит
Джошуа Комо в своем блоге в двух частях рассказал, почему React ре-рендерит компоненты и как этого избежать.
Основная причина для рендера компонента – изменение стейта. При изменении стейта ре-рендерятся дочерние компоненты. Чтобы избежать лишнего ре-рендера компонента при рендере родительского, используйте мемоизацию – memo.
React оптимизирует процесс рендера, поэтому сам по себе ре-рендер не имеет большого значения. Однако в некоторых случаях ре-рендер “тяжелого” компонента может занять много времени и повлиять на производительность приложения. В случаях, когда нужно оптимизировать количество ре-рендеров, используют хуки useMemo и useCallback.
useMemo используется для кэширования вычислений между ре-рендерами. Также useMemo используется для сохранения ссылки на одно и то же значение между ре-рендерами для передачи в пропсы мемоизированного компонента. useCallback делает то же самое, что и useMemo, но только для функций.
www.joshwcomeau.com/react/w…-renderswww.joshwcomeau.com/react/u…callback
In React, we don't update the DOM directly, we tell React what we want the DOM to look like, and React tackles the rest. But how exactly does it do this? In this tutorial, we'll unpack exactly when and why React re-renders, and how we can use this information to optimize the performance of our React apps.
