・Before dealing with performance optimization, we have to understand React Rendering Pattern, which makes the app slow.
React's rendering issues are composed of three phases as follows:
・Trigger of render: changing of state or props.
・Rendering of components: calling components.
・Committing changes to the DOM.
Most of the issues are involved in the rendering of components, such as unnecessary calling components or too heavy calculations.
React19 introduced the React Compiler that memoizes components and values automatically by applying useMemo and useCallback everywhere it's safe to do so. However, it doesn't solve architectural issues such as overlaying broad context providers or huge component trees.
Unnecessary re-renders
Unnecessary re-renders happen when a component updates even though its props or state haven’t changed, which can introduce delays and make interactions feel sluggish.
Excessive computations
Excessive computations during rendering can block the main thread, causing temporary UI freezes and reducing overall responsiveness.
Rendering large lists
Rendering large lists all at once increases processing time, which can lead to noticeable delays and choppy scrolling.
Context update cascades
When a context value changes, it can trigger re-renders across many components, resulting in slower updates and degraded performance.
Inline function usage
Defining functions inline within components creates new instances on every render, which can add overhead and lead to subtle performance issues.
Deep component trees
Deep component trees increase rendering complexity, which can slow down both initial page load and subsequent updates.
Top comments (0)