Conversation
There was a problem hiding this comment.
Pull request overview
Adds a new English blog post focused on explaining React render behavior and practical techniques to prevent unnecessary re-renders, with supporting diagrams/gifs.
Changes:
- Introduces a new blog post covering re-render mechanics, state colocation,
React.memo, referential stability, Context pitfalls, memoization guidance, and profiling. - Adds/uses multiple existing blog images/gifs to illustrate re-render “blast radius”, referential instability, Context behavior, and memoization cost.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| # What Does "Re-rendering" Actually Mean in React? | ||
|
|
||
| When a component renders in React, the DOM is not directly rebuilt from scratch. Instead, the following sequence of events occurs: |
There was a problem hiding this comment.
This post uses multiple level-1 headings (# ...) for section titles (e.g., “What Does "Re-rendering" Actually Mean in React?”). Other blog posts in this repo keep a single H1 for the post title and use ##/### for sections/subsections (e.g., blog-posts/en/react-ui-has-arrived-in-asp-net-zero.md:4,22). To match the established structure (and avoid confusing page outline/TOC generation), please demote the subsequent # headings to ## (and deeper headings accordingly), leaving only the title as H1.
| * **Practice State Colocation:** Instead of lifting state to the top of the tree, keep it within the smallest possible scope that actually requires the data. | ||
| * **Isolate Components:** Adhere to the "Single Responsibility Principle" by breaking the UI into logical parts, physically blocking re-render waves from spreading. | ||
| * **Ensure Referential Stability:** Keep object and function references stable when passing them as props to prevent unnecessary re-renders of child components. | ||
| * **Limit Context API Usage:** For frequently updated global data, avoid Context (which renders the entire tree) in favor of modern tools like Zustand or Jotai that offer **fine-grained subscriptions**. |
There was a problem hiding this comment.
The summary bullet says “avoid Context (which renders the entire tree)”, but Context updates don’t re-render the entire tree—only components that consume that context (plus any normal re-renders caused by parent renders). Consider rephrasing this to “re-renders all consumers of that context” to keep the guidance technically accurate.
| * **Limit Context API Usage:** For frequently updated global data, avoid Context (which renders the entire tree) in favor of modern tools like Zustand or Jotai that offer **fine-grained subscriptions**. | |
| * **Limit Context API Usage:** For frequently updated global data, avoid Context (which re-renders all consumers of that context) in favor of modern tools like Zustand or Jotai that offer **fine-grained subscriptions**. |
|
|
||
| # The Hidden Performance Risk of Context API | ||
|
|
||
| The Context API is a fantastic, standard solution in React for avoiding "prop drilling" the tedious process of passing data deep through the component tree. However, when used for complex state management, it carries an often-overlooked architectural risk. |
There was a problem hiding this comment.
Grammar/punctuation: “avoiding "prop drilling" the tedious process …” is missing punctuation, which makes the sentence hard to parse. Consider adding an em dash or parentheses (e.g., “avoiding "prop drilling"—the tedious process …”).
| The Context API is a fantastic, standard solution in React for avoiding "prop drilling" the tedious process of passing data deep through the component tree. However, when used for complex state management, it carries an often-overlooked architectural risk. | |
| The Context API is a fantastic, standard solution in React for avoiding "prop drilling"—the tedious process of passing data deep through the component tree. However, when used for complex state management, it carries an often-overlooked architectural risk. |
|
|
||
| # When Should You Use useMemo and useCallback? | ||
|
|
||
| In the React ecosystem, `useMemo` and `useCallback` are usually the first tools that come to mind when it comes to boosting performance. However, this popularity often leads to these hooks being used far more than necessary and in the wrong places a pitfall known as **over-optimization**. |
There was a problem hiding this comment.
Grammar/punctuation: “used far more than necessary and in the wrong places a pitfall known as over-optimization” needs punctuation between “places” and “a pitfall” (comma or em dash) to read correctly.
| In the React ecosystem, `useMemo` and `useCallback` are usually the first tools that come to mind when it comes to boosting performance. However, this popularity often leads to these hooks being used far more than necessary and in the wrong places a pitfall known as **over-optimization**. | |
| In the React ecosystem, `useMemo` and `useCallback` are usually the first tools that come to mind when it comes to boosting performance. However, this popularity often leads to these hooks being used far more than necessary and in the wrong places—a pitfall known as **over-optimization**. |
|
|
||
| JavaScript engines solve these types of basic mathematical, string, or boolean operations in microseconds. Wrapping such an operation in `useMemo` forces React to perform extra tasks like calling the hook, comparing dependencies, and writing the result to memory that are far more "expensive" than the calculation itself. | ||
|
|
||
|  |
There was a problem hiding this comment.
Minor formatting: the alt text has a trailing space (![React UseMemo Performance ]), which can lead to inconsistent rendered text/HTML attributes. Consider trimming the extra space.
|  | |
|  |
A new blog post about React UI has been added. It explains important points to consider regarding rendering, with examples.
Cover:
