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.

Josh W. Comeau's platform provides resources in frontend development, React.js, and CSS, offering insightful articles, tutorials, and code examples. With a focus on accessible and creative web development techniques, Josh W. Comeau empowers developers to craft engaging user experiences and solve complex problems in the world of web development.

Josh W Comeau

This tutorial is written to help beginner-intermediate React developers get more comfortable with React. It's the only “trigger” in React for a component to re-render. In React, every state change in React forces an application-wide render, but this isn't true. In this case, it sees that our paragraph has a text node that changed from 0 to 1.

Why React Re-Renders

Link to this heading It's not about the props

Link to this heading Profiling with the React Devtools

Link to this heading Bonus: Performance tips

Are there any more such articles which explain working of react ?

The <a href="https://reactjs.org/docs/react-api.html#reactmemo" target="_blank" rel="noopener nofollow">Official Doc</a> said:
<blockquote>
React.memo only checks for prop changes.
If your function component wrapped in React.memo has a useState, useReducer or useContext Hook in its implementation, it will still rerender when state or context change.
</blockquote>
So maybe the context value cannot be treated as “internal props”

Can you write an article about useCallback and useMemo use cases ?. Is it true to give useCallback to each function (if all dependencies are true) ?